:root{
  --bg:#0a0e17; --panel:#111827; --neon:#22d3ee; --neon2:#a78bfa;
  --green:#22c55e; --red:#ef4444; --gold:#fbbf24; --text:#e5e7eb;
}
*{box-sizing:border-box; font-family:'Segoe UI',system-ui,Arial,sans-serif}
body{margin:0;background:var(--bg);color:var(--text);overflow-x:hidden}
#bg-grid{position:fixed;inset:0;z-index:-1;
  background-image:linear-gradient(rgba(34,211,238,.07) 1px,transparent 1px),
  linear-gradient(90deg,rgba(34,211,238,.07) 1px,transparent 1px);
  background-size:40px 40px;}
.screen{display:none;min-height:100vh;flex-direction:column;align-items:center;justify-content:center;padding:20px}
.screen.active{display:flex}
.game-title{font-size:64px;letter-spacing:6px;margin:10px 0 0;text-shadow:0 0 18px var(--neon)}
.game-title span{color:var(--neon);display:block;font-size:34px;letter-spacing:14px}
.subtitle{opacity:.7;margin-top:4px}
.logo-wrap{display:flex;flex-direction:column;align-items:center}
#logo-canvas{filter:drop-shadow(0 0 12px var(--neon))}
.menu-buttons{display:flex;flex-direction:row;gap:14px;margin-top:26px;flex-wrap:wrap;justify-content:center}
.btn{border:1px solid #334155;background:var(--panel);color:var(--text);
  padding:14px 22px;font-size:18px;border-radius:12px;cursor:pointer;transition:.15s}
