/* Station 4 · Mafia in Neuperlach: a party table under warm light, night dims it.
   Sized for reading on a phone: big faces, 17 px talk, the table fills the width. */
.mafia {
  display: flex; flex-direction: column; gap: 8px;
  height: 100dvh;
  background: radial-gradient(90% 60% at 50% 38%, #3B3F66 0%, #1B2240 70%);
  color: var(--cream);
  transition: filter .6s ease;
}
.mafia .topbar { background: #141B35; }
.mafia .brand { color: var(--cream); }
.mafia .step { color: var(--gold-soft); }
.mafia.is-night .mafia-table, .mafia.is-night .mafia-talk { filter: brightness(.6) saturate(.8); }

.mafia-top { display: flex; justify-content: space-between; align-items: center; padding: 0 16px; }
.mafia-title { margin: 0; font: italic 600 30px var(--display); color: var(--gold-soft); }
.mafia-role {
  margin: 0; padding: 7px 12px; border: 1px solid #F1D78E88; border-radius: 999px; background: transparent;
  font: 600 13px var(--label); letter-spacing: .14em; text-transform: uppercase; color: var(--gold-soft);
}

.mafia-table {
  position: relative;
  flex: 0 0 auto;
  width: min(100%, 460px); aspect-ratio: 1 / .9;
  margin: 0 auto;
  transition: filter .6s ease;
}
.mafia-table::before {
  content: ''; position: absolute; inset: 24% 25%;
  border-radius: 50%;
  background: radial-gradient(circle at 50% 40%, #6B4A34, #4A3222);
  box-shadow: 0 0 60px 10px #F2C94C22, inset 0 -8px 20px #0005;
}
.mafia-center {
  position: absolute; inset: 29% 27%;
  margin: 0; display: grid; place-items: center; text-align: center;
  font: italic 600 18px/1.28 var(--display); color: #FFF3DA;
  text-wrap: balance;
}
.tok {
  position: absolute; translate: -50% -50%;
  display: flex; flex-direction: column; align-items: center; gap: 4px;
  width: 92px; padding: 0; border: 0; background: none; color: var(--cream);
  transition: transform .2s ease, opacity .3s ease;
}
.tok svg { width: 70px; height: 70px; border-radius: 50%; box-shadow: 0 0 0 2px #FBF4E855, 0 6px 14px #0006; }
.tok span { font: 600 13px/1.15 var(--label); letter-spacing: .08em; text-transform: uppercase; text-align: center; }
.tok.sel svg { box-shadow: 0 0 0 3px var(--gold), 0 0 24px var(--gold); }
.tok.sel { transform: scale(1.08); }
.tok.you svg { box-shadow: 0 0 0 2px var(--gold-soft), 0 6px 14px #0006; }
.tok.out { opacity: .42; }
.tok.out svg { filter: grayscale(1); }
.tok.was-mafia { opacity: 1; }
.tok.was-mafia span { color: #FF8A7A; }
.tok:disabled { cursor: default; }

.mafia-talk { display: flex; flex-direction: column; gap: 8px; padding: 0 14px; min-height: 0; overflow-y: auto; flex: 1 1 auto; }
.mafia-talk p {
  margin: 0; padding: 10px 14px;
  background: #FBF4E814; border: 1px solid #FBF4E826; border-radius: 14px;
  font: 400 17px/1.35 var(--text);
}
.mafia-talk b { display: block; margin-bottom: 2px; font: 600 12.5px var(--label); letter-spacing: .14em; text-transform: uppercase; color: var(--gold-soft); }

.mafia-acts { display: flex; flex-direction: column; gap: 8px; padding: 0 14px; }
.mafia-acts button {
  padding: 15px 16px; border: 0; border-radius: var(--r);
  background: linear-gradient(180deg, #F3D98F, var(--gold)); color: var(--navy);
  font: italic 700 20px var(--display);
}
.mafia-acts button + button { background: transparent; border: 1px solid var(--gold); color: var(--cream); font: 600 16px var(--text); }
.mafia-acts button:disabled { opacity: .5; }
.bet {
  display: flex; align-items: center; gap: 12px;
  padding: 12px 14px; border: 1px dashed #F1D78E99; border-radius: 14px;
  font: 600 17px var(--text); color: var(--gold-soft);
}
.bet input { width: 24px; height: 24px; accent-color: var(--gold); }
.mafia-balance {
  margin: 0 0 calc(10px + env(safe-area-inset-bottom)); text-align: center;
  font: 600 14px var(--label); letter-spacing: .14em; text-transform: uppercase; color: #FBF4E8b0;
}

/* the role reveal */
.mafia-reveal {
  position: absolute; inset: 0; z-index: 5;
  display: grid; place-items: center;
  background: #0E1328cc; backdrop-filter: blur(3px);
  animation: pc-in .25s ease;
}
.reveal-card {
  width: min(78%, 300px); padding: 26px 20px 22px;
  display: flex; flex-direction: column; align-items: center; gap: 6px;
  background: #FFFBF3; color: var(--ink); border-radius: 18px;
  box-shadow: 0 20px 50px #000a;
  animation: reveal-flip .6s cubic-bezier(.2, .8, .2, 1);
}
.reveal-card svg { width: 96px; height: 72px; }
.reveal-card.is-mafia { background: #2A1418; color: #FFE7DF; }
.reveal-label { margin: 0; font: 600 12px var(--label); letter-spacing: .24em; text-transform: uppercase; opacity: .7; }
.reveal-role { margin: 0; font: italic 700 46px/1 var(--display); }
.reveal-hint { margin: 4px 0 0; font: 500 16px var(--text); opacity: .8; }
.is-mafia path[fill="#111"], .is-mafia path[fill="#1B1B1F"] { fill: #F3E6DC; }
@keyframes reveal-flip { from { transform: rotateY(90deg) scale(.9); opacity: 0; } }