/* Shared menu design tokens. Menu components read only these variables, so the
   whole front end can be retuned here without touching layout files. */
:root {
  --ui-ink: #ece7d8;          /* primary text, bone white */
  --ui-ink-dim: #b3b5a6;      /* secondary text */
  --ui-ink-faint: #7d8174;    /* hints, separators */
  --ui-accent: #f0b43c;       /* signal amber: selection tick, highlights */
  --ui-accent-soft: #f0b43c33;
  --ui-select: #ece7d8;       /* selected row fill */
  --ui-select-ink: #12140f;   /* text on the selected row */
  --ui-danger: #e2765c;
  --ui-live: #e4533c;
  --ui-ok: #a6d98a;           /* ready / confirmed */
  --ui-panel: #0c0e0bd9;      /* opaque-ish panels over the game */
  --ui-line: #ece7d824;
  --ui-scrim: linear-gradient(90deg, #060805f2 0%, #060805db 30%, #0608055c 62%, #06080526 100%);
  --ui-font-display: MW2Bank, Field, 'Arial Black', Arial, sans-serif;
  --ui-font-body: MW2Conduit, Field, 'Arial Narrow', Arial, sans-serif;
  --ui-ease: cubic-bezier(.2, .7, .2, 1);
  --ui-fast: 140ms;
  --ui-row: clamp(40px, 5.4vh, 50px);
  --ui-grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .5 0 0 0 0 .5 0 0 0 0 .5 0 0 0 .55 0'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E");
}
/* MW2's popup look, the one source for the page's own panels shown with MW2's menus (mw2-panels.css): the colours
   are MW2's popup menus' own (popup_joinpassword: a white band tinted .5, the screen behind dimmed with black at
   .35, edit fields black at .3, the black selection bar, ^3 yellow). Sizes are MW2 menu units: `--mw2-unit` is
   one unit of the 640x480 menus in CSS pixels, published by ui/mw2-menu/units.js from the layout the canvas
   menus use, so a panel grows and shrinks with them on every screen. */
:root {
  --mw2-unit: 1.5px;
  --mw2-dim: #00000059;
  --mw2-band: #808080;
  --mw2-title: linear-gradient(90deg, #ffffff4d, #ffffff00 85%);
  --mw2-field: #0000004d;
  --mw2-ink: #fff;
  --mw2-ink-dim: #ffffffbf;
  --mw2-ink-off: #ffffff73;
  --mw2-select: #000;
  --mw2-yellow: #ffff4d;
  --mw2-shadow: 0 0 calc(var(--mw2-unit) * 32) #000000b3;
  --mw2-text-shadow: calc(var(--mw2-unit) * .7) calc(var(--mw2-unit) * .7) 0 #000;
  --mw2-font: MW2Conduit, var(--ui-font-body);
  --mw2-font-title: MW2Bank, var(--ui-font-display);
  --mw2-row: max(28px, calc(var(--mw2-unit) * 20));
  --mw2-text: max(14px, calc(var(--mw2-unit) * 11));
  --mw2-small: max(12px, calc(var(--mw2-unit) * 9));
  --mw2-title-size: max(16px, calc(var(--mw2-unit) * 14));
  --mw2-pad: max(10px, calc(var(--mw2-unit) * 10));
  --mw2-popup: calc(var(--mw2-unit) * 300);
  --mw2-panel: calc(var(--mw2-unit) * 440);
}
/* Fingers need bigger rows than a mouse does: 48 px rows (Google's 48 dp, the mobile shooters' menu rows) and text a
   phone held at arm's length reads. */
@media (pointer: coarse) { :root { --mw2-row: max(48px, calc(var(--mw2-unit) * 20)); --mw2-text: max(16px, calc(var(--mw2-unit) * 11)); --mw2-small: max(16px, calc(var(--mw2-unit) * 9)); } }
@media (prefers-reduced-motion: reduce) { :root { --ui-fast: 0ms; } }