:root {
  --ink: #1b1b1b;
  --paper: #fff8e7;
  --blue: #3a6ea5;
  --yellow: #ffd23f;
  --red: #ef5350;
  --green: #4caf7d;
  --purple: #9b7fd4;
}

* { box-sizing: border-box; }

html, body {
  margin: 0; padding: 0; width: 100%; height: 100%;
  overflow: hidden;
  background: #222;
  font-family: "Chalkboard SE", "Marker Felt", "Comic Sans MS", "Comic Neue", cursive, sans-serif;
  -webkit-user-select: none; user-select: none;
  -webkit-touch-callout: none;
  overscroll-behavior: none;
}

body {
  height: 100vh; height: 100dvh;
  position: relative;
}

#world {
  position: absolute; inset: 0; width: 100%; height: 100%;
  touch-action: none;
  display: block;
  background: #cfe8d8;
}

#hud {
  position: absolute; top: 0; left: 0; right: 0;
  display: flex; align-items: center; justify-content: space-between;
  padding: calc(env(safe-area-inset-top, 0) + 10px) calc(env(safe-area-inset-right, 0) + 10px) 0 calc(env(safe-area-inset-left, 0) + 10px);
  z-index: 20;
  pointer-events: none;
}
#hud > * { pointer-events: auto; }

.icon-btn {
  width: 64px; height: 64px;
  font-size: 28px;
  background: var(--paper);
  border: 4px solid var(--ink);
  border-radius: 16px;
  box-shadow: 3px 3px 0 var(--ink);
  transform: rotate(-1deg);
  cursor: pointer;
}
#btn-settings { width: 44px; height: 44px; font-size: 20px; }
.icon-btn:active { transform: translate(2px,2px) rotate(-1deg); box-shadow: 1px 1px 0 var(--ink); }

#progress-bar {
  position: absolute;
  left: 50%; top: calc(env(safe-area-inset-top, 0) + 8px);
  max-width: calc(100vw - 300px);
  min-width: 250px;
  background: var(--paper);
  border: 4px solid var(--ink);
  border-radius: 18px;
  padding: 6px 10px 4px;
  box-shadow: 3px 3px 0 var(--ink);
  transform: translateX(-50%) rotate(1deg);
  text-align: center;
  font-weight: bold;
  cursor: pointer;
}
#progress-bar.goal-flash { animation: goal-flash 1.1s ease; }
@keyframes goal-flash {
  0% { transform: translateX(-50%) rotate(1deg) scale(1); background: var(--paper); }
  25% { transform: translateX(-50%) rotate(-2deg) scale(1.12); background: var(--yellow); }
  60% { transform: translateX(-50%) rotate(2deg) scale(1.04); background: var(--yellow); }
  100% { transform: translateX(-50%) rotate(1deg) scale(1); background: var(--paper); }
}
#goal-row { display: flex; align-items: center; gap: 8px; }
#goal-portrait { width: 40px; height: 40px; flex-shrink: 0; }
#goal-words { flex: 1; min-width: 0; text-align: left; }
#goal-text { font-size: 21px; line-height: 1.15; color: var(--blue); }
#goal-sub { font-size: 15px; color: #444; }
#goal-speak { flex-shrink: 0; width: 40px; height: 40px; font-size: 18px; background: var(--yellow); border: 3px solid var(--ink); border-radius: 50%; cursor: pointer; }
#star-row { display: flex; align-items: center; justify-content: center; gap: 8px; margin-top: 2px; }
#star-slots { display: flex; gap: 4px; font-size: 18px; }
#star-slots .slot { opacity: 0.3; transition: transform .2s; }
#star-slots .slot.filled { opacity: 1; }
#star-slots .slot.pop { animation: pop 0.4s ease; }
@keyframes pop { 0% { transform: scale(1); } 50% { transform: scale(1.6); } 100% { transform: scale(1); } }
#star-count { font-size: 15px; }
#hud-right { display: flex; gap: 10px; }

#btn-volume {
  position: absolute;
  top: calc(env(safe-area-inset-top, 0) + 10px);
  right: calc(env(safe-area-inset-right, 0) + 84px);
  z-index: 55;
}
body:not(.playing) #btn-volume { right: calc(env(safe-area-inset-right, 0) + 14px); }
#btn-volume.muted { background: #ddd; }

