/* ================= v3.3: мобильная версия =================
   Всё под body.mobile — на ПК эти правила не действуют. Безопасные зоны (вырез камеры, скругления) —
   через env(safe-area-inset-*), для этого в index.html viewport-fit=cover. */
:root { --sl: env(safe-area-inset-left, 0px); --sr: env(safe-area-inset-right, 0px); --st: env(safe-area-inset-top, 0px); --sb: env(safe-area-inset-bottom, 0px); --tb: 64px; }
body.mobile { -webkit-touch-callout: none; -webkit-tap-highlight-color: transparent; touch-action: none; overscroll-behavior: none; }
body.mobile #app, body.mobile canvas { touch-action: none; }

/* ---------- слои управления ---------- */
.t-look { position: absolute; inset: 0; touch-action: none; }
.t-ctl { position: absolute; inset: 0; z-index: 45; pointer-events: none; font-family: Rubik, system-ui, sans-serif; }
.t-ctl > * { pointer-events: auto; }
.t-ctl[data-mode="foot"] .m-drive-only, .t-ctl[data-mode="foot"] .m-cut-only,
.t-ctl[data-mode="drive"] .m-foot-only, .t-ctl[data-mode="drive"] .m-cut-only,
.t-ctl[data-mode="cut"] .m-foot-only, .t-ctl[data-mode="cut"] .m-drive-only, .t-ctl[data-mode="cut"] .t-top { display: none !important; }
body:not(.m-small) .m-small-only { display: none !important; }

.t-btn { width: var(--tb); height: var(--tb); border-radius: 50%; display: flex; align-items: center; justify-content: center; color: #fff; font: 800 22px/1 Rubik, system-ui, sans-serif;
  background: rgba(20, 22, 24, .55); border: 2px solid rgba(255,255,255,.28); opacity: .6; touch-action: none; user-select: none; -webkit-user-select: none;
  box-shadow: 0 4px 14px rgba(0,0,0,.35); transition: opacity .08s, transform .08s, background .08s; }
