/* Themed scrollbars — page and every in-game scroll area */
    * { scrollbar-width: thin; scrollbar-color: rgba(var(--accent-rgb), 0.40) rgba(6,18,13,0.9); }
    ::-webkit-scrollbar { width: 10px; height: 10px; }
    ::-webkit-scrollbar-track { background: rgba(6,18,13,0.9); border-radius: 999px; }
    ::-webkit-scrollbar-thumb { background: rgba(var(--accent-rgb), 0.38); border-radius: 999px; border: 2px solid rgba(6,18,13,0.9); }
    ::-webkit-scrollbar-thumb:hover { background: rgba(var(--accent-rgb), 0.60); }
    ::-webkit-scrollbar-corner { background: transparent; }
    .hero-nav { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
    main { padding: 14px clamp(12px, 3vw, 30px) 38px; max-width: 1400px; margin: 0 auto; display: grid; gap: 14px; }
    .grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; align-items: start; }
    .tester-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; align-items: start; }
    .metric-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin: 12px 0; }
    .panel { background: var(--panel); border: 1px solid var(--line); border-radius: var(--r-xl); padding: 16px; }
    .panel.feature { border-color: var(--line-strong); background: linear-gradient(160deg, rgba(var(--surface-2-rgb), 0.98), rgba(var(--surface-rgb), 0.97)); }
    button { display: inline-flex; align-items: center; justify-content: center; padding: 9px 16px; border-radius: var(--r-md); border: 1px solid transparent; font: inherit; font-weight: 700; font-size: 13px; cursor: pointer; transition: filter 0.12s, transform 0.10s; white-space: nowrap; }
    button:not(.nav-button):not(.mode-card):not(.roster-row):not(.wc-team-row):not(.career-nav-item):not(.career-team-card):not(.modal-close-btn):not(.selection-seg-btn):not(.selection-recent-chip):not(.wc-scope-btn) { background: var(--accent); color: #021a0e; box-shadow: 0 3px 14px rgba(var(--accent-rgb), 0.16); }
    button:not(.nav-button):not(.mode-card):not(.roster-row):not(.wc-team-row):not(.career-nav-item):not(.career-team-card):not(.modal-close-btn):not(.selection-seg-btn):not(.selection-recent-chip):not(.wc-scope-btn):hover { filter: brightness(1.08); transform: translateY(-1px); }
    button:not(.nav-button):not(.mode-card):not(.roster-row):not(.wc-team-row):not(.career-nav-item):not(.career-team-card):not(.modal-close-btn):not(.selection-seg-btn):not(.selection-recent-chip):not(.wc-scope-btn):active { transform: translateY(0); filter: brightness(0.96); }
    .controls { display: grid; grid-template-columns: repeat(auto-fit, minmax(128px, 1fr)); gap: 10px; align-items: end; }
    label { display: flex; flex-direction: column; gap: 4px; color: var(--muted); font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; }
    input, select { width: 100%; padding: 9px 11px; border-radius: var(--r-md); border: 1px solid var(--line); background: rgba(3,8,5,0.85); color: var(--text); font: inherit; font-size: 13px; outline: none; transition: border-color 0.12s, box-shadow 0.12s; }
    select { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%23709c84' stroke-width='1.5' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 10px center; padding-right: 28px; appearance: none; -webkit-appearance: none; }
    input:focus, select:focus { border-color: var(--accent); box-shadow: 0 0 0 3px rgba(var(--accent-rgb), 0.12); }
    /* The open <option> list is OS-drawn; Windows Chrome/Edge ignore color-scheme
       on the closed control but DO honour option colours, so theme them here to
       stop the popup falling back to a white/blue system list. */
    select option { background-color: var(--panel); color: var(--text); }
    select option:checked { background-color: var(--accent-mid); color: var(--text); }
    input.order { width: min(100%, 640px); }
    /* Match settings dialog sections */
    .settings-section { margin-top: 16px; }
    .settings-section:first-of-type { margin-top: 4px; }
    .settings-heading { margin: 0 0 8px; color: var(--muted); font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.12em; }
    .format-picker { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
    .format-card { display: flex; flex-direction: column; align-items: flex-start; gap: 3px; padding: 12px 14px; border-radius: var(--r-lg); border: 1px solid var(--line); background: rgba(var(--surface-rgb), 0.80) !important; color: var(--text) !important; box-shadow: none !important; text-align: left; }
    .format-card span { font-size: 11px; font-weight: 600; color: var(--muted); white-space: normal; }
    .format-card b { font-size: 15px; letter-spacing: 0.04em; }
    .format-card:hover { border-color: var(--line-strong); transform: none !important; filter: none !important; }
    .format-card.active { border-color: var(--accent); background: var(--accent-dim) !important; box-shadow: 0 0 0 3px var(--accent-dim) !important; }
    .format-card.active b { color: var(--accent); }
    .format-hint { margin: 8px 2px 0; font-size: 12px; line-height: 1.5; }
    /* Stadium picker - a themed popover replacing the unstylable native select */
    .venue-picker { position: relative; }
    .venue-picker-toggle { width: 100%; display: flex; align-items: center; gap: 10px; padding: 10px 14px; border-radius: var(--r-lg); border: 1px solid var(--line); background: rgba(3,8,5,0.85) !important; color: var(--text) !important; box-shadow: none !important; text-align: left; }
    .venue-picker-toggle:hover { border-color: var(--line-strong); transform: none !important; filter: none !important; }
    .venue-picker-toggle[aria-expanded="true"] { border-color: var(--accent); box-shadow: 0 0 0 3px rgba(var(--accent-rgb), 0.12) !important; }
    .venue-toggle-main { display: flex; flex-direction: column; gap: 2px; flex: 1; min-width: 0; }
    .venue-toggle-main b { font-size: 14px; letter-spacing: 0.01em; }
    .venue-toggle-main small { color: var(--muted); font-weight: 600; font-size: 11px; }
    .venue-caret { color: var(--muted); font-size: 11px; transition: transform 0.12s; }
    .venue-picker-toggle[aria-expanded="true"] .venue-caret { transform: rotate(180deg); }
    /* Fixed-positioned (coords set by toggleVenueMenu) so it can spill past the
       dialog's overflow clip and run down toward the screen edge. */
    .venue-menu { position: fixed; z-index: 60; background: rgba(var(--surface-2-rgb), 0.99); border: 1px solid var(--line-strong); border-radius: var(--r-lg); box-shadow: 0 18px 50px rgba(0,0,0,0.55); padding: 8px; }
    .venue-search { margin-bottom: 8px; }
    .venue-menu-list { max-height: 280px; overflow: auto; display: flex; flex-direction: column; gap: 2px; padding-right: 4px; }
    .venue-group-label { padding: 8px 8px 3px; color: var(--accent); font-size: 10px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.12em; }
    .venue-option { display: flex; align-items: center; gap: 8px; width: 100%; padding: 7px 9px; border-radius: var(--r-md); border: 1px solid transparent; background: transparent !important; color: var(--text) !important; box-shadow: none !important; font-weight: 600; font-size: 13px; text-align: left; }
    .venue-option:hover { background: rgba(var(--accent-rgb), 0.08) !important; border-color: rgba(var(--accent-rgb), 0.25); transform: none !important; filter: none !important; }
    .venue-option.selected { border-color: var(--accent); background: var(--accent-dim) !important; }
    .venue-opt-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    .venue-opt-city { color: var(--muted); font-size: 11px; font-weight: 600; white-space: nowrap; }
    .venue-pitch-badge { padding: 2px 8px; border-radius: 999px; font-size: 10px; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase; border: 1px solid; white-space: nowrap; }
    .pitch-flat { color: #e8c66a; border-color: rgba(232,198,106,0.45); background: rgba(232,198,106,0.10); }
    .pitch-green { color: #69d98c; border-color: rgba(105,217,140,0.45); background: rgba(105,217,140,0.10); }
    .pitch-dry_turner { color: #e09a5c; border-color: rgba(224,154,92,0.45); background: rgba(224,154,92,0.10); }
    .pitch-bouncy { color: #6db7e8; border-color: rgba(109,183,232,0.45); background: rgba(109,183,232,0.10); }
    .pitch-slow { color: #b9a7e0; border-color: rgba(185,167,224,0.45); background: rgba(185,167,224,0.10); }
    .settings-actions { margin-top: 18px; display: flex; justify-content: flex-end; }
    .declare-btn { background: #c9a227 !important; color: #1a1404 !important; box-shadow: 0 3px 14px rgba(201,162,39,0.20) !important; }
    @media (max-width: 560px) { .format-picker { grid-template-columns: 1fr; } }
    .nav-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 12px; margin-top: 20px; }
    .nav-button { background: rgba(var(--surface-rgb), 0.80); border: 1px solid var(--line); border-radius: var(--r-lg); padding: 14px 16px; color: var(--text); font: inherit; font-size: 13px; font-weight: 600; cursor: pointer; text-align: left; transition: border-color 0.12s, background 0.12s; box-shadow: none; }
    /* App confirm/alert dialog (appConfirm/appAlert): panel-styled shell with
       compact right-aligned actions, matching the career-exit dialog rather
       than the raw retro-dialog fallback. */
    /* Double class beats .retro-dialog's own width/background (it loads later). */
    .retro-dialog.app-dialog { width: min(440px, 92vw); border-radius: var(--r-lg); background: var(--panel); border: 1px solid var(--line-strong); padding: 20px; }
    /* flex-wrap so a row of buttons too wide for the dialog wraps cleanly instead
       of overflowing the (justify-end) primary button off the left edge. */
    .app-dialog .nav-row { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 10px; margin-top: 4px; }
    .app-dialog .nav-row button { flex: 0 0 auto; padding: 10px 18px; border-radius: var(--r-md); font-size: 13px; text-align: center; }
    /* The confirm button is focused on open; show the theme ring, not the UA's. */
    .app-dialog button:focus-visible { outline: 2px solid rgba(var(--accent-rgb), 0.55); outline-offset: 2px; }
    .nav-button:hover { border-color: var(--line-strong); background: rgba(var(--surface-2-rgb), 0.90); filter: none; transform: none; }
    .nav-button.active { border-color: var(--accent); background: var(--accent-dim); color: var(--accent); }