/* «Кибергонка» на телефоне: пульт и свой игровой экран. Крупные кнопки, без прокрутки и выделения во время гонки. */
html.race-lock, html.race-lock body { background: #070a10; color: #eaf2ff; }
html.race-lock body { margin: 0; padding: 0; max-width: none; }
html.race-lock body > h1 { display: none; }
#remote.race-remote { background: #070a10; border: 0; border-radius: 0; margin: 0; --pc: #2ee6ff; font: 16px/1.4 system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif; color: #eaf2ff; min-height: 100dvh; display: flex; flex-direction: column; padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left); -webkit-tap-highlight-color: transparent; }
.race-remote.playing { position: fixed; inset: 0; overflow: hidden; touch-action: none; user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; overscroll-behavior: none; }
.rr-head { display: flex; align-items: center; gap: 8px; padding: 8px 12px; background: rgba(10, 15, 24, .9); border-bottom: 2px solid var(--pc); position: relative; z-index: 3; }
.rr-who { display: flex; align-items: center; gap: 8px; font-weight: 800; flex: 1; min-width: 0; }
.rr-n { width: 30px; height: 30px; border-radius: 50%; background: var(--pc); color: #05070c; display: grid; place-items: center; flex: none; }
.rr-mark { color: var(--pc); }
.rr-conn { color: #ff5a6a; font-weight: 700; font-size: 14px; }
.rr-leave, .rr-mini { font: inherit; font-size: 13px; padding: 6px 10px; border-radius: 8px; border: 1px solid rgba(120, 200, 255, .3); background: rgba(255, 255, 255, .08); color: #eaf2ff; }
.rr-body { flex: 1; padding: 12px; display: flex; flex-direction: column; gap: 12px; position: relative; z-index: 2; min-height: 0; }
.race-remote.playing .rr-body { padding: 6px; }
.rr-stage, .rr-hud { position: fixed; inset: 0; }
.rr-stage { z-index: 0; }
.rr-hud { z-index: 1; pointer-events: none; }
.rr-canvas { width: 100%; height: 100%; display: block; }
.rr-card { background: rgba(14, 20, 30, .92); border: 1px solid rgba(120, 200, 255, .22); border-radius: 14px; padding: 12px 14px; }
.rr-card h3 { margin: 0 0 6px; font-size: 17px; }
.rr-card p { margin: 6px 0; }
.rr-muted { color: #9db0c7; font-size: 14px; }
.rr-btn { display: block; width: 100%; font: inherit; font-weight: 800; padding: 13px; margin-top: 8px; border-radius: 12px; border: 0; background: #2ee6ff; color: #05070c; text-align: center; text-decoration: none; box-sizing: border-box; }
.rr-btn.big { font-size: 21px; padding: 18px; background: linear-gradient(90deg, #ff8a1e, #ffd23c); }
.rr-btn.big.ok { background: #3ddc84; }
.rr-btn.ghost { background: rgba(255, 255, 255, .08); color: #eaf2ff; border: 1px solid rgba(120, 200, 255, .3); font-weight: 600; }
.rr-btn:disabled { opacity: .4; }
.rr-seg { display: flex; border: 1px solid rgba(120, 200, 255, .3); border-radius: 10px; overflow: hidden; margin-top: 6px; }
.rr-seg button { flex: 1; font: inherit; padding: 10px 6px; border: 0; background: transparent; color: #eaf2ff; }
.rr-seg button.sel { background: #2ee6ff; color: #05070c; font-weight: 800; }
.rr-row { display: flex; align-items: center; gap: 10px; margin-top: 8px; }
.rr-row input[type=range] { flex: 1; min-width: 0; }
.rr-row input[type=checkbox] { width: 22px; height: 22px; }
.rr-row b { min-width: 44px; text-align: right; }
.rr-tilt-state.on { color: #3ddc84; }
.rr-tilt-state.denied, .rr-tilt-state.nosensor, .rr-tilt-state.insecure { color: #ffd23c; }
.rr-tiltbar { position: relative; height: 16px; border-radius: 99px; background: rgba(255, 255, 255, .12); margin: 10px 0 4px; }
.rr-tiltbar::before { content: ''; position: absolute; left: 50%; top: -3px; bottom: -3px; width: 2px; background: rgba(255, 255, 255, .5); }
.rr-tiltbar i { position: absolute; top: -4px; left: 50%; width: 24px; height: 24px; margin-left: -12px; border-radius: 50%; background: var(--pc); box-shadow: 0 0 10px var(--pc); }
.rr-note { position: fixed; left: 10px; right: 10px; bottom: calc(10px + env(safe-area-inset-bottom)); z-index: 9; background: #0e141d; border: 1px solid #2ee6ff; border-radius: 12px; padding: 10px 14px; font-weight: 600; }
.rr-note[hidden] { display: none; }
.rr-res { display: flex; gap: 10px; padding: 7px 0; border-top: 1px solid rgba(120, 200, 255, .18); }
.rr-res b { width: 26px; font-size: 20px; }
.rr-res span:nth-child(2) { flex: 1; }
.rr-res.me { color: var(--pc); font-weight: 800; }

/* пульт: статус сверху, две колонки кнопок, служебная строка снизу */
.rr-pad { flex: 1; display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: auto 1fr auto; gap: 8px; min-height: 0; position: relative; }
.rr-status { grid-column: 1 / -1; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; background: rgba(14, 20, 30, .82); border-radius: 12px; padding: 6px 12px; }
.rr-place { font-size: 30px; font-weight: 900; color: var(--pc); }
.rr-lap { font-weight: 700; }
.rr-bars { flex: 1; min-width: 120px; display: flex; flex-direction: column; gap: 4px; }
.rr-bar { display: flex; align-items: center; gap: 6px; }
.rr-bar i { font-style: normal; width: 18px; text-align: center; }
.rr-bar.hp i { color: #3ddc84; } .rr-bar.en i { color: #ffd23c; }
.rr-track { flex: 1; height: 12px; background: rgba(255, 255, 255, .12); border-radius: 99px; overflow: hidden; }
.rr-fill { height: 100%; width: 50%; border-radius: inherit; transition: width .15s linear; }
.rr-bar.hp .rr-fill { background: #3ddc84; } .rr-bar.hp.low .rr-fill { background: #ff3b4e; } .rr-bar.en .rr-fill { background: #ffd23c; }
.rr-fx { font-weight: 800; color: #4cc3ff; }
.rr-warn { position: absolute; left: 4%; right: 4%; top: 64px; z-index: 4; text-align: center; background: rgba(255, 59, 78, .94); border-radius: 10px; padding: 8px; font-weight: 900; font-size: 18px; pointer-events: none; }
.rr-warn[hidden] { display: none; }
.rr-col { display: flex; flex-direction: column; gap: 8px; min-height: 0; }
.rr-arrows { display: flex; gap: 8px; flex: 1; min-height: 0; }
.rr-key { flex: 1; min-height: 64px; font: 900 20px system-ui, sans-serif; border-radius: 16px; border: 2px solid rgba(255, 255, 255, .3); background: rgba(20, 28, 42, .82); color: #fff; touch-action: none; }
.rr-key.down { transform: scale(.97); filter: brightness(1.5); border-color: #fff; }
.rr-key.gas { flex: 1.3; background: rgba(34, 150, 84, .85); font-size: 26px; }
.rr-key.gas.auto { background: rgba(34, 150, 84, .4); }
.rr-key.brake { flex: 1.3; background: rgba(190, 44, 58, .85); font-size: 24px; }
.rr-key.boost { background: rgba(196, 150, 10, .88); font-size: 16px; }
.rr-key.man { background: rgba(116, 70, 190, .88); font-size: 16px; }
.rr-tiltzone { flex: 1; display: flex; flex-direction: column; justify-content: center; gap: 8px; background: rgba(14, 20, 30, .7); border-radius: 16px; padding: 10px 14px; text-align: center; font-weight: 700; }
.rr-stick { flex: 1; min-height: 64px; position: relative; border-radius: 16px; border: 2px solid rgba(255, 255, 255, .3); background: rgba(20, 28, 42, .82); touch-action: none; }
.rr-stick i { position: absolute; top: 50%; left: 50%; width: 56px; height: 56px; margin: -28px; border-radius: 50%; background: var(--pc); }
.rr-foot { grid-column: 1 / -1; display: flex; gap: 6px; flex-wrap: wrap; justify-content: center; }
.race-remote.viewmode .rr-head { background: none; border: 0; justify-content: center; padding: 4px; }
.race-remote.viewmode .rr-who { display: none; }
.race-remote.viewmode .rr-leave { opacity: .7; }
.race-remote.viewmode .rr-hud, .race-remote.viewmode .rr-stage { bottom: 44vh; }
.race-remote.viewmode .rr-status { display: none; }
.race-remote.viewmode .rr-key, .race-remote.viewmode .rr-stick, .race-remote.viewmode .rr-tiltzone { background-color: rgba(20, 28, 42, .35); opacity: .85; }
.race-remote.viewmode .rr-pad { grid-template-rows: 1fr 34vh auto; }
.race-remote.viewmode .rr-col { grid-row: 2; }
.race-remote.viewmode .rr-foot { grid-row: 3; }
.race-remote.viewmode .rr-warn { display: none; }
.rr-foot { align-items: center; }
@media (orientation: landscape) { .rr-key { min-height: 44px; } .rr-warn { top: 54px; } .race-remote.viewmode .rr-hud, .race-remote.viewmode .rr-stage { bottom: 0; } .race-remote.viewmode .rr-pad { grid-template-rows: 1fr 46vh auto; } .race-remote.viewmode .rr-key { opacity: .6; } }

.race-remote button { margin: 0; }
.race-remote .rr-key, .race-remote .rr-seg button { border-color: rgba(255, 255, 255, .3); }