/* Arena palette. System preference is the default; explicit choices win. */
:root { color-scheme:light; --surface:#ffffff; --surface-raised:#ece8f2; --ice:#f5f3f8; --ink:#21182d; --muted:#575261; --line:#d4cedc; --accent:#6743ba; --field:#fff; --gold:#f3c75f; --focus:#805bd5; --pick-fill:#402364; --pick-hover:#4b2b72; --pick-ink:#fff; --pick-edge:#bea1ff; --pick-badge:#fff; --pick-badge-ink:#402364; }
@media (prefers-color-scheme:dark) { :root:not([data-theme=light]) { color-scheme:dark; --ice:#21182d; --ink:#fbf9ff; --surface:#2b2039; --surface-raised:#392c49; --muted:#c7bfce; --line:#51425f; --accent:#bea1ff; --field:#241b31; --focus:#f3c75f; --pick-fill:#e4d7ff; --pick-hover:#efe6ff; --pick-ink:#21182d; --pick-edge:#c8aaff; --pick-badge:#402364; --pick-badge-ink:#fff; } }
:root[data-theme=dark] { color-scheme:dark; --ice:#21182d; --ink:#fbf9ff; --surface:#2b2039; --surface-raised:#392c49; --muted:#c7bfce; --line:#51425f; --accent:#bea1ff; --field:#241b31; --focus:#f3c75f; --pick-fill:#e4d7ff; --pick-hover:#efe6ff; --pick-ink:#21182d; --pick-edge:#c8aaff; --pick-badge:#402364; --pick-badge-ink:#fff; }
body { background:var(--ice); color:var(--ink); font-size:17px; }
button:focus-visible, a:focus-visible, summary:focus-visible, input:focus-visible, select:focus-visible { outline-color:var(--focus); }
.site-header { gap:24px; padding-block:22px; border-color:var(--line); }
.site-header nav { margin-left:auto; gap:24px; }
.site-header nav>a { font-size:15px; }
.wordmark svg, .wordmark-dot { color:var(--accent); }
.nav-cta, .button, .auth-card button, .pledge-form .button { background:var(--gold); color:#21182d; font-weight:700; }
.button:hover, .nav-cta:hover, .auth-card button:hover { background:#ffda81; color:#21182d; }
.hero.arena-hero { grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:64px; padding-block:58px 72px; align-items:start; }
.hero-copy { padding-top:24px; }
.launch-label { color:var(--ink); font-size:15px; margin-bottom:24px; }
.launch-label>span { background:#fb655c; box-shadow:0 0 0 4px #fb655c20; }
.hero h1 { font-size:clamp(66px,7.1vw,102px); line-height:.94; letter-spacing:-.025em; }
.hero-description { font-size:19px; line-height:1.65; color:var(--muted); margin-block:26px; }
.hero-play-link { display:inline-flex; gap:34px; font-size:18px; font-weight:700; text-underline-offset:7px; }
.hero-play-link span { color:var(--accent); }
.slate-demo { background:var(--surface); border:1px solid var(--line); border-top:4px solid var(--gold); border-radius:12px; padding:24px; box-shadow:0 20px 65px #0d071b22; scroll-margin-top:20px; }
.demo-top h2 { font:800 38px/1 var(--display); margin-top:6px; }
.sample-label { color:var(--muted); font-size:13px; }
.demo-count { color:var(--ink); background:var(--surface-raised); font-size:13px; padding:7px 10px; }
.demo-instruction { font-size:15px; color:var(--muted); margin:14px 0; }
.matchup { gap:10px; padding:11px 0; border-color:var(--line); }
.team-choices { grid-template-columns:minmax(0,1fr) 18px minmax(0,1fr); gap:6px; }
.team-choice { background:var(--surface-raised); color:var(--ink); min-height:106px; padding:9px 6px; gap:1px; border:2px solid transparent; border-radius:6px; }
.team-choice:hover { background:var(--surface-raised); border-color:var(--accent); }
.team-city { font-size:14px; }
.versus { color:var(--muted); font-size:12px; }
.crown-toggle { flex-shrink:0; width:54px; height:90px; border:1px dashed var(--line); color:var(--muted); background:transparent; gap:5px; }
.crown-toggle span { font:800 29px/1 var(--display); }
.crown-toggle svg { width:26px; }
.crown-toggle[aria-pressed=true] { color:#21182d; background:var(--gold); border:1px solid var(--gold); box-shadow:0 0 20px #f3c75f40; animation:crown-land .28s ease-out; }
@keyframes crown-land { 0% { transform:translateY(-5px) rotate(-6deg) scale(1.04); } 65% { transform:translateY(1px) rotate(2deg); } 100% { transform:translateY(0) rotate(0) scale(1); } }
.slate-signup { margin-top:18px; }
.slate-signup label { display:block; font-weight:700; font-size:16px; margin-bottom:10px; }
.slate-signup>div { display:flex; gap:8px; }
.slate-signup input { min-width:0; width:100%; padding:12px; border-radius:5px; border:1px solid var(--line); color:var(--ink); background:var(--field); font-size:16px; }
.slate-signup .button { flex-shrink:0; padding:12px 14px; font-size:14px; }
.demo-disclaimer { color:var(--muted); font-size:12px; margin-top:12px; line-height:1.5; }
.how-section { display:block; padding-block:80px; }
.how-section .section-copy { display:flex; align-items:start; justify-content:space-between; }
.section-kicker { color:var(--accent); font-size:15px; }
.steps { grid-template-columns:repeat(3,1fr); gap:32px; margin-top:42px; }
.steps li { gap:20px; border-top:1px solid var(--line); padding-top:24px; }
.step-number { font:800 54px/1 var(--display); width:auto; height:auto; border:0; color:var(--accent); }
.steps h3 { font-size:21px; margin-bottom:10px; }
.steps p { font-size:16px; line-height:1.6; }
.pool-section { background:#18101f; color:#fff; }
.pool-copy h2 { font-size:clamp(48px,5vw,72px); }
.pool-copy>p { color:#d6cbdf; font-size:17px; }
.pool-copy .section-kicker { color:#c5a4ff; }
.pool-board { background:#30223e; border-color:#574166; }
.pool-board .sample-label, .pool-code { color:#d6c8e1; font-size:13px; }
.reigning { box-shadow:0 0 36px #f3c75f18; }
.reigning strong { font-size:29px; }
.reigning p, .reigning>div>span, .pool-row>span:last-child { font-size:14px; }
.pool-row strong { font-size:16px; }
.pool-note { color:#f3c75f; font-size:16px; }
.faq-section { display:block; max-width:860px; padding-block:80px; }
.faq-section>div:first-child { margin-bottom:32px; }
.faq-section>div:first-child p { color:var(--muted); font-size:17px; }
.faq-list details { border-color:var(--line); }
.faq-list summary { font-size:19px; color:var(--ink); }
.faq-list p { font-size:16px; color:var(--muted); line-height:1.7; }
.signup-form .button { font-size:17px; }
.site-footer { border-color:var(--line); padding-block:44px; }
.site-footer p, .footer-links, .site-footer .fine-print { color:var(--muted); font-size:14px; }
.legal-nav { color:var(--muted); font-size:14px; }
.legal-contact { background:var(--surface-raised); color:var(--ink); }
.legal-notice { background:var(--surface-raised); color:var(--ink); border-left-color:var(--gold); font-size:14px; }
.account-dialog, .auth-card { background:var(--surface); color:var(--ink); border-color:var(--line); }
.pledge-form label, .auth-card p { color:var(--muted); }
.pledge-form input, .pledge-form select, .pledge-form textarea, .consent-fields select, .auth-card input[type=email] { background:var(--field); color:var(--ink); border-color:var(--line); }
.pledge-form label, .consent-fields label { font-size:15px; }
.form-note, .consent-sender { font-size:13px; color:var(--muted); }
.auth-card h2 { color:var(--ink); }
.dialog-close { color:var(--ink); background:var(--surface-raised); }
.mobile-join { display:none; }
@media (max-width:1100px) { .hero.arena-hero { gap:30px; } .hero h1 { font-size:76px; } .site-header nav { gap:15px; } .wrap { width:calc(100% - 64px); } .slate-demo { padding:20px; } .slate-signup>div { flex-wrap:wrap; } .slate-signup .button { width:100%; } }
@media (max-width:800px) { .hero.arena-hero { grid-template-columns:1fr; padding-top:24px; gap:32px; } .hero-copy { padding:0; } .hero h1 { font-size:clamp(64px,12vw,90px); } .hero-description { font-size:18px; margin-block:20px; } .hero-play-link { display:none; } .steps { grid-template-columns:1fr; gap:24px; } .how-section .section-copy { display:block; } .site-header { flex-wrap:wrap; gap:12px; } .site-header nav { gap:10px; } .site-header nav>a:not(.account-nav) { display:none; } .site-footer { padding-bottom:110px; } .mobile-join:not([hidden]) { position:fixed; bottom:0; left:0; right:0; z-index:10; display:flex; align-items:center; justify-content:space-between; gap:12px; padding:12px 20px calc(12px + env(safe-area-inset-bottom)); background:var(--surface); border-top:1px solid var(--line); box-shadow:0 -8px 30px #0002; } .mobile-join span { font-size:13px; } .mobile-join .button { padding:12px; font-size:14px; } body.account-open .mobile-join { display:none; } }
@media (max-width:480px) { .wrap { width:calc(100% - 32px); } .site-header { padding-block:16px; gap:8px; } .site-header .wordmark { font-size:26px; gap:6px; } .site-header .wordmark svg { width:24px; } .site-header nav>a.account-nav { font-size:12px; } .slate-demo { padding:18px 14px; } .demo-top h2 { font-size:34px; } .team-choices { gap:3px; grid-template-columns:minmax(0,1fr) 16px minmax(0,1fr); } .team-city { font-size:13px; } .crown-toggle { width:45px; } .how-section, .faq-section { padding-block:54px; } .pool-inner { padding-block:50px; } .reigning strong { font-size:25px; } .pool-row strong { font-size:13px; } .pool-row>span:last-child { font-size:12px; } }
@media (prefers-reduced-motion:reduce) { *, *::before, *::after { scroll-behavior:auto !important; animation:none !important; transition:none !important; } }

/* Keep the first conversion action visible on typical laptop screens. */
.hero.arena-hero { padding-top:32px; }
.team-choice { min-height:78px; padding-block:6px; }
.matchup { padding-block:8px; }
.crown-toggle { height:76px; }
.hero-copy { padding-top:12px; }
@media (min-width:801px) { .hero h1 { font-size:clamp(66px,6.5vw,94px); } }
@media (min-width:1101px) {
  .team-choice { display:grid; grid-template-columns:auto 1fr; column-gap:8px; row-gap:2px; padding:8px 14px; min-height:76px; }
  .team-city { grid-column:2; text-align:left; line-height:1.2; }
  .demo-top { min-height:0; }
  .demo-instruction { margin-block:8px; }
  .slate-signup { margin-top:10px; }
}
.pool-board .reigning p, .pool-board .reigning>div>span, .pool-board .pool-row>span:last-child { color:#d2c5dd; }
.pool-board .reigning>div>span { font-size:14px; }
.pool-board .reigning strong { color:#fff; }
.pool-board .reigning .reigning-avatar>span { color:#402364; font-size:24px; }
.pool-board .reign-badge, .pool-board .reign-badge span { color:#f3c75f; }
.pool-board .pool-row, .pool-board .pool-board-header, .pool-board .reigning { border-color:#61506f; }
.pool-board .pool-row strong { color:#fff; font-weight:500; }

/* Headings receive programmatic focus for announcements, not a control outline. */
#account-dialog-title:focus { outline:none; }
.account-dialog .legal-notice { border:0; border-radius:6px; }
.account-dialog .change-email-form { margin-block:20px; }
.auth-card .text-button { background:transparent; color:var(--accent); padding:0; text-align:left; text-decoration:underline; text-underline-offset:4px; justify-self:start; }
.preview-login-link { margin-top:8px; }

/* Stable modal shell: fixed toolbar, independently scrolling content. */
html { scrollbar-gutter:stable; }
.account-dialog { height:min(760px, calc(100dvh - 32px)); max-height:calc(100dvh - 32px); overflow:hidden; }
.account-dialog[open] { display:flex; flex-direction:column; }
.dialog-toolbar { display:flex; justify-content:flex-end; padding:12px 12px 0; flex-shrink:0; }
.dialog-close { position:static; float:none; margin:0; display:grid; place-items:center; padding:0; width:40px; height:40px; line-height:1; flex-shrink:0; }
.dialog-close svg { display:block; width:20px; height:20px; }
.dialog-content { min-height:0; overflow-y:auto; overscroll-behavior:contain; scrollbar-gutter:stable; }
.account-dialog .auth-card { padding:8px 32px 28px; }
.account-dialog .auth-card h2 { font-size:48px; line-height:1.04; margin:12px 0 20px; padding:0; }
.account-dialog .auth-card .eyebrow { font-size:14px; }
.account-dialog .auth-card form { margin:20px 0; gap:12px; }
.account-dialog .auth-card .legal-notice { margin:20px 0; padding:16px; }
.account-dialog .auth-card p { font-size:16px; }
.account-dialog .auth-card .form-note { font-size:13px; }
@media (max-width:680px) { .account-dialog .auth-card { padding:8px 22px 24px; } .account-dialog .auth-card h2 { font-size:40px; } }
.hero-description { margin-block:18px 24px; }
.hero-play-link { text-decoration:none; }
.hero-play-link .link-label { text-decoration:underline; text-underline-offset:7px; color:var(--ink); }
.hero-play-link .link-arrow { text-decoration:none; color:var(--accent); }
.pick-score { font:700 21px/1.2 var(--display); margin-top:4px; grid-column:1 / -1; }
.pick-score small { font:400 12px var(--body); }
.closing-section { background:#18101f; color:#fff; padding-block:64px; }
.closing-section>.wrap { display:grid; grid-template-columns:minmax(0,1.5fr) minmax(240px,1fr); align-items:center; gap:64px; }
.closing-section svg { width:44px; height:40px; display:block; color:var(--gold); margin-bottom:18px; }
.closing-section h2 { max-width:13ch; font-size:clamp(48px,5.5vw,76px); line-height:1; }
.closing-section p { margin-top:14px; color:#d6cbdf; font-size:22px; }
.closing-section .form-note { color:#c7bfce; font-size:14px; }
.closing-section .button { font-size:17px; }
@media (min-width:1101px) { .hero h1 { font-size:clamp(66px,6vw,88px); } }
@media (max-width:800px) {
  .site-header nav>a.account-nav { display:inline-block; font-size:13px; padding:11px 12px; }
  .hero h1 { font-size:clamp(56px,10vw,78px); }
  .hero-description { font-size:16px; line-height:1.5; }
  .closing-section { padding-block:44px; }
  .closing-section>.wrap { grid-template-columns:1fr; gap:28px; }
  .closing-section h2 { max-width:15ch; font-size:52px; }
  .mobile-join span { display:none; }
  .mobile-join .button { width:100%; justify-content:center; }
}
@media (max-width:480px) { .pick-score small { display:block; font-size:11px; } .demo-count { font-size:11px; padding:6px; } .site-header { gap:12px; } .site-header nav>a.account-nav { font-size:12px; } }

/* Pool prices stay on team tiles; actual stakes and returns read as a slip. */
.pick-score small { display:block; margin-top:2px; }
.matchup { flex-wrap:wrap; }
.crown-toggle small { font:400 11px var(--body); }
[data-demo-result] { font-size:13px; }

/* One reading axis for the explanation; balanced columns for the social section. */
.how-section .section-copy { display:block; }
.how-section .section-copy h2 { margin-top:12px; max-width:20ch; }
.steps li { align-items:flex-start; }
.step-number { flex-shrink:0; }
.pool-copy>p { max-width:46ch; }
@media (min-width:801px) {
  .pool-inner { grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:clamp(48px,6vw,88px); }
}

/* Team identity belongs in the logo; selections belong to SlateKings. */
.team-choice { display:flex; flex-direction:column; gap:5px; padding:10px 6px 8px; border-color:#91849f; }
.team-choice[aria-pressed=true] { background:var(--pick-fill); border-color:var(--pick-edge); color:var(--pick-ink); }
.team-choice[aria-pressed=true]:hover { background:var(--pick-hover); }
.team-logo-plate { display:grid; place-items:center; width:76px; height:54px; background:#fff; border-radius:6px; flex-shrink:0; }
.team-choice .team-logo { width:72px; height:52px; object-fit:contain; }
.team-choice .team-city { text-align:center; font-weight:600; }
.team-choice .pick-score { margin:0; }
.team-choice .pick-check { position:static; display:block; width:auto; height:auto; padding:2px 8px; border-radius:4px; background:var(--pick-badge); color:var(--pick-badge-ink); font:700 11px/1.4 var(--body); opacity:0; }
.team-choice[aria-pressed=true] .pick-check { opacity:1; }
.hero-play-link.button { background:var(--gold); color:#21182d; padding:16px 22px; gap:24px; font-size:17px; text-decoration:none; }
.hero-play-link.button:hover { background:#ffda81; }
.hero-play-link.button .link-label, .hero-play-link.button .link-arrow { color:#21182d; text-decoration:none; }
.demo-disclaimer { font-size:14px; line-height:1.55; color:var(--muted); }
@media (max-width:480px) {
  .team-logo-plate { width:64px; height:48px; }
  .team-choice .team-logo { width:62px; height:46px; }
  .demo-disclaimer { font-size:13px; }
}

/* Warm gold with one soft reflection, never a repeating flash. */
.button, .hero-play-link.button, .nav-cta, .crown-toggle[aria-pressed=true] {
  background-image:linear-gradient(135deg,#ffe39a 0%,#f3c75f 42%,#e8b64d 100%);
  box-shadow:inset 0 1px 0 #fff8,inset 0 -1px 0 #8f611d26;
  position:relative;
  isolation:isolate;
  overflow:hidden;
}
.button::before, .nav-cta::before, .crown-toggle[aria-pressed=true]::before {
  content:"";
  position:absolute;
  inset:-40% -70%;
  z-index:-1;
  pointer-events:none;
  background:linear-gradient(110deg,transparent 42%,#ffffff08 46%,#ffffffa6 50%,#ffffff08 54%,transparent 58%);
  transform:translateX(-75%);
}
.hero-play-link.button::before, .nav-cta::before, .crown-toggle[aria-pressed=true]::before {
  animation:gold-arrival 1.2s ease-in-out .4s both;
}
.button:is(:hover, :focus-visible)::before, .nav-cta:is(:hover, :focus-visible)::before, .crown-toggle[aria-pressed=true]:is(:hover, :focus-visible)::before {
  animation:gold-reflection .95s ease-in-out both;
}
@keyframes gold-arrival { from { transform:translateX(-75%); } to { transform:translateX(75%); } }
@keyframes gold-reflection { from { transform:translateX(-75%); } to { transform:translateX(75%); } }
@media (prefers-reduced-motion:reduce) {
  .button::before, .nav-cta::before, .crown-toggle[aria-pressed=true]::before { display:none; animation:none; }
}

/* Feedback follows a deliberate pick; no idle loops or moving layout. */
.team-choice { transition:background-color .16s ease,color .16s ease,border-color .16s ease; }
.team-choice .pick-check { transform:scale(.85); transition:opacity .15s ease,transform .18s ease; }
.team-choice[aria-pressed=true] .pick-check { transform:scale(1); }
@media (prefers-reduced-motion:no-preference) {
  .button, .nav-cta { transition:transform .15s ease; }
  .button:active, .nav-cta:active { transform:scale(.98); }
}

/* Appearance belongs within reach in the header, with native radio choices. */
.appearance { position:relative; flex-shrink:0; }
.appearance-toggle { display:grid; place-items:center; width:44px; height:44px; padding:10px; border:1px solid var(--line); border-radius:50%; color:var(--ink); background:var(--surface); cursor:pointer; }
.appearance-toggle svg { width:22px; height:22px; }
.appearance-toggle .appearance-moon, .appearance-toggle.is-dark .appearance-sun { display:none; }
.appearance-toggle.is-dark .appearance-moon { display:block; }
.appearance-options { position:absolute; top:calc(100% + 10px); right:0; width:156px; margin:0; padding:6px; border:1px solid var(--line); border-radius:10px; background:var(--surface); color:var(--ink); box-shadow:0 8px 25px #0003; z-index:30; }
.appearance-options label { display:flex; align-items:center; gap:12px; min-height:44px; padding:8px 12px; border-radius:6px; cursor:pointer; font-size:15px; }
.appearance-options label:hover { background:var(--surface-raised); }
.appearance-options input { accent-color:var(--accent); width:16px; height:16px; }
@media(max-width:480px) {
  .site-header nav { gap:8px; }
  .site-header .account-nav { padding:10px; }
  .site-header .wordmark { font-size:24px; }
}
.auth-card[data-waitlist] h2 { font-size:clamp(34px,5vw,44px); }
.auth-card[data-waitlist] select { width:100%; min-height:44px; padding:10px; background:var(--field); color:var(--ink); border:1px solid var(--line); border-radius:6px; font:inherit; }
.auth-card[data-waitlist] .consent-check { display:flex; align-items:flex-start; gap:12px; font-size:14px; line-height:1.5; margin:4px 0; }
.auth-card[data-waitlist] input[type=checkbox] { width:18px; height:18px; min-height:18px; flex:0 0 18px; padding:0; margin:2px 0 0; accent-color:var(--accent); }
.auth-card[data-waitlist] .form-note { font-size:13px; }

.account-dialog .auth-card[data-waitlist] form { gap:10px; margin:16px 0; }
.account-dialog .auth-card[data-waitlist] h2 { margin:8px 0 12px; }
[data-stake-error]:empty { display:none; }
[data-stake-error] { color:var(--ink); font-weight:700; }
.crown-toggle:disabled { opacity:.45; cursor:default; }

/* Form feedback follows the same palette as the launch-invite dialog. */
.server-feedback, .auth-card .server-feedback {
  color:var(--ink);
  background:var(--surface-raised);
  border-left:3px solid var(--gold);
  border-radius:6px;
  padding:14px 16px;
  line-height:1.6;
}

.matchup-source { flex:0 0 100%; margin:0 0 4px; font-size:12px; color:var(--muted); }