/* Type system "road sign" (his pick, option B): condensed poster headlines in Karantina,
   Assistant for reading text, white + traffic-sign yellow, black text on yellow plates. */
@font-face { font-family: 'Karantina'; font-weight: 700; font-display: swap; src: url('/vendor/fonts/karantina-hebrew-700-normal.woff2') format('woff2'); unicode-range: U+0307-0308, U+0590-05FF, U+200C-2010, U+20AA, U+25CC, U+FB1D-FB4F; }
@font-face { font-family: 'Karantina'; font-weight: 700; font-display: swap; src: url('/vendor/fonts/karantina-latin-700-normal.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Assistant'; font-weight: 400; font-display: swap; src: url('/vendor/fonts/assistant-hebrew-400-normal.woff2') format('woff2'); unicode-range: U+0307-0308, U+0590-05FF, U+200C-2010, U+20AA, U+25CC, U+FB1D-FB4F; }
@font-face { font-family: 'Assistant'; font-weight: 400; font-display: swap; src: url('/vendor/fonts/assistant-latin-400-normal.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Assistant'; font-weight: 600; font-display: swap; src: url('/vendor/fonts/assistant-hebrew-600-normal.woff2') format('woff2'); unicode-range: U+0307-0308, U+0590-05FF, U+200C-2010, U+20AA, U+25CC, U+FB1D-FB4F; }
@font-face { font-family: 'Assistant'; font-weight: 600; font-display: swap; src: url('/vendor/fonts/assistant-latin-600-normal.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Assistant'; font-weight: 800; font-display: swap; src: url('/vendor/fonts/assistant-hebrew-800-normal.woff2') format('woff2'); unicode-range: U+0307-0308, U+0590-05FF, U+200C-2010, U+20AA, U+25CC, U+FB1D-FB4F; }
@font-face { font-family: 'Assistant'; font-weight: 800; font-display: swap; src: url('/vendor/fonts/assistant-latin-800-normal.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }

:root {
  --bg: #060914;
  --ink: #f6f7fa;
  --muted: #a9b0c0;
  --sign: #ffd60a;          /* traffic-sign yellow */
  --sign-hi: #ffe45c;
  --sign-ink: #121212;      /* text on a yellow plate */
  --amber: #ffd60a;
  --orange: #ffc400;
  --red: #ff3b3b;
  --blue: #3d7bff;
  --green: #2fd47c;
  --panel: rgba(10, 13, 26, 0.84);
  --panel-2: rgba(14, 18, 36, 0.92);
  --line: rgba(255, 255, 255, 0.12);
  --hot: linear-gradient(100deg, #ffe45c 0%, #ffd60a 55%, #ffc400 100%);
  --display: 'Karantina', 'Assistant', 'Arial Hebrew', Arial, sans-serif;
  --body: 'Assistant', 'Arial Hebrew', Arial, sans-serif;
}

* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; overflow: hidden; background: var(--bg); color: var(--ink); font-family: var(--body); }
body { -webkit-font-smoothing: antialiased; user-select: none; }
button { font-family: inherit; color: inherit; cursor: pointer; }
canvas#gl { position: fixed; inset: 0; width: 100vw; height: 100vh; display: block; }
em { font-style: normal; color: var(--sign); }
svg.i { width: 1em; height: 1em; display: inline-block; vertical-align: -0.14em; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

/* yellow sign plate button */
.btn-hot {
  display: inline-flex; align-items: center; gap: 0.5em; border: 0; border-radius: 0.42em;
  padding: 0.62em 1.5em; font: 800 1em var(--body); color: var(--sign-ink);
  background: var(--sign);
  box-shadow: inset 0 0 0 0.09em var(--sign-ink), inset 0 0 0 0.16em var(--sign), 0 10px 44px -8px rgba(255, 214, 10, 0.55);
  transition: transform 0.15s, box-shadow 0.15s;
}
.btn-hot:hover { transform: translateY(-2px) scale(1.03); box-shadow: inset 0 0 0 0.09em var(--sign-ink), inset 0 0 0 0.16em var(--sign), 0 16px 54px -8px rgba(255, 214, 10, 0.8); }
.btn-hot:active { transform: translateY(1px) scale(0.98); }
.btn-ghost {
  display: inline-flex; align-items: center; gap: 0.45em; border-radius: 999px; padding: 0.55em 1.2em;
  border: 1px solid var(--line); background: rgba(255, 255, 255, 0.06); font: 600 1em var(--body);
}
.btn-ghost:hover { background: rgba(255, 255, 255, 0.12); }

#loader {
  position: fixed; inset: 0; z-index: 100; display: grid; place-items: center; background: var(--bg);
  transition: opacity 0.6s;
}
#loader .box { width: min(420px, 80vw); text-align: center; }
#loader .t { font: 700 44px var(--display); margin-bottom: 18px; letter-spacing: 0.01em; }
#loader .track { height: 6px; border-radius: 6px; background: rgba(255, 255, 255, 0.1); overflow: hidden; }
#loader .fill { height: 100%; width: 0; background: var(--sign); transition: width 0.2s; }
#loader.done { opacity: 0; pointer-events: none; }