/* ===================== WHODLE (wd-) — all surfaces =====================
   Wall: Arena/EWC race, matched categories and a separate solve spotlight.
   Phone: champion search + LoLdle feedback rows (7 flip-in verdict cells).
   Status colors (success / warning / danger) are sanctioned flats; the only
   warm color is the --grad-warm progress fill + --grad-num point numbers. */

/* ======================= PHONE ======================= */

.play-body .wd-top { display: flex; justify-content: center; align-items: center; gap: 10px; margin-bottom: 8px; }
.play-body .wd-timer {
  font-family: var(--font-display);
  font-weight: 900;
  font-size: 17px;
  color: var(--text);
  font-variant-numeric: tabular-nums;
}
.play-body .wd-timer.urgent { color: var(--danger); animation: wdUrgent 1s ease-in-out infinite; }
.play-body .wd-count-chip {
  font-family: var(--font-narrow);
  font-weight: 900;
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  background: var(--ewc-off-white);
  color: var(--ewc-charcoal);
  border-radius: 999px;
  padding: 4px 14px;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.35);
}
.play-body .wd-title {
  font-family: var(--font-display);
  font-weight: 900;
  font-size: 26px;
  text-transform: uppercase;
  text-align: center;
  color: var(--text);
  margin: 6px 0 2px;
}
.play-body .wd-sub {
  font-size: 13px;
  text-align: center;
  color: var(--text-dim, rgba(247, 247, 247, 0.65));
  margin-bottom: 10px;
}

.play-body .wd-searchbox { position: relative; margin: 10px 0 6px; }
.play-body .wd-search { width: 100%; font-size: 16px; } /* 16px stops iOS zoom-on-focus */
.play-body .wd-sugg {
  display: none;
  position: absolute;
  top: calc(100% + 6px);
  left: 0; right: 0;
  background: var(--surface-2);
  border: 1px solid var(--line-soft, rgba(247, 247, 247, 0.12));
  border-radius: 12px;
  overflow: hidden;
  z-index: 30;
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.5);
}
.play-body .wd-sugg.open { display: block; }
.play-body .wd-sugg-row {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  min-height: 48px;
  padding: 6px 12px;
  background: transparent;
  border: none;
  border-bottom: 1px solid rgba(247, 247, 247, 0.06);
  color: var(--text);
  font-family: var(--font-narrow);
  font-weight: 700;
  font-size: 17px;
  text-align: left;
  cursor: pointer;
}
.play-body .wd-sugg-row:last-child { border-bottom: none; }
.play-body .wd-sugg-row:active, .play-body .wd-sugg-row.picked { background: rgba(247, 247, 247, 0.1); }
.play-body .wd-sugg-empty { padding: 12px; font-size: 14px; color: rgba(247, 247, 247, 0.55); text-align: center; }
.play-body .wd-legend {
  font-size: 11px;
  text-align: center;
  color: rgba(247, 247, 247, 0.5);
  margin-bottom: 12px;
}

.play-body .wd-icon { width: 34px; height: 34px; border-radius: 9px; object-fit: cover; flex: 0 0 auto; }
.play-body .wd-icon-big {
  width: 86px; height: 86px;
  border-radius: 18px;
  border: 3px solid var(--ewc-off-white);
}

/* The guess history SCROLLS inside the stage (the stage itself is
   overflow:hidden) — the search box + legend stay pinned above it, so a fan
   can always scroll back through every guess they've made. */
.play-body .wd-history {
  display: flex; flex-direction: column; gap: 10px;
  margin-top: 6px;
  flex: 1 1 auto; min-height: 0;
  overflow-y: auto; -webkit-overflow-scrolling: touch;
  padding-right: 2px;
}
.play-body .wd-guess {
  background: rgba(247, 247, 247, 0.04);
  border: 1px solid rgba(247, 247, 247, 0.08);
  border-radius: 12px;
  padding: 10px;
}
.play-body .wd-guess-in { animation: wdRowIn 0.35s ease both; }

/* Balanced 4×2 verdict grid — the champion tile is cell #1 (8 tiles, no 4+3
   orphan row); the 7 verdict cells keep the tinted fill + colored border look. */
.play-body .wd-cells { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; }
.play-body .wd-cell {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  min-height: 66px;
  border-radius: 9px;
  padding: 5px 3px;
  text-align: center;
  border: 1px solid transparent;
}
.play-body .wd-cell-label {
  font-size: 8.5px;
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  opacity: 0.7;
}
.play-body .wd-cell-value {
  font-family: var(--font-narrow);
  font-weight: 900;
  font-size: 12px;
  line-height: 1.15;
  overflow-wrap: anywhere;
}
.play-body .wd-cell.wd-hit { background: rgba(var(--tint-success), 0.22); border-color: rgba(var(--tint-success), 0.65); color: var(--success); }
.play-body .wd-cell.wd-part { background: rgba(var(--tint-warning), 0.18); border-color: rgba(var(--tint-warning), 0.6); color: var(--warning); }
.play-body .wd-cell.wd-miss { background: rgba(var(--tint-danger), 0.1); border-color: rgba(var(--tint-danger), 0.3); color: rgba(247, 247, 247, 0.75); }
.play-body .wd-cell .wd-cell-label { color: var(--text); }

