/* ------------------------------------------------------------------
   Tokens
   The console rests on a lamp-lit walnut desk (drawn in css/desk.css + assets/desk.webp).
   The console is the one loud object; everything around it stays quiet.
------------------------------------------------------------------- */
:root {
  --wood: #342419; /* average colour of the tile, also the fallback */
  --text: #f4ead8; /* 10:1 on the lightest plank */
  --muted: #cdbda3; /* keeps 4.5:1 over the lamp-lit grain */

  --shell: #aab1e3;
  --shell-hi: #c4c9f0;
  --shell-lo: #8d94cc;
  --shell-edge: #737ab6;
  --shell-top: #b5bbe8; /* body gradient: nearly flat, like moulded plastic */
  --shell-bot: #9fa6da;
  --hole: #5c629f; /* speaker holes */
  --ctrl: #31356a;
  --ctrl-hi: #3d4282;
  --ctrl-lo: #292d5c;
  --ctrl-deep: #1e2148; /* the solid side under every control */
  --btn: #f2c94c;
  --btn-hi: #ffe08a;
  --btn-lo: #d6a92f;
  --btn-deep: #9e7a16;
  --bezel: #23253d;

  --cart: #2d2836;
  --cart-hi: #3e3749;
  --cart-lo: #24202b;
  --cart-light: rgba(236, 230, 250, 0.16); /* edge highlights on the shell */
  /* contact shadows cast on the desk: warm dark brown, so objects read as resting on a wooden table */
  --cast: rgba(26, 11, 3, 0.82);
  --cast-deep: rgba(22, 9, 2, 0.8);
  --cast-soft: rgba(22, 9, 2, 0.55);
  --socket: rgba(26, 11, 3, 0.3);

  --ink: #1d1a24;
  --led-off: #4b4f78;
  --led-on: #ffb454; /* warm amber: no green lights anywhere */

  --sans: "Schibsted Grotesk", ui-sans-serif, system-ui, sans-serif;
  --pixel: "Tiny5", "Pixelify Sans", ui-monospace, monospace; /* Tiny5 is loaded for the letter B only */

  /* sizes: console width drives everything (the console is 0.566 as wide as tall) */
  --w: clamp(290px, min(30vw, calc((100svh - 236px) * 0.566)), 520px);
  --cw: calc(var(--w) * 0.35); /* the reference's cartridge-to-console ratio */
  --ch: calc(var(--cw) * 0.84);
  --gap: calc(var(--w) * 0.17);
  --drop-visible: 0.55; /* share of the inserted cartridge that sticks out */
  --drop: calc(var(--ch) * var(--drop-visible) + 8px); /* room under the console for it */
  --con-h: calc(var(--w) * 1.7665); /* the console's height: 176.65cqw, see .console */
}

* {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
}

body {
  min-height: 100svh;
  color: var(--text);
  font-family: var(--sans);
  font-size: 17px;
  line-height: 1.5;
  /* pixel wood, shown at 4x; a warm vignette keeps the eye on the console */
  background:
    radial-gradient(120% 90% at 55% 45%, transparent 45%, rgba(16, 8, 4, 0.55) 100%) fixed,
    var(--wood);
  image-rendering: pixelated;
  -webkit-font-smoothing: antialiased;
}

a {
  color: inherit;
}

button {
  font: inherit;
  color: inherit;
}

:focus-visible {
  outline: 3px solid var(--led-on);
  outline-offset: 3px;
}

/* on the light shell an amber ring is too faint; ink reads at ~8:1 */
.console :focus-visible {
  outline-color: var(--ink);
}

/* touch: a quick vertical swipe over the shelf scrolls the page; resting a
   finger on a cartridge for a moment (app.js HOLD_MS) lifts it, and from
   then on the finger drags it. Taps and sideways drags work at once */
@media (pointer: coarse) {
  .stage .cart {
    touch-action: pan-y;
  }
}

