/* Game surface and game-specific controls only. */
.guided-demo-focus{position:relative;z-index:2;outline:3px solid #f0d98e!important;outline-offset:4px;filter:drop-shadow(0 0 10px #d9bc78aa);animation:guided-demo-pulse .9s ease-in-out infinite alternate}
@keyframes guided-demo-pulse{from{outline-offset:2px;filter:drop-shadow(0 0 4px #d9bc7866)}to{outline-offset:7px;filter:drop-shadow(0 0 14px #f0d98ecc)}}
.guided-demo-running main>:not(.demo-bar){animation-play-state:paused!important}
@media(prefers-reduced-motion:reduce){.guided-demo-focus{animation:none!important}}
:root{color-scheme:dark;--black:#050609;--panel2:#151923;--gold2:#f6dfa0;font-family:Arial,sans-serif;background:var(--black);color:var(--ivory);}
[tabindex]:focus-visible{outline:3px solid #fff2b8;outline-offset:3px}
.brandbar{display:flex;align-items:center;justify-content:space-between;width:min(100%,760px);min-height:44px;margin:0 auto 7px;border:1px solid #8f7434;border-radius:0 0 12px 12px;overflow:hidden;background:linear-gradient(100deg,#f4d77e 0,#bd8c2c 42%,#39280e 75%,#0a0b0e 100%);box-shadow:0 8px 24px #000b}
.brandbar a{display:flex;align-items:center;min-height:42px;color:#080704;text-decoration:none;font-weight:850}
.brand-link{padding:0 13px;font-family:Georgia,serif;font-size:1rem}
.home-button{justify-content:center;min-width:88px;padding:0 14px;border-left:1px solid #8d6c27;background:linear-gradient(145deg,#f4da8b,#b78227);font-size:.82rem;text-transform:uppercase}
.board-frame{position:relative;margin:0 8px;overflow:hidden;border:0;border-radius:24px;padding:0;background:transparent;box-shadow:none}
.board-frame:before{content:none}
#board{display:block;width:100%;max-height:min(60svh,660px);overflow:hidden;border-radius:24px;touch-action:none}
.board-bg{fill:#06090fb8;stroke:#5c4928;stroke-width:1}
.ceiling{stroke:#d5b55b;stroke-width:2;filter:url(#gold-glow)}
.bubble-image{filter:url(#bubble-shadow)}
.aim-line{fill:none;stroke:#f7dc8f;stroke-width:2.2;stroke-dasharray:3 8;stroke-linecap:round;filter:url(#gold-glow)}
.play-controls{display:grid;grid-template-columns:42px 92px 42px 60px minmax(64px,1fr);align-items:center;justify-content:center;gap:7px;padding:10px 8px}
.aim-button,.colour-toggle,.fire-button{height:50px;border:1px solid #8d7135;border-radius:13px;background:linear-gradient(145deg,#1b202b,#090b10);color:var(--gold2);font-weight:900}
.aim-button{font-size:1.8rem}
.aim-wheel{position:relative;width:92px;height:50px;border:1px solid #8d7135;border-radius:999px;background:radial-gradient(circle,#594119 0 13%,#111722 15% 44%,#a98131 46% 49%,#090b0f 51%);touch-action:none}
.aim-wheel span{position:absolute;left:50%;bottom:50%;width:3px;height:20px;border-radius:2px;background:#f8df91;transform-origin:50% 100%;transform:rotate(var(--wheel-angle,0deg));box-shadow:0 0 8px #ffd76e}
.colour-picker{position:relative}
.colour-toggle{display:flex;width:60px;align-items:center;justify-content:center;gap:1px;padding:3px}
.colour-toggle img{width:38px;height:38px;object-fit:contain}
.colour-options{position:absolute;right:0;bottom:58px;z-index:5;display:grid;grid-template-columns:repeat(3,48px);gap:5px;padding:7px;border:1px solid #8d7135;border-radius:15px;background:#080a0ff2;box-shadow:0 14px 30px #000}
.colour-option{width:48px;height:48px;border:1px solid transparent;border-radius:11px;padding:2px;background:#151923}
.colour-option[aria-pressed=true]{border-color:#ffe69a;box-shadow:0 0 12px #f2c75a}
.colour-option img{width:100%;height:100%;object-fit:contain}
.fire-button{background:linear-gradient(145deg,#f8df90,#a87522);color:#080704;font-size:1rem;box-shadow:inset 0 1px #fff9,0 5px 14px #0008}
.preview-sound{height:38px;border:1px solid #725a2e;border-radius:9px;background:#171b23;color:var(--gold2)}
.control-list>div{display:grid;grid-template-columns:34px 1fr;align-items:start;gap:8px}
.control-list b{display:grid;width:31px;height:31px;place-items:center;border:1px solid #79612f;border-radius:50%;color:var(--gold2)}
.control-list p{margin-top:4px}
.result-spark{display:block;margin:-5px auto -18px}
@media(min-width:700px) and (orientation:portrait){.board-frame{margin-inline:18px}
.play-controls{padding-inline:18px}
#board{max-height:690px}}
@media(max-width:370px){.play-controls{grid-template-columns:38px 78px 38px 54px 1fr;gap:4px}
.aim-wheel{width:78px}}
@media(max-height:760px){#board{max-height:51svh}
.play-controls{padding-block:6px}}
.demo-mode .board-frame,.demo-mode .play-controls{pointer-events:none}
.demo-mode .colour-options{display:grid}
.bubble-image{transform-box:fill-box;transform-origin:center}
.board-frame{max-width:720px;margin-inline:auto}
.board-frame:after{content:"";position:absolute;inset:4%;border:1px solid #8b6d323d;border-radius:50%;pointer-events:none}
#board{width:100%;max-height:min(64svh,720px);border-radius:50%;filter:drop-shadow(0 16px 34px #000b);user-select:none;-webkit-user-select:none}
.arena{fill:url(#arena);stroke:#6e572b;stroke-width:2}
.arena-ring{fill:none;stroke:#c7a24c38;stroke-width:1.5;stroke-dasharray:2 10}
.bubble-image{filter:url(#bubble-shadow)}
.bubble-group{transition:opacity .18s ease,transform .18s ease}
.bubble-group.hit{filter:brightness(1.55) drop-shadow(0 0 11px #fff2a2)}
.aim-line{stroke:#ffe18b;stroke-width:2;stroke-dasharray:4 10;stroke-linecap:round;opacity:.72}
.cannon-ring{fill:#05080d80;stroke:#9c824d61;stroke-width:2.2}
.projectile{filter:url(#bubble-shadow);transform-box:fill-box;transform-origin:center}
.projectile-flight{will-change:transform}
#cannon{filter:drop-shadow(0 7px 7px #000b)}
.play-controls{grid-template-columns:44px 74px 44px 62px minmax(82px,130px);max-width:620px;margin:auto}
.orbit-wheel{position:relative;width:74px;height:74px;border:1px solid #9a7937;border-radius:50%;background:radial-gradient(circle,#5f481d 0 12%,#131b29 14% 48%,#a88335 50% 52%,#080b10 54%);box-shadow:inset 0 0 14px #000,0 6px 18px #0009;touch-action:none}
.orbit-wheel:before,.orbit-wheel:after{content:"";position:absolute;background:#a6863e55}
.orbit-wheel:before{left:14%;right:14%;top:50%;height:1px}
.orbit-wheel:after{top:14%;bottom:14%;left:50%;width:1px}
.orbit-wheel span{position:absolute;left:50%;top:5px;width:8px;height:8px;border-radius:50%;background:#ffe49a;box-shadow:0 0 9px #ffd365;transform:translateX(-50%);transform-origin:50% 32px;rotate:var(--wheel-angle,0deg)}
.colour-options{display:grid;width:min(270px,calc(100vw - 20px));grid-template-columns:1fr;gap:9px}
.colour-grid{display:grid;grid-template-columns:repeat(3,48px);justify-content:end;gap:5px}
.spin-control{display:grid;justify-items:center;gap:6px;border-top:1px solid #6c552b;padding:9px 3px 2px}
.spin-heading{display:flex;width:100%;align-items:center;justify-content:space-between;color:#ffe4a0;font-size:12px;font-weight:850}
.spin-value{min-width:50px;border:1px solid #725b30;border-radius:999px;padding:2px 7px;background:#111722;color:#fff0bd;text-align:center}
.spin-slider-row{display:grid;width:100%;grid-template-columns:34px minmax(0,1fr) 34px;align-items:center;gap:7px}
.spin-step{display:grid;width:34px;height:34px;place-items:center;border:1px solid #80662f;border-radius:10px;background:linear-gradient(145deg,#222a37,#080a0f);box-shadow:inset 0 1px #fff2,0 3px 9px #0008;color:#f3d986;font-size:18px;font-weight:900;touch-action:manipulation}
.spin-step:active{transform:scale(.94)}
.spin-step:disabled{opacity:.32}
.spin-range{width:100%;height:34px;margin:0;accent-color:#d5ae4e;cursor:ew-resize;touch-action:none}
.spin-range::-webkit-slider-runnable-track{height:7px;border:1px solid #765e2f;border-radius:999px;background:linear-gradient(90deg,#6f5322,#1a202b 50%,#6f5322)}
.spin-range::-webkit-slider-thumb{width:25px;height:25px;margin-top:-10px;border:2px solid #f0d580;border-radius:50%;background:radial-gradient(circle at 35% 30%,#fff1b2,#b9852d 62%,#4e3410);box-shadow:0 2px 8px #000b;-webkit-appearance:none}
.spin-range::-moz-range-track{height:7px;border:1px solid #765e2f;border-radius:999px;background:linear-gradient(90deg,#6f5322,#1a202b 50%,#6f5322)}
.spin-range::-moz-range-thumb{width:22px;height:22px;border:2px solid #f0d580;border-radius:50%;background:radial-gradient(circle at 35% 30%,#fff1b2,#b9852d 62%,#4e3410);box-shadow:0 2px 8px #000b}
.spin-scale{display:grid;width:calc(100% - 82px);grid-template-columns:1fr auto 1fr;align-items:center;color:#a99d86;font-size:9px}
.spin-scale b{font-weight:800}
.spin-scale b:last-child{text-align:right}
.spin-scale i{font-style:normal;color:#d7c58f}
.aim-button{height:48px;font-size:1.35rem}
.colour-toggle{height:52px}
.fire-button{height:52px}
@media(max-height:760px){#board{max-height:54svh}
.play-controls{padding-block:4px}
.orbit-wheel{width:62px;height:62px}
.orbit-wheel span{transform-origin:50% 26px}}
@media(max-width:420px){.play-controls{grid-template-columns:38px 62px 38px 56px minmax(70px,1fr);gap:5px;padding-inline:2px}
.colour-toggle{width:56px}}
.spin-range{-webkit-appearance:none;appearance:none;background:transparent}
.level-stat-button{appearance:none;border:0;border-radius:0;color:inherit;cursor:pointer;touch-action:manipulation;min-height:44px}
.level-stat-button:hover:not(:disabled),.level-stat-button:active:not(:disabled){background:#d7b26816}
.level-stat-button:focus-visible{outline-offset:-3px}
.level-stat-button:disabled{cursor:default}