/* Pixel-game UI in the spirit of Thwack and Chip and Charge: royal-blue menu screens with drifting
   specks, light-cyan pill buttons with a navy outline and a shaded lip, gold for the selected option,
   lime for "go", dark keycaps for keyboard prompts. Frames are 9-slice SVGs scaled by whole UI pixels
   (--p); button and title lettering is drawn pixel by pixel (ui/ptext.ts) and shown at whole-pixel
   scales; body text is Tiny5 at sizes snapped to its 8-px grid (--fs-*). Generated by a script. */

:root {
  --p: 3px;
  --fs-1: 16px;
  --fs-2: 24px;
  --fs-3: 32px;
  --fs-4: 48px;
  --fs-5: 64px;
  --navy: #1b1d4a;
  --deep: #0e0f26;
  --blue: #3f56c8;
  --blue-dark: #3346b0;
  --cyan: #8ed6f5;
  --gold: #ffd84a;
  --lime: #c5ea4f;
  --soft: #c3cffa;
  --coral: #ef6455;
  --violet: #8e6cf0;
  --danger: #ff6b6b;
  --font: 'Tiny5', ui-monospace, 'Courier New', monospace;
  --u1: calc(var(--fs-1) / 8);
  --u2: calc(var(--fs-2) / 8);
  --safe-top: env(safe-area-inset-top, 0px);
  --safe-right: env(safe-area-inset-right, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
  --safe-left: env(safe-area-inset-left, 0px);
  --fr-b-cyan: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='9' height='9' shape-rendering='crispEdges'%3E%3Crect x='2' y='0' width='5' height='1' fill='%231b1d4a'/%3E%3Crect x='1' y='1' width='1' height='1' fill='%231b1d4a'/%3E%3Crect x='2' y='1' width='5' height='1' fill='%23d4f2ff'/%3E%3Crect x='7' y='1' width='1' height='1' fill='%231b1d4a'/%3E%3Crect x='0' y='2' width='1' height='1' fill='%231b1d4a'/%3E%3Crect x='1' y='2' width='7' height='1' fill='%238ed6f5'/%3E%3Crect x='8' y='2' width='1' height='1' fill='%231b1d4a'/%3E%3Crect x='0' y='3' width='1' height='1' fill='%231b1d4a'/%3E%3Crect x='1' y='3' width='7' height='1' fill='%238ed6f5'/%3E%3Crect x='8' y='3' width='1' height='1' fill='%231b1d4a'/%3E%3Crect x='0' y='4' width='1' height='1' fill='%231b1d4a'/%3E%3Crect x='1' y='4' width='7' height='1' fill='%238ed6f5'/%3E%3Crect x='8' y='4' width='1' height='1' fill='%231b1d4a'/%3E%3Crect x='0' y='5' width='1' height='1' fill='%231b1d4a'/%3E%3Crect x='1' y='5' width='7' height='1' fill='%238ed6f5'/%3E%3Crect x='8' y='5' width='1' height='1' fill='%231b1d4a'/%3E%3Crect x='0' y='6' width='1' height='1' fill='%231b1d4a'/%3E%3Crect x='1' y='6' width='7' height='1' fill='%2355a9de'/%3E%3Crect x='8' y='6' width='1' height='1' fill='%231b1d4a'/%3E%3Crect x='1' y='7' width='1' height='1' fill='%231b1d4a'/%3E%3Crect x='2' y='7' width='5' height='1' fill='%2355a9de'/%3E%3Crect x='7' y='7' width='1' height='1' fill='%231b1d4a'/%3E%3Crect x='2' y='8' width='5' height='1' fill='%231b1d4a'/%3E%3C/svg%3E");
  --fr-b-white: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='9' height='9' shape-rendering='crispEdges'%3E%3Crect x='2' y='0' width='5' height='1' fill='%231b1d4a'/%3E%3Crect x='1' y='1' width='1' height='1' fill='%231b1d4a'/%3E%3Crect x='2' y='1' width='5' height='1' fill='%23ffffff'/%3E%3Crect x='7' y='1' width='1' height='1' fill='%231b1d4a'/%3E%3Crect x='0' y='2' width='1' height='1' fill='%231b1d4a'/%3E%3Crect x='1' y='2' width='7' height='1' fill='%23f4fbff'/%3E%3Crect x='8' y='2' width='1' height='1' fill='%231b1d4a'/%3E%3Crect x='0' y='3' width='1' height='1' fill='%231b1d4a'/%3E%3Crect x='1' y='3' width='7' height='1' fill='%23f4fbff'/%3E%3Crect x='8' y='3' width='1' height='1' fill='%231b1d4a'/%3E%3Crect x='0' y='4' width='1' height='1' fill='%231b1d4a'/%3E%3Crect x='1' y='4' width='7' height='1' fill='%23f4fbff'/%3E%3Crect x='8' y='4' width='1' height='1' fill='%231b1d4a'/%3E%3Crect x='0' y='5' width='1' height='1' fill='%231b1d4a'/%3E%3Crect x='1' y='5' width='7' height='1' fill='%23f4fbff'/%3E%3Crect x='8' y='5' width='1' height='1' fill='%231b1d4a'/%3E%3Crect x='0' y='6' width='1' height='1' fill='%231b1d4a'/%3E%3Crect x='1' y='6' width='7' height='1' fill='%23b9d6ef'/%3E%3Crect x='8' y='6' width='1' height='1' fill='%231b1d4a'/%3E%3Crect x='1' y='7' width='1' height='1' fill='%231b1d4a'/%3E%3Crect x='2' y='7' width='5' height='1' fill='%23b9d6ef'/%3E%3Crect x='7' y='7' width='1' height='1' fill='%231b1d4a'/%3E%3Crect x='2' y='8' width='5' height='1' fill='%231b1d4a'/%3E%3C/svg%3E");
  --fr-b-gold: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='9' height='9' shape-rendering='crispEdges'%3E%3Crect x='2' y='0' width='5' height='1' fill='%231b1d4a'/%3E%3Crect x='1' y='1' width='1' height='1' fill='%231b1d4a'/%3E%3Crect x='2' y='1' width='5' height='1' fill='%23fff4b0'/%3E%3Crect x='7' y='1' width='1' height='1' fill='%231b1d4a'/%3E%3Crect x='0' y='2' width='1' height='1' fill='%231b1d4a'/%3E%3Crect x='1' y='2' width='7' height='1' fill='%23ffd84a'/%3E%3Crect x='8' y='2' width='1' height='1' fill='%231b1d4a'/%3E%3Crect x='0' y='3' width='1' height='1' fill='%231b1d4a'/%3E%3Crect x='1' y='3' width='7' height='1' fill='%23ffd84a'/%3E%3Crect x='8' y='3' width='1' height='1' fill='%231b1d4a'/%3E%3Crect x='0' y='4' width='1' height='1' fill='%231b1d4a'/%3E%3Crect x='1' y='4' width='7' height='1' fill='%23ffd84a'/%3E%3Crect x='8' y='4' width='1' height='1' fill='%231b1d4a'/%3E%3Crect x='0' y='5' width='1' height='1' fill='%231b1d4a'/%3E%3Crect x='1' y='5' width='7' height='1' fill='%23ffd84a'/%3E%3Crect x='8' y='5' width='1' height='1' fill='%231b1d4a'/%3E%3Crect x='0' y='6' width='1' height='1' fill='%231b1d4a'/%3E%3Crect x='1' y='6' width='7' height='1' fill='%23e39b1f'/%3E%3Crect x='8' y='6' width='1' height='1' fill='%231b1d4a'/%3E%3Crect x='1' y='7' width='1' height='1' fill='%231b1d4a'/%3E%3Crect x='2' y='7' width='5' height='1' fill='%23e39b1f'/%3E%3Crect x='7' y='7' width='1' height='1' fill='%231b1d4a'/%3E%3Crect x='2' y='8' width='5' height='1' fill='%231b1d4a'/%3E%3C/svg%3E");
  --fr-b-lime: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='9' height='9' shape-rendering='crispEdges'%3E%3Crect x='2' y='0' width='5' height='1' fill='%231b1d4a'/%3E%3Crect x='1' y='1' width='1' height='1' fill='%231b1d4a'/%3E%3Crect x='2' y='1' width='5' height='1' fill='%23f1ffb8'/%3E%3Crect x='7' y='1' width='1' height='1' fill='%231b1d4a'/%3E%3Crect x='0' y='2' width='1' height='1' fill='%231b1d4a'/%3E%3Crect x='1' y='2' width='7' height='1' fill='%23c5ea4f'/%3E%3Crect x='8' y='2' width='1' height='1' fill='%231b1d4a'/%3E%3Crect x='0' y='3' width='1' height='1' fill='%231b1d4a'/%3E%3Crect x='1' y='3' width='7' height='1' fill='%23c5ea4f'/%3E%3Crect x='8' y='3' width='1' height='1' fill='%231b1d4a'/%3E%3Crect x='0' y='4' width='1' height='1' fill='%231b1d4a'/%3E%3Crect x='1' y='4' width='7' height='1' fill='%23c5ea4f'/%3E%3Crect x='8' y='4' width='1' height='1' fill='%231b1d4a'/%3E%3Crect x='0' y='5' width='1' height='1' fill='%231b1d4a'/%3E%3Crect x='1' y='5' width='7' height='1' fill='%23c5ea4f'/%3E%3Crect x='8' y='5' width='1' height='1' fill='%231b1d4a'/%3E%3Crect x='0' y='6' width='1' height='1' fill='%231b1d4a'/%3E%3Crect x='1' y='6' width='7' height='1' fill='%238fbf2e'/%3E%3Crect x='8' y='6' width='1' height='1' fill='%231b1d4a'/%3E%3Crect x='1' y='7' width='1' height='1' fill='%231b1d4a'/%3E%3Crect x='2' y='7' width='5' height='1' fill='%238fbf2e'/%3E%3Crect x='7' y='7' width='1' height='1' fill='%231b1d4a'/%3E%3Crect x='2' y='8' width='5' height='1' fill='%231b1d4a'/%3E%3C/svg%3E");
  --fr-b-lime-hi: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='9' height='9' shape-rendering='crispEdges'%3E%3Crect x='2' y='0' width='5' height='1' fill='%231b1d4a'/%3E%3Crect x='1' y='1' width='1' height='1' fill='%231b1d4a'/%3E%3Crect x='2' y='1' width='5' height='1' fill='%23ffffff'/%3E%3Crect x='7' y='1' width='1' height='1' fill='%231b1d4a'/%3E%3Crect x='0' y='2' width='1' height='1' fill='%231b1d4a'/%3E%3Crect x='1' y='2' width='7' height='1' fill='%23e6fa9c'/%3E%3Crect x='8' y='2' width='1' height='1' fill='%231b1d4a'/%3E%3Crect x='0' y='3' width='1' height='1' fill='%231b1d4a'/%3E%3Crect x='1' y='3' width='7' height='1' fill='%23e6fa9c'/%3E%3Crect x='8' y='3' width='1' height='1' fill='%231b1d4a'/%3E%3Crect x='0' y='4' width='1' height='1' fill='%231b1d4a'/%3E%3Crect x='1' y='4' width='7' height='1' fill='%23e6fa9c'/%3E%3Crect x='8' y='4' width='1' height='1' fill='%231b1d4a'/%3E%3Crect x='0' y='5' width='1' height='1' fill='%231b1d4a'/%3E%3Crect x='1' y='5' width='7' height='1' fill='%23e6fa9c'/%3E%3Crect x='8' y='5' width='1' height='1' fill='%231b1d4a'/%3E%3Crect x='0' y='6' width='1' height='1' fill='%231b1d4a'/%3E%3Crect x='1' y='6' width='7' height='1' fill='%23a8d040'/%3E%3Crect x='8' y='6' width='1' height='1' fill='%231b1d4a'/%3E%3Crect x='1' y='7' width='1' height='1' fill='%231b1d4a'/%3E%3Crect x='2' y='7' width='5' height='1' fill='%23a8d040'/%3E%3Crect x='7' y='7' width='1' height='1' fill='%231b1d4a'/%3E%3Crect x='2' y='8' width='5' height='1' fill='%231b1d4a'/%3E%3C/svg%3E");
  --fr-b-navy: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='9' height='9' shape-rendering='crispEdges'%3E%3Crect x='2' y='0' width='5' height='1' fill='%230e0f26'/%3E%3Crect x='1' y='1' width='1' height='1' fill='%230e0f26'/%3E%3Crect x='2' y='1' width='5' height='1' fill='%233d4285'/%3E%3Crect x='7' y='1' width='1' height='1' fill='%230e0f26'/%3E%3Crect x='0' y='2' width='1' height='1' fill='%230e0f26'/%3E%3Crect x='1' y='2' width='7' height='1' fill='%232a2e68'/%3E%3Crect x='8' y='2' width='1' height='1' fill='%230e0f26'/%3E%3Crect x='0' y='3' width='1' height='1' fill='%230e0f26'/%3E%3Crect x='1' y='3' width='7' height='1' fill='%232a2e68'/%3E%3Crect x='8' y='3' width='1' height='1' fill='%230e0f26'/%3E%3Crect x='0' y='4' width='1' height='1' fill='%230e0f26'/%3E%3Crect x='1' y='4' width='7' height='1' fill='%232a2e68'/%3E%3Crect x='8' y='4' width='1' height='1' fill='%230e0f26'/%3E%3Crect x='0' y='5' width='1' height='1' fill='%230e0f26'/%3E%3Crect x='1' y='5' width='7' height='1' fill='%232a2e68'/%3E%3Crect x='8' y='5' width='1' height='1' fill='%230e0f26'/%3E%3Crect x='0' y='6' width='1' height='1' fill='%230e0f26'/%3E%3Crect x='1' y='6' width='7' height='1' fill='%231a1c45'/%3E%3Crect x='8' y='6' width='1' height='1' fill='%230e0f26'/%3E%3Crect x='1' y='7' width='1' height='1' fill='%230e0f26'/%3E%3Crect x='2' y='7' width='5' height='1' fill='%231a1c45'/%3E%3Crect x='7' y='7' width='1' height='1' fill='%230e0f26'/%3E%3Crect x='2' y='8' width='5' height='1' fill='%230e0f26'/%3E%3C/svg%3E");
  --fr-b-navy-hi: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='9' height='9' shape-rendering='crispEdges'%3E%3Crect x='2' y='0' width='5' height='1' fill='%230e0f26'/%3E%3Crect x='1' y='1' width='1' height='1' fill='%230e0f26'/%3E%3Crect x='2' y='1' width='5' height='1' fill='%235a60a8'/%3E%3Crect x='7' y='1' width='1' height='1' fill='%230e0f26'/%3E%3Crect x='0' y='2' width='1' height='1' fill='%230e0f26'/%3E%3Crect x='1' y='2' width='7' height='1' fill='%233b4088'/%3E%3Crect x='8' y='2' width='1' height='1' fill='%230e0f26'/%3E%3Crect x='0' y='3' width='1' height='1' fill='%230e0f26'/%3E%3Crect x='1' y='3' width='7' height='1' fill='%233b4088'/%3E%3Crect x='8' y='3' width='1' height='1' fill='%230e0f26'/%3E%3Crect x='0' y='4' width='1' height='1' fill='%230e0f26'/%3E%3Crect x='1' y='4' width='7' height='1' fill='%233b4088'/%3E%3Crect x='8' y='4' width='1' height='1' fill='%230e0f26'/%3E%3Crect x='0' y='5' width='1' height='1' fill='%230e0f26'/%3E%3Crect x='1' y='5' width='7' height='1' fill='%233b4088'/%3E%3Crect x='8' y='5' width='1' height='1' fill='%230e0f26'/%3E%3Crect x='0' y='6' width='1' height='1' fill='%230e0f26'/%3E%3Crect x='1' y='6' width='7' height='1' fill='%23262a63'/%3E%3Crect x='8' y='6' width='1' height='1' fill='%230e0f26'/%3E%3Crect x='1' y='7' width='1' height='1' fill='%230e0f26'/%3E%3Crect x='2' y='7' width='5' height='1' fill='%23262a63'/%3E%3Crect x='7' y='7' width='1' height='1' fill='%230e0f26'/%3E%3Crect x='2' y='8' width='5' height='1' fill='%230e0f26'/%3E%3C/svg%3E");
  --fr-b-coral: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='9' height='9' shape-rendering='crispEdges'%3E%3Crect x='2' y='0' width='5' height='1' fill='%231b1d4a'/%3E%3Crect x='1' y='1' width='1' height='1' fill='%231b1d4a'/%3E%3Crect x='2' y='1' width='5' height='1' fill='%23ffc4bb'/%3E%3Crect x='7' y='1' width='1' height='1' fill='%231b1d4a'/%3E%3Crect x='0' y='2' width='1' height='1' fill='%231b1d4a'/%3E%3Crect x='1' y='2' width='7' height='1' fill='%23ef6455'/%3E%3Crect x='8' y='2' width='1' height='1' fill='%231b1d4a'/%3E%3Crect x='0' y='3' width='1' height='1' fill='%231b1d4a'/%3E%3Crect x='1' y='3' width='7' height='1' fill='%23ef6455'/%3E%3Crect x='8' y='3' width='1' height='1' fill='%231b1d4a'/%3E%3Crect x='0' y='4' width='1' height='1' fill='%231b1d4a'/%3E%3Crect x='1' y='4' width='7' height='1' fill='%23ef6455'/%3E%3Crect x='8' y='4' width='1' height='1' fill='%231b1d4a'/%3E%3Crect x='0' y='5' width='1' height='1' fill='%231b1d4a'/%3E%3Crect x='1' y='5' width='7' height='1' fill='%23ef6455'/%3E%3Crect x='8' y='5' width='1' height='1' fill='%231b1d4a'/%3E%3Crect x='0' y='6' width='1' height='1' fill='%231b1d4a'/%3E%3Crect x='1' y='6' width='7' height='1' fill='%23c2453b'/%3E%3Crect x='8' y='6' width='1' height='1' fill='%231b1d4a'/%3E%3Crect x='1' y='7' width='1' height='1' fill='%231b1d4a'/%3E%3Crect x='2' y='7' width='5' height='1' fill='%23c2453b'/%3E%3Crect x='7' y='7' width='1' height='1' fill='%231b1d4a'/%3E%3Crect x='2' y='8' width='5' height='1' fill='%231b1d4a'/%3E%3C/svg%3E");
  --fr-b-violet: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='9' height='9' shape-rendering='crispEdges'%3E%3Crect x='2' y='0' width='5' height='1' fill='%231b1d4a'/%3E%3Crect x='1' y='1' width='1' height='1' fill='%231b1d4a'/%3E%3Crect x='2' y='1' width='5' height='1' fill='%23d9ccff'/%3E%3Crect x='7' y='1' width='1' height='1' fill='%231b1d4a'/%3E%3Crect x='0' y='2' width='1' height='1' fill='%231b1d4a'/%3E%3Crect x='1' y='2' width='7' height='1' fill='%238e6cf0'/%3E%3Crect x='8' y='2' width='1' height='1' fill='%231b1d4a'/%3E%3Crect x='0' y='3' width='1' height='1' fill='%231b1d4a'/%3E%3Crect x='1' y='3' width='7' height='1' fill='%238e6cf0'/%3E%3Crect x='8' y='3' width='1' height='1' fill='%231b1d4a'/%3E%3Crect x='0' y='4' width='1' height='1' fill='%231b1d4a'/%3E%3Crect x='1' y='4' width='7' height='1' fill='%238e6cf0'/%3E%3Crect x='8' y='4' width='1' height='1' fill='%231b1d4a'/%3E%3Crect x='0' y='5' width='1' height='1' fill='%231b1d4a'/%3E%3Crect x='1' y='5' width='7' height='1' fill='%238e6cf0'/%3E%3Crect x='8' y='5' width='1' height='1' fill='%231b1d4a'/%3E%3Crect x='0' y='6' width='1' height='1' fill='%231b1d4a'/%3E%3Crect x='1' y='6' width='7' height='1' fill='%236a4cc9'/%3E%3Crect x='8' y='6' width='1' height='1' fill='%231b1d4a'/%3E%3Crect x='1' y='7' width='1' height='1' fill='%231b1d4a'/%3E%3Crect x='2' y='7' width='5' height='1' fill='%236a4cc9'/%3E%3Crect x='7' y='7' width='1' height='1' fill='%231b1d4a'/%3E%3Crect x='2' y='8' width='5' height='1' fill='%231b1d4a'/%3E%3C/svg%3E");
  --fr-panel: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='9' height='9' shape-rendering='crispEdges'%3E%3Crect x='2' y='0' width='5' height='1' fill='%231b1d4a'/%3E%3Crect x='1' y='1' width='1' height='1' fill='%231b1d4a'/%3E%3Crect x='2' y='1' width='5' height='1' fill='%235d75e6'/%3E%3Crect x='7' y='1' width='1' height='1' fill='%231b1d4a'/%3E%3Crect x='0' y='2' width='1' height='1' fill='%231b1d4a'/%3E%3Crect x='1' y='2' width='7' height='1' fill='%234057c9'/%3E%3Crect x='8' y='2' width='1' height='1' fill='%231b1d4a'/%3E%3Crect x='0' y='3' width='1' height='1' fill='%231b1d4a'/%3E%3Crect x='1' y='3' width='7' height='1' fill='%234057c9'/%3E%3Crect x='8' y='3' width='1' height='1' fill='%231b1d4a'/%3E%3Crect x='0' y='4' width='1' height='1' fill='%231b1d4a'/%3E%3Crect x='1' y='4' width='7' height='1' fill='%234057c9'/%3E%3Crect x='8' y='4' width='1' height='1' fill='%231b1d4a'/%3E%3Crect x='0' y='5' width='1' height='1' fill='%231b1d4a'/%3E%3Crect x='1' y='5' width='7' height='1' fill='%234057c9'/%3E%3Crect x='8' y='5' width='1' height='1' fill='%231b1d4a'/%3E%3Crect x='0' y='6' width='1' height='1' fill='%231b1d4a'/%3E%3Crect x='1' y='6' width='7' height='1' fill='%234057c9'/%3E%3Crect x='8' y='6' width='1' height='1' fill='%231b1d4a'/%3E%3Crect x='1' y='7' width='1' height='1' fill='%231b1d4a'/%3E%3Crect x='2' y='7' width='5' height='1' fill='%234057c9'/%3E%3Crect x='7' y='7' width='1' height='1' fill='%231b1d4a'/%3E%3Crect x='2' y='8' width='5' height='1' fill='%231b1d4a'/%3E%3C/svg%3E");
  --fr-sheet: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='9' height='9' shape-rendering='crispEdges'%3E%3Crect x='2' y='0' width='5' height='1' fill='%231b1d4a'/%3E%3Crect x='1' y='1' width='1' height='1' fill='%231b1d4a'/%3E%3Crect x='2' y='1' width='5' height='1' fill='%232b3a99'/%3E%3Crect x='7' y='1' width='1' height='1' fill='%231b1d4a'/%3E%3Crect x='0' y='2' width='1' height='1' fill='%231b1d4a'/%3E%3Crect x='1' y='2' width='7' height='1' fill='%233346b0'/%3E%3Crect x='8' y='2' width='1' height='1' fill='%231b1d4a'/%3E%3Crect x='0' y='3' width='1' height='1' fill='%231b1d4a'/%3E%3Crect x='1' y='3' width='7' height='1' fill='%233346b0'/%3E%3Crect x='8' y='3' width='1' height='1' fill='%231b1d4a'/%3E%3Crect x='0' y='4' width='1' height='1' fill='%231b1d4a'/%3E%3Crect x='1' y='4' width='7' height='1' fill='%233346b0'/%3E%3Crect x='8' y='4' width='1' height='1' fill='%231b1d4a'/%3E%3Crect x='0' y='5' width='1' height='1' fill='%231b1d4a'/%3E%3Crect x='1' y='5' width='7' height='1' fill='%233346b0'/%3E%3Crect x='8' y='5' width='1' height='1' fill='%231b1d4a'/%3E%3Crect x='0' y='6' width='1' height='1' fill='%231b1d4a'/%3E%3Crect x='1' y='6' width='7' height='1' fill='%233346b0'/%3E%3Crect x='8' y='6' width='1' height='1' fill='%231b1d4a'/%3E%3Crect x='1' y='7' width='1' height='1' fill='%231b1d4a'/%3E%3Crect x='2' y='7' width='5' height='1' fill='%233346b0'/%3E%3Crect x='7' y='7' width='1' height='1' fill='%231b1d4a'/%3E%3Crect x='2' y='8' width='5' height='1' fill='%231b1d4a'/%3E%3C/svg%3E");
  --fr-inset: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='9' height='9' shape-rendering='crispEdges'%3E%3Crect x='2' y='0' width='5' height='1' fill='%231b1d4a'/%3E%3Crect x='1' y='1' width='1' height='1' fill='%231b1d4a'/%3E%3Crect x='2' y='1' width='5' height='1' fill='%23c9dcf0'/%3E%3Crect x='7' y='1' width='1' height='1' fill='%231b1d4a'/%3E%3Crect x='0' y='2' width='1' height='1' fill='%231b1d4a'/%3E%3Crect x='1' y='2' width='7' height='1' fill='%23ffffff'/%3E%3Crect x='8' y='2' width='1' height='1' fill='%231b1d4a'/%3E%3Crect x='0' y='3' width='1' height='1' fill='%231b1d4a'/%3E%3Crect x='1' y='3' width='7' height='1' fill='%23ffffff'/%3E%3Crect x='8' y='3' width='1' height='1' fill='%231b1d4a'/%3E%3Crect x='0' y='4' width='1' height='1' fill='%231b1d4a'/%3E%3Crect x='1' y='4' width='7' height='1' fill='%23ffffff'/%3E%3Crect x='8' y='4' width='1' height='1' fill='%231b1d4a'/%3E%3Crect x='0' y='5' width='1' height='1' fill='%231b1d4a'/%3E%3Crect x='1' y='5' width='7' height='1' fill='%23ffffff'/%3E%3Crect x='8' y='5' width='1' height='1' fill='%231b1d4a'/%3E%3Crect x='0' y='6' width='1' height='1' fill='%231b1d4a'/%3E%3Crect x='1' y='6' width='7' height='1' fill='%23ffffff'/%3E%3Crect x='8' y='6' width='1' height='1' fill='%231b1d4a'/%3E%3Crect x='1' y='7' width='1' height='1' fill='%231b1d4a'/%3E%3Crect x='2' y='7' width='5' height='1' fill='%23ffffff'/%3E%3Crect x='7' y='7' width='1' height='1' fill='%231b1d4a'/%3E%3Crect x='2' y='8' width='5' height='1' fill='%231b1d4a'/%3E%3C/svg%3E");
  --fr-inset-focus: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='9' height='9' shape-rendering='crispEdges'%3E%3Crect x='2' y='0' width='5' height='1' fill='%23e39b1f'/%3E%3Crect x='1' y='1' width='1' height='1' fill='%23e39b1f'/%3E%3Crect x='2' y='1' width='5' height='1' fill='%23f3dc9a'/%3E%3Crect x='7' y='1' width='1' height='1' fill='%23e39b1f'/%3E%3Crect x='0' y='2' width='1' height='1' fill='%23e39b1f'/%3E%3Crect x='1' y='2' width='7' height='1' fill='%23fffdf2'/%3E%3Crect x='8' y='2' width='1' height='1' fill='%23e39b1f'/%3E%3Crect x='0' y='3' width='1' height='1' fill='%23e39b1f'/%3E%3Crect x='1' y='3' width='7' height='1' fill='%23fffdf2'/%3E%3Crect x='8' y='3' width='1' height='1' fill='%23e39b1f'/%3E%3Crect x='0' y='4' width='1' height='1' fill='%23e39b1f'/%3E%3Crect x='1' y='4' width='7' height='1' fill='%23fffdf2'/%3E%3Crect x='8' y='4' width='1' height='1' fill='%23e39b1f'/%3E%3Crect x='0' y='5' width='1' height='1' fill='%23e39b1f'/%3E%3Crect x='1' y='5' width='7' height='1' fill='%23fffdf2'/%3E%3Crect x='8' y='5' width='1' height='1' fill='%23e39b1f'/%3E%3Crect x='0' y='6' width='1' height='1' fill='%23e39b1f'/%3E%3Crect x='1' y='6' width='7' height='1' fill='%23fffdf2'/%3E%3Crect x='8' y='6' width='1' height='1' fill='%23e39b1f'/%3E%3Crect x='1' y='7' width='1' height='1' fill='%23e39b1f'/%3E%3Crect x='2' y='7' width='5' height='1' fill='%23fffdf2'/%3E%3Crect x='7' y='7' width='1' height='1' fill='%23e39b1f'/%3E%3Crect x='2' y='8' width='5' height='1' fill='%23e39b1f'/%3E%3C/svg%3E");
  --fr-slot: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='9' height='9' shape-rendering='crispEdges'%3E%3Crect x='2' y='0' width='5' height='1' fill='%231b1d4a'/%3E%3Crect x='1' y='1' width='1' height='1' fill='%231b1d4a'/%3E%3Crect x='2' y='1' width='5' height='1' fill='%2324317f'/%3E%3Crect x='7' y='1' width='1' height='1' fill='%231b1d4a'/%3E%3Crect x='0' y='2' width='1' height='1' fill='%231b1d4a'/%3E%3Crect x='1' y='2' width='7' height='1' fill='%232c3c9e'/%3E%3Crect x='8' y='2' width='1' height='1' fill='%231b1d4a'/%3E%3Crect x='0' y='3' width='1' height='1' fill='%231b1d4a'/%3E%3Crect x='1' y='3' width='7' height='1' fill='%232c3c9e'/%3E%3Crect x='8' y='3' width='1' height='1' fill='%231b1d4a'/%3E%3Crect x='0' y='4' width='1' height='1' fill='%231b1d4a'/%3E%3Crect x='1' y='4' width='7' height='1' fill='%232c3c9e'/%3E%3Crect x='8' y='4' width='1' height='1' fill='%231b1d4a'/%3E%3Crect x='0' y='5' width='1' height='1' fill='%231b1d4a'/%3E%3Crect x='1' y='5' width='7' height='1' fill='%232c3c9e'/%3E%3Crect x='8' y='5' width='1' height='1' fill='%231b1d4a'/%3E%3Crect x='0' y='6' width='1' height='1' fill='%231b1d4a'/%3E%3Crect x='1' y='6' width='7' height='1' fill='%232c3c9e'/%3E%3Crect x='8' y='6' width='1' height='1' fill='%231b1d4a'/%3E%3Crect x='1' y='7' width='1' height='1' fill='%231b1d4a'/%3E%3Crect x='2' y='7' width='5' height='1' fill='%232c3c9e'/%3E%3Crect x='7' y='7' width='1' height='1' fill='%231b1d4a'/%3E%3Crect x='2' y='8' width='5' height='1' fill='%231b1d4a'/%3E%3C/svg%3E");
  --fr-slot-empty: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='9' height='9' shape-rendering='crispEdges'%3E%3Crect x='2' y='0' width='5' height='1' fill='%232a3890'/%3E%3Crect x='1' y='1' width='1' height='1' fill='%232a3890'/%3E%3Crect x='2' y='1' width='5' height='1' fill='%23ffffff' fill-opacity='0.0'/%3E%3Crect x='7' y='1' width='1' height='1' fill='%232a3890'/%3E%3Crect x='0' y='2' width='1' height='1' fill='%232a3890'/%3E%3Crect x='1' y='2' width='7' height='1' fill='%233a4fbd' fill-opacity='0.0'/%3E%3Crect x='8' y='2' width='1' height='1' fill='%232a3890'/%3E%3Crect x='0' y='3' width='1' height='1' fill='%232a3890'/%3E%3Crect x='1' y='3' width='7' height='1' fill='%233a4fbd' fill-opacity='0.0'/%3E%3Crect x='8' y='3' width='1' height='1' fill='%232a3890'/%3E%3Crect x='0' y='4' width='1' height='1' fill='%232a3890'/%3E%3Crect x='1' y='4' width='7' height='1' fill='%233a4fbd' fill-opacity='0.0'/%3E%3Crect x='8' y='4' width='1' height='1' fill='%232a3890'/%3E%3Crect x='0' y='5' width='1' height='1' fill='%232a3890'/%3E%3Crect x='1' y='5' width='7' height='1' fill='%233a4fbd' fill-opacity='0.0'/%3E%3Crect x='8' y='5' width='1' height='1' fill='%232a3890'/%3E%3Crect x='0' y='6' width='1' height='1' fill='%232a3890'/%3E%3Crect x='1' y='6' width='7' height='1' fill='%233a4fbd' fill-opacity='0.0'/%3E%3Crect x='8' y='6' width='1' height='1' fill='%232a3890'/%3E%3Crect x='1' y='7' width='1' height='1' fill='%232a3890'/%3E%3Crect x='2' y='7' width='5' height='1' fill='%233a4fbd' fill-opacity='0.0'/%3E%3Crect x='7' y='7' width='1' height='1' fill='%232a3890'/%3E%3Crect x='2' y='8' width='5' height='1' fill='%232a3890'/%3E%3C/svg%3E");
  --fr-error: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='9' height='9' shape-rendering='crispEdges'%3E%3Crect x='2' y='0' width='5' height='1' fill='%231b1d4a'/%3E%3Crect x='1' y='1' width='1' height='1' fill='%231b1d4a'/%3E%3Crect x='2' y='1' width='5' height='1' fill='%23ffd0c9'/%3E%3Crect x='7' y='1' width='1' height='1' fill='%231b1d4a'/%3E%3Crect x='0' y='2' width='1' height='1' fill='%231b1d4a'/%3E%3Crect x='1' y='2' width='7' height='1' fill='%23ff9a8c'/%3E%3Crect x='8' y='2' width='1' height='1' fill='%231b1d4a'/%3E%3Crect x='0' y='3' width='1' height='1' fill='%231b1d4a'/%3E%3Crect x='1' y='3' width='7' height='1' fill='%23ff9a8c'/%3E%3Crect x='8' y='3' width='1' height='1' fill='%231b1d4a'/%3E%3Crect x='0' y='4' width='1' height='1' fill='%231b1d4a'/%3E%3Crect x='1' y='4' width='7' height='1' fill='%23ff9a8c'/%3E%3Crect x='8' y='4' width='1' height='1' fill='%231b1d4a'/%3E%3Crect x='0' y='5' width='1' height='1' fill='%231b1d4a'/%3E%3Crect x='1' y='5' width='7' height='1' fill='%23ff9a8c'/%3E%3Crect x='8' y='5' width='1' height='1' fill='%231b1d4a'/%3E%3Crect x='0' y='6' width='1' height='1' fill='%231b1d4a'/%3E%3Crect x='1' y='6' width='7' height='1' fill='%23ff9a8c'/%3E%3Crect x='8' y='6' width='1' height='1' fill='%231b1d4a'/%3E%3Crect x='1' y='7' width='1' height='1' fill='%231b1d4a'/%3E%3Crect x='2' y='7' width='5' height='1' fill='%23ff9a8c'/%3E%3Crect x='7' y='7' width='1' height='1' fill='%231b1d4a'/%3E%3Crect x='2' y='8' width='5' height='1' fill='%231b1d4a'/%3E%3C/svg%3E");
  --fr-info: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='9' height='9' shape-rendering='crispEdges'%3E%3Crect x='2' y='0' width='5' height='1' fill='%231b1d4a'/%3E%3Crect x='1' y='1' width='1' height='1' fill='%231b1d4a'/%3E%3Crect x='2' y='1' width='5' height='1' fill='%23f1ffb8'/%3E%3Crect x='7' y='1' width='1' height='1' fill='%231b1d4a'/%3E%3Crect x='0' y='2' width='1' height='1' fill='%231b1d4a'/%3E%3Crect x='1' y='2' width='7' height='1' fill='%23c5ea4f'/%3E%3Crect x='8' y='2' width='1' height='1' fill='%231b1d4a'/%3E%3Crect x='0' y='3' width='1' height='1' fill='%231b1d4a'/%3E%3Crect x='1' y='3' width='7' height='1' fill='%23c5ea4f'/%3E%3Crect x='8' y='3' width='1' height='1' fill='%231b1d4a'/%3E%3Crect x='0' y='4' width='1' height='1' fill='%231b1d4a'/%3E%3Crect x='1' y='4' width='7' height='1' fill='%23c5ea4f'/%3E%3Crect x='8' y='4' width='1' height='1' fill='%231b1d4a'/%3E%3Crect x='0' y='5' width='1' height='1' fill='%231b1d4a'/%3E%3Crect x='1' y='5' width='7' height='1' fill='%23c5ea4f'/%3E%3Crect x='8' y='5' width='1' height='1' fill='%231b1d4a'/%3E%3Crect x='0' y='6' width='1' height='1' fill='%231b1d4a'/%3E%3Crect x='1' y='6' width='7' height='1' fill='%23c5ea4f'/%3E%3Crect x='8' y='6' width='1' height='1' fill='%231b1d4a'/%3E%3Crect x='1' y='7' width='1' height='1' fill='%231b1d4a'/%3E%3Crect x='2' y='7' width='5' height='1' fill='%23c5ea4f'/%3E%3Crect x='7' y='7' width='1' height='1' fill='%231b1d4a'/%3E%3Crect x='2' y='8' width='5' height='1' fill='%231b1d4a'/%3E%3C/svg%3E");
  --fr-key: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='7' height='7' shape-rendering='crispEdges'%3E%3Crect x='1' y='0' width='5' height='1' fill='%230e0f26'/%3E%3Crect x='0' y='1' width='1' height='1' fill='%230e0f26'/%3E%3Crect x='1' y='1' width='5' height='1' fill='%235b5e86'/%3E%3Crect x='6' y='1' width='1' height='1' fill='%230e0f26'/%3E%3Crect x='0' y='2' width='1' height='1' fill='%230e0f26'/%3E%3Crect x='1' y='2' width='5' height='1' fill='%2334375e'/%3E%3Crect x='6' y='2' width='1' height='1' fill='%230e0f26'/%3E%3Crect x='0' y='3' width='1' height='1' fill='%230e0f26'/%3E%3Crect x='1' y='3' width='5' height='1' fill='%2334375e'/%3E%3Crect x='6' y='3' width='1' height='1' fill='%230e0f26'/%3E%3Crect x='0' y='4' width='1' height='1' fill='%230e0f26'/%3E%3Crect x='1' y='4' width='5' height='1' fill='%2320223f'/%3E%3Crect x='6' y='4' width='1' height='1' fill='%230e0f26'/%3E%3Crect x='0' y='5' width='1' height='1' fill='%230e0f26'/%3E%3Crect x='1' y='5' width='5' height='1' fill='%2320223f'/%3E%3Crect x='6' y='5' width='1' height='1' fill='%230e0f26'/%3E%3Crect x='1' y='6' width='5' height='1' fill='%230e0f26'/%3E%3C/svg%3E");
  --fr-pill: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='7' height='7' shape-rendering='crispEdges'%3E%3Crect x='1' y='0' width='5' height='1' fill='%230e0f26'/%3E%3Crect x='0' y='1' width='1' height='1' fill='%230e0f26'/%3E%3Crect x='1' y='1' width='5' height='1' fill='%231b1d4a' fill-opacity='0.92'/%3E%3Crect x='6' y='1' width='1' height='1' fill='%230e0f26'/%3E%3Crect x='0' y='2' width='1' height='1' fill='%230e0f26'/%3E%3Crect x='1' y='2' width='5' height='1' fill='%231b1d4a' fill-opacity='0.92'/%3E%3Crect x='6' y='2' width='1' height='1' fill='%230e0f26'/%3E%3Crect x='0' y='3' width='1' height='1' fill='%230e0f26'/%3E%3Crect x='1' y='3' width='5' height='1' fill='%231b1d4a' fill-opacity='0.92'/%3E%3Crect x='6' y='3' width='1' height='1' fill='%230e0f26'/%3E%3Crect x='0' y='4' width='1' height='1' fill='%230e0f26'/%3E%3Crect x='1' y='4' width='5' height='1' fill='%231b1d4a' fill-opacity='0.92'/%3E%3Crect x='6' y='4' width='1' height='1' fill='%230e0f26'/%3E%3Crect x='0' y='5' width='1' height='1' fill='%230e0f26'/%3E%3Crect x='1' y='5' width='5' height='1' fill='%231b1d4a' fill-opacity='0.92'/%3E%3Crect x='6' y='5' width='1' height='1' fill='%230e0f26'/%3E%3Crect x='1' y='6' width='5' height='1' fill='%230e0f26'/%3E%3C/svg%3E");
  --fr-chip0: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='7' height='7' shape-rendering='crispEdges'%3E%3Crect x='1' y='0' width='5' height='1' fill='%231b1d4a'/%3E%3Crect x='0' y='1' width='1' height='1' fill='%231b1d4a'/%3E%3Crect x='1' y='1' width='5' height='1' fill='%23ef6455'/%3E%3Crect x='6' y='1' width='1' height='1' fill='%231b1d4a'/%3E%3Crect x='0' y='2' width='1' height='1' fill='%231b1d4a'/%3E%3Crect x='1' y='2' width='5' height='1' fill='%23ef6455'/%3E%3Crect x='6' y='2' width='1' height='1' fill='%231b1d4a'/%3E%3Crect x='0' y='3' width='1' height='1' fill='%231b1d4a'/%3E%3Crect x='1' y='3' width='5' height='1' fill='%23ef6455'/%3E%3Crect x='6' y='3' width='1' height='1' fill='%231b1d4a'/%3E%3Crect x='0' y='4' width='1' height='1' fill='%231b1d4a'/%3E%3Crect x='1' y='4' width='5' height='1' fill='%23ef6455'/%3E%3Crect x='6' y='4' width='1' height='1' fill='%231b1d4a'/%3E%3Crect x='0' y='5' width='1' height='1' fill='%231b1d4a'/%3E%3Crect x='1' y='5' width='5' height='1' fill='%23ef6455'/%3E%3Crect x='6' y='5' width='1' height='1' fill='%231b1d4a'/%3E%3Crect x='1' y='6' width='5' height='1' fill='%231b1d4a'/%3E%3C/svg%3E");
  --fr-chip1: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='7' height='7' shape-rendering='crispEdges'%3E%3Crect x='1' y='0' width='5' height='1' fill='%231b1d4a'/%3E%3Crect x='0' y='1' width='1' height='1' fill='%231b1d4a'/%3E%3Crect x='1' y='1' width='5' height='1' fill='%238e6cf0'/%3E%3Crect x='6' y='1' width='1' height='1' fill='%231b1d4a'/%3E%3Crect x='0' y='2' width='1' height='1' fill='%231b1d4a'/%3E%3Crect x='1' y='2' width='5' height='1' fill='%238e6cf0'/%3E%3Crect x='6' y='2' width='1' height='1' fill='%231b1d4a'/%3E%3Crect x='0' y='3' width='1' height='1' fill='%231b1d4a'/%3E%3Crect x='1' y='3' width='5' height='1' fill='%238e6cf0'/%3E%3Crect x='6' y='3' width='1' height='1' fill='%231b1d4a'/%3E%3Crect x='0' y='4' width='1' height='1' fill='%231b1d4a'/%3E%3Crect x='1' y='4' width='5' height='1' fill='%238e6cf0'/%3E%3Crect x='6' y='4' width='1' height='1' fill='%231b1d4a'/%3E%3Crect x='0' y='5' width='1' height='1' fill='%231b1d4a'/%3E%3Crect x='1' y='5' width='5' height='1' fill='%238e6cf0'/%3E%3Crect x='6' y='5' width='1' height='1' fill='%231b1d4a'/%3E%3Crect x='1' y='6' width='5' height='1' fill='%231b1d4a'/%3E%3C/svg%3E");
  --fr-chip-gold: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='7' height='7' shape-rendering='crispEdges'%3E%3Crect x='1' y='0' width='5' height='1' fill='%231b1d4a'/%3E%3Crect x='0' y='1' width='1' height='1' fill='%231b1d4a'/%3E%3Crect x='1' y='1' width='5' height='1' fill='%23ffd84a'/%3E%3Crect x='6' y='1' width='1' height='1' fill='%231b1d4a'/%3E%3Crect x='0' y='2' width='1' height='1' fill='%231b1d4a'/%3E%3Crect x='1' y='2' width='5' height='1' fill='%23ffd84a'/%3E%3Crect x='6' y='2' width='1' height='1' fill='%231b1d4a'/%3E%3Crect x='0' y='3' width='1' height='1' fill='%231b1d4a'/%3E%3Crect x='1' y='3' width='5' height='1' fill='%23ffd84a'/%3E%3Crect x='6' y='3' width='1' height='1' fill='%231b1d4a'/%3E%3Crect x='0' y='4' width='1' height='1' fill='%231b1d4a'/%3E%3Crect x='1' y='4' width='5' height='1' fill='%23ffd84a'/%3E%3Crect x='6' y='4' width='1' height='1' fill='%231b1d4a'/%3E%3Crect x='0' y='5' width='1' height='1' fill='%231b1d4a'/%3E%3Crect x='1' y='5' width='5' height='1' fill='%23ffd84a'/%3E%3Crect x='6' y='5' width='1' height='1' fill='%231b1d4a'/%3E%3Crect x='1' y='6' width='5' height='1' fill='%231b1d4a'/%3E%3C/svg%3E");
  --fr-chip-cyan: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='7' height='7' shape-rendering='crispEdges'%3E%3Crect x='1' y='0' width='5' height='1' fill='%231b1d4a'/%3E%3Crect x='0' y='1' width='1' height='1' fill='%231b1d4a'/%3E%3Crect x='1' y='1' width='5' height='1' fill='%238ed6f5'/%3E%3Crect x='6' y='1' width='1' height='1' fill='%231b1d4a'/%3E%3Crect x='0' y='2' width='1' height='1' fill='%231b1d4a'/%3E%3Crect x='1' y='2' width='5' height='1' fill='%238ed6f5'/%3E%3Crect x='6' y='2' width='1' height='1' fill='%231b1d4a'/%3E%3Crect x='0' y='3' width='1' height='1' fill='%231b1d4a'/%3E%3Crect x='1' y='3' width='5' height='1' fill='%238ed6f5'/%3E%3Crect x='6' y='3' width='1' height='1' fill='%231b1d4a'/%3E%3Crect x='0' y='4' width='1' height='1' fill='%231b1d4a'/%3E%3Crect x='1' y='4' width='5' height='1' fill='%238ed6f5'/%3E%3Crect x='6' y='4' width='1' height='1' fill='%231b1d4a'/%3E%3Crect x='0' y='5' width='1' height='1' fill='%231b1d4a'/%3E%3Crect x='1' y='5' width='5' height='1' fill='%238ed6f5'/%3E%3Crect x='6' y='5' width='1' height='1' fill='%231b1d4a'/%3E%3Crect x='1' y='6' width='5' height='1' fill='%231b1d4a'/%3E%3C/svg%3E");
  --fr-chip-deep: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='7' height='7' shape-rendering='crispEdges'%3E%3Crect x='1' y='0' width='5' height='1' fill='%231b1d4a'/%3E%3Crect x='0' y='1' width='1' height='1' fill='%231b1d4a'/%3E%3Crect x='1' y='1' width='5' height='1' fill='%230e0f26'/%3E%3Crect x='6' y='1' width='1' height='1' fill='%231b1d4a'/%3E%3Crect x='0' y='2' width='1' height='1' fill='%231b1d4a'/%3E%3Crect x='1' y='2' width='5' height='1' fill='%230e0f26'/%3E%3Crect x='6' y='2' width='1' height='1' fill='%231b1d4a'/%3E%3Crect x='0' y='3' width='1' height='1' fill='%231b1d4a'/%3E%3Crect x='1' y='3' width='5' height='1' fill='%230e0f26'/%3E%3Crect x='6' y='3' width='1' height='1' fill='%231b1d4a'/%3E%3Crect x='0' y='4' width='1' height='1' fill='%231b1d4a'/%3E%3Crect x='1' y='4' width='5' height='1' fill='%230e0f26'/%3E%3Crect x='6' y='4' width='1' height='1' fill='%231b1d4a'/%3E%3Crect x='0' y='5' width='1' height='1' fill='%231b1d4a'/%3E%3Crect x='1' y='5' width='5' height='1' fill='%230e0f26'/%3E%3Crect x='6' y='5' width='1' height='1' fill='%231b1d4a'/%3E%3Crect x='1' y='6' width='5' height='1' fill='%231b1d4a'/%3E%3C/svg%3E");
  --ico-ai: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='9' height='9' shape-rendering='crispEdges'%3E%3Crect x='4' y='0' width='1' height='1' fill='%231b1d4a'/%3E%3Crect x='4' y='1' width='1' height='1' fill='%231b1d4a'/%3E%3Crect x='1' y='2' width='7' height='1' fill='%231b1d4a'/%3E%3Crect x='0' y='3' width='1' height='1' fill='%231b1d4a'/%3E%3Crect x='8' y='3' width='1' height='1' fill='%231b1d4a'/%3E%3Crect x='0' y='4' width='1' height='1' fill='%231b1d4a'/%3E%3Crect x='2' y='4' width='2' height='1' fill='%231b1d4a'/%3E%3Crect x='5' y='4' width='2' height='1' fill='%231b1d4a'/%3E%3Crect x='8' y='4' width='1' height='1' fill='%231b1d4a'/%3E%3Crect x='0' y='5' width='1' height='1' fill='%231b1d4a'/%3E%3Crect x='2' y='5' width='2' height='1' fill='%231b1d4a'/%3E%3Crect x='5' y='5' width='2' height='1' fill='%231b1d4a'/%3E%3Crect x='8' y='5' width='1' height='1' fill='%231b1d4a'/%3E%3Crect x='0' y='6' width='1' height='1' fill='%231b1d4a'/%3E%3Crect x='8' y='6' width='1' height='1' fill='%231b1d4a'/%3E%3Crect x='0' y='7' width='1' height='1' fill='%231b1d4a'/%3E%3Crect x='3' y='7' width='3' height='1' fill='%231b1d4a'/%3E%3Crect x='8' y='7' width='1' height='1' fill='%231b1d4a'/%3E%3Crect x='1' y='8' width='7' height='1' fill='%231b1d4a'/%3E%3C/svg%3E");
  --ico-1v1: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='9' height='9' shape-rendering='crispEdges'%3E%3Crect x='1' y='0' width='2' height='1' fill='%231b1d4a'/%3E%3Crect x='6' y='0' width='2' height='1' fill='%231b1d4a'/%3E%3Crect x='0' y='1' width='4' height='1' fill='%231b1d4a'/%3E%3Crect x='5' y='1' width='4' height='1' fill='%231b1d4a'/%3E%3Crect x='0' y='2' width='4' height='1' fill='%231b1d4a'/%3E%3Crect x='5' y='2' width='4' height='1' fill='%231b1d4a'/%3E%3Crect x='1' y='3' width='2' height='1' fill='%231b1d4a'/%3E%3Crect x='6' y='3' width='2' height='1' fill='%231b1d4a'/%3E%3Crect x='1' y='5' width='2' height='1' fill='%231b1d4a'/%3E%3Crect x='6' y='5' width='2' height='1' fill='%231b1d4a'/%3E%3Crect x='0' y='6' width='4' height='1' fill='%231b1d4a'/%3E%3Crect x='5' y='6' width='4' height='1' fill='%231b1d4a'/%3E%3Crect x='0' y='7' width='4' height='1' fill='%231b1d4a'/%3E%3Crect x='5' y='7' width='4' height='1' fill='%231b1d4a'/%3E%3Crect x='0' y='8' width='4' height='1' fill='%231b1d4a'/%3E%3Crect x='5' y='8' width='4' height='1' fill='%231b1d4a'/%3E%3C/svg%3E");
  --ico-2v2: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='11' height='9' shape-rendering='crispEdges'%3E%3Crect x='0' y='0' width='2' height='1' fill='%231b1d4a'/%3E%3Crect x='3' y='0' width='2' height='1' fill='%231b1d4a'/%3E%3Crect x='6' y='0' width='2' height='1' fill='%231b1d4a'/%3E%3Crect x='9' y='0' width='2' height='1' fill='%231b1d4a'/%3E%3Crect x='0' y='1' width='2' height='1' fill='%231b1d4a'/%3E%3Crect x='3' y='1' width='2' height='1' fill='%231b1d4a'/%3E%3Crect x='6' y='1' width='2' height='1' fill='%231b1d4a'/%3E%3Crect x='9' y='1' width='2' height='1' fill='%231b1d4a'/%3E%3Crect x='0' y='3' width='2' height='1' fill='%231b1d4a'/%3E%3Crect x='3' y='3' width='2' height='1' fill='%231b1d4a'/%3E%3Crect x='6' y='3' width='2' height='1' fill='%231b1d4a'/%3E%3Crect x='9' y='3' width='2' height='1' fill='%231b1d4a'/%3E%3Crect x='0' y='4' width='2' height='1' fill='%231b1d4a'/%3E%3Crect x='3' y='4' width='2' height='1' fill='%231b1d4a'/%3E%3Crect x='6' y='4' width='2' height='1' fill='%231b1d4a'/%3E%3Crect x='9' y='4' width='2' height='1' fill='%231b1d4a'/%3E%3Crect x='0' y='5' width='2' height='1' fill='%231b1d4a'/%3E%3Crect x='3' y='5' width='2' height='1' fill='%231b1d4a'/%3E%3Crect x='6' y='5' width='2' height='1' fill='%231b1d4a'/%3E%3Crect x='9' y='5' width='2' height='1' fill='%231b1d4a'/%3E%3C/svg%3E");
  --ico-sound: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='9' height='9' shape-rendering='crispEdges'%3E%3Crect x='3' y='0' width='1' height='1' fill='%231b1d4a'/%3E%3Crect x='2' y='1' width='2' height='1' fill='%231b1d4a'/%3E%3Crect x='7' y='1' width='1' height='1' fill='%231b1d4a'/%3E%3Crect x='0' y='2' width='4' height='1' fill='%231b1d4a'/%3E%3Crect x='5' y='2' width='1' height='1' fill='%231b1d4a'/%3E%3Crect x='8' y='2' width='1' height='1' fill='%231b1d4a'/%3E%3Crect x='0' y='3' width='4' height='1' fill='%231b1d4a'/%3E%3Crect x='6' y='3' width='1' height='1' fill='%231b1d4a'/%3E%3Crect x='8' y='3' width='1' height='1' fill='%231b1d4a'/%3E%3Crect x='0' y='4' width='4' height='1' fill='%231b1d4a'/%3E%3Crect x='6' y='4' width='1' height='1' fill='%231b1d4a'/%3E%3Crect x='8' y='4' width='1' height='1' fill='%231b1d4a'/%3E%3Crect x='0' y='5' width='4' height='1' fill='%231b1d4a'/%3E%3Crect x='5' y='5' width='1' height='1' fill='%231b1d4a'/%3E%3Crect x='8' y='5' width='1' height='1' fill='%231b1d4a'/%3E%3Crect x='2' y='6' width='2' height='1' fill='%231b1d4a'/%3E%3Crect x='7' y='6' width='1' height='1' fill='%231b1d4a'/%3E%3Crect x='3' y='7' width='1' height='1' fill='%231b1d4a'/%3E%3C/svg%3E");
  --ico-mute: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='9' height='9' shape-rendering='crispEdges'%3E%3Crect x='3' y='0' width='1' height='1' fill='%231b1d4a'/%3E%3Crect x='2' y='1' width='2' height='1' fill='%231b1d4a'/%3E%3Crect x='0' y='2' width='4' height='1' fill='%231b1d4a'/%3E%3Crect x='5' y='2' width='1' height='1' fill='%231b1d4a'/%3E%3Crect x='8' y='2' width='1' height='1' fill='%231b1d4a'/%3E%3Crect x='0' y='3' width='4' height='1' fill='%231b1d4a'/%3E%3Crect x='6' y='3' width='2' height='1' fill='%231b1d4a'/%3E%3Crect x='0' y='4' width='4' height='1' fill='%231b1d4a'/%3E%3Crect x='6' y='4' width='2' height='1' fill='%231b1d4a'/%3E%3Crect x='0' y='5' width='4' height='1' fill='%231b1d4a'/%3E%3Crect x='5' y='5' width='1' height='1' fill='%231b1d4a'/%3E%3Crect x='8' y='5' width='1' height='1' fill='%231b1d4a'/%3E%3Crect x='2' y='6' width='2' height='1' fill='%231b1d4a'/%3E%3Crect x='3' y='7' width='1' height='1' fill='%231b1d4a'/%3E%3C/svg%3E");
  --ico-help: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='7' height='7' shape-rendering='crispEdges'%3E%3Crect x='1' y='0' width='5' height='1' fill='%231b1d4a'/%3E%3Crect x='0' y='1' width='2' height='1' fill='%231b1d4a'/%3E%3Crect x='5' y='1' width='2' height='1' fill='%231b1d4a'/%3E%3Crect x='4' y='2' width='2' height='1' fill='%231b1d4a'/%3E%3Crect x='3' y='3' width='2' height='1' fill='%231b1d4a'/%3E%3Crect x='3' y='4' width='2' height='1' fill='%231b1d4a'/%3E%3Crect x='3' y='6' width='2' height='1' fill='%231b1d4a'/%3E%3C/svg%3E");
  --ico-big: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='9' height='9' shape-rendering='crispEdges'%3E%3Crect x='3' y='0' width='3' height='1' fill='%23ffffff'/%3E%3Crect x='2' y='1' width='1' height='1' fill='%23ffffff'/%3E%3Crect x='6' y='1' width='1' height='1' fill='%23ffffff'/%3E%3Crect x='1' y='2' width='1' height='1' fill='%23ffffff'/%3E%3Crect x='7' y='2' width='1' height='1' fill='%23ffffff'/%3E%3Crect x='1' y='3' width='1' height='1' fill='%23ffffff'/%3E%3Crect x='7' y='3' width='1' height='1' fill='%23ffffff'/%3E%3Crect x='2' y='4' width='1' height='1' fill='%23ffffff'/%3E%3Crect x='6' y='4' width='1' height='1' fill='%23ffffff'/%3E%3Crect x='3' y='5' width='3' height='1' fill='%23ffffff'/%3E%3Crect x='4' y='6' width='1' height='1' fill='%23ffffff'/%3E%3Crect x='4' y='7' width='1' height='1' fill='%23ffffff'/%3E%3Crect x='4' y='8' width='1' height='1' fill='%23ffffff'/%3E%3C/svg%3E");
  --ico-fast: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='9' height='9' shape-rendering='crispEdges'%3E%3Crect x='4' y='0' width='2' height='1' fill='%23ffffff'/%3E%3Crect x='3' y='1' width='2' height='1' fill='%23ffffff'/%3E%3Crect x='2' y='2' width='2' height='1' fill='%23ffffff'/%3E%3Crect x='1' y='3' width='6' height='1' fill='%23ffffff'/%3E%3Crect x='4' y='4' width='2' height='1' fill='%23ffffff'/%3E%3Crect x='3' y='5' width='2' height='1' fill='%23ffffff'/%3E%3Crect x='2' y='6' width='2' height='1' fill='%23ffffff'/%3E%3Crect x='1' y='7' width='2' height='1' fill='%23ffffff'/%3E%3C/svg%3E");
  --ico-slow: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='9' height='9' shape-rendering='crispEdges'%3E%3Crect x='4' y='0' width='1' height='1' fill='%23ffffff'/%3E%3Crect x='3' y='1' width='3' height='1' fill='%23ffffff'/%3E%3Crect x='2' y='2' width='5' height='1' fill='%23ffffff'/%3E%3Crect x='1' y='3' width='7' height='1' fill='%23ffffff'/%3E%3Crect x='1' y='4' width='7' height='1' fill='%23ffffff'/%3E%3Crect x='1' y='5' width='7' height='1' fill='%23ffffff'/%3E%3Crect x='2' y='6' width='5' height='1' fill='%23ffffff'/%3E%3Crect x='3' y='7' width='3' height='1' fill='%23ffffff'/%3E%3C/svg%3E");
  --ico-wide: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='9' height='9' shape-rendering='crispEdges'%3E%3Crect x='0' y='2' width='1' height='1' fill='%23ffffff'/%3E%3Crect x='8' y='2' width='1' height='1' fill='%23ffffff'/%3E%3Crect x='0' y='3' width='2' height='1' fill='%23ffffff'/%3E%3Crect x='7' y='3' width='2' height='1' fill='%23ffffff'/%3E%3Crect x='0' y='4' width='9' height='1' fill='%23ffffff'/%3E%3Crect x='0' y='5' width='2' height='1' fill='%23ffffff'/%3E%3Crect x='7' y='5' width='2' height='1' fill='%23ffffff'/%3E%3Crect x='0' y='6' width='1' height='1' fill='%23ffffff'/%3E%3Crect x='8' y='6' width='1' height='1' fill='%23ffffff'/%3E%3C/svg%3E");
  --ico-fire: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='9' height='9' shape-rendering='crispEdges'%3E%3Crect x='4' y='0' width='1' height='1' fill='%23ffffff'/%3E%3Crect x='3' y='1' width='2' height='1' fill='%23ffffff'/%3E%3Crect x='3' y='2' width='3' height='1' fill='%23ffffff'/%3E%3Crect x='2' y='3' width='4' height='1' fill='%23ffffff'/%3E%3Crect x='7' y='3' width='1' height='1' fill='%23ffffff'/%3E%3Crect x='1' y='4' width='7' height='1' fill='%23ffffff'/%3E%3Crect x='1' y='5' width='3' height='1' fill='%23ffffff'/%3E%3Crect x='5' y='5' width='3' height='1' fill='%23ffffff'/%3E%3Crect x='1' y='6' width='2' height='1' fill='%23ffffff'/%3E%3Crect x='6' y='6' width='2' height='1' fill='%23ffffff'/%3E%3Crect x='2' y='7' width='2' height='1' fill='%23ffffff'/%3E%3Crect x='5' y='7' width='2' height='1' fill='%23ffffff'/%3E%3Crect x='3' y='8' width='3' height='1' fill='%23ffffff'/%3E%3C/svg%3E");
  --ico-tiny: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='9' height='9' shape-rendering='crispEdges'%3E%3Crect x='3' y='2' width='3' height='1' fill='%23ffffff'/%3E%3Crect x='2' y='3' width='1' height='1' fill='%23ffffff'/%3E%3Crect x='6' y='3' width='1' height='1' fill='%23ffffff'/%3E%3Crect x='2' y='4' width='1' height='1' fill='%23ffffff'/%3E%3Crect x='6' y='4' width='1' height='1' fill='%23ffffff'/%3E%3Crect x='3' y='5' width='3' height='1' fill='%23ffffff'/%3E%3Crect x='4' y='6' width='1' height='1' fill='%23ffffff'/%3E%3Crect x='4' y='7' width='1' height='1' fill='%23ffffff'/%3E%3C/svg%3E");
  --arrow: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='6' height='9' shape-rendering='crispEdges'%3E%3Crect x='0' y='0' width='2' height='1' fill='%231b1d4a'/%3E%3Crect x='0' y='1' width='1' height='1' fill='%231b1d4a'/%3E%3Crect x='1' y='1' width='1' height='1' fill='%23ffffff'/%3E%3Crect x='2' y='1' width='1' height='1' fill='%231b1d4a'/%3E%3Crect x='0' y='2' width='1' height='1' fill='%231b1d4a'/%3E%3Crect x='1' y='2' width='2' height='1' fill='%23ffffff'/%3E%3Crect x='3' y='2' width='1' height='1' fill='%231b1d4a'/%3E%3Crect x='0' y='3' width='1' height='1' fill='%231b1d4a'/%3E%3Crect x='1' y='3' width='3' height='1' fill='%23ffffff'/%3E%3Crect x='4' y='3' width='1' height='1' fill='%231b1d4a'/%3E%3Crect x='0' y='4' width='1' height='1' fill='%231b1d4a'/%3E%3Crect x='1' y='4' width='4' height='1' fill='%23ffffff'/%3E%3Crect x='5' y='4' width='1' height='1' fill='%231b1d4a'/%3E%3Crect x='0' y='5' width='1' height='1' fill='%231b1d4a'/%3E%3Crect x='1' y='5' width='3' height='1' fill='%23ffffff'/%3E%3Crect x='4' y='5' width='1' height='1' fill='%231b1d4a'/%3E%3Crect x='0' y='6' width='1' height='1' fill='%231b1d4a'/%3E%3Crect x='1' y='6' width='2' height='1' fill='%23ffffff'/%3E%3Crect x='3' y='6' width='1' height='1' fill='%231b1d4a'/%3E%3Crect x='0' y='7' width='1' height='1' fill='%231b1d4a'/%3E%3Crect x='1' y='7' width='1' height='1' fill='%23ffffff'/%3E%3Crect x='2' y='7' width='1' height='1' fill='%231b1d4a'/%3E%3Crect x='0' y='8' width='2' height='1' fill='%231b1d4a'/%3E%3C/svg%3E");
  --pause: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='5' height='5' shape-rendering='crispEdges'%3E%3Crect x='0' y='0' width='2' height='1' fill='%231b1d4a'/%3E%3Crect x='3' y='0' width='2' height='1' fill='%231b1d4a'/%3E%3Crect x='0' y='1' width='2' height='1' fill='%231b1d4a'/%3E%3Crect x='3' y='1' width='2' height='1' fill='%231b1d4a'/%3E%3Crect x='0' y='2' width='2' height='1' fill='%231b1d4a'/%3E%3Crect x='3' y='2' width='2' height='1' fill='%231b1d4a'/%3E%3Crect x='0' y='3' width='2' height='1' fill='%231b1d4a'/%3E%3Crect x='3' y='3' width='2' height='1' fill='%231b1d4a'/%3E%3Crect x='0' y='4' width='2' height='1' fill='%231b1d4a'/%3E%3Crect x='3' y='4' width='2' height='1' fill='%231b1d4a'/%3E%3C/svg%3E");
  --pixel-ball: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='11' height='11' shape-rendering='crispEdges'%3E%3Crect x='3' y='0' width='5' height='1' fill='%231b1d4a'/%3E%3Crect x='2' y='1' width='1' height='1' fill='%231b1d4a'/%3E%3Crect x='3' y='1' width='2' height='1' fill='%23f6ffc0'/%3E%3Crect x='5' y='1' width='3' height='1' fill='%23d6ee4f'/%3E%3Crect x='8' y='1' width='1' height='1' fill='%231b1d4a'/%3E%3Crect x='1' y='2' width='1' height='1' fill='%231b1d4a'/%3E%3Crect x='2' y='2' width='2' height='1' fill='%23f6ffc0'/%3E%3Crect x='4' y='2' width='5' height='1' fill='%23d6ee4f'/%3E%3Crect x='9' y='2' width='1' height='1' fill='%231b1d4a'/%3E%3Crect x='0' y='3' width='1' height='1' fill='%231b1d4a'/%3E%3Crect x='1' y='3' width='1' height='1' fill='%23f6ffc0'/%3E%3Crect x='2' y='3' width='3' height='1' fill='%23d6ee4f'/%3E%3Crect x='5' y='3' width='1' height='1' fill='%23fbfde8'/%3E%3Crect x='6' y='3' width='4' height='1' fill='%23d6ee4f'/%3E%3Crect x='10' y='3' width='1' height='1' fill='%231b1d4a'/%3E%3Crect x='0' y='4' width='1' height='1' fill='%231b1d4a'/%3E%3Crect x='1' y='4' width='3' height='1' fill='%23d6ee4f'/%3E%3Crect x='4' y='4' width='1' height='1' fill='%23fbfde8'/%3E%3Crect x='5' y='4' width='4' height='1' fill='%23d6ee4f'/%3E%3Crect x='9' y='4' width='1' height='1' fill='%23a6c234'/%3E%3Crect x='10' y='4' width='1' height='1' fill='%231b1d4a'/%3E%3Crect x='0' y='5' width='1' height='1' fill='%231b1d4a'/%3E%3Crect x='1' y='5' width='3' height='1' fill='%23d6ee4f'/%3E%3Crect x='4' y='5' width='1' height='1' fill='%23fbfde8'/%3E%3Crect x='5' y='5' width='4' height='1' fill='%23d6ee4f'/%3E%3Crect x='9' y='5' width='1' height='1' fill='%23a6c234'/%3E%3Crect x='10' y='5' width='1' height='1' fill='%231b1d4a'/%3E%3Crect x='0' y='6' width='1' height='1' fill='%231b1d4a'/%3E%3Crect x='1' y='6' width='4' height='1' fill='%23d6ee4f'/%3E%3Crect x='5' y='6' width='1' height='1' fill='%23fbfde8'/%3E%3Crect x='6' y='6' width='2' height='1' fill='%23d6ee4f'/%3E%3Crect x='8' y='6' width='2' height='1' fill='%23a6c234'/%3E%3Crect x='10' y='6' width='1' height='1' fill='%231b1d4a'/%3E%3Crect x='0' y='7' width='1' height='1' fill='%231b1d4a'/%3E%3Crect x='1' y='7' width='5' height='1' fill='%23d6ee4f'/%3E%3Crect x='6' y='7' width='1' height='1' fill='%23fbfde8'/%3E%3Crect x='7' y='7' width='3' height='1' fill='%23a6c234'/%3E%3Crect x='10' y='7' width='1' height='1' fill='%231b1d4a'/%3E%3Crect x='1' y='8' width='1' height='1' fill='%231b1d4a'/%3E%3Crect x='2' y='8' width='3' height='1' fill='%23d6ee4f'/%3E%3Crect x='5' y='8' width='2' height='1' fill='%23a6c234'/%3E%3Crect x='7' y='8' width='1' height='1' fill='%23fbfde8'/%3E%3Crect x='8' y='8' width='1' height='1' fill='%23a6c234'/%3E%3Crect x='9' y='8' width='1' height='1' fill='%231b1d4a'/%3E%3Crect x='2' y='9' width='1' height='1' fill='%231b1d4a'/%3E%3Crect x='3' y='9' width='5' height='1' fill='%23a6c234'/%3E%3Crect x='8' y='9' width='1' height='1' fill='%231b1d4a'/%3E%3Crect x='3' y='10' width='5' height='1' fill='%231b1d4a'/%3E%3C/svg%3E");
  --knob: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' shape-rendering='crispEdges'%3E%3Crect x='4' y='0' width='6' height='1' fill='%231b1d4a'/%3E%3Crect x='2' y='1' width='2' height='1' fill='%231b1d4a'/%3E%3Crect x='4' y='1' width='6' height='1' fill='%23d4f2ff'/%3E%3Crect x='10' y='1' width='2' height='1' fill='%231b1d4a'/%3E%3Crect x='1' y='2' width='1' height='1' fill='%231b1d4a'/%3E%3Crect x='2' y='2' width='9' height='1' fill='%23d4f2ff'/%3E%3Crect x='11' y='2' width='1' height='1' fill='%238ed6f5'/%3E%3Crect x='12' y='2' width='1' height='1' fill='%231b1d4a'/%3E%3Crect x='1' y='3' width='1' height='1' fill='%231b1d4a'/%3E%3Crect x='2' y='3' width='8' height='1' fill='%23d4f2ff'/%3E%3Crect x='10' y='3' width='2' height='1' fill='%238ed6f5'/%3E%3Crect x='12' y='3' width='1' height='1' fill='%231b1d4a'/%3E%3Crect x='0' y='4' width='1' height='1' fill='%231b1d4a'/%3E%3Crect x='1' y='4' width='9' height='1' fill='%23d4f2ff'/%3E%3Crect x='10' y='4' width='3' height='1' fill='%238ed6f5'/%3E%3Crect x='13' y='4' width='1' height='1' fill='%231b1d4a'/%3E%3Crect x='0' y='5' width='1' height='1' fill='%231b1d4a'/%3E%3Crect x='1' y='5' width='8' height='1' fill='%23d4f2ff'/%3E%3Crect x='9' y='5' width='4' height='1' fill='%238ed6f5'/%3E%3Crect x='13' y='5' width='1' height='1' fill='%231b1d4a'/%3E%3Crect x='0' y='6' width='1' height='1' fill='%231b1d4a'/%3E%3Crect x='1' y='6' width='7' height='1' fill='%23d4f2ff'/%3E%3Crect x='8' y='6' width='5' height='1' fill='%238ed6f5'/%3E%3Crect x='13' y='6' width='1' height='1' fill='%231b1d4a'/%3E%3Crect x='0' y='7' width='1' height='1' fill='%231b1d4a'/%3E%3Crect x='1' y='7' width='6' height='1' fill='%23d4f2ff'/%3E%3Crect x='7' y='7' width='5' height='1' fill='%238ed6f5'/%3E%3Crect x='12' y='7' width='1' height='1' fill='%2355a9de'/%3E%3Crect x='13' y='7' width='1' height='1' fill='%231b1d4a'/%3E%3Crect x='0' y='8' width='1' height='1' fill='%231b1d4a'/%3E%3Crect x='1' y='8' width='5' height='1' fill='%23d4f2ff'/%3E%3Crect x='6' y='8' width='6' height='1' fill='%238ed6f5'/%3E%3Crect x='12' y='8' width='1' height='1' fill='%2355a9de'/%3E%3Crect x='13' y='8' width='1' height='1' fill='%231b1d4a'/%3E%3Crect x='0' y='9' width='1' height='1' fill='%231b1d4a'/%3E%3Crect x='1' y='9' width='3' height='1' fill='%23d4f2ff'/%3E%3Crect x='4' y='9' width='7' height='1' fill='%238ed6f5'/%3E%3Crect x='11' y='9' width='2' height='1' fill='%2355a9de'/%3E%3Crect x='13' y='9' width='1' height='1' fill='%231b1d4a'/%3E%3Crect x='1' y='10' width='1' height='1' fill='%231b1d4a'/%3E%3Crect x='2' y='10' width='8' height='1' fill='%238ed6f5'/%3E%3Crect x='10' y='10' width='2' height='1' fill='%2355a9de'/%3E%3Crect x='12' y='10' width='1' height='1' fill='%231b1d4a'/%3E%3Crect x='1' y='11' width='1' height='1' fill='%231b1d4a'/%3E%3Crect x='2' y='11' width='7' height='1' fill='%238ed6f5'/%3E%3Crect x='9' y='11' width='3' height='1' fill='%2355a9de'/%3E%3Crect x='12' y='11' width='1' height='1' fill='%231b1d4a'/%3E%3Crect x='2' y='12' width='2' height='1' fill='%231b1d4a'/%3E%3Crect x='4' y='12' width='6' height='1' fill='%2355a9de'/%3E%3Crect x='10' y='12' width='2' height='1' fill='%231b1d4a'/%3E%3Crect x='4' y='13' width='6' height='1' fill='%231b1d4a'/%3E%3C/svg%3E");
  --specks: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='48' height='48' shape-rendering='crispEdges'%3E%3Crect x='5' y='7' width='1' height='1' fill='%23ffffff' fill-opacity='0.45'/%3E%3Crect x='19' y='3' width='1' height='1' fill='%23ffffff' fill-opacity='0.45'/%3E%3Crect x='33' y='11' width='1' height='1' fill='%23ffffff' fill-opacity='0.45'/%3E%3Crect x='42' y='30' width='1' height='1' fill='%23ffffff' fill-opacity='0.45'/%3E%3Crect x='11' y='25' width='1' height='1' fill='%23ffffff' fill-opacity='0.45'/%3E%3Crect x='27' y='37' width='1' height='1' fill='%23ffffff' fill-opacity='0.45'/%3E%3Crect x='39' y='44' width='1' height='1' fill='%23ffffff' fill-opacity='0.45'/%3E%3Crect x='2' y='41' width='1' height='1' fill='%23ffffff' fill-opacity='0.45'/%3E%3Crect x='23' y='20' width='1' height='1' fill='%23ffffff' fill-opacity='0.45'/%3E%3Crect x='30' y='24' width='3' height='1' fill='%23ffffff' fill-opacity='0.3'/%3E%3Crect x='31' y='23' width='1' height='3' fill='%23ffffff' fill-opacity='0.3'/%3E%3Crect x='8' y='40' width='3' height='1' fill='%23ffffff' fill-opacity='0.3'/%3E%3Crect x='9' y='39' width='1' height='3' fill='%23ffffff' fill-opacity='0.3'/%3E%3C/svg%3E");
  --joy: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' viewBox='0 0 32 32' shape-rendering='crispEdges'%3E%3Ccircle cx='16.0' cy='16.0' r='14.5' fill='%231b1d4a' fill-opacity='0.25' stroke='%23ffffff' stroke-opacity='0.8' stroke-width='2'/%3E%3C/svg%3E");
  --tap: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 20 20' shape-rendering='crispEdges'%3E%3Ccircle cx='10.0' cy='10.0' r='8.5' fill='%23ffffff' fill-opacity='0.0' stroke='%23ffd84a' stroke-opacity='1' stroke-width='1.5' stroke-dasharray='3 2'/%3E%3C/svg%3E");
}

* {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  height: 100%;
  overflow: hidden;
  background: var(--blue);
  color: #ffffff;
  font-family: var(--font);
  font-size: var(--fs-1);
  line-height: 1.25;
  overscroll-behavior: none;
  -webkit-font-smoothing: none;
}

#app {
  position: fixed;
  inset: 0;
  height: 100vh;
  height: 100dvh;
  overflow: hidden;
  touch-action: none;
  user-select: none;
  -webkit-user-select: none;
  -webkit-touch-callout: none;
  -webkit-tap-highlight-color: transparent;
}

