@import url('https://fonts.googleapis.com/css2?family=Share+Tech+Mono&family=Orbitron:wght@400;700&display=swap');
*{box-sizing:border-box;margin:0;padding:0;user-select:none;-webkit-user-select:none;touch-action:manipulation;}
:root{
  --bg:#06080a;--panel:#0a0d12;--border:#1a2230;
  --green:#00ff88;--red:#ff2244;--amber:#ffaa00;
  --enemy-bg:#0f0a08;--own-bg:#080c12;
  --cell: clamp(40px, calc((100vw - 20px) / 7), 52px);
  --svg:  clamp(32px, calc(var(--cell) * 0.846), 44px);
}
body{background:var(--bg);color:#ccc;font-family:'Share Tech Mono',monospace;
  min-height:100dvh;display:flex;flex-direction:column;align-items:center;
  padding:48px 8px 4px;gap:4px;overflow-x:hidden;touch-action:pan-y;}
body::before{content:'';position:fixed;inset:0;
  background:repeating-linear-gradient(0deg,transparent,transparent 2px,rgba(0,0,0,.08) 2px,rgba(0,0,0,.08) 4px);
  pointer-events:none;z-index:1000;}
#title{font-family:'Orbitron',sans-serif;font-size:clamp(14px,4vw,20px);font-weight:700;letter-spacing:.18em;color:#fff;text-shadow:0 0 12px #00ff8866;margin-top:8px;}
#title span{color:var(--amber);text-shadow:0 0 12px #ffaa0066;}