.btn:hover{transform:translateY(-1px)}
.btn.neon{border-color:var(--neon);box-shadow:0 0 14px rgba(34,211,238,.35);color:#cffafe}
.btn.ghost{opacity:.85}
.btn.danger{border-color:var(--red);color:#fecaca}
.btn.small{font-size:14px;padding:8px 14px}
.btn.unit b{color:var(--gold)}
.btn.cmd.active{border-color:var(--green);box-shadow:0 0 10px rgba(34,197,94,.5)}
.menu-footer{margin-top:22px;opacity:.65;font-size:13px;display:flex;gap:16px}
.modal{position:fixed;inset:0;background:rgba(0,0,0,.6);display:flex;align-items:center;justify-content:center}
.modal.hidden{display:none}
.modal-box{background:var(--panel);border:1px solid var(--neon);border-radius:14px;padding:24px;min-width:320px;display:flex;flex-direction:column;gap:12px}
.row{display:flex;gap:10px;flex-wrap:wrap}
.screen-title{font-size:40px;margin:0;text-shadow:0 0 14px var(--neon2)}
.screen-sub{opacity:.7}
.levels{display:flex;gap:18px;margin:26px 0;flex-wrap:wrap;justify-content:center}
.level-card{width:230px;background:var(--panel);border:2px solid #334155;border-radius:16px;
  color:var(--text);padding:20px;cursor:pointer;transition:.15s}
.level-card:hover:not(:disabled){transform:scale(1.04)}
.level-card:disabled{opacity:.45;cursor:not-allowed}
.level-card.done{border-color:var(--green);box-shadow:0 0 14px rgba(34,197,94,.4)}
.lvl-num{font-size:44px;font-weight:800;color:var(--neon)}
.lvl-name{font-size:20px;font-weight:700;margin:6px 0}
.lvl-desc{opacity:.7;font-size:14px;min-height:40px}
.lvl-state{margin-top:8px;font-weight:700}
.levels-footer{display:flex;gap:18px;align-items:center}
/* game */
#game-screen{justify-content:flex-start;padding:10px}
#hud-top{width:min(1280px,96vw);display:flex;gap:14px;align-items:center;background:var(--panel);
  border:1px solid #334155;border-radius:10px;padding:8px 12px}
#hud-level{font-weight:700}
#hud-gold{margin-left:auto;color:var(--gold);font-weight:800;font-size:18px}
#hud-mode{opacity:.9}
#hint-bar{width:min(1280px,96vw);margin:8px 0;background:#0f172a;border:1px solid var(--neon2);
  border-radius:10px;padding:8px 14px;min-height:38px;color:#ede9fe}
#canvas-wrap{position:relative;width:min(1280px,96vw)}
#game{width:100%;border:1px solid #334155;border-radius:12px;background:#87a96b;display:block;cursor:crosshair;touch-action:none}
#btn-cam-l,#btn-cam-r{min-width:58px;font-size:19px;touch-action:none;user-select:none}
#hud-bottom{width:min(1280px,96vw);display:flex;gap:10px;align-items:center;background:var(--panel);
  border:1px solid #334155;border-radius:10px;padding:8px 12px;margin-top:8px;flex-wrap:wrap}
#hud-help{opacity:.55;font-size:12px;margin-left:auto}
/* круглые кнопки спавна как в Stick War: Legacy — только иконка + цена */
.btn-round{position:relative;width:72px;height:72px;border-radius:50%;border:2px solid #334155;
  background:radial-gradient(circle at 35% 30%,#1e293b,#0b1220);cursor:pointer;
  display:flex;align-items:center;justify-content:center;transition:.15s;padding:0}
.btn-round svg{width:40px;height:40px;filter:drop-shadow(0 0 4px rgba(34,211,238,.4))}
.btn-round:hover:not(.poor){border-color:var(--neon);transform:scale(1.07);box-shadow:0 0 12px rgba(34,211,238,.45)}
.btn-round .cost{position:absolute;bottom:-9px;left:50%;transform:translateX(-50%);
  background:#0b1220;border:1px solid var(--gold);color:var(--gold);font-size:12px;font-weight:800;
  border-radius:10px;padding:1px 8px;white-space:nowrap}
.btn-round.poor{opacity:.45;filter:grayscale(.8);cursor:not-allowed}
.unit-sep{width:1px;align-self:stretch;background:#334155;margin:0 4px}
#end-overlay{position:absolute;inset:0;background:rgba(2,6,23,.82);display:flex;flex-direction:column;
  gap:12px;align-items:center;justify-content:center;border-radius:12px}
#end-overlay.hidden{display:none}
#end-title{font-size:52px;margin:0}
/* звёздочка снятия выбора */
#btn-deselect{width:44px;height:44px;border-radius:50%;border:2px solid var(--red);
  background:#1c0a0a;cursor:pointer;padding:2px;margin-left:auto}
#btn-deselect.hidden{display:none}
#btn-deselect svg{width:100%;height:100%}
/* баннер подкрепления */
#reinforce-banner{position:absolute;top:14px;left:50%;transform:translateX(-50%);
  background:rgba(127,29,29,.92);border:2px solid var(--red);color:#fecaca;
  font-size:22px;font-weight:800;padding:10px 26px;border-radius:12px;white-space:nowrap}
#reinforce-banner.hidden{display:none}
/* панель ручного управления юнитом */
#unit-panel{display:flex;gap:8px;align-items:center;background:#0b1220;border:1px solid var(--neon);
  border-radius:12px;padding:6px 10px}
#unit-panel.hidden{display:none}
#up-title{font-size:13px;max-width:150px}
#up-bag{width:90px;height:12px;background:#000;border:1px solid var(--gold);border-radius:6px;overflow:hidden}
#up-bag.hidden{display:none}
#up-bag-fill{height:100%;width:0;background:var(--gold)}
.btn-round.mini{width:46px;height:46px;font-size:22px}
.btn-round.mini.hidden{display:none}
.btn-round.mini .cost{display:none}
/* ===== Главное меню в духе Stick War: Legacy (свои арты, CSS-камень + золото) ===== */
#menu-screen.swl-menu{position:relative;overflow:hidden;justify-content:flex-start;padding:0;
  background:#14100b;}
#menu-bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.swl-veil{position:absolute;inset:0;
  background:radial-gradient(ellipse at 50% 30%,transparent 30%,rgba(0,0,0,.55) 75%,rgba(0,0,0,.85)),
  linear-gradient(rgba(0,0,0,.25),rgba(0,0,0,.45));}