#game {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  image-rendering: pixelated;
}

#touch-layer {
  position: absolute;
  inset: 0;
  z-index: 1;
  touch-action: none;
}

#hud {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
}

#ui {
  position: absolute;
  inset: 0;
  z-index: 3;
  pointer-events: none;
}

#safe-probe {
  position: absolute;
  visibility: hidden;
  pointer-events: none;
  padding: var(--safe-top) var(--safe-right) var(--safe-bottom) var(--safe-left);
}

/* ---------- pixel lettering ---------- */

.pt {
  display: block;
  flex: none;
  width: calc(var(--w, 1) * var(--p) * var(--k, 1));
  height: calc(var(--h, 1) * var(--p) * var(--k, 1));
  image-rendering: pixelated;
  image-rendering: crisp-edges;
  image-rendering: pixelated;
}

/* ---------- screens ---------- */

.screen {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: calc(16px + var(--safe-top)) calc(16px + var(--safe-right)) calc(16px + var(--safe-bottom)) calc(16px + var(--safe-left));
  pointer-events: auto;
  overflow-y: auto;
  touch-action: pan-y;
  animation: fade-in 0.15s steps(3) both;
}

.screen.solid {
  background: var(--blue);
  isolation: isolate;
}

/* The drifting speck layer: one tile bigger than the view, moved by the app every frame. */
.menu-bg {
  position: fixed;
  top: calc(var(--p) * -48);
  left: calc(var(--p) * -48);
  right: 0;
  bottom: 0;
  z-index: -1;
  background: var(--specks) 0 0 / calc(var(--p) * 48) calc(var(--p) * 48) repeat;
  image-rendering: pixelated;
  pointer-events: none;
  will-change: transform;
}

