/* Guess the Player. Built on the site's own tokens (style.css: --panel, --ink, --accent ...), so it
   follows the same dark and light themes; everything here is scoped to body.gp. */

/* style.css locks the page on laptop-sized screens (min-width 821px): html and body at 100% height,
   body overflow hidden, because the 38-0 game scrolls inside its own panels. This page is an ordinary
   document, so the lock is undone here, or nothing below the fold can be reached (Lukas, 13 Oct 2026:
   "the site is unscrollable"). Phone widths never had the lock, which is why phone tests missed it. */
html:has(body.gp) { height: auto; }
body.gp { height: auto; min-height: 100vh; overflow: visible; display: flex; flex-direction: column; }

/* Header: the site's logo (a link home) and the game's name. */
.gp-top { padding-top: 1.6rem; padding-bottom: 0.4rem; max-width: 760px; }
.gp-home { text-decoration: none; color: inherit; border-radius: 12px; }
.gp-home:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; }
.gp-title { display: flex; flex-direction: column; align-items: flex-end; text-align: right; }
.gp-eyebrow { font-size: 0.72rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--accent); }
.gp-name { font-family: 'Archivo', system-ui, sans-serif; font-weight: 800; font-size: clamp(1.3rem, 3.4vw, 1.75rem); line-height: 1.05; color: var(--ink); }

.gp-main { width: 100%; max-width: 760px; margin: 0 auto; padding: 0.6rem 1rem 2.5rem; display: grid; grid-template-columns: minmax(0, 1fr); gap: 1rem; flex: 1 0 auto; align-content: start; }
.gp-loading { color: var(--muted); text-align: center; padding: 3rem 0; }

/* Mode tabs: Daily, Casual (Survival and Versus join later). */
.gp-tabs { display: inline-flex; gap: 0.25rem; padding: 0.25rem; border-radius: 999px; background: var(--panel); border: 1px solid var(--line); justify-self: start; }
.gp-tab { font: inherit; font-weight: 700; font-size: 0.92rem; padding: 0.45rem 1.1rem; border-radius: 999px; border: 0; background: transparent; color: var(--muted); cursor: pointer; }
.gp-tab:hover { color: var(--ink); }
.gp-tab.on { background: var(--accent); color: #fff; }
.gp-tab:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* Casual's settings: era and level. */
.gp-bar.gp-settings { justify-content: flex-start; gap: 0.6rem 1.4rem; } /* two classes: beats .gp-bar's space-between */
.gp-sel { display: inline-flex; align-items: center; gap: 0.5rem; font-size: 0.9rem; }
.gp-sel span { font-size: 0.74rem; font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); }
/* Our own arrow, not the browser's: the native one sits hard against the edge ("unsettling", Lukas).
   The select keeps room on the right and the chevron sits inside it, clear of the border. */
.gp-sel { position: relative; }
.gp-sel select { font: inherit; font-weight: 600; padding: 0.4rem 2.1rem 0.4rem 0.75rem; border-radius: 8px; border: 1px solid var(--line); background: var(--field); color: var(--ink); appearance: none; -webkit-appearance: none; cursor: pointer; }
.gp-sel::after { content: ""; position: absolute; right: 0.8rem; top: 50%; width: 11px; height: 7px; margin-top: -3px; background: var(--muted); -webkit-mask: var(--chev) no-repeat center / contain; mask: var(--chev) no-repeat center / contain; pointer-events: none; }
.gp-sel select:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }

/* The day's line: Daily #12 · 14 October, and the hard mode switch. */
.gp-bar { display: flex; align-items: center; justify-content: space-between; gap: 0.6rem 1rem; flex-wrap: wrap; }
.gp-num { font-family: 'Archivo', system-ui, sans-serif; font-weight: 800; font-size: 1.1rem; color: var(--accent); font-variant-numeric: tabular-nums; }
.gp-date { color: var(--muted); font-size: 0.9rem; margin-left: 0.3rem; }
.gp-hard { display: inline-flex; align-items: center; gap: 0.45rem; font-weight: 700; font-size: 0.9rem; cursor: pointer; user-select: none; }
.gp-hard small { color: var(--muted); font-weight: 500; }
.gp-hard input { width: 1.05rem; height: 1.05rem; accent-color: var(--accent); }
.gp-hard.on { color: var(--accent); cursor: default; padding: 0.2rem 0.65rem; border: 1px solid var(--accent); border-radius: 999px; font-size: 0.8rem; }

