/**
 * Na Noże - Mobile-First Smartphone Client Stylesheet
 */

.client-app-container {
  max-width: 540px;
  margin: 0 auto;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  background: transparent;
  padding-bottom: 74px; /* Space for bottom navigation */
  position: relative;
  z-index: 2;
}

/* Client Top Header */
.client-header {
  background: var(--bg-secondary);
  border-bottom: 1px solid var(--border-color);
  padding: 12px 16px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  position: sticky;
  top: 0;
  z-index: 100;
}

.client-header-info {
  display: flex;
  flex-direction: column;
}

.client-brand-row {
  display: flex;
  align-items: center;
  gap: 8px;
}

.client-logo-img {
  max-height: 24px;
  max-width: 60px;
  object-fit: contain;
}

.client-app-title {
  font-size: 1.1rem;
  color: var(--gold);
}

.client-phase-subtitle {
  font-size: 0.8rem;
  color: var(--text-muted);
}



.client-timer-display.timer-urgent {
  color: #ff3333 !important;
  animation: pulseGlow 0.6s infinite;
}

.client-timer-display.timer-overtime {
  color: #ff4d4d !important;
  text-shadow: 0 0 8px rgba(255, 77, 77, 0.7);
  animation: pulseGlow 1.2s infinite;
}

.action-overtime-banner {
  background: rgba(220, 53, 69, 0.22);
  border: 1px solid rgba(220, 53, 69, 0.85);
  color: #ffcccc;
  padding: 12px 14px;
  border-radius: 8px;
  margin-bottom: 14px;
  text-align: center;
  font-size: 0.95rem;
  line-height: 1.4;
  box-shadow: 0 0 12px rgba(220, 53, 69, 0.3);
}

.client-timer-badge {
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  padding: 4px 10px;
  border-radius: 8px;
  font-family: monospace;
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--gold);
}

/* Main Content Area */
.client-content {
  padding: 16px;
  flex: 1;
}

/* -------------------------------------------------------------
   JOIN VIEW
   ------------------------------------------------------------- */
.join-card {
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  border-radius: 14px;
  padding: 24px;
  margin-top: 30px;
  box-shadow: var(--shadow-md);
  text-align: center;
}

.join-brand-wrap {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  margin-bottom: 8px;
}

.join-brand-logo {
  max-height: 48px;
  max-width: 90px;
  object-fit: contain;
}

.join-brand-title {
  font-size: 2.2rem;
  color: var(--gold);
  margin-bottom: 0;
}

.join-subtext {
  font-size: 0.95rem;
  color: var(--text-muted);
  margin-bottom: 24px;
}

.form-group {
  margin-bottom: 18px;
  text-align: left;
}

.form-group label {
  display: block;
  font-size: 0.85rem;
  color: var(--text-muted);
  margin-bottom: 6px;
  font-weight: 600;
}

.room-input {
  font-family: monospace;
  font-size: 1.3rem;
  text-transform: uppercase;
  letter-spacing: 3px;
  text-align: center;
}

/* -------------------------------------------------------------
   LOBBY CHARACTER SELECTION VIEW
   ------------------------------------------------------------- */
.lobby-heading {
  font-size: 1.3rem;
  margin-bottom: 6px;
}

.lobby-instruction {
  font-size: 0.88rem;
  color: var(--text-muted);
  margin-bottom: 16px;
}

.characters-grid {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-bottom: 24px;
}

.character-card {
  background: var(--bg-card);
  border: 2px solid var(--border-color);
  border-radius: 12px;
  padding: 14px;
  cursor: pointer;
  transition: all 0.2s;
  touch-action: manipulation;
  user-select: none;
  -webkit-user-select: none;
}

.character-card:active {
  transform: scale(0.98);
}

.character-card.selected {
  border-color: var(--gold) !important;
  background: linear-gradient(135deg, var(--bg-card), rgba(212, 175, 55, 0.22)) !important;
  box-shadow: 0 0 15px var(--gold-glow);
}

.character-card.disabled {
  opacity: 0.4;
  cursor: not-allowed;
  pointer-events: none;
}

.char-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 6px;
}

.char-name {
  font-size: 1.05rem;
  color: var(--text-main);
}

.char-badge {
  font-size: 0.7rem;
  padding: 3px 8px;
  border-radius: 10px;
  background: var(--gold);
  color: var(--text-dark);
  font-weight: 800;
}

.char-badge.taken {
  background: #e74c3c;
  color: #fff;
}

.char-desc {
  font-size: 0.82rem;
  color: var(--text-muted);
  margin-bottom: 10px;
}

.char-traits {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.trait-tag {
  background: var(--bg-secondary);
  border: 1px solid var(--border-color);
  padding: 3px 8px;
  border-radius: 6px;
  font-size: 0.75rem;
  color: var(--gold);
}

.lobby-sticky-bottom {
  position: sticky;
  bottom: 12px;
  margin-top: 16px;
}

.btn-ready-toggle {
  width: 100%;
  padding: 16px;
  font-size: 1.15rem;
  border-radius: 10px;
}

.btn-ready-active {
  background: #2ecc71 !important;
  color: #fff !important;
  box-shadow: 0 0 15px rgba(46, 204, 113, 0.4);
}

/* -------------------------------------------------------------
   LOBBY ESTATE SELECTION (VIP & Non-VIP)
   ------------------------------------------------------------- */
.lobby-estate-section {
  margin: 12px 0 16px;
}

.vip-location-picker {
  background: linear-gradient(145deg, rgba(22, 28, 36, 0.95), rgba(15, 20, 27, 0.98));
  border: 2px solid var(--border-gold);
  border-radius: 14px;
  padding: 12px;
  box-shadow: 0 4px 18px rgba(0, 0, 0, 0.5), 0 0 12px rgba(212, 175, 55, 0.15);
}

.estate-picker-header {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 12px;
  padding-bottom: 8px;
  border-bottom: 1px solid rgba(212, 175, 55, 0.25);
}

.estate-picker-icon {
  font-size: 1.5rem;
}

.estate-picker-title-wrap {
  display: flex;
  flex-direction: column;
}

.estate-picker-title {
  font-size: 0.95rem;
  font-weight: 800;
  color: var(--gold);
  margin: 0;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.estate-picker-sub {
  font-size: 0.75rem;
  color: var(--text-muted);
}

.vip-location-cards-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
}

@media (max-width: 360px) {
  .vip-location-cards-grid {
    grid-template-columns: 1fr;
  }
}

.loc-choice-card {
  background: var(--bg-card);
  border: 2px solid var(--border-color);
  border-radius: 10px;
  overflow: hidden;
  cursor: pointer;
  transition: all 0.22s ease-in-out;
  display: flex;
  flex-direction: column;
  position: relative;
}

.loc-choice-card:hover {
  border-color: rgba(212, 175, 55, 0.6);
  transform: translateY(-2px);
}

.loc-choice-card.selected {
  border-color: #ffd700;
  box-shadow: 0 0 14px rgba(255, 215, 0, 0.45);
  background: linear-gradient(180deg, rgba(31, 39, 51, 0.95) 0%, rgba(45, 36, 18, 0.95) 100%);
}

.loc-choice-thumb-wrap {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  overflow: hidden;
}

.loc-choice-thumb {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.3s ease;
}

.loc-choice-card:hover .loc-choice-thumb {
  transform: scale(1.05);
}

.loc-choice-badge {
  position: absolute;
  top: 6px;
  right: 6px;
  background: #2ecc71;
  color: #fff;
  font-size: 0.65rem;
  font-weight: 800;
  padding: 2px 7px;
  border-radius: 10px;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.6);
  text-transform: uppercase;
}

.loc-choice-body {
  padding: 8px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  flex: 1;
}

.loc-choice-title {
  font-size: 0.85rem;
  font-weight: 800;
  color: var(--text-main);
  margin: 0;
  line-height: 1.2;
}

.loc-choice-card.selected .loc-choice-title {
  color: #ffd700;
}

