:root{--night:#07392D;--pitch:#21734B;--chalk:#F2F1DE;--fresh:#B8E56A;--bg:var(--chalk);--ink:var(--night);--accent:var(--fresh);--gutter:clamp(20px,5vw,32px);--radius-control:10px;--radius-panel:16px;--motion-fast:160ms;--motion-ease:cubic-bezier(.2,.7,.2,1);font-family:ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;color:var(--ink);background:var(--bg);font-synthesis:none}
*{box-sizing:border-box}body{--muted:color-mix(in srgb,var(--ink) 78%,var(--bg));--rule:color-mix(in srgb,var(--ink) 22%,transparent);--control-rule:color-mix(in srgb,var(--ink) 56%,transparent);margin:0;min-width:0;background:var(--bg);color:var(--ink);font-size:16px;line-height:1.5}body.dark{--bg:var(--night);--ink:var(--chalk)}button,input,textarea{font:inherit}button,a,input,textarea{touch-action:manipulation}button{cursor:pointer}button:disabled{cursor:default;opacity:.8}.button:disabled{border-style:dashed;border-color:color-mix(in srgb,currentColor 45%,transparent)}a{color:inherit;text-underline-offset:4px}button:focus-visible,input:focus-visible,textarea:focus-visible,a:focus-visible,summary:focus-visible{outline:3px solid var(--pitch);outline-offset:4px}.dark :focus-visible{outline-color:var(--fresh)}h1,h2,p{margin:0}h1{font-size:clamp(36px,9vw,52px);line-height:1.08;letter-spacing:-.035em;font-weight:600;overflow-wrap:anywhere}h1 em{font:inherit}h2{font-size:21px;line-height:1.3;letter-spacing:-.02em}p{overflow-wrap:anywhere}.small{font-size:13px;line-height:1.5}.eyebrow{font:inherit}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}.skip-link{position:absolute;top:-80px;left:16px;background:var(--fresh);color:var(--night);padding:12px;z-index:10}.skip-link:focus{top:12px}
#app{max-width:560px;margin:0 auto;min-height:100svh;display:flex;flex-direction:column;padding-top:env(safe-area-inset-top);padding-bottom:env(safe-area-inset-bottom);padding-left:env(safe-area-inset-left);padding-right:env(safe-area-inset-right)}.site-header{margin:0 var(--gutter);padding:22px 0 16px;border-bottom:1px solid var(--rule);display:flex;justify-content:space-between;align-items:center;gap:16px}.brand{border:0;background:none;color:inherit;padding:4px 0;min-height:44px;max-width:75%;text-decoration:none;text-align:left}.brand-mark{display:block;font:inherit;font-size:clamp(20px,5vw,28px);font-weight:600;line-height:1.2;white-space:nowrap}.text-button{border-radius:var(--radius-control);min-height:44px;padding:10px 2px;border:0;background:transparent;color:inherit;font-size:14px;font-weight:600;text-underline-offset:4px}.text-button:hover{text-decoration:underline}.screen{padding:24px var(--gutter) 36px;flex:1;outline:none!important}.button{display:flex;justify-content:space-between;align-items:center;gap:20px;width:100%;min-height:56px;padding:15px 20px;border:2px solid transparent;border-radius:var(--radius-control);background:var(--fresh);color:var(--night);font-size:18px;font-weight:600;text-align:left;line-height:1.3}.button>span[aria-hidden] svg{display:block}.button>span[aria-hidden]{font-size:24px;line-height:1;flex:none}.button:hover:not(:disabled){background:#c8ed8b}.button.secondary{min-height:52px;background:transparent;color:inherit;border:1px solid var(--control-rule);font-size:16px}.button.secondary:hover:not(:disabled){background:color-mix(in srgb,currentColor 8%,transparent)}.button+.button{margin-top:12px}.bottom-bands{height:12px;display:grid;grid-template-columns:repeat(7,1fr);flex:none}.bottom-bands i{background:var(--pitch)}.bottom-bands i:nth-child(even){background:var(--night)}.dark .bottom-bands i:nth-child(even){background:var(--fresh)}
.home h1{max-width:420px;margin-bottom:20px}.home h1 em{display:block}.stadium{border-radius:var(--radius-panel);display:block;width:100%;max-width:448px;margin:28px auto 0;height:auto;aspect-ratio:720/520}.home-copy{margin-bottom:24px}.home-copy p{max-width:380px;color:var(--muted)}.home-actions>.eyebrow{margin-bottom:10px}.home-actions>.small{margin-top:12px}.practice-note{font-size:12px;line-height:1.5;margin:18px 0 26px;color:var(--muted)}.home>.small{margin-top:12px}.replay{display:block;margin:10px auto 0;text-decoration:underline}.reset{border-top:1px solid var(--rule);margin-top:32px;padding-top:18px;display:flex;justify-content:space-between;align-items:center;gap:16px;font-size:12px}.reset time{font-size:16px;font-variant-numeric:tabular-nums;font-weight:600}.site-footer{color:var(--muted);margin-top:24px;display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap;font-size:12px}.site-footer nav{display:flex;gap:16px}.site-footer .text-button{font-size:12px}.progress{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:5px;height:5px;margin:0 0 22px}.progress span{border:1px solid var(--control-rule)}.progress .done{background:var(--ink)}.progress .current{border-color:var(--ink);background:var(--fresh)}.question-top{display:flex;justify-content:space-between;align-items:center;gap:20px;margin-bottom:36px}.answer-clock{text-align:right;white-space:nowrap}.timer-number{font-size:32px;font-weight:600;font-variant-numeric:tabular-nums;line-height:1}.answer-clock>span:last-child{display:block;font-size:12px;margin-top:5px;color:var(--muted)}.prompt{font-family:inherit;font-size:clamp(24px,6.1vw,30px);line-height:1.25;letter-spacing:-.025em;margin-bottom:16px}.scope{color:var(--muted);font-size:14px;line-height:1.55;margin-bottom:32px;max-width:440px}#answer-form>label{display:block;font-size:13px;font-weight:600;margin-bottom:8px}input[type=text],textarea{width:100%;min-width:0;border:2px solid var(--ink);border-radius:var(--radius-control);background:transparent;color:inherit;padding:13px 14px;font-size:20px;line-height:1.4}input[readonly]{opacity:.8}.answer-notice{min-height:44px;padding-top:10px;font-size:14px;font-weight:600;line-height:1.45}.correction{border:0;padding:0;margin:12px 0 24px;min-width:0}.correction legend{font-size:15px;font-weight:600;margin-bottom:6px}.correction>.small{margin-bottom:12px}.candidate{border-radius:var(--radius-control);display:flex;align-items:center;gap:12px;padding:12px;border:1px solid var(--ink);min-height:62px;margin-bottom:8px;cursor:pointer}.candidate:has(input:checked){background:var(--fresh)}.candidate input{width:20px;height:20px;accent-color:var(--night);flex:none}.candidate strong{display:block;font-size:16px;overflow-wrap:anywhere}.candidate small{display:block;font-size:12px;font-weight:400}.pass{display:block;margin:12px auto 0;min-height:48px}.feedback>.eyebrow{margin-bottom:24px}.feedback h1{font-size:clamp(28px,7vw,38px);letter-spacing:-.025em}.earned{font-size:clamp(80px,23vw,112px);font-weight:600;line-height:1.1;letter-spacing:-.06em;color:var(--fresh);margin:24px 0 16px}.earned>span:not(.sr-only){font-size:14px;letter-spacing:0;margin-left:10px;font-weight:400}.accepted-name{font-size:24px;font-weight:600;line-height:1.3}.rarity{font-size:13px;margin-top:8px}.feedback-note{max-width:360px}.total-line{margin:32px 0;padding:18px 0;border-top:1px solid var(--rule);border-bottom:1px solid var(--rule);display:flex;justify-content:space-between;align-items:center;font-size:15px}.total-line strong{font-size:24px}.pause-note{color:var(--muted);font-size:12px;text-align:center;margin-top:16px}.result h1{font-size:clamp(32px,8vw,44px);max-width:420px}.result h1 em{display:block}.final-score{font-size:clamp(80px,22vw,112px);line-height:1.1;font-weight:600;letter-spacing:-.055em;margin:24px 0}.final-score>span{font-size:16px;font-weight:400;letter-spacing:0;white-space:nowrap}.score-strip{list-style:none;padding:0;display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:5px;margin:0 0 28px}.score-strip li{border-radius:var(--radius-control);background:var(--chalk);color:var(--night);text-align:center;padding:12px 2px}.score-strip strong{font-size:clamp(15px,4.2vw,20px)}.result-note{font-size:14px;margin-bottom:24px;max-width:380px}.result>.small{margin-top:16px}.sources{font-size:12px;margin-top:24px}.sources summary{cursor:pointer;min-height:44px;padding-block:10px;text-decoration:underline}.sources p{margin-block:12px}.sources ul{padding-left:18px}.sources li{margin-bottom:8px}.connection{border-radius:var(--radius-panel);border:2px solid currentColor;padding:16px;margin-bottom:24px;font-size:14px}.connection p{margin-bottom:12px}.connection .button{min-height:48px}.connection+.question .question-top{margin-bottom:24px}
dialog{--bg:var(--chalk);--ink:var(--night);--muted:color-mix(in srgb,var(--ink) 78%,var(--bg));--rule:color-mix(in srgb,var(--ink) 22%,transparent);--control-rule:color-mix(in srgb,var(--ink) 56%,transparent);border-radius:var(--radius-panel);--dialog-top:max(12px,env(safe-area-inset-top,0px));--dialog-bottom:max(12px,env(safe-area-inset-bottom,0px));--dialog-left:max(12px,env(safe-area-inset-left,0px));--dialog-right:max(12px,env(safe-area-inset-right,0px));position:fixed;inset:var(--dialog-top) var(--dialog-right) auto var(--dialog-left);margin:0 auto;width:min(600px,calc(100% - var(--dialog-left) - var(--dialog-right)));max-width:calc(100% - var(--dialog-left) - var(--dialog-right));max-height:calc(100dvh - var(--dialog-top) - var(--dialog-bottom));border:1px solid var(--control-rule);padding:0;background:var(--chalk);color:var(--night);overflow:hidden}dialog::backdrop{background:rgb(7 57 45 / .48)}dialog h2{font-size:26px;line-height:1.2;margin-bottom:20px}dialog p{font-size:15px;margin-bottom:18px}dialog form[method=dialog]{position:absolute;top:12px;right:12px;margin:0;padding:0;border:0}dialog textarea{font-size:16px;margin:4px 0 16px;resize:vertical}.rules{padding-left:20px;font-size:15px}.rules li{padding-left:4px;margin-bottom:14px}.provider-list{display:grid;gap:12px}.provider-list .button{font-size:14px}.dark dialog :focus-visible{outline-color:var(--pitch)}
@media(min-width:768px){#app{max-width:1200px;--gutter:32px}.screen{padding-top:32px}.question-top{margin-bottom:44px}.home{max-width:680px;margin-inline:auto}}
/* Ready has two spaced groups: the introduction and the actions. */
.ready { display: grid; gap: 32px; }
.ready-intro { display: grid; gap: 16px; }
.ready-intro h1 { margin: 0; font-size: clamp(30px, 7vw, 40px); }
.ready-intro h1 em { white-space: nowrap; }
.ready-intro p { max-width: 32ch; color: var(--muted); }
.ready-actions { display: grid; gap: 16px; }
.ready-actions > .text-button { justify-self: start; }

/* Wide screens use the pitch horizontally; smaller windows keep the mobile flow. */
@media (min-width: 900px) {
  #app { max-width: 1200px; --gutter: 48px; }
  .site-header { padding-block: 28px 22px; }
  .screen { padding-top: 48px; }
  .home {
    max-width: none;
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.08fr);
    column-gap: clamp(40px, 5vw, 64px);
    align-items: start;
  }
  .home > * { grid-column: 1; min-width: 0; }
  .home-copy p { max-width: 40ch; }
  .home > .stadium {
    grid-column: 2;
    grid-row: 1 / span 3;
    align-self: start;
    max-width: none;
    margin: 0;
  }
  .home > .practice-note { grid-column: 1 / -1; margin-bottom: 0; }
  .home > .reset, .home > .site-footer { grid-column: 1 / -1; }
  .screen > .ready, .screen > .question, .screen > .feedback, .screen > .result {
    max-width: 640px;
    margin-inline: auto;
  }
  .connection { max-width: 640px; margin-inline: auto; }
  [data-stage-connection]:has(.connection) { padding: 24px var(--gutter) 0; }
}
@media(max-height:650px){.site-header{padding-top:12px;padding-bottom:10px}.screen{padding-top:18px}.question-top{margin-bottom:24px}.scope{margin-bottom:24px}}

