/* =========================================================
   Halp's Game Room — shared components (the "house style")
   Every class starts with ui-. Sizes and colors come from tokens.css,
   so these work in dark and Easy-read, at every text size.
   ========================================================= */

/* ---------- Icons (drawn, never emoji on their own) ---------- */
.ui-ico { width: 1.35em; height: 1.35em; flex: none; display: inline-block; vertical-align: -0.28em;
  fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.ui-ico.lg { width: 1.7em; height: 1.7em; }
.ui-ico.fill { fill: currentColor; stroke: none; }

/* ---------- Page shell ---------- */
.ui-page { max-width: 640px; margin: 0 auto; padding: 0 var(--sp-md);
  padding-bottom: calc(var(--bottom-nav-h) + var(--sp-xl) + env(safe-area-inset-bottom, 0px)); }
.ui-page.wide { max-width: var(--content-max); }
.ui-page.no-nav { padding-bottom: var(--sp-xl); }

/* ---------- Spacing helpers ----------
   For one-off spacing in templates instead of style="". They win like the
   inline styles they replace (!important), except display, which Alpine's
   x-show must still be able to switch off. ui-m0 comes first so
   "ui-m0 ui-mt-sm" keeps the top margin. */
.ui-m0 { margin: 0 !important; }
.ui-mt-sm { margin-top: var(--sp-sm) !important; }
.ui-mt-md { margin-top: var(--sp-md) !important; }
.ui-mt-lg { margin-top: var(--sp-lg) !important; }
.ui-mb-sm { margin-bottom: var(--sp-sm) !important; }
.ui-mb-md { margin-bottom: var(--sp-md) !important; }
.ui-pt-lg { padding-top: var(--sp-lg) !important; }
.ui-center { text-align: center !important; }
.ui-grow { flex: 1 !important; min-width: 0 !important; }
.ui-min0 { min-width: 0 !important; }
.ui-flex { display: flex; gap: var(--sp-sm) !important; }
.ui-wrap-any { overflow-wrap: anywhere !important; }

.ui-topbar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--sp-sm);
  min-height: var(--tap); padding: var(--sp-sm) var(--sp-md) 0; max-width: 640px; margin: 0 auto; }
.ui-topbar.wide { max-width: var(--content-max); }
.ui-topbar-side { display: flex; align-items: center; gap: 6px; }
/* Very big text on a narrow phone: Help drops to its own line instead of off the screen. */
.ui-topbar-side:last-child { margin-left: auto; }
.ui-back, .ui-topbtn { display: inline-flex; align-items: center; gap: 6px; min-height: var(--tap);
  padding: 0 10px; margin: 0 -10px; border: 0; background: none; cursor: pointer;
  font: inherit; font-weight: 700; font-size: var(--fs-md); color: var(--c-text); text-decoration: none;
  border-radius: 12px; -webkit-tap-highlight-color: transparent; }
.ui-topbtn { margin: 0; }
.ui-back:hover, .ui-topbtn:hover { color: var(--c-text); background: var(--c-surface-2); }
.ui-helpbtn { flex-direction: column; gap: 0; padding: 4px 10px; font-size: var(--fs-min); line-height: 1.1; }
.ui-helpbtn .ui-ico { width: 1.7em; height: 1.7em; }

.ui-hello { font-family: var(--font-display); font-weight: 700; font-size: var(--fs-2xl); line-height: 1.1;
  margin: 0; color: var(--c-text); letter-spacing: .01em; }
.ui-hello-sub { font-size: var(--fs-md); color: var(--c-text-muted); margin-top: 2px; }

.ui-seclabel { font-family: var(--font-display); font-weight: 600; font-size: var(--fs-md);
  letter-spacing: .12em; text-transform: uppercase; color: var(--c-text-muted);
  margin: var(--sp-lg) 2px var(--sp-sm); display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.ui-seclabel a { font-family: var(--font); letter-spacing: 0; text-transform: none; font-weight: 700;
  font-size: var(--fs-sm); color: var(--c-link); }

/* ---------- Buttons ---------- */
.ui-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: var(--tap); padding: 10px 20px; border-radius: var(--btn-radius); border: 2px solid transparent;
  font: inherit; font-weight: 700; font-size: var(--fs-md); line-height: 1.15; text-align: center;
  text-decoration: none; cursor: pointer; color: var(--c-text); background: var(--c-surface-2);
  transition: transform .12s ease, filter .15s ease, background .15s ease;
  -webkit-tap-highlight-color: transparent; }
.ui-btn:hover { filter: brightness(1.07); color: var(--c-text); }
.ui-btn:active { transform: scale(.98); }
.ui-btn:focus-visible, .ui-back:focus-visible, .ui-topbtn:focus-visible,
.ui-row:focus-visible, .ui-tile:focus-visible, .ui-opt:focus-within {
  outline: 3px solid var(--c-selected-border); outline-offset: 2px; }
