/* ==========================================================================
   Daily games
   ==========================================================================

   Loaded after styles.css, on /games/ pages only. Everything takes its colour
   from the site's own tokens (--ink, --surface, --line, --theme...), and each
   game page sets body[data-active-category] so --theme is that game's family
   colour, the same way a test page is tinted by its category.

   The three answer colours are the only new ones. They are bright fills with
   dark text rather than the usual dark fills with white text, which is how the
   cosmos palette already treats every themed fill: white on a mid green is
   unreadable against a violet night. Every class here is prefixed or nested
   under .g-page so nothing leaks into the rest of the site. */

.g-page {
  --g-correct: #5fd99a;
  --g-correct-ink: #06180e;
  --g-present: #f3c25b;
  --g-present-ink: #221600;
  --g-absent: #2c2550;
  --g-absent-ink: #d9d2f7;
  --g-miss: #ff8f80;
  /* Opaque, for the things that float over the page and must stay legible:
     the dialog and the name list. */
  --g-solid: #150f2b;
  --g-field: rgba(12, 8, 28, 0.72);
  --g-key: rgba(60, 48, 104, 0.85);
}

/* ---------- Page frame ---------- */
.g-main {
  width: 100%;
  max-width: 640px;
  margin: 0 auto;
  padding: 20px 20px 64px;
}

.g-back {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--muted);
  font-size: 0.9rem;
  margin-bottom: 10px;
}
.g-back:hover { color: var(--ink); }

.g-bar {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 14px;
}
.g-page .g-bar h1 {
  flex: 1;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0;
  font-size: clamp(1.45rem, 1.2rem + 1vw, 1.9rem);
  line-height: 1.15;
  text-wrap: balance;
}
.g-bar-emoji { font-size: 1.1em; }
.g-num {
  font-size: 0.8rem;
  font-weight: 650;
  color: var(--theme);
  background: var(--theme-soft);
  border: 1px solid var(--theme-glow);
  padding: 3px 10px;
  border-radius: 999px;
  font-variant-numeric: tabular-nums;
}
.g-icon-btn {
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  flex: none;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--surface);
  color: var(--ink);
  cursor: pointer;
  padding: 0;
}
.g-icon-btn:hover { border-color: var(--theme); color: var(--theme); }
.g-icon-btn svg { width: 20px; height: 20px; }

.g-page :focus-visible {
  outline: 2px solid var(--theme);
  outline-offset: 2px;
}

.g-lead { color: var(--muted); text-align: center; margin: 0 0 14px; }

.g-card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 20px;
  box-shadow: var(--shadow-sm);
}

/* ---------- Buttons ---------- */
.g-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 48px;
  padding: 0 20px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--surface-2);
  color: var(--ink);
  font-weight: 650;
  cursor: pointer;
  transition: transform 0.12s ease, filter 0.15s ease, border-color 0.15s ease;
}
.g-btn:active { transform: scale(0.97); }
.g-btn-primary {
  background: var(--theme);
  color: var(--on-theme);
  border-color: transparent;
  box-shadow: 0 10px 28px -10px var(--theme-glow);
}
.g-btn-primary:hover { filter: brightness(1.08); }
.g-btn-ghost { background: transparent; }
.g-btn-ghost:hover { border-color: var(--theme); }
.g-btn[disabled] { opacity: 0.5; cursor: default; }

/* ---------- Toast ---------- */
#g-toast {
  position: fixed;
  left: 50%;
  top: calc(env(safe-area-inset-top, 0px) + 88px);
  z-index: 100;
  transform: translate(-50%, -10px);
  opacity: 0;
  pointer-events: none;
  max-width: calc(100% - 32px);
  padding: 10px 16px;
  border-radius: 12px;
  background: var(--ink);
  color: var(--on-ink);
  font-weight: 650;
  text-align: center;
  transition: opacity 0.2s, transform 0.2s;
}
#g-toast.show { opacity: 1; transform: translate(-50%, 0); }