/* The same lightweight shell appears before modules load and during recovery. */
.screen[data-view="loading"]{display:flex;align-items:center;justify-content:center}
.loading{width:100%;max-width:400px;margin:12px auto 40px;text-align:center}
.loading-pitch{display:block;width:min(100%,280px);height:auto;margin:0 auto 28px}
.loading-copy h1{font-size:clamp(28px,7vw,36px);line-height:1.16;letter-spacing:-.03em}
.loading-copy h1 em{display:block}
.loading-copy p{max-width:34ch;margin:16px auto 0;color:var(--muted);font-size:15px;line-height:1.6}
.loading-actions{display:flex;justify-content:center;align-items:center;gap:8px 24px;flex-wrap:wrap;margin:24px auto 0;max-width:320px}
.loading-actions>.button{flex-basis:100%}
.loading-reload{display:inline-flex;align-items:center;font-weight:400;text-decoration:underline}
.loading-details{margin:18px auto 0;max-width:34ch;font-size:12px;color:var(--muted)}
.loading-details summary{min-height:44px;padding:12px 4px;cursor:pointer;text-underline-offset:4px}
.loading-details summary:hover{text-decoration:underline}
.loading-details p{padding:10px 0;text-align:left;border-top:1px solid var(--rule);overflow-wrap:anywhere}
.loading:has(.startup-noscript) .loading-copy{display:none}
.loading:has(.startup-noscript) .loading-ball{animation:none!important}
.startup-noscript{max-width:440px;margin:24px auto;padding:0 24px;font-size:15px;color:var(--night)}
@media(max-height:650px){.loading{margin:0 auto 16px}.loading-pitch{width:210px;margin-bottom:20px}}

