: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); } .theme-toggle { color: var(--ink); font-size: 1.1rem; } .theme-toggle .sun { display: none; } .theme-toggle .moon { display: inline; } :root[data-theme="dark"] .theme-toggle .sun { display: inline; } :root[data-theme="dark"] .theme-toggle .moon { display: none; } /* 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-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; } /* 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; } 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); } /* 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-bar { max-width: 620px; margin: 0 auto 0.5rem; text-align: center; font-size: 0.82rem; color: var(--muted); background: var(--panel); border: 1px solid var(--line); border-radius: 999px; padding: 0.35rem 1rem; } .daily-bar .dl { font-weight: 800; color: var(--accent); margin-right: 0.2rem; } .daily-bar b { color: var(--ink); } .daily-bar .streak { color: var(--gate); font-weight: 700; } /* Daily and Versus have no re-spins — the shared board is the whole challenge. */ body[data-mode="daily"] .respins, body[data-mode="versus"] .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; } .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); } .hist-cell.today { border-color: var(--accent); box-shadow: inset 0 0 0 1px var(--accent); } .hist-cell.today .hc-d { color: var(--accent); } .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.4rem; justify-content: center; } .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.4rem 0.5rem; border-bottom: 1px solid var(--line); } .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); } .lb-name-cell { font-weight: 600; overflow: hidden; text-overflow: ellipsis; max-width: 9rem; white-space: nowrap; } .lb-rec { text-align: right; font-variant-numeric: tabular-nums; font-weight: 700; } .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); } .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 */ .versus-intro { text-align: center; padding: 1.6rem 1rem; } .vi-icon { font-size: 2.4rem; margin-bottom: 0.3rem; } .versus-intro h2 { font-size: 1.4rem; margin: 0 0 0.5rem; } .versus-intro > p { max-width: 420px; margin: 0 auto 1.4rem; } .vi-actions { display: flex; flex-direction: column; align-items: center; gap: 0.7rem; } .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; } /* 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; } .vs-games { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.35rem; margin: 0.6rem 0 0.2rem; } .vg { font-size: 0.74rem; font-weight: 700; padding: 0.15rem 0.45rem; border-radius: 6px; font-variant-numeric: tabular-nums; } .vg.w { background: rgba(28,158,87,0.15); color: var(--good); } .vg.l { background: rgba(210,59,59,0.13); 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); } .share-pre { font-family: inherit; font-size: 0.9rem; line-height: 1.5; margin: 0 auto 0.7rem; white-space: pre-wrap; 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 */ .control { display: flex; align-items: center; gap: 0.8rem; justify-content: center; margin-bottom: 0.8rem; flex-wrap: wrap; } .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); } /* 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; } /* 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 .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; } /* 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; } .cat-fill.neg { background: var(--bad); } .cat-row.isgate .cat-fill { background: var(--gate); } .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: 1.2rem auto 0; padding-top: 1rem; 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; } .rc-gate { text-align: center; color: var(--gate); font-weight: 700; font-size: 0.92rem; margin-top: 0.7rem; } /* Result-screen sidebar re-order: group arena + coach up top, then the court + bench, and drop the now-empty place hint. (order only applies while the sidebar is a flex column — desktop.) */ body[data-revealed="1"] #venue { order: 1; padding-top: 0.3rem; margin-bottom: 0.35rem; } body[data-revealed="1"] #venue .arena-art { margin-top: 0; } body[data-revealed="1"] #bench { order: 2; margin: 0 0 0.4rem; } body[data-revealed="1"] #sixth-slot { order: 3; margin: 0 0 0.4rem; } body[data-revealed="1"] .court-wrap { order: 4; } body[data-revealed="1"] #place-hint { display: none; } /* Result card */ .result-card { text-align: center; padding: 1.5rem 1rem; } .result-card .record { font-size: 4rem; 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.4rem 0 1rem; font-size: 1.05rem; } .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; } .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; padding-left: 0.4rem; border-left: 1px solid var(--line); } /* 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; } .spot .spot-rm { position: absolute; top: -6px; right: 4px; width: 18px; height: 18px; border-radius: 50%; background: var(--bad); color: #fff; font-size: 0.8rem; line-height: 18px; cursor: pointer; } .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; } /* 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); } .coach-card:hover { border-color: var(--accent); } .coach-card.sel { border-color: var(--accent); box-shadow: inset 0 0 0 1px var(--accent); background: var(--field); } .cc-name { font-weight: 700; font-size: 0.9rem; } .cc-arch { color: var(--muted); font-size: 0.73rem; margin: 0.1rem 0 0.35rem; } .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; } /* 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; } .posbadge { flex: 0 0 auto; width: 20px; height: 20px; border-radius: 5px; background: var(--bg-2); color: var(--muted); font-size: 0.68rem; font-weight: 800; display: inline-flex; align-items: center; justify-content: center; } .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); } /* 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; } .flames { color: var(--accent); letter-spacing: 1px; } .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; } .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; } @media (max-width: 820px) { .layout { grid-template-columns: 1fr; } .sidebar { position: static; } } /* ---- 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; } }