.screen.dim {
  background: rgba(14, 15, 38, 0.55);
}

@keyframes fade-in {
  from {
    opacity: 0;
  }
}

.menu,
.panel {
  width: min(420px, 100%);
  margin: auto;
  display: flex;
  flex-direction: column;
  gap: calc(var(--p) * 4);
  animation: pop-in 0.22s steps(4) both;
}

.menu.wide {
  width: min(620px, 100%);
}

.panel {
  width: min(460px, 100%);
}

.panel {
  border-style: solid;
  border-width: calc(var(--p) * 4);
  border-image: var(--fr-panel) 4 fill / calc(var(--p) * 4) / 0 stretch;
  background: transparent;
  padding: calc(var(--p) * 3) calc(var(--p) * 4) calc(var(--p) * 4);
  filter: drop-shadow(0 calc(var(--p) * 2) 0 rgba(14, 15, 38, 0.6));
}

@keyframes pop-in {
  0% {
    transform: translateY(calc(var(--p) * 6));
    opacity: 0;
  }
  60% {
    transform: translateY(calc(var(--p) * -1));
    opacity: 1;
  }
}

.brand {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: calc(var(--p) * 3);
  margin: calc(var(--p) * 2) 0 calc(var(--p) * 3);
}

.logo-art {
  --k: 2;
  animation: bob 2.4s steps(1) infinite;
}

