/* Load additional web fonts (used by some themes) */
@import url('https://fonts.googleapis.com/css2?family=Amatic+SC&family=Audiowide&family=Bangers&family=Berkshire+Swash&family=Bungee+Spice&family=Bungee+Tint&family=Butcherman&family=Caveat&family=Chewy&family=Cinzel&family=Comic+Neue&family=Creepster&family=Dancing+Script&family=Danfo&family=Eater&family=Emilys+Candy&family=Foldit&family=Fredoka&family=Great+Vibes&family=Honk&family=Indie+Flower&family=Lato&family=Lobster&family=Lora&family=Lovers+Quarrel&family=Luckiest+Guy&family=Merriweather&family=Montserrat&family=Mountains+of+Christmas&family=Nabla&family=Nosifer&family=Noto+Color+Emoji&family=Open+Sans&family=Orbitron:wght@400;700&family=Oswald&family=Pacifico&family=Parisienne&family=Permanent+Marker&family=Playfair+Display&family=Poppins&family=Press+Start+2P&family=Roboto&family=Roboto+Mono&family=Rocher&family=Rubik+Bubbles&family=Shadows+Into+Light&family=Share+Tech+Mono&family=Silkscreen&family=Sixtyfour&family=Tourney&family=VT323&display=swap');

/* Import themes */
@import url('/css/themes/classic.css');
@import url('/css/themes/dark.css');
@import url('/css/themes/forest.css');
@import url('/css/themes/ocean.css');
@import url('/css/themes/retro.css');
@import url('/css/themes/floral.css');
@import url('/css/themes/eighties.css');
@import url('/css/themes/redyellow.css');
@import url('/css/themes/blueyellow.css');
@import url('/css/themes/myspace.css');
@import url('/css/themes/geocities.css');

/* Base Styles */
* { box-sizing: border-box; }

/* ── Bootstrap Modal: respect active theme ── */
[data-theme] .modal-content {
    /* --- FALLBACKS for older browsers --- */
    --bs-modal-bg: var(--bg-secondary);
    --bs-modal-header-border-color: var(--panel-border);
    --bs-modal-footer-border-color: var(--panel-border);
    --bs-modal-color: var(--text-primary);
    /* --- MODERN ENHANCEMENTS (Safari 16.4+, Chrome 121+, Firefox 128+) --- */
    @supports (color: oklch(from white l c h)) {
        /* Lighter Background: Adding 5% to lightness (0.05) */
        --bs-modal-bg: oklch(from var(--bg-secondary) calc(l + 0.05) c h);
        --bs-table-bg: oklch(from var(--bg-secondary) calc(l + 0.05) c h);
        --bs-table-active-bg: oklch(from var(--bg-secondary) calc(l + 0.1) c h);
        /* Bolder Border: Subtracting 15% from lightness (0.15) */
        --bs-modal-header-border-color: oklch(from var(--panel-border) calc(l - 0.15) c h);
        --bs-modal-footer-border-color: oklch(from var(--panel-border) calc(l - 0.15) c h);
    }

    background-color: var(--bs-modal-bg);
    color: var(--bs-modal-color);
    display: flex;
    flex-direction: column;
    justify-content: flex-start !important; /* Forces content to top */
    min-height: 400px; /* Optional: sets a consistent starting height for mobile */
}

/* Update header and footer to use the newly calculated bolder variables */
[data-theme] .modal-header,
[data-theme] .modal-footer {
    border-color: var(--bs-modal-header-border-color);
}

[data-theme] .modal-content table {
    --bs-table-bg: var(--bg-secondary);
    --bs-table-color: var(--text-primary);
    --bs-table-border-color: var(--panel-border);

    @supports (color: oklch(from white l c h)) {
        --bs-table-bg: oklch(from var(--bg-secondary) calc(l + 0.15) c h);
        --bs-table-border-color: oklch(from var(--panel-border) calc(l - 0.15) c h);
    }

    border: 1px solid var(--bs-table-border-color);
    background-color: var(--bs-table-bg) !important;
    color: var(--bs-table-color);
}

/* Let Bootstrap's text-muted respect theme secondary text color */
[data-theme] .text-muted {
    color: var(--text-secondary) !important;
}

