html,body,#root{background:#1b1130;height:100%;margin:0;overflow:hidden}.game-canvas{position:absolute;inset:0}.game-canvas canvas{touch-action:none;width:100%;height:100%;display:block}:root{--candy-pink:#ff4f9a;--candy-yellow:#ffd23f;--candy-mint:#3ddbb1;--candy-sky:#5ec8ff;--candy-grape:#3b2a63;--candy-cream:#fff8ee;--candy-shadow:#3b2a6359;--ogp-safe-top-inset:env(safe-area-inset-top,0px);--ogp-safe-bottom-inset:env(safe-area-inset-bottom,0px);--ogp-safe-left-inset:env(safe-area-inset-left,0px);--ogp-safe-right-inset:env(safe-area-inset-right,0px);--font-display:"Trebuchet MS", "Arial Rounded MT Bold", system-ui, sans-serif}.hud{pointer-events:none;font-family:var(--font-display);color:var(--candy-cream);text-shadow:0 2px 0 var(--candy-grape), 0 0 8px var(--candy-shadow);padding:calc(12px + var(--ogp-safe-top-inset)) calc(12px + var(--ogp-safe-right-inset)) calc(12px + var(--ogp-safe-bottom-inset)) calc(12px + var(--ogp-safe-left-inset));position:absolute;inset:0}.hud__rank{top:calc(12px + var(--ogp-safe-top-inset));left:calc(16px + var(--ogp-safe-left-inset));align-items:baseline;gap:6px;display:flex;position:absolute}.hud__rank-num{color:var(--candy-yellow);font-size:56px;font-weight:900;line-height:1}.hud__rank-total{font-size:22px;font-weight:700}.hud__lap{top:calc(12px + var(--ogp-safe-top-inset));letter-spacing:.04em;font-size:24px;font-weight:800;position:absolute;left:50%;transform:translate(-50%)}.minimap{top:calc(12px + var(--ogp-safe-top-inset));right:calc(12px + var(--ogp-safe-right-inset));border:3px solid var(--candy-cream);background:#3b2a638c;border-radius:18px;position:absolute}.item-slot{top:calc(84px + var(--ogp-safe-top-inset));left:calc(16px + var(--ogp-safe-left-inset));border:4px solid var(--candy-pink);width:72px;height:72px;text-shadow:none;background:#fff8eed9;border-radius:20px;place-items:center;font-size:40px;display:grid;position:absolute}.item-slot[data-item=empty]{opacity:.7;border-style:dashed}.speedo{bottom:calc(14px + var(--ogp-safe-bottom-inset));grid-template-rows:auto auto;grid-template-columns:1fr auto;align-items:end;column-gap:8px;width:min(280px,50vw);display:grid;position:absolute;left:50%;transform:translate(-50%)}.speedo__bar{border:2px solid var(--candy-cream);background:#3b2a6399;border-radius:8px;grid-column:1/3;height:12px;overflow:hidden}.speedo__fill{transform-origin:0;background:linear-gradient(90deg, var(--candy-mint), var(--candy-yellow), var(--candy-pink));width:100%;height:100%;transform:scaleX(0)}.speedo__num{justify-self:end;font-size:30px;font-weight:900}.speedo__unit{padding-bottom:5px;font-size:14px;font-weight:700}.countdown{color:var(--candy-yellow);font-size:clamp(96px,22vw,200px);font-weight:900;animation:.7s ease-out pop;position:absolute;top:38%;left:50%;transform:translate(-50%,-50%)}.countdown--go{color:var(--candy-mint)}@keyframes pop{0%{opacity:0;transform:translate(-50%,-50%)scale(.4)}60%{opacity:1;transform:translate(-50%,-50%)scale(1.15)}to{transform:translate(-50%,-50%)scale(1)}}.item-slot__icon{animation:.22s ease-out pop-inline}@keyframes pop-inline{0%{transform:scale(.4)}60%{transform:scale(1.2)}to{transform:scale(1)}}.app{font-family:var(--font-display);color:var(--candy-grape);background:linear-gradient(180deg, var(--candy-sky), #c9f0ff 55%, var(--candy-cream));position:fixed;inset:0;overflow:hidden}.race{position:absolute;inset:0}.screen{padding:calc(24px + var(--ogp-safe-top-inset)) 24px calc(24px + var(--ogp-safe-bottom-inset));text-align:center;flex-direction:column;justify-content:center;align-items:center;gap:20px;display:flex;position:absolute;inset:0;overflow-y:auto}.screen__title{margin:0;font-size:clamp(28px,6vw,44px);font-weight:900}.logo{text-transform:uppercase;margin:0;line-height:.95;display:grid}.logo__top{color:var(--candy-pink);text-shadow:0 4px 0 var(--candy-grape);-webkit-text-stroke:2px var(--candy-grape);font-size:clamp(44px,11vw,96px);font-weight:900}.logo__bottom{color:var(--candy-yellow);text-shadow:0 3px 0 var(--candy-grape);-webkit-text-stroke:2px var(--candy-grape);font-size:clamp(30px,7vw,60px);font-weight:900}.hint{opacity:.75;margin:0;font-size:14px}.row{flex-wrap:wrap;justify-content:center;gap:12px;display:flex}.btn{min-width:44px;min-height:44px;font:inherit;color:var(--candy-grape);background:var(--candy-cream);border:3px solid var(--candy-grape);box-shadow:0 4px 0 var(--candy-grape);cursor:pointer;border-radius:999px;padding:10px 22px;font-size:18px;font-weight:800;transition:transform 80ms}.btn:hover{transform:translateY(-1px)}.btn:active{box-shadow:0 1px 0 var(--candy-grape);transform:translateY(3px)}.btn:focus-visible,.card:focus-visible,.gamepad-nav .btn:focus,.gamepad-nav .card:focus{outline:4px solid var(--candy-yellow);outline-offset:2px}.btn--primary{background:var(--candy-pink);color:#fff}.btn--big{padding:14px 48px;font-size:28px}.card-grid{flex-wrap:wrap;justify-content:center;gap:16px;max-width:960px;display:flex}.card{width:168px;font:inherit;color:inherit;background:var(--candy-cream);border:3px solid var(--candy-grape);box-shadow:0 4px 0 var(--candy-grape);cursor:pointer;border-radius:20px;justify-items:center;gap:6px;padding:12px;display:grid}.card--selected{border-color:var(--candy-pink);box-shadow:0 4px 0 var(--candy-pink);background:#fff;transform:translateY(-4px)}.card__thumb{aspect-ratio:16/9;object-fit:cover;background:var(--candy-mint);border-radius:12px;width:100%}.card__portrait{aspect-ratio:4/3;object-fit:contain;background:radial-gradient(ellipse at 50% 65%, color-mix(in srgb, var(--racer,var(--candy-mint)) 45%, #fff), transparent 75%);pointer-events:none;border-radius:14px;width:100%}.card-grid--racers{grid-template-columns:repeat(3,minmax(0,190px));justify-content:center;gap:14px;max-width:none;display:grid}.card--racer{width:auto;transition:scale .12s ease-out,transform .12s ease-out}.card--racer:hover,.card--racer:focus-visible,.gamepad-nav .card--racer:focus{z-index:1;scale:1.08}@media (prefers-reduced-motion:reduce){.card--racer{transition:none}}.card__name{font-size:20px;font-weight:900}.card__sub{text-transform:capitalize;opacity:.7;font-size:14px}.stats{gap:4px;width:100%;display:grid}.stat{text-align:left;grid-template-columns:62px 1fr;align-items:center;gap:6px;font-size:12px;font-weight:700;display:grid}.stat__bar{background:#e6dff2;border-radius:4px;height:8px;overflow:hidden}.stat__fill{background:var(--candy-mint);height:100%;display:block}.overlay{z-index:10;background:#3b2a638c;place-items:center;padding:16px;display:grid;position:absolute;inset:0}.panel{background:var(--candy-cream);border:4px solid var(--candy-grape);min-width:min(320px,90vw);max-height:90vh;box-shadow:0 8px 0 var(--candy-grape);text-align:center;border-radius:28px;justify-items:center;gap:14px;padding:24px 28px;display:grid;overflow-y:auto}.panel__note{opacity:.7;margin:-6px 0 0;font-size:.8rem}.panel--wide{min-width:min(520px,94vw)}.results{border-collapse:separate;border-spacing:0 6px;width:100%;font-weight:700}.results th{text-transform:uppercase;opacity:.6;text-align:left;padding:0 10px;font-size:13px}.results td{text-align:left;background:#fff;padding:8px 10px}.results td:first-child{border-radius:12px 0 0 12px;width:2.5em}.results td:last-child{font-variant-numeric:tabular-nums;border-radius:0 12px 12px 0}.results__row{opacity:0;animation:.28s ease-out forwards row-in}.results__row--player td{background:var(--candy-yellow)}@keyframes row-in{0%{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}.pause-btn{z-index:5;top:calc(12px + var(--ogp-safe-top-inset));right:calc(var(--pause-right) + var(--ogp-safe-right-inset));width:48px;min-width:44px;height:48px;min-height:44px;color:var(--candy-cream);border:3px solid var(--candy-cream);cursor:pointer;background:#3b2a6399;border-radius:50%;font-size:16px;position:absolute}.touch{z-index:4;pointer-events:none;-webkit-user-select:none;user-select:none;-webkit-touch-callout:none;position:absolute;inset:0}.touch__steer{pointer-events:auto;touch-action:none;width:55%;position:absolute;top:25%;bottom:0;left:0}.touch__ring{width:calc(var(--touch-radius) * 2);height:var(--touch-ring-h);margin:calc(var(--touch-ring-h) / -2) 0 0 calc(var(--touch-radius) * -1);border-radius:calc(var(--touch-ring-h) / 2);opacity:0;background:#3b2a6340;border:3px solid #fff8eecc;place-items:center;display:grid;position:absolute;top:0;left:0}.touch__knob{background:var(--candy-yellow);border:3px solid var(--candy-grape);border-radius:50%;width:44px;height:44px}.touch__buttons{right:calc(16px + var(--ogp-safe-right-inset));bottom:calc(16px + var(--ogp-safe-bottom-inset));pointer-events:none;grid-template-columns:repeat(2,auto);place-items:end;gap:12px;display:grid;position:absolute}.touch-btn{pointer-events:auto;touch-action:none;min-width:var(--touch-min);min-height:var(--touch-min);width:var(--touch-btn);height:var(--touch-btn);font:800 15px var(--font-display);color:#fff;border:3px solid var(--candy-cream);background:#3b2a63b3;border-radius:50%}.touch-btn:active{background:var(--candy-pink)}.touch-btn--drift{width:calc(var(--touch-btn) * 1.2);height:calc(var(--touch-btn) * 1.2);background:#ff4f9acc}.touch-btn--item{color:var(--candy-grape);background:#3ddbb1d9}.touch-btn--small{width:auto;height:var(--touch-min);border-radius:999px;grid-column:1/3;padding:0 16px}.touch-btn--small[aria-pressed=true]{background:var(--candy-mint);color:var(--candy-grape)}.hud__mute{top:max(12px, var(--ogp-safe-top-inset));background:var(--candy-cream);min-width:44px;min-height:44px;color:var(--candy-grape);pointer-events:auto;cursor:pointer;border:0;border-radius:999px;font-size:20px;position:absolute;left:50%;transform:translate(-50%)}