:root{ --ink:#22303a; --cream:#fff6e3; --copper:#f08a2e; --copper-d:#b35c17; --gold:#ffd23f; }
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{font-family:Rubik,system-ui,sans-serif;color:var(--ink);min-height:100vh;overflow-x:hidden;
  background:linear-gradient(180deg,#5db6d8 0%,#bfe9f2 58%,#d9f2e0 100%);}

/* ---------- живой фон ---------- */
.bgfx{position:fixed;inset:0;z-index:0;pointer-events:none;overflow:hidden}
.cloud{position:absolute;width:130px;height:40px;background:#fff;border-radius:40px;opacity:.9;
  box-shadow:34px -20px 0 6px #fff,-36px -12px 0 0 #fff,8px -30px 0 -6px #fff;animation:drift linear infinite}
@keyframes drift{from{transform:translateX(-24vw) scale(var(--s,1))}to{transform:translateX(118vw) scale(var(--s,1))}}
.bg-gear{position:absolute;opacity:.09;color:#17435a;animation:spin 70s linear infinite}
.bg-gear svg{display:block}
@keyframes spin{to{transform:rotate(360deg)}}
.bg-hills{position:fixed;left:0;right:0;bottom:0;width:100%;height:22vh;z-index:0;pointer-events:none}
@media (prefers-reduced-motion:reduce){.cloud,.bg-gear{animation:none}}

.wrap{position:relative;z-index:1}

/* ---------- шапка ---------- */
.top{max-width:1120px;margin:0 auto;padding:26px 16px 8px;display:flex;flex-wrap:wrap;gap:18px;align-items:flex-end;justify-content:space-between}
.brand{display:flex;gap:16px;align-items:center}
.logo-box{background:linear-gradient(160deg,#ffb257,#e0762f);border:3px solid var(--ink);border-radius:16px;padding:6px;box-shadow:0 6px 0 rgba(34,48,58,.9);flex:none}
.logo-box canvas{display:block;width:64px;height:64px}
h1{font-family:'Press Start 2P',monospace;font-size:clamp(24px,4.6vw,44px);color:var(--copper);text-shadow:3px 3px 0 var(--ink),6px 6px 0 rgba(34,48,58,.18);letter-spacing:2px;line-height:1}
.tag{margin-top:8px;font-weight:700;color:#33505f;font-size:15px}
.chips{display:flex;gap:8px;flex-wrap:wrap;margin-top:10px}
.chip{font-family:'Press Start 2P',monospace;font-size:9px;background:var(--cream);border:2px solid var(--ink);border-radius:999px;padding:6px 11px;box-shadow:0 3px 0 var(--ink)}
.top-right{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.best-chip{font-family:'Press Start 2P',monospace;font-size:10px;background:#fff;border:2px solid var(--ink);border-radius:12px;padding:9px 12px;box-shadow:0 3px 0 var(--ink)}
.btn{font-family:'Press Start 2P',monospace;font-size:10px;cursor:pointer;background:var(--gold);border:2px solid var(--ink);border-radius:12px;padding:10px 13px;box-shadow:0 3px 0 var(--ink);transition:transform .08s}
.btn:hover{transform:translateY(-2px)}.btn:active{transform:translateY(2px);box-shadow:0 1px 0 var(--ink)}

/* ---------- кабина игры ---------- */
.cab{max-width:1000px;margin:20px auto 8px;padding:14px 14px 18px;background:linear-gradient(180deg,#3a4c5b,#2c3a46);
  border:3px solid var(--ink);border-radius:24px;box-shadow:0 10px 0 #16222c,0 28px 44px rgba(16,40,52,.35)}
.cab-top{display:flex;justify-content:space-between;align-items:center;padding:2px 8px 12px;gap:10px}
.cab-name{font-family:'Press Start 2P',monospace;font-size:11px;color:#cfe6f2;letter-spacing:2px}
.cab-right{display:flex;align-items:center;gap:12px}
.leds{display:flex;gap:7px}
.led{width:11px;height:11px;border-radius:50%;border:2px solid #16222c}
.led.r{background:#ff6b5c}.led.a{background:#ffb13f}
.led.g{background:#59e08a;animation:ledblink 2.2s infinite}
@keyframes ledblink{0%,60%{opacity:1}70%,90%{opacity:.35}100%{opacity:1}}
.fs-btn{font-family:'Press Start 2P',monospace;font-size:9px;cursor:pointer;background:#ffd23f;color:#22303a;border:2px solid #16222c;border-radius:9px;padding:7px 9px;box-shadow:0 3px 0 #16222c}
.fs-btn:active{transform:translateY(2px);box-shadow:0 1px 0 #16222c}
.screen-frame{position:relative;background:#0c1318;border-radius:16px;padding:10px;box-shadow:inset 0 0 0 3px #080d10,inset 0 8px 22px rgba(0,0,0,.65)}
canvas#game{display:block;width:100%;height:auto;border-radius:9px;background:#0c1318;aspect-ratio:960/576;touch-action:none}
.scan{display:none}

/* ---------- полный экран (нативный и запасной .fs) ---------- */
.cab:fullscreen,.cab.fs{position:fixed;inset:0;max-width:none;width:100%;margin:0;border-radius:0;
  display:flex;flex-direction:column;box-shadow:none;overflow:hidden;z-index:60;border-width:0;background:#2c3a46;padding:10px}
.cab:fullscreen .screen-frame,.cab.fs .screen-frame{flex:1;display:flex;align-items:center;justify-content:center;padding:0;border-radius:0;background:#05080a;min-height:0}
.cab:fullscreen canvas#game,.cab.fs canvas#game{width:100%;height:100%;object-fit:contain;border-radius:0}
.cab:fullscreen .scan,.cab.fs .scan{display:none}

/* ---------- телефон горизонтально = игра на весь экран ---------- */
@media (pointer:coarse) and (orientation:landscape) and (max-height:520px){
  .top,.legend,.howto,footer,.bgfx,.bg-hills{display:none}
  .wrap{padding:0}
  body{background:#2c3a46}
  .cab{max-width:none;margin:0;border:none;border-radius:0;box-shadow:none;padding:0;
    height:100vh;height:100dvh;display:flex;flex-direction:column}
  .cab-top{display:none}
  .screen-frame{flex:1;display:flex;align-items:center;justify-content:center;padding:0;border-radius:0;background:#05080a;min-height:0}
  canvas#game{width:100%;height:100%;object-fit:fill;border-radius:0}
  .scan{inset:0;border-radius:0}
  .tbtn{width:56px;height:56px;font-size:22px}
  .tbtn.jump{width:72px;height:72px}
}

/* ---------- сенсорные кнопки: прозрачные, поверх игры ---------- */
.touch{display:none;position:absolute;left:0;right:0;bottom:10px;padding:0 14px;
  justify-content:space-between;align-items:flex-end;user-select:none;pointer-events:none;z-index:5}
.touch.show{display:flex}
.touch .grp{display:flex;gap:12px;pointer-events:auto}
.tbtn{width:64px;height:64px;border-radius:50%;border:3px solid rgba(255,255,255,.55);
  background:rgba(16,26,36,.35);color:rgba(255,255,255,.9);font-size:26px;display:grid;place-items:center;
  touch-action:none;-webkit-tap-highlight-color:transparent;pointer-events:auto;backdrop-filter:blur(2px)}
.tbtn:active{background:rgba(255,255,255,.35)}
.tbtn.jump{width:84px;height:84px;background:rgba(240,138,46,.45);border-color:rgba(255,255,255,.65);
  font-family:'Press Start 2P',monospace;font-size:11px}

/* ---------- легенда и панели ---------- */
.legend{max-width:1000px;margin:18px auto 0;padding:0 12px;display:flex;gap:12px;overflow-x:auto;scrollbar-width:thin}
.litem{min-width:136px;background:var(--cream);border:2px solid var(--ink);border-radius:16px;box-shadow:0 4px 0 var(--ink);padding:12px 10px;text-align:center;flex:none}
.litem canvas{width:48px;height:48px}
.litem b{display:block;font-family:'Press Start 2P',monospace;font-size:9px;margin:6px 0 5px}
.litem span{font-size:12.5px;line-height:1.35;color:#4a5f6c}
.howto{max-width:1000px;margin:18px auto;padding:0 12px;display:grid;grid-template-columns:1.05fr .95fr;gap:16px}
@media(max-width:760px){.howto{grid-template-columns:1fr}}
.panel{background:var(--cream);border:3px solid var(--ink);border-radius:18px;box-shadow:0 6px 0 var(--ink);padding:18px 20px}
.panel h2{font-family:'Press Start 2P',monospace;font-size:13px;margin-bottom:14px;display:flex;align-items:center;gap:10px}
.panel h2::before{content:'';width:14px;height:14px;background:var(--copper);border:2px solid var(--ink);border-radius:4px;transform:rotate(45deg)}
.krow{display:flex;justify-content:space-between;align-items:center;gap:10px;padding:7px 0;border-bottom:2px dashed rgba(34,48,58,.18);font-size:14.5px}
.krow:last-child{border-bottom:0}
kbd{font-family:'Press Start 2P',monospace;font-size:9px;background:#eef4f7;border:2px solid var(--ink);border-bottom-width:4px;border-radius:8px;padding:5px 8px;white-space:nowrap}
.tips li{margin:0 0 10px 18px;font-size:14.5px;line-height:1.45}
.tips li::marker{content:'⚙ ';color:var(--copper-d)}
footer{max-width:1000px;margin:6px auto 40px;padding:0 16px;text-align:center;font-size:13px;color:#3c5462;line-height:1.6}
footer b{color:var(--copper-d)}