/* ---------- Dialog ---------- */
body.g-modal-open { overflow: hidden; }
.g-modal-backdrop {
  position: fixed;
  inset: 0;
  z-index: 60;
  display: grid;
  place-items: center;
  padding: 16px;
  background: var(--backdrop);
  animation: g-fade 0.15s ease;
}
.g-modal {
  position: relative;
  width: 100%;
  max-width: 440px;
  max-height: calc(100vh - 32px);
  overflow: auto;
  padding: 26px 22px 22px;
  border: 1px solid var(--panel-edge);
  border-radius: 22px;
  background: var(--g-solid);
  color: var(--ink);
  box-shadow: var(--shadow-modal);
  animation: g-pop 0.18s ease;
}
.g-modal-title {
  margin: 0 36px 16px;
  font-size: 1.3rem;
  text-align: center;
  text-wrap: balance;
}
.g-modal-close {
  position: absolute;
  top: 12px;
  inset-inline-end: 12px;
  width: 36px;
  height: 36px;
  display: grid;
  place-items: center;
  border: 0;
  border-radius: 10px;
  background: transparent;
  color: var(--muted);
  cursor: pointer;
}
.g-modal-close:hover { background: var(--surface-2); color: var(--ink); }
@keyframes g-fade { from { opacity: 0; } }
@keyframes g-pop { from { transform: scale(0.95); opacity: 0; } }

.g-help p, .g-help li { font-size: 0.95rem; color: var(--ink-soft); }
.g-help ul { padding-inline-start: 20px; }
/* Help is three numbered steps, then one line of small print. */
.g-steps { list-style: none; counter-reset: step; margin: 0 0 14px; padding: 0; display: grid; gap: 12px; }
.g-steps > li { counter-increment: step; position: relative; padding-inline-start: 40px; min-height: 28px; font-size: 1rem; line-height: 1.45; color: var(--ink); }
.g-steps > li::before {
  content: counter(step);
  position: absolute; inset-inline-start: 0; top: -1px;
  width: 28px; height: 28px; border-radius: 50%;
  display: grid; place-items: center;
  background: var(--theme); color: var(--on-theme);
  font-size: 0.9rem; font-weight: 800;
}
.g-steps .example { margin: 6px 0 0; }
.g-help .g-help-more { margin: 0 0 6px; font-size: 0.85rem; color: var(--muted); }
.g-help .example { display: flex; gap: 8px; align-items: center; margin: 8px 0; flex-wrap: wrap; color: var(--ink-soft); }
.chip { display: inline-block; padding: 1px 8px; border-radius: 6px; font-weight: 700; font-size: 0.8rem; }
.chip.correct { background: var(--g-correct); color: var(--g-correct-ink); }
.chip.present { background: var(--g-present); color: var(--g-present-ink); }
.chip.absent { background: var(--g-absent); color: var(--g-absent-ink); }

