/*
 * Librarium Militaris — one report's page.
 *
 * The detail bar, the versus banner, the stream, the result plate and the
 * cross-reference. Scopes stay disjoint from the other sheets, so
 * the load order Propshaft picks never matters; where this page wants the
 * recessed plate it reuses .panel rather than restating it.
 */

/* ------------------------------------------------------------- detail bar -- */

.detailbar {
  position: sticky;
  top: 0;
  z-index: 40;
  background-color: var(--grim-900);
  border-bottom: 1px solid var(--grim-700);
  border-left: 3px solid var(--accent);
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.5);
}

/* The way out on one side, the calls to action on the other, and the wordmark
   centred over both. It wraps rather than crushes: on a narrow screen the
   actions drop to a line of their own and the bar simply stands taller. */
.detailbar__inner {
  position: relative;
  max-width: var(--shell);
  margin: 0 auto;
  padding: 0.625rem var(--gutter);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.625rem 1rem;
}

.detailbar__actions {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-left: auto;
}

/* On a phone the sign-up rides up here alone, and at a smaller size, which is
   what lets it share the one line with the back link rather than pushing the
   bar to a second row. Submitting a report is the footer's business at that
   width. Written the wrong way round for this sheet because it is the exception
   that needs stating, not the rule. */
.detailbar__actions .btn-submit { display: none; }

@media (max-width: 767px) {
  .detailbar__actions .btn-dispatch {
    font-size: 0.6875rem;
    padding: 0.375rem 0.625rem;
  }

  .detailbar__actions .btn-dispatch svg {
    width: 0.875rem;
    height: 0.875rem;
  }
}

@media (min-width: 768px) {
  .detailbar__actions .btn-submit { display: inline-block; }
}

.backlink {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex: none;
  color: var(--zinc-500);
  font-family: var(--font-mono);
  font-size: 0.75rem;
  line-height: 1rem;
  letter-spacing: 0.025em;
  text-transform: uppercase;
  white-space: nowrap;
  transition: color 0.15s ease;
}

