/* Separate War room navigation and playback controls keep the header compact. */
.top-actions .icon-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: auto;
  min-width: 48px;
  min-height: 48px;
  padding-inline: 12px;
}
.header-action-label { font: 700 max(var(--desktop-text-min, 0px), calc(16px * var(--desktop-text-scale, 1))) "Barlow Condensed", sans-serif; white-space: nowrap; }
.topbar { grid-template-columns: minmax(220px, 1fr) auto auto; }
.top-actions { padding-inline: 16px; }
#pauseButton .menu-icon, #pauseButton[data-battle="false"] .pause-icon { display: none; }
#pauseButton[data-battle="false"] .menu-icon { display: block; }
.war-room-controls {
  flex: none;
  width: 48px;
  height: 48px;
  min-width: 48px;
  min-height: 48px;
  margin: 0;
  padding: 12px;
  color: var(--gold-300);
}
.war-room-controls svg { width: 24px; height: 24px; }
#levelCamp .camp-heading > .war-room-controls { order: 4; }
#profilesDrawer:not(.preparation-war-room) > .drawer-head { grid-template-columns: minmax(0, 1fr) auto 48px 48px; gap: 8px 16px; }
#profilesDrawer:not(.preparation-war-room) .drawer-head > div:first-child { min-width: 0; grid-column: 1; }
#profilesDrawer:not(.preparation-war-room) .drawer-head > #warRoomCrowns { grid-column: 2; grid-row: 1; }
#profilesDrawer:not(.preparation-war-room) .drawer-head > .war-room-controls { grid-column: 3; grid-row: 1; color: #443318; background: transparent; border-color: #927c53; }
#profilesDrawer:not(.preparation-war-room) #closeProfilesButton { grid-column: 4; grid-row: 1; width: 48px; height: 48px; }
@media (max-width: 960px) {
  #profilesDrawer:not(.preparation-war-room) > .drawer-head { grid-template-columns: minmax(0, 1fr) 48px 48px; column-gap: 8px; }
  #profilesDrawer:not(.preparation-war-room) .drawer-head > #warRoomCrowns { grid-column: 1 / -1; grid-row: 2; justify-self: start; margin: 0; }
  #profilesDrawer:not(.preparation-war-room) .drawer-head > .war-room-controls { grid-column: 2; }
  #profilesDrawer:not(.preparation-war-room) #closeProfilesButton { grid-column: 3; }
}

dialog.pause-screen {
  position: fixed;
  inset: 0;
  width: min(520px, calc(100% - 32px));
  max-width: none;
  max-height: calc(100dvh - 32px);
  overflow: auto;
  margin: auto;
  padding: 0;
  border: 1px solid var(--iron-700);
  border-radius: 12px;
  background: var(--blue-950);
  color: var(--ink);
  box-shadow: var(--panel-shadow);
  overscroll-behavior: contain;
}
dialog.pause-screen:not([open]), dialog.pause-screen[hidden] { display: none; }
dialog.pause-screen::backdrop { background: rgb(5 12 20 / 78%); }
dialog.pause-screen .pause-card {
  width: 100%;
  max-height: none;
  padding: 24px;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  text-align: left;
}
dialog.pause-screen h2 { margin: 0; font-size: max(var(--desktop-text-min, 0px), clamp(2rem, 6vw, 2.8rem)); }
dialog.pause-screen p { line-height: 1.5; }
#pauseContext { margin: 8px 0 20px; }
#resumeButton { width: 100%; min-height: 48px; }
.battle-speed-control, .desktop-text-control { margin: 24px 0; padding: 0; border: 0; min-width: 0; }
.battle-speed-control legend, .desktop-text-control legend { margin-bottom: 12px; font-weight: 700; }
.battle-speed-options, .desktop-text-options { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.battle-speed-options button, .desktop-text-options button {
  min-height: 48px;
  border: 1px solid #617384;
  border-radius: 6px;
  background: var(--blue-900);
  color: var(--ink);
  font: 700 max(var(--desktop-text-min, 0px), calc(18px * var(--desktop-text-scale, 1))) "Barlow Condensed", sans-serif;
}
.battle-speed-options button[aria-pressed="true"], .desktop-text-options button[aria-pressed="true"] { color: var(--blue-950); background: var(--gold-300); border-color: var(--gold-300); }
.battle-speed-options button:hover, .desktop-text-options button:hover { border-color: var(--gold-300); }
.battle-speed-options button:focus-visible, .desktop-text-options button:focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; }
.desktop-text-control { display: none; }
#desktopTextHint { margin: 12px 0 0; color: var(--muted); font-size: max(var(--desktop-text-min, 0px), .875rem); }

/* Match the existing desktop layout boundary. Rem type and fixed-size labels
   share this scale; narrower layouts retain their existing typography. */
