/* ============================================
   QUIZ PUP COLORS - change these to restyle the whole game!
   ============================================ */
:root {
  --night: #1a1040;      /* dark purple background */
  --sky: #bfe6ff;        /* light blue stage */
  --sky-deep: #7cc4f5;
  --gold: #ffd23f;
  --pink: #ff3b8d;
  --green: #2ecc40;
  --red: #ff4136;
}

body {
  margin: 0;
  min-height: 100vh;
  background: var(--night);
  font-family: "Trebuchet MS", "Comic Sans MS", sans-serif;
  display: flex;
  justify-content: center;
  align-items: center;
}

#stage {
  width: 760px;
  max-width: 100%;
  min-height: 652px;
  box-sizing: border-box;
  padding: 16px 24px;
  background: linear-gradient(var(--sky), var(--sky-deep));
  border: 8px dotted var(--gold);
  border-radius: 16px;
  text-align: center;
  position: relative;
  overflow: hidden;
  animation: bulbs 1s steps(2) infinite;
}

/* Marquee lights blinking around the edge */
@keyframes bulbs {
  0% { border-color: var(--gold); }
  100% { border-color: var(--pink); }
}

/* Sweeping spotlights */
.spotlight {
  position: absolute;
  top: -60px;
  width: 160px;
  height: 700px;
  background: linear-gradient(rgba(255, 255, 255, 0.55), rgba(255, 255, 255, 0));
  clip-path: polygon(40% 0, 60% 0, 100% 100%, 0 100%);
  pointer-events: none;
  transform-origin: top center;
}
.spotlight.left { left: 40px; animation: sweep 4s ease-in-out infinite alternate; }
.spotlight.right { right: 40px; animation: sweep 4s ease-in-out infinite alternate-reverse; }
@keyframes sweep {
  0% { transform: rotate(-25deg); }
  100% { transform: rotate(25deg); }
}

#title {
  margin: 0 0 8px;
  font-size: 44px;
  color: var(--pink);
  letter-spacing: 6px;
  text-shadow: 3px 3px 0 var(--night), 6px 6px 0 var(--gold);
  font-style: italic;
}

#host {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  margin-bottom: 8px;
  position: relative;
}
#host-face {
  flex-shrink: 0;
  transform-origin: 50% 100%;
  animation: groove 1.33s ease-in-out infinite; /* 90 beats per minute, like the music */
}
@keyframes groove {
  0%, 100% { transform: rotate(-3deg) translateY(0); }
  50% { transform: rotate(3deg) translateY(-3px); }
}
/* The bubble has a fixed size so the host doesn't jump around while the words type out */
#host-says {
  background: white;
  border: 3px solid var(--night);
  border-radius: 14px;
  padding: 8px 14px;
  font-weight: bold;
  width: 400px;
  max-width: calc(100% - 120px);
  min-height: 2.6em;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  box-shadow: 4px 4px 0 var(--night);
}

/* ---------- Drawn hosts (hosts.js) ---------- */
.host-svg { width: 110px; height: 132px; display: block; overflow: visible; }
.host-svg .eyes { transform-box: fill-box; transform-origin: 50% 50%; animation: blink 3.5s infinite; }
.host-svg .mouth-open { opacity: 0; }
.host-svg .host-head { transform-box: fill-box; transform-origin: 50% 100%; }
.host-svg .arm-right { transform-box: view-box; }
.host-svg.human .arm-right { transform-origin: 70px 86px; }
.host-svg.robot .arm-right { transform-origin: 73px 66px; }
.host-svg.alien .arm-right { transform-origin: 69px 82px; }
.host-svg.pirate .arm-right { transform-origin: 70px 86px; }
.host-svg.mermaid .arm-right { transform-origin: 69px 84px; }
.host-svg.brick .arm-right { transform-origin: 64px 68px; }

/* Talking: the mouth flaps and the head bobs */
#host-face.talking .mouth-open { animation: mouth-flap 0.22s steps(1) infinite; }
#host-face.talking .mouth-closed { animation: mouth-flap 0.22s steps(1) infinite reverse; }
#host-face.talking .host-head { animation: chatter 0.44s ease-in-out infinite; }
@keyframes mouth-flap {
  0% { opacity: 1; }
  50% { opacity: 0; }
}
@keyframes chatter {
  0%, 100% { transform: rotate(0); }
  50% { transform: rotate(-3deg) translateY(-1px); }
}

/* Robot extras: blinking antenna, flashing chest lights, bouncing equalizer mouth */
.host-svg .antenna-light { animation: antenna 1s steps(1) infinite; }
.host-svg .light { animation: antenna 0.9s steps(1) infinite; }
.host-svg .l2 { animation-delay: 0.3s; }
.host-svg .l3 { animation-delay: 0.6s; }
@keyframes antenna {
  0% { opacity: 1; }
  50% { opacity: 0.25; }
}
#host-face.talking .robot .mouth-open { animation: none; opacity: 1; }
#host-face.talking .robot .mouth-closed { animation: none; opacity: 0; }
.host-svg .bar { transform-box: fill-box; transform-origin: 50% 50%; }
#host-face.talking .bar { animation: equalizer 0.3s ease-in-out infinite alternate; }
#host-face.talking .bar1, #host-face.talking .bar3 { animation-delay: 0.15s; }
#host-face.talking .bar2 { animation-duration: 0.2s; }
@keyframes equalizer {
  from { transform: scaleY(0.2); }
  to { transform: scaleY(1.1); }
}

/* Gestures - the right arm turns around the shoulder */
#host-face.wave .arm-right { animation: wave 2s ease-in-out; }
#host-face.point .arm-right { animation: point 1.8s ease-in-out; }
#host-face.cheer .arm-right { animation: cheer 1.8s ease-in-out; }
#host-face.cheer .host-svg { animation: host-hop 0.45s ease-in-out 3; }
#host-face.facepalm .arm-right { animation: facepalm 2.2s ease-in-out; }
#host-face.facepalm .host-head { animation: head-drop 2.2s ease-in-out; }
#host-face.facepalm .brows { transform-box: fill-box; transform-origin: 50% 50%; animation: sad-brows 2.2s ease-in-out; }

@keyframes wave {
  0%, 100% { transform: rotate(0); }
  15%, 35%, 55%, 75% { transform: rotate(-110deg); }
  25%, 45%, 65% { transform: rotate(-145deg); }
}
@keyframes point {
  0%, 100% { transform: rotate(0); }
  15%, 80% { transform: rotate(-60deg); }
}
@keyframes cheer {
  0%, 100% { transform: rotate(0); }
  15%, 80% { transform: rotate(-155deg); }
}
@keyframes host-hop {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-10px); }
}
@keyframes facepalm {
  0%, 100% { transform: rotate(0); }
  20%, 80% { transform: rotate(-190deg); }
}
@keyframes head-drop {
  0%, 100% { transform: rotate(0); }
  20%, 80% { transform: rotate(8deg) translateY(2px); }
}
@keyframes sad-brows {
  0%, 100% { transform: rotate(0); }
  20%, 80% { transform: translateY(1px) scaleX(1.1) rotate(-6deg); }
}

