/* ============================================================
   토이블라스트 팝! — bouncy toy / jelly theme
   ============================================================ */
:root {
  --ink: #2b1a4a;
  --ink-soft: rgba(43, 26, 74, .3);
  --pink: #ff3b7b;
  --orange: #ff8a1e;
  --gold: #ffd21f;
  --green: #22c55e;
  --blue: #4fc7ff;
  --purple: #a534e0;
  color-scheme: light;
}

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; user-select: none; }

html, body {
  margin: 0;
  height: 100%;
  font-family: "Baloo 2", "Pretendard", -apple-system, "Malgun Gothic", sans-serif;
  -webkit-font-smoothing: antialiased;
  overflow: hidden;
  overscroll-behavior: none;
}

body {
  background:
    radial-gradient(130% 90% at 50% -20%, rgba(255,255,255,.35), rgba(255,255,255,0) 55%),
    linear-gradient(180deg, #57b7ff 0%, #7d7bff 52%, #ff7fc3 100%);
}

/* ---------- floating background blobs ---------- */
#bgDecor { position: fixed; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; }
.blob { position: absolute; border-radius: 50%; opacity: .4; animation: blobFloat 12s ease-in-out infinite; }
.blob::before {
  content: ""; position: absolute; inset: 0; border-radius: 50%;
  background: radial-gradient(circle at 35% 28%, rgba(255,255,255,.85), rgba(255,255,255,0) 50%);
}
.b1 { width: 230px; height: 230px; left: -70px; top: 6%; background: #ffd166; }
.b2 { width: 170px; height: 170px; right: -50px; top: 28%; background: #7ef0ff; animation-delay: -3s; }
.b3 { width: 130px; height: 130px; left: 10%; bottom: 8%; background: #ff8fc8; animation-delay: -6s; }
.b4 { width: 90px; height: 90px; right: 13%; top: 10%; background: #b9f78b; animation-delay: -9s; }
.b5 { width: 64px; height: 64px; left: 26%; top: 3%; background: #fff; animation-delay: -2s; }
.b6 { width: 46px; height: 46px; right: 24%; bottom: 16%; background: #ffd166; animation-delay: -5s; }
@keyframes blobFloat {
  0%, 100% { transform: translateY(0) rotate(0deg); }
  50% { transform: translateY(-26px) rotate(14deg); }
}

/* ---------- app layout ---------- */
#app {
  position: relative;
  z-index: 1;
  height: 100%;
  max-width: 480px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: env(safe-area-inset-top, 12px) 12px env(safe-area-inset-bottom, 12px);
}

/* ---------- HUD ---------- */
#hud {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 10px;
  padding: 9px 12px;
  border-radius: 24px;
  background: linear-gradient(180deg, #ffffff 0%, #ffeaf5 100%);
  border: 3px solid #fff;
  box-shadow: 0 5px 0 var(--ink-soft), 0 14px 26px rgba(0,0,0,.28), inset 0 2px 0 rgba(255,255,255,.95);
}
#modeBadge {
  background: linear-gradient(180deg, #b48cff 0%, #8a5cff 100%);
  color: #fff;
  padding: 7px 14px;
  border-radius: 999px;
  font-weight: 800;
  font-size: 12px;
  letter-spacing: .06em;
  box-shadow: inset 0 -3px 0 rgba(0,0,0,.18), 0 3px 0 var(--ink-soft);
  white-space: nowrap;
}
#modeLabel { display: block; }
#statWrap {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  justify-self: center;
  background: #fff;
  padding: 7px 16px;
  border-radius: 999px;
  color: var(--ink);
  font-weight: 800;
  box-shadow: inset 0 2px 4px rgba(43,26,74,.16);
}
#statIcon { font-size: 16px; line-height: 1; }
#statValue { display: inline-block; font-size: 17px; font-variant-numeric: tabular-nums; }
#statValue.tick { animation: tickPop .32s cubic-bezier(.34,1.56,.64,1); }
#statWrap.low-time #statValue { color: #ff3b6b; }
#scoreWrap { display: flex; align-items: center; gap: 8px; }
#scoreCount {
  display: inline-block;
  background: linear-gradient(180deg, #ffe76b 0%, #ffb01f 100%);
  color: #fff;
  padding: 8px 16px;
  border-radius: 999px;
  font-weight: 800;
  font-size: 16px;
  font-variant-numeric: tabular-nums;
  text-shadow: 0 1px 0 rgba(0,0,0,.18);
  box-shadow: inset 0 -4px 0 rgba(0,0,0,.16), 0 4px 0 var(--ink-soft);
}
#scoreCount.bounce { animation: scorePop .38s cubic-bezier(.34,1.56,.64,1); }
.statLabel { font-size: 9px; font-weight: 800; letter-spacing: .16em; color: var(--ink); opacity: .55; }
@keyframes scorePop {
  0% { transform: scale(1); }
  40% { transform: scale(1.32); }
  100% { transform: scale(1); }
}
@keyframes tickPop {
  0% { transform: scale(1); }
  45% { transform: scale(1.26); }
  100% { transform: scale(1); }
}

/* ---------- board ---------- */
#boardWrap {
  position: relative;
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 0;
}
#board {
  position: relative;
  width: min(94vw, 460px, calc(74vh * 0.8));
  aspect-ratio: 8 / 10;
  border: 10px solid #fff;
  border-radius: 20px;
  background:
    radial-gradient(120% 60% at 50% -8%, rgba(255,255,255,.3), transparent 60%),
    linear-gradient(160deg, #8a7bff 0%, #5a4ad6 100%);
  box-shadow:
    0 8px 0 var(--ink-soft),
    0 22px 46px rgba(0,0,0,.38),
    inset 0 0 0 5px rgba(255,255,255,.14),
    inset 0 4px 0 rgba(255,255,255,.4);
}

#fxLayer {
  position: absolute;
  inset: 0;
  z-index: 20;
  pointer-events: none;
}

/* ---------- cells & candies ---------- */
.cell {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform .16s cubic-bezier(.34,1.4,.64,1);
  will-change: transform;
  touch-action: none;
}

.candy {
  width: 94%;
  height: 94%;
  position: relative;
  cursor: pointer;
  will-change: transform;
  transition: transform .12s ease;
  animation: idleBob 3s ease-in-out infinite;
}
.cell:nth-child(4n+2) .candy { animation-delay: .5s; }
.cell:nth-child(5n+3) .candy { animation-delay: 1s; }
.cell:nth-child(7n+4) .candy { animation-delay: 1.5s; }
@keyframes idleBob {
  0%, 100% { transform: translateY(0) rotate(0deg); }
  50% { transform: translateY(-3.5%) rotate(-1.4deg); }
}

.candy.selected {
  animation: selectWiggle .55s cubic-bezier(.34,1.56,.64,1) infinite;
  filter: drop-shadow(0 0 10px rgba(255,255,255,.95)) drop-shadow(0 0 8px rgba(255,209,31,.75));
}
@keyframes selectWiggle {
  0%, 100% { transform: scale(1.12) rotate(-4deg); }
  50% { transform: scale(1.28) rotate(4deg); }
}
.candy.popping { animation: toyPop .18s cubic-bezier(.34,1.56,.64,1) forwards; }
.candy.spawning { animation: toySpawn .34s cubic-bezier(.34,1.56,.64,1); }
.candy.shake { animation: toyShake .2s ease; }
@keyframes toyPop {
  0% { transform: scale(1) rotate(0); }
  35% { transform: scale(1.5) rotate(10deg); }
  100% { transform: scale(0) rotate(-14deg); opacity: 0; }
}
@keyframes toySpawn {
  0% { transform: scale(.2); opacity: 0; }
  55% { transform: scale(1.28); opacity: 1; }
  75% { transform: scale(.86); }
  90% { transform: scale(1.08); }
  100% { transform: scale(1); }
}
@keyframes toyShake {
  0%, 100% { transform: translateX(0) rotate(0); }
  20% { transform: translateX(-16%) rotate(-6deg); }
  45% { transform: translateX(14%) rotate(5deg); }
  70% { transform: translateX(-10%) rotate(-3deg); }
  85% { transform: translateX(8%) rotate(2deg); }
}

/* gem: transparent container for regular toys, colored block for specials */
.gem { position: absolute; inset: 2%; border-radius: 30%; pointer-events: none; }
.c0 .gem { background: radial-gradient(130% 90% at 50% 118%, rgba(0,0,0,.18), transparent 55%), radial-gradient(circle at 32% 26%, rgba(255,255,255,.85), rgba(255,255,255,0) 42%), linear-gradient(180deg, #ffa8ce 0%, #ff2d6b 100%); }
.c1 .gem { background: radial-gradient(130% 90% at 50% 118%, rgba(0,0,0,.18), transparent 55%), radial-gradient(circle at 32% 26%, rgba(255,255,255,.85), rgba(255,255,255,0) 42%), linear-gradient(180deg, #ffc98a 0%, #ff7a1a 100%); }
.c2 .gem { background: radial-gradient(130% 90% at 50% 118%, rgba(0,0,0,.18), transparent 55%), radial-gradient(circle at 32% 26%, rgba(255,255,255,.85), rgba(255,255,255,0) 42%), linear-gradient(180deg, #fff3a0 0%, #ffc21f 100%); }
.c3 .gem { background: radial-gradient(130% 90% at 50% 118%, rgba(0,0,0,.18), transparent 55%), radial-gradient(circle at 32% 26%, rgba(255,255,255,.85), rgba(255,255,255,0) 42%), linear-gradient(180deg, #b7ffc2 0%, #22c55e 100%); }
.c4 .gem { background: radial-gradient(130% 90% at 50% 118%, rgba(0,0,0,.18), transparent 55%), radial-gradient(circle at 32% 26%, rgba(255,255,255,.85), rgba(255,255,255,0) 42%), linear-gradient(180deg, #a8e2ff 0%, #1e9aff 100%); }
.c5 .gem { background: radial-gradient(130% 90% at 50% 118%, rgba(0,0,0,.18), transparent 55%), radial-gradient(circle at 32% 26%, rgba(255,255,255,.85), rgba(255,255,255,0) 42%), linear-gradient(180deg, #e0c0ff 0%, #a534e0 100%); }
.gem:has(.toy) { background: none; box-shadow: none; border: 0; }

/* ---------- toy characters (70px design grid, scaled via --icon-scale) ---------- */
.toy {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 70px;
  height: 70px;
  margin: -35px 0 0 -35px;
  transform: scale(var(--icon-scale, 0.6));
  transform-origin: 50% 50%;
  pointer-events: none;
  border-radius: 46% 54% 55% 45% / 52% 46% 54% 48%;
  border: 3px solid #fff;
  box-shadow: 0 5px 0 rgba(43,26,74,.3), 0 12px 16px rgba(0,0,0,.22);
}
.toy-bear { background: radial-gradient(130% 90% at 50% 118%, rgba(0,0,0,.18), transparent 55%), radial-gradient(circle at 32% 26%, rgba(255,255,255,.9), rgba(255,255,255,0) 42%), linear-gradient(180deg, #ffa8ce 0%, #ff2d6b 100%); }
.toy-kitty { background: radial-gradient(130% 90% at 50% 118%, rgba(0,0,0,.18), transparent 55%), radial-gradient(circle at 32% 26%, rgba(255,255,255,.9), rgba(255,255,255,0) 42%), linear-gradient(180deg, #ffc98a 0%, #ff7a1a 100%); }
.toy-chick { background: radial-gradient(130% 90% at 50% 118%, rgba(0,0,0,.18), transparent 55%), radial-gradient(circle at 32% 26%, rgba(255,255,255,.9), rgba(255,255,255,0) 42%), linear-gradient(180deg, #fff3a0 0%, #ffc21f 100%); }
.toy-frog { background: radial-gradient(130% 90% at 50% 118%, rgba(0,0,0,.18), transparent 55%), radial-gradient(circle at 32% 26%, rgba(255,255,255,.9), rgba(255,255,255,0) 42%), linear-gradient(180deg, #b7ffc2 0%, #22c55e 100%); }
.toy-elephant { background: radial-gradient(130% 90% at 50% 118%, rgba(0,0,0,.18), transparent 55%), radial-gradient(circle at 32% 26%, rgba(255,255,255,.9), rgba(255,255,255,0) 42%), linear-gradient(180deg, #a8e2ff 0%, #1e9aff 100%); }
.toy-bunny { background: radial-gradient(130% 90% at 50% 118%, rgba(0,0,0,.18), transparent 55%), radial-gradient(circle at 32% 26%, rgba(255,255,255,.9), rgba(255,255,255,0) 42%), linear-gradient(180deg, #e0c0ff 0%, #a534e0 100%); }

/* shared face parts */
.toy-eye {
  position: absolute;
  top: 32px;
  width: 8px;
  height: 10px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #fff 0 2.4px, rgba(255,255,255,0) 3px), #2b1a4a;
}
.toy-eye.l { left: 19px; }
.toy-eye.r { left: 43px; }
.toy-cheek { position: absolute; top: 42px; width: 9px; height: 6px; border-radius: 50%; background: rgba(255,255,255,.55); }
.toy-cheek.l { left: 11px; }
.toy-cheek.r { left: 50px; }
.toy-mouth {
  position: absolute;
  left: 50%;
  top: 45px;
  width: 12px;
  height: 7px;
  transform: translateX(-50%);
  border-bottom: 3px solid #2b1a4a;
  border-radius: 0 0 12px 12px;
}

/* bear */
.toy-bear .toy-ear { position: absolute; top: -2px; width: 19px; height: 19px; border-radius: 50%; background: linear-gradient(180deg, #ffa8ce, #ff2d6b); border: 3px solid #fff; }
.toy-bear .toy-ear.l { left: 9px; }
.toy-bear .toy-ear.r { right: 9px; }

/* kitty */
.toy-kitty .toy-ear { position: absolute; top: 3px; width: 14px; height: 14px; border-radius: 5px; background: linear-gradient(180deg, #ffc98a, #ff8a1e); border: 3px solid #fff; transform: rotate(45deg); }
.toy-kitty .toy-ear.l { left: 10px; }
.toy-kitty .toy-ear.r { right: 10px; }

/* chick */
.toy-chick .toy-tuft { position: absolute; left: 31px; top: -8px; width: 9px; height: 13px; border-radius: 50%; background: linear-gradient(180deg, #fff3a0, #ffc21f); border: 3px solid #fff; }
.toy-chick .toy-beak { position: absolute; left: 50%; top: 41px; width: 14px; height: 10px; transform: translateX(-50%); background: linear-gradient(180deg, #ffb14d, #ff7a1a); border: 3px solid #fff; border-radius: 4px 4px 60% 60% / 30% 30% 70% 70%; }

/* frog */
.toy-frog .toy-frog-eye { position: absolute; top: -3px; width: 17px; height: 13px; border-radius: 50% 50% 46% 46% / 58% 58% 42% 42%; background: linear-gradient(180deg, #b7ffc2, #22c55e); border: 3px solid #fff; }
.toy-frog .toy-frog-eye.l { left: 13px; }
.toy-frog .toy-frog-eye.r { left: 40px; }
.toy-frog .toy-frog-eye::after { content: ""; position: absolute; left: 3px; top: 2px; width: 8px; height: 8px; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #fff 0 2px, rgba(255,255,255,0) 2.6px), #2b1a4a; }
.toy-frog .toy-grin { position: absolute; left: 50%; top: 43px; width: 20px; height: 10px; transform: translateX(-50%); border-bottom: 3px solid #2b1a4a; border-radius: 0 0 50% 50%; }

/* elephant */
.toy-elephant .toy-ear { position: absolute; top: 13px; width: 26px; height: 26px; border-radius: 50%; background: linear-gradient(180deg, #a8e2ff, #1e9aff); border: 3px solid #fff; }
.toy-elephant .toy-ear.l { left: -4px; }
.toy-elephant .toy-ear.r { right: -4px; }
.toy-elephant .toy-trunk { position: absolute; left: 50%; top: 42px; width: 13px; height: 21px; transform: translateX(-50%); background: linear-gradient(180deg, #a8e2ff, #1e9aff); border: 3px solid #fff; border-top: 0; border-radius: 0 0 8px 8px; }

/* bunny */
.toy-bunny .toy-bunny-ear { position: absolute; top: -7px; width: 12px; height: 26px; border-radius: 8px; background: linear-gradient(180deg, #e0c0ff, #a534e0); border: 3px solid #fff; }
.toy-bunny .toy-bunny-ear.l { left: 13px; transform: rotate(-14deg); }
.toy-bunny .toy-bunny-ear.r { right: 13px; transform: rotate(14deg); }
.toy-bunny .toy-bunny-ear::after { content: ""; position: absolute; left: 50%; top: 7px; width: 4px; height: 11px; transform: translateX(-50%); background: #f2d7ff; border-radius: 4px; }
.toy-bunny .toy-bucktooth { position: absolute; left: 50%; top: 44px; width: 8px; height: 7px; transform: translateX(-50%); background: #fff; border: 2px solid #2b1a4a; border-radius: 2px 2px 4px 4px; }

/* ---------- special candies ---------- */
.special-stripeH .gem, .special-stripeV .gem {
  border: 3px solid #fff;
  border-radius: 34%;
  box-shadow: inset 0 -5px 7px rgba(0,0,0,.28), inset 0 3px 4px rgba(255,255,255,.6), 0 4px 0 rgba(43,26,74,.28), 0 10px 14px rgba(0,0,0,.25);
}
.special-stripeH .gem::after { content: ""; position: absolute; inset: 0; border-radius: inherit; background: repeating-linear-gradient(0deg, rgba(255,255,255,.6) 0 15%, transparent 15% 32%); }
.special-stripeV .gem::after { content: ""; position: absolute; inset: 0; border-radius: inherit; background: repeating-linear-gradient(90deg, rgba(255,255,255,.6) 0 15%, transparent 15% 32%); }
.special-stripeH .gem::before, .special-stripeV .gem::before {
  content: "★"; position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  font-size: calc(24px * var(--icon-scale, 0.55)); color: #fff;
  text-shadow: 0 2px 0 rgba(43,26,74,.45);
}
.special-wrapped .gem {
  border: 3px solid #fff;
  border-radius: 36%;
  box-shadow: inset 0 -5px 7px rgba(0,0,0,.28), inset 0 3px 4px rgba(255,255,255,.55), 0 0 0 3px rgba(255,255,255,.55), 0 0 0 7px rgba(255,255,255,.18), 0 4px 0 rgba(43,26,74,.28);
}
.special-wrapped .gem::after {
  content: ""; position: absolute; inset: 0; border-radius: inherit;
  background:
    linear-gradient(rgba(255,255,255,.8), rgba(255,255,255,.8)) 0 50% / 100% 22% no-repeat,
    linear-gradient(90deg, rgba(255,255,255,.8), rgba(255,255,255,.8)) 50% 0 / 22% 100% no-repeat;
}
.special-bomb .gem {
  border: 3px solid #fff;
  border-radius: 50%;
  background: conic-gradient(#ff3b7b, #ff8a1e, #ffd21f, #22c55e, #1e9aff, #a534e0, #ff3b7b);
  box-shadow: inset 0 -6px 8px rgba(0,0,0,.3), inset 0 3px 4px rgba(255,255,255,.5), 0 4px 0 rgba(43,26,74,.32), 0 10px 16px rgba(0,0,0,.28);
  animation: bombPulse 1.2s ease-in-out infinite;
}
.special-bomb .gem::before {
  content: ""; position: absolute; inset: -2%;
  border-radius: 50%;
  background: conic-gradient(transparent 0 40deg, rgba(255,255,255,.85) 60deg 120deg, transparent 140deg 360deg);
  animation: spin 3s linear infinite;
}
.special-bomb .gem::after {
  content: "!"; position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  font-size: calc(30px * var(--icon-scale, 0.55)); font-weight: 800; color: #fff;
  text-shadow: 0 3px 0 rgba(43,26,74,.55);
}
@keyframes spin { to { transform: rotate(360deg); } }
@keyframes bombPulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.14); } }

/* ---------- fx ---------- */
.combo-pop {
  position: absolute;
  z-index: 22;
  font-weight: 800;
  font-size: 15px;
  letter-spacing: .02em;
  color: #fff;
  -webkit-text-stroke: 1.5px var(--ink);
  text-shadow: 0 2px 0 rgba(43,26,74,.5), 0 5px 12px rgba(0,0,0,.35);
  white-space: nowrap;
  pointer-events: none;
  animation: comboFloat .6s cubic-bezier(.34,1.56,.64,1) forwards;
}
@keyframes comboFloat {
  0% { transform: translateY(0) scale(.4) rotate(-4deg); opacity: 0; }
  18% { transform: translateY(-10px) scale(1.22) rotate(2deg); opacity: 1; }
  100% { transform: translateY(-56px) scale(1) rotate(0); opacity: 0; }
}
.blast {
  position: absolute;
  z-index: 21;
  border-radius: 50%;
  background: radial-gradient(circle at 40% 35%, #fff, rgba(255,255,255,0) 60%);
  clip-path: polygon(50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%);
  pointer-events: none;
  animation: blastPop .3s cubic-bezier(.34,1.56,.64,1) forwards;
}
@keyframes blastPop {
  0% { transform: scale(.1) rotate(0); opacity: 1; }
  55% { transform: scale(1.32) rotate(40deg); opacity: 1; }
  100% { transform: scale(1.75) rotate(90deg); opacity: 0; }
}

/* ---------- overlays & modals ---------- */
.overlay, #modal {
  position: fixed;
  inset: 0;
  z-index: 50;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 20px;
  background: rgba(43,26,74,.55);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
}
.overlay.open, #modal.open { display: flex; }
#modal { z-index: 60; }

.modal-card {
  max-width: 360px;
  width: 100%;
  text-align: center;
  background: linear-gradient(180deg, #fff 0%, #ffeaf5 100%);
  border: 4px solid #fff;
  border-radius: 30px;
  padding: 26px 22px;
  color: var(--ink);
  box-shadow: 0 10px 0 var(--ink-soft), 0 26px 52px rgba(0,0,0,.42), inset 0 2px 0 rgba(255,255,255,.95);
}
.title-card { animation: cardPop .55s cubic-bezier(.34,1.56,.64,1); }
.result-card { animation: cardPop .5s cubic-bezier(.34,1.56,.64,1); }
@keyframes cardPop {
  0% { transform: scale(.3) translateY(80px); opacity: 0; }
  60% { transform: scale(1.06) translateY(-8px); opacity: 1; }
  100% { transform: scale(1) translateY(0); opacity: 1; }
}

.mascots { --icon-scale: 0.92; display: flex; justify-content: center; gap: 4px; margin-bottom: 4px; }
.m { position: relative; width: 70px; height: 70px; animation: mascotBob 2.4s ease-in-out infinite; }
.m:nth-child(2) { animation-delay: .4s; }
.m:nth-child(3) { animation-delay: .8s; }
@keyframes mascotBob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-8px); } }

.logo {
  margin: 6px 0 2px;
  font-size: 46px;
  line-height: 1;
  font-weight: 800;
  letter-spacing: .01em;
  color: #fff;
  -webkit-text-stroke: 2.5px var(--ink);
  text-shadow: 0 4px 0 var(--ink), 0 8px 0 rgba(43,26,74,.45), 0 12px 20px rgba(0,0,0,.35);
  animation: logoBob 2.8s ease-in-out infinite;
}
.logo span { display: inline-block; color: #ffd21f; transform: rotate(8deg); }
@keyframes logoBob {
  0%, 100% { transform: translateY(0) rotate(-1.5deg); }
  50% { transform: translateY(-8px) rotate(1.5deg); }
}
.tagline { margin: 4px 0 16px; font-size: 13px; font-weight: 700; letter-spacing: .02em; opacity: .7; }

.mode-btn {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  text-align: left;
  padding: 12px 14px;
  margin-bottom: 12px;
  border: 3px solid #fff;
  border-radius: 20px;
  cursor: pointer;
  color: #fff;
  background: linear-gradient(180deg, #8fe8ff 0%, #4fc7ff 100%);
  box-shadow: 0 5px 0 var(--ink-soft), inset 0 2px 0 rgba(255,255,255,.55), inset 0 -4px 6px rgba(0,0,0,.15);
  transition: transform .12s cubic-bezier(.34,1.56,.64,1), box-shadow .12s, filter .12s;
}
.mode-btn.alt { background: linear-gradient(180deg, #ffd98a 0%, #ff9d1f 100%); }
.mode-btn:last-child { margin-bottom: 0; }
.mode-btn:hover { transform: translateY(-2px); filter: brightness(1.05); }
.mode-btn:active { transform: translateY(3px) scale(.99); box-shadow: 0 2px 0 var(--ink-soft), inset 0 2px 0 rgba(255,255,255,.55); }
.mode-btn .mode-ico {
  display: flex; align-items: center; justify-content: center;
  width: 44px; height: 44px; flex: 0 0 auto;
  font-size: 24px;
  background: #fff;
  border-radius: 50%;
  box-shadow: inset 0 3px 0 rgba(255,255,255,.95), 0 3px 0 var(--ink-soft);
}
.mode-btn strong { display: block; font-size: 16px; letter-spacing: .01em; text-shadow: 0 2px 0 rgba(0,0,0,.25); }
.mode-btn em { display: block; font-style: normal; font-size: 11px; font-weight: 700; margin-top: 2px; opacity: .9; }

.result-face { font-size: 56px; line-height: 1; margin-bottom: 6px; animation: mascotBob 1.6s ease-in-out infinite; }
.result-card h2 {
  margin: 0 0 10px;
  font-size: 28px;
  font-weight: 800;
  color: #fff;
  -webkit-text-stroke: 1.5px var(--ink);
  text-shadow: 0 3px 0 var(--ink), 0 6px 14px rgba(0,0,0,.3);
}
.result-card p { margin: 0 0 20px; font-size: 15px; font-weight: 700; white-space: pre-line; opacity: .8; }
#modalBtn {
  border: 3px solid #fff;
  border-radius: 999px;
  padding: 12px 34px;
  font-weight: 800;
  font-size: 16px;
  color: #fff;
  cursor: pointer;
  background: linear-gradient(180deg, #ff8fc8 0%, #ff3b7b 100%);
  box-shadow: 0 5px 0 var(--ink-soft), inset 0 2px 0 rgba(255,255,255,.5), inset 0 -4px 6px rgba(0,0,0,.15);
  transition: transform .12s cubic-bezier(.34,1.56,.64,1), box-shadow .12s;
}
#modalBtn:hover { transform: translateY(-2px); }
#modalBtn:active { transform: translateY(3px) scale(.98); box-shadow: 0 2px 0 var(--ink-soft), inset 0 2px 0 rgba(255,255,255,.5); }

/* ---------- reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  .candy, .blob, .logo, .m, .result-face { animation: none !important; }
}