/* v0.8.3 — desktop battlefield workspace and sticky combat telemetry */
:root { --battle-sticky-top: 88px; }

.side-utility {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 13px;
}

@media (min-width: 981px) {
  /* Keep the information that changes combat decisions visible while the arena scrolls. */
  .combat-hud {
    position: sticky;
    top: var(--battle-sticky-top);
    z-index: 7;
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
    box-shadow: 0 12px 38px rgba(0,0,0,.34);
  }
}

/* Medium desktop/laptop widths retain the two-column page, but the now-tall
   action surface must scroll normally so Board/Log can never travel behind it. */
@media (min-width: 981px) and (max-width: 1239px) {
  .context-sticky { position: static; }
}

/* Wide desktop becomes a proper battle workspace:
   arena | action/lab | board + history. */
@media (min-width: 1240px) {
  main { width: min(1640px, calc(100% - 32px)); }

  .battle-layout {
    grid-template-columns: minmax(580px, 1.28fr) minmax(590px, 1fr);
    align-items: start;
  }

  .side-column {
    min-width: 0;
    display: grid;
    grid-template-columns: minmax(300px, 1fr) minmax(275px, .9fr);
    gap: 13px;
    align-items: start;
  }

  .context-sticky {
    position: sticky;
    top: var(--battle-sticky-top);
    z-index: 4;
    max-height: calc(100vh - var(--battle-sticky-top) - 16px);
    min-width: 0;
    overflow-y: auto;
    overflow-x: hidden;
    overscroll-behavior: contain;
    scrollbar-width: thin;
    scrollbar-gutter: stable;
  }

  .side-utility {
    position: sticky;
    top: var(--battle-sticky-top);
    max-height: calc(100vh - var(--battle-sticky-top) - 16px);
    overflow: hidden;
  }

  .side-utility .board-card {
    flex: 0 1 auto;
    max-height: min(54vh, 520px);
    min-height: 0;
    overflow-y: auto;
    overscroll-behavior: contain;
    scrollbar-width: thin;
  }

  .side-utility .log-card {
    flex: 1 1 220px;
    min-height: 180px;
    display: flex;
    flex-direction: column;
    overflow: hidden;
  }

  .side-utility .log-card > .section-heading { flex: 0 0 auto; }

  .side-utility .log-card ol {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    overscroll-behavior: contain;
    scrollbar-width: thin;
    padding-right: 4px;
  }
}

@media (max-width: 980px) {
  :root { --battle-sticky-top: 0px; }
  .side-utility { gap: 13px; }
}