/* A quiet island, the theme's first drumbeat, then the places ahead. */
#opening-stage[hidden],#opening-start[hidden],#opening-pause[hidden]{display:none}
#opening-stage{position:fixed;inset:0;overflow:hidden;background:#020511;z-index:0;pointer-events:none;--opening-shade:0}
.opening-view{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity .8s ease;will-change:opacity,transform}
.opening-view:first-child{object-position:50% 48%;opacity:1}
#opening-stage::after{content:'';position:absolute;inset:0;background:linear-gradient(#01030e55,transparent 25%,transparent 65%,#01030e88);box-shadow:inset 0 0 15vw #0005;pointer-events:none}
.opening-shade{position:absolute;inset:0;background:#010412;opacity:var(--opening-shade);z-index:1}
#opening-caption,#opening-tagline{position:absolute;left:4%;right:4%;margin:0;text-align:center;z-index:2;font:400 clamp(22px,3.7vw,52px)/1.3 var(--pixel-font);letter-spacing:.015em;color:#f0a7e2;text-shadow:2px 3px 0 #170e30,0 0 12px #08051d;opacity:0;text-wrap:balance}
#opening-caption{bottom:12%}
#opening-tagline{top:47%;font-size:clamp(28px,4.8vw,64px);color:#f4c7eb}
#opening-logo{position:absolute;inset:0;display:flex;flex-direction:column;justify-content:center;align-items:center;z-index:2;opacity:0;padding:50px 20px;text-align:center}
.opening-logo-kicker{font:700 clamp(14px,1.8vw,24px)/1.4 var(--pixel-font);letter-spacing:.24em;color:#ffd68a;text-shadow:0 2px 5px #000;margin-bottom:18px}
.opening-logo-title{font:900 clamp(46px,9.5vw,138px)/.92 var(--pixel-font);letter-spacing:-.045em;color:#ffcc53;text-shadow:3px 5px 0 #110b27,0 0 35px #000}
#opening-start{position:fixed;z-index:4;left:50%;bottom:max(24px,env(safe-area-inset-bottom));transform:translateX(-50%);padding:12px 24px;min-height:46px;font:18px/1.4 var(--pixel-font);border:1px solid #c7a8d2;color:#f7d6f1;background:#050b20d9;white-space:nowrap}
#story-screen[data-entrance=cinematic]{padding:0;overflow:hidden;background:#020511}
#story-screen[data-entrance=cinematic]::before{display:none}
#story-screen[data-entrance=cinematic] .story-content{visibility:hidden;pointer-events:none}
#story-screen[data-entrance=cinematic] .opening-toolbar{position:fixed;z-index:4;gap:8px}
#story-screen[data-entrance=cinematic] .opening-toolbar button{background:#030817b8;border-color:#c7a8d259;color:#efdae9}
#story-screen button:focus-visible{outline:2px solid #ffe4fb;outline-offset:4px}
#opening-stage.reduced-motion .opening-view{transition:none;transform:none!important}
@media(prefers-reduced-motion:reduce){.opening-view{transition:none;transform:none!important}}
@media(max-width:600px){#opening-caption{bottom:19%;left:6%;right:6%;font-size:clamp(24px,6vw,36px)}.opening-view:first-child{object-fit:contain}#opening-stage{background:#03091d}.opening-logo-title{font-size:clamp(44px,13vw,78px)}#opening-tagline{left:8%;right:8%;font-size:clamp(28px,8vw,44px)}.opening-toolbar button{font-size:14px;padding:8px 10px}}
@media(max-height:450px){#opening-caption{bottom:16%;font-size:26px}#opening-start{bottom:8px;padding:7px 16px;min-height:40px}.opening-logo-title{font-size:clamp(40px,12vh,70px)}.opening-logo-kicker{margin-bottom:10px}#opening-tagline{font-size:34px}}

/* Original game wordmark: pointed Roman capitals and violet carved shadows. */
@font-face{font-family:MykonosTitle;src:url('mykonos-title.woff') format('woff');font-weight:700;font-style:normal;font-display:swap}
#opening-logo .opening-logo-kicker,#story-screen[data-mode=title] #story-kicker{font-family:MykonosTitle,Georgia,serif;font-weight:700;letter-spacing:.085em;color:#e687de;text-shadow:1px 1px 0 #732070,2px 3px 0 #160724,0 0 14px #000;margin-bottom:9px}
#opening-logo .opening-logo-title,#story-screen[data-mode=title] #story-title{font-family:MykonosTitle,Georgia,serif;font-size:clamp(42px,10vw,142px);font-weight:700;line-height:1;letter-spacing:-.045em;color:#c238bd;text-shadow:none;max-width:100%;margin:0;padding:0 .08em .17em;isolation:isolate}
.mykonos-logo-word{display:block;white-space:nowrap;line-height:.94;transform:skewX(-4deg);padding-right:.06em}
.mykonos-logo-word+ .mykonos-logo-word{margin-top:-.015em;margin-left:.14em}
.mykonos-logo-letter{display:inline-block;position:relative;color:#c238bd;background:linear-gradient(180deg,#ee7cde 4%,#c137bb 38%,#a126a8 73%,#68196e);background-clip:text;-webkit-background-clip:text;-webkit-text-fill-color:transparent;filter:drop-shadow(-1px -1px 0 #ef8cdf) drop-shadow(1px 1px 0 #6e176c) drop-shadow(2px 2px 0 #330a40) drop-shadow(3px 4px 0 #090414);transform-origin:50% 80%}
.mykonos-logo-letter:first-child{font-size:1.25em;line-height:.6;vertical-align:-.08em;margin-right:-.035em;transform:scaleY(1.13) rotate(-3deg)}
.mykonos-logo-letter:nth-child(3){transform:translateY(-.015em) rotate(-2deg)}
.mykonos-logo-letter:nth-child(5){transform:translateY(.025em) rotate(2deg)}
.mykonos-logo-word+ .mykonos-logo-word .mykonos-logo-letter:first-child{transform:scaleY(1.13) rotate(2deg)}
#story-screen[data-mode=title] #story-title{font-size:clamp(40px,8.6vw,110px);margin-bottom:12px}
#story-screen[data-mode=title] #story-theme{color:#ecc0e6}
@media(max-width:600px){#opening-logo .opening-logo-title{font-size:clamp(38px,12vw,70px)}#story-screen[data-mode=title] #story-title{font-size:clamp(36px,11vw,64px)}#opening-logo .opening-logo-kicker{font-size:clamp(14px,3.9vw,22px)}}
@media(max-height:450px){#opening-logo .opening-logo-title{font-size:clamp(40px,15vh,66px)}#story-screen[data-mode=title] #story-title{font-size:clamp(34px,12vh,52px)}#opening-logo .opening-logo-kicker{font-size:16px;margin-bottom:4px}}
@media(forced-colors:active){.mykonos-logo-letter{background:none;-webkit-text-fill-color:CanvasText;filter:none}}

/* Credits stay legible in the same pixel face as the adventure. */
#opening-caption,#opening-tagline,#opening-credit{font-family:'Mykonos Pixel',monospace;font-synthesis:none}
#opening-credit{position:absolute;inset:28% 8% auto;z-index:3;margin:0;color:#f4d474;text-align:center;white-space:pre-line;font:400 clamp(20px,3.1vw,42px)/1.55 'Mykonos Pixel',monospace;text-shadow:2px 2px #000;opacity:0;text-wrap:balance}
#story-screen[data-mode=prologue] #prologue-stage{padding:0;gap:0;background:#000}
#prologue-canvas{flex:none;width:100%;height:100%;max-height:100%;aspect-ratio:16/9;object-fit:contain}
#story-screen[data-mode=prologue] .prologue-controls{position:absolute;z-index:5;top:max(12px,env(safe-area-inset-top));left:16px;right:16px;width:auto;order:0;font-family:'Mykonos Pixel',monospace}
#prologue-caption{position:absolute;z-index:5;left:50%;bottom:max(22px,env(safe-area-inset-bottom));transform:translateX(-50%);width:min(90%,1000px);border:0;background:#000b;font:400 clamp(20px,2.3vw,30px)/1.4 'Mykonos Pixel',monospace;text-align:center;text-wrap:balance;padding:8px 14px;color:#f4d474}
#prologue-caption[hidden]{display:none}
#story-screen[data-mode=prologue][data-shot=cove],#story-screen[data-shot=cove] #prologue-stage{background:transparent}
#story-screen[data-shot=cove]::backdrop{background:transparent}
#story-screen[data-shot=cove] #prologue-caption{bottom:max(24px,9dvh)}
.cove-intro .game-hud,.cove-intro .scene-meta,.cove-intro #game-subtitle{visibility:hidden}
.cove-intro #alexios{opacity:var(--intro-actor-opacity,0)}
@media(max-width:600px){#opening-credit{inset:26% 7% auto;font-size:clamp(19px,4.5vw,27px);line-height:1.55}.prologue-controls #prologue-scene{font-size:14px}#prologue-caption{font-size:20px}}
@media(max-height:450px){#opening-credit{inset:24% 10% auto;font-size:22px;line-height:1.4}#story-screen[data-shot=cove] #prologue-caption{bottom:10px;font-size:18px}}

/* A contained, still island silhouette; the entire coastline remains in frame. */
#opening-stage .opening-view{inset:8% auto auto 11%;width:78%;height:74%;object-fit:contain;object-position:center;transform:none!important;transition:none;will-change:auto}
#opening-stage{background:#020611}
#opening-caption{bottom:10%}
#prologue-intertitle{position:absolute;z-index:6;inset:0;display:flex;align-items:center;justify-content:center;margin:0;padding:24px;text-align:center;background:#000;color:#f4d474;font:400 clamp(24px,3.5vw,46px)/1.5 'Mykonos Pixel',monospace}
#prologue-intertitle[hidden]{display:none}
#story-screen[data-shot=summer] .prologue-controls{z-index:7}
#story-screen[data-shot=summer] #prologue-scene{visibility:hidden}
#story-screen[data-shot=theft] #prologue-stage,#story-screen[data-shot=theft]{background:#000}
@media(max-width:600px){#opening-stage .opening-view{left:5%;width:90%;top:12%;height:65%}#opening-caption{bottom:16%}}