/* Robot host: jerky robot moves and a computer-screen speech bubble */
#host.robot #host-face { animation: robot-bob 0.67s steps(2) infinite; }
#host.robot #host-says {
  background: #0b1a0b;
  color: #39ff14;
  font-family: "Courier New", monospace;
  border-radius: 4px;
  border-color: #39ff14;
}
@keyframes robot-bob {
  0% { transform: translateY(0) rotate(-2deg); }
  100% { transform: translateY(-4px) rotate(2deg); }
}

/* Alien host: floats up and down, wiggly antennae, and a space-purple speech bubble */
#host.alien #host-face { animation: alien-float 2.66s ease-in-out infinite; }
#host.alien #host-says {
  background: #2a0f4a;
  color: #b9ff66;
  border-color: #b9ff66;
  border-radius: 22px;
}
.host-svg .antennae { transform-box: fill-box; transform-origin: 50% 100%; animation: antennae 1.33s ease-in-out infinite; }
@keyframes alien-float {
  0%, 100% { transform: translateY(0) rotate(-2deg); }
  50% { transform: translateY(-6px) rotate(2deg); }
}
@keyframes antennae {
  0%, 100% { transform: scaleX(1); }
  50% { transform: scaleX(1.15); }
}

/* Pirate host: rocks like a ship, and talks on an old treasure map */
#host.pirate #host-face { animation: ship-rock 2.66s ease-in-out infinite; }
#host.pirate #host-says {
  background: #f3e2b3;
  color: #4a2a12;
  border-color: #6d3f1e;
  border-radius: 6px;
  font-style: italic;
}
@keyframes ship-rock {
  0%, 100% { transform: rotate(-5deg); }
  50% { transform: rotate(5deg); }
}

/* Mermaid host: floats like she's swimming, with bubbles floating up, and an ocean-blue bubble */
#host.mermaid #host-face { animation: alien-float 2.66s ease-in-out infinite; }
#host.mermaid #host-says {
  background: #d9f6ff;
  color: #00597a;
  border-color: #00a6c8;
  border-radius: 22px;
}
.host-svg .bubbles { animation: bubbles-up 2s ease-in infinite; }
@keyframes bubbles-up {
  0% { transform: translateY(8px); opacity: 0; }
  30% { opacity: 1; }
  100% { transform: translateY(-14px); opacity: 0; }
}

/* Brick Man: jerky toy moves and a bright yellow bubble */
#host.brick #host-face { animation: robot-bob 0.67s steps(2) infinite; }
#host.brick #host-says {
  background: #ffd23f;
  color: var(--night);
  border-radius: 4px;
}

/* Host picker on the start screen */
#host-picker { margin-bottom: 8px; }
.host-picker-label { font-weight: bold; color: var(--gold); margin-bottom: 6px; }
#host-buttons { display: grid; grid-template-columns: repeat(3, auto); gap: 8px; justify-content: center; }
.host-button {
  font-family: inherit;
  font-size: 12px;
  font-weight: bold;
  color: white;
  background: var(--night);
  border: 2px solid #3a2a8a;
  border-radius: 10px;
  padding: 4px 9px;
  cursor: pointer;
}
.host-button .host-mini .host-svg { width: 27px; height: 33px; margin: 0 auto 2px; }
.host-button.chosen { border-color: var(--gold); background: #3a2a8a; box-shadow: 0 0 14px var(--gold); }

/* Top bar: lives, level, coins */
#hud {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: var(--night);
  color: white;
  border-radius: 30px;
  padding: 6px 18px;
  margin-bottom: 8px;
  font-weight: bold;
  font-size: 20px;
}
#lives { font-size: 22px; letter-spacing: 2px; }
#level-name { color: var(--gold); letter-spacing: 3px; }
#level-name.easy { color: var(--green); }
#level-name.medium { color: var(--gold); }
#level-name.hard { color: var(--red); }

/* Gold coin with the Quiz Pup letter */
.coin {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 35%, #fff3a0, var(--gold) 60%, #c99700);
  border: 2px solid #a87e00;
  color: #8a6200;
  font-weight: 900;
  font-size: 15px;
  vertical-align: middle;
}
.coin.big { width: 54px; height: 54px; font-size: 30px; border-width: 3px; }
#bank-num.bump { animation: pop 0.5s ease-out; display: inline-block; }

#progress { margin-bottom: 2px; font-size: 26px; letter-spacing: 6px; }
#pot { min-height: 24px; margin-bottom: 6px; font-weight: bold; color: var(--night); }
#pot .pop { display: inline-block; animation: pop 0.5s ease-out; }

#question-box {
  background: var(--night);
  color: white;
  border: 4px solid var(--gold);
  border-radius: 12px;
  padding: 14px;
  margin-bottom: 12px;
  box-shadow: 0 0 18px var(--gold);
}
#theme { color: var(--gold); font-size: 14px; letter-spacing: 2px; text-transform: uppercase; }
#question { font-size: 24px; font-weight: bold; margin-top: 4px; }

/* Logo picture questions: the logo is painted in its brand color */
#logo-card {
  display: inline-block;
  background: white;
  border-radius: 14px;
  padding: 12px;
  margin: 8px 0 2px;
  box-shadow: 0 0 0 4px var(--gold);
  animation: pop 0.5s ease-out;
}
#logo svg { width: 110px; height: 110px; display: block; }

/* Answer boxes - pointy "game show" shape */
#answers {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 10px;
}
.answer {
  font-size: 18px;
  font-weight: bold;
  padding: 14px 28px;
  background: var(--night);
  color: white;
  border: none;
  clip-path: polygon(6% 0, 94% 0, 100% 50%, 94% 100%, 6% 100%, 0 50%);
  cursor: pointer;
  font-family: inherit;
  text-align: left;
}
.answer .letter { color: var(--gold); margin-right: 8px; }
.answer:hover:not(:disabled) { background: #3a2a8a; }
.answer.right { background: var(--green); color: var(--night); }
.answer.right .letter { color: var(--night); }
.answer.wrong { background: var(--red); }
/* The answer your pup barked at with Ask the Pup */
.answer.pup-pick { background: #5b3fd1; animation: pup-pick 0.5s ease-in-out 3; }
.answer.pup-pick::after { content: " 🐾"; }
@keyframes pup-pick {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.06); }
}
.big-button.pup-button { background: var(--gold); color: var(--night); }

