.snail-race { box-sizing:border-box; position:fixed; inset:0; width:100%; max-width:none; height:100%; height:100dvh; max-height:none; margin:0; padding:0; border:0; background:#dce8c8; color:#293e2a; font-family:system-ui,sans-serif; overflow:hidden; }
.snail-race::backdrop { background:#dce8c8; }
.race-field, .race-field canvas { position:absolute; inset:0; display:block; width:100%; height:100%; }
.snail-race button { font:inherit; cursor:pointer; color:inherit; -webkit-tap-highlight-color:transparent; }
.race-close, .race-restart { display:grid; place-items:center; width:48px; height:48px; border:1px solid #65734c55; border-radius:50%; background:#faf5e5e6; font-size:28px!important; }
.race-close { position:absolute; z-index:2; padding:0; right:max(20px,env(safe-area-inset-right)); top:max(20px,env(safe-area-inset-top)); }
.race-close svg { display:block; }
.race-controls { position:absolute; z-index:2; bottom:max(20px,env(safe-area-inset-bottom)); left:0; right:0; display:flex; justify-content:center; align-items:center; gap:12px; }
.race-go { display:flex; align-items:center; justify-content:center; gap:12px; min-width:210px; border:2px solid #294b32; border-radius:40px; padding:12px 22px; background:#294b32; color:#fff!important; touch-action:none; user-select:none; -webkit-user-select:none; box-shadow:0 4px 0 #203825; }
.race-go:active { transform:translateY(3px); box-shadow:0 1px 0 #203825; }
.race-go:disabled { display:none; }
.snail-race[data-phase="won"] .race-restart, .snail-race[data-phase="lost"] .race-restart { width:64px; height:64px; }
.snail-race button:focus-visible { outline:3px solid #bd5a30; outline-offset:4px; }
.race-sr-only { position:absolute; width:1px; height:1px; margin:-1px; padding:0; overflow:hidden; clip-path:inset(50%); white-space:nowrap; }
@media(max-height:450px) { .race-controls { bottom:10px; } .race-go { padding:8px 18px; } .race-close { top:12px; right:12px; } }