:root {
  --bg: #0f1115;
  --fg: #e8eef6;
  --muted: #9aa7b5;
  --card: #171a21;
  --stroke: #2a2f3a;
}

html, body {
  margin: 0;
  height: 100%;
  background: var(--bg);
  color: var(--fg);
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
}

#topbar {
  display: flex;
  gap: 12px;
  align-items: center;
  justify-content: space-between;
  padding: 10px 12px;
  border-bottom: 1px solid var(--stroke);
}

#c {
  display: block;
  width: 100%;
  height: calc(100vh - 220px);
  background: radial-gradient(1200px 600px at 50% 20%, #151a24, #0f1115);
}

#panel {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  padding: 12px;
  background: rgba(15,17,21,0.9);
  backdrop-filter: blur(10px);
  border-top: 1px solid var(--stroke);
}

.row {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 10px;
}

button {
  background: var(--card);
  color: var(--fg);
  border: 1px solid var(--stroke);
  border-radius: 12px;
  padding: 10px 12px;
  font-weight: 600;
}

button:disabled {
  opacity: 0.5;
}

#status, #speedVal, #angleVal {
  color: var(--muted);
  font-size: 14px;
}

#hint {
  color: var(--muted);
  font-size: 12px;
  line-height: 1.35;
}

/* ======================================================
   [DIFFICULTY OVERLAY - STAGE 1]
   Простая модалка поверх игры.
   Комментарий-ориентир: ".overlay"
   ====================================================== */
.overlay {
  position: fixed;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  background: rgba(15,17,21,0.65);
  backdrop-filter: blur(10px);
  z-index: 10001;
}

.overlay.hidden {
  display: none;
}

.overlayCard {
  width: min(420px, 100%);
  background: rgba(23,26,33,0.95);
  border: 1px solid var(--stroke);
  border-radius: 18px;
  padding: 16px;
  box-shadow: 0 10px 30px rgba(0,0,0,0.35);
}

.overlayTitle {
  font-size: 18px;
  font-weight: 800;
  margin-bottom: 4px;
}

.overlaySubtitle {
  color: var(--muted);
  font-size: 13px;
  margin-bottom: 12px;
}

.overlayBtns {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
}

.overlayBtn {
  width: 100%;
  padding: 12px;
  border-radius: 14px;
}

.overlayHint {
  margin-top: 10px;
  color: var(--muted);
  font-size: 12px;
}

/* ======================================================
   [MAIN MENU + DIFFICULTY MENU - STAGE MENU]
   Красивые экраны меню (под одиночку/мультиплеер).
   Файлы ассетов:
   - webapp/assets/logo.svg
   (иконки сейчас эмодзи, можно заменить на SVG внутри кнопок)
   ====================================================== */

body.menu-open #topbar {
  display: none;
}

body.menu-open #panel {
  display: none;
}

body.menu-open canvas#c {
  opacity: 0.15;
}

.menuCard {
  width: min(380px, 92vw);
  background: rgba(20, 20, 22, 0.92);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 34px;
  padding: 22px 18px;
  box-shadow: 0 18px 50px rgba(0,0,0,0.45);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 18px;
}

.menuLogo {
  width: min(260px, 70vw);
  height: auto;
  user-select: none;
  -webkit-user-drag: none;
}

.menuButtons {
  width: 100%;
  display: grid;
  gap: 14px;
}

.menuBtn {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 16px 18px;
  border-radius: 18px;
  background: rgba(255,255,255,0.95);
  border: 1px solid rgba(0,0,0,0.06);
  color: #111;
  font-weight: 900;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  box-shadow: 0 10px 20px rgba(0,0,0,0.22);
}

.menuBtn:active {
  transform: translateY(1px);
}

.menuBtn[disabled] {
  opacity: 0.55;
  filter: grayscale(0.8);
}

.menuBtnIcon {
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  font-size: 26px;
}

.menuBtnText {
  flex: 1;
  text-align: left;
  font-size: 22px;
}

.menuBtnBack .menuBtnIcon {
  font-size: 30px;
}

/* ======================================================
   [GARAGE MENU]
   Выбор спрайта машины.
   Комментарий-ориентир: ".garageGrid"
   ====================================================== */

.garageCard {
  gap: 14px;
}

.garageTitle {
  font-weight: 900;
  letter-spacing: 0.6px;
  text-transform: uppercase;
  font-size: 20px;
  margin-top: -4px;
}

.garageGrid {
  width: 100%;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
}

.garageCar {
  width: 100%;
  aspect-ratio: 1 / 1;
  padding: 10px;
  border-radius: 18px;
  background: rgba(255,255,255,0.92);
  border: 2px solid rgba(0,0,0,0.10);
  box-shadow: 0 10px 20px rgba(0,0,0,0.18);
}

.garageCar img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  user-select: none;
  -webkit-user-drag: none;
}