/* Checkered dance floor where the pup stands */
#floor {
  margin: 14px -24px 0;
  padding: 6px 0 4px;
  background: repeating-conic-gradient(#ffffff55 0 25%, #00000022 0 50%) 0 0 / 40px 40px;
}
#pup-row { display: flex; justify-content: center; align-items: flex-end; gap: 10px; }
#toys { font-size: 40px; }
/* A pup picture. Its size comes from font-size, so the hat grows with it. */
.pup { display: inline-block; position: relative; line-height: 1; }
.dog-svg { width: 1em; height: 1em; display: block; }
#dog { font-size: 90px; }
/* The hat sits on top of the pup's head and moves with it */
.pup .hat {
  position: absolute;
  top: -0.2em;
  left: 50%;
  transform: translateX(-50%);
  font-size: 0.45em;
}
#tricks { display: flex; justify-content: center; flex-wrap: wrap; gap: 6px; margin-top: 4px; }
.trick-button {
  font-family: inherit;
  font-weight: bold;
  font-size: 14px;
  padding: 4px 10px;
  background: white;
  border: 2px solid var(--night);
  border-radius: 20px;
  cursor: pointer;
}
.trick-button:hover { background: var(--gold); }
#dog-name { font-weight: bold; color: var(--night); }

/* ---------- Full-body pup on stage ---------- */
.dog-body { width: 1.4em; height: 1.5em; display: block; overflow: visible; }
.pup.full .hat { top: -0.12em; }

/* Always alive: wagging tail, little head tilt, blinking eyes */
.dog-body .tail {
  transform-box: fill-box;
  transform-origin: 0% 100%;
  animation: wag 1.2s ease-in-out infinite;
}
.dog-body .head {
  transform-box: fill-box;
  transform-origin: 50% 95%;
  animation: tilt 4s ease-in-out infinite;
}
.dog-body .eyes {
  transform-box: fill-box;
  transform-origin: 50% 50%;
  animation: blink 4s infinite;
}
.dog-body .puddle, .dog-body .stream, .dog-body .splash, .dog-body .heart { opacity: 0; }
#dog-name { margin-top: 6px; }

@keyframes wag {
  0%, 100% { transform: rotate(-12deg); }
  50% { transform: rotate(14deg); }
}
@keyframes tilt {
  0%, 100% { transform: rotate(0); }
  30% { transform: rotate(-5deg); }
  60% { transform: rotate(4deg); }
}
@keyframes blink {
  0%, 92%, 100% { transform: scaleY(1); }
  95% { transform: scaleY(0.1); }
}

/* Happy: bouncy squash-and-stretch jump, super fast wag, hearts float up */
.pup.full.happy { transform-origin: 50% 100%; animation: happy-jump 0.7s ease-in-out 3; }
.pup.full.happy .tail { animation-duration: 0.2s; }
.pup.full.happy .heart {
  transform-box: fill-box;
  transform-origin: 50% 50%;
  animation: heart-float 1.6s ease-out forwards;
}
.pup.full.happy .h2 { animation-delay: 0.3s; }
.pup.full.happy .h3 { animation-delay: 0.6s; }

@keyframes happy-jump {
  0%, 100% { transform: translateY(0) scale(1, 1); }
  15% { transform: translateY(0) scale(1.15, 0.85); }
  45% { transform: translateY(-50px) scale(0.92, 1.1) rotate(-4deg); }
  60% { transform: translateY(-50px) scale(0.95, 1.05) rotate(4deg); }
  85% { transform: translateY(0) scale(1.12, 0.88); }
}
@keyframes heart-float {
  0% { opacity: 0; transform: translateY(10px) scale(0.3); }
  20% { opacity: 1; transform: translateY(0) scale(1.2); }
  100% { opacity: 0; transform: translateY(-45px) scale(1); }
}

/* Pee: lift the back leg, a stream arcs out, and a puddle grows on the floor (and stays!) */
.pup.full.pee .hind-leg {
  transform-box: fill-box;
  transform-origin: 0% 50%;
  animation: leg-lift 2.6s ease-in-out forwards;
}
.pup.full.pee .stream { animation: stream 2.6s linear forwards, dribble 0.25s linear infinite; }
.pup.full.pee .puddle {
  transform-box: fill-box;
  transform-origin: 50% 50%;
  animation: puddle 2.6s ease-out forwards;
}
.pup.full.pee .head { animation: sheepish 2.6s ease-in-out forwards; }
.pup.full.pee .splash { animation: splash 2.6s ease-out forwards; }

@keyframes leg-lift {
  0%, 100% { transform: rotate(0); }
  15%, 80% { transform: translate(4px, -10px) rotate(-55deg); }
}
@keyframes splash {
  0%, 35% { opacity: 0; transform: translateY(4px); }
  45%, 75% { opacity: 1; transform: translateY(-3px); }
  100% { opacity: 0; transform: translateY(0); }
}
@keyframes stream {
  0%, 20% { opacity: 0; }
  25%, 75% { opacity: 1; }
  85%, 100% { opacity: 0; }
}
@keyframes dribble {
  to { stroke-dashoffset: -7; }
}
@keyframes puddle {
  0%, 25% { opacity: 0; transform: scale(0.1, 0.3); }
  80%, 100% { opacity: 0.9; transform: scale(1, 1); }
}
@keyframes sheepish {
  0%, 100% { transform: rotate(0); }
  20%, 80% { transform: rotate(12deg) translateX(4px); }
}

/* Props for the naughty moves are hidden until their move plays */
.dog-body .brows, .dog-body .swirl-eyes, .dog-body .paper, .dog-body .bit, .dog-body .burp,
.dog-body .growl-bubble, .dog-body .poop, .dog-body .vase, .dog-body .shard, .dog-body .dizzy { opacity: 0; }
/* Parts that animate around their own middle */
.dog-body .poop, .dog-body .stink path, .dog-body .vase, .dog-body .shard, .dog-body .burp,
.dog-body .growl-bubble, .dog-body .paper, .dog-body .bit {
  transform-box: fill-box;
  transform-origin: 50% 100%;
}

/* Poop: strain and wobble, then it drops out beside the pup, squishes, and stinks */
.pup.full.poop { transform-origin: 50% 100%; animation: strain 0.14s ease-in-out 9; }
.pup.full.poop .eyes { animation: squeeze 1.3s forwards; }
.pup.full.poop .poop { animation: poop-drop 1.6s ease-in forwards; }
.pup.full.poop .stink path { animation: stink 1.2s ease-in-out 1.5s infinite; opacity: 0; }
.pup.full.poop .stink path:nth-child(2) { animation-delay: 1.8s; }
.pup.full.poop .stink path:nth-child(3) { animation-delay: 2.1s; }

@keyframes strain {
  0%, 100% { transform: translateX(0) scale(1, 1); }
  50% { transform: translateX(-2px) scale(1.04, 0.95); }
}
@keyframes squeeze {
  0%, 80% { transform: scaleY(0.25); }
  100% { transform: scaleY(1); }
}
@keyframes poop-drop {
  0%, 70% { opacity: 0; transform: translate(14px, -24px) scale(0.3); }
  72% { opacity: 1; }
  85% { transform: translate(0, 0) scale(1.15, 0.8); }
  92% { transform: translate(0, -3px) scale(0.95, 1.08); }
  100% { opacity: 1; transform: translate(0, 0) scale(1, 1); }
}
@keyframes stink {
  0% { opacity: 0; transform: translateY(6px); }
  40% { opacity: 1; }
  100% { opacity: 0; transform: translateY(-10px); }
}

