/* The tactical map: tiles, sensor ramp, threats, units, cursor and effects. */
.board {
  --cols: 8;
  --gap: clamp(3px, 0.55cqmin, 6px);
  position: relative;
  display: grid; grid-template-columns: repeat(var(--cols), minmax(0, 1fr)); gap: var(--gap);
  width: min(100cqw, 100cqh); aspect-ratio: 1; padding: calc(var(--gap) * 2);
  border-radius: 14px; border: 1px solid var(--line);
  background:
    linear-gradient(#0b141bdd, #0b141bdd),
    repeating-linear-gradient(0deg, #3ef0d80a 0 1px, transparent 1px 22px),
    repeating-linear-gradient(90deg, #3ef0d80a 0 1px, transparent 1px 22px),
    var(--bg-2);
  box-shadow: 0 0 0 1px #000, 0 30px 80px -30px #000, inset 0 0 60px #0007;
  user-select: none; -webkit-user-select: none; touch-action: manipulation;
  transition: box-shadow .5s;
}
@media (max-width: 899px) { .board { width: 100cqw; border-radius: 10px; } }

.cell {
  --tone: var(--muted);
  position: relative; min-width: 0; aspect-ratio: 1;
  display: grid; place-items: center;
  border-radius: clamp(3px, 1cqmin, 7px);
  font: 800 clamp(12px, 3.4cqmin, 26px)/1 var(--mono);
  color: var(--tone);
  cursor: default;
  transition: background .15s, border-color .15s, box-shadow .15s, transform .12s;
}
.cell > .icon { width: 58%; height: 58%; }

/* Fog: raised plate with faint hatch */
.cell.fog {
  background:
    repeating-linear-gradient(135deg, #ffffff05 0 2px, transparent 2px 7px),
    linear-gradient(160deg, #1d2e39, #142029);
  border: 1px solid #263a47; border-bottom-color: #0d161d;
  box-shadow: inset 0 1px 0 #ffffff0d;
}
/* Mapped floor */
.cell.open { background: #091016; border: 1px solid #142029; }
.cell.open.zero::before {
  content: ""; width: 3px; height: 3px; border-radius: 50%; background: #1f3340;
}

/* Sensor danger ramp */
.cell[data-n="1"] { --tone: var(--s1); }
.cell[data-n="2"] { --tone: var(--s2); }
.cell[data-n="3"] { --tone: var(--s3); }
.cell[data-n="4"] { --tone: var(--s4); }
.cell[data-n="5"] { --tone: var(--s5); }
.cell[data-n="6"], .cell[data-n="7"], .cell[data-n="8"] { --tone: var(--s6); }
.cell.open[data-n] { text-shadow: 0 0 12px color-mix(in srgb, var(--tone) 55%, transparent); }

/* Threats (live) */
.cell.threat { background: #1a0e12; border: 1px solid #4a2028; }
.cell.t-hazard { --tone: var(--amber); background: #1c140a; border-color: #5c4019; }
.cell.t-hostile { --tone: var(--red); }
.cell.t-trap { --tone: var(--violet); background: #160f20; border-color: #43305e; }
.cell.t-anomaly { --tone: var(--magenta); background: #1b0c19; border-color: #5a2350; }
.cell.t-emp { --tone: var(--blue); background: #0b1520; border-color: #23476a; }
.cell.t-swarm { --tone: var(--lime); background: #131807; border-color: #3f4c1a; }
.cell.threat > .icon { filter: drop-shadow(0 0 6px color-mix(in srgb, var(--tone) 60%, transparent)); }
.cell.t-hostile > .icon { animation: hostile-idle 2.4s ease-in-out infinite; }

/* Cleared threat leaves a scar */
.cell.scar { --tone: #2a3d48; }
.cell.scar > .icon { width: 42%; height: 42%; }

/* Extraction beacon */
.cell.exit {
  --tone: var(--cyan); background: radial-gradient(circle, #0f3d3a, #0a1c1d 70%); border: 1px solid #2c8a7f;
  box-shadow: 0 0 22px -4px #3ef0d899, inset 0 0 12px #3ef0d833;
}
.cell.exit > .icon { animation: beacon 1.8s ease-in-out infinite; }

/* Flag marker (top-right pennant on fog) */
.cell .flag { position: absolute; top: 8%; right: 8%; width: 34%; height: 34%; color: var(--amber); filter: drop-shadow(0 1px 2px #000); }

/* Drone tokens */
.token {
  --u: var(--u-scout);
  position: absolute; inset: 12%; display: grid; place-items: center; border-radius: 50%;
  color: var(--u); background: radial-gradient(circle at 35% 30%, #1e2f3a, #0a1218 75%);
  border: 2px solid var(--u); box-shadow: 0 0 0 2px #000a, 0 0 16px -2px var(--u);
  z-index: 2; transition: transform .2s var(--ease-out);
}
.token .icon { width: 64%; height: 64%; }
.token.u-heavy { --u: var(--u-heavy); border-radius: 28%; }
.token.u-medic { --u: var(--u-medic); }
.token.u-engineer { --u: var(--u-engineer); border-radius: 28%; }
.token.spent { filter: saturate(.35) brightness(.75); }
.cell.active-unit .token { transform: scale(1.06); box-shadow: 0 0 0 2px #000a, 0 0 0 5px color-mix(in srgb, var(--u) 35%, transparent), 0 0 22px var(--u); }

/* Targetable tiles for the selected command */
.cell.target { cursor: pointer; }
.cell.target::after {
  content: ""; position: absolute; inset: 3px; border-radius: inherit; pointer-events: none;
  border: 1.5px dashed color-mix(in srgb, var(--cmd, var(--cyan)) 85%, transparent);
  animation: target-pulse 1.6s ease-in-out infinite;
}
.cell.fog.target { background: linear-gradient(160deg, #22404a, #17303a); }
.cell.target:hover { transform: translateY(-1px); box-shadow: 0 0 0 1px var(--cmd, var(--cyan)), 0 6px 16px -6px var(--cmd, var(--cyan)); }
.board[data-cmd="push"], .board[data-cmd="attack"] { --cmd: var(--amber); }
.board[data-cmd="flag"] { --cmd: var(--amber); }
.board[data-cmd="probe"] { --cmd: var(--blue); }
.board[data-cmd="repair"] { --cmd: var(--green); }
.board[data-cmd="defuse"] { --cmd: var(--violet); }
.cell.fog:not(.target):hover { border-color: #3a5464; }

/* Keyboard cursor: corner brackets */
.cell.cursor { z-index: 3; }
.cell.cursor .cursor-mark {
  position: absolute; inset: -4px; pointer-events: none; border-radius: 9px;
  --c: #fff; --l: 28%;
  background:
    linear-gradient(var(--c), var(--c)) top left / var(--l) 2px, linear-gradient(var(--c), var(--c)) top left / 2px var(--l),
    linear-gradient(var(--c), var(--c)) top right / var(--l) 2px, linear-gradient(var(--c), var(--c)) top right / 2px var(--l),
    linear-gradient(var(--c), var(--c)) bottom left / var(--l) 2px, linear-gradient(var(--c), var(--c)) bottom left / 2px var(--l),
    linear-gradient(var(--c), var(--c)) bottom right / var(--l) 2px, linear-gradient(var(--c), var(--c)) bottom right / 2px var(--l);
  background-repeat: no-repeat; filter: drop-shadow(0 0 4px #fff8);
}
.board:not(.kbd) .cursor-mark { display: none; }

/* ---------- Effects ---------- */
.cell.fx-reveal { animation: reveal .38s var(--ease-out) both; animation-delay: var(--d, 0ms); }
.cell.fx-hit { animation: hit .5s ease-out; }
.cell.fx-hit::before {
  content: attr(data-dmg); position: absolute; top: -10%; left: 50%; z-index: 5;
  font: 800 clamp(12px, 2.6cqmin, 18px)/1 var(--mono); color: var(--red); text-shadow: 0 0 8px #000, 0 0 12px #ff5d6c;
  animation: float-up .9s ease-out forwards;
}
.cell.fx-clear::after {
  content: ""; position: absolute; inset: 0; border-radius: 50%; pointer-events: none;
  border: 2px solid var(--cyan); animation: burst .55s ease-out forwards;
}
.cell.fx-move .token { animation: land .3s var(--ease-out); }
.board.fx-extract { box-shadow: 0 0 0 1px #3ef0d8, 0 0 80px -10px #3ef0d8, inset 0 0 80px #3ef0d822; }
.board.fx-extract .cell.exit { animation: extract 1s ease-out; }
.board.fx-lost { filter: saturate(.3) brightness(.7); transition: filter .8s; }

@keyframes reveal { from { transform: scale(.6) rotateX(70deg); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes hit {
  0%, 100% { transform: none; } 20% { transform: translateX(-4px); background: #5a1420; }
  40% { transform: translateX(4px); } 60% { transform: translateX(-2px); } 80% { transform: translateX(2px); }
}
@keyframes float-up { from { opacity: 1; transform: translate(-50%, 0); } to { opacity: 0; transform: translate(-50%, -120%); } }
@keyframes burst { from { transform: scale(.4); opacity: 1; } to { transform: scale(1.7); opacity: 0; } }
@keyframes land { from { transform: scale(.7); } to { transform: none; } }
@keyframes extract { 0% { box-shadow: 0 0 0 0 #3ef0d8; } 100% { box-shadow: 0 0 0 40px #3ef0d800; } }
@keyframes beacon { 0%, 100% { opacity: .75; transform: scale(.94); } 50% { opacity: 1; transform: scale(1.04); } }
@keyframes target-pulse { 0%, 100% { opacity: .55; } 50% { opacity: 1; } }
@keyframes hostile-idle { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-6%); } }