.ui-btn.block { display: flex; width: 100%; }
.ui-btn.lg { min-height: var(--tap-lg); font-size: var(--fs-lg); padding: 12px 22px; border-radius: 16px; }
.ui-btn.primary { background: var(--c-primary); background-image: var(--grad-brand); color: #fff; }
.ui-btn.primary:hover { color: #fff; }
.ui-btn.dark { background: #15110d; color: #fff; }
.ui-btn.dark:hover { color: #fff; }
.ui-btn.light { background: #fff; color: #15151c; }
.ui-btn.light:hover { color: #15151c; }
.ui-btn.success { background: var(--c-success); color: #fff; }
.ui-btn.success:hover { color: #fff; }
.ui-btn.danger { background: var(--c-danger-dk); color: #fff; }   /* 5:1 for white words at any size */
.ui-btn.danger:hover { color: #fff; }
.ui-btn.outline { background: transparent; border-color: var(--c-border); }
.ui-btn.quiet { background: transparent; color: var(--c-link); text-decoration: underline; text-underline-offset: 3px; }
.ui-btn[disabled], .ui-btn.disabled { opacity: .5; pointer-events: none; }
.ui-btnrow { display: flex; gap: var(--sp-sm); flex-wrap: wrap; }
.ui-btnrow > .ui-btn { flex: 1 1 0; min-width: 130px; }
/* On a phone, side-by-side buttons wrap their words; stack them instead. */
@media (max-width: 520px) { .ui-btnrow > .ui-btn { flex: 1 1 100%; } }

/* ---------- Cards ---------- */
.ui-card { background: var(--c-surface); border: 1px solid var(--c-border); border-radius: var(--card-radius);
  padding: var(--sp-md); color: var(--c-text); }
.ui-card + .ui-card { margin-top: var(--sp-sm); }
.ui-card-title { font-weight: 700; font-size: var(--fs-lg); line-height: 1.2; margin: 0; }
.ui-card-sub { font-size: var(--fs-sm); color: var(--c-text-muted); margin-top: 3px; line-height: 1.35; }
.ui-muted { color: var(--c-text-muted); }
.ui-small { font-size: var(--fs-sm); }
.ui-stack > * + * { margin-top: var(--sp-sm); }
.ui-stack.lg > * + * { margin-top: var(--sp-md); }

/* "Needs you now" — one big card per thing waiting on you */
.ui-needs { position: relative; border-radius: 20px; padding: 16px 16px 16px; overflow: hidden;
  color: #2a1700; background: linear-gradient(135deg, #ffb22e 0%, #ff8a1f 100%);
  box-shadow: 0 14px 34px rgba(255,138,31,.28); }
.ui-needs + .ui-needs, .ui-needs + .ui-card, .ui-card + .ui-needs { margin-top: var(--sp-sm); }
.ui-needs[data-kind="pool"]     { background: linear-gradient(135deg, #5aa2ff, #2f6fe6); color: #041530; box-shadow: 0 14px 34px rgba(47,128,255,.28); }
.ui-needs[data-kind="bingo"]    { background: linear-gradient(135deg, #3fd9c7, #12a493); color: #02211d; box-shadow: 0 14px 34px rgba(20,184,166,.28); }
.ui-needs[data-kind="quiz"]     { background: linear-gradient(135deg, #b094ff, #8356f0); color: #170a3a; box-shadow: 0 14px 34px rgba(139,92,246,.28); }
.ui-needs-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.ui-kicker { font-family: var(--font-display); font-weight: 700; letter-spacing: .12em; text-transform: uppercase;
  font-size: var(--fs-min); }
.ui-needs-chip { display: inline-flex; align-items: center; gap: 6px; font-weight: 700; font-size: var(--fs-min);
  padding: 4px 10px; border-radius: 999px; background: rgba(0,0,0,.16); }
.ui-needs-chip::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.ui-needs-title { font-family: var(--font-display); font-weight: 700; font-size: var(--fs-xl); line-height: 1.12;
  margin: 8px 0 2px; }
.ui-needs-sub { font-weight: 700; font-size: var(--fs-sm); opacity: .9; }
.ui-needs .ui-btn { margin-top: 14px; }

/* ---------- Progress ---------- */
.ui-progress { height: 10px; border-radius: 999px; background: var(--c-surface-2); overflow: hidden; }
.ui-progress > span { display: block; height: 100%; border-radius: 999px; background: var(--grad-brand);
  transition: width .3s ease; }

/* ---------- Status pills (plain words) ---------- */
.ui-pill { display: inline-flex; align-items: center; gap: 6px; font-weight: 700; font-size: var(--fs-min);
  line-height: 1; padding: 7px 12px; border-radius: 999px; white-space: nowrap;
  background: var(--c-surface-2); color: var(--c-text-muted); }
.ui-pill.open  { background: rgba(47,128,255,.16); color: var(--c-link); }
.ui-pill.live  { background: rgba(37,224,122,.16); color: var(--c-good); }
.ui-pill.live::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: currentColor;
  animation: uiPulse 1.6s infinite; }
.ui-pill.final { background: rgba(255,194,75,.18); color: #8a5000; }   /* 6:1 in Easy-read */
html[data-theme="dark"] .ui-pill.final, .theme-dark-scope .ui-pill.final { color: #ffc24b; }
@keyframes uiPulse { 0% { box-shadow: 0 0 0 0 rgba(37,224,122,.6); } 70% { box-shadow: 0 0 0 7px rgba(37,224,122,0); } 100% { box-shadow: 0 0 0 0 rgba(37,224,122,0); } }

/* ---------- Game icon square + colors ---------- */
.ui-gico { width: 48px; height: 48px; flex: none; border-radius: 14px; display: inline-flex;
  align-items: center; justify-content: center; color: #fff; font-size: 1.15rem;
  background: linear-gradient(135deg, var(--g, var(--c-primary)), var(--g2, var(--c-primary-dk))); }
.ui-gico.sm { width: 40px; height: 40px; border-radius: 12px; font-size: 1rem; }
[data-kind="tournament"] { --g: var(--g-tournament); --g2: var(--g-tournament-2); }
[data-kind="pool"], [data-kind="prediction"], [data-kind="pickem"] { --g: var(--g-pool); --g2: var(--g-pool-2); }
[data-kind="bingo"]      { --g: var(--g-bingo);      --g2: var(--g-bingo-2); }
[data-kind="quiz"]       { --g: var(--g-quiz);       --g2: var(--g-quiz-2); }
[data-kind="squares"]    { --g: var(--g-squares);    --g2: var(--g-squares-2); }
[data-kind="bracket"]    { --g: var(--g-bracket);    --g2: var(--g-bracket-2); }
[data-kind="scoregame"]  { --g: var(--g-scoregame);  --g2: var(--g-scoregame-2); }
[data-kind="poll"]       { --g: var(--g-poll);       --g2: var(--g-poll-2); }
[data-kind="quickprop"]  { --g: var(--g-quickprop);  --g2: var(--g-quickprop-2); }
[data-kind="sweep"]      { --g: var(--g-sweep);      --g2: var(--g-sweep-2); }
[data-kind="guess"]      { --g: var(--g-guess);      --g2: var(--g-guess-2); }
[data-kind="feud"]       { --g: var(--g-feud);       --g2: var(--g-feud-2); }
[data-kind="superlative"] { --g: var(--g-superlative); --g2: var(--g-superlative-2); }
[data-kind="season"]     { --g: var(--g-season);     --g2: var(--g-season-2); }

/* ---------- Rows (a group, a game, a person) ---------- */
.ui-row { display: flex; align-items: center; gap: 12px; min-height: 68px; padding: 10px 14px;
  background: var(--c-surface); border: 1px solid var(--c-border); border-radius: var(--card-radius);
  color: var(--c-text); text-decoration: none; -webkit-tap-highlight-color: transparent; }
.ui-row + .ui-row { margin-top: var(--sp-sm); }
a.ui-row:hover { color: var(--c-text); border-color: var(--c-selected-border); }
.ui-row-text { flex: 1; min-width: 0; display: block; }
.ui-row-title { display: block; font-weight: 700; font-size: var(--fs-md); line-height: 1.2; overflow-wrap: anywhere; }
.ui-row-sub { display: block; font-size: var(--fs-sm); color: var(--c-text-muted); margin-top: 2px; line-height: 1.3; }
.ui-row-sub .live { color: var(--c-good); font-weight: 700; }
.ui-row .ui-chev { color: var(--c-text-muted); flex: none; }
.ui-row.live { border-color: rgba(37,224,122,.45); }

/* Group crest: initials on the group's color */
.ui-crest { width: 52px; height: 52px; flex: none; border-radius: 15px; display: inline-flex;
  align-items: center; justify-content: center; color: #fff; font-family: var(--font-display);
  font-weight: 700; font-size: 1.05rem; letter-spacing: .02em;
  background: linear-gradient(135deg, var(--crest, #2f80ff), var(--crest-2, #7c3aed)); }
.ui-crest.lg { width: 64px; height: 64px; border-radius: 18px; font-size: 1.3rem; }

/* Avatar: animal or initials on a color */
.ui-avatar { width: 44px; height: 44px; flex: none; border-radius: 50%; display: inline-flex;
  align-items: center; justify-content: center; color: #fff; font-weight: 700; font-size: var(--fs-sm);
  background: var(--av, #5b6b8c); overflow: hidden; line-height: 1; }
.ui-avatar.emoji { font-size: 1.4rem; }
.ui-avatar.sm { width: 34px; height: 34px; font-size: var(--fs-min); }
.ui-avatar.sm.emoji { font-size: 1.1rem; }
.ui-avatar.xl { width: 84px; height: 84px; font-size: 1.6rem; }
.ui-avatar.xl.emoji { font-size: 2.6rem; }

/* Group header card, in the group's color */
.ui-grouphead { position: relative; border-radius: 20px; padding: 18px 18px 16px; overflow: hidden; color: #fff;
  background: linear-gradient(120deg, var(--crest, #2f80ff), var(--crest-2, #7c3aed));
  background-size: cover; background-position: center; min-height: 104px; }
.ui-grouphead::after { content: ""; position: absolute; right: -40px; top: -50px; width: 190px; height: 190px;
  border-radius: 50%; background: rgba(255,255,255,.13); pointer-events: none; }
.ui-grouphead.photo::before { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0,0,0,.15), rgba(0,0,0,.6)); }
.ui-grouphead.photo::after { display: none; }
.ui-grouphead > * { position: relative; z-index: 1; }
.ui-grouphead-name { font-family: var(--font-display); font-weight: 700; font-size: var(--fs-2xl); line-height: 1.08;
  margin: 0; text-shadow: 0 1px 2px rgba(0,0,0,.25); overflow-wrap: anywhere; }
.ui-grouphead-meta { font-size: var(--fs-md); margin-top: 4px; opacity: .95; }

/* ---------- Tiles ("Start a game") ---------- */
.ui-tiles { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-sm); }
.ui-tile { display: flex; flex-direction: column; gap: 10px; min-height: 124px; padding: 14px;
  border-radius: var(--card-radius); border: 1px solid var(--c-border); text-decoration: none; color: var(--c-text);
  background:
    linear-gradient(150deg, color-mix(in srgb, var(--g, #2f80ff) 22%, transparent), transparent 62%),
    var(--c-surface);
  -webkit-tap-highlight-color: transparent; }
.ui-tile:hover { color: var(--c-text); border-color: var(--g, var(--c-primary)); }
.ui-tile-title { font-weight: 700; font-size: var(--fs-lg); line-height: 1.15; }
.ui-tile-sub { font-size: var(--fs-sm); color: var(--c-text-muted); line-height: 1.3; margin-top: -4px; }
@media (max-width: 340px) { .ui-tiles { grid-template-columns: 1fr; } }

/* ---------- Folds ---------- */
.ui-fold { background: var(--c-surface); border: 1px solid var(--c-border); border-radius: var(--card-radius); overflow: hidden; }
.ui-fold + .ui-fold { margin-top: var(--sp-sm); }
.ui-fold > summary { list-style: none; cursor: pointer; display: flex; align-items: center; gap: 10px;
  min-height: var(--tap-lg); padding: 8px 16px; font-weight: 700; font-size: var(--fs-md); color: var(--c-text); }
.ui-fold > summary::-webkit-details-marker { display: none; }
.ui-fold > summary::after { content: ""; margin-left: auto; width: 10px; height: 10px; flex: none;
  border-right: 2.5px solid var(--c-text-muted); border-bottom: 2.5px solid var(--c-text-muted);
  transform: rotate(45deg); transition: transform .15s ease; }
.ui-fold[open] > summary::after { transform: rotate(-135deg); }
.ui-fold > summary .cnt { color: var(--c-text-muted); font-weight: 700; }
.ui-fold-body { padding: 0 16px 14px; }

/* ---------- Forms ---------- */
.ui-field { display: block; margin-bottom: var(--sp-md); }
.ui-label { display: block; font-weight: 700; font-size: var(--fs-md); margin-bottom: 6px; color: var(--c-text); }
.ui-hint { font-size: var(--fs-sm); color: var(--c-text-muted); margin-top: 5px; line-height: 1.35; }
.ui-input, .ui-page input[type="text"], .ui-page input[type="email"], .ui-page input[type="password"],
.ui-page input[type="number"], .ui-page input[type="tel"], .ui-page input[type="search"],
.ui-page input[type="datetime-local"], .ui-page select, .ui-page textarea {
  width: 100%; min-height: var(--tap-lg); padding: 12px 14px; border-radius: 14px;
  border: 2px solid var(--c-border); background: var(--c-surface); color: var(--c-text);
  font: inherit; font-size: var(--fs-md); }
.ui-page textarea { min-height: 96px; }
.ui-input:focus, .ui-page input:focus, .ui-page select:focus, .ui-page textarea:focus {
  outline: none; border-color: var(--c-selected-border); box-shadow: 0 0 0 4px rgba(47,128,255,.2); }
.ui-error { color: var(--c-danger-text); font-weight: 700; font-size: var(--fs-sm); margin-top: 6px; }

/* Choice chips (text size, theme, avatar…): big, one tap, shows what's picked */
.ui-choices { display: flex; gap: var(--sp-sm); flex-wrap: wrap; }
.ui-choice { flex: 1 1 0; min-width: 96px; min-height: var(--tap-lg); display: inline-flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 2px; padding: 8px 10px; border-radius: 14px; cursor: pointer;
  border: 2px solid var(--c-border); background: var(--c-surface); color: var(--c-text);
  font: inherit; font-weight: 700; font-size: var(--fs-sm); text-align: center; }
.ui-choice[aria-pressed="true"], .ui-choice.on, input:checked + .ui-choice {
  border-color: var(--c-selected-border); background: var(--c-selected-bg); }
.ui-choice .aa { font-family: var(--font-display); line-height: 1; }

/* Color swatches: a button (aria-pressed) or a radio's label. Set --sw / --sw2. */
.ui-swatches { display: flex; flex-wrap: wrap; gap: 12px; }
.ui-swatch { display: inline-block; width: var(--tap-lg); height: var(--tap-lg); padding: 0; border: 0;
  border-radius: 16px; cursor: pointer;
  background: linear-gradient(135deg, var(--sw, #888), var(--sw2, var(--sw, #888))); }
.ui-swatch.round { width: var(--tap); height: var(--tap); border-radius: 50%; }
.ui-swatch[aria-pressed="true"], input:checked + .ui-swatch { outline: 4px solid var(--c-text); outline-offset: 3px; }
input:focus-visible + .ui-swatch, .ui-swatch:focus-visible { outline: 4px solid var(--c-selected-border); outline-offset: 3px; }
.ui-visually-hidden { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
/* Big checkbox rows */
.ui-check { display: flex; align-items: center; gap: 12px; min-height: var(--tap); font-weight: 700; cursor: pointer; }
.ui-check input[type="checkbox"], .ui-check input[type="radio"] { width: 28px; height: 28px; min-height: 0; flex: none; margin: 0;
  accent-color: var(--c-primary); }

/* ---------- Pick'em answer cards ---------- */
.ui-opt { display: flex; align-items: center; gap: 14px; width: 100%; min-height: 84px; padding: 14px 18px;
  border-radius: 18px; border: 3px solid var(--c-border); background: var(--c-surface); color: var(--c-text);
  font: inherit; font-weight: 700; font-size: var(--fs-lg); line-height: 1.2; text-align: left; cursor: pointer;
  -webkit-tap-highlight-color: transparent; }
.ui-opt + .ui-opt { margin-top: 12px; }
.ui-opt-dot { width: 32px; height: 32px; flex: none; border-radius: 50%; border: 3px solid var(--c-text-muted);
  display: inline-flex; align-items: center; justify-content: center; color: transparent; }
.ui-opt-dot .ui-ico { width: 20px; height: 20px; stroke-width: 3.2; }
.ui-opt.on, input:checked + .ui-opt { border-color: var(--c-selected-border); background: var(--c-selected-bg); }
.ui-opt.on .ui-opt-dot, input:checked + .ui-opt .ui-opt-dot {
  background: var(--c-selected-border); border-color: var(--c-selected-border); color: #fff; }
.ui-opt.locked { cursor: default; opacity: .85; }
.ui-opt-text { flex: 1; min-width: 0; overflow-wrap: anywhere; }

/* ---------- Messages: stay until closed, say what to do next ---------- */
.ui-flashes { max-width: 640px; margin: var(--sp-sm) auto 0; padding: 0 var(--sp-md);
  display: flex; flex-direction: column; gap: var(--sp-sm); }
.ui-flash { display: flex; align-items: flex-start; gap: 10px; padding: 12px 8px 12px 14px; border-radius: 14px;
  font-size: var(--fs-md); font-weight: 700; line-height: 1.35; border: 2px solid transparent; }
.ui-flash-text { flex: 1; min-width: 0; padding-top: 9px; overflow-wrap: anywhere; }
.ui-flash-close { flex: none; width: var(--tap); height: var(--tap); border: 0; border-radius: 12px; cursor: pointer;
  background: rgba(0,0,0,.08); color: inherit; display: inline-flex; align-items: center; justify-content: center; }
.ui-flash-close:hover { background: rgba(0,0,0,.16); }
.ui-flash.flash-success { background: #d9f4e2; border-color: #9ed9b3; color: #0f4a26; }
.ui-flash.flash-error   { background: #fde0e0; border-color: #f1a9ab; color: #6d1518; }
.ui-flash.flash-warning { background: #fff1c9; border-color: #f0d37a; color: #5f4500; }
.ui-flash.flash-info    { background: #dcebff; border-color: #a6c6f5; color: #0d3a78; }

/* ---------- Bottom sheet / full-screen confirm ---------- */
.ui-sheet-back { position: fixed; inset: 0; z-index: 1500; background: rgba(0,0,0,.6);
  display: flex; align-items: flex-end; justify-content: center; }
.ui-sheet { width: min(560px, 100%); max-height: 92vh; overflow-y: auto; background: var(--c-surface);
  color: var(--c-text); border-radius: 26px 26px 0 0; padding: 12px 20px calc(24px + env(safe-area-inset-bottom, 0px));
  box-shadow: 0 -20px 50px rgba(0,0,0,.45); }
.ui-sheet-grab { width: 44px; height: 5px; border-radius: 99px; background: var(--c-border); margin: 0 auto 14px; }
.ui-sheet-title { font-family: var(--font-display); font-weight: 700; font-size: var(--fs-xl); line-height: 1.15;
  text-align: center; margin: 0 0 12px; }
@media (min-width: 700px) { .ui-sheet-back { align-items: center; } .ui-sheet { border-radius: 26px; } }

.ui-confirm { max-width: 560px; margin: 0 auto; padding: var(--sp-lg) var(--sp-md) var(--sp-xl); }
.ui-confirm h1 { font-family: var(--font-display); font-size: var(--fs-2xl); line-height: 1.1; margin: 0 0 8px; }
.ui-losslist { margin: var(--sp-md) 0; padding: 0; list-style: none; }
.ui-losslist li { display: flex; gap: 10px; align-items: flex-start; padding: 12px 14px; border-radius: 14px;
  background: var(--c-surface); border: 1px solid var(--c-border); font-size: var(--fs-md); line-height: 1.35; }
.ui-losslist li + li { margin-top: 8px; }
.ui-losslist .ui-ico { color: var(--c-danger); margin-top: 2px; }

/* ---------- Undo bar (small actions) ---------- */
.ui-undo { position: fixed; left: 50%; transform: translateX(-50%); z-index: 1400;
  bottom: calc(var(--bottom-nav-h) + 14px + env(safe-area-inset-bottom, 0px));
  width: min(560px, calc(100vw - 24px)); display: flex; align-items: center; gap: 10px;
  padding: 8px 8px 8px 16px; border-radius: 16px; background: #15151c; color: #fff;
  box-shadow: 0 12px 34px rgba(0,0,0,.5); font-weight: 700; font-size: var(--fs-md); }
.ui-undo span { flex: 1; min-width: 0; }
.ui-undo .ui-btn { background: #fff; color: #15151c; }

/* ---------- Bottom tabs: Home, Groups, Me ---------- */
.ui-tabs { position: fixed; left: 0; right: 0; bottom: 0; z-index: 1000; display: flex; justify-content: center;
  height: calc(var(--bottom-nav-h) + env(safe-area-inset-bottom, 0px)); padding-bottom: env(safe-area-inset-bottom, 0px);
  background: var(--nav-bg); border-top: 1px solid var(--c-border);
  -webkit-backdrop-filter: saturate(160%) blur(18px); backdrop-filter: saturate(160%) blur(18px); }
.ui-tabs-in { display: flex; width: min(640px, 100%); }
.ui-tab { flex: 1 1 0; position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 3px; color: var(--c-text-muted); text-decoration: none; font-weight: 700; font-size: var(--fs-min);
  -webkit-tap-highlight-color: transparent; }
.ui-tab:hover { color: var(--c-text); }
.ui-tab-ico { display: inline-flex; align-items: center; justify-content: center; width: 58px; height: 34px;
  border-radius: 999px; }
.ui-tab-ico .ui-ico { width: 24px; height: 24px; }
.ui-tab.active { color: var(--c-text); }
.ui-tab.active .ui-tab-ico { background: var(--c-primary); background-image: var(--grad-brand); color: #fff; }
.ui-tab-badge { position: absolute; top: 4px; left: calc(50% + 12px); min-width: 26px; height: 26px; padding: 0 7px;
  border-radius: 999px; background: var(--c-danger); color: #fff; font-size: var(--fs-min); font-weight: 700;
  display: inline-flex; align-items: center; justify-content: center; }

/* ---------- Guided tour ---------- */
.ui-tour-shade { position: fixed; inset: 0; z-index: 2000; background: rgba(4,4,10,.72); }
.ui-tour-hole { position: fixed; z-index: 2001; border-radius: 22px; pointer-events: none;
  box-shadow: 0 0 0 4px #fff, 0 0 0 9999px rgba(4,4,10,.72); transition: all .25s ease; }
.ui-tour-card { position: fixed; z-index: 2002; left: 50%; transform: translateX(-50%);
  width: min(440px, calc(100vw - 32px)); background: #fff; color: #15151c; border-radius: 22px;
  padding: 18px 18px 14px; box-shadow: 0 24px 60px rgba(0,0,0,.5); }
.ui-tour-dashes { display: flex; gap: 6px; margin-bottom: 10px; }
.ui-tour-dashes i { width: 26px; height: 5px; border-radius: 99px; background: #d9d9e3; }
.ui-tour-dashes i.on { background: #6d3fe0; }
.ui-tour-step { font-weight: 700; font-size: var(--fs-min); letter-spacing: .1em; text-transform: uppercase; color: #6d3fe0; }
.ui-tour-title { font-family: var(--font-display); font-weight: 700; font-size: var(--fs-xl); line-height: 1.15; margin: 4px 0 6px; }
.ui-tour-text { font-size: var(--fs-md); line-height: 1.4; color: #33333f; margin: 0 0 14px; }
.ui-tour-skip { display: block; width: 100%; min-height: var(--tap); margin-top: 4px; border: 0; background: none;
  font: inherit; font-weight: 700; font-size: var(--fs-md); color: #33333f; text-decoration: underline; cursor: pointer; }
.ui-tour-card .ui-choice { background: #fff; color: #15151c; border-color: #cfcfdb; }
.ui-tour-card .ui-choice[aria-pressed="true"] { border-color: #1d4ed8; background: #e4edff; }

/* How-to-play cards */
.ui-howto { display: flex; flex-direction: column; gap: 10px; margin: 0 0 var(--sp-md); padding: 0; list-style: none; counter-reset: howto; }
.ui-howto li { counter-increment: howto; display: flex; align-items: center; gap: 14px; padding: 14px 16px;
  border-radius: 16px; background: var(--c-surface-2); font-size: var(--fs-lg); font-weight: 700; line-height: 1.25; }
.ui-howto li::before { content: counter(howto); width: 40px; height: 40px; flex: none; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center; background: var(--g, var(--c-primary)); color: #fff;
  font-family: var(--font-display); font-size: var(--fs-lg); }

/* ---------- Room code digits ---------- */
.ui-digits { display: flex; justify-content: center; gap: 10px; }
.ui-digit { width: 62px; height: 76px; border-radius: 16px; display: inline-flex; align-items: center; justify-content: center;
  font-family: var(--font-display); font-weight: 700; font-size: 2.4rem; line-height: 1;
  background: #eef0f6; color: #15151c; border: 2px solid #d5d8e3; }
.ui-codeinput { width: 100%; min-height: 76px; border-radius: 16px; border: 3px solid var(--c-border);
  background: var(--c-surface); color: var(--c-text); text-align: center; font-family: var(--font-display);
  font-weight: 700; font-size: 2.4rem; letter-spacing: .4em; padding: 4px 0 4px .4em; }
.ui-codeinput::placeholder { color: var(--c-text-muted); opacity: .45; }

/* Share buttons on the invite sheet: drawn icon plus a word, every time */
.ui-share { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; margin-top: 16px; }
.ui-share-btn { display: flex; flex-direction: column; align-items: center; gap: 6px; border: 0; background: none;
  cursor: pointer; font: inherit; font-weight: 700; font-size: var(--fs-min); color: var(--c-text);
  text-decoration: none; padding: 4px 0; min-height: var(--tap); }
.ui-share-btn:hover { color: var(--c-text); }
.ui-share-ico { width: 58px; height: 58px; border-radius: 16px; display: inline-flex; align-items: center;
  justify-content: center; color: #fff; }
.ui-share-ico .ui-ico { width: 26px; height: 26px; }
.ui-qr { display: flex; justify-content: center; margin: 4px 0 8px; }
.ui-qr svg { width: min(220px, 60vw); height: auto; background: #fff; border-radius: 16px; padding: 10px;
  border: 2px solid #d5d8e3; }

/* ---------- TV mode (full screen, across the room) ---------- */
.ui-tv { min-height: 100vh; background: #07070c; color: #fff; padding: 3vh 4vw; display: flex; flex-direction: column; }
.ui-tv-title { font-family: var(--font-display); font-weight: 700; font-size: clamp(2rem, 5vw, 4.5rem); line-height: 1.05; margin: 0; }
.ui-tv-join { position: fixed; right: 3vw; bottom: 3vh; display: flex; align-items: center; gap: 1.2vw;
  background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.16); border-radius: 22px; padding: 1.2vw 1.6vw; }
.ui-tv-join svg { width: clamp(90px, 9vw, 170px); height: auto; background: #fff; border-radius: 12px; padding: 6px; }
.ui-tv-code { font-family: var(--font-display); font-weight: 700; font-size: clamp(2rem, 4vw, 4rem); letter-spacing: .12em; line-height: 1; }

/* ---------- Moments worth animating ---------- */
/* Moving between pages: a quick slide from Home to Group to Game. */
@view-transition { navigation: auto; }
::view-transition-old(root) { animation: uiPageOut .16s ease-in both; }
::view-transition-new(root) { animation: uiPageIn .22s ease-out both; }
@keyframes uiPageOut { to { opacity: 0; transform: translateX(-14px); } }
@keyframes uiPageIn { from { opacity: 0; transform: translateX(18px); } }

/* Your turn: the card pulses. */
.ui-needs.pulse { animation: uiTurnPulse 1.8s ease-in-out infinite; }
@keyframes uiTurnPulse {
  0%, 100% { box-shadow: 0 14px 34px rgba(255,138,31,.28), 0 0 0 0 rgba(255,178,46,.55); }
  50%      { box-shadow: 0 14px 34px rgba(255,138,31,.28), 0 0 0 10px rgba(255,178,46,0); }
}

/* Champion: a drumroll pause, then the trophy drops. */
.ui-trophy-drop { animation: uiTrophyDrop .9s cubic-bezier(.2, 1.4, .4, 1) both; }
@keyframes uiTrophyDrop {
  0%   { transform: translateY(-120vh) rotate(-18deg); opacity: 0; }
  60%  { transform: translateY(0) rotate(6deg); opacity: 1; }
  80%  { transform: translateY(-14px) rotate(-3deg); }
  100% { transform: translateY(0) rotate(0); }
}
.ui-drumroll { animation: uiDrumroll .09s linear infinite; }
@keyframes uiDrumroll { 0%, 100% { transform: translateX(-2px); } 50% { transform: translateX(2px); } }

/* Rank change: rows slide to their new spots. */
.ui-rank-move { transition: transform .6s cubic-bezier(.2, .8, .2, 1); }
.ui-rank-up, .ui-rank-down { display: inline-flex; align-items: center; gap: 3px; font-weight: 700;
  font-size: var(--fs-min); padding: 3px 8px; border-radius: 999px; }
.ui-rank-up { color: var(--c-good); background: rgba(37,224,122,.16); }
.ui-rank-down { color: var(--c-danger-text); background: rgba(229,72,77,.14); }

/* ---------- Motion: keep the off switch ---------- */
@media (prefers-reduced-motion: reduce) {
  .ui-pill.live::before { animation: none; }
  .ui-btn, .ui-tour-hole, .ui-progress > span, .ui-rank-move { transition: none; }
  .ui-needs.pulse, .ui-trophy-drop, .ui-drumroll { animation: none; }
  ::view-transition-old(root), ::view-transition-new(root) { animation: none; }
}

/* ---------- Print ---------- */
@media print {
  .ui-tabs, .ui-topbar, .ui-flashes, .ui-undo, .no-print { display: none !important; }
}

/* ===== Older pages ===== */
/* The all-games list, compare picks, public results, the Pick'em invite page,
   Pick'em settings, the site-admin screens, the confirmation screen, and the
   players / organizer / podium partials. Classes here start with op- so they
   cannot collide with another section. */

/* Heading under the top bar */
.op-head { margin: var(--sp-sm) 0 var(--sp-md); }
.op-head .ui-hello { overflow-wrap: anywhere; }
.op-head .ui-kicker { color: var(--c-text-muted); margin-bottom: 2px; }

/* One thing (a game, a person, a question) with its buttons underneath */
.op-item-top { display: flex; align-items: flex-start; gap: 12px; }
.op-item-top > .ui-pill { flex: none; margin-left: auto; }
.op-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 8px; }
/* Admin > Users: giving a guest an email (or merging into an account). */
.admin-guest-email .ui-flex { align-items: stretch; gap: 8px; }
.admin-guest-email .ui-input { min-width: 0; }
.admin-guest-email .ui-btn { flex: none; }
.admin-guest-looks-like { margin: 0 0 8px; }
/* Group settings > Buy-ins: one tap per name, saved in place. */
.hgr-buyin-btn { width: 100%; border: 0; border-radius: 0; padding: 6px 0; background: none; cursor: pointer;
  text-align: left; font: inherit; height: auto; min-height: 56px; box-shadow: none; }
.hgr-buyin-btn .ui-row-title { color: var(--c-text); }
.buyin-row + .buyin-row .hgr-buyin-btn { border-top: 1px solid var(--c-border); }
.op-acts { display: flex; flex-wrap: wrap; gap: var(--sp-sm); margin-top: 14px; }
.op-acts > * { flex: 1 1 auto; margin: 0; }
.op-acts > form { display: flex; }
.op-acts > form > .ui-btn { flex: 1 1 auto; }
.op-acts > .op-quiet { flex: 0 1 auto; }
.op-list > * + * { margin-top: var(--sp-sm); }
ol.op-list, ul.op-list { list-style: none; margin: 0; padding: 0; }
.op-empty { text-align: center; color: var(--c-text-muted); }
.op-empty .ui-btn { margin-top: var(--sp-md); }
.op-empty .ui-card-title { color: var(--c-text); }
.op-wrap { overflow-wrap: anywhere; }
/* Spacing helpers, so templates need no inline style="" — the older spelling,
   kept for the admin and older pages that use them. New work: the ui-mt-md /
   ui-m0 … helpers at the top of this file. */
.op-flush { margin: 0; }
.op-mt { margin-top: var(--sp-md); }
.op-mt-sm { margin-top: var(--sp-sm); }
.op-mb { margin-bottom: var(--sp-md); }
.op-mb-sm { margin-bottom: var(--sp-sm); }
.op-pad-top { padding-top: var(--sp-lg); }
/* A link or code shown to be read and copied */
.op-linkbox { padding: 12px 14px; border-radius: 14px; border: 2px dashed var(--c-border);
  background: var(--c-surface-2); font-size: var(--fs-sm); line-height: 1.35; overflow-wrap: anywhere;
  user-select: all; }

/* Small labels: good / bad / plain. A drawn mark plus a word, never color alone. */
.ui-pill.op-good { background: color-mix(in srgb, var(--c-good) 16%, transparent); color: var(--c-good); }
.ui-pill.op-warn { background: color-mix(in srgb, var(--c-warning) 22%, transparent); color: var(--c-text); }
.ui-pill.op-bad  { background: color-mix(in srgb, var(--c-danger) 16%, transparent); color: var(--c-text); }
.ui-pill.op-bad .ui-ico { color: var(--c-danger); }
.op-meta .ui-pill .ui-ico { width: 1.15em; height: 1.15em; vertical-align: 0; }

/* Compare picks */
.op-vs-names { display: flex; align-items: center; justify-content: center; gap: 10px; flex-wrap: wrap; }
.op-vs-name { display: inline-flex; align-items: center; gap: 8px; min-width: 0; font-weight: 700;
  font-size: var(--fs-lg); overflow-wrap: anywhere; }
.op-vs-and { color: var(--c-text-muted); }
.compare-agreement { text-align: center; margin: 12px 0 10px; color: var(--c-text-muted); }
.compare-agreement strong { color: var(--c-text); }
.op-q { display: flex; gap: 12px; align-items: flex-start; font-weight: 700; line-height: 1.3; }
.op-qnum { flex: none; min-width: 36px; height: 36px; padding: 0 6px; border-radius: 10px;
  display: inline-flex; align-items: center; justify-content: center; background: var(--c-surface-2);
  color: var(--c-text-muted); font-family: var(--font-display); }
.op-qtext { min-width: 0; padding-top: 5px; overflow-wrap: anywhere; }
.op-picks { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-sm); margin-top: 12px; }
.op-pick { min-width: 0; padding: 10px 12px; border-radius: 14px; background: var(--c-surface-2); }
.op-pick-who { display: block; font-size: var(--fs-min); font-weight: 700; color: var(--c-text-muted);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.op-pick-what { display: block; margin-top: 2px; font-weight: 700; line-height: 1.25; overflow-wrap: anywhere; }
.op-pick-what.none { font-weight: 400; color: var(--c-text-muted); }
.op-mark { display: inline-flex; align-items: center; gap: 4px; margin-top: 6px; font-weight: 700;
  font-size: var(--fs-min); }
.op-mark.right .ui-ico { color: var(--c-good); }
.op-mark.wrong .ui-ico { color: var(--c-danger); }
.compare-row.compare-agree { border-color: color-mix(in srgb, var(--c-good) 55%, var(--c-border)); }
.ui-card + .op-list, .gh-hero + .op-list { margin-top: var(--sp-sm); }

/* Ranked list (public results) */
.op-rank { flex: none; width: 44px; height: 44px; border-radius: 50%; display: inline-flex;
  align-items: center; justify-content: center; font-family: var(--font-display); font-weight: 700;
  font-size: var(--fs-lg); background: var(--c-surface-2); color: var(--c-text); }
.op-rank.r1 { background: linear-gradient(135deg, #f0cf6b, #c9a227); color: #3d2e04; }
.op-rank.r2 { background: linear-gradient(135deg, #c4c4cf, #8a8a97); color: #26262e; }
.op-rank.r3 { background: linear-gradient(135deg, #c68d55, #a05c34); color: #33180a; }
.op-pts { flex: none; text-align: right; font-family: var(--font-display); font-weight: 700;
  font-size: var(--fs-xl); line-height: 1; color: var(--c-text); }
.op-pts small { display: block; margin-top: 4px; font-family: var(--font); font-weight: 400;
  font-size: var(--fs-min); color: var(--c-text-muted); }
.op-foot { margin-top: var(--sp-lg); text-align: center; color: var(--c-text-muted); font-size: var(--fs-sm); }
.op-foot .ui-btn { margin-top: var(--sp-sm); }

/* Confirmation screen (confirm_action.html) */
.confirm-screen .ui-confirm { padding-left: 0; padding-right: 0; padding-top: var(--sp-sm); }
.confirm-screen .ui-confirm h1 { overflow-wrap: anywhere; }
.confirm-screen .ui-losslist li span { min-width: 0; overflow-wrap: anywhere; }
.op-keeplist .ui-ico { color: var(--c-good); }
.op-cannot-undo { margin: 0 0 var(--sp-md); font-weight: 700; color: var(--c-text); }
.confirm-form + .confirm-no { margin-top: var(--sp-sm); }

/* A tick box with its words: the whole line is the tap target */
.op-check { display: flex; align-items: center; gap: 12px; min-height: var(--tap); margin: 0; cursor: pointer;
  font-weight: 700; font-size: var(--fs-md); color: var(--c-text); }
.op-check input[type="checkbox"] { flex: none; width: 26px; height: 26px; min-height: 0; margin: 0;
  accent-color: var(--c-primary); }
.op-check.danger { color: var(--c-text); }
.gh-hero + .ui-card, .gh-hero + form { margin-top: var(--sp-sm); }

/* Podium reveal: a real button to move on (tapping anywhere still works) */
#sbv2-overlay .sbv2-continue { position: absolute; left: 18px; right: 18px; z-index: 2;
  bottom: max(22px, calc(env(safe-area-inset-bottom, 0px) + 14px)); max-width: 420px; margin: 0 auto; }
@media (prefers-reduced-motion: reduce) { #sbv2-overlay { transition: none; } }

/* A quiet link-button that deletes: red words, still a full-size target */
.ui-btn.quiet.op-danger-link { color: var(--c-danger-text); }
.op-flip { transform: rotate(180deg); }

/* Admin: site numbers in a row */
.op-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--sp-sm); text-align: center; }
.op-stat-n { display: block; font-family: var(--font-display); font-weight: 700; font-size: var(--fs-2xl); line-height: 1.05; }
.op-stat-w { display: block; font-size: var(--fs-min); font-weight: 700; color: var(--c-text-muted); }
/* Admin: one Pick'em game, and the groups playing it */
.op-event { margin-top: var(--sp-md); }
.op-event .ui-seclabel { margin-top: var(--sp-lg); }
.op-note { display: flex; gap: 10px; align-items: flex-start; margin-top: var(--sp-sm); padding: 12px 14px;
  border-radius: 14px; background: color-mix(in srgb, var(--c-warning) 18%, var(--c-surface));
  border: 1px solid color-mix(in srgb, var(--c-warning) 45%, var(--c-border)); font-size: var(--fs-md); line-height: 1.35; }
.op-note span { min-width: 0; overflow-wrap: anywhere; }
.op-pool { padding: 12px 14px; border-radius: 14px; background: var(--c-surface-2); }
.op-pool .op-acts { margin-top: 10px; }
.op-pool-name { display: inline-flex; align-items: center; min-height: var(--tap); font-weight: 700;
  font-size: var(--fs-md); color: var(--c-link); overflow-wrap: anywhere; }
/* Survey Builder: a section heading between questions */
.op-section { list-style: none; font-family: var(--font-display); font-weight: 600; font-size: var(--fs-md);
  letter-spacing: .08em; text-transform: uppercase; color: var(--c-text-muted); padding: var(--sp-sm) 2px 0; }
.op-list > .op-section + * { margin-top: 6px; }

/* Players fold (_members_panel.html) */
.event-members-panel, .transfer-admin { margin-top: var(--sp-md); }
.event-members-panel > summary { flex-wrap: wrap; }
.event-members-panel > summary .ep-paid-count { margin-left: auto; }
.event-members-panel .ep-row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: 8px 12px; padding: 8px 0; border-bottom: 1px solid var(--c-border); }
.event-members-panel .ep-row:last-child { border-bottom: 0; }
.event-members-panel .ep-who { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; min-width: 0; flex: 1 1 12rem; }
.event-members-panel .ep-name { display: inline-flex; align-items: center; gap: 8px; min-height: var(--tap);
  font-weight: 700; font-size: var(--fs-md); color: var(--c-text); white-space: normal; overflow: visible;
  overflow-wrap: anywhere; }
.event-members-panel a.ep-name { color: var(--c-link); }
.event-members-panel .ep-guest { margin: 0; font-size: var(--fs-min); }
.event-members-panel .ep-form { margin: 0; flex: none; }
/* The status marker keeps its old hgr-pay hook but looks like a pill */
.event-members-panel .hgr-pay.paid, .event-members-panel .hgr-pay.unpaid { width: auto; height: auto; border-radius: 999px;
  box-shadow: none; font-weight: 700; font-size: var(--fs-min); }
.event-members-panel .hgr-pay.paid { background: color-mix(in srgb, var(--c-good) 16%, transparent); color: var(--c-good); }
.event-members-panel .hgr-pay.unpaid { background: color-mix(in srgb, var(--c-danger) 14%, transparent); color: var(--c-text); }
.event-members-panel .hgr-pay.unpaid .ui-ico { color: var(--c-danger); }

/* Hand-over confirmation (_transfer_admin.html): a sheet that fills a phone */
.op-sheet-confirm { padding-top: var(--sp-lg); }
.op-sheet-confirm h1 { overflow-wrap: anywhere; }
@media (max-width: 699px) { .ui-sheet.op-sheet-confirm { min-height: 88vh; } }
/* End of "Older pages" */

/* ===== Other games ===== */
/* Bingo, Trivia, Squares, Bracket pool, Game night and Polls. Classes here
   start with ui-og- (shared by the six pages) or with the game's own name
   (ui-bingo-, ui-quiz-, ui-sq-, ui-bk-, ui-sg-, ui-poll-). */

/* ---------- Shared by the six pages ---------- */
.ui-og-live { display: block; }
.ui-og-main { margin: 0 0 var(--sp-md); }
.ui-og-gap { margin-top: var(--sp-md); }
.ui-og-section { margin-top: var(--sp-lg); }
.ui-og-section > .ui-card + .ui-card, .ui-og-section > form + form { margin-top: var(--sp-md); }
.ui-og-inline { margin: 0; display: inline-flex; flex: none; }
.ui-og-lead { font-size: var(--fs-lg); line-height: 1.35; margin: 0; }
.ui-og-note { margin: var(--sp-sm) 0; font-size: var(--fs-md); line-height: 1.4; color: var(--c-text-muted); }
.ui-og-delete { margin-top: var(--sp-lg); color: var(--c-danger-text); }
.ui-og-delete:hover { color: var(--c-danger-text); }
.ui-seclabel .ui-og-count { font-family: var(--font); letter-spacing: 0; text-transform: none; font-weight: 700;
  font-size: var(--fs-sm); color: var(--c-text-muted); }
.ui-og-card-head { display: flex; align-items: center; gap: 10px; margin: 0 0 var(--sp-sm); }
.ui-og-card-head .ui-card-title { flex: 1; min-width: 0; }

/* A win: a drawn trophy plus words on gold */
.ui-og-win { display: flex; align-items: center; gap: 12px; margin: 0 0 var(--sp-md); padding: 14px 16px;
  border-radius: 16px; background: linear-gradient(135deg, #ffe082, #ffb300); color: #3b2a00;
  font-family: var(--font-display); font-weight: 700; font-size: var(--fs-xl); line-height: 1.15; }
.ui-og-win .ui-ico { width: 1.5em; height: 1.5em; }

/* A plain list: words on the left, one button on the right */
.ui-og-list { list-style: none; margin: 0; padding: 0; }
.ui-og-line { display: flex; align-items: center; gap: 10px; min-height: var(--tap-lg); padding: 6px 0;
  border-bottom: 1px solid var(--c-border); }
.ui-og-line:last-child { border-bottom: 0; }
.ui-og-line-text { flex: 1; min-width: 0; font-weight: 700; font-size: var(--fs-md); line-height: 1.25;
  overflow-wrap: anywhere; }
.ui-og-line-sub { display: block; font-weight: 400; font-size: var(--fs-sm); color: var(--c-text-muted); }
.ui-og-line.done .ui-og-line-text { color: var(--c-good); }
.ui-og-line .ui-btn { padding-left: 14px; padding-right: 14px; }

/* People: an avatar and a name */
.ui-og-people { list-style: none; margin: var(--sp-sm) 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.ui-og-people li { display: inline-flex; align-items: center; gap: 8px; padding: 5px 14px 5px 5px;
  border-radius: 999px; background: var(--c-surface-2); font-weight: 700; font-size: var(--fs-md); }

/* A leaderboard: place, name, score */
.ui-og-ranks { list-style: none; margin: 0; padding: 0; }
.ui-og-rank { display: flex; align-items: center; gap: 12px; min-height: var(--tap-lg); padding: 8px 4px;
  border-bottom: 1px solid var(--c-border); }
.ui-og-rank:last-child { border-bottom: 0; }
.ui-og-rank.me { background: var(--c-selected-bg); border-radius: 12px; border-bottom-color: transparent;
  padding-left: 8px; padding-right: 8px; }
.ui-og-place { flex: none; width: 40px; height: 40px; border-radius: 50%; display: inline-flex;
  align-items: center; justify-content: center; background: var(--c-surface-2); color: var(--c-text);
  font-family: var(--font-display); font-weight: 700; font-size: var(--fs-lg); }
.ui-og-rank.first .ui-og-place { background: linear-gradient(135deg, #f0cf6b, #c9a227); color: #3d2e04; }
.ui-og-who { flex: 1; min-width: 0; }
.ui-og-name { display: block; font-weight: 700; font-size: var(--fs-md); line-height: 1.2; overflow-wrap: anywhere; }
.ui-og-sub { display: block; font-size: var(--fs-sm); color: var(--c-text-muted); line-height: 1.3; }
.ui-og-you { display: inline-block; margin-left: 4px; padding: 2px 8px; border-radius: 999px;
  background: var(--c-text); color: var(--c-bg); font-size: var(--fs-min); font-weight: 700; }   /* readable in both themes */
.ui-og-score { flex: none; text-align: right; font-family: var(--font-display); font-weight: 700;
  font-size: var(--fs-xl); line-height: 1; color: var(--c-text); }
.ui-og-unit { font-family: var(--font); font-weight: 400; font-size: var(--fs-min); color: var(--c-text-muted); }

/* Round / step buttons in a row (never a swipe) */
.ui-og-steps { display: flex; flex-wrap: wrap; gap: var(--sp-sm); margin: 0 0 var(--sp-sm); }
.ui-og-steps .ui-choice { flex: 1 1 auto; min-width: 0; }

/* Two things side by side that stack on a narrow phone */
.ui-og-pair { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-sm); }
@media (max-width: 340px) { .ui-og-pair { grid-template-columns: 1fr; } }
.ui-og-team { display: inline-flex; align-items: center; gap: 8px; min-width: 0; font-weight: 700; }
.ui-og-team > span { min-width: 0; overflow-wrap: anywhere; }

/* ---------- Bingo ---------- */
.ui-bingo-hint { display: flex; align-items: flex-start; gap: 8px; margin: 0 0 var(--sp-sm);
  font-size: var(--fs-md); line-height: 1.35; color: var(--c-text-muted); }
.ui-bingo-hint.one-away { padding: 12px 14px; border-radius: 14px; color: var(--c-text); font-weight: 700;
  font-size: var(--fs-lg); border: 2px solid var(--c-warning-dk);
  background: color-mix(in srgb, var(--c-warning) 20%, var(--c-surface)); }
.ui-bingo-hint.one-away .ui-ico { color: var(--c-warning-dk); margin-top: 2px; }
.ui-bingo-grid { display: grid; gap: 6px; grid-template-columns: repeat(5, minmax(0, 1fr));
  grid-auto-rows: minmax(68px, auto); }
.ui-bingo-grid.n4 { grid-template-columns: repeat(4, minmax(0, 1fr)); grid-auto-rows: minmax(84px, auto); }
.ui-bingo-grid.n3 { grid-template-columns: repeat(3, minmax(0, 1fr)); grid-auto-rows: minmax(104px, auto); }
.ui-bingo-slot { margin: 0; display: flex; min-width: 0; }
.ui-bingo-cell { position: relative; width: 100%; min-width: 0; min-height: var(--tap); display: flex;
  align-items: center; justify-content: center; text-align: center; padding: 8px 3px; border-radius: 12px;
  border: 2px solid var(--c-border); background: var(--c-surface); color: var(--c-text); font: inherit;
  font-family: var(--font-display); font-weight: 500; font-size: var(--fs-min); line-height: 1.12;
  letter-spacing: .01em; overflow-wrap: anywhere; hyphens: auto; cursor: pointer;
  -webkit-tap-highlight-color: transparent; }
.ui-bingo-cell > span { min-width: 0; max-width: 100%; }
div.ui-bingo-cell { cursor: default; }
.ui-bingo-cell.called { border-color: var(--g); box-shadow: inset 0 0 0 2px var(--g); font-weight: 700; }
.ui-bingo-cell.waiting { border-style: dashed; color: var(--c-text-muted); }
.ui-bingo-cell.marked { background: var(--g); border-color: var(--g2); color: #03211d; font-weight: 700; }
.ui-bingo-cell.free { flex-direction: column; gap: 2px; }
.ui-bingo-cell.need { border-color: var(--c-warning-dk); border-width: 3px;
  background: color-mix(in srgb, var(--c-warning) 26%, var(--c-surface)); font-weight: 700;
  animation: uiBingoNeed 1.8s ease-in-out infinite; }
.ui-bingo-tick { position: absolute; top: 3px; right: 3px; width: 16px; height: 16px; stroke-width: 3.4; }
/* The winning line lights up one square after the other */
.ui-bingo-cell.win { animation: uiBingoWin .5s ease forwards; animation-delay: calc(var(--w, 0) * .25s); }
.ui-bingo-cell.w1 { --w: 1; } .ui-bingo-cell.w2 { --w: 2; } .ui-bingo-cell.w3 { --w: 3; } .ui-bingo-cell.w4 { --w: 4; }
@keyframes uiBingoWin {
  0%   { transform: scale(1); }
  45%  { transform: scale(1.14); background: #fff3c4; border-color: #b7791f; color: #3b2a00; }
  100% { transform: scale(1); background: #ffc530; border-color: #b7791f; color: #3b2a00;
         box-shadow: 0 0 0 3px rgba(255,179,0,.35); }
}
@keyframes uiBingoNeed {
  0%, 100% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--c-warning) 60%, transparent); }
  50%      { box-shadow: 0 0 0 5px color-mix(in srgb, var(--c-warning) 0%, transparent); }
}
@media (prefers-reduced-motion: reduce) {
  .ui-bingo-cell.win { animation: none; background: #ffc530; border-color: #b7791f; color: #3b2a00; }
  .ui-bingo-cell.need { animation: none; }
}

/* ---------- TV boards (bingo, trivia) ---------- */
.ui-og-tv-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 3vw;
  margin-bottom: 3vh; }
.ui-og-tv-kicker { font-size: clamp(1rem, 1.8vw, 1.8rem); color: #a3a3b5; margin-bottom: .6vh; }
.ui-og-tv-count { flex: none; font-size: clamp(1.1rem, 2.2vw, 2.2rem); color: #d8d8e6; }
.ui-og-tv-count strong { font-family: var(--font-display); font-size: 1.6em; color: #fff; }
.ui-og-tv-label { display: flex; align-items: center; gap: .5em; margin: 0 0 1vh; font-family: var(--font-display);
  font-weight: 600; letter-spacing: .08em; text-transform: uppercase; font-size: clamp(1rem, 1.5vw, 1.5rem);
  color: #a3a3b5; }
.ui-tv-join.ui-og-tv-join { position: static; }
.ui-og-tv-close { position: fixed; left: 3vw; bottom: 3vh; color: #fff; border-color: rgba(255,255,255,.3);
  opacity: .55; }
.ui-og-tv-close:hover, .ui-og-tv-close:focus-visible { opacity: 1; color: #fff; }
.ui-tv .ui-og-live { flex: 1; display: flex; flex-direction: column; min-height: 0; }
.ui-bingo-tv-body { flex: 1; display: grid; grid-template-columns: minmax(0, 1fr) clamp(240px, 26vw, 460px);
  gap: 3vw; align-items: start; }
.ui-bingo-tv-grid { list-style: none; margin: 0; padding: 0; display: grid; gap: 1.2vw;
  grid-template-columns: repeat(auto-fill, minmax(clamp(150px, 17vw, 300px), 1fr)); }
.ui-bingo-tv-tile { display: flex; flex-direction: column; justify-content: center; gap: .6vh; min-height: 11vh;
  padding: 1.2vh 1.2vw; border-radius: 18px; background: rgba(255,255,255,.08);
  border: 2px solid rgba(255,255,255,.14); font-family: var(--font-display); font-weight: 600;
  font-size: clamp(1.15rem, 2vw, 2.1rem); line-height: 1.12; overflow-wrap: anywhere; }
.ui-bingo-tv-tile.newest { background: linear-gradient(135deg, var(--g-bingo), var(--g-bingo-2)); color: #03211d;
  border-color: #fff; grid-column: span 2; font-size: clamp(1.5rem, 3vw, 3.2rem); animation: uiBingoWin .6s ease; }
.ui-bingo-tv-new { display: flex; align-items: center; gap: .4em; font-family: var(--font); font-weight: 700;
  font-size: clamp(.9rem, 1.2vw, 1.3rem); letter-spacing: .04em; opacity: .85; }
.ui-bingo-tv-empty { font-size: clamp(1.4rem, 3vw, 3rem); color: #d8d8e6; margin: 8vh 0; }
.ui-bingo-tv-side { display: flex; flex-direction: column; gap: 3vh; }
.ui-bingo-tv-winners { border-radius: 22px; padding: 2vh 1.6vw; background: rgba(255,194,75,.12);
  border: 2px solid rgba(255,194,75,.4); }
.ui-bingo-tv-winners ul { list-style: none; margin: 0; padding: 0; }
.ui-bingo-tv-winners li, .ui-bingo-tv-winners p { margin: 0; font-family: var(--font-display); font-weight: 700;
  font-size: clamp(1.4rem, 2.6vw, 2.8rem); line-height: 1.2; overflow-wrap: anywhere; }
.ui-bingo-tv-winners p { color: #a3a3b5; font-weight: 500; }
@media (max-width: 760px) { .ui-bingo-tv-body { grid-template-columns: 1fr; }
  .ui-og-tv-head { flex-direction: column; align-items: flex-start; } }
@media (prefers-reduced-motion: reduce) { .ui-bingo-tv-tile.newest { animation: none; } }

/* ---------- Squares: the whole 10 by 10 board on one phone screen ---------- */
.ui-sq-money, .ui-sq-teams { margin-bottom: var(--sp-sm); }
.ui-sq-payouts { list-style: none; margin: var(--sp-sm) 0 0; padding: 0; display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; }
.ui-sq-payouts li { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 8px 4px;
  border-radius: 12px; background: var(--c-surface-2); text-align: center; }
.ui-sq-payouts span { font-size: var(--fs-min); color: var(--c-text-muted); font-weight: 700; }
.ui-sq-payouts strong { font-family: var(--font-display); font-size: var(--fs-lg); line-height: 1.1; }
@media (max-width: 340px) { .ui-sq-payouts { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.ui-sq-grid { display: grid; gap: 3px; }
.ui-sq-head, .ui-sq-row { display: grid; grid-template-columns: repeat(11, minmax(0, 1fr)); gap: 3px; }
.ui-sq-head { min-height: 34px; }
/* A row is one button (48px tall): the squares inside are too small to tap one by one. */
.ui-sq-row { width: 100%; min-height: var(--tap); padding: 0; margin: 0; border: 0; border-radius: 10px;
  background: none; color: inherit; font: inherit; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.ui-sq-row:hover, .ui-sq-row:focus-visible { outline: 3px solid var(--c-selected-border); outline-offset: 1px; }
.ui-sq-digit { display: flex; align-items: center; justify-content: center; min-width: 0; border-radius: 8px;
  background: var(--c-surface-2); color: var(--c-text-muted); font-family: var(--font-display); font-weight: 700;
  font-size: clamp(15px, 4.4vw, var(--fs-md)); line-height: 1; }
.ui-sq-digit.set { background: var(--g); color: #03210f; }
.ui-sq-cell { display: flex; align-items: center; justify-content: center; min-width: 0; overflow: hidden;
  border-radius: 8px; background: var(--av, transparent); color: #fff; font-weight: 700; line-height: 1;
  font-size: clamp(15px, 4.2vw, var(--fs-min)); letter-spacing: -.03em; text-shadow: 0 1px 1px rgba(0,0,0,.45); }
.ui-sq-cell.free { background: transparent; border: 2px dashed var(--c-border); }
.ui-sq-cell.mine { box-shadow: inset 0 0 0 3px var(--c-text); }
.ui-sq-cell.win { box-shadow: inset 0 0 0 3px #ffc530, 0 0 0 2px #b7791f; }
.ui-sq-cell.big { flex: none; width: var(--tap); height: var(--tap); border-radius: 12px; font-size: var(--fs-md);
  letter-spacing: 0; }
.ui-sq-legend { list-style: none; margin: var(--sp-sm) 0 0; padding: 0; display: flex; flex-wrap: wrap;
  gap: 6px 16px; font-size: var(--fs-sm); color: var(--c-text-muted); }
.ui-sq-legend li { display: inline-flex; align-items: center; gap: 8px; }
.ui-sq-key { width: 32px; height: 32px; flex: none; }
.ui-sq-zoom-sub { font-family: var(--font); font-weight: 400; font-size: var(--fs-md); color: var(--c-text-muted); }

/* ---------- Trivia ---------- */
.ui-quiz-host { margin-bottom: var(--sp-md); border: 2px solid var(--g); }
.ui-quiz-wait { margin-bottom: var(--sp-md); }
.ui-quiz-q { margin: 0 0 var(--sp-md); padding: 0; border: 0; min-width: 0; }
.ui-quiz-kicker { color: var(--c-text-muted); margin-bottom: 4px; }
.ui-quiz-text { display: block; width: 100%; margin: 0 0 var(--sp-sm); padding: 0; font-family: var(--font-display);
  font-weight: 700; font-size: var(--fs-xl); line-height: 1.2; overflow-wrap: anywhere; }
.ui-quiz-timer { margin: 0 0 var(--sp-sm); }
.ui-quiz-timer .ui-progress > span { transition: width .2s linear; }
.ui-quiz-secs { display: inline-flex; align-items: center; gap: 6px; margin-top: 6px; font-weight: 700;
  font-size: var(--fs-md); }
.ui-quiz-slot { margin: 0; }
.ui-quiz-slot + .ui-quiz-slot { margin-top: 12px; }
.ui-quiz-opts .ui-opt { min-height: 72px; }
.ui-quiz-letter { flex: none; width: 36px; height: 36px; border-radius: 10px; display: inline-flex;
  align-items: center; justify-content: center; background: var(--g); color: #04121f;
  font-family: var(--font-display); font-weight: 700; font-size: var(--fs-md); }
.ui-opt.right { border-color: var(--c-good); background: color-mix(in srgb, var(--c-good) 16%, var(--c-surface)); opacity: 1; }
.ui-opt.wrong { border-color: var(--c-danger); opacity: 1; }
.ui-quiz-opts.revealed .ui-opt:not(.right) { opacity: .7; }
.ui-quiz-tag { flex: none; display: inline-flex; align-items: center; gap: 4px; font-size: var(--fs-min);
  font-weight: 700; color: var(--c-text-muted); }
.ui-quiz-tag.right { color: var(--c-good); }
.ui-quiz-steps { display: flex; justify-content: space-between; gap: 8px; font-weight: 700; font-size: var(--fs-md);
  color: var(--c-text-muted); margin-bottom: 6px; }
.ui-quiz-bar { margin-bottom: var(--sp-md); }
.ui-quiz-pick { display: block; }
.ui-quiz-pick + .ui-quiz-pick { margin-top: 12px; }
.ui-quiz-pick .ui-og-line-sub { margin-top: 2px; }
.ui-quiz-pick > input:focus-visible + .ui-opt { outline: 3px solid var(--c-selected-border); outline-offset: 2px; }
.ui-quiz-review + .ui-quiz-review { margin-top: var(--sp-sm); }
.ui-quiz-choice-row { display: flex; align-items: center; gap: 10px; }
.ui-quiz-choice-row .ui-check { flex: none; }
.ui-quiz-choice-row input[type="text"] { flex: 1; min-width: 0; }

/* Trivia on the TV (dark screen, like the bingo board) */
.ui-quiz-tv-main { min-width: 0; }
.ui-quiz-tv-q { margin: 0 0 3vh; font-family: var(--font-display); font-weight: 700;
  font-size: clamp(1.8rem, 4.2vw, 4.4rem); line-height: 1.12; overflow-wrap: anywhere; }
.ui-quiz-tv-timer { display: flex; align-items: center; gap: 2vw; margin: 0 0 3vh; font-family: var(--font-display);
  font-weight: 700; font-size: clamp(1.6rem, 3.4vw, 3.6rem); }
.ui-quiz-tv-timer .ui-progress { flex: 1; height: 1.4vh; min-height: 10px; background: rgba(255,255,255,.12); }
.ui-quiz-tv-timer .ui-progress > span { transition: width .2s linear; }
.ui-quiz-tv-opts { list-style: none; margin: 0 0 2vh; padding: 0; display: grid; gap: 1.4vw;
  grid-template-columns: repeat(2, minmax(0, 1fr)); }
.ui-quiz-tv-opts li { display: flex; align-items: center; gap: 1.2vw; min-height: 11vh; padding: 1.4vh 1.4vw;
  border-radius: 18px; background: rgba(255,255,255,.08); border: 2px solid rgba(255,255,255,.14);
  font-family: var(--font-display); font-weight: 600; font-size: clamp(1.3rem, 2.4vw, 2.6rem); line-height: 1.12; }
.ui-quiz-tv-opts .l { flex: none; width: 1.7em; height: 1.7em; border-radius: 12px; display: inline-flex;
  align-items: center; justify-content: center; background: var(--g); color: #04121f; font-weight: 700; }
.ui-quiz-tv-opts .t { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.ui-quiz-tv-opts .c { flex: none; font-size: .8em; color: #d8d8e6; }
.ui-quiz-tv-opts.revealed li { opacity: .45; }
.ui-quiz-tv-opts.revealed li.right { opacity: 1; background: #16a34a; border-color: #fff; color: #fff; }
.ui-quiz-tv-podium { list-style: none; margin: 0; padding: 0; }
.ui-quiz-tv-podium li { display: flex; align-items: center; gap: 1.4vw; padding: 1.2vh 0;
  border-bottom: 1px solid rgba(255,255,255,.14); font-family: var(--font-display); font-weight: 700;
  font-size: clamp(1.6rem, 3.4vw, 3.6rem); line-height: 1.1; }
.ui-quiz-tv-podium.small li { font-size: clamp(1.1rem, 1.9vw, 2rem); }
.ui-quiz-tv-podium .p { flex: none; width: 1.6em; color: #a3a3b5; }
.ui-quiz-tv-podium .n { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.ui-quiz-tv-podium .s { flex: none; color: #ffc24b; }
.ui-quiz-tv-podium li.first .n { color: #ffc24b; }
.ui-quiz-tv-host { margin-top: 1vh; }
@media (max-width: 760px) { .ui-quiz-tv-opts { grid-template-columns: 1fr; } }
@media (prefers-reduced-motion: reduce) {
  .ui-quiz-timer .ui-progress > span, .ui-quiz-tv-timer .ui-progress > span { transition: none; }
}

/* ---------- Game night ---------- */
.ui-sg-board .ui-og-rank { gap: 10px; }
.ui-sg-board .ui-og-place .ui-ico { width: 22px; height: 22px; }
.ui-sg-quick { flex: none; display: inline-flex; gap: 6px; }
.ui-sg-quick .ui-btn { min-width: var(--tap); padding-left: 10px; padding-right: 10px; }
.ui-sg-delta { font-size: var(--fs-lg); color: var(--c-good); }
.ui-sg-delta.neg { color: var(--c-danger-text); }

/* ---------- Bracket pool: one round under the other, never sideways ---------- */
.ui-bk-round { margin: var(--sp-md) 0 var(--sp-sm); font-family: var(--font-display); font-weight: 700;
  font-size: var(--fs-lg); }
.ui-bk-games { list-style: none; margin: 0; padding: 0; }
.ui-bk-game { padding: 8px 14px; }
.ui-bk-game + .ui-bk-game { margin-top: var(--sp-sm); }
.ui-bk-team { display: flex; align-items: center; gap: 8px; min-height: 40px; font-weight: 700; font-size: var(--fs-md); }
.ui-bk-team + .ui-bk-team { border-top: 1px solid var(--c-border); }
.ui-bk-team.won .ui-bk-name { color: var(--c-good); }
.ui-bk-team.out .ui-bk-name { color: var(--c-text-muted); font-weight: 400; }
.ui-bk-seed { flex: none; min-width: 2.2em; font-size: var(--fs-min); font-weight: 700; color: var(--c-text-muted); }
.ui-bk-name { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.ui-bk-mine { display: flex; align-items: center; gap: 6px; padding: 6px 0 2px; border-top: 1px dashed var(--c-border); }
.ui-bk-mine.right { color: var(--c-good); font-weight: 700; }
.ui-bk-mine.wrong { color: var(--c-danger-text); }
.ui-bk-pick { margin: 0; min-width: 0; }
fieldset.ui-bk-pick:not(.ui-card) { padding: 0; border: 0; }
.ui-bk-pick + .ui-bk-pick { margin-top: var(--sp-sm); }
.ui-bk-opt { min-height: 64px; font-size: var(--fs-md); }
.ui-bk-result { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-sm); }
.ui-bk-result + .ui-bk-result { margin-top: var(--sp-sm); }
.ui-bk-result form { margin: 0; }
.ui-bk-result > .ui-og-note { grid-column: 1 / -1; margin: 0; }

/* ---------- Polls: big answer buttons with the result bar behind ---------- */
.ui-poll-slot { margin: 0; }
.ui-poll-slot + .ui-poll-slot { margin-top: 12px; }
.ui-poll-opt { position: relative; overflow: hidden; isolation: isolate; }
.ui-poll-opt > *:not(.ui-poll-bar) { position: relative; z-index: 1; }
.ui-poll-bar { position: absolute; inset: 0 auto 0 0; z-index: 0; background: color-mix(in srgb, var(--g) 26%, transparent);
  transition: width .4s ease; }
.ui-poll-opt.lead .ui-poll-bar { background: color-mix(in srgb, var(--g) 42%, transparent); }
.ui-poll-opt.locked { opacity: 1; }
.ui-poll-num { flex: none; text-align: right; font-family: var(--font-display); font-size: var(--fs-xl); line-height: 1; }
.ui-poll-num .ui-og-line-sub { font-family: var(--font); font-size: var(--fs-min); margin-top: 4px; }
@media (prefers-reduced-motion: reduce) { .ui-poll-bar { transition: none; } }
/* End of "Other games" */

/* ===== Me ===== */
/* The Me tab (a trophy case), the Leaderboard, Notifications and the Admin
   screen. Classes here start with me-, lb-, nt- or adm-. */

/* Accent tints: dark ink on a pale tint in Easy-read, bright on dim in dark. */
.me-page, .lb-page, .nt-page, .adm-page {
  --me-gold: #7a5200;   --me-gold-bg: #fbe9b7;
  --me-silver: #3f4654; --me-silver-bg: #e1e4ea;
  --me-green: var(--c-good); --me-green-bg: #d5f0dd;
  --me-tint: var(--c-link);  --me-tint-bg: var(--c-selected-bg);
}
html[data-theme="dark"] .me-page, html[data-theme="dark"] .lb-page,
html[data-theme="dark"] .nt-page, html[data-theme="dark"] .adm-page {
  --me-gold: #ffc24b;   --me-gold-bg: rgba(255,194,75,.16);
  --me-silver: #d5d8e3; --me-silver-bg: rgba(213,216,227,.14);
  --me-green-bg: rgba(74,222,128,.15);
}
.me-page > .ui-hello, .lb-page > .ui-hello, .nt-page > .ui-hello, .adm-page > .ui-hello { margin-top: var(--sp-sm); }

/* Top bar: Admin and Settings sit beside Help and look like it */
.me-topbtn { flex-direction: column; gap: 0; padding: 4px 10px; font-size: var(--fs-min); line-height: 1.1; }
.me-topbtn .ui-ico { width: 1.7em; height: 1.7em; }

/* Round icon chip used by badges, notifications and admin rows */
.me-badge-ico { width: 2.6rem; height: 2.6rem; flex: none; border-radius: 50%; display: inline-flex;
  align-items: center; justify-content: center; background: var(--me-tint-bg); color: var(--me-tint); }

.me-notice { margin-top: var(--sp-md); }
.me-notice .ui-btn { margin-top: var(--sp-md); }

/* Who this is */
.me-hero { display: flex; align-items: center; gap: var(--sp-md); margin-top: var(--sp-md); }
.me-hero-text { min-width: 0; }
.me-name { margin: 0; font-weight: 700; font-size: var(--fs-2xl); line-height: 1.1; color: var(--c-text);
  overflow-wrap: anywhere; }

/* Trophy shelf: three big numbers, each with a drawn icon and a word */
.me-shelf { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--sp-sm);
  margin-top: var(--sp-md); }
.me-trophy { display: flex; flex-direction: column; align-items: center; gap: 6px; min-width: 0;
  padding: 14px 4px 12px; text-align: center; background: var(--c-surface);
  border: 1px solid var(--c-border); border-radius: var(--card-radius); }
.me-trophy-ico { width: 3rem; height: 3rem; flex: none; border-radius: 50%; display: inline-flex;
  align-items: center; justify-content: center; font-size: 1.2rem;
  background: var(--me-tint-bg); color: var(--me-tint); }
.me-trophy.gold .me-trophy-ico   { background: var(--me-gold-bg);   color: var(--me-gold); }
.me-trophy.silver .me-trophy-ico { background: var(--me-silver-bg); color: var(--me-silver); }
.me-trophy.green .me-trophy-ico  { background: var(--me-green-bg);  color: var(--me-green); }
.me-trophy-num { font-family: var(--font-display); font-weight: 700; font-size: var(--fs-3xl); line-height: 1;
  color: var(--c-text); }
.me-trophy-word { min-width: 0; font-weight: 700; font-size: var(--fs-min); line-height: 1.2; color: var(--c-text-muted); }
/* Bigger text or a narrow phone: the shelf becomes three rows, so the words
   never get squeezed. */
html[data-text-size="large"] .me-shelf, html[data-text-size="xlarge"] .me-shelf { grid-template-columns: 1fr; }
html[data-text-size="large"] .me-trophy, html[data-text-size="xlarge"] .me-trophy {
  flex-direction: row; gap: 14px; padding: 10px 16px; text-align: left; }
html[data-text-size="large"] .me-trophy-num, html[data-text-size="xlarge"] .me-trophy-num { min-width: 1.4em; text-align: center; }
html[data-text-size="large"] .me-trophy-word, html[data-text-size="xlarge"] .me-trophy-word { font-size: var(--fs-md); }
@media (max-width: 374px) {
  .me-shelf { grid-template-columns: 1fr; }
  .me-trophy { flex-direction: row; gap: 14px; padding: 10px 16px; text-align: left; }
  .me-trophy-num { min-width: 1.4em; text-align: center; }
  .me-trophy-word { font-size: var(--fs-md); }
}

/* Badges earned */
.me-badges { list-style: none; margin: var(--sp-sm) 0 0; padding: 0; display: grid; gap: var(--sp-sm);
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 16rem), 1fr)); }
.me-badge { display: flex; align-items: center; gap: 12px; min-width: 0; padding: 10px 14px;
  background: var(--c-surface); border: 1px solid var(--c-border); border-radius: var(--card-radius); }
.me-badge .me-badge-ico { background: var(--me-gold-bg); color: var(--me-gold); }
.me-nobadges { margin-top: var(--sp-md); }
.me-notif-link { margin-top: var(--sp-md); }

/* Rivalries: two faces, then the record in words */
.me-pair { display: inline-flex; flex: none; }
.me-pair .ui-avatar + .ui-avatar { margin-left: -10px; box-shadow: 0 0 0 3px var(--c-surface); }

/* History: where you finished, at the end of the row */
.me-result { flex: none; max-width: 44%; text-align: right; font-weight: 700; font-size: var(--fs-sm);
  line-height: 1.2; color: var(--c-text-muted); }
.me-result.won { color: var(--me-gold); }
.me-result.live { color: var(--c-good); }
.me-result .ui-ico { width: 1.15em; height: 1.15em; vertical-align: -0.2em; }
.me-showall { margin-top: var(--sp-sm); }

/* Plain counts */
.me-stats { margin: 0; padding: 4px var(--sp-md); }
.me-stat { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; padding: 12px 0; }
.me-stat + .me-stat { border-top: 1px solid var(--c-border); }
.me-stat dt { min-width: 0; font-size: var(--fs-md); line-height: 1.25; color: var(--c-text); overflow-wrap: anywhere; }
.me-stat dd { margin: 0; flex: none; max-width: 50%; text-align: right; font-weight: 700; font-size: var(--fs-lg);
  line-height: 1.2; color: var(--c-text); }
.me-stat-hint { display: block; margin-top: 2px; font-size: var(--fs-min); color: var(--c-text-muted); }

/* ---- Leaderboard ---- */
.lb-mine { margin-top: var(--sp-md); font-weight: 700; font-size: var(--fs-md); border-color: var(--c-selected-border);
  background: var(--c-selected-bg); }
.lb-mine .ui-ico { color: var(--me-gold); }
.lb-list { margin-top: var(--sp-md); }
.lb-rank { flex: none; width: 2.2rem; height: 2.2rem; border-radius: 50%; display: inline-flex;
  align-items: center; justify-content: center; font-family: var(--font-display); font-weight: 700;
  font-size: var(--fs-md); background: var(--c-surface-2); color: var(--c-text); }
.lb-rank.top { background: var(--me-gold-bg); color: var(--me-gold); }
.lb-row.lb-you { border-color: var(--c-selected-border); background: var(--c-selected-bg); }
.lb-youtag { margin-left: 4px; vertical-align: 2px; background: var(--c-selected-border); color: #fff; }
/* Facts wrap as whole phrases; no separator dots, which end up at the start
   of a line once they wrap. */
.lb-facts { display: flex; flex-wrap: wrap; column-gap: 0.9em; margin-top: 3px; font-size: var(--fs-sm);
  line-height: 1.4; color: var(--c-text-muted); }
.lb-facts b { color: var(--c-text); }
.lb-facts > span { white-space: nowrap; }

/* ---- Notifications ---- */
/* Home > What's new: the unread notifications, one row each. */
.home-notifs-label { display: flex; align-items: center; gap: 8px; }
.home-notifs { margin-top: 0; }
.home-notifs-actions { margin-top: var(--sp-sm); }
.home-notifs-actions > form { margin: 0; display: flex; }
.nt-actions { margin-top: var(--sp-md); }
.nt-actions > form { flex: 1 1 0; min-width: 130px; margin: 0; display: flex; }
@media (max-width: 520px) { .nt-actions > form { flex: 1 1 100%; } }
.nt-list { margin-top: var(--sp-md); }
.nt-item { display: flex; align-items: stretch; overflow: hidden; background: var(--c-surface);
  border: 1px solid var(--c-border); border-radius: var(--card-radius); }
.nt-item + .nt-item { margin-top: var(--sp-sm); }
.nt-item.new { border-color: var(--c-selected-border); }
.nt-main { flex: 1; min-width: 0; display: flex; align-items: center; gap: 12px; min-height: 68px;
  padding: 10px 8px 10px 14px; color: var(--c-text); text-decoration: none;
  -webkit-tap-highlight-color: transparent; }
a.nt-main:hover { color: var(--c-text); background: var(--c-surface-2); }
.nt-text { font-weight: 400; }
.nt-item.new .nt-text { font-weight: 700; }
.nt-new { font-weight: 700; color: var(--c-link); }
.nt-item > form { margin: 0; display: flex; }
.nt-remove { display: inline-flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
  min-width: 4.6rem; min-height: var(--tap); padding: 6px 10px; border: 0; border-left: 1px solid var(--c-border);
  background: none; color: var(--c-text-muted); font: inherit; font-weight: 700; font-size: var(--fs-min);
  line-height: 1.1; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.nt-remove:hover { color: var(--c-text); background: var(--c-surface-2); }
.nt-main:focus-visible, .nt-remove:focus-visible { outline: 3px solid var(--c-selected-border); outline-offset: -3px; }
.nt-alerts { margin-top: var(--sp-sm); }
.nt-clear-form { margin: var(--sp-lg) 0 var(--sp-sm); }
.nt-clear .ui-losslist li span { min-width: 0; }

/* ---- Admin ---- */
.adm-list { display: block; margin-top: var(--sp-md); }
/* End of "Me" */

/* ===== Party games ===== */
/* Quick Prop, Sweepstakes and Closest guess. Classes here start with
   ui-party- (shared by the three pages) or with the game's own name
   (ui-qp-, ui-sweep-, ui-guess-). Colors come from tokens only. */

/* ---- Shared by the three pages ---- */
.ui-party-gap { margin-top: var(--sp-sm); }
.ui-party-share { margin: var(--sp-sm) 0 var(--sp-md); }
.ui-party-count { color: var(--c-text-muted); }
.ui-party-empty { margin: 0; }
.ui-party-small { display: block; margin-top: 2px; font-size: var(--fs-sm); font-weight: 400; color: var(--c-text-muted); }
.ui-party-why { display: flex; align-items: flex-start; gap: 8px; margin: var(--sp-sm) 2px 0; }
.ui-party-why .ui-ico { margin-top: 1px; }
.ui-party-lead { font-size: var(--fs-lg); line-height: 1.3; margin: 0 0 var(--sp-sm); overflow-wrap: anywhere; }
.ui-btn.ui-party-keep { margin-top: var(--sp-sm); }
.ui-btn.ui-party-delete { margin-top: var(--sp-lg); color: var(--c-text); }
.ui-btn.ui-party-delete .ui-ico { color: var(--c-danger); }
.ui-party-answers .ui-opt[disabled] { opacity: .55; cursor: default; }

/* A calm card: a drawn icon, a line, and what happens next */
.ui-party-note { display: flex; align-items: center; gap: 14px; }
.ui-party-note > .ui-ico { flex: none; color: var(--c-text-muted); }
.ui-party-note p { margin-bottom: 0; }
.ui-party-note .ui-card-title { overflow-wrap: anywhere; }
.ui-party-winner { border: 2px solid color-mix(in srgb, var(--c-warning) 75%, var(--c-border));
  background: color-mix(in srgb, var(--c-warning) 16%, var(--c-surface)); }
.ui-party-winner > .ui-ico { color: color-mix(in srgb, var(--c-warning) 55%, var(--c-text)); }
.ui-party-tag { display: inline-flex; align-items: center; gap: 4px; padding: 3px 9px; border-radius: 999px;
  font-size: var(--fs-min); font-weight: 700; line-height: 1.2; white-space: nowrap; vertical-align: 2px;
  color: var(--c-good); background: color-mix(in srgb, var(--c-good) 15%, transparent); }
.ui-party-tag .ui-ico { width: 1.1em; height: 1.1em; vertical-align: 0; }

/* The board: one row per person, best first */
.ui-party-board { list-style: none; margin: 0; padding: 0; }
.ui-party-board .ui-row.me { border-color: var(--c-selected-border); background: var(--c-selected-bg); }
.ui-party-board .ui-row.won { border-color: color-mix(in srgb, var(--c-warning) 75%, var(--c-border));
  background: color-mix(in srgb, var(--c-warning) 14%, var(--c-surface)); }
.ui-party-board .ui-row-sub .ui-ico { width: 1.1em; height: 1.1em; vertical-align: -0.2em; }
.ui-party-board .ui-row > form { margin: 0; flex: none; }
.ui-party-rank { flex: none; width: 2.2rem; height: 2.2rem; border-radius: 50%; display: inline-flex;
  align-items: center; justify-content: center; font-family: var(--font-display); font-weight: 700;
  font-size: var(--fs-lg); background: var(--c-surface-2); color: var(--c-text); }
.ui-party-score { flex: none; text-align: right; font-family: var(--font-display); font-weight: 700;
  font-size: var(--fs-xl); line-height: 1; color: var(--c-text); }
.ui-party-score small { display: block; margin-top: 4px; font-family: var(--font); font-weight: 400;
  font-size: var(--fs-min); color: var(--c-text-muted); }
.ui-party-score.wide { max-width: 46%; font-size: var(--fs-lg); line-height: 1.15; overflow-wrap: anywhere; }

/* A list inside a card, each line with its own Remove button */
.ui-party-list { list-style: none; margin: 0; padding: 0; }
.ui-party-list li { display: flex; align-items: center; gap: 10px; min-height: var(--tap-lg);
  border-bottom: 1px solid var(--c-border); }
.ui-party-list li:last-child { border-bottom: 0; }
.ui-party-list li > form { margin: 0; flex: none; }
.ui-party-list .ui-btn.quiet { padding: 10px 6px; }
.ui-party-list-name { flex: 1; min-width: 0; font-weight: 700; overflow-wrap: anywhere; }
.ui-party-addform { margin: var(--sp-md) 0 0; padding-top: var(--sp-md); border-top: 1px solid var(--c-border); }

/* A chip or an answer card with a hidden radio / checkbox under it: the
   whole shape is the tap target */
.ui-party-pick { position: relative; display: block; flex: 1 1 0; min-width: 96px; margin: 0; cursor: pointer; }
.ui-party-pick.wide { flex: 1 1 40%; min-width: 130px; }
.ui-party-pick.opt { min-width: 0; }
.ui-party-pick.opt + .ui-party-pick.opt { margin-top: 12px; }
.ui-party-pick > input { position: absolute; inset: 0; width: 100%; height: 100%; min-height: 0; margin: 0;
  opacity: 0; cursor: pointer; }
.ui-party-pick > .ui-choice { display: flex; width: 100%; height: 100%; overflow-wrap: anywhere; }
.ui-party-pick > input:focus-visible + .ui-choice,
.ui-party-pick > input:focus-visible + .ui-opt { outline: 3px solid var(--c-selected-border); outline-offset: 2px; }
/* The button that stays in reach at the bottom of a long sheet */
.ui-party-stick { position: sticky; bottom: 0; margin-top: var(--sp-md); padding: var(--sp-sm) 0 var(--sp-sm);
  background: var(--c-surface); }

/* ---- Quick Prop ---- */
.ui-qp-live > .ui-card, .ui-qp-live > .ui-fold, .ui-qp-live > .ui-btn { margin-top: var(--sp-sm); }
.ui-qp-live > .gh-hero + * { margin-top: 0; }
.ui-qp-live p { margin-bottom: 0; }
.ui-flash.ui-qp-notice { margin-bottom: var(--sp-sm); }
.ui-qp-now { border: 2px solid var(--g, var(--c-primary)); }
.ui-qp-timer { display: flex; align-items: center; gap: 8px; font-weight: 700; font-size: var(--fs-lg);
  color: var(--c-text); }
.ui-qp-timer.soon { color: var(--c-danger-text); }
.ui-qp-timer.over { color: var(--c-text-muted); }
.ui-qp-secs { font-family: var(--font-display); font-size: var(--fs-xl); }
.ui-qp-bar { margin-top: 8px; }
.ui-qp-bar > span { background: var(--g, var(--c-primary)); transition: width .25s linear; }
.ui-qp-timer.soon + .ui-qp-bar > span { background: var(--c-danger); }
.ui-qp-ask { font-family: var(--font-display); font-weight: 700; font-size: var(--fs-2xl); line-height: 1.12;
  letter-spacing: .01em; margin: 12px 0 4px; overflow-wrap: anywhere; }
.ui-qp-answers { margin: var(--sp-md) 0 0; }
.ui-qp-closeform { margin: var(--sp-md) 0 0; }
.ui-qp-grade form { margin: 0; }
.ui-qp-grade .ui-btn.quiet { margin-top: var(--sp-sm); }
.ui-qp-gradelabel { margin: var(--sp-md) 0 var(--sp-sm); }
.ui-qp-result .ui-card-title { overflow-wrap: anywhere; }
.ui-qp-mine { margin: 6px 0 0; font-weight: 700; color: var(--c-text-muted); }
.ui-qp-mine.right { color: var(--c-good); }
.ui-qp-split { margin-top: 14px; }
.ui-qp-split-top { display: flex; align-items: baseline; justify-content: space-between; gap: 10px;
  margin-bottom: 6px; font-weight: 700; }
.ui-qp-split-name { min-width: 0; overflow-wrap: anywhere; }
.ui-qp-split-n { flex: none; color: var(--c-text-muted); }
.ui-qp-split .ui-progress > span { background: var(--c-text-muted); }
.ui-qp-split.right .ui-progress > span { background: var(--c-good); }
.ui-qp-fix { margin-top: var(--sp-md); }
.ui-qp-fix > summary { list-style: none; }
.ui-qp-fix > summary::-webkit-details-marker { display: none; }
.ui-qp-fix > form { margin: var(--sp-sm) 0 0; }
.ui-qp-earlier .ui-card { background: var(--c-surface-2); }
@media (prefers-reduced-motion: reduce) { .ui-qp-bar > span { transition: none; } }

/* ---- Sweepstakes ---- */
.ui-sweep-tickets { display: grid; gap: var(--sp-sm); margin-bottom: var(--sp-md); }
.ui-sweep-ticket { padding: 16px 18px; border-radius: var(--card-radius); color: var(--c-text);
  border: 3px dashed var(--g, var(--c-primary));
  background: color-mix(in srgb, var(--g, var(--c-primary)) 16%, var(--c-surface)); }
.ui-sweep-ticket .ui-kicker { display: block; color: var(--c-text-muted); }
.ui-sweep-ticket-name { display: block; margin-top: 4px; font-family: var(--font-display); font-weight: 700;
  font-size: var(--fs-2xl); line-height: 1.1; overflow-wrap: anywhere; }
.ui-sweep-ticket.won { border-style: solid; }
.ui-sweep-held { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
.ui-sweep-chip { display: inline-block; padding: 4px 11px; border-radius: 999px; font-size: var(--fs-sm);
  font-weight: 700; line-height: 1.3; background: var(--c-surface-2); color: var(--c-text); overflow-wrap: anywhere; }
.ui-sweep-chip.won { background: color-mix(in srgb, var(--c-warning) 45%, var(--c-surface)); }
/* The reveal: dealt in one by one, the first time you see the draw */
.reveal .ui-sweep-deal { animation: uiSweepDeal .55s cubic-bezier(.2, .8, .2, 1) both;
  animation-delay: calc(min(var(--i, 0), 14) * 130ms + 200ms); }
@keyframes uiSweepDeal {
  from { opacity: 0; transform: translateY(22px) scale(.92) rotate(-2deg); }
  to   { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) { .reveal .ui-sweep-deal { animation: none; } }

/* ---- Closest guess ---- */
.ui-guess-form .ui-btn { margin-top: var(--sp-md); }
.ui-guess-field { display: flex; align-items: center; gap: 12px; }
.ui-page input.ui-guess-num { flex: 1; min-width: 0; min-height: 5rem; padding: 6px 12px; text-align: center;
  font-family: var(--font-display); font-weight: 700; font-size: var(--fs-3xl); line-height: 1.1;
  border-width: 3px; border-radius: 18px; }
.ui-guess-unit { flex: none; max-width: 40%; font-weight: 700; font-size: var(--fs-lg); color: var(--c-text-muted);
  overflow-wrap: anywhere; }
.ui-guess-real { text-align: center; }
.ui-guess-real-num { display: block; margin-top: 2px; font-family: var(--font-display); font-weight: 700;
  font-size: var(--fs-3xl); line-height: 1.1; overflow-wrap: anywhere; }
.ui-guess-walkin > form.ui-fold-body, .ui-guess-fix > form.ui-fold-body { margin: 0; }
/* End of "Party games" */

/* ===== Tournaments ===== */
/* The match, start and confirm screens are built from the tokens, so they
   follow the theme. So does the tournament page itself (.tv-shell); every
   rule for it is scoped to .tv-shell. The TV screen (.ui-tvb) stays dark on
   purpose: it is shown across a room. */

.ui-ico.sport { width: 1.6em; height: 1.6em; }

/* ---------- Match screen ---------- */
.ui-t-top { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-top: var(--sp-sm); }
.ui-t-where { margin: 8px 0 var(--sp-md); font-size: var(--fs-md); font-weight: 700; color: var(--c-text-muted);
  line-height: 1.35; }
.ui-t-team { position: relative; border-radius: 20px; padding: 14px 16px 16px; background: var(--c-surface);
  border: 2px solid var(--c-border); color: var(--c-text); }
.ui-t-team.lead { border-color: var(--g-tournament); }
.ui-t-team.won { border-color: var(--c-good); }
.ui-t-team.lost { opacity: .72; }
.ui-t-team-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; }
.ui-t-team-name { font-family: var(--font-display); font-weight: 700; font-size: var(--fs-xl); line-height: 1.12;
  margin: 0; overflow-wrap: anywhere; }
.ui-t-team-people { font-size: var(--fs-sm); color: var(--c-text-muted); margin-top: 2px; }
.ui-t-chip { flex: none; display: inline-flex; align-items: center; gap: 5px; font-weight: 700;
  font-size: var(--fs-min); line-height: 1; padding: 7px 11px; border-radius: 999px; white-space: nowrap;
  background: var(--c-surface-2); color: var(--c-text); }
.ui-t-chip.lead { background: var(--g-tournament); color: #2a1700; }
.ui-t-chip.won { background: var(--c-good); color: var(--c-bg); }   /* readable in both themes */
html[data-theme="dark"] .ui-t-chip.won, .theme-dark-scope .ui-t-chip.won { color: #04140b; }
.ui-t-chip.you { background: var(--c-selected-bg); color: var(--c-link); }
.ui-t-scorerow { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 10px; }
.ui-t-scorerow form { margin: 0; flex: none; }
.ui-t-score { flex: 1; text-align: center; font-family: var(--font-display); font-weight: 700; font-size: 3.4rem;
  line-height: 1; font-variant-numeric: tabular-nums; color: var(--c-text); }
.ui-t-round { width: 64px; height: 64px; border-radius: 50%; border: 2px solid var(--c-border); cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center; background: var(--c-surface-2);
  color: var(--c-text); -webkit-tap-highlight-color: transparent; transition: transform .1s ease; }
.ui-t-round .ui-ico { width: 30px; height: 30px; stroke-width: 2.8; }
.ui-t-round.plus { background: var(--g-tournament); border-color: var(--g-tournament); color: #2a1700; }
.ui-t-round:active { transform: scale(.94); }
.ui-t-round:focus-visible, .ui-t-add:focus-visible { outline: 3px solid var(--c-selected-border); outline-offset: 2px; }
.ui-t-adds { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-sm); margin-top: 12px; }
.ui-t-adds form { margin: 0; display: flex; }
.ui-t-add { flex: 1; min-height: 64px; border-radius: 16px; border: 0; cursor: pointer; padding: 8px 10px;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px;
  background: var(--g-tournament); color: #2a1700; font: inherit; font-weight: 700; font-size: var(--fs-min);
  line-height: 1.15; -webkit-tap-highlight-color: transparent; transition: transform .1s ease; }
.ui-t-add b { font-family: var(--font-display); font-size: var(--fs-xl); line-height: 1; }
.ui-t-add:active { transform: scale(.97); }
.ui-t-vs { text-align: center; font-family: var(--font-display); font-weight: 700; letter-spacing: .14em;
  text-transform: uppercase; font-size: var(--fs-min); color: var(--c-text-muted); margin: 8px 0; }
.ui-t-note { display: flex; gap: 10px; align-items: flex-start; margin-top: var(--sp-md); padding: 12px 14px;
  border-radius: 16px; background: var(--c-surface-2); color: var(--c-text); font-size: var(--fs-md);
  font-weight: 700; line-height: 1.35; }
.ui-t-note .ui-ico { flex: none; margin-top: 1px; color: var(--g-tournament-2); }
.ui-t-note.good .ui-ico { color: var(--c-good); }
.ui-t-ask { margin-top: var(--sp-md); border-radius: 20px; padding: 16px; color: #2a1700;
  background: linear-gradient(135deg, #ffb22e 0%, #ff8a1f 100%); }
.ui-t-ask h2 { font-family: var(--font-display); font-size: var(--fs-xl); line-height: 1.12; margin: 4px 0 4px; }
.ui-t-ask p { margin: 0 0 12px; font-weight: 700; font-size: var(--fs-md); line-height: 1.35; }
.ui-t-ask form { margin: 0; }
.ui-t-ask form + form { margin-top: var(--sp-sm); }
.ui-t-ask .ui-btn.outline { border-color: rgba(42,23,0,.5); color: #2a1700; }
.ui-t-won-btns { display: grid; gap: var(--sp-sm); }
.ui-t-won-btns form { margin: 0; }
.ui-t-won-btns .ui-btn { overflow-wrap: anywhere; }
.ui-t-next { display: block; }
.ui-t-next-teams { font-weight: 700; font-size: var(--fs-lg); line-height: 1.2; overflow-wrap: anywhere; }
.ui-t-next form { margin: 12px 0 0; }
.ui-t-line { margin: 0; padding: 0; list-style: none; counter-reset: line; }
.ui-t-line li { counter-increment: line; display: flex; align-items: center; gap: 12px; padding: 10px 0;
  font-size: var(--fs-md); font-weight: 700; }
.ui-t-line li + li { border-top: 1px solid var(--c-border); }
.ui-t-line li::before { content: counter(line); width: 34px; height: 34px; flex: none; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center; background: var(--c-surface-2);
  font-family: var(--font-display); font-size: var(--fs-md); }
.ui-t-inline { display: flex; gap: var(--sp-sm); align-items: flex-end; flex-wrap: wrap; }
.ui-t-inline > * { flex: 1 1 120px; min-width: 0; }
.ui-t-inline > .ui-btn { flex: 0 0 auto; }
.ui-t-roundform { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-sm); }
.ui-t-roundform label { display: block; font-weight: 700; font-size: var(--fs-sm); margin-bottom: 6px;
  overflow-wrap: anywhere; }
.ui-t-roundform input { text-align: center; font-family: var(--font-display); font-size: var(--fs-xl); }
.ui-t-flash { display: flex; align-items: center; gap: 10px; margin-top: var(--sp-sm); padding: 8px 8px 8px 16px;
  border-radius: 16px; background: #15151c; color: #fff; font-weight: 700; font-size: var(--fs-md); }
.ui-t-flash span { flex: 1; min-width: 0; }
.ui-t-flash form { margin: 0; }
.ui-t-flash .ui-btn { background: #fff; color: #15151c; }
.ui-t-tools form { margin: 0; }
.ui-t-tools .ui-stack > * + * { margin-top: var(--sp-md); }

/* ---------- Start screen ---------- */
.ui-t-step { display: flex; align-items: center; gap: 10px; margin: var(--sp-lg) 0 var(--sp-sm);
  font-family: var(--font-display); font-weight: 700; font-size: var(--fs-lg); line-height: 1.15; }
.ui-t-step i { width: 34px; height: 34px; flex: none; border-radius: 50%; display: inline-flex; align-items: center;
  justify-content: center; font-style: normal; background: var(--g-tournament); color: #2a1700;
  font-size: var(--fs-md); }
.ui-t-games { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--sp-sm); }
@media (max-width: 360px) { .ui-t-games { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.ui-t-game { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px;
  min-height: 96px; padding: 10px 6px; border-radius: 16px; border: 3px solid var(--c-border); cursor: pointer;
  background: var(--c-surface); color: var(--c-text); font-weight: 700; font-size: var(--fs-sm); line-height: 1.15;
  text-align: center; -webkit-tap-highlight-color: transparent; }
.ui-t-game .ui-ico { width: 34px; height: 34px; color: var(--g-tournament-2); }
input:checked + .ui-t-game { border-color: var(--g-tournament); background: color-mix(in srgb, var(--g-tournament) 16%, var(--c-surface)); }
input:focus-visible + .ui-t-game, input:focus-visible + .ui-t-person, input:focus-visible + .ui-t-mode {
  outline: 3px solid var(--c-selected-border); outline-offset: 2px; }
.ui-t-people { display: flex; flex-wrap: wrap; gap: var(--sp-sm); }
.ui-t-person { display: inline-flex; align-items: center; gap: 8px; min-height: 56px; padding: 6px 16px 6px 8px;
  border-radius: 999px; border: 3px solid var(--c-border); background: var(--c-surface); color: var(--c-text);
  font: inherit; font-weight: 700; font-size: var(--fs-md); line-height: 1.15; cursor: pointer;
  -webkit-tap-highlight-color: transparent; }
.ui-t-person .tick { width: 34px; height: 34px; flex: none; border-radius: 50%; display: none; align-items: center;
  justify-content: center; background: var(--c-selected-border); color: #fff; }
.ui-t-person .tick .ui-ico { width: 20px; height: 20px; stroke-width: 3.2; }
input:checked + .ui-t-person, .ui-t-person.on { border-color: var(--c-selected-border); background: var(--c-selected-bg); }
input:checked + .ui-t-person .tick, .ui-t-person.on .tick { display: inline-flex; }
input:checked + .ui-t-person .ui-avatar, .ui-t-person.on .ui-avatar { display: none; }
.ui-t-count { margin: var(--sp-sm) 2px 0; font-weight: 700; font-size: var(--fs-md); color: var(--c-text-muted); }
.ui-t-mode { display: flex; align-items: center; gap: 14px; min-height: 76px; padding: 12px 16px; border-radius: 18px;
  border: 3px solid var(--c-border); background: var(--c-surface); color: var(--c-text); cursor: pointer;
  -webkit-tap-highlight-color: transparent; }
.ui-t-mode + input + .ui-t-mode, .ui-t-mode + .ui-t-mode { margin-top: var(--sp-sm); }
.ui-t-mode .ui-ico { width: 30px; height: 30px; flex: none; color: var(--g-tournament-2); }
.ui-t-mode b { display: block; font-size: var(--fs-lg); line-height: 1.2; }
.ui-t-mode span span { display: block; font-size: var(--fs-sm); color: var(--c-text-muted); margin-top: 2px; line-height: 1.3; }
input:checked + .ui-t-mode { border-color: var(--c-selected-border); background: var(--c-selected-bg); }
.ui-t-summary { margin: var(--sp-md) 2px var(--sp-sm); font-size: var(--fs-md); color: var(--c-text-muted);
  font-weight: 700; line-height: 1.35; }
.ui-t-startbar { margin-top: var(--sp-lg); }

/* ---------- Team draw ---------- */
.ui-t-draw { list-style: none; margin: var(--sp-md) 0; padding: 0; }
.ui-t-draw li { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 16px;
  background: var(--c-surface); border: 2px solid var(--c-border); }
.ui-t-draw li + li { margin-top: var(--sp-sm); }
.ui-t-draw li.locked { border-color: var(--g-tournament); }
.ui-t-draw-no { width: 34px; height: 34px; flex: none; border-radius: 50%; display: inline-flex; align-items: center;
  justify-content: center; background: var(--g-tournament); color: #2a1700; font-family: var(--font-display);
  font-weight: 700; font-size: var(--fs-md); }
.ui-t-reels { flex: 1; min-width: 0; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.ui-t-reel { flex: 1 1 110px; min-width: 0; height: 2.6rem; overflow: hidden; border-radius: 12px;
  background: var(--c-surface-2); }
.ui-t-reel-strip { display: flex; flex-direction: column; will-change: transform; }
.ui-t-reel-strip span { height: 2.6rem; display: flex; align-items: center; justify-content: center; padding: 0 8px;
  font-weight: 700; font-size: var(--fs-md); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ui-t-reel.spin .ui-t-reel-strip { transition: transform var(--spin, 1.6s) cubic-bezier(.12,.7,.2,1); }
.ui-t-amp { flex: none; font-weight: 700; color: var(--c-text-muted); }
@media (prefers-reduced-motion: reduce) {
  .ui-t-reel.spin .ui-t-reel-strip { transition: none; }
  .ui-t-round, .ui-t-add { transition: none; }
}

/* ---------- TV mode: the bracket, across the room ---------- */
.ui-tv.ui-tvb { padding: 2.5vh 2.5vw; gap: 2vh; --tvfs: clamp(var(--fs-min), calc(62vh / var(--rows, 4) / 3.4), 2.1rem); }
.ui-tvb-head { display: flex; align-items: center; gap: 2vw; flex-wrap: wrap; }
.ui-tvb-head .ui-tv-title { font-size: clamp(1.7rem, 4vw, 3.6rem); flex: 1; min-width: 0; }
.ui-tvb-sub { font-size: clamp(var(--fs-md), 1.6vw, 1.7rem); color: #c9c9da; font-weight: 700; }
.ui-tvb-close { color: #fff; border-color: rgba(255,255,255,.3); }
.ui-tvb-main { flex: 1; min-height: 0; display: flex; flex-direction: column; gap: 2vh;
  padding-right: clamp(0px, 16vw, 300px); }
.ui-tvb-now { display: flex; flex-wrap: wrap; gap: 1vw; }
.ui-tvb-nowcard { flex: 1 1 22vw; min-width: 250px; border-radius: 1.2vw; padding: 1.2vh 1.2vw;
  background: rgba(255,159,28,.14); border: 2px solid rgba(255,159,28,.55); }
.ui-tvb-nowcard .k { font-family: var(--font-display); font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
  font-size: clamp(var(--fs-min), 1.2vw, 1.3rem); color: #ffc24b; }
.ui-tvb-nowcard .t { font-weight: 700; font-size: clamp(var(--fs-md), 1.7vw, 1.9rem); line-height: 1.2; }
.ui-tvb-nowcard .s { font-family: var(--font-display); font-weight: 700; font-size: clamp(1.4rem, 2.6vw, 3rem); line-height: 1.1; }
.ui-tvb-label { font-family: var(--font-display); font-weight: 700; letter-spacing: .12em; text-transform: uppercase;
  font-size: clamp(var(--fs-min), 1.3vw, 1.4rem); color: #a3a3b5; margin: 0; }
.ui-tvb-bracket { flex: 1; min-height: 0; display: flex; gap: 1.2vw; }
.ui-tvb-col { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; }
.ui-tvb-col h2 { text-align: center; margin: 0 0 1vh; font-family: var(--font-display); font-weight: 700;
  letter-spacing: .1em; text-transform: uppercase; font-size: clamp(var(--fs-min), 1.3vw, 1.4rem); color: #a3a3b5; }
.ui-tvb-col-body { flex: 1; display: flex; flex-direction: column; justify-content: space-around; gap: 1vh; }
.ui-tvb-match { border-radius: .8vw; overflow: hidden; background: #16161f; border: 2px solid #2e2e40; font-size: var(--tvfs); }
.ui-tvb-match.live { border-color: #ff9f1c; }
.ui-tvb-tag { display: flex; justify-content: space-between; gap: 8px; padding: .2em .6em; font-weight: 700;
  font-size: max(.72em, var(--fs-min)); color: #a3a3b5; background: rgba(255,255,255,.04); }
.ui-tvb-match.live .ui-tvb-tag { color: #ffc24b; }
.ui-tvb-row { display: flex; align-items: center; gap: .5em; padding: .28em .6em; line-height: 1.2; }
.ui-tvb-row + .ui-tvb-row { border-top: 1px solid #2e2e40; }
.ui-tvb-row .n { flex: 1; min-width: 0; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ui-tvb-row .p { flex: none; font-family: var(--font-display); font-weight: 700; }
.ui-tvb-row.won .n, .ui-tvb-row.won .p { color: #4ade80; }
.ui-tvb-row.lost .n { color: #8e8ea3; text-decoration: line-through; }   /* 5.6:1 on the TV cards */
.ui-tvb-row.tbd .n { color: #8e8ea3; font-weight: 400; }
.ui-tvb-table { width: 100%; border-collapse: collapse; font-size: clamp(var(--fs-md), 1.7vw, 1.9rem); }
.ui-tvb-table th, .ui-tvb-table td { padding: .35em .6em; text-align: left; border-bottom: 1px solid #2e2e40; }
.ui-tvb-table th { font-size: max(.7em, var(--fs-min)); color: #a3a3b5; text-transform: uppercase; letter-spacing: .06em; }
.ui-tvb-table td.num, .ui-tvb-table th.num { text-align: right; font-family: var(--font-display); font-weight: 700; }
.ui-tvb-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 2vw; align-items: start; }
.ui-tvb-champ { text-align: center; margin: auto; }
.ui-tvb-champ .ui-ico { width: clamp(80px, 14vh, 180px); height: clamp(80px, 14vh, 180px); color: #ffc24b; }
.ui-tvb-champ .n { font-family: var(--font-display); font-weight: 700; font-size: clamp(2.4rem, 7vw, 6rem); line-height: 1.05; }
.ui-tv-join.ui-tvb-join { flex-direction: column; text-align: center; gap: .8vh; padding: 1.2vh 1vw; background: #16161f; }
.ui-tvb-join .w { font-size: clamp(var(--fs-min), 1.1vw, 1.2rem); color: #c9c9da; font-weight: 700; line-height: 1.25; }
@media (max-width: 900px) {
  .ui-tvb-main { padding-right: 0; }
  .ui-tvb-bracket { overflow-x: auto; }
  .ui-tvb-col { flex: 0 0 72vw; }
  .ui-tv-join.ui-tvb-join { position: static; align-self: center; margin-top: 2vh; }
}

/* ---------- The tournament page (.tv-shell) ---------- */
/* Surfaces and words come from the theme tokens. The gold stays gold; as a
   word (--tv-amber, --tv-red-text) it gets a deeper shade in Easy-read. */
.tv-shell {
  --tv-gold: #ffc24b; --tv-amber2: #f59e0b; --tv-red: #ff4d6d; --tv-mark: #ffc24b;
  --tv-amber: #ffc24b; --tv-amber-soft: rgba(255,194,75,.16); --tv-red-text: #ff8098;
  --tv-green: var(--c-good);
  --tv-bg: var(--c-bg); --tv-surf: var(--c-surface); --tv-surf2: var(--c-surface-2);
  --tv-line: var(--c-border); --tv-text: var(--c-text); --tv-muted: var(--c-text-muted); --tv-faint: var(--c-text-muted);
  --tv-tint: color-mix(in srgb, var(--c-text) 4%, transparent);
  --tv-edge: color-mix(in srgb, var(--c-text) 30%, transparent);
  --tv-shade: var(--card-shadow);
  color: var(--tv-text); }
html[data-theme="light"] .tv-shell {
  --tv-amber: #8a5000; --tv-amber-soft: rgba(245,158,11,.18); --tv-red-text: #b3263a; --tv-mark: var(--g-tournament); }
.tv-shell *, .tv-shell *::before, .tv-shell *::after { box-sizing: border-box; }
.tv-shell .tv-disp { font-family: var(--font-display); }
@keyframes tvPulseRed { 0% { box-shadow: 0 0 0 0 rgba(255,77,109,.6); } 70% { box-shadow: 0 0 0 7px rgba(255,77,109,0); } 100% { box-shadow: 0 0 0 0 rgba(255,77,109,0); } }
@keyframes tvPulseAmber { 0% { box-shadow: 0 0 0 0 rgba(255,194,75,.55); } 70% { box-shadow: 0 0 0 7px rgba(255,194,75,0); } 100% { box-shadow: 0 0 0 0 rgba(255,194,75,0); } }
@keyframes tvPop { 0% { transform: scale(.7); opacity: 0; } 60% { transform: scale(1.04); } 100% { transform: scale(1); opacity: 1; } }
@keyframes tvConfetti { 0% { transform: translateY(-30px) rotate(0); } 100% { transform: translateY(720px) rotate(680deg); } }

.tv-shell .tv-head { display: flex; align-items: center; gap: 12px; margin: var(--sp-sm) 0 var(--sp-md); flex-wrap: wrap; }
.tv-shell .tv-head-text { flex: 1; min-width: 0; }
.tv-shell .tv-title { margin: 0; font-family: var(--font-display); font-weight: 700; font-size: var(--fs-xl);
  letter-spacing: .01em; color: var(--tv-text); text-transform: uppercase; line-height: 1.08; overflow-wrap: anywhere; }
.tv-shell .tv-sub { font-size: var(--fs-sm); color: var(--tv-muted); margin-top: 3px; line-height: 1.35; }
.tv-shell .tv-actions { margin-bottom: var(--sp-md); }
.tv-shell .tv-actions .ui-btn.outline { color: var(--tv-text); border-color: var(--tv-edge); }
.tv-shell form { margin: 0; }

.tv-shell .tv-hero { position: relative; border-radius: 20px; overflow: hidden; margin-bottom: 18px;
  background: linear-gradient(140deg, #ffd166, #f59e0b); box-shadow: 0 16px 38px rgba(245,158,11,.32);
  color: #2a1c00; }
.tv-shell .tv-hero.calm { background: var(--tv-surf); box-shadow: var(--tv-shade);
  border: 1px solid var(--tv-line); color: var(--tv-text); }
.tv-shell .tv-hero .scrim { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(255,255,255,.18), rgba(0,0,0,.14)); }
.tv-shell .tv-hero.calm .scrim { display: none; }
.tv-shell .tv-hero .in { position: relative; padding: 18px 18px; }
.tv-shell .tv-kick { display: flex; align-items: center; gap: 8px; font-family: var(--font-display); font-weight: 700;
  letter-spacing: .12em; font-size: var(--fs-min); text-transform: uppercase; margin-bottom: 7px; }
.tv-shell .tv-hero.calm .tv-kick { color: var(--tv-amber); }
.tv-shell .tv-kick .d { width: 10px; height: 10px; border-radius: 50%; background: #b3001f; animation: tvPulseRed 1.5s infinite; }
.tv-shell .tv-hero h2 { margin: 0; font-family: var(--font-display); font-weight: 700; font-size: var(--fs-2xl);
  line-height: 1.05; overflow-wrap: anywhere; }
.tv-shell .tv-hero .meta { font-size: var(--fs-md); font-weight: 700; margin-top: 6px; }
.tv-shell .tv-hero .note { font-size: var(--fs-md); line-height: 1.4; margin-top: 8px; }
.tv-shell .tv-hero .wait { margin-top: 12px; display: flex; align-items: flex-start; gap: 8px; background: rgba(42,28,0,.14);
  border: 1px solid rgba(42,28,0,.2); border-radius: 12px; padding: 10px 12px; font-size: var(--fs-sm);
  font-weight: 700; line-height: 1.4; }
.tv-shell .tv-hero.calm .wait { background: var(--tv-surf2); border-color: var(--tv-line); color: var(--tv-muted); }
.tv-shell .tv-hero .ui-btn { margin-top: 14px; }

.tv-shell .tv-seclabel { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin: 22px 0 10px; }
.tv-shell .tv-seclabel .l { font-family: var(--font-display); font-weight: 700; font-size: var(--fs-md);
  letter-spacing: .1em; text-transform: uppercase; color: var(--tv-text); }
.tv-shell .tv-seclabel .r { font-size: var(--fs-min); color: var(--tv-muted); text-align: right; }

.tv-shell .tv-step { display: flex; gap: 14px; align-items: stretch; }
.tv-shell .tv-step .col { display: flex; flex-direction: column; align-items: center; flex: none; width: 36px; }
.tv-shell .tv-dot { width: 36px; height: 36px; border-radius: 50%; display: flex; align-items: center; justify-content: center;
  flex: none; }
.tv-shell .tv-dot .ui-ico { width: 20px; height: 20px; stroke-width: 2.8; }
.tv-shell .tv-dot.won { background: var(--tv-green); color: #04140b; }
.tv-shell .tv-dot.now { background: var(--tv-amber); color: #2a1c00; animation: tvPulseAmber 1.7s infinite; }
.tv-shell .tv-dot.live { background: var(--tv-red); color: #fff; animation: tvPulseRed 1.5s infinite; }
.tv-shell .tv-dot.champ { background: linear-gradient(135deg, #ffd166, #f59e0b); color: #2a1c00; }
.tv-shell .tv-dot.lock { background: transparent; border: 2px solid var(--tv-faint); color: var(--tv-faint); }
.tv-shell .tv-step .line { flex: 1; width: 2px; margin: 3px 0; min-height: 16px; background: var(--tv-line); }
.tv-shell .tv-step.won .line { background: rgba(55,217,154,.4); }
.tv-shell .tv-step .body { flex: 1; min-width: 0; padding-bottom: 16px; }
.tv-shell .tv-step .rl { font-family: var(--font-display); font-weight: 700; font-size: var(--fs-min); letter-spacing: .07em;
  text-transform: uppercase; color: var(--tv-amber); }
.tv-shell .tv-step .rl.won { color: var(--tv-green); }
.tv-shell .tv-step .rl.lost { color: #ff8098; }
.tv-shell .tv-step .rl.dim { color: var(--tv-faint); }
.tv-shell .tv-step .bg { font-size: var(--fs-md); font-weight: 700; color: var(--tv-text); margin-top: 1px; overflow-wrap: anywhere; }
.tv-shell .tv-step .bg.dim { color: var(--tv-faint); }
.tv-shell .tv-step .sm { font-size: var(--fs-min); color: var(--tv-muted); margin-top: 2px; }

.tv-shell .tv-ticker { background: var(--tv-surf); border: 1px solid var(--tv-line); border-radius: 16px; padding: 4px 6px;
  margin-bottom: 8px; }
.tv-shell .tv-trow { display: flex; align-items: center; gap: 10px; min-height: var(--tap); padding: 6px 8px;
  font-size: var(--fs-sm); color: var(--tv-text); text-decoration: none; border-radius: 12px; }
.tv-shell a.tv-trow:hover { background: var(--tv-surf2); color: var(--tv-text); }
.tv-shell .tv-trow + .tv-trow { border-top: 1px solid var(--tv-line); }
.tv-shell .tv-trow .now { display: inline-flex; align-items: center; gap: 6px; font-weight: 700; color: var(--tv-red-text);
  font-size: var(--fs-min); flex: none; min-width: 5.2rem; }
.tv-shell .tv-trow .now.wait { color: var(--tv-amber); }
.tv-shell .tv-trow .now .d { width: 8px; height: 8px; border-radius: 50%; background: var(--tv-red); animation: tvPulseRed 1.5s infinite; }
.tv-shell .tv-trow .nm { flex: 1; min-width: 0; color: var(--tv-text); line-height: 1.25; overflow-wrap: anywhere; }
.tv-shell .tv-trow .sc { flex: none; font-weight: 700; color: var(--tv-amber); font-family: var(--font-display);
  font-size: var(--fs-lg); }

.tv-shell .tv-acc-btn { width: 100%; min-height: var(--tap-lg); display: flex; align-items: center;
  justify-content: space-between; gap: 10px; cursor: pointer; background: #160f1f; border: 1px solid var(--tv-line);
  border-radius: 14px; padding: 10px 15px; color: var(--tv-text); font: inherit; }
.tv-shell .tv-acc-btn .l { display: inline-flex; align-items: center; gap: 8px; font-family: var(--font-display);
  font-weight: 700; font-size: var(--fs-md); letter-spacing: .08em; text-transform: uppercase; }
.tv-shell .tv-acc-btn .r { font-size: var(--fs-min); font-weight: 700; color: var(--tv-muted); }
.tv-shell .tv-pills { display: flex; align-items: center; gap: 8px; padding: 12px 0 10px; flex-wrap: wrap; }
.tv-shell .tv-pillbtn { flex: none; min-height: var(--tap); border: 0; cursor: pointer; padding: 8px 16px;
  border-radius: 999px; font: inherit; font-weight: 700; font-size: var(--fs-min); display: inline-flex;
  align-items: center; gap: 6px; background: var(--tv-surf2); color: var(--tv-text); }
.tv-shell .tv-pillbtn.on { background: linear-gradient(135deg, #ffd166, #f59e0b); color: #2a1c00; }
.tv-shell .tv-asbtn { display: inline-flex; align-items: center; gap: 8px; min-height: var(--tap);
  border: 1px solid var(--tv-line); background: var(--tv-surf2); color: var(--tv-text); border-radius: 999px;
  padding: 8px 16px; font-size: var(--fs-sm); font-weight: 700; text-decoration: none; cursor: pointer; }
.tv-shell .tv-asbtn:hover { border-color: var(--tv-amber); color: var(--tv-amber); }
.tv-shell .tv-following { display: flex; align-items: center; justify-content: space-between; gap: 8px; flex-wrap: wrap;
  margin-bottom: 10px; font-size: var(--fs-sm); color: var(--tv-muted); }
.tv-shell .tv-following strong { color: var(--tv-amber); }
.tv-shell .tv-following a { display: inline-flex; align-items: center; min-height: var(--tap); color: var(--tv-text);
  font-weight: 700; }

.tv-shell .bracket-outer { overflow-x: auto; padding-bottom: 10px; scroll-behavior: smooth; }
.tv-shell .bracket { display: flex; gap: 12px; min-width: max-content; }
.tv-shell .bracket-round { display: flex; flex-direction: column; width: 244px; flex: none; }
.tv-shell .round-header { text-align: center; font-size: var(--fs-min); font-weight: 700; color: var(--tv-muted);
  padding: 0 4px 9px; text-transform: uppercase; letter-spacing: .1em; font-family: var(--font-display); }
.tv-shell .round-body { display: flex; flex-direction: column; justify-content: space-around; align-items: stretch;
  gap: 12px; flex: 1; }
.tv-shell .bracket-match { display: block; border: 1px solid var(--tv-line); border-radius: 14px; overflow: hidden;
  background: var(--tv-surf); box-shadow: var(--tv-shade); color: var(--tv-text); text-decoration: none; }
.tv-shell a.bracket-match:hover { color: var(--tv-text); border-color: var(--tv-amber); }
.tv-shell a.bracket-match:focus-visible { outline: 3px solid var(--tv-amber); outline-offset: 2px; }
.tv-shell .bracket-match.tv-mine { border: 2px solid var(--tv-mark);
  box-shadow: 0 0 0 1px rgba(255,194,75,.22), 0 10px 26px rgba(255,170,40,.24);
  background: linear-gradient(180deg, rgba(255,194,75,.09), var(--tv-surf)); }
.tv-shell .bracket-match.tv-livematch { border: 2px solid rgba(255,77,109,.55); }
.tv-shell .tv-matchhdr { display: flex; align-items: center; justify-content: space-between; gap: 6px; flex-wrap: wrap;
  padding: 6px 10px; background: var(--tv-tint); border-bottom: 1px solid var(--tv-line); }
.tv-shell .tv-matchhdr .lbl { font-family: var(--font-display); font-weight: 700; letter-spacing: .05em;
  font-size: var(--fs-min); color: var(--tv-muted); text-transform: uppercase; }
.tv-shell .tv-tag { font-size: var(--fs-min); font-weight: 700; padding: 3px 9px; border-radius: 999px; white-space: nowrap; }
.tv-shell .tv-tag.live { background: rgba(255,77,109,.18); color: var(--tv-red-text); }
.tv-shell .tv-tag.you { background: var(--tv-gold); color: #2a1c00; }
.tv-shell .tv-tag.next { background: var(--tv-amber-soft); color: var(--tv-amber); }
.tv-shell .tv-tag.done { background: var(--tv-surf2); color: var(--tv-muted); }
.tv-shell .bracket-entrant { display: flex; align-items: center; gap: 8px; padding: 9px 11px; font-size: var(--fs-sm);
  min-height: 46px; width: 100%; color: var(--tv-text); border-bottom: 1px solid var(--tv-line); }
.tv-shell .bracket-entrant .nm { flex: 1; min-width: 0; font-weight: 700; line-height: 1.2; overflow-wrap: anywhere; }
.tv-shell .bracket-entrant.winner .nm { color: var(--tv-text); }
.tv-shell .bracket-entrant.loser .nm { color: var(--tv-faint); text-decoration: line-through; font-weight: 400; }
.tv-shell .bracket-entrant.bye, .tv-shell .bracket-entrant .slot-tbd { color: var(--tv-faint); font-style: italic;
  font-size: var(--fs-min); font-weight: 400; }
.tv-shell .bracket-entrant.pending .nm { color: var(--tv-muted); }
.tv-shell .seed-chip { font-size: var(--fs-min); font-weight: 700; color: var(--tv-muted); background: var(--tv-surf2);
  border-radius: 6px; padding: 2px 6px; min-width: 26px; text-align: center; flex: none; }
.tv-shell .you-chip { font-size: var(--fs-min); font-weight: 700; background: var(--tv-gold); color: #2a1c00;
  border-radius: 6px; padding: 1px 6px; margin-left: 6px; white-space: nowrap; }
.tv-shell .score-chip { font-family: var(--font-display); font-weight: 700; font-size: var(--fs-lg); color: var(--tv-muted);
  flex: none; }
.tv-shell .score-chip.winner-score { color: var(--tv-green); }
.tv-shell .tv-matchftr { display: flex; align-items: center; justify-content: space-between; gap: 6px; min-height: 40px;
  padding: 6px 11px; font-size: var(--fs-min); font-weight: 700; color: var(--tv-text); background: var(--tv-surf2); }
.tv-shell .tv-matchftr .go { display: inline-flex; align-items: center; gap: 2px; color: var(--tv-amber); }
.tv-shell .tv-dim .bracket-match:not(.tv-mine) { opacity: .3; }
.tv-shell .tv-trophy { display: flex; flex-direction: column; justify-content: center; align-items: center; flex: none; width: 84px; }
.tv-shell .tv-trophy span { width: 60px; height: 60px; border-radius: 16px; display: flex; align-items: center;
  justify-content: center; background: var(--tv-surf2); color: var(--tv-faint); }
.tv-shell .tv-trophy span.lit { background: linear-gradient(135deg, #ffd166, #f59e0b); color: #2a1c00;
  box-shadow: 0 0 0 1px rgba(255,194,75,.4), 0 0 28px rgba(255,194,75,.5); }
.tv-shell .tv-trophy .ui-ico { width: 32px; height: 32px; }
.tv-shell .tv-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 12px; }
.tv-shell .tv-roundname { font-family: var(--font-display); font-size: var(--fs-min); font-weight: 700; color: var(--tv-muted);
  text-transform: uppercase; letter-spacing: .08em; margin: 16px 0 8px; }

.tv-champ { position: fixed; inset: 0; z-index: 1200; display: flex; flex-direction: column; align-items: center;
  justify-content: center; text-align: center; padding: 0 30px; cursor: pointer; color: #fff; border: 0; width: 100%;
  font: inherit;
  background: radial-gradient(120% 80% at 50% 0%, rgba(245,158,11,.34), rgba(10,8,16,.97)); backdrop-filter: blur(3px); }
.tv-champ .trophy { color: #ffd166; filter: drop-shadow(0 10px 26px rgba(245,158,11,.6)); animation: tvPop .55s both; }
.tv-champ .trophy .ui-ico { width: 6rem; height: 6rem; }
.tv-champ .e { font-family: var(--font-display); font-weight: 700; letter-spacing: .18em; font-size: var(--fs-md);
  text-transform: uppercase; color: #ffd166; margin-top: 16px; }
.tv-champ .n { font-family: var(--font-display); font-weight: 700; font-size: 3rem; line-height: 1.02; color: #fff; margin-top: 6px; }
.tv-champ .hint { margin-top: 28px; font-size: var(--fs-md); font-weight: 700; color: #ddd4ee; text-decoration: underline; }
.tv-confetti { position: fixed; top: -30px; width: 8px; height: 13px; border-radius: 2px; z-index: 1199;
  pointer-events: none; animation: tvConfetti linear infinite; }

.tv-shell .tv-card { background: var(--tv-surf); border: 1px solid var(--tv-line); border-radius: 18px; padding: 16px;
  box-shadow: var(--tv-shade); color: var(--tv-text); }
.tv-shell .tv-card + .tv-card, .tv-shell .tv-card + .ui-fold, .tv-shell .ui-fold + .tv-card { margin-top: var(--sp-md); }
.tv-shell .tv-card h3 { margin: 0 0 10px; font-family: var(--font-display); font-size: var(--fs-lg); line-height: 1.15;
  color: var(--tv-text); }
.tv-shell .tv-card p { margin: 0 0 12px; font-size: var(--fs-sm); color: var(--tv-muted); line-height: 1.4; }
.tv-shell .ui-fold { background: var(--tv-surf); border-color: var(--tv-line); color: var(--tv-text); margin-top: var(--sp-md); }
.tv-shell .ui-fold > summary { color: var(--tv-text); }
.tv-shell .ui-fold .ui-fold { background: var(--tv-surf2); margin-top: var(--sp-sm); }
.tv-shell .ui-label, .tv-shell .ui-check { color: var(--tv-text); }
.tv-shell .ui-hint { color: var(--tv-muted); }
.tv-shell .ui-input, .tv-shell input[type="text"], .tv-shell input[type="number"], .tv-shell select {
  background: var(--tv-bg); border-color: var(--tv-edge); color: var(--tv-text); }
.tv-shell .ui-btn.outline { color: var(--tv-text); border-color: var(--tv-edge); }
.tv-shell .ui-btn.go { background-image: linear-gradient(135deg, #ffd166, #f59e0b); background-color: #f59e0b; color: #2a1c00; }
.tv-shell .entrant-row { display: flex; align-items: center; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--tv-line); }
.tv-shell .entrant-row:last-child { border-bottom: none; }
.tv-shell .entrant-row .who { flex: 1; min-width: 0; }
.tv-shell .entrant-row .who b { display: block; font-size: var(--fs-md); line-height: 1.2; overflow-wrap: anywhere; }
.tv-shell .entrant-row .who span { display: block; font-size: var(--fs-min); color: var(--tv-muted); margin-top: 2px; }
.tv-shell .seed-badge { width: 36px; height: 36px; border-radius: 50%; background: linear-gradient(135deg, #ffd166, #f59e0b);
  color: #2a1c00; font-size: var(--fs-md); font-weight: 700; display: flex; align-items: center; justify-content: center;
  flex: none; font-family: var(--font-display); }
.tv-shell .tv-team > summary { gap: 12px; padding: 8px 12px; }
.tv-shell .tv-team .who { flex: 1; min-width: 0; }
.tv-shell .tv-team .who b { display: block; line-height: 1.2; overflow-wrap: anywhere; }
.tv-shell .tv-team .who span { display: block; font-size: var(--fs-min); font-weight: 400; color: var(--tv-muted); margin-top: 2px; }
.tv-shell .tv-person { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; padding: 8px 0;
  border-top: 1px solid var(--tv-line); }
.tv-shell .tv-person .n { flex: 1 1 120px; min-width: 0; font-weight: 700; overflow-wrap: anywhere; }
.tv-shell .tv-person form { display: flex; gap: 6px; align-items: center; }
.tv-shell .tv-person select { min-height: var(--tap); width: auto; max-width: 11rem; padding: 6px 10px; }
.tv-shell .rr-table { width: 100%; border-collapse: collapse; font-size: var(--fs-sm); }
.tv-shell .rr-table th, .tv-shell .rr-table td { padding: 10px 8px; text-align: left; border-bottom: 1px solid var(--tv-line); }
.tv-shell .rr-table th { font-weight: 700; color: var(--tv-muted); font-size: var(--fs-min); }
.tv-shell .rr-table tr:last-child td { border-bottom: none; }
.tv-shell .rr-table .num { text-align: right; font-family: var(--font-display); font-weight: 700; font-size: var(--fs-md); }
.tv-shell .rr-table .w { color: var(--tv-green); }
.tv-shell .rr-table .neg { color: var(--tv-red-text); }
.tv-shell .rr-table tr.me td { color: var(--tv-amber); }
.tv-shell .rr-rank { font-weight: 700; color: var(--tv-muted); width: 34px; font-family: var(--font-display); font-size: var(--fs-md); }
.tv-shell .rr-table tr.adv .rr-rank { color: var(--tv-green); }
.tv-shell .progress-bar-wrap { background: var(--tv-line); border-radius: 5px; height: 8px; overflow: hidden; margin: 4px 0 14px; }
.tv-shell .progress-bar-fill { height: 100%; background: linear-gradient(90deg, #ffd166, #f59e0b); border-radius: 5px; }
.tv-shell .bracket-section-label { font-size: var(--fs-min); font-weight: 700; color: var(--tv-muted); text-transform: uppercase;
  letter-spacing: .08em; margin: 22px 0 4px; display: flex; align-items: center; gap: 8px; font-family: var(--font-display); }
.tv-shell .bracket-section-label::after { content: ''; flex: 1; height: 1px; background: var(--tv-line); }
.tv-shell .gf-reset-note { font-size: var(--fs-min); color: var(--tv-muted); margin: 8px 0 0; line-height: 1.4; }
.tv-shell .tv-note { font-size: var(--fs-min); color: var(--tv-muted); line-height: 1.4; margin: 10px 0 0; }
.tv-shell .tv-danger { margin-top: var(--sp-lg); }
@media (prefers-reduced-motion: reduce) {
  .tv-shell .tv-kick .d, .tv-shell .tv-dot, .tv-shell .tv-trow .now .d, .tv-champ .trophy { animation: none; }
  .tv-confetti { display: none; }
  .tv-shell .bracket-outer { scroll-behavior: auto; }
}
/* Radio/checkbox that is drawn by the tile next to it but still takes focus */
.ui-t-hidden { position: absolute; opacity: 0; width: 1px; height: 1px; margin: 0; pointer-events: none; }
.ui-t-startlist .ui-ico { color: var(--g-tournament-2); }
.tv-shell .tv-gameico { width: 52px; height: 52px; flex: none; border-radius: 14px; display: flex; align-items: center;
  justify-content: center; background: linear-gradient(135deg, #ffd166, #f59e0b); color: #2a1c00; }
.tv-shell .tv-gameico .ui-ico { width: 32px; height: 32px; }
.tv-shell .tv-head { align-items: flex-start; }
.tv-shell .tv-head-text .ui-pill { margin-bottom: 6px; }
.tv-shell .tv-desc { margin: 0 0 var(--sp-md); font-size: var(--fs-md); color: var(--tv-muted); line-height: 1.4; }
.tv-shell .tv-matchftr { min-height: var(--tap); text-decoration: none; }
.tv-shell a.tv-matchftr:hover { color: var(--tv-text); }
.tv-shell .tv-matchbtn { padding: 8px 10px 10px; background: var(--tv-surf2); }
.tv-shell .tv-card h3 .ui-ico { color: var(--tv-green); vertical-align: -4px; }
.tv-shell .entrants-empty { margin: 0; }
.tv-shell .t-startbar { margin-top: var(--sp-lg); }
.tv-shell .t-champ-actions { margin-top: 14px; display: grid; gap: 10px; }
.tv-shell .t-champ-actions > *, .tv-shell .t-champ-actions .ui-btn { margin-top: 0; }
.tv-shell .tv-hero .ui-btn.dark { background: #2a1c00; color: #ffd166; }
.tv-shell .tv-pills a.tv-asbtn { flex: none; }
.tv-shell .pool-fold .tv-cards { grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); }
.tv-shell .ui-t-line li { color: var(--tv-text); }
.tv-shell .t-live { margin-top: 0; }
.tv-shell .ui-undo form { margin: 0; }
/* The shared members list, inside this page: names are links, keep them tappable */
.tv-shell .ep-name { display: inline-flex; align-items: center; min-height: var(--tap); }
/* End of Tournaments */

/* ===== Pick'em play ===== */
/* Making picks one question at a time (pickem_play.html), the list of every
   question (survey_generic.html) and one person's picks (view_survey.html).
   Classes here start with pk-. */

/* The screen is as tall as the phone and the Back / Next bar sticks to its
   bottom edge, so the main button is in the same place on every question. */
.ui-page.pk-screen { display: flex; flex-direction: column; min-height: 100vh; min-height: 100dvh;
  padding-bottom: 0; }
.pk-form { flex: 1; display: flex; flex-direction: column; margin: 0; }
.pk-top { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-sm);
  min-height: var(--tap); padding-top: var(--sp-sm); }
.pk-count { display: flex; align-items: baseline; justify-content: space-between; gap: var(--sp-sm);
  margin: var(--sp-sm) 0 6px; font-weight: 700; font-size: var(--fs-md); line-height: 1.2; }
.pk-count-left { font-size: var(--fs-sm); color: var(--c-text-muted); white-space: nowrap; }

/* A plain notice: picks are locked, a word from the organizer */
.pk-note { display: flex; align-items: flex-start; gap: 10px; margin-top: var(--sp-md); padding: 12px 14px;
  border-radius: 14px; background: var(--c-surface-2); color: var(--c-text);
  font-size: var(--fs-md); font-weight: 700; line-height: 1.35; }
.pk-note .ui-ico { margin-top: 1px; }
.pk-note > span { min-width: 0; overflow-wrap: anywhere; }
.pk-note small { display: block; font-size: var(--fs-sm); font-weight: 400; color: var(--c-text-muted); }
.pk-note.pk-pinned { border-left: 5px solid var(--c-warning-dk); }
/* "3 of 8 people have made picks" */
.pk-others { display: flex; align-items: center; gap: 8px; margin: var(--sp-md) 0 0; font-weight: 700; }
.pk-others .ui-ico { flex: none; }

/* One question */
.pk-q, .pk-review { padding: var(--sp-md) 0 var(--sp-lg); }
.pk-chip { white-space: normal; text-align: left; line-height: 1.25; border-radius: 12px; }
.pk-question { font-family: var(--font-display); font-weight: 600; font-size: 1.6rem; line-height: 1.2;
  margin: 10px 0 0; overflow-wrap: anywhere; }
.pk-question:focus { outline: none; }
.pk-helper { margin: 8px 0 0; font-size: var(--fs-md); line-height: 1.35; color: var(--c-text-muted); }
.pk-opts { margin-top: var(--sp-md); }
.pk-opts .ui-opt, .pk-item .ui-opt { position: relative; }
.pk-number-label { margin-top: var(--sp-md); }
.ui-page input.pk-number { min-height: 84px; max-width: 16rem; padding: 4px 12px; border-width: 3px;
  border-radius: 18px; text-align: center; font-family: var(--font-display); font-weight: 700;
  font-size: 2.4rem; letter-spacing: .06em; }
.ui-page input.pk-number:disabled { opacity: .85; }
.pk-result { display: flex; align-items: flex-start; gap: 8px; margin: var(--sp-md) 0 0;
  font-size: var(--fs-md); font-weight: 700; line-height: 1.35; }
.pk-result .ui-ico { margin-top: 1px; }
.pk-result.right { color: var(--c-good); }
.pk-result.wrong .ui-ico { color: var(--c-danger); }

/* Review: what is still open, as buttons that jump there */
.pk-jump { width: 100%; font: inherit; text-align: left; cursor: pointer; }
.pk-jump .ui-row-sub { overflow-wrap: anywhere; }
.pk-review-actions { margin-top: var(--sp-lg); }

/* Back / Next, and whether the last pick was saved */
.pk-bar { position: sticky; bottom: 0; z-index: 5; margin: auto calc(-1 * var(--sp-md)) 0;
  padding: 10px var(--sp-md) calc(12px + env(safe-area-inset-bottom, 0px));
  background: var(--c-bg); border-top: 1px solid var(--c-border); }
.pk-bar-row { display: flex; align-items: stretch; gap: var(--sp-sm); }
.pk-bar-row > .pk-back { flex: 0 0 auto; padding-left: 14px; padding-right: 18px; }
.pk-bar-row > .pk-main { flex: 1 1 auto; min-width: 0; }   /* the label wraps rather than overflow */
.pk-save { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; min-height: 1.7rem; margin: 0 0 8px;
  font-size: var(--fs-sm); font-weight: 700; line-height: 1.3; color: var(--c-text-muted); }
.pk-save .ok { display: inline-flex; align-items: center; gap: 6px; color: var(--c-good); }
/* A pick that was NOT saved is said loudly (same colors as an error message) */
.pk-alert { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; width: 100%; padding: 10px 12px;
  border-radius: 14px; border: 2px solid #f1a9ab; background: #fde0e0; color: #6d1518;
  font-size: var(--fs-md); font-weight: 700; line-height: 1.35; }
.pk-alert > span { flex: 1 1 12rem; min-width: 0; }
.pk-alert .ui-btn, .pk-alert .ui-btn:hover { background: #6d1518; color: #fff; }

/* ---- Every question in one list ---- */
/* One at a time / All on one page: a two-way switch on both picks screens. */
.pk-style { display: flex; gap: 6px; padding: 4px; margin: var(--sp-sm) 0 var(--sp-md); border-radius: 16px;
  background: var(--c-surface-2, rgba(127,127,127,.12)); border: 1px solid var(--c-border); }
.pk-style-opt { flex: 1 1 0; min-width: 0; display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  min-height: 48px; padding: 6px 8px; border-radius: 12px; font-weight: 700; font-size: var(--fs-sm);
  line-height: 1.15; text-align: center; color: var(--c-text-muted); text-decoration: none; }
.pk-style-opt.on { background: var(--c-surface); color: var(--c-text); box-shadow: 0 1px 3px rgba(0,0,0,.25); }
.pk-style-opt .ui-ico { width: 18px; height: 18px; }
/* All on one page: two or three short answers sit side by side, so a sheet
   is a quick run of taps rather than a long column. */
.pk-item-opts.quick { grid-template-columns: repeat(var(--n, 2), minmax(0, 1fr)); }
.pk-item-opts.quick .ui-opt { min-height: 52px; padding: 6px 10px; justify-content: center; }
.pk-item-opts.quick .ui-opt-text { text-align: center; }
.pk-item .pk-item-state { margin: 6px 0 0; font-size: var(--fs-sm); color: var(--c-text-muted); }
.ui-page.pk-all { padding-bottom: 0; }
.pk-all-head { margin: var(--sp-sm) 0 var(--sp-md); }
.pk-all-head .ui-hello { overflow-wrap: anywhere; }
.pk-all-actions { margin-top: var(--sp-md); }
.pk-sections { list-style: none; margin: 0; padding: 0; }
.pk-sections a { display: flex; align-items: center; justify-content: space-between; gap: 10px;
  min-height: var(--tap); padding: 6px 0; font-weight: 700; font-size: var(--fs-md); color: var(--c-link);
  text-decoration: none; border-top: 1px solid var(--c-border); }
.pk-sections li:first-child a { border-top: 0; }
.pk-item { scroll-margin-top: var(--sp-md); }
.pk-item.open { border-color: var(--c-warning-dk); }
.pk-item-q { display: flex; gap: 8px; margin: 0; font-size: var(--fs-md); font-weight: 700; line-height: 1.3; }
.pk-item-q > span:last-child { min-width: 0; overflow-wrap: anywhere; }
.pk-item-num { flex: none; min-width: 1.9em; color: var(--c-text-muted); }
.pk-item .pk-helper { margin: 4px 0 0; font-size: var(--fs-sm); }
.pk-item-opts { display: grid; grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr)); gap: 8px;
  margin-top: 12px; }
.pk-item .ui-opt { min-height: 60px; padding: 8px 12px; gap: 10px; border-width: 2px; border-radius: 14px;
  font-size: var(--fs-md); }
.pk-item .ui-opt + .ui-opt { margin-top: 0; }
.pk-item .ui-opt-dot { width: 26px; height: 26px; }
.pk-item .ui-opt-dot .ui-ico { width: 16px; height: 16px; }
.pk-item .ui-page input.pk-number, .ui-page .pk-item input.pk-number { min-height: 60px; margin-top: 12px;
  font-size: 1.8rem; border-width: 2px; border-radius: 14px; }
.pk-item-state { display: flex; align-items: center; gap: 6px; min-height: 0; margin: 10px 0 0;
  font-size: var(--fs-min); font-weight: 700; color: var(--c-good); }
.pk-item .pk-alert { margin-top: 10px; }
.pk-item .pk-result { margin-top: 10px; font-size: var(--fs-sm); }
.pk-all-more { margin: var(--sp-lg) 0 var(--sp-lg); }
.pk-all .pk-bar { margin-top: var(--sp-md); }
.pk-bar-count { flex: 1 1 auto; align-self: center; min-width: 0; font-weight: 700; font-size: var(--fs-sm);
  line-height: 1.25; color: var(--c-text-muted); }
.pk-all .pk-bar-row > .pk-main { flex: 0 0 auto; min-width: 9rem; }

/* ---- One person's picks ---- */
.pk-sum { text-align: center; }
.pk-sum-score { font-family: var(--font-display); font-weight: 700; font-size: var(--fs-3xl); line-height: 1.05;
  color: var(--c-good); }
.pk-sum-of { font-size: var(--fs-md); font-weight: 700; color: var(--c-text-muted); }
.pk-sum .ui-progress { max-width: 14rem; margin: 10px auto 0; }
.pk-sum .ui-progress > span { background: var(--c-success); }
.pk-filter { display: flex; flex-wrap: wrap; gap: var(--sp-sm); margin: var(--sp-md) 0 var(--sp-sm); }
.pk-filter .ui-choice { flex-direction: row; gap: 6px; min-width: 0; min-height: var(--tap); }
.pk-tags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
.pk-tag { display: inline-flex; align-items: center; gap: 4px; padding: 4px 10px; border-radius: 999px;
  background: var(--c-surface-2); font-size: var(--fs-min); font-weight: 700; line-height: 1.2; }
.pk-react { display: flex; gap: var(--sp-sm); margin: 0; }
.pk-react .ui-btn { flex: 1 1 0; min-width: 0; padding-left: 8px; padding-right: 8px; }
.pk-comment { padding: 12px 14px; border-radius: 14px; background: var(--c-surface-2); }
.pk-comment + .pk-comment { margin-top: var(--sp-sm); }
.pk-comment-head { display: flex; align-items: baseline; justify-content: space-between; gap: 10px;
  font-size: var(--fs-min); color: var(--c-text-muted); }
.pk-comment-head a { font-weight: 700; font-size: var(--fs-sm); color: var(--c-link); }
.pk-comment-text { margin-top: 4px; font-size: var(--fs-md); line-height: 1.35; overflow-wrap: anywhere; }

@media (prefers-reduced-motion: reduce) {
  .pk-item { scroll-behavior: auto; }
}
@media print {
  .pk-bar, .pk-top, .pk-react, .pk-filter { display: none !important; }
}
/* End of "Pick'em play" */

/* ===== Pick'em for all ===== */
/* Organizer screens (build, grade, reveal, enter picks for someone) and the
   Pick'em scoreboard. Classes start with pa-. */
.pa-page > .ui-card, .pa-page > .ui-fold, .pa-page > form, .pa-page > .ui-btn,
.pa-page > .ui-row, .pa-page > details, .pa-page > section, .pa-page > .pa-note { margin-top: var(--sp-sm); }
.pa-page > .ui-hello { margin-top: var(--sp-sm); }
.pa-gap { margin-top: var(--sp-sm); }
.pa-center { text-align: center; }
.pa-main { margin-top: var(--sp-md); }
.pa-foot { margin-top: var(--sp-lg); }
.pa-flip { transform: rotate(180deg); }
.pa-inline-link { display: inline-flex; align-items: center; min-height: var(--tap); margin-left: 6px;
  font-weight: 700; color: var(--c-link); }

/* Notes and alerts: a drawn icon and words */
.pa-note, .pa-alert, .pa-saved { display: flex; align-items: flex-start; gap: 10px; margin: 0;
  font-size: var(--fs-md); line-height: 1.4; }
.pa-note > .ui-ico, .pa-alert > .ui-ico, .pa-saved > .ui-ico { margin-top: 2px; color: var(--c-text-muted); }
.pa-alert { border: 2px solid var(--c-warning); display: block; }
.pa-alert > .ui-ico { color: var(--c-warning-dk); }
.pa-alert.pa-new-error, .pa-alert.pa-q-error, .pa-alert.pa-lock-error { display: flex; }
.pa-alert p { margin: 0 0 var(--sp-sm); }
.pa-alert ul { margin: 0; padding-left: 1.2em; }
.pa-alert-title { display: flex; align-items: center; gap: 8px; font-weight: 700; }
.pa-saved { border: 2px solid var(--c-good); }
.pa-saved > .ui-ico { color: var(--c-good); }

/* Step N of 4 */
.pa-steps { display: flex; flex-direction: column; gap: 6px; margin-top: var(--sp-sm); }
.pa-steps-dashes { display: flex; gap: 6px; }
.pa-steps-dashes i { flex: 1 1 0; max-width: 64px; height: 6px; border-radius: 99px; background: var(--c-surface-2); }
.pa-steps-dashes i.on { background: var(--g, var(--c-primary)); }
.pa-steps-words { font-weight: 700; font-size: var(--fs-sm); color: var(--c-text-muted); }

/* Big choice cards made from a radio + .ui-opt (how to start) */
.pa-picks { margin-top: var(--sp-sm); }
.pa-pick { display: block; }
.pa-pick + .pa-pick, .pa-pick + .pa-ai-context, .pa-ai-context + .pa-pick { margin-top: 10px; }
.pa-pick .ui-opt { min-height: 72px; font-size: var(--fs-md); }
.pa-pick input:focus-visible + .ui-opt { outline: 3px solid var(--c-selected-border); outline-offset: 2px; }
.pa-opt-sub { display: block; margin-top: 3px; font-weight: 400; font-size: var(--fs-sm); color: var(--c-text-muted); line-height: 1.3; }
.pa-earlier { margin-top: var(--sp-md); }
.pa-fieldset { border: 0; margin: 0 0 var(--sp-md); padding: 0; min-width: 0; }

/* Chips made from a radio + .ui-choice (kind of answer, points, right answers) */
.pa-kinds, .pa-answer-opts { display: flex; flex-wrap: wrap; gap: var(--sp-sm); }
.pa-kind { flex: 1 1 140px; display: flex; min-width: 0; }
.pa-kind > .ui-choice { flex: 1 1 auto; width: 100%; font-size: var(--fs-md); }
.pa-kind input:focus-visible + .ui-choice { outline: 3px solid var(--c-selected-border); outline-offset: 2px; }
.pa-kindbox { margin-bottom: var(--sp-md); }
.pa-kind-note { margin: 0 0 var(--sp-sm); font-size: var(--fs-md); line-height: 1.4; }
.pa-two { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-sm); }
@media (max-width: 380px) { .pa-two { grid-template-columns: 1fr; } }
.pa-picked { font-weight: 400; color: var(--c-text-muted); font-size: var(--fs-sm); }
.pa-more { margin-top: var(--sp-sm); }

/* The question list */
.pa-qlist { list-style: none; margin: var(--sp-md) 0 0; padding: 0; }
.pa-qlist > li + li { margin-top: var(--sp-sm); }
.pa-qsec .ui-seclabel { margin-bottom: 0; }
.pa-q-head { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.pa-q-num { font-weight: 700; font-size: var(--fs-sm); color: var(--c-text-muted); margin-right: auto; }
.pa-q-text { margin: 8px 0 4px; font-weight: 700; font-size: var(--fs-lg); line-height: 1.25; overflow-wrap: anywhere; }
.pa-q-answers { margin: 0; font-size: var(--fs-md); color: var(--c-text-muted); line-height: 1.35; overflow-wrap: anywhere; }
.pa-q-picks { display: flex; align-items: center; gap: 6px; margin: 6px 0 0; font-size: var(--fs-sm); font-weight: 700; color: var(--c-good); }
.pa-qactions { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; margin-top: 12px; }
.pa-qactions form { margin: 0; display: flex; }
.pa-qactions .ui-btn { flex: 1 1 auto; width: 100%; flex-direction: column; gap: 2px; min-height: 60px;
  padding: 6px 4px; font-size: var(--fs-sm); }
.pa-add-q { margin-top: var(--sp-md); }
.pa-ai, .pa-rename { margin-top: var(--sp-md); }

/* Open: the checklist */
.pa-checklist { list-style: none; margin: var(--sp-md) 0 0; padding: 0; }
.pa-checklist li { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-radius: 14px;
  background: var(--c-surface); border: 1px solid var(--c-border); font-size: var(--fs-md); line-height: 1.35; }
.pa-checklist li + li { margin-top: 8px; }
.pa-checklist li > .ui-ico { color: var(--c-text-muted); }

/* Organizer screen */
.pa-tool-ico { width: 44px; height: 44px; flex: none; border-radius: 12px; display: inline-flex; align-items: center;
  justify-content: center; background: var(--c-surface-2); color: var(--c-text); }

/* Grading */
.pa-count { display: flex; align-items: baseline; justify-content: space-between; gap: var(--sp-sm);
  margin: var(--sp-sm) 0 6px; font-weight: 700; font-size: var(--fs-md); }
.pa-count-left { font-size: var(--fs-sm); color: var(--c-text-muted); }
.pa-gq { margin-top: var(--sp-md); }
.pa-chip { margin-bottom: 8px; }
.pa-gq-text { font-family: var(--font-display); font-weight: 700; font-size: var(--fs-2xl); line-height: 1.12;
  margin: 4px 0 var(--sp-md); overflow-wrap: anywhere; }
.pa-grade-opts { margin: 0; }
.pa-tap-hint { margin: 0 0 var(--sp-sm); }
.pa-gopt { width: 100%; }
.pa-gopt .ui-opt-text { display: block; }
.pa-bignum { font-family: var(--font-display); text-align: center; letter-spacing: .06em; }
.ui-page input.pa-bignum { font-size: var(--fs-2xl); }
.pa-tag { display: inline-flex; align-items: center; gap: 4px; margin-top: 6px; padding: 4px 10px; border-radius: 999px;
  background: var(--c-surface-2); font-size: var(--fs-min); font-weight: 700; line-height: 1.2; }
.pa-suggested { background: color-mix(in srgb, var(--c-purple) 20%, transparent); color: var(--c-text); }
.pa-navrow { display: flex; gap: var(--sp-sm); margin-top: var(--sp-md); }
.pa-navrow > .ui-btn { flex: 1 1 0; }
.pa-navrow > .ui-btn.lg { flex: 2 1 0; margin-top: 0; }
.pa-jump { margin-top: var(--sp-md); }
.pa-jumpgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(52px, 1fr)); gap: 8px; }
.pa-jumpbtn { display: inline-flex; align-items: center; justify-content: center; min-height: var(--tap);
  border-radius: 12px; border: 2px solid var(--c-border); color: var(--c-text); font-weight: 700;
  font-size: var(--fs-md); text-decoration: none; }
.pa-jumpbtn.done { background: color-mix(in srgb, var(--c-good) 18%, transparent); border-color: var(--c-good); }
.pa-jumpbtn.here { outline: 3px solid var(--c-selected-border); outline-offset: 1px; }
.pa-more-tools { margin-top: var(--sp-lg); }
.pa-missing-link { display: flex; align-items: flex-start; gap: 10px; min-height: var(--tap); color: var(--c-text);
  text-decoration: none; }
.pa-missing li { padding: 4px 14px; }

/* The reveal */
.pa-rv-card { margin-top: var(--sp-md); }
.pa-rv-kicker { font-family: var(--font-display); font-weight: 600; letter-spacing: .1em; text-transform: uppercase;
  font-size: var(--fs-sm); color: var(--c-text-muted); }
.pa-rv-q, .pa-rv-title { font-family: var(--font-display); font-weight: 700; font-size: var(--fs-2xl); line-height: 1.12;
  margin: 6px 0 var(--sp-md); overflow-wrap: anywhere; }
.pa-rv-numbers { font-size: var(--fs-lg); line-height: 1.4; margin: 0 0 var(--sp-sm); }
.pa-rv-right { display: flex; align-items: center; gap: 8px; font-size: var(--fs-lg); font-weight: 700; color: var(--c-good); }
.pa-bars { list-style: none; margin: 0; padding: 0; }
.pa-bar + .pa-bar { margin-top: var(--sp-md); }
.pa-bar-head { display: flex; align-items: baseline; justify-content: space-between; gap: 10px;
  font-weight: 700; font-size: var(--fs-lg); line-height: 1.2; }
.pa-bar-label { overflow-wrap: anywhere; display: inline-flex; align-items: center; gap: 6px; }
.pa-bar-pct { flex: none; font-family: var(--font-display); font-size: var(--fs-xl); }
.pa-bar-track { margin-top: 6px; height: 28px; border-radius: 10px; background: var(--c-surface-2); overflow: hidden; }
.pa-bar-fill { display: block; height: 100%; min-width: 4px; border-radius: 10px;
  background: linear-gradient(90deg, var(--g, var(--c-primary)), var(--g2, var(--c-primary-dk)));
  transform-origin: left; animation: paBarGrow .7s cubic-bezier(.2, .8, .2, 1) both; }
.pa-bar.right .pa-bar-fill { background: var(--c-good); }
.pa-bar.right .pa-bar-label { color: var(--c-good); }
.pa-bar-who { margin-top: 4px; font-size: var(--fs-sm); color: var(--c-text-muted); line-height: 1.35; overflow-wrap: anywhere; }
@keyframes paBarGrow { from { transform: scaleX(0); } to { transform: scaleX(1); } }
.pa-rv-tv { justify-content: flex-start; gap: 3vh; }
.pa-rv-tv .pa-rv-card { max-width: 72vw; }
.pa-rv-tv .pa-rv-kicker { font-size: clamp(1rem, 1.8vw, 1.8rem); color: #a3a3b5; }
.pa-rv-tv .pa-rv-q, .pa-rv-tv .pa-rv-title { font-size: clamp(2rem, 4.6vw, 4.4rem); color: #fff; }
.pa-rv-tv .pa-rv-numbers { font-size: clamp(1.2rem, 2.4vw, 2.4rem); color: #d8d8e6; }
.pa-rv-tv .pa-bar-head { font-size: clamp(1.3rem, 2.6vw, 2.6rem); color: #fff; }
.pa-rv-tv .pa-bar-pct { font-size: clamp(1.6rem, 3.2vw, 3.2rem); }
.pa-rv-tv .pa-bar-track { height: clamp(28px, 4.4vh, 60px); background: rgba(255,255,255,.1); }
.pa-rv-tv .pa-bar-who { font-size: clamp(1rem, 1.6vw, 1.6rem); color: #d8d8e6; }
.pa-rv-tv .pa-bar.right .pa-bar-label, .pa-rv-tv .pa-rv-right { color: #4ef08f; }
.pa-rv-tv .pa-rv-nav { max-width: 60vw; }
.pa-rv-tv .pa-rv-nav .ui-btn.outline { color: #fff; border-color: rgba(255,255,255,.3); }
.pa-rv-join { align-items: center; }
.pa-rv-join-words { font-size: clamp(1rem, 1.6vw, 1.6rem); color: #d8d8e6; }
.pa-rv-tv .pa-rv-close { position: fixed; top: 3vh; right: 3vw; color: #fff; border-color: rgba(255,255,255,.3); }
.pa-rv-tv .pa-rv-nav .ui-btn { font-size: clamp(1.1rem, 1.8vw, 1.8rem); min-height: clamp(58px, 8vh, 96px); }

/* Entering picks for someone */
.pa-person + .pa-person { margin-top: var(--sp-sm); }
.pa-for-banner { position: sticky; top: 0; z-index: 30; display: flex; align-items: center; justify-content: center; gap: 10px;
  padding: 10px var(--sp-md); background: var(--c-warning); color: #2a1700; font-size: var(--fs-md); line-height: 1.3; }

/* ----- The Pick'em scoreboard (group_members.html + _pickem_board.html) ----- */
.pa-scoreboard .gh-hero { margin-top: var(--sp-sm); }
.pa-lockline.pa-lock-done { border-color: var(--c-danger); }
.pa-nopicks { margin-top: var(--sp-md); border: 2px solid var(--g, var(--c-primary)); }
.pa-nopicks-words { display: flex; align-items: flex-start; gap: 10px; margin: 0; font-size: var(--fs-md); font-weight: 700; }
.pa-nopicks .pa-main { margin-top: var(--sp-sm); }
.pa-winner { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-top: var(--sp-md); }
.pa-winner-ico { width: 48px; height: 48px; flex: none; border-radius: 14px; display: inline-flex; align-items: center;
  justify-content: center; background: #ffc530; color: #3b2a00; }
.pa-winner-text { flex: 1 1 180px; font-size: var(--fs-md); line-height: 1.35; }
.pa-mycard-title { margin: 0 0 var(--sp-sm); font-size: var(--fs-lg); }
.pa-stats, .pa-sh-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(92px, 1fr)); gap: 8px; margin-bottom: var(--sp-sm); }
.pa-stats > div, .pa-sh-stats > div { display: flex; flex-direction: column; align-items: center; padding: 10px 6px;
  border-radius: 14px; background: var(--c-surface-2); text-align: center; }
.pa-stats .v, .pa-sh-stats .v { font-family: var(--font-display); font-weight: 700; font-size: var(--fs-xl); line-height: 1.1; }
.pa-stats .v em, .pa-sh-stats .v em { font-style: normal; font-size: var(--fs-md); color: var(--c-text-muted); }
.pa-stats .l, .pa-sh-stats .l { font-size: var(--fs-min); color: var(--c-text-muted); line-height: 1.2; margin-top: 3px; }
.pa-organizer { margin-top: var(--sp-md); }
.pa-organizer summary .ui-pill { margin-left: 4px; }
.pa-rate { margin-top: var(--sp-md); }
.pa-rate-words { font-size: var(--fs-md); font-weight: 700; margin-bottom: 6px; }
.pa-live-pill { letter-spacing: 0; text-transform: none; font-family: var(--font); }
.pa-search { margin-bottom: var(--sp-sm); }
.pa-filters { display: flex; gap: 8px; margin-bottom: var(--sp-sm); }
.pa-filters .ui-choice { min-width: 0; flex-direction: row; gap: 4px; font-size: var(--fs-sm); padding: 6px 8px; }
.pa-board { list-style: none; margin: 0; padding: 0; }
.pa-rowwrap { position: relative; }
.pa-rowwrap + .pa-rowwrap { margin-top: 8px; }
.pa-row { display: flex; align-items: center; gap: 10px; width: 100%; min-height: 68px; padding: 8px 12px;
  border-radius: var(--card-radius); border: 1px solid var(--c-border); background: var(--c-surface);
  color: var(--c-text); font: inherit; text-align: left; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.pa-row:focus-visible { outline: 3px solid var(--c-selected-border); outline-offset: 2px; }
.pa-row.scoreboard-you { border: 2px solid var(--c-selected-border); background: var(--c-selected-bg); }
.pa-row .ui-chev { color: var(--c-text-muted); }
.pa-rank { flex: none; min-width: 2.2rem; height: 2.2rem; padding: 0 4px; border-radius: 999px; display: inline-flex;
  align-items: center; justify-content: center; font-family: var(--font-display); font-weight: 700; font-size: var(--fs-md);
  background: var(--c-surface-2); color: var(--c-text); }
.pa-rank.m1 { background: #ffc530; color: #3b2a00; }
.pa-rank.m2 { background: #d4d8e2; color: #1f2430; }
.pa-rank.m3 { background: #e0a26b; color: #2e1603; }
.pa-you { font-weight: 400; color: var(--c-text-muted); }
.pa-row-sub .ui-ico { width: 1.1em; height: 1.1em; }
.pa-in { color: var(--c-good); font-weight: 700; }
.pa-part + .pa-part::before { content: " · "; color: var(--c-text-muted); font-weight: 400; font-style: normal; }
.ui-fold > summary .cnt { font-weight: 400; font-size: var(--fs-sm); }
.pa-by { font-style: italic; }
.pa-move { margin-top: 4px; }
.pa-pts { flex: none; display: flex; flex-direction: column; align-items: flex-end; line-height: 1.05; }
.pa-pts .scoreboard-pts { font-family: var(--font-display); font-weight: 700; font-size: var(--fs-xl); }
.pa-pts .sbv2-max { font-size: var(--fs-min); color: var(--c-text-muted); }
.pa-pts-word { font-size: var(--fs-min); color: var(--c-text-muted); }
.pa-pts .sbv2-max + .pa-pts-word { display: none; }
.pa-ticker { margin-bottom: var(--sp-md); padding: 12px 14px; border-radius: var(--card-radius);
  border: 2px solid var(--c-good); background: color-mix(in srgb, var(--c-good) 10%, var(--c-surface)); }
.pa-ticker-title { display: flex; align-items: center; gap: 8px; margin: 0 0 6px; font-size: var(--fs-md); color: var(--c-good); }
.pa-ticker ul { list-style: none; margin: 0; padding: 0; }
.pa-tick { padding: 6px 0; border-top: 1px solid var(--c-border); line-height: 1.3; }
.pa-tick:first-child { border-top: 0; }
.pa-tick-q { display: block; font-size: var(--fs-sm); color: var(--c-text-muted); overflow-wrap: anywhere; }
.pa-tick-a { display: block; font-weight: 700; font-size: var(--fs-md); }
.pa-tick-n { font-weight: 400; color: var(--c-text-muted); font-size: var(--fs-sm); }
.pa-tick.newest { animation: paTickIn .6s ease-out both; }
@keyframes paTickIn { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }
.pa-sheet[hidden] { display: none; }
.pa-sh-head { display: flex; align-items: center; gap: 12px; margin-bottom: var(--sp-sm); }
.pa-sh-name { display: flex; flex-direction: column; min-width: 0; }
.pa-sh-title { font-weight: 700; font-size: var(--fs-lg); overflow-wrap: anywhere; }
.pa-sh-meta { font-size: var(--fs-sm); color: var(--c-text-muted); }
.pa-sh-actions > * + * { margin-top: var(--sp-sm); }
.pa-react { display: flex; gap: var(--sp-sm); margin: 0; }
.pa-react .ui-btn { flex: 1 1 0; min-width: 0; }
.pa-react .ui-btn[aria-pressed="true"] { border-color: var(--c-selected-border); background: var(--c-selected-bg); }
.pa-extra { margin-top: var(--sp-sm); }
.pa-bd-q { padding: 10px 0; border-top: 1px solid var(--c-border); }
.pa-bd-q:first-child { border-top: 0; padding-top: 0; }
.pa-bd-text { margin: 0 0 6px; font-weight: 700; font-size: var(--fs-md); line-height: 1.3; overflow-wrap: anywhere; }
.pa-bd-nums { margin: 0; font-size: var(--fs-sm); color: var(--c-text-muted); }
.pa-bd-opt { display: grid; grid-template-columns: minmax(0, 9rem) 1fr auto; align-items: center; gap: 8px; margin-top: 4px; }
.pa-bd-label { font-size: var(--fs-sm); overflow-wrap: anywhere; line-height: 1.2; }
.pa-bd-right .pa-bd-label { color: var(--c-good); font-weight: 700; }
.pa-bd-track { height: 12px; border-radius: 6px; background: var(--c-surface-2); overflow: hidden; }
.pa-bd-track > span { display: block; height: 100%; border-radius: 6px; background: var(--g, var(--c-primary)); }
.pa-bd-right .pa-bd-track > span { background: var(--c-good); }
.pa-bd-n { font-size: var(--fs-sm); color: var(--c-text-muted); min-width: 2.5rem; text-align: right; }
.pa-bd-names { margin: 2px 0 0; font-size: var(--fs-min); color: var(--c-text-muted); line-height: 1.3; }
.pa-ak-row { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; padding: 8px 0; border-top: 1px solid var(--c-border); }
.pa-ak-row:first-of-type { border-top: 0; }
.pa-ak-text { flex: 1 1 12rem; min-width: 0; font-size: var(--fs-md); overflow-wrap: anywhere; }
.pa-ak-label { font-weight: 700; color: var(--c-good); font-size: var(--fs-md); }
.pa-ak-n { font-size: var(--fs-sm); color: var(--c-text-muted); }
.pa-card-h { margin: 0 0 var(--sp-sm); font-size: var(--fs-lg); }
.pa-extra-card { margin-top: var(--sp-md); }
.pa-reacts { display: flex; flex-wrap: wrap; gap: 6px; margin: 0; }
.pa-chat { margin-top: var(--sp-md); }
.pa-comment { padding: 10px 12px; border-radius: 14px; background: var(--c-surface-2); }
.pa-comment + .pa-comment { margin-top: var(--sp-sm); }
.pa-comment-head { display: flex; justify-content: space-between; align-items: center; gap: 10px; font-size: var(--fs-sm); color: var(--c-text-muted); }
.pa-comment-head a { display: inline-flex; align-items: center; min-height: var(--tap); font-weight: 700; color: var(--c-link); }
.pa-comment-text { font-size: var(--fs-md); line-height: 1.4; overflow-wrap: anywhere; }
.pa-comment-btns { display: flex; flex-wrap: wrap; gap: 6px; margin: 4px 0 0; }
.pa-comment-btns form { margin: 0; }
.pa-comment-btns .ui-btn.quiet { padding-left: 8px; padding-right: 8px; }
.pa-comment-edit input { margin-top: 6px; }
.pa-comment-new { margin-top: var(--sp-md); }
.pa-comment-send { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: var(--sp-sm); }
.comment-char-counter { font-size: var(--fs-min); color: var(--c-text-muted); }
.comment-char-counter.pa-over { color: var(--c-danger-text); font-weight: 700; }
.pa-link-box { margin: var(--sp-sm) 0; padding: 10px 12px; border-radius: 12px; background: var(--c-surface-2);
  font-size: var(--fs-sm); overflow-wrap: anywhere; }
.pa-leave { margin-top: var(--sp-lg); }
.pa-scoreboard .ws-replay { flex: none; }

@media (prefers-reduced-motion: reduce) {
  .pa-bar-fill, .pa-tick.newest { animation: none; }
}
@media print {
  .pa-qactions, .pa-navrow, .pa-for-banner { display: none !important; }
}
/* End of "Pick'em for all" */

/* ==== Superlatives ==== */
/* "Most likely to…": one big card per person (avatar + name) while voting
   is open, then the places with their vote counts after the reveal.
   Classes start with ui-sup-. */
.ui-sup-host .ui-hint { margin-top: 6px; }
.ui-sup-slot { margin: 0; }
.ui-sup-slot + .ui-sup-slot { margin-top: 12px; }
.ui-sup-opt .ui-avatar { width: 52px; height: 52px; font-size: var(--fs-md); }
.ui-sup-opt .ui-avatar.emoji { font-size: 1.7rem; }
/* "You" next to your own name: dark on light / light on dark, so it reads in both themes */
.ui-sup-you { display: inline-block; margin-left: 4px; padding: 2px 9px; border-radius: 999px; vertical-align: .15em;
  background: var(--c-text); color: var(--c-bg); font-family: var(--font); font-size: var(--fs-min); font-weight: 700;
  line-height: 1.3; }
.ui-sup-note { display: flex; align-items: flex-start; gap: 8px; }
.ui-sup-note .ui-ico { flex: none; margin-top: 2px; }

/* After the reveal: most votes first; a tie shares a place */
.ui-sup-places { list-style: none; margin: 0; padding: 0; }
.ui-sup-place { display: flex; align-items: center; gap: 12px; min-height: 76px; padding: 10px 14px;
  border-radius: var(--card-radius); border: 1px solid var(--c-border); background: var(--c-surface); }
.ui-sup-place + .ui-sup-place { margin-top: var(--sp-sm); }
.ui-sup-place.p1 { border: 2px solid #c9a227;
  background: linear-gradient(135deg, color-mix(in srgb, #ffc530 22%, var(--c-surface)), var(--c-surface) 70%); }
.ui-sup-place.me { outline: 3px solid var(--c-selected-border); outline-offset: -1px; }
.ui-sup-medal { flex: none; min-width: 3rem; height: 3rem; padding: 0 6px; border-radius: 999px;
  display: inline-flex; align-items: center; justify-content: center; background: var(--c-surface-2);
  color: var(--c-text); font-family: var(--font-display); font-weight: 700; font-size: var(--fs-md); line-height: 1; }
.ui-sup-place.p1 .ui-sup-medal { background: #ffc530; color: #3b2a00; }
.ui-sup-place.p2 .ui-sup-medal { background: #d4d8e2; color: #1f2430; }
.ui-sup-place.p3 .ui-sup-medal { background: #e0a26b; color: #2e1603; }
.ui-sup-place.p1 .ui-avatar { width: 64px; height: 64px; font-size: var(--fs-lg); }
.ui-sup-place.p1 .ui-avatar.emoji { font-size: 2.1rem; }
.ui-sup-who { flex: 1; min-width: 0; }
.ui-sup-name { display: block; font-weight: 700; font-size: var(--fs-lg); line-height: 1.2; overflow-wrap: anywhere; }
.ui-sup-place.p1 .ui-sup-name { font-family: var(--font-display); font-size: var(--fs-xl); }
.ui-sup-votes { display: block; margin-top: 2px; font-size: var(--fs-md); color: var(--c-text-muted); }
/* End of "Superlatives" */

/* ==== Season Pick'em ==== */
/* The season page (season_detail.html) and the "Week 3 of …" link on a
   week's own Pick'em pages. Classes start with ui-season-; the board and the
   week rows are ui-row with the ui-party- board pieces. */

/* This week: the newest week, then the one main button */
.ui-season-now { border: 2px solid var(--g, var(--c-border)); }
.ui-season-now p { margin: 0; }
.ui-season-now p + p { margin-top: 4px; }
.ui-season-now .ui-card-sub .ui-ico { width: 1.1em; height: 1.1em; vertical-align: -0.18em; }
/* "(13 points)" and "Sun 1:00 PM" never break in the middle */
.ui-season-keep, .ui-season-when { white-space: nowrap; }
.ui-season-mine { color: var(--c-text); font-weight: 700; }
.ui-btn.ui-season-go { margin-top: var(--sp-sm); }
.ui-season-main { display: flex; margin: var(--sp-sm) 0 0; }
form.ui-season-main > .ui-btn { flex: 1 1 auto; }

/* The board: the leader's place in gold */
.ui-party-rank.ui-season-top { background: #ffc530; color: #3b2a00; }
.ui-season-how { margin: var(--sp-sm) 2px 0; }

/* Every week: its number, what state it is in, who won */
.ui-season-weeks { list-style: none; margin: 0; padding: 0; }
.ui-season-weeks > li + li { margin-top: var(--sp-sm); }
.ui-season-week.now { border: 2px solid var(--g, var(--c-border)); }
.ui-season-wk { flex: none; width: 2.6rem; height: 2.6rem; border-radius: 12px; display: inline-flex;
  align-items: center; justify-content: center; background: var(--g2, var(--c-surface-2)); color: #fff;
  font-family: var(--font-display); font-weight: 700; font-size: var(--fs-lg); line-height: 1; }

/* On a week's own pages: "Week 3 of NFL 2026 — see the season board" */
.ui-season-weeklink { display: flex; align-items: center; gap: 10px; min-height: var(--tap);
  margin: var(--sp-sm) 0 0; padding: 8px 12px 8px 14px; border-radius: 14px; text-decoration: none;
  border: 2px solid color-mix(in srgb, var(--g, var(--c-primary)) 55%, var(--c-border));
  background: color-mix(in srgb, var(--g, var(--c-primary)) 12%, var(--c-surface));
  color: var(--c-text); font-weight: 700; font-size: var(--fs-md); line-height: 1.3;
  -webkit-tap-highlight-color: transparent; }
.ui-season-weeklink:hover { color: var(--c-text); border-color: var(--g, var(--c-primary)); }
.ui-season-weeklink:focus-visible { outline: 3px solid var(--c-selected-border); outline-offset: 2px; }
.ui-season-weeklink > span { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.ui-season-weeklink > .ui-ico:first-child { color: var(--g, var(--c-primary)); }
.ui-season-weeklink > .ui-chev { flex: none; color: var(--c-text-muted); }
.pk-review .ui-season-weeklink { margin-top: var(--sp-md); }
/* End of "Season Pick'em" */

/* ==== Picks page and cleanup ==== */
/* One person's picks (view_survey.html, classes vs-; it also uses the pk-
   score, filter, tag and comment rules from "Pick'em play"), then styles
   moved out of the sign-in page, the TV invite, the @mention list and the
   picks screen's no-JavaScript fallback. */

/* ---------- One person's picks ---------- */
.vs-head { margin: var(--sp-sm) 0 var(--sp-md); }
.vs-head .ui-hello { overflow-wrap: anywhere; }
.vs-score { margin: 0; }
.vs-facts { list-style: none; margin: 14px 0 0; padding: 0; text-align: left; }
.vs-facts li { display: flex; align-items: flex-start; gap: 10px; padding: 9px 0; border-top: 1px solid var(--c-border);
  font-size: var(--fs-md); line-height: 1.35; }
.vs-facts li:first-child { border-top: 0; }
.vs-facts li > span { min-width: 0; overflow-wrap: anywhere; }
.vs-facts .ui-ico { margin-top: 1px; color: var(--c-text-muted); }
.vs-facts .vs-warn .ui-ico { color: var(--c-warning-dk); }
.vs-main { margin-top: var(--sp-md); }
.vs-acts { margin-top: var(--sp-sm); }
.vs-react { margin-top: var(--sp-sm); }
.vs-page .pk-filter { margin-top: var(--sp-lg); }
.vs-skip { margin-bottom: var(--sp-sm); }

/* The list: a section heading, then one block per question */
.vs-list { padding: 0; overflow: hidden; margin-top: var(--sp-sm); }
.vs-sec { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; margin: 0;
  padding: 12px 16px; background: var(--c-surface-2); font-family: var(--font-display); font-weight: 600;
  font-size: var(--fs-lg); line-height: 1.2; letter-spacing: .02em; overflow-wrap: anywhere; }
.vs-sec-score { flex: none; font-family: var(--font); letter-spacing: 0; font-size: var(--fs-sm); font-weight: 700;
  color: var(--c-text-muted); white-space: nowrap; }
.vs-q { margin: 0; padding: 14px 16px; border-top: 1px solid var(--c-border); }
.vs-list > .vs-q:first-child, .vs-sec + .vs-q { border-top: 0; }
.vs-q.correct { box-shadow: inset 5px 0 0 var(--c-good); }
.vs-q.wrong { box-shadow: inset 5px 0 0 var(--c-danger); }
.vs-q:focus { outline: 3px solid var(--c-selected-border); outline-offset: -3px; }
.vs-q-top { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px 10px; }
.vs-q-num { font-size: var(--fs-sm); font-weight: 700; color: var(--c-text-muted); }
.vs-q-text { margin: 6px 0 0; font-size: var(--fs-md); line-height: 1.35; overflow-wrap: anywhere; }
.vs-q-pick { margin: 8px 0 0; font-size: var(--fs-lg); font-weight: 700; line-height: 1.25; overflow-wrap: anywhere; }
.vs-q-pick.none { font-weight: 400; color: var(--c-text-muted); }
.vs-lab { display: block; margin-bottom: 1px; font-size: var(--fs-min); font-weight: 700; letter-spacing: .04em;
  text-transform: uppercase; color: var(--c-text-muted); }
.vs-q-more { margin: 6px 0 0; font-size: var(--fs-sm); line-height: 1.35; color: var(--c-text-muted); overflow-wrap: anywhere; }
.vs-q-more strong { color: var(--c-text); }
/* Right / Wrong / Not graded yet: a drawn mark and the word, never color alone */
.ui-pill.vs-mark { gap: 5px; }
.ui-pill.vs-mark .ui-ico { width: 1.2em; height: 1.2em; vertical-align: 0; }
/* The word stays in the text color (green words on a green tint are too
   faint in Easy-read); the drawn mark carries the green or red. */
.ui-pill.vs-mark.right { background: color-mix(in srgb, var(--c-good) 16%, transparent); color: var(--c-text); }
.ui-pill.vs-mark.right .ui-ico { color: var(--c-good); }
.ui-pill.vs-mark.wrong { background: color-mix(in srgb, var(--c-danger) 15%, transparent); color: var(--c-text); }
.ui-pill.vs-mark.wrong .ui-ico { color: var(--c-danger); }

/* Hardest questions */
.vs-gap { margin-top: var(--sp-md); }
.vs-hard { list-style: none; margin: 0; padding: 0; }
.vs-hard li { padding: 10px 0; border-top: 1px solid var(--c-border); }
.vs-hard li:first-child { border-top: 0; padding-top: 0; }
.vs-hard-q { display: block; font-weight: 700; font-size: var(--fs-md); line-height: 1.3; overflow-wrap: anywhere; }
.vs-hard-sub { display: block; margin-top: 4px; font-size: var(--fs-sm); line-height: 1.35; color: var(--c-text-muted);
  overflow-wrap: anywhere; }
.vs-hard-sub strong { color: var(--c-text); }
.vs-fold-sub { display: block; font-weight: 400; font-size: var(--fs-sm); color: var(--c-text-muted); }

/* Comments */
.vs-none { margin: 0; }
.vs-who { display: inline-flex; align-items: center; min-height: var(--tap); font-weight: 700; font-size: var(--fs-md);
  color: var(--c-link); overflow-wrap: anywhere; }
.vs-comment-btns { display: flex; flex-wrap: wrap; gap: 6px; margin: 4px 0 0; }
.vs-comment-btns form { margin: 0; }
.vs-comment-btns .ui-btn.quiet { padding-left: 8px; padding-right: 8px; }
.vs-del .ui-ico { color: var(--c-danger); }
.vs-edit { margin-top: 6px; }
.vs-edit .ui-btnrow { margin-top: var(--sp-sm); }
.vs-new-comment { margin-top: var(--sp-md); }
.vs-send { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: var(--sp-sm); }

/* On paper: the picks in dark ink, without the buttons */
@media print {
  body:has(.vs-page) { background: #fff !important; }
  .vs-page { --c-bg: #fff; --c-surface: #fff; --c-surface-2: #eeeeee; --c-border: #bbbbbb; --c-text: #111111;
    --c-text-muted: #444444; --c-good: #166534; --c-link: #1b4fd1; color: var(--c-text); }
  .vs-page .no-print, .vs-page form, .vs-page .ui-btn { display: none !important; }
  .vs-page .ui-card { box-shadow: none; }
  .vs-page .vs-q { break-inside: avoid; }
}

/* ---------- Sign-in page (login.html, moved from its <style> block) ---------- */
/* The game room behind the card is artwork and stays dark. The card's own
   colors are the --login-* values: warm on dark as before, and taken from the
   tokens in Easy-read. */
@keyframes hgrFade { 0% { opacity: 0; } 3% { opacity: 1; } 22% { opacity: 1; } 28% { opacity: 0; } 100% { opacity: 0; } }
@keyframes hgrZoom { 0%, 100% { transform: scale(1.03); } 50% { transform: scale(1.09); } }
@keyframes hgrBokeh { 0% { transform: translateY(20px) scale(.6); opacity: 0; } 14% { opacity: .7; } 88% { opacity: .4; }
  100% { transform: translateY(-170px) scale(1.25); opacity: 0; } }
@keyframes hgrFlicker { 0%, 100% { opacity: 1; } 45% { opacity: .92; } 55% { opacity: .97; } 70% { opacity: .88; } }
@keyframes hgrTwinkle { 0%, 100% { opacity: .35; } 50% { opacity: 1; } }
@keyframes hgrBulbGlow { 0%, 100% { opacity: .85; filter: brightness(1); } 50% { opacity: 1; filter: brightness(1.25); } }
@keyframes hgrFadeUp { 0% { opacity: 0; transform: translateY(14px); } 100% { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { #hgr-login [data-anim] { animation: none !important; } }

#hgr-login {
  --login-card: linear-gradient(180deg, rgba(40,28,18,.9), rgba(17,12,7,.97));
  --login-edge: rgba(255,222,176,.22);
  --login-text: #fbf1e3;
  --login-sub: #cdbca3;
  --login-quiet: #a8967c;
  --login-rule: rgba(255,222,176,.2);
  --login-grab: rgba(255,224,180,.32);
  --login-field: rgba(255,240,222,.08);
  --login-field-edge: rgba(255,210,160,.24);
  --login-field-text: #fdf3e6;
  --login-hint: rgba(253,243,230,.4);
  --login-focus: #ffb24d;
  --login-focus-ring: rgba(255,178,77,.22);
  --login-link: #f0b56f;
  --login-link-hover: #ffc285;
  --login-show: #f0c890;
  --login-alert: rgba(229,72,77,.16);
  --login-alert-edge: rgba(229,72,77,.5);
  --login-alert-text: #ffd9da;
  --login-new: rgba(255,178,77,.1);
  --login-new-edge: rgba(255,178,77,.4);
  --login-new-text: #e8d9c2;
  position: relative; min-height: 100vh; min-height: 100dvh; display: flex; flex-direction: column;
  overflow: hidden; background: #0a0d0a; }
html[data-theme="light"] #hgr-login {
  --login-card: var(--c-surface);
  --login-edge: var(--c-border);
  --login-text: var(--c-text);
  --login-sub: var(--c-text-muted);
  --login-quiet: var(--c-text-muted);
  --login-rule: var(--c-border);
  --login-grab: var(--c-border);
  --login-field: var(--c-surface);
  --login-field-edge: var(--c-border);
  --login-field-text: var(--c-text);
  --login-hint: color-mix(in srgb, var(--c-text-muted) 60%, var(--c-surface));
  --login-focus: var(--c-selected-border);
  --login-focus-ring: var(--c-selected-bg);
  --login-link: var(--c-link);
  --login-link-hover: var(--c-link);
  --login-show: var(--c-link);
  --login-alert: color-mix(in srgb, var(--c-danger) 12%, var(--c-surface));
  --login-alert-edge: var(--c-danger);
  --login-alert-text: var(--c-text);
  --login-new: color-mix(in srgb, var(--c-warning) 16%, var(--c-surface));
  --login-new-edge: var(--c-warning-dk);
  --login-new-text: var(--c-text); }
#hgr-login .hgr-top { position: relative; z-index: 3; display: flex; justify-content: center; align-items: center; gap: 14px;
  padding: clamp(22px, 6vh, 64px) 16px clamp(18px, 4vh, 40px); animation: hgrFadeUp .7s ease both; }
/* Sits on the dark artwork in both themes */
#hgr-login .hgr-textsize { position: absolute; z-index: 5; top: 10px; right: 10px; color: #fceeda; }
#hgr-login .hgr-textsize:hover { color: #fff; background: rgba(255,255,255,.12); }
#hgr-login .hgr-card { position: relative; z-index: 4; margin: auto auto 0; width: min(480px, 100%);
  border-radius: 30px 30px 0 0; padding: 22px 22px max(30px, env(safe-area-inset-bottom));
  background: var(--login-card);
  backdrop-filter: blur(20px) saturate(135%); -webkit-backdrop-filter: blur(20px) saturate(135%);
  border-top: 1px solid var(--login-edge); box-shadow: 0 -22px 50px rgba(0,0,0,.5);
  color: var(--login-text); animation: hgrFadeUp .7s ease .12s both; }
#hgr-login .hgr-grab { width: 42px; height: 5px; border-radius: 99px; background: var(--login-grab); margin: 0 auto 16px; }
#hgr-login h1 { font-family: var(--font-display); font-weight: 600; font-size: var(--fs-xl); margin: 0; color: var(--login-text); }
#hgr-login .hgr-sub { font-size: var(--fs-md); color: var(--login-sub); margin: 3px 0 0; }
#hgr-login .hgr-label { display: block; font-size: var(--fs-min); font-weight: 700; letter-spacing: .06em;
  text-transform: uppercase; color: var(--login-sub); margin: 0 0 6px; }
#hgr-login .hgr-next { margin-top: 14px; }
#hgr-login .hgr-input { width: 100%; min-height: var(--tap-lg); padding: 12px 14px; border-radius: 14px;
  background: var(--login-field); border: 2px solid var(--login-field-edge); color: var(--login-field-text);
  font: inherit; font-size: var(--fs-md); outline: none; }
#hgr-login .hgr-input::placeholder { color: var(--login-hint); }
#hgr-login .hgr-input:focus { border-color: var(--login-focus); box-shadow: 0 0 0 4px var(--login-focus-ring); }
#hgr-login .hgr-code { text-align: center; font-family: var(--font-display); font-weight: 700; font-size: 2rem;
  letter-spacing: .4em; padding-left: calc(14px + .4em); }
#hgr-login .hgr-cta { width: 100%; min-height: var(--tap-lg); padding: 12px; border-radius: 16px; border: none; cursor: pointer;
  font-family: var(--font-display); font-weight: 600; font-size: var(--fs-lg); letter-spacing: .05em;
  text-transform: uppercase; color: #fff; background: var(--grad-brand); box-shadow: 0 12px 28px rgba(86,58,200,.42); }
#hgr-login .hgr-cta:hover { filter: brightness(1.08); }
#hgr-login .hgr-cta.warm { background: linear-gradient(135deg, #ffb22e, #ff8a1f); color: #2a1700;
  box-shadow: 0 12px 28px rgba(255,138,31,.3); }
#hgr-login .hgr-cta.hgr-join { width: auto; padding: 12px 22px; }
#hgr-login .hgr-go { margin-top: 18px; }
#hgr-login .hgr-link { display: inline-flex; align-items: center; min-height: var(--tap); padding: 0 4px; background: none;
  border: none; cursor: pointer; font: inherit; font-size: var(--fs-md); font-weight: 700; color: var(--login-link);
  text-decoration: underline; text-underline-offset: 3px; }
#hgr-login .hgr-link:hover { color: var(--login-link-hover); }
#hgr-login .hgr-links { display: flex; justify-content: space-between; gap: 8px; flex-wrap: wrap; margin-top: 8px; }
#hgr-login .hgr-or { display: flex; align-items: center; gap: 12px; margin: 18px 0 14px; color: var(--login-quiet);
  font-size: var(--fs-min); font-weight: 700; letter-spacing: .1em; text-transform: uppercase; }
#hgr-login .hgr-or::before, #hgr-login .hgr-or::after { content: ""; flex: 1; height: 1px; background: var(--login-rule); }
#hgr-login .hgr-alert { border-radius: 14px; padding: 12px 14px; margin: 0 0 14px; font-size: var(--fs-md); font-weight: 700;
  line-height: 1.35; background: var(--login-alert); border: 2px solid var(--login-alert-edge); color: var(--login-alert-text); }
#hgr-login .hgr-alert.login-failed { margin-top: 12px; }
#hgr-login .hgr-new { border-radius: 18px; padding: 16px; margin-top: 16px; background: var(--login-new);
  border: 2px solid var(--login-new-edge); }
#hgr-login .hgr-new h2 { font-family: var(--font-display); font-size: var(--fs-lg); margin: 0 0 4px; color: var(--login-text); }
#hgr-login .hgr-new p { margin: 0 0 12px; font-size: var(--fs-md); color: var(--login-new-text); line-height: 1.35;
  overflow-wrap: anywhere; }
#hgr-login .hgr-row { display: flex; gap: 10px; }
/* "Last initial" can take two lines; keep the two boxes level */
#hgr-login .hgr-names { align-items: flex-end; }
#hgr-login .hgr-initial { width: 104px; flex: none; }
/* Sign-up honeypot: off screen for people, a normal field for scripts. */
#hgr-login .hgr-nope { position: absolute; left: -10000px; top: auto; width: 1px; height: 1px; overflow: hidden; }
#hgr-login .hgr-pwwrap { position: relative; }
#hgr-login .hgr-pwwrap .hgr-input { padding-right: 84px; }
#hgr-login .hgr-show { position: absolute; right: 4px; top: 50%; transform: translateY(-50%); min-height: var(--tap);
  padding: 0 12px; background: none; border: none; color: var(--login-show); font: inherit; font-size: var(--fs-min);
  font-weight: 700; cursor: pointer; }
#hgr-login .hgr-foot { text-align: center; margin: 14px 0 0; }
#hgr-login .hgr-note { text-align: center; font-size: var(--fs-min); color: var(--login-sub); margin: 12px 0 0; line-height: 1.5; }
/* Laptops: a centered panel, not a phone sheet pinned to the bottom edge */
@media (min-width: 720px) {
  #hgr-login { justify-content: center; padding: 40px 0; }
  #hgr-login .hgr-top { padding-top: 0; }
  #hgr-login .hgr-card { margin: 0 auto; border-radius: 28px; border: 1px solid var(--login-edge);
    box-shadow: 0 30px 70px rgba(0,0,0,.6); }
  #hgr-login .hgr-grab { display: none; }
}
/* Wide screens: the sign beside the card, so both sit in the middle of the
   screen instead of the card running off the bottom of a laptop */
@media (min-width: 960px) {
  #hgr-login { flex-direction: row; align-items: center; gap: clamp(48px, 7vw, 112px); padding: 48px 24px; }
  #hgr-login .hgr-top { padding: 0; zoom: 1.5; }
  #hgr-login .hgr-card { margin: 0; flex: none; }
}

/* ---------- Show on TV: QR code and room code (tv_invite.html, always dark) ---------- */
.ui-tv.tv-invite { align-items: center; justify-content: center; text-align: center; gap: 3vh; }
.tv-invite .tv-invite-kicker { font-size: clamp(1.1rem, 2.4vw, 2.2rem); color: #a3a3b5; }
.tv-invite-ways { display: flex; align-items: center; justify-content: center; gap: 6vw; flex-wrap: wrap; margin-top: 2vh; }
.tv-qr { display: inline-block; padding: 2vh; border-radius: 24px; background: #fff; }
.tv-qr-box { width: min(38vh, 42vw); }
.tv-qr svg { width: 100%; height: auto; display: block; }
.tv-invite-say { font-size: clamp(1.1rem, 2.2vw, 2rem); color: #d8d8e6; }
.tv-invite-under { margin-top: 2vh; }
.tv-invite-then { margin-bottom: 1.5vh; }
.tv-invite-host { margin: .5vh 0 2vh; font-family: var(--font-display); font-weight: 700; font-size: clamp(1.6rem, 4vw, 3.6rem); }
.tv-invite-code { display: flex; justify-content: center; gap: 1.4vw; }
.tv-invite-digit { width: clamp(64px, 9vw, 150px); height: clamp(84px, 12vw, 190px); border-radius: 1.6vw;
  display: inline-flex; align-items: center; justify-content: center; background: #fff; color: #15151c;
  font-family: var(--font-display); font-weight: 700; font-size: clamp(3rem, 8vw, 8rem); line-height: 1; }
.tv-invite .ui-btn.tv-invite-close { margin-top: 4vh; color: #fff; border-color: rgba(255,255,255,.3); }

/* ---------- @mention list (_mentions.html, on pages with a comment box) ---------- */
.mention-dropdown { position: fixed; z-index: 1200; display: none; min-width: 200px; max-width: 340px; max-height: 280px;
  overflow-y: auto; padding: 4px; border-radius: 12px; background: var(--c-surface); border: 1px solid var(--c-border);
  box-shadow: 0 8px 28px rgba(0,0,0,.18); }
.mention-item { display: flex; align-items: center; min-height: var(--tap); padding: 0 12px; border-radius: 8px;
  cursor: pointer; font-size: var(--fs-sm); white-space: nowrap; }
.mention-item.active { background: var(--c-primary); color: #fff; }
.mention-item .mn-nick { font-weight: 700; }
.mention-item .mn-name { margin-left: 6px; color: var(--c-text-muted); }
.mention-item.active .mn-name { color: rgba(255,255,255,.85); }

/* ---------- Old "Activities & Games" links ---------- */
/* They land on the group page's "Start a game" (#start); keep the heading
   off the very top edge. */
.group-page #start { scroll-margin-top: var(--sp-sm); }

/* ---------- Picks screen with JavaScript off (pickem_play.html) ---------- */
/* Every question shows at once and "Save my picks" posts the whole form. */
@media (scripting: none) {
  .pk-screen .pk-q[x-cloak], .pk-screen .pk-noscript { display: block !important; }
  .pk-screen .pk-review, .pk-screen .pk-bar-row, .pk-screen .pk-save, .pk-screen .pk-count { display: none !important; }
}
/* End of "Picks page and cleanup" */

/* ==== Survey Says (feud) ==== */
/* The game page (answering, tidying, the board) and the TV board. Classes
   start with ui-feud-. Colors come from tokens; the game's own blue is --g. */

/* ---- Answering ---- */
.ui-feud-host { margin-bottom: var(--sp-md); border: 2px solid var(--g); }
.ui-feud-host .ui-card-title { display: flex; align-items: center; gap: 8px; }
.ui-feud-q .ui-kicker, .ui-feud-tidy > .ui-kicker, .ui-feud-ask .ui-kicker { display: block; }
.ui-feud-qtext { display: block; margin: 4px 0 var(--sp-sm); font-weight: 700; font-size: var(--fs-lg);
  line-height: 1.25; overflow-wrap: anywhere; }
.ui-feud-save { margin-top: var(--sp-md); }
.ui-feud-answers .ui-hint { margin-top: var(--sp-sm); }
.ui-feud-people li { min-height: var(--tap); padding: 5px 14px 5px 10px; }
.ui-feud-people li > .ui-ico { color: var(--c-good); }
.ui-feud-people li > span { min-width: 0; overflow-wrap: anywhere; }
.ui-feud-people li.me { background: var(--c-selected-bg); box-shadow: inset 0 0 0 2px var(--c-selected-border); }

/* ---- Tidying the board ---- */
.ui-feud-tidy .ui-feud-qtext { margin-bottom: var(--sp-md); }
.ui-feud-tidy + .ui-feud-tidy { margin-top: var(--sp-md); }
.ui-feud-tidy-row > summary { gap: 12px; }
.ui-feud-tidy-text { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.ui-feud-tidy-n { flex: none; min-width: 2.4rem; padding: 4px 8px; border-radius: 10px; text-align: center;
  background: var(--c-surface-2); font-family: var(--font-display); font-size: var(--fs-lg); }
.ui-feud-merge { display: flex; flex-wrap: wrap; gap: var(--sp-sm); margin: 0; }
.ui-feud-merge .ui-btn { flex: 1 1 auto; overflow-wrap: anywhere; }

/* ---- Scores ---- */
.ui-feud-teams { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-sm); margin: 0 0 var(--sp-sm); }
.ui-feud-team { display: flex; flex-direction: column; align-items: center; gap: 2px; min-width: 0;
  padding: 10px 8px 12px; border-radius: 16px; border: 2px solid var(--c-border); background: var(--c-surface);
  text-align: center; }
.ui-feud-team.on { border-color: var(--g); background: color-mix(in srgb, var(--g) 14%, var(--c-surface)); }
.ui-feud-team-name { font-weight: 700; font-size: var(--fs-md); line-height: 1.2; overflow-wrap: anywhere; }
.ui-feud-team-score { margin-top: 4px; font-family: var(--font-display); font-weight: 700; font-size: var(--fs-3xl);
  line-height: 1; }
.ui-feud-team-sub { font-size: var(--fs-min); color: var(--c-text-muted); }
.ui-feud-team-tag { margin-top: 6px; padding: 3px 10px; border-radius: 999px; background: var(--g); color: #fff;
  font-weight: 700; font-size: var(--fs-min); line-height: 1.3; }
@media (max-width: 340px) { .ui-feud-teams { grid-template-columns: 1fr; } }

/* ---- The question, the strikes and the points in play ---- */
.ui-feud-ask { margin: var(--sp-md) 0 var(--sp-sm); }
.ui-feud-ask-text { margin: 4px 0 0; font-family: var(--font-display); font-weight: 700; font-size: var(--fs-2xl);
  line-height: 1.12; overflow-wrap: anywhere; }
.ui-feud-status { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap;
  gap: var(--sp-sm) var(--sp-md); margin: 0 0 var(--sp-sm); }
.ui-feud-strikes { display: inline-flex; gap: 6px; }
.ui-feud-x { width: 2.3rem; height: 2.3rem; border-radius: 10px; display: inline-flex; align-items: center;
  justify-content: center; border: 2px dashed var(--c-border); color: transparent; }
.ui-feud-x .ui-ico { width: 70%; height: 70%; stroke-width: 3.4; }
.ui-feud-x.on { border: 2px solid var(--c-danger); background: var(--c-danger); color: #fff; }
.ui-feud-pot { font-weight: 700; font-size: var(--fs-md); }
.ui-feud-pot strong { margin-left: 4px; font-family: var(--font-display); font-size: var(--fs-xl); }
.ui-feud .feud-result, .ui-feud .feud-steal { margin: 0 0 var(--sp-sm); }

/* ---- The board: one slot per answer ---- */
.ui-feud-board { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.ui-feud-board > li { min-width: 0; }
.ui-feud-board form { margin: 0; }
.ui-feud-slot { display: flex; align-items: center; gap: 12px; width: 100%; min-height: 60px; padding: 8px 12px;
  border-radius: 14px; border: 2px solid var(--c-border); background: var(--c-surface-2); color: var(--c-text);
  font: inherit; text-align: left; }
.ui-feud-num { flex: none; width: 2.2rem; height: 2.2rem; border-radius: 50%; display: inline-flex; align-items: center;
  justify-content: center; background: var(--c-surface); color: var(--c-text); font-family: var(--font-display);
  font-weight: 700; font-size: var(--fs-lg); }
.ui-feud-text { flex: 1; min-width: 0; font-weight: 700; font-size: var(--fs-lg); line-height: 1.2; overflow-wrap: anywhere; }
.ui-feud-cnt { flex: none; min-width: 2.6rem; padding: 4px 8px; border-radius: 10px; text-align: center;
  font-family: var(--font-display); font-weight: 700; font-size: var(--fs-xl); line-height: 1.1; }
.ui-feud-slot.hidden .ui-feud-text { font-weight: 400; color: var(--c-text-muted); }
.ui-feud-slot.shown { background: linear-gradient(135deg, var(--g), var(--g2)); border-color: var(--g2); color: #fff; }
.ui-feud-slot.shown .ui-feud-num { background: rgba(255,255,255,.22); color: #fff; }
.ui-feud-slot.shown .ui-feud-cnt { background: rgba(0,0,0,.24); }
.ui-feud-slot.rest { background: transparent; border-style: dashed; }
.ui-feud-slot.rest .ui-feud-text, .ui-feud-slot.rest .ui-feud-cnt { color: var(--c-text-muted); }
/* The host's copy: every hidden answer is a button */
button.ui-feud-slot { cursor: pointer; -webkit-tap-highlight-color: transparent; }
button.ui-feud-slot.hidden { background: var(--c-surface); }
button.ui-feud-slot.hidden .ui-feud-text { font-weight: 700; color: var(--c-text); }
button.ui-feud-slot:hover { border-color: var(--g); }
button.ui-feud-slot:focus-visible { outline: 3px solid var(--c-selected-border); outline-offset: 2px; }
.ui-feud-hostcnt { display: block; margin-top: 2px; font-weight: 400; font-size: var(--fs-sm); color: var(--c-text-muted); }
.ui-feud-go { flex: none; display: inline-flex; align-items: center; gap: 4px; font-weight: 700; font-size: var(--fs-sm);
  color: var(--c-link); }
.ui-feud-board.small { gap: 6px; margin-top: var(--sp-sm); }
.ui-feud-board.small .ui-feud-slot { min-height: 48px; padding: 6px 10px; }
.ui-feud-board.small .ui-feud-text { font-size: var(--fs-md); }
.ui-feud-board.small .ui-feud-cnt { font-size: var(--fs-lg); }
/* A found answer turns over */
.ui-feud-slot.just { animation: uiFeudTurn .55s ease both; }
@keyframes uiFeudTurn { from { transform: perspective(600px) rotateX(-90deg); } to { transform: none; } }

/* ---- The host's controls ---- */
.ui-feud-teampick { margin: 0 0 var(--sp-sm); }
.ui-feud-teamform { flex: 1 1 0; min-width: 120px; display: flex; margin: 0; }
.ui-feud-teamform .ui-choice { width: 100%; font-size: var(--fs-md); overflow-wrap: anywhere; }
.ui-feud .feud-host-hint { margin-top: 0; }
.ui-feud-undo { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 12px; margin: var(--sp-sm) 0 0;
  padding: 8px 8px 8px 14px; border-radius: 14px; background: var(--c-surface-2); }
.ui-feud-undo-text { flex: 1 1 12rem; min-width: 0; font-weight: 700; font-size: var(--fs-md); line-height: 1.3;
  overflow-wrap: anywhere; }
.ui-feud-undo form { margin: 0; flex: none; }

/* ---- Earlier questions, and the end ---- */
.ui-feud-past + .ui-feud-past { margin-top: var(--sp-md); padding-top: var(--sp-md); border-top: 1px solid var(--c-border); }
.ui-feud-past-q { margin: 0; font-weight: 700; font-size: var(--fs-md); line-height: 1.25; overflow-wrap: anywhere; }
.ui-feud .feud-summary > summary .ui-feud-past-q { flex: 1; min-width: 0; }

/* ---- A wrong answer: the big X over everything, for a moment ---- */
.ui-feud-bigx { position: fixed; inset: 0; z-index: 2500; display: none; align-items: center; justify-content: center;
  pointer-events: none; }
.ui-feud-bigx.on { display: flex; }
.ui-feud-bigx .ui-ico { width: min(56vw, 56vh); height: min(56vw, 56vh); color: var(--c-danger); stroke-width: 3.6;
  filter: drop-shadow(0 6px 24px rgba(0,0,0,.55)); animation: uiFeudX 1.2s ease both; }
@keyframes uiFeudX {
  0%   { transform: scale(.3); opacity: 0; }
  15%  { transform: scale(1.08); opacity: 1; }
  25%  { transform: scale(1); }
  80%  { opacity: 1; }
  100% { opacity: 0; }
}

/* ---- The TV (a dark screen, like the bingo and trivia boards) ---- */
.ui-feud-tv-q { font-size: clamp(1.8rem, 4.4vw, 4.6rem); overflow-wrap: anywhere; }
.ui-feud-tv-teams { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2vw; margin: 0 0 2.4vh; }
.ui-feud-tv-team { display: flex; align-items: center; justify-content: space-between; gap: 1.4vw; min-width: 0;
  padding: 1.2vh 1.6vw; border-radius: 22px; background: rgba(255,255,255,.07); border: 3px solid rgba(255,255,255,.14); }
.ui-feud-tv-team.on { background: linear-gradient(135deg, var(--g), var(--g2)); border-color: #fff; }
.ui-feud-tv-team .n { min-width: 0; display: flex; flex-direction: column; font-family: var(--font-display);
  font-weight: 700; font-size: clamp(1.4rem, 2.8vw, 3rem); line-height: 1.1; overflow-wrap: anywhere; }
.ui-feud-tv-team .tag { font-family: var(--font); font-weight: 700; font-size: clamp(1.05rem, 1.8vw, 2rem); opacity: .92; }
.ui-feud-tv-team .s { flex: none; font-family: var(--font-display); font-weight: 700; font-size: clamp(2.2rem, 5.4vw, 5.8rem);
  line-height: 1; }
/* Filled down the first column, then the second, like the show */
.ui-feud-tv-board { list-style: none; margin: 0; padding: 0; display: grid; gap: 1.2vh 1.4vw;
  grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-flow: column; }
.ui-feud-tv-board.r1 { grid-template-rows: repeat(1, auto); }
.ui-feud-tv-board.r2 { grid-template-rows: repeat(2, auto); }
.ui-feud-tv-board.r3 { grid-template-rows: repeat(3, auto); }
.ui-feud-tv-board.r4 { grid-template-rows: repeat(4, auto); }
.ui-feud-tv-slot { display: flex; align-items: center; gap: 1.2vw; min-width: 0; min-height: 9.5vh; padding: .8vh 1.2vw;
  border-radius: 16px; border: 3px solid rgba(255,255,255,.2); background: color-mix(in srgb, var(--g2) 55%, #07070c);
  font-family: var(--font-display); font-weight: 700; font-size: clamp(1.4rem, 3vw, 3.2rem); line-height: 1.1; }
.ui-feud-tv-slot .num { flex: none; width: 1.6em; height: 1.6em; border-radius: 50%; display: inline-flex;
  align-items: center; justify-content: center; background: rgba(255,255,255,.14); }
.ui-feud-tv-slot.hidden { justify-content: center; }
.ui-feud-tv-slot.hidden .num { background: var(--g); box-shadow: 0 0 0 3px rgba(255,255,255,.25); }
.ui-feud-tv-slot .t { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.ui-feud-tv-slot .c { flex: none; min-width: 1.8em; padding: .1em .35em; border-radius: 12px; text-align: center;
  background: rgba(0,0,0,.32); }
.ui-feud-tv-slot.shown { background: linear-gradient(180deg, var(--g), var(--g2)); border-color: #fff; }
.ui-feud-tv-slot.rest { background: transparent; border-style: dashed; color: #a3a3b5; }
.ui-feud-tv-slot.just { animation: uiFeudTurn .6s ease both; }
.ui-feud-tv-foot { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 2vw;
  margin-top: 2.4vh; }
.ui-feud-tv-strikes .ui-feud-x { width: clamp(3.2rem, 7vw, 7.5rem); height: clamp(3.2rem, 7vw, 7.5rem); border-radius: 18px;
  border-color: rgba(255,255,255,.2); }
.ui-feud-tv-strikes .ui-feud-x.on { border-color: #ff8a8d; background: var(--c-danger); }
.ui-feud-tv-pot { display: inline-flex; align-items: center; gap: .5em; font-family: var(--font-display); font-weight: 700;
  font-size: clamp(1.4rem, 3vw, 3.2rem); color: #d8d8e6; }
.ui-feud-tv-pot strong { color: #fff; font-size: 1.3em; }
.ui-feud-tv-main { min-width: 0; }
.ui-feud-tv-qs { margin: 0; padding-left: 1.4em; font-family: var(--font-display); font-weight: 700;
  font-size: clamp(1.5rem, 3.4vw, 3.6rem); line-height: 1.15; }
.ui-feud-tv-qs li { overflow-wrap: anywhere; }
.ui-feud-tv-qs li + li { margin-top: 2vh; }
.ui-feud-tv-winner { display: flex; align-items: center; gap: 2vw; margin: 3vh 0; font-family: var(--font-display);
  font-weight: 700; font-size: clamp(2.4rem, 7vw, 7.5rem); line-height: 1.05; color: #ffc24b; overflow-wrap: anywhere; }
.ui-feud-tv-winner .ui-ico { flex: none; width: 1em; height: 1em; }
@media (max-width: 760px) {
  .ui-feud-tv-board { grid-auto-flow: row; grid-template-columns: 1fr; }
  .ui-feud-tv-board.r1, .ui-feud-tv-board.r2, .ui-feud-tv-board.r3, .ui-feud-tv-board.r4 { grid-template-rows: none; }
  .ui-feud-tv-teams { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) {
  .ui-feud-slot.just, .ui-feud-tv-slot.just, .ui-feud-bigx .ui-ico { animation: none; }
}
/* End of "Survey Says" */

/* ==== Tournament moments ==== */
/* The champion moment and a winner moving on (static/hgr-moments.js), on the
   tournament page, the TV screen and the podium reveal (_podium_overlay.html).
   Classes start with hgr- (the moment's parts) or t- (the tournament page). */

/* Champion: the name (and lines that give it away, data-moment-hide) blurred and
   shaking during the drumroll, then the trophy drops. */
[data-moment-name], [data-moment-hide] { transition: filter .25s ease; }
[data-moment-state="pending"] [data-moment-name], [data-moment-state="pending"] [data-moment-hide],
[data-moment-state="drumroll"] [data-moment-name], [data-moment-state="drumroll"] [data-moment-hide] { filter: blur(.4em); }
[data-moment-state="pending"] [data-moment-trophy],
[data-moment-state="drumroll"] [data-moment-trophy] { opacity: 0; }
/* Without the script, the result shows after a few seconds anyway. */
[data-moment-state="pending"] [data-moment-name],
[data-moment-state="pending"] [data-moment-hide] { animation: hgrUnblur 0s linear 3s forwards; }
[data-moment-state="pending"] [data-moment-trophy] { animation: hgrShow 0s linear 3s forwards; }
[data-moment-state="reveal"] [data-moment-name] { animation: hgrNamePop .45s cubic-bezier(.2, 1.4, .4, 1) both; }
[data-moment-trophy] { position: relative; z-index: 5; }
@keyframes hgrUnblur { to { filter: none; } }
@keyframes hgrShow { to { opacity: 1; } }
@keyframes hgrNamePop { 0% { transform: scale(.85); filter: blur(.25em); } 60% { transform: scale(1.06); filter: none; }
  100% { transform: scale(1); filter: none; } }

/* "Play it again" and the sound switch (icon + word; the word says what it is now) */
.hgr-moment-ctrls { display: flex; flex-wrap: wrap; gap: var(--sp-sm); margin-top: 14px; }
.hgr-moment-ctrls .ui-btn { flex: 1 1 auto; margin: 0; padding-left: 10px; padding-right: 10px; }
.hgr-sound .on, .hgr-sound .off { display: inline-flex; align-items: center; gap: 8px; }
.hgr-sound[aria-checked="true"] .off, .hgr-sound[aria-checked="false"] .on { display: none; }

/* The champion card on the tournament page: the trophy falls into it from above */
.tv-shell .t-champion { overflow: visible; }
.tv-shell .t-champion .scrim { border-radius: inherit; }
.t-champ-head { display: flex; align-items: flex-start; gap: 12px; }
.t-champ-words { flex: 1; min-width: 0; }
.t-champion [data-moment-name] { transform-origin: 0 50%; }
.t-champ-cup { flex: none; width: 4.2rem; height: 4.2rem; border-radius: 50%; display: inline-flex; align-items: center;
  justify-content: center; background: rgba(42,28,0,.12); color: #2a1c00; }
.t-champ-cup .ui-ico { width: 2.6rem; height: 2.6rem; }
.tv-shell .t-champion .hgr-moment-ctrls .ui-btn { margin-top: 0; }
.tv-shell .t-champion .hgr-moment-ctrls .ui-btn.outline { color: #2a1c00; border-color: rgba(42,28,0,.45);
  background: rgba(255,255,255,.22); }
.ui-undo .ui-btn.t-undo-close { background: transparent; color: #fff; }

/* Easy-read: the status pills need deeper words on the light pages (tournament and match) */
html[data-theme="light"] .tv-shell .ui-pill.final, html[data-theme="light"] .ui-t-match .ui-pill.final { color: #8a5000; }
html[data-theme="light"] .tv-shell .ui-pill.live, html[data-theme="light"] .ui-t-match .ui-pill.live {
  color: color-mix(in srgb, var(--c-good) 80%, #000); }

/* The champion on the TV (the TV stays dark) */
.ui-tvb-champ [data-moment-trophy] { display: inline-flex; }
.ui-tvb-champ .hgr-moment-ctrls { justify-content: center; margin-top: 3vh; }
.ui-tvb-champ .hgr-moment-ctrls .ui-btn { flex: 0 1 auto; color: #fff; border-color: rgba(255,255,255,.3); }
.ui-tvb-champ .hgr-moment-ctrls .ui-ico { width: 1.35em; height: 1.35em; color: currentColor; }

/* The podium reveal: top to bottom, so it fits any phone and text size (it
   scrolls when it must; the buttons stay at the bottom). */
#sbv2-overlay.hgr-podium { display: flex; flex-direction: column; overflow-x: hidden; overflow-y: auto;
  overscroll-behavior: contain; padding: max(40px, calc(env(safe-area-inset-top, 0px) + 28px)) 16px 0; }
#sbv2-overlay.hgr-podium .sbv2-spot, #sbv2-overlay.hgr-podium .sbv2-beam { pointer-events: none; }
#sbv2-overlay.hgr-podium .sbv2-beam { top: 0; bottom: 0; }
#sbv2-overlay.hgr-podium > .sbv2-ov-head, #sbv2-overlay.hgr-podium > .sbv2-podium,
#sbv2-overlay.hgr-podium > .sbv2-stage-line, #sbv2-overlay.hgr-podium > .sbv2-rankcard {
  position: relative; inset: auto; z-index: 1; }
#sbv2-overlay.hgr-podium > .sbv2-ov-head { padding: 0; }
#sbv2-overlay.hgr-podium > .sbv2-podium { margin-top: auto; padding: 20px 2px 0; }
#sbv2-overlay.hgr-podium > .sbv2-stage-line { flex: none; margin: 0 -16px; }
#sbv2-overlay.hgr-podium > .sbv2-rankcard { margin-top: 14px; }
#sbv2-overlay.hgr-podium > .hgr-podium-actions { position: sticky; bottom: 0; z-index: 2; display: grid; gap: 10px;
  margin: 14px -16px 0; padding: 12px 16px max(16px, calc(env(safe-area-inset-bottom, 0px) + 10px));
  background: linear-gradient(180deg, rgba(11,11,18,0), #0b0b12 12px); }
.hgr-podium-actions > * { width: 100%; max-width: 420px; justify-self: center; }
#sbv2-overlay.hgr-podium .sbv2-continue { position: static; width: 100%; margin: 0; }
#sbv2-overlay .hgr-moment-ctrls { margin: 0; }
#sbv2-overlay .hgr-moment-ctrls .ui-btn { color: #fff; border-color: rgba(255,255,255,.35); background: #16161f; }
.hgr-podium-cup { display: inline-flex; width: 3rem; height: 3rem; margin-bottom: 4px; color: #ffd166;
  filter: drop-shadow(0 8px 16px rgba(245,158,11,.55)); }
.hgr-podium-cup .ui-ico { width: 100%; height: 100%; }
/* Long names and a long eyebrow wrap (a tie, "Most likely to…") instead of being cut off. */
#sbv2-overlay.hgr-podium .sbv2-eyebrow { white-space: normal; overflow: visible; text-overflow: clip;
  overflow-wrap: anywhere; letter-spacing: .12em; line-height: 1.3; }
#sbv2-overlay.hgr-podium .sbv2-plate { max-width: 100%; white-space: normal; overflow: visible; text-overflow: clip;
  overflow-wrap: anywhere; text-align: center; line-height: 1.2; }
/* The steps share the width (wider plates when there are only two). */
#sbv2-overlay.hgr-podium .sbv2-podium { gap: 8px; }
#sbv2-overlay.hgr-podium .sbv2-col { flex: 1 1 0; min-width: 0; max-width: 170px; }
#sbv2-overlay.hgr-podium .sbv2-col.first { flex-grow: 1.15; }
#sbv2-overlay.hgr-podium .sbv2-rankcard .rc-line, #sbv2-overlay.hgr-podium .sbv2-rankcard .rc-sub {
  white-space: normal; overflow: visible; overflow-wrap: anywhere; max-width: none; }
/* A step with the person's face instead of a jersey (ring and number in the medal's color). */
.hgr-podium-face { --medal: #e8c15a; position: relative; display: inline-flex; margin-bottom: 4px; }
.hgr-podium-face.silver { --medal: #b8b8c4; }
.hgr-podium-face.bronze { --medal: #c68d55; }
.hgr-podium-faces { display: inline-flex; }
.hgr-podium-faces .ui-avatar { width: 58px; height: 58px; font-size: 1.15rem;
  box-shadow: 0 0 0 3px #0b0b12, 0 0 0 6px var(--medal); }
.hgr-podium-face.gold .hgr-podium-faces .ui-avatar { width: 70px; height: 70px; font-size: 1.35rem; }
.hgr-podium-faces .ui-avatar.emoji { font-size: 2rem; }
.hgr-podium-faces .ui-avatar:not(:only-child) { width: 42px; height: 42px; font-size: var(--fs-min); }
.hgr-podium-faces .ui-avatar.emoji:not(:only-child) { font-size: 1.3rem; }
.hgr-podium-faces .ui-avatar + .ui-avatar { margin-left: -8px; }
.hgr-podium-rank { position: absolute; right: -6px; bottom: -6px; width: 26px; height: 26px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center; background: var(--medal); color: #1a1405;
  font-family: var(--font-display); font-weight: 700; font-size: var(--fs-min); line-height: 1;
  box-shadow: 0 0 0 2px #0b0b12; }
/* The runners-up come in first, then the drumroll on the winner's plate. */
#sbv2-overlay.hgr-podium .sbv2-col.first .sbv2-plate { animation: none; }
#sbv2-overlay.hgr-podium .sbv2-col.first .sbv2-plate.ui-drumroll { animation: uiDrumroll .09s linear infinite; }
#sbv2-overlay.hgr-podium[data-moment-state="reveal"] .sbv2-col.first .sbv2-plate {
  animation: hgrNamePop .45s cubic-bezier(.2, 1.4, .4, 1) both; }
#sbv2-overlay.hgr-podium .sbv2-col.third { animation-delay: .3s; }
#sbv2-overlay.hgr-podium .sbv2-col.second { animation-delay: .5s; }
#sbv2-overlay.hgr-podium .sbv2-col.third .sbv2-plate { animation-delay: .55s; }
#sbv2-overlay.hgr-podium .sbv2-col.second .sbv2-plate { animation-delay: .75s; }
#sbv2-overlay.hgr-podium .sbv2-rankcard { animation-delay: 2.6s; }
/* Seen before: the podium as it stands, nothing moving. */
#sbv2-overlay.hgr-podium.is-still, #sbv2-overlay.hgr-podium.is-still * { animation: none !important; }

/* Match won: the winner's name flies from the match it won into its new slot. */
.tv-shell .bracket-match.is-flying, .ui-tvb-match.is-flying { overflow: visible; position: relative; z-index: 2; }
.is-flying-name { position: relative; z-index: 3; }
.tv-shell .bracket-entrant.is-landed, .ui-tvb-row.is-landed { animation: hgrLanded 1.6s ease-out; }
@keyframes hgrLanded { 0%, 30% { background: color-mix(in srgb, var(--g-tournament) 30%, transparent); }
  100% { background: transparent; } }

@media (prefers-reduced-motion: reduce) {
  [data-moment-name], [data-moment-hide], [data-moment-trophy] { animation: none !important; filter: none !important; opacity: 1 !important;
    transition: none; }
  .tv-shell .bracket-entrant.is-landed, .ui-tvb-row.is-landed { animation: none; }
}
/* End of "Tournament moments" */

/* ---------- Pick'em TV board (the whole sheet, scored live) ---------- */
.ui-pool-tv-body { flex: 1; min-height: 0; display: grid; gap: 2.2vw; align-items: start;
  grid-template-columns: clamp(250px, 23vw, 440px) minmax(0, 1fr);
  --tvfs: clamp(.8rem, calc(80vh / var(--rows, 14) / 1.5), 1.6rem); }
.ui-pool-tv-side { display: flex; flex-direction: column; gap: 2vh; min-width: 0; max-height: 80vh;
  overflow: hidden; padding-bottom: 6vh; }
.ui-pool-tv-top li { font-size: clamp(1.3rem, 2.6vw, 2.6rem); }
.ui-pool-tv-top li .up { font-size: .55em; color: #4ef08f; vertical-align: middle; margin-left: .3em; }
.ui-pool-tv-of { margin: -1vh 0 0; color: #a3a3b5; font-size: clamp(.95rem, 1.3vw, 1.3rem); }
.ui-pool-tv-side .ui-og-tv-join { padding: 1vh 1vw; }
.ui-pool-tv-side .ui-og-tv-join svg { width: clamp(70px, 7vw, 120px); }
.ui-pool-tv-side .ui-og-tv-join .ui-tv-code { font-size: clamp(1.6rem, 3vw, 3rem); }
.ui-pool-tv-ticker { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 1vh; }
.ui-pool-tv-ticker li { display: flex; flex-direction: column; gap: .2vh; padding: .8vh 1vw; border-radius: 14px;
  background: rgba(255,255,255,.07); border: 1px solid rgba(255,255,255,.12); }
.ui-pool-tv-ticker .q { color: #d8d8e6; font-size: clamp(.9rem, 1.2vw, 1.2rem); white-space: nowrap; overflow: hidden;
  text-overflow: ellipsis; }
.ui-pool-tv-ticker .r { font-weight: 700; color: #4ef08f; font-size: clamp(1rem, 1.4vw, 1.4rem); line-height: 1.2; }
.ui-pool-tv-table { list-style: none; margin: 0; padding: 0;
  font-size: clamp(.85rem, calc(42vh / var(--players, 10) / 2.1), 1.5rem); }
.ui-pool-tv-table li { display: flex; align-items: center; gap: .6em; padding: .3em 0;
  border-bottom: 1px solid rgba(255,255,255,.14); line-height: 1.2; }
.ui-pool-tv-table .p { width: 2.2em; color: #a3a3b5; font-family: var(--font-display); font-weight: 700; }
.ui-pool-tv-table .n { flex: 1; min-width: 0; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ui-pool-tv-table .d { color: #a3a3b5; font-size: .8em; }
.ui-pool-tv-table .s { font-family: var(--font-display); font-weight: 700; color: #ffc24b; }
.ui-pool-tv-table li.first .n { color: #ffc24b; }
.ui-pool-tv-champ { text-align: center; padding: 1.4vh 1vw; border-radius: 22px;
  background: linear-gradient(160deg, rgba(255,194,75,.18), rgba(255,194,75,.05)); border: 2px solid rgba(255,194,75,.45); }
.ui-pool-tv-cup { display: block; color: #ffc24b; }
.ui-pool-tv-cup svg { width: clamp(44px, 7vh, 90px); height: auto; }
.ui-pool-tv-champ .n { font-family: var(--font-display); font-weight: 700; font-size: clamp(1.6rem, 3vw, 3.2rem);
  line-height: 1.05; color: #fff; overflow-wrap: anywhere; }
.ui-pool-tv-champ .s { color: #ffc24b; font-weight: 700; font-size: clamp(1rem, 1.4vw, 1.4rem); margin-top: .4vh; }
.ui-pool-tv-champ .hgr-moment-ctrls { justify-content: center; margin-top: .8vh; }
.ui-pool-tv-sheet { columns: var(--cols, 3); column-gap: 1.8vw; column-fill: balance; font-size: var(--tvfs);
  min-width: 0; max-height: 82vh; }
.ui-pool-tv-sec { margin-bottom: .7em; }
.ui-pool-tv-sec h3 { margin: 0 0 .2em; padding-bottom: .12em; font-family: var(--font-display); font-weight: 700;
  font-size: .82em; letter-spacing: .1em; text-transform: uppercase; color: #a3a3b5; white-space: nowrap;
  overflow: hidden; text-overflow: ellipsis; border-bottom: 2px solid rgba(255,255,255,.18); break-after: avoid; }
.ui-pool-tv-sec ol { list-style: none; margin: 0; padding: 0; }
.ui-pool-tv-sec li { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; column-gap: .4em;
  align-items: baseline; line-height: 1.35; padding: .15em 0; break-inside: avoid;
  border-bottom: 1px solid rgba(255,255,255,.08); }
.ui-pool-tv-sec .n { color: #8e8ea3; font-family: var(--font-display); font-weight: 700; min-width: 1.6em; text-align: right; }
.ui-pool-tv-sec .t { min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ui-pool-tv-sec .a { white-space: nowrap; font-weight: 700; text-align: right; color: #4ef08f; }
.ui-pool-tv-sec .rw { grid-column: 2 / 4; font-size: .8em; color: #a3a3b5; }
.ui-pool-tv-sec .rw .r { color: #4ef08f; }
.ui-pool-tv-sec .rw .w { color: #ff7b7b; }
.ui-pool-tv-sec li.new { background: rgba(78,240,143,.14); border-radius: .3em; animation: uiPoolNew 1.2s ease; }
.ui-pool-tv-sheet .pickem-tv-nothing-yet { column-span: all; margin: 4vh 0; }
@keyframes uiPoolNew { from { background: rgba(78,240,143,.5); } to { background: rgba(78,240,143,.14); } }
/* Close sits under the sheet, bottom-right: the left column is full. */
.ui-pool-tv .ui-og-tv-close { left: auto; right: 3vw; }
@media (max-width: 900px) { .ui-pool-tv-body { grid-template-columns: 1fr; }
  .ui-pool-tv-side { max-height: none; overflow: visible; }
  .ui-pool-tv-sheet { columns: 1; font-size: var(--fs-md); max-height: none; } }
@media (prefers-reduced-motion: reduce) { .ui-pool-tv-sec li.new { animation: none; } }