/* Full-width paper, a thin transparent pixel runner. */
.picks-page { max-width:none; }
.picks-course-play { scroll-margin-top:92px; }
.picks-course-play .picks-course-poster { margin:12px 0; }
.picks-course-play .picks-course-poster img { width:100%; height:auto; max-width:100%; margin:0; }
.course-runner { width:100%; margin:4px 0 18px; color:var(--text); }
.runner-heading { display:flex; align-items:center; gap:8px; min-height:44px; }
.runner-heading h3 { margin:0; font:700 12px/1.3 system-ui,sans-serif; white-space:nowrap; }
.runner-scores { margin-left:auto; color:var(--muted); font:10px/1.4 ui-monospace,monospace; white-space:nowrap; font-variant-numeric:tabular-nums; }
.runner-scores strong { color:var(--text); font-weight:400; }
.runner-controls { display:flex; align-items:center; gap:2px; }
.runner-controls button { min-height:44px; min-width:44px; padding:4px 7px; border:0; border-radius:0; background:transparent; color:inherit; font:12px/1 system-ui,sans-serif; cursor:pointer; touch-action:manipulation; }
.runner-controls button:hover { text-decoration:underline; }
.runner-controls button:disabled { opacity:.3; cursor:default; }
.runner-controls button:focus-visible { outline:1px dashed currentColor; outline-offset:1px; }
.runner-board canvas:focus-visible { outline:0; }
.course-runner:focus-within .runner-scores { text-decoration:underline dotted; text-underline-offset:3px; }
.runner-board { position:relative; }
.runner-board canvas { display:block; width:100%; height:auto; cursor:pointer; touch-action:manipulation; image-rendering:pixelated; }
.runner-overlay { position:absolute; inset:0 0 10px 30px; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:5px; pointer-events:none; }
.runner-overlay[hidden] { display:none; }
.runner-overlay strong { color:inherit; font:700 14px/1.2 ui-monospace,monospace; }
.runner-overlay span { color:var(--muted); font:10px/1.4 system-ui,sans-serif; }
.runner-help,.course-runner .sr-only { position:absolute; width:1px; height:1px; padding:0; overflow:hidden; clip-path:inset(50%); white-space:nowrap; }
.runner-learning { margin:4px 0 0; min-height:16px; color:var(--muted); font:11px/1.45 system-ui,sans-serif; }
@media(max-width:600px) {
 .picks-course-play { scroll-margin-top:180px; }
 .runner-heading { gap:4px; }
 .runner-heading h3 { font-size:11px; }
 .runner-scores { font-size:9px; }
 .runner-overlay { inset:0 0 8px 25px; }
}

/* Local v2: one progress counter and a small combo line, no extra panel. */
.runner-progress { display:flex; flex-direction:column; gap:2px; color:var(--muted); font:11px/1.25 system-ui,sans-serif; white-space:nowrap; }
.runner-progress strong { color:var(--text); }
.runner-progress [data-runner-combo] { color:var(--accent); font-size:10px; }
.runner-progress [hidden] { display:none; }
.runner-learning { min-height:34px; font-size:12px; }
.runner-overlay strong { max-width:100%; text-align:center; }

/* Keep the local style picker from covering the playable strip. */
.theme-switch { display:none; }

/* Local v3: small goals and three effects stay on the paper, without a panel. */
.runner-status { display:flex; align-items:center; flex-wrap:wrap; gap:5px 16px; margin-top:5px; font:11px/1.5 system-ui,sans-serif; }
.runner-goal { display:flex; align-items:center; flex-wrap:wrap; gap:6px; min-width:0; }
.runner-goal strong { font:inherit; font-variant-numeric:tabular-nums; }
.runner-goal-track { display:block; width:42px; height:3px; background:var(--border,#d6cec1); }
.runner-goal-track span { display:block; width:0; height:100%; background:var(--brand,#a13720); }
.runner-effects { display:flex; flex-wrap:wrap; gap:5px 10px; margin-left:auto; color:var(--muted); font-variant-numeric:tabular-nums; }
.runner-effects [data-active="true"] { font-weight:700; color:var(--text); text-decoration:underline; text-underline-offset:3px; }
.runner-effects [data-runner-effect="shield"][data-active="true"] { color:#25664f; }
.runner-effects [data-runner-effect="magnet"][data-active="true"] { color:#7543a0; }
.runner-effects [data-runner-effect="radar"][data-active="true"] { color:#916215; }
.runner-learning { min-height:35px; }
.course-runner .runner-learning { color:var(--text); font-size:13px; line-height:1.6; min-height:42px; }
.runner-progress { position:relative; min-height:44px; justify-content:center; }
.runner-card-toggle { min-height:44px; padding:0; border:0; border-radius:0; background:none; color:inherit; cursor:pointer; font:inherit; white-space:nowrap; text-align:left; }
.runner-card-toggle:focus-visible { outline:1px dashed currentColor; }
.runner-progress [data-runner-combo] { position:absolute; left:0; bottom:0; pointer-events:none; }
.runner-recap[hidden] { display:none; }
.runner-recap { margin-top:8px; padding:8px 0; border-top:1px solid var(--border,#d6cec1); }
.course-runner .runner-recap p { margin:0 0 6px; font:12px/1.5 system-ui,sans-serif; color:var(--muted); }
.runner-recap ul { margin:0; padding:0; max-height:220px; overflow:auto; list-style:none; }
.runner-recap li { margin:0 0 8px; font:13px/1.6 system-ui,sans-serif; }
.runner-recap li strong { display:block; }
.runner-feedback { position:absolute; left:58px; right:0; top:0; margin:0; padding:1px 4px; color:var(--text); font:700 12px/1.4 system-ui,sans-serif; pointer-events:none; text-align:center; }
.runner-feedback[hidden] { display:none; }
.runner-feedback[data-effect="shield"] { color:#25664f; }
.runner-feedback[data-effect="magnet"] { color:#7543a0; }
.runner-feedback[data-effect="radar"],.runner-feedback[data-effect="goal"] { color:#916215; }
.runner-effects [data-active="true"] { padding:0 4px; border:1px solid currentColor; text-decoration:none; }
.runner-effects [data-runner-effect="shield"][data-active="true"] { background:#25664f16; }
.runner-effects [data-runner-effect="magnet"][data-active="true"] { background:#7543a016; }
.runner-effects [data-runner-effect="radar"][data-active="true"] { background:#91621516; }
.runner-effects .is-fresh { animation:runner-activate .65s ease-out 1; }
@keyframes runner-activate { 0% { outline:2px solid currentColor; outline-offset:3px; } 100% { outline:0 solid transparent; outline-offset:0; } }
@media(prefers-reduced-motion:reduce) { .runner-effects .is-fresh { animation:none; } }
@media(max-width:600px) {
 .runner-status { gap:3px; }
 .runner-goal { flex-basis:100%; font-size:11px; }
 .runner-effects { margin-left:0; font-size:10px; }
 .runner-heading { flex-wrap:wrap; }
 .runner-scores { white-space:normal; text-align:right; }
 .runner-overlay strong { font-size:12px; }
 .runner-feedback { font-size:11px; left:42px; line-height:1.25; }
}