@font-face { font-family: "Andika"; src: url("/fonts/andika-400.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Andika"; src: url("/fonts/andika-700.woff2") format("woff2"); font-weight: 700; font-display: swap; }
:root {
  --bg1: #fff3c4; --bg2: #ffd6e8; --ink: #2d3a4a; --orange: #ff8a3d; --pink: #ff5fa2; --blue: #3b82f6;
  --green: #22c55e; --purple: #8b5cf6; --card: #ffffff; --shadow: 0 6px 0 rgba(0,0,0,.12);
}
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { margin: 0; height: 100%; }
body {
  font-family: "Andika", "Comic Sans MS", system-ui, sans-serif; color: var(--ink);
  background: radial-gradient(circle at 20% 10%, #fff 0, transparent 40%), linear-gradient(160deg, var(--bg1), var(--bg2));
  min-height: 100vh; overflow-x: hidden;
}
#app { max-width: 980px; margin: 0 auto; padding: 16px 16px 40px; }
#confetti { position: fixed; inset: 0; pointer-events: none; z-index: 50; }
h1 { font-size: 44px; margin: 8px 0; text-align: center; }
.center { text-align: center; }
.mascot { width: 140px; display: block; margin: 0 auto; position: relative; }
.mascot.small { width: 64px; margin: 0; flex: none; }
.mascot .pk, .mascot .pk.big { width: 100%; }
.mascot .say { position: absolute; left: 100%; top: 6px; white-space: nowrap; background: #fff; border: 3px solid #3b2a14;
  border-radius: 16px; padding: 4px 10px; font-weight: 700; font-size: 1.1rem; animation: pk-pop .3s ease-out; }
@keyframes pk-pop { from { transform: scale(.3); opacity: 0 } to { transform: none; opacity: 1 } }
@keyframes pop { 0% { transform: scale(.4); opacity: 0 } 70% { transform: scale(1.15) } 100% { transform: scale(1); opacity: 1 } }
@keyframes wiggle { 0%,100% { transform: rotate(0) } 25% { transform: rotate(-4deg) } 75% { transform: rotate(4deg) } }
.bubble {
  background: var(--card); border-radius: 28px; padding: 18px 22px; box-shadow: var(--shadow);
  font-size: 34px; line-height: 1.35; margin: 12px auto; max-width: 820px; position: relative; animation: pop .35s ease;
  display: flex; align-items: center; gap: 14px;
}
.bubble .words { flex: 1; letter-spacing: .02em; word-spacing: .12em; }
.words span { border-radius: 10px; padding: 0 2px; transition: background .08s; }
.words span.hl { background: #ffe066; box-shadow: 0 0 0 3px #ffe066; }
.btn {
  font-family: inherit; font-weight: 700; font-size: 32px; border: none; border-radius: 26px; padding: 18px 30px;
  color: #fff; background: var(--orange); box-shadow: var(--shadow); cursor: pointer; transition: transform .1s;
  touch-action: manipulation;
}
.btn:active { transform: translateY(4px); box-shadow: 0 2px 0 rgba(0,0,0,.12); }
.btn.blue { background: var(--blue); } .btn.green { background: var(--green); } .btn.pink { background: var(--pink); }
.btn.purple { background: var(--purple); } .btn.ghost { background: #fff; color: var(--ink); }
.btn.big { font-size: 56px; min-width: 190px; min-height: 150px; border-radius: 36px; }
.row { display: flex; gap: 18px; justify-content: center; flex-wrap: wrap; margin: 18px 0; }
input.name {
  font-family: inherit; font-size: 44px; text-align: center; padding: 14px 18px; border-radius: 24px;
  border: 5px solid var(--orange); width: min(520px, 90vw); outline: none; background: #fff;
}
.err { color: #c2410c; font-size: 26px; text-align: center; min-height: 34px; }
.speaker {
  flex: none; width: 86px; height: 86px; border-radius: 50%; border: none; background: #e0f2fe; position: relative;
  box-shadow: var(--shadow); cursor: pointer; display: grid; place-items: center;
}
.speaker img { width: 52px; height: 52px; }
.speaker[disabled] { opacity: .55; cursor: default; }
.speaker .ring { position: absolute; inset: -6px; border-radius: 50%; border: 6px solid #38bdf8; clip-path: inset(0 0 0 0);
  animation: none; }
.speaker.waiting .ring { animation: fill 3s linear forwards; }
@keyframes fill { from { clip-path: inset(100% 0 0 0) } to { clip-path: inset(0 0 0 0) } }
.speaker.muted { background: #f1f5f9; }
.speaker.playing { animation: wiggle .4s infinite; }
.hint { font-size: 20px; color: #64748b; text-align: center; min-height: 26px; }
.topbar { display: flex; align-items: center; gap: 12px; font-size: 28px; font-weight: 700; }
.progress { flex: 1; height: 22px; background: #ffffffaa; border-radius: 20px; overflow: hidden; box-shadow: inset 0 2px 4px #0002; }
.progress > div { height: 100%; background: linear-gradient(90deg, #34d399, #22c55e); border-radius: 20px; transition: width .4s; }
.pill { background: #fff; border-radius: 20px; padding: 4px 14px; box-shadow: var(--shadow); display: flex; align-items: center; gap: 6px; }
.pill img { width: 30px; height: 30px; }
.stem { background: #fff; border-radius: 28px; padding: 14px; box-shadow: var(--shadow); margin: 12px auto; max-width: 820px; text-align: center; }
.stem svg { width: 100%; max-height: 300px; }
.choices { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 16px; margin: 16px auto; max-width: 820px; }
.choice {
  background: #fff; border: 6px solid transparent; border-radius: 28px; padding: 10px; box-shadow: var(--shadow);
  min-height: 150px; display: grid; place-items: center; cursor: pointer; font-family: inherit; font-size: 40px; font-weight: 700;
  color: var(--ink); animation: pop .3s ease backwards; touch-action: manipulation;
}
.choice svg { width: 100%; max-height: 220px; }
.choice:nth-child(2) { animation-delay: .05s } .choice:nth-child(3) { animation-delay: .1s } .choice:nth-child(4) { animation-delay: .15s }
.choice:active { transform: scale(.96); }
.choice.right { border-color: var(--green); background: #dcfce7; }
.choice.wrongpick { border-color: #fb923c; animation: wiggle .4s 2; }
.choice[disabled] { opacity: .3; filter: grayscale(1); cursor: default; }
.choice.text { font-size: 44px; }
.banner { text-align: center; font-size: 30px; font-weight: 700; background: #ede9fe; border-radius: 24px; padding: 10px; margin: 8px auto; max-width: 820px; }
.feedback { position: fixed; inset: 0; display: grid; place-items: center; background: #fff8; z-index: 40; animation: pop .25s ease; }
.feedback .card { background: #fff; border-radius: 36px; padding: 26px 34px; text-align: center; box-shadow: 0 10px 30px #0003; max-width: 90vw; }
.feedback .msg { font-size: 46px; font-weight: 700; }
.feedback .sub { font-size: 30px; margin-top: 6px; }
.stars-big { font-size: 64px; letter-spacing: 6px; }
.starline img { width: 54px; height: 54px; animation: pop .4s ease backwards; }
table.prog { width: 100%; border-collapse: collapse; background: #fff; border-radius: 18px; overflow: hidden; font-size: 20px; }
table.prog td, table.prog th { padding: 8px 10px; border-bottom: 1px solid #eee; text-align: left; }
.parent { font-size: 20px; } .parent h2 { font-size: 30px; }
.card-list { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 14px; }
.ucard { background: #fff; border-radius: 22px; padding: 14px; box-shadow: var(--shadow); cursor: pointer; font-size: 20px; }
.ucard b { font-size: 28px; }
.link { background: none; border: none; color: #475569; font-family: inherit; font-size: 20px; text-decoration: underline; cursor: pointer; }
.preview-tag { position: fixed; bottom: 6px; right: 10px; font-size: 13px; color: #64748b; }
@media (max-width: 600px) {
  .bubble { font-size: 26px; } .btn.big { font-size: 42px; min-width: 120px; min-height: 110px; }
  .choice { min-height: 110px; font-size: 30px; } .speaker { width: 70px; height: 70px; }
}

/* ---- Pikachu mascot (original SVG, web/pikachu.js) ---- */
.pk { width: 96px; height: auto; overflow: visible; display: block; }
.pk.big { width: 150px; }
.pk .pk-all { transform-origin: 100px 205px; animation: pk-bounce 1.8s ease-in-out infinite; }
.pk .pk-head { transform-origin: 100px 120px; transition: transform .35s ease; }
.pk .pk-ear-l { transform-origin: 70px 60px; animation: pk-twitch 4.5s ease-in-out infinite; }
.pk .pk-ear-r { transform-origin: 130px 60px; animation: pk-twitch 4.5s ease-in-out infinite 2.2s; }
.pk .pk-tail { transform-origin: 145px 170px; animation: pk-wag 2.4s ease-in-out infinite; }
.pk .pk-mouth-open { display: none; }
.pk.happy .pk-mouth-open { display: inline; }
.pk.happy .pk-mouth { display: none; }
.pk.happy .pk-all { animation: pk-jump .7s cubic-bezier(.3,1.6,.5,1) 2; }
.pk.happy .pk-cheek { animation: pk-zap .25s ease-in-out 4; }
.pk.happy .pk-arm-l { transform: rotate(-50deg); transform-origin: 70px 150px; transform-box: view-box; }
.pk.happy .pk-arm-r { transform: rotate(50deg); transform-origin: 130px 150px; transform-box: view-box; }
.pk.oops .pk-head { transform: rotate(-12deg); }
.pk.oops .pk-all { animation: pk-sway 1.6s ease-in-out 1; }
@keyframes pk-bounce { 0%,100% { transform: translateY(0) } 50% { transform: translateY(-6px) scale(1.01,.99) } }
@keyframes pk-jump { 0% { transform: translateY(0) scale(1.05,.92) } 45% { transform: translateY(-38px) scale(.96,1.05) } 80% { transform: translateY(0) scale(1.06,.92) } 100% { transform: none } }
@keyframes pk-twitch { 0%,90%,100% { transform: rotate(0) } 94% { transform: rotate(-8deg) } }
@keyframes pk-wag { 0%,100% { transform: rotate(0) } 50% { transform: rotate(7deg) } }
@keyframes pk-zap { 50% { fill: #ff7a7a; filter: drop-shadow(0 0 6px #ffe066) } }
@keyframes pk-sway { 0%,100% { transform: none } 50% { transform: translateX(-3px) } }
.pk-spark { position: absolute; left: 50%; top: 40%; pointer-events: none; animation: pk-spark 1s ease-out forwards; }
@keyframes pk-spark { 0% { transform: translate(-50%,-50%) scale(.2); opacity: 1 }
  100% { transform: translate(calc(-50% + var(--dx)), calc(-50% + var(--dy))) scale(1) rotate(90deg); opacity: 0 } }
@media (prefers-reduced-motion: reduce) { .pk *, .pk-spark { animation: none !important; } }