/* =========================================================================
   Guess the City — game screens
   Depends on css/game-tokens.css for the palette. Everything here is scoped
   under .gtc so it cannot reach the landmark pages.
   ========================================================================= */

.gtc {
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
}

.gtc-screen { display: none; flex: 1; flex-direction: column; }
.gtc-screen.is-active { display: flex; }

/* ---------------------------------------------------------------- the board
   A departure board is darker than the wall it hangs on, so the HUD is darker
   than the page rather than lighter. Fixed to the top because it carries the
   two things a player checks mid-round — lives and streak — and hunting for
   them costs more attention than the strip costs space. */
.gtc-board {
  position: sticky;
  top: 0;
  z-index: 20;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 0.75rem;
  padding: 0.55rem clamp(0.7rem, 3vw, 1.1rem);
  background: var(--board);
  border-bottom: 1px solid var(--hairline);
}
.gtc-board > :last-child { justify-self: end; }
.gtc-board > :nth-child(2) { justify-self: center; }

.gtc-lives { display: flex; align-items: center; gap: 0.45rem; }
.gtc-pips { display: flex; gap: 4px; }
.gtc-pip {
  width: 9px; height: 9px;
  background: var(--hairline-lit);
  border-radius: 1px;
  transition: background 160ms ease, transform 160ms ease;
}
.gtc-pip.is-on { background: var(--amber); }
/* A life lost should be felt, not merely displayed: the pip goes out and the
   row flinches. One frame of movement, no bounce. */
.gtc-pip.is-spent { background: var(--rust); transform: scaleY(0.35); }

.gtc-streak {
  font-family: var(--code-face);
  font-size: var(--board-sm);
  letter-spacing: 0.08em;
  color: var(--amber);
  font-variant-numeric: tabular-nums;
}
.gtc-streak[hidden] { display: none; }

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

.gtc-back {
  font-size: var(--board-xs);
  font-weight: 700;
  letter-spacing: var(--track);
  text-transform: uppercase;
  color: var(--chalk-4);
  padding: 0.2rem 0;
}
.gtc-back:hover { color: var(--chalk-2); }

/* ------------------------------------------------------------------ the photo
   A fixed-height band with `contain`, not a cropped `cover`.

   The first version was a 3:2 box with object-fit:cover, which looked right
   until a tall photograph arrived: Kraków's St Florian's Gate is 960×1544, and
   cropping a tower to a horizontal strip removes the tower. Measuring the pool
   settled it — 353 of 584 images are narrower than 3:2 and 140 are portrait or
   square, with a median ratio of 1.38. Cropping was not an edge case, it was
   the majority.
   
   `contain` on a dark ground also happens to be the metaphor the whole design
   is built on: a slide on a lightbox, whole, with the board around it. The
   height is fixed so the answer keys never move between questions — layout
   shift under a button is how a player mis-taps. */
.gtc-plate {
  position: relative;
  background: #05090c;
  height: min(44dvh, 20rem);
  border-bottom: 1px solid var(--hairline);
  overflow: hidden;
}
/* Portrait sources are 24% of the pool and `contain` makes them narrow, so the
   band gets taller where there is room rather than leaving a tower the size of
   a stamp on a 27-inch monitor. */
@media (min-width: 40rem) {
  .gtc-plate { height: min(58dvh, 31rem); }
}
.gtc-plate img {
  width: 100%; height: 100%;
  object-fit: contain;
  display: block;
}
.gtc-plate-tag {
  position: absolute;
  left: 0.7rem; bottom: 0.7rem;
  font-family: var(--code-face);
  font-size: var(--board-xs);
  letter-spacing: 0.12em;
  color: var(--chalk);
  background: rgba(10,16,20,0.72);
  border: 1px solid rgba(230,237,240,0.22);
  padding: 0.22rem 0.5rem;
  backdrop-filter: blur(2px);
}

/* ------------------------------------------------------------------ the keys */
.gtc-play {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;   /* the keys belong near the photo, not stranded
                                at the top of 250px of empty ground */
  gap: var(--pad);
  padding: var(--pad);
  max-width: 40rem;
  width: 100%;
  margin: 0 auto;
}

.gtc-ask {
  font-size: var(--board-xs);
  font-weight: 700;
  letter-spacing: var(--track);
  text-transform: uppercase;
  color: var(--chalk-3);
  text-align: center;
}

.gtc-keys {
  display: grid;
  gap: 0.6rem;
  grid-template-columns: 1fr;
}
@media (min-width: 30rem) { .gtc-keys { grid-template-columns: 1fr 1fr; } }

.gtc-key {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.1rem;
  min-height: 3.4rem;
  padding: 0.6rem 0.85rem;
  text-align: center;
  background: var(--panel);
  border: 1px solid var(--hairline-lit);
  border-radius: var(--radius);
  box-shadow: var(--shadow-key);
  transition: background 120ms ease, border-color 120ms ease;
}
.gtc-key:hover:not(:disabled) {
  background: var(--panel-lit);
  border-color: var(--hairline-lit);
}
.gtc-key:disabled { cursor: default; }

.gtc-key-city { font-size: var(--key); font-weight: 700; letter-spacing: -0.01em; }

