/* =====================================================================
   world.css: the building around the terminal. The gate you land on, the
   plates over the room while you walk about, the card a clicked thing
   opens, and the terminal sitting over a frozen, blurred room once you
   are at the desk. Loaded after pponzi.css.

   The gate is this building's own title: the name in a column on the
   left over the street, a brass plate for the door, and the building's
   directory on the right with the floor the lift car is at lit. The
   title is up from the first paint (body.gate-up), the street arrives
   behind it (body.ready) and powers up floor by floor; the copy and the
   plate land in step with that (world.js adds .lit to each).
   ===================================================================== */

body.world {
  /* the night's own colours, so the canvas fades up over something that
     already matches it and there is never a black rectangle first */
  background:
    radial-gradient(1200px 700px at 50% 60%, #111318 0%, #0a0b0f 60%, #06070a 100%);
}

#stage {
  position: fixed; inset: 0; width: 100%; height: 100%; display: block;
  touch-action: none; opacity: 0; transition: opacity .9s ease .05s;
}
body.ready #stage { opacity: 1; }
body.locked #stage { cursor: none; }

/* the crosshair under pointer lock: the one mode where aiming matters */
body.locked::after {
  content: ""; position: fixed; left: 50%; top: 50%; z-index: 40;
  width: 5px; height: 5px; margin: -2.5px 0 0 -2.5px; border-radius: 50%;
  background: var(--accent); opacity: .55; pointer-events: none;
}

#fade { position: fixed; inset: 0; z-index: 40; background: #000; opacity: 0; pointer-events: none; }
#veil {
  position: fixed; inset: 0; z-index: 95; background: #000; opacity: 0;
  pointer-events: none; transition: opacity .34s ease;
}
#veil.on { opacity: 1; transition-duration: .32s; }

/* ------------------------------------------------------------------ *
   the gate
 * ------------------------------------------------------------------ */

/* The scrim keeps the type legible without blacking out the ground floor:
   a left column for the words, a shallow foot, a touch at the top for the
   mast. The door, the basement window and the lift stay clear. */
#gate {
  position: fixed; inset: 0; z-index: 90;
  background:
    linear-gradient(to right, rgba(5, 6, 7, .78), rgba(5, 6, 7, .38) 30%, rgba(5, 6, 7, 0) 56%),
    linear-gradient(to top, rgba(5, 6, 7, .72) 0%, rgba(5, 6, 7, .36) 18%, rgba(5, 6, 7, .08) 38%, rgba(5, 6, 7, 0) 52%),
    linear-gradient(to bottom, rgba(5, 6, 7, .3), rgba(5, 6, 7, 0) 16%);
  transition: opacity .55s ease, transform .55s cubic-bezier(.4, 0, .8, .4);
}
/* on Enter the gate slides off to the left while the camera pushes in; the veil follows it */
#gate.away { opacity: 0; transform: translateX(-40px); }
#gate.gone { opacity: 0; pointer-events: none; }