/* Vase: it appears, the tail gives a big swipe, the vase wobbles, tips and SMASHES */
.pup.full.vase .vase { transform-origin: 100% 100%; animation: vase-fall 1.5s ease-in forwards; }
.pup.full.vase .tail { animation: swipe 0.9s ease-in-out; }
.pup.full.vase .shard { animation: shatter 0.6s ease-out 1.4s forwards; }
.pup.full.vase .s1 { --fly: -14px; --spin: -90deg; }
.pup.full.vase .s2 { --fly: 10px; --spin: 120deg; }
.pup.full.vase .s3 { --fly: -6px; --spin: 200deg; }
.pup.full.vase .s4 { --fly: 18px; --spin: -150deg; }
.pup.full.vase .s5 { --fly: 24px; --spin: 0deg; }
.pup.full.vase .head { animation: oops-look 2.4s ease-in-out forwards; }

@keyframes vase-fall {
  0% { opacity: 0; transform: rotate(0); }
  10% { opacity: 1; transform: rotate(0); }
  40% { transform: rotate(-12deg); }
  55% { transform: rotate(10deg); }
  70% { transform: rotate(-6deg); }
  92% { opacity: 1; transform: rotate(85deg); }
  100% { opacity: 0; transform: rotate(90deg); }
}
@keyframes swipe {
  0%, 100% { transform: rotate(0); }
  40% { transform: rotate(35deg); }
  60% { transform: rotate(-20deg); }
}
@keyframes shatter {
  0% { opacity: 1; transform: translate(0, -12px) rotate(0) scale(0.5); }
  60% { transform: translate(var(--fly), -14px) rotate(var(--spin)) scale(1); }
  100% { opacity: 1; transform: translate(var(--fly), 0) rotate(var(--spin)) scale(1); }
}
@keyframes oops-look {
  0%, 100% { transform: rotate(0); }
  60%, 90% { transform: rotate(14deg) translateX(4px); }
}

/* Growl: crouch low and shake, angry eyebrows, and a GRRR! bubble from its mouth */
.pup.full.growl { transform-origin: 50% 100%; animation: growl-shake 0.12s linear 14; }
.pup.full.growl .brows { animation: show 0.2s forwards; }
.pup.full.growl .growl-bubble { transform-origin: 80% 100%; animation: bubble-pop 0.4s ease-out 0.9s forwards; }

@keyframes growl-shake {
  0%, 100% { transform: translateX(-3px) scale(1.05, 0.92); }
  50% { transform: translateX(3px) scale(1.05, 0.92); }
}
@keyframes show {
  to { opacity: 1; }
}
@keyframes bubble-pop {
  0% { opacity: 0; transform: scale(0.2); }
  70% { opacity: 1; transform: scale(1.15); }
  100% { opacity: 1; transform: scale(1); }
}

/* Homework: chomp chomp (paper gets smaller, bits fall), then a big BURP */
.pup.full.homework .head { animation: chew 0.18s ease-in-out 7; }

/* Lick: the pup leans in close... then a giant tongue licks the whole screen (lickScreen in game.js) */
.pup.full.lick .head { animation: lean-lick 1.8s ease-in-out 0.8s; }
@keyframes lean-lick {
  0%, 100% { transform: none; }
  30%, 75% { transform: translateY(-6px) scale(1.18); }
  50% { transform: translateY(-6px) scale(1.18) rotate(-8deg); }
}
.lick-screen { position: absolute; inset: 0; z-index: 7; pointer-events: none; overflow: hidden; }
.lick-screen .tongue {
  position: absolute;
  left: 15%;
  bottom: 0;
  width: 70%;
  height: 90%;
  transform: translateY(110%);
  transform-origin: 50% 100%;
  animation: tongue-lick 1.3s ease-in-out forwards;
}
.lick-screen .tongue svg { width: 100%; height: 100%; display: block; }
@keyframes tongue-lick {
  0% { transform: translateY(110%); }
  30% { transform: translateY(4%) rotate(-12deg); }
  50% { transform: translateY(0) rotate(12deg); }
  70% { transform: translateY(4%) rotate(-6deg); }
  100% { transform: translateY(115%); }
}
/* Shiny slobber drips that slide down and fade away */
.slobber {
  position: absolute;
  width: 46px;
  height: 38px;
  border-radius: 50% 50% 45% 55%;
  background: radial-gradient(circle at 35% 30%, rgba(255, 255, 255, 0.95) 0 14%, rgba(170, 225, 255, 0.6) 16%);
  border: 2px solid rgba(120, 190, 235, 0.7);
  opacity: 0;
  animation: slobber 4s ease-in forwards;
}
.slobber::after {
  content: "";
  position: absolute;
  left: 40%;
  top: 85%;
  width: 10px;
  height: 22px;
  border-radius: 50% 50% 50% 50% / 30% 30% 70% 70%;
  background: rgba(170, 225, 255, 0.7);
}
@keyframes slobber {
  0% { opacity: 0; transform: scale(0.3); }
  10% { opacity: 1; transform: scale(1); }
  75% { opacity: 0.9; transform: translateY(40px) scaleY(1.2); }
  100% { opacity: 0; transform: translateY(70px) scaleY(1.3); }
}
.pup.full.homework .paper { transform-origin: 0% 50%; animation: eat-paper 1.3s steps(4) forwards; }
.pup.full.homework .bit { animation: bit-fall 0.7s ease-in 0.3s forwards; }
.pup.full.homework .b2 { animation-delay: 0.6s; }
.pup.full.homework .b3 { animation-delay: 0.9s; }
.pup.full.homework .burp { transform-origin: 0% 100%; animation: burp 1.4s ease-out 1.35s forwards; }
.pup.full.homework { animation: belly 0.5s ease-in-out 1.2s; transform-origin: 50% 100%; }

@keyframes chew {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(3px) rotate(-2deg); }
}
@keyframes eat-paper {
  0% { opacity: 1; transform: scaleX(1); }
  99% { opacity: 1; transform: scaleX(0.15); }
  100% { opacity: 0; transform: scaleX(0); }
}
@keyframes bit-fall {
  0% { opacity: 1; transform: translateY(0) rotate(0); }
  100% { opacity: 1; transform: translateY(50px) rotate(160deg); }
}
@keyframes belly {
  0%, 100% { transform: scale(1, 1); }
  50% { transform: scale(1.1, 0.95); }
}
@keyframes burp {
  0% { opacity: 0; transform: scale(0.2); }
  25% { opacity: 1; transform: scale(1.15); }
  70% { opacity: 1; transform: scale(1) translateY(-8px); }
  100% { opacity: 0; transform: scale(1.1) translateY(-20px); }
}

/* Tail chase: spin round and round, then dizzy swirly eyes and circling stars */
.pup.full.chase { transform-origin: 50% 100%; animation: chase 1.6s ease-in-out; }
.pup.full.chase .tail { animation-duration: 0.15s; }
.pup.full.chase .swirl-eyes { animation: show 0.1s 1.6s forwards; }
.pup.full.chase .dizzy {
  transform-box: view-box;
  transform-origin: 70px 22px;
  animation: show 0.1s 1.6s forwards, orbit 1.2s linear 1.6s infinite;
}
.pup.full.chase .head { animation: woozy 1.4s ease-in-out 1.6s infinite; }

