:root { --bg: #eef2f7; --bg-2: #e4eaf2; --panel: #ffffff; --panel-2: #f4f7fb; --field: #ffffff; /* form controls (selects, buttons) - flips dark in dark mode */ --line: #d7dee8; --ink: #17222f; --muted: #64748b; --accent: #ef6c00; --accent-2: #ff8f2e; --good: #1c9e57; --bad: #d23b3b; --gate: #c8860a; --body-grad: linear-gradient(180deg, #f6f9fc 0%, var(--bg) 40%, var(--bg-2) 100%); --shadow: rgba(20, 40, 70, 0.05); --radius: 14px; font-synthesis: none; color-scheme: light; } /* Dark mode - same accent, inverted surfaces. Applied via data-theme on . */ :root[data-theme="dark"] { --bg: #0e1420; --bg-2: #161d2c; --panel: #1a2231; --panel-2: #222c3e; --field: #222c3e; --line: #313d52; --ink: #e8eef6; --muted: #93a1b6; --accent: #ff7d1a; --accent-2: #ff9a44; --good: #2ecc71; --bad: #ef5b5b; --gate: #e0a83a; --body-grad: linear-gradient(180deg, #121a29 0%, var(--bg) 45%, var(--bg-2) 100%); --shadow: rgba(0, 0, 0, 0.35); color-scheme: dark; } * { box-sizing: border-box; } body { margin: 0; background: var(--body-grad); color: var(--ink); font-family: system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; line-height: 1.45; min-height: 100vh; } /* Help (left) and theme (right) buttons - in-flow in the header row so they line up with the logo and the mode tabs, instead of floating a few px above them. */ .corner-btn { flex: 0 0 auto; width: 40px; height: 40px; border-radius: 50%; cursor: pointer; border: 1px solid var(--line); background: var(--panel); line-height: 1; display: inline-flex; align-items: center; justify-content: center; box-shadow: 0 2px 8px var(--shadow); transition: transform 0.12s ease, border-color 0.12s ease, color 0.12s ease; } .corner-btn:hover { transform: translateY(-1px); border-color: var(--accent); } .help-btn { color: var(--muted); font-size: 1.25rem; font-weight: 800; } .help-btn:hover { color: var(--accent); } .settings-btn { color: var(--ink); } .settings-btn .ic { width: 1.15em; height: 1.15em; } /* Settings (gear) popup: anchored under the gear, holds the Theme + Look segmented toggles. */ .settings-wrap { position: relative; display: inline-flex; } .settings-menu { position: absolute; top: calc(100% + 8px); right: 0; z-index: 60; min-width: 248px; padding: 0.5rem; border-radius: 12px; background: var(--panel); border: 1px solid var(--line); box-shadow: 0 12px 32px var(--shadow); display: flex; flex-direction: column; gap: 0.15rem; } .settings-menu.hidden { display: none; } .set-row { display: flex; align-items: center; justify-content: space-between; gap: 0.6rem; padding: 0.3rem 0.35rem; } .set-lbl { font-size: 0.82rem; font-weight: 600; color: var(--muted); } .seg { display: inline-flex; padding: 2px; border-radius: 8px; background: var(--bg); border: 1px solid var(--line); } .seg-opt { border: 0; background: transparent; cursor: pointer; color: var(--muted); font: inherit; font-size: 0.78rem; font-weight: 600; padding: 0.28rem 0.62rem; border-radius: 6px; transition: background 0.12s ease, color 0.12s ease; } .seg-opt:hover { color: var(--ink); } .seg-opt.on { background: var(--accent); color: #fff; } .set-sep { height: 1px; background: var(--line); margin: 0.35rem 0.1rem; } .set-profile { display: flex; flex-direction: column; gap: 0.4rem; padding: 0.15rem 0.35rem 0.3rem; } .pf-input, .pf-select { width: 100%; font: inherit; font-size: 0.82rem; color: var(--ink); background: var(--bg); border: 1px solid var(--line); border-radius: 8px; padding: 0.42rem 0.55rem; } .pf-input::placeholder { color: var(--muted); } .pf-input:focus, .pf-select:focus { outline: none; border-color: var(--accent); } .pf-hint { font-size: 0.68rem; color: var(--muted); line-height: 1.35; } .pf-badges-btn { margin-top: 0.1rem; align-self: flex-start; background: var(--bg); color: var(--ink); border: 1px solid var(--line); border-radius: 8px; padding: 0.4rem 0.72rem; font: inherit; font-size: 0.8rem; font-weight: 600; cursor: pointer; } .pf-badges-btn:hover { border-color: var(--accent); } /* Badge gallery modal */ .badge-modal { position: fixed; inset: 0; z-index: 62; display: flex; align-items: center; justify-content: center; padding: 1.2rem; } .badge-modal.hidden { display: none; } .badge-backdrop { position: absolute; inset: 0; background: rgba(6,10,18,0.66); backdrop-filter: blur(3px); } .badge-card { position: relative; width: min(460px, 94vw); max-height: 86vh; overflow-y: auto; background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); padding: 1.3rem 1.2rem; box-shadow: 0 20px 60px rgba(0,0,0,0.5); } .badge-close { position: absolute; top: 0.6rem; right: 0.8rem; background: none; border: none; color: var(--muted); font-size: 1.2rem; line-height: 1; cursor: pointer; } .badge-title { font-size: 1.1rem; margin: 0 0 0.3rem; text-align: center; } .badge-sub { font-size: 0.8rem; color: var(--muted); text-align: center; margin: 0 0 1rem; line-height: 1.4; } .feat-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0.6rem; } .feat { display: flex; flex-direction: column; align-items: center; gap: 0.22rem; text-align: center; background: var(--bg); border: 1px solid var(--line); border-radius: 12px; padding: 0.8rem 0.6rem; font: inherit; cursor: pointer; transition: border-color 0.12s ease; } .feat.on:hover { border-color: var(--accent); } .feat.locked { cursor: default; opacity: 0.5; } .feat.sel { border-color: var(--accent); box-shadow: inset 0 0 0 1px var(--accent); background: color-mix(in srgb, var(--accent) 12%, var(--bg)); } .feat-em { font-size: 1.7rem; line-height: 1; display: inline-flex; align-items: center; justify-content: center; height: 1.7rem; } .feat-em .feat-ic { width: 1.6rem; height: 1.6rem; color: var(--accent); } .feat.locked .feat-em { filter: grayscale(1); } .feat.locked .feat-em .feat-ic { color: var(--muted); } .feat-lbl { font-size: 0.82rem; font-weight: 700; color: var(--ink); } .feat-how { font-size: 0.66rem; color: var(--muted); line-height: 1.3; } .feat.sel .feat-how { color: var(--accent); font-weight: 600; } /* Badge-unlock celebration - pops in after a game when a NEW feat is earned, with a confetti burst. */ .feat-unlock { position: fixed; inset: 0; z-index: 200; display: flex; align-items: center; justify-content: center; } .feat-unlock.hidden { display: none; } /* EuroLeague Champion celebration - a trophy pop-up (auto-closes; tap to dismiss) */ .champ-celebrate { position: fixed; inset: 0; z-index: 210; display: flex; align-items: center; justify-content: center; } .champ-celebrate.hidden { display: none; } .cc-backdrop { position: absolute; inset: 0; background: rgba(6, 10, 18, 0.66); backdrop-filter: blur(3px); animation: ccFade 0.3s ease both; } @keyframes ccFade { from { opacity: 0; } to { opacity: 1; } } .cc-card { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center; gap: 0.6rem; padding: 2rem 2.6rem 2.2rem; cursor: pointer; animation: ccPop 0.55s cubic-bezier(0.2, 1.35, 0.35, 1) both; } @keyframes ccPop { 0% { opacity: 0; transform: scale(0.6) translateY(20px); } 100% { opacity: 1; transform: none; } } .cc-trophy { filter: drop-shadow(0 6px 26px rgba(230, 200, 90, 0.55)); animation: ccTrophy 0.9s ease-out both; } .cc-trophy .ic { width: 100px; height: 100px; } @keyframes ccTrophy { 0% { transform: scale(0.5) rotate(-12deg); } 60% { transform: scale(1.14) rotate(6deg); } 100% { transform: scale(1) rotate(0); } } .cc-title { font-family: 'Archivo', system-ui, sans-serif; font-weight: 800; font-size: 1.7rem; letter-spacing: 0.01em; color: #e6c65a; text-align: center; text-shadow: 0 2px 18px rgba(230, 198, 90, 0.4); } .cc-confetti-wrap { position: absolute; inset: 0; overflow: visible; pointer-events: none; } .cc-confetti { position: absolute; top: -10px; left: calc(var(--i) * 4.6%); width: 7px; height: 11px; border-radius: 2px; background: hsl(calc(var(--i) * 43deg), 85%, 62%); opacity: 0; animation: ccConfetti 1.5s ease-in both; animation-delay: calc(var(--i) * 0.03s); } @keyframes ccConfetti { 0% { opacity: 0; transform: translateY(-24px) rotate(0); } 15% { opacity: 1; } 100% { opacity: 0; transform: translateY(180px) rotate(620deg); } } @media (prefers-reduced-motion: reduce) { .cc-trophy, .cc-card, .cc-confetti { animation: none; } .cc-confetti { display: none; } } .fu-backdrop { position: absolute; inset: 0; background: rgba(0, 0, 0, 0.55); } .fu-card { position: relative; z-index: 1; flex: 0 0 auto; text-align: center; width: 320px; max-width: calc(100% - 2.4rem); background: var(--card, var(--bg)); border: 1px solid var(--line); border-radius: 18px; padding: 1.5rem 1.4rem 1.25rem; box-shadow: 0 24px 60px rgba(0, 0, 0, 0.5); overflow: hidden; animation: fu-pop 0.5s cubic-bezier(0.18, 0.9, 0.3, 1.3) both; } @keyframes fu-pop { 0% { transform: scale(0.6); opacity: 0; } 100% { transform: scale(1); opacity: 1; } } .fu-kicker { font-size: 0.76rem; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; color: var(--accent); margin-bottom: 0.95rem; } .fu-badges { display: flex; flex-wrap: wrap; justify-content: center; gap: 1rem; margin-bottom: 1.1rem; } .fu-badge { display: flex; flex-direction: column; align-items: center; gap: 0.45rem; } .fu-em { display: inline-flex; align-items: center; justify-content: center; width: 66px; height: 66px; border-radius: 50%; background: color-mix(in srgb, var(--accent) 16%, var(--bg)); font-size: 2.2rem; line-height: 1; animation: fu-badge-in 0.6s 0.12s cubic-bezier(0.18, 0.9, 0.3, 1.4) both; } .fu-em .fu-ic { width: 34px; height: 34px; color: var(--accent); } @keyframes fu-badge-in { 0% { transform: scale(0) rotate(-25deg); } 100% { transform: scale(1) rotate(0); } } .fu-name { font-size: 0.9rem; font-weight: 700; color: var(--ink); } .fu-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.5rem; align-items: center; } .fu-actions .play-btn { margin: 0; } .fu-confetti-wrap { position: absolute; top: 38%; left: 50%; width: 0; height: 0; pointer-events: none; } .fu-confetti { position: absolute; top: 0; left: 0; width: 7px; height: 12px; border-radius: 2px; opacity: 0; background: #fff; /* Modern: white confetti */ animation: fu-burst 0.95s calc(var(--i) * 0.01s) ease-out forwards; } :root[data-look="classic"] .fu-confetti { background: hsl(calc(var(--i) * 40), 85%, 60%); } /* Classic: colourful */ @keyframes fu-burst { 0% { opacity: 1; transform: translate(0, 0) scale(1); } 70% { opacity: 1; } 100% { opacity: 0; transform: translate(calc(cos(var(--i) * 22.5deg) * 120px), calc(sin(var(--i) * 22.5deg) * 120px + 42px)) rotate(240deg) scale(0.5); } } @media (prefers-reduced-motion: reduce) { .fu-card, .fu-em { animation: none; } .fu-confetti { display: none; } } /* Crews - the ＋Crews manager chip in the hub scope row + the management modal */ .hub-crews-btn { display: inline-flex; align-items: center; background: var(--bg); border: 1px dashed var(--line); border-radius: 999px; padding: 0.28rem 0.62rem; font: inherit; font-size: 0.78rem; font-weight: 700; color: var(--muted); cursor: pointer; } .hub-crews-btn:hover { color: var(--accent); border-color: var(--accent); } .crews-modal { position: fixed; inset: 0; z-index: 64; display: flex; align-items: center; justify-content: center; padding: 1.2rem; } .crews-modal.hidden { display: none; } .crews-backdrop { position: absolute; inset: 0; background: rgba(6,10,18,0.66); backdrop-filter: blur(3px); } .crews-card { position: relative; width: min(440px, 94vw); max-height: 86vh; overflow-y: auto; background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); padding: 1.3rem 1.2rem; box-shadow: 0 20px 60px rgba(0,0,0,0.5); } .crews-close { position: absolute; top: 0.6rem; right: 0.8rem; background: none; border: none; color: var(--muted); font-size: 1.2rem; line-height: 1; cursor: pointer; } .crews-title { font-size: 1.1rem; margin: 0 0 0.3rem; text-align: center; } .crews-sub { font-size: 0.8rem; color: var(--muted); text-align: center; margin: 0 0 1rem; line-height: 1.45; } .crews-msg { font-size: 0.82rem; background: color-mix(in srgb, var(--accent) 14%, var(--bg)); border: 1px solid color-mix(in srgb, var(--accent) 40%, transparent); border-radius: 10px; padding: 0.55rem 0.7rem; margin-bottom: 0.9rem; text-align: center; color: var(--ink); } .crew-list { list-style: none; margin: 0 0 1rem; padding: 0; display: flex; flex-direction: column; gap: 0.4rem; } .crew-list li { display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; background: var(--bg); border: 1px solid var(--line); border-radius: 10px; padding: 0.5rem 0.7rem; } .crew-nm { font-weight: 700; color: var(--ink); } .crew-meta { font-size: 0.72rem; color: var(--muted); margin-left: auto; } .crew-code { color: var(--accent); font-variant-numeric: tabular-nums; letter-spacing: 0.04em; } .crew-empty { font-size: 0.82rem; color: var(--muted); text-align: center; margin: 0 0 1rem; line-height: 1.4; } .crews-form { display: flex; gap: 0.5rem; align-items: stretch; } .crews-form .pf-input { flex: 1 1 auto; } .crews-form .play-btn, .crews-form .mini-btn { flex: 0 0 auto; margin: 0; } .crews-or { text-align: center; color: var(--muted); font-size: 0.75rem; margin: 0.6rem 0; } /* Onboarding overlay */ .onboarding { position: fixed; inset: 0; z-index: 50; display: flex; align-items: center; justify-content: center; } .ob-backdrop { position: absolute; inset: 0; background: rgba(8, 12, 20, 0.62); backdrop-filter: blur(3px); } .ob-card { position: relative; z-index: 1; width: min(440px, calc(100vw - 2rem)); background: var(--panel); border: 1px solid var(--line); border-radius: 18px; padding: 2rem 1.8rem 1.4rem; text-align: center; box-shadow: 0 20px 60px rgba(0, 0, 0, 0.4); animation: obIn 0.35s cubic-bezier(0.2, 1.1, 0.4, 1) both; } @keyframes obIn { 0% { opacity: 0; transform: translateY(14px) scale(0.97); } 100% { opacity: 1; transform: none; } } .ob-skip { position: absolute; top: 0.7rem; right: 0.9rem; background: none; border: none; color: var(--muted); font-size: 0.82rem; cursor: pointer; padding: 0.3rem; } .ob-skip:hover { color: var(--ink); } .ob-icon { font-size: 2.6rem; line-height: 1; margin-bottom: 0.5rem; } .ob-title { font-size: 1.35rem; margin: 0 0 0.5rem; } .ob-body { color: var(--muted); font-size: 0.98rem; line-height: 1.5; margin: 0 0 1.2rem; } .ob-body b { color: var(--ink); font-weight: 700; } .ob-identity { display: flex; flex-direction: column; gap: 0.5rem; text-align: left; margin: 0 0 1.2rem; } .ob-identity .pf-input, .ob-identity .pf-select { font-size: 0.95rem; padding: 0.6rem 0.7rem; } .ob-dots { display: flex; justify-content: center; gap: 0.4rem; margin-bottom: 1.2rem; } .ob-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--line); transition: background 0.2s, width 0.2s; } .ob-dot.on { background: var(--accent); width: 20px; border-radius: 4px; } .ob-nav { display: flex; gap: 0.6rem; justify-content: center; align-items: center; } .ob-nav .ob-back { min-width: 84px; } .ob-nav .ob-next { min-width: 84px; padding-left: 1.6rem; padding-right: 1.6rem; } .ob-nav .ob-back:disabled { opacity: 0.35; cursor: not-allowed; } .ob-nav.one { justify-content: center; } .ob-intro-link { display: block; margin: 0.8rem auto 0; background: none; border: none; color: var(--muted); font-size: 0.82rem; cursor: pointer; } .ob-intro-link:hover { color: var(--accent); } /* Logo - placeholder lockup: crown hanging off the K, basketball alongside. Header is a single aligned row: [? · logo] on the left, [modes · ☀] on the right. The extra padding-top gives the crown (which pokes above the K) room so it isn't clipped by the top. */ .topbar { display: flex; align-items: center; justify-content: space-between; gap: 0.8rem 1.2rem; /* same max-width + horizontal padding as
so the logo's left edge lines up with the player box, and the right buttons line up with the sidebar's right edge. */ max-width: 1240px; margin: 0 auto; width: 100%; padding: 2.6rem 1rem 0.6rem; flex-wrap: wrap; } .topbar-side { display: inline-flex; align-items: center; gap: 0.8rem; } .logo { display: inline-flex; align-items: center; gap: 0.85rem; } .logo-type { display: flex; flex-direction: column; align-items: flex-start; font-weight: 800; letter-spacing: -0.045em; line-height: 0.86; font-size: clamp(2.4rem, 5vw, 3.4rem); color: var(--ink); text-transform: none; } .logo-type .line1, .logo-type .line2 { display: block; } .logo-type .of { color: var(--muted); font-size: 0.52em; letter-spacing: -0.02em; vertical-align: 0.28em; } .logo-type .line2 { color: var(--accent); } .kwrap { position: relative; display: inline-block; } .kwrap .k { position: relative; } .crown { position: absolute; left: 48%; top: -0.52em; width: 0.62em; height: auto; transform: translateX(-50%) rotate(-9deg); fill: var(--accent); stroke: var(--accent); stroke-width: 1.5; stroke-linejoin: round; } .ball { width: clamp(44px, 8vw, 66px); height: auto; } .ball .ball-body { fill: var(--accent); } .ball .ball-lines { fill: none; stroke: #7a3200; stroke-width: 3.5; } /* ---- Modern-look logo (emblem + Archivo ExtraBold wordmark). Swapped with the Classic lockup by data-look; default look is "modern", so the Classic lockup is hidden unless the look is explicitly classic. */ .logo-modern { display: none; gap: 0.7rem; } [data-look="modern"] .logo-classic { display: none; } [data-look="modern"] .logo-modern { display: inline-flex; } .m-emblem { display: flex; flex-direction: column; align-items: center; } .m-crown { width: clamp(28px, 4.4vw, 38px); height: auto; fill: var(--accent); margin-bottom: -3px; } .m-ball { width: clamp(38px, 6.4vw, 50px); height: auto; } .m-ball circle, .m-ball path { stroke: var(--accent); } .m-type { display: flex; flex-direction: column; align-items: flex-start; font-family: 'Archivo', system-ui, sans-serif; font-weight: 800; line-height: 0.94; letter-spacing: -0.005em; } .m-l1, .m-l2 { display: block; font-size: clamp(1.9rem, 4vw, 2.7rem); } .m-l1 { color: var(--ink); } .m-l2 { color: var(--accent); } .m-of { text-transform: lowercase; color: var(--muted); font-weight: 600; font-size: 0.46em; letter-spacing: 0.02em; margin-left: 0.32em; vertical-align: 0.06em; } /* ---- Modern look: DISPLAY type (Archivo ExtraBold). Wide, open grotesque at weight 800 - natural sentence case (NOT all-caps); the DOM text is already title/sentence case, so we leave text-transform alone. Applied only to large display elements - section titles, hero numbers, reveal names, mode tabs. Small labels + body copy stay in the readable sans, Classic untouched. */ [data-look="modern"] h2, [data-look="modern"] .pickinfo, [data-look="modern"] .cat-modal-h, [data-look="modern"] .ob-title, [data-look="modern"] .lobby-body h2, [data-look="modern"] .ar-reveal-name, [data-look="modern"] .result-card .record, [data-look="modern"] .daily-lock .record, [data-look="modern"] .mode-tab { font-family: 'Archivo', system-ui, sans-serif; font-weight: 800; letter-spacing: 0.005em; } /* Big hero numbers want tighter tracking than the headings. */ [data-look="modern"] .result-card .record, [data-look="modern"] .daily-lock .record { letter-spacing: 0; } main { max-width: 1240px; margin: 0 auto; padding: 0.7rem 1rem 1rem; width: 100%; } .hidden { display: none !important; } /* Mode tabs - right side of the header row */ .modes { display: flex; justify-content: flex-end; gap: 0.3rem; flex-wrap: wrap; } .mode-tab { background: transparent; color: var(--muted); border: 1px solid var(--line); padding: 0.4rem 1.2rem; border-radius: 999px; cursor: pointer; font-size: 0.9rem; font-weight: 700; transition: color 0.12s, border-color 0.12s, background 0.12s; } .mode-tab:hover { color: var(--ink); border-color: var(--muted); } .mode-tab.on { background: var(--accent); border-color: var(--accent); color: #fff; box-shadow: 0 4px 14px rgba(239,108,0,0.28); } /* Mobile mode dropdown - hidden on desktop (the tabs are used there). Selected mode shows in the brand orange, with a matching custom chevron (native arrow removed via appearance:none). */ .mode-select { display: none; font: inherit; font-weight: 800; font-size: 0.95rem; color: var(--accent); background: var(--field); border: 1.5px solid var(--accent); border-radius: 999px; padding: 0.4rem 2.1rem 0.4rem 1rem; cursor: pointer; -webkit-appearance: none; -moz-appearance: none; appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5l5 5 5-5' stroke='%23f5731a' stroke-width='2' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 0.85rem center; } .mode-select:focus { outline: none; box-shadow: 0 0 0 3px rgba(239,108,0,0.22); } .mode-select option { color: var(--ink); font-weight: 600; } /* the open list uses normal ink */ /* Daily status bar */ /* Mode status line (daily / versus / salary). Kept slim so the board below sits in the same place as in Classic (which has no bar) - "everything fits" should hold in every mode. */ /* "Daily · type" label sitting inline to the LEFT of "Pick n of 6" - plain text (no pill box), on one line, with a vertical divider before the pick counter (emulating the classic bar's Spin | re-spins). */ .daily-bar { display: inline-flex; align-items: center; flex-wrap: nowrap; white-space: nowrap; gap: 0.32rem; font-size: 0.92rem; color: var(--muted); } .daily-bar.hidden { display: none; } /* Align every part on one centered line (the icons were baseline-aligned before, pushing "Daily" lower than "· type"). */ .daily-bar > * { display: inline-flex; align-items: center; } .daily-bar .dl { font-weight: 800; color: var(--accent); gap: 0.28rem; } .daily-bar .dl .ic { width: 0.95rem; height: 0.95rem; } .daily-bar .dl-theme { display: inline-flex; align-items: center; gap: 0.28rem; font-weight: 800; color: var(--ink); background: color-mix(in srgb, var(--accent) 16%, transparent); border: 1px solid color-mix(in srgb, var(--accent) 40%, transparent); border-radius: 999px; padding: 0.08rem 0.55rem; margin: 0 0.15rem; } .daily-bar b { color: var(--ink); } .daily-bar .streak { color: var(--gate); font-weight: 700; } /* "What kind of Daily is today" - plain text in the bar (no nested pill). Special (themed) days are a tappable button with an info dot; the accent hue lives only on the info dot, not a background box. */ .dl-type { display: inline-flex; align-items: center; gap: 0.32rem; font-weight: 800; color: var(--ink); font-size: 0.82rem; line-height: 1.4; background: none; border: none; padding: 0; } button.dl-type.special { cursor: pointer; font-family: inherit; } button.dl-type.special:hover .dl-type-i { opacity: 1; } .dl-type-i { display: inline-flex; color: var(--accent); opacity: 0.75; } .dl-type-i .ic { width: 0.92rem; height: 0.92rem; } .dl-type .ic { width: 0.95rem; height: 0.95rem; } .ob-theme-emoji { font-size: 2.6rem; line-height: 1; margin-bottom: 0.4rem; display: flex; justify-content: center; } .ob-theme-emoji .ic { width: 2.4rem; height: 2.4rem; color: var(--accent); } /* No re-spins on a shared board - it is the whole challenge. Daily, Versus and Dynasty's Weekly all set body[data-fixed-board]; Dynasty's Endless is a free draft and keeps them. */ body[data-fixed-board="1"] .respins { display: none; } .daily-bar .dl-link { color: var(--accent); font-weight: 700; text-decoration: none; } .daily-bar .dl-link:hover { text-decoration: underline; } /* Salary cap - budget meter in the mode bar */ .cap-meter { display: inline-block; vertical-align: middle; width: 130px; height: 9px; margin: 0 0.5rem; background: var(--bg-2); border-radius: 6px; overflow: hidden; } .cap-fill { display: block; height: 100%; background: var(--accent); border-radius: 6px; transition: width 0.25s ease; } .cap-fill.low { background: var(--bad); } .cap-left { color: var(--ink); } /* price chip on a player card */ .card .price { flex: 0 0 auto; font-size: 0.7rem; font-weight: 800; color: var(--good); background: rgba(28,158,87,0.13); padding: 0.05rem 0.34rem; border-radius: 5px; letter-spacing: -0.01em; } .card .price.over { color: var(--bad); background: rgba(210,59,59,0.12); } .tag.over { background: rgba(210,59,59,0.13); color: var(--bad); } .cap-note { font-size: 0.82rem; color: var(--good); margin-top: 0.5rem; font-weight: 700; } /* Daily lockout */ .daily-lock { text-align: center; padding: 1.4rem 1rem; } .daily-lock.has-toggle { position: relative; padding-top: 2.6rem; } /* room for the top-right Leaderboard toggle */ .dl-badge { display: inline-block; font-size: 0.7rem; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted); margin-bottom: 0.4rem; } .daily-lock .record { font-size: 3.4rem; font-weight: 800; letter-spacing: -0.03em; line-height: 1; } .daily-lock .record.perfect { color: var(--good); } .daily-lock .verdict { color: var(--muted); margin: 0.3rem 0 0.9rem; font-size: 1.02rem; } .hist-strip { display: flex; justify-content: center; gap: 0.35rem; margin: 1.1rem 0 0.6rem; flex-wrap: wrap; } .hist-cell { display: flex; flex-direction: column; align-items: center; gap: 0.15rem; min-width: 46px; padding: 0.35rem 0.3rem; border-radius: 9px; border: 1px solid var(--line); background: var(--panel-2); } .hist-cell .hc-d { font-size: 0.64rem; color: var(--muted); text-transform: uppercase; letter-spacing: 0.03em; } .hist-cell .hc-r { font-size: 0.78rem; font-weight: 700; color: var(--muted); font-variant-numeric: tabular-nums; } .hist-cell.done .hc-r { color: var(--ink); } /* win/loss hue - green if that day reached the playoffs, red if it missed (before .today so the current day keeps its orange border). */ .hist-cell.win { background: color-mix(in srgb, var(--good) 16%, var(--panel-2)); border-color: color-mix(in srgb, var(--good) 45%, var(--line)); } .hist-cell.loss { background: color-mix(in srgb, var(--bad) 13%, var(--panel-2)); border-color: color-mix(in srgb, var(--bad) 38%, var(--line)); } .hist-cell.win .hc-r { color: var(--good); } .hist-cell.loss .hc-r { color: var(--bad); } /* "Today" selection uses a white/ink ring, not orange - so it doesn't clash with the green/red hue. */ .hist-cell.today { border-color: var(--ink); box-shadow: inset 0 0 0 1px var(--ink); } .hist-cell.today .hc-d { color: var(--ink); } .dl-note { color: var(--muted); font-size: 0.8rem; margin: 0.4rem 0 1rem; } .dl-practice-note { color: var(--muted); font-size: 0.82rem; font-style: italic; margin: 0 0 0.5rem; } /* Daily leaderboard */ .dl-lb-btn { margin-top: 0.7rem; } .lb { text-align: left; margin: 1.2rem 0 0.4rem; padding-top: 1rem; border-top: 1px solid var(--line); } .lb-head { font-size: 0.72rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.05em; color: var(--muted); text-align: center; margin-bottom: 0.6rem; display: flex; justify-content: center; align-items: baseline; gap: 0.4rem; } .lb-count { font-weight: 700; letter-spacing: 0; text-transform: none; color: var(--accent); font-size: 0.7rem; } .lb-load, .lb-off { color: var(--muted); font-size: 0.84rem; text-align: center; padding: 0.6rem 0; } .lb-note { color: var(--muted); font-size: 0.82rem; text-align: center; margin: 0 0 0.6rem; } .lb-name { display: flex; gap: 0.32rem; justify-content: center; align-items: center; min-width: 0; } /* Leaderboard identity: country flag + tiny club badge + name (any piece omitted if unset). */ .lb-flag { flex: 0 0 auto; font-size: 1.05rem; line-height: 1; } .lb-badge { flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; vertical-align: middle; width: 24px; height: 24px; border-radius: 6px; font-weight: 800; font-size: 0.62rem; letter-spacing: -0.02em; } .lb-nm { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; } .lb-feat { flex: 0 0 auto; font-size: 0.95rem; line-height: 1; display: inline-flex; align-items: center; } .lb-feat .ic { width: 0.95rem; height: 0.95rem; color: var(--accent); } .lb-name input { flex: 1 1 auto; max-width: 220px; padding: 0.45rem 0.6rem; border-radius: 8px; border: 1px solid var(--line); background: var(--field); color: var(--ink); font: inherit; font-size: 0.9rem; } .lb-name input:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; } .lb-table { width: 100%; border-collapse: collapse; font-size: 0.86rem; } .lb-table td { padding: 0.62rem 0.5rem; border-bottom: 1px solid var(--line); } /* roomier rows */ .lb-table tr:last-child td { border-bottom: none; } .lb-rank { width: 2.2rem; text-align: right; font-variant-numeric: tabular-nums; font-weight: 800; color: var(--muted); } /* NB: this is a . `display:flex` took it OUT of the table layout, so the browser wrapped the remaining cells in an anonymous box and the row split in two with a gap down the middle (the row highlight visibly broke). Keep it a table cell; align/space the inline flag+badge+name instead. */ .lb-name-cell { font-weight: 600; overflow: hidden; max-width: 11rem; white-space: nowrap; vertical-align: middle; } .lb-name-cell > * { vertical-align: middle; } .lb-name-cell > * + * { margin-left: 0.32rem; } .lb-rec { text-align: right; font-variant-numeric: tabular-nums; font-weight: 700; white-space: nowrap; } .lb-cup { font-size: 0.92em; } .lb-stage { color: var(--muted); font-size: 0.76rem; text-align: right; } .lb-table tr.me td { background: rgba(239,108,0,0.1); } .lb-table tr.me .lb-rank, .lb-table tr.me .lb-name-cell { color: var(--accent); } /* G.O.A.T. has no arena/coach line, but the row still reserves its height so the sidebar court lines up with the other modes. */ .venue-idle.placeholder { visibility: hidden; } .lb-you { text-align: center; color: var(--muted); font-size: 0.82rem; margin-top: 0.6rem; } .lb-you b { color: var(--accent); font-variant-numeric: tabular-nums; } /* Versus - role chooser */ /* Shared mode-intro header for every opening screen that has one (Dynasty / G.O.A.T. / Versus): the mode's own mark, big, above the mode name - so the three entry screens read as one family. */ .mode-intro { text-align: center; padding-top: 1.4rem; } .mi-icon { font-size: 3.2rem; line-height: 1; margin-bottom: 0.3rem; } .mi-icon .ic { width: 1em; height: 1em; } .mi-h { font-size: 1.6rem; margin: 0.2rem 0 0.8rem; } /* top padding now comes from .mode-intro above it */ /* The shared mode lobby: icon + name (.mode-intro), one explainer line, then a centred column of actions. Versus set the pattern; Dynasty and G.O.A.T. now use the same one. */ .lobby-body { text-align: center; padding: 0 1rem 1.6rem; } .vi-icon { font-size: 2.4rem; margin-bottom: 0.3rem; } .lobby-body h2 { font-size: 1.4rem; margin: 0 0 0.5rem; } .lobby-body > p { max-width: 460px; margin: 0 auto 1.4rem; } .lobby-actions { display: flex; flex-direction: column; align-items: center; gap: 0.7rem; } /* Scenario day: the scenario takes the explainer's slot, since it IS what today is. */ .lobby-scen { margin: 0 auto 1.4rem; } .ls-tag { font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.06em; font-weight: 800; color: var(--gate); display: inline-flex; align-items: center; gap: 0.35rem; } .ls-title { font-size: 1.5rem; font-weight: 800; letter-spacing: -0.015em; margin: 0.25rem 0 0.1rem; } .ls-team { font-size: 0.92rem; font-weight: 600; color: var(--muted); } .vi-or { color: var(--muted); font-size: 0.8rem; text-transform: uppercase; letter-spacing: 0.06em; } .vi-accept { display: flex; gap: 0.4rem; width: min(420px, 100%); } .vi-accept input { flex: 1 1 auto; min-width: 0; padding: 0.55rem 0.8rem; border-radius: 999px; border: 1px solid var(--line); background: var(--field); color: var(--ink); font-size: 0.85rem; } .vi-accept input:focus { outline: none; border-color: var(--accent); } .versus-err { color: var(--bad); font-size: 0.82rem; margin: 0.3rem 0 0; } /* the box is always present so an error can be filled in without rebuilding the panel */ .versus-err:empty { display: none; } /* Versus - decided duel */ .vs-teams { display: flex; align-items: center; justify-content: center; gap: 1rem; margin: 0.8rem 0; } .vs-team { display: flex; flex-direction: column; align-items: center; min-width: 120px; } .vs-team .vt-nm { font-weight: 700; font-size: 0.9rem; } .vs-team .vt-rec { color: var(--muted); font-size: 0.82rem; } .vs-team.you .vt-nm { color: var(--accent); } .vs-vs { color: var(--muted); font-weight: 800; font-size: 0.8rem; } /* Each side of the duel is a button into its squad. */ button.vs-team { font: inherit; color: inherit; cursor: pointer; padding: 0.55rem 0.7rem; background: var(--panel-2); border: 1.5px solid var(--line); border-radius: 12px; transition: border-color 0.12s, transform 0.12s; } button.vs-team:hover { border-color: var(--accent); } button.vs-team:active { transform: scale(0.985); } /* who won reads off the boxes themselves, not just off the verdict line above them */ .vs-team.won { border-color: var(--good); background: color-mix(in srgb, var(--good) 10%, var(--panel-2)); } .vs-team.won .vt-nm { color: var(--good); } .vs-team.lost { border-color: color-mix(in srgb, var(--bad) 55%, var(--line)); background: color-mix(in srgb, var(--bad) 7%, var(--panel-2)); } .vs-team.lost .vt-nm { color: var(--bad); } .vt-more { margin-top: 0.25rem; font-size: 0.66rem; font-weight: 800; letter-spacing: 0.07em; text-transform: uppercase; color: var(--accent); } /* --- the squad popup: one team at a time, flipped by the same pill the Daily court uses --- */ .sq-card { position: relative; } .sq-flip { top: 6px; right: 6px; } /* on the court; the card's corner belongs to the close button */ .sq-body { transform-origin: 50% 50%; backface-visibility: hidden; } .sq-rec { text-align: center; margin-bottom: 0.7rem; } .sq-rec b { font-size: 1.6rem; font-weight: 900; font-variant-numeric: tabular-nums; } .sq-rec span { display: block; font-size: 0.66rem; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); } /* With the two name pills gone the court gets the room they were taking. */ .sq-court { position: relative; max-width: 320px; margin: 0 auto 0.5rem; border-radius: 8px; overflow: hidden; } .sq-court.tinted { box-shadow: 0 0 0 3px var(--tint), 0 6px 22px rgba(20,40,70,0.18); } .sq-court-svg { width: 100%; height: auto; display: block; } .sq-court-tint { position: absolute; inset: 0; background: var(--tint); opacity: 0.13; pointer-events: none; } .sq-court-mark { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-size: 3.6rem; font-weight: 900; letter-spacing: -0.03em; color: var(--tint); opacity: 0.16; pointer-events: none; } .sq-spot { position: absolute; transform: translate(-50%, -50%); z-index: 2; width: 74px; display: flex; flex-direction: column; align-items: center; gap: 2px; text-align: center; } .sq-disc { width: 36px; height: 36px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-weight: 800; font-size: 0.74rem; } .sq-nm { font-size: 0.7rem; font-weight: 700; color: #17222f; background: rgba(255,255,255,0.88); padding: 0 4px; border-radius: 4px; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } @media (max-width: 560px) { .sq-court { max-width: 268px; } .sq-spot { width: 64px; } .sq-disc { width: 32px; height: 32px; } } /* --- the live series board (reveal) --- */ .vs-game-label { text-align: center; font-weight: 800; font-size: 0.82rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); margin-bottom: 0.5rem; } /* The running series sits directly under the game number now, so it stays on screen for the whole simulation - at the bottom of the card it was under the court and scrolled out of view. */ .vs-series { display: flex; align-items: center; justify-content: center; gap: 0.7rem; margin: 0 0 0.55rem; } .vs-series-n { font-weight: 900; font-size: 1.15rem; font-variant-numeric: tabular-nums; } .vs-series-n i { color: var(--muted); font-style: normal; margin: 0 0.22rem; font-weight: 700; } .vs-pip-row { display: inline-flex; gap: 0.3rem; } .vs-pip { width: 9px; height: 9px; border-radius: 50%; background: transparent; border: 1.5px solid var(--line); transition: background 0.25s, border-color 0.25s; } .vs-pip.me { background: var(--good); border-color: var(--good); } .vs-pip.them { background: var(--bad); border-color: var(--bad); } /* --- Challenges: the 24h mailbox --- */ .vi-inbox { position: relative; display: inline-flex; align-items: center; gap: 0.35rem; margin-top: 0.1rem; } .vi-inbox .ic { width: 0.95rem; height: 0.95rem; } .vi-badge { display: inline-flex; align-items: center; justify-content: center; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 999px; background: var(--accent); color: #fff; font-size: 0.66rem; font-weight: 900; line-height: 1; } .vsm-card { text-align: left; } .vsm-note { color: var(--muted); font-size: 0.74rem; margin: 0 0 0.8rem; text-align: center; } .vsm-h { font-size: 0.68rem; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); margin: 0.9rem 0 0.35rem; } .vsm-h:first-of-type { margin-top: 0.2rem; } .vsm-row { display: flex; align-items: center; justify-content: space-between; gap: 0.6rem; padding: 0.45rem 0.6rem; border-radius: 9px; background: var(--panel-2); border: 1px solid var(--line); margin-bottom: 0.3rem; } .vsm-row.played { opacity: 0.72; } .vsm-who { min-width: 0; } .vsm-who b { display: block; font-size: 0.86rem; font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .vsm-who span { font-size: 0.68rem; color: var(--muted); font-weight: 600; } .vsm-tag { flex: 0 0 auto; font-size: 0.64rem; font-weight: 800; letter-spacing: 0.05em; text-transform: uppercase; color: var(--muted); padding: 0.18rem 0.5rem; border: 1px solid var(--line); border-radius: 999px; } .vsm-tag.done { color: var(--good); border-color: color-mix(in srgb, var(--good) 50%, var(--line)); } .vsm-go { flex: 0 0 auto; margin: 0; } .vsm-empty { color: var(--muted); font-size: 0.8rem; text-align: center; padding: 0.5rem 0; margin: 0; } /* Said once, under the result, when the duel could not be filed (you answered your own challenge). */ .vs-unfiled { color: var(--muted); font-size: 0.82rem; text-align: center; margin: 0.6rem auto 0; max-width: 30rem; } .vs-filed { font-size: 0.74rem; color: var(--muted); margin: 0.5rem 0 0; } .vs-filed b { color: var(--ink); } .vs-filed.pending { font-style: italic; } /* --- where the series is played (2-2-1) --- */ .vs-venue { display: flex; align-items: center; justify-content: center; gap: 0.4rem; font-size: 0.82rem; font-weight: 700; color: var(--ink); margin: 0 0 0.5rem; } /* A club colour that has to read against the PAGE, not against its own light parquet. Half of these clubs are navy or near-black (Fenerbahçe, Beşiktaş, Paris), which simply vanishes on the dark ground, so lift the tint toward white before using it as text, a border or a ring. Light mode needs no help: every primary here is dark enough to read on white. */ .vs-venue, .dyn-court { --tint-ink: var(--tint, var(--line)); } :root:not([data-theme="light"]) .vs-venue, :root:not([data-theme="light"]) .dyn-court { --tint-ink: color-mix(in srgb, var(--tint, var(--line)) 45%, #ffffff); } .vs-venue .vv-tag { font-size: 0.62rem; font-weight: 800; letter-spacing: 0.07em; text-transform: uppercase; padding: 0.1rem 0.42rem; border-radius: 999px; background: color-mix(in srgb, var(--tint-ink) 20%, transparent); color: var(--tint-ink); border: 1px solid color-mix(in srgb, var(--tint-ink) 60%, transparent); } .vs-venue.away { color: var(--muted); } /* Veiled = waiting for its beat. Opacity only, so the box keeps its space and the card never jumps. */ .vs-venue, .dyn-scoreboard { transition: opacity 0.45s ease; } .vs-venue.veiled, .dyn-scoreboard.veiled { opacity: 0; } /* the building this game was played in, under its number */ .vsg-v { display: block; margin-top: 1px; font-style: normal; font-size: 0.64rem; font-weight: 600; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .vsg-v.home { color: var(--accent); } /* --- game-by-game rows on the result screen --- */ .vs-games-list { display: flex; flex-direction: column; gap: 0.3rem; margin: 0.9rem auto 0.2rem; max-width: 320px; } .vsg-row { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 0.6rem; padding: 0.4rem 0.7rem; border-radius: 9px; background: var(--panel-2); border: 1px solid var(--line); } .vsg-row.clinch { border-color: color-mix(in srgb, var(--accent) 55%, var(--line)); } .vsg-n { font-size: 0.76rem; font-weight: 700; color: var(--muted); text-align: left; } .vsg-s { font-weight: 800; font-variant-numeric: tabular-nums; font-size: 0.98rem; } .vsg-s i { color: var(--muted); font-style: normal; margin: 0 0.1rem; } .vsg-b { font-size: 0.7rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.05em; text-align: right; } .vsg-row.w .vsg-b { color: var(--good); } .vsg-row.l .vsg-b { color: var(--bad); } .vs-new { margin-top: 1rem; } /* Share card */ .share-box { margin-top: 1.2rem; padding-top: 1rem; border-top: 1px solid var(--line); } /* result-card copy buttons sit on ONE row (the hidden 
 is display:none, so it drops out) */
