/* جلسة — المافيا.
   =========================================================================
   The village is not an illustration the screen contains; it is the screen.
   Everything else — the round marker, the clock, the narration — is light and
   voice laid over that night, never a card sitting on top of it. That single
   decision is what this file exists to enforce, and it is why the mafia stage
   opts out of the shared .ng-card stage grid in design-system.css.

   Palette is taken from the painted art (lantern amber, night blue) and met
   with جلسة's own accents; text is warm linen rather than pure white so it
   reads as lit by the fire instead of pasted over it.

   Type is Tajawal + Cairo — the two families the app already loads. The
   personality comes from treatment, not from a third webfont: 900-weight
   display against tracked-out small utility text, with a hard size jump
   between them.
   ========================================================================= */

.ng-app[data-game="mafia"]{
  --mv-night:#070C18;
  --mv-dusk:#16243E;
  --mv-raise:#1E2E4C;
  --mv-ember:#F0A83E;
  --mv-brand:#D05531;
  --mv-blood:#E83D3E;
  --mv-linen:#F2E9D8;
  --mv-ash:#8595B4;
  --mv-line:rgba(240,168,62,.16);
}

/* ── the scene ──────────────────────────────────────────────────────────── */
/* Seat placement is equal SCREEN-SPACE arc length on an ellipse — see
   mafia-village-layout.js. The 16/9 ratio is load-bearing: the layout math
   corrects for it, so the scene keeps that ratio and covers its container
   rather than stretching to it. */
.mv-scene{
  position:relative; width:100%; aspect-ratio:16/9; overflow:hidden;
  container-type:inline-size; background:var(--mv-night); user-select:none;
  min-height:0; min-width:0;
}
.mv-scene .mv-bg{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:0; }
.mv-scene .mv-vig{ position:absolute; inset:0; z-index:1; pointer-events:none;
  background:radial-gradient(115% 85% at 50% 62%, transparent 52%, rgba(6,9,18,.5) 100%); }

.mv-fire{ position:absolute; left:50%; top:57%; width:5.2%; transform:translate(-50%,-92%); z-index:570; pointer-events:none; }
.mv-fire-sp{ width:100%; aspect-ratio:190/210; background-repeat:no-repeat; background-size:800% 100%;
  background-position:0% 50%; animation:mv-fstep .68s steps(8) infinite;
  filter:drop-shadow(0 0 14px rgba(240,168,62,.7)); }
@keyframes mv-fstep{ from{background-position-x:0%} to{background-position-x:114.2857%} }
.mv-firelight{ position:absolute; left:50%; top:57%; width:26%; aspect-ratio:2/1; transform:translate(-50%,-50%);
  z-index:560; pointer-events:none; border-radius:50%; mix-blend-mode:screen;
  background:radial-gradient(closest-side, rgba(240,168,62,.26), transparent 75%); animation:mv-pulse 3.2s ease-in-out infinite; }
@keyframes mv-pulse{ 0%,100%{opacity:.75} 50%{opacity:1} }

.mv-seat{ position:absolute; transform:translate(-50%,-100%); aspect-ratio:1024/958; }
.mv-seat .mv-groundshadow{
  position:absolute; left:50%; bottom:4%; width:58%; aspect-ratio:2.6/1; z-index:-1;
  background:radial-gradient(closest-side, rgba(0,0,0,.34), transparent 75%);
  transform:translateX(-50%) rotate(var(--mv-shadow-deg)) translateX(26%) rotate(calc(-1*var(--mv-shadow-deg)));
  filter:blur(2px); pointer-events:none;
}
.mv-seat .mv-layer{ position:absolute; top:0; left:0; width:100%; height:auto; display:block; pointer-events:none; }
.mv-seat .mv-skirt{ z-index:0; }
.mv-seat .mv-shadow{ z-index:1; }
.mv-seat .mv-body{ z-index:2; opacity:0; transition:opacity .5s ease; }
.mv-seat.alive .mv-body.mv-lit{ opacity:1; }
.mv-seat.dead .mv-body.mv-ded{ opacity:1; }
.mv-seat .mv-lantern{ z-index:3; opacity:0; transition:opacity .5s ease; }
.mv-seat.alive .mv-lantern.mv-on{ opacity:1; }
.mv-seat.dead .mv-lantern.mv-off{ opacity:1; }

