:root{color-scheme:dark;font-family:Georgia,'Times New Roman',serif;color:#fff6df;background:#172f36}*{box-sizing:border-box}body{margin:0;overflow:hidden}button,select{font:inherit}button,a,select,input{touch-action:manipulation}button{border:1px solid #e4e5cf55;background:#102a32bb;color:#fff6df;padding:12px 18px;border-radius:7px;cursor:pointer}button:hover{background:#37525a}button:disabled{opacity:.45;cursor:default}button:focus-visible,a:focus-visible,select:focus-visible,input:focus-visible{outline:3px solid #ffd980;outline-offset:4px}[hidden]{display:none!important}#world,#scene{width:100%;height:100dvh;display:block}#scene{position:absolute;inset:0;outline:none}.topbar{position:absolute;top:0;left:0;width:100%;padding:30px 40px;display:flex;justify-content:space-between;align-items:flex-start;background:linear-gradient(#10232e99,transparent);pointer-events:none}.wordmark{color:#fff6df;text-decoration:none;font-size:23px;letter-spacing:.2em;text-shadow:0 2px 12px #0005}.wordmark span{display:block;font:11px/2.8 system-ui;letter-spacing:.12em}.actions{display:flex;gap:10px;pointer-events:auto}.actions button{font:12px system-ui;backdrop-filter:blur(10px)}.welcome{position:absolute;left:7%;top:22%;max-width:420px;text-shadow:0 2px 25px #071f2cb3}.eyebrow{font:11px system-ui;letter-spacing:.2em;color:#f5d99c;margin-bottom:20px}h1{font-weight:normal;font-size:clamp(44px,5.7vw,80px);line-height:.99;letter-spacing:-.04em;margin:0 0 24px}p{font:15px/1.65 system-ui;color:#e4e9df}h2{font-weight:normal;font-size:30px}.welcome p{font-size:15px}.primary{background:#f3d598;color:#213a3b;border:0;font:600 14px system-ui;padding:17px 23px;box-shadow:0 4px 30px #082a3822}.primary:hover{background:#ffe5ae}.primary span{padding-left:24px}.hint{font-size:12px!important;opacity:.8;margin-top:18px}.status{position:absolute;bottom:49px;left:40px;font-size:12px;background:#112c3990;padding:9px 14px;border-radius:5px;max-width:calc(100% - 80px);pointer-events:none}footer{position:absolute;bottom:20px;left:40px;right:40px;font:9px system-ui;letter-spacing:.18em;color:#f1f5dfc7;display:flex;justify-content:space-between}#study{position:absolute;right:30px;top:94px;bottom:75px;width:360px;overflow:auto;background:#102930f5;border:1px solid #ddedd133;border-radius:12px;padding:26px;box-shadow:0 15px 80px #0007;z-index:5}#study h2{margin:0 0 16px}#study p{font-size:13px}#study label{display:block;font:13px/2 system-ui;margin:15px 0}select{background:#26404a;color:#fff2ce;border:1px solid #ffffff45;padding:8px;border-radius:4px;margin-left:6px}details{font:12px/1.7 system-ui;margin:20px 0}summary{cursor:pointer}output{display:block;white-space:pre-line;margin-top:12px;font:11px/1.6 ui-monospace,monospace}a{color:#ffe2a4}.paused{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);padding:32px 45px;background:#153139ed;text-align:center;border:1px solid #f5e4c933;border-radius:14px;box-shadow:0 30px 100px #001a2388;z-index:4}.paused h2{margin:0}.paused button{display:block;margin:16px auto 0;min-width:180px}.dpad{position:absolute;bottom:100px;left:28px;display:none;grid-template-columns:repeat(3,55px);grid-template-rows:repeat(2,52px);gap:5px;touch-action:none}.dpad button{font:24px system-ui;background:#143a44c7;padding:0;user-select:none;touch-action:none}.dpad button[data-dir=up]{grid-column:2}.dpad button[data-dir=left]{grid-column:1;grid-row:2}.dpad button[data-dir=down]{grid-column:2;grid-row:2}.dpad button[data-dir=right]{grid-column:3;grid-row:2}.dpad button.pressed{background:#c9ab6a;color:#172c34}#failure{position:absolute;top:25%;left:15%;right:15%;background:#153139;padding:30px;border-radius:10px;z-index:9}@media(pointer:coarse){.dpad{display:grid}.welcome{top:19%}.status{bottom:32px}.hint{max-width:270px}}@media(max-width:650px){.topbar{padding:20px}.wordmark{font-size:17px}.wordmark span{font-size:9px}.actions{gap:5px}.actions button{padding:9px 10px;font-size:11px}.welcome{left:7%;top:19%;max-width:300px}h1{font-size:49px}.welcome p{font-size:13px}.status{left:20px;max-width:calc(100% - 40px);font-size:10px}footer{left:20px;right:20px;font-size:8px}footer span{display:none}#study{left:15px;right:15px;width:auto;top:90px;bottom:45px}.paused{padding:25px;width:80%}.dpad{bottom:90px;left:20px}}@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto}}

#storm-cue{position:absolute;top:112px;left:50%;transform:translateX(-50%);width:max-content;max-width:calc(100% - 40px);padding:12px 17px;border:1px solid #c7d6d3;background:#102930ed;border-radius:7px;font:13px/1.4 system-ui;text-align:center;pointer-events:none}#storm-cue[data-phase=warning]{border:2px solid #ffe0a0;color:#ffe0a0}#storm-cue[data-phase=surge]{border:2px solid #fff6df;font-weight:700}.warning-track{display:none;height:4px;background:#fff2;margin-top:9px}.warning-track span{display:block;height:100%;width:var(--warning);background:#ffe0a0}#storm-cue[data-phase=warning] .warning-track{display:block}@media(max-width:650px){#storm-cue{top:97px;font-size:12px;width:calc(100% - 40px)}}

/* Keep entry text and its action together above the footer on short landscape views. */
@media (max-height:500px) and (min-width:320px) and (orientation:landscape){
  .welcome{top:84px;right:7%;max-width:740px;max-height:calc(100dvh - 156px);overflow:auto;padding:8px;display:grid;grid-template-columns:minmax(140px,1fr) minmax(220px,1.2fr);column-gap:24px;row-gap:8px}
  .welcome .eyebrow{grid-column:1;grid-row:1;margin:0}
  .welcome h1{grid-column:1;grid-row:2 / 4;font-size:36px;margin:0}
  .welcome>p:not(.hint){grid-column:2;grid-row:1;font-size:13px;line-height:1.5;margin:0}
  .welcome .primary{grid-column:2;grid-row:2;justify-self:start}
  .welcome .hint{grid-column:2;grid-row:3;margin:0;max-width:none}
  #welcome:not([hidden])~.dpad{display:none}
}
@media (max-height:500px) and (min-width:320px) and (max-width:650px) and (orientation:landscape){.welcome{top:72px}}

/* Keep the pause panel below the header when a narrow landscape view is short. */
@media (max-height:420px) and (min-width:320px) and (max-width:800px) and (orientation:landscape){
  .paused{top:84px;transform:translateX(-50%);width:min(480px,calc(100% - 40px));max-height:calc(100dvh - 122px);overflow:auto;padding:12px 16px;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px 12px}
  .paused h2{grid-column:1 / -1;font-size:26px}
  .paused p{grid-column:1 / -1;font-size:13px;margin:0}
  .paused button{margin:0;min-width:0;min-height:48px}
}
@media (max-height:420px) and (min-width:320px) and (max-width:650px) and (orientation:landscape){.paused{top:72px;max-height:calc(100dvh - 110px)}}

/* A single scrolling column keeps entry text readable in smaller landscape windows. */
@media (max-height:500px) and (min-width:320px) and (max-width:499px) and (orientation:landscape){
  .welcome{display:flex;flex-direction:column;align-items:flex-start}
  .welcome>*{flex-shrink:0}
}

/* Fit both title lines inside the shortest scrolling entry panel. */
@media (max-height:260px) and (min-width:320px) and (max-width:399px) and (orientation:landscape){.welcome h1{font-size:34px}}

/* Keep the inactive touch pad clear of header actions while a tiny view is paused. */
@media (max-height:420px) and (min-width:320px) and (max-width:399px) and (orientation:landscape){#paused:not([hidden])~.dpad{display:none}}

/* Keep storm messages beside the touch pad on short, narrow landscape views. */
@media (pointer:coarse) and (max-height:420px) and (min-width:400px) and (max-width:650px) and (orientation:landscape){
  #storm-cue{left:215px;right:20px;transform:none;width:auto;max-width:none}
}

/* Let short landscape windows scroll every recovery message and its retry action. */
@media (max-height:420px) and (min-width:320px) and (max-width:800px) and (orientation:landscape){
  #failure{top:16px;left:20px;right:20px;max-height:calc(100dvh - 32px);overflow:auto;padding:20px}
}

/* Return to the short family entry from the notes introduction. */
.transporting .dpad{display:none}
@media(max-height:420px){.transporting .status{bottom:8px;margin:0;line-height:1.4}.transporting footer{display:none}}
#study .family-return{display:flex;align-items:center;min-height:44px;width:fit-content;margin:10px 0 16px;padding:10px 12px;border:1px solid #e4e5cf55;border-radius:6px;font:13px/1.5 system-ui}

/* Keep chase header actions large enough for touch. */
.actions button{min-height:44px;min-width:44px}

/* Keep the player clear of existing controls and messages during short touch play. */
@media (pointer:coarse) and (min-width:320px) and (max-width:800px) and (min-height:240px) and (max-height:420px){
  body:not(.transporting) #world:has(#welcome[hidden]):has(#paused[hidden]):has(#study[hidden]){
    .dpad{left:20px;bottom:4px;grid-template-columns:repeat(4,48px);grid-template-rows:48px}
    .dpad button[data-dir]{grid-column:auto;grid-row:auto}
    .status{top:68px;bottom:auto;left:20px;right:20px;max-width:none;margin:0;padding:6px 10px;font-size:10px;line-height:1.4}
    footer{top:112px;bottom:auto}
    #storm-cue{top:112px;left:auto;right:8px;transform:none;width:108px;max-width:none;padding:4px 6px;font-size:10px;line-height:1.3}
  }
}

/* Give All Studies a clear target while keeping the existing controls and panels separate. */
footer{bottom:0;align-items:center}
footer a{display:flex;align-items:center;min-width:44px;min-height:44px}
footer a:focus-visible{outline-offset:-4px}
@media (pointer:coarse){.status{bottom:34px}}
@media (min-width:320px) and (max-width:800px) and (max-height:420px){
  footer{left:auto;right:8px;top:auto;bottom:0;gap:12px}
  footer a{width:72px;line-height:1.4}
  .paused{max-height:calc(100dvh - 128px)}
}
@media (min-width:320px) and (max-width:650px) and (max-height:420px){.paused{max-height:calc(100dvh - 116px)}}
@media (pointer:coarse) and (min-width:320px) and (max-width:800px) and (min-height:240px) and (max-height:420px){
  body:not(.transporting) #world:has(#welcome[hidden]):has(#paused[hidden]):has(#study[hidden]) footer{left:auto;right:8px;top:auto;bottom:0}
}

/* Keep the existing All Studies label readable inside its touch target. */
footer a{font-size:12px;line-height:1.4;letter-spacing:.04em}
@media (min-width:320px) and (max-width:800px) and (max-height:420px){footer a{width:80px}}

/* Keep the existing storm messages readable during short touch play. */
@media (pointer:coarse) and (min-width:320px) and (max-width:800px) and (min-height:240px) and (max-height:420px){
  body:not(.transporting) #world:has(#welcome[hidden]):has(#paused[hidden]):has(#study[hidden]) #storm-cue{font-size:12px;line-height:1.4}
}

/* Keep the existing status readable within its short touch play panel. */
@media (pointer:coarse) and (min-width:320px) and (max-width:800px) and (min-height:240px) and (max-height:420px){
  body:not(.transporting) #world:has(#welcome[hidden]):has(#paused[hidden]):has(#study[hidden]) .status{font-size:12px;line-height:1.4;padding:3px 10px}
}

/* Keep the remaining narrow status text readable beside existing controls. */
@media (max-width:650px){
  body:not(.transporting) .status{font-size:12px;line-height:1.4;padding:3px 14px}
}

/* Keep transport messages readable within the existing narrow status placement. */
@media (max-width:650px){
  body.transporting .status{font-size:12px;line-height:1.4;padding:3px 14px}
}

/* Give the existing reduced-motion checkbox label a full touch target. */
#study label:has(#calm){display:flex;align-items:center;gap:8px;min-height:44px}
#study #calm{flex:none;margin:0}

/* Give the existing native study disclosure a full touch target and visible focus. */
#study summary{min-height:44px;padding:10px 8px;touch-action:manipulation}
#study summary:focus-visible{outline:3px solid #ffd980;outline-offset:-3px;border-radius:4px}

/* Give the existing Software notices link a full touch target and inside focus. */
#study details a{display:flex;align-items:center;width:fit-content;min-width:44px;min-height:44px;padding:10px 8px}
#study details a:focus-visible{outline:3px solid #ffd980;outline-offset:-3px;border-radius:4px}