.loc-choice-victim {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 4px;
  padding-top: 4px;
  border-top: 1px dashed rgba(255, 255, 255, 0.1);
}

.loc-victim-thumb {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  object-fit: cover;
  border: 1px solid var(--border-gold);
  flex-shrink: 0;
}

.loc-victim-meta {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.loc-victim-label {
  font-size: 0.6rem;
  color: var(--blood-bright);
  font-weight: 700;
  text-transform: uppercase;
  line-height: 1;
}

.loc-victim-name {
  font-size: 0.72rem;
  color: #e0e6ed;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  font-weight: 600;
}

/* Non-VIP Location Badge */
.non-vip-location-badge {
  background: linear-gradient(135deg, rgba(22, 28, 36, 0.9), rgba(15, 20, 27, 0.95));
  border: 1px solid var(--border-gold);
  border-radius: 10px;
  padding: 8px 12px;
  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.35);
}

.chosen-estate-mini-wrap {
  display: flex;
  align-items: center;
  gap: 12px;
}

.chosen-loc-thumb {
  width: 58px;
  height: 42px;
  border-radius: 6px;
  object-fit: cover;
  border: 1px solid rgba(212, 175, 55, 0.5);
  flex-shrink: 0;
}

.chosen-loc-text {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.chosen-loc-tag {
  font-size: 0.62rem;
  color: var(--gold);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.chosen-loc-name {
  font-size: 0.88rem;
  font-weight: 800;
  color: #fff;
  line-height: 1.2;
}

.chosen-loc-victim {
  font-size: 0.75rem;
  color: var(--text-muted);
}

/* VIP Start Game Controls */
.vip-panel {
  margin-top: 14px;
  background: linear-gradient(135deg, rgba(212, 175, 55, 0.15), rgba(20, 26, 36, 0.95));
  border: 2px solid var(--gold);
  border-radius: 12px;
  padding: 14px;
  text-align: center;
  box-shadow: 0 4px 18px rgba(0, 0, 0, 0.45);
}

.vip-badge-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin-bottom: 6px;
}

.vip-badge-icon {
  font-size: 1.3rem;
}

.vip-badge-label {
  font-weight: 800;
  font-size: 0.95rem;
  color: var(--gold);
  text-transform: uppercase;
  letter-spacing: 1px;
}

.vip-status-desc {
  font-size: 0.85rem;
  color: var(--text-muted);
  margin-bottom: 12px;
  line-height: 1.4;
}

.btn-vip-start {
  width: 100%;
  padding: 16px;
  font-size: 1.15rem;
  font-weight: 800;
  border: none;
  border-radius: 10px;
  background: linear-gradient(135deg, #d4af37, #f39c12);
  color: #11161d;
  cursor: pointer;
  transition: all 0.25s ease;
  box-shadow: 0 4px 15px rgba(212, 175, 55, 0.4);
  text-transform: uppercase;
  letter-spacing: 1px;
  touch-action: manipulation;
}

.btn-vip-start:disabled {
  opacity: 0.45;
  cursor: not-allowed;
  box-shadow: none;
  background: #3a4454;
  color: #8b9bb4;
}

.btn-vip-start:not(:disabled) {
  animation: pulse-vip 2s infinite alternate;
}

@keyframes pulse-vip {
  0% { transform: scale(1); box-shadow: 0 0 10px rgba(212, 175, 55, 0.5); }
  100% { transform: scale(1.02); box-shadow: 0 0 24px rgba(212, 175, 55, 0.9); }
}

.non-vip-waiting-panel {
  margin-top: 14px;
  padding: 12px;
  background: var(--bg-card);
  border: 1px dashed var(--border-color);
  border-radius: 10px;
  text-align: center;
}

.waiting-vip-text {
  font-size: 0.85rem;
  color: var(--text-muted);
  margin: 0;
}

/* -------------------------------------------------------------
   GAME TABS & DOSSIER
   ------------------------------------------------------------- */
.role-badge {
  display: inline-block;
  padding: 6px 14px;
  border-radius: 20px;
  font-size: 0.95rem;
  font-weight: 800;
  letter-spacing: 1px;
  margin-bottom: 16px;
}

.badge-murderer {
  background: var(--blood);
  color: #fff;
  box-shadow: var(--shadow-blood);
}

.badge-innocent {
  background: var(--bg-card);
  border: 1px solid var(--gold);
  color: var(--gold);
}

.dossier-card {
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  border-radius: 12px;
  padding: 16px;
  margin-bottom: 14px;
}

.dossier-card-title {
  font-size: 1rem;
  margin-bottom: 10px;
  color: var(--gold);
  border-bottom: 1px solid var(--border-color);
  padding-bottom: 6px;
}

.traits-list {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.trait-item {
  font-size: 0.9rem;
  color: var(--text-main);
}

.secret-innocent-box {
  background: rgba(184, 34, 43, 0.12);
  border: 1px solid var(--blood);
  border-radius: 8px;
  padding: 12px;
}

.secret-warning-title {
  color: var(--blood-bright);
  font-size: 0.95rem;
  margin-bottom: 4px;
}

.secret-desc {
  font-size: 0.88rem;
  line-height: 1.4;
  margin-bottom: 8px;
}

.secret-alert {
  font-size: 0.78rem;
  color: #ff7675;
  font-style: italic;
}

.secret-murderer-box {
  background: rgba(212, 175, 55, 0.1);
  border: 1px solid var(--gold);
  border-radius: 8px;
  padding: 12px;
}

.alibi-log-row {
  display: flex;
  gap: 10px;
  padding: 8px 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

.alibi-time-tag {
  font-family: monospace;
  font-weight: 700;
  color: var(--gold);
  min-width: 50px;
}

.alibi-log-desc {
  font-size: 0.85rem;
}

.bluff-suggestion {
  color: #3498db;
  font-size: 0.78rem;
  margin-top: 4px;
}

/* -------------------------------------------------------------
   ACTION TAB
   ------------------------------------------------------------- */
.action-heading {
  font-size: 1.1rem;
  margin-bottom: 14px;
}

.action-section {
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  border-radius: 12px;
  padding: 14px;
  margin-bottom: 14px;
}

.action-section h4 {
  font-size: 1rem;
  color: var(--gold);
  margin-bottom: 4px;
}

.section-hint {
  font-size: 0.82rem;
  color: var(--text-muted);
  margin-bottom: 12px;
}

.room-buttons-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}

.btn-room-action, .btn-declare-room {
  background: var(--bg-secondary);
  border: 1px solid var(--border-color);
  color: var(--text-main);
  padding: 6px 10px;
  border-radius: 10px;
  font-weight: 600;
  font-size: 0.85rem;
  display: flex;
  align-items: center;
  gap: 10px;
  text-align: left;
  transition: all 0.2s ease;
  overflow: hidden;
}

.btn-room-action:hover, .btn-declare-room:hover {
  border-color: var(--gold);
  background: var(--bg-card);
  transform: translateY(-1px);
}

.room-btn-thumb {
  width: 48px;
  height: 48px;
  border-radius: 8px;
  object-fit: cover;
  flex-shrink: 0;
  border: 1px solid rgba(212, 175, 55, 0.3);
}

.room-btn-text-wrap {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.room-btn-name {
  font-weight: 700;
  color: #fff;
  font-size: 0.88rem;
}

.room-btn-hint {
  font-size: 0.72rem;
  color: var(--gold);
}

.suspects-select-row {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.observe-action-buttons {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}

.sabotage-row {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.action-done-notice, .action-locked-notice {
  background: var(--bg-card);
  border-radius: 12px;
  padding: 24px;
  text-align: center;
  border: 1px solid var(--border-color);
}

/* -------------------------------------------------------------
   DECLARATION & CONFRONTATION TAB
   ------------------------------------------------------------- */
.declaration-form-box {
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  border-radius: 12px;
  padding: 16px;
}

.declaration-hint {
  font-size: 0.85rem;
  color: var(--text-muted);
  margin: 8px 0 16px;
}

.declaration-rooms-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.btn-declare-room {
  background: var(--bg-secondary);
  border: 1px solid var(--border-gold);
  color: var(--text-main);
  padding: 14px;
  border-radius: 8px;
  font-weight: 700;
  text-align: left;
}

.btn-declare-room:hover {
  background: var(--bg-card-hover);
}

.declaration-done-box {
  background: var(--bg-card);
  border: 1px solid var(--border-gold);
  border-radius: 12px;
  padding: 20px;
  text-align: center;
}

.waiting-declaration-status {
  margin-top: 16px;
  padding: 14px;
  background: var(--bg-secondary);
  border-radius: 10px;
  border: 1px dashed rgba(212, 175, 55, 0.4);
}

.waiting-players-tags {
  margin-top: 8px;
  font-size: 0.88rem;
  color: var(--text-muted);
}

.waiting-players-tags strong {
  color: #f39c12;
}

.waiting-players-tags.ready {
  color: #2ecc71;
  font-weight: 700;
}

/* Checkbox label styling for Duel Planning */
.checkbox-label {
  display: flex;
  align-items: center;
  gap: 10px;
  background: var(--bg-secondary);
  border: 2px solid var(--border-color);
  padding: 12px;
  border-radius: 8px;
  cursor: pointer;
  font-size: 0.9rem;
  font-weight: 600;
  transition: all 0.2s ease;
  user-select: none;
  -webkit-user-select: none;
}

.checkbox-label:hover {
  border-color: var(--gold);
}

.checkbox-label.selected {
  border-color: var(--gold) !important;
  background: rgba(212, 175, 55, 0.15) !important;
  box-shadow: 0 0 10px var(--gold-glow);
}

.checkbox-label input[type="checkbox"] {
  width: 20px;
  height: 20px;
  accent-color: var(--gold);
  cursor: pointer;
}

/* Objection Callout in Confrontation */
.objection-alert-zone {
  margin-top: 16px;
}

.objection-callout-title {
  color: var(--blood-bright);
  font-size: 1.1rem;
  font-weight: 900;
  margin-bottom: 12px;
  text-align: center;
}

.counter-proof-card {
  background: rgba(184, 34, 43, 0.15);
  border: 2px solid var(--blood-bright);
  border-radius: 12px;
  padding: 14px;
  margin-bottom: 14px;
  box-shadow: var(--shadow-blood);
}

.target-name {
  font-size: 0.95rem;
  margin-bottom: 6px;
}

.counter-reason {
  font-size: 0.9rem;
  color: var(--gold);
  font-weight: 600;
  margin-bottom: 12px;
}

.btn-trigger-objection {
  width: 100%;
  background: linear-gradient(135deg, var(--blood-bright), #96121b);
  color: #fff;
  font-size: 1.15rem;
  font-weight: 900;
  padding: 14px;
  border-radius: 8px;
  animation: pulseGlow 1s infinite;
  box-shadow: 0 0 20px rgba(231, 76, 60, 0.6);
}

.no-objections-note {
  background: var(--bg-card);
  border-radius: 10px;
  padding: 20px;
  text-align: center;
  color: var(--text-muted);
  font-size: 0.9rem;
}

/* -------------------------------------------------------------
   NOTEBOOK TAB
   ------------------------------------------------------------- */
.empty-notebook {
  background: var(--bg-card);
  border-radius: 12px;
  padding: 30px;
  text-align: center;
  color: var(--text-muted);
}

.clue-notebook-card {
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  border-radius: 10px;
  padding: 14px;
  margin-bottom: 12px;
}

.clue-notebook-card.critical-clue {
  border-color: var(--gold);
}

.clue-card-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 6px;
}

.clue-type-tag {
  font-size: 0.72rem;
  background: var(--bg-secondary);
  color: var(--gold);
  padding: 2px 6px;
  border-radius: 4px;
}

.clue-card-title {
  font-size: 0.95rem;
  color: var(--text-main);
}

.clue-card-body {
  font-size: 0.85rem;
  color: var(--text-muted);
  line-height: 1.4;
  margin-bottom: 10px;
}

.btn-publish-clue {
  width: 100%;
  background: var(--bg-secondary);
  border: 1px solid var(--border-gold);
  color: var(--gold);
  padding: 8px;
  border-radius: 6px;
  font-size: 0.8rem;
  font-weight: 700;
}

/* -------------------------------------------------------------
   FINAL ACCUSATION & RESULTS
   ------------------------------------------------------------- */
.accusation-box {
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  border-radius: 14px;
  padding: 20px;
}

/* Accusation Evidence Drawer & Review */
.accusation-evidence-section {
  margin-top: 14px;
  margin-bottom: 22px;
}

.btn-review-evidence {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: linear-gradient(135deg, rgba(212, 175, 55, 0.18), rgba(26, 32, 44, 0.95));
  border: 1.5px solid var(--gold);
  color: var(--gold-light);
  padding: 12px 16px;
  border-radius: 10px;
  font-weight: 700;
  font-size: 0.95rem;
  cursor: pointer;
  transition: all 0.2s ease;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.35);
}

.btn-review-evidence:hover,
.btn-review-evidence:active {
  background: linear-gradient(135deg, rgba(212, 175, 55, 0.28), rgba(30, 41, 59, 1));
  box-shadow: 0 0 16px rgba(212, 175, 55, 0.35);
}

.evidence-pill-count {
  background: var(--gold);
  color: var(--text-dark);
  font-size: 0.8rem;
  font-weight: 900;
  padding: 2px 9px;
  border-radius: 12px;
}

.toggle-arrow {
  font-size: 0.75rem;
  transition: transform 0.25s ease;
}

.toggle-arrow.rotated {
  transform: rotate(180deg);
}

.accusation-evidence-drawer {
  background: var(--bg-secondary);
  border: 1px solid rgba(212, 175, 55, 0.35);
  border-top: none;
  border-radius: 0 0 12px 12px;
  padding: 14px;
  max-height: 380px;
  overflow-y: auto;
}

.accusation-evidence-drawer.hidden {
  display: none;
}

.evidence-subtabs-nav {
  display: flex;
  gap: 6px;
  margin-bottom: 12px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  padding-bottom: 8px;
  overflow-x: auto;
}

.evidence-subtab-btn {
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid transparent;
  color: var(--text-muted);
  font-size: 0.8rem;
  font-weight: 600;
  padding: 6px 10px;
  border-radius: 6px;
  cursor: pointer;
  white-space: nowrap;
  transition: all 0.15s ease;
}

.evidence-subtab-btn.active {
  background: rgba(212, 175, 55, 0.15);
  color: var(--gold);
  border-color: rgba(212, 175, 55, 0.45);
}

.evidence-cards-container {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.evidence-empty-note {
  font-size: 0.85rem;
  color: var(--text-muted);
  font-style: italic;
  padding: 12px 0;
  text-align: center;
}

.evidence-item-card {
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 8px;
  padding: 14px;
  text-align: left;
}

.evidence-item-card.critical {
  border-left: 3px solid var(--blood-bright);
  background: rgba(192, 57, 43, 0.09);
}

.evidence-item-title {
  font-size: 0.88rem;
  font-weight: 700;
  color: var(--gold-light);
  margin-bottom: 4px;
}

.evidence-item-text {
  font-size: 0.82rem;
  color: var(--text-light);
  line-height: 1.4;
}

.evidence-item-meta {
  font-size: 0.72rem;
  color: var(--text-muted);
  margin-top: 5px;
  text-align: right;
}

.btn-submit-accusation {
  width: 100%;
  margin-top: 18px;
  padding: 14px;
  font-size: 1.05rem;
  font-weight: 800;
  letter-spacing: 0.5px;
}

.client-results-card {
  background: var(--bg-card);
  border: 2px solid var(--gold);
  border-radius: 16px;
  padding: 24px;
  text-align: center;
}

.results-title {
  font-size: 1.6rem;
  color: var(--gold);
  margin-bottom: 12px;
}

.rank-circle {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  background: var(--gold);
  color: var(--text-dark);
  font-size: 1.8rem;
  font-weight: 900;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 12px;
}

.final-dollar-amount {
  font-size: 2.2rem;
  color: var(--success);
  font-weight: 900;
}

.final-score-label {
  font-size: 0.85rem;
  color: var(--text-muted);
  margin-bottom: 12px;
}

.client-bankroll-banner {
  background: linear-gradient(135deg, rgba(46, 204, 113, 0.15), rgba(212, 175, 55, 0.15));
  border: 1px solid rgba(46, 204, 113, 0.4);
  border-radius: 10px;
  padding: 10px 14px;
  margin-bottom: 16px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.bankroll-label {
  font-size: 0.85rem;
  font-weight: 700;
  color: #a8b3cf;
}

.bankroll-val {
  font-size: 1.25rem;
  font-weight: 900;
  color: #2ecc71;
  text-shadow: 0 0 8px rgba(46, 204, 113, 0.4);
}

.epilogue-rematch-container {
  margin-top: 18px;
}

.lobby-player-bankroll {
  font-size: 0.75rem;
  color: #2ecc71;
  margin-top: 4px;
  background: rgba(46, 204, 113, 0.12);
  border: 1px solid rgba(46, 204, 113, 0.3);
  padding: 2px 6px;
  border-radius: 4px;
  display: inline-block;
}

.header-bankroll-pill {
  font-size: 0.75rem;
  color: #2ecc71;
  font-weight: 700;
  background: rgba(46, 204, 113, 0.15);
  border: 1px solid rgba(46, 204, 113, 0.3);
  padding: 1px 6px;
  border-radius: 10px;
  margin-left: 6px;
}

.my-breakdown-list {
  background: var(--bg-secondary);
  border-radius: 10px;
  padding: 14px;
  text-align: left;
  margin-bottom: 16px;
}

.my-breakdown-row {
  display: flex;
  justify-content: space-between;
  font-size: 0.85rem;
  padding: 6px 0;
  border-bottom: 1px solid var(--border-color);
}

.look-at-host-note {
  font-size: 0.82rem;
  color: var(--gold);
  font-style: italic;
}

/* -------------------------------------------------------------
   BOTTOM NAVIGATION BAR
   ------------------------------------------------------------- */
.bottom-nav {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  height: 64px;
  background: var(--bg-secondary);
  border-top: 1px solid var(--border-color);
  display: flex;
  justify-content: space-around;
  align-items: center;
  z-index: 1000;
  max-width: 540px;
  margin: 0 auto;
}

.nav-tab-btn {
  background: transparent;
  color: var(--text-muted);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  font-size: 0.72rem;
  padding: 8px;
  flex: 1;
}

.nav-tab-btn.active {
  color: var(--gold);
}

.nav-tab-icon {
  font-size: 1.25rem;
}

/* -------------------------------------------------------------
   AVATAR UPLOAD & DISPLAY STYLES
   ------------------------------------------------------------- */
.client-header-avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--bg-card);
  border: 2px solid var(--gold);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  flex-shrink: 0;
  margin-right: 10px;
}

.client-header-avatar img,
.header-avatar-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

#header-avatar-initial {
  font-weight: 700;
  font-size: 1.1rem;
  color: var(--gold);
}

.avatar-upload-group {
  margin-bottom: 20px;
}

.avatar-upload-row {
  display: flex;
  align-items: center;
  gap: 14px;
  background: rgba(255, 255, 255, 0.04);
  padding: 12px 14px;
  border-radius: 12px;
  border: 1px dashed var(--border-color);
  margin-top: 6px;
}

.avatar-preview-box {
  width: 58px;
  height: 58px;
  border-radius: 50%;
  background: var(--bg-secondary);
  border: 2px solid var(--gold);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  flex-shrink: 0;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.4);
}

.avatar-preview-box span {
  font-size: 1.3rem;
  font-weight: 700;
  color: var(--gold);
}

.avatar-preview-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.avatar-upload-actions {
  display: flex;
  flex-direction: column;
  gap: 5px;
  flex: 1;
}

.file-input-hidden {
  display: none !important;
}

.btn-avatar-file {
  display: inline-block;
  padding: 8px 14px;
  background: linear-gradient(135deg, #2a3447, #1b2330);
  border: 1px solid var(--gold);
  border-radius: 8px;
  color: var(--gold);
  font-size: 0.82rem;
  font-weight: 600;
  cursor: pointer;
  text-align: center;
  transition: all 0.2s ease;
}

.btn-avatar-file:hover,
.btn-avatar-file:active {
  background: var(--gold);
  color: #111;
}

.avatar-help-text {
  font-size: 0.72rem;
  color: var(--text-muted);
  line-height: 1.2;
}

.lobby-avatar-bar {
  margin-bottom: 18px;
}

.char-header-identity {
  display: flex;
  align-items: center;
  gap: 10px;
}

.char-card-avatar {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  object-fit: cover;
  border: 1px solid var(--gold);
  background: var(--bg-secondary);
}

/* =============================================================
   HOST-STYLE POSTER CARD PREVIEW ON MOBILE CLIENT
   ============================================================= */
.client-header-avatar {
  cursor: pointer;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.client-header-avatar:hover,
.client-header-avatar:active {
  transform: scale(1.08);
  box-shadow: 0 0 12px rgba(212, 175, 55, 0.5);
}

.dossier-host-card-box {
  display: flex;
  justify-content: center;
  margin-bottom: 18px;
}

.client-host-card-wrap {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
}

.player-lobby-card.client-version {
  position: relative;
  background: var(--bg-card);
  border: 2px solid var(--border-color);
  border-radius: 16px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  width: 230px;
  height: 320px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.55);
  transition: all 0.25s ease;
  cursor: pointer;
  margin: 0 auto;
}

.player-lobby-card.client-version.ready {
  border-color: var(--gold);
  box-shadow: 0 0 20px rgba(212, 175, 55, 0.4), 0 8px 24px rgba(0, 0, 0, 0.6);
}

.player-lobby-card.client-version .card-poster-wrap {
  position: relative;
  flex: 1;
  width: 100%;
  background: #10151e;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}

.player-lobby-card.client-version .poster-avatar-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
}

.player-lobby-card.client-version .poster-avatar-placeholder {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  height: 100%;
  background: radial-gradient(circle at center, #1b2332 0%, #0d121a 100%);
}

.player-lobby-card.client-version .placeholder-letter {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  background: rgba(212, 175, 55, 0.12);
  border: 2px dashed var(--gold);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.8rem;
  font-weight: 800;
  color: var(--gold);
}

.player-lobby-card.client-version .placeholder-hint {
  font-size: 0.78rem;
  color: var(--text-muted);
}

.player-lobby-card.client-version .card-status-badge {
  position: absolute;
  top: 10px;
  right: 10px;
  z-index: 2;
}

.player-lobby-card.client-version .status-pill {
  font-size: 0.7rem;
  font-weight: 800;
  padding: 3px 9px;
  border-radius: 12px;
  letter-spacing: 0.5px;
}

.player-lobby-card.client-version .pill-ready {
  background: rgba(39, 174, 96, 0.95);
  color: #fff;
  box-shadow: 0 0 10px rgba(39, 174, 96, 0.6);
}

.player-lobby-card.client-version .pill-wait {
  background: rgba(243, 156, 18, 0.95);
  color: #fff;
}

.player-lobby-card.client-version .card-caption-banner {
  background: linear-gradient(180deg, #141b27 0%, #0c1017 100%);
  padding: 14px;
  border-top: 1px solid rgba(212, 175, 55, 0.25);
  text-align: center;
}

.player-lobby-card.client-version .player-name {
  font-size: 0.98rem;
  font-weight: 800;
  color: #fff;
  margin-bottom: 2px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
}

.player-lobby-card.client-version .vip-player-tag {
  font-size: 0.65rem;
  background: var(--gold);
  color: var(--text-dark);
  padding: 2px 6px;
  border-radius: 6px;
  font-weight: 800;
}

.player-lobby-card.client-version .character-choice {
  font-size: 0.8rem;
  color: var(--gold-light);
  font-weight: 600;
}

.btn-preview-host-card {
  width: 100%;
  background: linear-gradient(135deg, rgba(212, 175, 55, 0.18), rgba(26, 32, 44, 0.9));
  border: 1px solid var(--gold);
  color: var(--gold-light);
  padding: 10px 14px;
  border-radius: 10px;
  font-weight: 700;
  font-size: 0.88rem;
  cursor: pointer;
  margin-top: 12px;
  margin-bottom: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  transition: all 0.2s ease;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}

.btn-preview-host-card:hover,
.btn-preview-host-card:active {
  background: linear-gradient(135deg, rgba(212, 175, 55, 0.32), rgba(30, 41, 59, 1));
  box-shadow: 0 0 14px rgba(212, 175, 55, 0.35);
}

/* Modal for full card preview */
.card-preview-modal {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
}

.card-preview-modal.hidden {
  display: none;
}

.card-preview-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.85);
  backdrop-filter: blur(4px);
}

.card-preview-dialog {
  position: relative;
  z-index: 2;
  background: var(--bg-card);
  border: 2px solid var(--gold);
  border-radius: 18px;
  padding: 22px 18px 18px 18px;
  display: flex;
  flex-direction: column;
  align-items: center;
  box-shadow: 0 0 32px rgba(212, 175, 55, 0.4);
  max-width: 300px;
  width: 100%;
}

.btn-close-card-modal {
  position: absolute;
  top: 10px;
  right: 12px;
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.2);
  color: #fff;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  font-size: 1rem;
  font-weight: 800;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s ease;
}

.btn-close-card-modal:hover {
  background: var(--blood-bright);
}

.card-modal-title {
  font-size: 0.82rem;
  font-weight: 700;
  color: var(--gold-light);
  margin-bottom: 12px;
  letter-spacing: 0.5px;
  text-transform: uppercase;
}

/* -------------------------------------------------------------
   CONFRONTATION DECLARATIONS LIST ON SMARTPHONE
   ------------------------------------------------------------- */
.confrontation-header-badge {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 8px;
}

.confrontation-hour-pill {
  background: rgba(212, 175, 55, 0.2);
  border: 1px solid var(--gold);
  color: var(--gold-light);
  padding: 3px 10px;
  border-radius: 12px;
  font-family: var(--font-title);
  font-weight: 700;
  font-size: 0.95rem;
}

.confrontation-lead {
  font-size: 0.86rem;
  color: var(--text-muted);
  margin-bottom: 14px;
}

.current-declarations-panel {
  background: rgba(20, 26, 36, 0.9);
  border: 1px solid var(--border-color);
  border-radius: 12px;
  padding: 12px;
  margin-bottom: 14px;
}

.declarations-panel-title {
  font-size: 0.88rem;
  color: var(--gold);
  margin-bottom: 10px;
  font-weight: 700;
}

.confrontation-declarations-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.confrontation-decl-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: var(--bg-card);
  border: 1px solid rgba(212, 175, 55, 0.25);
  border-radius: 10px;
  padding: 8px 10px;
  gap: 8px;
}

.confrontation-decl-item.decl-debunked {
  border-color: #ff3b30;
  background: rgba(184, 34, 43, 0.25);
}

.decl-person-col {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}

.decl-person-img {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  object-fit: cover;
  border: 1px solid var(--gold);
  flex-shrink: 0;
}

.decl-person-initial {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: rgba(212, 175, 55, 0.15);
  border: 1px solid var(--gold);
  color: var(--gold);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 0.9rem;
  flex-shrink: 0;
}

.decl-person-meta {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.decl-person-name {
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--parchment);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.decl-char-tag {
  font-size: 0.72rem;
  color: var(--text-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.decl-claim-col {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 2px;
  flex-shrink: 0;
}

.decl-hour-tag {
  font-size: 0.7rem;
  color: var(--gold-light);
  font-weight: 700;
}

.decl-claimed-room {
  font-size: 0.82rem;
  font-weight: 700;
  color: #fff;
}

.decl-debunked .decl-claimed-room {
  text-decoration: line-through;
  color: #ff8585;
}

.decl-lie-tag {
  font-size: 0.68rem;
  font-weight: 800;
  color: #ff3b30;
}

.decl-lie-tag.mini {
  margin-left: 6px;
}

.decl-ok-tag {
  font-size: 0.68rem;
  color: #2ecc71;
  font-weight: 600;
}

.past-declarations-accordion {
  background: rgba(14, 18, 26, 0.8);
  border: 1px dashed rgba(255, 255, 255, 0.15);
  border-radius: 10px;
  padding: 10px;
  margin-bottom: 14px;
}

.past-decls-title {
  font-size: 0.8rem;
  color: var(--parchment);
  margin-bottom: 6px;
}

.past-decls-list {
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.past-decl-row {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 0.76rem;
  color: #c0c5cc;
  padding: 3px 6px;
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.03);
}

.past-decl-row.decl-debunked {
  color: #ff8585;
  background: rgba(184, 34, 43, 0.2);
}

.past-decl-hour {
  font-weight: 700;
  color: var(--gold);
}

.evidence-hour-group {
  margin-bottom: 14px;
}

.evidence-hour-title {
  font-size: 0.9rem;
  color: var(--gold);
  border-bottom: 1px solid rgba(212, 175, 55, 0.3);
  padding-bottom: 4px;
  margin-bottom: 8px;
  font-weight: 700;
}


/* Weapon Selection Previews */
.weapon-preview-card {
  margin-top: 10px;
  background: rgba(18, 24, 38, 0.9);
  border: 1px solid var(--border-gold);
  border-radius: 10px;
  padding: 14px;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.45);
  transition: all 0.25s ease;
}

.weapon-preview-card.hidden {
  display: none;
}

.weapon-preview-inner {
  display: flex;
  gap: 12px;
  align-items: center;
}

.weapon-preview-img {
  width: 68px;
  height: 68px;
  border-radius: 8px;
  object-fit: contain;
  background: radial-gradient(circle at center, rgba(30, 41, 59, 0.9) 0%, rgba(10, 15, 26, 0.95) 100%);
  border: 1.5px solid var(--gold);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.5);
  flex-shrink: 0;
}

.weapon-preview-info {
  flex: 1;
  min-width: 0;
  text-align: left;
}

.weapon-preview-name {
  font-family: var(--font-serif);
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--gold-light);
  line-height: 1.25;
}

.weapon-preview-cat {
  font-size: 0.72rem;
  color: #e74c3c;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin: 2px 0 4px 0;
}

.weapon-preview-desc {
  font-size: 0.78rem;
  color: var(--text-light);
  line-height: 1.35;
  opacity: 0.9;
}

/* Clue & Notebook Weapon Image Thumbnails */
.clue-weapon-thumb-box {
  margin: 8px 0;
  border-radius: 8px;
  overflow: hidden;
  height: 140px;
  background: radial-gradient(circle at center, rgba(30, 41, 59, 0.85) 0%, rgba(10, 14, 22, 0.95) 100%);
  border: 1px solid var(--border-gold);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: inset 0 0 15px rgba(0, 0, 0, 0.6);
}

.clue-weapon-thumb {
  width: 100%;
  height: 100%;
  object-fit: contain;
  border-radius: 6px;
  display: block;
}

/* Client Epilogue Revealed Weapon */
.client-verdict-weapon-box {
  margin: 14px 0;
  background: rgba(192, 57, 43, 0.15);
  border: 1.5px solid #c0392b;
  border-radius: 10px;
  padding: 10px 14px;
  text-align: left;
}

.verdict-weapon-label {
  font-size: 0.78rem;
  text-transform: uppercase;
  color: #e74c3c;
  font-weight: 700;
  letter-spacing: 0.5px;
  margin-bottom: 6px;
}

.verdict-weapon-row {
  display: flex;
  align-items: center;
  gap: 12px;
}

.verdict-weapon-thumb {
  width: 50px;
  height: 50px;
  border-radius: 8px;
  object-fit: contain;
  background: radial-gradient(circle at center, rgba(30, 41, 59, 0.9) 0%, rgba(10, 15, 26, 0.95) 100%);
  border: 1.5px solid var(--gold);
  flex-shrink: 0;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.5);
}

.verdict-weapon-name {
  font-family: var(--font-serif);
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--gold-light);
}


