/* The cover, lettering and four pendants are one finished illustration.
   All hit targets share its intrinsic 1672 × 941 coordinate space. */
#title-screen.title-screen{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;padding:0;margin:0;background:#101b29;overflow:hidden;isolation:isolate}
#title-screen[hidden]{display:none!important}
.title-art-stage{position:relative;flex:none;width:min(calc(100vw - env(safe-area-inset-left,0px) - env(safe-area-inset-right,0px)),calc((100dvh - env(safe-area-inset-top,0px) - env(safe-area-inset-bottom,0px))*1.77683316));aspect-ratio:1672/941;overflow:hidden;isolation:isolate}
#title-cover{display:block;width:100%;height:100%;object-fit:contain;user-select:none;-webkit-user-drag:none}
#title-bells,#title-petals{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
#title-bells{z-index:1;opacity:0}#title-bells.ready{opacity:1}
#title-petals{z-index:2}
.lit-cover{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;z-index:2;opacity:0;transition:opacity .18s}
.lit-new{clip-path:ellipse(4.4% 16% at 61.96% 70.15%)}.lit-continue{clip-path:ellipse(4.4% 16% at 69.86% 64.9%)}.lit-load{clip-path:ellipse(4.4% 16% at 78.83% 70.15%)}.lit-settings{clip-path:ellipse(4.4% 16% at 87.44% 64.2%)}
.title-art-stage:has(.cover-new.is-lit) .lit-new,.title-art-stage:has(.cover-continue.is-lit) .lit-continue,.title-art-stage:has(.cover-load.is-lit) .lit-load,.title-art-stage:has(.cover-settings.is-lit) .lit-settings{opacity:1}
@media(hover:hover){.title-art-stage:has(.cover-new:not(:disabled):hover) .lit-new,.title-art-stage:has(.cover-continue:not(:disabled):hover) .lit-continue,.title-art-stage:has(.cover-load:not(:disabled):hover) .lit-load,.title-art-stage:has(.cover-settings:not(:disabled):hover) .lit-settings{opacity:1}}
.cover-sr-only{position:absolute!important;width:1px!important;height:1px!important;padding:0!important;margin:-1px!important;overflow:hidden!important;clip-path:inset(50%)!important;white-space:nowrap;border:0!important}
.cover-hotspots{position:absolute;inset:0;z-index:3;pointer-events:none}
.cover-hotspots .cover-hotspot{position:absolute;display:block;padding:0;margin:0;min-width:44px;min-height:44px;width:4.9%;height:18.8%;border:0;border-radius:48%;background:transparent;box-shadow:none;color:transparent;transform:translate(-50%,-50%);cursor:pointer;pointer-events:auto;touch-action:manipulation;-webkit-tap-highlight-color:transparent}
.cover-new{left:61.96%;top:70.15%}.cover-continue{left:69.86%;top:64.9%}.cover-load{left:78.83%;top:70.15%}.cover-settings{left:87.44%;top:64.2%}
.cover-hotspot::before,.cover-hotspot::after{content:'';position:absolute;inset:0;border-radius:50%;pointer-events:none;opacity:0;transition:opacity .22s ease}
.cover-hotspots .cover-hotspot::before,.cover-hotspots .cover-hotspot::after{display:none!important}
.cover-hotspot::before{background:radial-gradient(ellipse,#fff9d37a 0,#bfe7ff5c 40%,transparent 75%);mix-blend-mode:screen;box-shadow:0 0 18px 5px #c3e5ff80,inset 0 0 12px #fff0be88}
.cover-hotspot::after{inset:7% 12%;border:1px solid #fff1ae;box-shadow:0 0 8px #e8f5ff}
@media(hover:hover){.cover-hotspot:not(:disabled):hover::before{opacity:.75}.cover-hotspot:not(:disabled):hover::after{opacity:.55}}
.cover-hotspot:not(:disabled):active::before,.cover-hotspot.is-lit::before{opacity:1}
.cover-hotspot.is-lit::after,.cover-hotspot:focus-visible::after{opacity:1}
.cover-hotspot:focus-visible{outline:1px solid #fff6c7;outline-offset:4px}
.cover-hotspot:disabled{cursor:default;background:linear-gradient(#26314238,#26314226)}
.cover-utilities{position:absolute;bottom:max(4px,env(safe-area-inset-bottom,0px));left:max(8px,env(safe-area-inset-left,0px));display:flex;gap:8px;z-index:5;opacity:.62;transition:opacity .2s}
.cover-utilities:hover,.cover-utilities:focus-within{opacity:1}
.cover-utilities button{min-height:28px;border:0;background:#14243d66;color:#e6e8ec;padding:4px 8px;font:10px/1.4 var(--serif);border-radius:3px;text-shadow:0 1px 3px #162638}
@media(orientation:portrait){.cover-hotspots .cover-hotspot{min-width:24px;min-height:38px}}
@media(prefers-reduced-motion:reduce){.cover-hotspot::before,.cover-hotspot::after,.cover-utilities{transition:none}#title-bells{display:none}}