/* 1Trivia for Meta Ray-Ban Display glasses (and any screen).
 *
 * The glasses display is ADDITIVE: pure black emits no light and is see-through, bright colors
 * are what the wearer sees. So the page is #000, bounded surfaces (buttons, cards) are a dark
 * gray that reads as opaque, the always-on header has no fill, and every word is bright and
 * at least 20px. Layout comes from the real viewport (600x600 on the glasses is a validation
 * target, not a fixed size), so the same page works as the phone-screen mode. */

:root {
  --bg: #000000;          /* transparent on the glasses */
  --surface: #1c1e21;     /* bounded surfaces: faintly lit, reads as solid */
  --surface-hi: #26292e;
  --text: #ffffff;
  --text-2: #e4e6eb;
  --muted: #b0b3b8;
  --accent: #f5b33b;      /* 1Mazing amber: bright on the waveguide */
  --focus: #36d6ff;       /* focus ring: the brightest thing on screen */
  --good: #4be08a;
  --bad: #ff6b6b;
  --pad: clamp(16px, 4vmin, 28px);
  --radius: 18px;
}

* { box-sizing: border-box; }
html, body {
  margin: 0;
  inline-size: 100%;
  block-size: 100%;
  background: var(--bg);
  color: var(--text);
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  font-size: 22px;
  line-height: 1.3;
  -webkit-text-size-adjust: 100%;
}
body { display: flex; justify-content: center; align-items: center; overflow: hidden; }

/* The play area: the whole viewport on the glasses, a centered square-ish column on bigger screens. */
#app {
  inline-size: min(100vw, 680px);
  block-size: min(100vh, 680px);
  padding: var(--pad);
  display: flex;
  flex-direction: column;
  gap: 14px;
  overflow: hidden;
}

h1, h2, p { margin: 0; }
h1 { font-size: 34px; line-height: 1.15; color: var(--accent); }
h2 { font-size: 26px; line-height: 1.2; }
.lead { font-size: 22px; color: var(--text-2); }
.muted { color: var(--muted); font-size: 20px; }
.loading { margin: auto; font-size: 34px; color: var(--accent); }
.grow { flex: 1 1 auto; min-block-size: 0; }

/* Always-on header: bright text straight on the black page, no band behind it. */
.hud {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 12px;
  font-size: 20px;
  color: var(--text-2);
  border-block-end: 1px solid #3a3d42;
  padding-block-end: 8px;
}
.hud b { color: var(--text); font-size: 22px; }
.hud .them { color: var(--accent); }

