/* SOLO — CRT phosphor theme */
:root{
  --bg:#05080a;
  --panel:#0a1013;
  --panel-2:#0c1418;
  --edge:#123;
  --grn:#33ff9a;
  --grn-dim:#1f8f5a;
  --grn-deep:#0c3a24;
  --amber:#ffb642;
  --red:#ff4d5e;
  --cyan:#54e6ff;
  --ink:#7de3b4;
  --muted:#3d6b57;
  --scan:rgba(0,0,0,.28);
  --glow:0 0 6px rgba(51,255,154,.55), 0 0 22px rgba(51,255,154,.18);
  --font:"Cascadia Mono","Consolas","DejaVu Sans Mono",ui-monospace,monospace;
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;background:var(--bg);color:var(--grn);
  font-family:var(--font);font-size:14px;line-height:1.45;
  overflow:hidden;text-shadow:var(--glow);
  -webkit-font-smoothing:none;
}

/* CRT overlays — bound to the screen (#app) so a bezel frame stays clean */
.crt #app::before{
  content:"";position:absolute;inset:0;pointer-events:none;z-index:9000;border-radius:inherit;
  background:repeating-linear-gradient(to bottom,transparent 0,transparent 2px,var(--scan) 3px,var(--scan) 4px);
  mix-blend-mode:multiply;
}
.crt #app::after{
  content:"";position:absolute;inset:0;pointer-events:none;z-index:9001;border-radius:inherit;
  background:radial-gradient(ellipse at center,transparent 55%,rgba(0,0,0,.55) 100%);
}
.flicker #app{animation:flick 6s infinite steps(60)}
@keyframes flick{0%,97%{opacity:1}98%{opacity:.86}99%{opacity:.97}100%{opacity:1}}

/* Layout */
#app{position:relative;display:grid;grid-template-columns:1fr 320px;grid-template-rows:1fr;height:100vh;gap:8px;padding:8px;box-sizing:border-box;background:var(--bg)}

/* ── Retro monitor housing (toggleable via body.housing) ── */
:root{ --pad: clamp(16px, 3.4vw, 58px);
  /* default = aged beige, darker than before */
  --case:#a89e80; --case-hi:#c3b998; --case-lo:#837a5f; --plate:#4f4835; --screw:#7c7452; --vent:rgba(0,0,0,.24); --innerbezel:#0f0f0b; }
/* colour presets */
body.case-beige   { --case:#a89e80; --case-hi:#c3b998; --case-lo:#837a5f; --plate:#4f4835; --screw:#7c7452; --vent:rgba(0,0,0,.24); --innerbezel:#0f0f0b; }
body.case-graphite{ --case:#383b41; --case-hi:#51565e; --case-lo:#23252a; --plate:#aab0b9; --screw:#191b1f; --vent:rgba(0,0,0,.5);  --innerbezel:#080809; }
body.case-grey    { --case:#867f6f; --case-hi:#a29a86; --case-lo:#665f52; --plate:#423d31; --screw:#615a4b; --vent:rgba(0,0,0,.30); --innerbezel:#0d0d0a; }

body.housing{
  padding:var(--pad); box-sizing:border-box; min-height:100vh;
  background:
    radial-gradient(130% 150% at 50% -10%, var(--case-hi) 0%, var(--case) 42%, var(--case-lo) 100%);
}
body.housing #app{
  height:calc(100vh - var(--pad)*2);
  border-radius:26px;
  border:18px solid var(--case);
  box-shadow:
    0 1px 0 rgba(255,255,255,.35) inset,
    0 -3px 7px rgba(0,0,0,.45) inset,
    0 0 0 2px var(--case-lo),
    0 28px 64px rgba(0,0,0,.6),
    0 6px 14px rgba(0,0,0,.45);
  outline:11px solid var(--innerbezel);   /* black bezel ring around the glass */
  outline-offset:-11px;
}

/* the detail plate — hidden unless housing is on */
#frame{ display:none; }
body.housing #frame{ display:block; position:fixed; inset:0; z-index:6; pointer-events:none; }

/* corner screws */
#frame .screw{ position:fixed; width:11px; height:11px; border-radius:50%;
  background:radial-gradient(circle at 35% 30%, var(--case-hi), var(--screw) 70%, rgba(0,0,0,.6));
  box-shadow:0 1px 1px rgba(255,255,255,.3), 0 -1px 2px rgba(0,0,0,.4) inset; }
#frame .screw::after{ content:""; position:absolute; inset:0; margin:auto; width:7px; height:1.5px; background:rgba(0,0,0,.55); transform:rotate(40deg); border-radius:2px; }
#frame .screw.tl{ top:calc(var(--pad)*0.42); left:calc(var(--pad)*0.42); }
#frame .screw.tr{ top:calc(var(--pad)*0.42); right:calc(var(--pad)*0.42); }
#frame .screw.bl{ bottom:calc(var(--pad)*0.42); left:calc(var(--pad)*0.42); }
#frame .screw.br{ bottom:calc(var(--pad)*0.42); right:calc(var(--pad)*0.42); }

/* etched cooling vents, lower-left bezel */
#frame .vent{ position:fixed; left:calc(var(--pad) + 26px); bottom:calc(var(--pad)*0.24);
  width:150px; height:14px;
  background:repeating-linear-gradient(90deg, var(--vent) 0 2px, transparent 2px 8px);
  border-radius:3px; opacity:.8; }

/* brand plate, lower centre */
#frame .plate{ position:fixed; left:50%; bottom:calc(var(--pad)*0.26); transform:translateX(-50%);
  font-family:var(--font); font-size:11px; letter-spacing:4px; color:var(--plate);
  text-shadow:0 1px 0 rgba(255,255,255,.28); }

