:root{--ink: #2a1f33;--sun: #ffcc33;--go: #3fb950;--red: #e8453c}html,body{margin:0;height:100%;overflow:hidden;background:#9fd8ff;color:var(--ink);font:15px/1.3 system-ui,sans-serif;user-select:none}canvas#c{display:block;width:100vw;height:100vh}#labels,#game{position:absolute;inset:0;pointer-events:none}[hidden]{display:none!important}#loading{position:absolute;inset:0;display:grid;place-items:center;font-weight:800;font-size:22px}.card{background:#fff;border:4px solid var(--ink);border-radius:22px;box-shadow:0 6px 0 var(--ink);padding:18px 22px}button{font:800 14px system-ui,sans-serif;color:var(--ink);background:var(--sun);border:3px solid var(--ink);border-radius:12px;padding:7px 14px;cursor:pointer;box-shadow:0 3px 0 var(--ink);pointer-events:auto}button:hover{filter:brightness(1.06)}button:active{transform:translateY(2px);box-shadow:0 1px 0 var(--ink)}button.big{font-size:17px;padding:11px 20px}button.go{background:var(--go);color:#fff;text-shadow:0 2px 0 var(--ink)}input{font:700 15px system-ui,sans-serif;color:var(--ink);border:3px solid var(--ink);border-radius:10px;padding:6px 10px;outline:none}#menu{position:absolute;inset:0;display:grid;place-items:center;background:#2a1f3340;overflow:auto}#menu .card{width:min(760px,94vw)}h1{margin:0 0 12px;font-size:44px;font-weight:900;letter-spacing:-1px;color:var(--red);text-shadow:0 4px 0 var(--ink);-webkit-text-stroke:2px var(--ink)}h1 span{color:var(--sun)}.field{display:flex;align-items:center;gap:10px;font-weight:800;margin-bottom:12px}.field input{flex:1;max-width:260px}.label{font-weight:800;margin-bottom:6px}#cast{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin-bottom:14px}.pick{display:flex;flex-direction:column;align-items:center;gap:2px;padding:6px 4px 8px;background:#f4f0fa;font-weight:700;box-shadow:0 3px 0 var(--ink)}.pick img{width:96px;height:96px}.pick b{font-size:15px}.pick span{font-size:11px;font-weight:600;opacity:.7;text-align:center}.pick.on{background:var(--sun);transform:translateY(-2px);box-shadow:0 5px 0 var(--ink)}.buttons{display:flex;gap:10px;justify-content:center;align-items:center;margin-top:8px;flex-wrap:wrap}.buttons.small input{width:70px;text-align:center;letter-spacing:3px}#menu-error{color:var(--red);font-weight:800;text-align:center;min-height:20px;margin-top:8px}.volume{display:flex;gap:14px;justify-content:center;align-items:center;margin-top:10px;font-weight:700;font-size:13px}.volume label{display:flex;align-items:center;gap:6px}.volume input[type=range]{width:110px;accent-color:var(--red);border:none;padding:0}.volume button{padding:3px 10px;font-size:12px}.volume button.on{background:var(--red);color:#fff}.small-btn{padding:2px 10px;font-size:12px;margin-left:8px;box-shadow:0 2px 0 var(--ink)}#custom{position:absolute;inset:0;display:grid;place-items:center;background:#2a1f3373;overflow:auto}#custom .cas{position:relative;display:flex;gap:18px;align-items:stretch;max-width:96vw}#custom .stage{position:relative}#custom .stage canvas{width:420px;height:460px;display:block;background:linear-gradient(#e8f6ff,#cfeaff);border:3px solid var(--ink);border-radius:16px;cursor:grab;touch-action:none}#custom .stage canvas:active{cursor:grabbing}#custom .stage .hint{position:absolute;bottom:10px;left:0;right:0;text-align:center;font-size:12px;font-weight:700;opacity:.6;pointer-events:none}#custom .side{width:430px;display:flex;flex-direction:column;gap:10px}#custom h2{margin:0}#custom .tabs{display:flex;gap:6px}#custom .tabs button{background:#f4f0fa}#custom .tabs button.on{background:var(--sun);transform:translateY(-2px);box-shadow:0 5px 0 var(--ink)}#custom .tiles{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;max-height:300px;overflow-y:auto;overflow-x:hidden;padding:4px 4px 8px}#custom .tile{display:flex;flex-direction:column;align-items:center;padding:4px;background:#f4f0fa;box-shadow:0 3px 0 var(--ink)}#custom .tile img{width:84px;height:84px}#custom .tile span{font-size:11px;font-weight:700;text-align:center;line-height:1.1;min-height:24px}#custom .tile.on{background:var(--sun);outline:3px solid var(--ink);outline-offset:1px}#custom .paints{display:flex;gap:8px;flex-wrap:wrap;min-height:34px}#custom .paint{display:flex;align-items:center;gap:6px;background:#fff}#custom .paint i{width:20px;height:20px;border-radius:50%;border:2px solid var(--ink);display:inline-block}#custom .extra{display:flex;align-items:center;gap:8px;font-weight:800;min-height:4px}#custom .extra .name{margin-right:4px}#custom .extra .name.gap{margin-left:18px}#custom .extra b{min-width:28px;text-align:center}#custom .extra .step{padding:0 10px;font-size:16px}#custom .extra .toggle.on{background:var(--go);color:#fff}#custom .side .buttons{margin-top:auto;justify-content:flex-end}#custom .palette{position:absolute;z-index:2;background:#fff;border:3px solid var(--ink);border-radius:14px;padding:8px 10px;box-shadow:0 4px 0 var(--ink)}#custom .palette .title{font-weight:800;font-size:12px;margin-bottom:6px}#custom .palette .swatches{display:grid;grid-template-columns:repeat(6,26px);gap:6px}#custom .swatch{width:26px;height:26px;padding:0;border-radius:50%;box-shadow:none;border-width:2px}#custom .swatch.on{outline:3px solid var(--ink);outline-offset:2px}#pause{position:absolute;inset:0;display:grid;place-items:center;background:#2a1f3359}#pause h2{margin:0 0 8px;text-align:center}#pause-info{text-align:center;margin-bottom:6px;opacity:.75}.kart-label{position:absolute;transform:translate(-50%,-100%);font:800 13px system-ui,sans-serif;color:#fff;text-shadow:0 2px 0 var(--ink),2px 0 0 var(--ink),-2px 0 0 var(--ink),0 -2px 0 var(--ink);white-space:nowrap}#hud{position:absolute;inset:0;pointer-events:none}#hud .timer{position:absolute;top:14px;left:50%;transform:translate(-50%);font:900 34px system-ui,sans-serif;color:#fff;-webkit-text-stroke:2px var(--ink);text-shadow:0 4px 0 var(--ink)}#hud .timer.hurry{color:var(--red);animation:pulse .5s infinite alternate}@keyframes pulse{to{transform:translate(-50%) scale(1.12)}}#hud .scores{position:absolute;top:14px;left:14px;display:flex;flex-direction:column;gap:3px}#hud .row{display:flex;gap:8px;align-items:center;background:#fff;border:3px solid var(--ink);border-radius:10px;padding:2px 10px;font-weight:800;min-width:170px;box-shadow:0 2px 0 var(--ink)}#hud .row.me{background:var(--sun)}#hud .row .pos{width:16px;opacity:.6}#hud .row .name{flex:1}#hud .item{position:absolute;top:14px;right:14px;width:92px;height:92px;background:#ffffffbf;border:4px solid var(--ink);border-radius:20px;box-shadow:0 4px 0 var(--ink);display:grid;place-items:center}#hud .item.full{background:#fff}#hud .item.pop{animation:pop .35s}#hud .item.rolling svg{filter:blur(.6px);opacity:.85}@keyframes pop{40%{transform:scale(1.25)}}#hud .item .slot{display:flex;flex-direction:column;align-items:center;font-weight:800;font-size:12px}#hud .item svg{width:56px;height:56px}#hud .item .key{position:absolute;bottom:-24px;font-size:11px;font-weight:800;opacity:.7}#hud .feed{position:absolute;top:140px;right:14px;display:flex;flex-direction:column;gap:4px;align-items:flex-end}#hud .feed .line{background:#ffffffe6;border:3px solid var(--ink);border-radius:10px;padding:2px 10px;font-weight:700;transition:opacity 1s}#hud .feed .line.mine{background:var(--sun)}#hud .feed .line.old{opacity:0}#hud .feed i{font-style:normal;opacity:.6;font-size:12px}#hud .center{position:absolute;top:30%;left:0;right:0;text-align:center}#hud .center .msg{display:inline-block;font:900 46px system-ui,sans-serif;color:#fff;-webkit-text-stroke:2px var(--ink);text-shadow:0 5px 0 var(--ink);animation:pop .4s}#hud .center .msg.ko{color:var(--sun)}#hud .center .msg.out{color:var(--red);font-size:34px}#hud .center .msg.go{color:var(--go);font-size:64px}#hud .center .msg.count{color:var(--sun);font-size:96px}#hud .center .msg.sub{font-size:26px}#hud .center small{display:block;font-size:20px}#hud .results{position:absolute;inset:0;display:grid;place-items:center}#hud .results .card{min-width:300px}#hud .results h2{margin:0 0 10px;text-align:center;font-size:28px}#hud .results .row{margin-bottom:4px}#hud .results p{text-align:center;margin:10px 0 0;font-weight:700}#hud .info{position:absolute;bottom:12px;left:14px;background:#ffffffd9;border:3px solid var(--ink);border-radius:10px;padding:3px 10px;font-weight:700;font-size:13px}#hud .info button{padding:1px 8px;font-size:12px;box-shadow:none}#hud .health{position:absolute;bottom:14px;left:50%;transform:translate(-50%);display:flex;align-items:center;gap:10px;background:#fff;border:4px solid var(--ink);border-radius:18px;box-shadow:0 4px 0 var(--ink);padding:4px 14px;font-weight:900;font-size:17px}#hud .health .hearts{display:flex;gap:4px}#hud .health .heart{width:36px;height:36px}#hud .health.hurt{animation:hurt .4s}#hud .health.low .heart:first-child{animation:beat .6s infinite}@keyframes hurt{20%,60%{transform:translate(calc(-50% - 8px))}40%,80%{transform:translate(calc(-50% + 8px))}}@keyframes beat{50%{transform:scale(1.18)}}.heart{position:relative;display:inline-block;width:16px;height:16px}.heart svg{position:absolute;left:0;top:0;width:100%;height:100%}.heart .fill{position:absolute;left:0;top:0;height:100%;overflow:hidden}.heart .fill svg{width:auto;aspect-ratio:1;height:100%}.kart-label .hearts{display:flex;justify-content:center;gap:1px;margin-top:1px}#hud .help{position:absolute;bottom:14px;right:14px;font-size:12px;font-weight:700;opacity:.75;color:var(--ink)}#touchlayer,#touch{position:absolute;inset:0;pointer-events:none}#touch .zone{position:absolute;left:0;top:0;bottom:0;width:48%;pointer-events:auto;touch-action:none}#touch .stick{position:absolute;width:120px;height:120px;margin:-60px 0 0 -60px;border-radius:50%;display:none;background:#ffffff47;border:4px solid var(--ink);pointer-events:none}#touch .stick.on{display:block}#touch .knob{position:absolute;left:50%;top:50%;width:56px;height:56px;margin:-28px 0 0 -28px;border-radius:50%;background:#fff;border:4px solid var(--ink);box-shadow:0 3px 0 var(--ink)}#touch .tbtn{position:absolute;pointer-events:auto;touch-action:none;border-radius:50%;padding:0;font-weight:900;-webkit-tap-highlight-color:transparent;user-select:none}#touch .tbtn.down{transform:translateY(3px) scale(.95);box-shadow:0 1px 0 var(--ink)}#touch .fire{right:26px;bottom:112px;width:96px;height:96px;background:var(--red);color:#fff;font-size:18px;text-shadow:0 2px 0 var(--ink)}#touch .drift{right:138px;bottom:34px;width:82px;height:82px;background:var(--sun);font-size:15px}#touch .brake{right:30px;bottom:26px;width:66px;height:66px;background:#fff;font-size:12px}#touch .pause{top:12px;left:calc(50% + 74px);width:46px;height:46px;border-radius:12px;font-size:16px;background:#fff}#touch .rotate{display:none;position:fixed;inset:0;place-items:center;background:#2a1f33d9;color:#fff;font:900 24px system-ui,sans-serif;text-align:center;padding:24px;pointer-events:auto}@media(orientation:portrait){#touch .rotate{display:grid}}body.touch #hud .help,body.touch #hud .item .key{display:none}@media(max-width:920px),(max-height:560px){#custom .stage canvas{width:280px;height:300px}#custom .side{width:360px}#custom .tile img{width:60px;height:60px}#custom .tiles{max-height:190px}}@media(max-height:560px){.card{padding:10px 14px}h1{font-size:28px;margin-bottom:6px}.field{margin-bottom:6px}#cast{grid-template-columns:repeat(8,1fr);gap:5px;margin-bottom:6px}.pick{padding:3px 2px 5px}.pick img{width:62px;height:62px}.pick b{font-size:12px}.pick span{display:none}button.big{font-size:15px;padding:7px 14px}.buttons{margin-top:4px}.volume{margin-top:6px}#custom .cas{gap:10px}#custom .stage canvas{width:250px;height:270px}#custom .stage .hint{display:none}#custom .side{gap:6px;width:380px}#custom h2{font-size:17px}#custom .tabs button{padding:4px 9px;font-size:13px}#custom .tiles{max-height:128px;gap:5px}#custom .tile img{width:48px;height:48px}#custom .tile span{font-size:10px;min-height:0}#custom .paint{padding:4px 9px;font-size:12px}#custom .side .buttons{margin-top:0}#custom .side .buttons button{padding:5px 12px;font-size:13px}}