/* ============================================================
   REALLIONAIRE: ZERO WORLD  -  instrument panel
   black / brushed silver / restrained gold. chamfered, engraved.
   8px grid. nothing rounded, nothing glowing for the sake of it.
   ============================================================ */

:root{
  --black:      #0A0A0C;
  --black-2:    #0E0F12;
  --black-3:    #121317;
  --void:       #050506;
  --silver:     #B8BCC4;
  --silver-lo:  #6E737C;
  --silver-hi:  #E6E8EC;
  --gold:       #C9A24B;
  --gold-hi:    #F2D27A;
  --violet:     #4A3A6E;
  --red:        #C03A3A;
  --green:      #4E8F6A;
  --rule:       rgba(184,188,196,0.22);
  --rule-hi:    rgba(230,232,236,0.55);
  --gold-rule:  rgba(201,162,75,0.55);
  --u: 8px;
  --mono: ui-monospace, "SF Mono", "JetBrains Mono", "IBM Plex Mono", Menlo, Consolas, monospace;
  --serif: "Didot", "Bodoni MT", "Playfair Display", "Hoefler Text", Georgia, "Times New Roman", serif;
  --jitter: 0px;
}

*{ box-sizing:border-box; margin:0; padding:0; }

html,body{
  width:100%; height:100%; overflow:hidden;
  background:var(--void); color:var(--silver);
  font-family:var(--mono);
  -webkit-font-smoothing:antialiased;
  overscroll-behavior:none;
  touch-action:none;
  user-select:none; -webkit-user-select:none;
  -webkit-tap-highlight-color:transparent;
}

#stage{ position:fixed; inset:0; z-index:1; }
#stage canvas{ display:block; }

.hud{
  position:fixed; inset:0; z-index:10;
  pointer-events:none;
  transform: translate(var(--jitter), 0);
}
.hud > *{ pointer-events:none; }
.hud button, .hud .panel, .hud .modal{ pointer-events:auto; }

/* ---------- shared chrome: chamfered engraved plate ---------- */
.plate{
  background: linear-gradient(180deg, rgba(18,19,23,0.86), rgba(10,10,12,0.9));
  border:1px solid var(--rule);
  clip-path: polygon(10px 0, 100% 0, 100% calc(100% - 10px), calc(100% - 10px) 100%, 0 100%, 0 10px);
  backdrop-filter: blur(3px);
}
.plate::after{
  content:""; position:absolute; left:0; bottom:0; height:1px; width:100%;
  background: linear-gradient(90deg, transparent, var(--gold-rule) 20%, var(--gold-rule) 80%, transparent);
}

/* ============================ NEURALUX ============================ */
.neur{
  position:absolute; left:16px; bottom:16px; width:300px; max-width:46vw;
  padding:8px 10px 10px;
  background: linear-gradient(180deg, rgba(14,15,18,0.82), rgba(8,8,10,0.88));
  border-left:1px solid var(--gold-rule);
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - 12px), calc(100% - 12px) 100%, 0 100%);
}
.neurname{
  font-size:9px; letter-spacing:.34em; color:var(--gold);
  margin-bottom:4px; opacity:.85;
}
.neurwave{ display:block; width:100%; height:26px; margin-bottom:6px; }
/* bounded: the panel keeps one height however long the line is, so
   everything stacked on it stays put */
.neurlines{ font-size:11px; line-height:1.55; letter-spacing:.06em; color:var(--silver-hi); height:52px; overflow:hidden; }
.neurlines b{ color:var(--gold-hi); font-weight:400; }
.neurlines .del{ color:var(--red); text-decoration:line-through; opacity:.85; }
.neurlines .caret{ display:inline-block; width:6px; background:var(--gold-hi); animation:blink 1s steps(2) infinite; }
@keyframes blink{ 0%,49%{opacity:1} 50%,100%{opacity:0} }

/* ============================ GAUGES ============================ */
.gauges{ position:absolute; left:16px; top:16px; width:236px; display:flex; flex-direction:column; gap:6px; }
.gauge{ position:relative; padding:6px 8px 8px; background:linear-gradient(180deg,rgba(16,17,20,.8),rgba(9,9,11,.86)); border:1px solid var(--rule); border-bottom:none;
  clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%); }