.swl-title-wrap{position:relative;margin-top:7vh;text-align:center;z-index:2}
.swl-title{font-family:Georgia,'Times New Roman',serif;font-weight:900;font-size:min(96px,11vw);
  letter-spacing:8px;color:#f5d76e;
  background:linear-gradient(#fff6c9 15%,#f5d76e 40%,#8a6d1c 60%,#f5d76e 85%);
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;
  filter:drop-shadow(0 3px 0 #2a1f08) drop-shadow(0 0 22px rgba(245,215,110,.35));}
.swl-tagline{color:#d6c48f;letter-spacing:6px;font-size:15px;margin-top:6px;text-shadow:0 2px 4px #000}
.swl-play{position:relative;z-index:2;margin-top:4vh;font-family:Georgia,serif;font-weight:900;
  font-size:34px;letter-spacing:4px;color:#2a1c05;padding:16px 90px;border-radius:14px;cursor:pointer;
  background:linear-gradient(#ffe9a3,#f5c542 45%,#b8860b 90%);border:3px solid #6b4e0e;
  box-shadow:0 6px 0 #4a3508,0 0 34px rgba(245,197,66,.5);transition:.12s}
.swl-play:hover{transform:translateY(-2px) scale(1.02);box-shadow:0 8px 0 #4a3508,0 0 50px rgba(245,197,66,.7)}
.swl-play:active{transform:translateY(3px);box-shadow:0 2px 0 #4a3508}
.swl-modes{position:relative;z-index:2;display:flex;gap:16px;margin-top:4vh;flex-wrap:wrap;justify-content:center}
.swl-mode{display:flex;flex-direction:column;align-items:center;gap:4px;width:150px;padding:14px 6px 10px;
  font-size:34px;color:#f0e2b6;background:linear-gradient(#3a332b,#241f18);border:2px solid #8a6d1c;
  border-radius:12px;cursor:pointer;box-shadow:0 4px 0 #100c07;transition:.12s}
.swl-mode span{font-size:15px;letter-spacing:1px}
.swl-mode:hover:not(.locked){border-color:#f5d76e;transform:translateY(-2px)}
.swl-mode.locked{opacity:.55;filter:grayscale(.6)}
.swl-bottom{position:absolute;bottom:34px;left:0;right:0;z-index:2;display:flex;gap:10px;
  align-items:center;justify-content:center;color:#cbbd93;font-size:13px;flex-wrap:wrap;padding:0 12px}
.swl-icon{width:52px;height:52px;border-radius:50%;font-size:24px;color:#f0e2b6;cursor:pointer;
  background:radial-gradient(circle at 35% 30%,#4a4238,#1c1712);border:2px solid #8a6d1c;box-shadow:0 3px 0 #100c07}
.swl-icon:hover{border-color:#f5d76e}
.swl-icon.off{opacity:.45;filter:grayscale(1)}
.swl-version{position:absolute;bottom:8px;width:100%;text-align:center;color:#8a7c58;font-size:11px;z-index:2}
#toast{position:absolute;top:16px;left:50%;transform:translateX(-50%);z-index:5;
  background:rgba(20,16,11,.95);border:2px solid #8a6d1c;color:#f5d76e;font-size:18px;font-weight:700;
  padding:10px 26px;border-radius:12px;white-space:nowrap}
#toast.hidden{display:none}
/* ===== Экран входа (сплэш) ===== */
#splash{background:radial-gradient(ellipse at 50% 30%,#2a2118,#100c07 75%)}
.splash-box{display:flex;flex-direction:column;align-items:center;gap:22px}
.splash-title{font-size:min(72px,10vw)}
.splash-sound{width:120px;height:120px;border-radius:50%;font-size:60px;cursor:pointer;
  background:radial-gradient(circle at 35% 30%,#4a4238,#1c1712);border:3px solid #f5d76e;
  box-shadow:0 0 34px rgba(245,197,66,.5);animation:pulse 1.6s infinite}
.splash-sound.off{filter:grayscale(1);animation:none;box-shadow:none;border-color:#5b5344}
@keyframes pulse{0%,100%{transform:scale(1)}50%{transform:scale(1.07)}}
.splash-sub{color:#cbbd93;font-size:15px;letter-spacing:1px}
.splash-quiet{background:none;border:none;color:#8a7c58;font-size:14px;cursor:pointer;text-decoration:underline}
.splash-quiet:hover{color:#cbbd93}
/* ===== Десктоп пошире ===== */
#hud-top,#hint-bar,#canvas-wrap,#hud-bottom{width:min(1600px,96vw)}
/* ===== Мобильная адаптация ===== */
#rotate-tip{display:none}
@media (max-width:820px){
  .screen{padding:8px}
  #hud-top{gap:8px;padding:6px 8px;font-size:13px;flex-wrap:wrap}
  #hud-gold{font-size:16px}
  #btn-deselect{width:38px;height:38px}
  #hint-bar{font-size:13px;min-height:32px;padding:6px 10px}
  #canvas-wrap{width:100vw;max-width:100vw}
  #game{border-radius:0;border-left:none;border-right:none}
  #hud-bottom{gap:8px;padding:6px 8px;width:100vw;max-width:100vw;border-radius:0}
  .btn-round{width:56px;height:56px}
  .btn-round svg{width:32px;height:32px}
  .btn-round .cost{font-size:10px;bottom:-8px}
  .btn-round.mini{width:42px;height:42px;font-size:18px}
  .btn.cmd{font-size:14px;padding:8px 10px}
  #hud-help{display:none}
  #unit-panel{padding:4px 6px;gap:6px}
  #up-title{font-size:11px;max-width:110px}
  #end-title{font-size:34px}
  .level-card{width:min(340px,92vw)}
  .swl-play{font-size:24px;padding:12px 50px}
  .swl-mode{width:min(150px,42vw);font-size:28px}
  .swl-title{letter-spacing:4px}
}
@media (max-width:820px) and (orientation:portrait){
  #rotate-tip{display:block;text-align:center;color:#f5d76e;font-size:13px;
    background:rgba(20,16,11,.9);border:1px solid #8a6d1c;border-radius:8px;
    padding:4px 10px;margin:0 auto 4px;width:fit-content;max-width:94vw}
}
/* горизонтальный телефон: вписываем поле в свободную высоту, иначе видно только небо */
@media (max-width:950px) and (orientation:landscape){
  #game-screen{padding:0;position:relative;justify-content:center}
  #rotate-tip{display:none}
  #canvas-wrap{width:min(100vw,calc(100vh*16/9));width:min(100vw,calc(100dvh*16/9));margin:0 auto;max-width:100vw}
  #game{border-radius:0;border-left:none;border-right:none}
  #hud-top{position:absolute;top:0;left:0;right:0;width:100%;max-width:100%;z-index:5;
    font-size:12px;padding:4px 8px;gap:6px;border-radius:0;border-left:none;border-right:none;
    background:rgba(17,24,39,.88)}
  #hint-bar{position:absolute;top:42px;left:50%;transform:translateX(-50%);z-index:5;
    width:max-content;max-width:92vw;font-size:12px;padding:4px 10px;min-height:0;margin:0;
    background:rgba(15,23,42,.88)}
  #hud-bottom{position:absolute;bottom:0;left:0;right:0;width:100%;max-width:100%;z-index:5;
    padding:4px 8px;gap:6px;border-radius:0;border-left:none;border-right:none;
    background:rgba(17,24,39,.88)}
  #hud-gold{font-size:15px}
  .btn-round{width:48px;height:48px}
  .btn-round svg{width:28px;height:28px}
  .btn-round .cost{font-size:9px}
  .btn.cmd{font-size:13px;padding:6px 8px}
  #unit-panel{padding:3px 6px}
}