.sr-only {
  position: absolute;
  top: 0;
  left: 0;
  width: 1px;
  height: 1px;
  margin: 0;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

/* ------------------------------------------------------------------
   Room layout
------------------------------------------------------------------- */
/* the intro and the console group are one composition, centred on the desk:
   the outer 1fr columns share what is left, the intro column is as wide as
   its text, and the group column as wide as the shelf and the console */
.room {
  min-height: 100svh;
  display: grid;
  grid-template-columns: 1fr minmax(260px, auto) calc(var(--w) * 0.2) auto 1fr;
  grid-template-rows: 1fr auto;
  grid-template-areas:
    ". intro . stage ."
    ". foot  foot foot .";
  padding: 44px 48px 28px;
}

/* level with the console: the bottom padding matches the stage's, so the
   intro centres on the console, not on the cartridge sticking out under it */
.intro {
  grid-area: intro;
  align-self: center;
  padding-bottom: var(--drop);
}

.intro h1 {
  margin: 0 0 14px;
  font-size: clamp(30px, calc(var(--w) * 0.085), 40px);
  line-height: 1.1;
  font-weight: 800;
  letter-spacing: -0.02em;
  text-wrap: balance;
  max-width: 17ch;
}

.intro p {
  margin: 0;
  font-size: clamp(17px, calc(var(--w) * 0.04), 19px);
  color: var(--muted);
  max-width: 36ch;
  text-wrap: pretty;
}

/* the footer lines up with the composition above it; inline-size
   containment keeps its one long line from widening the intro column */
.foot {
  grid-area: foot;
  contain: inline-size;
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 8px 28px;
  padding-top: 18px;
}

.status {
  margin: 0;
  font-weight: 600;
  color: #f4e3b5;
  display: inline-flex;
  align-items: center;
  gap: 10px;
}

.links {
  display: flex;
  gap: 20px;
  margin-left: auto;
}

.links a {
  color: var(--muted);
  text-decoration: none;
  font-weight: 600;
}

.links a:hover {
  color: var(--text);
  text-decoration: underline;
  text-underline-offset: 4px;
}

.keys {
  flex-basis: 100%;
  margin: 0;
  color: var(--muted);
  font-size: 13px;
}

/* keyboard help means nothing on a touch screen */
@media (hover: none) and (pointer: coarse) {
  .keys {
    display: none;
  }
}

/* ------------------------------------------------------------------
   Stage: shelf sockets on both sides of the console
------------------------------------------------------------------- */
/* the first row takes whatever height the console has over the shelf, so the
   shelf lines up with the console's bottom; the group is centred both ways
   (scene.css places the Put it down button from the same numbers) */
.stage {
  grid-area: stage;
  display: grid;
  grid-template-columns: var(--cw) var(--w) var(--cw);
  grid-template-rows: auto repeat(var(--rows, 3), var(--ch));
  column-gap: var(--gap);
  row-gap: calc(var(--ch) * 0.18);
  justify-content: center;
  align-content: center;
  padding-bottom: var(--drop);
}

/* .unit is the size container for the console, so cqw inside = % of console width */
.unit {
  container-type: inline-size;
  grid-column: 2;
  grid-row: 1 / -1;
  align-self: end;
  width: var(--w);
  position: relative;
  z-index: 10; /* cartridges under the console (z 5) disappear behind it */
}

/* an empty socket: a shallow dent in the mat, the cartridge's own shape */
.slot {
  grid-column: var(--col);
  grid-row: var(--row);
  width: var(--cw);
  height: var(--ch);
  border-radius: calc(var(--cw) * 0.055) calc(var(--cw) * 0.055) calc(var(--cw) * 0.082) calc(var(--cw) * 0.082);
  background: var(--socket);
  box-shadow:
    inset 0 2px 7px var(--cast-soft),
    0 1px 0 rgba(255, 228, 205, 0.06);
}

/* ------------------------------------------------------------------
   Cartridge
   .cart is a stacking context (container + will-change), so the shell is
   painted by ::after and the soft cast shadow by ::before, both at z -1:
   shadow, then shell, then ridges and label on top.
------------------------------------------------------------------- */
.cart {
  container-type: inline-size;
  position: relative;
  display: block;
  width: var(--cw);
  height: var(--ch);
  padding: 0;
  border: 0;
  border-radius: calc(var(--cw) * 0.041) calc(var(--cw) * 0.041) calc(var(--cw) * 0.075) calc(var(--cw) * 0.075);
  background: none;
  cursor: grab;
  touch-action: none;
  transform-origin: 50% 35%;
  will-change: transform;
  user-select: none;
  -webkit-user-select: none;
  -webkit-touch-callout: none;
  -webkit-tap-highlight-color: transparent;
}

.cart::before,
.cart::after {
  content: "";
  position: absolute;
  z-index: -1;
  pointer-events: none;
}

/* soft shadow on the mat; it drops away and darkens when the cartridge is lifted */
.cart::before {
  left: 6%;
  right: 6%;
  top: 10%;
  bottom: -2%;
  border-radius: calc(var(--cw) * 0.08);
  background: var(--cast);
  filter: blur(calc(var(--cw) * 0.048));
  opacity: 0.6;
  transform: translateY(calc(var(--cw) * 0.028));
  transition:
    opacity 220ms ease,
    transform 260ms cubic-bezier(0.2, 0.9, 0.3, 1);
}

.cart.is-lifted::before {
  opacity: 0.85;
  transform: translateY(calc(var(--cw) * 0.137)) scale(1.02);
}

/* the moulded shell */
.cart::after {
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(180deg, var(--cart-hi) 0%, var(--cart) 55%, var(--cart-lo) 100%);
  box-shadow:
    inset 0 1px 0 var(--cart-light),
    inset 1px 0 0 rgba(236, 230, 250, 0.05),
    inset 0 -2px 0 rgba(0, 0, 0, 0.3);
}

.cart.is-selected {
  outline: 3px solid var(--led-on);
  outline-offset: 3px;
}

.cart.is-lifted {
  cursor: grabbing;
}

/* grip ridges near the connector edge: 3px pitch at every size */
.cart .ridges {
  position: absolute;
  top: 5.5cqw;
  left: 12.3cqw;
  right: 12.3cqw;
  height: 7.5cqw;
  border-radius: 2px;
  background: repeating-linear-gradient(
    180deg,
    rgba(0, 0, 0, 0.5) 0 1px,
    rgba(236, 230, 250, 0.1) 1px 2px,
    transparent 2px 3px
  );
}

.cart .label {
  position: absolute;
  inset: 17.8cqw 6.2cqw 6.2cqw;
  display: grid;
  grid-template-rows: 1fr auto;
  overflow: hidden;
  border-radius: 2cqw 2cqw 3.4cqw 3.4cqw;
  background: var(--label);
  color: var(--ink);
  box-shadow:
    inset 0 0 0 1px rgba(29, 26, 36, 0.18),
    0 1px 0 rgba(236, 230, 250, 0.08);
}

/* label art centred above the name; the name sits bottom left */
.cart .art {
  display: grid;
  place-items: center;
  min-height: 0;
  overflow: hidden;
  transition: opacity 140ms ease;
}

/* seated in the slot only the bottom of the label shows: hide the art so no sliver peeks out */
.cart.seated .art {
  opacity: 0;
}

.cart .art svg {
  width: 30cqw;
  height: 30cqw;
  image-rendering: pixelated;
}

.cart .art img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 40%;
  image-rendering: pixelated;
}