/* The career box: what a Wikipedia infobox shows under "Career history", in the game's colours. */
/* No overflow:hidden here: in a grid it lets the box shrink below its rows. The head rounds itself. */
.gp-card { background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: 0 6px 24px var(--shadow); }
.gp-card { position: relative; }
.gp-card.has-more .gp-career { -webkit-mask-image: linear-gradient(to bottom, #000 calc(100% - 4rem), transparent); mask-image: linear-gradient(to bottom, #000 calc(100% - 4rem), transparent); }
.gp-more { position: absolute; left: 50%; bottom: 0.6rem; transform: translateX(-50%); display: inline-flex; align-items: center; gap: 0.45rem; padding: 0.4rem 0.85rem; border-radius: 999px; border: 1px solid var(--line); background: var(--panel-2); color: var(--accent); font: inherit; font-size: 0.82rem; font-weight: 700; cursor: pointer; box-shadow: 0 6px 18px var(--shadow); white-space: nowrap; }
.gp-more[hidden] { display: none; }
.gp-more svg { width: 11px; height: 8px; }
.gp-more:hover { border-color: var(--accent); }
.gp-more:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.gp-card-head { border-radius: calc(var(--radius) - 1px) calc(var(--radius) - 1px) 0 0; padding: 0.7rem 1.1rem; font-size: 0.74rem; font-weight: 800; letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted); background: var(--panel-2); border-bottom: 1px solid var(--line); }
.gp-career { list-style: none; margin: 0; padding: 0.3rem 0; }
.gp-career li { display: grid; grid-template-columns: 8.2rem minmax(0, 1fr); gap: 0.8rem; padding: 0.34rem 1.1rem; align-items: baseline; }
.gp-career li + li { border-top: 1px solid var(--line); }
/* Club colours (on trial): a stripe at the row's left edge, grey when no colour is known. The faint
   edge keeps black and navy clubs visible on the dark page, and white ones on the light one. */
.gp-career li.striped { position: relative; }
.gp-career li.striped::before { content: ""; position: absolute; left: 0; top: 0.35rem; bottom: 0.35rem; width: 0.3rem; border-radius: 0 3px 3px 0; background: var(--club, color-mix(in srgb, var(--muted) 35%, transparent)); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--ink) 18%, transparent); }
.gp-y { font-variant-numeric: tabular-nums; color: var(--muted); font-size: 0.92rem; white-space: nowrap; }
.gp-team { font-weight: 650; font-size: 1.05rem; overflow-wrap: anywhere; }
.gp-career li.aff .gp-team { font-weight: 500; color: var(--muted); padding-left: 0.2rem; }
.gp-arrow { color: var(--accent); margin-right: 0.4rem; font-weight: 700; }
.gp-note { font-size: 0.62rem; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted); border: 1px solid var(--line); border-radius: 4px; padding: 0 0.3rem; margin-left: 0.4rem; vertical-align: 0.15em; }

/* The play layout. Phone: one column, the search frozen at the top, the hints under it, then the
   career. A flex column, not a grid: a sticky grid item cannot leave its own row, so it would not
   stay frozen while the career scrolls. Laptop: two columns, the career left, the rest right. */
