:root {
  --bg: #23103f;
  --bg-2: #2f1754;
  --panel: #3a1d66;
  --line: #5c3a92;
  --text: #fff8ee;
  --muted: #cdb8ef;
  --honey: #ffd23f;
  --honey-deep: #e0a800;
  --pink: #ff5fa2;
  --mint: #3ee0b0;
  --sky: #5cc8ff;
  --orange: #ff8a3d;
  --grape: #a77bff;
  --ink: #23103f;
  --good: #3ee0b0;
  --bad: #ff6b6b;
  --radius: 20px;
  --display: 'Fredoka', 'Bricolage Grotesque', system-ui, sans-serif;
  --body: 'Inter', system-ui, -apple-system, Segoe UI, sans-serif;
}
* { box-sizing: border-box; }
html, body { margin: 0; background: var(--bg); color: var(--text); font-family: var(--body); -webkit-font-smoothing: antialiased; }
body { min-height: 100dvh; }
button { font: inherit; cursor: pointer; }
h1, h2, h3 { font-family: var(--display); font-weight: 700; margin: 0; letter-spacing: -0.01em; }
.muted { color: var(--muted); }
.honey { color: var(--honey); }
.pink { color: var(--pink); }
.good { color: var(--good); }
.bad { color: var(--bad); }

/* colourful party background: soft blobs + sprinkles + paw prints */
.comb {
  background-color: var(--bg);
  background-image:
    radial-gradient(circle at 8% 12%, rgba(255,95,162,.28), transparent 32%),
    radial-gradient(circle at 92% 8%, rgba(92,200,255,.22), transparent 30%),
    radial-gradient(circle at 85% 92%, rgba(255,210,63,.20), transparent 34%),
    radial-gradient(circle at 12% 88%, rgba(62,224,176,.18), transparent 30%),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160' viewBox='0 0 160 160'%3E%3Cg opacity='.16'%3E%3Crect x='18' y='22' width='14' height='5' rx='2.5' fill='%23ff5fa2' transform='rotate(30 25 24)'/%3E%3Crect x='110' y='30' width='14' height='5' rx='2.5' fill='%23ffd23f' transform='rotate(-40 117 32)'/%3E%3Crect x='70' y='120' width='14' height='5' rx='2.5' fill='%235cc8ff' transform='rotate(70 77 122)'/%3E%3Ccircle cx='140' cy='110' r='3.5' fill='%233ee0b0'/%3E%3Ccircle cx='40' cy='130' r='3' fill='%23ff8a3d'/%3E%3Cg fill='%23fff8ee' transform='translate(64 54) rotate(-18)'%3E%3Cellipse cx='12' cy='16' rx='7' ry='6'/%3E%3Ccircle cx='4' cy='7' r='2.6'/%3E%3Ccircle cx='10' cy='3' r='2.6'/%3E%3Ccircle cx='16' cy='3' r='2.6'/%3E%3Ccircle cx='21' cy='8' r='2.6'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
  background-attachment: fixed;
}