body {
  background-color: var(--bg-primary, #f8f9fa);
  color: var(--text-primary, #212529);
  font-family: var(--font-family, 'Segoe UI', system-ui, sans-serif);
  margin: 0;
  padding: 0;
  transition: background-color 0.3s, color 0.3s;
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--heading-font, 'Segoe UI', system-ui, sans-serif);
}

/* Navbar */
#mainNavbar {
  background-color: var(--navbar-bg, #343a40);
  color: var(--navbar-text, #ffffff);
  padding: 0.4rem 1rem;
  min-height: 52px;
}

#mainNavbar .navbar-brand {
  color: var(--navbar-text, #ffffff);
  font-weight: bold;
  font-size: 1.1rem;
  text-decoration: none;
}

#mainNavbar .navbar-text {
  color: var(--navbar-text, #ffffff);
  opacity: 0.9;
  font-size: 0.9rem;
}

/* Navbar hamburger custom icon */
.navbar-toggler {
  border: 1px solid rgba(255,255,255,0.3);
  padding: 0.3rem 0.6rem;
  border-radius: var(--border-radius, 8px);
}
.navbar-toggler-icon-custom {
  color: var(--navbar-text, #ffffff);
  font-size: 1.25rem;
  line-height: 1;
}

/* Navbar theme select */
.nav-theme-select {
  background-color: rgba(255,255,255,0.12);
  color: var(--navbar-text, #ffffff);
  border-color: rgba(255,255,255,0.25);
  font-size: 0.8rem;
  width: min(360px, 45vw);
  max-width: 100%;
}
.nav-theme-select option,
.nav-theme-select optgroup {
  background-color: var(--bg-secondary, #fff);
  color: var(--text-primary, #212529);
}
.nav-theme-select:focus {
  background-color: rgba(255,255,255,0.18);
  color: var(--navbar-text, #ffffff);
  box-shadow: none;
  border-color: rgba(255,255,255,0.5);
}

/* ======================== LOBBY ======================== */
.lobby-container {
  min-height: calc(100vh - 52px);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1.5rem 1rem;
  background-color: var(--bg-primary);
}

.lobby-card {
  background-color: var(--bg-secondary);
  border-radius: var(--border-radius, 8px);
  box-shadow: var(--shadow, 0 2px 8px rgba(0,0,0,0.1));
  padding: 2rem 2rem 1.75rem;
  width: 100%;
  max-width: 500px;
  border: 1px solid var(--panel-border, #dee2e6);
}

.lobby-header {
  text-align: center;
  margin-bottom: 1.5rem;
}

.lobby-title {
  font-size: 1.9rem;
  font-weight: 700;
  color: var(--accent);
  margin-bottom: 0.25rem;
}

.lobby-subtitle {
  color: var(--text-secondary);
  font-size: 0.9rem;
}

.form-section {
  margin-bottom: 1.25rem;
}

/* Room Tabs */
.room-tabs-section {
  margin-bottom: 0.5rem;
}

.room-nav-tabs {
  border-bottom: 2px solid var(--panel-border, #dee2e6);
  margin-bottom: 0;
}

.room-nav-tabs .nav-link {
  color: var(--text-secondary);
  border: none;
  border-bottom: 2px solid transparent;
  margin-bottom: -2px;
  padding: 0.6rem 1.25rem;
  font-weight: 600;
  font-size: 0.9rem;
  background: none;
  transition: color 0.2s, border-color 0.2s;
}

.room-nav-tabs .nav-link:hover {
  color: var(--accent);
  border-bottom-color: var(--accent);
}

.room-nav-tabs .nav-link.active {
  color: var(--accent);
  border-bottom-color: var(--accent);
  background: none;
}

.room-tab-content {
  background-color: var(--bg-primary);
  border: 1px solid var(--panel-border, #dee2e6);
  border-top: none;
  border-radius: 0 0 var(--border-radius, 8px) var(--border-radius, 8px);
  padding: 1.25rem;
}

.form-label {
  font-weight: 600;
  color: var(--text-primary);
  margin-bottom: 0.5rem;
  display: block;
}

.form-control, .form-select {
  background-color: var(--bg-secondary);
  color: var(--text-primary);
  border-color: var(--panel-border, #dee2e6);
  border-radius: var(--border-radius, 8px);
}

.form-control:focus, .form-select:focus {
  background-color: var(--bg-secondary);
  color: var(--text-primary);
  border-color: var(--accent);
  box-shadow: 0 0 0 0.2rem rgba(var(--accent, 13, 110, 253), 0.15);
}

.room-section {
  background-color: var(--bg-primary);
  border: 1px solid var(--panel-border, #dee2e6);
  border-radius: var(--border-radius, 8px);
  padding: 1.25rem;
  height: 100%;
}

.room-section-title {
  color: var(--accent);
  font-weight: 600;
  margin-bottom: 1rem;
}

/* Theme Switcher */
.theme-switcher {
  display: flex;
  gap: 0.75rem;
  flex-wrap: wrap;
}

.theme-btn {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 3px solid transparent;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  font-weight: 700;
  font-size: 0.85rem;
  transition: transform 0.2s, border-color 0.2s;
}

.theme-btn:hover { transform: scale(1.1); }
.theme-btn.active { border-color: var(--text-primary, #212529); transform: scale(1.1); }

.theme-switcher-sm {
  display: flex;
  gap: 0.5rem;
  flex-wrap: wrap;
}

.theme-btn-sm {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  border: 2px solid transparent;
  cursor: pointer;
  transition: transform 0.2s, border-color 0.2s;
}

.theme-btn-sm:hover { transform: scale(1.15); }
.theme-btn-sm.active { border-color: var(--text-primary, #212529); }

/* Recent Rooms */
.recent-rooms-list {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.recent-room-btn {
  background-color: var(--bg-primary);
  color: var(--text-primary);
  border: 1px solid var(--panel-border);
  border-radius: var(--border-radius);
  padding: 0.4rem 0.85rem;
  cursor: pointer;
  font-size: 0.875rem;
  transition: background-color 0.2s;
}

.recent-room-btn:hover {
  background-color: var(--card-hover);
  border-color: var(--accent);
}

/* ======================== ROOM LAYOUT ======================== */
.room-layout {
  display: grid;
  grid-template-columns: var(--sidebar-width, 260px) 1fr 220px;
  gap: 0;
  height: calc(100vh - 52px - 48px); /* navbar + chat */
  overflow: hidden;
}

/* Stories Panel */
.stories-panel {
  position: relative;
  background-color: var(--panel-bg, #ffffff);
  border-right: 1px solid var(--panel-border);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

/* Fix #10 — sidebar min-width */
.stories-panel { min-width: 80px; }
/* Fix #10 — narrow mode: hide text labels, keep icons */
.stories-panel.narrow .story-title-text { display: none; }
.stories-panel.narrow .btn-label-text { display: none; }
.stories-panel.narrow .story-item-estimate { display: none; }

/* Fix #15 — sidebar drag handle with visual grip */
#sidebar-resize-handle {
  position: absolute; right: 0; top: 0; width: 8px; height: 100%;
  cursor: ew-resize; z-index: 10; background: transparent;
  display: flex; align-items: center; justify-content: center;
}
#sidebar-resize-handle::after {
  content: '⋮';
  font-size: 14px;
  color: var(--panel-border, #dee2e6);
  opacity: 0.4;
  pointer-events: none;
  line-height: 1;
}
#sidebar-resize-handle:hover { background: rgba(91,141,238,0.12); }
#sidebar-resize-handle:hover::after { opacity: 1; color: var(--accent, #5b8dee); }

.panel-header {
  padding: 0.75rem 1rem;
  border-bottom: 1px solid var(--panel-border);
  background-color: var(--bg-primary);
}

.add-story-form {
  padding: 0.75rem;
  border-bottom: 1px solid var(--panel-border);
}

.stories-list {
  flex: 1;
  overflow-y: auto;
  padding: 0.5rem;
}

.story-item {
  background-color: var(--card-bg);
  border: 1px solid var(--panel-border);
  border-radius: var(--border-radius);
  padding: 0.6rem 0.75rem;
  margin-bottom: 0.4rem;
  cursor: pointer;
  transition: background-color 0.2s;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
}

.story-item:hover { background-color: var(--card-hover); }
.story-item.active { background-color: var(--story-active); border-color: var(--accent); }
.story-item.completed { background-color: var(--story-completed); opacity: 0.75; }

.story-text { overflow: hidden; min-width: 0; flex: 1 1 0; }
.story-row-main { overflow: hidden; }
.story-item-title {
  display: block;
  font-size: 0.875rem;
  color: var(--text-primary);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.story-item-estimate {
  font-size: 0.8rem;
  font-weight: 700;
  color: var(--accent);
  flex-shrink: 0;
}

.story-item-actions {
  display: flex;
  gap: 0.25rem;
  flex-shrink: 0;
  margin-left: auto;
  align-self: flex-start;
}

.jira-key-badge {
  display: inline-block;
  font-size: 0.68rem;
  font-weight: 600;
  color: #0052cc;
  background: #deebff;
  border-radius: 3px;
  padding: 1px 5px;
  margin-right: 4px;
  text-decoration: none;
  vertical-align: middle;
  flex-shrink: 0;
  white-space: nowrap;
}
.jira-key-badge:hover { background: #b3d4ff; color: #0052cc; }
[data-theme="dark"] .jira-key-badge,
[data-theme="retro"] .jira-key-badge,
[data-theme="eighties"] .jira-key-badge,
[data-theme="myspace"] .jira-key-badge,
[data-theme="geocities"] .jira-key-badge,
[data-theme="crt"] .jira-key-badge {
  color: #4c9aff;
  background: rgba(76,154,255,0.15);
}

/* ── Slot machine reveal ───────────────────────── */
.slot-cycling {
  display: inline-block;
  animation: slot-spin 0.09s ease-in-out infinite;
}
@keyframes slot-spin {
  0%   { transform: translateY(-35%) scaleY(0.6); opacity: 0.5; }
  50%  { transform: translateY(0)    scaleY(1);   opacity: 1; }
  100% { transform: translateY(35%)  scaleY(0.6); opacity: 0.5; }
}
.slot-landed {
  display: inline-block;
  animation: slot-land 0.18s cubic-bezier(0.34, 1.56, 0.64, 1) both;
}
@keyframes slot-land {
  from { transform: scale(1.5); }
  to   { transform: scale(1); }
}

/* ── Consensus supernova overlay ───────────────── */
#consensusSupernova {
  position: fixed; inset: 0; z-index: 99999;
  display: flex; align-items: center; justify-content: center;
  pointer-events: none;
}
.supernova-text {
  font-size: clamp(2rem, 9vw, 5.5rem);
  font-weight: 900;
  text-align: center;
  white-space: nowrap;
  background: linear-gradient(135deg, #ffd700, #ff6b6b, #00ff88, #00cfff, #a78bfa);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  text-shadow: none;
  filter: drop-shadow(0 0 30px rgba(255,215,0,0.6));
  animation: supernova-pop 0.55s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}
@keyframes supernova-pop {
  0%   { transform: scale(0.1); opacity: 0; }
  60%  { transform: scale(1.08); opacity: 1; }
  100% { transform: scale(1);    opacity: 1; }
}
.supernova-fade-out {
  animation: supernova-fade 0.5s ease-in forwards;
}
@keyframes supernova-fade {
  to { opacity: 0; transform: scale(1.25); }
}

.story-toggle-btn {
  position: fixed;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  z-index: 100;
  background-color: var(--accent);
  color: white;
  border: none;
  padding: 0.5rem 0.35rem;
  border-radius: 0 var(--border-radius) var(--border-radius) 0;
  cursor: pointer;
}

/* Main Content */
.main-content {
  display: flex;
  flex-direction: column;
  overflow-y: auto;
  background-color: var(--bg-primary);
  padding: 0;
}

/* Current Story Bar */
.current-story-bar {
  background-color: var(--bg-secondary);
  border-bottom: 1px solid var(--panel-border);
  padding: 0.75rem 1rem;
  position: sticky;
  top: 0;
  z-index: 10;
}

.story-label {
  font-weight: 600;
  color: var(--text-secondary);
  font-size: 0.875rem;
  white-space: nowrap;
}

.current-story-title {
  font-weight: 600;
  color: var(--text-primary);
}

/* Timer */
.timer-display {
  background-color: var(--timer-color, #dc3545);
  color: white;
  border-radius: var(--border-radius);
  padding: 0.25rem 0.75rem;
  font-weight: 700;
  font-size: 0.9rem;
  animation: pulse 1s infinite;
}

@keyframes pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.75; }
}

/* Stats Bar */
.stats-bar {
  background-color: var(--stats-bg);
  border-bottom: 1px solid var(--panel-border);
  padding: 0.75rem 1rem;
  display: flex;
  gap: 1.5rem;
  align-items: center;
  flex-wrap: wrap;
}

.stat-item {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.stat-label {
  font-size: 0.75rem;
  color: var(--text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.stat-value {
  font-size: 1.4rem;
  font-weight: 700;
  color: var(--accent);
}

.consensus-badge {
  background-color: var(--card-voted);
  color: white;
  border-radius: var(--border-radius);
  padding: 0.3rem 0.75rem;
  font-weight: 700;
  font-size: 0.9rem;
  animation: bounce 0.5s ease;
}

@keyframes bounce {
  0% { transform: scale(0.8); }
  50% { transform: scale(1.1); }
  100% { transform: scale(1); }
}

/* Voting Section */
.voting-section {
  padding: 1rem 1.25rem;
}

.section-label {
  color: var(--text-secondary);
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: 0.75rem;
}

/* Poker Cards */
.card-container {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
  padding-bottom: 0.5rem;
}

.poker-card {
  width: 64px;
  height: 90px;
  background-color: var(--card-bg);
  border: var(--card-border-width, 2px) solid var(--card-border);
  border-radius: var(--border-radius);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--card-font-size, 1.25rem);
  font-weight: 700;
  cursor: pointer;
  transition: transform 0.15s, background-color 0.15s, border-color 0.15s, box-shadow 0.15s;
  color: var(--text-primary);
  user-select: none;
  box-shadow: var(--shadow);
  position: relative;
}

.poker-card::before, .poker-card::after {
  content: attr(data-value);
  position: absolute;
  font-size: 0.55rem;
  font-weight: 700;
  color: var(--text-secondary);
}

.poker-card::before { top: 4px; left: 6px; }
.poker-card::after { bottom: 4px; right: 6px; transform: rotate(180deg); }

.poker-card:hover {
  transform: translateY(-6px);
  background-color: var(--card-hover);
  border-color: var(--accent);
  box-shadow: 0 8px 20px rgba(0,0,0,0.15);
}

.poker-card.selected {
  background-color: var(--card-selected);
  color: var(--card-selected-text);
  border-color: var(--card-selected);
  transform: translateY(-8px);
  box-shadow: 0 10px 24px rgba(0,0,0,0.2);
}

.poker-card.selected::before, .poker-card.selected::after {
  color: var(--card-selected-text);
  opacity: 0.7;
}

.poker-card.disabled {
  opacity: 0.5;
  cursor: not-allowed;
  transform: none !important;
}

/* Participants */
.participants-section {
  padding: 1rem 1.25rem;
  border-top: 1px solid var(--panel-border);
}

.participants-container {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
}

.participant-badge {
  background-color: var(--card-bg);
  border: var(--card-border-width, 1.5px) solid var(--card-border, var(--panel-border));
  border-radius: var(--border-radius);
  padding: 0.6rem 0.9rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.25rem;
  min-width: 80px;
  transition: border-color 0.2s;
}

/* Compact participant mode */
#participantsContainer.compact .participant-badge,
#preview-participants-container.compact .participant-badge {
    min-width: 56px;
    padding: 0.3rem 0.5rem;
}
#participantsContainer.compact .participant-name,
#preview-participants-container.compact .participant-name {
    font-size: 0.7rem;
}
#participantsContainer.compact .avatar-wrapper,
#preview-participants-container.compact .avatar-wrapper {
    --av-size: 22px !important;
}

/* Keep preview badge container at normal-mode height so compact toggle doesn't shift the row */
#preview-participants-container {
    min-width: 196px;   /* 90 + 16 (gap-2) + 90 = two fixed-width columns */
    min-height: 140px;  /* label (~25px) + normal-mode badge (~110px) — always drives the row */
    align-items: flex-start;
}

/* Equalise Participant and Revealed badge heights in the live preview.
   In the room, flex stretch makes all badges the same row height automatically.
   In the preview we use align-items:flex-start, so we pin both badges to the
   taller one (Revealed uses participant-vote at 1.1rem vs vote-waiting at 0.9rem). */
#live-preview-badge,
#live-preview-revealed {
    min-height: 110px;  /* normal: 9.6+32+4+19.2+4+26.4+9.6 ≈ 105px + 5px buffer */
}
#preview-participants-container.compact #live-preview-badge,
#preview-participants-container.compact #live-preview-revealed {
    min-height: 88px;   /* compact: 4.8+22+4+16.8+4+26.4+4.8 ≈ 83px + 5px buffer */
}

.participant-badge.voted { border-color: var(--card-voted); }
.participant-badge.revealed { border-color: var(--card-selected); }
.participant-badge.observer { opacity: 0.65; border-style: dashed; }
.participant-badge.ghost { opacity: 0.55; border-style: dashed; }
.participant-badge.me { border-color: var(--accent); box-shadow: 0 0 0 2px rgba(var(--accent), 0.2); }

@keyframes voice-flash-anim {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.3; }
}
.voice-flash { animation: voice-flash-anim 0.6s ease; }

/* Seasons tab — one row per event */
.sea-row {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 4px 6px;
    border-radius: 6px;
    transition: background 0.15s;
}
.sea-row:hover { background: rgba(128,128,128,0.07); }
.sea-row label { flex: 1; font-size: 0.85rem; cursor: pointer; margin: 0; }
.sea-row span { font-size: 0.72rem; color: var(--text-secondary, #6c757d); white-space: nowrap; }
.sea-row button {
    font-size: 0.7rem;
    padding: 1px 7px;
    line-height: 1.5;
    border: 1px solid var(--panel-border, #dee2e6);
    border-radius: 4px;
    background: transparent;
    color: var(--text-secondary, #6c757d);
    cursor: pointer;
    white-space: nowrap;
}
.sea-row button:hover { background: rgba(128,128,128,0.12); }
.btn-sea-cfg { font-size: 0.7rem; padding: 1px 5px; line-height: 1.5; border: 1px solid var(--panel-border, #dee2e6); border-radius: 4px; background: transparent; color: var(--text-secondary, #6c757d); cursor: pointer; }
.btn-sea-cfg:hover { background: rgba(128,128,128,0.12); }
.sea-cfg-row { background: var(--bg-secondary, #f8f9fa); }
.sea-cfg-row:hover { background: rgba(128,128,128,0.1); }

.participant-badge { position: relative; }
.participant-badge.chicken-overlay::after {
    content: '🐔';
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.6rem;
    background: rgba(0,0,0,0.55);
    border-radius: inherit;
    animation: chicken-bounce-anim 0.35s ease-in-out infinite alternate;
}
@keyframes chicken-bounce-anim {
    from { transform: scale(1) rotate(-5deg); }
    to   { transform: scale(1.15) rotate(5deg); }
}
.counter-spell-bar {
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 8px 16px;
    background: linear-gradient(135deg, rgba(255,193,7,0.15), rgba(255,152,0,0.08));
    border: 1px solid rgba(255,193,7,0.45);
    border-radius: 10px;
    margin-bottom: 10px;
    flex-wrap: wrap;
}

/* Ensure that voted/revealed state is visible for the current user as well.
   .me currently sets the border to the accent color which can hide the voted
   indicator because the .me rule appears after .voted. Add combined selectors
   so 'me' + 'voted' or 'me' + 'revealed' show the proper state while keeping
   the "you" box shadow visual. */
.participant-badge.me.voted { border-color: var(--card-voted); }
.participant-badge.me.revealed { border-color: var(--card-selected); }

.participant-name {
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--text-primary);
  text-align: center;
  max-width: 90px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.participant-vote {
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--accent);
  min-height: 1.4rem;
  text-align: center;
}

.vote-hidden { color: var(--text-secondary); font-size: 0.9rem; }
.vote-waiting { color: var(--text-secondary); font-size: 0.9rem; }

/* Controls Panel */
.controls-panel {
  background-color: var(--panel-bg);
  border-left: 1px solid var(--panel-border);
  overflow-y: auto;
  padding: 0.75rem;
}

.control-group {
  background-color: var(--bg-primary);
  border: 1px solid var(--panel-border);
  border-radius: var(--border-radius);
  padding: 0.75rem;
  margin-bottom: 0.75rem;
}

.control-title {
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--text-secondary);
  margin-bottom: 0.5rem;
  font-weight: 600;
}

.form-check-label { color: var(--text-primary); font-size: 0.875rem; }
.form-check-input:checked { background-color: var(--accent); border-color: var(--accent); }

/* Chat Panel */
.chat-panel {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  height: 48px;
  background-color: var(--panel-bg);
  border-top: 1px solid var(--panel-border);
  z-index: 50;
  transition: height 0.3s ease;
}

.chat-panel.expanded { height: 280px; }

.chat-header {
  padding: 0.6rem 1rem;
  cursor: pointer;
  font-weight: 600;
  font-size: 0.9rem;
  color: var(--text-primary);
  border-bottom: 1px solid var(--panel-border);
  display: flex;
  align-items: center;
  gap: 0.5rem;
  background-color: var(--bg-primary);
  user-select: none;
}

.chat-body {
  height: calc(100% - 48px);
  display: flex;
  flex-direction: column;
}

.chat-messages {
  flex: 1;
  overflow-y: auto;
  padding: 0.5rem 1rem;
  background-color: var(--chat-bg);
}

.chat-message {
  margin-bottom: 0.5rem;
  display: flex;
  gap: 0.5rem;
  align-items: flex-start;
}

.chat-author {
  font-weight: 600;
  font-size: 0.8rem;
  color: var(--accent);
  white-space: nowrap;
  flex-shrink: 0;
}

.chat-text {
  background-color: var(--chat-bubble);
  border-radius: var(--border-radius);
  padding: 0.3rem 0.65rem;
  font-size: 0.875rem;
  color: var(--text-primary);
  word-break: break-word;
}

.chat-time {
  font-size: 0.7rem;
  color: var(--text-secondary);
  white-space: nowrap;
  flex-shrink: 0;
  padding-top: 0.3rem;
}

.chat-input-row {
  display: flex;
  gap: 0.5rem;
  padding: 0.5rem 1rem;
  border-top: 1px solid var(--panel-border);
  background-color: var(--bg-secondary);
}

/* Buttons */
.btn-primary {
  background-color: var(--accent) !important;
  border-color: var(--accent) !important;
}

/* ============================================================
   Celebration – Balloons (pure CSS, no images)
   ============================================================ */

/* The balloon-riser wrapper translates upward (the rise).      */
/* The celebration-balloon inside handles the side sway.        */
.balloon-riser {
  position: absolute;
  bottom: -180px;
  pointer-events: none;
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* Oval balloon body */
.celebration-balloon {
  border-radius: 50% 50% 50% 50% / 40% 40% 60% 60%;
  position: relative;
  display: block;
  flex-shrink: 0;
}

/* Shine highlight (::before) */
.celebration-balloon::before {
  content: '';
  position: absolute;
  top: 16%;
  left: 16%;
  width: 28%;
  height: 18%;
  background: rgba(255, 255, 255, 0.52);
  border-radius: 50%;
  transform: rotate(-35deg);
  pointer-events: none;
}

/* Small round knot at bottom of balloon */
.balloon-knot {
  border-radius: 50%;
  flex-shrink: 0;
}

/* Thin string */
.balloon-string {
  width: 1.5px;
  flex-shrink: 0;
  opacity: 0.65;
}

/* Rise: balloon floats from bottom to above the viewport */
@keyframes balloon-rise {
  0%   { transform: translateY(0);              opacity: 0; }
  7%   { opacity: 1; }
  90%  { opacity: 1; }
  100% { transform: translateY(calc(-100vh - 320px)); opacity: 0; }
}

/* Gentle left/right sway */
@keyframes balloon-sway-left {
  0%, 100% { transform: rotate(-3deg); }
  50%       { transform: translateX(-18px) rotate(3deg); }
}

@keyframes balloon-sway-right {
  0%, 100% { transform: rotate(3deg); }
  50%       { transform: translateX(18px) rotate(-3deg); }
}
.btn-primary:hover {
  background-color: var(--accent-hover) !important;
  border-color: var(--accent-hover) !important;
}

/* Scrollbars */
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: var(--bg-primary); }
::-webkit-scrollbar-thumb { background: var(--panel-border); border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: var(--text-secondary); }

/* ======================== MOBILE BOTTOM NAV ======================== */
.mobile-bottom-nav {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  height: 56px;
  background-color: var(--panel-bg, #ffffff);
  border-top: 1px solid var(--panel-border, #dee2e6);
  z-index: 200;
  display: flex;
  align-items: stretch;
}

.mobile-nav-btn {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  background: none;
  border: none;
  border-right: 1px solid var(--panel-border, #dee2e6);
  cursor: pointer;
  color: var(--text-secondary);
  padding: 0.25rem;
  transition: background-color 0.15s, color 0.15s;
}
.mobile-nav-btn:last-child { border-right: none; }
.mobile-nav-btn:hover,
.mobile-nav-btn.active {
  background-color: var(--story-active, #cfe2ff);
  color: var(--accent);
}
.mobile-nav-icon { font-size: 1.2rem; line-height: 1; }
.mobile-nav-label { font-size: 0.65rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.04em; }

/* Responsive */
@media (max-width: 991px) {
  .room-layout {
    grid-template-columns: 1fr;
    grid-template-rows: auto 1fr;
    height: auto;
    padding-bottom: 56px; /* space for bottom nav */
  }

  /* Stories + Controls become fixed overlays on mobile */
  .stories-panel {
    display: none;
    position: fixed;
    top: 52px;
    left: 0;
    bottom: 56px;
    width: 85vw;
    max-width: 320px;
    z-index: 150;
    box-shadow: 4px 0 12px rgba(0,0,0,0.2);
  }
  .stories-panel.mobile-visible { display: flex; }

  .controls-panel {
    display: none;
    position: fixed;
    top: 52px;
    right: 0;
    bottom: 56px;
    width: 85vw;
    max-width: 280px;
    z-index: 150;
    box-shadow: -4px 0 12px rgba(0,0,0,0.2);
    overflow-y: auto;
  }
  .controls-panel.mobile-visible { display: block; }

  /* Stories toggle btn hidden on mobile (use bottom nav instead) */
  .stories-toggle-btn { display: none !important; }

  /* Chat panel respects bottom nav */
  .chat-panel {
    bottom: 56px;
  }

  .poker-card { width: 54px; height: 76px; font-size: 1rem; }

  /* Room layout is full content area on mobile */
  .room-layout { height: auto; overflow: visible; }
  .main-content { min-height: calc(100vh - 52px - 56px); }
}

/* ============================================================
   Settings Modal
   ============================================================ */

.settings-modal-dialog {
  max-width: 960px;
}

/* Full-screen on small screens */
@media (max-width: 767px) {
  .settings-modal-dialog {
    margin: 0;
    max-width: 100%;
    width: 100%;
    /* Use dvh for iOS address-bar-aware height */
    min-height: 100dvh;
    min-height: 100svh;
    min-height: 100vh; /* fallback */
  }
  .settings-modal-dialog .modal-content {
    min-height: 100dvh;
    min-height: 100svh;
    min-height: 100vh;
    border-radius: 0;
  }
  .settings-tabs .settings-tab-btn {
    font-size: 0.68rem;
    padding: 0.3rem 0.4rem;
  }
  /* On very narrow phones, hide tab text and show only emoji */
  @media (max-width: 400px) {
    .settings-tab-btn .tab-label { display: none; }
  }
}

/* Tab bar */
.settings-tabs {
  gap: 2px;
  background: var(--bg-secondary, #fff);
  border-bottom: 1px solid var(--panel-border, #dee2e6) !important;
  margin-bottom: 0 !important;
  padding-bottom: 1rem !important; /* Add space below tabs */
  border-bottom-width: 2px !important; /* Make the border more visible */
  z-index: 2;
  position: relative;  
  flex-wrap: nowrap;
  flex-shrink: 0; /* Prevents the tabs from squishing */
  display: flex;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.settings-tab-btn {
  font-size: 0.82rem;
  font-weight: 600;
  border-bottom: none !important;
  border-radius: 8px 8px 0 0 !important;
  white-space: nowrap;
  color: var(--text-secondary, #6c757d);
  background: transparent;
  border-color: transparent !important;
  transition: background 0.15s, color 0.15s;
}

.settings-tab-btn:hover {
  color: var(--accent, #0d6efd);
  background: var(--card-hover, #e7f1ff);
}

.settings-tab-btn.active {
  color: var(--accent, #0d6efd) !important;
  background: var(--bg-primary, #f8f9fa) !important;
  border-color: var(--panel-border, #dee2e6) !important;
  border-bottom-color: var(--bg-primary, #f8f9fa) !important;
}

/* Tab content fills available height */
#settingsTabContent {
  margin-top: 0rem; /* Add a little space above content */
  position: relative;
  z-index: 1;
  /*display: flex;*/
  /*flex-direction: column;*/
  flex-grow: 1;
  display: block; /* Ensure it behaves as a standard block */
  width: 100%;  
  min-height: 0;
}

#settingsTabContent .tab-pane {
  flex: 1;
}

/* Vote history */
.vote-history-section {
  padding: 0.5rem 1.25rem;
  border-top: 1px solid var(--panel-border);
}

.vote-history-toggle {
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--text-secondary);
  cursor: pointer;
  user-select: none;
  display: flex;
  align-items: center;
  gap: 0.4rem;
  background: none;
  border: none;
  padding: 0;
}

.vote-history-toggle:hover { color: var(--accent); }

.vote-history-list {
  margin-top: 0.4rem;
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}

.vote-history-entry {
  background: var(--card-bg);
  border: 1px solid var(--panel-border);
  border-radius: var(--border-radius);
  padding: 0.35rem 0.65rem;
  font-size: 0.78rem;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-wrap: wrap;
}

.vote-history-story {
  font-weight: 600;
  color: var(--text-primary);
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.vote-history-stats {
  color: var(--text-secondary);
  font-size: 0.73rem;
  display: flex;
  gap: 0.5rem;
  flex-wrap: wrap;
}

/* ============================================================
   Theme Builder Modal — compact, grouped, modern
   ============================================================ */

/* Accordion group headers */
.ct-section-header {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  cursor: pointer;
  padding: 0.55rem 0.75rem;
  border-radius: 8px;
  background: var(--bg-secondary, #fff);
  border: 1px solid var(--panel-border, #dee2e6);
  font-size: 0.82rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--accent, #0d6efd);
  user-select: none;
  margin-bottom: 0;
  transition: background 0.15s;
}
.ct-section-header:hover { background: var(--card-hover, #e7f1ff); }
.ct-section-chevron { margin-left: auto; transition: transform 0.2s; font-style: normal; }
.ct-section-header.collapsed .ct-section-chevron { transform: rotate(-90deg); }

/* Swatch strip - tiny inline preview of a color value */
.ct-swatch-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem 0.5rem;
  align-items: center;
}
.ct-swatch-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  font-size: 0.65rem;
  color: var(--text-secondary, #6c757d);
  min-width: 44px;
}
.ct-swatch-item input[type="color"] {
  width: 44px;
  height: 44px;
  border-radius: 6px;
  border: 1.5px solid var(--panel-border, #dee2e6);
  cursor: pointer;
  padding: 2px;
}

@media (max-width: 767px) {
  /* Remove fixed min-height so landscape doesn't double-scroll */
  #tab-theme .d-flex { min-height: unset !important; }
}

/* Live mini preview strip */
#ct-live-preview {
  border-radius: 10px;
  overflow: hidden;
  border: 1.5px solid var(--panel-border, #dee2e6);
  box-shadow: 0 2px 8px rgba(0,0,0,0.10);
  font-size: 0.78rem;
  user-select: none;
}
.ct-preview-navbar {
  padding: 0.4rem 0.75rem;
  font-weight: 700;
  font-size: 0.8rem;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}
.ct-preview-body {
  padding: 0.4rem 0.6rem;
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  align-items: flex-start;
}
/* AI6: compact vote card specimens in live preview */
#ct-live-preview .poker-card {
  font-size: 0.75rem !important;
  width: 40px !important;
  height: 56px !important;
  min-height: unset !important;
  padding: 2px 4px !important;
  border-radius: 4px !important;
}
#ct-live-preview .participant-badge {
  font-size: 0.62rem !important;
  padding: 1px 5px !important;
}
.ct-preview-card {
  width: 40px;
  height: 52px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 1rem;
  border-radius: 5px;
  flex-shrink: 0;
}
.ct-preview-participants {
  display: flex;
  flex-direction: column;
  gap: 4px;
  flex: 1;
}
.ct-preview-badge {
  border-radius: 5px;
  padding: 2px 8px;
  font-size: 0.7rem;
  font-weight: 600;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.ct-preview-chat {
  margin-top: 0.4rem;
  border-radius: 5px;
  padding: 0.3rem 0.5rem;
  font-size: 0.7rem;
}
.ct-preview-btn {
  display: inline-block;
  border-radius: 5px;
  padding: 2px 10px;
  font-size: 0.7rem;
  font-weight: 600;
  margin-top: 0.35rem;
  margin-right: 3px;
}

/* Compact field labels inside sections */
.ct-field-label {
  font-size: 0.72rem;
  color: var(--text-secondary, #6c757d);
  margin-bottom: 1px;
  display: block;
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.ct-section-body { padding: 0.65rem 0.1rem 0.25rem 0.1rem; }

/* ============================================================
   Vibe Check Buttons
   ============================================================ */
.vibe-btn {
  position: relative;
  background: var(--card-bg, #fff);
  border: 2px solid var(--panel-border, #dee2e6);
  border-radius: 10px;
  font-size: 1.3rem;
  padding: 4px 8px;
  cursor: pointer;
  transition: transform 0.15s, border-color 0.15s, background 0.15s;
  line-height: 1;
  display: inline-flex;
  align-items: center;
  gap: 3px;
}
.vibe-btn:hover { transform: scale(1.12); border-color: var(--accent, #0d6efd); }
.vibe-btn.vibe-selected {
  border-color: var(--accent, #0d6efd);
  background: var(--card-hover, #e9f0ff);
}
.vibe-count {
  font-size: 0.65rem;
  font-weight: 700;
  color: var(--text-secondary, #6c757d);
  min-width: 10px;
}

/* ============================================================
   Floor is Lava
   ============================================================ */
@keyframes lava-glow {
  0%, 100% { box-shadow: 0 0 8px 2px color-mix(in srgb, var(--lava-color-primary, #ff4500) 70%, transparent);
             border-color: var(--lava-color-primary, #ff4500); }
  50%      { box-shadow: 0 0 22px 7px var(--lava-color-primary, #ff4500);
             border-color: var(--lava-color-secondary, #ff6b00); }
}
.lava-outlier {
  animation: lava-glow 0.85s ease-in-out infinite !important;
  border-color: var(--lava-color-primary, #ff4500) !important;
}

/* ============================================================
   Card Flip Reveal
   ============================================================ */
.participant-badge { transform-style: preserve-3d; }
.revealing .participant-badge {
    animation: card-flip-reveal 0.45s ease-out both;
}
@keyframes card-flip-reveal {
    0%   { transform: rotateY(0deg); }
    49%  { transform: rotateY(90deg); }
    50%  { transform: rotateY(90deg); }
    100% { transform: rotateY(0deg); }
}

/* ============================================================
   Streak Glow
   ============================================================ */
.participant-badge.streak-active {
    box-shadow: 0 0 0 3px gold, 0 0 16px 4px rgba(255,215,0,0.55);
    animation: streak-pulse 1.8s ease-in-out infinite;
}
@keyframes streak-pulse {
    0%,100% { box-shadow: 0 0 0 3px gold, 0 0 16px 4px rgba(255,215,0,0.55); }
    50%      { box-shadow: 0 0 0 3px gold, 0 0 26px 8px rgba(255,215,0,0.75); }
}

/* ============================================================
   Vibe Reaction Float
   ============================================================ */
@keyframes vibe-float {
    0%   { opacity:1; transform:translateY(0) scale(1); }
    100% { opacity:0; transform:translateY(-60px) scale(1.4); }
}
.vibe-float-emoji {
    position:fixed; pointer-events:none; font-size:1.8rem;
    z-index:9997; animation:vibe-float 0.9s ease-out forwards;
}

/* X1 — Flip on vote: reuses poker-flip keyframe (already defined) */
/* X2 — AH5: Change vote hint moved from participant badge to selected voting card */
.show-change-hint .poker-card.selected { position: relative; cursor: pointer; }
.show-change-hint .poker-card.selected:hover::after {
    content: '↺ Change';
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background: rgba(0, 0, 0, 0.45);
    color: #fff;
    font-size: 0.72rem;
    font-weight: 600;
    display: flex;
    align-items: center;
    justify-content: center;
    pointer-events: none;
    z-index: 2;
    transform: none !important;
}

/* AC/AE6 — Session Timer & Clock (now inline in current-story-bar) */
.session-tc-bar {
    /* display and flex set inline via JS; no standalone bar styles needed */
    font-size: 0.88rem;
    color: var(--text-secondary, #6c757d);
    user-select: none;
    gap: 6px;
}
.stc-segment {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    font-variant-numeric: tabular-nums;
    font-size: 0.88rem;
}
#stc-clock {
    font-size: 1rem;
    font-weight: 500;
    color: var(--text-primary, #212529);
}
.stc-sep {
    opacity: 0.4;
    font-size: 0.7rem;
}
/* AI3: each timer/clock segment wrapped with its own × button */
.stc-pair { display: inline-flex; align-items: center; gap: 2px; }
.stc-close-btn {
    background: none; border: none;
    font-size: 0.78rem; line-height: 1; padding: 0 2px;
    color: var(--text-muted, #6c757d); cursor: pointer;
    opacity: 0.5; border-radius: 3px;
    transition: opacity 0.15s, background 0.15s; flex-shrink: 0;
}
.stc-close-btn:hover { opacity: 1; background: rgba(0,0,0,0.07); }
.ac-analog {
    display: inline-block;
    vertical-align: middle;
    color: var(--text, #212529);
}

/* P1 — Keyboard legend */
.keyboard-legend {
    margin-top: 6px;
    font-size: 0.72rem;
    color: var(--text-secondary, #6c757d);
    line-height: 1.8;
    user-select: none;
}
.keyboard-legend kbd {
    display: inline-block;
    padding: 1px 4px;
    font-size: 0.68rem;
    font-family: var(--bs-font-monospace, monospace);
    color: var(--text, #212529);
    background: var(--bg2, #f8f9fa);
    border: 1px solid var(--border, #dee2e6);
    border-radius: 3px;
    box-shadow: 0 1px 0 var(--border, #dee2e6);
    line-height: 1.4;
}

/* AK — keyboard legend: each entry = 3D key + plain value label */
.kb-entry {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    margin: 2px 3px;
    vertical-align: middle;
}
.kb-key {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    min-width: 20px;
    height: 20px;
    padding: 0 5px;
    box-sizing: border-box;
    border-radius: 4px;
    background: linear-gradient(to bottom, #686868 0%, #525252 100%);
    color: #fff;
    font-family: Arial, sans-serif;
    font-size: 0.63rem;
    font-weight: 600;
    line-height: 1;
    box-shadow:
        inset 1px 1px 2px rgba(255,255,255,0.15),
        inset -1px -1px 2px rgba(0,0,0,0.4),
        0 3px 0 #313131,
        0 4px 6px rgba(0,0,0,0.35);
    user-select: none;
    vertical-align: middle;
    white-space: nowrap;
}
.kb-val {
    font-size: 0.7rem;
    font-family: var(--bs-font-monospace, monospace);
    color: var(--text-secondary, #6c757d);
    vertical-align: middle;
    white-space: nowrap;
}

/* AK — inline shortcut hint inside action buttons */
.btn-kb-hint {
    font-size: 0.6rem;
    opacity: 0.65;
    vertical-align: middle;
    background: transparent;
    border-color: currentColor;
    color: inherit;
    box-shadow: none;
    padding: 0 3px;
    line-height: 1.2;
    pointer-events: none;
    margin-left: 4px;
}

/* P2 — Emoji Reaction panel */
.reaction-panel {
    display: flex;
    gap: 4px;
    flex-wrap: wrap;
    margin-top: 8px;
    padding: 4px 6px;
    background: var(--bg-secondary, #f8f9fa);
    border: 1px solid var(--panel-border, #dee2e6);
    border-radius: 8px;
}
/* AK2: raised 3D keycap style matching settings bordered look */
.reaction-btn {
    font-size: 1.3rem;
    line-height: 1;
    background: var(--bg-primary, #fff);
    border: 1px solid var(--border, #dee2e6);
    border-radius: 8px;
    padding: 6px 8px;
    cursor: pointer;
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,0.8),
        0 3px 0 var(--panel-border, #c0c7d0),
        0 4px 6px rgba(0,0,0,0.12);
    transition: transform 0.08s, box-shadow 0.08s;
}
.reaction-btn:hover {
    transform: translateY(-1px);
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,0.8),
        0 4px 0 var(--panel-border, #c0c7d0),
        0 6px 8px rgba(0,0,0,0.15);
}
.reaction-btn:active {
    transform: translateY(2px);
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,0.8),
        0 1px 0 var(--panel-border, #c0c7d0),
        0 2px 3px rgba(0,0,0,0.10);
}

@keyframes reaction-float {
    0%   { opacity:1; transform:translateY(0) scale(1); }
    60%  { opacity:1; transform:translateY(-40px) scale(1.5); }
    100% { opacity:0; transform:translateY(-80px) scale(1.2); }
}
.reaction-float {
    position: fixed;
    pointer-events: none;
    font-size: 2rem;
    z-index: 9998;
    animation: reaction-float 1.4s ease-out forwards;
}

/* Speed badges */
.speed-badge { font-size:0.9rem; margin-left:4px; vertical-align:middle; }

/* Voice pulsing bars */
.voice-bars { display:inline-flex; align-items:flex-end; gap:2px; height:14px; margin-left:4px; vertical-align:middle; }
.voice-bars span { display:inline-block; width:3px; background:rgba(255,255,255,0.9); border-radius:2px; animation:voice-bar-pulse 0.7s ease-in-out infinite; }
.voice-bars span:nth-child(1) { animation-delay:0s;   height:5px; }
.voice-bars span:nth-child(2) { animation-delay:0.2s; height:9px; }
.voice-bars span:nth-child(3) { animation-delay:0.4s; height:5px; }
@keyframes voice-bar-pulse { 0%,100% { transform:scaleY(0.4); } 50% { transform:scaleY(1.0); } }
.voice-flash { animation:voice-flash-anim 0.6s ease-out; }
@keyframes voice-flash-anim { 0%,100% { background-color:#dc3545; } 50% { background-color:#fff; color:#dc3545; } }

/* Test-mode: lift DOM elements above modal so tests are visible while settings is open */
body.test-mode #counterSpellBar   { z-index:2000; }

/* Confidence stars on participant badges */
.confidence-stars { display:block; font-size:0.65rem; color:#ffc107; line-height:1.2; margin-top:1px; }

/* Confidence selector active state */
#confidenceSelector .conf-btn.active { background-color:#ffc107; border-color:#ffc107; color:#000; }

/* Poker Hand Reveal flip — perspective makes the mid-point disappear realistically */
.participant-badge { perspective: 600px; }
@keyframes poker-flip {
    0%   { transform: rotateY(0deg)  scaleX(1);    }
    44%  { transform: rotateY(88deg) scaleX(0.1);  }
    56%  { transform: rotateY(88deg) scaleX(0.1);  }
    100% { transform: rotateY(0deg)  scaleX(1);    }
}
.poker-flip { animation: poker-flip 0.48s ease-in-out; }

/* ============================================================
   Card Back Designs
   ============================================================ */

/* Baize: green felt card table */
body.card-back-baize .participant-badge.voted {
    background: linear-gradient(135deg, #2e8b57 0%, #1c5c34 50%, #2e7d46 100%);
    border-color: #145a28 !important;
    box-shadow: inset 0 1px 3px rgba(255,255,255,0.15), 0 2px 8px rgba(0,0,0,0.3);
}
body.card-back-baize .participant-badge.voted .participant-name { color: rgba(255,255,255,0.88); }
body.card-back-baize .participant-badge.voted .vote-hidden,
body.card-back-baize .participant-badge.voted .vote-waiting { color: rgba(200,240,210,0.55); font-size:1.1rem; }

/* Space: deep space starfield */
body.card-back-space .participant-badge.voted {
    background: radial-gradient(ellipse at 25% 25%, #1e1b4b 0%, #0c0a1e 100%);
    border-color: #4338ca !important;
    box-shadow: 0 0 10px rgba(99,102,241,0.35), inset 0 0 16px rgba(99,102,241,0.08);
    overflow: hidden;
    position: relative;
}
body.card-back-space .participant-badge.voted::after {
    content: '✦ · ✧ · ✦ · ✧';
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.45rem;
    color: rgba(255,255,255,0.22);
    letter-spacing: 5px;
    pointer-events: none;
    line-height: 1;
    word-break: break-all;
}
body.card-back-space .participant-badge.voted .participant-name { color: rgba(165,180,252,0.9); }
body.card-back-space .participant-badge.voted .vote-hidden,
body.card-back-space .participant-badge.voted .vote-waiting { color: rgba(255,255,255,0.3); }

/* Retro: classic diamond cross-hatch */
body.card-back-retro .participant-badge.voted {
    background:
        repeating-linear-gradient( 45deg, transparent 0px, transparent 5px, rgba(180,0,0,0.3) 5px, rgba(180,0,0,0.3) 6px),
        repeating-linear-gradient(-45deg, transparent 0px, transparent 5px, rgba(180,0,0,0.3) 5px, rgba(180,0,0,0.3) 6px),
        linear-gradient(135deg, #8b1a1a 0%, #b22222 100%);
    border: 2px solid #5a0d0d !important;
    box-shadow: inset 0 1px 3px rgba(255,200,200,0.2);
}
body.card-back-retro .participant-badge.voted .participant-name { color: rgba(255,225,215,0.9); }
body.card-back-retro .participant-badge.voted .vote-hidden,
body.card-back-retro .participant-badge.voted .vote-waiting { color: rgba(255,200,190,0.5); }

/* Seasonal: adapts by body season class */
body.card-back-seasonal.season-winter .participant-badge.voted {
    background: linear-gradient(160deg, #e8f4fd 0%, #b3d9f5 50%, #82bde8 100%);
    border-color: #5a9fc8 !important;
}
body.card-back-seasonal.season-winter .participant-badge.voted .participant-name { color: #1a4a6e; }
body.card-back-seasonal.season-winter .participant-badge.voted .vote-hidden,
body.card-back-seasonal.season-winter .participant-badge.voted .vote-waiting { color: rgba(100,160,210,0.55); }

body.card-back-seasonal.season-spring .participant-badge.voted {
    background: linear-gradient(160deg, #fff5f8 0%, #ffd6e8 50%, #ffb3d4 100%);
    border-color: #e07aa0 !important;
}
body.card-back-seasonal.season-spring .participant-badge.voted .participant-name { color: #8b2255; }
body.card-back-seasonal.season-spring .participant-badge.voted .vote-hidden,
body.card-back-seasonal.season-spring .participant-badge.voted .vote-waiting { color: rgba(210,100,145,0.55); }

body.card-back-seasonal.season-summer .participant-badge.voted {
    background: linear-gradient(160deg, #fffde0 0%, #ffe680 50%, #ffc020 100%);
    border-color: #d4950a !important;
    box-shadow: 0 0 8px rgba(255,200,0,0.25);
}
body.card-back-seasonal.season-summer .participant-badge.voted .participant-name { color: #7a4e00; }
body.card-back-seasonal.season-summer .participant-badge.voted .vote-hidden,
body.card-back-seasonal.season-summer .participant-badge.voted .vote-waiting { color: rgba(200,140,0,0.55); }

body.card-back-seasonal.season-autumn .participant-badge.voted {
    background: linear-gradient(160deg, #fff3e0 0%, #e08050 50%, #b84820 100%);
    border-color: #8c3010 !important;
    box-shadow: inset 0 1px 3px rgba(255,180,100,0.2);
}
body.card-back-seasonal.season-autumn .participant-badge.voted .participant-name { color: rgba(255,235,215,0.92); }
body.card-back-seasonal.season-autumn .participant-badge.voted .vote-hidden,
body.card-back-seasonal.season-autumn .participant-badge.voted .vote-waiting { color: rgba(255,210,170,0.5); }

/* Y2 — Solid color */
body.card-back-solid .participant-badge.voted {
    background: var(--cb-solid, #6366f1);
    border-color: color-mix(in srgb, var(--cb-solid, #6366f1) 60%, #000) !important;
    box-shadow: inset 0 1px 3px rgba(255,255,255,0.15);
}
body.card-back-solid .participant-badge.voted .participant-name { color: rgba(255,255,255,0.9); }
body.card-back-solid .participant-badge.voted .vote-hidden,
body.card-back-solid .participant-badge.voted .vote-waiting { color: rgba(255,255,255,0.4); }

/* Y2 — Gradient */
body.card-back-gradient .participant-badge.voted {
    background: linear-gradient(var(--cb-grad-dir, 135deg), var(--cb-grad-a, #6366f1), var(--cb-grad-b, #ec4899));
    border-color: color-mix(in srgb, var(--cb-grad-a, #6366f1) 50%, var(--cb-grad-b, #ec4899)) !important;
    box-shadow: inset 0 1px 3px rgba(255,255,255,0.15);
}
body.card-back-gradient .participant-badge.voted .participant-name { color: rgba(255,255,255,0.92); }
body.card-back-gradient .participant-badge.voted .vote-hidden,
body.card-back-gradient .participant-badge.voted .vote-waiting { color: rgba(255,255,255,0.35); }

/* Y2 — Checkerboard */
body.card-back-checker .participant-badge.voted {
    background-image: repeating-conic-gradient(#aaa 0% 25%, var(--bg, #fff) 0% 50%);
    background-size: 14px 14px;
    border-color: #888 !important;
}

/* Y2 — Diagonal stripes */
body.card-back-stripes .participant-badge.voted {
    background: repeating-linear-gradient(
        -45deg,
        var(--accent, #5b8dee) 0px, var(--accent, #5b8dee) 5px,
        var(--bg2, #f8f9fa) 5px, var(--bg2, #f8f9fa) 13px
    );
    border-color: var(--accent, #5b8dee) !important;
}

/* Y3 — Custom image */
body.card-back-customimage .participant-badge.voted {
    background-image: var(--cb-custom-img, none);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    border-color: #888 !important;
}
body.card-back-customimage .participant-badge.voted .participant-name { color: #fff; text-shadow: 0 1px 3px rgba(0,0,0,0.7); }
body.card-back-customimage .participant-badge.voted .vote-hidden,
body.card-back-customimage .participant-badge.voted .vote-waiting { color: rgba(255,255,255,0.35); }

/* ── Y1: Vote Picker Card Back styles (target unselected .poker-card) ── */
body.vote-back-baize .poker-card:not(.selected) {
    background: linear-gradient(135deg, #2e8b57 0%, #1c5c34 50%, #2e7d46 100%);
    border-color: #145a28 !important;
    color: rgba(255,255,255,0.85);
}
body.vote-back-space .poker-card:not(.selected) {
    background: radial-gradient(ellipse at 25% 25%, #1e1b4b 0%, #0c0a1e 100%);
    border-color: #4338ca !important;
    color: rgba(165,180,252,0.9);
}
body.vote-back-retro .poker-card:not(.selected) {
    background:
        repeating-linear-gradient(45deg, transparent 0px, transparent 5px, rgba(180,0,0,0.3) 5px, rgba(180,0,0,0.3) 6px),
        repeating-linear-gradient(-45deg, transparent 0px, transparent 5px, rgba(180,0,0,0.3) 5px, rgba(180,0,0,0.3) 6px),
        #f5e8d8;
    border-color: #8b1a1a !important;
}
body.vote-back-checker .poker-card:not(.selected) {
    background-image: repeating-conic-gradient(rgba(0,0,0,0.08) 0% 25%, transparent 0% 50%);
    background-size: 14px 14px;
}
body.vote-back-stripes .poker-card:not(.selected) {
    background: repeating-linear-gradient(
        135deg,
        transparent 0px, transparent 7px,
        rgba(91,141,238,0.18) 7px, rgba(91,141,238,0.18) 9px
    );
}
body.vote-back-solid .poker-card:not(.selected) {
    background: var(--vcb-solid, #6366f1);
    color: rgba(255,255,255,0.92);
    border-color: transparent !important;
}
body.vote-back-seasonal.season-winter .poker-card:not(.selected) { background: linear-gradient(160deg, #e8f4fd, #82bde8); }
body.vote-back-seasonal.season-spring .poker-card:not(.selected) { background: linear-gradient(160deg, #fff5f8, #ffb3d4); }
body.vote-back-seasonal.season-summer .poker-card:not(.selected) { background: linear-gradient(160deg, #fffde0, #ffc020); }
body.vote-back-seasonal.season-autumn .poker-card:not(.selected) { background: linear-gradient(160deg, #fff3e0, #ff8c00); }

/* ── Presentation Mode ── */
body.presentation-mode #mainNav { display: none !important; }
body.presentation-mode #storiesPanel { display: none !important; }
body.presentation-mode #chatPanel  { display: none !important; }
body.presentation-mode .controls-panel { display: none !important; }
body.presentation-mode #vibeCheckPanel { display: none !important; }
body.presentation-mode #participantsContainer {
    flex-wrap: wrap;
    gap: 1.2rem;
    justify-content: center;
    padding: 2rem 1rem;
}
body.presentation-mode .participant-badge {
    transform: scale(1.35);
    transform-origin: center;
}
body.presentation-mode #currentStoryDisplay {
    font-size: 1.6rem;
    text-align: center;
    padding: 1rem 0 0.5rem;
}

/* ── PIN Modal ── */
#pinModal .modal-content { min-height: auto; }

/* ── Sprint Dashboard ── */
#sprintDashboard { font-size: 0.78rem; }
#sprintSparkline svg, #sprintVelocityChart svg { display: block; width: 100%; }
#sprintSparkline circle { transition: r 0.15s; }
#sprintSparkline circle:hover { r: 5; }

/* ── Story Notes ── */
.current-story-note { font-size: 0.8rem; color: var(--text-secondary, #888); padding: 2px 12px 4px;
    white-space: pre-wrap; word-break: break-word; max-height: 3.5em; overflow: hidden; }
.story-notes-preview { font-size: 0.72rem; color: var(--text-secondary, #888); padding: 2px 0 0;
    opacity: 0.8; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 220px; }

/* Fix #8 — collapsible settings sections: accent-color styling + animated chevron */
.settings-section-header {
  cursor: pointer;
  padding: 0.45rem 0.75rem;
  background: color-mix(in srgb, var(--accent, #5b8dee) 10%, transparent);
  border: 1px solid color-mix(in srgb, var(--accent, #5b8dee) 25%, transparent);
  border-radius: 6px;
  margin: 10px 0 4px;
  display: flex;
  align-items: center;
  font-weight: 700;
  font-size: 0.82rem;
  color: var(--accent, #5b8dee);
  user-select: none;
}
.settings-section-header:hover {
  background: color-mix(in srgb, var(--accent, #5b8dee) 18%, transparent);
}
/* AH4 — chevron rotation when outer div collapses (standardised pattern) */
.settings-section-chevron { transition: transform 0.2s; display: inline-block; margin-left: auto; }
.settings-section-header.collapsed .settings-section-chevron { transform: rotate(-90deg); }
/* Legacy inner-span pattern: dim only (no rotation) */
.settings-section-header span[data-bs-toggle="collapse"] { transition: none; flex-grow: 1; }
.settings-section-header span[data-bs-toggle="collapse"].collapsed { opacity: 0.75; }
.just-changed { outline: 2px solid var(--accent, #5b8dee); outline-offset: 4px; transition: outline 0.5s; }
/* Fix #6 — search result highlight */
mark.search-highlight { background: #fff176; color: inherit; border-radius: 2px; padding: 0 1px; }
[data-theme="dark"] mark.search-highlight, [data-theme="forest"] mark.search-highlight { background: #b8860b; color: #fff; }
/* Fix #5 — card back flip preview animation */
@keyframes flip-preview { 0%{transform:rotateY(0)} 50%{transform:rotateY(90deg)} 100%{transform:rotateY(0)} }
.flip-preview { animation: flip-preview 0.6s ease-in-out; }
/* AE2 — vote picker card flip preview */
@keyframes cardFlip { 0%{transform:rotateY(0)} 50%{transform:rotateY(90deg)} 100%{transform:rotateY(0)} }
.card-flipping { animation: cardFlip 0.6s ease-in-out; }
.story-notes-area { padding: 4px 0 2px; }
.story-notes-area textarea { font-size: 0.78rem; resize: vertical; min-height: 56px; }
.story-note-btn { line-height: 1; }

/* ── Jira Write-back ── */
.jira-wb-icon { font-size: 0.7rem; opacity: 0.55; cursor: default; margin-left: 2px; vertical-align: middle; }

/* ── Jira Issue Type Chips ── */
.jira-type-chip { display:inline-block; font-size:0.62rem; font-weight:600; padding:1px 5px;
    border-radius:3px; margin-right:3px; vertical-align:middle; line-height:1.5; letter-spacing:0.01em; }
[data-theme="dark"] .jira-type-chip, [data-theme="forest"] .jira-type-chip { filter:brightness(1.25) saturate(0.85); }

/* ============================================================
   Mobile Layout  (≤ 600px)
   ============================================================ */
@media (max-width: 600px) {
    #cardContainer { display:grid !important; grid-template-columns:repeat(4,1fr); gap:6px; }
    .poker-card { min-height:52px !important; font-size:1rem !important; padding:0 !important;
        display:flex; align-items:center; justify-content:center; }
    #participantsContainer { display:grid !important; grid-template-columns:repeat(2,1fr); gap:6px; }

    #storiesPanel {
        position:fixed !important; bottom:0 !important; left:0 !important; right:0 !important;
        top:auto !important; width:100% !important; max-height:65vh;
        transform:translateY(100%); transition:transform 0.28s ease; z-index:1040;
        border-radius:16px 16px 0 0; border-top:2px solid var(--panel-border);
        border-left:none; border-right:none; overflow-y:auto;
        box-shadow:0 -4px 20px rgba(0,0,0,0.15);
    }
    #storiesPanel.mobile-visible { transform:translateY(0); }

    #storiesPanelBackdrop { display:none; position:fixed; inset:0; z-index:1039; background:rgba(0,0,0,0.4); }
    #storiesPanelBackdrop.visible { display:block; }

    #chatPanel {
        position:fixed !important; bottom:0 !important; left:0 !important; right:0 !important;
        top:auto !important; width:100% !important; max-height:60vh;
        transform:translateY(100%); transition:transform 0.28s ease; z-index:1040;
        border-radius:16px 16px 0 0; border-top:2px solid var(--panel-border); overflow-y:auto;
    }
    #chatPanel.mobile-visible { transform:translateY(0); }

    .navbar-brand { font-size:0.85rem !important; }
    .controls-panel .btn { font-size:0.8rem; padding:4px 8px; }
    #statsBar { flex-wrap:wrap; gap:4px; }
    #currentStoryDisplay { font-size:1rem; }
}

/* ============================================================
   AD — Host + Settings Lock + Participant Messaging
   ============================================================ */

/* AD1: Host crown badge on participant card */
.participant-badge.is-host { position: relative; }
.participant-badge.is-host::before {
    content: '👑';
    position: absolute;
    top: -8px; right: -6px;
    font-size: 11px;
    line-height: 1;
    pointer-events: none;
    z-index: 1;
}

/* AD3: Room-setting scope badge (👥) */
.badge-room-setting {
    display: inline-block;
    font-size: 0.62rem;
    background: color-mix(in srgb, var(--accent, #5b8dee) 15%, transparent);
    color: var(--accent, #5b8dee);
    border-radius: 3px;
    padding: 0 4px;
    vertical-align: middle;
    cursor: help;
    line-height: 1.4;
    margin-left: 3px;
}

/* AD2: Locked room-setting container */
.room-setting-locked {
    opacity: 0.5;
    pointer-events: none;
}

/* AD3: Host approval toast */
.host-approval-toast {
    position: fixed;
    bottom: 80px; right: 16px;
    background: var(--card-bg, #fff);
    border: 2px solid var(--accent, #5b8dee);
    border-radius: 10px;
    padding: 12px 14px;
    box-shadow: 0 4px 20px rgba(0,0,0,0.2);
    z-index: 9998;
    min-width: 200px;
    font-size: 0.85rem;
    animation: adSlideIn 0.3s ease;
}

/* AD5: Host setup modal */
.host-setup-modal-backdrop {
    position: fixed; inset: 0;
    background: rgba(0,0,0,0.5);
    z-index: 10000;
    display: flex; align-items: center; justify-content: center;
}
.host-setup-modal-box {
    background: var(--card-bg, #fff);
    border-radius: 14px;
    padding: 28px 28px 22px;
    max-width: 420px; width: 92%;
    text-align: center;
    box-shadow: 0 8px 40px rgba(0,0,0,0.3);
    color: var(--text-primary, #212529);
}
.host-setup-title { font-size: 1.4rem; font-weight: 700; margin-bottom: 8px; }
.host-setup-desc { font-size: 0.88rem; color: var(--text-secondary, #6c757d); margin-bottom: 18px; }
.host-setup-options {
    display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 14px;
}
.host-setup-opt {
    border: 2px solid var(--panel-border, #dee2e6);
    border-radius: 10px;
    padding: 14px 8px;
    background: transparent;
    cursor: pointer;
    font-size: 0.83rem;
    text-align: center;
    line-height: 1.5;
    transition: border-color 0.15s, background 0.15s;
    color: var(--text-primary, #212529);
}
.host-setup-opt:hover {
    border-color: var(--accent, #5b8dee);
    background: color-mix(in srgb, var(--accent, #5b8dee) 8%, transparent);
}
.host-setup-skip {
    background: none; border: none;
    color: var(--text-secondary, #6c757d);
    font-size: 0.8rem; cursor: pointer; text-decoration: underline;
}

/* AD6: Participant right-click context menu */
.participant-context-menu {
    position: fixed;
    z-index: 10001;
    background: var(--card-bg, #fff);
    border: 1px solid var(--panel-border, #dee2e6);
    border-radius: 8px;
    box-shadow: 0 4px 20px rgba(0,0,0,0.18);
    padding: 4px 0;
    list-style: none;
    margin: 0;
    min-width: 170px;
    font-size: 0.875rem;
    color: var(--text-primary, #212529);
}
.participant-context-menu li {
    padding: 7px 14px;
    cursor: pointer;
    white-space: nowrap;
    user-select: none;
}
.participant-context-menu li:hover {
    background: color-mix(in srgb, var(--accent, #5b8dee) 10%, transparent);
}
.participant-context-menu li.ctx-sep {
    height: 1px;
    background: var(--panel-border, #dee2e6);
    padding: 0; margin: 3px 0;
    cursor: default;
}

/* AD7: Private message toast */
.private-msg-toast {
    position: fixed;
    bottom: 80px; right: 16px;
    background: var(--card-bg, #fff);
    border: 2px solid #8b5cf6;
    border-radius: 10px;
    padding: 12px 38px 12px 14px;
    box-shadow: 0 4px 20px rgba(0,0,0,0.2);
    z-index: 9998;
    min-width: 200px; max-width: 300px;
    font-size: 0.85rem;
    animation: adSlideIn 0.3s ease;
    color: var(--text-primary, #212529);
}
.pm-header { font-size: 0.74rem; color: #8b5cf6; margin-bottom: 5px; }
.pm-body { word-break: break-word; }
.pm-close {
    position: absolute; top: 6px; right: 8px;
    background: none; border: none; cursor: pointer;
    font-size: 0.8rem; color: var(--text-secondary, #6c757d); padding: 0;
}

/* AD8: Emoji send picker */
.emoji-send-menu {
    position: fixed;
    z-index: 10001;
    background: var(--card-bg, #fff);
    border: 1px solid var(--panel-border, #dee2e6);
    border-radius: 12px;
    padding: 10px;
    box-shadow: 0 4px 20px rgba(0,0,0,0.18);
    display: flex; flex-wrap: wrap;
    gap: 4px; max-width: 230px;
}
.emoji-send-btn {
    font-size: 1.35rem;
    background: none;
    border: 1px solid transparent;
    border-radius: 6px;
    cursor: pointer;
    padding: 3px 6px;
    line-height: 1;
}
.emoji-send-btn:hover {
    border-color: var(--accent, #5b8dee);
    background: color-mix(in srgb, var(--accent, #5b8dee) 10%, transparent);
}

/* AD9: Sound send menu */
.sound-send-menu {
    position: fixed;
    z-index: 10001;
    background: var(--card-bg, #fff);
    border: 1px solid var(--panel-border, #dee2e6);
    border-radius: 10px;
    padding: 8px;
    box-shadow: 0 4px 20px rgba(0,0,0,0.18);
    display: flex; flex-direction: column; gap: 4px;
    min-width: 150px;
}
.sound-send-btn {
    background: none;
    border: 1px solid var(--panel-border, #dee2e6);
    border-radius: 6px;
    padding: 6px 12px;
    cursor: pointer;
    text-align: left;
    font-size: 0.85rem;
    color: var(--text-primary, #212529);
}
.sound-send-btn:hover { border-color: var(--accent, #5b8dee); }

/* AD: simple AD toast */
.ad-toast {
    position: fixed; bottom: 20px; right: 16px;
    padding: 10px 16px; border-radius: 8px;
    font-size: 0.85rem; z-index: 9997;
    animation: adSlideIn 0.25s ease;
    max-width: 280px;
}
.ad-toast-info    { background: #d1ecf1; color: #0c5460; border: 1px solid #bee5eb; }
.ad-toast-success { background: #d4edda; color: #155724; border: 1px solid #c3e6cb; }
.ad-toast-warning { background: #fff3cd; color: #856404; border: 1px solid #ffc107; }
.ad-toast-danger  { background: #f8d7da; color: #721c24; border: 1px solid #f5c6cb; }

@keyframes adSlideIn {
    from { transform: translateX(100%); opacity: 0; }
    to   { transform: translateX(0); opacity: 1; }
}

/* AE7 — Panel close (×) buttons */
.panel-close-btn {
    /* works in both block (float) and flex (margin-left:auto) containers */
    float: right;
    order: 999;
    margin-left: auto;
    align-self: flex-start;
    background: none;
    border: none;
    font-size: 0.85rem;
    line-height: 1;
    padding: 1px 3px;
    color: var(--text-muted, #6c757d);
    cursor: pointer;
    opacity: 0.5;
    border-radius: 3px;
    transition: opacity 0.15s, background 0.15s;
    flex-shrink: 0;
}
.panel-close-btn:hover {
    opacity: 1;
    background: rgba(0,0,0,0.07);
    color: var(--text-primary, #333);
}

/* AF11 — Draggable settings modal */
.settings-modal-dialog.was-dragged {
    transform: none !important;
    margin: 0 !important;
}

/* AH13 — Avatar DiceBear style tiles: dimmed unselected, accent glow on selected */
.avatar-style-option {
    border: 2px solid var(--border, #dee2e6);
    border-radius: 6px;
    cursor: pointer;
    opacity: 0.6;
    transition: opacity 0.15s, border-color 0.15s, box-shadow 0.15s;
    padding: 4px;
    text-align: center;
}
.avatar-style-option.selected, .avatar-style-option:hover {
    border-color: var(--accent, #5b8dee);
    opacity: 1;
    box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent, #5b8dee) 30%, transparent);
}
.avatar-style-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(54px, 1fr));
    gap: 6px;
}