/* The city code is the one motif of the design, and it must not appear before
   the answer: "ROM · IT" beside the word Rome hands over the country, which is
   most of the question. It is a reward for answering, not a label. */
.gtc-key-code {
  font-family: var(--code-face);
  font-size: var(--board-xs);
  letter-spacing: 0.12em;
  color: var(--chalk-4);
  opacity: 0;
  transition: opacity 200ms ease 80ms;
}
.gtc-keys.is-resolved .gtc-key-code { opacity: 1; }

.gtc-key.is-right {
  border-color: var(--jade);
  background: var(--jade-bg);
}
.gtc-key.is-right .gtc-key-city { color: var(--jade-lit); }
.gtc-key.is-wrong {
  border-color: var(--rust);
  background: var(--rust-bg);
}
.gtc-key.is-wrong .gtc-key-city { color: var(--rust-lit); }
.gtc-key.is-dimmed { opacity: 0.42; }

/* ------------------------------------------------------------------ the modal
   This is the only place in the game set in a serif, and deliberately: the HUD
   is operated and the modal is read. Same reason the type scale changes. */
.gtc-modal-veil {
  position: fixed; inset: 0;
  background: rgba(4,8,11,0.82);
  display: grid;
  place-items: end center;
  z-index: 40;
}
.gtc-modal-veil[hidden] { display: none; }

.gtc-modal {
  width: 100%;
  max-width: 34rem;
  max-height: 88dvh;
  overflow-y: auto;
  background: var(--ground);
  border: 1px solid var(--hairline);
  border-bottom: 0;
  border-radius: var(--radius) var(--radius) 0 0;
  box-shadow: var(--shadow-modal);
  padding: var(--pad);
  animation: gtc-rise 240ms cubic-bezier(0.2, 0.8, 0.2, 1);
}
@keyframes gtc-rise { from { transform: translateY(14px); opacity: 0; } }
@media (min-width: 40rem) {
  .gtc-modal-veil { place-items: center; }
  .gtc-modal { border-bottom: 1px solid var(--hairline); border-radius: var(--radius); }
}

.gtc-modal-verdict {
  font-size: var(--board-xs);
  font-weight: 700;
  letter-spacing: var(--track);
  text-transform: uppercase;
}
.gtc-modal-verdict.is-right { color: var(--jade-lit); }
.gtc-modal-verdict.is-wrong { color: var(--rust-lit); }

.gtc-modal h2 {
  font-family: var(--prose-face);
  font-weight: 400;
  font-size: var(--title);
  line-height: 1.12;
  letter-spacing: -0.015em;
  margin: 0.3rem 0 0.15rem;
  text-wrap: balance;
}
.gtc-modal-where {
  font-family: var(--prose-face);
  font-style: italic;
  color: var(--amber);
  font-size: var(--prose);
  margin: 0 0 1rem;
}

/* Facts as a definition list, not a paragraph: a date and an architect are
   fields, and a reader scanning for "when" should not have to read a sentence
   to find it. */
.gtc-facts {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 0.3rem 1rem;
  margin: 0 0 1rem;
  padding: 0.8rem 0;
  border-top: 1px solid var(--hairline);
  border-bottom: 1px solid var(--hairline);
}
.gtc-facts dt {
  font-size: var(--board-xs);
  font-weight: 700;
  letter-spacing: var(--track);
  text-transform: uppercase;
  color: var(--chalk-3);
  padding-top: 0.18rem;
}
.gtc-facts dd { margin: 0; font-size: var(--board-md); color: var(--chalk); }

.gtc-modal p.gtc-prose {
  font-family: var(--prose-face);
  font-size: var(--prose);
  line-height: 1.6;
  color: var(--chalk-2);
  margin: 0 0 1rem;
}

/* Everything below the basics is folded away. The art quiz handover is explicit
   that the modal is where a run dies: a wall of text after every answer and the
   player stops reading, then stops playing. */
.gtc-fold {
  border-top: 1px solid var(--hairline);
}
.gtc-fold summary {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0.7rem 0;
  cursor: pointer;
  font-size: var(--board-xs);
  font-weight: 700;
  letter-spacing: var(--track);
  text-transform: uppercase;
  color: var(--chalk-3);
  list-style: none;
}
.gtc-fold summary::-webkit-details-marker { display: none; }
.gtc-fold summary::after { content: "+"; font-family: var(--code-face); color: var(--chalk-4); }
.gtc-fold[open] summary::after { content: "−"; }
.gtc-fold summary:hover { color: var(--chalk); }
.gtc-fold > *:not(summary) { padding-bottom: 0.9rem; }
.gtc-fold ul { margin: 0; padding-left: 1.1rem; }
.gtc-fold li {
  font-family: var(--prose-face);
  font-size: var(--board-md);
  color: var(--chalk-2);
  margin-bottom: 0.5rem;
}

.gtc-credit {
  font-family: var(--code-face);
  font-size: 0.58rem;
  color: var(--chalk-4);
  margin: 1rem 0 0;
}
.gtc-credit a { color: inherit; }

