:root{
  --bg:#060a1c;
  --bg2:#101a45;
  /* фон светлый, поэтому всё с белым текстом лежит на тёмном стекле */
  --panel:rgba(16,22,48,.62);
  --glass:rgba(16,22,48,.62);
  --panel-brd:rgba(255,255,255,.2);
  --txt:#eaf0ff;
  --muted:#8ea0cc;
  --cyan:#ffc83d;
  --violet:#ff6b3d;
  --pink:#ff5c8a;
  --green:#48e08a;
  --gold:#ffd54a;
  --shadow:0 10px 30px rgba(20,30,60,.3);
  /* цвета текущей локации — задаются из game.js (массив ZONES) */
  --z1:#7cc6ff; --z2:#ffb3d1; --z3:#8ee6c9;
  --zbase:#8fb3d6; --zmid:#b4d0ea;
  --zone-accent:#ffc83d;
}

*{box-sizing:border-box;margin:0;padding:0;-webkit-tap-highlight-color:transparent}

html{min-height:100%;background:var(--zbase)}
body{
  min-height:100%;
  font-family:"Naukino Emoji", "Trebuchet MS","Segoe UI",system-ui,-apple-system,sans-serif;
  color:var(--txt);
  background:var(--zbase);
  overflow-x:hidden;
}
/* фиксированный фон локации отдельным слоем — не зависит от прокрутки */
body::before{
  content:'';position:fixed;inset:0;z-index:-1;pointer-events:none;
  background:
    radial-gradient(1200px 700px at 15% -10%, var(--z1) 0%, transparent 60%),
    radial-gradient(900px 600px at 90% 10%, var(--z2) 0%, transparent 55%),
    radial-gradient(800px 800px at 50% 110%, var(--z3) 0%, transparent 60%),
    linear-gradient(160deg,var(--zbase) 0%,var(--zmid) 55%,var(--zbase) 100%);
  transition:background .8s ease;
}

/* ---------------- ЛОКАЦИЯ ЗАЕЗДА: задник и табличка ---------------- */
/* Задник рисуется кодом на этом холсте (массив ZONES в game.js). Лежит он
   над фоновым градиентом и под содержимым: у #app свой z-index 1, поэтому
   отрицательный z-index холсту не нужен — с ним задник уходил бы под
   собственный фон страницы и не был виден вовсе. */
.zone-scene{position:fixed;inset:0;z-index:0;pointer-events:none;
  width:100%;height:100%;opacity:.95;transition:opacity .6s ease}

.zone-chip{display:inline-flex;align-items:center;gap:6px;
  padding:4px 12px;border-radius:999px;
  background:var(--glass);border:1px solid var(--panel-brd);
  color:var(--txt);font-size:14px;font-weight:700;white-space:nowrap}
.zone-chip .z-ico{font-size:17px;line-height:1}
.zone-chip.is-new{animation:zPop .7s ease}
@keyframes zPop{0%{transform:scale(.7);opacity:0}55%{transform:scale(1.12)}100%{transform:scale(1)}}

/* ---------------- ГЕРОЙ-ШТУРМАН ---------------- */
.pilot{display:flex;align-items:center;gap:9px;margin:6px auto 0;max-width:640px;padding:0 10px}
.pilot .face{font-size:clamp(30px,7vw,40px);line-height:1;flex:none;
  filter:drop-shadow(0 0 12px rgba(120,200,255,.45))}
.pilot .say{flex:1;min-width:0;background:var(--glass);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);
  border:1px solid var(--panel-brd);border-radius:14px;padding:7px 12px;
  font-size:clamp(14px,3.4vw,16px);font-weight:600;color:var(--txt)}
.pilot .face.happy{animation:pJump .6s ease}
.pilot .face.sad{animation:pShake .5s ease}
@keyframes pJump{0%,100%{transform:translateY(0)}35%{transform:translateY(-13px) scale(1.09)}}
@keyframes pShake{0%,100%{transform:rotate(0)}25%{transform:rotate(-12deg)}75%{transform:rotate(12deg)}}

@media (max-width:560px){ .zone-chip .z-name{display:none} }
@media (prefers-reduced-motion:reduce){ .zone-deco span{animation:none !important} }

#app{position:relative;z-index:1;height:100%;}
.screen{min-height:100vh;min-height:100dvh;}
.hidden{display:none !important}

