/* IOP themes: dark forest green / warm white and orange. Field artwork keeps its competition colors. */
:root,[data-theme="dark"]{color-scheme:dark;--page:#102524;--surface:#193b37;--soft:#214940;--control:#244d43;--ink:#edf6ef;--muted:#b0cabe;--border:#41685a;--accent:#81c39c;--primary:#2d7658;--primary-end:#235f49;--primary-ink:#fff;--head:#152f30;--head-ink:#fff;--head-muted:#bad5c9;--score:#ffe3a1;--notice:#354333;--notice-ink:#f0dfb1;--notice-border:#69714a;--hover:#315e4f;--shadow:#07171350;--focus:#ffc363;--danger:#ffb0a1;--success:#9bdfb3}
[data-theme="light"]{color-scheme:light;--page:#fff8f0;--surface:#fffdf9;--soft:#fff0e1;--control:#fff;--ink:#302a25;--muted:#786252;--border:#edd7c3;--accent:#be4700;--primary:#ff6006;--primary-end:#e84900;--primary-ink:#fff;--head:#fff8f0;--head-ink:#302a25;--head-muted:#786252;--score:#bc4300;--notice:#fff0d8;--notice-ink:#77501e;--notice-border:#efcf9a;--hover:#ffe8d2;--shadow:#c16b2220;--focus:#ba4200;--danger:#ad3026;--success:#27704b}
html,body{background:var(--page);color:var(--ink)}
body>header{background:var(--head);color:var(--head-ink);border-bottom:1px solid var(--border);gap:16px}
header small,header .hud-stat>span,.hud-detail #hudPhase{color:var(--head-muted)}
header .game-hud{color:var(--head-ink);margin-left:auto}.hud-total strong{color:var(--score)}
header .theme-toggle{flex:0 0 44px;width:44px;height:44px;display:grid;place-items:center;border-radius:50%;padding:0;font-size:25px;line-height:1;border:1px solid var(--accent);background:var(--control);box-shadow:0 3px 10px var(--shadow);touch-action:manipulation}
.theme-toggle:hover{background:var(--hover)}.theme-toggle .theme-icon{pointer-events:none;filter:drop-shadow(0 1px 1px #0005)}
.panel,dialog,#mqDialog{background:var(--surface);color:var(--ink);border-color:var(--border)}
button,select,input,textarea,.signal-test textarea{background:var(--control);color:var(--ink);border-color:var(--border)}
button:hover{background:var(--hover)}button.primary{background:linear-gradient(120deg,var(--primary),var(--primary-end));border-color:var(--primary-end);color:var(--primary-ink);box-shadow:0 3px 9px var(--shadow)}button.primary:hover{filter:brightness(1.08)}
button:focus-visible,select:focus-visible,input:focus-visible,a:focus-visible,.card:focus-visible{outline:3px solid var(--focus);outline-offset:3px}
a,.demo-link,.classroom-tip a{color:var(--accent)}small,.muted,#setupHint,#modeNote,.game-controls .controls-title,.preview-idle,.mq-telemetry{color:var(--muted)}
.card,.stat,.row,.round-key,.progress-chip,.shift-toggle,.setup-preview-bar,.track-quickbar,.race-operation-row,.live-controls,#message,#mqDialog .mq-hint,.bonus-draw-grid{background:var(--soft);color:var(--ink);border-color:var(--border)}
.card.active{background:var(--hover);border-color:var(--accent)}.card:hover{border-color:var(--accent)}.progress-chip.done{background:var(--round-color);color:#fff;border-color:var(--round-color)}
.preview-idle,.game-controls,.signal-test,.log div,#mqDialog th,#mqDialog td{border-color:var(--border)}.quick-divider{background:var(--border)}.race-operation-row #raceQuickbar{border-left-color:var(--border)}
.notice,.classroom-tip,.queue,.s-route-panel,.mq-pending,#routeChoicePanel{background:var(--notice);color:var(--notice-ink);border-color:var(--notice-border)}#routeChoiceSwitch{background:var(--primary-end);color:#fff}
.draw-slot{background:var(--soft);border-color:var(--accent);color:var(--ink)}.draw-slot.jumping{background:var(--hover);border-color:var(--focus)}.bonus-row{color:var(--muted)}.bonus-row.selected{background:var(--hover);color:var(--danger)}
.red,#message.red{color:var(--danger)}.green,#message.green{color:var(--success)}#drawBonus{background:var(--notice);color:var(--notice-ink);border-color:var(--notice-border)}#drawBonus:hover{background:var(--hover)}
input[type=range],input[type=checkbox]{accent-color:var(--accent)}.game-controls,.management-bar,.setup-drawbar{scrollbar-color:var(--border) transparent}dialog::backdrop,#mqDialog::backdrop{background:#081d1bc2}
[data-theme="light"] header h1{border-left:4px solid #ff6508;padding-left:10px}
@media(max-width:650px){body>header{gap:8px}header .game-hud{gap:8px}.hud-stat{min-width:69px}.hud-stat strong{font-size:21px}header .theme-toggle{flex-basis:38px;width:38px;height:38px;font-size:23px}header h1{max-width:115px}}
@media(max-width:380px){body>header{padding-left:7px;padding-right:7px;gap:5px}header h1{font-size:12px;max-width:92px}.hud-stat{min-width:63px}.hud-stat strong{font-size:19px}header .game-hud{gap:5px}header .theme-toggle{flex-basis:34px;width:34px;height:34px;font-size:21px}}
/* Music controls share the existing palette without changing the field's geometry. */
.header-actions{display:flex;gap:8px;align-items:center;flex:0 0 auto}.header-actions>button{flex:0 0 44px;width:44px;height:44px;display:grid;place-items:center;padding:0;border-radius:50%;font-size:25px;line-height:1;border-color:var(--accent);background:var(--control);color:var(--ink)}.header-actions>button:hover{background:var(--hover)}#musicToggle[aria-pressed="true"]{box-shadow:inset 0 0 0 2px var(--accent)}
.music-controls{display:flex;align-items:center;flex-wrap:wrap;gap:10px;padding:7px 10px;margin:6px 0;background:var(--soft);border:1px solid var(--border);border-radius:8px;font-size:12px}.music-controls label{display:flex;align-items:center;gap:7px}.music-controls input{width:100px;padding:0}.music-controls output{min-width:30px}.music-controls #musicStatus{flex:1;min-width:170px;color:var(--muted)}.music-controls button{font-size:12px;padding:6px 9px}#musicCreditsDialog{max-width:600px}#musicCreditsDialog li{margin:14px 0;line-height:1.6}
@media(max-width:650px){body>header{gap:7px}header h1{font-size:12px;max-width:88px}header .game-hud{gap:6px}.hud-stat{min-width:62px}.hud-stat strong{font-size:20px}.header-actions{gap:5px}.header-actions>button,header .header-actions>.theme-toggle{flex-basis:34px;width:34px;height:34px;font-size:21px}}
@media(max-width:380px){body>header{padding-left:6px;padding-right:6px;gap:4px}header h1{max-width:80px;font-size:11px}.hud-stat{min-width:57px}.hud-stat strong{font-size:18px}.header-actions{gap:4px}.header-actions>button,header .header-actions>.theme-toggle{flex-basis:30px;width:30px;height:30px;font-size:19px}}

/* Shared lottery dialog: choosing a method does not move the game field. */
#lotteryChoice{text-align:left}#lotteryChoice>p{font-size:13px;line-height:1.6}#lotteryChoice label{display:block;font-size:14px;font-weight:700;margin:12px 0 7px}#customBoardIds{width:100%;font-size:20px;letter-spacing:.08em;min-height:46px}#customBoardError{min-height:22px;margin:8px 0}#lotteryDialog{min-width:0;width:min(460px,calc(100vw - 28px));max-height:90dvh;overflow:auto}#lotteryDialog .lottery-actions{justify-content:center;gap:10px;margin-top:16px}#lotteryDialog .lottery-actions button{min-width:0;flex:1;min-height:46px}

/* v36: selected boards lead the controls; file actions share the next row. */
.game-controls>.management-bar{display:flex;align-items:center;justify-content:flex-start!important;flex-wrap:wrap;gap:7px;overflow:visible}
.game-controls>.management-bar>*{flex:0 0 auto}
.game-controls .setup-cards{margin:0 5px 0 0;max-width:100%;overflow-x:auto;padding:2px}
.game-controls .setup-cards .card{min-width:48px;padding:4px 7px}
.game-controls .setup-cards .card svg{width:36px;height:28px}
.game-controls .setup-cards .card b{font-size:11px}
.setup-actions-row{display:flex;align-items:center;flex-wrap:wrap;gap:7px;margin:7px 0}
.setup-actions-row .setup-choice-row{margin:0}.setup-actions-row .setup-drawbar{max-width:none;overflow:visible;flex-wrap:wrap}
.file-tools{display:flex;align-items:center;flex-wrap:wrap;gap:5px}
.file-tools button{min-height:44px;font-size:12px;padding:7px 9px}
[data-theme="light"] body>header{background:linear-gradient(110deg,#ac4d0e 0%,#c65b15 52%,#d66a20 100%);color:#fff;border-bottom-color:#a44710;--head-ink:#fff;--head-muted:#fff0df;--score:#fff0b3}
[data-theme="light"] body>header h1{color:#fff;border-left:0;padding-left:0}
[data-theme="light"] body>header .header-actions>button{color:#fff;background:#ffffff18;border-color:#ffffff70}
[data-theme="light"] body>header .header-actions>button:hover{background:#ffffff30}
[data-theme="light"] body>header #musicToggle[aria-pressed="true"]{box-shadow:inset 0 0 0 2px #fff0c5}

.route-trial-controls{margin:7px 0;padding:9px 11px;border:1px solid var(--border);border-radius:8px;background:var(--soft)}.route-trial-controls>.bar{flex-wrap:wrap;gap:7px}.route-trial-controls strong{margin-right:6px}.route-trial-controls p{font-size:13px;line-height:1.5;margin:6px 0}.route-trial-controls small{color:var(--muted);font-size:11px;line-height:1.5}.route-trial-controls #routeTrialResult:empty{display:none}body[data-route-trial="true"] #boardLayer *,body[data-route-trial="true"] .bonus-point{pointer-events:none!important}.game-controls[data-route-trial="true"]>[inert]{opacity:.45}


/* v42: keep file and car controls in the top toolbar; show round colors beside status. */
.game-controls>.management-bar>.file-tools{flex:0 0 auto;flex-wrap:nowrap}
.game-controls>.management-bar>.file-tools button{height:42px;min-height:42px;font-size:12px;padding:7px 9px}
.game-controls #raceStats{flex-wrap:wrap;align-items:center}
.game-controls #roundLegend{margin:0;flex-wrap:nowrap}
#mqLive[hidden],#robotMotionLabel[hidden],#robotStatus[hidden]{display:none!important}



/* v43: one compact route-trial row; audio controls appear only in Advanced Settings. */
.game-controls .route-trial-controls{margin:5px 0;padding:7px 9px}
.game-controls .route-trial-controls>.bar{gap:6px;align-items:center}
.game-controls .route-trial-controls .live-controls{flex:0 1 auto;min-height:36px;margin:0 0 0 8px;padding:0;border:0;background:transparent;gap:6px}
.game-controls .route-trial-controls .live-group{flex-wrap:nowrap;gap:8px}
.game-controls .route-trial-controls .live-controls button{min-height:36px;font-size:13px;padding:7px 10px}
.game-controls .route-trial-controls .live-controls label{white-space:nowrap}
.game-controls .route-trial-controls .live-controls input[type=range]{width:105px}
.game-controls .route-trial-controls p{margin:3px 0}
.game-controls #advancedArea>.music-controls{margin:0 0 10px}
.game-controls #setupHint{margin:2px 0;line-height:1.25}
@media(max-width:600px){.game-controls .route-trial-controls .live-controls{margin-left:0}}

/* The board and toolbar already identify the operation; reclaim the redundant title line. */
.game-controls .controls-title{display:none}


/* v44: the quick "② 放下接入" control defines the main panel's button scale. */
#gameControls button,#gameControls select{box-sizing:border-box;height:36px!important;min-height:36px!important;font-size:13px!important;line-height:22px!important;padding:6px 8px!important}
#gameControls .management-bar .shift-toggle{height:36px;min-height:36px;font-size:13px;padding:6px 8px}
#gameControls .setup-actions-row{min-height:42px;margin:4px 0;gap:8px;flex-wrap:wrap}
#gameControls .setup-actions-row #setupDock{flex:0 0 auto}
#gameControls .setup-actions-row #setupPreviewBar{flex:1 1 500px;min-width:0;height:42px;min-height:42px;margin:0;padding:2px 3px 2px 10px;gap:8px;justify-content:space-between;flex-wrap:nowrap;overflow-x:auto}
#gameControls #setupPreviewBar strong{font-size:13px;white-space:nowrap;flex:0 0 auto}
#gameControls .setup-preview-actions{display:flex;align-items:center;gap:5px;flex:0 0 auto}
@media(max-width:750px){#gameControls .setup-actions-row #setupPreviewBar{flex-basis:100%}}


/* Dialog actions use the same 36px/13px control scale; header icon switches keep their icon sizing. */
dialog button,dialog select{box-sizing:border-box;height:36px!important;min-height:36px!important;font-size:13px!important;line-height:22px!important;padding:6px 8px!important}
body[data-mode="race"] #gameControls .setup-actions-row{display:none}
/* Keep trial speed and mode immediately visible beside the replay action. */
.game-controls .route-trial-controls .trial-mode{display:inline-flex;align-items:center;gap:4px;white-space:nowrap;font-size:13px}
.game-controls .route-trial-controls .trial-mode input{margin:0}

/* HUD already shows time, score and phase; remove the duplicate status row. */
.game-controls #raceStats{display:none!important}

.game-controls .manual-link{display:inline-flex;align-items:center;justify-content:center;border:1px solid var(--border);border-radius:8px;background:var(--surface);padding:8px 11px;min-height:36px;white-space:nowrap;text-decoration:none;font-size:13px;color:var(--ink)}
/* Consistent type and hit targets on each control row. */
.game-controls .management-bar > button,.game-controls .management-bar > .manual-link,.game-controls .management-bar .file-tools button,.game-controls .setup-drawbar button,.game-controls .setup-drawbar select,.game-controls #routeTrialControls .bar button,.game-controls #routeTrialControls .bar label,.game-controls #raceQuickbar button,.game-controls #raceQuickbar select,.game-controls #raceQuickbar .queue,.game-controls #roundProgress .progress-chip{font-size:13px;line-height:20px}
.game-controls .management-bar > button,.game-controls .management-bar > .manual-link,.game-controls #routeTrialControls .bar button,.game-controls #raceQuickbar button,.game-controls #raceQuickbar select{min-height:36px}

.game-controls #routeTrialControls .bar strong,.game-controls #routeTrialControls .trial-mode,.game-controls #raceQuickbar strong{font-size:13px;line-height:20px}

/* v51 compact MQTT: control rows use a consistent 13px/20px rhythm.
   Titles, warnings, telemetry and the 16px mobile text inputs keep their own hierarchy. */
#mqDialog .bar label{font-size:13px;line-height:20px}
#mqDialog .bar button,#mqDialog .bar select{font-size:13px;line-height:20px}
@media(max-width:650px){#mqDialog .bar input{font-size:16px}}