.gp-play { display: flex; flex-direction: column; gap: 1rem; }
.gp-side { display: contents; }
.gp-side > .gp-guess { position: sticky; top: 0; z-index: 4; background: var(--bg); padding: 0.6rem 0 0.7rem; margin: -0.6rem 0 0; box-shadow: 0 10px 16px -14px var(--shadow); }
.gp-side > .gp-giveup { order: 3; }
.gp-careercol { order: 2; display: grid; grid-template-columns: minmax(0, 1fr); gap: 0.6rem; }
.gp-guess-head { display: flex; align-items: center; justify-content: space-between; gap: 0.8rem; }
.gp-tally { display: grid; grid-template-columns: minmax(0, 1fr); gap: 0.5rem; }
@media (min-width: 900px) {
  .gp-play { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 1.6rem; align-items: start; }
  .gp-side { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1rem; grid-column: 2; grid-row: 1; position: sticky; top: 1rem; }
  .gp-side > .gp-guess { position: static; background: none; padding: 0; margin: 0; box-shadow: none; }
  .gp-careercol { grid-column: 1; grid-row: 1; }
  /* The career scrolls inside its box, so the page itself stays still while you play (Lukas: scrolling
     the whole screen "feels kind of wrong"). The box takes the height that is left on screen. */
  .gp-play .gp-career { overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; } /* max-height: fitCareers() */
  .gp-done .gp-side { position: static; }
  .gp-main { max-width: 1040px; }
  .gp-top, .gp-foot { max-width: 1040px; }
}

/* Guessing */
.gp-guess { display: grid; grid-template-columns: minmax(0, 1fr); gap: 0.55rem; }
.gp-sub { font-size: 0.78rem; font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); }
.gp-sub span { text-transform: none; letter-spacing: 0; font-weight: 500; margin-left: 0.4rem; }
.gp-search { position: relative; }
#gp-input {
  width: 100%; font: inherit; font-size: 1.1rem; padding: 0.85rem 1rem; border-radius: 12px;
  border: 1.5px solid var(--line); background: var(--field); color: var(--ink);
}
#gp-input:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 22%, transparent); }
#gp-input:disabled { opacity: 0.6; }
.gp-list {
  position: absolute; z-index: 5; left: 0; right: 0; top: calc(100% + 6px); margin: 0; padding: 0.3rem; list-style: none;
  background: var(--panel); border: 1px solid var(--line); border-radius: 12px; box-shadow: 0 12px 32px var(--shadow);
  max-height: 22rem; overflow-y: auto;
}
.gp-list li { padding: 0.6rem 0.75rem; border-radius: 8px; cursor: pointer; display: flex; justify-content: space-between; gap: 0.8rem; align-items: baseline; }
.gp-list li.on, .gp-list li:hover { background: var(--panel-2); }
.gp-list li.on { box-shadow: inset 3px 0 0 var(--accent); }
.gp-alias { color: var(--muted); font-size: 0.82rem; white-space: nowrap; }
.gp-flash { margin: 0; color: var(--bad); font-weight: 600; font-size: 0.92rem; }
.gp-count { font-size: 0.95rem; color: var(--muted); }
.gp-count b { color: var(--ink); font-size: 1.15rem; font-variant-numeric: tabular-nums; }
.gp-wrong { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 0.4rem; }
.gp-wrong li {
  font-size: 0.88rem; padding: 0.3rem 0.7rem; border-radius: 999px; text-decoration: line-through;
  color: var(--bad); border: 1px solid color-mix(in srgb, var(--bad) 45%, transparent); background: color-mix(in srgb, var(--bad) 8%, transparent);
}

/* Hints: each one costs a wrong attempt. */
.gp-hints { display: grid; grid-template-columns: minmax(0, 1fr); gap: 0.55rem; }
.gp-hint-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(128px, 1fr)); gap: 0.5rem; }
.gp-hint {
  display: flex; flex-direction: column; align-items: flex-start; gap: 0.15rem; text-align: left; font: inherit;
  padding: 0.6rem 0.8rem; border-radius: 10px; border: 1px dashed var(--line); background: transparent; color: var(--ink); cursor: pointer;
}
button.gp-hint:hover:not(:disabled) { border-color: var(--accent); }
button.gp-hint:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.gp-hint.open { border-style: solid; background: var(--panel); cursor: default; }
.gp-hl { font-size: 0.72rem; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); }
.gp-hv { font-weight: 650; }
button.gp-hint .gp-hv { color: var(--accent); font-weight: 600; font-size: 0.9rem; }
.gp-hardnote { margin: 0; color: var(--muted); font-size: 0.9rem; }
.gp-hint.spent { cursor: default; opacity: 0.55; }
.gp-hint.spent .gp-hv { color: var(--muted); font-weight: 500; font-size: 0.88rem; }

