/* ── Traitor — Game-specific styles ────────────────────────────────────────
   Base styles (body, btn, card, etc.) are in sdk/sdk.css
   ─────────────────────────────────────────────────────────────────────────── */

/* ── Game header ── */
.game-header {
  display:flex; justify-content:space-between; align-items:center;
  width:100%; max-width:560px; margin-bottom:14px; flex-wrap:wrap; gap:8px;
}
.round-badge { font-size:14px; color:var(--text-dim); }
.round-badge strong { color:var(--gold); font-weight:700; font-size:20px; }

/* ── Role badge ── */
.role-badge {
  padding:6px 16px; border-radius:20px; font-size:14px; font-weight:600;
}
.role-badge.innocent    { background:rgba(46,204,113,0.15); border:1px solid rgba(46,204,113,0.3); color:var(--green); }
.role-badge.traitor     { background:rgba(231,76,60,0.15);  border:1px solid rgba(231,76,60,0.3);  color:var(--red);   }
.role-badge.misterwhite { background:rgba(230,126,34,0.15); border:1px solid rgba(230,126,34,0.3); color:#e67e22;      }

/* ── My word card ── */
.my-word-card {
  width:100%; max-width:560px;
  padding:14px 20px; border-radius:14px; margin-bottom:16px; text-align:center;
  background:rgba(249,211,66,0.08); border:1px solid rgba(249,211,66,0.2);
}
.my-word-card .word-label { font-size:12px; color:var(--text-dim); margin-bottom:4px; }
.my-word-card .word-value { font-size:22px; font-weight:700; color:var(--gold); text-transform:uppercase; }
.my-word-card.traitor-word { background:rgba(231,76,60,0.08); border-color:rgba(231,76,60,0.2); }
.my-word-card.traitor-word .word-value { color:var(--red); }
.my-word-card.mw-card { background:rgba(230,126,34,0.08); border-color:rgba(230,126,34,0.2); }
.my-word-card.mw-card .word-value { color:#e67e22; }

/* ── Turn indicator ── */
.turn-indicator {
  text-align:center; padding:12px 20px; border-radius:12px;
  width:100%; max-width:560px; margin-bottom:14px; transition:all 0.3s; font-size:15px;
}
.turn-indicator.my-turn   { background:rgba(249,211,66,0.12); border:1px solid rgba(249,211,66,0.3); color:var(--gold); font-weight:700; }
.turn-indicator.waiting   { background:rgba(255,255,255,0.03); border:1px solid rgba(255,255,255,0.06); color:var(--text-dim); }

/* ── Writing players list ── */
.writing-players-list {
  width:100%; max-width:560px;
  display:flex; flex-direction:column; gap:8px; margin-bottom:14px;
}
.writing-player-row {
  display:flex; align-items:center; gap:12px;
  padding:10px 14px; border-radius:12px;
  background:rgba(255,255,255,0.04); border:1px solid rgba(255,255,255,0.06);
  transition:all 0.2s;
}
.writing-player-row.is-current {
  background:rgba(249,211,66,0.08); border-color:rgba(249,211,66,0.2);
}
.writing-player-row.has-written {
  background:rgba(46,204,113,0.06); border-color:rgba(46,204,113,0.15);
}
.writing-player-avatar { font-size:22px; flex-shrink:0; }
.writing-player-name   { flex:1; font-weight:600; font-size:15px; }
.writing-player-word   { font-weight:700; color:var(--gold); font-size:15px; }
.writing-player-status { font-size:13px; color:var(--text-dim); font-style:italic; }
.writing-check         { color:var(--green); font-size:16px; flex-shrink:0; }

/* ── Vote player cards ── */
.vote-player-card {
  display:flex; align-items:flex-start; gap:12px;
  padding:12px 14px; border-radius:14px;
  background:rgba(255,255,255,0.04); border:2px solid rgba(255,255,255,0.06);
  transition:all 0.2s;
}
.vote-player-card.is-self { opacity:0.5; }
.vote-player-card.voted-for {
  background:rgba(231,76,60,0.1); border-color:rgba(231,76,60,0.35);
}
.vote-player-info { flex:1; min-width:0; }
.vote-player-name-row { display:flex; align-items:center; gap:8px; margin-bottom:6px; }
.vote-player-name  { font-weight:700; font-size:15px; }
.vote-words-row    { display:flex; flex-wrap:wrap; gap:6px; }
.word-chip {
  font-size:12px; padding:3px 8px; border-radius:8px; font-weight:600;
  background:rgba(249,211,66,0.12); color:var(--gold);
  border:1px solid rgba(249,211,66,0.2);
}
.word-chip.round-label {
  background:none; color:var(--text-dim); font-weight:400; padding:0; border:none;
  font-size:11px;
}
.vote-btn {
  flex-shrink:0; padding:8px 14px; border-radius:10px; font-size:13px; font-weight:700;
  background:rgba(231,76,60,0.12); border:1px solid rgba(231,76,60,0.25);
  color:var(--red); cursor:pointer; font-family:'Fredoka',sans-serif;
  transition:all 0.2s; white-space:nowrap; align-self:center;
}
.vote-btn:hover:not(:disabled) { background:rgba(231,76,60,0.22); transform:translateY(-1px); }
.vote-btn:disabled { opacity:0.35; cursor:default; transform:none; }
.vote-btn.already-voted { background:rgba(231,76,60,0.2); border-color:rgba(231,76,60,0.5); }

/* ── Elimination card ── */
.eliminated-card {
  display:inline-flex; align-items:center; gap:14px;
  padding:16px 28px; border-radius:16px; margin-top:16px;
  background:rgba(231,76,60,0.1); border:2px solid rgba(231,76,60,0.3);
}
.eliminated-avatar { font-size:40px; }
.eliminated-name   { font-size:20px; font-weight:700; }

/* ── Result rows ── */
.result-player-row {
  display:flex; align-items:center; gap:12px;
  padding:10px 14px; border-radius:10px; margin-bottom:6px;
  background:rgba(255,255,255,0.03); border:1px solid transparent;
}
.result-player-row.is-traitor     { background:rgba(231,76,60,0.08); border-color:rgba(231,76,60,0.2); }
.result-player-row.is-mw          { background:rgba(230,126,34,0.08); border-color:rgba(230,126,34,0.2); }
.result-player-row.is-winner      { background:rgba(46,204,113,0.07); border-color:rgba(46,204,113,0.15); }
.result-name  { flex:1; font-weight:600; }
.result-pts   { font-weight:700; color:var(--gold); font-size:14px; }

/* ── Abandon button ── */
.btn-abandon {
  font-size:12px; padding:5px 12px; border-radius:10px;
  background:rgba(231,76,60,0.1); border:1px solid rgba(231,76,60,0.25);
  color:rgba(231,76,60,0.7); cursor:pointer; font-family:'Fredoka',sans-serif;
  font-weight:600; transition:all 0.2s; white-space:nowrap;
}
.btn-abandon:hover { background:rgba(231,76,60,0.2); color:var(--red); }

/* ── Mister White toggle ── */
.toggle-btn {
  width:44px; height:24px; border-radius:12px; padding:0; border:none; cursor:pointer;
  background:rgba(255,255,255,0.1); position:relative; transition:background 0.2s; flex-shrink:0;
}
.toggle-btn.active { background:#e67e22; }
.toggle-knob {
  position:absolute; top:3px; left:3px;
  width:18px; height:18px; border-radius:50%; background:#fff;
  transition:transform 0.2s; display:block;
}
.toggle-btn.active .toggle-knob { transform:translateX(20px); }
.mw-label { font-size:13px; color:var(--text-dim); transition:color 0.2s; }
.mw-label.on { color:#e67e22; }
.mw-tooltip {
  display:inline-block; margin-left:4px; font-size:13px;
  color:rgba(255,255,255,0.3); cursor:help; vertical-align:middle; position:relative;
}
.mw-tooltip:hover::after {
  content:attr(title); position:absolute; bottom:calc(100% + 6px); left:50%; transform:translateX(-50%);
  background:#2a2a3e; color:rgba(255,255,255,0.85); font-size:12px; font-weight:400; line-height:1.5;
  padding:8px 12px; border-radius:8px; white-space:normal; width:220px;
  border:1px solid rgba(255,255,255,0.1); z-index:999; pointer-events:none;
}

/* ── Word chips in results ── */
.words-reveal-pair {
  display:flex; gap:16px; justify-content:center; flex-wrap:wrap; margin-bottom:4px;
}
.word-reveal-box {
  padding:10px 20px; border-radius:12px; text-align:center;
}
.word-reveal-box.civil-word  { background:rgba(46,204,113,0.12); border:1px solid rgba(46,204,113,0.25); }
.word-reveal-box.traitor-word{ background:rgba(231,76,60,0.12);  border:1px solid rgba(231,76,60,0.25);  }
.word-reveal-label { font-size:11px; color:var(--text-dim); margin-bottom:4px; }
.word-reveal-value { font-size:18px; font-weight:700; text-transform:uppercase; }
.word-reveal-box.civil-word  .word-reveal-value { color:var(--green); }
.word-reveal-box.traitor-word .word-reveal-value { color:var(--red); }

/* ── Animations ── */
@keyframes shake {
  0%,100% { transform:translateX(0); }
  20%      { transform:translateX(-10px); }
  40%      { transform:translateX(10px); }
  60%      { transform:translateX(-6px); }
  80%      { transform:translateX(6px); }
}
@keyframes confetti {
  0%   { transform:translateY(0) rotate(0deg); opacity:1; }
  100% { transform:translateY(-200px) rotate(720deg); opacity:0; }
}
.confetti-piece {
  position:fixed; width:10px; height:10px; z-index:200;
  animation:confetti 1.5s ease-out forwards; pointer-events:none;
}

@media (max-width: 480px) {
  .screen { padding:52px 14px 20px; }
  .card { padding:16px; }
  .vote-player-card { flex-wrap:wrap; }
  .vote-btn { width:100%; text-align:center; }
}

/* ── Role config panel ── */
.role-config-card { padding:18px 16px; }
.role-config-title {
  font-size:13px; font-weight:700; letter-spacing:1px; color:var(--text-dim);
  text-transform:uppercase; margin-bottom:14px;
}
.role-config-row {
  display:flex; align-items:center; gap:12px; padding:12px 0;
  border-bottom:1px solid rgba(255,255,255,0.07);
}
.role-config-row:last-of-type { border-bottom:none; }
.role-config-info { display:flex; align-items:flex-start; gap:10px; flex:1; min-width:0; }
.role-icon {
  font-size:22px; width:36px; height:36px; border-radius:10px;
  display:flex; align-items:center; justify-content:center; flex-shrink:0;
}
.traitor-icon { background:rgba(231,76,60,0.15); }
.mw-icon      { background:rgba(230,126,34,0.15); }
.role-config-name { font-size:14px; font-weight:700; color:var(--text); line-height:1.3; }
.role-config-desc { font-size:11px; color:var(--text-dim); margin-top:2px; line-height:1.4; }

/* Counter +/- */
.role-counter { display:flex; align-items:center; gap:8px; flex-shrink:0; }
.counter-btn {
  width:32px; height:32px; border-radius:8px; border:2px solid rgba(255,255,255,0.15);
  background:rgba(255,255,255,0.07); color:var(--text); font-size:18px; font-weight:700;
  cursor:pointer; display:flex; align-items:center; justify-content:center;
  transition:background 0.15s, border-color 0.15s; line-height:1;
}
.counter-btn:hover:not(:disabled) { background:rgba(255,255,255,0.14); border-color:rgba(255,255,255,0.3); }
.counter-btn:disabled { opacity:0.3; cursor:default; }
.counter-value { font-size:20px; font-weight:700; color:var(--gold); min-width:20px; text-align:center; }

/* Role preview chips */
.role-preview { display:flex; gap:6px; flex-wrap:wrap; margin-top:14px; }
.role-chip {
  font-size:12px; font-weight:700; padding:4px 10px; border-radius:20px;
}
.traitor-chip { background:rgba(231,76,60,0.15);  color:rgba(231,76,60,0.9);  border:1px solid rgba(231,76,60,0.3); }
.mw-chip      { background:rgba(230,126,34,0.15); color:rgba(230,126,34,0.9); border:1px solid rgba(230,126,34,0.3); }
.civil-chip   { background:rgba(46,204,113,0.10); color:rgba(46,204,113,0.85); border:1px solid rgba(46,204,113,0.25); }