.cart .name {
  display: flex;
  align-items: flex-end;
  min-height: 24.7cqw;
  padding: 0 6.2cqw 5.5cqw;
  font-size: 9.6cqw;
  line-height: 1.05;
  font-weight: 600;
  letter-spacing: -0.005em;
  text-align: left;
}

/* ------------------------------------------------------------------
   Console
   Proportions follow the reference: lip 12, bezel 111.85, controls 51,
   edge 1.8 (all cqw), so the body is 176.65cqw tall.
------------------------------------------------------------------- */
.console {
  position: relative;
  z-index: 1;
  width: var(--w);
  padding: 0 4.8cqw;
  border-radius: 7.1cqw 7.1cqw 6.7cqw 6.7cqw;
  /* a solid bottom edge, with the slot cut through it */
  border-bottom: var(--edge) solid var(--shell-edge);
  background:
    radial-gradient(130% 55% at 18% 0%, rgba(255, 255, 255, 0.2), transparent 60%),
    linear-gradient(180deg, var(--shell-top) 0%, var(--shell) 42%, var(--shell-bot) 100%);
  box-shadow:
    inset 0 1.5px 0 rgba(255, 255, 255, 0.5),
    inset 1.5px 0 0 rgba(255, 255, 255, 0.12),
    inset -1.5px 0 0 rgba(0, 0, 0, 0.06),
    0 10.5cqw 16.5cqw -6.2cqw var(--cast-deep),
    0 3.8cqw 7cqw -2.9cqw var(--cast-soft);
  will-change: transform;
  user-select: none;
  -webkit-user-select: none;
  --edge: 1.8cqw;
}