/* Room selection & confirmation (anti-accidental click) */
.btn-room-action.selected, .btn-declare-room.selected {
  border: 2px solid var(--gold) !important;
  background: rgba(212, 175, 55, 0.22) !important;
  box-shadow: 0 0 16px rgba(212, 175, 55, 0.45) !important;
  transform: scale(1.02);
}

.btn-room-action.selected .room-btn-thumb, .btn-declare-room.selected .room-btn-thumb {
  border-color: var(--gold) !important;
  box-shadow: 0 0 10px rgba(212, 175, 55, 0.5);
}

.btn-room-action.selected .room-btn-hint, .btn-declare-room.selected .room-btn-hint {
  color: #2ecc71 !important;
  font-weight: 800 !important;
}

.room-selection-confirm-panel {
  margin-top: 14px;
  position: sticky;
  bottom: 8px;
  z-index: 10;
}

.btn-confirm-room-selection {
  width: 100%;
  padding: 14px 18px;
  font-size: 1.02rem;
  font-weight: 800;
  letter-spacing: 0.5px;
  border-radius: 10px;
  transition: all 0.25s ease;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.6);
}

.btn-confirm-room-selection:disabled {
  opacity: 0.45;
  background: #2c3e50 !important;
  border-color: #34495e !important;
  color: #95a5a6 !important;
  cursor: not-allowed;
  transform: none !important;
  box-shadow: none !important;
}