/* Survival's clock: 60 seconds a player, red for the last ten. */
.gp-timer {
  font-family: 'Archivo', system-ui, sans-serif; font-weight: 800; font-size: 1.15rem; font-variant-numeric: tabular-nums;
  padding: 0.2rem 0.75rem; border-radius: 999px; border: 1.5px solid var(--line); background: var(--panel); min-width: 4.2rem; text-align: center;
}
.gp-timer.low { color: var(--bad); border-color: var(--bad); }
/* Versus: the tries left on the player on screen. */
.gp-tries { font-size: 0.82rem; font-weight: 700; color: var(--muted); padding: 0.2rem 0.7rem; border-radius: 999px; border: 1.5px solid var(--line); font-variant-numeric: tabular-nums; white-space: nowrap; }
.gp-tries.last { color: var(--bad); border-color: var(--bad); }

.gp-giveup { display: flex; flex-wrap: wrap; gap: 0.4rem 0.9rem; align-items: center; font-size: 0.9rem; color: var(--muted); }
.gp-link { font: inherit; font-size: 0.9rem; background: none; border: 0; padding: 0.2rem 0; color: var(--muted); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.gp-link:hover { color: var(--ink); }
.gp-link.danger { color: var(--bad); font-weight: 600; }
/* Give up, End the run, Skip: a real button, quieter than the main one. */
.gp-btn-ghost { font: inherit; font-weight: 700; font-size: 0.9rem; padding: 0.5rem 1rem; border-radius: 999px; border: 1.5px solid var(--line); background: transparent; color: var(--ink); cursor: pointer; }
.gp-btn-ghost:hover { border-color: var(--muted); }
.gp-btn-ghost:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.gp-btn-ghost.danger { border-color: var(--bad); color: var(--bad); }

/* The result */
.gp-result { text-align: center; display: grid; grid-template-columns: minmax(0, 1fr); gap: 0.45rem; justify-items: center; padding: 1.4rem 1rem 1.2rem; background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); }
.gp-verdict { font-size: 0.8rem; font-weight: 800; letter-spacing: 0.12em; text-transform: uppercase; }
.gp-result.won .gp-verdict { color: var(--good); }
.gp-result.lost .gp-verdict { color: var(--muted); }
.gp-answer { font-family: 'Archivo', system-ui, sans-serif; font-weight: 800; font-size: clamp(1.8rem, 6vw, 2.5rem); line-height: 1.05; text-wrap: balance; }
.gp-meta { color: var(--muted); font-size: 0.9rem; }
.gp-meta a { color: var(--accent); }
.gp-score { font-weight: 700; }
.gp-actions { margin-top: 0.4rem; }
.gp-next { color: var(--muted); font-size: 0.88rem; font-variant-numeric: tabular-nums; }
.gp-next b { color: var(--ink); }
.gp-next .gp-link { font-size: inherit; }

