@font-face { font-family: 'Liberation Sans'; src: url("/fonts/LiberationSans-Regular.ttf"); font-weight: 400; font-display: block; }
@font-face { font-family: 'Liberation Sans'; src: url("/fonts/LiberationSans-Bold.ttf"); font-weight: 700; font-display: block; }
@font-face { font-family: 'Liberation Sans Narrow'; src: url("/fonts/LiberationSansNarrow-Regular.ttf"); font-weight: 400; font-display: block; }
@font-face { font-family: 'Liberation Sans Narrow'; src: url("/fonts/LiberationSansNarrow-Bold.ttf"); font-weight: 700; font-display: block; }
@font-face { font-family: 'Noto Sans'; src: url("/fonts/NotoSans-Regular.ttf"); font-weight: 400; font-display: block; }
@font-face { font-family: 'Noto Sans Arabic'; src: url("/fonts/NotoSansArabic-Regular.ttf"); font-weight: 400; font-display: block; }
@font-face { font-family: 'Noto Sans Hebrew'; src: url("/fonts/NotoSansHebrew-Regular.ttf"); font-weight: 400; font-display: block; }
@font-face { font-family: 'Noto Sans Devanagari'; src: url("/fonts/NotoSansDevanagari-Regular.ttf"); font-weight: 400; font-display: block; }
@font-face { font-family: 'Noto Sans Thai'; src: url("/fonts/NotoSansThai-Regular.ttf"); font-weight: 400; font-display: block; }

/* The loader's pages and the shell's screens on the UI bridge (M0 step 12, 2026-10-28): plain and
   minimal, readable at 200 % zoom, with a visible focus ring. The retail look of the menus comes
   with M6 (client.md §2). */

:root {
  --background: #0b0d10;
  --panel: #161a20;
  --text: #e6e8eb;
  --muted: #9aa3ad;
  --accent: #f2c14e;
  --link: #8fc1ff;
  color-scheme: dark;
}

html,
body {
  margin: 0;
  height: 100%;
  background: var(--background);
  color: var(--text);
  font: 16px/1.5 'Liberation Sans', 'Noto Sans', 'Noto Sans Arabic', 'Noto Sans Hebrew', 'Noto Sans Devanagari', 'Noto Sans Thai', sans-serif;
}

.page-root {
  position: relative;
  min-height: 100%;
}

.page {
  max-width: 40rem;
  margin: 0 auto;
  padding: 3rem 1rem;
}

.page h1 {
  font-size: 1.6rem;
  margin: 0 0 1rem;
}

.page h2 {
  font-size: 1.1rem;
  margin: 2rem 0 0.5rem;
}

.highlight {
  padding: 0.75rem 1rem;
  border-left: 4px solid var(--accent);
  background-color: var(--panel);
  font-weight: 600;
}

.missing li,
.supported li {
  margin: 0.25rem 0;
}

a {
  color: var(--link);
}

.detail {
  color: var(--muted);
  overflow-wrap: anywhere;
}

.view {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  background: #000;
}
/* Without the lock in play: a small line, not a screen (user 2026-11-01). */
.take-control {
  position: fixed;
  left: 50%;
  bottom: 12%;
  transform: translateX(-50%);
  margin: 0;
  padding: 4px 10px;
  background: rgb(0 0 0 / 55%);
  color: #fff;
  font-size: 14px;
  pointer-events: none;
}
.take-control[hidden] { display: none; }

/* The view takes the focus only so that the game's keys go to it (tabindex -1, no Tab stop): the
   browser's focus ring after a keyboard close or a return to the window would frame the whole game.
   Menu controls keep theirs. */
.view:focus { outline: none; }

.screen {
  position: fixed;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
}

