/* Who Mogs Who?'s own parts (landing page, game, Choose Your Stat). Everything
   else (colours, type, buttons, cards) comes from site.css; the accent is
   data-feature="mogs". Right and wrong get their own green and red. */
:root { --right: #15803d; --wrong: #b91c1c; }
@media (prefers-color-scheme: dark) { :root { --right: #4ade80; --wrong: #f87171; } }
[hidden] { display: none !important; }

/* ---------- Landing page (/mogs): four wide, thin panels ---------- */
.modes { display: flex; flex-direction: column; gap: 10px; }
.mode-panel {
  display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 4px 14px;
  padding: 14px 16px; text-decoration: none; transition: border-color 0.15s;
}
a.mode-panel:hover, a.mode-panel:focus-visible { border-color: var(--accent); }
.mode-panel .icon svg { fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.mode-panel .icon .pip { fill: currentColor; stroke: none; }
.mode-panel .icon .knob { fill: var(--surface); }
.mode-text { display: flex; flex-direction: column; min-width: 0; }
.mode-title { font-weight: 600; }
.mode-sub { color: var(--muted); font-size: 0.85rem; }
.mode-side { display: flex; gap: 8px; align-items: center; justify-self: end; font-size: 0.875rem; font-weight: 600; color: var(--accent); white-space: nowrap; }
.mode-panel.played .mode-side { flex-direction: column; align-items: flex-end; gap: 0; }
.mode-side .done { color: var(--text); }
.mode-side .next-in { color: var(--muted); font-size: 0.8rem; font-weight: 500; font-variant-numeric: tabular-nums; }
@media (max-width: 600px) {
  .mode-panel { grid-template-columns: auto 1fr; }
  .mode-side { grid-column: 1 / -1; justify-self: start; }
  .mode-panel.played .mode-side { align-items: flex-start; }
}

/* ---------- Game page: which game, then the question and the cards ---------- */
.controls { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin-bottom: 8px; }
.controls h1 { margin-right: auto; font-size: 1.5rem; }
.list-sub { margin: 0 0 8px; color: var(--muted); font-size: 0.85rem; text-align: center; }
/* The question, right above the cards. */
.question {
  margin: 24px 0 4px; font-size: clamp(1.3rem, 3.6vw, 1.75rem); line-height: 1.25;
  font-weight: 700; text-align: center; text-wrap: balance;
}
.pick-hint { margin: 0 0 14px; color: var(--muted); font-size: 0.85rem; text-align: center; }

.duel { position: relative; display: grid; grid-template-columns: 1fr auto 1fr; gap: 12px; align-items: stretch; }
@media (max-width: 600px) { .duel { grid-template-columns: 1fr; } }
/* A player card. The cards are the answer: tap the player you think has more. */
.duel .card { position: relative; display: flex; flex-direction: column; gap: 6px; min-width: 0; padding: 16px; }
.card.pickable { cursor: pointer; transition: border-color 0.15s, transform 0.15s, box-shadow 0.15s; }
.card.pickable:hover, .card.pickable:focus-visible {
  border-color: var(--accent); transform: translateY(-2px); box-shadow: 0 4px 14px rgb(0 0 0 / 0.08); outline: none;
}
.card.pickable:active { transform: translateY(0); }
.card.picked { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent); }
.name { font-size: 1.2rem; font-weight: 700; letter-spacing: -0.01em; overflow-wrap: anywhere; }
.facts { margin: 0; display: grid; grid-template-columns: auto 1fr; gap: 2px 10px; font-size: 0.85rem; }
.facts dt { color: var(--muted); }
.facts dd { margin: 0; overflow-wrap: anywhere; }
.rank { margin-top: 8px; font-size: 1.9rem; font-weight: 700; line-height: 1.1; font-variant-numeric: tabular-nums; }
.value { color: var(--muted); font-size: 0.9rem; }
.hidden-rank { margin-top: 8px; font-size: 1.9rem; font-weight: 700; color: var(--line-strong); line-height: 1.1; }
/* The * note in a starred player's card. */
.card-note { margin-top: auto; padding-top: 8px; color: var(--muted); font-size: 0.75rem; line-height: 1.35; }

/* The jersey in the card's top-right corner, about as tall as the name and the
   first three clues (down to the Draft line); the text wraps beside it. */
.card-head { display: flow-root; }
.card-head .name { margin-bottom: 6px; }
.duel .jersey { float: right; width: 114px; height: 114px; margin: 0 0 6px 12px; }

.next-row { display: flex; justify-content: center; margin-top: 16px; }
.over { margin-top: 20px; padding: 18px; text-align: center; }
.over > p { margin-bottom: 12px; font-size: 1.1rem; font-weight: 700; }
.over p.over-sub { margin-top: -6px; font-size: 0.9rem; font-weight: 400; color: var(--muted); }
.over p.over-sub:empty { display: none; }

/* The rank reveal (see revealPlayer in mogs.html). */
.rank.counting { color: var(--muted); }
.rank.landed { animation: rank-land 0.45s ease-out; }
@keyframes rank-land { 0% { transform: scale(1.35); } 60% { transform: scale(0.95); } 100% { transform: scale(1); } }
.card .rank { transform-origin: left center; }

/* ---------- The scoreboard between the cards: score, hearts, streak ---------- */
.scoreboard { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; min-width: 96px; }
.score-label { color: var(--muted); font-size: 0.75rem; font-weight: 600; }
.score-number { font-size: 2.8rem; font-weight: 700; line-height: 1; font-variant-numeric: tabular-nums; }
.score-number.bump { animation: score-bump 0.45s ease-out; }
@keyframes score-bump { 0% { transform: scale(1); } 40% { transform: scale(1.3); color: var(--right); } 100% { transform: scale(1); } }

/* Three hearts; a lost one cracks, splits, and crumbles away. */
.hearts { display: inline-flex; gap: 4px; align-items: center; }
.heart { width: 22px; height: 22px; overflow: visible; }
.heart .whole { fill: var(--wrong); }
.heart .half { fill: var(--wrong); transform-box: fill-box; opacity: 0; }
.heart.breaking .whole { display: none; }
.heart.breaking .half { opacity: 1; }
.heart .half-left { transform-origin: 100% 100%; }
.heart .half-right { transform-origin: 0% 100%; }
.heart .crack { fill: none; stroke: var(--bg); stroke-width: 1.4; stroke-linejoin: round; opacity: 0; }
.heart .shard { fill: var(--wrong); opacity: 0; transform-box: fill-box; transform-origin: center; }
.heart.lost { visibility: hidden; }
.heart.breaking { animation: heart-shake 0.25s ease-in-out; }
.heart.breaking .crack { animation: heart-crack 0.95s ease-out forwards; }
.heart.breaking .half-left { animation: heart-fall-left 0.95s ease-in forwards; }
.heart.breaking .half-right { animation: heart-fall-right 0.95s ease-in forwards; }
.heart.breaking .shard { animation: heart-shard 0.95s ease-out forwards; }
@keyframes heart-shake {
  0%, 100% { transform: translateX(0); }
  25% { transform: translateX(-2px) rotate(-6deg); }
  75% { transform: translateX(2px) rotate(6deg); }
}
@keyframes heart-crack { 0% { opacity: 0; } 15%, 30% { opacity: 1; } 45%, 100% { opacity: 0; } }
@keyframes heart-fall-left { 0%, 25% { transform: none; opacity: 1; } 100% { transform: translate(-5px, 9px) rotate(-38deg); opacity: 0; } }
@keyframes heart-fall-right { 0%, 25% { transform: none; opacity: 1; } 100% { transform: translate(5px, 9px) rotate(38deg); opacity: 0; } }
@keyframes heart-shard {
  0%, 25% { opacity: 0; transform: translate(0, 0) scale(1); }
  35% { opacity: 1; }
  100% { opacity: 0; transform: translate(var(--dx), calc(var(--dy) + 8px)) scale(0.4) rotate(120deg); }
}

/* The last 5 guesses, under the cards: grey, then green or red. */
.results { display: flex; justify-content: center; gap: 10px; margin-top: 16px; }
.result-dot { width: 12px; height: 12px; border-radius: 50%; background: var(--line-strong); transition: background-color 0.25s; }
.result-dot.right { background: var(--right); }
.result-dot.wrong { background: var(--wrong); }
.result-dot.pop { animation: dot-pop 0.4s ease-out; }
@keyframes dot-pop { 0% { transform: scale(0.4); } 60% { transform: scale(1.35); } 100% { transform: scale(1); } }

/* The color drop flying to a result dot, and the card sliding into place. */
.drop { position: fixed; z-index: 20; width: 12px; height: 12px; border-radius: 50%; pointer-events: none; }
.drop.right { background: var(--right); }
.drop.wrong { background: var(--wrong); }
.card.sliding { z-index: 3; box-shadow: 0 10px 24px rgb(0 0 0 / 0.14); }

/* Streaks: subtle at 5, then hotter at 10, 15 and 20. */
.streak { padding: 2px 10px; border-radius: 999px; font-size: 0.75rem; font-weight: 700; white-space: nowrap; }
.streak.tier-1 { padding: 0; color: #b45309; background: none; }
.streak.tier-2 { color: #422006; background: linear-gradient(90deg, #fde047, #facc15); box-shadow: 0 0 10px rgba(250, 204, 21, 0.6); }
.streak.tier-3 { color: #fff; background: linear-gradient(90deg, #fb923c, #ef4444); box-shadow: 0 0 14px rgba(249, 115, 22, 0.7); }
.streak.tier-4 { color: #fff; background: linear-gradient(90deg, #a855f7, #ec4899); box-shadow: 0 0 18px rgba(217, 70, 239, 0.8); }
@media (prefers-color-scheme: dark) { .streak.tier-1 { color: #fcd34d; } }
.streak.bump { animation: streak-bump 0.5s ease-out; }
.streak.tier-1.bump { animation: streak-nudge 0.35s ease-out; }
@keyframes streak-bump { 0% { transform: scale(0.6); } 50% { transform: scale(1.25); } 100% { transform: scale(1); } }
@keyframes streak-nudge { 0% { transform: scale(0.85); } 100% { transform: scale(1); } }
/* The dots on a streak burn (Matt, 2026-10-15): ember red at 5, orange at
   10, gold at 15 and blue at 20. Each flame is one colour, lighter at its
   core and darker at the edge (Matt: single-colour gradients, calm), with a
   faint glow. They flicker gently and out of step with each other
   (different lengths, started mid-cycle), so the fire looks alive without
   pulsing in a wave. */
.results.tier-1 { --core: #e9806c; --flame: #c2412d; --edge: #7a2318; --glow: rgb(194 65 45 / 0.2); }
.results.tier-2 { --core: #efb488; --flame: #d9813f; --edge: #a35622; --glow: rgb(217 129 63 / 0.18); }
.results.tier-3 { --core: #eed49a; --flame: #d4ac56; --edge: #a8802e; --glow: rgb(212 172 86 / 0.18); }
.results.tier-4 { --core: #d2e6ff; --flame: #4d8ef5; --edge: #1f55d6; --glow: rgb(77 142 245 / 0.35); }
/* On a streak a right guess becomes a small flame (Matt, 2026-10-15): the
   shape is cut with clip-path, so its glow is drawn by the row around it
   (a clipped element can't glow outside its own shape). The row keeps the
   flames' height, so nothing jumps when a streak starts. */
.results { align-items: flex-end; min-height: 16px; }
.results[class*="tier-"] { filter: drop-shadow(0 0 2px var(--glow)); }
.results[class*="tier-"] .result-dot.right {
  height: 16px; border-radius: 0; transform-origin: 50% 100%;
  clip-path: path("M6 0 C7.5 3 11.5 5.5 11.5 10 C11.5 13.5 9 16 6 16 C3 16 0.5 13.5 0.5 10 C0.5 7.5 2 6 3 4.5 C3.4 6 4 7 5 7.5 C5 4.5 5.6 2.5 6 0 Z");
  background: radial-gradient(ellipse at 50% 72%, var(--core) 0 18%, var(--flame) 52%, var(--edge) 100%);
  animation: fire-flicker calc(var(--flicker, 2.6s) * var(--slow, 1)) ease-in-out var(--offset, 0s) infinite;
}
.results .result-dot:nth-child(1) { --flicker: 2.5s; --offset: -0.4s; --n: 0; }
.results .result-dot:nth-child(2) { --flicker: 3.1s; --offset: -1.9s; --n: 1; }
.results .result-dot:nth-child(3) { --flicker: 2.3s; --offset: -1.1s; --n: 2; }
.results .result-dot:nth-child(4) { --flicker: 2.8s; --offset: -2.3s; --n: 3; }
.results .result-dot:nth-child(5) { --flicker: 3.3s; --offset: -0.2s; --n: 4; }
/* Embers smoulder: the same flicker, slower. */
.results.tier-1 { --slow: 1.5; }

/* Catching fire and going out (drawStreak in mogs.html). The dot shape is a
   circle drawn with the same commands as the flame, so the browser can morph
   one into the other; an inset green fill fades out as the flame appears
   (and back in as it goes out), so the colour changes with the shape.
   Igniting runs left to right, going out right to left. */
.results.igniting .result-dot.right {
  animation: fire-flicker calc(var(--flicker, 2.6s) * var(--slow, 1)) ease-in-out var(--offset, 0s) infinite,
             ignite 0.55s ease-out calc(var(--n) * 70ms) backwards;
}
.results.dousing .result-dot.right { animation: douse 0.5s ease-in calc((4 - var(--n)) * 60ms) forwards; }
@keyframes ignite {
  0% {
    clip-path: path("M6 4 C9.314 4 12 6.686 12 10 C12 13.314 9.314 16 6 16 C2.686 16 0 13.314 0 10 C0 8.947 0.278 7.912 0.804 7 C1.331 6.088 2.088 5.331 3 4.804 C3.912 4.278 4.947 4 6 4 Z");
    box-shadow: inset 0 0 0 8px var(--right); filter: brightness(1);
  }
  60% { filter: brightness(1.3); }
  100% {
    clip-path: path("M6 0 C7.5 3 11.5 5.5 11.5 10 C11.5 13.5 9 16 6 16 C3 16 0.5 13.5 0.5 10 C0.5 7.5 2 6 3 4.5 C3.4 6 4 7 5 7.5 C5 4.5 5.6 2.5 6 0 Z");
    box-shadow: inset 0 0 0 8px transparent; filter: brightness(1);
  }
}
@keyframes douse {
  0% {
    clip-path: path("M6 0 C7.5 3 11.5 5.5 11.5 10 C11.5 13.5 9 16 6 16 C3 16 0.5 13.5 0.5 10 C0.5 7.5 2 6 3 4.5 C3.4 6 4 7 5 7.5 C5 4.5 5.6 2.5 6 0 Z");
    box-shadow: inset 0 0 0 8px transparent; filter: brightness(1);
  }
  40% { filter: brightness(0.7); }
  100% {
    clip-path: path("M6 4 C9.314 4 12 6.686 12 10 C12 13.314 9.314 16 6 16 C2.686 16 0 13.314 0 10 C0 8.947 0.278 7.912 0.804 7 C1.331 6.088 2.088 5.331 3 4.804 C3.912 4.278 4.947 4 6 4 Z");
    box-shadow: inset 0 0 0 8px var(--right); filter: brightness(1);
  }
}
/* The flame brightens and dims a little and its tip licks up a hair, from
   its base. */
@keyframes fire-flicker {
  0%, 100% { filter: brightness(1); transform: scaleY(1); }
  17% { filter: brightness(1.05); transform: scaleY(1.04); }
  31% { filter: brightness(0.97); transform: scaleY(0.98); }
  52% { filter: brightness(1.03); transform: scaleY(1.02); }
  68% { filter: brightness(0.99); transform: scaleY(1); }
  83% { filter: brightness(1.06); transform: scaleY(1.05); }
}

/* Every 5th in a row from 10: a burst over the cards. */
.burst { position: absolute; inset: 0; display: grid; place-items: center; pointer-events: none; z-index: 5; }
.burst-text {
  margin: 0; font-size: clamp(1.8rem, 6vw, 3rem); font-weight: 900; letter-spacing: -0.01em;
  text-transform: uppercase; white-space: nowrap; color: #fff;
  -webkit-text-stroke: 6px #1f2937; paint-order: stroke fill;
  animation: burst-text 1.6s ease-out forwards;
}
.burst.tier-2 .burst-text { color: #facc15; }
.burst.tier-3 .burst-text { color: #fb923c; font-size: clamp(2rem, 7vw, 3.4rem); }
.burst.tier-4 .burst-text { color: #e879f9; font-size: clamp(2.2rem, 8vw, 3.9rem); }
@keyframes burst-text {
  0% { transform: scale(0.3) rotate(-6deg); opacity: 0; }
  18% { transform: scale(1.15) rotate(2deg); opacity: 1; }
  30% { transform: scale(1) rotate(0); }
  75% { opacity: 1; }
  100% { transform: scale(1.05) translateY(-20px); opacity: 0; }
}
.confetti {
  position: absolute; left: 50%; top: 50%; width: 9px; height: 14px; border-radius: 2px; opacity: 0;
  animation: confetti 1.5s ease-out forwards;
}
@keyframes confetti {
  0% { transform: translate(-50%, -50%) rotate(0); opacity: 1; }
  100% { transform: translate(calc(-50% + var(--dx)), calc(-50% + var(--dy))) rotate(var(--spin)); opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .rank.landed, .result-dot.pop { animation: none; }
  .heart.breaking, .heart.breaking * { animation: none !important; }
  .score-number.bump, .streak.bump, .results .result-dot { animation: none !important; }
}

/* ---------- The daily leaderboard ---------- */
.board { margin: 18px auto 0; max-width: 320px; text-align: left; }
.board h3 { margin-bottom: 10px; text-align: center; }
.name-form { display: grid; grid-template-columns: 1fr auto; gap: 6px 8px; align-items: center; margin-bottom: 12px; }
.name-form label { grid-column: 1 / -1; color: var(--muted); font-size: 0.85rem; }
.name-form .hint { grid-column: 1 / -1; }
.hint { color: var(--muted); font-size: 0.8rem; }
.board-list { list-style: none; margin: 0; padding: 0; }
.board-list li {
  display: grid; grid-template-columns: 2.5ch minmax(0, 1fr) auto; gap: 12px; padding: 4px 8px;
  border-radius: 6px; font-size: 0.9rem; font-variant-numeric: tabular-nums;
}
.board-list li.you { background: var(--accent-tint); box-shadow: inset 2px 0 0 var(--accent); font-weight: 600; }
.board-list li.gap { display: block; text-align: center; color: var(--muted); }
.board-rank { text-align: right; color: var(--muted); }
.board-name { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.over .board p { font-size: 0.85rem; font-weight: 400; margin: 0; }
.over .board p.countdown { margin-top: 12px; text-align: center; font-weight: 600; color: var(--accent); font-variant-numeric: tabular-nums; }

/* ---------- Choose Your Stat ---------- */
.choose-card { padding: 16px; }
.choose-form { display: flex; flex-direction: column; gap: 14px; }
.choose-row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; }
.field-label { min-width: 64px; color: var(--muted); font-size: 0.85rem; font-weight: 600; }
.choose-form .to { color: var(--muted); }
/* The stat and team pickers: categories fold, all closed to start. */
.stat-picker { position: relative; flex: 1 1 220px; min-width: 0; }
.stat-button {
  display: flex; justify-content: space-between; align-items: center; gap: 8px; width: 100%;
  padding: 7px 12px; font: inherit; font-size: 0.9rem; color: var(--text); text-align: left;
  background: var(--surface); border: 1px solid var(--line-strong); border-radius: var(--radius); cursor: pointer;
}
.stat-button:disabled { cursor: wait; }
.stat-menu {
  position: absolute; z-index: 10; top: calc(100% + 4px); left: 0; right: 0;
  max-height: min(60vh, 420px); overflow-y: auto; padding: 8px;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius);
  box-shadow: 0 10px 28px rgb(0 0 0 / 0.14);
}
#stat-search, #team-search { width: 100%; margin-bottom: 6px; }
.stat-group summary {
  display: flex; justify-content: space-between; align-items: center; gap: 8px;
  padding: 6px 8px; font-size: 0.9rem; font-weight: 600; border-radius: 6px; cursor: pointer; list-style: none;
}
.stat-group summary::-webkit-details-marker { display: none; }
.stat-group summary::before { content: "▸"; color: var(--muted); margin-right: 6px; }
.stat-group[open] summary::before { content: "▾"; }
.stat-group summary:hover { background: var(--hover); }
.stat-count { margin-left: auto; color: var(--muted); font-size: 0.75rem; font-weight: 500; }
.stat-group ul { list-style: none; margin: 0 0 4px; padding: 0 0 0 18px; }
.team-list { list-style: none; margin: 0; padding: 0; }
.stat-group li button, .team-list li button {
  width: 100%; padding: 5px 8px; font: inherit; font-size: 0.875rem; color: var(--text); text-align: left;
  background: none; border: 0; border-radius: 6px; cursor: pointer;
}
.stat-group li button:hover, .stat-group li button:focus-visible,
.team-list li button:hover, .team-list li button:focus-visible { background: var(--hover); outline: none; }
.stat-group li button[aria-current="true"],
.team-list li button[aria-current="true"] { color: var(--accent); font-weight: 600; }