:root {
  --green: #1ed760;
  --green-dark: #1db954;
  --green-hover: #35e878;
  --black: #121212;
  --panel: #181818;
  --panel-light: #242424;
  --muted: #b3b3b3;
  --line: #353535;
  --white: #fff;
  --danger: #ff6363;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  color: var(--white);
  background: var(--black);
}
* { box-sizing: border-box; }
body { margin: 0; min-width: 320px; background: var(--black); }
button, input, textarea { font: inherit; }
button { cursor: pointer; }
.app-shell { min-height: 100vh; display: grid; grid-template-columns: 240px minmax(0, 1fr); }
.sidebar { position: sticky; top: 0; height: 100vh; background: #050505; padding: 25px 12px 19px; display: flex; flex-direction: column; }
.brand { color: #fff; text-decoration: none; display: flex; align-items: center; gap: 9px; font-size: 21px; font-weight: 800; letter-spacing: -.8px; margin: 0 10px 31px; }
.brand span span { color: var(--green); }
.brand-mark { display: grid; place-items: center; width: 31px; height: 31px; border-radius: 50%; background: var(--green); color: #0b0b0b; font-size: 18px; font-style: italic; }
.main-nav { display: grid; gap: 4px; }
.nav-link { border: 0; padding: 11px 12px; color: var(--muted); background: transparent; border-radius: 5px; font-weight: 700; font-size: 14px; text-align: left; transition: .16s ease; }
.nav-link span { display: inline-grid; width: 24px; place-items: center; color: inherit; font-size: 19px; margin-right: 8px; vertical-align: -2px; }
.nav-link:hover, .nav-link.active { color: var(--white); background: #282828; }
.nav-link.active span { color: var(--green); }
.sidebar-bottom { margin-top: auto; }.sidebar-library-button { width:100%; border:1px solid #444; border-radius:6px; background:#181818; color:#d7d7d7; padding:10px 11px; text-align:left; font-size:12px; font-weight:800; }.sidebar-library-button span { display:inline-block; width:20px; color:var(--green); font-size:16px; vertical-align:-1px; }.sidebar-library-button:hover { border-color:var(--green); color:#fff; }.sidebar-footer { border-top: 1px solid #292929; padding: 18px 11px 0; margin-top:14px; color: #777; font-size: 11px; line-height: 1.5; }
.sidebar-footer p { font-weight: 800; font-size: 10px; letter-spacing: 1px; color: #8e8e8e; margin: 0 0 4px; }
.main-content { min-width: 0; background: linear-gradient(180deg, #2a2a2a 0, #151515 390px, var(--black) 780px); min-height: 100vh; padding-bottom: 48px; }
body.title-mode .main-content { background: linear-gradient(180deg, #42171e 0, #1c1113 390px, var(--black) 780px); }
.topbar { display: flex; justify-content: space-between; align-items: center; height: 70px; padding: 0 clamp(20px, 4vw, 58px); }
.topbar-controls { display: flex; gap: 9px; }.circle-button { width: 32px; height: 32px; border: 0; border-radius: 50%; background: rgba(0,0,0,.72); color: #fff; font-size: 26px; line-height: 1; }.circle-button:disabled { opacity: .35; cursor: default; }
.page { display: none; padding: 24px clamp(20px, 4vw, 58px) 10px; max-width: 1520px; }.page.active-page { display: block; }
.hero-card { min-height: 256px; border-radius: 10px; padding: clamp(25px, 4vw, 56px); display: flex; align-items: end; background: radial-gradient(circle at 78% 20%, #4d8b65 0, transparent 28%), linear-gradient(128deg, #0c4930, #17241e 58%, #1f1f1f); overflow: hidden; position: relative; }
.hero-card::after { content: "♫"; position: absolute; right: 8%; top: -23px; font-size: 260px; line-height: 1; font-weight: 800; color: rgba(255,255,255,.055); transform: rotate(-16deg); }
.hero-card > * { position: relative; z-index: 1; }.eyebrow { color: var(--green); font-weight: 800; letter-spacing: 1.4px; font-size: 11px; margin: 0 0 9px; }.hero-card h1, .page-heading h1, .leaderboard-hero h1 { margin: 0; font-size: clamp(32px, 5vw, 58px); letter-spacing: -2.5px; line-height: .97; }.hero-card p.hero-description { max-width: 570px; margin: 15px 0 0; color: #dfdfdf; font-size: 16px; line-height: 1.5; }.hero-library-button { margin-top:18px; border:1px solid rgba(255,255,255,.55); border-radius:999px; color:#fff; background:rgba(0,0,0,.16); padding:9px 14px; font-size:12px; font-weight:800; }.hero-library-button:hover { border-color:var(--green); color:var(--green); }.page-heading { display: flex; gap: 18px; justify-content: space-between; align-items: end; margin-bottom: 32px; }.page-heading h1 { font-size: 42px; }.page-heading p:not(.eyebrow), .leaderboard-hero > p:last-child { margin: 10px 0 0; color: var(--muted); }.primary-button, .secondary-button, .danger-button, .text-button { border: 0; font-size: 14px; font-weight: 800; }.primary-button { background: var(--green); color: #06140a; padding: 12px 22px; border-radius: 999px; transition: transform .15s, background .15s; }.primary-button:hover { transform: scale(1.035); background: var(--green-hover); }.topbar-new { padding: 9px 17px; font-size: 13px; }.secondary-button { color: #fff; background: transparent; padding: 12px 19px; border-radius: 999px; border: 1px solid #777; }.secondary-button:hover { border-color: #fff; }.danger-button { color: var(--danger); background: transparent; border: 1px solid #7f3434; padding: 9px 15px; border-radius: 999px; }.text-button { color: var(--green); background: transparent; padding: 2px 0; }.section-heading { display: flex; align-items: center; justify-content: space-between; margin: 37px 0 17px; }.section-heading h2 { margin: 0; font-size: 24px; letter-spacing: -.7px; }.subtle-link { color: var(--muted); background: transparent; border: 0; font-size: 13px; font-weight: 700; }.subtle-link:hover { color: var(--green); }
.current-game { margin-top: 32px; }.game-status { display: inline-flex; align-items: center; gap: 7px; color: var(--green); font-size: 12px; font-weight: 800; letter-spacing: .8px; }.game-status::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--green); box-shadow: 0 0 0 4px rgba(30,215,96,.13); }.game-title-row { display: flex; gap: 18px; flex-wrap: wrap; justify-content: space-between; align-items: center; margin: 7px 0 20px; }.game-title-row h2 { font-size: 31px; margin: 0; letter-spacing: -1px; }.game-meta { color: var(--muted); font-size: 13px; margin: 5px 0 0; }.scoreboard { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px; }.score-card { background: var(--panel); padding: 19px; border-radius: 8px; position: relative; overflow: hidden; }.score-card.leader { background: linear-gradient(125deg, #283c30, #1c2720); }.score-card.leader::before { content: "LEAD"; position: absolute; right: 11px; top: 10px; color: var(--green); font-size: 9px; font-weight: 900; letter-spacing: .9px; }.player-name { font-weight: 800; font-size: 16px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }.score-number { margin-top: 13px; font-size: 31px; font-weight: 800; line-height: 1; letter-spacing: -1px; }.score-label { color: var(--muted); font-size: 12px; margin-top: 4px; }.rounds-panel { background: var(--panel); border-radius: 8px; overflow: hidden; }.round-row { display: grid; grid-template-columns: 67px minmax(120px, 1.3fr) minmax(160px, 2fr) auto; gap: 16px; align-items: center; padding: 15px 18px; border-bottom: 1px solid var(--line); }.round-row:last-child { border: 0; }.round-number { font-size: 12px; color: var(--muted); font-weight: 800; }.actual-band { font-weight: 800; }.predictions-summary { color: var(--muted); font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }.hit-count { font-size: 12px; color: var(--green); font-weight: 800; white-space: nowrap; }.empty-state { border: 1px dashed #454545; border-radius: 9px; padding: 37px 25px; color: var(--muted); text-align: center; }.empty-state h3 { color: #fff; margin: 0 0 7px; font-size: 20px; }.empty-state p { margin: 0 auto 19px; max-width: 420px; line-height: 1.5; }.empty-illustration { color: var(--green); font-size: 42px; line-height: 1; margin-bottom: 10px; }
body.title-mode .game-status::before { box-shadow: 0 0 0 4px rgba(229,35,60,.18); } body.title-mode .score-card.leader { background: linear-gradient(125deg, #57212a, #2e181b); } body.title-mode .pending-round { background: linear-gradient(110deg, #582029, #2d181b); border-color: #9b3b49; } body.title-mode .pending-round p { color: #f5dadd; }
.game-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 16px; }.game-card { background: var(--panel); border-radius: 8px; padding: 20px; min-height: 192px; display: flex; flex-direction: column; transition: background .16s, transform .16s; }.game-card:hover { background: #252525; transform: translateY(-2px); }.game-card-top { display: flex; justify-content: space-between; align-items: start; gap: 14px; }.game-card .status-badge { font-size: 10px; letter-spacing: .7px; font-weight: 900; color: var(--green); }.game-card .status-badge.finished { color: #d7d7d7; }.game-card h3 { margin: 14px 0 5px; font-size: 19px; letter-spacing: -.4px; }.game-card p { color: var(--muted); font-size: 13px; margin: 0; }.game-card-footer { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-top: auto; padding-top: 20px; }.card-link { color: #fff; background: transparent; border: 0; font-size: 13px; font-weight: 800; padding: 0; }.card-link:hover { color: var(--green); }.small-delete { color: #9a9a9a; background: transparent; border: 0; font-size: 18px; padding: 0 2px; }.small-delete:hover { color: var(--danger); }
.leaderboard-hero { padding: 27px 0 36px; }.leaderboard-hero h1 { font-size: 52px; }.podium { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); align-items: end; max-width: 760px; gap: 13px; margin: 10px auto 44px; }.podium-place { text-align: center; padding: 18px 12px; background: var(--panel); border-radius: 8px 8px 0 0; min-height: 142px; display: flex; flex-direction: column; justify-content: end; }.podium-place.first { min-height: 198px; background: linear-gradient(145deg, #315b3d, #1b211c); }.podium-medal { color: var(--green); font-size: 26px; font-weight: 900; margin-bottom: 10px; }.podium-name { font-size: 17px; font-weight: 900; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }.podium-wins { color: var(--muted); font-size: 12px; margin-top: 5px; }.table-wrap { overflow-x: auto; }.leaderboard-table { width: 100%; border-collapse: collapse; min-width: 500px; }.leaderboard-table th { color: var(--muted); font-size: 11px; letter-spacing: .9px; text-align: left; padding: 10px 14px; border-bottom: 1px solid var(--line); }.leaderboard-table td { padding: 15px 14px; border-bottom: 1px solid #292929; font-size: 14px; }.leaderboard-table tr:first-child td { color: var(--green); font-weight: 800; }.rank-cell { color: var(--muted); width: 52px; }.winner-cell { font-weight: 800; }
.history-list { display: grid; gap: 13px; }.history-card { padding: 21px; background: var(--panel); border-radius: 9px; display: grid; grid-template-columns: minmax(0,1fr) auto; gap: 16px; align-items: center; }.history-card h3 { margin: 0 0 8px; font-size: 19px; }.history-info { color: var(--muted); font-size: 13px; display: flex; gap: 12px; flex-wrap: wrap; }.winner-tag { color: var(--green); font-size: 13px; font-weight: 800; }.history-actions { display: flex; gap: 8px; align-items: center; }.compact-button { padding: 8px 13px; background: transparent; border: 1px solid #666; color: #fff; border-radius: 999px; font-size: 12px; font-weight: 800; }.compact-button:hover { border-color: #fff; }.notes-preview { margin: 11px 0 0; color: #d1d1d1; font-size: 13px; line-height: 1.45; }
.modal { width: min(540px, calc(100vw - 28px)); color: #fff; background: #282828; border: 1px solid #555; border-radius: 12px; padding: 0; box-shadow: 0 25px 90px rgba(0,0,0,.7); }.modal::backdrop { background: rgba(0,0,0,.72); backdrop-filter: blur(3px); }.modal form { padding: 26px; }.modal-wide { width: min(770px, calc(100vw - 28px)); }.modal-heading { display: flex; align-items: start; justify-content: space-between; gap: 15px; margin-bottom: 23px; }.modal-heading h2 { margin: 0; letter-spacing: -.8px; font-size: 27px; }.icon-button { border: 0; border-radius: 50%; color: #fff; background: #3b3b3b; font-size: 23px; line-height: 1; width: 31px; height: 31px; }.modal label { display: grid; gap: 8px; color: #efefef; font-size: 13px; font-weight: 800; margin: 0 0 18px; }.optional { color: var(--muted); font-weight: 500; }.modal input, .modal textarea { width: 100%; border: 1px solid #5e5e5e; color: #fff; background: #151515; border-radius: 5px; padding: 11px 12px; outline: 0; font-weight: 500; }.modal textarea { resize: vertical; }.modal input:focus, .modal textarea:focus { border-color: #fff; box-shadow: 0 0 0 2px var(--green); }.field-header { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 8px; }.field-header label { margin: 0; }.player-fields { display: grid; gap: 8px; margin-bottom: 18px; }.player-field, .prediction-field { display: grid; gap: 9px; align-items: center; }.player-field { grid-template-columns: 1fr 29px; }.remove-field { height: 32px; width: 29px; border: 0; background: transparent; color: #aaa; font-size: 23px; }.remove-field:hover { color: var(--danger); }.modal-actions { display: flex; justify-content: end; gap: 10px; margin-top: 25px; }.help-text { color: var(--muted); font-size: 12px; line-height: 1.45; margin: -8px 0 18px; }.prediction-fields { display: grid; gap: 12px; }.prediction-field { grid-template-columns: 135px 1fr; }.prediction-field label { margin: 0; padding: 11px 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.detail-summary { display: grid; grid-template-columns: repeat(3,1fr); background: #1a1a1a; border-radius: 7px; margin-bottom: 24px; }.detail-stat { padding: 14px 15px; border-right: 1px solid #3b3b3b; }.detail-stat:last-child { border: 0; }.detail-stat b { display: block; font-size: 19px; }.detail-stat span { color: var(--muted); font-size: 11px; }.detail-notes label { margin-top: 8px; }.detail-notes textarea { min-height: 82px; }.detail-players { margin-top: 25px; }.detail-players .section-heading { margin: 0 0 10px; }.detail-player-list { display: flex; flex-wrap: wrap; gap: 8px; }.detail-player-chip { display: inline-flex; align-items: center; gap: 7px; border-radius: 999px; padding: 6px 8px 6px 12px; background: #191919; color: #eee; font-size: 13px; font-weight: 800; }.detail-player-chip button { width: 19px; height: 19px; border: 0; border-radius: 50%; color: #aaa; background: #343434; line-height: 1; font-weight: 700; }.detail-player-chip button:hover { background: #6e2929; color: #fff; }.detail-round-list { margin-top: 20px; border-top: 1px solid var(--line); }.detail-round { padding: 15px 0; border-bottom: 1px solid var(--line); }.detail-round-top { display: flex; align-items: center; justify-content: space-between; gap: 14px; }.detail-round h4 { margin: 0; font-size: 15px; }.detail-round .round-band { color: var(--green); font-size: 14px; font-weight: 800; }.detail-tips { color: var(--muted); font-size: 13px; line-height: 1.6; margin-top: 8px; }.detail-actions { display: flex; justify-content: space-between; gap: 12px; align-items: center; margin-top: 23px; }.toast { position: fixed; z-index: 5; left: 50%; bottom: 26px; transform: translate(-50%, 80px); color: #0a1710; background: var(--green); font-size: 13px; font-weight: 800; padding: 11px 18px; border-radius: 999px; opacity: 0; transition: .22s ease; pointer-events: none; }.toast.visible { opacity: 1; transform: translate(-50%, 0); }
.round-timer { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 14px; margin: 0 0 20px; background: #171717; border: 1px solid #404040; border-radius: 7px; }.round-timer.timer-expired { border-color: var(--danger); }.timer-caption { display: block; color: var(--muted); font-size: 10px; font-weight: 900; letter-spacing: .8px; }.round-timer strong { display: block; margin-top: 2px; font-variant-numeric: tabular-nums; font-size: 27px; letter-spacing: .5px; line-height: 1; }.timer-controls { display: flex; align-items: center; gap: 7px; }.timer-controls select { width: auto; color: #fff; background: #303030; border: 1px solid #555; border-radius: 999px; padding: 7px 9px; font-size: 12px; font-weight: 800; }.timer-controls .compact-button { padding: 7px 12px; }.timer-reset { width: 29px; height: 29px; border: 0; border-radius: 50%; color: #fff; background: #383838; font-size: 18px; line-height: 1; }.timer-reset:hover { background: #515151; }.locked-predictions { display: grid; gap: 7px; margin: 0 0 20px; }.locked-prediction { display: flex; justify-content: space-between; gap: 14px; padding: 10px 12px; background: #191919; border-radius: 5px; font-size: 13px; }.locked-prediction span { color: var(--muted); }.locked-prediction b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }.pending-round { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 15px 18px; margin: 20px 0; background: linear-gradient(110deg, #244c33, #1b281f); border: 1px solid #3e7852; border-radius: 8px; }.pending-round p { margin: 2px 0 0; color: #d9e6dd; font-size: 13px; }.pending-round .eyebrow { margin-bottom: 4px; }.actual-band-field { margin-top: 20px !important; }.band-add-actions { margin-top:-4px; }.library-dialog-content { padding:26px; }.library-sections { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:18px; }.library-section { min-width:0; }.library-section-heading { display:flex; align-items:baseline; justify-content:space-between; gap:10px; margin-bottom:13px; }.library-section-heading h3 { margin:0; font-size:17px; }.library-section-heading span { color:var(--muted); font-size:12px; font-weight:700; }.library-section .library-add-form { padding:0; }.library-section label { margin-bottom:13px; }.library-item-list { display:grid; gap:6px; max-height:300px; overflow:auto; padding:8px; border-radius:7px; background:#1a1a1a; }.library-item { display:flex; align-items:center; gap:7px; min-width:0; padding:8px 8px 8px 10px; border-radius:5px; background:#303030; color:#fff; font-size:12px; font-weight:800; }.library-item b { flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }.library-item button { width:25px; height:25px; flex:0 0 auto; border:0; border-radius:4px; background:#484848; color:#eee; font-size:14px; line-height:1; }.library-item button:hover { background:#676767; color:#fff; }.library-item button.library-delete:hover { background:#7e3030; }.band-library-empty { margin:5px; color:var(--muted); font-size:13px; line-height:1.5; }
@media (max-width: 740px) { .app-shell { grid-template-columns: 1fr; }.sidebar { position: static; height: auto; padding: 13px 14px; display: block; }.brand { margin: 0 0 13px; }.main-nav { grid-template-columns: repeat(4, 1fr); gap: 5px; }.nav-link { padding: 8px 3px; text-align: center; font-size: 10px; }.nav-link span { display: block; margin: 0 auto 3px; font-size: 17px; }.sidebar-bottom { margin-top:9px; }.sidebar-library-button { text-align:center; padding:8px; }.sidebar-footer { display: none; }.topbar { height: 58px; }.topbar-controls { display: none; }.page { padding-top: 14px; }.hero-card { min-height: 215px; }.page-heading { align-items: start; flex-direction: column; margin-bottom: 23px; }.round-row { grid-template-columns: 48px 1fr auto; gap: 10px; padding: 13px; }.predictions-summary { display: none; }.podium { gap: 7px; }.podium-place { min-height: 118px; padding: 14px 6px; }.podium-place.first { min-height: 155px; }.podium-name { font-size: 13px; }.history-card { grid-template-columns: 1fr; }.history-actions { justify-content: space-between; }.prediction-field { grid-template-columns: 108px 1fr; }.modal form { padding: 20px; }.library-sections { grid-template-columns:1fr; }.detail-summary { grid-template-columns: 1fr; }.detail-stat { border-right: 0; border-bottom: 1px solid #3b3b3b; }.detail-actions { align-items: start; flex-direction: column-reverse; }.topbar-new { padding: 8px 13px; } }