:root {
  --gold1: #fff3b0;
  --gold2: #ffd34a;
  --gold3: #c4861a;
  --cyan: #46e0ff;
  --panel: rgba(14, 10, 20, 0.84);
  --line: rgba(255, 211, 74, 0.42);
  --font: 'Russo One', Impact, 'Arial Black', sans-serif;
}
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { margin: 0; height: 100%; background: #07050a; overflow: hidden; font-family: var(--font); color: #fff; user-select: none; }
#gl { position: fixed; inset: 0; width: 100vw; height: 100vh; display: block; }

/* ---------- экраны (масштабируемый контейнер 1280×720) ---------- */
#ui { position: fixed; left: 50%; top: 50%; width: 1280px; height: 720px; transform-origin: center; pointer-events: none; z-index: 10; }
.screen { position: absolute; inset: 0; display: none; pointer-events: auto; isolation: isolate; }
.screen.on { display: block; animation: fadeIn .25s ease; }
.screen.clear { pointer-events: none; }
.screen.clear > * { pointer-events: auto; }
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
.shaded::before { content: ''; position: absolute; inset: -400px; background: rgba(8, 5, 12, .8); z-index: -1; }
.modal::before { content: ''; position: absolute; inset: -400px; background: rgba(6, 3, 10, .62); z-index: -1; }
.menu-shade { position: absolute; inset: -400px -400px -400px -400px; background: linear-gradient(90deg, rgba(8,4,12,.92) 0%, rgba(8,4,12,.75) 38%, rgba(8,4,12,0) 62%); z-index: -1; }

.btn {
  font-family: var(--font); font-size: 17px; color: #fff; cursor: pointer; border: 2px solid var(--line);
  background: linear-gradient(180deg, rgba(60,40,72,.92), rgba(24,14,34,.96)); padding: 10px 18px; border-radius: 12px;
  transition: transform .1s, filter .15s, border-color .15s; text-align: center;
}
.btn:hover:not(:disabled) { transform: translateY(-2px); filter: brightness(1.2); border-color: var(--gold2); }
.btn:active:not(:disabled) { transform: translateY(1px); }
.btn:disabled { opacity: .45; cursor: not-allowed; }
.btn.big { font-size: 24px; padding: 14px 24px; border-radius: 14px; }
.btn.gold { color: #2a1204; border-color: #fff3b0; background: linear-gradient(180deg, #fff3b0 0%, #ffd34a 45%, #e0a82a 100%); box-shadow: 0 6px 24px rgba(255, 190, 40, .3); }
.btn.danger { border-color: #ff5a5a; color: #ff9a9a; }
.btn.back { padding: 8px 14px; font-size: 15px; }
.btn.wide { width: 100%; margin-top: 10px; }
.row2 { display: flex; gap: 10px; }
.row2 .btn { flex: 1; }
.panel { background: var(--panel); border: 2px solid var(--line); border-radius: 18px; padding: 18px; backdrop-filter: blur(8px); }
.label { font-size: 12px; letter-spacing: 2px; color: #b9a98a; margin: 10px 0 6px; }
.hdr { display: flex; align-items: center; gap: 18px; padding: 18px 26px 6px; position: relative; }
.hdr h2 { margin: 0; font-size: 32px; letter-spacing: 2px; flex: 1; background: linear-gradient(180deg, #fff6c0, #ffd34a 60%, #b87a14); -webkit-background-clip: text; background-clip: text; color: transparent; filter: drop-shadow(0 2px 0 #2a1204); }
.wallet { background: rgba(0,0,0,.6); border: 2px solid var(--line); border-radius: 12px; padding: 6px 14px; color: #8dff9f; font-size: 20px; }
.wallet-float { position: absolute; right: 24px; top: 22px; }
.ava { border-radius: 50%; overflow: hidden; background: linear-gradient(135deg, #3a2a4a, #1a1222); border: 3px solid var(--gold2); display: flex; align-items: center; justify-content: center; font-size: 26px; flex: none; box-shadow: 0 4px 14px rgba(0,0,0,.5); }
.ava img { width: 100%; height: 100%; object-fit: cover; }

/* ---------- загрузка ---------- */
#s-loading { background: radial-gradient(ellipse at center, #2a1530 0%, #07050a 70%); }
.load-box { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 620px; text-align: center; }
.logo .t1 { font-size: 120px; line-height: .9; letter-spacing: 6px; background: linear-gradient(180deg, #fff6c0 0%, #ffd34a 45%, #b87a14 100%); -webkit-background-clip: text; background-clip: text; color: transparent; filter: drop-shadow(0 4px 0 #2a1204) drop-shadow(0 0 22px rgba(255,190,40,.35)); }
.logo .t2 { font-size: 34px; letter-spacing: 9px; color: #fff; text-shadow: 0 0 16px rgba(70,224,255,.6), 0 3px 0 #0a3a5a; }
.load-bar { margin: 34px auto 12px; height: 14px; border-radius: 7px; background: rgba(255,255,255,.1); overflow: hidden; border: 1px solid var(--line); }
.load-bar i { display: block; height: 100%; width: 0; background: linear-gradient(90deg, #46c8ff, #ffd34a); transition: width .2s; }
#load-text { color: #d9cdb0; font-size: 16px; }
.load-note { margin-top: 30px; font-family: Arial, sans-serif; font-size: 13px; color: #8a7f6a; }

/* ---------- свой персонаж: создание и правка (слева ник, пол, прикид; справа — машина на старте; модель на подиуме) ---------- */
.hero-panel { position: absolute; left: 26px; top: 84px; width: 340px; display: flex; flex-direction: column; }
.hero-note { font-family: Arial, sans-serif; color: #e2d8c0; font-size: 14px; line-height: 1.4; margin: 0 0 2px; }
.hero-note:empty { display: none; }
.hero-in { font-size: 20px; padding: 9px 12px; }
.hero-in.bad, .hero-in.bad:focus { border-color: #ff6a5a; box-shadow: 0 0 0 3px rgba(255,106,90,.2); }
.hero-err { font-family: Arial, sans-serif; font-size: 13px; color: #ff8a7a; margin-top: 4px; }
.hero-err:empty { display: none; }
.hero-sex .opt { flex: 1; text-align: center; padding: 9px 6px; font-size: 17px; }
.btn.hero-key { font-size: 13px; padding: 6px 10px; margin-top: 10px; align-self: flex-start; opacity: .85; }
.hero-dice { display: flex; gap: 8px; }
.hero-dice #hero-dice { flex: 1; font-size: 18px; }
.hero-dice #hero-undo { flex: none; width: 58px; padding: 6px; font-size: 22px; }
.hero-panel .hint, .hero-cars .hint { font-family: Arial, sans-serif; font-size: 13px; line-height: 1.4; color: #9a8f7a; margin: 6px 0 0; }
#hero-go { width: 100%; margin-top: 14px; }
.hero-cars { position: absolute; right: 26px; top: 84px; width: 360px; display: flex; flex-direction: column; }
.hero-cars .label { margin-top: 2px; }
.hero-carlist { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.hcar { display: flex; align-items: center; gap: 9px; padding: 8px 10px; border-radius: 12px; border: 2px solid rgba(255,255,255,.14); background: rgba(14,10,20,.85); cursor: pointer; font-size: 16px; transition: border-color .15s; }
.hcar:hover { border-color: var(--gold2); }
.hcar i { width: 14px; height: 14px; border-radius: 50%; border: 2px solid rgba(255,255,255,.55); flex: none; }
.hcar.sel { border-color: var(--gold2); background: linear-gradient(90deg, rgba(120,70,20,.9), rgba(30,16,30,.9)); }
.hero-cars h3 { margin: 10px 0 2px; font-size: 22px; color: var(--gold2); font-weight: normal; }
.evcard .nm { font-size: 20px; }
.evcard .sb { font-size: 13px; color: #c9b88a; margin-top: 2px; }
.hero-cars p, .side-panel p, .ev-detail p { font-family: Arial, sans-serif; color: #e2d8c0; font-size: 15px; line-height: 1.45; margin: 4px 0 10px; }
.hero-cars p { font-size: 14px; line-height: 1.4; margin: 2px 0 6px; }
.stat { display: flex; align-items: center; gap: 10px; margin: 6px 0; font-size: 14px; }
.stat span { width: 104px; color: #d9cdb0; }
.stat em { width: 84px; font-style: normal; text-align: right; font-size: 13px; white-space: nowrap; }
.bar { flex: 1; height: 12px; background: rgba(255,255,255,.1); border-radius: 6px; overflow: hidden; display: flex; }
.bar i { display: block; height: 100%; background: linear-gradient(90deg, #2a7bff, #6ee7ff); }
.bar b { display: block; height: 100%; background: linear-gradient(90deg, #ffd34a, #fff3b0); }

/* ---------- меню ---------- */
.menu-left { position: absolute; left: 56px; top: 40px; width: 470px; }
.menu-char { display: flex; align-items: center; gap: 14px; margin: 22px 0 8px; }
.menu-char .nm { font-size: 26px; }
.menu-char .sb { font-size: 14px; color: #c9b88a; }
.menu-quote { font-family: Georgia, serif; font-style: italic; color: #e8dcc0; font-size: 17px; margin-bottom: 18px; min-height: 22px; }
.menu-quote .who { font-family: var(--font); font-style: normal; font-size: 14px; color: #c9b88a; white-space: nowrap; }
.menu-btns { display: flex; flex-direction: column; gap: 10px; }
.cafe-btn { background: linear-gradient(180deg, #2a3348, #1d2433); border-color: #8fb0d8; }
.osm-note { position: absolute; right: 18px; bottom: 10px; font-family: Arial; font-size: 11px; color: rgba(255,255,255,.55); }

/* ---------- события ---------- */
.split { display: flex; gap: 20px; padding: 10px 26px; height: 610px; }
.ev-list { width: 470px; display: flex; flex-direction: column; gap: 8px; overflow-y: auto; }
.evcard { display: flex; align-items: center; gap: 12px; padding: 10px 14px; border-radius: 14px; border: 2px solid rgba(255,255,255,.14); background: linear-gradient(90deg, rgba(40,24,50,.9), rgba(20,12,28,.9)); cursor: pointer; transition: .15s; }
.evcard:hover { transform: translateX(4px); border-color: var(--gold2); }
.evcard.sel { border-color: var(--gold2); background: linear-gradient(90deg, rgba(120,70,20,.9), rgba(40,20,30,.9)); }
.evcard .ic { font-size: 30px; width: 44px; text-align: center; }
.evcard .md { margin-left: auto; color: #8dff9f; font-size: 20px; }
.ev-detail { flex: 1; display: flex; flex-direction: column; }
.ev-detail canvas { width: 100%; height: 240px; border-radius: 12px; border: 2px solid rgba(255,255,255,.15); }
.ev-detail h3 { margin: 10px 0 2px; font-size: 26px; color: var(--gold2); font-weight: normal; }
.ev-detail .hint { font-size: 13px; color: #9a8f7a; }
#ev-start { margin-top: auto; }
.diffs { display: flex; gap: 8px; margin-bottom: 8px; }
.diff { flex: 1; padding: 8px 6px; text-align: center; border-radius: 10px; border: 2px solid rgba(255,255,255,.18); cursor: pointer; font-size: 15px; background: rgba(255,255,255,.05); }
.diff small { display: block; color: #8dff9f; font-size: 11px; margin-top: 2px; font-family: Arial; }
.diff.sel { border-color: var(--gold2); background: rgba(255,190,40,.2); }

/* ---------- гараж / салон ---------- */
.side-panel { position: absolute; left: 26px; top: 84px; width: 400px; max-height: 600px; overflow-y: auto; }
/* гараж: прокручивается только содержимое, кнопка «Ехать на этой» всегда видна внизу панели */
.garage-panel { display: flex; flex-direction: column; overflow: hidden; padding: 16px 18px 14px; }
.garage-panel .sp-scroll { flex: 0 1 auto; min-height: 0; overflow-y: auto; margin-right: -10px; padding-right: 10px; }
.garage-panel .label { margin: 8px 0 5px; }
.garage-panel p { margin: 2px 0 6px; }
.garage-panel #g-use { flex: none; margin-top: 10px; }
.side-panel.right { left: auto; right: 26px; }
.side-panel h3 { margin: 0 0 4px; font-size: 24px; color: var(--gold2); font-weight: normal; }
.swatches { display: flex; gap: 7px; flex-wrap: wrap; }
.sw { width: 28px; height: 28px; border-radius: 50%; border: 3px solid rgba(255,255,255,.35); cursor: pointer; }
.sw.sel { border-color: #fff; box-shadow: 0 0 0 3px var(--gold2); }
.upg { display: flex; align-items: center; gap: 10px; padding: 7px 10px; background: rgba(255,255,255,.05); border-radius: 12px; margin-bottom: 6px; }
.upg .inf { flex: 1; font-size: 15px; }
.upg small { color: #b9a98a; font-size: 11px; font-family: Arial; }
.pips { display: flex; gap: 4px; margin-top: 3px; }
.pip { width: 24px; height: 7px; border-radius: 4px; background: rgba(255,255,255,.15); }
.pip.on { background: linear-gradient(90deg, #ffd34a, #fff3b0); }
.upg .btn { min-width: 110px; padding: 7px 10px; font-size: 14px; }
.strip { position: absolute; left: 450px; right: 26px; bottom: 18px; display: flex; gap: 8px; flex-wrap: wrap; justify-content: center; }
.mini { padding: 8px 14px; border: 2px solid rgba(255,255,255,.18); border-radius: 12px; background: rgba(14,10,20,.85); cursor: pointer; font-size: 14px; display: flex; align-items: center; gap: 8px; }
.mini.sel { border-color: var(--gold2); }
.sw2 { width: 16px; height: 16px; border-radius: 50%; border: 2px solid rgba(255,255,255,.5); }
.shop-list { position: absolute; left: 26px; top: 84px; width: 260px; display: flex; flex-direction: column; gap: 6px; }
.scard { display: flex; justify-content: space-between; align-items: center; padding: 9px 12px; border-radius: 12px; border: 2px solid rgba(255,255,255,.14); background: rgba(14,10,20,.85); cursor: pointer; font-size: 16px; }
.scard.sel { border-color: var(--gold2); background: linear-gradient(90deg, rgba(120,70,20,.9), rgba(30,16,30,.9)); }
.scard .pr { font-size: 13px; color: #8dff9f; }
.scard.owned .pr { color: #9fd0ff; }

/* ---------- кофейня ---------- */
.cafe-hdr { background: linear-gradient(180deg, rgba(29,36,51,.95), rgba(29,36,51,.6)); }
.cafe-logo { font-family: Arial, sans-serif; font-weight: bold; font-size: 34px; line-height: .9; color: #fff; }
.cafe-logo small { display: block; font-size: 13px; font-weight: 600; }
.cafe-addr { flex: 1; color: #c8d4e8; font-size: 14px; font-family: Arial; }
.cafe-topics { position: absolute; left: 20px; top: 90px; width: 270px; padding: 10px; display: flex; flex-direction: column; gap: 5px; background: rgba(29,36,51,.85); border-color: rgba(200,220,255,.3); }
.topic { padding: 7px 10px; border-radius: 9px; cursor: pointer; font-size: 14px; background: rgba(255,255,255,.05); }
.topic:hover { background: rgba(255,255,255,.12); }
.topic.sel { background: rgba(255,211,74,.25); color: var(--gold1); }
.cafe-right { position: absolute; right: 20px; top: 90px; width: 330px; max-height: 560px; display: flex; flex-direction: column; overflow: hidden; padding: 10px 12px 12px; background: rgba(29,36,51,.88); border-color: rgba(200,220,255,.3); }
.cafe-right .label { margin-top: 2px; flex: none; }
#cafe-menu { flex: 0 1 auto; min-height: 0; overflow-y: auto; }
.mitem { display: flex; align-items: center; gap: 8px; padding: 4px 4px; border-bottom: 1px solid rgba(255,255,255,.08); }
.mitem.active { background: rgba(141,255,159,.08); }
.mi { font-size: 24px; width: 32px; text-align: center; }
.mt { flex: 1; font-size: 14px; }
.mt small { display: block; font-family: Arial; font-size: 11px; color: #b8c4d8; }
.mitem .btn { padding: 5px 9px; font-size: 13px; min-width: 64px; }
.buffs-note { flex: none; margin-top: 8px; padding-top: 6px; border-top: 1px solid rgba(255,255,255,.12); font-family: Arial; font-size: 12px; color: #8dff9f; }
.cafe-ctrl { position: absolute; left: 50%; bottom: 18px; transform: translateX(-50%); display: flex; gap: 14px; align-items: center; background: rgba(29,36,51,.85); border: 2px solid rgba(200,220,255,.3); padding: 8px 14px; border-radius: 14px; font-size: 14px; }
.cafe-hint { font-family: Arial; font-size: 12px; color: #9fb0c8; }
.bubble { position: fixed; z-index: 20; transform: translate(-50%, -100%); max-width: 380px; background: #fffaf0; color: #1d1a16; padding: 12px 16px; border-radius: 16px; font-family: Arial, sans-serif; font-size: 16px; line-height: 1.35; box-shadow: 0 10px 30px rgba(0,0,0,.35); border: 2px solid #1d2433; pointer-events: none; }
.bubble b { display: block; font-family: var(--font); font-weight: normal; color: #b35a10; font-size: 14px; margin-bottom: 3px; }
.bubble::after { content: ''; position: absolute; left: 50%; bottom: -12px; transform: translateX(-50%); border: 7px solid transparent; border-top-color: #1d2433; }

/* ---------- настройки и модальные ---------- */
.row { display: flex; align-items: center; justify-content: space-between; font-size: 20px; padding: 10px 6px; border-bottom: 1px solid rgba(255,255,255,.1); }
.row input { width: 24px; height: 24px; accent-color: #ffd34a; }
.opts { display: flex; gap: 6px; }
.opt { padding: 6px 14px; border-radius: 10px; border: 2px solid rgba(255,255,255,.2); cursor: pointer; font-size: 15px; }
.opt.sel { border-color: var(--gold2); background: rgba(255,190,40,.2); }
/* время суток в онлайне решает сервер (js/ui.js syncTod): выбор закрыт, отмечено нынешнее */
.opt.lock { cursor: default; opacity: .45; }
.opt.lock.sel { opacity: .85; }
.tod-net { font-family: Arial, sans-serif; font-size: 12.5px; line-height: 1.35; color: #9fd8ff; text-align: center; }
body.compact .tod-net { font-size: 15px; }
/* экран «Настройки»: слева графика (растягивается), справа общие настройки; город за панелями виден */
#s-settings.shaded::before { background: linear-gradient(180deg, rgba(8,5,12,.72), rgba(8,5,12,.5) 30%, rgba(8,5,12,.5)); transition: opacity .25s; }
#s-settings .set-wrap { transition: opacity .2s, transform .2s; }
#s-settings.peek::before { opacity: 0; }
#s-settings.peek .set-wrap { opacity: 0; transform: translateY(12px); pointer-events: none; }
#s-settings.peek { cursor: pointer; }
#s-settings.peek .hdr { cursor: default; }
.peek-btn { padding: 8px 14px; font-size: 15px; }
.peek-btn.on { border-color: var(--cyan); box-shadow: 0 0 14px rgba(70,224,255,.3); }
.set-wrap { position: absolute; left: 26px; right: 26px; top: 82px; bottom: 22px; display: flex; gap: 16px; }
.set-wrap > .panel { display: flex; flex-direction: column; min-height: 0; padding: 14px 18px 12px; }
.set-gfx { flex: 1; min-width: 0; }
.set-main { width: 370px; flex: none; overflow-y: auto; }
.set-main > * { flex: none; } /* длинная колонка прокручивается, а не сжимает ряды */
.set-title { display: flex; align-items: baseline; font-size: 13px; letter-spacing: 3px; color: var(--gold2); margin: 0 0 9px 2px; flex: none; }
.set-title .gx-res { margin-left: auto; letter-spacing: 0; }
.set-main .row { font-size: 18px; padding: 9px 4px; }
.set-main .row.stack { flex-direction: column; align-items: stretch; gap: 8px; }
.set-main .row.stack .opt { flex: 1; display: flex; align-items: center; justify-content: center; }
.set-main #btn-reset { margin-top: auto; flex: none; }
.help { display: grid; grid-template-columns: 1fr 1fr; gap: 5px 12px; font-family: Arial; font-size: 13px; color: #e5dcc4; margin: 12px 0 14px; }
.help div { display: flex; flex-direction: column; gap: 1px; }
.help b { color: var(--gold2); font-family: var(--font); font-weight: normal; font-size: 13px; }
.help span { color: #cfc4ab; }
/* переключатель вместо галочки */
input.switch, .row input.switch { -webkit-appearance: none; appearance: none; flex: none; position: relative; width: 48px; height: 28px; margin: 0; border-radius: 14px; border: 2px solid rgba(255,255,255,.28); background: rgba(255,255,255,.1); cursor: pointer; transition: background .15s, border-color .15s; }
input.switch::after { content: ''; position: absolute; left: 3px; top: 3px; width: 18px; height: 18px; border-radius: 50%; background: #cfc6b4; box-shadow: 0 1px 3px rgba(0,0,0,.5); transition: left .15s, background .15s; }
input.switch:checked { border-color: #fff3b0; background: linear-gradient(180deg, #ffe27a, #e0a82a); }
input.switch:checked::after { left: 23px; background: #2a1204; }
input.switch:focus-visible { outline: 2px solid var(--cyan); outline-offset: 2px; }
/* блок графики (строит ui.js): пресеты сверху, пункты прокручиваются, внизу — плашка перезапуска; «Рендер: W×H» — в заголовке панели */
.gfxbox { display: flex; flex-direction: column; flex: 1; min-height: 0; }
.gx-presets { display: flex; gap: 8px; flex: none; margin-bottom: 8px; }
.gx-pre { flex: 1; min-width: 0; font-family: var(--font); color: #fff; text-align: center; cursor: pointer; padding: 7px 4px 6px; border-radius: 12px; border: 2px solid rgba(255,255,255,.18); background: linear-gradient(180deg, rgba(60,40,72,.7), rgba(24,14,34,.7)); transition: border-color .15s, filter .15s, transform .1s; }
.gx-pre b { display: block; font-weight: normal; font-size: 18px; white-space: nowrap; }
.gx-pre small { display: block; font-family: Arial; font-size: 11px; color: #b9a98a; margin-top: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.gx-pre[data-p]:hover { border-color: var(--gold2); filter: brightness(1.15); }
.gx-pre[data-p]:active { transform: translateY(1px); }
.gx-pre.sel { border-color: var(--gold2); background: linear-gradient(180deg, rgba(255,211,74,.38), rgba(196,134,26,.18)); box-shadow: 0 0 18px rgba(255,190,40,.25), inset 0 1px 0 rgba(255,243,176,.35); }
.gx-pre.sel b { color: var(--gold1); }
.gx-pre.sel small { color: #f3dca0; }
.gx-pre.custom { flex: .8; display: flex; flex-direction: column; justify-content: center; cursor: default; border-style: dashed; opacity: .38; background: rgba(255,255,255,.03); }
.gx-pre.custom.on { opacity: 1; border-style: solid; border-color: var(--cyan); background: rgba(70,224,255,.14); box-shadow: 0 0 16px rgba(70,224,255,.2); }
.gx-pre.custom.on b { color: #c8f6ff; }
.gx-body { flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; touch-action: pan-y; margin-right: -10px; padding-right: 10px; }
.gx-body::-webkit-scrollbar, .set-main::-webkit-scrollbar { width: 6px; }
.gx-body::-webkit-scrollbar-thumb, .set-main::-webkit-scrollbar-thumb { background: rgba(255,211,74,.35); border-radius: 3px; }
.gx-row { display: grid; grid-template-columns: 256px 1fr; align-items: center; gap: 12px; padding: 4px 2px; border-bottom: 1px solid rgba(255,255,255,.07); }
.gx-lbl { min-width: 0; font-size: 16px; line-height: 1.15; }
.gx-lbl small { display: block; font-family: Arial; font-size: 11.5px; color: #a99c84; margin-top: 2px; line-height: 1.2; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* длинный список: край, за которым есть ещё пункты, растворяется (ui.js fadeEdges ставит .ft/.fb) */
.gx-body.fb { -webkit-mask-image: linear-gradient(180deg, #000 calc(100% - 30px), transparent); mask-image: linear-gradient(180deg, #000 calc(100% - 30px), transparent); }
.gx-body.ft { -webkit-mask-image: linear-gradient(180deg, transparent, #000 22px); mask-image: linear-gradient(180deg, transparent, #000 22px); }
.gx-body.ft.fb { -webkit-mask-image: linear-gradient(180deg, transparent, #000 22px, #000 calc(100% - 30px), transparent); mask-image: linear-gradient(180deg, transparent, #000 22px, #000 calc(100% - 30px), transparent); }
.gx-rs { font-style: normal; color: var(--gold2); font-size: 13px; margin-left: 6px; opacity: .8; }
.gx-vals { display: flex; gap: 3px; padding: 3px; border-radius: 12px; background: rgba(0,0,0,.32); border: 1px solid rgba(255,255,255,.1); }
.gx-vals .opt { flex: 1; min-width: 0; font-family: var(--font); color: #e8e0cc; background: transparent; border: 1px solid transparent; border-radius: 9px; padding: 5px 4px; font-size: 14px; white-space: nowrap; transition: background .12s, color .12s; }
.gx-vals .opt:hover:not(.sel) { background: rgba(255,255,255,.08); color: #fff; }
.gx-vals .opt.over:not(.sel) { color: rgba(232,224,204,.42); }
.gx-vals .opt.over.sel { filter: saturate(.55); }
.gx-vals .opt.sel { color: #2a1204; border-color: #fff3b0; background: linear-gradient(180deg, #fff0a0 0%, #ffd34a 50%, #e3ab2c 100%); box-shadow: 0 2px 10px rgba(255,190,40,.3); }
.gx-bools { display: grid; grid-template-columns: 1fr 1fr; column-gap: 22px; }
.gx-b { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 5px 2px; border-bottom: 1px solid rgba(255,255,255,.07); cursor: pointer; }
.gx-extra .label { margin: 8px 0 0 2px; }
.gx-extra .gx-lbl { font-size: 14px; color: #ddd3bd; }
.gx-res { font-family: Arial; font-size: 12.5px; color: #a99c84; white-space: nowrap; }
.gx-res b { font-family: var(--font); font-weight: normal; color: #fff; font-size: 13.5px; }
.gx-res b.bad { color: #ff9a6a; } /* 3D без видеокарты (ui.js renderInfo) */
/* плашка «нужен перезапуск» — внизу блока, только когда детализация/трафик отличаются от загруженных */
.gx-restart { display: none; flex: none; align-items: center; justify-content: space-between; gap: 6px 12px; margin-top: 8px; padding: 7px 8px 7px 12px; border-radius: 12px; border: 1px solid rgba(255,211,74,.5); background: rgba(255,190,40,.12); color: var(--gold1); font-size: 14px; animation: fadeIn .25s ease; }
.gx-restart.on { display: flex; }
.gx-restart > span { flex: 1; min-width: 0; }
.gx-restart .btn { flex: none; padding: 6px 14px; font-size: 14px; border-radius: 10px; }
/* в паузе посреди заезда «Перезапустить» сначала спрашивает на самой плашке */
.gx-ask, .gx-restart .gx-no, .gx-restart.ask .gx-rt { display: none; }
.gx-restart.ask .gx-ask { display: block; }
.gx-restart.ask .gx-no { display: block; }
.gx-restart.ask { border-color: rgba(255,130,100,.7); background: rgba(255,90,60,.14); color: #ffd9cc; }
/* узкий вариант (панель в паузе): подпись над вариантами */
.gfxbox.narrow .gx-row { grid-template-columns: 1fr; gap: 5px; padding: 7px 2px; }
.gfxbox.narrow .gx-lbl small { display: inline; margin-left: 6px; white-space: normal; }
.gfxbox.narrow .gx-presets { gap: 6px; }
.gfxbox.narrow .gx-pre b { font-size: 16px; }
.gfxbox.narrow .gx-pre small { font-size: 10px; }
.gfxbox.narrow .gx-bools { column-gap: 14px; }
.gfxbox.narrow .gx-b .gx-lbl { font-size: 14px; }
.gfxbox.narrow .gx-b .gx-lbl small { display: block; margin-left: 0; }
.gfxbox.narrow .gx-restart { font-size: 13px; }
/* пауза → «Графика»: карточка паузы прячется, справа полупрозрачная панель, HUD убираем — виден город */
.gfx-side { display: none; position: absolute; right: 16px; top: 16px; bottom: 16px; width: 468px; flex-direction: column; padding: 12px 16px; background: rgba(14,10,20,.8); }
#s-pause.gfx .gfx-side { display: flex; animation: slideIn .2s ease; }
#s-pause.gfx .modal-card { display: none; }
#s-pause.gfx::before { background: linear-gradient(90deg, rgba(6,3,10,0) 45%, rgba(6,3,10,.4)); }
body:has(#s-pause.gfx.on) #hud, body:has(#s-pause.gfx.on) #touch { visibility: hidden; }
@keyframes slideIn { from { opacity: 0; transform: translateX(24px); } to { opacity: 1; transform: none; } }
.gs-hdr { display: flex; align-items: center; gap: 14px; margin-bottom: 10px; flex: none; }
.gs-hdr h3 { margin: 0; font-size: 26px; font-weight: normal; letter-spacing: 2px; color: var(--gold2); }
.gs-hdr .back { flex: none; white-space: nowrap; }
.gs-t { flex: 1; min-width: 0; display: flex; align-items: baseline; gap: 10px; }
.gs-t .gx-res { margin-left: auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
/* счётчик FPS (Настройки → «Показывать FPS»): на экранах меню — мелко сверху по центру, над заголовками (в компактном
   режиме ui.js fit опускает холст на 14 px — полоса только под счётчик); в городе — в левом верхнем углу над деньгами */
#fps { position: fixed; left: 50%; top: 0; transform: translateX(-50%); z-index: 30; pointer-events: none; font: 11px/14px Menlo, Consolas, monospace; font-variant-numeric: tabular-nums; color: #9dffb0; background: rgba(0,0,0,.45); padding: 0 6px; border-radius: 0 0 6px 6px; text-shadow: 0 1px 1px #000; white-space: nowrap; }
body.driving #fps { left: 8px; transform: none; }
#fps.mid { color: #ffd34a; }
#fps.low { color: #ff7a6a; }
#fps.idle { color: #cfd6dc; }
.modal-card { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 460px; display: flex; flex-direction: column; gap: 10px; text-align: center; }
.modal-card h2 { margin: 0; font-size: 40px; color: var(--gold2); }
.modal-card h3 { margin: 0; font-size: 26px; color: var(--gold2); font-weight: normal; }
.modal-card p { font-family: Arial; color: #e2d8c0; margin: 0 0 6px; }
.modal-card .opts { justify-content: center; }
.res { width: 560px; }
.res-title { font-size: 56px; background: linear-gradient(180deg, #fff6c0, #ffd34a 55%, #b87a14); -webkit-background-clip: text; background-clip: text; color: transparent; }
.res-sub { color: #d9cdb0; font-size: 15px; }
.res-items { text-align: left; font-size: 17px; }
.res-items div { display: flex; justify-content: space-between; padding: 6px 2px; border-bottom: 1px dashed rgba(255,255,255,.15); }
.res-items b { color: #8dff9f; font-weight: normal; }
.res-total { font-size: 38px; color: #8dff9f; text-shadow: 0 0 18px rgba(80,255,120,.5); }
.map-card { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 1220px; height: 680px; display: flex; gap: 12px; padding: 14px; }
#bigmap { width: 900px; height: 640px; border-radius: 12px; cursor: crosshair; }
.map-side { flex: 1; display: flex; flex-direction: column; gap: 6px; }
#map-side { flex: 1; overflow-y: auto; display: flex; flex-direction: column; gap: 5px; }
.mapitem { padding: 8px 10px; border-radius: 10px; background: rgba(255,255,255,.06); cursor: pointer; font-size: 14px; }
.mapitem:hover { background: rgba(70,224,255,.18); }
.mapitem.dim { color: #aaa; }
.mapitem.sel { background: rgba(70,224,255,.28); border: 1px solid var(--cyan); }
.map-note { padding: 8px 10px; border-radius: 10px; background: rgba(70,224,255,.12); color: var(--cyan); font-size: 15px; line-height: 1.35; }
.map-note small { color: #c9d6e0; font-family: Arial; font-size: 13px; }
.pause-label { margin: 2px 0 -4px; }

/* ---------- HUD ---------- */
#hud { position: fixed; inset: 0; pointer-events: none; z-index: 5; font-size: 16px; }
/* углы HUD масштабируются под окно (--hud задаёт ui.js: 1 при 1280×720) */
:root { --hud: 1; --hudt: 1; --tb: 1; }
.hud-tl { position: absolute; left: 18px; top: 16px; display: flex; flex-direction: column; gap: 10px; transform: scale(var(--hud)); transform-origin: 0 0; }
.hud-money { background: rgba(8,6,12,.6); border: 2px solid var(--line); border-radius: 12px; padding: 6px 14px; color: #8dff9f; font-size: 22px; width: max-content; }
#evinfo { background: rgba(8,6,12,.62); border: 2px solid var(--line); border-radius: 14px; padding: 10px 16px; min-width: 220px; }
.ev-name { font-size: 15px; color: var(--gold2); margin-bottom: 4px; }
.ev-big { font-size: 50px; line-height: 1; }
.ev-big small { font-size: 22px; color: #ccc; margin-left: 2px; }
.ev-big.red { color: #ff5a5a; }
.ev-row { font-size: 15px; margin-top: 4px; display: flex; align-items: center; gap: 6px; }
.ev-row.small { font-size: 12px; color: #c9b88a; }
.ev-row .bar { width: 140px; height: 10px; flex: none; }
.ev-row .bar i { background: linear-gradient(90deg, #8a5a3a, #d9a35a); }
#heat { background: rgba(30,4,8,.7); border: 2px solid #ff4a4a; border-radius: 14px; padding: 8px 14px; width: 260px; animation: heatPulse 1s infinite; }
@keyframes heatPulse { 50% { border-color: #4a6aff; } }
.heat-title { font-size: 16px; color: #ff8a8a; }
#stars { color: #ffd34a; letter-spacing: 2px; }
.hbar { display: flex; align-items: center; gap: 8px; font-size: 12px; margin-top: 5px; }
.hbar span { width: 90px; }
.hbar div { flex: 1; height: 8px; background: rgba(255,255,255,.12); border-radius: 4px; overflow: hidden; }
.hbar i { display: block; height: 100%; width: 0; background: #ff4a4a; }
.hbar.esc i { background: #6dff8a; }
.hud-tr { position: absolute; right: 18px; top: 16px; display: flex; flex-direction: column; align-items: flex-end; gap: 8px; transform: scale(var(--hud)); transform-origin: 100% 0; }
#minimap { width: 220px; height: 220px; border-radius: 50%; box-shadow: 0 6px 20px rgba(0,0,0,.5); }
#street { font-size: 15px; background: rgba(8,6,12,.6); padding: 5px 12px; border-radius: 10px; opacity: 0; transition: opacity .4s; max-width: 260px; text-align: right; }
#street.show { opacity: 1; }
.hud-btns { display: flex; gap: 6px; pointer-events: auto; }
.hud-btns button { width: 42px; height: 42px; border-radius: 12px; border: 2px solid var(--line); background: rgba(8,6,12,.6); color: #fff; font-size: 20px; cursor: pointer; }
.hud-br { position: absolute; right: 14px; bottom: 10px; text-align: right; transform: scale(var(--hud)); transform-origin: 100% 100%; }
#speedo { width: 230px; height: 200px; filter: drop-shadow(0 4px 12px rgba(0,0,0,.6)); }
#buffs { font-size: 22px; letter-spacing: 4px; }
.hud-bl { position: absolute; left: 18px; bottom: 26px; transform: scale(var(--hud)); transform-origin: 0 100%; }
#quip { background: #fffaf0; color: #2a1204; padding: 10px 16px; border-radius: 16px; font-size: 17px; border: 2px solid #8a5a0c; opacity: 0; transform: translateY(10px); transition: .25s; max-width: 380px; }
#quip.show { opacity: 1; transform: none; }
#msg { position: absolute; left: 50%; top: calc(16px + 175px * var(--hud)); transform: translateX(-50%); font-size: calc(46px * var(--hud)); text-shadow: 0 3px 0 #000, 0 0 20px rgba(0,0,0,.6); opacity: 0; white-space: nowrap; }
#msg.show { animation: msgIn 2.2s ease forwards; }
@keyframes msgIn { 0% { opacity: 0; transform: translateX(-50%) scale(1.4); } 10% { opacity: 1; transform: translateX(-50%) scale(1); } 80% { opacity: 1; } 100% { opacity: 0; } }
/* название микрорайона при въезде: чуть выше середины экрана, появляется и тает */
/* микрорайон: при въезде — тихая подпись слева от миникарты (заметна, если посмотреть на карту, но не отвлекает) */
#district { position: absolute; right: 234px; top: 150px; text-align: right; opacity: 0; white-space: nowrap; pointer-events: none; }
#district .d-k { display: block; font-size: 10px; letter-spacing: 3px; color: rgba(236,226,200,.85); text-transform: uppercase; text-shadow: 0 1px 0 #000, 0 0 6px rgba(0,0,0,.85); }
#district .d-k:empty { display: none; }
#district .d-n { display: block; margin-top: 1px; font-size: 20px; letter-spacing: .5px; color: #ffd34a; text-shadow: 0 2px 0 #2a1204, 0 0 8px rgba(0,0,0,.75); }
#district.show { animation: distIn 4.6s ease forwards; }
@keyframes distIn {
  0% { opacity: 0; transform: translateX(12px); }
  9% { opacity: 1; transform: none; }
  84% { opacity: 1; transform: none; }
  100% { opacity: 0; transform: none; }
}
/* телефон: слева от миникарты — спидометр, подпись — под кнопками карты и паузы */
body.touch #district { right: 0; top: 314px; }
#prompt { position: absolute; left: 50%; bottom: calc(120px * var(--hud)); transform: translateX(-50%) scale(var(--hud)); transform-origin: 50% 100%; white-space: nowrap; background: rgba(8,6,12,.72); border: 2px solid var(--gold2); border-radius: 14px; padding: 10px 20px; font-size: 20px; }
#prompt b { color: #2a1204; background: var(--gold2); border-radius: 6px; padding: 1px 8px; margin-right: 4px; }
.hud-keys { position: absolute; left: 50%; bottom: 8px; transform: translateX(-50%) scale(var(--hud)); transform-origin: 50% 100%; font-family: Arial; font-size: 12px; color: rgba(255,255,255,.55); white-space: nowrap; }
.float { position: absolute; left: 0; top: 0; font-size: 22px; color: #fff; text-shadow: 0 2px 0 #000; white-space: nowrap; }
.float.money { color: #8dff9f; }
.float.drift { color: #d9a8ff; font-size: 26px; }
.lbl { position: absolute; left: 0; top: 0; padding: 4px 10px; border-radius: 10px; font-size: 16px; white-space: nowrap; background: rgba(8,6,12,.7); border: 2px solid var(--cyan); transform-origin: 50% 100%; }
.lbl.cafe { border-color: #ffb35a; color: #ffe0b0; }
.lbl.racer { border-color: #ff6a3a; font-size: 14px; }
.lbl-ava { width: 24px; height: 24px; border-radius: 50%; vertical-align: middle; margin: -5px 7px -4px -6px; border: 1px solid var(--cyan); background: #1a1222; }

/* ---------- сенсорное ---------- */
#touch { position: fixed; inset: 0; display: none; pointer-events: none; z-index: 6; }
#touch.on { display: block; }
#stick { position: absolute; left: 30px; bottom: 30px; width: 200px; height: 110px; border-radius: 55px; background: rgba(20,12,28,.35); border: 2px solid rgba(255,255,255,.35); pointer-events: auto; touch-action: none; display: flex; align-items: center; justify-content: center; }
#knob { width: 70px; height: 70px; border-radius: 50%; background: rgba(255,211,74,.6); border: 2px solid #fff; }
.tbtns { position: absolute; right: 260px; bottom: 24px; display: grid; grid-template-columns: 90px 90px; gap: 10px; }
.tb { pointer-events: auto; width: 90px; height: 70px; border-radius: 16px; border: 2px solid rgba(255,255,255,.5); background: rgba(20,12,28,.45); color: #fff; font-family: var(--font); font-size: 14px; touch-action: none; }
.tb.down { background: rgba(255,211,74,.6); }
.tb.nit { border-color: #6ee7ff; }
.tb.gas { border-color: #6dff8a; }
body.touch .hud-keys { display: none; }
/* телефон: стик слева, педали у правого края под большой палец, спидометр — сверху рядом с миникартой */
body.touch #stick { left: 22px; bottom: 18px; transform: scale(var(--tb)); transform-origin: 0 100%; }
body.touch .tbtns { right: 14px; bottom: 14px; grid-template-columns: 92px 108px; grid-template-areas: "hand nit" "brake gas"; align-items: end; transform: scale(var(--tb)); transform-origin: 100% 100%; }
body.touch .tb[data-t="nitro"] { grid-area: nit; width: 108px; height: 62px; }
body.touch .tb[data-t="hand"] { grid-area: hand; width: 92px; height: 62px; }
body.touch .tb[data-t="brake"] { grid-area: brake; width: 92px; height: 92px; }
body.touch .tb[data-t="gas"] { grid-area: gas; width: 108px; height: 118px; font-size: 18px; }
body.touch .hud-br { top: 16px; bottom: auto; right: calc(26px + 228px * var(--hud)); transform-origin: 100% 0; }
body.touch .hud-bl { bottom: calc(30px + 120px * var(--tb)); }
body.touch #msg { top: calc(24px + 210px * var(--hud)); }
body.touch #prompt { pointer-events: auto; cursor: pointer; bottom: 14px; padding: 18px 24px; font-size: 21px; transform: translateX(-50%) scale(var(--hudt)); background: rgba(40,24,8,.88); box-shadow: 0 0 0 3px rgba(255,211,74,.35), 0 8px 24px rgba(0,0,0,.5); }
/* текст HUD на телефоне: панели заезда и розыска, улица, реплики — не мельче --hudt (≈0.75) */
body.touch .hud-tl { transform: scale(var(--hudt)); }
body.touch .hud-bl { transform: scale(var(--hudt)); }
body.touch #street { font-size: calc(15px * var(--hudt) / var(--hud)); max-width: calc(260px * var(--hudt) / var(--hud)); }
body.touch #prompt b { display: none; }
body.touch #prompt::before { content: '👆 ЖМИ'; color: #2a1204; background: var(--gold2); border-radius: 8px; padding: 2px 10px; margin-right: 8px; }
body.touch #prompt:active { filter: brightness(1.25); }
@media (max-height: 500px) { .hud-keys { display: none; } }
#rotate { display: none; position: fixed; inset: 0; background: #0a0610; color: #ffd34a; align-items: center; justify-content: center; text-align: center; font-size: 22px; z-index: 99; }
@media (orientation: portrait) and (max-width: 800px) { #rotate { display: flex; } }
/* одна вкладка (js/cloud.js): игра открыта в другой вкладке этого браузера — поверх всего, вне масштаба #ui */
#tab-lock { display: none; position: fixed; inset: 0; z-index: 98; background: rgba(10, 6, 16, .94); align-items: center; justify-content: center; text-align: center; padding: 16px; }
#tab-lock.on { display: flex; }
/* объявление администратора (js/net.js) — мелко справа, не по центру */
#sys-note { position: fixed; right: 12px; top: 250px; max-width: 320px; z-index: 60; font: 14px/1.35 Arial, sans-serif; color: #fff3b0; background: rgba(40,24,6,.82); border: 1px solid rgba(255,211,74,.5); padding: 7px 11px; border-radius: 10px; opacity: 0; pointer-events: none; transition: opacity .4s; }
#sys-note.on { opacity: 1; }
/* админка (js/admin.js) — мелко справа под миникартой, поверх меню и езды */
#adm { display: none; position: fixed; right: 10px; top: 240px; width: 340px; max-height: calc(100vh - 260px); z-index: 70; font: 13px/1.35 Arial, sans-serif; color: #f2ead8; }
#adm.on { display: block; }
.adm-box { display: flex; flex-direction: column; gap: 6px; padding: 9px; border-radius: 12px; border: 1px solid rgba(255,211,74,.45); background: rgba(14,9,20,.94); max-height: inherit; }
#adm .adm-in { font: 14px Arial, sans-serif; padding: 6px 9px; border-radius: 8px; } /* сильнее .net-in ниже */
.adm-row { display: flex; align-items: center; gap: 5px; }
.adm-inf { flex: 1; min-width: 0; overflow: hidden; }
.adm-inf b { display: block; font-weight: bold; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.adm-inf small { color: #c9b88a; }
.adm-b { font: 13px Arial, sans-serif; padding: 4px 7px; border-radius: 7px; flex: none; }
.adm-b.sel { border-color: var(--gold2); color: var(--gold2); }
.adm-tabs { display: flex; gap: 4px; flex-wrap: wrap; }
.adm-body { display: flex; flex-direction: column; gap: 5px; overflow-y: auto; max-height: 52vh; }
.adm-msg { min-height: 16px; color: #8dff9f; }
#adm-login.off .adm-in, #adm-login.off button[type=submit] { display: none; } /* вне онлайна — только подсказка */
.adm-msg.bad { color: #ff9a6a; }
.adm-dim { color: #9a8f7a; }
.adm-chat { color: #e2d8c0; font-size: 12px; word-break: break-word; }
.adm-off { opacity: .5; } /* объявление по расписанию выключено — пропускается */
/* вкладка 🏅: образцы плашек (кликаются), поля в строку */
.adm-pills { display: flex; flex-wrap: wrap; gap: 4px; }
.bdg.adm-pill { cursor: pointer; margin: 0; font-size: 10.5px; padding: 3px 7px; }
.bdg.adm-pill.sel { outline: 2px solid #fff; outline-offset: 1px; }
#adm .adm-row .adm-in { flex: 1; min-width: 0; }
#adm select.adm-in { padding: 5px 6px; }
.adm-inf b.adm-in-line { display: inline; }
/* сводка (вкладка 📊): строки показателей, красное — стоит глянуть */
.adm-stat { font-size: 12.5px; line-height: 1.35; color: #e2d8c0; }
.adm-stat.bad { color: #ff9a6a; font-weight: bold; }
/* приглашения (вкладка 🎟): короткие числа и сам код */
#adm .adm-row .adm-in.adm-num { flex: none; width: 46px; text-align: center; padding: 6px 4px; }
.adm-lab { color: #9a8f7a; font-size: 12px; white-space: nowrap; }
.adm-inf b.adm-code { font-family: 'Courier New', monospace; letter-spacing: 1px; color: var(--gold1); }
#tab-lock .tab-box { max-width: 480px; display: flex; flex-direction: column; align-items: center; gap: 14px; }
#tab-lock h3 { margin: 0; font-size: 24px; font-weight: normal; color: var(--gold2); }
#tab-lock p { margin: 0; font: 17px/1.45 Arial, sans-serif; color: #e2d8c0; }

/* ---------- компактный режим (низкое окно: телефон горизонтально, 800×450) ----------
   #ui тогда не 1280×720, а по пропорциям окна (≥ 1180×560, ui.js fit) — масштаб крупнее, вёрстка ниже */
body.compact .hdr { padding: 12px 22px 4px; }
body.compact .hdr h2 { font-size: 30px; }
body.compact .btn { font-size: 19px; min-height: 50px; }
body.compact .btn.back { font-size: 18px; min-height: 48px; padding: 8px 16px; }
body.compact .btn.big { font-size: 24px; padding: 10px 22px; }
body.compact .label { font-size: 15px; }
body.compact .side-panel p, body.compact .ev-detail p { font-size: 17px; line-height: 1.35; }
body.compact .evcard .sb { font-size: 16px; }
body.compact .stat { font-size: 16px; margin: 4px 0; }
body.compact .stat em { font-size: 15px; }
/* свой персонаж */
body.compact .hero-panel, body.compact .hero-cars { top: 74px; max-height: calc(100% - 90px); overflow-y: auto; padding: 12px 16px; }
body.compact .hero-panel { width: 360px; }
body.compact .hero-cars { width: 380px; }
body.compact .hero-note, body.compact .hero-err { font-size: 15.5px; }
body.compact .hero-in { font-size: 21px; padding: 7px 12px; }
body.compact .hero-sex .opt { font-size: 18px; padding: 8px 6px; }
body.compact .hero-panel .hint, body.compact .hero-cars .hint { font-size: 15px; margin-top: 4px; }
body.compact #hero-go { margin-top: 10px; }
body.compact .hcar { font-size: 18px; padding: 6px 10px; }
body.compact .hero-cars h3 { font-size: 22px; margin-top: 6px; }
body.compact .hero-cars p { font-size: 16px; line-height: 1.3; }
body.compact .hero-cars .hint { display: none; } /* на телефоне место — под кнопку «Начать» */
body.compact .hero-cars #hero-go { position: sticky; bottom: 0; flex: none; box-shadow: 0 -10px 16px rgba(14,10,20,.85); }
body.touch.compact .hcar, body.touch.compact .hero-sex .opt { min-height: 46px; display: flex; align-items: center; justify-content: center; }
body.touch.compact .hcar { justify-content: flex-start; }
/* меню */
body.compact .menu-left { top: 22px; }
body.compact .menu-left .logo .t1 { font-size: 84px; }
body.compact .menu-left .logo .t2 { font-size: 26px; letter-spacing: 7px; }
body.compact .menu-char { margin: 12px 0 4px; }
body.compact .menu-quote { margin-bottom: 10px; font-size: 18px; }
body.compact .menu-btns { gap: 8px; }
/* события */
body.compact .split { height: calc(100% - 78px); padding: 6px 22px 14px; }
body.compact .ev-detail { padding: 14px 18px; overflow-y: auto; }
body.compact .ev-detail canvas { height: 150px; flex: none; }
body.compact .ev-detail h3 { font-size: 26px; margin-top: 6px; }
body.compact .ev-detail .hint { font-size: 15px; margin: 0 0 6px; }
body.compact .diff { font-size: 18px; padding: 8px 4px; }
body.compact .diff small { font-size: 14px; }
/* гараж / салон */
body.compact .side-panel { top: 74px; max-height: calc(100% - 90px); }
body.compact .upg .inf { font-size: 17px; }
body.compact .upg small { font-size: 14px; }
body.compact .upg .btn { min-height: 44px; font-size: 16px; }
body.compact .shop-list { top: 74px; max-height: calc(100% - 90px); overflow-y: auto; }
body.compact .scard { font-size: 18px; padding: 7px 12px; }
body.compact .scard .pr { font-size: 15px; }
body.compact .mini { font-size: 17px; padding: 8px 14px; min-height: 48px; }
body.compact .strip { bottom: 12px; }
/* кофейня */
body.compact .cafe-topics { top: 76px; max-height: calc(100% - 160px); overflow-y: auto; }
body.compact .topic { font-size: 16px; padding: 7px 10px; }
body.compact .cafe-right { top: 76px; max-height: calc(100% - 160px); }
body.compact .mt { font-size: 16px; }
body.compact .mt small { font-size: 13px; }
body.compact .buffs-note { font-size: 14px; }
body.compact .cafe-ctrl { bottom: 10px; font-size: 16px; }
body.compact .cafe-hint { display: none; }
/* настройки и окна */
body.compact .set-wrap { top: 70px; bottom: 12px; left: 22px; right: 22px; gap: 12px; }
body.compact .set-wrap > .panel { padding: 10px 14px 10px; }
body.compact .set-main { width: 350px; }
body.compact .set-title { font-size: 16px; margin-bottom: 8px; }
body.compact .row { padding: 6px 6px; }
body.compact .opt { font-size: 17px; padding: 8px 14px; }
body.compact .help { font-size: 15px; margin: 8px 0; }
body.compact .help b { font-size: 15px; }
body.compact .gx-pre b { font-size: 19px; }
body.compact .gx-pre small { font-size: 14px; }
body.compact .gx-row { grid-template-columns: 250px 1fr; padding: 5px 2px; }
body.compact .gx-lbl { font-size: 18px; }
body.compact .gx-lbl small { font-size: 15px; white-space: normal; }
body.compact .gx-vals .opt { font-size: 17px; padding: 7px 4px; }
body.compact .gx-extra .gx-lbl, body.compact .gfxbox.narrow .gx-b .gx-lbl { font-size: 17px; }
body.compact .gx-res, body.compact .gx-res b, body.compact .gx-restart { font-size: 16px; }
body.compact .gx-restart .btn { font-size: 17px; min-height: 44px; }
body.compact .gfx-side { top: 10px; bottom: 10px; right: 10px; width: 520px; padding: 10px 14px; }
body.compact .gs-hdr { gap: 12px; margin-bottom: 8px; }
body.compact .gs-t { flex-direction: column; align-items: flex-start; gap: 1px; }
body.compact .gs-t h3 { font-size: 24px; line-height: 1.05; }
body.compact .gs-t .gx-res { margin-left: 0; max-width: 100%; }
body.compact .modal-card { max-height: calc(100% - 20px); overflow-y: auto; gap: 8px; padding: 14px 18px; }
body.compact .modal-card h2 { font-size: 34px; }
body.compact .modal-card .btn.big { padding: 8px 22px; min-height: 52px; }
body.compact .res-title { font-size: 44px; }
body.compact .res-total { font-size: 32px; }
body.compact .map-card { width: calc(100% - 24px); height: calc(100% - 24px); }
/* мелкий текст в компактном режиме: после масштаба (~0.67 на телефоне 812×375) не мельче ~11 px */
body.compact .label { font-size: 17px; }
body.compact .evcard .sb, body.compact .stat, body.compact .stat em { font-size: 17px; }
body.compact .side-panel p, body.compact .ev-detail p { font-size: 18px; }
body.compact .ev-detail .hint, body.compact .diff small, body.compact .upg small, body.compact .scard .pr { font-size: 17px; }
body.compact .mt, body.compact .topic { font-size: 17px; }
body.compact .mt small, body.compact .buffs-note, body.compact .help { font-size: 16.5px; }
/* сенсорный экран: кнопки не ниже ~44 px после масштаба */
body.touch.compact .btn.back { min-height: 64px; padding: 10px 20px; font-size: 20px; }
body.touch.compact .btn { min-height: 62px; }
body.touch.compact .upg .btn, body.touch.compact .mitem .btn { min-height: 58px; }
body.touch.compact .diff { min-height: 66px; }
body.touch.compact .mini, body.touch.compact .opt { min-height: 60px; }
body.touch.compact input.switch { width: 66px; height: 38px; border-radius: 19px; }
body.touch.compact input.switch::after { width: 28px; height: 28px; }
body.touch.compact input.switch:checked::after { left: 31px; }
body.touch.compact .gx-b, body.touch.compact .set-main .row { min-height: 62px; }
body.touch.compact .gx-pre { min-height: 66px; }
body.touch.compact .set-wrap { top: 80px; } /* кнопки заголовка на телефоне 64 px — панели ниже них */
body.compact #bigmap { height: 100%; width: auto; max-width: 72%; flex: none; object-fit: contain; }
body.compact .mapitem { font-size: 17px; padding: 9px 10px; }
/* главное меню на телефоне: 5 рядов кнопок должны поместиться по высоте */
body.touch.compact .menu-left { top: 14px; }
body.touch.compact .menu-left .logo .t1 { font-size: 70px; }
body.touch.compact .menu-char { margin: 8px 0 2px; }
body.touch.compact .menu-quote { margin-bottom: 6px; }
body.touch.compact .menu-btns .btn { min-height: 54px; }
/* подсказки «клавиатура / сенсор» */
.t-only { display: none; }
body.touch .t-only { display: inline; }
body.touch .k-only { display: none; }
body.touch .help.t-only { display: grid; }
body.touch.compact .help.t-only { display: none; } /* на телефоне места нет — управление и так перед глазами */
/* планшет (сенсорный экран без компактного режима): варианты и переключатели графики — под палец (≥ ~44 px на экране) */
body.touch:not(.compact) .gx-vals .opt, body.touch:not(.compact) .set-main .opt { min-height: 54px; }
body.touch:not(.compact) .gx-pre { min-height: 64px; }
body.touch:not(.compact) .gx-b, body.touch:not(.compact) .set-main .row:not(.stack) { min-height: 58px; }
body.touch:not(.compact) input.switch { width: 62px; height: 36px; border-radius: 18px; }
body.touch:not(.compact) input.switch::after { width: 26px; height: 26px; }
body.touch:not(.compact) input.switch:checked::after { left: 29px; }
body.touch:not(.compact) .btn.back, body.touch:not(.compact) .peek-btn, body.touch:not(.compact) .gx-restart .btn { min-height: 54px; }
body.touch:not(.compact) #p-tod .opt { min-height: 48px; min-width: 84px; display: flex; align-items: center; justify-content: center; }
body.touch .help.t-only b { font-size: 14px; }
/* события на телефоне: карта ниже, кнопка «Поехали» всегда видна внизу панели */
body.compact .split { box-sizing: border-box; }
body.touch.compact .ev-detail canvas { height: 118px; }
body.compact #ev-start { position: sticky; bottom: 0; flex: none; box-shadow: 0 -10px 16px rgba(14,10,20,.85); }
body.touch .hbar, body.touch .ev-row.small { font-size: 14.5px; }

/* ---------- онлайн (js/net.js) ---------- */
.menu-btns .cafe-btn { flex: 1.6; }
.net-btn { border-color: rgba(70,224,255,.6); background: linear-gradient(180deg, rgba(24,52,72,.94), rgba(12,20,34,.96)); }
.net-btn:hover:not(:disabled) { border-color: var(--cyan); }
.net-wrap { display: flex; justify-content: center; align-items: flex-start; padding: 14px 26px; height: calc(100% - 80px); }
.net-join { width: 520px; display: flex; flex-direction: column; gap: 6px; }
.net-join .hint, .net-lobby .hint { font-family: Arial, sans-serif; font-size: 14px; line-height: 1.45; color: #b9ad94; margin: 8px 0; }
.net-in { font-family: var(--font); font-size: 22px; color: #fff; background: rgba(8,6,12,.7); border: 2px solid var(--line); border-radius: 12px; padding: 10px 14px; outline: none; user-select: text; width: 100%; }
.net-in:focus { border-color: var(--gold2); }
.net-err { font-family: Arial, sans-serif; font-size: 14px; color: #ff8a7a; min-height: 18px; }
.net-lobby { width: 900px; max-height: 100%; overflow-y: auto; display: flex; flex-direction: column; gap: 8px; }
.net-head { display: flex; justify-content: space-between; align-items: center; font-size: 22px; }
.net-head b { color: var(--gold2); letter-spacing: 2px; }
#net-state { font-size: 15px; color: #c9b88a; }
.net-linkrow { display: flex; gap: 10px; }
/* экран входа в онлайн: публичные комнаты со счётчиками и своя комната (создать / войти по коду) */
.net-pub { display: flex; flex-wrap: wrap; gap: 6px; }
.net-pub:empty { display: none; }
.net-pr { display: flex; align-items: baseline; gap: 8px; font-size: 15px; padding: 7px 12px; }
.net-pr small { font-size: 12px; color: #c9b88a; }
.net-own { display: flex; gap: 8px; }
.net-own .btn { flex: none; font-size: 16px; }
.net-own .net-in { font-size: 18px; padding: 8px 12px; text-transform: uppercase; }
.net-linkrow .net-in { font-size: 14px; font-family: Arial, sans-serif; padding: 8px 12px; }
.net-linkrow .btn { flex: none; }
.net-cols { display: grid; grid-template-columns: 1.15fr 1fr; gap: 18px; }
#net-list, #net-tracks { display: flex; flex-direction: column; gap: 6px; max-height: 300px; overflow-y: auto; }
.net-pl { display: grid; grid-template-columns: 44px 1fr auto; grid-template-rows: auto auto; column-gap: 12px; align-items: center; padding: 6px 12px 6px 8px; border-radius: 12px; border: 2px solid rgba(255,255,255,.12); background: rgba(30,18,40,.85); }
.net-pl.me { border-color: var(--line); }
.net-pl .ava { grid-row: 1 / 3; border-width: 2px; font-size: 18px; box-shadow: none; }
.net-pl .nm { font-size: 18px; }
.net-pl .nm small { font-size: 12px; color: #c9b88a; }
.net-pl .sb { grid-column: 2; font-size: 12px; color: #c9b88a; display: flex; align-items: center; gap: 6px; }
.net-pl .sb i { width: 11px; height: 11px; border-radius: 50%; border: 1px solid rgba(255,255,255,.6); flex: none; }
.net-me { display: flex; align-items: center; gap: 14px; }
.net-me .nm { font-size: 22px; }
.net-me .sb { font-size: 14px; color: #c9b88a; }
.net-join .net-me-hint { margin: 4px 0 2px; }
.net-table .ava { display: inline-flex; vertical-align: middle; margin: -4px 8px -2px 2px; border-width: 2px; font-size: 13px; box-shadow: none; }
.net-pl .st { grid-column: 3; grid-row: 1 / 3; font-size: 13px; color: #ff9a6a; display: flex; align-items: center; gap: 6px; }
/* 🔇 заглушить у себя, 🚩 пожаловаться (js/net.js) */
.np-b { font-size: 15px; line-height: 1; padding: 5px 7px; border-radius: 9px; border: 1px solid rgba(255,255,255,.18); background: rgba(0,0,0,.3); cursor: pointer; opacity: .75; }
.np-b:hover { opacity: 1; border-color: var(--gold2); }
.np-b.on { opacity: 1; border-color: #ff9a6a; background: rgba(255,120,80,.25); }
.net-tr { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 9px 12px; border-radius: 12px; border: 2px solid rgba(255,255,255,.12); background: rgba(30,18,40,.85); cursor: pointer; font-size: 16px; }
.net-tr small { font-size: 12px; color: #c9b88a; }
.net-tr.sel { border-color: var(--gold2); background: linear-gradient(90deg, rgba(120,70,20,.9), rgba(40,20,30,.9)); }
.net-tr.dim { cursor: default; opacity: .75; }
.net-tr.dim.sel { opacity: 1; }
#net-hud { background: rgba(8,6,12,.6); border: 2px solid rgba(70,224,255,.5); border-radius: 12px; padding: 5px 12px; font-size: 15px; width: max-content; }
#net-hud b { color: var(--cyan); letter-spacing: 1px; }
#net-hud .bad { color: #ff8a5a; }
.lbl.net { border-color: var(--cyan); font-size: 15px; }
.net-table div.me { color: var(--gold2); }
.net-table small { font-size: 12px; color: #c9b88a; }
body.compact .net-in { font-size: 20px; padding: 8px 12px; }
body.compact #net-list, body.compact #net-tracks { max-height: none; }
body.compact .net-lobby { width: 1000px; padding: 12px 16px; gap: 6px; }
body.compact .net-lobby .btn.big { font-size: 22px; padding: 8px 18px; }
body.compact .net-lobby .hint { margin: 2px 0; }

/* ---------- код входа и облако (js/cloud.js) ---------- */
/* кнопка в меню: обычная — «🔑 Код входа»; пока код не сохранён — заметная плашка «сохрани код»; без облака — нет */
.acc-btn.off { display: none; }
.acc-btn.remind { font-size: 15px; color: var(--gold1); border-color: var(--gold2); box-shadow: 0 0 18px rgba(255,211,74,.35); animation: accGlow 1.8s ease-in-out infinite; }
@keyframes accGlow { 50% { box-shadow: 0 0 4px rgba(255,211,74,.1); } }
.acc-wrap { display: flex; gap: 16px; align-items: flex-start; padding: 14px 26px; }
.acc-main { flex: 1.35; display: flex; flex-direction: column; gap: 10px; }
.acc-side { flex: 1; display: flex; flex-direction: column; gap: 8px; }
.acc-key { font-family: 'Courier New', monospace; font-weight: bold; font-size: 24px; letter-spacing: .5px; color: var(--gold1); background: rgba(0,0,0,.55); border: 2px dashed var(--line); border-radius: 12px; padding: 14px 10px; text-align: center; user-select: all; word-break: break-all; }
.acc-key.none { font-family: Arial, sans-serif; font-weight: normal; font-size: 17px; color: #9a8f7a; user-select: none; }
.acc-btns { display: flex; gap: 10px; }
.acc-btns .btn { flex: 1; font-size: 15px; padding: 10px 6px; }
.acc-note { font-family: Arial, sans-serif; font-size: 14px; line-height: 1.45; color: #d9cdb0; margin: 2px 0 0; }
.acc-note b { color: #ffab8a; }
.acc-status { font-family: Arial, sans-serif; font-size: 14px; color: #8dff9f; min-height: 18px; }
.acc-status.bad { color: #ff9a6a; }
.acc-side .hint { font-family: Arial, sans-serif; font-size: 13px; line-height: 1.4; color: #9a8f7a; margin: 0 0 6px; }
.acc-in { font-family: 'Courier New', monospace; font-weight: bold; font-size: 17px; text-transform: uppercase; }
/* код приглашения (шаг 6): сервер пускает новых игроков только по приглашениям */
.acc-invite { display: flex; flex-direction: column; gap: 8px; padding: 10px 12px; border: 1px solid rgba(255,211,74,.45); border-radius: 12px; background: rgba(255,190,40,.08); }
.acc-inv-row { display: flex; gap: 8px; }
.acc-inv-row .acc-in { flex: 1; min-width: 0; }
#s-cloud .modal-card { width: 560px; }
/* правила и что мы храним (шаг 6е) — поверх «Код входа» и «Онлайн» */
#s-rules { z-index: 30; background: rgba(6,4,10,.72); }
.rules-card { width: 620px; max-width: calc(100% - 32px); max-height: calc(100% - 40px); text-align: left; }
.rules-card h2 { text-align: center; }
.rules-body { overflow-y: auto; font-family: Arial, sans-serif; font-size: 14px; line-height: 1.45; color: #e2d8c0; padding-right: 4px; }
.rules-body p { margin: 0 0 8px; }
.rules-body h3 { font-family: var(--font); font-size: 18px; color: var(--gold2); margin: 12px 0 6px; font-weight: normal; }
.rules-body ol, .rules-body ul { margin: 0 0 8px; padding-left: 22px; }
.rules-body li { margin-bottom: 4px; }
.rules-body b { color: #fff3c4; }
.rules-body i { color: #9a8f7a; }
.btn.rules-link { font-size: 13px; padding: 6px 10px; align-self: center; opacity: .85; }
body.compact .rules-body { font-size: 16px; }
.cl-opts { display: flex; gap: 12px; }
.cl-opt { flex: 1; display: flex; flex-direction: column; gap: 8px; padding: 10px; border-radius: 12px; border: 1px solid var(--line); background: rgba(0,0,0,.35); }
.cl-opt .label { margin: 0; }
.cl-sum { font-family: Arial, sans-serif; font-size: 15px; line-height: 1.4; color: #fff; min-height: 42px; }
body.compact .acc-note { font-size: 15.5px; }
body.compact .acc-side .hint { font-size: 15px; }

/* ---------- радио (js/radio.js) ---------- */
/* плашка «сейчас играет» (клик — следующий трек): в городе — сверху по центру, между панелями HUD; на сенсорном
   экране — снизу по центру, между стиком и педалями, над кнопкой «ЖМИ»; в главном меню — справа внизу */
#radio-toast { position: fixed; left: 50%; top: 16px; z-index: 8; display: flex; align-items: center; gap: 10px; max-width: 380px; padding: 7px 12px 7px 10px; border-radius: 14px; border: 2px solid var(--line); background: rgba(8,6,12,.74); box-shadow: 0 6px 20px rgba(0,0,0,.45); color: #fff; cursor: pointer; pointer-events: none; touch-action: manipulation; opacity: 0; visibility: hidden; transform: translateX(-50%) translateY(-10px) scale(var(--hud)); transform-origin: 50% 0; transition: opacity .35s, transform .35s, visibility 0s linear .35s; }
#radio-toast.show { opacity: 1; visibility: visible; pointer-events: auto; transform: translateX(-50%) scale(var(--hud)); transition: opacity .25s, transform .25s, visibility 0s; }
#radio-toast:hover { border-color: var(--gold2); }
#radio-toast:active { filter: brightness(1.2); }
.rt-ic { flex: none; font-size: 26px; line-height: 1; }
.rt-txt { min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.rt-st { font-size: 11px; letter-spacing: 2px; line-height: 1.2; color: var(--gold2); }
.rt-tr { font-size: 15px; line-height: 1.3; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rt-a { font-weight: normal; color: #ffe9a0; }
.rt-nx { flex: none; margin-left: 2px; font-size: 16px; color: #cfc4ab; }
.rt-nx b { display: inline-block; font-weight: normal; font-size: 13px; color: #2a1204; background: var(--gold2); border-radius: 6px; padding: 1px 7px; }
body.touch #radio-toast { top: auto; bottom: calc(26px + 66px * var(--hudt)); transform: translateX(-50%) translateY(10px) scale(var(--hudt)); transform-origin: 50% 100%; }
body.touch #radio-toast.show { transform: translateX(-50%) scale(var(--hudt)); }
#s-menu > #radio-toast { position: absolute; left: auto; top: auto; right: 22px; bottom: 34px; z-index: 1; transform: translateY(10px); transform-origin: 100% 100%; }
#s-menu > #radio-toast.show { transform: none; }
body.compact #s-menu > #radio-toast { transform: translateY(10px) scale(1.3); }
body.compact #s-menu > #radio-toast.show { transform: scale(1.3); }
/* пауза: ⏮ ⏯ ⏭ и текущий трек */
.radio-row { display: flex; align-items: center; gap: 6px; padding: 6px 10px 6px 6px; border-radius: 14px; border: 2px solid rgba(255,255,255,.14); background: rgba(0,0,0,.3); text-align: left; }
.rbtn { flex: none; width: 46px; height: 42px; padding: 0; border-radius: 11px; border: 2px solid var(--line); background: linear-gradient(180deg, rgba(60,40,72,.92), rgba(24,14,34,.96)); color: #fff; font-size: 18px; line-height: 1; cursor: pointer; transition: filter .15s, border-color .15s, transform .1s; }
.rbtn:hover { border-color: var(--gold2); filter: brightness(1.2); }
.rbtn:active { transform: translateY(1px); }
.rbtn.on { border-color: var(--gold2); box-shadow: 0 0 12px rgba(255,190,40,.3); }
.radio-now { flex: 1; min-width: 0; margin-left: 6px; display: flex; flex-direction: column; gap: 1px; }
.radio-now small { font-size: 11px; letter-spacing: 2px; color: #b9a98a; }
.radio-now span { font-size: 15px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.radio-row.empty .rbtn { display: none; }
.radio-row.empty .radio-now span { white-space: normal; font-family: Arial, sans-serif; font-size: 13px; line-height: 1.35; color: #e2d8c0; }
body.touch .rbtn { width: 56px; height: 52px; }
body.touch.compact .rbtn { width: 68px; height: 62px; font-size: 22px; } /* на телефоне карточка паузы уменьшена — кнопки под палец */
body.compact .radio-now small { font-size: 13px; }
body.compact .radio-now span { font-size: 18px; }
body.compact .radio-row.empty .radio-now span { font-size: 16px; }
/* настройки: громкость и «сейчас играет» под переключателем радио */
.set-main .row.radio-vol { gap: 10px; font-size: 16px; color: #e5dcc4; border-bottom: 0; padding-bottom: 2px; }
.row input.slider { -webkit-appearance: none; appearance: none; flex: 1; min-width: 0; width: auto; height: 28px; margin: 0; background: transparent; cursor: pointer; --p: 70%; }
input.slider::-webkit-slider-runnable-track { height: 8px; border-radius: 4px; background: linear-gradient(90deg, #ffd34a var(--p), rgba(255,255,255,.14) var(--p)); }
input.slider::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; box-sizing: border-box; width: 22px; height: 22px; margin-top: -7px; border-radius: 50%; border: 2px solid #2a1204; background: linear-gradient(180deg, #fff3b0, #e0a82a); box-shadow: 0 1px 4px rgba(0,0,0,.5); }
input.slider::-moz-range-track { height: 8px; border-radius: 4px; background: rgba(255,255,255,.14); }
input.slider::-moz-range-progress { height: 8px; border-radius: 4px; background: #ffd34a; }
input.slider::-moz-range-thumb { box-sizing: border-box; width: 22px; height: 22px; border-radius: 50%; border: 2px solid #2a1204; background: linear-gradient(180deg, #fff3b0, #e0a82a); }
input.slider:focus-visible { outline: 2px solid var(--cyan); outline-offset: 2px; }
input.slider:disabled { opacity: .4; cursor: default; }
.radio-vol b { flex: none; width: 46px; text-align: right; font-weight: normal; font-size: 16px; color: #fff; }
.radio-note { font-family: Arial, sans-serif; font-size: 12.5px; line-height: 1.4; color: #b9ad94; padding: 2px 4px 9px; border-bottom: 1px solid rgba(255,255,255,.1); white-space: pre-line; overflow-wrap: anywhere; }
.radio-note.warn { color: var(--gold2); }
body.compact .radio-note { font-size: 15px; }
body.touch .row input.slider { height: 40px; }
body.touch input.slider::-webkit-slider-thumb { width: 30px; height: 30px; margin-top: -11px; }
body.touch input.slider::-moz-range-thumb { width: 30px; height: 30px; }

/* ---------- пешком (js/walk.js) ---------- */
/* спидометр и баффы — для машины */
body.onfoot .hud-br { display: none; }
/* короткая подсказка слева от миникарты, под названием микрорайона: «нельзя выйти», «машина далеко»… */
#note { position: absolute; right: 234px; top: 196px; width: max-content; max-width: 300px; text-align: right; font: 14px/1.3 Arial, sans-serif; color: #f2ead8; background: rgba(8,6,12,.66); padding: 5px 11px; border-radius: 10px; opacity: 0; pointer-events: none; white-space: normal; }
#note:empty { display: none; }
#note.show { animation: noteIn 2.8s ease forwards; }
@keyframes noteIn { 0% { opacity: 0; transform: translateX(10px); } 8% { opacity: 1; transform: none; } 84% { opacity: 1; } 100% { opacity: 0; } }
body.touch #note { right: 0; top: 352px; font-size: calc(14px * var(--hudt) / var(--hud)); max-width: calc(300px * var(--hudt) / var(--hud)); }
/* пешком: где оставил машину */
.lbl.mycar { border-color: var(--gold2); color: #ffe9a8; font-size: 14px; padding: 3px 9px; }
/* телефон: «Выйти/Сесть» и «Чат» — между стиком и педалями; пешком педали прячутся, справа — «Прыжок» */
#touch .tacts { position: absolute; right: calc(14px + 214px * var(--tb)); bottom: 14px; display: flex; flex-direction: column; gap: 8px; transform: scale(var(--tb)); transform-origin: 100% 100%; }
.ta { pointer-events: auto; touch-action: none; width: 66px; height: 58px; border-radius: 16px; border: 2px solid rgba(255,255,255,.5); background: rgba(20,12,28,.45); color: #fff; font-size: 21px; line-height: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; padding: 0; }
.ta small { font: 10px var(--font); letter-spacing: .5px; }
.ta:active { filter: brightness(1.3); }
.ta.hot { border-color: var(--gold2); background: rgba(255,211,74,.38); animation: taHot 1s infinite; }
@keyframes taHot { 50% { box-shadow: 0 0 0 5px rgba(255,211,74,.35); } }
.tb.jump { display: none; }
body.onfoot .tbtns { display: none; }
body.onfoot .tb.jump { display: block; position: absolute; right: 16px; bottom: 16px; width: 118px; height: 118px; border-radius: 50%; font-size: 15px; border-color: #6ee7ff; transform: scale(var(--tb)); transform-origin: 100% 100%; }
body.onfoot #touch .tacts { right: calc(26px + 124px * var(--tb)); }
/* «Привет» (помахать) — только пешком */
#ta-hi { display: none; }
body.onfoot #ta-hi { display: flex; }
body.onfoot #stick { width: 160px; height: 160px; border-radius: 50%; }

/* ---------- чат (js/chat.js) ---------- */
/* лента последних сообщений — слева, над репликами пацанов; старые тают, пока поле открыто — видны */
#chat-feed { position: absolute; left: 18px; bottom: calc(26px + 96px * var(--hud)); width: 380px; display: flex; flex-direction: column; align-items: flex-start; gap: 4px; transform: scale(var(--hud)); transform-origin: 0 100%; pointer-events: none; }
#chat-feed .cl { max-width: 100%; box-sizing: border-box; padding: 3px 10px 4px; border-radius: 9px; background: rgba(8,6,12,.58); color: #f4efe2; font: 14px/1.3 Arial, sans-serif; overflow-wrap: anywhere; text-shadow: 0 1px 1px rgba(0,0,0,.6); transition: opacity .8s; }
#chat-feed .cl b { color: var(--cyan); margin-right: 1px; }
#chat-feed .cl.me b { color: var(--gold2); }
#chat-feed .cl.sys { color: #d6c79c; font-size: 12.5px; background: rgba(8,6,12,.42); }
#chat-feed .cl.bad { opacity: .55; text-decoration: line-through; }
#chat-feed .cl.old { opacity: 0; }
#chat-feed .cl:nth-last-child(n+7) { display: none; }
body.chatting #chat-feed .cl.old { opacity: .85; }
body.chatting #chat-feed .cl:nth-last-child(n+7) { display: block; }
body.chatting #chat-feed .cl:nth-last-child(n+13) { display: none; }
/* поле ввода — внизу слева (T) */
#chat-box { position: absolute; left: 18px; bottom: 26px; width: 400px; display: none; align-items: center; gap: 6px; padding: 6px; border-radius: 12px; background: rgba(8,6,12,.8); border: 2px solid var(--cyan); transform: scale(var(--hud)); transform-origin: 0 100%; pointer-events: auto; box-sizing: border-box; }
body.chatting #chat-box { display: flex; }
body.chatting .hud-bl { visibility: hidden; }
#chat-in { flex: 1; min-width: 0; font: 15px Arial, sans-serif; color: #fff; background: rgba(255,255,255,.08); border: 0; border-radius: 8px; padding: 8px 10px; outline: none; user-select: text; }
#chat-in::placeholder { color: rgba(255,255,255,.45); }
#chat-box button { flex: none; width: 36px; height: 34px; border: 0; border-radius: 8px; background: rgba(255,255,255,.12); color: #fff; font-size: 15px; cursor: pointer; padding: 0; }
#chat-box #chat-send { background: var(--cyan); color: #06222a; }
/* облачко над головой (или над машиной): ник и текст */
.bub { position: absolute; left: 0; top: 0; width: max-content; max-width: 240px; padding: 5px 10px 6px; border-radius: 12px; background: #fffaf0; color: #1d1a16; font: 14px/1.3 Arial, sans-serif; border: 2px solid #1d2433; box-shadow: 0 6px 16px rgba(0,0,0,.35); transform-origin: 50% 100%; overflow-wrap: anywhere; pointer-events: none; }
.bub b { display: block; font: 11px var(--font); letter-spacing: .3px; color: #0e7f99; margin-bottom: 1px; }
.bub.me b { color: #b35a10; }
.bub::after { content: ''; position: absolute; left: 50%; bottom: -12px; transform: translateX(-50%); border: 6px solid transparent; border-top-color: #1d2433; }
/* плашки у ника (js/net.js badges; какие у кого — решает сервер): чат, облачко, лобби. «Создатель» — красная с золотой
   каймой, с бегущим бликом; ник создателя с короной 👑 — золотой (в светлом облачке — тёмно-красный) */
.bdg { display: inline-block; font: bold 10px/1.3 Arial, sans-serif; letter-spacing: .06em; text-transform: uppercase; padding: 1px 6px; margin-right: 5px; border-radius: 6px; vertical-align: 1px; white-space: nowrap; color: #f4efe2; background: rgba(255,255,255,.16); border: 1px solid rgba(255,255,255,.25); text-shadow: 0 1px 1px rgba(0,0,0,.45); }
.bdg-creator { color: #fff7dc; border-color: #ffd34a; background: linear-gradient(110deg, #9e0015 0%, #e5172b 38%, #ff8a70 50%, #e5172b 62%, #9e0015 100%); background-size: 260% 100%; animation: bdgShine 3.6s linear infinite; box-shadow: 0 0 7px rgba(255,50,40,.55); }
@keyframes bdgShine { from { background-position: 100% 0; } to { background-position: -160% 0; } }
#chat-feed .cl b.nick-creator, .net-pl .nm .nick-creator { color: #ffd34a; }
.bub .nick-creator { color: #b0101f; }
.net-pl .nm .bdg { font-size: 11px; vertical-align: 2px; }
/* звания и VIP (виды — js/rules.js BADGE_STYLES; vip — только у привилегии VIP, creator — только у создателя) */
.bdg-vip { color: #2b1700; border-color: #fff3b0; background: linear-gradient(110deg, #c98a00 0%, #ffd34a 38%, #fff8d6 50%, #ffd34a 62%, #c98a00 100%); background-size: 260% 100%; animation: bdgShine 4s linear infinite; text-shadow: 0 1px 0 rgba(255,255,255,.4); box-shadow: 0 0 7px rgba(255,200,40,.5); }
.bdg-gold { color: #2b1a00; border-color: #fff0a8; background: linear-gradient(135deg, #ffe680, #f5b700 55%, #c98a00); text-shadow: 0 1px 0 rgba(255,255,255,.35); }
.bdg-legend { color: #fff3c4; border-color: #ffd34a; background: linear-gradient(120deg, #3d1078, #8f3fd6 45%, #c58bff 50%, #8f3fd6 55%, #3d1078); background-size: 260% 100%; animation: bdgShine 5s linear infinite; box-shadow: 0 0 7px rgba(170,90,255,.55); }
.bdg-red { color: #fff; border-color: #ff9a8a; background: linear-gradient(135deg, #ff1f2e, #a30012); }
.bdg-fire { color: #fff8e0; border-color: #ffcf6a; background: linear-gradient(110deg, #b31200, #ff5a00 35%, #ffc400 50%, #ff5a00 65%, #b31200); background-size: 260% 100%; animation: bdgShine 2.4s linear infinite; box-shadow: 0 0 8px rgba(255,110,0,.6); }
.bdg-shine { color: #3a2400; border-color: #fff6c8; background: linear-gradient(110deg, #b37a00, #ffd34a 38%, #fffbe0 50%, #ffd34a 62%, #b37a00); background-size: 260% 100%; animation: bdgShine 3s linear infinite; text-shadow: none; }
.bdg-blue { color: #fff; border-color: #8fd8ff; background: linear-gradient(135deg, #2b8cff, #0b4fb3); }
.bdg-green { color: #eafff0; border-color: #7dffb0; background: linear-gradient(135deg, #17b85c, #0a6b34); }
.bdg-violet { color: #fff; border-color: #ff9be6; background: linear-gradient(135deg, #e0219b, #7a1fd1); }
.bdg-silver { color: #1b1f24; border-color: #fff; background: linear-gradient(135deg, #f4f7fa, #a9b4bf); text-shadow: none; }
.bdg-black { color: #ffd34a; border-color: #ffd34a; background: linear-gradient(135deg, #2e2e33, #08080a); }
/* телефон: поле — сверху по центру (над экранной клавиатурой), лента — слева посередине */
body.touch #chat-box { left: 50%; top: 10px; bottom: auto; width: min(560px, 78vw); transform: translateX(-50%); transform-origin: 50% 0; }
body.touch #chat-in { font-size: 16px; }
body.touch #chat-box button { width: 46px; height: 42px; font-size: 18px; }
body.touch #chat-feed { top: 46%; bottom: auto; width: 320px; transform: scale(var(--hudt)); transform-origin: 0 0; }