.btn-confirm-room-selection:not(:disabled) {
  animation: pulse-room-confirm 2s infinite ease-in-out;
}

@keyframes pulse-room-confirm {
  0% { box-shadow: 0 0 8px rgba(212, 175, 55, 0.4); }
  50% { box-shadow: 0 0 20px rgba(212, 175, 55, 0.85); transform: translateY(-1px); }
  100% { box-shadow: 0 0 8px rgba(212, 175, 55, 0.4); }
}


/* ============================================================
   GENTLE IN-APP TOAST & CONFIRM NOTIFICATIONS (NO BROWSER ALERTS)
   ============================================================ */
.client-toast-container {
  position: fixed;
  top: 14px;
  left: 50%;
  transform: translateX(-50%);
  width: calc(100% - 28px);
  max-width: 440px;
  z-index: 99999;
  display: flex;
  flex-direction: column;
  gap: 10px;
  pointer-events: none;
}

.client-toast {
  pointer-events: auto;
  display: flex;
  align-items: center;
  gap: 12px;
  background: rgba(18, 24, 38, 0.95);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid var(--border-gold);
  border-radius: 12px;
  padding: 12px 16px;
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.65), 0 0 10px rgba(212, 175, 55, 0.2);
  color: var(--text-light);
  font-size: 0.9rem;
  line-height: 1.4;
  animation: toast-slide-in 0.3s cubic-bezier(0.16, 1, 0.3, 1) forwards;
  transition: opacity 0.3s ease, transform 0.3s ease;
  cursor: pointer;
}