/* Sticky inside the modal, because the modal scrolls. On a 375×812 phone the
   card is 715px tall and "Next landmark" sat below the fold: the one action the
   player needs was reachable only by scrolling a dialog they had just been
   handed. Pinned to the bottom, it is always where the thumb already is. */
/* The modal's footer: the flag row and the Next button pinned together.
   Next alone was sticky, and adding the flag row above it put the row in the
   scrolling body underneath a floating button — half-covered and clipped at
   the card's edge. Two things that must always be reachable have to be pinned
   as one block, not one pinned and one hoping. */
.gtc-modal-foot {
  position: sticky;
  bottom: 0;
  z-index: 2;
  background: var(--ground);
  box-shadow: 0 -0.9rem 0.9rem -0.6rem var(--ground);
}
.gtc-modal-foot .gtc-next { margin-top: 0; }

.gtc-next {
  width: 100%;
  margin-top: 1.1rem;
  padding: 0.85rem;
  background: var(--amber);
  color: #21160a;
  border-radius: var(--radius);
  font-size: var(--board-sm);
  font-weight: 700;
  letter-spacing: var(--track);
  text-transform: uppercase;
}
.gtc-next:hover { background: #ffbc55; }

/* ================================================================= timer
   Twenty seconds a question, with a bar. Two rules learned from the art
   quiz's own bug reports, and both matter more than the styling:

   1. The clock does not start until the photograph is on screen. On a poor
      connection it otherwise counts down against a blank plate.
   2. Running out of time says so. Silently marking it wrong looked identical
      to answering correctly and being rejected — which is exactly how a
      player reported it. */
.gtc-timer {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  align-items: center;
}
.gtc-timer-row {
  display: flex;
  align-items: baseline;
  gap: 0.3rem;
  font-family: var(--code-face);
  font-variant-numeric: tabular-nums;
}
.gtc-timer-value { font-size: 1.5rem; color: var(--chalk); letter-spacing: -0.02em; }
.gtc-timer-unit {
  font-size: var(--board-xs);
  letter-spacing: var(--track);
  text-transform: uppercase;
  color: var(--chalk-3);
}
.gtc-timer-bar {
  width: 100%;
  max-width: 22rem;
  height: 3px;
  background: var(--hairline);
  overflow: hidden;
}
.gtc-timer-fill {
  height: 100%;
  width: 100%;
  background: var(--amber);
  transform-origin: left;
  transition: transform 1s linear, background 300ms ease;
}
/* The last five seconds turn rust and the number pulses. Colour alone would
   fail a colour-blind player, so the size moves too. */
.gtc-timer.is-urgent .gtc-timer-fill { background: var(--rust); }
.gtc-timer.is-urgent .gtc-timer-value {
  color: var(--rust-lit);
  animation: gtc-tick 1s steps(2) infinite;
}
@keyframes gtc-tick { 50% { transform: scale(1.12); } }

/* ============================================================= wildcards
   Four, one use each per game. They sit under the timer because that is the
   order a player needs them in: see the clock, then decide to spend. */
.gtc-wilds {
  display: flex;
  justify-content: center;
  gap: 0.45rem;
  flex-wrap: wrap;
}
.gtc-wild {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.15rem;
  min-width: 4.1rem;
  padding: 0.45rem 0.5rem;
  background: var(--panel);
  border: 1px solid var(--hairline);
  border-radius: var(--radius);
  transition: background 120ms ease, border-color 120ms ease, opacity 200ms ease;
}
.gtc-wild:hover:not(:disabled) { background: var(--panel-lit); border-color: var(--hairline-lit); }
.gtc-wild-icon { font-size: 1rem; line-height: 1; color: var(--amber); }
.gtc-wild-label {
  font-size: 0.56rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--chalk-3);
}
/* Spent, not hidden. A vanished button leaves the row jumping and the player
   wondering what was there; a dimmed one says "you used that". */
.gtc-wild.is-spent { opacity: 0.3; }
.gtc-wild.is-spent .gtc-wild-icon { color: var(--chalk-4); }
.gtc-wild:disabled { cursor: default; }

.gtc-key.is-cut {
  opacity: 0.22;
  text-decoration: line-through;
  text-decoration-color: var(--rust);
}

/* ================================================================= hint card
   Small, and dismissed by tapping anywhere. A hint is an aside, so it does not
   get the full modal's furniture. */
.gtc-hint-veil {
  position: fixed; inset: 0;
  background: rgba(4,8,11,0.7);
  display: grid; place-items: center;
  z-index: 50;
  padding: var(--pad);
}
.gtc-hint-veil[hidden] { display: none; }
.gtc-hint-card {
  max-width: 26rem;
  background: var(--panel);
  border: 1px solid var(--amber);
  border-radius: var(--radius);
  padding: 1.2rem;
  text-align: center;
  animation: gtc-rise 200ms ease;
}
.gtc-hint-eyebrow {
  font-size: var(--board-xs);
  font-weight: 700;
  letter-spacing: var(--track);
  text-transform: uppercase;
  color: var(--amber);
}
.gtc-hint-text {
  font-family: var(--prose-face);
  font-size: var(--prose);
  line-height: 1.5;
  color: var(--chalk);
  margin: 0.6rem 0 0.9rem;
}
.gtc-hint-tap { font-size: var(--board-xs); color: var(--chalk-4); letter-spacing: 0.08em; }