/* The neutral arrow is temporary until the specified retail cursor art is converted. */
.menu-cursor {
  position: fixed;
  left: 0;
  top: 0;
  width: 32px;
  height: 32px;
  z-index: 10000;
  pointer-events: none;
}
.drawn-menu-cursor, .drawn-menu-cursor * { cursor: none; }
.drawn-menu-cursor .menu-hover:is(button, a, input, select, [role="option"]) {
  outline: 1px solid var(--accent);
  outline-offset: 2px;
}
.drawn-menu-cursor .menu-pressed:is(button, input, select) { filter: brightness(1.3); }

/* The client's diagnostics line over the game (M1 step 10; TT-86). */
.diagnostics {
  position: fixed;
  top: 0.25rem;
  right: 0.5rem;
  margin: 0;
  font: 0.75rem/1.2 'Liberation Sans', Arial, sans-serif;
  font-variant-numeric: tabular-nums;
  color: #fff;
  text-shadow: 0 0 2px #000;
  pointer-events: none;
}

.panel {
  pointer-events: auto;
  min-width: 18rem;
  max-width: 28rem;
  padding: 1.5rem;
  background-color: var(--panel);
  border-radius: 6px;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.panel h1 {
  margin: 0;
  font-size: 1.3rem;
}

.panel progress {
  width: 100%;
}

.panel h2 {
  margin: 0.5rem 0 0;
  font-size: 1rem;
}

.fields {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.panel input,
.panel select,
.panel button {
  font: inherit;
  padding: 0.5rem 0.75rem;
}

.panel button {
  border-radius: 4px;
  font-weight: 600;
  cursor: pointer;
}

.panel button.primary {
  background-color: var(--accent);
  color: #111;
  border: 0;
}

.panel button.secondary {
  background-color: transparent;
  color: var(--text);
  border: 1px solid var(--muted);
}

.panel button:disabled {
  opacity: 0.6;
  cursor: progress;
}

.panel :focus-visible {
  outline: 3px solid var(--link);
  outline-offset: 2px;
}

.rules {
  margin: 0;
  padding-left: 1.25rem;
  color: var(--muted);
}

.note {
  color: var(--muted);
  margin: 0;
  min-height: 1.5em;
  overflow-wrap: anywhere;
}
/* M2's functional terminal and results over the game view. */
.win-columns { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 1rem; }
.win-screen button.acting { box-shadow: 0 0 1rem #ffbf40; }
.win-screen { width: min(90vw, 60rem); max-height: 90vh; overflow: auto; color: white; }
.win-screen table { width: 100%; table-layout: fixed; text-align: right; }
.win-screen td { overflow-wrap: anywhere; }
.win-screen td:nth-child(2) { text-align: left; }
.win-screen .own-row { font-weight: bold; color: white; }
.nod-win h1, .nod-win [role="status"] { color: red; }
/* Session text remains scrollable independently of the live HUD's line expiry. */
.chat-history { max-height: 14rem; overflow-y: auto; white-space: pre-wrap; }
#ccrx-completions { max-height: 10rem; overflow-y: auto; }
.chat { align-self: end; }
/* Spec 19 menus: viewport-sized 400 × 300 dialog grid, height-scaled open fonts,
   amber controls and white tab labels. Only the active page participates in layout/focus. */
.retail-menu {
  position: fixed;
  inset: 0;
  box-sizing: border-box;
  width: 100vw;
  height: 100vh;
  pointer-events: auto;
  color: #ffd528;
  font: bold max(11px, 1.778vh)/1.25 'Liberation Sans', 'Noto Sans', sans-serif;
  text-shadow: -1px 1px 1px rgb(0 0 0 / 78%);
  --menu-line: #ffae28;
  --menu-fill: rgb(255 174 40 / 16%);
}
.retail-menu .menu-position { position: absolute; box-sizing: border-box; margin: 0; }
.retail-menu .menu-title {
  position: absolute; top: 2%; left: 12%; width: 76%; height: 16%;
  margin: 0; display: grid; place-content: center;
  color: #ffff24;
  font: normal max(24px, 11.555vh)/1 'Liberation Sans Narrow', sans-serif;
  text-shadow: 0 0 5px #b84200, -1px 1px #000;
}
.settings { background-color: transparent; }
html[data-ccrx-state="playing"] .settings { background-color: transparent; }
.retail-menu button, .retail-menu input, .retail-menu select {
  box-sizing: border-box; border: 1px solid var(--menu-line); border-radius: 0;
  color: inherit; background-color: var(--menu-fill); font: inherit;
  padding: .35em .5em; min-width: 0;
}
.retail-menu button { cursor: pointer; }
.retail-menu :disabled { color: rgb(255 213 40 / 55%); border-color: rgb(230 160 35 / 50%); opacity: 1; }
.retail-menu :focus-visible { outline: 2px solid #ffd528; outline-offset: 2px; }
.retail-menu .menu-entry {
  border: 0; padding: 0; background-color: transparent; text-align: left;
  font: normal max(20px, 7.111vh)/1 'Liberation Sans Narrow', sans-serif;
  text-shadow: none; isolation: isolate;
}
.retail-menu .menu-small { font-size: max(18px, 4.444vh); }
.retail-menu .menu-entry:focus { color: black; text-shadow: -1px -1px #ffd528; }
.retail-menu .menu-entry.acting { color: black; text-shadow: 1px 1px #000; }
@keyframes menu-activate { to { color: white; text-shadow: 0 0 30px #ff3000, 0 0 80px #900000; } }
.retail-menu .menu-button:is(:hover, .menu-hover) { animation: menu-pulse 1s linear infinite; }
@keyframes menu-pulse { 50% { filter: brightness(.6); } }
.options-index { position: absolute; inset: 0; pointer-events: none; }
.options-index button { pointer-events: auto; }
.settings-wait { position: absolute; top: 75%; left: 30%; }
.options-pages {
  position: absolute; inset: 19.6667% 2% 15%;
  display: grid; grid-template-columns: 30% minmax(0, 1fr); gap: 2%;
  min-width: 0; min-height: 0;
}
.options-tabs { position: relative; isolation: isolate; display: flex; flex-direction: column; justify-content: center; gap: 1.2vh; min-width: 0; }
.options-tab-bar { position: absolute; inset: 0 auto 0 0; width: 3.125vw; display: flex; flex-direction: column; pointer-events: none; z-index: -1; }
.options-tab-bar-top, .options-tab-bar-bottom { background-size: 100% 100%; background-repeat: no-repeat; }
.options-tab-bar-top { flex: 0 0 13vh; background-image: var(--menu-tab-bar-top); }
.options-tab-bar-middle { flex: 1; background-image: var(--menu-tab-bar-middle); background-size: 100% auto; background-repeat: repeat-y; }
.options-tab-bar-bottom { flex: 0 0 14.3333vh; background-image: var(--menu-tab-bar-bottom); }
.retail-menu .options-tabs button {
  display: flex; align-items: center; gap: .75vw;
  color: white; border: 0; background-color: transparent; text-align: left; padding: 1.1vh 1vw;
  font-size: max(12px, 2vh);
}
.retail-menu .options-tabs [aria-selected="true"] {
  font-size: max(16px, 2.6667vh); border-left: 3px solid #ffae28;
  text-shadow: 0 0 8px #a05000;
}
.settings-scroll {
  box-sizing: border-box; min-width: 0; min-height: 0; overflow: auto;
  scrollbar-color: #ffae28 #211b0c; scrollbar-width: auto;
  padding: 1vh 1vw 2vh; border: 1px solid var(--menu-line); background: rgb(0 0 0 / 35%);
  scroll-padding: 2vh;
}
.settings-scroll h2 { font-size: max(16px, 2.6667vh); margin: 0 0 2vh; }
.settings-fields { display: grid; gap: 1.5vh; }
.setting-row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); gap: 1vw; align-items: center; }
.setting-row label { overflow-wrap: anywhere; }
.setting-row span { display: flex; align-items: center; gap: .6em; min-width: 0; }
.setting-row :is(input:not([type="checkbox"]), select) { width: 100%; }
.retail-menu input[type="range"] { accent-color: #ffae28; padding: 0; }
.retail-menu input[type="checkbox"] { accent-color: #ffae28; width: 1.2em; height: 1.2em; }
.settings-fields output { min-width: 3.5em; font-variant-numeric: tabular-nums; }
.retail-menu select[size] { background-color: #211b0c; }
.retail-menu option { background-color: #211b0c; color: #ffd528; }
.controls-editor table { border-collapse: collapse; min-width: 60em; width: 100%; }
.controls-editor :is(td, th) { padding: .5em; text-align: left; border-bottom: 1px solid rgb(255 174 40 / 30%); }
.controls-editor td button { margin: .2em; }
.controls-editor [role="group"] { border: 1px solid #ffae28; padding: .5em; }
.controls-editor [role="group"] label { display: block; }
.reference-menu { color: white; }
.reference-menu h1, .help-menu h1 { font-size: max(16px, 2.6667vh); text-align: center; }
.reference-menu h2 { font-size: max(14px, 2.6667vh); text-align: center; }
.reference-menu p { font-weight: normal; }
.reference-key { text-align: center; overflow-wrap: anywhere; }
.reference-menu .menu-button { color: #ffd528; }
.retail-menu .menu-button, .panel .menu-button { border: 0; background-color: transparent; box-shadow: none; isolation: isolate; }
/* Grid buttons already establish their artwork's containing block through absolute placement. */
.retail-menu .menu-button:not(.menu-position), .panel .menu-button:not(.menu-position) { position: relative; }
.menu-button::before, .menu-button::after { content: ''; position: absolute; pointer-events: none; mix-blend-mode: plus-lighter; z-index: -1; }
.menu-button::before { inset: 0; border: 10px solid transparent; border-image: var(--menu-button-frame) 10 fill / 10px / 0 repeat; }
.menu-button::after { inset: 6px 5px 5px 6px; background: var(--menu-button-pressed) center / 100% 100%; opacity: 0; }
.menu-button:is(:active, .menu-pressed)::after { opacity: 1; }
.menu-button:disabled::before { filter: brightness(.37647); }
.options-tabs button::before { content: ''; flex: 0 0 2.3333vh; height: 2.3333vh; background-image: var(--menu-tab-bubble); background-position: center; background-size: contain; background-repeat: no-repeat; }
.options-tabs [aria-selected="true"] { background-image: var(--menu-tab-selector); background-position: left center; background-size: 100% 100%; background-repeat: no-repeat; }
.options-tabs [aria-selected="true"]::before { background-image: var(--menu-tab-lit); }
.building-art, .purchase-building { display: block; background-position: center; background-size: contain; background-repeat: no-repeat; }
.building-art { position: absolute; inset: 0 12% 20%; }
.information-building:has(.building-art[style]) .building-caption { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
.team-logo, .own-player-star { background-position: center; background-size: contain; background-repeat: no-repeat; }
.own-player-star { display: inline-block; width: 1.2em; height: 1.2em; vertical-align: middle; }
.team-logo[style*="background-image"] { color: transparent; text-shadow: none; }
.retail-menu progress { appearance: none; border: 0; background: transparent; color: lime; }
.retail-menu progress::-webkit-progress-bar { background: transparent; }
.retail-menu progress::-webkit-progress-value { background: lime; mask: var(--menu-health-piece) left center / 7px 12px repeat-x; }
.retail-menu progress[data-health="yellow"]::-webkit-progress-value { background: yellow; }
.retail-menu progress[data-health="red"]::-webkit-progress-value { background: red; }
/* The purchase overlay preserves the live game, as do the held information screens. */
.purchase { background-color: transparent; overflow: hidden; }
.purchase-grid, .purchase-status { position: absolute; inset: 0; pointer-events: none; }
.purchase-grid button { pointer-events: auto; }
.purchase-slot .merchandise { position: absolute; inset: 0; width: 100%; height: 100%; padding: 0; border: 0; background: transparent; overflow: hidden; text-align: left; }
.merchandise-image { position: absolute; inset: 0; background-position: center; background-size: 100% 100%; background-repeat: no-repeat; }
.merchandise:disabled .merchandise-image, .purchase-category:disabled { filter: brightness(.37647); }
.merchandise[aria-pressed="true"]::after { content: ''; position: absolute; inset: 0; background: linear-gradient(90deg, #ffae2870, #ffae2810); border: 1px solid #ffae28; pointer-events: none; }
.merchandise-price, .merchandise-caption { position: absolute; left: 0; max-width: 100%; padding: 0 2px; background: linear-gradient(90deg, #ffae28a0, transparent); color: white; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.merchandise-price { top: 66.7%; height: 20%; font-size: 2vh; font-weight: bold; }
.merchandise-caption { top: 86.7%; height: 13.3%; font-size: 1.778vh; font-weight: normal; }
.purchase-digit { position: absolute; left: 2.8571%; top: 1.4286%; color: white; font-size: 1.778vh; }
.retail-menu .purchase-category { background-color: transparent; background-position: center; background-size: 100% 100%; background-repeat: no-repeat; padding: 0; border: 0; }
.purchase-category:is(:hover, .menu-hover) { animation: menu-pulse 1s linear infinite; }
.purchase-category:disabled .purchase-digit { color: #808080; }
.purchase .purchase-cycle { position: absolute; right: 1px; top: 2px; width: 5.333vh; height: 5.333vh; padding: 0; border: 0; background-color: transparent; background-position: center; background-size: 100% 100%; background-repeat: no-repeat; }
.chat { background-color: rgb(0 0 0 / 78.4314%); border: 1px solid #ffae28; border-radius: 0; }
.purchase-status p { text-align: center; font-size: 1.778vh; }
.purchase-credits-label, .purchase-balance { font-size: 3.111vh; }
.purchase-credits-label { text-align: right; }
.purchase-balance { text-align: left; color: white; }
.purchase .purchase-messages { overflow: auto; color: #b3b3b3; border: 1px solid #ffae28; font-weight: normal; }
.purchase-messages p { margin: 0; }
.purchase-chat input { width: 100%; height: 100%; }
.retail-popup { z-index: 100; background: rgb(0 0 0 / 92.549%); }
.popup-box { border: 1px solid #ffae28; background: rgb(255 174 40 / 15.686%); }
.popup-title { position: absolute; left: -1px; bottom: 100%; width: max-content; max-width: 100%; box-sizing: border-box; margin: 0; border: 1px solid #ffae28; padding: 2.6667vh 2.5vw; color: #ffd528; background: rgb(255 174 40 / 15.686%); font-size: 2vh; text-align: center; }
.popup-message { overflow: auto; white-space: pre-wrap; overflow-wrap: anywhere; color: #ffd528; font-weight: bold; }
.binding-popup-content { position: absolute; inset: 3%; overflow: auto; }
.binding-popup-content label { display: flex; align-items: center; gap: .6em; margin-block: .5em; }
.binding-popup-content button { margin: .5em; }
.connect-screen { background: #08090b; }
.connect-title { color: #ffff24; text-align: center; font: normal 7.111vh/1 'Liberation Sans Narrow', sans-serif; }
.connect-fields { position: absolute; inset: 0; pointer-events: none; }
.connect-fields :is(button, select, label) { pointer-events: auto; }
.connect-preview { border: 1px solid #ffae28; padding: 1%; overflow: auto; }
.connect-preview #ccrx-preview { display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: auto auto auto minmax(0, 1fr); column-gap: 2%; height: 100%; min-height: 0; }
.connect-preview #ccrx-preview > p { grid-column: 1 / -1; margin-block: .25em; }
.connect-preview .chat-history { min-height: 0; max-height: none; border-top: 1px solid #ffae28; }
.connect-screen > .note { margin: 0; }
.joining-screen .popup-box p { margin: 0; }
.loading-screen { background-color: transparent; color: white; font-weight: normal; }
.loading-caption { font-size: 1.778vh; line-height: 1.1; white-space: pre-wrap; }
.loading-large { color: #64ff64; font-size: 3.5556vh; }
.loading-caption-title { color: #64ff64; }
.loading-hint { color: #ff9664; }
.loading-tip { color: #ff9664; overflow: auto; }
.loading-rules { overflow: auto; border-top: 1px solid #ffae28; }
.loading-rules p { margin: 0; }
.loading-screen #ccrx-loading-progress::-webkit-progress-bar { background: #252525; }
.loading-screen #ccrx-loading-progress::-webkit-progress-value { background: #ffae28; mask: none; }
.help-reference { position: absolute; inset: 14% 12% 15%; }
.help-reference dl { display: grid; grid-template-columns: 1fr 2fr; gap: .5em 1em; }
.help-reference dd { margin: 0; }
.scoreboard { position: absolute; right: 20px; top: 10px; max-width: 95vw; max-height: 70vh; overflow: auto; pointer-events: auto;
  color: white; font: normal max(8px, 1.3333vh)/1.2 'Liberation Sans', sans-serif; font-variant-numeric: tabular-nums; text-shadow: -1px 1px #000; }
.scoreboard table { border-collapse: collapse; }
.scoreboard th { color: white; text-align: right; font-weight: normal; }
.scoreboard :is(td, th) { padding: 0 .6ch; white-space: nowrap; }
.scoreboard :is(td, th):nth-child(2) { text-align: left; unicode-bidi: isolate; }
.scoreboard td:nth-child(n+3) { min-width: 7ch; }
.scoreboard .own-marker { color: white; }
.information-screen { pointer-events: none; }
.information-screen h1 { font-size: max(16px, 2.6667vh); text-align: center; }
.information-list { overflow: auto; scrollbar-color: #ffae28 #211b0c; pointer-events: auto; }
.information-list table { width: 100%; border-collapse: collapse; table-layout: fixed; }
.information-list :is(td, th) { padding: .5em .35em; text-align: left; overflow-wrap: anywhere; border-bottom: 1px solid rgb(255 174 40 / 20%); }
.information-list thead { color: white; }
.information-list td:first-child, .information-list td:nth-child(n+3) { text-align: right; }
.information-list .team-standings td:nth-child(n+5) { text-align: left; }
.information-list .own-row { color: white; }
.information-list .team-standings :is(th, td):nth-child(1) { width: 6.5%; }
.information-list .team-standings :is(th, td):nth-child(2) { width: 20%; }
.information-list .team-standings :is(th, td):nth-child(3) { width: 9.2%; }
.information-list .team-standings :is(th, td):nth-child(4) { width: 7.5%; }
.information-list .team-standings :is(th, td):nth-child(5) { width: 33%; }
.information-list .team-standings :is(th, td):nth-child(6) { width: 24%; }
.information-list .battle-standings :is(th, td):nth-child(1) { width: 17.5%; }
.information-list .battle-standings :is(th, td):nth-child(2) { width: 42.5%; }
.information-list .battle-standings :is(th, td):nth-child(n+3) { width: 20%; }
.information-list .server-options :is(th, td) { width: 50%; }
.information-list .changed-rule { color: white; }
.team-logo { display: grid; place-content: center; margin: 0; font-size: max(18px, 4vh); }
.gdi, .gdi + .information-list { color: #ffcc00; }
.nod, .nod + .information-list { color: #ff0000; }
.information-building { display: flex; flex-direction: column; justify-content: end; text-align: center; }
.information-building progress { width: 100%; height: 2.6667vh; accent-color: #ffd528; }
.building-caption { font-weight: normal; font-size: max(9px, 1.5vh); }
.loading-tip { max-width: 40em; line-height: 1.5; }
.server-settings { max-height: 65vh; overflow-y: auto; }
html[data-ccrx-overlay="help"] .panel { max-height: 90vh; overflow-y: auto; }
html[data-ccrx-overlay="in-game-menu"] .screen,
html[data-ccrx-overlay="help"] .screen { background-color: transparent; }

/* Spec 19: additive text copies are rasterised in a separate transparent layer. */
.menu-glow { position: fixed; pointer-events: none; mix-blend-mode: plus-lighter; z-index: 200; }
.menu-entry, .menu-title, [role="tab"] { isolation: isolate; }
.menu-title { text-align: center; }
/* The rotary plate moves continuously; page replacement must not jump its position. */
.options-pages { grid-template-columns: 30.625vw minmax(0, 1fr); gap: 0; }
.options-tabs { display: block; }
.options-tab-selector { position: absolute; pointer-events: none; left: var(--selector-x, 0px); top: var(--selector-y, 0px); transform: translateY(-50%); width: 28.25vw; height: 11.3333vh; background-image: var(--menu-tab-selector); background-size: 100% 100%; }
.options-tab-selector::before { content: ''; position: absolute; left: 2.875vw; top: 4.16667vh; width: 1.75vw; height: 2.3333vh; background-image: var(--menu-tab-bubble); background-size: 100% 100%; }
.options-tabs[data-lit="true"] .options-tab-selector::before { background-image: var(--menu-tab-lit); }
.options-tab-bar { left: calc(var(--selector-x, 0px) + 1.5625vw); top: calc(-1 * var(--bar-overhang, 0px)); bottom: calc(-1 * var(--bar-overhang, 0px)); }
.retail-menu .options-tabs button { position: absolute; left: 0; width: 100%; margin: 0; padding: 0; white-space: nowrap; font-weight: normal; }
.retail-menu .options-tabs [aria-selected="true"] { border: 0; background-image: none; text-shadow: -1px 1px black; }
.options-tabs button::before { display: none; }
.help-key { display: grid; place-content: center; font-size: max(12px, 2.6667vh); color: white; overflow-wrap: anywhere; }
.help-caption { display: flex; align-items: center; white-space: normal; color: white; font-weight: normal; }
.help-align-center { justify-content: center; }
.help-align-right { justify-content: flex-end; }
/* Full-screen results share the 400 by 300 template; the canvas supplies both scenes. */
.retail-menu.win-screen { width: 100vw; max-height: none; overflow: hidden; background-color: transparent; }
.win-screen h1 { font-size: max(16px, 2.6667vh); text-align: center; }
.win-screen [role="status"], .win-team-score { text-align: center; }
.win-screen .win-mvp { text-align: left; }
.win-screen .win-list { overflow: auto; }
.win-screen .win-next-map { text-align: left; }
.win-screen p { font-weight: normal; }
.win-screen .win-duration { text-align: right; }
.win-screen table { border-collapse: separate; border-spacing: 0 4px; color: white; }
.win-screen table caption { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
.retail-menu :is(.menu-list, .information-list table) :is(th, td) { color: white; vertical-align: middle; overflow-wrap: anywhere; padding: 0 2px; border: 0; font-weight: normal; }
.retail-menu :is(.menu-list, .information-list table) thead th { height: 3em; border-bottom: 1px solid white; }
.retail-menu .menu-list td { min-height: 1em; }
.retail-menu .information-list table { border-collapse: separate; border-spacing: 0 4px; }
.retail-menu .menu-list [aria-selected="true"] { outline: 1px solid #ffae28; background-color: transparent; }
.retail-menu .menu-list:focus [aria-selected="true"] { animation: list-selection 1s linear infinite; }
@keyframes list-selection { 50% { outline-color: rgb(255 174 40 / 50%); } }
/* The first eight source pixels form a cap; subsequent pieces are seven pixels wide. */
.retail-menu progress:not(#ccrx-loading-progress)::-webkit-progress-value { mask: var(--health-strip, var(--menu-health-piece)) left center / auto 12px no-repeat; }