:root{--paper-cream:#faf3e3;--window-sky:#cde9f5;--map-parchment:#efe3c2;--warm-oak:#b08968;--compass-teal:#6faea9;--denim-blue:#7e9cc4;--ladybug-coral:#d97d66;--ballet-pink:#f6cfdd;--ribbon-lilac:#c9b6e4;--sparkle-gold:#f2d98d;--ink:#5e5648;color:var(--ink);font-family:Quicksand,system-ui,Segoe UI,Roboto,sans-serif;font-size:20px}*{box-sizing:border-box}html,body,#root{background:var(--window-sky);width:100%;height:100%;margin:0;padding:0;overflow:hidden}.app-root{position:fixed;inset:0}.app-root>canvas{position:absolute;inset:0}.paper-grain{pointer-events:none;opacity:.045;z-index:10;position:fixed;inset:0}.paper-vignette{pointer-events:none;z-index:10;background:radial-gradient(#0000 55%,#faf3e38c 100%);position:fixed;inset:0}.screen{text-align:center;z-index:20;flex-direction:column;justify-content:center;align-items:center;gap:.6rem;padding:2rem;display:flex;position:fixed;inset:0}.title-screen,.keycheck-screen{background:radial-gradient(ellipse at 28% 16%, #f6cfdd73, transparent 58%), radial-gradient(ellipse at 78% 78%, #c9b6e466, transparent 55%), radial-gradient(ellipse at 60% 45%, #fbe7a847, transparent 60%), var(--paper-cream);overflow:hidden}.title-decor{pointer-events:none;z-index:0;position:absolute;inset:0}.title-floater{opacity:.5;filter:drop-shadow(0 5px 7px #785a3c2e);will-change:transform;animation-name:titleFloat;animation-timing-function:ease-in-out;animation-iteration-count:infinite;position:absolute}@keyframes titleFloat{0%,to{transform:translateY(6px)rotate(-7deg)}50%{transform:translateY(-18px)rotate(7deg)}}.title-eyebrow,.title-name,.title-sub,.title-buttons,.title-hint{z-index:1;position:relative}.title-eyebrow{animation:.5s both titleFadeUp}.title-name{animation:.7s cubic-bezier(.2,1.35,.4,1) both titlePop}.title-sub{animation:.6s .12s both titleFadeUp}.title-buttons{animation:.6s .26s both titleFadeUp}.title-hint{animation:.6s .4s both titleFadeUp}@keyframes titlePop{0%{opacity:0;transform:scale(.72)rotate(-2deg)}to{opacity:1;transform:scale(1)rotate(0)}}@keyframes titleFadeUp{0%{opacity:0;transform:translateY(12px)}to{opacity:1;transform:translateY(0)}}@media (prefers-reduced-motion:reduce){.title-floater,.title-eyebrow,.title-name,.title-sub,.title-buttons,.title-hint{animation:none}}.title-eyebrow{letter-spacing:.2em;text-transform:uppercase;color:var(--warm-oak);margin:0;font-size:1rem}.title-name{color:var(--ink);text-shadow:0 3px #f2d98d99;margin:.1em 0 0;font-family:Patrick Hand,Comic Sans MS,cursive,sans-serif;font-size:clamp(2.6rem,8vw,5rem)}.title-sub{color:var(--warm-oak);margin:0 0 1.2rem}.title-buttons{flex-wrap:wrap;justify-content:center;gap:1rem;display:flex}.btn{font:inherit;border:3px solid var(--warm-oak);background:var(--map-parchment);color:var(--ink);cursor:pointer;border-radius:999px;padding:.7em 1.6em;font-weight:600;transition:transform .12s,box-shadow .12s;box-shadow:0 4px #b0896866}.btn:hover{transform:translateY(-2px)}.btn:active{transform:translateY(2px);box-shadow:0 1px #b0896866}.btn-primary{background:var(--ballet-pink);border-color:var(--ladybug-coral);font-size:1.3em;box-shadow:0 4px #d97d6673}.title-hint{color:var(--warm-oak);margin-top:1.6rem;font-size:.8rem}kbd{border:2px solid var(--warm-oak);background:#fff;border-bottom-width:4px;border-radius:.4em;margin:0 .1em;padding:.1em .5em;font-family:inherit;font-size:.85em;display:inline-block}.keycheck-row{align-items:center;gap:.5rem;margin:.4rem 0;display:flex}.keycheck-label{text-align:right;width:4.5rem;color:var(--warm-oak);font-weight:700}.keycap{border:2px solid var(--warm-oak);background:#fff;border-bottom-width:5px;border-radius:.5em;min-width:2.4em;padding:.45em .7em;font-weight:600;transition:all 80ms;display:inline-block}.keycap-lit{background:var(--sparkle-gold);border-color:var(--ladybug-coral);border-bottom-width:3px;transform:translateY(2px)}.keycheck-chords{flex-direction:column;gap:.4rem;margin:1rem 0;display:flex}.chord{background:#fff9;border-radius:.6em;padding:.4em 1em}.chord-pass{background:var(--sparkle-gold)}.objective-hud{z-index:15;background:var(--map-parchment);border:3px solid var(--warm-oak);border-radius:999px;align-items:center;gap:.6rem;padding:.5rem 1.1rem .5rem .7rem;animation:.4s objective-pop;display:flex;position:fixed;top:1rem;left:1rem;box-shadow:0 4px #b0896859}.objective-icon{font-size:1.6rem}.objective-title{font-family:Patrick Hand,Comic Sans MS,cursive,sans-serif;font-size:1.1rem}@keyframes objective-pop{0%{opacity:0;transform:scale(.7)}60%{transform:scale(1.08)}to{opacity:1;transform:scale(1)}}.pause-overlay{-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px);background:#5e564859}.pause-page{background:var(--paper-cream);border:4px solid var(--warm-oak);border-radius:1.2rem;flex-direction:column;align-items:center;gap:.6rem;padding:2.2rem 3rem;display:flex;box-shadow:0 12px 40px #5e564859}.pause-art{font-size:3rem}.pause-page h2{margin:0;font-family:Patrick Hand,Comic Sans MS,cursive,sans-serif;font-size:2rem}