.garageCar.selected {
  border-color: rgba(40, 175, 255, 0.95);
  box-shadow: 0 12px 24px rgba(40, 175, 255, 0.20);
}

/* ======================================================
   [WIN OVERLAY]
   Небольшая модалка при победе.
   Комментарий-ориентир: ".winCard"
   ====================================================== */
.winCard {
  width: min(420px, 94vw);
  background: rgba(23,26,33,0.96);
  border: 1px solid var(--stroke);
  border-radius: 22px;
  padding: 18px 16px;
  box-shadow: 0 16px 50px rgba(0,0,0,0.45);
}

.winTitle {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 20px;
  font-weight: 900;
  margin-bottom: 14px;
}

.winIcon {
  font-size: 24px;
}

.winButtons {
  display: grid;
  gap: 10px;
}

.winBtn {
  width: 100%;
  padding: 14px 12px;
  border-radius: 16px;
  background: rgba(255,255,255,0.92);
  border: 1px solid rgba(0,0,0,0.08);
  color: #111;
  font-weight: 900;
}

.winBtn:active {
  transform: translateY(1px);
}

.winBtnPrimary {
  background: #ffcc00;
  border-color: rgba(0,0,0,0.15);
}

.menuBtnBack .menuBtnText {
  text-transform: none;
  letter-spacing: 0;
}

/* [UI STATE] Скрываем кнопку "К машине", когда открыто меню сложности */
body.menu-open #btnFocusCar,
body.menu-open .btnFocusCar,
body.menu-open #cameraHomeBtn,
body.menu-open .cameraHomeBtn {
  display: none !important;
}



/* [MENU ICONS] PNG внутри кнопок */
.menuBtnIcon img {
  width: 34px;
  height: 34px;
  object-fit: contain;
  display: block;
}


/* ======================================================
   [MINIMAL CONTROL BAR - STAGE CONTROLS]
   Новое минимальное управление (3 кнопки).
   Комментарий-ориентир: "#controlBar"
   ====================================================== */

#controlBar{
  position: fixed;
  left: 16px;
  right: 16px;
  bottom: calc(16px + env(safe-area-inset-bottom));
  height: 90px;
  padding: 12px;
  display: grid;
  grid-template-columns: 1.35fr 0.7fr 1fr;
  gap: 16px;
  align-items: center;
  border-radius: 26px;
  background: rgba(0,0,0,0.60);
  box-shadow: 0 18px 40px rgba(0,0,0,0.55);
  z-index: 50;
}

/* когда открыто меню — панель управления скрыта (у тебя уже есть правило, но подстрахуемся) */
body.menu-open #controlBar{
  display: none;
}

.ctrlBtn{
  height: 100%;
  width: 100%;
  border: 0;
  border-radius: 22px;
  outline: none;
  background: #2e2e2e;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.06);
}

.ctrlBtn:active{
  transform: translateY(1px);
}

.ctrlLeft{
  background: rgba(120,120,120,0.35);
}

.ctrlCar{
  display: grid;
  place-items: center;
  background: rgba(0,0,0,0.15);
}

.ctrlCar img{
  width: 56px;
  height: 56px;
  object-fit: contain;
  display: block;
}

.ctrlAction{
  background: #3b6f3b; /* default: gas */
}

/* Индикация стадий правой кнопки */
.ctrlAction.stage-speed{ background: #d1b100; } /* желтый */
.ctrlAction.stage-angle{ background: #d36b1a; } /* оранжевый */
.ctrlAction.stage-gas{ background: #3b6f3b; }   /* зелёный */

.ctrlBtn[disabled]{
  opacity: 0.65;
}

/* Прячем legacy-кнопки, но оставляем их в DOM */
.legacyHidden{
  position: absolute;
  left: -99999px;
  top: -99999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* Переносим индикаторы выше controlBar, чтобы не перекрывались */
.indicatorsRow{
  position: fixed;
  left: 16px;
  right: 16px;
  bottom: calc(16px + env(safe-area-inset-bottom) + 140px + 12px);
  display: flex;
  justify-content: space-between;
  gap: 12px;
  z-index: 50;
}

#speedVal, #angleVal{
  background: rgba(0,0,0,0.35);
  padding: 8px 12px;
  border-radius: 14px;
  color: rgba(255,255,255,0.85);
  font-weight: 700;
}

/* [A11Y] visually hidden text */
.srOnly{position:absolute;left:-9999px;top:auto;width:1px;height:1px;overflow:hidden;}


/* [TOPBAR LOGO] маленький логотип без увеличения высоты строки */
#status{display:flex;align-items:center;gap:10px;}
#topLogo{height:18px;width:auto;display:block;}


/* [CLEANUP] убираем мусорные подписи и подсказку снизу */
#speedVal,#angleVal{display:none !important;}
#hint{display:none !important;}