/* Survival */
.gp-rules { margin: 0.2rem 0 0.3rem; max-width: 46ch; color: var(--muted); text-wrap: pretty; }
.gp-rules b { color: var(--ink); }
.gp-right { margin: -0.3rem 0 0; color: var(--good); font-weight: 700; }
/* Survival: the last one you named, a tick and his name. */
.gp-got { justify-self: start; margin: 0; display: inline-flex; align-items: center; gap: 0.45rem; padding: 0.3rem 0.8rem 0.3rem 0.55rem; border-radius: 999px; font-weight: 700; font-size: 0.92rem; color: var(--ink); background: color-mix(in srgb, var(--good) 14%, transparent); border: 1px solid color-mix(in srgb, var(--good) 45%, transparent); }
.gp-got .ic { width: 1rem; height: 1rem; color: var(--good); stroke-width: 2.6; vertical-align: 0; }
/* Survival, not playing: the intro or the run that ended. Laptop: the words left, the board right. */
.gp-split { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1.2rem; }
.gp-col { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1.1rem; align-content: start; }
@media (min-width: 900px) {
  .gp-split { grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 1.6rem; align-items: start; }
  .gp-split.rev > :first-child { grid-column: 2; grid-row: 1; }
  .gp-split.rev > :last-child { grid-column: 1; grid-row: 1; }
}
.gp-vs-card .gp-verdict { font-size: 0.85rem; }
/* "WRONG NAME · 7 PLAYERS NAMED": white words, the number orange and a size up. */
.gp-result.gp-sv-over .gp-verdict { color: var(--ink); }
.gp-sv-over .gp-verdict i { font-style: normal; color: var(--muted); }
.gp-sv-over .gp-verdict b { color: var(--accent); font-family: 'Archivo', system-ui, sans-serif; font-size: 1.45em; letter-spacing: 0; vertical-align: -0.05em; margin-right: 0.05em; }
/* During a run: "3 players named", the 3 big and orange. */
.gp-runcount { display: inline-flex; align-items: baseline; gap: 0.4rem; font-weight: 700; font-size: 0.82rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink); }
.gp-runcount b { font-family: 'Archivo', system-ui, sans-serif; font-weight: 800; font-size: 1.6rem; line-height: 1; letter-spacing: 0; color: var(--accent); font-variant-numeric: tabular-nums; }
.gp-sv-over .gp-flash { margin: 0; }
.gp-vs-card .gp-rules { margin: 0; }
.gp-sv-go { display: flex; align-items: center; flex-wrap: wrap; gap: 0.6rem 1.1rem; margin-top: 0.55rem; }
.gp-sv-go .play-btn { margin: 0; }
.gp-start { background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); padding: 1.1rem; display: grid; grid-template-columns: minmax(0, 1fr); gap: 1.1rem; }
.gp-start .gp-sv-go { margin: 0; }
.gp-start .gp-flash { margin: 0; }
.gp-rulelist { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: minmax(0, 1fr); gap: 0.7rem 1rem; }
.gp-rulelist li { display: flex; align-items: center; gap: 0.7rem; font-weight: 800; line-height: 1.25; }
.gp-rule-ic { flex: none; width: 2.1rem; height: 2.1rem; border-radius: 10px; display: grid; place-items: center; color: var(--accent); background: color-mix(in srgb, var(--accent) 14%, transparent); }
.gp-rule-ic .ic { width: 1.1rem; height: 1.1rem; vertical-align: 0; }
@media (min-width: 560px) { .gp-rulelist { grid-template-columns: repeat(2, minmax(0, 1fr)); } }


/* Leaderboards */
.gp-muted { color: var(--muted); font-size: 0.9rem; margin: 0; }
/* Every grid here is pinned to its box (minmax(0, 1fr)): an auto column grows to its widest child and
   pushes the page sideways on a narrow phone. */