.copy-row { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 0.5rem; }
.copy-row .dl-lb-btn { margin-top: 0; }
.share-pre {
  font-family: inherit; font-size: 0.9rem; line-height: 1.5; margin: 0 auto 0.7rem;
  white-space: pre-wrap; overflow-wrap: anywhere; word-break: break-word;
  color: var(--ink); background: var(--panel-2);
  border: 1px solid var(--line); border-radius: 10px; padding: 0.7rem 0.9rem; max-width: 320px;
}

/* Control bar */
/* The whole control group is centered. "Pick n of 6" + Spin form the middle block; the mode-specific
   side content (re-spins in Classic, the Daily label in Daily, the budget in Salary) hangs to its
   right after a divider. The side cell has a matched MIN width so Classic and Daily are the same
   total width → tapping between them keeps Pick + Spin in place (seamless). */
.control {
  display: flex; align-items: center; justify-content: center; flex-wrap: wrap;
  column-gap: 0.75rem; margin-bottom: 0.8rem;
}
.ctl-mid { display: inline-flex; align-items: center; gap: 0.8rem; }
.ctl-side { display: inline-flex; align-items: center; justify-content: flex-start; }
/* Only the modes whose side cell has content reserve the matched width (keeps Versus/G.O.A.T. tight). */
/* Fixed (not just min) width so Daily's Pick+Spin lands in the EXACT spot Classic's does - a long
   theme label (e.g. "Dynasty · Olympiacos") can no longer widen this column and shove the centred
   group sideways. The label ellipsizes inside it instead; the full name is one tap away in the chip. */