/* the lip: power LED and the owner's name */
.brand {
  display: flex;
  align-items: center;
  gap: 2.4cqw;
  height: 12cqw;
  padding-left: 1.4cqw;
  color: var(--ctrl);
  font-weight: 800;
  font-size: 4.05cqw;
  line-height: 1;
  letter-spacing: -0.005em;
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.3);
}

.led {
  flex: none;
  width: 1.9cqw;
  height: 1.9cqw;
  border-radius: 50%;
  background: var(--led-off);
  box-shadow:
    inset 0 1px 2px rgba(0, 0, 0, 0.5),
    0 1px 0 rgba(255, 255, 255, 0.35);
  transition:
    background-color 240ms ease,
    box-shadow 240ms ease;
}

.led.on {
  background: var(--led-on);
  box-shadow:
    0 0 0 1px rgba(29, 26, 36, 0.25),
    0 0 2.4cqw 0.25cqw rgba(255, 180, 84, 0.85);
}

.bezel {
  padding: 3.3cqw 3.3cqw 3.8cqw;
  border-radius: 3.3cqw 3.3cqw 4.3cqw 4.3cqw;
  background: linear-gradient(180deg, #2b2d48, var(--bezel));
  box-shadow:
    inset 0 2px 4px rgba(0, 0, 0, 0.45),
    inset 0 -1px 0 rgba(255, 255, 255, 0.06),
    0 1px 0 rgba(255, 255, 255, 0.4);
}

.screen {
  container-type: size;
  position: relative;
  aspect-ratio: 0.8;
  border-radius: 1.2cqw;
  overflow: hidden;
  background: #1c1a20;
  font-family: var(--pixel);
  color: var(--ink);
}

/* glass over whatever is on screen: a diagonal glare, LCD scanlines,
   a soft vignette and the recessed edge */
.screen::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 3;
  pointer-events: none;
  border-radius: inherit;
  background:
    linear-gradient(118deg, rgba(255, 255, 255, 0.07) 0%, rgba(255, 255, 255, 0.025) 34%, transparent 34.2%),
    repeating-linear-gradient(180deg, rgba(0, 0, 0, 0.05) 0 1px, transparent 1px 3px),
    radial-gradient(120% 100% at 50% 40%, transparent 60%, rgba(0, 0, 0, 0.16));
  box-shadow:
    inset 0 0 0 1px rgba(0, 0, 0, 0.35),
    inset 0 3px 10px rgba(0, 0, 0, 0.28);
}

.noise {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  image-rendering: pixelated;
  z-index: 2;
}

.view {
  position: absolute;
  inset: 0;
}

.controls {
  position: relative;
  height: 51cqw;
}

