/* ── responsive ── */
@media (max-width: 1220px) {
  .game-shell { grid-template-columns: 232px minmax(300px, 1fr) 262px; }
  .board { --sq: clamp(32px, min(7.6vh, 7.6vw), 62px); }
}
@media (max-width: 1024px) {
  .game-shell {
    grid-template-columns: 1fr; max-width: 760px; gap: .8rem;
  }
  .board-wrap { order: 1; }
  .panel-roster { order: 2; flex-direction: row; flex-wrap: wrap; }
  .panel-roster .roster { flex: 1 1 220px; }
  .panel-log { order: 3; }
  .chronicle { max-height: 220px; }
  .streaks { flex-direction: row; flex-wrap: wrap; }
  .board { --sq: clamp(36px, 10.5vw, 74px); }
}
@media (max-width: 760px) {
  .topnav { display: none; }
  .topbar { padding: .6rem 1rem; }
  .brand-sub { display: none; }
  .hero { padding: 3rem 1rem 2.2rem; }
  .hero-stats { gap: 1.4rem; margin-top: 1.8rem; }
  .section { padding: 2.4rem 1.1rem .6rem; }
  .game-shell { padding: .6rem; }
  .board { --sq: clamp(34px, 11.4vw, 60px); }
  .board-frame { padding: 8px; }
  .piece { font-size: calc(var(--sq) * .8); }
  .modal { padding: 1.3rem; }
  .promo-grid { grid-template-columns: repeat(2, 1fr); }
  .toast-wrap { inset-inline: 1rem; bottom: 1rem; }
  .controls { flex-direction: row; flex-wrap: wrap; }
  .controls .btn { flex: 1 1 40%; }
}
@media (max-width: 420px) {
  .board { --sq: calc((100vw - 34px) / 8); }
  .stat-num { font-size: 1.5rem; }
  .turn-banner { font-size: .85rem; padding: .3rem .8rem; }
  .fx-callout { font-size: 1.35rem; }
}
@media (hover: none) {
  .btn:hover:not(:disabled), .icon-btn:hover, .faction-card:hover, .feature-card:hover { transform: none; }
}