/* Ringside: a broadcast frame, readable ivory sheets, and real wrestler cards. */
@font-face { font-family: 'Ringside Display'; src: url('/assets/fonts/anton-latin-400.woff2') format('woff2'); font-display: swap; }
@font-face { font-family: 'Ringside Sans'; src: url('/assets/fonts/work-sans-latin-var.woff2') format('woff2'); font-weight: 100 900; font-display: swap; }
:root {
  --body: 'Ringside Sans', sans-serif; --utility: var(--body); --display: 'Ringside Display', sans-serif;
  --ink: #202323; --ink-soft: #555953; --paper: #eeeee7; --paper-high: #fafaf5; --paper-low: #dddfd6;
  --oxblood: #ae2724; --oxblood-dark: #7b1c1c; --brass: #ae2724; --brass-light: #eeeee7;
  --night: #181b1b; --night-soft: #272c2b; --danger: #aa2424; --focus: #007a78;
  --line: #c5c8be; --radius: 3px; --shadow: none;
  color: var(--ink); background: var(--night); font-family: var(--body);
  scrollbar-color: #717970 var(--night); accent-color: var(--oxblood);
}
body { background: var(--night); }
h1, h2, h3 { font-weight: 400; letter-spacing: 0; }
h1 { text-transform: uppercase; font-size: clamp(2.75rem, 5.8vw, 5.5rem); line-height: 1.02; }
h2 { font-size: 1.8rem; }
button, input, select, textarea { font-family: var(--body); }
input, textarea { caret-color: var(--oxblood); }
a { text-underline-offset: .22em; }
:focus-visible { outline: 3px solid var(--focus); outline-offset: 4px; }
.masthead { max-width: 88rem; min-height: 6rem; margin-inline: auto; padding: 1.25rem 2.5rem; gap: 2rem; border: 0; }
.brand { color: var(--paper-high); font-size: 2rem; line-height: 1; text-transform: uppercase; letter-spacing: .015em; }
.desk-nav { gap: 1.15rem; flex-wrap: wrap; font-size: .8rem; text-transform: uppercase; letter-spacing: .035em; }
.desk-nav a { color: #c6cec4; text-decoration: none; flex-shrink: 0; white-space: nowrap; }
.desk-nav a:hover, .desk-nav a[aria-current=page] { color: #fff; text-decoration: underline; text-decoration-color: #ef6860; }
.screen { width: min(100% - 3rem, 83rem); padding: clamp(1.25rem, 3.5vw, 3rem); border-radius: 0; background: var(--paper); }
.screen-heading { margin-bottom: 1.75rem; }
.screen-heading > p { font-size: .95rem; }
.screen-heading--scene { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, .8fr); align-items: center; gap: 2rem; }
.screen-scene { display: block; width: 100%; aspect-ratio: 16 / 9; object-fit: cover; border-radius: 2px; }
.back-link { text-transform: none; letter-spacing: 0; }
.button { border-radius: 3px; box-shadow: none; font-size: .85rem; letter-spacing: .02em; }
.button--primary { background: var(--oxblood); color: #fff; box-shadow: none; }
.button--secondary { background: var(--ink); color: #fff; }
.button--secondary:hover { background: #3b4442; }
.paper-card, .dialog { border-radius: 3px; box-shadow: none; }
.text-input, select, .deck-select { border-radius: 2px; }
.ledger-strip { margin-bottom: 2rem; padding: 1.15rem 0; background: transparent; border-block: 2px solid var(--ink); }
.stat__label { font-size: .68rem; letter-spacing: .08em; }
.stat__value { font-size: 1.55rem; font-weight: 400; }
.desk-layout { grid-template-columns: minmax(0, 1.8fr) minmax(17rem, 1fr); gap: 2.5rem; }
.desk-spotlight { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); background: var(--night); color: #fff; }
.desk-featured-wrestler { min-width: 0; display: flex; flex-direction: column; }
.desk-featured-wrestler > .portrait { width: 100%; height: auto; flex: 0 0 auto; aspect-ratio: 1; border-radius: 0; box-shadow: none; }
.desk-featured-wrestler > a { padding: 1rem; color: #fff; background: #272c2b; font-family: var(--display); font-size: 1.5rem; font-weight: 400; text-decoration: none; }
.decision-docket { min-height: 23rem; padding: 1.5rem; background: var(--night); color: #fff; box-shadow: none; border-radius: 0; justify-content: center; animation: none; }
.decision-docket::before { display: none; }
.decision-docket h2 { font-size: clamp(2rem, 3.4vw, 3.1rem); text-transform: uppercase; }
.decision-docket p { color: #c8cec4; font-size: .95rem; }
.decision-docket .button { margin-top: 1rem; }
.decision-docket .decision-actions { flex-direction: column; align-items: stretch; }
.roster-rail { padding: 0; }
.rail-heading { align-items: start; flex-wrap: wrap; }
.rail-heading h2 { text-transform: uppercase; }
.rail-actions { gap: .65rem; }
.roster-list li { grid-template-columns: 4.5rem minmax(0, 1fr); column-gap: .85rem; }
.roster-list li > .portrait { width: 4.5rem; grid-row: 1 / 5; border-radius: 2px; }
.roster-link { align-self: end; font-size: 1rem; }
.roster-deck-link { font-size: .8rem; }
.desk-brief .report-row { font-size: .82rem; }
.office-links { flex-wrap: wrap; }
.portrait { border-radius: 3px; box-shadow: none; background-color: #41483f; background-image: none; }
.prospect-card .portrait { width: 8rem; }
.choice-card, .prospect-card, .career-card, .relationship-row { border-radius: 3px; box-shadow: none; }
.choice-card:has(input:checked), .prospect-card:has(input:checked) { outline-color: var(--oxblood); background: var(--paper-high); }
.career-card .portrait { width: 6.5rem; }
.dossier-hero .portrait { width: 11rem; }
.collection-grid { gap: 1rem; }
.collection-card { border-radius: 3px; box-shadow: none; border: 1px solid var(--line); padding: 1rem; }
.collection-card--finish { background: #f0e6cc; }
.collection-card__top { margin-bottom: .75rem; }
.collection-card h3 { font-size: 1.65rem; margin-top: .75rem; }
.move-art { display: block; width: 100%; height: 9rem; object-fit: cover; border-radius: 1px; }
.move-art--type { display: flex; align-items: end; justify-content: start; padding: .85rem; overflow: hidden; background: #294c43; color: #f1f2dc; }
.move-art--type > span { font-family: var(--display); font-size: clamp(1.6rem, 3vw, 2.8rem); line-height: 1; text-transform: uppercase; }
.move-art--strike, .move-art--grapple { background: #842b26; }
.move-art--defense { background: #294b61; }
.move-art--finish { background: #695220; }
.collection-card--unlearned .move-art { opacity: .72; }
.screen--match-arena { background: #202625; color: #eff0e7; grid-template-columns: minmax(0, 1fr) minmax(19rem, .52fr); }
.screen--match-arena .match-title { color: #eff0e7; font-family: var(--display); font-weight: 400; letter-spacing: 0; text-transform: uppercase; font-size: clamp(1.5rem, 3vw, 2.5rem); }
/* The results screen (design/mockups/match/mockup-5.png, coordinator follow-up) is part of the same
   dark Arena room, not the cream desk -- same background/tokens, same "paper insert" treatment for
   the session-guidance banner and the lesson-note as the live match and tale of the tape already use. */
.screen.screen--report { background: #202625; color: #eff0e7; }
.screen--match-arena .session-guidance, .screen--report .session-guidance { background: #eeeee7; color: var(--ink); }
.screen--match-arena .match-briefing, .screen--match-arena .match-intent, .screen--match-arena .match-turn { border-radius: 3px; }
.screen--match-arena .back-link, .screen--report .back-link { color: #e1e9d8; }
.screen--match-arena .lesson-note, .screen--match-arena .match-guide { color: var(--ink); }
.screen--report .screen-heading { border-bottom-color: rgba(255, 255, 255, .18); }
.screen--report .screen-heading > p { color: #c6cec4; }
.screen--report .section-tabs [role='tab'] { color: #eff0e7; }
.screen--report .section-tabs [role='tab']:hover { background: rgba(255, 255, 255, .1); }
.crt-television { border-radius: 3px; background: #101514; padding: .6rem; box-shadow: none; }
.crt-glass { border-radius: 0; border-width: 2px; }
.crt-caption { border-radius: 0; background: #101514; }
.crt-caption strong { color: #eff0e7; font-weight: 400; }
.crt-maker { color: #c4cec0; }
.screen--match-arena .match-ring { background: #2d3533; border: 0; border-radius: 0; }
.screen--match-arena .match-card { background: #f4f3e9; color: var(--ink); border-radius: 3px; box-shadow: none; padding: .75rem; min-height: 18rem; }
.screen--match-arena .match-card .move-art { height: 6rem; margin-block: .5rem; }
.screen--match-arena .match-card .move-art--type > span { font-size: 1.65rem; color: #fff; }
.screen--match-arena .match-card__name { font-family: var(--display); font-size: 1.2rem; font-weight: 400; }
.screen--match-arena .match-card__range { color: #51584d; }
.screen--match-arena .match-card:disabled { opacity: .65; }
.screen--match-arena .hand-options, .screen--match-arena .match-command-zone { color: #eff0e7; }
.screen--match-arena .match-command-zone { grid-row: 5; }
.screen--match-arena:has(.match-command-zone) .crt-television { grid-row: 6; }
.screen--match-arena .match-broadcast { grid-row: 6; }
.screen--match-arena .match-guide { background: #eff0e7; }

/* The Arena: dark charcoal stage, blue corner for the player, red corner for the opponent
   (design/mockups/match/mockup-1.png). Structural rules (grid/sizes) live in styles.css; this is
   the colour pass, scoped to the active/terminal phase only. */
.match-arena--live { background: #15181a; }
.match-arena--live .match-title {
  color: #8a938d; font-size: .7rem; margin-bottom: .2rem; letter-spacing: .07em;
  overflow: hidden; white-space: nowrap; text-overflow: ellipsis;
}
.arena-topbar { background: #0f1213; color: #eff0e7; }
.arena-heat__pip { color: #4a534d; }
.arena-heat__pip--lit { color: #f3a23a; }
.arena-topbar__turn { color: #eff0e7; background: rgba(255, 245, 218, .12); border: 1px solid rgba(237, 202, 115, .35); }
.arena-ring { background: radial-gradient(circle at 50% 28%, #262e2c, #101312 74%); border: 1px solid rgba(237, 202, 115, .22); }
.arena-corner--player { --corner: #3f7fc9; --corner-dark: #1d3f66; }
.arena-corner--opponent { --corner: var(--oxblood); --corner-dark: var(--oxblood-dark); }
.arena-stats { padding: .2rem .3rem; background: rgba(0, 0, 0, .2); border-radius: 6px; }
/* The foil-style frame: a corner-coloured gradient border around the big portrait (pulp art for the
   authored cast, or a pool opponent's existing comic card art -- both fill it the same way). */
.arena-portrait-card { position: relative; background: linear-gradient(155deg, var(--corner), var(--corner-dark)); box-shadow: 0 0 0 1px rgba(255, 255, 255, .18) inset, 0 10px 24px rgba(0, 0, 0, .5); }
.arena-portrait-card .portrait { background-color: #2a2f2d; }
.arena-card__given { color: #c6cec4; }
.arena-card__surname { color: var(--corner); }
.arena-corner--player .arena-card__surname { color: #6fa3e0; }
.arena-card__nickname { color: #e5cfa7; }
.arena-card__type { color: #c6cec4; }
.arena-vital__label { color: #c6cec4; }
.arena-vital__value { color: #fafaf5; }
.arena-vital meter { accent-color: var(--corner); }
.arena-corner--player .arena-vital meter { accent-color: #6fa3e0; }
.arena-status__item { background: rgba(237, 202, 115, .16); color: #f3d68c; }
.arena-last-move { background: linear-gradient(165deg, #241616, #161010); border: 1px solid rgba(174, 39, 36, .55); color: #f2ddbc; }
.arena-last-move__name { color: #fff; }
.arena-last-move__damage { color: #f3a23a; }
.arena-last-move .ring-position { color: #c6cec4; }
.arena-secondary { background: #0f1213; border-radius: 6px; padding: .5rem; }
.arena-secondary::-webkit-scrollbar { width: 8px; }
.match-arena--live .special-call { border-radius: 6px; }
.match-arena--live .match-terminal { background: rgba(59, 11, 15, .96); border-radius: 6px; }
/* Tale of the tape (design/mockups/match/mockup-2.png): the same dark stage and corner colours as
   the live Arena, applied to the pre-bell screen. */
.tale-tape__promotion { color: #e5cfa7; }
.tale-corner--player { --corner: #3f7fc9; --corner-dark: #1d3f66; }
.tale-corner--opponent { --corner: var(--oxblood); --corner-dark: var(--oxblood-dark); }
.tale-compare__value--player { color: #6fa3e0; }
.tale-compare__value--opponent { color: var(--oxblood); }
.tale-compare__label span { color: #c6cec4; }
.tale-facts { color: #eff0e7; }
.tale-facts__sub { color: #c6cec4; }
.screen--tale-of-the-tape .match-briefing { background: rgba(0, 0, 0, .22); color: #eff0e7; }
.tale-tape__note { color: #c6cec4; }
/* Pin attempt (design/mockups/match/mockup-4.png): the dark ringside moment, corner-coloured
   vitals matching the Arena's `.arena-corner--{side}` treatment. */
.kickout-dialog { background: #15181a; color: #eff0e7; border: 1px solid rgba(237, 202, 115, .35); }
.kickout-dialog .match-kicker { color: #e5cfa7; }
.kickout-dialog__title { color: #f3d68c; }
.kickout-vital--player { --corner: #3f7fc9; }
.kickout-vital--opponent { --corner: var(--oxblood); }
.kickout-vital__name { color: var(--corner); }
.kickout-vital .arena-vital__label { color: #c6cec4; }
.kickout-vital .arena-vital__value { color: #fafaf5; }
.kickout-vital .arena-vital meter { accent-color: var(--corner); }
.pin-choice.button--primary { background: #1d3f66; }
.pin-choice.button--secondary { background: var(--oxblood-dark); }
.world-card-art { max-width: 23rem; image-rendering: auto; }
.world-roster { gap: 1rem 2rem; }
.world-roster > li { padding-block: .8rem; border-bottom: 1px solid var(--line); }
.world-roster a { font-size: 1.08rem; }
.world-thumb { width: 5.25rem; height: 7rem; }
.world-territories > li { padding-bottom: 1.5rem; border-bottom: 1px solid var(--line); }
.world-territories h2 { font-size: 2rem; }
.report-grade { background: var(--oxblood); color: #fff; border-radius: 3px; }
/* Results-screen hero (design/mockups/match/mockup-5.png): the hero IS the top of the (now dark)
   report screen, not a boxed card floating on it -- no background of its own any more, it reads
   straight off `.screen--report`'s dark stage, same as everything else at the top of the Arena.
   Gold display type for the outcome -- VICTORY! reads brightest, DEFEAT reads deliberately duller,
   DRAW sits neutral between them. */
.report-hero { color: #eff0e7; }
.report-hero__finish { color: #101312; background: rgba(237, 202, 115, .82); }
.report-hero__wrestler-name { color: #eff0e7; }
.report-hero__nickname { color: #e5cfa7; }
.report-hero__figure-label { color: #c6cec4; }
.report-hero__figure-value { color: #fafaf5; }
.report-hero--victory .report-hero__outcome { color: #f3d68c; }
.report-hero--defeat .report-hero__outcome { color: #e0655a; }
.report-hero--draw .report-hero__outcome { color: #c6cec4; }
.report-hero__figure-value--cash { color: #8fd19e; }
.report-hero__figure-value--experience { color: #6fa3e0; }
.report-hero__figure-value--reputation { color: #f3d68c; }
.event-choice, .consequence-card, .relationship-condition { border-radius: 3px; }
.event-context, .event-locked-summary, .event-choice, .relationship-condition, .relationship-history { border-left-width: 1px; }
.event-stamp, .event-kicker, .match-kicker, .docket-stamp { letter-spacing: .035em; }
.help-surface, .help-panel { border-radius: 3px; }
@media (max-width: 1100px) {
  .masthead { flex-wrap: wrap; gap: 1rem; padding-inline: 1.5rem; }
  .desk-layout { grid-template-columns: minmax(0, 1.4fr) minmax(15rem, 1fr); gap: 1.5rem; }
  .desk-spotlight { grid-template-columns: 1fr; }
  .desk-featured-wrestler { display: grid; grid-template-columns: 9rem 1fr; align-items: center; }
  .decision-docket { min-height: 16rem; }
  .screen--match-arena { grid-template-columns: minmax(0, 1fr); }
  .screen--match-arena:has(.match-command-zone) .crt-television { grid-column: 1; grid-row: 7; }
  .screen--match-arena .match-broadcast { grid-column: 1; }
}
@media (max-width: 760px) {
  .masthead { padding: 1rem; gap: .75rem; }
  .brand { font-size: 1.6rem; }
  .desk-nav { gap: .3rem 1rem; font-size: .72rem; }
  .screen { width: calc(100% - 1rem); padding: 1.25rem; }
  .screen-heading--scene { grid-template-columns: 1fr; gap: 1rem; }
  .screen-scene { max-height: 11rem; }
  .desk-layout { grid-template-columns: 1fr; }
  .desk-spotlight { grid-template-columns: 1fr 1fr; }
  .desk-featured-wrestler { display: flex; }
  .decision-docket { min-height: 18rem; padding: 1rem; }
  .decision-docket h2 { font-size: 2rem; }
  .desk-featured-wrestler > a { font-size: 1.2rem; }
  .ledger-strip { gap: 1rem; }
  .stat__value { font-size: 1.25rem; }
  .screen--match-arena .match-card { min-height: 18rem; }
}
@media (max-width: 640px) {
  body:has(.screen--match-arena) .masthead { min-height: 0; padding-block: .5rem; }
  body:has(.screen--match-arena) .desk-nav { flex-wrap: nowrap; overflow-x: auto; width: 100%; gap: 1rem; }
  .screen--match-arena .session-guidance--compact { grid-row: 8; }
  .screen--match-arena .match-title { font-size: 1.5rem; }
  /* Both names in full: the title wraps to a second line on a phone rather than ending in an ellipsis. */
  .match-arena--live .match-title { font-size: 1.1rem; line-height: 1.1; white-space: normal; overflow: visible; text-overflow: clip; overflow-wrap: anywhere; }
}
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { scroll-behavior: auto !important; animation: none !important; transition: none !important; } }