.backlink:hover { color: #fff; }

.backlink__arrow { transition: transform 0.15s ease; }
.backlink:hover .backlink__arrow { transform: translateX(-0.25rem); }

.backlink__label {
  border-bottom: 1px solid transparent;
  transition: border-color 0.15s ease;
}

.backlink:hover .backlink__label { border-bottom-color: #fff; }

.backlink:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

.detailbar__wordmark {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 1rem;
  line-height: 1.75rem;
  color: #fff;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  white-space: nowrap;
}

/* Dead centre on the bar, which its two neighbours cannot give it: the back
   link is a third of the width of the calls to action. Taking it out of the
   flow is what lets it sit in the middle of the bar rather than in the middle
   of what is left over.

   It waits for a wide screen because a centred thing needs clearance on both
   sides, and below this the calls to action reach in far enough to meet it.
   The back link is the one that has to survive a narrow screen: it is the way
   out of the page, where the wordmark is decoration the footer repeats. */
.detailbar__wordmark { display: none; }

@media (min-width: 1024px) {
  .detailbar__wordmark {
    display: block;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    font-size: 1.125rem;
  }
}

/* ------------------------------------------------------------------ shell -- */

/* One column at every width: the record first, then the parameters and tags
   that describe it. Nothing here is a sidebar. */
.battle {
  max-width: var(--shell);
  margin: 0 auto;
  padding: 1.5rem var(--gutter);
  position: relative;
  z-index: 10;
  display: flex;
  flex-direction: column;
  gap: 2rem;
}

.battle__record,
.battle__aside {
  display: flex;
  flex-direction: column;
  gap: 2rem;
  min-width: 0;
}

@media (min-width: 1024px) {
  .battle {
    padding-top: 2rem;
    padding-bottom: 2rem;
  }
}

/* Shared plate heading: the report's own sections all lead with one. */
.panel-heading {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  color: #fff;
  font-family: var(--font-heading);
  font-size: 1.125rem;
  line-height: 1.75rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
}

.panel-heading__icon { display: flex; flex: none; }
.panel-heading__icon svg { width: 1.25rem; height: 1.25rem; }
.panel-heading__icon--danger { color: var(--danger); }
.panel-heading__icon--accent { color: var(--accent); }

/* ------------------------------------------------------------- vs banner -- */

.battle__intro {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

/* A minimum rather than a height: some factions are two words long and the
   banner has to grow around them instead of clipping them. */
.vsbanner {
  position: relative;
  display: flex;
  min-height: 8rem;
  overflow: hidden;
  border-radius: 0.125rem;
  background-image: linear-gradient(105deg, var(--faction-a) 50%, var(--faction-b) 50%);
}

@media (min-width: 768px) {
  .vsbanner { min-height: 12rem; }
}

.vsbanner__veil,
.vsbanner__shade {
  position: absolute;
  inset: 0;
  z-index: 0;
}

.vsbanner__veil {
  background-image: linear-gradient(to top, rgba(0, 0, 0, 0.9), rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.3));
}

.vsbanner__shade {
  background-color: rgba(0, 0, 0, 0.4);
  mix-blend-mode: multiply;
}

.vsbanner__side {
  position: relative;
  z-index: 10;
  width: 50%;
  min-width: 0;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  align-items: flex-start;
  padding: 1rem;
}

@media (min-width: 768px) {
  .vsbanner__side { padding: 2rem; }
}

.vsbanner__side--b {
  align-items: flex-end;
  text-align: right;
}

.vsbanner__faction {
  max-width: 100%;
  overflow-wrap: break-word;
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 1.875rem;
  line-height: 2.25rem;
  color: #fff;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.8);
}

.vsbanner__player {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  max-width: 100%;
  margin-top: 0.25rem;
  color: var(--zinc-300);
  font-family: var(--font-heading);
  font-size: 0.875rem;
  line-height: 1.25rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.8);
}

/* The dot always sits on the outside edge, so it reads as that side's colour. */
.vsbanner__side--b .vsbanner__player { flex-direction: row-reverse; }

/* Player names run long; the line stays one line and the title attribute keeps
   the rest reachable. */
.vsbanner__name {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Half a phone is not wide enough for "Emperor's Children" at full size; below
   that the name steps down rather than breaking mid-word. */
@media (max-width: 479px) {
  .vsbanner__faction { font-size: 1.5rem; line-height: 2rem; }
}

@media (min-width: 768px) {
  .vsbanner__faction { font-size: 3rem; line-height: 1; }
  .vsbanner__player { font-size: 1rem; line-height: 1.5rem; }
}

.vsbanner__dot {
  width: 0.5rem;
  height: 0.5rem;
  flex: none;
  border-radius: 9999px;
  background-color: var(--dot);
  box-shadow: 0 0 8px var(--dot);
}

.vsbanner__badge {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  z-index: 20;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 3rem;
  height: 3rem;
  border: 2px solid var(--grim-700);
  border-radius: 9999px;
  background-color: var(--grim-900);
  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5);
}

.vsbanner__badge span {
  font-family: var(--font-imperial);
  font-weight: 700;
  font-style: italic;
  font-size: 1.25rem;
  line-height: 1.75rem;
  color: var(--accent);
}

@media (min-width: 768px) {
  .vsbanner__badge { width: 4rem; height: 4rem; }
  .vsbanner__badge span { font-size: 1.5rem; line-height: 2rem; }
}

/* --------------------------------------------------------------- headline -- */

.battle__headline {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.battle__title {
  color: #fff;
  font-size: 1.25rem;
  font-weight: 500;
  line-height: 1.25;
}

@media (min-width: 768px) {
  .battle__title { font-size: 1.5rem; }
}

.battle__chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.metachip {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  padding: 0.25rem 0.625rem;
  background-color: var(--grim-900);
  border: 1px solid var(--grim-700);
  border-radius: 0.125rem;
  color: var(--zinc-400);
  font-size: 0.75rem;
  line-height: 1rem;
  transition: color 0.2s ease, border-color 0.2s ease;
}

.metachip svg {
  width: 0.875rem;
  height: 0.875rem;
  flex: none;
  opacity: 0.7;
}

a.metachip:hover {
  color: var(--accent);
  border-color: var(--accent);
}

.metachip:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

/* ------------------------------------------------------------ the stream -- */

.battle__stage {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.videostage {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  border-radius: 0.125rem;
  background-color: #000;
}

.videostage__player {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

.sourcebar {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: flex-start;
  gap: 1rem;
  padding: 1rem;
  background-color: var(--grim-800);
  border: 1px solid var(--grim-700);
  border-radius: 0.125rem;
}

@media (min-width: 640px) {
  .sourcebar {
    flex-direction: row;
    align-items: center;
  }
}

.sourcebar__channel {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  min-width: 0;
}

.sourcebar__avatar {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: none;
  width: 2.5rem;
  height: 2.5rem;
  border: 1px solid var(--zinc-700);
  border-radius: 9999px;
  background-color: var(--grim-700);
  color: var(--zinc-400);
}

.sourcebar__avatar svg { width: 1.25rem; height: 1.25rem; }

.sourcebar__name {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: #fff;
  font-size: 1rem;
  font-weight: 500;
  transition: color 0.15s ease;
}

.sourcebar__name:hover { color: var(--accent); }

.sourcebar__facts {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1rem;
  color: var(--zinc-400);
  font-size: 0.875rem;
  line-height: 1.25rem;
}

@media (min-width: 640px) {
  .sourcebar__facts { gap: 1.5rem; }
}

.sourcebar__external {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex: none;
  padding: 0.375rem 1rem;
  background-color: var(--zinc-900);
  border: 1px solid var(--zinc-700);
  border-radius: 0.125rem;
  color: var(--zinc-300);
  font-family: var(--font-heading);
  font-size: 0.75rem;
  line-height: 1rem;
  letter-spacing: 0.025em;
  text-transform: uppercase;
  white-space: nowrap;
  transition: color 0.15s ease, border-color 0.15s ease;
}

.sourcebar__external:hover {
  color: #fff;
  border-color: var(--accent);
}

.sourcebar__external svg { width: 0.75rem; height: 0.75rem; flex: none; }

.sourcebar__name:focus-visible,
.sourcebar__external:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

/* ----------------------------------------------------------- the result -- */

.postaction {
  position: relative;
  background-color: var(--grim-800);
  border-radius: 0.125rem;
}

.postaction__head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
  padding: 1rem;
  border-bottom: 1px solid var(--grim-700);
}

.postaction__rehide {
  flex: none;
  padding: 0.25rem 0.5rem;
  border: 1px solid var(--zinc-700);
  border-radius: 0.125rem;
  color: var(--zinc-500);
  font-family: var(--font-heading);
  font-size: 0.75rem;
  line-height: 1rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  white-space: nowrap;
  transition: color 0.15s ease, border-color 0.15s ease;
}

.postaction__rehide:hover {
  color: #fff;
  border-color: var(--zinc-500);
}

.postaction__rehide:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

/* Nothing to re-hide while it is still hidden. */
.postaction--masked .postaction__rehide { display: none; }

.postaction__body {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem;
  min-height: 250px;
}

@media (min-width: 768px) {
  .postaction__body { padding: 1.5rem; }
}

.redacted {
  position: absolute;
  inset: 0;
  z-index: 10;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 2px solid var(--danger);
  background-color: rgba(10, 10, 12, 0.85);
  background-image: repeating-linear-gradient(45deg, transparent, transparent 10px, rgba(153, 27, 27, 0.05) 10px, rgba(153, 27, 27, 0.05) 20px);
  cursor: pointer;
  transition: opacity 0.3s ease, background-color 0.3s ease;
}

.redacted:hover { background-color: rgba(10, 10, 12, 0.75); }

.redacted:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: -4px;
}

/* Declassified: the plate fades out and stops taking clicks with it. */
.postaction:not(.postaction--masked) .redacted {
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s ease, visibility 0s linear 0.3s;
}

.redacted__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.redacted__icon {
  display: flex;
  margin-bottom: 0.75rem;
  color: var(--danger);
}

.redacted__icon svg { width: 3rem; height: 3rem; }

.redacted__stamp {
  padding: 0.5rem 1rem;
  border: 2px solid var(--danger);
  background-color: rgba(0, 0, 0, 0.8);
  color: var(--danger);
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 1.5rem;
  line-height: 2rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  transform: rotate(-2deg);
  filter: drop-shadow(0 10px 8px rgba(0, 0, 0, 0.4)) drop-shadow(0 4px 3px rgba(0, 0, 0, 0.5));
}

.redacted__prompt {
  margin-top: 1rem;
  color: var(--zinc-400);
  font-family: var(--font-sans);
  font-size: 0.875rem;
  line-height: 1.25rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

@media (min-width: 768px) {
  .redacted__stamp { font-size: 1.875rem; line-height: 2.25rem; }
}

.postaction__content {
  width: 100%;
  text-align: center;
  filter: blur(0) grayscale(0%);
  transition: filter 0.4s ease;
}

.postaction--masked .postaction__content {
  filter: blur(8px) grayscale(100%);
  pointer-events: none;
  user-select: none;
}

.postaction__kicker {
  margin-bottom: 0.25rem;
  color: var(--zinc-400);
  font-family: var(--font-heading);
  font-size: 0.875rem;
  line-height: 1.25rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.postaction__winner {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 1.875rem;
  line-height: 2.25rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.8);
}

.postaction__victor {
  margin-top: 0.25rem;
  color: #fff;
  font-size: 1.125rem;
  line-height: 1.75rem;
}

.scoreline {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  margin-top: 1rem;
  padding: 0.75rem 1.5rem;
  background-color: var(--grim-900);
  border: 1px solid var(--grim-700);
  border-radius: 0.125rem;
  box-shadow: inset 0 2px 4px 0 rgba(0, 0, 0, 0.5);
}

.scoreline__value {
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: 1.5rem;
  line-height: 2rem;
}

.scoreline__value--loser { font-weight: 400; }

.scoreline__vs {
  color: var(--zinc-600);
  font-family: var(--font-heading);
  font-style: italic;
}

/* ------------------------------------------------- operational parameters -- */

.params {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  padding: 1.25rem;
  background-color: var(--grim-800);
  border-radius: 0.125rem;
}

.params__head {
  padding-bottom: 0.75rem;
  border-bottom: 1px solid var(--grim-700);
}

.params__list {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  font-size: 0.875rem;
  line-height: 1.25rem;
}

.params__row {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  padding-bottom: 0.5rem;
  border-bottom: 1px solid rgba(39, 39, 42, 0.3);
}

@media (min-width: 640px) {
  .params__row {
    flex-direction: row;
    align-items: baseline;
    gap: 1rem;
  }
}

.params__row--last {
  padding-bottom: 0;
  border-bottom: 0;
}

.params__term {
  flex: none;
  width: 8rem;
  color: var(--zinc-500);
  font-family: var(--font-heading);
  letter-spacing: 0.025em;
  text-transform: uppercase;
}

.params__value { min-width: 0; }

.params__value--stack {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem;
}

.params__link {
  color: var(--zinc-200);
  text-decoration: underline;
  text-decoration-color: var(--grim-700);
  text-underline-offset: 4px;
  transition: color 0.15s ease;
}

.params__link:hover { color: var(--accent); }

.params__chip {
  display: inline-flex;
  padding: 0.125rem 0.5rem;
  background-color: var(--grim-900);
  border: 1px solid var(--grim-700);
  border-radius: 0.125rem;
  color: var(--zinc-400);
  font-size: 0.75rem;
  line-height: 1rem;
  transition: color 0.2s ease, border-color 0.2s ease;
}

.params__chip:hover {
  color: var(--accent);
  border-color: var(--accent);
}

.params__plain { color: var(--zinc-300); }

.params__chip:focus-visible,
.params__link:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

/* ------------------------------------------------------------- index tags -- */

.indextags {
  padding: 1.25rem;
  background-color: var(--grim-800);
  border-radius: 0.125rem;
}

.indextags__title {
  margin-bottom: 0.75rem;
  padding-bottom: 0.5rem;
  border-bottom: 1px solid var(--grim-700);
  color: var(--zinc-400);
  font-family: var(--font-heading);
  font-size: 0.875rem;
  line-height: 1.25rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.indextags__list {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.indextag {
  padding: 0.25rem 0.625rem;
  background-color: var(--zinc-900);
  border: 1px solid var(--zinc-700);
  border-radius: 0.125rem;
  color: var(--zinc-400);
  font-size: 0.75rem;
  line-height: 1rem;
  transition: all 0.2s ease;
}

.indextag:hover {
  color: #fff;
  border-color: var(--zinc-500);
}

.indextag:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

/* -------------------------------------------------------- cross-reference -- */

.crossref {
  max-width: var(--shell);
  margin: 1rem auto 0;
  padding: 2rem var(--gutter);
  position: relative;
  z-index: 10;
  border-top: 1px solid var(--grim-700-50);
}

.crossref__title {
  margin-bottom: 1.5rem;
  color: #fff;
  font-family: var(--font-heading);
  font-size: 1.25rem;
  line-height: 1.75rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.crossref__tabs {
  display: flex;
  gap: 1rem;
  margin-bottom: 1.5rem;
  border-bottom: 1px solid var(--grim-700);
  overflow-x: auto;
  scrollbar-width: none;
  -ms-overflow-style: none;
}

.crossref__tabs::-webkit-scrollbar { display: none; }

.crossref__tab {
  flex: none;
  padding: 0 0.25rem 0.5rem;
  border-bottom: 2px solid transparent;
  color: var(--zinc-500);
  font-family: var(--font-heading);
  font-size: 0.875rem;
  line-height: 1.25rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  white-space: nowrap;
  transition: color 0.15s ease, border-color 0.15s ease;
}

.crossref__tab:hover { color: var(--zinc-300); }

.crossref__tab.is-on {
  color: #fff;
  border-bottom-color: var(--accent);
}

.crossref__tab:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}