@media (min-width: 720px) and (min-height: 700px) {
  .logo-art {
    --k: 3;
  }
}

@keyframes bob {
  50% {
    transform: translateY(calc(var(--p) * -2));
  }
}

h2 {
  margin: 0 0 calc(var(--p) * 2);
  display: flex;
  justify-content: center;
}

h3 {
  margin: 0;
  display: flex;
  justify-content: center;
}

p {
  margin: 0;
}

p,
.muted,
.note,
.lbl,
.keys,
.divider,
.footer-note {
  text-shadow: 0 var(--u1) 0 var(--navy);
}

.muted {
  color: #ffffff;
}

p b,
.muted b {
  color: var(--gold);
  font-weight: 400;
}

.note {
  color: var(--soft);
  text-align: center;
  min-height: 1.25em;
}

.center {
  text-align: center;
}

.lbl {
  color: var(--soft);
  font-size: var(--fs-2);
  line-height: 1;
  text-shadow: 0 var(--u2) 0 var(--navy);
}

.group {
  display: flex;
  flex-direction: column;
  gap: calc(var(--p) * 2);
}

.row {
  display: flex;
  gap: calc(var(--p) * 3);
  align-items: stretch;
}

.row > * {
  flex: 1;
}

.stack {
  display: flex;
  flex-direction: column;
  gap: calc(var(--p) * 3);
}