.btn {
  border: 0; border-radius: 999px; padding: 14px 20px; font-weight: 700;
  background: var(--honey); color: var(--ink); font-size: 16px; font-family: var(--display); letter-spacing: .01em;
  box-shadow: 0 4px 0 var(--honey-deep);
  transition: transform .08s ease, box-shadow .08s ease, filter .15s;
}
.btn:hover { filter: brightness(1.05); }
.btn:active { transform: translateY(3px); box-shadow: 0 1px 0 var(--honey-deep); }
.btn:disabled { opacity: .4; cursor: default; }
.btn.ghost { background: rgba(255,255,255,.04); color: var(--text); border: 2px solid var(--line); box-shadow: none; }
.btn.good { background: var(--good); color: var(--ink); box-shadow: 0 4px 0 #1ea983; }
.btn.bad { background: var(--bad); color: var(--ink); box-shadow: 0 4px 0 #c94444; }
.btn.pink { background: var(--pink); color: var(--ink); box-shadow: 0 4px 0 #c93a7c; }
.btn.sm { padding: 8px 14px; font-size: 14px; box-shadow: 0 3px 0 var(--honey-deep); }
.btn.sm.ghost { box-shadow: none; }
.btn.sm.good { box-shadow: 0 3px 0 #1ea983; }
.btn.sm.bad { box-shadow: 0 3px 0 #c94444; }
.btn.block { width: 100%; }

input[type=text], input[type=password], input[type=number] {
  width: 100%; font: inherit; font-size: 20px; padding: 14px 18px; border-radius: 16px;
  border: 3px solid var(--line); background: var(--bg-2); color: var(--text); outline: none;
}
input:focus { border-color: var(--pink); }

.card { background: var(--panel); border: 2px solid var(--line); border-radius: var(--radius); padding: 18px; box-shadow: 0 6px 0 rgba(0,0,0,.18); }
.row { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.stack > * + * { margin-top: 12px; }
.chip { display: inline-flex; align-items: center; gap: 6px; padding: 4px 12px; border-radius: 999px; background: var(--bg-2); border: 2px solid var(--line); font-size: 13px; color: var(--muted); font-weight: 600; }
.chip.on { background: var(--honey); color: var(--ink); border-color: var(--honey); font-weight: 700; }
.chip.pink { background: var(--pink); color: var(--ink); border-color: var(--pink); }
.chip.sky { background: var(--sky); color: var(--ink); border-color: var(--sky); }
.err { color: var(--bad); font-weight: 600; min-height: 1.2em; }

.bee-mark { display: inline-block; width: 1em; height: 1em; vertical-align: -0.12em; }

/* rainbow word art */
.rainbow span:nth-child(5n+1) { color: var(--honey); }
.rainbow span:nth-child(5n+2) { color: var(--pink); }
.rainbow span:nth-child(5n+3) { color: var(--sky); }
.rainbow span:nth-child(5n+4) { color: var(--mint); }
.rainbow span:nth-child(5n+5) { color: var(--orange); }

/* Shinda stickers: photo in a chunky white frame with a little tilt */
.shinda {
  display: inline-block; position: relative; width: 120px; aspect-ratio: 1; flex: 0 0 auto;
  border-radius: 50%; border: 6px solid #fff; background: #fff center / cover no-repeat;
  box-shadow: 0 8px 0 rgba(0,0,0,.25), 0 0 0 3px var(--pink);
  transform: rotate(-6deg); animation: wobble 3.2s ease-in-out infinite;
}
.shinda.square { border-radius: 26px; }
.shinda.tilt-r { transform: rotate(7deg); animation-name: wobble-r; }
.shinda.ring-sky { box-shadow: 0 8px 0 rgba(0,0,0,.25), 0 0 0 3px var(--sky); }
.shinda.ring-honey { box-shadow: 0 8px 0 rgba(0,0,0,.25), 0 0 0 3px var(--honey); }
.shinda.ring-mint { box-shadow: 0 8px 0 rgba(0,0,0,.25), 0 0 0 3px var(--mint); }
.shinda.still { animation: none; }
.shinda .crown { position: absolute; top: -.55em; left: 50%; transform: translateX(-50%) rotate(-8deg); font-size: .5em; filter: drop-shadow(0 3px 0 rgba(0,0,0,.25)); }
.shinda[data-pic=face] { background-image: url(/img/shinda/face.webp); }
.shinda[data-pic=stare] { background-image: url(/img/shinda/stare.webp); }
.shinda[data-pic=blep] { background-image: url(/img/shinda/blep.webp); }
.shinda[data-pic=sit] { background-image: url(/img/shinda/sit.webp); background-position: center 30%; }
.shinda[data-pic=stand] { background-image: url(/img/shinda/stand.webp); background-position: center 30%; }
@keyframes wobble { 0%, 100% { transform: rotate(-6deg); } 50% { transform: rotate(-1deg) translateY(-4px); } }
@keyframes wobble-r { 0%, 100% { transform: rotate(7deg); } 50% { transform: rotate(2deg) translateY(-4px); } }

/* speech bubble from Shinda */
.bubble {
  position: relative; display: inline-block; background: #fff; color: var(--ink); font-family: var(--display); font-weight: 600;
  padding: .55em .9em; border-radius: 1.1em; line-height: 1.2; box-shadow: 0 5px 0 rgba(0,0,0,.2); max-width: 18em;
}
.bubble::after { content: ''; position: absolute; left: 1.2em; bottom: -.55em; border: .6em solid transparent; border-top-color: #fff; border-bottom: 0; }
.bubble.left::after { left: auto; right: 1.2em; }
.bubble.side::after { left: -.55em; top: 50%; bottom: auto; transform: translateY(-50%); border: .6em solid transparent; border-right-color: #fff; border-left: 0; }

@media (prefers-reduced-motion: reduce) {
  .shinda { animation: none; }
}