@keyframes chase {
  0% { transform: perspective(400px) rotateY(0) translateY(0); }
  25% { transform: perspective(400px) rotateY(270deg) translateY(-14px); }
  50% { transform: perspective(400px) rotateY(540deg) translateY(0); }
  75% { transform: perspective(400px) rotateY(810deg) translateY(-14px); }
  100% { transform: perspective(400px) rotateY(1080deg) translateY(0); }
}
@keyframes orbit {
  to { transform: rotate(360deg); }
}
@keyframes woozy {
  0%, 100% { transform: rotate(-8deg); }
  50% { transform: rotate(8deg); }
}

.pup.happy { animation: jump 0.5s ease-in-out 3; }
.pup.naughty { animation: shake 0.15s linear 8; }
.pup.spin { animation: spin 0.8s ease-in-out 2; }
.pup.roll { animation: roll 1.2s ease-in-out; }

@keyframes spin {
  100% { transform: rotate(360deg); }
}
@keyframes roll {
  0% { transform: translateX(0) rotate(0); }
  50% { transform: translateX(60px) rotate(360deg); }
  100% { transform: translateX(0) rotate(720deg); }
}

#effect { font-size: 44px; min-height: 52px; }
#effect.drop { animation: dropdown 0.8s ease-in; }
#effect.pop { animation: pop 0.5s ease-out; }

@keyframes jump {
  0%, 100% { transform: translateY(0) rotate(0); }
  25% { transform: translateY(-40px) rotate(-12deg); }
  75% { transform: translateY(-40px) rotate(12deg); }
}
@keyframes shake {
  0%, 100% { transform: translateX(0) rotate(0); }
  25% { transform: translateX(-8px) rotate(-6deg); }
  75% { transform: translateX(8px) rotate(6deg); }
}
@keyframes dropdown {
  0% { transform: translateY(-120px); opacity: 0; }
  100% { transform: translateY(0); opacity: 1; }
}
@keyframes pop {
  0% { transform: scale(0.2); opacity: 0; }
  70% { transform: scale(1.4); opacity: 1; }
  100% { transform: scale(1); }
}

.big-button {
  margin-top: 10px;
  font-size: 20px;
  font-weight: bold;
  padding: 12px 28px;
  background: var(--pink);
  color: white;
  border: 3px solid var(--night);
  border-radius: 30px;
  cursor: pointer;
  font-family: inherit;
  box-shadow: 4px 4px 0 var(--night);
}
.big-button:hover { transform: translate(-1px, -1px); box-shadow: 5px 5px 0 var(--night); }

