:root{--ink:#1a2240;--paper:#fffdf6;--sun:#ffc61a;--go:#2fb83a;--font:"Fredoka","Arial Rounded MT Bold",system-ui,sans-serif;color-scheme:light}html,body{height:100%;margin:0}html{overscroll-behavior:none}html,body,#wrap,canvas,button{-webkit-user-select:none;user-select:none;-webkit-touch-callout:none;-webkit-tap-highlight-color:transparent}body{background:#58b8ff;color:var(--ink);font-family:var(--font);overflow:hidden}#wrap{position:fixed;top:0;right:0;bottom:0;left:0;touch-action:none}canvas{display:block;width:100%;height:100%}#card{position:fixed;top:0;right:0;bottom:0;left:0;z-index:5;display:flex;align-items:center;justify-content:center;background:#1a224033;padding:max(16px,env(safe-area-inset-top)) max(16px,env(safe-area-inset-right)) max(16px,env(safe-area-inset-bottom)) max(16px,env(safe-area-inset-left));box-sizing:border-box;overflow:auto}#card .in{max-width:760px;width:100%;margin:auto;box-sizing:border-box;padding:clamp(16px,3vw,28px);background:var(--paper);border:5px solid #fff;border-radius:32px;box-shadow:0 10px #0002,0 24px 60px #0004;display:flex;flex-direction:column;gap:12px;align-items:center;animation:pop .4s cubic-bezier(.2,.9,.3,1.4)}@keyframes pop{0%{opacity:0;transform:scale(.85)}to{opacity:1;transform:none}}#card h1{margin:0;font-weight:700;font-size:clamp(32px,6vw,60px);line-height:1;color:#e8262f;text-shadow:0 4px 0 #ffc61a}#card p{margin:0;font-size:clamp(18px,2.6vw,26px);font-weight:500}#card button{font-family:var(--font);cursor:pointer;touch-action:manipulation;border:0}#card button:focus-visible{outline:4px solid #3a8de0;outline-offset:3px}.tile{background:#fff;border-radius:22px;box-shadow:0 6px #0000001f;padding:8px;display:flex;flex-direction:column;align-items:center;gap:2px;transition:transform .1s}.tile:active{transform:translateY(4px) scale(.97);box-shadow:0 2px #0000001f}.tile span{font-size:clamp(17px,2.4vw,22px);font-weight:700;color:var(--ink)}.cars{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;width:100%}.cars .tile{border:4px solid color-mix(in srgb,var(--c) 40%,#fff)}.cars .tile.on{border-color:var(--c);background:color-mix(in srgb,var(--c) 12%,#fff)}.cars img{width:100%;max-width:200px;height:auto}.top{display:flex;align-items:center;gap:16px}.car-back{width:110px;padding:4px}.car-back img{width:100%}.worlds{display:grid;grid-template-columns:repeat(auto-fit,minmax(118px,1fr));gap:12px;width:100%}.world{background:linear-gradient(180deg,var(--a) 0 55%,var(--b) 55%);padding:14px 6px;border:4px solid #fff}.world b{font-size:clamp(46px,7vw,64px);line-height:1.1;font-weight:400}.world span{background:#fff;border-radius:999px;padding:2px 12px}.world small{font-size:16px;font-weight:700;color:var(--ink);background:#fff9;border-radius:999px;padding:0 8px}.win{display:flex;flex-direction:column;align-items:center;gap:8px}.trophy{font-size:clamp(70px,12vw,110px);line-height:1;animation:bounce 1s ease-in-out infinite}@keyframes bounce{50%{transform:translateY(-12px) rotate(-6deg)}}.got{font-size:clamp(36px,6vw,56px);font-weight:700}.row{display:flex;gap:14px;flex-wrap:wrap;justify-content:center}#card button.big{font-size:clamp(34px,5vw,46px);min-width:110px;min-height:84px;border-radius:24px;background:var(--sun);color:var(--ink);box-shadow:0 6px #c48a00;padding:6px 18px}#card button.big.go{background:#6ee86a;box-shadow:0 6px #1f9a2e}#card button.big.ghost{background:#fff;box-shadow:0 6px #0002}#card button.big:active{transform:translateY(4px);box-shadow:0 2px #0003}@media(prefers-reduced-motion:reduce){#card .in,.trophy{animation:none}}@media(max-height:520px){.cars{grid-template-columns:repeat(6,1fr)}.cars .tile span{font-size:15px}#card .in{gap:8px}}.corner{position:fixed;z-index:6;top:max(12px,env(safe-area-inset-top));right:max(12px,env(safe-area-inset-right));display:flex;gap:10px}.corner button{width:54px;height:54px;border-radius:50%;border:3px solid #fff;background:#fffc;font-size:24px;cursor:pointer;touch-action:manipulation;box-shadow:0 4px #0002}.lock{display:flex;gap:12px;align-items:center}.lock input{font:700 26px var(--font);padding:14px 18px;border-radius:20px;border:4px solid #e3e6ee;width:min(260px,50vw);color:var(--ink);background:#fff}.lock input:focus-visible{outline:none;border-color:#3a8de0}