/* LED cluster, lower-right bezel */
#frame .leds{ position:fixed; right:calc(var(--pad) + 24px); bottom:calc(var(--pad)*0.16);
  display:flex; gap:14px; align-items:flex-end; }
#frame .led{ display:flex; flex-direction:column; align-items:center; gap:3px; }
#frame .led span{ font-family:var(--font); font-size:8px; letter-spacing:1px; color:var(--plate); opacity:.75; }
#frame .led i{ width:8px; height:8px; border-radius:50%; background:#222; box-shadow:0 0 2px rgba(0,0,0,.6) inset; }
/* power: solid green */
#frame .led.pwr i{ background:#39ff9a; box-shadow:0 0 7px #39ff9a, 0 0 2px #fff inset; }
/* activity: dark amber at rest; flickers only while the drive is working */
#frame .led.hdd i{ background:#4a3410; box-shadow:0 0 2px rgba(0,0,0,.6) inset; transition:background .15s; }
body.hdd-busy #frame .led.hdd i{ background:#ffb642; box-shadow:0 0 6px #ffb642, 0 0 2px #fff inset; animation:hdd .14s steps(2,end) infinite; }
/* network: dark until you're online, then cyan */
#frame .led.net i{ background:#3a2530; }
body.net-up #frame .led.net i{ background:#54e6ff; box-shadow:0 0 7px #54e6ff, 0 0 2px #fff inset; }
@keyframes hdd{0%,100%{opacity:1}45%{opacity:.25}}
.left{display:grid;grid-template-rows:200px 1fr;gap:8px;min-width:0}
.right{display:grid;grid-template-rows:auto auto 1fr;gap:8px;min-width:0}

.panel{
  background:linear-gradient(180deg,var(--panel),var(--panel-2));
  border:1px solid var(--edge);border-radius:6px;position:relative;
  box-shadow:inset 0 0 0 1px rgba(51,255,154,.05), inset 0 0 40px rgba(0,20,10,.6);
  overflow:hidden;
}
.panel > .cap{
  font-size:11px;letter-spacing:2px;color:var(--grn-dim);
  padding:4px 10px;border-bottom:1px solid var(--edge);text-transform:uppercase;
  display:flex;justify-content:space-between;align-items:center;background:rgba(0,0,0,.25);
}
.cap .dot{width:7px;height:7px;border-radius:50%;background:var(--grn);box-shadow:var(--glow);animation:pulse 2.2s infinite}
@keyframes pulse{50%{opacity:.35}}

/* Network map */
#mapWrap{padding:0}
#map{width:100%;height:100%;display:block}

