/* 1000TRIES. Dark theme, 27-0 gold, club colours up front. */

:root {
  --gold: #f1c073;
  --gold-dark: #c9953a;
  --bg: #0a0a0f;
  --bg2: #0e0e1a;
  --card: #141420;
  --card2: #1c1c2e;
  --line: #24243a;
  --text: #f0f0f0;
  --muted: #a2a2b8;
  --dim: #7a7a92;
  --good: #4ade80;
  --bad: #f87171;
  --radius: 12px;
  --font: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font);
  font-size: 15px;
  line-height: 1.5;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  overflow-x: hidden;
}
main { flex: 1; }
img { max-width: 100%; }
a { color: var(--gold); }
button { font-family: inherit; }
button, a, [data-pick], [data-slot] { -webkit-tap-highlight-color: transparent; }
[hidden] { display: none !important; }
body.is-locked { overflow: hidden; }
:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }

.wrap { max-width: 640px; margin: 0 auto; padding: 16px; }
.wrap-wide { max-width: 1100px; }

/* Header */

.site-header {
  position: sticky; top: 0; z-index: 50;
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 10px 16px;
  background: rgba(10, 10, 15, 0.92);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border-bottom: 2px solid var(--gold);
}
.brand { display: flex; align-items: center; text-decoration: none; min-height: 36px; min-width: 40px; }
.brand-logo { height: 38px; width: auto; max-width: 100%; display: block; object-fit: contain; object-position: left center; } /* shrinks evenly, never squashed */
/* Signed in on a phone (11 Oct 2026, the owner: "they just want to play"): the 1000TRIES logo top left instead of cast, and
   no big logo or pitch, so the banner and the modes come first. Guests, iPads and desktop keep both. html.ca-in: index.html
   sets it before the page draws, js/cast-account.js keeps it right */
.brand .brand-game { display: none; height: 40px; width: auto; max-width: 100%; object-fit: contain; object-position: left center; }
@media (max-width: 767px) {
  .ca-in .brand .brand-logo, .ca-in .brand .brand-fallback { display: none; }
  .ca-in .brand .brand-game { display: block; }
  .ca-in #screen-home .hero { display: none; }
  .ca-in #screen-home .ca-home-spot { margin-top: 14px; } /* the same gap under the top bar as 27-0 */
}
@media (max-width: 380px) { .ca-in .brand .brand-game { height: 36px; } }
.brand-fallback { font-weight: 900; font-size: 13px; letter-spacing: 2px; color: var(--gold); }
.header-nav { display: flex; align-items: center; gap: 14px; }
.header-nav a { font-size: 13px; font-weight: 700; text-decoration: none; color: var(--muted); }
.header-nav .nav-rules {
  display: inline-flex; align-items: center; gap: 6px; min-height: 38px; padding: 7px 12px; border-radius: 10px;
  border: 1.5px solid rgba(241, 192, 115, .55); color: var(--gold); background: rgba(241, 192, 115, .08);
  font-size: 11px; font-weight: 900; letter-spacing: .6px; text-transform: uppercase; white-space: nowrap;
}
@media (hover: hover) { .header-nav .nav-rules:hover { border-color: var(--gold); background: rgba(241, 192, 115, .16); color: var(--gold); } }
/* Stats and Leaderboards look like every other top bar button (.ca-nav-tab in cast-account.css: icon over a label) */
.header-nav .nav-lb[hidden] { display: none; }
body[data-screen="draft"] .header-nav .nav-lb { display: none; }
@media (hover: hover) { .header-nav a:hover { color: var(--gold); } }
body[data-screen="draft"] .header-nav a { display: none; }
.header-nav .btn-again { display: none; }
.btn-again .lbl-short { display: none; }
@media (max-width: 480px) {
  .header-nav { gap: 6px; }
  .header-nav .btn-again { min-height: 40px; padding: 8px 10px; font-size: 11px; letter-spacing: .3px; }
  .header-nav .icon-btn { width: 40px; height: 40px; }
  .btn-again .lbl-long { display: none; }
  .header-nav .nav-rules { min-height: 40px; padding: 8px 10px; font-size: 10.5px; }
  .btn-again .lbl-short { display: inline; }
  .brand-logo { height: 32px; }
  body[data-screen="draft"] .btn-again > span[aria-hidden] { display: none; } /* room for the logo mid-draft */
}
body[data-screen="draft"] .header-nav .btn-again { display: inline-flex; }
.icon-btn {
  display: inline-flex; align-items: center; justify-content: center;
  width: 38px; height: 38px; border-radius: 50%;
  background: var(--card); border: 1px solid var(--line); color: var(--muted); cursor: pointer;
}
@media (hover: hover) { .icon-btn:hover { color: var(--gold); border-color: var(--gold); } }
.icon-btn .ico-on { display: none; }
.icon-btn.is-on { color: var(--gold); }
.icon-btn.is-on .ico-on { display: block; }
.icon-btn.is-on .ico-off { display: none; }

/* Screens */