/* ---------------- МЕНЮ ---------------- */
/* собственный фон экрана меню: прокручивается вместе с контентом и виден всегда */
#menu{
  background:
    radial-gradient(1100px 650px at 12% 0%, rgba(255,255,255,.3) 0%, transparent 62%),
    radial-gradient(850px 520px at 96% 10%, rgba(255,236,150,.28) 0%, transparent 58%);
}
.menu-wrap{max-width:820px;margin:0 auto;padding:28px 18px 60px;display:flex;flex-direction:column;gap:16px}

.title-block{text-align:center;padding:14px 0 6px}
.logo{font-size:64px;line-height:1;filter:drop-shadow(0 0 22px rgba(255,200,61,.55));animation:float 3.4s ease-in-out infinite}
@keyframes float{0%,100%{transform:translateY(0) rotate(-6deg)}50%{transform:translateY(-12px) rotate(4deg)}}

h1{
  display:inline-block;
  font-size:clamp(34px,7vw,54px);letter-spacing:-1px;margin-top:6px;
  background:linear-gradient(92deg,var(--cyan),#fff 42%,var(--violet));
  -webkit-background-clip:text;background-clip:text;color:transparent;
  /* обводка тенью: белая середина градиента иначе тает на светлом фоне */
  filter:drop-shadow(0 3px 0 rgba(16,22,48,.75)) drop-shadow(0 0 14px rgba(16,22,48,.45));
}
.subtitle{display:table;color:var(--txt);margin:6px auto 0;font-size:16px;font-weight:700;
  background:var(--glass);border-radius:99px;padding:4px 14px}

.panel{
  background:var(--panel);
  border:1px solid var(--panel-brd);
  border-radius:20px;padding:18px;
  backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
  box-shadow:var(--shadow);
}
.panel-title{font-size:15px;font-weight:700;color:var(--muted);letter-spacing:.4px;margin-bottom:14px;text-transform:uppercase}

.chips{display:flex;flex-wrap:wrap;gap:10px}
.chip{
  font:inherit;font-size:19px;font-weight:700;color:var(--txt);
  background:rgba(255,255,255,.06);
  border:2px solid rgba(255,255,255,.14);
  border-radius:14px;padding:12px 0;cursor:pointer;
  flex:1 1 68px;min-width:68px;transition:.16s;
}
.chip:hover{transform:translateY(-2px);border-color:rgba(255,200,61,.5)}
.chip.on{
  background:linear-gradient(150deg,rgba(255,200,61,.28),rgba(255,107,61,.28));
  border-color:var(--cyan);
  box-shadow:0 0 22px rgba(255,200,61,.35),inset 0 0 18px rgba(255,200,61,.15);
}
/* наборы примеров: название и образец под ним */
.set-chips .chip{font-size:16px;flex:1 1 150px;padding:10px 8px;line-height:1.2}
.set-chips .chip small{display:block;font-size:12px;font-weight:600;opacity:.6;margin-top:3px}
.op-chips{margin-top:10px}
.op-chips .chip{font-size:16px;flex:1 1 140px;padding:11px 8px}
.diff-chips .chip{font-size:16px;padding:13px 8px;flex:1 1 120px}

.chip-actions{display:flex;flex-wrap:wrap;gap:8px;margin-top:12px}
.mini-btn{
  font:inherit;font-size:13px;color:var(--muted);background:var(--glass);
  border:1px solid var(--panel-brd);border-radius:10px;padding:8px 12px;cursor:pointer;transition:.15s;
}
.mini-btn:hover{color:var(--txt);border-color:var(--cyan)}
.mini-btn.danger:hover{color:var(--pink);border-color:var(--pink)}

.big-btn{
  font:inherit;font-size:24px;font-weight:800;letter-spacing:.5px;color:#04122a;
  background:linear-gradient(100deg,var(--cyan),#7ef0d0 45%,var(--violet));
  border:0;border-radius:20px;padding:20px;cursor:pointer;
  box-shadow:0 10px 34px rgba(255,200,61,.35);transition:.16s;
}
.big-btn:hover{transform:translateY(-3px);box-shadow:0 16px 44px rgba(255,200,61,.5)}
.big-btn:active{transform:translateY(0)}

.rank-head{display:flex;justify-content:space-between;align-items:flex-end;gap:12px}
.rank-label{font-size:12px;color:var(--muted);text-transform:uppercase;letter-spacing:.6px}
.rank-name{font-size:26px;font-weight:800;color:var(--gold);text-shadow:0 0 24px rgba(255,213,74,.4)}
.rank-right{text-align:right}
.rank-best{font-size:26px;font-weight:800;color:var(--cyan)}
.progress{height:12px;border-radius:99px;background:rgba(0,0,0,.35);overflow:hidden;margin:14px 0 8px;border:1px solid var(--panel-brd)}
.progress-fill{height:100%;width:0;border-radius:99px;background:linear-gradient(90deg,var(--cyan),var(--violet));transition:width .5s ease;box-shadow:0 0 14px rgba(255,200,61,.6)}
.rank-hint{font-size:13px;color:var(--muted)}

.stat-row{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin-top:16px}
.stat{background:rgba(0,0,0,.22);border-radius:14px;padding:12px 6px;text-align:center}
.stat b{display:block;font-size:22px;color:var(--txt)}
.stat span{font-size:11px;color:var(--muted)}

.weak-list{display:flex;flex-wrap:wrap;gap:8px}
.weak-item{background:rgba(255,92,138,.14);border:1px solid rgba(255,92,138,.4);color:#ffd0dd;
  border-radius:12px;padding:9px 13px;font-size:17px;font-weight:700}
.weak-item small{display:block;font-size:10px;font-weight:400;opacity:.7}
.muted{color:var(--muted);font-size:14px}

/* ---- бонусы: карточки в меню ---- */
.pow-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:10px}
.pow{display:flex;gap:11px;align-items:center;background:rgba(0,0,0,.22);
  border:1px solid var(--panel-brd);border-radius:14px;padding:10px}
.pow .ic{font-size:26px;line-height:1;filter:drop-shadow(0 0 10px var(--c))}
.pow .nm{font-size:14px;font-weight:700;line-height:1.15}
.pow .ds{font-size:11px;color:var(--muted);line-height:1.2}

/* ---- гараж: машина собирается тут же, в меню ---- */
.garage{display:flex;gap:16px;align-items:flex-start;flex-wrap:wrap;margin-bottom:12px}
.garage-view{flex:0 0 auto;display:flex;justify-content:center;align-items:center;
  background:radial-gradient(circle at 50% 42%,rgba(255,200,61,.16),rgba(0,0,0,.3) 70%);
  border:1px solid var(--panel-brd);border-radius:18px;padding:8px}
#carPreview{display:block;width:140px;height:170px}
.garage-picks{flex:1 1 300px;min-width:0;display:flex;flex-direction:column;gap:14px}
.garage-tabs{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:11px}
.garage-tab{position:relative;padding:6px 12px;border-radius:999px;cursor:pointer;
  background:rgba(0,0,0,.22);border:1px solid var(--panel-brd);color:var(--muted);
  font:inherit;font-size:12px;font-weight:700;transition:.15s}
.garage-tab:hover{color:var(--txt);border-color:rgba(255,200,61,.45)}
.garage-tab.on{color:var(--txt);border-color:var(--cyan);background:rgba(255,200,61,.13)}
.garage-tab .tab-left{margin-left:6px;padding:0 5px;border-radius:99px;font-size:10px;
  background:rgba(255,255,255,.12);color:var(--muted)}
.car-chips{display:flex;flex-wrap:wrap;gap:8px}
.car-chip{display:flex;flex-direction:column;align-items:center;gap:2px;width:76px;
  padding:6px 4px 7px;background:rgba(0,0,0,.22);border:1px solid var(--panel-brd);
  border-radius:14px;color:var(--txt);font:inherit;font-size:11px;cursor:pointer;transition:.15s}
.car-chip canvas{display:block;width:46px;height:52px}
.car-chip .nm{font-weight:700;line-height:1.15;text-align:center}
.car-chip .lock{font-size:10px;color:var(--muted);line-height:1.15}
.car-chip:hover{transform:translateY(-2px);border-color:rgba(255,200,61,.5)}
.car-chip.on{border-color:var(--cyan);background:rgba(255,200,61,.13);
  box-shadow:0 0 18px rgba(255,200,61,.28)}
.car-chip.locked{opacity:.42}
.car-chip.locked:hover{transform:none;border-color:var(--panel-brd)}
@media (max-width:560px){
  .garage-view{flex:1 1 100%}
  .car-chip{width:68px}
}

.ach-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:10px}
.ach{display:flex;gap:10px;align-items:center;background:rgba(0,0,0,.22);border:1px solid transparent;border-radius:14px;padding:10px;opacity:.4}
.ach.got{opacity:1;border-color:rgba(255,213,74,.5);background:rgba(255,213,74,.1)}
.ach .ic{font-size:26px;filter:grayscale(1)}
.ach.got .ic{filter:none}
.ach .nm{font-size:13px;font-weight:700;line-height:1.15}
.ach .ds{font-size:11px;color:var(--muted);line-height:1.15}
.ach-count{color:var(--gold);font-weight:800}

