:root{
  --bg:#f4f5f8; --panel:#ffffff; --panel2:#eef0f4; --ink:#17181d; --muted:#6d6f7a;
  --line:#e4e6ec; --accent:#5b4ce0; --accent-strong:#4634c4; --impostor:#e0263d; --good:#12996a;
}
*{box-sizing:border-box}
html,body{margin:0}
body{ font-family:"Inter",system-ui,sans-serif; background:var(--bg); color:var(--ink);
  padding:24px 16px 60px; min-height:100vh; }
.wrap{max-width:560px;margin:0 auto}

.title{ font-family:"Poppins",sans-serif; font-weight:700; letter-spacing:.01em;
  font-size:2.8rem; text-align:center; margin:.1em 0 0; color:var(--ink); line-height:1; }
.title .accent{color:var(--accent)}
.tagline{ text-align:center; color:var(--muted); letter-spacing:.3em;
  text-transform:uppercase; font-size:.68rem; margin:8px 0 28px; }

h2{ font-family:"Poppins",sans-serif; font-weight:600; font-size:1.05rem; color:var(--ink);
  border-left:3px solid var(--accent); padding-left:10px; margin:0 0 14px; }

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

button{ font-family:"Poppins",sans-serif; font-weight:600; border:none; background:var(--accent);
  color:#fff; font-size:1rem; padding:14px 22px; cursor:pointer; border-radius:10px;
  transition:background .15s; }
button:hover{background:var(--accent-strong)}
button:disabled{opacity:.45;cursor:default}
button.ghost{background:transparent;color:var(--ink);border:1px solid var(--line)}
button.ghost:hover{background:var(--panel2)}
.center{text-align:center}

/* host mode toggle */
.mode-opts{display:flex;gap:10px;margin:18px 0}
.mode{flex:1;border:1px solid var(--line);border-radius:12px;padding:14px;cursor:pointer;
  background:var(--panel);transition:border-color .15s,background .15s}
.mode.sel{border-color:var(--accent);background:#f0eefc}
.mode .name{font-family:"Poppins",sans-serif;font-weight:600;font-size:.95rem}
.mode .desc{font-size:.78rem;color:var(--muted);margin-top:4px;line-height:1.4}

/* qr + join link */
#qrBox{display:flex;flex-direction:column;align-items:center;gap:14px}
#qrcode{background:#fff;padding:12px;border-radius:10px;border:1px solid var(--line)}
.joinurl-row{display:flex;align-items:center;gap:8px;max-width:100%}
.joinurl{word-break:break-all;font-size:.8rem}
.copy-btn{flex:none;padding:6px;background:transparent;border:1px solid var(--line);
  border-radius:8px;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(--accent);border-color:var(--accent);background:transparent}
.copy-btn .ic-check{display:none;color:var(--good)}
.copy-btn.copied{border-color:var(--good)}
.copy-btn.copied .ic-copy{display:none}
.copy-btn.copied .ic-check{display:inline}

/* roster */
.roster{background:var(--panel);border:1px solid var(--line);border-radius:12px;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:4px;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:4px}
.kick:hover{color:var(--impostor);background:transparent}
.count-badge{color:var(--accent)}

/* setup / config */
.cfg{background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:14px 16px}
.wm-opt{display:block;padding:9px 0;cursor:pointer;font-weight:500}
.wm-opt input{margin-right:10px;accent-color:var(--accent)}
.wm-inputs{margin:4px 0 8px 26px}
.wm-inputs input{width:100%;padding:11px;margin:5px 0;border:1px solid var(--line);
  background:#fff;color:var(--ink);border-radius:8px;font-size:15px;font-family:"Inter",sans-serif}
.wm-inputs input:focus{outline:none;border-color:var(--accent)}
.imp-row{display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:14px 0 4px;border-top:1px solid var(--line);margin-top:10px}
.imp-label{font-family:"Poppins",sans-serif;font-weight:600;font-size:.95rem}
.imp-input{width:64px;padding:9px;border:1px solid var(--line);background:#fff;color:var(--ink);
  border-radius:8px;font-size:1rem;text-align:center;font-family:"Poppins",sans-serif;
  -moz-appearance:textfield;appearance:textfield}
.imp-input::-webkit-outer-spin-button,.imp-input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
.imp-input:focus{outline:none;border-color:var(--accent)}
.suggest{display:inline-block;margin:4px 0 0 26px;padding:3px 9px;background:transparent;
  border:1px solid var(--line);border-radius:6px;color:var(--muted);cursor:pointer;
  font-family:"Inter",sans-serif;font-size:.7rem;font-weight:500}
.suggest:hover{border-color:var(--accent);color:var(--ink);background:transparent}

.tally{text-align:center;margin:16px 0;font-family:"Poppins",sans-serif;font-weight:600;font-size:.95rem}
.tally.ok{color:var(--good)}
.tally.bad{color:var(--impostor)}

/* in-game reveal (impostor only) */
.reveal-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:12px}
.reveal-card{background:var(--panel);border:1px solid var(--line);border-radius:16px;
  padding:26px 18px;text-align:center;box-shadow:0 6px 24px rgba(20,20,40,.05)}
.reveal-word{font-size:.92rem;color:var(--muted);margin-bottom:18px;line-height:1.6}
.reveal-word b{font-family:"Poppins",sans-serif;color:var(--ink)}
.reveal-impostors .lbl{display:block;font-weight:500;font-size:.68rem;letter-spacing:.2em;
  text-transform:uppercase;color:var(--muted);margin-bottom:8px}
.reveal-impostors .names{font-family:"Poppins",sans-serif;font-weight:700;font-size:1.7rem;color:var(--impostor)}
.masked{filter:blur(8px);user-select:none;transition:filter .12s}

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