:root{
  --bg:#0b0e17;
  --bg2:#12172a;
  --card:#171d34;
  --gold:#d4af37;
  --gold-soft:#f0d68a;
  --good:#3d8bfd;
  --evil:#e04858;
  --text:#eceefb;
  --muted:#8892b0;
  --border:#2a3155;
  --radius:16px;
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{height:100%}
body{
  margin:0;
  font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;
  background:
    radial-gradient(circle at 50% 0%, #1a2140 0%, var(--bg) 60%);
  color:var(--text);
  min-height:100vh;
  padding-bottom:env(safe-area-inset-bottom);
}
#app{max-width:520px;margin:0 auto;min-height:100vh;padding:20px 16px 40px;position:relative}

.view{display:none;animation:fade .35s ease}
.view.active{display:block}
@keyframes fade{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}

.brand{text-align:center;margin:40px 0 28px}
.crest{font-size:44px;color:var(--gold);text-shadow:0 0 24px rgba(212,175,55,.5)}
.brand h1{font-size:38px;letter-spacing:.15em;margin:8px 0 4px;background:linear-gradient(180deg,var(--gold-soft),var(--gold));-webkit-background-clip:text;background-clip:text;color:transparent}
.tagline{color:var(--muted);margin:0;font-size:14px;letter-spacing:.05em}

.card{
  background:linear-gradient(180deg,var(--card),var(--bg2));
  border:1px solid var(--border);
  border-radius:var(--radius);
  padding:20px;
  margin-bottom:16px;
  box-shadow:0 8px 30px rgba(0,0,0,.35);
}
.card h2{margin:0 0 14px;font-size:15px;color:var(--gold-soft);letter-spacing:.03em;text-transform:uppercase;font-weight:600}
.card.center{text-align:center}

label{display:block;font-size:13px;color:var(--muted);margin:14px 0 6px}
label:first-child{margin-top:0}
input{
  width:100%;background:#0d1224;border:1px solid var(--border);color:var(--text);
  padding:14px 16px;border-radius:12px;font-size:16px;outline:none;transition:border .2s;
}
input:focus{border-color:var(--gold)}

.btn{
  width:100%;padding:15px;border-radius:12px;border:none;font-size:16px;font-weight:600;
  margin-top:14px;cursor:pointer;transition:transform .15s, opacity .15s;letter-spacing:.02em;
}
.btn:active{transform:scale(.97)}
.btn:disabled{opacity:.4;cursor:not-allowed}
.btn-primary{background:linear-gradient(180deg,var(--gold-soft),var(--gold));color:#1a1400;box-shadow:0 6px 20px rgba(212,175,55,.3)}
.btn-outline{background:transparent;border:1px solid var(--border);color:var(--text)}
.btn-good{background:linear-gradient(180deg,#5aa2ff,var(--good));color:#fff}
.btn-evil{background:linear-gradient(180deg,#f06673,var(--evil));color:#fff}
.btn-sm{width:auto;padding:10px 18px;margin-top:0;font-size:14px}

.divider{display:flex;align-items:center;color:var(--muted);font-size:12px;margin:18px 0}
.divider::before,.divider::after{content:'';flex:1;height:1px;background:var(--border)}
.divider span{padding:0 12px}

.error{color:var(--evil);font-size:13px;margin-top:10px;min-height:16px}
.hint{color:var(--muted);font-size:13px;margin-top:8px}
.hint.center{text-align:center}

.topbar{display:flex;justify-content:space-between;align-items:center;margin-bottom:18px}
.room-code{font-size:14px;color:var(--muted);letter-spacing:.05em}
.room-code span{color:var(--gold-soft);font-weight:700;font-size:18px;letter-spacing:.15em}
.icon-btn{background:var(--card);border:1px solid var(--border);color:var(--text);width:40px;height:40px;border-radius:10px;font-size:16px;cursor:pointer}

.player-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px}
.player-list li{
  display:flex;align-items:center;justify-content:space-between;
  background:#0d1224;border:1px solid var(--border);border-radius:10px;padding:12px 14px;font-size:15px;
}
.player-list li .badges{display:flex;gap:6px}
.player-list li.selectable{cursor:pointer;transition:border .15s,background .15s}
.player-list li.selectable:active{transform:scale(.98)}
.player-list li.selected{border-color:var(--gold);background:rgba(212,175,55,.1)}
.player-list li .name{display:flex;align-items:center;gap:8px}
.dot{width:8px;height:8px;border-radius:50%;background:var(--muted)}
.dot.on{background:#3ddc84}
.tag{font-size:10px;padding:3px 8px;border-radius:20px;background:var(--border);color:var(--muted);text-transform:uppercase;letter-spacing:.05em}
.tag.leader{background:var(--gold);color:#1a1400}
.tag.host{background:#3d4570;color:var(--gold-soft)}
.tag.you{background:#22305c;color:#8fb3ff}

.toggle{display:flex;align-items:center;gap:10px;font-size:14px;padding:10px 0;cursor:pointer;color:var(--text)}
.toggle input{width:auto;accent-color:var(--gold);width:20px;height:20px}

.hidden{display:none !important}

.role-card{
  margin-top:12vh;
  background:radial-gradient(circle at 50% 0%, #22284a, var(--card) 70%);
  border:1px solid var(--gold);
  border-radius:20px;padding:36px 24px;text-align:center;
  box-shadow:0 0 40px rgba(212,175,55,.15);
}
.role-name{font-size:30px;color:var(--gold-soft);font-weight:700;letter-spacing:.03em;margin-bottom:14px}
.role-desc{color:var(--text);font-size:15px;line-height:1.6;margin-bottom:16px}
.role-info{color:var(--muted);font-size:14px;line-height:1.7}
.role-info b{color:var(--text)}
.side-good{color:var(--good)}
.side-evil{color:var(--evil)}

.quest-track{display:flex;justify-content:space-between;gap:8px;margin-bottom:18px}
.quest-node{
  flex:1;aspect-ratio:1;border-radius:50%;border:2px solid var(--border);
  display:flex;align-items:center;justify-content:center;flex-direction:column;
  font-size:12px;font-weight:700;color:var(--muted);background:var(--card);position:relative;
}
.quest-node .size{font-size:15px}
.quest-node.current{border-color:var(--gold);box-shadow:0 0 16px rgba(212,175,55,.4)}
.quest-node.success{border-color:var(--good);background:rgba(61,139,253,.15);color:var(--good)}
.quest-node.fail{border-color:var(--evil);background:rgba(224,72,88,.15);color:var(--evil)}
.quest-node .two{position:absolute;bottom:-16px;font-size:9px;color:var(--evil)}

.phase-banner{
  text-align:center;padding:14px;border-radius:12px;background:var(--card);
  border:1px solid var(--border);margin-bottom:16px;font-size:14px;color:var(--gold-soft);font-weight:600;
}

.vote-row{display:flex;gap:12px;margin-top:14px}
.vote-row .btn{margin-top:0}

.reveal-list{margin:16px 0;display:flex;flex-direction:column;gap:8px}
.reveal-list .row{display:flex;justify-content:space-between;background:#0d1224;padding:10px 14px;border-radius:10px;font-size:14px;border:1px solid var(--border)}

.vote-tally{display:flex;flex-wrap:wrap;gap:8px;margin-top:14px}
.vote-chip{font-size:13px;padding:8px 12px;border-radius:20px;border:1px solid var(--border)}
.vote-chip.yes{border-color:var(--good);color:var(--good)}
.vote-chip.no{border-color:var(--evil);color:var(--evil)}