/* Mafia Game - design system aligned with magicevents.me / Ingerasul Secret */

.mafia-app{
  --mg-bg:#F4ECE2;
  --mg-ink:#191614;
  --mg-ink-soft:#1A1D20;
  --mg-green:#155536;
  --mg-peach:#FFAC66;
  --mg-red:#C0392B;
  --mg-wine:#6B1A1A;
  --mg-noir:#1F1A17;
  --mg-gold:#B8893B;
  --mg-blue:#1F3A5F;
  --mg-cream-2:#FDF4E2;
  --mg-line:rgba(25,22,20,.08);

  background:var(--mg-bg);
  color:var(--mg-ink);
  font-family:'Inter',system-ui,-apple-system,sans-serif;
  -webkit-font-smoothing:antialiased;
  line-height:1.5;
  padding:24px 16px 64px;
  min-height:60vh;
}

.mafia-app *{box-sizing:border-box}
.mafia-app h1,.mafia-app h2,.mafia-app h3,.mafia-app h4{
  font-family:'Cormorant',serif;font-weight:500;
  margin:0 0 .5rem;letter-spacing:-.01em;line-height:1.15;
}
.mafia-app h1{font-size:42px;color:var(--mg-green)}
.mafia-app h2{font-size:34px}
.mafia-app h3{font-size:20px}
.mafia-app p{margin:0 0 1rem;color:var(--mg-ink-soft)}
.mafia-app .lead{font-size:18px;color:#3a322c;max-width:60ch;margin-left:auto;margin-right:auto}

.mafia-container{max-width:980px;margin:0 auto}
.mafia-hero{text-align:center;padding:8px 0 24px}
.mafia-hero h1{font-size:54px}

.mafia-card{
  background:#fff;border-radius:20px;padding:28px;
  box-shadow:0 1px 0 rgba(25,22,20,.02),0 6px 18px rgba(25,22,20,.05);
  margin-bottom:18px;
}
.mafia-card-alt{background:linear-gradient(135deg,#fff 0%,var(--mg-cream-2) 100%)}

.mafia-grid-2{display:grid;grid-template-columns:1fr 1fr;gap:20px}
@media(max-width:720px){.mafia-grid-2{grid-template-columns:1fr}}

.mafia-btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  font-family:'Inter';font-weight:600;font-size:15px;
  border:none;cursor:pointer;text-decoration:none;
  padding:14px 24px;border-radius:200px;
  transition:transform .06s ease, filter .15s ease;
  color:var(--mg-ink);background:transparent;
}
.mafia-btn:active{transform:translateY(1px)}
.mafia-btn:disabled{opacity:.5;cursor:not-allowed}
.mafia-btn-primary{background:var(--mg-peach);color:#fff}
.mafia-btn-primary:hover{filter:brightness(.96)}
.mafia-btn-confirm{background:var(--mg-red);color:#fff}
.mafia-btn-ghost{background:transparent;color:var(--mg-ink)}
.mafia-btn-dark{background:var(--mg-noir);color:#fff}
.mafia-btn-block{width:100%}
.mafia-btn-sm{padding:10px 16px;font-size:14px}

.mafia-app label{display:block;font-size:13px;font-weight:600;color:#3a322c;margin-bottom:6px}
.mafia-input{
  width:100%;padding:13px 16px;border-radius:14px;
  border:1px solid rgba(25,22,20,.14);background:#fff;
  font-family:inherit;font-size:15px;color:var(--mg-ink);
}
.mafia-input:focus{outline:none;border-color:var(--mg-green);box-shadow:0 0 0 3px rgba(21,85,54,.12)}

.mafia-field{margin-bottom:14px}
.mafia-row{display:flex;gap:12px;align-items:center;flex-wrap:wrap}

.mafia-pill{
  display:inline-flex;align-items:center;gap:6px;
  padding:6px 12px;border-radius:200px;
  font-size:12px;font-weight:600;letter-spacing:.04em;
}
.mafia-pill-green{background:rgba(21,85,54,.1);color:var(--mg-green)}
.mafia-pill-noir{background:rgba(31,26,23,.08);color:var(--mg-noir)}
.mafia-pill-neutral{background:rgba(31,26,23,.08);color:var(--mg-ink)}
.mafia-pill-red,.mafia-pill-blue,.mafia-pill-gold{background:rgba(31,26,23,.08);color:var(--mg-ink)}

.mafia-role-strip{display:flex;justify-content:center;gap:8px;margin:18px 0 4px;flex-wrap:wrap}
.mafia-role-strip .mafia-pill{font-size:11px}

.mafia-screen{display:none}
.mafia-screen.is-active{display:block}

.mafia-error{
  background:rgba(192,57,43,.08);color:var(--mg-red);
  padding:12px 14px;border-radius:12px;margin-bottom:14px;font-size:14px;
}

.mafia-role-counter{
  display:flex;align-items:center;justify-content:space-between;
  padding:14px 16px;border-radius:14px;background:#fff;
  border:1px solid var(--mg-line);margin-bottom:8px;gap:12px;
}
.mafia-role-counter .mafia-meta{display:flex;align-items:center;gap:12px;flex:1;min-width:0}
.mafia-role-icon{
  width:36px;height:36px;border-radius:10px;display:flex;align-items:center;justify-content:center;font-size:18px;flex:none;
  background:rgba(31,26,23,.06);color:var(--mg-ink);
}
.mafia-role-counter .mafia-name{font-weight:600}
.mafia-role-counter .mafia-desc{font-size:13px;color:#6b6058}

.mafia-stepper{display:flex;align-items:center;gap:8px}
.mafia-stepper button{
  width:32px;height:32px;border-radius:200px;border:1px solid var(--mg-line);background:#fff;
  font-weight:700;cursor:pointer;color:var(--mg-ink);font-size:16px;
}
.mafia-stepper .mafia-val{min-width:24px;text-align:center;font-weight:600}

.mafia-summary{
  margin-top:18px;padding:14px 16px;border-radius:14px;
  background:linear-gradient(135deg,#fff 0%,var(--mg-cream-2) 100%);
  border:1px solid var(--mg-line);
  display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap;
}
.mafia-summary .mafia-total{font-family:'Cormorant';font-size:28px;color:var(--mg-green)}

.mafia-room-code{
  display:flex;align-items:center;justify-content:center;gap:14px;
  padding:24px;background:linear-gradient(135deg,#fff 0%,var(--mg-cream-2) 100%);
  border-radius:20px;border:1px solid var(--mg-line);margin-bottom:20px;flex-wrap:wrap;
}
.mafia-room-code .mafia-code{font-family:'Cormorant';font-size:48px;letter-spacing:.18em;color:var(--mg-green)}

.mafia-player-list{display:grid;grid-template-columns:1fr 1fr;gap:10px}
@media(max-width:600px){.mafia-player-list{grid-template-columns:1fr}}
.mafia-player{
  display:flex;align-items:center;gap:12px;padding:12px 16px;background:#fff;
  border-radius:14px;border:1px solid var(--mg-line);
}
.mafia-avatar{
  width:36px;height:36px;border-radius:50%;background:var(--mg-cream-2);
  display:flex;align-items:center;justify-content:center;font-weight:600;color:var(--mg-green);
  font-family:'Cormorant';font-size:18px;flex:none;
}
.mafia-player .mafia-nm{font-weight:600;flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.mafia-player .mafia-st{font-size:12px;color:#7a6f66}

.mafia-reveal{
  border-radius:24px;padding:28px;color:#fff;position:relative;overflow:hidden;
  min-height:280px;display:flex;flex-direction:column;justify-content:space-between;
  cursor:pointer;margin-bottom:14px;
}
.mafia-reveal.is-hidden{
  background:linear-gradient(135deg,var(--mg-noir) 0%,#0E0A08 100%);
  text-align:center;justify-content:center;align-items:center;
}
.mafia-reveal.is-hidden h2{color:#fff;font-size:32px}
.mafia-reveal.is-hidden p{color:rgba(255,255,255,.7)}
.mafia-reveal.mafia,.mafia-reveal.police,.mafia-reveal.doctor,.mafia-reveal.citizen,.mafia-reveal.revealed{
  background:linear-gradient(135deg,#fff 0%,var(--mg-cream-2) 100%);color:var(--mg-ink);
}
.mafia-reveal .mafia-role-tag{font-size:11px;letter-spacing:.24em;text-transform:uppercase;font-weight:600;color:var(--mg-gold)}
.mafia-reveal h2{font-size:46px;margin-top:10px;color:var(--mg-green)}
.mafia-reveal p{font-size:14px;color:#5a4f46}
.mafia-reveal .mafia-seal{
  width:64px;height:64px;border-radius:50%;background:rgba(21,85,54,.08);
  display:flex;align-items:center;justify-content:center;font-size:28px;
  border:1px solid rgba(21,85,54,.16);
}

.mafia-phase-bar{
  display:flex;align-items:center;justify-content:space-between;
  padding:20px 24px;border-radius:18px;
  background:linear-gradient(135deg,var(--mg-noir) 0%,#0E0A08 100%);
  color:#fff;margin-bottom:18px;flex-wrap:wrap;gap:12px;
}
.mafia-phase-bar h3{font-size:30px;color:#fff;margin:0}
.mafia-phase-bar .mafia-turn{font-size:11px;letter-spacing:.2em;text-transform:uppercase;opacity:.6}

.mafia-grid-dash{display:grid;grid-template-columns:1.1fr .9fr;gap:18px}
@media(max-width:820px){.mafia-grid-dash{grid-template-columns:1fr}}
.mafia-panel{background:#fff;border-radius:18px;padding:20px;border:1px solid var(--mg-line)}
.mafia-panel h3{font-size:20px;margin-bottom:14px}

.mafia-player-row{
  display:flex;align-items:center;gap:12px;padding:10px 6px;
  border-bottom:1px solid var(--mg-line);flex-wrap:wrap;
}
.mafia-player-row:last-child{border-bottom:none}
.mafia-player-row .mafia-nm{flex:1;font-weight:500;min-width:120px}
.mafia-player-row.is-dead .mafia-nm{text-decoration:line-through;color:#9a9088}
.mafia-player-row.is-dead .mafia-avatar{filter:grayscale(1) opacity(.6)}
.mafia-player-row .mafia-actions{display:flex;gap:6px;flex-wrap:wrap}

.mafia-log{font-size:13px;color:#5a4f46;list-style:none;padding:0;margin:0}
.mafia-log li{padding:6px 0;border-bottom:1px dashed var(--mg-line)}
.mafia-log li:last-child{border-bottom:none}
.mafia-log .mafia-t{color:#9a9088;font-variant-numeric:tabular-nums;margin-right:6px}

.mafia-actions-row{display:flex;gap:10px;margin-top:14px;flex-wrap:wrap}
.mafia-lobby-hint{
  margin-top:14px;padding:12px 14px;border-radius:12px;
  background:rgba(31,26,23,.05);color:#5a4f46;font-size:14px;text-align:center;
}

.mafia-banner-end{
  text-align:center;padding:20px;border-radius:18px;
  background:linear-gradient(135deg,#fff 0%,var(--mg-cream-2) 100%);
  border:1px solid var(--mg-line);margin-bottom:18px;
}
.mafia-banner-end h2{font-size:38px;color:var(--mg-green)}