.client-toast.toast-leaving {
  opacity: 0;
  transform: translateY(-15px) scale(0.96);
}

.client-toast .toast-icon {
  font-size: 1.3rem;
  flex-shrink: 0;
  line-height: 1;
}

.client-toast .toast-body {
  flex: 1;
  min-width: 0;
  word-break: break-word;
}

.client-toast .toast-close {
  background: none;
  border: none;
  color: var(--text-muted);
  font-size: 1.1rem;
  padding: 4px;
  cursor: pointer;
  line-height: 1;
  transition: color 0.15s ease;
}

.client-toast .toast-close:hover {
  color: #fff;
}

/* Toast Variants */
.client-toast.toast-success {
  border-color: #2ecc71;
  background: linear-gradient(135deg, rgba(20, 35, 28, 0.96), rgba(14, 22, 18, 0.96));
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.65), 0 0 12px rgba(46, 204, 113, 0.3);
}

.client-toast.toast-warning {
  border-color: #f39c12;
  background: linear-gradient(135deg, rgba(38, 30, 18, 0.96), rgba(24, 18, 12, 0.96));
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.65), 0 0 12px rgba(243, 156, 18, 0.3);
}

.client-toast.toast-error {
  border-color: #e74c3c;
  background: linear-gradient(135deg, rgba(38, 18, 20, 0.96), rgba(24, 12, 14, 0.96));
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.65), 0 0 14px rgba(231, 76, 60, 0.4);
}