.footer-row{display:flex;flex-wrap:wrap;justify-content:space-between;gap:10px;padding:0 4px}

/* ---------------- ИГРА ---------------- */
#game{display:flex;flex-direction:column;height:100vh;height:100dvh;overflow:hidden}

.hud{display:flex;align-items:center;gap:10px;padding:10px 14px;background:var(--glass);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);border-bottom:1px solid var(--panel-brd)}
.hud-left,.hud-right{display:flex;align-items:center;gap:16px;flex:1}
.hud-right{justify-content:flex-end}
.hud-center{flex:0 0 auto}
.hud-item{display:flex;flex-direction:column;line-height:1.1}
.hud-cap{font-size:10px;color:var(--muted);text-transform:uppercase;letter-spacing:.6px}
.hud-item b{font-size:22px;color:var(--cyan)}
.hearts{font-size:20px;letter-spacing:2px}
.heart{transition:.3s}
.heart.lost{filter:grayscale(1);opacity:.28;transform:scale(.85)}
.icon-btn{font-size:18px;background:rgba(255,255,255,.08);border:1px solid var(--panel-brd);color:var(--txt);
  border-radius:10px;width:38px;height:38px;cursor:pointer}
.icon-btn:hover{border-color:var(--cyan)}
.combo{font-size:14px;color:var(--gold);background:var(--glass);border:1px solid rgba(255,213,74,.4);
  padding:6px 14px;border-radius:99px;animation:pop .3s}
