/* ---- Doughy-O comic styling ----
   Pink + black main palette, yellow and green bursts, wobbly comic lettering. */

:root {
  --pink: #ff3d9a;
  --pink-dark: #c9166e;
  --black: #111;
  --yellow: #ffe21f;
  --green: #3ddc4a;
  --paper: #fff7fb;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  font-family: 'Comic Neue', 'Comic Sans MS', cursive, sans-serif;
  background: var(--black);
  /* Ben-Day dots like an old comic page */
  background-image: radial-gradient(var(--pink-dark) 1.2px, transparent 1.3px);
  background-size: 14px 14px;
  color: var(--black);
  min-height: 100vh;
  padding: env(safe-area-inset-top) 0 env(safe-area-inset-bottom);
}

#app {
  max-width: 440px;
  margin: 0 auto;
  padding: 16px;
}

.screen {
  background: var(--paper);
  border: 5px solid var(--black);
  border-radius: 18px;
  box-shadow: 8px 8px 0 var(--pink);
  padding: 20px 16px 24px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  animation: pop-in .35s cubic-bezier(.2,1.4,.4,1);
}
.hidden { display: none !important; }

@keyframes pop-in {
  from { transform: scale(.85) rotate(-2deg); opacity: 0; }
  to   { transform: scale(1) rotate(0); opacity: 1; }
}

/* ---- Lettering ---- */
.logo {
  font-family: 'Bangers', Impact, sans-serif;
  font-size: 64px;
  letter-spacing: 3px;
  margin: 0;
  color: var(--pink);
  -webkit-text-stroke: 2px var(--black);
  text-shadow: 5px 5px 0 var(--black);
  transform: rotate(-3deg);
  line-height: 1;
}
.small-logo { font-size: 52px; }
.logo-wrap { position: relative; width: 100%; text-align: center; padding-top: 8px; }

/* Starburst "KAPOW!" shapes */
.burst {
  font-family: 'Bangers', Impact, sans-serif;
  font-size: 18px;
  line-height: 1;
  letter-spacing: 1px;
  padding: 22px 18px;
  color: var(--black);
  text-align: center;
  clip-path: polygon(50% 0%, 61% 15%, 78% 8%, 80% 26%, 98% 30%, 88% 46%, 100% 60%, 84% 68%, 88% 88%, 70% 84%, 60% 100%, 48% 88%, 32% 98%, 28% 80%, 8% 82%, 16% 64%, 0% 52%, 14% 40%, 6% 22%, 24% 20%, 24% 4%, 40% 12%);
}
.burst-yellow {
  background: var(--yellow);
  display: inline-block;
  margin: 6px 0 -14px;
  transform: rotate(-6deg);
  font-size: 14px;
  padding: 26px 16px;
}
.burst-green {
  background: var(--green);
  font-size: 22px;
  padding: 34px 30px;
  max-width: 100%;
  animation: splat .5s cubic-bezier(.2,1.6,.4,1);
}
@keyframes splat {
  from { transform: scale(0) rotate(-20deg); }
  to   { transform: scale(1) rotate(-3deg); }
}

/* ---- Doughy and his speech bubble ---- */
.doughy-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  width: 100%;
}
.bubble {
  position: relative;
  background: #fff;
  border: 4px solid var(--black);
  border-radius: 22px;
  padding: 14px 18px;
  font-size: 20px;
  font-weight: 700;
  text-align: center;
  max-width: 100%;
}
.bubble::after {           /* the little tail pointing at Doughy */
  content: '';
  position: absolute;
  bottom: -18px; left: 50%;
  border: 10px solid transparent;
  border-top: 12px solid var(--black);
  transform: translateX(-50%);
}
.bubble::before {
  content: '';
  position: absolute;
  bottom: -11px; left: 50%;
  border: 8px solid transparent;
  border-top: 10px solid #fff;
  transform: translateX(-50%);
  z-index: 1;
}
.bubble-q { font-size: 22px; line-height: 1.35; }

.doughy {
  width: 130px; height: 130px;
  background: url('doughy.svg') center/contain no-repeat;
  /* strip the icon's dark rounded square so only Doughy shows */
  filter: drop-shadow(0 0 0 transparent);
  margin-top: 10px;
  animation: bob 2.2s ease-in-out infinite;
}
.small-doughy .doughy { width: 90px; height: 90px; }
@keyframes bob { 0%,100% { transform: translateY(0) } 50% { transform: translateY(-6px) } }
.doughy.happy { animation: dance .5s ease-in-out 4; }
@keyframes dance { 0%,100%{transform:rotate(0)} 25%{transform:rotate(-12deg) translateY(-10px)} 75%{transform:rotate(12deg) translateY(-10px)} }
.doughy.sad { animation: wobble .4s ease-in-out 2; filter: saturate(.4); }
@keyframes wobble { 0%,100%{transform:translateX(0)} 25%{transform:translateX(-8px)} 75%{transform:translateX(8px)} }

