:root{
  --ink:#0a0a0c; --panel:#141417; --panel2:#1c1c20;
  --blood:#b3122a; --blood-bright:#e01838; --bone:#e8e4dc;
  --muted:#7a7782; --line:#2a2a30; --dead:#4a4750;
}
*{box-sizing:border-box}
html,body{margin:0}
body{
  font-family:"Inter",system-ui,sans-serif; background:var(--ink); color:var(--bone);
  padding:20px 16px 60px; min-height:100vh;
  background-image:radial-gradient(circle at 50% -10%, rgba(179,18,42,.18), transparent 55%);
}
.wrap{max-width:560px;margin:0 auto}

.title{
  font-family:"Oswald",sans-serif; font-weight:700; letter-spacing:.18em;
  font-size:3.4rem; text-align:center; margin:.1em 0 0; text-transform:uppercase;
  color:var(--bone); line-height:1;
}
.title .accent{color:var(--blood-bright)}
.tagline{ text-align:center; color:var(--muted); letter-spacing:.35em;
  text-transform:uppercase; font-size:.7rem; margin:8px 0 28px; }

h2{ font-family:"Oswald",sans-serif; font-weight:600; letter-spacing:.12em;
  text-transform:uppercase; font-size:1.1rem; color:var(--bone);
  border-left:3px solid var(--blood); padding-left:10px; margin:0 0 14px; }

.block{margin:26px 0}
.muted{color:var(--muted)}
.hidden{display:none}