/* zero specificity, so every control's own rule wins */
:where(.controls button) {
  appearance: none;
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}

/* held down in a game: a thumb that drifts must not start a page scroll,
   which cancels the press and lets go of the button */
.dpad .dp,
.ab .round {
  touch-action: none;
}

/* D-pad: one moulded cross that tilts toward the pressed arm;
   the four buttons on top are invisible hit areas */
.dpad {
  --arm: 10cqw;
  position: absolute;
  left: 2.35cqw;
  top: 6.2cqw;
  width: 29.5cqw;
  height: 29.5cqw;
}

.cross {
  position: absolute;
  inset: 0;
  pointer-events: none;
  transform: perspective(62cqw);
  transition: transform 160ms cubic-bezier(0.3, 1.7, 0.5, 1);
}

.cross i {
  position: absolute;
  border-radius: 1.65cqw;
  background: linear-gradient(180deg, var(--ctrl-hi), var(--ctrl) 60%, var(--ctrl-lo));
  box-shadow:
    0 0.95cqw 0 var(--ctrl-deep),
    0 2.1cqw 3.3cqw -0.95cqw rgba(0, 0, 0, 0.45),
    inset 0 1px 0 rgba(255, 255, 255, 0.14);
}

.cross i:first-child {
  left: 0;
  right: 0;
  top: calc(50% - var(--arm) / 2);
  height: var(--arm);
}

.cross i:nth-child(2) {
  top: 0;
  bottom: 0;
  left: calc(50% - var(--arm) / 2);
  width: var(--arm);
  box-shadow:
    0 0.95cqw 0 var(--ctrl-deep),
    inset 0 1px 0 rgba(255, 255, 255, 0.14);
}

/* a soft dimple in the middle */
.cross::after {
  content: "";
  position: absolute;
  left: calc(50% - 2.15cqw);
  top: calc(50% - 2.15cqw);
  width: 4.3cqw;
  height: 4.3cqw;
  border-radius: 50%;
  background: radial-gradient(circle at 50% 60%, rgba(0, 0, 0, 0.32), transparent 70%);
}

.cross b {
  position: absolute;
  width: 0;
  height: 0;
  border: 1.43cqw solid transparent;
}

.cross .ar-up,
.cross .ar-down {
  left: calc(50% - 1.43cqw);
}

.cross .ar-left,
.cross .ar-right {
  top: calc(50% - 1.43cqw);
}

.cross .ar-up {
  top: 2.15cqw;
  border-top-width: 0;
  border-bottom-color: rgba(196, 201, 240, 0.45);
}

.cross .ar-down {
  bottom: 2.15cqw;
  border-bottom-width: 0;
  border-top-color: rgba(196, 201, 240, 0.45);
}

.cross .ar-left {
  left: 2.15cqw;
  border-left-width: 0;
  border-right-color: rgba(196, 201, 240, 0.45);
}

.cross .ar-right {
  right: 2.15cqw;
  border-right-width: 0;
  border-left-color: rgba(196, 201, 240, 0.45);
}

/* press: the held arm sinks, fast in, springy out */
.dpad:has(.dp.pressed, .dp:active) .cross {
  transition-duration: 50ms;
  transition-timing-function: ease-out;
}

.dpad:has(.up.pressed, .up:active) .cross {
  transform: perspective(62cqw) rotateX(11deg) translateY(1px);
}

.dpad:has(.down.pressed, .down:active) .cross {
  transform: perspective(62cqw) rotateX(-11deg) translateY(1px);
}

.dpad:has(.left.pressed, .left:active) .cross {
  transform: perspective(62cqw) rotateY(-11deg) translateY(1px);
}

.dpad:has(.right.pressed, .right:active) .cross {
  transform: perspective(62cqw) rotateY(11deg) translateY(1px);
}

.dp {
  position: absolute;
  border-radius: 1.4cqw;
}

.dp:focus-visible {
  outline-offset: 1px;
}

