/* Five original game-art planes, projected into a full-bleed scene. */
.title-page{--camera-x:0;--camera-y:0;position:relative;height:100svh;min-height:420px;background:#084c50;isolation:isolate;overflow:hidden}
.title-screen{position:absolute;inset:0;width:100%;height:100%;perspective:1000px}
.title-screen canvas,.title-screen .fallback{display:block;position:absolute;inset:0;width:100%;height:100%;image-rendering:pixelated;pointer-events:none}
.title-screen .fallback{object-fit:cover}
.title-screen canvas{visibility:hidden}
.title-screen[data-ready="true"] canvas{visibility:visible}
.title-screen[data-ready="true"] .fallback{visibility:hidden}
#title-canvas{z-index:0;transform:scale(1.02)}
.clouds-back{z-index:1;opacity:.27;transform:translate(calc(var(--camera-x)*12px),calc(var(--camera-y)*8px)) scale(1.1)}
.legend-plane{z-index:2;transform:translate(calc(var(--camera-x)*-24px),calc(var(--camera-y)*-14px)) scale(1.06);filter:drop-shadow(12px 18px 0 #022e3d80)}
.clouds-front{z-index:3;opacity:.52;transform:translate(calc(var(--camera-x)*44px),calc(var(--camera-y)*24px)) scale(1.14)}
.logo-plane{z-index:4;transform:translate(calc(var(--camera-x)*12px),calc(var(--camera-y)*8px)) rotateX(calc(var(--camera-y)*-1.5deg)) rotateY(calc(var(--camera-x)*2deg));filter:drop-shadow(0 5px 0 #022e3d80)}
.title-page::after{content:"";pointer-events:none;position:absolute;inset:0;z-index:4;background:linear-gradient(180deg,#07131540,transparent 20%,transparent 76%,#101214b8);box-shadow:inset 0 -1px #86efac70}
.start-zone{position:absolute;z-index:6;left:20%;top:59%;width:63.333%;height:18%;min-height:44px;display:flex;align-items:center;justify-content:center;cursor:pointer;background:#072e2a9e;border:2px solid #7fc99b85;border-top-color:#b7ffd1b3;box-shadow:inset 0 2px #b8ffd31f,0 6px 0 #07392d,0 8px 0 #041b1b,0 18px 20px -15px #031b20;transform:translate(calc(var(--camera-x)*16px),calc(var(--camera-y)*10px)) rotateX(calc(var(--camera-y)*-1.5deg)) rotateY(calc(var(--camera-x)*2deg));transition:background-color 180ms,box-shadow 180ms}
.start-zone img{display:block;width:92.68%;height:auto;image-rendering:pixelated;pointer-events:none;filter:drop-shadow(0 3px 0 #01281c)}
.start-zone:hover{background:#19523fae;box-shadow:inset 0 2px #b8ffd331,0 6px 0 #07392d,0 8px 0 #041b1b,0 22px 24px -15px #031b20}
.start-zone:active{translate:0 5px;box-shadow:inset 0 2px #b8ffd331,0 1px 0 #07392d,0 3px 0 #041b1b}
.start-zone:focus-visible{outline:3px solid #bcffd4;outline-offset:7px}
.motion-toggle{position:absolute;z-index:8;top:max(28px,env(safe-area-inset-top));right:max(32px,env(safe-area-inset-right));width:44px;height:44px;border:1px solid #b6dcc27d;border-top-color:#caffd6ad;background:#112a27d9;box-shadow:0 3px 0 #051f20;color:#dfffe8;font:bold 18px monospace;cursor:pointer;transition:background-color 150ms,translate 150ms}
.motion-toggle:hover,.motion-toggle:focus-visible{background:#28503c}
.motion-toggle:active{translate:0 2px}
.motion-toggle:disabled{display:none}
.title-corner{position:absolute;z-index:7;left:max(32px,env(safe-area-inset-left));top:max(30px,env(safe-area-inset-top));font:10px/1.8 var(--pixel);color:#e4ffe9;text-shadow:2px 2px #073030;min-height:44px}
.title-corner>span{display:block;font-size:6px;margin-top:9px;color:#b9decc;letter-spacing:.1em}
.scroll-cue{position:absolute;left:50%;bottom:18px;transform:translateX(-50%);z-index:7;font:7px/1.8 var(--pixel);color:#d8f8dd;text-shadow:2px 2px #052923;min-height:44px;display:flex;align-items:center;gap:16px;white-space:nowrap}
.scroll-cue span{color:#86efac;transition:translate 180ms}
.scroll-cue:hover span{translate:0 4px}
.parallax-hint{position:absolute;bottom:32px;left:32px;z-index:7;display:flex;align-items:center;gap:12px;font:6px/1.8 var(--pixel);letter-spacing:.05em;color:#a7d8c0}
.parallax-hint i{display:block;width:12px;height:16px;border:1px solid #a7d8c0;box-shadow:2px 2px #062927;position:relative}
.parallax-hint i::before{content:"";position:absolute;width:2px;height:4px;top:3px;left:4px;background:#a7d8c0}
@media(max-width:900px){.parallax-hint{display:none}}
@media(max-width:600px){.title-corner{top:24px;left:22px;font-size:8px}.title-corner>span{font-size:5px}.motion-toggle{top:22px;right:22px}.scroll-cue{bottom:28px;font-size:6px}.title-page{min-height:520px}.start-zone{min-height:44px;border-width:1px}.logo-plane{filter:drop-shadow(0 3px 0 #022e3d80)}}
@media(hover:none),(pointer:coarse){.parallax-hint{display:none}}
@media(prefers-reduced-motion:reduce){.scene-plane{transform:none}.title-page::after{transition:none}.parallax-hint{display:none}.start-zone{transform:none}.start-zone:active,.scroll-cue:hover span{translate:none}}

/* Wider camera separation; the original art still covers every edge. */
.title-screen{perspective:1250px}
.clouds-back{transform:translate(calc(var(--camera-x)*28px),calc(var(--camera-y)*18px)) scale(1.16)}
.legend-plane{transform:translate(calc(var(--camera-x)*-58px),calc(var(--camera-y)*-34px)) scale(1.2);filter:drop-shadow(14px 24px 18px #001e2b90)}
.clouds-front{transform:translate(calc(var(--camera-x)*104px),calc(var(--camera-y)*58px)) scale(1.3)}
.logo-plane{transform:translate(calc(var(--camera-x)*25px),calc(var(--camera-y)*16px)) rotateX(calc(var(--camera-y)*-2.5deg)) rotateY(calc(var(--camera-x)*4deg));filter:none}
.start-zone{transform:translate(calc(var(--camera-x)*34px),calc(var(--camera-y)*22px)) rotateX(calc(var(--camera-y)*-3deg)) rotateY(calc(var(--camera-x)*4deg));box-shadow:inset 0 1px 3px #b8ffd328,0 6px 12px #021e2280,0 22px 36px -10px #031b2099}
.start-zone:hover{box-shadow:inset 0 1px 3px #b8ffd338,0 8px 16px #021e2280,0 26px 40px -10px #031b20a0}
.start-zone:active{box-shadow:inset 0 2px 5px #05291f55,0 3px 8px #021e2280}
.start-zone img{filter:none}
.motion-toggle{box-shadow:0 5px 12px #041c2166}
.title-corner,.scroll-cue{text-shadow:none}
.parallax-hint i{box-shadow:0 2px 5px #06292788}
@media(max-width:600px){
  .legend-plane{transform:translate(calc(var(--camera-x)*-20px),calc(var(--camera-y)*-18px)) scale(1.2)}
  .clouds-front{transform:translate(calc(var(--camera-x)*42px),calc(var(--camera-y)*36px)) scale(1.3)}
  .logo-plane{transform:translate(calc(var(--camera-x)*12px),calc(var(--camera-y)*8px))}
  .start-zone{transform:translate(calc(var(--camera-x)*14px),calc(var(--camera-y)*10px))}
}
@media(prefers-reduced-motion:reduce){.scene-plane,.start-zone{transform:none}}
.title-screen:not([data-ready=true]) .start-zone{background:none;border:0;box-shadow:none}
.title-screen:not([data-ready=true]) .start-zone img{visibility:hidden}

/* Original game palette: no tint, opacity wash or vignette. */
.title-page::after{background:none;box-shadow:none}
.clouds-back,.clouds-front{opacity:.375}
.legend-plane{filter:none}

.title-social{position:absolute;z-index:7;bottom:5%;left:50%;translate:-50% 0;display:flex;align-items:center;justify-content:center;width:min(44vw,570px);min-height:44px;transition:filter 160ms}
.title-social img{display:block;width:100%;height:auto;image-rendering:pixelated}
.title-social:hover{filter:brightness(1.18)}.title-social:focus-visible{outline:3px solid #a0ffc3;outline-offset:8px}
@media(max-width:600px){.title-social{width:72vw;bottom:5%}}

.title-social svg{display:block;width:100%;height:auto}

/* Fit the copy into the logo's arch, following its width/height-limited artwork. */
.title-tagline{
  position:absolute;z-index:6;left:50%;top:calc(2.5svh + min(18.84vw,35.28svh));
  width:min(66vw,960px);margin:0;translate:-50% 0;text-align:center;
  font:700 clamp(12px,1.2vw,23px)/1.75 var(--pixel);color:#fff;
  -webkit-text-stroke:4px #06151a;paint-order:stroke fill;letter-spacing:0;
  transform:translate(calc(var(--camera-x)*34px),calc(var(--camera-y)*20px));
  pointer-events:none;
}
.title-tagline>span{display:block}
/* Matched game-menu frames, recessed address space and a raised start button. */
.title-actions{
  --metal-face:linear-gradient(180deg,#f1faf5 0 8%,#c7d8d2 8% 45%,#809c94 45% 51%,#adc4bb 51% 90%,#607e75 90% 100%);
  --metal-shadow:inset 3px 3px 0 #e9f6ed,inset -3px -3px 0 #47665e,0 12px 28px #021d2666;
  position:absolute;z-index:6;left:50%;top:73%;translate:-50% -50%;
  width:min(60vw,924px);height:96px;display:grid;
  grid-template-columns:minmax(0,1fr) 200px;gap:16px;
}
.contract-slot,.title-actions .start-zone{
  position:relative;isolation:isolate;
  min-width:0;height:100%;display:flex;align-items:center;justify-content:center;
  padding:16px 24px;border:4px solid #071719;border-radius:0;
  background:var(--metal-face);box-shadow:var(--metal-shadow);
}
.contract-slot::before,.title-actions .start-zone::before{content:"";position:absolute;inset:5px;z-index:-1;pointer-events:none;border:2px solid;border-color:#f4fff7 #719187 #506d65 #d6e8de}
.contract-slot{
  color:#e2eee7;overflow:hidden;
}
.contract-slot::before{inset:9px;background:#19312f;border-color:#4a6861 #d0e0d7 #d0e0d7 #4a6861;box-shadow:inset 0 3px 9px #05141166}
.contract-placeholder{
  display:block;min-width:0;font:400 12px/1.6 var(--pixel);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;text-align:center;letter-spacing:.03em;
}
.title-actions .start-zone{
  position:relative;inset:auto;width:100%;min-height:0;transform:none;translate:none;
  background:var(--metal-face);border-color:#071719;
  box-shadow:var(--metal-shadow);
  transition:filter 180ms,box-shadow 180ms,translate 180ms;
}
.title-actions .start-zone:hover{
  background:var(--metal-face);translate:0 -2px;filter:brightness(1.08);
  box-shadow:inset 3px 3px 0 #f5fff9,inset -3px -3px 0 #47665e,0 16px 30px #001b2470;
}
.title-actions .start-zone:active{background:var(--metal-face);translate:0 1px;filter:brightness(.94);box-shadow:inset 0 3px 9px #001b2450,0 8px 18px #001b2440}
.title-actions .start-zone img{display:none}
.start-word-stack{display:flex;align-items:center;width:100%;max-width:150px;pointer-events:none}
.start-word-stack svg{display:block;width:100%;height:auto;overflow:hidden;image-rendering:pixelated}
.start-word-stack image{image-rendering:pixelated}
.title-screen:not([data-ready=true]) .title-actions .start-zone{background:var(--metal-face);border:4px solid #071719;box-shadow:var(--metal-shadow)}
@media(max-width:1100px){
  .title-actions{width:80%;height:80px;grid-template-columns:minmax(0,1fr) 170px;gap:14px}
  .contract-slot,.title-actions .start-zone{padding:14px 20px}
  .start-word-stack{max-width:130px}
  .title-tagline{font-size:clamp(11px,1.2vw,14px);-webkit-text-stroke:3px #06151a}
}
@media(min-width:601px) and (max-height:800px){
  .title-actions{height:80px}
}
@media(max-width:600px){
  .title-tagline{top:calc(24svh + 29vw);width:calc(100% - 40px);font-size:10px;line-height:2;transform:translate(calc(var(--camera-x)*16px),calc(var(--camera-y)*10px))}
  .title-actions{top:70%;width:calc(100% - 32px);height:64px;grid-template-columns:minmax(0,1fr) 106px;gap:10px}
  .contract-slot,.title-actions .start-zone{padding:12px;border-width:3px;border-radius:0}
  .contract-slot::before{inset:6px}
  .contract-placeholder{font-size:9px}
}
@media(prefers-reduced-motion:reduce){.title-tagline{transform:none}.title-actions .start-zone{transition:none}}