.screen { display: none; }
.screen.is-active { display: block; animation: fadeUp .25s ease both; }
@keyframes fadeUp { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

/* Buttons */

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 48px; padding: 12px 22px;
  border-radius: var(--radius); border: 2px solid transparent;
  font-size: 15px; font-weight: 800; letter-spacing: .5px; text-transform: uppercase;
  cursor: pointer; text-decoration: none; transition: transform .12s, background .15s, border-color .15s, color .15s;
}
.btn:active { transform: scale(.98); }
.btn-primary { background: var(--gold); color: #111; }
@media (hover: hover) { .btn-primary:hover { background: var(--gold-dark); } }
.btn-primary:disabled { background: #3a3424; color: #8b7d5a; cursor: wait; }
.btn-ghost { background: transparent; border-color: var(--gold); color: var(--gold); }
@media (hover: hover) { .btn-ghost:hover { background: var(--gold); color: #111; } }
.btn-block { width: 100%; }
.btn-sm { min-height: 36px; padding: 6px 14px; font-size: 12px; }
.btn-row { display: flex; gap: 10px; margin: 16px 0 10px; }
.btn-row .btn { flex: 1; }
/* Stand-alone links are small buttons, never underlined text */
.text-link {
  display: flex; width: max-content; max-width: 100%; align-items: center; justify-content: center; min-height: 36px; margin: 10px auto 0; padding: 8px 16px; box-sizing: border-box;
  border-radius: 999px; border: 1px solid rgba(255, 255, 255, .18); background: rgba(255, 255, 255, .06);
  color: #fff; font-size: 13px; font-weight: 800; text-decoration: none; cursor: pointer;
}
@media (hover: hover) { .text-link:hover { border-color: rgba(255, 255, 255, .45); } }
.center { text-align: center; }

/* Home */

.hero { text-align: center; padding: 18px 0 8px; }
.hero-eyebrow { font-size: 11px; font-weight: 800; letter-spacing: 3px; text-transform: uppercase; color: var(--gold); opacity: .85; }
.hero-title { margin: 8px 0 10px; line-height: 1; }
.hero-logo { display: block; margin: 0 auto; width: 100%; max-width: 300px; height: auto; } /* same size as the 27-0 logo */
.cast-logo-fx { --logo-fx-img: url(../assets/logos/1000tries.png); } /* the glint's shape (cast-account.css) */
.hero-wordmark { display: inline-flex; align-items: baseline; gap: 2px; font-weight: 900; letter-spacing: -1px; }
.wm-num { font-size: clamp(64px, 20vw, 104px); color: var(--gold); text-shadow: 0 0 40px rgba(241, 192, 115, .35); }
.wm-word { font-size: clamp(30px, 9vw, 48px); color: #fff; }
.hero-pitch { color: #c8c8d8; font-size: 16px; line-height: 1.55; max-width: 520px; margin: 0 auto 14px; } /* room above the first box (30 Sep 2026) */
.hero-pitch strong { color: var(--gold); font-weight: 900; }
/* Links inside a sentence: a soft gold tag instead of underlined text */
.hero-pitch a, .faq-item p a, .doc p a, .doc li a { padding: 1px 6px; border-radius: 6px; background: rgba(241, 192, 115, .12); color: var(--gold); font-weight: 800; text-decoration: none; -webkit-box-decoration-break: clone; box-decoration-break: clone; }
@media (hover: hover) { .hero-pitch a:hover, .faq-item p a:hover, .doc p a:hover, .doc li a:hover { background: rgba(241, 192, 115, .24); color: #fff; } }

/* Choose Your Mode: a tap on a card starts that mode (no separate Play button) */
.mode-kicker { margin: 20px 2px 14px; font: 900 11px/1 'Inter', sans-serif; letter-spacing: 1.6px; text-transform: uppercase; color: var(--muted); text-align: left; }
.mode-picker { display: grid; gap: 10px; margin: 22px 0 16px; }
.mode-kicker + .mode-picker { margin-top: 0; }
/* Play on the right of each card; the chips fill their row evenly */
.mode-go { grid-area: go; align-self: center; margin-left: 8px; font-size: 11px; font-weight: 900; letter-spacing: .6px; text-transform: uppercase; padding: 6px 11px; border-radius: 999px; background: rgba(255, 255, 255, .1); color: #fff; white-space: nowrap; }
#startBtn[hidden] { display: none; }
.mode-card {
  position: relative; display: grid; grid-template-columns: auto 1fr; grid-template-areas: "ico name" "ico line" "chips chips";
  column-gap: 12px; row-gap: 2px; align-items: center; text-align: left; width: 100%;
  padding: 14px 16px; border-radius: 14px;
  background: var(--card); border: 2px solid var(--line); color: var(--text); cursor: pointer;
  transition: border-color .15s, background .15s, transform .12s;
}
@media (hover: hover) { .mode-card:hover { border-color: #4a4a66; } }
.mode-card:active { transform: scale(.99); }
.mode-card.is-on { border-color: var(--gold); background: linear-gradient(135deg, rgba(241, 192, 115, .18), rgba(241, 192, 115, .04)); box-shadow: 0 0 0 1px var(--gold), 0 8px 24px rgba(241, 192, 115, .12); }
.mode-ico { grid-area: ico; font-size: 30px; line-height: 1; }
.mode-name { grid-area: name; font-size: 24px; font-weight: 900; line-height: 1.05; letter-spacing: -.3px; }
.mode-card.is-on .mode-name { color: var(--gold); }
.mode-line { grid-area: line; font-size: 14px; font-weight: 700; color: #d6d6e4; }
.mode-chips { grid-area: chips; display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.mode-chip { font-size: 11px; font-weight: 800; letter-spacing: .3px; padding: 3px 8px; border-radius: 6px; background: #22223a; color: #b8b8cc; flex: 1 1 auto; text-align: center; white-space: nowrap; }
.mode-card { grid-template-columns: auto 1fr auto; grid-template-areas: "ico name go" "ico line go" "chips chips chips"; }
.mode-card.is-on .mode-chip { background: rgba(241, 192, 115, .16); color: var(--gold); }
.mode-tag { position: absolute; top: -9px; right: 12px; font-size: 11px; font-weight: 900; letter-spacing: 1px; text-transform: uppercase; padding: 2px 8px; border-radius: 5px; background: var(--gold); color: #111; }

/* Team Spin: purple */
.mode-card.is-spin { border-color: #3b2f6b; background: linear-gradient(135deg, rgba(124, 92, 255, .18), rgba(124, 92, 255, .03) 70%), var(--card); }
@media (hover: hover) { .mode-card.is-spin:hover { border-color: #7c5cff; } }
.mode-card.is-spin .mode-name { color: #c4b5fd; }
.mode-card.is-spin .mode-chip { background: rgba(124, 92, 255, .18); color: #c4b5fd; }
.mode-card.is-spin.is-on { border-color: #8b5cf6; background: linear-gradient(135deg, rgba(124, 92, 255, .32), rgba(124, 92, 255, .07) 70%), var(--card); box-shadow: 0 0 0 1px #8b5cf6, 0 8px 28px rgba(124, 92, 255, .28); }
.mode-card.is-spin.is-on .mode-name { color: #fff; }
.mode-tag-spin { background: #7c3aed; color: #fff; }

/* NRLW: teal */
.mode-card.is-nrlw { border-color: #134e4a; background: linear-gradient(135deg, rgba(20, 184, 166, .18), rgba(20, 184, 166, .03) 70%), var(--card); }
.mode-card.is-nrlw .mode-name { color: #5eead4; }
.mode-card.is-nrlw .mode-chip { background: rgba(20, 184, 166, .16); color: #5eead4; }
.mode-card.is-nrlw.is-on { border-color: #14b8a6; background: linear-gradient(135deg, rgba(20, 184, 166, .3), rgba(20, 184, 166, .07) 70%), var(--card); box-shadow: 0 0 0 1px #14b8a6, 0 8px 28px rgba(20, 184, 166, .25); }
.mode-card.is-nrlw.is-on .mode-name { color: #fff; }
.mode-tag-nrlw { background: #0d9488; color: #fff; }

/* Exactly 1000: hard mode */
.mode-card.is-hard { border-color: #5a1f26; background: linear-gradient(135deg, rgba(220, 38, 38, .16), rgba(220, 38, 38, .03) 70%), var(--card); }
@media (hover: hover) { .mode-card.is-hard:hover { border-color: #b91c1c; } }
.mode-card.is-hard .mode-name { color: #fca5a5; }
.mode-card.is-hard .mode-chip { background: rgba(220, 38, 38, .16); color: #fca5a5; }
.mode-card.is-hard.is-on { border-color: #ef4444; background: linear-gradient(135deg, rgba(220, 38, 38, .28), rgba(220, 38, 38, .06) 70%), var(--card); box-shadow: 0 0 0 1px #ef4444, 0 8px 28px rgba(220, 38, 38, .25); }
.mode-card.is-hard.is-on .mode-name { color: #fff; }
.mode-tag-hard { background: #dc2626; color: #fff; box-shadow: 0 0 12px rgba(220, 38, 38, .55); animation: hardPulse 1.8s ease-in-out infinite; }
@keyframes hardPulse { 0%, 100% { box-shadow: 0 0 8px rgba(220, 38, 38, .45); } 50% { box-shadow: 0 0 18px rgba(239, 68, 68, .8); } }
.mode-diff { display: inline-flex; align-items: center; gap: 6px; margin-left: 2px; }
.md-lbl { font-size: 10px; font-weight: 800; letter-spacing: 1px; text-transform: uppercase; color: #9a9ab0; }
.md-bar { display: inline-flex; gap: 3px; }
.md-bar i { width: 14px; height: 6px; border-radius: 2px; background: linear-gradient(90deg, #f59e0b, #dc2626); }
.md-bar i:nth-child(1) { background: #f59e0b; } .md-bar i:nth-child(2) { background: #f97316; } .md-bar i:nth-child(3) { background: #ef4444; } .md-bar i:nth-child(4) { background: #dc2626; } .md-bar i:nth-child(5) { background: #b91c1c; }
.md-txt { font-size: 11px; font-weight: 900; color: #f87171; text-transform: uppercase; letter-spacing: .5px; }

.pack-note { font-size: 12px; color: var(--dim); text-align: center; margin: 10px 0 0; }
.pack-note:empty { display: none; }

.promo-card {
  position: relative; display: grid; grid-template-columns: auto 1fr; column-gap: 14px; row-gap: 2px; align-items: center;
  margin: 22px 0 0; padding: 14px 48px 14px 14px;
  border-radius: var(--radius); text-decoration: none; color: var(--text);
  background: linear-gradient(135deg, #1b1633, #120f22); border: 1px solid #3b2f6b;
}
@media (hover: hover) { .promo-card:hover { border-color: var(--gold); } }
.promo-logo { grid-row: 1 / span 3; width: 108px; height: auto; display: block; }
.promo-card > span:not(.promo-arrow) { grid-column: 2; }
.promo-kicker { font-size: 11px; font-weight: 800; letter-spacing: 2px; text-transform: uppercase; color: #a99be0; }
.promo-title { font-size: 17px; font-weight: 900; color: #fff; }
.promo-sub { font-size: 13px; color: #b8b8cc; }
.promo-arrow { position: absolute; right: 16px; top: 50%; transform: translateY(-50%); font-size: 22px; color: var(--gold); }

/* FAQ (same look as 27-0) */

.faq { margin: 26px 0 0; }
.faq-title { font-size: 20px; font-weight: 900; margin: 0 0 10px; }
.faq-item { margin-bottom: 8px; border-radius: 12px; background: var(--card); border: 1px solid var(--line); overflow: hidden; }
.faq-item summary { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 16px; cursor: pointer; list-style: none;
  font-size: 15px; font-weight: 800; color: #fff; line-height: 1.4; }
.faq-item summary::-webkit-details-marker { display: none; }
.faq-ico { flex-shrink: 0; font-size: 22px; font-weight: 400; line-height: 1; color: var(--gold); transition: transform .25s, color .25s; }
.faq-item[open] .faq-ico { transform: rotate(45deg); color: #fff; }
.faq-item p { margin: 0; padding: 0 16px 14px; font-size: 14px; line-height: 1.6; color: #b8b8cc; }
/* The whole FAQ folds away under its heading */
.faq-fold > summary { display: flex; align-items: center; gap: 12px; padding: 14px 16px; border-radius: 14px; cursor: pointer; list-style: none; background: var(--card); border: 1px solid var(--line); }
.faq-fold > summary::-webkit-details-marker { display: none; }
.faq-fold > summary .faq-title { flex: 1 1 auto; margin: 0; }
.faq-fold[open] > summary { margin-bottom: 10px; }
.faq-fold[open] > summary .faq-ico { transform: rotate(45deg); color: #fff; }
@media (hover: hover) { .faq-fold > summary:hover { border-color: rgba(241, 192, 115, .5); } }

/* Latest videos */

.watch { margin: 26px 0 0; }
.watch-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.watch-title { font-size: 20px; font-weight: 900; margin: 0; }
.watch-all { display: inline-flex; align-items: center; justify-content: center; min-height: 30px; padding: 5px 12px; box-sizing: border-box; border-radius: 999px; border: 1px solid rgba(255, 255, 255, .16); background: rgba(255, 255, 255, .06); color: #fff; font-size: 12.5px; font-weight: 800; text-decoration: none; white-space: nowrap; }
@media (hover: hover) { .watch-all:hover { border-color: rgba(255, 255, 255, .45); } }
.watch-sub { font-size: 13px; color: var(--muted); margin: 4px 0 12px; }
.watch-track {
  display: grid; grid-auto-flow: column; grid-auto-columns: 78%; gap: 12px;
  overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: 6px;
  margin: 0 -16px; padding-left: 16px; padding-right: 16px; scroll-padding: 16px;
  scrollbar-width: none;
}
.watch-track::-webkit-scrollbar { display: none; }
/* Wider screens keep the same side-scrolling row as 27-0, two big cards and a peek of the next */
@media (min-width: 600px) { .watch-track { grid-auto-columns: 46%; } }
.vcard {
  display: flex; flex-direction: column; scroll-snap-align: start; overflow: hidden;
  border-radius: 14px; background: var(--card); border: 1px solid var(--line); color: var(--text); text-decoration: none;
  transition: transform .15s, border-color .15s;
}
@media (hover: hover) { .vcard:hover { transform: translateY(-2px); border-color: var(--gold); } }
.vthumb { position: relative; display: block; aspect-ratio: 16 / 9; background: #000; overflow: hidden; }
.vthumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.vplay {
  position: absolute; left: 50%; top: 50%; width: 46px; height: 32px; transform: translate(-50%, -50%);
  border-radius: 9px; background: rgba(255, 0, 0, .9); opacity: 0; transition: opacity .15s;
}
.vplay::after { content: ""; position: absolute; left: 19px; top: 9px; border-left: 12px solid #fff; border-top: 7px solid transparent; border-bottom: 7px solid transparent; }
@media (hover: hover) { .vcard:hover .vplay { opacity: 1; } }
.vbody { display: grid; gap: 6px; padding: 12px 14px 14px; }
.vtitle { font-size: 14px; font-weight: 800; line-height: 1.35; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.vdate { font-size: 12px; color: var(--muted); font-weight: 600; }

.acast-embed { margin: 18px 0 8px; border-radius: var(--radius); overflow: hidden; border: 1px solid var(--line); }
.acast-embed iframe { display: block; border: 0; }

/* Draft: scoreboard */

.scoreboard {
  position: sticky; top: 58px; z-index: 40;
  background: rgba(14, 14, 26, .96);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--line);
}
.sb-inner {
  max-width: 1100px; margin: 0 auto; padding: 10px 16px 12px;
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 8px;
}
.sb-left { display: grid; line-height: 1.25; }
.sb-mode { font-size: 12px; font-weight: 900; color: var(--gold); text-transform: uppercase; letter-spacing: 1px; }
.sb-picks { font-size: 12px; color: var(--muted); font-weight: 600; }
.sb-center { display: flex; align-items: baseline; gap: 6px; justify-content: center; }
.sb-total { font-size: clamp(30px, 9vw, 42px); font-weight: 900; line-height: 1; font-variant-numeric: tabular-nums; color: #fff; }
.sb-of { font-size: 14px; font-weight: 700; color: var(--muted); }
.sb-right { text-align: right; }
.btn-again {
  display: inline-flex; align-items: center; gap: 5px; min-height: 38px; padding: 7px 12px; border-radius: 10px;
  background: transparent; border: 1.5px solid rgba(241, 192, 115, .55); color: var(--gold);
  font-size: 11px; font-weight: 900; letter-spacing: .6px; text-transform: uppercase; cursor: pointer; white-space: nowrap;
}
@media (hover: hover) { .btn-again:hover { border-color: var(--gold); background: rgba(241, 192, 115, .1); } }
.sb-help { font-size: 13px; font-weight: 800; color: #d8d8e8; }
.sb-help.is-good { color: var(--good); }
.sb-help.is-bad { color: var(--bad); }
@property --bar { syntax: '<color>'; inherits: true; initial-value: #8a7650; }
.sb-bar { position: relative; grid-column: 1 / -1; height: 12px; border-radius: 8px; background: #1d1d33; box-shadow: inset 0 1px 3px rgba(0, 0, 0, .6); }
.sb-fill {
  --bar: #8a7650; --glow: rgba(138, 118, 80, .3);
  position: relative; height: 100%; width: 0; border-radius: 8px; overflow: hidden;
  background: linear-gradient(90deg, color-mix(in srgb, var(--bar) 55%, #000), var(--bar));
  box-shadow: 0 0 12px var(--glow);
  transition: width 1.1s cubic-bezier(.22, 1.2, .36, 1), --bar .8s, box-shadow .8s, background .8s;
}
/* moving sheen so the bar feels alive */
.sb-fill::after {
  content: ""; position: absolute; inset: 0;
  background: repeating-linear-gradient(115deg, rgba(255, 255, 255, 0) 0 14px, rgba(255, 255, 255, .16) 14px 22px);
  background-size: 200% 100%; animation: sbSheen 1.6s linear infinite;
}
@keyframes sbSheen { from { background-position: 0 0; } to { background-position: -60px 0; } }
.sb-bar.is-pulse .sb-fill { animation: sbPulse .9s ease .35s; }
@keyframes sbPulse { 0% { filter: brightness(1); } 35% { filter: brightness(1.6); box-shadow: 0 0 22px var(--glow), 0 0 4px #fff; } 100% { filter: brightness(1); } }
.sb-bar.is-levelup { animation: sbShake .5s ease .8s; }
@keyframes sbShake { 0%, 100% { transform: none; } 25% { transform: scaleY(1.5); } 60% { transform: scaleY(.9); } }
.sb-bar[data-stage="hot"] .sb-fill::after { animation-duration: .7s; }
.sb-bar[data-stage="hit"] .sb-fill { box-shadow: 0 0 18px var(--glow); }
.sb-gain {
  position: absolute; top: -4px; transform: translate(-50%, 0); pointer-events: none;
  font-size: 12px; font-weight: 900; color: #fff; white-space: nowrap;
  text-shadow: 0 1px 4px rgba(0, 0, 0, .8); opacity: 0;
}
.sb-gain.is-on { animation: sbGain 1.5s ease-out .3s both; }
@keyframes sbGain { 0% { opacity: 0; transform: translate(-50%, 6px) scale(.7); } 20% { opacity: 1; transform: translate(-50%, -14px) scale(1.15); } 70% { opacity: 1; transform: translate(-50%, -20px) scale(1); } 100% { opacity: 0; transform: translate(-50%, -28px); } }

/* Draft: layout */

.draft-grid { display: grid; gap: 16px; }
.panel {
  background: var(--card); border: 1px solid var(--line); border-radius: 16px; padding: 14px;
}
.panel-head { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; margin-bottom: 10px; }
.panel-title { font-size: 13px; font-weight: 900; text-transform: uppercase; letter-spacing: 1.5px; color: var(--gold); }
.panel-meta { font-size: 12px; color: var(--muted); font-weight: 600; }

/* Pitch */

.pitch {
  display: grid; gap: 8px; padding: 12px 8px;
  border-radius: 12px;
  background:
    repeating-linear-gradient(180deg, rgba(255, 255, 255, .025) 0 36px, transparent 36px 72px),
    linear-gradient(180deg, #0f2a17, #0b1f12);
  border: 1px solid #1d3b25;
}
.pitch-row { display: flex; justify-content: center; gap: 6px; }
.slot {
  position: relative; flex: 0 1 84px; min-width: 0; min-height: 70px;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  border-radius: 10px; padding: 6px 4px; text-align: center; font: inherit; color: inherit;
}
.slot.is-empty { border: 2px dashed rgba(255, 255, 255, .32); background: rgba(0, 0, 0, .25); }
.slot.is-empty .slot-code { font-size: 16px; font-weight: 900; color: rgba(255, 255, 255, .8); }
.slot.is-empty .slot-pos { font-size: 10px; color: rgba(255, 255, 255, .6); font-weight: 600; }
.slot.is-filled {
  background: var(--club); color: var(--club-text);
  border: 2px solid var(--club-accent);
  box-shadow: inset 0 4px 0 var(--club-accent), 0 4px 12px rgba(0, 0, 0, .35);
}
.slot.is-filled .slot-code { position: absolute; top: 5px; left: 6px; font-size: 9px; font-weight: 900; opacity: .75; }
.slot-abbr { position: absolute; top: 5px; right: 6px; font-size: 9px; font-weight: 900; color: var(--club-accent); }
.slot-name { font-size: 12px; font-weight: 900; line-height: 1.1; margin-top: 10px; max-width: 100%; overflow: hidden; text-overflow: clip; white-space: nowrap; }
.slot-tries { font-size: 18px; font-weight: 900; line-height: 1.1; font-variant-numeric: tabular-nums; }
.slot.is-flash { animation: flash 1s ease; }
@keyframes flash { 0% { transform: scale(.6); opacity: 0; } 40% { transform: scale(1.1); opacity: 1; } 100% { transform: scale(1); } }
.slot.is-tweakable { cursor: pointer; animation: wiggle 1.2s ease-in-out infinite; }
@media (hover: hover) { .slot.is-tweakable:hover { outline: 3px solid var(--bad); } }
@keyframes wiggle { 0%, 100% { transform: rotate(0); } 25% { transform: rotate(-1.5deg); } 75% { transform: rotate(1.5deg); } }

/* Wildcard colours: Roll Again teal, Reveal Try Stats amber, Tweak pink */
.wc.wc-reroll { border-color: #0f766e; background: linear-gradient(160deg, rgba(20, 184, 166, .22), rgba(20, 184, 166, .06)); }
.wc.wc-reroll .wc-left { color: #5eead4; }
.wc.wc-scout { border-color: #b45309; background: linear-gradient(160deg, rgba(245, 158, 11, .22), rgba(245, 158, 11, .06)); }
.wc.wc-scout .wc-left { color: #fcd34d; }
.wc.wc-tweak { border-color: #be185d; background: linear-gradient(160deg, rgba(236, 72, 153, .22), rgba(236, 72, 153, .06)); }
.wc.wc-tweak .wc-left { color: #f9a8d4; }
@media (hover: hover) { .wc.wc-reroll:hover:not(:disabled) { border-color: #2dd4bf; } .wc.wc-scout:hover:not(:disabled) { border-color: #fbbf24; } .wc.wc-tweak:hover:not(:disabled) { border-color: #f472b6; } }
.wc.wc-tweak.is-armed { border-color: var(--bad); background: #2a1116; }
.wc-ico { font-size: 13px; }

/* Wildcards feel charged while unused: a slow glow and a light sweep, staggered across the three */
.wc { position: relative; overflow: hidden; --wc: #f1c073; --wc-rgb: 241, 192, 115; }
.wc.wc-reroll { --wc: #2dd4bf; --wc-rgb: 45, 212, 191; }
.wc.wc-scout  { --wc: #fbbf24; --wc-rgb: 251, 191, 36; }
.wc.wc-tweak  { --wc: #f472b6; --wc-rgb: 244, 114, 182; }
.wc:not(:disabled):not(.is-spent):not(.is-armed) { animation: wcCharge 2.6s ease-in-out infinite; }
.wc:not(:disabled):not(.is-spent):not(.is-armed)::after {
  content: ""; position: absolute; top: 0; bottom: 0; left: -60%; width: 45%; pointer-events: none;
  background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .28), transparent);
  transform: skewX(-18deg); animation: wcSweep 4.2s ease-in-out infinite;
}
.wildcards .wc:nth-child(2) { animation-delay: .4s; } .wildcards .wc:nth-child(2)::after { animation-delay: 1.2s; }
.wildcards .wc:nth-child(3) { animation-delay: .8s; } .wildcards .wc:nth-child(3)::after { animation-delay: 2.4s; }
@keyframes wcCharge { 0%, 100% { box-shadow: 0 0 0 0 rgba(var(--wc-rgb), 0); } 50% { box-shadow: 0 0 14px rgba(var(--wc-rgb), .45), inset 0 0 10px rgba(var(--wc-rgb), .15); } }
@keyframes wcSweep { 0%, 55% { left: -60%; } 85%, 100% { left: 130%; } }
.wc .wc-ico { display: inline-block; }
@media (hover: hover) { .wc:hover:not(:disabled) .wc-ico { animation: wcWobble .5s ease; } }
.wc:active:not(:disabled) { transform: scale(.94); }
@keyframes wcWobble { 0%, 100% { transform: none; } 30% { transform: rotate(-14deg) scale(1.2); } 65% { transform: rotate(10deg) scale(1.1); } }
.wc.is-armed { animation: wcArmed .9s ease-in-out infinite; }
@keyframes wcArmed { 0%, 100% { box-shadow: 0 0 0 0 rgba(248, 113, 113, .0); } 50% { box-shadow: 0 0 0 3px rgba(248, 113, 113, .35), 0 0 16px rgba(248, 113, 113, .5); } }

/* The button that was just spent pops, flashes, then fades to Used */
.wc.just-used { animation: wcSpent .9s ease both; }
@keyframes wcSpent {
  0% { opacity: 1; transform: scale(1); box-shadow: 0 0 0 0 rgba(var(--wc-rgb), .8); filter: brightness(1.8); }
  30% { opacity: 1; transform: scale(1.08); box-shadow: 0 0 0 8px rgba(var(--wc-rgb), 0), 0 0 26px rgba(var(--wc-rgb), .8); }
  100% { opacity: .3; transform: none; box-shadow: none; filter: none; }
}

/* Burst: big card over the screen when a wildcard fires */
.wc-burst { position: fixed; inset: 0; z-index: 120; display: flex; align-items: center; justify-content: center; pointer-events: none; --wc: #f1c073; --wc-rgb: 241, 192, 115; }
.wc-burst-reroll { --wc: #2dd4bf; --wc-rgb: 45, 212, 191; }
.wc-burst-scout  { --wc: #fbbf24; --wc-rgb: 251, 191, 36; }
.wc-burst-tweak  { --wc: #f472b6; --wc-rgb: 244, 114, 182; }
.wc-burst::before { content: ""; position: absolute; inset: 0; background: radial-gradient(circle at 50% 50%, rgba(var(--wc-rgb), .28), rgba(7, 7, 11, .35) 55%, transparent 80%); animation: wcbFade 1.3s ease both; }
.wcb-ring { position: absolute; width: 140px; height: 140px; border-radius: 50%; border: 4px solid var(--wc); opacity: 0; animation: wcbRing 1s cubic-bezier(.2, .7, .3, 1) both; }
.wcb-ring2 { animation-delay: .15s; border-width: 2px; }
.wcb-card {
  position: relative; display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 18px 28px 16px; border-radius: 20px;
  background: linear-gradient(160deg, #1d1a36, #0f0d1d); border: 2px solid var(--wc);
  box-shadow: 0 0 0 4px rgba(var(--wc-rgb), .18), 0 0 40px rgba(var(--wc-rgb), .55), 0 20px 50px rgba(0, 0, 0, .6);
  animation: wcbCard 1.3s cubic-bezier(.2, .9, .3, 1.2) both; max-width: calc(100vw - 48px); text-align: center;
}
.wcb-ico { font-size: 46px; line-height: 1; animation: wcbIco 1.3s ease both; }
.wc-burst-reroll .wcb-ico { animation-name: wcbSpin; }
.wcb-title { font: 900 26px/1.1 Inter, system-ui, sans-serif; letter-spacing: -.3px; color: #fff; text-transform: uppercase; font-style: italic; }
.wcb-sub { font: 700 13px/1.3 Inter, system-ui, sans-serif; color: var(--wc); }
.wcb-sub:empty { display: none; }
@keyframes wcbFade { 0% { opacity: 0; } 15%, 70% { opacity: 1; } 100% { opacity: 0; } }
@keyframes wcbRing { 0% { opacity: .9; transform: scale(.3); } 100% { opacity: 0; transform: scale(3.2); } }
@keyframes wcbCard { 0% { opacity: 0; transform: scale(.4) rotate(-6deg); } 22% { opacity: 1; transform: scale(1.08) rotate(1deg); } 34%, 75% { opacity: 1; transform: scale(1); } 100% { opacity: 0; transform: scale(.92) translateY(-14px); } }
@keyframes wcbIco { 0% { transform: scale(.2); } 30% { transform: scale(1.35); } 45%, 100% { transform: scale(1); } }
@keyframes wcbSpin { 0% { transform: scale(.2) rotate(-180deg); } 35% { transform: scale(1.3) rotate(200deg); } 55%, 100% { transform: scale(1) rotate(360deg); } }

/* Reroll payoff: the new offer flips in card by card */
.offer-cards.is-rerolled .pcard { animation: rerollIn .55s cubic-bezier(.2, .8, .3, 1.15) both; }
@keyframes rerollIn { 0% { opacity: 0; transform: perspective(700px) rotateX(-75deg) translateY(-14px); } 60% { opacity: 1; transform: perspective(700px) rotateX(10deg); } 100% { transform: none; } }

/* Reveal Tries payoff: each number pops with a gold flash while it counts up */
.tries-badge.is-popping { display: inline-block; animation: triesPop .7s ease both; }
.tries-badge.is-popping strong { color: var(--gold); text-shadow: 0 0 12px rgba(241, 192, 115, .8); }
@keyframes triesPop { 0% { transform: scale(.5); opacity: 0; } 45% { transform: scale(1.35); opacity: 1; } 100% { transform: scale(1); } }


/* Team Spin: choose a position first */
.pp-intro { font-size: 13px; color: #c0c0d0; margin: 0 0 10px; }
.pp-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.pp-btn {
  position: relative; display: grid; justify-items: center; gap: 1px; padding: 12px 6px; min-height: 64px; border-radius: 12px; cursor: pointer;
  background: linear-gradient(160deg, rgba(124, 92, 255, .22), rgba(124, 92, 255, .06)); border: 1.5px solid #6d4fd8; color: #fff;
}
.pp-code { font-size: 22px; font-weight: 900; line-height: 1; }
.pp-name { font-size: 11px; font-weight: 700; color: #c4b5fd; }
.pp-count { position: absolute; top: -8px; right: -4px; font-size: 9px; font-weight: 900; padding: 2px 6px; border-radius: 999px; background: #8b5cf6; color: #fff; text-transform: uppercase; }
@media (hover: hover) { .pp-btn:hover { border-color: #a78bfa; background: rgba(124, 92, 255, .3); } }
.pp-hint { font-size: 12px; color: var(--muted); text-align: center; margin: 10px 0 0; }
.slot.is-choose { cursor: pointer; border-color: rgba(167, 139, 250, .8); background: rgba(124, 92, 255, .16); }
.slot.is-choose .slot-code { color: #c4b5fd; }
.slot.is-chosen { border: 2px solid #a78bfa; background: rgba(124, 92, 255, .3); box-shadow: 0 0 16px rgba(139, 92, 246, .55); }

/* Remove Player mode */
.remove-mode {
  display: grid; justify-items: center; gap: 4px; text-align: center; padding: 18px 12px 12px; border-radius: 14px;
  background: linear-gradient(180deg, rgba(236, 72, 153, .14), rgba(236, 72, 153, .03)); border: 1.5px dashed #be185d;
}
.rm-ico { font-size: 30px; line-height: 1; }
.rm-title { margin: 6px 0 0; font-size: 17px; font-weight: 900; color: #fff; }
.rm-sub { margin: 0 0 4px; font-size: 13px; color: #d6c3d0; max-width: 320px; }
.rm-arrow { font-size: 26px; color: #f472b6; animation: moreBob 1.2s ease-in-out infinite; margin-bottom: 6px; }
.remove-mode .btn { max-width: 260px; min-height: 42px; }
.pitch.is-tweaking { outline: 2px dashed #ec4899; outline-offset: 4px; }

.share-opts { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin: 10px 0 6px; align-items: end; }
.share-opt { display: flex; flex-direction: column; align-items: center; gap: 8px; min-width: 0; }
.share-opt-img { display: block; width: 100%; max-width: 170px; border-radius: 10px; border: 1px solid var(--line); box-shadow: 0 10px 30px rgba(0,0,0,.5); }
.share-opt-lbl { text-align: center; line-height: 1.25; }
.share-opt-lbl b { display: block; font-size: 14px; color: #fff; }
.share-opt-lbl small { font-size: 11px; color: var(--muted); }
.share-opt .btn { width: 100%; margin: 0; }
.share-preview { display: block; width: 100%; max-width: 300px; margin: 10px auto 4px; border-radius: 12px; border: 1px solid var(--line); box-shadow: 0 10px 30px rgba(0,0,0,.5); }

/* Results buttons: one colour each */
.btn-res { gap: 8px; border: 2px solid transparent; white-space: nowrap; }
@media (max-width: 480px) { .btn-res { font-size: 14px; padding: 12px 10px; gap: 6px; letter-spacing: .3px; } #results .panel-meta { white-space: nowrap; } #results .panel-title { font-size: 12px; } }
.btn-res-again { background: var(--gold); color: #111; }
.btn-res-share { background: #16a34a; color: #fff; }
.btn-res-mode { background: #14141f; color: var(--gold); border-color: var(--gold); margin-top: 2px; }
/* Results buttons: Play Again full width, Share and Change Mode side by side under it (4 Oct 2026) */
.res-acts { display: grid; gap: 10px; margin: 16px 0 10px; }
.res-acts .btn-res-again { min-height: 56px; font-size: 17px; }
.res-two { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.res-two .btn-res-mode { margin-top: 0; }
@media (max-width: 480px) { .res-acts .btn-res-again { font-size: 16px; } }
/* The results list's title on its own line, its note under it (it wrapped over three lines beside the note) */
.panel-head.is-stack { flex-direction: column; align-items: flex-start; gap: 2px; }
#results .panel-head.is-stack .panel-meta { white-space: normal; }
@media (hover: hover) {
  .btn-res-again:hover { background: var(--gold-dark); }
  .btn-res-share:hover { background: #15803d; }
  .btn-res-mode:hover { background: rgba(241, 192, 115, .12); }
}

/* Desktop placing: glowing target spots */

.slot.is-preview { border-color: rgba(241, 192, 115, .7); background: rgba(241, 192, 115, .1); }
.slot.is-preview .slot-code { color: var(--gold); }
.pitch.is-placing .slot.is-empty:not(.is-target) { opacity: .35; }
.pitch.is-placing .slot.is-filled { opacity: .55; }
.slot.is-target {
  cursor: pointer; border: 2px solid var(--gold); background: rgba(241, 192, 115, .2);
  box-shadow: 0 0 0 3px rgba(241, 192, 115, .25), 0 0 22px rgba(241, 192, 115, .55);
  animation: targetPulse 1.1s ease-in-out infinite;
}
.slot.is-target .slot-code, .slot.is-target .slot-pos { color: #fff; }
.slot.is-target::after {
  content: "Place here"; position: absolute; bottom: -9px; left: 50%; transform: translateX(-50%);
  font-size: 9px; font-weight: 900; letter-spacing: .5px; text-transform: uppercase; white-space: nowrap;
  padding: 1px 6px; border-radius: 4px; background: var(--gold); color: #111;
}
@media (hover: hover) { .slot.is-target:hover { background: rgba(241, 192, 115, .38); transform: scale(1.05); } }
@keyframes targetPulse { 0%, 100% { box-shadow: 0 0 0 3px rgba(241, 192, 115, .25), 0 0 16px rgba(241, 192, 115, .45); } 50% { box-shadow: 0 0 0 5px rgba(241, 192, 115, .35), 0 0 28px rgba(241, 192, 115, .75); } }
.pcard.is-selected, .srow.is-selected { outline: 3px solid var(--gold); outline-offset: 2px; }
.place-hint { color: var(--gold); font-weight: 900; }

/* Wildcards */

.wildcards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-bottom: 12px; }
.wc {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; padding: 8px 6px; min-height: 52px;
  border-radius: 10px; border: 1.5px solid #3b2f6b; background: #17132b; color: #fff; cursor: pointer; text-align: center;
}
@media (hover: hover) { .wc:hover:not(:disabled) { border-color: var(--gold); } }
.wc:disabled { opacity: .4; cursor: not-allowed; }
.wc.is-spent { opacity: .3; }
.wc.is-armed { border-color: var(--bad); background: #2a1116; opacity: 1; }
.wc-label { display: flex; align-items: center; justify-content: center; gap: 4px; flex-wrap: wrap; font-size: 12px; font-weight: 900; line-height: 1.15; text-align: center; }
.wc-left { font-size: 10px; color: #a99be0; font-weight: 700; text-transform: uppercase; letter-spacing: .5px; }

.tweak-banner {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 10px 12px; margin-bottom: 12px; border-radius: 10px;
  background: #2a1116; border: 1px solid var(--bad); font-size: 13px; color: #fecaca;
}

/* Offer cards (roll 3) */

.offer-cards { display: grid; gap: 10px; }
.pcard {
  display: grid; grid-template-columns: 1fr; width: 100%; padding: 0; overflow: hidden; text-align: left;
  border-radius: 14px; border: 2px solid var(--club); background: var(--card2); color: var(--text); cursor: pointer;
  animation: dealIn .35s ease both;
  transition: transform .12s, box-shadow .15s;
}
/* The hover ring is gold on every card (30 Sep 2026): it was the club's second colour, which only looked gold on clubs
   like Parramatta and vanished on dark ones like Cronulla */
@media (hover: hover) { .pcard:hover:not(:disabled) { transform: translateY(-2px); box-shadow: 0 8px 22px rgba(0, 0, 0, .45), 0 0 0 2px var(--gold); } }
.pcard:disabled { opacity: .5; cursor: not-allowed; }
@keyframes dealIn { from { opacity: 0; transform: translateY(10px) scale(.98); } to { opacity: 1; transform: none; } }
.pcard-plate {
  display: flex; align-items: center; gap: 10px; padding: 10px 14px;
  background: var(--club); color: var(--club-text);
  border-left: 8px solid var(--club-accent);
}
.pcard-abbr { font-size: 13px; font-weight: 900; letter-spacing: 1px; padding: 2px 7px; border-radius: 5px; background: var(--club-accent); color: var(--club); }
.pcard-club { font-size: 13px; font-weight: 800; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pcard-body { display: grid; gap: 6px; padding: 12px 14px 4px; }
.pcard-name { font-size: 20px; font-weight: 900; line-height: 1.15; }
.pcard-meta, .srow-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 5px; }
.pcard-span { font-size: 12px; color: var(--muted); font-weight: 600; margin-left: 4px; }
/* World Cup 200+: a badge for each nation a dual Test player played for (5 Oct 2026) */
.pcard-nats { display: inline-flex; flex-wrap: wrap; gap: 3px; margin-left: 2px; }
.pcard-nats i { display: inline-grid; place-items: center; min-width: 26px; height: 15px; padding: 0 3px; border-radius: 3px; font: 900 8px/1 'Inter', sans-serif; font-style: normal;
  letter-spacing: .2px; color: var(--n2); background: var(--n1); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .2); }
/* Themed Daily (e.g. Knights Day): a tag on every player who has played for the day's club */
.pcard-dc { align-self: flex-start; margin-top: 6px; display: inline-flex; align-items: center; gap: 4px; padding: 3px 8px; border-radius: 999px;
  background: rgba(58, 120, 181, .18); border: 1px solid rgba(58, 120, 181, .6); color: #cfe3ff; font-size: 10.5px; font-weight: 900; letter-spacing: .4px; text-transform: uppercase; }
.chip { font-size: 10px; font-weight: 900; padding: 2px 6px; border-radius: 4px; background: #2a2a44; color: #c7d2fe; letter-spacing: .3px; }
.pcard-foot { display: flex; align-items: center; justify-content: space-between; padding: 8px 14px 12px; }
.pcard-cta { font-size: 12px; font-weight: 900; letter-spacing: 1px; text-transform: uppercase; color: var(--gold); }
.tries-badge { font-size: 12px; color: var(--muted); font-weight: 700; white-space: nowrap; }
.tries-badge strong { font-size: 18px; color: #6b6b85; font-weight: 900; margin-right: 2px; }
.tries-badge.is-revealed strong { color: var(--gold); }

/* Team Spin */

.reel { display: grid; grid-template-columns: 1fr auto 2fr; align-items: stretch; gap: 8px; margin-bottom: 10px; }
.reel-box {
  display: grid; align-content: center; gap: 2px; height: 76px; overflow: hidden; padding: 8px 12px; border-radius: 12px;
  background: var(--bg2); border: 2px solid var(--line); text-align: center;
}
.reel-lbl { font-size: 10px; font-weight: 800; letter-spacing: 1.5px; text-transform: uppercase; color: var(--muted); }
.reel-val {
  font-size: 17px; font-weight: 900; line-height: 1.15;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.reel-year .reel-val { font-variant-numeric: tabular-nums; }
.reel-x { align-self: center; color: var(--dim); font-size: 22px; }
.reel.is-landed .reel-box:first-child { border-color: var(--gold); }
.reel.is-landed .reel-box:first-child .reel-val { color: var(--gold); }
.reel-year .reel-val { font-size: 24px; }
.reel-club[style] { background: var(--club); border-color: var(--club-accent); color: var(--club-text); }
.reel-club[style] .reel-lbl { color: var(--club-text); opacity: .7; }

/* Squad sort toggle (Team Spin) */
.sort-toggle { display: grid; grid-template-columns: 1fr 1fr; margin: 0 0 8px; border-radius: 12px; border: 1px solid var(--line); background: var(--bg2); overflow: hidden; }
.sort-btn {
  display: grid; gap: 1px; justify-items: center; padding: 8px 6px; border: 0; background: transparent; cursor: pointer;
  color: var(--muted); font-size: 14px; font-weight: 900;
}
.sort-btn + .sort-btn { border-left: 1px solid var(--line); }
.sort-btn .sort-dir { font-size: 11px; font-weight: 700; opacity: .8; }
.sort-btn.is-on { background: rgba(241, 192, 115, .16); color: var(--gold); }
@media (hover: hover) { .sort-btn:hover:not(.is-on) { color: #fff; } }
.squad-group {
  position: sticky; top: 0; z-index: 1; padding: 6px 4px 4px; margin-top: 2px;
  font-size: 11px; font-weight: 900; letter-spacing: 1.5px; text-transform: uppercase; color: var(--gold);
  background: var(--card);
}
.squad-wrap { position: relative; }
.squad-wrap::after {
  content: ""; position: absolute; left: 0; right: 6px; bottom: 0; height: 56px; pointer-events: none;
  background: linear-gradient(180deg, rgba(20, 20, 32, 0), var(--card) 85%); transition: opacity .2s;
}
.squad-wrap.at-end::after, .squad-wrap.no-scroll::after { opacity: 0; }
.squad-more {
  position: absolute; left: 50%; bottom: 8px; transform: translateX(-50%); z-index: 2; pointer-events: none;
  padding: 4px 12px; border-radius: 999px; background: var(--gold); color: #111;
  font-size: 11px; font-weight: 900; letter-spacing: .5px; text-transform: uppercase; white-space: nowrap;
  box-shadow: 0 4px 12px rgba(0, 0, 0, .5); animation: moreBob 1.4s ease-in-out infinite; transition: opacity .2s;
}
.squad-wrap.at-end .squad-more, .squad-wrap.no-scroll .squad-more, .squad-wrap.scrolled .squad-more { opacity: 0; }
@keyframes moreBob { 0%, 100% { transform: translate(-50%, 0); } 50% { transform: translate(-50%, 3px); } }
.squad::-webkit-scrollbar { width: 6px; }
.squad::-webkit-scrollbar-thumb { background: rgba(241, 192, 115, .55); border-radius: 3px; }
.squad::-webkit-scrollbar-track { background: rgba(255, 255, 255, .05); border-radius: 3px; }
.squad { scrollbar-color: rgba(241, 192, 115, .55) rgba(255, 255, 255, .05); scrollbar-width: thin; }
.squad-group-fixed { position: static; background: none; padding: 2px 2px 6px; }
.squad { display: grid; gap: 6px; max-height: 420px; overflow-y: auto; padding-right: 2px; }
.srow {
  display: flex; align-items: center; justify-content: space-between; gap: 10px; width: 100%;
  padding: 10px 12px; border-radius: 10px; text-align: left; cursor: pointer;
  background: var(--card2); color: var(--text); border: 1px solid var(--line); border-left: 6px solid var(--club);
}
@media (hover: hover) { .srow:hover:not(:disabled) { border-color: var(--gold); border-left-color: var(--club); background: #232338; } }
.srow:disabled { opacity: .5; cursor: not-allowed; }
.srow-main { display: grid; gap: 3px; min-width: 0; }
.srow-name { font-size: 15px; font-weight: 800; }
.note { font-size: 12px; color: var(--muted); margin: 0 0 10px; }

/* Reveal after a pick */

.reveal {
  display: grid; justify-items: center; gap: 2px; padding: 26px 16px; border-radius: 14px;
  background: var(--club); color: var(--club-text); border: 3px solid var(--club-accent);
  animation: dealIn .3s ease both;
}
.reveal-name { font-size: 18px; font-weight: 900; text-align: center; }
.reveal-num { font-size: 64px; font-weight: 900; line-height: 1; font-variant-numeric: tabular-nums; animation: pop .5s ease both .1s; }
.reveal-lbl { font-size: 11px; font-weight: 800; letter-spacing: 2px; text-transform: uppercase; opacity: .8; text-align: center; text-wrap: balance; }
@keyframes pop { 0% { transform: scale(.4); opacity: 0; } 70% { transform: scale(1.12); opacity: 1; } 100% { transform: scale(1); } }

/* Decision when full but short */

.decision { text-align: center; padding: 8px 4px; }
.decision-big { font-size: 34px; font-weight: 900; color: var(--bad); margin: 4px 0; }
.decision p { color: #c8c8d8; }
/* At the target or over (Go Higher, 2 Oct 2026): the total in the win green */
.decision.is-over .decision-big { color: var(--good); }
.decision.is-over .decision-big small { font-size: 16px; font-weight: 800; color: #c8c8d8; }
/* Squad full with the game's own Remove Player: a small pink pill to stock up on more (a pill, not a text link) */
.decision-more { display: inline-flex; align-items: center; gap: 6px; margin: 12px auto 0; padding: 7px 14px; border-radius: 999px; border: 1px solid rgba(244, 114, 182, .55);
  background: rgba(236, 72, 153, .12); color: #f9a8d4; font: 800 12.5px/1.2 var(--font); cursor: pointer; -webkit-tap-highlight-color: transparent; }
@media (hover: hover) { .decision-more:hover { border-color: #f472b6; color: #fff; } }

/* Sheet (slot chooser) */

.sheet { position: fixed; inset: 0; z-index: 200; display: flex; align-items: flex-end; justify-content: center; height: 100vh; height: 100dvh; overscroll-behavior: contain; }
.sheet-backdrop { position: absolute; inset: 0; background: rgba(0, 0, 0, .7); }
.sheet-body {
  max-height: calc(100vh - 24px); max-height: calc(100dvh - 24px); overflow-y: auto; overscroll-behavior: contain;
  position: relative; width: 100%; max-width: 480px; padding: 20px 16px calc(20px + env(safe-area-inset-bottom));
  background: var(--card); border-top: 2px solid var(--gold); border-radius: 18px 18px 0 0;
  animation: sheetUp .22s ease both;
}
@keyframes sheetUp { from { transform: translateY(30px); opacity: 0; } to { transform: none; opacity: 1; } }
.sheet-title { font-size: 18px; font-weight: 900; margin: 0 0 2px; }
.sheet-sub { font-size: 13px; color: var(--muted); margin: 0 0 14px; }
/* Dual-position chooser (phones) */
.chooser-card { overflow: hidden; border-radius: 14px; border: 2px solid var(--club); background: var(--card2); margin-bottom: 14px; }
.chooser-card .pcard-plate { display: flex; }
.chooser-name { display: block; padding: 10px 14px 12px; font-size: 20px; font-weight: 900; }
.chooser-card.is-goat { border-color: var(--gold); }
.chooser-card.is-goat .pcard-plate { background: linear-gradient(135deg, #7a5a12, #f1c073 40%, #fff1c4 55%, #f1c073 70%, #7a5a12); color: #1a1204; }
.chooser-card.is-goat .chooser-name { color: var(--gold); }
.chooser-q { margin: 0 0 10px; text-align: center; font-size: 12px; font-weight: 900; letter-spacing: 1.5px; text-transform: uppercase; color: var(--gold); }
.chooser-spots {
  display: flex; justify-content: center; gap: 12px; padding: 18px 12px 22px; margin-bottom: 12px; border-radius: 12px;
  background: repeating-linear-gradient(180deg, rgba(255, 255, 255, .025) 0 30px, transparent 30px 60px), linear-gradient(180deg, #0f2a17, #0b1f12);
  border: 1px solid #1d3b25;
}
.chooser-spot {
  position: relative; flex: 0 1 120px; min-height: 92px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
  border-radius: 12px; border: 2px solid var(--gold); background: rgba(241, 192, 115, .2); color: #fff; cursor: pointer;
  box-shadow: 0 0 0 3px rgba(241, 192, 115, .25), 0 0 18px rgba(241, 192, 115, .5);
  animation: targetPulse 1.1s ease-in-out infinite;
}
.chooser-spot:active { transform: scale(.96); background: rgba(241, 192, 115, .38); }
.cs-code { font-size: 26px; font-weight: 900; line-height: 1; }
.cs-pos { font-size: 12px; font-weight: 700; opacity: .85; }
.cs-tag {
  position: absolute; bottom: -10px; left: 50%; transform: translateX(-50%); white-space: nowrap;
  font-size: 9px; font-weight: 900; letter-spacing: .5px; text-transform: uppercase; padding: 2px 7px; border-radius: 4px; background: var(--gold); color: #111;
}
.chooser-back { display: flex; align-items: center; justify-content: center; width: max-content; max-width: 100%; min-height: 38px; margin: 10px auto 0; padding: 8px 16px; box-sizing: border-box;
  border-radius: 999px; border: 1px solid rgba(255, 255, 255, .16); background: rgba(255, 255, 255, .06); color: #fff; font-size: 13px; font-weight: 800; cursor: pointer; }
@media (hover: hover) { .chooser-back:hover { border-color: rgba(255, 255, 255, .45); } }

.toast {
  position: fixed; left: 50%; bottom: 20px; z-index: 300; transform: translate(-50%, 20px);
  max-width: calc(100% - 32px); padding: 10px 16px; border-radius: 10px;
  background: #242438; border: 1px solid var(--gold); color: #fff; font-size: 14px; font-weight: 600;
  opacity: 0; pointer-events: none; transition: opacity .2s, transform .2s;
}
.toast.is-on { opacity: 1; transform: translate(-50%, 0); }

/* Results */

.result-hero { text-align: center; padding: 22px 16px 18px; border-radius: 18px; margin-top: 4px; }
.result-hero.is-win { background: radial-gradient(circle at 50% 0, rgba(241, 192, 115, .28), rgba(241, 192, 115, .04) 70%); border: 2px solid var(--gold); }
.result-hero.is-fail { background: radial-gradient(circle at 50% 0, rgba(248, 113, 113, .18), rgba(248, 113, 113, .03) 70%); border: 2px solid #5a2630; }
.result-kicker { font-size: 11px; font-weight: 800; letter-spacing: 2.5px; text-transform: uppercase; color: var(--muted); }
/* The total is the hero */
.result-total { display: grid; justify-items: center; margin: 4px 0 2px; }
.rt-num {
  font-size: clamp(88px, 30vw, 150px); font-weight: 900; line-height: .95; letter-spacing: -3px; font-variant-numeric: tabular-nums;
  background: linear-gradient(180deg, #ffe2a8 0%, var(--gold) 45%, #c9953a 100%); -webkit-background-clip: text; background-clip: text; color: transparent;
  text-shadow: 0 0 40px rgba(241, 192, 115, .25);
}
.rt-of { margin-top: 4px; font-size: 12px; font-weight: 800; letter-spacing: 2.5px; text-transform: uppercase; color: #b8b8cc; }
/* Result as a coloured badge under the total */
.result-title {
  display: inline-flex; align-items: center; gap: 6px; margin: 14px 0 4px; padding: 7px 16px; border-radius: 999px;
  font-size: clamp(16px, 4.6vw, 20px); font-weight: 900; line-height: 1.1; letter-spacing: .8px; text-transform: uppercase;
}
.is-fail .result-title { background: rgba(248, 113, 113, .16); color: #fca5a5; border: 1.5px solid rgba(248, 113, 113, .55); }
.is-win .result-title { background: rgba(74, 222, 128, .16); color: #86efac; border: 1.5px solid rgba(74, 222, 128, .55); }
.result-sub { color: #c8c8d8; margin: 10px 0 0; }
.result-luck { display: block; width: fit-content; margin: 12px auto 0; max-width: 36ch; padding: 7px 12px; border-radius: 12px; font-size: 13px; line-height: 1.4; color: #d6d6e4; background: rgba(255, 255, 255, .05); border: 1px solid rgba(255, 255, 255, .1); }
.result-luck.is-lucky { color: #bbf7d0; background: rgba(74, 222, 128, .1); border-color: rgba(74, 222, 128, .4); }
.result-luck.is-tough { color: #cbd5e1; background: rgba(148, 163, 184, .1); border-color: rgba(148, 163, 184, .35); }

.rlist { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.rrow {
  display: grid; grid-template-columns: 34px 46px 1fr auto; align-items: center; gap: 8px;
  padding: 0 12px 0 0; border-radius: 10px; overflow: hidden;
  background: var(--card2); border: 1px solid var(--line);
}
.rrow-code { font-size: 11px; font-weight: 900; color: var(--muted); text-align: center; }
.rrow-club {
  align-self: stretch; display: flex; align-items: center; justify-content: center;
  background: var(--club); color: var(--club-text); border-left: 4px solid var(--club-accent);
  font-size: 11px; font-weight: 900; padding: 10px 0;
}
.rrow.is-empty .rrow-club { display: none; }
.rrow.is-empty { grid-template-columns: 34px 1fr auto; padding: 10px 12px 10px 0; color: var(--dim); }
.rrow-name { font-size: 14px; font-weight: 800; min-width: 0; overflow: hidden; text-overflow: ellipsis; padding: 8px 0; display: flex; flex-wrap: wrap; align-items: center; column-gap: 10px; row-gap: 5px; line-height: 1.25; }
.rrow-tries { font-size: 18px; font-weight: 900; font-variant-numeric: tabular-nums; }
.rrow.is-best { border-color: var(--gold); }
.best-tag { font-size: 9px; font-weight: 900; letter-spacing: .5px; text-transform: uppercase; padding: 3px 7px; border-radius: 4px; background: var(--gold); color: #111; white-space: nowrap; line-height: 1.2; }
.rsum { display: flex; justify-content: space-between; align-items: baseline; padding: 12px 4px 0; margin-top: 8px; border-top: 1px solid var(--line); }
.rsum span { font-size: 12px; font-weight: 800; letter-spacing: 1.5px; text-transform: uppercase; color: var(--muted); }
.rsum strong { font-size: 24px; font-weight: 900; color: var(--gold); }
#results .panel { margin-top: 18px; }

/* Unibet (neutral class names so content blockers do not hide the placements) */

.cp-partner { margin: 18px 0 0; }
.cp-partner-link { display: block; border-radius: 12px; overflow: hidden; text-decoration: none; }
.cp-partner-link img { display: block; width: 100%; height: auto; }

.cp-takeover {
  position: fixed; inset: 0; z-index: 400; padding: 16px; height: 100vh; height: 100dvh; overscroll-behavior: contain; touch-action: manipulation;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  background: rgba(0, 0, 0, .92);
}
.cp-takeover-link { display: block; max-width: 480px; border-radius: 16px; overflow: hidden; }
/* Fit the 4:5 creative inside the visible screen, leaving room for the countdown bar */
.cp-takeover-link img { display: block; width: auto; height: auto; max-width: min(100%, 480px); max-width: min(calc(100vw - 32px), 480px); max-height: calc(100vh - 110px); max-height: calc(100dvh - 110px); }
.cp-takeover-bar { width: 100%; max-width: 480px; height: 6px; margin-top: 8px; border-radius: 4px; background: #333; overflow: hidden; }
.cp-takeover-fill { height: 100%; width: 100%; background: var(--gold); transition: width .1s linear; }
.cp-takeover-label { margin-top: 6px; font-size: 11px; color: #888; }

/* 404 */

.nf { text-align: center; padding-top: 40px; padding-bottom: 20px; }
.nf-code { font-size: clamp(96px, 30vw, 160px); font-weight: 900; line-height: 1; color: var(--gold); font-style: italic; letter-spacing: -4px; text-shadow: 0 0 40px rgba(241, 192, 115, .3); }
.nf-title { font-size: clamp(30px, 8vw, 40px); font-weight: 900; margin: 6px 0 8px; }
.nf-sub { color: #c0c0d0; max-width: 380px; margin: 0 auto 22px; }
.nf-btn { max-width: 360px; }

/* Footer */

.site-footer { margin-top: 28px; padding: 18px 16px 32px; text-align: center; border-top: 1px solid #1a1a2a; }
.socials { display: flex; justify-content: center; gap: 20px; margin-bottom: 12px; }
.socials a { color: var(--gold); opacity: .85; }
@media (hover: hover) { .socials a:hover { opacity: 1; } }
.footer-links { font-size: 12px; color: var(--dim); margin: 0 0 10px; }
.footer-links a { color: #9a9ab0; text-decoration: none; }
@media (hover: hover) { .footer-links a:hover { color: var(--gold); } }
.footer-copy { font-size: 11px; font-weight: 600; color: #78788e; margin: 0 0 6px; }
.footer-legal { font-size: 11px; color: #78788e; max-width: 620px; margin: 0 auto; line-height: 1.6; text-wrap: pretty; }

/* Content pages (How it works, Privacy, Terms) */

.doc h1 { font-size: clamp(28px, 7vw, 38px); font-weight: 900; margin: 12px 0 4px; }
.doc .updated { font-size: 12px; color: var(--dim); margin: 0 0 20px; }
.doc h2 { font-size: 15px; font-weight: 900; color: var(--gold); text-transform: uppercase; letter-spacing: 1px; margin: 26px 0 8px; }
.doc p, .doc li { color: #c0c0d0; }
.doc ul, .doc ol { padding-left: 20px; }
.doc li { margin-bottom: 6px; }
.doc strong { color: #fff; }
.doc table { width: 100%; border-collapse: collapse; font-size: 14px; margin: 8px 0; }
.doc th, .doc td { text-align: left; padding: 8px 10px; border-bottom: 1px solid var(--line); vertical-align: top; }
.doc th { color: var(--gold); font-size: 12px; text-transform: uppercase; letter-spacing: 1px; }
.doc td { color: #c0c0d0; }
/* On a phone each mode is a small card (name, then each detail with its label), not four squeezed columns */
@media (max-width: 560px) {
  .doc thead { display: none; }
  .doc table, .doc tbody, .doc tr, .doc td { display: block; }
  .doc tr { padding: 10px 0; border-bottom: 1px solid var(--line); }
  .doc td { padding: 2px 0; border: 0; }
  .doc td:first-child { margin-bottom: 2px; color: #fff; font-size: 15px; }
  .doc td[data-l]::before { content: attr(data-l) ": "; color: var(--gold); font-size: 11px; font-weight: 800; letter-spacing: .8px; text-transform: uppercase; }
}
.doc .cta { margin-top: 26px; }

/* How it works viewer (27-0 style) */

.how-it-works {
  margin: 20px 0 0; padding: 16px 14px 14px; border-radius: 16px;
  background: linear-gradient(180deg, #121226, #0d0d1a); border: 1px solid #25254a;
}
.hiw-title { color: var(--gold); font-size: 13px; font-weight: 800; letter-spacing: 1.5px; text-transform: uppercase; text-align: center; margin-bottom: 12px; }
.hiw-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-bottom: 8px; }
.hiw-tile {
  padding: 10px 10px 9px; border-radius: 10px; text-align: center;
  background: rgba(245, 197, 24, .07); border: 1px solid rgba(245, 197, 24, .18);
}
.hiw-ico { font-size: 20px; line-height: 1; margin-bottom: 5px; }
.hiw-name { font-size: 14px; font-weight: 800; color: var(--gold); margin-bottom: 2px; }
.hiw-desc { font-size: 12.5px; color: #a0a0b8; line-height: 1.4; }
.hiw-goal {
  padding: 10px 14px; border-radius: 10px; text-align: center;
  background: rgba(245, 197, 24, .07); border: 1px solid rgba(245, 197, 24, .2);
}
.hiw-goal-label { font-size: 11px; font-weight: 800; letter-spacing: 1.5px; text-transform: uppercase; color: var(--gold); margin-bottom: 3px; }
.hiw-goal-text { font-size: 16px; font-weight: 900; color: #fff; }
.hiw-foot { font-size: 12px; color: var(--muted); text-align: center; margin: 10px 0 0; }
#homeAd:not(:empty) { margin-top: 4px; }

.rules-btn {
  display: flex; align-items: center; gap: 12px; width: 100%; max-width: 360px; margin: 14px auto 0; padding: 12px 16px;
  border-radius: 14px; text-decoration: none; color: var(--text);
  background: linear-gradient(135deg, rgba(241, 192, 115, .14), rgba(241, 192, 115, .04));
  border: 1.5px solid rgba(241, 192, 115, .45);
  transition: border-color .15s, transform .12s, box-shadow .15s;
}
@media (hover: hover) { .rules-btn:hover { border-color: var(--gold); transform: translateY(-1px); box-shadow: 0 6px 18px rgba(241, 192, 115, .15); } }
.rules-ico { font-size: 24px; line-height: 1; }
.rules-txt { display: grid; flex: 1; line-height: 1.25; text-align: left; }
.rules-txt strong { font-size: 15px; font-weight: 900; color: var(--gold); }
.rules-txt small { font-size: 12px; color: var(--muted); font-weight: 600; }
.rules-arrow { font-size: 20px; color: var(--gold); transition: transform .15s; }
@media (hover: hover) { .rules-btn:hover .rules-arrow { transform: translateX(3px); } }

/* Rules pop-up */

.sheet.is-rules { align-items: center; padding: 16px; }
.sheet.is-rules .sheet-body {
  max-width: 640px; max-height: calc(100vh - 32px); max-height: calc(100dvh - 32px); overflow-y: auto; -webkit-overflow-scrolling: touch; overscroll-behavior: contain; border-radius: 18px;
  border: 1px solid var(--gold); padding: 22px 18px 18px;
}
.sheet-x {
  position: sticky; top: 0; float: right; z-index: 2; width: 38px; height: 38px; margin: -8px -6px 0 8px;
  border-radius: 50%; border: 1px solid var(--line); background: var(--card2); color: #fff; font-size: 22px; line-height: 1; cursor: pointer;
}
@media (hover: hover) { .sheet-x:hover { border-color: var(--gold); color: var(--gold); } }
.rules-pop h1 { margin-top: 0; }
.rules-pop table { display: block; overflow-x: auto; }

/* Back to game on content pages */

.back-link {
  display: inline-flex; align-items: center; gap: 6px; margin: 4px 0 6px; padding: 8px 14px;
  border-radius: 10px; border: 1.5px solid var(--gold); color: var(--gold);
  font-size: 13px; font-weight: 900; letter-spacing: .5px; text-transform: uppercase; text-decoration: none;
}
@media (hover: hover) { .back-link:hover { background: var(--gold); color: #111; } }
.header-nav .nav-play {
  padding: 7px 14px; border-radius: 10px; background: var(--gold); color: #111; font-weight: 900; text-transform: uppercase; letter-spacing: .5px;
}
@media (hover: hover) { .header-nav .nav-play:hover { background: var(--gold-dark); color: #111; } }

/* Restart sheet */

.sheet-grab { width: 48px; height: 4px; border-radius: 2px; background: #2a2a4a; margin: 0 auto 18px; }
.sheet-kicker { font-size: 11px; font-weight: 800; letter-spacing: 2px; text-transform: uppercase; color: var(--gold); text-align: center; margin-bottom: 6px; }
.sheet-title.center, .sheet-sub.center { text-align: center; }
.sheet-gap { margin-top: 10px; }

/* Play again / Change mode: game-styled card. Bottom sheet on phones, centred pop-up on desktop */
.sheet.is-confirm .sheet-backdrop { background: rgba(5, 5, 10, .72); -webkit-backdrop-filter: blur(5px); backdrop-filter: blur(5px); animation: wcbFade2 .2s ease both; }
@keyframes wcbFade2 { from { opacity: 0; } to { opacity: 1; } }
.sheet.is-confirm .sheet-body {
  overflow-x: hidden; text-align: center; padding: 18px 18px calc(20px + env(safe-area-inset-bottom));
  background: radial-gradient(120% 70% at 50% 0%, rgba(241, 192, 115, .16), transparent 60%), linear-gradient(180deg, #1b1830, #0f0d1d);
  border: 2px solid var(--gold); border-bottom: 0;
  box-shadow: 0 0 0 4px rgba(241, 192, 115, .12), 0 -10px 40px rgba(241, 192, 115, .18);
}
.confirm-ico {
  width: 64px; height: 64px; margin: 0 auto 10px; display: flex; align-items: center; justify-content: center; font-size: 30px;
  border-radius: 50%; border: 2px solid var(--gold); background: rgba(241, 192, 115, .12);
  box-shadow: 0 0 0 5px rgba(241, 192, 115, .1), 0 0 24px rgba(241, 192, 115, .4);
  animation: confirmIco .6s cubic-bezier(.2, .9, .3, 1.3) both;
}
@keyframes confirmIco { 0% { transform: scale(.3) rotate(-90deg); opacity: 0; } 100% { transform: none; opacity: 1; } }
.sheet.is-confirm .sheet-title { font-size: 24px; line-height: 1.15; font-style: italic; text-transform: uppercase; letter-spacing: -.3px; margin: 2px 0 6px; }
.sheet.is-confirm .sheet-sub { font-size: 14px; margin-bottom: 18px; }
.sheet.is-confirm .btn { min-height: 52px; font-size: 16px; border-radius: 12px; }
.sheet.is-confirm .btn-primary { box-shadow: 0 6px 22px rgba(241, 192, 115, .3); }

@media (min-width: 720px) {
  .sheet.is-confirm { align-items: center; padding: 24px; }
  .sheet.is-confirm .sheet-body {
    max-width: 440px; padding: 28px 28px 24px; border-radius: 22px; border-bottom: 2px solid var(--gold);
    box-shadow: 0 0 0 5px rgba(241, 192, 115, .12), 0 0 50px rgba(241, 192, 115, .22), 0 30px 70px rgba(0, 0, 0, .6);
    animation: confirmIn .32s cubic-bezier(.2, .9, .3, 1.15) both;
  }
  .sheet.is-confirm .sheet-grab { display: none; }
}
@keyframes confirmIn { from { opacity: 0; transform: translateY(16px) scale(.94); } to { opacity: 1; transform: none; } }

/* Subscribe to The Cast Patrol */
.yt-sub {
  display: flex; align-items: center; gap: 12px; width: 100%; margin-top: 16px; padding: 10px 14px 10px 10px; box-sizing: border-box;
  border-radius: 14px; background: #FF0000; color: #fff; text-decoration: none; text-align: left;
  box-shadow: 0 6px 22px rgba(255, 0, 0, .3); transition: transform .12s, background .15s;
}
@media (hover: hover) { .yt-sub:hover { background: #e00000; transform: translateY(-1px); } }
.yt-sub:active { transform: scale(.98); }
.yt-avatar { width: 40px; height: 40px; border-radius: 50%; border: 2px solid #fff; object-fit: cover; flex-shrink: 0; background: #fff; }
.yt-text { flex: 1; display: flex; flex-direction: column; min-width: 0; }
.yt-kicker { font-size: 11px; font-weight: 700; opacity: .85; }
.yt-label { font-size: 15px; font-weight: 900; line-height: 1.2; }
.yt-logo { width: 30px; height: 21px; flex-shrink: 0; }

/* The GOAT: Alex Johnston */

.goat { font-style: normal; }
.pcard.is-goat, .reveal.is-goat, .slot.is-goat, .rrow.is-goat, .srow.is-goat {
  --goat: linear-gradient(135deg, #7a5a12 0%, #f1c073 30%, #fff1c4 50%, #f1c073 70%, #7a5a12 100%);
}
.pcard.is-goat { border-color: var(--gold); box-shadow: 0 0 0 1px var(--gold), 0 0 22px rgba(241, 192, 115, .35); }
.pcard.is-goat .pcard-plate { background: var(--goat); background-size: 200% 100%; color: #1a1204; border-left-color: #1a1204; animation: goatShine 3s linear infinite; }
.pcard.is-goat .pcard-abbr { background: #1a1204; color: var(--gold); }
.pcard.is-goat .pcard-name { color: var(--gold); }
.slot.is-goat { background: var(--goat); background-size: 200% 100%; color: #1a1204; border-color: #fff1c4; box-shadow: 0 0 18px rgba(241, 192, 115, .55); animation: goatShine 3s linear infinite; }
.slot.is-goat .slot-abbr { color: #1a1204; font-size: 15px; top: 2px; right: 4px; line-height: 1; }
.reveal.is-goat { background: var(--goat); background-size: 200% 100%; color: #1a1204; border-color: #fff1c4; animation: dealIn .3s ease both, goatShine 3s linear infinite; }
.rrow.is-goat { border-color: var(--gold); background: linear-gradient(90deg, rgba(241, 192, 115, .22), var(--card2) 70%); }
.rrow.is-goat .rrow-club { background: var(--goat); color: #1a1204; border-left-color: #1a1204; }
.rrow.is-goat .rrow-name, .rrow.is-goat .rrow-tries { color: var(--gold); }
.srow.is-goat { border-color: var(--gold); background: linear-gradient(90deg, rgba(241, 192, 115, .2), var(--card2) 75%); }
.srow.is-goat .srow-name { color: var(--gold); }
@keyframes goatShine { from { background-position: 0% 0; } to { background-position: 200% 0; } }

/* Mobile: tighter blocks so more of the offer fits on screen */

@media (max-width: 899px) {
  .wrap-wide.draft-grid { padding-top: 12px; gap: 12px; }
  .panel { padding: 12px; border-radius: 14px; }
  .panel-head { margin-bottom: 8px; }
  .wildcards { gap: 6px; margin-bottom: 8px; }
  .wc { min-height: 40px; padding: 5px 4px; }
  .wc-label { font-size: 11.5px; line-height: 1.2; }
  .offer-cards { gap: 8px; }
  .pcard { grid-template-columns: 1fr auto; border-radius: 12px; }
  .pcard-plate { grid-column: 1 / -1; padding: 6px 12px; border-left-width: 6px; }
  .pcard-abbr { font-size: 11px; }
  .pcard-club { font-size: 12px; }
  .pcard-body { padding: 8px 4px 9px 12px; gap: 4px; }
  .pcard-name { font-size: 17px; }
  .pcard-foot { padding: 8px 12px 9px 4px; align-self: center; }
  .pcard-cta { display: none; }
  .reel { margin-bottom: 8px; gap: 6px; }
  .reel-box { height: 70px; padding: 6px 10px; }
  .reel-val { font-size: 14px; line-height: 1.15; }
  .reel-club .reel-val { font-size: 14px; }
  .reel-year .reel-val { font-size: 20px; }
  .squad { gap: 5px; max-height: 58vh; }
  .srow { padding: 7px 10px; }
  .srow-name { font-size: 14px; }
  .reveal { padding: 18px 12px; }
  .reveal-num { font-size: 52px; }
  .sb-inner { padding: 8px 16px 10px; row-gap: 6px; }
}

/* Phones: compact home so PLAY NOW is on screen without scrolling */
@media (max-width: 899px) {
  #screen-home .wrap { padding-top: 6px; }
  .hero { padding: 6px 0 2px; }
  .hero-title { margin: 2px 0 6px; }
  .hero-logo { max-width: 165px; }
  .hero-pitch { font-size: 14px; line-height: 1.45; max-width: 340px; }
  .mode-picker { gap: 8px; margin: 12px 0 10px; }
  .mode-card { padding: 10px 12px; column-gap: 10px; }
  .mode-ico { font-size: 24px; }
  .mode-name { font-size: 20px; }
  .mode-line { font-size: 13px; }
  .mode-chips { margin-top: 6px; }
  .mode-chip { font-size: 11px; padding: 2px 7px; }
  #startBtn { min-height: 52px; font-size: 17px; letter-spacing: 1px; }
}

/* Desktop */

@media (min-width: 900px) {
  .draft-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); align-items: start; padding-top: 20px; }
  .offer-panel { position: sticky; top: 150px; }
  .offer-cards { gap: 12px; }
  .slot { flex-basis: 108px; min-height: 84px; }
  .slot-name { font-size: 14px; }
  .slot-tries { font-size: 22px; }
  .pitch { gap: 10px; padding: 16px 10px; }
  .pitch-row { gap: 10px; }
  /* Mode cards stay a full-width list on desktop too, the same as 27-0 */
  .mode-picker { gap: 12px; }
  .mode-card { padding: 16px 18px; }
  .promo-logo { width: 140px; }
  .wrap:not(.wrap-wide) { max-width: 760px; }
}

@media (max-width: 380px) {
  .slot { min-height: 62px; }
  .slot-name { font-size: 10.5px; }
  .slot-tries { font-size: 15px; }
  .pitch-row { gap: 4px; }
  .sb-help { font-size: 12px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}

/* Free bonus reroll (follow us), shown once the normal reroll is used */
.wc.wc-bonus { border-color: #f1c073 !important; background: rgba(241, 192, 115, .12) !important; animation: wcBonusPulse 2.2s ease-in-out infinite; }
.wc.wc-bonus .wc-left { color: #f1c073 !important; }
@keyframes wcBonusPulse { 0%, 100% { box-shadow: 0 0 0 0 rgba(241, 192, 115, 0); } 50% { box-shadow: 0 0 0 4px rgba(241, 192, 115, .22); } }
@media (prefers-reduced-motion: reduce) { .wc.wc-bonus { animation: none; } }

/* Squad full: Remove a player / Lock in (with a draining countdown) */
.btn-decide { position: relative; overflow: hidden; border-width: 2px; box-shadow: 0 6px 18px rgba(0, 0, 0, .35), inset 0 1px 0 rgba(255, 255, 255, .12); transition: transform .12s ease, box-shadow .12s ease; }
.btn-decide:active { transform: translateY(1px) scale(.99); box-shadow: 0 2px 8px rgba(0, 0, 0, .35); }
.btn-decide-lbl { position: relative; z-index: 1; display: inline-flex; align-items: center; justify-content: center; gap: 6px; }
.btn-decide-remove { color: #fdf2f8; border-color: #db2777; background: linear-gradient(160deg, rgba(236, 72, 153, .42), rgba(190, 24, 93, .26)); }
@media (hover: hover) { .btn-decide-remove:hover { border-color: #f472b6; } }
.btn-decide-lock { color: #111; border-color: #f1c073; background: #2a2418; }
.btn-decide-lock .lock-fill { position: absolute; inset: 0; background: linear-gradient(90deg, #f7d596, #f1c073 55%, #d9a24a); transform-origin: left center; animation: lockDrain 10s linear forwards; }
.btn-decide-lock .lock-secs { display: inline-grid; place-items: center; min-width: 26px; height: 26px; border-radius: 50%; background: rgba(0, 0, 0, .78); color: #f1c073; font-size: 13px; }
@keyframes lockDrain { from { transform: scaleX(1); } to { transform: scaleX(0); } }
@media (prefers-reduced-motion: reduce) { .btn-decide-lock .lock-fill { animation: none; } }
.btn-decide-lock .btn-decide-lbl { padding: 7px 14px; border-radius: 999px; background: rgba(10, 10, 15, .82); color: #f1c073; }
.btn-decide-lock .lock-secs { background: transparent; color: #fff; min-width: 20px; height: auto; }
.btn-decide { min-height: 54px; padding: 0 8px; font-size: 14px; white-space: nowrap; }
.btn-decide-lbl { white-space: nowrap; }
.btn-decide-lock .btn-decide-lbl { padding: 6px 12px; }
.btn-decide-lock .lock-fill { animation: none; transform: scaleX(1); transition: transform 1s linear; }
@media (prefers-reduced-motion: reduce) { .btn-decide-lock .lock-fill { transition: none; } }

/* Team Spin squad search */
.squad-tools { display: grid; grid-template-columns: 1fr auto; gap: 8px; align-items: start; }
.squad-tools .sort-toggle, .squad-tools .squad-group-fixed { margin-bottom: 8px; }
.squad-search-btn { width: 46px; min-height: 46px; border-radius: 12px; border: 1px solid var(--line); background: var(--bg2); color: #fff; font-size: 17px; cursor: pointer; }
.squad-search-btn[aria-expanded="true"] { border-color: var(--gold); box-shadow: inset 0 0 0 1px var(--gold); }
.squad-search { width: 100%; min-height: 44px; margin: 0 0 8px; padding: 0 12px; border-radius: 10px; border: 1.5px solid var(--gold); background: var(--bg2); color: #fff; font: 600 15px Inter, sans-serif; }
.squad-search:focus { outline: none; box-shadow: 0 0 0 3px rgba(241, 192, 115, .25); }
.squad-none { color: var(--muted); font-size: 13px; text-align: center; padding: 14px 0; }

/* Mode skins: body[data-mode] is set while drafting and on results.
   1000+ gold (the 27-0 Classic gold), Exactly 1000 red, Team Spin purple, NRLW teal. */
body[data-mode] { --mode: #f1c073; --mode-rgb: 241, 192, 115; }
body[data-mode="exact"] { --mode: #f87171; --mode-rgb: 220, 38, 38; }
body[data-mode="spin"] { --mode: #c4b5fd; --mode-rgb: 124, 92, 255; }
body[data-mode="nrlw"] { --mode: #5eead4; --mode-rgb: 20, 184, 166; }
body[data-mode="wc"] { --mode: #7dd3fc; --mode-rgb: 14, 165, 233; } /* World Cup 200+: sky blue in both games (gold stays CAST Pass's) */
body[data-mode] .site-header { border-bottom-color: var(--mode); }
body[data-mode] main { background: radial-gradient(120% 420px at 50% 0, rgba(var(--mode-rgb), .12), transparent 70%); }
body[data-mode] .scoreboard { border-bottom-color: rgba(var(--mode-rgb), .5); background: linear-gradient(180deg, rgba(var(--mode-rgb), .14), rgba(var(--mode-rgb), .02)), rgba(14, 14, 26, .96); }
body[data-mode] .sb-mode { color: var(--mode); }
body[data-mode] .panel { border-color: rgba(var(--mode-rgb), .22); }
body[data-mode] .panel-title { color: var(--mode); }
body[data-mode="exact"] .sb-mode::before { content: "\1F525  "; }
/* World Cup 200+'s longer name stays on one line (5 Oct 2026: at a 3-digit total "World" sat alone): its column takes the
   room it needs and the "to go" side gives way */
body[data-mode="wc"] .sb-inner { grid-template-columns: minmax(max-content, 1fr) auto 1fr; }
body[data-mode="wc"] .sb-mode { white-space: nowrap; }
/* ---------------- Nation looks (5 Oct 2026, the owner's calls; js/cast-nations.js draws them, as in 27-0) ---------------- */
.wc-look { position: absolute; inset: 0; z-index: -1; border-radius: inherit; overflow: hidden; pointer-events: none; filter: brightness(.95); } /* 5% down: the owner's call */
.wc-look svg { display: block; width: 100%; height: 100%; }
/* A World Cup 200+ card's nation band: the look, the side's name in a dark pill */
.pcard-plate.has-look { position: relative; isolation: isolate; overflow: hidden; }
.pcard-plate.has-look .pcard-club { background: rgba(8, 10, 18, .74); color: #fff; padding: 2px 8px; border-radius: 6px; }
/* Team tiles: the full look on its own main colour, the name and tries white in dark boxes (the owner turned down a faint look) */
.slot.is-filled.has-look { isolation: isolate; background: var(--wc-field, var(--club)); }
.slot.is-filled.has-look .slot-name, .slot.is-filled.has-look .slot-tries { color: #fff; background: rgba(8, 10, 18, .74); border-radius: 5px; padding: 0 4px; }
.slot.is-filled.has-look .slot-code, .slot.is-filled.has-look .slot-abbr { color: #fff; opacity: 1; background: rgba(8, 10, 18, .6); padding: 1px 3px; border-radius: 3px; }
/* The home card's chips */
.mode-wc-strip i.has-look { position: relative; isolation: isolate; overflow: hidden; color: #fff; }
.mode-wc-strip i.has-look span { text-shadow: 0 0 3px rgba(0, 0, 0, .95), 0 1px 2px rgba(0, 0, 0, .9); }
/* Exactly 1000: the pressure lives in the scoreboard's red line only (a slow pulse), never round the whole page */
body[data-mode="exact"] .scoreboard { animation: hardLine 2.6s ease-in-out infinite; }
@keyframes hardLine { 50% { border-bottom-color: #ef4444; box-shadow: 0 6px 18px -8px rgba(239, 68, 68, .7); } }
@media (prefers-reduced-motion: reduce) { body[data-mode="exact"] .scoreboard { animation: none; } }
/* 1000+ owns the Classic gold on its home card too, even when it isn't the one selected */
.mode-card[data-mode="plus"]:not(.is-on) { border-color: #4a3d22; background: linear-gradient(135deg, rgba(241, 192, 115, .14), rgba(241, 192, 115, .02) 70%), var(--card); }
.mode-card[data-mode="plus"]:not(.is-on) .mode-name { color: #f5d49a; }
.mode-card[data-mode="plus"]:not(.is-on) .mode-chip { background: rgba(241, 192, 115, .12); color: #e8c68a; }
#startBtn[data-pick="exact"] { background: linear-gradient(135deg, #b91c1c, #ef4444); color: #fff; box-shadow: 0 6px 22px rgba(220, 38, 38, .35); }
#startBtn[data-pick="spin"] { background: linear-gradient(135deg, #6d28d9, #8b5cf6); color: #fff; box-shadow: 0 6px 22px rgba(124, 92, 255, .35); }
#startBtn[data-pick="nrlw"] { background: linear-gradient(135deg, #0f766e, #14b8a6); color: #fff; box-shadow: 0 6px 22px rgba(20, 184, 166, .3); }
#startBtn[data-pick="wc"] { background: linear-gradient(135deg, #0369a1, #0ea5e9); color: #fff; box-shadow: 0 6px 22px rgba(14, 165, 233, .3); }
/* World Cup 200+ (4 Oct 2026): the big card, the same size as 1000+, with the ten World Cup nations' badges across the top
   (their colours, a third colour as a stripe: no flags until the owner's designs arrive) */
.mode-card.is-wc { border-color: #075985; background: linear-gradient(135deg, rgba(14, 165, 233, .22), rgba(14, 165, 233, .03) 70%), var(--card);
  grid-template-areas: "strip strip strip" "ico name go" "ico line go" "chips chips chips"; padding-top: 18px; }
.mode-card.is-wc .mode-name { color: #bae6fd; }
.mode-card.is-wc .mode-chip { background: rgba(14, 165, 233, .18); color: #bae6fd; }
.mode-card.is-wc.is-on { border-color: #0ea5e9; background: linear-gradient(135deg, rgba(14, 165, 233, .34), rgba(14, 165, 233, .07) 70%), var(--card); box-shadow: 0 0 0 1px #0ea5e9, 0 8px 28px rgba(14, 165, 233, .28); }
.mode-card.is-wc.is-on .mode-name { color: #fff; }
@media (hover: hover) { .mode-card.is-wc:hover { border-color: #0ea5e9; } }
.mode-tag-wc { background: #0284c7; color: #fff; }
.mode-wc-strip { grid-area: strip; display: grid; grid-template-columns: repeat(10, minmax(0, 1fr)); gap: 4px; margin: 0 0 10px; }
.mode-wc-strip i { display: grid; place-items: center; height: 22px; border-radius: 5px; font: 900 9px/1 'Inter', sans-serif; font-style: normal; letter-spacing: .2px;
  color: var(--n2); background: linear-gradient(to bottom, var(--n1) 0 72%, var(--n3) 72% 100%); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .14); }
@media (max-width: 380px) { .mode-wc-strip i { height: 18px; font-size: 7.5px; letter-spacing: 0; } }

/* ---- Legends (bronze, vintage) and Immortals (platinum and gold, the most prestigious look in the game) ----
   Order of prestige: Immortal > Legend > everyone else. The GOAT keeps his own gold. */
.pcard.is-legend, .slot.is-legend, .reveal.is-legend, .rrow.is-legend, .srow.is-legend {
  --leg: linear-gradient(135deg, #3a2210 0%, #8a5a2b 28%, #d9a66b 50%, #8a5a2b 72%, #3a2210 100%);
}
.pcard.is-immortal, .slot.is-immortal, .reveal.is-immortal, .rrow.is-immortal, .srow.is-immortal {
  --imm: linear-gradient(135deg, #8e97a6 0%, #dfe4ec 26%, #ffffff 50%, #dfe4ec 74%, #8e97a6 100%);
}
.pcard-tier { margin-left: auto; flex-shrink: 0; padding: 3px 8px; border-radius: 999px; font-size: 10px; font-weight: 900; letter-spacing: 1.2px; text-transform: uppercase; }

/* Legend */
.pcard.is-legend { border-color: #b07a42; background: linear-gradient(180deg, #2a1c12, var(--card2) 60%); box-shadow: 0 0 0 1px rgba(176, 122, 66, .5), 0 0 16px rgba(176, 122, 66, .25); }
.pcard.is-legend .pcard-plate { background: var(--leg); color: #fff4e2; border-left-color: #2a1608; text-shadow: 0 1px 1px rgba(0, 0, 0, .35); }
.pcard.is-legend .pcard-abbr { background: #2a1608; color: #e7c08f; }
.pcard.is-legend .pcard-name { color: #e7c08f; }
.pcard.is-legend .pcard-tier { background: #2a1608; color: #e7c08f; border: 1px solid rgba(231, 192, 143, .5); }
.slot.is-legend { background: var(--leg); color: #fff4e2; border-color: #e7c08f; box-shadow: 0 0 14px rgba(217, 166, 107, .45); text-shadow: 0 1px 1px rgba(0, 0, 0, .4); }
.slot.is-legend .slot-abbr { color: #2a1608; text-shadow: none; }
.reveal.is-legend { background: var(--leg); color: #fff4e2; border-color: #e7c08f; box-shadow: 0 0 26px rgba(217, 166, 107, .45); }
.rrow.is-legend { border-color: #b07a42; background: linear-gradient(90deg, rgba(217, 166, 107, .2), var(--card2) 70%); }
.rrow.is-legend .rrow-club { background: var(--leg); color: #fff4e2; }
.rrow.is-legend .rrow-name, .rrow.is-legend .rrow-tries, .srow.is-legend .srow-name { color: #e7c08f; }
.srow.is-legend { border-color: #b07a42; }

/* Immortal: platinum with gold trim, a slow shimmer and a glow */
.pcard.is-immortal { border: 2px solid #f1c073; background: radial-gradient(120% 90% at 50% 0%, rgba(255, 255, 255, .14), transparent 60%), linear-gradient(180deg, #23222c, var(--card2) 65%);
  box-shadow: 0 0 0 1px #fff1c4, 0 0 26px rgba(255, 255, 255, .28), 0 0 18px rgba(241, 192, 115, .35); }
.pcard.is-immortal .pcard-plate { background: var(--imm); background-size: 200% 100%; color: #14161d; border-left-color: #f1c073; animation: goatShine 4s linear infinite; }
.pcard.is-immortal .pcard-abbr { background: #14161d; color: #f1c073; }
.pcard.is-immortal .pcard-club { color: #14161d; }
.pcard.is-immortal .pcard-name { color: #ffffff; text-shadow: 0 0 12px rgba(241, 192, 115, .65); }
.pcard.is-immortal .pcard-tier { background: linear-gradient(135deg, #c9953a, #ffe2a8 50%, #c9953a); color: #1a1204; box-shadow: 0 0 10px rgba(241, 192, 115, .6); }
.slot.is-immortal { background: var(--imm); background-size: 200% 100%; color: #14161d; border: 2px solid #f1c073;
  box-shadow: 0 0 0 1px #fff1c4, 0 0 20px rgba(255, 255, 255, .5), 0 0 12px rgba(241, 192, 115, .6); animation: goatShine 4s linear infinite; }
.slot.is-immortal .slot-abbr { color: #9a6a1a; }
.reveal.is-immortal { background: var(--imm); background-size: 200% 100%; color: #14161d; border-color: #f1c073;
  box-shadow: 0 0 0 2px #fff1c4, 0 0 40px rgba(255, 255, 255, .45), 0 0 26px rgba(241, 192, 115, .55); animation: dealIn .3s ease both, goatShine 4s linear infinite; }
.reveal.is-immortal .reveal-num { color: #1a1204; text-shadow: 0 0 18px rgba(241, 192, 115, .9); }
.rrow.is-immortal { border-color: #f1c073; background: linear-gradient(90deg, rgba(255, 255, 255, .16), rgba(241, 192, 115, .1) 40%, var(--card2) 75%); }
.rrow.is-immortal .rrow-club { background: var(--imm); color: #14161d; }
.rrow.is-immortal .rrow-name, .srow.is-immortal .srow-name { color: #ffffff; text-shadow: 0 0 10px rgba(241, 192, 115, .6); }
.rrow.is-immortal .rrow-tries { color: #ffe2a8; }
.srow.is-immortal { border-color: #f1c073; }

/* The offer panel heading when a pack lands */
.panel-head.is-legends, .panel-head.is-immortal { flex-wrap: wrap; row-gap: 2px; }
.panel-head.is-legends .panel-title, .panel-head.is-immortal .panel-title { white-space: nowrap; }
.panel-head.is-legends .panel-title { color: #e7c08f; }
.panel-head.is-immortal .panel-title { background: linear-gradient(90deg, #f1c073, #fff, #f1c073); -webkit-background-clip: text; background-clip: text; color: transparent; }

/* Pack opening */
.pack-intro { position: fixed; inset: 0; z-index: 9000; display: grid; place-items: center; align-content: center; gap: 22px; cursor: pointer; overflow: hidden;
  background: radial-gradient(55% 40% at 50% 40%, rgba(var(--pi-rgb), .3), transparent 70%), rgba(6, 6, 12, .96); animation: piIn .25s ease both; }
.pack-intro.is-legends { --pi-rgb: 217, 166, 107; --pi-edge: #e7c08f; --pi-face: linear-gradient(115deg, #3a2210 0%, #8a5a2b 30%, #e2b77a 45%, #8a5a2b 60%, #3a2210 100%); --pi-ink: #fff4e2; }
.pack-intro.is-immortal { --pi-rgb: 255, 236, 190; --pi-edge: #f1c073; --pi-face: linear-gradient(115deg, #a9b0bd 0%, #e6eaf0 30%, #ffffff 45%, #e6eaf0 60%, #a9b0bd 100%); --pi-ink: #14161d; }
.pack-intro.is-out { animation: piOut .28s ease both; }
.pi-rays { position: absolute; left: 50%; top: 42%; width: 190vmax; height: 190vmax; margin: -95vmax 0 0 -95vmax; opacity: .5;
  background: repeating-conic-gradient(from 0deg, rgba(var(--pi-rgb), .22) 0deg 5deg, transparent 5deg 15deg); animation: piSpin 12s linear infinite;
  -webkit-mask-image: radial-gradient(circle at 50% 50%, #000 0 18%, transparent 42%); mask-image: radial-gradient(circle at 50% 50%, #000 0 18%, transparent 42%); }
.is-immortal .pi-rays { opacity: .8; animation-duration: 8s; }
.pi-card { position: relative; width: min(46vw, 190px); aspect-ratio: 5 / 7; perspective: 800px; animation: piCard 1.1s cubic-bezier(.2, .9, .3, 1.2) both; }
.pi-card-face { position: absolute; inset: 0; display: grid; place-items: center; align-content: center; gap: 10px; border-radius: 16px; border: 3px solid var(--pi-edge);
  background: var(--pi-face); background-size: 250% 100%; color: var(--pi-ink); box-shadow: 0 0 0 2px rgba(0, 0, 0, .4), 0 0 44px rgba(var(--pi-rgb), .7), 0 18px 40px rgba(0, 0, 0, .6);
  animation: piShine 2.4s linear infinite; }
.pi-emblem { font-size: 54px; line-height: 1; filter: drop-shadow(0 2px 6px rgba(0, 0, 0, .35)); }
.pi-card-word { font: italic 900 22px/1 Inter, sans-serif; letter-spacing: 2px; }
.pi-text { position: relative; display: grid; justify-items: center; gap: 6px; text-align: center; padding: 0 20px; animation: piText .5s ease both .45s; }
.pi-kicker { font-size: 12px; font-weight: 900; letter-spacing: 3px; text-transform: uppercase; color: var(--pi-edge); }
.pi-title { font: italic 900 clamp(34px, 9vw, 56px)/1 Inter, sans-serif; text-transform: uppercase; color: #fff; text-shadow: 0 0 24px rgba(var(--pi-rgb), .8); text-wrap: balance; }
.pi-sub { font-size: 15px; font-weight: 700; color: #e6e6f0; max-width: 32ch; text-wrap: balance; }
@keyframes piIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes piOut { to { opacity: 0; transform: scale(1.04); } }
@keyframes piSpin { to { transform: rotate(360deg); } }
@keyframes piCard { 0% { transform: rotateY(90deg) scale(.4); opacity: 0; } 55% { transform: rotateY(-12deg) scale(1.08); opacity: 1; } 100% { transform: none; } }
@keyframes piShine { from { background-position: 100% 0; } to { background-position: -150% 0; } }
@keyframes piText { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .pack-intro, .pi-rays, .pi-card, .pi-card-face, .pi-text, .pcard.is-immortal .pcard-plate, .slot.is-immortal, .reveal.is-immortal { animation: none !important; } }
/* Position chooser (players with more than one position) */
.chooser-card.is-legend { border-color: #b07a42; }
.chooser-card.is-legend .pcard-plate { background: linear-gradient(135deg, #3a2210, #8a5a2b 28%, #d9a66b 50%, #8a5a2b 72%, #3a2210); color: #fff4e2; }
.chooser-card.is-legend .chooser-name { color: #e7c08f; }
.chooser-card.is-immortal { border-color: #f1c073; box-shadow: 0 0 0 1px #fff1c4, 0 0 20px rgba(241, 192, 115, .35); }
.chooser-card.is-immortal .pcard-plate { background: linear-gradient(135deg, #8e97a6, #dfe4ec 26%, #ffffff 50%, #dfe4ec 74%, #8e97a6); color: #14161d; }
.chooser-card.is-immortal .chooser-name { color: #fff; text-shadow: 0 0 10px rgba(241, 192, 115, .6); }

/* ---- Added to an iPhone home screen ----
   The page draws under the clock (viewport-fit=cover), so the sticky header grows by the status bar height and
   everything pinned below it moves down with it; sheets and toasts stay clear of the clock and the home bar.
   env() is 0 in a browser tab, so nothing changes there. */
.site-header { padding-top: calc(10px + env(safe-area-inset-top, 0px)); }
.scoreboard { top: calc(58px + env(safe-area-inset-top, 0px)); }
.toast { bottom: calc(20px + env(safe-area-inset-bottom, 0px)); }
.sheet-body { max-height: calc(100dvh - 24px - env(safe-area-inset-top, 0px)); }
.sheet.is-rules { padding-top: max(16px, env(safe-area-inset-top, 0px)); padding-bottom: max(16px, env(safe-area-inset-bottom, 0px)); }
.sheet.is-rules .sheet-body { max-height: calc(100dvh - max(16px, env(safe-area-inset-top, 0px)) - max(16px, env(safe-area-inset-bottom, 0px))); }
.cp-takeover { padding-top: max(16px, env(safe-area-inset-top, 0px)); padding-bottom: max(16px, env(safe-area-inset-bottom, 0px)); }
@media (min-width: 900px) { .offer-panel { top: calc(150px + env(safe-area-inset-top, 0px)); } }

/* CAST Pass tiers: a guest's wildcards, locked until they sign in free (tap to sign in; they unlock in the same game) */
/* A guest's wildcards (once the CAST tiers are on): they look ready to use, and a tap asks for a free sign-in */
.wc.wc-lock { cursor: pointer; }
.wc.wc-lock .wc-left { color: var(--gold) !important; }

/* The Vault (CAST Pass): the Legend Key under the wildcards in 1000+ */

/* Substitute (CAST Pass): gold; a free profile sees it with the CAST Pass tag */
.wildcards.has-4 { grid-template-columns: repeat(2, 1fr); }
.wc.wc-sub { --wc: #f1c073; --wc-rgb: 241, 192, 115; border-color: #a16207; background: linear-gradient(160deg, rgba(241, 192, 115, .22), rgba(241, 192, 115, .06)); }
.wc.wc-sub .wc-left { color: var(--gold); }
.wc.wc-sub.is-armed { border-color: var(--gold); box-shadow: 0 0 14px rgba(241, 192, 115, .45); }
.wc-pass-tag { display: inline-block; padding: 2px 7px; border-radius: 999px; box-shadow: inset 0 0 0 1px rgba(241, 192, 115, .6); background: rgba(241, 192, 115, .14); font-size: 9.5px !important; letter-spacing: .6px; }
.slot.is-subcan { cursor: pointer; animation: wiggle 1.2s ease-in-out infinite; outline: 3px solid var(--gold); outline-offset: 1px; box-shadow: 0 0 14px rgba(241, 192, 115, .55); }
.slot.is-subfrom { outline: 3px solid #fff; outline-offset: 1px; }
.slot.is-subno { opacity: .35; filter: grayscale(.5); }
.slot.is-subto { cursor: pointer; outline: 3px dashed var(--gold); outline-offset: 1px; animation: wiggle 1.2s ease-in-out infinite; background: rgba(241, 192, 115, .12); font: inherit; color: inherit; }

/* Sound: a small labelled toggle in the footer (off the header, which is full) */
.footer-sound { display: flex; justify-content: center; margin: 0 0 12px; }
.icon-btn.sound-foot { width: auto; height: 36px; padding: 0 14px 0 12px; gap: 8px; border-radius: 999px; font: 800 12px/1 Inter, sans-serif; letter-spacing: .4px; }

/* ---------------- The Daily (js/daily.js): orange, the same as 27-0's Daily (gold stays with CAST Pass) ---------------- */
#dailyCard, #dlyPop, .dly-result { --gold: #fb923c; --gold-dark: #f97316; }
.dly-home { margin: 0 0 16px; }
.dly-card, .dly-result { padding: 14px; border-radius: 16px; border: 1.5px solid rgba(251, 146, 60, .6);
  background: radial-gradient(120% 90% at 0% 0%, rgba(251, 146, 60, .22), transparent 55%), linear-gradient(135deg, #1d1a33, #111020);
  box-shadow: 0 0 0 4px rgba(251, 146, 60, .1), 0 10px 30px rgba(0, 0, 0, .35); }
.dly-card.is-compact { display: grid; grid-template-columns: 44px minmax(0, 1fr) auto; gap: 11px; align-items: center; padding: 7px 12px; cursor: pointer; -webkit-tap-highlight-color: transparent; }
/* Slightly thinner (6 Oct 2026, the owner) */
.dly-card.is-compact .dly-meta, .dly-card.is-compact .dly-reward-chip { margin-top: 3px; }
.dly-card.is-compact:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
.dly-card.is-done { border-color: rgba(251, 146, 60, .45); }
.dly-card.is-won, .dly-result.is-won { border-color: var(--good); box-shadow: 0 0 0 4px rgba(74, 222, 128, .14), 0 10px 30px rgba(0, 0, 0, .35); }
.dly-ico { flex: none; width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; font-size: 22px; background: rgba(251, 146, 60, .12); border: 2px solid rgba(251, 146, 60, .6); }
.dly-mid { display: grid; min-width: 0; }
.dly-kicker { color: var(--gold); font: 900 11px/1.2 var(--font); letter-spacing: 1.2px; text-transform: uppercase; }
.dly-card .dly-kicker { margin-bottom: 2px; }
.dly-title { color: #fff; font: italic 900 16px/1.1 var(--font); text-transform: uppercase; letter-spacing: -.3px; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; }
.dly-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 6px; margin-top: 5px; font: 700 12px/1.2 var(--font); color: #b8b8cc; }
.dly-meta b { color: var(--gold); }
.dly-card.is-won .dly-meta b { color: var(--good); }
.dly-dots { display: inline-flex; gap: 4px; flex: none; }
.dly-dot { width: 15px; height: 15px; border-radius: 50%; border: 1.5px solid #5c5c78; display: inline-grid; place-items: center; font: 900 9px/1 var(--font); font-style: normal; color: #0c0c14; }
.dly-dot.is-done { background: #d6d6e4; border-color: #d6d6e4; }
.dly-dot.is-best { background: var(--gold); border-color: var(--gold); }
.dly-dot.is-win { background: var(--good); border-color: var(--good); }
.dly-dot.is-miss { background: var(--bad); border-color: var(--bad); }
.btn.dly-go-btn { min-height: 40px; padding: 0 16px; font-size: 13px; white-space: nowrap; box-shadow: 0 6px 22px rgba(251, 146, 60, .3); }
.btn.dly-go-btn.btn-ghost { box-shadow: none; }
.btn.dly-go-btn.is-won { background: var(--good); border-color: var(--good); color: #052e14; }
/* The full challenge (tap the card): a sheet from the bottom on phones, a centred pop-up on wider screens */
.dly-pop { position: fixed; inset: 0; z-index: 210; display: flex; align-items: flex-end; justify-content: center; height: 100vh; height: 100dvh; overscroll-behavior: contain; }
.dly-pop[hidden] { display: none; }
.dly-pop-backdrop { position: absolute; inset: 0; background: rgba(0, 0, 0, .72); }
.dly-pop-body { position: relative; width: 100%; max-width: 480px; max-height: calc(100vh - 24px); max-height: calc(100dvh - 24px - env(safe-area-inset-top, 0px)); overflow-y: auto; overscroll-behavior: contain;
  padding: 18px 18px calc(22px + env(safe-area-inset-bottom)); border-radius: 20px 20px 0 0; text-align: center;
  background: radial-gradient(120% 70% at 50% 0%, rgba(251, 146, 60, .16), transparent 60%), linear-gradient(180deg, #1b1830, #0f0d1d);
  border: 2px solid var(--gold); border-bottom: 0; box-shadow: 0 0 0 4px rgba(251, 146, 60, .12), 0 -10px 40px rgba(251, 146, 60, .18); animation: sheetUp .25s ease both; }
.dly-pop-x { position: absolute; top: 12px; right: 12px; width: 36px; height: 36px; border-radius: 50%; border: 1px solid #2a2a4a; background: rgba(255, 255, 255, .04); color: #9a9ab0; font-size: 15px; cursor: pointer; }
@media (hover: hover) { .dly-pop-x:hover { color: var(--gold); border-color: var(--gold); } }
.dly-pop-grab { width: 48px; height: 4px; border-radius: 2px; background: #2a2a4a; margin: 0 auto 16px; }
.dly-pop-ico { width: 64px; height: 64px; margin: 0 auto 10px; display: flex; align-items: center; justify-content: center; font-size: 30px; border-radius: 50%;
  border: 2px solid var(--gold); background: rgba(251, 146, 60, .12); box-shadow: 0 0 0 5px rgba(251, 146, 60, .1), 0 0 24px rgba(251, 146, 60, .4); }
.dly-pop .dly-kicker { font-size: 11px; letter-spacing: 2px; margin-bottom: 8px; }
.dly-pop-title { font: italic 900 26px/1.1 var(--font); text-transform: uppercase; letter-spacing: -.3px; color: #fff; margin: 0 0 8px; text-wrap: balance; }
.dly-pop-story { font-size: 14px; line-height: 1.5; color: var(--muted); margin: 0 0 16px; }
.dly-task { margin: 0 0 16px; padding: 14px 12px 12px; border-radius: 14px; background: rgba(251, 146, 60, .07); border: 1px solid rgba(251, 146, 60, .4); }
.dly-task-line { margin: 0 0 11px; font: 800 18px/1.3 var(--font); color: #fff; text-wrap: balance; }
.dly-task-line b { color: var(--gold); }
.dly-facts { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.dly-facts > div { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 10px 8px; border-radius: 12px; background: rgba(255, 255, 255, .05); border: 1px solid #2a2a44; }
.dly-facts b { font: 900 16px/1.2 var(--font); color: var(--gold); }
.dly-facts span { font: 700 11.5px/1.3 var(--font); color: #a9a9bd; }
/* The Daily reward (29 Sep 2026): a little box in the challenge pop-up and on the result, and a chip on the home card, in
   the green of a completed Daily (gold is CAST Pass's) */
.dly-reward { display: flex; align-items: center; gap: 10px; margin: 10px 0 0; padding: 10px 12px; border-radius: 12px; text-align: left;
  background: rgba(74, 222, 128, .08); border: 1px dashed rgba(74, 222, 128, .55); }
.dly-reward > span:not(.dly-reward-ico) { display: grid; gap: 2px; min-width: 0; flex: 1; }
.dly-reward-ico { flex: none; font-size: 22px; line-height: 1; }
.dly-reward b { color: #fff; font: 900 14px/1.25 var(--font); }
.dly-reward small { color: #b8e8c8; font: 700 11.5px/1.35 var(--font); }
.dly-nw { white-space: nowrap; } /* a score kept whole ("30-24") */
.dly-reward small.dly-reward-streak { margin-top: 3px; color: #fdba74; } /* the streak's next reward (orange, like the streak) */
.dly-reward.is-earned { margin: 10px 0 12px; border-style: solid; background: rgba(74, 222, 128, .12); flex-wrap: wrap; }
.dly-reward .dly-claim { flex: 1 1 100%; margin-top: 4px; }
.dly-reward-chip { justify-self: start; margin-top: 5px; padding: 2px 8px; border-radius: 999px; background: rgba(74, 222, 128, .12); border: 1px solid rgba(74, 222, 128, .45);
  color: #b8e8c8; font: 800 11px/1.5 var(--font); white-space: nowrap; }
.dly-reward-chip.is-won { color: var(--good); }
.dly-also { margin: -8px 0 16px; color: #8d8da5; font: 700 12px/1.4 var(--font); }
.dly-goes-h { font: 900 11px/1 var(--font); letter-spacing: 1.2px; text-transform: uppercase; color: var(--dim); margin: 0 0 8px; }
.dly-pop .dly-goes { margin: 0 0 14px; }
.dly-pop .dly-done { margin: 0 0 12px; }
.dly-rank { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 4px 6px; width: 100%; min-height: 46px; margin: 0 0 10px; padding: 10px 12px; border-radius: 12px;
  border: 1px solid rgba(251, 146, 60, .55); background: rgba(251, 146, 60, .12); color: #fff; font: 700 14px/1.25 var(--font); cursor: pointer; -webkit-tap-highlight-color: transparent; }
.dly-rank b { color: var(--gold); font-size: 17px; line-height: 1; }
.dly-rank small { color: var(--muted); font-size: 12px; font-weight: 600; }
.dly-rank-t { text-align: center; }
.dly-rank small, .dly-rank-a { white-space: nowrap; } /* a wrap falls between "Not ranked yet today" and "See the leaderboard ›" */
.dly-rank-go { color: var(--gold); font-size: 18px; line-height: 1; transition: transform .15s; }
@media (hover: hover) { .dly-rank:hover { background: rgba(251, 146, 60, .2); border-color: var(--gold); } .dly-rank:hover .dly-rank-go { transform: translateX(3px); } }
.dly-pop-acts { display: grid; gap: 10px; margin-top: 4px; }
.dly-pop-acts .btn { width: 100%; margin: 0; }
.dly-pop-acts .btn-primary { box-shadow: 0 6px 22px rgba(251, 146, 60, .3); }
.dly-pop-row { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 10px; }
.dly-pop-row .btn { min-height: 46px; padding: 0 10px; font-size: 13.5px; }
@media (min-width: 720px) {
  .dly-pop { align-items: center; padding: 24px; }
  .dly-pop-body { max-width: 440px; padding: 28px 28px 24px; border-radius: 22px; border-bottom: 2px solid var(--gold); }
  .dly-pop-grab { display: none; }
}
.dly-goes { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin: 12px 0; }
.dly-go { display: grid; justify-items: center; gap: 2px; padding: 8px 4px; border-radius: 10px; background: rgba(255, 255, 255, .04); border: 1px solid var(--line); }
.dly-go b { color: #fff; font: 900 16px/1 var(--font); font-variant-numeric: tabular-nums; }
.dly-go small { color: var(--dim); font: 800 10px/1 var(--font); letter-spacing: .6px; text-transform: uppercase; }
.dly-go.is-win { border-color: rgba(74, 222, 128, .6); background: rgba(74, 222, 128, .08); }
.dly-go.is-win b { color: var(--good); }
.dly-go.is-left b { color: var(--bad); }
/* The main button (or the day's done line) across the top, the rest side by side in even columns */
.dly-actions { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.dly-actions .btn { flex: 1 1 0; width: auto; min-width: 0; margin: 0; }
.dly-actions .btn-primary, .dly-done { flex: 1 1 100%; }
.dly-done { color: var(--muted); font-size: 12.5px; }
.dly-result { margin: 0 0 16px; text-align: center; }
.dly-score { margin: 6px 0 2px; color: #fff; font: 900 40px/1 var(--font); font-variant-numeric: tabular-nums; }
.dly-score small { font-size: 16px; color: var(--muted); }
.dly-best { color: var(--muted); font-size: 13px; }
.dly-best b { color: #fff; }
/* Themed Daily result: the day's two rules, ticked or crossed */
.dly-rules { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px 12px; margin: 2px 0 4px; font-size: 12.5px; font-weight: 800; }
.dly-rules .is-ok { color: #86efac; }
.dly-rules .is-no { color: #fca5a5; }

/* Five tools (1000+ with a CAST Profile): Reroll, Reveal and Remove across the top, Substitute and the Legend Key below.
   Icons sit above one-word names, so every tile in a row is the same height */
.wildcards.has-5 { grid-template-columns: repeat(6, minmax(0, 1fr)); }
.wildcards.has-5 > .wc { grid-column: span 2; }
.wildcards.has-5 > .wc-sub, .wildcards.has-5 > .wc-key { grid-column: span 3; }
.wildcards.has-5 .wc-label { flex-direction: column; gap: 3px; flex-wrap: nowrap; white-space: nowrap; }
.wildcards.has-5 .wc-ico { font-size: 17px; line-height: 1; }
/* The Legend Key (CAST Pass gold) */
.wc-key { border-color: #b45309; background: linear-gradient(160deg, rgba(241, 192, 115, .2), rgba(180, 83, 9, .06)); }
.wc-key .wc-left { color: #f1c073; }
.wc-key.is-ready { box-shadow: inset 0 0 0 1px rgba(241, 192, 115, .45); }
.wc-key.is-used { opacity: .8; cursor: default; } /* still readable: it counts down to the next key */
/* Under the offer while the key is ready: swap these three for a Legends Pick */
.key-swap { display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%; margin: 12px 0 0; padding: 11px 14px; box-sizing: border-box;
  border-radius: 12px; border: 1.5px dashed rgba(241, 192, 115, .6); background: rgba(241, 192, 115, .06); color: #f1c073; font: 800 13.5px/1.2 var(--font); cursor: pointer; }
@media (hover: hover) { .key-swap:hover { background: rgba(241, 192, 115, .14); border-style: solid; } }

/* No lonely words (the user's rule, 28 Sep 2026): a word never sits on a line by itself. Every block wraps "pretty" (its
   last line is never one lonely word) and headings are balanced. text-wrap-style is inherited, so this reaches all copy. */
html { text-wrap-style: pretty; }
/* Short copy (nearly all of it) is balanced: its lines come out even, so one word is never left alone, and older iPhones
   understand it. Chrome's "pretty" alone still leaves a lonely word on some two-line titles */
h1, h2, h3, h4, h5, p, li, dt, dd, small, label, button, figcaption, summary, td, th, div, b, strong, span, em { text-wrap-style: balance; }
/* Long reads keep "pretty" (balancing is for short blocks: Chrome skips it past six lines) */
.doc p, .doc li, .dly-pop-story { text-wrap-style: pretty; } /* (a Daily's write-up can run past six lines) */

/* The top bar's tabs sit close on small phones, so the fullest bar (Stats, Rankings, Shop, Friends, Admin, Profile) fits */
@media (max-width: 400px) { .header-nav { gap: 2px; } .site-header { padding-left: 12px; padding-right: 12px; } }

/* ---------------- Home, 29 Sep 2026 (the user's call: less clutter) ---------------- */
/* 1000+ is the main mode: one big card with a clear Play button */
.mode-card.mode-main { padding: 18px 18px 16px; column-gap: 14px; grid-template-columns: auto 1fr; grid-template-areas: "ico name" "ico line" "chips chips" "go go"; }
.mode-main .mode-ico { font-size: 38px; align-self: center; }
.mode-main .mode-name { font-size: 32px; }
.mode-main .mode-line { font-size: 14.5px; }
.mode-main .mode-chips { margin-top: 12px; }
.mode-main .mode-go { justify-self: stretch; margin: 12px 0 0; padding: 13px 12px; border-radius: 12px; background: var(--gold); color: #111; font-size: 15px; letter-spacing: 1px; text-align: center; }
@media (hover: hover) { .mode-main:hover .mode-go { background: #f7d49a; } }
/* The other modes: three small buttons in a row, each in its own colour with one tag */
.mode-more-kicker { margin: 10px 2px 0; font: 900 11px/1 'Inter', sans-serif; letter-spacing: 1.6px; text-transform: uppercase; color: var(--muted); }
.mode-more { display: grid; grid-template-columns: repeat(var(--n, 3), minmax(0, 1fr)); gap: 8px; }
.mode-mini { display: grid; justify-items: center; align-content: center; gap: 5px; min-height: 96px; padding: 12px 4px 10px; border-radius: 14px; border: 1px solid #2a2a44;
  background: var(--card); color: #fff; font: inherit; text-align: center; cursor: pointer; -webkit-tap-highlight-color: transparent; transition: transform .12s ease, border-color .15s ease; }
.mode-mini:active { transform: scale(.97); }
.mm-ico { font-size: 24px; line-height: 1; }
.mm-name { font-size: clamp(12.5px, 3.6vw, 16px); font-weight: 900; line-height: 1.1; white-space: nowrap; }
.mm-tag { font-size: clamp(9.5px, 2.6vw, 11px); /* stays small on phones: 'Know Your Squads' can't fit a third-width tile at 11px (4 Oct 2026) */ font-weight: 800; letter-spacing: .2px; line-height: 1.2; color: #a8a8c0; white-space: nowrap; }
.mode-mini.is-exact { border-color: #5a1f26; background: linear-gradient(160deg, rgba(220, 38, 38, .2), rgba(220, 38, 38, .03) 75%), var(--card); }
.mode-mini.is-exact .mm-name { color: #fca5a5; } .mode-mini.is-exact .mm-tag { color: #f87171; }
.mode-mini.is-spin { border-color: #3b2f6b; background: linear-gradient(160deg, rgba(124, 92, 255, .2), rgba(124, 92, 255, .03) 75%), var(--card); }
.mode-mini.is-spin .mm-name { color: #c4b5fd; } .mode-mini.is-spin .mm-tag { color: #a78bfa; }
.mode-mini.is-nrlw { border-color: #134e4a; background: linear-gradient(160deg, rgba(20, 184, 166, .2), rgba(20, 184, 166, .03) 75%), var(--card); }
.mode-mini.is-nrlw .mm-name { color: #5eead4; } .mode-mini.is-nrlw .mm-tag { color: #2dd4bf; }
.mode-mini.is-wc { border-color: #075985; background: linear-gradient(160deg, rgba(14, 165, 233, .22), rgba(14, 165, 233, .03) 75%), var(--card); }
.mode-mini.is-wc .mm-name { color: #bae6fd; } .mode-mini.is-wc .mm-tag { color: #7dd3fc; }
.mode-mini.is-wc.is-on { border-color: #0ea5e9; box-shadow: 0 0 0 1px #0ea5e9; }
@media (hover: hover) { .mode-mini.is-exact:hover { border-color: #b91c1c; } .mode-mini.is-spin:hover { border-color: #7c5cff; } .mode-mini.is-nrlw:hover { border-color: #14b8a6; } .mode-mini.is-wc:hover { border-color: #0ea5e9; } }
.mode-mini.is-exact.is-on { border-color: #ef4444; box-shadow: 0 0 0 1px #ef4444; }
.mode-mini.is-spin.is-on { border-color: #8b5cf6; box-shadow: 0 0 0 1px #8b5cf6; }
.mode-mini.is-nrlw.is-on { border-color: #14b8a6; box-shadow: 0 0 0 1px #14b8a6; }

/* The New Game tab: only mid-draft (it looks like every other top bar tab) */
.header-nav .nav-new { display: none; }
body[data-screen="draft"] .header-nav .nav-new { display: inline-flex; }
.btn-quiet { background: transparent; border-color: transparent; color: #b8b8cc; margin-top: 4px; }
@media (hover: hover) { .btn-quiet:hover { color: #fff; } }

/* The main card's Play Now (29 Sep 2026, the user's call: it looked flat): a deeper gold with a lit top edge, a soft glow,
   a slow shine across it and a press. Both games have the same button */
@keyframes playShine { 0%, 62% { transform: translateX(-120%) skewX(-18deg); } 100% { transform: translateX(260%) skewX(-18deg); } }
.mode-card.mode-main .mode-go { position: relative; overflow: hidden; display: flex; align-items: center; justify-content: center; gap: 10px;
  padding: 15px 12px; border-radius: 13px; border: 0; font-size: 16.5px; font-weight: 900; letter-spacing: 1.4px; color: #1a1206;
  background: linear-gradient(180deg, #ffe7b3 0%, #f5c878 45%, #e0a849 100%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .7), inset 0 -2px 0 rgba(120, 72, 10, .35), 0 8px 22px rgba(241, 192, 115, .35), 0 0 0 1px rgba(255, 226, 168, .5); }
.mode-card.mode-main .mode-go i { font-style: normal; font-size: 13px; transition: transform .15s ease; }
.mode-card.mode-main .mode-go::after { content: ""; position: absolute; top: -20%; bottom: -20%; left: 0; width: 38%; pointer-events: none;
  background: linear-gradient(90deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, .55), rgba(255, 255, 255, 0)); animation: playShine 3.6s ease-in-out infinite; }
@media (hover: hover) { .mode-card.mode-main:hover .mode-card.mode-main .mode-go { filter: brightness(1.06); } .mode-card.mode-main:hover .mode-card.mode-main .mode-go i { transform: translateX(3px); } }
.mode-card.mode-main:active .mode-card.mode-main .mode-go { transform: translateY(1px); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .6), inset 0 -1px 0 rgba(120, 72, 10, .35), 0 4px 12px rgba(241, 192, 115, .3); }
@media (prefers-reduced-motion: reduce) { .mode-card.mode-main .mode-go::after { animation: none; display: none; } }

/* ---------------- The GOAT and Hard Mode wildcards (29 Sep 2026) ---------------- */
/* Six tools (3 wildcards, Substitute, Legend Key, the GOAT): two even rows of three */
.wildcards.has-6 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.wildcards.has-6 .wc-label { flex-direction: column; gap: 3px; flex-wrap: nowrap; white-space: nowrap; }
.wildcards.has-5 > .wc:nth-child(n+4) { grid-column: span 3; }
/* The GOAT tile: his gold, shining while he's ready (the same gradient as his player card) */
.wc.wc-goat, .confirm-ico.goat-ico, .btn.btn-goat { --goat: linear-gradient(135deg, #7a5a12 0%, #f1c073 30%, #fff1c4 50%, #f1c073 70%, #7a5a12 100%); }
.wc.wc-goat { border-color: var(--gold); color: #1a1204; background: var(--goat); background-size: 200% 100%; }
.wc.wc-goat .wc-left { color: #3a2a08; font-weight: 900; }
.wc.wc-goat.is-ready { animation: goatShine 3s linear infinite; box-shadow: 0 0 16px rgba(241, 192, 115, .45); }
.wc.wc-goat:disabled { opacity: .5; animation: none; }
@media (prefers-reduced-motion: reduce) { .wc.wc-goat.is-ready { animation: none; } }
.confirm-ico.goat-ico { background: var(--goat); border-color: #fff1c4; }
.btn.btn-goat { background: var(--goat); background-size: 200% 100%; color: #1a1204; border-color: #fff1c4; animation: goatShine 3s linear infinite; }
@media (prefers-reduced-motion: reduce) { .btn.btn-goat { animation: none; } }
/* Hard Mode (Exactly 1000): the note under its paid-only wildcards */
.wc-paid-note { margin: -4px 0 10px; text-align: center; font-size: 11.5px; font-weight: 700; color: #fca5a5; }

/* Dally M promo (30 Sep 2026, js/cast-promo.js; the owner's pick: Dally M navy): the Team of the Year on navy cards with
   an icy edge and a moving shine, the Dally M Medal winner with a gold edge. Pick cards, the 13 and the reveal */
@keyframes plSheen { 0% { background-position: -160% 0; } 60%, 100% { background-position: 260% 0; } }
.pcard.is-plat { position: relative; border-color: #bfdbfe; background: linear-gradient(170deg, #12307a, #0a1a45 70%); box-shadow: 0 0 0 1px rgba(191, 219, 254, .35), 0 6px 22px rgba(59, 130, 246, .22); }
.pcard.is-plat::after { content: ''; position: absolute; inset: 0; pointer-events: none; border-radius: inherit; background: linear-gradient(100deg, transparent 35%, rgba(255, 255, 255, .16) 50%, transparent 65%); background-size: 250% 100%; animation: plSheen 3s ease-in-out infinite; }
.pcard.is-plat .pcard-plate { background: linear-gradient(135deg, #0a1a45, #1e3a8a); color: #fff; border-left-color: #bfdbfe; }
.pcard.is-plat .pcard-abbr { background: #bfdbfe; color: #0a1a45; }
.pcard.is-plat .pcard-name { color: #fff; }
.pcard.is-plat .pcard-span { color: #bfdbfe; }
.pcard-tier.pcard-pm { background: #bfdbfe; color: #0a1a45; letter-spacing: .6px; }
.pcard.is-medal { border-color: #f1c073; box-shadow: 0 0 0 1px rgba(241, 192, 115, .55), 0 6px 24px rgba(241, 192, 115, .25); }
.pcard.is-medal .pcard-plate { border-left-color: #f1c073; }
.pcard.is-medal .pcard-tier.pcard-pm { background: #f1c073; color: #1a1204; }
.slot.is-plat { background: linear-gradient(135deg, #0a1a45, #1e3a8a); color: #fff; border-color: #bfdbfe; box-shadow: 0 0 14px rgba(147, 197, 253, .45); }
.slot.is-plat .slot-abbr { color: #bfdbfe; }
.slot.is-medal { border-color: #f1c073; box-shadow: 0 0 16px rgba(241, 192, 115, .55); }
.slot.is-medal .slot-abbr { color: #f1c073; }
.reveal.is-plat { background: linear-gradient(135deg, #0a1a45, #1e3a8a); color: #fff; border-color: #bfdbfe; box-shadow: 0 0 26px rgba(147, 197, 253, .45); }
.reveal.is-medal { border-color: #f1c073; box-shadow: 0 0 28px rgba(241, 192, 115, .5); }
@media (prefers-reduced-motion: reduce) { .pcard.is-plat::after { animation: none; } }
/* The Grand Final promo, 2026 Premiers (4 Oct 2026, js/cast-promo.js; the owner's calls): a premier keeps his club's
   colours with a trophy-gold foil edge (gold, like proper winners: the owner's call), a moving shine, a "2026 Premiers"
   tag and the trophy after his name; the Clive Churchill or Karyn Murphy Medal winner's edge is holographic. Pick
   cards, the 13 and the reveal */
.pcard.is-prem { position: relative; border: 2px solid transparent; box-shadow: 0 0 0 1px rgba(246, 210, 122, .22), 0 6px 22px rgba(246, 210, 122, .14);
  background: linear-gradient(var(--card2), var(--card2)) padding-box, linear-gradient(135deg, #8a5a14, #f6d27a 30%, #fff1c1 48%, #d4a23c 66%, #8a5a14) border-box; }
.pcard.is-prem::after { content: ''; position: absolute; inset: 0; pointer-events: none; border-radius: inherit; background: linear-gradient(100deg, transparent 35%, rgba(255, 255, 255, .14) 50%, transparent 65%); background-size: 250% 100%; animation: plSheen 3s ease-in-out infinite; }
.pcard.is-prem .pcard-tier.pcard-pm { background: linear-gradient(135deg, #d4a23c, #fff1c1 50%, #d4a23c); color: #1a1204; }
.pcard.is-prem.is-medal { box-shadow: 0 0 0 1px rgba(240, 171, 252, .45), 0 6px 24px rgba(240, 171, 252, .25);
  background: linear-gradient(var(--card2), var(--card2)) padding-box, linear-gradient(135deg, #c7d2fe, #f0abfc 30%, #99f6e4 55%, #fde68a 80%, #c7d2fe) border-box; }
.pcard.is-prem.is-medal .pcard-tier.pcard-pm { background: linear-gradient(115deg, #c7d2fe, #f0abfc, #99f6e4, #fde68a); color: #1a1204; }
.slot.is-prem { border-color: #ffd978; box-shadow: inset 0 4px 0 var(--club-accent), 0 0 14px rgba(246, 210, 122, .5); }
.slot.is-prem.is-medal { border-color: #f0abfc; box-shadow: inset 0 4px 0 var(--club-accent), 0 0 16px rgba(240, 171, 252, .55); }
.reveal.is-prem { border-color: #ffd978; box-shadow: 0 0 26px rgba(246, 210, 122, .45); }
.reveal.is-prem.is-medal { border-color: #f0abfc; box-shadow: 0 0 28px rgba(240, 171, 252, .5); }
@media (prefers-reduced-motion: reduce) { .pcard.is-prem::after { animation: none; } }

/* ---------------- The Immortal Pick (bought, 2 Oct 2026; shared with 27-0) ---------------- */
/* Seven tools (3 wildcards, Substitute, Legend Key, the GOAT, the Immortal Pick): rows of three, the last across the row */
.wildcards.has-7 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.wildcards.has-7 .wc-label { flex-direction: column; gap: 3px; flex-wrap: nowrap; white-space: nowrap; }
.wildcards.has-7 > .wc:last-child { grid-column: span 3; }
.wildcards.has-7 > .wc:last-child .wc-label { flex-direction: row; gap: 6px; }
/* The tile: the Immortal look (charcoal, a gold edge, a moving platinum tag) */
.wc.wc-imm { border-color: #f1c073; color: #fff; background: radial-gradient(120% 90% at 50% 0%, rgba(255, 255, 255, .12), transparent 60%), linear-gradient(160deg, #2b2a33, #121219 85%); }
.wc.wc-imm .wc-left { color: #ffe2a8; font-weight: 900; }
.wc.wc-imm.is-have .wc-left { display: inline-block; align-self: center; padding: 2px 8px; border-radius: 999px; color: #14161d;
  background: linear-gradient(135deg, #8e97a6 0%, #dfe4ec 26%, #ffffff 50%, #dfe4ec 74%, #8e97a6 100%); background-size: 200% 100%; animation: goatShine 4s linear infinite; }
.wc.wc-imm.is-ready { box-shadow: 0 0 16px rgba(241, 192, 115, .4); }
.wc.wc-imm:disabled { opacity: .5; }
@media (prefers-reduced-motion: reduce) { .wc.wc-imm.is-have .wc-left { animation: none; } }
/* World Legends (World Cup 200+, 8 Oct 2026, the owner's calls): his nation's look stays the star, with a bold gold
   frame that glows and a shine across it ("they also need a golder border ... to show how special"); the tag says Legend so
   his nation's name still fits ("remove international from here and just have legend") */
.pcard.is-ileg { position: relative; border: 3px solid #f1c073; box-shadow: 0 0 0 1px #fff1c4, 0 0 20px rgba(241, 192, 115, .55), 0 0 42px rgba(241, 192, 115, .22); animation: dealIn .35s ease both, ilPulse 2.4s ease-in-out .4s infinite; }
.pcard.is-ileg::after { content: ''; position: absolute; top: -60%; left: -80%; width: 40%; height: 220%; transform: rotate(20deg); pointer-events: none; background: linear-gradient(90deg, transparent, rgba(255, 241, 196, .3), transparent); animation: ilShine 3.4s ease-in-out 1s infinite; }
@keyframes ilPulse { 0%, 100% { box-shadow: 0 0 0 1px #fff1c4, 0 0 16px rgba(241, 192, 115, .45), 0 0 34px rgba(241, 192, 115, .18); } 50% { box-shadow: 0 0 0 1px #fff1c4, 0 0 28px rgba(241, 192, 115, .78), 0 0 56px rgba(241, 192, 115, .32); } }
@keyframes ilShine { 0% { left: -80%; } 55%, 100% { left: 150%; } }
.pcard.is-ileg .pcard-plate { border-left-color: #f1c073; }
.pcard.is-ileg .pcard-name { color: #fff; text-shadow: 0 0 10px rgba(241, 192, 115, .55); }
.pcard-tier.pcard-il { background: linear-gradient(135deg, #c9953a, #ffe2a8 50%, #c9953a); color: #1a1204; box-shadow: 0 0 10px rgba(241, 192, 115, .5); letter-spacing: .5px; }
.slot.is-ileg { border: 3px solid #f1c073; box-shadow: 0 0 0 1px #fff1c4, 0 0 16px rgba(241, 192, 115, .6); }
.reveal.is-ileg { border-color: #f1c073; box-shadow: 0 0 0 2px rgba(255, 226, 168, .6), 0 0 28px rgba(241, 192, 115, .45); }
.rrow.is-ileg { border-color: #f1c073; box-shadow: inset 3px 0 0 #f1c073, 0 0 12px rgba(241, 192, 115, .3); }
.srow.is-ileg, .chooser-card.is-ileg { border-color: #f1c073; }
.panel-head.is-ilegend { flex-wrap: wrap; row-gap: 2px; }
.panel-head.is-ilegend .panel-title { white-space: nowrap; color: #ffe2a8; }
.wc.wc-ileg { border-color: #f1c073; color: #fff; background: radial-gradient(120% 90% at 50% 0%, rgba(255, 255, 255, .1), transparent 60%), linear-gradient(160deg, #1d1b26, #0b0a11 85%); }
.wc.wc-ileg .wc-label { white-space: normal; text-align: center; }
.wc.wc-ileg .wc-left { color: #ffe2a8; font-weight: 900; }
.wc.wc-ileg.is-ready { box-shadow: 0 0 16px rgba(241, 192, 115, .4); }
.wc.wc-ileg:disabled { opacity: .5; }
@media (prefers-reduced-motion: reduce) { .pcard.is-ileg, .pcard.is-ileg::after { animation: none; } }
/* Under the three: go back to the offer you had */
.imm-back { display: flex; flex-direction: column; align-items: center; gap: 4px; margin: 12px 0 0; text-align: center; }
.imm-back small { color: #ffe2a8; font-size: 11.5px; font-weight: 700; }

/* Exactly 1000's shot clock (2 Oct 2026): 15 seconds a pick, a bar that runs down, red for the last five */
.pick-clock { position: relative; display: flex; align-items: center; justify-content: flex-end; height: 22px; margin: 0 0 10px; padding: 0 8px; border-radius: 999px; overflow: hidden;
  background: rgba(239, 68, 68, .12); border: 1px solid rgba(239, 68, 68, .35); }
.pick-clock i { position: absolute; left: 0; top: 0; bottom: 0; width: 100%; background: linear-gradient(90deg, #b91c1c, #ef4444); opacity: .55; transition: width .2s linear; }
.pick-clock b { position: relative; font: 900 12px/1 Inter, sans-serif; color: #fff; font-variant-numeric: tabular-nums; letter-spacing: .3px; }
.pick-clock.is-low { border-color: #fca5a5; animation: pickClockPulse .6s ease-in-out infinite alternate; }
.pick-clock.is-low i { opacity: .85; }
@keyframes pickClockPulse { to { box-shadow: 0 0 14px rgba(248, 113, 113, .6); } }
@media (prefers-reduced-motion: reduce) { .pick-clock i { transition: none; } .pick-clock.is-low { animation: none; } }

/* A Daily go: today's challenge under the scoreboard's bar, always in view, and a tap opens the whole challenge
   (2 Oct 2026: the owner forgot his part way through a go). The Daily's orange, like its card */
.sb-daily { grid-column: 1 / -1; display: grid; grid-template-columns: 1fr auto; align-items: center; column-gap: 10px; row-gap: 2px; width: 100%; margin: 2px 0 0;
  padding: 7px 12px; border-radius: 10px; border: 1px solid rgba(251, 146, 60, .45); background: rgba(251, 146, 60, .1); color: #fff; font: inherit; text-align: left; cursor: pointer; }
.sb-daily-k { grid-column: 1; font: 900 10.5px/1.2 Inter, sans-serif; letter-spacing: .8px; text-transform: uppercase; color: #fb923c; }
.sb-daily-t { grid-column: 1; font: 700 13px/1.3 Inter, sans-serif; color: #f4f4f8; text-wrap: pretty; }
.sb-daily-t b { color: #fff; font-weight: 900; }
.sb-daily-i { grid-column: 2; grid-row: 1 / span 2; font-size: 18px; line-height: 1; color: #fb923c; }
@media (hover: hover) { .sb-daily:hover { background: rgba(251, 146, 60, .16); } }
/* World Cup 200+'s big card (4 Oct 2026): the same layout as 1000+'s, with the nations across the top, and its Play button in
   sky blue (gold stays with Classic and CAST Pass) */
.mode-card.mode-main.is-wc { grid-template-areas: "strip strip" "ico name" "ico line" "chips chips" "go go"; padding-top: 20px; }
.mode-card.mode-main.is-wc .mode-go { background: linear-gradient(180deg, #0ea5e9, #0369a1); color: #fff; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .35), 0 4px 14px rgba(14, 165, 233, .3); }
@media (hover: hover) { .mode-card.mode-main.is-wc:hover .mode-go { background: linear-gradient(180deg, #38bdf8, #0284c7); } }
/* A Daily missed: every go used without a win (8 Oct 2026, the owner: "say missed out or in red ... more obvious") */
.dly-reward.is-missed { background: rgba(248, 113, 113, .08); border: 1px solid rgba(248, 113, 113, .6); }
.dly-reward.is-missed b { color: #f87171; }
.dly-reward.is-missed small:not(.dly-reward-streak) { color: #fecaca; }
.dly-reward-chip.is-missed { color: #fca5a5; background: rgba(248, 113, 113, .12); border-color: rgba(248, 113, 113, .55); }

/* 4000 GOALS: an oval, not a rectangle (centre square and circle, 50 m arcs at each end). The spots keep their size;
   the oval's padding keeps the top and bottom lines inside the curve */
.pitch {
  padding: 38px 22px; border-radius: 50% / 13%;
  background:
    radial-gradient(circle at 50% 50%, transparent 0 34px, rgba(255, 255, 255, .14) 34px 36px, transparent 36px),
    radial-gradient(ellipse 46% 20% at 50% 0%, transparent 0 98%, rgba(255, 255, 255, .12) 98% 100%, transparent 100%),
    radial-gradient(ellipse 46% 20% at 50% 100%, transparent 0 98%, rgba(255, 255, 255, .12) 98% 100%, transparent 100%),
    repeating-linear-gradient(180deg, rgba(255, 255, 255, .025) 0 36px, transparent 36px 72px),
    linear-gradient(180deg, #123a1e, #0b2512);
  border: 2px solid #2f6b3c;
}
.pitch-row:nth-child(2) { margin-bottom: 6px; }
.pitch-row:nth-child(4) { margin-bottom: 6px; }
/* The end rows sit where the oval curves in (12 Oct 2026, the owner: the corners stuck out over the edge), so they
   draw in from the sides and keep every spot inside the line */
.pitch-row:first-child, .pitch-row:last-child { padding: 0 6%; }
.pitch-row:first-child .slot, .pitch-row:last-child .slot { min-width: 0; }