/* =========================================================
   MURRAY GAMING — Shared Game Styles
   ========================================================= */

/* ---------------------------------------------------------
   Game page layout
   --------------------------------------------------------- */
.game-page {
  padding-top: calc(var(--nav-h) + 24px);
  padding-bottom: 60px;
  min-height: 100vh;
}

.game-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  margin-bottom: 24px;
  flex-wrap: wrap;
}

.game-header__left h1 {
  font-size: clamp(1.5rem, 3vw, 2.2rem);
  font-weight: 900;
}

.game-header__left .sub {
  font-size: .9rem;
  color: var(--text2);
  margin-top: 4px;
}

.game-header__stats {
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
  align-items: center;
}

/* Mobile top matter — the shared standard for every game page.

   A phone gets the centered title and nothing else above the mode row.
   The genre subtitle and the lifetime stats bar are desktop decoration:
   on a 390px screen they cost ~140px and pushed the actual game below
   the fold, and the shrunk-to-fit stats row they replaced was unreadable
   at .58rem anyway. PiForge's centered title is the model here.

   The stat elements are hidden, not removed, so the per-game JS that
   writes into #statSession / #headerStats keeps working untouched. */
@media (max-width: 640px) {
  html:not(.force-desktop) .game-page { padding-top: calc(var(--nav-h) + 12px); }
  html:not(.force-desktop) .game-header {
    flex-direction: column;
    justify-content: center;
    text-align: center;
    gap: 0;
    margin-bottom: 14px;
  }
  html:not(.force-desktop) .game-header__left { width: 100%; }
  html:not(.force-desktop) .game-header__left .sub,
  html:not(.force-desktop) .game-header__left .subtitle,
  html:not(.force-desktop) .game-header__stats { display: none !important; }
}

.game-stat {
  text-align: center;
  min-width: 64px;
}

.game-stat__value {
  font-size: 1.5rem;
  font-weight: 900;
  line-height: 1;
  color: var(--text);
}

.game-stat__value--fixed {
  min-width: 3.5ch;
  font-variant-numeric: tabular-nums;
}

.game-stat__label {
  font-size: .72rem;
  color: var(--text3);
  text-transform: uppercase;
  letter-spacing: .05em;
  margin-top: 3px;
}

.game-header-guest {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: .82rem;
  color: var(--text2);
  white-space: nowrap;
}
.game-header-guest__icon { font-size: .95rem; }
.game-header-guest__link {
  color: var(--primary);
  font-weight: 700;
  text-decoration: none;
}
.game-header-guest__link:hover { text-decoration: underline; }

/* Hide whatever the game already put in its stats bar rather than remove
   it — a game's own code writes into those tiles by fixed id, and deleting
   the nodes would throw when it next tries to. */
.game-header__stats[data-guest="true"] > *:not(.game-header-guest) {
  display: none !important;
}

/* ---------------------------------------------------------
   Panels / sections
   --------------------------------------------------------- */
.game-panel {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 22px;
  margin-bottom: 18px;
}

.game-panel h2 {
  font-size: 1rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--text2);
  margin-bottom: 16px;
}

/* Greek/math symbols inside uppercase headings must not be case-transformed */
.pi-sym {
  font-family: Georgia, 'Times New Roman', serif !important;
  text-transform: none !important;
  letter-spacing: 0 !important;
  font-style: normal !important;
}

/* ---------------------------------------------------------
   Mode tab pills — shared standard (PiForge-style)
   Each button gets --tab-color inline; Daily auto-greys after play.
   --------------------------------------------------------- */
.tab-pill {
  flex: 1;
  padding: 10px 12px;
  border: 1px solid var(--border2);
  border-radius: var(--radius);
  background: var(--surface2);
  color: var(--text);
  font-weight: 700;
  font-size: .85rem;
  cursor: pointer;
  transition: all var(--t);
  white-space: nowrap;
}
.tab-pill.active {
  background: color-mix(in srgb, var(--tab-color, var(--primary)) 14%, var(--surface2));
  border-color: var(--tab-color, var(--primary)) !important;
  color: var(--tab-color, var(--primary)) !important;
  box-shadow: 0 0 0 1px var(--tab-color, var(--primary));
}
.tab-pill:hover:not(.active) { border-color: var(--tab-color, var(--primary)) !important; }

/* Daily state lives on the mode tab; its dimensions never change.
   Site-wide language:
   - green = today's Daily is still unplayed
   - gold  = viewing a Daily that has progress/a completed result
   - muted = a played/completed Daily while another mode is active */
.tab-pill.tab-daily-progress:not(.active) {
  border-color: var(--border) !important;
  color: var(--text2) !important;
  background: var(--surface2) !important;
  box-shadow: none !important;
}
.tab-pill.tab-daily-unplayed.active,
.tab-pill.tab-daily-unplayed:not(.active) {
  opacity: 1;
  filter: none;
  border-color: #22c55e !important;
  color: #4ade80 !important;
  background: color-mix(in srgb, #22c55e 13%, var(--surface2)) !important;
  box-shadow: 0 0 0 1px rgba(34,197,94,.12);
  cursor: pointer;
  pointer-events: auto;
}
.tab-pill.tab-daily-done {
  opacity: 1;
  filter: none;
  cursor: pointer;
  pointer-events: auto;
}
.tab-pill.tab-daily-progress.active,
.tab-pill.tab-daily-done.active {
  border-color: #e0a800 !important;
  color: #f0c94c !important;
  background: color-mix(in srgb, #e0a800 14%, var(--surface2)) !important;
  box-shadow: 0 0 0 1px #e0a800 !important;
}
.tab-pill.tab-daily-done:not(.active) {
  border-color: var(--border) !important;
  color: var(--text2) !important;
  background: var(--surface2) !important;
  box-shadow: none;
}
.tab-pill:disabled { cursor: not-allowed; pointer-events: none; }

/* Standing "you're not signed in" cue on the Daily tab, layered over
   whichever daily-state color (green/gold/muted) is already showing. */
.tab-pill.tab-daily-guest { position: relative; }
.tab-pill.tab-daily-guest::after {
  content: '⚠️';
  position: absolute;
  top: -6px;
  right: -6px;
  width: 16px;
  height: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: .65rem;
  line-height: 1;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 999px;
}

/* ── In-game nav links (leaderboard + stats) ──────────────── */
.game-nav-actions { margin-left: auto; display: flex; gap: 4px; align-items: center; flex-shrink: 0; padding-left: 6px; }
.game-nav-link {
  display: flex; align-items: center; justify-content: center;
  width: 36px; height: 36px;
  border: 1px solid var(--border2);
  border-radius: 999px;
  background: var(--surface2);
  color: var(--text3);
  text-decoration: none;
  font-size: .95rem;
  transition: background var(--t), border-color var(--t), color var(--t);
}
.game-nav-link:hover { background: var(--surface3); border-color: var(--border); color: var(--text); }

/* Layer-2 shell contracts. Game-specific layout may add rules, but these
   mechanics stay consistent across every registered game. */
.shell-mode-row {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 16px;
}
.shell-mode-row > .game-nav-actions { margin-left: auto; }
.shell-mode-row .shell-mode-action {
  flex: 0 0 auto;
  border-style: dashed;
}
.shell-result-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 10px;
}
.shell-result-primary {
  font-weight: 800;
  border-color: var(--primary, var(--border2)) !important;
}

@media (max-width: 900px) {
  html:not(.force-desktop) .shell-mode-row {
    overflow-x: auto;
    flex-wrap: nowrap !important;
    padding-bottom: 4px;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
  }
  html:not(.force-desktop) .shell-mode-row .tab-pill {
    flex: 0 0 auto;
  }
  /* The pills scroll *underneath* this sticky block, so it needs its own
     opaque backdrop: without one, mode-pill text and colored borders showed
     through the gaps between the circular buttons on every game. The ::before
     gradient fades the incoming pills out instead of cutting them off. */
  html:not(.force-desktop) .shell-mode-row .game-nav-actions {
    position: sticky;
    right: 0;
    z-index: 2;
    background: var(--bg);
    padding-left: 0;
    /* Stretch, or the backdrop is only as tall as the 36px buttons and the
       taller pills' rounded top and bottom edges still show above and below
       them as stray horizontal lines. */
    align-self: stretch;
  }
  html:not(.force-desktop) .shell-mode-row .game-nav-actions::before {
    content: '';
    position: absolute;
    right: 100%;
    top: 0;
    bottom: 0;
    width: 28px;
    background: linear-gradient(to right, transparent, var(--bg) 75%);
    pointer-events: none;
  }
}

/* Leaderboard and stats are cut from the mode row on phones — four circular
   buttons crowded the pills off the screen, and both destinations are already
   in the sidebar nav. Desktop keeps them: there is room there, and unlike the
   sidebar links these deep-link to the game (leaderboard.html#pi_master).
   Matched on destination rather than a class so no page markup has to change.

   A page may have only those two, so the :has() rule drops the whole block in
   that case — otherwise a zero-width sticky element still paints its 28px
   fade over the pills. */
@media (max-width: 640px) {
  html:not(.force-desktop) .game-nav-actions .game-nav-link[href*="leaderboard.html"],
  html:not(.force-desktop) .game-nav-actions .game-nav-link[href*="stats.html"] {
    display: none;
  }
  html:not(.force-desktop) .game-nav-actions:not(:has(
    .game-nav-link:not([href*="leaderboard.html"]):not([href*="stats.html"])
  )) {
    display: none;
  }
}

/* ---------------------------------------------------------
   Score display
   --------------------------------------------------------- */
.score-display {
  font-size: 3rem;
  font-weight: 900;
  line-height: 1;
  background: linear-gradient(135deg, var(--primary), var(--accent2));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* ---------------------------------------------------------
   Timer
   --------------------------------------------------------- */
.timer {
  font-size: 1.3rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: var(--text2);
}

.timer.warning { color: var(--warning); }
.timer.danger  { color: var(--error); }

/* ---------------------------------------------------------
   History / log
   --------------------------------------------------------- */
.history-log {
  max-height: 260px;
  overflow-y: auto;
}

.history-item {
  padding: 8px 0;
  border-bottom: 1px solid var(--border);
  font-size: .88rem;
  display: flex;
  align-items: center;
  gap: 8px;
}

.history-item:last-child { border-bottom: none; }

.history-item.success { color: var(--success); }
.history-item.error   { color: var(--error); }

/* ---------------------------------------------------------
   Feedback messages
   --------------------------------------------------------- */
.feedback {
  min-height: 28px;
  font-size: .95rem;
  font-weight: 600;
  padding: 8px 14px;
  border-radius: var(--radius-sm);
  transition: opacity .2s;
}

.feedback.success {
  background: rgba(67,239,140,.12);
  color: var(--success);
}

.feedback.error {
  background: rgba(255,80,112,.12);
  color: var(--error);
}

.feedback.empty {
  opacity: 0;
}

/* ---------------------------------------------------------
   Score breakdown rows
   --------------------------------------------------------- */
.score-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 8px 0;
  border-bottom: 1px solid var(--border);
  font-size: .93rem;
}

.score-row:last-child { border-bottom: none; }
.score-row__label { color: var(--text2); }
.score-row__value { font-weight: 700; }
.score-row__value.positive { color: var(--success); }
.score-row__value.negative { color: var(--error); }
.score-row__value.total { color: var(--primary); font-size: 1.1rem; }

/* ---------------------------------------------------------
   Tile game (Make 24)
   --------------------------------------------------------- */
.tile {
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 20px;
  background: var(--surface2);
  border: 2px solid var(--border2);
  font-size: 2rem;
  font-weight: 900;
  cursor: pointer;
  user-select: none;
  transition: transform var(--t), background var(--t), border-color var(--t), box-shadow var(--t);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.06);
}

.tile:hover {
  transform: translateY(-2px);
  border-color: var(--border2);
}