/* ---------- Results ---------- */
.g-answer {
  padding: 14px;
  margin-bottom: 14px;
  border: 1px solid var(--theme-glow);
  border-radius: 16px;
  background: var(--theme-soft);
  text-align: center;
}
.g-answer .label {
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--theme);
}
.g-answer .big { font-size: 1.5rem; font-weight: 750; margin-top: 2px; }
.g-answer .sub { font-size: 0.88rem; color: var(--muted); margin-top: 4px; }
.g-result-msg { margin: 0 0 14px; text-align: center; font-weight: 650; }
.g-stats-row { display: grid; grid-template-columns: repeat(4, 1fr); gap: 4px; text-align: center; }
.g-stat-num { font-size: 1.8rem; font-weight: 750; line-height: 1.1; font-variant-numeric: tabular-nums; }
.g-stat-label { font-size: 0.75rem; color: var(--muted); }
.g-dist-title {
  margin: 20px 0 8px;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  text-align: center;
  color: var(--muted);
}
.g-dist { display: grid; gap: 5px; }
.g-dist-row { display: flex; align-items: center; gap: 8px; font-size: 0.85rem; font-weight: 700; }
.g-dist-key { width: 18px; text-align: center; font-variant-numeric: tabular-nums; }
.g-dist-bar {
  min-width: 26px;
  padding: 1px 8px;
  border-radius: 5px;
  background: var(--g-absent);
  color: var(--g-absent-ink);
  text-align: end;
  font-variant-numeric: tabular-nums;
}
.g-dist-bar.today { background: var(--theme); color: var(--on-theme); }
.g-result-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: 20px;
  padding-top: 16px;
  border-top: 1px solid var(--line);
}
.g-next-label { font-size: 0.72rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); }
.g-countdown { font-size: 1.6rem; font-weight: 750; font-variant-numeric: tabular-nums; }
.g-more-games { display: grid; grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); gap: 8px; }
.g-mini-card {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-inline-start: 3px solid var(--theme);
  border-radius: 12px;
  background: var(--surface-2);
  font-weight: 650;
  font-size: 0.9rem;
}
.g-mini-card:hover { border-color: var(--theme); }
.g-mini-emoji { font-size: 1.2rem; }

