/* Shared responsive presentation for Action Assistant, OPDAT Compare, Warfront and Battle Replays. */
.vs-action-assistant,
.vs-opdat-compare,
.vs-warfront,
.vs-battle-replays { max-width: none; width: min(100%, 1480px); margin-inline: auto; }

.vs-action-assistant__intro,
.vs-opdat-compare__intro,
.vs-warfront__intro,
.vs-battle-replays__intro { padding: clamp(1.15rem, 2.6vw, 2.2rem); margin-bottom: 1rem; }
.vs-action-assistant__intro h1,
.vs-opdat-compare__intro h1,
.vs-warfront__intro h1,
.vs-battle-replays__intro h1 { margin: .15rem 0 .45rem; }
.vs-action-assistant__intro p:last-child,
.vs-opdat-compare__intro p:last-child,
.vs-warfront__intro p:last-child,
.vs-battle-replays__intro p:last-child { max-width: 70rem; margin-bottom: 0; }

.vs-action-assistant__chooser { display: grid; grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr)); gap: .65rem; margin: 1rem 0; }
.vs-action-assistant__chooser button { text-align: left; min-height: 5.5rem; border: 1px solid color-mix(in srgb, var(--vs-context-accent, #5cc9d4) 45%, #73777a); border-radius: .45rem; background: linear-gradient(135deg, rgba(18, 25, 28, .96), rgba(38, 41, 42, .96)); color: inherit; padding: .8rem .85rem; cursor: pointer; transition: border-color .16s ease, transform .16s ease, background .16s ease; }
.vs-action-assistant__chooser button:hover,
.vs-action-assistant__chooser button:focus-visible,
.vs-action-assistant__chooser button.is-active { border-color: var(--vs-context-strong, #62c3cd); background: linear-gradient(135deg, color-mix(in srgb, var(--vs-context-muted, #173f46) 88%, #141719), rgba(28, 35, 37, .98)); transform: translateY(-2px); }
.vs-action-assistant__chooser strong,
.vs-action-assistant__chooser span { display: block; }
.vs-action-assistant__chooser strong { color: var(--vs-context-strong, #62c3cd); font-family: var(--vs-heading-font, inherit); font-size: 1rem; }
.vs-action-assistant__chooser span { margin-top: .34rem; color: #d2d5d5; font-size: .83rem; line-height: 1.32; }
.vs-action-assistant__guide { padding: clamp(1rem, 2vw, 1.5rem); border: 1px solid color-mix(in srgb, var(--vs-context-accent, #5cc9d4) 54%, #5b5f61); border-radius: .5rem; background: linear-gradient(145deg, rgba(20, 29, 32, .98), rgba(39, 41, 41, .98)); }
.vs-action-assistant__guide > header { max-width: 64rem; margin-bottom: 1rem; }
.vs-action-assistant__guide h2 { margin: .15rem 0 .45rem; color: var(--vs-context-strong, #62c3cd); }
.vs-action-assistant__sources { list-style: none; display: grid; grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr)); gap: .85rem; margin: 0; padding: 0; counter-reset: source; }
.vs-action-assistant__sources li { position: relative; counter-increment: source; }
.vs-action-assistant__sources li::before { content: counter(source); position: absolute; z-index: 1; right: .75rem; top: .7rem; width: 1.75rem; aspect-ratio: 1; display: grid; place-items: center; border: 1px solid var(--vs-context-accent, #5cc9d4); border-radius: 50%; color: var(--vs-context-strong, #62c3cd); background: #151819; font-size: .78rem; }
.vs-action-assistant__sources article { height: 100%; padding: 1rem; }
.vs-action-assistant__sources h3 { margin: .1rem 2.4rem .45rem 0; }
.vs-action-assistant__sources h3 a { color: var(--vs-context-strong, #62c3cd); }
.vs-action-assistant__sources p { margin: .5rem 0; }
.vs-action-assistant__full-rule { font-weight: 700; color: var(--vs-context-strong, #62c3cd); }
.vs-action-assistant__empty { padding: 1.25rem; }

.vs-opdat-compare__picker { padding: 1rem; border: 1px solid color-mix(in srgb, var(--vs-context-accent, #5cc9d4) 42%, #5a5e5f); background: rgba(31, 34, 35, .96); border-radius: .5rem; }
.vs-opdat-compare__picker-tools { display: grid; grid-template-columns: minmax(14rem, 2fr) minmax(11rem, 1fr) auto auto; gap: .7rem; align-items: end; margin-bottom: 1rem; }
.vs-opdat-compare__picker-tools label,
.vs-battle-replay-create__form label,
.vs-battle-replay-editor__form label { display: grid; gap: .3rem; min-width: 0; }
.vs-opdat-compare__picker-tools label > span,
.vs-battle-replay-create__form label,
.vs-battle-replay-editor__form label { color: var(--vs-context-strong, #62c3cd); font-weight: 700; }
.vs-opdat-compare__picker-tools p { margin: 0; min-width: max-content; padding-bottom: .45rem; color: var(--vs-context-strong, #62c3cd); }
.vs-opdat-compare__choices { display: grid; grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr)); gap: .6rem; margin: 0; padding: 0; list-style: none; max-height: 29rem; overflow: auto; padding-right: .25rem; }
.vs-opdat-compare__choices li { min-width: 0; border: 1px solid color-mix(in srgb, var(--vs-context-accent, #5cc9d4) 35%, #5e6263); border-radius: .35rem; background: rgba(18, 21, 22, .85); transition: border-color .16s ease, background .16s ease; }
.vs-opdat-compare__choices li.is-selected { border-color: var(--vs-context-strong, #62c3cd); background: color-mix(in srgb, var(--vs-context-muted, #173f46) 72%, #161a1b); }
.vs-opdat-compare__choices label { display: grid; grid-template-columns: auto 1fr; gap: .65rem; align-items: center; padding: .55rem; cursor: pointer; }
.vs-opdat-compare__choices input { width: 1.1rem; height: 1.1rem; }
.vs-opdat-compare__choice-card { display: flex; align-items: center; gap: .65rem; min-width: 0; }
.vs-opdat-compare__choice-image { width: 2.8rem; height: 3.65rem; flex: 0 0 auto; overflow: hidden; border-radius: .16rem; background: #0c0e0f; }
.vs-opdat-compare__choice-image img { width: 100%; height: 100%; object-fit: cover; }
.vs-opdat-compare__choice-card strong,
.vs-opdat-compare__choice-card small { display: block; }
.vs-opdat-compare__choice-card strong { color: #f3f3f0; }
.vs-opdat-compare__choice-card small { margin-top: .2rem; color: #c2c6c5; font-size: .78rem; line-height: 1.3; }
.vs-opdat-compare__results { margin-top: 1.2rem; }
.vs-opdat-compare__results > header { margin: 0 0 .65rem; }
.vs-opdat-compare__results h2 { margin: 0; color: var(--vs-context-strong, #62c3cd); }
.vs-opdat-compare__matrix-wrap { overflow-x: auto; overscroll-behavior-inline: contain; border: 1px solid color-mix(in srgb, var(--vs-context-accent, #5cc9d4) 42%, #676b6c); background: #121516; }
.vs-opdat-compare__matrix { width: 100%; min-width: 50rem; border-collapse: collapse; text-align: left; }
.vs-opdat-compare__matrix th,
.vs-opdat-compare__matrix td { min-width: 11rem; padding: .75rem; vertical-align: top; border: 1px solid rgba(193, 202, 200, .25); }
.vs-opdat-compare__matrix thead th { background: color-mix(in srgb, var(--vs-context-muted, #173f46) 65%, #15191a); color: var(--vs-context-strong, #62c3cd); }
.vs-opdat-compare__matrix tbody > tr:nth-child(even) { background: rgba(255, 255, 255, .025); }
.vs-opdat-compare__matrix tbody > th { color: #d9dddb; }
.vs-opdat-compare__matrix thead a { color: inherit; display: block; }
.vs-opdat-compare__matrix thead small { display: block; margin-top: .2rem; color: #e1e5e4; font-weight: 400; }
.vs-opdat-compare__profile-image { width: 3.2rem; height: 4rem; overflow: hidden; margin-bottom: .4rem; background: #101112; }
.vs-opdat-compare__profile-image img { width: 100%; height: 100%; object-fit: cover; }
.vs-opdat-compare__detail-row td { font-size: .86rem; line-height: 1.38; }
.vs-opdat-compare__weapons,
.vs-opdat-compare__rule-list { margin: 0; padding: 0; list-style: none; }
.vs-opdat-compare__weapons li + li,
.vs-opdat-compare__rule-list li + li { margin-top: .5rem; padding-top: .5rem; border-top: 1px solid rgba(193, 202, 200, .18); }
.vs-opdat-compare__weapons strong,
.vs-opdat-compare__weapons span { display: block; }
.vs-opdat-compare__weapons span { color: #d5d8d7; font-size: .79rem; }
.vs-opdat-compare__rule-list a { color: var(--vs-context-strong, #62c3cd); }
.vs-opdat-compare__none { color: #c2c6c5; font-style: italic; }
.vs-opdat-compare__empty { margin-top: 1.2rem; padding: 1.25rem; }

.vs-warfront__filters { display: flex; flex-wrap: wrap; align-items: end; gap: .7rem; margin: 1rem 0; padding: .8rem 1rem; border-left: 3px solid var(--vs-neutral-accent, #5cc9d4); background: rgba(31, 34, 35, .86); }
.vs-warfront__filters label { display: grid; gap: .3rem; min-width: min(100%, 15rem); color: var(--vs-context-strong, #62c3cd); font-weight: 700; }
.vs-warfront__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 20rem), 1fr)); gap: 1rem; }
.vs-warfront__grid > article { display: flex; flex-direction: column; min-width: 0; overflow: hidden; }
.vs-warfront__grid > article > header,
.vs-warfront__grid > article > .vs-warfront__sides,
.vs-warfront__grid > article > .vs-warfront__excerpt,
.vs-warfront__grid > article > footer { padding-inline: 1rem; }
.vs-warfront__image { display: block; aspect-ratio: 16 / 7; overflow: hidden; background: #111; }
.vs-warfront__image img { width: 100%; height: 100%; object-fit: cover; transition: transform .28s ease; }
.vs-warfront__image:hover img { transform: scale(1.04); }
.vs-warfront__grid h2 { margin: .15rem 0 .35rem; }
.vs-warfront__grid h2 a { color: var(--vs-context-strong, #62c3cd); }
.vs-warfront__state { display: inline-flex; width: fit-content; margin: .3rem 0 0; padding: .25rem .52rem; border: 1px solid currentColor; border-radius: 999px; color: var(--vs-context-strong, #62c3cd); font-size: .78rem; font-weight: 700; text-transform: uppercase; letter-spacing: .07em; }
.vs-warfront__state--contested { color: #e8a55f; }
.vs-warfront__state--resolved { color: #b9c2c0; }
.vs-warfront__sides { display: flex; flex-wrap: wrap; gap: .4rem .65rem; margin: .9rem 0 .4rem; color: #e9ecea; font-weight: 700; }
.vs-warfront__sides span + span { color: #c7ccca; font-weight: 400; }
.vs-warfront__excerpt { flex: 1; }
.vs-warfront__excerpt p { margin: .6rem 0 1rem; }
.vs-warfront__grid footer { display: flex; flex-wrap: wrap; gap: .8rem; padding-block: .85rem 1rem; border-top: 1px solid rgba(195, 204, 202, .2); }
.vs-warfront__grid footer a { color: var(--vs-context-strong, #62c3cd); font-weight: 700; }
.vs-warfront__dossier { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: .75rem 1rem; align-items: center; margin-top: 1rem; padding: 1rem; }
.vs-warfront__dossier .vs-eyebrow { margin: 0; }
.vs-warfront__dossier > div { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: .65rem; }
.vs-warfront__dossier > div p { margin: 0; }
.vs-warfront__dossier .vs-player__actions { grid-column: 1 / -1; margin: 0; }

.vs-battle-replays__layout { display: grid; grid-template-columns: minmax(13rem, .42fr) minmax(0, 1fr); gap: 1rem; align-items: start; margin-top: 1rem; }
.vs-battle-replays__archive { position: sticky; top: 1rem; padding: 1rem; }
.vs-battle-replays__archive h2 { margin: .15rem 0 .75rem; }
.vs-battle-replays__archive ul { margin: 0; padding: 0; list-style: none; }
.vs-battle-replays__archive li + li { margin-top: .5rem; }
.vs-battle-replays__archive a { display: grid; gap: .2rem; padding: .65rem; color: inherit; border: 1px solid rgba(193, 202, 200, .3); border-radius: .28rem; text-decoration: none; }
.vs-battle-replays__archive a:hover,
.vs-battle-replays__archive a.is-current { border-color: var(--vs-context-strong, #62c3cd); background: color-mix(in srgb, var(--vs-context-muted, #173f46) 60%, #171a1b); }
.vs-battle-replays__archive small { color: var(--vs-context-strong, #62c3cd); }
.vs-battle-replays__record { min-width: 0; display: grid; gap: 1rem; }
.vs-battle-replay-create { margin-top: 1rem; padding: 1rem; }
.vs-battle-replay-create h3 { margin: .1rem 0 .4rem; }
.vs-battle-replay-create__form { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)) auto; gap: .75rem; align-items: end; margin-top: .9rem; }
.vs-battle-replay-create__summary { grid-column: 1 / -1; }
.vs-battle-replay-create textarea,
.vs-battle-replay-editor textarea { resize: vertical; min-width: 0; }
.vs-battle-replay-card { padding: clamp(1rem, 2.5vw, 1.7rem); }
.vs-battle-replay-card > header { display: flex; justify-content: space-between; gap: 1rem; align-items: start; padding-bottom: .9rem; border-bottom: 1px solid color-mix(in srgb, var(--vs-context-accent, #5cc9d4) 45%, transparent); }
.vs-battle-replay-card h1 { margin: .1rem 0; color: var(--vs-context-strong, #62c3cd); }
.vs-battle-replay-card__outcome { margin: 0; color: #f2f3ef; font-weight: 700; }
.vs-battle-replay-card header dl { display: grid; grid-template-columns: repeat(2, minmax(4rem, 1fr)); gap: .45rem; margin: 0; }
.vs-battle-replay-card header dl div { padding: .45rem .6rem; border: 1px solid color-mix(in srgb, var(--vs-context-accent, #5cc9d4) 50%, #667); }
.vs-battle-replay-card dt { color: var(--vs-context-strong, #62c3cd); font-size: .74rem; text-transform: uppercase; letter-spacing: .07em; }
.vs-battle-replay-card dd { margin: .15rem 0 0; font-size: 1.1rem; font-weight: 700; }
.vs-battle-replay-card__factions { display: flex; flex-wrap: wrap; gap: .6rem; align-items: center; padding: .8rem 0; color: #f0f2f0; font-weight: 700; }
.vs-battle-replay-card__factions span:nth-child(2) { color: var(--vs-context-strong, #62c3cd); }
.vs-battle-replay-card blockquote { margin: .2rem 0 1rem; padding: .75rem 1rem; border-left: 3px solid var(--vs-context-accent, #5cc9d4); background: rgba(0, 0, 0, .16); }
.vs-battle-replay-card section { margin-top: 1rem; }
.vs-battle-replay-card section h2 { margin: 0 0 .45rem; font-size: 1.05rem; color: var(--vs-context-strong, #62c3cd); }
.vs-battle-replay-card__units { display: grid; grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr)); gap: .55rem; margin: .5rem 0 0; padding: 0; list-style: none; }
.vs-battle-replay-card__units li { display: flex; gap: .6rem; align-items: center; min-width: 0; padding: .5rem; border: 1px solid rgba(193, 202, 200, .28); background: rgba(0, 0, 0, .14); }
.vs-battle-replay-card__units img { width: 2.6rem; height: 3.4rem; object-fit: cover; background: #0d0f10; }
.vs-battle-replay-card__units strong,
.vs-battle-replay-card__units small { display: block; }
.vs-battle-replay-card__units small { color: #cfd3d1; margin-top: .1rem; }
.vs-battle-replay-card__dice { display: flex; flex-wrap: wrap; gap: .45rem; margin: 0; padding: 0; list-style: none; }
.vs-battle-replay-card__dice li { display: inline-flex; align-items: center; gap: .35rem; padding: .32rem .5rem; border: 1px solid var(--vs-context-accent, #5cc9d4); border-radius: .25rem; }
.vs-battle-replay-card__dice li span { display: grid; place-items: center; min-width: 1.25rem; aspect-ratio: 1; color: #101415; background: var(--vs-context-strong, #62c3cd); font-size: .75rem; font-weight: 700; }
.vs-battle-replay-card__log { display: grid; gap: .45rem; margin: 0; padding: 0; list-style: none; }
.vs-battle-replay-card__log li { display: grid; grid-template-columns: minmax(8rem, auto) minmax(0, 1fr); gap: .7rem; padding-top: .5rem; border-top: 1px solid rgba(193, 202, 200, .2); }
.vs-battle-replay-card__log time { color: var(--vs-context-strong, #62c3cd); font-size: .82rem; }
.vs-battle-replay-card footer { display: flex; flex-wrap: wrap; gap: .6rem; align-items: end; margin-top: 1rem; padding-top: 1rem; border-top: 1px solid rgba(193, 202, 200, .2); }
.vs-battle-replay-card__share { display: grid; flex: 1 1 20rem; gap: .25rem; color: var(--vs-context-strong, #62c3cd); font-weight: 700; }
.vs-battle-replay-card__share input,
.vs-battle-replay-editor__share-url input { width: 100%; min-width: 0; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; }
.vs-battle-replay-editor { padding: 1rem; }
.vs-battle-replay-editor h2 { margin: .15rem 0 .4rem; }
.vs-battle-replay-editor__form { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .75rem; align-items: end; margin-top: .9rem; }
.vs-battle-replay-editor__summary,
.vs-battle-replay-editor__share-toggle { grid-column: 1 / -1; }
.vs-battle-replay-editor__share-toggle { display: flex !important; grid-template-columns: none !important; align-items: flex-start; gap: .6rem; padding: .75rem; border-left: 3px solid var(--vs-context-accent, #5cc9d4); background: rgba(0, 0, 0, .15); color: #f0f2ef !important; cursor: pointer; }
.vs-battle-replay-editor__share-toggle input { flex: 0 0 auto; width: 1.15rem; height: 1.15rem; margin-top: .15rem; }
.vs-battle-replay-editor__share-toggle strong,
.vs-battle-replay-editor__share-toggle small { display: block; }
.vs-battle-replay-editor__share-toggle small { margin-top: .12rem; color: #d0d4d2; font-weight: 400; }
.vs-battle-replay-editor__share-url { display: grid; gap: .35rem; margin: 1rem 0; }
.vs-battle-replay-editor__delete { margin-top: .85rem; }

@media (max-width: 760px) {
  .vs-opdat-compare__picker-tools,
  .vs-battle-replay-create__form,
  .vs-battle-replay-editor__form { grid-template-columns: 1fr; }
  .vs-opdat-compare__picker-tools p { padding: 0; }
  .vs-battle-replay-create__summary,
  .vs-battle-replay-editor__summary,
  .vs-battle-replay-editor__share-toggle { grid-column: auto; }
  .vs-battle-replays__layout { grid-template-columns: 1fr; }
  .vs-battle-replays__archive { position: static; }
  .vs-battle-replay-card > header { display: grid; }
  .vs-battle-replay-card__log li { grid-template-columns: 1fr; gap: .15rem; }
  .vs-warfront__dossier { grid-template-columns: 1fr; }
  .vs-warfront__dossier > div { justify-content: flex-start; }
}

@media (max-width: 520px) {
  .vs-action-assistant__chooser { grid-template-columns: 1fr 1fr; }
  .vs-action-assistant__chooser button { min-height: 4.5rem; }
  .vs-opdat-compare__choices { grid-template-columns: 1fr; }
  .vs-battle-replay-card header dl { width: 100%; }
}