/* Opening-only composition; game view keeps its existing handheld layout. */
body[data-view="opening"]{padding:0;background:#082338}
body[data-view="opening"] .shell{width:100%;max-width:none;height:100dvh;max-height:none;overflow:auto}
#opening-screen{display:block;position:relative;isolation:isolate;flex:none;width:100%;height:100%;min-height:620px;padding:0;overflow-x:hidden;overflow-y:auto;background:#082338;text-align:left}
.title-landscape{position:absolute;inset:0;z-index:0;pointer-events:none}
.title-cover-picture{position:absolute;inset:0;overflow:hidden;display:block;opacity:0;transition:opacity .7s ease}
.title-cover-picture img{display:block;width:100%;height:100%;object-fit:cover;object-position:70% 50%;transform-origin:70% 50%;max-width:none}
#opening-screen[data-cover="ready"] .title-cover-picture{opacity:1}
#opening-screen[data-cover="ready"] .title-landscape canvas,#opening-screen[data-cover="ready"] .title-hero-stage,#opening-screen[data-cover="ready"] .title-scene-caption{display:none}
.title-landscape canvas{position:static;display:block;visibility:visible;width:100%;height:100%;opacity:0;transition:opacity .8s ease;image-rendering:auto}
#opening-screen[data-scene="ready"] canvas{opacity:1}
.title-landscape::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,#061b34d9,#061b34a6 30%,#061b3433 51%,transparent 67%),linear-gradient(0deg,#061b3466,transparent 35%);pointer-events:none}
.title-hero-stage{position:absolute;right:1%;top:24%;width:49%;height:72%;pointer-events:none}
.title-content{position:relative;z-index:1;width:min(49%,620px);min-height:100%;margin-left:5%;padding:clamp(40px,7dvh,90px) 0 28px;display:flex;flex-direction:column;justify-content:center;align-items:flex-start;gap:clamp(18px,3dvh,32px)}
#opening-screen .title-art{width:112%;max-width:660px;aspect-ratio:3/1;margin:0 0 0 -6%;filter:drop-shadow(0 6px 18px #03162f99)}
#opening-screen .opening-copy{color:#fff6db;font:clamp(12px,1.18vw,17px)/1.9 monospace;margin:0;max-width:none;text-wrap:balance;text-shadow:0 2px 6px #031326}
#opening-screen .title-actions{width:92%;max-width:450px;display:flex;flex-direction:column;gap:12px;margin:6px 0 0}
#opening-screen .title-actions button{width:100%;min-height:64px;border:3px solid #204961;border-radius:999px;background:linear-gradient(105deg,#ffdd68,#efbd45);box-shadow:inset 0 0 0 2px #fff1a6,0 4px 0 #647e6e;color:#173e59;font:bold clamp(12px,1.25vw,17px)/1.5 monospace;text-align:left;letter-spacing:.01em;padding:13px 26px;display:flex;align-items:center;justify-content:space-between;gap:12px;cursor:pointer;transition:transform .15s,background .15s}
#opening-screen .title-actions button:hover:not(:disabled){background:#ffe68a;transform:translateY(-2px)}
#opening-screen .title-actions button:active:not(:disabled){transform:translateY(2px);box-shadow:inset 0 0 0 2px #fff1a6,0 1px 0 #647e6e}
#opening-screen .title-actions button:focus-visible{outline:3px solid #fff9df;outline-offset:3px;box-shadow:0 0 0 6px #204961}
#opening-screen .title-actions button:disabled{opacity:.6;cursor:wait}
#opening-screen .title-actions #resume-adventure{min-height:85px}
.title-button-copy{display:flex;flex-direction:column;align-items:flex-start;gap:4px;min-width:0}
#resume-location{font:11px/1.5 monospace;letter-spacing:0;color:#365867;text-transform:none}
#opening-screen .title-tag{max-width:430px;color:#e1e9da;font:11px/1.8 monospace;margin:0;text-wrap:balance;text-shadow:0 1px 4px #031326}
.title-scene-caption{position:absolute;right:5%;bottom:3%;margin:0;color:#fff9df;font:11px/1.6 monospace;letter-spacing:.1em;text-shadow:0 1px 3px #284330;pointer-events:none}
#opening-screen:not([data-scene="ready"]) .title-scene-caption{display:none}
.title-music-copy{display:flex;align-items:center;gap:10px;min-width:0}.title-music-copy svg{flex:none}#title-music-label{text-transform:uppercase}
@media(max-width:650px){
 #opening-screen{min-height:740px;text-align:center}
 .title-landscape::after{background:linear-gradient(180deg,#061b344d,transparent 30%,transparent 47%,#08233855 60%,#082338 82%)}
 .title-cover-picture{inset:0 0 auto;height:76%}
 #opening-screen:has(#resume-adventure[hidden]) .title-cover-picture{height:84%}
 .title-cover-picture::after{content:"";position:absolute;inset:0;background:linear-gradient(0deg,#082338,transparent 22%)}
 .title-cover-picture img{object-position:50% 50%;transform-origin:50% 55%}
 .title-content{width:auto;min-height:100%;margin:0 22px;padding:48px 0 21px;justify-content:flex-start;align-items:center;gap:12px}
 #opening-screen .title-art{width:min(100%,420px);max-width:none;margin:0;flex:none}
 #opening-screen .opening-copy{font-size:11px;line-height:1.7;max-width:330px}
 .title-hero-stage{right:7%;top:26%;width:86%;height:36%}
 #opening-screen .title-actions{width:100%;max-width:380px;margin-top:auto;padding-top:191px;gap:11px}
 #opening-screen .title-actions button{min-height:54px;font-size:12px;padding:11px 22px}
 #opening-screen .title-actions #resume-adventure{min-height:72px}
 #resume-location{font-size:10px}
 #opening-screen .title-tag{font-size:10px;max-width:320px}
 .title-scene-caption{display:none}
}
@media(min-width:651px) and (max-height:650px){
 #opening-screen{min-height:390px}
 .title-content{width:48%;padding:12px 0;gap:8px}
 #opening-screen .title-art{width:72%;margin-left:0;max-width:300px}
 #opening-screen .opening-copy{font-size:10px;line-height:1.4}
 #opening-screen .title-actions{max-width:350px;margin:0;gap:6px}
 #opening-screen .title-actions button{min-height:44px;font-size:11px;padding:8px 20px}
 #opening-screen .title-actions #resume-adventure{min-height:52px}
 #opening-screen .title-tag{font-size:9px;line-height:1.5}
 .title-hero-stage{top:13%;height:81%}
}
@media(max-width:360px){
 .title-content{margin:0 16px;padding-top:46px}
 #opening-screen{min-height:700px}
 #opening-screen:has(#resume-adventure:not([hidden])) .title-cover-picture{height:70%}
 #opening-screen .title-actions{padding-top:156px}
 #opening-screen .opening-copy{font-size:10px}
 .title-hero-stage{top:25%;height:34%}
}
@media(prefers-reduced-motion:reduce){.title-landscape canvas,.title-cover-picture,#opening-screen .title-actions button{transition:none}}