/* T-085 (TD-145, M-0072): one look for every menu screen, the big screen and the phone: "Ember at dusk" (Leon's plan,
   work/T-085/plan.md section 2). Colours, fonts, motion and the shared parts (title, label, panel, button, chip, step
   line). Every menu style uses these names; no colour or font typed by hand in a page.
   One rule: amber (--ember) means "you can act here". Nothing only decorative is amber. */

/* ---------- fonts: free, SIL Open Font Licence (assets/fonts/OFL.txt, CREDITS.md), from our own server ---------- */
/* (swap: the text shows at once in the next font of the list and changes when ours has come. A browser fetches a font only
   when a text uses it: preload the first screen's fonts in its page) */
@font-face { font-family: 'Cinzel'; font-style: normal; font-weight: 400 900; font-display: swap;
  src: url(/assets/fonts/cinzel-latin.woff2) format('woff2'); }
@font-face { font-family: 'Barlow'; font-style: normal; font-weight: 500; font-display: swap;
  src: url(/assets/fonts/barlow-500-latin.woff2) format('woff2'); }
@font-face { font-family: 'Barlow'; font-style: normal; font-weight: 600; font-display: swap;
  src: url(/assets/fonts/barlow-600-latin.woff2) format('woff2'); }
@font-face { font-family: 'Barlow'; font-style: normal; font-weight: 700; font-display: swap;
  src: url(/assets/fonts/barlow-700-latin.woff2) format('woff2'); }
@font-face { font-family: 'Barlow Condensed'; font-style: normal; font-weight: 600; font-display: swap;
  src: url(/assets/fonts/barlow-condensed-600-latin.woff2) format('woff2'); }

:root {
  /* colours */
  --ink-0: #0b0a09;                    /* page background */
  --ink-1: rgba(21, 18, 15, .92);      /* panels (#15120f at 92 %) */
  --ink-2: #211c17;                    /* raised parts, buttons at rest */
  --line: rgba(255, 236, 210, .10);    /* panel edges */
  --text: #f3ece2;
  --text-dim: #b5aa9b;                 /* second text */
  --ember: #f0b45a;                    /* the one main accent: primary buttons, the choice, focus */
  --ember-hot: #ff8a3d;                /* glow on hover / chosen */
  --on-ember: #1d1408;                 /* text on an amber button */
  --gold: #f2c14e;                     /* stars, "best" */
  --blood: #d8432f;                    /* danger, lost */
  --ok: #6fd08c;                       /* connected, ready */
  /* (the player colours stay in world.js PLAYER_COLORS: the code sets them) */

  /* fonts */
  --font-title: 'Cinzel', Optima, Georgia, serif;
  --font-ui: 'Barlow', -apple-system, BlinkMacSystemFont, 'Helvetica Neue', Arial, sans-serif;
  --font-label: 'Barlow Condensed', 'Barlow', -apple-system, BlinkMacSystemFont, 'Helvetica Neue', Arial, sans-serif;

  /* shapes */
  --radius: 14px;                      /* panels (the phone: --radius-phone) */
  --radius-phone: 12px;
  --radius-btn: 10px;
  --shadow: 0 10px 36px rgba(0, 0, 0, .45);
  --shadow-text: 0 4px 30px rgba(0, 0, 0, .7);    /* a title over a picture */
  --shadow-art: 0 8px 26px rgba(0, 0, 0, .6);     /* a cut-out picture over a picture: filter: drop-shadow(var(--shadow-art)) */
  --safe-x: 5vw;                       /* big screen: a TV cuts its edges; nothing important outside 5 % */
  --safe-y: 5vh;
  --thumb: 44px;                       /* the smallest button a thumb hits on the phone */

  /* motion: one curve for all; only transform and opacity move (the phone stays smooth) */
  --ease: cubic-bezier(.2, .8, .2, 1);
  --t-hover: 180ms;
  --t-panel: 400ms;
  --t-title: 900ms;
  --t-screen: 350ms;                   /* screen to screen: a short fade through black */
  --t-stagger: 60ms;                   /* cards come one after the other */
}

/* ---------- text ---------- */
/* a title: capitals, wide letters (--title-size changes its size; big screen 40-48 px) */
.ui-title { margin: 0; font: 600 var(--title-size, clamp(28px, 3.2vw, 48px))/1.1 var(--font-title); letter-spacing: .16em;
  text-transform: uppercase; color: var(--text); }
/* a small capital label over a title or on a slot ("STEP 2 OF 3", "HOST", "READY") */
.ui-label { font: 600 var(--label-size, 13px)/1.2 var(--font-label); letter-spacing: .16em; text-transform: uppercase;
  color: var(--text-dim); }
.ui-text { font: 500 var(--text-size, 15px)/1.35 var(--font-ui); color: var(--text); }
.ui-dim { color: var(--text-dim); }
.ui-num { font-variant-numeric: tabular-nums; }

/* ---------- a panel: one look for all ---------- */
.ui-panel { background: var(--ink-1); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow);
  padding: 16px 18px; color: var(--text); font-family: var(--font-ui); }
.ui-phone .ui-panel { border-radius: var(--radius-phone); }

