body:before{
  content:"";
  position:fixed;
  z-index:31;
  top:0;
  right:0;
  left:0;
  height:env(safe-area-inset-top);
  background:#080808;
  pointer-events:none;
}
body{
  background:radial-gradient(circle at 50% 12%,#211b0f 0,#0d0c09 34%,#050505 78%);
}
.home-bar{
  position:sticky;
  top:env(safe-area-inset-top);
  z-index:30;
  display:flex;
  width:100%;
  min-height:52px;
  margin-top:env(safe-area-inset-top);
  align-items:center;
  justify-content:center;
  gap:10px;
  padding:0 18px;
  border-bottom:1px solid #f4dfa5;
  background:linear-gradient(110deg,#b18a38,#f0d98e 48%,#b18a38);
  box-shadow:0 8px 28px #0009,inset 0 1px #fff8;
  color:#090806;
  font-size:.88rem;
  font-weight:850;
  letter-spacing:.16em;
  text-shadow:none;
}
.home-bar:before{content:"←";font-size:1.15rem;line-height:1}
.home-bar:hover{background:linear-gradient(110deg,#d0ad5c,#ffe9aa 48%,#d0ad5c)}
.home-bar:focus-visible{outline:3px solid #fff;outline-offset:-5px}
.game-shell{min-height:calc(100svh - 52px - env(safe-area-inset-top))}
.topbar,.scorebar,.play-controls{border-color:#e8c87670;background:#09080be8;box-shadow:0 8px 24px #0008}
.topbar{border:1px solid #e8c87645;border-radius:18px;padding:9px 10px}
.scorebar{grid-template-columns:repeat(5,1fr);border:1px solid #e8c87655;border-radius:13px;overflow:hidden}
.scorebar.is-timer-hidden{grid-template-columns:repeat(4,1fr)}
.scorebar.is-timer-hidden>div:nth-child(3){border-right:1px solid #3c321d}
.scorebar.is-timer-hidden>div:nth-child(4){border-right:0}
.message{position:absolute;width:1px;height:1px;min-height:0;margin:-1px;padding:0;overflow:hidden;border:0;clip-path:inset(50%);white-space:nowrap}
.board-wrap{
  overflow:hidden;
  border:2px solid #b99546;
  border-radius:22px;
  background:#090908;
  box-shadow:0 12px 30px #000b,inset 0 0 0 1px #f0d98e24;
}
.board-wrap svg{border-radius:20px}
.board-bg{fill:#090908;stroke:#6f592c;stroke-width:1}
.danger{stroke:#bd9650;stroke-width:1.2}
#aim-line{stroke:#f1d688}
#launcher path{fill:#12110e;stroke:#d6b866;stroke-width:2.3}
.colour-0{fill:url(#bubble-0)}
.colour-1{fill:url(#bubble-1)}
.colour-2{fill:url(#bubble-2)}
.colour-3{fill:url(#bubble-3)}
.colour-4{fill:url(#bubble-4)}
.colour-button.colour-0,.current-colour.colour-0{background:radial-gradient(circle at 30% 24%,#fffef8,#e7dfcd 55%,#91836b)}
.colour-button.colour-1,.current-colour.colour-1{background:radial-gradient(circle at 30% 24%,#817d75,#393631 55%,#0b0a09)}
.colour-button.colour-2,.current-colour.colour-2{background:radial-gradient(circle at 30% 24%,#fff2a8,#d5ad42 55%,#775612)}
.colour-button.colour-3,.current-colour.colour-3{background:radial-gradient(circle at 30% 24%,#eaa2aa,#8f263b 55%,#350711)}
.colour-button.colour-4,.current-colour.colour-4{background:radial-gradient(circle at 30% 24%,#d9a65e,#93642c 55%,#4a2c13)}
.dock-hint{max-width:230px;color:#c3b79f;font-size:11px;line-height:1.45}
.dock-label{font-size:10px}
@media(max-width:430px){.game-identity h1{font-size:27px}.dock-hint{font-size:11px}}
@media(max-width:370px){.dock-hint{display:block;max-width:145px;font-size:9px}.colour-dock{gap:5px}.colour-options{gap:5px}}
@media(min-width:700px) and (orientation:portrait){.dock-hint{font-size:14px;line-height:1.45}.dock-label{font-size:12px}}

.game-shell,.board-wrap,.play-controls,.top-actions{
  -webkit-touch-callout:none;
  -webkit-user-select:none;
  user-select:none;
}
.game-shell button,.game-shell a,#board{
  -webkit-tap-highlight-color:transparent;
}
#board{
  touch-action:none!important;
  -webkit-user-drag:none;
  cursor:crosshair;
}
.bubble{
  stroke:#f5df9c80;
  stroke-width:.75;
}
#shooter-bubble{stroke:#f6dda0;stroke-width:1.2}
.colour-button{overflow:hidden;isolation:isolate;border-color:#f5df9c80;box-shadow:none}
.colour-button:before,.colour-button:after{content:none}
.colour-button span{position:relative;z-index:2}
.play-controls{display:flex;position:relative;align-items:center;justify-content:space-between;gap:8px;width:min(100%,430px);min-height:68px;margin:6px auto 0;padding:6px 10px;border:1px solid #e8c87670;border-radius:18px;white-space:nowrap}
.aim-controller{display:flex;min-width:0;flex:1;align-items:center;justify-content:space-between;gap:7px}
.aim-nudge{display:grid;width:42px;height:48px;place-items:center;border:1px solid #9d7c39;border-radius:14px;background:linear-gradient(145deg,#241b10,#090807);color:#ffe49a;font:32px/1 Georgia,serif;box-shadow:inset 0 1px #fff3,0 5px 12px #0008;touch-action:manipulation}
.aim-wheel{--wheel-angle:0deg;position:relative;width:58px;height:58px;border:2px solid #f2d27e;border-radius:50%;background:radial-gradient(circle,#9b7531 0 21%,transparent 23%),conic-gradient(from 30deg,#d7b75d 0 3deg,transparent 3deg 117deg,#d7b75d 117deg 123deg,transparent 123deg 237deg,#d7b75d 237deg 243deg,transparent 243deg),radial-gradient(circle at 34% 28%,#383125,#0d0c09 67%);box-shadow:inset 0 0 0 4px #070608aa,inset 0 2px 5px #fff4,0 0 10px #d7b75d44;cursor:grab;touch-action:none}
.aim-wheel:active{cursor:grabbing}
.wheel-pointer{position:absolute;inset:5px;transform:rotate(var(--wheel-angle));transition:transform .08s ease-out}
.wheel-pointer:before{content:"";position:absolute;top:1px;left:50%;width:3px;height:19px;border-radius:3px;background:linear-gradient(#fff8c8,#e5b94b);box-shadow:0 0 5px #fff7;transform:translateX(-50%)}
.wheel-pointer:after{content:"";position:absolute;top:-1px;left:50%;border-right:5px solid transparent;border-bottom:8px solid #fff2a6;border-left:5px solid transparent;transform:translateX(-50%)}
.wheel-hub{position:absolute;top:50%;left:50%;width:13px;height:13px;border:2px solid #fff0b0;border-radius:50%;background:#a47b2f;box-shadow:0 0 6px #e3bd61;transform:translate(-50%,-50%)}
.fire-button{display:flex;min-width:50px;height:48px;align-items:center;justify-content:center;border:1px solid #f2d27e;border-radius:15px;background:linear-gradient(180deg,#e0c36f,#9d772d);color:#100d08;box-shadow:inset 0 1px #fff9,0 4px 10px #0009;touch-action:manipulation}
.fire-button b{font-size:14px;letter-spacing:.1em}
.colour-picker{position:relative;margin-inline:clamp(14px,3.5vw,20px);align-self:center}
.colour-toggle{display:flex;width:62px;height:54px;padding:0 3px;align-items:center;justify-content:center;gap:3px;border:1px solid #e8c876;border-radius:16px;background:#100d12;box-shadow:inset 0 1px #fff3,0 5px 14px #0009;touch-action:manipulation}
.current-colour{display:block;width:36px;min-width:36px;height:36px;flex:0 0 36px;aspect-ratio:1;border:1px solid #f5df9c80;border-radius:50%;box-shadow:none}
.colour-chevron{width:9px;flex:0 0 9px;color:#ffe39a;font-size:15px;line-height:1;transform:translateY(-2px)}
.colour-options{position:absolute;z-index:12;right:0;bottom:calc(100% + 9px);display:flex;gap:8px;padding:10px;border:1px solid #e8c876;border-radius:17px;background:#0b0910f5;box-shadow:0 12px 34px #000d}
.colour-options[hidden]{display:none!important}
.colour-options .colour-button{width:43px;height:43px;flex:0 0 43px}
.colour-options .colour-button[aria-pressed=true]{outline-offset:2px}
.aim-nudge:focus-visible,.aim-wheel:focus-visible,.fire-button:focus-visible,.colour-toggle:focus-visible{outline:3px solid #fff;outline-offset:3px}
.aim-nudge:disabled,.fire-button:disabled,.colour-toggle:disabled{opacity:.45}
.result-stats{grid-template-columns:repeat(3,1fr)}
.result-stats div+div{border-left:1px solid #4a3e25}
.setting-note{display:block;margin-top:7px;color:#9e927b;font-size:11px;line-height:1.35}
@media(max-width:430px){.game-identity h1{font-size:24px}.scorebar span{font-size:7px}.scorebar strong{font-size:17px}.topbar{padding-inline:8px}}
@media(max-width:370px){.play-controls{gap:5px;padding-inline:5px}.aim-controller{gap:4px}.aim-nudge{width:38px}.aim-wheel{width:54px;height:54px}.fire-button{min-width:46px}.colour-options{gap:5px;padding:8px}.colour-options .colour-button{width:39px;height:39px;flex-basis:39px}}
@media(min-width:700px) and (orientation:portrait){.play-controls{width:min(100%,650px);min-height:82px;gap:13px}.aim-wheel{width:68px;height:68px}.aim-nudge{width:50px;height:56px}.fire-button{min-width:62px;height:56px}.colour-toggle{width:70px;height:64px}.current-colour{width:44px;min-width:44px;height:44px;flex-basis:44px}}
@media(min-width:800px) and (orientation:landscape){.play-controls{grid-column:2;grid-row:4;align-self:start;width:100%;margin-top:12px;padding-inline:5px;gap:5px}.aim-controller{gap:4px}.aim-nudge{width:36px}.aim-wheel{width:52px;height:52px}.fire-button{min-width:44px}.colour-picker{margin-inline:14px}.colour-toggle{width:58px}}