:root {
  --ink: #101311;
  --ink-soft: #222722;
  --paper: #f3f4ee;
  --white: #fbfcf7;
  --line: #d7dacf;
  --muted: #6d746c;
  --lime: #b7ff12;
  --lime-dark: #719d00;
  --red: #e34d3f;
  --amber: #f1b84b;
  --score-live: #5cf2a5;
  --score-final: #79b8ff;
  --score-scheduled: #d4dbe3;
  font-family: "Manrope", system-ui, sans-serif;
  color: var(--ink);
  background: var(--paper);
  font-synthesis: none;
}

* { box-sizing: border-box; }
html { background: var(--paper); scroll-behavior: smooth; }
body { margin: 0; min-width: 320px; min-height: 100vh; background: var(--paper); }
button, select, input { font: inherit; }
button { cursor: pointer; }
.app-shell { min-height: 100vh; }

.topbar {
  height: 74px;
  padding: 0 clamp(18px, 3vw, 48px);
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: var(--ink);
  color: white;
  border-bottom: 1px solid #333a33;
}
.brand { display: flex; align-items: center; gap: 10px; color: white; text-decoration: none; font-weight: 800; font-size: 20px; }
.brand img { width: 48px; height: 34px; object-fit: contain; }
.brand-accent { color: var(--lime); }
.topbar-actions { display: flex; align-items: center; gap: 10px; }
.admin-button { border: 1px solid #414741; color: #e7e9e2; background: transparent; padding: 9px 14px; border-radius: 6px; font-size: 13px; font-weight: 700; }
.admin-button:hover { border-color: var(--lime); color: var(--lime); }
.avatar-button, .icon-button, .help-button { width: 38px; height: 38px; border-radius: 50%; border: 0; background: var(--lime); color: var(--ink); font-weight: 800; }
.help-button { background: transparent; color: #e7e9e2; border: 1px solid #414741; font-size: 16px; }
.help-button:hover { color: var(--lime); border-color: var(--lime); }

.scoreboard-head {
  display: block;
  min-height: 300px;
  padding: 42px clamp(18px, 3vw, 48px) 32px;
  background-color: #020608;
  background-image: linear-gradient(90deg, rgba(2,6,8,.98) 0%, rgba(2,6,8,.9) 42%, rgba(2,6,8,.18) 72%), url("assets/headers/pickclimb-136-grid-ken-duffek.webp");
  background-repeat: no-repeat;
  background-position: center, right center;
  background-size: 100% 100%, auto 100%;
  color: white;
}
.scoreboard-head > div:first-child { max-width: 650px; }
.eyebrow, .insight-kicker { color: var(--lime-dark); text-transform: uppercase; letter-spacing: .13em; font: 500 11px/1.2 "DM Mono", monospace; }
.scoreboard-head .eyebrow { color: var(--lime); display: flex; align-items: center; gap: 8px; }
.live-dot { width: 7px; height: 7px; background: var(--lime); border-radius: 50%; box-shadow: 0 0 0 5px rgba(183,255,18,.12); animation: pulse 2s infinite; }
@keyframes pulse { 50% { box-shadow: 0 0 0 9px rgba(183,255,18,0); } }
h1 { margin: 12px 0 8px; font-size: clamp(34px, 5vw, 68px); line-height: .98; letter-spacing: 0; max-width: 780px; }
.subhead { color: #aeb5ad; margin: 0; max-width: 620px; font-size: 15px; line-height: 1.6; }
.sync-status { width: max-content; min-width: 190px; display: grid; grid-template-columns: auto auto; gap: 3px 18px; margin-top: 22px; padding-top: 12px; border-top: 1px solid #3b413b; }
.sync-label, .sync-status span:last-child { color: #8d958c; font-size: 11px; }
.sync-status span:last-child { grid-column: 1 / -1; }
.sync-status strong { font: 500 24px/1.2 "DM Mono", monospace; color: var(--lime); }

.game-ribbon { overflow: hidden; background: #0b0e0c; border-top: 1px solid #313731; border-bottom: 1px solid #313731; }
.game-ribbon-track { display: flex; overflow-x: auto; scrollbar-width: none; padding-left: clamp(10px, 2vw, 30px); }
.game-ribbon-track::-webkit-scrollbar { display: none; }
.game-chip { appearance: none; min-width: 248px; padding: 13px 16px 14px; color: #f7faf7; background: #171c19; border: 0; border-right: 1px solid #3b433e; border-radius: 0; flex: 0 0 auto; text-align: left; box-shadow: inset 0 3px 0 var(--score-scheduled); transition: background .2s, box-shadow .2s; }
.game-chip.scheduled { background: #20272d; box-shadow: inset 0 3px 0 var(--score-scheduled); }
.game-chip.live { background: #10291f; box-shadow: inset 0 3px 0 var(--score-live); }
.game-chip.final { background: #132437; box-shadow: inset 0 3px 0 var(--score-final); }
.game-chip:hover { background: #29312c; }
.game-chip.selected { outline: 2px solid #ffffff; outline-offset: -3px; }
.game-chip-top { display: flex; justify-content: space-between; gap: 12px; color: #c0c8c1; font: 500 10px "DM Mono", monospace; text-transform: uppercase; }
.game-chip-top span:last-child { color: var(--score-scheduled); font-weight: 700; }
.game-chip.live .game-chip-top span:last-child { color: var(--score-live); }
.game-chip.final .game-chip-top span:last-child { color: var(--score-final); }
.game-score { display: grid; gap: 7px; margin-top: 11px; }
.game-team { display: grid; grid-template-columns: 27px minmax(0, 1fr) auto; align-items: center; gap: 9px; min-height: 28px; color: #e4e9e5; }
.game-team-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 12px; font-weight: 700; }
.game-team strong { color: #ffffff; font: 500 14px "DM Mono", monospace; }
.game-team.leader .game-team-name, .game-team.leader strong { color: var(--score-live); font-weight: 800; }
.team-mark { width: 26px; height: 26px; display: grid; place-items: center; flex: 0 0 auto; }
.team-mark img { width: 100%; height: 100%; object-fit: contain; }
.team-mark-fallback { border: 1px solid #667069; border-radius: 50%; color: #dce2dd; background: #29312c; font: 700 8px "DM Mono", monospace; }

.workspace { display: grid; grid-template-columns: minmax(0, 1fr) 320px; min-height: 650px; }
.leaderboard-pane { padding: 28px clamp(18px, 3vw, 48px) 60px; min-width: 0; }
.insight-pane { padding: 34px 28px; background: #e7e9e0; border-left: 1px solid var(--line); }
.board-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 18px; }
.segmented { display: inline-flex; gap: 4px; background: #e1e4da; padding: 4px; border-radius: 7px; }
.segmented button { border: 0; padding: 9px 13px; color: #626961; background: transparent; border-radius: 5px; font-size: 12px; font-weight: 700; white-space: nowrap; }
.segmented button.active { background: var(--white); color: var(--ink); box-shadow: 0 1px 4px rgba(10,20,10,.08); }
.checkpoint-wrap { display: flex; align-items: center; gap: 10px; }
.checkpoint-wrap label { color: var(--muted); font-size: 11px; }
.checkpoint-wrap select { border: 1px solid var(--line); background: var(--white); border-radius: 5px; padding: 8px 28px 8px 10px; font-size: 12px; color: var(--ink); }
.board-context { display: flex; justify-content: space-between; align-items: end; padding: 34px 0 12px; }
.board-context > div:first-child { display: grid; gap: 6px; }
.board-context span, .table-head { color: var(--muted); font: 500 10px "DM Mono", monospace; letter-spacing: .08em; }
.board-context strong { font-size: 13px; }
.legend { display: flex; gap: 15px; align-items: center; }
.legend span { display: inline-flex; align-items: center; gap: 6px; letter-spacing: 0; }
.legend i { display: inline-block; width: 7px; height: 7px; border-radius: 50%; }
.legend-final { background: var(--ink); }
.legend-live { background: var(--lime-dark); }
.table-head, .leader-row { display: grid; grid-template-columns: 58px minmax(180px, 1fr) 70px 90px 90px; align-items: center; }
.table-head { border-bottom: 1px solid var(--ink); padding: 0 10px 9px; }
.table-head span:nth-child(n+3) { text-align: right; }
.leaderboard { position: relative; }
.leader-row { position: relative; min-height: 58px; padding: 0 10px; border-bottom: 1px solid var(--line); background: var(--paper); transition: background .2s, transform .58s cubic-bezier(.2,.75,.2,1); cursor: pointer; }
.leader-row:hover { background: var(--white); }
.leader-row.top-three { min-height: 64px; }
.leader-row.rank-up { animation: glowUp 1.1s ease; }
@keyframes glowUp { 0%,100% { background: var(--paper); } 35% { background: #e7f9ba; } }
.rank { font: 500 16px "DM Mono", monospace; }
.top-three .rank { font-size: 21px; font-weight: 700; }
.entry { min-width: 0; display: flex; align-items: center; gap: 11px; }
.entry-avatar { width: 31px; height: 31px; flex: 0 0 auto; border-radius: 50%; background: #d9ddd2; display: grid; place-items: center; font-size: 10px; font-weight: 800; }
.top-three .entry-avatar { background: var(--ink); color: var(--lime); }
.entry-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 750; font-size: 13px; }
.move, .points, .possible { text-align: right; font-family: "DM Mono", monospace; }
.move { font-size: 11px; color: var(--muted); }
.move.up { color: var(--lime-dark); }
.move.down { color: var(--red); }
.points { font-size: 18px; font-weight: 500; }
.possible { font-size: 12px; color: var(--muted); }
.points small { font: 500 9px "Manrope", sans-serif; color: var(--muted); margin-left: 3px; }

.insight-pane h2 { margin: 12px 0 4px; font-size: 27px; }
.insight-pane > p { margin: 0 0 32px; color: var(--muted); font-size: 12px; }
.impact-split { border-top: 1px solid #bfc4b9; }
.impact-side { padding: 16px 0; border-bottom: 1px solid #c7cbc1; }
.impact-side-head { display: flex; justify-content: space-between; align-items: center; gap: 12px; font-weight: 800; font-size: 13px; }
.impact-team { display: flex; align-items: center; gap: 9px; min-width: 0; }
.impact-team .team-mark { width: 30px; height: 30px; }
.impact-team .team-mark-fallback { color: var(--ink); background: #d2d7cc; border-color: #aeb5aa; }
.impact-bar { height: 6px; background: #cfd3c8; margin: 10px 0 7px; overflow: hidden; }
.impact-bar span { display: block; height: 100%; background: var(--ink); transform-origin: left; animation: grow .55s ease both; }
.impact-side.active .impact-bar span { background: var(--lime-dark); }
@keyframes grow { from { transform: scaleX(0); } }
.impact-meta { color: var(--muted); font-size: 10px; display: flex; justify-content: space-between; }
.impact-note { margin-top: 34px; }
.impact-note span { color: var(--muted); font-size: 10px; text-transform: uppercase; letter-spacing: .09em; }
.impact-note strong { display: block; margin-top: 7px; font-size: 30px; }
.impact-note p { color: var(--muted); font-size: 12px; line-height: 1.6; }
.text-button { display: flex; width: 100%; align-items: center; justify-content: space-between; margin-top: 28px; padding: 13px 0; border: 0; border-top: 1px solid #bfc4b9; border-bottom: 1px solid #bfc4b9; background: transparent; font-size: 12px; font-weight: 800; }

.drawer-backdrop { position: fixed; inset: 0; z-index: 30; background: rgba(16,19,17,.48); backdrop-filter: blur(3px); }
.participant-drawer { position: fixed; top: 0; right: 0; z-index: 40; width: min(480px, 100%); height: 100dvh; overflow-y: auto; background: var(--white); padding: 28px; transform: translateX(105%); transition: transform .35s cubic-bezier(.2,.75,.2,1); box-shadow: -20px 0 50px rgba(0,0,0,.14); }
.participant-drawer.open { transform: translateX(0); }
.drawer-close { width: 36px; height: 36px; border: 1px solid var(--line); background: transparent; border-radius: 50%; font-size: 22px; line-height: 1; display: grid; place-items: center; }
.participant-drawer > .drawer-close { margin-left: auto; }
.participant-hero { padding: 18px 0 28px; }
.participant-hero h2 { font-size: 30px; margin: 7px 0; }
.bye-credit { color: var(--muted); font-size: 11px; margin: 8px 0 0; }
.participant-score { display: flex; gap: 30px; margin-top: 22px; }
.participant-score div { display: grid; gap: 4px; }
.participant-score span { font-size: 10px; color: var(--muted); text-transform: uppercase; }
.participant-score strong { font: 500 24px "DM Mono", monospace; }
.pick-list { border-top: 1px solid var(--ink); }
.pick-row { display: grid; grid-template-columns: 1fr auto auto; gap: 12px; padding: 14px 0; border-bottom: 1px solid var(--line); align-items: center; }
.pick-game { display: grid; gap: 3px; }
.pick-game strong { font-size: 12px; }
.pick-game span { color: var(--muted); font-size: 10px; }
.pick-confidence { font: 500 13px "DM Mono", monospace; }
.pick-result { min-width: 58px; text-align: right; font-size: 10px; font-weight: 800; text-transform: uppercase; }
.pick-result.won { color: var(--lime-dark); }
.pick-result.lost { color: var(--red); }
.pick-result.live { color: #987000; }

.admin-dialog { width: min(620px, calc(100% - 24px)); border: 0; border-radius: 7px; padding: 0; background: var(--white); color: var(--ink); box-shadow: 0 30px 80px rgba(0,0,0,.25); }
.admin-dialog::backdrop, .help-dialog::backdrop { background: rgba(16,19,17,.62); backdrop-filter: blur(4px); }
.admin-dialog form { padding: 28px; }
.dialog-head { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 20px; }
.dialog-head h2 { margin: 6px 0; font-size: 27px; }
.admin-section { display: grid; grid-template-columns: 1fr auto; gap: 24px; align-items: center; padding: 22px 0; border-top: 1px solid var(--line); }
.admin-section strong { font-size: 13px; }
.admin-section p { color: var(--muted); font-size: 11px; line-height: 1.5; max-width: 370px; margin: 5px 0 0; }
.upload-button { position: relative; overflow: hidden; display: inline-block; background: var(--ink); color: white; padding: 10px 13px; border-radius: 5px; font-size: 11px; font-weight: 800; cursor: pointer; }
.upload-button.secondary { color: var(--ink); background: #e5e8df; }
.upload-button input { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
.admin-password { width: 210px; border: 1px solid var(--line); background: white; border-radius: 5px; padding: 10px 12px; font-size: 11px; }
.override-controls { width: 210px; display: grid; gap: 7px; }
.override-controls select, .override-controls input { width: 100%; min-width: 0; border: 1px solid var(--line); background: white; border-radius: 5px; padding: 8px; font-size: 10px; }
.override-controls > div { display: grid; grid-template-columns: 1fr 1fr; gap: 7px; }
.override-controls button { border: 0; background: var(--ink); color: white; border-radius: 5px; padding: 9px; font-size: 10px; font-weight: 800; }
.force-sync { width: 100%; margin-top: 12px; border: 1px solid var(--ink); background: transparent; padding: 11px; border-radius: 5px; font-size: 11px; font-weight: 800; }
.force-sync:hover { background: var(--ink); color: white; }
.validation-panel { display: flex; gap: 12px; align-items: center; padding: 15px; background: #e8f6c3; margin-top: 8px; }
.validation-icon { width: 27px; height: 27px; border-radius: 50%; background: var(--lime-dark); color: white; display: grid; place-items: center; }
.validation-panel strong { font-size: 12px; }
.validation-panel p { margin: 3px 0 0; color: #5b6751; font-size: 10px; }
.validation-panel.error { background: #f8ded9; }
.validation-panel.error .validation-icon { background: var(--red); }
.help-dialog { width: min(720px, calc(100% - 24px)); max-height: min(820px, calc(100dvh - 32px)); overflow-y: auto; border: 0; border-radius: 7px; padding: 0; background: var(--white); color: var(--ink); box-shadow: 0 30px 80px rgba(0,0,0,.25); }
.help-dialog form { padding: 28px; }
.help-head { margin-bottom: 18px; }
.help-head h2 { margin: 6px 0; font-size: 27px; }
.help-head p { margin: 0; color: var(--muted); font-size: 12px; }
.help-callout { padding: 18px; background: #e8f6c3; border-left: 4px solid var(--lime-dark); }
.help-callout strong { font-size: 15px; }
.help-callout p { margin: 7px 0 0; color: #4f5b45; font-size: 12px; line-height: 1.6; }
.faq-list { margin-top: 18px; border-top: 1px solid var(--line); }
.faq-list details { border-bottom: 1px solid var(--line); }
.faq-list summary { padding: 16px 30px 16px 2px; font-size: 13px; font-weight: 800; cursor: pointer; }
.faq-list details p { margin: -3px 0 17px; color: var(--muted); font-size: 12px; line-height: 1.65; }
.faq-list details b { color: var(--ink); }
.toast { position: fixed; z-index: 100; left: 50%; bottom: 28px; transform: translate(-50%, 30px); opacity: 0; pointer-events: none; background: var(--ink); color: white; padding: 11px 15px; border-radius: 5px; font-size: 11px; transition: .25s; }
.toast.show { transform: translate(-50%, 0); opacity: 1; }

@media (max-width: 900px) {
  .workspace { grid-template-columns: 1fr; }
  .insight-pane { border-left: 0; border-top: 1px solid var(--line); }
  .impact-split { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
  .scoreboard-head { align-items: start; }
}
@media (max-width: 680px) {
  .topbar { height: 62px; }
  .admin-button { padding: 8px 9px; font-size: 11px; }
  .scoreboard-head { min-height: 350px; padding-top: 28px; background-image: linear-gradient(90deg, rgba(2,6,8,.96), rgba(2,6,8,.76)), url("assets/headers/pickclimb-136-grid-ken-duffek.webp"); background-position: center, 72% center; }
  .sync-status { grid-template-columns: auto auto; margin-top: 25px; padding: 13px 0 0; border-left: 0; border-top: 1px solid #373d37; }
  .sync-status span:last-child { grid-column: 1 / -1; }
  .board-toolbar { align-items: stretch; flex-direction: column; }
  .segmented { width: 100%; overflow-x: auto; }
  .segmented button { flex: 1; }
  .checkpoint-wrap { justify-content: space-between; }
  .legend { display: none; }
  .table-head, .leader-row { grid-template-columns: 43px minmax(125px, 1fr) 46px 62px; }
  .table-head span:last-child, .leader-row .possible { display: none; }
  .entry-avatar { display: none; }
  .points { font-size: 16px; }
  .impact-split { display: block; }
  .admin-section { grid-template-columns: 1fr; gap: 14px; }
  .upload-button { text-align: center; }
  .admin-password { width: 100%; }
  .override-controls { width: 100%; }
}
@media (max-width: 480px) {
  .topbar-actions { gap: 6px; }
  .avatar-button { display: none; }
  .help-dialog form { padding: 20px; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
}