/* Drop Zone: the drone feed, the pods, the designator line. A flat camera
   view of an airspace grid, not a stand: no frame, no feet, no holes. */

.zone-wrap { display: grid; gap: 12px; justify-items: center; }
.zone {
  --cols: 7;
  --rows: 6;
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr);
  gap: 6px;
  width: min(100%, 640px, max(300px, calc((100dvh - 254px) * var(--cols) / var(--rows) + 40px)));
}
.alt {
  display: grid;
  grid-template-rows: repeat(var(--rows), 1fr);
  font: 500 9px/1 var(--mono);
  color: var(--ink-faint);
  text-align: right;
  letter-spacing: 0.04em;
}
.alt span { display: flex; align-items: flex-start; justify-content: flex-end; border-top: 1px solid var(--line-strong); padding-top: 2px; }
.alt span:last-child { color: var(--ink-dim); }

.feed {
  position: relative;
  border: 1px solid var(--line-strong);
  background:
    radial-gradient(ellipse at 50% 110%, rgba(255, 159, 28, 0.06), transparent 60%),
    radial-gradient(ellipse at 50% -10%, rgba(var(--accent-rgb), 0.07), transparent 60%),
    var(--feed-bg);
  overflow: hidden;
}
/* camera overlay: corner brackets, the record tag, a centre reticle */
.feed::before {
  content: "";
  position: absolute;
  inset: 6px;
  pointer-events: none;
  z-index: 5;
  background:
    linear-gradient(var(--ink-dim), var(--ink-dim)) 0 0 / 14px 1.5px no-repeat,
    linear-gradient(var(--ink-dim), var(--ink-dim)) 0 0 / 1.5px 14px no-repeat,
    linear-gradient(var(--ink-dim), var(--ink-dim)) 100% 0 / 14px 1.5px no-repeat,
    linear-gradient(var(--ink-dim), var(--ink-dim)) 100% 0 / 1.5px 14px no-repeat,
    linear-gradient(var(--ink-dim), var(--ink-dim)) 0 100% / 14px 1.5px no-repeat,
    linear-gradient(var(--ink-dim), var(--ink-dim)) 0 100% / 1.5px 14px no-repeat,
    linear-gradient(var(--ink-dim), var(--ink-dim)) 100% 100% / 14px 1.5px no-repeat,
    linear-gradient(var(--ink-dim), var(--ink-dim)) 100% 100% / 1.5px 14px no-repeat;
  opacity: 0.6;
}
.feed .rec {
  position: absolute;
  top: 8px;
  left: 26px;
  z-index: 5;
  font: 600 9px/1 var(--mono);
  letter-spacing: 0.14em;
  color: var(--ink-dim);
  pointer-events: none;
}
.feed .rec::before { content: "● "; color: var(--hit); animation: rec 1.4s steps(2, jump-none) infinite; }
/* the recording light is a camera's: only the drone feed and the orbital track have one */
body:is([data-theme="medieval"], [data-theme="pirate"], [data-theme="fantasy"]) .feed .rec::before { content: none; }
@keyframes rec { 50% { opacity: 0.2; } }
.feed .ground {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 3px;
  background: repeating-linear-gradient(90deg, var(--slate) 0 8px, transparent 8px 12px);
  z-index: 1;
}

.grid {
  display: grid;
  grid-template-columns: repeat(var(--cols), minmax(0, 1fr));
}
.slot {
  position: relative;
  aspect-ratio: 1;
  border-right: 1px dashed rgba(120, 160, 200, 0.12);
  border-bottom: 1px dashed rgba(120, 160, 200, 0.12);
}
.slot::after {
  /* the empty-cell marker: a small cross, the camera's grid tick */
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 8px;
  height: 8px;
  margin: -4px 0 0 -4px;
  background:
    linear-gradient(var(--line-strong), var(--line-strong)) 50% 0 / 1px 100% no-repeat,
    linear-gradient(var(--line-strong), var(--line-strong)) 0 50% / 100% 1px no-repeat;
}
.slot.aim { background: color-mix(in srgb, var(--side) 10%, transparent); }
.slot.aim::before {
  content: "";
  position: absolute;
  inset: 14%;
  border: 2px dashed var(--side);
  clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%);
  border-radius: 2px;
  opacity: 0.85;
}
.slot.can-extract { background: repeating-linear-gradient(45deg, color-mix(in srgb, var(--side) 22%, transparent) 0 4px, transparent 4px 9px); }

/* ---- pods */