/* Terminal */
#termPanel{display:flex;flex-direction:column;min-height:0}
#screen{flex:1;overflow-y:auto;padding:10px 12px;white-space:pre-wrap;word-break:break-word;scrollbar-width:thin;scrollbar-color:var(--grn-dim) transparent}
#screen::-webkit-scrollbar{width:8px}#screen::-webkit-scrollbar-thumb{background:var(--grn-deep);border-radius:4px}
.line{margin:0}
.sys{color:var(--ink)}
.err{color:var(--red)}
.ok{color:var(--grn)}
.warn{color:var(--amber)}
.dim{color:var(--muted)}
.cyan{color:var(--cyan)}
.hint{color:var(--amber);opacity:.9}
.prompt-line{color:var(--grn)}
.pfx{color:var(--cyan)}
.codexline{color:var(--amber)}
.big{font-size:15px;font-weight:bold;letter-spacing:1px}
.rule{color:var(--grn-deep)}
a.lnk{color:var(--cyan);text-decoration:underline;cursor:pointer}

#inputRow{display:flex;align-items:center;gap:6px;padding:6px 12px;border-top:1px solid var(--edge);background:rgba(0,0,0,.3)}
#ps1{color:var(--cyan);white-space:nowrap}
#cmd{flex:1;background:transparent;border:none;outline:none;color:var(--grn);font:inherit;text-shadow:var(--glow);caret-color:var(--grn)}
#cmd::placeholder{color:var(--muted)}

/* HUD meters */
.hud{padding:8px 10px;font-size:12px}
.meter{margin:6px 0}
.meter .lbl{display:flex;justify-content:space-between;color:var(--grn-dim);font-size:11px;letter-spacing:1px}
.bar{height:9px;border:1px solid var(--edge);border-radius:3px;overflow:hidden;background:#04110b;margin-top:2px}
.bar > i{display:block;height:100%;width:0;transition:width .4s ease}
.bar.dial > i{background:linear-gradient(90deg,var(--grn-deep),var(--grn));box-shadow:var(--glow)}
.bar.heat > i{background:linear-gradient(90deg,var(--grn-deep),var(--amber),var(--red))}
.kv{display:flex;justify-content:space-between;margin:3px 0;font-size:12px}
.kv b{color:var(--ink);font-weight:normal}
.kv span{color:var(--grn)}

/* Dossier */
#dossier .row{padding:2px 0;font-size:12px}
#dossier .t{color:var(--grn-dim);font-size:11px;letter-spacing:1px}

/* Evidence board */
#evi{padding:8px 10px;overflow-y:auto}
.evitem{display:flex;gap:8px;align-items:flex-start;padding:5px 6px;border:1px dashed var(--grn-deep);border-radius:4px;margin-bottom:6px;background:rgba(0,30,18,.25)}
.evitem .ic{font-size:15px;line-height:1}
.evitem .nm{color:var(--grn);font-size:12px}
.evitem .ds{color:var(--muted);font-size:11px}
.evitem.lost{border-color:var(--red);background:rgba(40,0,8,.25)}
.evitem.lost .nm{color:var(--red)}

/* Toolbar */
#bar{position:fixed;top:10px;right:336px;z-index:20;display:flex;gap:6px}
body.housing #bar{top:calc(var(--pad) + 26px);right:calc(336px + var(--pad) + 16px)}
.btn{font:inherit;font-size:11px;letter-spacing:1px;color:var(--grn-dim);background:rgba(0,0,0,.4);
  border:1px solid var(--edge);border-radius:4px;padding:3px 8px;cursor:pointer;text-transform:uppercase}
.btn:hover{color:var(--grn);border-color:var(--grn-deep);box-shadow:var(--glow)}
.btn.on{color:var(--grn);border-color:var(--grn-dim)}

/* Codex modal */
#codex{position:fixed;inset:0;z-index:9500;display:none;align-items:center;justify-content:center;background:rgba(0,6,3,.82)}
#codex.show{display:flex}
#codexBox{width:min(760px,92vw);max-height:84vh;overflow-y:auto;background:var(--panel);border:1px solid var(--grn-deep);
  border-radius:8px;box-shadow:0 0 40px rgba(51,255,154,.15);padding:0}
