:root {
  --dark-gray: #333;
  --medium-gray: #aaa;
  --light-gray: #555;
}

body {
  background-color: #111;
  color: #fff;
  margin: 0;
  font-family: sans-serif;
}

/* =========================
   Top Bar / Containers
   ========================= */
#top-bar {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 20px;
  margin: 10px 0;
}

#board-container {
  position: relative;
  flex: 1 1 auto;
  max-width: 90vw;
  max-height: 90vh;
  aspect-ratio: 1 / 1;
  background-color: #222;
  border: 2px solid var(--light-gray);
  margin: 10px auto;
}


#board {
position: absolute;
top: 0;
left: 0;
width: calc(100% + 20px);
height: calc(100% + 20px);
margin-left: -10px;
margin-right: -10px;
margin-top: -10px;
margin-bottom: -10px;
transition: filter 0.3s ease; /* for dimming */
}


#board-layer {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 5;
}

#board-layer .piece {
  position: absolute;
  pointer-events: auto;
}

/* =========================
   Banks
   ========================= */
.bank {
  position: absolute;
  top: 80px;
  width: 200px;
  background-color: #222;
  border: 2px solid var(--light-gray);
  padding: 10px;
}

#bank-left { left: 20px; }
#bank-right { right: 20px; }

.bank-title {
  font-weight: bold;
  margin-bottom: 5px;
}

.bank-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
}

.bank-slot {
  width: 50px;
  height: 50px;
  border: 1px solid #666;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* =========================
   Pieces (UNIFIED FROM IIFEs)
   ========================= */
/* Base piece look; size kept from original (40px) */
.piece,
.piece.placed {
  width: 40px;
  height: 40px;

  /* Visual base */
  border-radius: 14px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: grab;

  /* Typography (IIFE baked) */
  font-family: 'Symbola', 'Segoe UI Symbol', 'Noto Sans Symbols', sans-serif;
  font-feature-settings: 'liga' off;

  /* Centering by flex; replace original line-height centering */
  line-height: 1;
  /*font-size: 1.3rem; */
    /* Scale glyph with the piece’s own box (shorter side). Bigger + responsive. */
  container-type: size;
  font-size: min(3.30cqi, 3.30cqb);

  /* Glass + motion */
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  transition: transform 0.2s ease, box-shadow 0.3s ease;
}

/* Grabbing feedback */
.piece:active { cursor: grabbing; }

/* Player 1 — cool blue */
.piece[data-player="1"] {
  background: linear-gradient(145deg, rgba(30,80,160,0.4), rgba(50,120,200,0.2));
  border: 1.5px solid rgba(120,200,255,0.6);
  color: #dceeff;
  box-shadow: 0 0 10px rgba(120,200,255,0.3);
}
.piece[data-player="1"]:hover {
  transform: translateY(-2px) scale(1.05);
  box-shadow: 0 0 16px rgba(120,220,255,0.6);
}

/* Player 2 — warm orange */
.piece[data-player="2"] {
  background: linear-gradient(145deg, rgba(160,70,20,0.4), rgba(200,100,40,0.2));
  border: 1.5px solid rgba(255,180,100,0.6);
  color: #fff3de;
  box-shadow: 0 0 10px rgba(255,160,90,0.3);
}
.piece[data-player="2"]:hover {
  transform: translateY(-2px) scale(1.05);
  box-shadow: 0 0 16px rgba(255,170,100,0.6);
}

/* old non player specifc one - Selected-piece glow 
.piece.selected-piece {
  box-shadow: 0 0 20px 5px rgb(112, 222, 255) !important;
}*/

.piece.selected-piece.p1 {
  box-shadow: 0 0 20px 5px rgba(120, 220, 255, 0.8) !important; /* Player 1 cyan */
}

.piece.selected-piece.p2 {
  box-shadow: 0 0 20px 5px rgba(255, 180, 100, 0.8) !important; /* Player 2 amber */
}

/* Fallback for pieces missing data-player (e.g., after Randomize before tagging) */
.piece:not([data-player]) {
  background: linear-gradient(145deg, rgba(90,90,90,0.35), rgba(60,60,60,0.2));
  border: 1.5px solid rgba(180,180,180,0.5);
  color: #eee;
  box-shadow: 0 0 8px rgba(255,255,255,0.08);
}
.piece:not([data-player]):hover {
  transform: translateY(-2px) scale(1.05);
  box-shadow: 0 0 14px rgba(255,255,255,0.15);
}

/* =========================
   Piece Info Panel
   ========================= */
#piece-info {
  margin: 10px auto;
  padding: 10px;
  background-color: #222;
  border: 1px solid var(--light-gray);
  width: 600px;
  text-align: center;
}