/* Nameplates are a sibling layer, so a near house can never cover a far
   house's name. Warm on warm — they belong to the village, not to the UI. */
.mv-plaques{ position:absolute; inset:0; z-index:820; pointer-events:none; }
.mv-plaque{ position:absolute; transform:translate(-50%,0); white-space:nowrap;
  display:inline-flex; align-items:center; gap:.45em; line-height:1.3;
  padding:.3em .85em; border-radius:.5em;
  background:linear-gradient(180deg,rgba(10,7,4,.92),rgba(4,5,10,.92));
  border:1px solid rgba(240,168,62,.42);
  font-family:Cairo,sans-serif; font-weight:800; color:var(--mv-linen);
  box-shadow:0 4px 14px rgba(0,0,0,.6), inset 0 1px 0 rgba(240,168,62,.2); }
.mv-plaque.dead{ color:var(--mv-ash); border-color:rgba(133,149,180,.2); background:rgba(5,7,14,.84); }
.mv-plaque .mv-sk{ display:none; }
.mv-plaque.dead .mv-sk{ display:inline; }

.mv-arrows{ position:absolute; inset:0; z-index:850; pointer-events:none; opacity:0; transition:opacity .35s; }
.mv-scene.mv-voting .mv-arrows{ opacity:1; }

/* ═══ HOST / TV ══════════════════════════════════════════════════════════ */
/* Full bleed. The shared host shell caps every stage at 1180px and wraps it in
   a card; the village needs the whole wall, so mafia opts out of both. */
.ng-app[data-game="mafia"].jz-host-active .ng-shell{
  width:100%; padding-inline:clamp(10px,1.6vw,22px);
}
.ng-app[data-game="mafia"].jz-host-active .mv-stage{
  width:100%; max-width:none; height:100%; min-height:0; margin:0;
}

.mv-screen{
  position:relative; height:100%; min-height:0; overflow:hidden;
  border-radius:clamp(14px,1.4vw,22px);
  background:var(--mv-night);
  box-shadow:0 30px 90px -30px rgba(0,0,0,.9), inset 0 0 0 1px rgba(240,168,62,.1);
}
/* Cover, not letterbox: at least as large as the frame on both axes while
   holding 16/9, so the ring never distorts. */
.mv-screen .mv-scene{
  position:absolute; top:50%; left:50%; transform:translate(-50%,-50%);
  width:100%; height:auto; min-width:100%; min-height:100%;
  border-radius:0;
}

/* ── SIGNATURE · the night mask ─────────────────────────────────────────
   "Everyone close your eyes" is the ritual the whole game turns on. During a
   night role's turn the village falls into shadow and only the ground around
   the fire stays lit; at daybreak it opens back out. One element, driven by
   the data-mafia-phase the host already stamps — no new state. */
/* Sits inside the scene, above the houses but beneath the nameplates: the
   village goes dark, yet who is still standing stays readable across a room. */
.mv-mask{
  position:absolute; inset:0; z-index:810; pointer-events:none;
  background:radial-gradient(ellipse 30% 34% at 50% 57%, rgba(3,6,14,0) 0%, rgba(3,6,14,.42) 58%, rgba(2,4,10,.8) 100%);
  opacity:0; transition:opacity 1s cubic-bezier(.4,0,.2,1);
}
.mv-stage[data-mafia-phase="mafia"] .mv-mask,
.mv-stage[data-mafia-phase="detective"] .mv-mask,
.mv-stage[data-mafia-phase="doctor"] .mv-mask,
.mv-stage[data-mafia-phase="night"] .mv-mask,
.mv-stage[data-mafia-phase="sleep_again"] .mv-mask{ opacity:1; }