#codexBox .cap{position:sticky;top:0;font-size:12px;letter-spacing:2px;color:var(--amber);padding:8px 14px;border-bottom:1px solid var(--edge);background:var(--panel);display:flex;justify-content:space-between}
#codexBody{padding:14px 18px}
.cxentry{border-left:2px solid var(--grn-deep);padding:2px 0 12px 12px;margin-bottom:12px}
.cxentry h4{margin:0 0 4px;color:var(--cyan);font-size:13px;letter-spacing:1px}
.cxentry p{margin:0 0 6px;color:var(--ink);font-size:12.5px;line-height:1.5}
.cxentry .src{color:var(--muted);font-size:11px}
.locked{color:var(--muted);font-style:italic}

/* Boot */
#boot{position:fixed;inset:0;z-index:9800;background:#02060a;display:flex;align-items:center;justify-content:center;flex-direction:column;padding:40px}
#bootLog{width:min(820px,94vw);white-space:pre-wrap;color:var(--grn);font-size:13px}
#boot.hide{display:none}
.blink{animation:bl 1s steps(2) infinite}@keyframes bl{50%{opacity:0}}

/* Title */
#titleArt{color:var(--grn);text-shadow:var(--glow);font-size:12px;line-height:1.05;margin-bottom:16px}

@media (max-width:900px){
  #app{grid-template-columns:1fr}
  .right{display:none}
  #bar{right:10px}
  body.housing #bar{right:10px}
}

/* ══════════ realism & joy layer ══════════ */

/* amber (P3) phosphor mode — remaps the whole palette */
body.amber{
  --grn:#ffb64a; --grn-dim:#a86a24; --grn-deep:#4a2e0c; --ink:#ffd694; --muted:#8f5f2a;
  --cyan:#ffd27a; --amber:#fff0c0;
  --glow:0 0 6px rgba(255,182,74,.5), 0 0 22px rgba(255,150,40,.16);
  --scan:rgba(0,0,0,.30);
}

/* soft glass glare over the screen */
#glare{position:absolute;inset:0;z-index:8999;pointer-events:none;border-radius:inherit;
  background:linear-gradient(118deg, rgba(255,255,255,.07) 0%, rgba(255,255,255,.025) 16%, transparent 40%, transparent 100%);}

/* slow tracking-roll band — only appears when detection is critical */
#tracking{position:absolute;left:0;right:0;top:-80px;height:80px;z-index:9002;pointer-events:none;opacity:0;border-radius:inherit;
  background:linear-gradient(transparent, rgba(190,255,225,.06) 45%, rgba(190,255,225,.09) 55%, transparent);}
body.heat-crit #tracking{opacity:1;animation:roll 5.5s linear infinite}
@keyframes roll{0%{top:-80px}100%{top:100%}}

/* static burst overlay (trace detected / signal lost) */
#static{position:absolute;inset:0;z-index:9003;pointer-events:none;opacity:0;border-radius:inherit;mix-blend-mode:screen;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");}
#static.flash{animation:stat .5s steps(4) 1}
@keyframes stat{0%{opacity:.55}60%{opacity:.35}100%{opacity:0}}

/* detection-heat instability: the picture gets nervier as heat climbs */
body.heat-warn #app{animation-duration:3.2s}
body.heat-crit #app{animation:flick 1.3s infinite steps(60), jitter .18s infinite}
@keyframes jitter{0%,100%{transform:translate(0,0)}25%{transform:translate(.5px,-.5px)}50%{transform:translate(-.5px,.3px)}75%{transform:translate(.4px,.4px)}}

/* CRT power-on: black overlay + a bright line that swells into the picture */
#poweron{position:fixed;inset:0;z-index:9700;pointer-events:none;background:#000;display:none;overflow:hidden}
#poweron.run{display:block;animation:crtFade .9s ease-out forwards}
#poweron.run::before{content:"";position:absolute;left:0;right:0;top:50%;height:3px;transform:translateY(-50%) scaleX(0);
  background:#eafff6;box-shadow:0 0 30px #fff,0 0 90px #7fffcf;animation:crtLine .9s ease-out forwards}
@keyframes crtLine{0%{transform:translateY(-50%) scaleX(0);opacity:1;height:3px}
  16%{transform:translateY(-50%) scaleX(1);opacity:1;height:3px}
  46%{height:104%;opacity:.85}72%{opacity:.3}100%{height:104%;opacity:0}}