/* Short visual feedback only: no delay, input lock, or timed-question entrance. */
@media(prefers-reduced-motion:no-preference){
  .button,.text-button,.candidate{transition:background-color var(--motion-fast) var(--motion-ease),border-color var(--motion-fast) var(--motion-ease),transform var(--motion-fast) var(--motion-ease)}
  .button:active:not(:disabled){transform:translateY(1px)}
  .screen-enter:not([data-view="question"]):not([data-view="loading"]):not([data-view="game"]),dialog[open]{animation:settle var(--motion-fast) var(--motion-ease)}
  dialog[open]::backdrop{animation:reveal var(--motion-fast) ease-out}
  .loading[data-load-state="loading"] .loading-ball{animation:loading-roll 1.8s ease-in-out 2}
  @keyframes loading-roll{0%,100%{transform:translateX(0) rotate(0)}50%{transform:translateX(7px) rotate(16deg)}}
  @keyframes settle{from{opacity:.72;transform:translateY(4px)}to{opacity:1;transform:translateY(0)}}
  @keyframes reveal{from{opacity:0}to{opacity:1}}
}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}}
#profile-form>label{display:block;font-size:13px;font-weight:600;margin-bottom:8px}#profile-form input{margin-bottom:12px}#profile-help{font-size:13px;line-height:1.5}dialog h3{font-size:18px;margin:24px 0 12px}.profile-history{padding-left:20px;margin:0 0 18px;font-size:14px;line-height:1.7}

/* Ranked answer shares belong to the untimed, locked-round feedback. */
.top-answers{margin:16px 0;padding:14px 0;border-block:1px solid var(--rule)}
.top-answers h2{font-size:16px;line-height:1.4;letter-spacing:0}
.top-answers-note,.top-answers-question{font-size:12px;line-height:1.5;color:var(--muted);margin-top:5px}
.top-answers-list{list-style:decimal;margin:10px 0 0;padding-left:22px;font-size:14px}
.top-answers-list li{padding:6px 0 6px 3px;overflow-wrap:anywhere}
.top-answers-list li::marker{color:var(--muted);font-variant-numeric:tabular-nums}
.top-answers-list li>span{display:inline-block;width:calc(100% - 66px);vertical-align:top;padding-right:12px}
.top-answers-list strong{display:inline-block;width:66px;text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap}

/* Information links stay outside the timed answer form. */

.site-footer nav{flex-wrap:wrap;gap:8px 20px}
.site-footer .service-links{flex-basis:100%;border-top:1px solid var(--rule);padding-top:12px}
.service-links a{display:inline-flex;align-items:center;min-height:44px;font-size:12px}
.report-question{display:block;width:fit-content;margin:10px auto 0;font-size:13px;font-weight:400;text-decoration:underline}
.account-information{margin-top:20px}
.button[hidden]{display:none}
.screen[data-view="loading"]{flex-direction:column}
.startup-information{display:flex;flex-wrap:wrap;justify-content:center;gap:4px 20px;margin-bottom:16px;font-size:12px}
.startup-information a{display:inline-flex;align-items:center;min-height:44px}
.startup-about{max-width:380px;margin:8px auto 24px;padding:0 var(--gutter);text-align:center;color:var(--muted);font-size:14px;line-height:1.5}.startup-about h2{font-size:16px;margin:0 0 6px;color:var(--ink)}

/* Match reports use the existing pitch palette and readable numeric charts. */
.stat-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin:18px 0}
.stat-grid>div{border:1px solid var(--rule);border-radius:var(--radius-control);padding:14px;min-width:0}
.stat-grid dt{font-size:12px;color:var(--muted)}.stat-grid dd{font-size:24px;font-weight:600;font-variant-numeric:tabular-nums;margin:5px 0 0;line-height:1.25}
.outcome-counts{color:var(--muted);margin-bottom:20px}
.round-chart{align-items:end;gap:6px;margin-block:20px 24px}
.round-chart li{background:transparent;color:inherit;border:1px solid var(--rule);padding:10px 3px 8px;min-width:0}
.round-chart li[data-outcome="accepted"]{border-color:var(--pitch)}
.round-chart li>span:not(.round-bar):not(.sr-only){display:block;font-size:12px;line-height:1.5;margin:8px 0 0}
.round-bar{display:flex;align-items:end;height:88px;margin:8px 0 0;background:color-mix(in srgb,var(--ink) 5%,transparent);border-radius:4px;overflow:hidden}
.round-bar i{display:block;width:100%;height:calc(var(--points)*1%);background:var(--pitch);min-height:2px}
.round-chart li:not([data-outcome="accepted"]) .round-bar i{background:var(--muted)}
.round-recap{border-block:1px solid var(--rule);margin:24px 0}
.round-recap summary{padding:16px 0;min-height:52px;cursor:pointer;font-size:15px;font-weight:600}
.round-recap ol{list-style:none;padding:0;margin:0}.round-recap li{border-top:1px solid var(--rule);padding:16px 0}
.recap-heading{display:flex;justify-content:space-between;gap:12px;font-size:12px;margin-bottom:8px}
.round-recap p{font-size:14px;margin-bottom:8px}.round-recap .recap-answer{font-size:17px;font-weight:600;margin:0}
.other-answers{margin:16px 0;border:1px solid var(--pitch);border-radius:var(--radius-control);background:var(--chalk);color:var(--night)}
.other-answers>summary{display:flex;align-items:center;gap:10px;min-height:48px;padding:12px;font-size:16px;font-weight:600;cursor:pointer;list-style:none}
.other-answers>summary::-webkit-details-marker{display:none}
.other-answers>summary>span:first-child{flex:1;min-width:0;overflow-wrap:anywhere}
.other-answers>summary::after{content:"";width:8px;height:8px;flex:none;border-right:2px solid currentColor;border-bottom:2px solid currentColor;transform:rotate(45deg);margin:0 3px 4px}
.other-answers[open]>summary::after{transform:rotate(225deg);margin-block:4px 0}
.other-answers-count{display:inline-grid;place-items:center;min-width:28px;min-height:28px;padding:2px 7px;border-radius:20px;background:var(--fresh);font-size:13px;font-variant-numeric:tabular-nums}
.other-answers-body{padding:0 12px 12px}
.other-answers .other-answers-list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:6px;max-height:224px;overflow-y:auto;list-style:none;padding:0;margin:0}
.other-answers .other-answers-list:focus-visible{outline:2px solid var(--pitch);outline-offset:2px}
.other-answers .other-answers-list>li{display:flex;flex-direction:column;justify-content:center;gap:3px;min-width:0;min-height:44px;border:1px solid color-mix(in srgb,var(--night) 20%,transparent);border-radius:7px;padding:8px 10px;font-size:14px;line-height:1.35}
.other-answers .other-answers-list>li.is-own{border-color:var(--pitch);background:color-mix(in srgb,var(--fresh) 42%,var(--chalk));font-weight:600}
.other-answers-list>li>span{min-width:0;overflow-wrap:anywhere}
.other-answers-list small{font-size:12px;color:var(--pitch)}
.comparison-card{border:1px solid var(--control-rule);border-radius:var(--radius-panel);padding:20px;margin:24px 0}
.stat-heading{display:flex;justify-content:space-between;align-items:baseline;flex-wrap:wrap;gap:6px 16px;margin-bottom:12px}
.stat-heading h2{font-size:19px;margin:0}.stat-heading time{font-size:12px}
.standing-rank{display:block;font-size:48px;line-height:1.1;letter-spacing:-.04em;margin:12px 0}.standing-rank span{font-size:18px;letter-spacing:0;font-weight:400}
.comparison-card>p{font-size:14px;margin:10px 0}.comparison-card .small{font-size:12px}.comparison-card .stat-grid{margin-bottom:0}
.score-distribution{margin:24px 0 0}.score-distribution figcaption{font-size:14px;font-weight:600;margin-bottom:12px}
.score-distribution ol{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:6px;list-style:none;padding:0;margin:0 0 12px}
.score-distribution li{text-align:center;font-size:12px;min-width:0}.distribution-count{font-size:12px;font-weight:600}
.distribution-bar{display:flex;align-items:end;height:72px;margin:5px 0 8px;border-radius:4px;overflow:hidden;background:color-mix(in srgb,var(--ink) 5%,transparent)}
.distribution-bar i{display:block;width:100%;height:calc(var(--share)*1%);background:var(--pitch)}
.your-range .distribution-bar{outline:2px solid var(--ink);outline-offset:2px}
.profile-modes h4{font-size:15px;margin:20px 0 8px}.profile-stat-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;margin:8px 0 18px}.profile-stat-grid>div{padding:10px}.profile-stat-grid dd{font-size:22px}
.match-history,.leaderboard-rows{list-style:none;padding:0;margin:16px 0}
.history-game{display:grid;grid-template-columns:minmax(0,1fr) auto 18px;gap:12px;align-items:center;width:100%;min-height:64px;border:0;border-bottom:1px solid var(--rule);border-radius:0;background:transparent;color:inherit;padding:12px 0;text-align:left}
.history-game:hover{background:color-mix(in srgb,currentColor 5%,transparent)}.history-game time{font-size:14px}.history-game small{display:block;font-size:12px;font-weight:400}.history-game strong{font-size:22px;text-align:right}
.leaderboard-rows li{display:grid;grid-template-columns:42px minmax(0,1fr) auto;align-items:center;gap:12px;padding:14px 10px;border-bottom:1px solid var(--rule);font-size:14px}
.leaderboard-rows li>span{overflow-wrap:anywhere}.leaderboard-rows small{font-size:12px;font-weight:400}.leaderboard-rows .is-you{background:var(--fresh);color:var(--night);border-radius:var(--radius-control)}
.leaderboard-pages{display:flex;gap:12px}.leaderboard-pages>.button{margin:0;min-width:0;flex:1;font-size:14px}
@media(max-width:359px){.score-distribution ol{gap:4px}.score-distribution li{font-size:12px}.comparison-card{padding:14px}.profile-stat-grid>div{padding:8px}.profile-stat-grid dt{font-size:12px}}

