/* Интерфейс игровых областей «Кибергонки». --u — единица размера, зависит от области; --pc — цвет игрока. */
.rh { position: absolute; overflow: hidden; pointer-events: none; color: #fff; font: 700 calc(var(--u) * 2.6)/1.2 system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif; box-shadow: inset 0 0 0 2px #05070c; text-shadow: 0 1px 3px rgba(0, 0, 0, .9); --u: 8px; }
.rh-flash { position: absolute; inset: 0; opacity: 0; mix-blend-mode: screen; }
.rh-top { position: absolute; left: calc(var(--u) * 2); top: calc(var(--u) * 2); display: flex; flex-direction: column; gap: calc(var(--u) * .8); align-items: flex-start; }
.rh-badge { display: flex; align-items: center; gap: calc(var(--u) * 1); background: rgba(5, 8, 14, .72); border-left: calc(var(--u) * .9) solid var(--pc); border-radius: calc(var(--u) * .8); padding: calc(var(--u) * .6) calc(var(--u) * 1.4) calc(var(--u) * .6) calc(var(--u) * 1); }
.rh-num { display: inline-grid; place-items: center; width: calc(var(--u) * 4); height: calc(var(--u) * 4); border-radius: 50%; background: var(--pc); color: #05070c; font-size: calc(var(--u) * 2.8); text-shadow: none; }
.rh-mark { color: var(--pc); }
.rh-name { max-width: calc(var(--u) * 26); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rh-lap { background: rgba(5, 8, 14, .72); border-radius: calc(var(--u) * .8); padding: calc(var(--u) * .4) calc(var(--u) * 1.2); font-size: calc(var(--u) * 2.4); }
.rh-place { position: absolute; right: calc(var(--u) * 2.4); top: calc(var(--u) * 1.4); line-height: 1; }
.rh-place b { font-size: calc(var(--u) * 10); font-weight: 900; -webkit-text-stroke: calc(var(--u) * .35) #05070c; paint-order: stroke fill; }
.rh-place span { font-size: calc(var(--u) * 3.6); opacity: .85; }
.rh-bottom { position: absolute; left: calc(var(--u) * 2); right: calc(var(--u) * 2); bottom: calc(var(--u) * 2.6); display: flex; align-items: flex-end; gap: calc(var(--u) * 2); }
.rh-bars { display: flex; flex-direction: column; gap: calc(var(--u) * .8); width: calc(var(--u) * 30); }
.rh-bar { display: flex; align-items: center; gap: calc(var(--u) * .8); }
.rh-bar i { font-style: normal; width: calc(var(--u) * 3); text-align: center; font-size: calc(var(--u) * 2.6); }
.rh-track { flex: 1; height: calc(var(--u) * 1.8); background: rgba(5, 8, 14, .75); border: 1px solid rgba(255, 255, 255, .35); border-radius: calc(var(--u) * .9); overflow: hidden; }
.rh-fill { height: 100%; width: 50%; border-radius: inherit; transition: width .15s linear; }
.rh-bar.hp .rh-fill { background: linear-gradient(90deg, #2bd97c, #9dffb8); }
.rh-bar.hp i { color: #3ddc84; }
.rh-bar.hp.low .rh-fill { background: #ff3b4e; animation: rvBlink .5s steps(2) infinite; }
.rh-bar.hp.low i { color: #ff3b4e; }
.rh-bar.en .rh-fill { background: linear-gradient(90deg, #ffb300, #ffe680); }
.rh-bar.en i { color: #ffd23c; }
.rh-bar.en.on .rh-track { box-shadow: 0 0 calc(var(--u) * 1.6) #ffd23c; }
.rh-fx { flex: 1; font-size: calc(var(--u) * 2.5); min-height: calc(var(--u) * 3); }
.rh-fx.shield { color: #4cc3ff; }
.rh-fx.stab { color: #c77dff; }
.rh-fx.pad { color: #ffb347; }
.rh-speed { text-align: right; line-height: 1; }
.rh-speed b { font-size: calc(var(--u) * 7); font-weight: 900; font-variant-numeric: tabular-nums; -webkit-text-stroke: calc(var(--u) * .3) #05070c; paint-order: stroke fill; }
.rh-speed span { display: block; font-size: calc(var(--u) * 2); opacity: .8; }
.rh-warn { position: absolute; left: 50%; top: 21%; transform: translateX(-50%); max-width: 92%; text-align: center; white-space: nowrap; font-size: calc(var(--u) * 3.3); font-weight: 900; letter-spacing: .04em; padding: calc(var(--u) * .7) calc(var(--u) * 1.8); border-radius: calc(var(--u) * .8); background: rgba(255, 59, 78, .88); color: #fff; }
.rh-warn:empty { display: none; }
.rh-warn[data-k="rain"], .rh-warn[data-k="c"], .rh-warn[data-k="crit"] { background: rgba(255, 179, 0, .92); color: #14100a; text-shadow: none; }
.rh-warn[data-k="swipeL"], .rh-warn[data-k="swipeR"], .rh-warn[data-k="sharkGo"], .rh-warn[data-k="m"], .rh-warn[data-k="t"] { animation: rvBlink .32s steps(2) infinite; }
.rh-msg { position: absolute; left: 0; right: 0; top: 36%; text-align: center; font-weight: 900; }
.rh-msg.big { font-size: calc(var(--u) * 16); -webkit-text-stroke: calc(var(--u) * .5) #05070c; paint-order: stroke fill; }
.rh-msg.fin { font-size: calc(var(--u) * 6); color: #ffd23c; -webkit-text-stroke: calc(var(--u) * .4) #05070c; paint-order: stroke fill; }
.rh-msg.small { font-size: calc(var(--u) * 3.4); top: 62%; }
.rh-hold { position: absolute; left: 30%; right: 30%; top: 55%; height: calc(var(--u) * 4.4); background: rgba(5, 8, 14, .8); border: 1px solid #fff; border-radius: calc(var(--u) * 1); overflow: hidden; display: grid; place-items: center; font-size: calc(var(--u) * 2.2); }
.rh-hold div { position: absolute; left: 0; top: 0; bottom: 0; background: #ff8a1e; }
.rh-hold span { position: relative; }
.rh-prog { position: absolute; left: calc(var(--u) * 2); right: calc(var(--u) * 2); bottom: calc(var(--u) * .7); height: calc(var(--u) * .5); background: rgba(255, 255, 255, .28); border-radius: 99px; }
.rh-prog i { position: absolute; top: 50%; width: calc(var(--u) * 2.2); height: calc(var(--u) * 2.2); margin: calc(var(--u) * -1.1); border-radius: 50%; border: 1px solid #05070c; font: 900 calc(var(--u) * 1.5)/calc(var(--u) * 2.1) system-ui, sans-serif; text-align: center; color: #05070c; text-shadow: none; transition: left .2s linear; }
.rh-prog i.me { z-index: 2; box-shadow: 0 0 0 calc(var(--u) * .4) #fff; }
.rh-menu { position: absolute; inset: 0; display: grid; place-items: center; background: rgba(5, 8, 14, .72); }
.rh-menu[hidden], .rh-lost[hidden] { display: none; }
.rh-menu .m { background: #0e141d; border: 2px solid var(--pc); border-radius: calc(var(--u) * 1.6); padding: calc(var(--u) * 2.4); min-width: 58%; font-size: calc(var(--u) * 2.8); text-shadow: none; }
.rh-menu h3 { margin: 0 0 calc(var(--u) * 1.6); font-size: calc(var(--u) * 3.4); }
.rh-menu .o { padding: calc(var(--u) * .9) calc(var(--u) * 1.4); border-radius: calc(var(--u) * .8); margin-top: calc(var(--u) * .6); background: rgba(255, 255, 255, .07); }
.rh-menu .o.sel { background: var(--pc); color: #05070c; }
.rh-menu small { display: block; margin-top: calc(var(--u) * 1.6); font-weight: 500; opacity: .75; font-size: calc(var(--u) * 2); }
.rh-lost { position: absolute; left: 8%; right: 8%; top: 40%; text-align: center; background: rgba(255, 59, 78, .92); border-radius: calc(var(--u) * 1.2); padding: calc(var(--u) * 1.6); font-size: calc(var(--u) * 3); white-space: pre-line; }
@keyframes rvBlink { 50% { opacity: .45; } }