/* After today's puzzle (DG.afterStrip / DG.testCard in common.js). */
.g-after { display: grid; gap: 12px; margin: 16px 0 4px; padding: 14px 16px; border: 1px solid var(--line); border-radius: 16px; background: var(--surface-2); min-width: 0; }
.g-after-row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; min-width: 0; }
.g-after-next { flex: none; }
.g-after-streak { flex: 1 1 180px; min-width: 0; margin: 0; font-size: 0.9rem; font-weight: 500; overflow-wrap: anywhere; }
.g-result .g-after-streak { margin: 12px 0 0; text-align: center; color: var(--muted); }
.g-after-streak b { display: block; color: var(--ink); }
.g-after-pop { margin-top: 14px; }
.g-test-pick {
  display: flex; align-items: center; gap: 12px; min-width: 0;
  padding: 12px 14px; border: 1px solid var(--line); border-inline-start: 3px solid #c79bff; border-radius: 12px;
  background: var(--surface); color: var(--ink); text-decoration: none;
}
.g-test-pick:hover { border-color: #c79bff; }
.g-test-pick-emoji { font-size: 1.5rem; flex: none; }
.g-test-pick-text { display: grid; gap: 2px; min-width: 0; overflow-wrap: anywhere; }
.g-test-pick-text small { color: var(--muted); font-size: 0.82rem; }
.g-home-hint { display: flex; align-items: center; gap: 10px; min-width: 0; padding: 10px 6px 10px 12px; border-radius: 12px; background: var(--theme-soft, rgba(255, 255, 255, 0.06)); }
.g-home-hint p { flex: 1 1 auto; min-width: 0; margin: 0; font-size: 0.85rem; overflow-wrap: anywhere; }
.g-home-hint-icon { font-size: 1.3rem; flex: none; }
.g-home-hint-x { flex: none; display: grid; place-items: center; width: 36px; height: 36px; border: 0; border-radius: 50%; background: transparent; color: var(--muted); cursor: pointer; }
.g-home-hint-x:hover { color: var(--ink); }

/* The mini cards carry their own game's colour, not the page's. */
.g-page :is(.g-mini-card, .trending-card)[data-category="wellbeing"] { --theme: #7fe3b8; --theme-soft: rgba(127, 227, 184, 0.15); --theme-glow: rgba(127, 227, 184, 0.34); }
.g-page :is(.g-mini-card, .trending-card)[data-category="career"] { --theme: #93c5ff; --theme-soft: rgba(147, 197, 255, 0.15); --theme-glow: rgba(147, 197, 255, 0.34); }
.g-page :is(.g-mini-card, .trending-card)[data-category="fun"] { --theme: #ffc47a; --theme-soft: rgba(255, 196, 122, 0.15); --theme-glow: rgba(255, 196, 122, 0.34); }
.g-page :is(.g-mini-card, .trending-card)[data-category="relationships"] { --theme: #ff9db8; --theme-soft: rgba(255, 157, 184, 0.15); --theme-glow: rgba(255, 157, 184, 0.34); }
.g-page :is(.g-mini-card, .trending-card)[data-category="personality"] { --theme: #c79bff; --theme-soft: rgba(199, 155, 255, 0.15); --theme-glow: rgba(199, 155, 255, 0.36); }

/* ---------- Guess field + name list ---------- */
.guess-box { position: relative; display: flex; gap: 8px; }
.guess-box input {
  flex: 1;
  min-width: 0;
  min-height: 52px;
  padding: 0 16px;
  border: 1.5px solid var(--line);
  border-radius: 14px;
  background: var(--g-field);
  color: var(--ink);
  font-size: 1.05rem;
  outline: none;
}
.guess-box input::placeholder { color: var(--muted); }
.guess-box input:focus { border-color: var(--theme); box-shadow: 0 0 0 4px var(--theme-soft); }
.g-ac-list {
  display: none;
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  right: 0;
  z-index: 30;
  max-height: 290px;
  overflow: auto;
  margin: 0;
  padding: 5px;
  list-style: none;
  border: 1px solid var(--panel-edge);
  border-radius: 14px;
  background: var(--g-solid);
  box-shadow: var(--shadow-modal);
}
.g-ac-list.open { display: block; }
.g-ac-list li { padding: 10px 12px; border-radius: 9px; cursor: pointer; }
.g-ac-list li.active, .g-ac-list li:hover { background: var(--theme-soft); color: var(--ink); }
.guess-meta { display: flex; justify-content: space-between; margin: 10px 2px; font-size: 0.85rem; color: var(--muted); }
.hint-box {
  margin: 10px 0;
  padding: 10px 14px;
  border: 1px dashed var(--theme-glow);
  border-radius: 14px;
  background: var(--theme-soft);
  font-size: 0.95rem;
}
.hint-box b { color: var(--theme); }
.play-again-row { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin: 18px 0; }
.play-again-row .g-answer { width: 100%; }
/* Empty while a puzzle is being played. Its margins still took 36px, which
   on a phone is the difference between the keyboard fitting and not. */
.play-again-row:empty { display: none; }

/* ---------- Kickoff ---------- */
.mystery { display: flex; align-items: center; gap: 14px; padding: 16px; margin-bottom: 14px; }
.mystery-avatar {
  width: 54px;
  height: 54px;
  flex: none;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--theme);
  color: var(--on-theme);
  font-size: 1.6rem;
  font-weight: 800;
  box-shadow: 0 0 24px var(--theme-glow);
}
.g-page .mystery h2 { margin: 0; font-size: 1.1rem; }
.mystery p { margin: 2px 0 0; font-size: 0.9rem; color: var(--muted); }
.kick-head, .kick-row { display: grid; grid-template-columns: 0.8fr 0.7fr 0.9fr 1.6fr; gap: 6px; }
.kick-head {
  margin: 16px 0 6px;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  text-align: center;
  color: var(--muted);
}
.kick-guess { margin-bottom: 12px; animation: g-pop 0.25s ease; }
.kick-name { margin: 0 0 5px 2px; font-weight: 700; }
.cell {
  min-height: 50px;
  padding: 4px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  border-radius: 11px;
  background: var(--g-absent);
  color: var(--g-absent-ink);
  font-weight: 750;
  font-size: 0.92rem;
  line-height: 1.15;
  text-align: center;
}
.cell small { font-size: 0.68rem; font-weight: 650; opacity: 0.85; }
.cell.correct { background: var(--g-correct); color: var(--g-correct-ink); }
.cell.present { background: var(--g-present); color: var(--g-present-ink); }

/* ---------- Outline ---------- */
.shape-card { display: grid; place-items: center; padding: 14px; margin-bottom: 14px; }
.shape-card svg { width: 100%; max-width: 300px; height: auto; aspect-ratio: 1; }
.shape-card path { fill: var(--ink); filter: drop-shadow(0 0 18px var(--theme-glow)); }
.shape-card.solved path { fill: var(--g-correct); }
.o-rows { display: grid; gap: 6px; margin-top: 12px; }
.o-row { display: grid; grid-template-columns: 1fr 96px 42px 54px; gap: 6px; animation: g-pop 0.25s ease; }
.o-row > div {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 10px 6px;
  border: 1px solid var(--line);
  border-radius: 11px;
  background: var(--surface);
  font-weight: 700;
  font-size: 0.92rem;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
.o-row > div:first-child { display: block; padding-inline-start: 12px; overflow: hidden; text-overflow: ellipsis; }
.o-row.win > div { background: var(--g-correct); color: var(--g-correct-ink); border-color: transparent; }
.o-row.empty > div { background: transparent; border-style: dashed; color: transparent; }
.arrow { display: inline-block; font-size: 1.2rem; line-height: 1; }

/* ---------- Daily Word ---------- */
.lang-tabs { display: flex; gap: 6px; padding: 4px; margin-bottom: 12px; border: 1px solid var(--line); border-radius: 14px; background: var(--surface); }
.lang-tabs button {
  flex: 1;
  padding: 6px;
  border: 0;
  border-radius: 10px;
  background: transparent;
  color: var(--muted);
  font-weight: 650;
  cursor: pointer;
}
.lang-tabs button[aria-selected="true"] { background: var(--theme); color: var(--on-theme); }
/* The board is sized by height as well as width. On a phone the on-screen
   keyboard is the only way to type, and a fixed 330px board pushed the whole
   keyboard below a 390x664 screen. 407px is everything that is not board:
   header 60, padding 20, title bar 58, tabs 59, the board's own gaps 30 and
   margin 14, keyboard 158, 8 spare. Change the rows above the board and this
   number has to move with them. Arabic has a fourth key row, 55px more.
   With a mouse there is a real keyboard, so only the board has to fit. */
.board {
  display: grid;
  gap: 6px;
  width: min(100%, clamp(200px, calc((100svh - 407px) * 5 / 6 + 24px), 330px));
  margin: 0 auto 14px;
  container-type: inline-size;
}
.board[dir="rtl"] { width: min(100%, clamp(200px, calc((100svh - 462px) * 5 / 6 + 24px), 330px)); }
@media (hover: hover) and (pointer: fine) {
  .board, .board[dir="rtl"] { width: min(100%, clamp(260px, calc((100svh - 242px) * 5 / 6 + 24px), 380px)); }
}
.board-row { display: grid; grid-template-columns: repeat(5, 1fr); gap: 6px; }
.board[dir="rtl"] .board-row { direction: rtl; }
.tile {
  aspect-ratio: 1;
  display: grid;
  place-items: center;
  border: 2px solid var(--line);
  border-radius: 10px;
  background: var(--g-field);
  font-size: min(2rem, 10cqi);
  font-weight: 800;
  text-transform: uppercase;
  user-select: none;
}
.tile.filled { border-color: var(--muted); animation: g-bump 0.1s ease; }
.tile.correct, .tile.present, .tile.absent { border-color: transparent; }
.tile.correct { background: var(--g-correct); color: var(--g-correct-ink); }
.tile.present { background: var(--g-present); color: var(--g-present-ink); }
.tile.absent { background: var(--g-absent); color: var(--g-absent-ink); }
.tile.flip { animation: g-flip 0.45s ease both; }
.board-row.shake { animation: g-shake 0.4s ease; }
@keyframes g-bump { 50% { transform: scale(1.08); } }
@keyframes g-flip { 50% { transform: rotateX(90deg); } }
@keyframes g-shake { 20%, 60% { transform: translateX(-6px); } 40%, 80% { transform: translateX(6px); } }
.keyboard { display: grid; gap: 7px; user-select: none; }
.kb-row { display: flex; justify-content: center; gap: 5px; }
.key {
  flex: 1;
  max-width: 44px;
  height: 48px;
  padding: 0;
  border: 0;
  border-radius: 8px;
  background: var(--g-key);
  color: var(--ink);
  font-weight: 750;
  font-size: 1rem;
  text-transform: uppercase;
  cursor: pointer;
  touch-action: manipulation;
}
.keyboard[dir="rtl"] .key { max-width: 40px; font-size: 1.15rem; }
.key.wide { flex: 1.6; max-width: 74px; font-size: 0.78rem; }
.keyboard[dir="rtl"] .key.wide { max-width: 120px; font-size: 0.95rem; }
.key.correct { background: var(--g-correct); color: var(--g-correct-ink); }
.key.present { background: var(--g-present); color: var(--g-present-ink); }
.key.absent { background: rgba(20, 15, 40, 0.9); color: var(--muted); }

/* ---------- More or Less ---------- */
.mol-category { text-align: center; margin-bottom: 12px; }
.g-tag {
  display: inline-block;
  padding: 4px 12px;
  border-radius: 999px;
  background: var(--theme);
  color: var(--on-theme);
  font-size: 0.75rem;
  font-weight: 750;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.mol-progress { display: flex; justify-content: center; gap: 5px; margin: 12px 0 18px; }
.mol-progress span { width: 22px; height: 7px; border-radius: 999px; background: var(--g-absent); }
.mol-progress span.ok { background: var(--g-correct); }
.mol-progress span.bad { background: var(--g-miss); }
.mol-progress span.now { background: var(--theme); }
.mol-cards { display: grid; gap: 10px; }
.mol-card { padding: 20px 16px; text-align: center; }
.mol-card .country { font-size: 1.6rem; font-weight: 750; }
.mol-card .value { margin-top: 6px; font-size: 1.3rem; font-weight: 750; font-variant-numeric: tabular-nums; }
.mol-card .value.hidden { color: var(--muted); }
.mol-card.right-ok { border-color: var(--g-correct); box-shadow: 0 0 0 2px var(--g-correct), var(--shadow-sm); }
.mol-card.right-bad { border-color: var(--g-miss); box-shadow: 0 0 0 2px var(--g-miss), var(--shadow-sm); }
.mol-vs { text-align: center; font-size: 0.8rem; font-weight: 750; letter-spacing: 0.1em; color: var(--muted); }
.mol-question { margin: 16px 0 10px; text-align: center; font-weight: 600; text-wrap: balance; }
.mol-buttons { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.mol-buttons .g-btn { min-height: 56px; font-size: 1.1rem; }
.btn-more { background: var(--g-correct); color: var(--g-correct-ink); border-color: transparent; }
.btn-less { background: var(--g-miss); color: #2a0703; border-color: transparent; }
.mol-final { padding: 22px; text-align: center; }
.mol-final .score { font-size: 3rem; font-weight: 800; color: var(--theme); font-variant-numeric: tabular-nums; }

/* ---------- Toonmoji ---------- */
.emoji-card { padding: 22px 12px; margin-bottom: 12px; text-align: center; }
.emoji-row { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; }
.emoji-slot {
  width: 58px;
  height: 58px;
  display: grid;
  place-items: center;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: var(--surface-2);
  font-size: 2rem;
}
.emoji-slot.locked { border-style: dashed; background: transparent; color: var(--muted); font-size: 1.2rem; font-weight: 750; }
.emoji-slot.new { animation: g-pop 0.35s ease; }
.clue-row { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin-top: 14px; }
.clue { padding: 5px 12px; border: 1px solid var(--line); border-radius: 999px; font-size: 0.85rem; font-weight: 650; color: var(--muted); }
.clue.open { border-color: var(--theme-glow); background: var(--theme-soft); color: var(--ink); }
.t-rows { display: grid; gap: 6px; margin-top: 12px; }
.t-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--surface);
  font-weight: 650;
  animation: g-pop 0.25s ease;
}
.t-row.win { background: var(--g-correct); color: var(--g-correct-ink); border-color: transparent; }
.t-row .mark { width: 22px; text-align: center; }
.skip-btn { white-space: nowrap; }
.skip-btn:disabled { opacity: 0.45; cursor: default; }

/* ---------- Career Path ---------- */
.cp-card { padding: 18px 16px; margin-bottom: 12px; }
.cp-path { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.cp-step { display: flex; align-items: center; gap: 10px; min-width: 0; }
.cp-num {
  box-sizing: border-box;
  flex: none;
  width: 28px;
  height: 28px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--theme);
  color: #fff;
  font-weight: 800;
  font-size: 0.9rem;
}
.cp-club {
  flex: 1;
  min-width: 0;
  padding: 5px 12px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--surface-2);
  font-weight: 700;
  overflow-wrap: anywhere;
}
.cp-step.locked .cp-num { background: transparent; border: 2px dashed var(--line); color: var(--muted); }
.cp-step.locked .cp-club { border-style: dashed; background: transparent; color: var(--muted); }
.cp-step.new { animation: g-pop 0.35s ease; }

/* ---------- Games hub ---------- */
.g-hub-meta { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 22px; }
.g-pill {
  padding: 6px 14px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--surface);
  font-size: 0.88rem;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}
.g-pill .g-countdown { font-size: inherit; }
/* Five cards: the first spans two columns, so a three-column grid fills two
   full rows instead of leaving one card alone on the last. */
.g-hub-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
.g-hub-grid > :first-child { grid-column: span 2; }
.g-hub-grid .trending-card-icon { font-size: 1.5rem; }
/* Content from the top, footer on the floor, so the wide first card does not
   spread its three lines of text down the whole row. */
.g-hub-grid .trending-card { justify-content: flex-start; }
.g-hub-grid .trending-card-footer { margin-top: auto; padding-top: 16px; }
.g-status {
  padding: 4px 12px;
  border-radius: 999px;
  background: var(--theme-soft);
  color: var(--theme);
  font-size: 0.8rem;
  font-weight: 700;
  white-space: nowrap;
}
.g-status[data-status="won"] { background: var(--g-correct); color: var(--g-correct-ink); }
.g-status[data-status="lost"] { background: var(--g-absent); color: var(--g-absent-ink); }
.g-status[data-status="playing"] { background: var(--g-present); color: var(--g-present-ink); }
.g-streak { font-size: 0.82rem; font-weight: 650; color: var(--ink-soft); }
@media (max-width: 900px) {
  .g-hub-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 620px) {
  .g-hub-grid { grid-template-columns: 1fr; }
  .g-hub-grid > :first-child { grid-column: auto; }
}

/* The written part under each game, for readers and for search. */
.g-about { margin-top: 40px; padding-top: 24px; border-top: 1px solid var(--line); color: var(--ink-soft); }
.g-page .g-about h2 { margin: 0 0 8px; font-size: 1.15rem; }
.g-about p { margin: 0 0 12px; font-size: 0.95rem; }
.g-about a { color: var(--theme); }

@media (max-width: 380px) {
  .kick-head, .kick-row { gap: 4px; }
  .cell { font-size: 0.82rem; }
  .o-row { grid-template-columns: 1fr 84px 34px 48px; font-size: 0.85rem; }
  .emoji-slot { width: 50px; height: 50px; font-size: 1.7rem; }
}
@media (prefers-reduced-motion: reduce) {
  .g-page *, .g-page *::before, .g-page *::after { animation: none !important; transition: none !important; }
}