/* Battle study controls stay compact so the artwork, especially the center bridge, owns the screen. */
.topbar { background: rgba(10, 16, 29, .88); box-shadow: 0 8px 28px #050b1660; }
.topbar h1 { font-size: clamp(18px, 1.65vw, 24px); }
.actions { flex-wrap: wrap; justify-content: flex-end; }
.actions button { font-size: 12px; padding: 8px 10px; }
.battle-panel {
  position: fixed; z-index: 2; bottom: 45px; left: 50%; transform: translateX(-50%);
  padding: 13px 18px; border: 1px solid #8e9dc13b; border-radius: 14px;
  background: #0b1222e6; box-shadow: 0 10px 30px #03081355; min-width: 310px;
}
.battle-panel p { margin: 0 0 10px; display: flex; gap: 25px; justify-content: space-between; }
.battle-panel b { color: #d9c492; font-size: 13px; }
.battle-panel small { font-size: 11px; color: #98abc5; }
.battle-panel .actions { justify-content: center; }
.battle-panel #battlephase { color: #ceb2ff; }
body[data-view="overview"] .battle-panel { display: none; }
body[data-view="battle"] .mapkey, body[data-view="unit"] .mapkey { font-size: 11px; opacity: .9; }
@media (max-width: 1100px) {
  .topbar { grid-template-columns: auto 1fr; gap: 8px 14px; }
  .topbar > .actions { grid-column: 1 / -1; justify-content: center; }
  .topbar > .actions button { flex: 1; }
  .mapkey { max-width: 190px; }
  .battle-panel { left: auto; right: 16px; transform: none; }
  .hint { display: none; }
}
@media (max-width: 600px) {
  .topbar > .actions button { flex: 1 0 27%; }
  .battle-panel { min-width: 0; left: 12px; right: 12px; bottom: 39px; padding: 10px 14px; }
  .mapkey { display: none; }
  .stats { font-size: 10px; }
}