/* =============== Army Chess - Board Left, Right Panel (General + Captures + Notation) =============== */
/* Desktop layout:  [ Board | Right Panel ]
   Right Panel order: General (top) → Captured Units → Notation
   Mobile: Board (full width), then Right Panel stack
*/
.army-chess-wrap{
  width: 100%;
  max-width: clamp(320px, 95vw, 1600px);
  margin: 0 auto;
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;

  /* Layout sizing */
  --panel-w: 320px;   /* right panel width */
  --gap: 14px;
  --board-max: 1100px;
}

/* Toolbar */
.army-chess-toolbar{ display:flex; gap:.5rem; align-items:center; flex-wrap:wrap; margin-bottom:.75rem; }
.army-chess-toolbar label{ display:flex; gap:.4rem; align-items:center; font-size:14px; }

/* ===== Stage grid: Board | Right panel ===== */
.ac-stage{
  display:grid;
  grid-template-columns: 1fr var(--panel-w);
  gap: var(--gap);
  align-items:start;
}
.ac-main{ min-width:0; display:flex; flex-direction:column; align-items:flex-start; }

/* Right panel container stacks its sections */
.ac-side{
  width: var(--panel-w);
  display:flex;
  flex-direction:column;
  gap:.6rem;
}

/* General card (top of side) */
.ac-general{
  background: rgba(0,0,0,0.35);
  border:1px solid rgba(255,255,255,.18);
  border-radius:10px;
  color:#f2f2f2;
  padding:.75rem;
}
.ac-gen-header{ display:flex; gap:.75rem; align-items:center; margin-bottom:.5rem; }
.ac-gen-photo{
  width:64px; height:64px; border-radius:8px; overflow:hidden;
  background: rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.2);
  display:grid; place-items:center;
}
.ac-gen-photo img{ width:100%; height:100%; object-fit:cover; display:block; }
.ac-gen-name{ font-weight:700; font-size:16px; line-height:1.2; }
.ac-gen-meta{ font-size:12px; opacity:.85; }
.ac-gen-intro{
  margin:.35rem 0 .5rem;
  font-size:13px;
  background: rgba(0,0,0,.25);
  border:1px solid rgba(255,255,255,.12);
  border-radius:8px;
  padding:.5rem .6rem;
}
/* Dynamic bark bubble */
.ac-bark{
  margin-top:.35rem; font-size:13px;
  background: rgba(255,215,0,.12);
  border:1px solid rgba(255,215,0,.35);
  color:#ffe082; border-radius:8px; padding:.5rem .6rem;
  opacity:0; transform: translateY(-4px);
  transition: opacity .25s ease, transform .25s ease;
}
.ac-bark.show{ opacity:1; transform: translateY(0); }

/* Captures section (middle of side) */
.ac-captures-wrap{
  background: rgba(0,0,0,0.35);
  border:1px solid rgba(255,255,255,.18);
  border-radius:10px;
  color:#f2f2f2;
  padding:.6rem .65rem;
}
.ac-captures-wrap h4{
  margin:.1rem 0 .4rem; font-size:13px; font-weight:700; letter-spacing:.02em; opacity:.9;
}
.ac-captures-panel{ display:flex; flex-direction:column; gap:.5rem; font-size:13px; }
.ac-caps{ display:flex; align-items:center; gap:6px; flex-wrap:wrap; }
.ac-caps strong{ opacity:.8; margin-right:6px; }

/* Notation section (bottom of side) */
.ac-notation{
  background: rgba(0,0,0,0.35);
  border:1px solid rgba(255,255,255,.18);
  border-radius:10px;
  color:#f2f2f2;
  padding:.6rem .65rem;
}
.ac-moves{
  font-size:13px;
  background: rgba(0,0,0,.18);
  padding:.45rem .6rem;
  border-radius:6px;
  color:#fff;
  max-height:220px;
  overflow:auto;
}
.ac-pgn-tools{ margin-top:.35rem; }
.ac-copy-pgn{
  font-size:12px;padding:.25rem .5rem;border-radius:5px;
  border:1px solid rgba(255,255,255,.25);
  background:rgba(0,0,0,.35);color:#fff;cursor:pointer;
}