.dp.up,
.dp.down {
  left: calc(50% - var(--arm) / 2);
  width: var(--arm);
  height: calc((100% - var(--arm)) / 2 + 1cqw);
}

.dp.left,
.dp.right {
  top: calc(50% - var(--arm) / 2);
  width: calc((100% - var(--arm)) / 2 + 1cqw);
  height: var(--arm);
}

.dp.up {
  top: 0;
}

.dp.down {
  bottom: 0;
}

.dp.left {
  left: 0;
}

.dp.right {
  right: 0;
}

/* A / B: the letters sit on the shell, not on the keys */
.ab {
  position: absolute;
  right: 1.87cqw;
  top: 5.7cqw;
  width: 34.8cqw;
  height: 26.7cqw;
}

.key {
  position: absolute;
  width: 14.3cqw;
}

.key-a {
  right: 0;
  top: 0;
}

.key-b {
  left: 0;
  top: 8.1cqw;
}

.round {
  display: block;
  width: 14.3cqw;
  height: 14.3cqw;
  border-radius: 50%;
  background: radial-gradient(circle at 36% 30%, var(--btn-hi) 0%, var(--btn) 48%, var(--btn-lo) 100%);
  box-shadow:
    0 0.95cqw 0 var(--btn-deep),
    0 2.4cqw 3.3cqw -0.95cqw rgba(0, 0, 0, 0.42),
    inset 0 1px 0 rgba(255, 255, 255, 0.45);
  transition:
    translate 150ms cubic-bezier(0.3, 1.8, 0.5, 1),
    box-shadow 150ms ease;
}

.round:active,
.round.pressed {
  translate: 0 0.7cqw;
  box-shadow:
    0 0.25cqw 0 var(--btn-deep),
    0 0.7cqw 1.4cqw -0.5cqw rgba(0, 0, 0, 0.4),
    inset 0 2px 4px rgba(0, 0, 0, 0.18);
  transition-duration: 40ms;
}

.key span,
.pill span {
  display: block;
  text-align: center;
  font-size: 2.86cqw;
  line-height: 1;
  font-weight: 600;
  color: var(--ctrl);
  pointer-events: none;
}

.key span {
  margin-top: 2.1cqw;
}

/* Eject / Sound */
.pills {
  position: absolute;
  left: 50%;
  bottom: 5.2cqw;
  translate: -50% 0;
  display: flex;
  gap: 3.3cqw;
}

.pill {
  display: grid;
  justify-items: center;
  width: 12.9cqw;
}

.pill i {
  position: relative;
  display: block;
  width: 9.5cqw;
  height: 2.86cqw;
  margin: 1.9cqw 0 2.1cqw;
  border-radius: 1.43cqw;
  background: linear-gradient(180deg, var(--ctrl-hi), var(--ctrl));
  box-shadow:
    0 0.5cqw 0 var(--ctrl-deep),
    inset 0 1px 0 rgba(255, 255, 255, 0.14);
  transition:
    translate 140ms cubic-bezier(0.3, 1.8, 0.5, 1),
    box-shadow 140ms ease;
}

.pill:active i,
.pill.pressed i {
  translate: 0 0.5cqw;
  box-shadow:
    0 0 0 var(--ctrl-deep),
    inset 0 1px 0 rgba(255, 255, 255, 0.14);
  transition-duration: 40ms;
}

/* the Sound LED, a dot in the middle of its key */
.pill-led::after {
  content: "";
  position: absolute;
  top: calc(50% - 0.6cqw);
  left: calc(50% - 0.6cqw);
  width: 1.2cqw;
  height: 1.2cqw;
  border-radius: 50%;
  background: var(--led-off);
  transition:
    background-color 160ms ease,
    box-shadow 160ms ease;
}

.pill[aria-pressed="true"] .pill-led::after {
  background: var(--led-on);
  box-shadow: 0 0 1.4cqw rgba(255, 180, 84, 0.8);
}

