/*
 * Wanxiang Shanhai battle-v2 presentation layer.
 *
 * This file is intentionally opt-in. It is loaded by the v2 visual validator
 * only, so the main battle runtime and its existing CSS stay unchanged until
 * the main thread explicitly adopts the selectors below.
 */

@media (max-width: 430px) {
  #battle-screen {
    overflow-x: clip;
  }

  #battle-screen > .battle-header {
    align-items: center;
    margin-bottom: 5px;
  }

  #battle-screen > .battle-header h2 {
    margin-top: 2px;
    font-size: clamp(25px, 7vw, 31px);
    letter-spacing: .14em;
  }

  #battle-screen > #battle-banner {
    display: none;
  }

  #battle-screen > .terrain-panel {
    grid-template-columns: 27px minmax(0, 1fr) auto;
    min-height: 34px;
    margin: 0 0 5px;
    padding: 4px 7px;
    border: 0;
    border-block: 1px solid rgba(229, 199, 125, .2);
    border-radius: 0;
    background: linear-gradient(90deg, rgba(35, 67, 62, .52), rgba(10, 24, 26, .38));
    box-shadow: none;
  }

  #battle-screen > .terrain-panel .terrain-sigil {
    width: 25px;
    height: 25px;
    font-size: 13px;
  }

  #battle-screen > .terrain-panel p {
    display: none;
  }

  #battle-screen > .terrain-panel b {
    overflow: hidden;
    font-size: 11px;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  #battle-screen > .terrain-panel .terrain-favor {
    font-size: 8px;
  }

  /* One framed HUD: the three source cards remain data-bound but lose their
     independent card treatment and share one horizontal information rail. */
  #wanxiang-tactical-ui {
    position: relative;
    z-index: 6;
    grid-template-columns: minmax(0, 1.65fr) minmax(0, 1fr) minmax(0, .95fr) !important;
    align-items: stretch;
    gap: 0;
    width: 100%;
    min-width: 0;
    margin: 0 0 7px;
    padding: 3px 4px;
    border: 1px solid rgba(229, 199, 125, .27);
    border-radius: 8px;
    background: linear-gradient(90deg, rgba(12, 29, 31, .9), rgba(19, 38, 37, .82), rgba(12, 26, 28, .9));
    box-shadow: inset 0 1px rgba(255, 239, 188, .04), 0 7px 18px rgba(0, 0, 0, .13);
  }

  #wanxiang-tactical-ui .tactical-card {
    min-width: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
  }

  #wanxiang-tactical-ui .tactical-initiative,
  #wanxiang-tactical-ui .tactical-resonance,
  #wanxiang-tactical-ui .tactical-intent {
    grid-column: auto !important;
    min-width: 0;
    padding: 2px 5px;
  }

  #wanxiang-tactical-ui .tactical-initiative,
  #wanxiang-tactical-ui .tactical-resonance {
    border-right: 1px solid rgba(229, 199, 125, .14);
  }

  #wanxiang-tactical-ui .tactical-heading {
    min-height: 13px;
    gap: 3px;
    font-size: 8px;
    letter-spacing: .04em;
  }

  #wanxiang-tactical-ui .tactical-heading-status,
  #wanxiang-tactical-ui .tactical-resonance-note {
    font-size: 7px;
  }

  #wanxiang-tactical-ui .tactical-initiative-list {
    gap: 2px;
    margin-top: 2px;
    min-width: 0;
    scrollbar-width: none;
  }

  #wanxiang-tactical-ui .tactical-initiative-list::-webkit-scrollbar {
    display: none;
  }

  #wanxiang-tactical-ui .tactical-order-item {
    flex: 0 0 41px;
    padding: 2px 2px 3px;
    border-color: color-mix(in srgb, var(--tactical-phase, #8da79d) 34%, transparent);
    border-radius: 3px;
    background: rgba(5, 16, 18, .52);
    box-shadow: none;
    transform: none;
  }

  #wanxiang-tactical-ui .tactical-order-item.is-current {
    box-shadow: inset 0 -2px var(--tactical-phase, var(--tactical-gold));
    transform: none;
  }

  #wanxiang-tactical-ui .tactical-order-top {
    gap: 2px;
  }

  #wanxiang-tactical-ui .tactical-side {
    font-size: 7px;
  }

  #wanxiang-tactical-ui .tactical-phase {
    width: 13px;
    height: 13px;
    font-size: 7px;
  }

  #wanxiang-tactical-ui .tactical-order-name {
    margin-top: 2px;
    font-size: 8px;
    line-height: 1.05;
  }

  #wanxiang-tactical-ui .tactical-order-speed {
    margin-top: 1px;
    font-size: 6px;
    text-align: center;
  }

  #wanxiang-tactical-ui .tactical-order-state {
    display: none;
  }

  #wanxiang-tactical-ui .tactical-resonance-body {
    grid-template-columns: auto 9px auto;
    gap: 2px;
    min-width: 0;
    margin-top: 3px;
  }

  #wanxiang-tactical-ui .tactical-resonance-phase {
    min-width: 0;
    overflow: hidden;
    padding: 3px 3px;
    font-size: 8px;
    text-overflow: ellipsis;
  }

  #wanxiang-tactical-ui .tactical-resonance-result {
    grid-column: 1 / -1;
    margin-top: 1px;
    font-size: 7px;
    text-align: left;
  }

  #wanxiang-tactical-ui .tactical-intent {
    display: flex;
    align-items: stretch;
  }

  #wanxiang-tactical-ui .tactical-intent-toggle {
    min-height: 44px;
    min-width: 0;
    gap: 3px;
    padding: 3px 2px;
    grid-template-columns: auto minmax(0, 1fr) auto;
  }

  #wanxiang-tactical-ui .tactical-intent-kicker {
    font-size: 7px;
    letter-spacing: 0;
  }

  #wanxiang-tactical-ui .tactical-intent-name {
    min-width: 0;
    font-size: 9px;
  }

  #wanxiang-tactical-ui .tactical-intent-chevron {
    font-size: 12px;
  }

  #wanxiang-tactical-ui .tactical-intent-details {
    position: absolute;
    z-index: 12;
    left: 4px;
    right: 4px;
    top: calc(100% + 4px);
    padding: 6px 8px 8px;
    border: 1px solid rgba(225, 171, 126, .25);
    border-radius: 6px;
    background: rgba(12, 29, 31, .98);
    box-shadow: 0 12px 26px rgba(0, 0, 0, .34);
  }

  /* Turn the arena into a full-bleed stage instead of a nested webpage card. */
  #battle-screen > .arena {
    margin-left: calc(-1 * max(18px, env(safe-area-inset-left)));
    margin-right: calc(-1 * max(18px, env(safe-area-inset-right)));
    padding: 14px max(18px, env(safe-area-inset-right)) 8px max(18px, env(safe-area-inset-left));
    border-width: 1px 0;
    border-radius: 0;
    background:
      radial-gradient(ellipse at 18% 72%, rgba(96, 179, 157, .17), transparent 37%),
      radial-gradient(ellipse at 82% 24%, rgba(219, 115, 77, .14), transparent 35%),
      linear-gradient(180deg, rgba(12, 34, 37, .98), rgba(5, 16, 19, .96));
    box-shadow: inset 0 0 70px rgba(2, 8, 10, .72), 0 12px 28px rgba(0, 0, 0, .16);
  }

  #battle-screen > .arena .team-label {
    margin-inline: 3px;
  }

  /* The controls read as the bottom console of the battle screen, not a
     detached web form. It remains in normal flow, so it never covers the
     arena or the log on a short screen. */
  #battle-screen > .action-panel {
    position: relative;
    z-index: 5;
    margin-top: 8px;
    margin-right: calc(-1 * max(18px, env(safe-area-inset-right)));
    margin-bottom: 0;
    margin-left: calc(-1 * max(18px, env(safe-area-inset-left)));
    padding: 10px max(18px, env(safe-area-inset-right)) calc(10px + env(safe-area-inset-bottom)) max(18px, env(safe-area-inset-left));
    border-width: 1px 0;
    border-radius: 0;
    background: linear-gradient(180deg, rgba(18, 36, 37, .97), rgba(8, 19, 22, .98));
    box-shadow: 0 -12px 26px rgba(0, 0, 0, .22), inset 0 1px rgba(255, 239, 188, .04);
  }

  #battle-screen > .action-panel .active-info {
    min-height: 32px;
  }

  #battle-screen > .action-panel .skill-buttons,
  #battle-screen > .action-panel .utility-buttons {
    position: relative;
    z-index: 1;
  }

  #battle-screen > .action-panel .skill-buttons .action-btn,
  #battle-screen > .action-panel .utility-buttons .action-btn {
    border-radius: 4px;
  }

  #battle-screen > .battle-log-wrap {
    margin-top: 0;
    margin-right: calc(-1 * max(18px, env(safe-area-inset-right)));
    margin-bottom: 0;
    margin-left: calc(-1 * max(18px, env(safe-area-inset-left)));
    padding: 0 max(18px, env(safe-area-inset-right)) calc(18px + env(safe-area-inset-bottom)) max(18px, env(safe-area-inset-left));
    border-top: 1px solid rgba(229, 199, 125, .12);
  }

  #battle-screen > .battle-log-wrap .log-title {
    min-height: 44px;
  }

  #battle-screen > .battle-log-wrap .battle-log {
    margin-top: 0;
    border-left: 0;
    background: rgba(7, 17, 19, .45);
  }
}

@media (prefers-reduced-motion: reduce) {
  #battle-screen > .arena,
  #battle-screen > .action-panel,
  #wanxiang-tactical-ui {
    scroll-behavior: auto;
  }
}