/* Start and end screens */
.overlay {
  position: absolute;
  inset: 0;
  background: radial-gradient(circle, #3a2a8a, var(--night));
  color: white;
  display: flex;
  flex-direction: column;
  justify-content: safe center;
  align-items: center;
  padding: 24px;
  z-index: 5;
  overflow-y: auto;
}
/* Full screens scroll instead of squishing things on top of each other */
.overlay > * { flex-shrink: 0; }
.overlay-title {
  font-size: 60px;
  margin: 0;
  color: var(--pink);
  font-style: italic;
  letter-spacing: 6px;
  text-shadow: 4px 4px 0 var(--gold);
}
.overlay-dog { font-size: 110px; animation: jump 0.6s ease-in-out infinite; }
.overlay p { font-size: 22px; font-weight: bold; }
#end-stars { font-size: 56px; letter-spacing: 8px; margin: 10px 0; }
#end-coins { font-size: 40px; font-weight: bold; color: var(--gold); }
.end-buttons { display: flex; gap: 14px; flex-wrap: wrap; justify-content: center; margin-top: 10px; }
.big-button.quit { background: #3a2a8a; }

.big-button.shop { background: var(--green); color: var(--night); }

/* Home screen: big round Start Quiz button and the shopping cart, at the bottom */
#start-dog { margin-top: 30px; font-size: 76px; } /* room for the pup to jump without bumping the title */
#start-screen p { margin: 6px 0 10px; }
#home-bottom {
  margin-top: auto;
  padding-top: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 18px;
}
.circle-button {
  width: 130px;
  height: 130px;
  border-radius: 50%;
  font-family: inherit;
  font-size: 24px;
  font-weight: 900;
  letter-spacing: 2px;
  line-height: 1.2;
  color: white;
  background: radial-gradient(circle at 35% 30%, #ff7ab5, var(--pink) 60%, #c4155f);
  border: 5px solid var(--gold);
  box-shadow: 0 6px 0 var(--night), 0 0 22px var(--gold);
  cursor: pointer;
  padding: 0;
  animation: throb 1.33s ease-in-out infinite; /* pulses to the music */
}
.circle-button:active { transform: translateY(4px); box-shadow: 0 2px 0 var(--night); }
.circle-button.cart,
.circle-button.trophy {
  width: 76px;
  height: 76px;
  font-size: 38px;
  background: radial-gradient(circle at 35% 30%, #7dff9a, var(--green) 60%, #1a8a2a);
  animation: none;
}
.circle-button.trophy { background: radial-gradient(circle at 35% 30%, #7a6ad8, #3a2a8a 60%, var(--night)); }
@keyframes throb {
  0%, 100% { scale: 1; }
  50% { scale: 1.06; }
}

/* Pup Shop */
#shop-screen { justify-content: flex-start; overflow-y: auto; z-index: 6; }
#shop-top { display: flex; align-items: center; gap: 20px; }
#shop-dog { font-size: 70px; }
/* Big gold wallet so you can always see how much you can spend */
#shop-wallet {
  background: var(--gold);
  color: var(--night);
  border: 4px solid white;
  border-radius: 16px;
  padding: 6px 20px;
  box-shadow: 0 0 20px var(--gold);
  font-weight: 900;
}
.wallet-label { font-size: 14px; letter-spacing: 3px; }
.wallet-amount { font-size: 44px; display: flex; align-items: center; gap: 10px; justify-content: center; }
#shop-coins.bump { animation: pop 0.5s ease-out; display: inline-block; }
#shop-says { min-height: 26px; margin: 6px 0; font-size: 18px !important; }
#shop-items { width: 100%; max-width: 660px; }
.shop-section { font-size: 20px; text-align: left; margin: 10px 0 6px; color: var(--gold); }
.shop-row { display: grid; grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)); gap: 8px; }
.shop-card {
  background: var(--night);
  border: 2px solid #3a2a8a;
  border-radius: 12px;
  padding: 8px 4px;
}
.shop-emoji { font-size: 34px; }
.shop-name { font-size: 14px; font-weight: bold; margin: 2px 0 6px; }
.buy-button {
  font-family: inherit;
  font-weight: bold;
  font-size: 14px;
  padding: 4px 10px;
  border-radius: 20px;
  border: 2px solid var(--gold);
  background: var(--pink);
  color: white;
  cursor: pointer;
}
.buy-button .coin { width: 18px; height: 18px; font-size: 11px; }
.buy-button:disabled { background: #444; border-color: #666; color: #bbb; cursor: default; }
#shop-close { margin: 14px 0 8px; }
/* Piggy banks: the "Who's shopping?" list, and the lines on the final screen */
#piggy-screen { z-index: 6; }
#piggy-list { display: grid; gap: 8px; width: 100%; max-width: 360px; margin: 10px 0; }
.piggy-button {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-family: inherit;
  font-size: 20px;
  font-weight: bold;
  color: white;
  background: var(--night);
  border: 3px solid var(--pink);
  border-radius: 14px;
  padding: 10px 16px;
  cursor: pointer;
  letter-spacing: 2px;
}
.piggy-button:hover { background: #3a2a8a; }
#final-piggy { margin-bottom: 6px; }
.piggy-line { font-weight: bold; color: #ffb3d1; margin: 2px 0; }

/* Music and sound on/off buttons - always on top, top right corner */
#sound-buttons {
  position: absolute;
  top: 10px;
  right: 10px;
  z-index: 9;
  display: flex;
  gap: 6px;
}
#sound-buttons button {
  font-size: 20px;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 3px solid var(--gold);
  background: white;
  cursor: pointer;
  padding: 0;
}
#toggle-music.off { opacity: 0.4; text-decoration: line-through; }

/* Falling confetti */
.confetti {
  position: absolute;
  top: -40px;
  z-index: 8;
  font-size: 28px;
  pointer-events: none;
  animation: fall linear forwards;
}
@keyframes fall {
  to { transform: translateY(720px) rotate(540deg); opacity: 0.6; }
}

/* Setup: players and pups */
.name-row { display: flex; gap: 6px; align-items: center; }
.dice-button {
  font-size: 24px;
  width: 46px;
  height: 46px;
  border-radius: 10px;
  border: 3px solid var(--gold);
  background: var(--pink);
  cursor: pointer;
  padding: 0;
}
.dice-button:hover { transform: rotate(20deg); }
#count-buttons { display: flex; gap: 16px; margin-top: 20px; justify-content: center; }
.count-button { font-size: 40px; width: 90px; height: 90px; padding: 0; }
.setup-fields { display: flex; gap: 20px; flex-wrap: wrap; justify-content: center; margin-top: 12px; }
.setup-fields label { display: flex; flex-direction: column; gap: 6px; font-weight: bold; color: var(--gold); }
.setup-fields input {
  width: 220px;
  font-family: "Courier New", monospace;
  font-size: 26px;
  font-weight: bold;
  text-align: center;
  background: black;
  color: white;
  border: 3px solid var(--gold);
  border-radius: 8px;
  padding: 6px;
}
#player-name { text-transform: uppercase; letter-spacing: 4px; }
#breed-buttons { display: flex; gap: 10px; flex-wrap: wrap; justify-content: center; }
.breed-button {
  font-family: inherit;
  font-weight: bold;
  font-size: 14px;
  color: white;
  background: var(--night);
  border: 3px solid #3a2a8a;
  border-radius: 14px;
  padding: 8px;
  cursor: pointer;
  width: 104px;
}
.breed-button .dog-svg { width: 70px; height: 70px; margin: 0 auto 4px; }
.breed-button.chosen { border-color: var(--gold); background: #3a2a8a; box-shadow: 0 0 14px var(--gold); }

/* Whose turn */
#turn-dog { font-size: 130px; animation: jump 0.6s ease-in-out infinite; }

/* Row of players at the bottom */
#players-strip { display: flex; gap: 8px; justify-content: center; flex-wrap: wrap; margin-top: 10px; }
#players-strip:empty { display: none; }
.player-card {
  background: white;
  border: 3px solid var(--night);
  border-radius: 12px;
  padding: 4px 10px;
  min-width: 110px;
  font-weight: bold;
  color: var(--night);
}
.player-card.now { border-color: var(--pink); box-shadow: 0 0 12px var(--pink); }
.player-card.done { opacity: 0.55; }
.pup.mini { font-size: 40px; }
.player-name { font-size: 16px; letter-spacing: 2px; }
.player-info { font-size: 14px; }
.player-info .coin { width: 18px; height: 18px; font-size: 11px; }
.teases { display: flex; gap: 4px; justify-content: center; margin-top: 2px; }
.tease-button {
  font-size: 18px;
  background: var(--gold);
  border: 2px solid var(--night);
  border-radius: 50%;
  width: 32px;
  height: 32px;
  cursor: pointer;
  padding: 0;
}

/* Final results */
#final-list { list-style: none; padding: 0; margin: 10px 0; width: 100%; max-width: 480px; }
#final-list li {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 6px 12px;
  margin-bottom: 6px;
  background: #3a2a8a;
  border-radius: 12px;
  font-size: 20px;
  font-weight: bold;
}
#final-list li.winner { background: var(--pink); box-shadow: 0 0 16px var(--gold); }
.final-who { flex: 1; text-align: left; }

/* Top Score Board */
#scores-list {
  list-style: none;
  padding: 0;
  margin: 12px 0;
  width: 100%;
  max-width: 420px;
  font-family: "Courier New", monospace;
  font-size: 24px;
  font-weight: bold;
}
#scores-list li {
  display: flex;
  justify-content: space-between;
  padding: 4px 12px;
  border-bottom: 2px dashed #3a2a8a;
}
#scores-list li.new { background: var(--pink); border-radius: 8px; animation: pop 0.6s ease-out; }
#scores-list .empty { justify-content: center; color: #aaa; border: none; }
.score-coins { color: var(--gold); }

/* Theme picker */
.overlay-title.small { font-size: 44px; }
#theme-buttons {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 12px;
  width: 100%;
  max-width: 620px;
}
.theme-button {
  font-family: inherit;
  font-size: 20px;
  font-weight: bold;
  padding: 14px 10px;
  background: var(--night);
  color: white;
  border: 3px solid var(--gold);
  border-radius: 16px;
  cursor: pointer;
  box-shadow: 4px 4px 0 var(--pink);
}
.theme-button .theme-emoji { display: block; font-size: 40px; }
.theme-button:hover:not(:disabled) { background: #3a2a8a; transform: translate(-2px, -2px) rotate(-1deg); }
.theme-button:disabled { opacity: 0.45; cursor: default; box-shadow: none; border-color: var(--green); }
.theme-button.surprise { grid-column: 1 / -1; border-color: var(--pink); box-shadow: 4px 4px 0 var(--gold); }

/* Level picker: one big button per level, colored like the level names */
#level-buttons { display: grid; gap: 12px; width: 100%; max-width: 420px; }
.theme-button .level-coins { display: block; font-size: 14px; color: var(--gold); margin-top: 2px; }
.theme-button.level-easy { border-color: var(--green); }
.theme-button.level-medium { border-color: var(--gold); }
.theme-button.level-hard { border-color: var(--red); }

/* Background picker: the 🎨 button in the corner of the home screen, and the picker screen */
#home-background {
  position: absolute;
  top: 10px;
  left: 10px;
  width: 44px;
  height: 44px;
  font-size: 22px;
  border-radius: 50%;
  border: 3px solid var(--gold);
  background: var(--pink);
  cursor: pointer;
  padding: 0;
}
#background-screen { justify-content: flex-start; z-index: 6; }
#home-stickers {
  position: absolute;
  top: 60px;
  left: 10px;
  width: 44px;
  height: 44px;
  font-size: 22px;
  border-radius: 50%;
  border: 3px solid var(--gold);
  background: var(--green);
  cursor: pointer;
  padding: 0;
}