/* speaker: a 5 by 3 grid of holes, each with a lit lower lip */
.controls .speaker {
  position: absolute;
  right: 2.35cqw;
  bottom: 5.2cqw;
  width: 12.4cqw;
  height: 7.6cqw;
  background-image:
    radial-gradient(circle at 50% 50%, var(--hole) 0 0.55cqw, transparent 0.67cqw),
    radial-gradient(circle at 50% 62%, rgba(255, 255, 255, 0.32) 0 0.55cqw, transparent 0.67cqw);
  background-size: 2.48cqw 2.52cqw;
}

/* the slot, cut through the bottom edge: the cartridge goes up into it */
.slit {
  position: absolute;
  left: 50%;
  bottom: calc(var(--edge) * -1);
  width: calc(var(--cw) + 12px);
  height: var(--edge);
  translate: -50% 0;
  border-radius: 3px 3px 0 0;
  background: linear-gradient(180deg, #050509, #16172c);
  box-shadow:
    inset 0 2px 2px rgba(0, 0, 0, 0.9),
    0 -1px 0 rgba(40, 44, 90, 0.55),
    0 -2px 0 rgba(255, 255, 255, 0.16);
  transition: box-shadow 200ms ease;
}

/* a cartridge held over the console lights the slot */
.unit.is-ready .slit {
  box-shadow:
    inset 0 2px 3px rgba(0, 0, 0, 0.8),
    0 0 0 2px var(--led-on),
    0 0 22px 2px rgba(255, 180, 84, 0.55);
}

/* ------------------------------------------------------------------
   Responsive
------------------------------------------------------------------- */
@media (max-width: 1100px) {
  .room {
    grid-template-columns: 1fr;
    grid-template-rows: auto 1fr auto;
    grid-template-areas:
      "intro"
      "stage"
      "foot";
    row-gap: 28px;
    padding: 32px 24px 24px;
  }

  .intro {
    justify-self: center;
    padding-bottom: 0;
    text-align: center;
  }

  .intro h1,
  .intro p {
    max-width: 30ch;
    margin-inline: auto;
  }

  .intro h1 {
    max-width: 18ch;
    font-size: 30px;
  }

  .intro p {
    font-size: inherit;
  }

  :root {
    --w: clamp(280px, min(40vw, calc((100svh - 300px) * 0.566)), 380px);
  }
}

@media (max-width: 720px) {
  :root {
    --w: min(300px, calc(100vw - 64px));
    --cw: calc((min(100vw - 32px, 420px) - 2 * 12px) / 3);
    --gap: 12px;
  }

  body {
    font-size: 16px;
    background-attachment: scroll;
  }

  /* phones: headline, console, shelf, then the intro paragraph */
  .room {
    display: flex;
    flex-direction: column;
    gap: 22px;
    padding: 24px 16px 20px;
  }

  .intro {
    display: contents;
  }

  .intro h1 {
    order: 1;
    margin: 0 auto;
    font-size: 26px;
    text-align: center;
  }

  .stage {
    order: 2;
  }

  .intro p {
    order: 3;
    text-align: center;
  }

  .foot {
    order: 4;
  }

  .stage {
    grid-template-columns: repeat(3, var(--cw));
    grid-template-rows: auto;
    row-gap: 14px;
    padding-bottom: 0;
  }

  .unit {
    grid-column: 1 / -1;
    grid-row: 1;
    justify-self: center;
    margin-bottom: calc(var(--ch) * var(--drop-visible) + 22px);
  }

  .slot {
    grid-column: auto;
    grid-row: auto;
  }

  .foot {
    justify-content: center;
    text-align: center;
  }

  .links {
    margin-left: 0;
  }

  .keys {
    display: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation: none !important;
    transition: none !important;
  }
}

.noscript {
  position: relative;
  z-index: 70;
  padding: 16px;
  color: var(--text);
  background: var(--room-ink, #1a110c);
  text-align: center;
}

.noscript a {
  color: inherit;
}