/* lab.orthiconmedia.com: the device-select screen (README "Page"). One shared WebGL canvas draws every model into its tile's
   stage (landing.js); the tiles, their glow and the name plates are plain DOM underneath / beside it. */
:root {
  color-scheme: dark;
  --bg: #07080b;
  --ink: #e6ebf0;
  --dim: #8b949e;
  --faint: #4a515c;
  --box: #0e1116;
  --box-edge: #262b33;
  --lit: #ff2bd6;            /* neon magenta (user 2026-10-18) */
  --lit-rgb: 255, 43, 214;
  --lit-ink: #1a0016;
  --hot: #ff3b2f;
  --gap: 14px;
  --gutter: 16px;
  --tile: 300px;
  --cols: 2;
  --mono: "VT323", ui-monospace, Menlo, monospace;                     /* pixel terminal: small text */
  --arcade: "Press Start 2P", "VT323", ui-monospace, monospace;        /* pixel caps: titles, names */
}
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; }
body {
  background: var(--bg);
  background-image:
    radial-gradient(ellipse 80% 60% at 50% 0%, rgba(var(--lit-rgb), 0.07), transparent 70%),
    repeating-linear-gradient(0deg, rgba(255, 255, 255, 0.018) 0 1px, transparent 1px 3px);
  color: var(--ink);
  font-family: var(--mono);
  -webkit-font-smoothing: none; font-smooth: never;                     /* hard pixel edges where the browser allows it */
  min-height: 100vh; min-height: 100dvh;
  display: flex; flex-direction: column; align-items: center;
  padding: 0 max(var(--gutter), env(safe-area-inset-right)) max(10px, env(safe-area-inset-bottom)) max(var(--gutter), env(safe-area-inset-left));
  overflow-x: hidden;
  -webkit-tap-highlight-color: transparent;
}

.top { text-align: center; padding: clamp(14px, 3vh, 34px) 0 clamp(10px, 2.2vh, 24px); flex: none; }
.brand {
  margin: 0; font-family: var(--arcade); font-weight: 400; letter-spacing: 0.06em; font-size: clamp(20px, 3.6vw, 40px); line-height: 1.1;
  text-shadow: 3px 3px 0 #000;
}
.brand b { color: var(--lit); font-weight: 400; text-shadow: 3px 3px 0 #000, 0 0 12px rgba(var(--lit-rgb), 0.85), 0 0 28px rgba(var(--lit-rgb), 0.5); }
.prompt { margin: clamp(10px, 1.6vh, 16px) 0 0; font-family: var(--arcade); font-size: clamp(9px, 1.1vw, 12px); letter-spacing: 0.1em; color: var(--ink); }
.caret { color: var(--lit); display: inline-block; margin-right: 0.4em; animation: blink 1.1s steps(1) infinite; }
@keyframes blink { 50% { opacity: 0; } }

.grid {
  display: grid; gap: var(--gap); flex: none; margin: auto 0;          /* centred in the space under the title */
  grid-template-columns: repeat(var(--cols), var(--tile));
}
.tile {
  position: relative; display: flex; flex-direction: column;
  width: var(--tile); height: var(--tile);
  color: inherit; text-decoration: none; outline: none;
  background:
    radial-gradient(ellipse 70% 55% at 50% 58%, rgba(120, 140, 170, 0.10), transparent 70%),
    linear-gradient(180deg, #12161c 0%, var(--box) 60%, #0a0c10 100%);
  border: 2px solid var(--box-edge);
  border-radius: 6px;
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.6), 0 6px 18px rgba(0, 0, 0, 0.45);
  transition: border-color 90ms linear, box-shadow 140ms ease-out, background 140ms ease-out;
  user-select: none; -webkit-user-select: none;
  touch-action: manipulation;
}
/* the whole box lights up for the model under the pointer / keyboard cursor */
.tile.lit {
  border-color: var(--lit);
  background:
    radial-gradient(ellipse 75% 60% at 50% 55%, rgba(var(--lit-rgb), 0.28), transparent 72%),
    linear-gradient(180deg, #3a0a33 0%, #1d0619 55%, #12040f 100%);
  box-shadow: inset 0 0 0 1px rgba(var(--lit-rgb), 0.6), inset 0 0 38px rgba(var(--lit-rgb), 0.25), 0 0 0 1px rgba(var(--lit-rgb), 0.4), 0 0 26px rgba(var(--lit-rgb), 0.55), 0 0 60px rgba(var(--lit-rgb), 0.25);
}
.tile:focus-visible { outline: 2px solid var(--lit); outline-offset: 4px; }
.slot {
  position: absolute; top: 9px; left: 11px; z-index: 1;
  font-family: var(--arcade); font-size: 10px; color: var(--faint); letter-spacing: 0.05em;
}
.tile.lit .slot { color: var(--lit); }
.stage { position: relative; flex: 1 1 auto; min-height: 0; display: block; }
.poster { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; opacity: 0; transition: opacity 200ms; }
.wait {
  position: absolute; left: 0; right: 0; top: 50%; transform: translateY(-50%); text-align: center;
  font-family: var(--arcade); font-size: 9px; letter-spacing: 0.15em; color: var(--faint);
  animation: blink 1s steps(1) infinite;
}
.tile.ready .wait, .nogl .wait, .nojs .wait { display: none; }
.nogl .poster { opacity: 1; }
.plate {
  flex: none; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px;
  padding: 7px 8px 9px; margin: 0 8px 8px; border-radius: 3px;
  background: rgba(0, 0, 0, 0.45); border: 1px solid rgba(255, 255, 255, 0.05);
  transition: background 90ms linear, color 90ms linear;
}
.name { font-family: var(--arcade); font-size: clamp(10px, calc(var(--tile) * 0.062), 26px); letter-spacing: 0.04em; text-transform: uppercase; line-height: 1.25; text-shadow: 2px 2px 0 #000; }
.sub { font-family: var(--mono); font-size: clamp(13px, calc(var(--tile) * 0.052), 21px); color: var(--dim); letter-spacing: 0.02em; text-align: center; line-height: 1; }
.tile.lit .plate { background: var(--lit); color: var(--lit-ink); border-color: var(--lit); }
.tile.lit .name { text-shadow: none; }
.tile.lit .sub { color: rgba(26, 0, 22, 0.78); }

#gl { position: fixed; inset: 0; width: 100vw; height: 100vh; pointer-events: none; z-index: 2; }
.nogl #gl { display: none; }

.foot { flex: none; padding: clamp(10px, 2vh, 20px) 0 0; margin-top: auto; font-family: var(--mono); font-size: 16px; color: var(--faint); }
kbd { font-family: var(--mono); font-size: 15px; border: 1px solid var(--faint); border-radius: 3px; padding: 0 4px; margin: 0 1px; color: var(--dim); }
@media (hover: none) { .foot { display: none; } }

@media (prefers-reduced-motion: reduce) {
  .caret, .wait { animation: none; }
  .tile, .plate, .poster { transition: none; }
}

/* tools/posters.js: transparent page, nothing lit, so each stage captures as a cut-out model */
.poster-mode body, .poster-mode .tile, .poster-mode .tile.lit { background: transparent !important; box-shadow: none !important; border-color: transparent !important; }
.poster-mode .plate, .poster-mode .slot, .poster-mode .top, .poster-mode .foot { visibility: hidden; }