@keyframes crtFade{0%{opacity:1}62%{opacity:.55}100%{opacity:0}}

/* curved-glass mode: an optical barrel illusion — keeps text crisp, no warping */
body.curve #app{
  border-radius:clamp(30px,4.2vw,64px);
  box-shadow:inset 0 0 140px 34px rgba(0,0,0,.62), inset 0 0 46px rgba(0,25,14,.7);
  filter:saturate(1.06) contrast(1.03);
}
body.curve.crt #app::after{        /* tighter, bulging vignette */
  background:radial-gradient(ellipse 82% 82% at center, transparent 34%, rgba(0,0,0,.72) 100%);
}
body.curve #glare{                 /* convex sheen pooling toward the top of the tube */
  background:
    radial-gradient(120% 80% at 50% -6%, rgba(255,255,255,.12), rgba(255,255,255,.03) 26%, transparent 52%),
    linear-gradient(118deg, rgba(255,255,255,.06) 0%, transparent 40%);
}
body.curve #app::before{           /* scanlines fade at the edges, as if wrapping the glass */
  -webkit-mask:radial-gradient(ellipse 100% 100% at center, #000 55%, transparent 100%);
          mask:radial-gradient(ellipse 100% 100% at center, #000 55%, transparent 100%);
}

/* ================= V2 HORROR LAYER ================= */
/* jump-flash overlay */
#redflash{position:fixed;inset:0;z-index:9998;pointer-events:none;background:#ff1a1a;opacity:0;mix-blend-mode:screen;}
#redflash.hit{animation:rf .5s ease-out;}
@keyframes rf{0%{opacity:.85}12%{opacity:.2}20%{opacity:.7}100%{opacity:0}}

/* whole-screen shake */
@keyframes shk{10%{transform:translate(-3px,2px)}20%{transform:translate(4px,-3px)}30%{transform:translate(-5px,1px)}
40%{transform:translate(3px,3px)}50%{transform:translate(-2px,-4px)}60%{transform:translate(4px,2px)}
70%{transform:translate(-4px,-1px)}80%{transform:translate(2px,3px)}90%{transform:translate(-2px,-2px)}100%{transform:translate(0,0)}}
body.shake{animation:shk .5s linear;}
body.shake-long{animation:shk 1.4s linear;}

/* momentary color invert / signal tear */
body.invert{filter:invert(1) hue-rotate(90deg);}
body.desat{filter:grayscale(1) contrast(1.4) brightness(.7);}

/* deepening dread — vignette + colour drain as you go under */
#dread{position:fixed;inset:0;z-index:60;pointer-events:none;opacity:0;transition:opacity 2.5s ease;
  background:radial-gradient(ellipse at center, rgba(0,0,0,0) 30%, rgba(0,0,0,.55) 100%);}
body.dread-1 #dread{opacity:.5}
body.dread-2 #dread{opacity:.8;background:radial-gradient(ellipse at center, rgba(0,0,0,0) 18%, rgba(20,0,0,.75) 100%);}
body.dread-3 #dread{opacity:1;background:radial-gradient(ellipse at center, rgba(8,0,0,.25) 8%, rgba(30,0,0,.92) 100%);}
body.dread-2 #screen{text-shadow:0 0 6px rgba(255,60,60,.25);}
body.dread-3 #screen{text-shadow:0 0 10px rgba(255,40,40,.45);}

