/* All web app styles. Components use these class names only, no inline styles, except per-instance values (a button's --ui-btn, a bar's width). */
html, body { margin: 0; height: 100%; overflow: hidden; background: #000; }
#canvas { position: fixed; inset: 0; width: 100vw; height: 100vh; display: block; outline: none; }

/* ==== Design tokens (docs/ui.md). The only place colors, fonts and metrics are defined. ==== */

/* mainui_cpp maps Trebuchet MS and Tahoma to these files (font/FontManager.cpp). */
@font-face { font-family: "Menu"; src: url("/ui/valve/fonts/FiraSans-Regular.ttf") format("truetype"); font-display: block; }
@font-face { font-family: "Console"; src: url("/ui/valve/fonts/tahoma.ttf") format("truetype"); font-display: block; }

:root {
  /* Colors: mainui_cpp/BaseMenu.cpp defaults. */
  --ui-prompt-bg: #383838;
  --ui-prompt-text: #f0b418;
  --ui-prompt-focus: #ffff00;
  --ui-input-text: #f0b418;
  --ui-input-bg: #38383880;
  --ui-input-fg: #555555;
  --ui-help: #a0a0a0;
  --ui-dk-grey: #40404080;
  --ui-black: #00000080;
  --ui-white: #ffffff;
  --ui-dim: #00000040; /* YesNoMessageBox screen dim */

  /* Fonts. */
  --ui-font-menu: "Menu", "Trebuchet MS", sans-serif;
  --ui-font-console: "Console", Tahoma, sans-serif;

  /* One menu unit: mainui lays out on a 1024x768 grid scaled by screen height,
     or by width on screens narrower than 4:3 (BaseMenu.cpp, UI_VidInit). */
  --u: calc(min(100vh, 100vw * 0.75) / 768);

  /* Device pixels per CSS pixel, stepped by the media queries below. The game renders at device
     resolution, and some of its metrics are whole device pixels. */
  --ui-dppx: 1;

  /* Character cell heights (font/FontRenderer.h), for layout. */
  --ui-char-small: calc(20 * var(--u));
  --ui-char-med: calc(26 * var(--u));
  --ui-char-big: calc(50 * var(--u));
  --ui-char-console: calc(18 * var(--u));

  /* Font sizes. The menu renders with stb_truetype, which scales a font so ascent minus descent
     is the cell height plus 4 device pixels (font/StbFont.cpp). That span is 1.2 em in FiraSans
     and 1.207 em in Tahoma. */
  --ui-em-small: calc((20 * var(--u) + 4px / var(--ui-dppx)) / 1.2);
  --ui-em-med: calc((26 * var(--u) + 4px / var(--ui-dppx)) / 1.2);
  --ui-em-big: calc((50 * var(--u) + 4px / var(--ui-dppx)) / 1.2);
  --ui-em-console: calc((18 * var(--u) + 4px / var(--ui-dppx)) / 1.207);

  /* Other metrics from mainui_cpp, in menu units unless noted. */
  --ui-outline: 4px; /* uiStatic.outlineWidth, not scaled */
  --ui-shadow: max(1px / var(--ui-dppx), 3 * var(--u)); /* UI_DrawString drop shadow offset */
  --ui-btn-w: calc(250 * var(--u));
  --ui-btn-h: calc(42 * var(--u));
  --ui-banner-x: calc(72 * var(--u));
  --ui-banner-y: calc(72 * var(--u));
  --ui-banner-w: calc(736 * var(--u));
  --ui-banner-h: calc(128 * var(--u));
  --ui-check: calc(32 * var(--u));
  --ui-dialog-w: calc(640 * var(--u));
  --ui-dialog-h: calc(256 * var(--u));
}
@media (min-resolution: 1.5dppx) { :root { --ui-dppx: 1.5; } }
@media (min-resolution: 2dppx) { :root { --ui-dppx: 2; } }
@media (min-resolution: 3dppx) { :root { --ui-dppx: 3; } }

/* ==== Kit components (src/ui/). The TGA glyph art arrives as --ui-art-* variables set by src/ui/art.rs. ==== */

.ui-text { font-family: var(--ui-font-menu); font-size: var(--ui-em-med); line-height: 1.2; color: var(--ui-prompt-text); text-shadow: var(--ui-shadow) var(--ui-shadow) 0 #000; }
.ui-text.small { font-size: var(--ui-em-small); }
.ui-help { color: var(--ui-help); }
.ui-console { font-family: var(--ui-font-console); font-size: var(--ui-em-console); color: var(--ui-input-text); }

/* PicButton: a 156x26 cell of btns_main.bmp drawn additively at 250x42. Each button is three
   cells (normal, focus, pressed) stacked in one 78-pixel block; --ui-btn is the block index. */
.ui-btn { position: relative; display: block; width: var(--ui-btn-w); height: var(--ui-btn-h); padding: 0; border: 0; background: none; cursor: pointer; outline: none; }
.ui-btn > span { position: absolute; inset: 0; mix-blend-mode: plus-lighter; pointer-events: none;
  background: url("/ui/cstrike/shell/btns_main.bmp") no-repeat;
  background-size: var(--ui-btn-w) calc(5538 * 42 / 26 * var(--u));
  background-position: 0 calc((var(--ui-btn) * -126 - var(--ui-cell) * 42) * var(--u)); }
.ui-btn > .normal { --ui-cell: 0; }
.ui-btn > .focus { --ui-cell: 1; opacity: 0; transition: opacity 512ms linear; } /* focus fades out over 512 ms */
.ui-btn > .pressed { --ui-cell: 2; display: none; }
.ui-btn:hover > .focus, .ui-btn:focus-visible > .focus, .ui-btn.is-focus > .focus { opacity: 1; transition: none; }
.ui-btn:active > .pressed, .ui-btn.is-pressed > .pressed { display: block; }
.ui-btn:active > .normal, .ui-btn:active > .focus, .ui-btn.is-pressed > .normal, .ui-btn.is-pressed > .focus { display: none; }
.ui-btn:disabled { cursor: default; }
.ui-btn:disabled > span { filter: brightness(0.251); } /* modulated by uiColorDkGrey */
.ui-btn:disabled > .focus, .ui-btn:disabled > .pressed { display: none; }
/* Status text (QMF_NOTIFY): console font in help, 290 units right of the button, centered on it. */
.ui-btn[data-hint]::after { content: attr(data-hint); position: absolute; left: calc(290 * var(--u)); top: 50%; transform: translateY(-50%); white-space: nowrap; pointer-events: none;
  font-family: var(--ui-font-console); font-size: var(--ui-em-console); color: var(--ui-help); }

/* Text PicButton (no picture): blurred menu font, additive, offset 7 units right and 1 up. */
.ui-tbtn { display: block; width: var(--ui-btn-w); height: var(--ui-btn-h); padding: 0 0 0 calc(7 * var(--u)); margin-top: calc(-1 * var(--u)); border: 0; background: none; cursor: pointer; outline: none; text-align: left;
  font-family: var(--ui-font-menu); font-size: var(--ui-em-med); line-height: var(--ui-btn-h); color: var(--ui-prompt-text); mix-blend-mode: plus-lighter;
  text-shadow: 0 0 calc(2 * var(--u)) var(--ui-prompt-text); transition: text-shadow 512ms linear; }
.ui-tbtn:hover, .ui-tbtn:focus-visible, .ui-tbtn.is-focus { text-shadow: 0 0 calc(2 * var(--u)) var(--ui-prompt-text), 0 0 calc(8 * var(--u)) var(--ui-prompt-text), 0 0 calc(8 * var(--u)) var(--ui-prompt-text); transition: none; }
.ui-tbtn:active, .ui-tbtn.is-pressed { color: #000; mix-blend-mode: normal; text-shadow: 0 0 calc(8 * var(--u)) var(--ui-prompt-text), 0 0 calc(8 * var(--u)) var(--ui-prompt-text); }
.ui-tbtn:disabled { cursor: default; color: #503c08; text-shadow: none; }

/* Banner: a 460x80 head_*.bmp drawn additively at 736x128. */
.ui-banner { display: block; width: var(--ui-banner-w); height: var(--ui-banner-h); mix-blend-mode: plus-lighter; }
.ui-banner.at-home { position: absolute; left: var(--ui-banner-x); top: var(--ui-banner-y); }

/* CheckBox: 32x32 units, drawn opaque; label at 1.25 widths in the help color. */
.ui-check { position: relative; display: inline-flex; align-items: center; height: var(--ui-check); cursor: pointer; }
.ui-check > input { position: absolute; opacity: 0; width: 0; height: 0; margin: 0; }
.ui-check > .box { position: relative; flex: none; width: var(--ui-check); height: var(--ui-check); margin-right: calc(var(--ui-check) * 0.25); background: var(--ui-art-cb-empty) center / 100% 100%; }
.ui-check > .box::after { content: ""; position: absolute; inset: 0; display: none; mix-blend-mode: plus-lighter; background: var(--ui-art-cb-over) center / 100% 100%, var(--ui-input-text); background-blend-mode: multiply; }
.ui-check > input:checked + .box { background-image: var(--ui-art-cb-checked); }
.ui-check:hover > input + .box, .ui-check > input:focus-visible + .box, .ui-check.is-focus > input + .box { background-image: var(--ui-art-cb-over); }
.ui-check:hover > input:checked + .box, .ui-check > input:checked:focus-visible + .box, .ui-check.is-focus > input:checked + .box { background-image: var(--ui-art-cb-down); }
.ui-check:hover > input:checked + .box::after, .ui-check > input:checked:focus-visible + .box::after, .ui-check.is-focus > input:checked + .box::after { display: block; }
.ui-check:active > input + .box, .ui-check.is-pressed > input + .box { background-image: var(--ui-art-cb-down); }
.ui-check:active > input + .box::after, .ui-check.is-pressed > input + .box::after { display: none; }
.ui-check > input:disabled + .box { background-image: var(--ui-art-cb-disabled); }
.ui-check > input:disabled + .box::after { display: none; }
.ui-check:has(> input:disabled) { cursor: default; }

/* Arrows: square, the control height plus two outlines (SpinControl.cpp, Table.cpp). */
.ui-arrow { display: block; width: calc(var(--ui-check) + 2 * var(--ui-outline)); height: calc(var(--ui-check) + 2 * var(--ui-outline)); padding: 0; border: 0; cursor: pointer; outline: none; background: var(--ui-art-arrow) center / 100% 100%; }
.ui-arrow:hover, .ui-arrow:focus-visible, .ui-arrow.is-focus { background-image: var(--ui-art-arrow-focus); }
.ui-arrow:active, .ui-arrow.is-pressed { background-image: var(--ui-art-arrow-pressed); }
.ui-arrow.left { --ui-art-arrow: var(--ui-art-larrow); --ui-art-arrow-focus: var(--ui-art-larrow-f); --ui-art-arrow-pressed: var(--ui-art-larrow-p); }
.ui-arrow.right { --ui-art-arrow: var(--ui-art-rarrow); --ui-art-arrow-focus: var(--ui-art-rarrow-f); --ui-art-arrow-pressed: var(--ui-art-rarrow-p); }
.ui-arrow.up { --ui-art-arrow: var(--ui-art-uarrow); --ui-art-arrow-focus: var(--ui-art-uarrow-f); --ui-art-arrow-pressed: var(--ui-art-uarrow-p); }
.ui-arrow.down { --ui-art-arrow: var(--ui-art-darrow); --ui-art-arrow-focus: var(--ui-art-darrow-f); --ui-art-arrow-pressed: var(--ui-art-darrow-p); }

/* Dialog: YesNoMessageBox. A 640x256 prompt-bg box over a dimmed screen; text from 24 units down,
   centered, with a drop shadow; buttons at (188, 204) and (338, 204). */
.ui-dim { position: fixed; inset: 0; background: var(--ui-dim); }
.ui-dialog { position: relative; width: var(--ui-dialog-w); height: var(--ui-dialog-h); background: var(--ui-prompt-bg); }
.ui-dialog > .text { position: absolute; left: 0; right: 0; top: calc(24 * var(--u)); margin: 0; text-align: center; white-space: pre-line; }
.ui-dialog > .yes, .ui-dialog > .no { position: absolute; top: calc(204 * var(--u)); }
.ui-dialog > .yes { left: calc(188 * var(--u)); }
.ui-dialog > .yes.alone { left: calc(298 * var(--u)); }
.ui-dialog > .no { left: calc(338 * var(--u)); }

/* ProgressBar: input-bg track, prompt-text fill, input-fg outline drawn outside the rect.
   20 units tall, as its one user (ConnectionProgress) sets it. */
.ui-progress { position: relative; height: calc(20 * var(--u)); background: var(--ui-input-bg); outline: var(--ui-outline) solid var(--ui-input-fg); }
.ui-progress > .fill { height: 100%; background: var(--ui-prompt-text); }

/* Background: gfx/shell/splash.bmp (640x480) scaled to cover the screen, centered
   (BackgroundBitmap.cpp with ui_menu_style 1, the default). Screens go inside it: additive art
   blends only with what its own stacking context drew, so nothing between may start a new one. */
.ui-background { position: fixed; inset: 0; background: #000 url("/ui/cstrike/shell/splash.bmp") center / cover no-repeat; }

/* The menu grid: the screen's width by 768 units, centered vertically on screens narrower
   than 4:3 (uiStatic.yOffset). Menu items sit in it at their unit coordinates. */
.ui-grid { position: absolute; left: 0; right: 0; top: calc((100% - 768 * var(--u)) / 2); height: calc(768 * var(--u)); }
/* Status text without a picture button: console font in help, centered 720 units down (Framework.cpp). */
.ui-grid > .status { position: absolute; left: 0; right: 0; top: calc(720 * var(--u)); margin: 0; text-align: center; font-family: var(--ui-font-console); font-size: var(--ui-em-console); color: var(--ui-help); }

/* ProgressDialog: ConnectionProgress, a 640-unit prompt-bg window centered on the screen, at least
   192 units tall. The title is centered 16 units down with a drop shadow. The rest stacks up from
   the bottom edge: buttons 44 units up, then each bar 30 and each text 50 above the item below it.
   Texts are 40 units tall in the small font, bars 600 units wide (500 for the download bar). */
.ui-center { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; }
.ui-pdlg { position: relative; box-sizing: border-box; display: flex; flex-direction: column; justify-content: flex-end; width: var(--ui-dialog-w); min-height: calc(192 * var(--u)); padding: calc(52 * var(--u)) 0 calc(2 * var(--u)); background: var(--ui-prompt-bg); }
.ui-pdlg > .title { position: absolute; left: 0; right: 0; top: calc(16 * var(--u)); height: calc(20 * var(--u)); margin: 0; line-height: calc(20 * var(--u)); text-align: center; white-space: nowrap; }
.ui-pdlg > .lines { box-sizing: border-box; min-height: calc(40 * var(--u)); width: calc(600 * var(--u)); margin: 0 0 calc(10 * var(--u)) calc(20 * var(--u)); font-size: var(--ui-em-small); line-height: calc(20 * var(--u)); text-shadow: none; white-space: pre-line; overflow-wrap: anywhere; }
.ui-pdlg > .lines.notice { color: var(--ui-help); }
.ui-pdlg > .lines.ui-console { max-height: calc(160 * var(--u)); overflow: auto; font-size: var(--ui-em-console); line-height: calc(20 * var(--u)); white-space: pre-wrap; }
.ui-pdlg > .ui-progress { width: calc(600 * var(--u)); margin: 0 0 calc(10 * var(--u)) calc(20 * var(--u)); }
.ui-pdlg > .ui-progress.narrow { width: calc(500 * var(--u)); }
.ui-pdlg > .buttons { position: relative; height: var(--ui-btn-h); }
.ui-pdlg > .buttons > .yes, .ui-pdlg > .buttons > .no { position: absolute; top: 0; }
.ui-pdlg > .buttons > .yes { left: calc(188 * var(--u)); }
.ui-pdlg > .buttons > .no { left: calc(338 * var(--u)); }

/* ==== Screens. Placement only; everything they draw comes from the kit. ==== */

/* Loader (src/app.rs): the Start button sits where the main menu puts Multiplayer ("Play CS") when Custom game shows too (menus/Main.cpp); Create lobby follows 50 units below, the menu's button pitch. */
.loader .start { position: absolute; left: calc(112 * var(--u)); top: calc(548 * var(--u)); display: flex; flex-direction: column; gap: calc(8 * var(--u)); }

/* The ?ui-kit review page (src/ui/kit.rs). */
.ui-kit { position: fixed; inset: 0; overflow: auto; padding: calc(24 * var(--u)) calc(72 * var(--u)); background: #000; color: var(--ui-help); font-family: var(--ui-font-menu); }
.ui-kit h2 { margin: calc(40 * var(--u)) 0 calc(16 * var(--u)); font-size: var(--ui-em-small); font-weight: normal; color: var(--ui-help); }
.ui-kit .row.spaced { margin-top: calc(24 * var(--u)); }
.ui-kit .row { display: flex; flex-wrap: wrap; align-items: center; gap: calc(16 * var(--u)) calc(32 * var(--u)); }
.ui-kit .cell { display: flex; flex-direction: column; gap: calc(6 * var(--u)); font-size: var(--ui-em-small); }
.ui-kit .swatch { width: calc(96 * var(--u)); height: calc(48 * var(--u)); outline: 1px solid #222; }
.ui-kit .stage { position: relative; display: flex; align-items: center; justify-content: center; width: calc(900 * var(--u)); height: calc(340 * var(--u)); background: #1c2a3a; }
.ui-kit .stage .ui-dim { position: absolute; }
.ui-kit .menu { display: flex; flex-direction: column; }
.ui-kit .bar { width: calc(480 * var(--u)); }
.ui-kit .stage.tall { height: calc(400 * var(--u)); }