:root{--ink:#23264a;--a:#ff8a3d;--b:#3d9bff;--good:#2fbf71;--card:#fffffff0;--gold:#ffd43b;--shadow:0 6px 0 var(--ink)}*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}html,body{background:#4fb4ff;height:100%;margin:0;overflow:hidden}body{color:var(--ink);-webkit-user-select:none;user-select:none;-webkit-touch-callout:none;touch-action:manipulation;overscroll-behavior:none;font-family:Fredoka,"Baloo 2",Chalkboard SE,system-ui,sans-serif;font-weight:700}#scene{touch-action:none;width:100%;height:100%;display:block;position:fixed;inset:0}.hidden{display:none!important}.screen{text-align:center;pointer-events:none;flex-direction:column;justify-content:center;align-items:center;gap:14px;padding:18px;display:flex;position:fixed;inset:0}.screen>*{pointer-events:auto}.screen .spacer{pointer-events:none;flex:1}#title,#end,#reveal{justify-content:flex-start;padding-top:4vh;padding-bottom:5vh}.row{flex-wrap:wrap;justify-content:center;gap:14px;display:flex}.logo{color:#fff;-webkit-text-stroke:6px var(--ink);paint-order:stroke fill;text-shadow:0 8px 0 var(--ink);letter-spacing:2px;font-size:clamp(64px,14vw,132px);line-height:.95;animation:2.4s ease-in-out infinite bob}.logo.small{font-size:clamp(40px,8vw,76px)}.sub{color:var(--ink);background:var(--gold);box-shadow:var(--shadow);border-radius:999px;padding:4px 22px;font-size:clamp(22px,4vw,34px);transform:rotate(-3deg)}@keyframes bob{0%,to{transform:translateY(0)}50%{transform:translateY(-8px)}}.loader{background:var(--card);border:4px solid var(--ink);border-radius:14px;width:min(320px,70vw);height:22px;overflow:hidden}#loader-fill{background:linear-gradient(90deg,#ffd43b,#ff8a3d);width:5%;height:100%;transition:width .2s}.pill{background:var(--card);border:3px solid var(--ink);white-space:nowrap;border-radius:999px;padding:4px 16px;font-size:24px}.pill.big{padding:6px 26px;font-size:34px}.pill:empty{display:none}.btn{font:inherit;color:var(--ink);cursor:pointer;background:var(--gold);border:4px solid var(--ink);box-shadow:var(--shadow);border-radius:26px;padding:10px 26px;font-size:28px;transition:transform 60ms,box-shadow 60ms}.btn:active{box-shadow:0 1px 0 var(--ink);transform:translateY(5px)}.btn.big{padding:12px 44px;font-size:clamp(34px,6vw,48px)}.btn.alt{background:#d0ebff}#play{animation:1.6s ease-in-out infinite pulse}@keyframes pulse{0%,to{transform:scale(1)}50%{transform:scale(1.06)}}#login-form{flex-wrap:wrap;justify-content:center;gap:12px;display:flex}#password{font:inherit;border:4px solid var(--ink);border-radius:20px;width:min(340px,86vw);padding:10px 18px;font-size:26px}.round{z-index:50;background:var(--card);border:3px solid var(--ink);cursor:pointer;border-radius:50%;width:52px;height:52px;font-size:24px;position:fixed;bottom:12px;right:12px}#game:not(.hidden)~#mute{width:44px;height:44px;font-size:20px;inset:10px auto auto 10px}.burst-title{color:var(--gold);-webkit-text-stroke:6px var(--ink);paint-order:stroke fill;text-shadow:0 8px 0 var(--ink);font-size:clamp(60px,14vw,120px);animation:.5s cubic-bezier(.2,1.6,.4,1) both popin,1.2s ease-in-out .5s infinite wiggle}.reveal-name{color:#fff;-webkit-text-stroke:5px var(--ink);paint-order:stroke fill;text-shadow:0 6px 0 var(--ink);font-size:clamp(36px,7vw,64px);animation:.5s cubic-bezier(.2,1.6,.4,1) both popin}.reveal-name:empty{display:none}@keyframes popin{0%{opacity:0;transform:scale(.2)}to{opacity:1;transform:scale(1)}}@keyframes wiggle{0%,to{transform:rotate(-4deg)}50%{transform:rotate(4deg)}}#game{pointer-events:none;position:fixed;inset:0}#game>*{pointer-events:auto}#hud{align-items:center;gap:8px;display:flex;position:absolute;top:8px;left:64px;right:10px}#hud .pill{padding:2px 12px;font-size:22px}#streak{color:#e8590c}#streak.pop,#stars.pop{animation:.35s cubic-bezier(.2,1.6,.4,1) popin}#road{border:3px solid var(--ink);background:#4b5068 linear-gradient(90deg,#ffd43b 50%,#0000 50%) 0/24px 4px repeat-x;border-radius:12px;flex:1;min-width:80px;height:30px;position:relative}#road-car{font-size:26px;transition:left 1s linear;position:absolute;top:-4px;left:0;transform:scaleX(-1)}#road-flag{font-size:22px;position:absolute;top:-2px;right:2px}#panel{flex-direction:column;justify-content:center;align-items:center;gap:12px;padding:10px 14px 16px;display:flex;position:absolute;bottom:0;right:0}#next-btn{flex:none}#card{background:var(--card);border:4px solid var(--ink);box-shadow:var(--shadow);white-space:nowrap;cursor:pointer;border-radius:28px;justify-content:center;align-items:center;gap:.18em;padding:8px 26px;font-size:clamp(54px,9vh,92px);line-height:1;display:flex}#card .na{color:var(--a);-webkit-text-stroke:2px var(--ink)}#card .nb{color:var(--b);-webkit-text-stroke:2px var(--ink)}#card .op{color:var(--ink);font-size:.8em}#entry{text-align:center;border-bottom:7px solid var(--ink);min-width:1.3em;color:var(--ink);display:inline-block}#card.right #entry{color:var(--good);border-color:var(--good)}#card.wrong{animation:.42s shake}#card.pop{animation:.4s cubic-bezier(.2,1.6,.4,1) popin}#card{position:relative}#card.new:before{content:"NEW";color:#fff;border:3px solid var(--ink);background:#ff6b6b;border-radius:10px;padding:2px 10px;font-size:22px;position:absolute;top:-16px;left:-14px;transform:rotate(-12deg)}@keyframes shake{0%,to{transform:translate(0)}20%{transform:translate(-16px)}60%{transform:translate(14px)}}#keypad{flex:auto;grid-template-columns:repeat(3,1fr);grid-auto-rows:1fr;gap:10px;width:100%;min-height:0;max-height:440px;display:grid}#keypad button{font:inherit;color:var(--ink);cursor:pointer;border:4px solid var(--ink);min-height:0;box-shadow:0 6px 0 var(--ink);background:#fff;border-radius:22px;font-size:clamp(30px,6vh,56px);transition:transform 50ms,box-shadow 50ms}#keypad button:active,#keypad button.down{box-shadow:0 1px 0 var(--ink);transform:translateY(5px)}#keypad button:nth-child(3n+1){background:#ffe8cc}#keypad button:nth-child(3n+2){background:#d3f9d8}#keypad button:nth-child(3n){background:#d0ebff}#keypad button.help{background:#ffdeeb}#keypad button.help.hint{animation:.8s ease-in-out infinite pulse}#keypad button.back{background:#e9ecef}#panel.locked #keypad{opacity:.35;pointer-events:none}#count{text-align:center;color:#fff;-webkit-text-stroke:7px var(--ink);paint-order:stroke fill;text-shadow:0 8px 0 var(--ink);pointer-events:none;font-size:clamp(90px,20vh,170px);line-height:1;position:absolute;top:14%;left:0}#count.tick{animation:.3s cubic-bezier(.2,1.6,.4,1) popin}.flystar{pointer-events:none;z-index:20;font-size:54px;position:absolute;top:0;left:0}@media (orientation:landscape){#panel{width:40%;top:50px}#count{width:60%}}@media (orientation:portrait){#panel{background:linear-gradient(#fff0,#ffffff8c 18%);width:100%;height:50%;left:0}#keypad{max-width:560px}#card{padding:4px 22px;font-size:clamp(44px,7vh,84px)}#count{width:100%;top:9%}}#wipe{z-index:40;pointer-events:none;clip-path:circle(0%);background:radial-gradient(circle,#ffd43b 0 55%,#ff922b 100%);transition:clip-path .22s ease-in;position:fixed;inset:0}#wipe.on{clip-path:circle(75%);pointer-events:auto}.round.corner{opacity:.7;position:fixed;inset:auto auto 12px 12px}.round.corner.holding{opacity:1;background:#ffd6e7;animation:.5s ease-in-out infinite pulse}#record{z-index:60;background:#f8f9ff;padding:16px;font-weight:500;position:fixed;inset:0;overflow-y:auto}.rec-head{background:#f8f9ff;justify-content:space-between;align-items:center;gap:16px;padding:10px 0;display:flex;position:sticky;top:-16px}.rec-title{font-size:30px;font-weight:700}.rec-sub{color:#555a7a;font-size:16px}#record-list{grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:10px;display:grid}.rec-row{background:#fff;border:3px solid #dfe3f0;border-radius:16px;align-items:center;gap:10px;padding:8px;display:flex}.rec-row.done{border-color:var(--good)}.rec-label{flex:1;font-size:20px;font-weight:700}.rec-btn{border:3px solid var(--ink);cursor:pointer;background:#fff;border-radius:50%;width:52px;height:52px;font-size:22px}.rec-btn.mic{color:#e03131}.rec-btn.mic.on{background:#ffe3e3;animation:.6s ease-in-out infinite pulse}.rec-btn:disabled{opacity:.3}