/* ---------- buttons ---------- */

.btn {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: calc(var(--p) * 3);
  min-height: calc(var(--p) * 16);
  margin: 0;
  padding: 0 calc(var(--p) * 2);
  border-style: solid;
  border-width: calc(var(--p) * 3) calc(var(--p) * 4) calc(var(--p) * 5);
  border-image: var(--fr-b-cyan) 4 fill / calc(var(--p) * 4) / 0 stretch;
  background: transparent;
  font-family: var(--font);
  font-size: var(--fs-1);
  color: var(--navy);
  cursor: pointer;
  touch-action: manipulation;
  outline: none;
  filter: drop-shadow(0 var(--p) 0 rgba(14, 15, 38, 0.55));
}

.btn:hover,
.btn:focus-visible {
  border-image-source: var(--fr-b-white);
}

.btn.primary {
  border-image-source: var(--fr-b-lime);
}

.btn.primary:hover,
.btn.primary:focus-visible {
  border-image-source: var(--fr-b-lime-hi);
}

.btn.on {
  border-image-source: var(--fr-b-gold);
}

.btn.ghost {
  border-image-source: var(--fr-b-navy);
  color: #ffffff;
}

.btn.ghost:hover,
.btn.ghost:focus-visible {
  border-image-source: var(--fr-b-navy-hi);
}

