:root {
  /* dark theme (also the fallback) */
  --bg: #07261d; --bg2: #0b3d2e; --panel: #0f4a38; --panel2: #135842; --line: rgba(255,255,255,.12);
  --text: #f2fbf6; --muted: #9dc2b1; --accent: #c8ff3d; --accent2: #ffd23f; --bad: #ff5a5f; --good: #3ddc84;
  --hi: #c8ff3d; --hi2: #ffd23f; --link: #c8ff3d; --input: var(--input); --inset: rgba(0,0,0,.22); --modal: #0b3d2e;
  --bg-grad: #145c44; --edge: rgba(0,0,0,.35); --shadow: 0 10px 30px rgba(0,0,0,.35);
  --logo1: #c8ff3d; --logo2: #ffffff; --logo-shadow: #0a2a1f; --toast-bg: #ffffff; --toast-text: #0a2a1f; --nav: rgba(7,38,29,.92);
  --G: #ffb020; --D: #3aa0ff; --M: #3ddc84; --F: #ff5a8a;
  --r: 18px;
  font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
  color-scheme: dark;
}
:root[data-theme="light"] {
  --bg: #eef2ee; --bg2: #ffffff; --panel: #ffffff; --panel2: #f3f7f3; --line: rgba(11,61,46,.12);
  --text: #10261d; --muted: #5d7469; --hi: #16803c; --hi2: #b7791f; --link: #16803c; --input: #ffffff; --inset: rgba(11,61,46,.06); --modal: #ffffff;
  --bg-grad: #ffffff; --edge: rgba(11,61,46,.18); --shadow: 0 10px 30px rgba(11,61,46,.15);
  --logo1: #0b3d2e; --logo2: #16803c; --logo-shadow: #c8ff3d; --toast-bg: #10261d; --toast-text: #ffffff; --nav: rgba(255,255,255,.94);
  color-scheme: light;
}
* { box-sizing: border-box; }
html, body { margin: 0; background: radial-gradient(1200px 600px at 50% -200px, var(--bg-grad), var(--bg)) fixed, var(--bg); color: var(--text); }
body { min-height: 100vh; -webkit-tap-highlight-color: transparent; }
a { color: var(--link); }
#app { max-width: 560px; margin: 0 auto; padding: 12px 16px calc(40px + env(safe-area-inset-bottom)); }
h2, h3, .logo, .counter-num, .result-score, .result-total { font-family: Oswald, Impact, sans-serif; letter-spacing: .5px; }
h3 { margin: .4em 0; }
.muted { color: var(--muted); font-size: .9rem; }
.center { text-align: center; }

/* buttons + inputs */
.btn { appearance: none; border: 0; border-radius: 12px; padding: 12px 18px; font: 700 1rem Inter, sans-serif; background: var(--accent); color: #0a2a1f; cursor: pointer; text-decoration: none; display: inline-flex; align-items: center; justify-content: center; gap: 6px; transition: transform .1s, filter .2s; }
.btn:active { transform: scale(.97); }
.btn:disabled { filter: grayscale(1) brightness(.6); }
.btn.ghost { background: transparent; color: var(--text); border: 1px solid var(--line); }
.btn.small { padding: 7px 12px; font-size: .85rem; }
.btn.big { padding: 16px 22px; font-size: 1.15rem; width: 100%; }
.btn.spin { font-family: Oswald, sans-serif; font-size: 1.6rem; letter-spacing: 2px; background: linear-gradient(180deg, #e6ff8a, var(--accent)); box-shadow: 0 6px 0 #7fae13, 0 10px 30px rgba(200,255,61,.25); }
.btn.spin:active { transform: translateY(4px); box-shadow: 0 2px 0 #7fae13; }
.btn.up { background: var(--good); } .btn.down { background: var(--bad); color: #fff; }
.icon-btn { background: var(--panel); border: 1px solid var(--line); color: var(--text); width: 36px; height: 36px; border-radius: 50%; font-weight: 800; cursor: pointer; }
.input { width: 100%; padding: 12px 14px; border-radius: 12px; border: 1px solid var(--line); background: var(--input); color: var(--text); font: 1rem Inter, sans-serif; }
.input:focus { outline: 2px solid var(--accent); }
.big-input { font-size: 2rem; text-align: center; font-family: Oswald, sans-serif; }
select.input { padding: 10px; }
.row { display: flex; gap: 10px; justify-content: flex-end; margin-top: 14px; }
.actions { margin: 16px 0; display: flex; justify-content: center; gap: 10px; }
.actions.col { flex-direction: column; }
.actions.row2 > * { flex: 1; }

/* top bar */
.topbar { display: grid; grid-template-columns: 40px 1fr 40px; align-items: center; margin-bottom: 8px; }
.topbar h2 { margin: 0; text-align: center; font-size: 1.3rem; }
.back { font-size: 2rem; text-decoration: none; color: var(--text); line-height: 1; }
.banner { background: rgba(255,210,63,.12); border: 1px solid rgba(255,210,63,.4); border-radius: 12px; padding: 10px 12px; margin: 8px 0; text-align: center; }

/* home */
.hero { text-align: center; padding: 24px 0 8px; }
.logo { font-size: 3.2rem; line-height: .9; font-weight: 700; color: var(--logo1); text-shadow: 0 4px 0 var(--logo-shadow); }
.logo span { display: block; color: var(--logo2); text-shadow: none; font-size: 2.1rem; letter-spacing: 6px; }
.hero p { color: var(--muted); margin: 10px 0; }
.section-title { font-size: 1rem; color: var(--muted); text-transform: uppercase; letter-spacing: 1px; margin: 22px 0 8px; font-family: Inter, sans-serif; font-weight: 800; }
.cards { display: grid; gap: 10px; }
section + section { margin-top: 10px; }
.mode-card { display: flex; align-items: center; gap: 12px; padding: 14px; border-radius: var(--r); background: var(--panel); border: 1px solid var(--line); color: var(--text); text-decoration: none; transition: transform .12s, background .2s; }
.mode-card:hover { background: var(--panel2); }
.mode-card:active { transform: scale(.98); }
.mode-card.featured { background: linear-gradient(135deg, #1d7a57, #0f4a38); border-color: rgba(200,255,61,.5); padding: 18px 14px; }
.mode-card.done { opacity: .75; }
.mode-icon { font-size: 1.8rem; width: 44px; text-align: center; }
.mode-text { flex: 1; display: flex; flex-direction: column; }
.mode-text small { color: var(--muted); }
.pb { font: 700 .8rem Oswald, sans-serif; color: var(--hi2); }
footer { margin-top: 24px; }

/* counter */
.counter { background: var(--panel); border-radius: var(--r); padding: 10px 14px; border: 1px solid var(--line); }
.counter-num { display: flex; align-items: baseline; gap: 6px; justify-content: center; }
.counter-num b { font-size: 2.6rem; color: var(--hi); transition: color .3s; }
.counter-num span { color: var(--muted); font-size: 1.2rem; }
.counter.over .counter-num b { color: var(--bad); }
.bar { height: 8px; background: var(--input); border-radius: 4px; overflow: hidden; margin: 4px 0; }
.bar i { display: block; height: 100%; background: linear-gradient(90deg, var(--accent), var(--accent2)); transition: width .6s cubic-bezier(.2,.8,.2,1); }
.counter.over .bar i { background: var(--bad); }
.counter-sub { text-align: center; font-size: .85rem; color: var(--muted); }

/* pitch */
.pitch { position: relative; margin: 10px 0; padding: 10px 4px; border-radius: var(--r); background: repeating-linear-gradient(180deg, #1c7a4a 0 34px, #1a7045 34px 68px); border: 2px solid rgba(255,255,255,.35); overflow: hidden; }
.pitch-lines { position: absolute; inset: 0; pointer-events: none; background:
  radial-gradient(circle at 50% 0, transparent 44px, rgba(255,255,255,.35) 45px, transparent 47px),
  linear-gradient(90deg, transparent calc(50% - 60px), rgba(255,255,255,.3) calc(50% - 60px), rgba(255,255,255,.3) calc(50% - 58px), transparent calc(50% - 58px), transparent calc(50% + 58px), rgba(255,255,255,.3) calc(50% + 58px), rgba(255,255,255,.3) calc(50% + 60px), transparent calc(50% + 60px)) bottom / 100% 44px no-repeat; }
.pitch-row { display: flex; justify-content: space-evenly; margin: 6px 0; position: relative; }
.slot { position: relative; flex: 0 1 76px; min-width: 0; width: 76px; min-height: 66px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; border-radius: 12px; font-size: .72rem; text-align: center; }
.slot.empty { border: 2px dashed rgba(255,255,255,.35); background: rgba(0,0,0,.12); }
.slot.filled { background: rgba(0,0,0,.28); }
.slot.fresh { animation: pop .5s; }
.slot-name { font-weight: 700; max-width: 74px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.slot-goals { background: var(--accent); color: #0a2a1f; font-weight: 800; border-radius: 8px; padding: 0 6px; font-size: .78rem; }
.slot-goals i { font-style: normal; margin-left: 2px; }
.pitch.subbing .slot.filled { cursor: pointer; outline: 2px solid var(--bad); animation: wobble .8s infinite; }
@keyframes pop { 0% { transform: scale(.4); } 70% { transform: scale(1.15); } 100% { transform: scale(1); } }
@keyframes wobble { 0%,100% { transform: rotate(-2deg); } 50% { transform: rotate(2deg); } }

.pos { display: inline-block; font: 800 .68rem Inter, sans-serif; padding: 2px 6px; border-radius: 6px; color: #07261d; }
.pos-G { background: var(--G); } .pos-D { background: var(--D); } .pos-M { background: var(--M); } .pos-F { background: var(--F); }

.avatar { position: relative; display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px; border-radius: 50%; background: var(--cb); color: var(--cf); font-weight: 800; font-size: .72rem; overflow: hidden; flex-shrink: 0; border: 2px solid rgba(255,255,255,.6); }
.avatar img { position: absolute; inset: 0; width: 100%; height: 130%; object-fit: cover; object-position: top; background: var(--cb); }
.avatar.lg { width: 64px; height: 64px; font-size: 1.2rem; }
.chip { display: inline-block; background: var(--cb); color: var(--cf); border-radius: 6px; padding: 2px 6px; font: 800 .66rem Inter, sans-serif; letter-spacing: .3px; border: 1px solid rgba(255,255,255,.25); }
.chips { display: flex; flex-wrap: wrap; gap: 3px; justify-content: center; }

/* wildcards */
.inv { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; background: var(--inset); border-radius: 12px; padding: 8px; }
.inv-label { font-weight: 800; font-size: .75rem; text-transform: uppercase; color: var(--muted); margin-right: 4px; }
.wild-btn { display: flex; flex-direction: column; align-items: center; background: linear-gradient(135deg, #6b3cff, #b33cff); color: #fff; border: 0; border-radius: 10px; padding: 6px 10px; font-size: 1.1rem; cursor: pointer; }
.wild-btn small { font-size: .62rem; font-weight: 700; }
.wild-btn.active { outline: 3px solid var(--accent2); }

/* reels */
.reels { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-top: 12px; }
.reel { position: relative; min-height: 220px; background: linear-gradient(180deg, #fdfdf7, #e8eee6); color: #10261d; border-radius: 14px; border: 3px solid #0a2a1f; box-shadow: inset 0 0 0 2px rgba(255,255,255,.8), 0 6px 0 #04150f; padding: 10px 6px; display: flex; flex-direction: column; align-items: center; gap: 5px; text-align: center; font: inherit; cursor: pointer; transition: transform .15s, opacity .3s; overflow: hidden; }
.reel.idle { cursor: default; justify-content: center; opacity: .6; }
.reel-q { font: 700 3rem Oswald, sans-serif; color: #9bb; }
.reel.spinning { justify-content: center; }
.reel-spin { font: 700 .9rem Oswald, sans-serif; filter: blur(1px); animation: jiggle .12s infinite; }
@keyframes jiggle { 0% { transform: translateY(-6px); } 100% { transform: translateY(6px); } }
.reel.landed { animation: land .35s; }
@keyframes land { 0% { transform: translateY(-14px); } 60% { transform: translateY(4px); } 100% { transform: none; } }
.reel:not(.idle):not(.spinning):hover { transform: translateY(-3px); }
.reel.selected { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent), 0 6px 0 #04150f; }
.reel.dim { opacity: .55; }
.reel-name { font: 700 1rem/1.1 Oswald, sans-serif; }
.reel-meta { font-size: .7rem; display: flex; gap: 4px; align-items: center; flex-wrap: wrap; justify-content: center; }
.reel .chips { margin-top: auto; }
.reel-goals { margin-top: 4px; background: #0a2a1f; color: #fff; border-radius: 8px; padding: 4px 8px; width: 100%; display: flex; flex-direction: column; font-size: .75rem; }
.reel-goals b { font: 700 1.3rem Oswald, sans-serif; color: var(--hi); }
.reel-goals.show b { animation: pop .4s; }
.reel-goals small { color: var(--muted); font-size: .65rem; }
.mate { position: absolute; top: 0; left: 0; right: 0; background: var(--accent2); color: #3a2a00; font-size: .6rem; font-weight: 800; padding: 3px 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mate + .avatar { margin-top: 12px; }
.reel.is-wild { background: linear-gradient(160deg, #6b3cff, #b33cff 60%, #ff3cac); color: #fff; }
.wild-card { display: flex; flex-direction: column; align-items: center; gap: 6px; height: 100%; justify-content: center; }
.wild-icon { font-size: 2.4rem; }
.wild-name { font: 700 1.05rem Oswald, sans-serif; }
.wild-desc { font-size: .7rem; opacity: .9; }
.tag { font-size: .6rem; font-weight: 800; letter-spacing: 2px; background: rgba(0,0,0,.25); padding: 2px 6px; border-radius: 6px; }
.hint { color: var(--muted); text-align: center; }

/* results */
.result { text-align: center; background: var(--panel); border-radius: var(--r); padding: 16px; border: 1px solid var(--line); margin: 10px 0; }
.result-total { font-size: 3.4rem; color: var(--hi); line-height: 1; }
.result-total.bull { color: var(--hi2); text-shadow: 0 0 30px rgba(255,210,63,.6); }
.result-total small, .result-score small { display: block; font: 600 .85rem Inter, sans-serif; color: var(--muted); }
.result-score { font-size: 2.4rem; margin-top: 8px; }
.breakdown { margin: 10px auto; border-collapse: collapse; font-size: .9rem; }
.breakdown td { padding: 3px 10px; text-align: left; } .breakdown td + td { text-align: right; font-weight: 800; color: var(--hi); }
.xi-list { display: grid; gap: 4px; }
.xi-row { display: grid; grid-template-columns: 34px 1fr auto 44px; gap: 8px; align-items: center; background: var(--inset); padding: 6px 8px; border-radius: 10px; }
.xi-row small { color: var(--muted); } .xi-row b { text-align: right; color: var(--hi); }

/* higher or lower etc */
.hl-head { text-align: center; color: var(--muted); margin-bottom: 8px; } .hl-head b { color: var(--text); }
.hl { display: grid; grid-template-columns: 1fr auto 1fr; gap: 6px; align-items: center; }
.vs { font: 700 1.2rem Oswald, sans-serif; color: var(--hi2); }
.hl-card { background: var(--panel); border: 2px solid var(--line); border-radius: var(--r); padding: 12px 8px; text-align: center; display: flex; flex-direction: column; align-items: center; gap: 6px; transition: border-color .3s; }
.hl-card.solo { margin: 10px 0; }
.hl-card.good { border-color: var(--good); } .hl-card.bad { border-color: var(--bad); }
.hl-val b { font: 700 2.4rem Oswald, sans-serif; color: var(--hi); display: block; }
.hl-val small { color: var(--muted); font-size: .75rem; }
.hl-q { text-align: center; margin: 14px 0 0; }
.clues { display: grid; gap: 8px; }
.clue { background: var(--panel); border-radius: 12px; padding: 10px 12px; animation: pop .35s; border: 1px solid var(--line); }
.clue > b { display: block; font-size: .72rem; text-transform: uppercase; letter-spacing: 1px; color: var(--muted); margin-bottom: 4px; }
.path { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; margin: 4px 0; }
.path .chip { font-size: .78rem; padding: 4px 8px; }
.arrow { color: var(--muted); }
.wrong { display: flex; flex-wrap: wrap; gap: 6px; margin: 8px 0; } .wrong span { color: var(--bad); font-size: .85rem; }
.guess-box { position: relative; margin-top: 12px; }
.ac { position: absolute; left: 0; right: 0; top: 100%; z-index: 20; background: var(--modal); border: 1px solid var(--line); border-radius: 12px; overflow: hidden; margin-top: 4px; box-shadow: 0 10px 30px rgba(0,0,0,.4); }
.ac-item { display: flex; justify-content: space-between; width: 100%; padding: 10px 12px; background: none; border: 0; color: var(--text); text-align: left; font: inherit; cursor: pointer; gap: 8px; }
.ac-item small { color: var(--muted); white-space: nowrap; }
.ac-item.active, .ac-item:hover { background: var(--panel2); }
.big-emoji { font-size: 1.8rem; letter-spacing: 2px; margin: 20px 0; }
.tally-form { display: grid; gap: 10px; text-align: center; }

/* grid */
.grid { display: grid; grid-template-columns: 70px repeat(3, 1fr); gap: 6px; }
.gh { display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; gap: 2px; font-size: .62rem; color: var(--muted); padding: 4px 0; }
.gh .chip { font-size: .85rem; padding: 4px 8px; }
.gh.alt span { font-size: 1.4rem; }
.cell { aspect-ratio: 1; border-radius: 12px; background: var(--panel); border: 1px solid var(--line); color: var(--muted); font-size: 1.6rem; cursor: pointer; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; padding: 4px; position: relative; text-align: center; }
.cell small { font-size: .62rem; line-height: 1.1; color: var(--text); }
.cell.done { background: linear-gradient(160deg, #1d7a57, #0f4a38); border-color: var(--good); }
.cell i { position: absolute; top: 3px; right: 5px; font-size: .6rem; font-style: normal; color: var(--hi); font-weight: 800; }

/* leaderboard, index */
.tabs { display: flex; gap: 6px; overflow-x: auto; padding-bottom: 6px; scrollbar-width: none; }
.tab { flex-shrink: 0; padding: 7px 12px; border-radius: 999px; background: var(--panel); color: var(--text); text-decoration: none; font-size: .82rem; border: 1px solid var(--line); }
.tab.active { background: var(--accent); color: #0a2a1f; font-weight: 800; }
.lb { display: grid; gap: 4px; }
.lb-row { display: grid; grid-template-columns: 36px 1fr auto; padding: 9px 12px; background: var(--panel); border-radius: 10px; }
.lb-row.me { outline: 2px solid var(--accent); }
.lb-row b { color: var(--hi); }
.filters { display: grid; grid-template-columns: 1fr; gap: 6px; margin-bottom: 8px; }
@media (min-width: 480px) { .filters { grid-template-columns: 2fr 1.4fr 1fr; } }
.plist { display: grid; gap: 4px; }
.prow { display: grid; grid-template-columns: 34px 1fr 44px 44px; gap: 8px; align-items: center; background: var(--panel); border-radius: 10px; padding: 8px; }
.prow small { display: block; color: var(--muted); font-size: .75rem; }
.prow .chips { justify-content: flex-start; margin-top: 3px; }
.num { text-align: center; font: 700 1.1rem Oswald, sans-serif; } .num small { font: 600 .6rem Inter, sans-serif; }
.prose { line-height: 1.55; }

/* modal + toast */
.modal-wrap { position: fixed; inset: 0; background: rgba(0,0,0,.6); display: flex; align-items: center; justify-content: center; z-index: 98;  /* (5.39: above the game's effects, notes and visitors, which sat over pop-ups) */ padding: 16px; animation: fade .2s; }
.modal { background: var(--modal); border: 1px solid var(--line); border-radius: 18px; padding: 18px; width: 100%; max-width: 440px; max-height: 88vh; overflow: auto; animation: pop .25s; }
.modal ul { padding-left: 18px; } .modal li { margin: 4px 0; }
.modal .center { display: flex; flex-direction: column; align-items: center; }
@keyframes fade { from { opacity: 0; } }
.toast { position: fixed; left: 50%; bottom: calc(24px + env(safe-area-inset-bottom)); transform: translate(-50%, 30px); background: var(--toast-bg); color: var(--toast-text); font-weight: 700; padding: 10px 16px; border-radius: 12px; opacity: 0; transition: .25s; z-index: 60; max-width: 90vw; pointer-events: none; text-align: center; box-shadow: 0 8px 30px rgba(0,0,0,.4); }
.toast.show { opacity: 1; transform: translate(-50%, 0); }
#toasts { position: fixed; left: 50%; bottom: calc(24px + env(safe-area-inset-bottom)); transform: translateX(-50%); z-index: 99; display: flex; flex-direction: column; align-items: center; gap: 6px; width: max-content; max-width: 90vw; pointer-events: none; }
#toasts .toast { position: static; transform: translateY(30px); max-width: 90vw; } #toasts .toast.show { transform: none; }

@media (max-width: 380px) {
  .slot { width: 66px; } .slot-name { max-width: 64px; }
  .reel { min-height: 200px; } .reel-name { font-size: .88rem; }
}

/* v2: formations, positions, wildcards */
.pitch-row { gap: 4px; }
.slot.empty.moved { border-color: var(--accent2); }
.slot-pos { position: absolute; top: 2px; left: 3px; font-size: .55rem; font-weight: 800; color: rgba(255,255,255,.7); }
.slot-pos.oop { background: var(--accent2); color: #3a2a00; border-radius: 4px; padding: 0 3px; }
.shape { position: absolute; right: 8px; bottom: 6px; font: 700 .8rem Oswald, sans-serif; color: rgba(255,255,255,.55); }
.reel-meta .pos + .pos { margin-left: -2px; }
.pos-choice { display: grid; gap: 8px; margin-top: 10px; }
.pos-choice .btn { justify-content: flex-start; background: var(--panel2); color: var(--text); }
.special-banner { text-align: center; margin-top: 12px; font: 700 1.1rem Oswald, sans-serif; color: var(--hi2); letter-spacing: 1px; }
.warn { color: var(--hi2); font-weight: 800; }
.wc-list li { font-size: .9rem; }
.pitch-row.crowded .slot-name { font-size: .6rem; }
.pitch-row.crowded .avatar { width: 28px; height: 28px; }

/* hard mode toggle + slot targeting */
.hard-toggle { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; background: var(--inset); padding: 4px; border-radius: 14px; margin: 6px 0 14px; }
.hard-toggle > * { border: 0; background: transparent; color: var(--muted); padding: 9px 6px; border-radius: 10px; font: 700 .95rem Inter, sans-serif; cursor: pointer; text-align: center; text-decoration: none; display: flex; flex-direction: column; align-items: center; }
.hard-toggle > * small { font-weight: 500; font-size: .7rem; }
.hard-toggle > .on { background: var(--accent); color: #0a2a1f; }
.hard-toggle.small > * { padding: 6px; font-size: .85rem; }
.pitch.placing .slot.empty:not(.target), .pitch.placing .slot.filled { opacity: .35; }
.slot.target { border: 2px solid var(--accent) !important; background: rgba(200,255,61,.25); cursor: pointer; animation: glow 1s ease-in-out infinite alternate; }
@keyframes glow { from { box-shadow: 0 0 0 0 rgba(200,255,61,.0); } to { box-shadow: 0 0 14px 3px rgba(200,255,61,.6); } }
.reel.hard { min-height: 170px; justify-content: center; }
.reel.hard .reel-goals { margin-top: auto; }

.mode-card.featured.ultimate { background: linear-gradient(135deg, #5b2bd6, #2a1466); border-color: rgba(255,210,63,.6); }
.mode-card.featured.ultimate .pb { color: #ffd23f; font-size: .95rem; }
.counter.max .counter-num span { font-size: 1rem; }

/* v4: stat picker, full-time report, club hopper */
.big-card { flex-wrap: wrap; }
.stat-pick { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.stat-btn { flex: 1 1 90px; display: flex; flex-direction: column; align-items: center; padding: 9px 6px; border-radius: 10px; background: rgba(255,255,255,.12); color: var(--text); text-decoration: none; font-weight: 800; font-size: .88rem; border: 1px solid rgba(255,255,255,.2); text-align: center; }
.stat-btn:hover { background: rgba(255,255,255,.2); }
.stat-btn .sb-ico { font-style: normal; font-size: 1.15rem; line-height: 1.2; }
.stat-btn small { color: var(--hi2); font-weight: 700; font-size: .7rem; }
.mode-card .mode-text small { display: block; }
.report { background: var(--panel); border: 1px solid var(--line); border-radius: var(--r); padding: 14px; margin: 10px 0; display: grid; gap: 8px; }
.tier { display: flex; align-items: center; gap: 12px; }
.tier-icon { font-size: 2.4rem; }
.tier small { display: block; color: var(--muted); font-size: .75rem; text-transform: uppercase; letter-spacing: 1px; }
.tier b { font: 700 1.5rem Oswald, sans-serif; color: var(--hi2); }
.verdict { padding: 8px 10px; border-radius: 10px; font-size: .92rem; }
.verdict.good { background: rgba(61,220,132,.12); border: 1px solid rgba(61,220,132,.35); }
.verdict.bad { background: rgba(255,90,95,.1); border: 1px solid rgba(255,90,95,.35); }
.team-badges { display: flex; flex-wrap: wrap; gap: 6px; }
.team-badges span { background: var(--inset); border-radius: 999px; padding: 4px 10px; font-size: .8rem; font-weight: 700; }
.report .xi-row { grid-template-columns: 34px 1fr auto; }
.xi-name { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; }
.badges { display: inline-flex; gap: 2px; }
.badge { font-size: .9rem; cursor: help; }
.badge sub { font-size: .6rem; font-weight: 800; color: var(--hi2); }
.oop-note { color: var(--hi2); }
.report b small { font-size: .7rem; color: var(--muted); margin-left: 2px; }
.chem, .legend { font-size: .85rem; }
.chem summary, .legend summary { cursor: pointer; font-weight: 700; color: var(--muted); padding: 4px 0; }
.chem div, .legend div { padding: 2px 0; }
.hop-head { display: flex; justify-content: space-between; align-items: center; color: var(--muted); }
.hop-head b { color: var(--text); }
.timer { font: 700 1.8rem Oswald, sans-serif; color: var(--hi); }
.timer.warn { color: var(--bad); }
.hop-club { text-align: center; margin: 16px 0 6px; }
.hop-club .chip { font-size: 1.4rem; padding: 10px 18px; border-radius: 12px; }
.hop-choices { display: grid; gap: 8px; }
.hop-choices .btn { background: var(--panel2); color: var(--text); justify-content: flex-start; }
.hop-chain { margin-top: 14px; display: grid; gap: 4px; font-size: .85rem; }
.hop-chain div { background: var(--inset); padding: 6px 8px; border-radius: 8px; }

/* album */
.collected { display: block; text-align: center; background: linear-gradient(135deg, #5b2bd6, #2a1466); color: #fff; text-decoration: none; border-radius: 12px; padding: 10px; margin: 10px 0; font-size: .9rem; border: 1px solid rgba(255,210,63,.5); }
.collected b { color: var(--hi2); }
.album-card { border-color: rgba(255,210,63,.5); }
.album-head { display: grid; grid-template-columns: 1fr 1fr; text-align: center; gap: 8px; margin: 6px 0; }
.album-head b { display: block; font: 700 2.4rem Oswald, sans-serif; color: var(--hi); }
.album-head small { color: var(--muted); }
.ach-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 8px; }
.ach { background: var(--panel); border: 1px solid var(--line); border-radius: 12px; padding: 10px; display: flex; flex-direction: column; gap: 2px; opacity: .55; }
.ach.got { opacity: 1; border-color: rgba(255,210,63,.6); background: linear-gradient(160deg, #1d7a57, #0f4a38); }
.ach-icon { font-size: 1.6rem; }
.ach b { font-size: .9rem; } .ach small { color: var(--muted); font-size: .72rem; }
.sets { display: grid; gap: 6px; }
.set { background: var(--panel); border-radius: 12px; padding: 8px 10px; }
.set summary { display: grid; grid-template-columns: 1fr auto; gap: 4px 8px; cursor: pointer; font-weight: 700; }
.set summary .bar { grid-column: 1 / -1; margin: 0; }
.set-list { display: flex; flex-wrap: wrap; gap: 4px 10px; margin-top: 8px; font-size: .8rem; color: var(--muted); }
.set-list .have { color: var(--text); font-weight: 700; }
.club-set { display: grid; grid-template-columns: 44px 1fr auto; gap: 4px 8px; align-items: center; background: var(--panel); border-radius: 10px; padding: 6px 10px; font-size: .85rem; }
.club-set .bar { grid-column: 1 / -1; margin: 0; }
.hard-toggle.three { grid-template-columns: repeat(3, 1fr); }
.hard-toggle.four { grid-template-columns: repeat(4, 1fr); }
.clubs-block { margin-top: 10px; }
.clubs-block .sets { margin-top: 8px; }

.install-bar { display: inline-flex; align-items: center; gap: 6px; }
.install-bar[hidden] { display: none; }
.install-x { background: none; border: 0; color: var(--muted); font-size: 1rem; cursor: pointer; padding: 4px 6px; }

/* v8: The Treble + Mystery Target */
.counter.treble { display: grid; gap: 6px; }
.trow { display: grid; gap: 2px; font-size: .9rem; }
.trow b { color: var(--hi); font: 700 1.2rem Oswald, sans-serif; }
.trow .bar { margin: 0; }
.trow .bar i.over { background: var(--bad); }
.treble-num { flex-direction: row !important; justify-content: space-around; gap: 2px; }
.treble-num span { display: flex; flex-direction: column; align-items: center; font-size: .7rem; }
.treble-num b { font-size: 1rem !important; }
.thermo { height: 12px; border-radius: 6px; margin: 6px 0; background: linear-gradient(90deg, #6cc3ff, #ffd23f 60%, #ff7a00 80%, var(--bad)); position: relative; overflow: hidden; }
.thermo i { display: block; height: 100%; background: transparent !important; border-right: 3px solid #fff; box-shadow: 0 0 10px #fff; transition: width .6s; }
.counter.mystery .counter-sub b { color: var(--hi2); }
.mystery-intro { text-align: center; padding: 30px 10px; display: grid; gap: 14px; }
.mystery-roll { font: 700 2.6rem Oswald, sans-serif; color: var(--hi); }
.mystery-roll.landed { animation: pop .5s; color: var(--hi2); }
.mystery-reveal { background: rgba(255,210,63,.12); border: 1px solid rgba(255,210,63,.4); border-radius: 12px; padding: 10px; margin-bottom: 10px; font-size: 1.1rem; animation: pop .6s; }
.mystery-reveal b { color: var(--hi2); font: 700 1.6rem Oswald, sans-serif; }

/* ================================================================ v13: new look */
:root { --p1: #e5484d; --p1-edge: #a32a2f; --p2: #2f80ed; --p2-edge: #1b56a8; --btn-edge: #7fae13; }
body.has-tabs #app { padding-bottom: calc(96px + env(safe-area-inset-bottom)); }
h2, h3 { letter-spacing: .3px; }

/* chunky buttons: a solid edge underneath that squashes when pressed */
.btn { border-radius: 14px; box-shadow: 0 4px 0 var(--btn-edge); font-weight: 800; }
.btn:active { transform: translateY(3px); box-shadow: 0 1px 0 var(--btn-edge); }
.btn.ghost { background: var(--panel); border: 1px solid var(--line); box-shadow: 0 3px 0 var(--edge); }
.btn.ghost:active { box-shadow: 0 1px 0 var(--edge); }
.btn.up { box-shadow: 0 4px 0 #1f8a4f; } .btn.down { box-shadow: 0 4px 0 #b33338; }
.btn.small { border-radius: 11px; box-shadow: 0 3px 0 var(--btn-edge); }
.icon-btn { display: inline-flex; align-items: center; justify-content: center; position: relative; width: 44px; height: 44px; border-radius: 14px; font-size: 1.25rem; text-decoration: none; background: var(--panel); border: 1px solid var(--line); box-shadow: 0 3px 0 var(--edge); }
.icon-btn:active { transform: translateY(2px); box-shadow: 0 1px 0 var(--edge); }
.new-dot { position: absolute; top: -3px; right: -3px; width: 12px; height: 12px; border-radius: 50%; background: var(--p1); border: 2px solid var(--bg); }
.new-dot.inline { position: static; display: inline-block; vertical-align: middle; margin-left: 4px; }
.input { background: var(--input); }
.mode-card, .counter, .result, .report, .hl-card, .clue, .lb-row, .prow, .set, .club-set, .ach, .cell { box-shadow: 0 3px 0 var(--edge); }
.mode-card { border-radius: 20px; }

/* app bar + logo */
.appbar { display: grid; grid-template-columns: 44px 1fr 44px; align-items: center; gap: 8px; padding-top: 6px; }
.logo.small { font-size: 2.1rem; text-align: center; text-shadow: 0 3px 0 var(--logo-shadow); }
.logo.small span { font-size: 1.15rem; letter-spacing: 5px; }
.hero { padding: 6px 0 4px; }
.hero p { font-size: .85rem; margin: 6px 0 8px; }
.hard-toggle { background: var(--inset); border-radius: 16px; }
.hard-toggle > .on { box-shadow: 0 3px 0 var(--btn-edge); }

/* section headings: a lime tab, not a ribbon */
.section-title { display: flex; align-items: center; gap: 8px; color: var(--text); font: 700 1.05rem Oswald, sans-serif; letter-spacing: 1px; margin: 22px 0 10px; }
.section-title::before { content: ''; width: 5px; height: 18px; border-radius: 3px; background: var(--hi); }

/* the featured Ultimate card */
.mode-card.featured, .mode-card.featured.ultimate { color: #fff; box-shadow: 0 5px 0 #1c0b4d; border: 0; }
.mode-card.featured .mode-text small { color: rgba(255,255,255,.8); }
.mode-card.featured b { font: 700 1.5rem Oswald, sans-serif; letter-spacing: .5px; }
.kicker { font: 800 .65rem Inter, sans-serif; letter-spacing: 2px; text-transform: uppercase; color: var(--accent2); }
.stat-btn { color: #fff; box-shadow: 0 3px 0 rgba(0,0,0,.25); }
.stat-btn:active { transform: translateY(2px); box-shadow: 0 1px 0 rgba(0,0,0,.25); }

/* game tiles */
.tiles { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.tiles + .tiles, .tile.wide + .tiles { margin-top: 12px; }
.tile { --c1: #1d7a57; --c2: #0f4a38; --c3: #0a3326; position: relative; overflow: hidden; display: flex; flex-direction: column; justify-content: flex-end; gap: 3px; min-height: 132px; padding: 14px; border-radius: 20px; color: #fff; text-decoration: none;
  background: repeating-linear-gradient(135deg, rgba(255,255,255,.05) 0 12px, transparent 12px 24px), linear-gradient(160deg, var(--c1), var(--c2)); box-shadow: 0 5px 0 var(--c3); transition: transform .1s, box-shadow .1s; }
.tile:active { transform: translateY(4px); box-shadow: 0 1px 0 var(--c3); }
.tile.wide { grid-column: 1 / -1; min-height: 112px; }
.tile-icon { position: absolute; top: 8px; right: 10px; font-size: 2.8rem; transform: rotate(-8deg); filter: drop-shadow(0 4px 6px rgba(0,0,0,.3)); }
.tile b { font: 700 1.3rem/1.05 Oswald, sans-serif; text-transform: uppercase; letter-spacing: .5px; text-shadow: 0 2px 0 rgba(0,0,0,.25); max-width: 85%; }
.tile small { font-size: .74rem; opacity: .88; line-height: 1.25; }
.tile-pb { position: absolute; top: 12px; left: 12px; font: 700 .72rem Oswald, sans-serif; background: rgba(0,0,0,.28); padding: 3px 8px; border-radius: 999px; letter-spacing: .5px; }
.tile.done { filter: saturate(.55); }
.tile.done::after { content: '✓'; position: absolute; top: 10px; left: 12px; width: 26px; height: 26px; border-radius: 50%; background: #fff; color: #16803c; font-weight: 900; display: flex; align-items: center; justify-content: center; }
.tile .stat-pick { margin-top: 8px; }
.tile .stat-btn { background: rgba(255,255,255,.16); border-color: rgba(255,255,255,.25); }
.tile .stat-btn small { color: #ffe27a; }
.target-tile { min-height: 0; padding-top: 16px; }
.album-tile .bar { background: rgba(0,0,0,.25); margin-top: 6px; }
.t-green { --c1: #22a06b; --c2: #11694a; --c3: #0b4a33; }
.t-blue { --c1: #3a86ff; --c2: #1d4fb8; --c3: #143a88; }
.t-navy { --c1: #34507a; --c2: #1d2f4f; --c3: #121f36; }
.t-red { --c1: #ef5b5b; --c2: #b8323a; --c3: #85222a; }
.t-gold { --c1: #f2b134; --c2: #c07a0d; --c3: #8a5606; }
.t-magenta { --c1: #d9468f; --c2: #8e2461; --c3: #651744; }
.t-teal { --c1: #17a2a2; --c2: #0c6b73; --c3: #084c52; }
.t-orange { --c1: #ff8a3d; --c2: #d4541a; --c3: #9c3a0e; }
.t-indigo { --c1: #6c63ff; --c2: #3a2fb8; --c3: #281f86; }
.t-amber { --c1: #e0a526; --c2: #a8660b; --c3: #784805; }
.t-purple { --c1: #7b3fe4; --c2: #3d1d8f; --c3: #2a1266; }

/* Head to Head banner on the home screen */
.h2h-banner { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 10px; margin-top: 14px; padding: 14px 16px; border-radius: 20px; text-decoration: none; color: #fff; text-align: center;
  background: linear-gradient(90deg, var(--p1), #9b3d8f 50%, var(--p2)); box-shadow: 0 5px 0 #3b1f5c; }
.h2h-banner:active { transform: translateY(4px); box-shadow: 0 1px 0 #3b1f5c; }
.h2h-banner > span:first-child, .h2h-banner > span:last-child { font-size: 1.9rem; filter: drop-shadow(0 3px 4px rgba(0,0,0,.3)); }
.h2h-banner b { display: block; font: 700 1.5rem Oswald, sans-serif; text-transform: uppercase; letter-spacing: 1px; text-shadow: 0 2px 0 rgba(0,0,0,.25); }
.h2h-banner small { opacity: .9; font-size: .78rem; }

/* bottom tab bar */
.tabbar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 40; display: flex; justify-content: center; gap: 4px; padding: 8px 10px calc(8px + env(safe-area-inset-bottom)); background: var(--nav); border-top: 1px solid var(--line); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); }
.tabbar[hidden] { display: none; }
.tabbar a { flex: 1; max-width: 130px; display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 6px 4px; border-radius: 14px; color: var(--muted); text-decoration: none; font: 700 .7rem Inter, sans-serif; }
.tabbar a span { font-size: 1.3rem; filter: grayscale(.6); opacity: .8; }
.tabbar a.on { color: var(--hi); background: var(--inset); }
.tabbar a.on span { filter: none; opacity: 1; }

/* loading screen */
#splash { position: fixed; inset: 0; z-index: 100; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px; background: var(--bg); transition: opacity .4s, visibility .4s; }
#splash img { border-radius: 24px; box-shadow: 0 8px 0 var(--edge); animation: pop .6s; }
#splash .logo { font-size: 2.6rem; text-align: center; }
#splash .logo span { font-size: 1.4rem; letter-spacing: 6px; }
#splash small { color: var(--muted); font-size: .8rem; letter-spacing: 1px; }
.splash-bar { width: min(260px, 60vw); height: 14px; border-radius: 999px; background: var(--inset); overflow: hidden; box-shadow: inset 0 0 0 1px var(--line); }
.splash-bar i { display: block; height: 100%; width: 8%; border-radius: 999px; background: linear-gradient(90deg, var(--accent), #8fe000); animation: load 2.4s cubic-bezier(.1,.7,.3,1) forwards; }
@keyframes load { to { width: 92%; } }
#splash.gone { opacity: 0; visibility: hidden; }
#splash.gone .splash-bar i { width: 100%; animation: none; }

/* segmented controls + settings */
.seg { display: flex; gap: 4px; padding: 4px; border-radius: 14px; background: var(--inset); }
.seg button { flex: 1; border: 0; background: transparent; color: var(--muted); padding: 10px 6px; border-radius: 10px; font: 700 .9rem Inter, sans-serif; cursor: pointer; }
.seg button.on { background: var(--accent); color: #0a2a1f; box-shadow: 0 3px 0 var(--btn-edge); }
.settings { display: grid; gap: 10px; margin: 10px 0; }
.setting { display: grid; gap: 6px; background: var(--panel); border: 1px solid var(--line); border-radius: 18px; padding: 14px; box-shadow: 0 3px 0 var(--edge); }
.setting small { color: var(--muted); font-size: .8rem; }
.setting .btn { justify-self: start; }
.settings.links { gap: 0; background: var(--panel); border: 1px solid var(--line); border-radius: 18px; overflow: hidden; box-shadow: 0 3px 0 var(--edge); }
.settings.links a { display: flex; align-items: center; gap: 6px; padding: 14px; color: var(--text); text-decoration: none; font-weight: 700; }
.settings.links a + a { border-top: 1px solid var(--line); }
.settings.links a span { margin-left: auto; color: var(--muted); font-size: 1.3rem; }

/* updates */
.version-strip { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin: 8px 0 12px; }
.version-strip > div { background: var(--panel); border: 1px solid var(--line); border-radius: 18px; padding: 12px; text-align: center; box-shadow: 0 3px 0 var(--edge); }
.version-strip small { display: block; color: var(--muted); font-size: .72rem; text-transform: uppercase; letter-spacing: 1px; }
.version-strip b { font: 700 1.6rem Oswald, sans-serif; color: var(--hi); }
.releases { display: grid; gap: 10px; margin-top: 12px; }
.release { background: var(--panel); border: 1px solid var(--line); border-radius: 18px; padding: 14px; box-shadow: 0 3px 0 var(--edge); }
.release.current { border: 2px solid var(--accent); }
.release header { display: grid; grid-template-columns: auto 1fr; gap: 2px 10px; align-items: center; }
.release header small { grid-column: 2; color: var(--muted); font-size: .75rem; }
.release header b { font: 700 1.15rem Oswald, sans-serif; }
.ver { grid-row: span 2; font: 700 1rem Oswald, sans-serif; background: var(--accent); color: #0a2a1f; border-radius: 10px; padding: 6px 9px; box-shadow: 0 3px 0 var(--btn-edge); }
.release ul { margin: 10px 0 0; padding-left: 4px; list-style: none; display: grid; gap: 5px; font-size: .9rem; }
.release ul.short { font-size: .82rem; color: var(--muted); }
.whats-new ul { list-style: none; padding: 0; display: grid; gap: 6px; }
.wn-kicker { font: 800 .7rem Inter, sans-serif; letter-spacing: 2px; text-transform: uppercase; color: var(--hi); }
.whats-new h3 { font-size: 1.6rem; margin: 4px 0 8px; }

/* Head to Head */
.pname.p1, b.p1 { color: var(--p1); } .pname.p2, b.p2 { color: var(--p2); }
.h2h-hero { text-align: center; padding: 8px 6px; }
.h2h-trophy { font-size: 4rem; animation: pop .6s; filter: drop-shadow(0 6px 8px rgba(0,0,0,.25)); }
.h2h-hero h3 { font-size: 1.6rem; margin: 4px 0; }
.h2h-hero p { color: var(--muted); margin: 0; }
.h2h-setup { display: grid; gap: 10px; margin: 14px 0; }
.h2h-name { display: grid; grid-template-columns: 52px 1fr; align-items: center; gap: 8px; padding: 8px; border-radius: 18px; color: #fff; }
.h2h-name.p1 { background: var(--p1); box-shadow: 0 4px 0 var(--p1-edge); } .h2h-name.p2 { background: var(--p2); box-shadow: 0 4px 0 var(--p2-edge); }
.h2h-name span { font-size: 2rem; text-align: center; }
.h2h-name .input { border: 0; font-weight: 800; background: rgba(255,255,255,.95); color: #10261d; }
.h2h-vs, .h2h-mid span { text-align: center; font: 700 1.4rem Oswald, sans-serif; color: var(--hi2); }
.h2h-board { display: grid; grid-template-columns: 1fr auto 1fr; gap: 8px; align-items: stretch; margin: 6px 0 10px; }
.h2h-team { display: flex; flex-direction: column; align-items: center; padding: 12px 6px; border-radius: 20px; color: #fff; min-width: 0; }
.h2h-team.p1 { background: var(--p1); box-shadow: 0 5px 0 var(--p1-edge); } .h2h-team.p2 { background: var(--p2); box-shadow: 0 5px 0 var(--p2-edge); }
.h2h-team b { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.h2h-team strong { font: 700 3.2rem/1 Oswald, sans-serif; text-shadow: 0 3px 0 rgba(0,0,0,.2); }
.h2h-shirt { font-size: 1.6rem; }
.h2h-mid { display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 2px; }
.h2h-mid small { color: var(--muted); font-size: .68rem; white-space: nowrap; }
.h2h-dots { display: flex; align-items: center; justify-content: center; gap: 8px; padding: 10px 14px; border-radius: 999px; background: var(--inset); margin-bottom: 12px; }
.dot { width: 22px; height: 22px; border-radius: 50%; background: var(--panel); border: 3px solid var(--text); opacity: .9; }
.dot.p1 { background: var(--p1); border-color: var(--p1-edge); } .dot.p2 { background: var(--p2); border-color: var(--p2-edge); }
.dot.draw { background: repeating-linear-gradient(135deg, var(--p1) 0 5px, var(--p2) 5px 10px); border-color: var(--muted); }
.dot.live { border-color: var(--accent); animation: glow 1s ease-in-out infinite alternate; }
.h2h-cup { font-size: 1.6rem; }
.h2h-next { background: var(--panel); border: 1px solid var(--line); border-radius: 20px; padding: 16px; text-align: center; box-shadow: 0 3px 0 var(--edge); }
.h2h-round { font: 800 .7rem Inter, sans-serif; letter-spacing: 2px; text-transform: uppercase; color: var(--muted); }
.h2h-game { display: flex; align-items: center; justify-content: center; gap: 10px; margin: 6px 0; }
.h2h-game span { font-size: 2.4rem; } .h2h-game b { font: 700 1.7rem Oswald, sans-serif; }
.h2h-next p { margin: 6px 0 12px; }
.h2h-go.p1 { background: var(--p1); color: #fff; box-shadow: 0 5px 0 var(--p1-edge); }
.h2h-go.p2 { background: var(--p2); color: #fff; box-shadow: 0 5px 0 var(--p2-edge); }
.h2h-log { display: grid; gap: 4px; margin: 12px 0; }
.h2h-log div { display: flex; justify-content: space-between; background: var(--inset); padding: 8px 12px; border-radius: 12px; font-size: .9rem; }
.pass { position: fixed; inset: 0; z-index: 30; overflow: auto; padding: 40px 24px calc(40px + env(safe-area-inset-bottom)); display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; gap: 8px; color: #fff; }
.pass.p1 { background: radial-gradient(circle at 50% 30%, #f06a6e, var(--p1) 45%, var(--p1-edge)); }
.pass.p2 { background: radial-gradient(circle at 50% 30%, #5b9cf2, var(--p2) 45%, var(--p2-edge)); }
.pass small { font-weight: 800; letter-spacing: 1px; text-transform: uppercase; opacity: .9; }
.pass-shirt { font-size: 5rem; animation: pop .6s; filter: drop-shadow(0 8px 10px rgba(0,0,0,.3)); }
.pass h2 { font-size: 2.2rem; margin: 0; }
.pass p { margin: 0; font-size: 1.05rem; } .pass p b { font: 700 1.6rem Oswald, sans-serif; }
.pass .pass-rule { opacity: .85; font-size: .9rem; max-width: 320px; margin-bottom: 14px; }
.pass .btn { max-width: 320px; background: #fff; color: #10261d; box-shadow: 0 5px 0 rgba(0,0,0,.25); }
.pass-back { color: #fff; opacity: .8; font-size: .85rem; margin-top: 8px; }
.round-result small { color: var(--muted); font-weight: 700; text-transform: uppercase; letter-spacing: 1px; font-size: .7rem; }
.rr-score { display: flex; align-items: center; justify-content: center; gap: 14px; font: 700 3.4rem Oswald, sans-serif; }
.rr-names { display: flex; justify-content: center; gap: 40px; color: var(--muted); font-size: .85rem; margin-top: -6px; }
.champ { position: relative; overflow: hidden; text-align: center; color: #fff; border-radius: 24px; padding: 26px 16px 20px; margin: 6px 0 14px; }
.champ.p1 { background: linear-gradient(160deg, #f06a6e, var(--p1-edge)); box-shadow: 0 6px 0 #6e1b1f; }
.champ.p2 { background: linear-gradient(160deg, #5b9cf2, var(--p2-edge)); box-shadow: 0 6px 0 #0f3470; }
.champ-cup { font-size: 5rem; animation: lift 1.6s ease-in-out infinite alternate; filter: drop-shadow(0 10px 12px rgba(0,0,0,.35)); }
@keyframes lift { from { transform: translateY(4px) rotate(-4deg); } to { transform: translateY(-8px) rotate(4deg); } }
.champ small { font-weight: 800; letter-spacing: 3px; text-transform: uppercase; }
.champ h2 { font-size: 2.6rem; margin: 2px 0; }
.champ-score { font: 700 1.6rem Oswald, sans-serif; opacity: .9; }
.confetti i { position: absolute; top: -10px; width: 8px; height: 14px; border-radius: 2px; opacity: .9; animation: fall 3s linear infinite; }
.confetti i:nth-child(3n) { background: #c8ff3d; } .confetti i:nth-child(3n+1) { background: #ffd23f; } .confetti i:nth-child(3n+2) { background: #fff; }
.confetti i:nth-child(1) { left: 5%; animation-delay: -.2s; } .confetti i:nth-child(2) { left: 11%; animation-delay: -1.4s; } .confetti i:nth-child(3) { left: 17%; animation-delay: -2.1s; }
.confetti i:nth-child(4) { left: 23%; animation-delay: -.7s; } .confetti i:nth-child(5) { left: 29%; animation-delay: -2.6s; } .confetti i:nth-child(6) { left: 35%; animation-delay: -1s; }
.confetti i:nth-child(7) { left: 41%; animation-delay: -1.8s; } .confetti i:nth-child(8) { left: 47%; animation-delay: -.4s; } .confetti i:nth-child(9) { left: 53%; animation-delay: -2.3s; }
.confetti i:nth-child(10) { left: 59%; animation-delay: -1.2s; } .confetti i:nth-child(11) { left: 65%; animation-delay: -2.8s; } .confetti i:nth-child(12) { left: 71%; animation-delay: -.9s; }
.confetti i:nth-child(13) { left: 77%; animation-delay: -1.6s; } .confetti i:nth-child(14) { left: 83%; animation-delay: -.1s; } .confetti i:nth-child(15) { left: 89%; animation-delay: -2s; }
.confetti i:nth-child(16) { left: 95%; animation-delay: -1.1s; } .confetti i:nth-child(17) { left: 8%; animation-delay: -2.5s; } .confetti i:nth-child(18) { left: 62%; animation-delay: -.5s; }
@keyframes fall { to { transform: translateY(340px) rotate(540deg); } }

/* light theme: coloured surfaces keep white text; a few dark-only touches softened */
:root[data-theme="light"] .cell.done, :root[data-theme="light"] .ach.got { color: #fff; }
:root[data-theme="light"] .cell.done small, :root[data-theme="light"] .ach.got small { color: rgba(255,255,255,.85); }
:root[data-theme="light"] .cell.done i { color: #c8ff3d; }
:root[data-theme="light"] .ach { opacity: .7; }
:root[data-theme="light"] .modal-wrap { background: rgba(16,38,29,.45); }
:root[data-theme="light"] .banner { background: #fff6d6; border-color: #f0d27a; }
:root[data-theme="light"] .tab { box-shadow: 0 2px 0 var(--edge); }
:root[data-theme="light"] .lb-row b, :root[data-theme="light"] .xi-row b { color: var(--hi); }
:root[data-theme="light"] .hl-card.good { background: #eafbf1; } :root[data-theme="light"] .hl-card.bad { background: #fdecec; }
:root[data-theme="light"] .counter-num b, :root[data-theme="light"] .result-total { text-shadow: none; }
:root[data-theme="light"] .thermo i { border-right-color: #10261d; box-shadow: none; }
:root[data-theme="light"] .mystery-reveal { background: #fff6d6; }
.vol { display: flex; align-items: center; gap: 8px; font-size: .9rem; }
.vol input { flex: 1; accent-color: var(--accent); height: 28px; }
:root[data-theme="light"] .vol input { accent-color: #16803c; }
.now-playing { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 8px; font-size: .9rem; }
.now-playing[hidden] { display: none; }
.now-playing span { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.now-playing small { display: block; opacity: .7; }
.now-playing .btn { flex: none; }
.prow.credit { grid-template-columns: 34px 1fr; text-decoration: none; color: var(--text); }

/* ================================================================ v14: dailies, Footle, favourite club */
.section-title a { display: flex; align-items: center; gap: 8px; flex: 1; color: inherit; text-decoration: none; }
.section-title .more { margin-left: auto; font: 700 .75rem Inter, sans-serif; letter-spacing: 0; color: var(--muted); }
.streak-pill { font: 800 .8rem Inter, sans-serif; background: #ff7a1a; color: #fff; padding: 2px 8px; border-radius: 999px; letter-spacing: 0; }
.tabbar a { font-size: .66rem; }

/* Today hub */
.streak-hero { display: flex; align-items: center; gap: 14px; padding: 16px; border-radius: 20px; background: linear-gradient(135deg, #ff9a3d, #e8452c); color: #fff; box-shadow: 0 5px 0 #a3301c; margin: 6px 0 14px; }
.streak-hero .flame { font-size: 3rem; filter: grayscale(1) opacity(.6); }
.streak-hero .flame.lit { filter: drop-shadow(0 4px 8px rgba(0,0,0,.3)); animation: lift 1.4s ease-in-out infinite alternate; }
.streak-hero b { font: 700 2.6rem/1 Oswald, sans-serif; margin-right: 6px; }
.streak-hero span { font: 700 1.1rem Oswald, sans-serif; text-transform: uppercase; }
.streak-hero small { display: block; opacity: .9; font-size: .78rem; margin-top: 2px; }
.daily-list { display: grid; gap: 10px; }
.daily-row { display: grid; grid-template-columns: 44px 1fr auto auto; align-items: center; gap: 10px; padding: 12px; border-radius: 18px; background: var(--panel); border: 1px solid var(--line); color: var(--text); text-decoration: none; box-shadow: 0 3px 0 var(--edge); }
.daily-row:active { transform: translateY(2px); box-shadow: 0 1px 0 var(--edge); }
.dr-icon { font-size: 1.8rem; text-align: center; }
.dr-text small { display: block; color: var(--muted); font-size: .78rem; }
.daily-row.done .dr-text small { color: var(--hi); font-weight: 700; }
.dr-streak { font-weight: 800; font-size: .85rem; }
.dr-go { font: 800 .8rem Inter, sans-serif; background: var(--accent); color: #0a2a1f; padding: 7px 12px; border-radius: 10px; box-shadow: 0 3px 0 var(--btn-edge); }
.daily-row.done .dr-go { background: var(--inset); color: var(--text); box-shadow: none; }
.pick-club { display: block; margin-top: 12px; padding: 12px; border-radius: 16px; border: 2px dashed var(--line); color: var(--text); text-decoration: none; text-align: center; font-size: .9rem; }
.calendar { display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px; }
.cal-day { aspect-ratio: 1; border-radius: 10px; display: flex; align-items: center; justify-content: center; font: 700 .8rem Inter, sans-serif; font-style: normal; background: var(--inset); color: var(--muted); }
.cal-day.n1 { background: #9be7b4; color: #10261d; } .cal-day.n2 { background: #3ccf73; color: #10261d; } .cal-day.n3 { background: #16803c; color: #fff; }
.cal-day.today { outline: 2px solid var(--accent); outline-offset: 1px; }

/* Footle */
.icon-btn.small { width: 36px; height: 36px; font-size: 1rem; }
.f-head, .f-row { display: grid; grid-template-columns: 96px 1fr; gap: 6px; align-items: center; }
.f-head { margin: 12px 0 4px; font: 800 .62rem Inter, sans-serif; color: var(--muted); text-transform: uppercase; letter-spacing: .5px; }
.f-cells { display: grid; grid-template-columns: repeat(6, 1fr); gap: 4px; text-align: center; }
.f-rows { display: grid; gap: 6px; }
.f-row { animation: pop .35s; }
.f-name { display: flex; align-items: center; gap: 6px; min-width: 0; }
.f-name b { font-size: .75rem; line-height: 1.1; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.f-name .avatar { width: 28px; height: 28px; font-size: .6rem; }
.f-cell { position: relative; min-height: 42px; display: flex; flex-direction: column; align-items: center; justify-content: center; border-radius: 10px; font: 800 .78rem Inter, sans-serif; color: #fff; padding: 2px; line-height: 1.1; }
.f-cell i { font-style: normal; font-size: .7rem; }
.f-cell.hit { background: #22a06b; box-shadow: 0 3px 0 #11694a; }
.f-cell.near { background: #e0a526; box-shadow: 0 3px 0 #a8660b; }
.f-cell.miss { background: #56655e; box-shadow: 0 3px 0 #3a4540; }
.f-row.win .f-name b { color: var(--hi); }
.f-result h3 { margin: 6px 0 2px; font-size: 1.5rem; }
.f-stats, .dstats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; margin: 14px 0; text-align: center; }
.f-stats b, .dstats b { display: block; font: 700 1.7rem Oswald, sans-serif; color: var(--hi); }
.f-stats small, .dstats small { color: var(--muted); font-size: .7rem; }
.dstats > div { background: var(--panel); border: 1px solid var(--line); border-radius: 14px; padding: 10px 4px; box-shadow: 0 3px 0 var(--edge); }
.f-dist { display: grid; gap: 4px; margin-bottom: 8px; }
.f-dist div { display: grid; grid-template-columns: 16px 1fr; gap: 6px; align-items: center; font-size: .8rem; }
.f-dist i { font-style: normal; background: #56655e; color: #fff; text-align: right; padding: 2px 6px; border-radius: 6px; font-weight: 800; min-width: 22px; }
.f-dist i.me { background: #22a06b; }
.lb-row small.muted { font-size: .75rem; }
#dsort { margin: 10px 0 4px; flex-wrap: wrap; }
#dsort button { font-size: .8rem; }

/* favourite club: kit stripe, club tiles and touches of colour */
.club-tile { --c1: var(--club-main, #34507a); --c2: color-mix(in srgb, var(--club-main, #34507a) 72%, #000); --c3: color-mix(in srgb, var(--club-main, #34507a) 45%, #000); color: var(--club-ink, #fff); }
.club-tile small { opacity: .92; }
.club-tile .stat-btn { color: var(--club-ink, #fff); border-color: color-mix(in srgb, var(--club-trim, #fff) 50%, transparent); }
.has-club body::before { content: ''; position: fixed; top: 0; left: 0; right: 0; height: 5px; z-index: 45;
  background: repeating-linear-gradient(90deg, var(--club-main) 0 22px, var(--club-trim) 22px 30px); }
.has-club .section-title::before { background: var(--club-main); }
.has-club .tabbar a.on { background: color-mix(in srgb, var(--club-main) 18%, transparent); }
.has-club .appbar .icon-btn { border-color: color-mix(in srgb, var(--club-main) 45%, transparent); }
.fan-chip .chip { font-size: .72rem; vertical-align: middle; }
.tile.done .tile-pb { left: 46px; }

/* v14: live calendar icon + results spread */
.cal-ico { display: inline-block; width: 1.05em; height: 1.1em; vertical-align: -0.18em; overflow: visible; }
.tile-icon .cal-ico { transform: rotate(-4deg); }
.tabbar .cal-slot { font-style: normal; }
.dist { margin: 10px 0; padding: 12px; border-radius: 16px; background: var(--panel); border: 1px solid var(--line); box-shadow: 0 3px 0 var(--edge); display: grid; gap: 4px; text-align: left; }
.dist h4 { margin: 0 0 4px; font: 700 1rem Oswald, sans-serif; }
.dist div { display: grid; grid-template-columns: 58px 1fr; gap: 8px; align-items: center; font-size: .8rem; font-weight: 700; }
.dist div span { text-align: right; color: var(--muted); }
.dist i { font-style: normal; background: #56655e; color: #fff; text-align: right; padding: 3px 7px; border-radius: 6px; font-weight: 800; min-width: 24px; transition: width .5s; }
.dist i.me { background: #22a06b; animation: pop .5s; }
.dist small { color: var(--muted); font-size: .7rem; text-align: right; }
.tabbar a > span { display: flex; align-items: center; justify-content: center; height: 1.3em; line-height: 1; }
.tabbar .cal-ico { vertical-align: 0; width: 1em; height: 1.05em; }

/* ================================================================ v15: layout tidy-up */
/* titles with an icon (e.g. the calendar) stay on one line */
.topbar h2 { display: flex; align-items: center; justify-content: center; gap: 6px; }
/* tile icons sit behind the words instead of covering them */
.tile-icon { z-index: 0; line-height: 1; opacity: .95; }
.tile > b, .tile > small, .tile > .stat-pick, .tile > .bar { position: relative; z-index: 1; }
.tile-pb { z-index: 1; }
.tile > b { text-shadow: 0 2px 0 rgba(0,0,0,.3), 0 0 10px rgba(0,0,0,.35); max-width: 100%; }
.tile-icon .cal-ico { vertical-align: top; }
.tile.done::after { z-index: 2; }
/* names on the pitch are always light on the green */
.pitch, .pitch .slot-name { color: #fff; }
.pitch .slot-name { text-shadow: 0 1px 2px rgba(0,0,0,.6); }
/* tab bar: nothing clipped, even on small phones */
.tabbar { gap: 0; padding-left: 4px; padding-right: 4px; }
.tabbar a { min-width: 0; padding: 6px 2px; white-space: nowrap; }

/* the draft fits one phone screen: compact counter, pitch, wildcard bar and reels */
.page-draft .topbar { margin-bottom: 4px; }
.page-draft .counter { padding: 6px 12px; }
.page-draft .counter-num b { font-size: 2rem; }
.page-draft .counter .bar { margin: 2px 0; height: 6px; }
.page-draft .counter-sub { font-size: .78rem; }
.page-draft .pitch { margin: 6px 0; padding: 4px 2px; }
.page-draft .pitch-row { margin: 2px 0; }
.page-draft .slot { min-height: 52px; gap: 1px; }
.page-draft .slot .avatar { width: 28px; height: 28px; font-size: .62rem; }
.page-draft .slot-name { font-size: .66rem; }
.page-draft .slot-goals { font-size: .72rem; padding: 0 5px; }
.page-draft .inv { padding: 5px 8px; }
.page-draft .inv .muted { font-size: .78rem; }
.page-draft .reels { margin-top: 8px; }
.page-draft .reel { min-height: 176px; padding: 8px 5px; gap: 3px; }
.page-draft .reel .avatar.lg { width: 50px; height: 50px; font-size: 1rem; }
.page-draft .reel-name { font-size: .92rem; }
.page-draft .reel-goals { padding: 3px 6px; }
.page-draft .reel-goals b { font-size: 1.15rem; }
.page-draft .actions { margin: 8px 0; }
.page-draft .hint { font-size: .85rem; }
.spin-zone { margin-top: 10px; }
.spin-zone .btn.spin { width: 100%; padding: 18px; font-size: 1.8rem; }
@media (max-height: 700px) {
  .page-draft .slot { min-height: 46px; }
  .page-draft .reel { min-height: 160px; }
}
/* the results spread only once there's something in it */
.dist.empty { display: none; }
.tile-icon { font-size: 2.4rem; top: 10px; right: 10px; }
/* photo framing per source (PL cut-outs are head-and-shoulders; others zoom onto the detected face) */
.avatar img.ph-pl { height: 130%; object-position: top; }
.avatar img.ph-x { height: 100%; object-position: 50% 18%; }
.avatar img.fitted { inset: auto; object-fit: fill; max-width: none; }
/* version switches inside the Ultimate and Target cards */
.variant { display: flex; gap: 4px; margin-top: 10px; padding: 3px; border-radius: 12px; background: rgba(0,0,0,.22); }
.variant button { flex: 1; border: 0; background: transparent; color: rgba(255,255,255,.8); padding: 7px 4px; border-radius: 9px; font: 800 .78rem Inter, sans-serif; cursor: pointer; white-space: nowrap; }
.variant button.on { background: #fff; color: #1d1147; box-shadow: 0 2px 0 rgba(0,0,0,.25); }
.target-tile .variant button.on { color: #85222a; }
.tile .variant { position: relative; z-index: 1; }
.loading-all { padding: 40px 10px; display: grid; gap: 12px; justify-items: center; }
.setting-btns { display: flex; flex-wrap: wrap; gap: 8px; }
.code-box { font: 700 1rem ui-monospace, monospace; word-break: break-all; background: var(--inset); border-radius: 12px; padding: 12px; user-select: all; text-align: center; }
.claim { display: grid; gap: 6px; }
.claim-msg.ok { color: var(--good); font-weight: 700; } .claim-msg.no { color: var(--bad); font-weight: 700; }

/* online head-to-head */
.variant-row { display: flex; gap: 4px; padding: 4px; border-radius: 14px; background: var(--inset); margin: 4px 0 10px; }
.variant-row > * { flex: 1; text-align: center; padding: 9px; border-radius: 10px; font-weight: 800; color: var(--muted); text-decoration: none; }
.variant-row .on { background: var(--accent); color: #0a2a1f; box-shadow: 0 3px 0 var(--btn-edge); }
.join-row { display: flex; gap: 8px; } .join-row .input { text-transform: uppercase; letter-spacing: 4px; font: 800 1.2rem ui-monospace, monospace; }
.room-code { text-align: center; padding: 24px 10px; display: grid; gap: 4px; }
.room-code b { font: 700 3.4rem Oswald, sans-serif; letter-spacing: 8px; color: var(--hi); }
.opp-bar { margin: 4px 0; padding: 6px 12px; border-radius: 12px; background: color-mix(in srgb, var(--p2) 18%, transparent); font-size: .85rem; }
.race-final { font: 700 1.2rem Oswald, sans-serif; }
.duel-board { margin-top: 0; } .duel-board .h2h-team strong { font-size: 2.2rem; } .duel-board small { font-size: .7rem; opacity: .9; }
.duel-turn { text-align: center; padding: 10px; border-radius: 14px; background: var(--inset); font-weight: 800; }
.duel-turn.mine { background: var(--accent); color: #0a2a1f; box-shadow: 0 3px 0 var(--btn-edge); animation: pop .4s; }
.duel-turn small { display: block; font-weight: 600; opacity: .8; font-size: .72rem; }
.duel-reel .mate.nofit { background: #56655e; color: #fff; }
.duel-reel .reel-goals small { display: block; }
.duel-xi { display: grid; grid-template-columns: repeat(auto-fill, minmax(98px, 1fr)); gap: 4px; margin: 6px 0; }
.dx { display: flex; align-items: center; gap: 4px; padding: 5px 6px; border-radius: 10px; background: var(--inset); font-size: .75rem; min-width: 0; }
.dx b { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .dx i { font-style: normal; font-weight: 800; color: var(--hi); }
.dx.on { background: var(--panel); box-shadow: 0 2px 0 var(--edge); }
.mode-card .variant button { display: flex; flex-direction: column; align-items: center; gap: 1px; padding: 5px 2px; font-size: .7rem; }
.mode-card .variant button span { font-size: 1rem; line-height: 1.1; }
.mode-card .wild-switch { margin-top: 6px; }
.mode-card .wild-switch button { flex-direction: row; justify-content: center; font-size: .74rem; padding: 6px 2px; }

/* v16: the Club look - the dark theme re-tinted in your favourite club's colours */
:root.has-club.club-theme {
  --bg: color-mix(in srgb, var(--club-main) 30%, #05100b); --bg2: color-mix(in srgb, var(--club-main) 42%, #07130e);
  --panel: color-mix(in srgb, var(--club-main) 48%, #0c1813); --panel2: color-mix(in srgb, var(--club-main) 56%, #13211a);
  --bg-grad: color-mix(in srgb, var(--club-main) 70%, #000); --modal: var(--bg2);
  --nav: color-mix(in srgb, var(--club-main) 28%, rgba(5,16,11,.94));
  --accent: var(--club-light); --hi: var(--club-light); --link: var(--club-light); --logo1: var(--club-light);
  --btn-edge: color-mix(in srgb, var(--club-light) 55%, #000);
}
:root.club-theme .btn.spin { background: linear-gradient(180deg, color-mix(in srgb, var(--club-light) 60%, #fff), var(--club-light)); box-shadow: 0 6px 0 var(--btn-edge); }
.share-game { width: 100%; margin: 18px 0 4px; }

/* v16 online: games list, friends, duel cards, comparison */
.h2h-banner { position: relative; }
.online-badge { position: absolute; top: -6px; right: -4px; min-width: 22px; height: 22px; padding: 0 6px; border-radius: 11px; background: var(--bad); color: #fff; font: 800 .8rem/22px Inter, sans-serif; font-style: normal; box-shadow: 0 2px 0 rgba(0,0,0,.25); animation: pop .4s; }
.variant-row .online-badge, .online-badge.inline { position: static; display: inline-block; margin-left: 4px; }
.online-badge[hidden] { display: none; }
.online-me { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 12px 14px; border-radius: 16px; background: var(--panel); box-shadow: 0 3px 0 var(--edge); }
.section-title .count { font: 800 .75rem Inter, sans-serif; background: var(--bad); color: #fff; border-radius: 10px; padding: 1px 7px; letter-spacing: 0; }
.og-list { display: grid; gap: 8px; }
.og-row { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 14px; background: var(--panel); color: var(--text); text-decoration: none; box-shadow: 0 3px 0 var(--edge); }
.og-row:active { transform: translateY(2px); box-shadow: 0 1px 0 var(--edge); }
.og-icon { font-size: 1.6rem; }
.og-main { display: grid; min-width: 0; } .og-main small { color: var(--muted); font-size: .75rem; } .og-main .og-sub { color: var(--text); font-weight: 700; font-size: .8rem; }
.og-when { color: var(--muted); font-size: .72rem; }
.og-row.res-won { border-left: 4px solid var(--good); } .og-row.res-lost { border-left: 4px solid var(--bad); } .og-row.res-drew { border-left: 4px solid var(--accent2); }
.friends { display: grid; gap: 8px; margin-bottom: 10px; }
.friend { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 14px; background: var(--panel); }
.f-av { width: 38px; height: 38px; border-radius: 50%; display: grid; place-items: center; background: var(--p2); color: #fff; font: 800 .85rem Inter, sans-serif; }
.f-main { display: grid; min-width: 0; } .f-main b { overflow: hidden; text-overflow: ellipsis; }
.rec b { font-size: .75rem; padding: 1px 5px; border-radius: 6px; margin-right: 2px; }
.rec .w { background: color-mix(in srgb, var(--good) 25%, transparent); } .rec .d { background: color-mix(in srgb, var(--accent2) 25%, transparent); } .rec .l { background: color-mix(in srgb, var(--bad) 25%, transparent); }
.friends + .join-row .input, #ofriend { text-transform: none; letter-spacing: 0; font: 600 1rem Inter, sans-serif; }
.seg.wrap { flex-wrap: wrap; } .seg.wrap button { flex: 1 1 auto; }
.banner.invite { display: flex; align-items: center; justify-content: space-between; gap: 8px; flex-wrap: wrap; }
.duel-turn .clock { display: inline-grid; place-items: center; width: 34px; height: 34px; margin-top: 4px; border-radius: 50%; background: #0a2a1f; color: #fff; font: 800 1rem Inter, sans-serif; }
.duel-turn .clock.hurry { background: var(--bad); animation: pop .5s infinite; }
.duel-cards { display: grid; grid-template-columns: repeat(6, 1fr); gap: 6px; margin: 8px 0; }
.duel-card { grid-column: span 2; position: relative; display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 8px 4px 6px; border: 0; border-radius: 14px; background: var(--panel); color: var(--text); box-shadow: 0 3px 0 var(--edge); font: inherit; text-align: center; min-width: 0; cursor: pointer; }
.duel-card:nth-child(4) { grid-column: 2 / span 2; }
.duel-card:disabled { cursor: default; }
.duel-card b { font-size: .78rem; line-height: 1.1; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.duel-card small { font-size: .66rem; color: var(--muted); }
.duel-card .chips { display: flex; flex-wrap: wrap; justify-content: center; gap: 2px; } .duel-card .chips small { align-self: center; }
.duel-card .avatar { width: 46px; height: 46px; }
.duel-card.taken { opacity: .45; } .duel-card.nofit { opacity: .6; filter: grayscale(.6); }
.duel-card:not(:disabled):active { transform: translateY(2px); box-shadow: 0 1px 0 var(--edge); }
.duel-card:not(:disabled) { outline: 2px solid color-mix(in srgb, var(--accent) 70%, transparent); }
.dc-tag { position: absolute; top: -7px; left: 50%; transform: translateX(-50%); white-space: nowrap; font-size: .62rem; font-weight: 800; padding: 1px 6px; border-radius: 8px; background: #0a2a1f; color: #fff; }
.dc-meta { display: flex; gap: 2px; justify-content: center; flex-wrap: wrap; }
.cmp-points { width: 100%; border-collapse: collapse; margin: 10px 0; font-size: .85rem; }
.cmp-points th { text-align: center; font-size: .72rem; color: var(--muted); padding: 4px; } .cmp-points th:first-child { text-align: left; }
.cmp-points td { padding: 7px 4px; text-align: center; border-top: 1px solid var(--line); font-weight: 700; } .cmp-points td:first-child { text-align: left; font-weight: 600; }
.cmp-points td.won { background: color-mix(in srgb, var(--good) 22%, transparent); border-radius: 8px; }
.cmp-points td:last-child { color: var(--muted); font-size: .75rem; }
.cmp { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.cmp h4 { margin: 4px 0; text-align: center; font: 700 .95rem Oswald, sans-serif; }
.cmp-xi { display: grid; gap: 3px; }
.cx { display: flex; align-items: center; gap: 4px; padding: 4px 6px; border-radius: 9px; background: var(--panel); font-size: .75rem; min-width: 0; }
.cx b { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .cx i { font-style: normal; font-weight: 800; color: var(--hi); }
.cx.empty { opacity: .5; background: var(--inset); }
.page-online #challenge, .page-online a[href^="#/leaderboard"] { display: none; }
.prow.credit > div { min-width: 0; } .prow.credit small { overflow-wrap: anywhere; }
/* Scout Duel */
.avatar.mystery { background: repeating-linear-gradient(45deg, var(--inset) 0 6px, transparent 6px 12px), var(--panel2); color: var(--muted); }
.avatar.mystery b { font-size: 1.3rem; }
.duel-card.scout .clue { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 2px; font-size: .68rem; color: var(--text); line-height: 1.25; }
.duel-card.scout.scouted { box-shadow: 0 3px 0 var(--edge), 0 0 0 2px var(--accent2); }
.duel-card.pick-me { animation: pop .5s; outline: 2px dashed var(--accent2); }
.scout-hand { margin: 6px 0 10px; padding: 8px; border-radius: 16px; background: linear-gradient(135deg, color-mix(in srgb, #6b3cff 22%, var(--panel)), color-mix(in srgb, #b33cff 16%, var(--panel))); box-shadow: 0 3px 0 var(--edge); }
.scout-hand.live { outline: 2px solid #b33cff; }
.sh-title { display: flex; align-items: baseline; gap: 6px; flex-wrap: wrap; font: 700 .9rem Oswald, sans-serif; margin: 0 2px 6px; }
.sh-title span { font: 600 .7rem system-ui, sans-serif; color: var(--muted); }
.sh-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.sh-card { position: relative; display: flex; flex-direction: column; align-items: center; gap: 1px; padding: 8px 4px 7px; border: 0; border-radius: 12px; background: linear-gradient(135deg, #6b3cff, #b33cff); color: #fff; box-shadow: 0 3px 0 #3a1d8f; font: inherit; text-align: center; cursor: pointer; min-width: 0; }
.sh-card .sh-icon { font-size: 1.5rem; line-height: 1.1; }
.sh-card b { font-size: .8rem; }
.sh-card small { font-size: .62rem; line-height: 1.2; opacity: .9; }
.sh-card .sh-n { position: absolute; top: -6px; right: -4px; font-style: normal; font-weight: 800; font-size: .68rem; padding: 1px 6px; border-radius: 9px; background: var(--accent2); color: #0a2a1f; }
.sh-card:disabled { cursor: default; opacity: .4; filter: grayscale(.5); }
.scout-hand.live .sh-card:not(:disabled) { animation: pop .5s; }
.sh-card:not(:disabled):active { transform: translateY(2px); box-shadow: 0 1px 0 #3a1d8f; }
.duel-card.bonus-card { background: linear-gradient(135deg, #6b3cff, #b33cff); color: #fff; justify-content: center; }
.duel-card.bonus-card small { color: #fff; opacity: .9; }
.bonus-card .bc-icon { font-size: 1.9rem; line-height: 1.1; margin-top: 4px; }
.bonus-card .bc-note { font-size: .6rem; font-weight: 700; margin-top: 3px; padding: 1px 6px; border-radius: 8px; background: rgba(0,0,0,.25); }
/* six on the reels (five players + a bonus card): two even rows of three */
.duel-cards:has(> :nth-child(6)) .duel-card:nth-child(4) { grid-column: span 2; }
.swap-list { display: grid; gap: 6px; max-height: 50vh; overflow: auto; margin: 8px 0; }
.swap-list .btn { justify-content: flex-start; font-weight: 600; }
.duel-card.scout .clue { background: none; box-shadow: none; border: 0; padding: 0; margin: 1px 0; min-height: 0; border-radius: 0; }
.duel-card.scout > b { font-size: .72rem; color: var(--muted); }
/* version labels: whole-number releases stand out, point releases are quieter */
.ver:not(.major) { background: var(--panel2); color: var(--text); box-shadow: 0 3px 0 var(--edge); }
.ver.major { background: linear-gradient(135deg, var(--accent2), var(--accent)); }
.section-title.era { margin-top: 18px; }

/* v16 transfer market: Moneyball, Transfer Window, Auction */
.duel-cards.mk4 { grid-template-columns: 1fr 1fr; }
.duel-cards.mk4 .duel-card, .duel-cards.mk4 .duel-card:nth-child(4) { grid-column: auto; }
.mk-card { padding-bottom: 8px; }
.mk-price { margin-top: 4px; padding: 3px 10px; border-radius: 10px; background: #0a2a1f; color: #c8ff3d; font: 800 .9rem Inter, sans-serif; }
.mk-card:disabled .mk-price { background: var(--inset); color: var(--muted); }
.mk-card:disabled { opacity: .6; }
.mk-budget { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; margin: 8px 0; }
.mk-budget > div { display: grid; text-align: center; padding: 8px 4px; border-radius: 12px; background: var(--panel); box-shadow: 0 3px 0 var(--edge); }
.mk-budget small { font-size: .66rem; color: var(--muted); text-transform: uppercase; letter-spacing: .5px; } .mk-budget b { font: 700 1.25rem Oswald, sans-serif; }
.mk-squad { display: grid; gap: 4px; }
.mk-row { display: grid; grid-template-columns: auto 1fr auto auto auto; align-items: center; gap: 6px; padding: 6px 8px; border-radius: 10px; background: var(--panel); font-size: .82rem; min-width: 0; }
.mk-row b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .mk-row.empty { background: var(--inset); opacity: .7; }
.mk-row .mk-paid { color: var(--muted); font-size: .75rem; } .mk-row i { font-style: normal; font-weight: 800; color: var(--hi); min-width: 1.5em; text-align: right; }
.mk-row .btn { padding: 4px 8px; font-size: .72rem; }
.cmp .mk-row { grid-template-columns: auto 1fr auto; font-size: .72rem; padding: 4px 6px; } .cmp .mk-row .mk-paid { display: none; }
.mk-news { display: grid; gap: 4px; font-size: .8rem; padding: 6px 2px; }
.mk-lot { display: grid; grid-template-columns: auto 1fr; gap: 12px; align-items: center; padding: 12px; margin: 8px 0; border-radius: 16px; background: var(--panel); box-shadow: 0 3px 0 var(--edge); }
.mk-lot > div { display: grid; gap: 3px; min-width: 0; } .mk-lot small { color: var(--muted); font-size: .72rem; } .mk-lot b { font: 700 1.3rem Oswald, sans-serif; }
.mk-guide { justify-self: start; margin-top: 2px; padding: 2px 8px; border-radius: 8px; background: var(--inset); font-weight: 700; font-size: .8rem; }
.mk-bid { display: grid; gap: 6px; justify-items: center; margin: 8px 0; }
.mk-bid-amt { font: 700 2.2rem Oswald, sans-serif; } .mk-bid-amt input { width: 3.2em; font: inherit; text-align: center; border: 0; border-bottom: 3px solid var(--accent); background: transparent; color: var(--text); }
.mk-bid input[type=range] { width: 100%; accent-color: var(--accent); height: 30px; }
.mk-cover { text-align: center; padding: 24px 12px; border-radius: 18px; background: var(--panel); margin: 10px 0; box-shadow: 0 3px 0 var(--edge); }
.mk-sold small { display: block; opacity: .75; font-size: .75rem; }
.join-row.names .input { text-transform: none; letter-spacing: 0; font: 600 1rem Inter, sans-serif; }
.stat-row { display: flex; gap: 8px; margin: 12px 0; } .stat-row .stat-btn { color: var(--text); background: var(--panel); border-color: var(--line); padding: 14px 6px; }
.duel-turn > b { font-weight: 800; }
.mk-lot .avatar, .mk-card .avatar { box-shadow: 0 0 0 1px var(--line); }
/* v4.2 album: pick stats and sign counts */
.slot-times { position: absolute; top: -6px; left: -4px; font: 800 .62rem Inter, sans-serif; background: var(--accent2); color: #0a2a1f; border-radius: 8px; padding: 1px 5px; }
.slot.filled { position: relative; }
.picks { display: grid; gap: 10px; }
.picks > div { background: var(--panel); border-radius: 14px; padding: 10px 12px; box-shadow: 0 3px 0 var(--edge); }
.picks h4 { margin: 0 0 6px; font: 700 .95rem Oswald, sans-serif; letter-spacing: .5px; }
.picks ol { margin: 0; padding: 0; list-style: none; display: grid; gap: 5px; counter-reset: pk; }
.picks li { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 8px; font-size: .85rem; min-width: 0; }
.picks li b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .picks li span { color: var(--muted); font-size: .75rem; }
.signed { font-style: normal; font-size: .68rem; font-weight: 800; color: var(--hi2); }
.chaos-pts { margin-left: 8px; font: 800 .8rem Inter, sans-serif; color: var(--accent2); }
:root .banner.chaos-event, :root[data-theme] .banner.chaos-event { background: linear-gradient(135deg, #7a00ff, #ff2bd6); color: #fff; border: 0; animation: pop .4s; box-shadow: 0 0 20px rgba(255, 43, 214, .5); }
.chaos-card { margin-top: 14px; padding: 14px; border-radius: 20px; color: #fff; background: radial-gradient(circle at 20% 0%, #ff4d6d 0, transparent 55%), radial-gradient(circle at 90% 100%, #ffb020 0, transparent 50%), linear-gradient(135deg, #2a0f45, #5b1236); box-shadow: 0 5px 0 #1a0a2b; }
.chaos-head { display: flex; gap: 10px; align-items: center; } .chaos-head > span { font-size: 2.2rem; animation: spin 6s linear infinite; }
.chaos-head b { display: block; font: 700 1.25rem Oswald, sans-serif; text-transform: uppercase; letter-spacing: 1px; } .chaos-head small { opacity: .85; font-size: .78rem; }
.chaos-card .stat-row { margin: 10px 0 0; } .chaos-card .stat-btn { color: #fff; background: rgba(255,255,255,.14); border-color: rgba(255,255,255,.25); padding: 9px 6px; }
@keyframes spin { to { transform: rotate(360deg); } }
/* calm animations (Settings → Look: Calm) */ body.calm .chaos-head > span { animation: none; }

/* ================= Ultimate Wildcard CHAOS: its own neon look (body.chaos-mode is set by the router) ================= */
body.chaos-mode {
  --bg: #12001f; --bg2: #1d0433; --panel: #2a0a4a; --panel2: #3a0f5f; --text: #fff4fe; --muted: #d9a8ff;
  --accent: #ffe600; --hi: #ff2bd6; --hi2: #00f0ff; --link: #00f0ff; --line: rgba(255, 43, 214, .28); --edge: rgba(0, 0, 0, .55);
  --inset: rgba(0, 0, 0, .3); --modal: #1d0433; --nav: rgba(18, 0, 31, .92); --btn-edge: #a8008c; --good: #39ff88; --bad: #ff3b5c;
  --toast-bg: #ff2bd6; --toast-text: #fff; --logo1: #ffe600;
  color-scheme: dark; color: var(--text); background: transparent;
}
html:has(body.chaos-mode) { background: #12001f; }
body.chaos-mode::before { content: ''; position: fixed; inset: -20%; z-index: -1; pointer-events: none;
  background: radial-gradient(40% 30% at 20% 20%, rgba(255, 43, 214, .35), transparent 70%), radial-gradient(35% 30% at 85% 30%, rgba(0, 240, 255, .28), transparent 70%),
    radial-gradient(45% 35% at 50% 90%, rgba(255, 230, 0, .22), transparent 70%), #12001f;
  animation: chaos-bg 14s ease-in-out infinite alternate; will-change: transform; }
body.chaos-mode::after { content: ''; position: fixed; inset: 0; z-index: -1; pointer-events: none; opacity: .18;
  background: repeating-linear-gradient(0deg, rgba(255,255,255,.07) 0 1px, transparent 1px 3px); }
/* (5.39: transform only, so the phone's GPU moves it without redrawing it; animating a filter on a layer this big cost frames) */
@keyframes chaos-bg { 0% { transform: rotate(0deg) scale(1); } 100% { transform: rotate(8deg) scale(1.12); } }
body.chaos-mode .topbar h2 { font-family: Oswald, Impact, sans-serif; text-transform: uppercase; letter-spacing: 2px; color: #fff;
  text-shadow: 2px 0 #ff2bd6, -2px 0 #00f0ff; animation: glitch 2.6s infinite steps(1); }
@keyframes glitch { 0%, 92%, 100% { transform: none; } 93% { transform: translate(2px, -1px) skewX(-8deg); text-shadow: 4px 0 #ff2bd6, -4px 0 #00f0ff; } 95% { transform: translate(-2px, 1px); } 97% { transform: skewX(6deg); } }
body.chaos-mode .reel, body.chaos-mode .slot, body.chaos-mode .counter { border-color: rgba(255, 43, 214, .55); }
body.chaos-mode .reel { box-shadow: 0 0 0 2px rgba(255, 43, 214, .35), 0 0 18px rgba(255, 43, 214, .35); animation: neon 3s linear infinite; }
@keyframes neon { 0%, 100% { box-shadow: 0 0 0 2px rgba(255, 43, 214, .5), 0 0 16px rgba(255, 43, 214, .4); } 50% { box-shadow: 0 0 0 2px rgba(0, 240, 255, .5), 0 0 18px rgba(0, 240, 255, .4); } }
body.chaos-mode .btn.spin { background: linear-gradient(90deg, #ff2bd6, #ffe600, #00f0ff, #ff2bd6); background-size: 300% 100%; color: #12001f;
  box-shadow: 0 6px 0 #a8008c, 0 0 30px rgba(255, 43, 214, .55); animation: rainbow 2.4s linear infinite; }
@keyframes rainbow { to { background-position: 300% 0; } }
body.chaos-mode .counter-num b { color: #ffe600; text-shadow: 0 0 12px rgba(255, 230, 0, .6); }
body.chaos-mode .pitch { box-shadow: 0 0 0 2px rgba(0, 240, 255, .5), 0 0 24px rgba(0, 240, 255, .35); }
body.chaos-mode .reel.is-wild { background: linear-gradient(160deg, #ff2bd6, #9b00ff 60%, #00c2ff); color: #fff; }  /* the whole card, not a box inside it */
body.chaos-mode .result-score { color: #ffe600; text-shadow: 0 0 20px rgba(255, 230, 0, .6); }
.chaos-meter { display: flex; align-items: center; gap: 4px; margin-top: 6px; font: 800 .66rem Inter, sans-serif; letter-spacing: 2px; color: #ff2bd6; }
.chaos-meter span { margin-right: 4px; }
.chaos-meter i { flex: 1; height: 8px; border-radius: 4px; background: rgba(255, 255, 255, .1); }
.chaos-meter i.on { background: linear-gradient(90deg, #ff2bd6, #ffe600); box-shadow: 0 0 10px #ff2bd6; animation: pop .4s; }
.chaos-level { font: 700 1.1rem Oswald, sans-serif; letter-spacing: 1px; text-transform: uppercase; color: #ff2bd6; margin: 6px 0; }
.chaos-level small { display: block; font: 400 1rem sans-serif; letter-spacing: 2px; text-transform: none; margin-top: 4px; word-break: break-all; }
#app.shake { animation: shake .5s; }
@keyframes shake { 0%, 100% { transform: none; } 15% { transform: translate(-8px, 3px) rotate(-1deg); } 30% { transform: translate(7px, -4px) rotate(1deg); } 45% { transform: translate(-6px, 2px); } 60% { transform: translate(5px, -2px); } 75% { transform: translate(-3px, 1px); } }
.chaos-flash { position: fixed; inset: 0; z-index: 90; pointer-events: none; animation: flash .7s ease-out forwards; }
.chaos-flash.bad { background: radial-gradient(circle, rgba(255, 59, 92, .55), rgba(255, 59, 92, .1)); }
.chaos-flash.good { background: radial-gradient(circle, rgba(255, 230, 0, .5), rgba(57, 255, 136, .08)); }
.chaos-flash.storm, .chaos-flash.weird { background: radial-gradient(circle, rgba(0, 240, 255, .45), rgba(122, 0, 255, .12)); }
.chaos-flash.unleash { background: conic-gradient(from 0deg, #ff2bd6, #ffe600, #00f0ff, #ff2bd6); opacity: .6; }
@keyframes flash { from { opacity: 1; } to { opacity: 0; } }
.chaos-emoji { position: fixed; bottom: -40px; z-index: 91; pointer-events: none; animation: float-up 1.8s ease-out forwards; }
@keyframes float-up { 0% { transform: translateY(0) rotate(0); opacity: 1; } 100% { transform: translateY(-105vh) rotate(540deg); opacity: 0; } }
/* calm animations (Settings → Look: Calm) */ body.calm.chaos-mode::before, body.calm.chaos-mode .topbar h2, body.calm.chaos-mode .reel, body.calm.chaos-mode .btn.spin, body.calm #app.shake { animation: none; } body.calm .chaos-emoji { display: none; }
body.chaos-mode .reel { background: linear-gradient(160deg, #3a0f5f, #1d0433); color: #fff4fe; }
body.chaos-mode .reel .reel-name { color: #fff; } body.chaos-mode .reel .reel-meta, body.chaos-mode .reel small { color: #d9a8ff; }
body.chaos-mode .reel .reel-goals { background: rgba(0, 0, 0, .35); color: #ffe600; }
.tabbar a > span { position: relative; }
.tabbar .online-badge { position: absolute; top: -6px; right: -12px; min-width: 18px; height: 18px; line-height: 18px; font-size: .65rem; padding: 0 5px; }
.btn.danger { color: var(--bad); border-color: color-mix(in srgb, var(--bad) 50%, transparent); margin-top: 8px; }
.chaos-daily { display: grid; grid-template-columns: auto 1fr auto; gap: 2px 8px; align-items: center; margin-top: 10px; padding: 9px 12px; border-radius: 14px; text-decoration: none; color: #fff; background: rgba(0, 0, 0, .28); border: 1px dashed rgba(255, 230, 0, .6); }
.chaos-daily b { font: 700 1rem Oswald, sans-serif; letter-spacing: 1px; text-transform: uppercase; } .chaos-daily span { grid-column: 2; font-size: .75rem; opacity: .85; } .chaos-daily i { grid-row: 1 / span 2; grid-column: 3; font-style: normal; font-weight: 800; }
.league-modes button { font-size: .75rem; padding: 6px 8px; }
.league ol { list-style: none; margin: 8px 0; padding: 0; display: grid; gap: 5px; }
.league li { display: grid; grid-template-columns: 2em 1fr auto; align-items: center; gap: 8px; padding: 8px 12px; border-radius: 12px; background: var(--panel); box-shadow: 0 2px 0 var(--edge); }
.league li.me { outline: 2px solid var(--accent); } .league li.none { opacity: .55; }
.league .lg-pos { font-weight: 800; text-align: center; } .league .lg-score { font: 700 1.1rem Oswald, sans-serif; text-align: right; } .league .lg-score small { display: block; font: 600 .65rem Inter, sans-serif; color: var(--muted); }
.new-tag { position: absolute; top: 8px; right: 8px; z-index: 2; padding: 2px 7px; border-radius: 8px; background: #ff2bd6; color: #fff; font: 800 .62rem Inter, sans-serif; letter-spacing: 1px; box-shadow: 0 2px 0 rgba(0,0,0,.25); animation: pop .5s; }
.chaos-card { position: relative; }
.welcome { text-align: center; } .welcome .wl-icon { font-size: 3.4rem; animation: pop .4s; } .welcome p { line-height: 1.5; }
.wl-dots { display: flex; justify-content: center; gap: 6px; margin: 10px 0; } .wl-dots i { width: 8px; height: 8px; border-radius: 50%; background: var(--line); } .wl-dots i.on { background: var(--accent); width: 20px; border-radius: 4px; }
.nstatus { display: grid; gap: 3px; margin: 6px 0; font-size: .8rem; }
/* profile pictures */
.avatar.upic img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.avatar.upic.lg { width: 64px; height: 64px; font-size: 1.2rem; } .avatar.upic.xl { width: 110px; height: 110px; font-size: 2rem; margin: 0 auto 6px; }
.avatar.upic.board { width: 40px; height: 40px; margin: 0 auto 2px; display: flex; border-color: rgba(255,255,255,.85); }
.pic-row { display: grid; grid-template-columns: auto 1fr; gap: 12px; align-items: center; margin: 10px 0; }
.pic-row small { display: block; } .pic-row label.btn { cursor: pointer; }
.online-me { justify-content: flex-start; } .online-me .btn { margin-left: auto; } .me-pic { text-decoration: none; }
.friend .f-av { width: auto; height: auto; padding: 0; background: none; border: 0; cursor: pointer; }
.og-icon { position: relative; } .og-icon .avatar { width: 40px; height: 40px; } .og-icon i { position: absolute; right: -6px; bottom: -4px; font-style: normal; font-size: 1rem; }
.league li b { display: flex; align-items: center; gap: 8px; min-width: 0; } .league li .avatar { width: 28px; height: 28px; font-size: .62rem; }
/* in-app notification card */
.notice { position: fixed; left: 50%; top: calc(10px + env(safe-area-inset-top)); z-index: 95; width: min(92vw, 520px); display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 12px;
  padding: 12px 14px; border-radius: 18px; background: var(--toast-bg); color: var(--toast-text); text-decoration: none; box-shadow: 0 10px 34px rgba(0,0,0,.4);
  transform: translate(-50%, -140%); transition: transform .3s cubic-bezier(.2,.9,.3,1.2); }
.notice.show { transform: translate(-50%, 0); }
.notice .avatar { width: 44px; height: 44px; }
.notice-icon { font-size: 2rem; }
.notice-text { display: grid; min-width: 0; } .notice-text b { font-size: .95rem; line-height: 1.25; } .notice-text small { opacity: .75; font-size: .78rem; }
.notice-go { font: 700 1.6rem Oswald, sans-serif; opacity: .6; }

/* the draft pitch grows into the space on taller phones (it was sized for the smallest ones), still fitting one screen */
.page-draft .slot { min-height: 0; height: var(--slot-h, 52px); overflow: hidden; }  /* set once by fitPitch() in draft.js; filled or empty, the same size */
.page-draft .slot .avatar { flex: none; width: clamp(22px, calc(var(--slot-h, 52px) - 44px), 40px); height: clamp(22px, calc(var(--slot-h, 52px) - 44px), 40px); }  /* (room left for the name and the number, which never touch the edge) */
.page-draft.slots-compact .slot .avatar { width: 22px; height: 22px; font-size: .55rem; }  /* short slots: a small face, never none */
.page-draft.slots-compact .slot { gap: 0; line-height: 1.1; }
.page-draft.slots-compact .slot-goals { font-size: .66rem; line-height: 1.25; }
.page-draft.slots-tiny .slot .avatar { display: none; }  /* only the very shortest: name and number */
/* short screens: the score box slims down (no little line) so the pitch keeps its height */
@media (max-height: 820px) { .page-draft .counter .spark { display: none; } .page-draft .counter.max { padding-top: 6px; padding-bottom: 6px; } }
.page-draft .pitch-row { margin: clamp(2px, calc((100dvh - 760px) / 25), 6px) 0; }
.page-draft .slot-name { font-size: clamp(.66rem, calc(.5rem + .4dvh), .78rem); }
.page-draft .banner.chaos-event { padding: 6px 10px; margin: 4px 0; font-size: .82rem; line-height: 1.3; }
@media (max-height: 760px) { .page-draft .counter-sub { font-size: .72rem; } }
/* leaderboards: categories first */
.lb-cats { display: flex; flex-wrap: wrap; gap: 6px; padding: 4px 2px 10px; }
.lb-cats::-webkit-scrollbar { display: none; }
.lb-cats a { flex: 1 1 auto; text-align: center; padding: 8px 10px; border-radius: 12px; background: var(--panel); color: var(--text); text-decoration: none; font-weight: 800; font-size: .85rem; box-shadow: 0 2px 0 var(--edge); }
.lb-cats a.on { background: var(--accent); color: #0a2a1f; box-shadow: 0 3px 0 var(--btn-edge); }
.top-btns { display: flex; gap: 6px; } .icon-btn.lb-btn { text-decoration: none; display: inline-grid; place-items: center; }
.topbar:has(.top-btns) { grid-template-columns: 86px 1fr 86px; } .top-btns { justify-content: flex-end; }
body.chaos-mode .icon-btn.lb-btn { border-color: rgba(255, 43, 214, .5); }
.chaos-daily .cal-ico { grid-row: 1 / span 2; font-size: 1.6rem; }

/* Online sub-tabs: your games up front, finished games, the league and friends a tap away */
.online-tabs { margin: 10px 0 4px; }
.online-tabs button { position: relative; padding: 9px 2px; font-size: .78rem; white-space: nowrap; }
.ot-n { position: absolute; top: -5px; right: 2px; font: 800 .68rem Inter, sans-serif; font-style: normal; min-width: 18px; padding: 1px 5px; border-radius: 10px; background: var(--bad); color: #fff; }
.ot-n:empty { display: none; }
.og-row.mine { outline: 2px solid var(--accent); box-shadow: 0 3px 0 var(--edge), 0 0 14px color-mix(in srgb, var(--accent) 45%, transparent); }
.og-row.mine .og-sub { color: var(--accent); font-weight: 800; }
.og-empty { display: flex; flex-direction: column; align-items: center; gap: 4px; margin: 14px 0 6px; padding: 16px; border-radius: 16px; background: var(--panel); box-shadow: 0 3px 0 var(--edge); text-align: center; }
.og-empty span { color: var(--muted); font-size: .85rem; margin-bottom: 6px; }
@media (max-width: 360px) { .online-tabs button { font-size: .7rem; } }
/* Home sub-tabs */
.home-tabs { margin: 10px 0 12px; }
.home-tabs button { position: relative; padding: 9px 2px; font-size: .8rem; white-space: nowrap; }
.home-tabs .new-dot { top: 2px; right: 2px; width: 9px; height: 9px; border-width: 1px; }
[data-hpanel] > * + * { margin-top: 12px; }
[data-hpanel] .tiles { margin-top: 12px; }
@media (max-width: 370px) { .home-tabs button { font-size: .72rem; } }
/* Today fits on one screen: slimmer streak card, rows and calendar */
.streak-hero { padding: 10px 14px; margin: 4px 0 10px; gap: 10px; }
.streak-hero .flame { font-size: 2.2rem; }
.streak-hero b { font-size: 2rem; }
.daily-list { gap: 7px; }
.daily-row { padding: 8px 10px; border-radius: 15px; grid-template-columns: 36px 1fr auto auto; }
.dr-icon { font-size: 1.5rem; }
.dr-text small { font-size: .74rem; line-height: 1.25; }
.pick-club { margin-top: 8px; padding: 8px 10px; font-size: .82rem; }
.calendar { gap: 4px; }
.cal-day { aspect-ratio: auto; height: 28px; border-radius: 8px; font-size: .72rem; }
.page-today .section-title { margin-top: 12px; }

/* the draft screen holds still: a one-line title, and a fixed-height dock under the pitch (wildcards, the reels or the
   spin button, and a message area), so the pitch is sized once and never jumps between spins */
.page-draft .topbar h2 { flex-wrap: nowrap; min-width: 0; font-size: clamp(1rem, 4.8vw, 1.3rem); }
.page-draft .t-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.hard-pill { flex: none; font: 800 .62rem Inter, sans-serif; letter-spacing: .5px; text-transform: uppercase; padding: 3px 7px; border-radius: 8px; background: var(--bad); color: #fff; -webkit-text-fill-color: #fff; text-shadow: none; }
.page-draft .counter-sub { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dock { display: flex; flex-direction: column; gap: 6px; margin-top: 8px; }
.page-draft .inv { height: 42px; flex-wrap: nowrap; overflow: hidden; padding: 0 8px; }
.page-draft .inv .muted { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.page-draft .inv .wild-btn { flex-direction: row; gap: 4px; padding: 5px 8px; font-size: .95rem; white-space: nowrap; }
.page-draft .inv .wild-btn small { font-size: .62rem; }
.stage { height: calc(var(--stage-h, 206px) + var(--stage-x, 0px)); }  /* (--stage-x: room the pitch couldn't use, fitPitch) */
.stage.hard { --stage-h: 164px; }
.stage > .reels { height: 100%; margin-top: 0; }
.page-draft .stage .reel { min-height: 0; height: 100%; }
.stage > .spin-zone { height: 100%; margin: 0; display: flex; align-items: center; justify-content: center; }
.stage > .spin-zone .btn.spin { padding: 22px; }
.msg { height: 52px; display: flex; flex-direction: column; justify-content: center; gap: 2px; text-align: center; font-size: .8rem; line-height: 1.3; color: var(--muted); }
.msg .m-top:empty { display: none; }
.m-top { color: var(--text); overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.m-top .m-ev { font-size: .76rem; }
.m-top .m-sp { font: 700 1rem Oswald, sans-serif; color: var(--hi2); letter-spacing: 1px; }
.m-next { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.m-next .btn.small { padding: 3px 10px; margin-left: 6px; font-size: .75rem; }
body.chaos-mode .m-top .m-ev { display: inline-block; padding: 2px 10px; border-radius: 10px; background: linear-gradient(135deg, #7a00ff, #ff2bd6); color: #fff; animation: pop .4s; }
/* Deadline Day: five cards in two short rows, same space */
.stage .reels.n5 { grid-template-columns: repeat(6, 1fr); grid-template-rows: 1fr 1fr; gap: 6px; }
.stage .reels.n5 .reel { grid-column: span 2; padding: 4px; gap: 2px; justify-content: center; }
.stage .reels.n5 .reel:nth-child(4) { grid-column: 2 / span 2; }
.stage .reels.n5 .reel .avatar, .stage .reels.n5 .reel .chips, .stage .reels.n5 .reel .mate, .stage .reels.n5 .reel-meta span, .stage .reels.n5 .reel-goals small { display: none; }
.stage .reels.n5 .reel-name { font-size: .78rem; }
.stage .reels.n5 .reel-goals { margin-top: 2px; padding: 1px 4px; } .stage .reels.n5 .reel-goals b { font-size: .95rem; }
.stage .reels.n5 .wild-desc { display: none; }
/* the in-game leaderboard pop-up */
.lb-pop h3 { margin: 0 0 6px; text-align: center; }
.lb-pop h4 { margin: 12px 0 4px; font: 700 .9rem Oswald, sans-serif; }
.lb-pop .small { font-size: .78rem; margin: 0 0 6px; }
.lb-pop-list { max-height: min(46vh, 380px); overflow-y: auto; }
.lb-pop .row { display: flex; gap: 8px; justify-content: center; align-items: center; margin-top: 12px; }
button.icon-btn.lb-btn { font: inherit; font-size: 1.1rem; cursor: pointer; }
.lb-pop-kicker { text-align: center; margin: -4px 0 8px; font: 800 .68rem Inter, sans-serif; letter-spacing: 1.5px; text-transform: uppercase; color: var(--muted); }
/* inside the fixed-height reels, the club badges give way (clipped to what fits) so the stat box always shows */
.stage .reel > * { flex-shrink: 0; }
.stage .reel .chips { flex: 1 1 0; min-height: 0; overflow: hidden; align-content: flex-start; margin-top: 2px; }
.stage .reel .reel-name { overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
/* polish for the fixed-height reels */
.stage .reel .chips { flex: 0 0 auto; height: 18px; overflow: hidden; margin-top: auto; }  /* one row of club badges, never a sliver */
.stage .reel .avatar.lg { width: 44px; height: 44px; }
.stage .wild-card { gap: 3px; min-height: 0; }
.stage .wild-icon { font-size: 2rem; line-height: 1; }
.stage .wild-desc { overflow: hidden; display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; font-size: .66rem; }
.stage .wild-card .tag { flex: none; }
.stage.hard .wild-desc { -webkit-line-clamp: 3; }
.page-draft .inv-label { white-space: nowrap; flex: none; }
#app.page-draft { padding-bottom: calc(14px + env(safe-area-inset-bottom)); }
/* The Treble: three counts side by side, not three rows */
.page-draft .counter.treble { grid-template-columns: repeat(3, 1fr); gap: 4px 8px; padding: 8px 10px; }
.page-draft .counter.treble .trow { font-size: .7rem; text-align: center; }
.page-draft .counter.treble .trow b { font-size: 1.05rem; display: block; }
.page-draft .counter.treble .counter-sub { grid-column: 1 / -1; }
.stage .reel-goals { flex-direction: row; flex-wrap: wrap; justify-content: center; align-items: baseline; column-gap: 4px; row-gap: 0; padding: 3px 5px; margin-top: 4px; line-height: 1.15; }
.stage .reel-goals small { flex-basis: 100%; }
.stage .reel .reel-meta { row-gap: 1px; line-height: 1.2; }
.stage .reel .chips.tight { gap: 2px; }
.stage .reel .chips.tight .chip { padding: 1px 3px; font-size: .58rem; letter-spacing: 0; border-radius: 4px; }
.stage .reel .chips.two { height: 34px; flex-wrap: wrap; align-content: center; }
.stage .reel .chips .chip[hidden] { display: none; }
.stage .reel .chip-more { --cb: #4a5a52; --cf: #fff; }
.stage .reel:has(.mate) .chips { display: none; } .stage .mate + .avatar { margin-top: 10px; }
/* the three stats always look the same: icon on top, name underneath, all three on one row */
.hard-toggle .sb-ico, .stat-seg .sb-ico { font-style: normal; font-size: 1.1rem; line-height: 1.2; display: block; }
.stat-seg button { display: flex; flex-direction: column; align-items: center; }
.hard-toggle.three > *, .hard-toggle.four > *, .stat-seg button, .stat-pick .stat-btn, .stat-row .stat-btn { white-space: nowrap; min-width: 0; }
.stat-pick .stat-btn { flex: 1 1 0; font-size: clamp(.72rem, 3.2vw, .88rem); padding-left: 3px; padding-right: 3px; }
.stat-row .stat-btn { flex: 1 1 0; font-size: clamp(.72rem, 3.2vw, .88rem); }
.hard-toggle.three > *, .stat-seg button { font-size: clamp(.72rem, 3.2vw, .85rem); }
.hard-toggle.four > * { font-size: clamp(.68rem, 3vw, .82rem); padding-left: 2px; padding-right: 2px; }
/* wildcards you hold share the bar equally, so the third is never pushed off the edge */
.page-draft .inv.has { gap: 5px; }
.page-draft .inv.has .inv-label { margin-right: 0; }
.page-draft .inv .wild-btn { flex: 1 1 0; min-width: 0; justify-content: center; }
.page-draft .inv .wild-btn small { overflow: hidden; text-overflow: ellipsis; min-width: 0; }
/* the opponent's live feed in a race: one fixed-height line, tap it for their XI */
.opp-bar { height: 34px; box-sizing: border-box; display: flex; align-items: center; padding: 0 4px 0 10px; overflow: hidden; }
.opp-bar > span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ob-btn { all: unset; box-sizing: border-box; display: flex; align-items: center; gap: 8px; width: 100%; height: 100%; cursor: pointer; font-size: .82rem; }
.ob-line { flex: 1 1 auto; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ob-last { flex: none; max-width: 42%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; padding: 2px 8px; border-radius: 9px; background: var(--panel); font-weight: 700; font-size: .76rem; }
.ob-last i { font-style: normal; color: var(--hi); margin-left: 2px; }
.ob-go { flex: none; font-weight: 800; font-size: .72rem; color: var(--muted); padding-right: 6px; }
.ob-btn.flash .ob-last { animation: obflash 2.4s ease-out; }
@keyframes obflash { 0%, 30% { background: var(--accent); color: #0a2a1f; transform: scale(1.08); } 100% { background: var(--panel); transform: none; } }
.opp-pitch { display: grid; gap: 6px; margin: 8px 0; padding: 10px 6px; border-radius: 14px; background: linear-gradient(180deg, #1f7a45, #17643a); }
.op-row { display: flex; justify-content: space-around; gap: 4px; }
.ox { flex: 1 1 0; max-width: 78px; min-width: 0; display: flex; flex-direction: column; align-items: center; gap: 1px; padding: 4px 2px; border-radius: 10px; background: rgba(0,0,0,.18); color: #fff; font-size: .68rem; }
.ox.on { background: rgba(0,0,0,.32); }
.ox.latest { outline: 2px solid var(--accent); animation: pop .5s; }
.ox .avatar { width: 30px; height: 30px; font-size: .7rem; }
.ox b { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ox i { font-style: normal; font-weight: 800; color: #ffe27a; }
/* cards that don't fit give way step by step (fitReels in draft.js) */
.stage .reel.fit1 .chips, .stage .reel.fit2 .mate { display: none; }
.stage .reel.fitc .avatar.lg, .stage .reel.fit2 .avatar.lg { width: 30px; height: 30px; font-size: .7rem; }
.stage .reel.fit3 .avatar { display: none; }
.stage .reel.fit1 .wild-icon { font-size: 1.4rem; }
.stage .reel.fit1 .wild-desc { -webkit-line-clamp: 6; }
.stage .reel.fit2 .wild-card .tag { display: none; }
.stage .reel.fit3 .wild-icon { display: none; }
.stage .reel.fit3 .wild-desc { -webkit-line-clamp: 8; font-size: .62rem; }
/* Settings → Notifications: one row per kind */
.ntoggles { display: grid; gap: 2px; margin: 8px 0; }
.ntoggles label { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 8px 2px; border-bottom: 1px solid var(--line); cursor: pointer; }
.ntoggles label:last-child { border-bottom: 0; }
.ntoggles label span { display: grid; gap: 1px; min-width: 0; }
.ntoggles label small { margin: 0; }
.ntoggles input[type="checkbox"] { width: 22px; height: 22px; accent-color: var(--accent); flex: none; }
.ntoggles select.input { width: auto; flex: none; padding: 6px 8px; }
/* Updates: the big updates as chapters, each opening to its releases */
.chapters { display: grid; gap: 10px; margin-top: 8px; }
.chapter { background: var(--panel); border: 1px solid var(--line); border-radius: 18px; box-shadow: 0 3px 0 var(--edge); }
.chapter.now { border: 2px solid var(--accent); }
.chapter > summary { list-style: none; display: flex; gap: 12px; padding: 14px; cursor: pointer; }
.chapter > summary::-webkit-details-marker { display: none; }
.ch-ico { flex: none; width: 46px; height: 46px; border-radius: 14px; display: grid; place-items: center; font-size: 1.6rem; background: var(--inset); }
.ch-txt { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.ch-txt > b { font: 700 1.15rem Oswald, sans-serif; line-height: 1.15; }
.ch-txt small { color: var(--muted); font-size: .74rem; }
.ch-txt > span { font-size: .86rem; }
.ch-heads { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 3px; font-style: normal; }
.ch-heads em { font-style: normal; font-size: .7rem; font-weight: 700; padding: 2px 7px; border-radius: 8px; background: var(--inset); color: var(--muted); }
.ch-meta { margin-top: 2px; }
.ch-now { font-size: .66rem; padding: 1px 6px; border-radius: 6px; background: var(--accent); color: #0a2a1f; text-transform: uppercase; letter-spacing: .5px; }
.chapter[open] .ch-meta::after { content: ' ▲'; } .chapter:not([open]) .ch-meta::after { content: ' ▼'; }
.chapter > .releases { margin: 0; padding: 0 10px 10px; }
.chapter .release { box-shadow: none; padding: 10px 12px; }
/* Updates: fix-up releases folded into the release they patch */
.release .fixups { margin-top: 8px; border-top: 1px dashed var(--line); padding-top: 8px; }
.release .fixups summary { cursor: pointer; font-size: .82rem; color: var(--muted); font-weight: 700; }
.release .fixups .fix-head { margin: 8px 0 2px; font-size: .85rem; }
.release .fixups .fix-head small { color: var(--muted); }
.release .fixups ul { margin: 0; font-size: .85rem; }
/* Settings menu: each row shows its current value */
.settings.smenu a { display: grid; grid-template-columns: 1fr auto; align-items: center; column-gap: 8px; }
.settings.smenu a small { grid-column: 1; grid-row: 2; color: var(--muted); font-size: .8rem; font-weight: 400; margin-top: 1px; }
.settings.smenu a span { grid-column: 2; grid-row: 1 / span 2; }
.settings[hidden], .sgroup[hidden] { display: none !important; }
.plist .prow.unowned { opacity: .72; }
/* player index: search on its own line, the four filters two by two */
.page-players .filters { grid-template-columns: 1fr 1fr; }
.page-players .filters #pq { grid-column: 1 / -1; }
#fb-text { width: 100%; margin: 10px 0 4px; resize: vertical; font: inherit; }
/* Album badges, in categories; secrets hidden until found */
.ach-cat { margin: 14px 0 6px; font: 700 .95rem Oswald, sans-serif; }
.ach-cat small { color: var(--muted); font-weight: 400; margin-left: 4px; }
.ach.secret { border-style: dashed; }
/* Album: four sections, and badges one category at a time */
.album-views { margin: 12px 0; }
.album-views a { flex: 1; text-align: center; padding: 9px 4px; border-radius: 10px; color: var(--muted); font: 700 clamp(.72rem, 3.2vw, .88rem) Inter, sans-serif; text-decoration: none; white-space: nowrap; }
.album-views a.on { background: var(--accent); color: #0a2a1f; box-shadow: 0 3px 0 var(--btn-edge); }
.ach-cats { display: flex; gap: 6px; overflow-x: auto; padding: 2px 0 10px; scrollbar-width: none; }
.ach-cats::-webkit-scrollbar { display: none; }
.ach-cats a { flex: none; display: flex; flex-direction: column; align-items: center; padding: 6px 12px; border-radius: 12px; background: var(--panel); border: 1px solid var(--line); color: var(--text); text-decoration: none; font-weight: 700; font-size: .82rem; }
.ach-cats a small { color: var(--muted); font-weight: 400; font-size: .7rem; }
.ach-cats a.on { background: var(--accent); color: #0a2a1f; border-color: var(--accent); }
.ach-cats a.on small { color: #0a2a1f; }
/* 🃏 Hat-Trick: played on a Goal Machine pitch. Us in lime, them in orange; every suit its own kit */
.beta-pill { display: inline-block; font: 800 .6rem Inter, sans-serif; letter-spacing: 1px; padding: 2px 6px; border-radius: 6px; background: var(--hi); color: #0a2a1f; vertical-align: middle; }
.ht-banner { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 10px; margin-top: 14px; padding: 12px 16px; border-radius: 20px; text-decoration: none; color: #f2fbf6;
  background: repeating-linear-gradient(90deg, #1c7a4a 0 26px, #1a7045 26px 52px); border: 2px solid rgba(255, 255, 255, .35); box-shadow: 0 4px 0 #0a3d24; }
.ht-banner > span:first-child { font-size: 1.8rem; }
.ht-banner b { display: block; font: 700 1.2rem Oswald, sans-serif; }
.ht-banner small { color: #d6f5e3; font-size: .8rem; }
.ht-banner > span:last-child { font-size: 1.4rem; opacity: .8; }
.t0 { --tc: #c8ff3d; --tt: #0a2a1f; } .t1 { --tc: #ff8a3d; --tt: #2a1200; }
.ht-top { gap: 6px; }
.ht-board { flex: 1; max-width: 260px; margin: 0 auto; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; background: #0a2a1f; color: #f2fbf6; border-radius: 12px; padding: 4px 8px; box-shadow: inset 0 0 0 2px rgba(255, 255, 255, .12), 0 3px 0 var(--edge); }
.ht-board > div { display: flex; flex-direction: column; align-items: center; line-height: 1.05; }
.ht-board .t0 b, .ht-board .t1 b { font: 700 1.5rem Oswald, sans-serif; color: var(--tc); }
.ht-board small { font: 800 .55rem Inter, sans-serif; text-transform: uppercase; letter-spacing: .5px; color: #9dc2b1; }
.ht-board .ht-mid b { font: 700 .82rem Oswald, sans-serif; text-transform: uppercase; }
.ht-bidrow { display: flex; justify-content: space-between; gap: 8px; margin: 4px 0 0; }
.ht-teambid { display: flex; align-items: center; gap: 6px; padding: 4px 10px; border-radius: 12px; background: var(--panel); border: 2px solid var(--tc); box-shadow: 0 3px 0 var(--edge); }
.ht-teambid small { font: 800 .65rem Inter, sans-serif; text-transform: uppercase; color: var(--muted); }
.ht-teambid b { font: 700 1.2rem Oswald, sans-serif; }
.ht-bags { font-style: normal; font-size: .5rem; letter-spacing: -3px; max-width: 70px; overflow: hidden; }
.ht-pitch { position: relative; height: min(50vh, 370px); min-height: 310px; margin: 18px 12px 4px; border-radius: 18px;
  background: repeating-linear-gradient(180deg, #1c7a4a 0 34px, #1a7045 34px 68px); border: 2px solid rgba(255, 255, 255, .45); box-shadow: 0 4px 0 #0a3d24; }
.ht-lines, .ht-sheet .ht-lines { position: absolute; inset: 0; pointer-events: none; border-radius: inherit;
  background: radial-gradient(circle at 50% 50%, transparent 58px, rgba(255, 255, 255, .45) 59px, rgba(255, 255, 255, .45) 61px, transparent 62px),
    linear-gradient(90deg, transparent calc(50% - 1px), rgba(255, 255, 255, .45) calc(50% - 1px), rgba(255, 255, 255, .45) calc(50% + 1px), transparent calc(50% + 1px));
  transform: rotate(90deg) scale(1); }
.ht-pitch .ht-lines { transform: none; background: radial-gradient(circle at 50% 50%, transparent 62px, rgba(255, 255, 255, .45) 63px, rgba(255, 255, 255, .45) 65px, transparent 66px),
    linear-gradient(180deg, transparent calc(50% - 1px), rgba(255, 255, 255, .45) calc(50% - 1px), rgba(255, 255, 255, .45) calc(50% + 1px), transparent calc(50% + 1px)); }
.ht-pill { position: absolute; z-index: 3; display: flex; align-items: center; gap: 4px; }
.ht-pill b { padding: 4px 12px; border-radius: 10px; background: var(--tc); color: var(--tt); font: 700 .85rem Oswald, sans-serif; letter-spacing: .5px; text-transform: uppercase; box-shadow: 0 3px 0 rgba(0, 0, 0, .3); white-space: nowrap; }
.ht-pill.turn b { box-shadow: 0 0 0 3px #fff, 0 3px 0 rgba(0, 0, 0, .3); }
.ht-badge { background: #0a2a1f; color: #f2fbf6; border-radius: 8px; padding: 2px 6px; font: 700 .75rem Oswald, sans-serif; border: 2px solid var(--tc); }
.ht-n { top: -14px; left: 50%; transform: translateX(-50%); }
.ht-s { bottom: -14px; left: 50%; transform: translateX(-50%); }
.ht-w, .ht-e { top: 50%; transform: translateY(-50%); flex-direction: column; }
.ht-w { left: -14px; } .ht-e { right: -14px; }
.ht-w b, .ht-e b { writing-mode: vertical-rl; padding: 12px 4px; }
.ht-w b { transform: rotate(180deg); }
.ht-trick { position: absolute; inset: 24px 30px 36px; display: grid; grid-template-columns: 1fr 1fr 1fr; grid-template-rows: 1fr 1fr 1fr; grid-template-areas: ". t2 ." "t1 . t3" ". t0 ."; place-items: center; }
.ht-t2 { grid-area: t2; } .ht-t1 { grid-area: t1; } .ht-t3 { grid-area: t3; } .ht-t0 { grid-area: t0; }
/* the cards */
.ht-card { position: absolute; bottom: 0; width: 62px; height: 90px; padding: 0; border-radius: 9px; border: 2px solid #0a2a1f; color: #fff; overflow: hidden; cursor: pointer; font: inherit;
  display: grid; grid-template-columns: 17px 1fr; grid-template-rows: auto auto 1fr; transition: transform .15s, filter .2s; box-shadow: -3px 0 6px rgba(0, 0, 0, .35); }
.htc-edge { grid-row: 1 / -1; writing-mode: vertical-rl; transform: rotate(180deg); display: flex; align-items: center; justify-content: flex-end; padding: 6px 0; background: rgba(0, 0, 0, .35);
  font: 700 .68rem Oswald, sans-serif; letter-spacing: .5px; text-transform: uppercase; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-height: 100%; }
.htc-num { grid-column: 2; justify-self: center; margin-top: 4px; min-width: 32px; padding: 1px 4px; border-radius: 6px; background: #fff; color: #0a2a1f; font: 700 1rem/1.2 Oswald, sans-serif; text-align: center; box-shadow: 0 2px 0 rgba(0, 0, 0, .25); }
.htc-suit { grid-column: 2; justify-self: center; font-size: .9rem; margin-top: 2px; }
.htc-big { grid-column: 2; align-self: center; justify-self: center; font: 700 1.05rem Oswald, sans-serif; opacity: .85; text-shadow: 0 1px 0 rgba(0, 0, 0, .3); text-align: center; line-height: 1; }
.ht-card.suit-F { background: repeating-linear-gradient(90deg, #d62839 0 9px, #a51d2c 9px 18px); }
.ht-card.suit-M { background: repeating-linear-gradient(180deg, #1f63b5 0 11px, #2f7fd6 11px 22px); }
.ht-card.suit-D { background: repeating-conic-gradient(#1c7a3e 0 25%, #25964d 0 50%) 0 0 / 16px 16px; }
.ht-card.suit-L { color: #3d2a00; border-color: #7a5400; background: linear-gradient(125deg, #b8860b 0%, #f7d774 30%, #fff4c2 45%, #e6b422 60%, #a87400 100%); }
.ht-card.suit-L .htc-edge { background: rgba(122, 84, 0, .35); color: #fff; }
.ht-card.suit-L::after { content: ''; position: absolute; inset: 0; background: linear-gradient(115deg, transparent 40%, rgba(255, 255, 255, .55) 50%, transparent 60%); background-size: 250% 100%; animation: ht-shine 3.5s ease-in-out infinite; pointer-events: none; }
@keyframes ht-shine { 0%, 60% { background-position: 150% 0; } 100% { background-position: -100% 0; } }
.ht-card.suit-J { background: radial-gradient(circle at 70% 30%, #ff4fd8, #7a00ff 55%, #2a0055); border-color: #fff; }
.ht-card.joker-var { background: repeating-linear-gradient(180deg, #111 0 3px, #262626 3px 6px); border-color: #ffe066; }
.ht-card.suit-J .htc-num { background: transparent; box-shadow: none; font-size: 1.4rem; }
.ht-card.suit-J .htc-big { font-size: .8rem; letter-spacing: 1px; opacity: 1; }
.ht-card.joker-var .htc-big { color: #ffe066; font-size: 1.1rem; }
.ht-trick .ht-card, .ht-fan .ht-card { position: relative; width: 56px; height: 82px; }
.ht-trick .ht-card { animation: land .3s; }
.ht-card.win { box-shadow: 0 0 0 3px #fff, 0 0 18px rgba(200, 255, 61, .8); }
.ht-hand { position: relative; height: 104px; margin-top: 4px; }
.ht-hand .ht-card.no { filter: brightness(.5) saturate(.6); }
.ht-hand.go .ht-card.ok { box-shadow: -3px 0 6px rgba(0, 0, 0, .35), inset 0 0 0 2px #c8ff3d; }
.ht-hand .ht-card.up { transform: translateY(-16px); z-index: 60 !important; box-shadow: 0 0 0 3px #c8ff3d, 0 8px 12px rgba(0, 0, 0, .4); }
.ht-tip { text-align: center; min-height: 1.2em; margin: 16px 0 0; font-size: .85rem; color: var(--muted); }
.ht-tip b { color: var(--text); }
/* bidding */
.ht-bid { position: absolute; inset: 20px 14px; z-index: 2; display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 10px; border-radius: 16px; background: rgba(7, 38, 29, .92); color: #f2fbf6; overflow: auto; }
.ht-bid > b { font: 700 1.05rem Oswald, sans-serif; text-transform: uppercase; letter-spacing: .5px; }
.ht-bids { display: grid; grid-template-columns: repeat(5, 1fr); gap: 6px; width: 100%; }
.ht-bids button { padding: 8px 0; border: 0; border-radius: 10px; background: #1c7a4a; color: #fff; font: 700 1.1rem Oswald, sans-serif; box-shadow: 0 3px 0 #0a3d24; cursor: pointer; }
.ht-bids button.on { background: #c8ff3d; color: #0a2a1f; box-shadow: 0 3px 0 #7da51c; }
.ht-bid .btn[disabled] { opacity: .4; }
.ht-bid small { font-size: .7rem; color: #9dc2b1; text-align: center; }
/* hand summary */
.ht-sumbox { text-align: center; }
.ht-sumtitle { font: 700 1.4rem Oswald, sans-serif; margin-bottom: 8px; }
.ht-sum { width: 100%; border-collapse: separate; border-spacing: 0 6px; font-size: .92rem; }
.ht-sum th { font: 700 1.1rem Oswald, sans-serif; } .ht-sum th.t0, .ht-sum th.t1 { color: var(--text); border-bottom: 3px solid var(--tc); }
.ht-sum td { padding: 8px 6px; background: var(--inset); text-align: center; }
.ht-sum td:first-child { text-align: left; font-weight: 700; color: var(--muted); border-radius: 10px 0 0 10px; }
.ht-sum td:last-child { border-radius: 0 10px 10px 0; }
.ht-sum tr.total td { font: 700 1.25rem Oswald, sans-serif; }
/* the menu */
.ht-intro { display: flex; flex-direction: column; gap: 12px; }
.ht-sheet { position: relative; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 8px; padding: 18px 12px; border-radius: 18px;
  background: repeating-linear-gradient(90deg, #1c7a4a 0 34px, #1a7045 34px 68px); border: 2px solid rgba(255, 255, 255, .45); box-shadow: 0 4px 0 #0a3d24; }
.ht-sheet .ht-lines { transform: none; background: radial-gradient(circle at 50% 50%, transparent 40px, rgba(255, 255, 255, .45) 41px, rgba(255, 255, 255, .45) 43px, transparent 44px),
  linear-gradient(90deg, transparent calc(50% - 1px), rgba(255, 255, 255, .45) calc(50% - 1px), rgba(255, 255, 255, .45) calc(50% + 1px), transparent calc(50% + 1px)); }
.ht-side { position: relative; display: flex; flex-direction: column; align-items: center; gap: 5px; }
.ht-side small { font: 800 .7rem Inter, sans-serif; text-transform: uppercase; color: #fff; letter-spacing: 1px; }
.ht-side b { width: 100%; max-width: 120px; text-align: center; padding: 4px 8px; border-radius: 10px; background: var(--tc); color: var(--tt); font: 700 .95rem Oswald, sans-serif; text-transform: uppercase; box-shadow: 0 3px 0 rgba(0, 0, 0, .3); }
.ht-sheet > i { position: relative; font: 700 1.6rem Oswald, sans-serif; font-style: normal; color: #fff; }
.ht-blurb { text-align: center; margin: 0; }
.ht-fan { display: flex; justify-content: center; }
.ht-fan .ht-card { margin: 0 -8px; cursor: default; }
.ht-fan .ht-card:nth-child(odd) { transform: rotate(-4deg); } .ht-fan .ht-card:nth-child(even) { transform: rotate(4deg) translateY(4px); }
.ht-opt small { display: block; font: 800 .7rem Inter, sans-serif; text-transform: uppercase; color: var(--muted); margin-bottom: 4px; }
.ht-rules { background: var(--panel); border: 1px solid var(--line); border-radius: 14px; padding: 10px 12px; }
.ht-rules summary { cursor: pointer; font-weight: 700; }
.ht-rules p { font-size: .85rem; }
/* card layout v2: the left strip carries number, suit and name, so a fanned hand reads at a glance */
.ht-card { grid-template-columns: 22px 1fr; grid-template-rows: 1fr; }
.htc-edge { grid-row: 1; writing-mode: horizontal-tb; transform: none; flex-direction: column; justify-content: flex-start; align-items: center; gap: 2px; padding: 4px 0; }
.htc-edge b { font: 700 .72rem/1 Oswald, sans-serif; background: #fff; color: #0a2a1f; border-radius: 4px; padding: 2px 1px; min-width: 18px; text-align: center; }
.htc-edge i { font-style: normal; font-size: .7rem; line-height: 1; }
.htc-edge span { writing-mode: vertical-rl; transform: rotate(180deg); font: 700 .66rem Oswald, sans-serif; letter-spacing: .5px; text-transform: uppercase; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; flex: 1; min-height: 0; }
.htc-face { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; }
.htc-face .htc-big { font: 700 1.25rem Oswald, sans-serif; opacity: 1; }
.htc-ini { font: 700 .8rem Oswald, sans-serif; opacity: .7; }
.ht-card.suit-J .htc-edge b { background: transparent; font-size: .9rem; }
.ht-card.suit-J .htc-face .htc-big { font-size: .85rem; letter-spacing: 1px; }
.ht-card.joker-var .htc-face .htc-big { font-size: 1.2rem; }
.ht-board { max-width: 230px; }
.ht-board .ht-mid b { font-size: .95rem; text-transform: none; }
.ht-hand-no { text-align: center; color: var(--muted); font-size: .68rem; align-self: center; }
.page-hattrick .topbar h2 { white-space: nowrap; font-size: 1.25rem; }
.ht-fan .ht-card { margin: 0 -3px; }
/* Online: first-timer steps and the two-step New game pop-up */
.og-first ol { text-align: left; margin: 8px 0 12px; padding-left: 20px; display: grid; gap: 6px; font-size: .9rem; }
.og-first .join-row { margin-top: 12px; }
.ng-step { margin: 10px 0 6px; font: 800 .75rem Inter, sans-serif; text-transform: uppercase; letter-spacing: .5px; color: var(--muted); }
.ng-games { display: grid; gap: 6px; }
.ng-game { display: grid; grid-template-columns: auto 1fr; grid-template-rows: auto auto; column-gap: 10px; align-items: center; text-align: left; padding: 10px 12px; border-radius: 14px; border: 2px solid var(--line); background: var(--panel); color: var(--text); font: inherit; cursor: pointer; }
.ng-game > span { grid-row: 1 / span 2; font-size: 1.5rem; }
.ng-game b { font: 700 1rem Oswald, sans-serif; }
.ng-game small { color: var(--muted); font-size: .78rem; line-height: 1.25; }
.ng-game.on { border-color: var(--accent); box-shadow: 0 0 0 2px var(--accent); }
.ng-more { margin-top: 6px; }
.ng-more summary { cursor: pointer; font-weight: 700; font-size: .85rem; color: var(--muted); padding: 4px 0; }
.ng-more .ng-games { margin-top: 6px; }
.ng-name { margin-top: 6px; }
.ng-stat { margin-top: 10px; }
.ng-stat small { display: block; font: 800 .7rem Inter, sans-serif; text-transform: uppercase; color: var(--muted); margin-bottom: 4px; }
.banner.invite .inv-text { flex-basis: 100%; } .banner.invite .inv-code { font-size: .85rem; } .banner.invite .inv-code b { font-size: 1.1rem; letter-spacing: 1px; }
/* Online: play your usual mates in one tap */
.og-quick { margin: 4px 0 12px; }
.og-quick small, .ng-quick small { display: block; font: 800 .7rem Inter, sans-serif; text-transform: uppercase; color: var(--muted); margin-bottom: 6px; }
.og-quick > div, .ng-opps { display: flex; gap: 8px; overflow-x: auto; padding-bottom: 4px; scrollbar-width: none; }
.og-quick button, .ng-opps button { flex: none; display: flex; flex-direction: column; align-items: center; gap: 4px; width: 68px; padding: 8px 4px; border-radius: 14px; border: 2px solid var(--line); background: var(--panel); color: var(--text); font: 700 .75rem Inter, sans-serif; cursor: pointer; }
.og-quick button span, .ng-opps button span { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ng-opps button.on { border-color: var(--accent); box-shadow: 0 0 0 2px var(--accent); }
.ng-opps .ng-invite i { font-style: normal; font-size: 1.4rem; line-height: 36px; }
.ng-opps .ng-invite:only-child { width: 100%; flex-direction: row; justify-content: center; }
.og-quick { margin-top: 12px; }
.ht-trick.is-last .ht-card:not(.win) { opacity: .6; } .ht-trick.is-last .ht-card { animation: none; }
/* 🎲 Quick match */
.og-qm { width: 100%; display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 10px; margin: 10px 0 4px; padding: 12px 14px; border-radius: 18px; border: 0; cursor: pointer; text-align: left; font: inherit;
  color: #0a2a1f; background: linear-gradient(135deg, #c8ff3d, #7ee8a2); box-shadow: 0 4px 0 #6f9c1b; }
.og-qm > span:first-child { font-size: 1.7rem; }
.og-qm b { display: block; font: 700 1.15rem Oswald, sans-serif; }
.og-qm small { font-size: .8rem; opacity: .8; }
.og-qm > span:last-child { font-size: 1.4rem; opacity: .6; }
.banner.qm-wait { display: grid; grid-template-columns: auto 1fr; gap: 4px 10px; align-items: center; text-align: left; }
.banner.qm-wait small { display: block; opacity: .8; font-size: .78rem; }
.banner.qm-wait i { font-style: normal; font-variant-numeric: tabular-nums; }
.qm-spin { font-size: 1.6rem; animation: qm-look 1.6s ease-in-out infinite; }
@keyframes qm-look { 0%, 100% { transform: rotate(-12deg); } 50% { transform: rotate(12deg) scale(1.08); } }
.qm-cpu { grid-column: 1 / -1; display: flex; flex-direction: column; align-items: center; gap: 6px; margin-top: 6px; padding-top: 8px; border-top: 1px dashed rgba(0, 0, 0, .2); text-align: center; }
.qm-cpu[hidden] { display: none; }
/* Hat-Trick: full names on the pitch, and the card you've picked up */
.ht-trick > div { display: flex; flex-direction: column; align-items: center; gap: 2px; }
.ht-tname { max-width: 84px; padding: 1px 6px; border-radius: 6px; background: rgba(7, 38, 29, .85); color: #f2fbf6; font: 700 .62rem/1.15 Inter, sans-serif; text-align: center; }
.ht-trick .ht-card { width: 50px; height: 72px; }
.ht-preview { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 10px; margin: 14px 0 0; padding: 8px 10px; border-radius: 14px; background: var(--panel); border: 2px solid var(--line); box-shadow: 0 3px 0 var(--edge); animation: pop .2s; }
.ht-preview.suit-L { border-color: #d4a017; } .ht-preview.suit-F { border-color: #d62839; } .ht-preview.suit-M { border-color: #1f63b5; } .ht-preview.suit-D { border-color: #1c7a3e; } .ht-preview.joker { border-color: #b33cff; }
.htp-pic { font-size: 1.8rem; line-height: 1; }
.htp-info { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.htp-info > b { font: 700 1.05rem Oswald, sans-serif; line-height: 1.1; }
.htp-info small { color: var(--muted); font-size: .78rem; }
.htp-info .chips { margin: 2px 0 0; }
.htp-go { display: flex; flex-direction: column; align-items: center; gap: 4px; }
.htp-x { border: 0; background: none; color: var(--muted); font-size: .9rem; cursor: pointer; }
/* the ‹ in the top bar: a proper finger-sized target (it was just the character, so near misses did nothing) */
.topbar .back { justify-self: start; display: inline-flex; align-items: center; justify-content: center; min-width: 48px; min-height: 48px; margin: -6px 0 -6px -12px; padding: 0 6px; border-radius: 14px; -webkit-tap-highlight-color: transparent; }
.topbar .back:active { background: var(--inset); }
.ht-preview { box-sizing: border-box; width: 100%; max-width: 100%; overflow: hidden; }
.htp-info > b { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.htp-info .chips { flex-wrap: nowrap; overflow: hidden; }
/* card faces: the player's photo, the suit underneath (the number lives on the edge strip only) */
.htc-face .avatar.htc-face-pic { width: 34px; height: 34px; border: 2px solid rgba(255, 255, 255, .85); box-shadow: 0 2px 4px rgba(0, 0, 0, .35); font-size: .7rem; }
.ht-card.suit-L .htc-face .avatar.htc-face-pic { border-color: #7a5400; }
.htc-face .htc-suit { font-size: .8rem; line-height: 1; }
.ht-trick .ht-card { width: 56px; height: 80px; }
.ht-trick .htc-face .avatar.htc-face-pic { width: 30px; height: 30px; }
.ht-fan .htc-face .avatar.htc-face-pic { width: 30px; height: 30px; }
.ob-leave { flex: none; margin-left: auto; width: 28px; height: 28px; border: 0; border-radius: 50%; background: rgba(0, 0, 0, .18); color: inherit; font-size: .85rem; cursor: pointer; }
/* Quick match: each day's game has its own banner */
.og-qm.qm-day { position: relative; overflow: hidden; padding: 14px 14px 14px 12px; color: #fff; box-shadow: 0 4px 0 rgba(0, 0, 0, .35); }
.og-qm.qm-day::after { content: ''; position: absolute; inset: 0; pointer-events: none; background: repeating-linear-gradient(115deg, rgba(255, 255, 255, .07) 0 14px, transparent 14px 28px); }
.og-qm.qm-day > span { position: relative; z-index: 1; }
.og-qm.qm-day .qm-big { font-size: 2.3rem; filter: drop-shadow(0 3px 4px rgba(0, 0, 0, .35)); }
.og-qm.qm-day .qm-txt small { display: block; }
.og-qm.qm-day .qm-kick { font-weight: 800; letter-spacing: .06em; text-transform: uppercase; font-size: .68rem; opacity: .9; }
.og-qm.qm-day b { font-size: 1.35rem; line-height: 1.15; }
.og-qm.qm-day .qm-next { margin-top: 3px; font-size: .72rem; opacity: .7; }
.og-qm.qm-day .qm-go { font: 700 .9rem Oswald, sans-serif; opacity: 1; padding: 6px 10px; border-radius: 999px; background: rgba(255, 255, 255, .92); color: #0a2a1f; }
.og-qm.qm-race { background: linear-gradient(135deg, #0b6e4f, #13a26f 60%, #c8ff3d); }
.og-qm.qm-hattrick { background: linear-gradient(135deg, #0a3d2a, #1f7a4a 55%, #d4a52c); }
.og-qm.qm-chaos { background: linear-gradient(135deg, #3b0a52, #b0127a 55%, #ff7a18); }
.og-qm.qm-duel { background: linear-gradient(135deg, #0b2a6e, #1e63c9 60%, #4fd1ff); }
.og-qm.qm-target { background: linear-gradient(135deg, #6e0b1a, #d0302f 55%, #ffb03d); }
.og-qm.qm-scout { background: linear-gradient(135deg, #1a1a2e, #3a3f58 55%, #8a9bb8); }
/* 🌪️ CHAOS moments: a card over the reels while the action plays out on the pitch */
.cm { position: fixed; left: 0; right: 0; bottom: 0; z-index: 95; display: flex; justify-content: center; padding: 0 12px calc(14px + env(safe-area-inset-bottom)); pointer-events: auto; }
.cm::before { content: ''; position: fixed; inset: 0; z-index: -1; background: linear-gradient(180deg, transparent 35%, rgba(5, 0, 20, .55)); }
.cm-card { width: 100%; max-width: 440px; padding: 14px 16px 12px; border-radius: 20px; text-align: center; color: #fff; background: linear-gradient(135deg, #2a0747, #5a0f6e); border: 2px solid rgba(255, 255, 255, .25); box-shadow: 0 10px 40px rgba(0, 0, 0, .5); animation: cm-in .35s cubic-bezier(.2, 1.4, .4, 1); will-change: transform; }
.cm.out .cm-card { animation: cm-out .25s ease-in forwards; }
.cm.out::before { opacity: 0; transition: opacity .25s; }
.cm-good .cm-card { background: linear-gradient(135deg, #0b5e3a, #1c9b5c); }
.cm-bad .cm-card { background: linear-gradient(135deg, #5c0a1c, #b3172f); }
.cm-weird .cm-card { background: linear-gradient(135deg, #1b1060, #4a2bb5); }
.cm-unleash .cm-card { background: linear-gradient(135deg, #7a00ff, #ff2bd6 55%, #ff9a00); }
.cm-icon { font-size: 2.6rem; line-height: 1; animation: cm-icon .6s ease-out; }
.cm-big .cm-icon { font-size: 3.4rem; }
.cm-name { font: 700 1.5rem/1.1 Oswald, sans-serif; text-transform: uppercase; letter-spacing: .03em; margin: 4px 0 2px; }
.cm-big .cm-name { font-size: 1.9rem; }
.cm-text { font-size: .95rem; line-height: 1.35; opacity: .95; }
.cm-text b { color: #ffe600; }
.cm-skip { display: block; margin-top: 8px; font-size: .7rem; opacity: .55; }
@keyframes cm-in { from { transform: translateY(110%) scale(.9); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes cm-out { to { transform: translateY(60%) scale(.95); opacity: 0; } }
@keyframes cm-icon { 0% { transform: scale(.2) rotate(-30deg); } 60% { transform: scale(1.3) rotate(8deg); } 100% { transform: none; } }
/* a real coin toss */
.coin { position: relative; width: 92px; height: 92px; margin: 12px auto 4px; transform-style: preserve-3d; }
.coin-f { position: absolute; inset: 0; border-radius: 50%; display: grid; place-content: center; font-size: 1.9rem; line-height: 1; backface-visibility: hidden; -webkit-backface-visibility: hidden;
  background: radial-gradient(circle at 35% 30%, #fff6b0, #f2c230 45%, #b98a0c); border: 4px solid #8a6406; box-shadow: inset 0 0 0 3px rgba(255, 255, 255, .35); color: #3a2a00; }
.coin-f b { font: 800 .62rem Inter, sans-serif; letter-spacing: .08em; margin-top: 2px; }
.coin-f.h { transform: translateZ(5px); }
.coin-f.t { transform: rotateX(180deg) translateZ(5px); background: radial-gradient(circle at 35% 30%, #fff, #c9d2dc 45%, #7d8a99); border-color: #56606c; color: #1d2530; }
/* pick a manager */
.cm-pick .cm-card { max-width: 480px; }
.mgr-list { display: grid; gap: 8px; margin-top: 10px; }
.mgr { display: grid; grid-template-columns: auto 1fr; gap: 0 10px; align-items: center; padding: 10px 12px; border: 0; border-radius: 14px; text-align: left; font: inherit; color: #0b1a14; background: #fff; cursor: pointer; box-shadow: 0 3px 0 rgba(0, 0, 0, .25); }
.mgr:active { transform: translateY(2px); box-shadow: none; }
.mgr-ico { grid-row: span 3; font-size: 1.8rem; }
.mgr b { font: 700 1.05rem Oswald, sans-serif; }
.mgr small { font-size: .74rem; line-height: 1.3; }
.mgr small.up { color: #0b6e4f; } .mgr small.down { color: #b3172f; }
.mgr-big { font-size: 3rem; }
/* what happens on the pitch */
.cm-fx { position: absolute; z-index: 5; pointer-events: none; line-height: 1; will-change: transform, opacity; }
.cm-fx.sweep { top: 50%; left: 0; font-size: 5rem; animation: cm-sweep 1.5s ease-in-out forwards; filter: drop-shadow(0 6px 10px rgba(0, 0, 0, .5)); }
@keyframes cm-sweep { 0% { transform: translate(-90px, -50%) rotate(0); } 100% { transform: translate(calc(100vw + 10px), -50%) rotate(40deg); } }
.cm-fx.visit { font-size: 2.6rem; transform: translate(-50%, -50%); animation: cm-visit 1.6s ease-out forwards; }
.cm-fx.visit.drive { animation-name: cm-drive; }
.cm-fx.visit.frame { font-size: 4.2rem; animation-name: cm-frame; }
.cm-fx.visit.strike { font-size: 3.4rem; animation-name: cm-strike; }
@keyframes cm-visit { 0% { transform: translate(-50%, -50%) scale(0); } 25% { transform: translate(-50%, -50%) scale(1.4); } 75% { opacity: 1; transform: translate(-50%, -50%) scale(1); } 100% { opacity: 0; transform: translate(-50%, -70%) scale(1); } }
@keyframes cm-drive { 0% { transform: translate(-260px, -50%); } 45% { transform: translate(-50%, -50%); } 80% { opacity: 1; transform: translate(-50%, -50%) scale(1.15); } 100% { opacity: 0; transform: translate(200px, -50%); } }
@keyframes cm-frame { 0% { opacity: 0; transform: translate(-50%, -50%) scale(2.2); } 20% { opacity: 1; transform: translate(-50%, -50%) scale(1); } 85% { opacity: 1; } 100% { opacity: 0; transform: translate(-50%, -50%) scale(1); } }
@keyframes cm-strike { 0% { opacity: 0; transform: translate(-50%, -160%) scale(1.6); } 15% { opacity: 1; transform: translate(-50%, -50%) scale(1); } 30% { transform: translate(-50%, -50%) scale(1.3); } 80% { opacity: 1; } 100% { opacity: 0; transform: translate(-50%, -50%); } }
.cm-fx.rain { font-size: 1.8rem; animation: cm-rain 1.3s ease-in forwards; }
@keyframes cm-rain { to { transform: translateY(420px) rotate(200deg); opacity: 0; } }
.slot.hit-up .slot-goals { animation: hit-up .9s; background: #39ff88; }
.slot.hit-down .slot-goals { animation: hit-down .9s; background: #ff5470; color: #fff; }
.slot.hit-down { animation: shake .45s; }
@keyframes hit-up { 0% { transform: scale(1); } 30% { transform: scale(1.5); } 100% { transform: scale(1); } }
@keyframes hit-down { 0% { transform: scale(1); } 30% { transform: scale(.7); } 100% { transform: scale(1); } }
.inv.robbed { animation: shake .5s; }
/* manager + meter row, the "likes him" thumbs, the story at full time */
.chaos-row { display: flex; align-items: center; gap: 8px; margin-top: 6px; }
.chaos-row .chaos-meter { flex: 1; margin-top: 0; }
.dugout { flex: none; display: inline-flex; align-items: center; gap: 4px; padding: 2px 9px; border-radius: 999px; border: 1px solid rgba(255, 255, 255, .25); background: rgba(255, 255, 255, .08); color: inherit; font: 600 .72rem Inter, sans-serif; cursor: pointer; }
.chaos-meter.due span { color: #ffe600; }
.chaos-meter.due i.on { animation: meter-due .6s infinite alternate; }
@keyframes meter-due { to { filter: brightness(1.6); box-shadow: 0 0 16px #ffe600; } }
.reel .gaffer { position: absolute; top: 4px; right: 4px; z-index: 2; width: 22px; height: 22px; border-radius: 50%; display: grid; place-content: center; font-style: normal; font-size: .72rem; background: #fff; box-shadow: 0 0 0 2px #39c46a; }
.reel .gaffer.down { box-shadow: 0 0 0 2px #ff5470; }
.chaos-story { margin: 8px auto; max-width: 420px; text-align: left; font-size: .85rem; }
.chaos-story summary { cursor: pointer; font-weight: 700; text-align: center; }
.chaos-story ol { margin: 8px 0 0; padding: 0; list-style: none; display: grid; gap: 6px; }
.chaos-story li { display: flex; gap: 10px; align-items: flex-start; padding: 8px 10px; border-radius: 12px; background: rgba(255,255,255,.06); border: 1px solid var(--line); overflow-wrap: anywhere; }
.chaos-story .cs-i { font-size: 1.25rem; line-height: 1.2; flex: none; }
.chaos-story .cs-t { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.chaos-story .cs-t b { font-size: .86rem; }
.chaos-story .cs-t small { font-size: .76rem; line-height: 1.35; opacity: .85; }
.breakdown td.neg { color: var(--bad); }
.btn.spin[disabled] { opacity: .5; }
/* calm animations (Settings → Look: Calm) */ body.calm .cm-card, body.calm .cm-icon, body.calm .coin, body.calm .cm-fx, body.calm .slot.hit-up .slot-goals, body.calm .slot.hit-down .slot-goals, body.calm .slot.hit-down { animation-duration: .01s !important; }
.chaos-meter span { white-space: nowrap; flex: none; }
/* CHAOS moments, in three acts: a full-screen entrance, then the card drops to the bottom while it happens on the pitch */
.cm { top: 0; flex-direction: column; justify-content: flex-end; align-items: center; }
.cm.intro { justify-content: center; padding-top: 16px; }
.cm.intro::before { background: rgba(5, 0, 20, .7); }
.cm.act::before { background: linear-gradient(180deg, transparent 50%, rgba(5, 0, 20, .45)); }
.cm-sky { position: fixed; inset: 0; z-index: -1; pointer-events: none; overflow: hidden; transition: opacity .6s; }
.cm.act .cm-sky { opacity: .3; }
.cm.act .cm-sky.sky-storm { opacity: .55; }
.cm.intro .cm-card { max-width: 460px; padding: 22px 18px 16px; }
.cm.intro .cm-icon { font-size: 4.6rem; }
.cm.intro.cm-big .cm-icon { font-size: 6.2rem; animation: cm-icon-big 1.1s cubic-bezier(.2, 1.3, .4, 1); }
.cm.intro .cm-name { font-size: 2.2rem; } .cm.intro.cm-big .cm-name { font-size: 2.7rem; }
.cm.intro .cm-text { font-size: 1.08rem; }
.cm.act .cm-card { padding: 10px 14px 8px; } .cm.act .cm-icon { font-size: 2rem; animation: none; } .cm.act .cm-name { font-size: 1.3rem; }
.cm.act .cm-skip { margin-top: 4px; }
@keyframes cm-icon-big { 0% { transform: scale(0) rotate(-200deg); } 70% { transform: scale(1.25) rotate(10deg); } 100% { transform: none; } }
/* the skies */
.sky-dark { background: radial-gradient(circle at 50% 40%, #3a1068, #07000f 75%); }
.sky-kickoff { background: radial-gradient(circle at 50% 40%, #1c9b5c, #03210f 75%); }
.sky-red { background: radial-gradient(circle at 50% 45%, #c0122e, #1a0005 75%); animation: sky-pulse 1s ease-in-out infinite alternate; }
.sky-gold { background: repeating-conic-gradient(from 0deg, rgba(255, 214, 0, .35) 0 10deg, rgba(255, 140, 0, .08) 10deg 20deg), radial-gradient(circle, #7a5200, #150c00 75%); animation: sky-spin 12s linear infinite; }
.sky-fire { background: radial-gradient(circle at 50% 100%, #ff7a00, #b3172f 45%, #1a0005 85%); animation: sky-pulse .45s ease-in-out infinite alternate; }
.sky-tv { background: repeating-linear-gradient(0deg, rgba(255, 255, 255, .06) 0 2px, transparent 2px 5px), radial-gradient(circle, #1b3d8f, #020816 75%); }
.sky-money { background: radial-gradient(circle at 50% 40%, #1c9b5c, #021a0c 75%); }
.sky-party { background: radial-gradient(circle at 50% 40%, #7a00ff, #12002a 75%); }
.sky-casino { background: radial-gradient(circle at 50% 45%, #106b3f, #02170c 70%); }
.sky-clock { background: radial-gradient(circle at 50% 40%, #0b2a6e, #020816 75%); }
.sky-news { background: repeating-linear-gradient(90deg, rgba(0, 0, 0, .05) 0 30px, transparent 30px 60px), radial-gradient(circle, #6b6b6b, #121212 80%); }
.sky-unleash { background: conic-gradient(from 0deg, #ff2bd6, #ffe600, #00f0ff, #7a00ff, #ff2bd6); animation: sky-spin 3s linear infinite; }
.sky-unleash, .sky-gold { inset: -50%; }
.sky-storm { background: linear-gradient(180deg, #05070f, #1a2440 60%, #0a0f1c); }
.sky-lightning { background: linear-gradient(180deg, #0a0418, #2a1450 70%, #0a0418); }
.cm-sky.flash::after { content: ''; position: absolute; inset: 0; background: #eaf2ff; animation: sky-flash .55s ease-out forwards; }
@keyframes sky-flash { 0% { opacity: .95; } 12% { opacity: .15; } 22% { opacity: .8; } 100% { opacity: 0; } }
@keyframes sky-pulse { to { filter: brightness(1.35); } }
@keyframes sky-spin { to { transform: rotate(360deg); } }
.cm-rain { position: absolute; inset: -30% -30%; background: repeating-linear-gradient(100deg, rgba(190, 210, 255, .45) 0 1.5px, transparent 1.5px 16px); animation: rain-fall .28s linear infinite; }
.cm-rain.far { opacity: .45; background-size: 60% 60%; animation-duration: .5s; }
@keyframes rain-fall { from { transform: translate(0, -60px); } to { transform: translate(-14px, 0); } }
.cm-confetti { position: absolute; top: -20px; width: 8px; height: 14px; border-radius: 2px; animation: fall linear infinite; }
.cm-coin { position: absolute; top: -50px; font-size: 1.9rem; font-style: normal; animation: fall linear infinite; }
@keyframes fall { to { transform: translateY(110vh) rotate(540deg); } }
.chaos-flash.lightning { background: rgba(235, 242, 255, .85); }
/* the coin you flip yourself */
.coin-wrap { display: block; margin: 12px auto 0; padding: 0; border: 0; background: none; color: inherit; font: inherit; cursor: pointer; perspective: 700px; -webkit-tap-highlight-color: transparent; }
.coin-shadow { display: block; width: 96px; height: 12px; margin: -2px auto 8px; border-radius: 50%; background: radial-gradient(rgba(0, 0, 0, .45), transparent 70%); }
.coin { width: 128px; height: 128px; margin: 6px auto 8px; animation: coin-bob 1.4s ease-in-out infinite; }
.coin-f { font-size: 2.6rem; }
.coin-f b { font-size: .75rem; }
.cm.flipping .coin { animation: none; will-change: transform; }
.coin-go { display: inline-block; font: 700 1rem Oswald, sans-serif; letter-spacing: .05em; padding: 6px 14px; border-radius: 999px; background: #ffe600; color: #2a1a00; animation: pop 1s ease-in-out infinite alternate; }
.cm.flipping .coin-go { visibility: hidden; }
.cm.intro .coin-wrap + .cm-skip, .cm.flipping .cm-skip { display: none; }
@keyframes coin-bob { 0%, 100% { transform: translateY(0) rotateX(0deg); } 50% { transform: translateY(-8px) rotateX(14deg); } }
.cm.landed .coin-f { box-shadow: inset 0 0 0 3px rgba(255, 255, 255, .35), 0 0 26px rgba(255, 230, 0, .8); }  /* not a filter: that flattens the 3D and shows the wrong face */
.cm.act .coin-wrap { display: none; }
/* the line under the reels: one line at most */
.m-top { display: block; white-space: nowrap; text-overflow: ellipsis; }
/* how rare a moment is */
.cm-rar { display: inline-block; margin-bottom: 4px; padding: 2px 10px; border-radius: 999px; font: 800 .68rem Inter, sans-serif; letter-spacing: .12em; text-transform: uppercase; background: rgba(255, 255, 255, .18); }
.rar-u .cm-rar { background: #00c2d1; color: #002a2e; }
.rar-r .cm-rar { background: #b44dff; color: #fff; box-shadow: 0 0 12px rgba(180, 77, 255, .8); }
.rar-l .cm-rar { background: linear-gradient(90deg, #ffe600, #ff9a00, #ffe600); background-size: 200% 100%; color: #3a2000; animation: rar-shine 1.2s linear infinite; box-shadow: 0 0 16px rgba(255, 214, 0, .9); }
.cm-card.rar-r { border-color: #b44dff; box-shadow: 0 0 30px rgba(180, 77, 255, .55), 0 10px 40px rgba(0, 0, 0, .5); }
.cm-card.rar-l { border-color: #ffd400; box-shadow: 0 0 40px rgba(255, 214, 0, .7), 0 10px 40px rgba(0, 0, 0, .5); }
@keyframes rar-shine { to { background-position: -200% 0; } }
.share-day { display: block; width: 100%; margin: 12px 0 4px; }
/* home: CHAOS is the headline event (first on the Main tab); the banter line under the logo */
.chaos-card:first-child { margin-top: 4px; }
.chaos-head .kicker { display: block; font: 800 .62rem Inter, sans-serif; letter-spacing: .14em; text-transform: uppercase; color: #ffe600; opacity: .95; }
.hero .banter { font-style: italic; }
.chaos-card .chaos-pool { display: flex; gap: 6px; margin-top: 10px; } .chaos-card .chaos-pool button { flex: 1; padding: 7px 6px; border-radius: 12px; border: 1px solid rgba(255,255,255,.25); background: rgba(255,255,255,.1); color: #fff; font: 700 .76rem Inter, sans-serif; cursor: pointer; } .chaos-card .chaos-pool button.on { background: #ffe600; color: #2a1a00; border-color: #ffe600; }

/* Matchday: banner on Home/Today, the hub, and the "played for both" reel tag */
.match-banner { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 10px; margin: 10px 0 4px; padding: 12px 16px; border-radius: 20px; text-decoration: none; color: #fff; text-align: center;
  background: linear-gradient(135deg, color-mix(in srgb, var(--club-main, #0b3d2e) 80%, #000), #1d7a57); box-shadow: 0 5px 0 rgba(0,0,0,.3); animation: md-pulse 2.4s ease-in-out infinite; }
.match-banner.done { animation: none; }
.match-banner:active { transform: translateY(4px); box-shadow: 0 1px 0 rgba(0,0,0,.3); }
.match-banner > span:first-child, .match-banner > span:last-child { font-size: 1.8rem; }
.match-banner b { display: block; font: 700 1.4rem Oswald, sans-serif; letter-spacing: 2px; color: #c8ff3d; text-shadow: 0 2px 0 rgba(0,0,0,.3); }
.match-banner small { display: block; font-size: .85rem; font-weight: 700; }
.match-banner small.mb-sub { font-weight: 400; opacity: .85; font-size: .75rem; }
@keyframes md-pulse { 50% { box-shadow: 0 5px 0 rgba(0,0,0,.3), 0 0 0 4px rgba(200,255,61,.35); } }
.next-match { display: block; margin-top: 8px; font-size: .8rem; color: inherit; opacity: .85; text-decoration: none; }
.md-card { margin: 12px 0; padding: 16px; border-radius: 20px; text-align: center; background: var(--card); border: 2px solid var(--line); }
.md-card.today { background: linear-gradient(135deg, color-mix(in srgb, var(--club-main, #0b3d2e) 80%, #000), #1d7a57); color: #fff; border-color: transparent; }
.md-card .kicker { font: 700 .8rem Oswald, sans-serif; letter-spacing: 3px; opacity: .8; }
.md-card.today .kicker { color: #c8ff3d; opacity: 1; font-size: 1.1rem; }
.md-teams { display: flex; align-items: center; justify-content: center; gap: 10px; flex-wrap: wrap; margin: 10px 0 6px; }
.md-teams b { font: 700 1.2rem Oswald, sans-serif; }
.md-clock { margin: 0; font-weight: 700; }
.md-tile { display: grid; grid-template-columns: auto 1fr; gap: 2px 12px; align-items: center; margin-top: 10px; padding: 14px 16px; border-radius: 20px; text-decoration: none; color: #fff;
  background: linear-gradient(135deg, #1d7a57, #0f4a35); box-shadow: 0 5px 0 rgba(0,0,0,.3); }
.md-tile:active { transform: translateY(4px); box-shadow: 0 1px 0 rgba(0,0,0,.3); }
.md-tile + .md-tile { background: linear-gradient(135deg, #2f7d3a, #1b5226); }
.md-tile .md-ico { grid-row: span 2; font-size: 2rem; }
.md-tile b { font: 700 1.25rem Oswald, sans-serif; text-transform: uppercase; letter-spacing: 1px; }
.md-tile small { font-size: .82rem; opacity: .92; line-height: 1.35; }
.md-tile strong { color: #c8ff3d; }
.md-tile.done { background: linear-gradient(135deg, #35554a, #22392f); }
.md-tile.locked { opacity: .6; background: var(--card); color: var(--text); box-shadow: none; border: 2px dashed var(--line); }
.md-list > div { display: flex; justify-content: space-between; padding: 8px 4px; border-bottom: 1px solid var(--line); }
.md-list small { opacity: .75; }
.mate.both { background: #c8ff3d; color: #0a2a1f; font-weight: 700; }
.stage .reel.fit2 .mate.both { display: block; }

/* Difficulty: Normal / Hard / Extreme on one switch */
.hard-toggle.three > * small, .hard-toggle.four > * small { white-space: normal; line-height: 1.2; }
.hard-toggle.four > * small { font-size: .58rem; }
.easy-pill { background: #16a34a !important; color: #fff !important; }
.cx-note { display: inline-block; margin: 2px 0 8px; padding: 4px 10px; border-radius: 999px; background: rgba(0, 0, 0, .25); font-size: .78rem; font-weight: 700; }

/* International break: flag bunting across the top, a banner and the International XI page */
html.intl-break body::after { content: ''; position: fixed; top: 0; left: 0; right: 0; height: 16px; z-index: 46; pointer-events: none;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='96' height='16'%3E%3Cpath d='M0 1H96' stroke='%23333' stroke-width='1.5'/%3E%3Cpath d='M1 1h22l-11 14z' fill='%23e63946'/%3E%3Cpath d='M25 1h22l-11 14z' fill='%23fff'/%3E%3Cpath d='M49 1h22l-11 14z' fill='%231d4ed8'/%3E%3Cpath d='M73 1h22l-11 14z' fill='%23facc15'/%3E%3C/svg%3E") repeat-x; filter: drop-shadow(0 2px 2px rgba(0, 0, 0, .3)); }
.intl-banner { display: block; margin: 10px 0 4px; border-radius: 20px; overflow: hidden; text-decoration: none; color: #fff;
  background: linear-gradient(135deg, #102a6b, #1d4ed8 55%, #b91c1c); box-shadow: 0 5px 0 rgba(0, 0, 0, .3); }
.intl-banner:active { transform: translateY(4px); box-shadow: 0 1px 0 rgba(0, 0, 0, .3); }
.ib-flags { display: block; white-space: nowrap; font-size: 1.1rem; padding: 6px 0 0; animation: ib-scroll 18s linear infinite; }
@keyframes ib-scroll { to { transform: translateX(-50%); } }
.ib-row { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 10px; padding: 4px 16px 12px; text-align: center; }
.ib-row > span:first-child, .ib-row > span:last-child { font-size: 1.8rem; }
.intl-banner b { display: block; font: 700 1.25rem Oswald, sans-serif; letter-spacing: 1.5px; color: #fde047; text-shadow: 0 2px 0 rgba(0, 0, 0, .3); }
.intl-banner small { display: block; font-size: .8rem; opacity: .92; }
.md-card.intl { background: linear-gradient(135deg, #102a6b, #1d4ed8 55%, #b91c1c); }
.md-card.intl .kicker { color: #fde047; }
.ib-big { font-size: 3.4rem; line-height: 1.1; margin-top: 6px; }
.ib-name { display: block; font: 700 1.6rem Oswald, sans-serif; letter-spacing: 1px; }
.md-card .stat-pick { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; margin-top: 10px; }
.md-card .stat-btn { color: #fff; border-color: rgba(255, 255, 255, .45); }
.nation-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(104px, 1fr)); gap: 8px; }
.nation-grid button { position: relative; display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 8px 4px; border-radius: 14px; border: 2px solid var(--line); background: var(--card); color: var(--text); font: 600 .78rem Inter, sans-serif; cursor: pointer; }
.nation-grid button span { font-size: 1.7rem; line-height: 1.1; }
.nation-grid button.on { border-color: var(--accent); box-shadow: 0 0 0 2px var(--accent); }
.nation-grid button i { position: absolute; top: 4px; right: 6px; font-style: normal; color: var(--accent); font-weight: 800; }
/* calm animations (Settings → Look: Calm) */ body.calm .ib-flags, body.calm .match-banner { animation: none; }

/* Northern Ireland's flag (no emoji exists) sized like an emoji flag */
.flag-svg { display: inline-block; width: 1.25em; height: .85em; vertical-align: -0.08em; border-radius: 2px; }

/* Packs: the bar on Home/Today, the Packs page, the opening (burst, flips, the Legend walkout) */
.pack-bar { display: grid; grid-template-columns: auto 1fr auto; align-items: center; column-gap: 10px; margin: 10px 0 4px; padding: 10px 16px; border-radius: 18px; text-decoration: none; color: #2a1a00;
  background: linear-gradient(135deg, #ffe066, #f5b700 55%, #ff8a00); box-shadow: 0 4px 0 #a86a00; }
.pack-bar > span:first-child, .pack-bar > span:last-child { font-size: 1.7rem; }
.pack-bar b, .pack-bar small { display: block; }
.pack-bar b { font: 700 1.1rem Oswald, sans-serif; letter-spacing: .5px; text-transform: uppercase; }
.pack-bar small { font-size: .75rem; opacity: .85; }
.pack-bar:active { transform: translateY(3px); box-shadow: 0 1px 0 #a86a00; }
/* Levels: the chip on Home, the level page; level tags on boards; This month / All time; club v club */
.lvl-chip { position: relative; display: inline-flex; align-items: center; gap: 3px; padding: 2px 9px 4px; border-radius: 999px; background: var(--inset); color: var(--text); font: 800 .75rem Inter, sans-serif; text-decoration: none; overflow: hidden; vertical-align: middle; }
.lvl-chip i { position: absolute; left: 0; bottom: 0; height: 3px; background: var(--accent); }
.lvl-hero { display: flex; flex-direction: column; align-items: center; gap: 4px; margin: 12px 0; padding: 18px; border-radius: 20px; background: var(--card); border: 2px solid var(--line); text-align: center; }
.lvl-big { font-size: 3.4rem; line-height: 1; }
.lvl-hero b { font: 700 1.8rem Oswald, sans-serif; } .lvl-hero small { color: var(--muted); }
.lvl-bar { width: 100%; margin: 6px 0; }
.lvl-ladder { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; }
.lvl-ladder > div { display: flex; flex-direction: column; align-items: center; padding: 8px 2px; border-radius: 12px; background: var(--inset); opacity: .55; text-align: center; }
.lvl-ladder > div.got { opacity: 1; } .lvl-ladder > div.now { box-shadow: 0 0 0 2px var(--accent); }
.lvl-ladder span { font-size: 1.5rem; } .lvl-ladder b { font-size: .72rem; } .lvl-ladder small { font-size: .62rem; color: var(--muted); }
.lvl-earn > div { display: grid; grid-template-columns: 30px 1fr auto; align-items: center; padding: 8px 4px; border-bottom: 1px solid var(--line); }
.lvl-earn b { color: var(--accent-ink, var(--accent)); }
.lv-tag { display: inline-block; margin-left: 6px; padding: 0 6px; border-radius: 999px; background: var(--inset); font: 700 .62rem Inter, sans-serif; font-style: normal; color: var(--muted); vertical-align: middle; }
.lb-period { margin: 4px 0 8px; }
.lb-period a { cursor: pointer; }
.club-lb .lb-row > span:nth-child(2) { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }

/* The first game: the card on Home and the coach bubbles */
.first-xi { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 10px; margin: 10px 0 4px; padding: 14px 16px; border-radius: 20px; text-decoration: none; color: #0a2a1f;
  background: linear-gradient(135deg, #c8ff3d, #7ee081); box-shadow: 0 5px 0 #4c8f2c; animation: md-pulse 2.4s ease-in-out infinite; }
.first-xi > span:first-child, .first-xi > span:last-child { font-size: 1.8rem; }
.first-xi b { display: block; font: 700 1.2rem Oswald, sans-serif; text-transform: uppercase; letter-spacing: .5px; }
.first-xi small { display: block; font-size: .8rem; }
.coach { position: fixed; z-index: 110; padding: 10px 14px; border-radius: 14px; background: #ffe600; color: #2a1a00; font-size: .85rem; line-height: 1.35; box-shadow: 0 8px 24px rgba(0, 0, 0, .35); pointer-events: none; animation: pw-in .35s cubic-bezier(.2, 1.4, .4, 1); }
.coach b { display: block; font: 700 1rem Oswald, sans-serif; letter-spacing: .3px; }
.coach::after { content: ''; position: absolute; left: calc(var(--ax, 50%) - 8px); bottom: -8px; border: 8px solid transparent; border-bottom: 0; border-top-color: #ffe600; }
.coach.below::after { bottom: auto; top: -8px; border: 8px solid transparent; border-top: 0; border-bottom-color: #ffe600; }
.coach-lit { box-shadow: 0 0 0 3px #ffe600, 0 0 22px rgba(255, 230, 0, .8) !important; border-radius: 12px; }

/* ================================================================ player cards (packs, the Album) */
.pcard { position: relative; width: 100%; aspect-ratio: 5 / 7; perspective: 900px; font-size: 10px; }
.pc-inner { position: absolute; inset: 0; transform-style: preserve-3d; transition: transform .6s cubic-bezier(.3, 1.3, .5, 1); }
.pack-open .pcard .pc-inner { transform: rotateY(180deg); }
.pack-open .pcard.flipped .pc-inner { transform: rotateY(0deg); }
.pc-front, .pc-back { position: absolute; inset: 0; backface-visibility: hidden; -webkit-backface-visibility: hidden; overflow: hidden;
  clip-path: polygon(12% 0, 88% 0, 100% 6%, 100% 89%, 50% 100%, 0 89%, 0 6%); }
.pc-back { transform: rotateY(180deg); display: grid; place-items: center;
  background: radial-gradient(circle at 50% 42%, rgba(255, 255, 255, .12), transparent 55%), repeating-linear-gradient(45deg, #0b3d2e 0 .7em, #0f4b39 .7em 1.4em);
  box-shadow: inset 0 0 0 .3em #d4af37; }
.pcb-ring { width: 4.6em; height: 4.6em; border-radius: 50%; display: grid; place-items: center; border: .25em solid #d4af37; background: #07261d; }
.pcb-ring b { font: 700 1.9em Oswald, sans-serif; color: #fde047; letter-spacing: .03em; }
.hint-g .pc-back { animation: hint-g 1s ease-in-out infinite alternate; }
.hint-l .pc-back { animation: hint-l .8s ease-in-out infinite alternate; }
.hint-w .pc-back { animation: hint-w 1.2s linear infinite; }
@keyframes hint-g { to { box-shadow: inset 0 0 0 .3em #d4af37, inset 0 0 2.6em #facc15; } }
@keyframes hint-l { to { box-shadow: inset 0 0 0 .3em #e879f9, inset 0 0 3em #a855f7; } }
@keyframes hint-w { 0% { box-shadow: inset 0 0 2.4em #ef4444; } 33% { box-shadow: inset 0 0 2.4em #22c55e; } 66% { box-shadow: inset 0 0 2.4em #3b82f6; } 100% { box-shadow: inset 0 0 2.4em #ef4444; } }
/* the card's edge follows its cut corners: the face is the edge colour, and the tier's colours sit on a layer inset by the edge's width */
.pc-front { display: grid; grid-template-columns: 3.1em 1fr; grid-template-rows: 1fr auto auto auto; grid-template-areas: 'top photo' 'name name' 'stats stats' 'foot foot';
  padding: 1.15em .8em 1.9em; color: #2b1a0c; isolation: isolate;
  --pc-bg: linear-gradient(160deg, #f6d6ad 0%, #cf9460 45%, #8a5a2f 100%); --pc-edge: linear-gradient(rgba(255, 255, 255, .45), rgba(255, 255, 255, .45));
  background: var(--pc-edge), var(--pc-bg); }
.pc-front::before { content: ''; position: absolute; inset: .3em; z-index: -1; background: var(--pc-bg);
  clip-path: polygon(12% 0, 88% 0, 100% 6%, 100% 89%, 50% 100%, 0 89%, 0 6%); }
.tier-s .pc-front { color: #1f2937; --pc-bg: linear-gradient(160deg, #ffffff 0%, #dfe4ea 40%, #8e99a8 100%); --pc-edge: linear-gradient(#f8fafc, #94a3b8); }
.tier-g .pc-front { color: #3b2a00; --pc-bg: linear-gradient(160deg, #fff8c9 0%, #f5cf3d 40%, #b8860b 100%); --pc-edge: linear-gradient(#fffbe6, #e0b232); }
.tier-l .pc-front { color: #fff; --pc-bg: linear-gradient(160deg, #1e0a4a 0%, #6d28d9 45%, #c026d3 100%); --pc-edge: linear-gradient(#f5d0fe, #e879f9); }
.pc-top { grid-area: top; display: flex; flex-direction: column; align-items: center; gap: .1em; line-height: 1; }
.pc-num { font: 700 2.2em/1 Oswald, sans-serif; letter-spacing: -.01em; }
.pc-top small { font: 800 .6em Inter, sans-serif; opacity: .75; }
.pc-pos { font: 700 1em Oswald, sans-serif; margin-top: .2em; }
.pc-flag { font-size: 1.3em; }
.pc-photo { grid-area: photo; display: grid; place-items: center; }
.pc-photo .avatar { width: 5.2em !important; height: 5.2em !important; min-width: 0; font-size: 1em !important; box-shadow: 0 .2em .6em rgba(0, 0, 0, .35); }
.pc-photo .avatar > b { font-size: 1.7em; }
.pc-name { grid-area: name; margin-top: .4em; padding: .15em 0; text-align: center; font: 700 1.35em/1.15 Oswald, sans-serif; text-transform: uppercase; letter-spacing: .02em;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; border-top: 1px solid currentColor; border-bottom: 1px solid currentColor; border-color: rgba(0, 0, 0, .18); }
.tier-l .pc-name { border-color: rgba(255, 255, 255, .3); }
.pc-stats { grid-area: stats; display: grid; grid-template-columns: repeat(3, 1fr); text-align: center; margin-top: .35em; font: 800 .6em Inter, sans-serif; opacity: .9; }
.pc-stats b { display: block; font: 700 1.7em/1.05 Oswald, sans-serif; }
.pc-foot { grid-area: foot; display: flex; align-items: center; justify-content: center; gap: .5em; margin-top: .45em; }
.pc-club { font: 800 .65em Inter, sans-serif; padding: .1em .45em; border-radius: .4em; background: rgba(0, 0, 0, .18); }
.pc-pips { display: flex; gap: .25em; }
.pc-pips i { width: .75em; height: .75em; border-radius: 50%; border: .12em solid currentColor; opacity: .45; }
.pc-pips i.on { background: currentColor; opacity: 1; }
.pc-pips i.gift { border-radius: .12em; transform: rotate(45deg) scale(.95); }  /* the pack piece: a diamond */
.pc-pips i.new { animation: pip-new .8s ease-out 1.2s backwards; }
@keyframes pip-new { 0% { transform: scale(2.6); box-shadow: 0 0 0 .4em #fde047; } }
.pc-pips em { font: 800 .6em Inter, sans-serif; font-style: normal; opacity: .75; }
.pc-done { position: absolute; top: 2.4em; right: -3em; transform: rotate(38deg); padding: .25em 3.2em; background: #16a34a; color: #fff; font: 800 .62em Inter, sans-serif; letter-spacing: .06em; box-shadow: 0 .1em .3em rgba(0, 0, 0, .3); }
.pc-chose { position: absolute; top: .5em; right: 1.2em; font-size: 1.1em; }
.pc-sheen { position: absolute; inset: 0; pointer-events: none; }
.tier-g .pc-sheen { background: linear-gradient(115deg, transparent 35%, rgba(255, 255, 255, .6) 50%, transparent 65%) -200% 0 / 250% 100% no-repeat; animation: card-sheen 3.2s ease-in-out infinite; }
.tier-l .pc-sheen { background: conic-gradient(from 0deg, rgba(255, 0, 128, .28), rgba(255, 230, 0, .22), rgba(0, 255, 200, .25), rgba(80, 120, 255, .28), rgba(255, 0, 128, .28)); mix-blend-mode: color-dodge; animation: card-holo 4s linear infinite; }
@keyframes card-sheen { 60%, 100% { background-position: 200% 0; } }
@keyframes card-holo { to { filter: hue-rotate(360deg); } }
.pc-wild { display: flex !important; flex-direction: column; align-items: center; justify-content: center; gap: .3em; color: #fff; text-align: center;
  --pc-bg: radial-gradient(circle at 50% 35%, #3f3f46, #09090b 70%); --pc-edge: linear-gradient(#fde047, #fde047); background: var(--pc-edge), var(--pc-bg); }
.pw-joker { font-size: 4.2em; line-height: 1; animation: pop 1s ease-in-out infinite alternate; }
.pc-wild b { font: 700 1.5em Oswald, sans-serif; letter-spacing: .08em; color: #fde047; }
.pw-kind { font: 800 .8em Inter, sans-serif; }
.card-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(100px, 1fr)); gap: 10px; }
.card-grid .pcard { font-size: 9.5px; }
.pitch.packed .slot.tier-l { box-shadow: 0 0 0 2px #c084fc, 0 0 14px #a855f7; } .pitch.packed .slot.tier-g { box-shadow: 0 0 0 2px #facc15; }
.pitch.packed .slot.tier-s { box-shadow: 0 0 0 2px #cbd5e1; }
.how-cards summary { cursor: pointer; }
.how-cards { margin: 12px 0 14px; } .how-cards[open] .how-list { margin-top: 8px; }

/* ================================================================ packs: the foil, the box, the opening */
.po-foil { position: relative; width: 180px; height: 256px; border-radius: 18px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; overflow: hidden; color: #fff;
  background: linear-gradient(135deg, #3b0764, #7e22ce 35%, #f59e0b 72%, #fde047); box-shadow: 0 18px 44px rgba(0, 0, 0, .55), inset 0 0 0 3px rgba(255, 255, 255, .35); }
.po-foil::after { content: ''; position: absolute; inset: -50%; background: linear-gradient(115deg, transparent 40%, rgba(255, 255, 255, .55) 50%, transparent 60%); animation: foil 2.4s ease-in-out infinite; }
@keyframes foil { from { transform: translateX(-40%); } to { transform: translateX(40%); } }
.po-foil b { font: 700 2.5rem/1 Oswald, sans-serif; color: #fde047; text-shadow: 0 3px 0 rgba(0, 0, 0, .45); }
.po-foil span { font: 700 1.05rem Oswald, sans-serif; letter-spacing: 5px; }
.po-foil i { font: 800 .64rem Inter, sans-serif; letter-spacing: 1.5px; margin-top: 18px; font-style: normal; padding: 3px 10px; border-radius: 999px; background: rgba(0, 0, 0, .3); }
.po-foil .pf-badge { font-size: 2.4rem; letter-spacing: 0; margin-bottom: 6px; filter: drop-shadow(0 3px 4px rgba(0, 0, 0, .4)); }
.pk-nations { background: linear-gradient(135deg, #0b1f5c, #1d4ed8 45%, #b91c1c); }
.pk-matchday { background: linear-gradient(135deg, var(--pk1, #0b3d2e), color-mix(in srgb, var(--pk1, #0b3d2e) 45%, #000)); }
.pk-matchday b { color: var(--pk2, #fde047); }
.pk-legends { background: linear-gradient(135deg, #05010c, #3b0764 50%, #a21caf); box-shadow: 0 18px 44px rgba(0, 0, 0, .55), inset 0 0 0 3px #f0abfc; }
.po-foil.small { width: 70px; height: 100px; border-radius: 10px; flex-shrink: 0; }
.po-foil.small b { font-size: 1rem; } .po-foil.small span { font-size: .45rem; letter-spacing: 2px; } .po-foil.small i { display: none; } .po-foil.small .pf-badge { font-size: 1.1rem; margin: 0; }
/* the Album's header */
.alb-head { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin: 10px 0; }
.alb-level { display: flex; align-items: center; gap: 10px; padding: 12px; border-radius: 18px; background: var(--card); border: 2px solid var(--line); color: var(--text); text-decoration: none; }
.alb-lv-icon { font-size: 1.8rem; }
.alb-level > span:last-child { flex: 1; min-width: 0; }
.alb-level b { display: block; font: 700 1.3rem Oswald, sans-serif; } .alb-level small { display: block; color: var(--muted); font-size: .75rem; margin-bottom: 4px; }
.pack-box { display: flex; align-items: center; gap: 8px; padding: 8px 10px; border-radius: 18px; background: var(--card); border: 2px solid var(--line); }
.pack-box.ready { border-color: #f5b700; box-shadow: 0 0 0 3px rgba(245, 183, 0, .25); }
.pack-box b { display: block; font: 700 1.05rem Oswald, sans-serif; } .pack-box small { display: block; font-size: .7rem; color: var(--muted); margin-bottom: 4px; }
.alb-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; margin-bottom: 10px; }
.alb-stats a { display: flex; flex-direction: column; align-items: center; padding: 8px 4px; border-radius: 14px; background: var(--inset); color: var(--text); text-decoration: none; }
.alb-stats b { font: 700 1.35rem Oswald, sans-serif; } .alb-stats small { font-size: .68rem; color: var(--muted); }
.alb-links { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin: 10px 0; }
.alb-links a { padding: 10px; border-radius: 14px; background: var(--card); border: 2px solid var(--line); color: var(--text); text-decoration: none; font-weight: 800; font-size: .88rem; }
.alb-links small { display: block; font-weight: 500; font-size: .7rem; color: var(--muted); }
.tier-row { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 5px; margin-bottom: 10px; }
.tier-row a { display: flex; flex-direction: column; align-items: center; gap: 2px; min-width: 0; padding: 8px 2px 7px; border-radius: 12px; background: var(--inset); color: var(--text); text-decoration: none; }
.tier-row a.on { box-shadow: 0 0 0 2px var(--accent); }
.tier-row span { font-size: 1.15rem; line-height: 1; }
.tier-row b { font-size: .86rem; font-weight: 800; white-space: nowrap; } .tier-row b i { font-style: normal; font-weight: 600; font-size: .66rem; color: var(--muted); }
.tier-row small { font-size: .62rem; font-weight: 700; color: var(--text); text-align: center; line-height: 1.1; } .tier-row small.tr-need { font-weight: 500; color: var(--muted); font-size: .56rem; }
.tr-bar { display: block; width: 78%; height: 4px; border-radius: 3px; background: rgba(127,127,127,.25); overflow: hidden; margin: 1px 0 2px; }
.tr-bar i { display: block; height: 100%; border-radius: 3px; background: var(--muted); }
.tier-row a:nth-child(1) .tr-bar i { background: #b0703f; } .tier-row a:nth-child(2) .tr-bar i { background: #c9d0d9; }
.tier-row a:nth-child(3) .tr-bar i { background: #f2c230; } .tier-row a:nth-child(4) .tr-bar i { background: #a35be0; }
.tier-row a:nth-child(5) .tr-bar i { background: linear-gradient(90deg, #7fd8ff, #c7f3ff); }
.how-list { margin: 0; padding-left: 18px; line-height: 1.5; font-size: .88rem; }
/* the opening */
.pack-open { position: fixed; inset: 0; z-index: 120; overflow: hidden; color: #fff; background: radial-gradient(circle at 50% 42%, #3b0764, #0b0418 72%); }
.pko-nations { background: radial-gradient(circle at 50% 42%, #1e3a8a, #050b1f 72%); }
.pko-legends { background: radial-gradient(circle at 50% 42%, #581c87, #05010c 72%); }
.po-rays { position: absolute; left: 50%; top: 40%; width: 220vmax; height: 220vmax; transform: translate(-50%, -50%); pointer-events: none;
  background: repeating-conic-gradient(from 0deg, rgba(255, 255, 255, .08) 0 7deg, transparent 7deg 18deg);
  -webkit-mask: radial-gradient(circle, #000 10%, transparent 45%); mask: radial-gradient(circle, #000 10%, transparent 45%); animation: rays 24s linear infinite; }
@keyframes rays { to { transform: translate(-50%, -50%) rotate(360deg); } }
.charging .po-rays { animation-duration: 3s; }
.po-stage { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px; }
.po-pack { position: relative; cursor: pointer; animation: po-bob 1.6s ease-in-out infinite; }
@keyframes po-bob { 50% { transform: translateY(-10px) rotate(-2deg); } }
.po-strip { position: absolute; left: 0; right: 0; top: 0; height: 13%; z-index: 2; border-radius: 18px 18px 0 0; background: rgba(255, 255, 255, .22);
  clip-path: polygon(0 0, 100% 0, 100% 70%, 95% 100%, 90% 70%, 85% 100%, 80% 70%, 75% 100%, 70% 70%, 65% 100%, 60% 70%, 55% 100%, 50% 70%, 45% 100%, 40% 70%, 35% 100%, 30% 70%, 25% 100%, 20% 70%, 15% 100%, 10% 70%, 5% 100%, 0 70%); }
.po-name { margin: 0; text-align: center; font: 700 1.3rem Oswald, sans-serif; letter-spacing: 1px; text-transform: uppercase; }
.po-name small { display: block; font: 500 .8rem Inter, sans-serif; letter-spacing: 0; text-transform: none; opacity: .8; }
.po-hint { margin: 0; font: 700 1rem Oswald, sans-serif; letter-spacing: 1px; color: #fde047; animation: pop 1s ease-in-out infinite alternate; }
.charging .po-pack { animation: po-shake .09s linear infinite; }
.charging .po-foil { box-shadow: 0 0 60px 10px rgba(253, 224, 71, .75), inset 0 0 0 3px #fff; transition: box-shadow .9s; }
.charging .po-hint, .charging .po-name, .torn .po-hint, .torn .po-name { opacity: 0; transition: opacity .3s; }
@keyframes po-shake { 0% { transform: translate(0, 0) rotate(0); } 25% { transform: translate(-3px, 1px) rotate(-1.5deg); } 75% { transform: translate(3px, -1px) rotate(1.5deg); } }
.torn .po-pack { animation: none; }
.torn .po-strip { animation: po-strip .6s cubic-bezier(.2, .8, .3, 1) forwards; }
@keyframes po-strip { to { transform: translate(90px, -220px) rotate(38deg); opacity: 0; } }
.torn .po-foil { animation: po-drop .7s .25s ease-in forwards; }
@keyframes po-drop { to { transform: translateY(70vh) scale(.85) rotate(6deg); opacity: 0; } }
.po-flash { position: absolute; inset: 0; background: #fff; opacity: 0; pointer-events: none; }
.torn .po-flash { animation: po-flash .5s ease-out; }
@keyframes po-flash { 15% { opacity: .85; } }
.dealt .po-stage { display: none; }
.po-cards { position: absolute; left: 50%; top: 45%; transform: translate(-50%, -50%); width: min(94vw, 400px); display: flex; flex-wrap: wrap; justify-content: center; gap: 12px 10px; }
.po-cards .pcard { width: calc((100% - 20px) / 3); font-size: min(2.7vw, 11px); animation: po-deal .55s cubic-bezier(.2, 1.2, .4, 1) backwards; animation-delay: calc(var(--i, 0) * .1s); }
@keyframes po-deal { from { transform: translateY(45vh) scale(.35) rotate(calc(var(--i, 0) * 9deg - 18deg)); opacity: 0; } }
.po-cards .pcard.flipped.tier-g, .po-cards .pcard.flipped.tier-l, .po-cards .pcard.from-wild { animation: po-shine .9s ease-out; }
@keyframes po-shine { 35% { transform: scale(1.14); } }
.po-walk { position: absolute; inset: 0; display: none; align-items: center; justify-content: center; pointer-events: none; z-index: 3; }
.pack-open.walking .po-walk { display: flex; background: radial-gradient(circle at 50% 45%, rgba(168, 85, 247, .6), #05010c 65%); }
.pack-open.walking .po-cards, .pack-open.walking .po-actions { visibility: hidden; }
.pw-step { display: flex; flex-direction: column; align-items: center; gap: 6px; animation: pw-in .5s cubic-bezier(.2, 1.4, .4, 1); }
.pw-big { font: 700 4.5rem/1 Oswald, sans-serif; color: #fde047; text-shadow: 0 0 30px #a855f7; }
.pw-step small { font: 700 1rem Oswald, sans-serif; letter-spacing: 3px; text-transform: uppercase; }
.pw-club { transform: scale(2); }
@keyframes pw-in { from { transform: scale(.3); opacity: 0; } }
.po-choice { position: absolute; inset: 0; z-index: 4; display: none; flex-direction: column; align-items: center; justify-content: center; gap: 16px; padding: 16px; background: rgba(5, 1, 12, .88); }
.choosing .po-choice { display: flex; animation: pw-in .35s ease-out; }
.pack-open .po-choice .pcard .pc-inner { transform: none; }
.pch-head { display: flex; flex-direction: column; align-items: center; text-align: center; }
.pch-head span { font-size: 2.6rem; } .pch-head b { font: 700 1.6rem Oswald, sans-serif; letter-spacing: 1px; color: #fde047; text-transform: uppercase; } .pch-head small { opacity: .85; }
.pch-cards { display: flex; gap: 10px; justify-content: center; width: min(96vw, 440px); }
.pch-cards .pcard { width: calc((100% - 20px) / 3); font-size: min(2.9vw, 12px); cursor: pointer; transition: transform .2s; animation: po-deal .45s cubic-bezier(.2, 1.2, .4, 1) backwards; }
.pch-cards .pcard:nth-child(2) { animation-delay: .08s; } .pch-cards .pcard:nth-child(3) { animation-delay: .16s; }
.pch-cards .pcard:active { transform: scale(.96); }
.pch-cards .pcard.picked { transform: scale(1.12); z-index: 1; }
.pch-cards:has(.picked) .pcard:not(.picked) { opacity: .25; transition: opacity .3s; }
.po-fx { position: absolute; inset: 0; pointer-events: none; z-index: 5; }
.po-fx i { position: fixed; width: 7px; height: 7px; border-radius: 2px; animation: spark 1s ease-out forwards; }
@keyframes spark { to { transform: translate(var(--dx), var(--dy)) rotate(540deg); opacity: 0; } }
.po-actions { position: absolute; left: 0; right: 0; bottom: max(5vh, 20px); display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 0 16px; }
.po-better { margin: 0; color: #fde047; text-align: center; }
.dealt:not(.over) .po-actions::before { content: 'Tap to speed up'; font-size: .75rem; opacity: .55; }
/* calm animations (Settings → Look: Calm) */ body.calm .po-foil::after, body.calm .po-pack, body.calm .po-hint, body.calm .po-rays, body.calm .tier-l .pc-sheen, body.calm .tier-g .pc-sheen { animation: none; }
.pc-name.long { font-size: 1.1em; }

/* Leaderboards: one row of games, one line of drop-downs */
.lbx-games { display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; margin: 6px -16px 8px; padding: 2px 16px 4px; }
.lbx-games::-webkit-scrollbar { display: none; }
.lbx-games a { flex: none; padding: 8px 14px; border-radius: 999px; background: var(--inset); color: var(--text); text-decoration: none; font: 700 .88rem Inter, sans-serif; white-space: nowrap; }
.lbx-games a.on { background: var(--accent); color: #0a2a1f; box-shadow: 0 3px 0 var(--btn-edge, rgba(0, 0, 0, .25)); }
.lbx-filters { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 8px; }
.lbx-sel { flex: 1 1 auto; min-width: 0; max-width: 100%; padding: 8px 28px 8px 12px; border-radius: 12px; border: 2px solid var(--line); background: var(--card) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%23888'/%3E%3C/svg%3E") no-repeat right 10px center;
  color: var(--text); font: 700 .85rem Inter, sans-serif; -webkit-appearance: none; appearance: none; }
.lbx-note { margin: 0 0 8px; }
#lbyou:not(:empty) { margin-bottom: 4px; }
.lbx-spread { margin-top: 12px; }
.lbx-games { -webkit-mask: linear-gradient(90deg, #000 85%, transparent); mask: linear-gradient(90deg, #000 85%, transparent); }
/* during an international break the bunting takes over the top edge (the club stripe would show through it) */
html.intl-break.has-club body::before { display: none; }
/* Extreme name entry: no suggestions, a Go button */
.guess-box.typed { display: flex; gap: 6px; align-items: stretch; }
.guess-box.typed .input { flex: 1; min-width: 0; }
.name-go { flex: none; padding: 0 16px; }

/* ================= 💰 Moneyball: the boardroom (body.money-mode is set by the router) ================= */
body.money-mode {
  --bg: #07140f; --bg2: #0c1f17; --panel: #10281e; --panel2: #163428; --card: #10281e; --text: #f3f7f1; --muted: #a9c2b4;
  --accent: #f5c542; --hi: #f5c542; --hi2: #3ddc84; --link: #f5c542; --line: rgba(245, 197, 66, .22); --edge: rgba(0, 0, 0, .5);
  --inset: rgba(0, 0, 0, .28); --modal: #0c1f17; --nav: rgba(7, 20, 15, .94); --btn-edge: #9a7414; --good: #3ddc84; --bad: #ff5a5f;
  --toast-bg: #f5c542; --toast-text: #1b1400;
  color-scheme: dark; color: var(--text); background: transparent;
}
html:has(body.money-mode) { background: #07140f; }
body.money-mode::before { content: ''; position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background: radial-gradient(60% 40% at 50% 0%, rgba(245, 197, 66, .16), transparent 70%), radial-gradient(50% 40% at 100% 100%, rgba(61, 220, 132, .12), transparent 70%),
    repeating-linear-gradient(90deg, rgba(255, 255, 255, .025) 0 2px, transparent 2px 60px), #07140f; }
body.money-mode .topbar h2 { font-family: Oswald, Impact, sans-serif; text-transform: uppercase; letter-spacing: 2px; color: #f5c542; text-shadow: 0 2px 0 rgba(0, 0, 0, .5); }
body.money-mode .section-title { color: #f5c542; }
body.money-mode .btn.big:not(.ghost) { background: linear-gradient(180deg, #ffd766, #e0a91e); color: #1b1400; box-shadow: 0 4px 0 #8a6410; }
body.money-mode .up { color: #3ddc84; } body.money-mode .down { color: #ff6b6b; }
/* the intro */
.mb-intro { text-align: center; padding: 8px 4px; }
.mb-hero { font-size: 4rem; filter: drop-shadow(0 6px 12px rgba(245, 197, 66, .45)); animation: po-bob 2s ease-in-out infinite; }
.mb-intro h3 { font: 700 1.8rem Oswald, sans-serif; text-transform: uppercase; letter-spacing: 1px; color: #f5c542; margin: 4px 0 8px; }
.mb-intro .how-list { text-align: left; margin: 12px 0 16px; }
/* the net worth HUD */
.mb-hud { position: relative; margin: 8px 0 10px; padding: 12px 12px 10px; border-radius: 20px; background: linear-gradient(160deg, #13301f, #0a1a13); border: 2px solid rgba(245, 197, 66, .35);
  box-shadow: 0 10px 30px rgba(0, 0, 0, .4), inset 0 0 40px rgba(245, 197, 66, .06); overflow: hidden; }
.mb-hud.flash-up { animation: hud-up 1.2s ease-out; } .mb-hud.flash-down { animation: hud-down 1.2s ease-out; }
@keyframes hud-up { 20% { box-shadow: 0 0 0 4px #3ddc84, 0 0 40px rgba(61, 220, 132, .7); } }
@keyframes hud-down { 20% { box-shadow: 0 0 0 4px #ff5a5f, 0 0 40px rgba(255, 90, 95, .6); } }
.mbh-main { display: flex; flex-direction: column; align-items: center; }
.mbh-main small { font: 700 .7rem Inter, sans-serif; letter-spacing: 3px; color: #a9c2b4; }
.mbh-main b { font: 700 2.8rem/1.05 Oswald, sans-serif; color: #f5c542; text-shadow: 0 3px 0 rgba(0, 0, 0, .45), 0 0 24px rgba(245, 197, 66, .35); font-variant-numeric: tabular-nums; }
.mbh-ch { font: 800 .85rem Inter, sans-serif; }
.mb-svg { display: block; width: 100%; }
.mb-svg.up { color: #3ddc84; } .mb-svg.down { color: #ff6b6b; }
.mbs-line { fill: none; stroke: currentColor; stroke-width: 3; stroke-linejoin: round; stroke-linecap: round; vector-effect: non-scaling-stroke; filter: drop-shadow(0 0 4px currentColor); }
.mbs-base { stroke: rgba(245, 197, 66, .45); stroke-dasharray: 4 4; vector-effect: non-scaling-stroke; }
.mbs-dot { fill: #f5c542; stroke: #07140f; stroke-width: 2; vector-effect: non-scaling-stroke; }
.mbh-chart { height: 70px; margin: 6px 0; }
.mb-top { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.mb-top > div { display: flex; flex-direction: column; align-items: center; padding: 6px 4px; border-radius: 12px; background: rgba(0, 0, 0, .25); }
.mb-top small { font-size: .66rem; color: #a9c2b4; } .mb-top b { font: 700 1.05rem Oswald, sans-serif; }
/* Deadline Day */
.mb-deadline { margin: 8px 0; padding: 10px 12px 0; border-radius: 16px; overflow: hidden; color: #1b1400; background: #ffd400; box-shadow: 0 0 0 3px #1b1400 inset; animation: md-pulse 1.4s ease-in-out infinite; }
.mbd-top { display: flex; justify-content: space-between; align-items: center; }
.mbd-yellow { font: 700 1.5rem Oswald, sans-serif; letter-spacing: 2px; }
.mbd-clock { font: 700 1.1rem Oswald, sans-serif; background: #1b1400; color: #ffd400; padding: 2px 8px; border-radius: 8px; font-variant-numeric: tabular-nums; }
.mb-deadline > small { display: block; font-weight: 700; margin: 2px 0 8px; }
/* the squad: stock cards */
.mb-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 8px; }
.mb-card { position: relative; display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 10px 8px 8px; border-radius: 16px; overflow: hidden; text-align: center;
  background: linear-gradient(170deg, #173a2b, #0e2219); border: 2px solid rgba(255, 255, 255, .08); }
.mb-card.up { border-color: rgba(61, 220, 132, .45); } .mb-card.down { border-color: rgba(255, 90, 95, .4); }
.mb-card.empty { justify-content: center; min-height: 150px; border-style: dashed; border-color: rgba(245, 197, 66, .25); color: #a9c2b4; background: transparent; }
.mb-card.empty span { font-size: 2rem; }
.mbc-name { font: 700 1.05rem Oswald, sans-serif; text-transform: uppercase; letter-spacing: .5px; max-width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mbc-val { font: 700 1.5rem/1 Oswald, sans-serif; color: #f5c542; margin-top: 2px; }
.mbc-ch { font: 800 .72rem Inter, sans-serif; } .mbc-ch i { font-style: normal; font-weight: 600; color: #a9c2b4; margin-left: 4px; }
.mbc-spark { height: 26px; margin: 2px 0; }
.mbc-last { font-size: .7rem; color: #a9c2b4; min-height: 1.2em; }
.mbc-sell { margin-top: 4px; width: 100%; padding: 6px; border-radius: 10px; border: 0; cursor: pointer; font: 800 .78rem Inter, sans-serif; background: rgba(245, 197, 66, .15); color: #f5c542; }
.mbc-sell:active { background: rgba(245, 197, 66, .3); }
.mbc-stamp { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; background: rgba(7, 20, 15, .75);
  font: 700 2.2rem Oswald, sans-serif; letter-spacing: 3px; color: #f5c542; animation: stamp .4s cubic-bezier(.2, 1.6, .4, 1); }
.mbc-stamp small { font: 800 1rem Inter, sans-serif; letter-spacing: 0; }
.mbc-stamp.up small { color: #3ddc84; } .mbc-stamp.down small { color: #ff6b6b; }
@keyframes stamp { from { transform: scale(2.4) rotate(-12deg); opacity: 0; } }
/* the market */
body.money-mode .mk-card { background: linear-gradient(170deg, #173a2b, #0e2219); border-color: rgba(245, 197, 66, .3); color: #f3f7f1; }
body.money-mode .mk-card:disabled { opacity: .45; }
body.money-mode .mk-price { background: linear-gradient(180deg, #ffd766, #e0a91e); color: #1b1400; font-weight: 800; }
.mk-price s { opacity: .6; font-weight: 600; margin-right: 2px; }
.mb-tip { display: block; margin-top: 2px; font-weight: 800; color: #c4b5fd; }
/* the matchweek: live */
.mb-live { margin: 12px 0 8px; border-radius: 18px; overflow: hidden; background: #0a1a13; border: 2px solid rgba(255, 255, 255, .1); }
.mbl-head { display: flex; justify-content: space-between; align-items: center; padding: 8px 12px; background: #1b1f24; font: 700 .9rem Oswald, sans-serif; letter-spacing: 1px; color: #fff; }
.mbl-head b { text-transform: uppercase; } .mbl-head span:last-child { font-variant-numeric: tabular-nums; color: #f5c542; min-width: 2.5em; text-align: right; }
.mbl-head .rec { display: inline-block; width: 9px; height: 9px; border-radius: 50%; background: #ef4444; margin-right: 6px; animation: pop .6s ease-in-out infinite alternate; }
.mbl-feed { padding: 6px 10px 10px; }
.mbl-ev { display: flex; gap: 10px; align-items: center; padding: 7px 4px; border-bottom: 1px solid rgba(255, 255, 255, .06); font-weight: 600; animation: mbl-in .4s cubic-bezier(.2, 1.3, .4, 1) backwards; animation-delay: var(--d); }
.mbl-ev span { flex: none; width: 2.6em; text-align: center; font: 700 .85rem Oswald, sans-serif; color: #a9c2b4; }
.mbl-ev.goal { color: #fff; font-size: 1.05rem; background: linear-gradient(90deg, rgba(61, 220, 132, .25), transparent); border-radius: 10px; }
.mbl-ev.hat { color: #1b1400; background: linear-gradient(90deg, #ffd766, #e0a91e); border-radius: 10px; font-weight: 800; }
.mbl-ev.good { color: #b8f5cf; } .mbl-ev.bad { color: #ffb3b3; }
@keyframes mbl-in { from { transform: translateY(8px) scale(.96); opacity: 0; } }
.mb-sum { animation: mbl-in .4s ease-out backwards; animation-delay: var(--d); }
.mbw-row { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 10px; padding: 8px 10px; margin-bottom: 6px; border-radius: 14px; background: var(--card); border: 2px solid var(--line); }
.mbw-row.up { border-color: rgba(61, 220, 132, .4); } .mbw-row.down { border-color: rgba(255, 90, 95, .35); }
.mbw-row b { display: block; } .mbw-row small { font-size: .78rem; }
.mbw-money { text-align: right; font: 700 1rem Oswald, sans-serif; color: #f5c542; } .mbw-money small { display: block; font: 800 .72rem Inter, sans-serif; }
.mbw-row.up .mbw-money small { color: #3ddc84; } .mbw-row.down .mbw-money small { color: #ff6b6b; }
/* breaking news */
.mb-breaking { position: fixed; inset: 0; z-index: 130; display: flex; flex-direction: column; background: rgba(5, 10, 8, .92); color: #fff; animation: mbb-in .35s ease-out; }
.mb-breaking.out { animation: mbb-out .25s ease-in forwards; }
@keyframes mbb-in { from { opacity: 0; transform: scale(1.04); } } @keyframes mbb-out { to { opacity: 0; } }
.mbb-band { display: flex; justify-content: space-between; align-items: center; padding: calc(12px + env(safe-area-inset-top)) 14px 10px; background: #c8102e; font: 700 1rem Oswald, sans-serif; letter-spacing: 1px; text-transform: uppercase; }
.mb-breaking.gold .mbb-band { background: linear-gradient(90deg, #b8860b, #f5c542); color: #1b1400; }
.mb-breaking.purple .mbb-band { background: #6d28d9; }
.mbb-live { display: flex; align-items: center; gap: 8px; font-size: 1.2rem; }
.mbb-live i { width: 10px; height: 10px; border-radius: 50%; background: #fff; animation: pop .5s ease-in-out infinite alternate; }
.mbb-body { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; padding: 20px 22px; text-align: center; }
.mbb-icon { font-size: 4.5rem; line-height: 1; animation: mbb-icon .6s cubic-bezier(.2, 1.6, .4, 1); }
@keyframes mbb-icon { from { transform: scale(.2) rotate(-20deg); } }
.mbb-body h2 { margin: 0; font: 700 2rem/1.1 Oswald, sans-serif; text-transform: uppercase; letter-spacing: .5px; }
.mbb-body p { margin: 0; max-width: 360px; font-size: 1.05rem; color: #d8e6de; }
.mbb-body p b { color: #f5c542; }
.mbb-btns { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin-top: 8px; width: 100%; max-width: 380px; }
.mbb-btns .btn { flex: 1 1 140px; }
.mbb-ticker { overflow: hidden; white-space: nowrap; padding: 8px 0 calc(8px + env(safe-area-inset-bottom)); background: #111; border-top: 3px solid #c8102e; font: 700 .85rem Inter, sans-serif; color: #ffd400; }
.mbb-ticker span { display: inline-block; padding-left: 100%; animation: ticker 22s linear infinite; }
.mbb-ticker.small { margin: 0 -12px; padding: 6px 0; border-top-color: #1b1400; background: #1b1400; font-size: .75rem; }
@keyframes ticker { to { transform: translateX(-100%); } }
.mbn-agent { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; width: 100%; }
.mbn-agent .btn { font-size: .85rem; padding: 10px 6px; }
.mb-log ul { margin: 6px 0 0; padding-left: 18px; font-size: .85rem; line-height: 1.5; }
/* the chairman's report */
.mb-report { text-align: center; }
.mb-report .kicker { font: 700 .72rem Oswald, sans-serif; letter-spacing: 3px; color: #a9c2b4; text-transform: uppercase; }
.mbr-verdict { display: flex; flex-direction: column; align-items: center; margin: 8px 0 4px; }
.mbr-verdict span { font-size: 4rem; line-height: 1.1; animation: mbb-icon .7s cubic-bezier(.2, 1.6, .4, 1); }
.mbr-verdict b { font: 700 2rem Oswald, sans-serif; text-transform: uppercase; color: #f5c542; letter-spacing: 1px; }
.mbr-verdict small { color: #a9c2b4; }
.mb-result .result-score { font-variant-numeric: tabular-nums; }
body.money-mode .mb-result .result-score.up { color: #f5c542; }
.mbr-chart { height: 90px; margin: 8px 0 12px; }
.mb-deal { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 10px; margin: 6px 0; padding: 10px; border-radius: 14px; text-align: left; background: var(--card); border: 2px solid var(--line); }
.mb-deal.good { border-color: rgba(61, 220, 132, .5); } .mb-deal.bad { border-color: rgba(255, 90, 95, .45); }
.mb-deal small { display: block; font-size: .7rem; color: #a9c2b4; } .mb-deal b { display: block; } .mb-deal i { font-style: normal; font-size: .8rem; color: #a9c2b4; }
.mb-deal em { font: 700 1.3rem Oswald, sans-serif; font-style: normal; } .mb-deal.good em { color: #3ddc84; } .mb-deal.bad em { color: #ff6b6b; }
.mb-clips { display: grid; gap: 6px; margin: 10px 0; }
.mb-clip { padding: 8px 10px; border-radius: 4px; text-align: left; font: 600 .82rem Georgia, serif; color: #1f2937; background: #f3efe3; box-shadow: 0 2px 0 rgba(0, 0, 0, .3); transform: rotate(-.6deg); }
.mb-clip:nth-child(even) { transform: rotate(.7deg); }
.mb-fx { position: fixed; inset: 0; pointer-events: none; z-index: 140; }
.mb-fx i { position: fixed; width: 7px; height: 7px; border-radius: 2px; animation: spark 1.1s ease-out forwards; }
/* calm animations (Settings → Look: Calm) */ body.calm .mbb-ticker span, body.calm .mb-hero, body.calm .mb-deadline { animation: none; }
body.money-mode .mb-report.up, body.money-mode .mb-report.down, body.money-mode .mb-hud.up, body.money-mode .mb-hud.down { color: var(--text); }
body.money-mode .mb-hud.up .mbh-ch { color: #3ddc84; } body.money-mode .mb-hud.down .mbh-ch { color: #ff6b6b; }

/* 🎠 Home's rotating banner: matchday, the international break, new games and news (js/promo.js) */
.promo { margin: 10px 0 4px; }
.promo-track { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; border-radius: 20px; overscroll-behavior-x: contain; }
.promo-track::-webkit-scrollbar { display: none; }
.promo-slide { flex: 0 0 100%; min-width: 0; overflow: hidden; scroll-snap-align: center; display: flex; }
.promo-slide > *, .promo.one > * { flex: 1; min-width: 0; margin: 0; min-height: 100%; }
.promo-dots { display: flex; justify-content: center; gap: 6px; margin-top: 8px; }
.promo-dots button { width: 7px; height: 7px; padding: 0; border: 0; border-radius: 999px; background: var(--line); transition: width .25s, background .25s; }
.promo-dots button.on { width: 20px; background: var(--accent); }
:where(.promo-card) { --c1: #1d7a57; --c2: #0f4a38; --c3: #0a3326; }
.promo-card { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 12px; padding: 14px 16px; border-radius: 20px; color: #fff; text-decoration: none;
  background: repeating-linear-gradient(135deg, rgba(255,255,255,.05) 0 12px, transparent 12px 24px), linear-gradient(160deg, var(--c1), var(--c2)); box-shadow: inset 0 -4px 0 var(--c3); }
.pcd-icon { font-size: 2.4rem; filter: drop-shadow(0 4px 6px rgba(0,0,0,.3)); transform: rotate(-6deg); }
.pcd-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.pcd-kick { font: 800 .62rem Inter, sans-serif; letter-spacing: 1.5px; text-transform: uppercase; color: #ffe27a; }
.pcd-text b { font: 700 1.25rem/1.05 Oswald, sans-serif; text-transform: uppercase; letter-spacing: .5px; text-shadow: 0 2px 0 rgba(0,0,0,.25); }
.pcd-text small { font-size: .78rem; opacity: .9; line-height: 1.3; }
.pcd-text b, .pcd-text small { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }  /* (5.39: two lines each, so a long one can't fill the screen) */
.pcd-go { font-size: 1.8rem; opacity: .8; }
/* the tags on game tiles: NEW in pink, UPDATED in gold */
.new-tag.upd { background: #f5c542; color: #3a2600; }

/* 📋 Club Boss (js/boss.js) */
.cb-intro { text-align: center; }
.cb-intro .how-list { text-align: left; }
.cb-hero { font-size: 4rem; margin-top: 8px; animation: pop .5s; }
.cb-mgrs { display: grid; gap: 10px; margin: 10px 0; }
.cb-mgr { display: grid; grid-template-columns: auto 1fr; grid-template-rows: auto auto; column-gap: 12px; text-align: left; align-items: center; padding: 12px 14px; border-radius: 16px; border: 2px solid var(--line); background: var(--panel); color: var(--text); }
.cb-mgr > span { grid-row: 1 / 3; font-size: 2rem; }
.cb-mgr b { font: 700 1.05rem Oswald, sans-serif; text-transform: uppercase; letter-spacing: .5px; }
.cb-mgr small { color: var(--muted); font-size: .78rem; line-height: 1.3; }
.cb-mgr:active { transform: translateY(2px); }
.cb-hud { display: flex; flex-direction: column; gap: 8px; padding: 12px 14px; border-radius: 18px; color: #fff; background: linear-gradient(160deg, #34507a, #1d2f4f); box-shadow: 0 4px 0 #121f36; }
.cb-club { font-weight: 800; }
.cb-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; text-align: center; }
.cb-stats small { display: block; font-size: .62rem; text-transform: uppercase; letter-spacing: 1px; opacity: .75; }
.cb-stats b { font: 700 1.25rem Oswald, sans-serif; }
.cb-next { margin-top: 12px; padding: 12px 14px; border-radius: 18px; background: var(--panel); border: 2px solid var(--line); text-align: center; }
.cb-vs { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 8px; margin: 6px 0 8px; }
.cb-vs > div { display: flex; flex-direction: column; align-items: center; gap: 4px; }
.cb-vs b { font: 700 1.4rem Oswald, sans-serif; }
.cb-vs > span { font-weight: 800; color: var(--muted); }
.cb-odds { display: flex; height: 22px; border-radius: 999px; overflow: hidden; font: 800 .68rem Inter, sans-serif; color: #fff; margin-bottom: 6px; }
.cb-odds i { display: flex; align-items: center; justify-content: center; font-style: normal; white-space: nowrap; overflow: hidden; }
.cb-odds .w { background: #16a34a; } .cb-odds .d { background: #94a3b8; } .cb-odds .l { background: #dc2626; }
.cb-ovr { display: inline-flex; align-items: center; justify-content: center; min-width: 30px; height: 22px; padding: 0 6px; border-radius: 7px; font: 800 .8rem Oswald, sans-serif; color: #fff; background: #64748b; }
.cb-ovr.hi { background: linear-gradient(135deg, #f59e0b, #b45309); } .cb-ovr.mid { background: #16a34a; } .cb-ovr.lo { background: #64748b; } .cb-ovr.q { background: var(--line); color: var(--muted); }
.cb-mgrbar { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 10px; margin-top: 12px; padding: 10px 12px; border-radius: 16px; background: var(--panel); border: 2px solid var(--line); }
.cb-mgrbar > span:first-child { font-size: 1.8rem; }
.cb-mgrbar b { display: block; font: 700 .95rem Oswald, sans-serif; text-transform: uppercase; }
.cb-mgrbar small { color: var(--muted); font-size: .74rem; line-height: 1.25; }
.cb-pitch { display: flex; flex-direction: column; gap: 8px; padding: 12px 6px; border-radius: 18px;
  background: repeating-linear-gradient(180deg, #2f9e55 0 34px, #2a8f4c 34px 68px); box-shadow: inset 0 0 0 2px rgba(255,255,255,.35); }
.cb-line { display: flex; justify-content: center; gap: 6px; }
.cb-man { position: relative; display: flex; flex-direction: column; align-items: center; gap: 2px; width: 22%; max-width: 84px; padding: 6px 2px 5px; border: 0; border-radius: 12px; background: rgba(0,0,0,.28); color: #fff; }
.cb-man .avatar { width: 38px; height: 38px; font-size: .8rem; }
.cb-man .cb-ovr { position: absolute; top: 2px; right: 2px; min-width: 24px; height: 18px; font-size: .7rem; }
.cb-man b { font-size: .72rem; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cb-man small { font-size: .64rem; opacity: .9; }
.cb-man.pick { background: #fde047; color: #1b1400; box-shadow: 0 0 0 3px #fff; }
.cb-man.hurt { opacity: .6; }
.cb-man.new::after { content: 'NEW'; position: absolute; top: 2px; left: 2px; font: 800 .5rem Inter, sans-serif; background: #ff2bd6; color: #fff; padding: 1px 4px; border-radius: 5px; }
.cb-ovrline { text-align: center; margin: 8px 0 0; font-size: .85rem; color: var(--muted); }
.cb-ovrline b { color: var(--text); }
.cb-tabs { margin: 6px 0 8px; }
.cb-tabs button { font-size: .78rem; }
.cb-picking { margin-bottom: 8px; padding: 8px 12px; border-radius: 12px; background: #fde04733; border: 2px dashed #f5c542; font-size: .85rem; }
.cb-picking .link { background: none; border: 0; color: var(--link); text-decoration: underline; font-weight: 700; }
.cb-market { display: flex; flex-direction: column; gap: 8px; }
.cb-row { display: grid; grid-template-columns: auto 1fr auto auto; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 14px; border: 2px solid var(--line); background: var(--panel); color: var(--text); text-align: left; }
.cb-row .avatar { width: 40px; height: 40px; }
.cb-row:active { transform: translateY(2px); }
.cb-who { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.cb-who b { font-size: .92rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cb-who > span { font-size: .72rem; color: var(--muted); }
.cb-form { display: flex; gap: 3px; }
.cb-f { font: 800 .62rem Inter, sans-serif; font-style: normal; padding: 1px 5px; border-radius: 5px; color: #fff; }
.cb-f.hot { background: #16a34a; } .cb-f.ok { background: #ca8a04; } .cb-f.cold { background: #dc2626; } .cb-f.na { background: var(--line); color: var(--muted); }
.cb-price { font: 700 1rem Oswald, sans-serif; color: var(--accent2, var(--accent)); min-width: 56px; text-align: right; }
.cb-outs { display: flex; flex-direction: column; gap: 8px; margin: 10px 0; }
.cb-out { display: grid; grid-template-columns: auto 1fr auto auto; align-items: center; gap: 8px; padding: 8px 10px; border-radius: 12px; border: 2px solid var(--line); background: var(--panel); color: var(--text); text-align: left; }
.cb-out .avatar { width: 34px; height: 34px; }
.cb-out span { display: flex; flex-direction: column; } .cb-out small { color: var(--muted); font-size: .72rem; }
.cb-out em { font-style: normal; font-weight: 800; font-size: .8rem; }
.cb-out:disabled { opacity: .45; }
.cb-tablebox { margin-top: 12px; }
.cb-table { display: flex; flex-direction: column; gap: 2px; font-size: .82rem; margin: 6px 0; text-align: left; }
.cb-hint { margin: -4px 0 8px; font-size: .8rem; color: var(--muted); }
.cb-tr { display: grid; grid-template-columns: 22px 1fr 26px 34px 34px; gap: 6px; align-items: center; padding: 6px 8px; border-radius: 8px; background: var(--panel); }
.cb-tr span:nth-child(2) { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cb-tr span:nth-child(n+3), .cb-tr b { text-align: right; }
.cb-tr.head { background: none; font-size: .68rem; color: var(--muted); text-transform: uppercase; letter-spacing: 1px; }
.cb-tr.you { background: #fde047; color: #1b1400; font-weight: 800; }
.cb-tr.cb-top:not(.you) { box-shadow: inset 3px 0 0 #f59e0b; } .cb-tr.cb-drop:not(.you) { box-shadow: inset 3px 0 0 #dc2626; }
.cb-score { margin-top: 6px; padding: 14px; border-radius: 18px; text-align: center; color: #fff; background: linear-gradient(160deg, #34507a, #1d2f4f); box-shadow: 0 4px 0 #121f36; }
.cb-score.W { background: linear-gradient(160deg, #22a06b, #11694a); box-shadow: 0 4px 0 #0b4a33; }
.cb-score.L { background: linear-gradient(160deg, #b91c1c, #7f1d1d); box-shadow: 0 4px 0 #5a1414; }
.cb-score .kicker { color: #ffe27a; }
.cb-sl { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 10px; margin: 6px 0; }
.cb-sl b { font: 700 1.3rem Oswald, sans-serif; }
.cb-sl span { font: 700 2.6rem Oswald, sans-serif; animation: pop .5s; }
.cb-goals { display: flex; flex-direction: column; gap: 3px; font-size: .85rem; margin-bottom: 6px; }
.cb-goals span { animation: mbl-in .35s both; animation-delay: var(--d); }
.cb-res { font: 700 1.1rem Oswald, sans-serif; letter-spacing: 1px; }
.cb-motm { margin-top: 10px; text-align: center; font-size: .9rem; }
.cb-rates { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.cb-rate { display: flex; align-items: center; gap: 6px; padding: 6px 8px; border-radius: 10px; background: var(--panel); font-size: .78rem; }
.cb-rate span { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cb-rate small { font-size: .66rem; font-weight: 700; } .cb-rate small.up { color: #16a34a; } .cb-rate small.down { color: #dc2626; }
.cb-else { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; font-size: .78rem; color: var(--muted); text-align: center; }
.cb-else span { padding: 5px; border-radius: 8px; background: var(--panel); }
.cb-final { text-align: center; }
.cb-verdict { display: flex; flex-direction: column; align-items: center; gap: 2px; margin: 8px 0; }
.cb-verdict span { font-size: 3.4rem; animation: pop .6s; }
.cb-verdict b { font: 700 1.8rem Oswald, sans-serif; text-transform: uppercase; letter-spacing: 1px; }
.cb-verdict small { color: var(--muted); }

/* 🕴️ Dodgy Owner (js/owner.js); shares the Club Boss bits (.cb-*) for the pitch, tables, OVR badges and scores */
.ow-intro { text-align: center; }
.ow-intro .how-list { text-align: left; }
.ow-hero { font-size: 4.2rem; margin-top: 6px; animation: pop .5s; }
.ow-hud { display: flex; flex-direction: column; gap: 8px; padding: 12px 14px; border-radius: 18px; color: #fff; background: linear-gradient(160deg, #2b2f45, #14172a); box-shadow: 0 4px 0 #0b0d18; }
.ow-hud-top { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.ow-week { font: 700 .78rem Inter, sans-serif; opacity: .85; }
.ow-hud .neg, .ow-cash .neg, .ow-ledger .neg { color: #ff6b6b; }
.ow-ledger .pos { color: #16a34a; }
.ow-meters { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; font-size: .72rem; font-weight: 700; }
.ow-meters span { display: flex; align-items: center; gap: 6px; white-space: nowrap; }
.ow-bar { flex: 1; display: block; height: 8px; min-width: 40px; border-radius: 999px; background: rgba(127,127,127,.3); overflow: hidden; }
.ow-bar i { display: block; height: 100%; border-radius: 999px; background: #16a34a; }
.ow-bar.mid i { background: #eab308; } .ow-bar.low i { background: #dc2626; }
.ow-tabs { margin: 10px 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px; }
.ow-tabs::-webkit-scrollbar { display: none; }
.ow-tabs button { white-space: nowrap; font-size: .76rem; padding-left: 10px; padding-right: 10px; position: relative; }
.ow-tabs .new-dot { position: absolute; top: 4px; right: 4px; }
.ow-body { padding-bottom: 120px; }
.ow-go { position: fixed; left: 0; right: 0; bottom: 0; z-index: 30; display: flex; flex-direction: column; gap: 6px; padding: 10px 16px calc(10px + env(safe-area-inset-bottom)); background: var(--nav); backdrop-filter: blur(8px); border-top: 1px solid var(--line); }
.ow-go .btn { width: 100%; max-width: 560px; margin: 0 auto; }
.ow-go .btn.ghost { padding: 6px; font-size: .85rem; }
.ow-next { margin-bottom: 10px; padding: 12px 14px; border-radius: 18px; background: var(--panel); border: 2px solid var(--line); text-align: center; }
.ow-mail { margin-bottom: 10px; padding: 12px 14px; border-radius: 16px; background: var(--panel); border: 2px solid var(--line); }
.ow-mail.need { border-color: #f5c542; box-shadow: 0 0 0 3px #f5c54233; }
.ow-mail p { margin: 4px 0 8px; font-size: .86rem; color: var(--muted); }
.ow-choices { display: flex; flex-wrap: wrap; gap: 6px; }
.ow-choices .btn { flex: 1 1 140px; display: flex; flex-direction: column; align-items: center; line-height: 1.2; }
.ow-choices .btn small { font-size: .66rem; font-weight: 600; opacity: .8; }
.ow-form { display: flex; gap: 6px; }
.ow-form.wrap { flex-wrap: wrap; }
.ow-res { display: flex; flex-direction: column; align-items: center; min-width: 44px; padding: 5px 6px; border-radius: 10px; color: #fff; font: 800 .9rem Oswald, sans-serif; }
.ow-res small { font: 600 .6rem Inter, sans-serif; opacity: .9; white-space: nowrap; }
.ow-res.W { background: #16a34a; } .ow-res.D { background: #64748b; } .ow-res.L { background: #dc2626; }
.ow-news { margin: 0; padding-left: 18px; font-size: .84rem; line-height: 1.45; }
.ow-squad { display: flex; flex-direction: column; gap: 6px; }
.ow-pl { display: grid; grid-template-columns: auto 1fr auto auto; align-items: center; gap: 8px; padding: 7px 10px; border-radius: 12px; border: 2px solid var(--line); background: var(--panel); color: var(--text); text-align: left; }
.ow-pl.xi { border-color: #16a34a88; }
.ow-pl .avatar { width: 36px; height: 36px; }
.ow-pl-who { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.ow-pl-who b { font-size: .88rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ow-pl-who > span { font-size: .72rem; color: var(--muted); display: flex; align-items: center; gap: 4px; flex-wrap: wrap; }
.ow-wage { font: 700 .8rem Oswald, sans-serif; color: var(--muted); min-width: 40px; text-align: right; }
.ow-sheet { text-align: center; }
.ow-sheet .avatar.lg { margin: 0 auto 6px; }
.ow-sheet h3 { margin: 4px 0; }
.ow-facts { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin: 10px 0; text-align: left; }
.ow-facts > div { padding: 8px 10px; border-radius: 12px; background: var(--panel); border: 1px solid var(--line); display: flex; flex-direction: column; gap: 3px; }
.ow-facts small { font-size: .66rem; text-transform: uppercase; letter-spacing: 1px; color: var(--muted); }
.ow-facts b { font-size: .9rem; }
.ow-coach { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 10px; padding: 12px; border-radius: 16px; background: var(--panel); border: 2px solid var(--line); margin-bottom: 10px; }
.ow-coach > span:first-child { font-size: 2.2rem; }
.ow-coach b { display: block; font: 700 1rem Oswald, sans-serif; text-transform: uppercase; }
.ow-coach small { display: block; color: var(--muted); font-size: .74rem; line-height: 1.25; }
.ow-rel { display: flex; align-items: center; gap: 6px; margin-top: 4px; font-size: .7rem; font-weight: 700; }
.ow-meddle, .ow-forms, .ow-ment { margin: 8px 0; }
.ow-forms { flex-wrap: wrap; }
.ow-forms button { font-size: .76rem; }
.cb-man:disabled { opacity: 1; }
.cb-ovrline .link { background: none; border: 0; padding: 0; color: var(--link); text-decoration: underline; font-weight: 700; }
.ow-benchlist { display: flex; flex-wrap: wrap; gap: 6px; }
.ow-chip { display: inline-block; padding: 5px 9px; border-radius: 999px; background: var(--panel); border: 1px solid var(--line); font-size: .74rem; color: var(--text); }
.ow-chip.out { opacity: .5; } .ow-chip.on { border-color: #16a34a; } .ow-chip.pick { background: #fde047; color: #1b1400; }
.ow-window { margin-bottom: 8px; padding: 10px 12px; border-radius: 14px; font-weight: 700; font-size: .85rem; text-align: center; }
.ow-window.open { background: #16a34a22; border: 2px solid #16a34a; }
.ow-window.dl { background: #f5c54233; border: 2px solid #f5c542; animation: ow-pulse 1.2s infinite; }
.ow-window.shut { background: var(--panel); border: 2px solid var(--line); color: var(--muted); }
.ow-mtabs { margin-bottom: 8px; overflow-x: auto; flex-wrap: nowrap; }
.ow-mtabs button { white-space: nowrap; font-size: .74rem; }
.ow-filters { display: flex; flex-direction: column; gap: 6px; margin-bottom: 8px; }
.ow-filters .seg button { font-size: .72rem; }
.ow-offer { display: grid; grid-template-columns: auto 1fr; gap: 8px 10px; align-items: center; padding: 10px; border-radius: 14px; background: var(--panel); border: 2px solid var(--line); margin-bottom: 8px; }
.ow-offer .avatar { width: 38px; height: 38px; }
.ow-offer > span:nth-child(2) { display: flex; flex-direction: column; } .ow-offer small { color: var(--muted); font-size: .76rem; }
.ow-offer .ow-choices { grid-column: 1 / -1; }
.ow-stepper { display: flex; align-items: center; justify-content: center; gap: 14px; margin: 12px 0; }
.ow-stepper button { width: 48px; height: 48px; border-radius: 50%; border: 2px solid var(--line); background: var(--panel); color: var(--text); font-size: 1.5rem; font-weight: 800; }
.ow-stepper b { min-width: 110px; text-align: center; font: 700 1.8rem Oswald, sans-serif; }
.ow-cash { text-align: center; padding: 12px; border-radius: 18px; background: var(--panel); border: 2px solid var(--line); }
.ow-cash small { display: block; font-size: .7rem; text-transform: uppercase; letter-spacing: 1px; color: var(--muted); }
.ow-cash b { font: 700 2.2rem Oswald, sans-serif; }
.ow-chart { width: 100%; height: 70px; margin-top: 6px; }
.ow-chart path { fill: none; stroke: #f5c542; stroke-width: 2.5; vector-effect: non-scaling-stroke; }
.ow-ledger { display: flex; flex-direction: column; gap: 4px; font-size: .86rem; }
.ow-ledger > div { display: flex; justify-content: space-between; padding: 6px 10px; border-radius: 8px; background: var(--panel); }
.ow-table .cb-tr { grid-template-columns: 22px 1fr 26px 34px 38px; }
.ow-cup { display: grid; grid-template-columns: repeat(5, 1fr); gap: 4px; }
.ow-cup > div { display: flex; flex-direction: column; gap: 2px; padding: 6px 4px; border-radius: 10px; background: var(--panel); text-align: center; font-size: .7rem; }
.ow-cup small { font-size: .56rem; color: var(--muted); }
.ow-cup .win { background: #16a34a33; } .ow-cup .lose { background: #dc262633; } .ow-cup .next { border: 2px dashed #f5c542; }
.ow-live { display: flex; flex-direction: column; gap: 10px; }
.ow-board { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 10px; padding: 14px; border-radius: 18px; color: #fff; text-align: center; background: linear-gradient(160deg, #14532d, #052e16); box-shadow: 0 4px 0 #031d0e; }
.ow-board b { font: 700 1.4rem Oswald, sans-serif; }
.ow-board span { font: 700 2.8rem Oswald, sans-serif; }
.ow-clock { display: flex; align-items: center; justify-content: center; gap: 6px; font: 700 1rem Oswald, sans-serif; }
.ow-clock .rec { width: 9px; height: 9px; border-radius: 50%; background: #dc2626; animation: ow-pulse 1s infinite; }
.ow-poss { position: relative; height: 22px; border-radius: 999px; background: #dc262655; overflow: hidden; }
.ow-poss i { display: block; height: 100%; background: #16a34a; transition: width .3s; }
.ow-poss span { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-size: .7rem; font-weight: 800; color: #fff; text-shadow: 0 1px 2px #0008; }
.ow-feed { display: flex; flex-direction: column; gap: 4px; min-height: 220px; }
.ow-ev { display: flex; gap: 8px; padding: 6px 10px; border-radius: 10px; background: var(--panel); font-size: .84rem; }
.ow-ev.fresh { animation: mbl-in .3s both; }  /* only new lines slide in, once */
.ow-ev span { font-weight: 800; color: var(--muted); min-width: 28px; }
.ow-ev.goal { background: #16a34a; color: #fff; font-weight: 800; } .ow-ev.goal span { color: #fff; }
.ow-ev.conc { background: #dc2626; color: #fff; } .ow-ev.conc span { color: #fff; }
.ow-ev.red { background: #7f1d1d; color: #fff; } .ow-ev.ht, .ow-ev.talk { background: #f5c54244; }
.ow-pitchmini { display: flex; flex-wrap: wrap; gap: 4px; font-size: .68rem; }
.ow-pitchmini span { padding: 3px 7px; border-radius: 999px; background: var(--panel); }
.ow-pitchmini .mid { background: #eab30844; } .ow-pitchmini .low { background: #dc262644; } .ow-pitchmini .gone { opacity: .4; }
.ow-ctl { gap: 6px; } .ow-ctl .btn { flex: 1; padding: 8px 4px; font-size: .8rem; }
.ow-talks { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; margin-bottom: 8px; }
.ow-talks .btn.on { background: #fde047; color: #1b1400; }
.ow-subs { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin: 8px 0; }
.ow-subs > div { display: flex; flex-wrap: wrap; gap: 4px; align-content: flex-start; }
@keyframes ow-pulse { 50% { opacity: .55; } }

/* 🕴️ the dodgy owner games (Dodgy Owner, Reign Check): ink-dark, flat, paper cards, old gold, a serif face */
body.owner-mode {
  --bg: #1a1622; --bg2: #231d2e; --panel: #2a2335; --panel2: #332a40; --card: #2a2335; --text: #efe4cc; --muted: #b9a98d;
  --accent: #d4a24c; --accent2: #d4a24c; --hi: #d4a24c; --hi2: #6fae8f; --link: #e0b860; --line: rgba(212, 162, 76, .25); --edge: rgba(0, 0, 0, .5);
  --inset: rgba(0, 0, 0, .3); --modal: #231d2e; --nav: rgba(26, 22, 34, .96); --btn-edge: #8a6420; --good: #6fae8f; --bad: #d0614f;
  --toast-bg: #d4a24c; --toast-text: #1a1622;
  color-scheme: dark; color: var(--text); background: transparent; font-family: Alegreya, Georgia, serif;
}
body.owner-mode .topbar h2, body.owner-mode .section-title, body.owner-mode h3 { font-family: Alegreya, Georgia, serif; font-weight: 800; letter-spacing: .5px; }
body.owner-mode .topbar h2 { color: #d4a24c; }
body.owner-mode .btn { font-family: Alegreya, Georgia, serif; font-weight: 800; color: #1a1622; }
body.owner-mode .btn.ghost { color: var(--text); }
body.owner-mode .btn.big:not(.ghost) { background: #d4a24c; box-shadow: 0 4px 0 #8a6420; }
body.owner-mode .seg button.on { background: #d4a24c; color: #1a1622; }
/* paper cards */
body.owner-mode .ow-mail, body.owner-mode .ow-next, body.owner-mode .cb-mgr, body.owner-mode .ow-coach, body.owner-mode .ow-ambition, body.owner-mode .ow-legacy, body.owner-mode .rg-endcard {
  background: #efe4cc; color: #2a2118; border: 0; box-shadow: 0 4px 0 #b9a27a, 0 10px 24px rgba(0, 0, 0, .35); }
body.owner-mode .ow-mail p, body.owner-mode .cb-mgr small, body.owner-mode .ow-coach small, body.owner-mode .ow-next .muted, body.owner-mode .ow-ambition small { color: #6b5a45; }
body.owner-mode .ow-mail.need { box-shadow: 0 0 0 3px #d4a24c, 0 4px 0 #b9a27a; }
body.owner-mode .ow-mail .btn.ghost, body.owner-mode .ow-next .btn.ghost { color: #2a2118; border-color: #b9a27a; }
body.owner-mode .ow-hud { background: #2a2335; border: 2px solid #d4a24c55; box-shadow: none; }
body.owner-mode .cb-pitch { background: repeating-linear-gradient(180deg, #3f6b4a 0 34px, #3a6344 34px 68px); }
body.owner-mode .cb-score, body.owner-mode .ow-board { background: #2a2335; border: 2px solid #d4a24c55; box-shadow: none; }
body.owner-mode .cb-score.W { background: #2f5e46; } body.owner-mode .cb-score.L { background: #6b2e2e; }
body.owner-mode .cb-tr.you { background: #d4a24c; color: #1a1622; }
body.owner-mode .ow-go { background: rgba(26, 22, 34, .96); }
.ow-steps { display: flex; justify-content: center; gap: 6px; flex-wrap: wrap; margin: 6px 0 10px; font-size: .78rem; }
.ow-steps span { padding: 3px 10px; border-radius: 999px; border: 1px solid var(--line); color: var(--muted); }
.ow-steps .on { background: #d4a24c; color: #1a1622; border-color: #d4a24c; font-weight: 800; } .ow-steps .done { color: var(--text); }
.ow-amb { display: block; margin-top: 4px; color: #8a5a10; }
.ow-style { margin-top: 8px; padding: 7px 10px; border-radius: 10px; background: #00000014; font-size: .8rem; text-align: left; line-height: 1.3; }
.ow-style small { display: block; margin-top: 2px; opacity: .75; }
.ow-ambition { display: grid; grid-template-columns: auto 1fr; gap: 10px; align-items: center; padding: 10px 12px; border-radius: 14px; margin-bottom: 10px; background: var(--panel); border: 2px solid var(--line); }
.ow-ambition > span:first-child { font-size: 2rem; }
.ow-ambition small { display: block; font-size: .72rem; color: var(--muted); } .ow-ambition b { display: block; }
.ow-ambition.on { box-shadow: 0 0 0 3px #6fae8f, 0 4px 0 #b9a27a; }
.ow-skim { display: grid; grid-template-columns: auto 1fr auto; gap: 10px; align-items: center; margin: 10px 0; padding: 10px 12px; border-radius: 14px; background: var(--panel); border: 2px dashed #d4a24c; }
.ow-skim > span:first-child { font-size: 1.8rem; } .ow-skim small { display: block; color: var(--muted); font-size: .74rem; }
.ow-legacy { margin: 10px 0; padding: 12px; border-radius: 14px; text-align: left; display: flex; flex-direction: column; gap: 4px; }
.ow-legacy > div { display: flex; justify-content: space-between; gap: 10px; font-size: .9rem; }
.ow-legacy .pos { color: #2f6e4a; } .ow-legacy .neg { color: #a33a2e; }
.ow-legacy .tot { border-top: 2px solid #2a211833; margin-top: 4px; padding-top: 6px; font-size: 1.1rem; font-weight: 800; }

/* 👑 Reign Check (js/reign.js) */
.rg { max-width: 440px; margin: 0 auto; display: flex; flex-direction: column; align-items: center; gap: 10px; }
.rg-meters { display: flex; justify-content: center; gap: 14px; margin-top: 4px; }
.rg-meter { display: flex; flex-direction: column; align-items: center; gap: 6px; }
.rg-icon { display: flex; align-items: center; justify-content: center; width: 54px; height: 54px; border-radius: 14px; font-size: 1.7rem; background: linear-gradient(to top, #d4a24c var(--v), #3a3146 var(--v)); transition: background .4s; }
.rg-meter.danger .rg-icon { box-shadow: 0 0 0 3px #d0614f; animation: ow-pulse 1s infinite; }
.rg-dot { width: 0; height: 0; border-radius: 50%; background: #efe4cc; transition: width .15s, height .15s; }
.rg-dot.small { width: 7px; height: 7px; } .rg-dot.big { width: 13px; height: 13px; }
.rg-text { min-height: 4.6em; margin: 4px 8px; text-align: center; font: 500 1.12rem/1.4 Alegreya, Georgia, serif; }
.rg-stage { width: 100%; display: flex; justify-content: center; padding: 6px 0; }
.rg-card { position: relative; width: min(72vw, 290px); aspect-ratio: 1 / 1.08; border-radius: 18px; background: var(--bg); border: 7px solid #efe4cc; box-shadow: 0 10px 0 #b9a27a, 0 18px 40px rgba(0, 0, 0, .45); display: flex; align-items: center; justify-content: center; touch-action: none; user-select: none; cursor: grab; overflow: hidden; }
.rg-card.in { animation: rg-in .35s ease-out; }
@keyframes rg-in { from { transform: translateY(40px) scale(.92); opacity: 0; } }
.rg-face { font-size: 7rem; filter: drop-shadow(0 6px 0 rgba(0, 0, 0, .25)); pointer-events: none; }
.rg-label { position: absolute; top: 0; left: 0; right: 0; padding: 12px 14px; background: rgba(26, 22, 34, .82); color: #efe4cc; font: 800 1.05rem Alegreya, Georgia, serif; opacity: 0; transition: opacity .12s; pointer-events: none; }
.rg-label.l { text-align: right; } .rg-label.r { text-align: left; }
.rg-card.show-l .rg-label.l, .rg-card.show-r .rg-label.r { opacity: 1; }
.rg-who { text-align: center; margin: 4px 0 0; } .rg-who b { display: block; font: 800 1.15rem Alegreya, Georgia, serif; } .rg-who small { color: var(--muted); }
.rg-btns { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; width: 100%; }
.rg-btn { padding: 9px 8px; border-radius: 12px; border: 1px solid var(--line); background: transparent; color: var(--text); font: 700 .86rem Alegreya, Georgia, serif; }
.rg-foot { display: flex; justify-content: space-between; width: 100%; font-size: .78rem; color: var(--muted); gap: 6px; }
.rg-coach { font-size: .8rem; color: var(--muted); }
.rg-endcard { width: min(84vw, 340px); padding: 18px; border-radius: 18px; text-align: center; display: flex; flex-direction: column; align-items: center; gap: 6px; }
.rg-endcard .rg-face { font-size: 5rem; }
.rg-endcard b { font: 800 1.6rem Alegreya, Georgia, serif; } .rg-endcard p { margin: 0; color: #4a3b2a; }
.rg-endings { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; font-size: 1.6rem; }
.rg-endings span { width: 42px; height: 42px; display: flex; align-items: center; justify-content: center; border-radius: 10px; background: var(--panel); opacity: .45; }
.rg-endings .got { opacity: 1; background: #d4a24c33; }
.rg-obj { margin: 0; padding-left: 20px; align-self: stretch; }
.rg-intro .how-list { align-self: stretch; }

/* 🤫 secret games */
.secret-tiles .tile.locked { --c1: #3a3a46; --c2: #24242e; --c3: #15151c; color: #a8a8b8; cursor: default; }
.secret-tiles .tile.locked .tile-icon { filter: grayscale(1); }
.secret-lock, .secret-unlock { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 30px 10px; text-align: center; }
.secret-unlock { padding: 6px 0; } .secret-unlock .tile { width: 100%; text-align: left; }
.sl-icon { font-size: 4rem; animation: pop .5s; }
.sl-hint { padding: 10px 14px; border-radius: 12px; background: var(--panel); border: 2px dashed var(--line); font-weight: 700; }
html:has(body.owner-mode), body.owner-mode { background: #1a1622; }
body.owner-mode { min-height: 100vh; }
body.owner-mode .cb-mgr b { font-family: Alegreya, Georgia, serif; text-transform: none; font-size: 1.15rem; letter-spacing: 0; }
body.owner-mode .ow-amb { font-size: .95rem; }
body.owner-mode .section-title::before { background: #d4a24c; }

/* ⚔️ Goal Royale (js/royale.js) */
.gr-hub { display: flex; flex-direction: column; gap: 10px; }
.gr-arena { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 16px; border-radius: 20px; color: #fff; text-align: center; background: linear-gradient(160deg, #7c2d12, #431407); box-shadow: 0 5px 0 #2a0c04; }
.gr-arena span { font-size: 3rem; } .gr-arena b { font: 700 1.5rem Oswald, sans-serif; text-transform: uppercase; letter-spacing: 1px; } .gr-arena small { opacity: .85; }
.gr-battle { font-size: 1.3rem; }
.gr-deck { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; }
.gr-deck.all { max-height: 46vh; overflow-y: auto; }
.gr-card { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; min-height: 74px; padding: 18px 4px 6px; border-radius: 12px; background: var(--panel); border: 3px solid #b07a43; text-align: center; cursor: pointer; user-select: none; }
.gr-card.t-s { border-color: #c0c6cc; } .gr-card.t-g { border-color: #f5c542; background: #f5c54218; } .gr-card.t-l { border-color: #a855f7; background: #a855f722; box-shadow: 0 0 12px #a855f766; }
.gr-card b { font-size: .76rem; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.gr-card small { font-size: .58rem; color: var(--muted); line-height: 1.15; }
.gr-cost { position: absolute; top: -8px; left: -6px; width: 24px; height: 24px; border-radius: 50%; background: #7c3aed; color: #fff; font: 800 .8rem Oswald, sans-serif; display: flex; align-items: center; justify-content: center; box-shadow: 0 2px 0 #4c1d95; }
.gr-card.sel { transform: translateY(-8px); box-shadow: 0 0 0 3px #fde047; } .gr-card.dim { opacity: .45; }
.gr-match { display: flex; flex-direction: column; gap: 6px; user-select: none; }
.gr-score { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 8px; font: 700 1.6rem Oswald, sans-serif; text-align: center; }
.gr-score .you { color: #3b82f6; } .gr-score .them { color: #ef4444; } .gr-score #grclock { font-size: .9rem; color: var(--muted); }
.gr-pitch { position: relative; width: 100%; aspect-ratio: 0.62; max-height: 58vh; margin: 0 auto; border-radius: 16px; overflow: hidden; touch-action: none;
  background: repeating-linear-gradient(180deg, #2f9e55 0 8%, #2a8f4c 8% 16%); box-shadow: inset 0 0 0 3px rgba(255,255,255,.4); }
.gr-goal { position: absolute; left: 34%; right: 34%; height: 4%; border: 3px solid #fff; }
.gr-goal.top { top: 0; border-top: 0; background: #ef444455; } .gr-goal.bottom { bottom: 0; border-bottom: 0; background: #3b82f655; }
.gr-half { position: absolute; left: 0; right: 0; top: 50%; border-top: 2px solid rgba(255,255,255,.5); }
.gr-zone { position: absolute; left: 0; right: 0; bottom: 0; height: 48%; background: rgba(59,130,246,.08); pointer-events: none; }
.gr-u { position: absolute; width: 34px; height: 34px; margin: 0 0 -17px -17px; border-radius: 50%; display: flex; align-items: center; justify-content: center; color: #fff; font: 800 .58rem Inter, sans-serif; border: 3px solid #b07a43; pointer-events: none; }
.gr-u.s0 { background: #2563eb; } .gr-u.s1 { background: #dc2626; }
.gr-u.t-s { border-color: #e2e8f0; } .gr-u.t-g { border-color: #fde047; } .gr-u.t-l { border-color: #c084fc; box-shadow: 0 0 10px #c084fc; }
.gr-u.stun { filter: grayscale(.8); }
.gr-u i { position: absolute; left: 2px; bottom: -7px; height: 4px; border-radius: 2px; background: #22c55e; }
.gr-flash { position: absolute; left: 50%; top: 45%; transform: translate(-50%, -50%); padding: 8px 16px; border-radius: 12px; font: 800 1.3rem Oswald, sans-serif; color: #fff; background: rgba(0,0,0,.6); animation: pop .4s; pointer-events: none; white-space: nowrap; }
.gr-flash.you { background: #2563eb; } .gr-flash.them { background: #dc2626; } .gr-flash.save { font-size: .9rem; top: 30%; }
.gr-st { position: relative; height: 18px; border-radius: 999px; background: #4c1d9544; overflow: hidden; }
.gr-st i { display: block; height: 100%; background: linear-gradient(90deg, #a855f7, #ec4899); transition: width .2s; }
.gr-st span { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font: 800 .75rem Inter, sans-serif; color: #fff; }
.gr-hand { display: grid; grid-template-columns: repeat(4, 1fr) 0.7fr; gap: 6px; align-items: end; }
.gr-next { display: flex; flex-direction: column; align-items: center; font-size: .66rem; color: var(--muted); text-align: center; }
.gr-result { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 20px; border-radius: 20px; color: #fff; background: #334155; }
.gr-result.win { background: linear-gradient(160deg, #2563eb, #1e3a8a); } .gr-result.loss { background: linear-gradient(160deg, #dc2626, #7f1d1d); }
.gr-result b { font: 700 2rem Oswald, sans-serif; } .gr-result span { font: 700 2.6rem Oswald, sans-serif; }
.secret-tiles .tile:last-child:nth-child(odd) { grid-column: 1 / -1; min-height: 112px; }

/* Dodgy Owner fixes: readable choices on paper cards, the chosen team talk, values against what you paid, development */
body.owner-mode .ow-mail .btn.ghost, body.owner-mode .ow-next .btn.ghost { background: #e3d5b5; color: #2a2118; border: 1px solid #b9a27a; filter: none; }
body.owner-mode .ow-mail .btn.ghost small { color: #4a3b2a; }
.ow-talks .btn:disabled { filter: none; opacity: .45; }
.ow-talks .btn.on, .ow-talks .btn.on:disabled { opacity: 1; background: #d4a24c; color: #1a1622; box-shadow: 0 0 0 3px #fde04788; }
.ow-ovrcol { display: flex; flex-direction: column; align-items: center; gap: 2px; }
.ow-dev { font: 800 .62rem Inter, sans-serif; } .ow-dev.up { color: #22c55e; } .ow-dev.down { color: #ef4444; }
.ow-val { display: flex; flex-direction: column; align-items: flex-end; min-width: 58px; line-height: 1.15; }
.ow-val b { font: 700 .9rem Oswald, sans-serif; } .ow-val small { font-size: .62rem; color: var(--muted); }
.ow-val small.up, .ow-facts small.up, .ow-offer small.up { color: #22c55e; font-weight: 800; } .ow-val small.down, .ow-facts small.down, .ow-offer small.down { color: #ef4444; font-weight: 800; }
.ow-vh { margin: 6px 0; text-align: left; } .ow-vh small { color: var(--muted); font-size: .7rem; }
.ow-spark { width: 100%; height: 46px; } .ow-spark path { fill: none; stroke-width: 2.5; vector-effect: non-scaling-stroke; }
.ow-spark.up path { stroke: #22c55e; } .ow-spark.down path { stroke: #ef4444; }
.ow-subs small.muted { display: block; width: 100%; font-size: .66rem; margin-bottom: 2px; }
.ow-chip .pos, .ow-pitchmini .pos { font-size: .55rem; padding: 0 4px; }

/* 🧹 Tidy-up (5.12): readable cards, nothing covering anything */
/* cards: the shine sits under the words; bigger, darker names that wrap to two lines instead of being cut off */
.pc-sheen { z-index: 0; }
.pc-front > :not(.pc-sheen):not(.pc-done) { position: relative; z-index: 1; }
.pc-name { font-size: 1.5em; line-height: 1.15; letter-spacing: 0; padding: .18em .1em; }  /* one line; longer names get smaller, not cut off */
.pc-name.long { font-size: 1.25em; } .pc-name.xlong { font-size: 1.02em; } .pc-name.xxlong { font-size: .78em; letter-spacing: -.02em; }
.tier-b .pc-name, .tier-b .pc-front { color: #24140a; }
.tier-g .pc-front { color: #241800; }
.tier-g .pc-name, .tier-s .pc-name { text-shadow: 0 1px 0 rgba(255, 255, 255, .55); }
.tier-l .pc-name { text-shadow: 0 1px 2px rgba(0, 0, 0, .5); }
.pc-top small, .pc-stats { font-size: .72em; opacity: 1; }
.pc-stats b { font-size: 1.55em; }
.pc-club { font-size: .75em; }
/* "complete" is a pill along the bottom edge, not a sash across his face */
/* finished: a green tick badge in the corner (the pips show it too), not a sash across his face */
.pc-done { top: .45em; right: .45em; bottom: auto; left: auto; transform: none; width: 1.9em; height: 1.9em; padding: 0; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 1em; color: transparent; overflow: hidden; z-index: 2; box-shadow: 0 0 0 .15em #fff, 0 .15em .4em rgba(0, 0, 0, .35); }
.pc-done::before { content: '✓'; color: #fff; font: 900 1.15em Inter, sans-serif; position: absolute; }
/* the international break bunting no longer sits on top of the logo or page titles */
html.intl-break #app { padding-top: 22px; }
/* game tiles on small phones: titles fit beside the icon */
@media (max-width: 380px) {
  .tile-icon { font-size: 2.2rem; }
  .tiles .tile:not(.wide) b { font-size: 1.12rem; max-width: 100%; }
  .tiles .tile:not(.wide) { padding-top: 46px; }
  .stat-pick .stat-btn { font-size: .76rem; padding-left: 3px; padding-right: 3px; flex-basis: 60px; }
}
.stat-btn { min-width: 0; overflow-wrap: anywhere; }
/* the draft title wraps onto a second line on narrow phones instead of being cut off */
.page-draft .t-name { white-space: normal; text-overflow: clip; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; line-height: 1.38; text-align: center; }
.page-draft .inv .muted { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
/* wide tiles keep their first lines clear of the corner icon */
.tile.wide > b, .tile.wide > small:first-of-type { padding-right: 52px; }
/* Goal Royale: deck names fit the small cards on phones */
.gr-card { padding-left: 2px; padding-right: 2px; }
.gr-card b { font-size: clamp(.64rem, 3vw, .76rem); letter-spacing: -.01em; }
.gr-card b.long { font-size: clamp(.56rem, 2.5vw, .68rem); }

/* cards under big system text (the Play app's WebView scales px text): the photo and the corner column give way so the
   name and stats always sit in the card, never pushed down and clipped */
.pc-front { grid-template-rows: minmax(0, 1fr) auto auto auto; }
.pc-top, .pc-photo { min-height: 0; overflow: hidden; }
.pc-photo .avatar { height: min(5.2em, 100%) !important; width: auto !important; aspect-ratio: 1; }
.pc-photo .avatar > b { font-size: min(1.7em, 30cqh); }
.pc-top .pc-flag { font-size: min(1.3em, 18cqh); }
.pc-photo, .pc-top { container-type: size; }


/* the player sheet */
[data-psheet] { cursor: pointer; }
.ps h3 { margin: 0; } .ps h4 { margin: 14px 0 6px; font: 700 .95rem Oswald, sans-serif; letter-spacing: .5px; text-transform: uppercase; color: var(--muted); }
.ps-head { display: flex; gap: 12px; align-items: center; margin-bottom: 10px; }
.ps-head .avatar { flex: none; width: 76px !important; height: 76px !important; font-size: 1.4rem; }
.ps-sub { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 3px; font-size: .82rem; color: var(--muted); }
.ps-cardrow { display: flex; gap: 12px; align-items: center; margin: 8px 0; }
.ps-card { flex: none; width: 112px; font-size: 10px; }
.ps-card .pcard { width: 100%; font-size: 10px; }
.ps-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; margin: 10px 0; }
.ps-stats span { display: flex; flex-direction: column; align-items: center; padding: 8px 2px; border-radius: 12px; background: var(--inset); font-size: .62rem; color: var(--muted); text-align: center; }
.ps-stats b { font: 700 1.25rem Oswald, sans-serif; color: var(--text); }
.ps-hon { list-style: none; padding: 0 !important; display: flex; flex-wrap: wrap; gap: 6px; margin: 6px 0; } .ps-hon li { margin: 0 !important; padding: 4px 10px; border-radius: 999px; background: var(--inset); font-size: .8rem; }
.ps-clubs { list-style: none; padding: 0 !important; margin: 0; } .ps-clubs li { display: flex; gap: 10px; align-items: center; margin: 6px 0; }
.ps-clubs small { display: block; color: var(--muted); font-size: .72rem; }

/* watching an opponent's race live */
.watch { margin: 10px 0; padding: 12px; border-radius: 16px; background: var(--card); border: 2px solid var(--line); }
.watch-head { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; } .watch-head small { color: var(--muted); }
.watch-meter { margin: 8px 0 4px; }
.watch-ev { margin: 4px 0; }
.watch-reels > small { display: block; margin: 8px 0 4px; color: var(--muted); }
.watch-reels > div { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.wr { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 8px 4px; border-radius: 12px; background: var(--inset); text-align: center; min-width: 0; }
.wr b { font: 700 .95rem Oswald, sans-serif; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .wr small { font-size: .68rem; color: var(--muted); }
.wr.wild { background: rgba(250, 204, 21, .15); } .wr.wild span { font-size: 1.3rem; }

/* CHAOS leaves its mark: leftovers stay on the pitch, under the players (js/draft.js leave / messHtml) */
.mess { position: absolute; inset: 0; pointer-events: none; z-index: 0; }
.mess i { position: absolute; font-style: normal; font-size: 1.45rem; line-height: 1; opacity: .85; transform: translate(-50%, -50%) rotate(var(--r, 0deg)); filter: drop-shadow(0 2px 2px rgba(0, 0, 0, .35)); }
.mess i.new { animation: mess-drop .7s cubic-bezier(.2, 1.4, .4, 1) both; }
@keyframes mess-drop { from { transform: translate(-50%, -160%) rotate(0) scale(1.8); opacity: 0; } to { transform: translate(-50%, -50%) rotate(var(--r, 0deg)); opacity: .85; } }
.pitch-row { z-index: 1; }
/* the pigeon's revenge: a number you can't see until full time */
.slot-goals.splatted { position: relative; }
.slot-goals.splatted .sg { color: transparent !important; text-shadow: none; }
.slot-goals.splatted::after { content: '💩'; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%) rotate(-12deg); font-size: 1.05rem;
  padding: 0 6px; border-radius: 40% 60% 55% 45%; background: radial-gradient(circle, #f1ede0 0 45%, #d9d2bd 70%, transparent 72%); }
/* a real tornado: a spinning funnel crossing the pitch, debris round it, players spun as it passes */
.cm-tornado { position: absolute; z-index: 6; top: 2%; left: 0; width: 130px; height: 94%; pointer-events: none; animation: tornado-cross 2.4s ease-in-out forwards;
  filter: drop-shadow(0 8px 10px rgba(0, 0, 0, .45)); }
/* the body of the funnel: a grey cone of dust behind the spinning rings */
.cm-tornado::before { content: ''; position: absolute; left: 50%; top: 0; width: 130px; height: 100%; transform: translateX(-50%);
  background: linear-gradient(180deg, rgba(70, 78, 92, .85), rgba(120, 128, 140, .75) 60%, rgba(150, 140, 120, .6));
  clip-path: polygon(0 0, 100% 0, 58% 88%, 54% 100%, 46% 100%, 42% 88%); animation: tornado-sway .5s ease-in-out infinite alternate; }
/* the dust kicked up where it touches the grass */
.cm-tornado::after { content: ''; position: absolute; left: 50%; bottom: -8px; width: 90px; height: 26px; transform: translateX(-50%); border-radius: 50%;
  background: radial-gradient(rgba(170, 150, 110, .8), transparent 70%); animation: tornado-dust .3s ease-in-out infinite alternate; }
.cm-tornado i { position: absolute; left: 50%; border-radius: 50%; border: 4px solid rgba(235, 240, 248, .95); border-left-color: rgba(90, 98, 112, .9); border-right-color: rgba(90, 98, 112, .9);
  background: rgba(200, 206, 216, .25); transform: translateX(-50%); animation: tornado-spin .35s linear infinite; }
.cm-tornado i:nth-child(1) { top: 0; width: 132px; height: 34px; }
.cm-tornado i:nth-child(2) { top: 16%; width: 106px; height: 28px; animation-duration: .3s; margin-left: 6px; }
.cm-tornado i:nth-child(3) { top: 32%; width: 82px; height: 23px; animation-duration: .27s; margin-left: -4px; }
.cm-tornado i:nth-child(4) { top: 48%; width: 60px; height: 19px; animation-duration: .24s; margin-left: 5px; }
.cm-tornado i:nth-child(5) { top: 64%; width: 40px; height: 15px; animation-duration: .2s; margin-left: -3px; }
.cm-tornado i:nth-child(6) { top: 80%; width: 24px; height: 11px; animation-duration: .17s; }
@keyframes tornado-sway { from { transform: translateX(-56%) skewX(-4deg); } to { transform: translateX(-44%) skewX(4deg); } }
@keyframes tornado-dust { from { transform: translateX(-50%) scale(.85); } to { transform: translateX(-50%) scale(1.15); } }
.cm-tornado b { position: absolute; left: 50%; top: 30%; font-size: 1.4rem; z-index: 1; animation: tornado-orbit .8s linear infinite; }
.cm-tornado b:nth-of-type(2) { top: 50%; animation-duration: .65s; animation-direction: reverse; }
.cm-tornado b:nth-of-type(3) { top: 15%; animation-duration: 1s; }
.cm-tornado b:nth-of-type(4) { top: 70%; animation-duration: .55s; }
@keyframes tornado-cross { 0% { transform: translateX(-110px) rotate(-6deg); } 25% { transform: translateX(22vw) rotate(5deg); } 50% { transform: translateX(42vw) rotate(-5deg); }
  75% { transform: translateX(64vw) rotate(6deg); } 100% { transform: translateX(calc(100vw + 20px)) rotate(-4deg); } }
@keyframes tornado-spin { from { transform: translateX(-50%) rotateY(0); } to { transform: translateX(-50%) rotateY(360deg); } }
@keyframes tornado-orbit { 0% { transform: translateX(-60px) scale(.7); z-index: 0; } 50% { transform: translateX(50px) scale(1.1); } 100% { transform: translateX(-60px) scale(.7); } }
.pitch.windy { animation: windy .18s linear 12; }
@keyframes windy { 0%, 100% { transform: none; } 50% { transform: translateX(2px) rotate(.3deg); } }
.slot.spun { animation: slot-spun .8s ease-out; }
@keyframes slot-spun { 0% { transform: none; } 50% { transform: rotate(200deg) scale(.7) translateY(-14px); } 100% { transform: rotate(360deg); } }
/* a black hole in the middle of the pitch, and players sucked into it */
.cm-hole { position: absolute; z-index: 4; left: 50%; top: 50%; width: 120px; height: 120px; margin: -60px 0 0 -60px; border-radius: 50%; pointer-events: none;
  background: radial-gradient(circle, #000 0 30%, #1b0b2e 45%, rgba(110, 60, 190, .55) 60%, transparent 72%); animation: hole-open 3.1s ease-in-out forwards; }
.cm-hole::after { content: ''; position: absolute; inset: -10px; border-radius: 50%; border: 3px dashed rgba(190, 150, 255, .6); animation: tornado-spin .6s linear infinite; }
@keyframes hole-open { 0% { transform: scale(0) rotate(0); } 25% { transform: scale(1) rotate(180deg); } 80% { transform: scale(1.1) rotate(720deg); opacity: 1; } 100% { transform: scale(0) rotate(900deg); opacity: 0; } }
.cm-fx.visit.suck { animation-name: cm-suck; }
@keyframes cm-suck { 0% { transform: translate(-50%, -50%) scale(1.6) rotate(0); opacity: 0; } 30% { opacity: 1; } 100% { transform: translate(-50%, -50%) scale(.1) rotate(720deg); opacity: 0; } }
/* a pigeon flies in and lands; a streaker legs it across */
.cm-fx.fly { font-size: 2.8rem; animation: none; }  /* flown by js (moment fly) */
.cm-fx.dash { left: 0; font-size: 3.4rem; animation: cm-dash 1.7s linear forwards; }
@keyframes cm-dash { 0% { transform: translate(-60px, -50%); } 20% { transform: translate(20vw, -60%); } 40% { transform: translate(40vw, -45%); } 60% { transform: translate(55vw, -60%); }
  80% { transform: translate(78vw, -45%); } 100% { transform: translate(calc(100vw + 40px), -55%); } }
/* calm animations (Settings → Look: Calm) */ body.calm .cm-tornado, body.calm .cm-hole, body.calm .slot.spun, body.calm .pitch.windy, body.calm .mess i.new { animation-duration: .01s !important; animation-iteration-count: 1 !important; }
/* the coin's edge: thin gold discs stacked between the two faces, so mid-flip you see a rim, not nothing */
.coin-rim { position: absolute; inset: 0; border-radius: 50%; background: linear-gradient(90deg, #8a6406, #d9a91c 40%, #f6d55a 55%, #8a6406); }
.coin-rim:nth-child(1) { transform: translateZ(-4.5px); } .coin-rim:nth-child(2) { transform: translateZ(-3px); } .coin-rim:nth-child(3) { transform: translateZ(-1.5px); }
.coin-rim:nth-child(4) { transform: translateZ(0); } .coin-rim:nth-child(5) { transform: translateZ(1.5px); } .coin-rim:nth-child(6) { transform: translateZ(3px); }
.coin-rim:nth-child(7) { transform: translateZ(4.5px); }
/* CHAOS vehicles: drawn, not emoji. Wheels turn while they move, lights flash, and some park by a player */
.cm-veh { position: absolute; z-index: 7; pointer-events: none; transform: translate(-50%, -50%); filter: drop-shadow(0 4px 4px rgba(0, 0, 0, .45)); }
.cm-veh.flip .spr { transform: scaleX(-1); }
.spr { display: block; overflow: visible; }
.spr .whl { transform-box: fill-box; transform-origin: center; }
.cm-veh.moving .whl { animation: wheel-turn .22s linear infinite; }
.cm-veh.flip.moving .whl { animation-direction: reverse; }
@keyframes wheel-turn { to { transform: rotate(360deg); } }
.spr .lt { animation: light-flash .32s steps(1) infinite; }
.spr .lt.b { animation-delay: .16s; }
@keyframes light-flash { 50% { opacity: .15; } }
/* the glow of the lights on the grass */
.cm-veh::after { content: ''; position: absolute; left: 30%; top: -6px; width: 40px; height: 22px; border-radius: 50%; background: radial-gradient(rgba(70, 140, 255, .55), transparent 70%); animation: light-flash .32s steps(1) infinite; }
/* the ambulance stays by an injured player for the rest of the game */
.slot .parked { position: absolute; left: -22px; bottom: -8px; z-index: 2; width: 46px; pointer-events: none; transform: rotate(-4deg); }
.slot .parked.r { left: auto; right: -22px; transform: scaleX(-1) rotate(-4deg); }
.slot .parked .spr { width: 46px; height: auto; }
/* nicked: he's bundled into the police car; beamed: he floats up into the saucer */
.slot.nicked .avatar, .slot.nicked .slot-name, .slot.nicked .slot-goals { animation: nicked .9s ease-in forwards; }
@keyframes nicked { 30% { transform: translateX(-6px) rotate(-8deg); } 100% { transform: translateX(-40px) translateY(8px) scale(.2); opacity: 0; } }
.slot.beamed .avatar { animation: beamed 1.4s ease-in forwards; }
@keyframes beamed { 0% { transform: none; } 30% { transform: translateY(-6px) rotate(8deg); } 100% { transform: translateY(-90px) scale(.3) rotate(-30deg); opacity: 0; } }
.cm-ufo { position: absolute; z-index: 7; pointer-events: none; transform: translate(-50%, -50%); filter: drop-shadow(0 6px 8px rgba(0, 0, 0, .5)); }
.cm-ufo .beam { position: absolute; left: 50%; top: 34px; width: 70px; height: 0; transform: translateX(-50%); clip-path: polygon(38% 0, 62% 0, 100% 100%, 0 100%);
  background: linear-gradient(rgba(190, 255, 140, .85), rgba(190, 255, 140, .15)); transition: height .3s; }
.cm-ufo.beaming .beam { height: 92px; animation: beam-hum .25s ease-in-out infinite alternate; }
@keyframes beam-hum { to { opacity: .6; } }
body.calm .cm-veh.moving .whl, body.calm .spr .lt, body.calm .cm-veh::after { animation: none; }
/* 5.19: more drawn CHAOS */
.mess i.drawn { opacity: .95; font-size: 0; }
.mess i.drawn svg { display: block; }
.mess .notes { display: flex; gap: 2px; transform: rotate(-12deg); }
.mess svg.crack { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.crack polyline { fill: none; stroke: #2a1d12; stroke-width: 1.4; vector-effect: non-scaling-stroke; stroke-linejoin: bevel; filter: drop-shadow(0 1px 0 rgba(255, 255, 255, .25)); }
.mess svg.crack polyline { stroke-width: 3; }
.crack.tearing { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 3; pointer-events: none; }
.crack.tearing polyline, .crack.new polyline { stroke-width: 4; stroke-dasharray: 100; stroke-dashoffset: 100; animation: crack-tear .9s .2s ease-out forwards; }
@keyframes crack-tear { to { stroke-dashoffset: 0; } }
#app.quaking { animation: quake .09s linear 16; }
@keyframes quake { 0% { transform: translate(0, 0); } 25% { transform: translate(-7px, 3px) rotate(-.6deg); } 50% { transform: translate(6px, -4px) rotate(.5deg); } 75% { transform: translate(-4px, -3px); } 100% { transform: translate(5px, 4px); } }
.slot.wobble { animation: wobble .6s ease-in-out; }
@keyframes wobble { 20% { transform: rotate(-9deg) translateY(4px); } 50% { transform: rotate(7deg) translateY(-3px); } 80% { transform: rotate(-3deg); } }
/* rain: drawn drops falling across the pitch */
.cm-rainfall { position: absolute; inset: 0; z-index: 5; pointer-events: none; background: linear-gradient(rgba(40, 60, 90, .25), rgba(40, 60, 90, .1)); transition: opacity .8s; }
.cm-rainfall.stopping { opacity: 0; }
.cm-rainfall i { position: absolute; top: -10%; width: 2px; height: 18px; border-radius: 2px; background: linear-gradient(transparent, rgba(200, 225, 255, .9)); animation: raindrop .6s linear infinite; }
@keyframes raindrop { to { transform: translate(-18px, 120vh); } }
/* helicopter: the rotor blurs round */
.cm-veh.heli .rotor { transform-box: fill-box; transform-origin: center; animation: rotor .12s linear infinite; }
.cm-veh.heli .trot { transform-box: fill-box; transform-origin: center; animation: wheel-turn .15s linear infinite; }
@keyframes rotor { 50% { transform: scaleX(.15); } }
.cm-veh.case { z-index: 7; }
.cm-note { position: absolute; z-index: 6; pointer-events: none; animation: note-fly 1.6s ease-out forwards; }
@keyframes note-fly { 0% { transform: translate(-50%, -50%) rotate(0); opacity: 1; } 100% { transform: translate(calc(-50% + 30px), -140px) rotate(320deg); opacity: 0; } }
/* break-up: the heart cracks and the halves fall apart */
.cm-heart { position: absolute; z-index: 6; transform: translate(-50%, -50%); pointer-events: none; animation: heart-in .4s ease-out; }
.cm-heart .hl, .cm-heart .hr { transform-box: fill-box; transform-origin: bottom center; animation: heart-l 1.6s .7s ease-in forwards; }
.cm-heart .hr { animation-name: heart-r; }
@keyframes heart-in { from { transform: translate(-50%, -50%) scale(0); } }
@keyframes heart-l { to { transform: translate(-14px, 40px) rotate(-35deg); opacity: 0; } }
@keyframes heart-r { to { transform: translate(14px, 40px) rotate(35deg); opacity: 0; } }
/* confetti: drawn paper bits */
.cm-confetti { position: absolute; inset: 0; z-index: 6; pointer-events: none; }
.cm-confetti i { position: absolute; top: -12px; width: 7px; height: 4px; border-radius: 1px; animation: confetti-fall 2.4s ease-in forwards; }
@keyframes confetti-fall { to { transform: translate(var(--sx, 0), 460px) rotate(720deg); } }
/* the wedding car's tin cans rattle */
.spr .can { animation: can-rattle .18s ease-in-out infinite alternate; transform-box: fill-box; transform-origin: right center; }
.spr .can.c1 { animation-delay: .06s; } .spr .can.c2 { animation-delay: .12s; }
@keyframes can-rattle { to { transform: rotate(14deg) translateY(-1px); } }
/* the pigeon: wings flap in flight, pecks when it's landed */
.pidge .wing { transform-box: fill-box; transform-origin: bottom left; }
.pidge.flying .wing { animation: flap .14s ease-in-out infinite alternate; }
@keyframes flap { to { transform: scaleY(-.7) rotate(10deg); } }
.pidge .head { transform-box: fill-box; transform-origin: bottom left; }
.pidge.pecking .head { animation: peck 3.2s ease-in-out infinite; }
@keyframes peck { 0%, 80%, 100% { transform: none; } 86% { transform: rotate(38deg) translate(1px, 2px); } 92% { transform: none; } }
.cm-fx.fly .spr { width: 64px; height: auto; }
/* the tornado on the big entrance card */
.cm-sky .cm-tornado.big { top: 8%; height: 70%; width: 160px; animation: tornado-intro 3s ease-in-out infinite alternate; }
.cm-sky .cm-tornado.big i { animation-duration: .3s; }
@keyframes tornado-intro { from { transform: translateX(8vw) rotate(-6deg); } to { transform: translateX(62vw) rotate(6deg); } }
/* the fruit machine */
.fruit { display: block; margin: 12px auto 0; padding: 10px 46px 12px 14px; position: relative; border: 0; border-radius: 16px; cursor: pointer; color: inherit; font: inherit;
  background: linear-gradient(#d4243b, #8f0f22); box-shadow: inset 0 0 0 3px #ffd34d, 0 8px 18px rgba(0, 0, 0, .45); }
.fruit-top { display: block; font: 800 .9rem Oswald, sans-serif; letter-spacing: .2em; color: #ffe14a; text-shadow: 0 0 8px #ff9b00; margin-bottom: 6px; animation: pop 1s ease-in-out infinite alternate; }
.fruit-wins { display: flex; gap: 6px; }
.fruit-win { width: 54px; height: 60px; overflow: hidden; border-radius: 8px; background: #fffaf0; box-shadow: inset 0 6px 8px rgba(0, 0, 0, .35), inset 0 -6px 8px rgba(0, 0, 0, .35); }
.fruit-strip { display: flex; flex-direction: column; }
.fruit-strip i { font-style: normal; font-size: 2rem; line-height: 60px; height: 60px; text-align: center; }
.fruit-win.spinning .fruit-strip { animation: fruit-roll .32s linear infinite; filter: blur(1.2px); }
@keyframes fruit-roll { to { transform: translateY(-300px); } }
.fruit-strip.stop i { animation: fruit-stop .35s cubic-bezier(.3, 1.6, .5, 1); }
@keyframes fruit-stop { from { transform: translateY(-30px); } }
.fruit-lever { position: absolute; right: 12px; top: 16px; width: 8px; height: 64px; border-radius: 4px; background: linear-gradient(90deg, #888, #ddd, #888); transform-origin: bottom center; }
.fruit-lever i { position: absolute; left: 50%; top: -12px; width: 20px; height: 20px; margin-left: -10px; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #ff8080, #c00); }
.cm.pulled .fruit-lever { animation: lever-pull .6s ease-in-out; }
@keyframes lever-pull { 40% { transform: scaleY(-.6); } }
.fruit .coin-go { margin-top: 8px; }
.cm.flipping .fruit .coin-go { visibility: hidden; }
.fruit.won { animation: jackpot .25s steps(2) 8; }
@keyframes jackpot { 50% { box-shadow: inset 0 0 0 3px #fff, 0 0 30px #ffe14a; } }
.cm.act .fruit { display: none; }
.cm.intro .fruit + .cm-skip { display: none; }
body.calm .cm-rainfall i, body.calm #app.quaking, body.calm .cm-confetti i, body.calm .pidge .wing, body.calm .pidge .head, body.calm .spr .can, body.calm .cm-veh.heli .rotor { animation: none; }
.mess .smoke { animation: smoke-puff 2.4s ease-in-out infinite alternate; transform-box: fill-box; transform-origin: center; }
.mess .smoke.s2 { animation-delay: -1.2s; }
@keyframes smoke-puff { to { transform: translate(3px, -4px) scale(1.25); opacity: .6; } }
.mess .ember { animation: ember .9s ease-in-out infinite alternate; }
.mess .ember.e2 { animation-delay: -.45s; }
@keyframes ember { to { opacity: .2; } }
.mess i:not(.drawn) { filter: drop-shadow(0 2px 2px rgba(0, 0, 0, .45)) saturate(1.3); }
body.calm .mess .smoke, body.calm .mess .ember { animation: none; }
/* things that stay alive on the pitch (roamHtml): the streaker's laps with a steward after him, the dog, the saucer */
.roam { position: absolute; inset: 0; pointer-events: none; z-index: 2; }
.rm { position: absolute; left: 3%; top: 4%; font-style: normal; animation-timing-function: linear; animation-iteration-count: infinite; filter: drop-shadow(0 3px 2px rgba(0, 0, 0, .4)); }
.rm-streaker, .rm-steward { animation-name: lap; }
@keyframes lap { 0% { left: 2%; top: 3%; transform: scaleX(1); } 24.9% { transform: scaleX(1); } 25% { left: 92%; top: 3%; } 50% { left: 92%; top: 88%; transform: scaleX(1); }
  50.1% { transform: scaleX(-1); } 75% { left: 2%; top: 88%; } 99.9% { transform: scaleX(-1); } 100% { left: 2%; top: 3%; transform: scaleX(1); } }
.rm-streaker::after { content: ''; position: absolute; left: 6px; top: 19px; width: 9px; height: 4px; background: #111; }
.runner .leg, .runner .arm { transform-box: fill-box; transform-origin: top center; }
.runner .leg.l1, .runner .arm.a2 { animation: stride .28s ease-in-out infinite alternate; }
.runner .leg.l2, .runner .arm.a1 { animation: stride .28s ease-in-out infinite alternate-reverse; }
@keyframes stride { from { transform: rotate(-28deg); } to { transform: rotate(28deg); } }
.rm-dog { animation-name: trot; top: 91%; }
@keyframes trot { 0% { left: 4%; transform: scaleX(1); } 49.9% { transform: scaleX(1); } 50% { left: 86%; transform: scaleX(-1); } 100% { left: 4%; transform: scaleX(-1); } }
.dog .leg { transform-box: fill-box; transform-origin: top center; }
.dog .leg.l1 { animation: stride .22s ease-in-out infinite alternate; } .dog .leg.l2 { animation: stride .22s ease-in-out infinite alternate-reverse; }
.dog .tail { transform-box: fill-box; transform-origin: bottom right; animation: wag .25s ease-in-out infinite alternate; }
@keyframes wag { to { transform: rotate(-30deg); } }
.rm-ufo { animation-name: hover; top: 0; animation-timing-function: ease-in-out; animation-direction: alternate; }
.rm-ufo .spr { width: 52px; height: auto; }
@keyframes hover { 0% { left: 6%; transform: translateY(0) rotate(-4deg); } 50% { transform: translateY(8px) rotate(3deg); } 100% { left: 78%; transform: translateY(0) rotate(-3deg); } }
.mess i.drawn .pidge.pecking { animation: waddle 6s ease-in-out infinite; }
@keyframes waddle { 0%, 100% { transform: translateX(0); } 40% { transform: translateX(14px); } 45% { transform: translateX(14px) scaleX(-1); } 85% { transform: translateX(0) scaleX(-1); } 90% { transform: none; } }
body.calm .rm, body.calm .runner .leg, body.calm .runner .arm, body.calm .dog .leg, body.calm .dog .tail, body.calm .mess i.drawn .pidge.pecking { animation: none; }
/* 5.20: CHAOS cards wear what's happened to them */
/* colour: blue above his own numbers, red below (diverging pair, grey = as he was); the % says it in words too */
.page-draft .slot.filled.tone-up { background: color-mix(in srgb, #3987e5 calc(var(--tone) * 70%), rgba(10, 30, 20, .55)); box-shadow: 0 0 0 2px color-mix(in srgb, #3987e5 calc(var(--tone) * 100%), transparent); }
.page-draft .slot.filled.tone-down { background: color-mix(in srgb, #e66767 calc(var(--tone) * 70%), rgba(10, 30, 20, .55)); box-shadow: 0 0 0 2px color-mix(in srgb, #e66767 calc(var(--tone) * 100%), transparent); }
.slot-pct { position: absolute; top: 2px; left: 3px; z-index: 2; font: 800 .58rem Inter, sans-serif; color: #fff; background: rgba(0, 0, 0, .55); padding: 0 4px; border-radius: 6px; line-height: 1.5; }
/* marks on the card itself */
.slot .marks { position: absolute; top: -6px; right: -6px; z-index: 3; display: flex; gap: 1px; pointer-events: none; }
.slot .marks i { font-style: normal; font-size: .9rem; line-height: 1; filter: drop-shadow(0 1px 1px rgba(0, 0, 0, .6)); }
.slot .marks svg { display: block; width: 18px; height: 18px; }
/* knocked crooked by the tornado, for the rest of the game */
/* (see .pitch .slot[data-wonky] below) */
.slot[data-wonky].spun { animation: slot-spun .8s ease-out; }
/* the tornado's torn path */
.mess svg.crack.turf polyline { stroke: #6b4a2b; stroke-width: 9; stroke-linecap: round; opacity: .55; stroke-dasharray: 3 2; filter: none; }
.mess svg.crack.turf.new polyline { stroke-dasharray: 100; stroke-dashoffset: 100; animation: crack-tear 1.2s ease-out forwards; }
.mess .swirl, .slot .marks .swirl { transform-box: fill-box; transform-origin: center; animation: wheel-turn 3s linear infinite; }
.mess .flame, .slot .marks .flame { transform-box: fill-box; transform-origin: bottom center; animation: flicker .35s ease-in-out infinite alternate; }
.mess .flame.f2, .slot .marks .flame.f2 { animation-delay: -.2s; }
@keyframes flicker { to { transform: scaleY(.75) skewX(6deg); } }
.cm-swapnum { position: absolute; z-index: 8; pointer-events: none; font: 800 .8rem Inter, sans-serif; background: #ffe600; color: #1b0b2e; padding: 1px 6px; border-radius: 8px; box-shadow: 0 0 12px #a46bff; }
.slot .parked { width: 60px; left: -30px; bottom: -10px; }
.slot .parked .spr { width: 60px; }
/* the points line under the score, and the full-time chart */
.spark { display: block; width: 100%; height: 22px; margin: 2px 0; overflow: visible; }
.spark-line { fill: none; stroke: #3987e5; stroke-width: 2; vector-effect: non-scaling-stroke; stroke-linejoin: round; }
.spark-best { stroke: rgba(255, 255, 255, .45); stroke-width: 1; stroke-dasharray: 4 3; vector-effect: non-scaling-stroke; }
.spark-dot { fill: #3987e5; stroke: var(--panel); stroke-width: 2; }
.pts-chart { position: relative; margin: 10px 0; padding: 10px 10px 6px; border-radius: 14px; background: var(--panel); }
.pts-chart h4 { margin: 0 0 4px; font-size: .9rem; }
.pts-chart svg { display: block; width: 100%; height: auto; overflow: visible; }
.pc-grid { stroke: var(--line); stroke-width: 1; }
.pc-axis { font: 600 9px Inter, sans-serif; fill: var(--muted); }
.pc-line { fill: none; stroke: #3987e5; stroke-width: 2; stroke-linejoin: round; }
.pc-ev { stroke: var(--panel); stroke-width: 2; }
.pc-ev.up { fill: #3987e5; } .pc-ev.down { fill: #e66767; }
.pc-label { font: 700 10px Inter, sans-serif; fill: var(--text); }
.pc-hit { fill: transparent; cursor: pointer; }
.pc-cross { stroke: var(--muted); stroke-width: 1; stroke-dasharray: 3 3; }
.pc-tip { position: absolute; right: 10px; top: 8px; padding: 4px 8px; border-radius: 8px; background: var(--bg); color: var(--text); font-size: .75rem; line-height: 1.3; box-shadow: 0 2px 8px rgba(0, 0, 0, .3); }
.pc-tip .neg { color: #e66767; font-weight: 700; } .pc-tip .pos { color: #3987e5; font-weight: 700; }
body.calm .mess .swirl, body.calm .slot .marks .swirl, body.calm .mess .flame, body.calm .slot .marks .flame { animation: none; }
/* managers: unlocked and still to earn */
.mgr-all { display: grid; gap: 6px; max-height: 60vh; overflow-y: auto; margin: 8px 0; }
.mgr-row { display: flex; gap: 10px; align-items: flex-start; padding: 8px 10px; border-radius: 12px; background: var(--panel2); }
.mgr-row .mgr-ico { font-size: 1.5rem; line-height: 1; }
.mgr-row b { display: block; }
.mgr-row small { display: block; font-size: .78rem; }
.mgr-row small.up { color: var(--good, #2e9e5b); } .mgr-row small.down { color: var(--muted); }
.mgr-row.locked { opacity: .75; border: 2px dashed var(--line); background: transparent; }
.mgr-new { margin: 10px 0; padding: 10px 12px; border-radius: 14px; background: linear-gradient(90deg, #ffe600, #ff9b00); color: #2a1a00; font-weight: 600; animation: pop .6s ease-out; }

/* ---------------------------------------------------------------- 5.20: CHAOS scenes over the pitch (js/chaosart.js) */
.wfx { position: fixed; z-index: 94; pointer-events: none; overflow: hidden; border-radius: var(--r); }
.wfx > * { position: absolute; }
.wfx .spr.per { overflow: visible; }
.per.walking .leg, .per.walking .arm, .per.clap .arm { transform-box: fill-box; transform-origin: top center; }
.per.walking .leg.l1, .per.walking .arm.a2 { animation: stride .26s ease-in-out infinite alternate; }
.per.walking .leg.l2, .per.walking .arm.a1 { animation: stride .26s ease-in-out infinite alternate-reverse; }
.per.clap .arm.a1 { animation: clap-l .22s ease-in-out infinite alternate; } .per.clap .arm.a2 { animation: clap-r .22s ease-in-out infinite alternate; }
.per.clap.c1 .arm { animation-delay: -.08s; } .per.clap.c2 .arm { animation-delay: -.15s; }
@keyframes clap-l { from { transform: rotate(10deg); } to { transform: rotate(80deg); } }
@keyframes clap-r { from { transform: rotate(-10deg); } to { transform: rotate(-80deg); } }
.wfx .held { position: absolute; left: 12px; top: -26px; display: block; }
.wfx .moving .whl { animation: wheel-turn .22s linear infinite; }
/* the referee: runs to the middle, the card goes up, off he jogs */
.sc-ref { left: 0; top: 46%; animation: ref-run 2.8s ease-in-out forwards; }
.sc-ref .per { width: 46px; height: 76px; }
.sc-ref .held svg { width: 30px; height: 42px; }
.sc-ref .held { transform: scale(0); animation: card-up 2.8s ease-out forwards; left: 18px; top: -30px; }
@keyframes ref-run { 0% { transform: translateX(-40px); } 35%, 70% { transform: translateX(calc(var(--pw) * .46)); } 100% { transform: translateX(calc(var(--pw) * 1.1)); } }
@keyframes card-up { 0%, 36% { transform: scale(0); } 42%, 68% { transform: scale(1.4) rotate(-8deg); } 72%, 100% { transform: scale(0); } }
/* the TV van, its bag of money and the notes */
.sc-van { top: 40%; left: 0; animation: van-cross 3.2s cubic-bezier(.3,.7,.6,1) forwards; }
@keyframes van-cross { 0% { transform: translateX(-100px); } 40%, 62% { transform: translateX(calc(var(--pw) * 0.42)); } 100% { transform: translateX(calc(var(--pw) * 1.1)); } }
.sc-bag { left: 50%; top: 58%; transform: translate(-50%, -50%) scale(0); animation: bag-drop 3.2s ease-out forwards; }
.sc-bag svg { width: 40px; height: 44px; }
@keyframes bag-drop { 0%, 42% { transform: translate(-50%, -120%) scale(0); } 50% { transform: translate(-50%, -50%) scale(1.2); } 56%, 90% { transform: translate(-50%, -50%) scale(1); opacity: 1; } 100% { opacity: 0; } }
.sc-cash { left: 50%; top: 56%; opacity: 0; animation: cash-up 1.6s ease-out forwards; animation-delay: 1.5s; }
.sc-cash.k0 { --dx: -90px; } .sc-cash.k1 { --dx: -60px; animation-delay: 1.6s; } .sc-cash.k2 { --dx: -30px; animation-delay: 1.7s; } .sc-cash.k3 { --dx: 10px; animation-delay: 1.55s; }
.sc-cash.k4 { --dx: 40px; animation-delay: 1.65s; } .sc-cash.k5 { --dx: 70px; animation-delay: 1.75s; } .sc-cash.k6 { --dx: 100px; animation-delay: 1.6s; } .sc-cash.k7 { --dx: -120px; animation-delay: 1.8s; }
@keyframes cash-up { 0% { opacity: 0; transform: translate(0, 0) rotate(0); } 20% { opacity: 1; } 100% { opacity: 0; transform: translate(var(--dx), -140px) rotate(200deg); } }
/* the taxman walks up from your bag and away */
.sc-tax { left: 50%; top: 100%; animation: tax-walk 2.8s ease-in forwards; }
.sc-tax .per { width: 30px; height: 50px; }
@keyframes tax-walk { 0% { transform: translate(-50%, 0); } 40% { transform: translate(-50%, -60%) translateY(-80px); } 100% { transform: translate(calc(var(--pw) * 0.6), -200px); } }
/* the golden ball bouncing in */
.sc-gold { left: 0; top: 0; animation: gold-x 2.2s linear forwards; }
.sc-gold i { display: block; animation: gold-y 2.2s ease-in forwards; filter: drop-shadow(0 0 10px #ffd34d) drop-shadow(0 0 20px rgba(255, 211, 77, .7)); }
.sc-gold i svg { animation: spin360 .6s linear infinite; }
@keyframes gold-x { from { transform: translateX(-50px); } to { transform: translateX(calc(var(--pw) * 0.45)); } }
@keyframes gold-y { 0% { transform: translateY(-50px); } 25% { transform: translateY(calc(var(--ph) * 0.66)); } 42% { transform: translateY(calc(var(--ph) * 0.3)); } 58% { transform: translateY(calc(var(--ph) * 0.74)); } 70% { transform: translateY(calc(var(--ph) * 0.56)); } 82% { transform: translateY(calc(var(--ph) * 0.8)); } 100% { transform: translateY(calc(var(--ph) * 0.82)) scale(1.6); opacity: 0; } }
@keyframes spin360 { to { transform: rotate(360deg); } }
/* the mystery box on a parachute */
.sc-crate { left: 50%; top: 0; animation: crate-fall 2.8s ease-in forwards; }
.sc-crate svg { overflow: visible; }
.sc-crate .chute { animation: chute-gone 2.8s ease-in forwards; transform-box: fill-box; transform-origin: bottom center; }
.sc-crate .lid { animation: lid-pop 2.8s ease-out forwards; transform-box: fill-box; transform-origin: left bottom; }
.sc-crate .sparkle { left: 50%; top: 70%; width: 10px; height: 10px; border-radius: 50%; background: #fff; box-shadow: 0 0 20px 10px #ffe14a; opacity: 0; animation: sparkle-pop 2.8s ease-out forwards; }
@keyframes crate-fall { 0% { transform: translate(-50%, -90px) rotate(-8deg); } 30% { transform: translate(-50%, 20%) rotate(6deg); } 55% { transform: translate(-50%, 160%) rotate(0); } 60% { transform: translate(-50%, 150%) scaleY(.9); } 66%, 100% { transform: translate(-50%, 155%); } }
@keyframes chute-gone { 0%, 55% { opacity: 1; transform: none; } 70%, 100% { opacity: 0; transform: scaleY(.2); } }
@keyframes lid-pop { 0%, 66% { transform: none; } 76%, 100% { transform: translate(-6px, -18px) rotate(-60deg); } }
@keyframes sparkle-pop { 0%, 70% { opacity: 0; } 80% { opacity: 1; } 100% { opacity: 0; transform: scale(3); } }
/* three men in balaclavas, tiptoeing */
.sc-mask { left: 0; top: 52%; display: flex; gap: 18px; animation: sneak 3.2s linear forwards; }
.sc-mask .per { width: 26px; height: 44px; animation: tiptoe .5s ease-in-out infinite alternate; }
.sc-mask .per:nth-child(2) { animation-delay: -.15s; } .sc-mask .per:nth-child(3) { animation-delay: -.3s; }
@keyframes sneak { from { transform: translateX(-160px); } to { transform: translateX(calc(var(--pw) * 1.1)); } }
@keyframes tiptoe { to { transform: translateY(-6px); } }
/* derby day: flares and red smoke */
.sc-flares .fl { transform: translate(-50%, -50%) scale(1.3); }
.sc-flares .spark { animation: flare-spark .15s linear infinite alternate; transform-box: fill-box; transform-origin: center; }
@keyframes flare-spark { to { transform: scale(1.6); fill: #fff3b0; } }
.sc-flares .smoke { position: absolute; left: -20%; width: 140%; height: 60%; background: radial-gradient(ellipse at 30% 50%, rgba(255, 70, 60, .55), transparent 60%), radial-gradient(ellipse at 75% 40%, rgba(255, 120, 90, .45), transparent 55%); filter: blur(6px); opacity: 0; animation: smoke-drift 3.2s ease-in-out forwards; }
.sc-flares .smoke.s1 { top: -10%; } .sc-flares .smoke.s2 { bottom: -10%; animation-delay: .3s; }
@keyframes smoke-drift { 0% { opacity: 0; transform: translateX(-10%); } 30%, 75% { opacity: 1; } 100% { opacity: 0; transform: translateX(10%); } }
/* the terrace anthem: scarves held up and swaying, notes floating */
.sc-scarves { left: 0; right: 0; display: flex; justify-content: space-around; }
.sc-scarves.t { top: 1%; } .sc-scarves.b { bottom: 1%; }
.sc-scarves i { animation: scarf-up 3.2s ease-in-out forwards; transform: translateY(40px); opacity: 0; }
.sc-scarves.t i { transform: translateY(-40px); }
@keyframes scarf-up { 10% { transform: translateY(0) rotate(-6deg); opacity: 1; } 25% { transform: translateY(-4px) rotate(6deg); } 40% { transform: translateY(0) rotate(-6deg); } 55% { transform: translateY(-4px) rotate(6deg); } 70% { transform: translateY(0) rotate(-6deg); opacity: 1; } 100% { transform: translateY(0); opacity: 0; } }
.sc-note { bottom: 10%; opacity: 0; animation: note-up 1.8s ease-out infinite; }
@keyframes note-up { 0% { opacity: 0; transform: translateY(0); } 20% { opacity: 1; } 100% { opacity: 0; transform: translate(14px, -160px) rotate(20deg); } }
/* vuvuzelas poking in and buzzing */
.sc-vuvu i { animation: vuvu-in 2.8s ease-out forwards; }
.sc-vuvu i.l { left: 0; transform: translateX(-100%); } .sc-vuvu i.r { right: 0; transform: translateX(100%) scaleX(-1); }
.sc-vuvu i svg { animation: buzz .05s linear infinite alternate; }
@keyframes vuvu-in { 15%, 85% { transform: translateX(0); } }
.sc-vuvu i.r { animation-name: vuvu-in-r; } @keyframes vuvu-in-r { 15%, 85% { transform: translateX(0) scaleX(-1); } 100% { transform: translateX(100%) scaleX(-1); } }
@keyframes buzz { from { transform: translate(-1px, 1px); } to { transform: translate(1px, -1px); } }
.wfx.scn-vuvuzela { animation: buzz .06s linear 30 alternate; }
/* the press conference */
.sc-press .board { left: 4%; right: 4%; bottom: 4%; height: 36%; display: grid; grid-template-columns: repeat(4, 1fr); gap: 2px; background: #10233f; border-radius: 6px; padding: 4px; transform: translateY(130%); animation: board-up 3.2s ease-out forwards; }
.sc-press .board i { display: flex; align-items: center; justify-content: center; font: 900 .62rem Arial, sans-serif; color: #fff; background: #1d3f73; font-style: normal; border-radius: 3px; }
.sc-press .board i:nth-child(odd) { background: #2b5aa3; }
.sc-press .mic { left: 50%; bottom: 20%; transform: translate(-50%, 140%); animation: mic-up 3.2s ease-out forwards; }
@keyframes board-up { 15%, 85% { transform: translateY(0); } 100% { transform: translateY(130%); } }
@keyframes mic-up { 25%, 85% { transform: translate(-50%, 0); } 100% { transform: translate(-50%, 140%); } }
.sc-press .flash { top: 22%; width: 30px; height: 30px; border-radius: 50%; background: #fff; box-shadow: 0 0 30px 18px rgba(255, 255, 255, .9); opacity: 0; animation: flashbulb .25s ease-out forwards; }
@keyframes flashbulb { 0% { opacity: 1; } 100% { opacity: 0; transform: scale(1.6); } }
/* the 90s: VHS tracking lines, ◀◀ and a spinning shirt */
.sc-vhs { inset: 0; background: rgba(40, 0, 70, .25); animation: vhs-jit .12s steps(2) infinite; mix-blend-mode: normal; }
.sc-vhs b { left: 8px; top: 8px; font: 900 1.3rem 'Courier New', monospace; color: #fff; text-shadow: 2px 0 #f0f, -2px 0 #0ff; }
.sc-vhs .scan { inset: 0; background: repeating-linear-gradient(0deg, rgba(255, 255, 255, .08) 0 2px, transparent 2px 5px); }
.sc-vhs .scan::after { content: ''; position: absolute; left: 0; right: 0; height: 14%; background: linear-gradient(transparent, rgba(255, 255, 255, .35), transparent); animation: track 1.1s linear infinite; }
.sc-vhs .shirt { left: 50%; top: 50%; transform: translate(-50%, -50%); animation: shirt-spin 2.6s ease-in-out forwards; }
@keyframes vhs-jit { to { transform: translateX(2px); } }
@keyframes track { from { top: -15%; } to { top: 110%; } }
@keyframes shirt-spin { 0% { transform: translate(-50%, -50%) scale(0) rotate(-540deg); } 50%, 80% { transform: translate(-50%, -50%) scale(1) rotate(0); } 100% { transform: translate(-50%, -50%) scale(0); opacity: 0; } }
/* a guard of honour */
.sc-guard .row { left: 6%; right: 6%; display: flex; justify-content: space-between; opacity: 0; animation: guard-in 3.4s ease-out forwards; }
.sc-guard .row.t { top: 30%; } .sc-guard .row.b { top: 58%; }
.sc-guard .row .per { width: 22px; height: 38px; }
.sc-guard .hero { top: 44%; left: 0; animation: hero-walk 3.4s linear forwards; }
.sc-guard .hero .per { width: 26px; height: 44px; }
@keyframes guard-in { 10%, 88% { opacity: 1; } 100% { opacity: 0; } }
@keyframes hero-walk { 0%, 15% { transform: translateX(-40px); } 100% { transform: translateX(calc(var(--pw) * 1.05)); } }
/* coaches and buses crossing */
.sc-coach { left: 0; top: 44%; animation: coach-cross 3.4s cubic-bezier(.3,.7,.6,1) forwards; }
.sc-coach .spr { width: 150px; height: auto; }
.sc-coach.parade { animation-duration: 3s; animation-timing-function: linear; }
.sc-coach.parade .fan { animation: fan-jump .3s ease-in-out infinite alternate; } .sc-coach.parade .fan.f1 { animation-delay: -.1s; } .sc-coach.parade .fan.f2 { animation-delay: -.2s; }
@keyframes fan-jump { to { transform: translateY(-3px); } }
@keyframes coach-cross { 0% { transform: translateX(-170px); } 40%, 60% { transform: translateX(calc(var(--pw) * 0.32)); } 100% { transform: translateX(calc(var(--pw) * 1.1)); } }
/* drawn things raining down */
.sc-rain i { top: -50px; animation: sc-fall 1.6s ease-in forwards; }
.sc-rain.slow i { animation: sc-float 3s ease-in-out forwards; }
@keyframes sc-fall { to { transform: translateY(var(--ph, 420px)) rotate(300deg); opacity: .2; } }
@keyframes sc-float { 0% { transform: translateY(0) rotate(-10deg); } 50% { transform: translateY(200px) rotate(10deg); } 100% { transform: translateY(var(--ph, 420px)) rotate(-10deg); opacity: 0; } }
/* the sacked manager leaving with his box; the new one walking on */
.sc-walk { top: 58%; }
.sc-walk .per { width: 30px; height: 50px; }
.sc-walk.off { left: 40%; animation: walk-off 3s linear forwards; }
.sc-walk.on { left: 0; animation: walk-on 2.6s ease-out forwards; }
.sc-walk.on .per.wave .arm.a2 { animation: wave .25s ease-in-out infinite alternate; }
@keyframes wave { from { transform: rotate(-150deg); } to { transform: rotate(-110deg); } }
@keyframes walk-off { to { transform: translateX(calc(var(--pw) * 0.8)); } }
@keyframes walk-on { 0% { transform: translateX(-40px); } 100% { transform: translateX(calc(var(--pw) * 0.38)); } }
.sc-p45 { left: 50%; top: 18%; transform: translate(-50%, -50%) rotate(-8deg); background: #fff; color: #e3262f; font: 900 1.6rem Arial, sans-serif; padding: 8px 14px; border: 3px solid #e3262f; border-radius: 4px; text-align: center; animation: p45 3s ease-out forwards; }
.sc-p45 small { display: block; font-size: .65rem; color: #333; }
@keyframes p45 { 0% { transform: translate(-50%, -50%) scale(3) rotate(-20deg); opacity: 0; } 15% { transform: translate(-50%, -50%) scale(1) rotate(-8deg); opacity: 1; } 80% { opacity: 1; } 100% { transform: translate(-50%, 200%) rotate(30deg); opacity: 0; } }

/* wildcards: a short flourish when you play one */
.wc > div { left: 50%; top: 50%; transform: translate(-50%, -50%); }
.wc-binos { animation: binos 1.9s ease-in-out forwards; }
@keyframes binos { 0% { transform: translate(-200%, -50%); } 30% { transform: translate(-80%, -50%); } 55% { transform: translate(-20%, -50%); } 80% { transform: translate(-50%, -50%) scale(1.1); opacity: 1; } 100% { transform: translate(-50%, -50%) scale(2); opacity: 0; } }
.wc-lever { left: auto !important; right: 8%; transform-origin: bottom center !important; animation: lever 1.4s ease-in-out forwards; }
@keyframes lever { 0% { transform: translate(0, -50%) rotate(0); } 40% { transform: translate(0, -50%) rotate(55deg); } 70% { transform: translate(0, -50%) rotate(0); opacity: 1; } 100% { opacity: 0; } }
.wc-100 { text-align: center; animation: stamp-in 2s cubic-bezier(.2, 1.5, .4, 1) forwards; }
.wc-100 b { display: block; font: 900 5.5rem/1 Oswald, Impact, sans-serif; color: #ffd34d; -webkit-text-stroke: 3px #7a5200; text-shadow: 0 0 30px rgba(255, 211, 77, .8); }
.wc-100 small { font: 900 .85rem Arial, sans-serif; letter-spacing: .3em; color: #fff; text-shadow: 0 2px 4px #000; }
@keyframes stamp-in { 0% { transform: translate(-50%, -50%) scale(4); opacity: 0; } 25% { transform: translate(-50%, -50%) scale(1); opacity: 1; } 80% { transform: translate(-50%, -50%) scale(1); opacity: 1; } 100% { transform: translate(-50%, -50%) scale(.6); opacity: 0; } }
.wc-press { inset: 0; transform: none !important; left: 0 !important; top: 0 !important; }
.wc-press i { position: absolute; bottom: -30%; width: 6px; height: 30%; border-radius: 3px; background: linear-gradient(transparent, rgba(255, 255, 255, .9)); animation: speed-up .7s ease-in 2; }
.wc-press i::before { content: ''; position: absolute; top: -10px; left: -7px; border: 10px solid transparent; border-bottom-color: #fff; border-top: 0; }
@keyframes speed-up { to { transform: translateY(calc(var(--ph) * -1.3)); opacity: 0; } }
.wc-bus { left: auto !important; top: 82% !important; animation: bus-park 2.3s cubic-bezier(.2,.7,.3,1) forwards; }
.wc-bus .spr { width: 150px; height: auto; }
@keyframes bus-park { 0% { transform: translate(calc(var(--pw) * -1.3), -50%); } 80% { transform: translate(-50%, -50%); } 88% { transform: translate(-47%, -50%) rotate(2deg); } 100% { transform: translate(-50%, -50%); } }
.wc-band { animation: band-in 1.7s ease-out forwards; }
@keyframes band-in { 0% { transform: translate(-50%, -50%) rotate(-720deg) scale(0); } 45% { transform: translate(-50%, -50%) rotate(0) scale(1.15); } 60%, 85% { transform: translate(-50%, -50%) scale(1); opacity: 1; } 100% { transform: translate(-50%, 160%) scale(.4); opacity: 0; } }
.wc-rot svg { animation: spin360 .5s linear 3; }
.wc-rot { animation: fade-late 1.5s forwards; }
@keyframes fade-late { 80% { opacity: 1; } 100% { opacity: 0; } }
.wc-coin { animation: coin-hop 1.5s ease-out forwards; }
.wc-coin svg { animation: coin-edge .18s linear infinite; }
@keyframes coin-hop { 0% { transform: translate(-50%, 80%); } 40% { transform: translate(-50%, -160%); } 80% { transform: translate(-50%, -50%); opacity: 1; } 100% { opacity: 0; } }
@keyframes coin-edge { 50% { transform: scaleY(.1); } }
.wc-deadline { left: 0 !important; right: 0; transform: translateY(-50%) !important; background: #ffd400; color: #111; display: flex; align-items: center; justify-content: center; gap: 10px; padding: 8px; font: 900 1.4rem Oswald, Impact, sans-serif; letter-spacing: .05em; animation: banner-slide 2s ease-in-out forwards; }
.wc-deadline i svg { animation: spin360 .4s linear infinite; }
@keyframes banner-slide { 0% { clip-path: inset(0 100% 0 0); } 25%, 80% { clip-path: inset(0 0 0 0); } 100% { clip-path: inset(0 0 0 100%); } }
.wc-heart { animation: heart-beat 1.7s ease-in-out forwards; }
@keyframes heart-beat { 0% { transform: translate(-50%, -50%) scale(0); } 20% { transform: translate(-50%, -50%) scale(1.2); } 30% { transform: translate(-50%, -50%) scale(.95); } 45% { transform: translate(-50%, -50%) scale(1.25); } 60% { transform: translate(-50%, -50%) scale(1); opacity: 1; } 100% { transform: translate(-50%, -50%) scale(1.6); opacity: 0; } }
.wc-case { animation: case-hop 1.9s linear forwards; }
@keyframes case-hop { 0% { transform: translate(-260%, -50%); } 15% { transform: translate(-200%, -120%) rotate(-10deg); } 30% { transform: translate(-140%, -50%); } 45% { transform: translate(-80%, -120%) rotate(10deg); } 60% { transform: translate(-20%, -50%); } 75% { transform: translate(40%, -120%) rotate(-10deg); } 100% { transform: translate(160%, -50%); } }
.wc-magnet { animation: fade-late 1.8s forwards; }
.wc-magnet svg { animation: buzz .06s linear infinite alternate; }
.wc-magnet .field { position: absolute; left: 50%; top: 0; width: 60px; height: 60px; border: 3px solid rgba(94, 200, 255, .8); border-radius: 50%; transform: translate(-50%, -50%) scale(.4); animation: field 1s ease-out infinite; }
.wc-magnet .field.f1 { animation-delay: .33s; } .wc-magnet .field.f2 { animation-delay: .66s; }
@keyframes field { to { transform: translate(-50%, -50%) scale(3); opacity: 0; } }
.wc-trophy { animation: trophy-rise 1.9s ease-out forwards; }
.wc-trophy .glint { position: absolute; left: 30%; top: 20%; width: 12px; height: 12px; background: #fff; clip-path: polygon(50% 0, 60% 40%, 100% 50%, 60% 60%, 50% 100%, 40% 60%, 0 50%, 40% 40%); animation: glint .6s ease-in-out infinite alternate; }
@keyframes trophy-rise { 0% { transform: translate(-50%, 100%); opacity: 0; } 40% { transform: translate(-50%, -50%); opacity: 1; } 85% { opacity: 1; } 100% { transform: translate(-50%, -60%); opacity: 0; } }
@keyframes glint { from { transform: scale(.4) rotate(0); } to { transform: scale(1.4) rotate(45deg); } }
.wc-storm { width: 10px; height: 10px; }
.wc-storm i { position: absolute; left: 0; top: 0; animation: storm-orbit 1.9s ease-in forwards; }
@keyframes storm-orbit { 0% { transform: rotate(var(--a)) translateX(10px) rotate(0); } 100% { transform: rotate(calc(var(--a) + 720deg)) translateX(160px) rotate(720deg); opacity: 0; } }
.wc-hat { animation: fade-late 2s forwards; }
.wc-hat .b { position: absolute; left: 32px; top: 10px; opacity: 0; animation: hat-pop 1.2s ease-out forwards; }
.wc-hat .b1 { animation-delay: .25s; --dx: -50px; } .wc-hat .b0 { --dx: 0px; } .wc-hat .b2 { animation-delay: .5s; --dx: 50px; }
@keyframes hat-pop { 0% { opacity: 1; transform: translate(0, 20px) scale(.3); } 60% { opacity: 1; transform: translate(var(--dx), -70px) scale(1); } 100% { opacity: 0; transform: translate(var(--dx), -60px); } }
.wc-flames { inset: 0; transform: none !important; left: 0 !important; top: 0 !important; }
.wc-flames i { position: absolute; bottom: -10px; width: 34px; height: 70px; border-radius: 50% 50% 40% 40%; background: radial-gradient(ellipse at 50% 80%, #ffe14a, #ff8a3d 45%, rgba(227, 38, 47, .7) 70%, transparent 72%); animation: flame-lick .3s ease-in-out infinite alternate, fade-late 1.9s forwards; transform-origin: bottom center; }
@keyframes flame-lick { from { transform: scaleY(.8) skewX(-6deg); } to { transform: scaleY(1.25) skewX(6deg); } }
.wc-joker { animation: joker-flip 1.7s ease-in-out forwards; }
@keyframes joker-flip { 0% { transform: translate(-50%, -50%) rotateY(90deg) scale(.4); } 30% { transform: translate(-50%, -50%) rotateY(0) scale(1); } 45% { transform: translate(-50%, -50%) rotateY(180deg); } 60% { transform: translate(-50%, -50%) rotateY(360deg); opacity: 1; } 100% { transform: translate(-50%, -50%) rotateY(360deg) scale(1.4); opacity: 0; } }
.wc-board { display: flex; flex-direction: column; gap: 3px; background: #111; padding: 6px 10px; border-radius: 6px; border: 3px solid #444; font: 900 1.6rem 'Courier New', monospace; animation: board-hold 1.9s ease-out forwards; }
.wc-board .out { color: #ff3640; } .wc-board .in { color: #39ff88; } .wc-board span::before { content: '▲ '; font-size: .9rem; } .wc-board .out::before { content: '▼ '; }
@keyframes board-hold { 0% { transform: translate(-50%, 60%) scale(.3); opacity: 0; } 20% { transform: translate(-50%, -50%) scale(1); opacity: 1; } 80% { opacity: 1; } 100% { transform: translate(-50%, -50%); opacity: 0; } }

/* the bus stays parked in front of your goal for the rest of the game */
.bus-parked { position: absolute; left: 50%; bottom: 9%; transform: translateX(-50%); z-index: 0; opacity: .9; pointer-events: none; }
.bus-parked .spr { width: 112px; height: auto; display: block; }

/* the pitch wears as the game goes on, and the floodlights flicker when the meter's nearly full */
.wear { position: absolute; inset: 0; pointer-events: none; z-index: 0; opacity: 0; transition: opacity 1s;
  background: radial-gradient(ellipse 22% 9% at 50% 93%, rgba(120, 86, 46, .85), transparent 70%), radial-gradient(ellipse 22% 9% at 50% 7%, rgba(120, 86, 46, .8), transparent 70%),
    radial-gradient(ellipse 18% 10% at 50% 50%, rgba(120, 86, 46, .7), transparent 70%), radial-gradient(ellipse 10% 6% at 22% 70%, rgba(120, 86, 46, .5), transparent 70%),
    radial-gradient(ellipse 12% 6% at 78% 30%, rgba(120, 86, 46, .5), transparent 70%), radial-gradient(ellipse 8% 30% at 3% 50%, rgba(120, 86, 46, .5), transparent 70%); }
.wear.w1 { opacity: .3; } .wear.w2 { opacity: .55; } .wear.w3 { opacity: .8; } .wear.w4 { opacity: 1; filter: saturate(1.3); }
.flood { position: absolute; inset: 0; pointer-events: none; z-index: 2; background: rgba(0, 0, 0, .45); opacity: 0; animation: flicker 4.5s steps(1) infinite; }
.flood.hot { animation-duration: 2.6s; }
@keyframes flicker { 0%, 61%, 64%, 67%, 100% { opacity: 0; } 62%, 66% { opacity: 1; } 65% { opacity: .5; } }
body.calm .flood { animation: none; }

/* the weather */
.wx { position: absolute; inset: 0; pointer-events: none; z-index: 3; }
.wx-rain { background: repeating-linear-gradient(105deg, transparent 0 9px, rgba(200, 225, 255, .22) 9px 10px); background-size: 40px 40px; animation: wx-rain .35s linear infinite; }
@keyframes wx-rain { to { background-position: -10px 40px; } }
.wx-snow { background-image: radial-gradient(2px 2px at 20px 30px, #fff, transparent), radial-gradient(2.5px 2.5px at 60px 80px, #fff, transparent), radial-gradient(1.5px 1.5px at 100px 10px, #fff, transparent), radial-gradient(2px 2px at 140px 60px, #fff, transparent);
  background-size: 160px 110px; animation: wx-snow 5s linear infinite; }
@keyframes wx-snow { to { background-position: 30px 110px, -20px 110px, 20px 110px, -30px 110px; } }
.pitch.wx-snowy { background: repeating-linear-gradient(180deg, #2c8a5a 0 34px, #2a8055 34px 68px); }
.pitch.wx-snowy::after { content: ''; position: absolute; inset: 0; pointer-events: none; background: radial-gradient(ellipse at 30% 20%, rgba(255, 255, 255, .45), transparent 50%), radial-gradient(ellipse at 70% 80%, rgba(255, 255, 255, .4), transparent 55%), rgba(255, 255, 255, .12); z-index: 0; }
.pitch.wx-snowy .pitch-lines { opacity: .15; }
.wx-fog { background: radial-gradient(ellipse 60% 30% at 20% 30%, rgba(230, 236, 240, .55), transparent 70%), radial-gradient(ellipse 60% 30% at 80% 70%, rgba(230, 236, 240, .5), transparent 70%), rgba(220, 228, 232, .18); background-size: 200% 100%; animation: wx-fog 14s ease-in-out infinite alternate; }
@keyframes wx-fog { to { background-position: 100% 0, 0 0, 0 0; } }
.reels.foggy .reel:not(.selected) .reel-name, .reels.foggy .reel:not(.selected) .reel-sub { filter: blur(2.2px); }
.wx-sun { background: linear-gradient(120deg, rgba(255, 240, 180, .28), transparent 40%, transparent 70%, rgba(255, 240, 180, .12)); }
.wx-sun::after { content: ''; position: absolute; right: -30px; top: -30px; width: 120px; height: 120px; border-radius: 50%; background: radial-gradient(circle, rgba(255, 245, 200, .7), transparent 65%); }
.pitch.wx-sunny .slot.filled .avatar { box-shadow: 6px 6px 0 rgba(0, 0, 0, .25); }
.wx-wind .leaf { position: absolute; top: 30%; left: -20px; width: 12px; height: 7px; background: #8bbd4a; border-radius: 0 80% 0 80%; animation: wx-leaf 3.2s linear infinite; }
.wx-wind .leaf.l2 { top: 66%; animation-delay: -1.6s; background: #c9a24a; }
@keyframes wx-leaf { 0% { transform: translate(0, 0) rotate(0); } 50% { transform: translate(calc(var(--pw) * 0.5), -30px) rotate(360deg); } 100% { transform: translate(calc(var(--pw) * 1.05), 10px) rotate(720deg); } }
.pitch.wx-windy .pitch-row { animation: gusty 3.5s ease-in-out infinite; }
@keyframes gusty { 0%, 80%, 100% { transform: none; } 88% { transform: translateX(2px); } }
body.calm .wx, body.calm .wx i, body.calm .pitch.wx-windy .pitch-row { animation: none; }
.wx-pill { font-size: .78rem; font-weight: 800; padding: 2px 8px; border-radius: 99px; background: rgba(255, 255, 255, .12); white-space: nowrap; }

/* full time: the replay */
.pts-chart .pc-replay { margin-top: 6px; }
.pts-chart.replaying .pc-line { stroke-dasharray: var(--len); stroke-dashoffset: var(--len); }
.pts-chart.replaying .pc-ev, .pts-chart.replaying .pc-label { opacity: 0; }
.pts-chart .pc-ev.on, .pts-chart .pc-label.on { opacity: 1; transition: opacity .2s; }
.pc-caption { min-height: 2.6em; font-weight: 700; font-size: .9rem; text-align: center; margin-top: 4px; }
.pc-caption b { font-size: 1.3rem; display: block; }
.pitch.replay .slot.filled.later, .pitch.replay .mess > .later, .pitch.replay .bus-parked.later { opacity: 0; }
.pitch.replay .slot.filled, .pitch.replay .mess > * { transition: opacity .35s; }

.sc-streak { left: 0; top: 40%; display: flex; align-items: flex-end; animation: sneak 2.6s linear forwards; }
.sc-streak .per { width: 30px; height: 50px; } .sc-streak .gap { width: 40px; }
.cm-fx > svg { width: 1.15em; height: 1.15em; display: block; }
.cm-fx.rain > svg, .cm-fx.sweep > svg { width: 1em; height: 1em; }

.replay-bar { position: fixed; left: 50%; bottom: calc(14px + env(safe-area-inset-bottom)); transform: translateX(-50%); z-index: 70; width: min(440px, calc(100vw - 24px)); background: rgba(10, 6, 30, .92); color: #fff; border-radius: 14px; padding: 10px 14px 8px; display: grid; grid-template-columns: auto 1fr; gap: 2px 12px; align-items: center; box-shadow: 0 10px 30px rgba(0, 0, 0, .45); cursor: pointer; }
.replay-bar .rb-total { font: 700 1.9rem/1 Oswald, Impact, sans-serif; color: #c8ff3d; grid-row: span 2; min-width: 3ch; }
.replay-bar .rb-cap { font-weight: 700; font-size: .9rem; }
.replay-bar .rb-cap em { font-style: normal; font-weight: 900; } .replay-bar .rb-cap em.pos { color: #7cc0ff; } .replay-bar .rb-cap em.neg { color: #ff9a9a; }
.replay-bar .rb-prog { display: block; height: 4px; border-radius: 2px; background: rgba(255, 255, 255, .15); overflow: hidden; }
.replay-bar .rb-prog i { display: block; height: 100%; width: 0; background: #c8ff3d; transition: width .3s; }
.replay-bar small { grid-column: 1 / -1; text-align: center; opacity: .55; font-size: .7rem; }

.sc-press, .sc-guard, .sc-flares, .sc-rain, .sc-vuvu { inset: 0; }
.cm-coin > svg { width: 1.3em; height: 1.3em; display: block; }
.sc-press > *, .sc-guard > *, .sc-vhs > *, .sc-flares > *, .sc-rain > i, .sc-vuvu > i, .wc-press > i, .wc-flames > i, .sc-crate .sparkle { position: absolute; }
.sc-press .board { height: 22%; }

/* the effects layer (js/fx.js): PixiJS canvas and Lottie animations over the page, never in the way of a tap */
.fx-canvas { position: fixed; inset: 0; pointer-events: none; z-index: 94; }
.fx-lottie { position: fixed; pointer-events: none; z-index: 94; }
.fx-lot { width: 100%; height: 100%; }
.fx-lot.flip { transform: scaleX(-1); }
.cm-veh.lot { overflow: visible; }
.cm-veh.lot .held-case { position: absolute; right: 18%; top: 48%; width: 22px; }
.cm-veh.lot .held-case .spr { width: 22px; height: auto; }
.cm-tornado b > svg { width: 1em; height: 1em; }
.parked .lot-still { width: 100%; height: auto; display: block; }
.wfx .lot { overflow: visible; }
.sc-tax.lot .held { left: 70%; top: 10%; }
.sc-crate.lot { transform-origin: center; }
.fx-canvas.raised { z-index: 97; }
/* with the effects layer on, the weather is drawn there (the CSS stripes and dots stay for Calm mode / no WebGL) */
.pitch.fxw .wx-rain, .pitch.fxw .wx-snow, .pitch.fxw .wx-wind .leaf { display: none; }
.pitch.fxw .wx-fog { background-color: rgba(220, 228, 232, .08); }
/* roamers with a proper animation (draft.js roamLayer): their own layer over the pitch, scrolling with the page */
#roam-fx { position: absolute; pointer-events: none; z-index: 5; overflow: hidden; border-radius: var(--r); }
#roam-fx .rm { position: absolute; display: block; animation-timing-function: linear; animation-iteration-count: infinite; }
#roam-fx .rm-dog { width: 46px; height: 46px; margin-top: -24px; }
#roam-fx .rmp { position: absolute; width: 44px; height: 44px; transform: translate(-50%, -60%); }
body.calm #roam-fx { display: none; }
.cm-tornado.fxd i, .cm-tornado.fxd b, .cm-tornado.fxd::before, .cm-tornado.fxd::after { display: none; }

/* the managers' portraits (chaosart.js): fading up over the pitch when one's appointed or sacked, and on their cards */
.mgr-photo { position: absolute; left: 50%; top: 44%; max-width: none; height: auto; }
.sc-portrait { left: 50%; top: 40%; width: 62%; aspect-ratio: 4 / 5; transform: translate(-50%, -50%); }
.sc-portrait .ph { position: absolute; inset: 0; overflow: hidden; border-radius: 50% / 46%;
  -webkit-mask-image: radial-gradient(ellipse 50% 50% at 50% 48%, #000 58%, transparent 74%); mask-image: radial-gradient(ellipse 50% 50% at 50% 48%, #000 58%, transparent 74%); }
.sc-portrait.new .ph { animation: mgr-up 2.8s ease-out forwards; filter: drop-shadow(0 0 18px rgba(255, 211, 77, .7)); }
.sc-portrait.sad .ph { animation: mgr-sad 3s ease-in forwards; filter: grayscale(1) contrast(1.1) brightness(.9); }
@keyframes mgr-up { 0% { opacity: 0; transform: scale(1.12); filter: blur(6px) drop-shadow(0 0 18px rgba(255, 211, 77, .7)); } 25% { opacity: .9; transform: scale(1); filter: blur(0) drop-shadow(0 0 18px rgba(255, 211, 77, .7)); }
  75% { opacity: .85; transform: scale(1.03); } 100% { opacity: 0; transform: scale(1.06); } }
@keyframes mgr-sad { 0% { opacity: 0; transform: translateY(-10px); } 20% { opacity: .85; transform: none; } 70% { opacity: .8; transform: translateY(8px) rotate(-2deg); } 100% { opacity: 0; transform: translateY(60px) rotate(-6deg); } }
.sc-portrait .stamp { position: absolute; left: 50%; top: 55%; transform: translate(-50%, -50%) rotate(-14deg) scale(3); opacity: 0; padding: 4px 12px; border: 4px solid #e3262f; border-radius: 6px;
  color: #e3262f; font: 900 1.9rem Oswald, Impact, sans-serif; letter-spacing: .06em; background: rgba(255, 255, 255, .85); animation: stamp-slam 3s ease-out forwards; }
@keyframes stamp-slam { 0%, 22% { opacity: 0; transform: translate(-50%, -50%) rotate(-14deg) scale(3); } 30% { opacity: 1; transform: translate(-50%, -50%) rotate(-14deg) scale(1); } 80% { opacity: 1; } 100% { opacity: 0; transform: translate(-50%, 0) rotate(-20deg) scale(1); } }
.sc-portrait .banner { position: absolute; left: 50%; bottom: -6%; transform: translateX(-50%); white-space: nowrap; padding: 4px 12px; border-radius: 8px; background: #ffd34d; color: #3a2a00;
  font: 900 .95rem Oswald, Impact, sans-serif; letter-spacing: .08em; text-align: center; opacity: 0; animation: banner-up 2.8s ease-out forwards; box-shadow: 0 6px 18px rgba(0, 0, 0, .35); }
.sc-portrait .banner small { display: block; font: 800 .8rem Inter, Arial, sans-serif; letter-spacing: 0; }
@keyframes banner-up { 0%, 20% { opacity: 0; transform: translate(-50%, 14px); } 32%, 80% { opacity: 1; transform: translate(-50%, 0); } 100% { opacity: 0; } }
body.calm .sc-portrait .ph, body.calm .sc-portrait .stamp, body.calm .sc-portrait .banner { animation-duration: .01s !important; }
.mgr-ico.ph { position: relative; display: inline-block; width: 2.6rem; height: 2.6rem; border-radius: 50%; overflow: hidden; background: #223; vertical-align: middle; }
.mgr-ico.ph .mgr-photo { top: 46%; }
.scn-sacked .sc-p45 { top: 10%; font-size: 1.3rem; }
.sc-portrait .stamp { top: 70%; }

/* 5.21.1: the boxes clip anything outside them, so the marks and a parked vehicle sit just inside the corners */
.slot .marks { top: 1px; right: 1px; gap: 0; }
.slot .marks svg { width: 15px; height: 15px; }
.slot .marks i { font-size: .72rem; }
.slot .parked, .slot .parked.r { width: 40px; bottom: 0; left: -2px; }
.slot .parked.r { left: auto; right: -2px; }
.slot .parked .spr, .slot .parked .lot-still { width: 40px; }

/* 5.21.1: once a moment's action starts you can carry on playing. Its card becomes a slim banner at the top, the rest
   of the screen takes taps, and the action plays on its own layer over the pitch (.cm-stage) */
.cm-stage { position: fixed; z-index: 94; pointer-events: none; overflow: hidden; border-radius: var(--r); }
.cm.act { justify-content: flex-start; padding: calc(6px + env(safe-area-inset-top)) 10px 0; pointer-events: none; }
.cm.act::before { display: none; }
.cm.act .cm-sky { display: none; }
.cm.act .cm-card { pointer-events: auto; display: grid; grid-template-columns: auto 1fr; column-gap: 10px; align-items: center; text-align: left; padding: 6px 12px; max-width: 460px; width: 100%;
  box-shadow: 0 8px 24px rgba(0, 0, 0, .45); }
.cm.act .cm-icon { grid-row: span 2; font-size: 1.7rem; margin: 0; }
.cm.act .cm-name { font-size: 1rem; margin: 0; line-height: 1.15; }
.cm.act .cm-text { font-size: .78rem; margin: 0; line-height: 1.25; }
.cm.act .cm-rar, .cm.act .cm-skip { display: none; }
.cm.act.tucked .cm-card, .cm.out .cm-card { opacity: 0; transform: translateY(-120%); transition: .3s; pointer-events: none; }
.ps-chaos { margin: 8px 0 10px; padding: 8px 10px; border-radius: 12px; background: color-mix(in srgb, var(--panel) 80%, #7c3aed); }
.ps-chaos h4 { margin: 0 0 4px; }
.ps-story { list-style: none; margin: 4px 0 0; padding: 0; font-size: .82rem; }
.ps-story li { display: flex; justify-content: space-between; gap: 8px; padding: 3px 0; border-top: 1px solid var(--line); }
.ps-chaos .pos { color: #3987e5; } .ps-chaos .neg { color: #e66767; }
.ps-chaos { margin: 8px 0 10px; padding: 8px 10px; border-radius: 12px; background: color-mix(in srgb, var(--panel) 80%, #7c3aed); }
.ps-chaos h4 { margin: 0 0 4px; }
.ps-story { list-style: none; margin: 4px 0 0; padding: 0; font-size: .82rem; }
.ps-story li { display: flex; justify-content: space-between; gap: 8px; padding: 3px 0; border-top: 1px solid var(--line); }
.ps-chaos .pos { color: #3987e5; } .ps-chaos .neg { color: #e66767; }
/* the moment backdrops glow slowly instead of throbbing */
.sky-red, .sky-fire { animation-duration: 2.6s; }
@keyframes sky-pulse { to { filter: brightness(1.12); } }
/* crooked players (the tornado, the earthquake): their own rotation, so no other transform on the card can undo it */
.pitch .slot[data-wonky] { rotate: var(--wk); }
/* the tornado picks each card up, spins it right round and drops it */
@keyframes slot-spun { 0% { transform: none; } 30% { transform: translateY(-30px) scale(1.2) rotate(220deg); } 62% { transform: translateY(-38px) scale(1.12) rotate(420deg); } 84% { transform: translateY(5px) scale(.96) rotate(360deg); } 100% { transform: none; } }
.slot.spun, .slot[data-wonky].spun { animation: slot-spun 1.1s cubic-bezier(.3, .6, .4, 1); z-index: 4; }
/* the bomb */
.sc-bomb { left: 50%; top: 50%; transform: translate(-50%, -50%); animation: bomb-in 2.4s cubic-bezier(.3, 1.4, .5, 1) forwards; }
.sc-bomb .spark { animation: flare-spark .12s linear infinite alternate; transform-box: fill-box; transform-origin: center; }
@keyframes bomb-in { 0% { transform: translate(-50%, -260%) rotate(-30deg); } 30% { transform: translate(-50%, -50%) rotate(8deg); } 40% { transform: translate(-50%, -56%) rotate(-4deg); } 80% { transform: translate(-50%, -50%) scale(1); opacity: 1; } 100% { transform: translate(-50%, -420%) scale(.2); opacity: 0; } }
.bomb-pill { font-size: .8rem; font-weight: 900; padding: 2px 9px; border-radius: 99px; background: #1b1b22; color: #ffd34d; border: 2px solid #e3262f; white-space: nowrap; }
.bomb-pill.late { background: #e3262f; color: #fff; animation: bomb-pulse .5s ease-in-out infinite alternate; }
@keyframes bomb-pulse { to { transform: scale(1.12); } }
/* 5.22: every kind of pack has its own look, and says what it's for */
.fx-canvas.raised.top { z-index: 130; }
.pk-daily { background: linear-gradient(135deg, #064e3b, #059669 55%, #a7f3d0); }
.pk-level { background: linear-gradient(135deg, #0c2a4d, #2563eb 50%, #60a5fa); box-shadow: 0 18px 44px rgba(0, 0, 0, .5), inset 0 0 0 3px #bfdbfe; }
.pk-badge { background: linear-gradient(135deg, #3f2a05, #b45309 50%, #fbbf24); box-shadow: 0 18px 44px rgba(0, 0, 0, .5), inset 0 0 0 3px #fde68a; }
.pk-dailies { background: linear-gradient(135deg, #1e1b4b, #7c3aed 55%, #f472b6); }
.pk-royale { background: linear-gradient(135deg, #1c1305, #a16207 45%, #fde047); box-shadow: 0 18px 44px rgba(0, 0, 0, .55), inset 0 0 0 3px #fef08a; }
.pk-chaos { background: conic-gradient(from 200deg, #dc2626, #f59e0b, #16a34a, #2563eb, #9333ea, #dc2626); box-shadow: 0 18px 44px rgba(0, 0, 0, .55), inset 0 0 0 3px #111; }
.pk-chaos b, .pk-chaos span { text-shadow: 0 2px 0 #000, 0 0 12px rgba(0, 0, 0, .6); }
.po-why { display: block; margin-top: 6px; font: 700 .8rem Inter, sans-serif; font-style: normal; color: #fde68a; }
.po-name small + .po-why { margin-top: 8px; }
.pack-open .po-lot { position: fixed; inset: 0; pointer-events: none; z-index: 2; }
.fx-lottie.po-trophy { z-index: 131; }
/* 5.22: a player's card picked up by a moment (bundled into the police car, beamed up, whirled by the twister) */
.page-draft .slot.away > * { visibility: hidden; }
.page-draft .slot.away { background: rgba(255, 255, 255, .06); border-style: dashed; box-shadow: none; }
.cm-stage .cm-held { position: absolute; z-index: 6; margin: 0; transform: translate(-50%, -50%); pointer-events: none; overflow: hidden; box-shadow: 0 10px 18px rgba(0, 0, 0, .45); rotate: none; }
.cm-held.beaming { filter: drop-shadow(0 0 10px #b6ff8a) brightness(1.15); }
/* riding in the vehicle: tucked behind it, head and shoulders showing over the roof */
.cm-veh .cm-held.riding { position: absolute; left: 50%; top: 22%; z-index: -1; transform: translate(-50%, -50%) scale(.42) rotate(-10deg); box-shadow: none; }
.cm-veh .cm-held.riding.lying { top: 48%; transform: translate(-50%, -50%) scale(.38) rotate(90deg); }
.cm-veh.flip .cm-held.riding { transform: translate(-50%, -50%) scale(.42) rotate(10deg); }
.fx-lottie .fx-carry { position: absolute; left: 6%; top: 46%; font-style: normal; font-size: 22px; filter: drop-shadow(0 2px 2px rgba(0, 0, 0, .5)); animation: carry-bob .25s ease-in-out infinite alternate; }
@keyframes carry-bob { to { translate: 0 -3px; } }
/* 5.22.1: a full wildcard bag – play the new one now, or play / swap one of yours */
.modal .bf-now { width: 100%; margin: 6px 0 10px; }
.bag-full { display: grid; gap: 6px; margin-bottom: 10px; }
.bf-row { display: flex; align-items: center; gap: 6px; padding: 6px 8px; border-radius: 12px; background: var(--card); border: 1px solid var(--line); }
.bf-row span { flex: 1; min-width: 0; font-weight: 700; font-size: .9rem; }
.bf-row .btn { white-space: nowrap; }
/* 5.22.1: CHAOS – why the bonus moved when you signed someone, a line at a time in the corner */
#bonus-notes { position: fixed; right: 8px; top: calc(env(safe-area-inset-top, 0px) + 56px); z-index: 96; display: flex; flex-direction: column; align-items: flex-end; gap: 4px; pointer-events: none; max-width: min(260px, 70vw); }
#bonus-notes .bn { padding: 4px 9px; border-radius: 10px; font: 600 .74rem/1.25 Inter, sans-serif; color: #fff; background: rgba(12, 18, 30, .82); box-shadow: 0 4px 12px rgba(0, 0, 0, .3); text-align: right; animation: bn-life 3.4s ease forwards; }
#bonus-notes .bn b { font-weight: 800; margin-right: 2px; }
#bonus-notes .bn.up b { color: #7cc0ff; } #bonus-notes .bn.down b { color: #ff8a8a; }
@keyframes bn-life { 0% { opacity: 0; transform: translateX(14px); } 10%, 80% { opacity: 1; transform: none; } 100% { opacity: 0; transform: translateY(-6px); } }
/* 5.22.2: a shared link opened in an Android browser offers to open in the app */
.app-bar { position: fixed; left: 8px; right: 8px; bottom: calc(env(safe-area-inset-bottom, 0px) + 8px); z-index: 150; display: flex; align-items: center; gap: 8px; padding: 8px 8px 8px 12px; border-radius: 14px; background: #0b3d2e; color: #fff; box-shadow: 0 8px 24px rgba(0, 0, 0, .35); font-size: .82rem; }
.app-bar span { flex: 1; min-width: 0; }
.app-bar .btn { white-space: nowrap; }
.app-bar .icon-btn { color: #fff; background: transparent; border: 0; font-size: 1rem; padding: 4px; }
/* 5.23: friend challenges – the ghost bar, the head-to-head, the chart, watch along, the rivalry page */
.ch-ghost { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 4px 10px; font-size: .85rem; }
.ch-ghost .chg-line { font-size: .8rem; }
.ch-ghost i { font-style: normal; font-weight: 800; } .ch-ghost i.up { color: var(--good); } .ch-ghost i.down { color: var(--bad); }
.ch-ghost .chg-spoil { border: 0; background: rgba(0, 0, 0, .15); color: inherit; font: 600 .75rem Inter, sans-serif; padding: 3px 8px; border-radius: 999px; }
.ch-hero { display: flex; flex-direction: column; align-items: center; gap: 6px; text-align: center; padding: 18px 12px; margin: 10px 0; border-radius: 18px; background: var(--card); border: 2px solid var(--line); }
.ch-hero b { font: 700 1.4rem Oswald, sans-serif; } .ch-hero .ch-rec { font-size: 2rem; } .ch-hero small { color: var(--muted); }
.ch-verdict { text-align: center; padding: 14px 10px; margin: 10px 0; border-radius: 18px; background: var(--card); border: 2px solid var(--line); }
.ch-verdict > b { display: block; font: 700 1.3rem Oswald, sans-serif; margin-bottom: 6px; }
.ch-verdict small { color: var(--muted); }
.ch-scores { display: flex; justify-content: center; align-items: baseline; gap: 10px; font-size: .95rem; }
.ch-scores b { font: 700 1.8rem Oswald, sans-serif; } .ch-scores i { color: var(--muted); font-style: normal; }
.ch-scores .a b, .ch-legend .a { color: #3b82f6; } .ch-scores .b b, .ch-legend .b { color: #f97316; }
.ch-chart { background: var(--card); border: 2px solid var(--line); border-radius: 16px; padding: 8px 8px 6px; }
.ch-chart svg { display: block; width: 100%; height: auto; }
.ch-chart .grid { stroke: var(--line); stroke-width: 1; } .ch-chart .ax { fill: var(--muted); font: 600 9px Inter, sans-serif; }
.ch-chart .la, .ch-chart .lb { fill: none; stroke-width: 3; stroke-linejoin: round; stroke-linecap: round; }
.ch-chart .la { stroke: #3b82f6; } .ch-chart .lb { stroke: #f97316; } .ch-chart .cx { fill: #facc15; stroke: var(--card); stroke-width: 2; }
.ch-legend { display: flex; flex-wrap: wrap; justify-content: center; gap: 4px 14px; font: 700 .75rem Inter, sans-serif; margin-top: 4px; }
.ch-legend span::before { content: ''; display: inline-block; width: 12px; height: 4px; border-radius: 2px; background: currentColor; margin-right: 5px; vertical-align: middle; }
.ch-legend .c { color: var(--muted); } .ch-legend .c::before { width: 8px; height: 8px; border-radius: 50%; background: #facc15; }
.ch-diffs { display: grid; gap: 6px; }
.ch-diff { display: grid; gap: 2px; padding: 8px 10px; border-radius: 12px; background: var(--card); border: 1px solid var(--line); font-size: .85rem; }
.ch-diff small { color: var(--muted); font-weight: 700; } .ch-diff .win { color: var(--good); }
.ch-xis { width: 100%; border-collapse: collapse; font-size: .85rem; }
.ch-xis th { text-align: left; color: var(--muted); font-size: .75rem; padding: 4px 6px; } .ch-xis td { padding: 5px 6px; border-top: 1px solid var(--line); }
.ch-xis .pos { color: var(--muted); font-weight: 800; font-size: .75rem; width: 34px; } .ch-xis .win b { color: var(--good); }
.ch-wild { display: flex; justify-content: space-between; gap: 10px; font-size: .85rem; margin: 8px 0; }
.ch-table { display: grid; gap: 4px; }
.ch-row { display: flex; align-items: center; gap: 8px; padding: 9px 10px; border-radius: 12px; background: var(--card); border: 1px solid var(--line); color: var(--text); text-decoration: none; }
.ch-row small { color: var(--muted); } .ch-row .ch-score { margin-left: auto; font: 700 1.1rem Oswald, sans-serif; }
.ch-row .ch-rank { width: 22px; text-align: center; font-weight: 800; color: var(--muted); }
.ch-row.owner { border-color: var(--accent2); } .ch-row.live { border-style: dashed; }
.ch-bubble { margin: 8px 0; padding: 10px 12px; border-radius: 14px; background: var(--card); border: 1px solid var(--line); font-size: .9rem; }
.ch-reacts { display: flex; flex-wrap: wrap; gap: 6px; justify-content: center; }
.ch-bo3 { display: flex; justify-content: space-between; align-items: center; gap: 8px; padding: 10px 12px; margin: 8px 0; border-radius: 14px; background: rgba(255, 210, 63, .12); border: 1px solid rgba(255, 210, 63, .4); }
.ch-bo3 span { font: 700 1.1rem Oswald, sans-serif; }
.ch-sent { display: grid; gap: 6px; text-align: center; padding: 12px; border-radius: 14px; background: var(--card); border: 2px solid var(--accent2); }
.ch-sent small { color: var(--muted); }
.ch-facts { display: grid; gap: 6px; margin: 8px 0; }
.ch-facts a { display: grid; gap: 2px; padding: 10px 12px; border-radius: 12px; background: var(--card); border: 1px solid var(--line); color: var(--text); text-decoration: none; }
.ch-facts span { color: var(--muted); font-size: .85rem; }
.ch-tally { display: inline-block; margin-left: 6px; padding: 1px 7px; border-radius: 999px; background: rgba(255, 210, 63, .15); color: var(--text); font: 700 .72rem Inter, sans-serif; text-decoration: none; }
.live-dot { display: inline-block; width: 9px; height: 9px; border-radius: 50%; background: var(--bad); margin-right: 4px; animation: live-blink 1.2s ease-in-out infinite; }
@keyframes live-blink { 50% { opacity: .3; } }
/* CHALLENGE MODE: red and black, the versus card, the lead changing hands */
body.ch-mode .page-draft .topbar h2 .ch-pill { background: #dc2626; color: #fff; }
body.ch-mode .page-draft .pitch { box-shadow: 0 0 0 2px #dc2626, 0 0 22px rgba(220, 38, 38, .45); }
.page-draft .banner.ch-ghost, .banner.ch-ghost { background: linear-gradient(90deg, #111827, #3f0d0d); border-color: #dc2626; color: #fff; }
.ch-ghost .chg-spoil { background: rgba(255, 255, 255, .12); }
.page-draft .banner.ch-ghost.behind { background: linear-gradient(90deg, #3f0d0d, #111827); }
.ch-ghost.flash { animation: chg-flash .5s ease-in-out 3; }
@keyframes chg-flash { 50% { box-shadow: 0 0 0 3px #facc15, 0 0 24px rgba(250, 204, 21, .6); } }
.ch-ghost .chg-last { flex-basis: 100%; font-weight: 800; color: #fde68a; }
.ch-intro { position: fixed; inset: 0; z-index: 220; display: flex; align-items: center; justify-content: center; padding: 16px; background: radial-gradient(circle at 50% 40%, #7f1d1d, #0b0b0f 70%); transition: opacity .4s; }
.ch-intro.out { opacity: 0; pointer-events: none; }
.chi-card { display: flex; flex-direction: column; align-items: center; gap: 14px; color: #fff; text-align: center; }
.chi-tag { font: 700 1rem Oswald, sans-serif; letter-spacing: 4px; padding: 6px 14px; border-radius: 999px; background: #dc2626; box-shadow: 0 0 24px rgba(220, 38, 38, .7); animation: chi-pulse 1s ease-in-out infinite; }
@keyframes chi-pulse { 50% { transform: scale(1.06); } }
.chi-vs { display: flex; align-items: center; gap: 18px; }
.chi-vs span { display: flex; flex-direction: column; align-items: center; gap: 6px; font: 700 1.1rem Oswald, sans-serif; }
.chi-vs i { font: 700 2.4rem Oswald, sans-serif; font-style: normal; color: #facc15; text-shadow: 0 0 18px rgba(250, 204, 21, .7); }
.chi-goal { font-size: 1.05rem; } .chi-goal b { font: 700 1.6rem Oswald, sans-serif; color: #facc15; }
.chi-count { font: 700 4.5rem Oswald, sans-serif; line-height: 1; }
.chi-count.pop { animation: chi-pop .5s ease-out; } .chi-count.go { color: #4ade80; animation: chi-pop .5s ease-out; }
@keyframes chi-pop { from { transform: scale(1.8); opacity: 0; } }
.chi-card small { color: rgba(255, 255, 255, .6); }
.ch-verdict.revealing .ch-scores b { color: var(--muted); }
.ch-verdict.won { border-color: var(--good); box-shadow: 0 0 22px rgba(61, 220, 132, .35); }
.ch-verdict.lost { border-color: var(--bad); } .ch-verdict.drew { border-color: var(--accent2); }
.ch-verdict.won > b, .ch-verdict.lost > b, .ch-verdict.drew > b { animation: chi-pop .5s ease-out; }
/* your challenges list (Online tab, #/challenges) */
.ch-mine .ch-who { display: flex; align-items: center; gap: 8px; min-width: 0; }
.ch-mine .ch-who > span { display: grid; min-width: 0; }
.ch-mine .ch-who b { font-size: .9rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ch-mine .ch-who small { font-size: .75rem; line-height: 1.3; } .ch-mine .ch-who small .live { color: var(--good); }
.ch-mine .ch-score { white-space: nowrap; font-size: 1rem; }
.more-link { display: block; text-align: right; margin: 6px 2px 0; font-weight: 700; font-size: .85rem; }
.ch-recs { display: flex; gap: 8px; overflow-x: auto; padding-bottom: 6px; margin-bottom: 8px; }
.ch-recs a { flex: 0 0 auto; display: grid; justify-items: center; gap: 2px; padding: 8px 12px; border-radius: 12px; background: var(--card); border: 1px solid var(--line); color: var(--text); text-decoration: none; }
.ch-recs small { color: var(--muted); font-weight: 700; }
.ch-pick { display: grid; grid-template-columns: repeat(auto-fill, minmax(84px, 1fr)); gap: 8px; margin: 10px 0; max-height: 46vh; overflow-y: auto; }
.ch-pick button { display: grid; justify-items: center; gap: 3px; padding: 8px 4px; border-radius: 12px; background: var(--card); border: 2px solid var(--line); color: var(--text); font: 700 .8rem Inter, sans-serif; cursor: pointer; }
.ch-pick button span { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ch-pick button i { font-style: normal; font-size: .7rem; color: var(--good); min-height: .9em; }
.ch-pick button.on { border-color: var(--accent); background: rgba(198, 255, 58, .14); }
.ch-pick button.on i::before { content: '✓ picked'; }
.ch-pick button.done { opacity: .6; }
/* phones: no scrollbar lines anywhere (they're only in the way on a touch screen) */
@media (pointer: coarse) { html, body, * { scrollbar-width: none; } ::-webkit-scrollbar { display: none; width: 0; height: 0; } }
.ch-from td small { display: block; color: var(--muted); font-size: .7rem; font-weight: 600; }
.ch-from td:nth-child(n+2), .ch-from th:nth-child(n+2) { text-align: right; white-space: nowrap; font-weight: 700; }
.ch-from .win { color: var(--good); } .ch-from .tot td { font: 700 1rem Oswald, sans-serif; }
.ch-lucks { display: grid; gap: 6px; margin: 6px 0 4px; }
.ch-luck { display: grid; gap: 2px; padding: 8px 10px; border-radius: 12px; background: var(--card); border: 1px solid var(--line); font-size: .82rem; }
.ch-luck small { color: var(--muted); font-weight: 800; } .ch-luck .neg { color: #e5484d; } .ch-luck .pos { color: var(--good); }

/* ================================================================ 🎒 the Locker (locker.js) and the season (rewards.js) */
/* pitch styles: body.pk-<style> (CHAOS weather still wins: .pitch.wx-* is more specific) */
body.pk-night .pitch, .lk-pre.pk-night .lk-pitch { background: radial-gradient(ellipse at 20% -10%, rgba(255, 255, 230, .35), transparent 45%), radial-gradient(ellipse at 80% -10%, rgba(255, 255, 230, .35), transparent 45%), repeating-linear-gradient(180deg, #11502f 0 34px, #0e4628 34px 68px); }
body.pk-retro .pitch, .lk-pre.pk-retro .lk-pitch { background: repeating-linear-gradient(180deg, #6f9a3c 0 34px, #658f35 34px 68px); filter: saturate(.8) sepia(.18); }
body.pk-snow .pitch, .lk-pre.pk-snow .lk-pitch { background: radial-gradient(circle at 25% 30%, rgba(255, 255, 255, .5), transparent 30%), radial-gradient(circle at 75% 70%, rgba(255, 255, 255, .45), transparent 32%), repeating-linear-gradient(180deg, #4f9a72 0 34px, #48916a 34px 68px); }
body.pk-mud .pitch, .lk-pre.pk-mud .lk-pitch { background: radial-gradient(ellipse at 50% 50%, #6b4a2b 0 18%, transparent 40%), radial-gradient(ellipse at 50% 92%, #6b4a2b 0 12%, transparent 30%), radial-gradient(ellipse at 50% 8%, #6b4a2b 0 12%, transparent 30%), repeating-linear-gradient(180deg, #3f6b35 0 34px, #3a6331 34px 68px); }
body.pk-astro .pitch, .lk-pre.pk-astro .lk-pitch { background: repeating-linear-gradient(90deg, #22b35a 0 22px, #1fa553 22px 44px); }
body.pk-beach .pitch, .lk-pre.pk-beach .lk-pitch { background: radial-gradient(circle at 15% 85%, rgba(255, 255, 255, .25), transparent 25%), repeating-linear-gradient(180deg, #e8c983 0 34px, #e0bf76 34px 68px); }
body.pk-beach .pitch .slot.filled { background: rgba(60, 38, 10, .42); }  /* names stay white like everywhere; a darker box makes them read on sand */
body.pk-neon .pitch, .lk-pre.pk-neon .lk-pitch { background: repeating-linear-gradient(180deg, #0b1020 0 34px, #0e1428 34px 68px); box-shadow: 0 0 0 2px #22d3ee, 0 0 22px rgba(34, 211, 238, .45); }
body.pk-neon .pitch .pitch-lines { filter: drop-shadow(0 0 3px #22d3ee) hue-rotate(160deg) brightness(1.4); }
body.pk-gold .pitch, .lk-pre.pk-gold .lk-pitch { background: linear-gradient(115deg, transparent 30%, rgba(255, 255, 255, .25) 45%, transparent 60%), repeating-linear-gradient(180deg, #b8912a 0 34px, #a9831f 34px 68px); }
body.pk-club .pitch, .lk-pre.pk-club .lk-pitch { background: linear-gradient(rgba(0, 0, 0, .28), rgba(0, 0, 0, .28)), repeating-linear-gradient(180deg, var(--club1, #16803c) 0 34px, color-mix(in srgb, var(--club1, #16803c) 80%, var(--club2, #fff)) 34px 68px); }
/* card backs: body.cbk-<style> */
body.cbk-carbon .pc-back, .lk-pre.cbk-carbon .lk-back { background: repeating-linear-gradient(45deg, #1c1f24 0 .35em, #262a31 .35em .7em), #1c1f24; box-shadow: inset 0 0 0 .3em #9ca3af; }
body.cbk-retro .pc-back, .lk-pre.cbk-retro .lk-back { background: repeating-linear-gradient(0deg, #f4e9d0 0 .5em, #efe1c1 .5em 1em); box-shadow: inset 0 0 0 .3em #c2410c; }
body.cbk-retro .pcb-ring, .lk-pre.cbk-retro .lk-back b { background: #c2410c; border-color: #fde68a; }
body.cbk-chaos .pc-back, .lk-pre.cbk-chaos .lk-back { background: conic-gradient(from 0deg, #0e1428, #22d3ee, #0e1428, #a855f7, #0e1428); box-shadow: inset 0 0 0 .3em #22d3ee; }
body.cbk-night .pc-back, .lk-pre.cbk-night .lk-back { background: radial-gradient(circle at 20% 30%, #fff 0 1px, transparent 2px), radial-gradient(circle at 70% 60%, #fff 0 1px, transparent 2px), radial-gradient(circle at 40% 80%, #fff 0 1px, transparent 2px), linear-gradient(#0b1638, #1e3a8a); box-shadow: inset 0 0 0 .3em #93c5fd; }
body.cbk-holo .pc-back, .lk-pre.cbk-holo .lk-back { background: linear-gradient(120deg, #f0abfc, #93c5fd, #6ee7b7, #fde68a, #f0abfc); background-size: 300% 300%; animation: holo 4s linear infinite; box-shadow: inset 0 0 0 .3em #fff; }
@keyframes holo { to { background-position: 300% 0; } }
body.cbk-gold .pc-back, .lk-pre.cbk-gold .lk-back { background: linear-gradient(135deg, #fde68a, #b45309 45%, #fde68a 70%, #92400e); box-shadow: inset 0 0 0 .3em #fff7d6; }
body.cbk-club .pc-back, .lk-pre.cbk-club .lk-back { background: repeating-linear-gradient(90deg, var(--club1, #16803c) 0 .8em, var(--club2, #fff) .8em 1.1em); box-shadow: inset 0 0 0 .3em var(--club2, #fff); }
body.cbk-club .pcb-ring, .lk-pre.cbk-club .lk-back b { background: var(--club1, #16803c); border-color: var(--club2, #fff); }
/* frames round a picture (everyone's, from get_flair) */
.avatar.fr-silver, .fr-silver .avatar { box-shadow: 0 0 0 2px #e5e7eb, 0 0 0 4px #9ca3af; }
.avatar.fr-gold, .fr-gold .avatar { box-shadow: 0 0 0 2px #fde047, 0 0 0 4px #b45309, 0 0 10px rgba(250, 204, 21, .6); }
.avatar.fr-neon, .fr-neon .avatar { box-shadow: 0 0 0 2px #22d3ee, 0 0 12px #22d3ee, 0 0 22px rgba(168, 85, 247, .6); }
.avatar.fr-fire, .fr-fire .avatar { box-shadow: 0 0 0 2px #f97316, 0 0 12px #ef4444; animation: fr-fire 1.2s ease-in-out infinite alternate; }
@keyframes fr-fire { to { box-shadow: 0 0 0 2px #fde047, 0 0 18px #f97316; } }
.avatar.fr-chaos, .fr-chaos .avatar { box-shadow: 0 0 0 2px #22d3ee, 0 0 0 4px #a855f7, 0 0 14px rgba(34, 211, 238, .7); }
.avatar.fr-legend, .fr-legend .avatar { box-shadow: 0 0 0 2px #e9d5ff, 0 0 0 4px #9333ea, 0 0 14px rgba(168, 85, 247, .8); }
.avatar.fr-club, .fr-club .avatar { box-shadow: 0 0 0 2px var(--club2, #fff), 0 0 0 4px var(--club1, #16803c); }
body.calm .avatar.fr-fire { animation: none; }
/* titles */
.utitle { display: block; font: 700 .68rem Inter, sans-serif; font-style: normal; letter-spacing: .04em; text-transform: uppercase; color: var(--accent2, #f5c542); line-height: 1.2; }
.utitle[hidden] { display: none; }
.lb-row .utitle { display: inline-block; margin-left: 6px; font-size: .6rem; opacity: .9; }
/* the Locker page */
.lk-me { display: flex; align-items: center; gap: 12px; padding: 12px; border-radius: 16px; background: var(--card); border: 1px solid var(--line); margin-bottom: 10px; }
.lk-me > span { display: grid; gap: 2px; } .lk-me b { font: 700 1.2rem Oswald, sans-serif; } .lk-me small { color: var(--muted); }
.lk-tabs button { position: relative; font-size: .78rem; }
.lk-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(104px, 1fr)); gap: 8px; margin-top: 8px; }
.lk-item { display: grid; justify-items: center; gap: 4px; padding: 10px 6px; border-radius: 14px; background: var(--card); border: 2px solid var(--line); color: var(--text); cursor: pointer; text-align: center; font: inherit; }
.lk-item b { font-size: .8rem; line-height: 1.2; } .lk-item small { font-size: .66rem; color: var(--muted); line-height: 1.25; }
.lk-item.on { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 14%, var(--card)); }
.lk-item.locked { opacity: .55; } .lk-item.locked .lk-pre { filter: grayscale(.8); }
.lk-pre { width: 72px; height: 54px; display: grid; place-items: center; font-size: 1.9rem; border-radius: 10px; }
.lk-pitch { width: 100%; height: 100%; border-radius: 8px; border: 2px solid rgba(255, 255, 255, .5); background: repeating-linear-gradient(180deg, #1c7a4a 0 9px, #1a7045 9px 18px); }
.lk-back { width: 40px; height: 54px; border-radius: 6px; display: grid; place-items: center; background: repeating-linear-gradient(45deg, #0b3d2e 0 .5em, #0f4b39 .5em 1em); box-shadow: inset 0 0 0 .2em #d4af37; font-style: normal; }
.lk-back b { font: 700 .7rem Oswald, sans-serif; color: #fde047; width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; background: #07261d; border: 2px solid #d4af37; }
.lk-title .utitle, .lk-pre .utitle { font-size: .62rem; text-align: center; }
.lk-pre .avatar { width: 40px; height: 40px; }
.new-tag { font-style: normal; font-size: .55rem; padding: 1px 4px; border-radius: 4px; background: #ef4444; color: #fff; vertical-align: middle; }
/* the season chip on Home, and the season page */
.season-chip { display: inline-flex; align-items: center; gap: 4px; position: relative; padding: 2px 8px; border-radius: 999px; background: rgba(250, 204, 21, .16); color: inherit; text-decoration: none; font: 700 .78rem Inter, sans-serif; }
.season-chip .new-dot { position: absolute; top: -2px; right: -2px; }
.st-hero { display: grid; gap: 6px; justify-items: center; text-align: center; padding: 16px; border-radius: 18px; background: linear-gradient(135deg, #7c2d12, #b45309 55%, #f59e0b); color: #fff; }
.st-hero > b { font: 700 1.8rem Oswald, sans-serif; letter-spacing: .02em; } .st-hero small { opacity: .9; }
.st-lvl { display: grid; grid-template-columns: auto 1fr auto; gap: 8px; align-items: center; width: 100%; font-size: .85rem; }
.st-lvl .bar, .st-m .bar { height: 8px; border-radius: 999px; background: rgba(0, 0, 0, .25); overflow: hidden; } .st-lvl .bar i, .st-m .bar i { display: block; height: 100%; background: #fde047; }
.st-m .bar { background: var(--inset); } .st-m .bar i { background: var(--accent); }
.st-missions { display: grid; gap: 6px; }
.st-m { display: grid; grid-template-columns: auto 1fr auto; gap: 10px; align-items: center; padding: 10px 12px; border-radius: 14px; background: var(--card); border: 1px solid var(--line); }
.st-m > span:nth-child(2) { display: grid; gap: 5px; } .st-m b { font-size: .88rem; } .st-m small { font-weight: 700; color: var(--muted); } .st-m.done { opacity: .7; }
.st-login { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; }
.st-login > div { display: grid; justify-items: center; gap: 2px; padding: 6px 2px; border-radius: 10px; background: var(--card); border: 1px solid var(--line); text-align: center; }
.st-login span { font-size: 1.2rem; } .st-login b { font-size: .55rem; line-height: 1.15; } .st-login small { font-size: .6rem; color: var(--muted); }
.st-login .got { opacity: .45; } .st-login .today { border: 2px solid var(--accent); background: color-mix(in srgb, var(--accent) 14%, var(--card)); }
.st-track { display: grid; gap: 4px; }
.st-tier { display: grid; grid-template-columns: 34px 1fr; align-items: center; gap: 8px; padding: 8px 10px; border-radius: 12px; background: var(--card); border: 1px solid var(--line); font-size: .85rem; }
.st-tier span { font: 700 1rem Oswald, sans-serif; color: var(--muted); text-align: center; }
.st-tier.item { border-color: rgba(250, 204, 21, .6); } .st-tier.got { opacity: .5; } .st-tier.got span::after { content: ' ✓'; color: var(--good); }
.st-tier.next { border: 2px solid var(--accent); opacity: 1; }
.cb-mgr.locked { opacity: .6; text-decoration: none; color: inherit; }
/* ================================================================ 🎁 prizes (prizes.js): the wheel, the road, pick one, a pack's bonus, events */
.st-prizes { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin: 10px 0; }
.st-p { display: grid; justify-items: center; gap: 1px; padding: 10px 4px; border-radius: 14px; background: var(--card); border: 1px solid var(--line); color: var(--text); text-decoration: none; font: inherit; cursor: pointer; }
.st-p span { font-size: 1.5rem; } .st-p b { font: 700 1.3rem Oswald, sans-serif; } .st-p small { color: var(--muted); font-size: .7rem; } .st-p:disabled { opacity: .5; }
.wh-wrap { position: relative; width: min(82vw, 320px); aspect-ratio: 1; margin: 18px auto 10px; }
.wh-pointer { position: absolute; top: -18px; left: 50%; transform: translateX(-50%); font-size: 1.8rem; color: var(--accent2, #f5c542); z-index: 2; text-shadow: 0 2px 4px rgba(0, 0, 0, .4); }
.wh-clip { width: 100%; height: 100%; border-radius: 50%; overflow: hidden; box-shadow: 0 6px 24px rgba(0, 0, 0, .35); }  /* (the spinning square's corners can't push the page sideways) */
.wh-won { text-align: center; margin: 4px auto 6px; padding: 10px 14px; border-radius: 16px; background: var(--panel); border: 2px solid var(--accent); width: fit-content; max-width: 92%; display: flex; flex-direction: column; gap: 2px; }
.wh-won small { color: var(--muted); font-weight: 700; } .wh-won b { font-size: 1.15rem; }
.wh-won.pop { animation: pw-in .45s cubic-bezier(.2, 1.4, .4, 1); }
.wh { width: 100%; height: 100%; border-radius: 50%; overflow: hidden; border: 6px solid #fff; box-shadow: inset 0 0 0 4px rgba(0, 0, 0, .15); position: relative; transition: transform 3.4s cubic-bezier(.12, .8, .14, 1); }
.wh > span { position: absolute; inset: 0; display: flex; justify-content: center; padding-top: 10%; pointer-events: none; }
.wh > span i { font-style: normal; font-size: 1.6rem; filter: drop-shadow(0 2px 2px rgba(0, 0, 0, .4)); }
.wh::after { content: '⚽'; position: absolute; inset: 38%; display: grid; place-items: center; border-radius: 50%; background: #fff; font-size: 1.6rem; }
.wh-key { display: grid; grid-template-columns: 1fr 1fr; gap: 4px 10px; font-size: .78rem; margin-top: 8px; }
.wh-key span { display: flex; gap: 6px; align-items: center; } .wh-key i { width: 12px; height: 12px; border-radius: 3px; flex: none; }
body.calm .wh { transition-duration: .2s; }
.road { display: flex; gap: 6px; overflow-x: auto; padding: 4px 2px 10px; scrollbar-width: none; }
.road-n { flex: 0 0 96px; display: grid; gap: 4px; justify-items: center; text-align: center; padding: 10px 6px; border-radius: 14px; background: var(--card); border: 1px solid var(--line); position: relative; }
.road-n span { font: 700 1.2rem Oswald, sans-serif; width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; background: var(--inset); }
.road-n b { font-size: .7rem; line-height: 1.25; } .road-n.got { opacity: .5; } .road-n.got span { background: var(--good); color: #fff; }
.road-n.next { border: 2px solid var(--accent); } .road-n.next span { background: var(--accent); color: #0a2a1f; }
.rw-opts { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin: 10px 0; }
.rw-opt { display: grid; gap: 6px; justify-items: center; padding: 14px 6px; border-radius: 14px; border: 2px solid var(--line); background: var(--card); color: var(--text); font: inherit; cursor: pointer; }
.rw-opt span { font-size: 2rem; } .rw-opt b { font-size: .8rem; line-height: 1.2; } .rw-opt:active { border-color: var(--accent); }
.po-bonus { display: grid; gap: 2px; justify-items: center; margin: 0 auto 8px; padding: 10px 16px; border-radius: 14px; background: linear-gradient(135deg, #7c3aed, #db2777); color: #fff; box-shadow: 0 0 22px rgba(219, 39, 119, .5); animation: pop .4s; }
.po-bonus small { opacity: .85; font-weight: 700; } .po-bonus b { font: 700 1.1rem Oswald, sans-serif; }
.ev-card { display: grid; gap: 6px; padding: 14px; margin: 10px 0; border-radius: 18px; color: #fff; text-align: center; justify-items: center; }
.ev-card > b { font: 700 1.5rem Oswald, sans-serif; } .ev-card small { opacity: .85; }
.ev-spooky { background: radial-gradient(circle at 80% 10%, rgba(250, 204, 21, .3), transparent 30%), linear-gradient(135deg, #1e1b4b, #581c87 55%, #c2410c); }
.ev-track { display: grid; grid-template-columns: repeat(10, 1fr); gap: 3px; width: 100%; }
.ev-track span { display: grid; justify-items: center; padding: 4px 0; border-radius: 8px; background: rgba(255, 255, 255, .12); font-size: 1rem; }
.ev-track span small { font-size: .55rem; } .ev-track .got { opacity: .45; } .ev-track .item { background: rgba(250, 204, 21, .3); }
/* the vault's and the event's looks */
body.pk-wembley .pitch, .lk-pre.pk-wembley .lk-pitch { background: repeating-linear-gradient(90deg, rgba(255, 255, 255, .06) 0 20px, transparent 20px 40px), repeating-linear-gradient(180deg, #23914f 0 34px, #1e8247 34px 68px); }
body.pk-haunted .pitch, .lk-pre.pk-haunted .lk-pitch { background: radial-gradient(ellipse at 50% 100%, rgba(167, 139, 250, .35), transparent 60%), radial-gradient(circle at 85% 10%, #fde68a 0 3%, transparent 4%), repeating-linear-gradient(180deg, #1f2937 0 34px, #1a2230 34px 68px); }
body.cbk-comic .pc-back, .lk-pre.cbk-comic .lk-back { background: radial-gradient(circle, #fde047 25%, transparent 26%) 0 0 / .7em .7em, #ef4444; box-shadow: inset 0 0 0 .3em #111; }
body.cbk-spooky .pc-back, .lk-pre.cbk-spooky .lk-back { background: repeating-radial-gradient(circle at 0 0, transparent 0 .8em, rgba(255, 255, 255, .25) .8em .85em), repeating-conic-gradient(from 0deg at 0 0, transparent 0 10deg, rgba(255, 255, 255, .2) 10deg 11deg), #1e1b4b; box-shadow: inset 0 0 0 .3em #f97316; }
.avatar.fr-rainbow, .fr-rainbow .avatar { box-shadow: 0 0 0 2px #fff, 0 0 0 5px transparent; background-clip: padding-box; outline: 3px solid; outline-color: #ef4444; animation: fr-rainbow 3s linear infinite; }
@keyframes fr-rainbow { 0% { outline-color: #ef4444; } 20% { outline-color: #f59e0b; } 40% { outline-color: #22c55e; } 60% { outline-color: #3b82f6; } 80% { outline-color: #a855f7; } 100% { outline-color: #ef4444; } }
.avatar.fr-pumpkin, .fr-pumpkin .avatar { box-shadow: 0 0 0 2px #fdba74, 0 0 0 5px #ea580c, 0 0 12px rgba(234, 88, 12, .7); }
body.calm .avatar.fr-rainbow { animation: none; }
/* ================================================================ the seasons ahead (rewards.js SEASONS): their items' looks */
body.pk-ucl .pitch, .lk-pre.pk-ucl .lk-pitch { background: radial-gradient(circle at 50% 50%, rgba(255, 255, 255, .18) 0 9%, transparent 10%), radial-gradient(circle at 20% 20%, #fff 0 1px, transparent 2px), radial-gradient(circle at 80% 30%, #fff 0 1px, transparent 2px), radial-gradient(circle at 60% 80%, #fff 0 1px, transparent 2px), repeating-linear-gradient(180deg, #0b2a5b 0 34px, #0a2550 34px 68px); }
body.pk-xmas .pitch, .lk-pre.pk-xmas .lk-pitch { background: radial-gradient(circle at 10% 4%, #fde047 0 2px, transparent 3px), radial-gradient(circle at 30% 4%, #ef4444 0 2px, transparent 3px), radial-gradient(circle at 50% 4%, #22c55e 0 2px, transparent 3px), radial-gradient(circle at 70% 4%, #3b82f6 0 2px, transparent 3px), radial-gradient(circle at 90% 4%, #fde047 0 2px, transparent 3px), radial-gradient(ellipse at 50% 110%, rgba(255, 255, 255, .55), transparent 45%), repeating-linear-gradient(180deg, #2f7a55 0 34px, #2a704e 34px 68px); }
body.pk-deadline .pitch, .lk-pre.pk-deadline .lk-pitch { background: radial-gradient(circle at 50% 50%, transparent 0 16%, rgba(250, 204, 21, .35) 16.5% 17.5%, transparent 18%), repeating-linear-gradient(180deg, #14532d 0 34px, #124a28 34px 68px); }
body.pk-cupnight .pitch, .lk-pre.pk-cupnight .lk-pitch { background: radial-gradient(ellipse at 0 0, rgba(255, 255, 255, .3), transparent 40%), radial-gradient(ellipse at 100% 0, rgba(255, 255, 255, .3), transparent 40%), repeating-linear-gradient(180deg, #15603a 0 34px, #135634 34px 68px); }
body.pk-titlerace .pitch, .lk-pre.pk-titlerace .lk-pitch { background: linear-gradient(180deg, rgba(251, 146, 60, .35), transparent 50%), repeating-linear-gradient(180deg, #1c7a4a 0 34px, #1a7045 34px 68px); }
body.pk-spring .pitch, .lk-pre.pk-spring .lk-pitch { background: radial-gradient(circle at 6% 50%, #f9a8d4 0 3px, transparent 4px), radial-gradient(circle at 94% 30%, #fde68a 0 3px, transparent 4px), radial-gradient(circle at 94% 70%, #c4b5fd 0 3px, transparent 4px), radial-gradient(circle at 6% 85%, #fde68a 0 3px, transparent 4px), repeating-linear-gradient(180deg, #34a35d 0 34px, #2f9755 34px 68px); }
body.pk-trophyday .pitch, .lk-pre.pk-trophyday .lk-pitch { background: repeating-linear-gradient(135deg, rgba(250, 204, 21, .14) 0 12px, transparent 12px 40px), repeating-linear-gradient(180deg, #1c7a4a 0 34px, #1a7045 34px 68px); }
body.pk-summer .pitch, .lk-pre.pk-summer .lk-pitch { background: radial-gradient(circle at 88% 8%, rgba(253, 224, 71, .7) 0 6%, transparent 25%), repeating-linear-gradient(180deg, #3cb371 0 34px, #35a866 34px 68px); }
body.cbk-starball .pc-back, .lk-pre.cbk-starball .lk-back { background: radial-gradient(circle, #fff 0 8%, transparent 9%) 0 0 / 1.4em 1.4em, #0b2a5b; box-shadow: inset 0 0 0 .3em #c0c0c0; }
body.cbk-wrapping .pc-back, .lk-pre.cbk-wrapping .lk-back { background: linear-gradient(90deg, transparent 45%, #fde047 45% 55%, transparent 55%), linear-gradient(transparent 45%, #fde047 45% 55%, transparent 55%), repeating-linear-gradient(45deg, #b91c1c 0 .6em, #dc2626 .6em 1.2em); box-shadow: inset 0 0 0 .3em #166534; }
body.cbk-contract .pc-back, .lk-pre.cbk-contract .lk-back { background: repeating-linear-gradient(180deg, #fffbeb 0 .55em, #e7e5e4 .55em .6em); box-shadow: inset 0 0 0 .3em #1e3a8a; }
body.cbk-ribbons .pc-back, .lk-pre.cbk-ribbons .lk-back { background: repeating-linear-gradient(60deg, #dc2626 0 .7em, #fff .7em 1.4em, #1d4ed8 1.4em 2.1em); box-shadow: inset 0 0 0 .3em #c0c0c0; }
body.cbk-chequered .pc-back, .lk-pre.cbk-chequered .lk-back { background: conic-gradient(#111 25%, #fff 0 50%, #111 0 75%, #fff 0) 0 0 / 1.2em 1.2em; box-shadow: inset 0 0 0 .3em #facc15; }
body.cbk-egg .pc-back, .lk-pre.cbk-egg .lk-back { background: linear-gradient(135deg, #f9a8d4 25%, transparent 25%) -.6em 0 / 1.2em 1.2em, linear-gradient(225deg, #f9a8d4 25%, transparent 25%) -.6em 0 / 1.2em 1.2em, #a7f3d0; box-shadow: inset 0 0 0 .3em #c4b5fd; }
body.cbk-medal .pc-back, .lk-pre.cbk-medal .lk-back { background: radial-gradient(circle, #fde047 0 30%, #b45309 31% 34%, transparent 35%), linear-gradient(180deg, #dc2626 0 30%, #1d4ed8 30% 60%, #0b3d2e 60%); box-shadow: inset 0 0 0 .3em #fde047; }
body.cbk-tropical .pc-back, .lk-pre.cbk-tropical .lk-back { background: radial-gradient(circle at 30% 30%, #f97316 0 18%, transparent 19%), repeating-linear-gradient(120deg, #14b8a6 0 .6em, #0d9488 .6em 1.2em); box-shadow: inset 0 0 0 .3em #fde047; }
.avatar.fr-starry, .fr-starry .avatar { box-shadow: 0 0 0 2px #e5e7eb, 0 0 0 4px #0b2a5b, 0 0 12px rgba(147, 197, 253, .8); }
.avatar.fr-holly, .fr-holly .avatar { box-shadow: 0 0 0 2px #dc2626, 0 0 0 4px #166534, 0 0 0 6px #dc2626; }
.avatar.fr-cash, .fr-cash .avatar { box-shadow: 0 0 0 2px #bbf7d0, 0 0 0 4px #15803d, 0 0 10px rgba(34, 197, 94, .6); }
.avatar.fr-cup, .fr-cup .avatar { box-shadow: 0 0 0 2px #fff, 0 0 0 4px #9ca3af, 0 0 0 6px #dc2626; }
.avatar.fr-champion, .fr-champion .avatar { box-shadow: 0 0 0 2px #fde047, 0 0 0 4px #15803d, 0 0 12px rgba(250, 204, 21, .6); }
.avatar.fr-pastel, .fr-pastel .avatar { box-shadow: 0 0 0 2px #f9a8d4, 0 0 0 4px #a7f3d0, 0 0 0 6px #c4b5fd; }
.avatar.fr-medal, .fr-medal .avatar { box-shadow: 0 0 0 3px #fde047, 0 0 0 5px #b45309, 0 0 14px rgba(250, 204, 21, .8); }
.avatar.fr-sun, .fr-sun .avatar { box-shadow: 0 0 0 2px #fde047, 0 0 14px 4px rgba(251, 146, 60, .7); }
.st-next { display: grid; gap: 6px; }
.st-next > div { display: grid; grid-template-columns: 34px 1fr; column-gap: 8px; padding: 10px 12px; border-radius: 14px; background: var(--card); border: 1px solid var(--line); }
.st-next > div > span { grid-row: span 3; font-size: 1.6rem; align-self: center; } .st-next small { color: var(--muted); font-size: .76rem; } .st-next .st-teas { color: var(--accent2, #f5c542); font-weight: 700; }
/* the season's look (html.sz-<theme>): a strip of its emojis along the top, a tint on Home's hero and the season chip */
/* the season's band along the top: its colours with a soft sheen, no emoji (the season's character comes from drawn art: the cobweb, the visitors) */
html[class*="sz-"]:not(.intl-break) body::after { content: ''; position: fixed; top: 0; left: 0; right: 0; height: 7px; z-index: 46; pointer-events: none;
  background: linear-gradient(180deg, rgba(255, 255, 255, .28), rgba(255, 255, 255, 0) 55%, rgba(0, 0, 0, .25)), var(--sz-strip, transparent);
  box-shadow: 0 1px 6px rgba(0, 0, 0, .25); }
html.sz-halloween:not(.intl-break) body::after { --sz-strip: linear-gradient(90deg, #1e1b4b, #581c87, #c2410c); }
html.sz-champions:not(.intl-break) body::after { --sz-strip: linear-gradient(90deg, #0b2a5b, #1e3a8a, #0b2a5b); }
html.sz-christmas:not(.intl-break) body::after { --sz-strip: linear-gradient(90deg, #991b1b, #166534, #991b1b); }
html.sz-window:not(.intl-break) body::after { --sz-strip: linear-gradient(90deg, #14532d, #1f2937, #14532d); }
html.sz-cup:not(.intl-break) body::after { --sz-strip: linear-gradient(90deg, #b91c1c, #f8fafc, #1d4ed8); }
html.sz-title:not(.intl-break) body::after { --sz-strip: linear-gradient(90deg, #111827, #f97316, #111827); }
html.sz-easter:not(.intl-break) body::after { --sz-strip: linear-gradient(90deg, #f9a8d4, #a7f3d0, #c4b5fd); }
html.sz-finalday:not(.intl-break) body::after { --sz-strip: linear-gradient(90deg, #b45309, #fde047, #b45309); }
html.sz-summer:not(.intl-break) body::after { --sz-strip: linear-gradient(90deg, #0ea5e9, #fde047, #0ea5e9); }
html.sz-halloween .season-chip { background: linear-gradient(90deg, #581c87, #c2410c); color: #fff; }
html.sz-champions .season-chip { background: linear-gradient(90deg, #0b2a5b, #1e40af); color: #fff; }
html.sz-christmas .season-chip { background: linear-gradient(90deg, #b91c1c, #166534); color: #fff; }
html.sz-easter .season-chip { background: linear-gradient(90deg, #f9a8d4, #c4b5fd); color: #3b0764; }
html.sz-halloween .st-hero { background: radial-gradient(circle at 85% 10%, rgba(250, 204, 21, .35), transparent 30%), linear-gradient(135deg, #1e1b4b, #581c87 55%, #c2410c); }
html.sz-champions .st-hero, html.sz-finalday .st-hero { background: radial-gradient(circle at 20% 20%, rgba(255, 255, 255, .3) 0 2px, transparent 3px), linear-gradient(135deg, #0b2a5b, #1e40af 60%, #c0c0c0); }
html.sz-christmas .st-hero { background: radial-gradient(circle at 20% 30%, rgba(255, 255, 255, .5) 0 2px, transparent 3px), radial-gradient(circle at 70% 60%, rgba(255, 255, 255, .5) 0 2px, transparent 3px), linear-gradient(135deg, #7f1d1d, #b91c1c 50%, #166534); }
html.sz-easter .st-hero { background: linear-gradient(135deg, #db2777, #a78bfa 55%, #34d399); }
html.sz-summer .st-hero { background: linear-gradient(135deg, #0369a1, #0ea5e9 55%, #f59e0b); }
html.sz-window .st-hero { background: linear-gradient(135deg, #14532d, #15803d 55%, #1f2937); }
html.sz-cup .st-hero { background: linear-gradient(135deg, #1d4ed8, #b91c1c); }
html.sz-title .st-hero { background: linear-gradient(135deg, #111827, #c2410c); }
html[class*="sz-"]:not(.intl-break) #app { padding-top: 22px; }
html[class*="sz-"]:not(.intl-break).has-club body::before { top: 7px; }  /* the club scarf sits right under the season band */

/* ================================================================ the season's theme: the whole app's background and panels change
   (not in the Club look, and CHAOS / Moneyball / Hat-Trick keep their own), plus a falling layer on the menus (rewards.js) */
html.sz-halloween[data-theme="dark"]:not(.club-theme) body:not(.chaos-mode):not(.money-mode):not(.ht-mode) { --bg: #140b24; --bg2: #24123d; --panel: #2b1747; --panel2: #361d58; --bg-grad: #5b21b6; --nav: rgba(20,11,36,.94); --modal: #24123d; --muted: #c4b5fd; --accent2: #fb923c; background: radial-gradient(1200px 700px at 50% -220px, var(--bg-grad), var(--bg)) fixed, var(--bg); }
html.sz-halloween[data-theme="light"]:not(.club-theme) body:not(.chaos-mode):not(.money-mode):not(.ht-mode) { --bg: #fff4e6; --bg-grad: #fed7aa; --panel2: #fff7ed; --bg2: #ffffff; background: radial-gradient(1200px 700px at 50% -220px, var(--bg-grad), var(--bg)) fixed, var(--bg); }
html.sz-champions[data-theme="dark"]:not(.club-theme) body:not(.chaos-mode):not(.money-mode):not(.ht-mode) { --bg: #06142e; --bg2: #0b1f45; --panel: #10285a; --panel2: #153170; --bg-grad: #1e40af; --nav: rgba(6,20,46,.94); --modal: #0b1f45; --muted: #a5b4fc; --accent2: #93c5fd; background: radial-gradient(1200px 700px at 50% -220px, var(--bg-grad), var(--bg)) fixed, var(--bg); }
html.sz-champions[data-theme="light"]:not(.club-theme) body:not(.chaos-mode):not(.money-mode):not(.ht-mode) { --bg: #eef3fb; --bg-grad: #c7d7f5; --panel2: #f3f7fe; --bg2: #ffffff; background: radial-gradient(1200px 700px at 50% -220px, var(--bg-grad), var(--bg)) fixed, var(--bg); }
html.sz-christmas[data-theme="dark"]:not(.club-theme) body:not(.chaos-mode):not(.money-mode):not(.ht-mode) { --bg: #0b2016; --bg2: #12301f; --panel: #163d29; --panel2: #1d4a33; --bg-grad: #991b1b; --nav: rgba(11,32,22,.94); --modal: #12301f; --muted: #bbe5c9; --accent2: #fde047; background: radial-gradient(1200px 700px at 50% -220px, var(--bg-grad), var(--bg)) fixed, var(--bg); }
html.sz-christmas[data-theme="light"]:not(.club-theme) body:not(.chaos-mode):not(.money-mode):not(.ht-mode) { --bg: #fdf2f2; --bg-grad: #fecaca; --panel2: #f0f9f2; --bg2: #ffffff; background: radial-gradient(1200px 700px at 50% -220px, var(--bg-grad), var(--bg)) fixed, var(--bg); }
html.sz-window[data-theme="dark"]:not(.club-theme) body:not(.chaos-mode):not(.money-mode):not(.ht-mode) { --bg: #0b1712; --bg2: #13241c; --panel: #183026; --panel2: #1f3b2f; --bg-grad: #166534; --nav: rgba(11,23,18,.94); --modal: #13241c; --muted: #a7c4b5; --accent2: #86efac; background: radial-gradient(1200px 700px at 50% -220px, var(--bg-grad), var(--bg)) fixed, var(--bg); }
html.sz-window[data-theme="light"]:not(.club-theme) body:not(.chaos-mode):not(.money-mode):not(.ht-mode) { --bg: #f0f7f1; --bg-grad: #bbf7d0; --panel2: #f3faf5; --bg2: #ffffff; background: radial-gradient(1200px 700px at 50% -220px, var(--bg-grad), var(--bg)) fixed, var(--bg); }
html.sz-cup[data-theme="dark"]:not(.club-theme) body:not(.chaos-mode):not(.money-mode):not(.ht-mode) { --bg: #0b1224; --bg2: #141d38; --panel: #1a2546; --panel2: #202d55; --bg-grad: #991b1b; --nav: rgba(11,18,36,.94); --modal: #141d38; --muted: #b4bfd8; --accent2: #fca5a5; background: radial-gradient(1200px 700px at 50% -220px, var(--bg-grad), var(--bg)) fixed, var(--bg); }
html.sz-cup[data-theme="light"]:not(.club-theme) body:not(.chaos-mode):not(.money-mode):not(.ht-mode) { --bg: #f4f6fb; --bg-grad: #fecaca; --panel2: #f6f8fc; --bg2: #ffffff; background: radial-gradient(1200px 700px at 50% -220px, var(--bg-grad), var(--bg)) fixed, var(--bg); }
html.sz-title[data-theme="dark"]:not(.club-theme) body:not(.chaos-mode):not(.money-mode):not(.ht-mode) { --bg: #120d0a; --bg2: #211711; --panel: #2a1d15; --panel2: #35251b; --bg-grad: #c2410c; --nav: rgba(18,13,10,.94); --modal: #211711; --muted: #e7c3a8; --accent2: #fb923c; background: radial-gradient(1200px 700px at 50% -220px, var(--bg-grad), var(--bg)) fixed, var(--bg); }
html.sz-title[data-theme="light"]:not(.club-theme) body:not(.chaos-mode):not(.money-mode):not(.ht-mode) { --bg: #fff7ed; --bg-grad: #fed7aa; --panel2: #fffaf3; --bg2: #ffffff; background: radial-gradient(1200px 700px at 50% -220px, var(--bg-grad), var(--bg)) fixed, var(--bg); }
html.sz-easter[data-theme="dark"]:not(.club-theme) body:not(.chaos-mode):not(.money-mode):not(.ht-mode) { --bg: #1d1430; --bg2: #2a1d45; --panel: #32245a; --panel2: #3c2c69; --bg-grad: #be185d; --nav: rgba(29,20,48,.94); --modal: #2a1d45; --muted: #e9d5ff; --accent2: #f9a8d4; background: radial-gradient(1200px 700px at 50% -220px, var(--bg-grad), var(--bg)) fixed, var(--bg); }
html.sz-easter[data-theme="light"]:not(.club-theme) body:not(.chaos-mode):not(.money-mode):not(.ht-mode) { --bg: #fdf4ff; --bg-grad: #fbcfe8; --panel2: #f5f3ff; --bg2: #ffffff; background: radial-gradient(1200px 700px at 50% -220px, var(--bg-grad), var(--bg)) fixed, var(--bg); }
html.sz-finalday[data-theme="dark"]:not(.club-theme) body:not(.chaos-mode):not(.money-mode):not(.ht-mode) { --bg: #171104; --bg2: #251c08; --panel: #30240b; --panel2: #3b2c0f; --bg-grad: #a16207; --nav: rgba(23,17,4,.94); --modal: #251c08; --muted: #f0dca0; --accent2: #fde047; background: radial-gradient(1200px 700px at 50% -220px, var(--bg-grad), var(--bg)) fixed, var(--bg); }
html.sz-finalday[data-theme="light"]:not(.club-theme) body:not(.chaos-mode):not(.money-mode):not(.ht-mode) { --bg: #fffbeb; --bg-grad: #fde68a; --panel2: #fffcf0; --bg2: #ffffff; background: radial-gradient(1200px 700px at 50% -220px, var(--bg-grad), var(--bg)) fixed, var(--bg); }
html.sz-summer[data-theme="dark"]:not(.club-theme) body:not(.chaos-mode):not(.money-mode):not(.ht-mode) { --bg: #062a3a; --bg2: #0b3a4f; --panel: #0f4760; --panel2: #13546f; --bg-grad: #0e7490; --nav: rgba(6,42,58,.94); --modal: #0b3a4f; --muted: #a5e4f5; --accent2: #fde047; background: radial-gradient(1200px 700px at 50% -220px, var(--bg-grad), var(--bg)) fixed, var(--bg); }
html.sz-summer[data-theme="light"]:not(.club-theme) body:not(.chaos-mode):not(.money-mode):not(.ht-mode) { --bg: #f0f9ff; --bg-grad: #fef08a; --panel2: #f2fbff; --bg2: #ffffff; background: radial-gradient(1200px 700px at 50% -220px, var(--bg-grad), var(--bg)) fixed, var(--bg); }
/* the falling layer: snow, bats, stars, petals, ticker tape… only on the menu pages, and never in Calm mode */
.sz-fx { position: fixed; inset: 0; pointer-events: none; z-index: 40; overflow: hidden; display: none; }
body.has-tabs .sz-fx { display: block; } body.calm .sz-fx { display: none !important; }
.sz-fx i { position: absolute; top: -40px; font-style: normal; opacity: .75; animation: sz-fall linear infinite; will-change: transform; }
@keyframes sz-fall { to { transform: translate(var(--dx, 30px), calc(100vh + 80px)) rotate(var(--rot, 180deg)); } }
.sz-fx.twinkle i { animation: sz-twinkle ease-in-out infinite alternate; top: var(--y); }
@keyframes sz-twinkle { from { opacity: .1; transform: scale(.6); } to { opacity: .8; transform: scale(1.1); } }
.sz-fx.flutter i { animation-name: sz-flutter; }
@keyframes sz-flutter { 0% { transform: translate(0, 0); } 25% { transform: translate(20px, 25vh) rotate(10deg); } 50% { transform: translate(-15px, 50vh) rotate(-10deg); } 75% { transform: translate(25px, 75vh) rotate(8deg); } 100% { transform: translate(0, calc(100vh + 80px)); } }
html[data-theme="light"] .sz-fx i { text-shadow: 0 0 2px rgba(40, 70, 120, .9), 0 0 6px rgba(40, 70, 120, .4) !important; }

/* ---------------------------------------------------------------- 5.27: the top bar, the 🎁 sheet and the Locker tab */
.gm-status { position: sticky; top: 0; z-index: 45; max-width: 560px; margin: 0 auto; display: flex; align-items: center; gap: 8px;
  padding: calc(8px + var(--strip, 0px) + env(safe-area-inset-top)) 16px 8px; background: var(--nav); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border-bottom: 1px solid var(--line); }
.gm-status[hidden] { display: none; }
html[class*="sz-"]:not(.intl-break) .gm-status { --strip: 6px; } html.intl-break .gm-status { --strip: 16px; }
body.has-status #app { padding-top: 8px; }
.gm-status .gs-me { position: relative; flex: none; text-decoration: none; }
.gm-status .gs-me .avatar { width: 38px; height: 38px; font-size: .85rem; }
.gm-status .gs-me .new-dot { position: absolute; top: -2px; right: -2px; }
.gm-status .lvl-chip, .gm-status .season-chip { padding: 6px 12px 8px; font-size: .85rem; border-radius: 12px; background: var(--panel); border: 1px solid var(--line); color: var(--text); }
.season-chip { overflow: hidden; }
.season-chip i { position: absolute; left: 0; bottom: 0; height: 3px; background: #f59e0b; }
.gm-status .gs-open { margin-left: auto; display: inline-flex; align-items: center; gap: 5px; padding: 6px 12px; border-radius: 12px; border: 1px solid var(--line); background: var(--panel); color: var(--text); font: 800 .95rem Inter, sans-serif; cursor: pointer; }
.gm-status .gs-open span { font-size: 1.15rem; }
.gm-status .gs-open.hot { background: linear-gradient(180deg, #ffd34d, #f5a700); border-color: #c98a00; color: #3a2500; box-shadow: 0 3px 0 #b07a00; }
.gm-status .gs-open.hot span { animation: gs-wiggle 2.4s ease-in-out infinite; display: inline-block; }
@keyframes gs-wiggle { 0%, 80%, 100% { transform: rotate(0); } 85% { transform: rotate(-12deg); } 90% { transform: rotate(10deg); } 95% { transform: rotate(-6deg); } }
body.calm .gm-status .gs-open.hot span { animation: none; }
@media (max-width: 360px) { .gm-status { gap: 5px; padding-left: 10px; padding-right: 10px; } .gm-status .lvl-chip, .gm-status .season-chip { padding: 5px 8px 7px; font-size: .78rem; } }
.to-open { display: grid; gap: 8px; }
.to-row { display: grid; grid-template-columns: 40px 1fr auto; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 14px; border: 1px solid var(--line); background: var(--card); color: var(--text); text-align: left; font: inherit; cursor: pointer; }
.to-row > span:first-child { font-size: 1.7rem; text-align: center; }
.to-row b { display: block; } .to-row small { color: var(--muted); font-size: .78rem; }
.to-row i { font-style: normal; font-weight: 800; padding: 6px 12px; border-radius: 10px; background: var(--accent); color: #0a2a1f; }
.to-links { display: flex; justify-content: center; flex-wrap: wrap; gap: 6px 14px; margin-top: 6px; font-size: .85rem; }
/* the Locker tab */
.lk-me .icon-btn { margin-left: auto; width: 38px; height: 38px; font-size: 1.05rem; }
.lk-views { margin: 0 0 12px; }
.lk-views a { flex: 1; position: relative; display: grid; justify-items: center; gap: 1px; padding: 7px 2px; border-radius: 10px; color: var(--muted); font: 700 clamp(.66rem, 2.9vw, .8rem) Inter, sans-serif; text-decoration: none; white-space: nowrap; }
.lk-views a span { font-size: 1.2rem; line-height: 1.1; }
.lk-views a.on { background: var(--accent); color: #0a2a1f; box-shadow: 0 3px 0 var(--btn-edge); }
.lk-views a .new-dot { position: absolute; top: 3px; right: 8px; }
.lk-body .alb-head { grid-template-columns: 1fr; }
.hard-toggle.four { grid-template-columns: repeat(4, 1fr); }
.hard-toggle.four > * { white-space: nowrap; min-width: 0; font-size: clamp(.68rem, 3vw, .82rem); text-align: center; }
.hard-toggle.four small { opacity: .7; font-size: .85em; }
.alb-xi-head { display: flex; align-items: flex-start; gap: 8px; } .alb-xi-head p { flex: 1; margin-top: 0; }
.st-go { display: flex; gap: 8px; justify-content: center; flex-wrap: wrap; }
.online-tabs button { font-size: clamp(.64rem, 2.9vw, .78rem); }
.tabbar a span { position: relative; }
.tabbar .locker-dot { position: absolute; top: -2px; right: -6px; width: 10px; height: 10px; border-radius: 50%; background: var(--bad); border: 2px solid var(--nav); }
.tabbar .locker-dot[hidden] { display: none; }

/* the seasonal strip along the top: keep pages' top bars (and their buttons) clear of it */
html[class*="sz-"]:not(.intl-break) body:not(.has-status) #app { padding-top: 16px; } html.intl-break body:not(.has-status) #app { padding-top: 26px; }
/* the buttons on the right of a page's top bar (🏆, ?) are one size and line up with the back arrow */
.top-btns { align-items: center; }
.top-btns > .icon-btn, .top-btns > a.icon-btn, .top-btns > button.icon-btn { box-sizing: border-box; width: 40px; height: 40px; min-width: 40px; padding: 0; margin: 0;
  display: inline-grid; place-items: center; font: 800 1.05rem Inter, sans-serif; line-height: 1; border-radius: 12px; }
/* a long title never runs into the buttons beside it: it gets smaller instead */
.topbar h2 { min-width: 0; padding: 0 6px; }
.topbar:has(.top-btns) h2 { font-size: clamp(.95rem, 4.4vw, 1.3rem); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: block; }
.lk-stats { display: flex; flex-wrap: wrap; gap: 2px 10px; } .lk-stats span { white-space: nowrap; }
.road { scroll-padding: 0 16px; padding-right: 16px; }
.sz-fx i.art { background: center / contain no-repeat; opacity: .85; filter: drop-shadow(0 1px 1px rgba(0, 0, 0, .25)); }
html[data-theme="light"] .sz-fx i.art { text-shadow: none !important; }
/* Halloween: a cobweb in the top corner of the menus, tucked under the top bar; drawn dark, so lightened on the dark look */
.sz-corner { position: fixed; right: -34px; top: calc(4px + env(safe-area-inset-top)); width: 128px; height: 128px; z-index: 44; pointer-events: none; display: none; opacity: .55; filter: invert(.92); }
body.has-tabs .sz-corner { display: block; } body.has-status .sz-corner { top: calc(58px + env(safe-area-inset-top)); }
html[data-theme="light"] .sz-corner { filter: none; opacity: .5; }
body.calm .sz-corner { display: none !important; }
.fx-lottie.sz-spider { filter: invert(.9) drop-shadow(0 1px 2px rgba(0, 0, 0, .5)); }
html[data-theme="light"] .fx-lottie.sz-spider { filter: none; }
/* the seasonal wheel: something drawn in the middle (it doesn't spin with the wheel) */
.wh-hub { position: absolute; left: 50%; top: 50%; width: 34%; aspect-ratio: 1; transform: translate(-50%, -50%); border-radius: 50%; background: radial-gradient(circle, #1c1917 55%, #0c0a09);
  box-shadow: 0 0 0 4px rgba(0, 0, 0, .35), 0 4px 14px rgba(0, 0, 0, .5); z-index: 1; pointer-events: none; display: grid; place-items: center; overflow: hidden; }
.wh-hub .fx-lot { width: 92%; height: 92%; }
.wh-hub.plain::after { content: '🎁'; font-size: 2rem; }

/* each season's CHAOS has its own colours behind the pitch (draft.js SZ_CHAOS sets body[data-cz]) */
/* 🎃 Halloween CHAOS: a moonlit night over a graveyard, fog rolling along the bottom, pumpkin colours on everything */
body.chaos-mode[data-cz="halloween"]::before { inset: 0; animation: cz-moon 6s ease-in-out infinite alternate;
  background: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 130' preserveAspectRatio='xMidYMax slice'><g fill='%2306020c'><path d='M0 130V104c40-8 80-6 120-1s80 4 120-2 90-6 120 1 40 3 40 3V130z'/><path d='M26 108 30 58 14 40l15 11 2-26 5 23 13-15-9 21 10-6-11 12 2 46z'/><path d='M376 108l-3-44 12-18-14 12-2-20-4 18-11-10 8 16-9-4 10 10 1 40z'/><path d='M78 108V86a11 11 0 0 1 22 0v22z'/><path d='M140 106V92a8 8 0 0 1 16 0v14z'/><path d='M214 106V78h-9v-6h9v-9h6v9h9v6h-9v28z'/><path d='M282 106V82a13 13 0 0 1 26 0v24z'/><path d='M334 106V94a7 7 0 0 1 14 0v12z'/><path d='M110 104h80v2h-80zM112 92h2v14h-2zM124 92h2v14h-2zM166 92h2v14h-2zM178 92h2v14h-2zM188 92h2v14h-2z'/></g></svg>") center bottom / auto 130px no-repeat,
    radial-gradient(circle at 20% calc(100% - 96px), #fffbe6 0 30px, rgba(255, 236, 170, .55) 33px, rgba(255, 190, 90, .18) 80px, transparent 170px),
    radial-gradient(1.5px 1.5px at 12% 74%, #fff, transparent), radial-gradient(1px 1px at 40% 70%, #fff, transparent), radial-gradient(1.5px 1.5px at 66% 76%, #fff, transparent),
    radial-gradient(1px 1px at 84% 68%, #fff, transparent), radial-gradient(1px 1px at 52% 82%, #fff, transparent), radial-gradient(1.5px 1.5px at 92% 80%, #fff, transparent), radial-gradient(1px 1px at 4% 64%, #fff, transparent),
    radial-gradient(60% 50% at 90% 10%, rgba(255, 110, 20, .28), transparent 70%), radial-gradient(60% 50% at 10% 40%, rgba(110, 30, 190, .38), transparent 70%),
    linear-gradient(180deg, #120526, #1d0838 45%, #0b0414); }
@keyframes cz-moon { to { filter: brightness(1.12); } }
html:has(body.chaos-mode[data-cz="halloween"]) { background: #0b0414; }
body.chaos-mode[data-cz="halloween"] .topbar h2 { color: #ff8a1f; text-shadow: 0 0 12px rgba(255, 120, 20, .75), 2px 2px 0 #3b0764; animation: cz-flicker 4s infinite steps(1); }
@keyframes cz-flicker { 0%, 40%, 44%, 100% { opacity: 1; } 42% { opacity: .55; } 43% { opacity: .9; } }
body.chaos-mode[data-cz="halloween"] .counter { background: linear-gradient(160deg, rgba(59, 7, 100, .9), rgba(24, 6, 40, .92)); border-color: rgba(255, 138, 31, .6); box-shadow: 0 0 18px rgba(255, 120, 20, .25); }
body.chaos-mode[data-cz="halloween"] .counter-num b { color: #ff9a3c; text-shadow: 0 0 14px rgba(255, 120, 20, .7); }
body.chaos-mode[data-cz="halloween"] .chaos-meter { color: #ff9a3c; }
body.chaos-mode[data-cz="halloween"] .chaos-meter i.on { background: linear-gradient(90deg, #a855f7, #ff8a1f); box-shadow: 0 0 10px #ff8a1f; }
body.chaos-mode[data-cz="halloween"] .pitch { background: radial-gradient(80% 60% at 85% 0%, rgba(255, 244, 200, .16), transparent 70%), linear-gradient(180deg, rgba(30, 10, 60, .35), rgba(10, 4, 20, .45)),
  repeating-linear-gradient(180deg, #164a35 0 34px, #13412f 34px 68px); border-color: rgba(255, 138, 31, .45); box-shadow: 0 0 0 2px rgba(168, 85, 247, .45), 0 0 26px rgba(255, 120, 20, .35); }
body.chaos-mode[data-cz="halloween"] .slot.empty { border-color: rgba(255, 138, 31, .75); background: rgba(20, 5, 35, .35); box-shadow: inset 0 0 12px rgba(255, 120, 20, .18); }
body.chaos-mode[data-cz="halloween"] .reel { background: linear-gradient(160deg, #2e1050, #140a20); border-color: rgba(255, 138, 31, .6); animation: none; box-shadow: 0 0 0 2px rgba(255, 138, 31, .4), 0 0 16px rgba(168, 85, 247, .35); }
body.chaos-mode[data-cz="halloween"] .reel.is-wild { background: linear-gradient(160deg, #ff8a1f, #7e22ce 70%); }
body.chaos-mode[data-cz="halloween"] .btn.spin { background: radial-gradient(120% 140% at 50% 0%, #ffb35c, #f97316 45%, #c2410c); color: #2a0a12; animation: cz-pump 2.4s ease-in-out infinite;
  box-shadow: 0 6px 0 #7c2d12, 0 0 28px rgba(255, 120, 20, .55); text-shadow: 0 1px 0 rgba(255, 220, 160, .6); }
@keyframes cz-pump { 50% { box-shadow: 0 6px 0 #7c2d12, 0 0 40px rgba(255, 120, 20, .8), 0 0 70px rgba(168, 85, 247, .3); } }
body.calm.chaos-mode[data-cz="halloween"]::before, body.calm.chaos-mode[data-cz="halloween"]::after, body.calm.chaos-mode[data-cz="halloween"] .btn.spin, body.calm.chaos-mode[data-cz="halloween"] .topbar h2 { animation: none; }
/* the decorations that live on the pitch (draft.js czDeco: cobwebs, pumpkins, bats and a spider; gone in Calm) */
.cz-deco { position: fixed; inset: 0; overflow: hidden; z-index: 8; pointer-events: none; }  /* (clipped to the screen, so it can never make the page scroll) */
html:has(#app.page-draft) { overscroll-behavior: none; }
.cz-deco > div { position: absolute; }
.cz-deco .web { opacity: .75; filter: invert(.9) drop-shadow(0 0 4px rgba(168, 85, 247, .6)); }
.cz-deco .web.l { transform: scaleX(-1); }
.cz-deco .fog { background: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 80'><filter id='b'><feGaussianBlur stdDeviation='9'/></filter><g filter='url(%23b)' fill='%23c4b5fd' opacity='.22'><ellipse cx='60' cy='50' rx='80' ry='14'/><ellipse cx='200' cy='44' rx='70' ry='12'/><ellipse cx='330' cy='52' rx='90' ry='15'/></g></svg>") 0 100% / 300px 100% repeat-x; opacity: .9; animation: cz-fog 26s linear infinite; }
@keyframes cz-fog { to { background-position: 300px 100%; } }
.cz-deco .web svg { width: 100% !important; height: 100% !important; }
.cz-deco .corner svg { width: 100% !important; height: 100% !important; filter: drop-shadow(0 0 10px rgba(255, 140, 30, .7)); }
body.calm .cz-deco { display: none; }
/* the other seasons: their colours, held still (the normal CHAOS colour spin would turn them into another season's) */
body.chaos-mode[data-cz]:not([data-cz="halloween"])::before { animation: none; }
body.chaos-mode[data-cz="champions"]::before { background: radial-gradient(40% 30% at 20% 20%, rgba(80,140,255,.38), transparent 70%), radial-gradient(35% 30% at 85% 30%, rgba(255,255,255,.16), transparent 70%), radial-gradient(45% 35% at 50% 90%, rgba(30,60,160,.34), transparent 70%), #040b24; }
body.chaos-mode[data-cz="christmas"]::before { background: radial-gradient(40% 30% at 20% 20%, rgba(220,40,40,.34), transparent 70%), radial-gradient(35% 30% at 85% 30%, rgba(30,160,80,.32), transparent 70%), radial-gradient(45% 35% at 50% 90%, rgba(255,215,0,.18), transparent 70%), #0d0a12; }
body.chaos-mode[data-cz="window"]::before { background: radial-gradient(40% 30% at 20% 20%, rgba(40,200,120,.32), transparent 70%), radial-gradient(35% 30% at 85% 30%, rgba(200,200,200,.14), transparent 70%), radial-gradient(45% 35% at 50% 90%, rgba(255,215,0,.18), transparent 70%), #071510; }
body.chaos-mode[data-cz="cup"]::before { background: radial-gradient(40% 30% at 20% 20%, rgba(220,40,40,.32), transparent 70%), radial-gradient(35% 30% at 85% 30%, rgba(40,90,220,.32), transparent 70%), radial-gradient(45% 35% at 50% 90%, rgba(255,255,255,.14), transparent 70%), #0a0a18; }
body.chaos-mode[data-cz="title"]::before { background: radial-gradient(40% 30% at 20% 20%, rgba(255,130,20,.34), transparent 70%), radial-gradient(35% 30% at 85% 30%, rgba(255,60,60,.22), transparent 70%), radial-gradient(45% 35% at 50% 90%, rgba(255,220,120,.14), transparent 70%), #0f0a06; }
body.chaos-mode[data-cz="easter"]::before { background: radial-gradient(40% 30% at 20% 20%, rgba(249,168,212,.36), transparent 70%), radial-gradient(35% 30% at 85% 30%, rgba(167,243,208,.28), transparent 70%), radial-gradient(45% 35% at 50% 90%, rgba(196,181,253,.32), transparent 70%), #160f24; }
body.chaos-mode[data-cz="finalday"]::before { background: radial-gradient(40% 30% at 20% 20%, rgba(255,210,60,.36), transparent 70%), radial-gradient(35% 30% at 85% 30%, rgba(255,120,40,.22), transparent 70%), radial-gradient(45% 35% at 50% 90%, rgba(255,255,255,.14), transparent 70%), #120c02; }
body.chaos-mode[data-cz="summer"]::before { background: radial-gradient(40% 30% at 20% 20%, rgba(14,165,233,.36), transparent 70%), radial-gradient(35% 30% at 85% 30%, rgba(253,224,71,.32), transparent 70%), radial-gradient(45% 35% at 50% 90%, rgba(255,255,255,.12), transparent 70%), #031522; }
.cm-icon .cm-lot { display: inline-block; width: 92px; height: 92px; } .cm-icon .cm-lot svg { width: 100% !important; height: 100% !important; }
.mgr-ico.lot svg { width: 100% !important; height: 100% !important; }
.mgr-ico.lot { display: inline-block; width: 2.8rem; height: 2.8rem; border-radius: 50%; background: radial-gradient(circle, rgba(255, 255, 255, .9), rgba(255, 255, 255, .55)); overflow: hidden; vertical-align: middle; }
/* this season's CHAOS on the Season page */
.szc-card { position: relative; display: grid; gap: 4px; margin: 12px 0; padding: 14px 16px; border-radius: 18px; color: #fff; text-decoration: none; overflow: hidden;
  background: radial-gradient(60% 80% at 15% 20%, rgba(255, 43, 214, .45), transparent 70%), radial-gradient(50% 70% at 90% 80%, rgba(0, 240, 255, .35), transparent 70%), #12001f; box-shadow: 0 4px 0 rgba(0, 0, 0, .3); }
.szc-card.sz-halloween { background: radial-gradient(60% 80% at 15% 20%, rgba(255, 120, 20, .5), transparent 70%), radial-gradient(50% 70% at 90% 80%, rgba(120, 40, 200, .5), transparent 70%), #0b0614; }
.szc-card.sz-christmas { background: radial-gradient(60% 80% at 15% 20%, rgba(220, 40, 40, .5), transparent 70%), radial-gradient(50% 70% at 90% 80%, rgba(30, 160, 80, .5), transparent 70%), #0d0a12; }
.szc-k { font: 800 .7rem Inter, sans-serif; letter-spacing: .12em; text-transform: uppercase; color: #fde047; }
.szc-card b { font: 700 1.35rem Oswald, sans-serif; } .szc-card small { opacity: .9; line-height: 1.35; }
.szc-row { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 4px; } .szc-row span { font: 700 .75rem Inter, sans-serif; padding: 3px 8px; border-radius: 999px; background: rgba(255, 255, 255, .14); white-space: nowrap; }
.szc-card i { position: absolute; right: 14px; top: 14px; font: 800 .85rem Inter, sans-serif; font-style: normal; padding: 6px 12px; border-radius: 12px; background: #c8ff3d; color: #0a2a1f; }

/* the season band (7px) and the club scarf under it (5px): pages and the top bar keep clear of both */
html[class*="sz-"]:not(.intl-break).has-club .gm-status { --strip: 11px; }
html[class*="sz-"]:not(.intl-break).has-club body:not(.has-status) #app { padding-top: 22px; }
.has-club:not([class*="sz-"]) body:not(.has-status) #app { padding-top: 16px; }
.has-club:not([class*="sz-"]) .gm-status { --strip: 4px; }
/* Seasonal CHAOS on Home: the season's colours */
.sz-chaos-card[data-cz="halloween"] { background: radial-gradient(60% 70% at 15% 15%, rgba(255, 120, 20, .55), transparent 70%), radial-gradient(55% 70% at 90% 85%, rgba(120, 40, 200, .6), transparent 70%), #0b0614; }
.sz-chaos-card[data-cz="christmas"] { background: radial-gradient(60% 70% at 15% 15%, rgba(220, 40, 40, .55), transparent 70%), radial-gradient(55% 70% at 90% 85%, rgba(30, 160, 80, .55), transparent 70%), #0d0a12; }
.sz-chaos-card[data-cz="champions"] { background: radial-gradient(60% 70% at 15% 15%, rgba(80, 140, 255, .55), transparent 70%), radial-gradient(55% 70% at 90% 85%, rgba(255, 255, 255, .18), transparent 70%), #040b24; }
.sz-chaos-card[data-cz="easter"] { background: radial-gradient(60% 70% at 15% 15%, rgba(249, 168, 212, .55), transparent 70%), radial-gradient(55% 70% at 90% 85%, rgba(167, 243, 208, .45), transparent 70%), #160f24; }
.sz-chaos-card { margin-top: 14px; }
.mgr .op { font-style: normal; font-weight: 900; color: #b45309; background: #fde047; padding: 0 5px; border-radius: 6px; margin-right: 2px; }
/* a reel card's club badges stay on one line (a player with lots of clubs pushed a second row out of the card) */
.stage .reel .chips { flex-wrap: nowrap; overflow: hidden; max-width: 100%; }
.stage .reel .chips > * { flex: none; }

/* 📶 offline note and go-online card */
#net-bar { position: fixed; left: 50%; bottom: calc(86px + env(safe-area-inset-bottom)); transform: translate(-50%, 20px); z-index: 45; display: none; background: var(--toast-bg); color: var(--toast-text); font: 700 .78rem Inter, sans-serif; padding: 7px 14px; border-radius: 999px; opacity: 0; pointer-events: none; transition: .25s; white-space: nowrap; max-width: 94vw; overflow: hidden; text-overflow: ellipsis; box-shadow: 0 6px 20px rgba(0,0,0,.3); }
body.has-tabs #net-bar.on { display: block; opacity: 1; transform: translate(-50%, 0); }
.offline-card { display: flex; flex-direction: column; align-items: center; gap: 6px; text-align: center; padding: 18px 16px; margin: 10px 0; border-radius: 16px; background: var(--inset); border: 1px dashed var(--line); }
.offline-card > span { font-size: 1.8rem; }
.offline-card small { color: var(--muted); }

/* 🔔 what's been happening */
.gm-status .gs-bell { margin-left: auto; position: relative; display: inline-flex; align-items: center; justify-content: center; width: 38px; height: 36px; border-radius: 12px; border: 1px solid var(--line); background: var(--panel); font-size: 1.1rem; padding: 0; }
.gm-status .gs-bell + .gs-open { margin-left: 6px; }
.gm-status .gs-bell i { position: absolute; top: -5px; right: -5px; min-width: 18px; height: 18px; padding: 0 4px; border-radius: 9px; background: #e5383b; color: #fff; font: 800 .68rem/18px Inter, sans-serif; font-style: normal; text-align: center; }
.gm-status .gs-bell.hot span { animation: gs-wiggle 2.4s ease-in-out infinite; display: inline-block; }
body.calm .gm-status .gs-bell.hot span { animation: none; }
.feed h4 { margin: 14px 0 6px; }
.feed-tops { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.feed-stat { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 2px; padding: 10px 6px; border-radius: 14px; background: var(--inset); color: inherit; text-decoration: none; }
.feed-stat b { font-size: 1.05rem; }
.feed-stat small { color: var(--muted); font-size: .68rem; line-height: 1.2; }
.feed-crowns { margin-top: 8px; }
.feed-crowns a { display: flex; justify-content: space-between; gap: 8px; padding: 7px 4px; border-top: 1px solid var(--line); color: inherit; text-decoration: none; font-weight: 700; font-size: .85rem; }
.feed-crowns a small { color: var(--muted); font-weight: 600; }
.feed-item { display: block; padding: 9px 10px; margin: 6px 0; border-radius: 12px; background: var(--inset); color: inherit; text-decoration: none; border-left: 4px solid transparent; }
.feed-item b { display: block; font-size: .88rem; }
.feed-item small { color: var(--muted); font-size: .75rem; }
.feed-item.beaten { border-left-color: #e5383b; }
.feed-item.crown { border-left-color: #f5a700; }
.feed-item.wait { border-left-color: var(--hi); }
.feed-item.new { box-shadow: 0 0 0 2px rgba(229,56,59,.35); }
.bp-crowns { font-style: normal; font-size: .72rem; font-weight: 700; margin-left: 5px; color: var(--muted); }

/* 🌍 where your score landed, on the full-time screen */
.board-news { display: flex; align-items: center; gap: 10px; margin: 10px auto 4px; max-width: 420px; padding: 10px 12px; border-radius: 14px; background: var(--inset); border: 1px solid var(--line); color: inherit; text-decoration: none; text-align: left; }
.board-news > span:first-child { font-size: 1.5rem; }
.board-news > span:nth-child(2) { flex: 1; display: flex; flex-direction: column; gap: 2px; }
.board-news b { font-size: .92rem; }
.board-news small { color: var(--muted); font-size: .74rem; }
.board-news > i { font-style: normal; color: var(--muted); font-size: 1.2rem; }
.board-news.wait { opacity: .7; }
.board-news.tier { background: linear-gradient(135deg, rgba(200,255,61,.18), var(--inset)); border-color: rgba(120,170,20,.5); }
.board-news.rec { background: linear-gradient(135deg, #ffe27a, #f5a700); border-color: #c98a00; color: #3a2500; box-shadow: 0 4px 0 #b07a00; animation: bn-pop .5s ease-out; }
.board-news.rec small, .board-news.rec > i { color: #5a3d00; }
@keyframes bn-pop { 0% { transform: scale(.9); opacity: 0; } 70% { transform: scale(1.03); } 100% { transform: scale(1); opacity: 1; } }
body.calm .board-news.rec { animation: none; }

/* 🏆 the leaderboards: a podium, pictures, movement, your row pinned (GM.lbList) */
.podium { display: grid; grid-template-columns: 1fr 1.15fr 1fr; align-items: end; gap: 6px; margin: 4px 0 10px; }
.pod { display: flex; flex-direction: column; align-items: center; gap: 3px; min-width: 0; background: none; border: 0; padding: 0; color: inherit; font: inherit; cursor: pointer; }
.pod .avatar.upic.xl { width: 74px; height: 74px; font-size: 1.4rem; margin: 0; box-shadow: 0 0 0 3px #f5c400, 0 6px 18px rgba(0,0,0,.25); }
.pod .avatar.upic.lg { width: 56px; height: 56px; font-size: 1.05rem; }
.pod2 .avatar.upic.lg { box-shadow: 0 0 0 3px #c0c7d1; } .pod3 .avatar.upic.lg { box-shadow: 0 0 0 3px #c98a54; }
.pod b { font-size: .84rem; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pod em { font-style: normal; font-weight: 800; color: var(--hi); font-size: .95rem; }
.pod em small { font-size: .7rem; }
.pod .lv-tag { font-size: .62rem; }
.pod-medal { font-size: 1.25rem; line-height: 1; }
.pod-step { align-self: stretch; margin-top: 2px; border-radius: 12px 12px 4px 4px; text-align: center; font: 900 1.3rem/1 Inter, sans-serif; padding-top: 8px; background: var(--panel); color: var(--muted); }
.pod1 .pod-step { height: 62px; background: linear-gradient(180deg, #ffe27a, #f5a700); color: #5a3d00; }
.pod2 .pod-step { height: 44px; background: linear-gradient(180deg, #eef1f5, #b7c0cc); color: #39424e; }
.pod3 .pod-step { height: 32px; background: linear-gradient(180deg, #f1c9a3, #c98a54); color: #4a2b10; }
.pod.me b { color: var(--accent); }
.pod-x { font-size: .7rem; line-height: 1; } .pod-x i { font-style: normal; }
.pod.empty { cursor: default; opacity: .55; }
.pod.empty b { font-weight: 600; font-size: .74rem; color: var(--muted); }
.pod-free { width: 56px; height: 56px; border-radius: 50%; border: 2px dashed var(--muted); display: grid; place-items: center; font: 800 1.3rem/1 Inter, sans-serif; color: var(--muted); }
.pod1 .pod-free { width: 74px; height: 74px; }
.pod.empty .pod-step { filter: saturate(.4); }
.lb-row.lbx { grid-template-columns: 26px 30px minmax(0, 1fr) auto auto; align-items: center; gap: 8px; padding: 7px 10px; cursor: pointer; }
.lb-row.lbx .avatar { width: 30px; height: 30px; font-size: .68rem; }
.lb-nm { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.lb-rk { font-weight: 800; color: var(--muted); text-align: center; }
.mv { font-style: normal; font-size: .66rem; font-weight: 800; min-width: 0; }
.mv.up { color: #16a34a; } .mv.down { color: #dc2626; } .mv.new { color: var(--muted); text-transform: uppercase; letter-spacing: .03em; }
.lbx-you { position: sticky; bottom: calc(80px + env(safe-area-inset-bottom)); z-index: 5; margin-top: 10px; }
.lbx-you .lb-row.me { box-shadow: 0 6px 18px rgba(0,0,0,.25); }
.lbx-you { transition: opacity .2s, transform .2s; } .lbx-you.off { opacity: 0; transform: translateY(12px); pointer-events: none; }
.lb-gap { font-size: .75rem; color: var(--muted); text-align: center; padding: 4px 8px 5px; background: var(--panel); border-radius: 0 0 10px 10px; margin-top: -4px; }

/* 👤 player profiles */
.prof-head { display: flex; gap: 12px; align-items: center; margin-bottom: 10px; }
.prof-head .avatar.upic.xl { width: 76px; height: 76px; font-size: 1.5rem; margin: 0; flex: none; }
.prof-head h3 { margin: 0 0 2px; overflow-wrap: anywhere; }
.prof-head small { color: var(--muted); font-size: .78rem; }
.prof-tiles { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.prof-tiles > * { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 9px 4px; border-radius: 12px; background: var(--inset); color: inherit; text-decoration: none; text-align: center; }
.prof-tiles small { font-size: .68rem; color: var(--muted); line-height: 1.2; }
.prof-vs { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; margin-top: 8px; padding: 8px 10px; border-radius: 12px; background: var(--inset); font-size: .85rem; }
.prof-vs a { margin-left: auto; font-weight: 700; }
.prof h4 { margin: 14px 0 6px; }
.prof h4 small { font-weight: 600; }
.prof-xi { display: flex; flex-wrap: wrap; gap: 5px; }
.prof-xi span { padding: 4px 8px; border-radius: 999px; background: var(--panel); border: 1px solid var(--line); font-size: .76rem; font-weight: 600; }
.prof-line { margin: 10px 0 0; font-size: .85rem; }
.prof-boards { display: grid; gap: 4px; }
.prof-boards a { display: grid; grid-template-columns: 30px 1fr auto; align-items: center; gap: 6px; padding: 7px 10px; border-radius: 10px; background: var(--panel); color: inherit; text-decoration: none; font-size: .84rem; }
.prof-boards a span:nth-child(2) { display: flex; flex-direction: column; min-width: 0; }
.prof-boards a small { color: var(--muted); font-size: .7rem; }
.prof-boards a b { color: var(--hi); }
.prof-acts { display: flex; flex-wrap: wrap; gap: 6px; justify-content: center; margin-top: 14px; }

/* 🤝 invite a friend */
.invite-card { display: flex; align-items: center; gap: 10px; width: 100%; margin: 12px 0 4px; padding: 11px 12px; border-radius: 14px; border: 1px dashed var(--accent); background: var(--inset); color: inherit; font: inherit; text-align: left; cursor: pointer; }
.invite-card > span:first-child { font-size: 1.5rem; }
.invite-card > span:nth-child(2) { flex: 1; display: flex; flex-direction: column; gap: 2px; }
.invite-card small { color: var(--muted); font-size: .74rem; }
.invite-card > i { font-style: normal; color: var(--muted); font-size: 1.2rem; }

/* 🛂 Passport Office: the passport, then the stamp thumps down */
.wc-passport { position: relative; display: flex; align-items: center; justify-content: center; }
.pp-book { width: 92px; height: 124px; border-radius: 8px; background: linear-gradient(160deg, #23396b, #142347); color: #f2d27a; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; box-shadow: 0 8px 22px rgba(0,0,0,.45), inset 0 0 0 2px rgba(242,210,122,.35); animation: pp-in .45s ease-out; }
.pp-book b { font: 900 .72rem Inter, sans-serif; letter-spacing: .12em; }
.pp-book i { width: 34px; height: 34px; border-radius: 50%; border: 2px solid #f2d27a; }
.pp-book small { font: 700 .45rem Inter, sans-serif; letter-spacing: .08em; opacity: .85; }
.pp-stamp { position: absolute; padding: 4px 10px; border: 3px solid #d62828; border-radius: 6px; color: #d62828; font: 900 1rem Inter, sans-serif; letter-spacing: .1em; transform: rotate(-14deg); background: rgba(255,255,255,.55); animation: pp-stamp .5s .55s cubic-bezier(.2,1.6,.4,1) both; }
@keyframes pp-in { from { transform: translateY(30px) scale(.8); opacity: 0; } }
@keyframes pp-stamp { from { transform: rotate(-14deg) scale(2.6); opacity: 0; } to { transform: rotate(-14deg) scale(1); opacity: 1; } }
body.calm .pp-book, body.calm .pp-stamp { animation: none; }

/* 🌍 nation cards: the foil No. 1, country sets, the Packed XI's nation bonus */
.pcard.no1 .pc-front { box-shadow: 0 0 0 2px #f6e27a, 0 0 14px rgba(246,226,122,.5); }
/* a country's No. 1: his flag big across the top corner, a holographic finish and a glint that sweeps across */
.pcard.no1 .pc-front { isolation: isolate; }
.pcard.no1 .pc-front > .pc-bigflag { position: absolute; z-index: 0; top: .05em; right: -.18em; font-size: 7.2em; line-height: 1; transform: rotate(16deg); opacity: .8; filter: saturate(1.3) drop-shadow(0 2px 4px rgba(0,0,0,.25)); pointer-events: none;
  -webkit-mask-image: linear-gradient(225deg, #000 35%, transparent 80%); mask-image: linear-gradient(225deg, #000 35%, transparent 80%); }
.pcard.no1 .pc-front > .pc-no1tag { position: absolute; z-index: 3; top: .4em; left: 50%; transform: translateX(-50%); font: 700 .95em/1 Oswald, sans-serif; letter-spacing: .02em; color: #fff6c2; text-shadow: 0 1px 0 #8a6400, 0 2px 6px rgba(0,0,0,.55); }
.pcard.no1 .pc-front > .pc-glare { position: absolute; inset: 0; z-index: 3; pointer-events: none; border-radius: inherit; background: linear-gradient(105deg, transparent 38%, rgba(255,255,255,.55) 48%, transparent 58%); background-size: 300% 100%; animation: glare 4.5s ease-in-out infinite; mix-blend-mode: overlay; }
@keyframes glare { 0%, 55% { background-position: 130% 0; } 100% { background-position: -130% 0; } }
body.calm .pc-glare { animation: none; opacity: 0; }
.pcard.no1 .pc-front > .pc-foil, .pc-foil { position: absolute; inset: 0; z-index: 2; pointer-events: none; border-radius: inherit; mix-blend-mode: color-dodge; opacity: .55;
  background: linear-gradient(115deg, transparent 20%, rgba(255,0,170,.35) 32%, rgba(0,255,255,.35) 42%, rgba(255,255,0,.35) 52%, transparent 64%); background-size: 250% 250%; animation: foil 3.2s linear infinite; }
@keyframes foil { from { background-position: 120% 0; } to { background-position: -120% 0; } }
body.calm .pc-foil { animation: none; }
.nat-sets summary small { font-weight: 600; margin-left: 6px; }
.nat-list { display: grid; gap: 4px; margin-top: 6px; max-height: 340px; overflow-y: auto; }
.nat-row { display: grid; grid-template-columns: 30px 1fr auto; align-items: center; gap: 8px; padding: 7px 10px; border-radius: 10px; background: var(--panel); }
.nat-row.done { outline: 2px solid var(--accent); }
.nat-flag { font-size: 1.3rem; text-align: center; }
.nat-nm { display: flex; flex-direction: column; min-width: 0; }
.nat-nm small { color: var(--muted); font-size: .7rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.nat-of { font-weight: 800; color: var(--hi); font-size: .85rem; }
.nat-bonus { margin: 6px 0 0; font-size: .88rem; }

/* 🎩 Hat-Trick: three faces sliced into one, flickering at the seams */
.fuse { position: relative; display: inline-block; flex: none; line-height: 0; }
.fuse .fz { display: block; }
.fuse .fz + .fz { position: absolute; inset: 0; }
.fuse .fz0 { clip-path: polygon(0 0, 40% 0, 30% 100%, 0 100%); }
.fuse .fz1 { clip-path: polygon(40% 0, 68% 0, 62% 100%, 30% 100%); filter: saturate(1.3) hue-rotate(-12deg); animation: fz-glitch 3.4s infinite; }
.fuse .fz2 { clip-path: polygon(68% 0, 100% 0, 100% 100%, 62% 100%); animation: fz-glitch 3.4s 1.1s infinite reverse; }
.fuse::after { content: ''; position: absolute; inset: 0; border-radius: 50%; pointer-events: none; box-shadow: 0 0 0 2px #ffd34d, 0 0 10px rgba(255,211,77,.8);
  background: linear-gradient(100deg, transparent 37%, rgba(255,255,255,.9) 39%, transparent 41%, transparent 63%, rgba(255,255,255,.9) 65%, transparent 67%); }
@keyframes fz-glitch { 0%, 88%, 100% { transform: none; } 90% { transform: translate(1.5px, -1px); } 93% { transform: translate(-2px, 1px); } 96% { transform: translate(1px, 0); } }
body.calm .fuse .fz { animation: none; }
.fuse-fly { position: fixed; z-index: 70; pointer-events: none; filter: drop-shadow(0 6px 14px rgba(0,0,0,.45)); }
.slot.fusing .fuse { opacity: 0; }
.slot.fused-pop .fuse { animation: fz-pop .6s cubic-bezier(.2,1.6,.4,1); }
@keyframes fz-pop { from { transform: scale(1.9); } to { transform: scale(1); } }

/* 🔭 Scout's Tip: pick a card */
.scout-pick { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin: 12px 0; width: 100%; align-self: stretch; }
.scout-pick button { background: none; border: 0; padding: 0; cursor: pointer; width: 100%; min-width: 0; }
.scout-pick button .pcard { width: 100%; font-size: 9px; }
.st-bonus { display: block; margin-top: 4px; }

/* ♻️ the duplicate pile */
.dupe-box { display: flex; align-items: center; gap: 10px; margin: 10px 0; padding: 10px 12px; border-radius: 14px; background: var(--inset); }
.dupe-box > span:first-child { font-size: 1.5rem; }
.dupe-box > span:nth-child(2) { flex: 1; display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.dupe-box small { color: var(--muted); font-size: .72rem; }
.dupe-box.full { outline: 2px solid var(--accent); }

/* your own profile (tap your picture on the top bar) */
.prof-you { margin: -2px 0 8px; text-align: center; font: 800 .66rem Inter, sans-serif; letter-spacing: 1.2px; text-transform: uppercase; color: var(--muted); }
.prof-acts .btn { position: relative; }
.prof-acts .new-dot { position: absolute; top: -3px; right: -3px; }

/* online: the result, big at the top of the comparison */
.o-hero { display: grid; justify-items: center; gap: 2px; margin: 10px 0; padding: 16px 12px 14px; border-radius: 20px; text-align: center; box-shadow: 0 4px 0 rgba(0,0,0,.25); animation: ohin .6s cubic-bezier(.2,1.6,.4,1) both; }
.o-hero .oh-ico { font-size: 2.6rem; line-height: 1; }
.o-hero b { font: 700 2rem/1.1 Oswald, sans-serif; text-transform: uppercase; letter-spacing: .02em; }
.o-hero small { font-weight: 700; opacity: .85; font-size: .9rem; }
.o-hero.win { background: linear-gradient(135deg, #ffe27a, #f5b301); color: #3a2600; box-shadow: 0 4px 0 #b37f00, 0 0 28px rgba(255,210,63,.55); }
.o-hero.lose { background: linear-gradient(135deg, #4b5563, #1f2937); color: #f3f4f6; }
.o-hero.draw { background: linear-gradient(135deg, #93c5fd, #3b82f6); color: #0b1f44; }
@keyframes ohin { from { transform: scale(.6); opacity: 0; } to { transform: none; opacity: 1; } }
body.calm .o-hero { animation: none; }

/* 👀 watching your opponent's draft, live */
.page-watch .watch-score { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 8px 12px; margin: 4px 0 8px; border-radius: 16px; background: var(--panel); border: 1px solid var(--line); }
.page-watch .watch-score > span { display: flex; align-items: center; gap: 6px; font-size: .85rem; }
.page-watch .watch-score .avatar { width: 30px; height: 30px; font-size: .7rem; }
.page-watch .watch-score strong { font: 700 1.6rem Oswald, sans-serif; } .page-watch .watch-score strong small { font-size: .7rem; font-family: Inter, sans-serif; opacity: .7; }
.live-pill { background: #ef4444 !important; color: #fff !important; animation: livepulse 1.4s ease-in-out infinite; }
@keyframes livepulse { 50% { opacity: .55; } }
body.calm .live-pill { animation: none; }
.watch-go { margin: 8px 0; }

/* 💎 Icon cards (5.34.1): midnight and ice, a diamond sheen, a slow holo and a frosted edge */
.tier-i .pc-front { color: #fff; --pc-bg: radial-gradient(120% 90% at 50% 0%, #1e3a5f 0%, #0b1226 55%, #05070f 100%); --pc-edge: linear-gradient(135deg, #ffffff, #a5f3fc 30%, #e0e7ff 55%, #67e8f9 80%, #ffffff); }
.tier-i .pc-name { border-color: rgba(165, 243, 252, .45); text-shadow: 0 0 8px rgba(103, 232, 249, .6); }
.tier-i .pc-num, .tier-i .pc-stats b { color: #cffafe; }
.tier-i .pc-sheen { background:
    radial-gradient(circle at 22% 30%, rgba(255,255,255,.95) 0 1.2%, transparent 2.2%), radial-gradient(circle at 74% 18%, rgba(255,255,255,.9) 0 1%, transparent 2%),
    radial-gradient(circle at 64% 62%, rgba(207,250,254,.95) 0 1.1%, transparent 2.1%), radial-gradient(circle at 30% 78%, rgba(255,255,255,.85) 0 .9%, transparent 1.9%),
    radial-gradient(circle at 86% 46%, rgba(224,231,255,.9) 0 .9%, transparent 1.9%),
    linear-gradient(120deg, transparent 15%, rgba(165,243,252,.22) 35%, rgba(255,255,255,.32) 48%, rgba(192,132,252,.2) 62%, transparent 85%) 0 0 / 300% 300%;
  mix-blend-mode: screen; animation: icon-glisten 7s ease-in-out infinite, icon-twinkle 2.4s ease-in-out infinite alternate; }
@keyframes icon-glisten { 0%, 100% { background-position: 0 0, 0 0, 0 0, 0 0, 0 0, 100% 0; } 50% { background-position: 0 0, 0 0, 0 0, 0 0, 0 0, 0% 100%; } }
.tier-i .pc-sheen::after { content: ''; position: absolute; inset: 0; background: radial-gradient(circle at 48% 12%, rgba(255,255,255,.95) 0 1%, transparent 2%), radial-gradient(circle at 14% 56%, rgba(207,250,254,.9) 0 .9%, transparent 1.9%), radial-gradient(circle at 80% 80%, rgba(255,255,255,.9) 0 1%, transparent 2%); animation: icon-twinkle 2.4s 1.2s ease-in-out infinite alternate-reverse; }
body.calm .tier-i .pc-sheen::after { animation: none; }
@keyframes icon-twinkle { from { opacity: .55; filter: brightness(1); } to { opacity: 1; filter: brightness(1.35); } }
.tier-i .pc-front::after { content: '💎'; position: absolute; z-index: 2; top: .35em; left: 50%; transform: translateX(-50%); font-size: .85em; filter: drop-shadow(0 0 6px rgba(103,232,249,.9)); }  /* top centre: the ✓ has the corner */
.pcard.no1.tier-i .pc-front::after { display: none; }
.pitch.packed .slot.tier-i { box-shadow: 0 0 0 2px #a5f3fc, 0 0 16px #22d3ee; }
.po-cards .pcard.flipped.tier-i { animation: po-shine .9s ease-out; }
body.calm .tier-i .pc-sheen { animation: none; }

/* the number box always sits at the bottom of a reel card, so the three line up whatever's above them
   (a two-line name, two rows of clubs, no clubs at all) */
.stage .reel .reel-goals { margin-top: auto; }
.stage .reel:not(.fit1):not(:has(.mate)) .chips + .reel-goals { margin-top: 4px; }

/* a pitch style's name colour (the beach's dark brown) on a CHAOS pitch that's been made dark (Halloween, fog): white */
body[data-cz] .pitch .slot-name { color: #fff !important; text-shadow: 0 1px 3px rgba(0,0,0,.85) !important; }

/* 🧭 the tour: a spotlight on one thing at a time and a bubble that says what it is */
.tour { position: fixed; inset: 0; z-index: 120; cursor: pointer; }
.tour-ring { position: fixed; border-radius: 14px; box-shadow: 0 0 0 3px #ffe600, 0 0 0 9999px rgba(0, 0, 0, .62); transition: all .35s cubic-bezier(.2, .9, .3, 1); pointer-events: none; }
.tour-bubble { position: fixed; padding: 12px 14px 10px; border-radius: 16px; background: #ffe600; color: #2a1a00; font-size: .88rem; line-height: 1.4; box-shadow: 0 10px 30px rgba(0, 0, 0, .4); animation: pw-in .35s cubic-bezier(.2, 1.4, .4, 1); }
.tour-bubble b { display: block; font: 700 1.1rem Oswald, sans-serif; letter-spacing: .3px; margin-bottom: 2px; }
.tour-bubble::after { content: ''; position: absolute; left: calc(var(--ax, 50%) - 8px); bottom: -8px; border: 8px solid transparent; border-bottom: 0; border-top-color: #ffe600; }
.tour-bubble.below::after { bottom: auto; top: -8px; border-top: 0; border-bottom: 8px solid #ffe600; }
.tour-row { display: flex; align-items: center; gap: 6px; margin-top: 8px; }
.tour-row small { flex: 1; font-weight: 700; opacity: .65; }
.tour-row .btn { color: #2a1a00; } .tour-row .btn.ghost { background: rgba(0, 0, 0, .08); border-color: transparent; box-shadow: none; }
body.calm .tour-ring { transition: none; }
/* first-time tips for the deeper games */
.welcome.tips .wl-kicker { font: 800 .7rem Inter, sans-serif; letter-spacing: 2px; text-transform: uppercase; color: var(--hi); text-align: center; margin-bottom: 8px; }
.tip-row { display: flex; gap: 10px; align-items: flex-start; text-align: left; margin: 8px 0; }
.tip-row > span { flex: none; width: 38px; height: 38px; display: grid; place-items: center; font-size: 1.3rem; border-radius: 12px; background: var(--inset); }
.tip-row p { margin: 0; font-size: .88rem; line-height: 1.4; } .tip-row p b { display: block; font-size: .95rem; }

/* Locker → Cards: find a card, filter, and the country sets you can tap */
.card-search { display: grid; gap: 8px; margin: 12px 0 8px; scroll-margin-top: 70px; }
.card-filters { display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; }
.card-filters button { flex: none; white-space: nowrap; }
.cards-head { margin: 4px 0 8px; font-weight: 700; font-size: .9rem; }
button.nat-row { font: inherit; color: inherit; border: 0; text-align: left; width: 100%; cursor: pointer; }

/* the comparison: what wins it, and the tie-breakers (5.38) */
.cmp-points td small { display: block; font-size: .66rem; font-weight: 700; text-transform: uppercase; letter-spacing: .5px; color: var(--muted); }
.cmp-points tr.tiebreak td { opacity: .75; font-size: .92em; }
.opp-dots { display: flex; justify-content: center; gap: 5px; margin: 10px 0; }
.opp-dots i { width: 16px; height: 16px; border-radius: 50%; background: var(--inset); border: 2px solid var(--line); }
.opp-dots i.on { background: var(--accent); border-color: var(--accent); }
.feed-h { display: flex; align-items: center; justify-content: space-between; }

/* online: this month's record, reactions to a result, and Home's your-move card (5.38) */
.f-month { display: block; font-size: .72rem; color: var(--muted); } .f-month b.w { color: var(--good); } .f-month b.l { color: var(--bad); }
.o-react { margin: 6px 0 12px; text-align: center; }
.o-their { margin: 0 0 6px; font-size: .95rem; } .o-their span { font-size: 1.6rem; vertical-align: middle; margin-left: 4px; display: inline-block; animation: pop .4s; }
.o-rx { display: flex; align-items: center; justify-content: center; gap: 4px; flex-wrap: wrap; }
.o-rx small { width: 100%; color: var(--muted); font-weight: 700; font-size: .72rem; text-transform: uppercase; letter-spacing: 1px; }
.o-rx button { font-size: 1.5rem; width: 46px; height: 46px; border-radius: 14px; border: 2px solid var(--line); background: var(--panel); cursor: pointer; }
.o-rx button.on { border-color: var(--accent); background: var(--inset); transform: scale(1.08); }
.your-move { display: flex; align-items: center; gap: 12px; padding: 12px 14px; margin: 0 0 12px; border-radius: 18px; background: linear-gradient(135deg, #2563eb, #7c3aed); color: #fff; text-decoration: none; box-shadow: 0 4px 0 rgba(0,0,0,.25); animation: pop .4s; }
.your-move > span:first-child { font-size: 1.8rem; } .your-move b { display: block; font: 700 1.05rem Oswald, sans-serif; } .your-move small { opacity: .85; }
.your-move .ym-go { margin-left: auto; font-weight: 800; background: rgba(255,255,255,.2); padding: 6px 12px; border-radius: 12px; }

/* 5.39 watch along: their game drawn live, and what's happened move by move */
.watch-game { margin: 6px 0 10px; padding: 8px 6px 10px; border-radius: 16px; background: var(--inset); position: relative; }
.watch-game .dock { height: auto; min-height: 0; }
.watch-game .reel { cursor: default; }
.watch-game .wild-btn { pointer-events: none; }
.watch-wait { display: block; text-align: center; font-weight: 800; color: var(--muted); padding: 14px 0; }
.ch-feed summary { display: flex; justify-content: space-between; align-items: center; }
.ch-feed summary small { color: var(--muted); font-weight: 700; }
.fd-list { list-style: none; margin: 6px 0 0; padding: 0; max-height: 340px; overflow-y: auto; }
.fd-list li { display: grid; grid-template-columns: 28px minmax(0, 1fr) auto; gap: 8px; align-items: center; padding: 7px 4px; border-top: 1px solid rgba(127,127,127,.15); }
.fd-list li:first-child { border-top: 0; }
.fd-i { font-size: 1.15rem; text-align: center; }
.fd-t { min-width: 0; display: flex; flex-direction: column; }
.fd-t b { font-size: .86rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fd-t small { font-size: .74rem; color: var(--muted); line-height: 1.25; }
.fd-list em { font-style: normal; font-weight: 800; font-size: .86rem; }
.fd-list em.pos { color: #3ccf7a; } .fd-list em.neg { color: #ff6b6b; }
/* 5.39: a challenge / online full time: the result against them first, your own game on its own tab */
.done-tabs { margin: 4px 0 12px; position: sticky; top: 0; z-index: 5; }
.done-vs .ch-verdict { margin-top: 0; }

/* each card back's pattern and colour, for anything that wants to wear it (5.39.2; the reels went back to their own look in 5.39.4) */
body { --cb-bg: repeating-linear-gradient(45deg, #0b3d2e 0 .7em, #0f4b39 .7em 1.4em); --cb-edge: #d4af37; }
body.cbk-carbon { --cb-bg: repeating-linear-gradient(45deg, #1c1f24 0 .35em, #262a31 .35em .7em); --cb-edge: #9ca3af; }
body.cbk-retro { --cb-bg: repeating-linear-gradient(90deg, #c2410c 0 .5em, #f4e9d0 .5em 1em); --cb-edge: #c2410c; }
body.cbk-chaos { --cb-bg: conic-gradient(from 0deg, #0e1428, #22d3ee, #0e1428, #a855f7, #0e1428); --cb-edge: #22d3ee; }
body.cbk-night { --cb-bg: radial-gradient(circle at 20% 40%, #fff 0 1px, transparent 2px), radial-gradient(circle at 70% 60%, #fff 0 1px, transparent 2px), linear-gradient(90deg, #0b1638, #1e3a8a); --cb-edge: #93c5fd; }
body.cbk-holo { --cb-bg: linear-gradient(90deg, #f0abfc, #93c5fd, #6ee7b7, #fde68a, #f0abfc); --cb-edge: #c4b5fd; }
body.cbk-gold { --cb-bg: linear-gradient(90deg, #fde68a, #b45309 45%, #fde68a 70%, #92400e); --cb-edge: #f59e0b; }
body.cbk-club { --cb-bg: repeating-linear-gradient(90deg, var(--club1, #16803c) 0 .8em, var(--club2, #fff) .8em 1.1em); --cb-edge: var(--club1, #16803c); }

/* …and your best cards dress the pitch: a Gold, Legend or Icon card you've finished, or a country's Nº1, shows in its
   tier's colours once he's signed (a Nº1 with his flag across the corner, like the card); Legends and Icons catch the light */
.slot.filled.own { isolation: isolate; --own: #f2c230; --own-bg: linear-gradient(160deg, rgba(253, 230, 138, .5), rgba(180, 83, 9, .25)); box-shadow: inset 0 0 0 2px var(--own); }
.slot.filled.own-l { --own: #b57cf2; --own-bg: linear-gradient(160deg, rgba(196, 140, 255, .5), rgba(91, 33, 182, .3)); }
.slot.filled.own-i { --own: #9be7ff; --own-bg: linear-gradient(160deg, rgba(199, 243, 255, .55), rgba(56, 120, 200, .3)); }
.slot.filled.own-no1 { --own: #f6e27a; }
.slot.filled.own::before { content: ''; position: absolute; inset: 0; border-radius: inherit; background: var(--own-bg); pointer-events: none; z-index: -1; }
.own-gem { position: absolute; right: 3px; bottom: 3px; z-index: 2; font: 700 8px/1 Oswald, sans-serif; font-style: normal; color: #fff6c2; pointer-events: none; filter: drop-shadow(0 1px 1px rgba(0, 0, 0, .6)); }
.slot.own:not(.own-no1) .own-gem { font-size: 9px; }
.own-flag { position: absolute; z-index: -1; top: -6px; right: -10px; font-size: 34px; line-height: 1; font-style: normal; transform: rotate(16deg); opacity: .4; pointer-events: none; }
.slot.filled.own-l::after, .slot.filled.own-i::after { content: ''; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; z-index: 1;
  background: linear-gradient(115deg, transparent 35%, rgba(255, 255, 255, .45) 50%, transparent 65%) -150% 0 / 250% 100% no-repeat; animation: own-glint 4.5s ease-in-out infinite; }
.slot.filled.own-i::after { animation-duration: 3.2s; background-image: linear-gradient(115deg, transparent 35%, rgba(199, 243, 255, .65) 50%, transparent 65%); }
@keyframes own-glint { 0%, 55% { background-position: -150% 0; } 100% { background-position: 150% 0; } }
body.calm .slot.filled.own::after { animation: none; display: none; }