body[data-mode="classic"] .ctl-side,
body[data-mode="daily"] .ctl-side,
body[data-mode="dynasty"] .ctl-side { width: 16rem; }
body[data-mode="daily"] .ctl-side .daily-bar { flex: 1 1 auto; min-width: 0; overflow: hidden; }
.daily-bar .dl { flex: none; }
.dl-type { min-width: 0; max-width: 100%; }
.dl-type-ic, .dl-type-i { flex: none; }
.dl-type-lbl { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
/* the vertical divider before the side content (matches the classic Spin | re-spins look) */
.ctl-side .respins, .ctl-side .daily-bar { border-left: 1px solid var(--line); padding-left: 0.75rem; }
/* Breathing room AFTER the re-spins so the last pill ("Both") doesn't sit flush against the next
   cell's divider line. Only Salary shows the re-spins AND the bar together (Daily/Versus hide the
   re-spins; Classic/Dynasty hide the bar), so elsewhere this is invisible trailing space. */
.ctl-side .respins { padding-right: 0.75rem; }
.pickinfo { font-weight: 700; font-size: 1.1rem; color: var(--ink); }
.pickinfo.done { color: var(--good); }
.spin-btn {
  font-size: 1.15rem; font-weight: 700; color: #fff;
  padding: 0.7rem 2.4rem; border: none; border-radius: 999px; cursor: pointer;
  background: linear-gradient(180deg, var(--accent-2), var(--accent));
  box-shadow: 0 6px 18px rgba(239, 108, 0, 0.32);
  transition: transform 0.12s ease, box-shadow 0.12s ease;
}
.spin-btn:hover { transform: translateY(-1px); box-shadow: 0 10px 26px rgba(239, 108, 0, 0.42); }
.spin-btn:active { transform: translateY(0) scale(0.98); }
.spin-btn:disabled { opacity: 0.4; cursor: not-allowed; box-shadow: none; }
.ghost-btn {
  background: transparent; color: var(--muted); border: 1px solid var(--line);
  padding: 0.55rem 1.1rem; border-radius: 999px; cursor: pointer; font-size: 0.9rem;
}
.ghost-btn:hover { color: var(--ink); border-color: var(--muted); }
/* Accent-filled call to action (e.g. Play again) - the "regular" orange, to invite another go. */
.play-btn {
  display: inline-block; margin: 0.9rem 0 1rem; font-size: 1rem; font-weight: 700; color: #fff;
  padding: 0.6rem 1.8rem; border: none; border-radius: 999px; cursor: pointer;
  background: linear-gradient(180deg, var(--accent-2), var(--accent));
  box-shadow: 0 5px 14px rgba(239, 108, 0, 0.30); transition: transform 0.12s ease, box-shadow 0.12s ease;
}
.play-btn:hover { transform: translateY(-1px); box-shadow: 0 9px 22px rgba(239, 108, 0, 0.42); }
.play-btn:active { transform: translateY(0) scale(0.98); }

/* Classic/Salary result: Play again + Copy Result on one row, both visible without scrolling. */
.result-actions-row { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 0.6rem; margin: 0.9rem 0 0.4rem; }
.result-actions-row .play-btn { margin: 0; }
.play-btn.ghost-play {
  background: transparent; color: var(--accent);
  border: 1.5px solid var(--accent); box-shadow: none;
  display: inline-flex; align-items: center; justify-content: center; gap: 0.4rem;
}
.play-btn.ghost-play:hover { background: color-mix(in srgb, var(--accent) 12%, transparent); box-shadow: none; }
/* The Daily recap stacks two long-labelled actions; the default play-btn padding made them read
   as slabs. Trim them so they sit as normal pills. */
#dl-see-detail, #dl-practice { font-size: 0.9rem; padding: 0.48rem 1.1rem; margin: 0.45rem 0.3rem; }
.play-btn.ghost-play .ic, .play-btn.ghost-play svg { width: 1em; height: 1em; }
/* In the Daily "today" view the two buttons stack full-width with a little breathing room. */
#dl-see-detail { display: flex; width: 100%; margin: 0.9rem 0 0.5rem; }
#dl-see-detail + #dl-practice { margin-top: 0; }

/* Finished-Daily "reveal the best five": a flip control on the sidebar court + a record caption. */
.court-flip-ctrl {
  position: absolute; top: 5px; right: 5px; z-index: 4; display: inline-flex; align-items: center; gap: 0.25rem;
  padding: 0.16rem 0.5rem 0.16rem 0.4rem; border-radius: 999px; cursor: pointer; font: inherit;
  font-size: 0.72rem; font-weight: 800; line-height: 1; color: var(--accent);
  background: color-mix(in srgb, var(--panel) 88%, transparent);
  border: 1px solid color-mix(in srgb, var(--accent) 45%, var(--line));
  box-shadow: 0 1px 6px rgba(0, 0, 0, 0.28); backdrop-filter: blur(2px);
}
.court-flip-ctrl.hidden { display: none; }
.court-flip-ctrl:hover { background: color-mix(in srgb, var(--accent) 16%, var(--panel)); }
.court-flip-ctrl .ic { width: 0.85rem; height: 0.85rem; }
.court-caption { text-align: center; font-size: 0.82rem; color: var(--muted); margin: 0 auto 0.4rem; }
.court-caption.hidden { display: none; }
.court-caption b { color: var(--ink); font-weight: 800; }
/* the 6th man / coach / arena behind the "best possible" record - small, muted, its own line */
.cfc-extra { display: block; font-size: 0.7rem; color: var(--muted); margin-top: 0.1rem; }
/* the optimal ("best possible") court wears the golden LEGENDS frame instead of a club's home colour */
.court-wrap.optimal-court.has-home { box-shadow: 0 0 0 3px #c8a23a, 0 6px 22px rgba(200,162,58,0.28); }

/* Layout - players wide on the left, compact court + balance on the right */
.layout { display: grid; grid-template-columns: 1fr 300px; gap: 1rem; align-items: start; }

/* VIEWPORT FIT (desktop): the page itself never scrolls. The chrome (header, tabs, controls)
   takes what it needs and the roster panel gets the rest; if a squad is too deep to fit, the
   PLAYER GRID scrolls inside its own box rather than pushing the court and the category bars
   below the fold. Small screens keep normal document scrolling. */
@media (min-width: 821px) and (min-height: 600px) {
  html, body { height: 100%; }
  body { display: flex; flex-direction: column; overflow: hidden; }
  main { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; }
  .layout { flex: 1 1 auto; min-height: 0; }
  .roster-panel, .sidebar { height: 100%; min-height: 0; display: flex; flex-direction: column; }
  .sidebar { position: static; overflow-y: auto; }
  .roster-panel { overflow: hidden; }
  .offer { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; }
  .pool-grid { flex: 1 1 auto; min-height: 0; overflow-y: auto; padding-right: 0.2rem; }
  /* Daily lockout recap lives in .offer (not a .pool-grid) - let it scroll so a populated
     leaderboard can't push the Practice button past the panel's clipped bottom. */
  body[data-locked="1"] .offer { overflow-y: auto; }
  /* the endgame panels scroll on their own so a long bracket can't blow the layout */
  .commit, .result-card { flex: 1 1 auto; min-height: 0; overflow-y: auto; }
  .footnote { flex: 0 0 auto; padding: 0 1rem 0.5rem; font-size: 0.68rem; }
}

/* (short-screen overrides live at the END of this file, after the base court rules) */
.roster-panel {
  background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 1.1rem; min-height: 300px; box-shadow: 0 1px 3px var(--shadow);
}
h2 { font-size: 0.95rem; margin: 0 0 0.4rem; }
h3 { font-size: 0.82rem; margin: 0 0 0.6rem; color: var(--muted); text-transform: uppercase; letter-spacing: 0.05em; }
.muted { color: var(--muted); font-weight: 400; font-size: 0.85rem; }

/* Main panel / offer */
.main-panel {
  background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 1.1rem; min-height: 320px;
  box-shadow: 0 1px 3px var(--shadow);
}
.empty-hint { color: var(--muted); text-align: center; padding: 3rem 1rem; margin: 0; }
.offer-head { margin-bottom: 0.9rem; }
.offer-head .club { font-size: 1.5rem; font-weight: 800; }
.offer-head .season { color: var(--accent); font-weight: 700; }
.offer-head .sub { color: var(--muted); font-size: 0.85rem; }

.pool-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(178px, 1fr));
  gap: 0.45rem; align-content: start;
}
.card {
  background: var(--panel-2); border: 1px solid var(--line); border-radius: 9px;
  padding: 0.45rem 0.55rem; cursor: pointer; text-align: left;
  transition: border-color 0.12s, transform 0.12s, background 0.12s, box-shadow 0.12s;
}
.card:hover { border-color: var(--accent); transform: translateY(-1px); box-shadow: 0 4px 12px rgba(239, 108, 0, 0.14); }
.card.locked { opacity: 0.4; pointer-events: none; }
.card .name { font-weight: 700; font-size: 0.85rem; line-height: 1.15; }
.card .name .picked-tag { color: var(--good); font-size: 0.68rem; font-weight: 700; margin-left: 0.3rem; }
.card .sub { color: var(--muted); font-size: 0.7rem; margin: 0.05rem 0 0.28rem; }
.card .sub .mpg::before { content: " · "; } /* desktop: "Forward · 24 mpg" inline (mobile drops it below) */
.card .line { display: flex; flex-wrap: wrap; gap: 0.05rem 0.32rem; font-size: 0.66rem; color: var(--muted); line-height: 1.35; }
.card .line b { color: var(--ink); font-weight: 600; }
.card .line-br { flex-basis: 100%; height: 0; margin: 0; }
/* Stat blocks on cards - an atomic grid so labels never cut off. 3 cols (2 rows) by default. */
.statgrid { display: grid; grid-template-columns: repeat(3, max-content); gap: 0.08rem 0.55rem; }
.statgrid .st { white-space: nowrap; }
.statgrid b { color: var(--ink); font-weight: 600; }

/* Sidebar */
.sidebar {
  position: sticky; top: 1rem;
  background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 0.75rem; box-shadow: 0 1px 3px var(--shadow);
}
.roster { display: flex; flex-direction: column; gap: 0.4rem; margin-bottom: 1rem; }
.slot {
  display: flex; align-items: center; justify-content: space-between;
  border: 1px dashed var(--line); border-radius: 9px; padding: 0.45rem 0.6rem;
  min-height: 2.9rem; font-size: 0.9rem;
}
.slot.filled { border-style: solid; background: var(--panel-2); }
.slot .who { display: flex; flex-direction: column; line-height: 1.2; }
.slot .who .nm { font-weight: 700; }
.slot .who .from { color: var(--muted); font-size: 0.73rem; }
.slot .rm { color: var(--muted); cursor: pointer; font-size: 1.2rem; line-height: 1; padding: 0 0.2rem; }
.slot .rm:hover { color: var(--bad); }
.slot .empty { color: var(--muted); }
.slot .num { color: var(--muted); font-weight: 700; margin-right: 0.5rem; }

/* Category bars */
.cats { border-top: 1px solid var(--line); padding-top: 0.9rem; }
.cat-row { display: grid; grid-template-columns: 72px 1fr; align-items: center; gap: 0.45rem; margin-bottom: 0.25rem; }
.cat-row .lbl { font-size: 0.72rem; color: var(--muted); text-transform: capitalize; }
.cat-track { background: var(--bg-2); border-radius: 6px; height: 10px; position: relative; overflow: hidden; }
.cat-fill { position: absolute; top: 0; bottom: 0; left: 50%; background: var(--accent); border-radius: 6px; transition: left 0.5s cubic-bezier(0.4, 0, 0.2, 1), width 0.5s cubic-bezier(0.4, 0, 0.2, 1); }
.cat-row.isgate .lbl { color: var(--gate); font-weight: 700; }
.gate-note { font-size: 0.8rem; color: var(--gate); min-height: 1.2rem; margin: 0.5rem 0 0; }