/* a line the presence typed — red, jittering */
.line.presence{color:#ff4d4d !important;text-shadow:0 0 8px rgba(255,40,40,.7);animation:pj .12s steps(2) infinite;}
@keyframes pj{0%{transform:translateX(0)}50%{transform:translateX(-1px)}100%{transform:translateX(1px)}}
.line.corrupt{color:#ff6a6a !important;letter-spacing:1px;animation:pj .09s steps(2) infinite;}
.line.whisper{color:#8a9;opacity:.7;font-style:italic;}

/* full-screen takeover */
#takeover{position:fixed;inset:0;z-index:9999;display:none;background:#050000;color:#ff2a2a;
  font:16px/1.7 "Courier New",monospace;padding:8vh 8vw;text-shadow:0 0 12px rgba(255,20,20,.6);
  overflow:hidden;}
#takeover.show{display:block;animation:tvin .25s steps(3);}
@keyframes tvin{from{opacity:0}to{opacity:1}}
#takeover .big{font-size:34px;letter-spacing:6px;margin:6vh 0;animation:pj .1s steps(2) infinite;}
#takeover .sml{opacity:.75}

/* the cursor when it moves on its own */
#ghostcur{position:fixed;z-index:9997;width:14px;height:20px;pointer-events:none;display:none;
  border-left:2px solid #ff3a3a;border-bottom:2px solid #ff3a3a;transform:rotate(-8deg);
  filter:drop-shadow(0 0 6px rgba(255,40,40,.8));}
#ghostcur.show{display:block;}

/* LED panic */
body.presence-on .led i{background:#ff2a2a !important;box-shadow:0 0 8px #ff2a2a !important;animation:blk .6s steps(1) infinite;}
@keyframes blk{50%{opacity:.2}}

/* ============ V2 POP-OUT CLUNKY KEYBOARD ============ */
#popkeyb{position:fixed;left:50%;bottom:16px;transform:translateX(-50%);z-index:9000;display:none;
  width:min(760px,96vw);background:linear-gradient(#e9e2d0,#cfc7b2);
  border:2px solid #6d6552;border-radius:12px;padding:10px 12px 14px;
  box-shadow:0 18px 40px rgba(0,0,0,.6),inset 0 2px 0 rgba(255,255,255,.5),inset 0 -6px 12px rgba(0,0,0,.25);
  user-select:none;font-family:"Courier New",monospace;}
#popkeyb.show{display:block;}
#popkeyb .kbhead{display:flex;justify-content:space-between;align-items:center;cursor:move;
  margin:-2px 0 8px;color:#4a4436;font-size:11px;letter-spacing:2px;font-weight:bold;}
#popkeyb .kbhead .x{cursor:pointer;background:#b9b09a;border:1px solid #6d6552;border-radius:4px;
  padding:1px 7px;color:#3a3428;}
#popkeyb .kbrow{display:flex;gap:5px;justify-content:center;margin:5px 0;}
#popkeyb .kc{flex:1 0 0;min-width:0;height:38px;display:flex;align-items:center;justify-content:center;
  background:linear-gradient(#faf6ec,#d8cfb8);border:1px solid #8a8069;border-radius:6px;
  box-shadow:inset 0 1px 0 #fff,inset 0 -3px 4px rgba(0,0,0,.22),0 2px 2px rgba(0,0,0,.25);
  color:#2e2a20;font-size:13px;font-weight:bold;cursor:pointer;transition:transform .04s,box-shadow .04s;}
#popkeyb .kc.wide{flex:1.6 0 0;} #popkeyb .kc.wider{flex:2.4 0 0;} #popkeyb .kc.space{flex:6 0 0;}
#popkeyb .kc.fn{background:linear-gradient(#e7dcc2,#c7bda2);font-size:11px;}
#popkeyb .kc:active,#popkeyb .kc.down{transform:translateY(3px);
  box-shadow:inset 0 1px 0 #fff,inset 0 2px 6px rgba(0,0,0,.35);}
body.amber #popkeyb{filter:none;}
/* toolbar keyboard button uses existing .btn */

/* ===== mobile DOCKED keyboard (inline, same window) ===== */
#popkeyb.docked{position:fixed;left:0;right:0;bottom:0;top:auto;width:100vw;transform:none;
  border-radius:12px 12px 0 0;border-bottom:none;padding:6px 8px calc(8px + env(safe-area-inset-bottom));
  box-shadow:0 -14px 34px rgba(0,0,0,.6),inset 0 2px 0 rgba(255,255,255,.5);max-height:46vh;z-index:9000;}
#popkeyb.docked .kbrow{gap:4px;margin:4px 0;}
#popkeyb.docked .kc{height:clamp(32px,6.2vh,44px);font-size:15px;}
#popkeyb.docked .kbhead{cursor:default;font-size:10px;}
/* shrink the game so the docked keyboard sits below it, not over the input */
body.kb-docked #app{height:54vh;}
body.kb-docked.housing #app{height:calc(54vh - var(--pad)*2);}