
.game-wrap{position:relative;color:#202b43;background:#fff;min-width:0;container-type:inline-size}
.game-wrap .race-stats{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px;padding:12px;background:#edf2fb}
.game-wrap .race-stat{min-width:0;background:#fff;border:1px solid #8996ad;border-radius:9px;padding:8px 10px}
.game-wrap .race-stat span{display:block;font-size:15px;line-height:1.5;color:#47556e;font-weight:700}
.game-wrap .race-stat strong{display:block;font:700 21px/1.6 system-ui,sans-serif;color:#15233c;font-variant-numeric:tabular-nums;white-space:nowrap}
.game-wrap .race-distance{grid-column:1/-1;display:flex;justify-content:space-between;align-items:center;border-top:1px solid #8796b0;padding-top:6px;font-size:18px;font-weight:700;color:#253750}.game-wrap .race-distance strong{font:700 21px/1.5 system-ui,sans-serif;color:#15233c}
.game-wrap .race-canvas{display:block;width:100%;height:clamp(280px,46vh,520px);max-height:none;object-fit:fill;background:#101b31;touch-action:none;aspect-ratio:auto}
.game-wrap .race-meters{display:grid;grid-template-columns:1fr 1fr;gap:12px;padding:12px;background:#eef3fc}
.game-wrap .race-meter{font-size:17px;font-weight:700;color:#253750}
.game-wrap .race-meter>span{display:flex;justify-content:space-between;gap:8px}
.game-wrap .race-meter progress{display:block;width:100%;height:13px;margin-top:7px;accent-color:#087d59;border-radius:9px;border:1px solid #5f728f;background:#d4dfeb}
.game-wrap .race-meter progress::-webkit-progress-bar{background:#d4dfeb}
.game-wrap .race-meter progress::-webkit-progress-value{background:#087d59}
.game-wrap .race-meter:last-child progress::-webkit-progress-value{background:#6240b2}
.game-wrap .race-controls,.game-wrap .game-actions{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;padding:10px 12px 0;margin:0}
.game-wrap .race-controls button,.game-wrap .game-actions button{font:700 18px/1.5 system-ui,sans-serif;min-height:56px;padding:10px 8px;border:2px solid #6b7891;border-radius:10px;background:#fff;color:#22324d;white-space:normal;word-break:keep-all}
.game-wrap .race-controls button{touch-action:none;user-select:none}
.game-wrap .race-controls button:active{background:#dbe8fa;border-color:#224a85}
.game-wrap .race-controls button:last-child{background:#6240b2;border-color:#6240b2;color:#fff}
.game-wrap .game-actions button{font-size:16px;min-height:52px;background:#f4f6fb}
.game-wrap .game-help{font-size:16px;line-height:1.8;color:#46516b;padding:12px;margin:0;text-align:center}
.game-wrap .game-result{position:absolute;top:18%;left:4%;right:4%;background:#101d35f5;color:#fff;border:2px solid #d5c7ff;border-radius:16px;padding:22px;box-shadow:0 10px 30px #06112580;text-align:center;z-index:1}
.game-wrap .game-result h3{color:#fff;font-size:26px;line-height:1.6}
.game-wrap .game-result p{color:#e8efff;font-size:19px;line-height:1.8;margin:12px 0}
.game-wrap .game-result button{font-size:20px;min-height:56px;background:#fff;color:#22324d;border:2px solid #aab9d1;padding:10px 18px;border-radius:10px}
.game-wrap .game-result[hidden]{display:none!important}
.game-wrap button:focus-visible,.game-wrap canvas:focus-visible{outline:4px solid #e49b06;outline-offset:3px}
#welcome-preview .race-stats,#welcome-preview .race-meters{display:none}
#welcome-preview .race-canvas{height:300px;max-height:none}
@media(min-width:1200px){.game-wrap .race-controls{grid-template-columns:repeat(4,minmax(0,1fr))}}
@media(max-width:600px){.game-wrap .race-stats{grid-template-columns:repeat(2,minmax(0,1fr))}.game-wrap .race-stat strong{font-size:21px}.game-wrap .race-canvas{height:clamp(280px,42vh,410px)}.game-wrap .race-meter{font-size:16px}.game-wrap .game-result h3{font-size:23px}.game-wrap .game-result p{font-size:18px}}
@media(max-width:380px){.game-wrap .race-meter>span{flex-direction:column;align-items:flex-start;gap:0}.game-wrap .race-stat strong{font-size:20px}.game-wrap .race-controls button{font-size:17px}}
@container(max-width:560px){.game-wrap .race-stats{grid-template-columns:repeat(2,minmax(0,1fr))}.game-wrap .race-controls{grid-template-columns:repeat(2,minmax(0,1fr))}}
@container(max-width:360px){.game-wrap .race-meter>span{flex-direction:column;align-items:flex-start;gap:0}.game-wrap .race-stat strong{font-size:20px}}
@media(max-height:500px) and (min-width:480px) and (max-width:960px){.game-wrap{display:grid;grid-template-columns:minmax(0,1fr) 170px;grid-template-areas:'stats stats' 'world controls' 'meters meters' 'actions actions' 'help help'}.game-wrap .race-stats{grid-area:stats;grid-template-columns:repeat(4,minmax(0,1fr))}.game-wrap .race-canvas{grid-area:world;height:260px}.game-wrap .race-controls{grid-area:controls;grid-template-columns:1fr;padding-top:0;gap:6px}.game-wrap .race-controls button{min-height:56px;font-size:18px}.game-wrap .race-meters{grid-area:meters}.game-wrap .game-actions{grid-area:actions;grid-template-columns:repeat(4,minmax(0,1fr))}.game-wrap .game-help{grid-area:help}.game-wrap .game-result{grid-column:1/-1}}
.large-text .game-wrap .race-controls button,.large-text .game-wrap .game-actions button{font-size:22px}.large-text .game-wrap .race-stat strong{font-size:25px}
@container(max-width:360px){.large-text .game-wrap .race-stats{grid-template-columns:1fr}}