/* Category balance moved INTO the record card on the final screen */
.result-cats-wrap { max-width: 320px; margin: 0.7rem auto 0; padding-top: 0.6rem; border-top: 1px solid var(--line); text-align: left; }
.rc-head { font-size: 0.72rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.05em; color: var(--muted); margin-bottom: 0.5rem; text-align: center; }
.result-cats .cat-row { margin-bottom: 0.3rem; }
/* the weakest-link line is now a button that opens the Team Report */
.rc-gate {
  display: inline-flex; align-items: center; gap: 0.35rem; margin: 0.7rem auto 0;
  color: var(--gate); font-weight: 700; font-size: 0.92rem; font-family: inherit;
  background: none; border: none; cursor: pointer; padding: 0.1rem 0.2rem;
}
.result-cats-wrap, .dyn-over .result-cats-wrap { text-align: center; }
.rc-gate:hover { text-decoration: underline; }
.rc-champ { color: var(--gold, #c8a23a); }            /* champion entry line reads gold, not gate-grey */
.rc-champ svg { width: 1.05em; height: 1.05em; }
.rc-gate-i { display: inline-flex; color: var(--gate); opacity: 0.7; }
.rc-gate-i .ic { width: 0.9rem; height: 0.9rem; }
/* Team Report popup */
.tr-card { text-align: left; max-width: 30rem; }
/* Mobile tweaks to the Team report popup: a slightly bigger close X, and the "Got it" button dropped
   a touch lower so it has room to breathe under the Fix box. */
@media (max-width: 820px) {
  .tr-card .ob-skip { font-size: 1.05rem; top: 0.85rem; right: 1rem; }
  .tr-card .ob-nav.one { margin-top: 1.5rem; }
  .tr-card { padding-bottom: 1.7rem; }
}
.tr-group { margin: 0.7rem 0; }
.tr-h { font-size: 0.72rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.05em; margin: 0 0 0.4rem; }
.tr-h.tr-good { color: var(--good); }
.tr-h.tr-bad { color: var(--bad); }
.tr-h.tr-neutral { color: var(--muted); }
.tr-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.4rem; }
.tr-item { display: flex; gap: 0.5rem; align-items: baseline; font-size: 0.86rem; line-height: 1.4; }
.tr-cat {
  flex: 0 0 auto; width: 5.2rem; font-size: 0.64rem; font-weight: 800; text-transform: uppercase;
  letter-spacing: 0.03em; color: var(--muted); padding-top: 0.15rem;
}
.tr-item.tr-good .tr-cat { color: var(--good); }
.tr-item.tr-bad .tr-cat { color: var(--bad); }
.tr-text { flex: 1 1 auto; color: var(--ink); }
.tr-item.tr-neutral .tr-cat { color: var(--muted); }
.tr-hint { margin: 0.9rem 0 0.2rem; padding: 0.6rem 0.75rem; border-radius: 10px; background: var(--panel-2); border: 1px solid var(--line); font-size: 0.84rem; color: var(--ink); }
.tr-hint b { color: var(--accent); }
/* Champion victory-lap line (in place of the Weaknesses/Fix) - gold, celebratory. */
.tr-triumph { display: flex; align-items: flex-start; gap: 0.5rem; margin: 0.9rem 0 0.2rem; padding: 0.7rem 0.8rem;
  border-radius: 10px; background: rgba(200,162,58,0.12); border: 1px solid rgba(200,162,58,0.4);
  font-size: 0.9rem; font-weight: 600; color: var(--ink); }
.tr-triumph svg { flex: 0 0 auto; width: 1.15em; height: 1.15em; margin-top: 0.05em; }

/* Result-screen sidebar order (picking + revealed): arena → the starting five (court) → 6th man →
   coach → category bars. Reads top-to-bottom the way you build the team. (order only applies while
   the sidebar is a flex column - desktop.) */
body[data-revealed="1"] #venue, body[data-picking="1"] #venue { order: 1; padding-top: 0.3rem; margin-bottom: 0.35rem; }
body[data-revealed="1"] #venue .arena-art, body[data-picking="1"] #venue .arena-art { margin-top: 0; }
body[data-revealed="1"] .court-wrap, body[data-picking="1"] .court-wrap { order: 2; }
body[data-revealed="1"] #sixth-slot, body[data-picking="1"] #sixth-slot { order: 3; margin: 0 0 0.4rem; }
body[data-revealed="1"] #bench, body[data-picking="1"] #bench { order: 4; margin: 0 0 0.4rem; }
/* keep the category bars LAST - without an explicit order they default to 0 and jump to the top */
body[data-revealed="1"] #sidebar-cats, body[data-picking="1"] #sidebar-cats { order: 5; }
body[data-revealed="1"] #place-hint, body[data-picking="1"] #place-hint { display: none; }

/* Result card */
.result-card { text-align: center; padding: 0.8rem 1rem 1.2rem; }
.result-card.has-toggle { position: relative; padding-top: 2.8rem; } /* room for the top-right Leaderboard toggle */
.result-card .record { font-size: 3rem; font-weight: 800; letter-spacing: -0.03em; line-height: 1; }
.result-card .record.perfect { color: var(--good); }
.result-card .verdict { color: var(--muted); margin: 0.3rem 0 0.6rem; font-size: 1.05rem; }
/* Keep the revealed result on ONE screen (playtest note) - tighten the vertical rhythm so the
   Summary view (record → rounds → verdict → bars → Play again → copy buttons) fits a laptop. */
body[data-revealed="1"] .result-card .record { font-size: 2.5rem; }
body[data-revealed="1"] .result-card .verdict { margin: 0.2rem 0 0.4rem; }
body[data-revealed="1"] .rounds { gap: 0.25rem; margin-bottom: 0.55rem; }
body[data-revealed="1"] .result-cats-wrap { margin-top: 0.4rem; padding-top: 0.45rem; }
body[data-revealed="1"] .rc-head { margin-bottom: 0.3rem; }
body[data-revealed="1"] .result-cats .cat-row { margin-bottom: 0.16rem; }
body[data-revealed="1"] .rc-gate { margin-top: 0.4rem; }
body[data-revealed="1"] .share-box { margin-top: 0.55rem; padding-top: 0.6rem; }
/* Bracket view carries taller match cards - trim them so it clears the fold too. */
body[data-revealed="1"] .bracket { margin-bottom: 0.35rem; }
body[data-revealed="1"] .bk-entry { padding: 0.2rem 0.9rem; }
body[data-revealed="1"] .bk-tie { margin-top: 0.28rem; padding: 0.18rem 0.55rem; }
body[data-revealed="1"] .bk-side { padding: 0.05rem 0.35rem; }
.result-card .five { font-size: 0.95rem; line-height: 1.9; }
.result-card .five b { font-weight: 700; }
.result-card .brag { font-size: 0.85rem; color: var(--gate); margin-top: 0.8rem; }

/* Spin group + contextual re-spins */
.spin-group { display: inline-flex; align-items: center; gap: 0.4rem; }
.mini-btn {
  background: var(--panel); color: var(--accent); border: 1px solid var(--accent);
  padding: 0.5rem 0.8rem; border-radius: 999px; cursor: pointer; font-size: 0.82rem; font-weight: 700;
  white-space: nowrap; /* "↻ Club" must never wrap onto two lines when the column is tight */
}
.mini-btn:hover:not(:disabled) { background: var(--accent); color: #fff; }
.mini-btn:disabled { opacity: 0.4; cursor: not-allowed; }
.mini-btn.used { text-decoration: line-through; border-color: var(--line); color: var(--muted); opacity: 0.45; }
.respins { display: inline-flex; gap: 0.35rem; }

/* Half court (compact, in the right column) */
.court-wrap { position: relative; max-width: 208px; margin: 0 auto 0.3rem; }
.court { width: 100%; height: auto; display: block; }
.c-floor { fill: #f6efe1; stroke: #e4d7bd; stroke-width: 2; }
.c-line { stroke: #d3bd94; stroke-width: 2.5; }
.c-paint { transition: fill-opacity 0.5s ease 0.35s; }
.c-mark { font-weight: 900; font-size: 92px; letter-spacing: -0.04em; transition: fill-opacity 0.5s ease 0.45s; }
.court-wrap { border-radius: 8px; transition: box-shadow 0.5s ease; }
.court-wrap.has-home { box-shadow: 0 0 0 3px var(--home, transparent), 0 6px 22px rgba(20,40,70,0.14); }
/* directional team-colour wash that sweeps top -> bottom when the home court is revealed */
.court-sweep { position: absolute; inset: 0; border-radius: 8px; pointer-events: none; opacity: 0; clip-path: inset(0 0 100% 0); }
.court-wrap.sweep .court-sweep { animation: courtSweep 0.85s cubic-bezier(0.3, 0.7, 0.3, 1) forwards; }
@keyframes courtSweep {
  0% { opacity: 0.30; clip-path: inset(0 0 100% 0); }
  100% { opacity: 0.13; clip-path: inset(0 0 0 0); }
}
#court-spots { position: absolute; inset: 0; }
.spot {
  position: absolute; transform: translate(-50%, -50%);
  width: 50px; display: flex; flex-direction: column; align-items: center; gap: 1px; text-align: center;
}
.spot .disc {
  width: 30px; height: 30px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  font-weight: 800; font-size: 0.68rem; background: #fff;
}
.spot.empty .disc { border: 2px dashed var(--muted); color: var(--muted); background: rgba(255,255,255,0.85); }
.spot.empty .disc .disc-lbl { font-size: 0.85rem; }
.spot.eligible .disc {
  border: 2px solid var(--accent); color: var(--accent); cursor: pointer;
  box-shadow: 0 0 0 5px rgba(239,108,0,0.22); animation: pulse 1.1s ease-in-out infinite;
}
.spot.eligible { cursor: pointer; }
.spot.drop-hot .disc { box-shadow: 0 0 0 7px rgba(239,108,0,0.35); }
@keyframes pulse { 0%,100% { box-shadow: 0 0 0 4px rgba(239,108,0,0.18); } 50% { box-shadow: 0 0 0 8px rgba(239,108,0,0.30); } }
/* The court is always a light wood surface, so its labels use FIXED dark text (never var(--ink),
   which flips to light in dark mode and vanishes on the white pill). */
.spot .slot-lbl { font-weight: 800; font-size: 0.72rem; color: #17222f; background: rgba(255,255,255,0.9); padding: 0 0.25rem; border-radius: 4px; }
.spot .slot-lbl.muted { color: #5a6a7d; font-weight: 600; }
.spot .spot-nm { font-size: 0.72rem; font-weight: 600; color: #17222f; background: rgba(255,255,255,0.9); padding: 0 0.25rem; border-radius: 4px; max-width: 74px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.place-hint { text-align: center; color: var(--accent); font-size: 0.78rem; min-height: 1rem; margin: 0 0 0.45rem; }

.card.selected { border-color: var(--accent); box-shadow: 0 0 0 2px rgba(239,108,0,0.3); }
.card.dragging { opacity: 0.5; }
.card[draggable="true"] { cursor: grab; }

/* Arena above the court, coach on the sideline */
.venue, .bench {
  background: var(--panel-2); border: 1px solid var(--line); border-radius: 10px;
  padding: 0.4rem 0.55rem; margin-bottom: 0.45rem;
}
.bench { margin: 0.45rem 0 0.6rem; }
.venue-head, .bench-head {
  font-size: 0.68rem; font-weight: 800; color: var(--muted);
  text-transform: uppercase; letter-spacing: 0.05em; margin-bottom: 0.25rem;
}
.bench-head .sideline { font-weight: 500; text-transform: none; letter-spacing: 0; opacity: 0.7; }
/* Coach label inline with the name (same type family, just dimmed) */
.bench-line { display: flex; align-items: baseline; gap: 0.4rem; }
.bench-tag { font-weight: 700; font-size: 0.9rem; color: var(--muted); flex: 0 0 auto; }
.venue-name { font-weight: 700; font-size: 0.9rem; }
.venue-meta, .bench-meta { font-size: 0.75rem; color: var(--muted); margin-top: 0.25rem; display: flex; gap: 0.25rem; flex-wrap: wrap; align-items: center; }
.venue-idle, .bench-idle { color: var(--muted); font-size: 0.78rem; }
/* idle state during the draft: one slim line, no box */
.venue.slim {
  background: none; border: none; padding: 0.1rem 0; margin-bottom: 0.35rem; text-align: center;
}
.venue.slim .venue-idle { font-size: 0.72rem; }
.venue select, .bench select {
  width: 100%; padding: 0.35rem 0.4rem; border-radius: 7px; border: 1px solid var(--line);
  background: var(--field); color: var(--ink); font-size: 0.8rem; font-weight: 600;
}
.venue select:disabled, .bench select:disabled { opacity: 0.7; }

/* Spin reels */
.reel-wrap { text-align: center; padding: 2.6rem 1rem; }
.reel-label { color: var(--muted); font-size: 0.85rem; margin-bottom: 0.8rem; letter-spacing: 0.08em; text-transform: uppercase; }
.reels { display: flex; gap: 0.7rem; justify-content: center; }
.reel-box {
  min-width: 116px; padding: 0.7rem 0.9rem; border-radius: 12px;
  border: 2px solid var(--accent); background: var(--field); color: var(--ink);
  font-size: 1.9rem; font-weight: 800; letter-spacing: 0.02em;
  font-variant-numeric: tabular-nums; box-shadow: 0 6px 18px rgba(239,108,0,0.18);
}
.reel-box.year { font-size: 1.55rem; }
.reel-box.fixed { opacity: 0.45; border-color: var(--line); box-shadow: none; }
.reel-box.arena { font-size: 1.15rem; min-width: 240px; padding: 0.85rem 1rem; display: flex; align-items: center; justify-content: center; gap: 0.5rem; }
.reel-box.arena .badge { width: 34px; height: 34px; border-radius: 9px; font-size: 0.74rem; }
.reel-arena { font-size: 0.98rem; line-height: 1.15; }
.commit-inner li { display: flex; align-items: center; gap: 0.5rem; }
.commit-inner li .badge { width: 30px; height: 30px; border-radius: 8px; font-size: 0.66rem; }

/* Arena: candidate list + big reveal */
.arena-list { list-style: none; padding: 0; margin: 0.6rem 0 1rem; text-align: left; display: flex; flex-direction: column; gap: 0.3rem; }
.arena-list li { background: var(--panel-2); border: 1px solid var(--line); border-radius: 8px; padding: 0.4rem 0.6rem; font-size: 0.85rem; }
.arena-reveal { padding: 2.4rem 1rem; }
.ar-reveal-head { font-size: 0.72rem; font-weight: 800; color: var(--muted); text-transform: uppercase; letter-spacing: 0.08em; }
.ar-reveal-name { font-size: 1.9rem; font-weight: 800; letter-spacing: -0.02em; margin: 0.3rem 0; animation: pop 0.45s cubic-bezier(0.2, 1.3, 0.4, 1) both; }
.ar-reveal-meta { color: var(--muted); font-size: 0.9rem; }
.arena-art { display: block; width: 100%; max-width: 220px; height: auto; margin: 0.3rem auto; }
.ar-reveal-art .arena-art { max-width: 300px; }
.reel-box.landed { animation: reelLand 0.32s cubic-bezier(0.2, 1.4, 0.4, 1) both; }
@keyframes reelLand { 0% { transform: scale(1.18); } 100% { transform: scale(1); } }

/* European Legends - the rare golden nugget */
.reel-wrap.legends-hit { animation: legendsFlash 0.9s ease; }
@keyframes legendsFlash { 0%,100% { background: transparent; } 30% { background: radial-gradient(circle, rgba(200,162,58,0.35), transparent 70%); } }
.reel-wrap.legends-hit .reel-box.landed { background: linear-gradient(180deg, #e6c65a, #c8a23a) !important; color: #111 !important; border-color: #c8a23a !important; box-shadow: 0 0 24px rgba(200,162,58,0.7); }
.offer.legends { box-shadow: inset 0 0 0 2px #c8a23a; border-radius: var(--radius); }
.legends-banner { text-align: center; font-weight: 800; letter-spacing: 0.06em; color: #8a6d1e; background: linear-gradient(180deg, #f6e9bf, #eeda98); border-radius: 10px; padding: 0.5rem; margin-bottom: 0.8rem; animation: pop 0.5s cubic-bezier(0.2,1.3,0.4,1) both; }
.legends-banner span { display: block; font-weight: 600; font-size: 0.72rem; letter-spacing: 0; color: #a07f2a; text-transform: none; }

/* Spin -> roster cascade (morph feel: header drops in, cards stagger, panel washes club colour) */
.offer.spun-in { animation: panelWash 0.6s ease both; }
@keyframes panelWash { 0% { box-shadow: inset 0 3px 0 0 var(--team, transparent); } 100% { box-shadow: inset 0 0 0 0 transparent; } }
.offer.spun-in .offer-head { animation: headIn 0.4s cubic-bezier(0.2, 0.9, 0.3, 1) both; }
.offer.spun-in .offer-head .badge { animation: badgePop 0.45s cubic-bezier(0.2, 1.5, 0.4, 1) both; }
.offer.spun-in .pool-tools { animation: headIn 0.4s ease both; animation-delay: 0.08s; }
/* only non-locked cards cascade - else fill-mode:both would hold locked cards at opacity 1,
   making a full guard/forward slot look pickable (it isn't). */
.offer.spun-in .card:not(.locked) { animation: cardIn 0.34s ease both; animation-delay: calc(var(--i, 0) * 26ms + 0.12s); }
@keyframes headIn { 0% { opacity: 0; transform: translateY(-10px); } 100% { opacity: 1; transform: none; } }
@keyframes badgePop { 0% { transform: scale(1.6); } 100% { transform: scale(1); } }
@keyframes cardIn { 0% { opacity: 0; transform: translateY(10px) scale(0.98); } 100% { opacity: 1; transform: none; } }

/* Staged end-of-season reveal */
.pop { animation: pop 0.4s cubic-bezier(0.2, 1.2, 0.4, 1) both; }
@keyframes pop { 0% { opacity: 0; transform: translateY(8px) scale(0.96); } 100% { opacity: 1; transform: none; } }
.reveal-dots { color: var(--muted); letter-spacing: 0.3em; font-weight: 800; margin-top: 0.6rem; animation: blink 1s ease-in-out infinite; }
@keyframes blink { 0%, 100% { opacity: 0.3; } 50% { opacity: 1; } }

/* Coach cards in the left (players) area */
.coach-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 0.5rem; margin: 0.4rem 0 1.1rem; text-align: left; }
.coach-card {
  background: var(--panel-2); border: 1px solid var(--line); border-radius: 10px;
  padding: 0.55rem 0.65rem; cursor: pointer; color: var(--ink);
  /* A button centres its own text by UA default, which beats the text-align inherited from
     .coach-cards - so the three rows have to be aligned here, on the button itself. */
  text-align: left;
}
.coach-card:hover:not(:disabled) { border-color: var(--accent); }
.coach-card.sel { border-color: var(--accent); box-shadow: inset 0 0 0 1px var(--accent); background: var(--field); }
.coach-card:disabled { opacity: 0.4; cursor: not-allowed; }
.cc-price { float: right; font-weight: 800; font-size: 0.72rem; color: var(--good); letter-spacing: -0.01em; }
.coach-note { font-size: 0.8rem; color: var(--muted); margin: -0.4rem 0 0.9rem; }
.coach-note b { color: var(--ink); }
.cc-name { font-weight: 700; font-size: 0.9rem; }
.cc-arch { color: var(--muted); font-size: 0.73rem; margin: 0.15rem 0 0; }
.cc-fit { color: var(--muted); font-size: 0.73rem; margin: 0.05rem 0 0.1rem; }
.cc-ped {
  display: inline-block; margin-left: 0.3rem; padding: 0.02rem 0.32rem; border-radius: 4px;
  font-size: 0.62rem; font-weight: 800; letter-spacing: 0.02em;
  background: rgba(200,162,58,0.16); color: var(--gate);
}
.cc-deltas { display: flex; gap: 0.2rem; flex-wrap: wrap; }

/* Captain picker (Salary only) - same card language as the coach, gold accent for "the man". */
.cap-opt { font-weight: 500; font-size: 0.72rem; color: var(--muted); letter-spacing: 0; }
/* Richer captain cards: club crest + name + stat line, bigger boxes. `margin-bottom` clears the
   Confirm button below. */
.cap-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(215px, 1fr)); gap: 0.6rem; text-align: left; margin: 0 0 1.5rem; }
.cap-card {
  position: relative; display: flex; align-items: flex-start; gap: 0.6rem;
  background: var(--panel-2); border: 1px solid var(--line);
  border-left: 3px solid var(--team, var(--line)); border-radius: 12px;
  padding: 0.7rem 0.8rem; cursor: pointer; color: var(--ink); font: inherit;
  transition: border-color 0.15s, box-shadow 0.15s, transform 0.12s cubic-bezier(0.4, 0, 0.2, 1);
}
.cap-card:hover { border-color: var(--gate); }
.cap-card.sel { border-color: var(--gate); box-shadow: inset 0 0 0 1px var(--gate); background: var(--field); }
.cap-card:active { transform: scale(0.985); } /* a small, grounded press */
.cap-crest {
  flex: 0 0 auto; width: 34px; height: 34px; border-radius: 8px; display: inline-flex;
  align-items: center; justify-content: center; font-weight: 800; font-size: 0.6rem; letter-spacing: -0.02em;
}
.cap-body { flex: 1 1 auto; min-width: 0; } /* name + position + stats align in one column, right of the crest */
.cap-card .cc-name { font-weight: 700; font-size: 0.9rem; line-height: 1.1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cap-sub { color: var(--muted); font-size: 0.72rem; margin: 0.12rem 0 0.4rem; }
.cap-c {
  position: absolute; top: 0.6rem; right: 0.6rem;
  width: 22px; height: 22px; border-radius: 50%; background: var(--gate); color: #111;
  font-size: 0.72rem; font-weight: 900; display: inline-flex; align-items: center; justify-content: center;
}
/* the "Name your captain" intro line - kept readable (near-white), not muted */
.captain-sub { color: var(--ink); opacity: 0.92; }
/* Salary spend/left summary shown on the captain, coach and result screens (the top budget bar is
   gone by then). */
.salary-line { display: flex; align-items: center; justify-content: center; gap: 0.4rem; font-size: 0.9rem;
  color: var(--muted); margin: 0.5rem 0 0.9rem; }
.salary-line b { color: var(--ink); font-weight: 700; }
.salary-line .sl-left { color: var(--accent); }
.salary-line svg { width: 1.05em; height: 1.05em; vertical-align: -0.15em; }
.cap-line { display: flex; flex-wrap: wrap; gap: 0.05rem 0.4rem; font-size: 0.68rem; color: var(--muted); line-height: 1.4; }
.cap-line b { color: var(--ink); font-weight: 600; }
.cap-line .line-br { flex-basis: 100%; height: 0; margin: 0; }
/* the captain's "C" pip on the court disc */
.spot .cap-pip {
  position: absolute; top: -3px; right: -3px; width: 15px; height: 15px; border-radius: 50%;
  background: var(--gate); color: #111; font-size: 0.6rem; font-weight: 900; line-height: 15px;
  text-align: center; box-shadow: 0 0 0 2px var(--panel);
}

/* Sort + position filter */
.pool-tools { display: flex; align-items: center; justify-content: space-between; gap: 0.6rem; margin-bottom: 0.7rem; flex-wrap: wrap; }
.sort-lbl { font-size: 0.75rem; color: var(--muted); font-weight: 700; }
.sort-lbl select {
  margin-left: 0.3rem; padding: 0.25rem 0.35rem; border-radius: 6px;
  border: 1px solid var(--line); background: var(--field); color: var(--ink); font-weight: 700; font-size: 0.75rem;
}
.pos-filter { display: inline-flex; gap: 0.25rem; }
.pos-btn {
  border: 1px solid var(--line); background: var(--field); color: var(--muted);
  padding: 0.25rem 0.6rem; border-radius: 999px; cursor: pointer; font-size: 0.75rem; font-weight: 800;
}
.pos-btn:hover { border-color: var(--accent); color: var(--accent); }
.pos-btn.on { background: var(--accent); border-color: var(--accent); color: #fff; }

/* Commit step (record hidden until arena + coach are locked) */
.commit { text-align: center; padding: 2.4rem 1rem; }
.commit-inner h3 { color: var(--ink); font-size: 1.1rem; text-transform: none; letter-spacing: 0; }
.commit-inner p { color: var(--muted); font-size: 0.9rem; margin: 0 0 1rem; }
.commit-note { font-size: 0.78rem; color: var(--accent); margin-top: 0.7rem !important; }
.reg-label { font-size: 0.7rem; font-weight: 800; color: var(--muted); text-transform: uppercase; letter-spacing: 0.08em; }

/* Avatars / badges / positions */
.avatar {
  flex: 0 0 auto; width: 27px; height: 27px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  font-weight: 800; font-size: 0.7rem; letter-spacing: -0.02em;
}
.badge {
  flex: 0 0 auto; width: 46px; height: 46px; border-radius: 12px;
  display: inline-flex; align-items: center; justify-content: center;
  font-weight: 800; font-size: 0.9rem; letter-spacing: -0.01em;
}
.offer-head { display: flex; align-items: center; gap: 0.8rem; border-left: 4px solid; padding-left: 0.7rem; }
.card { border-left: 3px solid var(--team, var(--line)); }
.card-top { display: flex; align-items: center; gap: 0.4rem; margin-bottom: 0.25rem; }
.card-top .who { flex: 1 1 auto; min-width: 0; }
.card-top .who .name { line-height: 1.1; }
.card-top .who .sub { margin: 0.1rem 0 0; }
.card .pos { color: var(--ink); font-weight: 600; }
.tag { display: inline-block; margin-top: 0.4rem; font-size: 0.66rem; font-weight: 700; padding: 0.1rem 0.4rem; border-radius: 5px; }
.tag.picked { background: rgba(28,158,87,0.15); color: var(--good); }
.tag.full { background: var(--bg-2); color: var(--muted); }
.tag.bench { background: rgba(239,108,0,0.13); color: var(--accent); }
.tag.strand { background: var(--bg-2); color: var(--muted); cursor: help; }

/* 6th-man bench slot - a placement target right under the court */
.sixth-slot { display: flex; align-items: center; gap: 0.5rem; margin: 0.5rem 0 0.2rem; padding: 0.45rem 0.6rem; border-radius: 10px; min-height: 2.7rem; }
.sixth-slot.empty { border: 1px dashed var(--line); color: var(--muted); cursor: default; }
.sixth-slot.empty.eligible { border: 2px solid var(--accent); background: rgba(239,108,0,0.06); cursor: pointer; box-shadow: 0 0 0 4px rgba(239,108,0,0.15); }
.sixth-slot.empty.drop-hot { box-shadow: 0 0 0 6px rgba(239,108,0,0.28); }
.sixth-slot.filled { border: 1px solid var(--line); background: var(--panel-2); }
.sixth-slot .six-tag { flex: 0 0 auto; font-weight: 800; font-size: 0.72rem; color: var(--accent); background: rgba(239,108,0,0.12); padding: 0.12rem 0.4rem; border-radius: 5px; }
.sixth-slot .six-hint { color: var(--muted); font-size: 0.82rem; }
.sixth-slot .who { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; line-height: 1.2; }
.sixth-slot .who .nm { font-weight: 700; font-size: 0.9rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sixth-slot .who .from { color: var(--muted); font-size: 0.71rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sixth-slot .rm { color: var(--muted); cursor: pointer; font-size: 1.2rem; }
.sixth-slot .rm:hover { color: var(--bad); }

.slot { gap: 0.5rem; }
.slot .pos-label { flex: 0 0 auto; width: 30px; font-weight: 800; color: var(--accent); font-size: 0.85rem; }
.slot .pos-label.empty { color: var(--muted); }
.slot .who { flex: 1 1 auto; min-width: 0; }

.result-card .verdict.stage-champion { color: var(--good); font-weight: 800; }
.result-card .verdict.stage-lostfinal, .result-card .verdict.stage-finalfour { color: var(--accent); font-weight: 700; }
.result-card .verdict.stage-relegation { color: var(--bad); }
.result-card .perfect-note { color: var(--good); font-weight: 700; font-size: 0.85rem; margin-top: -0.6rem; margin-bottom: 0.8rem; }

/* Arena */
.arena-line { font-size: 0.78rem; color: var(--muted); margin-top: 0.15rem; }
/* Inline-SVG icon set (icons.js) - line icons by default, `.solid` ones are filled silhouettes.
   They take currentColor, so `.gold` / `.f-streak` etc. just set `color`. */
.ic { width: 1em; height: 1em; display: inline-block; vertical-align: -0.14em; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.ic.solid { fill: currentColor; stroke: none; }
.ic.gold { color: #e0a83a; }
.ic.f-streak { color: var(--accent); }

/* Classic-look emoji stand-in for any icon() glyph (renders at the surrounding font size). */
.ic-emoji { font-style: normal; line-height: 1; }

.flames { display: inline-flex; align-items: center; gap: 2px; vertical-align: middle; color: var(--accent); }
.flames .flame { width: 1.15em; height: 1.15em; display: inline-block; }
.flames .flame.lit { fill: var(--accent); }
.flames .flame.dim { fill: var(--accent); opacity: 0.2; }
.arena-pick { max-width: 360px; margin: 0 auto 1rem; text-align: left; }
.arena-pick h3 { margin-bottom: 0.4rem; }
.arena-opts { display: flex; flex-direction: column; gap: 0.3rem; }
.arena-opt {
  display: flex; align-items: baseline; gap: 0.5rem; width: 100%; cursor: pointer;
  background: var(--panel-2); border: 1px solid var(--line); border-radius: 8px;
  padding: 0.4rem 0.55rem; font-size: 0.8rem; text-align: left; color: var(--ink);
}
.arena-opt:hover { border-color: var(--accent); }
.arena-opt.sel { border-color: var(--accent); box-shadow: inset 0 0 0 1px var(--accent); background: var(--field); }
.arena-opt .ar-name { flex: 1 1 auto; font-weight: 700; display: flex; flex-direction: column; }
.arena-opt .ar-club { color: var(--muted); font-size: 0.72rem; font-weight: 400; }
.arena-opt .ar-rate { flex: 0 0 auto; white-space: nowrap; }
.arena-note { color: var(--muted); font-size: 0.72rem; margin: 0.4rem 0 0; }

/* Coach */
.coach-pick { max-width: 360px; margin: 0 auto 1rem; text-align: left; }
.coach-pick h3 { margin-bottom: 0.4rem; }
.cdeltas { flex: 0 0 auto; display: flex; gap: 0.2rem; flex-wrap: wrap; justify-content: flex-end; max-width: 130px; }
.cdelta { font-size: 0.62rem; font-weight: 800; padding: 0.05rem 0.28rem; border-radius: 4px; white-space: nowrap; }
.cdelta.up { background: rgba(28,158,87,0.15); color: var(--good); }
.cdelta.down { background: rgba(210,59,59,0.13); color: var(--bad); }

.rounds { display: flex; flex-direction: column; gap: 0.3rem; max-width: 360px; margin: 0 auto 1rem; text-align: left; }
.round {
  display: flex; align-items: baseline; gap: 0.5rem; font-size: 0.83rem;
  background: var(--panel-2); border-left: 3px solid var(--good); border-radius: 7px; padding: 0.35rem 0.55rem;
}
.round.out { border-left-color: var(--bad); }
.round .rname { color: var(--muted); font-size: 0.72rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.03em; flex: 0 0 auto; }
.round .rbody { flex: 1 1 auto; }
.round .rscore { font-weight: 800; margin-left: 0.2rem; }

/* Bracket / Summary toggle */
.view-toggle { display: inline-flex; gap: 0; margin: 0 auto 0.55rem; border: 1px solid var(--line); border-radius: 8px; overflow: hidden; background: var(--panel-2); }
.round.seed { border-left-color: var(--muted); }
.vt-btn { border: none; background: transparent; color: var(--muted); font: inherit; font-size: 0.76rem; font-weight: 700; padding: 0.32rem 0.85rem; cursor: pointer; }
.vt-btn:hover { color: var(--ink); }
.vt-btn.on { background: var(--accent); color: #fff; }

/* Real seeded bracket */
.bracket { display: flex; flex-direction: column; align-items: center; gap: 0; max-width: 360px; margin: 0 auto 0.6rem; }
.bk-entry { display: flex; flex-direction: column; align-items: center; gap: 0.05rem; padding: 0.3rem 0.9rem; background: var(--panel-2); border: 1px solid var(--line); border-radius: 9px; }
.bk-seed { font-weight: 800; font-size: 0.98rem; letter-spacing: -0.01em; }
.bk-seed.miss { color: var(--muted); }
.bk-entry-note { color: var(--muted); font-size: 0.72rem; }
/* Missed-postseason standings: a 20-slot league ladder with your finish lit. */
/* Missed-postseason standings - extra room to breathe; the orange finish marker travels in (see JS). */
.missed-standings { display: flex; flex-direction: column; align-items: center; gap: 0.85rem; margin: 1rem 0 0.6rem; }
.ms-head { font-size: 0.7rem; font-weight: 800; color: var(--muted); text-transform: uppercase; letter-spacing: 0.08em; }
.ms-ladder { position: relative; display: grid; grid-template-columns: repeat(20, 1fr); gap: 3px; width: 100%; max-width: 420px; align-items: end; padding-top: 2.1rem; }
.ms-cell { height: 12px; border-radius: 3px; background: var(--line); position: relative; }
.ms-cell.po { background: color-mix(in srgb, var(--good) 55%, transparent); }
.ms-cell.pi { background: color-mix(in srgb, var(--gate) 45%, transparent); }
.ms-cell.out { background: var(--line); }
/* the travelling "you" marker - an overlay whose left (a cell CENTRE) is set/animated by JS */
.ms-marker { position: absolute; bottom: 0; left: 0; height: 26px; border-radius: 3px; background: var(--accent); box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent) 40%, transparent); transform: translateX(-50%); pointer-events: none; }
.ms-marker::after { content: attr(data-pos); position: absolute; bottom: 100%; left: 50%; transform: translateX(-50%); margin-bottom: 4px; font-size: 0.62rem; font-weight: 800; color: var(--accent); white-space: nowrap; }
/* a little "tick" pulse each time the marker snaps to the next position (see animateMissedMarker) */
@keyframes msTick { 0% { transform: translateX(-50%) scaleY(1.28); } 100% { transform: translateX(-50%) scaleY(1); } }
.ms-marker.tick { animation: msTick 0.13s ease-out; }
.ms-scale { display: flex; justify-content: space-between; width: 100%; max-width: 420px; font-size: 0.6rem; color: var(--muted); }
.ms-finish { font-size: 0.95rem; font-weight: 700; }
.ms-finish b { color: var(--accent); }
.ms-legend { display: flex; align-items: center; gap: 0.35rem; font-size: 0.64rem; color: var(--muted); flex-wrap: wrap; justify-content: center; }
.ms-legend .ms-k { width: 10px; height: 10px; border-radius: 2px; display: inline-block; margin-left: 0.5rem; }
.ms-legend .ms-k.po { background: color-mix(in srgb, var(--good) 55%, transparent); }
.ms-legend .ms-k.pi { background: color-mix(in srgb, var(--gate) 45%, transparent); }
.ms-legend .ms-k.out { background: var(--line); }
/* connecting spine between ties */
.bk-tie { position: relative; width: 100%; margin-top: 0.45rem; background: var(--panel-2); border: 1px solid var(--line); border-left: 3px solid var(--good); border-radius: 9px; padding: 0.26rem 0.55rem; text-align: left; }
.bk-tie.out { border-left-color: var(--bad); }
.bk-tie::before { content: ""; position: absolute; left: 50%; top: -0.45rem; width: 2px; height: 0.45rem; background: var(--line); transform: translateX(-50%); }
.bk-tie-head { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 0.14rem; }
.bk-rname { color: var(--muted); font-size: 0.7rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.04em; }
.bk-kind { color: var(--muted); font-size: 0.64rem; font-weight: 600; }
.bk-match { display: flex; flex-direction: column; gap: 0.1rem; }
.bk-side { display: flex; align-items: center; justify-content: space-between; gap: 0.6rem; padding: 0.09rem 0.35rem; border-radius: 5px; }
.bk-side .bk-team { font-size: 0.85rem; font-weight: 600; }
.bk-side .bk-sc { font-weight: 800; font-variant-numeric: tabular-nums; font-size: 0.9rem; }
.bk-side.adv { background: rgba(28,158,87,0.14); }
.bk-side.adv .bk-team, .bk-side.adv .bk-sc { color: var(--good); }
.bk-side.eliminated { color: var(--muted); }
.bk-side.eliminated .bk-sc { color: var(--muted); }

/* Tap-to-expand opponent roster: the whole tie header is a  that reveals their five. */
.bk-tie { list-style: none; }
.bk-tie > summary.bk-tie-sum { list-style: none; cursor: pointer; display: block; -webkit-tap-highlight-color: transparent; }
.bk-tie > summary.bk-tie-sum::-webkit-details-marker { display: none; }
.bk-tie-head { justify-content: flex-start; gap: 0.5rem; }
.bk-expand { margin-left: auto; color: var(--accent); font-size: 0.62rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.03em; opacity: 0.9; white-space: nowrap; }
.bk-tie[open] .bk-expand { color: var(--muted); }
.bk-tie[open] .bk-expand::after { content: ""; }
.bk-five { margin-top: 0.45rem; padding-top: 0.45rem; border-top: 1px dashed var(--line); display: flex; flex-direction: column; gap: 0.32rem; }
.bk-five-head { display: flex; align-items: center; gap: 0.4rem; font-size: 0.8rem; font-weight: 700; color: var(--ink); margin-bottom: 0.05rem; }
.bk-five-head .muted { color: var(--muted); font-weight: 500; }
.bk-five .dyn-prow { grid-template-columns: auto 1fr; padding: 0.3rem 0.5rem; border-radius: 8px; border-width: 1px; }
/* Name and position sit INLINE on one row (Walkup · Guard), so the stat line tucks right underneath -
   keeps each card short instead of stacking name / position / stats over three rows. */
.bk-five .dyn-prow-nm { font-size: 0.86rem; display: inline; }
.bk-five .dyn-prow-pos { display: inline; }
.bk-five .dyn-prow-pos::before { content: "·"; margin: 0 0.4rem; color: var(--muted); }
/* Stat line full-width UNDER the name (indented past the avatar) and allowed to wrap, so it can never
   spill outside the box on a narrow result card - the tie box width, not the viewport, is what's tight. */
.bk-five .dyn-prow-box { grid-column: 1 / -1; text-align: left; margin-left: 2.4rem; margin-top: 0.05rem; white-space: normal; }

.result-card .five { display: flex; flex-direction: column; gap: 0.35rem; align-items: stretch; text-align: left; max-width: 340px; margin: 0 auto; }
.rfive { display: flex; align-items: center; gap: 0.5rem; }
.rfive b { color: var(--accent); margin-right: 0.15rem; }

.footnote { max-width: 1080px; margin: 0 auto; padding: 0 1rem 2rem; color: var(--muted); font-size: 0.78rem; text-align: center; }

/* Category-balance peek (mobile only) - a button by the court that opens the bars in a popup, so
   they aren't lost when the draft auto-scrolls. Hidden on desktop (the inline bars show there). */
.cat-peek {
  display: none; align-items: center; justify-content: center; gap: 0.4rem;
  margin: 0.15rem auto 0.55rem; padding: 0.45rem 1rem;
  background: var(--panel-2); border: 1px solid var(--line); border-radius: 999px;
  color: var(--ink); font: inherit; font-weight: 700; font-size: 0.85rem; cursor: pointer;
}
.cat-peek:hover { border-color: var(--accent); color: var(--accent); }
.cat-modal { position: fixed; inset: 0; z-index: 60; display: flex; align-items: center; justify-content: center; padding: 1.2rem; }
.cat-modal.hidden { display: none; }
.cat-modal-back { position: absolute; inset: 0; background: rgba(8, 12, 20, 0.62); backdrop-filter: blur(3px); }
.cat-modal-card { position: relative; width: 100%; max-width: 360px; background: var(--panel); border: 1px solid var(--line); border-radius: 16px; padding: 1.1rem 1.2rem 1.3rem; box-shadow: 0 20px 60px rgba(0, 0, 0, 0.4); }
.cat-modal-h { font-size: 1rem; margin: 0 0 0.85rem; text-align: center; }
.cat-modal-x { position: absolute; top: 0.5rem; right: 0.7rem; background: none; border: none; color: var(--muted); font-size: 1.2rem; line-height: 1; cursor: pointer; }
.cat-modal-gate { text-align: center; color: var(--gate); font-weight: 700; font-size: 0.85rem; margin: 0.85rem 0 0; }

/* Court popup extras - the 6th man / arena / coach, shown under the court (mobile Court button). */
.cm-extras { margin-top: 0.9rem; border-top: 1px solid var(--line); padding-top: 0.6rem; display: flex; flex-direction: column; gap: 0.5rem; }
.cm-row { display: flex; align-items: center; justify-content: space-between; gap: 0.7rem; font-size: 0.9rem; }
.cm-lbl { flex: 0 0 auto; color: var(--muted); font-weight: 700; font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.04em; }
.cm-val { flex: 1 1 auto; min-width: 0; text-align: right; display: inline-flex; align-items: center; justify-content: flex-end; gap: 0.4rem; font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cm-row.pending .cm-val { color: var(--muted); font-weight: 500; font-style: italic; }
.cm-disc { flex: 0 0 auto; width: 24px; height: 24px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-weight: 800; font-size: 0.62rem; }
.cm-sub { color: var(--muted); font-weight: 500; font-size: 0.8rem; }

/* Mobile bottom nav + court tray are desktop-hidden; the @media block below turns them on. */
.mobile-nav, .court-tray { display: none; }

@media (max-width: 820px) {
  /* --- persistent bottom nav (mirrors the top-bar actions) --- */
  .mobile-nav {
    display: flex; position: fixed; left: 0; right: 0; bottom: 0; z-index: 60;
    justify-content: space-around; align-items: stretch;
    background: var(--panel); border-top: 1px solid var(--line);
    padding-bottom: env(safe-area-inset-bottom, 0px);
  }
  .mnav-btn {
    flex: 1 1 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
    background: none; border: none; color: var(--muted); font: inherit; font-size: 0.6rem; font-weight: 700;
    padding: 0.45rem 0.2rem 0.4rem; cursor: pointer; letter-spacing: 0.02em;
  }
  .mnav-btn .ic { width: 22px; height: 22px; }
  .mnav-btn:active { color: var(--ink); }
  .mnav-play { color: var(--accent); }
  .mnav-play .ic { width: 26px; height: 26px; }
  .mnav-play.disabled { color: var(--muted); opacity: 0.5; pointer-events: none; }
  /* --- compact court tray, pinned just above the nav while drafting --- */
  .court-tray {
    display: flex; position: fixed; left: 0; right: 0; z-index: 59;
    bottom: calc(56px + env(safe-area-inset-bottom, 0px));
    gap: 0.4rem; padding: 0.45rem 0.6rem; overflow-x: auto;
    background: color-mix(in srgb, var(--panel) 94%, transparent);
    border-top: 1px solid var(--line); backdrop-filter: blur(6px);
  }
  .court-tray.hidden { display: none; }
  .tray-slot {
    flex: 1 0 auto; display: flex; flex-direction: column; align-items: center; gap: 3px;
    min-width: 52px; background: none; border: none; font: inherit; padding: 0; cursor: default; position: relative;
  }
  .tray-slot.empty[disabled] { opacity: 0.4; }
  .tray-slot.eligible { cursor: pointer; }
  .tray-disc {
    width: 40px; height: 40px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center;
    font-weight: 800; font-size: 0.8rem; background: var(--panel-2); color: var(--muted);
    border: 2px dashed var(--line);
  }
  .tray-slot.filled .tray-disc { border-style: solid; border: none; }
  .tray-slot.eligible .tray-disc {
    border-color: var(--accent); color: var(--accent);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 30%, transparent); animation: trayPulse 1.1s ease-in-out infinite;
  }
  @keyframes trayPulse { 0%,100% { box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 24%, transparent); } 50% { box-shadow: 0 0 0 6px color-mix(in srgb, var(--accent) 10%, transparent); } }
  .tray-nm { font-size: 0.58rem; font-weight: 700; max-width: 56px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .tray-nm.muted { color: var(--muted); }
  .tray-c { position: absolute; top: -2px; right: 8px; width: 15px; height: 15px; border-radius: 50%; background: var(--gate); color: #111; font-size: 0.55rem; font-weight: 900; line-height: 15px; text-align: center; }
  /* keep content clear of the fixed bars */
  #app { padding-bottom: calc(60px + env(safe-area-inset-bottom, 0px)); }
  body.has-tray #app { padding-bottom: calc(140px + env(safe-area-inset-bottom, 0px)); }
  /* the old mobile cat-peek button is superseded by the nav's Balance action */
  .cat-peek { display: none; }
}

@media (max-width: 820px) {
  .layout { grid-template-columns: 1fr; }
  .sidebar { position: static; }

  /* ---- Mobile draft reflow (part B): keep the court within thumb-reach of the player list ----
     The player list scrolls INSIDE a capped box, so the court sits right below it and stays in
     view while you browse - pick a player, the court (with its lit slots) is already there. */
  .offer .pool-grid {
    max-height: 46vh; overflow-y: auto; overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch; padding-right: 0.15rem;
  }
  /* compact cards → two per row, shorter list */
  .pool-grid { grid-template-columns: repeat(auto-fill, minmax(148px, 1fr)); gap: 0.4rem; }
  .card { padding: 0.38rem 0.45rem; }
  .card .sub { margin: 0.02rem 0 0.2rem; }
  /* mpg drops to its own line below the position (no inline "·") */
  .card .sub .mpg { display: block; }
  .card .sub .mpg::before { content: none; }
  /* 2 stat columns (PTS REB / AST STL / BLK TS%), SPREAD across the card width so they use the room */
  /* Full-width stats: stretch across the whole card (was shrink-wrapped to 2 cols, leaving a dead
     right column) and lay the 6 stats 3-across - PTS REB AST / STL BLK TS. Columns are content-sized
     (so a double-digit "19.0 PTS" never clips) and space-between spreads them to fill the card. */
  .statgrid { grid-template-columns: repeat(3, max-content); justify-content: space-between;
    column-gap: 0.2rem; width: 100%; font-size: 0.63rem; }
  /* the "Arena & coach unlock after your five" placeholder just pushes the court down - drop it on
     mobile so the court follows the list directly (the real arena still shows once it's spun). */
  .venue.slim { display: none; }

  /* The inline category bars stay hidden on mobile - the nav's "Ratings" button opens them in a popup.
     (Between spins we give the space to a bigger court + the 6th man instead, below.) */
  #sidebar-cats { display: none; }

  /* Daily lockout recap (cold re-entry, not the fresh result): drop the leftover draft chrome so the
     recap is self-contained. On the fresh RESULT (data-revealed) we KEEP the court so the "reveal the
     best five" flip works on mobile, but drop the parts that duplicate the result card. */
  body[data-locked="1"] .control { display: none; }
  body[data-locked="1"]:not([data-revealed="1"]) .sidebar { display: none; }
  body[data-locked="1"][data-revealed="1"] #sidebar-cats,
  body[data-locked="1"][data-revealed="1"] #cat-peek,
  body[data-locked="1"][data-revealed="1"] #bench,
  body[data-locked="1"][data-revealed="1"] #sixth-slot,
  body[data-locked="1"][data-revealed="1"] #venue { display: none; }

  /* Reclaim the top chrome - the logo, mode tabs and spin controls are sized for a desktop and
     otherwise bury the draft under a full screen of header. Mobile-only. */
  /* Item 1: ONE compact top row - logo left, [mode ▾] [🏆] [?] [⚙] right, next to the logo. The logo
     shrinks first so the controls always fit on the single line; frees the vertical space below. */
  /* A taller, more substantial header band - more vertical presence. The logo grows a touch;
     the extra horizontal width it needs is reclaimed from the dropdown (trimmed arrow padding +
     max-width), so the three buttons stay put and "Europe" never clips. */
  .topbar { flex-wrap: nowrap; align-items: center; padding: 1.1rem 0.7rem 0.7rem; gap: 0.3rem; }
  .topbar-side:first-child { flex: 1 1 auto; min-width: 0; overflow: hidden; }
  .topbar-side:last-child { flex: 0 0 auto; gap: 0.26rem; }
  .logo { gap: 0.48rem; }
  .logo-type { font-size: 1.58rem; }
  .ball { width: 38px; }
  .m-l1, .m-l2 { font-size: 1.54rem; }          /* readable but not so wide the wordmark clips */
  .m-crown { width: 24px; } .m-ball { width: 30px; }
  .corner-btn { width: 38px; height: 38px; box-shadow: none; }   /* item 5: bigger tap targets */
  .help-btn { font-size: 1.15rem; }
  /* five tabs → one compact dropdown (saves the 3-row wrap); max-width sized so the longest
     mode name ("Dynasty", ~89px) never clips while giving the logo back a few px. */
  .modes { display: none; }
  .mode-select { display: inline-block; max-width: 6rem; padding: 0.42rem 1.5rem 0.42rem 0.5rem; font-size: 0.9rem;
    background-position: right 0.62rem center; }  /* wider pad + tighter arrow so "Classic" clears the chevron */

  /* While an offer is OPEN (picking) the inline court duplicates the bottom tray - hide it; the tray +
     player list are the focus. But once you're BETWEEN picks (body.court-visible: a player placed, no
     offer) the court REVEALS so you can see your five and, on the arena/coach step, the home-court tint.
     The "Court" nav button still pops the full court on demand. On the finished result has-tray is off. */
  body.has-tray:not(.court-visible) .sidebar > #court-wrap,
  body.has-tray .sidebar > #court-caption,
  body.has-tray .sidebar > #sixth-slot,
  body.has-tray .sidebar > #place-hint { display: none; }
  /* Between spins the roster panel holds only the empty "Press Spin…" box - the court IS the view now,
     so drop the whole panel; it's still shown on the initial screen (before the first spin), while an
     offer/reel is up, and once complete (it carries the arena/coach step). */
  body.no-roster .roster-panel { display: none; }
  /* When the court isn't showing (the initial screen, and while picking) the sidebar is empty - its
     card background was rendering as a stray little pill under the offer box. Collapse it so there's
     just ONE box. It returns whenever the court is visible (between spins, arena/coach, the result). */
  body:not(.court-visible) .sidebar { display: none; }
  /* Between spins, give the reclaimed space to a BIGGER court + the 6th-man slot (priority), so your
     five reads large and clear while you decide the next spin. (Court is otherwise capped ~208px.) */
  body.court-visible .sidebar > #court-wrap { max-width: min(90vw, 340px); }
  body.court-visible .sidebar > #sixth-slot { max-width: min(90vw, 340px); margin-left: auto; margin-right: auto; }
  /* the court, popped into its modal, wants a touch more room than the 208px sidebar cap */
  .court-modal-holder { display: flex; justify-content: center; }
  .court-modal-holder #court-wrap { max-width: 300px; margin: 0 auto; display: block; }
  .court-modal .court-modal-card { max-width: 340px; }
  /* Items 4 + 5: "Pick N of 6" + Spin + the three re-spins share ONE row (sized up now that
     consolidating rows freed the space); the mode status bar (Salary's € budget meter, or a Daily
     theme chip) drops to its OWN full-width line beneath - so Salary isn't cramped onto the row.
     Flatten the desktop wrappers (display:contents) so the controls flow directly in the flex row. */
  .control { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 0.35rem; margin-bottom: 0.55rem; }
  .ctl-mid, .ctl-side { display: contents; }
  .pickinfo { font-size: 1.05rem; flex: 0 0 auto; }
  .spin-group { flex: 0 0 auto; }
  .spin-btn { font-size: 1.02rem; padding: 0.5rem 0.85rem; }
  .respins { flex: 0 0 auto; gap: 0.25rem; }
  /* separator + the desktop trailing gap both dropped: every px counts on the one-line mobile row */
  .ctl-side .respins { border-left: none; padding-left: 0; padding-right: 0; }
  /* The divider before the status bar is a DESKTOP join - it reads as "Pick | Spin | Versus" only
     while the bar sits inline on the same row. On a phone the bar drops to its own full-width line
     below, where the rule survived as a stray vertical tick floating at the left margin, and its
     0.75rem of padding pushed the centred label off the page's centre line, so the mode name no
     longer sat under "Pick".
     Dropped for every mode, Daily included: Daily's bar is the one that TRIES to stay inline, but
     whether it manages to depends on the length of that day's theme label ("Legacy · Fenerbahçe"
     fits beside Pick+Spin at 430px and wraps at 375px), so there is no width at which the divider
     is reliably the inline kind. A separator that is sometimes a stray tick is worse than no
     separator; the 0.5rem gap carries it. */
  .ctl-side .daily-bar { border-left: none; padding-left: 0; }
  .mini-btn { padding: 0.4rem 0.42rem; font-size: 0.74rem; white-space: nowrap; }  /* compact so Pick+Spin+re-spins share one row */
  /* The mode status bar (Salary € meter / Daily theme chip) gets its OWN full-width line beneath the
     controls, and must SHRINK to fit it - the € meter was a fixed 130px that overflowed the row. */
  .daily-bar { flex: 1 0 100%; min-width: 0; margin: 0.15rem 0 0; justify-content: center; font-size: 0.82rem; flex-wrap: wrap; }
  .daily-bar .cap-meter { width: auto; flex: 1 1 60px; min-width: 40px; max-width: 130px; margin: 0 0.4rem; }
  .offer-head { margin-bottom: 0.55rem; }
  .offer-head .club { font-size: 1.2rem; }
  .offer-head .season { font-size: 1.05rem; }
}

/* ---- Short screens (laptops at ~800px tall and below) ----
   MUST come last: these override the base .court-wrap / .spot sizes defined earlier.
   The court is the biggest thing in the sidebar, so it gives ground first - the category
   bars are the feedback loop and must never be what falls off the bottom. */
@media (min-width: 821px) and (max-height: 800px) {
  .topbar { padding: 2rem 1rem 0.3rem; } /* crown headroom + a bit lower, smaller-screen size */
  .logo-type { font-size: clamp(1.9rem, 3.8vw, 2.6rem); }
  .ball { width: clamp(38px, 6.5vw, 52px); }
  .control { margin-bottom: 0.6rem; }
  .court-wrap { max-width: 176px; }
  .spot { width: 46px; }
  .spot .disc { width: 26px; height: 26px; font-size: 0.62rem; }
  .spot .slot-lbl, .spot .spot-nm { font-size: 0.64rem; }
}
@media (min-width: 821px) and (max-height: 760px) {
  .court-wrap { max-width: 150px; }
  .spot { width: 42px; }
  .spot .disc { width: 23px; height: 23px; font-size: 0.58rem; }
  .sixth-slot { min-height: 2.2rem; padding: 0.28rem 0.5rem; }
  .cat-row { margin-bottom: 0.18rem; }
  .cats { padding-top: 0.6rem; }
  /* the disc already reads "PF"/"SG" - the Forward/Guard caption is just clutter this small */
  .spot .slot-lbl.muted { display: none; }
  /* the affiliation disclaimer is REQUIRED - shrink it, never hide it */
  .footnote { font-size: 0.6rem; padding: 0 1rem 0.3rem; line-height: 1.3; }
}

/* ---------------- Dynasty gauntlet ---------------- */
.avatar.sm { width: 22px; height: 22px; font-size: 0.6rem; }
.dyn-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 0.7rem; }
.dyn-streak { display: flex; align-items: baseline; gap: 0.35rem; font-size: 1.15rem; }
.dyn-streak b { font-size: 1.5rem; color: var(--accent); }
.dyn-streak span { font-size: 0.75rem; color: var(--muted); text-transform: uppercase; letter-spacing: 0.05em; }
.dyn-round { font-weight: 700; color: var(--muted); font-size: 0.9rem; }
/* Home/away banner is intentionally understated - the 🏠/✈️ icon, the word, and the court tint
   carry the cue, so the panel stays neutral (no green/red ribbon or coloured font). */
.dyn-loc { text-align: center; font-weight: 700; font-size: 0.9rem; padding: 0.4rem; border-radius: 10px; margin-bottom: 0.8rem; background: var(--panel-2); color: var(--ink); border: 1px solid var(--line); }
.dyn-matchup { background: var(--panel-2); border: 1px solid var(--line); border-radius: var(--radius); padding: 0.85rem; text-align: center; }
.dyn-opp-head { font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.08em; color: var(--muted); margin-bottom: 0.35rem; }
.dyn-opp-name { font-size: 1.05rem; margin-bottom: 0.65rem; display: flex; align-items: center; justify-content: center; gap: 0.4rem; flex-wrap: wrap; }
.dyn-opp-name .badge { width: 34px; height: 34px; font-size: 0.85rem; border-radius: 9px; }
.dyn-opp-five { display: flex; flex-wrap: wrap; gap: 0.4rem; justify-content: center; }
.dyn-chip { display: inline-flex; align-items: center; gap: 0.3rem; background: var(--panel); border: 1px solid var(--line); border-radius: 999px; padding: 0.15rem 0.5rem 0.15rem 0.15rem; font-size: 0.82rem; }
.dyn-chip-nm { font-weight: 600; }
.dyn-chip-pos { font-size: 0.62rem; color: var(--muted); font-weight: 700; }
.dyn-odds { text-align: center; margin: 0.9rem 0 0.2rem; }
.dyn-odds-pct { font-size: 1.6rem; font-weight: 800; }
.dyn-odds-lbl { font-size: 0.8rem; color: var(--muted); }
.dyn-odds.good .dyn-odds-pct { color: var(--good); }
.dyn-odds.even .dyn-odds-pct { color: var(--gate); }
.dyn-odds.long .dyn-odds-pct { color: var(--bad); }
/* Dynasty action buttons are normal-sized (like every other button), not full-width bars */
.dyn-play-wrap { text-align: center; margin-top: 0.6rem; }
.dyn-play-wrap #dyn-play { margin: 0; }
#dyn-again { margin-top: 1rem; }

/* recruit picker */
.dyn-scoreline { text-align: center; font-weight: 700; padding: 0.5rem; border-radius: 10px; margin-bottom: 0.7rem; display: flex; align-items: center; justify-content: center; gap: 0.4rem; flex-wrap: wrap; }
.dyn-scoreline.win { background: color-mix(in srgb, var(--good) 14%, transparent); color: var(--good); }
.dyn-scoreline.loss { background: color-mix(in srgb, var(--bad) 12%, transparent); color: var(--bad); }
.dyn-loot { text-align: center; margin: 0.2rem 0 0.2rem; }
.dyn-sub { text-align: center; font-size: 0.82rem; color: var(--muted); margin-bottom: 0.8rem; }
.dyn-recruit { display: grid; grid-template-columns: 1fr 1fr; gap: 0.7rem; }
.dyn-col { display: flex; flex-direction: column; gap: 0.4rem; }
.dyn-col-head { font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.06em; font-weight: 800; text-align: center; padding-bottom: 0.2rem; }
.dyn-col-head.in { color: var(--good); }
.dyn-col-head.out { color: var(--bad); }
.dyn-pick { background: var(--panel-2); border: 1.5px solid var(--line); border-radius: 10px; padding: 0.3rem; cursor: pointer; text-align: left; transition: border-color 0.12s, background 0.12s; }
.dyn-pick:hover:not(:disabled) { border-color: var(--muted); }
.dyn-pick.in.sel { border-color: var(--good); background: color-mix(in srgb, var(--good) 12%, transparent); }
.dyn-pick.out.sel { border-color: var(--bad); background: color-mix(in srgb, var(--bad) 12%, transparent); }
.dyn-pick:disabled { opacity: 0.35; cursor: not-allowed; }

/* run over */
.dyn-over { position: relative; text-align: center; padding: 2.6rem 0.5rem 1.2rem; }
.dyn-view-toggle { position: absolute; top: 0; right: 0; background: var(--panel); border: 1px solid var(--line); border-radius: 999px; padding: 0.35rem 0.85rem; font-size: 0.8rem; font-weight: 700; color: var(--ink); cursor: pointer; transition: border-color 0.12s, color 0.12s; }
.dyn-view-toggle:hover { border-color: var(--accent); color: var(--accent); }
.dyn-over-label { text-transform: uppercase; letter-spacing: 0.1em; color: var(--muted); font-size: 0.8rem; }
.dyn-streak-big { font-size: 3.4rem; font-weight: 900; color: var(--accent); line-height: 1.1; }
.dyn-streak-cap { text-transform: uppercase; letter-spacing: 0.08em; color: var(--muted); font-size: 0.8rem; margin-bottom: 0.9rem; }
.dyn-over-sub { color: var(--muted); font-size: 0.9rem; margin: 0.8rem 0; }
.dyn-over .result-cats-wrap { text-align: center; margin: 1rem auto 0; max-width: 320px; }

/* opponent + home/away spin */
.dyn-spin { text-align: center; padding: 1.4rem 0.5rem; }
.dyn-spin-cap { color: var(--muted); font-size: 0.9rem; margin-bottom: 1rem; }
.dyn-reels { justify-content: center; }
.dyn-loc-reel { margin-top: 1.1rem; font-size: 1.3rem; font-weight: 800; letter-spacing: 0.03em; color: var(--muted); transition: color 0.15s; }
.dyn-loc-reel.landed { color: var(--ink); transform: scale(1.08); }

/* simulated scoreboard */
.dyn-scoreboard { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 0.5rem; background: var(--panel-2); border: 1px solid var(--line); border-radius: var(--radius); padding: 1.4rem 0.8rem; margin-top: 0.4rem; }
.dsb-side { text-align: center; }
.dsb-team { font-size: 0.85rem; color: var(--muted); font-weight: 700; margin-bottom: 0.35rem; display: flex; align-items: center; justify-content: center; gap: 0.3rem; }
.dsb-team .badge { width: 26px; height: 26px; font-size: 0.62rem; border-radius: 7px; }
.dsb-score { font-size: 3rem; font-weight: 900; line-height: 1; transition: transform 0.18s; }
.dsb-score.ahead { color: var(--accent); }
.dsb-score.lead { color: var(--accent); transform: scale(1.06); }
.dsb-mid { text-align: center; }
.dsb-q { font-size: 0.85rem; font-weight: 800; letter-spacing: 0.06em; color: var(--muted); padding: 0.2rem 0.5rem; border: 1px solid var(--line); border-radius: 999px; }
.dyn-scoreboard.won .dsb-q { color: var(--good); border-color: var(--good); }
.dyn-scoreboard.lost .dsb-q { color: var(--bad); border-color: var(--bad); }

/* two-step recruit - full stat rows */
.dyn-plist { display: flex; flex-direction: column; gap: 0.45rem; }
.dyn-prow { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 0.55rem; width: 100%; text-align: left; background: var(--panel-2); border: 1.5px solid var(--line); border-radius: 11px; padding: 0.45rem 0.6rem; transition: border-color 0.12s, background 0.12s; }
button.dyn-prow { cursor: pointer; font: inherit; color: inherit; }
button.dyn-prow:hover:not(:disabled) { border-color: var(--muted); }
button.dyn-prow:disabled { opacity: 0.4; cursor: not-allowed; }
.dyn-prow.owned { opacity: 0.4; }
.dyn-prow.out.sel { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 13%, transparent); }
.dyn-prow.in { border-color: var(--good); background: color-mix(in srgb, var(--good) 12%, transparent); }
.dyn-prow-id { min-width: 0; }
.dyn-prow-nm { font-weight: 700; display: block; }
.dyn-prow-pos { font-size: 0.68rem; color: var(--muted); }
.dyn-prow-box { font-size: 0.7rem; color: var(--muted); text-align: right; white-space: nowrap; }
.dyn-prow-box b { color: var(--ink); font-weight: 700; }
.dyn-incoming { margin-bottom: 0.3rem; }
.dyn-in-tag { display: block; font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.07em; font-weight: 800; color: var(--good); margin-bottom: 0.3rem; text-align: center; }
.dyn-actions { display: flex; gap: 0.7rem; justify-content: center; align-items: center; margin-top: 0.9rem; }
.dyn-actions #dyn-confirm { margin: 0; }
.dyn-actions #dyn-back { margin: 0; white-space: nowrap; }

@media (max-width: 560px) {
  .dyn-prow { grid-template-columns: auto 1fr; }
  /* the box line drops to its own row here, and has to WRAP on it - nowrap ran the last stats off
     the side of the card */
  .dyn-prow-box { grid-column: 1 / -1; text-align: left; margin-left: 2rem; white-space: normal; line-height: 1.45; }
}

/* the split matchup court: your five (bottom) vs the opponent's (top), tinted by the home club */
.dyn-abovecourt { text-align: center; font-size: 0.95rem; color: var(--muted); margin-bottom: 0.1rem; }
.dyn-abovecourt .badge { width: 26px; height: 26px; font-size: 0.62rem; border-radius: 7px; vertical-align: middle; }
.dyn-court { position: relative; width: 100%; max-width: 216px; margin: 0.5rem auto 0.2rem; aspect-ratio: 300 / 480; border-radius: 10px; overflow: hidden; box-shadow: 0 0 0 3px var(--line), 0 8px 24px rgba(20,40,70,0.18); transition: box-shadow 0.85s ease; }
.dyn-court.tinted { box-shadow: 0 0 0 3px var(--tint-ink, var(--tint, var(--line))), 0 8px 24px rgba(20,40,70,0.18); }
.dyn-court-svg { position: absolute; inset: 0; width: 100%; height: 100%; }
/* the tint sweeps in from the TOP of the court down to the bottom (clip reveal), not all at once */
.dyn-court-tint { position: absolute; inset: 0; background: var(--tint); opacity: 0.14; pointer-events: none; clip-path: inset(0 0 100% 0); transition: clip-path 1s ease; }
.dyn-court.tinted .dyn-court-tint { clip-path: inset(0 0 0 0); }
.dyn-court-mark { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-size: 4.2rem; font-weight: 900; color: var(--tint); opacity: 0; pointer-events: none; letter-spacing: -0.03em; transition: opacity 0.85s ease; }
.dyn-court.tinted .dyn-court-mark { opacity: 0.14; }
.dyn-loc-spin { text-align: center; font-size: 1.05rem; font-weight: 700; margin-bottom: 0.6rem; }
.dyn-loc-cap { color: var(--muted); font-weight: 600; font-size: 0.9rem; }
.dyn-loc-spin .dyn-loc-reel { display: inline-block; margin-top: 0; }
.dyn-spot { position: absolute; transform: translate(-50%, -50%); display: flex; flex-direction: column; align-items: center; gap: 2px; pointer-events: none; }
.dyn-spot .disc { width: 30px; height: 30px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-weight: 800; font-size: 0.66rem; }
.dyn-spot-nm { font-size: 0.6rem; font-weight: 700; color: #17222f; background: rgba(255,255,255,0.82); padding: 0 4px; border-radius: 4px; white-space: nowrap; }
.dyn-half-tag { position: absolute; left: 50%; transform: translateX(-50%); display: flex; align-items: center; gap: 0.3rem; font-size: 0.62rem; font-weight: 700; color: #fff; background: rgba(18,26,40,0.74); padding: 0.15rem 0.55rem; border-radius: 999px; white-space: nowrap; max-width: 92%; overflow: hidden; text-overflow: ellipsis; }
.dyn-half-tag.opp { top: 7px; }
.dyn-half-tag.you { bottom: 7px; }
.dyn-half-tag .badge { width: 20px; height: 20px; font-size: 0.5rem; border-radius: 5px; box-shadow: none; }

/* Dynasty streak leaderboard (on the run-over screen) */
.dyn-lb { margin: 1.1rem 0 0.2rem; text-align: left; }
.dyn-lb-head { text-align: center; font-weight: 800; font-size: 0.95rem; margin-bottom: 0.5rem; }
.dyn-lb-list { list-style: none; margin: 0; padding: 0; border: 1px solid var(--line); border-radius: 10px; overflow: hidden; }
.dyn-lb-list li { display: grid; grid-template-columns: 2rem 1fr auto; align-items: center; gap: 0.5rem; padding: 0.4rem 0.7rem; font-size: 0.9rem; border-top: 1px solid var(--line); }
.dyn-lb-list li:first-child { border-top: none; }
.dyn-lb-list li.me { background: color-mix(in srgb, var(--accent) 14%, transparent); font-weight: 700; }
.lb-rank { color: var(--muted); font-weight: 700; text-align: center; }
.lb-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lb-streak { font-weight: 700; white-space: nowrap; }
.dyn-lb-you { text-align: center; font-size: 0.85rem; color: var(--muted); margin-top: 0.5rem; }
.dyn-lb-status { text-align: center; font-size: 0.85rem; color: var(--muted); padding: 0.5rem; }
.dyn-lb-status.off { color: var(--gate); }
.dyn-lb-join { display: flex; gap: 0.5rem; justify-content: center; }
.dyn-name-input { flex: 0 1 220px; background: var(--field); border: 1px solid var(--line); border-radius: 999px; padding: 0.45rem 0.9rem; color: var(--ink); font: inherit; }
.dyn-name-input:focus { outline: none; border-color: var(--accent); }

/* Dynasty lobby: Weekly vs Endless */
.dyn-lobby { display: grid; grid-template-columns: 1fr 1fr; gap: 0.9rem; }
.dyn-lobby-card { display: flex; flex-direction: column; background: var(--panel-2); border: 1.5px solid var(--line); border-radius: var(--radius); padding: 1rem; }
.dyn-lobby-card.weekly { border-color: color-mix(in srgb, var(--accent) 45%, var(--line)); }
.dlc-tag { font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.06em; font-weight: 800; color: var(--accent); margin-bottom: 0.4rem; }
/* With the explainer paragraph gone, the headline IS the card, so it gets the room the paragraph used
   to take and both boxes end up the same height whatever their wording. It also has to OPT OUT of the
   global h3, which is a small grey uppercase LABEL style: inherited at headline size that reads as a
   wall of spaced-out capitals, competing with the orange tag directly above it. */
.dyn-lobby-card h3 {
  margin: 0 0 0.9rem; font-size: 1.15rem; line-height: 1.3; text-wrap: balance; flex: 1;
  text-transform: none; letter-spacing: -0.01em; color: var(--ink); font-weight: 700;
}
.dyn-lobby-card p { margin: 0 0 0.9rem; font-size: 0.85rem; color: var(--muted); line-height: 1.45; flex: 1; }
/* Scenario day: the club-season under the scenario's title. */
.dyn-lobby-card .dlc-sub { margin: -0.6rem 0 0.9rem; font-size: 0.9rem; font-weight: 600; color: var(--muted); }
.dyn-lobby-card.scen { border-color: color-mix(in srgb, var(--gate) 55%, var(--line)); }
.dyn-lobby-card.scen .dlc-tag { color: var(--gate); }
.dyn-lobby-card .play-btn { align-self: flex-start; margin: 0; }
/* G.O.A.T. lobby: centre the card's action button (Dynasty keeps its left-aligned button). */
/* Shared lobby frame: the two mode cards sit in a centred, max-680px column, so Dynasty and
   G.O.A.T. get the same card PROPORTIONS - full width made Dynasty's boxes long and letterboxed. */
.mode-lobby { max-width: 680px; margin: 0 auto; width: 100%; text-align: center; }
.mode-lobby .dyn-lobby-card .play-btn,
.goat-intro .dyn-lobby-card .play-btn { align-self: center; }
.dlc-done { font-size: 0.9rem; color: var(--good); font-weight: 600; }
@media (max-width: 560px) { .dyn-lobby { grid-template-columns: 1fr; } }

/* leaderboard hub (modal with Weekly / All-time / Daily tabs) */
.hub-btn { font-size: 0.95rem; }
.lb-hub { position: fixed; inset: 0; z-index: 60; display: flex; align-items: center; justify-content: center; }
.lb-hub.hidden { display: none; }
.hub-backdrop { position: absolute; inset: 0; background: rgba(6,10,18,0.66); }
.hub-card { position: relative; width: min(440px, 92vw); max-height: 86vh; overflow-y: auto; background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); padding: 1.4rem 1.2rem; box-shadow: 0 20px 60px rgba(0,0,0,0.5); }
.hub-close { position: absolute; top: 0.6rem; right: 0.8rem; background: none; border: none; color: var(--muted); font-size: 1.1rem; cursor: pointer; line-height: 1; }
.hub-close:hover { color: var(--ink); }
.hub-title { text-align: center; margin: 0 0 1rem; font-size: 1.2rem; }
.hub-tabs { display: flex; gap: 0.4rem; margin-bottom: 0.6rem; }
/* Icon ABOVE the name, always (a fixed layout so short names like "Salary" and long ones like
   "G.O.A.T." read the same - before, the long ones wrapped the icon on top while short ones kept it
   inline). Column layout also fits the narrow 4-up tabs on mobile without wrapping. */
.hub-tab { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 3px; background: var(--panel-2); border: 1px solid var(--line); border-radius: 14px; padding: 0.5rem 0.3rem; font-size: 0.8rem; font-weight: 700; color: var(--muted); cursor: pointer; transition: border-color 0.12s, color 0.12s; }
.hub-tab .ic { width: 18px; height: 18px; }
.hub-tab:hover { color: var(--ink); }
.hub-tab.on { background: color-mix(in srgb, var(--accent) 16%, transparent); border-color: var(--accent); color: var(--accent); }
/* second tab row (All-time / Daily / Weekly) + the scoring-legend toggle */
.hub-subrow { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; margin-bottom: 0.8rem; }
.hub-subtabs { display: flex; gap: 0.3rem; }
.hub-subtab { background: none; border: none; border-bottom: 2px solid transparent; padding: 0.2rem 0.5rem; font-size: 0.82rem; font-weight: 700; color: var(--muted); cursor: pointer; }
.hub-subtab:hover { color: var(--ink); }
.hub-subtab.on { color: var(--ink); border-bottom-color: var(--accent); }
/* Scope lens - World / My Country / My Team chips */
.hub-scopes { display: flex; flex-wrap: wrap; gap: 0.35rem; margin-bottom: 0.8rem; }
.hub-scope {
  display: inline-flex; align-items: center; gap: 0.32rem;
  background: var(--bg); border: 1px solid var(--line); border-radius: 999px;
  padding: 0.28rem 0.62rem; font: inherit; font-size: 0.78rem; font-weight: 700; color: var(--muted); cursor: pointer;
}
.hub-scope:hover { color: var(--ink); }
.hub-scope.on { background: var(--accent); border-color: var(--accent); color: #fff; }
.hub-scope .lb-badge { width: 18px; height: 18px; font-size: 0.5rem; }
.hub-legend-btn { background: none; border: none; color: var(--accent); font-size: 0.76rem; font-weight: 600; cursor: pointer; white-space: nowrap; }
.hub-legend { font-size: 0.8rem; line-height: 1.5; color: var(--muted); background: var(--panel-2); border: 1px solid var(--line); border-radius: 10px; padding: 0.6rem 0.75rem; margin-bottom: 0.8rem; }
.hub-legend b { color: var(--ink); font-weight: 700; }
.hub-legend ul { margin: 0.35rem 0 0; padding-left: 1.1rem; }
.hub-legend li { margin-bottom: 0.25rem; }
.hub-legend li:last-child { margin-bottom: 0; }
.hub-body { min-height: 130px; }
/* score-style rows: a bold value + a small sub-line (record · result) */
.dyn-lb-list.score li { grid-template-columns: 2rem 1fr auto; }
.lb-val { text-align: right; line-height: 1.15; }
.lb-val b { font-weight: 800; }
.lb-val .lb-sub { display: block; font-size: 0.72rem; font-weight: 600; color: var(--muted); white-space: nowrap; }
.lb-val .lb-sub .ic { width: 0.9em; height: 0.9em; vertical-align: -0.1em; }

/* ================= GOAT mode ================= */
/* Value-matched (="1"), NOT bare presence: app.js sets body.dataset.goat = goatMode() ? "1" : "",
   and setting it to "" leaves the attribute PRESENT - so `body[data-goat]` would match in every mode
   and wrongly hide the spin bar everywhere. Match the "1" value, like data-locked/data-revealed. */
/* Lobby screens have no spin bar, but they KEEP its footprint so the sidebar court sits at exactly
   the same height as every other mode (it used to ride ~56px higher). */
@media (min-width: 821px) {  /* desktop/laptop only - on a phone this would just be dead space */
  body[data-lobby="1"] .control,
  body[data-lobby="1"] .control.hidden { display: flex !important; visibility: hidden; }
}
/* G.O.A.T. BUILD screens go full-width (no sidebar). The LOBBY is exempt: like every other mode's
   opening screen it shows the court, so the sidebar + two-column layout stay. */
body[data-goat="1"] .control { display: none; }
body[data-goat="1"]:not([data-lobby="1"]) .sidebar { display: none; }
body[data-goat="1"]:not([data-lobby="1"]) .layout { grid-template-columns: 1fr; }
body[data-goat="1"] .roster-panel { overflow-y: auto; }
.goat-wrap { max-width: 680px; margin: 0 auto; width: 100%; padding: 0.4rem 0 1.2rem; }

.goat-intro { text-align: center; padding-top: 1.4rem; }
/* The G.O.A.T. LOBBY nests the shared header inside .goat-intro, which already supplies the top
   padding - so don't double it. (The build/scenario screens keep their own .goat-h header.) */
.goat-intro > .mode-intro { padding-top: 0; }
.goat-big-icon { color: #e0a83a; margin-bottom: 0.4rem; font-size: 3.2rem; line-height: 1; }
.goat-big-icon .ic { width: 1em; height: 1em; }
.goat-h { font-size: 1.6rem; margin: 0.2rem 0 0.6rem; }
.goat-sub { color: var(--muted); max-width: 31rem; margin: 0 auto 1.3rem; line-height: 1.5; }

.goat-step { font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.06em; font-weight: 800; color: var(--accent); margin: 0.8rem 0 0.5rem; }

/* Scenario Daily G.O.A.T. - recreate-the-icon / over-the-hump days. */
.goat-scen-intro { padding-top: 1.1rem; }
.goat-scen-tag, .goat-scen-banner .gsb-t { display: inline-flex; align-items: center; gap: 0.35rem; font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.08em; font-weight: 800; color: #e0a83a; }
.goat-scen-tag .ic, .goat-scen-banner .ic { width: 1em; height: 1em; }
.goat-scen-team { font-size: 0.95rem; font-weight: 700; color: var(--muted); margin: 0.1rem 0 0.7rem; }
.goat-scen-flavor { max-width: 33rem; margin: 0 auto 0.8rem; line-height: 1.55; }
.goat-scen-banner { display: flex; align-items: center; justify-content: center; gap: 0.5rem; flex-wrap: wrap; padding: 0.5rem 0.7rem; margin-bottom: 0.7rem; border: 1px solid var(--line); border-radius: 0.7rem; background: color-mix(in srgb, #e0a83a 8%, transparent); font-size: 0.85rem; }
.goat-scen-board .card.locked-base { border-color: #e0a83a; box-shadow: 0 0 0 2px color-mix(in srgb, #e0a83a 45%, transparent); cursor: default; max-width: 22rem; margin: 0 auto; }
/* "Pick your legend" scenarios: the candidates side by side, each clickable. */
.goat-scen-board .pick-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 0.6rem; max-width: 640px; margin: 0 auto; }
.goat-scen-board .pick-grid .card.locked-base { max-width: none; margin: 0; cursor: pointer; transition: transform 0.12s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.15s; }
.goat-scen-board .pick-grid .card.locked-base:hover { transform: translateY(-2px); box-shadow: 0 0 0 2px #e0a83a; }
.lb-pick-cta { margin-top: 0.5rem; font-size: 0.7rem; font-weight: 800; color: #e0a83a; text-transform: uppercase; letter-spacing: 0.04em; text-align: center; }
.goat-scen-done { font-weight: 800; color: #e0a83a; font-size: 1.05rem; display: flex; align-items: center; justify-content: center; gap: 0.4rem; margin: 0.5rem 0; }
.goat-scen-done .ic { width: 1.1em; height: 1.1em; }
.goat-scen-miss { color: var(--muted); font-style: italic; margin: 0.4rem 0; }
/* TEMP: lobby scenario preview (remove with the app.js preview block). */
.goat-scen-preview { margin-top: 1rem; padding-top: 0.8rem; border-top: 1px dashed var(--line); }
.gsp-tag { display: inline-flex; align-items: center; gap: 0.35rem; font-size: 0.68rem; text-transform: uppercase; letter-spacing: 0.06em; font-weight: 800; color: #e0a83a; margin-bottom: 0.5rem; }
.gsp-tag .ic { width: 1em; height: 1em; }
.gsp-row { display: flex; gap: 0.5rem; flex-wrap: wrap; justify-content: center; }
.gsp-btn { display: flex; flex-direction: column; align-items: flex-start; gap: 0.15rem; padding: 0.55rem 0.75rem; border: 1px solid var(--line); border-radius: 0.6rem; background: var(--card, transparent); color: inherit; cursor: pointer; text-align: left; font: inherit; }
.gsp-btn:hover { border-color: #e0a83a; }
.gsp-btn b { font-size: 0.9rem; }
.gsp-btn span { font-size: 0.72rem; color: var(--muted); }
/* The match-day row shares the practice row's shape but not its colour: gold belongs to G.O.A.T.,
   and this one is Daily. */
.mdp-tag { color: var(--accent); }
.mdp-btn:hover { border-color: var(--accent); }
.goat-club { font-size: 1rem; margin-bottom: 0.4rem; display: flex; align-items: center; gap: 0.4rem; }
.goat-hint { color: var(--muted); font-size: 0.85rem; margin: 0 0 0.7rem; line-height: 1.45; }
.goat-list { display: flex; flex-direction: column; gap: 0.35rem; }
.goat-list button.dyn-prow { cursor: pointer; }
.goat-list button.dyn-prow:hover { border-color: var(--accent); }

.goat-card { background: var(--panel-2); border: 1px solid var(--line); border-radius: 12px; padding: 0.7rem 0.85rem; margin-bottom: 0.9rem; }
.goat-card-id { font-size: 1rem; display: flex; align-items: center; gap: 0.4rem; margin-bottom: 0.6rem; }
.goat-card-id.big { font-size: 1.2rem; justify-content: center; margin: 0.4rem 0; flex-wrap: wrap; }
.goat-slots { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.4rem; }
.gs { background: var(--panel); border: 1px solid var(--line); border-radius: 9px; padding: 0.4rem 0.4rem; text-align: center; }
.gs.grafted { border-color: color-mix(in srgb, var(--accent) 45%, var(--line)); }
.gs.atbase { opacity: 0.8; }
.gs-lbl { display: block; font-size: 0.64rem; text-transform: uppercase; letter-spacing: 0.03em; color: var(--muted); }
.gs-val { display: block; font-size: 1.2rem; font-weight: 800; }
.gs-src { display: block; font-size: 0.66rem; color: var(--accent); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.gs-src.base { color: var(--muted); font-style: italic; }

.goat-spinrow { text-align: center; padding: 1rem 0; }
.goat-picker { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.5rem; margin-bottom: 0.7rem; }
.gsb { background: var(--panel-2); border: 1px solid var(--line); border-radius: 10px; padding: 0.55rem 0.4rem; cursor: pointer; text-align: center; color: inherit; font: inherit; transition: border-color 0.12s; }
.gsb:hover { border-color: var(--accent); }
.gsb-lbl { display: block; font-size: 0.66rem; text-transform: uppercase; color: var(--muted); }
.gsb-val { display: block; font-size: 1.3rem; font-weight: 800; }
.gsb-cmp { display: block; font-size: 0.64rem; }
.gsb.up .gsb-cmp { color: var(--good); }
.gsb.down .gsb-cmp { color: var(--bad); }
/* a stat you've already taken - you can re-take it (overwrite) from this donor. */
.gsb.held { border-color: color-mix(in srgb, var(--accent) 55%, var(--line)); }
.gsb.held .gsb-lbl::after { content: " · held"; color: var(--accent); }

.goat-result { text-align: center; }
.goat-slam { font-size: 1.1rem; font-weight: 800; letter-spacing: 0.04em; color: #e0a83a; display: flex; align-items: center; justify-content: center; gap: 0.4rem; margin: 0.5rem 0; }
.goat-slam .ic { width: 1.1em; height: 1.1em; }
.goat-badges { display: flex; flex-wrap: wrap; gap: 0.4rem; justify-content: center; margin: 0.6rem 0; }
/* Awards reveal sequentially but sit in one centered horizontal row (inline-block badges). */
.goat-badge { display: inline-block; margin: 0.25rem 0.28rem; background: var(--panel-2); border: 1px solid var(--line); border-radius: 999px; padding: 0.3rem 0.75rem; font-size: 0.8rem; font-weight: 700; vertical-align: middle; }
.goat-badge.gold { border-color: #e0a83a; color: #e0a83a; }
.goat-noawards { color: var(--muted); font-size: 0.85rem; margin: 0.5rem 0; }
.goat-f4-steal { color: var(--muted); font-size: 0.82rem; margin: 0.2rem auto 0.6rem; max-width: 27rem; line-height: 1.4; }
.goat-line { display: grid; grid-template-columns: repeat(6, 1fr); gap: 0.4rem; margin: 0.9rem 0; }
.gl-stat { background: var(--panel-2); border: 1px solid var(--line); border-radius: 9px; padding: 0.4rem 0.15rem; }
.gl-v { display: block; font-size: 1.05rem; font-weight: 800; }
.gl-l { display: block; font-size: 0.58rem; text-transform: uppercase; color: var(--muted); }
.gl-src { display: block; font-size: 0.6rem; color: var(--accent); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.gl-src.base { color: var(--muted); font-style: italic; }
.goat-cast-line { font-size: 0.85rem; margin: 0.5rem 0 1rem; }
.goat-mate { display: inline-block; margin: 0 0.35rem; }
.goat-mate b { color: var(--muted); }
.goat-bracket { max-width: 340px; margin: 0.5rem auto; text-align: left; }
.goat-rounds { max-width: 360px; margin: 0.8rem auto; text-align: left; }
.gr-head { font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.05em; color: var(--muted); margin-bottom: 0.35rem; }
.goat-round { display: flex; justify-content: space-between; gap: 0.6rem; padding: 0.32rem 0; border-bottom: 1px solid var(--line); font-size: 0.82rem; }
.gr-name { color: var(--muted); }
.goat-result .play-btn { margin: 0; } /* kill the base .play-btn top/bottom margin so it centres level with "Copy results" in the flex row */
.goat-score { margin: 0.7rem 0 0.2rem; font-size: 0.95rem; color: var(--muted); letter-spacing: 0.02em; }
.goat-score b { font-size: 1.5rem; color: var(--accent); font-weight: 800; margin-left: 0.35rem; }
.goat-result .dl-badge { justify-content: center; }
.goat-result .lb { margin-top: 0.9rem; text-align: left; }
.goat-actions { display: flex; flex-wrap: wrap; gap: 0.5rem; justify-content: center; align-items: center; margin-top: 1rem; }
.goat-actions .dl-lb-btn { display: inline-flex; align-items: center; gap: 0.35rem; margin-top: 0; }
.goat-actions .dl-lb-btn .ic { width: 1em; height: 1em; }
@media (max-width: 560px) { .goat-line { grid-template-columns: repeat(3, 1fr); } }
.goat-wrap.goat-board { max-width: 900px; }
.goat-board .offer-head { margin-top: 0.2rem; }
.goat-picker-wrap { margin-top: 0.4rem; }
.goat-seed { font-size: 0.95rem; color: var(--muted); font-weight: 700; margin: 0.2rem 0 0.4rem; }
.goat-result .reveal-dots { cursor: pointer; letter-spacing: 3px; color: var(--muted); }

/* ================================================================
   Small-phone pass (375×667). Everything below was found by playing
   the game at the narrowest size the layout supports; each rule is
   scoped so the wider breakpoints keep the geometry they had.
   ================================================================ */

/* --- Overlay cards must never run off the bottom of a short screen ---
   Neither card capped its height, so on a 667px phone the action that closes them ("Start playing",
   "Got it") sat below the fold with no way to scroll to it - the onboarding, the How-to-play card,
   the full intro and the Team report all dead-ended. Cap them to the overlay and let the card
   scroll inside itself. The onboarding also moves ABOVE the bottom nav (z-index 60): it is a
   blocking first-run flow, and the nav was painting over it. The report/court popups deliberately
   stay UNDER the nav so you can tap straight from one peek to the other. */
.onboarding { z-index: 70; padding: 1rem; }
.ob-card { max-height: 100%; overflow-y: auto; -webkit-overflow-scrolling: touch; }
.cat-modal-card { max-height: 100%; overflow-y: auto; -webkit-overflow-scrolling: touch; }

/* Short screens: trim the onboarding's generous vertical rhythm so it fits without scrolling at all. */
@media (max-height: 700px) {
  .ob-card { padding: 1.2rem 1.4rem 1.1rem; }
  .ob-icon { font-size: 2rem; margin-bottom: 0.3rem; }
  .ob-title { font-size: 1.2rem; }
  .ob-body { font-size: 0.92rem; margin-bottom: 0.9rem; }
  .ob-identity { gap: 0.4rem; margin-bottom: 0.9rem; }
  .ob-dots { margin-bottom: 0.9rem; }
}

/* The two peeks sit above the fixed bottom bars rather than behind them. */
@media (max-width: 820px) {
  .cat-modal { padding-bottom: calc(60px + env(safe-area-inset-bottom, 0px)); }
}

/* --- Spin reels: keep the year on one line ---
   The year box needs more width than the 116px floor ("2018-19" at 1.55rem), and as a shrinkable
   flex item it gave that width up and wrapped to "2018-" / "19". Size both reels to their content. */
.reel-box { flex: 0 0 auto; white-space: nowrap; }
.reel-box.arena { flex: 0 1 auto; white-space: normal; }  /* arena names are long - let that one wrap */
@media (max-width: 560px) {
  .reel-box { min-width: 96px; font-size: 1.6rem; padding: 0.65rem 0.75rem; }
  .reel-box.year { font-size: 1.35rem; }
  .reel-box.arena { min-width: 0; max-width: 100%; font-size: 1.02rem; }
  .reel-wrap { padding: 2rem 0.6rem; }
}

/* --- Daily's control row, aligned with Classic's ---
   `body[data-mode="daily"] .ctl-side .daily-bar { flex: 1 1 auto }` outranks the mobile block's
   `.daily-bar` rule (media queries add no specificity), so on a phone the bar still GREW to fill the
   row - and its own `justify-content: center` then parked the theme chip miles from the divider.
   Shrink to fit and left-align instead, so the theme sits beside Spin where the row is wide enough
   to hold it (and drops to its own centred line where it is not; the divider is gone on mobile, see
   the .ctl-side .daily-bar rule above).
   The label keeps its ellipsis (.dl-type-lbl), so a long theme still can't widen the row.
   Salary is untouched - its € meter keeps the full-width line beneath, which it needs. */
@media (max-width: 820px) {
  body[data-mode="daily"] .ctl-side .daily-bar {
    flex: 0 1 auto; justify-content: flex-start; flex-wrap: nowrap;
    margin: 0; padding-left: 0.5rem;
  }
}

/* --- Leaderboard table fits 375px ---
   rank + an 11rem name + the record + a wrapping stage label summed past the card, so the table
   pushed the whole panel sideways (taking the "Today's result" toggle, pinned to the padding box's
   right edge, off screen with it). Tighter columns bring the min-content width back inside. */
/* --- The unranked preview rows on a phone ---
   Centred flex wrapping left the last row short and the buttons ragged (two, then one stranded
   alone, then two), because each button is as wide as its own longest line. A two-column grid gives
   them one width and one left edge; an odd last button fills its own cell rather than centring
   under the gap. */
@media (max-width: 560px) {
  .gsp-row { display: grid; grid-template-columns: 1fr 1fr; align-items: stretch; }
  .gsp-btn { min-width: 0; }
  .gsp-btn b, .gsp-btn span { overflow-wrap: anywhere; }
}

@media (max-width: 560px) {
  .lb-table { font-size: 0.82rem; }
  .lb-table td { padding: 0.5rem 0.35rem; }
  .lb-rank { width: 1.6rem; }
  .lb-name-cell { text-overflow: ellipsis; }  /* keeps the base 11rem cap - unbounded would let a long name overflow again */
  .dyn-view-toggle { font-size: 0.72rem; padding: 0.3rem 0.6rem; }
  /* A narrow row keeps the SCORE and nothing else on the right: the record, the verdict and the
     champion's cup were three pieces of type fighting for the same 90px. All of it is still one tap
     away on a wider screen, and the sub-line returns above 560px. */
  .lb-stage, .lb-cup { display: none; }
  .lb-val .lb-sub { display: none; }
}

/* --- Club crest: the three-letter abbr doesn't fit the 24px disc on a phone ---
   Both forms are rendered (app.js lbTeamBadge); width picks one. Above 560px the abbr, below it the
   initial - the club is named or implied right beside the disc either way. */
.lb-badge i { font-style: normal; }
.lb-badge .tb-short { display: none; }
@media (max-width: 560px) {
  .lb-badge .tb-long { display: none; }
  .lb-badge .tb-short { display: inline; }
}

/* --- Scope chips can't outgrow the hub card ---
   "Real Madrid" beside its crest ran past the card's right edge. The label is its own span now
   (app.js renderHub) so it can ellipsize instead of pushing the chip wider than the row. */
.hub-scope { max-width: 100%; min-width: 0; }
.hs-lbl { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }

/* --- Versus: a sideways floor, and bars big enough to read -----------------------------------
   Measured at 1280x800: the result card is 855 wide and 515 tall, and the portrait court alone
   wanted 346 of that, so during a simulation its bottom half sat below the fold. Turning the floor a
   quarter turn (DYN_COURT_SVG_WIDE) costs a third of the height for the same information, which lets
   the whole screen stay one centred stack. */
.dyn-court.wide { aspect-ratio: 480 / 300; max-width: 360px; }

/* The create screen has room to spare, so the category bars use it. */
.result-card.vs-make .result-cats-wrap { max-width: 400px; }
.result-card.vs-make .rc-head { font-size: 0.8rem; margin-bottom: 0.7rem; }
.result-card.vs-make .cat-row { grid-template-columns: 96px 1fr; gap: 0.6rem; margin-bottom: 0.55rem; }
.result-card.vs-make .cat-row .lbl { font-size: 0.86rem; }
.result-card.vs-make .cat-track { height: 15px; border-radius: 8px; }
.result-card.vs-make .cat-fill { border-radius: 8px; }
.result-card.vs-make .rc-gate { font-size: 1rem; margin-top: 0.7rem; }

/* Desktop: the card has a fixed height, so hold the stack inside it rather than letting a live
   simulation scroll under the player's hands. Anything the scoreboard gives up goes to the floor. */
@media (min-width: 821px) and (min-height: 600px) {
  .result-card.vs-live { display: flex; flex-direction: column; overflow: hidden; }
  .result-card.vs-live .dyn-scoreboard { padding: 0.8rem; flex: 0 0 auto; }
  .result-card.vs-live .vs-game-label { font-size: 1.3rem; letter-spacing: 0.05em; margin-bottom: 0.4rem; }
  .result-card.vs-live .vs-series { margin-bottom: 0.75rem; }
  .result-card.vs-live .vs-series-n { font-size: 1.4rem; }
  .result-card.vs-live .vs-pip { width: 12px; height: 12px; }
  .result-card.vs-live .vs-venue { font-size: 0.92rem; margin-bottom: 0.85rem; }
  /* flex-shrink must stay OFF here: with it on, the column squeezed the floor to 237px where its
     aspect ratio wanted 262, and preserveAspectRatio="none" quietly stretched the markings to fit.
     So the WIDTH is what gives, and the height follows it. 300px clears every desktop card. */
  .result-card.vs-live .dyn-court.wide {
    flex: 0 0 auto; width: 100%; max-width: 300px; align-self: center; margin: 0.4rem auto 0;
  }
  /* Where the browser can measure the card, spend whatever height is actually left instead of that
     one safe number. 262px is the stack above the floor (labels, series, venue, scoreboard) and 1.6
     is the landscape aspect ratio. A 1280x800 card gets 354 wide, a 1280x730 one 293. */
  @supports (container-type: size) {
    .result-card.vs-live { container-type: size; }
    .result-card.vs-live .dyn-court.wide { max-width: min(360px, calc((100cqh - 262px) * 1.6)); }
  }
}