@import url('https://fonts.googleapis.com/css2?family=Share+Tech+Mono&family=Playfair+Display:ital@0;1&display=swap');
*{box-sizing:border-box;margin:0;padding:0;-webkit-tap-highlight-color:transparent}
:root{
  --bg:#FDFCF7;--ink:#242424;--ink2:#6B6B6B;--ink3:#ADADAD;
  --zone-l:#B8C4D0;--zone-r:#F2D4B8;
  --accent:#D65108;--border-col:#D9D4C7;
  --pop-hi:#8A9A5B;--pop-mid:#C4A84A;--pop-lo:#D65108;
  --mode-dev:#4A8A5B;--mode-atk:#C0392B;--mode-def:#2E6DA4;--mode-neu:#888;
}
html{height:100%;-webkit-text-size-adjust:100%}
body{background:var(--bg);color:var(--ink);font-family:'Share Tech Mono',monospace;overflow:hidden;min-height:100%;min-height:100dvh;height:100vh;height:100dvh;width:100%;max-width:100vw}
/* Полная ширина на десктопе; боковые поля от краёв экрана */
#wrap{width:100%;max-width:none;margin:0 auto;min-height:100vh;min-height:100dvh;height:100vh;height:100dvh;display:flex;flex-direction:column;gap:4px;box-sizing:border-box;padding-top:max(8px,env(safe-area-inset-top,0px));padding-bottom:max(8px,env(safe-area-inset-bottom,0px));padding-left:max(clamp(10px,2.5vw,40px),env(safe-area-inset-left,0px));padding-right:max(clamp(10px,2.5vw,40px),env(safe-area-inset-right,0px))}
#s-casus{display:flex;flex-direction:column;align-items:center;justify-content:center;flex:1}
#cb-paper{background:var(--bg);border:1px solid var(--accent);border-left:4px solid var(--accent);padding:20px 24px;max-width:min(440px,100%);width:100%;box-shadow:3px 3px 0 rgba(214,81,8,.1)}
#cb-toprow{display:flex;justify-content:space-between;align-items:center;margin-bottom:8px}
#cb-seal{font-size:15px;letter-spacing:5px;color:var(--accent)}
#cb-langbtn{font-family:'Share Tech Mono',monospace;font-size:9px;padding:3px 8px;border:1px solid var(--accent);background:transparent;color:var(--accent);cursor:pointer;letter-spacing:2px}
#cb-langbtn:hover,#cb-btn:hover{background:var(--accent);color:var(--bg)}
#cb-head{text-align:center;font-size:9px;letter-spacing:3px;text-transform:uppercase;color:var(--ink2);margin-bottom:12px}
#cb-body{font-family:'Playfair Display',serif;font-size:13px;line-height:1.85;min-height:68px}
#cb-date{margin-top:12px;text-align:right;font-size:10px;color:var(--ink2);font-style:italic;font-family:'Playfair Display',serif}
#cb-btn{margin-top:16px;font-family:'Share Tech Mono',monospace;font-size:11px;padding:9px 26px;border:1px solid var(--accent);background:transparent;color:var(--accent);cursor:pointer;letter-spacing:2px;display:none}
#s-menu{display:none;flex:1;flex-direction:column;align-items:center;justify-content:center;min-height:0}
.menu-inner{display:flex;flex-direction:column;align-items:center;gap:14px;width:100%;max-width:420px;padding:12px 8px}
.menu-logo{font-size:clamp(28px,8vw,44px);letter-spacing:0.35em;font-weight:bold;color:var(--accent);text-transform:uppercase}
.menu-o{display:inline-block;animation:menuPulse 2.4s ease-in-out infinite}
@keyframes menuPulse{0%,100%{transform:scale(1);opacity:1}50%{transform:scale(1.06);opacity:0.85}}
.menu-tagline{font-family:'Playfair Display',serif;font-size:12px;color:var(--ink2);text-align:center;line-height:1.5;max-width:32em}
.menu-cta{font-family:'Share Tech Mono',monospace;font-size:13px;padding:12px 32px;width:min(100%,280px);border:1px solid var(--accent);background:var(--accent);color:var(--bg);cursor:pointer;letter-spacing:3px;text-transform:uppercase}
.menu-cta:hover{filter:brightness(1.05)}
.menu-row{display:flex;gap:8px;flex-wrap:wrap;justify-content:center}
.menu-secondary{font-family:'Share Tech Mono',monospace;font-size:10px;padding:8px 16px;border:1px solid var(--border-col);background:var(--bg);color:var(--ink2);cursor:pointer;letter-spacing:1px}
.menu-secondary:hover{border-color:var(--accent);color:var(--accent)}
.menu-version{font-size:8px;color:var(--ink3);letter-spacing:2px}
.menu-credits{font-family:'Playfair Display',serif;font-size:10px;color:var(--ink2);text-align:center;line-height:1.6;margin-top:16px}
.menu-credits a{color:var(--accent);text-decoration:none}
.menu-credits a:hover{text-decoration:underline}
#s-settings,#s-help{display:none;position:fixed;inset:0;z-index:200;align-items:center;justify-content:center;background:rgba(253,252,247,.92);backdrop-filter:blur(10px);padding:16px}
.settings-panel,.help-panel{border:1px solid var(--border-col);border-left:3px solid var(--accent);background:var(--bg);padding:20px 22px;max-width:min(480px,100%);width:100%;box-shadow:4px 4px 0 rgba(36,36,36,.06);max-height:90vh;display:flex;flex-direction:column}
.settings-h,.help-h{font-size:11px;letter-spacing:3px;text-transform:uppercase;color:var(--ink2);margin-bottom:12px;border-bottom:1px solid var(--border-col);padding-bottom:8px}
.help-content{font-family:'Playfair Display',serif;font-size:13px;color:var(--ink);line-height:1.7;overflow-y:auto;white-space:pre-wrap;padding-right:8px}
.help-content b{font-family:'Share Tech Mono',monospace;color:var(--accent);font-weight:normal;font-size:12px}
.settings-stub{font-family:'Playfair Display',serif;font-size:12px;color:var(--ink2);line-height:1.65;margin-bottom:14px}
#s-game{display:none;flex:1;flex-direction:column;gap:4px;position:relative;min-height:0}
#topbar{display:flex;justify-content:space-between;align-items:center;padding-bottom:5px;border-bottom:1px solid var(--border-col);flex-shrink:0;gap:8px}
.topbar-left{display:flex;align-items:center;gap:6px;min-width:0}
#gtitle{font-size:11px;letter-spacing:5px;color:var(--accent);text-transform:uppercase}
#pause-overlay{display:none;position:absolute;inset:0;z-index:40;align-items:center;justify-content:center;flex-direction:column;background:rgba(253,252,247,.82);backdrop-filter:blur(8px);padding:16px}
.pause-panel{display:flex;flex-direction:column;align-items:stretch;gap:10px;width:100%;max-width:280px}
.pause-title{text-align:center;font-size:13px;letter-spacing:4px;color:var(--accent);text-transform:uppercase;margin-bottom:4px}
#topright{display:flex;gap:4px;align-items:center}
.mbt{font-family:'Share Tech Mono',monospace;font-size:9px;padding:3px 7px;border:1px solid var(--border-col);background:transparent;color:var(--ink2);cursor:pointer;letter-spacing:1px}
.mbt.on{background:var(--ink);color:var(--bg);border-color:var(--ink)}
#lang-btn{border-color:var(--accent);color:var(--accent)}
select#diff-sel{font-family:'Share Tech Mono',monospace;font-size:9px;padding:3px 5px;border:1px solid var(--border-col);background:var(--bg);color:var(--ink2);cursor:pointer}
#arena{position:relative;flex:1;min-height:0;overflow:hidden;border:1px solid var(--border-col)}
#map-canvas,#ui-canvas{position:absolute;inset:0;width:100%;height:100%}
#ui-canvas{pointer-events:none}
.pbw{position:absolute;bottom:0;height:35%;width:32px;z-index:5;pointer-events:none;display:flex;flex-direction:column;justify-content:flex-end}
#pb-l{left:0;background:rgba(253,252,247,.0)}
#pb-r{right:0;background:rgba(253,252,247,.0)}
.pbg{width:100%;flex:1;position:relative;overflow:hidden;background:rgba(36,36,36,.10);border-top:1px solid rgba(36,36,36,.15)}
.pbf{position:absolute;bottom:0;width:100%;transition:height .3s,background .4s}
.pbn{position:absolute;width:100%;text-align:center;font-size:7px;z-index:2;padding:1px 0;bottom:2px;color:#242424;font-weight:bold;background:rgba(253,252,247,.82);}
#m-narr{position:absolute;top:40%;left:5%;right:5%;background:var(--ink);padding:10px 14px;font-size:11px;color:var(--bg);font-family:'Share Tech Mono',monospace;text-transform:uppercase;letter-spacing:1px;z-index:20;pointer-events:none;opacity:0;transition:opacity .5s;text-align:center;box-shadow:0 8px 16px rgba(0,0,0,0.3)}
#m-news{position:absolute;top:20px;left:20px;right:20px;background:#fdfcf7;border-top:3px solid var(--ink);border-bottom:1px solid var(--ink);padding:8px 10px;text-align:center;font-size:14px;color:var(--ink);font-family:'Playfair Display',serif;font-weight:700;letter-spacing:1px;text-transform:uppercase;pointer-events:none;opacity:0;z-index:30;transition:opacity .5s;box-shadow:0 4px 15px rgba(0,0,0,.15)}
#m-thresh{position:absolute;top:20px;right:20px;display:none;flex-direction:column;align-items:flex-end;justify-content:center;z-index:25;background:rgba(253,252,247,.95);padding:14px 18px;text-align:right;font-size:12px;line-height:1.4;color:var(--ink);font-family:'Playfair Display',serif;font-style:italic;border-right:3px solid var(--accent);box-shadow:0 6px 20px rgba(0,0,0,.15);max-width:260px;pointer-events:none}
#m-thresh strong{font-style:normal;font-size:16px;color:var(--accent);display:block;margin-bottom:4px;letter-spacing:1px;font-weight:700;text-transform:uppercase}
#infostrip{display:flex;justify-content:space-between;align-items:center;flex-shrink:0;padding:3px 2px}
.itn{font-size:11px;color:var(--ink)}
#info-dead{font-size:9px;color:var(--accent);letter-spacing:1px}
#mode-row{display:grid;grid-template-columns:1fr 1fr;gap:4px;flex-shrink:0}
.mode-panel{border:1px solid var(--border-col);background:var(--bg);padding:6px 8px;position:relative}
.mode-label{font-size:8px;letter-spacing:1px;color:var(--ink2);text-transform:uppercase;margin-bottom:4px}
.p-name{font-family:'Share Tech Mono',monospace;color:var(--accent);font-size:9px;letter-spacing:1.5px}
.p-sep{opacity:0.3;margin:0 2px}
.mode-btns{display:flex;gap:3px}
.mbtn{font-family:'Share Tech Mono',monospace;font-size:9px;padding:5px 0;flex:1;border:1px solid var(--border-col);background:transparent;color:var(--ink2);cursor:pointer;letter-spacing:1px;transition:all .15s;text-align:center}
.mbtn.dev{border-color:var(--mode-dev);color:var(--mode-dev)}
.mbtn.atk{border-color:var(--mode-atk);color:var(--mode-atk)}
.mbtn.def{border-color:var(--mode-def);color:var(--mode-def)}
.mbtn.active-dev{background:var(--mode-dev);color:#fff;border-color:var(--mode-dev)}
.mbtn.active-atk{background:var(--mode-atk);color:#fff;border-color:var(--mode-atk)}
.mbtn.active-def{background:var(--mode-def);color:#fff;border-color:var(--mode-def)}
.mbtn:disabled{opacity:.3;cursor:default}
.mode-status{font-size:8px;margin-top:4px;height:12px;letter-spacing:.5px}
.mode-cd{position:absolute;bottom:0;left:0;height:2px;background:var(--accent);transition:width .1s linear;width:0%}
#ctrl-row{display:grid;grid-template-columns:1fr 1fr;gap:4px;flex-shrink:0}
.abtn{font-family:'Share Tech Mono',monospace;font-size:11px;padding:12px 0;border:1px solid var(--border-col);background:var(--bg);color:var(--ink);cursor:pointer;letter-spacing:2px;text-transform:uppercase;transition:transform .07s,opacity .2s;user-select:none;touch-action:manipulation}
.abtn:active{transform:scale(.97)}
#abl{border-left:3px solid var(--zone-l)}
#ard{border-right:3px solid var(--accent)}
.abtn:disabled{opacity:.2;cursor:default}
#statusbar{text-align:center;font-size:9px;letter-spacing:1px;color:var(--ink3);min-height:13px;flex-shrink:0}
#s-end{display:none;flex-direction:column;align-items:center;background:#fdfcf7;padding:24px 16px;overflow-y:auto;color:var(--ink);font-family:'Playfair Display',serif;-webkit-overflow-scrolling:touch}
#e-silence{font-family:'Share Tech Mono',monospace;font-size:12px;letter-spacing:6px;color:var(--ink3);margin-bottom:12px;text-align:center}
#e-title{text-align:center;font-size:28px;letter-spacing:2px;margin-bottom:20px;text-transform:uppercase;font-weight:700;border-top:2px solid var(--ink);border-bottom:4px solid var(--ink);padding:12px 0;width:100%;max-width:440px}
#e-stats{display:flex;flex-direction:column;width:100%;max-width:440px;margin-bottom:24px;border:none;padding:0}
.esl{font-family:'Share Tech Mono',monospace;font-size:10px;letter-spacing:1px;color:var(--ink2);text-transform:uppercase;margin-bottom:4px;text-align:center}
.esv{font-size:24px;color:var(--ink);margin-bottom:12px;text-align:center;font-weight:700}
.esv.big{font-size:36px;color:var(--accent);margin-bottom:20px}
.esv.dim{font-size:16px;color:var(--ink2);font-weight:normal}
.demo-row{display:grid;grid-template-columns:1fr 1fr 1fr;border-top:1px solid var(--ink);border-bottom:1px dashed var(--ink);padding:12px 0;margin:16px 0;gap:0}
.demo-card{border:none;border-right:1px solid var(--border-col);padding:4px;text-align:center}
.demo-card:last-child{border-right:none}
.demo-icon{font-size:20px;display:block;margin-bottom:4px}
.demo-num{font-family:'Share Tech Mono',monospace;font-size:14px;color:var(--ink);display:block;font-weight:700}
.demo-lbl{font-family:'Share Tech Mono',monospace;font-size:8px;color:var(--ink2);letter-spacing:1px;text-transform:uppercase;margin-top:2px}
#e-terrline{font-size:15px;color:var(--ink);font-style:italic;text-align:center;margin-bottom:18px;border-bottom:1px solid var(--border-col);padding-bottom:16px}
#e-casus{font-size:12px;color:var(--ink);line-height:1.6;text-align:justify;max-width:440px;margin-bottom:20px;column-count:1}
@media (min-width:400px){#e-casus{column-count:2;column-gap:16px;text-align:left}}
#e-quote{font-size:14px;color:var(--ink);line-height:1.7;font-style:italic;text-align:center;max-width:440px;margin:0 0 24px 0;padding:16px 0;border-top:1px dashed var(--ink);border-bottom:1px dashed var(--ink)}
#e-btns{display:flex;flex-wrap:wrap;gap:10px;justify-content:center;width:100%;max-width:440px}
#e-btns .ebtn{min-width:200px}
.ebtn{flex:1;font-family:'Share Tech Mono',monospace;font-size:10px;padding:9px;border:1px solid var(--border-col);background:var(--bg);color:var(--ink);cursor:pointer;letter-spacing:2px;text-transform:uppercase}
.ebtn:hover{background:var(--accent);color:var(--bg);border-color:var(--accent)}

/* Смартфон в альбомной ориентации: мало высоты — компактные панели и карта */
@media (orientation:landscape) and (max-height:520px){
  #wrap{padding-top:max(4px,env(safe-area-inset-top,0px));padding-bottom:max(4px,env(safe-area-inset-bottom,0px));padding-left:max(8px,env(safe-area-inset-left,0px));padding-right:max(8px,env(safe-area-inset-right,0px));gap:2px}
  #s-casus{justify-content:flex-start;padding-top:4px;overflow-y:auto;-webkit-overflow-scrolling:touch}
  #cb-paper{padding:10px 14px;max-height:min(72vh,100%)}
  #cb-body{font-size:12px;line-height:1.5;min-height:0}
  #cb-btn{margin-top:8px;padding:6px 18px}
  #topbar{padding-bottom:2px;flex-wrap:wrap;row-gap:1px}
  #gtitle{font-size:9px;letter-spacing:2px}
  #topright{flex-wrap:wrap;justify-content:flex-end}
  .mbt,select#diff-sel{font-size:8px;padding:2px 5px}
  #arena{min-height:72px}
  .pbw{width:26px;height:32%}
  .pbn{font-size:6px}
  #m-narr{font-size:9px;padding:8px 10px;top:35%}
  #m-news{font-size:11px;top:10px;left:10px;right:10px;padding:6px 5px}
  #m-thresh{top:10px;right:10px;padding:8px 12px;font-size:10px;max-width:200px}
  #m-thresh strong{font-size:14px;margin-bottom:3px}
  #infostrip{padding:1px 0}
  .itn{font-size:9px}
  #info-dead{font-size:8px;}
  #mode-row{gap:3px}
  .mode-panel{padding:4px 6px}
  .mode-label{font-size:7px;margin-bottom:2px}
  .mbtn{font-size:8px;padding:3px 0}
  .mode-status{font-size:7px;height:10px;margin-top:2px}
  #ctrl-row{gap:3px}
  .abtn{font-size:9px;padding:5px 4px;letter-spacing:1px}
  #statusbar{font-size:8px;min-height:10px}
  #s-end{overflow-y:auto;-webkit-overflow-scrolling:touch;padding:8px 10px;justify-content:flex-start}
  #e-title{font-size:20px;margin-bottom:12px;padding:8px 0}
  #e-stats{margin-bottom:12px}
  .esv{font-size:18px;margin-bottom:8px}
  .esv.big{font-size:24px}
  .demo-row{margin:10px 0}
  .demo-icon{font-size:16px}
  .demo-num{font-size:12px}
  #e-terrline{font-size:12px;margin-bottom:12px;padding-bottom:10px}
  #e-casus{font-size:11px;margin-bottom:12px;column-count:1}
  #e-quote{font-size:12px;margin-bottom:16px;padding:12px 0}
  .ebtn{padding:7px;font-size:9px}
}

/* Узкий экран (портрет телефона): чуть плотнее */
@media (max-width:480px){
  #wrap{padding:6px 10px}
  #topright{max-width:100%}
}

/* ─── Меню: анимированный canvas сзади ─── */
#s-menu{position:relative}
#menu-canvas{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;opacity:.35}
.menu-inner{position:relative;z-index:1}

/* ─── Настройки: реальные контролы ─── */
.set-row{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:9px 0;border-bottom:1px solid var(--border-col)}
.set-row:last-of-type{border-bottom:none}
.set-lbl{font-size:10px;letter-spacing:1px;color:var(--ink2);text-transform:uppercase;white-space:nowrap}
.set-toggle-group{display:flex;gap:4px;flex-wrap:wrap;justify-content:flex-end}
.set-tog{font-family:'Share Tech Mono',monospace;font-size:9px;padding:5px 10px;border:1px solid var(--border-col);background:transparent;color:var(--ink2);cursor:pointer;letter-spacing:1px;transition:all .15s}
.set-tog:hover{border-color:var(--accent);color:var(--accent)}
.set-tog.active{background:var(--accent);color:var(--bg);border-color:var(--accent)}

/* ─── Мемориал ─── */
#s-memorial{display:none;flex:1;flex-direction:column;align-items:center;justify-content:center;background:var(--bg);padding:20px 16px}
.mem-inner{display:flex;flex-direction:column;align-items:center;gap:14px;max-width:420px;width:100%}
.mem-cursor{font-size:22px;color:var(--accent);animation:memBlink 1.1s step-end infinite;line-height:1}
@keyframes memBlink{0%,100%{opacity:1}50%{opacity:0}}
.mem-prompt{font-family:'Playfair Display',serif;font-size:14px;text-align:center;color:var(--ink);line-height:1.6}
.mem-sub{font-size:10px;letter-spacing:1px;color:var(--ink2);text-align:center}
.mem-input{width:100%;font-family:'Share Tech Mono',monospace;font-size:15px;padding:10px 12px;border:none;border-bottom:2px solid var(--accent);background:transparent;color:var(--ink);outline:none;text-align:center;letter-spacing:2px}
.mem-input::placeholder{color:var(--ink3)}
.mem-btns{display:flex;gap:10px;flex-wrap:wrap;justify-content:center}
.mem-list-wrap{width:100%;margin-top:8px}
.mem-list-title{font-size:8px;letter-spacing:3px;text-transform:uppercase;color:var(--ink3);text-align:center;margin-bottom:8px}
.mem-list{display:flex;flex-direction:column;gap:4px;max-height:130px;overflow-y:auto}
.mem-entry{font-family:'Playfair Display',serif;font-size:12px;color:var(--ink2);text-align:center;padding:3px 0;border-bottom:1px solid var(--border-col);font-style:italic}
.mem-empty{font-size:10px;color:var(--ink3);text-align:center;letter-spacing:1px}
.mem-nav{display:flex;flex-wrap:wrap;gap:7px;justify-content:center;margin-top:4px;padding-top:10px;border-top:1px solid var(--border-col);width:100%}
.ebtn-memorial{font-family:'Share Tech Mono',monospace;font-size:11px;color:var(--ink);border-color:var(--ink);letter-spacing:1px;font-weight:bold}
.ebtn-memorial:hover{background:var(--ink);color:var(--bg)}

/* ─── Hotkey Hints ─── */
.hkh {
  font-family: 'Share Tech Mono', monospace;
  font-size: 8px;
  color: var(--ink3);
  opacity: 0.6;
  margin: 0 4px;
  pointer-events: none;
  text-transform: uppercase;
  user-select: none;
}
#mp-r .hkh { margin-right: 8px; margin-left: 0; }
.abtn .hkh { font-size: 10px; opacity: 0.4; margin: 0 8px; }

/* ─── Landscape Overlay ─── */
#land-overlay{display:none;position:fixed;inset:0;z-index:9999;background:var(--bg);color:var(--ink);align-items:center;justify-content:center;text-align:center}
.land-msg{font-family:'Share Tech Mono',monospace;font-size:14px;border:1px solid var(--accent);padding:24px 32px;background:#fdfcf7;box-shadow:4px 4px 0 rgba(214,81,8,.1);line-height:1.5;margin:20px}
@media screen and (max-width:900px) and (orientation:portrait){
  #land-overlay{display:flex}
  #wrap{display:none !important}
}
button{touch-action:manipulation}