.gate-mast {
  position: absolute; inset: 26px 34px auto; display: flex; justify-content: space-between; align-items: center; gap: 20px;
  font: 10px var(--mono); letter-spacing: .16em; color: #d9d6cc;
  opacity: 0; transition: opacity .6s ease;
}
.gate-mast i { font-style: normal; opacity: .4; padding: 0 11px; }
.gate-spec { color: #e8a94e; }
.gate-right { display: inline-flex; align-items: center; gap: 22px; }
.gate-snd {
  font: 10px var(--mono); letter-spacing: .12em; color: var(--faint); padding: 5px 9px 4px;
  border: 1px solid rgba(238, 243, 242, .16); border-radius: 2px;
  transition: color .15s ease, border-color .15s ease;
}
.gate-snd:hover { color: var(--ink); }
.gate-snd.on { color: var(--accent); border-color: rgba(205, 183, 136, .45); }
body.gate-up .gate-mast { opacity: 1; }

/* the directory: the building's floors, read top down, the lift car's floor lit */
.gate-dir {
  position: absolute; right: clamp(22px, 4.6vw, 64px); bottom: clamp(30px, 7vh, 74px);
  display: flex; flex-direction: column; align-items: flex-end; gap: 12px;
  opacity: 0; transition: opacity .9s ease .4s;
}
body.ready .gate-dir { opacity: 1; }
.gd-cap { font: 9px var(--mono); letter-spacing: .22em; text-transform: uppercase; color: var(--faint); white-space: nowrap; }
.gd-cap i { font-style: normal; opacity: .5; padding: 0 6px; }
.gate-dir ol { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; border-top: 1px solid rgba(215, 191, 142, .3); }
.gate-dir li {
  display: grid; grid-template-columns: 1fr 44px; align-items: baseline; gap: 14px;
  padding: 7px 0 6px; border-bottom: 1px solid rgba(238, 243, 242, .08);
  color: var(--faint); transition: color .4s ease;
}
.gate-dir li b { grid-column: 2; font: 400 24px/1 var(--serif); text-align: right; text-shadow: 0 1px 14px rgba(0, 0, 0, .7); }
.gate-dir li span { grid-column: 1; grid-row: 1; font: 9px var(--mono); letter-spacing: .14em; text-transform: uppercase; text-align: right; white-space: nowrap; }
.gate-dir li.here { color: #e3c88e; }
.gate-dir li.here b { text-shadow: 0 0 18px rgba(227, 200, 142, .55), 0 1px 14px rgba(0, 0, 0, .7); }

.gate-block {
  position: absolute; left: clamp(22px, 5.2vw, 78px); bottom: clamp(30px, 7vh, 74px);
  max-width: 440px;
}
.gate-eyebrow {
  margin: 0 0 16px; font: 11px var(--mono); letter-spacing: .2em; text-transform: uppercase;
  color: var(--accent);
}
.gate-mark {
  margin: 0 0 18px;
  font: 300 clamp(68px, 8.4vw, 124px)/.86 var(--serif); letter-spacing: -.045em;
  color: #f7f3ea; text-shadow: 0 2px 40px rgba(0, 0, 0, .6);
}
/* the dash matters: gold, set a touch tighter so "p-" reads as one mark */
.gate-mark b { font-weight: 400; color: #e3c88e; letter-spacing: -.06em; text-shadow: 0 0 30px rgba(227, 200, 142, .35), 0 2px 40px rgba(0, 0, 0, .6); }
/* what is actually being built, under the mark, while it is: a stage name and a hairline that grows with the stages (--k, 0..1) */
.gate-load {
  --k: 0; margin: 0 0 22px; display: flex; align-items: center; gap: 12px;
  font: 9px var(--mono); letter-spacing: .2em; text-transform: uppercase; color: var(--faint);
  transition: opacity .5s ease;
}
.gate-load i { display: block; width: 160px; height: 1px; background: rgba(238, 243, 242, .12); position: relative; }
.gate-load i::after { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: calc(var(--k) * 100%); background: var(--accent); transition: width .35s ease; }
body.ready .gate-load { opacity: 0; }
.gate-copy {
  margin: 0 0 26px; max-width: 380px;
  font: 15.5px/1.6 var(--serif); color: rgba(244, 240, 232, .86);
  text-shadow: 0 1px 16px rgba(0, 0, 0, .7);
}
.gate-acts { display: flex; align-items: center; gap: 22px; flex-wrap: wrap; }

/* a brass plate for the door: engraved dark type on brass, a highlight along its top edge */
.enter {
  display: inline-flex; align-items: baseline; justify-content: space-between; gap: 18px; min-width: 214px;
  padding: 14px 18px 13px 20px; border-radius: 2px;
  background: linear-gradient(#d9c598, #c6ae7c); color: #171410;
  box-shadow: inset 0 1px 0 rgba(255, 246, 222, .7), inset 0 -1px 0 rgba(70, 50, 20, .45), 0 12px 36px -16px rgba(0, 0, 0, .95);
  transition: background-color .13s ease, transform .07s ease, box-shadow .15s ease;
}
.enter:hover { background: linear-gradient(#e6d2a6, #d1b98a); }
.enter:active { transform: translateY(1px); background: linear-gradient(#c6ae7c, #d9c598); }
.enter:focus-visible { outline: 1px solid var(--accent); outline-offset: 3px; }
.enter-label { font: 15.5px var(--serif); }
.enter-hint { margin-left: 0; padding: 1px 6px 0; font: 500 9px/1.5 var(--mono); letter-spacing: .12em; color: rgba(23, 20, 16, .62); border-color: rgba(23, 20, 16, .35); opacity: 1; }
.skip {
  font: 11px var(--mono); letter-spacing: .06em; color: var(--faint); padding: 6px 0;
  border-bottom: 1px solid rgba(238, 243, 242, .18);
  transition: color .15s ease, border-color .15s ease;
}
.skip:hover { color: var(--ink); border-color: var(--accent); }
.skip:focus-visible { outline: 1px solid var(--accent); outline-offset: 3px; }
.skip kbd { margin-left: 6px; opacity: .5; }

/* the load-in, in two steps. The title is up from the first paint
   (body.gate-up); the copy and the plate wait for the street behind
   them, and world.js lights each (.lit) in step with the building
   powering up: no transition-delay, so the exit never inherits one. */
.gate-eyebrow, .gate-mark, .gate-load { opacity: 0; transition: opacity .5s ease; }
body.gate-up .gate-eyebrow, body.gate-up .gate-mark, body.gate-up .gate-load { opacity: 1; }
body.gate-up.ready .gate-load { opacity: 0; }   /* after the gate-up rule, or the hairline stays under the mark */
.gate-copy, .gate-acts { opacity: 0; transform: translateY(10px); transition: opacity .62s ease, transform .62s cubic-bezier(.22, .8, .3, 1); }
.gate-copy.lit, .gate-acts.lit { opacity: 1; transform: none; }

/* ------------------------------------------------------------------ *
   the plates over the room
 * ------------------------------------------------------------------ */

.plate {
  background: rgba(10, 11, 12, .58);
  border: 1px solid rgba(255, 255, 255, .12);
  border-radius: 3px;
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  color: var(--ink);
}
kbd {
  display: inline-block; margin-left: 7px; padding: 1px 5px 0;
  font: 500 9px/1.5 var(--mono); letter-spacing: .06em;
  border: 1px solid currentColor; border-radius: 2px; opacity: .62;
}

#hud { position: fixed; inset: 0; z-index: 30; pointer-events: none; opacity: 0; transition: opacity .7s ease .1s; }
#hud.in { opacity: 1; }
#hud > * { pointer-events: auto; }
body.seated #hud { opacity: 0; transition-delay: 0s; transition-duration: .3s; }
body.seated #hud > * { pointer-events: none; }

.hl {
  position: absolute; left: 18px; top: 18px;
  display: flex; align-items: center; gap: 13px; padding: 9px 16px 9px 12px; text-align: left;
  transition: border-color .15s ease;
}
.hl:hover { border-color: rgba(205, 183, 136, .45); }
.hl > b {
  min-width: 34px; text-align: center;
  font: 400 34px/1 var(--serif); color: #e3c88e; text-shadow: 0 0 18px rgba(227, 200, 142, .3);
}
.hl-t { display: flex; flex-direction: column; gap: 3px; }
.hl-t em { font: italic 400 16px/1.1 var(--serif); }
.hl-t i { font: 10px var(--mono); font-style: normal; letter-spacing: .04em; color: var(--faint); }

.hc {
  position: absolute; right: 18px; top: 18px;
  display: flex; align-items: center; gap: 14px; padding: 9px 12px 9px 14px;
  font: 11px var(--mono);
}
.hc-t { letter-spacing: .16em; font-size: 10px; color: var(--accent); }
.hc-cap { font-size: 13px; color: var(--ink); }
.hc-ca { font: 10.5px var(--mono); color: var(--dim); padding: 3px 8px; border: 1px solid var(--line); border-radius: 2px; }
.hc-ca i { font-style: normal; color: var(--ink); margin-left: 3px; }
.hc-ca:not(:disabled):hover { border-color: var(--accent); color: var(--ink); }
.hc-ca:disabled { cursor: default; opacity: .7; }

.hud-spec {
  position: absolute; left: 50%; top: 22px; transform: translateX(-50%); margin: 0;
  font: 10px var(--mono); letter-spacing: .16em; text-transform: uppercase; color: #e8a94e;
  padding: 6px 12px; border: 1px solid rgba(232, 169, 78, .35); border-radius: 2px;
  background: rgba(20, 12, 4, .55); white-space: nowrap;
}
.hud-spec i { font-style: normal; opacity: .5; padding: 0 6px; }

.hint {
  position: absolute; left: 18px; bottom: 18px; margin: 0; padding: 8px 12px;
  font: 10.5px var(--mono); letter-spacing: .03em; color: var(--dim);
  pointer-events: none !important;
}
.sit {
  position: absolute; right: 18px; bottom: 18px; padding: 10px 14px;
  font: 11.5px var(--mono); letter-spacing: .04em; color: var(--accent);
  border-color: rgba(205, 183, 136, .38);
  transition: border-color .15s ease, color .15s ease;
}
.sit:hover { color: #fff; border-color: var(--accent); }

#doorhint {
  position: fixed; z-index: 31; left: 50%; top: 50%; margin: 0;
  transform: translate(-50%, 34px); padding: 6px 15px;
  font: 11.5px var(--mono); letter-spacing: .1em; color: var(--accent);
  border-color: rgba(205, 183, 136, .32);
  opacity: 0; pointer-events: none; transition: opacity .18s ease; white-space: nowrap;
}
#doorhint.on { opacity: 1; }
/* with a free mouse it rides just below and right of the cursor */
#doorhint.at { left: var(--hx); top: var(--hy); transform: translate(14px, 18px); }
#doorhint.at.flip { transform: translate(calc(-100% - 10px), 18px); }

#stick {
  position: fixed; z-index: 32; left: 18px; bottom: 22px;
  width: 96px; height: 96px; border-radius: 50%;
  background: rgba(8, 10, 12, .4); border: 1px solid rgba(255, 255, 255, .14);
  -webkit-backdrop-filter: blur(5px); backdrop-filter: blur(5px);
  display: none; touch-action: none;
}
#knob {
  position: absolute; left: 50%; top: 50%; width: 44px; height: 44px; border-radius: 50%;
  transform: translate(-50%, -50%);
  background: rgba(205, 183, 136, .3); border: 1px solid rgba(205, 183, 136, .5);
}
/* the engine's notice when the browser drops the GPU context */
.graphics-status {
  position: fixed; left: 50%; top: 18px; transform: translateX(-50%); z-index: 100; margin: 0;
  padding: 8px 12px; font: 11px var(--mono); color: var(--ink);
  background: rgba(0, 0, 0, .72); border: 1px solid var(--line); border-radius: 3px;
}

.toast {
  position: fixed; z-index: 36; left: 50%; bottom: 70px; margin: 0; max-width: min(560px, calc(100vw - 32px));
  transform: translate(-50%, 8px); padding: 9px 14px;
  font: 11.5px/1.5 var(--mono); color: var(--ink); text-align: center;
  opacity: 0; transition: opacity .22s ease, transform .22s ease; pointer-events: none;
}
.toast.on { opacity: 1; transform: translate(-50%, 0); }

/* ------------------------------------------------------------------ *
   the card: what a clicked thing tells you
 * ------------------------------------------------------------------ */

.card {
  position: fixed; z-index: 35; right: 18px; top: 50%; transform: translateY(-50%);
  width: 372px; max-height: calc(100vh - 150px); overflow: auto; overscroll-behavior: contain;
  padding: 14px 18px 18px;
  background: rgba(9, 10, 11, .78);
  box-shadow: 0 24px 60px -24px rgba(0, 0, 0, .9);
}
.card.in { animation: cardin .24s cubic-bezier(.2, .8, .2, 1); }
@keyframes cardin { from { opacity: 0; transform: translate(10px, -50%); } }
body.seated .card { display: none; }

.cd-head { display: flex; align-items: center; justify-content: space-between; }
.cd-eye { font: 9.5px var(--mono); letter-spacing: .22em; text-transform: uppercase; color: var(--accent); }
.cd-x { font: 10px var(--mono); color: var(--faint); padding: 4px 0 4px 8px; }
.cd-x:hover { color: var(--ink); }
.cd-x kbd { margin-left: 5px; }

.cd-title {
  display: flex; align-items: baseline; flex-wrap: wrap; gap: 10px;
  margin: 10px 0 8px; font: 400 30px/1.05 var(--serif); letter-spacing: -.02em;
}
.cd-src { font: 9.5px var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--faint); }
.cd-src.s-live { color: #9fd38a; }
.cd-src.s-demo { color: #e0a44a; }
.cd-src.s-stale { color: #ff8f73; }
.cd-big {
  margin: 4px 0 14px; font: 400 54px/1 var(--serif); letter-spacing: -.03em; color: #f2e4c2;
  text-shadow: 0 0 30px rgba(205, 183, 136, .3);
}
.cd-big em { font: 11px var(--mono); font-style: normal; letter-spacing: .16em; margin-left: 10px; color: var(--accent); text-shadow: none; }
.cd-rows { margin: 0 0 14px; display: grid; gap: 0; }
.cd-rows > div { display: flex; justify-content: space-between; gap: 14px; padding: 7px 0; border-top: 1px solid rgba(255, 255, 255, .08); }
.cd-rows dt { font: 10px var(--mono); letter-spacing: .06em; color: var(--faint); }
.cd-rows dd { margin: 0; font: 12px var(--mono); color: var(--ink); }
.cd-say { margin: 12px 0 0; font: italic 14px/1.5 var(--serif); color: var(--dim); }
.cd-who { margin: 10px 0 0; font: 10.5px/1.6 var(--mono); color: var(--faint); }
.cd-acts { margin-top: 16px; }
.cd-acts button {
  width: 100%; padding: 10px 12px; text-align: left;
  font: 11px var(--mono); letter-spacing: .03em; color: var(--accent);
  border: 1px solid rgba(205, 183, 136, .34); border-radius: 2px;
  transition: border-color .15s ease, color .15s ease;
}
.cd-acts button:hover { color: #fff; border-color: var(--accent); }
.cd-acts kbd { float: right; }

.card .potchart { margin: 2px 0 6px; }
.card .potchart-l span:nth-child(2) { display: none; }

.cd-tape { list-style: none; margin: 4px 0 0; padding: 0; }
.cd-tape li { display: grid; grid-template-columns: 62px 1fr auto; gap: 10px; padding: 7px 0; border-top: 1px solid rgba(255, 255, 255, .08); align-items: baseline; }
.cd-tape b { font: 500 9px var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--faint); }
.cd-tape li.paid b { color: var(--accent); }
.cd-tape span { font: 11.5px/1.45 var(--mono); color: var(--ink); overflow-wrap: anywhere; }
.cd-tape i { font: 10px var(--mono); font-style: normal; color: var(--faint); white-space: nowrap; }

.cd-rules { margin: 6px 0 0; padding: 0 0 0 20px; font: 14px/1.5 var(--serif); color: var(--dim); }
.cd-rules li { margin-bottom: 8px; padding-left: 4px; }
.cd-rules li::marker { font: 10px var(--mono); color: var(--accent); }

.lift { list-style: none; margin: 8px 0 0; padding: 0; display: grid; gap: 6px; }
.lf {
  width: 100%; display: grid; grid-template-columns: 46px 1fr auto; align-items: center; gap: 12px;
  padding: 8px 12px 8px 8px; text-align: left;
  border: 1px solid rgba(255, 255, 255, .1); border-radius: 2px; background: rgba(255, 255, 255, .02);
  transition: border-color .15s ease, background .15s ease;
}
.lf:hover { border-color: rgba(255, 255, 255, .24); }
.lf-n {
  display: grid; place-items: center; height: 38px; border-radius: 2px;
  font: 400 22px/1 var(--serif); color: var(--dim); background: rgba(0, 0, 0, .35);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .08);
}
.lf-t { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.lf-t b { font: 400 16px/1.15 var(--serif); color: var(--ink); }
.lf-t i { font: 10px var(--mono); font-style: normal; color: var(--faint); }
.lf-s { font: 9.5px var(--mono); letter-spacing: .06em; color: var(--faint); text-align: right; }
.lf.here { border-color: rgba(205, 183, 136, .5); background: rgba(205, 183, 136, .07); }
.lf.here .lf-n { color: #e3c88e; box-shadow: inset 0 0 0 1px rgba(205, 183, 136, .5), 0 0 16px rgba(205, 183, 136, .18); }
.lf.here .lf-s { color: var(--accent); }
.lf.locked .lf-t b, .lf.locked .lf-n { color: rgba(238, 243, 242, .38); }
.lf.locked .lf-s::before { content: "locked · "; color: rgba(238, 243, 242, .3); }

/* ------------------------------------------------------------------ *
   the terminal, once you are sitting at it
 * ------------------------------------------------------------------ */

/* the room stays behind the monitor, frozen on its last frame and out of
   focus, so the screen reads as something in front of you in the basement */
body.world #terminal { background: none; transition: none; opacity: 1; }
/* the backdrop is its own layer under the frame, so the frame can start
   growing out of the drawn monitor 150 ms before the room dims behind it,
   and soft enough that the neon, the lamp and the brick stay in view */
body.world #terminal::before {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: radial-gradient(120% 100% at 50% 46%, rgba(5, 6, 7, .18), rgba(2, 3, 4, .58));
  -webkit-backdrop-filter: blur(3px) saturate(.9); backdrop-filter: blur(3px) saturate(.9);
  opacity: 0; transition: opacity .4s ease .15s;
}
body.world #terminal.in::before { opacity: 1; }
/* the screen comes up out of the monitor on the desk: the camera stops
   with the monitor at about half the frame, so the terminal starts at that
   size and grows to fill the view */
body.world #terminal .term-frame { --tin: .40; opacity: 0; transition: transform .7s cubic-bezier(.2, .8, .2, 1), opacity .3s ease; }
body.world #terminal.in .term-frame { opacity: 1; }
body.world #terminal:not(.in) .term-frame { transition-duration: .3s, .25s; }

.chin-stand {
  pointer-events: auto; margin-left: auto;
  font: 500 10.5px var(--mono); letter-spacing: .18em; text-transform: uppercase; color: #4e5149;
  padding: 5px 10px 4px; border-radius: 2px;
  background: linear-gradient(#c6c8bf, #b2b4aa);
  border: 1px solid rgba(0, 0, 0, .2);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .65), 0 1px 0 rgba(255, 255, 255, .35);
}
.chin-stand:hover { color: #23251f; }
.chin-stand:active { background: linear-gradient(#b2b4aa, #c0c2b9); box-shadow: inset 0 1px 2px rgba(0, 0, 0, .25); transform: translateY(1px); }
.chin-stand kbd { margin-left: 6px; opacity: .55; }
body.world .chin-led { margin-left: 12px; }
body:not(.world) .chin-stand { display: none; }

/* ------------------------------------------------------------------ *
   phones and narrow windows
 * ------------------------------------------------------------------ */

@media (pointer: coarse) {
  #stick { display: block; }
  body.seated #stick, body:not(.world) #stick { display: none; }
  #gate:not([hidden]) ~ #stick { display: none; }
}

@media (max-width: 720px) {
  /* two items fit on a phone's top line: the name, and the specimen stamp
     when there is one; the pair and chain step aside */
  .gate-mast { inset: 18px 18px auto; font-size: 8.5px; letter-spacing: .08em; white-space: nowrap; }
  .gate-right > span { display: none; }
  .gate-mast i { padding: 0 6px; }
  .gate-acts { flex-direction: column; align-items: stretch; gap: 14px; }
  .enter-label { white-space: nowrap; }
  .skip { align-self: flex-start; }
  /* the directory tucks under the mast on a phone, letters only */
  .gate-dir { right: 18px; top: 56px; bottom: auto; gap: 8px; }
  .gate-dir li { grid-template-columns: 30px; padding: 4px 0 3px; }
  .gate-dir li b { grid-column: 1; font-size: 18px; }
  .gate-dir li span, .gd-cap { display: none; }
  .gate-block { left: 18px; right: 18px; max-width: none; bottom: max(26px, env(safe-area-inset-bottom)); }
  .gate-mark { font-size: clamp(60px, 19vw, 84px); margin-bottom: 14px; }
  .gate-load { margin-bottom: 16px; }
  .gate-copy { font-size: 15px; margin-bottom: 20px; }
  .enter { min-width: 0; flex: 1; }

  .hl { left: 10px; top: 10px; padding: 7px 12px 7px 9px; gap: 10px; }
  .hl > b { font-size: 26px; min-width: 26px; }
  .hl-t em { font-size: 14px; }
  .hl-t i { font-size: 9px; max-width: 46vw; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .hc { right: 10px; top: 10px; gap: 9px; padding: 7px 9px; }
  .hc-t { display: none; }
  .hud-spec { top: auto; bottom: 132px; font-size: 9px; letter-spacing: .1em; }
  .hint { display: none; }
  .sit { right: 10px; bottom: 22px; }
  #stick { left: 14px; bottom: 18px; }

  .card {
    left: 10px; right: 10px; top: auto; bottom: 10px; transform: none;
    width: auto; max-height: 64vh; padding: 12px 14px 14px;
  }
  @keyframes cardin { from { opacity: 0; transform: translateY(14px); } }
  .cd-big { font-size: 44px; }
  .toast { bottom: 136px; }
}

@media (max-height: 560px) and (min-width: 721px) {
  .gate-mark { font-size: 72px; }
  .gate-copy { margin-bottom: 16px; }
  .gate-dir { display: none; }
  .card { max-height: calc(100vh - 110px); }
}

@media (prefers-reduced-motion: reduce) {
  #stage, .gate-block > *, .gate-mast, .gate-dir, .gate-load i::after, #gate, #hud, #veil, .toast { transition: none; }
  body.world #terminal .term-frame { --tin: 1; transition: none; }
  .gate-copy, .gate-acts { opacity: 1; transform: none; }
  #gate.away { transform: none; }
  .card.in { animation: none; }
}

/* ------------------------------------------------------------------ *
   the boot note: what the page says when it cannot start, instead of
   sitting there blank (opened as a file, or the code failed to load)
 * ------------------------------------------------------------------ */
#bootnote {
  position: fixed; inset: 0; z-index: 200; display: flex; flex-direction: column; justify-content: center;
  padding: 0 max(24px, 8vw); background: radial-gradient(900px 560px at 50% 42%, #1b1814, #07090b 70%);
  color: var(--ink); font: 15px/1.6 var(--serif);
}
#bootnote b { font: 400 clamp(30px, 4.4vw, 54px)/1.05 var(--serif); letter-spacing: -.02em; margin-bottom: 18px; color: #f3efe6; }
#bootnote p { margin: 0 0 8px; max-width: 620px; color: var(--dim); }
#bootnote code { font: 13px var(--mono); color: var(--accent); }
/* the flat page's one admission: why the room is not here */
#whynot {
  position: absolute; left: 50%; bottom: max(10px, 1.6vh); transform: translateX(-50%); margin: 0;
  max-width: min(960px, calc(100vw - 32px)); padding: 7px 14px;
  font: 11px/1.6 var(--mono); color: var(--dim); text-align: center;
  background: rgba(8, 9, 10, .7); border: 1px solid rgba(255, 255, 255, .1); border-radius: 3px;
}
#whynot b { font-weight: 500; color: #e0a44a; }
#whynot a { color: var(--accent); }
/* ------------------------------------------------------------------ *
   the lift ride
 * ------------------------------------------------------------------ */
#transit {
  position: fixed; inset: 0; z-index: 97; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 22px;
  background: #000; opacity: 0; transition: opacity .3s ease; pointer-events: none;
}
#transit.in { opacity: 1; }
.tr-box {
  position: relative; display: flex; align-items: center; justify-content: center; gap: 18px;
  min-width: 220px; padding: 26px 34px 22px;
  border: 1px solid rgba(168, 134, 78, .55); border-radius: 3px;
  background: linear-gradient(#1b1a16, #0e0d0b);
  box-shadow: inset 0 1px 0 rgba(255, 230, 180, .12), 0 0 60px rgba(168, 134, 78, .12);
}
.tr-eye { position: absolute; left: 50%; top: -8px; transform: translateX(-50%); padding: 0 8px; background: #0e0d0b; font: 9px var(--mono); letter-spacing: .24em; text-transform: uppercase; color: rgba(205, 183, 136, .7); white-space: nowrap; }
.tr-eye i { font-style: normal; opacity: .5; padding: 0 5px; }
#tr-floor { font: 400 92px/1 var(--serif); color: #ffb347; text-shadow: 0 0 26px rgba(255, 179, 71, .55); min-width: 1.1em; text-align: center; }
#tr-floor.tick { animation: trtick .3s ease; }
@keyframes trtick { from { opacity: .3; transform: translateY(6px); } }
#tr-arrow { font-style: normal; font-size: 28px; color: rgba(255, 179, 71, .8); animation: trarrow 1s ease-in-out infinite; }
@keyframes trarrow { 50% { transform: translateY(-5px); opacity: .5; } }
#tr-line { margin: 0; font: italic 400 16px var(--serif); color: var(--dim); }

.snd {
  position: absolute; left: 18px; top: 84px; padding: 7px 11px;
  font: 10.5px var(--mono); letter-spacing: .06em; color: var(--faint);
  transition: border-color .15s ease, color .15s ease;
}
.snd:hover { color: var(--ink); }
.snd.on { color: var(--accent); border-color: rgba(205, 183, 136, .45); }

#fps {
  position: fixed; left: 50%; top: 64px; transform: translateX(-50%); z-index: 100;
  padding: 4px 9px; font: 11px var(--mono); color: #9fd38a; background: rgba(0, 0, 0, .6); border-radius: 2px; pointer-events: none;
}

@media (max-width: 720px) {
  .snd { left: 10px; top: 68px; }
  #tr-floor { font-size: 70px; }
}
@media (prefers-reduced-motion: reduce) {
  #tr-arrow, #tr-floor.tick { animation: none; }
  #transit { transition: none; }
}