/* ---------- buttons: primary (amber), secondary (dark), icon only (round) ---------- */
.ui-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 40px; padding: 0 18px;
  border: 1px solid var(--line); border-radius: var(--radius-btn); background: var(--ink-2); color: var(--text);
  font: 600 15px/1 var(--font-ui); letter-spacing: .02em; cursor: pointer; white-space: nowrap;
  transition: transform var(--t-hover) var(--ease), border-color var(--t-hover) var(--ease), background-color var(--t-hover) var(--ease),
    box-shadow var(--t-hover) var(--ease); }
.ui-phone .ui-btn { min-height: var(--thumb); }
.ui-btn:hover { border-color: rgba(240, 180, 90, .6); transform: translateY(-1px); }
.ui-btn:focus-visible { outline: 2px solid var(--ember); outline-offset: 2px; }
.ui-btn:active { transform: translateY(0) scale(.98); }
.ui-btn.primary { border-color: transparent; background: var(--ember); color: var(--on-ember); font-weight: 700; }
.ui-btn.primary:hover { box-shadow: 0 0 0 3px rgba(255, 138, 61, .28), 0 6px 22px rgba(255, 138, 61, .25); }
.ui-btn.icon { width: 40px; min-height: 40px; padding: 0; border-radius: 50%; }
.ui-phone .ui-btn.icon { width: var(--thumb); min-height: var(--thumb); }
.ui-btn.icon svg { width: 18px; height: 18px; }
.ui-btn:disabled { opacity: .45; cursor: default; transform: none; }

/* ---------- a small text button: an icon and a few words, quiet (the big screen's Squad panel, the phone's Share) ---------- */
.ui-link { display: inline-flex; align-items: center; gap: 7px; padding: 4px 0; border: 0; background: none; color: var(--text-dim);
  font: 500 13px/1.2 var(--font-ui); cursor: pointer; transition: color var(--t-hover) var(--ease); }
.ui-link svg { width: 15px; height: 15px; flex: none; }
.ui-link:hover, .ui-link[aria-expanded=true] { color: var(--text); }
.ui-link:focus-visible { outline: 2px solid var(--ember); outline-offset: 2px; border-radius: 4px; }

/* "Made by" and the studio's logo, one quiet link (ui/brand.js madeBy): small, dim, full on hover or focus (T-085 N9) */
.ui-link.made { gap: 8px; font: 600 10.5px/1 var(--font-label); letter-spacing: .16em; text-transform: uppercase; text-decoration: none;
  opacity: .8; transition: color var(--t-hover) var(--ease), opacity var(--t-hover) var(--ease); }
.ui-link.made:hover, .ui-link.made:focus-visible { opacity: 1; }
.ui-link.made img { display: block; height: var(--made-logo, 22px); width: auto; }

/* ---------- a chip: a small rounded tag ("1 road", "HOST", "Desert Diner · change") ---------- */
.ui-chip { display: inline-flex; align-items: center; gap: 6px; padding: 3px 10px; border-radius: 999px;
  background: rgba(255, 236, 210, .08); border: 1px solid var(--line); color: var(--text-dim);
  font: 600 12px/1.25 var(--font-label); letter-spacing: .12em; text-transform: uppercase;
  white-space: nowrap; }
.ui-chip.ember { background: rgba(240, 180, 90, .14); border-color: rgba(240, 180, 90, .5); color: var(--ember); }
.ui-chip.ok { background: rgba(111, 208, 140, .12); border-color: rgba(111, 208, 140, .45); color: var(--ok); }

/* ---------- the step line at the top of every menu: 1 MAP · 2 HEROES · 3 DEFEND (the current step in amber) ---------- */
.ui-steps { display: flex; align-items: center; gap: 10px; margin: 0; padding: 0; list-style: none; counter-reset: ui-step;
  font: 600 var(--label-size, 13px)/1 var(--font-label); letter-spacing: .16em; text-transform: uppercase; color: var(--text-dim); }
.ui-steps li { counter-increment: ui-step; display: flex; align-items: center; gap: 10px; }
.ui-steps li::before { content: counter(ui-step) '\00a0\00a0'; }
.ui-steps li:not(:last-child)::after { content: '\00b7'; color: var(--text-dim); opacity: .6; }
.ui-steps li.on { color: var(--ember); }
.ui-steps li.done { color: var(--text); }

/* ---------- motion ---------- */
/* a panel or card comes in: it rises 12 px and fades in. In a .ui-stagger group each child waits --t-stagger more
   (the code sets style="--i: n" on each) */
@keyframes ui-rise { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
@keyframes ui-fade { from { opacity: 0; } to { opacity: 1; } }
.ui-in { animation: ui-rise var(--t-panel) var(--ease) both; }
.ui-title.ui-in { animation-duration: var(--t-title); }
.ui-stagger > * { animation: ui-rise var(--t-panel) var(--ease) both; animation-delay: calc(var(--i, 0) * var(--t-stagger)); }
/* screen to screen: a short fade (an element with .ui-screen fades in when shown, out when .ui-gone) */
.ui-screen { transition: opacity var(--t-screen) var(--ease); }
.ui-screen.ui-gone { opacity: 0; pointer-events: none; }

/* the player asked for less movement: only fades */
@media (prefers-reduced-motion: reduce) {
  .ui-in, .ui-stagger > * { animation-name: ui-fade; }
  .ui-btn, .ui-btn:hover, .ui-btn:active { transform: none; }
}