:root{
 --ink:#000;--paper:#e7e8df;--muted:#aab1a8;--accent:#a7b9aa;--danger:#a24b48;--backing:rgb(7 9 8 / 82%);--panel-fade:600ms;
 color-scheme:dark;font-family:"Avenir Next Condensed","Arial Narrow","Helvetica Neue",Arial,sans-serif;color:var(--paper);background:var(--ink)
}
*{box-sizing:border-box}body{margin:0;background:var(--ink)}[hidden]{display:none!important}button,input{font:inherit}button{color:inherit;cursor:pointer}button:disabled{opacity:.35;cursor:default}button:focus-visible,input:focus-visible{outline:1px solid var(--paper);outline-offset:6px}
.creator-credit{position:fixed;z-index:3;right:max(1.25rem,env(safe-area-inset-right));bottom:max(0.75rem,env(safe-area-inset-bottom));margin:0;color:var(--muted);font-family:ui-monospace,"SFMono-Regular",Menlo,monospace;font-size:0.625rem;line-height:1.5;text-shadow:0 1px 4px #000}
.creator-credit a{display:inline-block;padding:0.5rem 0;color:inherit;text-decoration:underline;text-decoration-color:rgb(170 177 168 / 45%);text-underline-offset:3px}
.creator-credit a:hover{color:var(--paper);text-decoration-color:currentColor}
.creator-credit a:focus-visible{outline:1px solid var(--paper);outline-offset:4px}
#stage{position:relative;isolation:isolate;height:100dvh;min-height:30rem;overflow:hidden;display:grid;place-items:center}
#world-viewport{position:absolute;z-index:-3;overflow:hidden;pointer-events:none;width:100%;height:100%}
#world{position:absolute;inset:0;isolation:isolate;transform-origin:center;will-change:transform}
@media(min-width:900px){#stage #poster,#stage #screen video{object-fit:cover}}
#poster,#screen,#screen video,#shade{position:absolute;inset:0;width:100%;height:100%}#poster,#screen video{object-fit:contain;background:var(--ink)}#poster{z-index:-4}#screen{z-index:-3}#screen video{visibility:hidden}#screen video.active{visibility:visible}#shade{z-index:-2;background:linear-gradient(0deg,rgb(2 5 4 / 76%),transparent 42%,rgb(2 5 4 / 22%))}
header{position:absolute;z-index:2;top:clamp(1.125rem,3vw,2.25rem);left:clamp(1.25rem,4vw,3.625rem);right:clamp(1.25rem,4vw,3.625rem);display:flex;align-items:center;justify-content:space-between;color:rgb(231 232 223 / 58%);transition:color 180ms ease}header:hover,header:focus-within{color:var(--paper)}
.game-title{margin:0;font-size:0.6875rem;font-weight:500;letter-spacing:.18em;text-transform:uppercase}header nav{display:flex;align-items:center;gap:1.375rem}header :is(button,a){border:0;border-bottom:1px solid rgb(231 232 223 / 22%);padding:8px 0;background:transparent;color:inherit;font-family:ui-monospace,"SFMono-Regular",Menlo,monospace;font-size:0.625rem;line-height:normal;letter-spacing:.04em;text-decoration:none}header :is(button,a):hover{border-color:currentColor}header a:focus-visible{outline:1px solid var(--paper);outline-offset:6px}
#panel{position:absolute;left:clamp(1.5rem,7vw,6.75rem);bottom:clamp(4.5rem,11vh,7.25rem);width:min(36.25rem,calc(100% - 3rem));text-align:left;transition:opacity var(--panel-fade) ease,transform var(--panel-fade) ease}#panel.depart{opacity:0;transform:translateY(4px);pointer-events:none}
h1{max-width:14ch;margin:0;font-size:clamp(1.875rem,4vw,3.25rem);font-weight:420;line-height:1.08;letter-spacing:-.025em;text-wrap:balance;text-shadow:0 2px 1.5rem rgb(1 3 2 / 92%)}form{margin:2.125rem 0 0;max-width:21.875rem}input{width:100%;border:0;border-bottom:1px solid var(--muted);border-radius:0;padding:0.875rem 2px;background:rgb(7 9 8 / 42%);color:inherit;font-size:1.3125rem;text-align:left}input::placeholder{color:rgb(170 177 168 / 72%)}
.next,.choice,#retry,#skip-failure,#resume{min-height:2.75rem;border:0;background:transparent}.next{display:block;width:max-content;margin:1.875rem 0 0;padding:0.625rem 1.25rem;border:1px solid rgb(231 232 223 / 44%);border-radius:0;background:rgb(7 9 8 / 62%);-webkit-backdrop-filter:blur(0.75rem);backdrop-filter:blur(0.75rem);box-shadow:0 4px 1.125rem rgb(0 0 0 / 24%);color:rgb(231 232 223 / 90%);font-size:0.9375rem;text-align:center;text-shadow:0 1px 3px rgb(1 3 2 / 95%),0 2px 0.625rem rgb(1 3 2 / 75%);transition:color 180ms ease,border-color 180ms ease,background 180ms ease}.next:hover,.next:focus-visible{color:var(--paper);border-color:rgb(231 232 223 / 68%);background:rgb(7 9 8 / 76%)}.next:active{transform:translateY(1px)}
.steps{display:flex;gap:0.875rem;margin:0 0 1.5625rem;padding:0;list-style:none;font-family:ui-monospace,"SFMono-Regular",Menlo,monospace;font-size:0.5625rem;color:rgb(170 177 168 / 48%)}.steps li{display:grid;place-items:center;width:1.125rem;height:1.125rem;border:1px solid currentColor;border-radius:50%}.steps [aria-current]{color:var(--paper);box-shadow:0 0 0 5px rgb(167 185 170 / 8%)}
#stage:is([data-phase=name],[data-phase=instructions]) #panel{left:0;right:0;bottom:clamp(2rem,7vh,4.5rem);margin-inline:auto;text-align:center}
#stage:is([data-phase=name],[data-phase=instructions]) :is(h1,form,.next){margin-inline:auto}
#stage[data-phase=name] input{text-align:center}
#stage[data-phase=instructions] .steps{justify-content:center}
#stage:is([data-phase=name],[data-phase=instructions]) #panel{transition-duration:var(--panel-fade);transition-timing-function:ease-in-out}
#stage[data-phase=situation] #panel,#stage[data-phase=cinematic] #panel.cinematic-situation{left:0;right:0;bottom:clamp(2rem,7vh,4.5rem);width:min(45rem,calc(100% - 3rem));margin-inline:auto;text-align:center;transition-duration:var(--panel-fade);transition-timing-function:ease-in-out;animation:panel-enter var(--panel-fade) ease-in-out backwards}
#stage[data-phase=situation] .next,#stage[data-phase=cinematic] .cinematic-situation .next{margin-inline:auto}
.situation-line,.cinematic-situation-line{max-width:32ch;margin:0 auto;color:var(--paper);font-size:clamp(1.375rem,3vw,2.125rem);font-weight:420;line-height:1.2;letter-spacing:-.015em;text-wrap:balance;text-shadow:0 2px 1.5rem rgb(1 3 2 / 92%)}
#stage[data-phase=name] #panel.enter{animation:panel-enter var(--panel-fade) ease-in-out backwards}
@keyframes panel-enter{from{opacity:0;transform:translateY(4px)}to{opacity:1;transform:translateY(0)}}
#stage[data-phase=choice] #panel{inset:0;width:100%;height:100%;margin:0;text-align:left;pointer-events:none}
#stage[data-phase=choice] #panel.is-entering .target-group,#stage[data-phase=cinematic] #panel.is-entering .target-group{animation:panel-enter var(--panel-fade) ease-in-out backwards}
.target-group{position:absolute;display:flex;flex-direction:column;gap:0.625rem;width:max-content;max-width:min(18.75rem,calc(100vw - 1.5rem));pointer-events:auto}.target-name{margin:0 0 0 1.25rem;color:rgb(170 177 168 / 76%);font-family:ui-monospace,"SFMono-Regular",Menlo,monospace;font-size:0.5625rem;font-weight:600;letter-spacing:.15em;text-shadow:0 1px 8px rgb(1 3 2 / 96%);text-transform:uppercase}
.choice{display:block;width:fit-content;max-width:100%;min-height:2.75rem;padding:0.625rem 1.25rem;border:1px solid rgb(231 232 223 / 44%);border-radius:0;background:rgb(7 9 8 / 62%);-webkit-backdrop-filter:blur(0.75rem);backdrop-filter:blur(0.75rem);box-shadow:0 4px 1.125rem rgb(0 0 0 / 24%);color:rgb(231 232 223 / 90%);font-size:clamp(0.9375rem,1.35vw,1.1875rem);line-height:1.3;text-align:left;text-shadow:0 1px 3px rgb(1 3 2 / 95%),0 2px 0.625rem rgb(1 3 2 / 75%);transition:color 180ms ease,border-color 180ms ease,background 180ms ease}.choice:hover,.choice:focus-visible,.choice.is-selected{color:var(--paper);border-color:rgb(231 232 223 / 68%);background:rgb(7 9 8 / 76%)}.choice:active{transform:translateY(1px)}
#subtitle{position:absolute;bottom:clamp(9.375rem,21vh,13.75rem);left:50%;width:max-content;max-width:calc(100% - 2.5rem);margin:0;padding:7px 0.75rem;transform:translateX(-50%);background:var(--backing);font-size:clamp(1.0625rem,2vw,1.4375rem);line-height:1.4;text-align:center;white-space:pre-line;pointer-events:none}#subtitle:empty{display:none}
#waiting{position:absolute;bottom:1.5rem;left:1.875rem;right:1.875rem;margin:0;color:var(--muted);font-family:ui-monospace,"SFMono-Regular",Menlo,monospace;font-size:0.625rem;text-align:center}#recovery{position:absolute;bottom:4.375rem;width:min(26.25rem,calc(100% - 2.5rem));padding:1.25rem;background:rgb(7 9 8 / 94%);border-left:2px solid var(--danger);text-align:left}#error{margin:0 0 1.125rem;line-height:1.5}#retry,#skip-failure{padding:8px 0;border-bottom:1px solid currentColor}#skip-failure{margin-left:1.5rem}#resume{position:absolute;bottom:6.25rem;padding:0.625rem 0;border-bottom:1px solid currentColor}
#stage[data-phase=end] #panel{bottom:clamp(4.5rem,11vh,7.25rem)}#stage[data-phase=end] h1{font-size:1.875rem;margin-bottom:0.8125rem}.support{margin:0;color:var(--muted);font-size:0.9375rem;line-height:1.5}.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}
@media(max-width:600px){header{top:0.625rem;left:0.875rem;right:0.875rem}.game-title{font-size:0.5625rem}header nav{gap:0.875rem}#panel{left:1.375rem;bottom:3.5rem;width:calc(100% - 2.75rem)}h1{font-size:clamp(1.75rem,10vw,2.625rem)}.target-group{max-width:min(15.625rem,calc(100vw - 1.5rem))}.choice{font-size:0.9375rem}#subtitle{bottom:11.125rem}.steps{margin-bottom:1.25rem}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{scroll-behavior:auto!important;transition-duration:.01ms!important;animation-duration:.01ms!important}}
@media(prefers-reduced-transparency:reduce){#subtitle,#recovery,.choice,.next{background:var(--ink);-webkit-backdrop-filter:none;backdrop-filter:none}input{background:var(--ink)}}

#waiting.is-loading{left:50%;right:auto;bottom:2.125rem;width:10rem;height:auto;transform:translateX(-50%);pointer-events:none;filter:drop-shadow(0 1px 3px #000)}
#waiting canvas{display:block;width:100%;height:4.4rem}
/* The caption used to be screen-reader only, so a sighted player saw a sweep
   and no explanation. Keep it quiet, but keep it visible. */
#waiting .loading-caption{display:block;font-size:0.625rem;letter-spacing:.08em;color:var(--muted)}
#waiting .loading-elapsed{display:block;min-height:1em;margin-top:0.5rem;font-size:0.625rem;color:var(--muted);opacity:.65}
/* The host suppresses pointer events so the sweep never blocks the film; the
   one thing a player can act on has to take them back. */
#waiting .loading-skip{pointer-events:auto;display:inline-block;margin-top:0.75rem;padding:0.375rem 0.875rem;border:1px solid rgb(231 232 223 / 25%);border-radius:0;background:transparent;color:var(--paper);font-family:inherit;font-size:0.625rem;letter-spacing:.08em;text-transform:uppercase;cursor:pointer}
#waiting .loading-skip:hover,#waiting .loading-skip:focus-visible{border-color:var(--paper);outline:none}
@media(max-width:700px){#waiting.is-loading{bottom:1.375rem}}

#name-form .entry-actions{display:flex;justify-content:center;gap:0.75rem;margin-top:1.25rem}
#stage #name-form .entry-actions .next{margin:0;white-space:nowrap}
#restart-confirm{width:min(27.5rem,calc(100% - 2.5rem));padding:1.75rem;border:1px solid rgb(231 232 223 / 18%);background:rgb(7 9 8 / 96%);color:var(--paper);box-shadow:0 0.75rem 3rem rgb(0 0 0 / 50%)}
#restart-confirm::backdrop{background:rgb(0 0 0 / 65%);backdrop-filter:blur(6px)}
#restart-confirm h2{margin:0;font-size:1.75rem;font-weight:420}
#restart-confirm p{color:var(--muted);line-height:1.5}
#restart-confirm form{display:flex;flex-wrap:wrap;gap:0.75rem;margin:1.5rem 0 0;max-width:none}
#restart-confirm .next{margin:0}

.scene-controls{position:relative}
#controls-toggle{display:none}
@media(max-width:600px){
 #controls-toggle{display:flex;align-items:center;gap:0.625rem;min-height:2.75rem;font-size:0.6875rem}
 header #scene-controls{display:none;position:absolute;right:0;top:calc(100% + 8px);width:11.75rem;padding:8px;gap:0;align-items:stretch;flex-direction:column;background:rgb(7 9 8 / 97%);border:1px solid rgb(231 232 223 / 22%);box-shadow:0 0.75rem 2.25rem rgb(0 0 0 / 45%);color:var(--paper)}
 header #scene-controls.is-open{display:flex}
 header #scene-controls :is(button,a){display:flex;align-items:center;min-height:2.75rem;padding:0.75rem;border:0;text-align:left;font-size:0.75rem}
 header #scene-controls :is(button,a):hover,header #scene-controls :is(button,a):focus-visible{background:rgb(231 232 223 / 8%);outline-offset:-2px}
}

/* Shared UI scale: preserve phone sizing, grow controls and type on roomier screens.
   Width and height limits keep the interface comfortable on short laptops. */
@media (min-width: 768px) and (min-height: 600px) {
 :root { font-size: clamp(18px, min(calc(15.333px + .34722vw), calc(10px + 1.33333dvh)), 22px); }
}