.tile.selected {
  background: var(--primary);
  border-color: var(--primary-h);
  color: white;
  box-shadow: 0 0 20px rgba(124,111,247,.5);
}

.tile.op {
  font-size: 1.6rem;
  background: rgba(124,111,247,.1);
  border-color: rgba(124,111,247,.35);
  color: var(--primary);
  cursor: pointer;
  width: 62px;
  height: 62px;
  border-radius: 14px;
}

.tile.op:hover {
  background: rgba(124,111,247,.2);
  border-color: var(--primary);
}

.tile.op.selected {
  background: var(--primary);
  border-color: var(--primary-h);
  color: white;
}

.tile-row {
  display: flex;
  justify-content: center;
  gap: 12px;
  flex-wrap: wrap;
}

.tile-row.current .tile { width: 112px; height: 112px; font-size: 2.6rem; }
.tile-row.history { opacity: .3; transform: scale(.9); pointer-events: none; }
.tile-row.history .tile { width: 64px; height: 64px; font-size: 1.5rem; background: var(--surface3); border-color: var(--border); box-shadow: none; }

@media (max-width: 500px) {
  html:not(.force-desktop) .tile-row.current .tile { width: 66px; height: 66px; font-size: 1.6rem; }
  html:not(.force-desktop) .tile-row.history .tile { width: 50px; height: 50px; font-size: 1.2rem; }
  html:not(.force-desktop) .tile.op { width: 50px; height: 50px; font-size: 1.3rem; }
}

/* ---------------------------------------------------------
   Card game (SET)
   --------------------------------------------------------- */
.set-board {
  display: grid;
  gap: 12px;
  justify-content: center;
}

.set-card {
  background: white;
  border-radius: 14px;
  border: 4px solid transparent;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: transform var(--t), border-color var(--t), box-shadow var(--t);
  user-select: none;
}

.set-card:hover { transform: scale(1.04); }

.set-card.selected {
  border-color: #00bfff;
  box-shadow: 0 0 20px rgba(0,191,255,.5);
  transform: scale(1.06);
}

.set-card__symbols {
  display: flex;
  gap: 8px;
  align-items: center;
}

.set-card.expert { width: 115px; height: 78px; }
.set-card.normal { width: 136px; height: 92px; }

/* Mini set card (found sets display) */
.set-mini-card {
  background: white;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 90px;
  height: 58px;
}

.found-set-row {
  display: inline-flex;
  gap: 6px;
  background: rgba(255,255,255,.05);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 8px 10px;
}

/* ---------------------------------------------------------
   Pi heatmap
   --------------------------------------------------------- */
.pi-heatmap {
  display: flex;
  flex-wrap: wrap;
  gap: 3px;
  padding: 4px;
}

.pi-cell {
  width: 17px;
  height: 17px;
  border-radius: 4px;
  background: var(--surface3);
  cursor: pointer;
  transition: transform .12s;
}