/* ---- Stats boxes ---- */
.stats { display: flex; gap: 10px; width: 100%; }
.stat {
  flex: 1;
  background: #fff;
  border: 4px solid var(--black);
  border-radius: 12px;
  padding: 10px 4px;
  text-align: center;
  display: flex; flex-direction: column;
}
.stat-num { font-family: 'Bangers', Impact, sans-serif; font-size: 30px; color: var(--pink); -webkit-text-stroke: 1px var(--black); line-height: 1; }
.stat-label { font-size: 12px; font-weight: 700; text-transform: uppercase; }

/* ---- Buttons ---- */
.big-btn {
  font-family: 'Bangers', Impact, sans-serif;
  font-size: 26px;
  letter-spacing: 2px;
  background: var(--pink);
  color: #fff;
  border: 4px solid var(--black);
  border-radius: 14px;
  padding: 14px 20px;
  width: 100%;
  box-shadow: 5px 5px 0 var(--black);
  cursor: pointer;
  -webkit-text-stroke: 1px var(--black);
}
.big-btn:active { transform: translate(3px,3px); box-shadow: 2px 2px 0 var(--black); }
.big-btn:disabled { background: #bbb; box-shadow: none; }
.ghost-btn {
  font-family: inherit; font-weight: 700; font-size: 15px;
  background: transparent; border: 3px dashed var(--black); border-radius: 12px;
  padding: 10px 14px; cursor: pointer; width: 100%;
}

/* ---- Puzzle screen bits ---- */
.topbar { display: flex; justify-content: space-between; width: 100%; }
.tag {
  font-family: 'Bangers', Impact, sans-serif; font-size: 20px; letter-spacing: 2px;
  background: var(--yellow); border: 3px solid var(--black); border-radius: 8px; padding: 3px 12px;
  transform: rotate(-2deg);
}
.tag-dark { background: var(--black); color: var(--yellow); transform: rotate(2deg); }

.clues { list-style: none; padding: 0; margin: 0; width: 100%; display: flex; flex-direction: column; gap: 6px; }
.clues li {
  background: var(--yellow); border: 3px solid var(--black); border-radius: 10px;
  padding: 8px 12px; font-weight: 700; font-size: 16px;
  animation: pop-in .3s;
}

#answer-form { width: 100%; display: flex; flex-direction: column; gap: 10px; }
#answer-input {
  font-family: inherit; font-size: 22px; font-weight: 700;
  padding: 12px 14px; border: 4px solid var(--black); border-radius: 12px;
  width: 100%; text-align: center; background: #fff;
}
#answer-input:focus { outline: 4px solid var(--pink); }

.feedback {
  font-family: 'Bangers', Impact, sans-serif; font-size: 34px; letter-spacing: 2px;
  text-align: center; width: 100%; padding: 14px; border-radius: 14px; border: 4px solid var(--black);
  animation: splat .4s cubic-bezier(.2,1.6,.4,1);
}
.feedback.good { background: var(--green); }
.feedback.bad  { background: var(--pink); color: #fff; }
.feedback .sub { display: block; font-family: 'Comic Neue', sans-serif; font-size: 16px; letter-spacing: 0; font-weight: 700; margin-top: 6px; }

/* ---- Summary ---- */
.scorecard { width: 100%; background: #fff; border: 4px solid var(--black); border-radius: 14px; overflow: hidden; }
.scorecard-row { display: flex; justify-content: space-between; padding: 10px 16px; font-size: 20px; font-weight: 700; border-bottom: 3px dashed #ddd; }
.scorecard-row.total { background: var(--yellow); border: none; font-size: 24px; }
.scorecard-row b { font-family: 'Bangers', Impact, sans-serif; font-size: 28px; color: var(--pink); -webkit-text-stroke: 1px var(--black); }

.small { font-size: 14px; text-align: center; margin: 0; opacity: .8; }

/* ---- Practice buttons ---- */
.row { display: flex; gap: 10px; width: 100%; }
.row .big-btn, .row .ghost-btn { flex: 1; }
.big-btn.alt { background: var(--yellow); color: var(--black); font-size: 20px; -webkit-text-stroke: 0; padding: 12px 8px; }