#phase-bar{font-size:10px;letter-spacing:.18em;color:var(--green);border:1px solid #1a5a3a;padding:2px 12px;background:#041a0c;text-shadow:0 0 10px #00ff88aa;margin-top:4px;margin-bottom:8px;}
#stats-row{display:flex;gap:8px;flex-wrap:wrap;justify-content:center;}
.stat-box{display:flex;flex-direction:column;align-items:center;gap:1px;background:var(--panel);border:1px solid var(--border);padding:4px 10px;position:relative;}
.stat-box::before{content:'';position:absolute;top:0;left:0;right:0;height:1px;background:linear-gradient(90deg,transparent,#2a7a4a,transparent);}
.stat-label{font-size:8px;color:#668877;letter-spacing:.12em;}
.stat-val{font-size:15px;font-weight:500;color:#fff;font-family:'Orbitron',monospace;}
#board{display:grid;grid-template-columns:repeat(7,var(--cell));grid-template-rows:repeat(8,var(--cell));gap:2px;background:#040608;border:1px solid var(--border);padding:2px;position:relative;overflow:hidden;}
.cell{width:var(--cell);height:var(--cell);background:var(--panel);border:1px solid #111820;display:flex;align-items:center;justify-content:center;position:relative;cursor:default;transition:background .15s;overflow:visible;}
.cell.enemy-zone{background:var(--enemy-bg);}
.cell.own-zone{background:var(--own-bg);}
.cell.row0,.cell.row1,.cell.row2{border-color:#2a2010;}
.cell.row3,.cell.row4,.cell.row5{border-color:#102030;}
.mine-svg{width:var(--svg);height:var(--svg);pointer-events:none;}
.cell.placeable{outline:1px dashed #1a3300;cursor:crosshair;}
.cell.placeable:hover{background:#0a1800;}
.squad{width:var(--svg);height:var(--svg);cursor:default;position:relative;display:flex;align-items:center;justify-content:center;}
.squad.targetable{cursor:pointer;}
.squad.targetable:hover .robot-svg{filter:drop-shadow(0 0 4px #00ff88);}
.squad.selected .robot-svg{filter:drop-shadow(0 0 6px #00ff88);}
.item-svg{width:var(--svg);height:var(--svg);}
@keyframes item-pulse{0%,100%{filter:drop-shadow(0 0 4px #00ff88);}50%{filter:drop-shadow(0 0 12px #00ff88);}}
@keyframes wm-blink{0%,100%{opacity:1;}50%{opacity:.2;}}
.ed-blink-arrow{text-align:center;margin-top:10px;font-size:14px;color:#00ff8888;animation:wm-blink 1s infinite;}
.squad .item-svg{animation:item-pulse 1s infinite;}
.squad-hp-bar{position:absolute;bottom:0;left:2px;right:2px;height:3px;background:#111;border-radius:1px;overflow:hidden;}
.squad-hp-fill{height:100%;border-radius:1px;transition:width .3s;}
.squad-hp-num{position:absolute;top:10px;left:0;right:0;text-align:center;font-size:10px;font-weight:500;color:#fff;line-height:1;text-shadow:0 0 4px #000,0 0 4px #000;}
.castle-svg{width:var(--svg);height:var(--svg);}
#log{font-size:10px;color:#6a9a80;max-width:390px;text-align:center;min-height:16px;letter-spacing:.04em;margin-top:26px;}
#ammo-row{display:none;gap:8px;align-items:center;flex-wrap:wrap;justify-content:center;}
.ammo-btn{display:inline-block;box-sizing:border-box;padding:5px 12px;font-size:10px;font-family:'Share Tech Mono',monospace;cursor:pointer;border:1px solid;letter-spacing:.1em;transition:filter .15s,outline .15s;-webkit-appearance:none;appearance:none;background:#000a1a;color:#aaccff;}
.ammo-btn.t-normal{background:#000a1a;color:#6699cc;border-color:#1a3355;}
.ammo-btn.t-normal.active{background:#0a1e33;border-color:#4488ff;color:#aaccff;box-shadow:0 0 6px #4488ff44;}
.ammo-btn:disabled{opacity:.3;cursor:default;}
#action-area{display:flex;gap:10px;align-items:center;flex-wrap:wrap;justify-content:center;}
.btn{padding:8px 20px;font-size:11px;font-family:'Share Tech Mono',monospace;cursor:pointer;border:1px solid;letter-spacing:.12em;transition:all .15s;}
.btn-green{background:#001a0a;color:var(--green);border-color:#005530;}
.btn-green:hover:not(:disabled){background:#003a14;}
.btn-green:disabled{opacity:.3;cursor:default;}
.btn-red{background:#1a0008;color:var(--red);border-color:#550015;}
#night-ui{display:flex;flex-direction:column;align-items:center;gap:8px;}
#scope-overlay{display:none;position:fixed;inset:0;background:rgba(0,0,0,.95);z-index:100;flex-direction:column;align-items:center;justify-content:flex-start;padding-top:16px;}
#scope-overlay.active{display:flex;}
#scope-bottom{z-index:1;}
#scope-title{font-family:'Orbitron',sans-serif;font-size:13px;letter-spacing:.22em;color:#556;}
#scope-target-info{font-size:11px;color:var(--amber);letter-spacing:.08em;}
#scope-ammo-info{font-size:10px;min-height:15px;letter-spacing:.08em;}
#scope-timer-wrap{width:min(260px,80vw);height:6px;background:#0a0a0a;border-radius:3px;overflow:hidden;}
#scope-timer-bar{height:100%;width:100%;border-radius:3px;transition:background .4s;}
#scope-ring{width:min(260px,80vw);height:min(260px,80vw);border-radius:50%;border:2px solid #1a1a1a;overflow:visible;position:relative;background:#000;touch-action:none;z-index:2;}
#scope-ring canvas{position:absolute;top:0;left:0;border-radius:50%;}
#scope-result-text{font-size:17px;font-weight:500;min-height:26px;letter-spacing:.06em;font-family:'Orbitron',sans-serif;}
.btn-fire{width:130px;height:44px;font-size:13px;font-family:'Share Tech Mono',monospace;cursor:pointer;border:1.5px solid;letter-spacing:.1em;}
.btn-fire.m-normal{background:#1a0005;color:#ff6b6b;border-color:#7a0020;}
.btn-fire:disabled{opacity:.4;cursor:default;}
.btn-fire:not(:disabled):active{transform:scale(.96);}
@keyframes tapblink{0%,100%{opacity:.3;}50%{opacity:1;}}
@keyframes shake{0%{transform:translate(3px,2px)}25%{transform:translate(-3px,-2px)}50%{transform:translate(2px,-3px)}75%{transform:translate(-2px,3px)}100%{transform:translate(0,0)}}
.shaking{animation:shake .25s ease-in-out 2;}
@keyframes enemy-glow{0%{box-shadow:0 0 0 #ff4400;}50%{box-shadow:0 0 16px 5px #ff6600;}100%{box-shadow:0 0 0 #ff4400;}}
.glowing{animation:enemy-glow .5s ease-out;}
@keyframes castle-hit{0%{transform:translate(0,0);}15%{transform:translate(-5px,3px);}35%{transform:translate(6px,-4px);}55%{transform:translate(-4px,5px);}75%{transform:translate(4px,-2px);}100%{transform:translate(0,0);}}
.castle-shaking{animation:castle-hit .5s ease-in-out;}
@keyframes dmgfade{0%{opacity:1;transform:translateY(0) scale(1.1);}100%{opacity:0;transform:translateY(-48px) scale(.9);}}
.dmg-popup{position:fixed;font-family:'Orbitron',sans-serif;font-size:16px;font-weight:700;color:#ff2244;pointer-events:none;z-index:300;text-shadow:0 0 8px #ff224488;animation:dmgfade 1.4s ease-out forwards;}
@keyframes infected-pulse{0%,100%{filter:drop-shadow(0 0 3px #aa22ff);}50%{filter:drop-shadow(0 0 8px #dd66ff);}}
.squad.infected .robot-svg{animation:infected-pulse .8s infinite;}
@keyframes hf-blink{0%,100%{opacity:1;}50%{opacity:.35;}}
.bonus-unit.hf-blink .robot-svg{animation:hf-blink 1.6s ease-in-out infinite;}

/* ================================================================
   COMMAND MODAL (武器選択フェーズ)
   ================================================================ */
#command-modal{
  display:none;
  position:absolute;
  /* PCセル(row7, col3)の真上に寄せる */
  bottom: calc(var(--cell) + 6px);
  left: 50%;
  transform: translateX(-50%);
  z-index:50;
  width: calc(var(--cell)*3);
}
#command-modal.active{display:block;}
#command-modal-inner{
  background:#060b10;
  border:1px solid #1a3a2a;
  padding:10px 10px 12px;
  display:flex;flex-direction:column;align-items:stretch;gap:8px;
  position:relative;
}
#command-modal-inner::before{
  content:'';position:absolute;top:0;left:0;right:0;height:1px;
  background:linear-gradient(90deg,transparent,#00ff8866,transparent);
}
#command-title{
  font-family:'Orbitron',sans-serif;font-size:9px;letter-spacing:.18em;color:#3a6a5a;
  text-align:center;
}
#command-turn{
  font-family:'Orbitron',sans-serif;font-size:14px;color:#00ff88;letter-spacing:.25em;text-align:center;font-weight:bold;
}
#command-btns{
  display:flex;flex-direction:column;gap:6px;
}
.cmd-btn{
  padding:9px 10px;
  font-size:10px;
  font-family:'Share Tech Mono',monospace;
  cursor:pointer;
  border:1px solid;
  letter-spacing:.1em;
  transition:all .15s;
  text-align:center;
  width:100%;
}
.cmd-btn:hover{filter:brightness(1.3);}
.cmd-btn:active{transform:scale(.96);}
.cmd-btn-sigkill{background:#000a1a;color:#aaccff;border-color:#1a4466;}
.cmd-btn-mine100{background:#0d1200;color:#aaff44;border-color:#445500;}
.cmd-btn-mine200{background:#1a1000;color:#ffcc44;border-color:#665500;}
.cmd-btn-crossmine{background:#001a0a;color:#00ff88;border-color:#005530;}
.cmd-btn-slashmine{background:#001a10;color:#44ffcc;border-color:#006644;}
.cmd-btn-overflow{background:#001a10;color:#00ff88;border-color:#005530;}
.cmd-btn-multicast{background:#001a10;color:#00ff88;border-color:#005530;}
.cmd-btn-trojan{background:#0a001a;color:#cc44ff;border-color:#661199;}
.cmd-btn-trojancas{background:#0a001a;color:#dd88ff;border-color:#882299;}
.cmd-btn-trojanmine{background:#0a001a;color:#ee99ff;border-color:#9933bb;}
.cmd-btn-infinity{background:#001a1a;color:#00ffff;border-color:#006666;}
.cmd-btn-exploit{background:#001a0a;color:#00ff88;border-color:#005530;}
.cmd-btn-infinity{background:#001a1a;color:#00ffff;border-color:#006666;}
.cmd-btn-barusu{background:#333;color:#fff;border-color:#666;}
.cmd-btn-heal200{background:#333;color:#fff;border-color:#666;}

#mission-panel{
  display:none;
  position:absolute;
  bottom: calc(var(--cell) + 6px);
  left: 50%;
  transform: translateX(-50%);
  z-index:50;
  width: calc(var(--cell)*6);
}
#mission-panel.active{display:block;}
#mission-inner{
  background:#060b10;
  border:1px solid #1a3a2a;
  padding:10px 14px 12px;
  position:relative;
}
#mission-inner::before{
  content:'';position:absolute;top:0;left:0;right:0;height:1px;
  background:linear-gradient(90deg,transparent,#00ff8866,transparent);
}
/* PCセルのコマンドフェーズ時のホバー */
.cell.pc-tappable{cursor:pointer;}
.cell.pc-tappable:hover svg{filter:drop-shadow(0 0 6px #ff2244);}

/* ヘッダーバー */
#header-bar{
  position:fixed;top:0;left:0;right:0;z-index:600;
  height:44px;
  background:rgba(6,8,10,0.92);border-bottom:1px solid #1a3a2a;
  display:grid;grid-template-columns:1fr auto 1fr;align-items:center;
  padding:0 10px;
}
#header-stage{
  font-family:'Share Tech Mono',monospace;font-size:11px;font-weight:700;
  letter-spacing:.22em;color:#aaaaaa;
  justify-self:center;
}
#login-btn{
  font-family:'Share Tech Mono',monospace;font-size:10px;letter-spacing:.15em;
  color:#00ff88;background:transparent;border:1px solid #1a3a2a;
  padding:4px 10px;cursor:pointer;
  justify-self:start;
  max-width:100px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
#login-btn:hover{background:rgba(0,255,136,.08);}
#hamburger-btn{
  width:32px;height:32px;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:5px;
  cursor:pointer;padding:4px;
  justify-self:end;
}
#hamburger-btn span{display:block;width:18px;height:2px;background:#00ff88;}
#hamburger-menu{
  display:none;
  position:fixed;top:48px;right:10px;z-index:600;
  background:#060b10;border:1px solid #1a3a2a;
  padding:12px 16px;
  flex-direction:column;gap:12px;
  min-width:140px;
}
#hamburger-menu.open{display:flex;}
.snd-toggle{display:flex;align-items:center;justify-content:space-between;gap:16px;cursor:pointer;font-family:'Share Tech Mono',monospace;font-size:11px;color:#00ff88;letter-spacing:.1em;user-select:none;}
.snd-toggle input{display:none;}
.snd-sw{display:inline-block;width:36px;height:20px;background:#1a2a1a;border:1px solid #334433;border-radius:10px;position:relative;transition:background .2s;}
.snd-sw::after{content:'';position:absolute;top:3px;left:3px;width:12px;height:12px;border-radius:50%;background:#445544;transition:all .2s;}
.snd-toggle input:checked+.snd-sw{background:#1a4a1a;border-color:#44aa44;}
.snd-toggle input:checked+.snd-sw::after{left:19px;background:#44dd44;}
/* 盤面ロック */
#board.locked{pointer-events:none;}
#board.locked .squad{cursor:default;}
/* ================================================================
   TABLET LAYOUT
   ================================================================ */
html.is-tablet body{
  justify-content:center;
  align-items:center;
  min-height:100dvh;
}
html.is-tablet{
  --cell:52px;
  --svg:44px;
}
html.is-tablet #op-root{
  width:390px;
  height:700px;
}