/* Cell #1 — the guessed item's PHOTO, filling the tile edge-to-edge (no name;
   the face IS the label). Falls back to a labelled initial block only when an
   item has no picture. */
.play-body .wd-cell.wd-cell-item {
  padding: 0;
  overflow: hidden;
  background: rgba(247, 247, 247, 0.06);
  border-color: rgba(247, 247, 247, 0.16);
}
.play-body .wd-cell-item:not(.no-photo) .wd-cell-icon {
  width: 100%;
  height: 100%;
  border-radius: inherit;
  object-fit: cover;
  object-position: top center;
}
.play-body .wd-cell-item.no-photo { padding: 5px 3px; gap: 3px; }
.play-body .wd-cell-itemname {
  font-family: var(--font-narrow);
  font-weight: 900;
  font-size: 9px;
  line-height: 1.05;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--text);
  overflow-wrap: anywhere;
}

.play-body .wd-flip {
  animation: wdFlip 0.5s cubic-bezier(0.3, 1.1, 0.4, 1) both;
  transform-origin: center top;
  backface-visibility: hidden;
}
@keyframes wdFlip { from { transform: rotateX(-88deg); opacity: 0; } }

.play-body .wd-result { margin-bottom: 12px; }
/* When a guess history follows the result card it takes natural height so the
   history below can scroll; a lone reveal card (no history) stays centered. */
.play-body .wd-result:not(:last-child) { flex: 0 0 auto; justify-content: flex-start; }
.play-body .wd-answer-card { display: flex; flex-direction: column; align-items: center; gap: 6px; margin: 10px 0; }
.play-body .wd-answer-name {
  font-family: var(--font-display);
  font-weight: 900;
  font-size: 26px;
  text-transform: uppercase;
  color: var(--text);
}
.play-body .wd-reveal-pop { animation: wdPop 0.55s cubic-bezier(0.2, 1.4, 0.4, 1) both; }
.play-body .wd-reveal-title { margin-top: 2px; }
.play-body .wd-watch {
  font-size: 13px;
  color: rgba(247, 247, 247, 0.65);
  margin-top: 8px;
}

/* ======================= ADMIN ======================= */

#dash .wd-live .live-stat-row { flex-wrap: wrap; }

/* Player pool — a flex column per field with a shared label height, so the
   caption underneath lands on a predictable baseline rather than wherever a
   one- or two-line label leaves it.

   There USED to be a `height: 40px` on the inputs and buttons in here. It was
   written when this grid held a PAIR — the pool number input beside the CS2
   refresh button — and its only job was to force those two different controls
   into one box so their captions shared a baseline. The pool input has since
   moved to the launch rail (measured there at 116x30), so the grid holds a
   single button and there is nothing left to line it up with; all the rule
   still did was make "Refresh from HLTV" 152x40 while every other small button
   in the console stands at 30 (Start 68x30 and the leave button 38x30 sit in
   the stage header directly above it).

   Removing it lands the button at 34, not 30, because admin.css:2578-2580
   ("a control inside a field is a control: one height") still catches it via
   `#dash .stage-grid .field > .btn`. That rule's own note says what it is for:
   "btn-sm gave the right-hand column a 28px button beside a 34px input" — and
   the input it was matching is the one that moved out. With the premise gone
   the last line below hands the button back to `#dash .btn-sm`'s 30.

   That line needs 1 id + 4 classes to land, not 3: the selector actually doing
   the pushing is the `#dash [data-gameform] .field > .btn:not(.btn-block)` arm
   of the same list, and `:not(.btn-block)` counts as a class, so a 3-class
   selector loses however late it is written. `.btn.btn-sm` ties it at (1,4,0)
   and wins on ORDER — this stylesheet is linked after admin.css
   (admin/index.html:10 then :20). It overrides that one rule for small buttons
   in this one grid and nothing else; a full-size button here would still take
   the field height. Measured across all 25 tabs: whodle was the only tab whose
   small button was not 30.

   Console-only: every selector here is #dash-scoped, and #dash exists solely
   in admin/index.html:65, so the wall and the phones never see this block. */