.btn:active:not(:disabled) {
  transform: translateY(var(--p));
  filter: none;
}

.btn:disabled {
  opacity: 0.6;
  cursor: default;
}

/* Keyboard focus: a bobbing pointer beside the button, like a game menu cursor. */
.btn:focus-visible::before {
  content: '';
  position: absolute;
  left: calc(var(--p) * -14);
  top: 50%;
  width: calc(var(--p) * 6);
  height: calc(var(--p) * 9);
  margin-top: calc(var(--p) * -5);
  background: var(--arrow) center / 100% 100% no-repeat;
  image-rendering: pixelated;
  animation: nudge 0.5s steps(1) infinite;
}

.seg .btn:focus-visible::before,
.row .btn:focus-visible::before,
.hud-btn:focus-visible::before {
  display: none;
}

@keyframes nudge {
  50% {
    transform: translateX(calc(var(--p) * 2));
  }
}

.btn.small {
  min-height: calc(var(--p) * 13);
}

.btn.big,
.btn.mode {
  min-height: calc(var(--p) * 20);
}

.btn.mode {
  justify-content: flex-start;
  padding-left: calc(var(--p) * 3);
}

.btn .ico {
  width: calc(var(--p) * 9);
  height: calc(var(--p) * 9);
  background: var(--ico) center / contain no-repeat;
  image-rendering: pixelated;
  flex: none;
}