/* Two normalized populations, one distinct personal marker. */
.distribution-legend{display:flex;flex-wrap:wrap;gap:8px 18px;list-style:none;padding:0;margin:12px 0;font-size:12px}
.distribution-legend li{display:flex;align-items:center;gap:6px;font-size:12px;text-align:left}.distribution-legend i{width:12px;height:12px;border:1px solid var(--ink);border-radius:2px}
.legend-world,.distribution-world{background:var(--pitch)}.legend-friends,.distribution-friends{background:repeating-linear-gradient(135deg,var(--fresh) 0 4px,var(--night) 4px 6px)}
.legend-you,.you-marker{font-size:14px;line-height:1.3}.you-marker{display:block;height:22px;font-weight:600}
.distribution-pair{display:flex;align-items:end;gap:3px;height:88px;background:color-mix(in srgb,var(--ink) 5%,transparent);border-radius:4px;margin:0 0 8px;padding:2px}
.distribution-pair i{display:block;width:50%;height:calc(var(--share)*1%);border-radius:2px}
.your-range .distribution-pair{outline:2px solid var(--ink);outline-offset:2px}
.friends-comparison{border-top:1px solid var(--rule);padding-top:18px;margin-top:24px}.friends-comparison h3{margin:0 0 12px;font-size:17px}.friends-comparison p{margin:8px 0;font-size:14px}.friends-rank{font-size:24px}
.friend-scores,.friend-list{padding:0;margin:12px 0 18px;list-style:none}.friend-scores li{display:flex;align-items:center;justify-content:space-between;gap:12px;border-bottom:1px solid var(--rule);padding:10px 0;font-size:14px}.friend-scores small{font-weight:400;font-size:12px}
.friend-scores li>span{min-width:0;overflow-wrap:anywhere}.friend-scores li>strong{flex:none}
.friend-controls{border:0;padding:0;margin:0;min-width:0}.friend-controls h3{margin:24px 0 12px}.friend-controls>label{display:block;font-size:13px;font-weight:600;margin:12px 0 8px}
.friend-list li{padding:12px 0;border-bottom:1px solid var(--rule)}.friend-list strong{display:block;font-size:15px;overflow-wrap:anywhere}.friend-list li>div{display:flex;flex-wrap:wrap;gap:8px 20px}.friend-recovery{border:1px solid var(--control-rule);border-radius:var(--radius-control);padding:14px;margin-block:18px}
/* First visit: one clear play action, outlined navigation and real status text. */
.site-header { gap: 12px; }
.site-header .text-button {
  flex: none; padding: 9px 12px; border: 0;
  border-radius: 10px; white-space: nowrap; text-decoration: none;
}
.site-header .text-button:hover { text-decoration: none; background: color-mix(in srgb, currentColor 7%, transparent); }
.home-copy p { font-size: 17px; line-height: 1.5; }
.home-actions .button, .home .replay {
  border-radius: 14px; white-space: nowrap; gap: 12px;
}
.home-actions .home-reassurance { margin-top: 9px; text-align: center; }

.home .replay { width: 100%; border: 1px solid var(--control-rule); padding: 10px 14px; text-decoration: none; }
.home .replay:hover { text-decoration: none; background: color-mix(in srgb, currentColor 7%, transparent); }
.home .site-footer nav[aria-label="Account and leaderboard"] { gap: 8px; }
.home .site-footer .text-button { border: 1px solid var(--control-rule); padding: 9px 12px; border-radius: 12px; white-space: nowrap; }
.home .site-footer .text-button:hover { text-decoration: none; background: color-mix(in srgb, currentColor 7%, transparent); }
.home .service-links a { text-decoration: none; white-space: nowrap; }
.home .service-links a:hover { text-decoration: underline; }
#info-dialog .button, .information-page .button {
  white-space: normal; gap: 10px; padding: 12px 14px; font-size: 16px; border-radius: var(--radius-control); text-decoration: none;
}
#info-dialog h2:focus { outline: none; }
.quick-rules { margin-top: 0; }
.rule-section { border-top: 1px solid var(--rule); margin-top: 20px; padding-top: 4px; }
.rule-section h3 { font-size: 16px; margin: 16px 0 12px; }
.rule-section p { font-size: 14px; line-height: 1.5; }
.rules-timer { color: var(--muted); }
.guide-example { display: inline-flex; align-items: center; gap: 8px; font-size: 14px; text-decoration: none; }
.guide-example svg { width: 16px; height: 16px; }
@media (max-width: 360px) {
  .site-header { margin-inline: 16px; gap: 8px; }
  .brand-mark { font-size: 18px; }
  .site-header .text-button { padding-inline: 9px; font-size: 12px; }
  .home-actions .button { font-size: 16px; padding-inline: 14px; gap: 8px; }
  .home-actions .button svg, #info-dialog .button svg { width: 20px; height: 20px; }
  #info-dialog > form[method="dialog"] { padding: 0; }
  #info-dialog .button { font-size: 15px; padding-inline: 12px; gap: 8px; }
}
@media (max-width: 300px) {
  #info-dialog [data-action="login"] > span[aria-hidden="true"] { display: none; }
}

/* Action labels stay on one line; supporting instructions live outside them. */
.button, .text-button { white-space: nowrap; }
.account-intent { font-weight: 700; }
.site-footer .text-button {
  border: 1px solid var(--control-rule); padding: 9px 12px; border-radius: 12px;
}
.site-footer .text-button:hover {
  text-decoration: none; background: color-mix(in srgb, currentColor 7%, transparent);
}
@media (max-width: 360px) {
  .football-stage__foreground .button { font-size: 15px; padding-inline: 12px; gap: 8px; }
}

