.br-game{padding:16px 18px 24px;max-width:1100px;margin:auto}.br-game .instruction{padding:0 0 14px;font-size:1rem}.br-toolbar{display:flex;align-items:center;gap:8px 16px;flex-wrap:wrap;padding:0 0 12px;font-size:.875rem}.br-round{margin-right:auto;font-weight:bold}.br-toolbar label{display:flex;gap:6px;align-items:center}.br-stage{position:relative;isolation:isolate;border:2px solid #294e60;border-radius:18px;overflow:hidden;background:#cae9ec}.br-stage canvas{display:block;width:100%;height:clamp(340px,53vh,540px)}.br-score{position:absolute;right:14px;top:12px;background:#fffdf5ed;border-radius:12px;padding:6px 12px;font-weight:bold;font-size:1rem;pointer-events:none}.br-overlay{position:absolute;inset:0;display:grid;place-items:center;pointer-events:none;padding:20px}.br-overlay:has(.br-message){background:#e8f3f270}.br-message{pointer-events:auto;max-width:430px;background:#fffdf5f7;border:2px solid #31586a;border-radius:20px;box-shadow:0 8px 30px #153c4930;padding:22px;text-align:center;display:flex;flex-direction:column;gap:14px}.br-message h3{font-size:1.65rem}.br-message p{font-size:1rem;line-height:1.5}.br-control-grid{display:grid;grid-template-columns:1fr 1fr 1fr;gap:18px;align-items:start;padding:16px 0}.br-mix{display:grid;gap:8px}.br-mix label{display:flex;justify-content:space-between;gap:8px;font-size:.9rem}.br-mix meter{width:100%;height:22px;accent-color:#33798f}.br-mix-count{white-space:nowrap}.br-refill-note,.br-size-note{font-size:.875rem;line-height:1.4}.br-blow-wrap{display:grid;gap:8px;text-align:center}.br-blow{touch-action:none;user-select:none;min-height:82px;font-size:1.15rem;line-height:1.4}.br-blow small{font-size:.875rem}.br-alternative{padding:8px;border:1px solid #294e6040;border-radius:10px;font-size:.9rem}.br-alternative summary{cursor:pointer;min-height:44px;display:list-item}.br-alternative[open]{display:grid;gap:8px}.br-alternative input{width:100%;min-height:44px}.br-alternative label,.br-alternative output{display:block;padding:4px}.br-guide{display:flex;justify-content:center;gap:24px;flex-wrap:wrap;border-top:1px solid #294e6020;padding:12px 0}.br-guide span{display:flex;align-items:center;gap:8px;font-size:.875rem}.br-guide img{height:50px;width:42px;object-fit:contain}.br-status{min-height:1.5em;font-size:1rem;text-align:center;padding:8px 0}.br-game button:disabled{opacity:.5;cursor:default}.br-game .pill{min-height:44px;white-space:normal}.br-game input:focus-visible{outline:3px solid #b74c22;outline-offset:3px}
@media(max-width:700px){.br-game{padding:10px 6px 20px}.br-toolbar{gap:4px 10px}.br-round{flex-basis:100%;font-size:.9rem}.br-stage canvas{height:350px}.br-control-grid{grid-template-columns:1fr 1fr;gap:12px}.br-alternative{grid-column:1/-1}.br-message{padding:18px}.br-score{font-size:.875rem;right:8px;top:8px;padding:4px 8px}.br-guide{gap:10px}.br-guide img{height:42px;width:30px}.br-guide span{font-size:.875rem;gap:4px}.br-game .instruction{padding:0 6px 12px}.br-mix label{flex-wrap:wrap}}
.br-game [hidden]{display:none!important}.br-refill-panel{margin-top:14px;padding:14px 16px;border:2px solid #33798f;border-radius:16px;background:#edf8fa;font-size:1rem}.br-travel-help{display:grid;gap:10px}.br-travel-buttons{display:flex;gap:12px;align-items:center;justify-content:center;flex-wrap:wrap}.br-travel-buttons .pill{min-width:100px}.br-speed{color:#205970}.br-refill-cue{text-align:center}.br-bucket-help{display:flex;gap:20px;justify-content:center;align-items:center;flex-wrap:wrap}.br-stir-zone{position:relative;flex:0 0 180px;height:180px;border:3px dashed #3c8098;border-radius:50%;touch-action:none;user-select:none;display:flex;flex-direction:column;justify-content:center;align-items:center;gap:2px;text-align:center;background:#fffdf5;cursor:crosshair}.br-circle-arrow{font-size:48px;line-height:1;color:#28687f}.br-stir-label{font-size:.875rem}.br-stir-progress{font-size:1.35rem;font-weight:bold}.br-stir-actions{display:grid;gap:10px;max-width:330px}.br-stir-actions p{font-size:.9rem}.br-stir-actions small{font-size:.875rem}.br-stir-zone:focus-visible{outline:3px solid #b74c22;outline-offset:5px}.br-win-caption{align-self:start;margin-top:28px;border:2px solid #31586a;border-radius:14px;padding:12px 18px;background:#fffdf5f0;font:1.5rem Story,Georgia,serif;text-align:center;box-shadow:0 4px 20px #31586a25}.br-refill-panel:not(.br-tutorial) .br-stir-cue{display:none}
@media(max-width:700px){.br-refill-panel{padding:12px 10px}.br-bucket-help{gap:12px}.br-stir-zone{height:160px;flex-basis:160px}.br-stir-actions{max-width:100%;text-align:center}.br-win-caption{font-size:1.25rem;margin-top:24px}.br-travel-buttons .pill{min-width:80px}}
.br-refill-panel{position:absolute;right:12px;bottom:12px;z-index:2;width:370px;max-width:65%;max-height:calc(100% - 56px);overflow:auto;margin:0;box-shadow:0 5px 20px #294e6020}.br-bucket-help{gap:10px}.br-stir-actions{text-align:center}.br-stir-zone{height:140px;flex-basis:140px}.br-circle-arrow{font-size:38px}.br-refill-panel .br-refill-cue{font-size:.875rem}.br-refill-panel .br-travel-buttons{gap:8px}.br-refill-panel .br-travel-buttons .pill{min-width:80px;padding:8px 12px}
@media(max-width:700px){.br-refill-panel{right:6px;bottom:6px;max-width:66%;width:230px;padding:10px 8px}.br-stir-zone{height:120px;flex-basis:120px}.br-stir-label{font-size:.875rem}.br-stir-progress{font-size:1.15rem}.br-stir-actions{gap:7px}.br-stir-actions small{display:none}.br-refill-panel .br-stir-cue{font-size:.875rem}.br-refill-panel .br-travel-buttons .pill{min-width:70px;padding:6px 8px}}
