/* =========================================================================
   Guess the City — game tokens  ·  "night terminal"
   -------------------------------------------------------------------------
   The reference is a departure board in an airport at night: slate ground,
   amber for anything the traveller is waiting for, and three-letter codes
   set in a monospace.

   Why dark, when the art quiz puts paintings on cream paper: a painting is a
   framed object and cream imitates the gallery wall it hangs on. Our content
   is a photograph of a building, and a photograph is not a painting — it is a
   slide, and slides are read on a lightbox. Cream would have the photo
   competing with the page instead of glowing out of it.

   Scope. These variables live on .gtc, not :root, because css/site.css owns
   the landmark pages and its own :root palette — warm paper, verdigris — and
   the two must not fight. The game carries its own chrome; the reading pages
   stay on paper. Same split guessthepainter uses.
   ========================================================================= */

.gtc {
  /* ---- Surfaces: a blue-biased near-black, the colour of a terminal at 2am.
     Not a neutral grey. The bias is what makes the amber sing against it. ---- */
  --ground:      #10171d;   /* page */
  --board:       #0a1014;   /* the HUD strip: darker than the page, like a board */
  --panel:       #19232b;   /* answer keys, cards */
  --panel-lit:   #202d37;   /* hover */
  --hairline:    #26323d;   /* borders */
  --hairline-lit:#334353;

  /* ---- Type colours ---- */
  --chalk:       #e6edf0;   /* primary text */
  --chalk-2:     #b9c8d1;   /* body */
  --chalk-3:     #7f96a8;   /* labels, secondary */
  --chalk-4:     #566a7a;   /* disabled */

  /* ---- Accent. One colour, used only where the player is being rewarded or
     told to look. If it appears everywhere it stops meaning anything. ---- */
  --amber:       #f2a93b;
  --amber-deep:  #c8842a;   /* amber text on light surfaces */
  --amber-glow:  rgba(242,169,59,0.16);

  /* ---- Feedback. Kept clear of the accent so "correct" never reads as
     "highlighted" and vice versa. ---- */
  --jade:        #3f9e7c;
  --jade-lit:    #68c9a3;
  --jade-bg:     #12291f;
  --rust:        #c04a38;
  --rust-lit:    #e08573;
  --rust-bg:     #28130f;

  /* ---- Two players, for Duo mode. Amber is taken, so P1 borrows it and P2
     gets a cold blue: on a board, warm and cold read apart instantly even
     for a colour-blind player, which two hues of similar temperature do not. */
  --p1:          #f2a93b;
  --p1-bg:       rgba(242,169,59,0.09);
  --p1-zone:     rgba(242,169,59,0.16);
  --p2:          #5aa9d6;
  --p2-bg:       rgba(90,169,214,0.09);
  --p2-zone:     rgba(90,169,214,0.16);

  /* ---- Elevation. Sparing: on a dark ground a shadow reads as dirt, so
     separation comes from the hairline and a lift in surface value. ---- */
  --shadow-key:  0 1px 0 rgba(0,0,0,0.4);
  --shadow-modal:0 32px 80px rgba(0,0,0,0.6);

  /* ---- Type. Newsreader is already loaded by site.css for the landmark
     pages, so the modal prose costs nothing extra. Archivo carries the board.
     A monospace is not decoration here: city codes and scores are columns of
     digits, and they must align. ---- */
  --board-face: 'Archivo', system-ui, -apple-system, sans-serif;
  --prose-face: 'Newsreader', Georgia, serif;
  --code-face:  ui-monospace, 'SF Mono', Menlo, Consolas, monospace;

  /* ---- Scale. Two ratios: the board is tight and uppercase, the prose is
     open. Mixing one scale across both is what makes game UI look like a
     document. ---- */
  --board-xs:   0.62rem;
  --board-sm:   0.72rem;
  --board-md:   0.86rem;
  --key:        1rem;
  --prose:      1.05rem;
  --title:      clamp(1.5rem, 4vw, 2.1rem);

  --track:      0.14em;     /* letter-spacing for uppercase board labels */
  --radius:     3px;        /* almost square: a board is not a bubble */
  --pad:        clamp(0.85rem, 3vw, 1.4rem);

  font-family: var(--board-face);
  color: var(--chalk);
  background: var(--ground);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.gtc, .gtc *, .gtc *::before, .gtc *::after { box-sizing: border-box; }

/* The `hidden` attribute has to win. Its display:none comes from the browser's
   own stylesheet, and any author rule beats that — so `.gtc-timer { display:
   flex }` kept the timer on screen in Learn mode with hidden faithfully set on
   the element. The attribute is the project's one way of turning something off,
   so it gets the last word. */
.gtc [hidden] { display: none !important; }

/* The game commits to one visual world on purpose, so there is no light
   variant of these tokens. It still paints its own ground explicitly — a
   transparent surface would inherit whatever the host page is, which on the
   landmark pages is cream, and the chalk text would vanish into it. */

/* :where() zeroes this reset's specificity so component classes can override
   it. Written as `.gtc button` it scored (0,1,1) against `.gtc-key`'s (0,1,0)
   and won on specificity regardless of source order — which rendered every
   answer button transparent with an inherited white border. They looked like
   plain text because, as far as the cascade was concerned, they were. */
.gtc :where(button) { font: inherit; color: inherit; background: none;
                      border: 0; cursor: pointer; }
.gtc :focus-visible { outline: 2px solid var(--amber);
                      outline-offset: 2px; }

@media (prefers-reduced-motion: reduce) {
  .gtc *, .gtc *::before, .gtc *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}

/* ---- The board label: the one recurring device of the whole design.
   Uppercase, tracked, small, chalk-3. Used for HUD labels, section eyebrows
   and anything the board would print rather than say. ---- */
.gtc-label {
  font-size: var(--board-xs);
  font-weight: 700;
  letter-spacing: var(--track);
  text-transform: uppercase;
  color: var(--chalk-3);
}

.gtc-code {
  font-family: var(--code-face);
  font-size: var(--board-xs);
  letter-spacing: 0.1em;
  color: var(--chalk-3);
  font-variant-numeric: tabular-nums;
}

.gtc-num { font-variant-numeric: tabular-nums; }