:root {
  color-scheme: light;
  font-family: "Trebuchet MS", "Arial Rounded MT Bold", system-ui, sans-serif;
  background: #78dced;
  color: #163d71;
}

* {
  box-sizing: border-box;
}

html,
body {
  width: 100%;
  min-height: 100%;
  margin: 0;
  overflow: hidden;
}

body {
  overscroll-behavior: none;
  touch-action: manipulation;
}

button,
input,
select {
  font: inherit;
}

button {
  border: 0;
}

button:not(:disabled),
input:not(:disabled),
select:not(:disabled),
summary {
  -webkit-tap-highlight-color: transparent;
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.game {
  --bg-start: #a8f1fa;
  --bg-mid: #6fd7ec;
  --bg-end: #78c5f1;
  --orb-one: #e1fdbd;
  --orb-two: #b4c4ff;
  --glow-one: rgb(255 255 255 / 22%);
  --glow-two: rgb(223 255 206 / 26%);
  --ink: #164477;
  --ink-soft: #28588e;
  --accent: #4c5eb1;
  --panel-tint: rgb(255 255 255 / 78%);
  position: relative;
  width: 100vw;
  height: 100dvh;
  min-height: 100svh;
  overflow: hidden;
  isolation: isolate;
  background:
    radial-gradient(circle at 13% 22%, rgb(255 255 255 / 68%) 0 1px, transparent 2px),
    radial-gradient(circle at 82% 68%, rgb(255 255 255 / 45%) 0 2px, transparent 3px),
    linear-gradient(155deg, var(--bg-start) 0%, var(--bg-mid) 46%, var(--bg-end) 100%);
  transition: background 420ms ease;
}

.game[data-theme="ocean"] {
  --bg-start: #a7f0f6;
  --bg-mid: #53c8dc;
  --bg-end: #4793d8;
  --orb-one: #ccf9dd;
  --orb-two: #9cc9ff;
  --glow-one: rgb(224 255 255 / 26%);
  --glow-two: rgb(177 229 255 / 32%);
  --ink: #124b72;
  --ink-soft: #236e94;
  --accent: #2877a5;
}

.game[data-theme="candy"] {
  --bg-start: #ffd4e9;
  --bg-mid: #e8a5ea;
  --bg-end: #b5a5ee;
  --orb-one: #fff0a5;
  --orb-two: #ffa7c7;
  --glow-one: rgb(255 255 255 / 32%);
  --glow-two: rgb(255 218 250 / 35%);
  --ink: #763c78;
  --ink-soft: #8d4f91;
  --accent: #b94e93;
}

.game[data-theme="garden"] {
  --bg-start: #d7f6b8;
  --bg-mid: #8edbb0;
  --bg-end: #6dbbd9;
  --orb-one: #fff1a4;
  --orb-two: #9be7a7;
  --glow-one: rgb(255 255 220 / 28%);
  --glow-two: rgb(225 255 201 / 35%);
  --ink: #285b4e;
  --ink-soft: #397361;
  --accent: #4f9870;
}

.game[data-theme="night"] {
  --bg-start: #7773cc;
  --bg-mid: #5968ba;
  --bg-end: #35478a;
  --orb-one: #9f8ee4;
  --orb-two: #4d9dd3;
  --glow-one: rgb(222 221 255 / 22%);
  --glow-two: rgb(144 216 255 / 20%);
  --ink: #edf5ff;
  --ink-soft: #d9e7ff;
  --accent: #f7d86a;
  --panel-tint: rgb(251 251 255 / 88%);
}

.game[data-theme="rainbow"] {
  --bg-start: #ffc7dd;
  --bg-mid: #a8d7f8;
  --bg-end: #c4eaa8;
  --orb-one: #ffe395;
  --orb-two: #e5b6ff;
  --glow-one: rgb(255 255 255 / 31%);
  --glow-two: rgb(255 235 176 / 26%);
  --ink: #35558d;
  --ink-soft: #4b6ca1;
  --accent: #a256ad;
}

.game::before,
.game::after {
  position: absolute;
  z-index: -1;
  width: 38vmax;
  height: 38vmax;
  border-radius: 50%;
  content: "";
  filter: blur(2px);
  opacity: 0.55;
}

.game::before {
  top: -19vmax;
  right: -12vmax;
  background: var(--orb-one);
}

.game::after {
  bottom: -22vmax;
  left: -13vmax;
  background: var(--orb-two);
}

.sky-glow {
  position: absolute;
  z-index: 0;
  border-radius: 50%;
  pointer-events: none;
  filter: blur(7px);
}

.glow-one {
  width: 30vw;
  height: 30vw;
  top: 14%;
  left: 20%;
  background: var(--glow-one);
}

.glow-two {
  width: 24vw;
  height: 24vw;
  right: 14%;
  bottom: 12%;
  background: var(--glow-two);
}

.bubble-field,
.pop-layer {
  position: absolute;
  inset: 0;
}

.bubble-field {
  z-index: 1;
  touch-action: none;
}

.game-header {
  position: relative;
  z-index: 6;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: max(1.15rem, env(safe-area-inset-top)) max(1rem, env(safe-area-inset-right)) 0 max(1rem, env(safe-area-inset-left));
  pointer-events: none;
}

.brand,
.score-card,
.reset-button {
  border: 2px solid rgb(255 255 255 / 60%);
  box-shadow: 0 10px 24px rgb(37 95 151 / 19%), inset 0 1px 0 rgb(255 255 255 / 62%);
  backdrop-filter: blur(9px);
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  padding: 0.54rem 0.9rem 0.54rem 0.66rem;
  border-radius: 999px;
  background: rgb(255 255 255 / 46%);
  color: var(--ink);
  font-size: clamp(1rem, 3.5vw, 1.3rem);
  font-weight: 900;
  letter-spacing: 0.01em;
  cursor: pointer;
  pointer-events: auto;
  transition: opacity 460ms ease, transform 460ms cubic-bezier(0.22, 0.8, 0.36, 1), box-shadow 180ms ease;
}

.brand:hover {
  box-shadow: 0 12px 28px rgb(37 95 151 / 27%), inset 0 1px 0 white;
  transform: translateY(-2px);
}

.brand:active {
  transform: scale(0.97);
}

.brand-bubble {
  display: inline-block;
  width: 1.4rem;
  height: 1.4rem;
  border: 2px solid rgb(255 255 255 / 85%);
  border-radius: 50%;
  background:
    radial-gradient(circle at 30% 25%, #fff 0 10%, transparent 12%),
    radial-gradient(circle at 65% 72%, rgb(255 255 255 / 30%) 0 18%, transparent 21%),
    linear-gradient(135deg, #ff92c9, #8a8dff);
  box-shadow: inset -3px -4px 6px rgb(86 83 181 / 30%);
}

.game-controls {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  min-height: 3.3rem;
  pointer-events: auto;
}

.score-card {
  position: relative;
  z-index: 2;
  display: grid;
  grid-auto-flow: column;
  grid-template-columns: auto auto;
  align-items: center;
  gap: 0.55rem;
  min-width: 7.5rem;
  padding: 0.48rem 0.75rem;
  border-radius: 1rem;
  background: rgb(255 255 255 / 53%);
  color: var(--ink);
}

.score-card.is-bumping {
  animation: score-bump 350ms cubic-bezier(0.22, 0.83, 0.32, 1);
}

.score-label {
  color: color-mix(in srgb, var(--ink) 70%, white);
  font-size: 0.76rem;
  font-weight: 800;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.score-value {
  min-width: 1.4ch;
  color: var(--ink);
  font-size: 1.65rem;
  line-height: 1;
  text-align: center;
}

.reset-button {
  position: absolute;
  z-index: 1;
  top: 50%;
  right: 0;
  display: grid;
  place-items: center;
  width: 2.7rem;
  min-width: 2.7rem;
  min-height: 2.55rem;
  padding: 0;
  border-radius: 999px;
  background: rgb(255 255 255 / 78%);
  color: var(--ink-soft);
  font-size: 1.18rem;
  font-weight: 900;
  cursor: pointer;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translateY(-50%);
  transition: right 560ms cubic-bezier(0.22, 0.87, 0.26, 1), opacity 220ms ease, visibility 0s linear 560ms, box-shadow 160ms ease, transform 160ms ease;
}

.game.is-started .reset-button {
  right: calc(100% + 0.48rem);
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translateY(-50%);
  transition: right 560ms cubic-bezier(0.22, 0.87, 0.26, 1), opacity 220ms ease, visibility 0s linear, box-shadow 160ms ease, transform 160ms ease;
}

.reset-button span {
  font-size: 1.28rem;
  line-height: 1;
}

.game.is-started .reset-button:hover {
  box-shadow: 0 12px 26px rgb(37 95 151 / 26%), inset 0 1px 0 white;
  transform: translateY(calc(-50% - 2px));
}

.game.is-started .reset-button:active {
  transform: translateY(calc(-50% + 1px)) scale(0.96);
}

.welcome {
  position: relative;
  z-index: 2;
  max-width: 31rem;
  margin: clamp(1.7rem, 7vh, 5.8rem) auto 0;
  padding: 0 1rem;
  color: var(--ink);
  text-align: center;
  pointer-events: none;
  text-shadow: 0 1px 0 rgb(255 255 255 / 28%);
  transition: opacity 520ms ease, transform 520ms cubic-bezier(0.22, 0.8, 0.36, 1);
}

.welcome.is-hidden {
  opacity: 0;
  transform: translateY(-0.85rem) scale(0.97);
}

.welcome .eyebrow {
  margin: 0 0 0.25rem;
  color: var(--accent);
  font-size: clamp(0.85rem, 2.9vw, 1rem);
  font-weight: 900;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.welcome h1 {
  margin: 0;
  font-size: clamp(2rem, 9vw, 4.35rem);
  line-height: 0.93;
  letter-spacing: -0.055em;
}

.welcome p:last-child {
  margin: 0.8rem 0 0;
  color: var(--ink-soft);
  font-size: clamp(1rem, 3.7vw, 1.22rem);
  font-weight: 700;
}

.bubble {
  position: absolute;
  display: grid;
  place-items: center;
  width: var(--size);
  height: var(--size);
  margin: 0;
  padding: 0;
  overflow: hidden;
  border: min(0.28rem, calc(var(--size) * 0.05)) solid rgb(255 255 255 / 75%);
  border-radius: 50%;
  outline: none;
  background:
    radial-gradient(circle at 29% 22%, rgb(255 255 255 / 94%) 0 7%, rgb(255 255 255 / 40%) 8% 13%, transparent 20%),
    radial-gradient(circle at 68% 72%, rgb(255 255 255 / 27%) 0 13%, transparent 18%),
    linear-gradient(140deg, var(--light), var(--color));
  box-shadow:
    inset -0.5rem -0.7rem 0.9rem rgb(31 66 161 / 21%),
    inset 0.25rem 0.16rem 0.6rem rgb(255 255 255 / 75%),
    0 0.4rem 1rem rgb(51 95 176 / 20%);
  cursor: pointer;
  touch-action: none;
  will-change: transform;
}

.bubble::before,
.bubble::after {
  position: absolute;
  content: "";
  pointer-events: none;
}

.bubble::after {
  width: 19%;
  height: 10%;
  border-radius: 50%;
  background: rgb(255 255 255 / 62%);
  transform: translate(-130%, 80%) rotate(-25deg);
}

.game[data-bubble-style="soft"] .bubble {
  border-color: rgb(255 255 255 / 65%);
  box-shadow: inset -0.35rem -0.45rem 0.8rem rgb(59 91 161 / 17%), 0 0.45rem 1.1rem rgb(55 95 176 / 16%);
  filter: saturate(0.82) brightness(1.08);
}

.game[data-bubble-style="glimmer"] .bubble::before {
  inset: 12%;
  border-radius: 50%;
  background:
    radial-gradient(circle at 22% 70%, rgb(255 255 255 / 70%) 0 2%, transparent 3%),
    radial-gradient(circle at 72% 22%, rgb(255 255 255 / 55%) 0 2%, transparent 3%),
    radial-gradient(circle at 76% 60%, rgb(255 255 255 / 40%) 0 3%, transparent 4%);
}

.bubble:focus-visible,
.brand:focus-visible,
.reset-button:focus-visible,
.icon-button:focus-visible,
.preset-card:focus-visible,
.save-button:focus-visible,
.secondary-button:focus-visible,
.text-button:focus-visible,
select:focus-visible,
input:focus-visible,
summary:focus-visible {
  outline: 4px solid #173c74;
  outline-offset: 3px;
}

.bubble.is-popping {
  pointer-events: none;
  animation: bubble-pop 230ms cubic-bezier(0.22, 0.77, 0.26, 1) forwards;
}

.pop-layer {
  z-index: 7;
  pointer-events: none;
}

.spark {
  position: absolute;
  display: grid;
  place-items: center;
  width: var(--spark-size);
  height: var(--spark-size);
  margin: calc(var(--spark-size) / -2);
  border-radius: 50%;
  background: var(--spark-color);
  box-shadow: 0 0 0.45rem rgb(255 255 255 / 70%);
  color: var(--spark-color);
  font-weight: 900;
  line-height: 1;
  animation: sparkle 480ms ease-out forwards;
}

.spark.effect-star,
.spark.effect-heart {
  width: auto;
  height: auto;
  margin: 0;
  background: transparent;
  box-shadow: none;
  font-size: calc(var(--spark-size) * 1.8);
  text-shadow: 0 0 0.4rem rgb(255 255 255 / 80%);
}

.spark.effect-confetti {
  border-radius: 2px;
  transform: rotate(24deg);
}

.spark.effect-rainbow {
  background: conic-gradient(#ff729b, #ffc45d, #a6e06a, #6fcbea, #aa8ce8, #ff729b);
}

.reward-stage {
  position: absolute;
  z-index: 8;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
}

.reward-stage.is-active::before {
  position: absolute;
  inset: -15%;
  content: "";
  background: radial-gradient(circle at var(--reward-x, 50%) var(--reward-y, 47%), rgb(255 255 255 / 58%), rgb(255 255 255 / 0%) 50%);
  animation: reward-stage-flash 780ms ease-out forwards;
}

.reward-big-bubble,
.reward-bonus-bubble {
  position: absolute;
  width: var(--reward-size);
  height: var(--reward-size);
  border: max(3px, calc(var(--reward-size) * 0.025)) solid rgb(255 255 255 / 85%);
  border-radius: 50%;
  background:
    radial-gradient(circle at 31% 25%, rgb(255 255 255 / 94%) 0 5%, transparent 6%),
    radial-gradient(circle at 65% 72%, rgb(255 255 255 / 31%) 0 17%, transparent 20%),
    linear-gradient(135deg, var(--reward-light), var(--reward-color));
  box-shadow: inset calc(var(--reward-size) * -0.1) calc(var(--reward-size) * -0.13) calc(var(--reward-size) * 0.2) rgb(47 66 154 / 28%), 0 calc(var(--reward-size) * 0.08) calc(var(--reward-size) * 0.19) rgb(30 75 144 / 28%);
}

.reward-big-bubble {
  top: var(--reward-y, 47%);
  left: var(--reward-x, 50%);
  animation: reward-big-pop 1.25s cubic-bezier(0.18, 0.82, 0.26, 1) forwards;
}

.reward-big-bubble::after,
.reward-bonus-bubble::after {
  position: absolute;
  top: 16%;
  left: 18%;
  width: 21%;
  height: 12%;
  border-radius: 50%;
  content: "";
  background: rgb(255 255 255 / 60%);
  transform: rotate(-24deg);
}

.reward-ring,
.reward-rainbow-ring {
  position: absolute;
  top: var(--reward-y, 47%);
  left: var(--reward-x, 50%);
  width: var(--ring-size);
  height: var(--ring-size);
  border: clamp(4px, 0.9vw, 10px) solid var(--ring-color);
  border-radius: 50%;
  box-shadow: 0 0 1rem color-mix(in srgb, var(--ring-color) 65%, white);
  opacity: 0;
  animation: reward-ring 1.16s ease-out var(--reward-delay, 0ms) forwards;
}

.reward-rainbow-ring {
  border-width: clamp(5px, 1.15vw, 12px);
  animation-duration: 1.28s;
}

.reward-firework-core,
.reward-firework-spark {
  position: absolute;
  display: block;
  background: var(--spark-color);
  box-shadow: 0 0 0.65rem color-mix(in srgb, var(--spark-color) 65%, white), 0 0 1.2rem rgb(255 255 255 / 62%);
}

.reward-firework-core {
  width: 1.85rem;
  height: 1.85rem;
  margin: -0.925rem 0 0 -0.925rem;
  border: 3px solid rgb(255 255 255 / 84%);
  border-radius: 50%;
  animation: reward-firework-core 740ms ease-out var(--reward-delay, 0ms) forwards;
}

.reward-firework-spark {
  width: clamp(0.3rem, 1vw, 0.52rem);
  height: clamp(0.3rem, 1vw, 0.52rem);
  margin: -0.25rem 0 0 -0.25rem;
  border-radius: 50%;
  animation: reward-firework 1.06s cubic-bezier(0.14, 0.75, 0.24, 1) var(--reward-delay, 0ms) forwards;
}

.reward-bonus-bubble {
  animation: reward-bonus-bubble 1.48s cubic-bezier(0.19, 0.78, 0.25, 1) var(--reward-delay, 0ms) forwards;
}

.game.prefers-stillness .reward-big-bubble,
.game.prefers-stillness .reward-ring,
.game.prefers-stillness .reward-rainbow-ring,
.game.prefers-stillness .reward-firework-core,
.game.prefers-stillness .reward-firework-spark,
.game.prefers-stillness .reward-bonus-bubble {
  animation-duration: 620ms;
}

.game.is-high-contrast {
  --ink: #082a5b;
  --ink-soft: #123e77;
}

.game.is-high-contrast .brand,
.game.is-high-contrast .score-card,
.game.is-high-contrast .reset-button {
  border-color: #fff;
  background: rgb(255 255 255 / 93%);
  box-shadow: 0 0.35rem 0.75rem rgb(16 50 98 / 30%);
}

.game.is-high-contrast .bubble {
  border-color: #fff;
  box-shadow: inset -0.5rem -0.7rem 0.9rem rgb(11 31 101 / 35%), 0 0.4rem 1rem rgb(10 39 112 / 38%);
}

.settings-dialog[hidden] {
  display: none;
}

.settings-dialog {
  position: absolute;
  z-index: 30;
  inset: 0;
  display: grid;
  place-items: center;
  padding: max(1rem, env(safe-area-inset-top)) max(1rem, env(safe-area-inset-right)) max(1rem, env(safe-area-inset-bottom)) max(1rem, env(safe-area-inset-left));
}

.settings-scrim {
  position: absolute;
  inset: 0;
  background: rgb(16 41 90 / 58%);
  backdrop-filter: blur(8px);
}

.settings-panel {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  width: min(43rem, 100%);
  max-height: min(90dvh, 54rem);
  overflow: hidden;
  border: 2px solid rgb(255 255 255 / 70%);
  border-radius: 1.8rem;
  background: var(--panel-tint);
  box-shadow: 0 1.6rem 4.5rem rgb(12 31 76 / 42%), inset 0 1px 0 rgb(255 255 255 / 78%);
  color: #254c7f;
  animation: panel-in 260ms cubic-bezier(0.22, 0.86, 0.32, 1);
}

.settings-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
  padding: 1.35rem 1.4rem 1.05rem;
  border-bottom: 1px solid rgb(58 99 154 / 14%);
  background: linear-gradient(120deg, rgb(255 255 255 / 48%), rgb(239 250 255 / 30%));
}

.settings-kicker,
.section-kicker {
  display: block;
  margin: 0 0 0.18rem;
  color: #6d75b9;
  font-size: 0.72rem;
  font-weight: 900;
  letter-spacing: 0.11em;
  text-transform: uppercase;
}

.settings-header h2,
.section-heading h3 {
  margin: 0;
  color: #224b7d;
  letter-spacing: -0.035em;
}

.settings-header h2 {
  font-size: clamp(1.55rem, 5vw, 2.05rem);
  line-height: 1;
}

.settings-header p:last-child {
  max-width: 30rem;
  margin: 0.45rem 0 0;
  color: #56749c;
  font-size: 0.94rem;
  font-weight: 700;
}

.icon-button {
  display: grid;
  flex: 0 0 auto;
  place-items: center;
  width: 2.55rem;
  height: 2.55rem;
  border-radius: 50%;
  background: rgb(245 250 255 / 88%);
  color: #416797;
  font-size: 1.8rem;
  line-height: 1;
  cursor: pointer;
  transition: background 150ms ease, transform 150ms ease;
}

.icon-button:hover {
  background: #fff;
  transform: rotate(8deg) scale(1.04);
}

#settings-form {
  display: flex;
  flex: 1 1 auto;
  min-height: 0;
  flex-direction: column;
}

.settings-scroll {
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 1rem 1.35rem 1.2rem;
}

.settings-section {
  margin: 0 0 0.75rem;
  border: 1px solid rgb(56 100 156 / 16%);
  border-radius: 1.1rem;
  background: rgb(255 255 255 / 52%);
}

.preset-section {
  padding: 1rem;
}

.section-heading {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 0.85rem;
}

.section-heading h3 {
  font-size: 1.22rem;
}

.section-note {
  max-width: 13rem;
  margin: 0.1rem 0 0;
  color: #5f78a0;
  font-size: 0.82rem;
  font-weight: 700;
  text-align: right;
}

.preset-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0.58rem;
}

.preset-card {
  display: grid;
  justify-items: center;
  gap: 0.2rem;
  min-height: 6.55rem;
  padding: 0.68rem 0.4rem;
  border: 2px solid transparent;
  border-radius: 0.95rem;
  background: rgb(236 247 255 / 76%);
  color: #45688f;
  cursor: pointer;
  text-align: center;
  transition: transform 160ms ease, background 160ms ease, border-color 160ms ease, box-shadow 160ms ease;
}

.preset-card:hover {
  background: #fff;
  transform: translateY(-2px);
}

.preset-card.is-active {
  border-color: #6f85d3;
  background: linear-gradient(145deg, #ffffff, #e6efff);
  box-shadow: 0 0.45rem 0.9rem rgb(67 101 169 / 17%);
  color: #254b7e;
}

.preset-card strong {
  font-size: 1rem;
}

.preset-card span:last-child {
  font-size: 0.7rem;
  font-weight: 700;
  line-height: 1.1;
}

.preset-icon {
  display: grid;
  place-items: center;
  width: 1.85rem;
  height: 1.85rem;
  border-radius: 50%;
  background: rgb(255 255 255 / 75%);
  font-size: 1.05rem;
}

.advanced-settings {
  overflow: hidden;
}

.advanced-settings summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.92rem 1rem;
  color: #315a8c;
  cursor: pointer;
  list-style: none;
}

.advanced-settings summary::-webkit-details-marker {
  display: none;
}

.advanced-settings summary strong {
  display: block;
  font-size: 1.02rem;
  letter-spacing: -0.015em;
}

.summary-arrow {
  font-size: 1.4rem;
  transition: transform 180ms ease;
}

.advanced-settings[open] .summary-arrow {
  transform: rotate(180deg);
}

.settings-content {
  display: grid;
  gap: 0.8rem;
  padding: 0 1rem 1rem;
  border-top: 1px solid rgb(56 100 156 / 12%);
}

.field-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.72rem;
}

.field-grid label,
.range-setting {
  display: grid;
  gap: 0.37rem;
  color: #385f90;
  font-size: 0.86rem;
  font-weight: 900;
}

select {
  width: 100%;
  min-height: 2.7rem;
  padding: 0.5rem 2rem 0.5rem 0.72rem;
  border: 1px solid rgb(61 103 159 / 20%);
  border-radius: 0.7rem;
  background: rgb(255 255 255 / 86%);
  color: #315a8c;
  font-weight: 800;
  cursor: pointer;
}

.range-setting {
  padding: 0.2rem 0;
}

.range-control {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 0.7rem;
}

input[type="range"] {
  width: 100%;
  accent-color: #6c7dc8;
  cursor: pointer;
}

output {
  min-width: 3.25rem;
  padding: 0.28rem 0.42rem;
  border-radius: 0.5rem;
  background: #e5eeff;
  color: #315a8c;
  font-size: 0.78rem;
  text-align: center;
}

.indented-setting {
  padding-left: 2.8rem;
}

.range-setting.is-disabled {
  opacity: 0.45;
}

.toggle-setting {
  position: relative;
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: center;
  gap: 0.72rem;
  min-height: 3.5rem;
  padding: 0.55rem 0.02rem;
  color: #3a618f;
  cursor: pointer;
}

.toggle-setting input {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
}

.toggle-ui {
  position: relative;
  width: 2.25rem;
  height: 1.35rem;
  border-radius: 999px;
  background: #c1cee5;
  box-shadow: inset 0 1px 2px rgb(35 73 126 / 16%);
  transition: background 180ms ease;
}

.toggle-ui::after {
  position: absolute;
  top: 0.18rem;
  left: 0.18rem;
  width: 0.99rem;
  height: 0.99rem;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 1px 3px rgb(35 73 126 / 25%);
  content: "";
  transition: transform 180ms ease;
}

.toggle-setting input:checked + .toggle-ui {
  background: #6f86d7;
}

.toggle-setting input:checked + .toggle-ui::after {
  transform: translateX(0.9rem);
}

.toggle-setting strong,
.toggle-setting small {
  display: block;
}

.toggle-setting strong {
  font-size: 0.91rem;
}

.toggle-setting small {
  margin-top: 0.12rem;
  color: #6d84a4;
  font-size: 0.74rem;
  font-weight: 700;
  line-height: 1.25;
}

.toggle-setting:has(input:focus-visible) .toggle-ui {
  outline: 4px solid #173c74;
  outline-offset: 3px;
}

.gesture-reminder {
  margin: 0.9rem 0 0.05rem;
  color: #647d9f;
  font-size: 0.76rem;
  font-weight: 700;
  line-height: 1.35;
  text-align: center;
}

.settings-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.8rem;
  padding: 0.85rem 1.35rem max(0.95rem, env(safe-area-inset-bottom));
  border-top: 1px solid rgb(56 100 156 / 16%);
  background: rgb(255 255 255 / 48%);
}

.settings-footer-actions {
  display: flex;
  align-items: center;
  gap: 0.55rem;
}

.secondary-button,
.text-button,
.save-button {
  min-height: 2.7rem;
  padding: 0.55rem 0.85rem;
  border-radius: 0.72rem;
  font-size: 0.85rem;
  font-weight: 900;
  cursor: pointer;
}

.secondary-button {
  border: 1px solid rgb(61 103 159 / 22%);
  background: rgb(255 255 255 / 62%);
  color: #5b7398;
}

.text-button {
  background: transparent;
  color: #637d9f;
}

.save-button {
  border: 1px solid #5875c5;
  background: linear-gradient(135deg, #718bd9, #5d73c5);
  box-shadow: 0 0.35rem 0.7rem rgb(73 98 174 / 25%), inset 0 1px 0 rgb(255 255 255 / 30%);
  color: #fff;
}

.secondary-button:hover,
.text-button:hover {
  background: #fff;
}

.save-button:hover {
  filter: brightness(1.06);
  transform: translateY(-1px);
}

.game.is-settings-open .bubble,
.game.is-settings-open .welcome,
.game.is-settings-open .brand,
.game.is-settings-open .game-controls {
  filter: saturate(0.85);
}

@keyframes bubble-pop {
  0% {
    opacity: 1;
    transform: translate3d(var(--x), var(--y), 0) scale(1);
  }
  55% {
    opacity: 0.84;
    transform: translate3d(var(--x), var(--y), 0) scale(1.25);
  }
  100% {
    opacity: 0;
    transform: translate3d(var(--x), var(--y), 0) scale(0.08);
  }
}

@keyframes sparkle {
  from {
    opacity: 1;
    transform: translate(0, 0) scale(1);
  }
  to {
    opacity: 0;
    transform: translate(var(--move-x), var(--move-y)) scale(0.25);
  }
}

@keyframes reward-stage-flash {
  0% {
    opacity: 0;
    transform: scale(0.55);
  }
  24% {
    opacity: 1;
  }
  100% {
    opacity: 0;
    transform: scale(1.12);
  }
}

@keyframes reward-big-pop {
  0% {
    opacity: 0;
    transform: translate(-50%, -50%) scale(0.18);
  }
  20% {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1.12);
  }
  56% {
    opacity: 1;
    transform: translate(-50%, -50%) scale(0.96);
  }
  100% {
    opacity: 0;
    transform: translate(-50%, -50%) scale(1.42);
  }
}

@keyframes reward-ring {
  0% {
    opacity: 0.88;
    transform: translate(-50%, -50%) scale(0.18);
  }
  100% {
    opacity: 0;
    transform: translate(-50%, -50%) scale(1.22);
  }
}

@keyframes reward-firework-core {
  0% {
    opacity: 0;
    transform: scale(0.22);
  }
  28% {
    opacity: 1;
    transform: scale(1.22);
  }
  100% {
    opacity: 0;
    transform: scale(0.4);
  }
}

@keyframes reward-firework {
  0% {
    opacity: 0;
    transform: scale(0.25);
  }
  15% {
    opacity: 1;
    transform: scale(1);
  }
  100% {
    opacity: 0;
    transform: translate(var(--firework-x), var(--firework-y)) scale(0.3);
  }
}

@keyframes reward-bonus-bubble {
  0% {
    opacity: 0;
    transform: translate(-50%, -50%) scale(0.28);
  }
  16% {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1);
  }
  74% {
    opacity: 1;
    transform: translate(calc(-50% + var(--bonus-x)), calc(-50% + var(--bonus-y))) scale(1.06);
  }
  100% {
    opacity: 0;
    transform: translate(calc(-50% + var(--bonus-x)), calc(-50% + var(--bonus-y))) scale(1.45);
  }
}