/* Sticker book: whose book, then a grid of stickers (grey ones aren't won yet) */
#sticker-screen { justify-content: flex-start; z-index: 6; }
#sticker-names { display: grid; gap: 8px; width: 100%; max-width: 360px; }
#sticker-names:empty { display: none; }
/* Swipe a name left to show the red delete strip underneath */
.swipe-row { position: relative; border-radius: 14px; overflow: hidden; }
.swipe-row .piggy-button { position: relative; width: 100%; touch-action: pan-y; transition: transform 0.2s; }
.swipe-row .piggy-button.dragging { transition: none; } /* follow your finger while swiping */
.swipe-row .piggy-button.swiped-far { border-color: var(--red); }
.swipe-trash {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  padding-right: 16px;
  background: var(--red);
  color: white;
  font-weight: bold;
  border-radius: 14px;
}
#sticker-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
  gap: 8px;
  width: 100%;
  max-width: 620px;
}
#sticker-grid:empty { display: none; }
.sticker-card {
  background: var(--night);
  border: 3px dashed #3a2a8a;
  border-radius: 14px;
  padding: 8px 4px;
  opacity: 0.6;
}
.sticker-card.got { border: 3px solid var(--gold); background: #3a2a8a; opacity: 1; box-shadow: 0 0 10px var(--gold); }
.sticker-emoji { font-size: 36px; }
.sticker-name { font-weight: bold; font-size: 14px; color: var(--gold); margin: 2px 0; }
.sticker-how { font-size: 11px; color: #ddd; }
#sticker-back { margin: 14px 0 8px; }

/* NEW STICKER! popup */
.sticker-pop {
  position: absolute;
  top: 30%;
  left: 50%;
  z-index: 10;
  width: 220px;
  margin-left: -110px;
  padding: 12px;
  background: radial-gradient(circle, #fff6c2, var(--gold));
  border: 4px solid var(--pink);
  border-radius: 20px;
  box-shadow: 0 0 30px var(--gold), 6px 6px 0 var(--night);
  text-align: center;
  color: var(--night);
  pointer-events: none;
  animation: sticker-pop 2.6s ease-out forwards;
}
.sticker-pop-title { font-size: 20px; font-weight: 900; letter-spacing: 3px; color: var(--pink); }
.sticker-pop-emoji { font-size: 64px; line-height: 1.1; }
.sticker-pop-name { font-size: 18px; font-weight: bold; }
@keyframes sticker-pop {
  0% { transform: scale(0.2) rotate(-20deg); opacity: 0; }
  12% { transform: scale(1.15) rotate(6deg); opacity: 1; }
  20% { transform: scale(1) rotate(0); }
  85% { transform: scale(1); opacity: 1; }
  100% { transform: scale(0.8) translateY(-30px); opacity: 0; }
}
.bg-section { font-size: 20px; color: var(--gold); margin: 10px 0 6px; width: 100%; max-width: 620px; text-align: left; }
.bg-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
  gap: 8px;
  width: 100%;
  max-width: 620px;
}
.bg-button {
  font-family: inherit;
  font-size: 13px;
  font-weight: bold;
  color: white;
  background: var(--night);
  border: 3px solid #3a2a8a;
  border-radius: 12px;
  padding: 5px;
  cursor: pointer;
}
.bg-button.chosen { border-color: var(--gold); box-shadow: 0 0 12px var(--gold); }
.bg-preview { display: block; height: 52px; border-radius: 8px; margin-bottom: 4px; }
#background-done { margin: 14px 0 8px; }

/* Dark backgrounds: words on the stage turn white so you can still read them */
#stage.dark-bg #pot, #stage.dark-bg #progress, #stage.dark-bg #dog-name {
  color: white;
  text-shadow: 0 2px 0 var(--night);
}

/* Home screen: Question of the Day and My Questions buttons */
#home-extras { display: flex; gap: 8px; justify-content: center; flex-wrap: wrap; margin-top: 10px; }
.pill-button {
  font-family: inherit;
  font-size: 14px;
  font-weight: bold;
  color: white;
  background: #3a2a8a;
  border: 2px solid var(--gold);
  border-radius: 20px;
  padding: 6px 12px;
  cursor: pointer;
}
.pill-button:hover { background: var(--pink); }

/* Question of the Day */
#daily-screen, #myq-screen { z-index: 6; }
#daily-screen { justify-content: flex-start; }
#daily-who { display: flex; flex-direction: column; align-items: center; gap: 8px; }
.daily-label { font-weight: bold; color: var(--gold); }
#daily-name, .myq-input {
  font-family: inherit;
  font-size: 18px; /* 16px or more so phones don't zoom in */
  font-weight: bold;
  text-align: center;
  background: black;
  color: white;
  border: 3px solid var(--gold);
  border-radius: 8px;
  padding: 6px;
}
#daily-name { width: 200px; text-transform: uppercase; letter-spacing: 3px; }
#daily-play { width: 100%; max-width: 560px; }
#daily-box { background: var(--night); border: 4px solid var(--gold); border-radius: 12px; padding: 10px; margin-bottom: 10px; }
#daily-theme { color: var(--gold); font-size: 13px; letter-spacing: 2px; text-transform: uppercase; }
#daily-question { font-size: 20px; font-weight: bold; margin-top: 4px; }
#daily-answers { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 8px; }
#daily-message { min-height: 1.4em; color: var(--gold); }

/* My Questions */
#myq-screen { justify-content: flex-start; }
.myq-help { font-size: 15px !important; margin: 4px 0 8px; }
#myq-question { width: 100%; max-width: 520px; box-sizing: border-box; }
.myq-answers { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; width: 100%; max-width: 520px; margin-top: 6px; }
.myq-answers .myq-input { width: 100%; box-sizing: border-box; font-size: 16px; }
.myq-right-row { display: flex; align-items: center; gap: 6px; margin-top: 8px; font-weight: bold; }
.myq-right {
  font-family: inherit;
  font-weight: 900;
  font-size: 16px;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: 2px solid var(--gold);
  background: var(--night);
  color: var(--gold);
  cursor: pointer;
}
.myq-right.chosen { background: var(--green); color: var(--night); }
#myq-message { min-height: 1.4em; color: var(--gold); margin: 6px 0; font-size: 16px !important; }
#myq-count { margin: 4px 0; font-size: 15px !important; }
#myq-list { display: grid; gap: 6px; width: 100%; max-width: 520px; }
.myq-row { display: flex; align-items: center; gap: 8px; background: var(--night); border-radius: 10px; padding: 6px 10px; text-align: left; }
.myq-text { flex: 1; font-size: 14px; overflow-wrap: anywhere; }
.myq-delete { background: var(--red); color: white; border: none; border-radius: 50%; width: 28px; height: 28px; cursor: pointer; font-weight: bold; }
#myq-back, #daily-back { margin: 12px 0 8px; }