.t-btn.on { opacity: 1; transform: scale(.94); background: rgba(233,196,106,.55); border-color: #e9c46a; }
.t-btn.lit { opacity: .95; background: rgba(47,90,78,.8); border-color: #7fd1b8; }
.t-btn.big { width: calc(var(--tb) + 8px); height: calc(var(--tb) + 8px); font-size: 26px; }
.t-btn.sm { width: 48px; height: 48px; font-size: 20px; border-radius: 14px; }

/* джойстик: зона слева снизу, база появляется под пальцем */
.t-joyzone { position: absolute; left: 0; bottom: 0; width: 40vw; height: 62vh; touch-action: none; }
.t-joy { position: absolute; left: calc(var(--sl) + 96px); top: calc(100% - var(--sb) - 96px); width: 120px; height: 120px; margin: -60px 0 0 -60px; border-radius: 50%;
  background: radial-gradient(circle, rgba(255,255,255,.10) 0%, rgba(255,255,255,.05) 60%, rgba(255,255,255,.14) 100%); border: 2px solid rgba(255,255,255,.3); opacity: .55; pointer-events: none; transition: opacity .1s; }
.t-joy.act { opacity: 1; }
.t-knob { position: absolute; left: 50%; top: 50%; width: 52px; height: 52px; margin: -26px 0 0 -26px; border-radius: 50%; background: rgba(241,237,226,.85); box-shadow: 0 3px 10px rgba(0,0,0,.45); }
body[data-joy="s"] .t-joy { width: 100px; height: 100px; margin: -50px 0 0 -50px; }
body[data-joy="l"] .t-joy { width: 152px; height: 152px; margin: -76px 0 0 -76px; }
body[data-joy="l"] .t-knob { width: 62px; height: 62px; margin: -31px 0 0 -31px; }

/* кнопки действий: сетка 2×3 справа снизу (вертикальный столбец из 6 кнопок не влезает по высоте в альбомный телефон) */
.t-actions { position: absolute; right: calc(var(--sr) + 14px); bottom: calc(var(--sb) + 14px); display: grid; grid-template-columns: repeat(2, auto); gap: 10px 12px; align-items: center; justify-items: center; }
.t-actions .use { grid-column: 2; grid-row: 3; } .t-actions .throw { grid-column: 2; grid-row: 2; } .t-actions .jump { grid-column: 1; grid-row: 3; }
.t-actions .punch { grid-column: 1; grid-row: 2; } .t-actions .crouch { grid-column: 1; grid-row: 1; } .t-actions .more { grid-column: 2; grid-row: 1; }
.t-more { position: absolute; right: calc(var(--sr) + 170px); bottom: calc(var(--sb) + 150px); display: flex; gap: 8px; padding: 8px; border-radius: 16px; background: rgba(16,17,17,.62); }

/* педали и руль */
.t-pedals { position: absolute; left: calc(var(--sl) + 16px); bottom: calc(var(--sb) + 16px); display: flex; gap: 14px; align-items: flex-end; }
.t-pedal { width: 76px; height: 132px; border-radius: 18px; display: flex; align-items: flex-end; justify-content: center; padding-bottom: 12px; color: #fff; font: 800 15px Rubik, sans-serif; letter-spacing: .06em;
  background: rgba(20,22,24,.55); border: 2px solid rgba(255,255,255,.28); opacity: .65; touch-action: none; }
.t-pedal.gas { height: 150px; background: linear-gradient(0deg, rgba(47,90,78,.7), rgba(20,22,24,.5)); }
.t-pedal.brake { background: linear-gradient(0deg, rgba(120,36,32,.7), rgba(20,22,24,.5)); }
.t-pedal.on { opacity: 1; transform: scale(.96); border-color: #e9c46a; }
.t-wheel { position: absolute; right: calc(var(--sr) + 16px); bottom: calc(var(--sb) + 18px); width: min(300px, 34vw); height: 72px; border-radius: 36px; background: rgba(20,22,24,.5); border: 2px solid rgba(255,255,255,.28); touch-action: none; }
.t-wheel::before { content: '◀  РУЛЬ  ▶'; position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; color: rgba(255,255,255,.35); font: 700 12px Rubik, sans-serif; letter-spacing: .15em; }
html[lang="en"] .t-wheel::before { content: '◀  STEER  ▶'; }
.t-wheel-knob { position: absolute; left: 50%; top: 50%; width: 60px; height: 60px; margin: -30px 0 0 -30px; border-radius: 50%; background: rgba(241,237,226,.9); box-shadow: 0 3px 10px rgba(0,0,0,.45); transition: transform .12s ease-out; }
.t-wheel:active .t-wheel-knob { transition: none; }
body.m-gyro .t-wheel { display: none !important; }
.t-dbtns { position: absolute; right: calc(var(--sr) + 16px); bottom: calc(var(--sb) + 104px); display: grid; grid-template-columns: repeat(5, auto); gap: 8px; justify-items: center; align-items: center; }
.t-dbtns .t-btn:not(.sm) { width: 54px; height: 54px; font-size: 22px; }
.t-dbtns .t-btn.sm { width: 44px; height: 44px; font-size: 18px; }
.t-vol { position: absolute; left: calc(var(--sl) + 200px); bottom: calc(var(--sb) + 22px); display: flex; align-items: center; gap: 6px; padding: 6px 10px; border-radius: 20px; background: rgba(16,17,17,.55); color: #fff; font-size: 16px; }
.t-vol input { width: 110px; accent-color: #e9c46a; }
.t-skip { position: absolute; right: calc(var(--sr) + 20px); bottom: calc(var(--sb) + 20px); width: auto; height: 52px; padding: 0 20px; border-radius: 26px; font-size: 16px; opacity: .85; }

/* верхняя панель */
.t-top { position: absolute; right: calc(var(--sr) + 10px); top: calc(var(--st) + 8px); display: flex; gap: 8px; }
.t-top .t-btn.sm { width: 44px; height: 44px; font-size: 19px; }

/* левша: зеркальная раскладка */
body.m-left .t-joyzone { left: auto; right: 0; }
body.m-left .t-joy { left: auto; right: calc(var(--sr) + 36px); }
body.m-left .t-actions { right: auto; left: calc(var(--sl) + 14px); }
body.m-left .t-more { right: auto; left: calc(var(--sl) + 170px); }
body.m-left .t-pedals { left: auto; right: calc(var(--sr) + 16px); }
body.m-left .t-wheel, body.m-left .t-dbtns { right: auto; left: calc(var(--sl) + 16px); }
body.m-left .t-vol { left: auto; right: calc(var(--sr) + 200px); }

/* ---------- адаптивный HUD ---------- */
body.mobile .hud .inv { bottom: calc(var(--sb) + 10px); gap: 10px; pointer-events: auto; }
body.mobile .slot { width: 54px; height: 54px; font-size: 26px; touch-action: none; }
body.mobile .slot.press { transform: scale(.92); border-color: #fff; }
body.mobile .invname { bottom: calc(var(--sb) + 74px); font-size: 14px; }
body.mobile .held { bottom: calc(var(--sb) + 118px); font-size: 15px; }
body.mobile .bars { left: calc(var(--sl) + 10px); top: calc(var(--st) + 8px); bottom: auto; width: 210px; padding: 6px 10px; }
body.mobile .bar { grid-template-columns: 70px 1fr; font-size: 12px; }
body.mobile .tasks { left: calc(var(--sl) + 10px); top: calc(var(--st) + 70px); font-size: 14px; }
body.mobile .topright { right: calc(var(--sr) + 10px); top: calc(var(--st) + 60px); }
body.mobile .toasts { right: auto; left: 50%; transform: translateX(-50%); align-items: center; top: calc(var(--st) + 92px); max-width: 50vw; }   /* по центру: справа кнопки, слева полоски */
body.mobile .toast { font-size: 15px; }
body.mobile .prompts .pr { font-size: 16px; }
body.mobile .hint { top: calc(var(--st) + 10px); font-size: 16px; max-width: 52vw; }
body.mobile .dlg { bottom: calc(var(--sb) + 96px); font-size: 18px; max-width: min(620px, 56vw); }
body.mobile .dlg-next { font-size: 16px; padding: 8px 16px; bottom: -18px; }
body.mobile .crosshair { width: 5px; height: 5px; margin: -2.5px 0 0 -2.5px; }
body.mobile .crosshair.active { transform: scale(1.6); }            /* 5 → 8 px на интерактиве */
body.mobile .lockhint, body.mobile .help { display: none !important; }
body.mobile .fps { right: auto; left: 50%; bottom: auto; top: calc(var(--st) + 4px); transform: translateX(-50%); }
body.mobile .radio-ind { left: calc(var(--sl) + 12px); top: calc(var(--st) + 8px); font-size: 15px; }
body.mobile .radio-news { left: calc(var(--sl) + 12px); top: calc(var(--st) + 44px); font-size: 13px; }
body.mobile .phud .p-panel { left: calc(var(--sl) + 10px); top: calc(var(--st) + 70px); font-size: 14px; transform: scale(.92); transform-origin: top left; }
body.mobile .p-dash { right: auto; left: 50%; transform: translateX(-50%); bottom: calc(var(--sb) + 8px); min-width: 170px; text-align: center; }
body.mobile .p-dash .spd { font-size: 32px; }
body.mobile .p-phone { right: calc(var(--sr) + 70px); top: calc(var(--st) + 60px); pointer-events: auto; font-size: 17px; padding: 14px 18px; }
body.mobile .p-shop { pointer-events: auto; bottom: calc(var(--sb) + 90px); font-size: 17px; }
body.mobile .p-shop .row { padding: 7px 4px; border-bottom: 1px solid rgba(255,255,255,.08); }
body.mobile .p-shop kbd { min-width: 30px; font-size: 15px; line-height: 22px; }
body.mobile .p-caption { font-size: 18px; max-width: 60vw; }
body.mobile .p-skip { display: none; }                               /* вместо «держи Space» — кнопка */
body.mobile .p-siphon { width: min(420px, 60vw); }
body.mobile .invpanel { display: none !important; }                  /* drag & drop окно — только ПК; на мобиле ячейки 1–4 */

/* маленький экран: задачи и таймер — по кнопке 📋, FPS скрыт */
body.mobile.m-small .tasks, body.mobile.m-small .topright { display: none; }
body.mobile.m-small.m-tasks-open .tasks, body.mobile.m-small.m-tasks-open .topright { display: block; }
body.mobile.m-small .tasks { z-index: 46; }
body.mobile.m-small .fps { display: none !important; }
body.mobile.m-small { --tb: 58px; }

/* ---------- меню на мобиле ---------- */
body.mobile .card { padding: 18px 20px; max-height: calc(100vh - var(--st) - var(--sb) - 12px); }
body.mobile .card.main { width: min(560px, 92vw); }
body.mobile .logo span { font-size: 44px; }
body.mobile .blurb { font-size: 15px; margin: 10px 0 12px; }
body.mobile .btn { font-size: 18px; padding: 14px 18px; min-height: 52px; }
body.mobile .chip { font-size: 16px; padding: 9px 14px; }
body.mobile .chips { flex-wrap: wrap; }
body.mobile .set { grid-template-columns: 170px 1fr 44px; font-size: 16px; padding: 9px 0; }
body.mobile .set.chk { grid-template-columns: 1fr 44px; } body.mobile .set.chk input { width: 26px; height: 26px; }
body.mobile .set input[type=range] { height: 30px; }
body.mobile .keys { grid-template-columns: 1fr; font-size: 16px; }
body.mobile .krow kbd { min-width: 150px; font-size: 13px; }
body.mobile .col { flex-direction: row; flex-wrap: wrap; } body.mobile .col .btn { flex: 1 1 40%; }
.btn.install { background: #23384a; border-color: #3f6a8a; }
.contsub { font-size: 12px; opacity: .6; margin-top: -4px; }

/* ---------- экраны мобилы ---------- */
.m-rotate, .m-tap { position: fixed; inset: 0; display: none; flex-direction: column; align-items: center; justify-content: center; gap: 12px; text-align: center; padding: 24px; color: #f1ede2; font-family: Rubik, system-ui, sans-serif; }
.m-rotate { z-index: 90; background: #0e0f10; }
.m-rotate b, .m-tap b { font: 400 26px 'Russo One', Rubik, sans-serif; color: #e9c46a; }
.m-rotate span, .m-tap span { font-size: 16px; opacity: .75; max-width: 420px; }
.m-phone { font-size: 72px; animation: mRot 2.2s ease-in-out infinite; }
@keyframes mRot { 0%, 25% { transform: rotate(0); } 55%, 100% { transform: rotate(-90deg); } }
@media (orientation: portrait) { body.mobile .m-rotate { display: flex; } }
.m-tap { display: flex; z-index: 70; background: rgba(8,9,9,.82); }
.m-ico { font-size: 64px; animation: mPulse 1.4s ease-in-out infinite; }
@keyframes mPulse { 50% { transform: scale(1.12); } }
.m-toast { position: fixed; left: 50%; top: calc(var(--st) + 60px); transform: translateX(-50%); z-index: 80; display: flex; flex-direction: column; gap: 6px; align-items: center; pointer-events: none; }
.m-toast-i { background: rgba(16,17,17,.88); border-left: 4px solid #e9c46a; padding: 9px 14px; border-radius: 8px; color: #fff; font: 500 15px Rubik, sans-serif; transition: opacity .4s; }
.m-toast-i.out { opacity: 0; }
/* меню должно прокручиваться пальцем, хотя остальная страница touch-action: none */
body.mobile .menu, body.mobile .card { touch-action: pan-y; -webkit-overflow-scrolling: touch; overscroll-behavior: contain; }