/* A modal has one scrollable body and a return action that never scrolls away. */
html { scrollbar-gutter: stable; }
html:has(#info-dialog[open]) { overflow: hidden; }
#info-dialog { overflow: clip; }
#info-dialog[open] { display: flex; flex-direction: column; }
#dialog-content { min-height: 0; min-width: 0; overflow-y: auto; overscroll-behavior-y: contain; padding: 24px; }
#dialog-content > :last-child { margin-bottom: 0; }
#info-dialog > form[method="dialog"] .button { white-space: normal; }
#info-dialog .button { overflow-wrap: anywhere; }
#profile-form { margin-bottom: 16px; }
.account-deletion { margin-top: 12px; }
#account-status:empty { display: none; }
.profile-stat-grid > div:first-child { grid-column: 1 / -1; display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
.profile-stat-grid > div:first-child dd { margin: 0; }
.profile-stat-grid dd { display: flex; align-items: baseline; flex-wrap: wrap; gap: 0 4px; }
.profile-stat-grid dd small { font-size: 12px; font-weight: 400; white-space: nowrap; }
.history-game > span[aria-hidden] svg { display: block; width: 18px; height: 18px; }
/* Native details keeps keyboard/expanded semantics; CSS draws a consistent chevron. */
:is(.round-recap,.sources,.loading-details,.comparison-details,.profile-history-more,.help-details,.rule-section,details.account-settings) > summary {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  width: 100%; min-height: 48px; list-style: none; white-space: normal;
}
:is(.round-recap,.sources,.loading-details,.comparison-details,.profile-history-more,.help-details,.rule-section,details.account-settings) > summary::-webkit-details-marker { display: none; }
:is(.round-recap,.sources,.loading-details,.comparison-details,.profile-history-more,.help-details,.rule-section,details.account-settings) > summary::marker { content: ''; }
:is(.round-recap,.sources,.loading-details,.comparison-details,.profile-history-more,.help-details,.rule-section,details.account-settings) > summary::after {
  content: ''; flex: none; width: 8px; height: 8px; margin-right: 4px;
  border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(-45deg);
}
:is(.round-recap,.sources,.loading-details,.comparison-details,.profile-history-more,.help-details,.rule-section,details.account-settings)[open] > summary::after { transform: rotate(45deg); }
@media (max-width: 360px) { #dialog-content { padding: 16px; } }

/* A small set of destinations, shared on every screen and inside player panels. */
.site-header { position: sticky; top: 0; z-index: 3; margin: 0; padding: 12px var(--gutter); background: var(--bg); gap: 12px; }
.brand { max-width: none; min-width: 0; }
.brand-mark { font-size: clamp(19px, 4.8vw, 24px); letter-spacing: -.025em; }
.primary-nav { display: none; align-items: center; gap: 4px; }
.menu-toggle { display: grid; place-items: center; width: 44px; height: 44px; padding: 0!important; }
.menu-toggle svg { width: 22px; height: 22px; }
.brand-v { color: var(--pitch); }
.dark .brand-v { color: var(--fresh); }
.menu-list { display: grid; gap: 4px; }
.menu-list button { display: flex; align-items: center; min-height: 48px; border: 0; border-radius: 10px; background: transparent; color: inherit; padding: 12px; text-align: left; font-size: 17px; }
.menu-list button:hover { background: color-mix(in srgb, var(--ink) 6%, transparent); }
.menu-support { display: flex; flex-wrap: wrap; gap: 4px 18px; border-top: 1px solid var(--rule); margin-top: 16px; padding-top: 12px; font-size: 13px; }
.menu-support a { display: inline-flex; align-items: center; min-height: 44px; }
@media(min-width:900px) { .primary-nav { display: flex; } .menu-toggle { display: none; } }
/* Compact mode picker: selecting is distinct from starting a game. */
.home-mode-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 12px; }
.mode-date { font-size: 12px; color: var(--muted); font-variant-numeric: tabular-nums; white-space: nowrap; }
.mode-picker { position: relative; max-width: 100%; }
.mode-picker > summary { display: flex; align-items: center; gap: 6px; min-height: 44px; padding: 8px 12px; margin-left: -12px; border-radius: 12px; list-style: none; cursor: pointer; font-size: 16px; font-weight: 600; }
.mode-picker > summary::-webkit-details-marker { display: none; }
.mode-picker > summary svg { width: 16px; height: 16px; flex: none; }
.mode-picker > summary[aria-disabled="true"] { opacity: .55; cursor: default; }
.mode-picker[open] > summary, .mode-picker > summary:hover { background: color-mix(in srgb, var(--ink) 6%, transparent); }
.mode-menu { position: absolute; top: calc(100% + 6px); left: 0; z-index: 5; width: 260px; max-width: calc(100vw - 2 * var(--gutter)); padding: 6px; border: 1px solid var(--rule); border-radius: 16px; background: var(--chalk); color: var(--night); box-shadow: 0 8px 28px rgb(7 57 45 / .14); }
.mode-option { display: flex; align-items: center; justify-content: space-between; gap: 12px; width: 100%; min-height: 44px; padding: 12px 10px; border: 0; border-radius: 10px; background: transparent; color: inherit; text-align: left; }
.mode-option:hover, .mode-option:focus-visible { background: color-mix(in srgb, var(--ink) 6%, transparent); }
.mode-option strong { display: block; font-size: 15px; font-weight: 600; }
.mode-option small { display: block; margin-top: 3px; font-size: 12px; line-height: 1.4; color: var(--muted); }
.mode-check { flex: none; width: 20px; }
.mode-check svg { width: 20px; height: 20px; }
.home h1 { font-size: clamp(32px,8vw,44px); font-weight: 500; line-height: 1.12; }
/* A brief kickabout alongside the headline; it never delays the Play action. */
.home h1 { position: relative; padding-right: 116px; }
.home h1 em { color: var(--pitch); }
.home-kickabout { position: absolute; width: 112px; height: auto; right: -4px; top: 50%; transform: translateY(-50%); color: var(--pitch); pointer-events: none; }
.kickabout-pitch { opacity: .35; }
.kickabout-trail { opacity: .3; }
.kickabout-travel { transform: translate(140px, 80px); }
.kickabout-shadow { opacity: .16; }
@media(max-width:359px) {
  .home h1 { padding-right: 96px; }
  .home-kickabout { width: 92px; }
}
@media(min-width:400px) {
  .home h1 { padding-right: 136px; }
  .home-kickabout { width: 132px; }
}
@media(min-width:600px) {
  .home h1 { max-width: none; padding-right: 160px; }
  .home-kickabout { width: 152px; }
}
@media(min-width:900px) and (max-width:1099px) {
  .home h1 { padding-right: 136px; }
  .home-kickabout { width: 132px; }
}
@media(prefers-reduced-motion:no-preference) {
  .kickabout-travel { animation: kickabout-pass 4.4s linear both; }
  .kickabout-ball { animation: kickabout-bounce 4.4s linear both; }
  .kickabout-shadow { animation: kickabout-shadow 4.4s linear both; }
  @keyframes kickabout-pass {
    0%, 8% { transform: translate(24px, 80px); }
    45% { transform: translate(86px, 80px); }
    78%, 100% { transform: translate(140px, 80px); }
  }
  @keyframes kickabout-bounce {
    0%, 8% { transform: translateY(0) rotate(-150deg); animation-timing-function: cubic-bezier(.2,.65,.45,1); }
    25% { transform: translateY(-55px) rotate(-80deg); animation-timing-function: cubic-bezier(.55,0,.8,.35); }
    45% { transform: translateY(0) rotate(0); animation-timing-function: cubic-bezier(.2,.65,.45,1); }
    60% { transform: translateY(-36px) rotate(65deg); animation-timing-function: cubic-bezier(.55,0,.8,.35); }
    78% { transform: translateY(0) rotate(130deg); animation-timing-function: ease-out; }
    88% { transform: translateY(-8px) rotate(145deg); animation-timing-function: ease-in; }
    100% { transform: translateY(0) rotate(160deg); }
  }
  @keyframes kickabout-shadow {
    0%, 8%, 45%, 78%, 100% { transform: scaleX(1); opacity: .16; }
    25%, 60% { transform: scaleX(.55); opacity: .07; }
    88% { transform: scaleX(.85); opacity: .12; }
  }
}
.home-copy p { font-size: 16px; line-height: 1.5; }
.home-actions .button { min-height: 50px; font-size: 16px; border-radius: var(--radius-control); }
.home .replay { width: auto; margin: 8px auto 0; display: block; border: 0; font-size: 14px; }
.home .home-reassurance { font-size: 12px; }
.home .stadium { margin-top: 24px; }
.home .practice-note { margin-block: 16px; }
@media(min-width:900px) { .home .stadium { margin: 0; } }
/* The panel title and sibling navigation remain visible when its content scrolls. */
.dialog-heading { flex: none; display: flex; align-items: center; min-height: 56px; padding: 8px 60px 8px 20px; }
.dialog-heading h2 { font-size: 20px; line-height: 1.25; margin: 0; }
.dialog-close { display: grid; place-items: center; width: 44px; height: 44px; padding: 0; border: 0; border-radius: 50%; background: transparent; color: inherit; }
.dialog-close:hover { background: color-mix(in srgb, var(--ink) 8%, transparent); }
.panel-nav { flex: none; display: flex; flex-wrap: wrap; padding: 0 12px 8px; gap: 8px; border-bottom: 1px solid var(--rule); }
.panel-nav[hidden], .dialog-game-status[hidden] { display: none; }
.panel-nav button { flex: 1 1 auto; min-width: max-content; min-height: 44px; padding: 8px 10px; border: 0; border-radius: 9px; background: transparent; color: var(--muted); font-size: 13px; font-weight: 500; }
.panel-nav button[aria-current="page"] { background: color-mix(in srgb, var(--ink) 8%, transparent); color: var(--ink); font-weight: 600; }
.dialog-game-status { flex: none; margin: 0; padding: 6px 20px; border-bottom: 1px solid var(--rule); background: var(--fresh); font-size: 13px; }
#dialog-content { padding-top: 12px; }
#dialog-content > :first-child { margin-top: 0; }
#info-dialog .account-identity { display: grid; gap: 4px; margin-bottom: 16px; }
.account-identity strong { font-size: 19px; }
.account-identity span { font-size: 13px; color: var(--muted); overflow-wrap: anywhere; }
.account-settings { border-top: 1px solid var(--rule); margin-top: 24px; padding-top: 4px; }
#account-status:not(:empty), #friends-status:not(:empty) { padding: 12px; border-radius: 10px; background: color-mix(in srgb, var(--pitch) 9%, var(--chalk)); }
#friends-status:empty { display: none; }
@media(max-width:360px) { .dialog-heading { padding-left: 16px; } .panel-nav { padding-inline: 8px; } .dialog-game-status { padding-inline: 16px; } #share-text { height: calc(9 * 1.4em + 30px); } }
/* Put next steps before reports, and keep numeric units together. */
.result-actions { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr); gap: 10px; margin: 20px 0 24px; }
.result-actions .button { margin: 0; padding: 12px 10px; min-height: 48px; justify-content: center; font-size: 15px; }
.stat-grid dd { display: flex; align-items: baseline; gap: 4px; white-space: nowrap; font-size: clamp(22px,5vw,28px); }
.stat-grid dd small { font-size: 13px; font-weight: 400; }
.profile-stat-grid dd { flex-wrap: nowrap; }
.profile-modes { display: grid; gap: 12px; }
.profile-modes h4 { margin-top: 12px; }
.round-chart { gap: 6px; }
.round-chart li { border: 0; padding: 8px 0; }
.round-chart strong { font-size: 16px; }
.round-chart .round-question { font-size: 12px; }
.round-bar { height: 64px; }
.score-distribution ol { grid-template-columns: repeat(7,minmax(44px,1fr)); gap: 8px; padding: 4px; overflow-x: auto; }
.score-distribution li > span:last-child:not(.sr-only) { white-space: nowrap; }
.legend-you, .you-dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: currentColor; }
.comparison-card { padding: 18px; }
.leaderboard-rows { margin-top: 12px; }
@media(min-width:640px) { .profile-modes { grid-template-columns: 1fr 1fr; } }
@media(max-width:300px) { .result-actions { grid-template-columns: 1fr; } .stat-grid { gap: 8px; } .stat-grid > div { padding: 10px; } }

/* Short score ranges and horizontal bars remain readable on a phone. */
@media(max-width:599px) {
  .social-distribution ol { display: grid; grid-template-columns: minmax(0,1fr); gap: 8px; overflow: visible; }
  .social-distribution li { display: grid; grid-template-columns: 60px minmax(0,1fr) 12px; align-items: center; gap: 8px; text-align: left; }
  .social-distribution .distribution-range { grid-column: 1; grid-row: 1; }
  .social-distribution .distribution-pair { grid-column: 2; grid-row: 1; flex-direction: column; align-items: start; gap: 3px; height: 30px; margin: 0; }
  .social-distribution .distribution-pair i { width: calc(var(--share)*1%); height: 50%; flex: 1; }
  .social-distribution .you-marker { grid-column: 3; grid-row: 1; height: auto; line-height: 1; }
}

/* Shareable friend invites use the existing dialog and control system. */
.friend-invite-card,.friend-share{padding:18px;border:1px solid var(--control-rule);border-radius:var(--radius-control);margin:16px 0}
.friend-invite-card h3,.friend-share h3{margin:0 0 12px}
.friend-share-actions{display:flex;flex-wrap:wrap;gap:10px;margin:16px 0}
#friend-link{font-size:16px;margin:8px 0 12px;width:100%;min-width:0}
.friend-share label,.friend-invite-card label{display:block;font-size:13px;font-weight:600;margin:12px 0 8px}
.friend-invite-card>.text-button{display:block;margin-top:12px}

/* Phone panels reveal detail on request and keep every primary action touch-sized. */
#info-dialog > form[method="dialog"] { top: 6px; right: 6px; }
:is(.comparison-details,.profile-history-more,.help-details,details.rule-section,details.account-settings) {
  border-top: 1px solid var(--rule); margin: 16px 0 0; padding: 0;
}
:is(.comparison-details,.profile-history-more,.help-details,details.rule-section,details.account-settings) > summary {
  cursor: pointer; padding: 12px 0; font-size: 14px; font-weight: 600; line-height: 1.5;
}
details.rule-section p { margin-bottom: 12px; }
details.account-settings[open] > summary { margin-bottom: 12px; }
details.account-settings > .account-deletion { margin-bottom: 12px; }
.profile-history-more { margin-top: 0; }
.profile-history-more .match-history { margin-top: 0; }
.profile-modes { gap: 4px; }
.profile-stat-grid { margin-bottom: 8px; }
.profile-stat-grid > div:first-child { padding: 2px 0; border: 0; }
.profile-stat-grid dd { font-size: 22px; }
.profile-stat-grid > div:not(:first-child) { padding: 10px; }
.standing-summary { display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 16px; }
.standing-summary .standing-rank { font-size: 32px; margin: 4px 0; }
.standing-score { font-size: 14px; font-weight: 600; white-space: nowrap; }
.comparison-card--compact { padding: 12px 14px; margin: 12px 0; }
.comparison-card--compact .stat-heading { margin-bottom: 4px; }
.comparison-card--compact .stat-heading h2 { font-size: 15px; }
.comparison-card--compact > p { margin: 4px 0 0; }
#info-dialog .leaderboard-meta,#info-dialog .leaderboard-finality { margin-bottom: 12px; }
#info-dialog .leaderboard-finality,#info-dialog .leaderboard-eligibility { font-size: 13px; }
#info-dialog .leaderboard-page-count { margin-bottom: 10px; font-size: 13px; }
.leaderboard-rows li { padding: 10px 4px; gap: 8px; }
.leaderboard-pages { gap: 8px; }
.home .practice-entry { display: block; width: fit-content; max-width: 100%; min-height: 44px; margin: 4px auto 0; text-align: center; white-space: normal; }
/* A synthetic scoring example, separate from the server-owned game score. */
.scoring-guide { min-width: 0; margin: 24px 0; padding-top: 22px; border-top: 1px solid var(--rule); }
.scoring-guide h2 { font-size: 20px; margin-bottom: 10px; }
.scoring-guide .scoring-intro,.scoring-guide .scoring-explanation { font-size: 14px; margin: 10px 0 16px; }
.scoring-guide .scoring-example-note { font-size: 12px; line-height: 1.5; margin: 10px 0 14px; color: var(--muted); }
.scoring-examples { display: grid; gap: 16px; list-style: none; padding: 0; margin: 16px 0 0; }
.scoring-answer-label { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 4px 12px; margin-bottom: 6px; font-size: 13px; }
.scoring-answer-label > strong { white-space: nowrap; font-variant-numeric: tabular-nums; }
.scoring-answer-track { height: 9px; background: color-mix(in srgb,var(--ink) 9%,transparent); }
.scoring-answer-track > span { display: block; height: 100%; background: var(--pitch); }
.scoring-scale { display: flex; justify-content: space-between; margin-top: 7px; color: var(--muted); font-size: 12px; }
.scoring-samples { padding: 0; border: 0; min-width: 0; margin: 18px 0; }
.scoring-samples legend { font-size: 14px; font-weight: 600; margin-bottom: 8px; }
.scoring-samples > div { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 8px; }
.scoring-samples button { min-width: 0; min-height: 44px; padding: 8px; border: 1px solid var(--control-rule); border-radius: var(--radius-control); color: inherit; background: transparent; }
.scoring-samples button[aria-pressed="true"] { color: var(--chalk); background: var(--night); font-weight: 600; }
.scoring-influence-labels { display: flex; flex-wrap: wrap; gap: 6px 18px; margin: 18px 0 8px; font-size: 12px; }
.scoring-influence-labels > span { display: flex; align-items: center; gap: 6px; }
.scoring-influence-labels i { display: inline-block; width: 10px; height: 10px; flex: none; }
.scoring-starting-swatch,.scoring-influence-track > span:first-child { background: var(--night); }
.scoring-choices-swatch,.scoring-influence-track > span:last-child { background: var(--pitch); }
.scoring-influence-track { display: flex; height: 16px; }
.scoring-calculation { border-top: 1px solid var(--rule); margin-top: 18px; font-size: 14px; }
.scoring-calculation > summary { min-height: 44px; padding: 12px 0; font-weight: 600; cursor: pointer; }
.scoring-calculation dl { margin: 8px 0 16px; }
.scoring-calculation dl > div { display: grid; grid-template-columns: 18px minmax(0,1fr); gap: 10px; margin: 8px 0; }
.scoring-calculation dt { font-weight: 600; }.scoring-calculation dd { margin: 0; }
.scoring-calculation p { margin: 12px 0; }.scoring-formula { display: block; overflow-wrap: anywhere; font-variant-numeric: tabular-nums; }
.home > .scoring-guide { margin: 28px 0 0; }
/* Desktop hero and scoring are separate rows; phone layouts keep their flow. */
@media (min-width: 900px) {
  .home h1 {
    width: fit-content;
    max-width: 100%;
    padding-right: 124px;
    font-size: clamp(48px, 4.4vw, 56px);
  }
  .home-kickabout { width: 120px; right: 0; }
  .home > .scoring-guide {
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.08fr);
    grid-template-rows: auto auto auto 1fr;
    gap: 12px clamp(40px, 5vw, 64px);
    align-items: start;
    margin-top: 40px;
    padding-top: 28px;
  }
  .home > .scoring-guide > * { grid-column: 1; min-width: 0; margin: 0; }
  .home > .scoring-guide > [data-scoring-example] { grid-column: 2; grid-row: 1 / span 4; }
  .home > .scoring-guide > [data-scoring-example] > .scoring-example-note:first-child { margin-top: 0; }
  .home > .scoring-guide > .text-button { justify-self: start; }
}
@media (max-height: 500px) {
  .dialog-heading { min-height: 52px; padding-block: 6px; }
  .panel-nav { padding-bottom: 4px; }
  #dialog-content { padding-top: 8px; }
}

