.hill, .hill::backdrop { background:#a5c476; }
.hill-pad { position:absolute; z-index:2; bottom:max(20px,env(safe-area-inset-bottom)); display:flex; gap:12px; }
.hill-pad-steer { left:max(20px,env(safe-area-inset-left)); }
.hill-pad-drive { right:max(20px,env(safe-area-inset-right)); align-items:flex-end; }
.hill .hill-btn { display:grid; place-items:center; width:72px; height:72px; padding:0; border:2px solid #1d1d1b; border-radius:50%; background:#faf5e5e6; font-size:24px; font-weight:bold; touch-action:none; user-select:none; -webkit-user-select:none; -webkit-touch-callout:none; box-shadow:0 4px 0 #1d1d1b; }
.hill .hill-btn-gas { width:88px; height:88px; background:#2f6db5; color:#fff!important; font-size:20px; }
.hill .hill-btn-brake { font-size:12px; line-height:1.1; text-align:center; background:#e9d9a8; }
.hill .hill-btn.is-held { transform:translateY(3px); box-shadow:0 1px 0 #1d1d1b; }
.hill-restart { position:absolute; z-index:2; padding:0; right:max(80px,calc(env(safe-area-inset-right) + 80px)); top:max(20px,env(safe-area-inset-top)); }
.hill[data-phase="done"] .hill-restart { width:64px; height:64px; right:calc(50% - 32px); top:calc(20% + 84px); }
@media(any-hover:hover) and (pointer:fine) { .hill-pad { opacity:.55; } }
@media(max-height:450px) { .hill-pad { bottom:10px; } .hill .hill-btn { width:60px; height:60px; } .hill .hill-btn-gas { width:72px; height:72px; } .hill-restart { top:12px; right:72px; } }