/* home.css — the monitor page. The only effects live INSIDE the screen. */
:root{--ink:#070807;--bone:#e6dfcc}
*{box-sizing:border-box}
html,body{margin:0;height:100%}
body{background:var(--ink);color:var(--bone);font:15px/1.4 "Segoe UI",Arial,sans-serif;overflow:hidden;touch-action:manipulation;-webkit-tap-highlight-color:transparent;-webkit-text-size-adjust:100%}
.mc{line-height:0;margin:0;display:block}
.mc canvas{display:block;image-rendering:pixelated}
.mc[data-wrap]{min-width:0}.mc[data-wrap] canvas{max-width:100%}

.stage{position:fixed;inset:0;overflow:hidden;background:#000}
.stage .photo{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.stage .photo.lit{opacity:0;pointer-events:none}
.stage.lit .photo.lit{opacity:1}
.stage.cut .photo.lit{opacity:0}
.stage .dim{position:absolute;inset:0;background:radial-gradient(ellipse at 50% 45%,transparent 35%,rgba(0,0,0,.55) 100%);pointer-events:none}

/* ---- the CRT face: a 640x480 box mapped onto the screen quad by matrix3d ---------------------------------------- */
.crt{position:absolute;inset:0;pointer-events:none}
.crt .face{position:absolute;left:0;top:0;background:#020302;overflow:hidden;pointer-events:auto;cursor:default;border-radius:10px;
  box-shadow:inset 0 0 60px rgba(0,0,0,.9)}
.crt .face>*{position:absolute;inset:0}
.crt .face>[hidden]{display:none !important}
.crt .face>.fx{pointer-events:none}
/* scanlines: 2 on 2 off, shimmering between two interlace fields */
.crt .face::before{content:"";position:absolute;inset:0;z-index:5;pointer-events:none;
  background:repeating-linear-gradient(0deg,rgba(0,0,0,.28) 0 2px,transparent 2px 4px);animation:interlace .14s steps(2) infinite}
@keyframes interlace{from{background-position:0 0}to{background-position:0 1px}}
/* tube: corner darkening + a faint phosphor bloom on the glass */
.crt .face::after{content:"";position:absolute;inset:0;z-index:6;pointer-events:none;
  background:radial-gradient(ellipse at center,transparent 55%,rgba(0,0,0,.62) 100%);
  box-shadow:inset 0 0 40px rgba(120,255,140,.08)}
.crt.on .face{box-shadow:inset 0 0 60px rgba(0,0,0,.9),0 0 30px rgba(140,255,160,.18)}
/* the fx layers */
.crt .face .burn{z-index:4;padding:28px 30px;opacity:.045;mix-blend-mode:screen}
.crt .face .grille{z-index:5;mix-blend-mode:screen;
  background:repeating-linear-gradient(90deg,rgba(255,70,70,.05) 0 1px,rgba(70,255,70,.05) 1px 2px,rgba(70,70,255,.05) 2px 3px)}
.crt .face .roll{z-index:5;inset:auto 0;height:22%;top:-25%;background:linear-gradient(180deg,transparent,rgba(255,255,255,.045) 50%,transparent);animation:roll 7.5s linear infinite}
@keyframes roll{from{top:-25%}to{top:110%}}
.crt .face .flick{z-index:6;background:#fff;opacity:0;mix-blend-mode:screen;animation:flick 3.1s steps(1) infinite}
@keyframes flick{0%{opacity:0}7%{opacity:.02}9%{opacity:0}23%{opacity:.015}24%{opacity:0}41%{opacity:.03}42%{opacity:.01}44%{opacity:0}66%{opacity:.02}67%{opacity:0}88%{opacity:.025}90%{opacity:0}}
.crt .face .glass{z-index:7;
  background:linear-gradient(108deg,transparent 38%,rgba(255,255,255,.035) 45%,rgba(255,255,255,.02) 49%,transparent 56%),
             radial-gradient(ellipse 60% 40% at 18% 8%,rgba(255,255,255,.05),transparent 70%)}
.stage.lit .crt .face .glass{ /* the ceiling light on the glass */
  background:linear-gradient(108deg,transparent 36%,rgba(255,250,230,.09) 45%,rgba(255,250,230,.05) 50%,transparent 58%),
             radial-gradient(ellipse 70% 45% at 22% 6%,rgba(255,250,230,.13),transparent 70%)}
/* phosphor: everything drawn on the tube glows a little and fringes red/cyan at the edges */
.crt .face .mc canvas{filter:drop-shadow(0 0 3px rgba(150,255,150,.26)) drop-shadow(.7px 0 rgba(255,70,70,.22)) drop-shadow(-.7px 0 rgba(70,200,255,.22))}
.crt .face img:not(.g){filter:drop-shadow(.7px 0 rgba(255,70,70,.2)) drop-shadow(-.7px 0 rgba(70,200,255,.2))}
/* the picture moves; the tube does not */
.crt .face>:not(.fx){transform-origin:50% 50%}
.crt .face.poweron>:not(.fx){animation:poweron .8s cubic-bezier(.3,.9,.3,1) 1}
@keyframes poweron{0%{transform:scale(.6,.004);filter:brightness(6)}30%{transform:scale(1.05,.004);filter:brightness(4)}62%{transform:scale(1,1.04);filter:brightness(2)}100%{transform:none;filter:none}}
.crt .face.poweron::after{animation:bloom .8s steps(1) 1}
@keyframes bloom{0%{box-shadow:inset 0 0 120px rgba(200,255,200,.5)}60%{box-shadow:inset 0 0 80px rgba(200,255,200,.25)}100%{box-shadow:inset 0 0 40px rgba(120,255,140,.12)}}
.crt .face.blank>:not(.fx){opacity:0}
.crt .face.vroll>:not(.fx){animation:vroll .5s steps(9) 1}
@keyframes vroll{0%{transform:translateY(0)}30%{transform:translateY(-14%)}60%{transform:translateY(8%)}82%{transform:translateY(-3%)}100%{transform:translateY(0)}}
.crt .face.jit>:not(.fx){transform:translateX(1px)}
/* the computer is off: nothing on the glass, not even the tube */
.crt .face.off{background:#000;box-shadow:none !important;border-radius:6px}
.crt .face.off>*{opacity:0 !important}
.crt .face.off::before,.crt .face.off::after{opacity:0}
.crt.drop .face>*{opacity:0}

/* NO SIGNAL bars (SMPTE-ish) */
.crt .bars{background:linear-gradient(90deg,#c0c0c0 0 14.28%,#c0c000 0 28.57%,#00c0c0 0 42.85%,#00c000 0 57.14%,#c000c0 0 71.42%,#c00000 0 85.71%,#0000c0 0 100%)}
.crt .bars .lower{position:absolute;left:0;right:0;bottom:0;height:25%;background:linear-gradient(90deg,#0000c0 0 14.28%,#131313 0 28.57%,#c000c0 0 42.85%,#131313 0 57.14%,#00c0c0 0 71.42%,#131313 0 85.71%,#c0c0c0 0 100%)}
.crt .bars .osd{position:absolute;padding:6px 10px;background:#0a2a8a;border:2px solid #dfe8ff;animation:osd 6s linear infinite alternate}
@keyframes osd{0%{left:8%;top:12%}50%{left:60%;top:60%}100%{left:20%;top:70%}}

/* terminal: typed lines, a block cursor that blinks after the last one */
.crt .term{padding:28px 30px;display:grid;align-content:start;gap:10px;background:#030503}
.crt .term .tl{display:flex;align-items:flex-end;gap:5px;min-height:20px}
.crt .term .tl .mc{flex:1 1 auto;min-width:0}
.crt .term .tcur{display:block;width:12px;height:20px;background:#9cff9c;animation:blink 1s steps(2) infinite;filter:drop-shadow(0 0 3px rgba(150,255,150,.5))}
@keyframes blink{50%{opacity:0}}

/* logo card: faint static behind, a wordmark that is stable until a hit lands */
.crt .logo{display:grid;place-content:center;gap:18px;justify-items:center;background:#030503;overflow:hidden}
.crt .logo .tba{display:grid;gap:8px;justify-items:center;margin-top:2px}
.crt .logo .tba[hidden]{display:none}
.crt .logo .snow{position:absolute;inset:0;width:100%;height:100%;image-rendering:pixelated;opacity:.05;mix-blend-mode:screen;pointer-events:none}
.crt .logo .glitch{position:relative;width:min(500px,84vw);aspect-ratio:1646/375;isolation:isolate}
.crt .logo .glitch .g{position:absolute;inset:0;width:100%;height:auto;display:block;opacity:0}
.crt .logo .glitch .base{opacity:1;filter:drop-shadow(0 0 10px rgba(255,255,255,.28));animation:idle 3.7s steps(1) infinite}
@keyframes idle{0%,100%{opacity:1;transform:none}41%{opacity:.88}43%{opacity:1}77%{transform:translateX(1px)}79%{transform:none}}
/* hits: three grades. RGB ghosts split, slices tear, the whole mark jumps. 120–380 ms, then nothing. */
.crt .logo .glitch.hit1 .r{opacity:.6;transform:translateX(-4px);filter:sepia(1) saturate(40) hue-rotate(-55deg) brightness(1.1);mix-blend-mode:screen}
.crt .logo .glitch.hit1 .c{opacity:.6;transform:translateX(4px);filter:sepia(1) saturate(40) hue-rotate(135deg) brightness(1.1);mix-blend-mode:screen}
.crt .logo .glitch.hit2 .r{opacity:.75;transform:translateX(-11px);filter:sepia(1) saturate(40) hue-rotate(-55deg) brightness(1.1);mix-blend-mode:screen}
.crt .logo .glitch.hit2 .c{opacity:.75;transform:translateX(12px);filter:sepia(1) saturate(40) hue-rotate(135deg) brightness(1.1);mix-blend-mode:screen}
.crt .logo .glitch.hit2 .s1{opacity:1;clip-path:inset(18% 0 62% 0);transform:translateX(-18px)}
.crt .logo .glitch.hit2 .base{transform:translateX(2px)}
.crt .logo .glitch.hit3 .r{opacity:.85;transform:translate(-18px,2px);filter:sepia(1) saturate(40) hue-rotate(-55deg) brightness(1.2);mix-blend-mode:screen}
.crt .logo .glitch.hit3 .c{opacity:.85;transform:translate(20px,-2px);filter:sepia(1) saturate(40) hue-rotate(135deg) brightness(1.2);mix-blend-mode:screen}
.crt .logo .glitch.hit3 .s1{opacity:1;clip-path:inset(10% 0 66% 0);transform:translateX(-34px)}
.crt .logo .glitch.hit3 .s2{opacity:1;clip-path:inset(58% 0 20% 0);transform:translateX(30px)}
.crt .logo .glitch.hit3 .base{transform:translate(-3px,1px);opacity:.7}
.crt .logo .glitch.hit3{animation:shake .2s steps(2) 1}
@keyframes shake{0%{transform:translate(2px,-1px)}50%{transform:translate(-3px,1px)}100%{transform:none}}
/* the whole screen takes the hit too: a roll, a brightness sag */
.crt .face.hit2::before{background-position:0 3px}
.crt .face.hit2{filter:brightness(.82)}
.crt .face.hit3{filter:brightness(.6) contrast(1.3)}
.crt .face.hit3>:not(.fx){transform:translateY(-6px) skewX(-2deg)}
.crt .face.hit1{filter:brightness(.93)}
.crt .logo.flash .glitch{animation:flash .9s steps(1) 1}
@keyframes flash{0%{opacity:0}20%{opacity:1}30%{opacity:0}45%{opacity:1}55%{opacity:.3}70%{opacity:1}}

/* ---- terminal buttons: a box in the text colour; hover inverts it (the bitmap text is pre-rendered in both colours) */
.tbtn{--c:#e6dfcc;display:inline-grid;position:relative;text-decoration:none;border:2px solid var(--c);padding:7px 16px;background:transparent;cursor:pointer}
.tbtn .mc.dk{display:none}
@media (hover:hover){
.tbtn:hover{background:var(--c)}
.tbtn:hover .mc.dk{display:block}
.tbtn:hover .mc.lt{display:none}}
.tbtn:focus-visible{background:var(--c);outline:none}
.tbtn:focus-visible .mc.dk{display:block}
.tbtn:focus-visible .mc.lt{display:none}
.tbtn[hidden]{display:none !important}
.crt .clickhere{position:relative;inset:auto;animation:pulse 1.4s ease-in-out infinite}
.crt .clickhere:hover{animation:none}
@keyframes pulse{0%,100%{box-shadow:0 0 0 rgba(255,255,85,0)}50%{box-shadow:0 0 12px rgba(255,255,85,.45),inset 0 0 8px rgba(255,255,85,.18)}}
/* the page's own button texture is gone: this is a machine, not a menu screen */

/* ---- main menu on the tube: a DOS-style list, highlight bar, blinking cursor, live clock ------------------------- */
.crt .menu{display:grid;grid-template-rows:auto 1fr auto auto;background:#030503;padding:26px 30px 18px;gap:12px;overflow-y:auto}
.crt .menu .mh{display:grid;gap:7px;padding-bottom:12px;border-bottom:2px solid #1d3a1d}
.crt .menu .mi{display:grid;align-content:center;gap:4px}
.crt .menu .row{display:grid;grid-template-columns:22px minmax(0,1fr) auto;align-items:center;height:38px;padding:0 10px 0 6px;text-decoration:none;border:2px solid transparent;cursor:pointer}
.crt .menu .row .cur{visibility:hidden}
.crt .menu .row .dk{display:none}
.crt .menu .row.sel{background:#9cff9c;box-shadow:0 0 14px rgba(156,255,156,.25)}
.crt .menu .row.sel .cur{visibility:visible;animation:blink .9s steps(2) infinite}
.crt .menu .row.sel .dk{display:block}
.crt .menu .row.sel .lt{display:none}
.crt .menu .row.sel .mc canvas{filter:none}
.crt .menu .row[aria-disabled="true"]{cursor:default}
.crt .menu .ms{display:grid;grid-template-columns:auto 1fr;gap:6px 18px;align-items:center;border-top:2px solid #1d3a1d;padding-top:12px}
.crt .menu .ms .sig{display:flex;align-items:center;gap:10px}
.crt .menu .ms .mc[hidden]{display:none}
.crt .menu .ms .bar{width:160px;height:10px;border:2px solid #1d3a1d;background:#071007;position:relative}
.crt .menu .ms .bar i{position:absolute;inset:0 auto 0 0;background:repeating-linear-gradient(90deg,#9cff9c 0 6px,transparent 6px 8px)}
.crt .menu .mf{display:flex;justify-content:space-between;align-items:center;border-top:2px solid #1d3a1d;padding-top:10px}

/* ---- an in-screen page: scrolls inside the glass ---------------------------------------------------------------- */
.crt .page{background:#030503;overflow-y:auto;overflow-x:hidden;padding:18px 22px 40px;display:block;scrollbar-width:thin;scrollbar-color:#3a6b3a #061006;-webkit-overflow-scrolling:touch;overscroll-behavior:contain}
.crt .page::-webkit-scrollbar{width:8px}.crt .page::-webkit-scrollbar-thumb{background:#3a6b3a;border:2px solid #061006}
.sr-top{display:grid;gap:8px;margin-bottom:14px;border-bottom:2px solid #1d3a1d;padding-bottom:12px}
.sr-back{justify-self:start;padding:5px 12px}
.sr-sum{display:flex;gap:16px;flex-wrap:wrap}
.sr-bar{height:8px;background:#0a140a;border:2px solid #1d3a1d;position:relative;overflow:hidden}
.sr-bar i{position:absolute;inset:0 auto 0 0;background:#9cff9c}
.sr-wave{margin:14px 0 8px;display:grid;gap:6px}
.sr-wh{display:grid;grid-template-columns:20px minmax(0,1fr) auto;gap:8px;align-items:center}
.sr-wh img{width:20px;height:20px;image-rendering:pixelated}
.sr-items{display:grid;gap:5px;margin-top:4px}
.sr-item{display:grid;grid-template-columns:10px 16px minmax(0,1fr);gap:8px;align-items:start;padding:5px 6px;background:#071107;border:1px solid #143014}
.sr-item img{width:16px;height:16px;image-rendering:pixelated;margin-top:1px}
.sr-item.todo img{filter:grayscale(1) brightness(.6)}
.sr-item .sr-st{width:8px;height:8px;margin-top:3px;background:#2a3a2a;border:1px solid #000}
.sr-item.done .sr-st{background:#8fdc7a}.sr-item.prog .sr-st{background:linear-gradient(90deg,#ffd76b 50%,#2a3a2a 50%)}
.sr-item>div{display:grid;gap:2px;min-width:0}
.sr-shot{margin:12px 0;border:2px solid #1d3a1d;background:#000}
.sr-shot img{display:block;width:100%;height:150px;object-fit:cover;filter:saturate(.8) brightness(.9) drop-shadow(.7px 0 rgba(255,70,70,.2)) drop-shadow(-.7px 0 rgba(70,200,255,.2))}
.sr-shot figcaption{padding:8px 10px;display:grid;gap:4px}
.sr-end{margin:18px 0 8px;padding:14px;background:#7a1a14;border:2px solid #000;display:grid;gap:8px}
.sr-foot{margin-top:14px}
.sr-foot2{margin-top:10px;display:grid;justify-items:start}

/* ---- outside the glass -------------------------------------------------------------------------------------------- */
.stage{transition:transform 1.3s cubic-bezier(.2,.7,.15,1)}
.stage.cut .photo,.stage.cut .crt{opacity:0}
.calib{position:fixed;left:12px;top:12px;z-index:99;background:rgba(0,0,0,.85);color:#9cff9c;padding:10px 12px;font:12px/1.4 Consolas,monospace;max-width:90vw;white-space:pre-wrap}
noscript .plain{position:fixed;inset:auto 0 0 0;padding:20px;background:#0b0d0b;color:var(--bone);text-align:center}
/* ENTER gate: unlocks audio, then the walk-in starts */
.gate{position:fixed;inset:0;z-index:20;background:#050605;display:grid;place-content:center;justify-items:center;gap:22px;transition:opacity .5s}
.gate.out{opacity:0;pointer-events:none}
.gate[hidden]{display:none !important}
.gate .gate-mark{width:min(520px,80vw);height:auto;filter:drop-shadow(0 4px 0 rgba(0,0,0,.6))}
.gate .enter{padding:12px 44px;border-width:3px}
.gate .fs{padding:5px 12px;margin-top:-6px}
.gate .hint2{width:min(560px,88vw);text-align:center}
.sound{position:fixed;right:max(16px,env(safe-area-inset-right));bottom:max(14px,env(safe-area-inset-bottom));z-index:15;padding:5px 10px;opacity:.8}
.sound:hover{opacity:1}

@media (prefers-reduced-motion:reduce){
  .stage{transition:none}
  .crt .bars .osd,.crt .logo .glitch,.crt .logo .glitch .base,.crt .face .roll,.crt .face .flick,.crt .face::before,.crt .clickhere,.crt .menu .row .cur,.crt .term .tcur{animation:none}
  .crt .face.poweron>:not(.fx),.crt .face.vroll>:not(.fx){animation:none}
}

/* ---- the visitor: a cutscene over everything (scene.js). Two stacked stills, hard cuts, letterbox, typed subtitles, choices. */
.scene{position:fixed;inset:0;z-index:18;background:#000;transition:opacity .8s}
.scene[hidden]{display:none !important}
.scene.out{opacity:0;pointer-events:none}
.scene .sf{position:absolute;inset:0;opacity:0;filter:saturate(.9) contrast(1.04)}
.scene .sf img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.scene .sf img.lt{opacity:0}
.scene.lit .sf img.lt{opacity:1}
.scene .sf.on{opacity:1}
.scene.in{opacity:0}
.scene .grade{position:absolute;inset:0;pointer-events:none;background:radial-gradient(ellipse at 50% 50%,transparent 42%,rgba(0,0,0,.62) 100%)}
.scene .flash{position:absolute;inset:0;background:#fff;opacity:0;pointer-events:none;z-index:3;mix-blend-mode:screen}
.scene .flash.on{opacity:1}
.scene .muzzle{position:absolute;z-index:3;opacity:0;pointer-events:none;image-rendering:pixelated;mix-blend-mode:screen;transform:rotate(var(--r,0deg)) scale(1.15);filter:brightness(1.35) drop-shadow(0 0 28px rgba(255,190,90,.95))}
.scene .muzzle.on{opacity:1}

/* the fall: the picture rolls and drops, like the death camera */
.scene .sf.on{transition:none}
.scene.down .sf.on{transform:rotate(-9deg) translateY(9%) scale(1.18);filter:brightness(.35) saturate(.5);transition:transform .75s cubic-bezier(.3,.6,.4,1),filter .75s}
.scene.down .grade{opacity:0}
.scene .bar{position:absolute;left:0;right:0;height:0;background:#000;z-index:2;transition:height .7s cubic-bezier(.2,.7,.2,1)}
.scene .bar.top{top:0}.scene .bar.bot{bottom:0}
.scene.letterbox .bar{height:9vh}
.scene .skip{position:absolute;right:max(22px,env(safe-area-inset-right));top:max(12px,env(safe-area-inset-top));z-index:5;text-decoration:none;opacity:0;transition:opacity .4s 3s;padding:6px 8px}
.scene.letterbox .skip{opacity:.5}.scene .skip:hover{opacity:1 !important}
.scene .hud{position:absolute;left:50%;bottom:calc(9vh + 22px + env(safe-area-inset-bottom));transform:translateX(-50%);width:min(940px,92vw);z-index:4;display:grid;gap:10px}
.scene .sub{display:grid;gap:8px;padding:12px 16px 14px;background:rgba(0,0,0,.6);border-left:3px solid #2a2a26;position:relative}
.scene .sub.radio{border-left-color:#7fb7ff}.scene .sub.note{background:transparent;border-left-color:transparent;justify-items:center;text-align:center}
.scene .sub .tag[hidden]{display:none}
.scene .sub .more{position:absolute;right:12px;bottom:10px;width:0;height:0;border-left:6px solid transparent;border-right:6px solid transparent;border-top:8px solid #e6dfcc;opacity:0}
.scene .sub .more.on{opacity:.7;animation:blink 1s steps(2) infinite}
.scene .sub.note .more{display:none}
.scene .ch{display:grid;gap:4px;padding:10px 12px 12px;background:rgba(0,0,0,.68);border:2px solid #2a2a26}
.scene .opt{display:grid;grid-template-columns:18px auto minmax(0,1fr);gap:10px;align-items:center;padding:7px 10px;min-height:40px;text-decoration:none;border:2px solid transparent;cursor:pointer}
.scene .opt img{width:24px;height:24px;image-rendering:pixelated}
.scene .opt .cur{visibility:hidden}
.scene .opt.sel{background:rgba(255,255,255,.08);border-color:#5a5a50}
.scene .opt.sel .cur{visibility:visible;animation:blink .8s steps(2) infinite}
.scene .timer{height:6px;background:#1c1c18;margin-top:6px;overflow:hidden}
.scene .timer i{display:block;height:100%;width:100%;background:#ffd76b}
.scene .inv{position:absolute;left:max(24px,env(safe-area-inset-left));top:calc(9vh + 16px);z-index:4;display:flex;flex-wrap:wrap;gap:8px 16px;align-items:center;max-width:calc(100vw - 48px);padding:8px 12px;background:rgba(0,0,0,.6);border:2px solid #2a2a26}
.scene .inv[hidden],.scene .sub[hidden],.scene .ch[hidden],.scene .dead[hidden]{display:none !important}
.scene .inv .it{display:flex;gap:7px;align-items:center}
.scene .inv img{width:24px;height:24px;image-rendering:pixelated}
/* You died! */
.scene .dead{position:absolute;inset:0;z-index:6;display:grid;place-content:center;justify-items:center;gap:14px;background:rgba(110,0,0,.5);opacity:0;transition:opacity .6s}
.scene.dead-on .dead{opacity:1}
.scene.dead-on .skip{display:none}
.scene .dead .respawn{margin-top:10px;padding:9px 30px}
@media (max-width:700px){.scene .hud{bottom:calc(9vh + 10px);width:96vw}.scene .inv{left:8px;gap:10px;padding:6px 8px}.scene .opt{gap:8px;padding:6px 6px}}
@media (prefers-reduced-motion:reduce){.scene,.scene .bar,.scene .sub .more,.scene .opt.sel .cur{animation:none;transition:none}}

/* ---- phones: the tube fills the viewport (see home.js detach()) --------------------------------------------------- */
.stage.dark .photo,.stage.dark .dim{opacity:0 !important;transition:opacity .6s}
.crt .face.full{position:fixed;inset:0;width:100vw !important;height:100vh !important;height:100dvh !important;transform:none !important;transform-origin:50% 50% !important;border-radius:0;z-index:5;
  box-shadow:inset 0 0 40px rgba(0,0,0,.7) !important;transition:opacity .6s ease,transform .6s cubic-bezier(.2,.7,.2,1)}
.crt .face.full.pre{opacity:0;transform:scale(.72) !important}
@media (max-width:699px),(max-height:499px){
  .crt .face .mc canvas,.crt .face img:not(.g){filter:none}          /* the phosphor filters cost too much on a phone GPU */
  .crt .face .grille{display:none}
  .sound{top:max(10px,env(safe-area-inset-top));bottom:auto;right:max(10px,env(safe-area-inset-right));padding:4px 8px}
  .crt .face .burn{padding:22px 18px}
  .crt .term{padding:max(22px,env(safe-area-inset-top)) 18px 22px max(18px,env(safe-area-inset-left))}
  .crt .menu{padding:max(20px,env(safe-area-inset-top)) 16px max(14px,env(safe-area-inset-bottom)) max(16px,env(safe-area-inset-left));gap:10px}
  .crt .menu .row{height:44px;padding:0 8px 0 4px}
  .crt .menu .ms .bar{width:110px}
  .crt .menu .mf{flex-wrap:wrap;gap:6px 14px}
  .crt .page{padding:max(14px,env(safe-area-inset-top)) 14px 40px max(14px,env(safe-area-inset-left))}
  .sr-shot img{height:120px}
  .scene .sub{padding:10px 12px 12px}
  .scene .sub .more{right:8px;bottom:8px}
  .scene .ch{padding:8px 8px 10px}
  .scene .inv img,.scene .opt img{width:20px;height:20px}
  .scene .dead .respawn{padding:12px 34px}
}
@media (max-height:499px) and (orientation:landscape){ /* a phone on its side: less chrome, the list must fit */
  .crt .menu{gap:6px}.crt .menu .row{height:34px}.crt .menu .mh{padding-bottom:6px}.crt .menu .ms{padding-top:6px;gap:3px 14px}.crt .menu .mf{padding-top:6px}
  .scene.letterbox .bar{height:5vh}.scene .hud{bottom:calc(5vh + 10px)}
}