/* ── game chrome ── */
#view-game { min-height: 100dvh; display: flex; flex-direction: column; }
.game-top {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  padding: .55rem 1.2rem; border-bottom: 1px solid var(--border);
  background: linear-gradient(180deg, rgba(10, 9, 8, .95), rgba(10, 9, 8, .7));
  position: sticky; top: 0; z-index: 30; backdrop-filter: blur(12px);
}
.game-top-actions { display: flex; gap: .5rem; }
.battle-status { display: flex; align-items: center; gap: .6rem; font-family: var(--font-head); color: var(--gold-2); }
.bs-text { font-size: .95rem; }

.game-shell {
  flex: 1; display: grid; gap: 1rem; padding: 1rem;
  grid-template-columns: 268px minmax(320px, 1fr) 300px;
  align-items: start; max-width: 1500px; width: 100%; margin: 0 auto;
}
.panel {
  border: 1px solid var(--border); border-radius: var(--radius);
  background: linear-gradient(180deg, rgba(255, 255, 255, .04), rgba(0, 0, 0, .3));
  padding: .9rem; box-shadow: var(--shadow);
}
.board-wrap { display: flex; flex-direction: column; align-items: center; gap: .7rem; }
.turn-banner {
  display: flex; align-items: center; gap: .6rem; padding: .4rem 1.1rem;
  border: 1px solid var(--border-strong); border-radius: 999px;
  background: rgba(0, 0, 0, .45); font-family: var(--font-head); font-size: .95rem;
  transition: color .3s, border-color .3s, box-shadow .3s;
}
.turn-banner.agatha { color: var(--agatha-2); border-color: rgba(47, 95, 179, .6); box-shadow: 0 0 22px rgba(47, 95, 179, .22); }
.turn-banner.mason { color: var(--mason-2); border-color: rgba(176, 42, 42, .6); box-shadow: 0 0 22px rgba(176, 42, 42, .22); }
.turn-banner.danger { color: #ffb4a2; border-color: var(--danger); animation: pulseGold 1.4s infinite; }

/* ── board frame + table ── */
.board-frame {
  position: relative; padding: clamp(10px, 1.4vw, 20px);
  border-radius: var(--radius);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, .07), rgba(0, 0, 0, .5)),
    linear-gradient(135deg, #2b241c, #171310 60%, #241d15);
  border: 1px solid var(--border-strong);
  box-shadow: var(--shadow-lg), inset 0 1px 0 rgba(255, 255, 255, .09);
}
.board-frame::before {
  content: ''; position: absolute; inset: 0; border-radius: var(--radius);
  background-image: var(--noise); opacity: .07; mix-blend-mode: overlay; pointer-events: none;
}
.board {
  --sq: clamp(34px, min(8.6vh, 8.4vw), 72px);
  position: relative; display: grid; z-index: 2; direction: ltr;
  grid-template-columns: repeat(8, var(--sq)); grid-template-rows: repeat(8, var(--sq));
  border: 2px solid #0d0a07; box-shadow: inset 0 0 40px rgba(0, 0, 0, .8);
  touch-action: manipulation;
}
.sq {
  position: relative; display: grid; place-items: center; cursor: default;
  transition: filter .18s, box-shadow .18s;
}
.sq.light { background: linear-gradient(150deg, #c2a878, #a98d5e 70%, #96794d); }
.sq.dark { background: linear-gradient(150deg, #4c3a29, #3a2c1f 70%, #2c2117); }
.sq.agatha-tint.dark { background: linear-gradient(150deg, #3b4459, #2c3446 70%, #1f2532); }
.sq.mason-tint.dark { background: linear-gradient(150deg, #4a2d2b, #372220 70%, #281915); }
.sq::after {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background-image: var(--noise); opacity: .06; mix-blend-mode: multiply;
}
.sq.last { box-shadow: inset 0 0 0 2px rgba(232, 200, 112, .7); }
.sq.selected { box-shadow: inset 0 0 0 3px var(--gold), inset 0 0 22px rgba(232, 200, 112, .45); }
.sq.target { cursor: pointer; }
.sq.target::before {
  content: ''; position: absolute; z-index: 4; width: 30%; height: 30%; border-radius: 50%;
  background: radial-gradient(circle, rgba(232, 200, 112, .9), rgba(232, 200, 112, .25) 70%);
  box-shadow: 0 0 14px rgba(232, 200, 112, .5); animation: fadeUp .2s var(--ease) both;
}
.sq.capture-target::before {
  width: 84%; height: 84%; border-radius: 6px; background: none;
  border: 2px dashed rgba(198, 43, 28, .95);
  box-shadow: inset 0 0 22px rgba(198, 43, 28, .5);
}
.sq.checked {
  box-shadow: inset 0 0 0 3px rgba(220, 38, 38, .9), inset 0 0 28px rgba(220, 38, 38, .5);
  animation: pulseGold 1.3s infinite;
}
.sq.hover-target { filter: brightness(1.12); }

/* ── pieces ── */
.piece {
  position: relative; z-index: 3; line-height: 1; user-select: none;
  font-size: calc(var(--sq) * .78); font-family: 'Segoe UI Symbol', 'Noto Sans Symbols 2', 'Apple Symbols', serif;
  transition: transform .16s var(--ease), filter .2s;
}
.piece.w {
  background: linear-gradient(175deg, #fff8e6 12%, #e6d7ae 48%, #b99a5c 100%);
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
  color: #f3e7c8;
  -webkit-text-stroke: .6px rgba(45, 32, 14, .45);
  filter: drop-shadow(0 3px 2px rgba(0, 0, 0, .75)) drop-shadow(0 0 10px rgba(47, 95, 179, .65));
}
.piece.b {
  background: linear-gradient(175deg, #6d6a68 8%, #2a2624 45%, #0d0b0a 100%);
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
  color: #17130f;
  -webkit-text-stroke: .6px rgba(238, 228, 206, .55);
  filter: drop-shadow(0 3px 2px rgba(0, 0, 0, .8)) drop-shadow(0 0 10px rgba(176, 42, 42, .7));
}
.piece .plate {
  position: absolute; left: 50%; bottom: -6%; translate: -50% 0; z-index: -1;
  width: 74%; height: 22%; border-radius: 50%;
}
.piece.w .plate { background: radial-gradient(ellipse, rgba(47, 95, 179, .75), transparent 72%); }
.piece.b .plate { background: radial-gradient(ellipse, rgba(176, 42, 42, .8), transparent 72%); }
.sq.target:hover .piece { transform: translateY(-3px) scale(1.04); }
.piece.rampage { animation: rampage 1.6s var(--ease) infinite; }
@keyframes rampage {
  0%, 100% { filter: drop-shadow(0 3px 2px rgba(0, 0, 0, .75)) drop-shadow(0 0 12px rgba(255, 168, 46, .8)); }
  50% { filter: drop-shadow(0 3px 2px rgba(0, 0, 0, .75)) drop-shadow(0 0 22px rgba(255, 90, 30, .95)); }
}
.piece.lunging { z-index: 40; animation: lunge .42s var(--ease); }
@keyframes lunge { 50% { transform: translateY(-14%) scale(1.22); } }
.piece.striking { z-index: 45; animation: strike .5s var(--ease); }
@keyframes strike {
  0% { transform: none; } 30% { transform: translate(var(--dx, 0), var(--dy, 0)) scale(1.28) rotate(var(--rot, -14deg)); }
  100% { transform: none; }
}
.sq.victim .piece { animation: die .62s var(--ease) forwards; }
@keyframes die {
  0% { transform: none; opacity: 1; }
  100% { transform: translateY(38%) scale(.55) rotate(78deg); opacity: 0; }
}
.sq.looted { cursor: pointer; }

/* ── coords ── */
.sq .coord {
  position: absolute; font-family: var(--font-latin); font-size: calc(var(--sq) * .18);
  color: rgba(0, 0, 0, .45); pointer-events: none;
}
.sq.light .coord { color: rgba(60, 40, 20, .55); }
.sq .coord.file { bottom: 2px; inset-inline-end: 4px; }
.sq .coord.rank { top: 2px; inset-inline-start: 4px; }
.board.no-coords .coord { display: none; }

/* ── kill feed ── */
.killfeed {
  display: flex; flex-direction: column; align-items: center; gap: .3rem;
  min-height: 2.2rem; width: 100%; max-width: 640px;
}
.kill-item {
  display: flex; align-items: center; gap: .5rem; padding: .3rem .8rem;
  border: 1px solid var(--border); border-radius: var(--radius-sm);
  background: rgba(0, 0, 0, .62); font-family: var(--font-head); font-size: .86rem;
  animation: feedIn .3s var(--ease) both;
}
.kill-item svg { width: 15px; height: 15px; stroke-width: 2; }
.kill-item .k-pts { font-family: var(--font-latin); font-weight: 800; color: var(--gold-2); }
.kill-item.w { border-color: rgba(47, 95, 179, .5); color: var(--agatha-2); }
.kill-item.b { border-color: rgba(176, 42, 42, .5); color: var(--mason-2); }
@keyframes feedIn { from { opacity: 0; transform: translateX(-14px); } to { opacity: 1; transform: none; } }