:root {
  --sky: #fdf6ec;
  --ink: #23324a;
  --line: #e6dccb;
  --pop: #e8734a;
  --grass: #4ea36c;
  --sea: #3d8fc4;
  --sun: #f2b134;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  min-height: 100dvh;
  background: var(--sky);
  color: var(--ink);
  font: 600 20px/1.4 ui-rounded, "SF Pro Rounded", "Segoe UI", system-ui, sans-serif;

  touch-action: manipulation;
  -webkit-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
  -webkit-tap-highlight-color: transparent;
  overscroll-behavior: none;
}

[hidden] { display: none !important; }

.stage {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: clamp(14px, 3vh, 30px);
  min-height: 70dvh;
  padding: max(14px, env(safe-area-inset-top)) 16px max(14px, env(safe-area-inset-bottom));
  text-align: center;
}


.grown-up { margin:12px; font-size: 13px; font-weight: 600;  }
.grown-up a { color: inherit; text-decoration: none; }


.big {
  display: grid; place-items: center;
  min-width: 112px; min-height: 112px;
  padding: 10px 18px;
  font: inherit; font-size: clamp(34px, 8vmin, 60px); font-weight: 700;
  color: #fff; background: var(--sea);
  border: none; border-radius: 26px; cursor: pointer;
  box-shadow: 0 5px 0 rgba(0,0,0,.16);
  transition: transform .08s ease;
}
.big:active { transform: translateY(4px); box-shadow: 0 1px 0 rgba(0,0,0,.16); }
.big.pick-2 { background: var(--grass); }
.big.pick-3 { background: var(--pop); }
.big.pick-4 { background: var(--sun); color: var(--ink); }

.choices-row { display: flex; flex-wrap: wrap; gap: clamp(10px, 2.5vw, 22px); justify-content: center; }

.replay {
  min-width: 96px; min-height: 96px; font-size: 44px;
  background: #fff; color: var(--ink); border: 3px solid var(--line);
  border-radius: 50%; cursor: pointer; box-shadow: 0 4px 0 rgba(0,0,0,.08);
}
.replay:active { transform: translateY(3px); box-shadow: none; }


.reaction { font-size: clamp(60px, 16vmin, 120px); line-height: 1; min-height: 1.1em; }

.wobble { animation: wobble .5s ease; }
@keyframes wobble {
  0%,100% { transform: rotate(0) scale(1); }
  30% { transform: rotate(-7deg) scale(1.12); }
  65% { transform: rotate(7deg) scale(1.12); }
}

.fade-in { animation: fade .35s ease both; }
@keyframes fade { from { opacity: 0; transform: translateY(8px);} to { opacity:1; transform:none;} }


.stickers { display: flex; flex-wrap: wrap; gap: 6px; justify-content: center; font-size: 30px; min-height: 40px; }

@media (prefers-reduced-motion: reduce) {
  .wobble, .fade-in { animation: none; }
  .big { transition: none; }
}

button:focus-visible,a:focus-visible,[tabindex]:focus-visible,input:focus-visible{outline:3px solid var(--ink);outline-offset:4px;}
.start-jar{border:0;width:100%;cursor:pointer;}
.wrap{max-width:100%;}.stage{max-width:100%;}.grown-up a{display:inline-flex;align-items:center;min-height:44px;text-decoration:underline;}
.progress-controls,.audio-controls{margin:20px auto;padding:16px;max-width:760px;font:400 16px/1.5 system-ui;user-select:text;}
.progress-controls button,.audio-controls button,dialog button{min-height:44px;margin:4px;padding:8px 14px;border:2px solid var(--line);background:white;color:var(--ink);border-radius:8px;font:inherit;cursor:pointer;}
.progress-controls p{margin:0 0 8px;}dialog.settings{width:min(620px,calc(100% - 24px));max-height:85dvh;overflow:auto;background:var(--sky);color:var(--ink);border:2px solid var(--line);border-radius:16px;font:400 16px/1.5 system-ui;user-select:text;}
dialog::backdrop{background:rgba(0,0,0,.4);}dialog section{border-top:1px solid var(--line);margin-top:20px;padding-top:12px;}dialog input{max-width:100%;min-height:44px;font:inherit;}dialog form{display:flex;flex-wrap:wrap;gap:8px;align-items:center;}dialog label{display:block;}dialog h2{font-size:1.4rem;}.audio-controls summary{cursor:pointer;min-height:44px;}.audio-controls input[type=checkbox]{width:22px;height:22px;vertical-align:middle;}.audio-controls label{display:block;margin:8px 0;}#audio-cue{font-weight:600;}.audio-controls p{margin:8px 0;}