.client-toast.toast-objection {
  border-color: #c0392b;
  border-width: 2px;
  background: linear-gradient(135deg, rgba(60, 15, 18, 0.98), rgba(28, 8, 10, 0.98));
  box-shadow: 0 8px 35px rgba(192, 57, 43, 0.65), 0 0 20px rgba(231, 76, 60, 0.5);
  animation: toast-objection-shake 0.5s ease-in-out, toast-slide-in 0.3s ease forwards;
}

@keyframes toast-slide-in {
  from {
    opacity: 0;
    transform: translateY(-20px) scale(0.95);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

@keyframes toast-objection-shake {
  0%, 100% { transform: translateY(0) translateX(0); }
  20%, 60% { transform: translateY(0) translateX(-6px); }
  40%, 80% { transform: translateY(0) translateX(6px); }
}

/* Gentle In-App Confirm Modal */
.app-confirm-overlay {
  position: fixed;
  inset: 0;
  background: rgba(5, 8, 15, 0.82);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  z-index: 99998;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  animation: fadeIn 0.2s ease forwards;
}

.app-confirm-overlay.hidden {
  display: none !important;
}

.app-confirm-box {
  background: var(--bg-card);
  border: 1.5px solid var(--border-gold);
  border-radius: 14px;
  max-width: 380px;
  width: 100%;
  padding: 22px 20px;
  text-align: center;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.8), 0 0 20px rgba(212, 175, 55, 0.25);
  animation: zoomIn 0.22s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

.app-confirm-icon {
  font-size: 2.2rem;
  margin-bottom: 8px;
  line-height: 1;
}

.app-confirm-title {
  font-family: var(--font-serif);
  font-size: 1.25rem;
  color: var(--gold-light);
  margin-bottom: 8px;
  font-weight: 700;
}

.app-confirm-text {
  font-size: 0.92rem;
  color: var(--text-light);
  line-height: 1.45;
  margin-bottom: 20px;
}

.app-confirm-actions {
  display: flex;
  gap: 10px;
}

.app-confirm-actions button {
  flex: 1;
  padding: 12px;
  font-size: 0.95rem;
  font-weight: 700;
  border-radius: 8px;
}


/* Published Clue Badge & Style */
.clue-published-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: rgba(46, 204, 113, 0.15);
  border: 1px solid rgba(46, 204, 113, 0.45);
  color: #2ecc71;
  font-size: 0.8rem;
  font-weight: 700;
  padding: 8px 14px;
  border-radius: 8px;
  margin-top: 6px;
  letter-spacing: 0.3px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25);
}

.clue-published-badge .badge-icon {
  font-weight: 900;
  font-size: 0.9rem;
}

.clue-notebook-card.clue-is-published {
  border-left: 3px solid #2ecc71;
  background: rgba(46, 204, 113, 0.05);
}


/* -------------------------------------------------------------
   CLIENT EPILOGUE VOTES & SUMMARY
   ------------------------------------------------------------- */
.client-votes-reveal-box {
  margin: 15px 0 10px 0;
  width: 100%;
}

.client-votes-drawer {
  background: rgba(0, 0, 0, 0.4);
  border: 1px solid var(--border-gold);
  border-radius: 10px;
  padding: 12px;
  margin-top: 10px;
  text-align: left;
}

.client-votes-drawer.hidden {
  display: none !important;
}

.client-votes-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 6px;
}

