#swim{position:absolute;inset:0;background:linear-gradient(#09141bed,#0a1c26f5);padding:30px max(25px,8vw);z-index:20;overflow:auto}#swim[hidden]{display:none}.racehead{display:flex;justify-content:space-between;align-items:center}.racehead h2{font:normal 38px Georgia,serif;margin:12px 0 24px}.raceboard{position:relative;border:1px solid #79949c66;box-shadow:0 15px 60px #0008}#raceCanvas{width:100%;height:clamp(220px,40vh,420px);display:block;image-rendering:pixelated}#raceMessage{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;pointer-events:none;color:#f2e8cc;font-size:clamp(20px,3vw,40px);text-shadow:0 3px 14px #000;text-align:center;padding:20px}.raceinfo{display:flex;justify-content:space-between;align-items:center;padding:22px 0;font-size:12px;color:#b8c8c5}.raceinfo strong{font-size:28px;color:#edddbc;font-weight:normal}.rhythm{max-width:500px;margin:0 auto;text-align:center}.track{position:relative;height:15px;background:#34464b;border:1px solid #81988d55}.sweet{position:absolute;left:40%;width:20%;height:100%;background:#d0bd81}#needle{position:absolute;left:0;top:-4px;bottom:-4px;width:3px;background:#faf0d5}.rhythm p{font-size:12px;color:#d7c8a8}.racecontrols{display:flex;justify-content:center;gap:12px;margin:22px 0}.racecontrols button{min-width:145px}#raceStart{background:#c8b383;color:#15252a}#raceStart:disabled{opacity:.4}#raceHelp{text-align:center;color:#9bafaf;font-size:12px;line-height:1.8}@media(max-width:700px){#swim{padding:18px 15px}.racehead h2{font-size:25px}.racehead button{padding:10px;font-size:10px}.raceinfo{font-size:9px}.raceinfo strong{font-size:23px}.racecontrols{gap:6px}.racecontrols button{min-width:0;flex:1;padding:14px 5px;font-size:11px}}
#swim{padding:18px max(22px,6vw);background:radial-gradient(ellipse at 50% 30%,#203b47,#08131bf7 80%)}
.racehead h2{font-size:30px;margin:7px 0 14px}.racehead small{color:#b9c5bf;font-size:10px;letter-spacing:2px}
.raceboard{width:min(100%,calc(60vh * 1.777));max-width:1400px;margin:auto;border-color:#779da54d;box-shadow:0 18px 70px #000a}
#raceCanvas{height:auto;aspect-ratio:1672 / 941;width:100%;max-height:none}
#raceMessage{inset:23% 8% auto;font-size:clamp(17px,2vw,28px);padding:12px 18px;background:#08151bbd;border:1px solid #b3bba433;backdrop-filter:blur(3px);line-height:1.5}
#raceMessage:empty{display:none}.raceinfo{max-width:1200px;margin:auto;padding:12px 0}.racecontrols{margin:12px 0}.rhythm p{margin:8px 0}#raceHelp{margin:8px 0}
@media(max-width:700px){#swim{padding:16px 12px}.raceboard{width:100%}.racehead h2{font-size:23px}#raceMessage{inset:14% 5% auto;font-size:15px;padding:8px}.raceinfo strong{font-size:23px}}
#belaReaction{position:absolute;right:3%;top:6%;max-width:200px;width:24%;padding:12px;background:#102025e8;border:1px solid #c6ad79;text-align:center;pointer-events:none}#belaReaction img{display:block;height:clamp(90px,20vh,200px);max-width:100%;object-fit:contain;margin:auto}#belaReaction p{font:12px/1.5 Georgia,serif;color:#e8d7ae;margin:8px 0 0}@media(max-width:600px){#belaReaction{width:32%;padding:6px}#belaReaction img{height:80px}#belaReaction p{font-size:10px}}