/* ── CHAOS Mode Styles ── */

/* Entry */
.chaos-entry { text-align: center; padding: var(--space-lg); }
.chaos-entry .section-title {
  font-size: 1.4rem; letter-spacing: 4px; color: var(--accent);
  justify-content: center;
}
.chaos-entry .section-title::after { display: none; }
.chaos-actions { display: flex; flex-direction: column; gap: var(--space-sm); margin-block-start: var(--space-md); }
.chaos-join { display: flex; gap: var(--space-xs); }
.chaos-join input {
  flex: 1; padding: 0.8125rem var(--space-md); background: rgba(255,255,255,.05);
  border: 1px solid rgba(255,255,255,.12); border-radius: var(--radius-md);
  color: #fff; font-family: inherit; font-size: 1.1rem; text-align: center;
  letter-spacing: 6px; text-transform: uppercase; outline: none;
  transition: border-color var(--transition-base);
  min-height: var(--touch-min);
}
.chaos-join input:focus { border-color: var(--accent); box-shadow: 0 0 0 3px rgba(233,69,96,.15); }
.chaos-btn {
  padding: var(--space-sm) var(--space-lg); background: linear-gradient(135deg, #e94560, #c0392b);
  border: none; border-radius: var(--radius-lg); color: #fff; font-family: inherit;
  font-size: 1rem; font-weight: 900; cursor: pointer; transition: all var(--transition-base);
  letter-spacing: 1px; min-height: var(--touch-min);
}
.chaos-btn:hover { transform: translateY(-2px); box-shadow: 0 10px 30px rgba(233,69,96,.4); }
.chaos-btn:focus-visible { outline: 2px solid var(--accent2); outline-offset: 2px; }
.chaos-btn.secondary { background: rgba(255,255,255,.07); border: 1px solid rgba(255,255,255,.12); }
.chaos-btn.secondary:hover { background: rgba(255,255,255,.12); box-shadow: none; }

/* Lobby */
.chaos-lobby { padding: var(--space-lg); text-align: center; }
.room-code-display {
  font-size: clamp(1.6rem, 5vw, 2.4rem); font-weight: 900; letter-spacing: 0.625rem;
  color: var(--accent2); padding: var(--space-md);
  background: rgba(255,255,255,.04); border-radius: var(--radius-lg);
  border: 2px dashed rgba(245,166,35,.3); margin-block-end: var(--space-xs); cursor: pointer;
  transition: background var(--transition-fast);
}
.room-code-display:hover { background: rgba(255,255,255,.07); }
.room-code-label { font-size: 0.75rem; color: var(--dim); margin-block-end: var(--space-md); }
.player-slots {
  display: flex; gap: var(--space-sm); justify-content: center;
  margin-block: var(--space-md); flex-wrap: wrap;
}
.player-slot {
  width: 6.25rem; padding: var(--space-md) var(--space-sm); border-radius: var(--radius-lg);
  text-align: center; border: 2px solid rgba(255,255,255,.1);
  background: rgba(255,255,255,.03); transition: all var(--transition-base);
  position: relative;
}
.player-slot.filled { border-color: rgba(74,222,128,.3); background: rgba(74,222,128,.06); }
.player-slot.empty { border-style: dashed; opacity: .5; }
.player-slot .slot-avatar { font-size: 2rem; margin-block-end: var(--space-2xs); }
.player-slot .slot-name { font-size: 0.75rem; font-weight: 700; color: var(--text); }
.player-slot .slot-empty-text { font-size: 0.7rem; color: var(--dim); }
.player-slot.host { border-color: rgba(245,166,35,.4); }
.player-slot.host::after {
  content: "\1F451"; position: absolute; top: -0.5rem; inset-inline-end: -0.5rem; font-size: 0.8rem;
}

/* Game Area */
.chaos-game { display: flex; flex-direction: column; height: 100%; }
.phase-bar {
  display: flex; align-items: center; gap: var(--space-sm);
  padding: var(--space-sm) var(--space-md); background: rgba(255,255,255,.03);
  border-radius: var(--radius-lg); margin-block-end: var(--space-sm);
}
.phase-label { font-size: 0.85rem; font-weight: 700; color: var(--accent2); flex-shrink: 0; }
.phase-timer-bar {
  flex: 1; height: 4px; background: rgba(255,255,255,.08);
  border-radius: 2px; overflow: hidden;
}
.phase-timer-fill {
  height: 100%; background: linear-gradient(90deg, var(--accent), var(--accent2));
  transition: width 1s linear; border-radius: 2px;
}
.phase-timer-text { font-size: 0.8rem; font-weight: 900; color: var(--accent); min-width: 2.5rem; text-align: center; }
.your-role-badge {
  text-align: center; padding: var(--space-sm) var(--space-md);
  border-radius: var(--radius-full); margin-block-end: var(--space-sm);
  font-weight: 900; font-size: 0.9rem; letter-spacing: 1px;
}
.role-mafia { background: rgba(233,69,96,.15); border: 1px solid rgba(233,69,96,.3); color: #ff5555; }
.role-citizen { background: rgba(74,222,128,.1); border: 1px solid rgba(74,222,128,.25); color: #44ff99; }

/* Chat */
.chat-area {
  flex: 1; overflow-y: auto; padding: var(--space-sm);
  display: flex; flex-direction: column; gap: var(--space-2xs);
  min-height: 12.5rem; max-height: 45vh; background: rgba(0,0,0,.2);
  border-radius: var(--radius-lg); margin-block-end: var(--space-sm);
  scrollbar-width: thin; scrollbar-color: rgba(255,255,255,.09) transparent;
}
.chat-msg {
  display: flex; gap: var(--space-xs); padding: var(--space-xs) var(--space-sm);
  border-radius: var(--radius-md); animation: fadeIn .3s ease;
}
.chat-msg-self { background: rgba(233,69,96,.08); }
.chat-msg-other { background: rgba(255,255,255,.04); }
.chat-avatar { font-size: 1.2rem; flex-shrink: 0; }
.chat-body { flex: 1; }
.chat-username { font-size: 0.72rem; font-weight: 700; color: var(--accent2); margin-block-end: 2px; }
.chat-text { font-size: 0.85rem; color: var(--text); line-height: 1.5; word-break: break-word; direction: auto; }
.chat-time { font-size: 0.62rem; color: var(--dim); margin-block-start: 2px; }
.chat-input-bar { display: flex; gap: var(--space-xs); }
.chat-input-bar input {
  flex: 1; padding: var(--space-sm) var(--space-md);
  background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.1);
  border-radius: var(--radius-md); color: #fff; font-family: inherit; font-size: 0.9rem;
  outline: none; transition: border-color var(--transition-base);
  min-height: var(--touch-min);
}
.chat-input-bar input:focus { border-color: var(--accent); box-shadow: 0 0 0 3px rgba(233,69,96,.12); }
.chat-input-bar button {
  padding: var(--space-sm) var(--space-md); background: var(--accent); border: none;
  border-radius: var(--radius-md); color: #fff; font-family: inherit; font-weight: 700;
  cursor: pointer; transition: all var(--transition-fast);
  min-height: var(--touch-min);
}
.chat-input-bar button:hover { background: #c0392b; }
.chat-input-bar button:focus-visible { outline: 2px solid var(--accent2); outline-offset: 2px; }

/* Voting */
.vote-area { display: flex; gap: var(--space-sm); justify-content: center; flex-wrap: wrap; padding-block: var(--space-md); }
.vote-card {
  width: 7.5rem; padding: var(--space-md) var(--space-sm); border-radius: var(--radius-md);
  text-align: center; cursor: pointer; border: 2px solid rgba(255,255,255,.1);
  background: rgba(255,255,255,.03); transition: all var(--transition-base);
  min-height: var(--touch-min);
}
.vote-card:hover { border-color: var(--accent); transform: translateY(-4px); box-shadow: 0 8px 24px rgba(233,69,96,.2); }
.vote-card:focus-visible { outline: 2px solid var(--accent2); outline-offset: 2px; }
.vote-card.voted { border-color: var(--accent); background: rgba(233,69,96,.12); }
.vote-card .vote-avatar { font-size: 2.5rem; margin-block-end: var(--space-xs); }
.vote-card .vote-name { font-size: 0.82rem; font-weight: 700; }
.vote-status { text-align: center; font-size: 0.8rem; color: var(--dim); margin-block-start: var(--space-sm); }

/* Result */
.result-area {
  text-align: center; padding: 1.875rem var(--space-md);
  animation: popIn .5s cubic-bezier(.34,1.56,.64,1);
}
.result-icon { font-size: 4rem; margin-block-end: var(--space-sm); }
.result-title { font-size: var(--font-size-2xl); font-weight: 900; margin-block-end: var(--space-2xs); }
.result-title.win { color: #44ff99; text-shadow: 0 0 20px rgba(0,255,100,.4); }
.result-title.lose { color: #ff5555; text-shadow: 0 0 20px rgba(255,0,0,.4); }
.result-sub { font-size: 0.85rem; color: var(--dim); margin-block-end: var(--space-md); }
.result-roles { display: flex; gap: var(--space-sm); justify-content: center; flex-wrap: wrap; margin-block-end: var(--space-md); }
.result-role-card {
  padding: var(--space-sm) var(--space-md); border-radius: var(--radius-lg);
  text-align: center; min-width: 6.25rem;
}
.result-role-card.mafia { background: rgba(233,69,96,.1); border: 1px solid rgba(233,69,96,.25); }
.result-role-card.citizen { background: rgba(74,222,128,.08); border: 1px solid rgba(74,222,128,.2); }
.result-role-avatar { font-size: 1.8rem; margin-block-end: var(--space-2xs); }
.result-role-name { font-size: 0.82rem; font-weight: 700; }
.result-role-label { font-size: 0.7rem; color: var(--dim); margin-block-start: 2px; }
.result-role-card.mafia .result-role-label { color: #ff7777; }
.result-role-card.citizen .result-role-label { color: #86efac; }

/* Profile Screen */
.profile-card { padding: var(--space-lg); text-align: center; margin-block-end: var(--space-md); }
.profile-avatar-big { font-size: 4rem; margin-block-end: var(--space-sm); }
.profile-username { font-size: 1.3rem; font-weight: 900; margin-block-end: var(--space-2xs); }
.profile-id { font-size: 0.72rem; color: var(--dim); margin-block-end: var(--space-sm); }
.profile-bio { font-size: 0.85rem; color: rgba(255,255,255,.6); margin-block-end: var(--space-md); }
.profile-stats { display: flex; gap: var(--space-md); justify-content: center; }
.profile-stat { text-align: center; }
.profile-stat-num { font-size: 1.3rem; font-weight: 900; display: block; }
.profile-stat-label { font-size: var(--font-size-xs); color: var(--dim); }
.profile-stat.wins .profile-stat-num { color: #44ff99; }
.profile-stat.losses .profile-stat-num { color: #ff5555; }
.profile-extra-stats {
  display: flex; flex-direction: column; gap: var(--space-xs);
  margin: var(--space-sm) 0; padding: var(--space-sm);
  background: rgba(255,255,255,.03); border-radius: var(--radius-md);
  font-size: var(--font-size-sm); color: var(--dim);
}
.extra-stat { display: flex; align-items: center; gap: var(--space-xs); }
.extra-stat-icon { font-size: 1rem; }

/* XP Bar */
.profile-xp-bar {
  display: flex; align-items: center; gap: var(--space-xs);
  margin: var(--space-xs) 0; justify-content: center;
}
.xp-level { font-size: 0.75rem; font-weight: 700; color: var(--accent2); }
.xp-bar {
  width: 80px; height: 6px; background: rgba(255,255,255,.06);
  border-radius: 3px; overflow: hidden;
}
.xp-fill {
  height: 100%; background: linear-gradient(90deg, var(--accent2), #4ade80);
  border-radius: 3px; transition: width 0.5s ease;
}
.xp-text { font-size: 0.65rem; color: var(--dim); font-family: monospace; }

/* Avatar selector */
.profile-avatar-select {
  display: flex; align-items: center; gap: var(--space-sm);
  justify-content: center; margin: var(--space-sm) 0;
  flex-wrap: wrap;
}
.avatar-label { font-size: 0.75rem; color: var(--dim); }
.avatar-options { display: flex; gap: 4px; flex-wrap: wrap; }
.avatar-opt {
  width: 2.2rem; height: 2.2rem; border-radius: 50%;
  border: 2px solid rgba(255,255,255,.08); background: rgba(255,255,255,.03);
  font-size: 1.1rem; cursor: pointer; display: flex;
  align-items: center; justify-content: center;
  transition: all 0.15s;
}
.avatar-opt:active { transform: scale(0.9); }
.avatar-opt.active { border-color: var(--accent2); background: rgba(245,166,35,.12); }
.profile-edit-row {
  display: flex; gap: var(--space-xs); margin-block-start: var(--space-md);
  justify-content: center; flex-wrap: wrap;
}
.profile-edit-row input, .profile-edit-row select {
  padding: var(--space-xs) var(--space-sm); background: rgba(255,255,255,.05);
  border: 1px solid rgba(255,255,255,.1); border-radius: var(--radius-sm);
  color: #fff; font-family: inherit; font-size: 0.85rem; outline: none;
  transition: border-color var(--transition-base);
  min-height: var(--touch-min);
}
.profile-edit-row input:focus, .profile-edit-row select:focus {
  border-color: var(--accent2); box-shadow: 0 0 0 3px rgba(245,166,35,.12);
}

/* Friends */
.friends-section { padding: var(--space-md); margin-block-end: var(--space-md); }
.friend-item {
  display: flex; align-items: center; gap: var(--space-sm); padding: var(--space-sm) var(--space-sm);
  border-radius: var(--radius-md); background: rgba(255,255,255,.03);
  margin-block-end: var(--space-2xs); transition: all var(--transition-fast);
}
.friend-item:hover { background: rgba(255,255,255,.06); }
.friend-avatar { font-size: 1.4rem; }
.friend-info { flex: 1; }
.friend-name { font-size: var(--font-size-base); font-weight: 700; }
.friend-status { font-size: 0.68rem; }
.friend-online { color: #44ff99; }
.friend-offline { color: var(--dim); }
.friend-actions { display: flex; gap: var(--space-2xs); }
.friend-btn {
  padding: var(--space-2xs) var(--space-sm); border-radius: var(--radius-sm); border: none;
  font-family: inherit; font-size: 0.72rem; font-weight: 700; cursor: pointer;
  transition: all var(--transition-fast); min-height: var(--touch-min);
  display: inline-flex; align-items: center;
}
.friend-btn-invite { background: rgba(233,69,96,.15); color: var(--accent); }
.friend-btn-invite:hover { background: rgba(233,69,96,.25); }
.friend-btn-remove { background: rgba(255,255,255,.05); color: var(--dim); }
.friend-btn-accept { background: rgba(74,222,128,.15); color: #44ff99; }
.friend-btn-reject { background: rgba(255,255,255,.05); color: var(--dim); }
.friend-btn:focus-visible { outline: 2px solid var(--accent2); outline-offset: 2px; }

/* Search */
.search-section { padding: var(--space-md); }
.search-bar { display: flex; gap: var(--space-xs); margin-block-end: var(--space-sm); }
.search-bar input {
  flex: 1; padding: 0.6875rem var(--space-md); background: rgba(255,255,255,.05);
  border: 1px solid rgba(255,255,255,.1); border-radius: var(--radius-md);
  color: #fff; font-family: inherit; font-size: 0.9rem; outline: none;
  transition: border-color var(--transition-base);
  min-height: var(--touch-min);
}
.search-bar input:focus { border-color: var(--accent2); box-shadow: 0 0 0 3px rgba(245,166,35,.12); }
.search-bar button {
  padding: 0.6875rem var(--space-md); background: var(--accent2); border: none;
  border-radius: var(--radius-md); color: #000; font-family: inherit; font-weight: 700;
  cursor: pointer; min-height: var(--touch-min);
  transition: all var(--transition-fast);
}
.search-bar button:hover { transform: translateY(-1px); box-shadow: 0 4px 12px rgba(245,166,35,.3); }
.search-bar button:focus-visible { outline: 2px solid var(--accent2); outline-offset: 2px; }
.search-results { display: flex; flex-direction: column; gap: var(--space-2xs); }
.search-result-item {
  display: flex; align-items: center; gap: var(--space-sm); padding: var(--space-sm) var(--space-sm);
  border-radius: var(--radius-md); background: rgba(255,255,255,.03);
  transition: all var(--transition-fast);
}
.search-result-item:hover { background: rgba(255,255,255,.06); }

/* ── End Discussion Vote ── */
.end-vote-bar { display: flex; align-items: center; gap: var(--space-xs); margin-block-start: var(--space-xs); justify-content: center; }
.end-vote-btn {
  padding: var(--space-2xs) var(--space-md); border-radius: var(--radius-full);
  border: 1px solid rgba(245,166,35,.3); background: rgba(245,166,35,.1);
  color: var(--accent2); font-family: inherit; font-size: var(--font-size-sm);
  font-weight: 700; cursor: pointer; transition: all var(--transition-fast);
  min-height: var(--touch-min); display: inline-flex; align-items: center;
}
.end-vote-btn:hover { background: rgba(245,166,35,.2); }
.end-vote-btn:focus-visible { outline: 2px solid var(--accent2); outline-offset: 2px; }
.end-vote-count { font-size: 0.72rem; color: var(--dim); }

/* ── Player Circles ── */
.players-circles { display: flex; justify-content: center; gap: var(--space-md); margin-block: var(--space-sm); flex-wrap: wrap; }
.player-circle {
  width: 5rem; text-align: center; position: relative;
}
.pc-avatar {
  width: 3.75rem; height: 3.75rem; border-radius: 50%; margin: 0 auto var(--space-2xs);
  display: flex; align-items: center; justify-content: center;
  font-size: 1.8rem; background: rgba(255,255,255,.06);
  border: 3px solid rgba(255,255,255,.12); transition: all var(--transition-base);
}
.pc-name {
  font-size: 0.7rem; font-weight: 700; color: var(--text);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.player-circle.speaking .pc-avatar {
  border-color: #44ff99;
  box-shadow: 0 0 0 4px rgba(68,255,153,.2), 0 0 20px rgba(68,255,153,.3);
  animation: speakPulse 1s ease-in-out infinite;
}
@keyframes speakPulse {
  0%, 100% { box-shadow: 0 0 0 4px rgba(68,255,153,.2), 0 0 20px rgba(68,255,153,.3); }
  50% { box-shadow: 0 0 0 8px rgba(68,255,153,.1), 0 0 30px rgba(68,255,153,.4); }
}

/* ── Voice Chat ── */
.voice-controls { display: flex; gap: var(--space-2xs); margin-block-end: var(--space-sm); }
.voice-btn {
  padding: var(--space-xs) var(--space-md); border-radius: var(--radius-full); border: none;
  cursor: pointer; font-family: inherit; font-size: var(--font-size-sm); font-weight: 700;
  transition: all var(--transition-fast); min-height: var(--touch-min);
}
.voice-off { background: rgba(255,255,255,.07); color: var(--dim); border: 1px solid rgba(255,255,255,.1); }
.voice-off:hover { background: rgba(255,255,255,.12); color: #fff; }
.voice-on { background: rgba(74,222,128,.15); color: #44ff99; border: 1px solid rgba(74,222,128,.3); animation: voicePulse 1.5s infinite; }
.voice-muted { background: rgba(233,69,96,.15); color: #ff5555; border: 1px solid rgba(233,69,96,.3); }
.voice-btn:focus-visible { outline: 2px solid var(--accent2); outline-offset: 2px; }
@keyframes voicePulse { 0%,100% { box-shadow: 0 0 0 0 rgba(74,222,128,.3); } 50% { box-shadow: 0 0 0 8px rgba(74,222,128,0); } }

/* ── Room Invite Notification ── */
.invite-notification {
  position: fixed; top: var(--space-md); left: 50%; transform: translateX(-50%); z-index: 9000;
  max-width: 22.5rem; width: 90%; animation: popIn var(--transition-bounce);
}
.invite-notif-content {
  background: #0d0d1c; border: 2px solid rgba(233,69,96,.4); border-radius: 1.25rem;
  padding: var(--space-md) var(--space-md); text-align: center;
  box-shadow: 0 10px 40px rgba(233,69,96,.3), 0 0 60px rgba(233,69,96,.1);
}
.invite-notif-text { font-size: 0.9rem; color: var(--text); margin-block-end: var(--space-2xs); }
.invite-notif-code { font-size: 1.1rem; font-weight: 900; color: var(--accent2); letter-spacing: 4px; margin-block-end: var(--space-sm); }
.invite-notif-actions { display: flex; gap: var(--space-xs); justify-content: center; }

/* ── Direct Messages ── */
.dm-convo-item {
  display: flex; align-items: center; gap: var(--space-sm); padding: var(--space-sm) var(--space-sm);
  border-radius: var(--radius-lg); background: rgba(255,255,255,.03); cursor: pointer;
  margin-block-end: var(--space-2xs); transition: all var(--transition-fast);
}
.dm-convo-item:hover { background: rgba(255,255,255,.07); }
.dm-convo-avatar { font-size: 1.6rem; flex-shrink: 0; }
.dm-convo-info { flex: 1; min-width: 0; }
.dm-convo-name { font-size: var(--font-size-base); font-weight: 700; }
.dm-convo-last {
  font-size: 0.72rem; color: var(--dim); white-space: nowrap;
  overflow: hidden; text-overflow: ellipsis; margin-block-start: 2px;
}
.dm-convo-meta { text-align: start; flex-shrink: 0; }
.dm-convo-time { font-size: var(--font-size-xs); color: var(--dim); }
.dm-badge {
  background: var(--accent); color: #fff; font-size: var(--font-size-xs); font-weight: 900;
  width: 1.25rem; height: 1.25rem; border-radius: 50%; display: flex; align-items: center;
  justify-content: center; margin-block-start: var(--space-2xs);
}
#dmChatView { flex-direction: column; height: 60vh; }
.dm-chat-header {
  display: flex; align-items: center; gap: var(--space-sm); padding-block: var(--space-sm);
  margin-block-end: var(--space-xs); border-bottom: 1px solid rgba(255,255,255,.06);
}
.dm-back-btn {
  background: none; border: 1px solid rgba(255,255,255,.1); border-radius: var(--radius-sm);
  color: var(--dim); padding: var(--space-2xs) var(--space-sm); cursor: pointer;
  font-family: inherit; font-size: 0.8rem; min-height: var(--touch-min);
  display: inline-flex; align-items: center;
  transition: all var(--transition-fast);
}
.dm-back-btn:hover { color: #fff; background: rgba(255,255,255,.06); }
.dm-back-btn:focus-visible { outline: 2px solid var(--accent2); outline-offset: 2px; }
.dm-chat-avatar { font-size: 1.3rem; }
.dm-chat-name { font-weight: 700; font-size: var(--font-size-md); }
.dm-messages {
  flex: 1; overflow-y: auto; display: flex; flex-direction: column;
  gap: var(--space-2xs); padding-block: var(--space-xs);
  scrollbar-width: thin; scrollbar-color: rgba(255,255,255,.09) transparent;
}
.dm-msg {
  max-width: 80%; padding: var(--space-xs) var(--space-sm); border-radius: var(--radius-lg);
  font-size: 0.85rem; line-height: 1.5; word-break: break-word; direction: auto;
}
.dm-msg-me {
  align-self: flex-end; background: rgba(233,69,96,.12);
  border: 1px solid rgba(233,69,96,.2);
  border-end-start-radius: var(--radius-lg); border-end-end-radius: var(--space-2xs);
}
.dm-msg-other {
  align-self: flex-start; background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.08);
  border-end-end-radius: var(--radius-lg); border-end-start-radius: var(--space-2xs);
}
.dm-msg-time { font-size: 0.6rem; color: var(--dim); margin-block-start: 3px; }
.dm-msg-me .dm-msg-time { text-align: start; }
.dm-msg-other .dm-msg-time { text-align: end; }

/* ── Admin Panel ── */
.admin-stats { display: flex; gap: var(--space-sm); flex-wrap: wrap; justify-content: center; }
.admin-stat {
  flex: 1; min-width: 5rem; padding: var(--space-sm) var(--space-sm);
  border-radius: var(--radius-lg); text-align: center;
  background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.08);
}
.admin-stat-num { font-size: 1.4rem; font-weight: 900; display: block; color: var(--accent2); }
.admin-stat-label { font-size: var(--font-size-xs); color: var(--dim); }
.admin-users-list {
  display: flex; flex-direction: column; gap: var(--space-xs);
  max-height: 60vh; overflow-y: auto;
  scrollbar-width: thin; scrollbar-color: rgba(255,255,255,.09) transparent;
}
.admin-user-item {
  display: flex; align-items: center; gap: var(--space-sm); padding: var(--space-sm) var(--space-md);
  border-radius: var(--radius-lg); background: rgba(255,255,255,.03);
  border: 1px solid rgba(255,255,255,.06);
}
.admin-user-avatar { font-size: 1.6rem; flex-shrink: 0; }
.admin-user-info { flex: 1; min-width: 0; }
.admin-user-name { font-size: 0.9rem; font-weight: 700; }
.admin-user-email { font-size: 0.72rem; color: var(--dim); margin-block-start: 2px; }
.admin-user-meta { font-size: 0.68rem; color: var(--dim); margin-block-start: 3px; }
.admin-user-actions { display: flex; gap: var(--space-2xs); flex-shrink: 0; flex-wrap: wrap; }

/* ── Responsive ── */
@media (max-width: 30em) {
  .vote-card { width: 5.625rem; padding: var(--space-sm) var(--space-xs); }
  .room-code-display { letter-spacing: 0.375rem; }
  .player-slot { width: 5.3125rem; padding: var(--space-sm) var(--space-xs); }
  .player-slots { gap: var(--space-xs); }
  .players-circles { gap: var(--space-xs); }
  .player-circle { width: 4rem; }
  .pc-avatar { width: 2.75rem; height: 2.75rem; font-size: 1.3rem; }
  .chat-area { max-height: 35vh; }
  .chaos-entry { padding: var(--space-md); }
  .invite-notif-content { padding: var(--space-sm); }
}

@media (max-width: 48em) {
  .result-roles { gap: var(--space-xs); }
  .result-role-card { min-width: 5rem; padding: var(--space-sm); }
  .admin-user-item { flex-wrap: wrap; }
  .admin-user-actions { width: 100%; justify-content: flex-end; margin-block-start: var(--space-xs); }
}