.client-vote-card {
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  border-left: 3px solid var(--gold);
  border-radius: 8px;
  padding: 8px 10px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.client-vote-accuser, .client-vote-suspect {
  display: flex;
  align-items: center;
  gap: 8px;
}

.client-vote-thumb {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  object-fit: cover;
  border: 1px solid var(--gold);
}

.client-vote-details {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  margin-top: 4px;
}

.client-vote-pill {
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 4px;
  padding: 3px 8px;
  font-size: 0.78rem;
  color: #fff;
  display: flex;
  align-items: center;
  gap: 4px;
}

.client-votes-tally-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-top: 6px;
}

.client-tally-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  border-radius: 6px;
  padding: 6px 10px;
}

.client-tally-count {
  background: var(--gold);
  color: #0b0f19;
  font-weight: 800;
  font-size: 0.82rem;
  padding: 3px 8px;
  border-radius: 10px;
}

/* -------------------------------------------------------------
   CLIENT EPILOGUE ALL CLUES DRAWER
   ------------------------------------------------------------- */
.client-clues-reveal-box {
  margin: 10px 0 10px 0;
  width: 100%;
}

.client-clues-drawer {
  background: rgba(0, 0, 0, 0.45);
  border: 1px solid var(--border-gold);
  border-radius: 10px;
  padding: 12px;
  margin-top: 8px;
  text-align: left;
}

.client-clues-drawer.hidden {
  display: none !important;
}

.client-clues-stats-row {
  display: flex;
  justify-content: space-around;
  gap: 8px;
  background: rgba(255, 255, 255, 0.05);
  border-radius: 6px;
  padding: 6px 10px;
  margin-bottom: 10px;
  font-size: 0.82rem;
  color: #ccc;
}

.client-clues-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
  max-height: 380px;
  overflow-y: auto;
}

.client-clue-card {
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  border-radius: 8px;
  padding: 10px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.client-clue-card.client-clue-critical {
  border-left: 3px solid var(--gold);
}

.client-clue-card.client-clue-undisc {
  opacity: 0.82;
  border-style: dashed;
}

.client-clue-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
  font-size: 0.74rem;
}

.client-clue-badge {
  font-weight: 700;
  color: var(--gold-light);
}

.client-clue-hour {
  font-family: monospace;
  color: #bbb;
}

.client-clue-status-tag {
  font-size: 0.7rem;
  font-weight: 700;
  padding: 1px 6px;
  border-radius: 4px;
}

.tag-disc {
  background: rgba(40, 167, 69, 0.2);
  color: #4cd964;
}

.tag-undisc {
  background: rgba(255, 255, 255, 0.08);
  color: #888;
}

.client-clue-room {
  font-size: 0.78rem;
  color: var(--gold);
  font-weight: 600;
}

.client-clue-title {
  font-size: 0.9rem;
  color: #fff;
  font-weight: 700;
}

.client-clue-desc {
  font-size: 0.8rem;
  color: #bbb;
  line-height: 1.35;
}

.client-clue-weapon {
  display: flex;
  align-items: center;
  gap: 8px;
  background: rgba(220, 53, 69, 0.15);
  border-radius: 6px;
  padding: 4px 8px;
  font-size: 0.78rem;
  color: #ff9999;
}

.client-clue-weapon-img {
  width: 28px;
  height: 28px;
  border-radius: 4px;
  object-fit: contain;
}

.client-clue-foot {
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  padding-top: 4px;
  font-size: 0.74rem;
  color: #aaa;
}


/* -------------------------------------------------------------
   CLIENT MANAGE PLAYERS MODAL (VIP)
   ------------------------------------------------------------- */
.client-modal-backdrop {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.75);
  backdrop-filter: blur(4px);
  z-index: 10000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
}

.client-modal-backdrop.hidden {
  display: none !important;
}

.client-modal-dialog {
  background: var(--bg-card);
  border: 1px solid var(--border-gold);
  border-radius: 12px;
  max-width: 420px;
  width: 100%;
  max-height: 85vh;
  display: flex;
  flex-direction: column;
  padding: 16px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.8);
}

.client-modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid var(--border-color);
  padding-bottom: 8px;
  margin-bottom: 8px;
}

.client-modal-title {
  color: var(--gold);
  margin: 0;
  font-size: 1.15rem;
}

.client-modal-close-btn {
  background: transparent;
  border: none;
  color: var(--text-muted);
  font-size: 1.4rem;
  cursor: pointer;
  padding: 0 4px;
}

.client-modal-subtitle {
  color: var(--text-muted);
  font-size: 0.82rem;
  margin: 0 0 10px 0;
}

.client-manage-players-list {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 12px;
}

.client-manage-player-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: rgba(0, 0, 0, 0.3);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 8px;
  padding: 8px 10px;
  gap: 10px;
}

.client-manage-meta {
  display: flex;
  align-items: center;
  gap: 8px;
}

.client-manage-avatar {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  object-fit: cover;
  border: 1px solid var(--gold);
}

.client-manage-placeholder {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: rgba(255, 215, 0, 0.1);
  border: 1px dashed var(--gold);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--gold);
  font-weight: 700;
  font-size: 0.85rem;
}

.client-btn-kick {
  background: rgba(220, 53, 69, 0.2);
  border: 1px solid #dc3545;
  color: #ff7675;
  border-radius: 6px;
  padding: 5px 10px;
  font-size: 0.78rem;
  font-weight: 700;
  cursor: pointer;
}

.client-btn-kick:hover {
  background: #dc3545;
  color: #fff;
}


/* ============================================================
   DECLARATION ALIBI REMINDERS & ROOM STATUS INDICATORS
   ============================================================ */

.declaration-alibi-reminder {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 12px 14px;
  border-radius: 10px;
  margin-bottom: 14px;
  font-size: 0.86rem;
  line-height: 1.35;
}

.reminder-innocent {
  background: rgba(46, 204, 113, 0.12);
  border: 1px solid rgba(46, 204, 113, 0.45);
  color: #e8f8f5;
}

.reminder-crime {
  background: rgba(231, 76, 60, 0.18);
  border: 1px solid rgba(231, 76, 60, 0.65);
  color: #fadbd8;
  box-shadow: 0 0 12px rgba(231, 76, 60, 0.22);
}

.reminder-murderer-safe {
  background: rgba(243, 156, 18, 0.14);
  border: 1px solid rgba(243, 156, 18, 0.5);
  color: #fef9e7;
}

.reminder-icon {
  font-size: 1.5rem;
  flex-shrink: 0;
  line-height: 1;
  margin-top: 2px;
}

.reminder-content {
  flex: 1;
  min-width: 0;
}

.reminder-title {
  font-size: 0.74rem;
  text-transform: uppercase;
  letter-spacing: 0.6px;
  font-weight: 700;
  opacity: 0.9;
}

.reminder-room-highlight {
  font-size: 1.05rem;
  font-weight: 800;
  color: #fff;
  margin: 2px 0 4px 0;
}

.reminder-subtext {
  font-size: 0.8rem;
  opacity: 0.92;
}

/* Specific Room Modifiers in Declaration List */
.btn-declare-room.room-is-true-alibi {
  border: 1.5px solid rgba(46, 204, 113, 0.75) !important;
  background: linear-gradient(135deg, rgba(46, 204, 113, 0.14), rgba(16, 24, 30, 0.95)) !important;
  box-shadow: 0 0 10px rgba(46, 204, 113, 0.2);
}

.btn-declare-room.room-is-crime-scene {
  border: 1.5px solid rgba(231, 76, 60, 0.85) !important;
  background: linear-gradient(135deg, rgba(231, 76, 60, 0.22), rgba(28, 12, 16, 0.96)) !important;
  box-shadow: 0 0 12px rgba(231, 76, 60, 0.28);
}

.btn-declare-room.room-is-safe-bluff {
  border: 1.5px solid rgba(243, 156, 18, 0.8) !important;
  background: linear-gradient(135deg, rgba(243, 156, 18, 0.15), rgba(20, 24, 20, 0.95)) !important;
  box-shadow: 0 0 10px rgba(243, 156, 18, 0.2);
}