/* Everything you can reach with the arrows. 64px+ tall: easy to land on with a swipe. */
.btn {
  display: flex;
  align-items: center;
  gap: 14px;
  inline-size: 100%;
  min-block-size: 64px;
  padding: 10px 18px;
  border: 3px solid transparent;
  border-radius: var(--radius);
  background: var(--surface);
  color: var(--text);
  font: inherit;
  font-size: 24px;
  text-align: start;
  cursor: pointer;
}
.btn:focus, .btn:focus-visible, .btn.is-focus {
  outline: none;
  border-color: var(--focus);
  background: var(--surface-hi);
  box-shadow: 0 0 18px rgba(54, 214, 255, 0.45);
}
.btn .key {
  flex: none;
  inline-size: 40px;
  block-size: 40px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-weight: 800;
  color: #000;
  background: var(--accent);
}
.btn .sub { margin-inline-start: auto; font-size: 20px; color: var(--muted); }
.btn.primary { border-color: var(--accent); }
/* 🪜 Step up a difficulty: the amber button under "Level N →" (Mazing.forward). */
.btn.stepup { background: rgba(245, 179, 59, 0.16); }
.ladder { margin: 0; font-size: 22px; font-weight: 700; color: var(--accent); }
.btn.primary:focus, .btn.primary.is-focus { border-color: var(--focus); }
.btn.right  { border-color: var(--good); background: #10301f; }
.btn.wrong  { border-color: var(--bad);  background: #3a1616; }
.btn[disabled] { opacity: 0.55; cursor: default; }
.btn.right[disabled], .btn.wrong[disabled] { opacity: 1; }

.list { display: flex; flex-direction: column; gap: 10px; overflow: hidden auto; min-block-size: 0; }

/* The question: as big as it can be and still leave room for four answers. */
.question { font-size: clamp(24px, 4.6vmin, 30px); line-height: 1.25; font-weight: 600; text-wrap: balance; }
.topic { font-size: 20px; color: var(--accent); letter-spacing: 0.04em; text-transform: uppercase; }

/* The answer clock: a thin bright line, not a block of light. */
.clock { block-size: 6px; border-radius: 3px; background: #2a2d31; overflow: hidden; }
.clock > i { display: block; block-size: 100%; inline-size: 100%; background: var(--accent); transform-origin: left; }
.speaking { font-size: 20px; color: var(--muted); }

/* Pairing code: the one thing on screen. */
.code {
  font-size: clamp(56px, 13vmin, 84px);
  font-weight: 800;
  letter-spacing: 0.14em;
  color: var(--accent);
  text-align: center;
  font-variant-numeric: tabular-nums;
}
.card { background: var(--surface); border-radius: var(--radius); padding: 16px 18px; }
.big { font-size: 48px; font-weight: 800; color: var(--accent); font-variant-numeric: tabular-nums; }
.verdict-good { color: var(--good); }
.verdict-bad  { color: var(--bad); }

.sr { position: absolute; inline-size: 1px; block-size: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

@media (prefers-reduced-motion: no-preference) {
  .btn { transition: border-color 120ms ease, background-color 120ms ease, box-shadow 120ms ease; }
}

/* ---- the 1Mazing hub ------------------------------------------------------------------------- */
.brand { display: flex; align-items: center; gap: 16px; padding-block: 6px 4px; }
.brand img { inline-size: 56px; block-size: 56px; border-radius: 14px; flex: none; }
.brand h1 { font-size: 36px; }
.btn .tile { inline-size: 52px; block-size: 52px; flex: none; object-fit: contain; }
.btn:has(.tile) { min-block-size: 80px; font-size: 26px; font-weight: 700; }
.btn:has(.tile) .sub { font-weight: 400; font-size: 19px; text-align: end; }

/* ---- 1Maze ----------------------------------------------------------------------------------- */
.fieldcard { display: flex; align-items: center; gap: 16px; border-inline-start: 4px solid var(--field, var(--accent)); }
.fieldcard .fe { font-size: 44px; line-height: 1; }
.fieldcard b { font-size: 26px; }
/* The board takes every pixel between the header and the status line. No fill: black is see-through. */
.board { flex: 1 1 auto; min-block-size: 0; display: grid; place-items: center; }
.board canvas { display: block; }
.status { min-block-size: 2.6em; font-size: 20px; line-height: 1.3; color: var(--text-2); text-align: center; }
.stars { font-size: 64px; letter-spacing: 0.08em; color: var(--accent); text-align: center; line-height: 1.1; }
.center { text-align: center; }

/* While a board is up, every pixel goes to it: thin margins, a one-line header and status. */
#app.playing { padding: 10px 12px 8px; gap: 6px; }
#app.playing .hud { padding-block-end: 4px; }
#app.playing .status { min-block-size: 2.5em; font-size: 19px; }

/* The hub lists every game: slimmer rows so six fit on 600x600 without scrolling. */
.list.hub .btn:has(.tile) { min-block-size: 70px; padding-block: 6px; }
.list.hub .btn .tile { inline-size: 46px; block-size: 46px; }
.list.hub { gap: 8px; }

/* ---- the launcher: games as a 3x3 grid, like a phone's home screen ---------------------------- */
.brand.small { gap: 12px; padding-block: 0; }
.brand.small img { inline-size: 44px; block-size: 44px; border-radius: 11px; }
.brand.small h1 { font-size: 30px; }
.launcher { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; flex: 1 1 auto; min-block-size: 0; }
.btn.tilebtn {
  flex-direction: column; justify-content: center; align-items: center; gap: 6px;
  min-block-size: 0; block-size: 100%; padding: 8px 6px; text-align: center;
  font-size: 21px; font-weight: 700; line-height: 1.1;
}
.btn.tilebtn img { inline-size: 60px; block-size: 60px; object-fit: contain; }
.launcher-sub { min-block-size: 1.3em; font-size: 20px; color: var(--text-2); text-align: center; margin: 0; }
.btn.slim { min-block-size: 52px; justify-content: center; }

/* Launcher tiles come from one sprite (img/tiles.webp, 96px cells shown at 60px). */
.btn.tilebtn .tile { display: block; inline-size: 60px; block-size: 60px; flex: none;
  background-repeat: no-repeat; background-size: 720px 60px; }