* { margin: 0; padding: 0; box-sizing: border-box; }
:root {
  --bg: #12141d;
  --panel: #1c1f2e;
  --panel2: #252a3d;
  --text: #e8e9f0;
  --muted: #8a8fa8;
  --accent: #e0a936;
  --accent2: #7c5cff;
  --danger: #e05252;
  --ok: #4caf7d;
  --radius: 12px;
}
body {
  background: var(--bg);
  color: var(--text);
  font-family: 'Segoe UI', system-ui, sans-serif;
  min-height: 100vh;
}
#app { max-width: 1200px; margin: 0 auto; padding: 16px; }
.hidden { display: none !important; }
.muted { color: var(--muted); }
.small-text { font-size: 12px; }
.center { text-align: center; }
.error { color: var(--danger); min-height: 20px; margin-top: 8px; font-size: 14px; }
.row { display: flex; gap: 8px; align-items: center; }
.space-between { justify-content: space-between; }

.btn {
  background: var(--panel2); color: var(--text); border: 1px solid #3a4059;
  padding: 9px 16px; border-radius: 8px; cursor: pointer; font-size: 14px;
  transition: filter .15s, transform .05s;
}
.btn:hover { filter: brightness(1.2); }
.btn:active { transform: scale(.98); }
.btn:disabled { opacity: .45; cursor: not-allowed; }
.btn.primary { background: var(--accent); color: #1a1405; border: none; font-weight: 700; }
.btn.danger { background: var(--danger); color: #fff; border: none; font-weight: 700; }
.btn.small { padding: 5px 10px; font-size: 12px; }
.btn.big { width: 100%; padding: 13px; font-size: 16px; margin-top: 10px; }

input, textarea {
  background: #14161f; color: var(--text); border: 1px solid #3a4059;
  padding: 10px 12px; border-radius: 8px; font-size: 14px; width: 100%;
  font-family: inherit;
}
input:focus, textarea:focus { outline: 1px solid var(--accent); }

.pill { background: var(--panel2); padding: 4px 10px; border-radius: 99px; font-size: 13px; }
.code { color: var(--accent); letter-spacing: 3px; font-family: monospace; font-size: 24px; }
.panel { background: var(--panel); border-radius: var(--radius); padding: 16px; }
.panel h3 { margin-bottom: 10px; font-size: 15px; }
.topbar { display: flex; justify-content: space-between; align-items: center; padding: 8px 0 16px; flex-wrap: wrap; gap: 8px; }

/* AUTH */
#view-auth { display: flex; justify-content: center; align-items: center; min-height: 90vh; }
.auth-card { background: var(--panel); border-radius: 16px; padding: 32px; width: 380px; max-width: 95vw; }
.auth-card h1 { text-align: center; margin-bottom: 20px; font-size: 26px; line-height: 1.3; }
.tabs { display: flex; gap: 4px; margin-bottom: 16px; }
.tab { flex: 1; background: none; border: none; color: var(--muted); padding: 8px; cursor: pointer; border-bottom: 2px solid transparent; font-size: 14px; }
.tab.active { color: var(--accent); border-bottom-color: var(--accent); }
.auth-form { display: flex; flex-direction: column; gap: 10px; }

/* LOBBY */
.lobby-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.room-list { display: flex; flex-direction: column; gap: 8px; max-height: 320px; overflow-y: auto; }
.room-item { display: flex; justify-content: space-between; align-items: center; background: var(--panel2); padding: 10px 14px; border-radius: 8px; }

.lobby-lb { grid-column: 1 / -1; }
.lb-list { display: flex; flex-direction: column; gap: 5px; max-height: 320px; overflow-y: auto; margin-top: 8px; }
.lb-row { display: flex; align-items: center; gap: 10px; background: var(--panel2); padding: 8px 14px; border-radius: 8px; font-size: 14px; }
.lb-row .lb-rank { width: 34px; font-weight: 800; }
.lb-row .lb-name { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lb-row .lb-points { font-weight: 800; color: var(--accent); }
.lb-row .lb-games { color: var(--muted); font-size: 12px; width: 70px; text-align: right; }
.lb-row.me { outline: 1px solid var(--accent2); }

/* ROOM */
.room-grid { display: grid; grid-template-columns: 1fr 1.4fr; gap: 16px; }
.player-list { display: flex; flex-direction: column; gap: 6px; margin-bottom: 8px; }
.player-item { display: flex; justify-content: space-between; background: var(--panel2); padding: 9px 12px; border-radius: 8px; font-size: 14px; }
.player-item .tags { display: flex; gap: 6px; font-size: 12px; }
.role-picker { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 8px; }
.role-row { display: flex; justify-content: space-between; align-items: center; background: var(--panel2); padding: 7px 10px; border-radius: 8px; font-size: 13px; }
.role-row .counter { display: flex; gap: 6px; align-items: center; }
.role-row button { width: 24px; height: 24px; border-radius: 6px; border: none; background: #3a4059; color: #fff; cursor: pointer; }
.role-row button:disabled { opacity: .3; }

/* NIGHT */
.night-bg { background: radial-gradient(circle at 50% 0%, #1a1f3d 0%, var(--bg) 70%); border-radius: 16px; min-height: 90vh; }
.night-wrap { padding: 24px 16px; }
.night-banner { text-align: center; font-size: 24px; padding: 18px; font-weight: 700; }
.night-progress { height: 6px; background: var(--panel2); border-radius: 3px; overflow: hidden; max-width: 500px; margin: 0 auto 6px; }
.night-bar { height: 100%; background: var(--accent2); width: 0%; transition: width .5s linear; }
.night-cols { display: grid; grid-template-columns: 260px 1fr; gap: 16px; margin-top: 20px; }
.role-card { background: linear-gradient(145deg, #2b2f47, #1c1f2e); border: 2px solid var(--accent); border-radius: 14px; padding: 20px; text-align: center; }
.role-card .emoji { font-size: 52px; }
.role-card .name { font-size: 20px; font-weight: 700; margin: 8px 0; color: var(--accent); }
.role-card .desc { font-size: 13px; color: var(--muted); }
.role-card.compact { display: flex; align-items: center; gap: 12px; text-align: left; padding: 10px 14px; }
.role-card.compact .emoji { font-size: 32px; }
.role-card.compact .name { font-size: 15px; margin: 0 0 3px; }
.role-card.compact .desc { font-size: 12px; }
.night-prompt .title { font-weight: 600; margin-bottom: 10px; color: var(--accent); }
.night-prompt.your-turn {
  border: 2px solid var(--accent); border-radius: 12px; padding: 14px;
  animation: turnGlow 1.2s ease-in-out infinite alternate;
}
@keyframes turnGlow {
  from { box-shadow: 0 0 6px rgba(224, 169, 54, .35); }
  to   { box-shadow: 0 0 22px rgba(224, 169, 54, .85); }
}
.night-banner.turn { color: var(--accent); animation: turnPulse 1s ease-in-out infinite alternate; }
@keyframes turnPulse { from { transform: scale(1); } to { transform: scale(1.06); } }
.turn-tag {
  display: inline-block; background: var(--accent); color: #1a1405; font-weight: 800;
  padding: 4px 14px; border-radius: 99px; font-size: 13px; margin-bottom: 10px;
  animation: turnPulse .8s ease-in-out infinite alternate;
}
.target-grid { display: flex; flex-wrap: wrap; gap: 8px; margin: 8px 0; }
.target-btn {
  background: var(--panel2); border: 1px solid #3a4059; color: var(--text);
  padding: 10px 16px; border-radius: 10px; cursor: pointer; font-size: 14px;
}
.target-btn:hover { border-color: var(--accent); }
.target-btn.selected { border-color: var(--accent); background: #3d3520; }
.center-card-btn {
  width: 70px; height: 100px; background: linear-gradient(145deg, #343b58, #23273a);
  border: 1px solid #4a5178; border-radius: 10px; color: var(--text); font-size: 13px; cursor: pointer;
}
.center-card-btn:hover, .center-card-btn.selected { border-color: var(--accent); }
.private-log { display: flex; flex-direction: column; gap: 8px; max-height: 260px; overflow-y: auto; }
.reveal-item { background: #23283e; border-left: 3px solid var(--accent2); padding: 8px 12px; border-radius: 6px; font-size: 13px; }
.reveal-item .rtitle { font-weight: 700; margin-bottom: 3px; }

/* deck chips — vai có trong ván */
.deck-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.deck-chips.inline { display: inline-flex; }
.deck-chip { background: var(--panel2); border: 1px solid #3a4059; padding: 4px 10px; border-radius: 99px; font-size: 12.5px; cursor: help; }
.deck-chip.t-werewolf { border-color: #7a3a33; background: #2e1c1a; }
.deck-chip.t-village { border-color: #2e5c42; background: #17251d; }
.deck-chip.t-tanner { border-color: #6b5a25; background: #292213; }
.deck-chip.t-special { border-color: #4b3a80; background: #201a33; }
.deck-panel { margin-bottom: 14px; display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }

/* DAY */
.day-grid { display: grid; grid-template-columns: 1fr 1.2fr 1fr; gap: 14px; }
.avatar-row { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 8px; }
.avatar {
  position: relative; width: 86px; padding: 10px 4px; background: var(--panel2);
  border: 2px solid transparent; border-radius: 12px; text-align: center; cursor: pointer; font-size: 13px;
}
.avatar:hover { border-color: var(--danger); }
.avatar.voted-me { border-color: var(--accent); cursor: default; }
.avatar.disabled { opacity: .55; cursor: not-allowed; }
.avatar .face { font-size: 28px; }
.avatar .vbadge { position: absolute; top: -6px; right: -6px; font-size: 15px; }
.avatar .uname { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.notes-grid { display: flex; flex-direction: column; gap: 10px; max-height: 68vh; overflow-y: auto; }
.note-card { background: #22263a; border-radius: 10px; padding: 10px; }
.note-card .nhead { display: flex; justify-content: space-between; font-size: 13px; font-weight: 700; margin-bottom: 6px; }
.note-card textarea { min-height: 64px; resize: vertical; font-size: 13px; }
.note-card .ntext { white-space: pre-wrap; font-size: 13px; color: #c8cbdd; min-height: 20px; }
.note-card.locked { outline: 1px solid #5a4a20; }
.chat-panel { display: flex; flex-direction: column; max-height: 76vh; }
.chat-log { flex: 1; overflow-y: auto; display: flex; flex-direction: column; gap: 6px; margin-bottom: 8px; min-height: 300px; }
.chat-msg { font-size: 13.5px; line-height: 1.45; }
.chat-msg .author { font-weight: 700; color: var(--accent); }
.chat-msg.mine .author { color: var(--accent2); }
.chat-input-row { display: flex; gap: 6px; }
.countdown { background: var(--danger); color: #fff; font-weight: 700; padding: 6px 14px; border-radius: 99px; }

/* RESULT */
.result-banner { text-align: center; font-size: 28px; font-weight: 800; padding: 26px; border-radius: 16px; margin-bottom: 16px; background: linear-gradient(145deg, #2b2f47, #1c1f2e); }
.result-banner.win-village { background: linear-gradient(145deg, #1f4630, #14301f); color: #8ef0b2; }
.result-banner.win-werewolf { background: linear-gradient(145deg, #4d2420, #331512); color: #ff9c8a; }
.result-banner.win-tanner { background: linear-gradient(145deg, #4a3d1a, #302810); color: #ffd97a; }
.result-banner.win-nobody { background: linear-gradient(145deg, #33364a, #22242f); color: var(--muted); }
.result-grid { display: grid; grid-template-columns: 1.2fr 1fr; gap: 16px; }
.result-players { display: flex; flex-direction: column; gap: 12px; }
.team-result { border-radius: 12px; padding: 12px; background: var(--panel2); border: 2px solid #3a4059; }
.team-result.win { border-color: var(--ok); box-shadow: 0 0 14px rgba(76, 175, 125, .25); }
.team-result.lose { opacity: .8; }
.team-result-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 10px; }
.team-result-head .verdict { font-weight: 800; font-size: 14px; }
.team-result-head .verdict.win { color: var(--ok); }
.team-result-head .verdict.lose { color: var(--danger); }
.team-result .rows { display: flex; flex-direction: column; gap: 6px; }
.rp-row { display: flex; align-items: center; gap: 10px; background: #191c2a; padding: 9px 12px; border-radius: 10px; font-size: 14px; flex-wrap: wrap; }
.rp-row.dead { outline: 1px solid var(--danger); }
.rp-row .who { font-weight: 700; min-width: 110px; }
.rp-row .won-tag { margin-left: auto; }
.card-chip { background: #14161f; padding: 3px 10px; border-radius: 6px; font-size: 13px; }
.center-cards { display: flex; gap: 10px; }
.center-reveal { width: 84px; height: 110px; background: linear-gradient(145deg, #343b58, #23273a); border-radius: 10px; display: flex; flex-direction: column; justify-content: center; align-items: center; font-size: 12px; text-align: center; padding: 4px; }
.center-reveal .emoji { font-size: 26px; }
.action-log { display: flex; flex-direction: column; gap: 5px; max-height: 320px; overflow-y: auto; font-size: 13px; }
.action-log .log-item { background: #22263a; padding: 6px 10px; border-radius: 6px; }
#result-votes { font-size: 14px; display: flex; flex-direction: column; gap: 4px; }

/* modal + toast */
.modal { position: fixed; inset: 0; background: rgba(0,0,0,.6); display: flex; justify-content: center; align-items: center; z-index: 50; }
.modal-box { background: var(--panel); padding: 24px; border-radius: 14px; width: 360px; max-width: 92vw; }
.modal-box p { margin-bottom: 16px; line-height: 1.5; }
.modal-box .row { justify-content: flex-end; }
.toast {
  position: fixed; bottom: 24px; left: 50%; transform: translateX(-50%);
  background: #2b2f47; border: 1px solid var(--accent); color: var(--text);
  padding: 10px 20px; border-radius: 10px; z-index: 60; font-size: 14px; max-width: 90vw;
}

/* preset bộ vai */
.preset-row { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-bottom: 12px; }
.preset-row .preset-label { font-size: 13px; color: var(--muted); }
.preset-btn {
  background: #2b2f47; border: 1px solid var(--accent2); color: var(--text);
  padding: 7px 14px; border-radius: 99px; cursor: pointer; font-size: 13px;
}
.preset-btn:hover { filter: brightness(1.25); }

/* help modal */
.help-fab {
  position: fixed; bottom: 20px; right: 20px; z-index: 40;
  background: var(--accent2); color: #fff; border: none; border-radius: 99px;
  padding: 11px 18px; font-size: 14px; font-weight: 700; cursor: pointer;
  box-shadow: 0 4px 14px rgba(0,0,0,.45);
}
.help-fab:hover { filter: brightness(1.15); }
.help-box { width: 760px; max-width: 95vw; max-height: 85vh; display: flex; flex-direction: column; }
.help-content { overflow-y: auto; font-size: 14px; line-height: 1.55; padding-right: 6px; }
.help-content h4 { margin: 14px 0 6px; color: var(--accent); font-size: 15px; }
.help-content ul, .help-content ol { padding-left: 22px; display: flex; flex-direction: column; gap: 3px; }
.help-content .box { background: #22263a; border-radius: 8px; padding: 10px 12px; margin: 6px 0; }
.team-section { margin-bottom: 14px; }
.team-badge { display: inline-block; padding: 3px 10px; border-radius: 99px; font-size: 13px; font-weight: 700; margin-bottom: 8px; }
.team-badge.village { background: #1f3d2c; color: #7ee2a8; }
.team-badge.werewolf { background: #43221f; color: #ff9c8a; }
.team-badge.tanner { background: #3d3520; color: #ffd97a; }
.team-badge.special { background: #2c2350; color: #c3aaff; }
.roles-help-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 8px; }
.role-help-card { background: #22263a; border-radius: 10px; padding: 10px 12px; display: flex; gap: 10px; align-items: flex-start; }
.role-help-card .r-emoji { font-size: 26px; }
.role-help-card .r-name { font-weight: 700; font-size: 14px; }
.role-help-card .r-desc { font-size: 12.5px; color: var(--muted); margin-top: 2px; }

@media (max-width: 900px) {
  .lobby-grid, .room-grid, .day-grid, .result-grid, .night-cols { grid-template-columns: 1fr; }
}