:root{--font: "Quicksand", "Nunito", system-ui, -apple-system, "Segoe UI", sans-serif;--dino-red: #e84a4a;--dino-blue: #3b82c4;--dino-yellow: #f2c230;--dino-green: #4ca65a;--dino-purple: #8e5bc4;--dino-orange: #ee8b3a;--bg: #fdf6e3;--surface: #fffdf7;--ink: #3a2e2a;--ink-soft: #7a6a60;--nest: #e7dcc2;--nest-line: #c9b896;--calm: #8898d8;--gold: #f2c230;--sp-1: 4px;--sp-2: 8px;--sp-3: 12px;--sp-4: 16px;--sp-5: 24px;--sp-6: 32px;--tap-min: 44px;--tap-mid: 56px;--tap-lg: 64px;--radius: 18px;--radius-lg: 28px;--cell-size: clamp(76px, 22vmin, 160px)}*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}html,body{margin:0;min-height:100%}body{font-family:var(--font);font-size:18px;color:var(--ink);background:var(--bg);-webkit-text-size-adjust:100%;user-select:none;-webkit-user-select:none;padding:env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left)}input,textarea{user-select:text;-webkit-user-select:text;font-size:16px}img{-webkit-user-drag:none;-webkit-touch-callout:none;-webkit-user-select:none;user-select:none}button,.tappable{touch-action:manipulation;cursor:pointer;font-family:inherit}button{border:none;background:none;color:inherit;padding:0}#build-marker{position:fixed;bottom:2px;right:6px;font-size:10px;color:var(--ink-soft);opacity:.5;pointer-events:none;z-index:9999;font-variant-numeric:tabular-nums}#app{min-height:100vh;min-height:100dvh;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:var(--sp-5);padding:var(--sp-5);text-align:center}h1{font-size:clamp(28px,8vw,48px);font-weight:700;margin:0}.subtitle{color:var(--ink-soft);margin:0;font-weight:600}.tier-label{font-size:14px;font-weight:600;color:var(--ink-soft);margin:0;letter-spacing:.03em}.btn-primary{min-height:var(--tap-lg);padding:0 var(--sp-6);border-radius:var(--radius-lg);background:var(--dino-green);color:#fff;font-size:24px;font-weight:700;box-shadow:0 4px #0000001f}.swatches{display:flex;gap:var(--sp-3);flex-wrap:wrap;justify-content:center}.swatch{width:var(--tap-lg);height:var(--tap-lg);border-radius:50%;box-shadow:inset 0 -6px #0000001f}#back-btn{position:fixed;top:10px;left:10px;font-size:18px;padding:6px 8px;border-radius:50%;background:#ffffffb8;backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);border:1.5px solid rgba(0,0,0,.08);box-shadow:0 2px 8px #0000001a;cursor:pointer;z-index:9999;line-height:1;touch-action:manipulation}#back-btn:hover{background:#ffffffeb}#mute-btn{position:fixed;top:10px;right:10px;font-size:18px;padding:6px 8px;border-radius:50%;background:#ffffffb8;backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);border:1.5px solid rgba(0,0,0,.08);box-shadow:0 2px 8px #0000001a;cursor:pointer;z-index:9999;line-height:1;touch-action:manipulation}#mute-btn:hover{background:#ffffffeb}.music-credit{font-size:11px;color:var(--ink-soft);opacity:.65;margin:0;text-align:center;line-height:1.5;padding:0 8px}.music-credit em{font-style:italic}.round-progress{display:flex;align-items:center;justify-content:center;min-height:100dvh;cursor:pointer}.round-dots{display:flex;gap:16px}.round-dot{width:28px;height:28px;border-radius:50%;background:var(--nest);border:2.5px solid var(--nest-line)}.round-dot.done{background:var(--gold);border-color:var(--gold);animation:dot-pop .35s cubic-bezier(.34,1.56,.64,1) both}@keyframes dot-pop{0%{transform:scale(.4)}to{transform:scale(1)}}.celebration{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:var(--sp-5);min-height:100dvh;cursor:pointer;user-select:none;-webkit-user-select:none}.celebration-title{font-size:clamp(36px,12vw,64px);font-weight:700;margin:0;color:var(--ink);animation:celeb-pop .45s cubic-bezier(.34,1.56,.64,1) both}.celebration-dinos{display:flex;gap:var(--sp-4);align-items:flex-end;justify-content:center}.celeb-dino{width:clamp(90px,28vmin,150px);mix-blend-mode:multiply;opacity:0;animation:celeb-bounce .5s cubic-bezier(.34,1.56,.64,1) forwards}.celeb-dino-0{animation-delay:.15s}.celeb-dino-1{animation-delay:.3s}.celeb-dino-2{animation-delay:.45s}.celebration-hint{font-size:14px;color:var(--ink-soft);opacity:.5;margin:0;animation:celeb-fadein .4s 1.2s both}@keyframes celeb-pop{0%{transform:scale(.4);opacity:0}to{transform:scale(1);opacity:1}}@keyframes celeb-bounce{0%{transform:translateY(80px) scale(.5);opacity:0}to{transform:translateY(0) scale(1);opacity:1}}@keyframes celeb-fadein{0%{opacity:0}to{opacity:.5}}.htp-overlay{position:fixed;top:0;right:0;bottom:0;left:0;background:#00000073;display:flex;align-items:center;justify-content:center;z-index:10000}.htp-dialog{background:var(--surface);border-radius:var(--radius-lg);padding:var(--sp-5) var(--sp-6);max-width:300px;width:calc(100% - 48px);text-align:center;box-shadow:0 8px 32px #0000002e}.htp-title{font-size:20px;font-weight:700;margin:0 0 var(--sp-4);color:var(--ink)}.htp-rules{text-align:left;margin:0 0 var(--sp-5);padding-left:var(--sp-5);line-height:2;font-size:15px;color:var(--ink)}.htp-ok{min-height:var(--tap-mid);padding:0 var(--sp-6);border-radius:var(--radius);background:var(--dino-green);color:#fff;font-size:17px;font-weight:700;touch-action:manipulation}.htp-btn{font-size:13px;font-weight:600;color:var(--ink-soft);opacity:.7;padding:var(--sp-2) var(--sp-3);border-radius:var(--radius);touch-action:manipulation}.htp-btn:hover,.htp-btn:focus-visible{opacity:1;background:var(--nest);outline:none}.reset-overlay{position:fixed;top:0;right:0;bottom:0;left:0;background:#00000073;display:flex;align-items:center;justify-content:center;z-index:10000}.reset-dialog{background:var(--surface);border-radius:var(--radius-lg);padding:var(--sp-5) var(--sp-6);max-width:280px;width:calc(100% - 48px);text-align:center;box-shadow:0 8px 32px #0000002e}.reset-dialog p{font-size:18px;font-weight:700;margin:0 0 var(--sp-4);color:var(--ink)}.reset-actions{display:flex;gap:var(--sp-3);justify-content:center}.reset-actions button{min-height:var(--tap-mid);padding:0 var(--sp-4);border-radius:var(--radius);font-size:16px;font-weight:700;touch-action:manipulation}.reset-cancel{background:var(--nest);color:var(--ink)}.reset-confirm{background:var(--dino-red);color:#fff}@media(prefers-reduced-motion:reduce){*{animation-duration:.001ms!important;transition-duration:.001ms!important}}.puzzle-screen{display:flex;flex-direction:column;align-items:center;gap:var(--sp-5);width:100%;max-width:600px;padding:var(--sp-4)}.mode-banner{font-size:clamp(18px,5vw,26px);font-weight:700;color:var(--ink);text-align:center;line-height:1.3}.mode-banner .speaker-btn{background:none;border:none;font-size:1.2em;cursor:pointer;vertical-align:middle;touch-action:manipulation;margin-left:var(--sp-2);opacity:.7}.mode-banner .speaker-btn:hover{opacity:1}.puzzle-body{display:flex;flex-direction:row;align-items:center;gap:var(--sp-6)}.dino-grid{display:grid;gap:8px}.grid-cell{width:var(--cell-size);height:var(--cell-size);border-radius:var(--radius);background:var(--surface);border:3px solid var(--nest-line);display:flex;align-items:center;justify-content:center;position:relative;overflow:hidden;transition:border-color .15s,transform .15s,box-shadow .15s;touch-action:manipulation}.grid-cell img{width:90%;height:90%;object-fit:contain;pointer-events:none;-webkit-user-drag:none;-webkit-touch-callout:none}.grid-cell.empty{border-style:dashed;background:var(--nest);cursor:pointer}.grid-cell.empty:after{content:"";width:60%;height:60%;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 60 60'%3E%3Cellipse cx='30' cy='36' rx='22' ry='16' fill='%23c9b896'/%3E%3Cellipse cx='30' cy='30' rx='14' ry='17' fill='%23e7dcc2'/%3E%3C/svg%3E");background-size:contain;background-repeat:no-repeat;background-position:center;opacity:.6}.grid-cell.question{border-color:var(--gold);border-style:dashed;border-width:4px;background:#fff9e6;animation:pulse-question 1.8s ease-in-out infinite}.grid-cell.question:after{content:"?";font-size:calc(var(--cell-size) * .42);font-weight:900;color:var(--gold);line-height:1}@keyframes pulse-question{0%,to{box-shadow:0 0 #f2c23059}50%{box-shadow:0 0 0 10px #f2c23000}}.grid-cell.selectable:hover,.grid-cell.selectable.hovered{transform:scale(1.06);border-color:var(--dino-green);box-shadow:0 4px 12px #0000001f;z-index:2}.grid-cell.selected{transform:scale(1.06);border-color:var(--dino-green);box-shadow:0 0 0 3px var(--dino-green)}.grid-cell.selected:before{content:"✓";position:absolute;top:4px;right:6px;font-size:.9em;color:var(--dino-green);font-weight:900;z-index:3}.grid-cell.empty.selected{border-color:var(--gold);border-style:solid;box-shadow:0 0 0 3px var(--gold)}.grid-cell.empty.selected:before{content:none}.grid-cell.wrong{animation:wrong-bounce .45s ease;border-color:var(--calm)}@keyframes wrong-bounce{0%,to{transform:scale(1)}25%{transform:scale(1.1) rotate(-4deg)}50%{transform:scale(1.08) rotate(4deg)}75%{transform:scale(1.04) rotate(-2deg)}}.grid-cell.correct{animation:correct-pop .4s ease forwards;border-color:var(--gold)}@keyframes correct-pop{0%{transform:scale(1)}50%{transform:scale(1.18)}to{transform:scale(1.06)}}.choices{display:flex;flex-direction:column;gap:var(--sp-4);align-items:center}.choice-btn{width:calc(var(--cell-size) * .5);height:calc(var(--cell-size) * .5);min-width:var(--tap-min);min-height:var(--tap-min);border-radius:50%;border:3px solid transparent;background:var(--surface);box-shadow:0 4px #0000001a;display:flex;align-items:center;justify-content:center;cursor:pointer;touch-action:manipulation;transition:transform .12s,box-shadow .12s,border-color .12s;position:relative}.choice-btn img{width:80%;height:80%;object-fit:contain;pointer-events:none;-webkit-user-drag:none;-webkit-touch-callout:none}.choice-btn:hover,.choice-btn:focus-visible{transform:scale(1.08);border-color:var(--dino-green);box-shadow:0 6px #0000001f;outline:none}.choice-btn.wrong{animation:wrong-bounce .45s ease;border-color:var(--calm)}.choice-btn.correct{animation:correct-pop .4s ease;border-color:var(--gold)}.choice-btn[data-dino=rosie]{--btn-color: var(--dino-red)}.choice-btn[data-dino=bruno]{--btn-color: var(--dino-blue)}.choice-btn[data-dino=sunny]{--btn-color: var(--dino-yellow)}.choice-btn[data-dino=fern]{--btn-color: var(--dino-green)}.choice-btn[data-dino=plum]{--btn-color: var(--dino-purple)}.choice-btn[data-dino=coco]{--btn-color: var(--dino-orange)}.choice-btn{border-color:var(--btn-color, var(--nest-line))}.coord-prompt{font-size:clamp(18px,4.5vw,24px);font-weight:700;background:var(--surface);border-radius:var(--radius);padding:var(--sp-3) var(--sp-5);border:2px solid var(--nest-line);text-align:center}.well-done{display:flex;flex-direction:column;align-items:center;gap:var(--sp-4);animation:well-done-in .5s cubic-bezier(.22,1,.36,1) both}@keyframes well-done-in{0%{opacity:0;transform:scale(.7) translateY(20px)}to{opacity:1;transform:scale(1) translateY(0)}}.well-done-emoji{font-size:clamp(56px,15vw,90px);line-height:1}.well-done-text{font-size:clamp(24px,7vw,40px);font-weight:900;color:var(--ink)}.sparkle-particle{position:fixed;pointer-events:none;font-size:22px;z-index:9000;animation:sparkle-fly var(--dur, .8s) ease-out forwards}@keyframes sparkle-fly{0%{opacity:1;transform:translate(0) scale(1) rotate(0)}to{opacity:0;transform:translate(var(--dx,0px),var(--dy,-80px)) scale(.5) rotate(var(--rot,180deg))}}.btn-next{min-height:var(--tap-lg);padding:0 var(--sp-6);border-radius:var(--radius-lg);background:var(--dino-green);color:#fff;font-size:22px;font-weight:700;box-shadow:0 4px #0000001f;transition:transform .1s,box-shadow .1s}.btn-next:active{transform:translateY(3px);box-shadow:0 1px #0000001f}.egg-tray{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;width:100%;max-width:320px}.egg-btn{position:relative;width:100%;aspect-ratio:1;background:none;border:none;padding:4px;cursor:pointer;touch-action:manipulation;border-radius:8px;transition:transform .15s}.egg-btn img{width:100%;height:100%;object-fit:contain;-webkit-user-drag:none;-webkit-touch-callout:none;mix-blend-mode:multiply}.egg-btn.egg-active{animation:egg-glow 2s ease-in-out infinite}@keyframes egg-glow{0%,to{filter:drop-shadow(0 0 4px rgba(242,194,48,.5));transform:scale(1)}50%{filter:drop-shadow(0 0 16px rgba(242,194,48,1));transform:scale(1.08)}}.egg-btn.egg-done:after{content:"⭐";position:absolute;bottom:2px;right:2px;font-size:15px;line-height:1;pointer-events:none}.egg-btn.egg-locked{cursor:default}.egg-btn.egg-locked img{filter:grayscale(1) brightness(.65) contrast(.85);mix-blend-mode:normal}.egg-btn:not(:disabled):hover,.egg-btn:not(:disabled):focus-visible{transform:scale(1.1);outline:none}