/* ================================================================= the front
   Same anatomy as guessthepainter's home: a top bar with the wordmark and
   nav, a hero of eyebrow / title / lede / calls to action, a collage of
   photographs, a footer band. Only the palette and the faces change.

   One departure, and it is deliberate. The art quiz lists its three modes as
   equal sub-links under one START button. Here the Daily gets its own card,
   because the SERP says so: the sites ranking for "guess the city" on no
   authority at all are the daily ones, and what they have is people pasting a
   result into a chat. A mode that earns the traffic should not be a footnote
   under the mode that does not. */
.gtc-front { display: flex; flex-direction: column; min-height: 100dvh; }

.gtc-topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.9rem clamp(1rem, 4vw, 2.5rem);
  border-bottom: 1px solid var(--hairline);
}
.gtc-brand {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  color: var(--chalk);
  text-decoration: none;
}
.gtc-brand svg { width: 26px; height: 26px; flex: none; }
.gtc-brand-word {
  font-size: 0.82rem;
  font-weight: 700;
  letter-spacing: 0.13em;
  text-transform: uppercase;
}
.gtc-topnav { display: flex; align-items: center; gap: clamp(0.7rem, 2vw, 1.5rem); }
.gtc-topnav a, .gtc-topnav button {
  font-size: var(--board-xs);
  font-weight: 700;
  letter-spacing: var(--track);
  text-transform: uppercase;
  color: var(--chalk-3);
  text-decoration: none;
}
.gtc-topnav a:hover, .gtc-topnav button:hover { color: var(--chalk); }
@media (max-width: 40rem) { .gtc-topnav { display: none; } }

.gtc-hero {
  flex: 1;
  display: grid;
  gap: clamp(1.5rem, 5vw, 4rem);
  align-items: center;
  grid-template-columns: 1fr;
  padding: clamp(1.5rem, 5vw, 4rem) clamp(1rem, 4vw, 2.5rem);
  max-width: 78rem;
  width: 100%;
  margin: 0 auto;
}
@media (min-width: 56rem) { .gtc-hero { grid-template-columns: 1.05fr 1fr; } }

.gtc-eyebrow {
  font-size: var(--board-xs);
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--amber);
  margin: 0 0 0.9rem;
}
.gtc-hero h1 {
  font-family: var(--prose-face);
  font-weight: 400;
  font-size: clamp(2.1rem, 6.5vw, 3.6rem);
  line-height: 1.03;
  letter-spacing: -0.025em;
  margin: 0 0 1rem;
  text-wrap: balance;
}
.gtc-hero h1 em { font-style: italic; color: var(--amber); }
.gtc-lede {
  font-family: var(--prose-face);
  font-size: 1.1rem;
  line-height: 1.55;
  color: var(--chalk-2);
  margin: 0 0 1.8rem;
  max-width: 32rem;
}