#btn-map.glow { animation: glow 1s ease-in-out infinite; background: var(--yellow); }
@keyframes glow {
  0%, 100% { box-shadow: 3px 3px 0 var(--ink), 0 0 0 0 rgba(255,210,63,0.9); }
  50% { box-shadow: 3px 3px 0 var(--ink), 0 0 0 12px rgba(255,210,63,0.0); transform: scale(1.1) rotate(-3deg); }
}
#map-arrow {
  position: absolute; z-index: 21;
  top: calc(env(safe-area-inset-top, 0) + 80px);
  right: calc(env(safe-area-inset-right, 0) + 20px);
  font-size: 42px;
  pointer-events: none;
  animation: bob-up 0.7s ease-in-out infinite;
}
@keyframes bob-up { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-12px); } }

#talk-btn {
  position: absolute; z-index: 26;
  right: calc(env(safe-area-inset-right, 0) + 24px);
  bottom: calc(env(safe-area-inset-bottom, 0) + 24px);
  min-width: 180px; min-height: 112px;
  padding: 10px 22px;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  font-family: inherit; font-weight: bold;
  background: var(--yellow);
  border: 5px solid var(--ink);
  border-radius: 28px;
  box-shadow: 5px 5px 0 var(--ink);
  cursor: pointer;
  animation: talk-bounce 0.9s ease-in-out infinite;
  touch-action: manipulation;
}
#talk-btn .talk-main { font-size: 36px; line-height: 1.1; }
#talk-btn .talk-name { font-size: 17px; color: #333; }
#talk-btn:active { transform: translate(3px,3px); box-shadow: 2px 2px 0 var(--ink); }
@keyframes talk-bounce {
  0%,100% { transform: translateY(0) rotate(-2deg) scale(1); }
  50% { transform: translateY(-10px) rotate(2deg) scale(1.06); }
}

#joystick {
  position: absolute;
  left: calc(env(safe-area-inset-left, 0) + 20px);
  bottom: calc(env(safe-area-inset-bottom, 0) + 20px);
  width: 140px; height: 140px;
  z-index: 15;
  touch-action: none;
}
#joy-base {
  position: relative;
  width: 140px; height: 140px;
  border-radius: 50%;
  background: rgba(255,248,231,0.6);
  border: 4px solid var(--ink);
  touch-action: none;
}
#joy-knob {
  position: absolute;
  width: 56px; height: 56px;
  left: 42px; top: 42px;
  border-radius: 50%;
  background: var(--blue);
  border: 4px solid var(--ink);
  touch-action: none;
}
#joystick.hidden { display: none; }

#overlay {
  position: absolute; inset: 0; z-index: 30;
  pointer-events: none;
}
#overlay > * { pointer-events: auto; }

