/* WOPR shell. Single dark look by design. */
:root{--bg:#020b05;--fg:#4dff7c;--dim:#239c49;--glow:rgba(77,255,124,.5);color-scheme:dark}
html,body{height:100%;margin:0}
body{--fs:clamp(13px,min(3.6vw,2.9vh),22px);background:var(--bg);color:var(--fg);font:var(--fs)/1.4 ui-monospace,"SF Mono",Menlo,Consolas,"DejaVu Sans Mono","Liberation Mono","Courier New",monospace;text-transform:uppercase;overflow:hidden;-webkit-tap-highlight-color:transparent}
body::before{content:"";position:fixed;inset:0;pointer-events:none;z-index:2;background:repeating-linear-gradient(to bottom,rgba(0,0,0,.28) 0 1px,transparent 1px 3px)}
body::after{content:"";position:fixed;inset:0;pointer-events:none;z-index:3;background:radial-gradient(ellipse at center,transparent 55%,rgba(0,0,0,.6))}
#scr{box-sizing:border-box;height:100%;max-width:46em;margin:0 auto;padding:max(16px,4vmin) 16px 2.5em;overflow-x:hidden;overflow-y:auto;cursor:pointer;text-shadow:0 0 1px var(--fg),0 0 7px var(--glow);animation:flick 5s infinite}
.ln{white-space:pre-wrap;overflow-wrap:anywhere;min-height:1.4em}
.dim{color:var(--dim)}
.cur{display:inline-block;width:.6em;height:1.1em;margin-left:.1em;vertical-align:text-bottom;background:var(--fg);box-shadow:0 0 7px var(--glow);animation:blink 1s steps(1) infinite}
.menu{margin:.2em 0 .4em}
.opt{display:block;width:fit-content;max-width:100%;margin-left:-.4em;padding:.12em .4em;cursor:pointer;white-space:pre-wrap}
@media (pointer:coarse){.help{display:none}}
.digits{display:grid;grid-template-columns:repeat(10,max(44px,2.2em));gap:4px;width:fit-content;margin:.4em 0}
.digits .opt{display:flex;width:auto;align-items:center;justify-content:center;min-height:44px;margin:0;padding:0;border:1px solid var(--dim)}
@media (max-width:540px){.digits{grid-template-columns:repeat(5,44px)}}
.sel,.sel .dim{background:var(--fg);color:var(--bg);text-shadow:none;box-shadow:0 0 9px var(--glow)}
#snd{position:fixed;top:calc(4px + env(safe-area-inset-top,0px));right:8px;z-index:4;padding:.3em;border:0;background:none;font:inherit;font-size:.75em;color:var(--dim);text-shadow:inherit;cursor:pointer}
#snd:hover{color:var(--fg)}
#hint{position:fixed;left:0;right:0;bottom:0;z-index:4;padding:.3em 16px calc(.3em + env(safe-area-inset-bottom,0px));text-align:center;font-size:.8em;color:var(--dim);background:var(--bg)}
.inp{width:auto;max-width:70%;margin:0;padding:0;border:0;outline:0;background:none;font:inherit;font-size:max(16px,1em);color:inherit;text-transform:inherit;text-shadow:inherit;caret-color:transparent}
#scr.tear{background:linear-gradient(to bottom,transparent,rgba(77,255,124,.22) 50%,transparent) no-repeat;background-size:100% 25%;animation:tear-roll .96s linear,tear-jolt .96s steps(8)}
@keyframes tear-roll{from{background-position:0 -40%}to{background-position:0 140%}}
@keyframes tear-jolt{0%,100%{filter:none;transform:none}25%{filter:blur(1px);transform:translateX(3px)}50%{filter:blur(.5px);transform:translateX(-4px) skewX(-3deg);opacity:.75}75%{filter:blur(1.2px);transform:translateX(2px)}}
@keyframes blink{50%{opacity:0}}
@keyframes flick{0%,100%{opacity:1}50%{opacity:.965}}
@media (prefers-reduced-motion:reduce){#scr,#scr.tear,.cur{animation:none}}