button{
  font-family:"Oswald",sans-serif; letter-spacing:.12em; text-transform:uppercase;
  border:1px solid var(--blood); background:var(--blood); color:#fff; font-weight:600;
  font-size:1rem; padding:14px 22px; cursor:pointer; border-radius:2px;
  transition:background .15s,border-color .15s;
}
button:hover{background:var(--blood-bright);border-color:var(--blood-bright)}
button:disabled{opacity:.35;cursor:default;background:#3a1118;border-color:#3a1118}
button.ghost{background:transparent;color:var(--bone);border-color:var(--line)}
button.ghost:hover{border-color:var(--blood);background:rgba(179,18,42,.08)}
.center{text-align:center}
.lead{color:var(--muted);font-size:.92rem;line-height:1.6;text-align:center;margin:0 0 22px}

/* qr */
#qrBox{display:flex;flex-direction:column;align-items:center;gap:14px}
#qrcode{background:#fff;padding:12px;border-radius:3px}
.joinurl-row{display:flex;align-items:center;gap:8px;max-width:100%}
.joinurl{word-break:break-all;font-size:.78rem}
.copy-btn{flex:none;padding:6px;background:transparent;border:1px solid var(--line);
  border-radius:3px;color:var(--muted);cursor:pointer;display:inline-flex;
  align-items:center;justify-content:center;transition:color .15s,border-color .15s}
.copy-btn:hover{color:var(--bone);border-color:var(--blood);background:transparent}
.copy-btn .ic-check{display:none;color:#5ec27a}
.copy-btn.copied{border-color:#2f6b41}
.copy-btn.copied .ic-copy{display:none}
.copy-btn.copied .ic-check{display:inline}

/* roster (lobby) */
.roster{background:var(--panel);border:1px solid var(--line);border-radius:3px;padding:6px 14px}
.roster ul{margin:0;padding:0;list-style:none}
.roster li{display:flex;align-items:center;gap:8px;padding:9px 2px;
  border-bottom:1px solid var(--line);font-weight:500}
.roster li:last-child{border-bottom:none}
.roster li .pn{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.roster li.away{opacity:.5}
.roster li.away .pn{text-decoration:line-through}
.away-tag{flex:none;font-size:.6rem;text-transform:uppercase;letter-spacing:.12em;
  color:var(--muted);border:1px solid var(--line);border-radius:2px;padding:1px 6px}
.kick{flex:none;width:auto;margin:0;padding:0 8px;background:transparent;border:none;
  color:var(--muted);font-size:1.25rem;line-height:1;cursor:pointer;border-radius:2px}
.kick:hover{color:var(--blood-bright);background:transparent}
.count-badge{color:var(--blood-bright)}

/* role config */
.role-row{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;
  padding:11px 0;border-bottom:1px solid var(--line)}
.role-row:last-child{border-bottom:none}
.role-name{font-family:"Oswald",sans-serif;letter-spacing:.06em;text-transform:uppercase;
  font-weight:600;font-size:.95rem}
.role-team{font-size:.66rem;color:var(--muted);margin-left:8px;text-transform:uppercase;
  letter-spacing:.1em}
.role-info{font-size:.76rem;color:var(--muted);margin-top:3px;line-height:1.45;max-width:360px}
.role-suggest{display:inline-block;width:auto;margin-top:8px;padding:3px 9px;background:transparent;
  border:1px solid var(--line);border-radius:2px;color:var(--muted);cursor:pointer;
  font-family:"Inter",sans-serif;font-size:.7rem;font-weight:500;letter-spacing:.02em;text-transform:none}
.role-suggest:hover{border-color:var(--blood);color:var(--bone);background:transparent}
.role-locked{opacity:.4}
.role-input{width:58px;padding:9px;border:1px solid var(--line);background:var(--ink);
  color:var(--bone);border-radius:2px;font-size:1rem;text-align:center;font-family:"Oswald",sans-serif;
  -moz-appearance:textfield;appearance:textfield}
.role-input::-webkit-outer-spin-button,
.role-input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
.role-input:focus{outline:none;border-color:var(--blood)}

.tally{text-align:center;margin:16px 0;font-family:"Oswald",sans-serif;letter-spacing:.1em;
  text-transform:uppercase;font-size:.95rem}
.tally.ok{color:#5ec27a}
.tally.bad{color:var(--blood-bright)}

/* in-game table */
.table-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:12px}
.tbl-wrap{max-height:60vh;overflow-y:auto;border:1px solid var(--line);border-radius:3px}
table{width:100%;border-collapse:collapse}
thead th{position:sticky;top:0;background:var(--panel2);font-family:"Oswald",sans-serif;
  letter-spacing:.1em;text-transform:uppercase;font-size:.74rem;color:var(--muted);
  text-align:left;padding:11px 14px;border-bottom:1px solid var(--line)}
tbody td{padding:12px 14px;border-bottom:1px solid var(--line);font-size:.92rem}
tbody tr:last-child td{border-bottom:none}
tbody tr.dead td{color:var(--dead)}
tbody tr.dead .pname{text-decoration:line-through}
.prole{font-family:"Oswald",sans-serif;letter-spacing:.05em;text-transform:uppercase;font-size:.82rem}
.prole.mafia{color:var(--blood-bright)}
.status-btn{font-size:.7rem;padding:6px 12px;letter-spacing:.08em}
.status-btn.alive{background:transparent;border-color:#2f6b41;color:#5ec27a}
.status-btn.dead{background:transparent;border-color:var(--blood);color:var(--blood-bright)}
.masked{filter:blur(7px);user-select:none;transition:filter .12s}

.msg{text-align:center;min-height:1.3em;margin-top:12px;font-size:.9rem}

/* how-to-play (full rules) */
details.howto{border:1px solid var(--line);border-radius:3px;background:var(--panel);margin:26px 0}
details.howto>summary{cursor:pointer;list-style:none;user-select:none;padding:14px 16px;
  font-family:"Oswald",sans-serif;letter-spacing:.12em;text-transform:uppercase;
  font-size:1.05rem;color:var(--bone)}
details.howto>summary::-webkit-details-marker{display:none}
details.howto>summary::before{content:"\25B8";color:var(--blood-bright);margin-right:10px}
details.howto[open]>summary::before{content:"\25BE"}
.howto-body{padding:2px 18px 10px;border-top:1px solid var(--line)}
.howto-body h3{font-family:"Oswald",sans-serif;letter-spacing:.08em;text-transform:uppercase;
  font-size:.95rem;color:var(--blood-bright);margin:18px 0 6px}
.howto-body p{font-size:.9rem;line-height:1.6;color:var(--bone);margin:8px 0}