.gtc-start {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.9rem 1.6rem;
  background: var(--amber);
  color: #21160a;
  border-radius: var(--radius);
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.gtc-start:hover { background: #ffbc55; }

/* The Daily, given its own card rather than a sub-link. */
.gtc-daily {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  width: 100%;
  max-width: 26rem;
  margin: 1.1rem 0 1.2rem;
  padding: 0.8rem 1rem;
  background: var(--panel);
  border: 1px solid var(--amber);
  border-radius: var(--radius);
  text-align: left;
}
.gtc-daily:hover { background: var(--panel-lit); }
.gtc-daily-main { display: flex; flex-direction: column; gap: 0.15rem; }
.gtc-daily-title { font-size: 0.95rem; font-weight: 700; color: var(--chalk); }
.gtc-daily-sub { font-size: var(--board-xs); color: var(--chalk-3); letter-spacing: 0.05em; }
.gtc-daily-date {
  font-family: var(--code-face);
  font-size: var(--board-xs);
  color: var(--amber);
  letter-spacing: 0.08em;
  text-align: right;
  white-space: nowrap;
}

.gtc-modes { display: flex; flex-wrap: wrap; gap: 0.4rem 1rem; }
.gtc-modes button {
  font-size: var(--board-xs);
  font-weight: 700;
  letter-spacing: var(--track);
  text-transform: uppercase;
  color: var(--chalk-3);
}
.gtc-modes button:hover { color: var(--amber); }

/* The collage. Six photographs at slight angles, because the game is about
   looking at photographs and the front page should say so before any words do.
   Hidden below the breakpoint: on a phone it would push the CTA off screen,
   and the CTA is the point. */
.gtc-collage { display: none; }
@media (min-width: 56rem) {
  .gtc-collage {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0.6rem;
  }
  .gtc-collage figure {
    margin: 0;
    aspect-ratio: 3 / 4;
    overflow: hidden;
    border: 1px solid var(--hairline);
    border-radius: 2px;
    background: #05090c;
  }
  .gtc-collage img { width: 100%; height: 100%; object-fit: cover; display: block;
                     filter: saturate(0.9); }
  .gtc-collage figure:nth-child(2) { transform: translateY(-1.2rem); }
  .gtc-collage figure:nth-child(5) { transform: translateY(-1.2rem); }
}

.gtc-footband {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.6rem 1.5rem;
  padding: 1rem clamp(1rem, 4vw, 2.5rem);
  border-top: 1px solid var(--hairline);
  font-size: var(--board-xs);
  letter-spacing: 0.06em;
  color: var(--chalk-4);
}
.gtc-footband a { color: var(--chalk-3); text-decoration: none; }
.gtc-footband a:hover { color: var(--chalk); }

/* The SEO prose. Present for a crawler and a screen reader, out of the way of
   a player — the same arrangement guessthepainter uses, and for the same
   reason: the page has two audiences with opposite needs. */
.gtc-seo {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* ============================================================ duo mode
   Whose turn it is has to be unmissable, not tasteful. A player who answers on
   someone else's turn has lost a life that was not theirs, and no amount of
   apologising fixes that — so the board takes the player's colour outright
   rather than a hint of it.

   Warm for player one, cold for player two: on a dark ground temperature reads
   apart instantly, and it survives colour blindness in a way two hues of
   similar warmth would not. */
.gtc-screen.is-duo .gtc-board {
  background: var(--turn-solid);
  border-bottom: 3px solid var(--turn-solid);
  box-shadow: 0 0 24px -6px var(--turn-solid);
}
/* The board is now a bright bar, so its text has to flip to dark to stay
   readable — chalk-on-amber is the classic unreadable pairing. */
.gtc-screen.is-duo .gtc-board,
.gtc-screen.is-duo .gtc-board .gtc-label,
.gtc-screen.is-duo .gtc-board .gtc-progress { color: #10171d; }
.gtc-screen.is-duo .gtc-pip { background: rgba(16,23,29,0.28); }
.gtc-screen.is-duo .gtc-pip.is-on { background: #10171d; }
.gtc-screen.is-duo .gtc-pip.is-spent { background: rgba(16,23,29,0.5); }

.gtc-screen.is-duo .gtc-streak {
  font-family: var(--board-face);
  font-size: 0.9rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  color: #10171d !important;
}
/* The whole lower half carries the colour, not a hint of it. A 9% tint was
   technically present and practically invisible, and the point of the colour is
   that nobody answers on the wrong turn — so it goes where the player is
   looking, which is the keys, not the strip at the top. */
.gtc-screen.is-duo .gtc-play {
  background: var(--turn-zone);
  border-top: 1px solid var(--turn-solid);
  box-shadow: inset 0 24px 40px -30px var(--turn-solid);
}
.gtc-screen.is-duo .gtc-keys {
  border-left: 3px solid var(--turn-solid);
  padding-left: 0.7rem;
}
/* The keys pick up the turn colour on their edge, so the thing you are about to
   press is labelled with whose press it is. */
.gtc-screen.is-duo .gtc-key { border-color: color-mix(in srgb, var(--turn-solid) 45%, var(--hairline-lit)); }
.gtc-screen.is-duo .gtc-key:hover:not(:disabled) { border-color: var(--turn-solid); }
.gtc-screen.is-duo .gtc-ask { color: var(--turn-solid); }

/* ============================================================ the arrivals
   The result screen was a line of text and a button, and it read as an error
   message. A run is the thing the player just spent five minutes on, so it
   gets the largest type on the site and the number gets to be the subject.

   The headline scales with the result. Not decoration: 90% and 30% are
   different events, and a screen that renders them identically tells the
   player their effort did not register. */
.gtc-arrivals {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 1.1rem;
  padding: var(--pad);
  max-width: 40rem;
  width: 100%;
  margin: 0 auto;
}

.gtc-verdict {
  font-family: var(--prose-face);
  font-weight: 400;
  line-height: 0.92;
  letter-spacing: -0.035em;
  margin: 0;
  text-wrap: balance;
}
.gtc-verdict .gtc-score {
  display: block;
  font-size: clamp(4rem, 22vw, 9rem);
  font-variant-numeric: tabular-nums;
  color: var(--chalk);
}
.gtc-verdict .gtc-of {
  font-size: clamp(1rem, 4vw, 1.5rem);
  color: var(--chalk-3);
  letter-spacing: 0;
}
/* Three bands. A strong run turns the number amber and grows it; a weak one
   stays quiet rather than shouting a bad score back at you. */
.gtc-arrivals[data-band="high"] .gtc-score {
  color: var(--amber);
  font-size: clamp(5rem, 27vw, 11rem);
}
.gtc-arrivals[data-band="low"] .gtc-score { font-size: clamp(3rem, 16vw, 6rem); }

.gtc-tagline {
  font-family: var(--prose-face);
  font-style: italic;
  font-size: clamp(1.1rem, 3.6vw, 1.6rem);
  color: var(--amber);
  margin: 0;
}
.gtc-arrivals[data-band="low"] .gtc-tagline { color: var(--chalk-2); font-style: normal; }

/* Three cards, because three numbers is the story of a run: how many, out of
   how many, and the longest stretch without a mistake. */
.gtc-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.5rem; }
.gtc-stat {
  padding: 0.7rem 0.5rem;
  background: var(--panel);
  border: 1px solid var(--hairline);
  border-radius: var(--radius);
  text-align: center;
}
.gtc-stat-value {
  font-family: var(--code-face);
  font-size: 1.5rem;
  color: var(--chalk);
  font-variant-numeric: tabular-nums;
  display: block;
}
.gtc-stat.is-lead { border-color: var(--amber); }
.gtc-stat.is-lead .gtc-stat-value { color: var(--amber); }
.gtc-stat-label {
  font-size: 0.55rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--chalk-3);
}

.gtc-save { display: flex; gap: 0.5rem; }
.gtc-save input {
  flex: 1;
  min-width: 0;
  padding: 0.75rem 0.85rem;
  background: var(--panel);
  border: 1px solid var(--hairline-lit);
  border-radius: var(--radius);
  color: var(--chalk);
  font-family: var(--board-face);
  font-size: 0.9rem;
}
.gtc-save input::placeholder { color: var(--chalk-4); }
/* width:auto, because .gtc-next carries width:100% for its use inside the
   modal, and inherited here it squeezed the name field down to sixteen
   pixels. */
.gtc-save button { flex: none; width: auto; padding: 0.75rem 1.1rem; }
.gtc-save input { min-width: 7rem; }

/* One primary per screen. Saving the score is the new thing being offered, so
   it keeps the amber; playing again is the obvious next step and does not need
   to shout to be found. Two amber buttons side by side just cancel out. */
.gtc-actions { display: flex; flex-wrap: wrap; gap: 0.6rem; align-items: center; }
.gtc-actions .gtc-ghost { flex: 1; min-width: 12rem; }
.gtc-ghost {
  padding: 0.85rem 1.1rem;
  background: var(--panel);
  border: 1px solid var(--hairline-lit);
  border-radius: var(--radius);
  color: var(--chalk);
  font-size: var(--board-sm);
  font-weight: 700;
  letter-spacing: var(--track);
  text-transform: uppercase;
}
.gtc-ghost:hover { background: var(--panel-lit); }

/* ============================================================ leaderboard
   Local for now: these are this device's runs, and the screen says so rather
   than implying a world ranking that does not exist. The storage sits behind
   one pair of functions so a server-backed board can replace it without the
   screen changing. */
.gtc-board-list { display: flex; flex-direction: column; }
.gtc-board-row {
  display: grid;
  grid-template-columns: 2rem 1fr auto auto;
  gap: 0.9rem;
  align-items: baseline;
  padding: 0.6rem 0.2rem;
  border-bottom: 1px solid var(--hairline);
}
.gtc-board-rank {
  font-family: var(--code-face);
  font-size: var(--board-xs);
  color: var(--chalk-4);
  font-variant-numeric: tabular-nums;
}
.gtc-board-name { font-size: 0.95rem; color: var(--chalk-2); }
.gtc-board-when { font-family: var(--code-face); font-size: 0.56rem; color: var(--chalk-4); }
.gtc-board-score {
  font-family: var(--code-face);
  font-size: 1rem;
  color: var(--chalk);
  font-variant-numeric: tabular-nums;
}
.gtc-board-row.is-new { background: var(--amber-glow); }
.gtc-board-row.is-new .gtc-board-name,
.gtc-board-row.is-new .gtc-board-score { color: var(--amber); }
.gtc-board-empty {
  font-family: var(--prose-face);
  color: var(--chalk-3);
  padding: 1.5rem 0;
}

/* ============================================================ mobile menu
   The nav was simply hidden below 40rem, which on a phone left no route to
   Landmarks or Credits at all — the whole site unreachable from its own front
   page. A hidden nav needs a way back in, not just a breakpoint. */
.gtc-burger {
  display: none;
  font-size: 1.3rem;
  line-height: 1;
  color: var(--chalk-2);
  padding: 0.2rem 0.4rem;
}
@media (max-width: 40rem) { .gtc-burger { display: block; } }

.gtc-sheet {
  position: fixed; inset: 0;
  z-index: 60;
  background: rgba(4,8,11,0.86);
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
}
.gtc-sheet[hidden] { display: none; }
.gtc-sheet-inner {
  background: var(--ground);
  border-top: 1px solid var(--hairline);
  padding: 1rem 1.2rem 1.6rem;
  animation: gtc-rise 200ms ease;
}
.gtc-sheet a, .gtc-sheet button {
  display: block;
  width: 100%;
  text-align: left;
  padding: 0.85rem 0;
  border-bottom: 1px solid var(--hairline);
  font-size: 0.95rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  color: var(--chalk);
  text-decoration: none;
}
.gtc-sheet a:last-child, .gtc-sheet button:last-child { border-bottom: 0; }

/* ============================================================ how to play
   Reachable from the front page and from the board. Four rows, because the
   game has four things worth explaining and a wall of prose in a modal is a
   wall nobody reads. */
.gtc-howto { display: flex; flex-direction: column; gap: 0.9rem; }
.gtc-howto-row { display: grid; grid-template-columns: 2.2rem 1fr; gap: 0.9rem; align-items: start; }
.gtc-howto-mark {
  font-family: var(--code-face);
  font-size: 1.1rem;
  color: var(--amber);
  text-align: center;
}
.gtc-howto-row h3 {
  font-family: var(--prose-face);
  font-weight: 400;
  font-size: 1.05rem;
  margin: 0 0 0.15rem;
  color: var(--chalk);
}
.gtc-howto-row p {
  font-family: var(--prose-face);
  font-size: 0.92rem;
  line-height: 1.5;
  color: var(--chalk-2);
  margin: 0;
}

/* ============================================================ duo setup
   Names before the first question. The art quiz asks for them too, and the
   reason shows up on the result screen: "Player 2 wins" is a worse sentence
   than "Marta wins", and the whole point of a pass-and-play mode is that the
   two players are in the same room. */
.gtc-setup { display: flex; flex-direction: column; gap: 0.7rem; }
.gtc-setup-field { display: flex; flex-direction: column; gap: 0.3rem; }
.gtc-setup-field label {
  font-size: var(--board-xs);
  font-weight: 700;
  letter-spacing: var(--track);
  text-transform: uppercase;
}
.gtc-setup-field:nth-child(1) label { color: var(--p1); }
.gtc-setup-field:nth-child(2) label { color: var(--p2); }
.gtc-setup-field input {
  padding: 0.75rem 0.85rem;
  background: var(--panel);
  border: 1px solid var(--hairline-lit);
  border-radius: var(--radius);
  color: var(--chalk);
  font-family: var(--board-face);
  font-size: 0.95rem;
}

/* ============================================================ mode picker
   Start playing opens this rather than dropping straight into Classic. Four
   modes that differ in kind — timed, daily, untimed, two-player — and choosing
   between them is a decision, not a setting. */
.gtc-pick { display: grid; gap: 0.55rem; }
.gtc-pick-btn {
  display: grid;
  grid-template-columns: 2.4rem 1fr auto;
  gap: 0.8rem;
  align-items: center;
  padding: 0.85rem 0.95rem;
  background: var(--panel);
  border: 1px solid var(--hairline-lit);
  border-radius: var(--radius);
  text-align: left;
}
.gtc-pick-btn:hover { background: var(--panel-lit); border-color: var(--amber); }
.gtc-pick-btn[data-mode="daily"] { border-color: var(--amber); }
.gtc-pick-icon { font-size: 1.3rem; color: var(--amber); text-align: center; }
.gtc-pick-name { font-size: 1rem; font-weight: 700; display: block; }
.gtc-pick-desc { font-size: var(--board-xs); color: var(--chalk-3); letter-spacing: 0.04em; }
.gtc-pick-tag {
  font-family: var(--code-face);
  font-size: var(--board-xs);
  color: var(--amber);
  white-space: nowrap;
}

/* ============================================================ learn grid
   Four photographs of one city at once, instead of one photograph of one
   landmark. Four pieces of evidence beat one, which is what makes this the
   mode you can learn in: a single Gothic façade could be anywhere in Europe,
   but four buildings together carry a city's whole architectural accent. */
.gtc-quad {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 3px;
  background: var(--hairline);
  height: min(46dvh, 22rem);
}
@media (min-width: 40rem) { .gtc-quad { height: min(56dvh, 28rem); } }
.gtc-quad figure { margin: 0; overflow: hidden; background: #05090c; position: relative; }
.gtc-quad img { width: 100%; height: 100%; object-fit: cover; display: block; }
.gtc-quad figcaption {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  padding: 0.3rem 0.5rem;
  background: linear-gradient(transparent, rgba(5,9,12,0.88));
  font-family: var(--code-face);
  font-size: 0.56rem;
  letter-spacing: 0.08em;
  color: var(--chalk-2);
  opacity: 0;
  transition: opacity 200ms ease;
}
/* The names appear only after answering — before that they would be four
   labels spelling out the answer. */
.gtc-quad.is-resolved figcaption { opacity: 1; }

/* A finished daily still looks like a card worth reading — it carries today's
   score — but it stops advertising itself as an action. */
.gtc-daily.is-done { border-color: var(--hairline-lit); }
.gtc-daily.is-done .gtc-daily-title { color: var(--chalk-2); }
.gtc-daily.is-done .gtc-daily-date { color: var(--chalk-4); }

/* ======================================================= touch targets
   Keyed on `pointer: coarse`, not on width. A narrow window with a mouse does
   not need bigger targets; a finger does, at any width.
   
   Measured before writing this: the mode row was 13px tall, "Back" 18px, the
   footer links 11px. Apple asks for 44 and Android for 48, and the reason is
   not politeness — a 13px target on a moving bus is a mis-tap, and a mis-tap
   here means answering the wrong city or leaving the game. */
@media (pointer: coarse) {
  /* The report buttons came out 22px on a phone. They are meant to be small,
     but small is a visual weight, not a hit area — and a mis-tap here files a
     complaint about a photograph the player had no problem with, which is worse
     than no report at all. */
  .gtc-flag button {
    min-height: 40px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }
  .gtc-modes { gap: 0.2rem 0.6rem; }
  .gtc-modes button {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    padding: 0 0.55rem;
  }
  .gtc-back {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    padding: 0 0.5rem;
    margin: 0 -0.5rem;      /* keep the visual position, grow only the target */
  }
  .gtc-burger {
    min-width: 44px;
    min-height: 44px;
    display: grid;
    place-items: center;
    margin-right: -0.4rem;
  }
  .gtc-footband a {
    display: inline-block;
    padding: 0.95rem 0;    /* 11px of text needs 16 either side to clear 44 */
  }
  .gtc-brand { min-height: 44px; }
  /* The wildcards are already 4 across a 375px screen; without a floor they
     shrink under the finger as soon as a label wraps. */
  .gtc-wild { min-height: 46px; min-width: 3.9rem; }
  .gtc-key { min-height: 52px; }
}

/* ============================================================ board chips
   Filters, in the shape guessthepainter uses: a row of pills where the active
   one is filled. */
.gtc-chips { display: flex; gap: 0.4rem; flex-wrap: wrap; }
.gtc-chip {
  padding: 0.4rem 0.8rem;
  background: var(--panel);
  border: 1px solid var(--hairline-lit);
  border-radius: 999px;
  font-size: var(--board-xs);
  font-weight: 700;
  letter-spacing: var(--track);
  text-transform: uppercase;
  color: var(--chalk-3);
}
.gtc-chip:hover { color: var(--chalk); }
.gtc-chip.is-on {
  background: var(--amber);
  border-color: var(--amber);
  color: #21160a;
}
@media (pointer: coarse) { .gtc-chip { min-height: 40px; } }

/* The top three carry the accent; the rest stay quiet. A column of identical
   numbers is a column nobody reads. */
.gtc-board-rank.is-top { color: var(--amber); font-weight: 700; }
/* A dated row has no rank column, so the grid loses its first track. */
.gtc-board-row.is-dated { grid-template-columns: 1fr auto auto; }

/* The share button leads on a daily result, because sharing is what a daily is
   for — the SERP evidence for building one at all was that the sites ranking on
   no authority are the ones people paste into chats. Play again stays quiet. */
.gtc-actions #over-share { flex: 1; min-width: 12rem; }
.gtc-share-note {
  width: 100%;
  margin: 0.3rem 0 0;
  font-family: var(--code-face);
  font-size: 0.58rem;
  letter-spacing: 0.06em;
  color: var(--chalk-3);
  white-space: pre-line;
}

/* Daily and Solo carry a heavier edge: they are the two modes most people
   want, and a row of four identical cards makes the reader do the sorting the
   design should have done for them. */
.gtc-pick-btn.is-lead { border-width: 2px; }
.gtc-pick-btn[data-mode="daily"] { border-color: var(--amber); }
.gtc-pick-btn[data-mode="classic"].is-lead { border-color: var(--hairline-lit); }
.gtc-pick-btn[data-mode="classic"].is-lead:hover { border-color: var(--amber); }

/* A finished daily is dimmed here exactly as it is on the front page. It stays
   clickable — it shows the result you already have — so it must not look
   disabled either; spent, not forbidden. */
.gtc-pick-btn.is-done {
  opacity: 0.55;
  border-color: var(--hairline-lit);
}
.gtc-pick-btn.is-done .gtc-pick-icon { color: var(--chalk-4); }
.gtc-pick-btn.is-done .gtc-pick-tag { color: var(--chalk-4); }

/* ---- Reporting a bad photograph -----------------------------------------
   Bottom of the modal, quiet, below the credit. The player came to read about
   the landmark; a report control competing with that would get clicked out of
   idle curiosity and the reports would stop meaning anything.

   Marked state is a filled amber outline rather than a colour swap, so the row
   still reads as controls and not as a verdict on the photograph. */
.gtc-flag {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.4rem;
  margin: 0.2rem 0 1rem;
  padding-top: 0.7rem;
  border-top: 1px solid var(--hairline);
}

.gtc-flag-q {
  font-size: var(--board-xs);
  letter-spacing: var(--track);
  text-transform: uppercase;
  color: var(--chalk-4);
  margin-right: auto;
}

.gtc-flag button {
  font-size: var(--board-xs);
  letter-spacing: 0.04em;
  color: var(--chalk-3);
  background: var(--panel);
  border: 1px solid var(--hairline);
  border-radius: var(--radius);
  padding: 0.3rem 0.55rem;
  /* Without this two of the three labels wrapped and the row came out with
     buttons of 43, 43 and 32 pixels — a ragged row reads as broken rather than
     as quiet. On a narrow screen the media query below gives them a line of
     their own instead of letting them wrap. */
  white-space: nowrap;
  transition: color .12s, border-color .12s, background .12s;
}

.gtc-flag button:hover { color: var(--chalk-2); border-color: var(--hairline-lit); }

.gtc-flag button.is-on {
  color: var(--amber);
  border-color: var(--amber);
  background: var(--amber-glow);
}

/* On a phone the label would eat the row and push a button onto its own line,
   so it steps aside and lets the three controls sit together. */
@media (max-width: 30rem) {
  .gtc-flag-q { flex-basis: 100%; margin-bottom: 0.15rem; }
  .gtc-flag button { flex: 1; text-align: center; }
}