:root {
  --ink: #22304a;
  --muted: #6a7890;
  --panel: #ffffff;
  --line: #e6ebf3;
  --accent: #ff5c8a;
  --accent-2: #3aa0ff;
  --soft: #f4f7fc;
  --font: "Baloo 2", "Comic Sans MS", "Trebuchet MS", system-ui, sans-serif;
}

* { box-sizing: border-box; }

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

body {
  font-family: var(--font);
  color: var(--ink);
  background: linear-gradient(180deg, #6cc4ff 0%, #a9deff 55%, #dff4ff 100%);
  user-select: none;
  -webkit-user-select: none;
  -webkit-tap-highlight-color: transparent;
  touch-action: none;
  overscroll-behavior: none;
}

/* ---------- Scenery ---------- */
.scenery { position: fixed; inset: 0; pointer-events: none; overflow: hidden; }

.sun {
  position: absolute;
  top: 5vmin; left: 6vmin;
  width: 16vmin; height: 16vmin;
  border-radius: 50%;
  background: radial-gradient(circle at 40% 40%, #fff6b8, #ffd83d 60%, #ffc21a);
  box-shadow: 0 0 0 3vmin rgba(255, 230, 90, .25), 0 0 0 7vmin rgba(255, 230, 90, .12);
  animation: sun-pulse 5s ease-in-out infinite;
}
@keyframes sun-pulse { 50% { transform: scale(1.06); } }

.cloud {
  position: absolute;
  width: 22vmin; height: 7vmin;
  background: #fff;
  border-radius: 7vmin;
  opacity: .9;
  animation: drift linear infinite;
}
.cloud::before, .cloud::after {
  content: "";
  position: absolute;
  background: #fff;
  border-radius: 50%;
}
.cloud::before { width: 10vmin; height: 10vmin; left: 3vmin; top: -5vmin; }
.cloud::after  { width: 8vmin;  height: 8vmin;  left: 10vmin; top: -3.5vmin; }
.cloud.c1 { top: 12vh; animation-duration: 80s; animation-delay: -20s; }
.cloud.c2 { top: 26vh; transform: scale(.7); animation-duration: 110s; animation-delay: -70s; opacity: .75; }
.cloud.c3 { top: 6vh;  transform: scale(.85); animation-duration: 95s; animation-delay: -50s; }
@keyframes drift {
  from { left: -30vmin; }
  to   { left: 110vw; }
}

.hills {
  position: absolute;
  left: -10vw; right: -10vw; bottom: 0;
  height: 22vh;
  background:
    radial-gradient(120% 100% at 20% 100%, #7bd65a 60%, transparent 61%),
    radial-gradient(90% 90% at 80% 100%, #67c84a 60%, transparent 61%);
}
.hills::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 7vh;
  background: #5bbd40;
}

/* ---------- Stage ---------- */
.stage { position: fixed; inset: 0; overflow: hidden; }
.balls, .fx { position: absolute; inset: 0; pointer-events: none; }
.fx { z-index: 100000; }

.letter {
  position: absolute;
  left: 50%; top: 50%;
  transform: translate(-50%, -50%);
  font-size: min(55vmin, 60vh);
  font-weight: 800;
  line-height: 1;
  opacity: 0;
  pointer-events: none;
  text-shadow: 0 1.2vmin 0 rgba(0, 0, 0, .12);
  -webkit-text-stroke: 1.2vmin #fff;
  paint-order: stroke fill;
}

.ball {
  position: absolute;
  left: 0; top: 0;
  will-change: transform;
  filter: drop-shadow(0 1.2vmin 1.2vmin rgba(20, 40, 80, .28));
}
.ball[hidden] { display: none; }
.ball .squash {
  position: absolute; inset: 0;
  transform-origin: 50% 100%;
}
.ball .spin, .ball .gloss {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
}
.ball .spin svg { width: 100%; height: 100%; display: block; }

.eye {
  transform-box: fill-box;
  transform-origin: center;
  animation: blink 4.5s infinite;
}
@keyframes blink {
  0%, 92%, 100% { transform: scaleY(1); }
  95% { transform: scaleY(.1); }
}

.spark {
  position: absolute;
  left: 0; top: 0;
  font-size: 4vmin;
  line-height: 1;
  pointer-events: none;
  will-change: transform, opacity;
}

/* ---------- Start screen ---------- */
.start {
  position: fixed; inset: 0;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  gap: 0;
  z-index: 200000;
  pointer-events: none;
  transition: opacity .5s ease, transform .5s ease;
}
.start.gone { opacity: 0; transform: scale(1.1); }

.title {
  margin: 0;
  font-size: min(18vmin, 150px);
  font-weight: 800;
  line-height: 1;
  display: flex;
  letter-spacing: .02em;
}
.title span {
  display: inline-block;
  color: #fff;
  -webkit-text-stroke: .08em var(--c, #ff5c8a);
  paint-order: stroke fill;
  text-shadow: 0 .08em 0 rgba(0, 0, 0, .15);
  animation: hop 1.4s ease-in-out infinite;
}
.title .gap { width: .35em; }
.title span:nth-child(1) { --c: #ff4757; animation-delay: 0s; }
.title span:nth-child(2) { --c: #ff9f1a; animation-delay: .08s; }
.title span:nth-child(3) { --c: #f7c500; animation-delay: .16s; }
.title span:nth-child(4) { --c: #2ed573; animation-delay: .24s; }
.title span:nth-child(6) { --c: #1e90ff; animation-delay: .40s; }
.title span:nth-child(7) { --c: #8e44ad; animation-delay: .48s; }
.title span:nth-child(8) { --c: #ff5c8a; animation-delay: .56s; }
.title span:nth-child(9) { --c: #ff9f1a; animation-delay: .64s; }
@keyframes hop {
  0%, 60%, 100% { transform: translateY(0); }
  30% { transform: translateY(-.25em) rotate(-4deg); }
}

.press {
  margin: 3vmin 0 0;
  font-size: min(7vmin, 56px);
  font-weight: 800;
  color: #fff;
  background: var(--accent);
  padding: .1em .8em;
  border-radius: 999px;
  box-shadow: 0 .15em 0 #d63a6a;
  animation: pulse 1.2s ease-in-out infinite;
}
.sub {
  margin: 1.5vmin 0 0;
  font-size: min(3.6vmin, 26px);
  font-weight: 700;
  color: #1d4f7a;
  opacity: .75;
}
@keyframes pulse { 50% { transform: scale(1.07); } }

/* ---------- Gear (hold to open) ---------- */
.gear {
  position: fixed;
  top: 14px; right: 14px;
  width: 52px; height: 52px;
  border: 0; padding: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, .55);
  backdrop-filter: blur(4px);
  color: #2d4b6e;
  cursor: pointer;
  z-index: 300000;
  display: grid; place-items: center;
  opacity: .6;
  transition: opacity .2s, background .2s;
  outline: none;
}
.gear:hover { opacity: 1; background: rgba(255, 255, 255, .85); }
.gear .cog { width: 28px; height: 28px; fill: currentColor; }
.gear .ring {
  position: absolute; inset: -4px;
  width: 60px; height: 60px;
  transform: rotate(-90deg);
}
.gear .ring circle {
  fill: none;
  stroke: var(--accent);
  stroke-width: 4;
  stroke-linecap: round;
  stroke-dasharray: 164;
  stroke-dashoffset: 164;
  transition: stroke-dashoffset .15s ease;
}
.gear.holding { opacity: 1; background: #fff; }
.gear.holding .cog { animation: spin-cog .8s linear; }
.gear.holding .ring circle { stroke-dashoffset: 0; transition: stroke-dashoffset .8s linear; }
@keyframes spin-cog { to { transform: rotate(180deg); } }

.gear-hint {
  position: fixed;
  top: 70px; right: 8px;
  font-size: 12px;
  font-weight: 700;
  color: #2d4b6e;
  opacity: 0;
  transition: opacity .2s;
  z-index: 300000;
  pointer-events: none;
}
.gear:hover + .gear-hint { opacity: .8; }

/* ---------- Panel ---------- */
.scrim {
  position: fixed; inset: 0;
  background: rgba(20, 35, 60, .25);
  opacity: 0;
  pointer-events: none;
  transition: opacity .25s;
  z-index: 400000;
}
.scrim.show { opacity: 1; pointer-events: auto; }

.panel {
  position: fixed;
  top: 0; right: 0; bottom: 0;
  width: min(430px, 100vw);
  background: var(--panel);
  box-shadow: -10px 0 40px rgba(20, 35, 60, .2);
  transform: translateX(105%);
  transition: transform .3s cubic-bezier(.2, .8, .2, 1);
  overflow-y: auto;
  z-index: 400001;
  user-select: auto;
  -webkit-user-select: auto;
  touch-action: pan-y;
  padding: 0 20px 32px;
}
.panel.open { transform: translateX(0); }

.panel-head {
  position: sticky; top: 0;
  display: flex; align-items: center; justify-content: space-between;
  background: var(--panel);
  padding: 18px 0 12px;
  border-bottom: 1px solid var(--line);
  z-index: 1;
}
.panel-head h2 { margin: 0; font-size: 22px; font-weight: 800; }

.panel section { padding: 16px 0 6px; border-bottom: 1px solid var(--line); }
.panel section:last-child { border-bottom: 0; }
.panel h3 { margin: 0 0 2px; font-size: 17px; font-weight: 800; }
.hint { margin: 0 0 12px; color: var(--muted); font-size: 14px; line-height: 1.4; }
kbd {
  font-family: inherit;
  font-size: 12px;
  font-weight: 700;
  border: 1px solid var(--line);
  border-bottom-width: 2px;
  border-radius: 5px;
  padding: 0 5px;
  background: var(--soft);
}

.icon-btn {
  width: 38px; height: 38px;
  border: 0;
  border-radius: 50%;
  background: var(--soft);
  color: var(--ink);
  font-size: 16px;
  cursor: pointer;
}
.icon-btn:hover { background: var(--line); }

.btn {
  font-family: inherit;
  font-size: 15px;
  font-weight: 700;
  border: 0;
  border-radius: 12px;
  padding: 8px 14px;
  background: var(--accent-2);
  color: #fff;
  cursor: pointer;
  box-shadow: 0 3px 0 #1f78cf;
  transition: transform .08s;
}
.btn:active { transform: translateY(2px); box-shadow: 0 1px 0 #1f78cf; }
.btn.ghost { background: var(--soft); color: var(--ink); box-shadow: 0 3px 0 var(--line); }
.btn.big { width: 100%; padding: 12px; font-size: 17px; background: var(--accent); box-shadow: 0 3px 0 #d63a6a; margin-bottom: 10px; }
.btn-row { display: flex; flex-wrap: wrap; gap: 8px; margin: 14px 0 10px; }

.ball-list { display: flex; flex-direction: column; gap: 8px; }
.ball-row {
  display: grid;
  grid-template-columns: 54px 1fr auto;
  align-items: center;
  gap: 12px;
  padding: 8px 10px;
  border-radius: 14px;
  background: var(--soft);
  transition: opacity .2s;
}
.ball-row.off { opacity: .5; }
.ball-row.shake { animation: shake .35s; }
@keyframes shake {
  25% { transform: translateX(-6px); }
  75% { transform: translateX(6px); }
}
.thumb { position: relative; width: 54px; height: 54px; }
.thumb svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.ball-name { font-weight: 800; font-size: 16px; line-height: 1.1; }
.size-ctl { display: flex; align-items: center; gap: 6px; margin-top: 4px; }
.size-ctl button {
  width: 30px; height: 30px;
  flex: none;
  border: 0;
  border-radius: 50%;
  background: #fff;
  color: var(--ink);
  font-family: inherit;
  font-size: 20px;
  font-weight: 800;
  line-height: 1;
  cursor: pointer;
  box-shadow: 0 2px 0 var(--line);
}
.size-ctl button:hover { background: #eef3fb; }
.size-ctl input[type=range] { flex: 1; min-width: 0; }
.size-ctl output { width: 38px; text-align: right; font-weight: 700; font-size: 14px; color: var(--muted); }

input[type=range] { accent-color: var(--accent); cursor: pointer; }

.opt {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px;
  padding: 9px 0;
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
}
.opt.col input[type=range] { width: 50%; }

.switch { position: relative; flex: none; width: 46px; height: 26px; }
.switch input { position: absolute; opacity: 0; width: 100%; height: 100%; margin: 0; cursor: pointer; }
.switch i {
  position: absolute; inset: 0;
  border-radius: 99px;
  background: #cfd8e6;
  transition: background .2s;
  pointer-events: none;
}
.switch i::after {
  content: "";
  position: absolute;
  top: 3px; left: 3px;
  width: 20px; height: 20px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 1px 3px rgba(0, 0, 0, .25);
  transition: transform .2s;
}
.switch input:checked + i { background: #2ed573; }
.switch input:checked + i::after { transform: translateX(20px); }
.switch input:focus-visible + i { outline: 2px solid var(--accent-2); outline-offset: 2px; }

.seg { display: flex; background: var(--soft); border-radius: 10px; padding: 3px; }
.seg button {
  font-family: inherit;
  font-size: 14px;
  font-weight: 700;
  border: 0;
  background: transparent;
  color: var(--muted);
  padding: 5px 10px;
  border-radius: 8px;
  cursor: pointer;
}
.seg button[aria-checked=true] { background: #fff; color: var(--ink); box-shadow: 0 1px 3px rgba(0, 0, 0, .12); }

.toast {
  position: fixed;
  left: 50%; bottom: 24px;
  transform: translate(-50%, 20px);
  background: var(--ink);
  color: #fff;
  font-weight: 700;
  padding: 10px 18px;
  border-radius: 12px;
  opacity: 0;
  pointer-events: none;
  transition: opacity .2s, transform .2s;
  z-index: 500000;
}
.toast.show { opacity: 1; transform: translate(-50%, 0); }

@media (prefers-reduced-motion: reduce) {
  .cloud, .sun, .title span, .press { animation: none; }
}