.combo b{font-size:17px}
@keyframes pop{from{transform:scale(.7)}to{transform:scale(1)}}

.question-bar{padding:14px 14px 10px;text-align:center;position:relative}
.question{display:inline-block;font-size:clamp(38px,9vw,62px);font-weight:800;letter-spacing:1px;
  background:var(--glass);border:1px solid var(--panel-brd);border-radius:22px;padding:0 26px;
  backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);
  text-shadow:0 0 24px rgba(255,200,61,.45);transition:.2s}
.question.flash{animation:qflash .4s}
@keyframes qflash{0%{transform:scale(1)}40%{transform:scale(1.12)}100%{transform:scale(1)}}
.timebar{height:8px;border-radius:99px;background:rgba(0,0,0,.4);overflow:hidden;margin:10px auto 0;max-width:560px;border:1px solid var(--panel-brd)}
.timebar-fill{height:100%;width:100%;border-radius:99px;background:linear-gradient(90deg,var(--green),var(--cyan))}
.timebar-fill.warn{background:linear-gradient(90deg,var(--gold),var(--pink));animation:blink .5s infinite alternate}
@keyframes blink{to{opacity:.5}}

.stage{position:relative;flex:1;min-height:260px}
#cv{position:absolute;inset:0;display:block;cursor:pointer}
/* ---- активные силы поверх игрового поля ---- */
.fx{position:absolute;left:10px;top:10px;display:flex;flex-wrap:wrap;gap:6px;pointer-events:none;max-width:60%}
.fx-chip{display:flex;align-items:center;gap:5px;font-size:12px;font-weight:700;color:var(--txt);
  background:rgba(6,12,34,.72);border:1px solid rgba(255,200,61,.45);border-radius:99px;
  padding:5px 11px;box-shadow:0 0 16px rgba(255,200,61,.25);backdrop-filter:blur(4px);animation:pop .25s}
.fx-chip .ic{font-size:15px}

.hint{position:absolute;right:12px;bottom:10px;text-align:right;font-size:12px;color:var(--txt);
  background:var(--glass);border-radius:12px;padding:6px 10px;
  pointer-events:none;transition:opacity .5s;max-width:46%}

/* ---------------- ОВЕРЛЕЙ ---------------- */
.overlay{position:fixed;inset:0;background:rgba(4,7,20,.82);backdrop-filter:blur(8px);
  display:flex;align-items:center;justify-content:center;padding:20px;z-index:50;animation:fade .25s}
@keyframes fade{from{opacity:0}to{opacity:1}}
.modal{background:linear-gradient(160deg,rgba(30,40,90,.95),rgba(12,18,48,.97));
  border:1px solid var(--panel-brd);border-radius:24px;padding:26px;max-width:520px;width:100%;
  box-shadow:var(--shadow);text-align:center;max-height:88vh;overflow-y:auto;animation:rise .3s}
