/* ═══════════════════════════════════════════════
   LW Werwolf — Stylesheet (spooky moonlight)
   ═══════════════════════════════════════════════ */
:root{
  --bg-0:#0a0d18;
  --bg-1:#10162a;
  --bg-2:#1a2240;
  --bg-3:#252e54;
  --line:#2a3360;
  --text:#e8ecff;
  --muted:#8d96c4;
  --moon:#ffe89a;
  --blood:#d63645;
  --blood-deep:#8b1922;
  --wolf:#a655ff;
  --seer:#5fc8ff;
  --witch:#56e088;
  --hunter:#ffa14a;
  --mayor:#ffd84d;
  --villager:#9ba8d6;
  --primary:#9b6bff;
  --primary-hover:#b58aff;
  --shadow: 0 8px 32px rgba(0,0,0,.5);
  --radius:14px;
}
*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%}
body{
  font-family:'Inter',system-ui,sans-serif;
  background:
    radial-gradient(ellipse at 20% 10%, rgba(155,107,255,.18), transparent 50%),
    radial-gradient(ellipse at 80% 90%, rgba(214,54,69,.12), transparent 50%),
    var(--bg-0);
  color:var(--text);
  min-height:100vh;
  line-height:1.5;
  -webkit-font-smoothing:antialiased;
}
.title-fancy{font-family:'Cinzel',serif;font-weight:700;letter-spacing:.04em;font-size:48px;text-shadow:0 0 24px rgba(255,232,154,.35)}
.hidden{display:none !important}
.muted{color:var(--muted);font-weight:400}
.center{text-align:center}

/* ── Nav ──────────────────────────────── */
.nav{
  background:rgba(10,13,24,.85);
  backdrop-filter:blur(12px);
  border-bottom:1px solid var(--line);
  position:sticky;top:0;z-index:100;
}
.nav-inner{max-width:1200px;margin:0 auto;padding:14px 20px;display:flex;align-items:center;gap:16px}
.nav-back{color:var(--muted);text-decoration:none;font-weight:500;transition:color .15s}
.nav-back:hover{color:var(--text)}
.nav-title{flex:1;font-weight:700;font-size:18px;font-family:'Cinzel',serif;letter-spacing:.05em}
.nav-username{color:var(--moon);font-weight:600}
.nav-guest{color:var(--muted);font-style:italic}

/* ── App ──────────────────────────────── */
.app{max-width:1200px;margin:0 auto;padding:24px 20px 60px}
.screen{display:none}
.screen.active{display:block;animation:fadeIn .3s ease-out}
@keyframes fadeIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}

/* ── Hero ─────────────────────────────── */
.hero{text-align:center;padding:40px 20px 32px}
.moon{font-size:72px;margin-bottom:12px;filter:drop-shadow(0 0 24px rgba(255,232,154,.5));animation:float 4s ease-in-out infinite}
@keyframes float{0%,100%{transform:translateY(0)}50%{transform:translateY(-8px)}}
.hero-sub{color:var(--muted);margin-top:12px;font-size:17px}

/* ── Forms ────────────────────────────── */
.form-group{max-width:420px;margin:0 auto 20px}
.form-group label{display:block;margin-bottom:6px;font-weight:500;font-size:14px;color:var(--muted)}
input[type="text"],input[type="number"]{
  width:100%;padding:12px 14px;background:var(--bg-1);border:1px solid var(--line);
  color:var(--text);border-radius:10px;font-size:15px;font-family:inherit;
  transition:border-color .15s,box-shadow .15s;
}
input[type="text"]:focus,input[type="number"]:focus{outline:none;border-color:var(--primary);box-shadow:0 0 0 3px rgba(155,107,255,.18)}
.code-input{text-transform:uppercase;letter-spacing:.3em;font-weight:700;text-align:center;font-size:20px}

/* ── Buttons ──────────────────────────── */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;
  padding:11px 20px;border:none;border-radius:10px;font-weight:600;font-size:14px;
  font-family:inherit;cursor:pointer;transition:all .15s;background:var(--bg-2);color:var(--text)}