/* =========================
   Hex / SVG Grid (DEDUPED)
   ========================= */
.svg-hex {
  fill: var(--dark-gray);
  stroke: var(--medium-gray);
  stroke-width: 3;
  shape-rendering: geometricPrecision; /* accurate stroke rendering */
  stroke-linejoin: round;
  stroke-linecap: round;
  cursor: pointer;
  transition: fill 0.2s, stroke 0.2s;
}

.svg-hex:hover {
  fill: #444;
  stroke: #fff;
}

/* Move/placement highlighting */
.svg-hex.highlight-move {
  stroke: #0f0 !important;
  fill: rgba(0, 255, 0, 0.2) !important;
}

.svg-hex.highlight-placement-legal {
  stroke: #0f0 !important;
  fill: rgba(0, 255, 0, 0.2) !important;
}

.svg-hex.highlight-placement-illegal {
  stroke: #f00 !important;
  fill: rgba(255, 0, 0, 0.2) !important;
}

/* Occupancy visuals */
.occupied-player1 {
  fill: rgba(240, 240, 240, 0.3) !important; /* soft white */
  stroke: #dddddd !important;               /* soft white outline */
}

.occupied-player2 {
  fill: rgba(20, 20, 20, 0.5) !important;   /* deep black */
  stroke: #444444 !important;               /* dark gray outline */
}

/* Player-toned legal placement */
.highlight-placement-legal-player1 {
  stroke: #1a3f8f !important; /* dark blue */
  fill: rgba(50, 100, 200, 0.2) !important;
}
.highlight-placement-legal-player2 {
  stroke: #aa4a00 !important; /* dark orange */
  fill: rgba(230, 120, 20, 0.2) !important;
}

/* Legacy text styles kept for compatibility */
.piece-text {
  font-size: calc(var(--hex-size) * 0.8);
  font-family: sans-serif;
  font-weight: bold;
  fill: #fff;
  pointer-events: none;
}

/* Hex backgrounds by owner (non-SVG variant) */
.hex {
  stroke: var(--light-gray);
  stroke-width: 1;
  fill: #222;
}
.hex.player-1 { fill: #1a1f3c; }
.hex.player-2 { fill: #3c1a1a; }
.hex.highlight { stroke: yellow; stroke-width: 3; }

.piece-text {
  font-size: 1.5rem;
  font-weight: bold;
  pointer-events: none;
  user-select: none;
}

.placement-status { color: red; }

/* Highlight currently pickable piece in bank */
.highlighted-piece {
  border: 3px solid yellow;
  background-color: rgba(255, 255, 0, 0.2);
}

/* =========================
   Tactical / Interaction
   ========================= */
/* Board dimming */
#board.dimmed-board { filter: brightness(0.85); }

/* Legal/illegal move tiles */
.highlight-legal {
  stroke: limegreen !important;
  stroke-width: 4 !important;
}
.highlight-illegal {
  stroke: crimson !important;
  stroke-width: 2 !important;
}

/* Selected hex glow (SVG) */
.selected-piece {
  stroke: rgb(217, 242, 255) !important;
  stroke-width: 3px !important;
  filter: drop-shadow(0 0 10px rgb(212, 219, 255, .5));
}

/* Taurus pushable visuals */
.hex.pushable {
  outline: 2px dashed rgba(200, 0, 0, 0.8);
}
.svg-hex.pushable-move {
  stroke: orange !important;
  stroke-width: 3px !important;
  fill: rgba(255,165,0,0.25) !important;
}
.svg-hex.pushable-move .piece {
  pointer-events: none !important;
}

/* =========================
   Buttons
   ========================= */
#fixed-toggle-controls button {
  font-size: 1.5rem;
  padding: 14px 30px;
  min-width: 180px;
  border-radius: 14px;
  border: 1px solid rgba(255, 255, 255, 0.15);
  background: linear-gradient(135deg, rgba(50,90,120,0.2), rgba(10,20,40,0.3));
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  color: #e0f7ff;
  font-family: system-ui, sans-serif;
  transition: all 0.25s ease-in-out;
  cursor: pointer;
}
#fixed-toggle-controls button:hover {
  transform: scale(1.05);
  background: linear-gradient(135deg, rgba(60,110,150,0.25), rgba(20,40,60,0.35));
}
#mode-move.active { box-shadow: 0 0 14px rgba(80,150,255,0.5); }
#mode-attack.active { box-shadow: 0 0 14px rgba(255,90,90,0.5); }
#mode-skill.active { box-shadow: 0 0 14px rgba(170,90,255,0.5); }