.btn .ico.wide {
  width: calc(var(--p) * 11);
}

.ico-ai { --ico: var(--ico-ai); }
.ico-1v1 { --ico: var(--ico-1v1); }
.ico-2v2 { --ico: var(--ico-2v2); }
.ico-sound { --ico: var(--ico-sound); }
.ico-mute { --ico: var(--ico-mute); }
.ico-help { --ico: var(--ico-help); }
.ico-big { --ico: var(--ico-big); }
.ico-fast { --ico: var(--ico-fast); }
.ico-slow { --ico: var(--ico-slow); }
.ico-wide { --ico: var(--ico-wide); }
.ico-fire { --ico: var(--ico-fire); }
.ico-tiny { --ico: var(--ico-tiny); }

.btn.small .ico {
  width: calc(var(--p) * 7);
  height: calc(var(--p) * 7);
}

.seg {
  display: flex;
  gap: calc(var(--p) * 2);
}

.seg .btn {
  flex: 1;
  min-height: calc(var(--p) * 14);
  padding: 0 var(--p);
}

/* ---------- fields ---------- */

label.field {
  display: flex;
  flex-direction: column;
  gap: calc(var(--p) * 2);
}

input.text {
  width: 100%;
  min-width: 0;
  border-style: solid;
  border-width: calc(var(--p) * 4) calc(var(--p) * 4) calc(var(--p) * 3);
  border-image: var(--fr-inset) 4 fill / calc(var(--p) * 4) / 0 stretch;
  background: transparent;
  padding: 0 var(--p);
  font-family: var(--font);
  font-size: var(--fs-2);
  line-height: 1;
  color: var(--navy);
  outline: none;
  border-radius: 0;
  -webkit-user-select: text;
  user-select: text;
  filter: drop-shadow(0 var(--p) 0 rgba(14, 15, 38, 0.55));
}

input.text:focus {
  border-image-source: var(--fr-inset-focus);
}

input.text::placeholder {
  color: #9fb1d6;
}

input.code {
  text-align: center;
  letter-spacing: calc(var(--p) * 2);
  text-transform: uppercase;
}

.divider {
  display: flex;
  align-items: center;
  gap: calc(var(--p) * 3);
  color: var(--soft);
  font-size: var(--fs-1);
}

.divider::before,
.divider::after {
  content: '';
  flex: 1;
  height: var(--p);
  background: repeating-linear-gradient(90deg, var(--soft) 0 var(--p), transparent var(--p) calc(var(--p) * 3));
  opacity: 0.6;
}

.error,
.info {
  border-style: solid;
  border-width: calc(var(--p) * 3) calc(var(--p) * 4);
  border-image: var(--fr-error) 4 fill / calc(var(--p) * 4) / 0 stretch;
  background: transparent;
  padding: 0 var(--p);
  color: var(--navy);
  text-align: center;
}

.info {
  border-image-source: var(--fr-info);
}

.footer-note {
  text-align: center;
  color: var(--soft);
  font-size: var(--fs-1);
}

/* ---------- keyboard prompts ---------- */

.keys {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: calc(var(--p) * 3) calc(var(--p) * 7);
  margin-top: calc(var(--p) * 6);
  color: #ffffff;
  font-size: var(--fs-1);
  line-height: 1;
}

.keys > span {
  display: flex;
  align-items: center;
  gap: calc(var(--p) * 2);
}

.kbd {
  display: inline-block;
  border-style: solid;
  border-width: calc(var(--p) * 2) calc(var(--p) * 3) calc(var(--p) * 3);
  border-image: var(--fr-key) 3 fill / calc(var(--p) * 3) / 0 stretch;
  background: transparent;
  padding: 0;
  min-width: calc(var(--p) * 9);
  text-align: center;
  font-size: var(--fs-1);
  line-height: 1;
  color: #ffffff;
  text-shadow: none;
}

@media (hover: none), (pointer: coarse) {
  .keys {
    display: none;
  }
}

/* ---------- how to play ---------- */

.sheet {
  border-style: solid;
  border-width: calc(var(--p) * 4);
  border-image: var(--fr-sheet) 4 fill / calc(var(--p) * 4) / 0 stretch;
  background: transparent;
  padding: calc(var(--p) * 2) calc(var(--p) * 3);
  display: flex;
  flex-direction: column;
  gap: calc(var(--p) * 4);
}

.controls-help {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: calc(var(--p) * 3) calc(var(--p) * 4);
  align-items: center;
  text-shadow: 0 var(--u1) 0 var(--navy);
}

.controls-help .kbd {
  margin: 0 var(--p) 0 0;
}

/* ---------- lobby ---------- */

.room-code {
  display: flex;
  gap: calc(var(--p) * 3);
  align-items: stretch;
}

.code-box {
  flex: 1;
  border-style: solid;
  border-width: calc(var(--p) * 4);
  border-image: var(--fr-sheet) 4 fill / calc(var(--p) * 4) / 0 stretch;
  background: transparent;
  padding: 0 calc(var(--p) * 2) var(--p);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: calc(var(--p) * 2);
}

.teams {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: calc(var(--p) * 3);
}

.team {
  border-style: solid;
  border-width: calc(var(--p) * 4);
  border-image: var(--fr-sheet) 4 fill / calc(var(--p) * 4) / 0 stretch;
  background: transparent;
  padding: 0 calc(var(--p) * 2) calc(var(--p) * 2);
  display: flex;
  flex-direction: column;
  gap: calc(var(--p) * 2);
  min-width: 0;
}

.slot {
  border-style: solid;
  border-width: calc(var(--p) * 4) calc(var(--p) * 4) calc(var(--p) * 3);
  border-image: var(--fr-slot) 4 fill / calc(var(--p) * 4) / 0 stretch;
  background: transparent;
  padding: 0 var(--p);
  display: flex;
  flex-direction: column;
  gap: var(--p);
  min-height: calc(var(--p) * 18);
  justify-content: center;
  min-width: 0;
}

.slot.empty {
  border-image-source: var(--fr-slot-empty);
  color: var(--soft);
  align-items: center;
  text-shadow: 0 var(--u1) 0 var(--navy);
}

.slot .name {
  font-size: var(--fs-2);
  line-height: 1;
  display: flex;
  align-items: center;
  gap: calc(var(--p) * 2);
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  text-shadow: 0 var(--u2) 0 var(--deep);
}

.slot .you {
  border-style: solid;
  border-width: calc(var(--p) * 2);
  border-image: var(--fr-chip-gold) 3 fill / calc(var(--p) * 3) / 0 stretch;
  background: transparent;
  padding: 0;
  font-size: var(--fs-1);
  line-height: 1;
  color: var(--navy);
  text-shadow: none;
  flex: none;
}

.slot .state {
  font-size: var(--fs-1);
  color: var(--soft);
  display: flex;
  align-items: center;
  gap: calc(var(--p) * 2);
}

.state .led {
  width: calc(var(--p) * 3);
  height: calc(var(--p) * 3);
  background: #8592c9;
  display: inline-block;
  flex: none;
}

.state .led.on {
  background: var(--lime);
}

.state .led.off {
  background: var(--danger);
}

.state .ready {
  color: var(--lime);
}

/* ---------- results ---------- */

/* A full-width band with the verdict over the dimmed court, the two sides' creatures around the
   sets in big digits, every set's games as chips, the buttons in one row. */
.screen.result {
  justify-content: center;
  gap: calc(var(--p) * 6);
  padding-left: 0;
  padding-right: 0;
  background: rgba(14, 15, 38, 0.66);
  --ck: 3;
}

.rs-band {
  align-self: stretch;
  display: flex;
  justify-content: center;
  padding: calc(var(--p) * 4) 0 calc(var(--p) * 3);
  background: var(--navy);
  box-shadow: 0 calc(var(--p) * -2) 0 var(--blue-dark), 0 calc(var(--p) * 2) 0 var(--deep);
  animation: rs-band 0.28s steps(4) both;
}

.won .rs-band {
  background: var(--gold);
  box-shadow: 0 calc(var(--p) * -2) 0 #fff4b0, 0 calc(var(--p) * 2) 0 #e39b1f, 0 calc(var(--p) * 4) 0 var(--deep);
}

.rs-title {
  --k: 4;
  animation: rs-pop 0.4s steps(4) 0.15s both;
}

@keyframes rs-band {
  from {
    transform: scaleX(0);
  }
}

@keyframes rs-pop {
  0% {
    transform: scale(0.4);
    opacity: 0;
  }
  70% {
    transform: scale(1.12);
    opacity: 1;
  }
}

.rs-stage {
  display: flex;
  align-items: flex-end;
  justify-content: center;
  gap: calc(var(--p) * 10);
}

.rs-stage.team {
  --ck: 2;
}

.rs-side {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: calc(var(--p) * 3);
  min-width: 0;
}

.rs-crew {
  display: flex;
  align-items: flex-end;
  gap: calc(var(--p) * 2);
}

.rs-char {
  width: calc(var(--w) * var(--p) * var(--ck));
  height: calc(var(--h) * var(--p) * var(--ck));
  image-rendering: pixelated;
  image-rendering: crisp-edges;
  image-rendering: pixelated;
}

.rs-side.win .rs-char {
  animation: rs-hop 0.5s steps(1) infinite;
}

.rs-side.win .rs-char.late {
  animation-delay: -0.25s;
}

