.br-layout{display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:16px;align-items:start;color:#e6eff6}
.br-play{min-width:0;border:1px solid #294353;border-radius:18px;overflow:hidden;background:#0b2031;box-shadow:0 18px 60px #0003}
.br-stage-top,.br-sea-footer{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:14px 18px;font-size:13px;color:#bcd4df;background:#0b1a2b}
.br-tag{font-size:10px;letter-spacing:2px;color:#85cfc4}.br-level-caption{font-weight:600}
.br-board{display:grid;place-items:center;background:radial-gradient(ellipse at center,#15465c,#091e32);overflow:hidden}
.br-sea{width:100%;height:clamp(330px,calc(100dvh - 245px),620px);display:block;touch-action:none;user-select:none}
.br-sea>rect{fill:transparent}.br-sea-footer{font-size:12px;border-top:1px solid #284653}.br-sea-footer>span{display:flex;gap:7px;align-items:center}.br-gold-dot{width:6px;height:6px;border-radius:50%;background:#ecc98b;display:inline-block}
.br-guides line{stroke:#8cd6d3;stroke-width:1.5;stroke-dasharray:3 8;opacity:.22}.br-guides-hidden line{opacity:0}.br-guides line.br-neighbour{stroke:#caf2df;opacity:.8;stroke-width:2}.br-guides line.br-hinted{stroke:#ffdc8c;opacity:1;stroke-width:5;stroke-dasharray:5 7}
.br-island{cursor:pointer;outline:none}.br-number-disc{fill:#193b40;stroke:#e1f7db;stroke-width:1;transition:fill .2s}.br-number{fill:#f4fff1;font-size:25px;font-weight:700;font-family:inherit;pointer-events:none}.br-island-label{fill:#c5dde0;font-size:16px;font-weight:600;pointer-events:none}.br-ripple{fill:none;stroke:#91e6dc;stroke-width:1;opacity:.2}.br-check{font-size:20px;font-weight:800;fill:#fff3b7;opacity:0;paint-order:stroke;stroke:#153941;stroke-width:5px}
.br-complete .br-number-disc{fill:#397866}.br-complete .br-check{opacity:1}.br-selected .br-ripple,.br-island:focus-visible .br-ripple{stroke:#ffe1a1;stroke-width:3;opacity:1}.br-selected .br-number-disc{fill:#81532a}.br-island:hover .br-ripple{opacity:.8;stroke-width:2}
.br-drag-line{stroke:#ffdc8c;stroke-width:5;stroke-dasharray:8 6;pointer-events:none}.br-bridge{pointer-events:none;stroke-linecap:round}.br-built{animation:br-build .35s ease-out}.br-water-lines{animation:br-water 12s ease-in-out infinite alternate;transform-origin:center}.br-won .br-bridge{animation:br-celebrate 1.1s ease-out}.br-won .br-ripple{stroke:#ffe0a0;opacity:.7}
@keyframes br-water{to{transform:translate(17px,5px);opacity:.24}}@keyframes br-build{from{opacity:0;filter:brightness(2)}to{opacity:1;filter:brightness(1)}}@keyframes br-celebrate{0%,70%{filter:brightness(1)}35%{filter:brightness(2);stroke:#fff}}
.br-won .br-bridge{animation-delay:var(--bridge-delay,0s)}
.br-still *{animation:none!important;transition:none!important}
.br-console{display:flex;flex-direction:column;gap:16px;background:#111e2e;border:1px solid #2a3b50;border-radius:15px;padding:19px;min-width:0;max-height:calc(100dvh - 153px);overflow:auto}
.br-console h2{font-size:23px;line-height:1.2;letter-spacing:-.7px;margin:9px 0 12px}.br-console p{font-size:13px;line-height:1.6;color:#b1c3d3}.br-console .eyebrow{font-size:9px;letter-spacing:1.5px;color:#8cc9c4}.br-selection{border-top:1px solid #2b3b4b;padding-top:16px}.br-selection-copy{margin-top:8px}.br-neighbours{display:flex;flex-wrap:wrap;gap:7px;margin-top:10px}.br-neighbours .button{font-size:12px;min-height:38px;padding:8px 10px}
.br-actions{display:grid;grid-template-columns:1fr 1fr;gap:8px}.br-actions .button{min-height:40px;font-size:12px;padding:9px}.br-actions .br-hint-button{color:#f2d197;border-color:#68583c;background:#342d24}
.br-message{min-height:40px}.br-hint{padding:13px;background:#2a2a23;border:1px solid #65563b;border-radius:10px}.br-hint .button{margin-top:12px;font-size:12px}.br-hint p{color:#f1dbb9}.br-quick-rule{display:flex;gap:13px;border-top:1px solid #293c4c;padding-top:13px}.br-quick-rule>span{white-space:nowrap;font-size:14px;color:#ebcc98;padding-top:4px}.br-quick-rule p{font-size:12px}.br-learn{font-size:12px;text-align:left;color:#bde6da;min-height:40px}.br-console .br-progress{font-size:11px;color:#8da4b9}
.br-win:not([hidden]){display:flex;align-items:center;justify-content:space-between;gap:12px;padding:17px 18px;background:#163d39;border-top:1px solid #4b9c85}.br-win strong{color:#ddffe2;font-size:18px}.br-win p{font-size:12px;color:#b0d6ca;margin-top:5px}.br-win .button{white-space:nowrap;font-size:12px}
.br-levels{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:18px}.br-levels .button{min-height:54px;text-align:left;justify-content:flex-start;line-height:1.4;font-size:13px}.br-level[aria-pressed=true]{background:#214945;border-color:#78c4b0}.br-level.br-finished::after{content:'✓';margin-left:auto;color:#9fe4b1}.br-options label{display:flex;align-items:center;gap:12px;margin:20px 0;font-size:14px}.br-options p,.br-gallery p{font-size:14px;line-height:1.7;color:#b5c6d8;margin-top:12px}.br-options input{accent-color:#86d6b7;width:18px;height:18px}
.br-help,.br-confirm{max-width:550px}.br-dialog-close{display:flex;margin:0 0 18px auto;font-size:12px}.br-help h2{margin:10px 0 14px}.br-help p{font-size:14px;line-height:1.7;color:#bdcedf}.br-lesson-diagram{display:flex;align-items:center;justify-content:center;padding:30px 0 23px;gap:5px}.br-lesson-diagram span{display:flex;flex-direction:column;gap:6px;color:#a7cbd3;font-size:12px;text-align:center}.br-lesson-diagram b{display:grid;place-items:center;background:#267465;color:#edffe9;border:4px solid #a2d5b6;width:56px;height:56px;border-radius:50%;font-size:24px}.br-lesson-diagram i{width:62px;height:12px;margin-top:20px;border-top:1px dashed #627a89}.br-lesson-diagram i.br-demo-single{border-top:5px solid #ecc786;height:5px}.br-lesson-diagram i.br-demo-double{border-top:4px solid #ecc786;border-bottom:4px solid #ecc786}.br-lesson-copy{min-height:72px}.br-help [data-action=lesson]{margin:10px 0 24px}.br-rules{border-top:1px solid #34465b;padding-top:18px}.br-rules h3{font-size:15px}.br-rules ol{padding-left:20px;margin-top:12px;color:#adbed2;font-size:13px;line-height:1.8}
.br-card .card-symbol{color:#a6dfc6;background:#143c3a}.br-card{border-color:#30534d!important}
@media(max-width:1100px){.br-layout{grid-template-columns:minmax(0,1fr) 260px}.br-console{padding:14px;gap:12px}.br-console h2{font-size:20px}}
@media(max-width:760px){.br-layout{grid-template-columns:1fr;gap:12px}.br-sea{height:auto;max-height:490px;min-height:280px;aspect-ratio:600/520}.br-console{max-height:none;overflow:visible;padding:15px}.br-intro{display:none}.br-selection{border:0;padding:0}.br-console{gap:10px}.br-selection-copy{margin-top:5px}.br-stage-top,.br-sea-footer{padding:12px;font-size:11px}.br-actions .button{min-height:44px}.br-quick-rule{display:none}.br-message{min-height:0}.br-win:not([hidden]){flex-direction:column;align-items:stretch}.br-win .button{min-height:44px}.br-learn{min-height:44px}.br-neighbours .button{min-height:44px}.br-levels{grid-template-columns:1fr}.br-help{padding:20px}.br-lesson-diagram i{width:45px}}
@media(prefers-reduced-motion:reduce){.br-sea *{animation:none!important;transition:none!important}}
@media(forced-colors:active){.br-number{fill:CanvasText}.br-number-disc{fill:Canvas;stroke:CanvasText}.br-island:focus-visible .br-ripple{stroke:Highlight}.br-island-label,.br-check{fill:CanvasText}.br-guides line{stroke:CanvasText}}