#dash .wd-datagrid { align-items: start; }
#dash .wd-datagrid .field { display: flex; flex-direction: column; }
#dash .wd-datagrid .field > label { min-height: 20px; margin-bottom: 7px; }
#dash .wd-datagrid .field > .btn.btn-sm { height: 30px; min-height: 30px; }
#dash .wd-cap {
  margin-top: 8px;
  min-height: 16px;
  font-size: 12px;
  line-height: 1.35;
  color: var(--text-dim, rgba(247, 247, 247, 0.5));
}

/* ---- dataset-specific icon treatments ---- */
/* EAFC EA cards are tall — crop small icons to the face (top), let the big
   solved/reveal icon keep the card's portrait ratio. */
.play-body img.wd-cardimg { object-fit: cover; object-position: top center; }
.play-body .wd-icon-big.wd-cardimg { width: 96px; height: 132px; border-radius: 12px; }
/* Items without an image get an initial-letter block (same footprint). */
.play-body .wd-icon-blank {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px; height: 34px;
  border-radius: 9px;
  background: rgba(247, 247, 247, 0.12);
  color: var(--text);
  font-family: var(--font-narrow);
  font-weight: 900;
  font-size: 16px;
  flex: 0 0 auto;
}
.play-body .wd-icon-big.wd-icon-blank { width: 86px; height: 86px; font-size: 38px; border-radius: 18px; }

/* Individual-secret race tracking; shared lfs components own the workspace. */
#dash #tab-whodle .wd-settings-row { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:20px; margin-top:20px; }
#dash #tab-whodle .wd-settings-note { margin:14px 0 0; font-size:11px; }
#dash #tab-whodle .wd-dataset-facts { display:grid; grid-template-columns:auto minmax(0,1fr); gap:10px 24px; margin:20px 0 0; font-size:12px; }
#dash #tab-whodle .wd-dataset-facts dt { color:var(--text-dim); }
#dash #tab-whodle .wd-dataset-facts dd { margin:0; text-align:right; color:var(--text); overflow-wrap:anywhere; }
#dash #tab-whodle .wd-race-note { margin:18px 0 12px; }
#dash #tab-whodle .wd-progress-list { list-style:none; padding:0; margin:14px 0; }
#dash #tab-whodle .wd-progress-list li { display:flex; flex-wrap:wrap; align-items:baseline; justify-content:space-between; gap:6px 16px; padding:12px 0; border-bottom:1px solid var(--line); font-size:12px; }
#dash #tab-whodle .wd-progress-list strong { font-weight:550; overflow-wrap:anywhere; }
#dash #tab-whodle .wd-progress-list span { font-size:11px; }
#dash #tab-whodle .lfs-pulse-row { --outcome-color:var(--text-dim); }
#dash #tab-whodle .lfs-trail-rows { grid-auto-columns:minmax(135px,1fr); }

