/* board.css — shared board/game styling for the online game page.
   Same palette as the original local hot-seat build (index.html) so both
   feel like one app. */
:root {
  --light: #eef0f4;
  --dark: #6d7fa3;
  --accent: #2a6df5;
  --accent2: #e34f4f;
  --gold: #e0b23a;
  --panel-bg: #14192b;
  --panel-bg2: #1d2440;
  --text: #eef0f4;
  --muted: #9aa4c0;

  /* Single source of truth for board scale. Everything on the board —
     squares, piece art, move dots, the file row — is sized off this, so
     the whole board shrinks to fit a phone by changing one number.
     game-client.js measures a rendered square rather than reading this,
     since calc() values don't resolve through getComputedStyle. */
  --sq: 60px;
  --page-pad: 24px;
}
* { box-sizing: border-box; }
body {
  margin: 0;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  background: radial-gradient(circle at 20% -10%, #232c52, #0d1120 60%);
  color: var(--text);
  min-height: 100vh;
  padding: var(--page-pad);
}
h1 { margin: 0 0 2px; font-size: 26px; letter-spacing: 1px; }
.subtitle { color: var(--muted); font-size: 13px; margin-bottom: 18px; }
.top-links { margin-bottom: 14px; }
.top-links a { color: var(--muted); text-decoration: none; font-size: 13px; }
.top-links a:hover { color: var(--text); }
.app {
  display: flex;
  gap: 24px;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: center;
}
.board-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
}
.status-bar {
  display: flex;
  align-items: center;
  gap: 10px;
  background: var(--panel-bg2);
  padding: 10px 16px;
  border-radius: 10px;
  font-size: 14px;
  width: calc(var(--sq) * 8);
  justify-content: space-between;
}
.turn-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  border-radius: 20px;
  background: #0d1120;
  font-weight: 600;
}
.turn-dot { width: 10px; height: 10px; border-radius: 50%; }
.turn-dot.w { background: #f4f4f4; border: 1px solid #888; }
.turn-dot.b { background: #222; border: 1px solid #888; }
#board {
  display: grid;
  grid-template-columns: repeat(8, var(--sq));
  grid-template-rows: repeat(8, var(--sq));
  border: 3px solid #0d1120;
  border-radius: 6px;
  box-shadow: 0 20px 50px rgba(0,0,0,0.5);
  position: relative;
}
.sq {
  width: var(--sq); height: var(--sq);
  display: flex; align-items: center; justify-content: center;
  position: relative;
  cursor: pointer;
  user-select: none;
  transition: background-color 0.15s ease;
}
.sq.light { background: var(--light); }
.sq.dark { background: var(--dark); }
/* #board used to clip with overflow:hidden, which also chopped explosions in
   half on edge squares. The corners are rounded per-square instead so the FX
   layer can spill outside the board. Indices stay valid when FX elements are
   appended, since they land after all 64 squares. */
.sq:nth-child(1)  { border-top-left-radius: 4px; }
.sq:nth-child(8)  { border-top-right-radius: 4px; }
.sq:nth-child(57) { border-bottom-left-radius: 4px; }
.sq:nth-child(64) { border-bottom-right-radius: 4px; }
.sq .piece {
  width: calc(var(--sq) * 0.84);
  height: calc(var(--sq) * 0.84);
  object-fit: contain;
  pointer-events: none;
  filter: drop-shadow(0 2px 2px rgba(0,0,0,0.45));
  transition: filter 0.15s ease;
}
/* Pieces belonging to the side whose turn it is now glow gold. */
.sq .piece.active-turn { animation: piece-active-turn 1.6s ease-in-out infinite; }
@keyframes piece-active-turn {
  0%, 100% { filter: drop-shadow(0 2px 2px rgba(0,0,0,0.45)) drop-shadow(0 0 3px #fff6c4) drop-shadow(0 0 7px #f4c542); }
  50%      { filter: drop-shadow(0 2px 2px rgba(0,0,0,0.45)) drop-shadow(0 0 6px #fff6c4) drop-shadow(0 0 14px #f4c542); }
}
/* Pieces currently locked into a laser array get a blue aura. */
.sq .piece.laser-member {
  filter: drop-shadow(0 2px 2px rgba(0,0,0,0.45)) drop-shadow(0 0 3px #7fb2ff) drop-shadow(0 0 9px #2a6df5);
}
.sq .piece.laser-member.active-turn { animation: piece-active-turn-laser 1.6s ease-in-out infinite; }
@keyframes piece-active-turn-laser {
  0%, 100% { filter: drop-shadow(0 2px 2px rgba(0,0,0,0.45)) drop-shadow(0 0 3px #fff6c4) drop-shadow(0 0 7px #f4c542) drop-shadow(0 0 9px #2a6df5); }
  50%      { filter: drop-shadow(0 2px 2px rgba(0,0,0,0.45)) drop-shadow(0 0 6px #fff6c4) drop-shadow(0 0 14px #f4c542) drop-shadow(0 0 9px #2a6df5); }
}
.sq.selected { outline: 3px solid var(--gold); outline-offset: -3px; }
.sq.legal::after {
  content: "";
  position: absolute;
  width: calc(var(--sq) * 0.27); height: calc(var(--sq) * 0.27);
  border-radius: 50%;
  background: rgba(42, 109, 245, 0.65);
}
.sq.legal-capture::after {
  width: calc(var(--sq) * 0.77); height: calc(var(--sq) * 0.77);
  border-radius: 50%;
  background: transparent;
  border: 4px solid rgba(227, 79, 79, 0.85);
}
.sq.fire-target { box-shadow: inset 0 0 0 4px var(--accent2); }
.sq.fire-target::after {
  content: "🎯";
  position: absolute;
  font-size: calc(var(--sq) * 0.33);
  top: 2px; right: 2px;
}
.laser-w { box-shadow: inset 0 0 0 3px rgba(42, 109, 245, 0.85); }
.laser-b { box-shadow: inset 0 0 0 3px rgba(227, 79, 79, 0.85); }
.laser-w.jammed, .laser-b.jammed { box-shadow: inset 0 0 0 3px var(--gold); }
.power-badge {
  position: absolute;
  bottom: 1px; left: 2px;
  font-size: 10px;
  font-weight: 700;
  background: rgba(0,0,0,0.55);
  padding: 0 4px;
  border-radius: 4px;
  line-height: 14px;
}
.files, .ranks { display: flex; color: var(--muted); font-size: 11px; }
.files { gap: 0; width: calc(var(--sq) * 8); justify-content: space-around; }
.panel {
  width: 340px;
  max-width: 100%;
  background: var(--panel-bg);
  border-radius: 12px;
  padding: 18px;
  box-shadow: 0 20px 50px rgba(0,0,0,0.5);
}
.panel h2 { font-size: 15px; margin: 0 0 10px; color: var(--muted); text-transform: uppercase; letter-spacing: 1px; }
.mode-toggle { display: flex; gap: 8px; margin-bottom: 16px; }
button {
  font-family: inherit;
  cursor: pointer;
  border: none;
  border-radius: 8px;
  padding: 9px 12px;
  font-size: 13px;
  font-weight: 600;
  background: #2a3468;
  color: var(--text);
  transition: transform 0.1s ease, background 0.15s ease;
}
button:hover:not(:disabled) { background: #37448c; }
button:disabled { opacity: 0.35; cursor: not-allowed; }
button.primary { background: var(--accent); }
button.primary:hover:not(:disabled) { background: #4680ff; }
button.active { background: var(--accent2); }
.mode-toggle button { flex: 1; }
.laser-list { display: flex; flex-direction: column; gap: 8px; margin-bottom: 14px; }
.laser-row {
  display: flex; align-items: center; justify-content: space-between;
  background: var(--panel-bg2);
  padding: 8px 10px;
  border-radius: 8px;
  font-size: 13px;
}
.laser-row .file { font-weight: 700; width: 20px; }
.laser-row .meta { color: var(--muted); font-size: 11px; }
.laser-row.selected { outline: 2px solid var(--gold); }
.dir-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; margin-bottom: 12px; }
.dir-grid button { font-size: 11px; text-align: left; padding: 8px 10px; }
.badge { font-size: 10px; padding: 1px 6px; border-radius: 10px; background: #0d1120; margin-left: 6px; }
.badge.ready { color: #7CFC9B; }
.badge.cooldown { color: var(--gold); }
.badge.jammed { color: var(--accent2); }
.log {
  margin-top: 14px;
  max-height: 160px;
  overflow-y: auto;
  font-size: 12px;
  color: var(--muted);
  display: flex;
  flex-direction: column-reverse;
  gap: 4px;
  border-top: 1px solid #2a3468;
  padding-top: 10px;
}
.hint { font-size: 12px; color: var(--muted); line-height: 1.5; margin-bottom: 12px; }
.winner-banner {
  display: none;
  background: linear-gradient(90deg, var(--gold), #f7d774);
  color: #1a1400;
  padding: 14px;
  border-radius: 10px;
  font-weight: 700;
  text-align: center;
  margin-bottom: 14px;
}
.waiting-banner {
  background: var(--panel-bg2);
  border: 1px dashed var(--muted);
  padding: 14px;
  border-radius: 10px;
  margin-bottom: 14px;
  font-size: 13px;
}
.waiting-banner code {
  display: block;
  margin-top: 8px;
  padding: 8px;
  background: #0d1120;
  border-radius: 6px;
  word-break: break-all;
  font-size: 12px;
}
.footer-buttons { display: flex; gap: 8px; margin-top: 16px; }
.footer-buttons button, .footer-buttons a.btn { flex: 1; text-align: center; text-decoration: none; }
dialog {
  border: none;
  border-radius: 12px;
  padding: 0;
  max-width: 560px;
  width: 90vw;
  background: var(--panel-bg);
  color: var(--text);
}
dialog::backdrop { background: rgba(0,0,0,0.6); }
.modal-inner { padding: 22px 26px; max-height: 80vh; overflow-y: auto; }
.modal-inner h2 { margin-top: 0; }
.modal-inner h3 { color: var(--gold); margin-bottom: 4px; }
.modal-inner p, .modal-inner li { font-size: 13.5px; line-height: 1.6; color: #d8dcf0; }
.modal-inner .close-row { text-align: right; margin-top: 14px; }
.note-box {
  background: var(--panel-bg2);
  border-left: 3px solid var(--gold);
  padding: 10px 12px;
  border-radius: 6px;
  margin: 10px 0;
  font-size: 12.5px;
  color: var(--muted);
}

/* ---- responsive: shrink the board to fit narrow screens ----
   At 60px squares the board alone is 486px wide, so anything under ~530px
   (i.e. every phone) used to scroll sideways. Below the breakpoint the
   square size is derived from the viewport instead of being fixed, and the
   side panel drops underneath the board. */
@media (max-width: 860px) {
  .app { flex-direction: column; align-items: center; }
  .panel { width: calc(var(--sq) * 8); }
}
@media (max-width: 620px) {
  :root {
    --page-pad: 10px;
    --sq: calc((100vw - (var(--page-pad) * 2) - 6px) / 8);
  }
  /* The online game page nests the board inside lobby.css's .container,
     which adds its own 20px of side padding. The --sq math above only knows
     about --page-pad, so that padding has to go or the board overflows by
     ~40px on a phone. board.css only loads on board pages, so this is safe. */
  .container, .container.container-wide { padding-left: 0; padding-right: 0; }
  h1 { font-size: 22px; }
  .status-bar { padding: 8px 10px; font-size: 13px; }
  .power-badge { font-size: 9px; }
  .log { max-height: 120px; }
}

/* ---- fire/capture effects (sci-fi laser + explosion) ---- */
.fx-beam-wrap {
  position: absolute;
  top: 0; left: 0;
  width: 0; height: 0;
  pointer-events: none;
  z-index: 5;
}
.fx-beam {
  position: absolute;
  height: 4px;
  top: -2px; left: 0;
  transform-origin: 0 50%;
  border-radius: 2px;
  animation: fx-beam-fire 0.38s ease-out forwards;
}
.fx-beam-w { background: linear-gradient(90deg, #cfe0ff, var(--accent) 70%); box-shadow: 0 0 10px 2px rgba(42,109,245,0.9), 0 0 2px #fff; }
.fx-beam-b { background: linear-gradient(90deg, #ffd2d2, var(--accent2) 70%); box-shadow: 0 0 10px 2px rgba(227,79,79,0.9), 0 0 2px #fff; }
@keyframes fx-beam-fire {
  0%   { opacity: 0; transform: scaleX(0); }
  15%  { opacity: 1; transform: scaleX(1); }
  75%  { opacity: 0.9; }
  100% { opacity: 0; }
}

.fx-explosion {
  position: absolute;
  top: 0; left: 0;
  width: 0; height: 0;
  pointer-events: none;
  z-index: 6;
  --fx-scale: 1; /* set from JS so the burst tracks the square size */
}
.fx-ring, .fx-core, .fx-particle { position: absolute; top: 0; left: 0; }
.fx-ring {
  width: calc(44px * var(--fx-scale)); height: calc(44px * var(--fx-scale));
  margin: calc(-22px * var(--fx-scale)) 0 0 calc(-22px * var(--fx-scale));
  border-radius: 50%;
  border: 3px solid rgba(255, 200, 90, 0.9);
  animation: fx-ring-grow 0.42s ease-out forwards;
}
.fx-core {
  width: calc(26px * var(--fx-scale)); height: calc(26px * var(--fx-scale));
  margin: calc(-13px * var(--fx-scale)) 0 0 calc(-13px * var(--fx-scale));
  border-radius: 50%;
  background: radial-gradient(circle, #fff9e6, #ffb347 55%, rgba(227,79,79,0.6) 80%, transparent 100%);
  animation: fx-core-pop 0.4s ease-out forwards;
}
.fx-particle {
  width: 5px; height: 5px;
  margin: -2.5px 0 0 -2.5px;
  border-radius: 50%;
  background: #ffcf6b;
  animation: fx-particle-fly 0.42s ease-out forwards;
}
@keyframes fx-ring-grow {
  0%   { transform: scale(0.25); opacity: 1; }
  100% { transform: scale(1.7); opacity: 0; }
}
@keyframes fx-core-pop {
  0%   { transform: scale(0.3); opacity: 1; }
  55%  { transform: scale(1.1); opacity: 1; }
  100% { transform: scale(0.3); opacity: 0; }
}
@keyframes fx-particle-fly {
  0%   { transform: translate(0, 0); opacity: 1; }
  100% { transform: translate(var(--dx), var(--dy)); opacity: 0; }
}

.fx-poof {
  --fx-scale: 1;
  position: absolute;
  top: 0; left: 0;
  width: calc(34px * var(--fx-scale)); height: calc(34px * var(--fx-scale));
  margin: calc(-17px * var(--fx-scale)) 0 0 calc(-17px * var(--fx-scale));
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255,255,255,0.95), rgba(224,178,58,0.55) 55%, transparent 75%);
  pointer-events: none;
  z-index: 6;
  animation: fx-poof-pop 0.3s ease-out forwards;
}
@keyframes fx-poof-pop {
  0%   { transform: scale(0.35); opacity: 1; }
  100% { transform: scale(1.3); opacity: 0; }
}