/* ── Force [hidden] to always win over any display property ─────────────────
   The HTML `hidden` attribute maps to [hidden]{display:none} in the browser
   default stylesheet, but class rules like .board-panel-full{display:flex}
   have equal specificity and override it when they appear later in the cascade.
   !important ensures hidden always takes effect regardless of class order.    */
[hidden] { display: none !important; }

/* ══════════════════════════════════════════════════════════════════
   FLEET WARS — Space-Themed Game UI
   Colour palette:
     Deep Space    #05080f   darkest background
     Nebula Dark   #0d1428   card / panel bg
     Cosmos Blue   #0f2a5c   primary button base
     Ion Cyan      #00c8ff   primary accent / glow
     Plasma White  #e8f4ff   primary text
     Warp Green    #00e676   success / join
     Nova Red      #ff3d57   danger / destroy
     Pulsar Amber  #ffaa00   warning / draw
══════════════════════════════════════════════════════════════════ */

/* ── General ────────────────────────────────────────────────── */
.beta-notice {
  font-size: 0.75rem;
  color: #ffaa00;
  margin: 4px 0 12px;
  text-shadow: 0 0 8px rgba(255,170,0,0.4);
}
.hint {
  font-size: 0.8rem;
  color: #7a9abb;
  margin: 4px 0;
}
hr { border-color: #1a2a40; margin: 16px 0; }

/* ── Badges / banners ───────────────────────────────────────── */
.wallet-addr {
  font-family: monospace;
  font-size: 0.75rem;
  color: #00c8ff;
  margin-right: 8px;
}
.badge {
  padding: 2px 10px;
  border-radius: 12px;
  font-size: 0.7rem;
  font-weight: bold;
  background: linear-gradient(90deg, #005c1a, #008028);
  color: #b0ffd0;
  border: 1px solid #00e676;
}
.badge.paid-mode { background: linear-gradient(90deg, #5c2000, #803000); color: #ffd0a0; border-color: #ffaa00; }
.badge.test-mode { background: linear-gradient(90deg, #005c1a, #008028); color: #b0ffd0; border-color: #00e676; }
#wallet-bar { margin: 8px 0 12px; }

.info-banner {
  background: #0a1828;
  border: 1px solid #1a3a5a;
  border-radius: 8px;
  padding: 10px 16px;
  margin: 8px auto;
  max-width: 480px;
  font-size: 0.85rem;
  color: #8ab8e0;
}
.draw-banner {
  background: #1e1400;
  border: 1px solid #ffaa00;
  border-radius: 8px;
  padding: 10px 18px;
  margin: 8px auto 12px;
  font-size: 0.9rem;
  color: #ffd880;
  box-shadow: 0 0 10px rgba(255,170,0,0.15);
}

/* ── Fleet selection buttons ────────────────────────────────── */
#fleet-buttons {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
  margin: 10px 0;
}
.fleet-btn {
  padding: 10px 24px;
  border-radius: 8px;
  border: 1px solid #1e3e6a;
  background: linear-gradient(135deg, #080e1e 0%, #0c1830 100%);
  color: #6ea8d8;
  cursor: pointer;
  font: 600 14px/1.4 'Ubuntu', Arial, sans-serif;
  letter-spacing: 0.02em;
  box-shadow: 0 2px 8px rgba(0,0,0,0.5);
  transition: all 0.2s;
}
.fleet-btn:hover {
  background: linear-gradient(135deg, #0e1e38 0%, #142640 100%);
  border-color: #3a7ab8;
  color: #b0d8ff;
  box-shadow: 0 0 12px rgba(0,160,255,0.18);
}
.fleet-btn.selected {
  background: linear-gradient(135deg, #0f2a5c 0%, #180e58 100%);
  border-color: #00c8ff;
  color: #ffffff;
  box-shadow: 0 0 16px rgba(0,200,255,0.35);
  font-weight: 700;
}

/* ── Token selector ─────────────────────────────────────────── */
.fee-display { margin-left: 10px; font-size: 0.85rem; color: #00c8ff; }
#token-select {
  background: #0a1428;
  color: #b0d0f0;
  border: 1px solid #1e3a5a;
  padding: 5px 10px;
  border-radius: 6px;
}

/* ══════════════════════════════════════════════════════════════
   PRIMARY ACTION BUTTON (.fancybutton)
   Connect Wallet · Open Lobby · Submit Board · Play Again
══════════════════════════════════════════════════════════════ */
.fancybutton {
  display: inline-block;
  padding: 10px 26px;
  background: linear-gradient(135deg, #0f2a5c 0%, #1a1060 55%, #0d1f4a 100%);
  color: #e8f4ff;
  font: bold 14px/1.5 'Ubuntu', Arial, sans-serif;
  text-align: center;
  text-decoration: none;
  border: 1px solid #00c8ff;
  border-radius: 8px;
  cursor: pointer;
  box-shadow: 0 0 12px rgba(0,200,255,0.22), inset 0 1px 0 rgba(255,255,255,0.07);
  transition: all 0.2s;
  letter-spacing: 0.03em;
}
.fancybutton:hover {
  background: linear-gradient(135deg, #1c3c7e 0%, #2c1888 55%, #18336a 100%);
  border-color: #40dcff;
  box-shadow: 0 0 20px rgba(0,200,255,0.42), inset 0 1px 0 rgba(255,255,255,0.1);
  color: #ffffff;
  transform: translateY(-1px);
}
.fancybutton:active { transform: translateY(0); }
.fancybutton:disabled, .fancybutton[disabled] {
  opacity: 0.4;
  cursor: not-allowed;
  transform: none;
  box-shadow: none;
  border-color: #2a4a70;
}

/* Join game variant */
.btn-join,
.fancybutton.btn-join {
  background: linear-gradient(135deg, #0a3a1a 0%, #0c2e14 100%) !important;
  border-color: #00e676 !important;
  box-shadow: 0 0 12px rgba(0,230,118,0.2) !important;
  color: #d0ffe0 !important;
}
.btn-join:hover,
.fancybutton.btn-join:hover {
  background: linear-gradient(135deg, #134d24 0%, #103e1c 100%) !important;
  border-color: #40ff96 !important;
  box-shadow: 0 0 20px rgba(0,230,118,0.38) !important;
  color: #eafff0 !important;
}

/* ── Danger ─────────────────────────────────────────────────── */
.btn-danger {
  display: inline-block;
  padding: 8px 20px;
  background: linear-gradient(135deg, #3a0a10 0%, #280808 100%);
  color: #ffb0bc;
  border: 1px solid #ff3d57;
  border-radius: 8px;
  cursor: pointer;
  font: bold 13px/1.4 'Ubuntu', Arial, sans-serif;
  box-shadow: 0 0 8px rgba(255,61,87,0.18);
  transition: all 0.2s;
}
.btn-danger:hover {
  background: linear-gradient(135deg, #52111c 0%, #3a0c0c 100%);
  border-color: #ff6070;
  box-shadow: 0 0 16px rgba(255,61,87,0.38);
  color: #ffe0e4;
}

/* ── Success ─────────────────────────────────────────────────── */
.btn-success {
  display: inline-block;
  padding: 7px 18px;
  background: linear-gradient(135deg, #0a3018 0%, #0d3a1a 100%);
  color: #a0ffcc;
  border: 1px solid #00e676;
  border-radius: 8px;
  cursor: pointer;
  font-size: 0.85rem;
  box-shadow: 0 0 8px rgba(0,230,118,0.18);
  transition: all 0.2s;
}
.btn-success:hover {
  background: linear-gradient(135deg, #144020 0%, #124a24 100%);
  box-shadow: 0 0 14px rgba(0,230,118,0.32);
  color: #d0ffe4;
}

/* ── Warning (retract draw) ─────────────────────────────────── */
.btn-warning {
  display: inline-block;
  padding: 8px 20px;
  background: linear-gradient(135deg, #3a2600 0%, #2e1c00 100%);
  color: #ffd880;
  border: 1px solid #ffaa00;
  border-radius: 8px;
  cursor: pointer;
  font: bold 13px/1.4 'Ubuntu', Arial, sans-serif;
  box-shadow: 0 0 8px rgba(255,170,0,0.18);
  transition: all 0.2s;
}
.btn-warning:hover {
  background: linear-gradient(135deg, #4d3300 0%, #3d2600 100%);
  border-color: #ffc940;
  box-shadow: 0 0 14px rgba(255,170,0,0.32);
}

/* ── Board placement canvas area ────────────────────────────── */
.ship-row {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 6px 0;
  flex-wrap: wrap;
  justify-content: center;
}
.prevdiv { display: inline-block; }

/* ── Game boards ────────────────────────────────────────────── */
.boards-container {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 20px;
  margin: 12px 0;
}
.board-panel { text-align: center; }
.board-panel h4 { margin: 0 0 4px; font-size: 0.95rem; color: #00c8ff; }
.game-canvas {
  display: block;
  border: 1px solid #1e3a5a;
  border-radius: 4px;
  cursor: crosshair;
  margin: 0 auto;
  box-shadow: 0 0 12px rgba(0,200,255,0.1);
}

/* ── Board toggle tabs ──────────────────────────────────────── */
.board-toggle-row {
  display: flex;
  gap: 8px;
  margin: 12px 0 6px;
  justify-content: center;
}
.board-tab {
  flex: 1;
  max-width: 200px;
  padding: 10px 16px;
  border: 1px solid #1e3e6a;
  background: linear-gradient(135deg, #080e1e 0%, #0c1830 100%);
  color: #6ea8d8;
  border-radius: 8px;
  font: 600 0.9rem 'Ubuntu', Arial, sans-serif;
  cursor: pointer;
  transition: all 0.2s;
  box-shadow: 0 2px 6px rgba(0,0,0,0.4);
}
.board-tab:hover {
  background: linear-gradient(135deg, #0e1e38 0%, #142640 100%);
  border-color: #3a7ab8;
  color: #b0d8ff;
}
.board-tab.active-tab {
  background: linear-gradient(135deg, #0f2a5c 0%, #180e58 100%);
  color: #ffffff;
  border-color: #00c8ff;
  box-shadow: 0 0 14px rgba(0,200,255,0.3);
}
.board-panel-full {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding-bottom: 8px;
}
.board-panel-full canvas { width: 100%; max-width: 480px; }

/* ── Ship selector ──────────────────────────────────────────── */
.ship-selector { margin: 6px 0; font-size: 0.85rem; color: #7a9abb; }
.ship-btn {
  padding: 5px 12px;
  border-radius: 6px;
  border: 1px solid #1e3a5a;
  background: #080e1e;
  color: #6ea8d8;
  cursor: pointer;
  margin: 0 3px;
  font: 600 12px 'Ubuntu', Arial, sans-serif;
  transition: all 0.15s;
}
.ship-btn:hover { background: #0e1e38; border-color: #3a7ab8; color: #b0d8ff; }
.ship-btn.active-ship {
  background: linear-gradient(135deg, #0f2a5c 0%, #180e58 100%);
  border-color: #00c8ff;
  color: #ffffff;
  font-weight: 700;
  box-shadow: 0 0 8px rgba(0,200,255,0.28);
}
.ship-btn.destroyed {
  background: #120608;
  border-color: #ff3d57;
  color: #904050;
  cursor: not-allowed;
  text-decoration: line-through;
  opacity: 0.55;
}
.ship-btn.ready {
  background: linear-gradient(135deg, #0a3018 0%, #0c3a1a 100%);
  border-color: #00e676;
  color: #80ffb0;
  box-shadow: 0 0 6px rgba(0,230,118,0.2);
}

/* ── Ship status cards ──────────────────────────────────────── */
.ship-status-grid {
  display: flex;
  justify-content: center;
  gap: 14px;
  flex-wrap: wrap;
  margin: 14px 0;
}
.ship-status-card {
  background: linear-gradient(160deg, #0a1220 0%, #0d1828 100%);
  border: 1px solid #1a2e48;
  border-radius: 10px;
  padding: 10px 16px;
  min-width: 110px;
  text-align: center;
  box-shadow: 0 2px 10px rgba(0,0,0,0.4);
}
.ship-status-card.selected-card {
  border-color: #00c8ff;
  box-shadow: 0 0 12px rgba(0,200,255,0.2);
}
.ship-status-card.destroyed-card {
  border-color: #ff3d57;
  opacity: 0.5;
}
.ship-label   { font-size: 0.78rem; color: #507090; margin-bottom: 4px; text-transform: uppercase; letter-spacing: 0.06em; }
.ship-hp      { font-size: 1rem; font-weight: bold; color: #d0e8ff; margin-bottom: 6px; }

.cooldown-bar-wrap {
  background: #0a1020;
  border-radius: 4px;
  height: 6px;
  width: 100%;
  overflow: hidden;
  margin-bottom: 4px;
  border: 1px solid #1a2e48;
}
.cooldown-bar {
  height: 100%;
  width: 0%;
  background: linear-gradient(90deg, #0050a0, #00c8ff);
  border-radius: 4px;
  transition: width 1s linear;
  box-shadow: 0 0 6px rgba(0,200,255,0.5);
}
.cooldown-bar.full { background: linear-gradient(90deg, #00802a, #00e676); box-shadow: 0 0 6px rgba(0,230,118,0.5); }
.cooldown-text { font-size: 0.75rem; color: #00c8ff; }
.cooldown-text.ready-text { color: #00e676; font-weight: bold; text-shadow: 0 0 6px rgba(0,230,118,0.5); }

/* ── Status bar ─────────────────────────────────────────────── */
.status-bar {
  background: linear-gradient(90deg, #080e1e, #0c1428, #080e1e);
  border: 1px solid #1a3050;
  border-radius: 8px;
  padding: 8px 18px;
  margin: 0 auto 10px;
  max-width: 600px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  box-shadow: 0 2px 10px rgba(0,0,0,0.4);
}
#status-text   { font-size: 0.9rem; color: #b0d0f0; }
#lives-display { font-size: 0.85rem; color: #00c8ff; }

/* ── Timeout bar ────────────────────────────────────────────── */
.timeout-bar { font-size: 0.8rem; color: #507090; margin: 6px 0; }
#timeout-countdown { color: #ffaa00; font-weight: bold; text-shadow: 0 0 6px rgba(255,170,0,0.4); }

/* ── Action buttons row ─────────────────────────────────────── */
.action-buttons {
  display: flex;
  justify-content: center;
  gap: 12px;
  margin: 14px 0;
  flex-wrap: wrap;
}

/* ── TX feedback ────────────────────────────────────────────── */
.tx-feedback {
  background: #071a0c;
  border: 1px solid #00804a;
  border-radius: 8px;
  padding: 10px 16px;
  max-width: 480px;
  margin: 10px auto;
  font-size: 0.8rem;
  color: #60d090;
}
.tx-feedback.error { background: #12040a; border-color: #ff3d57; color: #ff8090; }

/* ── Game over panel ────────────────────────────────────────── */
.gameover-panel {
  background: linear-gradient(160deg, #080e1e 0%, #0d1428 100%);
  border: 1px solid #1a3050;
  border-radius: 14px;
  padding: 32px 44px;
  max-width: 420px;
  margin: 20px auto;
  box-shadow: 0 0 30px rgba(0,200,255,0.08);
}
.gameover-panel h2 { font-size: 1.8rem; margin-bottom: 8px; color: #e8f4ff; }
.gameover-panel p  { color: #7a9abb; margin-bottom: 22px; }

/* ── Mobile tweaks ──────────────────────────────────────────── */
@media (max-width: 520px) {
  .ship-status-grid { gap: 8px; }
  .ship-status-card { min-width: 88px; padding: 8px 10px; }
  .fancybutton      { padding: 9px 18px; font-size: 13px; }
}

/* ══════════════════════════════════════════════════════════════
   SECONDARY / UTILITY BUTTONS
   Rotate, Place, and other small inline actions
══════════════════════════════════════════════════════════════ */
.btn-secondary,
button.btn-secondary {
  display: inline-block;
  padding: 7px 16px;
  background: linear-gradient(135deg, #0d1e38 0%, #0a1828 100%);
  color: #80b8e0;
  border: 1px solid #2a4a7a;
  border-radius: 7px;
  cursor: pointer;
  font: 600 13px/1.4 'Ubuntu', Arial, sans-serif;
  letter-spacing: 0.02em;
  box-shadow: 0 2px 6px rgba(0,0,0,0.4);
  transition: all 0.18s;
}
.btn-secondary:hover {
  background: linear-gradient(135deg, #142840 0%, #0e2035 100%);
  border-color: #4a8ac0;
  color: #c0daff;
  box-shadow: 0 0 10px rgba(0,160,255,0.18);
}
.btn-secondary:active {
  transform: translateY(1px);
  box-shadow: 0 1px 3px rgba(0,0,0,0.4);
}

/* Catch any bare <button> elements that still have no class */
button:not([class]),
button[class=""] {
  display: inline-block;
  padding: 7px 16px;
  background: linear-gradient(135deg, #0d1e38 0%, #0a1828 100%);
  color: #80b8e0;
  border: 1px solid #2a4a7a;
  border-radius: 7px;
  cursor: pointer;
  font: 600 13px/1.4 'Ubuntu', Arial, sans-serif;
  transition: all 0.18s;
}
button:not([class]):hover,
button[class=""]:hover {
  background: linear-gradient(135deg, #142840 0%, #0e2035 100%);
  border-color: #4a8ac0;
  color: #c0daff;
}

/* ══════════════════════════════════════════════════════════════
   SHIP PLACEMENT AREA
   .gcDiv  — touch canvas container
   .prevdiv — ship preview panels (transparent bg now ships have alpha)
   .prev   — ship preview image centering
   .gc     — placement grid canvas
══════════════════════════════════════════════════════════════ */
.gcDiv {
  /* Allow vertical page scroll; canvas itself blocks scroll via JS preventDefault */
  touch-action: pan-y;
  width: 100%;
  max-width: 540px;
  margin: 0 auto;
}

/* Preview panels */
.prevdiv {
  width: 160px;
  height: 90px;
  background: transparent;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: visible;   /* was hidden — was clipping ship edges */
  border-radius: 6px;
  flex-shrink: 0;
}

/* Larger preview for bigger ships */
.ship-row:nth-child(2) .prevdiv { width: 220px; }
.ship-row:nth-child(3) .prevdiv { width: 160px; }

.prev {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}

.gc {
  display: block;
  /* canvas handles its own touch events via preventDefault in the handler */
  touch-action: none;
  user-select: none;
  -webkit-user-select: none;
  width: 100%;
  max-width: 400px;
  border: 1px solid #1a3050;
  border-radius: 4px;
  box-shadow: 0 0 14px rgba(0,200,255,0.08);
  margin: 10px auto 0;
}

/* Ship row layout (preview + buttons side by side) */
.ship-row {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 6px auto;
  flex-wrap: nowrap;      /* keep row on one line */
  justify-content: center;
  max-width: 98vw;
}

/* Fire button — shown after cell selection in 3-step attack */
#fire-btn {
  display: inline-block;
  width: 100%;
  max-width: 320px;
  padding: 14px 20px;
  margin: 10px auto 0;
  font: bold 15px/1.4 'Ubuntu', Arial, sans-serif;
  letter-spacing: 0.04em;
  background: linear-gradient(135deg, #3a0010 0%, #6a0020 100%);
  color: #ffd0d8;
  border: 2px solid #ff3d57;
  border-radius: 10px;
  cursor: pointer;
  box-shadow: 0 0 18px rgba(255, 61, 87, 0.4);
  transition: all 0.2s;
  text-align: center;
}
#fire-btn:hover {
  background: linear-gradient(135deg, #550020 0%, #880030 100%);
  box-shadow: 0 0 28px rgba(255, 61, 87, 0.6);
  color: #fff0f2;
}


/* ─── Laser Cannon Weapon Selector ─────────────────────────── */
/* Weapon buttons inherit the same base style as .ship-btn */
.weapon-btn {
  padding: 5px 12px;
  border-radius: 6px;
  border: 1px solid #1e3a5a;
  background: #080e1e;
  color: #6ea8d8;
  cursor: pointer;
  margin: 0 3px;
  font: 600 12px 'Ubuntu', Arial, sans-serif;
  transition: all 0.15s;
}
.weapon-btn:hover { background: #0e1e38; border-color: #3a7ab8; color: #b0d8ff; }
/* Active/selected weapon — same glow as active-ship but purple tint for laser */
.weapon-btn.active-weapon {
  background: linear-gradient(135deg, #0f2a5c 0%, #180e58 100%);
  border-color: #00c8ff;
  color: #ffffff;
  font-weight: 700;
  box-shadow: 0 0 8px rgba(0,200,255,0.28);
}
/* Laser ready — same green glow as .ship-btn.ready */
.weapon-btn.weapon-ready {
  background: linear-gradient(135deg, #0a3018 0%, #0c3a1a 100%);
  border-color: #00e676;
  color: #80ffb0;
  box-shadow: 0 0 6px rgba(0,230,118,0.2);
}
/* Rocket ready — amber/orange distinct from laser green */
.weapon-btn.weapon-rocket-ready {
  background: linear-gradient(135deg, #2a1800 0%, #3a2200 100%);
  border-color: #ff9500;
  color: #ffcc66;
  box-shadow: 0 0 6px rgba(255,150,0,0.25);
}

/* Laser on cooldown — dimmed like a destroyed ship */
.weapon-btn.weapon-cooldown {
  background: #120608;
  border-color: #ff3d57;
  color: #904050;
  opacity: 0.65;
}

/* ─── Laser Cooldown Bars (inside ship cards) ───────────────── */
.laser-status-container {
  margin-top: 4px;
}
.laser-cd-row {
  display: flex;
  align-items: center;
  gap: 5px;
  margin-top: 3px;
  font-size: 0.7rem;
}
.laser-label {
  white-space: nowrap;
  color: #ff6680;
  min-width: 54px;
}
.laser-bar {
  background: linear-gradient(90deg, #c00 0%, #f35 100%);
}
.laser-cd-text {
  color: #ff6680;
  font-size: 0.68rem;
  min-width: 38px;
  text-align: right;
}

/* ─── Shield Generator Indicators (ship status cards) ──────── */
.sg-status-container {
  display: flex;
  align-items: center;
  gap: 4px;
  margin-top: 4px;
  flex-wrap: wrap;
}
.sg-label {
  font-size: 0.7rem;
  color: #7ac0ff;
  white-space: nowrap;
}
/* Each pip = 1 shield layer per cell */

/* ── Missile counter (shown on all ship cards, 0 if none) ───────────────────── */
.missile-counter {
  display: flex;
  align-items: center;
  gap: 4px;
  margin-top: 4px;
  font-size: 0.72rem;
  color: #aaa;
}
.missile-counter.has-missiles {
  color: #ffcc66;
}
.missile-counter.no-missiles {
  color: #555;
}
.missile-label {
  font-size: 0.68rem;
  margin-right: 2px;
}
.missile-count {
  font-weight: bold;
  font-size: 0.8rem;
  min-width: 14px;
  text-align: center;
}
/* ── Decoy Satellite indicators ─────────────────────────────────────────── */
.decoy-status-container {
  display: flex;
  align-items: center;
  gap: 3px;
  margin-top: 3px;
  flex-wrap: wrap;
}
.decoy-label {
  font-size: 0.68rem;
  color: #8af;
  margin-right: 3px;
}
.decoy-pip {
  display: inline-block;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 35%, #8af, #369);
  box-shadow: 0 0 4px rgba(100, 170, 255, 0.7);
}

.sg-pip {
  display: inline-block;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: linear-gradient(135deg, #00c8ff 0%, #3a7ab8 100%);
  border: 1px solid #0088bb;
  box-shadow: 0 0 4px rgba(0, 200, 255, 0.45);
}

/* ─── Board legend colours (attack board) ───────────────────── */
/* value 1 = hull hit (red)   — via fw_drawBoard ctx.fillStyle "#c44"     */
/* value 2 = miss (blue)      — via fw_drawBoard ctx.fillStyle "#336"     */
/* value 3 = shield hit (orange) — via fw_drawBoard ctx.fillStyle "#d47a00" */
/* No CSS needed for canvas; colours are set in JS.                       */

/* ── Board Legend ─────────────────────────────────────────────────────────── */
.legend-toggle-row {
  text-align: center;
  margin: 10px 0 0;
}

.btn-legend {
  background: transparent;
  border: 1px solid #2a4a6a;
  color: #7ac0ff;
  border-radius: 6px;
  padding: 5px 14px;
  font-size: 0.78rem;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s;
}
.btn-legend:hover {
  background: #0e1e38;
  border-color: #3a7ab8;
}

.board-legend {
  background: #0a1520;
  border: 1px solid #1e3a5a;
  border-radius: 8px;
  padding: 12px 14px;
  margin-top: 8px;
  text-align: left;
}

.legend-title {
  margin: 0 0 8px;
  font-size: 0.85rem;
  color: #7ac0ff;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.legend-section-label {
  font-size: 0.72rem;
  color: #5a8ab0;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: 5px;
}

.legend-grid {
  display: grid;
  grid-template-columns: 26px 1fr;
  gap: 5px 8px;
  align-items: center;
  margin-bottom: 4px;
}

.legend-grid-wide {
  grid-template-columns: 22px 1fr;
}

.legend-cell {
  width: 22px;
  height: 22px;
  border-radius: 3px;
  flex-shrink: 0;
  position: relative;
}

.legend-badge {
  position: absolute;
  top: 1px;
  right: 1px;
  font-size: 9px;
  color: #8050c0;
  line-height: 1;
}

.legend-icon {
  font-size: 0.9rem;
  text-align: center;
}

.legend-desc {
  font-size: 0.72rem;
  color: #8aaccc;
  line-height: 1.3;
}


/* ── Radar Panel ──────────────────────────────────────────────────────────── */
.radar-panel {
  background: linear-gradient(135deg, #001828 0%, #00283a 100%);
  border: 1px solid #1e6090;
  border-radius: 8px;
  padding: 10px 12px;
  margin: 10px 0 6px;
  text-align: center;
}
.radar-status {
  font-size: 0.82rem;
  color: #7ad8ff;
  margin-bottom: 6px;
}
.radar-status .radar-stat b { color: #aef0ff; font-size: 1rem; }
.radar-status .radar-jam   { color: #ff8888; font-size: 0.72rem; margin-left: 4px; }

.btn-radar {
  background: linear-gradient(135deg, #003a55, #005580);
  border: 1px solid #2090c0;
  color: #cfeaff;
  border-radius: 6px;
  padding: 6px 16px;
  font-size: 0.85rem;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s, opacity 0.2s;
}
.btn-radar:hover:not(:disabled) {
  background: linear-gradient(135deg, #005a85, #0080b8);
  border-color: #50c8ff;
}
.btn-radar:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

.radar-reveals {
  margin-top: 8px;
  text-align: left;
  font-size: 0.72rem;
  color: #aaccdd;
}
.radar-reveal-header {
  color: #7ad8ff;
  font-weight: bold;
  margin-bottom: 4px;
}
.radar-reveal-section {
  color: #6090b0;
  margin-top: 4px;
  font-size: 0.68rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.radar-reveal-list {
  margin: 2px 0 0;
  padding-left: 16px;
  list-style: none;
}
.radar-reveal-list li {
  padding: 1px 0;
  color: #aef0c0;
}
.radar-reveal-empty {
  color: #6688aa;
  font-size: 0.68rem;
  margin-top: 2px;
}