/* ── the sky is the type area ───────────────────────────────────────────
   The painting puts an empty night sky above the ring and cobblestone below
   it, so every word lives up here where the art is quiet. Writing across the
   bottom instead would land the narration on the nearest houses and their
   nameplates — which is information, and must not be covered. */
.mv-sky{
  position:absolute; z-index:20; inset-inline:0; top:0;
  display:grid; justify-items:center; gap:clamp(2px,.5vh,7px);
  padding:clamp(10px,1.8vh,22px) clamp(16px,2vw,34px) clamp(20px,3.5vh,44px);
  background:linear-gradient(180deg, rgba(4,7,15,.9) 18%, rgba(4,7,15,.6) 62%, transparent);
  text-align:center; pointer-events:none;
}
/* Chapter and clock share the start corner: the moon is painted into the
   opposite one, and an amber box on the moon reads as a mistake. */
.mv-rail{
  justify-self:start; display:flex; align-items:center; gap:clamp(8px,1.2vw,16px);
}
.mv-chapter{
  display:flex; align-items:center; gap:.6em;
  font:800 clamp(11px,1.2vh,14px)/1 Cairo,sans-serif;
  letter-spacing:.18em; color:var(--mv-ember);
}
.mv-chapter .mv-sigil{ font-size:1.5em; line-height:1; filter:saturate(.85); }

/* The clock is the lantern, not a progress ring: the numeral itself is the
   light, and the light goes out. */
.mv-clock{
  display:grid; place-items:center; flex:0 0 auto;
  min-width:clamp(64px,7vh,104px); padding:clamp(6px,1vh,12px) clamp(10px,1.4vw,18px);
  border-radius:clamp(10px,1vw,16px);
  background:radial-gradient(closest-side, rgba(240,168,62,.22), transparent 78%), rgba(6,9,18,.5);
  border:1px solid var(--mv-line);
  font:900 clamp(28px,5.2vh,58px)/1 Tajawal,sans-serif;
  color:var(--mv-ember); font-variant-numeric:tabular-nums;
  direction:ltr; unicode-bidi:isolate;
  text-shadow:0 0 26px rgba(240,168,62,.55);
  transition:color .3s, text-shadow .3s, border-color .3s;
}
/* Phases with no countdown: the lantern is simply unlit rather than holding
   two dashes in a glowing frame. */
.mv-stage.is-idle .mv-clock{
  background:none; border-color:transparent; color:transparent;
  text-shadow:none; min-width:0; padding:0;
}
.mv-stage.is-urgent .mv-clock{
  color:var(--mv-blood); border-color:rgba(232,61,62,.5);
  text-shadow:0 0 30px rgba(232,61,62,.6);
  background:radial-gradient(closest-side, rgba(232,61,62,.24), transparent 78%), rgba(6,9,18,.55);
}

/* The game ships a narrator (mafia-sfx.js, "تفعيل الراوي"), so the screen is
   written as its subtitle: one spoken line, large, and a quieter aside. */
.mv-narration-title{
  margin:0; font:900 clamp(22px,4.6vh,52px)/1.05 Tajawal,sans-serif;
  color:var(--mv-linen); letter-spacing:-.01em;
  text-shadow:0 3px 30px rgba(0,0,0,.9);
}
.mv-narration-text{
  margin:0; font:600 clamp(11px,1.7vh,19px)/1.5 Cairo,sans-serif;
  color:var(--mv-ash); text-shadow:0 2px 14px rgba(0,0,0,.8);
}
.mv-sky .mv-panel{
  margin:0; padding:0; border:0; background:none; box-shadow:none;
  font:800 clamp(10px,1.4vh,14px)/1.5 Cairo,sans-serif; color:var(--mv-ember);
  letter-spacing:.06em;
}
.mv-sky .mv-panel .ng-muted{ color:var(--mv-ember); line-height:1.5; }

