/* ============================================================
   mafia.css — المافيا, the big screen only. The phones carry
   their own styles inside m.html because they are a different
   device class, not a narrow version of this one.

   Written straight into the night palette, so unlike hn.css it
   needs no "night corrections" block chasing it further down.
   ============================================================ */

.mf-wrap{gap:16px;}

/* ---------------- phase strip ---------------- */
.mf-strip{
  display:flex;align-items:center;justify-content:space-between;gap:14px;
  padding:12px 20px;border-radius:14px;font-weight:900;
  border:1.5px solid var(--line);background:var(--surface);
}
.mf-strip.night{
  background:linear-gradient(120deg,#0F0B22,#1A1338);
  border-color:#3A2C66;color:#C7B6FF;
}
.mf-strip.day{
  background:linear-gradient(120deg,#161B44,#1F2A5E);
  border-color:#33418A;color:#CBD6FF;
}
.mf-round{font-size:15px;opacity:.85;}
.mf-phase{font-size:clamp(17px,2.4vw,25px);}
.mf-count{font-size:14px;opacity:.85;}

/* ---------------- stage ---------------- */
.mf-stage{
  text-align:center;border-radius:20px;padding:clamp(20px,4vh,44px) 22px;
  background:var(--surface);border:1.5px solid var(--line);box-shadow:var(--shadow-lg);
}
.mf-stage.night{
  background:radial-gradient(120% 90% at 50% 0%,#1C1440 0%,#100B26 70%);
  border-color:#3A2C66;
}
.mf-stage h2{margin:12px 0 6px;font-size:clamp(22px,3.4vw,36px);font-weight:900;color:var(--ink);}
.mf-stage p{margin:0;font-size:clamp(14px,1.6vw,18px);color:var(--ink-soft);line-height:2;}
.mf-big{font-size:clamp(48px,8vw,86px);line-height:1;}
.mf-big.pulse{animation:mf-beat 1.2s ease-in-out infinite;}
@keyframes mf-beat{0%,100%{transform:scale(1)}18%{transform:scale(1.13)}36%{transform:scale(1)}54%{transform:scale(1.08)}}

.mf-stage.killed h2{color:#FF8A9C;}
.mf-stage.saved h2{color:#6BE3B2;}
.mf-victim{
  font-size:clamp(28px,5vw,52px)!important;font-weight:900;color:var(--ink)!important;
  margin:10px 0 4px!important;animation:mf-flip .6s cubic-bezier(.3,1.3,.4,1) both;
}
@keyframes mf-flip{from{transform:rotateX(90deg);opacity:0}to{transform:rotateX(0);opacity:1}}

.mf-verdict{
  display:inline-block;margin-top:14px;padding:9px 22px;border-radius:999px;
  font-size:clamp(15px,2vw,20px);font-weight:900;
}
.mf-verdict.mafia{background:rgba(196,50,75,.18);border:1.5px solid #C4324B;color:#FF8A9C;}
.mf-verdict.town {background:rgba(63,191,106,.14);border:1.5px solid #2F8F55;color:#7BE3A2;}
.mf-verdict.hidden{background:var(--surface-2);border:1.5px solid var(--line);color:var(--ink-dim);}

.mf-beat{display:flex;gap:8px;justify-content:center;margin-top:14px;}
.mf-beat span{
  width:12px;height:12px;border-radius:50%;background:#2FA97B;
  animation:mf-bounce 1s infinite;
}
.mf-beat span:nth-child(2){animation-delay:.15s}
.mf-beat span:nth-child(3){animation-delay:.3s}
@keyframes mf-bounce{0%,60%,100%{transform:translateY(0);opacity:.5}30%{transform:translateY(-10px);opacity:1}}

.mf-secret{
  margin-top:16px;display:inline-block;padding:9px 18px;border-radius:999px;
  background:rgba(174,184,255,.08);border:1px dashed #4A3F8A;
  color:var(--ink-dim);font-size:13.5px;font-weight:800;
}
.mf-cfg-recap{
  margin-top:12px;font-size:14.5px;font-weight:800;color:var(--green-300);
}

.mf-clock{
  font-size:clamp(46px,10vw,96px);font-weight:900;color:#F0C463;
  font-variant-numeric:tabular-nums;line-height:1.15;margin:8px 0 4px;
}
.mf-clock.hot{color:#FF8A5C;animation:mf-shake .45s infinite;}
@keyframes mf-shake{25%{transform:translateX(-4px)}75%{transform:translateX(4px)}}

/* ---------------- the roster, always on screen ---------------- */
.mf-roster{
  display:grid;grid-template-columns:repeat(auto-fill,minmax(132px,1fr));gap:10px;
}
.mf-card{
  position:relative;background:var(--surface);border:1.5px solid var(--line);
  border-radius:14px;padding:12px 10px;text-align:center;
  transition:filter .45s,opacity .45s,transform .2s;
}
.mf-card.alive{border-color:var(--green-700);}
.mf-card.out{
  filter:grayscale(1);opacity:.55;
  animation:mf-fadeout .7s ease-out both;
}
@keyframes mf-fadeout{from{filter:grayscale(0);opacity:1;transform:rotateY(180deg)}to{filter:grayscale(1);opacity:.55;transform:none}}
.mf-card.targeted{border-color:#8A5A9E;box-shadow:0 0 0 3px rgba(196,50,75,.15);}
.mf-av{font-size:26px;line-height:1;}
.mf-nm{font-size:15px;font-weight:900;margin-top:5px;color:var(--ink);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.mf-tag{margin-top:6px;font-size:11.5px;font-weight:900;padding:3px 9px;border-radius:999px;display:inline-block;}
.mf-tag.mafia{background:rgba(196,50,75,.2);color:#FF8A9C;}
.mf-tag.town{background:rgba(63,191,106,.16);color:#7BE3A2;}
.mf-tag.hidden{background:var(--surface-2);color:var(--ink-dim);}
.mf-votes{
  margin-top:7px;font-size:14px;letter-spacing:-3px;
  animation:mf-pop .35s cubic-bezier(.2,1.5,.4,1) both;
}
.mf-votes b{margin-inline-start:8px;letter-spacing:0;color:#FF8A9C;font-size:15px;}
@keyframes mf-pop{from{transform:scale(.4);opacity:0}to{transform:scale(1);opacity:1}}
.mf-tick{margin-top:6px;font-size:11.5px;font-weight:800;color:var(--ink-dim);}
.mf-tick.on{color:var(--ok);}

/* ---------------- lobby ---------------- */
.mf-lobby{display:grid;grid-template-columns:minmax(240px,320px) 1fr;gap:18px;align-items:start;}
.mf-join{
  background:var(--surface);border:1.5px solid #E3C67C33;border-radius:var(--radius);
  box-shadow:0 0 0 3px rgba(217,164,65,.10),var(--shadow);
  padding:16px;text-align:center;display:flex;flex-direction:column;gap:10px;align-items:center;
}
.mf-join .hn-qr{max-width:260px;}
.mf-code{
  font-size:34px;font-weight:900;letter-spacing:7px;color:#F0C463;
  font-variant-numeric:tabular-nums;
}
.mf-url{direction:ltr;unicode-bidi:embed;display:inline-block;word-break:break-all;}

.mf-setup{
  background:var(--surface);border:1.5px solid var(--line);border-radius:var(--radius);
  box-shadow:var(--shadow);padding:18px 20px;
}
.mf-set-head{display:flex;align-items:baseline;justify-content:space-between;gap:10px;}
.mf-set-head span{font-size:16px;font-weight:900;color:var(--ink);}
.mf-set-head b{font-size:26px;font-weight:900;}
.mf-set-head b.ok{color:var(--ok);}
.mf-set-head b.low{color:var(--warn);}
.mf-set-note{margin:4px 0 14px;font-size:13.5px;color:var(--ink-soft);line-height:1.9;}
.mf-set-label{
  font-size:12px;font-weight:900;color:var(--green-400);margin-bottom:10px;
  letter-spacing:.6px;padding-bottom:7px;border-bottom:1px solid var(--line-soft);
}


/* Every setting is the SAME two-column row: the label column starts flush at
   the panel's right edge, the control column ends flush at its left edge. The
   old markup let each toggle's own switch push its label inward, so labels
   sat at two different right edges and the controls at two different sides. */
.mf-row{
  display:grid;grid-template-columns:1fr auto;align-items:center;gap:14px;
  width:100%;min-height:60px;padding:11px 14px;margin-bottom:9px;
  border:1.5px solid var(--line);border-radius:13px;
  background:var(--surface-2);color:var(--ink);text-align:start;
  transition:border-color .16s,background .16s;
}
.mf-row.btn{cursor:pointer;font-family:var(--font);}
.mf-row.btn:hover{border-color:var(--green-700);}
/* `on` may only change COLOUR — any metric change here would shift every
   row underneath the moment somebody flips a switch. */
.mf-row.on{border-color:var(--green-500);background:rgba(81,99,222,.14);}
.mf-row.sub{
  margin-inline-start:22px;width:calc(100% - 22px);min-height:50px;
  background:transparent;border-style:dashed;
}
.mf-row-txt{display:flex;flex-direction:column;gap:3px;min-width:0;}
.mf-row-txt b{font-size:15px;font-weight:900;line-height:1.4;}
.mf-row-txt i{font-style:normal;font-size:12.5px;color:var(--ink-dim);line-height:1.65;}
.mf-row.on .mf-row-txt b{color:var(--green-300);}
.mf-ctrl{display:flex;align-items:center;justify-content:flex-end;flex:0 0 auto;}

.mf-stepper{display:flex;align-items:center;gap:10px;}
.mf-stepper b{min-width:30px;text-align:center;font-size:20px;font-weight:900;color:var(--green-300);}
.mf-step{
  width:36px;height:36px;border-radius:10px;font-size:20px;font-weight:900;line-height:1;
  background:var(--surface);color:var(--ink);border:1.5px solid var(--line);cursor:pointer;
}
.mf-step:hover:not(:disabled){background:var(--green-700);border-color:var(--green-600);}
.mf-step:disabled{opacity:.3;cursor:not-allowed;}

.mf-sw{
  display:block;width:46px;height:26px;border-radius:999px;background:var(--line);
  position:relative;transition:background .18s;
}
/* The knob RESTS at the inline-START edge, which is the right in this RTL
   page, and switching on slides it 20px left, to the end. It used to rest at
   inline-END: in RTL that is already the left, so switching on pushed it a
   further 20px left, clean out of the pill and over the row's border. */
.mf-sw::after{
  content:"";position:absolute;top:3px;inset-inline-start:3px;width:20px;height:20px;
  border-radius:50%;background:var(--ink-dim);transition:transform .18s,background .18s;
}
.mf-row.on .mf-sw{background:var(--green-500);}
.mf-row.on .mf-sw::after{background:#fff;transform:translateX(-20px);}

.mf-group{margin-bottom:18px;}
.mf-group:last-child{margin-bottom:0;}


.mf-modes{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:9px;align-items:stretch;}
.mf-modes.tight{grid-template-columns:repeat(3,1fr);}
.mf-mode{
  display:flex;flex-direction:column;gap:3px;text-align:center;
  background:var(--surface-2);border:1.5px solid var(--line);border-radius:12px;
  padding:11px 10px;color:var(--ink);
}
.mf-mode b{font-size:14px;font-weight:900;line-height:1.45;}
.mf-mode i{font-style:normal;font-size:11.5px;color:var(--ink-dim);line-height:1.6;}
.mf-mode.on{border-color:#D9A441;background:rgba(217,164,65,.14);color:#F0C463;}
.mf-mode.on i{color:#C9A868;}

.mf-lobby-players{
  background:var(--surface);border:1.5px solid var(--line);
  border-radius:var(--radius);padding:16px 18px;
}
.mf-lp-head{font-size:14px;font-weight:900;color:var(--ink-dim);margin-bottom:12px;}
.mf-lp-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:9px;}
.mf-lp{
  display:flex;align-items:center;gap:9px;background:var(--surface-2);
  border:1px solid var(--line);border-radius:11px;padding:8px 11px;
  animation:mf-slide .3s ease-out both;
}
@keyframes mf-slide{from{transform:translateY(6px);opacity:0}to{transform:none;opacity:1}}
.mf-lp-n{
  flex:0 0 auto;width:24px;height:24px;border-radius:50%;background:var(--green-700);
  color:#fff;font-size:12px;font-weight:900;display:flex;align-items:center;justify-content:center;
}
.mf-lp-nm{flex:1;font-size:14.5px;font-weight:800;color:var(--ink);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.mf-lp-in{
  flex:1;min-width:0;padding:6px 9px;border-radius:8px;border:1px solid var(--line);
  background:var(--bg-2);color:var(--ink);font-family:var(--font);font-size:14px;font-weight:800;
}
.mf-lp-ok{flex:0 0 auto;font-size:11.5px;font-weight:900;color:var(--ok);}
.mf-empty{text-align:center;color:var(--ink-dim);font-size:14.5px;padding:14px 0;}

/* ---------------- game over ---------------- */
.mf-win.mafia h1{color:#FF8A9C;}
.mf-win.town h1{color:#7BE3A2;}
.mf-cast{
  background:var(--surface);border:1.5px solid var(--line);
  border-radius:var(--radius);padding:16px 18px;
}
.mf-cast-head{font-size:14px;font-weight:900;color:var(--ink-dim);margin-bottom:12px;}
.mf-cast-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:9px;}
.mf-cast-row{
  display:flex;align-items:center;gap:10px;padding:10px 13px;border-radius:11px;
  background:var(--surface-2);border:1px solid var(--line);
}
.mf-cast-row.mafia{border-color:#7A2437;background:rgba(196,50,75,.12);}
.mf-cast-row.cop{border-color:#2A4C74;background:rgba(61,139,217,.10);}
.mf-cast-row.doc{border-color:#215C46;background:rgba(47,169,123,.10);}
.mf-cast-ic{font-size:20px;}
.mf-cast-nm{flex:1;font-size:15px;font-weight:900;color:var(--ink);}
.mf-cast-rl{font-size:13px;font-weight:900;color:var(--ink-soft);}
.mf-cast-st{font-size:11.5px;font-weight:800;color:var(--ink-dim);}

.mf-rules ol li{margin-bottom:9px;}

/* ---------------- responsive ---------------- */
@media (max-width:900px){
  .mf-lobby{grid-template-columns:1fr;}
  .mf-join{order:-1;}
  .mf-strip{flex-wrap:wrap;justify-content:center;gap:8px;text-align:center;}
}
@media (max-width:560px){
  .mf-row{min-height:auto;padding:10px 12px;gap:10px;}
  .mf-row-txt b{font-size:14px;}
  .mf-row-txt i{font-size:11.5px;}
  .mf-row.sub{margin-inline-start:14px;width:calc(100% - 14px);}
  .mf-roster{grid-template-columns:repeat(auto-fill,minmax(104px,1fr));gap:8px;}
  .mf-card{padding:9px 7px;}
  .mf-nm{font-size:13px;}
  .mf-modes{grid-template-columns:1fr;}
  .mf-modes.tight{grid-template-columns:repeat(3,1fr);}
  .mf-code{font-size:27px;letter-spacing:5px;}
  .mf-lp-grid{grid-template-columns:1fr;}
}

/* the ten-second turn clock: the only thing a night stage shows while the
   phones are choosing */
.mf-turn{margin:14px 0 2px;}

/* ---------------- local moderator + narrator ---------------- */
.mf-mod-qr{width:100%;margin-top:6px;padding-top:12px;border-top:1px dashed #4A3F8A;
  display:flex;flex-direction:column;align-items:center;gap:8px;}
.mf-mod-qr .hn-qr{max-width:170px;}
.mf-mod-title{font-size:15px;font-weight:900;color:#C7B6FF;}
.mf-mod-ok{margin-top:8px;padding:9px 14px;border-radius:12px;font-size:14px;font-weight:800;
  background:rgba(63,191,106,.12);border:1px solid #2F8F55;color:#7BE3A2;}
.mf-voice-line{display:flex;align-items:center;justify-content:space-between;gap:10px;
  margin-top:2px;font-size:12.5px;color:var(--ink-dim);line-height:1.7;}

/* ---- narrator voice picker (js/mafia.js) ---- */
.mf-voice-line select{
  flex:1;min-width:0;padding:7px 10px;border-radius:10px;
  background:var(--surface-2,#161221);color:var(--ink,#F1ECFA);
  border:1px solid var(--line,#2C2440);
  font-family:inherit;font-size:12.5px;font-weight:800;
}
.mf-set-hint{margin-top:6px;font-size:12px;color:var(--ink-dim);line-height:1.8;}
/* Keep management controls accessible without overlapping the title. */
.mf-topbar{flex-wrap:wrap;}
.mf-topbar .brand{position:static;order:-1;flex-basis:100%;text-align:center;max-width:none;}
.mf-topbar .side{flex-wrap:wrap;min-width:0;}
.mf-lp{flex-wrap:wrap;}.mf-lp .mf-lp-nm{overflow-wrap:anywhere;}
@media(max-width:560px){.mf-topbar .side{justify-content:center;width:100%;}.mf-voice-line{flex-wrap:wrap;}}

.mf-time-field{display:grid;grid-template-columns:minmax(0,1fr) minmax(110px,150px);align-items:center;gap:12px;margin:10px 0;font-size:14px;font-weight:800}
.mf-time-field select{width:100%;padding:9px;border:1px solid var(--line);border-radius:9px;background:var(--surface-2);color:var(--ink);font-family:inherit}
.mf-live-settings{max-height:90vh;overflow:auto;width:min(100%,540px)}.mf-live-settings form{display:grid;gap:7px}
.mf-check{display:flex;align-items:center;gap:10px;font-weight:800}.mf-check input{width:20px;height:20px;accent-color:#A494ED}
.mf-pause-note{position:fixed;bottom:15px;inset-inline:15px;z-index:30;background:#282047;border:1px solid #8676BD;border-radius:12px;padding:12px;text-align:center}
.mf-win.jester h1{color:#C9B8FF}.mf-cast-row.jester{border-color:#8F79C9}
@media(max-width:420px){.mf-time-field{grid-template-columns:1fr 115px;gap:8px}.mf-live-settings{padding:16px}}

/* Host-entered names remain separate from the live roster updates. */
.mf-host-editor{padding-bottom:16px;margin-bottom:16px;border-bottom:1px solid var(--line)}
.mf-host-editor h2{font-size:20px;margin:0 0 8px}
.mf-host-editor p{font-size:14px;line-height:1.9;color:var(--ink-dim);margin:0 0 14px}
.mf-name-form{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:9px;align-items:center}
.mf-name-form label{grid-column:1/-1;font-size:14px;font-weight:800}
.mf-name-form input{min-width:0;width:100%;padding:12px 14px;border:1px solid var(--line);border-radius:12px;background:var(--bg);color:var(--ink);font:inherit;font-size:16px}
.mf-name-form input:focus-visible,.mf-lp-in:focus-visible{outline:2px solid #D9A441;outline-offset:2px}
.mf-name-error{color:#FFB6A8;line-height:1.8;font-size:14px;margin:0 0 12px;overflow-wrap:anywhere}
.mf-name-error:empty{display:none}
.mf-lp-ok.pending{color:#E8C474}
@media(max-width:480px){.mf-name-form{grid-template-columns:minmax(0,1fr)}.mf-name-form .hn-btn{width:100%}}

.mf-lp-in{flex:1 1 calc(100% - 42px);font-size:16px}
.mf-lp-in + .mf-lp-ok{margin-inline-start:33px}