/* Rainbow Rally: a self-contained workbench and driving surface. */
#game-root[data-brick-rally] { --br-ink:#183f49; --br-cream:#fff9e9; --br-teal:#237e74; }
#game-root[data-brick-rally] :is(.game-prompt,.dots-row,.game-feedback,.game-controls) { display:none !important; }
#game-root[data-brick-rally] .stage { height:clamp(490px,calc(100svh - 140px),790px); padding:0; background:#fff9e9; border-radius:24px; }
#game-root[data-brick-rally] .stage-inner { display:block; width:100%; height:100%; min-height:0; padding:0; overflow:hidden; }
#game-root .br-game { height:100%; min-height:0; display:grid; grid-template-columns:minmax(0,1fr); grid-template-rows:auto auto minmax(0,1fr) auto; overflow:hidden; background:#fff9e9; color:#183f49; text-align:left; isolation:isolate; position:relative; }
.br-game *, .br-game *::before, .br-game *::after { box-sizing:border-box; }
.br-game [hidden] { display:none !important; }
.br-top { display:flex; align-items:center; justify-content:space-between; padding:14px 24px 8px; gap:12px; }
.br-top>div:first-child { display:grid; gap:2px; }
.br-eyebrow { color:#54786f; font-size:11px; font-weight:800; letter-spacing:.1em; }
.br-stage-name { font-size:clamp(16px,2vw,22px); line-height:1.1; }
.br-steps { display:flex; gap:6px; }
.br-steps span { font-size:12px; padding:7px 13px; color:#526e69; background:#e7eddd; border-radius:20px; }
.br-steps .is-current { background:#276f65; color:#fff9e9; }
#game-root .br-cue { display:flex; gap:12px; align-items:center; padding:8px 24px 14px; min-height:60px; }
.br-cue-copy { min-width:0; flex:1; }
#game-root .br-instruction { color:#193f49; margin:0; font-size:clamp(21px,2.5vw,32px); line-height:1.2; }
#game-root .br-cue-copy:has(.speech-caption:not([hidden])) .br-instruction { position:absolute; width:1px; height:1px; clip-path:inset(50%); overflow:hidden; }
#game-root .br-cue .speech-caption { margin:0; padding:0; color:#193f49; font-size:clamp(21px,2.5vw,32px); max-height:none; line-height:1.2; font-weight:700; background:none; border:none; }
.br-button { border:2px solid #c3d4c5; border-radius:14px; min-width:44px; min-height:46px; padding:9px 15px; color:#193f49; background:#fffdf4; font:inherit; font-size:16px; font-weight:800; display:inline-flex; align-items:center; justify-content:center; gap:8px; cursor:pointer; touch-action:manipulation; -webkit-tap-highlight-color:transparent; box-shadow:0 3px 0 #c5d0bd; transition:background .12s,transform .12s; }
.br-button:active, .br-button[data-held] { transform:translateY(2px); box-shadow:0 1px 0 #a0b9ae; }
.br-button:disabled { cursor:default; opacity:.5; }
.br-button:focus-visible, .br-swatch:focus-visible { outline:3px solid #1447b8; outline-offset:3px; }
.br-button.br-primary { background:#267c6f; border-color:#21675e; color:#fffdee; box-shadow:0 4px 0 #174e47; padding-inline:24px; }
.br-button.br-secondary { background:#fff5d6; border-color:#d5c89c; color:#4b482d; }
.br-button.br-listen { border:0; background:#e4eddb; box-shadow:none; min-height:42px; padding:8px 12px; font-size:14px; }
.br-icon { display:inline-flex; width:28px; height:28px; flex-shrink:0; }
.br-icon svg { width:100%; height:100%; overflow:visible; }
.br-content { min-height:0; display:grid; grid-template-columns:minmax(0,1.35fr) minmax(270px,1fr); gap:0; margin:0 20px; border-radius:22px; overflow:hidden; background:#edf0df; }
.br-workbench { min-height:0; position:relative; display:flex; align-items:stretch; background:#a8d5cf; overflow:hidden; }
.br-car-canvas { width:100%; height:100%; display:block; min-width:0; min-height:0; object-fit:contain; }
.br-bench-badge { position:absolute; left:50%; bottom:18px; transform:translateX(-50%); border:1px solid #e1edd7; border-radius:24px; padding:8px 16px; background:#fff9e9ed; font-size:14px; white-space:nowrap; box-shadow:0 3px 0 #739e9630; }
.br-design-panel { padding:clamp(16px,2.5vw,30px); display:flex; flex-direction:column; justify-content:center; gap:12px; background:#f4f3e5; min-height:0; }
.br-design-panel h3 { font-size:16px; margin:0; font-weight:800; }
.br-paints { display:flex; gap:10px; margin-bottom:8px; }
.br-swatch { width:48px; height:48px; border-radius:50%; background:var(--paint); border:3px solid #fff8e2; box-shadow:0 3px 0 #cbd1ba; cursor:pointer; flex:0 1 48px; padding:0; display:grid; place-items:center; touch-action:manipulation; }
.br-swatch span { display:none; color:#133d47; font-size:27px; font-weight:900; background:#fff8e5d9; border-radius:50%; width:31px; height:31px; line-height:31px; }
.br-swatch[aria-pressed=true] { outline:3px solid #244c53; outline-offset:2px; }.br-swatch[aria-pressed=true] span { display:block; }
.br-styles,.br-trims { display:flex; gap:8px; }
.br-styles .br-button,.br-trims .br-button { flex:1; padding:8px 6px; font-size:14px; }
.br-trims .br-button { flex-direction:column; gap:2px; }.br-trims .br-icon { background:var(--hub); border-radius:50%; }
.br-game [aria-pressed=true]:not(.br-part):not(.br-swatch) { border-color:#257568; background:#ddf0de; color:#164b43; box-shadow:0 2px 0 #93b6a4; }
.br-actions { display:flex; gap:12px; align-items:center; justify-content:center; padding:16px 22px 20px; min-height:76px; }
.br-actions:empty { display:none; }
.br-actions .br-primary { min-width:180px; }
.br-tray { padding:20px; display:flex; flex-direction:column; justify-content:center; gap:18px; background:#f5f1df; }
.br-tray-title { display:flex; align-items:center; flex-wrap:wrap; gap:10px; font-size:24px; font-weight:800; }
.br-fitted { width:100%; font-size:14px; font-weight:500; color:#536d66; }
.br-parts { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:10px; }
.br-part { position:relative; aspect-ratio:1; padding:7px; background:#fffdf2; border:2px solid #d7d9c4; border-radius:16px; box-shadow:0 4px 0 #d4d2b8; }
.br-part .br-icon { width:clamp(32px,5vw,60px); height:auto; aspect-ratio:1; }
.br-part[aria-pressed=true] { background:#d8ecde; box-shadow:inset 0 2px 0 #bfd5c5; border-color:#9dbdad; }
.br-part[aria-pressed=true] .br-icon { opacity:.24; }
.br-part-tick { display:none; position:absolute; inset:0; align-items:center; justify-content:center; color:#246b57; font-size:25px; }.br-part[aria-pressed=true] .br-part-tick { display:flex; }
.br-build-count { position:absolute; right:16px; top:16px; background:#fff6c9; color:#594516; border:2px solid #efd984; padding:8px 15px; border-radius:16px; font-size:clamp(22px,3vw,34px); font-weight:800; box-shadow:0 4px 0 #97ac8140; }
.br-fitted-right .br-build-count { background:#d9f3be; border-color:#97c481; color:#285847; }
.br-ready-card,.br-result-card { display:flex; flex-direction:column; align-items:center; justify-content:center; padding:20px; text-align:center; background:#f5f1df; }
.br-ready-card>.br-icon { width:64px; height:64px; }
.br-ready-card h3,.br-result-card h3 { font-size:clamp(22px,3vw,30px); margin:8px 0; }
.br-ready-card p,.br-result-card p { margin:6px 0; font-size:16px; }
.br-driving-lesson { background:#e0eddb; padding:14px; border-radius:16px; display:grid; gap:6px; margin:14px 0; }.br-driving-lesson strong { font-size:19px; }.br-driving-lesson span { font-size:14px; }
.br-ready-card small { color:#5c726b; font-size:12px; }
.br-game[data-phase=racing] .br-content { display:grid; grid-template-columns:minmax(0,1fr); grid-template-rows:auto minmax(0,1fr) auto; margin:0; border-radius:0; }
.br-game[data-phase=racing] .br-top { padding-block:8px 3px; }.br-game[data-phase=racing] .br-cue { padding-block:4px 8px; min-height:44px; }
#game-root .br-game[data-phase=racing] .speech-caption { font-size:20px; }
.br-race-hud { display:flex; align-items:center; gap:10px; padding:8px 16px; background:#315764; color:#fff9e0; z-index:1; }
.br-lap { font-size:16px; font-weight:800; }.br-stars { color:#ffe087; font-weight:900; font-size:20px; min-width:54px; }
.br-race-hud .br-button { min-height:36px; padding:5px 10px; font-size:12px; color:#193f49; box-shadow:none; }
.br-cruise { margin-left:auto; }.br-pause-button { font-size:20px!important; min-width:42px; }
.br-track-view { position:relative; min-height:0; overflow:hidden; background:#bce2b0; }
.br-race-canvas { width:100%; height:100%; display:block; touch-action:none; user-select:none; -webkit-user-select:none; }
.br-driving-controls { display:grid; grid-template-columns:minmax(130px,1fr) minmax(70px,.4fr) minmax(80px,.5fr); gap:12px; padding:10px 16px 14px; background:#244a57; align-items:center; }
.br-steer { display:flex; align-items:center; gap:7px; justify-content:center; }
.br-steer .br-button { background:#e1f1e7; border-color:#c1d2c4; color:#244a57; width:58px; height:58px; box-shadow:0 3px 0 #102f3c; touch-action:none; }
.br-wheel { width:68px; display:flex; flex-direction:column; align-items:center; color:#ebf3e7; font-size:10px; font-weight:800; touch-action:none; user-select:none; }
.br-wheel .br-icon { width:48px; height:48px; transform:rotate(var(--turn,0deg)); pointer-events:none; }
.br-wheel span { pointer-events:none; }
.br-button.br-pedal { min-height:60px; font-size:17px; touch-action:none; }.br-button.br-go { color:#153e34; background:#b9ef8b; border-color:#d9f6b8; box-shadow:0 4px 0 #63915c; font-size:23px; }.br-button.br-brake { color:#542e24; background:#ffb897; border-color:#f7d3b8; box-shadow:0 4px 0 #b57a65; }
.br-button[data-held] { filter:brightness(1.1); }.br-pause { position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:12px; background:#f7f5dfeb; backdrop-filter:blur(6px); z-index:4; padding:12px; }.br-pause strong { font-size:26px; }.br-pause p { margin:0 0 8px; }.br-pause .br-button { width:min(250px,90%); }
.br-toast { position:absolute; left:50%; top:46%; transform:translateX(-50%); background:#fff8d1; color:#193f49; font-size:24px; font-weight:800; border:3px solid #fffdf0; border-radius:22px; padding:12px 22px; box-shadow:0 5px 0 #173f4533; pointer-events:none; z-index:5; }
.br-medal { width:64px; height:64px; border-radius:50%; padding:10px; background:#ffe497; border:3px solid #f1c759; }.br-medal svg { width:100%;height:100%; }
.br-star-collection { display:flex; flex-wrap:wrap; gap:5px; max-width:260px; justify-content:center; padding:12px 0; }.br-star-collection span { font-size:28px; color:#b3811e; }.br-word-model { padding:12px 20px; border-radius:14px; background:#e0eddb; font-weight:800; }
#game-root .br-game .is-narrating { outline:4px solid #eebd43; outline-offset:-4px; }
body.immersive #game-root[data-brick-rally] { grid-template-columns:minmax(0,1fr)!important; grid-template-rows:auto minmax(0,1fr)!important; grid-template-areas:'head' 'stage'!important; gap:0!important; }
body.immersive #game-root[data-brick-rally] .stage { height:100%!important; min-height:0!important; border-radius:20px; }
@media(max-width:730px) {
  .br-top { padding:11px 14px 5px; }.br-steps { gap:4px; }.br-steps span { font-size:10px; padding:5px 8px; }
  #game-root .br-cue { padding:8px 14px 12px; gap:6px; }.br-cue .br-listen { width:42px; min-width:42px; padding:8px; font-size:0; gap:0; }.br-cue .br-listen .br-icon { width:24px; height:24px; }
  .br-content { display:flex; flex-direction:column; margin:0 12px; border-radius:18px; }
  .br-workbench { flex:1; min-height:110px; }.br-bench-badge { bottom:8px; padding:5px 12px; font-size:11px; }
  .br-design-panel { flex:none; gap:7px; padding:12px 14px; display:grid; grid-template-columns:1fr; }.br-design-panel h3 { font-size:13px; }.br-design-panel h3:last-of-type,.br-trims { display:none; }
  .br-paints { justify-content:space-around; gap:6px; margin:0 0 4px; }.br-swatch { width:44px; height:44px; flex-basis:44px; }
  .br-styles .br-button { min-height:40px; font-size:13px; }.br-actions { padding:12px 12px 16px; gap:8px; min-height:70px; }.br-actions .br-button { font-size:14px; padding:8px 12px; min-height:46px; }.br-actions .br-primary { min-width:130px; flex:1; }.br-actions .br-icon { width:23px; height:23px; }
  .br-tray { padding:12px; gap:9px; }.br-tray-title { font-size:19px; gap:7px; }.br-tray-title .br-icon { width:23px;height:23px; }.br-fitted { width:auto; margin-left:auto; font-size:11px; max-width:50%; }.br-parts { grid-template-columns:repeat(5,minmax(0,1fr)); gap:7px; }.br-part { min-height:43px; padding:4px; border-radius:12px; }.br-part .br-icon { width:32px; }.br-build-count { top:10px; right:10px; padding:5px 10px; font-size:22px; }
  .br-ready-card,.br-result-card { padding:12px; }.br-ready-card>.br-icon,.br-medal { width:40px; height:40px; }.br-ready-card h3,.br-result-card h3 { font-size:20px;margin:4px 0; }.br-ready-card p,.br-result-card p { font-size:13px; }.br-driving-lesson { margin:8px 0; padding:10px; }.br-driving-lesson strong { font-size:16px; }.br-driving-lesson span { font-size:12px; }.br-ready-card small { display:none; }.br-star-collection { padding:6px 0; gap:4px; }.br-star-collection span { font-size:22px; }.br-word-model { padding:8px 16px; }
  .br-driving-controls { padding:10px 10px 12px; gap:8px; grid-template-columns:minmax(120px,1fr) 70px 78px; }.br-steer { gap:4px; }.br-steer .br-button { width:42px;min-width:42px;height:54px; }.br-wheel { width:45px; }.br-wheel .br-icon { width:40px; height:40px; }.br-button.br-pedal { font-size:13px; padding:7px;min-height:58px; }.br-button.br-go { font-size:21px; }.br-race-hud { gap:7px;padding:7px 10px; }.br-race-hud .br-button { font-size:10px;padding:4px 7px; }.br-lap { font-size:13px; }.br-stars { font-size:17px;min-width:42px; }
}
@media(max-height:620px) and (orientation:landscape) {
  .br-top { padding:5px 14px; }.br-eyebrow { display:none; }.br-stage-name { font-size:15px; }.br-steps span { padding:3px 10px; }
  #game-root .br-cue { min-height:34px;padding:2px 14px 6px; }#game-root .br-cue .speech-caption { font-size:19px; }.br-cue .br-listen { min-height:30px;height:30px; }
  .br-content { display:grid; grid-template-columns:minmax(0,1.2fr) minmax(220px,1fr); margin:0 12px; }.br-workbench { min-height:0; }.br-design-panel { padding:10px 14px;gap:6px; }.br-design-panel h3 { font-size:12px; }.br-design-panel h3:last-of-type,.br-trims { display:none; }.br-swatch { width:34px;height:34px;flex-basis:34px; }.br-paints { margin:0; }.br-styles .br-button { min-height:35px;font-size:12px; }
  .br-tray { padding:8px 14px;gap:5px; }.br-tray-title { font-size:16px; }.br-fitted { width:auto;font-size:10px; }.br-parts { grid-template-columns:repeat(5,minmax(0,1fr));gap:6px; }.br-part { min-height:36px;aspect-ratio:1.3;padding:3px; }.br-part .br-icon { width:30px; }.br-build-count { font-size:20px;top:8px;right:8px; }.br-actions { min-height:48px;padding:6px 12px 10px; }.br-actions .br-button { min-height:44px;padding:5px 14px;font-size:13px; }
  .br-ready-card,.br-result-card { padding:8px; }.br-ready-card>.br-icon,.br-medal { display:none; }.br-ready-card h3,.br-result-card h3 { font-size:18px;margin:2px; }.br-driving-lesson { padding:6px;margin:5px; }.br-driving-lesson strong { font-size:14px; }.br-driving-lesson span,.br-ready-card small { display:none; }.br-star-collection { padding:3px; }.br-star-collection span { font-size:18px; }.br-word-model { font-size:13px; padding:6px; }
  .br-game[data-phase=racing] { grid-template-rows:minmax(0,1fr)!important; }.br-game[data-phase=racing] .br-top,.br-game[data-phase=racing] .br-cue { display:none!important; }.br-game[data-phase=racing] .br-content { grid-template-columns:minmax(0,1fr) 170px; grid-template-rows:36px minmax(0,1fr); }.br-race-hud { grid-column:1/-1;padding:4px 12px; }.br-track-view { grid-column:1; }.br-driving-controls { grid-column:2;grid-row:2;display:grid;grid-template-columns:1fr 1fr;grid-template-rows:1fr 1fr;padding:10px;gap:10px; }.br-steer { grid-column:1/-1; }.br-steer .br-button { width:40px;min-width:40px; }.br-wheel { width:40px; }.br-wheel .br-icon { width:36px;height:36px; }.br-pedal { min-height:44px!important; }.br-pause { gap:6px; }.br-pause strong { font-size:20px; }.br-pause p { display:none; }.br-pause .br-button { min-height:36px; }
}
@media(prefers-reduced-motion:reduce) { .br-game * { transition:none!important; animation:none!important; } }

@media(max-width:370px) {
  #game-root[data-brick-rally] .game-room-title { position:absolute; width:1px; height:1px; overflow:hidden; clip-path:inset(50%); }
}
@media(max-width:730px) and (max-height:650px) and (orientation:portrait) {
  .br-result-card .br-medal,.br-ready-card>.br-icon { display:none; }
  .br-result-card { padding:8px; }
  .br-result-card h3 { font-size:18px; margin:0; }
  .br-result-card .br-word-model { margin:2px 0; padding:4px 10px; font-size:14px; }
}

@media(max-width:730px) and (orientation:portrait) {
  .br-game[data-phase=build] .br-actions { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr) minmax(0,1.25fr); }
  .br-game[data-phase=build] .br-actions .br-button { min-width:0; padding-inline:6px; gap:5px; }
}