.btn-declare-room.room-is-risky-bluff {
  opacity: 0.75;
}

.room-btn-top-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  width: 100%;
}

.room-status-pill {
  font-size: 0.65rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.4px;
  padding: 2px 7px;
  border-radius: 6px;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  white-space: nowrap;
}

.pill-true-alibi {
  background: rgba(46, 204, 113, 0.22);
  border: 1px solid rgba(46, 204, 113, 0.75);
  color: #2ecc71;
}

.pill-crime {
  background: rgba(231, 76, 60, 0.32);
  border: 1px solid rgba(231, 76, 60, 0.9);
  color: #ff6b6b;
}

.pill-safe-bluff {
  background: rgba(243, 156, 18, 0.25);
  border: 1px solid rgba(243, 156, 18, 0.85);
  color: #f1c40f;
}

.pill-risky-bluff {
  background: rgba(149, 165, 166, 0.15);
  border: 1px solid rgba(149, 165, 166, 0.4);
  color: #bdc3c7;
}

.room-status-desc {
  font-size: 0.74rem;
  margin-top: 3px;
  line-height: 1.25;
}

.desc-true {
  color: #a3e4d7;
}

.desc-crime {
  color: #f5b7b1;
  font-weight: 600;
}

.desc-safe {
  color: #f9e79f;
  font-weight: 600;
}

.desc-risky {
  color: var(--text-muted);
}

.desc-bluff {
  color: var(--text-muted);
}

.room-btn-selection-state {
  font-size: 0.72rem;
  color: var(--gold);
  margin-top: 4px;
  opacity: 0.85;
}

.room-btn-selection-state .selection-indicator.active {
  color: #2ecc71;
  font-weight: 800;
}


/* Confirmation recap of player's submitted accusation */
.my-submitted-accusation-recap {
  margin: 12px 0;
  padding: 12px 14px;
  background: rgba(14, 20, 32, 0.85);
  border: 1px solid var(--border-gold);
  border-radius: 8px;
  text-align: left;
  font-size: 0.9rem;
  line-height: 1.5;
}

.recap-row {
  display: flex;
  justify-content: space-between;
  margin-bottom: 5px;
}

.recap-row span {
  color: var(--text-muted);
}

.recap-row strong {
  color: var(--gold-light);
}

.recap-wait-hint {
  font-size: 0.82rem;
  color: var(--text-muted);
  margin-top: 8px;
}

/* Crime scene locked room in action tab */
.btn-room-action.room-is-crime-scene.disabled,
.btn-room-action.room-is-crime-scene:disabled {
  opacity: 0.65;
  background: rgba(30, 20, 25, 0.7) !important;
  border: 1px dashed rgba(239, 68, 68, 0.6) !important;
  cursor: not-allowed !important;
  pointer-events: none;
  filter: grayscale(40%);
}

.btn-room-action.room-is-crime-scene .room-btn-thumb {
  filter: grayscale(80%) brightness(0.7);
  border: 1px solid rgba(239, 68, 68, 0.4);
}

.room-btn-hint.crime-locked {
  color: #f87171 !important;
  font-weight: 700;
  display: flex;
  align-items: center;
  gap: 4px;
}

/* Exposed Dirty Secret alert in dossier */
.secret-innocent-box.exposed {
  border-color: #ef4444 !important;
  background: rgba(239, 68, 68, 0.12) !important;
}

.secret-alert.alert-danger {
  background: rgba(239, 68, 68, 0.25) !important;
  border-color: #ef4444 !important;
  color: #fca5a5 !important;
  font-weight: 700;
}

/* ========================================================
   PWA & Fullscreen Mobile Experience
   ======================================================== */
.client-header-actions {
  display: flex;
  align-items: center;
  gap: 10px;
}

.btn-fullscreen-toggle {
  background: rgba(22, 28, 36, 0.85);
  border: 1px solid var(--border-color);
  color: var(--gold);
  border-radius: 8px;
  width: 38px;
  height: 38px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.25rem;
  cursor: pointer;
  transition: all 0.2s ease;
  user-select: none;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.4);
}

.btn-fullscreen-toggle:hover,
.btn-fullscreen-toggle:active,
.btn-fullscreen-toggle.active-fs {
  background: var(--gold);
  color: #0f131a;
  border-color: var(--gold-hover);
  box-shadow: 0 0 12px var(--gold-glow);
}

/* PWA Mobile Banner in Join View */
.pwa-banner {
  margin: 14px 0 18px 0;
  padding: 12px 14px;
  background: linear-gradient(135deg, rgba(31, 39, 51, 0.85), rgba(22, 28, 36, 0.95));
  border: 1px solid rgba(212, 175, 55, 0.35);
  border-radius: 10px;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.5);
  text-align: left;
}

.pwa-banner.is-standalone {
  border-color: rgba(46, 204, 113, 0.4);
  background: linear-gradient(135deg, rgba(20, 35, 25, 0.8), rgba(15, 25, 20, 0.9));
}

.pwa-banner-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 6px;
}

.pwa-badge {
  font-size: 0.78rem;
  font-weight: 700;
  color: var(--gold);
  background: rgba(212, 175, 55, 0.15);
  border: 1px solid rgba(212, 175, 55, 0.3);
  padding: 2px 8px;
  border-radius: 12px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.pwa-help-link {
  background: none;
  border: none;
  color: var(--text-muted);
  font-size: 0.78rem;
  cursor: pointer;
  text-decoration: underline;
  padding: 2px 4px;
  transition: color 0.2s;
}

.pwa-help-link:hover {
  color: var(--gold);
}

.pwa-banner-desc {
  font-size: 0.82rem;
  color: var(--text-muted);
  line-height: 1.35;
  margin-bottom: 10px;
}

.pwa-banner-actions {
  display: flex;
  gap: 8px;
}

.btn-pwa-install {
  flex: 1.2;
  background: linear-gradient(135deg, #d4af37, #b8860b);
  color: #12161f;
  border: none;
  border-radius: 6px;
  padding: 9px 12px;
  font-size: 0.85rem;
  font-weight: 700;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  transition: transform 0.15s, box-shadow 0.2s;
}

.btn-pwa-install:hover,
.btn-pwa-install:active {
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(212, 175, 55, 0.4);
}

.btn-pwa-install.pulse-action {
  animation: pulse-gold 2s infinite;
}

@keyframes pulse-gold {
  0% { box-shadow: 0 0 0 0 rgba(212, 175, 55, 0.6); }
  70% { box-shadow: 0 0 0 8px rgba(212, 175, 55, 0); }
  100% { box-shadow: 0 0 0 0 rgba(212, 175, 55, 0); }
}

.btn-pwa-fullscreen {
  flex: 1;
  background: rgba(31, 39, 51, 0.9);
  color: var(--gold);
  border: 1px solid var(--border-gold);
  border-radius: 6px;
  padding: 9px 12px;
  font-size: 0.85rem;
  font-weight: 600;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  transition: background 0.2s, color 0.2s;
}

.btn-pwa-fullscreen:hover,
.btn-pwa-fullscreen:active {
  background: var(--gold);
  color: #12161f;
}

/* Modal instrukcji PWA */
.pwa-help-body {
  padding: 12px 0;
  text-align: left;
}

.pwa-help-section {
  background: rgba(18, 24, 32, 0.7);
  border: 1px solid var(--border-color);
  border-radius: 8px;
  padding: 12px 14px;
  margin-bottom: 12px;
}

.pwa-help-section h4 {
  color: var(--gold);
  font-size: 0.92rem;
  margin-bottom: 8px;
  display: flex;
  align-items: center;
  gap: 6px;
}

.pwa-help-section ol {
  margin-left: 20px;
  font-size: 0.83rem;
  color: var(--text-main);
  line-height: 1.5;
}

.pwa-help-section li {
  margin-bottom: 5px;
}

.pwa-help-section li strong {
  color: var(--gold-hover);
}