:root { --desktop-text-scale: 1; font-size: max(var(--desktop-text-min, 0px), calc(100% * var(--desktop-text-scale))); }
@media (min-width: 1025px) {
  :root { --desktop-text-min: calc(12px * var(--desktop-text-scale)); }
  :root[data-desktop-text-size="115"] { --desktop-text-scale: 1.15; }
  :root[data-desktop-text-size="130"] { --desktop-text-scale: 1.3; }
  .desktop-text-control { display: block; }
  :root:is([data-desktop-text-size="115"], [data-desktop-text-size="130"]) .app-shell { grid-template-rows: auto minmax(0, 1fr); }
  :root:is([data-desktop-text-size="115"], [data-desktop-text-size="130"]) .hero-combat-strip dt { white-space: normal; overflow: visible; overflow-wrap: anywhere; }
  :root:is([data-desktop-text-size="115"], [data-desktop-text-size="130"]) #profilesDrawer.desktop-loadout.preparation-war-room .inventory-tabs { flex-wrap: wrap; }
  :root:is([data-desktop-text-size="115"], [data-desktop-text-size="130"]) #profilesDrawer.desktop-loadout.preparation-war-room .inventory-tabs button { flex: 1 1 7rem; white-space: normal; }
}
@media (min-width: 1025px) and (max-width: 1200px) {
  :root:is([data-desktop-text-size="115"], [data-desktop-text-size="130"]) .topbar .header-action-label,
  :root:is([data-desktop-text-size="115"], [data-desktop-text-size="130"]) .topbar .brand-lockup p { display: none; }
  :root:is([data-desktop-text-size="115"], [data-desktop-text-size="130"]) .topbar .top-actions .icon-button { width: 48px; padding: 0; }
}
dialog.pause-screen .pause-actions { justify-content: flex-start; gap: 8px 20px; }
dialog.pause-screen .text-action { min-height: 48px; }

@media (max-width: 1024px) {
  :root { --mobile-header-height: 64px; }
  .app-shell { grid-template-rows: auto minmax(0, 1fr); }
}
@media (min-width: 761px) and (max-width: 1024px) {
  .topbar { grid-template-columns: minmax(160px, 1fr) auto auto; align-items: center; min-height: 64px; }
  .topbar .brand-lockup { justify-content: flex-start; gap: 10px; padding: 8px 16px; }
  .topbar .brand-lockup > div { display: block; }
  .topbar .brand-lockup p { display: none; }
  .topbar .brand-lockup h1 { font-size: max(var(--desktop-text-min, 0px), calc(24px * var(--desktop-text-scale, 1))); white-space: nowrap; }
  .topbar .status-unit strong { font-size: max(var(--desktop-text-min, 0px), calc(16px * var(--desktop-text-scale, 1))); }
  .topbar .header-action-label { display: none; }
  .topbar .top-actions .icon-button { width: 48px; padding: 0; }
  .topbar .status-unit { min-width: 90px; padding-inline: 12px; }
  .topbar .integrity-unit { min-width: 150px; padding-inline: 12px; }
}
@media (max-width: 760px) {
  :root { --mobile-header-height: 64px; }
  .topbar {
    grid-template-columns: 48px minmax(0, 1fr) 48px;
    align-items: center;
    column-gap: 8px;
    min-height: 64px;
    padding: calc(6px + env(safe-area-inset-top)) calc(12px + env(safe-area-inset-right)) 6px calc(12px + env(safe-area-inset-left));
  }
  .topbar .brand-lockup, .topbar .integrity-unit { display: none; }
  .topbar .top-actions { display: contents; }
  .topbar #profilesButton { grid-column: 1; grid-row: 1; }
  .topbar #pauseButton { grid-column: 3; grid-row: 1; }
  .topbar .top-actions .icon-button {
    width: 48px;
    height: 48px;
    padding: 0;
    border: 0;
    border-radius: 6px;
    background: transparent;
  }
  .topbar .top-actions .icon-button svg { width: 24px; height: 24px; }
  .topbar .header-action-label { display: none; }
  .topbar .battle-status {
    grid-column: 2;
    grid-row: 1;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    gap: 2px;
    box-shadow: none;
  }
  .topbar .status-unit { flex: none; min-height: 0; padding: 0; box-shadow: none; }
  .topbar .status-unit strong { font-size: max(var(--desktop-text-min, 0px), calc(15px * var(--desktop-text-scale, 1))); line-height: 1.25; }
  .topbar .status-unit:first-child strong::before { content: "Level "; font: inherit; color: inherit; margin: 0; }
  .topbar .currency-unit { grid-template-columns: 16px auto; column-gap: 6px; }
  .topbar .currency-unit svg { width: 16px; }
  .topbar .currency-unit strong { color: var(--gold-300); }
}