.screen {
  position: absolute; inset: 0; z-index: 50;
  background: linear-gradient(160deg, #ffe9a8, #a8d8ff);
  display: flex; align-items: center; justify-content: center;
}
.screen.hidden { display: none; }

.title-card {
  background: var(--paper);
  border: 5px solid var(--ink);
  border-radius: 24px;
  padding: calc(env(safe-area-inset-top,0) + 20px) 30px calc(env(safe-area-inset-bottom,0) + 20px);
  box-shadow: 6px 6px 0 var(--ink);
  text-align: center;
  transform: rotate(-1deg);
  max-width: 90vw;
  max-height: 90vh;
  overflow: auto;
}
#title-doodle { font-size: 38px; margin: 0 0 10px; color: var(--blue); text-shadow: 2px 2px 0 var(--ink); }
.title-card h2 { font-size: 26px; color: var(--green); margin: 6px 0; }
#end-card .big-btn { margin: 6px auto; padding: 10px 24px; min-height: 52px; font-size: 19px; }
#end-card p { margin: 8px 0; }
#end-stars { font-size: 18px; font-weight: bold; }

.big-btn {
  display: block; width: 100%; min-height: 64px;
  margin: 10px auto; padding: 14px 24px;
  font-size: 22px; font-weight: bold;
  font-family: inherit;
  background: var(--yellow);
  border: 4px solid var(--ink);
  border-radius: 16px;
  box-shadow: 3px 3px 0 var(--ink);
  cursor: pointer;
}
.big-btn:active { transform: translate(2px,2px); box-shadow: 1px 1px 0 var(--ink); }
.big-btn.secondary { background: var(--blue); color: white; }
.big-btn.danger { background: var(--red); color: white; }
.hidden { display: none !important; }

.panel {
  position: absolute; inset: 0; z-index: 60;
  background: rgba(0,0,0,0.45);
  display: flex; align-items: center; justify-content: center;
}
.panel-card {
  background: var(--paper);
  border: 5px solid var(--ink);
  border-radius: 24px;
  padding: calc(env(safe-area-inset-top,0) + 20px) 24px calc(env(safe-area-inset-bottom,0) + 20px);
  box-shadow: 6px 6px 0 var(--ink);
  max-width: 90vw; max-height: 85vh; overflow: auto;
  position: relative;
  text-align: center;
}
.close-btn {
  position: absolute; top: 10px; right: 10px;
  width: 44px; height: 44px; font-size: 18px;
  background: var(--red); color: white;
  border: 3px solid var(--ink); border-radius: 12px;
  cursor: pointer;
}

#map-buttons { display: flex; flex-direction: column; gap: 12px; margin: 16px 0; }
.map-btn {
  min-height: 80px; font-size: 22px; font-weight: bold;
  background: var(--green); color: white;
  border: 4px solid var(--ink); border-radius: 16px;
  box-shadow: 3px 3px 0 var(--ink);
  display: flex; align-items: center; justify-content: center; gap: 10px;
  position: relative;
  cursor: pointer;
}
.map-btn .check { position: absolute; top: -10px; right: -10px; font-size: 24px; }
.map-btn .bang { position: absolute; top: -10px; left: -10px; font-size: 22px; color: var(--yellow); }
.map-btn.goal { background: var(--blue); animation: glow 1s ease-in-out infinite; }
.map-btn .next-tag {
  position: absolute; bottom: -12px; right: 12px;
  font-size: 15px; background: var(--yellow); color: var(--ink);
  border: 3px solid var(--ink); border-radius: 10px; padding: 0 8px;
}

#settings-list { text-align: left; }
.setting-row {
  display: flex; align-items: center; justify-content: space-between;
  gap: 10px; margin: 10px 0; font-size: 16px;
}
.setting-row select, .setting-row button.toggle {
  font-size: 16px; min-height: 44px; border: 3px solid var(--ink); border-radius: 10px;
  background: white; font-family: inherit;
}
button.toggle.on { background: var(--green); color: white; }
button.toggle.off { background: #ddd; }

.hold-hint { font-size: 13px; color: #555; margin-top: 4px; }

/* Speech bubble */
.bubble {
  position: absolute;
  left: -9999px; top: 0;
  background: white;
  border: 4px solid var(--ink);
  border-radius: 24px;
  padding: 10px 16px 14px;
  width: max-content;
  min-width: 240px;
  max-width: min(400px, 92vw);
  font-size: 22px;
  font-weight: bold;
  box-shadow: 4px 4px 0 var(--ink);
  display: flex; flex-direction: column; gap: 6px;
  z-index: 40;
  --tail-x: 50%;
  animation: bubble-in 0.28s cubic-bezier(.3,1.6,.6,1);
}
@keyframes bubble-in { from { transform: scale(0.4); opacity: 0; } to { transform: scale(1); opacity: 1; } }
.bubble-head { display: flex; align-items: center; gap: 8px; }
.bubble-portrait { width: 48px; height: 48px; flex-shrink: 0; }
.bubble-name { font-size: 16px; color: var(--blue); }
.bubble-spacer { flex: 1; }
.bubble .speak-btn {
  flex-shrink: 0; width: 44px; height: 44px; font-size: 20px;
  background: var(--yellow); border: 3px solid var(--ink); border-radius: 50%;
  cursor: pointer;
}
.bubble .bubble-text { line-height: 1.25; }
.bubble .bubble-close {
  flex-shrink: 0; width: 44px; height: 44px; font-size: 16px;
  background: var(--red); color: white; border: 3px solid var(--ink); border-radius: 50%;
  cursor: pointer;
}
.bubble-tail {
  position: absolute;
  left: var(--tail-x); bottom: -14px;
  width: 24px; height: 24px;
  background: white;
  border-right: 4px solid var(--ink); border-bottom: 4px solid var(--ink);
  transform: translateX(-50%) rotate(45deg);
  pointer-events: none;
}
.bubble.tail-up .bubble-tail {
  bottom: auto; top: -14px;
  border-right: none; border-bottom: none;
  border-left: 4px solid var(--ink); border-top: 4px solid var(--ink);
}
.bubble.kind-ambient {
  min-width: 0; padding: 6px 14px; font-size: 20px; color: var(--purple);
  border-radius: 18px;
}
.bubble.kind-ambient .bubble-tail { width: 16px; height: 16px; bottom: -10px; }
.bubble.kind-hint { background: #fffbe6; }
.bubble.kind-hint .bubble-tail { background: #fffbe6; }
.bubble-choices { display: flex; flex-direction: column; gap: 8px; margin-top: 6px; }
.bubble-choice {
  min-height: 56px; font-size: 18px; font-weight: bold; font-family: inherit;
  background: var(--paper); border: 3px solid var(--ink); border-radius: 14px;
  box-shadow: 3px 3px 0 var(--ink);
  cursor: pointer; padding: 6px 12px;
}
.bubble-choice.primary {
  min-height: 66px; font-size: 24px;
  background: var(--yellow);
  animation: talk-bounce 1s ease-in-out infinite;
}
.bubble-choice.wrong-fade { opacity: 0.3; pointer-events: none; }
.bubble-choice.wiggle { animation: wiggle 0.4s; }
@keyframes wiggle { 0%,100%{transform:rotate(0);} 25%{transform:rotate(-4deg);} 75%{transform:rotate(4deg);} }

/* Challenge panel */
#challenge-panel {
  position: absolute; inset: 0;
  background: rgba(20,20,20,0.55);
  display: flex; align-items: center; justify-content: center;
  z-index: 45;
}
.challenge-card {
  background: var(--paper);
  border: 5px solid var(--ink);
  border-radius: 24px;
  padding: 16px 20px calc(env(safe-area-inset-bottom,0) + 16px);
  box-shadow: 6px 6px 0 var(--ink);
  max-width: 92vw; max-height: 90vh; overflow: auto;
  width: 520px;
  text-align: center;
  position: relative;
}
.challenge-header { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; }
.challenge-header canvas { flex-shrink: 0; }
.challenge-close {
  position: absolute; top: 8px; right: 8px;
  min-width: 64px; min-height: 44px; font-size: 14px; font-weight: bold;
  background: var(--red); color: white;
  border: 3px solid var(--ink); border-radius: 12px;
  cursor: pointer;
}
.round-area { margin: 14px 0; min-height: 120px; }
.answer-row { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; }
.answer-btn {
  min-width: 90px; min-height: 90px; font-size: 22px; font-weight: bold;
  background: white; border: 4px solid var(--ink); border-radius: 16px;
  box-shadow: 3px 3px 0 var(--ink);
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  padding: 8px;
}
.answer-btn:active { transform: translate(2px,2px); box-shadow: 1px 1px 0 var(--ink); }
.answer-btn.correct-flash { background: var(--green); color: white; }
.answer-btn.wrong-flash { animation: wiggle 0.4s; }
.answer-btn.greyed { opacity: 0.25; pointer-events: none; }
.feedback-line { font-size: 18px; font-weight: bold; min-height: 26px; margin: 6px 0; }
.feedback-line.try-again { color: var(--red); }
.feedback-line.cheer { color: var(--green); }
.sign-board {
  background: #d9c08a; border: 4px solid var(--ink); border-radius: 10px;
  padding: 14px; font-size: 26px; font-weight: bold; letter-spacing: 2px;
  margin-bottom: 12px;
}
.donut-row { display: flex; flex-wrap: wrap; gap: 6px; justify-content: center; font-size: 34px; }
.donut-row .d { cursor: pointer; position: relative; }
.donut-row .d .num-label { position: absolute; top: -10px; right: -6px; font-size: 12px; background: var(--yellow); border-radius: 50%; padding: 1px 4px; border: 2px solid var(--ink); }
.sentence-line { font-size: 24px; font-weight: bold; margin: 10px 0; }
.picture-card { font-size: 40px; display: flex; flex-direction: column; align-items: center; justify-content: center; position: relative; min-height: 100px; }
.picture-card .pc-top { position: absolute; top: 4px; font-size: 24px; }
.picture-card .pc-bottom { font-size: 40px; }

/* Title music hint */
#music-hint { margin: 4px 0 0; font-size: 17px; color: var(--purple); animation: bob-up 1.2s ease-in-out infinite; }
body.audio-on #music-hint { visibility: hidden; }

/* Comic intro */
#intro-screen {
  z-index: 52;
  flex-direction: column; gap: 14px;
  background: radial-gradient(circle, rgba(0,0,0,0.08) 2px, transparent 2.5px) 0 0 / 18px 18px, linear-gradient(160deg, #ffe9a8, #a8d8ff);
  padding: env(safe-area-inset-top, 0) 0 env(safe-area-inset-bottom, 0);
}
#intro-frame {
  width: min(92vw, 760px, calc((100vh - 230px) * 16 / 9));
  width: min(92vw, 760px, calc((100dvh - 230px) * 16 / 9));
  background: white;
  border: 6px solid var(--ink);
  border-radius: 10px;
  box-shadow: 8px 8px 0 var(--ink);
  transform: rotate(var(--tilt, -1deg));
  overflow: hidden;
}
#intro-frame.pop-in { animation: panel-in 0.45s cubic-bezier(.3,1.5,.6,1); }
@keyframes panel-in { from { transform: rotate(var(--tilt, -1deg)) scale(0.6) translateX(60px); opacity: 0; } to { transform: rotate(var(--tilt, -1deg)) scale(1); opacity: 1; } }
#intro-canvas { display: block; width: 100%; aspect-ratio: 16 / 9; border-bottom: 5px solid var(--ink); cursor: pointer; }
#intro-caption {
  display: flex; align-items: center; justify-content: center; gap: 12px;
  background: var(--yellow);
  padding: 10px 16px;
  font-size: clamp(22px, 3.4vw, 32px); font-weight: bold; text-align: center;
}
#intro-caption .speak-btn { flex-shrink: 0; width: 48px; height: 48px; font-size: 22px; background: white; border: 3px solid var(--ink); border-radius: 50%; cursor: pointer; }
#intro-controls { display: flex; align-items: center; gap: 18px; }
#intro-controls .big-btn { width: auto; min-width: 200px; margin: 0; font-size: 26px; background: var(--green); color: white; animation: talk-bounce 1.2s ease-in-out infinite; }
#intro-dots { display: flex; gap: 8px; }
#intro-dots .dot { width: 16px; height: 16px; border-radius: 50%; border: 3px solid var(--ink); background: white; }
#intro-dots .dot.on { background: var(--yellow); transform: scale(1.25); }
.skip-btn {
  position: absolute;
  top: calc(env(safe-area-inset-top, 0) + 14px); left: calc(env(safe-area-inset-left, 0) + 14px);
  min-height: 52px; padding: 6px 18px;
  font-family: inherit; font-size: 20px; font-weight: bold;
  background: var(--paper); border: 4px solid var(--ink); border-radius: 14px;
  box-shadow: 3px 3px 0 var(--ink); cursor: pointer;
}

/* First-time tutorial coach marks */
/* bottom-center, between the joystick and the Talk button, and *under* the bubble
   layer (#overlay z 30) so a tip can never cover a speech bubble's buttons */
#coach {
  position: absolute; left: 190px; right: 230px;
  bottom: calc(env(safe-area-inset-bottom, 0) + 28px);
  display: flex; justify-content: center;
  z-index: 28; pointer-events: none;
}
#coach-card {
  pointer-events: auto;
  display: flex; align-items: center; gap: 10px;
  max-width: 520px;
  background: var(--green); color: white;
  border: 4px solid var(--ink); border-radius: 20px;
  box-shadow: 4px 4px 0 var(--ink);
  padding: 10px 12px 10px 18px;
  font-size: 22px; font-weight: bold;
  transform: rotate(-1deg);
  animation: bubble-in 0.3s cubic-bezier(.3,1.6,.6,1);
}
#coach-card .speak-btn { flex-shrink: 0; width: 44px; height: 44px; font-size: 20px; background: var(--yellow); border: 3px solid var(--ink); border-radius: 50%; cursor: pointer; }
.coach-skip { flex-shrink: 0; width: 44px; height: 44px; font-size: 16px; background: var(--paper); border: 3px solid var(--ink); border-radius: 50%; cursor: pointer; }
#coach-hand {
  position: absolute; z-index: 29;
  font-size: 54px; pointer-events: none;
  animation: bob-up 0.7s ease-in-out infinite;
  filter: drop-shadow(2px 2px 0 rgba(0,0,0,0.35));
}

/* confetti */
.confetti-piece {
  position: absolute; width: 8px; height: 8px; z-index: 48;
  pointer-events: none;
}

@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; }
}