/* Score tiers are labelled point bands; server ranks and ties stay authoritative. */
[data-score-tier="common"] { --tier-ink: #526055; --tier-wash: #e6e9df; }
[data-score-tier="uncommon"] { --tier-ink: #2d6349; --tier-wash: #dfebd6; }
[data-score-tier="rare"] { --tier-ink: #235b8d; --tier-wash: #e0ebf6; }
[data-score-tier="epic"] { --tier-ink: #6b408c; --tier-wash: #eee3f3; }
[data-score-tier="legendary"] { --tier-ink: #795415; --tier-wash: #f6e6b4; }
.score-tier { display: inline-flex; position: relative; isolation: isolate; overflow: hidden; align-items: center; gap: 5px; width: fit-content; max-width: 100%; padding: 3px 7px; border: 1px solid color-mix(in srgb,var(--tier-ink) 28%,transparent); border-radius: 5px; color: var(--tier-ink); background: var(--tier-wash); font-size: 12px; font-weight: 600; line-height: 1.5; white-space: nowrap; }
.score-tier > i { width: 10px; height: 10px; flex: none; background: currentColor; clip-path: polygon(50% 0,100% 50%,50% 100%,0 50%); }
.score-tier[data-score-tier="legendary"] > i { clip-path: polygon(50% 0,62% 35%,100% 50%,62% 65%,50% 100%,38% 65%,0 50%,38% 35%); }
.leaderboard-tier-guide { margin: 14px 0; border-block: 1px solid var(--rule); }
.leaderboard-tier-guide > summary { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 44px; padding: 10px 0; cursor: pointer; font-size: 13px; font-weight: 600; }
.leaderboard-tier-guide > summary::after { content: '+'; font-size: 18px; }
.leaderboard-tier-guide[open] > summary::after { content: '−'; }
.leaderboard-tier-guide .tier-swatches { display: flex; gap: 5px; margin-left: auto; }
.tier-swatches > i { width: 12px; height: 12px; border-radius: 3px; background: var(--tier-ink); }
.leaderboard-tier-guide > p { margin: 0 0 12px; font-size: 12px; line-height: 1.5; }
.tier-key { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 8px; list-style: none; margin: 0 0 12px; padding: 0; }
.tier-key > li { display: flex; flex-direction: column; gap: 5px; min-width: 0; padding: 8px; border-left: 3px solid var(--tier-ink); background: var(--tier-wash); border-radius: 3px; }
.tier-key > li > span:last-child { font-size: 12px; color: var(--tier-ink); }
.tier-key .score-tier { border: 0; padding: 0; }
.leaderboard-rows > li { grid-template-columns: minmax(34px,max-content) minmax(0,1fr) auto; min-height: 48px; padding: 10px 8px; margin: 0; }
.leaderboard-rows > li.is-you { background: var(--fresh); color: var(--night); outline: 1px solid var(--pitch); outline-offset: -1px; }
.leaderboard-rank { font-variant-numeric: tabular-nums; }
.leaderboard-player { min-width: 0; overflow-wrap: anywhere; }
.leaderboard-score { display: flex; flex-direction: column; align-items: end; gap: 8px; min-width: 62px; font-variant-numeric: tabular-nums; }
.leaderboard-score > strong { white-space: nowrap; font-size: 17px; }
@media(prefers-reduced-motion:no-preference) {
  @keyframes leaderboard-score-reveal { from { transform: scaleX(0); } to { transform: scaleX(1); } }
  @keyframes leaderboard-tier-shine { from { transform: translateX(-80%); } to { transform: translateX(80%); } }
}

/* Teaching examples use the shared point-colour progression. */
.scoring-examples .scoring-answer-label > strong { color: var(--tier-ink,var(--pitch)); }
.scoring-answer-track { position: relative; overflow: hidden; border-radius: 3px; }
.scoring-answer-track > span { position: relative; overflow: hidden; background: var(--tier-ink,var(--pitch)); transform-origin: left; }
.scoring-guide > .leaderboard-tier-guide { margin-top: 18px; }
@media (min-width: 900px) {
  .home > .scoring-guide > .leaderboard-tier-guide { grid-column: 1 / -1; margin-top: 8px; }
  .home .tier-key { grid-template-columns: repeat(5,minmax(0,1fr)); }
}
@media(prefers-reduced-motion:no-preference) {
  .scoring-answer-track > span { animation: leaderboard-score-reveal 700ms var(--motion-ease) both; }
  .scoring-examples > li:is([data-score-tier="epic"],[data-score-tier="legendary"]) .scoring-answer-track > span::after {
    content: ''; position: absolute; inset: -35% -55%; pointer-events: none;
    background: linear-gradient(110deg,transparent 35%,#fff9 50%,transparent 65%);
    transform: translateX(-80%); animation: leaderboard-tier-shine 1100ms ease-out 700ms both;
  }
}

/* Practice offers new questions and an exact replay before sharing. */
.result-actions > .button:first-child { grid-column: 1 / -1; min-height: 52px; font-size: 16px; }

.guest-signup{margin:1.5rem 0;padding:1.2rem;border:1px solid currentColor;border-radius:12px;text-align:center}
.guest-signup h2{font-size:1.2rem;line-height:1.3;margin:0 0 .6rem}
.guest-signup p{margin:0 0 1rem}
.guest-signup .button{width:100%;margin-top:.5rem;white-space:normal}

/* Keep the actual ranking ahead of score explanations, including on phones. */
.leaderboard-columns { display: grid; grid-template-columns: minmax(34px,max-content) minmax(0,1fr) auto; gap: 8px; padding: 8px 8px 0; color: var(--muted); font-size: 12px; }
.leaderboard-columns > :last-child { min-width: 62px; text-align: right; }
.leaderboard-your-position { margin: 0 0 10px; font-size: 15px; }
.leaderboard-your-position strong { white-space: nowrap; }
.leaderboard-join { margin: 18px 0; padding: 16px; border: 1px solid var(--control-rule); border-radius: var(--radius-panel); }
.leaderboard-join h3 { margin: 0 0 8px; font-size: 18px; }
.leaderboard-join > p { font-size: 14px; }
.leaderboard-join .small { font-size: 12px; }
.leaderboard-join .button { width: 100%; }

/* Direct access to a simple rank, name and score list. */
.home-leaderboard { width: 100%; margin-top: 10px; }
.result-leaderboard { width: 100%; margin: 12px 0; }
.leaderboard-comparison { margin: 14px 0; border-block: 1px solid var(--rule); }
.leaderboard-comparison > summary { min-height: 44px; padding: 12px 0; cursor: pointer; font-weight: 600; }

/* One spacing rhythm across play, results and player panels. */
.site-header { flex-wrap: wrap; row-gap: 4px; }
.primary-nav { display: flex; justify-content: space-between; gap: 4px; }
.menu-toggle, .game-exit { display: none; }
@media (max-width: 899px) {
  .primary-nav { flex-basis: 100%; }
  .site-header .primary-nav .text-button { padding: 10px 0; font-size: 13px; }
}
@media (max-width: 360px) {
  .primary-nav { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 4px 16px; }
  .site-header .primary-nav .text-button { text-align: left; }
}
.home-actions { margin-top: 32px; }
.home > .home-leaderboard { margin-top: 16px; }
.home > .reset { margin-top: 40px; }
.home > .site-footer { margin-top: 24px; }
.rules-page { display: grid; gap: 32px; }
.rules-page .play-rules { margin: 0 0 16px; padding-left: 20px; }
.rules-page .play-rules li { margin-bottom: 12px; padding-left: 4px; }
.rules-links { display: grid; justify-items: start; gap: 8px; }
.leaderboard-tools { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 12px 24px; margin-top: 24px; }
.scoring-page .daily-rules { margin-top: 40px; }
.scoring-page .daily-rules p { margin-top: 16px; }
.rules-page .quick-rules { margin: 0; padding-left: 22px; }
.rules-page .quick-rules li { padding-left: 4px; margin: 0 0 14px; }
.rules-page .quick-rules li:last-child { margin-bottom: 0; }
.rules-page .rule-section { margin: 0; padding: 0; border: 0; }
.rules-page h3 { margin: 0 0 12px; font-size: 18px; }
.rules-page p { margin: 0 0 12px; }
.rules-page p:last-child { margin-bottom: 0; }
.rules-page > .text-button { justify-self: start; white-space: normal; text-align: left; }
.rules-page .guide-example { margin: 8px 0 0; }
section.account-settings { display: grid; gap: 20px; padding: 0; margin: 28px 0 36px; border: 0; }
section.account-settings > * { margin-block: 0; }
section.account-settings #profile-form { margin: 0; }
section.account-settings .button { margin: 0; }
#profile-help { margin: 12px 0 20px; }
.profile-modes { gap: 24px; }
.profile-history { margin-top: 16px; }
.friend-list { margin-block: 16px 28px; }
.friends-actions { gap: 12px; margin-block: 20px; }
.leaderboard-columns { margin-top: 24px; }
.leaderboard-pages { margin-top: 20px; }
.leaderboard-eligibility { margin-top: 24px; }
.leaderboard-comparison { margin-top: 28px; }
.guest-signup { padding: 24px 0; border: 0; border-block: 1px solid var(--rule); border-radius: 0; text-align: left; }
.guest-signup p { margin: 16px 0 24px; }
.guest-signup .button { margin: 12px 0 0; }
section.round-recap { margin-top: 32px; padding-top: 24px; }
.round-recap h2 { margin: 0 0 24px; font-size: 20px; }
.round-recap > ol > li { padding-block: 24px; }
.scoring-calculation > h3 { margin: 24px 0 16px; }
section.leaderboard-tier-guide > h3 { display: flex; align-items: center; gap: 16px; }
.scoring-page .scoring-guide { border: 0; padding: 0; margin-top: 32px; }
.scoring-page .scoring-explanation { margin-block: 20px; }
.scoring-page .scoring-calculation { margin-top: 32px; }