:root {
    --bg: #fff8ec;
    --ink: #2b2140;
    --muted: #8a7fa0;
    --card: #ffffff;
    --accent: #ff7a59;
    --good: #2fbf71;
    --dot: #5b4bd6;
    --shadow: 0 6px 0 rgba(43, 33, 64, .12);
  }
  * { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
  html, body { margin: 0; height: 100%; }
  html { -webkit-text-size-adjust: 100%; }
  button, a { touch-action: manipulation; }   /* no double-tap zoom on phones */
  body {
    background: var(--bg);
    color: var(--ink);
    /* Andika: designed for early readers, single-storey "a" and "g" */
    font-family: "Andika", "Comic Sans MS", system-ui, sans-serif;
    display: flex; flex-direction: column; align-items: center;
    overflow: hidden;
    height: 100dvh;
    user-select: none; -webkit-user-select: none; -webkit-touch-callout: none;
    padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);
  }
  canvas#confetti { position: fixed; inset: 0; pointer-events: none; z-index: 50; }

  header {
    width: 100%; max-width: 900px;
    display: flex; justify-content: space-between; align-items: center;
    padding: 10px 16px;
    gap: 8px;
  }
  .stars { font-size: clamp(18px, 5.2vw, 28px); letter-spacing: 1px; min-height: 36px; white-space: nowrap; }
  .stars .empty { opacity: .18; filter: grayscale(1); }
  .iconbtn {
    border: none; background: var(--card); box-shadow: var(--shadow);
    border-radius: 14px; font-size: 22px; padding: 8px 12px; cursor: pointer;
    font-family: inherit; color: var(--ink);
  }

  main { flex: 1; width: 100%; max-width: 900px; display: flex; flex-direction: column;
         align-items: center; justify-content: center; gap: 4vh; padding: 0 16px 6vh; }


  /* ---------- picture choices ---------- */
  .choices { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(12px, 3vw, 28px); width: 100%; }
  .choice {
    background: var(--card); border: none; border-radius: 28px; box-shadow: var(--shadow);
    aspect-ratio: 1; display: flex; align-items: center; justify-content: center;
    font-size: clamp(64px, 14vw, 140px); cursor: pointer;
    transition: transform .15s ease, opacity .35s ease, box-shadow .2s ease;
  }
  @media (hover: hover) { .choice:hover { transform: translateY(-4px); } }
  .choice:active { transform: scale(.96); }
  .choice.right { animation: hooray 1s ease; box-shadow: 0 0 0 8px var(--good), var(--shadow); }
  .choice.faded { opacity: .15; transform: scale(.92); }
  .locked .choice { pointer-events: none; }

  .praise { font-size: clamp(36px, 7vw, 64px); font-weight: 700; color: var(--accent);
            height: 1.2em; opacity: 0; transform: scale(.5); transition: all .3s cubic-bezier(.3,1.6,.5,1); }
  .praise.show { opacity: 1; transform: scale(1); }

  /* ---------- menu & finish ---------- */
  .panel { text-align: center; display: flex; flex-direction: column; align-items: center; gap: 18px; }
  .panel h1 { font-size: clamp(40px, 8vw, 72px); margin: 0; }
  .panel p { margin: 0; color: var(--muted); font-size: 20px; }
  .levels { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; width: min(560px, 100%); }
  .levels button {
    border: none; border-radius: 22px; padding: 18px 12px; cursor: pointer; font-family: inherit;
    background: var(--card); box-shadow: var(--shadow); color: var(--ink); font-size: 24px; font-weight: 700;
  }
  .levels button small { display: block; font-weight: 400; font-size: 15px; color: var(--muted); margin-top: 4px; }
  .levels button:active { transform: scale(.97); }
  .big { font-size: 120px; animation: bob 1.6s ease-in-out infinite; }
  .go { border: none; background: var(--accent); color: #fff; font-family: inherit; font-weight: 700;
        font-size: 28px; padding: 14px 36px; border-radius: 22px; box-shadow: var(--shadow); cursor: pointer; }
  .hidden { display: none !important; }

  @keyframes pop { 0%{transform:scale(1)} 40%{transform:scale(1.18) rotate(-3deg)} 100%{transform:scale(1)} }
  @keyframes hooray {
    0%{transform:scale(1)} 25%{transform:scale(1.2) rotate(-8deg)} 50%{transform:scale(1.15) rotate(8deg)}
    75%{transform:scale(1.2) rotate(-4deg)} 100%{transform:scale(1.08)}
  }
  @keyframes bob { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-12px)} }

  /* ---------- the hungry dinosaur ---------- */
  #dino { position: fixed; left: 0; top: 0; z-index: 40; pointer-events: none;
          font-size: clamp(130px, 24vw, 220px); line-height: 1;
          transition: left .55s ease-in-out, top .55s ease-in-out; }
  #dino .body { display: inline-block; transform-origin: 50% 90%; }
  #dino.walk .body  { animation: waddle .3s ease-in-out infinite; }
  #dino.chomp .body { animation: chomp .32s ease; }
  #dino.burp .body  { animation: burp 1.1s ease; }
  #dino .bubble {
    position: absolute; right: 70%; top: -18%; font-size: clamp(36px, 7vw, 64px); font-weight: 700;
    background: #fff; color: var(--ink); padding: 4px 22px; border-radius: 28px; box-shadow: var(--shadow);
    white-space: nowrap; opacity: 0; transform: scale(.3); transition: all .3s cubic-bezier(.3,1.6,.5,1);
  }
  #dino .bubble.show { opacity: 1; transform: scale(1); }
  .eaten { transition: transform .35s ease-in, opacity .35s ease-in !important;
           transform: scale(0) rotate(-50deg) !important; opacity: 0 !important; }
  @keyframes waddle { 0%,100%{transform:rotate(-5deg) translateY(0)} 50%{transform:rotate(5deg) translateY(-14px)} }
  @keyframes chomp  { 0%{transform:scale(1)} 40%{transform:scale(1.18,.82) rotate(-10deg)} 100%{transform:scale(1)} }
  @keyframes burp   { 0%{transform:scale(1)} 25%{transform:scale(1.4,1.25)} 55%{transform:scale(.92)} 80%{transform:scale(1.06)} 100%{transform:scale(1)} }

  #dino.fly .body     { animation: fly .5s ease-in-out infinite; }
  #dino.plod .body    { animation: waddle .6s ease-in-out infinite; }
  #dino.tiptoe .body  { animation: tiptoe .25s ease-in-out infinite; }
  #dino.breathe .body { animation: chomp .4s ease; }
  #dino.hic .body     { animation: hic .35s ease; }
  #dino.inhale .body  { transition: transform .5s ease-in; transform: scale(1.25) rotate(12deg); }
  #dino.sneeze .body  { animation: sneeze .6s ease; }
  #dino.roar .body    { animation: roar 1.2s ease; }
  @keyframes fly    { 0%,100%{transform:translateY(0) rotate(-4deg)} 50%{transform:translateY(-22px) rotate(4deg)} }
  @keyframes tiptoe { 0%,100%{transform:translateY(0) scale(.95)} 50%{transform:translateY(-6px) scale(.95)} }
  @keyframes hic    { 0%{transform:translateY(0)} 30%{transform:translateY(-40px) scale(1.1,.9)} 100%{transform:translateY(0)} }
  @keyframes sneeze { 0%{transform:scale(1.25) rotate(12deg)} 25%{transform:scale(1.1,.9) translateX(-40px) rotate(-14deg)} 100%{transform:none} }
  @keyframes roar   { 0%{transform:scale(1)} 15%{transform:scale(1.35) rotate(-6deg)} 30%,70%{transform:scale(1.3) rotate(-4deg) translateX(-4px)}
                      40%,80%{transform:scale(1.3) rotate(-4deg) translateX(4px)} 100%{transform:scale(1)} }

  .burnt   { filter: grayscale(1) brightness(.3) !important; transition: filter .3s !important; }
  .crumble { transform: translateY(60px) scale(.2) !important; opacity: 0 !important;
             transition: transform .7s ease-in, opacity .7s ease-in, filter .3s !important; }
  .blown   { transform: translate(var(--dx), var(--dy)) rotate(var(--rot)) !important; opacity: 0 !important;
             transition: transform 1.1s cubic-bezier(.4,0,.9,.6), opacity 1.1s ease-in !important; }
  .tumble  { transform: translateY(110vh) rotate(var(--rot)) !important;
             transition: transform 1s cubic-bezier(.5,0,1,.6) !important; }
  body.shake main, body.shake header { animation: shake .5s ease; }
  @keyframes shake { 0%,100%{transform:none} 20%{transform:translate(-10px,4px)} 40%{transform:translate(9px,-5px)}
                     60%{transform:translate(-7px,3px)} 80%{transform:translate(5px,-2px)} }

  .sprite { position: fixed; z-index: 45; pointer-events: none; font-size: 40px; transform: translate(-50%,-50%);
            transition: left .4s ease-out, top .4s ease-out, transform .4s ease-out, opacity .4s ease-in .2s; }
  .sprite.puff { animation: puff .9s ease-out forwards; }
  @keyframes puff { to { transform: translate(-150%,-120%) scale(2); opacity: 0; } }

  /* little cheering cameo from the bottom corner */
  #peek { position: fixed; bottom: 0; right: 4vw; z-index: 35; pointer-events: none;
          font-size: clamp(80px, 14vw, 130px); line-height: 1;
          transform: translateY(170%); transition: transform .45s cubic-bezier(.3,1.5,.5,1); }
  #peek:not(.up) .bubble { visibility: hidden; }
  #peek.left { right: auto; left: 4vw; }
  #peek.up { transform: translateY(18%); }
  #peek .bubble { position: absolute; bottom: 100%; left: 50%; transform: translateX(-50%);
                  font-size: clamp(22px, 4vw, 32px); font-weight: 700; background: #fff; color: var(--ink);
                  padding: 2px 14px; border-radius: 20px; box-shadow: var(--shadow); white-space: nowrap; }

  /* ---------- shared extras ---------- */
  .prompt { display: flex; align-items: center; justify-content: center; gap: .3em; min-height: 1em; }
  .prompt.pop { animation: pop .6s ease; }
  .replay { font-size: 30px; padding: 6px 14px; }
  .switch { display: inline-block; margin-top: 10px; text-decoration: none; color: var(--ink);
            background: var(--card); box-shadow: var(--shadow); border-radius: 18px; padding: 10px 20px;
            font-size: 22px; font-weight: 700; }
  /* ---------- phones ---------- */
  @media (max-width: 480px) {
    main { gap: 2.5vh; padding-bottom: 4vh; }
    .choices { gap: 10px; }
    .choice { border-radius: 20px; }
    .levels { gap: 10px; }
    .levels button { font-size: 20px; padding: 14px 8px; }
    .levels button small { font-size: 13px; }
    .panel h1 { font-size: 38px; }
    .big { font-size: 90px; }
  }
  /* phone on its side: everything has to fit in a short screen */
  @media (max-height: 520px) {
    header { padding: 4px 16px; }
    main { gap: 1.5vh; padding-bottom: 2vh; }
    .panel { gap: 8px; }
    .choices { width: auto; grid-auto-rows: 38vh; grid-template-columns: repeat(3, 38vh); }
    .choices.two { grid-template-columns: repeat(2, 50vh); }
    .choice { aspect-ratio: auto; font-size: 22vh; }
    .praise { font-size: 32px; }
    .panel h1 { font-size: 34px; }
    .levels { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .levels button { padding: 10px 8px; font-size: 18px; }
    .big { font-size: 70px; }
    #dino { font-size: 34vh; }
    .replay { position: fixed; left: calc(16px + env(safe-area-inset-left)); top: 64px; }
    .choices { grid-auto-rows: 30vh; grid-template-columns: repeat(3, 30vh); }
    .choice { font-size: 18vh; }
  }
  @media (prefers-reduced-motion: reduce) { * { animation: none !important; transition: none !important; } }