/* Whodle audience canvas: protected type wells and a non-overlapping spotlight. */
.tb-shell .wb-round{display:grid;grid-template-rows:110px minmax(0,1fr);gap:30px}
.tb-shell .wb-head{display:grid;grid-template-columns:minmax(0,1fr) 270px;align-items:center;gap:30px}
.tb-shell .wb-title{height:110px;display:flex;align-items:center;font:700 80px/1.1 var(--tb-font);overflow-wrap:anywhere}
.tb-shell .wb-clock{font:700 88px/1 var(--tb-font);text-align:right;font-variant-numeric:tabular-nums}
.tb-shell .wb-clock svg{width:78px;height:78px}
.tb-shell .wb-body{display:grid;grid-template-columns:minmax(0,1fr) 510px;gap:40px;min-height:0}
.tb-shell .wb-board{display:grid;grid-template-rows:repeat(8,minmax(0,1fr));gap:12px;position:relative;min-height:0}
.tb-shell .wb-row{display:grid;grid-template-columns:minmax(0,1fr) 245px 190px;align-items:center;gap:24px;padding:12px 24px;min-height:0;border:1px solid var(--tb-border);border-radius:14px;background:var(--tb-surface)}
.tb-shell .wb-name,.tb-shell .wb-score{display:flex;align-items:center;height:100%;min-width:0;overflow-wrap:anywhere;unicode-bidi:plaintext;font:600 46px/1.15 var(--tb-font)}
.tb-shell .wb-score{justify-content:flex-end;font-variant-numeric:tabular-nums}
.tb-shell .wb-locks{display:flex;gap:6px;height:30px}
.tb-shell .wb-locks i{flex:1;min-width:0;border-radius:4px;border:2px solid var(--tb-muted);background:var(--tb-base)}
.tb-shell .wb-locks i.is-matched{background:var(--tb-blue);border-color:var(--tb-blue)}
.tb-shell .wb-verdict{justify-self:center;width:56px;height:56px;color:var(--tb-blue)}
.tb-shell .wb-verdict svg{width:100%;height:100%}
.tb-shell .wb-row.is-solved{background:var(--tb-correct-top);border-color:var(--tb-blue)}
.tb-shell .wb-empty{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;padding:70px;text-align:center;font:700 64px/1.2 var(--tb-font);overflow-wrap:anywhere;background:var(--tb-base);border-radius:24px}
.tb-shell .wb-rail{display:grid;grid-template-rows:170px minmax(0,1fr);gap:20px;min-height:0}
.tb-shell .wb-stat{display:flex;flex-direction:column;align-items:center;gap:10px}
.tb-shell .wb-percent{width:100%;height:110px;display:flex;align-items:center;justify-content:center;font:700 112px/1 var(--tb-font);font-variant-numeric:tabular-nums}
.tb-shell .wb-stat-label{width:100%;height:50px;display:flex;align-items:center;justify-content:center;font:600 44px/1.1 var(--tb-font);text-align:center;overflow-wrap:anywhere}
.tb-shell .wb-spot{display:grid;grid-template-rows:48px 112px minmax(0,1fr) 96px 86px;align-items:center;gap:10px;padding:20px;background:var(--tb-surface);border:2px solid var(--tb-border);border-radius:20px;min-height:0}
.tb-shell .wb-spot-label,.tb-shell .wb-spot-name,.tb-shell .wb-item{height:100%;display:flex;align-items:center;justify-content:center;text-align:center;font:600 42px/1.15 var(--tb-font);overflow-wrap:anywhere;unicode-bidi:plaintext;min-width:0}
.tb-shell .wb-spot-name{font-weight:750;font-size:62px}
.tb-shell .wb-item{font-size:56px}
.tb-shell .wb-image{width:100%;height:100%;object-fit:contain;min-height:0;border-radius:12px}
.tb-shell .wb-detail{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));align-items:center;gap:16px;height:86px;min-width:0}
.tb-shell .wb-guesses{display:flex;align-items:center;justify-content:center;width:100%;height:86px;font:500 40px/1 var(--tb-font);overflow-wrap:anywhere}
.tb-shell .wb-points{width:100%;height:86px;display:flex;align-items:center;justify-content:center;font:700 64px/1 var(--tb-font)}
.tb-shell .wb-spot:not(.has-solve){grid-template-rows:80px minmax(0,1fr);gap:24px}
.tb-shell .wb-spot:not(.has-solve) .wb-spot-name{height:240px}
.tb-shell[data-mainboard-layout='ewc26'] :is(.wb-title,.wb-clock,.wb-percent){font-family:var(--tb-display);font-weight:900}
.tb-shell[data-mainboard-layout='ewc26'] .wb-row{border-radius:0;background:var(--tb-white);color:var(--tb-bg)}
.tb-shell[data-mainboard-layout='ewc26'] .wb-row.is-solved{background:var(--tb-bg);color:var(--tb-white);border-color:var(--tb-white);box-shadow:inset 0 0 0 3px var(--tb-white)}
.tb-shell[data-mainboard-layout='ewc26'] .wb-spot{border-radius:0}
.tb-shell.is-arabic :is(.wb-title,.wb-clock,.wb-percent){font-family:var(--tb-font)}
#dash #tab-whodle :is(.wd-title-row,.wd-header-actions){display:flex;align-items:center;gap:12px;flex-wrap:wrap}
#dash #tab-whodle .wd-title-row{margin-top:7px}#dash #tab-whodle .wd-title-row h1{margin:0}
#dash #tab-whodle .wd-header-actions{justify-content:flex-end}#dash #wdPrimary{min-width:108px}
#dash #tab-whodle .lfs-close{width:36px;height:36px;min-width:36px;padding:0}
@media(max-width:850px){#dash #tab-whodle .wd-header-actions{justify-content:flex-start}}

#dash #tab-whodle .wd-progress-track{width:100%;height:8px;background:var(--surface-3);border-radius:4px;overflow:hidden}
#dash #tab-whodle .wd-progress-track i{display:block;height:100%;background:var(--text-dim);transition:width .3s}
#dash #tab-whodle .wd-progress-track.is-solved i{background:var(--success)}
#dash #tab-whodle .wd-progress-track.is-out i{background:var(--danger)}
@media(prefers-reduced-motion:reduce){#dash #tab-whodle .wd-progress-track i{transition:none}}

.tb-shell .wb-media{position:relative;width:100%;height:100%;min-height:0;display:grid;place-items:center}
.tb-shell .wb-media .wb-image{position:absolute;inset:0;visibility:hidden}
.tb-shell .wb-media.has-image .wb-image{visibility:visible}
.tb-shell .wb-media.has-image .wb-image-fallback{display:none}
.tb-shell .wb-image-fallback{display:grid;place-items:center;width:100%;height:100%;font:800 112px/1 var(--tb-font);background:var(--tb-base);border-radius:12px}
.tb-shell .wb-image-fallback svg{width:100px;height:100px}