/* Beat the Clock: a bar that shrinks as time runs out, and turns red at the end */
#clock {
  position: relative;
  height: 22px;
  margin: 0 0 6px;
  background: var(--night);
  border: 2px solid var(--gold);
  border-radius: 12px;
  overflow: hidden;
}
#clock-fill { height: 100%; width: 100%; background: linear-gradient(90deg, var(--green), var(--gold)); }
#clock.hurry #clock-fill { background: var(--red); }
#clock.hurry { animation: growl-shake 0.12s linear infinite; }
#clock-num {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 900;
  font-size: 14px;
  color: white;
  text-shadow: 0 1px 2px var(--night);
}
#clock-toggle { font-size: 15px; margin-top: 12px; }
#clock-toggle.off { opacity: 0.6; }

/* Pup Care: hearts next to the pup's name, and pet / play / feed buttons on the end screen */
#dog-name, #pup-happy { display: inline-block; }
#pup-happy { font-size: 13px; letter-spacing: 1px; }
#pup-care { background: #ffffff18; border: 2px solid #ffffff33; border-radius: 16px; padding: 6px 12px; margin-top: 6px; }
.care-row { display: flex; align-items: center; justify-content: center; gap: 10px; }
#care-pup { font-size: 44px; }
#care-hearts { font-size: 20px; letter-spacing: 2px; }
#care-buttons { display: flex; gap: 8px; justify-content: center; margin-top: 4px; }
.care-button {
  font-family: inherit;
  font-size: 15px;
  font-weight: bold;
  padding: 6px 12px;
  border-radius: 20px;
  border: 2px solid var(--gold);
  background: var(--night);
  color: white;
  cursor: pointer;
}
.care-button:disabled { opacity: 0.4; cursor: default; }

/* Spin the Prize Wheel */
#wheel-screen { z-index: 6; }
.big-button.wheel-button { background: var(--gold); color: var(--night); animation: throb 1.33s ease-in-out infinite; }
#wheel-box { position: relative; width: 280px; height: 280px; margin: 6px 0; }
#wheel { width: 100%; height: 100%; transition: transform 4s cubic-bezier(0.15, 0.7, 0.15, 1); }
#wheel svg { width: 100%; height: 100%; display: block; }
#wheel-arrow {
  position: absolute;
  top: -14px;
  left: 50%;
  margin-left: -16px;
  width: 32px;
  z-index: 1;
  font-size: 32px;
  line-height: 1;
  color: var(--gold);
  text-shadow: 0 2px 0 var(--night), 0 0 8px var(--pink);
}
#wheel-result { min-height: 2.6em; }

.hidden { display: none !important; }

/* ============================================
   PHONES (like an iPhone) - squish everything so the whole
   game fits on the screen without scrolling or cut-off sides.
   ============================================ */
@media (max-width: 520px) {
  body { align-items: flex-start; min-height: 100dvh; }
  #stage {
    min-height: 100dvh;
    padding: 6px 10px;
    border-width: 5px;
    border-radius: 10px;
  }
  #title { text-align: left; padding-left: 6px; font-size: 28px; letter-spacing: 3px; margin: 2px 0 6px; text-shadow: 2px 2px 0 var(--night), 4px 4px 0 var(--gold); }
  #sound-buttons { top: 6px; right: 6px; gap: 4px; }
  #sound-buttons button { width: 32px; height: 32px; font-size: 16px; border-width: 2px; }

  #hud { font-size: 16px; padding: 4px 12px; margin-bottom: 4px; }
  #lives { font-size: 18px; }
  .coin { width: 22px; height: 22px; font-size: 13px; }

  #host { gap: 8px; margin-bottom: 4px; }
  .host-svg { width: 70px; height: 84px; }
  #host-says { max-width: calc(100% - 80px); font-size: 14px; padding: 6px 10px; }

  #progress { font-size: 18px; letter-spacing: 4px; margin: 0; }
  #pot { min-height: 20px; margin-bottom: 4px; font-size: 14px; }

  #question-box { padding: 8px 10px; margin-bottom: 8px; border-width: 3px; }
  #theme { font-size: 12px; }
  #question { font-size: 18px; }
  #logo-card { padding: 8px; margin-top: 4px; }
  #logo svg { width: 58px; height: 58px; }

  #answers { gap: 6px; }
  .answer { font-size: 15px; padding: 10px 18px; }
  .answer .letter { margin-right: 4px; }

  #floor { margin: 8px -10px 0; padding-top: 10px; position: relative; }
  /* The pop-up emoji floats next to the pup instead of taking up its own row */
  #effect { font-size: 30px; min-height: 0; position: absolute; top: 8px; left: calc(50% - 110px); }
  #dog { font-size: 56px; }
  #toys { font-size: 28px; }
  .big-button { font-size: 17px; padding: 10px 18px; margin-top: 6px; }
  .end-buttons { gap: 8px; margin-top: 4px; }

  #players-strip { gap: 4px; margin-top: 6px; }
  .player-card { min-width: 0; flex: 1 1 0; padding: 2px 4px; border-width: 2px; }
  .pup.mini { font-size: 22px; margin: 0 auto; }
  .player-name { font-size: 13px; letter-spacing: 1px; }
  .player-info { font-size: 12px; }

  /* Start, setup, turn, shop and end screens */
  .overlay { padding: 16px 12px; }
  .overlay-title { font-size: 38px; letter-spacing: 3px; text-shadow: 3px 3px 0 var(--gold); }
  .overlay-title.small { font-size: 28px; padding: 0 80px; } /* room for the corner buttons */
  .overlay-dog { font-size: 80px; }
  .overlay p { font-size: 18px; }
  .circle-button { width: 110px; height: 110px; font-size: 20px; }
  .circle-button.cart, .circle-button.trophy { width: 64px; height: 64px; font-size: 32px; }
  #home-bottom { gap: 12px; }
  #count-buttons { gap: 10px; }
  .count-button { font-size: 30px; width: 64px; height: 64px; }
  .setup-fields { gap: 10px; }
  .setup-fields input { width: 190px; font-size: 22px; }
  #breed-buttons { gap: 6px; }
  .breed-button { width: 96px; padding: 6px; font-size: 13px; }
  .breed-button .dog-svg { width: 52px; height: 52px; }
  #turn-dog { font-size: 100px; }
  #theme-buttons { grid-template-columns: 1fr 1fr; gap: 8px; }
  .theme-button { font-size: 16px; padding: 10px 6px; }
  .theme-button .theme-emoji { font-size: 30px; }
  #shop-top { gap: 10px; }
  #shop-dog { font-size: 50px; }
  .wallet-amount { font-size: 32px; }
  .shop-row { grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: 6px; }
}