@keyframes score-bump {
  0%,
  100% {
    transform: scale(1);
  }
  48% {
    transform: scale(1.1);
  }
}

@keyframes panel-in {
  from {
    opacity: 0;
    transform: translateY(1rem) scale(0.97);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

@media (max-width: 540px) {
  .game-header {
    gap: 0.5rem;
    padding-top: max(0.88rem, env(safe-area-inset-top));
  }

  .brand {
    gap: 0.38rem;
    padding: 0.45rem 0.6rem 0.45rem 0.5rem;
    font-size: 0.9rem;
  }

  .brand-bubble {
    width: 1.08rem;
    height: 1.08rem;
  }

  .game-controls {
    min-height: 2.85rem;
  }

  .score-card {
    min-width: 6.5rem;
    gap: 0.32rem;
    padding: 0.4rem 0.58rem;
  }

  .score-label {
    font-size: 0.65rem;
  }

  .score-value {
    font-size: 1.42rem;
  }

  .reset-button {
    width: 2.38rem;
    min-width: 2.38rem;
    min-height: 2.34rem;
  }

  .reset-button span {
    font-size: 1.15rem;
  }

  .welcome {
    margin-top: 2.1rem;
  }

  .settings-dialog {
    align-items: end;
    padding: 0;
  }

  .settings-panel {
    width: 100%;
    max-height: min(91dvh, 55rem);
    border-radius: 1.5rem 1.5rem 0 0;
  }

  .settings-header {
    padding: 1.05rem 1rem 0.85rem;
  }

  .settings-scroll {
    padding: 0.75rem 0.85rem 0.9rem;
  }

  .settings-footer {
    padding: 0.75rem 0.85rem max(0.85rem, env(safe-area-inset-bottom));
  }

  .section-heading {
    display: block;
  }

  .section-note {
    max-width: none;
    margin-top: 0.3rem;
    text-align: left;
  }

  .preset-card {
    min-height: 6.15rem;
  }

  .preset-card span:last-child {
    font-size: 0.64rem;
  }

  .field-grid {
    grid-template-columns: 1fr;
  }

  .indented-setting {
    padding-left: 0;
  }

  .settings-footer {
    align-items: stretch;
    flex-direction: column-reverse;
  }

  .settings-footer-actions {
    justify-content: space-between;
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    scroll-behavior: auto !important;
    animation-duration: 1ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 1ms !important;
  }
}