.gp-board { background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); padding: 1rem 1.1rem; display: grid; grid-template-columns: minmax(0, 1fr); gap: 0.6rem; }
.gp-board-head { display: flex; justify-content: space-between; align-items: baseline; gap: 0.6rem; flex-wrap: wrap; }
.gp-board-head .gp-muted { font-size: 0.78rem; }
.gp-b-list { list-style: none; margin: 0; padding: 0; display: grid; }
.gp-b-list li { display: grid; grid-template-columns: 2rem minmax(0, 1fr) auto auto; gap: 0.7rem; align-items: baseline; padding: 0.45rem 0; border-top: 1px solid var(--line); font-variant-numeric: tabular-nums; }
.gp-b-list li:first-child { border-top: 0; }
.gp-b-rank { color: var(--muted); font-weight: 700; }
.gp-b-name { font-weight: 650; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.gp-b-res { font-weight: 700; text-align: right; }
.gp-b-res small { color: var(--muted); font-weight: 500; }
.gp-b-time { color: var(--muted); font-size: 0.85rem; min-width: 4.2rem; text-align: right; }
.gp-tag { font-size: 0.68rem; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase; color: var(--accent); border: 1px solid var(--accent); border-radius: 999px; padding: 0 0.4rem; vertical-align: 0.1em; }
.gp-b-you { font-size: 0.92rem; color: var(--muted); }
.gp-b-list li.me .gp-b-name { color: var(--accent); }
.gp-b-list li.me small { font-size: 0.72rem; font-weight: 700; color: var(--muted); margin-left: 0.3rem; }
.gp-b-you b { color: var(--ink); }
.gp-nameform { display: grid; grid-template-columns: minmax(0, 1fr); gap: 0.35rem; padding-top: 0.6rem; border-top: 1px solid var(--line); }
.gp-nameform label { font-weight: 700; font-size: 0.9rem; }
.gp-nameform div { display: flex; gap: 0.5rem; }
.gp-nameform input { flex: 1; min-width: 0; font: inherit; padding: 0.55rem 0.75rem; border-radius: 10px; border: 1px solid var(--line); background: var(--field); color: var(--ink); }
.gp-nameform input:focus { outline: none; border-color: var(--accent); }
.gp-nameform small { color: var(--muted); }
.gp-btn { font: inherit; font-weight: 700; padding: 0.55rem 1rem; border-radius: 10px; border: 0; background: var(--accent); color: #fff; cursor: pointer; }
.gp-btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* The Daily's five guesses: slots while playing, tiles on the result. */
.gp-slots { display: flex; gap: 0.35rem; }
.gp-slots span { width: 1.6rem; height: 0.5rem; border-radius: 999px; background: var(--line); }
.gp-slots span.x { background: var(--bad); }
.gp-tiles { list-style: none; margin: 0.3rem 0 0; padding: 0; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 0.35rem; width: 100%; }
.gp-tiles li { min-height: 2.6rem; display: flex; align-items: center; justify-content: center; text-align: center; padding: 0.3rem 0.2rem; border-radius: 8px; font-size: 0.74rem; font-weight: 700; line-height: 1.15; overflow-wrap: break-word; min-width: 0; }
@media (max-width: 560px) { .gp-tiles li { font-size: 0.66rem; } }
.gp-tiles li.no { background: color-mix(in srgb, var(--bad) 16%, transparent); color: var(--bad); border: 1px solid color-mix(in srgb, var(--bad) 45%, transparent); }
.gp-tiles li.ok { background: color-mix(in srgb, var(--good) 18%, transparent); color: var(--good); border: 1px solid color-mix(in srgb, var(--good) 50%, transparent); }
.gp-tiles li.empty { border: 1px dashed var(--line); }
/* Birthday Dailies: a tag by the date, and the age on the result. */
.gp-theme { display: inline-flex; align-items: center; gap: 0.35rem; margin-left: 0.5rem; padding: 0.18rem 0.6rem; border-radius: 999px; font-size: 0.8rem; font-weight: 700; color: var(--ink); background: color-mix(in srgb, var(--accent) 14%, transparent); border: 1px solid color-mix(in srgb, var(--accent) 45%, transparent); vertical-align: 0.1em; }
.gp-theme .ic { width: 0.95rem; height: 0.95rem; color: var(--accent); vertical-align: 0; }
.gp-bday { margin: 0.1rem 0 0; display: inline-flex; align-items: center; gap: 0.4rem; font-weight: 700; font-size: 0.92rem; color: var(--ink); }
.gp-bday .ic { width: 1rem; height: 1rem; color: var(--accent); vertical-align: 0; }
/* The three hints under the tiles: lit if taken, dashed and dim if not. */
.gp-used { list-style: none; margin: 0.2rem 0 0; padding: 0; display: flex; flex-wrap: wrap; justify-content: center; gap: 0.4rem; }
.gp-used li, .gp-used-hard { display: inline-flex; align-items: center; gap: 0.35rem; padding: 0.26rem 0.65rem; border-radius: 999px; font-size: 0.8rem; font-weight: 700; }
.gp-used li { border: 1px dashed var(--line); color: var(--muted); opacity: 0.75; }
.gp-used li.on, .gp-used-hard { opacity: 1; border: 1px solid color-mix(in srgb, var(--accent) 55%, transparent); color: var(--ink); background: color-mix(in srgb, var(--accent) 14%, transparent); }
.gp-used .ic { width: 0.95rem; height: 0.95rem; vertical-align: 0; }
.gp-used li.on .ic, .gp-used-hard .ic { color: var(--accent); }

/* The Daily result. Laptop: the named career on the left, the verdict and the record on the right;
   the board opens over the page. Phone order: verdict, career, record. */
.gp-rhead { background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); padding: 1.1rem; display: grid; grid-template-columns: minmax(0, 1fr); gap: 0.45rem; justify-items: center; text-align: center; }
.gp-rhead .gp-verdict { font-family: 'Archivo', system-ui, sans-serif; font-size: 1.35rem; letter-spacing: 0; text-transform: none; }
.gp-rhead.won .gp-verdict { color: var(--good); }
.gp-rhead.lost .gp-verdict { color: var(--ink); }
.gp-rhead .gp-actions { margin: 0.4rem 0 0.2rem; display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 0.6rem; }
.gp-rhead .play-btn { margin: 0; }
.gp-board-btn { display: inline-flex; align-items: center; gap: 0.45rem; padding: 0.55rem 1.1rem; font-size: 0.95rem; }
.gp-board-btn .ic { width: 1.05rem; height: 1.05rem; color: var(--accent); vertical-align: 0; }
/* The Daily's leaderboard, over the result. */
.gp-dlg { padding: 0; border: 0; background: transparent; color: var(--ink); width: min(520px, calc(100vw - 2rem)); max-height: calc(100vh - 3rem); overflow: visible; }
.gp-dlg::backdrop { background: color-mix(in srgb, var(--bg) 70%, transparent); backdrop-filter: blur(3px); }
.gp-dlg .gp-board { position: relative; max-height: calc(100vh - 3rem); overflow-y: auto; box-shadow: 0 24px 60px var(--shadow); }
.gp-dlg .gp-board-head { padding-right: 2.2rem; }
.gp-x { position: absolute; top: 0.55rem; right: 0.55rem; display: grid; place-items: center; width: 2.1rem; height: 2.1rem; border-radius: 999px; border: 0; background: transparent; color: var(--muted); cursor: pointer; }
.gp-x:hover { color: var(--ink); background: var(--panel-2); }
.gp-x:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.gp-x .ic { width: 1.1rem; height: 1.1rem; vertical-align: 0; }
.gp-done .gp-rhead, .gp-done .gp-result { order: 0; }
.gp-done .gp-careercol { display: contents; }
.gp-done .gp-careercol > .gp-card { order: 1; }
.gp-done .gp-stats { order: 2; }
.gp-done .gp-board { order: 3; }
@media (min-width: 900px) { .gp-done .gp-careercol { display: grid; gap: 1rem; } }
.gp-stats { background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); padding: 1rem 1.1rem; display: grid; grid-template-columns: minmax(0, 1fr); gap: 0.7rem; }
.gp-stat-row { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); text-align: center; }
.gp-stat-row b { display: block; font-family: 'Archivo', system-ui, sans-serif; font-size: 1.5rem; font-variant-numeric: tabular-nums; }
.gp-stat-row span { font-size: 0.74rem; color: var(--muted); }
.gp-dist { display: grid; gap: 0.25rem; }
.gp-dist-row { display: grid; grid-template-columns: 1rem minmax(0, 1fr); gap: 0.5rem; align-items: center; font-size: 0.82rem; font-weight: 700; font-variant-numeric: tabular-nums; }
.gp-dist-row i { display: flex; justify-content: flex-end; background: var(--panel-2); border-radius: 4px; padding: 0.1rem 0.4rem; min-width: 1.6rem; }
.gp-dist-row i b { font-size: 0.78rem; }
.gp-dist-row.on i { background: var(--accent); color: #fff; }

/* A named career: his name heads the box, EuroLeague seasons carry a small tag (on trial). */
.gp-card-name { font-family: 'Archivo', system-ui, sans-serif; font-weight: 800; font-size: 1.05rem; letter-spacing: 0; text-transform: none; color: var(--ink); }
.gp-el { font-size: 0.62rem; font-weight: 800; letter-spacing: 0.06em; color: var(--accent); border: 1px solid var(--accent); border-radius: 4px; padding: 0 0.3rem; margin-left: 0.4rem; vertical-align: 0.15em; }
.gp-card-foot { display: flex; justify-content: space-between; gap: 0.8rem; flex-wrap: wrap; padding: 0.6rem 1.1rem; border-top: 1px solid var(--line); font-size: 0.85rem; color: var(--muted); }
.gp-card-foot a { color: var(--accent); }
.gp-card-foot .gp-el { margin: 0 0.3rem 0 0; }

/* Versus */
.gp-back { justify-self: start; text-decoration: none; font-weight: 600; }
.gp-vs-list { list-style: none; margin: 0; padding: 0; display: grid; }
.gp-vs-list li { display: flex; justify-content: space-between; align-items: baseline; gap: 0.8rem; padding: 0.55rem 0; border-top: 1px solid var(--line); }
.gp-vs-list li:first-child { border-top: 0; }
.gp-vs-list li span { min-width: 0; }
.gp-vs-list .gp-link { font-weight: 700; color: var(--accent); text-decoration: none; white-space: nowrap; }
.gp-vs-score { display: flex; align-items: baseline; justify-content: center; gap: 0.6rem; flex-wrap: wrap; color: var(--muted); font-weight: 600; }
.gp-vs-score b { font-family: 'Archivo', system-ui, sans-serif; font-size: 2.6rem; line-height: 1; color: var(--ink); font-variant-numeric: tabular-nums; }
.gp-vs-score i { font-style: normal; font-size: 1.6rem; }
.gp-vs-table { overflow-x: auto; background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); }
.gp-vs-table table { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; }
.gp-vs-table th, .gp-vs-table td { padding: 0.55rem 0.9rem; text-align: right; border-top: 1px solid var(--line); }
.gp-vs-table th { border-top: 0; font-size: 0.72rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); }
.gp-vs-table th:first-child, .gp-vs-table td:first-child { text-align: left; font-weight: 650; }