/* =========================
   HUD (from IIFE, baked)
   ========================= */
#turn-display,
#phase-display {
  padding: 14px 20px;
  border-radius: 16px;
  background: rgba(20,20,40,0.4);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  color: #dceeff;
  font-family: sans-serif;
  font-weight: 500;
  font-size: 1.1rem;
  display: inline-block;
  line-height: 1.6;
  min-width: 200px;
  transition: border 0.3s ease, box-shadow 0.3s ease;
  margin: 0 8px 8px 0;
}

/* Border/glow keyed off current player via data attribute set in JS */
#turn-display[data-player="1"],
#phase-display[data-player="1"] {
  border: 1.5px solid rgba(120,200,255,0.6);
  box-shadow: 0 0 12px rgba(120,200,255,0.2);
}
#turn-display[data-player="2"],
#phase-display[data-player="2"] {
  border: 1.5px solid rgba(255,180,100,0.6);
  box-shadow: 0 0 12px rgba(255,160,90,0.2);
}

#turn-display .player-name { font-weight: 600; }
#turn-display .ap-info { margin-left: 6px; }

/* =========================
   Banks & Debug: frosted + glow (full, from IIFE)
   ========================= */
#bank-left,
#bank-right,
.content {
  /* frosted glass */
  background: linear-gradient(135deg, rgba(255,255,255,0.06), rgba(255,255,255,0.03));
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);

  /* panel shape */
  border-radius: 12px;
  padding: 12px;
  margin: 8px;

  /* ambient glow + depth */
  box-shadow:
    0 6px 18px rgba(0,0,0,0.35),
    inset 0 0 0 1px rgba(255,255,255,0.06);
  transition: box-shadow 0.2s ease, border-color 0.2s ease;
}

/* Left bank: cool blue accent */
#bank-left {
  border: 1.5px solid rgba(100,200,255,0.6);
  box-shadow:
    0 6px 18px rgba(0,0,0,0.35),
    0 0 10px rgba(120,200,255,0.15),
    inset 0 0 0 1px rgba(255,255,255,0.06);
}
#bank-left:hover {
  box-shadow:
    0 0 16px rgba(100,200,255,0.35),
    0 6px 18px rgba(0,0,0,0.35),
    inset 0 0 0 1px rgba(255,255,255,0.08);
}

/* Right bank: warm orange accent */
#bank-right {
  border: 1.5px solid rgba(255,180,100,0.6);
  box-shadow:
    0 6px 18px rgba(0,0,0,0.35),
    0 0 10px rgba(255,170,100,0.15),
    inset 0 0 0 1px rgba(255,255,255,0.06);
}
#bank-right:hover {
  box-shadow:
    0 0 16px rgba(255,170,100,0.35),
    0 6px 18px rgba(0,0,0,0.35),
    inset 0 0 0 1px rgba(255,255,255,0.08);
}

/* Debug panel look */
.content {
  border: 1.5px solid rgba(200,200,200,0.6);
  box-shadow:
    0 6px 18px rgba(0,0,0,0.5),
    inset 0 0 0 1px rgba(255,255,255,0.06);
}