@keyframes rise{from{transform:translateY(24px);opacity:0}to{transform:none;opacity:1}}
.modal h2{font-size:30px;margin-bottom:6px}
.modal .big-score{font-size:56px;font-weight:800;color:var(--cyan);text-shadow:0 0 40px rgba(255,200,61,.5);line-height:1.1}
.modal .sub{color:var(--muted);margin-bottom:16px;font-size:14px}
.modal .stat-row{grid-template-columns:repeat(3,1fr)}
.modal .stat.wide{grid-column:1/-1;background:rgba(255,200,61,.12);border:1px solid rgba(255,200,61,.3)}
.modal-btns{display:flex;gap:10px;margin-top:18px}
.modal-btns button{flex:1;font:inherit;font-size:17px;font-weight:700;padding:15px;border-radius:15px;cursor:pointer;border:0;transition:.15s}
.btn-primary{background:linear-gradient(100deg,var(--cyan),var(--violet));color:#04122a}
.btn-ghost{background:rgba(255,255,255,.08);color:var(--txt);border:1px solid var(--panel-brd) !important}
.modal-btns button:hover{transform:translateY(-2px)}
.new-record{color:var(--gold);font-weight:800;font-size:18px;margin-bottom:10px;animation:pop .4s}
.modal .sec-title{font-size:12px;color:var(--muted);text-transform:uppercase;letter-spacing:.6px;margin:18px 0 8px;text-align:left}

/* ---------------- ТОСТЫ ---------------- */
.toasts{position:fixed;top:14px;right:14px;display:flex;flex-direction:column;gap:8px;z-index:80;pointer-events:none}
.toast{display:flex;gap:10px;align-items:center;background:linear-gradient(120deg,rgba(255,213,74,.22),rgba(255,107,61,.22)),rgba(16,22,48,.85);
  border:1px solid rgba(255,213,74,.55);border-radius:14px;padding:10px 16px;box-shadow:var(--shadow);
  animation:slidein .35s, fadeout .4s 2.6s forwards;backdrop-filter:blur(6px)}
.toast .ic{font-size:26px}
.toast .nm{font-size:14px;font-weight:800}
.toast .ds{font-size:11px;color:var(--muted)}
@keyframes slidein{from{transform:translateX(120%);opacity:0}to{transform:none;opacity:1}}
@keyframes fadeout{to{opacity:0;transform:translateX(40%)}}

@media (max-width:520px){
  .stat-row{grid-template-columns:repeat(2,1fr)}
  .hud-item b{font-size:18px}
  .menu-wrap{padding:18px 12px 40px}
}

/* ---------- кнопка возврата на страницу игры ---------- */
/* Игра открыта в рамке сайта (docs/09-games.md), и эта кнопка — её выход:
   она просит страницу закрыть окно игры. Открытая отдельной вкладкой игра
   кнопку убирает — возвращаться неоткуда. */
/* Место, которое кнопка занимает в левом верхнем углу. Игры, у которых там
   своя строка (счёт, прогресс), сдвигают её на эти величины: на широком
   экране вбок, на телефоне вниз — рядом с кнопкой строке уже не хватило бы
   ширины и она полезла бы под кнопки звука справа. */
:root{ --exit-space:124px; --exit-drop:0px; }
@media (max-width:640px){ :root{ --exit-space:0px; --exit-drop:54px; } }

.exit-btn{
  display:inline-flex; align-items:center; gap:6px;
  height:46px; padding:0 16px; flex:none;
  border:none; border-radius:16px;
  background:#fff; color:#3D3455;
  font:inherit; font-size:16px; font-weight:800; line-height:1;
  white-space:nowrap; cursor:pointer;
  box-shadow:0 3px 0 rgba(61,52,85,.12);
}
.exit-btn:hover{ background:#F2EFFF; }
.exit-btn:active{ transform:translateY(2px); box-shadow:0 1px 0 rgba(61,52,85,.12); }
/* Вариант для игр без собственной верхней панели: тот же левый верхний угол,
   только сам по себе. Ниже модальных окон игры (у них z-index от 80). */
.exit-btn--float{ position:fixed; top:10px; left:10px; z-index:60; }
@media (max-width:480px){
  .exit-btn{ height:40px; padding:0 12px; font-size:14px; }
  .exit-btn--float{ top:6px; left:6px; }
}
/* полоса счёта начинается правее кнопки «Выйти» */
.hud{ padding-left:calc(14px + var(--exit-space)); padding-top:calc(10px + var(--exit-drop)); }