.pod {
  position: absolute;
  inset: 7%;
  z-index: 2;
  --c: var(--p0);
  color: var(--c);
}
.pod.p1 { --c: var(--p1); }
.pod-svg { width: 100%; height: 100%; display: block; overflow: visible; }
.pod-shell { fill: color-mix(in srgb, var(--c) 26%, #0a1422); stroke: var(--c); stroke-width: 5; }
.pod-rim { fill: none; stroke: color-mix(in srgb, var(--c) 55%, transparent); stroke-width: 2.5; }
.pod.falling {
  z-index: 4;
  animation: fall var(--dur, 0.6s) cubic-bezier(0.35, 0.05, 0.55, 1) both;
}
@keyframes fall {
  0% { transform: translate(-10%, calc(var(--fall) * -114%)); }
  35% { transform: translate(8%, calc(var(--fall) * -76%)); }
  70% { transform: translate(-4%, calc(var(--fall) * -32%)); }
  100% { transform: translate(0, 0); }
}
.chute {
  position: absolute;
  left: 6%;
  width: 88%;
  bottom: 86%;
  pointer-events: none;
  transform-origin: 50% 100%;
  animation: chute var(--dur, 0.6s) linear both;
}
.chute .canopy { fill: color-mix(in srgb, var(--c) 30%, #0b1320); stroke: var(--c); stroke-width: 3; }
.chute .shrouds { fill: none; stroke: var(--c); stroke-width: 1.5; opacity: 0.8; }
@keyframes chute {
  0%, 82% { transform: scale(1); opacity: 1; }
  100% { transform: scale(0.5, 0.05); opacity: 0; }
}
.pod.landed .chute { display: none; }
.dust {
  position: absolute;
  left: -10%;
  right: -10%;
  bottom: 2%;
  height: 26%;
  z-index: 1;
  border-radius: 50%;
  background: radial-gradient(ellipse, rgba(170, 160, 140, 0.55), transparent 70%);
  opacity: 0;
  pointer-events: none;
  animation: puff 0.7s ease-out var(--delay, 0.6s) both;
}
@keyframes puff {
  0% { transform: scale(0.3, 0.6); opacity: 0.9; }
  100% { transform: scale(1.5, 1.2); opacity: 0; }
}
.pod.shift { animation: shift 0.35s ease-in both; }
@keyframes shift { from { transform: translateY(-114%); } }
.pod.win { animation: lit 1.1s ease-in-out infinite alternate; }
.pod.win .pod-shell { fill: color-mix(in srgb, var(--c) 55%, #0a1422); }
@keyframes lit {
  from { filter: drop-shadow(0 0 2px var(--c)); }
  to { filter: drop-shadow(0 0 10px var(--c)); }
}

/* ---- the laser designator */

.laser { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 6; pointer-events: none; overflow: visible; }
.laser line { vector-effect: non-scaling-stroke; stroke-linecap: round; }
.laser .glow { stroke: var(--side); stroke-width: 10; opacity: 0.28; }
.laser .beam { stroke: #fff; stroke-width: 2.5; stroke-dasharray: 10 6; animation: march 0.6s linear infinite; }
.laser .end { fill: none; stroke: #fff; vector-effect: non-scaling-stroke; stroke-width: 2; }
@keyframes march { to { stroke-dashoffset: -16; } }
.laser.draw .beam, .laser.draw .glow { animation: designate 0.6s ease-out both, march 0.6s linear 0.6s infinite; stroke-dasharray: 10 6; }
.laser.draw .glow { animation: designate 0.6s ease-out both; stroke-dasharray: none; }
@keyframes designate { from { opacity: 0; } }

/* ---- column targets */

.cols-hit {
  position: absolute;
  inset: 0;
  z-index: 7;
  display: grid;
  grid-template-columns: repeat(var(--cols), minmax(0, 1fr));
}
.col-btn {
  border: 0;
  margin: 0;
  padding: 0;
  background: transparent;
  cursor: pointer;
  touch-action: manipulation;
}
.col-btn:hover:not(:disabled), .col-btn:focus-visible { background: linear-gradient(to bottom, color-mix(in srgb, var(--side) 18%, transparent), transparent 70%); }
.col-btn:disabled { cursor: default; }

.col-heads {
  display: grid;
  grid-template-columns: repeat(var(--cols), minmax(0, 1fr));
  font: 500 9px/1 var(--mono);
  color: var(--ink-faint);
  text-align: center;
  letter-spacing: 0.08em;
  margin-bottom: 4px;
}
.zone-meta { display: flex; justify-content: space-between; gap: 8px; width: min(100%, 640px); flex-wrap: wrap; }
.zone-meta .count { display: flex; align-items: center; gap: 6px; font: 600 12px/1 var(--mono); letter-spacing: 0.08em; }
.zone-meta .count svg { width: 18px; height: 18px; }
.zone-meta .c0 { color: var(--p0); }
.zone-meta .c1 { color: var(--p1); }
.zone-actions { display: flex; gap: 8px; width: min(100%, 640px); }
.zone-actions .btn { flex: 1; }

/* Painted plates (common/plates.js): the surface behind the drop grid. */
body.has-board-drop-zone .feed { background: var(--plate-board-drop-zone) center / 100% 100%, var(--feed-bg); }
body.has-board-drop-zone-wide .feed.wide { background: var(--plate-board-drop-zone-wide) center / 100% 100%, var(--feed-bg); }