/* Marquee, group-move arrows, landing markers. Cyan/magenta palette is deliberately distinct from the board's green/red/gold/P1/P2. */

.marquee-layer {
  position: absolute; top: 0; left: 0;
  width: 100%; height: 100%;
  pointer-events: none; z-index: 6;
}
.marquee-box {
  position: absolute;
  background: rgba(0, 229, 255, 0.16);
  border: 1px dashed rgba(0, 229, 255, 0.95);
  pointer-events: none;
  box-shadow: 0 0 8px rgba(0, 229, 255, 0.3);
}

/* z-index must beat .cell-tooltip (50) so the landing mark under the cursor stays visible. */
.group-arrows-container {
  position: absolute; top: 0; left: 0;
  width: 100%; height: 100%;
  pointer-events: none; z-index: 55;
}

/* Mounted inside .cell so inset:0 pins to the cell box (no JS math); dark tone reads over any terrain. */
.group-dest-marker {
  position: absolute;
  inset: 0;
  box-sizing: border-box;
  pointer-events: none;
  border-radius: 3px;
  background: rgba(0, 0, 0, 0.62);
  display: flex; align-items: center; justify-content: center;
  font-size: calc(var(--cell-size) * 0.5);
  font-weight: 700;
  text-shadow: 0 0 4px rgba(0,0,0,0.85);
  z-index: 6;
  animation: group-dest-pulse 1.2s ease-in-out infinite alternate;
}
.group-dest-marker-ok {
  border: 2px solid #00e5ff;
  box-shadow: inset 0 0 10px rgba(0, 229, 255, 0.45),
              0 0 6px rgba(0, 229, 255, 0.55);
  color: #00e5ff;
}
.group-dest-marker-bad {
  border: 2px dashed #ff3cac;
  box-shadow: inset 0 0 10px rgba(255, 60, 172, 0.45),
              0 0 6px rgba(255, 60, 172, 0.55);
  color: #ff3cac;
}
@keyframes group-dest-pulse {
  from { filter: brightness(1); }
  to   { filter: brightness(1.25); }
}
@media (prefers-reduced-motion: reduce) {
  .group-dest-marker { animation: none; }
}

/* Row-number gutter width — one var so board.css grid columns and coord cells agree. */
.board-area { --board-label-width: 20px; }

/* Group-move status bar — one segment of the fused column: full width, no radius, no bottom border. Flex row: text (nowrap+ellipsis on the child) left, rotate control right. */
.group-status-bar {
  box-sizing: border-box;
  margin: 0;
  padding: 4px 8px 4px 14px;
  min-height: 34px;
  font-size: 0.85rem;
  line-height: 1.35;
  border-radius: 0;
  background: var(--bg-1);
  border: 1px solid var(--border);
  border-bottom: 0;
  /* State classes colour this left stripe; .active.p1-bar/.p2-bar no longer paint it. */
  border-left-width: 3px;
  border-left-color: var(--ink-4);
  color: var(--ink-2);
  display: flex;
  align-items: center;
  gap: 8px;
  transition: color 0.12s, border-color 0.12s;
}
.group-status-text {
  flex: 1 1 auto;
  font-size: 0.72rem;
  text-align: center;
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  /* Only the idle hint is italic; this stops the other states inheriting it. */
  font-style: normal;
}
.group-status-rotate {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  font-style: normal;
}
.group-status-rotate .rotate-board-control { margin: 0; }
.group-status-rotate .btn-rotate-board {
  width: 38px;
  height: 28px;
  border-radius: 6px;
}
.group-status-rotate .btn-rotate-board svg { width: 16px; height: 16px; }
.group-status-bar.group-status-idle .group-status-text { font-style: italic; }
.group-status-bar.group-status-idle {
  color: var(--ink-3);
  border-left-color: var(--ink-4);
}
.group-status-bar.group-status-hint {
  color: var(--ink-2);
  border-left-color: var(--lapis-2);
}
.group-status-bar.group-status-ok {
  color: var(--gold);
  border-left-color: var(--gold);
  font-weight: 600;
}
.group-status-bar.group-status-bad {
  color: var(--porphyry-2);
  border-left-color: var(--porphyry-2);
  font-weight: 600;
}

/* No light-theme override: the fused column keeps the dark board palette via the theme.css re-pin. */