@keyframes rs-hop {
  50% {
    transform: translateY(calc(var(--p) * var(--ck) * -3));
  }
}

.rs-name {
  --k: 1;
  max-width: 100%;
}

.rs-score {
  display: flex;
  align-items: center;
  gap: calc(var(--p) * 3);
  padding-bottom: calc(var(--p) * 10);
}

.rs-score .pt {
  --k: 5;
}

.rs-sets {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: calc(var(--p) * 2);
}

.rs-set {
  border-style: solid;
  border-width: calc(var(--p) * 2);
  border-image: var(--fr-chip-deep) 3 fill / calc(var(--p) * 3) / 0 stretch;
  padding: 0 calc(var(--p) * 2);
  font-size: var(--fs-2);
  line-height: 1.2;
  color: var(--soft);
}

.rs-set.up {
  color: var(--gold);
}

.rs-actions {
  display: flex;
  gap: calc(var(--p) * 3);
  width: min(600px, calc(100% - 32px));
}

.rs-actions .btn {
  flex: 1;
  min-height: calc(var(--p) * 18);
}

@media (max-width: 600px), (max-height: 520px) {
  .screen.result {
    gap: calc(var(--p) * 5);
    --ck: 2;
  }
  .rs-stage {
    gap: calc(var(--p) * 5);
  }
  .rs-stage.team {
    --ck: 1;
  }
  .rs-title {
    --k: 3;
  }
  .rs-score .pt {
    --k: 4;
  }
}

@media (max-width: 380px) {
  .rs-title {
    --k: 2;
  }
}

/* ---------- HUD ---------- */

.hud-top {
  position: absolute;
  top: calc(6px + var(--safe-top));
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--p);
}

.scoreboard {
  display: flex;
  align-items: center;
  gap: calc(var(--p) * 2);
  border-style: solid;
  border-width: calc(var(--p) * 2);
  border-image: var(--fr-pill) 3 fill / calc(var(--p) * 3) / 0 stretch;
  background: transparent;
  padding: 0;
  filter: drop-shadow(0 var(--p) 0 rgba(14, 15, 38, 0.45));
  color: #ffffff;
}

.sb-team {
  display: flex;
  align-items: center;
  gap: calc(var(--p) * 2);
  padding: 0 var(--p);
  max-width: 34vw;
  border-style: solid;
  border-width: calc(var(--p) * 2);
  border-image: var(--fr-chip0) 3 fill / calc(var(--p) * 3) / 0 stretch;
  background: transparent;
  line-height: 1;
  color: #ffffff;
  text-shadow: 0 var(--u1) 0 var(--navy);
}

.sb-team.t1 {
  border-image-source: var(--fr-chip1);
  flex-direction: row-reverse;
}

.sb-team .names {
  font-size: var(--fs-1);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.sb-score,
.sb-games,
.sb-sets {
  text-align: center;
  line-height: 1;
}

.sb-score {
  min-width: calc(var(--fs-2) * 1.4);
  font-size: var(--fs-2);
  color: #ffffff;
}

.sb-score.bump {
  animation: bump 0.36s steps(3);
}

@keyframes bump {
  40% {
    transform: translateY(calc(var(--p) * -2));
  }
}

.sb-score.adv {
  color: var(--gold);
}

.sb-mid {
  width: var(--p);
  align-self: stretch;
  background: repeating-linear-gradient(#4b4f8a 0 var(--p), transparent var(--p) calc(var(--p) * 2));
}

.sb-games {
  min-width: calc(var(--fs-1) * 1.2);
  font-size: var(--fs-1);
  border-style: solid;
  border-width: calc(var(--p) * 2);
  border-image: var(--fr-chip-cyan) 3 fill / calc(var(--p) * 3) / 0 stretch;
  background: transparent;
  padding: 0;
  color: var(--navy);
}

.sb-sets {
  min-width: var(--fs-1);
  font-size: var(--fs-1);
  border-style: solid;
  border-width: calc(var(--p) * 2);
  border-image: var(--fr-chip-deep) 3 fill / calc(var(--p) * 3) / 0 stretch;
  background: transparent;
  padding: 0;
  color: var(--gold);
}

/* Active power-ups: a chip per power-up in the team's color, seconds left in gold. */
.fx-list {
  display: flex;
  flex-wrap: wrap;
  gap: var(--p);
  max-width: 70vw;
}

.fx {
  display: flex;
  align-items: center;
  gap: var(--p);
  border-style: solid;
  border-width: calc(var(--p) * 2);
  border-image: var(--fr-chip0) 3 fill / calc(var(--p) * 3) / 0 stretch;
  background: transparent;
  padding: 0 var(--p);
  font-size: var(--fs-1);
  line-height: 1;
  color: #ffffff;
  text-shadow: 0 var(--u1) 0 var(--navy);
  white-space: nowrap;
}

.fx.t1 {
  border-image-source: var(--fr-chip1);
}

.fx b {
  font-weight: 400;
  color: var(--gold);
}

.fx .ico {
  width: calc(var(--p) * 6);
  height: calc(var(--p) * 6);
  background: var(--ico) center / contain no-repeat;
  image-rendering: pixelated;
  flex: none;
}

.fx.blink {
  animation: blink 0.3s steps(1) infinite;
}

@keyframes blink {
  50% {
    opacity: 0.2;
  }
}

.serve-ball {
  width: calc(var(--p) * 5);
  height: calc(var(--p) * 5);
  background: var(--pixel-ball) center / 100% 100% no-repeat;
  image-rendering: pixelated;
  flex: none;
  visibility: hidden;
}

.serve-ball.on {
  visibility: visible;
}

.format,
.pill,
.hint,
.toast,
.status-overlay,
.banner .small {
  border-style: solid;
  border-width: calc(var(--p) * 2);
  border-image: var(--fr-pill) 3 fill / calc(var(--p) * 3) / 0 stretch;
  background: transparent;
  color: #ffffff;
  line-height: 1;
}

.format {
  font-size: var(--fs-1);
  padding: 0 var(--p);
  white-space: nowrap;
}

.hud-btn {
  position: absolute;
  top: calc(8px + var(--safe-top));
  left: calc(8px + var(--safe-left));
  width: calc(var(--p) * 16);
  height: calc(var(--p) * 17);
  border-style: solid;
  border-width: calc(var(--p) * 3) calc(var(--p) * 4) calc(var(--p) * 5);
  border-image: var(--fr-b-cyan) 4 fill / calc(var(--p) * 4) / 0 stretch;
  background: transparent;
  font-size: 0;
  padding: 0;
  pointer-events: auto;
  cursor: pointer;
  touch-action: manipulation;
  outline: none;
  filter: drop-shadow(0 var(--p) 0 rgba(14, 15, 38, 0.45));
  display: flex;
  align-items: center;
  justify-content: center;
}

.hud-btn::before {
  content: '';
  width: calc(var(--p) * 5);
  height: calc(var(--p) * 5);
  background: var(--pause) center / 100% 100% no-repeat;
  image-rendering: pixelated;
}

.hud-btn:hover {
  border-image-source: var(--fr-b-white);
}

.hud-btn:active {
  transform: translateY(var(--p));
}

.hud-right {
  position: absolute;
  top: calc(10px + var(--safe-top));
  right: calc(10px + var(--safe-right));
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: var(--p);
}

.pill {
  font-size: var(--fs-1);
  padding: 0 var(--p);
  white-space: nowrap;
}

.pill.warn {
  color: var(--gold);
}

.pill.bad {
  color: var(--danger);
}

.banner {
  position: absolute;
  left: 50%;
  top: 42%;
  transform: translate(-50%, -50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: calc(var(--p) * 5);
  pointer-events: none;
  animation: banner 1.5s steps(24) forwards;
  white-space: nowrap;
}

.banner.mini {
  top: 27%;
  gap: calc(var(--p) * 3);
  animation-duration: 1.4s;
}

.banner.mini .small {
  font-size: var(--fs-1);
}

.banner .small {
  display: inline-block;
  font-size: var(--fs-2);
  padding: 0 calc(var(--p) * 2);
}

@keyframes banner {
  0% {
    transform: translate(-50%, -50%) scale(0.4);
    opacity: 0;
  }
  10% {
    transform: translate(-50%, -50%) scale(1.15);
    opacity: 1;
  }
  18% {
    transform: translate(-50%, -50%) scale(1);
  }
  80% {
    opacity: 1;
  }
  100% {
    transform: translate(-50%, -60%) scale(1);
    opacity: 0;
  }
}

.countdown {
  position: absolute;
  left: 50%;
  top: 42%;
  transform: translate(-50%, -50%);
  pointer-events: none;
}

.hint {
  position: absolute;
  font-size: var(--fs-1);
  line-height: 1.15;
  padding: 0 var(--p);
  text-align: center;
  pointer-events: none;
  transition: opacity 0.4s steps(4);
  filter: drop-shadow(0 var(--p) 0 rgba(14, 15, 38, 0.35));
}

.hint .kbd {
  margin: 0 var(--p);
}

.hint.serve {
  left: 50%;
  bottom: calc(18px + var(--safe-bottom));
  transform: translateX(-50%);
  white-space: nowrap;
  display: flex;
  align-items: center;
  gap: var(--p);
}

.hint.tap {
  right: calc(18px + var(--safe-right));
  bottom: calc(40px + var(--safe-bottom));
  width: calc(var(--p) * 46);
}

.hint.tap .circle {
  width: calc(var(--p) * 20);
  height: calc(var(--p) * 20);
  margin: var(--p) auto calc(var(--p) * 2);
  background: var(--tap) center / 100% 100% no-repeat;
  image-rendering: pixelated;
  animation: pulse 1.2s steps(6) infinite;
}

@keyframes pulse {
  50% {
    transform: scale(0.84);
  }
}

.status-overlay {
  position: absolute;
  left: 50%;
  top: calc(80px + var(--safe-top));
  transform: translateX(-50%);
  filter: drop-shadow(0 var(--p) 0 rgba(14, 15, 38, 0.4));
  padding: 0 calc(var(--p) * 2);
  font-size: var(--fs-2);
  text-align: center;
  max-width: 90vw;
}

.toast {
  position: absolute;
  left: 50%;
  bottom: calc(24px + var(--safe-bottom));
  transform: translateX(-50%);
  font-size: var(--fs-2);
  padding: 0 calc(var(--p) * 2);
  pointer-events: none;
  animation: fade-in 0.2s steps(3);
  z-index: 5;
}

/* ---------- joystick ---------- */

.joy {
  position: absolute;
  width: 128px;
  height: 128px;
  margin: -64px 0 0 -64px;
  background: var(--joy) center / 100% 100% no-repeat;
  image-rendering: pixelated;
  pointer-events: none;
  z-index: 2;
}

.joy.ghost {
  opacity: 0.5;
}

.joy .knob {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 56px;
  height: 56px;
  margin: -28px 0 0 -28px;
  background: var(--knob) center / 100% 100% no-repeat;
  image-rendering: pixelated;
  filter: drop-shadow(0 var(--p) 0 rgba(14, 15, 38, 0.4));
}

/* ---------- layout variants ---------- */

#hud.wide .hud-top {
  left: calc(var(--p) * 16 + 18px + var(--safe-left));
  transform: none;
  align-items: flex-start;
}

#hud.wide .sb-team {
  max-width: 22vw;
}

#hud.wide .fx-list {
  flex-direction: column;
  align-items: flex-start;
}

/* Phones: a small two-row scoreboard (sets, games, points per team) in the corner, beside the
   court when held sideways; the match format line only shows live calls. */
#hud.compact .scoreboard {
  display: grid;
  grid-template-columns: auto auto auto auto;
  gap: var(--p) calc(var(--p) * 2);
}

#hud.compact .sb-mid,
#hud.compact .format.idle {
  display: none;
}

#hud.compact .scoreboard > :nth-child(1) { grid-area: 1 / 1; }
#hud.compact .scoreboard > :nth-child(2) { grid-area: 1 / 2; }
#hud.compact .scoreboard > :nth-child(3) { grid-area: 1 / 3; }
#hud.compact .scoreboard > :nth-child(4) { grid-area: 1 / 4; }
#hud.compact .scoreboard > :nth-child(6) { grid-area: 2 / 4; }
#hud.compact .scoreboard > :nth-child(7) { grid-area: 2 / 3; }
#hud.compact .scoreboard > :nth-child(8) { grid-area: 2 / 2; }
#hud.compact .scoreboard > :nth-child(9) { grid-area: 2 / 1; }

#hud.compact .sb-team {
  max-width: 13vw;
  padding: 0;
  gap: var(--p);
}

#hud.compact .sb-team.t1 {
  flex-direction: row;
}

#hud.compact:not(.wide) .sb-team {
  max-width: 40vw;
}

#hud.wide.compact .hud-top {
  left: calc(var(--p) * 16 + 12px + var(--safe-left));
}

@media (max-width: 560px) {
  .teams {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 640px) {
  .hud-top {
    left: calc(var(--p) * 16 + 14px + var(--safe-left));
    right: calc(6px + var(--safe-right));
    transform: none;
    align-items: flex-start;
  }
  .scoreboard {
    max-width: 100%;
  }
  .sb-team {
    max-width: 22vw;
    padding: 0;
    gap: var(--p);
  }
  .sb-team .serve-ball {
    width: calc(var(--p) * 4);
    height: calc(var(--p) * 4);
  }
  .hud-right {
    top: calc(var(--p) * 52 + var(--safe-top));
  }
}

@media (pointer: coarse) {
  .hint.serve {
    bottom: auto;
    top: calc(var(--p) * 70 + var(--safe-top));
  }
}