.pi-cell:hover { transform: scale(1.3); }
.pi-cell.strong  { background: #22c55e; }
.pi-cell.unstable{ background: #facc15; }
.pi-cell.weak    { background: #ef4444; }

/* ---------------------------------------------------------
   Pi prompt
   --------------------------------------------------------- */
.pi-prompt {
  font-size: 1.6rem;
  font-weight: 800;
  line-height: 1.7;
  word-break: break-word;
  color: var(--text2);
  font-variant-numeric: tabular-nums;
}

.pi-prompt .known { color: var(--accent2); font-weight: 900; }
.pi-prompt .unknown { color: var(--primary); }

/* ---------------------------------------------------------
   Missing Digit strip
   --------------------------------------------------------- */
.md-strip {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  flex-wrap: nowrap;
  overflow-x: auto;
  overflow-y: visible;
  /* overflow-x:auto forces overflow-y to compute as auto too (CSS quirk), so the
     absolutely-positioned .md-pos-label needs room reserved in the box or it clips. */
  padding: 4px 0 24px;
  margin: 6px 0 10px;
}

.md-digit {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 46px;
  height: 58px;
  font-family: var(--font-mono, monospace);
  font-size: 1.6rem;
  font-weight: 700;
  border-radius: 7px;
  border: 1px solid var(--border2);
  background: var(--surface2);
  color: var(--text2);
  transition: opacity .15s;
}

.md-digit.md-near { opacity: .85; }
.md-digit.md-far  { opacity: .45; }

.md-digit.md-blank {
  width: 56px;
  height: 68px;
  font-size: 1.9rem;
  border: 2px solid var(--primary);
  background: rgba(124,111,247,.13);
  color: var(--primary);
  box-shadow: 0 0 0 3px rgba(124,111,247,.15);
}

.md-digit.md-trio-correct {
  width: 56px;
  height: 68px;
  font-size: 1.9rem;
  border: 2px solid #22c55e;
  background: rgba(34,197,94,.13);
  color: #22c55e;
  box-shadow: 0 0 0 3px rgba(34,197,94,.15);
}

.md-digit.md-trio-wrong {
  width: 56px;
  height: 68px;
  font-size: 1.9rem;
  border: 2px solid #ef4444;
  background: rgba(239,68,68,.13);
  color: #ef4444;
  box-shadow: 0 0 0 3px rgba(239,68,68,.15);
}

.md-digit.md-hidden-future {
  width: 46px;
  height: 58px;
  font-size: 1.4rem;
  border: 1px dashed var(--border2);
  background: var(--surface3);
  color: var(--text3);
  opacity: .55;
}

.md-digit-wrap {
  /* Sized to just the .md-digit child so md-strip's align-items:center
     lines up with the other digit boxes — the label below is positioned
     out of flow so it doesn't factor into that alignment. */
  position: relative;
  display: inline-flex;
}

.md-pos-label {
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  margin-top: 3px;
  white-space: nowrap;
  font-size: .68rem;
  font-weight: 700;
  color: var(--text3);
  letter-spacing: .02em;
}

.md-ellipsis {
  color: var(--text3);
  font-size: 1.2rem;
  line-height: 1;
  padding: 0 2px;
  align-self: flex-end;
  margin-bottom: 10px;
}

/* ---------------------------------------------------------
   Speed Run display
   --------------------------------------------------------- */
.speed-display {
  font-family: var(--font-mono, monospace);
  font-size: 1.45rem;
  font-weight: 700;
  color: var(--text);
  background: var(--surface2);
  border: 1px solid var(--border2);
  border-radius: var(--radius);
  padding: 16px 20px;
  height: 68px;
  width: 100%;
  min-width: 0;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  flex-wrap: nowrap;
  gap: 0;
  margin-bottom: 10px;
  letter-spacing: .1em;
  overflow-x: auto;
  overflow-y: hidden;
  white-space: nowrap;
  scrollbar-width: none;
  transition: background .15s;
}
.speed-display::-webkit-scrollbar { display: none; }
.speed-prefix { color: var(--text3); margin-right: 1px; }
.speed-cursor {
  display: inline-block;
  width: 2px;
  height: 1.5em;
  background: var(--primary);
  border-radius: 2px;
  vertical-align: middle;
  margin-left: 2px;
  animation: blink-cursor 1s step-end infinite;
}
@keyframes blink-cursor { 0%,100%{opacity:1} 50%{opacity:0} }

.speed-prime-zone {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 12px 16px;
  border: 2px dashed var(--border2);
  border-radius: var(--radius);
  color: var(--text3);
  font-size: .88rem;
  cursor: pointer;
  transition: all .2s;
  min-height: 48px;
  outline: none;
  user-select: none;
}
.speed-prime-zone:hover,
.speed-prime-zone:focus { border-color: var(--primary); color: var(--primary); background: rgba(124,111,247,.04); }
.speed-prime-zone.primed { border-color: var(--primary); color: var(--primary); background: rgba(124,111,247,.08); }

@keyframes speed-revert-flash {
  0%   { background: rgba(239,68,68,.18); border-color: rgba(239,68,68,.5); }
  60%  { background: rgba(239,68,68,.06); }
  100% { background: var(--surface2); border-color: var(--border2); }
}
.speed-display.flashing { animation: speed-revert-flash .5s ease forwards; }

/* Speed stats period tabs */
.speed-stat-tabs {
  display: flex;
  gap: 3px;
  background: var(--surface3);
  padding: 4px;
  border-radius: var(--radius);
}
.speed-stat-tab {
  flex: 1;
  padding: 7px 6px;
  border: none;
  border-radius: calc(var(--radius) - 2px);
  background: transparent;
  color: var(--text3);
  font-size: .78rem;
  font-weight: 700;
  cursor: pointer;
  transition: all .15s;
  white-space: nowrap;
}
.speed-stat-tab.active { background: var(--surface1); color: var(--text); box-shadow: 0 1px 4px rgba(0,0,0,.22); }
.speed-stat-tab:hover:not(.active) { color: var(--text2); }

/* ---------------------------------------------------------
   Trainer incremental display
   --------------------------------------------------------- */
.trainer-display {
  font-family: var(--font-mono, monospace);
  font-size: 1.35rem;
  font-weight: 700;
  color: var(--text);
  background: var(--surface2);
  border: 1px solid var(--border2);
  border-radius: var(--radius);
  padding: 14px 18px;
  height: 62px;
  width: 100%;
  min-width: 0;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  flex-wrap: nowrap;
  gap: 0;
  letter-spacing: .09em;
  overflow-x: auto;
  overflow-y: hidden;
  white-space: nowrap;
  scrollbar-width: none;
  transition: background .15s;
}
.trainer-display::-webkit-scrollbar { display: none; }

/* ---------------------------------------------------------
   Trainer revert-drill flash
   --------------------------------------------------------- */
@keyframes trainer-revert-pulse {
  0%   { background: rgba(245,158,11,.22); box-shadow: 0 0 0 4px rgba(245,158,11,.25); }
  55%  { background: rgba(245,158,11,.06); box-shadow: 0 0 0 2px rgba(245,158,11,.1); }
  100% { background: transparent;          box-shadow: none; }
}
.trainer-revert-flash {
  animation: trainer-revert-pulse .56s ease;
  border-radius: var(--radius);
}

/* ---------------------------------------------------------
   Four Fours grid
   --------------------------------------------------------- */
.target-grid {
  display: grid;
  /* Fixed 10 columns so target N always lands in row floor(N/10)+1, column
     (N%10)+1 — decade 0-9/10-19/20-29/... always forms one clean row,
     tiles stretch or narrow to fill the row's width either way. */
  grid-template-columns: repeat(10, 1fr);
  gap: 8px;
}

.target-card {
  background: var(--surface2);
  border: 2px solid var(--border);
  border-radius: var(--radius);
  padding: 10px 8px;
  text-align: center;
  transition: border-color var(--t), background var(--t);
}

.target-card.solved {
  border-color: var(--success);
  background: rgba(67,239,140,.08);
}

.target-card.current {
  border-color: var(--primary);
  background: rgba(124,111,247,.1);
}

.target-card.skipped {
  opacity: .45;
}

.target-card.impossible {
  opacity: .35;
  border-style: dashed;
  border-color: var(--error);
  cursor: default;
}

.target-card.advanced {
  opacity: .6;
  border-style: dashed;
  border-color: #fde68a;
}

.target-card--collapsed {
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: .5;
  border-style: dotted;
  cursor: default;
  font-size: 1.2rem;
  font-weight: 900;
  color: var(--text3);
}

.target-card__num {
  font-size: 1.4rem;
  font-weight: 900;
  line-height: 1;
}

.target-card__expr {
  font-size: .68rem;
  color: var(--text3);
  margin-top: 4px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-height: 14px;
}

/* ---------------------------------------------------------
   Big target display
   --------------------------------------------------------- */
.big-target {
  font-size: 4rem;
  font-weight: 900;
  line-height: 1;
  background: linear-gradient(135deg, var(--primary), var(--accent2));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* ---------------------------------------------------------
   Trophy Case
   --------------------------------------------------------- */

/* Top bar */
.tc-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 18px;
}
.tc-title {
  font-size: 1.05rem;
  font-weight: 800;
  letter-spacing: -.01em;
}
.tc-counts {
  display: flex;
  gap: 14px;
  font-size: .8rem;
  font-weight: 700;
  align-items: center;
}
.tc-counts .tc-b { color: #d4894a; }
.tc-counts .tc-s { color: #b0b8c8; }
.tc-counts .tc-g { color: #f0c830; }
.tc-counts .tc-tot { color: var(--text3); font-weight: 400; font-size: .75rem; }

/* Earned-only toggle */
.tc-toggle {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: .78rem;
  color: var(--text2);
  cursor: pointer;
  user-select: none;
}
.tc-toggle input { accent-color: var(--primary); width: 15px; height: 15px; cursor: pointer; }

/* Category section */
.tc-section { margin-bottom: 28px; }
.tc-section-hdr {
  font-size: .7rem;
  font-weight: 800;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--text3);
  padding: 0 0 8px;
  border-bottom: 1px solid var(--border);
  margin-bottom: 8px;
}

/* Badge card grid */
.tc-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(145px, 1fr));
  gap: 10px;
}

/* Card container */
.tc-row {
  display: flex;
  flex-direction: column;
  border-radius: 12px;
  overflow: hidden;
  background: var(--surface2);
  position: relative;
  transition: transform .18s, box-shadow .18s;
}

/* Unlocked: lift on hover */
.tc-row.unlocked:hover {
  transform: translateY(-3px);
}

/* Locked: dim + no lift */
.tc-row.locked { opacity: .28; }
.tc-row.locked:hover { opacity: .5; transition: opacity .15s; }
.tc-row.locked.tc-admin-preview { opacity: .72; }
.tc-row.locked.tc-admin-preview:hover { opacity: .88; }
.tc-row.locked.tc-admin-preview .tc-icon { filter: grayscale(.2) brightness(.82); }

/* ── Icon area (top of card) ── */
.tc-icon-area {
  height: 96px;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  flex-shrink: 0;
}

/* Locked icon bg */
.tc-row.locked .tc-icon-area {
  background: var(--surface3);
}

/* Unlocked tier-colored gradients */
.tc-row.bronze.unlocked .tc-icon-area {
  background: radial-gradient(ellipse at 50% 80%, #9c4a10 0%, #3a1804 100%);
}
.tc-row.silver.unlocked .tc-icon-area {
  background: radial-gradient(ellipse at 50% 80%, #3a3e58 0%, #141420 100%);
}
.tc-row.gold.unlocked .tc-icon-area {
  background: radial-gradient(ellipse at 50% 80%, #7a5c00 0%, #2a1e00 100%);
}
.tc-row.platinum.unlocked .tc-icon-area {
  background: radial-gradient(ellipse at 50% 80%, #5b4f8f 0%, #171329 100%);
}
.tc-row.diamond.unlocked .tc-icon-area {
  background: radial-gradient(ellipse at 50% 80%, #177e9c 0%, #061d29 100%);
}

/* Shimmer line across the top of the icon area for unlocked */
.tc-row.unlocked .tc-icon-area::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 2px;
}
.tc-row.bronze.unlocked .tc-icon-area::before { background: linear-gradient(90deg, transparent, #e09050, transparent); }
.tc-row.silver.unlocked .tc-icon-area::before { background: linear-gradient(90deg, transparent, #c0c8d8, transparent); }
.tc-row.gold.unlocked   .tc-icon-area::before { background: linear-gradient(90deg, transparent, #f5d040, transparent); }
.tc-row.platinum.unlocked .tc-icon-area::before { background: linear-gradient(90deg, transparent, #d8d0ff, transparent); }
.tc-row.diamond.unlocked  .tc-icon-area::before { background: linear-gradient(90deg, transparent, #8de9ff, transparent); }

/* Emoji */
.tc-icon {
  font-size: 2.8rem;
  line-height: 1;
  filter: drop-shadow(0 2px 6px rgba(0,0,0,.5));
  z-index: 1;
}
.tc-row.locked .tc-icon { filter: grayscale(1) brightness(.45); }

/* Lock icon bottom-right for locked */
.tc-row.locked .tc-icon-area::after {
  content: '🔒';
  position: absolute;
  bottom: 6px; right: 9px;
  font-size: .75rem;
  opacity: .6;
}

/* Tier chip — top-left corner of icon area */
.tc-chip {
  position: absolute;
  top: 8px; left: 9px;
  font-size: .52rem;
  font-weight: 900;
  letter-spacing: .08em;
  text-transform: uppercase;
  padding: 2px 6px;
  border-radius: 3px;
  z-index: 2;
}
.tc-row.bronze .tc-chip { background: rgba(30,12,0,.75); color: #d4894a; border: 1px solid rgba(212,137,74,.55); }
.tc-row.silver .tc-chip { background: rgba(10,10,25,.75); color: #b8c0d0; border: 1px solid rgba(176,184,200,.45); }
.tc-row.gold   .tc-chip { background: rgba(25,18,0,.75); color: #f0c830; border: 1px solid rgba(240,200,48,.55); }
.tc-row.platinum .tc-chip { background: rgba(30,23,58,.85); color: #d8d0ff; border: 1px solid rgba(216,208,255,.5); }
.tc-row.diamond  .tc-chip { background: rgba(4,39,52,.88); color: #8de9ff; border: 1px solid rgba(141,233,255,.55); }

/* Glow ring around unlocked cards */
.tc-row.bronze.unlocked { box-shadow: 0 0 0 1px rgba(212,137,74,.35), 0 6px 20px rgba(180,100,30,.2); }
.tc-row.silver.unlocked { box-shadow: 0 0 0 1px rgba(176,184,200,.28), 0 6px 20px rgba(140,150,180,.15); }
.tc-row.gold.unlocked   { box-shadow: 0 0 0 1px rgba(240,200,48,.4),  0 6px 24px rgba(200,160,0,.22); }
.tc-row.platinum.unlocked { box-shadow: 0 0 0 1px rgba(216,208,255,.4), 0 6px 26px rgba(130,105,220,.24); }
.tc-row.diamond.unlocked  { box-shadow: 0 0 0 1px rgba(141,233,255,.5), 0 6px 28px rgba(30,190,225,.25); }

/* ── Text body (bottom of card) ── */
.tc-body {
  padding: 10px 11px 13px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  flex: 1;
}
.tc-name {
  font-size: .8rem;
  font-weight: 700;
  color: var(--text);
  line-height: 1.25;
}
.tc-row.locked .tc-name { color: var(--text2); }
.tc-desc {
  font-size: .65rem;
  color: var(--text3);
  line-height: 1.3;
  flex: 1;
}
.tc-badge-progress {
  display: grid;
  gap: 4px;
  margin-top: 3px;
}
.tc-badge-progress__track {
  flex: 1; height: 5px; min-width: 36px; background: var(--surface3);
  border-radius: 99px; overflow: hidden;
}
.tc-badge-progress__fill {
  height: 100%; border-radius: inherit;
  background: linear-gradient(90deg, #7c6ff7, #43dea0);
}
.tc-badge-progress__label {
  font-size: .58rem;
  color: var(--text3);
  line-height: 1.25;
  text-align: right;
}
.tc-status {
  font-size: .65rem;
  font-weight: 700;
  margin-top: 2px;
}
.tc-meta-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 6px;
  width: 100%;
}
.tc-meta-row > span {
  color: var(--text3);
  font-size: .59rem;
  font-weight: 500;
  white-space: nowrap;
}
.tc-meta-row > strong {
  font-size: .61rem;
  font-weight: 700;
  text-align: right;
  white-space: nowrap;
}
.tc-rarity-line {
  color: var(--text3);
  font-size: .59rem;
  line-height: 1.25;
  text-align: left;
}
.tc-rarity-line strong {
  color: var(--text2);
  font-size: .61rem;
}
.tc-row.bronze.unlocked .tc-status { color: #d4894a; }
.tc-row.silver.unlocked .tc-status { color: #b8c0d0; }
.tc-row.gold.unlocked   .tc-status { color: #f0c830; }
.tc-row.platinum.unlocked .tc-status { color: #d8d0ff; }
.tc-row.diamond.unlocked  .tc-status { color: #8de9ff; }
.tc-row.locked .tc-status { color: var(--text3); font-weight: 400; font-size: .62rem; }

/* Badge card footer — earned date + % of users */
.tc-footer {
  display: grid;
  width: 100%;
  gap: 4px;
  margin-top: 6px;
  padding-top: 5px;
  border-top: 1px solid rgba(255,255,255,.07);
}
.tc-date {
  font-size: .6rem;
  color: var(--text3);
}
.tc-pct {
  font-size: .6rem;
  color: var(--text3);
  opacity: .7;
}
.tc-row.unlocked .tc-date { color: var(--text2); }
.tc-repeat {
  display: inline-block;
  margin-left: 3px;
  padding: 1px 5px;
  border-radius: 99px;
  background: rgba(124,111,247,.18);
  color: #b8b0ff;
  font-size: .66rem;
  white-space: nowrap;
}
.tc-stack-position {
  font-size: .61rem;
  color: var(--text3);
  font-weight: 700;
}
.tc-stack-arrow {
  position: absolute;
  z-index: 3;
  top: 46px;
  width: 25px;
  height: 32px;
  padding: 0;
  border: 1px solid rgba(255,255,255,.16);
  border-radius: 8px;
  background: rgba(8,8,15,.72);
  color: var(--text);
  font: 700 1.25rem/1 sans-serif;
  cursor: pointer;
  transition: background var(--t), border-color var(--t), opacity var(--t);
}
.tc-stack-arrow:hover:not(:disabled) { background: rgba(124,111,247,.32); border-color: var(--primary); }
.tc-stack-arrow:disabled { opacity: .2; cursor: default; }
.tc-stack-arrow--left { left: 5px; }
.tc-stack-arrow--right { right: 5px; }

/* Earned-only toggle — legacy, superseded by the .tc-pill filter system
   below but left in place until every game's renderer is retrofitted. */
.tc-earned-only .tc-row.locked { display: none; }
.tc-earned-only .tc-section:not(:has(.tc-row.unlocked)) { display: none; }

/* Mystery (hidden) locked cards */
.tc-row.tc-mystery.locked { opacity: .35; }
.tc-row.tc-mystery.locked:hover { opacity: .55; }
.tc-row.tc-mystery .tc-icon-area { background: radial-gradient(ellipse at 50% 80%, #1a0a2e 0%, #08050f 100%); }
.tc-row.tc-mystery .tc-icon-area::before { background: linear-gradient(90deg, transparent, #7c3aed, transparent); }

/* ---------------------------------------------------------
   Trophy Case — shared header (js/trophy-case.js)
   Title | centered per-tier fractions | filter/sort/view pills,
   as three explicit grid columns so the counts are ALWAYS
   centered regardless of title/controls width (flexbox
   space-between doesn't guarantee that with 3 unequal children).
   --------------------------------------------------------- */
.tc-header2 {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 10px 14px;
  margin-bottom: 14px;
}
.tc-header2 .tc-title { justify-self: start; }
.tc-header2 .tc-counts {
  justify-self: center;
  display: flex;
  gap: 14px;
  font-size: .8rem;
  font-weight: 700;
  align-items: center;
  white-space: nowrap;
}
.tc-header2 .tc-controls {
  justify-self: end;
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}
@media (max-width: 700px) {
  .tc-header2 { grid-template-columns: 1fr; text-align: center; }
  .tc-header2 .tc-title, .tc-header2 .tc-counts, .tc-header2 .tc-controls { justify-self: center; }
  .tc-header2 .tc-controls { justify-content: center; }
}

.tc-progress {
  display: flex; align-items: center; gap: 12px; margin-bottom: 18px;
}
.tc-progress__track {
  flex: 1; height: 8px; background: var(--surface3); border-radius: 4px; overflow: hidden;
}
.tc-progress__fill { height: 100%; border-radius: 4px; }
.tc-progress__lbl { font-size: .78rem; font-weight: 800; color: var(--text3); white-space: nowrap; }

/* SET Stats — compact visual dashboard primitives */
.set-stat-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
}
.set-stat-tile {
  min-width: 0;
  padding: 13px 12px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--surface2);
  display: grid;
  grid-template-columns: auto 1fr;
  grid-template-areas: "icon value" "icon label";
  align-items: center;
  column-gap: 9px;
}
.set-stat-icon { grid-area: icon; font-size: 1.25rem; }
.set-stat-tile strong {
  grid-area: value;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  font-size: 1rem;
  color: var(--text);
}
.set-stat-tile > span:last-child {
  grid-area: label;
  color: var(--text3);
  font-size: .65rem;
}
.set-dashboard-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}
.set-visual-card { min-width: 0; }
.set-visual-card .bj-section-title span,
.set-mode-analytic__head span {
  color: var(--text3);
  font-size: .65rem;
  font-weight: 600;
}
.set-mode-summary { display: grid; gap: 6px; }
.set-mode-summary > div {
  display: grid;
  grid-template-columns: minmax(110px, 1fr) auto minmax(76px, auto);
  align-items: center;
  gap: 8px;
  padding: 7px 0;
  border-bottom: 1px solid var(--border);
  font-size: .75rem;
}
.set-mode-summary > div:last-child { border-bottom: 0; }
.set-mode-summary small { color: var(--text3); text-align: right; }
.set-daily-summary,
.set-mini-metrics {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
}
.set-daily-summary > div,
.set-mini-metrics > div {
  min-width: 0;
  text-align: center;
  padding: 10px 5px;
  border-radius: 8px;
  background: var(--surface3);
}
.set-daily-summary strong,
.set-mini-metrics strong {
  display: block;
  font-size: 1rem;
}
.set-daily-summary span,
.set-mini-metrics span {
  display: block;
  margin-top: 3px;
  color: var(--text3);
  font-size: .59rem;
}
.set-ring-row {
  display: grid;
  grid-template-columns: 112px 1fr;
  align-items: center;
  gap: 16px;
}
.set-ring {
  width: 104px;
  aspect-ratio: 1;
  border-radius: 50%;
  display: grid;
  place-content: center;
  text-align: center;
  background:
    radial-gradient(circle closest-side, var(--surface2) 76%, transparent 77% 99%),
    conic-gradient(var(--ring) calc(var(--pct) * 1%), var(--surface3) 0);
}
.set-ring strong { font-size: 1.1rem; }
.set-ring span { color: var(--text3); font-size: .6rem; }
.set-mini-metrics { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.set-metric-bar { margin: 13px 0; }
.set-metric-bar > div:first-child,
.set-dual-value,
.set-grade-bar__head,
.set-period-row > div:first-of-type {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 10px;
  margin-bottom: 5px;
  font-size: .72rem;
}
.set-metric-track,
.set-sample-progress {
  height: 7px;
  overflow: hidden;
  border-radius: 99px;
  background: var(--surface3);
}
.set-metric-track i,
.set-sample-progress i {
  display: block;
  height: 100%;
  border-radius: inherit;
}
.set-sample-progress i { background: linear-gradient(90deg, #7c6ff7, #43dea0); }
.set-mode-analytics {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}
.set-mode-analytic {
  min-width: 0;
  padding: 10px;
  border-radius: 9px;
  background: var(--surface2);
}
.set-mode-analytic__head {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 9px;
  font-size: .73rem;
}
.set-dual-value { color: var(--text2); font-size: .65rem; }
.set-card-heading {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 15px;
}
.set-card-heading > div:first-child { display: grid; gap: 2px; }
.set-card-heading span { color: var(--text3); font-size: .65rem; }
.set-grade-score { font-size: 1.45rem; font-weight: 900; text-align: right; }
.set-grade-score small { display: block; color: var(--text3); font-size: .58rem; }
.set-grade-bars {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px 20px;
  margin-bottom: 16px;
}
.set-grade-bar__head > span { font-size: .75rem; font-weight: 700; }
.set-grade-bar__head small {
  display: block;
  margin-top: 2px;
  color: var(--text3);
  font-size: .58rem;
  font-weight: 500;
}
.set-grade-improve,
.set-grade-scale-wrap {
  padding-top: 14px;
  border-top: 1px solid var(--border);
}
.set-grade-scale-wrap { margin-top: 14px; }
.set-grade-subtitle {
  margin-bottom: 9px;
  font-size: .8rem;
  font-weight: 800;
}
.set-grade-tip-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 6px 12px;
}
.set-grade-tip-grid .pi-tip {
  min-width: 0;
  margin: 0;
}
.set-grade-scale {
  display: grid;
  grid-template-columns: repeat(8, minmax(0, 1fr));
  gap: 7px;
}
.set-grade-scale > div {
  min-width: 0;
  padding: 8px 4px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--surface2);
  text-align: center;
}
.set-grade-scale > div.active {
  border-color: var(--grade-color);
  background: color-mix(in srgb, var(--grade-color) 14%, transparent);
}
.set-grade-scale strong,
.set-grade-scale span,
.set-grade-scale small { display: block; }
.set-grade-scale strong { font-size: 1rem; }
.set-grade-scale span { color: var(--text3); font-size: .58rem; }
.set-grade-scale small { color: var(--text3); font-size: .55rem; }
.set-grade-scale > div.active strong { color: var(--grade-color); }
.set-sample-copy {
  display: grid;
  gap: 3px;
  margin-bottom: 10px;
}
.set-sample-copy strong { font-size: .8rem; }
.set-sample-copy span {
  color: var(--text3);
  font-size: .68rem;
  line-height: 1.4;
}
.set-correlation { padding-top: 8px; text-align: center; }
.set-correlation__labels {
  display: flex;
  justify-content: space-between;
  color: var(--text3);
  font-size: .59rem;
}
.set-correlation__track {
  position: relative;
  height: 9px;
  margin: 5px 0 13px;
  border-radius: 99px;
  background: linear-gradient(90deg, #60a5fa, var(--surface3) 50%, #fbbf24);
}
.set-correlation__track::after {
  content: "";
  position: absolute;
  left: 50%;
  top: -3px;
  width: 1px;
  height: 15px;
  background: var(--text3);
}
.set-correlation__track i {
  position: absolute;
  top: -4px;
  width: 4px;
  height: 17px;
  border-radius: 3px;
  background: #fff;
  transform: translateX(-2px);
}
.set-correlation strong { display: block; font-size: .82rem; }
.set-correlation small { color: var(--text3); }
.set-period-row { margin: 10px 0; }
.set-period-row > strong { display: block; margin-bottom: 3px; font-size: .7rem; }
.set-period-bars { display: grid; gap: 3px; }
.set-period-bars i { display: block; height: 4px; border-radius: 99px; }
.set-tiny-legend {
  display: flex;
  gap: 12px;
  color: var(--text3);
  font-size: .57rem;
}
.set-tiny-legend span::before {
  content: "";
  display: inline-block;
  width: 7px;
  height: 7px;
  margin-right: 4px;
  border-radius: 50%;
  background: var(--dot);
}
.set-insight-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
}
.set-insight-grid > div {
  min-width: 0;
  padding: 12px 10px;
  border-radius: 9px;
  background: var(--surface2);
  display: grid;
  gap: 2px;
}
.set-insight-grid > div > span { font-size: 1.15rem; }
.set-insight-grid strong { font-size: 1.05rem; }
.set-insight-grid b { font-size: .65rem; }
.set-insight-grid small { color: var(--text3); font-size: .58rem; }
.set-insight-note {
  margin: -4px 0 16px;
  color: var(--text3);
  font-size: .64rem;
  text-align: center;
}
@media (max-width: 760px) {
  .set-stat-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .set-dashboard-grid { grid-template-columns: 1fr; }
  .set-mode-analytics { grid-template-columns: 1fr; }
  .set-grade-bars { grid-template-columns: 1fr; }
  .set-grade-tip-grid { grid-template-columns: 1fr; }
  .set-grade-scale { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .set-insight-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 420px) {
  .set-ring-row { grid-template-columns: 92px 1fr; gap: 10px; }
  .set-ring { width: 88px; }
  .set-mini-metrics { grid-template-columns: 1fr; }
  .set-mini-metrics > div { padding: 5px; }
  .set-mode-summary > div { grid-template-columns: 1fr auto; }
  .set-mode-summary small { grid-column: 1 / -1; text-align: left; }
}

/* Filter / sort / view control pills — small click-to-cycle buttons,
   distinct from the larger page-level .tab-pill nav buttons. */
.tc-pill {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 5px 11px; border-radius: 99px;
  font-size: .72rem; font-weight: 700;
  color: var(--text2); background: var(--surface2);
  border: 1px solid var(--border2);
  cursor: pointer; user-select: none; white-space: nowrap;
  transition: background var(--t), color var(--t), border-color var(--t);
}
.tc-pill:hover { color: var(--text); border-color: var(--primary); }
.tc-pill.tc-pill--active {
  background: rgba(124,111,247,.14);
  border-color: var(--primary);
  color: var(--primary);
}
.tc-pill__icon { font-size: .8rem; line-height: 1; }

.tc-admin-toggle {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 5px 8px; border: 1px dashed rgba(245,158,11,.55);
  border-radius: 6px; color: #fbbf24; font-size: .68rem;
  cursor: pointer; user-select: none; white-space: nowrap;
}
.tc-admin-toggle input { margin: 0; accent-color: #f59e0b; }

/* ── View: Condense — smaller cards, icon+chip+name+status only.
   Each .tc-row card carries its own tc-view-condense class (not a
   wrapping ancestor), so every rule below must be a COMBINED selector
   (.tc-row.tc-view-condense ...), not a descendant selector — a plain
   ".tc-view-condense .tc-icon-area" would look for tc-view-condense as
   a *parent*, which it never is. ── */
.tc-grid.tc-view-condense {
  grid-template-columns: repeat(auto-fill, minmax(96px, 1fr));
  gap: 8px;
}
.tc-row.tc-view-condense .tc-icon-area { height: 56px; }
.tc-row.tc-view-condense .tc-icon { font-size: 1.6rem; }
.tc-row.tc-view-condense .tc-body { padding: 7px 8px 9px; gap: 2px; }
.tc-row.tc-view-condense .tc-name { font-size: .68rem; }
.tc-row.tc-view-condense .tc-desc, .tc-row.tc-view-condense .tc-footer { display: none; }
.tc-row.tc-view-condense .tc-status { font-size: .58rem; }
.tc-row.tc-view-condense .tc-chip { font-size: .46rem; padding: 1px 5px; top: 5px; left: 6px; }
.tc-row.tc-view-condense .tc-stack-arrow { top: 17px; width: 21px; height: 27px; }
.tc-row.tc-view-condense .tc-stack-position { font-size: .52rem; }

/* ── View: Compact — one row per badge, no grid. Same combined-selector
   requirement as Condense above. ── */
.tc-grid.tc-view-compact {
  display: flex; flex-direction: column; gap: 5px;
}
.tc-row.tc-view-compact {
  flex-direction: row; align-items: center; border-radius: 8px; gap: 10px; padding: 7px 10px;
}
.tc-row.tc-view-compact .tc-icon-area {
  height: auto; width: auto; flex-shrink: 0; position: static;
  background: none !important; border: none;
}
.tc-row.tc-view-compact .tc-icon-area::before, .tc-row.tc-view-compact .tc-icon-area::after { display: none; }
.tc-row.tc-view-compact .tc-icon { font-size: 1.3rem; filter: none; }
.tc-row.tc-view-compact.locked .tc-icon { filter: grayscale(1) brightness(.55); }
.tc-row.tc-view-compact .tc-chip {
  position: static; margin-right: 6px; flex-shrink: 0;
}
.tc-row.tc-view-compact .tc-body {
  padding: 0; flex-direction: row; align-items: center; gap: 10px; flex: 1; min-width: 0;
}
.tc-row.tc-view-compact .tc-name,
.tc-row.tc-view-compact .tc-desc {
  min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.tc-row.tc-view-compact .tc-name { flex: 1; }
.tc-row.tc-view-compact .tc-desc { display: block; flex: 2; }
.tc-row.tc-view-compact .tc-status { margin: 0; flex-shrink: 0; }
.tc-row.tc-view-compact .tc-footer {
  display: none;
}
.tc-row.tc-view-compact .tc-meta-row { width: auto; }
.tc-row.tc-view-compact .tc-meta-row > span { display: none; }
.tc-row.tc-view-compact .tc-rarity-line { display: none; }
.tc-row.tc-view-compact.tc-stack-card { padding-left: 38px; padding-right: 38px; }
.tc-row.tc-view-compact .tc-stack-arrow { top: 50%; transform: translateY(-50%); width: 25px; height: 29px; }

/* ---------------------------------------------------------
   Badge toast notifications
   --------------------------------------------------------- */
.badge-toast-wrap {
  position: fixed;
  bottom: 24px;
  right: 20px;
  z-index: 9999;
  display: flex;
  flex-direction: column;
  gap: 10px;
  pointer-events: none;
}
.badge-toast {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 13px 14px;
  border-radius: 14px;
  background: var(--surface2, #1e1e2e);
  min-width: 230px;
  max-width: 290px;
  pointer-events: all;
  box-shadow: 0 6px 28px rgba(0,0,0,.55);
  animation: bt-in .32s cubic-bezier(.22,1,.36,1);
}
@keyframes bt-in {
  from { transform: translateX(115%); opacity: 0; }
  to   { transform: translateX(0);    opacity: 1; }
}
.badge-toast.bronze { border-left: 3px solid #d4894a; }
.badge-toast.silver { border-left: 3px solid #b8c0d0; }
.badge-toast.gold   { border-left: 3px solid #f0c830; }
.bt-icon { font-size: 2rem; line-height: 1; flex-shrink: 0; }
.bt-body { flex: 1; min-width: 0; }
.bt-title { font-size: .6rem; font-weight: 800; text-transform: uppercase; letter-spacing: .1em; opacity: .55; margin-bottom: 2px; }
.bt-name  { font-size: .88rem; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bt-chip  { display: inline-block; font-size: .55rem; font-weight: 900; text-transform: uppercase; letter-spacing: .07em; padding: 2px 6px; border-radius: 3px; margin-top: 3px; }
.badge-toast.bronze .bt-chip { background: rgba(30,12,0,.8);  color: #d4894a; border: 1px solid rgba(212,137,74,.5); }
.badge-toast.silver .bt-chip { background: rgba(10,10,25,.8); color: #b8c0d0; border: 1px solid rgba(176,184,200,.4); }
.badge-toast.gold   .bt-chip { background: rgba(25,18,0,.8);  color: #f0c830; border: 1px solid rgba(240,200,48,.5); }
.bt-close { background: none; border: none; cursor: pointer; font-size: 1.2rem; line-height: 1; opacity: .45; color: inherit; padding: 0 0 0 6px; flex-shrink: 0; }
.bt-close:hover { opacity: 1; }

/* ---------------------------------------------------------
   Game complete banner
   --------------------------------------------------------- */
.complete-banner {
  text-align: center;
  padding: 32px;
  background: linear-gradient(135deg, rgba(124,111,247,.12), rgba(67,184,222,.08));
  border: 1px solid rgba(124,111,247,.3);
  border-radius: var(--radius-xl);
}

.complete-banner__icon { font-size: 3rem; margin-bottom: 10px; }
.complete-banner__title { font-size: 1.8rem; font-weight: 900; margin-bottom: 8px; }
.complete-banner__sub { color: var(--text2); margin-bottom: 20px; }

/* ---------------------------------------------------------
   Keyboard shortcut chips
   --------------------------------------------------------- */
.kbd {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 2px 7px;
  border: 1px solid var(--border2);
  border-radius: 5px;
  font-size: .75rem;
  font-weight: 700;
  color: var(--text3);
  background: var(--surface3);
  font-family: monospace;
}

/* ---------------------------------------------------------
   Mode grid (shared by Make 24, Yahtzee, etc.)
   --------------------------------------------------------- */
.mode-grid {
  display: grid;
  grid-template-columns: repeat(var(--mode-cols, 3), 1fr);
  gap: 5px;
  background: rgba(0,0,0,.15);
  padding: 5px;
  border-radius: var(--radius);
}
.mode-btn {
  background: transparent;
  border: none;
  color: var(--text2);
  border-radius: calc(var(--radius) - 4px);
  padding: 9px 4px;
  font-size: .77rem;
  font-weight: 700;
  cursor: pointer;
  transition: all var(--t);
  white-space: nowrap;
}
.mode-btn:hover { color: var(--text); background: rgba(255,255,255,.04); }
.mode-btn.active { background: #fff; color: #000; box-shadow: 0 3px 8px rgba(0,0,0,.2); }

/* ---------------------------------------------------------
   Completed Daily results hub
   --------------------------------------------------------- */
/* Applied synchronously by GameBootstrap for #daily deep links, before the
   game markup can paint. The Daily controller releases it only after the
   correct play/results surface (or matching transition) is installed. */
html.shell-daily-entry-pending .game-page { visibility: hidden; }
body.yz-boot-pending .game-page { visibility: hidden; }

/* Late game initialization can write display:flex/block back onto the prior
   mode after a completed-Daily review opens. The review host owns workspace
   visibility until another mode restores the game's saved inline state. */
.shell-daily-review-host:not(.hidden) ~ * { display: none !important; }

.shell-daily-transition {
  display: grid;
  grid-template-columns: minmax(0, 1.5fr) minmax(320px, .95fr);
  gap: 12px;
  align-items: stretch;
}
.shell-daily-transition .card { margin: 0; }
.shell-daily-transition__personal { min-height: 220px; }
.shell-daily-transition__eyebrow {
  display: block;
  margin-bottom: 8px;
  color: var(--primary);
  font-size: .7rem;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.shell-daily-transition h2 { margin: 0 0 7px; font-size: 1.05rem; }
.shell-daily-transition p { margin: 0; color: var(--text3); font-size: .82rem; }
.shell-daily-transition__lines { display: grid; gap: 9px; margin-top: 28px; }
.shell-daily-transition__lines i,
.shell-daily-transition__board span {
  display: block;
  border-radius: 8px;
  background: linear-gradient(90deg, var(--surface2) 20%, rgba(255,255,255,.08) 45%, var(--surface2) 70%);
  background-size: 220% 100%;
  animation: shell-daily-loading 1.25s ease-in-out infinite;
}
.shell-daily-transition__lines i { height: 16px; }
.shell-daily-transition__lines i:nth-child(2) { width: 82%; }
.shell-daily-transition__lines i:nth-child(3) { width: 64%; }
.shell-daily-transition__board {
  display: grid;
  align-content: start;
  gap: 9px;
  min-height: 220px;
}
.shell-daily-transition__board span { height: 32px; }
@keyframes shell-daily-loading {
  from { background-position: 100% 0; }
  to { background-position: -100% 0; }
}
@media (max-width: 760px) {
  .shell-daily-transition { grid-template-columns: 1fr; }
  .shell-daily-transition__board { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .shell-daily-transition__lines i,
  .shell-daily-transition__board span { animation: none; }
}

.shell-daily-results__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.5fr) minmax(320px, .95fr);
  gap: 12px;
  align-items: start;
}
.shell-daily-results__personal,
.shell-daily-board {
  min-width: 0;
}
.shell-daily-results__head {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  flex-wrap: wrap;
  margin-bottom: 14px;
}
.shell-daily-results__head h2,
.shell-daily-board h2 {
  margin: 0;
  font-size: .94rem;
}
.shell-daily-results__head p {
  margin: 3px 0 0;
  color: var(--text3);
  font-size: .8rem;
}
.shell-daily-results__badge {
  margin-top: 4px;
  color: #ffc847;
  font-weight: 800;
  font-size: .82rem;
}
.shell-daily-results__summary {
  margin-top: 14px;
}
/* Same metrics row, hoisted above the details (see `summaryFirst`). It leads
   instead of closing, so it loses the top gap and takes a bottom one. */
.shell-daily-results__summary.is-lead {
  margin-top: 0;
  margin-bottom: 14px;
}
/* Opt-in hand-off out of a finished Daily back into the game itself
   (`nextAction`) — e.g. 2048's "Play Standard" after today's run. */
.shell-daily-results__next {
  margin-top: 16px;
  padding-top: 14px;
  border-top: 1px solid var(--border);
}
.shell-daily-results__next .btn { width: 100%; }
/* Segmented Daily details: one row per attempt / question / hole / event. */
.shell-daily-runs {
  display: grid;
  gap: 9px;
}
/* Two-up rows for dailies with many short segments (FactQuest's ten facts). */
.shell-daily-runs.is-two-col { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (max-width: 560px) {
  .shell-daily-runs.is-two-col { grid-template-columns: 1fr; }
}
.shell-daily-run {
  display: flex;
  align-items: flex-start;
  gap: 11px;
  padding: 10px 12px;
  border: 1px solid var(--border);
  border-left: 3px solid var(--primary);
  border-radius: 10px;
  background: rgba(255,255,255,.02);
}
.shell-daily-run.is-next    { border-left-color: #ffc847; background: rgba(255,200,71,.06); }
.shell-daily-run.is-locked  { border-left-color: var(--border); opacity: .55; }
.shell-daily-run.is-miss    { border-left-color: #ff5070; background: rgba(255,80,112,.05); }
.shell-daily-run.is-hit     { border-left-color: #43ef8c; background: rgba(67,239,140,.05); }
.shell-daily-run.is-warn    { border-left-color: #ffc847; background: rgba(255,200,71,.06); }
.shell-daily-run__no {
  flex: 0 0 auto;
  min-width: 34px;
  min-height: 34px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1px;
  padding: 5px 7px;
  border-radius: 8px;
  background: rgba(255,255,255,.06);
  color: var(--text3);
  font-size: 1rem;
  font-weight: 800;
  line-height: 1.15;
  text-align: center;
  white-space: nowrap;
}
/* A small annotation under the row number — SET's per-find streak
   multiplier (×2, ×3…) is the first user. Kept off the card face and only
   spelled out ("Set streak for this round") in its own tooltip, on Murray's
   2026-08-14 review: the word "streak" on every row was noise once the
   number badge already reads as one. */
.shell-daily-run__nosub {
  font-size: .64rem;
  font-weight: 800;
  color: #ffc847;
  line-height: 1;
}
/* Right-side ✕ tile for a wrong-guess card (SET) — replaces an "incorrect
   guess" text label that only repeated what the miss state and the tile
   already say (Murray's 2026-08-14 review). Sits in the same action slot a
   found row's stat block or a replay button would. */
.shell-daily-run__miss {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 8px;
}
.shell-daily-run__misstile {
  flex: 0 0 auto;
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
  border: 2px solid rgba(255,80,112,.5);
  background: rgba(255,80,112,.08);
  color: #ff5070;
  font-size: 1.2rem;
  font-weight: 900;
  line-height: 1;
}
.shell-daily-run__main { flex: 1 1 auto; min-width: 0; }
.shell-daily-run__head {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 8px;
}
.shell-daily-run__title {
  color: var(--text);
  font-weight: 700;
  font-size: .95rem;
}
.shell-daily-run__title small {
  color: var(--text3);
  font-size: .68rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .06em;
}
.shell-daily-run__sub {
  color: #ffc847;
  font-size: .74rem;
  font-weight: 700;
}
.shell-daily-run__facts {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 12px;
  margin-top: 3px;
  color: var(--text3);
  font-size: .76rem;
}
.shell-daily-run__columns {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(68px, 1fr));
  gap: 6px;
  margin-top: 8px;
}
.shell-daily-run__column {
  min-width: 0;
  padding: 6px 7px;
  border-radius: 7px;
  background: rgba(255,255,255,.04);
  text-align: center;
}
.shell-daily-run__column span {
  display: block;
  color: var(--text3);
  font-size: .57rem;
  font-weight: 850;
  letter-spacing: .06em;
  text-transform: uppercase;
}
.shell-daily-run__column b {
  display: block;
  margin-top: 2px;
  color: var(--text);
  font-size: .84rem;
  overflow-wrap: anywhere;
}
.shell-daily-run__column.is-emphasis b {
  font-size: 1.08rem;
  font-weight: 900;
}
.shell-daily-run__column b.is-hit { color:#43ef8c; }
.shell-daily-run__column b.is-miss { color:#ff5070; }
.shell-daily-run__column b.is-warn { color:#ffc847; }
.shell-daily-geosafari-result {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 156px;
  align-items: stretch;
  gap: 11px;
}
.shell-daily-geosafari-result.is-no-map { grid-template-columns: 1fr; }
.shell-daily-geosafari-result .shell-daily-run__columns {
  grid-template-columns: minmax(92px, 1.2fr) repeat(3, minmax(68px, 1fr));
  grid-template-rows: repeat(2, minmax(0, 1fr));
}
.shell-daily-geosafari-result .geo-result-answer {
  grid-column: 1;
  grid-row: 1 / 3;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.shell-daily-geosafari-result .geo-result-symbol { grid-column: 2; grid-row: 1; padding-inline: 3px; }
.shell-daily-geosafari-result .geo-result-symbol b { font-size: 1.1rem; }
.shell-daily-geosafari-result .geo-result-points { grid-column: 3; grid-row: 1; }
.shell-daily-geosafari-result .geo-result-response { grid-column: 4; grid-row: 1; }
.shell-daily-geosafari-result .geo-result-public-pct { grid-column: 2; grid-row: 2; }
.shell-daily-geosafari-result .geo-result-public-avg { grid-column: 3; grid-row: 2; }
.shell-daily-geosafari-result .geo-result-public-response { grid-column: 4; grid-row: 2; }
.shell-daily-geosafari-result .geo-result-symbol[title] { cursor: help; }
@media (max-width: 720px) {
  .shell-daily-geosafari-result .shell-daily-run__columns {
    grid-template-columns: minmax(80px, 1fr) repeat(3, minmax(58px, 1fr));
  }
}
.shell-daily-geosafari-map {
  width: 100%;
  height: auto;
  margin-top: 8px;
  pointer-events: none;
  user-select: none;
}
.shell-daily-geosafari-map img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border: 1px solid var(--border);
  border-radius: 9px;
  overflow: hidden;
}
@media (max-width: 720px) {
  .shell-daily-geosafari-result { grid-template-columns: minmax(0, 1fr) 112px; }
}
.shell-daily-run__chips {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin-top: 7px;
}
.shell-daily-chip {
  display: inline-flex;
  align-items: baseline;
  gap: 4px;
  padding: 2px 6px;
  border-radius: 5px;
  background: rgba(255,255,255,.05);
  color: var(--text2);
  font-size: .72rem;
  font-variant-numeric: tabular-nums;
}
.shell-daily-chip b {
  color: var(--text3);
  font-size: .62rem;
  font-weight: 800;
  text-transform: uppercase;
}
.shell-daily-chip.is-zero { color: var(--text3); opacity: .7; }
.shell-daily-chip.is-star { background: rgba(255,200,71,.16); color: #ffc847; }
.shell-daily-chip.is-hit  { background: rgba(67,239,140,.14); color: #43ef8c; }
.shell-daily-chip.is-miss { background: rgba(255,80,112,.14); color: #ff5070; }
.shell-daily-gap {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin: -2px 0;
  padding: 3px 0;
  color: var(--text3);
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
}
.shell-daily-gap::before,
.shell-daily-gap::after {
  content: "";
  flex: 0 0 28px;
  border-top: 2px dashed var(--border2);
}
.shell-daily-route {
  margin-top: 10px;
  padding: 9px 12px;
  border: 1px solid var(--border);
  border-radius: 9px;
  background: rgba(255,255,255,.02);
}
.shell-daily-route__label {
  color: var(--text3);
  font-size: .64rem;
  font-weight: 800;
  letter-spacing: .07em;
  text-transform: uppercase;
  margin-bottom: 6px;
}
.shell-daily-route__path {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  gap: .5em;
  font-size: 1.02rem;
}
.shell-daily-route__word,
.shell-daily-route__arrow {
  flex: 0 0 auto;
}
.shell-daily-route__word {
  padding: .35em .7em;
  border-radius: .4em;
  background: rgba(255,255,255,.05);
  color: var(--text2);
  font-size: 1em;
  font-weight: 700;
  letter-spacing: .04em;
  white-space: nowrap;
}
.shell-daily-route__word.is-best   { background: rgba(67,239,140,.14); color: #43ef8c; }
.shell-daily-route__word.is-onward { background: rgba(56,189,248,.14); color: #38bdf8; }
.shell-daily-route__word.is-miss   { background: rgba(255,80,112,.14); color: #ff5070; }
/* The part of a route that wasn't played — must come after the tone rules. */
.shell-daily-route__word.is-projected {
  background: transparent;
  border: 1px dashed var(--border2);
  color: var(--text3);
}
.shell-daily-route__arrow { color: var(--text3); font-size: .93em; }
.shell-daily-board__missing {
  padding: 9px 12px;
  border: 1px dashed var(--border2);
  border-radius: 8px;
  color: var(--text3);
  font-size: .78rem;
  text-align: center;
}
.shell-daily-nums { display: inline-flex; gap: 4px; }
.shell-daily-nums span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 26px;
  height: 26px;
  padding: 0 5px;
  border-radius: 6px;
  background: rgba(67,184,222,.15);
  color: #43b8de;
  font-size: .85rem;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
}
.shell-daily-element {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 42px;
  height: 42px;
  margin-right: 5px;
  border: 1px solid rgba(6,214,160,.45);
  border-radius: 8px;
  background: rgba(6,214,160,.13);
  color: #43efc0;
  font-size: 1.2rem;
  font-weight: 900;
}
.shell-daily-year {
  display: inline-block;
  min-width: 54px;
  margin-right: 5px;
  color: #a78bfa;
  font-size: 1.08rem;
  font-weight: 900;
  font-variant-numeric: tabular-nums;
}
.shell-daily-match-setup {
  margin-top: 14px;
}
.shell-daily-match-setup > .shell-daily-run__columns {
  margin-top: 0;
}
.shell-daily-treasure {
  display: inline-block;
  min-width: 34px;
  font-size: 1.4rem;
  text-align: center;
}
.shell-daily-empty-move {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 24px;
  padding: 3px 12px;
  border: 1px solid var(--border);
  border-radius: 7px;
  background: rgba(255,255,255,.018);
  color: var(--text3);
  font-size: .68rem;
}
.shell-daily-empty-move b {
  min-width: 46px;
  color: var(--text2);
  font-size: .68rem;
  font-variant-numeric: tabular-nums;
}
.shell-daily-scorecard-row {
  display: grid;
  grid-template-columns: 92px minmax(0,1fr);
  align-items: center;
  gap: 8px;
  margin-top: 7px;
}
.shell-daily-scorecard-row > b {
  color: var(--text3);
  font-size: .65rem;
  text-transform: uppercase;
}
.shell-daily-scorecard-row .shell-daily-cells {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(30px,1fr));
  margin-top: 0;
}
.shell-daily-run__facts code {
  padding: 1px 5px;
  border-radius: 4px;
  background: rgba(255,255,255,.06);
  font-size: .74rem;
}
.shell-daily-run__facts code.shell-daily-expression {
  color: var(--text);
  font-size: 1rem;
  font-weight: 800;
}
.shell-daily-expression-wrap {
  position: relative;
  display: inline-block;
  cursor: help;
  outline: none;
}
.shell-daily-expression-tip {
  position: absolute;
  z-index: 20;
  top: calc(100% + 7px);
  left: 0;
  display: none;
  min-width: 220px;
  max-width: min(360px, 75vw);
  padding: 7px;
  border: 1px solid var(--border2);
  border-radius: 8px;
  background: var(--surface);
  box-shadow: 0 12px 30px rgba(0,0,0,.42);
}
.shell-daily-expression-wrap:hover .shell-daily-expression-tip,
.shell-daily-expression-wrap:focus .shell-daily-expression-tip,
.shell-daily-expression-wrap:focus-within .shell-daily-expression-tip {
  display: grid;
  gap: 5px;
}
.shell-daily-expression-step {
  display: grid;
  grid-template-columns: 24px minmax(0,1fr);
  align-items: center;
  gap: 7px;
  padding: 5px 7px;
  border-radius: 6px;
  background: rgba(255,255,255,.05);
  color: var(--text);
  font-size: .8rem;
  white-space: nowrap;
}
.shell-daily-expression-step > b {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border-radius: 6px;
  background: rgba(124,111,247,.2);
  color: #a99cff;
  font-size: .72rem;
}
.shell-daily-rung { display: inline-flex; gap: 4px; }
.shell-daily-rung__letter {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 32px;
  border-radius: 6px;
  background: rgba(255,255,255,.05);
  color: var(--text2);
  font-size: 1.15rem;
  font-weight: 700;
  letter-spacing: 0;
  text-transform: uppercase;
}
.shell-daily-rung__letter.is-changed {
  background: rgba(56,189,248,.18);
  color: #38bdf8;
}
.shell-daily-setcards { display: inline-flex; gap: 8px; align-items: center; }
.shell-daily-setcard {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 42px;
  padding: 3px 6px;
  border: 1px solid var(--border2);
  border-radius: 6px;
  background: rgba(255,255,255,.03);
  gap: 1px;
  line-height: 1.3;
}
/* SET-specific: this class is shared with Blackjack's plain-text hand
   display (js/daily-review.js), where min-width is fine since every card is
   roughly the same short string. SET's cards hold 1-3 shape glyphs, so
   min-width alone lets a 2/3-shape card grow past a 1-shape card instead of
   staying uniform. .shell-daily-setcard--set fixes the width (sized for the
   3-shape case: 3 * 18px shape + 2 * 1px gap + padding + border) without
   touching Blackjack's use of the shared base class. */
.shell-daily-setcard--set {
  width: 72px;
  box-sizing: border-box;
}
.shell-daily-setcard > span {
  width: 18px;
  height: 36px;
  display: inline-flex;
}
.shell-daily-setcard svg {
  width: 100%;
  height: 100%;
  overflow: visible;
}
.shell-daily-run.is-set-find .shell-daily-run__main {
  display: grid;
  grid-template-columns: minmax(210px, 1fr) minmax(250px, .9fr);
  align-items: center;
  gap: 8px;
}
.shell-daily-run.is-set-find .shell-daily-run__columns {
  grid-template-columns: repeat(4, minmax(54px, 1fr));
  margin-top: 0;
}
.shell-daily-run.is-set-find .shell-daily-run__column {
  padding-inline: 4px;
}
.shell-daily-run.is-set-find .shell-daily-run__column span {
  letter-spacing: .025em;
}
@media (max-width: 680px) {
  .shell-daily-run.is-set-find .shell-daily-run__main {
    grid-template-columns: 1fr;
  }
  .shell-daily-run.is-set-find .shell-daily-run__columns { margin-top: 7px; }
}
.shell-daily-legacy {
  margin-top: 10px;
  padding: 8px 11px;
  border: 1px dashed var(--border2);
  border-radius: 8px;
  color: var(--text3);
  font-size: .76rem;
}
/* SET's Daily results: the sets nobody found nor guessed at, shown after the
   fact once the board itself is safe to reveal (Murray's 2026-08-15 review). */
.shell-daily-missed {
  margin-top: 12px;
  padding: 10px 11px;
  border: 1px solid var(--border2);
  border-radius: 8px;
  background: rgba(255,255,255,.02);
}
.shell-daily-missed__label {
  font-size: .72rem;
  font-weight: 800;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--text3);
  margin-bottom: 8px;
}
.shell-daily-cells {
  display: flex;
  flex-wrap: wrap;
  gap: 3px;
  margin-top: 8px;
}
.shell-daily-cell {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: 1px;
  min-width: 30px;
  padding: 3px 4px;
  border-radius: 6px;
  background: rgba(255,255,255,.04);
  line-height: 1;
}
.shell-daily-cell i {
  font-size: .85rem;
  font-style: normal;
  opacity: .75;
}
.shell-daily-cell b {
  color: var(--text2);
  font-size: .78rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}
.shell-daily-cell.is-zero { opacity: .38; }
.shell-daily-cell.is-star { background: rgba(255,200,71,.16); }
.shell-daily-cell.is-star b { color: #ffc847; }
.shell-daily-run__act { flex: 0 0 auto; align-self: center; }
/* Up to a few label/value rows in a card's own right-side action slot — a
   per-item public comparison (Make 24: public %/avg score/avg time on each
   puzzle) that's too much for the single-line facts strip. */
.shell-daily-run__stats {
  display: flex; flex-direction: column; gap: 4px;
  align-items: flex-end; text-align: right;
}
.shell-daily-timing-widget { margin-top: 10px; padding: 10px 12px; border: 1px solid var(--border2); border-radius: 10px; background: var(--surface2); }
.shell-daily-timing-stats { display: flex; flex-wrap: wrap; gap: 8px; }
.shell-daily-timing-stats .shell-daily-metric { min-width: 90px; }
.shell-daily-timing-bars { display: flex; align-items: flex-end; gap: 3px; height: 58px; margin-top: 10px; padding: 0 3px; border-bottom: 1px solid var(--border2); }
.shell-daily-timing-bar { flex: 1; min-width: 4px; background: var(--primary); border-radius: 3px 3px 0 0; opacity: .8; }
.shell-daily-timing-axis { display: flex; justify-content: space-between; color: var(--text3); font-size: .68rem; margin-top: 3px; }
.shell-daily-run__stat {
  display: flex; align-items: baseline; gap: 7px; white-space: nowrap;
}
.shell-daily-run__stat span {
  color: var(--text3); font-size: .66rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: .02em;
}
.shell-daily-run__stat b {
  color: var(--text2); font-size: .82rem; font-weight: 800;
  font-variant-numeric: tabular-nums;
}
/* Share sits at the top of the card, above the streak — the first thing you
   reach for once the result is on screen. */
.shell-daily-results__heading { flex: 1 1 220px; min-width: 0; }
.shell-daily-results__aside {
  display: flex;
  align-items: center;
  gap: 10px;
  flex: 0 0 auto;
}
.shell-daily-results__aside[hidden] { display: none; }
.shell-daily-results__number {
  display: flex;
  align-items: baseline;
  gap: 2px;
  color: var(--text);
  font-size: 2rem;
  font-weight: 900;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}
.shell-daily-results__number span {
  color: var(--text3);
  font-size: .9rem;
  font-weight: 800;
}
.shell-daily-share {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 7px 14px 7px 11px;
  border: 1px solid transparent;
  border-radius: 999px;
  background:
    linear-gradient(var(--surface2), var(--surface2)) padding-box,
    linear-gradient(120deg, var(--primary, #7c6ff7), #43efc0) border-box;
  color: var(--text);
  font: inherit;
  font-size: .82rem;
  font-weight: 700;
  letter-spacing: .01em;
  cursor: pointer;
  transition: transform var(--t), box-shadow var(--t), color var(--t);
}
.shell-daily-share:hover:not(:disabled) {
  transform: translateY(-1px);
  box-shadow: 0 6px 18px rgba(124,111,247,.28);
}
.shell-daily-share:active:not(:disabled) { transform: translateY(0); }
.shell-daily-share:disabled { cursor: default; }
.shell-daily-share__icon { font-size: .95rem; line-height: 1; }
/* The fill layer must stay OPAQUE: it sits over the gradient border layer, so
   a translucent fill lets the border gradient flood the whole pill and the
   label disappears into it. */
.shell-daily-share.is-copied {
  color: #43ef8c;
  background:
    linear-gradient(color-mix(in srgb, #43ef8c 12%, var(--surface2)), color-mix(in srgb, #43ef8c 12%, var(--surface2))) padding-box,
    linear-gradient(120deg, #43ef8c, #43efc0) border-box;
  opacity: 1;
}
.shell-daily-detail-list {
  display: grid;
  gap: 9px;
}
.shell-daily-detail-list.is-inline {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
.shell-daily-detail-list.is-inline-3 {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
.shell-daily-detail-list.is-inline-3 .shell-daily-detail__value {
  text-align: center;
  font-size: 1.15rem;
  font-weight: 800;
}
.shell-daily-detail-list.is-inline-3 .shell-daily-detail__label {
  text-align: center;
}
@media (max-width: 480px) {
  .shell-daily-detail-list.is-inline-3 { grid-template-columns: 1fr; }
}
.shell-daily-detail {
  padding: 11px 13px;
  border: 1px solid var(--border2);
  border-left: 3px solid #7c6ff7;
  border-radius: 10px;
  background: linear-gradient(135deg, rgba(124,111,247,.10), rgba(0,0,0,.18));
}
.shell-daily-detail__label {
  margin-bottom: 4px;
  color: var(--text3);
  font-size: .66rem;
  font-weight: 850;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.shell-daily-detail__value {
  color: var(--text);
  font-size: .94rem;
  font-weight: 720;
  overflow-wrap: anywhere;
}
.shell-daily-public-answer {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  padding: 5px 0;
  border-top: 1px solid var(--border);
}
.shell-daily-public-answer code { color:#43ef8c; overflow-wrap:anywhere; }
.shell-daily-public-answer.is-wrong code { color:#ff5070; }
.shell-daily-public-answer span { color:var(--text3); font-size:.7rem; white-space:nowrap; }
.shell-daily-metrics {
  display: flex;
  align-items: stretch;
  gap: 9px;
  flex-wrap: wrap;
  padding: 12px;
  border: 1px solid rgba(67,239,140,.28);
  border-radius: 11px;
  background: rgba(67,239,140,.07);
}
.shell-daily-metric {
  flex: 1 1 80px;
  min-width: 70px;
  text-align: center;
}
.shell-daily-metric strong {
  display: block;
  color: var(--text);
  font-size: 1.15rem;
  font-variant-numeric: tabular-nums;
}
.shell-daily-metric span {
  display: block;
  margin-top: 3px;
  color: var(--text3);
  font-size: .62rem;
  font-weight: 800;
  letter-spacing: .07em;
  text-transform: uppercase;
}
.shell-daily-metric-wl {
  flex: 0 0 auto;
  min-width: 40px;
}
.shell-daily-metric-wl strong {
  font-size: 1.9rem;
  font-weight: 900;
}
.shell-daily-metric-wl.is-win strong { color: #43ef8c; }
.shell-daily-metric-wl.is-loss strong { color: #ff5070; }
.shell-daily-metrics__action {
  align-self: center;
}
/* Pre-play hub (DAILY_MODE_AUDIT.md item 1): a game's view() can split its
   summary into a public "today, everyone" bar and a personal "your history"
   bar underneath, rather than one bar mixing both. */
.shell-daily-metrics-group {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  gap: 10px;
}
.shell-daily-metrics-block {
  flex: 1 1 240px;
  min-width: 0;
}
.shell-daily-metrics-block__label {
  font-size: .62rem;
  font-weight: 800;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: var(--text3);
  margin-bottom: 5px;
}
.shell-daily-metrics--personal {
  border-color: rgba(122, 162, 255, .28);
  background: rgba(122, 162, 255, .07);
}
/* Split-bar tiles (Your history / Today, everyone) run narrower than a
   single mixed bar's, since a block only gets half the row's width and
   some games' bars carry four or five tiles — narrower tiles plus a
   tighter gap keeps a bar's tiles on one row instead of wrapping to a
   second, matching short one-word labels (Murray's 2026-08-15 review). */
.shell-daily-metrics-group .shell-daily-metrics {
  gap: 6px;
}
.shell-daily-metrics-group .shell-daily-metric {
  /* Four tiles must fit in each half of a split summary (FactQuest has
     four). Let the available width decide instead of forcing a second row. */
  flex: 1 1 0;
  min-width: 0;
}
/* A two-word label ("avg correct", "avg mistakes") was wrapping to a second
   line at the split bar's narrower tile width (Murray's 2026-08-15 review) —
   smaller text and tighter tracking buys back the room a single-word label
   never needed. */
.shell-daily-metrics-group .shell-daily-metric span {
  font-size: .53rem;
  letter-spacing: .015em;
  white-space: nowrap;
}
.shell-daily-metrics-group .shell-daily-metric strong {
  font-size: 1.02rem;
}
.shell-daily-board {
  display: flex;
  flex-direction: column;
  align-self: start;
  padding-inline: 18px;
}
.shell-daily-board__heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}
.shell-daily-board__nav {
  display: flex;
  gap: 4px;
  flex: none;
}
.shell-daily-board__nav-btn {
  min-width: 26px;
  height: 24px;
  padding: 0 6px;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: transparent;
  color: var(--text2);
  font-size: .78rem;
  line-height: 1;
  cursor: pointer;
}
.shell-daily-board__nav-btn:hover:not(:disabled) {
  background: var(--surface2);
}
.shell-daily-board__nav-btn:disabled {
  opacity: .35;
  cursor: default;
}
.shell-daily-board__table-wrap {
  margin-top: 10px;
}
.shell-daily-board__table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0 5px;
  table-layout: fixed;
  font-size: .82rem;
  font-variant-numeric: tabular-nums;
}
.shell-daily-board__table th {
  padding: 0 5px 5px;
  color: var(--text3);
  font-size: .62rem;
  font-weight: 800;
  letter-spacing: .06em;
  text-align: center;
  text-transform: uppercase;
  white-space: nowrap;
}
.shell-daily-board.is-compact .shell-daily-board__table {
  font-size: .75rem;
}
.shell-daily-board.is-compact .shell-daily-board__table th {
  padding-inline: 2px;
  font-size: .54rem;
  letter-spacing: .025em;
}
.shell-daily-board.is-compact .shell-daily-board__table td {
  padding-inline: 2px;
}
.shell-daily-board__table td {
  padding: 9px 5px;
  background: rgba(255,255,255,.045);
  text-align: center;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.shell-daily-board__table td:first-child { border-radius: 8px 0 0 8px; }
.shell-daily-board__table td:last-child { border-radius: 0 8px 8px 0; }
.shell-daily-board__table tr.is-me td {
  background: rgba(124,111,247,.16);
  box-shadow: inset 0 1px rgba(169,156,255,.18), inset 0 -1px rgba(169,156,255,.18);
}
.shell-daily-board__rank {
  width: 38px;
  text-align: center !important;
}
.shell-daily-board__player {
  width: var(--daily-board-player-width, 42%);
  text-align: left !important;
  font-weight: 750;
}
.shell-daily-board .is-left { text-align: left !important; }
.shell-daily-board .is-right { text-align: right !important; }
.shell-daily-board__table th.is-sortable {
  cursor: pointer;
  user-select: none;
}
.shell-daily-board__table th.is-sortable:hover,
.shell-daily-board__table th.is-sorted {
  color: #a99cff;
}
.shell-daily-board__table th.is-sorted[data-sort-direction="asc"]::after { content: " ▲"; }
.shell-daily-board__table th.is-sorted[data-sort-direction="desc"]::after { content: " ▼"; }
.shell-daily-board__empty {
  padding: 28px 8px;
  color: var(--text3);
  text-align: center;
  font-size: .84rem;
}
.shell-daily-board__pinned {
  margin-top: auto;
  padding-top: 8px;
  border-top: 1px dashed rgba(169,156,255,.45);
}
.shell-daily-board__pinned-label {
  margin-bottom: 5px;
  color: #a99cff;
  font-size: .62rem;
  font-weight: 900;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.shell-daily-board__row {
  display: grid;
  grid-template-columns: 38px minmax(64px, var(--daily-board-player-width, 1fr)) repeat(var(--daily-board-values, 1), minmax(42px, auto));
  align-items: center;
  gap: 5px;
  min-height: 40px;
  padding: 4px 5px;
  border: 1px solid rgba(169,156,255,.55);
  border-radius: 9px;
  background: linear-gradient(90deg, rgba(124,111,247,.24), rgba(124,111,247,.10));
  font-size: .82rem;
  font-variant-numeric: tabular-nums;
}
.shell-daily-board__row > span:not(.shell-daily-board__player):not(.shell-daily-board__rank) {
  text-align: right;
}
.shell-daily-board__all {
  display: inline-block;
  align-self: flex-end;
  margin-top: 10px;
  color: #a99cff;
  font-size: .76rem;
  font-weight: 750;
}
@media (max-width: 900px) {
  .shell-daily-results__grid { grid-template-columns: 1fr; }
  .shell-daily-board { min-height: 0 !important; }
}

/* =========================================================
   Blackjack results comparison — js/bj-results.js
   Lives here rather than in games/blackjack.html because two hosts draw
   the same panel: the in-game results box and the completed-Daily
   review board (js/daily-review.js), which renders inside the shared
   shell on the game page.
   ========================================================= */
.bj-res-head    { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 14px; }
.bj-res-errlab  { font-size: .68rem; text-transform: uppercase; letter-spacing: .05em; color: var(--text3); margin-bottom: 2px; }
.bj-res-errval  { font-size: 1.4rem; font-weight: 900; line-height: 1; }
.bj-res-foot    { display: flex; justify-content: space-between; align-items: center; gap: 10px;
                  border-top: 1px solid var(--border); padding-top: 9px; font-size: .72rem; color: var(--text3); }

/* Two aligned 100% stacked bars: your split over the simulated split. */
.bj-split       { display: grid; grid-template-columns: 46px 1fr; gap: 5px 9px; align-items: center; }
.bj-split-lab   { font-size: .68rem; text-transform: uppercase; letter-spacing: .05em; color: var(--text3); font-weight: 800; text-align: right; }
/* The Public row's player-count, under the label rather than beside it —
   the 46px label column is too narrow for "PUBLIC (12 players)" on one line. */
.bj-split-lab-sub { display: block; font-style: normal; font-size: .58rem; font-weight: 700;
                    text-transform: none; letter-spacing: normal; margin-top: 1px; }
.bj-split-bar   { display: flex; height: 24px; border-radius: 6px; overflow: hidden; background: var(--surface3); }
.bj-split-seg   { display: flex; align-items: center; justify-content: center; min-width: 0; overflow: hidden;
                  white-space: nowrap; font-size: .7rem; font-weight: 800; }
.bj-split-note  { grid-column: 2; font-size: .7rem; color: var(--text3); }

.bj-legend      { display: flex; flex-wrap: wrap; gap: 4px 14px; margin: 10px 0 14px; font-size: .72rem; color: var(--text3); }
.bj-legend span { display: inline-flex; align-items: center; gap: 5px; }
.bj-dot         { width: 10px; height: 10px; border-radius: 3px; flex-shrink: 0; }

/* Deviation meters: zero centred, your estimate is the ◆ marker. */
.bj-dev-row     { display: grid; grid-template-columns: minmax(120px,1fr) minmax(120px,1.15fr) 78px;
                  gap: 10px; align-items: center; padding: 11px 0; border-top: 1px solid var(--border); }
.bj-dev-name    { display: flex; align-items: center; gap: 7px; font-size: .84rem; font-weight: 800; }
.bj-dev-nums    { font-size: .74rem; color: var(--text3); margin: 3px 0 0 17px; }
.bj-dev-meter   { position: relative; padding-top: 4px; }
.bj-dev-track   { position: relative; height: 16px; background: var(--surface3); border-radius: 4px; overflow: hidden; }
.bj-dev-band    { position: absolute; top: 0; bottom: 0; background: rgba(67,239,140,.16); }
.bj-dev-tick    { position: absolute; top: 3px; bottom: 3px; width: 1px; background: var(--text3); opacity: .3; }
.bj-dev-zero    { position: absolute; top: 0; bottom: 0; width: 2px; left: calc(50% - 1px); background: var(--text3); opacity: .85; }
/* The marker sits outside the clipped track so its head can overhang. */
.bj-dev-mark    { position: absolute; top: 0; height: 24px; width: 4px; margin-left: -2px; border-radius: 2px;
                  box-shadow: 0 0 0 1.5px var(--surface2, #1b1b2b); }
.bj-dev-mark::after {
  content: ''; position: absolute; left: 50%; top: -3px; transform: translateX(-50%) rotate(45deg);
  width: 8px; height: 8px; border-radius: 2px; background: inherit;
}
.bj-dev-ends    { display: flex; justify-content: space-between; font-size: .6rem; color: var(--text3); margin-top: 4px; }
.bj-dev-val     { text-align: right; }
.bj-dev-num     { font-size: .95rem; font-weight: 900; line-height: 1.15; }
.bj-dev-tag     { font-size: .62rem; text-transform: uppercase; letter-spacing: .04em; color: var(--text3); }

.bj-per1k       { display: grid; grid-template-columns: repeat(3,1fr); gap: 6px; margin-top: 12px; text-align: center; }
.bj-per1k-tile  { padding: 8px 4px; border-radius: var(--radius); }
.bj-per1k-big   { font-size: 1.15rem; font-weight: 900; line-height: 1.1; }
.bj-per1k-sub   { font-size: .66rem; color: var(--text3); margin-top: 2px; }
.bj-per1k-you   { font-size: .68rem; color: var(--text2); margin-top: 4px; }
.bj-per1k-cap   { font-size: .68rem; color: var(--text3); text-align: center; margin-top: 5px; }

/* Narrow (and the Daily board's left column): name and verdict share the
   top line, the meter spans the full width underneath. */
@media (max-width: 560px) {
  html:not(.force-desktop) .bj-dev-row   { grid-template-columns: 1fr auto; align-items: start; }
  html:not(.force-desktop) .bj-dev-val   { order: 1; }
  html:not(.force-desktop) .bj-dev-meter { order: 2; grid-column: 1 / -1; margin-top: 4px; }
}
.bj-results.is-stacked .bj-dev-row   { grid-template-columns: 1fr auto; align-items: start; }
.bj-results.is-stacked .bj-dev-val   { order: 1; }
.bj-results.is-stacked .bj-dev-meter { order: 2; grid-column: 1 / -1; margin-top: 4px; }


/* ── Elements Daily results ─────────────────────────────────────────────
   One row per question, all of them: the element as its table cell, what was
   asked, the right answer, and how the room did. Earlier passes showed either
   three lists of the same seven things, or only the misses — which told you
   almost nothing on a good day. */
.pt-dr-list { display: flex; flex-direction: column; gap: 7px; }
/* Six fixed grid tracks, not a wrapping flex row — a miss's longer "your
   answer → correct answer" text was pushing the time/meta cell to a
   different horizontal spot than a hit's short one-word answer left it at
   (Murray's 2026-08-14 review). Every row now aligns to the same columns
   regardless of how much text is in any one cell. */
.pt-dr-row {
  display: grid;
  grid-template-columns: 22px 64px minmax(150px,1.3fr) minmax(150px,1.3fr) 78px 24px;
  align-items: center; gap: 6px 14px;
  padding: 9px 12px 9px 10px; border-radius: 11px;
  background: rgba(255,255,255,.035);
  border: 1px solid rgba(255,255,255,.08);
  border-left: 3px solid var(--edge, rgba(255,255,255,.2));
}
.pt-dr-row.is-hit  { --edge: #43dea0; }
.pt-dr-row.is-miss { --edge: #ef6b6b; background: rgba(239,107,107,.06); }
.pt-dr-n { font-size: .72rem; font-weight: 800; color: var(--text3); text-align: center; }
.pt-dr-el {
  --pt-tint: #94a3b8;
  display: inline-flex; flex-direction: column; align-items: center; justify-content: center;
  /* Fixed, not min: a bare emoji (the synthesis "brain" face) and a 1-2
     letter element symbol don't share a font-metric width, and each row is
     its own independent grid — min-width alone let a synthesis row's box
     render visibly wider than every recall row's (Murray's 2026-08-13
     review). Locking the width keeps every row's badge the same size. */
  width: 64px; padding: 5px 7px; border-radius: 9px; line-height: 1.15;
  background: color-mix(in srgb, var(--pt-tint) 15%, transparent);
  border: 1.5px solid color-mix(in srgb, var(--pt-tint) 45%, transparent);
}
.pt-dr-el b { font-size: 1.05rem; font-weight: 800; color: var(--pt-tint); }
.pt-dr-el i {
  font-style: normal; font-size: .53rem; font-weight: 700; color: var(--text3);
  max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.pt-dr-question { display: flex; flex-direction: column; gap: 1px; min-width: 0; align-self: center; }
.pt-dr-tag {
  font-size: .6rem; font-weight: 800; color: var(--text3);
  text-transform: uppercase; letter-spacing: .03em;
}
.pt-dr-question > b { font-size: .86rem; font-weight: 700; }
/* Your pick, and — only on a miss — what it should have been, folded into
   the same line rather than a parallel "Correct answer" column: that label
   sitting next to a ✕ read like it described your own pick. */
.pt-dr-answer {
  /* Wraps rather than ellipsis-truncates: this is the one place the right
     answer is ever shown, so losing the end of it to "…" defeats the
     point. */
  font-size: .8rem; color: var(--text3); min-width: 0; align-self: center;
}
.pt-dr-answer b { font-weight: 800; }
.pt-dr-answer .pt-dr-wrong { color: #ef6b6b; }
.pt-dr-answer .pt-dr-right { color: #43dea0; }
.pt-dr-answer .pt-dr-arrow { font-style: normal; opacity: .5; margin: 0 1px; }
.pt-dr-meta {
  font-size: .66rem; color: var(--text3); display: flex; flex-direction: column;
  gap: 2px; align-self: center;
}
.pt-dr-meta i { font-style: normal; opacity: .5; display: none; }
.pt-dr-mark { font-size: 1rem; font-weight: 800; text-align: center; }
.pt-dr-row.is-hit  .pt-dr-mark { color: #43dea0; }
.pt-dr-row.is-miss .pt-dr-mark { color: #ef6b6b; }
.pt-dr-clean {
  margin-top: 12px; font-size: .85rem; font-weight: 700; color: #43dea0;
  background: rgba(67, 222, 160, .1); border: 1.5px solid rgba(67, 222, 160, .3);
  border-radius: 10px; padding: 11px 14px;
}
/* Below ~700px the six tracks don't fit; collapse to two rows per question
   instead of shrinking everything unreadable. */
@media (max-width: 700px) {
  .pt-dr-row {
    grid-template-columns: 18px 44px 1fr 22px;
    grid-template-areas:
      "n el question mark"
      "n el answer   answer"
      "n el meta     meta";
    gap: 3px 10px; padding: 8px;
  }
  .pt-dr-n        { grid-area: n; }
  .pt-dr-el       { grid-area: el; width: 44px; }
  .pt-dr-question { grid-area: question; }
  .pt-dr-answer   { grid-area: answer; }
  .pt-dr-meta     { grid-area: meta; flex-direction: row; flex-wrap: wrap; }
  .pt-dr-meta i   { display: inline; }
  .pt-dr-mark     { grid-area: mark; }
}