.btn:hover{background:var(--bg-3)}
.btn:disabled{opacity:.45;cursor:not-allowed}
.btn-primary{background:linear-gradient(135deg,var(--primary),var(--blood));color:#fff;box-shadow:0 4px 16px rgba(155,107,255,.35)}
.btn-primary:hover{background:linear-gradient(135deg,var(--primary-hover),#e54a59);transform:translateY(-1px)}
.btn-secondary{background:var(--bg-2);border:1px solid var(--line)}
.btn-ghost{background:transparent;color:var(--muted)}
.btn-ghost:hover{background:var(--bg-1);color:var(--text)}
.btn-icon{padding:8px 12px;font-size:18px;background:var(--bg-2)}
.btn-lg{padding:14px 28px;font-size:16px}
.btn-block{display:flex;width:100%}
.btn-danger{background:var(--blood);color:#fff}
.btn-danger:hover{background:var(--blood-deep)}

/* ── Home ─────────────────────────────── */
.home-actions{max-width:420px;margin:0 auto;padding:0 20px}
.divider{display:flex;align-items:center;gap:12px;margin:18px 0;color:var(--muted);font-size:13px}
.divider::before,.divider::after{content:'';flex:1;height:1px;background:var(--line)}
.join-row{display:flex;gap:8px}
.join-row .code-input{flex:1}
.rules-box{max-width:520px;margin:36px auto 0;padding:22px;background:rgba(16,22,42,.7);border:1px solid var(--line);border-radius:var(--radius)}
.rules-box h3{margin-bottom:12px;font-size:16px;color:var(--moon)}
.rules-box ul{list-style:none;padding:0}
.rules-box li{padding:6px 0;color:var(--muted);font-size:14px;border-bottom:1px dashed rgba(42,51,96,.5)}
.rules-box li:last-child{border:none}
.rules-box b{color:var(--text);font-weight:600}

/* ── Lobby ────────────────────────────── */
.lobby-header{display:flex;align-items:center;gap:14px;padding:18px;background:var(--bg-1);border:1px solid var(--line);border-radius:var(--radius);margin-bottom:18px}
.label-mini{font-size:11px;color:var(--muted);text-transform:uppercase;letter-spacing:.12em;margin-bottom:2px}
.code-display{font-family:'Cinzel',serif;font-size:32px;font-weight:700;letter-spacing:.25em;color:var(--moon);text-shadow:0 0 16px rgba(255,232,154,.4)}
.lobby-grid{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin-bottom:18px}
@media (max-width:760px){.lobby-grid{grid-template-columns:1fr}}
.card{background:var(--bg-1);border:1px solid var(--line);border-radius:var(--radius);padding:18px;box-shadow:var(--shadow)}
.card h3{margin-bottom:12px;font-size:15px;color:var(--moon);display:flex;justify-content:space-between;align-items:center}
.player-list{list-style:none;padding:0;margin:0}
.player-list li{padding:10px 12px;display:flex;align-items:center;gap:10px;border-radius:8px;margin-bottom:4px;background:var(--bg-2);transition:background .15s}
.player-list li:hover{background:var(--bg-3)}
.player-list li.dead{opacity:.45;text-decoration:line-through}
.player-list li.me{box-shadow:inset 0 0 0 1px var(--primary)}
.player-name{flex:1;font-weight:500}
.player-badge{font-size:11px;padding:2px 8px;border-radius:6px;font-weight:600;letter-spacing:.04em}
.badge-host{background:rgba(255,216,77,.18);color:var(--mayor)}
.badge-mayor{background:rgba(255,216,77,.18);color:var(--mayor)}
.badge-dead{background:rgba(214,54,69,.2);color:var(--blood)}
.badge-offline{background:var(--bg-3);color:var(--muted)}
.badge-role{background:rgba(155,107,255,.2);color:var(--wolf);font-family:'Cinzel',serif}
.badge-seer-known{background:rgba(95,200,255,.2);color:var(--seer);box-shadow:0 0 8px rgba(95,200,255,.25)}
.voted-by{font-size:12px;color:var(--moon);background:rgba(255,232,154,.12);padding:2px 8px;border-radius:6px;font-weight:600;display:inline-flex;align-items:center;gap:4px;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

.player-list li.clickable{cursor:pointer;border:1px solid transparent;transition:all .15s}
.player-list li.clickable:hover{border-color:var(--primary);background:var(--bg-3);transform:translateX(2px)}
.player-list li.my-vote{border-color:var(--primary);background:linear-gradient(90deg,rgba(155,107,255,.18),var(--bg-2));box-shadow:0 0 12px rgba(155,107,255,.25)}
.player-list li.my-vote::before{content:'✓ ';color:var(--primary);font-weight:700;margin-right:4px}
.target-hint{padding:10px 14px;background:rgba(155,107,255,.08);border:1px dashed rgba(155,107,255,.3);border-radius:8px;color:var(--muted);font-size:14px;width:100%}
.target-hint b{color:var(--text)}

.setting-row{display:flex;justify-content:space-between;align-items:center;gap:10px;margin-bottom:10px}
.setting-row label{flex:1;color:var(--muted);font-size:14px;cursor:pointer}
.setting-row label input[type=checkbox]{margin-right:6px;accent-color:var(--primary)}
.setting-row input[type=number]{max-width:80px;text-align:center;padding:6px 8px}
.setting-row input:disabled,.setting-row input[type=checkbox]:disabled{opacity:.6;cursor:not-allowed}
.setting-row label:has(input:disabled){opacity:.7}
.tip{display:inline-flex;align-items:center;justify-content:center;width:20px;height:20px;border-radius:50%;background:rgba(255,232,154,.12);color:var(--moon);font-size:11px;cursor:help;user-select:none;flex-shrink:0;transition:background .15s}
.tip:hover{background:rgba(255,232,154,.28)}
.wait-host-hint{padding:8px 14px;background:rgba(255,232,154,.08);border:1px dashed rgba(255,232,154,.3);border-radius:8px;color:var(--moon);font-style:italic}
.lobby-footer{margin-top:8px}
.lobby-footer .muted{margin-top:6px;font-size:13px}

/* ── Game ─────────────────────────────── */
.game-header{display:flex;justify-content:space-between;align-items:center;padding:16px 20px;background:var(--bg-1);border:1px solid var(--line);border-radius:var(--radius);margin-bottom:18px}
.phase-badge{display:flex;align-items:center;gap:10px}
.phase-icon{font-size:28px}
.phase-name{font-family:'Cinzel',serif;font-weight:600;font-size:18px;letter-spacing:.05em}
.timer{font-variant-numeric:tabular-nums;font-size:24px;font-weight:700;color:var(--moon);font-family:'Cinzel',serif}

.game-grid{display:grid;grid-template-columns:2fr 1fr;gap:18px}
@media (max-width:900px){.game-grid{grid-template-columns:1fr}}
.game-main,.game-side{display:flex;flex-direction:column;gap:18px}

.role-card{display:flex;align-items:center;gap:18px;background:linear-gradient(135deg,rgba(155,107,255,.08),rgba(214,54,69,.05))}
.role-icon-big{font-size:52px;width:80px;height:80px;display:flex;align-items:center;justify-content:center;border-radius:50%;background:var(--bg-2);border:2px solid var(--line)}
.role-info{flex:1}
.role-name{font-family:'Cinzel',serif;font-size:22px;font-weight:700;margin-bottom:2px}
.role-desc{color:var(--muted);font-size:14px}
.role-card.role-wolf{border-color:rgba(166,85,255,.4);background:linear-gradient(135deg,rgba(166,85,255,.18),rgba(166,85,255,.05))}
.role-card.role-wolf .role-icon-big{border-color:var(--wolf);box-shadow:0 0 20px rgba(166,85,255,.4)}
.role-card.role-seer .role-icon-big{border-color:var(--seer);box-shadow:0 0 20px rgba(95,200,255,.3)}
.role-card.role-witch .role-icon-big{border-color:var(--witch);box-shadow:0 0 20px rgba(86,224,136,.3)}
.role-card.role-hunter .role-icon-big{border-color:var(--hunter);box-shadow:0 0 20px rgba(255,161,74,.3)}
.role-card.role-villager .role-icon-big{border-color:var(--villager)}

.action-card h3{font-size:18px;margin-bottom:8px;color:var(--text)}
.action-card p{color:var(--muted);margin-bottom:14px}
.targets{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:12px}
.target-btn{background:var(--bg-2);border:1px solid var(--line);color:var(--text);padding:10px 14px;border-radius:8px;cursor:pointer;font-weight:500;transition:all .15s;font-family:inherit;font-size:14px}
.target-btn:hover{background:var(--bg-3);border-color:var(--primary)}
.target-btn.selected{background:var(--primary);border-color:var(--primary-hover);color:#fff}
.target-btn .vote-count{margin-left:6px;font-size:12px;color:var(--moon);font-weight:600}
.action-buttons{display:flex;gap:8px;flex-wrap:wrap}
.acted-banner{margin-top:12px;padding:10px 14px;background:rgba(86,224,136,.15);border:1px solid rgba(86,224,136,.4);border-radius:8px;color:var(--witch);font-weight:500;text-align:center}

.event-log{list-style:none;padding:0;margin:0;max-height:520px;overflow-y:auto}
.event-log li{padding:8px 10px;border-radius:6px;margin-bottom:4px;font-size:14px;background:rgba(26,34,64,.4);border-left:3px solid var(--line)}
.event-log li.private{border-left-color:var(--moon);background:rgba(255,232,154,.06)}
.event-log .ev-icon{margin-right:6px}

/* ── Toast ─────────────────────────── */
.toast{position:fixed;bottom:24px;left:50%;transform:translateX(-50%);background:var(--bg-2);border:1px solid var(--line);color:var(--text);padding:12px 22px;border-radius:10px;box-shadow:var(--shadow);z-index:1000;font-weight:500;animation:toastIn .25s ease-out}
.toast.error{background:var(--blood-deep);border-color:var(--blood);color:#fff}
.toast.success{background:rgba(86,224,136,.18);border-color:var(--witch);color:var(--witch)}
@keyframes toastIn{from{opacity:0;transform:translate(-50%,16px)}to{opacity:1;transform:translate(-50%,0)}}

/* Responsive */
@media (max-width:520px){
  .title-fancy{font-size:38px}
  .moon{font-size:60px}
  .code-display{font-size:24px;letter-spacing:.18em}
  .game-header{flex-direction:column;gap:8px;text-align:center}
}