:root { color-scheme: dark; font-family: ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; color: #e9f6fa; background: #07151f; }
* { box-sizing: border-box; }
html, body { width: 100%; height: 100%; margin: 0; overflow: hidden; overscroll-behavior: none; }
body { background: radial-gradient(ellipse at 40% 4%, #142c3e 0, transparent 58%), radial-gradient(ellipse at 95% 100%, #182238 0, transparent 55%), #07151f; }
button, a { -webkit-tap-highlight-color: transparent; }
button { font: inherit; }
.ambient { pointer-events: none; position: fixed; width: 60vw; height: 60vw; border-radius: 50%; filter: blur(100px); opacity: .1; }
.ambient-one { background: #136e81; top: 15vh; left: -35vw; }
.ambient-two { background: #51427f; bottom: -50vw; right: -10vw; }
.app { position: relative; width: 100%; height: 100vh; height: 100dvh; display: grid; grid-template-rows: auto 1fr auto; padding: max(22px, env(safe-area-inset-top)) max(30px, env(safe-area-inset-right)) max(24px, env(safe-area-inset-bottom)) max(30px, env(safe-area-inset-left)); }
header { display: flex; align-items: center; justify-content: space-between; gap: 20px; z-index: 3; }
.brand { font-size: 26px; font-weight: 650; text-decoration: none; letter-spacing: -1px; color: #eaf5fa; display: flex; align-items: center; }
.brand-period { color: #8edcd3; }
.brand-mark { width: 23px; height: 23px; border: 1px solid #b1d8ec; border-radius: 50%; display: inline-block; margin-right: 11px; position: relative; box-shadow: inset -3px -3px 6px #7f82cd55; background: radial-gradient(at 32% 22%, #eeffff77 0, transparent 45%); }
.brand-mark::after { content: ''; position: absolute; width: 6px; height: 3px; top: 4px; left: 4px; border-radius: 50%; transform: rotate(-40deg); background: #eaffff; }
.controls { display: flex; gap: 7px; }
.control { width: 44px; height: 44px; display: grid; place-items: center; border-radius: 50%; background: #b8dbf009; color: #a5bdcc; border: 1px solid #c7e5f014; cursor: pointer; touch-action: manipulation; transition: background .2s, color .2s; }
.control:hover { background: #b8dbf01a; color: white; }
.control:focus-visible, .brand:focus-visible { outline: 2px solid #baf8e9; outline-offset: 4px; }
.control svg { width: 19px; height: 19px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.control .sound-off, .control .play-icon { display: none; }
#sound[aria-pressed="false"] .sound-on, #pause[aria-pressed="true"] .pause-icon { display: none; }
#sound[aria-pressed="false"] .sound-off, #pause[aria-pressed="true"] .play-icon { display: block; }
#playground { min-height: 0; position: relative; touch-action: manipulation; }
.intro { position: absolute; left: 50%; top: 48%; transform: translate(-50%, -50%); width: min(100%, 650px); text-align: center; pointer-events: none; transition: opacity 1.3s ease; user-select: none; }
.eyebrow { font-size: 10px; letter-spacing: 3.1px; color: #7498ad; margin: 0 0 17px; font-weight: 600; }
h1 { font-size: clamp(38px, 5vw, 72px); letter-spacing: -.055em; font-weight: 400; line-height: 1.12; margin: 0; color: #daeaf1; }
h1 em { font-family: Georgia, "Times New Roman", serif; color: #b3d5d9; font-weight: 400; }
.instruction { font-size: 13px; color: #829eae; margin-top: 20px; letter-spacing: .1px; }
body.has-popped .intro { opacity: .14; }
#bubbles, #effects { position: absolute; inset: 0; pointer-events: none; }
.bubble { --hue: 185; position: absolute; top: 0; left: 0; border: 0; margin: 0; padding: 0; border-radius: 50%; cursor: pointer; pointer-events: auto; touch-action: none; -webkit-user-select: none; user-select: none; will-change: transform; outline: none; background: transparent; }
.bubble-skin { position: absolute; inset: 0; border-radius: 50%; overflow: hidden; border: 1px solid hsl(var(--hue) 80% 78% / .55); background: radial-gradient(ellipse at 28% 18%, #ffffff28 0%, #ffffff02 32%, transparent 50%), radial-gradient(ellipse at 76% 80%, hsl(calc(var(--hue) + 45) 95% 65% / .15), transparent 65%), radial-gradient(circle at 50% 46%, transparent 37%, hsl(var(--hue) 90% 70% / .03) 55%, hsl(var(--hue) 85% 70% / .16) 79%, hsl(calc(var(--hue) + 70) 80% 80% / .55) 98%); box-shadow: inset 2px 3px 6px #ffffff23, inset -4px -4px 9px hsl(calc(var(--hue) + 50) 90% 65% / .25), 0 0 18px hsl(var(--hue) 80% 60% / .045); transition: filter .15s; }
.bubble-skin::before { content: ''; position: absolute; inset: 7%; border-radius: 50%; border-top: 3px solid #edffffa3; border-left: 1px solid #edffff35; border-right: 1px solid transparent; border-bottom: 1px solid transparent; transform: rotate(-32deg); mask-image: linear-gradient(120deg, #000 8%, transparent 47%); }
.bubble-skin::after { content: ''; position: absolute; left: 18%; top: 14%; width: 13%; height: 8%; border-radius: 50%; transform: rotate(-36deg); background: #f8ffffb0; filter: blur(.6px); }
.bubble:hover .bubble-skin { filter: brightness(1.16); }
.bubble:focus-visible .bubble-skin { outline: 2px solid #fff; outline-offset: 5px; }
.bubble.arriving .bubble-skin { animation: arrive .8s both cubic-bezier(.2,.8,.3,1); }
@keyframes arrive { from { opacity: 0; transform: scale(.4); } to { opacity: 1; transform: scale(1); } }
.pop-ring { position: absolute; border: 1.5px solid hsl(var(--hue) 85% 80% / .65); border-radius: 50%; transform: translate(-50%, -50%); animation: ripple .4s ease-out forwards; }
@keyframes ripple { to { transform: translate(-50%, -50%) scale(1.25); opacity: 0; } }
.spark { position: absolute; width: 4px; height: 4px; background: hsl(var(--hue) 95% 85% / .9); border-radius: 50%; animation: scatter .5s ease-out forwards; }
@keyframes scatter { to { transform: translate(var(--dx), var(--dy)) scale(.1); opacity: 0; } }
#refill { position: absolute; inset: 0; display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 12px; margin: 0; font-size: 30px; font-weight: 300; letter-spacing: -.8px; opacity: 0; transition: opacity .25s; pointer-events: none; }
#refill span { font-size: 12px; letter-spacing: .2px; color: #8cabb9; }
#refill.visible { opacity: 1; }
body.refilling .intro { opacity: 0; }
footer { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding-top: 10px; color: #6e8c9e; font-size: 11px; z-index: 3; letter-spacing: .2px; }
.footnote { display: flex; align-items: center; gap: 8px; }
.tiny-spark { color: #a0c9c8; font-size: 21px; line-height: 1; }
.counter { display: flex; align-items: center; gap: 7px; color: #91acba; font-variant-numeric: tabular-nums; white-space: nowrap; }
.counter-dot { width: 4px; height: 4px; background: #7bc2bc; border-radius: 50%; }
.sr-only { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }
.noscript { position: fixed; inset: 40% 10%; text-align: center; }
@media (max-width: 600px) { .app { padding-left: max(18px, env(safe-area-inset-left)); padding-right: max(18px, env(safe-area-inset-right)); padding-top: max(16px, env(safe-area-inset-top)); padding-bottom: max(20px, env(safe-area-inset-bottom)); } .brand { font-size: 23px; } .brand-mark { width: 20px; height: 20px; margin-right: 8px; } .controls { gap: 5px; } .eyebrow { font-size: 9px; letter-spacing: 2.3px; } .instruction { font-size: 12px; max-width: 230px; margin: 17px auto 0; line-height: 1.7; } footer { font-size: 10px; letter-spacing: 0; } }
@media (max-height: 450px) { .app { padding-top: 8px; padding-bottom: 8px; } .intro .eyebrow, .instruction { display: none; } header .control { width: 38px; height: 38px; } footer { padding-top: 4px; } }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; } }
/* Settings controls stay out of the play area until needed. */
#settings-dialog { width: min(420px, calc(100vw - 32px)); max-height: calc(100dvh - 32px); padding: 26px; border: 1px solid #aac7dc30; border-radius: 25px; color: #e9f6fa; background: linear-gradient(145deg, #173044, #0d1d2b); box-shadow: 0 24px 120px #0009; overflow-y: auto; }
#settings-dialog::backdrop { background: #020b14aa; backdrop-filter: blur(8px); }
.settings-heading { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.settings-heading .eyebrow { margin: 0 0 9px; font-size: 9px; letter-spacing: 2px; }
.settings-heading h2 { font-size: 25px; letter-spacing: -.8px; font-weight: 500; margin: 0; }
.close-settings { flex-shrink: 0; }
#settings-description { color: #90acbc; font-size: 12px; line-height: 1.7; margin: 16px 0 28px; }
.volume-heading { display: flex; justify-content: space-between; gap: 16px; font-size: 14px; }
.volume-heading output { color: #b8e7df; font-variant-numeric: tabular-nums; }
.volume-slider { display: block; width: 100%; height: 44px; margin: 6px 0 0; cursor: pointer; accent-color: #a1e0d4; touch-action: pan-x pinch-zoom; }
.volume-slider:focus-visible { outline: 2px solid #baf8e9; outline-offset: 3px; border-radius: 5px; }
.setting-help { color: #8ba6b7; margin: 6px 0 0; font-size: 11px; line-height: 1.6; }
.setting-row { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-top: 22px; padding-top: 20px; border-top: 1px solid #bbd9ee18; }
.setting-row > div > span { font-size: 14px; }
.switch { min-width: 50px; width: 50px; height: 44px; border: 0; padding: 8px 0; background: transparent; cursor: pointer; position: relative; }
.switch::before { content: ''; position: absolute; top: 8px; left: 0; right: 0; bottom: 8px; border-radius: 25px; background: #4e687866; border: 1px solid #6f899977; transition: background .2s; }
.switch span { position: absolute; top: 12px; left: 4px; width: 20px; height: 20px; border-radius: 50%; background: #d3dfe7; transition: transform .2s, background .2s; }
.switch[aria-checked="true"]::before { background: #73c8b9; border-color: #b5f1e3; }
.switch[aria-checked="true"] span { transform: translateX(22px); background: #092731; }
.switch:focus-visible { outline: 2px solid #baf8e9; outline-offset: 4px; border-radius: 24px; }
.settings-note { color: #829cac; line-height: 1.6; font-size: 10px; margin: 22px 0; }
.done-button { width: 100%; min-height: 46px; border: 1px solid #91d9cf40; border-radius: 13px; background: #a7e7dd; color: #123741; font-size: 13px; font-weight: 600; cursor: pointer; }
.done-button:hover { background: #c2f4eb; }
.done-button:focus-visible { outline: 2px solid white; outline-offset: 4px; }
@media (max-width: 360px) { #settings-dialog { padding: 21px; } .settings-heading h2 { font-size: 23px; } }

/* Menus and information stay zoomable. Only active gameplay excludes pinch/double-tap. */
html, body { touch-action: auto; -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
#playground, #bubbles, .bubble { touch-action: none; -webkit-touch-callout: none; }
.controls, .control, .switch, .done-button, .test-pop { touch-action: manipulation; -webkit-touch-callout: none; }
#settings-dialog { touch-action: auto; overscroll-behavior: contain; }
#settings-dialog input, #settings-dialog select, #settings-dialog textarea { font-size: 16px; }
.volume-slider { touch-action: pan-x pinch-zoom; }
.bubble.pressed .bubble-skin { filter: brightness(1.15); }
.volume-help-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.volume-help-row .setting-help { margin: 0; }
.test-pop { flex-shrink: 0; min-height: 44px; padding: 0 12px; font-size: 11px; border: 1px solid #a7d8d330; border-radius: 12px; background: #9fded410; color: #b7e8e1; cursor: pointer; }
.test-pop:focus-visible { outline: 2px solid #baf8e9; outline-offset: 3px; }

.test-pop:disabled { opacity: .4; cursor: default; }

.audio-status { font-size: 11px; line-height: 1.6; color: #b5d2dc; margin: 18px 0 0; }

@media (max-width: 600px) {
  #settings-description { margin: 12px 0 18px; }
  .setting-row { margin-top: 16px; padding-top: 16px; }
  .audio-status { margin-top: 14px; }
  .settings-note { margin: 14px 0; }
}

.audio-section { padding: 10px 0 14px; border-top: 1px solid #bbd9ee18; }
.audio-section .setting-row { margin: 0 0 8px; padding: 0; border: 0; font-size: 14px; }
.audio-section .volume-heading { align-items: center; font-size: 12px; gap: 10px; }
.pop-volume-heading label { flex: 1; }
.audio-section .volume-slider { margin-top: 4px; }
.audio-section .test-pop { min-height: 40px; }

.count-section { padding: 0 0 18px; }
.count-section .volume-heading { align-items: center; }
#empty-state { position: absolute; inset: 0; margin: 0; display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 12px; text-align: center; color: #c2dce4; font-size: 23px; }
#empty-state[hidden] { display: none; }
#empty-state span { max-width: 260px; font-size: 12px; line-height: 1.6; color: #90acbc; }
body.empty-playground .intro { opacity: 0; }

.pop-style-group { margin: 8px 0 0; padding: 8px 0 0; border: 0; }
.pop-style-group legend { color: #90acbc; font-size: 11px; padding: 0; }
.pop-style-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 46px; }
.pop-style-row label { display: flex; align-items: center; gap: 9px; flex: 1; min-height: 44px; font-size: 13px; cursor: pointer; touch-action: manipulation; }
.pop-style-row input { width: 18px; height: 18px; margin: 0; accent-color: #a1e0d4; }
.pop-style-row input:focus-visible { outline: 2px solid #baf8e9; outline-offset: 3px; }

/* This class follows game state, not pointer coordinates or a click timer. */
html.gameplay-zoom-locked, html.gameplay-zoom-locked body { touch-action: pan-x pan-y; }
#start-screen, #settings-dialog, #settings-dialog .controls { touch-action: auto; }

/* Keep long presses on active game screens from starting native text/image
   selection, callouts or HTML dragging. Safari needs the prefixed selection
   property on containers and descendants, including header/footer labels where
   selection could begin outside the field. Pointer-based dragging, native clicks
   and carousel scrolling are unchanged. The menu and Settings are outside these
   screens; matching information/pause/results remove the active-game class. */
html.gameplay-zoom-locked #free-screen,
html.gameplay-zoom-locked #free-screen *,
html.gameplay-zoom-locked #match-screen,
html.gameplay-zoom-locked #match-screen * {
  -webkit-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
  -webkit-user-drag: none;
}