/* ===== Board — big, square, and responsive ===== */
.army-chess-board{
  aspect-ratio: 1 / 1;
  display:grid;
  grid-template-columns: repeat(8, 1fr);
  grid-template-rows:    repeat(8, 1fr);
  position: relative;
  border: 4px solid #222;
  border-radius: 8px;
  overflow: hidden;

  /* large square respecting right panel and viewport height */
  width: min(
    calc(100vw - var(--panel-w) - (var(--gap) * 3)),
    92dvh,
    var(--board-max)
  );
  max-width: min(calc(100vw - var(--panel-w) - (var(--gap) * 3)), 92vh, var(--board-max));

  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
  -webkit-user-select: none; user-select: none;

  background: #1f1f1f;
}

/* Battlefield background (toggle via data-theme on wrapper) */
.army-chess-wrap[data-theme="jungle"] .army-chess-board{
  background: url('jungle.png') center/cover no-repeat, #1b241b;
  filter: saturate(1.05);
}
.army-chess-wrap[data-theme="desert"] .army-chess-board{
  background: url('desert.png') center/cover no-repeat, #2a2418;
  filter: saturate(1.05);
}

/* 64 squares (overlay) */
.ac-square{ position:relative; box-shadow: inset 0 0 0 1px rgba(0,0,0,.25); }
.ac-square.light{ background-color: rgba(250,250,250,.25); }
.ac-square.dark { background-color: rgba(40,40,40,.25); }

/* Pieces */
.ac-piece{
  width:100%; height:100%;
  display:flex; align-items:center; justify-content:center;
  cursor: grab; user-select:none; transition: transform .08s ease;
  position:relative; z-index:1;
}
.ac-piece:active{ cursor: grabbing; transform: scale(0.98); }
.ac-icon{ width:80%; height:80%; display:flex; align-items:center; justify-content:center; }
.ac-icon img{ display:block; width:100%; height:100%; object-fit:contain; pointer-events:none; }

/* Last move highlights */
.ac-square.move-from{ outline: 3px solid #aaa; }
.ac-square.move-to  { outline: 3px solid #000; }

/* Tap-to-move visuals */
.ac-square.ac-selected{
  outline: 4px solid rgba(255,210,0,0.95);
  box-shadow: inset 0 0 0 2px rgba(0,0,0,.35);
}
.ac-square.ac-legal::after{
  content:""; position:absolute; inset:34%;
  border-radius:50%; background: rgba(255,255,255,.85);
  box-shadow: 0 0 0 2px rgba(0,0,0,.15); z-index:0;
}
.ac-square.ac-legal[data-cap="1"]::after{
  inset:12%; background: transparent;
  border: 4px solid rgba(255,60,60,.85);
  box-shadow: 0 0 0 2px rgba(0,0,0,.15);
}

/* Disable any mask rules (PNG mode) */
.ac-icon, .ac-type-pawn .ac-icon, .ac-type-bishop .ac-icon, .ac-type-knight .ac-icon,
.ac-type-rook .ac-icon, .ac-type-queen .ac-icon, .ac-type-king .ac-icon{
  -webkit-mask: none !important; mask: none !important; background: none !important;
}

/* Status + engine badge */
.army-chess-status{ margin-top:.5rem; font-size:14px; color:#f2f2f2; }
.army-chess-status .ac-engine{
  display:inline-block; margin-left:.5rem; padding:.15rem .5rem; border-radius:999px;
  font-size:12px; font-weight:600; background: rgba(0,0,0,0.35); color:#fff;
  border:1px solid rgba(255,255,255,0.2);
}
.ac-engine.stockfish      { background: rgba(46,125,50,0.35);  border-color: rgba(46,125,50,0.5); }
.ac-engine.minimax-worker { background: rgba(25,118,210,0.35); border-color: rgba(25,118,210,0.5); }
.ac-engine.minimax-sync   { background: rgba(198,40,40,0.35);  border-color: rgba(198,40,40,0.5); }

/* Team shading – subtle darken for black pieces */
.ac-piece.black .ac-icon img{ filter: grayscale(0.1) brightness(0.78) contrast(1.15); }

/* ===== Mobile / Tablet ===== */
@media (max-width: 900px){
  .ac-stage{ grid-template-columns: 1fr; }
  .ac-side{ width:auto; order: 2; }
  .ac-main{ order: 1; }

  .army-chess-board{
    width: min(96vw, 92dvh, var(--board-max));
    max-width: min(96vw, 92vh, var(--board-max));
  }
}