.gauge::after{ content:""; position:absolute; left:0; bottom:0; height:1px; width:100%; background:linear-gradient(90deg,transparent,var(--gold-rule),transparent); }
.glabel{ font-size:8px; letter-spacing:.3em; color:var(--silver-lo); }
.gtrack{ height:4px; margin:5px 0 4px; background:rgba(0,0,0,.7); border:1px solid rgba(184,188,196,.14); position:relative; overflow:hidden; }
.gfill{ position:absolute; inset:0; width:0%; background:linear-gradient(90deg,#8a6a24,var(--gold),var(--gold-hi)); transition:width .7s cubic-bezier(.16,.84,.28,1); }
.gfill-stab{ background:linear-gradient(90deg,#4a5460,#8fa3b8,var(--silver-hi)); }
.gauge.danger .gfill-stab{ background:linear-gradient(90deg,#5a2020,var(--red),#e07a5a); }
.gval{ font-size:12px; letter-spacing:.14em; color:var(--silver-hi); text-align:right; }

/* ============================ ENERGY + RES ============================ */
.res{ position:absolute; left:16px; top:136px; width:236px; padding:8px; background:linear-gradient(180deg,rgba(16,17,20,.78),rgba(9,9,11,.86)); border:1px solid var(--rule); }
.res::after{ content:""; position:absolute; left:0; bottom:0; height:1px; width:100%; background:linear-gradient(90deg,transparent,var(--gold-rule),transparent); }
.energy{ display:flex; align-items:center; gap:10px; }
.ediamond{ width:34px; height:48px; display:block; }
.ed-out{ fill:none; stroke:var(--silver); stroke-width:1.2; opacity:.8; }
.ed-fill{ fill:url(#none); fill:#C9A24B; transition:y .5s cubic-bezier(.16,.84,.28,1); }
.ed-seam{ fill:none; stroke:var(--gold-hi); stroke-width:.7; opacity:.5; }
.energy-num{ font-size:15px; letter-spacing:.1em; color:var(--silver-hi); }
.energy-num i{ color:var(--silver-lo); font-style:normal; margin:0 2px; }
.resrows{ margin-top:8px; display:flex; flex-direction:column; gap:3px; }
.resrow{ display:flex; justify-content:space-between; font-size:10px; letter-spacing:.18em; border-bottom:1px solid rgba(184,188,196,.08); padding-bottom:2px; }
.resrow .rk{ color:var(--silver-lo); }
.resrow .rv{ color:var(--gold-hi); }

/* ============================ CORE BADGE ============================ */
/* sits directly above the NEURALUX readout so the two never collide */
.corebadge{ position:absolute; left:16px; bottom:148px; width:236px; padding:8px 10px; background:linear-gradient(180deg,rgba(16,17,20,.8),rgba(9,9,11,.88)); border:1px solid var(--rule); text-align:left; }
.corebadge::after{ content:""; position:absolute; left:0; top:0; width:1px; height:100%; background:linear-gradient(180deg,transparent,var(--gold-rule),transparent); }
.cblabel{ font-size:8px; letter-spacing:.3em; color:var(--silver-lo); }
.cblevel{ font-family:var(--serif); font-size:30px; line-height:1; color:var(--silver-hi); letter-spacing:.04em; margin-top:2px; }
.cbname{ font-size:10px; letter-spacing:.42em; color:var(--gold); margin-top:1px; }
/* what YOU are: the thing walking around down there has a name and a finish */
.cbself{ font-size:8px; letter-spacing:.24em; color:var(--silver-lo); margin-top:4px; border-top:1px solid rgba(184,188,196,.10); padding-top:4px; }

/* ============================ RAIL ============================ */
.rail{ position:absolute; right:16px; top:50%; transform:translateY(-50%); display:flex; flex-direction:column; gap:4px; align-items:flex-end; }
.tab{
  font-family:var(--mono); font-size:9px; letter-spacing:.22em; color:var(--silver-lo);
  background:linear-gradient(90deg,rgba(12,12,14,.6),rgba(18,19,23,.85));
  border:1px solid var(--rule); border-right:2px solid transparent;
  padding:7px 10px; min-width:104px; text-align:right; cursor:pointer;
  clip-path: polygon(8px 0, 100% 0, 100% 100%, 8px 100%, 0 calc(100% - 8px), 0 8px);
  transition:color .25s, border-color .25s, background .25s;
  display:flex; align-items:center; justify-content:flex-end; gap:8px;
}
.tab:hover, .tab.on{ color:var(--silver-hi); border-color:var(--rule-hi); border-right-color:var(--gold); background:linear-gradient(90deg,rgba(18,19,23,.7),rgba(28,25,20,.92)); }
.tab i{ font-style:normal; font-size:8px; color:var(--gold-hi); min-width:0; }
.tab i:not(:empty){ border:1px solid var(--gold-rule); padding:0 3px; }

/* ============================ PANEL ============================ */
.panel{
  position:absolute; right:0; top:0; height:100%; width:392px; max-width:88vw;
  background:linear-gradient(180deg, rgba(12,12,15,.96), rgba(8,8,10,.98));
  border-left:1px solid var(--rule);
  transform:translateX(102%); transition:transform .5s cubic-bezier(.16,.84,.28,1);
  display:flex; flex-direction:column;
}
.panel.open{ transform:translateX(0); }
.panel::before{ content:""; position:absolute; left:0; top:0; width:1px; height:100%; background:linear-gradient(180deg,transparent,var(--gold-rule) 30%,var(--gold-rule) 70%,transparent); }
.panel-head{ display:flex; align-items:center; justify-content:space-between; padding:14px 16px 10px; border-bottom:1px solid var(--rule); }
.panel-head h2{ font-family:var(--serif); font-size:19px; font-weight:400; letter-spacing:.22em; color:var(--silver-hi); }
.panel-close{ background:none; border:1px solid var(--rule); color:var(--silver-lo); width:26px; height:26px; cursor:pointer; font-size:11px; }
.panel-close:hover{ color:var(--silver-hi); border-color:var(--rule-hi); }
.panel-body{ flex:1; overflow-y:auto; padding:12px 16px 24px; -webkit-overflow-scrolling:touch; pointer-events:auto; }
.panel-body::-webkit-scrollbar{ width:3px; }
.panel-body::-webkit-scrollbar-thumb{ background:var(--rule-hi); }

/* panel content atoms */
.sec{ margin-bottom:18px; }
.sec-h{ font-size:9px; letter-spacing:.3em; color:var(--gold); margin-bottom:8px; display:flex; justify-content:space-between; border-bottom:1px solid rgba(201,162,75,.25); padding-bottom:4px; }
.sec-h span{ color:var(--silver-lo); letter-spacing:.1em; }
.row{ display:flex; justify-content:space-between; gap:10px; padding:7px 0; border-bottom:1px solid rgba(184,188,196,.09); font-size:11px; line-height:1.5; }
.row .k{ color:var(--silver-lo); letter-spacing:.14em; }
.row .v{ color:var(--silver-hi); text-align:right; }
.row.miss{ border-left:2px solid var(--gold); padding-left:8px; background:linear-gradient(90deg,rgba(201,162,75,.06),transparent); display:block; }
.miss-t{ color:var(--silver-hi); font-size:12px; letter-spacing:.06em; }
.miss-d{ color:var(--silver-lo); font-size:10px; margin-top:3px; line-height:1.6; }
.miss-p{ color:var(--gold); font-size:9px; letter-spacing:.2em; margin-top:5px; }
.miss.done .miss-t{ color:var(--silver-lo); text-decoration:line-through; }
.miss.done{ border-left-color:var(--silver-lo); }
.art{ display:flex; gap:10px; padding:9px 0; border-bottom:1px solid rgba(184,188,196,.09); }
.art-sig{ width:26px; height:26px; flex:none; border:1px solid var(--gold-rule); background:#000; position:relative; }
.art-sig::before{ content:""; position:absolute; inset:4px; background:linear-gradient(135deg,var(--gold),transparent 60%); }
.art-b{ flex:1; }
.art-n{ font-size:11px; letter-spacing:.12em; color:var(--gold-hi); }
.art-c{ font-size:10px; color:var(--silver-lo); margin-top:3px; line-height:1.55; }
.art.locked .art-n{ color:var(--silver-lo); }
.art.locked .art-sig{ opacity:.3; }
.blank{ color:var(--silver-lo); font-size:11px; line-height:1.7; letter-spacing:.04em; padding:6px 0; }
.logline{ font-size:11px; line-height:1.65; padding:6px 0; border-bottom:1px solid rgba(184,188,196,.07); color:var(--silver); }
.logline .who{ color:var(--gold); font-size:9px; letter-spacing:.24em; display:block; margin-bottom:2px; }
.logline.you .who{ color:var(--silver-hi); }

/* map */
.mapwrap{ display:grid; gap:2px; margin-top:4px; }
.cell{ aspect-ratio:1; background:rgba(255,255,255,.03); border:1px solid rgba(184,188,196,.1); position:relative; display:flex; align-items:center; justify-content:center; font-size:8px; color:var(--silver-lo); }
.cell.seen{ background:rgba(201,162,75,.1); border-color:var(--gold-rule); color:var(--gold-hi); }
.cell.here{ background:rgba(201,162,75,.28); }
.cell.core{ border-color:var(--silver-hi); color:var(--silver-hi); background:rgba(184,188,196,.14); }
.mapkey{ display:flex; gap:14px; margin-top:10px; font-size:9px; color:var(--silver-lo); }
.mapkey b{ color:var(--gold-hi); font-weight:400; }

/* settings */
.btn{
  font-family:var(--mono); font-size:10px; letter-spacing:.2em; color:var(--silver-hi);
  background:linear-gradient(180deg,rgba(24,25,30,.9),rgba(14,15,18,.95));
  border:1px solid var(--rule-hi); padding:9px 14px; cursor:pointer; width:100%; text-align:left;
  clip-path: polygon(7px 0, 100% 0, 100% calc(100% - 7px), calc(100% - 7px) 100%, 0 100%, 0 7px);
  margin-bottom:6px; transition:border-color .2s,color .2s;
}
.btn:hover{ border-color:var(--gold); color:var(--gold-hi); }
.btn.gold{ border-color:var(--gold); color:var(--gold-hi); }
.btn[disabled]{ opacity:.35; cursor:default; }
.btn small{ display:block; color:var(--silver-lo); font-size:9px; letter-spacing:.1em; margin-top:3px; }

/* ============================ PROMPT ============================ */
.prompt{ position:absolute; left:50%; bottom:24px; transform:translateX(-50%) translateY(12px); opacity:0; transition:opacity .3s, transform .3s; }
.prompt.on{ opacity:1; transform:translateX(-50%) translateY(0); }
/* the prompt is an instrument, not a call to action: black panel,
   gold hairline, the key engraved into it */
.prompt-btn{ font-family:var(--mono); font-size:11px; letter-spacing:.24em; color:var(--gold-hi);
  background:linear-gradient(180deg,rgba(201,162,75,.13),rgba(10,10,12,.94));
  border:1px solid rgba(201,162,75,.55); padding:11px 20px; cursor:pointer;
  box-shadow:inset 0 -2px 0 rgba(201,162,75,.78), 0 6px 22px rgba(0,0,0,.7);
  transition:color .3s ease,border-color .3s ease;
  clip-path: polygon(9px 0, 100% 0, 100% calc(100% - 9px), calc(100% - 9px) 100%, 0 100%, 0 9px);
  display:flex; align-items:center; gap:10px; }
.prompt-btn:hover,.prompt-btn:focus-visible{ color:#FFF4D8; border-color:var(--gold-hi); }
.prompt-btn em{ font-style:normal; font-size:9px; color:var(--silver-hi); opacity:.75;
  border:1px solid rgba(184,188,196,.4); padding:0 4px; }

/* ============================ TOUCH ============================ */
.touch{ position:absolute; inset:0; }
.stick{ position:absolute; left:22px; bottom:132px; width:104px; height:104px; border:1px solid rgba(184,188,196,.24);
  border-radius:50%; opacity:.5; display:none; }
.stick.on{ display:block; }
.stickknob{ position:absolute; left:50%; top:50%; width:38px; height:38px; margin:-19px 0 0 -19px; background:radial-gradient(circle,rgba(242,210,122,.9),rgba(201,162,75,.15));
  border-radius:50%; }
.fab{ display:none; position:absolute; right:20px; bottom:26px; width:62px; height:62px; border-radius:50%;
  border:1px solid var(--gold-rule); background:radial-gradient(circle at 50% 40%,rgba(201,162,75,.28),rgba(10,10,12,.9));
  color:var(--gold-hi); font-size:20px; cursor:pointer; }
.fab-sm{ right:96px; bottom:36px; width:50px; height:50px; font-size:15px; }

/* ============================ TITLE / CINEMATIC ============================ */
.title{ position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center; opacity:0; transition:opacity .9s; text-align:center; padding:0 24px; }
.title.on{ opacity:1; }
.title-sub{ font-size:10px; letter-spacing:.52em; color:var(--gold); margin-bottom:12px; }
.title-main{ font-family:var(--serif); font-weight:400; font-size:clamp(26px,6.6vw,64px); letter-spacing:.2em; color:var(--silver-hi);
  text-shadow:0 2px 40px rgba(0,0,0,.9); line-height:1.15; }
.title-main .g{ color:var(--gold-hi); }

.bar{ position:absolute; left:0; width:100%; height:0; background:#000; transition:height .7s cubic-bezier(.16,.84,.28,1); }
.bar-top{ top:0; } .bar-bottom{ bottom:0; }
.hud.cine .bar{ height:9vh; }
.hud.cine .gauges, .hud.cine .res, .hud.cine .corebadge, .hud.cine .rail{ opacity:0; transition:opacity .4s; }

/* ============================ GLITCH ============================ */
.glitch{ position:absolute; inset:0; pointer-events:none; opacity:0; mix-blend-mode:screen; }
.glitch.on{ opacity:1; }
.glitch .ch{ position:absolute; inset:0; display:block; }
.glitch .ch-r{ background:rgba(255,0,40,.5); transform:translateX(-2px); }
.glitch .ch-g{ background:rgba(0,255,120,.35); }
.glitch .ch-b{ background:rgba(40,80,255,.5); transform:translateX(2px); }
.glitch.on .ch-r{ mix-blend-mode:screen; }
.glitch .scan{ position:absolute; inset:0; background:repeating-linear-gradient(0deg,rgba(0,0,0,.16) 0 1px,transparent 1px 3px); opacity:.5; }
.hud.risk .glitch{ opacity:.55; animation:jit .12s steps(2) infinite; }
@keyframes jit{ 0%{transform:translate(0,0)} 50%{transform:translate(1px,-1px)} 100%{transform:translate(-1px,1px)} }

/* ============================ MODAL ============================ */
.modal{ position:absolute; inset:0; background:rgba(4,4,6,.94); display:none; align-items:center; justify-content:center; z-index:40; }
.modal.on{ display:flex; }
/* the instrument case: a chamfered panel with an engraved edge, so a
   room reads as something built rather than text floating on black */
.modal-body{ width:min(1020px,94vw); height:min(640px,92vh); position:relative; display:flex; flex-direction:column;
  border:1px solid var(--rule); background:linear-gradient(180deg,rgba(15,16,19,.72),rgba(8,8,10,.88));
  box-shadow:0 26px 80px rgba(0,0,0,.82), inset 0 1px 0 rgba(184,188,196,.05);
  clip-path: polygon(18px 0,100% 0,100% calc(100% - 18px),calc(100% - 18px) 100%,0 100%,0 18px); }

/* ============================ TOAST ============================ */
.toast{ position:absolute; left:50%; top:14%; transform:translate(-50%,-10px); opacity:0; transition:opacity .35s, transform .35s;
  font-size:10px; letter-spacing:.28em; color:var(--gold-hi); background:rgba(10,10,12,.9); border:1px solid var(--gold-rule);
  padding:9px 18px; text-align:center; max-width:80vw; }
.toast.on{ opacity:1; transform:translate(-50%,0); }

/* ============================ HOWTO ============================ */
/* THE HOWTO IS A CARD ON THE WORLD, NOT A SCREEN IN FRONT OF IT.
   It used to be a full-bleed dimmer with a centred box, which meant the
   first thing anybody saw of ZERO WORLD was a text panel on near-black:
   the world they had just arrived in was hidden behind the instructions
   for looking at it. It is a small card over the chamber now, the world
   stays lit behind it, and the first move dismisses it. */
.howto{ position:absolute; left:50%; transform:translateX(-50%); bottom:118px;
  display:none; z-index:50; pointer-events:none; }
.howto.on{ display:block; }
.howto-inner{ width:min(430px,88vw); border:1px solid var(--rule); background:linear-gradient(180deg,rgba(14,15,18,.90),rgba(8,8,10,.94)); padding:14px 16px;
  clip-path: polygon(12px 0,100% 0,100% calc(100% - 12px),calc(100% - 12px) 100%,0 100%,0 12px);
  box-shadow:0 18px 40px rgba(0,0,0,.55); }
.howto-k{ font-size:9px; letter-spacing:.3em; color:var(--gold); margin-top:10px; }
.howto-k:first-child{ margin-top:0; }
.howto-v{ font-size:12px; color:var(--silver-hi); line-height:1.6; margin-top:4px; letter-spacing:.04em; }
/* gold is an edge and a signal, never a fill: the panel is black,
   backlit by a hairline and an engraved underline */
.howto-close{ margin-top:14px; width:100%; font-family:var(--mono); font-size:10px; letter-spacing:.34em; color:var(--gold-hi);
  background:linear-gradient(180deg,rgba(242,210,122,.09),rgba(201,162,75,.02));
  border:1px solid rgba(201,162,75,.5); padding:9px; cursor:pointer; pointer-events:auto;
  box-shadow:inset 0 -2px 0 rgba(201,162,75,.8);
  transition:color .35s ease,border-color .35s ease,box-shadow .35s ease;
  clip-path: polygon(9px 0,100% 0,100% calc(100% - 9px),calc(100% - 9px) 100%,0 100%,0 9px); }
.howto-close:hover,.howto-close:focus-visible{ color:#FFF4D8; border-color:var(--gold-hi); box-shadow:inset 0 -2px 0 var(--gold-hi); }

/* ============================ RESPONSIVE ============================ */
/* PORTRAIT: gauges become a compact top row, rail becomes a bottom strip,
   panels become a bottom sheet, NEURALUX docks under the gauges. */
@media (orientation:portrait){
  /* the card clears the action prompt, which sits at 62px held upright */
  .howto{ bottom:118px; }
  .gauges{ left:8px; right:8px; top:8px; width:auto; flex-direction:row; gap:6px; }
  .gauge{ flex:1; padding:5px 7px 7px; }
  .glabel{ font-size:7px; letter-spacing:.2em; }
  .gval{ font-size:11px; }
  .res{ left:8px; right:8px; top:74px; width:auto; display:flex; align-items:center; gap:12px; padding:6px 8px; }
  .energy{ flex:none; }
  .ediamond{ width:24px; height:34px; }
  .energy-num{ font-size:12px; }
  .resrows{ margin-top:0; flex:1; }
  .corebadge{ left:8px; right:8px; top:122px; bottom:auto; width:auto; padding:5px 8px; display:flex; align-items:center; gap:10px; }
  .cblevel{ font-size:20px; margin-top:0; }
  .cbname{ margin-top:0; font-size:9px; letter-spacing:.28em; }
  .cblabel{ display:none; }
  .neur{ left:8px; right:8px; bottom:auto; top:158px; width:auto; max-width:none; }
  .neurlines{ min-height:30px; font-size:10px; }
  .neurwave{ height:20px; }
  .rail{ right:auto; left:0; bottom:0; top:auto; transform:none; flex-direction:row; width:100%;
    border-top:1px solid var(--rule); background:linear-gradient(180deg,rgba(10,10,12,.72),rgba(6,6,8,.96)); padding:5px 4px; gap:2px; justify-content:space-around; align-items:stretch; }
  .tab{ min-width:0; flex:1; flex-direction:column; justify-content:center; text-align:center; padding:6px 2px; font-size:7px; letter-spacing:.1em; gap:2px;
    clip-path:none; border:none; border-top:2px solid transparent; background:none; }
  .tab:hover,.tab.on{ border-top-color:var(--gold); border-right-color:transparent; background:rgba(201,162,75,.07); }
  .tab i:not(:empty){ position:absolute; margin:-22px 0 0 22px; }
  .panel{ right:0; left:0; top:auto; bottom:0; width:100%; max-width:100%; height:74vh; transform:translateY(102%);
    border-left:none; border-top:1px solid var(--rule); }
  .panel.open{ transform:translateY(0); }
  .prompt{ bottom:62px; }
  .prompt-btn{ padding:10px 16px; font-size:10px; }
  .fab{ display:block; }
  .toast{ top:auto; bottom:104px; }
  .modal-body{ width:96vw; height:70vh; }
  .title-main{ letter-spacing:.12em; }
}
@media (orientation:landscape){
  .fab{ display:none; }
}
/* very short landscape (phone on its side): shrink the rails */
@media (orientation:landscape) and (max-height:440px){
  .gauges{ width:180px; top:8px; left:8px; }
  .res{ width:180px; top:112px; left:8px; padding:6px; }
  .corebadge{ width:180px; left:8px; bottom:112px; }
  .neur{ width:236px; left:8px; bottom:8px; }
  .neurlines{ height:34px; font-size:10px; }
  .neurwave{ height:18px; }
  .tab{ min-width:88px; font-size:8px; padding:5px 8px; }
}
/* hide the touch stick affordance on non-touch */
@media (hover:hover) and (pointer:fine){ .fab{ display:none !important; } }

.hud.nohud .gauges, .hud.nohud .res, .hud.nohud .corebadge, .hud.nohud .rail, .hud.nohud .neur{ opacity:0; }
.gauges,.res,.corebadge,.rail,.neur{ transition:opacity .5s; }

/* ============================================================
   ENCOUNTERS  -  gates, NULLs, the Vault, the Gallery, the Market
   ============================================================ */
.modal-body.wide{ width:min(1080px,96vw); }
.modal-head{ padding:16px 20px 12px; border-bottom:1px solid var(--rule); position:relative; }
.modal-head::after{ content:""; position:absolute; left:20px; bottom:-1px; width:64px; height:1px; background:var(--gold-hi); }
.modal-head h2{ font-family:var(--serif); font-weight:400; font-size:22px; letter-spacing:.2em; color:var(--silver-hi); }
.modal-sub{ font-size:9px; letter-spacing:.24em; color:var(--silver-lo); margin-top:5px; }
.modal-scroll{ flex:1; overflow-y:auto; padding:16px 20px 24px; -webkit-overflow-scrolling:touch; }
.modal-scroll::-webkit-scrollbar{ width:3px; }
.modal-scroll::-webkit-scrollbar-thumb{ background:var(--rule-hi); }
.modal-scroll.center{ display:flex; flex-direction:column; align-items:center; justify-content:center; }
.modal-scroll.warm{ background:linear-gradient(180deg,rgba(30,20,10,.55),rgba(14,10,6,.7)); }
.modal-head.warm{ border-bottom-color:rgba(224,160,80,.35); }
.modal-head.warm::after{ background:#E0A050; }
.blank.warm{ color:#C0A078; }

/* vault vitrine */
.vitrine{ display:grid; grid-template-columns:repeat(auto-fill,minmax(150px,1fr)); gap:14px; }
.vitem{ border:1px solid var(--rule); padding:10px; background:linear-gradient(180deg,rgba(20,21,26,.6),rgba(10,10,12,.8)); }
.vitem.locked{ opacity:.42; }
.vtray{ height:64px; background:linear-gradient(180deg,rgba(184,188,196,.12),rgba(0,0,0,.6)); border-bottom:1px solid var(--rule);
  display:flex; align-items:center; justify-content:center; position:relative; }
.vtray::after{ content:""; position:absolute; left:12%; right:12%; bottom:0; height:1px; background:var(--gold-rule); }
.vobj{ width:26px; height:26px; }
.vobj.t-f{ background:linear-gradient(135deg,#6E737C,#2A2C32); clip-path:polygon(50% 0,100% 50%,50% 100%,0 50%); }
.vobj.t-r{ background:linear-gradient(135deg,#E6E8EC,#6E737C); clip-path:polygon(50% 0,100% 35%,82% 100%,18% 100%,0 35%); box-shadow:0 0 14px rgba(242,210,122,.3); }
.vobj.t-k{ background:linear-gradient(135deg,#F2D27A,#8a6a24); clip-path:polygon(50% 0,100% 50%,50% 100%,0 50%); box-shadow:0 0 20px rgba(242,210,122,.55); }
.vname{ font-size:10px; letter-spacing:.14em; color:var(--gold-hi); margin-top:8px; }
.vitem.locked .vname{ color:var(--silver-lo); }
.vdesc{ font-size:10px; color:var(--silver-lo); line-height:1.55; margin-top:4px; }

/* the find: a movie moment */
.modal-body.dark{ width:100vw; height:100vh; max-width:none; max-height:none;
  border:none; background:#000; box-shadow:none; clip-path:none; }
.modal.dark{ background:#000; }
.modal-body.dark .find{ height:100%; display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; padding:24px; }
.find-k{ font-size:9px; letter-spacing:.5em; color:var(--gold); }
.find-n{ font-family:var(--serif); font-weight:400; font-size:clamp(28px,6.4vw,68px); letter-spacing:.16em; color:var(--silver-hi);
  margin-top:14px; line-height:1.12; }
.find-rule{ width:120px; height:1px; background:linear-gradient(90deg,transparent,var(--gold-hi),transparent); margin:26px 0; }
.find-d{ max-width:640px; font-size:13px; line-height:1.85; color:var(--silver); letter-spacing:.05em; }
.find-r{ margin-top:18px; font-size:10px; letter-spacing:.26em; color:var(--gold-hi); }
.find-b{ margin-top:34px; font-family:var(--mono); font-size:11px; letter-spacing:.3em; color:#0A0A0C;
  background:linear-gradient(180deg,var(--gold-hi),var(--gold)); border:none; padding:12px 26px; cursor:pointer;
  clip-path:polygon(9px 0,100% 0,100% calc(100% - 9px),calc(100% - 9px) 100%,0 100%,0 9px); }

/* records */
.record{ font-size:13px; line-height:2; color:var(--silver-hi); letter-spacing:.05em; min-height:120px; }

/* gates */
.lockgrid{ display:grid; grid-template-columns:repeat(4,1fr); gap:14px; margin:10px 0 22px; }
.lcell{ aspect-ratio:1; border:1px solid var(--rule); background:rgba(255,255,255,.02); cursor:pointer; position:relative;
  clip-path:polygon(50% 0,100% 50%,50% 100%,0 50%); transition:background .18s, border-color .18s; }
.lcell::after{ content:""; position:absolute; inset:22%; background:rgba(184,188,196,.16); clip-path:polygon(50% 0,100% 50%,50% 100%,0 50%); }
.lcell.lit{ background:rgba(242,210,122,.85); border-color:var(--gold-hi); }
.lcell.ok{ background:rgba(78,143,106,.5); border-color:#4E8F6A; }
.lcell.bad{ background:rgba(192,58,58,.6); border-color:var(--red); }
.gate-status{ font-size:10px; letter-spacing:.26em; color:var(--silver-lo); text-align:center; margin-top:14px; line-height:1.9; max-width:640px; }
#dec,#esc,#race{ border:1px solid var(--rule); max-width:100%; height:auto; }

.hoard{ display:flex; gap:16px; flex-wrap:wrap; justify-content:center; margin:18px 0; }
.hobj{ width:110px; padding:14px 8px; border:1px solid var(--rule); cursor:pointer; text-align:center; background:rgba(255,255,255,.02); }
.hobj .ho{ width:34px; height:34px; margin:0 auto 10px; background:linear-gradient(135deg,#4A4E56,#1A1C20);
  clip-path:polygon(50% 0,100% 38%,82% 100%,18% 100%,0 38%); transition:all .3s; }
.hobj span{ font-size:9px; letter-spacing:.2em; color:var(--silver-lo); }
.hobj:hover{ border-color:var(--rule-hi); }
.hobj.real .ho{ background:linear-gradient(135deg,#F2D27A,#8a6a24); box-shadow:0 0 26px rgba(242,210,122,.7); }
.hobj.real span{ color:var(--gold-hi); }
.hobj.fake .ho{ opacity:.25; }
.hobj.fake span{ color:var(--red); }

.labgrid{ display:flex; flex-direction:column; gap:10px; }
.lterm{ border:1px solid var(--rule); padding:12px; cursor:pointer; background:rgba(255,255,255,.02); }
.lterm.read{ border-color:var(--gold-rule); background:rgba(201,162,75,.05); }
.lt-n{ font-size:9px; letter-spacing:.24em; color:var(--gold); margin-bottom:6px; }
.lt-t{ font-size:11px; line-height:1.75; color:var(--silver); }

.mirror-name{ font-family:var(--serif); font-size:26px; letter-spacing:.2em; color:var(--silver-hi); margin-bottom:8px; }
.mirroropts{ display:flex; flex-direction:column; gap:8px; width:min(560px,90%); margin:18px 0 6px; }
.mb{ font-family:var(--mono); font-size:11px; letter-spacing:.16em; text-align:left; padding:12px 14px; cursor:pointer;
  color:var(--silver-hi); background:linear-gradient(180deg,rgba(24,25,30,.9),rgba(14,15,18,.95)); border:1px solid var(--rule-hi); }
.mb:hover{ border-color:var(--gold); color:var(--gold-hi); }
.mb.q{ text-align:left; line-height:1.6; }

.nullface{ width:66px; height:88px; background:linear-gradient(180deg,#9AA0AA,#4A4E56);
  clip-path:polygon(35% 0,65% 0,78% 24%,70% 52%,84% 100%,16% 100%,30% 52%,22% 24%); opacity:.85; margin-bottom:6px; }
.nullface.friendly{ clip-path:polygon(34% 0,66% 0,76% 26%,68% 54%,80% 100%,20% 100%,32% 54%,24% 26%); filter:blur(.4px); }
.nullface.hostile{ clip-path:polygon(40% 0,60% 12%,55% 40%,72% 30%,64% 100%,30% 78%,26% 34%,44% 22%); filter:contrast(1.4); }
.qtext{ font-size:13px; line-height:1.9; letter-spacing:.06em; color:var(--silver-hi); max-width:620px; margin-top:12px; text-align:center; }
.city-glow{ width:170px; height:96px; background:radial-gradient(ellipse at 50% 100%, rgba(242,210,122,.5), transparent 70%); }
.voidthrone{ width:150px; height:140px; background:#000; border:1px solid rgba(74,58,110,.7);
  clip-path:polygon(22% 0,78% 0,78% 30%,100% 42%,86% 100%,14% 100%,0 42%,22% 30%); }
.reqs{ margin:18px 0 6px; width:min(420px,90%); }
.reqrow{ display:flex; justify-content:space-between; font-size:10px; letter-spacing:.18em; padding:7px 0;
  border-bottom:1px solid rgba(184,188,196,.1); color:var(--silver-lo); }
.reqrow.ok{ color:var(--gold-hi); }

/* the gallery */
.hall{ display:grid; grid-template-columns:repeat(auto-fill,minmax(240px,1fr)); gap:24px; }
.painting{ cursor:pointer; }
.painting.locked{ cursor:default; opacity:.75; }
.frame{ border:1px solid var(--rule-hi); padding:8px; background:#000; position:relative; }
.frame::after{ content:""; position:absolute; inset:8px; box-shadow:inset 0 0 50px rgba(0,0,0,.85); pointer-events:none; }
.frame img{ display:block; width:100%; aspect-ratio:16/10; object-fit:cover; }
.unlit{ display:block; width:100%; aspect-ratio:16/10; background:#050506; }
.pname{ font-family:var(--serif); font-size:16px; letter-spacing:.16em; color:var(--silver-hi); margin-top:10px; }
.pdesc{ font-size:10px; line-height:1.6; color:var(--silver-lo); margin-top:5px; }

.blow{ position:fixed; inset:0; background:#000; overflow:hidden; }
.blow img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; transform:scale(1.02); opacity:.9;
  transition:transform 2.4s cubic-bezier(.16,.84,.28,1), opacity 1.4s; }
.blow img.go{ transform:scale(3.4); opacity:.42; }
.blow-title{ position:absolute; left:0; right:0; bottom:12%; text-align:center; opacity:0; transition:opacity 1.2s .5s; }
.blow-title.go{ opacity:1; }
.bt-s{ font-size:10px; letter-spacing:.5em; color:var(--gold); margin-bottom:10px; }
.blow-title h1{ font-family:var(--serif); font-weight:400; font-size:clamp(24px,5vw,52px); letter-spacing:.2em; color:var(--silver-hi); }

/* endings */
.ending{ width:min(760px,94%); border:1px solid var(--rule); padding:18px 20px; margin-bottom:12px; cursor:pointer;
  background:linear-gradient(180deg,rgba(18,19,23,.8),rgba(10,10,12,.9)); text-align:left;
  clip-path:polygon(12px 0,100% 0,100% calc(100% - 12px),calc(100% - 12px) 100%,0 100%,0 12px); transition:border-color .25s,background .25s; }
.ending:hover{ border-color:var(--gold); background:linear-gradient(180deg,rgba(30,26,18,.9),rgba(12,11,9,.95)); }
.en-n{ font-family:var(--serif); font-size:24px; letter-spacing:.26em; color:var(--gold-hi); }
.en-s{ font-size:10px; letter-spacing:.3em; color:var(--silver-lo); margin-top:4px; }
.en-d{ font-size:12px; line-height:1.75; color:var(--silver); margin-top:10px; }
.en-r{ font-size:10px; line-height:1.7; color:var(--silver-lo); margin-top:10px; border-top:1px solid rgba(184,188,196,.12); padding-top:8px; }

/* core build */
.core-line{ font-family:var(--serif); font-size:17px; letter-spacing:.06em; color:var(--silver-hi); margin-bottom:16px; line-height:1.5; }
.mountgrid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(170px,1fr)); gap:10px; }
.mountcard{ border:1px solid var(--rule); padding:10px; background:rgba(255,255,255,.015); min-height:96px; position:relative; }
.mountcard.filled{ border-color:var(--gold-rule); background:rgba(201,162,75,.05); }
.mc-n{ font-size:10px; letter-spacing:.2em; color:var(--gold-hi); }
.mountcard:not(.filled) .mc-n{ color:var(--silver-lo); }
.mc-d{ font-size:10px; line-height:1.55; color:var(--silver-lo); margin-top:6px; }
.mc-x{ margin-top:8px; font-family:var(--mono); font-size:8px; letter-spacing:.2em; background:none; border:1px solid var(--rule);
  color:var(--silver-lo); padding:3px 7px; cursor:pointer; }
.mc-x:hover{ color:var(--red); border-color:var(--red); }
.modrow{ display:flex; gap:14px; align-items:center; justify-content:space-between; padding:12px 0;
  border-bottom:1px solid rgba(184,188,196,.1); }
.modrow.poor{ opacity:.62; }
.modrow.done{ opacity:.7; }
.mr-l{ flex:1; }
.mr-n{ font-size:11px; letter-spacing:.16em; color:var(--silver-hi); }
.mr-e{ font-size:10px; color:var(--gold); margin-top:3px; line-height:1.5; }
.mr-d{ font-size:10px; color:var(--silver-lo); margin-top:3px; line-height:1.5; }
.mr-r{ text-align:right; flex:none; }
.mr-c{ font-size:9px; letter-spacing:.16em; color:var(--silver-lo); margin-bottom:6px; }
.mr-b{ font-family:var(--mono); font-size:10px; letter-spacing:.2em; color:var(--silver-hi);
  background:linear-gradient(180deg,rgba(24,25,30,.9),rgba(14,15,18,.95)); border:1px solid var(--rule-hi);
  padding:8px 16px; cursor:pointer; }
.mr-b:hover:not([disabled]){ border-color:var(--gold); color:var(--gold-hi); }
.mr-b[disabled]{ opacity:.35; cursor:default; }
.mr-b.gold{ border-color:var(--gold); color:var(--gold-hi); }
.mr-done{ font-size:9px; letter-spacing:.2em; color:#4E8F6A; }
.levelrow .mr-n{ font-size:13px; }