/* Uncross v2.6.8 - Title Bar, HUD, Trays, Rack, Virtual Keyboard, Clues & Chat */

/* 1. Top-of-Screen Compact Title Bar with User Moniker */
.game-title-bar {
  width: 100%;
  height: 36px;
  min-height: 36px;
  max-height: 36px;
  background: #0d1017;
  border-bottom: 1px solid var(--bg-surface-border);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 12px;
  box-sizing: border-box;
  flex-shrink: 0;
  z-index: 20;
  user-select: none;
}

.title-bar-inner {
  width: 100%;
  max-width: 100%;
  margin: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.title-bar-brand {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-weight: 900;
  font-size: 0.95rem;
  letter-spacing: 2px;
  color: var(--accent-gold, #f59e0b);
}

.title-bar-logo {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  filter: drop-shadow(0 0 6px rgba(245, 158, 11, 0.4));
  flex-shrink: 0;
}

.title-bar-logo svg {
  display: block;
  width: 24px;
  height: 24px;
}

/* @deprecated Removed from header panel; action log is now canonically integrated in the Game Hub tabs (#panel-hud via btn-tab-activity) */
.title-bar-log-btn {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  height: 26px;
  padding: 0 9px;
  background: var(--bg-surface-elevated, #1e293b);
  border: 1px solid var(--bg-surface-border, rgba(255, 255, 255, 0.12));
  color: var(--text-secondary, #94a3b8);
  border-radius: var(--radius-sm, 6px);
  font-size: 0.8rem;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.15s ease;
  line-height: 1;
  white-space: nowrap;
}

.title-bar-log-btn:hover {
  background: rgba(245, 158, 11, 0.15);
  border-color: var(--accent-gold);
  color: var(--text-primary);
  transform: translateY(-1px);
}

.title-bar-game-btn {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  background: transparent;
  border: 1px solid transparent;
  border-radius: var(--radius-sm, 6px);
  padding: 2px 6px;
  cursor: pointer;
  transition: all 0.15s ease;
  user-select: none;
  line-height: 1;
}

.title-bar-game-btn:hover {
  background: rgba(245, 158, 11, 0.12);
  border-color: rgba(245, 158, 11, 0.3);
}

.title-bar-game-btn:hover .title-bar-info-icon {
  background: #38bdf8;
  color: #0d1017;
  transform: scale(1.15);
  box-shadow: 0 0 8px rgba(56, 189, 248, 0.6);
  border-color: #38bdf8;
}

.title-bar-title {
  background: linear-gradient(135deg, #ffffff 40%, var(--accent-gold) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  font-weight: 900;
  letter-spacing: 1.5px;
  font-size: 0.92rem;
  white-space: nowrap;
}

.title-bar-info-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  font-size: 0.72rem;
  font-weight: 800;
  background: rgba(56, 189, 248, 0.16);
  color: #38bdf8;
  border: 1px solid rgba(56, 189, 248, 0.45);
  line-height: 1;
  transition: all 0.15s ease;
  flex-shrink: 0;
}

.title-bar-credit-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 3px 12px;
  background: rgba(245, 158, 11, 0.15);
  border: 1px solid rgba(245, 158, 11, 0.45);
  border-radius: var(--radius-full, 9999px);
  font-size: 0.84rem;
  font-weight: 800;
  color: #FDE047;
  cursor: pointer;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.35);
  transition: transform 0.15s ease, background 0.15s ease, border-color 0.15s ease;
  font-family: inherit;
  flex-shrink: 0;
}

.title-bar-credit-pill:hover {
  transform: scale(1.04);
  background: rgba(245, 158, 11, 0.25);
  border-color: #FBBF24;
}

.title-bar-user-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 3px 14px;
  background: linear-gradient(135deg, rgba(56, 189, 248, 0.15), rgba(245, 158, 11, 0.1));
  border: 1px solid rgba(56, 189, 248, 0.4);
  border-radius: var(--radius-full, 9999px);
  font-size: 0.88rem;
  font-weight: 700;
  color: #fff;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.35);
}

.title-bar-user-badge .user-avatar-icon {
  font-size: 0.95rem;
  line-height: 1;
  display: inline-flex;
  align-items: center;
}

.title-bar-user-badge .user-avatar-icon.host-avatar-icon {
  font-size: 1.05rem;
  filter: drop-shadow(0 0 4px rgba(245, 158, 11, 0.6));
}

.title-bar-username {
  color: #ffffff;
  font-weight: 800;
  letter-spacing: 0.5px;
}

.title-bar-role-badge {
  font-size: 0.68rem;
  font-weight: 800;
  padding: 1px 6px;
  border-radius: 4px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.title-bar-role-badge.host-badge {
  background: rgba(245, 158, 11, 0.25);
  color: #f59e0b;
  border: 1px solid rgba(245, 158, 11, 0.5);
}

.title-bar-role-badge.learner-badge {
  background: rgba(147, 51, 234, 0.25);
  color: #c084fc;
  border: 1px solid rgba(147, 51, 234, 0.5);
}

.title-bar-role-badge.spectator-badge {
  background: rgba(100, 116, 139, 0.25);
  color: #cbd5e1;
  border: 1px solid rgba(100, 116, 139, 0.5);
}

.title-bar-user-score {
  font-size: 0.76rem;
  font-weight: 700;
  color: var(--accent-gold, #f59e0b);
  background: rgba(0, 0, 0, 0.4);
  padding: 1px 7px;
  border-radius: 8px;
}

/* Daily Title Bar Leaderboard State Badges */
.title-bar-daily-badge {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 3px 14px;
  background: linear-gradient(135deg, rgba(245, 158, 11, 0.16), rgba(56, 189, 248, 0.12));
  border: 1px solid rgba(245, 158, 11, 0.45);
  border-radius: var(--radius-full, 9999px);
  font-size: 0.82rem;
  font-weight: 600;
  color: #fef08a;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.35);
  cursor: pointer;
  transition: all 0.2s ease;
  max-width: min(680px, 55vw);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.title-bar-daily-badge:hover {
  background: linear-gradient(135deg, rgba(245, 158, 11, 0.25), rgba(56, 189, 248, 0.2));
  border-color: #fbbf24;
  box-shadow: 0 2px 12px rgba(245, 158, 11, 0.3);
}

.title-bar-daily-badge.state-3 {
  cursor: default;
  border-color: rgba(56, 189, 248, 0.4);
  background: linear-gradient(135deg, rgba(56, 189, 248, 0.15), rgba(245, 158, 11, 0.1));
}

.title-bar-daily-badge.state-3:hover {
  border-color: rgba(56, 189, 248, 0.4);
  background: linear-gradient(135deg, rgba(56, 189, 248, 0.15), rgba(245, 158, 11, 0.1));
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.35);
}

.title-bar-daily-badge .daily-badge-full {
  display: inline;
}

.title-bar-daily-badge .daily-badge-compact {
  display: none;
}

.title-bar-daily-badge .title-bar-install-link {
  color: #38bdf8;
  text-decoration: underline;
  font-weight: 800;
  cursor: pointer;
  transition: color 0.15s ease;
}

.title-bar-daily-badge .title-bar-install-link:hover {
  color: #7dd3fc;
}

.title-bar-daily-badge .daily-player-name {
  color: #ffffff;
  font-weight: 800;
}

@media (max-width: 768px) {
  .title-bar-daily-badge {
    padding: 2px 10px;
    font-size: 0.78rem;
    max-width: 48vw;
  }
  .title-bar-daily-badge .daily-badge-full {
    display: none !important;
  }
  .title-bar-daily-badge .daily-badge-compact {
    display: inline-flex !important;
    align-items: center;
    gap: 4px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
}

/* Daily Registration Modal */
.daily-reg-modal-card {
  max-width: 480px;
  width: 92vw;
  background: var(--bg-surface-elevated, #1e293b);
  border: 1px solid rgba(245, 158, 11, 0.4);
  border-radius: var(--radius-lg, 12px);
  box-shadow: 0 12px 36px rgba(0, 0, 0, 0.65);
  color: #fff;
  padding: 0;
  overflow: hidden;
  margin: auto;
}

.daily-reg-modal-body {
  padding: 18px 22px;
}

.daily-reg-subtitle {
  font-size: 0.92rem;
  line-height: 1.45;
  color: #cbd5e1;
  margin-bottom: 16px;
}

.daily-reg-form-group {
  margin-bottom: 18px;
}

.daily-reg-label {
  display: block;
  font-size: 0.78rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: #94a3b8;
  margin-bottom: 6px;
}

.daily-reg-input-row {
  display: flex;
  gap: 8px;
}

.daily-reg-input {
  flex: 1;
  padding: 8px 12px;
  border-radius: 8px;
  background: rgba(15, 23, 42, 0.85);
  border: 1.5px solid #38bdf8;
  color: #fef08a;
  font-size: 1rem;
  font-weight: 700;
  outline: none;
}

.daily-reg-input:focus {
  border-color: #fbbf24;
  box-shadow: 0 0 0 2px rgba(251, 191, 36, 0.25);
}

.btn-daily-reg-shuffle {
  background: rgba(56, 189, 248, 0.15);
  border: 1px solid rgba(56, 189, 248, 0.4);
  border-radius: 8px;
  font-size: 1.2rem;
  padding: 0 12px;
  cursor: pointer;
  transition: transform 0.15s ease;
}

.btn-daily-reg-shuffle:hover {
  transform: scale(1.08) rotate(15deg);
  background: rgba(56, 189, 248, 0.25);
}

.daily-reg-actions-stack {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.daily-reg-btn-primary {
  width: 100%;
  padding: 10px 16px;
  font-size: 0.95rem;
  font-weight: 700;
  background: linear-gradient(135deg, #f59e0b, #d97706);
  color: #000;
  border: none;
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.15s ease;
}

.daily-reg-btn-primary:hover {
  background: linear-gradient(135deg, #fbbf24, #f59e0b);
}

.daily-reg-btn-google {
  width: 100%;
  padding: 10px 16px;
  font-size: 0.95rem;
  font-weight: 600;
  background: rgba(30, 41, 59, 0.8);
  border: 1px solid rgba(255, 255, 255, 0.2);
  color: #fff;
  border-radius: 8px;
  cursor: pointer;
  transition: background 0.15s ease;
}

.daily-reg-btn-google:hover {
  background: rgba(51, 65, 85, 0.8);
}

.daily-reg-card-tier {
  background: rgba(15, 23, 42, 0.6);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 10px;
  padding: 12px 14px;
  margin-bottom: 12px;
}

.daily-reg-card-tier.tier-recommended {
  background: rgba(49, 46, 129, 0.25);
  border-color: rgba(99, 102, 241, 0.4);
}

.daily-reg-tier-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 8px;
}

.daily-reg-tier-label {
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: #94a3b8;
}

.daily-reg-card-tier.tier-recommended .daily-reg-tier-label {
  color: #a5b4fc;
}

.daily-reg-badge-recommended {
  font-size: 0.68rem;
  font-weight: 700;
  padding: 2px 7px;
  border-radius: 10px;
  background: rgba(99, 102, 241, 0.25);
  color: #c7d2fe;
  border: 1px solid rgba(99, 102, 241, 0.35);
}

.daily-reg-subnote {
  font-size: 0.73rem;
  color: #94a3b8;
  margin-top: 6px;
  line-height: 1.35;
}

.daily-reg-subnote.accent-note {
  color: #c7d2fe;
}

.daily-reg-provider-placeholder {
  margin-top: 8px;
  padding-top: 6px;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  font-size: 0.72rem;
  font-style: italic;
  color: #818cf8;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.daily-reg-casual-tier {
  background: rgba(15, 23, 42, 0.6);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 10px;
  padding: 10px 14px;
  margin-bottom: 12px;
}

.daily-reg-claimed-badge-card {
  background: rgba(245, 158, 11, 0.12);
  border: 1px solid rgba(245, 158, 11, 0.35);
  border-radius: 10px;
  padding: 10px 14px;
  margin-bottom: 14px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.daily-reg-claimed-badge-left {
  display: flex;
  align-items: center;
  gap: 10px;
}

.daily-reg-claimed-icon {
  font-size: 1.4rem;
  line-height: 1;
}

.daily-reg-claimed-name-row {
  display: flex;
  align-items: center;
  gap: 6px;
}

.daily-reg-claimed-name {
  font-size: 0.98rem;
  font-weight: 700;
  color: #fef08a;
  font-family: monospace;
}

.daily-reg-status-pill {
  font-size: 0.68rem;
  font-weight: 700;
  padding: 1px 6px;
  border-radius: 6px;
  background: rgba(245, 158, 11, 0.2);
  color: #fbbf24;
  border: 1px solid rgba(245, 158, 11, 0.3);
}

.daily-reg-status-pill.google-verified {
  background: rgba(99, 102, 241, 0.25);
  color: #c7d2fe;
  border-color: rgba(99, 102, 241, 0.4);
}

.daily-reg-claimed-subtext {
  font-size: 0.72rem;
  color: #94a3b8;
  margin-top: 2px;
}

.daily-reg-btn-text {
  background: transparent;
  border: none;
  color: #94a3b8;
  font-size: 0.75rem;
  text-decoration: underline;
  cursor: pointer;
  padding: 4px;
}

.daily-reg-btn-text:hover {
  color: #fbbf24;
}

.daily-reg-divider {
  display: flex;
  align-items: center;
  margin: 14px 0;
  text-align: center;
}

.daily-reg-divider::before,
.daily-reg-divider::after {
  content: '';
  flex: 1;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.daily-reg-divider-text {
  padding: 0 10px;
  font-size: 0.68rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: #64748b;
}

.daily-reg-btn-compete {
  width: 100%;
  padding: 12px 16px;
  font-size: 1rem;
  font-weight: 700;
  background: linear-gradient(135deg, #10b981, #059669);
  color: #022c22;
  border: none;
  border-radius: 8px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  transition: all 0.15s ease;
  box-shadow: 0 4px 12px rgba(16, 185, 129, 0.25);
}

.daily-reg-btn-compete:hover {
  background: linear-gradient(135deg, #34d399, #10b981);
  transform: translateY(-1px);
  box-shadow: 0 6px 16px rgba(16, 185, 129, 0.35);
}

.daily-reg-subnote.success-note {
  color: #34d399;
  font-weight: 500;
}

.daily-reg-secondary-link {
  margin-top: 12px;
  padding-top: 10px;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.daily-reg-footer {
  padding: 12px 22px 18px 22px;
  display: flex;
  justify-content: center;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  box-sizing: border-box;
  width: 100%;
}

.daily-reg-btn-casual {
  width: 100%;
  padding: 10px 16px;
  font-size: 0.95rem;
  font-weight: 600;
  background: rgba(30, 41, 59, 0.8);
  border: 1px solid rgba(255, 255, 255, 0.2);
  color: #e2e8f0;
  border-radius: 8px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  text-decoration: none;
  transition: all 0.15s ease;
  box-sizing: border-box;
}

.daily-reg-btn-casual:hover {
  background: rgba(51, 65, 85, 0.85);
  border-color: rgba(255, 255, 255, 0.35);
  color: #ffffff;
}

.daily-reg-btn-casual:active {
  transform: translateY(1px);
}

.daily-reg-btn-casual.is-primary {
  background: linear-gradient(135deg, #2563eb, #1d4ed8);
  border-color: rgba(255, 255, 255, 0.35);
  color: #ffffff;
  font-weight: 700;
  box-shadow: 0 4px 12px rgba(37, 99, 235, 0.3);
}

.daily-reg-btn-casual.is-primary:hover {
  background: linear-gradient(135deg, #3b82f6, #2563eb);
  box-shadow: 0 6px 16px rgba(37, 99, 235, 0.4);
}

.daily-reg-btn-cancel {
  background: transparent;
  border: none;
  color: #94a3b8;
  font-size: 0.82rem;
  cursor: pointer;
  text-decoration: underline;
}

.daily-reg-btn-cancel:hover {
  color: #cbd5e1;
}

.title-bar-right-actions {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
  white-space: nowrap;
}

.leave-icon-svg {
  width: 17px;
  height: 17px;
  display: block;
  stroke: #ffffff;
}

.title-bar-room-code {
  color: var(--accent-gold, #f59e0b);
  letter-spacing: 1px;
}


.tray-top-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.room-share-badge {
  display: flex;
  align-items: center;
  gap: 8px;
  background: var(--bg-surface-elevated);
  padding: 6px 12px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--bg-surface-border);
  cursor: pointer;
  font-size: 0.85rem;
  transition: all 0.15s ease;
}

.room-share-badge:hover {
  background: #283042;
  border-color: var(--accent-gold);
}

.copy-hint {
  color: var(--accent-gold);
  font-weight: 600;
  font-size: 0.75rem;
}

.hud-center-banner {
  display: flex;
  align-items: center;
  gap: 12px;
}

.turn-indicator {
  background: var(--bg-surface-elevated);
  padding: 6px 14px;
  border-radius: var(--radius-full);
  font-size: 0.9rem;
  border: 1px solid var(--bg-surface-border);
}

.turn-indicator.my-turn {
  background: rgba(245, 158, 11, 0.15);
  border-color: var(--accent-gold);
  color: #fbbf24;
  font-weight: bold;
  animation: turnPulse 1.5s infinite alternate;
}

@keyframes turnPulse {
  from { box-shadow: 0 0 4px var(--accent-gold-glow); }
  to { box-shadow: 0 0 12px var(--accent-gold-glow); }
}

.badge-final-lap {
  background: linear-gradient(135deg, #ef4444, #b91c1c);
  color: #fff;
  font-weight: 800;
  font-size: 0.85rem;
  padding: 6px 14px;
  border-radius: var(--radius-full);
  animation: finalLapFlash 1s infinite alternate;
}

@keyframes finalLapFlash {
  from { opacity: 0.8; }
  to { opacity: 1; }
}

.tile-bag-badge {
  font-size: 0.85rem;
  color: var(--text-secondary);
}

.media-controls {
  display: flex;
  gap: 8px;
}

.btn-media {
  background: var(--bg-surface-elevated);
  border: 1px solid var(--bg-surface-border);
  color: var(--text-primary);
  width: 36px;
  height: 36px;
  border-radius: var(--radius-sm);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  font-size: 1rem;
  transition: all 0.15s;
}

.btn-media:hover {
  background: #2c3548;
}

.btn-media.muted, .btn-media.cam-off {
  background: rgba(239, 68, 68, 0.2);
  border-color: var(--accent-red);
}

/* Video Strip */
.video-mesh-strip {
  display: flex;
  gap: 10px;
  overflow-x: auto;
  padding-bottom: 2px;
}

.video-card {
  width: 100px;
  height: 70px;
  background: #0d1017;
  border: 1px solid var(--bg-surface-border);
  border-radius: var(--radius-sm);
  position: relative;
  overflow: hidden;
  flex-shrink: 0;
}

.video-card video {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.video-fallback {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #1e2433;
}

.avatar-letter {
  font-size: 1.4rem;
  font-weight: 800;
  color: var(--accent-gold);
}

.video-name-tag {
  position: absolute;
  bottom: 2px;
  left: 4px;
  right: 4px;
  font-size: 0.65rem;
  background: rgba(0, 0, 0, 0.7);
  padding: 1px 4px;
  border-radius: 2px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  color: #fff;
}

.remote-videos-list {
  display: flex;
  gap: 10px;
}

/* 2. Main Game Arena Layout */
.game-arena {
  display: flex;
  flex-direction: row;
  flex: 1;
  overflow: hidden;
  position: relative;
  width: 100%;
  height: 100%;
}

.game-main-content {
  display: flex;
  flex-direction: column;
  flex: 1;
  overflow: hidden;
  height: 100%;
  max-height: 100vh;
  max-height: 100dvh;
  max-height: var(--app-height, 100dvh);
  padding-bottom: env(safe-area-inset-bottom, 0px);
  align-items: center;
  min-width: 0;
  box-sizing: border-box;
}

/* 2b. Multi-Panel Desktop Layout (Independent Resizable & Draggable Board and HUD Panels) */
.game-panel {
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  background: var(--bg-primary, #0a0d14);
}

.panel-board {
  container-type: inline-size;
}

.panel-drag-header {
  cursor: grab;
  user-select: none;
  -webkit-user-select: none;
}

.panel-drag-header:active {
  cursor: grabbing;
}

/* Peeled-off Tab Panel with Gold Radiused Corners & Sleek Header */
.game-panel.panel-hud,
.panel-tab {
  border: 1px solid rgba(245, 158, 11, 0.45) !important;
  border-radius: 12px !important;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.5), 0 0 14px rgba(245, 158, 11, 0.15) !important;
  position: relative;
  overflow: hidden;
}

.game-panel.panel-hud.has-menu-open,
.panel-tab.has-menu-open {
  overflow: visible !important;
}

#panel-hud .panel-resize-edge,
#panel-hud .panel-resize-corner {
  display: none !important;
}

.hud-panel-drag-header {
  height: 36px;
  min-height: 36px;
  max-height: 36px;
  background: #0d1017;
  border-bottom: 1px solid rgba(245, 158, 11, 0.35);
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 8px;
  padding: 0 12px;
  box-sizing: border-box;
  flex-shrink: 0;
  z-index: 10;
  user-select: none;
}

.panel-drag-grip {
  font-size: 14px;
  color: #f59e0b;
  opacity: 0.9;
  cursor: grab;
  user-select: none;
  margin-right: 2px;
}

.hud-panel-title {
  display: inline-flex !important;
  align-items: center;
  background: linear-gradient(135deg, #ffffff 40%, var(--accent-gold, #f59e0b) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  font-weight: 900;
  letter-spacing: 1.5px;
  font-size: 0.92rem;
  white-space: nowrap;
  margin-right: 0;
  line-height: 1;
}

.clues-progress-count {
  font-size: 0.72rem;
  font-weight: 700;
  color: #94a3b8;
  padding: 2px 8px;
  background: rgba(255, 255, 255, 0.06);
  border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  letter-spacing: 0.02em;
  white-space: nowrap;
  flex-shrink: 0;
}

.hud-panel-drag-header .quick-arrange-group,
.hud-panel-drag-header .panel-header-actions {
  margin-left: auto;
}

.btn-drawer-header-ctrl {
  background: rgba(30, 41, 59, 0.7);
  border: 1px solid rgba(255, 255, 255, 0.15);
  color: #94a3b8;
  border-radius: 4px;
  width: 24px;
  height: 24px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  font-size: 0.82rem;
  font-weight: 800;
  transition: all 0.15s ease;
  flex-shrink: 0;
}

.btn-drawer-header-ctrl:hover {
  background: #1e293b;
  color: #f59e0b;
  border-color: rgba(245, 158, 11, 0.45);
}

.btn-drawer-menu {
  font-size: 0.95rem;
  color: #fbbf24;
  border-color: rgba(245, 158, 11, 0.3);
  width: 26px;
  height: 26px;
}

#panel-hud .menu-overlay-modal {
  position: absolute;
  top: 36px;
  left: 12px;
  width: 230px;
  max-width: calc(100% - 24px);
  background: rgba(10, 13, 20, 0.98);
  backdrop-filter: blur(16px);
  border: 1px solid rgba(245, 158, 11, 0.5);
  border-top: none;
  border-radius: 0 0 8px 8px;
  padding: 6px;
  z-index: 150;
  display: none;
  flex-direction: column;
  gap: 4px;
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.9);
  box-sizing: border-box;
}

#panel-hud .menu-overlay-modal.is-active {
  display: flex;
}

#panel-hud .menu-overlay-modal .menu-overlay-header {
  display: none !important;
}

#panel-hud .menu-item-btn.is-active-view {
  background: rgba(245, 158, 11, 0.25);
  border-color: rgba(245, 158, 11, 0.7);
  color: #fde68a;
  font-weight: 800;
}

/* Single-View Replacement: Hide redundant horizontal tabs and second hamburger menu on peeled-off desktop HUD and drawer */
#panel-hud .clues-header,
#panel-hud .clues-resize-handle,
#panel-hud .clues-tab-nav {
  display: none !important;
}

#pullup-drawer .clues-header,
#pullup-drawer .clues-resize-handle,
#pullup-drawer .clues-tab-nav {
  display: none !important;
}

#panel-hud .clues-panel {
  flex: 1 1 auto;
  overflow-y: auto;
  padding: 10px 14px;
}

/* ==========================================================================
   CLUES PULL-UP TRAY / BOTTOM SHEET DRAWER (§5.3)
   ========================================================================== */
.pullup-drawer-container {
  position: relative;
  width: 100%;
  flex: 1 1 0%;
  min-height: 36px;
  background: #090d16;
  border-top: 1px solid rgba(245, 158, 11, 0.35);
  display: flex;
  flex-direction: column;
  z-index: 95;
  touch-action: none;
  transition: height 0.2s cubic-bezier(0.16, 1, 0.3, 1);
  box-shadow: none;
  overflow: hidden;
}

@media (min-width: 769px) {
  #pullup-drawer {
    display: none !important;
  }
}

.pullup-drawer-container.is-dragging {
  position: absolute !important;
  bottom: 0 !important;
  left: 0 !important;
  right: 0 !important;
  width: 100% !important;
  transition: none !important;
  z-index: 95 !important;
}

.pullup-drawer-container.is-collapsed {
  position: relative !important;
  flex: 1 1 0% !important;
  height: auto !important;
  min-height: 36px !important;
  max-height: none !important;
  box-shadow: none !important;
  overflow: hidden !important;
}

#panel-board:is([data-startup-state="ad"], [data-startup-state="go"]) .pullup-drawer-container.is-collapsed {
  flex: 0 0 36px !important;
  height: 36px !important;
  max-height: 36px !important;
}

.pullup-drawer-container.is-custom-expanded {
  position: absolute !important;
  bottom: 0 !important;
  left: 0 !important;
  right: 0 !important;
  width: 100% !important;
  max-height: calc(100% - 36px) !important;
  box-shadow: 0 -12px 30px rgba(0, 0, 0, 0.85);
  z-index: 95 !important;
}

.pullup-drawer-container.is-half-expanded {
  position: absolute !important;
  bottom: 0 !important;
  left: 0 !important;
  right: 0 !important;
  width: 100% !important;
  height: min(380px, 60vh) !important;
  box-shadow: 0 -12px 30px rgba(0, 0, 0, 0.85);
  z-index: 95 !important;
}

.pullup-drawer-container.is-collapsed:has(#drawer-pane-hangout),
.pullup-drawer-container.is-half-expanded:has(#drawer-pane-hangout) {
  position: relative !important;
  bottom: auto !important;
  left: auto !important;
  right: auto !important;
  flex: 0 0 auto !important;
  height: auto !important;
  max-height: 192px !important;
  margin-top: auto !important;
  box-shadow: none !important;
}

.pullup-drawer-container:has(#drawer-pane-hangout) .drawer-expanded-body {
  flex: 0 0 auto !important;
  padding: 4px 8px 6px !important;
  overflow-y: hidden !important;
}

.pullup-drawer-container.is-fully-expanded,
.pullup-drawer-container.is-full-expanded {
  position: absolute !important;
  bottom: 0 !important;
  left: 0 !important;
  right: 0 !important;
  width: 100% !important;
  height: calc(100% - 36px) !important;
  max-height: calc(100% - 36px) !important;
  box-shadow: 0 -16px 40px rgba(0, 0, 0, 0.95);
  z-index: 95 !important;
}

.pullup-drawer-container.has-menu-open,
.pullup-drawer-container.is-collapsed.has-menu-open {
  overflow: visible !important;
  z-index: 500 !important;
}

.drawer-header-bar {
  height: 36px;
  min-height: 36px;
  max-height: 36px;
  background: #0d1017;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 10px;
  border-top: 2px solid rgba(245, 158, 11, 0.4);
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
  user-select: none;
  flex-shrink: 0;
  position: relative;
  box-sizing: border-box;
}

.drawer-header-title {
  display: inline-flex;
  align-items: center;
  background: linear-gradient(135deg, #ffffff 40%, var(--accent-gold, #f59e0b) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  font-weight: 900;
  letter-spacing: 1.5px;
  font-size: 0.92rem;
  white-space: nowrap;
  margin-left: 6px;
  margin-right: 0;
  line-height: 1;
}

.drawer-handle-drag-area {
  flex: 1;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  cursor: ns-resize;
  touch-action: none;
  position: static;
}

.drawer-handle-pill {
  position: absolute;
  top: -3px;
  left: 50%;
  transform: translateX(-50%);
  width: 48px;
  height: 4px;
  background: rgba(255, 255, 255, 0.55);
  border-radius: 999px;
  box-shadow: 0 0 4px rgba(0, 0, 0, 0.8), 0 0 2px rgba(245, 158, 11, 0.5);
  transition: all 0.15s ease;
  cursor: ns-resize;
  pointer-events: none;
  z-index: 5;
}

.drawer-header-bar:hover .drawer-handle-pill,
.drawer-handle-drag-area:hover .drawer-handle-pill {
  background: var(--accent-gold, #f59e0b);
  box-shadow: 0 0 8px rgba(245, 158, 11, 0.8);
}

.drawer-header-summary {
  font-size: 0.72rem;
  font-weight: 700;
  color: #fde68a;
  letter-spacing: 0.02em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 220px;
}

.pullup-drawer-container .menu-overlay-modal {
  position: absolute;
  left: 8px;
  width: 230px;
  max-width: calc(100% - 16px);
  background: rgba(10, 13, 20, 0.98);
  backdrop-filter: blur(16px);
  border: 1px solid rgba(245, 158, 11, 0.5);
  border-radius: 0 0 8px 8px;
  padding: 6px;
  z-index: 150;
  display: none;
  flex-direction: column;
  gap: 4px;
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.9);
  box-sizing: border-box;
}

.pullup-drawer-container .menu-overlay-modal .menu-overlay-header {
  display: none !important;
}

.pullup-drawer-container.is-collapsed .menu-overlay-modal {
  bottom: 36px;
  top: auto;
  border-top: 1px solid rgba(245, 158, 11, 0.5);
  border-bottom: none;
  border-radius: 8px 8px 0 0;
  box-shadow: 0 -12px 30px rgba(0, 0, 0, 0.9);
  animation: popUpMenu 0.18s cubic-bezier(0.16, 1, 0.3, 1);
}

.pullup-drawer-container:not(.is-collapsed) .menu-overlay-modal {
  top: 36px;
  bottom: auto;
  border-top: none;
  border-bottom: 1px solid rgba(245, 158, 11, 0.5);
  border-radius: 0 0 8px 8px;
  max-height: calc(100% - 40px);
  overflow-y: auto;
  animation: dropDownMenu 0.18s cubic-bezier(0.16, 1, 0.3, 1);
}

.pullup-drawer-container .menu-overlay-modal.is-active {
  display: flex;
}

.drawer-expanded-body {
  flex: 1 1 0%;
  overflow-y: auto;
  padding: 8px 12px 12px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-height: 0;
}

.drawer-clues-mount {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  min-height: 0;
  overflow-y: auto;
}

.drawer-clues-mount .clues-panel {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  min-height: 0;
  width: 100%;
}

.pullup-drawer-container .drawer-expanded-body {
  display: flex !important;
  flex: 1 1 0% !important;
  min-height: 0 !important;
  overflow-y: auto !important;
}

/* Specialized Mobile 1-on-1 Hangout Drawer Pane (§2.2) */
.drawer-pane-hangout {
  display: flex;
  flex-direction: row;
  gap: 8px;
  width: 100%;
  box-sizing: border-box;
  padding: 6px;
  align-items: stretch;
  justify-content: space-between;
}
.drawer-hangout-remote {
  position: relative;
  flex: 0 0 65%;
  max-width: 65%;
  min-height: 120px;
  max-height: 150px;
  background: #0f172a;
  border-radius: 8px;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.12);
  display: flex;
  align-items: center;
  justify-content: center;
}
.drawer-hangout-remote video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.drawer-hangout-remote-fallback {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
}
.drawer-hangout-remote-avatar {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: #3b82f6;
  color: #fff;
  font-weight: 700;
  font-size: 1.2rem;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 0 0 2px rgba(56, 189, 248, 0.4);
}
.drawer-hangout-remote-avatar.is-speaking {
  box-shadow: 0 0 0 4px #38bdf8, 0 0 12px #38bdf8;
}
.drawer-hangout-overlay-tl {
  position: absolute;
  top: 6px;
  left: 6px;
  display: flex;
  align-items: center;
  gap: 4px;
  background: rgba(15, 23, 42, 0.75);
  backdrop-filter: blur(4px);
  padding: 2px 6px;
  border-radius: 12px;
  font-size: 0.68rem;
  font-weight: 600;
  color: #f8fafc;
  z-index: 10;
  max-width: calc(100% - 120px);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.drawer-hangout-overlay-tr {
  position: absolute;
  top: 6px;
  right: 6px;
  display: flex;
  align-items: center;
  gap: 4px;
  background: rgba(15, 23, 42, 0.85);
  backdrop-filter: blur(4px);
  padding: 2px 6px;
  border-radius: 12px;
  font-size: 0.65rem;
  font-weight: 700;
  color: #10b981;
  border: 1px solid rgba(16, 185, 129, 0.3);
  cursor: pointer;
  z-index: 10;
}
.drawer-hangout-overlay-tr.route-turn {
  color: #f59e0b;
  border-color: rgba(245, 158, 11, 0.3);
}
.drawer-hangout-overlay-bl {
  position: absolute;
  bottom: 6px;
  left: 6px;
  z-index: 10;
}
.drawer-hangout-overlay-br {
  position: absolute;
  bottom: 6px;
  right: 6px;
  z-index: 10;
}
.drawer-hangout-overlay-btn {
  background: rgba(15, 23, 42, 0.75);
  backdrop-filter: blur(4px);
  border: 1px solid rgba(255, 255, 255, 0.2);
  color: #f8fafc;
  border-radius: 14px;
  padding: 3px 8px;
  font-size: 0.68rem;
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  cursor: pointer;
  touch-action: manipulation;
}
.drawer-hangout-overlay-btn.is-active-muted,
.drawer-hangout-overlay-btn.is-active-hidden {
  background: rgba(239, 68, 68, 0.3);
  border-color: #ef4444;
  color: #fca5a5;
}
.drawer-hangout-local {
  flex: 0 0 calc(35% - 8px);
  max-width: calc(35% - 8px);
  display: flex;
  flex-direction: column;
  gap: 6px;
  justify-content: flex-start;
}
.drawer-hangout-preview {
  position: relative;
  width: 100%;
  height: 48px;
  background: #1e293b;
  border-radius: 6px;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.15);
  display: flex;
  align-items: center;
  justify-content: center;
}
.drawer-hangout-preview video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: scaleX(-1);
}
.drawer-hangout-preview-fallback {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: #64748b;
  color: #fff;
  font-weight: 700;
  font-size: 0.8rem;
  display: flex;
  align-items: center;
  justify-content: center;
}
.drawer-hangout-local-ctrls {
  display: flex;
  flex-direction: column;
  gap: 6px;
  flex: 0 0 auto;
}
.drawer-hangout-local-btn {
  width: 100%;
  padding: 4px 6px;
  border-radius: 6px;
  font-size: 0.68rem;
  font-weight: 600;
  background: rgba(30, 41, 59, 0.85);
  border: 1px solid rgba(255, 255, 255, 0.18);
  color: #f8fafc;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  cursor: pointer;
  touch-action: manipulation;
  min-height: 26px;
}
.drawer-hangout-local-btn.is-muted,
.drawer-hangout-local-btn.is-cam-off {
  background: rgba(239, 68, 68, 0.25);
  border-color: rgba(239, 68, 68, 0.5);
  color: #fca5a5;
}
.drawer-hangout-btn-boot {
  background: rgba(239, 68, 68, 0.15);
  border: 1px dashed rgba(239, 68, 68, 0.5);
  color: #f87171;
  font-size: 0.65rem;
  padding: 3px 6px;
  border-radius: 6px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  min-height: 24px;
}

.drawer-hangout-boot-wrap {
  width: 100%;
  display: flex;
  flex-direction: column;
}

.drawer-hangout-boot-confirm {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: rgba(239, 68, 68, 0.25);
  border: 1px solid rgba(239, 68, 68, 0.6);
  border-radius: 6px;
  padding: 3px 6px;
  gap: 4px;
}

.drawer-boot-confirm-text {
  font-size: 0.62rem;
  color: #fca5a5;
  font-weight: 700;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.drawer-boot-confirm-btns {
  display: flex;
  align-items: center;
  gap: 4px;
}

.drawer-boot-btn-yes {
  background: #dc2626;
  color: #ffffff;
  border: none;
  border-radius: 4px;
  padding: 2px 6px;
  font-size: 0.62rem;
  font-weight: 700;
  cursor: pointer;
}

.drawer-boot-btn-cancel {
  background: rgba(255, 255, 255, 0.15);
  color: #f1f5f9;
  border: none;
  border-radius: 4px;
  padding: 2px 6px;
  font-size: 0.62rem;
  font-weight: 700;
  cursor: pointer;
}

/* Knocking Stage & Overlaid Admission Actions */
.drawer-hangout-overlay-admission {
  position: absolute;
  bottom: 8px;
  left: 0;
  right: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  z-index: 10;
}

.drawer-btn-admit,
.drawer-btn-deny {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 5px 12px;
  border-radius: 999px;
  font-size: 0.72rem;
  font-weight: 700;
  border: none;
  cursor: pointer;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.4);
  touch-action: manipulation;
}

.drawer-btn-admit {
  background: linear-gradient(135deg, #10b981, #059669);
  color: #ffffff;
}

.drawer-btn-deny {
  background: linear-gradient(135deg, #ef4444, #dc2626);
  color: #ffffff;
}

.btn-panel-reset,
.btn-panel-flip {
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.15);
  color: var(--text-secondary, #94a3b8);
  border-radius: 4px;
  width: 24px;
  height: 24px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  font-size: 0.85rem;
  transition: all 0.15s ease;
  line-height: 1;
  padding: 0;
  box-sizing: border-box;
}

.btn-panel-reset:hover,
.btn-panel-flip:hover {
  background: rgba(255, 255, 255, 0.12);
  border-color: rgba(255, 255, 255, 0.35);
  color: #f8fafc;
  transform: translateY(-1px);
}

.title-bar-flip-btn {
  /* Title bar flip / swap layout button standard */
  color: var(--text-secondary, #94a3b8);
}

.panel-header-actions {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.btn-hud-action {
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.12);
  color: var(--text-secondary, #94a3b8);
  border-radius: 4px;
  min-width: 24px;
  height: 24px;
  padding: 0 4px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  font-size: 0.85rem;
  line-height: 1;
  transition: all 0.15s ease;
}

.btn-hud-action:hover {
  background: rgba(255, 255, 255, 0.15);
  border-color: rgba(255, 255, 255, 0.3);
  color: var(--text-primary, #ffffff);
  transform: scale(1.05);
}

.btn-hud-action.banner-leave-btn:hover {
  background: rgba(239, 68, 68, 0.2);
  border-color: #ef4444;
  color: #ef4444;
}

.leave-icon-char {
  font-family: monospace, sans-serif;
  font-weight: 700;
  letter-spacing: -1px;
  font-size: 0.8rem;
  display: inline-block;
}

.is-daily #btn-hud-invite,
.is-daily #btn-hud-chat,
.is-daily #title-bar-chat,
.is-daily #title-bar-hangout {
  display: none !important;
}

/* Panel Edge & Corner Resize Handles (Desktop) */
.panel-resize-edge {
  touch-action: none;
  user-select: none;
  box-sizing: border-box;
}

/* Border Centers: Top & Bottom vertical resize controls (matching video tray) */
.game-panel .tray-resize-edge {
  width: 100%;
  height: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--bg-surface-elevated, #161b26);
  touch-action: none;
  user-select: none;
  flex-shrink: 0;
  position: relative;
  z-index: 15;
}

.game-panel .tray-resize-edge.tray-resize-n {
  cursor: n-resize;
  padding-top: 3px;
  padding-bottom: 2px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

.game-panel .tray-resize-edge.tray-resize-s {
  cursor: s-resize;
  padding-top: 2px;
  padding-bottom: 3px;
  border-top: 1px solid rgba(255, 255, 255, 0.05);
}

/* Left & Right Edge Handles (Desktop) */
.panel-resize-edge.edge-left {
  position: absolute;
  left: 0;
  top: 12px;
  bottom: 12px;
  width: 8px;
  cursor: ew-resize;
  z-index: 20;
}

.panel-resize-edge.edge-right {
  position: absolute;
  right: 0;
  top: 12px;
  bottom: 12px;
  width: 8px;
  cursor: ew-resize;
  z-index: 20;
}

.panel-resize-corner {
  position: absolute;
  width: 14px;
  height: 14px;
  z-index: 25;
  touch-action: none;
  user-select: none;
  box-sizing: border-box;
}

.panel-resize-corner.corner-nw {
  top: 0;
  left: 0;
  cursor: nwse-resize;
  border-top: 3px solid rgba(245, 158, 11, 0.6);
  border-left: 3px solid rgba(245, 158, 11, 0.6);
  border-top-left-radius: 6px;
}

.panel-resize-corner.corner-ne {
  top: 0;
  right: 0;
  cursor: nesw-resize;
  border-top: 3px solid rgba(245, 158, 11, 0.6);
  border-right: 3px solid rgba(245, 158, 11, 0.6);
  border-top-right-radius: 6px;
}

.panel-resize-corner.corner-sw {
  bottom: 0;
  left: 0;
  cursor: nesw-resize;
  border-bottom: 3px solid rgba(245, 158, 11, 0.6);
  border-left: 3px solid rgba(245, 158, 11, 0.6);
  border-bottom-left-radius: 6px;
}

.panel-resize-corner.corner-se {
  bottom: 0;
  right: 0;
  cursor: nwse-resize;
  border-bottom: 3px solid rgba(245, 158, 11, 0.6);
  border-right: 3px solid rgba(245, 158, 11, 0.6);
  border-bottom-right-radius: 6px;
}

@media (min-width: 769px) {
  .game-main-content {
    display: block;
    position: relative;
    width: 100%;
    height: 100%;
    overflow: hidden;
  }

  .game-panel {
    position: absolute;
    border: 1px solid var(--bg-surface-border, rgba(255, 255, 255, 0.12));
    border-radius: 8px;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.45);
    background: #0b0e14;
    overflow: hidden;
  }

  .panel-board {
    left: 0;
    top: 0;
    width: calc(100% - 460px);
    height: 100%;
    z-index: 10;
    display: flex;
    flex-direction: column;
    align-items: stretch;
  }

  .panel-hud {
    left: calc(100% - 450px);
    top: 0;
    width: 450px;
    height: 100%;
    z-index: 11;
    display: flex;
    flex-direction: column;
  }

  .panel-board .control-card,
  .panel-board .keyboard-tray-section {
    max-width: min(440px, 96%);
    width: 100%;
    margin: 4px auto;
    border: 1px solid var(--bg-surface-border, rgba(255, 255, 255, 0.12));
    border-radius: 8px;
    background: rgba(15, 23, 42, 0.92);
    flex: 0 0 auto;
    min-height: 0;
    position: relative;
    overflow: visible;
    padding: 6px 8px;
    display: flex;
    flex-direction: column;
    gap: 4px;
    z-index: 20;
  }

  /* Match Startup Control Card Gating (§CROSS_GAME_SPEC §2.10) */
  .panel-board[data-startup-state="ad"] .control-card,
  .panel-board[data-startup-state="go"] .control-card,
  .panel-board[data-startup-state="already-played"] .control-card,
  .panel-board[data-startup-state="yesterday"] .control-card,
  .panel-board[data-startup-state="ad"] .keyboard-tray-section,
  .panel-board[data-startup-state="go"] .keyboard-tray-section,
  .panel-board[data-startup-state="already-played"] .keyboard-tray-section,
  .panel-board[data-startup-state="yesterday"] .keyboard-tray-section {
    display: none;
  }

  .yesterday-control-card {
    display: none;
    max-width: min(440px, 96%);
    width: 100%;
    margin: 4px auto;
    background: rgba(15, 23, 42, 0.95);
    border: 1px solid rgba(245, 158, 11, 0.4);
    border-radius: 8px;
    padding: 10px 14px;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    box-shadow: 0 4px 16px rgba(245, 158, 11, 0.12);
    flex: 0 0 auto;
    z-index: 20;
    animation: fadeIn 0.2s ease-in-out;
  }
  .yesterday-control-card.is-visible {
    display: flex !important;
  }
  .yesterday-banner-content {
    display: flex;
    align-items: center;
    gap: 8px;
  }
  .yesterday-banner-icon {
    font-size: 1.3rem;
    line-height: 1;
  }
  .yesterday-banner-text-group {
    display: flex;
    flex-direction: column;
  }
  .yesterday-banner-title {
    font-size: 0.78rem;
    font-weight: 800;
    color: #fef08a;
  }
  .yesterday-banner-desc {
    font-size: 0.68rem;
    color: #94a3b8;
  }
  .btn-exit-yesterday-card {
    background: linear-gradient(135deg, #f59e0b, #d97706);
    border: 1px solid #f59e0b;
    color: #000;
    padding: 5px 12px;
    border-radius: 6px;
    font-size: 0.74rem;
    font-weight: 800;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    white-space: nowrap;
    box-shadow: 0 2px 8px rgba(245, 158, 11, 0.3);
    transition: all 0.15s ease;
  }
  .btn-exit-yesterday-card:hover {
    filter: brightness(1.1);
    transform: translateY(-1px);
  }

  .panel-board #keyboard-container,
  .panel-board #actions-container {
    flex-shrink: 0;
    width: 100%;
  }

  .panel-hud .clues-panel,
  .panel-tab .clues-panel {
    max-width: 100%;
    width: 100%;
    flex: 1 1 auto;
    min-height: 120px;
    height: 100%;
    overflow: visible;
  }

  /* In solo/daily HUD, the bottom tab panel houses the Leaderboard tab; hide duplicate upper cards */
  .panel-hud .keyboard-tray-section .codex-daily-leaderboard-card,
  .panel-hud .keyboard-tray-section .codex-room-leaderboard-card {
    display: none !important;
  }

  /* Avalanche HUD Layout: Full vertical expansion for clues-panel (hands paytable & telemetry) */
  .panel-hud.avalanche-hud-active {
    display: flex !important;
    flex-direction: column !important;
  }

  .panel-hud.avalanche-hud-active:not(.game-over-hud-active):not(:has(.game-over-bottom-panel)) .keyboard-tray-section {
    display: none !important;
  }

  .panel-hud.avalanche-hud-active:not(.game-over-hud-active):not(:has(.game-over-bottom-panel)) .clues-panel {
    flex: 1 1 0 !important;
    height: 100% !important;
    max-height: 100% !important;
  }

  /* Game Over in HUD: Leaderboard & Bottom Actions Containment (Coupled Split Resizing) */
  .panel-hud.game-over-hud-active .keyboard-tray-section,
  .panel-hud:has(.game-over-bottom-actions) .keyboard-tray-section {
    flex: 0 1 auto !important;
    height: auto !important;
    min-height: 90px !important;
    max-height: none !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch !important;
  }

  .panel-hud.game-over-hud-active:has(.clues-panel.is-compact) .keyboard-tray-section,
  .panel-hud:has(.game-over-bottom-actions):has(.clues-panel.is-compact) .keyboard-tray-section {
    flex: 1 1 0 !important;
  }

  .panel-hud.game-over-hud-active .leaderboard-table-container,
  .panel-hud:has(.game-over-bottom-actions) .leaderboard-table-container {
    max-height: none !important;
    overflow-y: visible !important;
  }

  .panel-hud.game-over-hud-active .clues-panel,
  .panel-hud:has(.game-over-bottom-actions) .clues-panel {
    flex: 1 1 auto;
    min-height: 120px;
    overflow: visible;
  }
}

@media (max-width: 768px) {
  .game-arena {
    max-width: 100vw;
    margin: 0 auto;
    width: 100%;
    height: 100%;
    height: 100dvh;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    position: relative;
  }

  .game-main-content {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    overflow: hidden;
    height: 100%;
    width: 100%;
    max-width: 100%;
    flex: 1;
    min-height: 0;
  }

  .game-panel {
    position: static !important;
    left: auto !important;
    top: auto !important;
    width: 100% !important;
    height: auto !important;
    border: none !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    overflow: visible !important;
  }

  .panel-board {
    flex: 1 1 0% !important;
    height: 100% !important;
    min-height: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    width: 100%;
    max-width: 100vw;
    margin: 0 auto;
    overflow: hidden !important;
  }

  .panel-board .game-panel-zoom-wrapper:not([style*="display: none"]) {
    flex: 0 0 auto !important;
    min-height: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    width: 100% !important;
  }

  #panel-board:is([data-startup-state="ad"], [data-startup-state="go"]) .game-panel-zoom-wrapper:not([style*="display: none"]) {
    flex: 1 1 0% !important;
  }

  .board-container-wrapper {
    --board-size: clamp(190px, min(calc(100vw - 16px), calc(100dvh - 340px), 420px), 420px);
    max-width: min(calc(100vw - 8px), 440px);
    flex: 0 0 auto !important;
    height: auto !important;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 2px;
    margin-bottom: 2px;
    padding: 0;
  }

  .panel-board:has(#drawer-pane-hangout):not(:has(#solo-not-viable-banner)) .board-container-wrapper {
    --board-size: clamp(175px, min(calc(100vw - 16px), calc(100dvh - 445px), 420px), 420px) !important;
  }

  .panel-board:has(#board-grid.xword-active) .board-container-wrapper {
    overflow: visible !important;
    min-height: 0 !important;
  }

  /* Fluid Compact Viewport Scaling for Shorter Displays (keyboard_and_game_view_spec.md §5.3) */
  @media (max-height: 740px), (max-width: 400px) {
    .panel-board:has(#board-grid.xword-active) {
      --board-size: clamp(190px, min(calc(100vw - 16px), calc(100dvh - 345px), 420px), 420px) !important;
    }
    .panel-board:has(#board-grid.xword-active) .board-container-wrapper {
      --board-size: clamp(190px, min(calc(100vw - 16px), calc(100dvh - 345px), 420px), 420px) !important;
      width: 100% !important;
      height: auto !important;
      aspect-ratio: auto !important;
      overflow: visible !important;
      margin-top: 1px !important;
      margin-bottom: 1px !important;
    }
    .panel-board:has(#board-grid.xword-active) .board-arena-frame {
      width: var(--board-size) !important;
      height: var(--board-size) !important;
      max-width: var(--board-size) !important;
      max-height: var(--board-size) !important;
      aspect-ratio: 1 / 1 !important;
      overflow: hidden !important;
    }
    .panel-board:has(#board-grid.xword-active) #board-grid,
    #board-grid.xword-active {
      --board-mobile-size: var(--board-size) !important;
      width: 100% !important;
      height: 100% !important;
      max-width: 100% !important;
      max-height: 100% !important;
    }
    .panel-board:has(#board-grid.xword-active) .control-card .vk-key,
    .panel-board:has(#board-grid.xword-active) .control-card .btn-vk-letter,
    .panel-board:has(#board-grid.xword-active) .xword-vk-key {
      height: clamp(28px, 4.4dvh, 36px) !important;
      font-size: clamp(0.72rem, 3.6vw, 0.95rem) !important;
    }
    .panel-board:has(#board-grid.xword-active) .control-card .vk-actions-row button,
    .panel-board:has(#board-grid.xword-active) .xword-actions-row button {
      height: clamp(28px, 4.2dvh, 34px) !important;
      min-height: 28px !important;
      padding: 2px clamp(3px, 1vw, 6px) !important;
      font-size: clamp(0.65rem, 2.7vw, 0.80rem) !important;
    }
    .pullup-drawer-container.is-collapsed {
      flex: 1 1 0% !important;
      height: auto !important;
      min-height: 34px !important;
      max-height: none !important;
    }
    .pullup-drawer-container.is-collapsed:not(.has-menu-open) {
      overflow: hidden !important;
    }
    .pullup-drawer-container.has-menu-open {
      overflow: visible !important;
    }
    .drawer-header-bar {
      height: 34px !important;
      min-height: 34px !important;
      max-height: 34px !important;
    }

    /* Generic Post-Game Outcome Card Vertical Compression & Dynamic Board Headroom (CROSS_GAME_SPEC § 11.10.2 & keyboard_and_game_view_spec.md § 5.3) */
    #panel-board.panel-board:has(.game-over-bottom-panel),
    .panel-board:has(#board-grid):has(.game-over-bottom-panel),
    #panel-board.panel-board:has(.game-over-bottom-panel) .board-container-wrapper,
    .panel-board:has(#board-grid):has(.game-over-bottom-panel) .board-container-wrapper {
      --board-size: clamp(165px, min(calc(100vw - 16px), calc(100dvh - 295px), 420px), 420px) !important;
    }

    #panel-board.panel-board:has(.game-over-bottom-panel .outcome-badge-banner),
    .panel-board:has(#board-grid):has(.game-over-bottom-panel .outcome-badge-banner),
    #panel-board.panel-board:has(.game-over-bottom-panel .outcome-badge-banner) .board-container-wrapper,
    .panel-board:has(#board-grid):has(.game-over-bottom-panel .outcome-badge-banner) .board-container-wrapper {
      --board-size: clamp(160px, min(calc(100vw - 16px), calc(100dvh - 320px), 420px), 420px) !important;
    }

    .game-over-bottom-panel .outcome-notice-banner,
    .game-over-bottom-panel [id$="-daily-status-notice"],
    .game-over-banner .game-over-reason {
      display: none !important;
    }

    .game-over-bottom-panel .outcome-badge-banner {
      margin-bottom: 4px !important;
      transform: scale(0.85);
      transform-origin: center;
    }

    .panel-board:has(.game-over-bottom-panel) .phase-nav-container {
      padding: 2px 8px 1px !important;
    }

    .panel-board:has(.game-over-bottom-panel) .game-over-pill {
      padding: 2px 10px !important;
    }

    .panel-board:has(.game-over-bottom-panel) .game-over-pill span {
      font-size: 0.80rem !important;
    }

    .panel-board .game-over-bottom-panel {
      padding: 5px 8px !important;
      border-radius: 8px !important;
    }

    .panel-board .game-over-bottom-panel .outcome-metrics-grid {
      margin-bottom: 0 !important;
      gap: 4px !important;
    }

    .panel-board .game-over-bottom-panel .outcome-metric-card {
      padding: 3px 4px !important;
      border-radius: 7px !important;
      min-width: 0 !important;
    }

    .panel-board .game-over-winner-actions {
      margin: 3px auto 2px !important;
      gap: 4px !important;
    }

    .panel-board .game-over-winner-actions button {
      height: 28px !important;
      min-height: 28px !important;
      font-size: clamp(0.66rem, 2.8vw, 0.74rem) !important;
      padding: 2px 6px !important;
      flex: 1 1 calc(50% - 4px) !important;
      max-width: calc(50% - 2px) !important;
    }
  }

  .panel-board:has(.game-over-bottom-panel) #game-status-banner {
    display: none !important;
  }

  .panel-board .control-card,
  .panel-board .keyboard-tray-section,
  .yesterday-control-card {
    max-width: min(calc(100vw - 8px), 440px) !important;
    width: min(calc(100vw - 8px), 440px) !important;
    box-sizing: border-box;
    margin: 2px auto !important;
    padding: 2px clamp(3px, 1.2vw, 6px) 2px !important;
  }

  /* Mobile Virtual Keyboard & Control Proportional Scaling (<= 390px max-width) */
  .control-card .vk-row {
    gap: clamp(2px, 0.8vw, 4px);
  }

  .control-card .vk-key,
  .control-card .btn-vk-letter,
  .keyboard-tray-section .vk-key,
  .virtual-keyboard-wrapper .vk-key,
  .vk-container .vk-key,
  .vk-row .vk-key {
    min-width: 0 !important;
    flex: 1 1 0px !important;
    height: clamp(32px, 4.4vh, 40px) !important;
    font-size: clamp(0.72rem, 3.8vw, 1.05rem) !important;
    padding: 0 !important;
    box-sizing: border-box !important;
  }

  .control-card .vk-key.vk-key-dir,
  .control-card .vk-key.vk-key-util,
  .keyboard-tray-section .vk-key-dir,
  .keyboard-tray-section .vk-key-util,
  .virtual-keyboard-wrapper .vk-key-125,
  .virtual-keyboard-wrapper .vk-key-dir,
  .btn-vk-key-dir,
  .btn-vk-key-del,
  .btn-xword-key-dir,
  .btn-xword-key-del {
    min-width: 0 !important;
    flex: 1.25 1 0px !important;
    box-sizing: border-box !important;
  }

  .control-card .vk-actions-row,
  .control-card .turn-actions-bar {
    gap: clamp(3px, 1vw, 6px);
  }

  .control-card .vk-actions-row button,
  .control-card .turn-actions-bar button {
    font-size: clamp(0.68rem, 2.9vw, 0.86rem) !important;
    padding: 4px clamp(4px, 1.4vw, 10px) !important;
    min-height: 32px;
  }

  .control-card .typing-tray-row .tray-slot,
  .control-card .typing-tray-row .tile {
    width: clamp(28px, 8.2vw, 38px) !important;
    height: clamp(28px, 8.2vw, 38px) !important;
    font-size: clamp(0.75rem, 3.8vw, 1rem) !important;
  }

  .control-card .clue-bar,
  .control-card .clue-spotlight-bar {
    font-size: clamp(0.72rem, 3.2vw, 0.86rem) !important;
  }

  .panel-hud:not(.is-mobile-game-overlay) {
    display: none !important;
  }

  .panel-hud.is-mobile-game-overlay {
    display: flex !important;
    position: fixed !important;
    inset: 46px 8px 8px 8px !important;
    width: auto !important;
    height: auto !important;
    z-index: 130 !important;
    background: rgba(10, 13, 20, 0.98) !important;
    border-radius: 14px !important;
    border: 1px solid rgba(245, 158, 11, 0.45) !important;
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.9) !important;
  }

  .hud-panel-drag-header {
    display: none !important;
  }

  .panel-resize-edge,
  .panel-resize-corner,
  .game-panel .tray-resize-edge {
    display: none !important;
  }

  .title-bar-user-badge {
    display: none !important;
  }

  .title-bar-right-actions {
    gap: 4px !important;
  }

  .title-bar-log-btn,
  .title-bar-chat-btn,
  .title-bar-hangout-btn,
  .title-bar-leave-btn {
    padding: 0 6px !important;
    font-size: 0.74rem !important;
  }
}

/* -------------------------------------------------------------------------- */
/* Mobile Landscape Side-by-Side Layout & Handedness                          */
/* -------------------------------------------------------------------------- */
@media (orientation: landscape) and (max-height: 600px) {
  .game-main-content {
    display: flex !important;
    flex-direction: row !important;
    align-items: stretch !important;
    overflow: hidden !important;
    width: 100% !important;
    height: 100% !important;
    padding-bottom: 0 !important;
  }

  /* Handedness: Board on Right -> Reverse row so HUD is left, Board is right */
  body[data-board-side="right"] .game-main-content {
    flex-direction: row-reverse !important;
  }

  .panel-board {
    position: static !important;
    left: auto !important;
    top: auto !important;
    flex: 0 0 auto !important;
    width: min(calc(100dvh - 8px), 52vw) !important;
    max-width: 52vw !important;
    height: 100% !important;
    display: flex !important;
    flex-direction: column !important;
    overflow: hidden !important;
    border: none !important;
    border-radius: 0 !important;
    box-shadow: none !important;
  }

  .panel-hud {
    position: relative !important;
    left: auto !important;
    top: auto !important;
    flex: 1 1 auto !important;
    width: auto !important;
    min-width: 0 !important;
    height: 100% !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch !important;
    border: none !important;
    border-radius: 0 !important;
    box-shadow: none !important;
  }

  .panel-board .board-container-wrapper {
    height: calc(100% - 32px) !important;
    padding: 0 4px !important;
  }

  .board-grid {
    --board-mobile-landscape-size: min(calc(100dvh - 36px), 52vw);
    width: var(--board-mobile-landscape-size) !important;
    height: var(--board-mobile-landscape-size) !important;
    max-height: var(--board-mobile-landscape-size) !important;
    max-width: var(--board-mobile-landscape-size) !important;
    --cell-font-size: calc(var(--board-mobile-landscape-size) / var(--grid-size, 15) * 0.52) !important;
    --cell-badge-size: calc(var(--board-mobile-landscape-size) / var(--grid-size, 15) * 0.26) !important;
  }

  .panel-board .board-container-wrapper:has(#board-top-stats:not([style*="display: none"])) .board-grid {
    --board-mobile-landscape-size: min(calc(100dvh - 72px), 52vw) !important;
  }

  #board-grid.echo-active {
    width: 100% !important;
    height: auto !important;
    max-width: 100% !important;
    max-height: 100% !important;
  }

  .game-title-bar {
    height: 32px !important;
    min-height: 32px !important;
    max-height: 32px !important;
    padding: 0 8px !important;
  }

  /* Completely eliminate desktop resize controls, drag bars, and corner handles to reclaim screen real estate */
  .hud-panel-drag-header,
  .panel-resize-edge,
  .panel-resize-corner,
  .tray-resize-edge,
  .resize-pill,
  .panel-drag-grip,
  .title-bar-drag-grip,
  .side-tray-title-text {
    display: none !important;
  }

  .title-bar-user-badge {
    display: none !important;
  }

  .title-bar-right-actions {
    gap: 4px !important;
  }

  .title-bar-log-btn,
  .title-bar-chat-btn,
  .title-bar-hangout-btn,
  .title-bar-leave-btn {
    padding: 0 5px !important;
    font-size: 0.72rem !important;
  }
}

/* -------------------------------------------------------------------------- */
/* Mobile In-Game Orientation Gate & Handedness Selector                      */
/* -------------------------------------------------------------------------- */
.orientation-gate {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 9999;
  background: rgba(10, 14, 23, 0.97);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  padding: 24px 20px;
  box-sizing: border-box;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  color: #ffffff;
  animation: fadeInGate 0.25s ease-out forwards;
}

@keyframes fadeInGate {
  from { opacity: 0; transform: scale(0.98); }
  to { opacity: 1; transform: scale(1); }
}

/* Deactivated: Mobile gameplay uses the seminal vertical portrait layout per CROSS_GAME_SPEC.md § 5.3.0 */
@media (orientation: portrait) and (max-width: 900px) {
  .game-arena .orientation-gate {
    display: none !important;
  }

  body.allow-portrait-override .orientation-gate {
    display: none !important;
  }
}

/* Ensure completely hidden in landscape mode */
@media (orientation: landscape) {
  .orientation-gate {
    display: none !important;
  }
}

.orientation-gate-card {
  max-width: 380px;
  width: 100%;
  background: #121826;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 16px;
  padding: 28px 22px 24px;
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.6);
  display: flex;
  flex-direction: column;
  align-items: center;
}

.orientation-gate-icon-anim {
  position: relative;
  width: 72px;
  height: 72px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #38bdf8;
  margin-bottom: 16px;
}

.orientation-gate-icon-anim .phone-svg {
  animation: rotatePhone 2.6s ease-in-out infinite;
  transform-origin: center center;
}

@keyframes rotatePhone {
  0%, 20% {
    transform: rotate(0deg);
  }
  50%, 70% {
    transform: rotate(90deg);
  }
  100% {
    transform: rotate(0deg);
  }
}

.orientation-gate-icon-anim .rotate-arrow-badge {
  position: absolute;
  bottom: 0;
  right: 0;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: var(--accent-gold, #f59e0b);
  color: #0b0e14;
  font-size: 1rem;
  font-weight: 900;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.4);
}

.orientation-gate-title {
  font-size: 1.35rem;
  font-weight: 800;
  margin: 0 0 10px;
  color: #ffffff;
  letter-spacing: 0.3px;
}

.orientation-gate-desc {
  font-size: 0.88rem;
  line-height: 1.45;
  color: #94a3b8;
  margin: 0 0 22px;
}

.orientation-handedness-section {
  width: 100%;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 12px;
  padding: 14px 12px;
  box-sizing: border-box;
  margin-bottom: 18px;
}

.orientation-handedness-label {
  display: block;
  font-size: 0.76rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.8px;
  color: var(--accent-gold, #f59e0b);
  margin-bottom: 10px;
}

.orientation-handedness-options {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}

.btn-gate-side {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 10px 6px;
  background: #1a2234;
  border: 2px solid rgba(255, 255, 255, 0.1);
  border-radius: 10px;
  color: #cbd5e1;
  cursor: pointer;
  transition: all 0.15s ease;
  user-select: none;
}

.btn-gate-side .gate-side-icon {
  font-size: 1.25rem;
  margin-bottom: 4px;
}

.btn-gate-side .gate-side-name {
  font-size: 0.82rem;
  font-weight: 700;
  color: #ffffff;
}

.btn-gate-side .gate-side-hint {
  font-size: 0.68rem;
  color: #94a3b8;
  margin-top: 2px;
}

.btn-gate-side:hover {
  border-color: rgba(56, 189, 248, 0.5);
  background: #202b42;
}

.btn-gate-side.active {
  background: rgba(56, 189, 248, 0.15);
  border-color: #38bdf8;
  box-shadow: 0 0 12px rgba(56, 189, 248, 0.3);
}

.btn-gate-side.active .gate-side-name {
  color: #38bdf8;
}

.btn-gate-side.active .gate-side-hint {
  color: #bae6fd;
}

.btn-gate-dismiss {
  background: transparent;
  border: none;
  color: #64748b;
  font-size: 0.78rem;
  text-decoration: underline;
  cursor: pointer;
  padding: 6px 12px;
  transition: color 0.15s ease;
}

.btn-gate-dismiss:hover {
  color: #cbd5e1;
}

/* Top Title Bar Log, Chat & Leave Buttons */
.title-bar-log-btn,
.title-bar-chat-btn,
.title-bar-hangout-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  height: 26px;
  width: auto;
  padding: 0 8px;
  background: var(--bg-surface-elevated, #1e293b);
  border: 1px solid var(--bg-surface-border, rgba(255, 255, 255, 0.12));
  color: var(--text-secondary, #94a3b8);
  border-radius: var(--radius-sm, 6px);
  font-size: 0.76rem;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.15s ease;
  line-height: 1;
  white-space: nowrap;
  flex-shrink: 0;
}

.title-bar-hangout-btn {
  color: #ffffff;
}

.title-bar-hangout-btn .title-bar-hangout-icon {
  color: var(--accent-gold, #f59e0b);
  fill: currentColor;
  width: 14px;
  height: 14px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  vertical-align: -1px;
  transition: color 0.15s ease, transform 0.15s ease;
}

.title-bar-log-btn:hover,
.title-bar-chat-btn:hover,
.title-bar-hangout-btn:hover {
  background: rgba(56, 189, 248, 0.15);
  border-color: #38bdf8;
  color: #fff;
  transform: translateY(-1px);
}

.title-bar-hangout-btn:hover .title-bar-hangout-icon {
  color: #ffffff;
}

.title-bar-leave-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  height: 26px;
  width: auto;
  padding: 0 9px;
  background: var(--bg-surface-elevated, #1e293b);
  border: 1px solid var(--bg-surface-border, rgba(255, 255, 255, 0.12));
  color: var(--text-secondary, #94a3b8);
  border-radius: var(--radius-sm, 6px);
  font-size: 0.78rem;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.15s ease;
  line-height: 1;
  white-space: nowrap;
  flex-shrink: 0;
}

.title-bar-leave-btn:hover {
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(255, 255, 255, 0.25);
  color: #fff;
  transform: translateY(-1px);
}

.title-bar-leave-btn:active {
  transform: translateY(0);
}

/* Responsive Container Queries for Board Title Bar Anti-Crowding */
@container (max-width: 540px) {
  .title-bar-user-badge {
    display: none !important;
  }
}

@container (max-width: 380px) {
  .title-bar-right-actions {
    gap: 4px !important;
  }
  .title-bar-log-btn,
  .title-bar-chat-btn,
  .title-bar-hangout-btn,
  .title-bar-leave-btn {
    padding: 0 5px !important;
    font-size: 0.72rem !important;
  }
}

/* Right-Side Collapsible Video & Chat Tray */
.side-media-tray {
  background-color: var(--bg-surface-elevated, #161b26);
  border: 1px solid var(--bg-surface-border);
  display: flex;
  flex-direction: column;
  z-index: 95;
  transition: width 0.2s ease, min-width 0.2s ease;
  overflow: hidden;
  box-shadow: 0 -8px 24px rgba(0, 0, 0, 0.65);
  container-type: inline-size;
}

.side-media-tray.tray-collapsed {
  display: none !important;
  width: 0 !important;
  min-width: 0 !important;
  max-width: 0 !important;
  border: none !important;
}

.side-media-tray.tray-expanded {
  position: absolute;
  top: 0;
  bottom: 0;
  right: 0;
  left: auto;
  transform: none;
  width: 370px;
  max-width: 45vw;
  height: 100%;
  max-height: 100%;
  border-radius: 8px;
  border: 1px solid var(--bg-surface-border, rgba(255, 255, 255, 0.12));
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.45);
  display: flex;
  flex-direction: column;
  min-width: 260px;
  min-height: 44px;
  z-index: 15;
}

@media (max-width: 768px) {
  .side-media-tray.tray-expanded {
    position: absolute;
    top: auto;
    bottom: 0;
    left: 0;
    right: 0;
    transform: none;
    width: 100%;
    max-width: 100%;
    height: var(--tray-mobile-height, calc(100dvh - var(--game-title-bar-height, 32px)));
    max-height: calc(100dvh - var(--game-title-bar-height, 32px));
    border-bottom: none;
    border-radius: 14px 14px 0 0;
    z-index: 120;
  }

  .side-media-tray .tray-resize-edge {
    display: flex !important;
    touch-action: none;
  }

  .side-media-tray .tray-resize-edge.tray-resize-n {
    height: 18px;
    padding: 4px 0;
    cursor: ns-resize;
  }

  .side-media-tray .tray-resize-edge.tray-resize-n .resize-pill {
    width: 44px;
    height: 5px;
  }
}

/* Maximized full-screen state (Maximized below the 40px header title line per XWORD_SPEC §10.1) */
.side-media-tray.tray-maximized {
  position: fixed !important;
  inset: 0 !important;
  top: 40px !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  width: 100vw !important;
  height: calc(100vh - 40px) !important;
  height: calc(100dvh - 40px) !important;
  max-width: 100vw !important;
  max-height: calc(100vh - 40px) !important;
  max-height: calc(100dvh - 40px) !important;
  z-index: 9999 !important;
  border-radius: 0 !important;
  transform: none !important;
  border: none !important;
}

.side-media-tray.tray-maximized .tray-resize-edge,
.side-media-tray.tray-maximized .tray-resize-corner {
  display: none !important;
}

/* Edge vertical resize handles */
.tray-resize-edge {
  width: 100%;
  height: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--bg-surface-elevated, #161b26);
  touch-action: none;
  user-select: none;
  flex-shrink: 0;
  z-index: 15;
}

.tray-resize-edge .resize-pill {
  width: 38px;
  height: 4px;
  background: var(--bg-surface-border, #4b5563);
  border-radius: 2px;
  transition: background 0.15s;
}

.tray-resize-edge:hover .resize-pill,
.tray-resize-edge:active .resize-pill {
  background: var(--accent-gold, #f59e0b);
}

.tray-resize-edge.tray-resize-n {
  cursor: n-resize;
  padding-top: 3px;
  padding-bottom: 2px;
}

.tray-resize-edge.tray-resize-s {
  cursor: s-resize;
  padding-top: 2px;
  padding-bottom: 3px;
}

/* Corner drag-to-resize handles (Desktop only) */
.tray-resize-corner {
  position: absolute;
  width: 16px;
  height: 16px;
  z-index: 25;
  touch-action: none;
  user-select: none;
  box-sizing: border-box;
}

.tray-resize-corner.tray-resize-nw {
  top: 0;
  left: 0;
  cursor: nw-resize;
  border-top: 3px solid rgba(245, 158, 11, 0.7);
  border-left: 3px solid rgba(245, 158, 11, 0.7);
  border-top-left-radius: 10px;
}

.tray-resize-corner.tray-resize-ne {
  top: 0;
  right: 0;
  cursor: ne-resize;
  border-top: 3px solid rgba(245, 158, 11, 0.7);
  border-right: 3px solid rgba(245, 158, 11, 0.7);
  border-top-right-radius: 10px;
}

.tray-resize-corner.tray-resize-sw {
  bottom: 0;
  left: 0;
  cursor: sw-resize;
  border-bottom: 3px solid rgba(245, 158, 11, 0.7);
  border-left: 3px solid rgba(245, 158, 11, 0.7);
  border-bottom-left-radius: 10px;
}

.tray-resize-corner.tray-resize-se {
  bottom: 0;
  right: 0;
  cursor: se-resize;
  border-bottom: 3px solid rgba(245, 158, 11, 0.7);
  border-right: 3px solid rgba(245, 158, 11, 0.7);
  border-bottom-right-radius: 10px;
}

.tray-resize-corner:hover {
  border-color: var(--accent-gold, #f59e0b);
  box-shadow: 0 0 8px rgba(245, 158, 11, 0.6);
}

@media (max-width: 768px) {
  .tray-resize-corner {
    display: none !important;
  }
}

.side-tray-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 12px;
  border-bottom: 1px solid var(--bg-surface-border);
  background: var(--bg-surface-elevated);
  cursor: grab;
  user-select: none;
  min-width: 0;
  gap: 8px;
}

.side-tray-title {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.9rem;
  font-weight: 700;
  color: var(--text-primary);
  min-width: 0;
  flex: 1 1 auto;
}

.side-tray-title-text {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.side-tray-title-icon {
  font-size: 0.95rem;
  line-height: 1;
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
}

.btn-hangout-help {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 30px;
  width: 30px;
  min-width: 30px;
  padding: 0;
  font-size: 0.85rem;
  color: #94a3b8;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: var(--radius-sm, 6px);
  cursor: pointer;
  transition: all 0.15s ease;
}

.btn-hangout-help:hover {
  background: rgba(56, 189, 248, 0.2);
  border-color: #38bdf8;
  color: #38bdf8;
}

.side-tray-controls {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
}

.btn-tray-invite,
.btn-tray-leave {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  height: 30px;
  padding: 0 7px;
  font-size: 0.8rem;
  font-weight: 600;
  width: auto;
  min-width: 30px;
  border-radius: var(--radius-sm, 6px);
  transition: all 0.15s ease;
}

.btn-tray-invite .btn-label,
.btn-tray-leave .btn-label {
  display: none;
}

.btn-tray-invite:hover {
  background: rgba(139, 92, 246, 0.2);
  border-color: #8b5cf6;
  color: #c4b5fd;
}

.btn-tray-leave:hover {
  background: rgba(239, 68, 68, 0.2);
  border-color: #ef4444;
  color: #fca5a5;
}

.leave-icon-char {
  font-family: monospace;
  font-weight: 700;
  font-size: 0.85rem;
}

/* Compressive Header Container Queries */
@container (min-width: 480px) {
  .btn-tray-invite,
  .btn-tray-leave {
    padding: 0 10px;
  }
  .btn-tray-invite .btn-label,
  .btn-tray-leave .btn-label {
    display: inline;
    white-space: nowrap;
  }
}

.side-media-tray.tray-maximized .btn-tray-invite,
.side-media-tray.tray-maximized .btn-tray-leave {
  padding: 0 10px;
}

.side-media-tray.tray-maximized .btn-tray-invite .btn-label,
.side-media-tray.tray-maximized .btn-tray-leave .btn-label {
  display: inline;
  white-space: nowrap;
}

@container (max-width: 380px) {
  .btn-mute-all .btn-label {
    display: none;
  }
}

@container (max-width: 360px) {
  .side-tray-title-text {
    display: none !important;
  }
}

@container (max-width: 340px) {
  .side-tray-header {
    padding: 6px 8px;
    gap: 4px;
  }
  .side-tray-controls {
    gap: 4px;
  }
  .btn-mute-all .btn-label {
    display: none;
  }
  .btn-mute-all {
    padding: 3px 6px;
    font-size: 0.75rem;
  }
  .btn-tray-invite,
  .btn-tray-leave,
  .btn-maximize-tray,
  .btn-collapse-side {
    width: 26px;
    height: 26px;
    min-width: 26px;
    padding: 0;
    font-size: 0.75rem;
  }
}

.tray-header-separator {
  width: 1px;
  height: 18px;
  background: var(--bg-surface-border, rgba(255, 255, 255, 0.18));
  margin: 0 4px;
  flex-shrink: 0;
}

.btn-collapse-side {
  background: transparent;
  border: 1px solid var(--bg-surface-border);
  color: var(--text-muted);
  width: 30px;
  height: 30px;
  border-radius: var(--radius-sm);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  font-size: 0.95rem;
  transition: all 0.15s;
}

.btn-collapse-side:hover {
  background: rgba(255, 255, 255, 0.12);
  color: var(--text-primary);
  border-color: rgba(255, 255, 255, 0.25);
}

.side-video-strip {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 8px;
  overflow-y: auto;
  overflow-x: hidden;
  position: relative;
  flex: 1 1 240px;
  min-height: 0;
}

/* Maximized full-screen video strip scaling (Matching canonical prototype & HANGOUT_SPEC § 5.7) */
.side-media-tray.tray-maximized .side-video-strip,
.side-media-tray.is-fullscreen .side-video-strip {
  display: grid !important;
  flex-direction: unset !important;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)) !important;
  gap: 16px !important;
  max-height: none !important;
  height: auto !important;
  flex: 1 1 auto !important;
  padding: 20px !important;
  align-content: center !important;
  justify-content: center !important;
  justify-items: center !important;
  align-items: center !important;
  overflow-y: auto !important;
}

.side-media-tray.tray-maximized .side-video-strip .remote-videos-list,
.side-media-tray.is-fullscreen .side-video-strip .remote-videos-list {
  display: contents !important;
}

/* Fluid responsive grid flow (HANGOUT_SPEC § 5.7: 2x2, 2x3, 3x2, 3x3) */
.side-media-tray.tray-maximized .side-video-strip[data-tile-count="1"],
.side-media-tray.tray-maximized .side-video-strip[data-tile-count="2"],
.side-media-tray.is-fullscreen .side-video-strip[data-tile-count="1"],
.side-media-tray.is-fullscreen .side-video-strip[data-tile-count="2"] {
  grid-template-columns: repeat(auto-fit, minmax(320px, 480px)) !important;
}

.side-media-tray.tray-maximized .side-video-strip[data-tile-count="3"],
.side-media-tray.tray-maximized .side-video-strip[data-tile-count="4"],
.side-media-tray.is-fullscreen .side-video-strip[data-tile-count="3"],
.side-media-tray.is-fullscreen .side-video-strip[data-tile-count="4"] {
  grid-template-columns: repeat(2, minmax(280px, 460px)) !important;
}

@media (min-width: 900px) and (orientation: landscape) {
  .side-media-tray.tray-maximized .side-video-strip[data-tile-count="5"],
  .side-media-tray.tray-maximized .side-video-strip[data-tile-count="6"],
  .side-media-tray.is-fullscreen .side-video-strip[data-tile-count="5"],
  .side-media-tray.is-fullscreen .side-video-strip[data-tile-count="6"] {
    grid-template-columns: repeat(3, minmax(260px, 440px)) !important;
  }
}
@media (max-width: 899px), (orientation: portrait) {
  .side-media-tray.tray-maximized .side-video-strip[data-tile-count="5"],
  .side-media-tray.tray-maximized .side-video-strip[data-tile-count="6"],
  .side-media-tray.is-fullscreen .side-video-strip[data-tile-count="5"],
  .side-media-tray.is-fullscreen .side-video-strip[data-tile-count="6"] {
    grid-template-columns: repeat(2, minmax(220px, 1fr)) !important;
  }
}
@media (min-width: 900px) {
  .side-media-tray.tray-maximized .side-video-strip[data-tile-count="7"],
  .side-media-tray.tray-maximized .side-video-strip[data-tile-count="8"],
  .side-media-tray.tray-maximized .side-video-strip[data-tile-count="9"],
  .side-media-tray.is-fullscreen .side-video-strip[data-tile-count="7"],
  .side-media-tray.is-fullscreen .side-video-strip[data-tile-count="8"],
  .side-media-tray.is-fullscreen .side-video-strip[data-tile-count="9"] {
    grid-template-columns: repeat(3, minmax(240px, 420px)) !important;
  }
}

.side-media-tray.tray-maximized .side-video-strip .video-card,
.side-media-tray.is-fullscreen .side-video-strip .video-card {
  width: 100% !important;
  max-width: 480px !important;
  min-height: 0 !important;
  margin: 0 auto;
}

.side-media-tray.tray-maximized .side-video-strip .video-card .video-viewport,
.side-media-tray.is-fullscreen .side-video-strip .video-card .video-viewport {
  width: 100%;
  aspect-ratio: 16 / 9;
  height: auto;
}

.side-media-tray.tray-maximized .side-video-strip .video-card .video-card-footer {
  height: 28px;
  min-height: 28px;
}

.side-media-tray.tray-maximized .side-video-strip .video-card .video-card-footer .video-player-name {
  font-size: 0.85rem;
}

.side-media-tray.tray-maximized .side-video-strip.spotlight-active {
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  grid-template-rows: 1fr 1fr !important;
  gap: 14px !important;
}

.side-media-tray.tray-maximized .side-video-strip.spotlight-active .video-card.spotlight-focused {
  grid-column: 2 !important;
  grid-row: 1 / span 2 !important;
  max-width: 480px !important;
  min-height: 220px !important;
}

/* Tactile Vertical Splitter between video mesh strip and chat (Magnetic Smart-Snap Splitter) */
.tray-vertical-splitter {
  width: 100%;
  height: 12px;
  min-height: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: row-resize;
  background: var(--bg-surface-elevated, #161b26);
  border-top: 1px solid var(--bg-surface-border, rgba(255, 255, 255, 0.08));
  border-bottom: 1px solid var(--bg-surface-border, rgba(255, 255, 255, 0.08));
  user-select: none;
  touch-action: none;
  z-index: 15;
  transition: background 0.15s ease, border-color 0.15s ease;
  position: relative;
  flex-shrink: 0;
}

.tray-vertical-splitter:hover,
.tray-vertical-splitter.dragging {
  background: rgba(56, 189, 248, 0.15);
  border-top-color: rgba(56, 189, 248, 0.4);
  border-bottom-color: rgba(56, 189, 248, 0.4);
}

.tray-vertical-splitter .splitter-grip {
  width: 38px;
  height: 4px;
  background: var(--bg-surface-border, #4b5563);
  border-radius: 2px;
  transition: background 0.15s ease, width 0.15s ease, transform 0.15s ease;
  cursor: pointer;
}

.tray-vertical-splitter:hover .splitter-grip,
.tray-vertical-splitter.dragging .splitter-grip {
  background: var(--accent-cyan, #38bdf8);
  width: 48px;
}

.tray-vertical-splitter:focus-visible {
  outline: 2px solid var(--accent-cyan, #38bdf8);
  outline-offset: -1px;
}

.side-video-strip.spotlight-active {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  grid-template-rows: 1fr 1fr;
  justify-items: center;
  align-items: center;
}

.side-video-strip.spotlight-active .video-card.spotlight-focused {
  grid-column: 2;
  grid-row: 1 / span 2;
  align-self: center;
  justify-self: center;
  width: 100%;
  max-width: 280px;
  z-index: 10;
  border: 2.5px solid var(--accent-amber, #f59e0b) !important;
  box-shadow: 0 0 20px rgba(245, 158, 11, 0.75) !important;
}

.side-video-strip .remote-videos-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  width: 100%;
}

.side-video-strip .video-card {
  width: 100%;
  max-width: 100%;
  height: auto;
  border-radius: var(--radius-sm, 8px);
  background: #0d1017;
  position: relative;
  overflow: visible;
  flex-shrink: 0;
  border: 1px solid var(--bg-surface-border);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.35);
  transition: border-color 0.2s, box-shadow 0.2s, transform 0.2s ease;
  touch-action: none;
  user-select: none;
  display: flex;
  flex-direction: column;
}

.video-card .video-viewport {
  width: 100%;
  aspect-ratio: 16 / 9;
  position: relative;
  overflow: hidden;
  background: #0d1017;
  border-radius: calc(var(--radius-sm, 8px) - 1px) calc(var(--radius-sm, 8px) - 1px) 0 0;
  flex-shrink: 0;
}

.side-video-strip .video-card video,
.side-video-strip .video-card .video-fallback {
  width: 100%;
  height: 100%;
  border-radius: 0;
  overflow: hidden;
  object-fit: cover;
}

.video-card-footer {
  width: 100%;
  height: 24px;
  min-height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(13, 16, 23, 0.95);
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  padding: 2px 6px;
  box-sizing: border-box;
  overflow: hidden;
  text-align: center;
  flex-shrink: 0;
  z-index: 5;
}

.video-card-footer .video-player-name {
  max-width: 100%;
  height: auto;
  line-height: 1.2;
  transform: none;
  background: transparent;
  box-shadow: none;
  padding: 0;
  justify-content: center;
  text-align: center;
  font-size: 0.72rem;
  font-weight: 700;
  color: #f1f5f9;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.peer-conn-wrapper {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  padding: 1px 4px;
  border-radius: 4px;
  background: rgba(0, 0, 0, 0.45);
  border: 1px solid rgba(255, 255, 255, 0.12);
  margin-left: 3px;
  cursor: pointer;
  vertical-align: middle;
  flex-shrink: 0;
  pointer-events: auto;
  user-select: none;
  font-size: 0.65rem;
  line-height: 1;
}

.peer-conn-wrapper.route-turn {
  background: rgba(245, 158, 11, 0.18);
  border-color: rgba(245, 158, 11, 0.4);
}

.peer-conn-wrapper.route-direct {
  background: rgba(16, 185, 129, 0.15);
  border-color: rgba(16, 185, 129, 0.35);
}

.peer-conn-wrapper.route-reconnecting {
  background: rgba(234, 179, 8, 0.2);
  border-color: rgba(234, 179, 8, 0.45);
}

.peer-conn-latency {
  font-weight: 700;
  font-size: 0.65rem;
  letter-spacing: 0.02em;
}

.peer-conn-indicator {
  display: inline-block;
  cursor: pointer;
  transition: transform 0.15s ease, opacity 0.15s ease;
  outline: none;
}

.peer-conn-indicator:hover,
.peer-conn-indicator:focus-visible {
  transform: scale(1.18);
}

.peer-conn-indicator:active {
  transform: scale(0.92);
}

/* UX-3: Host Migration Banner */
.host-migration-banner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 16px;
  background: linear-gradient(135deg, rgba(245, 158, 11, 0.22), rgba(217, 119, 6, 0.28));
  border: 1px solid rgba(245, 158, 11, 0.6);
  border-radius: 8px;
  margin: 8px 12px;
  color: #fef3c7;
  box-shadow: 0 4px 16px rgba(245, 158, 11, 0.2);
  z-index: 100;
}

.host-migration-content {
  display: flex;
  align-items: center;
  gap: 10px;
  font-weight: 600;
  font-size: 0.95rem;
}

.host-migration-icon {
  font-size: 1.25rem;
}

.btn-close-migration {
  background: transparent;
  border: none;
  color: #fef3c7;
  font-size: 1rem;
  cursor: pointer;
  padding: 4px 8px;
  border-radius: 4px;
  opacity: 0.8;
  transition: opacity 0.15s ease;
}

.btn-close-migration:hover {
  opacity: 1;
  background: rgba(255, 255, 255, 0.1);
}

.video-card-name-bar {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  background: linear-gradient(transparent, rgba(0, 0, 0, 0.75) 40%, rgba(0, 0, 0, 0.95));
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  padding: 3px 6px;
  gap: 4px;
  z-index: 20;
  user-select: none;
  pointer-events: none;
}

.video-card-name-bar > * {
  pointer-events: auto;
}

.video-name-bar-left {
  display: flex;
  align-items: center;
  gap: 3px;
  min-width: 0;
  flex: 1;
  height: 21px;
}

.self-name-bar {
  display: flex;
  align-items: flex-end;
  justify-content: flex-start;
}

.self-name-bar-left {
  display: flex;
  align-items: center;
  gap: 4px;
  height: 21px;
}

.btn-spotlight-left {
  flex-shrink: 0;
  margin-right: 2px;
  width: 20px;
  height: 20px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
  vertical-align: middle;
  transform: translateY(50%);
}

.video-card-local-control-zone {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 1px;
  flex-shrink: 0;
}

.local-control-buttons {
  display: flex;
  align-items: center;
  gap: 3px;
  height: 20px;
}

.local-control-buttons .btn-remote-stream {
  width: 20px;
  height: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.local-control-label {
  font-size: 0.48rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  padding: 0 4px;
  line-height: 1.15;
  opacity: 0;
  transition: opacity 0.18s ease-in-out;
  color: rgba(255, 255, 255, 0.88);
  background: #0d121d;
  border: none;
  border-radius: 3px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.7);
  transform: translateY(50%);
}

.video-card:hover .local-control-label,
.video-card.selected .local-control-label,
.video-card.whisper-highlight .local-control-label,
.video-card.av-whisper-active .local-control-label,
.video-card.av-whisper-paused .local-control-label,
.video-card.spotlight-focused .local-control-label {
  opacity: 1;
}

.video-player-name {
  font-size: 0.7rem;
  font-weight: 700;
  color: #f1f5f9;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 80px;
  height: 19px;
  line-height: 19px;
  display: inline-flex;
  align-items: center;
  vertical-align: middle;
  background: #0d121d;
  border: none;
  border-radius: 3px;
  padding: 0 5px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.7);
  transform: translateY(50%);
}

.video-card-remote-actions {
  display: flex;
  align-items: center;
  gap: 3px;
}

.btn-remote-stream {
  background: rgba(255, 255, 255, 0.12);
  border: 1px solid rgba(255, 255, 255, 0.2);
  color: #fff;
  border-radius: 4px;
  width: 21px;
  height: 21px;
  font-size: 0.68rem;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  padding: 0;
  transition: all 0.15s ease;
}

.btn-remote-stream:hover {
  background: rgba(255, 255, 255, 0.25);
  transform: scale(1.08);
}

.btn-remote-stream.active {
  background: rgba(16, 185, 129, 0.35);
  border-color: #10b981;
  color: #34d399;
}

.btn-remote-stream.blocked {
  background: rgba(239, 68, 68, 0.35);
  border-color: #ef4444;
  color: #f87171;
}

.btn-remote-stream.muted,
.btn-remote-stream.cam-off {
  background: rgba(239, 68, 68, 0.25);
  border-color: rgba(239, 68, 68, 0.45);
}

.btn-remote-av.call-start {
  background: #10b981;
  border-color: #059669;
  color: #ffffff;
  box-shadow: 0 0 6px rgba(16, 185, 129, 0.4);
}

.btn-remote-av.call-start:hover {
  background: #059669;
  border-color: #047857;
  transform: scale(1.12);
  box-shadow: 0 0 10px rgba(16, 185, 129, 0.7);
}

.btn-remote-av.call-end {
  background: #ef4444;
  border-color: #dc2626;
  color: #ffffff;
  box-shadow: 0 0 6px rgba(239, 68, 68, 0.4);
}

.btn-remote-av.call-end:hover {
  background: #dc2626;
  border-color: #b91c1c;
  transform: scale(1.12);
  box-shadow: 0 0 10px rgba(239, 68, 68, 0.7);
}

.btn-maximize-tray {
  font-size: 0.95rem;
}

/* Whisper & AV Badges & Highlights */
.incoming-whisper-highlight {
  border: 2px solid #38bdf8 !important;
  box-shadow: 0 0 12px rgba(56, 189, 248, 0.65) !important;
  animation: pulseWhisper 1.8s infinite alternate ease-in-out;
}

.av-whisper-active {
  border: 2px solid #a855f7 !important;
  box-shadow: 0 0 14px rgba(168, 85, 247, 0.75) !important;
}

.av-whisper-paused {
  border: 2px dashed #a855f7 !important;
  box-shadow: 0 0 8px rgba(168, 85, 247, 0.45) !important;
  opacity: 0.88;
}

/* Three Distinct Border Colors */
.side-video-strip .video-card.self-video {
  order: -9999;
  cursor: pointer;
  border: 2px solid #38bdf8 !important;
  box-shadow: 0 0 10px rgba(56, 189, 248, 0.4) !important;
}

.side-video-strip .video-card.spotlight-focused {
  border: 2px solid #f59e0b !important;
  box-shadow: 0 0 16px rgba(245, 158, 11, 0.75) !important;
  animation: pulseSpotlight 2s infinite alternate ease-in-out;
}

@keyframes pulseSpotlight {
  from { box-shadow: 0 0 8px rgba(245, 158, 11, 0.45); }
  to { box-shadow: 0 0 20px rgba(245, 158, 11, 0.95); }
}

/* Interactive Corner Overlay (No Separate Inner Border; Transparent Overlay) */
.video-card-overlay-frame {
  position: absolute;
  inset: 0;
  border: none !important;
  border-radius: var(--radius-sm);
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.18s ease-in-out;
  z-index: 15;
  background: transparent !important;
}

.video-card:hover .video-card-overlay-frame,
.video-card.selected .video-card-overlay-frame,
.video-card.whisper-highlight .video-card-overlay-frame,
.video-card.av-whisper-active .video-card-overlay-frame,
.video-card.av-whisper-paused .video-card-overlay-frame,
.video-card.spotlight-focused .video-card-overlay-frame {
  opacity: 1;
  pointer-events: auto;
}

.video-corner-top-left {
  position: absolute;
  top: 0;
  left: 6px;
  display: flex;
  flex-direction: column;
  gap: 3px;
  align-items: flex-start;
  z-index: 16;
}

.video-corner-top-left .corner-zone-label {
  transform: translateY(-50%);
  margin-bottom: -2px;
}

.video-corner-top-right {
  position: absolute;
  top: 0;
  right: 6px;
  display: flex;
  flex-direction: column;
  gap: 3px;
  align-items: flex-end;
  z-index: 16;
}

.video-corner-top-right .corner-zone-label {
  transform: translateY(-50%);
  margin-bottom: -2px;
}

.video-corner-bottom-right {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 1px;
  align-items: flex-end;
  z-index: 16;
}

.corner-zone-label {
  font-size: 0.48rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: rgba(255, 255, 255, 0.88);
  background: #0d121d;
  border: none;
  padding: 0 4px;
  border-radius: 3px;
  line-height: 1.15;
  pointer-events: none;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.7);
}

.corner-zone-actions {
  display: flex;
  align-items: center;
  gap: 3px;
}

/* ------------------------------------------------------------- */
/* TRI-ZONE SPATIAL AFFORDANCES & PHYSICAL WINDOW SHADE          */
/* ------------------------------------------------------------- */

/* 1. Window Shade Pull Tab */
.shade-pull-tab {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  background: rgba(30, 41, 59, 0.92);
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-top: none;
  border-radius: 0 0 8px 8px;
  padding: 2px 12px 3px 12px;
  cursor: pointer;
  z-index: 60;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  box-shadow: 0 2px 8px rgba(0,0,0,0.5);
  transition: background 0.15s, padding-bottom 0.15s;
}

.shade-pull-tab:hover {
  background: rgba(51, 65, 85, 0.98);
  padding-bottom: 5px;
}

.shade-tab-handle {
  width: 16px;
  height: 3px;
  background: rgba(255, 255, 255, 0.6);
  border-radius: 2px;
}

.shade-tab-arrow {
  font-size: 8px;
  color: rgba(255, 255, 255, 0.8);
  line-height: 1;
  margin-top: 1px;
}

/* 2. Window Shade Cover */
.window-shade-cover {
  position: absolute;
  inset: 0;
  background: #090d16;
  z-index: 50;
  transform: translateY(-100%);
  transition: transform 0.35s cubic-bezier(0.25, 1, 0.5, 1);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  box-shadow: 0 10px 30px rgba(0,0,0,0.9);
  background-image: repeating-linear-gradient(
    0deg,
    rgba(255,255,255,0.02) 0px,
    rgba(255,255,255,0.02) 14px,
    rgba(0,0,0,0.5) 15px,
    rgba(0,0,0,0.5) 16px
  );
}

.video-card.shade-down .window-shade-cover {
  transform: translateY(0);
}

/* Camera-Only Shade (z-index: 10, covers only video viewport beneath controls) */
.camera-shade-cover {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: var(--shade-bg, #090d16);
  z-index: 10;
  transform: translateY(-100%);
  transition: transform 0.3s cubic-bezier(0.25, 1, 0.5, 1);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  pointer-events: none;
  background-image: repeating-linear-gradient(
    0deg,
    rgba(255, 255, 255, 0.02) 0px,
    rgba(255, 255, 255, 0.02) 18px,
    rgba(0, 0, 0, 0.4) 19px,
    rgba(0, 0, 0, 0.4) 20px
  );
}

.video-card.cam-shaded .camera-shade-cover {
  transform: translateY(0);
  pointer-events: auto;
}

.shade-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  text-align: center;
  padding: 8px;
}

.shade-icon {
  font-size: 1.6rem;
  line-height: 1;
}

.shade-title {
  font-size: 0.78rem;
  font-weight: 700;
  color: #f8fafc;
}

.shade-subtitle {
  font-size: 0.68rem;
  color: #94a3b8;
  max-width: 160px;
  line-height: 1.2;
}

.btn-open-shade {
  margin-top: 4px;
  background: #1e293b;
  color: #f8fafc;
  border: 1px solid #475569;
  padding: 3px 10px;
  border-radius: 4px;
  font-size: 0.7rem;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.15s, transform 0.15s;
}

.btn-open-shade:hover {
  background: #334155;
  transform: scale(1.04);
}

/* 3. Top-Right Dog-Ear Corner Peel Menu */
.dog-ear-wrapper {
  position: absolute;
  top: 0;
  right: 0;
  width: 36px;
  height: 36px;
  z-index: 70;
  cursor: pointer;
}

.dog-ear-peel {
  position: absolute;
  top: 0;
  right: 0;
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 0 24px 24px 0;
  border-color: transparent #475569 transparent transparent;
  filter: drop-shadow(-2px 2px 3px rgba(0, 0, 0, 0.5));
  transition: all 0.25s cubic-bezier(0.25, 1, 0.5, 1);
}

.dog-ear-peel::after {
  content: "⋯";
  position: absolute;
  top: 1px;
  right: -20px;
  font-size: 8px;
  color: rgba(255, 255, 255, 0.9);
  transform: rotate(45deg);
  line-height: 1;
}

.dog-ear-wrapper:hover .dog-ear-peel,
.video-card.menu-open .dog-ear-peel {
  border-width: 0 28px 28px 0;
  border-color: transparent #06b6d4 transparent transparent;
  filter: drop-shadow(-3px 3px 5px rgba(6, 182, 212, 0.4));
}

.peel-menu-drawer {
  position: absolute;
  top: 6px;
  right: 6px;
  width: 185px;
  background: rgba(15, 23, 42, 0.96);
  backdrop-filter: blur(14px);
  border: 1px solid #334155;
  border-radius: 8px;
  padding: 8px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.8);
  z-index: 80;
  opacity: 0;
  transform: scale(0.9) translate(6px, -6px);
  pointer-events: none;
  transition: all 0.2s cubic-bezier(0.25, 1, 0.5, 1);
}

.video-card.menu-open .peel-menu-drawer {
  opacity: 1;
  transform: scale(1) translate(0, 0);
  pointer-events: auto;
}

.peel-menu-title {
  font-size: 0.7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: #06b6d4;
  border-bottom: 1px solid #334155;
  padding-bottom: 3px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.peel-menu-close {
  background: none;
  border: none;
  color: #94a3b8;
  cursor: pointer;
  font-size: 0.8rem;
  line-height: 1;
  padding: 0 2px;
}

.peel-volume-row {
  display: flex;
  flex-direction: column;
  gap: 3px;
  font-size: 0.7rem;
  color: #cbd5e1;
  padding: 2px 0;
}

.peel-volume-slider {
  width: 100%;
  height: 5px;
  accent-color: #06b6d4;
  cursor: pointer;
}

.peel-menu-btn {
  background: rgba(30, 41, 59, 0.6);
  border: 1px solid #334155;
  color: #f8fafc;
  padding: 4px 6px;
  border-radius: 5px;
  font-size: 0.72rem;
  font-weight: 500;
  text-align: left;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 6px;
  transition: all 0.15s ease;
}

.peel-menu-btn:hover {
  background: #1e293b;
  border-color: #475569;
}

/* 4. Drag & Drop Reordering & Inter-Tile Slot Lines */
.video-card.remote-video {
  cursor: grab;
}

.video-card.remote-video:active {
  cursor: grabbing;
}

.video-card.dragging {
  opacity: 0.35;
  transform: scale(0.95);
  border-style: dashed !important;
  border-color: #06b6d4 !important;
}

.video-card.insert-before::before {
  content: "";
  position: absolute;
  left: -5px;
  top: -3px;
  bottom: -3px;
  width: 4px;
  background: #06b6d4;
  border-radius: 2px;
  box-shadow: 0 0 12px #06b6d4, 0 0 4px white;
  z-index: 100;
  pointer-events: none;
  animation: pulseLine 1s infinite alternate;
}

.video-card.insert-after::after {
  content: "";
  position: absolute;
  right: -5px;
  top: -3px;
  bottom: -3px;
  width: 4px;
  background: #06b6d4;
  border-radius: 2px;
  box-shadow: 0 0 12px #06b6d4, 0 0 4px white;
  z-index: 100;
  pointer-events: none;
  animation: pulseLine 1s infinite alternate;
}

@keyframes pulseLine {
  from { opacity: 0.75; transform: scaleY(0.96); }
  to { opacity: 1; transform: scaleY(1.04); }
}

/* 5. Tap-to-Focus Directional Corner Expansion */
.video-card.card-focused {
  z-index: 200 !important;
  transform: scale(1.42);
  box-shadow: 0 14px 40px rgba(0, 0, 0, 0.95), 0 0 0 2.5px #06b6d4 !important;
  transition: transform 0.28s cubic-bezier(0.25, 1, 0.5, 1), box-shadow 0.25s ease;
  cursor: pointer;
}

.card-focus-close-btn {
  display: none;
  position: absolute;
  top: 5px;
  right: 32px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: rgba(239, 68, 68, 0.9);
  border: 1px solid rgba(255, 255, 255, 0.3);
  color: white;
  font-size: 10px;
  font-weight: 700;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  z-index: 95;
  box-shadow: 0 2px 6px rgba(0,0,0,0.5);
}

.card-focused .card-focus-close-btn {
  display: flex;
}

/* Non-modal card focus (blur & modal overlay eliminated per HANGOUT_SPEC.md §5.8) */
.focus-backdrop,
.focus-backdrop.active {
  display: none !important;
  position: fixed;
  inset: 0;
  background: transparent;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  pointer-events: none;
}

/* 6. Tri-Zone Sub-elements (Matching canonical prototype & HANGOUT_SPEC § 5.4.1) */
.video-zone-top,
.video-card-overlay-frame.video-zone-top {
  position: absolute;
  top: 4px;
  left: 6px;
  display: flex;
  align-items: center;
  gap: 4px;
  z-index: 30;
  background: transparent;
  pointer-events: none;
  opacity: 1 !important;
}

.host-badge {
  font-size: 0.68rem;
  color: #f59e0b;
  font-weight: 700;
  background: rgba(0, 0, 0, 0.6);
  padding: 1px 5px;
  border-radius: 3px;
  border: 1px solid rgba(245, 158, 11, 0.3);
  display: inline-flex;
  align-items: center;
  gap: 3px;
  pointer-events: auto;
}

.video-zone-top .video-corner-top-left {
  position: static !important;
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  gap: 5px !important;
  flex-wrap: nowrap !important;
  max-width: calc(100% - 40px) !important;
  pointer-events: auto !important;
}

.video-zone-left {
  position: absolute;
  top: 18px;
  left: 4px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  z-index: 60;
  pointer-events: auto;
}

.host-rail-btn {
  width: 22px;
  height: 22px;
  border-radius: 4px;
  background: rgba(0, 0, 0, 0.55);
  border: 1px solid rgba(255, 255, 255, 0.15);
  color: #cbd5e1;
  font-size: 0.72rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.12s ease;
  pointer-events: auto;
  line-height: 1;
  padding: 0;
  margin: 0;
}

.host-rail-btn:hover:not(.active-crown) {
  background: rgba(255, 255, 255, 0.18);
  color: #fff;
  border-color: rgba(255, 255, 255, 0.3);
}

.host-rail-btn.active-crown {
  background: rgba(245, 158, 11, 0.25);
  border-color: rgba(245, 158, 11, 0.5);
  color: #f59e0b;
  cursor: default;
}

.host-rail-btn.active-spotlight {
  background: rgba(245, 158, 11, 0.4);
  border-color: var(--accent-amber, #f59e0b);
  color: var(--accent-amber, #f59e0b);
}

.host-rail-btn.active-mute {
  background: rgba(239, 68, 68, 0.4);
  border-color: var(--accent-red, #ef4444);
  color: var(--accent-red, #ef4444);
}

.host-rail-btn.active-cam-off {
  background: rgba(245, 158, 11, 0.4);
  border-color: #f59e0b;
}

/* Spotlight Request Overlay (HANGOUT_SPEC.md §3.5.1) */
.spotlight-request-overlay {
  position: absolute;
  inset: 0;
  background: rgba(15, 23, 42, 0.90);
  backdrop-filter: blur(4px);
  z-index: 55;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 8px 6px;
  text-align: center;
  gap: 6px;
  animation: spotlight-request-fade-in 0.2s ease-out;
  border-radius: inherit;
}

@keyframes spotlight-request-fade-in {
  from { opacity: 0; transform: scale(0.96); }
  to { opacity: 1; transform: scale(1); }
}

.badge-spotlight-request {
  font-size: 0.62rem;
  font-weight: 800;
  color: #fbbf24;
  background: rgba(251, 191, 36, 0.18);
  border: 1px solid rgba(251, 191, 36, 0.5);
  border-radius: 4px;
  padding: 1px 6px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.spotlight-request-text {
  font-size: 0.72rem;
  font-weight: 600;
  color: #f8fafc;
  line-height: 1.2;
}

.spotlight-request-actions {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin-top: 2px;
}

.btn-spotlight-action {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  padding: 4px 10px;
  border-radius: 6px;
  font-size: 0.72rem;
  font-weight: 700;
  cursor: pointer;
  transition: transform 0.12s ease, background 0.15s ease, box-shadow 0.15s ease;
  line-height: 1;
}

.btn-spotlight-action:hover {
  transform: scale(1.05);
}

.btn-spotlight-action:active {
  transform: scale(0.95);
}

.btn-spotlight-grant.btn-star-green {
  background: #059669;
  border: 1px solid #10b981;
  color: #ffffff;
  box-shadow: 0 2px 6px rgba(5, 150, 105, 0.4);
}

.btn-spotlight-grant.btn-star-green:hover {
  background: #10b981;
}

.btn-spotlight-deny.btn-star-red {
  background: #dc2626;
  border: 1px solid #ef4444;
  color: #ffffff;
  box-shadow: 0 2px 6px rgba(220, 38, 38, 0.4);
}

.btn-spotlight-deny.btn-star-red:hover {
  background: #ef4444;
}

.btn-spotlight-denied {
  animation: spotlight-deny-pulse 0.6s ease-in-out 2;
  border-color: #ef4444 !important;
  color: #ef4444 !important;
}

@keyframes spotlight-deny-pulse {
  0% { transform: scale(1); box-shadow: 0 0 0 rgba(239, 68, 68, 0); }
  50% { transform: scale(1.18); box-shadow: 0 0 10px rgba(239, 68, 68, 0.7); }
  100% { transform: scale(1); box-shadow: 0 0 0 rgba(239, 68, 68, 0); }
}


.video-zone-bottom {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 42px;
  padding: 4px 10px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  z-index: 30;
  background: linear-gradient(0deg, rgba(15, 23, 42, 0.85) 0%, rgba(15, 23, 42, 0) 100%);
}

.peer-badge-group {
  display: flex;
  align-items: center;
  gap: 5px;
  flex-wrap: nowrap;
  max-width: calc(100% - 40px);
  pointer-events: auto;
}

.peer-host-crown {
  font-size: 0.85rem;
  line-height: 1;
  display: inline-flex;
  align-items: center;
  margin-right: 2px;
  flex-shrink: 0;
  filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.6));
}

.peer-name {
  font-size: 0.82rem;
  font-weight: 700;
  color: white;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.8);
  max-width: 120px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.peer-mic-status {
  font-size: 0.76rem;
  background: rgba(0, 0, 0, 0.55);
  border: 1px solid rgba(255, 255, 255, 0.1);
  padding: 1px 4px;
  border-radius: 4px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  line-height: 1;
}

.peer-mic-status.muted {
  background: rgba(239, 68, 68, 0.35);
  border-color: #ef4444;
  color: white;
}

.network-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--accent-green, #10b981);
  box-shadow: 0 0 6px var(--accent-green, #10b981);
  flex-shrink: 0;
}

.network-dot.laggy {
  background: var(--accent-amber, #f59e0b);
  box-shadow: 0 0 6px var(--accent-amber, #f59e0b);
}

/* Speaking Indicator & Avatar Pulse */
.video-card.speaking {
  border-color: var(--accent-cyan, #06b6d4) !important;
  box-shadow: 0 0 16px rgba(6, 182, 212, 0.45) !important;
}

.avatar-circle {
  width: 68px;
  height: 68px;
  border-radius: 50%;
  background: linear-gradient(135deg, #3b82f6, #1d4ed8);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.8rem;
  font-weight: 700;
  color: white;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.4);
  position: relative;
}

.avatar-halo {
  position: absolute;
  inset: -5px;
  border-radius: 50%;
  border: 2px solid var(--accent-cyan, #06b6d4);
  opacity: 0;
  pointer-events: none;
  animation: pulseWave 1.8s infinite;
}

.video-card.speaking .avatar-halo {
  opacity: 1;
}

@keyframes pulseWave {
  0% { transform: scale(0.95); opacity: 0.8; }
  100% { transform: scale(1.25); opacity: 0; }
}

.bottom-actions-group {
  display: flex;
  align-items: center;
  gap: 5px;
  margin-left: auto;
}

.local-btn {
  background: rgba(15, 23, 42, 0.7);
  backdrop-filter: blur(6px);
  border: 1px solid rgba(255, 255, 255, 0.12);
  color: #f8fafc;
  padding: 4px 8px;
  border-radius: 6px;
  font-size: 0.74rem;
  font-weight: 600;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s, transform 0.1s;
}

.bottom-actions-group .local-btn {
  padding: 4px 7px;
  min-width: 28px;
}

.local-btn:hover {
  background: rgba(51, 65, 85, 0.9);
  border-color: #06b6d4;
  transform: translateY(-1px);
}

.local-btn.muted {
  background: rgba(239, 68, 68, 0.25);
  border-color: #ef4444;
  color: #fca5a5;
}

.local-btn.cam-off,
.local-btn.btn-remote-cam.active {
  background: rgba(245, 158, 11, 0.25);
  border-color: #f59e0b;
  color: #fcd34d;
}

.local-btn.whisper {
  background: rgba(99, 102, 241, 0.25);
  border-color: #818cf8;
  color: #c7d2fe;
}

.local-btn.whisper:hover,
.local-btn.whisper.active {
  background: rgba(99, 102, 241, 0.5);
}

/* Inbound Volume Control Wrapper & Vertical Popup Slider (Matching prototype_video_tile.html) */
.volume-control-wrapper {
  position: relative;
  z-index: 35;
}

.volume-slider-popup {
  position: absolute;
  bottom: 34px;
  left: 0;
  transform: translateY(6px);
  background: #0f172a;
  border: 1px solid #334155;
  padding: 8px 6px;
  border-radius: 8px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.75);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s ease, transform 0.2s ease;
  z-index: 50;
}

.volume-control-wrapper.popup-open .volume-slider-popup {
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0);
}

.volume-slider-popup input[type="range"] {
  writing-mode: vertical-lr;
  direction: rtl;
  width: 6px;
  height: 70px;
  cursor: pointer;
  accent-color: var(--accent-cyan, #06b6d4);
}

.volume-percent-label,
.volume-percent-popup-label {
  font-size: 0.65rem;
  font-weight: 700;
  color: var(--text-muted, #94a3b8);
}

/* 7. Mobile Landscape Constraints (Height <= 480px) */
@media (max-height: 480px) and (orientation: landscape), (max-height: 480px) {
  .side-video-strip {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 6px !important;
    padding: 6px !important;
    max-height: 240px !important;
    justify-items: center !important;
  }
  .side-video-strip .video-card {
    width: 100% !important;
    max-width: 220px !important;
    min-height: 95px !important;
    max-height: 125px !important;
    aspect-ratio: 16 / 9 !important;
  }
  .video-zone-top {
    height: 22px !important;
    padding: 2px 4px !important;
  }
  .video-zone-bottom {
    height: 26px !important;
    padding: 2px 4px !important;
  }
  .video-zone-left {
    top: 14px !important;
    bottom: auto !important;
    left: 3px !important;
    width: 20px !important;
    gap: 2px !important;
    z-index: 60 !important;
  }
  .host-rail-btn {
    width: 18px !important;
    height: 18px !important;
    font-size: 0.65rem !important;
  }
}

/* Call Controls in Tab off the Left Edge of Video (Pause/Play Toggle and Hang-up Red Phone) */
/* In-Call Whisper Controls (Left Overlay at bottom of viewport, matching canonical prototype) */
.video-call-controls-left {
  position: absolute;
  bottom: 8px;
  left: 6px;
  display: flex;
  gap: 4px;
  z-index: 30;
}

.btn-call-control {
  width: 22px;
  height: 22px;
  border-radius: 4px;
  border: 1px solid rgba(255, 255, 255, 0.2);
  background: rgba(0, 0, 0, 0.65);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.68rem;
  cursor: pointer;
  padding: 0;
  transition: all 0.12s ease;
  user-select: none;
  line-height: 1;
}

.btn-call-control:hover {
  background: rgba(0, 0, 0, 0.85);
  border-color: rgba(255, 255, 255, 0.4);
}

.btn-call-pause-toggle {
  background: rgba(30, 41, 59, 0.9);
  border-color: rgba(255, 255, 255, 0.35);
}

.btn-call-pause-toggle:hover {
  background: rgba(51, 65, 85, 0.98);
  border-color: #fff;
  box-shadow: 0 0 8px rgba(255, 255, 255, 0.4);
}

.btn-call-pause-toggle.paused {
  background: rgba(168, 85, 247, 0.35);
  border-color: #a855f7;
  color: #f3e8ff;
}

.btn-call-hangup {
  background: rgba(15, 23, 42, 0.95);
  border-color: rgba(239, 68, 68, 0.5);
  color: #ef4444;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.5);
}

.btn-call-hangup:hover {
  background: rgba(239, 68, 68, 0.18);
  border-color: #ef4444;
  transform: scale(1.15);
  box-shadow: 0 0 8px rgba(239, 68, 68, 0.6);
}

.hangup-phone-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transform: rotate(135deg);
  width: 12px;
  height: 12px;
  fill: #ef4444;
  color: #ef4444;
}

/* Overlayed Titles & Player Name Colors matching Selection State (Blue, Gold, Purple) */
.video-card.whisper-highlight .corner-zone-label,
.video-card.whisper-highlight .local-control-label,
.video-card.whisper-highlight .video-player-name,
.video-card.av-whisper-active .corner-zone-label,
.video-card.av-whisper-active .local-control-label,
.video-card.av-whisper-active .video-player-name {
  color: #f3e8ff;
}

.video-card.spotlight-focused .corner-zone-label,
.video-card.spotlight-focused .local-control-label,
.video-card.spotlight-focused .video-player-name {
  color: #fef3c7;
}

.video-card.self-video .corner-zone-label,
.video-card.self-video .local-control-label,
.video-card.self-video .video-player-name,
.video-card.incoming-whisper-highlight .corner-zone-label,
.video-card.incoming-whisper-highlight .local-control-label,
.video-card.incoming-whisper-highlight .video-player-name {
  color: #e0f2fe;
}

/* Audio Status Badges */
.video-audio-badge {
  font-size: 0.58rem;
  font-weight: 700;
  padding: 1px 5px;
  border-radius: 3px;
  display: inline-flex;
  align-items: center;
  gap: 3px;
  white-space: nowrap;
  backdrop-filter: blur(4px);
}

.video-audio-badge.remote-muted {
  background: rgba(239, 68, 68, 0.85);
  color: #fff;
}

.video-audio-badge.local-muted {
  background: rgba(245, 158, 11, 0.85);
  color: #fff;
}

.video-audio-badge.double-muted {
  background: rgba(185, 28, 28, 0.95);
  color: #fff;
}

.video-audio-badge.host-silenced {
  background: rgba(147, 51, 234, 0.85);
  color: #fff;
}

.video-audio-badge.whisper-paused {
  background: rgba(168, 85, 247, 0.88);
  color: #fff;
}

.video-audio-badge.audio-live {
  background: rgba(16, 185, 129, 0.85);
  color: #fff;
}

/* Persistent Badges (Always Visible) */
.persistent-badge-container {
  position: absolute;
  top: 4px;
  left: 4px;
  z-index: 14;
  display: flex;
  flex-direction: column;
  gap: 3px;
  pointer-events: none;
}

.spotlight-badge {
  background: rgba(245, 158, 11, 0.9);
  color: #000;
  font-size: 0.6rem;
  font-weight: 800;
  padding: 2px 5px;
  border-radius: 4px;
  letter-spacing: 0.4px;
}

/* Host Spotlight Banner */
.spotlight-banner {
  background: linear-gradient(90deg, rgba(245, 158, 11, 0.28), rgba(245, 158, 11, 0.12));
  border: 1px solid #f59e0b;
  border-radius: 6px;
  padding: 4px 8px;
  font-size: 0.72rem;
  font-weight: 700;
  color: #fef3c7;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
  margin: 4px 8px;
}

.btn-release-spotlight {
  background: rgba(239, 68, 68, 0.35);
  border: 1px solid #ef4444;
  color: #fca5a5;
  border-radius: 4px;
  font-size: 0.65rem;
  padding: 2px 6px;
  cursor: pointer;
  font-weight: 700;
  transition: all 0.15s;
}

.btn-release-spotlight:hover {
  background: rgba(239, 68, 68, 0.6);
  color: #fff;
}

.btn-host-spotlight {
  background: rgba(245, 158, 11, 0.2);
  border: 1px solid rgba(245, 158, 11, 0.4);
  color: #fbbf24;
}

.btn-host-spotlight.active {
  background: rgba(245, 158, 11, 0.7);
  border-color: #f59e0b;
  color: #000;
  font-weight: 800;
}

/* Mute All Remote Button */
.btn-mute-all {
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid var(--bg-surface-border);
  border-radius: var(--radius-sm);
  color: var(--text-primary);
  font-size: 0.7rem;
  padding: 3px 6px;
  display: inline-flex;
  align-items: center;
  gap: 3px;
  cursor: pointer;
  font-weight: 600;
  transition: all 0.15s;
}

.btn-mute-all:hover {
  background: rgba(255, 255, 255, 0.2);
}

.btn-mute-all.all-muted {
  background: rgba(239, 68, 68, 0.3);
  border-color: #ef4444;
  color: #fca5a5;
}

@keyframes pulseWhisper {
  from { box-shadow: 0 0 6px rgba(56, 189, 248, 0.4); }
  to { box-shadow: 0 0 16px rgba(56, 189, 248, 0.85); }
}

.incoming-whisper-badge {
  position: absolute;
  top: 4px;
  left: 4px;
  background: rgba(14, 165, 233, 0.9);
  color: #fff;
  font-size: 0.62rem;
  font-weight: 700;
  padding: 2px 5px;
  border-radius: 4px;
  z-index: 12;
  backdrop-filter: blur(4px);
  pointer-events: none;
}

.av-active-badge {
  position: absolute;
  top: 4px;
  right: 4px;
  background: rgba(16, 185, 129, 0.9);
  color: #fff;
  font-size: 0.62rem;
  font-weight: 700;
  padding: 2px 5px;
  border-radius: 4px;
  z-index: 12;
  backdrop-filter: blur(4px);
  pointer-events: none;
}

.header-private-badge {
  font-size: 0.72rem;
  background: rgba(16, 185, 129, 0.25);
  border: 1px solid #10b981;
  color: #34d399;
  padding: 2px 8px;
  border-radius: 12px;
  font-weight: 700;
  margin-left: 6px;
}

.avatar-av-status {
  font-size: 0.65rem;
  color: #94a3b8;
  margin-top: 4px;
}

/* Dismissable Video Overlay */
.video-dismissable-overlay {
  position: absolute;
  inset: 0;
  background: rgba(15, 23, 42, 0.88);
  backdrop-filter: blur(4px);
  z-index: 15;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 10px;
  text-align: center;
  animation: fadeIn 0.2s ease;
}

.video-dismissable-overlay .overlay-text {
  font-size: 0.76rem;
  font-weight: 700;
  color: #f1f5f9;
  line-height: 1.3;
  margin-bottom: 6px;
}

.video-dismissable-overlay .btn-dismiss-overlay {
  background: rgba(255, 255, 255, 0.15);
  border: 1px solid rgba(255, 255, 255, 0.3);
  color: #fff;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.75rem;
  transition: background 0.15s;
}

.video-dismissable-overlay .btn-dismiss-overlay:hover {
  background: rgba(239, 68, 68, 0.6);
  border-color: #ef4444;
}

.side-media-tray .video-chat-container {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-height: 120px;
  padding: 8px 10px;
  gap: 6px;
  overflow: hidden;
}

.side-media-tray .video-chat-log {
  flex: 1;
  overflow-y: auto;
  min-height: 80px;
  max-height: 180px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.side-media-tray .video-chat-form {
  display: flex;
  gap: 6px;
  margin-top: auto;
}

.phase-nav-btn.log-nav-btn {
  background: rgba(59, 130, 246, 0.15);
  border-color: rgba(59, 130, 246, 0.4);
  color: #60a5fa;
}

.phase-nav-btn.log-nav-btn:hover {
  background: rgba(59, 130, 246, 0.3);
  border-color: #60a5fa;
  color: #93c5fd;
}

/* 3. Clues Panel */
.clues-panel {
  width: 100%;
  max-width: min(420px, 94vw);
  margin: 0 auto;
  padding: 0 10px 6px;
  background: var(--bg-surface);
  border-top: 1px solid var(--bg-surface-border);
  flex: 0 0 auto;
  min-height: 120px;
  display: flex;
  flex-direction: column;
  overflow: visible;
  box-sizing: border-box;
  user-select: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  position: relative;
}

/* Compact mode for Game Over or user collapse */
.clues-panel.is-compact {
  flex: 0 0 44px !important;
  height: 44px !important;
  min-height: 44px !important;
  max-height: 44px !important;
  overflow: visible !important;
  padding-bottom: 2px !important;
}

.clues-panel.is-compact .clues-list {
  display: none !important;
}

/* Horizontal Splitter Drag Handle Straddling Upper and Lower Sections */
.clues-resize-handle {
  width: 100%;
  height: 14px;
  margin-top: -7px;
  margin-bottom: 3px;
  position: relative;
  z-index: 20;
  display: flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  cursor: ns-resize;
  touch-action: none;
  user-select: none;
  -webkit-user-select: none;
  flex-shrink: 0;
}

.clues-resize-handle .resize-pill {
  width: 44px;
  height: 5px;
  background: var(--bg-surface-border, #4b5563);
  border: 1px solid rgba(0, 0, 0, 0.4);
  border-radius: 3px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.5);
  transition: background 0.15s, transform 0.15s, box-shadow 0.15s;
}

.clues-resize-handle:hover .resize-pill,
.clues-resize-handle:active .resize-pill,
.clues-resize-handle.is-resizing .resize-pill {
  background: var(--accent-gold, #f59e0b);
  border-color: #d97706;
  transform: scaleY(1.3);
  box-shadow: 0 0 8px rgba(245, 158, 11, 0.6);
}

@media (max-width: 768px) {
  .clues-panel {
    max-width: min(505px, 94vw);
    padding: 4px 8px 4px;
    min-height: 42px;
  }
  .clues-header-tabs {
    gap: 4px;
    margin-bottom: 3px;
  }
  .clues-tab-nav {
    gap: 2px;
  }
  .clue-tab-btn {
    padding: 2px 5px;
    font-size: 0.78rem;
  }
  .clue-filter-link {
    font-size: 0.78rem;
    padding: 0 1px;
  }
  .clue-filter-sep {
    margin: 0 2px;
  }
  #btn-tab-activity .clue-tab-label,
  #btn-tab-stats .clue-tab-label,
  #btn-tab-yesterday .clue-tab-label {
    display: none !important;
  }
  .players-tab-desktop {
    display: none !important;
  }
  .players-tab-mobile {
    display: inline !important;
  }
}

.clues-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 4px;
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--text-secondary);
  flex-shrink: 0;
}

.clue-filter-link {
  background: none;
  border: none;
  color: var(--text-muted);
  font-size: 0.82rem;
  font-weight: 700;
  cursor: pointer;
  padding: 0 2px;
  text-decoration: underline;
  text-underline-offset: 3px;
  transition: all 0.15s ease;
}

.clue-filter-link:hover {
  color: var(--text-primary);
}

.clue-filter-link.active-filter {
  color: var(--accent-gold);
  font-weight: 900;
  text-decoration: none;
}

.clue-filter-sep {
  color: var(--text-muted);
  margin: 0 4px;
}

.clues-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 8px;
  align-content: start;
  align-items: start;
  flex: 1 1 auto;
  min-height: 0;
  max-height: none;
  overflow-y: auto;
}

.clue-card {
  background: var(--bg-surface-elevated);
  border: 1px solid var(--bg-surface-border);
  border-radius: var(--radius-sm);
  padding: 8px 12px;
  cursor: pointer;
  align-self: start;
  transition: all 0.15s ease;
}

.clue-card:hover {
  border-color: var(--accent-gold);
  transform: translateY(-1px);
}

.clue-card.clue-card-selected {
  border-color: #38bdf8 !important;
  box-shadow: 0 0 14px rgba(56, 189, 248, 0.7) !important;
  background: rgba(14, 165, 233, 0.18) !important;
}

.clue-audio-controls {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  vertical-align: middle;
  flex-shrink: 0;
}

.clue-audio-btn {
  background: transparent;
  border: none;
  cursor: pointer;
  padding: 2px 4px;
  border-radius: 4px;
  color: #38bdf8;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  vertical-align: middle;
  min-width: 24px;
  min-height: 24px;
  flex-shrink: 0;
  transition: transform 0.15s ease, color 0.15s ease, background-color 0.15s ease;
}

.clue-audio-btn:hover {
  background: rgba(56, 189, 248, 0.15);
  color: #7dd3fc;
  transform: scale(1.12);
}

.clue-audio-btn:focus-visible {
  outline: 2px solid #38bdf8;
  outline-offset: 1px;
}

.clue-audio-btn.is-playing {
  color: #c084fc;
  animation: pulse-clue-audio 1.2s infinite ease-in-out;
}

@keyframes pulse-clue-audio {
  0%, 100% { transform: scale(1); opacity: 1; }
  50% { transform: scale(1.18); opacity: 0.8; }
}

.clue-mic-btn {
  background: transparent;
  border: none;
  cursor: pointer;
  padding: 2px 4px;
  border-radius: 4px;
  color: #94a3b8;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  vertical-align: middle;
  min-width: 24px;
  min-height: 24px;
  flex-shrink: 0;
  transition: transform 0.15s ease, color 0.15s ease, background-color 0.15s ease;
}

.clue-mic-btn:hover {
  background: rgba(148, 163, 184, 0.15);
  color: #f1f5f9;
  transform: scale(1.12);
}

.clue-mic-btn:focus-visible {
  outline: 2px solid #38bdf8;
  outline-offset: 1px;
}

.clue-mic-btn.is-recording {
  color: #ef4444;
  background: rgba(239, 68, 68, 0.15);
  animation: pulse-clue-mic 1s infinite ease-in-out;
}

@keyframes pulse-clue-mic {
  0%, 100% { transform: scale(1); box-shadow: 0 0 0 0 rgba(239, 68, 68, 0.4); }
  50% { transform: scale(1.2); box-shadow: 0 0 0 6px rgba(239, 68, 68, 0); }
}

.clue-pronunciation-feedback {
  margin-top: 6px;
  padding: 6px 10px;
  border-radius: 6px;
  font-size: 0.78rem;
  line-height: 1.4;
  background: rgba(15, 23, 42, 0.65);
  border: 1px solid rgba(56, 189, 248, 0.25);
  display: flex;
  flex-direction: column;
  gap: 4px;
  animation: fadeIn 0.2s ease-in-out;
}

.clue-pronunciation-feedback .feedback-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.clue-pronunciation-feedback .feedback-badge {
  font-weight: 700;
  font-size: 0.75rem;
  padding: 2px 6px;
  border-radius: 4px;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.clue-pronunciation-feedback .feedback-spoken {
  font-style: italic;
  color: #cbd5e1;
}

.clue-pronunciation-feedback .feedback-close-btn {
  background: none;
  border: none;
  color: #64748b;
  cursor: pointer;
  padding: 0 4px;
  font-size: 0.85rem;
  line-height: 1;
}

.clue-pronunciation-feedback .feedback-close-btn:hover {
  color: #f1f5f9;
}

.clue-meta {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.75rem;
  color: var(--text-muted);
  margin-bottom: 4px;
}

.clue-orient {
  color: var(--accent-gold);
  font-weight: 600;
}

.badge-solved {
  color: var(--accent-green);
  font-weight: 700;
}

.badge-hinted {
  color: #f43f5e;
  font-weight: 700;
}

.clue-text {
  font-size: 0.88rem;
  color: var(--text-primary);
  line-height: 1.3;
}

.clue-deepened {
  font-size: 0.8rem;
  color: #f59e0b;
  margin-top: 4px;
}

.clue-def-arrow {
  color: var(--accent-gold);
  font-weight: 900;
  margin: 0 4px;
  display: inline-block;
}

.clue-definition {
  color: #93c5fd;
  font-style: italic;
}

.clue-definition.clue-def-same {
  color: #cbd5e1;
  font-style: italic;
  opacity: 0.9;
}

.clue-definition.clue-def-loading {
  color: var(--text-muted);
  font-style: italic;
}

.game-over-reason {
  color: #fca5a5;
  font-size: 0.85rem;
  margin-top: 3px;
  font-weight: 500;
}

/* Persistent Clues Panel Live Scoreboard Header */
.clues-live-scoreboard {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 4px 8px;
  margin-bottom: 6px;
  background: rgba(15, 23, 42, 0.7);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 8px;
  flex-shrink: 0;
  min-height: 28px;
  box-sizing: border-box;
}

.clues-panel.is-compact .clues-live-scoreboard {
  display: none !important;
}

.scoreboard-strip-header {
  display: flex;
  align-items: center;
  flex-shrink: 0;
}

.scoreboard-title-badge {
  font-size: 0.7rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--accent-gold, #fbbf24);
  white-space: nowrap;
}

.scoreboard-chips-track {
  display: flex;
  align-items: center;
  gap: 6px;
  overflow-x: auto;
  scrollbar-width: none;
  min-width: 0;
  flex: 1 1 auto;
}

.scoreboard-chips-track::-webkit-scrollbar {
  display: none;
}

.scoreboard-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 7px;
  border-radius: 6px;
  background: rgba(30, 41, 59, 0.85);
  border: 1px solid rgba(255, 255, 255, 0.1);
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--text-primary, #f1f5f9);
  white-space: nowrap;
  flex-shrink: 0;
  transition: all 0.15s ease;
  user-select: none;
}

.scoreboard-chip.is-active-turn {
  border-color: #f59e0b;
  background: linear-gradient(135deg, rgba(245, 158, 11, 0.22), rgba(30, 41, 59, 0.95));
  box-shadow: 0 0 8px rgba(245, 158, 11, 0.3);
}

.scoreboard-chip.is-me {
  border-left: 2.5px solid #38bdf8;
}

.scoreboard-chip.is-clickable {
  cursor: pointer;
}

.scoreboard-chip.is-clickable:hover {
  background: rgba(51, 65, 85, 0.9);
  border-color: #38bdf8;
  transform: translateY(-1px);
}

.scoreboard-chip-rank {
  font-size: 0.72rem;
  line-height: 1;
}

.scoreboard-chip-avatar {
  display: inline-flex;
  align-items: center;
  line-height: 1;
  font-size: 0.8rem;
}

.scoreboard-chip-name {
  max-width: 80px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.scoreboard-chip-you {
  font-size: 0.65rem;
  color: #38bdf8;
  font-weight: 700;
}

.scoreboard-chip-score {
  font-family: monospace;
  font-weight: 800;
  color: var(--accent-gold, #fbbf24);
  margin-left: 2px;
}

.scoreboard-pts-unit {
  font-size: 0.65rem;
  color: var(--text-muted, #94a3b8);
  font-weight: normal;
  margin-left: 1px;
}

.scoreboard-turn-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #f59e0b;
  display: inline-block;
  animation: turnDotPulse 1.2s infinite;
  margin-left: 2px;
}

@media (max-width: 600px) {
  .scoreboard-title-badge {
    font-size: 0.65rem;
  }
  .scoreboard-chip {
    padding: 2px 5px;
    font-size: 0.72rem;
  }
  .scoreboard-chip-name {
    max-width: 55px;
  }
}

/* Clues & Players Tab Control */
.clues-header-tabs {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
  margin-bottom: 6px;
  flex-shrink: 0;
  white-space: nowrap;
}

.clues-tab-nav {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  flex-shrink: 0;
}

.clues-count {
  display: inline-flex;
  align-items: center;
  white-space: nowrap;
  flex-shrink: 0;
}

.players-tab-desktop {
  display: inline;
}

.players-tab-mobile {
  display: none;
}

.clue-tab-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
}

.clue-tab-label {
  display: inline;
}

.clue-tab-btn {
  background: rgba(30, 41, 59, 0.45);
  border: 1px solid rgba(255, 255, 255, 0.08);
  color: var(--text-secondary);
  font-size: 0.8rem;
  font-weight: 700;
  padding: 4px 10px;
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.15s ease;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  user-select: none;
  position: relative;
}

.clue-tab-btn:hover {
  background: rgba(51, 65, 85, 0.7);
  color: var(--text-primary);
  border-color: rgba(255, 255, 255, 0.15);
}

.clue-tab-btn.active-tab {
  background: #0ea5e9;
  color: #ffffff;
  font-weight: 800;
  border-color: #38bdf8;
  box-shadow: 0 2px 8px rgba(14, 165, 233, 0.35);
}

.tab-unread-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 17px;
  height: 17px;
  padding: 0 4px;
  border-radius: 9999px;
  background: #ef4444;
  color: #ffffff;
  font-size: 0.65rem;
  font-weight: 800;
  margin-left: 2px;
  animation: tabBadgePulse 1.8s infinite;
}

@keyframes tabBadgePulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.18); }
}

.clues-segmented-filter {
  display: inline-flex;
  align-items: center;
  background: rgba(15, 23, 42, 0.75);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 6px;
  padding: 2px 6px;
  gap: 4px;
}

.players-tab-hint {
  font-size: 0.76rem;
  color: var(--text-muted);
  font-style: italic;
  white-space: nowrap;
}

.activity-tab-hint {
  font-size: 0.76rem;
  color: #38bdf8;
  font-weight: 700;
  white-space: nowrap;
}

/* Activity Feed Styling */
.activity-tab-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  padding: 2px 0 6px;
}

.activity-card {
  background: var(--bg-surface-elevated);
  border: 1px solid var(--bg-surface-border);
  border-radius: 8px;
  padding: 8px 12px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  transition: all 0.15s ease;
  cursor: pointer;
}

.activity-card:hover {
  border-color: #38bdf8;
  background: rgba(30, 41, 59, 0.85);
}

.activity-card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.activity-title-group {
  display: flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
}

.activity-icon {
  font-size: 1rem;
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.activity-icon svg {
  width: 1.2em;
  height: 1.2em;
  vertical-align: middle;
}

.activity-title {
  font-size: 0.82rem;
  font-weight: 700;
  color: var(--text-primary);
  white-space: normal;
}

.activity-timestamp {
  font-size: 0.72rem;
  font-family: monospace;
  color: var(--text-muted);
  flex-shrink: 0;
}

.activity-clue-snippet {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: rgba(15, 23, 42, 0.65);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 6px;
  padding: 6px 10px;
  gap: 8px;
  font-size: 0.78rem;
}

.activity-mask-tag {
  font-family: monospace;
  font-weight: 800;
  color: #38bdf8;
}

.activity-tags-group {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}

button.activity-cell-link {
  background: rgba(56, 189, 248, 0.12);
  border: 1px solid rgba(56, 189, 248, 0.3);
  border-radius: 4px;
  cursor: pointer;
  padding: 1px 5px;
  font-size: 0.75rem;
  line-height: 1.3;
  transition: all 0.15s ease;
}

button.activity-cell-link:hover {
  background: rgba(56, 189, 248, 0.25);
  border-color: #38bdf8;
  transform: translateY(-1px);
}

.activity-letter-tag {
  color: #f43f5e !important;
  background: rgba(244, 63, 94, 0.12) !important;
  border-color: rgba(244, 63, 94, 0.35) !important;
}

button.activity-letter-tag:hover {
  background: rgba(244, 63, 94, 0.25) !important;
  border-color: #f43f5e !important;
}

.activity-clue-text {
  color: var(--text-secondary);
}

.activity-inspect-btn {
  background: none;
  border: none;
  color: #38bdf8;
  font-size: 0.75rem;
  font-weight: 700;
  cursor: pointer;
  padding: 2px 6px;
  border-radius: 4px;
  white-space: nowrap;
  transition: all 0.15s ease;
}

.activity-inspect-btn:hover {
  background: rgba(56, 189, 248, 0.15);
  text-decoration: underline;
}

/* Daily Leaderboard In-Tab Styling */
.leaderboard-tab-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  padding: 2px 0 6px;
}

.leaderboard-entry-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: var(--bg-surface-elevated);
  border: 1px solid var(--bg-surface-border);
  border-radius: 10px;
  padding: 8px 12px;
  gap: 10px;
  transition: all 0.2s ease;
}

.leaderboard-entry-card.rank-1 {
  border-color: rgba(245, 158, 11, 0.7);
  background: linear-gradient(135deg, rgba(245, 158, 11, 0.12), rgba(30, 41, 59, 0.7));
}

.leaderboard-entry-card.is-me {
  border-color: #38bdf8;
  background: rgba(14, 165, 233, 0.12);
}

.leaderboard-rank-badge {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-weight: 800;
  font-size: 0.8rem;
  flex-shrink: 0;
  background: rgba(51, 65, 85, 0.8);
  color: #ffffff;
}

.leaderboard-rank-badge.rank-1 { background: #f59e0b; color: #0f172a; }
.leaderboard-rank-badge.rank-2 { background: #94a3b8; color: #0f172a; }
.leaderboard-rank-badge.rank-3 { background: #b45309; color: #ffffff; }

.leaderboard-time-primary {
  font-family: monospace;
  font-size: 0.95rem;
  font-weight: 900;
  color: #38bdf8;
}

.leaderboard-score-secondary {
  font-family: monospace;
  font-size: 0.75rem;
  font-weight: 700;
  color: var(--accent-gold);
}

.players-tab-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 6px;
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  padding: 2px 0 4px;
}

.player-score-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: var(--bg-surface-elevated);
  border: 1px solid var(--bg-surface-border);
  border-radius: 10px;
  padding: 8px 12px;
  gap: 10px;
  transition: all 0.2s ease;
}

.player-avatar-circle {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: rgba(51, 65, 85, 0.8);
  color: #38bdf8;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-weight: 800;
  font-size: 0.85rem;
  flex-shrink: 0;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
}

.player-score-card.player-card-active-turn .player-avatar-circle {
  background: #f59e0b;
  color: #0f172a;
}

.player-card-header-line {
  display: flex;
  align-items: center;
  gap: 5px;
}

.player-card-status-line {
  font-size: 0.72rem;
  color: var(--text-muted);
  display: flex;
  align-items: center;
  gap: 4px;
  margin-top: 1px;
}

.player-turn-pulse {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #f59e0b;
  display: inline-block;
  animation: turnDotPulse 1.2s infinite;
}

@keyframes turnDotPulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.4; transform: scale(1.3); }
}

.player-score-badge {
  font-family: monospace;
  font-size: 0.95rem;
  font-weight: 900;
  color: var(--accent-gold);
}

.player-score-badge .pts-label {
  font-size: 0.72rem;
  font-weight: normal;
  color: var(--text-muted);
}

.player-whisper-link {
  background: none;
  border: none;
  color: #38bdf8;
  font-size: 0.72rem;
  font-weight: 700;
  cursor: pointer;
  padding: 1px 4px;
  border-radius: 3px;
  transition: all 0.15s ease;
}

.player-whisper-link:hover {
  text-decoration: underline;
}

.player-score-card.player-card-active-turn {
  border-color: var(--accent-gold);
  background: linear-gradient(135deg, rgba(245, 158, 11, 0.14), rgba(30, 41, 59, 0.75));
  box-shadow: 0 0 10px rgba(245, 158, 11, 0.25);
}

.player-score-card.player-card-me {
  border-left: 3px solid #38bdf8;
}

.player-card-info {
  display: flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
  overflow: hidden;
}

.player-rank {
  font-size: 0.75rem;
  font-weight: 800;
  color: var(--text-muted);
  min-width: 18px;
}

.player-avatar-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 0.95rem;
}

.player-card-bot-icon,
.bot-table-icon {
  display: inline-block;
  vertical-align: middle;
}

.player-name-static,
.player-whisper-link {
  background: none;
  border: none;
  padding: 0;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  text-align: left;
  color: var(--text-primary);
  font-size: 0.86rem;
  font-weight: 700;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.player-whisper-link {
  cursor: pointer;
  transition: color 0.15s ease;
}

.player-name-static {
  cursor: default;
  user-select: none;
}

.player-whisper-link:hover .player-name {
  color: #38bdf8;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.player-name-static .you-tag,
.player-whisper-link .you-tag {
  font-size: 0.72rem;
  color: #38bdf8;
  font-weight: 600;
  flex-shrink: 0;
}

.player-name-static .role-tag,
.player-whisper-link .role-tag {
  font-size: 0.68rem;
  color: var(--text-muted);
  background: rgba(255, 255, 255, 0.08);
  padding: 1px 4px;
  border-radius: 4px;
  flex-shrink: 0;
}

.player-card-stats {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
}

.player-turn-badge {
  font-size: 0.68rem;
  font-weight: 800;
  color: #10b981;
  background: rgba(16, 185, 129, 0.15);
  border: 1px solid rgba(16, 185, 129, 0.4);
  padding: 1px 5px;
  border-radius: 8px;
  animation: pulse-turn 2s infinite ease-in-out;
}

.player-score-badge {
  font-size: 0.86rem;
  color: var(--accent-gold);
  font-weight: 800;
  white-space: nowrap;
}

/* Outbreak Shared Companion Rack Display */
.companion-rack-display {
  display: flex;
  gap: 4px;
  flex-wrap: wrap;
  width: 100%;
  padding-top: 5px;
  margin-top: 4px;
  border-top: 1px dashed rgba(255, 255, 255, 0.12);
}

.companion-mini-tile {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  position: relative;
  width: 22px;
  height: 22px;
  background: linear-gradient(135deg, #f8fafc 0%, #cbd5e1 100%);
  color: #0f172a;
  font-weight: 800;
  font-size: 0.72rem;
  border-radius: 4px;
  border: 1px solid rgba(0, 0, 0, 0.15);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.25);
  user-select: none;
}

.companion-mini-val {
  position: absolute;
  bottom: 0px;
  right: 1.5px;
  font-size: 0.44rem;
  font-weight: 700;
  color: #000000;
  line-height: 1;
}

/* 4. Unified Virtual Keyboard Inventory Tray */
.keyboard-tray-section {
  width: 100%;
  max-width: min(420px, 94vw);
  margin: 0 auto;
  background: #0f1218;
  border-top: 1px solid var(--bg-surface-border);
  padding: 4px 8px 4px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  flex-shrink: 0;
  box-sizing: border-box;
}

#keyboard-container,
#actions-container {
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
}

.turn-phase-header {
  width: 100%;
}

/* Phase Navigation Bar: [🎯 Guess], [✏️ Place] or [🔄 Swap] */
.phase-nav-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  width: 100%;
  overflow: hidden;
}

/* Turn & Status Indicator Banner (Below board, Above turn control buttons) */
.turn-status-banner {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  flex-wrap: nowrap;
  padding: 1px 4px;
  margin-bottom: 2px;
  box-sizing: border-box;
}

/* De-duplicate turn messaging: suppress over-board status banner when phase tabs are present */
.fww-game-signals #game-status-banner,
.panel-board:has(.phase-tabs-group) #game-status-banner {
  display: none !important;
}

/* De-duplicate turn pill when phase tabs are present on player's active turn */
.phase-nav-container:has(.phase-tabs-group) .turn-status-banner:has(.my-turn-pill) {
  display: none !important;
}

.title-bar-leave-btn .leave-icon-char {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, monospace, sans-serif;
  font-size: 0.85rem;
  font-weight: 800;
  letter-spacing: -1px;
  line-height: 1;
  color: #ffffff;
  user-select: none;
  pointer-events: none;
}


.turn-status-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  padding: 4px 10px;
  border-radius: var(--radius-full);
  font-size: 0.82rem;
  font-weight: 700;
  letter-spacing: 0.3px;
  border: 1px solid var(--bg-surface-border);
  background: var(--bg-surface-elevated);
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.25);
  text-align: center;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  flex-shrink: 1;
  min-width: 0;
}

.turn-timer-pill {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 11px;
  border-radius: var(--radius-full);
  font-size: 0.82rem;
  font-weight: 700;
  letter-spacing: 0.3px;
  border: 1px solid rgba(59, 130, 246, 0.4);
  background: rgba(59, 130, 246, 0.15);
  color: #93c5fd;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.25);
  transition: all 0.2s ease;
}

.turn-timer-pill.timer-urgent {
  border-color: #ef4444;
  background: rgba(239, 68, 68, 0.25);
  color: #fca5a5;
  animation: urgentTimerPulse 0.7s infinite alternate;
}

@keyframes urgentTimerPulse {
  from { transform: scale(1); box-shadow: 0 0 4px rgba(239, 68, 68, 0.4); }
  to { transform: scale(1.05); box-shadow: 0 0 10px rgba(239, 68, 68, 0.7); }
}

.turn-status-pill.my-turn-pill {
  background: rgba(245, 158, 11, 0.18);
  border-color: var(--accent-gold);
  color: #fbbf24;
  animation: turnPulse 1.6s infinite alternate;
}

.turn-status-pill.waiting-pill {
  background: rgba(239, 68, 68, 0.15);
  border-color: rgba(239, 68, 68, 0.4);
  color: #fca5a5;
  animation: waitingPulse 1.6s infinite alternate;
}

@keyframes waitingPulse {
  from { box-shadow: 0 0 4px rgba(239, 68, 68, 0.3); }
  to { box-shadow: 0 0 12px rgba(239, 68, 68, 0.6); }
}

.turn-status-pill.opponent-turn-pill {
  background: rgba(100, 116, 139, 0.15);
  border-color: rgba(148, 163, 184, 0.3);
  color: var(--text-secondary);
}

.turn-status-pill.final-lap-pill {
  background: linear-gradient(135deg, rgba(239, 68, 68, 0.3), rgba(185, 28, 28, 0.3));
  border-color: #ef4444;
  color: #fecaca;
  animation: finalLapFlash 1s infinite alternate;
}

.phase-tabs-group {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  background: var(--bg-surface-elevated, #111827);
  padding: 2px 5px;
  border-radius: 8px;
  border: 1px solid var(--bg-surface-border, rgba(255, 255, 255, 0.12));
  flex-wrap: nowrap;
  max-width: 100%;
  box-sizing: border-box;
}

.phase-steps-cluster {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  flex-wrap: nowrap;
  flex: 1 1 auto;
  min-width: 0;
}

.phase-alternatives-cluster {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  flex-wrap: nowrap;
  flex-shrink: 0;
}

.phase-nav-btn {
  background: rgba(255, 255, 255, 0.08);
  background-image: linear-gradient(180deg, rgba(255, 255, 255, 0.06) 0%, rgba(255, 255, 255, 0.02) 100%);
  border: 1px solid rgba(255, 255, 255, 0.18);
  color: var(--text-normal, #e2e8f0);
  font-size: 0.8rem;
  font-weight: 700;
  padding: 0 12px;
  height: 26px;
  min-height: 26px;
  max-height: 26px;
  line-height: 24px;
  border-radius: 6px;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.35);
  cursor: pointer;
  transition: all 0.15s ease;
  white-space: nowrap;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
}

.phase-steps-cluster .phase-nav-btn {
  flex: 1 1 auto;
  min-width: 78px;
}

.phase-alternatives-cluster .phase-nav-btn {
  flex-shrink: 0;
  min-width: 50px;
  padding: 0 8px;
}

.phase-nav-btn:hover:not(:disabled) {
  color: #ffffff;
  background: rgba(255, 255, 255, 0.14);
  border-color: rgba(255, 255, 255, 0.3);
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.4);
}

.phase-nav-btn:active:not(:disabled) {
  transform: translateY(1px);
  box-shadow: 0 1px 1px rgba(0, 0, 0, 0.4);
}

.phase-nav-btn:disabled {
  opacity: 0.32;
  cursor: not-allowed;
  background: rgba(255, 255, 255, 0.03);
  border-color: rgba(255, 255, 255, 0.07);
  color: var(--text-muted);
  box-shadow: none;
}

.phase-nav-btn.active-phase.guess-active {
  background: rgba(139, 92, 246, 0.28);
  border-color: #8b5cf6;
  color: #ffffff;
  box-shadow: 0 0 10px rgba(139, 92, 246, 0.45), inset 0 1px 0 rgba(255, 255, 255, 0.2);
}

.phase-nav-btn.active-phase.decipher-active,
.phase-nav-btn.active-phase.place-active {
  background: rgba(245, 158, 11, 0.28);
  border-color: #f59e0b;
  color: #fef3c7;
  box-shadow: 0 0 10px rgba(245, 158, 11, 0.45), inset 0 1px 0 rgba(255, 255, 255, 0.2);
}

.phase-nav-btn.active-phase.archive-active,
.phase-nav-btn.active-phase.swap-active {
  background: rgba(56, 189, 248, 0.28);
  border-color: #38bdf8;
  color: #e0f2fe;
  box-shadow: 0 0 10px rgba(56, 189, 248, 0.45), inset 0 1px 0 rgba(255, 255, 255, 0.2);
}

.phase-nav-or {
  color: var(--text-muted);
  font-size: 0.78rem;
  font-style: italic;
  font-weight: 600;
  padding: 0 1px;
  user-select: none;
}

.phase-pseudo-waiting {
  background: rgba(245, 158, 11, 0.16) !important;
  border: 1px solid rgba(245, 158, 11, 0.45) !important;
  color: #fbbf24 !important;
  font-weight: 600 !important;
  cursor: default !important;
  pointer-events: none;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  user-select: none;
  padding: 4px 7px !important;
  font-size: 0.8rem !important;
  white-space: nowrap;
}

/* Two-Phase Turn Guidance & Attention Nudge Styles */
@keyframes gentle-wobble-nudge {
  0% { transform: scale(1) rotate(0deg); }
  15% { transform: scale(1.02) rotate(-1.5deg); }
  30% { transform: scale(1.03) rotate(1.5deg); }
  45% { transform: scale(1.02) rotate(-1deg); }
  60% { transform: scale(1.01) rotate(1deg); }
  75% { transform: scale(1.005) rotate(-0.5deg); }
  100% { transform: scale(1) rotate(0deg); }
}

@keyframes phase-nudge-bounce {
  0% { transform: translateY(0) scale(1); }
  25% { transform: translateY(-6px) scale(1.03); filter: drop-shadow(0 0 12px rgba(245, 158, 11, 0.7)); }
  50% { transform: translateY(0) scale(1.01); }
  70% { transform: translateY(-2px) scale(1.01); }
  100% { transform: translateY(0) scale(1); filter: none; }
}

.wobble-nudge {
  animation: gentle-wobble-nudge 0.8s ease-in-out !important;
}

.phase-nudge-bounce {
  animation: phase-nudge-bounce 0.85s cubic-bezier(0.34, 1.56, 0.64, 1) !important;
}

@keyframes rack-pulse-nudge {
  0% {
    box-shadow: 0 0 16px rgba(245, 158, 11, 0.35);
    border-color: rgba(245, 158, 11, 0.6);
  }
  50% {
    box-shadow: 0 0 26px rgba(245, 158, 11, 0.85), inset 0 0 14px rgba(245, 158, 11, 0.3);
    border-color: rgba(245, 158, 11, 1);
  }
  100% {
    box-shadow: 0 0 16px rgba(245, 158, 11, 0.35);
    border-color: rgba(245, 158, 11, 0.6);
  }
}

@keyframes keyboard-pulse-nudge {
  0% {
    box-shadow: 0 0 16px rgba(59, 130, 246, 0.35);
    border-color: rgba(59, 130, 246, 0.6);
  }
  50% {
    box-shadow: 0 0 26px rgba(59, 130, 246, 0.85), inset 0 0 14px rgba(59, 130, 246, 0.3);
    border-color: rgba(59, 130, 246, 1);
  }
  100% {
    box-shadow: 0 0 16px rgba(59, 130, 246, 0.35);
    border-color: rgba(59, 130, 246, 0.6);
  }
}

@keyframes tile-hop-nudge {
  0% {
    transform: translateY(0);
  }
  30% {
    transform: translateY(-3px) scale(1.04);
  }
  60% {
    transform: translateY(0) scale(1);
  }
  80% {
    transform: translateY(-1px);
  }
  100% {
    transform: translateY(0);
  }
}

.rack-pulse-nudge {
  animation: rack-pulse-nudge 0.9s ease-in-out !important;
}

.keyboard-pulse-nudge {
  animation: keyboard-pulse-nudge 0.9s ease-in-out !important;
}

.tile-hop-nudge {
  animation: tile-hop-nudge 0.75s cubic-bezier(0.34, 1.56, 0.64, 1) !important;
}

@media (prefers-reduced-motion: reduce) {
  .tile-hop-nudge {
    animation: none !important;
  }
  .phase-nudge-bounce {
    animation: none !important;
    box-shadow: 0 0 14px rgba(245, 158, 11, 0.8);
  }
}


.active-tool-spotlight {
  box-shadow: 0 0 16px rgba(245, 158, 11, 0.35) !important;
  border-color: rgba(245, 158, 11, 0.6) !important;
  transition: all 0.3s ease;
}

.keyboard-active-spotlight {
  box-shadow: 0 0 16px rgba(59, 130, 246, 0.35) !important;
  border-color: rgba(59, 130, 246, 0.6) !important;
  transition: all 0.3s ease;
}

.inactive-tool-dimmed {
  opacity: 0.45 !important;
  filter: grayscale(0.2);
  pointer-events: none;
  transition: all 0.25s ease;
}

.tile-tray-opponent-waiting {
  opacity: 0.78;
  position: relative;
}

.opponent-waiting-badge {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  background: rgba(15, 23, 42, 0.85);
  border: 1px dashed rgba(255, 255, 255, 0.25);
  border-radius: var(--radius-full);
  padding: 3px 12px;
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--text-muted);
  margin: 0 auto 4px auto;
  width: fit-content;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
}

.phase-handoff-banner {
  background: linear-gradient(135deg, rgba(245, 158, 11, 0.22), rgba(245, 158, 11, 0.08));
  border: 1.5px solid rgba(245, 158, 11, 0.6);
  color: #fef08a;
  padding: 5px 12px;
  border-radius: 8px;
  font-size: 0.8rem;
  font-weight: 700;
  text-align: center;
  margin: 4px auto 6px auto;
  box-shadow: 0 4px 12px rgba(245, 158, 11, 0.2);
  animation: phase-nudge-bounce 0.6s ease;
  width: fit-content;
  max-width: 95%;
}

.phase-step-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 17px;
  height: 17px;
  padding: 0 4px;
  border-radius: 4px;
  background: rgba(255, 255, 255, 0.15);
  color: var(--text-normal, #f3f4f6);
  font-size: 0.72rem;
  font-weight: 800;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  margin-right: 5px;
  line-height: 1;
  box-sizing: border-box;
}

.phase-step-badge.step-done {
  background: #10b981;
  color: #ffffff;
  box-shadow: 0 0 6px rgba(16, 185, 129, 0.5);
}

.phase-step-badge.step-active {
  background: #f59e0b;
  color: #000000;
  box-shadow: 0 0 6px rgba(245, 158, 11, 0.5);
}

.phase-step-badge.step-guess-active {
  background: #8b5cf6;
  color: #ffffff;
  box-shadow: 0 0 6px rgba(139, 92, 246, 0.5);
}

.phase-opt-badge {
  font-size: 0.65rem;
  font-weight: 600;
  color: var(--text-muted);
  opacity: 0.85;
  margin-left: 3px;
  text-transform: lowercase;
}



.vk-row.vk-actions-row,
.vk-actions-row {
  display: flex !important;
  justify-content: center !important;
  align-items: center;
  width: 100% !important;
  margin-top: 4px;
  box-sizing: border-box;
  padding: 0 4px;
}

.vk-actions-center {
  display: flex;
  gap: 8px;
  align-items: center;
  justify-content: center;
  margin: 0 auto;
}

/* Dedicated Utilities Row below Enter: Chat, Log, Invite */
.vk-row.vk-utilities-row,
.vk-utilities-row {
  display: flex !important;
  justify-content: center !important;
  align-items: center;
  gap: 8px;
  width: 100% !important;
  margin-top: 6px;
  margin-bottom: 2px;
  box-sizing: border-box;
  padding: 0 4px;
}

.utility-btn {
  flex: 1;
  max-width: 115px;
  height: var(--btn-action-height, 36px);
  min-height: var(--btn-action-height, 36px);
  border-radius: var(--radius-action, 8px);
  padding: 3px 8px;
  font-size: 0.78rem;
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  white-space: nowrap;
}

/* Tap-to-select visual indicator on tray tiles */
.tray-tile.tile-selected-for-place {
  border-color: #38bdf8 !important;
  box-shadow: 0 0 16px rgba(56, 189, 248, 0.85), 0 -4px 10px rgba(56, 189, 248, 0.5) !important;
  transform: translateY(-6px) scale(1.08) !important;
  background: linear-gradient(135deg, #38bdf8, #0284c7) !important;
  color: #fff !important;
  z-index: 15;
}

.tray-tile.tile-selected-for-place .tray-tile-char,
.tray-tile.tile-selected-for-place .tray-tile-pts {
  color: #fff !important;
}

/* Tap-to-select visual indicator on virtual keyboard keys:
   Matches the subtle, thin border and background of mouseover */
.vk-key.key-selected-for-guess,
.vk-key.vk-selected {
  border-color: var(--accent-gold) !important;
  background: #2f384a !important;
  outline: none !important;
  box-shadow: none !important;
  transform: none !important;
  z-index: 15;
}

.action-btn-corner-left-group {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-right: auto;
  flex-shrink: 0;
}

.action-btn-corner-left-group .action-btn-corner-left {
  margin-right: 0;
}

.action-btn-corner-left {
  flex-shrink: 0;
  margin-right: auto;
  padding: 4px 8px;
  font-size: 0.78rem;
  height: 38px;
}

.action-btn-corner-right {
  flex-shrink: 0;
  margin-left: auto;
  padding: 4px 8px;
  font-size: 0.78rem;
  height: 38px;
}

.vk-btn-switcher {
  padding: 4px 8px;
  font-size: 0.76rem;
  font-weight: 800;
  letter-spacing: 0.5px;
  min-width: 54px;
  height: var(--btn-action-height, 36px);
  min-height: var(--btn-action-height, 36px);
  border-radius: var(--radius-action, 8px);
  background: var(--bg-surface-elevated);
  border: 1px solid var(--bg-surface-border);
  color: var(--text-primary);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.vk-btn-switcher:hover {
  border-color: var(--accent-gold);
  background: #2f384a;
}

.vk-key-prune {
  min-width: 48px;
  max-width: 68px;
  height: 38px;
  flex: 1;
}

.vk-key-space {
  min-width: 28px;
  max-width: 38px;
  height: 38px;
  flex: 1;
  background: var(--bg-surface-elevated) !important;
  border: 1px solid var(--bg-surface-border) !important;
  box-shadow: none !important;
}

.vk-key-space:hover:not(.vk-disabled) {
  background: #2f384a !important;
  border-color: var(--accent-gold) !important;
}

.vk-key-space:active:not(.vk-disabled) {
  transform: scale(0.96);
}

.vk-key-prune.has-shears {
  background: linear-gradient(135deg, #065f46 0%, #047857 50%, #059669 100%) !important;
  border: 1.5px solid #34d399 !important;
  box-shadow: 0 0 10px rgba(52, 211, 153, 0.45);
  color: #ecfdf5 !important;
  cursor: pointer;
  animation: shears-pulse 2.2s infinite ease-in-out;
}

.vk-key-prune.has-shears:hover {
  background: linear-gradient(135deg, #047857 0%, #059669 50%, #10b981 100%) !important;
  border-color: #6ee7b7 !important;
  transform: translateY(-1px);
}

.vk-key-prune.prune-active {
  background: linear-gradient(135deg, #b45309 0%, #d97706 50%, #f59e0b 100%) !important;
  border: 1.5px solid #fde047 !important;
  box-shadow: 0 0 14px rgba(245, 158, 11, 0.7) !important;
  animation: shears-active-pulse 1s infinite alternate ease-in-out;
}

@keyframes shears-pulse {
  0%, 100% { box-shadow: 0 0 8px rgba(52, 211, 153, 0.35); }
  50% { box-shadow: 0 0 14px rgba(52, 211, 153, 0.7); }
}

@keyframes shears-active-pulse {
  0% { transform: scale(1); box-shadow: 0 0 8px rgba(245, 158, 11, 0.5); }
  100% { transform: scale(1.04); box-shadow: 0 0 16px rgba(245, 158, 11, 0.9); }
}

.vk-key-space.vk-key-blank-active {
  background: var(--bg-surface-elevated) !important;
  border: 1px solid var(--accent-gold) !important;
  box-shadow: 0 0 8px rgba(245, 158, 11, 0.25) !important;
  cursor: grab !important;
}

.vk-key-space .vk-char,
.vk-key-space.vk-key-blank-active .vk-char {
  color: var(--text-primary) !important;
  font-weight: 800 !important;
  font-size: 1.1rem !important;
}

.vk-key-space.vk-key-blank-active .vk-pts {
  color: var(--text-muted) !important;
  font-weight: 700 !important;
}

.vk-key-space.vk-key-blank-active .vk-tile-count {
  color: var(--accent-gold) !important;
  font-weight: 800 !important;
}

.vk-key-space.vk-key-blank-active:hover {
  background: #2f384a !important;
  border-color: var(--accent-gold) !important;
  transform: translateY(-1px);
  box-shadow: 0 0 10px rgba(245, 158, 11, 0.45) !important;
}

.btn-skip-action {
  padding: 4px 10px;
  font-size: 0.82rem;
  font-weight: 700;
  height: 38px;
  border-radius: var(--radius-sm);
  background: var(--bg-surface-elevated);
  border: 1px solid var(--bg-surface-border);
  color: var(--text-secondary);
  cursor: pointer;
}

.btn-skip-action:hover:not(:disabled) {
  border-color: #f59e0b;
  color: #fde68a;
  background: #2b3343;
}

.phase-guidance-text {
  font-size: 0.82rem;
  color: var(--text-secondary);
  text-align: center;
}

.phase-guidance-text code {
  background: rgba(255, 255, 255, 0.1);
  padding: 1px 5px;
  border-radius: 3px;
  color: var(--accent-gold);
}

.phase-status-bar {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 8px 14px;
  border-radius: var(--radius-md);
  font-size: 0.88rem;
  border: 1px solid var(--bg-surface-border);
  background: var(--bg-surface-elevated);
}

.phase-status-bar .status-icon {
  font-size: 1.2rem;
  margin-right: 8px;
}

.status-waiting {
  color: var(--text-muted);
}

.status-spectator {
  background: rgba(139, 92, 246, 0.15);
  border-color: rgba(139, 92, 246, 0.4);
  color: #c4b5fd;
}

.spectator-badge-text {
  font-size: 0.88rem;
  font-weight: 600;
  color: #c4b5fd;
  padding: 8px 16px;
  background: rgba(139, 92, 246, 0.15);
  border: 1px solid rgba(139, 92, 246, 0.3);
  border-radius: var(--radius-full);
}

.btn-sm {
  padding: 4px 10px;
  font-size: 0.78rem;
}

/* Touch Floating Drag Ghost */
.touch-drag-ghost {
  position: fixed;
  pointer-events: none;
  z-index: 9999;
  width: 48px;
  height: 50px;
  background: linear-gradient(135deg, #fef3c7, #fde68a);
  border: 2px solid #d97706;
  border-radius: 6px;
  font-weight: 800;
  font-size: 1.4rem;
  color: #1c1917;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.6);
  transform: translate(-50%, -50%);
}

.touch-drag-ghost.drag-ghost-illegal {
  background: linear-gradient(135deg, #cbd5e1, #94a3b8) !important;
  border-color: #64748b !important;
  color: #475569 !important;
  filter: grayscale(1) opacity(0.7) !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4) !important;
}

.palette-tile-dragging.drag-illegal,
.tile-dragging.drag-illegal {
  filter: grayscale(1) opacity(0.6) !important;
  border-color: #64748b !important;
  background: #94a3b8 !important;
}

.key-dragging {
  opacity: 0.4;
  transform: scale(0.95);
}

.btn-enter-action {
  font-weight: 800;
  letter-spacing: 0.5px;
  animation: enterButtonPulse 2s infinite alternate ease-in-out;
  min-height: var(--btn-action-height, 36px) !important;
  height: var(--btn-action-height, 36px) !important;
  padding: 4px 14px !important;
  font-size: 0.8rem !important;
  line-height: 1 !important;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-action, 8px) !important;
}

.btn-skip-action,
.btn-cash-in-trap,
#btn-cancel-swap {
  min-height: var(--btn-action-height, 36px) !important;
  height: var(--btn-action-height, 36px) !important;
  padding: 4px 12px !important;
  font-size: 0.8rem !important;
  line-height: 1 !important;
  border-radius: var(--radius-action, 8px) !important;
}

@keyframes enterButtonPulse {
  from { box-shadow: 0 2px 8px rgba(245, 158, 11, 0.3); }
  to { box-shadow: 0 4px 16px rgba(245, 158, 11, 0.6); }
}

.btn-enter-action.is-submitting {
  animation: none !important;
  opacity: 0.85 !important;
  cursor: wait !important;
  pointer-events: none !important;
}

.enter-spinner {
  display: inline-block;
  width: 12px;
  height: 12px;
  border: 2px solid rgba(255, 255, 255, 0.35);
  border-top-color: #ffffff;
  border-radius: 50%;
  animation: enter-spin 0.65s linear infinite;
  margin-right: 6px;
  vertical-align: middle;
  flex-shrink: 0;
}

@keyframes enter-spin {
  to { transform: rotate(360deg); }
}

/* 5. Virtual Keyboard with 4-Corner Badges */
.vk-container {
  display: flex;
  flex-direction: column;
  gap: 5px;
  width: 100%;
  user-select: none;
}

.vk-row {
  display: flex;
  gap: 5px;
  justify-content: center;
}

.vk-key {
  height: 38px;
  min-width: 28px;
  flex: 1;
  max-width: 38px;
  background: var(--bg-surface-elevated);
  border: 1px solid var(--bg-surface-border);
  border-radius: var(--radius-sm);
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.12s ease;
}

.vk-key:hover:not(.vk-disabled) {
  background: #2f384a;
  border-color: var(--accent-gold);
}

.vk-key:active:not(.vk-disabled) {
  transform: scale(0.96);
}

.vk-key.in-hand {
  border-color: rgba(245, 158, 11, 0.5);
  background: rgba(245, 158, 11, 0.1);
}

.vk-key.vk-disabled {
  opacity: 0.3;
  cursor: not-allowed;
  filter: grayscale(1);
}

/* Waiting phase: Held tiles in virtual tray shine so player can plan */
.vk-key.in-tray-waiting {
  opacity: 1 !important;
  filter: none !important;
  background: linear-gradient(135deg, rgba(245, 158, 11, 0.22), rgba(217, 119, 6, 0.12)) !important;
  border: 2px solid var(--accent-gold) !important;
  box-shadow: 0 0 12px rgba(245, 158, 11, 0.35);
  cursor: default !important;
  animation: waitingTilePulse 2.5s infinite alternate ease-in-out;
}

.vk-key.in-tray-waiting .vk-char {
  color: #fef08a !important;
  font-weight: 800;
}

.vk-key.in-tray-waiting .vk-tile-count {
  background: var(--accent-gold);
  color: #0f172a;
  border-radius: var(--radius-full);
  padding: 0 4px;
  font-weight: 800;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.5);
}

.vk-key.in-tray-waiting .vk-pts {
  color: #fde68a !important;
}

@keyframes waitingTilePulse {
  from { box-shadow: 0 0 6px rgba(245, 158, 11, 0.2); }
  to { box-shadow: 0 0 14px rgba(245, 158, 11, 0.5); }
}

.vk-char {
  font-weight: 800;
  font-size: 1.05rem;
  color: var(--text-primary);
}

/* 4-Corner Badges */
.vk-tile-count {
  position: absolute;
  top: 2px;
  left: 3px;
  font-size: 0.65rem;
  font-weight: 800;
  color: var(--accent-gold);
}

.vk-hotkey-clue {
  position: absolute;
  top: 2px;
  right: 3px;
  font-size: 0.7rem;
  font-weight: 800;
  color: var(--accent-gold);
  line-height: 1;
  pointer-events: none;
}

.vk-pts {
  position: absolute;
  bottom: 2px;
  right: 3px;
  font-size: 0.6rem;
  font-weight: 700;
  color: var(--text-muted);
}


.vk-key-wide {
  max-width: 90px;
  font-size: 0.85rem;
  font-weight: 700;
}

.vk-key-action {
  background: #252e3d;
  color: var(--text-primary);
}

.vk-key-special.has-tile {
  background: rgba(139, 92, 246, 0.2);
  border-color: var(--accent-purple);
  color: #c4b5fd;
}

/* Swap Mode Key Toggles */
.vk-key.swap-mode {
  cursor: pointer !important;
}

.vk-key.swap-mode:hover:not(.vk-disabled) {
  border-color: #38bdf8;
  background: rgba(56, 189, 248, 0.15);
}

.vk-key.swap-selected {
  background: rgba(56, 189, 248, 0.25) !important;
  border: 2px solid #38bdf8 !important;
  box-shadow: 0 0 12px rgba(56, 189, 248, 0.6) !important;
  transform: translateY(-2px);
}

.vk-key.swap-selected .vk-char {
  color: #38bdf8 !important;
}

.vk-swap-badge {
  position: absolute;
  top: 2px;
  right: 3px;
  font-size: 0.65rem;
  font-weight: 800;
  color: #0369a1;
  background: #7dd3fc;
  border-radius: var(--radius-full);
  padding: 0 4px;
  line-height: 1.2;
}

/* 6. Turn Actions Bar */
.turn-actions-bar {
  display: flex !important;
  justify-content: center !important;
  align-items: center;
  width: 100% !important;
  box-sizing: border-box;
  padding: 0 4px;
}

.turn-actions-center {
  display: flex;
  gap: 8px;
  align-items: center;
  justify-content: center;
  margin: 0 auto;
}

/* 7. Integrated Video Panel Chat */
.video-card.remote-video {
  cursor: pointer;
  transition: transform 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease;
}

.video-card.remote-video:hover {
  transform: translateY(-2px);
  border-color: #38bdf8;
}

.video-card.whisper-highlight {
  border: 2px solid #a855f7 !important;
  box-shadow: 0 0 14px rgba(168, 85, 247, 0.75) !important;
  transform: translateY(-3px) scale(1.03);
}

/* In-Tray Collaboration Action Bar (CROSS_GAME_SPEC & HANGOUT_SPEC § 3.4) */
.tray-collab-bar {
  display: flex;
  gap: 6px;
  padding: 6px 8px;
  background: rgba(15, 23, 42, 0.95);
  border-top: 1px solid var(--bg-surface-border, rgba(255, 255, 255, 0.12));
  flex-shrink: 0;
  box-sizing: border-box;
}

.btn-tray-collab {
  flex: 1;
  height: 30px;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid var(--border-color, rgba(255, 255, 255, 0.12));
  color: #cbd5e1;
  border-radius: 6px;
  font-size: 0.76rem;
  font-weight: 700;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  transition: all 0.15s ease;
}

.btn-tray-collab:hover {
  background: rgba(255, 255, 255, 0.14);
  color: #fff;
  border-color: rgba(255, 255, 255, 0.25);
}

.btn-tray-collab.btn-invite {
  background: rgba(59, 130, 246, 0.15);
  border-color: rgba(59, 130, 246, 0.35);
  color: #93c5fd;
}

.btn-tray-collab.btn-invite:hover {
  background: rgba(59, 130, 246, 0.25);
  color: #dbeafe;
}

.btn-tray-collab.btn-bot {
  background: rgba(245, 158, 11, 0.15);
  border-color: rgba(245, 158, 11, 0.35);
  color: #fde68a;
}

.btn-tray-collab.btn-bot:hover {
  background: rgba(245, 158, 11, 0.25);
  color: #fef3c7;
}

/* Condition-Specific Invite Video Card in Video Mesh Grid (§HANGOUT_SPEC.md §3.4) */
.video-card.invite-video-card {
  border: 1px solid rgba(139, 92, 246, 0.35) !important;
  background: linear-gradient(180deg, rgba(20, 24, 39, 0.95), rgba(15, 23, 42, 0.98)) !important;
  display: flex !important;
  flex-direction: column !important;
  box-sizing: border-box !important;
  cursor: default;
}

.video-card.invite-video-card:hover {
  border-color: rgba(139, 92, 246, 0.6) !important;
  box-shadow: 0 4px 14px rgba(139, 92, 246, 0.25) !important;
}

.video-card.invite-video-card.board-full {
  border-color: rgba(245, 158, 11, 0.35) !important;
}

.video-card.invite-video-card.board-full:hover {
  border-color: rgba(245, 158, 11, 0.6) !important;
  box-shadow: 0 4px 14px rgba(245, 158, 11, 0.2) !important;
}

.video-card.invite-video-card .invite-viewport {
  width: 100%;
  aspect-ratio: 16 / 9;
  display: flex;
  flex-direction: column;
  padding: 6px 8px;
  box-sizing: border-box;
  justify-content: space-between;
  overflow: hidden;
  background: transparent;
}

.invite-card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  font-size: 0.7rem;
  font-weight: 700;
  color: #cbd5e1;
  line-height: 1;
}

.invite-seat-label {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.seat-open-pill {
  font-size: 0.58rem;
  font-weight: 700;
  color: #34d399;
  background: rgba(16, 185, 129, 0.15);
  border: 1px solid rgba(16, 185, 129, 0.35);
  padding: 1px 5px;
  border-radius: 4px;
  text-transform: uppercase;
  letter-spacing: 0.3px;
}

.invite-actions-body {
  display: flex;
  flex-direction: column;
  gap: 4px;
  width: 100%;
  margin-top: auto;
  margin-bottom: auto;
}

.btn-card-invite {
  width: 100%;
  height: 26px;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.16);
  color: #f1f5f9;
  border-radius: 5px;
  font-size: 0.72rem;
  font-weight: 700;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  padding: 0 6px;
  transition: all 0.15s ease;
  white-space: nowrap;
  box-sizing: border-box;
}

.btn-card-invite:hover {
  background: rgba(255, 255, 255, 0.16);
  border-color: rgba(255, 255, 255, 0.3);
  color: #fff;
  transform: translateY(-1px);
}

.btn-card-invite.btn-card-invite-player {
  background: linear-gradient(135deg, rgba(139, 92, 246, 0.35), rgba(99, 102, 241, 0.35));
  border-color: rgba(139, 92, 246, 0.6);
  color: #ede9fe;
}

.btn-card-invite.btn-card-invite-player:hover {
  background: linear-gradient(135deg, rgba(139, 92, 246, 0.5), rgba(99, 102, 241, 0.5));
  border-color: rgba(167, 139, 250, 0.8);
  color: #ffffff;
}

.invite-secondary-row {
  display: flex;
  gap: 4px;
  width: 100%;
}

.btn-card-invite.btn-card-invite-bot {
  flex: 1;
  background: rgba(245, 158, 11, 0.18);
  border-color: rgba(245, 158, 11, 0.45);
  color: #fef3c7;
}

.btn-card-invite.btn-card-invite-bot:hover {
  background: rgba(245, 158, 11, 0.32);
  border-color: rgba(245, 158, 11, 0.7);
  color: #ffffff;
}

.btn-card-invite.btn-card-invite-observer {
  flex: 1;
  background: rgba(59, 130, 246, 0.16);
  border-color: rgba(59, 130, 246, 0.4);
  color: #bfdbfe;
}

.btn-card-invite.btn-card-invite-observer:hover {
  background: rgba(59, 130, 246, 0.28);
  border-color: rgba(96, 165, 250, 0.7);
  color: #ffffff;
}

.btn-card-invite.full-width {
  flex: 1 1 100%;
  width: 100%;
}

.invite-full-notice {
  font-size: 0.62rem;
  color: #fbbf24;
  text-align: center;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.3px;
  margin-bottom: 2px;
}

.invite-card-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 8px;
  background: rgba(11, 15, 25, 0.95);
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  height: 24px;
  min-height: 24px;
  box-sizing: border-box;
}

.invite-room-tag {
  font-size: 0.66rem;
  color: #94a3b8;
  font-family: monospace;
}

.invite-room-tag strong {
  color: #e2e8f0;
}

.btn-invite-copy-link {
  background: transparent;
  border: none;
  color: #93c5fd;
  font-size: 0.65rem;
  font-weight: 600;
  cursor: pointer;
  padding: 2px 4px;
  border-radius: 3px;
  transition: all 0.12s ease;
  display: inline-flex;
  align-items: center;
  gap: 3px;
}

.btn-invite-copy-link:hover {
  background: rgba(59, 130, 246, 0.15);
  color: #bfdbfe;
}

/* Empty Chair Video Placeholder Tile (§HANGOUT_SPEC.md §3.4) */
.empty-chair-card {
  background: rgba(15, 23, 42, 0.5) !important;
  border: 2px dashed rgba(148, 163, 184, 0.35) !important;
  border-radius: 8px;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  transition: all 0.2s ease;
  min-height: 86px;
  padding: 8px 6px;
  text-align: center;
  box-sizing: border-box;
  user-select: none;
}

.empty-chair-card:hover {
  border-color: #3b82f6 !important;
  background: rgba(59, 130, 246, 0.12) !important;
  transform: translateY(-1px);
}

.empty-chair-card.board-full {
  border-color: rgba(245, 158, 11, 0.35) !important;
}

.empty-chair-card.board-full:hover {
  border-color: #f59e0b !important;
  background: rgba(245, 158, 11, 0.1) !important;
}

.empty-chair-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  width: 100%;
}

.empty-chair-icon {
  font-size: 1.35rem;
  line-height: 1;
}

.empty-chair-label {
  font-size: 0.72rem;
  font-weight: 700;
  color: #e2e8f0;
  display: flex;
  align-items: center;
  gap: 4px;
}

.empty-chair-cta {
  font-size: 0.65rem;
  font-weight: 600;
  color: #93c5fd;
}

.seat-full-pill {
  font-size: 0.56rem;
  font-weight: 800;
  text-transform: uppercase;
  padding: 1px 4px;
  background: rgba(245, 158, 11, 0.2);
  border: 1px solid rgba(245, 158, 11, 0.4);
  color: #fbbf24;
  border-radius: 4px;
}

/* Role Choice Buttons in Empty Chair Modal */
.role-choice-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin-top: 8px;
}

@media (max-width: 520px) {
  .role-choice-grid {
    grid-template-columns: 1fr;
  }
}

.btn-role-choice {
  background: rgba(30, 41, 59, 0.85);
  border: 1px solid var(--border-color, rgba(255, 255, 255, 0.12));
  border-radius: 8px;
  padding: 12px;
  text-align: left;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  gap: 5px;
  transition: all 0.2s ease;
  color: #f8fafc;
}

.btn-role-choice:hover {
  background: rgba(59, 130, 246, 0.18);
  border-color: #3b82f6;
  transform: translateY(-2px);
}

.role-choice-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
}

.role-choice-title {
  font-weight: 700;
  font-size: 0.88rem;
  display: flex;
  align-items: center;
  gap: 6px;
}

.role-choice-badge {
  font-size: 0.62rem;
  font-weight: 800;
  padding: 2px 6px;
  border-radius: 4px;
  text-transform: uppercase;
}

.badge-player { background: rgba(59, 130, 246, 0.25); color: #93c5fd; border: 1px solid rgba(59, 130, 246, 0.4); }
.badge-bot { background: rgba(16, 185, 129, 0.25); color: #6ee7b7; border: 1px solid rgba(16, 185, 129, 0.4); }
.badge-observer { background: rgba(148, 163, 184, 0.2); color: #cbd5e1; border: 1px solid rgba(148, 163, 184, 0.35); }
.badge-learner { background: rgba(245, 158, 11, 0.25); color: #fbbf24; border: 1px solid rgba(245, 158, 11, 0.4); }

.role-choice-desc {
  font-size: 0.72rem;
  color: #94a3b8;
  line-height: 1.35;
}

/* Solo Not Viable Staging Banner (§CROSS_GAME_SPEC.md §25.4) */
.panel-board:has(#solo-not-viable-banner) .keyboard-tray-section:not(:has(#pullup-drawer:is(.is-half-expanded, .is-fully-expanded, .is-custom-expanded))),
.panel-board:has(.solo-not-viable-banner) .keyboard-tray-section:not(:has(#pullup-drawer:is(.is-half-expanded, .is-fully-expanded, .is-custom-expanded))) {
  display: none;
}

.panel-board:has(#solo-not-viable-banner) .keyboard-tray-section:has(#pullup-drawer:is(.is-half-expanded, .is-fully-expanded, .is-custom-expanded)),
.panel-board:has(.solo-not-viable-banner) .keyboard-tray-section:has(#pullup-drawer:is(.is-half-expanded, .is-fully-expanded, .is-custom-expanded)) {
  display: flex !important;
  background: transparent !important;
  border: none !important;
  pointer-events: none !important;
}

.panel-board:has(#solo-not-viable-banner) .keyboard-tray-section:has(#pullup-drawer:is(.is-half-expanded, .is-fully-expanded, .is-custom-expanded)) #pullup-drawer {
  pointer-events: auto !important;
}

.solo-not-viable-banner {
  position: absolute;
  inset: 0;
  background: rgba(15, 23, 42, 0.94);
  backdrop-filter: blur(10px);
  z-index: 50;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 20px 24px;
  text-align: center;
  border-radius: 8px;
  overflow-y: auto;
  animation: fadeIn 0.25s ease-out;
}

.solo-not-viable-icon {
  font-size: 2.4rem;
  margin-bottom: 6px;
}

.solo-not-viable-title {
  font-size: 1.25rem;
  font-weight: 800;
  color: #f8fafc;
  margin-bottom: 6px;
}

.solo-not-viable-subtitle {
  font-size: 0.85rem;
  color: #94a3b8;
  max-width: 380px;
  line-height: 1.45;
  margin-bottom: 14px;
}

.solo-not-viable-match-setup {
  width: 100%;
  max-width: 440px;
  margin-bottom: 16px;
  text-align: left;
}

.staging-settings-summary-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  background: rgba(15, 23, 42, 0.78);
  border: 1px solid rgba(148, 163, 184, 0.25);
  border-radius: 10px;
  padding: 8px 12px;
}

.staging-summary-info {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.staging-summary-kicker {
  font-size: 0.65rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: #94a3b8;
}

.staging-summary-value {
  font-size: 0.84rem;
  font-weight: 700;
  color: #f8fafc;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.btn-staging-customize-toggle {
  padding: 6px 11px;
  font-size: 0.76rem;
  font-weight: 600;
  border-radius: 8px;
  border: 1px solid rgba(56, 189, 248, 0.38);
  background: rgba(56, 189, 248, 0.12);
  color: #38bdf8;
  cursor: pointer;
  white-space: nowrap;
  transition: all 0.15s ease;
}

.btn-staging-customize-toggle:hover {
  background: rgba(56, 189, 248, 0.22);
  border-color: rgba(56, 189, 248, 0.6);
}

.staging-collapsible-custom-settings {
  display: none;
  flex-direction: column;
  gap: 10px;
  margin-top: 8px;
  padding: 12px;
  background: rgba(15, 23, 42, 0.88);
  border: 1px solid rgba(148, 163, 184, 0.22);
  border-radius: 10px;
}

.staging-config-group {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.staging-config-header-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  flex-wrap: wrap;
}

.staging-config-label {
  font-size: 0.74rem;
  font-weight: 700;
  color: #cbd5e1;
}

.staging-mobile-lock-note {
  font-size: 0.68rem;
  color: #f59e0b;
  font-weight: 600;
}

.staging-club-pass-hint {
  font-size: 0.68rem;
  color: #fbbf24;
  font-weight: 600;
}

.staging-option-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 6px;
}

.btn-staging-tier-option,
.btn-staging-diff-option,
.btn-staging-timer-speed {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  padding: 7px 6px;
  border-radius: 8px;
  border: 1px solid rgba(148, 163, 184, 0.22);
  background: rgba(30, 41, 59, 0.72);
  color: #e2e8f0;
  font-size: 0.76rem;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.15s ease;
}

.btn-staging-tier-option:hover:not(:disabled),
.btn-staging-diff-option:hover,
.btn-staging-timer-speed:hover {
  border-color: rgba(56, 189, 248, 0.5);
  background: rgba(30, 41, 59, 0.95);
}

.btn-staging-tier-option.is-active,
.btn-staging-diff-option.is-active,
.btn-staging-timer-speed.is-active {
  border-color: #38bdf8;
  background: rgba(56, 189, 248, 0.18);
  color: #ffffff;
  box-shadow: 0 0 0 1px rgba(56, 189, 248, 0.35);
}

.btn-staging-tier-option:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

.staging-opt-main {
  font-size: 0.76rem;
  font-weight: 700;
}

.staging-tier-cap-sub {
  font-size: 0.65rem;
  font-weight: 500;
  color: #94a3b8;
}

.staging-club-pass-badge {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  margin-top: 2px;
  padding: 1px 6px;
  border-radius: 999px;
  background: rgba(245, 158, 11, 0.16);
  border: 1px solid rgba(245, 158, 11, 0.4);
  color: #fbbf24;
  font-size: 0.62rem;
  font-weight: 700;
}

.staging-club-pass-banner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-top: 4px;
  padding: 7px 10px;
  border-radius: 8px;
  background: rgba(245, 158, 11, 0.12);
  border: 1px solid rgba(245, 158, 11, 0.35);
  font-size: 0.72rem;
  color: #fde68a;
}

.staging-club-pass-banner-text {
  display: flex;
  align-items: center;
  gap: 6px;
  line-height: 1.35;
}

.btn-staging-club-upgrade {
  padding: 4px 10px;
  border-radius: 6px;
  border: none;
  background: linear-gradient(135deg, #f59e0b, #d97706);
  color: #0f172a;
  font-size: 0.7rem;
  font-weight: 800;
  cursor: pointer;
  white-space: nowrap;
}

.btn-staging-club-upgrade:hover {
  filter: brightness(1.08);
}

.staging-non-grid-summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 7px 10px;
  border-radius: 8px;
  background: rgba(30, 41, 59, 0.65);
  border: 1px solid rgba(148, 163, 184, 0.2);
  font-size: 0.76rem;
  color: #e2e8f0;
  font-weight: 600;
}

.staging-free-pill {
  font-size: 0.68rem;
  padding: 2px 8px;
  border-radius: 999px;
  background: rgba(16, 185, 129, 0.15);
  border: 1px solid rgba(16, 185, 129, 0.35);
  color: #34d399;
  font-weight: 700;
}

.staging-timer-toggle-group {
  display: inline-flex;
  gap: 4px;
}

.btn-staging-timer-toggle {
  padding: 3px 9px;
  font-size: 0.7rem;
  font-weight: 700;
  border-radius: 6px;
  border: 1px solid rgba(148, 163, 184, 0.25);
  background: rgba(30, 41, 59, 0.7);
  color: #94a3b8;
  cursor: pointer;
}

.btn-staging-timer-toggle.is-active {
  border-color: #38bdf8;
  background: rgba(56, 189, 248, 0.2);
  color: #f8fafc;
}

.solo-not-viable-actions {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  justify-content: center;
}

.btn-staging-action {
  padding: 10px 16px;
  border-radius: 8px;
  font-size: 0.85rem;
  font-weight: 700;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  transition: all 0.2s ease;
  border: none;
}

.btn-staging-bot {
  background: linear-gradient(135deg, #10b981, #059669);
  color: #fff;
  box-shadow: 0 4px 12px rgba(16, 185, 129, 0.3);
}

.btn-staging-bot:hover { filter: brightness(1.1); transform: translateY(-1px); }

.btn-staging-friend {
  background: linear-gradient(135deg, #3b82f6, #2563eb);
  color: #fff;
  box-shadow: 0 4px 12px rgba(59, 130, 246, 0.3);
}

.btn-staging-friend:hover { filter: brightness(1.1); transform: translateY(-1px); }

.btn-staging-copy {
  background: linear-gradient(135deg, #8b5cf6, #6d28d9);
  color: #fff;
  box-shadow: 0 4px 12px rgba(139, 92, 246, 0.3);
}

.btn-staging-copy:hover { filter: brightness(1.1); transform: translateY(-1px); }

.solo-board-replaced-hidden {
  display: none !important;
}

.solo-not-viable-room-info {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 12px;
}

.solo-room-pill,
.solo-players-pill {
  font-size: 0.78rem;
  padding: 4px 10px;
  border-radius: 9999px;
  background: rgba(30, 41, 59, 0.85);
  border: 1px solid rgba(148, 163, 184, 0.25);
  color: #cbd5e1;
}

.solo-room-pill strong {
  color: #38bdf8;
  letter-spacing: 0.05em;
}

.solo-not-viable-waiting {
  margin-top: 14px;
  font-size: 0.8rem;
  color: #94a3b8;
  animation: pulse 2s infinite ease-in-out;
}


.tray-bottom-drawer,
.video-chat-container {
  display: flex;
  flex-direction: column;
  background: rgba(15, 23, 42, 0.75);
  border: 1px solid var(--bg-surface-border);
  border-radius: var(--radius-sm);
  margin-top: 4px;
  overflow: hidden;
  transition: height 0.25s cubic-bezier(0.16, 1, 0.3, 1), max-height 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}

.tray-bottom-drawer.drawer-expanded {
  height: 75% !important;
  max-height: 80% !important;
  flex: none !important;
  z-index: 20;
}

.tray-drawer-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 4px 8px;
  background: rgba(30, 41, 59, 0.75);
  border-bottom: 1px solid var(--bg-surface-border);
  flex-shrink: 0;
}

.tray-drawer-tabs {
  display: flex;
  gap: 4px;
  align-items: center;
}

.drawer-tab-btn {
  background: transparent;
  border: 1px solid transparent;
  color: #94a3b8;
  font-size: 0.76rem;
  font-weight: 600;
  padding: 3px 8px;
  border-radius: 4px;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 5px;
  transition: all 0.15s ease;
}

.drawer-tab-btn:hover {
  color: #f1f5f9;
  background: rgba(255, 255, 255, 0.05);
}

.drawer-tab-btn.active {
  color: #38bdf8;
  background: rgba(56, 189, 248, 0.15);
  border-color: rgba(56, 189, 248, 0.35);
}

.drawer-tab-badge {
  background: #f59e0b;
  color: #000;
  font-size: 0.65rem;
  font-weight: 700;
  padding: 1px 5px;
  border-radius: 10px;
  line-height: 1;
}

.drawer-pull-bar {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 8px;
  display: flex;
  justify-content: center;
  align-items: center;
  cursor: ns-resize;
  z-index: 10;
}

.pull-bar-pill {
  width: 32px;
  height: 3px;
  background: rgba(148, 163, 184, 0.4);
  border-radius: 2px;
  transition: all 0.15s ease;
}

.drawer-pull-bar:hover .pull-bar-pill {
  background: #38bdf8;
  width: 40px;
}

.tray-drawer-actions {
  display: flex;
  gap: 4px;
  align-items: center;
}

.btn-drawer-window-icon {
  background: transparent;
  border: 1px solid rgba(148, 163, 184, 0.2);
  color: #94a3b8;
  font-size: 0.75rem;
  width: 22px;
  height: 22px;
  border-radius: 4px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.15s ease;
  line-height: 1;
}

.btn-drawer-window-icon:hover {
  color: #f1f5f9;
  border-color: #94a3b8;
  background: rgba(255, 255, 255, 0.08);
}

.btn-drawer-window-icon.is-active {
  color: #38bdf8;
  border-color: rgba(56, 189, 248, 0.4);
  background: rgba(56, 189, 248, 0.12);
}

.btn-drawer-expand {
  background: transparent;
  border: 1px solid rgba(148, 163, 184, 0.25);
  color: #94a3b8;
  font-size: 0.72rem;
  padding: 2px 7px;
  border-radius: 4px;
  cursor: pointer;
  transition: all 0.15s ease;
  display: flex;
  align-items: center;
  gap: 3px;
}

.btn-drawer-expand:hover {
  color: #f1f5f9;
  border-color: #94a3b8;
  background: rgba(255, 255, 255, 0.05);
}

.tray-drawer-body {
  flex: 1;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  position: relative;
  min-height: 80px;
}

.drawer-pane {
  flex: 1;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  padding: 6px 8px;
  gap: 6px;
}

.video-activity-log {
  flex: 1;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding-right: 4px;
  min-height: 60px;
}

.activity-empty-notice {
  color: #64748b;
  font-size: 0.78rem;
  font-style: italic;
  text-align: center;
  padding: 12px 6px;
}

.video-activity-item {
  display: flex;
  align-items: baseline;
  gap: 6px;
  padding: 3px 6px;
  border-radius: 4px;
  background: rgba(30, 41, 59, 0.45);
  border-left: 2px solid #f59e0b;
  color: #cbd5e1;
  font-size: 0.8rem;
  line-height: 1.3;
}

.video-activity-item.activity-spotlight {
  border-left-color: #eab308;
  background: rgba(234, 179, 8, 0.08);
}

.video-activity-item.activity-whisper {
  border-left-color: #a855f7;
  background: rgba(168, 85, 247, 0.08);
}

.video-activity-item.activity-peer {
  border-left-color: #3b82f6;
  background: rgba(59, 130, 246, 0.08);
}

.video-activity-item.activity-game {
  border-left-color: #10b981;
  background: rgba(16, 185, 129, 0.08);
}

.video-activity-item .activity-time {
  font-size: 0.68rem;
  color: #64748b;
  font-family: monospace;
  white-space: nowrap;
}

.video-activity-item .activity-icon {
  font-size: 0.8rem;
  flex-shrink: 0;
}

.video-activity-item .activity-text {
  flex: 1;
  word-break: break-word;
}

.video-chat-log {
  max-height: 80px;
  min-height: 48px;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding-right: 4px;
}

.video-chat-bubble {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 4px;
  font-size: 0.82rem;
  line-height: 1.35;
  background: rgba(30, 41, 59, 0.6);
  padding: 3px 8px;
  border-radius: 4px;
  border-left: 2px solid #38bdf8;
}

.video-chat-bubble.chat-mine {
  background: rgba(30, 41, 59, 0.9);
}

.video-chat-bubble.chat-whisper {
  border-left-color: #a855f7;
  background: rgba(88, 28, 135, 0.25);
}

.chat-prefix {
  font-weight: 800;
  color: #38bdf8;
}

.video-chat-bubble.chat-whisper .chat-prefix {
  color: #c084fc;
}

.chat-sender {
  font-weight: 700;
  color: #f1f5f9;
}

.whisper-tag {
  color: #e879f9;
  font-size: 0.72rem;
  font-style: italic;
  font-weight: 600;
}

.chat-text {
  color: #e2e8f0;
}

.chat-time {
  font-size: 0.68rem;
  color: #64748b;
  margin-left: auto;
}

.video-chat-form {
  display: flex;
  gap: 6px;
  align-items: center;
}

.video-chat-input {
  flex: 1;
  height: 30px;
  padding: 4px 10px;
  background: #090d16;
  border: 1px solid var(--bg-surface-border);
  border-radius: var(--radius-sm);
  color: #f8fafc;
  font-size: 0.82rem;
  outline: none;
  transition: border-color 0.15s;
}

.video-chat-input:focus {
  border-color: #38bdf8;
}

.btn-video-chat-send {
  height: 30px;
  padding: 0 12px;
  font-size: 0.78rem;
  font-weight: 700;
}

/* 8. Scrabble-style Tile Tray Rack (Place & Swap Modes) */
.tile-tray-rack {
  --tray-tile-size: clamp(38px, min(var(--board-tile-size, 42px), 46px), 46px);
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 5px;
  padding: 4px 8px;
  margin: 2px 0 4px 0;
  background: linear-gradient(180deg, #1e293b, #0f172a);
  border: 1px solid rgba(245, 158, 11, 0.3);
  border-radius: var(--radius-md, 8px);
  box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.5), 0 4px 12px rgba(0, 0, 0, 0.3);
  min-height: calc(var(--tray-tile-size, 42px) + 8px);
  flex-wrap: nowrap;
  max-width: 100%;
}

.tray-tile {
  width: var(--tray-tile-size, 42px);
  height: var(--tray-tile-size, 42px);
  aspect-ratio: 1 / 1;
  min-width: 0;
  flex-shrink: 0;
  background-color: #f8fafc;
  border: 1px solid #cbd5e1;
  border-radius: 4px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  position: relative;
  box-shadow: none;
  user-select: none;
  cursor: grab;
  transition: transform 0.12s ease, border-color 0.12s ease;
}

.tray-tile:hover {
  transform: translateY(-3px);
  border-color: #38bdf8;
}

.tray-tile:active {
  cursor: grabbing;
}

.tray-tile.tray-tile-dragging {
  opacity: 0.4;
  transform: scale(0.95);
}

.tray-tile.tray-drag-over {
  border: 2px solid #38bdf8 !important;
  transform: scale(1.06) translateY(-2px) !important;
  box-shadow: 0 0 12px rgba(56, 189, 248, 0.6) !important;
  background-color: #f1f5f9 !important;
}

.tile-tray-rack.tray-drag-over {
  border-color: #38bdf8 !important;
  box-shadow: inset 0 0 12px rgba(56, 189, 248, 0.4), 0 4px 12px rgba(0, 0, 0, 0.4);
}

.tray-tile-char {
  font-family: var(--font-tile, 'Lora', Georgia, serif);
  font-size: calc(var(--tray-tile-size, 42px) * 0.54);
  font-weight: 700;
  color: #090d16;
  line-height: 1;
  transform: translateY(-1px);
}

.tray-tile-pts {
  position: absolute;
  bottom: 2px;
  right: 2px;
  font-family: var(--font-sans, 'Inter', sans-serif);
  font-size: calc(var(--tray-tile-size, 42px) * 0.25);
  font-weight: 700;
  color: #000000;
}

/* Hexagonal Tray & Tiles (Flat-topped hex geometry per CROSS_GAME_SPEC §5.3.4.1 #4) */
.is-hex-tray .tray-tile,
.tray-tile.is-hex-tile,
.is-hex-tray .tray-die,
.tray-die.is-hex-tile,
.is-hex-tray .die-face,
.die-face.is-hex-tile,
#floating-touch-tile.is-hex-tile,
.touch-drag-ghost.is-hex-tile {
  clip-path: polygon(25% 0%, 75% 0%, 100% 50%, 75% 100%, 25% 100%, 0% 50%);
  border: none;
  border-radius: 0;
  filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.35)) drop-shadow(0 0 1px #94a3b8);
  transition: transform 0.12s ease, filter 0.12s ease;
}

.is-hex-tray .tray-tile:hover,
.tray-tile.is-hex-tile:hover,
.is-hex-tray .tray-die:hover,
.tray-die.is-hex-tile:hover {
  filter: drop-shadow(0 0 5px rgba(56, 189, 248, 0.75)) drop-shadow(0 0 1px #38bdf8);
}

.is-hex-tray .tray-tile.tile-selected-for-place,
.tray-tile.is-hex-tile.tile-selected-for-place,
.is-hex-tray .tray-tile.tray-tile-selected,
.tray-tile.is-hex-tile.tray-tile-selected {
  border: none;
  box-shadow: none;
  filter: drop-shadow(0 0 8px rgba(56, 189, 248, 0.95)) drop-shadow(0 0 2px #38bdf8);
}

.is-hex-tray .tray-tile.tray-drag-over,
.tray-tile.is-hex-tile.tray-drag-over {
  border: none;
  box-shadow: none;
  filter: drop-shadow(0 0 10px rgba(56, 189, 248, 0.95)) drop-shadow(0 0 2px #38bdf8);
}

.is-hex-tray .tray-tile-pts,
.tray-tile.is-hex-tile .tray-tile-pts,
.is-hex-tray .die-pts,
.die-face.is-hex-tile .die-pts {
  bottom: 3px;
  right: 8px;
}


/* Blank tile styling: always active, never disabled in player rack */
.tray-tile.tray-tile-blank {
  background: linear-gradient(145deg, #e2e8f0, #cbd5e1);
  border-color: #94a3b8;
  cursor: grab;
}

/* Swap Mode Tile Selection */
.tray-tile.tray-tile-swap {
  cursor: pointer;
}

.tray-tile.tray-tile-selected {
  transform: translateY(-6px);
  border: 2px solid #38bdf8 !important;
  box-shadow: 0 0 14px rgba(56, 189, 248, 0.7) !important;
  background: linear-gradient(145deg, #e0f2fe, #bae6fd) !important;
}

.tray-swap-check {
  position: absolute;
  top: -6px;
  right: -6px;
  width: 18px;
  height: 18px;
  background: #0284c7;
  color: #fff;
  border-radius: 50%;
  font-size: 0.7rem;
  font-weight: 900;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.4);
}

.tray-empty-hint {
  font-size: 0.88rem;
  color: var(--accent-gold);
  font-weight: 600;
  padding: 8px 12px;
  text-align: center;
}

@media (max-width: 480px) {
  .phase-tabs-group {
    gap: 3px;
    padding: 2px 3px;
    border-radius: 8px;
    flex-wrap: nowrap !important;
    justify-content: center;
    width: 100%;
    max-width: 100%;
    overflow: hidden;
  }
  .phase-steps-cluster {
    gap: 3px;
    justify-content: center;
    flex-wrap: nowrap !important;
    flex: 1 1 auto;
    min-width: 0;
  }
  .phase-alternatives-cluster {
    gap: 2px;
    justify-content: center;
    flex-wrap: nowrap !important;
    flex-shrink: 0;
  }
  .phase-nav-btn {
    font-size: 0.74rem;
    padding: 0 6px;
    height: 26px;
    min-height: 26px;
    max-height: 26px;
    line-height: 24px;
    border-radius: 5px;
  }
  .phase-steps-cluster .phase-nav-btn {
    flex: 1 1 auto;
    min-width: 0;
  }
  .phase-alternatives-cluster .phase-nav-btn {
    flex-shrink: 0;
    min-width: 0;
    padding: 0 5px;
    font-size: 0.72rem;
  }
  .phase-nav-or {
    font-size: 0.70rem;
    padding: 0 1px;
  }
  .game-title-bar {
    height: 32px;
    min-height: 32px;
    max-height: 32px;
    padding: 0 8px;
  }
  .title-bar-title {
    display: inline-block;
    font-size: 0.74rem;
    letter-spacing: 0.5px;
    max-width: 90px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .turn-status-banner {
    gap: 4px;
    flex-wrap: nowrap;
  }
  .turn-status-pill {
    padding: 3px 8px;
    font-size: 0.75rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 220px;
  }
  .title-bar-user-badge {
    display: none !important;
  }

  .phase-pseudo-waiting {
    padding: 4px 6px !important;
    font-size: 0.74rem !important;
  }
  .vk-key {
    height: clamp(32px, 4.4vh, 40px);
    min-width: 0 !important;
    flex: 1 1 0px !important;
  }
  .vk-row.vk-actions-row,
  .vk-actions-row,
  .turn-actions-bar {
    width: 100% !important;
    justify-content: center !important;
    gap: 4px;
    box-sizing: border-box;
    padding: 0 4px;
  }
  .vk-row.vk-utilities-row,
  .vk-utilities-row {
    gap: 6px;
    margin-top: 10px;
    margin-bottom: 2px;
  }
  .utility-btn {
    height: 30px;
    padding: 3px 6px;
    font-size: 0.74rem;
    max-width: 105px;
  }
  .action-btn-corner-left-group {
    gap: 4px;
  }
  .action-btn-corner-left,
  .action-btn-corner-right {
    padding: 4px 6px;
    font-size: 0.72rem;
    height: 38px;
  }
  .vk-btn-switcher {
    padding: 4px 6px;
    font-size: 0.75rem;
    min-width: 52px;
    height: 38px;
  }
  .vk-key-space {
    height: 40px;
    min-width: 28px;
    max-width: 38px;
  }
  .btn-enter-action, .btn-skip-action {
    padding: 4px 14px;
    font-size: 0.8rem;
    height: 28px;
    min-height: 28px;
    line-height: 1;
    border-radius: var(--radius-full);
  }
  .tile-tray-rack {
    gap: 4px;
    padding: 4px 6px;
    min-height: calc(var(--tray-tile-size, 38px) + 6px);
  }
  .tray-tile {
    width: var(--tray-tile-size, 38px);
    height: var(--tray-tile-size, 38px);
    aspect-ratio: 1 / 1;
  }
  .tray-tile-char {
    font-size: calc(var(--tray-tile-size, 38px) * 0.52);
  }
  .tray-tile-pts {
    font-size: calc(var(--tray-tile-size, 38px) * 0.26);
  }
}

@media (max-width: 768px) {
  .side-media-tray.tray-expanded:not(.tray-maximized) {
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    top: auto !important;
    transform: none !important;
    width: 100% !important;
    max-width: 100% !important;
    border-radius: 14px 14px 0 0;
  }
  .side-tray-header {
    cursor: default;
  }
}

/* Branches tray styles relocated to js/games/branches/branches.css */

/* ==========================================================================
   Learning Mode UI (Host Observes 2 Bots)
   ========================================================================== */

.learning-header-container {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  max-width: 640px;
  margin: 0 auto 6px;
  padding: 4px 8px;
  gap: 8px;
  flex-wrap: wrap;
}

.learning-mode-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: rgba(245, 158, 11, 0.15);
  border: 1px solid rgba(245, 158, 11, 0.4);
  padding: 4px 10px;
  border-radius: 9999px;
  font-size: 0.82rem;
  font-weight: 700;
  color: #fbbf24;
}

.learning-players-matchup {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.learning-bot-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: rgba(30, 41, 59, 0.8);
  border: 1px solid rgba(148, 163, 184, 0.25);
  padding: 3px 10px;
  border-radius: 8px;
  font-size: 0.85rem;
  color: #f1f5f9;
  transition: all 0.2s ease;
}

.learning-bot-chip.active-bot-chip {
  border-color: #f59e0b;
  background: rgba(245, 158, 11, 0.2);
  box-shadow: 0 0 10px rgba(245, 158, 11, 0.25);
}

.learning-bot-chip .bot-score {
  font-weight: 800;
  color: #38bdf8;
  font-size: 0.82rem;
}

.learning-vs-tag {
  font-size: 0.75rem;
  font-weight: 800;
  color: #94a3b8;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.learning-dashboard-card {
  width: 100%;
  max-width: 640px;
  margin: 0 auto;
  background: rgba(15, 23, 42, 0.75);
  border: 1px solid rgba(148, 163, 184, 0.2);
  border-radius: 10px;
  padding: 10px 14px;
  box-sizing: border-box;
}

.learning-status-row {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 8px;
  font-size: 0.88rem;
  color: #e2e8f0;
}

.learning-status-pulse {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #10b981;
  box-shadow: 0 0 6px #10b981;
  flex-shrink: 0;
}

.learning-status-pulse.thinking {
  background: #f59e0b;
  box-shadow: 0 0 8px #f59e0b;
  animation: pulse-glow 1s infinite alternate;
}

@keyframes pulse-glow {
  0% { transform: scale(0.9); opacity: 0.7; }
  100% { transform: scale(1.25); opacity: 1; }
}

.learning-summary-box {
  background: rgba(30, 41, 59, 0.7);
  border: 1px solid rgba(245, 158, 11, 0.25);
  border-radius: 8px;
  padding: 8px 12px;
  font-size: 0.86rem;
  color: #cbd5e1;
}

.learning-summary-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 4px;
  font-size: 0.8rem;
  color: #94a3b8;
}

.learning-summary-title {
  color: #f8fafc;
}

.learning-score-gain {
  font-weight: 800;
  color: #10b981;
}

.learning-clue-note {
  font-size: 0.8rem;
  color: #fbbf24;
  margin-top: 4px;
}

.learning-deduction-note {
  font-size: 0.82rem;
  color: #38bdf8;
  margin-top: 6px;
  padding-top: 6px;
  border-top: 1px dashed rgba(148, 163, 184, 0.2);
}

.learning-welcome-box {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 8px 10px;
  font-size: 0.84rem;
  color: #cbd5e1;
  background: rgba(30, 41, 59, 0.4);
  border-radius: 8px;
}

.learning-welcome-icon {
  font-size: 1.5rem;
}

.learning-actions-bar {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  max-width: 640px;
  margin: 8px auto 0;
  flex-wrap: wrap;
}

.btn-learning-step {
  padding: 7px 18px;
  font-size: 0.95rem;
  font-weight: 700;
  min-width: 120px;
}

.btn-autoplay-active {
  background: rgba(245, 158, 11, 0.2) !important;
  border-color: #f59e0b !important;
  color: #fbbf24 !important;
  font-weight: 700;
}

.learning-speed-pills {
  display: inline-flex;
  border: 1px solid rgba(148, 163, 184, 0.25);
  border-radius: 6px;
  overflow: hidden;
}

.speed-pill {
  background: rgba(30, 41, 59, 0.6);
  border: none;
  color: #94a3b8;
  padding: 5px 10px;
  font-size: 0.78rem;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.15s ease;
}

.speed-pill:hover {
  background: rgba(51, 65, 85, 0.8);
  color: #f8fafc;
}

.speed-pill.active {
  background: #f59e0b;
  color: #0f172a;
}

.tile-learning-secret {
  border-style: dashed !important;
  opacity: 0.92;
}

/* Dig HUD styles relocated to js/games/dig/dig.css */

/* Branches shears tile relocated to js/games/branches/branches.css */

/* Dig booby trap styles relocated to js/games/dig/dig.css */

/* -------------------------------------------------------------------------- */
/* Contextual Clues Overlay Panel (Scrollable, covers HUD below toolbar)      */
/* -------------------------------------------------------------------------- */
.hud-clue-overlay {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 65;
  background: rgba(13, 16, 23, 0.98);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border-top: 2px solid var(--accent-gold, #f59e0b);
  border-radius: 0 0 var(--radius-md, 8px) var(--radius-md, 8px);
  box-shadow: 0 -6px 24px rgba(0, 0, 0, 0.75);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  animation: clueOverlayFadeIn 0.15s ease-out;
}

@keyframes clueOverlayFadeIn {
  from {
    opacity: 0;
    transform: translateY(6px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.hud-clue-overlay-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 6px 12px;
  background: rgba(23, 27, 36, 0.96);
  border-bottom: 1px solid var(--bg-surface-border, #334155);
  flex-shrink: 0;
}

.hud-clue-overlay-title-group {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 0.82rem;
  font-weight: 700;
  color: var(--accent-gold, #f59e0b);
}

.hud-clue-overlay-subtitle {
  font-size: 0.72rem;
  color: var(--text-muted, #94a3b8);
  font-weight: 400;
}

.btn-close-clue-overlay {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.2);
  background: rgba(255, 255, 255, 0.08);
  color: #f1f5f9;
  font-size: 0.82rem;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.15s ease;
  padding: 0;
  line-height: 1;
  user-select: none;
  pointer-events: auto;
  position: relative;
  z-index: 2;
}

.btn-close-clue-overlay:hover {
  background: rgba(239, 68, 68, 0.35);
  border-color: #ef4444;
  color: #fca5a5;
  transform: scale(1.08);
}

.hud-clue-overlay-body {
  flex: 1 1 auto;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding: 8px 10px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.hud-clue-overlay-body .clue-card {
  margin-bottom: 0 !important;
}




/* Virtual Keyboard Option A styling */
.vk-key-dir {
  min-width: 44px;
  flex: 1.3;
  font-size: 1.05rem;
  background: var(--bg-surface-elevated, #1e293b);
  border-color: #3b82f6;
  color: #93c5fd;
  white-space: nowrap;
  padding: 0 4px;
}
.vk-key-dir:hover:not(.vk-disabled) {
  background: #1e3a8a;
  border-color: #60a5fa;
  color: #eff6ff;
}
.vk-key-wildcard {
  border-color: rgba(245, 158, 11, 0.45);
  background: rgba(245, 158, 11, 0.12);
  color: #ffffff;
}
.vk-key-wildcard:hover:not(.vk-disabled) {
  background: rgba(245, 158, 11, 0.22);
  border-color: #f59e0b;
}
.vk-pts-penalty,
.vk-pts-value {
  color: #fbbf24 !important;
  font-weight: 800 !important;
}
.vk-btn-options {
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

/* Preferences Modal */
.vk-prefs-modal-content {
  max-width: 440px;
  width: min(440px, calc(100vw - 24px));
  max-height: min(88dvh, calc(100dvh - 24px));
  display: flex;
  flex-direction: column;
  background: var(--bg-surface, #0f172a);
  border: 1px solid var(--border-subtle, rgba(255, 255, 255, 0.15));
  border-radius: 12px;
  padding: 0;
  overflow: hidden;
  box-shadow: 0 20px 48px rgba(0, 0, 0, 0.6);
}
.vk-prefs-header {
  padding: clamp(10px, 1.8dvh, 14px) 16px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-shrink: 0;
}
.vk-prefs-heading {
  margin: 0;
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--text-primary, #f8fafc);
}
.vk-prefs-body {
  padding: clamp(10px, 1.8dvh, 16px) 16px;
  display: flex;
  flex-direction: column;
  gap: clamp(10px, 1.8dvh, 16px);
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
}
.vk-prefs-section-title {
  margin: 0 0 8px 0;
  font-size: 0.80rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--accent-gold, #f59e0b);
}
.vk-prefs-options-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}
.vk-prefs-radio-card {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: clamp(7px, 1.2dvh, 10px) 10px;
  background: rgba(255, 255, 255, 0.04);
  border: 1.5px solid rgba(255, 255, 255, 0.1);
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.15s ease;
}
.vk-prefs-radio-card.is-selected {
  border-color: var(--accent-gold, #f59e0b);
  background: rgba(245, 158, 11, 0.12);
}
.vk-radio-label-group {
  display: flex;
  flex-direction: column;
}
.vk-radio-name {
  font-weight: 700;
  font-size: 0.86rem;
  color: var(--text-primary, #f8fafc);
}
.vk-radio-preview {
  font-size: 0.72rem;
  color: var(--text-muted, #94a3b8);
  font-family: monospace;
}
.vk-prefs-toggle-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.vk-prefs-switch-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: clamp(7px, 1.2dvh, 10px) 10px;
  background: rgba(255, 255, 255, 0.03);
  border-radius: 8px;
  cursor: pointer;
}
.vk-switch-info {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.vk-switch-label {
  font-weight: 600;
  font-size: 0.86rem;
  color: var(--text-primary, #f8fafc);
}
.vk-switch-desc {
  font-size: 0.72rem;
  color: var(--text-muted, #94a3b8);
  line-height: 1.25;
}
.vk-prefs-footer {
  padding: clamp(10px, 1.6dvh, 14px) 16px;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  background: rgba(0, 0, 0, 0.15);
  flex-shrink: 0;
}

/* Hangout Session Apps & Game Toolbar (Above Videos) */
.session-apps-toolbar {
  padding: 6px 10px;
  background: var(--bg-surface, #1e2433);
  border-bottom: 1px solid var(--bg-surface-border, rgba(255, 255, 255, 0.1));
  display: flex;
  flex-direction: column;
  gap: 4px;
  flex-shrink: 0;
}

.session-apps-toolbar-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.session-apps-toolbar-title {
  font-size: 0.65rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-muted, #94a3b8);
}

.session-apps-toolbar-items {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  overflow: visible;
  padding: 2px 0;
}

.session-app-btn {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 4px 8px;
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.12);
  color: var(--text-primary, #f8fafc);
  font-size: 0.75rem;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
  transition: all 0.15s ease;
}

.session-app-btn:hover {
  background: rgba(255, 255, 255, 0.12);
  border-color: rgba(255, 255, 255, 0.25);
}

.session-app-btn.active {
  background: rgba(99, 102, 241, 0.25);
  border-color: #6366f1;
  color: #a5b4fc;
  box-shadow: 0 0 8px rgba(99, 102, 241, 0.3);
}

.session-app-btn.session-game-btn.active {
  background: rgba(16, 185, 129, 0.25);
  border-color: #10b981;
  color: #6ee7b7;
  box-shadow: 0 0 8px rgba(16, 185, 129, 0.3);
}

.session-app-icon {
  font-size: 0.95rem;
  line-height: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.session-app-icon svg {
  width: 1.25em;
  height: 1.25em;
  vertical-align: middle;
}

.session-app-label {
  font-size: 0.72rem;
}

/* ==========================================================================
   Host Admission Control & Doorbell Intercom (Sec-6)
   ========================================================================== */

.btn-approvals-compact {
  font-weight: 700;
  border-radius: 4px;
  transition: all 0.15s ease;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
  padding: 2px 6px;
  font-size: 0.70rem;
  height: 28px;
  cursor: pointer;
}

.btn-approvals-compact .approvals-wrap {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  position: relative;
}

.btn-approvals-compact.is-needed {
  color: #34d399;
  border: 1px solid rgba(52, 211, 153, 0.45);
  background: rgba(52, 211, 153, 0.12);
}

.btn-approvals-compact.is-needed:hover {
  background: rgba(52, 211, 153, 0.22);
  border-color: #34d399;
}

.btn-approvals-compact.is-unneeded {
  color: #f87171;
  border: 1px solid rgba(239, 68, 68, 0.45);
  background: rgba(239, 68, 68, 0.15);
}

.btn-approvals-compact.is-unneeded:hover {
  background: rgba(239, 68, 68, 0.22);
  border-color: #ef4444;
}

.btn-approvals-compact.is-unneeded .approvals-wrap {
  text-decoration: line-through;
  text-decoration-color: #f87171;
  text-decoration-thickness: 1.5px;
}

.btn-approvals-compact.is-unneeded .approvals-wrap::after {
  content: '';
  position: absolute;
  left: -2px;
  right: -2px;
  top: 50%;
  height: 1.5px;
  background: #f87171;
  pointer-events: none;
}

.side-video-strip .video-card.video-card-pending-admission,
.video-card-pending-admission {
  border: 2px dashed #f59e0b;
  box-shadow: 0 0 12px rgba(245, 158, 11, 0.35);
  animation: pending-admission-glow 2.5s infinite ease-in-out;
}

.seat-badge-pill {
  background: rgba(15, 23, 42, 0.85);
  border: 1px solid rgba(255, 255, 255, 0.2);
  color: #f8fafc;
  font-size: 0.68rem;
  font-weight: 700;
  padding: 2px 7px;
  border-radius: 9999px;
  letter-spacing: 0.3px;
  display: inline-flex;
  align-items: center;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
}

@keyframes pending-admission-glow {
  0%, 100% {
    border-color: #f59e0b;
    box-shadow: 0 0 10px rgba(245, 158, 11, 0.25);
  }
  50% {
    border-color: #fbbf24;
    box-shadow: 0 0 18px rgba(245, 158, 11, 0.55);
  }
}

.badge-pending-admission {
  background: #f59e0b;
  color: #0f172a;
  font-size: 0.68rem;
  font-weight: 800;
  padding: 2px 7px;
  border-radius: 4px;
  letter-spacing: 0.5px;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.35);
}

/* Live Video Overlaid Admission Controls (§HANGOUT_SPEC.md §7.2) */
.pending-admission-overlay {
  position: absolute;
  bottom: 8px;
  left: 8px;
  right: 8px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  z-index: 35;
  pointer-events: auto;
}

.pending-intercom-instruction {
  background: rgba(15, 23, 42, 0.78);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  border: 1px solid rgba(255, 255, 255, 0.16);
  color: #f8fafc;
  font-size: 0.72rem;
  font-weight: 600;
  padding: 3px 12px;
  border-radius: 9999px;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.8);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.45);
  letter-spacing: 0.02em;
  white-space: nowrap;
}

.pending-card-footer {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 4px 8px;
  height: 26px;
  background: #0f172a;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.pending-decision-actions {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 22px;
}

.pending-action-col {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
}

.pending-btn-label {
  font-size: 0.68rem;
  font-weight: 700;
  color: #ffffff;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.95), 0 0 5px rgba(0, 0, 0, 0.8);
  letter-spacing: 0.03em;
  user-select: none;
}

.btn-phone-action {
  width: 38px;
  height: 38px;
  min-width: 38px;
  min-height: 38px;
  border-radius: 50%;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.5);
  border: none;
  cursor: pointer;
  transition: transform 0.15s ease, box-shadow 0.15s ease, background 0.15s ease;
}

.pending-decision-actions .btn-phone-accept,
.btn-admit-peer.btn-phone-action {
  background: linear-gradient(135deg, #f97316, #ea580c);
  color: #ffffff;
  border: 1.5px solid #fdba74;
}

.pending-decision-actions .btn-phone-accept:hover,
.btn-admit-peer.btn-phone-action:hover {
  background: linear-gradient(135deg, #ea580c, #c2410c);
  box-shadow: 0 0 14px rgba(249, 115, 22, 0.8);
  transform: scale(1.08);
}

.btn-phone-accept .phone-handset-icon {
  transform: rotate(-30deg);
}

.pending-decision-actions .btn-phone-reject,
.btn-deny-peer.btn-phone-action {
  background: linear-gradient(135deg, #ef4444, #dc2626);
  color: #ffffff;
  border: 1.5px solid #fca5a5;
}

.pending-decision-actions .btn-phone-reject:hover,
.btn-deny-peer.btn-phone-action:hover {
  background: linear-gradient(135deg, #dc2626, #b91c1c);
  box-shadow: 0 0 14px rgba(239, 68, 68, 0.8);
  transform: scale(1.08);
}

.btn-phone-action .phone-handset-icon {
  width: 18px;
  height: 18px;
  display: block;
}

.btn-phone-reject .phone-handset-icon {
  transform: rotate(135deg);
}

.btn-admit-peer {
  background: #10b981;
  color: #ffffff;
  border-color: #059669;
}

.btn-admit-peer:hover {
  background: #059669;
  box-shadow: 0 0 8px rgba(16, 185, 129, 0.4);
  transform: translateY(-1px);
}

.btn-deny-peer {
  background: transparent;
  color: #f87171;
  border-color: rgba(239, 68, 68, 0.45);
}

.btn-deny-peer:hover {
  background: rgba(239, 68, 68, 0.15);
  border-color: #ef4444;
  color: #fca5a5;
  transform: translateY(-1px);
}

.guest-waiting-admission-banner {
  background: linear-gradient(135deg, rgba(245, 158, 11, 0.15), rgba(217, 119, 6, 0.1));
  border: 1px solid rgba(245, 158, 11, 0.35);
  border-radius: 8px;
  padding: 10px 14px;
  margin: 8px 12px;
  display: flex;
  align-items: center;
  gap: 10px;
  animation: waiting-banner-pulse 3s infinite ease-in-out;
}

@keyframes waiting-banner-pulse {
  0%, 100% {
    border-color: rgba(245, 158, 11, 0.35);
  }
  50% {
    border-color: rgba(245, 158, 11, 0.75);
    background: linear-gradient(135deg, rgba(245, 158, 11, 0.22), rgba(217, 119, 6, 0.16));
  }
}

.waiting-knock-icon {
  font-size: 1.4rem;
  flex-shrink: 0;
}

.waiting-knock-text {
  display: flex;
  flex-direction: column;
  gap: 2px;
  font-size: 0.8rem;
  color: #f1f5f9;
}

.waiting-knock-text strong {
  color: #fbbf24;
  font-size: 0.86rem;
}

.waiting-knock-text span {
  color: #94a3b8;
  font-size: 0.75rem;
  line-height: 1.3;
}

/* Guest Pre-Admission Waiting Screen (§HANGOUT_SPEC.md § 7.2) */
#guest-preadmission-grid {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  padding: 24px;
  background: radial-gradient(circle at top, rgba(30, 41, 59, 0.95), rgba(15, 23, 42, 0.98));
  overflow-y: auto;
  box-sizing: border-box;
}

.guest-preadmission-screen {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  max-width: 680px;
}

.preadmission-card {
  width: 100%;
  background: rgba(30, 41, 59, 0.85);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 16px;
  padding: 28px 24px;
  box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.6), 0 8px 10px -6px rgba(0, 0, 0, 0.5);
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  backdrop-filter: blur(8px);
}

.preadmission-bell-pulse {
  font-size: 2.2rem;
  margin-bottom: 8px;
  animation: preadmission-bell-wiggle 2s infinite ease-in-out;
}

@keyframes preadmission-bell-wiggle {
  0%, 100% { transform: rotate(0deg) scale(1); }
  10%, 30% { transform: rotate(-12deg) scale(1.1); }
  20%, 40% { transform: rotate(12deg) scale(1.1); }
  50% { transform: rotate(0deg) scale(1); }
}

.preadmission-title {
  font-size: 1.4rem;
  font-weight: 700;
  color: #f8fafc;
  margin: 0 0 6px 0;
}

.preadmission-subtitle {
  font-size: 0.9rem;
  color: #94a3b8;
  margin: 0 0 20px 0;
}

.preadmission-room-code {
  font-family: monospace;
  font-weight: 700;
  color: #38bdf8;
  letter-spacing: 1px;
}

.preadmission-intercom-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
  width: 100%;
  max-width: 540px;
  margin-bottom: 20px;
}

.preadmission-video-box {
  display: flex;
  flex-direction: column;
  align-items: center;
  background: rgba(15, 23, 42, 0.7);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 12px;
  padding: 10px;
  overflow: hidden;
}

.preadmission-video-frame {
  position: relative;
  width: 100%;
  aspect-ratio: 4 / 3;
  background: #020617;
  border-radius: 8px;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}

.preadmission-video {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.preadmission-fallback {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  height: 100%;
}

.preadmission-avatar {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  background: linear-gradient(135deg, #3b82f6, #1d4ed8);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.6rem;
  font-weight: 700;
  color: #fff;
}

.preadmission-self-box .preadmission-avatar {
  background: linear-gradient(135deg, #10b981, #059669);
}

.preadmission-box-label {
  font-size: 0.75rem;
  color: #94a3b8;
}

.preadmission-box-status {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 8px;
  font-size: 0.78rem;
  color: #e2e8f0;
  font-weight: 600;
}

.preadmission-box-status .status-indicator {
  width: 8px;
  height: 8px;
  border-radius: 50%;
}

.preadmission-box-status .status-indicator.live {
  background: #3b82f6;
  box-shadow: 0 0 6px #3b82f6;
}

.preadmission-box-status .status-indicator.intercom {
  background: #10b981;
  box-shadow: 0 0 6px #10b981;
}

.preadmission-intercom-banner {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  width: 100%;
  max-width: 540px;
  background: rgba(56, 189, 248, 0.12);
  border: 1px solid rgba(56, 189, 248, 0.3);
  border-radius: 10px;
  padding: 12px 16px;
  margin-bottom: 20px;
  text-align: left;
}

.preadmission-intercom-banner .intercom-mic-icon {
  font-size: 1.35rem;
  line-height: 1.2;
  flex-shrink: 0;
  margin-top: 1px;
}

.preadmission-intercom-banner .intercom-banner-text {
  font-size: 0.82rem;
  color: #e0f2fe;
  line-height: 1.45;
}

.preadmission-actions {
  display: flex;
  justify-content: center;
}

.btn-cancel-knock {
  background: rgba(239, 68, 68, 0.15);
  color: #fca5a5;
  border: 1px solid rgba(239, 68, 68, 0.35);
  padding: 8px 18px;
  font-size: 0.88rem;
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.2s ease;
}

.btn-cancel-knock:hover {
  background: rgba(239, 68, 68, 0.25);
  border-color: rgba(239, 68, 68, 0.6);
  color: #fff;
}



/* ========================================================================== */
/* Title Bar Responsive Standard & Actions Row Standard                      */
/* ========================================================================== */

.title-bar-stats {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.title-bar-stats .stat-timer {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  font-family: var(--font-mono, monospace);
  font-size: 0.78rem;
  font-weight: 700;
  color: #f59e0b;
  background: rgba(30, 41, 59, 0.9);
  padding: 2px 6px;
  border-radius: 6px;
  border: 1px solid rgba(245, 158, 11, 0.3);
}

.title-bar-stats .stat-points {
  font-size: 0.74rem;
  font-weight: 700;
  color: #38bdf8;
  background: rgba(30, 41, 59, 0.7);
  padding: 2px 6px;
  border-radius: 6px;
  border: 1px solid rgba(56, 189, 248, 0.25);
}

.title-bar-icon-only {
  display: none;
}

/* Mobile Icon-Only Contract for Title Bar Buttons */
@media (max-width: 768px) {
  .title-bar-icon-only {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
  }
  .title-bar-btn-text {
    display: none !important;
  }
  .title-bar-log-btn,
  .title-bar-chat-btn,
  .title-bar-hangout-btn,
  .title-bar-leave-btn {
    width: 28px !important;
    min-width: 28px !important;
    max-width: 28px !important;
    height: 28px !important;
    overflow: hidden !important;
    white-space: nowrap !important;
    padding: 0 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    text-indent: 0;
  }
  .title-bar-log-btn[style*="display: none"],
  .title-bar-log-btn[style*="display:none"],
  .title-bar-chat-btn[style*="display: none"],
  .title-bar-chat-btn[style*="display:none"],
  .title-bar-hangout-btn[style*="display: none"],
  .title-bar-hangout-btn[style*="display:none"],
  .title-bar-leave-btn[style*="display: none"],
  .title-bar-leave-btn[style*="display:none"] {
    display: none !important;
  }
  .title-bar-log-btn,
  .title-bar-chat-btn,
  .title-bar-leave-btn {
    font-size: 0.95rem !important;
  }
  .title-bar-hangout-btn svg {
    margin: 0 !important;
  }
  .btn-action-text-long {
    display: none !important;
  }
  .btn-action-text-short {
    display: inline !important;
  }
}

@media (min-width: 769px) {
  .btn-action-text-short {
    display: none !important;
  }
  .btn-action-text-long {
    display: inline !important;
  }
}

/* 4-Corner Wildcard Key Styling */
.btn-vk-wildcard,
.vk-key-wildcard {
  position: relative;
  background: rgba(245, 158, 11, 0.12) !important;
  border: 1.5px solid rgba(245, 158, 11, 0.45) !important;
  color: #ffffff !important;
  box-shadow: 0 1px 4px rgba(245, 158, 11, 0.15);
}

.btn-vk-wildcard:hover:not(.vk-disabled),
.vk-key-wildcard:hover:not(.vk-disabled) {
  background: rgba(245, 158, 11, 0.22) !important;
  border-color: #f59e0b !important;
  color: #ffffff !important;
}

.vk-key-wildcard .vk-char,
.btn-vk-wildcard .vk-char {
  color: var(--text-primary) !important;
  font-weight: 800 !important;
}

.vk-hotkey-clue {
  position: absolute;
  top: 1.5px;
  left: 2.5px;
  font-size: 0.62rem;
  font-weight: 800;
  color: #cbd5e1;
  line-height: 1;
  pointer-events: none;
}

.vk-currency-clue {
  position: absolute;
  top: 1.5px;
  right: 2.5px;
  font-size: 0.58rem;
  font-weight: 800;
  color: #fbbf24;
  line-height: 1;
  pointer-events: none;
}

.vk-currency-clue .fc-coin {
  color: #fbbf24;
}

.vk-pts-penalty,
.vk-pts-value {
  position: absolute;
  bottom: 1.5px;
  right: 2.5px;
  font-size: 0.58rem;
  font-weight: 800;
  color: #fbbf24 !important;
  line-height: 1;
  pointer-events: none;
}

.is-red-shading {
  border-color: rgba(239, 68, 68, 0.65) !important;
  background: rgba(239, 68, 68, 0.14) !important;
  color: #fca5a5 !important;
  box-shadow: 0 1px 4px rgba(239, 68, 68, 0.2);
}

.is-red-shading .vk-hotkey-clue,
.is-red-shading .vk-currency-clue {
  color: #fca5a5 !important;
}

.is-red-shading .vk-pts-penalty {
  color: #ef4444 !important;
}

/* Actions Row (Crossword 5-Button Suite) */
.actions-row,
.xword-actions-row {
  display: flex;
  gap: 4px;
  width: 100%;
  margin-top: 3px;
  align-items: center;
  justify-content: space-between;
  box-sizing: border-box;
}

.btn-options,
.vk-btn-options {
  background: #1e293b;
  border: 1px solid #334155;
  color: #f8fafc;
  border-radius: var(--radius-action, 8px);
  padding: 0;
  font-size: 0.95rem;
  font-weight: 700;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: all 0.12s ease;
  width: var(--btn-action-height, 36px);
  min-width: var(--btn-action-height, 36px);
  height: var(--btn-action-height, 36px);
  min-height: var(--btn-action-height, 36px);
}

.btn-options:hover,
.vk-btn-options:hover {
  background: #334155;
  border-color: #f59e0b;
}

.btn-action-hint {
  position: relative;
  flex: 1;
  height: var(--btn-action-height, 36px);
  min-height: var(--btn-action-height, 36px);
  background: #1e293b !important;
  border: 1.5px solid rgba(245, 158, 11, 0.45) !important;
  color: #ffffff !important;
  border-radius: var(--radius-action, 8px);
  font-size: 0.74rem;
  font-weight: 800;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 12px 0 6px;
  transition: all 0.12s ease;
  box-shadow: 0 1.5px 3px rgba(0, 0, 0, 0.25), 0 0 6px rgba(245, 158, 11, 0.15);
  white-space: nowrap;
}

.btn-action-hint:hover:not(:disabled) {
  background: rgba(245, 158, 11, 0.2) !important;
  border-color: #f59e0b !important;
  color: #ffffff !important;
  box-shadow: 0 0 10px rgba(245, 158, 11, 0.35);
  transform: translateY(-1px);
}

.btn-action-hint:active:not(:disabled) {
  transform: translateY(1px);
}

.btn-action-hint:disabled,
.btn-purchase-vowel:disabled,
.btn-purchase-word:disabled {
  opacity: 0.45 !important;
  cursor: not-allowed !important;
  pointer-events: none !important;
  filter: grayscale(0.6);
}

.btn-action-corner-dollar {
  position: absolute;
  top: 2px;
  right: 4px;
  font-size: 0.60rem;
  font-weight: 800;
  line-height: 1;
  color: #fbbf24;
  opacity: 0.95;
  pointer-events: none;
}

.btn-action-corner-dollar .fc-coin {
  color: #fbbf24;
}

.btn-action-corner-points,
.btn-action-corner-penalty {
  position: absolute;
  bottom: 2px;
  right: 4px;
  font-size: 0.62rem;
  font-weight: 800;
  line-height: 1;
  color: #fbbf24 !important;
  pointer-events: none;
}

.btn-action-corner-dollar-left {
  position: absolute;
  top: 1.5px;
  left: 3px;
  font-size: 0.65rem;
  font-weight: 900;
  line-height: 1;
  color: #fbbf24;
  pointer-events: none;
  font-family: var(--font-sans, system-ui);
  text-shadow: 0 0 3px rgba(245, 158, 11, 0.4);
}

.vk-key.vk-key-linguistic-highlight,
.xword-vk-key.vk-key-linguistic-highlight {
  border-color: rgba(245, 158, 11, 0.85) !important;
  box-shadow: 0 0 7px rgba(245, 158, 11, 0.5) !important;
  color: #fef08a !important;
}

.btn-action-giveup .btn-giveup-icon {
  font-size: 1.12rem;
  line-height: 1;
}

@media (max-width: 480px) {
  .btn-action-giveup {
    flex: 0.65;
    min-width: 34px;
    padding: 0 !important;
  }
  .btn-action-giveup .btn-giveup-text {
    display: none !important;
  }
  .btn-action-giveup .btn-giveup-icon {
    font-size: 1.25rem;
  }
}

.btn-clue-action {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  padding: 3px 8px;
  height: 24px;
  font-size: 0.72rem;
  font-weight: 700;
  border-radius: 5px;
  cursor: pointer;
  border: 1px solid rgba(255, 255, 255, 0.15);
  transition: all 0.15s ease;
}
.btn-clue-action:hover:not(:disabled) {
  background: rgba(255, 255, 255, 0.14);
  transform: translateY(-1px);
}
.btn-clue-action:active:not(:disabled) {
  transform: translateY(1px);
}
.btn-clue-vowel {
  background: rgba(245, 158, 11, 0.12);
  border-color: rgba(245, 158, 11, 0.4);
  color: #fbbf24;
}
.btn-clue-vowel.is-disabled,
.btn-clue-vowel:disabled {
  background: rgba(148, 163, 184, 0.08);
  border-color: rgba(148, 163, 184, 0.2);
  color: #64748b;
  cursor: not-allowed;
  opacity: 0.6;
}
.btn-clue-word {
  background: rgba(239, 68, 68, 0.15);
  border-color: rgba(239, 68, 68, 0.4);
  color: #fca5a5;
}
.btn-clue-word:hover:not(:disabled) {
  background: rgba(239, 68, 68, 0.22);
  border-color: #ef4444;
}

.btn-action-giveup {
  flex: 1;
  height: var(--btn-action-height, 36px);
  min-height: var(--btn-action-height, 36px);
  background: #1e293b;
  border: 1px solid #334155;
  color: #cbd5e1;
  border-radius: var(--radius-action, 8px);
  font-size: 0.74rem;
  font-weight: 700;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 4px;
  transition: all 0.12s ease;
  white-space: nowrap;
}

.btn-action-giveup:hover {
  background: #283548;
  border-color: #475569;
  color: #ffffff;
}

.btn-action-enter {
  flex: 1.15;
  height: var(--btn-action-height, 36px);
  min-height: var(--btn-action-height, 36px);
  background: linear-gradient(135deg, #f59e0b, #d97706);
  border: 1px solid #f59e0b;
  color: #ffffff;
  border-radius: var(--radius-action, 8px);
  font-size: 0.76rem;
  font-weight: 800;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 6px;
  transition: all 0.12s ease;
  box-shadow: 0 2px 8px rgba(245, 158, 11, 0.35);
  white-space: nowrap;
}

.btn-action-enter:hover:not(:disabled) {
  background: linear-gradient(135deg, #fbbf24, #f59e0b);
  border-color: #fbbf24;
  box-shadow: 0 0 10px rgba(245, 158, 11, 0.5);
}

/* -------------------------------------------------------------------------- */
/* Crossword Clue Cards & Century Club Leaderboard Parity                     */
/* -------------------------------------------------------------------------- */
.clue-group-title {
  grid-column: 1 / -1;
  align-self: start;
  font-size: 0.74rem;
  font-weight: 800;
  color: var(--accent-gold, #f59e0b);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  padding: 6px 8px 4px 8px;
  background: rgba(0, 0, 0, 0.2);
  border-radius: 4px;
  margin-top: 6px;
  margin-bottom: 4px;
}

.clue-group-title.clue-group-selected {
  grid-column: 1 / -1;
  background: linear-gradient(90deg, rgba(245, 158, 11, 0.25) 0%, rgba(56, 189, 248, 0.15) 100%);
  color: #fbbf24;
  border-left: 3px solid #fbbf24;
  display: flex;
  align-items: center;
  gap: 6px;
}

.clue-group-title.clue-group-solved {
  grid-column: 1 / -1;
  background: linear-gradient(90deg, rgba(16, 185, 129, 0.2) 0%, rgba(52, 211, 153, 0.08) 100%);
  color: #34d399;
  border-left: 3px solid #10b981;
  display: flex;
  align-items: center;
  gap: 6px;
}

.selected-clues-container {
  grid-column: 1 / -1;
  margin-bottom: 8px;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 8px;
  align-items: start;
}

.clue-card.selected-spotlight-card {
  border-color: rgba(245, 158, 11, 0.45);
  background: rgba(245, 158, 11, 0.07);
}

.clues-progress-count {
  font-size: 0.74rem;
  font-weight: 700;
  color: #94a3b8;
  padding: 2px 8px;
  background: rgba(255, 255, 255, 0.06);
  border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  letter-spacing: 0.02em;
}

.clue-card-num-col {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  min-width: 24px;
  flex-shrink: 0;
}

.clue-card-num {
  font-size: 0.78rem;
  font-weight: 800;
  color: var(--accent-gold, #f59e0b);
  min-width: 24px;
  text-align: center;
  flex-shrink: 0;
}

.clue-arrow-icon {
  display: inline-block;
  vertical-align: -1.5px;
  margin-left: 2px;
  flex-shrink: 0;
}

.clue-player-avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  min-width: 18px;
  border-radius: 50%;
  font-size: 0.62rem;
  font-weight: 800;
  line-height: 1;
  color: #ffffff;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.6);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.35);
  border: 1px solid rgba(255, 255, 255, 0.45);
  user-select: none;
  vertical-align: middle;
  letter-spacing: -0.5px;
  box-sizing: border-box;
}

.clue-player-avatar.clue-placer-avatar {
  margin-top: 1px;
}

.clue-player-avatar.clue-solver-avatar {
  margin-left: 4px;
}

.clue-placeholders {
  display: flex;
  gap: 4px;
  align-items: center;
  margin-top: 4px;
  flex-wrap: wrap;
}

.clue-placeholder {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 20px;
  font-family: var(--font-mono, monospace);
  font-size: 0.75rem;
  font-weight: 700;
  border-radius: 3px;
  line-height: 1;
  text-transform: uppercase;
}

.clue-placeholder.is-filled {
  background: #1e293b;
  border: 1px solid #475569;
  color: #f8fafc;
  font-weight: 800;
}

.clue-placeholder.is-empty {
  background: rgba(15, 23, 42, 0.6);
  border: 1px dashed #475569;
  color: #64748b;
}

.clue-placeholder.is-solved {
  background: rgba(16, 185, 129, 0.16);
  border: 1px solid rgba(16, 185, 129, 0.4);
  color: #34d399;
}

.clue-placeholder.is-draft {
  background: rgba(37, 99, 235, 0.18);
  border: 1px solid rgba(59, 130, 246, 0.5);
  color: #60a5fa;
  font-style: italic;
}

.clue-placeholder.is-confirmed {
  background: rgba(245, 158, 11, 0.18);
  border: 1px solid rgba(245, 158, 11, 0.6);
  color: #fbbf24;
  font-weight: 800;
}

.clue-placeholder.is-surrendered {
  background: rgba(245, 158, 11, 0.12);
  border: 1px dashed rgba(245, 158, 11, 0.7);
  color: #fbbf24;
  font-style: italic;
  font-weight: 700;
}


.community-summary-card {
  padding: 8px 10px;
  background: linear-gradient(135deg, rgba(245, 158, 11, 0.12), rgba(56, 189, 248, 0.08));
  border: 1px solid rgba(245, 158, 11, 0.25);
  border-radius: 8px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 0.78rem;
  margin-bottom: 8px;
}

.community-stat {
  font-weight: 700;
  color: #fef08a;
  background: rgba(245, 158, 11, 0.15);
  border: 1px solid rgba(245, 158, 11, 0.35);
  border-radius: 9999px;
  padding: 3px 8px;
}

/* Rest Break Rule Banner (Anti-Bot & Anti-Camping Advisory) */
.standings-rest-break-note {
  background: rgba(30, 41, 59, 0.7);
  border: 1px solid rgba(56, 189, 248, 0.25);
  border-left: 3px solid var(--accent-blue, #38bdf8);
  border-radius: 6px;
  padding: 6px 10px;
  margin-bottom: 6px;
  font-size: 0.72rem;
  line-height: 1.35;
}
.rest-break-note-title {
  font-weight: 700;
  color: var(--accent-blue, #38bdf8);
  display: flex;
  align-items: center;
  gap: 4px;
  margin-bottom: 2px;
}
.rest-break-note-text {
  color: #cbd5e1;
  font-size: 0.70rem;
}

/* Standings 4-Column Tabular Grid Header (Matching Leaderboard) */
.standings-table-header {
  display: grid;
  grid-template-columns: 38px 1fr 68px 52px;
  gap: 6px;
  align-items: center;
  padding: 4px 8px;
  font-size: 0.68rem;
  font-weight: 700;
  color: #94a3b8;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  margin-bottom: 4px;
}
.standings-table-header .col-points,
.standings-table-header .col-score,
.standings-table-header .col-time {
  text-align: right;
}

/* 4-Column Leaderboard Row Layout (Matching Leaderboard) */
.leaderboard-row {
  display: grid;
  grid-template-columns: 38px 1fr 68px 52px;
  align-items: center;
  gap: 6px;
  padding: 6px 8px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 6px;
  font-size: 0.78rem;
  margin-bottom: 4px;
}

.leaderboard-row.is-user-row {
  background: rgba(245, 158, 11, 0.12) !important;
  border-color: rgba(245, 158, 11, 0.35) !important;
}

.leaderboard-rank {
  font-weight: 800;
  color: var(--accent-gold, #f59e0b);
  min-width: 0;
  white-space: nowrap;
}

.leaderboard-name {
  font-weight: 600;
  color: #f8fafc;
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  display: flex;
  align-items: center;
}

.leaderboard-points,
.leaderboard-score {
  font-weight: 800;
  color: #fbbf24;
  text-align: right;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.leaderboard-fc {
  display: none;
}

.leaderboard-time {
  font-family: var(--font-mono, monospace);
  font-weight: 700;
  color: var(--accent-blue, #38bdf8);
  text-align: right;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.tier-dot {
  display: none;
}

.lb-tag-surrendered {
  font-size: 0.72rem;
  color: #fbbf24;
  background: rgba(245, 158, 11, 0.15);
  border: 1px solid rgba(245, 158, 11, 0.4);
  border-radius: 3px;
  padding: 1px 4px;
  margin-left: 4px;
  display: inline-flex;
  align-items: center;
  gap: 3px;
  white-space: nowrap;
  vertical-align: middle;
}

@media (max-width: 640px) {
  .lb-tag-surrendered {
    background: none;
    border: none;
    padding: 0;
    margin-left: 3px;
    font-size: 0.85rem;
  }
  .lb-tag-surrendered .lb-surrender-text {
    display: none;
  }
}

@media (max-width: 480px) {
  .standings-table-header,
  .leaderboard-row {
    grid-template-columns: 34px 1fr 60px 48px;
    gap: 4px;
    padding: 5px 6px;
    font-size: 0.74rem;
  }
  .standings-table-header {
    font-size: 0.63rem;
  }
}

.btn-action-enter:disabled {
  opacity: 0.55;
  cursor: not-allowed;
  box-shadow: none;
}

.leaderboard-row.is-disqualified-row {
  background: rgba(239, 68, 68, 0.08) !important;
  border-left: 3px solid #ef4444 !important;
  border-color: rgba(239, 68, 68, 0.3) !important;
}

.leaderboard-row.is-disqualified-row .leaderboard-rank {
  color: #f87171 !important;
  font-size: 0.72rem;
  font-weight: 700;
}

.leaderboard-row .dq-badge {
  display: inline-block;
  margin-left: 5px;
  padding: 1px 5px;
  background: rgba(239, 68, 68, 0.18);
  border: 1px solid rgba(239, 68, 68, 0.45);
  color: #fca5a5;
  border-radius: 4px;
  font-size: 0.62rem;
  font-weight: 700;
  vertical-align: middle;
}

/* XWord Yesterday tab styles relocated to js/games/xword/xword.css */

/* ==========================================================================
   Stats Tab Streak Telemetry & Standings (CROSS_GAME_SPEC § 2.7)
   ========================================================================== */
.stats-streak-card {
  padding: 10px 12px;
  background: linear-gradient(135deg, rgba(245, 158, 11, 0.14), rgba(15, 23, 42, 0.8));
  border: 1px solid rgba(245, 158, 11, 0.32);
  border-radius: 8px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 8px;
}
.stats-streak-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 0.80rem;
  gap: 6px;
}
.stats-streak-title {
  font-weight: 800;
  color: #fef08a;
  display: flex;
  align-items: center;
  gap: 5px;
  white-space: nowrap;
}
.stats-streak-accolade-center {
  font-size: 0.72rem;
  font-weight: 700;
  color: #38bdf8;
  background: rgba(56, 189, 248, 0.12);
  border: 1px solid rgba(56, 189, 248, 0.3);
  border-radius: 12px;
  padding: 1px 8px;
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
  max-width: 140px;
}
.stats-streak-best {
  font-size: 0.70rem;
  color: #94a3b8;
  font-family: var(--font-mono, monospace);
  white-space: nowrap;
}
.stats-dual-metrics-grid {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.stats-metric-category {
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.stats-category-label {
  font-size: 0.65rem;
  font-weight: 700;
  color: #94a3b8;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  padding-left: 2px;
}
.stats-metrics-row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 6px;
  background: rgba(0, 0, 0, 0.28);
  padding: 6px 8px;
  border-radius: 6px;
  border: 1px solid rgba(255, 255, 255, 0.06);
}
.stats-metric-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}
.stats-metric-lbl {
  font-size: 0.65rem;
  color: #94a3b8;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.stats-metric-val {
  font-size: 0.84rem;
  font-weight: 800;
  font-family: var(--font-mono, monospace);
  color: #38bdf8;
}
.stats-metric-val.is-min {
  color: #34d399;
}
.stats-metric-val.is-max {
  color: #fb923c;
}
.btn-toggle-streak-details {
  align-self: stretch;
  padding: 5px 10px;
  margin-top: 4px;
  background: rgba(30, 41, 59, 0.75);
  border: 1px solid rgba(148, 163, 184, 0.28);
  border-radius: 6px;
  font-size: 0.72rem;
  color: #cbd5e1;
  cursor: pointer;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  transition: all 0.15s ease;
}
.btn-toggle-streak-details:hover {
  background: rgba(51, 65, 85, 0.9);
  color: #f8fafc;
  border-color: rgba(245, 158, 11, 0.4);
}
.streak-ledger-container {
  display: none;
  flex-direction: column;
  gap: 4px;
  margin-top: 6px;
  padding-top: 6px;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  max-height: 240px;
  overflow-y: auto;
}
.streak-ledger-container.is-open {
  display: flex;
}
.streak-ledger-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.72rem;
}
.streak-ledger-table th {
  text-align: left;
  font-size: 0.65rem;
  font-weight: 700;
  color: #94a3b8;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  padding: 4px 6px;
  border-bottom: 1px solid rgba(148, 163, 184, 0.2);
}
.streak-ledger-table td {
  padding: 4px 6px;
  border-bottom: 1px solid rgba(148, 163, 184, 0.08);
  color: #e2e8f0;
  font-family: var(--font-mono, monospace);
  font-size: 0.70rem;
}
.streak-ledger-table th.col-day, .streak-ledger-table td.col-day {
  width: 15%;
  color: #fbbf24;
  font-weight: 700;
}
.streak-ledger-table th.col-date, .streak-ledger-table td.col-date {
  width: 22%;
  color: #cbd5e1;
}
.streak-ledger-table th.col-score, .streak-ledger-table td.col-score {
  width: 18%;
  text-align: right;
  color: #f8fafc;
  font-weight: 700;
}
.streak-ledger-table th.col-time, .streak-ledger-table td.col-time {
  width: 20%;
  text-align: right;
  color: #38bdf8;
  font-weight: 700;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
.streak-ledger-table th.col-accolade, .streak-ledger-table td.col-accolade,
.streak-ledger-table th.col-rating, .streak-ledger-table td.col-rating {
  width: 25%;
  text-align: right;
  color: #34d399;
  font-weight: 600;
  white-space: nowrap;
}
.ledger-accolade-chip,
.ledger-rating-chip {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  font-size: 0.66rem;
  padding: 1px 6px;
  background: rgba(16, 185, 129, 0.12);
  border: 1px solid rgba(16, 185, 129, 0.25);
  border-radius: 10px;
  color: #6ee7b7;
}
.streak-ledger-row.is-fastest-row {
  background: rgba(245, 158, 11, 0.12);
}
.badge-fastest {
  color: #fbbf24;
  font-size: 0.75rem;
  vertical-align: middle;
}
.streak-reset-banner {
  background: rgba(239, 68, 68, 0.14);
  border: 1px solid rgba(239, 68, 68, 0.3);
  border-radius: 6px;
  padding: 8px 10px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-size: 0.73rem;
  color: #fca5a5;
}
.btn-toggle-prev-streak {
  align-self: flex-start;
  padding: 3px 8px;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 4px;
  font-size: 0.68rem;
  color: #f8fafc;
  cursor: pointer;
  font-weight: 600;
  transition: background 0.15s ease;
}
.btn-toggle-prev-streak:hover {
  background: rgba(255, 255, 255, 0.15);
}
.prev-streak-drawer {
  display: none;
  flex-direction: column;
  gap: 6px;
  padding: 6px 8px;
  background: rgba(0, 0, 0, 0.32);
  border-radius: 6px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  margin-top: 4px;
  max-height: 240px;
  overflow-y: auto;
}
.prev-streak-drawer.is-open {
  display: flex;
}
.stats-standings-card {
  background: rgba(15, 23, 42, 0.65);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 8px;
  padding: 8px 10px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.stats-standings-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-bottom: 4px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
  font-size: 0.76rem;
  cursor: pointer;
  user-select: none;
  transition: all 0.15s ease;
  border-radius: 4px;
}
.stats-standings-header:hover .stats-standings-title {
  color: #fbbf24;
}
.stats-standings-title {
  font-weight: 800;
  color: #f8fafc;
  display: flex;
  align-items: center;
  gap: 4px;
}
.stats-standings-subtitle {
  font-size: 0.68rem;
  color: #94a3b8;
}
.btn-open-full-leaderboard {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  padding: 3px 8px;
  font-size: 0.68rem;
  font-weight: 700;
  color: #fbbf24;
  background: rgba(245, 158, 11, 0.15);
  border: 1px solid rgba(245, 158, 11, 0.35);
  border-radius: 12px;
  cursor: pointer;
  transition: all 0.12s ease;
}
.btn-open-full-leaderboard:hover {
  background: rgba(245, 158, 11, 0.28);
  color: #fef08a;
  transform: translateY(-1px);
}
.prior-daily-solve-card {
  padding: 6px 8px;
  background: rgba(16, 185, 129, 0.12);
  border: 1px solid rgba(16, 185, 129, 0.35);
  border-radius: 6px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 0.72rem;
  color: #6ee7b7;
}
.casual-mode-notice-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 6px 10px;
  background: rgba(59, 130, 246, 0.12);
  border: 1px solid rgba(59, 130, 246, 0.3);
  border-radius: 6px;
  font-size: 0.74rem;
  color: #93c5fd;
}
.btn-play-daily-action {
  padding: 4px 8px;
  font-size: 0.70rem;
  font-weight: 700;
  background: linear-gradient(135deg, #f59e0b, #d97706);
  color: #fff;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  white-space: nowrap;
}

/* Avalanche hub & compare styles relocated to js/games/avalanche/avalanche.css */

/* ==========================================================================
   CANONICAL WORKSPACE: QUICK ARRANGE, LOUNGE PLAY AREA & VIDEO FOOTER CLUSTER
   ========================================================================== */

/* Quick Arrange Toolbar in Tab Panel Drag Header (Global Layout Icons Standard) */
.quick-arrange-group {
  display: inline-flex;
  align-items: center;
  background: rgba(0, 0, 0, 0.35);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 6px;
  padding: 2px;
  gap: 2px;
  margin-left: auto;
}
.btn-quick-arrange,
.btn-quick-arrange.title-bar-flip-btn {
  background: transparent;
  border: 1px solid transparent;
  color: var(--text-secondary, #94a3b8);
  width: auto;
  min-height: 24px;
  padding: 2px 7px;
  font-size: 0.72rem;
  font-weight: 700;
  border-radius: 4px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 3px;
  white-space: nowrap;
  line-height: 1;
  box-sizing: border-box;
  transition: all 0.15s ease;
}
.btn-quick-arrange span {
  display: inline-flex;
  align-items: center;
}
.btn-quick-arrange:hover,
.btn-quick-arrange.title-bar-flip-btn:hover {
  color: #ffffff;
  background: rgba(255, 255, 255, 0.1);
  border-color: transparent;
  transform: none;
}
.btn-quick-arrange.active,
.btn-quick-arrange.title-bar-flip-btn.active {
  color: #ffffff !important;
  background: rgba(255, 255, 255, 0.12) !important;
  border: 1.5px solid #ffffff !important;
  box-shadow: 0 0 6px rgba(255, 255, 255, 0.35) !important;
}

/* Lounge Play Area (Workspace replacement for Hangout Lounge mode) */
.lounge-play-area {
  display: none;
  flex: 1 1 auto;
  min-width: 0;
  height: 100%;
  flex-direction: column;
  background: var(--bg-surface, #0b0f17);
  border: 1px solid var(--border-color, #1e293b);
  border-radius: 8px;
  overflow: hidden;
}
.lounge-play-area.is-active {
  display: flex !important;
}
.lounge-drag-header {
  height: 38px;
  min-height: 38px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 10px;
  background: rgba(10, 14, 26, 0.98);
  border-bottom: 1px solid var(--border-color, #1e293b);
}
.btn-jump-back {
  background: linear-gradient(135deg, #10b981, #059669);
  border: 1px solid #10b981;
  color: #fff;
  padding: 3px 10px;
  border-radius: 4px;
  font-size: 0.72rem;
  font-weight: 700;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  transition: all 0.15s ease;
}
.btn-jump-back:hover {
  filter: brightness(1.1);
}

/* Reopen Hangout Chat Bubble Button in Board / Lounge Header */
.top-bar-btn.btn-header-chat-bubble {
  background: rgba(139, 92, 246, 0.2);
  border: 1px solid rgba(139, 92, 246, 0.4);
  color: #c4b5fd;
  padding: 3px 8px;
  border-radius: 4px;
  font-size: 0.72rem;
  font-weight: 700;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  transition: all 0.15s ease;
}
.top-bar-btn.btn-header-chat-bubble:hover {
  background: rgba(139, 92, 246, 0.35);
  border-color: rgba(139, 92, 246, 0.6);
  color: #fff;
}

/* Sub-Video Name & Telemetry Bar with Integrated Receiver Controls */
.video-tile-footer,
.video-card-footer.video-tile-footer {
  height: 28px;
  min-height: 28px;
  background: #0f172a;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 0 0 8px 8px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 6px;
  font-size: 0.72rem;
  font-weight: 700;
  color: #cbd5e1;
  position: relative;
  overflow: visible;
  z-index: 35;
}
.footer-peer-identity {
  display: flex;
  align-items: center;
  gap: 4px;
  min-width: 0;
  flex: 1 1 auto;
  overflow: hidden;
}
.footer-peer-identity .peer-name,
.video-tile-footer .video-player-name {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  font-size: 0.72rem;
  transform: none !important;
  background: transparent !important;
  box-shadow: none !important;
  height: auto !important;
  line-height: normal !important;
  padding: 0 !important;
}
.footer-action-cluster,
.video-card-local-control-zone,
.footer-action-cluster.video-card-local-control-zone {
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  gap: 3px !important;
  flex-shrink: 0 !important;
  margin: 0 4px !important;
}
.footer-action-btn {
  width: 22px;
  height: 22px;
  border-radius: 4px;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.16);
  color: #e2e8f0;
  font-size: 0.72rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  padding: 0;
  transition: all 0.12s ease;
}
.footer-action-btn:hover {
  background: rgba(255, 255, 255, 0.2);
  border-color: rgba(255, 255, 255, 0.35);
  color: #fff;
}
.footer-action-btn.is-muted {
  background: rgba(239, 68, 68, 0.35);
  border-color: #ef4444;
  color: #fca5a5;
}
.footer-action-btn.is-cam-off {
  background: rgba(245, 158, 11, 0.3);
  border-color: #f59e0b;
  color: #fcd34d;
}
.footer-action-btn.is-whispering {
  background: rgba(168, 85, 247, 0.4);
  border-color: #a855f7;
  color: #e9d5ff;
}
.footer-vol-wrapper {
  position: relative;
}
.footer-volume-popup {
  position: absolute;
  bottom: calc(100% + 5px);
  left: 50%;
  transform: translateX(-50%);
  background: rgba(15, 23, 42, 0.96);
  backdrop-filter: blur(12px);
  border: 1px solid rgba(255, 255, 255, 0.22);
  border-radius: 8px;
  padding: 6px 8px;
  display: none;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  z-index: 80;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.7);
  min-width: 58px;
}
.footer-vol-wrapper.popup-open .footer-volume-popup {
  display: flex;
}
.vol-popup-percent {
  font-size: 0.68rem;
  font-weight: 800;
  color: #38bdf8;
  font-family: var(--font-mono, monospace);
  white-space: nowrap;
}
.vertical-volume-range {
  writing-mode: vertical-lr;
  direction: rtl;
  width: 18px;
  height: 75px;
  cursor: pointer;
  accent-color: #38bdf8;
  touch-action: none;
  margin: 2px 0;
}
.vol-popup-mute-label {
  font-size: 0.66rem;
  font-weight: 700;
  color: #cbd5e1;
  display: flex;
  align-items: center;
  gap: 4px;
  cursor: pointer;
  user-select: none;
}
.vol-popup-mute-check {
  cursor: pointer;
  accent-color: #ef4444;
  width: 12px;
  height: 12px;
  margin: 0;
}

/* Real-Time Telemetry Container */
.audio-meter-wrap {
  display: flex;
  align-items: center;
  gap: 5px;
  flex-shrink: 0;
  margin-left: auto;
}
.audio-waveform-bars {
  display: none !important;
}

/* Symmetrical Camera Icons in Action Buttons */
.footer-action-btn .cam-icon {
  display: block;
}
.footer-action-btn.cam-off .cam-icon,
.footer-action-btn.is-cam-off .cam-icon {
  color: #fcd34d;
}

/* =========================================================================
   UNIFIED KEYBOARD & GAME VIEW ARCHITECTURE (keyboard_and_game_view_spec.md)
   ========================================================================= */

/* 1.1 Game Status Messaging Strip (Below Timer/Score, Above Board) */
.game-status-banner {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-height: 26px;
  padding: 3px 12px;
  margin: 0 auto 6px;
  width: var(--board-size, 400px);
  max-width: 100%;
  border-radius: 6px;
  font-size: 0.78rem;
  font-weight: 600;
  background: rgba(30, 41, 59, 0.75);
  border: 1px solid rgba(255, 255, 255, 0.08);
  color: #e2e8f0;
  box-sizing: border-box;
  transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}
.game-status-banner.status-info {
  background: rgba(30, 58, 138, 0.35);
  border-color: rgba(59, 130, 246, 0.45);
  color: #93c5fd;
}
.game-status-banner.status-warning {
  background: rgba(120, 53, 15, 0.4);
  border-color: rgba(245, 158, 11, 0.5);
  color: #fcd34d;
}
.game-status-banner.status-error {
  background: rgba(127, 29, 29, 0.45);
  border-color: rgba(239, 68, 68, 0.55);
  color: #fca5a5;
}
.game-status-banner.status-success {
  background: rgba(6, 78, 59, 0.45);
  border-color: rgba(16, 185, 129, 0.5);
  color: #6ee7b7;
}
.status-banner-icon {
  flex-shrink: 0;
  font-size: 0.85rem;
}
.status-banner-msg {
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  line-height: 1.3;
  max-height: 2.8rem;
  word-break: break-word;
}
.status-banner-audio-btn {
  background: transparent;
  border: none;
  cursor: pointer;
  padding: 2px 4px;
  margin-left: 4px;
  color: #93c5fd;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 4px;
  flex-shrink: 0;
  transition: transform 0.15s ease, color 0.15s ease;
}
.status-banner-audio-btn:hover {
  transform: scale(1.1);
  color: #60a5fa;
}
.status-banner-audio-btn.is-playing {
  animation: pulse-audio 1s infinite alternate;
  color: #fbbf24;
}


/* 3.1 Clue Bar Right-Margin Undo / Redo / Clear Cluster */
.clue-bar-actions {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin-left: auto;
  flex-shrink: 0;
}
.btn-clue-util,
.btn-clue-clear {
  background: rgba(30, 41, 59, 0.85);
  border: 1px solid rgba(255, 255, 255, 0.16);
  color: #e2e8f0;
  border-radius: 5px;
  padding: 2px 7px;
  font-size: 0.72rem;
  font-weight: 700;
  cursor: pointer;
  line-height: 1.25;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  transition: background 0.15s ease, border-color 0.15s ease;
}
.clue-clear-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
  flex-shrink: 0;
}
.clue-clear-svg {
  display: block;
}
.btn-clue-util:hover:not(:disabled),
.btn-clue-clear:hover:not(:disabled) {
  background: rgba(51, 65, 85, 0.95);
  border-color: rgba(255, 255, 255, 0.3);
}
.btn-clue-util:disabled,
.btn-clue-clear:disabled {
  opacity: 0.4;
  cursor: default;
}

@media (max-width: 768px) {
  .clue-bar-actions #btn-clue-undo,
  .clue-bar-actions #btn-clue-redo,
  .clue-bar-actions .btn-clue-util {
    display: none !important;
  }
  .clue-bar-actions .btn-clue-clear .clue-clear-label {
    display: none !important;
  }
  .clue-bar-actions .btn-clue-clear {
    padding: 3px 6px;
    min-width: 26px;
  }
}

/* 3.2 Rack Right-Margin Action Icon (e.g., Shuffle 🔀) */
.rack-action-btn {
  margin-left: auto;
  flex-shrink: 0;
  width: 30px;
  height: 30px;
  border-radius: 6px;
  background: rgba(30, 41, 59, 0.9);
  border: 1px solid rgba(255, 255, 255, 0.18);
  color: #f8fafc;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 0.9rem;
  cursor: pointer;
  transition: background 0.15s ease, transform 0.12s ease;
}
.rack-action-btn:hover:not(:disabled) {
  background: rgba(51, 65, 85, 0.98);
  transform: scale(1.06);
}

/* 4.1 Top-Left Key Glyph Slot (.vk-key-glyph-tl) & Sub-Label (.vk-key-sub) */
.vk-key {
  position: relative;
}
.vk-key-glyph-tl {
  position: absolute;
  top: 2px;
  left: 3px;
  font-size: 0.62rem;
  font-weight: 800;
  line-height: 1;
  color: #fcd34d;
  pointer-events: none;
}
.vk-key-sub {
  font-size: 0.52rem;
  font-weight: 700;
  line-height: 1;
  margin-top: 1px;
  pointer-events: none;
}
.vk-key.is-pulsing {
  animation: vkKeyPulse 1.3s infinite alternate ease-in-out;
}
@keyframes vkKeyPulse {
  from { transform: scale(1); }
  to { transform: scale(1.06); }
}

/* 4.2 Row 3 Directional Toggle (ACRS stacked above → / vertical DWN left of ↓) */
.dir-across-stack {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  line-height: 1;
  gap: 1px;
}
.dir-mini-top {
  font-size: 0.45rem;
  font-weight: 800;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: #f59e0b;
  line-height: 1;
}
.dir-main-arrow {
  font-size: 0.85rem;
  font-weight: 800;
  line-height: 1;
}
.dir-down-row {
  display: inline-flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  gap: 2px;
  line-height: 1;
}
.dir-mini-vert {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  font-size: 0.38rem;
  font-weight: 800;
  line-height: 0.92;
  color: #38bdf8;
  text-transform: uppercase;
}

/* 5.1 DOM-Peer Pull-Up Drawer Minimize / Maximize Toggle & Full Overlay State */
.btn-drawer-toggle-size {
  margin-left: auto;
  background: rgba(30, 41, 59, 0.85);
  border: 1px solid rgba(255, 255, 255, 0.18);
  color: #cbd5e1;
  border-radius: 5px;
  width: 26px;
  height: 24px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 0.78rem;
  font-weight: 800;
  cursor: pointer;
  flex-shrink: 0;
  transition: background 0.15s ease, color 0.15s ease;
}
.btn-drawer-toggle-size:hover {
  background: rgba(51, 65, 85, 0.95);
  color: #ffffff;
}
.game-panel.panel-hud.is-drawer-maximized {
  position: absolute;
  inset: 8px;
  z-index: 120;
  width: calc(100% - 16px);
  height: calc(100% - 16px);
  max-height: calc(100% - 16px);
}

/* 5.2 Semi-Custom Hamburger Menu Overlay ([ ☰ ]) */
.control-card,
.keyboard-tray-section {
  position: relative;
}
.btn-action-menu,
.vk-btn-options {
  min-width: 40px;
  font-size: 1rem;
  font-weight: 800;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.menu-overlay-modal {
  position: absolute;
  background: rgba(10, 13, 20, 0.98);
  backdrop-filter: blur(16px);
  border: 1px solid rgba(245, 158, 11, 0.5);
  border-radius: 6px;
  padding: 6px;
  z-index: 150;
  display: none;
  flex-direction: column;
  gap: 4px;
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.9);
  box-sizing: border-box;
}
.menu-overlay-modal.is-active {
  display: flex;
}
.menu-overlay-header {
  display: none !important;
}
.btn-close-menu {
  display: none !important;
}
.menu-item-list {
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.menu-item-btn {
  background: rgba(24, 32, 47, 0.85);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 5px;
  padding: 6px 10px;
  text-align: left;
  font-size: 0.82rem;
  font-weight: 600;
  color: #f8fafc;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 8px;
  transition: background 0.15s ease, border-color 0.15s ease;
  line-height: 1.2;
}
.menu-item-btn:hover {
  background: rgba(245, 158, 11, 0.2);
  border-color: rgba(245, 158, 11, 0.55);
  color: #ffffff;
}
.menu-item-btn.is-active-view {
  background: rgba(245, 158, 11, 0.25);
  border-color: rgba(245, 158, 11, 0.7);
  color: #fde68a;
  font-weight: 800;
}
.menu-item-hangout {
  background: rgba(139, 92, 246, 0.18);
  border-color: rgba(139, 92, 246, 0.45);
  color: #ddd6fe;
}
.menu-item-keyboard-options {
  margin-top: 3px;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  padding-top: 6px;
  background: rgba(245, 158, 11, 0.16);
  border-color: rgba(245, 158, 11, 0.5);
  color: #fcd34d;
  font-weight: 700;
}