.mv-controls{
  position:absolute; z-index:25; inset-inline-end:clamp(16px,2vw,30px); bottom:clamp(14px,2.2vh,26px);
  display:flex; gap:8px;
}
.ng-app[data-game="mafia"] .mv-controls .btn{
  padding:clamp(7px,1.1vh,11px) clamp(14px,1.5vw,22px);
  border-radius:999px; border:1px solid var(--mv-line);
  background:rgba(6,9,18,.72); color:var(--mv-linen);
  font:800 clamp(11px,1.4vh,14px) Cairo,sans-serif;
  backdrop-filter:blur(6px);
}
.ng-app[data-game="mafia"] .mv-controls .btn:hover{ border-color:var(--mv-ember); color:#fff; }

/* The phase mark stays in the DOM as the phase's accessible label and as the
   surface the TV lifecycle test reads, but a 56px vendor emoji is not the
   hero of this screen — it rides small beside the chapter marker instead. */
.mv-sigil{ display:inline-block; }

/* ── lobby ─────────────────────────────────────────────────────────────── */
.ng-app[data-game="mafia"] .ng-code{
  color:var(--mv-ember); text-shadow:0 0 40px rgba(240,168,62,.4);
}
.ng-app[data-game="mafia"] .ng-card{
  border-color:var(--mv-line);
  background:linear-gradient(150deg, rgba(240,168,62,.05), rgba(255,255,255,.02));
}
.ng-app[data-game="mafia"] .ng-player{
  border-color:rgba(240,168,62,.14); background:rgba(240,168,62,.045);
}

/* ═══ CONTROLLER / PHONE ═════════════════════════════════════════════════ */
/* The phone is the lantern in your hand: one warm card in the dark, holding
   the one private thing the TV must never show. */
.ng-app[data-game="mafia"] .ng-join .ng-card{
  border-color:var(--mv-line);
  background:
    radial-gradient(120% 60% at 50% 0%, rgba(240,168,62,.1), transparent 60%),
    linear-gradient(160deg, var(--mv-dusk), #0A1020);
}
.ng-app[data-game="mafia"] .ng-role{
  font:900 clamp(26px,7vw,38px) Tajawal,sans-serif; color:var(--mv-linen);
}
.ng-app[data-game="mafia"] .ng-pill{
  border-color:rgba(240,168,62,.3); background:rgba(240,168,62,.1); color:var(--mv-ember);
}

/* A choice is a house, not a list row: the lit window is the affordance. */
.ng-app[data-game="mafia"] .ng-option{
  position:relative; display:flex; align-items:center; gap:12px;
  padding-inline-start:44px; text-align:start;
  border-color:rgba(240,168,62,.2); background:rgba(240,168,62,.05);
  color:var(--mv-linen); font-family:Cairo,sans-serif; font-weight:800;
}
.ng-app[data-game="mafia"] .ng-option::before{
  content:""; position:absolute; inset-inline-start:16px; top:50%;
  width:14px; height:14px; margin-top:-7px; border-radius:3px;
  background:rgba(240,168,62,.22);
  box-shadow:inset 0 0 0 1px rgba(240,168,62,.35);
  transition:background .2s, box-shadow .2s;
}
.ng-app[data-game="mafia"] .ng-option:hover:not(:disabled)::before,
.ng-app[data-game="mafia"] .ng-option:focus-visible::before{
  background:var(--mv-ember); box-shadow:0 0 16px rgba(240,168,62,.75);
}
.ng-app[data-game="mafia"] .ng-option:disabled{ opacity:.4; }

.ng-app[data-game="mafia"] .ng-row{
  border-color:rgba(240,168,62,.13); background:rgba(240,168,62,.04);
}

/* ── reduced motion ────────────────────────────────────────────────────── */
@media (prefers-reduced-motion:reduce){
  .mv-scene *, .mv-mask{ animation:none !important; transition:none !important; }
}