/* Mafia Stage base: reset, language switching, type styles, direction, focus, motion safety.
   Load order: fonts.css, tokens.css, base.css, components.css. */

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--stage);
  color: var(--ink);
  font-size: var(--size-body);
  font-weight: var(--weight-body);
  -webkit-font-smoothing: antialiased;
  min-height: 100dvh;
}
img, svg, video, canvas { display: block; max-width: 100%; }
[hidden] { display: none !important; }
button, input, select, textarea { font: inherit; color: inherit; letter-spacing: inherit; }
button { background: none; border: 0; padding: 0; cursor: pointer; }
a { color: inherit; text-decoration: none; }
h1, h2, h3, h4, p, ul, ol, figure { margin: 0; }
ul, ol { padding: 0; list-style: none; }

/* ---------- language: one family per script, switched by lang. Mixed content is fine: every element resolves its own. ---------- */
:lang(fa) {
  --font-body: var(--font-body-fa);
  --font-display: var(--font-display-fa);
  --leading-body: var(--leading-body-fa);
  --leading-tight: var(--leading-tight-fa);
  --leading-disp: var(--leading-display-fa);
  --tracking-display: 0;
  --size-display-xl: var(--size-display-xl-fa);
  --size-display-l: var(--size-display-l-fa);
  --size-display-m: var(--size-display-m-fa);
  --size-display-s: var(--size-display-s-fa);
}
:lang(en) {
  --font-body: var(--font-body-en);
  --font-display: var(--font-display-en);
  --leading-body: var(--leading-body-en);
  --leading-tight: var(--leading-tight-en);
  --leading-disp: var(--leading-display);
  --tracking-display: var(--tracking-display-en);
  --size-display-xl: var(--size-display-xl-en);
  --size-display-l: var(--size-display-l-en);
  --size-display-m: var(--size-display-m-en);
  --size-display-s: var(--size-display-s-en);
}
body { font-family: var(--font-body); line-height: var(--leading-body); }

/* ---------- type styles ---------- */
.t-display-xl, .t-display-l, .t-display-m, .t-display-s {
  font-family: var(--font-display);
  font-weight: 400;
  line-height: var(--leading-disp);
  letter-spacing: var(--tracking-display);
  text-wrap: balance;
}
.t-display-xl { font-size: var(--size-display-xl); }
.t-display-l  { font-size: var(--size-display-l); }
.t-display-m  { font-size: var(--size-display-m); }
.t-display-s  { font-size: var(--size-display-s); }
.t-title   { font-size: var(--size-title);   font-weight: var(--weight-medium); line-height: var(--leading-tight); }
.t-heading { font-size: var(--size-heading); font-weight: var(--weight-medium); line-height: var(--leading-tight); }
.t-body-l  { font-size: var(--size-body-l);  line-height: var(--leading-body); }
.t-body    { font-size: var(--size-body);    line-height: var(--leading-body); }
.t-body-s  { font-size: var(--size-body-s);  line-height: var(--leading-body); }
.t-caption { font-size: var(--size-caption); line-height: var(--leading-tight); color: var(--dim); }
.t-micro   { font-size: var(--size-micro);   line-height: 1.2; font-weight: var(--weight-medium); }
.t-strong  { font-weight: var(--weight-strong); }
.t-medium  { font-weight: var(--weight-medium); }
.t-dim     { color: var(--dim); }
.t-faint   { color: var(--faint); }
.t-spot    { color: var(--spotlight); }
.t-mafia   { color: var(--mafia); }
.t-go      { color: var(--go); }
.t-danger  { color: var(--danger); }
.t-num     { font-variant-numeric: tabular-nums; }

/* ---------- direction ---------- */
/* Layout mirrors through logical properties. These four things never mirror: */
.no-mirror, .ms-mark, .ms-video, .ms-timer, .ms-progress { direction: ltr; }
[dir="rtl"] .mirror-glyph { transform: scaleX(-1); }   /* chevrons and back arrows only */

/* Phone: the display scale steps down one notch and grain is off. */
@media (max-width: 720px) {
  :root {
    --size-display-xl-fa: 64px; --size-display-xl-en: 46px;
    --size-display-l-fa: 44px;  --size-display-l-en: 32px;
    --size-display-m-fa: 32px;  --size-display-m-en: 24px;
    --size-display-s-fa: 26px;  --size-display-s-en: 19px;
    --grain-opacity: 0;
  }
}

/* ---------- focus ---------- */
:focus { outline: none; }
:focus-visible { outline: none; box-shadow: var(--ring-focus); border-radius: var(--radius-s); }
.ms-seat:focus-visible, .ms-rolecard:focus-visible { border-radius: var(--radius-l); }

/* ---------- selection, scrollbars ---------- */
::selection { background: var(--spotlight); color: var(--stage); }
* { scrollbar-width: thin; scrollbar-color: var(--mist) transparent; }

/* ---------- the stage register ---------- */
.stage {
  position: relative;
  background: var(--stage);
  color: var(--ink);
  isolation: isolate;
}
.stage::before {            /* the one light */
  content: "";
  position: absolute; inset: 0;
  background: var(--light-spot);
  pointer-events: none;
  z-index: -1;
  transition: opacity var(--dur-night) var(--ease-stage);
}
.stage::after {             /* the grain, one fixed layer, cheap */
  content: "";
  position: absolute; inset: 0;
  pointer-events: none;
  opacity: var(--grain-opacity);
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/></filter><rect width='160' height='160' filter='url(%23n)' opacity='.9'/></svg>");
  z-index: -1;
}
.stage--vignette::before { background: var(--light-spot), var(--vignette); }

/* ---------- the chrome register ---------- */
.chrome {
  background: var(--smoke);
  color: var(--ink);
  font-size: var(--size-body-s);
  line-height: var(--leading-tight);
}

/* ---------- motion safety ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 1ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 1ms !important;
    scroll-behavior: auto !important;
  }
  /* The four moments keep their meaning through colour, not movement: see components.css [data-motion] blocks. */
}

/* ---------- helpers ---------- */
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.row { display: flex; align-items: center; gap: var(--space-2); }
.stack { display: flex; flex-direction: column; gap: var(--space-2); }
.grow { flex: 1 1 auto; min-width: 0; }