.gp-foot { max-width: 760px; margin: 0 auto; padding: 1rem 1rem 2rem; color: var(--muted); font-size: 0.8rem; text-align: center; display: grid; gap: 0.3rem; }
.gp-foot p { margin: 0; }
.gp-foot a { color: inherit; }

@media (max-width: 560px) {
  .gp-top { padding-top: 1.1rem; }
  .gp-career li { grid-template-columns: 6.6rem minmax(0, 1fr); gap: 0.6rem; padding: 0.32rem 0.9rem; }
  .gp-y { font-size: 0.84rem; }
  .gp-team { font-size: 1rem; }
  .gp-alias { display: none; }
  /* The career has to show on the first screen: hints become compact chips ("Height: 209 cm"), two
     rows at most. */
  .gp-play .gp-hint-grid { display: flex; flex-wrap: wrap; gap: 0.4rem; }
  .gp-play .gp-hint { flex-direction: row; align-items: baseline; gap: 0.35rem; padding: 0.32rem 0.6rem; border-radius: 999px; }
  .gp-play .gp-hl { font-size: 0.66rem; }
  .gp-play .gp-hl::after { content: ":"; }
  .gp-play button.gp-hint .gp-hv { font-size: 0.82rem; }
  .gp-play .gp-hv { font-size: 0.88rem; }
  .gp-tally { display: grid; gap: 0.4rem; }
  /* Four tabs share the width on a phone instead of running off the edge. */
  .gp-tabs { display: flex; justify-self: stretch; }
  .gp-tab { flex: 1 1 0; padding: 0.45rem 0.3rem; font-size: 0.86rem; }
}
@media (prefers-reduced-motion: reduce) { * { transition: none !important; } }