@font-face {
  font-family: 'Vazirmatn';
  font-style: normal;
  font-weight: 300 800;
  font-display: swap;
  src: url('/fonts/vazirmatn-arabic.woff2') format('woff2');
  unicode-range: U+0600-06FF, U+0750-077F, U+0870-088E, U+0890-0891, U+0897-08E1, U+08E3-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC;
}

@font-face {
  font-family: 'Vazirmatn';
  font-style: normal;
  font-weight: 300 800;
  font-display: swap;
  src: url('/fonts/vazirmatn-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ── Daberna Design System Tokens (Chipped Slate Felt) ───────────── */
:root {
  /* Core Brand & Semantic Colors */
  --color-ink: #0d1726;
  --color-surface: #142238;
  --color-surface2: #1c2f4c;
  --color-line: #273e63;
  --color-mist: #8fa3c0;
  --color-fog: #586f8f;
  --color-accent: #f0473c;
  --color-accent-hover: #d93c32;
  --color-gold: #f59e0b;
  --color-felt: #10b981;
  --color-danger: #ef4444;
  --color-warning: #f59e0b;

  /* Backward Compatible Semantic Mappings */
  --bg-main: #0a1220;
  --bg-card: var(--color-surface);
  --bg-card-hover: var(--color-surface2);
  --primary: var(--color-accent);
  --primary-hover: var(--color-accent-hover);
  --secondary: var(--color-felt);
  --danger: var(--color-danger);
  --warning: var(--color-gold);
  --text-main: #f8fafc;
  --text-muted: var(--color-mist);
  --text-caption: var(--color-fog);
  --border-color: var(--color-line);
  --marked-bg: var(--color-felt);
  --marked-text: #ffffff;
  --winning-row: var(--color-gold);

  /* Radius Tokens */
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 16px;
  --radius-xl: 20px;
  --radius-2xl: 24px;
  --radius-3xl: 28px;
  --radius-full: 9999px;

  /* Elevation & Shadow Tokens */
  --shadow-sm: 0 2px 4px rgba(0, 0, 0, 0.3);
  --shadow-md: 0 6px 16px rgba(0, 0, 0, 0.45);
  --shadow-lg: 0 12px 28px rgba(0, 0, 0, 0.55);
  --shadow-panel: 0 30px 60px -30px rgba(0, 0, 0, 0.8), 0 0 0 1px rgba(255, 255, 255, 0.05);
  --shadow-accent: 0 12px 24px -10px rgba(240, 71, 60, 0.7);
  --shadow-numring: inset 0 2px 6px rgba(255, 255, 255, 0.1),
                    inset 0 -14px 22px rgba(0, 0, 0, 0.55),
                    0 0 0 1px rgba(240, 71, 60, 0.35),
                    0 0 40px rgba(240, 71, 60, 0.45);

  /* Spacing Tokens */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;

  /* Typography */
  --font-vazir: 'Vazirmatn', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;

  /* Animation Durations (Unified Phase 5B) */
  --duration-instant: 120ms;
  --duration-fast: 200ms;
  --duration-normal: 320ms;
  --duration-slow: 500ms;
  --duration-epic: 800ms;

  /* Animation Easings */
  --ease-standard: cubic-bezier(0.4, 0, 0.2, 1);
  --ease-bounce: cubic-bezier(0.175, 0.885, 0.32, 1.25);
  --ease-decelerate: cubic-bezier(0, 0, 0.2, 1);

  /* Glow Tokens */
  --glow-cyan: 0 0 16px rgba(6, 182, 212, 0.45);
  --glow-gold: 0 0 20px rgba(245, 158, 11, 0.55);
  --glow-danger: 0 0 22px rgba(239, 68, 68, 0.65);

  /* Z-Index Hierarchy */
  --z-background: 0;
  --z-base: 1;
  --z-panel: 10;
  --z-sticky-bar: 50;
  --z-ribbon: 80;
  --z-modal-backdrop: 9000;
  --z-toast: 9999;
}

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  font-family: var(--font-vazir);
  -webkit-tap-highlight-color: transparent;
}

body {
  user-select: text;
  line-height: 1.55;
}

button,
[role="button"],
.daberna-card-wrapper,
.numring,
.badge {
  user-select: none;
}

input,
textarea,
select,
.code-display,
.share-url-input {
  user-select: text;
}

.field-error {
  display: block;
  color: #fca5a5;
  font-size: 0.78rem;
  line-height: 1.6;
  margin-top: 5px;
}

.input-field[aria-invalid="true"] {
  border-color: var(--color-danger);
  box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.14);
}

.bi {
  display: inline-block;
  line-height: 1;
  vertical-align: -0.125em;
}

button .bi,
a .bi {
  flex: 0 0 auto;
}

.daberna-swal {
  direction: rtl;
  border: 1px solid var(--color-line);
  border-radius: var(--radius-2xl) !important;
  box-shadow: var(--shadow-lg);
}

.daberna-swal .swal2-title,
.daberna-swal .swal2-html-container,
.daberna-swal .swal2-input {
  font-family: var(--font-vazir);
}

.daberna-swal .swal2-input {
  direction: ltr;
  color: var(--text-main);
  background: var(--color-ink);
  border-color: var(--color-line);
}

.daberna-swal-button {
  min-width: 108px;
  border-radius: var(--radius-md) !important;
  font-family: var(--font-vazir) !important;
  font-weight: 700 !important;
}

/* Base Body with Chipped Slate Felt Pattern */
body {
  background-color: var(--bg-main);
  background-image:
    radial-gradient(120% 80% at 50% -10%, color-mix(in srgb, var(--color-accent) 16%, transparent), transparent 55%),
    radial-gradient(100% 90% at 100% 110%, color-mix(in srgb, var(--color-felt) 10%, transparent), transparent 50%),
    linear-gradient(165deg, #0d1a2e 0%, #0a1220 60%, #0b1626 100%);
  background-attachment: fixed;
  color: var(--text-main);
  direction: rtl;
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  padding: max(12px, env(safe-area-inset-top)) max(12px, env(safe-area-inset-right)) max(16px, env(safe-area-inset-bottom)) max(12px, env(safe-area-inset-left));
  max-width: 480px;
  margin: 0 auto;
  overflow-x: hidden;
  box-sizing: border-box;
}

/* ===================================================
   APP HEADER & BRAND
   =================================================== */
.app-header {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 2px;
  border-bottom: 1px solid var(--color-line);
  margin-bottom: 16px;
  gap: 8px;
  box-sizing: border-box;
}

.app-brand {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
  text-decoration: none;
}

.app-brand-badge {
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  min-width: 46px;
  min-height: 46px;
  user-select: none;
}

.app-brand-logo {
  display: block;
  width: 44px;
  height: 44px;
  object-fit: contain;
}

.app-brand-info {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.app-title {
  font-size: 1.05rem;
  font-weight: 800;
  color: #ffffff;
  margin: 0;
  line-height: 1.25;
  white-space: nowrap;
}

.app-subtitle {
  font-size: 0.75rem;
  color: var(--color-mist);
  margin-top: 2px;
  white-space: nowrap;
}

@media (max-width: 440px) {
  .app-subtitle {
    display: none;
  }
}

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

.btn-sound-toggle {
  background: var(--color-surface2);
  border: 1px solid var(--color-line);
  color: var(--color-fog);
  border-radius: var(--radius-xl);
  width: 42px;
  height: 42px;
  min-width: 42px;
  min-height: 42px;
  font-size: 1.15rem;
  display: grid;
  place-items: center;
  cursor: pointer;
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
  box-sizing: border-box;
}

.btn-sound-toggle:hover {
  background: rgba(255, 255, 255, 0.1);
  border-color: rgba(255, 255, 255, 0.2);
  transform: translateY(-1px);
}

.btn-sound-toggle:active {
  transform: scale(0.94);
}

.btn-sound-toggle:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 2px;
}

/* Authentication Header Styles */
.auth-container {
  position: relative;
  display: flex;
  align-items: center;
}

.btn-auth {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: var(--color-surface2);
  border: 1px solid var(--color-line);
  color: var(--color-fog);
  border-radius: var(--radius-full);
  padding: 8px 12px;
  font-size: 0.78rem;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
  user-select: none;
  min-height: 42px;
  box-sizing: border-box;
}

.btn-auth:hover {
  background: rgba(255, 255, 255, 0.1);
  border-color: rgba(255, 255, 255, 0.25);
  color: #ffffff;
  transform: translateY(-1px);
}

.btn-auth:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 2px;
}

.auth-profile-wrapper {
  position: relative;
  display: flex;
  align-items: center;
}

.btn-profile-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: rgba(56, 189, 248, 0.12);
  border: 1px solid rgba(56, 189, 248, 0.35);
  border-radius: var(--radius-full);
  padding: 4px 10px 4px 6px;
  cursor: pointer;
  color: #ffffff;
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
  user-select: none;
  min-height: 40px;
  box-sizing: border-box;
}

.btn-profile-pill:hover,
.btn-profile-pill[aria-expanded="true"] {
  background: rgba(56, 189, 248, 0.22);
  border-color: #38bdf8;
  box-shadow: 0 0 16px rgba(56, 189, 248, 0.35);
}

.btn-profile-pill:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 2px;
}

.user-avatar-frame {
  position: relative;
  width: 28px;
  height: 28px;
  min-width: 28px;
  border-radius: 50%;
  overflow: hidden;
  display: grid;
  place-items: center;
  background: rgba(255, 255, 255, 0.1);
  border: 1.5px solid #38bdf8;
  flex-shrink: 0;
}

.user-avatar-frame .user-avatar {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  object-fit: cover;
}

.user-avatar-fallback {
  font-size: 0.85rem;
  line-height: 1;
}

.user-display-name {
  font-size: 0.78rem;
  font-weight: 700;
  color: #ffffff;
  max-width: 90px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  display: none; /* Hidden on mobile to prevent overflow! */
}

@media (min-width: 640px) {
  .user-display-name {
    display: inline-block;
  }
}

.header-burger-icon {
  font-size: 1.15rem;
  color: #38bdf8;
  line-height: 1;
}

.btn-drawer-burger {
  background: var(--color-surface2);
  border: 1px solid var(--color-line);
  color: var(--color-fog);
  border-radius: var(--radius-xl);
  width: 42px;
  height: 42px;
  min-width: 42px;
  min-height: 42px;
  font-size: 1.3rem;
  display: grid;
  place-items: center;
  cursor: pointer;
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
  box-sizing: border-box;
}

.btn-drawer-burger:hover,
.btn-drawer-burger[aria-expanded="true"] {
  background: rgba(56, 189, 248, 0.15);
  border-color: #38bdf8;
  color: #ffffff;
  transform: translateY(-1px);
  box-shadow: 0 0 12px rgba(56, 189, 248, 0.25);
}

.btn-drawer-burger:active {
  transform: scale(0.94);
}

/* Dropdown Menu */
.profile-dropdown {
  position: absolute;
  top: calc(100% + 8px);
  left: 0;
  min-width: 270px;
  background: var(--color-surface);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid var(--color-line);
  border-radius: var(--radius-2xl);
  box-shadow: 0 24px 48px -12px rgba(0, 0, 0, 0.8), 0 0 0 1px rgba(255, 255, 255, 0.05);
  padding: 16px;
  z-index: 1000;
  animation: dropdownFadeIn 0.2s cubic-bezier(0.16, 1, 0.3, 1);
}

@keyframes dropdownFadeIn {
  from {
    opacity: 0;
    transform: translateY(-8px) scale(0.96);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

.profile-card-header {
  display: flex;
  gap: 12px;
  align-items: center;
}

.profile-avatar-container {
  flex-shrink: 0;
}

.dropdown-user-avatar {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  object-fit: cover;
  border: 2px solid var(--color-accent);
  box-shadow: 0 4px 12px rgba(255, 77, 109, 0.35);
}

.dropdown-user-avatar-fallback {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--color-surface2);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.4rem;
  border: 2px solid var(--color-accent);
}

.profile-card-info {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
  overflow: hidden;
}

.profile-card-name {
  font-weight: 700;
  font-size: 0.92rem;
  color: #f8fafc;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.profile-card-email {
  font-size: 0.76rem;
  color: var(--color-mist);
  direction: ltr;
  text-align: right;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.profile-card-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 0.75rem;
  font-weight: 700;
  color: #34d399;
  background: rgba(16, 185, 129, 0.12);
  border: 1px solid rgba(16, 185, 129, 0.3);
  border-radius: var(--radius-full);
  padding: 2px 8px;
  width: fit-content;
  margin-top: 4px;
}

.profile-dropdown-divider {
  height: 1px;
  background: var(--color-line);
  margin: 12px 0 10px 0;
}

.btn-profile-logout {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 10px 14px;
  background: rgba(239, 68, 68, 0.12);
  border: 1px solid rgba(239, 68, 68, 0.32);
  border-radius: var(--radius-xl);
  color: #fca5a5;
  font-size: 0.84rem;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.2s ease;
  min-height: 44px;
}

.btn-profile-logout:hover {
  background: rgba(239, 68, 68, 0.22);
  border-color: #ef4444;
  color: #ffffff;
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(239, 68, 68, 0.25);
}

.btn-profile-logout-icon {
  font-size: 1rem;
}

.btn-profile-history {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 10px 14px;
  margin-bottom: 8px;
  border: 1px solid rgba(52, 211, 153, 0.35);
  border-radius: var(--radius-md);
  background: rgba(52, 211, 153, 0.12);
  color: #a7f3d0;
  font: inherit;
  font-weight: 700;
  cursor: pointer;
}

.account-access-panel {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 14px;
  padding: 18px;
  margin-bottom: 16px;
}

.create-room-confirm {
  width: 100%;
  min-height: 46px;
  white-space: nowrap;
}

.account-access-copy {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  gap: 12px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--color-line);
}

.account-access-copy > div {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.account-access-copy small {
  color: var(--color-mist);
  line-height: 1.65;
}

#selected-room-type {
  color: #ffffff;
  font-size: 1rem;
}

#account-quota-text {
  color: #cbd5e1;
  font-size: 0.82rem;
  font-weight: 700;
}

.guest-upgrade-hint {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  border: 1px solid rgba(245, 158, 11, 0.38);
  border-radius: var(--radius-lg);
  background: linear-gradient(135deg, rgba(245, 158, 11, 0.13), rgba(245, 158, 11, 0.05));
}

.guest-upgrade-icon {
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  color: #fbbf24;
  background: rgba(245, 158, 11, 0.15);
  font-size: 1.1rem;
}

.guest-upgrade-copy {
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.guest-upgrade-copy strong {
  color: #fde68a;
  font-size: 0.88rem;
}

.guest-upgrade-copy span {
  color: #cbd5e1;
  font-size: 0.78rem;
  line-height: 1.65;
}

.btn-google-upgrade {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  min-height: 42px;
  padding: 8px 14px;
  border: 1px solid rgba(255, 255, 255, 0.3);
  border-radius: var(--radius-md);
  background: #ffffff;
  color: #1f2937;
  font: inherit;
  font-size: 0.82rem;
  font-weight: 800;
  cursor: pointer;
  white-space: nowrap;
}

.btn-google-upgrade:hover {
  background: #f8fafc;
  transform: translateY(-1px);
}

.room-setup-actions {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  align-items: end;
  gap: 12px;
}

.account-tier-badge {
  flex: 0 0 auto;
  padding: 5px 10px;
  border-radius: var(--radius-full);
  color: #fde68a;
  background: rgba(245, 158, 11, 0.15);
  border: 1px solid rgba(245, 158, 11, 0.4);
  font-size: 0.78rem;
  font-weight: 800;
}

.account-tier-badge.registered {
  color: #a7f3d0;
  background: rgba(52, 211, 153, 0.14);
  border-color: rgba(52, 211, 153, 0.4);
}

.room-capacity-field {
  display: flex;
  flex-direction: column;
  gap: 5px;
  min-width: 150px;
  color: var(--color-mist);
  font-size: 0.78rem;
}

.room-capacity-field .input-field {
  min-height: 42px;
  padding: 7px 10px;
}

.account-history-content {
  max-width: 580px;
}

.account-history-list {
  display: grid;
  gap: 10px;
  max-height: min(60vh, 520px);
  overflow-y: auto;
}

.account-history-item {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 5px 12px;
  padding: 12px;
  border: 1px solid var(--color-line);
  border-radius: var(--radius-md);
  background: var(--color-surface2);
}

.account-history-item > span {
  color: var(--color-mist);
  font-size: 0.78rem;
}

.account-history-item .history-result {
  grid-column: 2;
  grid-row: 1 / span 2;
  align-self: center;
  color: #cbd5e1;
}

.account-history-item .history-result.won {
  color: #fbbf24;
  font-weight: 800;
}

@media (max-width: 640px) {
  .account-access-panel {
    grid-template-columns: 1fr;
    align-items: stretch;
    padding: 14px;
  }

  .guest-upgrade-hint {
    grid-template-columns: auto 1fr;
  }

  .btn-google-upgrade {
    grid-column: 1 / -1;
    width: 100%;
  }

  .room-setup-actions {
    grid-template-columns: 1fr;
  }

  .room-capacity-field {
    width: 100%;
  }

  .create-room-confirm {
    width: 100%;
  }
}

/* Site Disabled Panel */
.disabled-panel {
  text-align: center;
  padding: 36px 20px;
  border-color: rgba(239, 68, 68, 0.35);
  background: radial-gradient(circle at 50% 0%, rgba(239, 68, 68, 0.12) 0%, var(--color-surface) 70%);
}

.disabled-icon-wrap {
  width: 64px;
  height: 64px;
  margin: 0 auto 16px;
  border-radius: var(--radius-2xl);
  background: rgba(239, 68, 68, 0.15);
  border: 1px solid rgba(239, 68, 68, 0.35);
  display: grid;
  place-items: center;
  font-size: 2rem;
}

.disabled-title {
  color: #f87171;
  font-size: 1.2rem;
  font-weight: 800;
  margin-bottom: 8px;
}

.disabled-desc {
  color: var(--color-mist);
  font-size: 0.88rem;
  line-height: 1.6;
}

.view-section {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.hidden {
  display: none !important;
}

/* Mode Selector Cards (Home View) */
.mode-select-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  width: 100%;
}

.btn-mode-card {
  position: relative;
  overflow: hidden;
  border-radius: var(--radius-2xl);
  padding: 16px 14px;
  text-align: right;
  border: 1px solid var(--color-line);
  cursor: pointer;
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: 86px;
  box-sizing: border-box;
  user-select: none;
}

.btn-mode-card .diag {
  position: absolute;
  top: 30%;
  left: -20px;
  right: -20px;
  height: 32px;
  pointer-events: none;
}

.btn-mode-card.card-classic {
  background: var(--color-accent);
  color: #ffffff;
  border-color: rgba(255, 77, 109, 0.6);
  box-shadow: 0 12px 24px -10px rgba(255, 77, 109, 0.7);
}

.btn-mode-card.card-classic .diag {
  background: rgba(255, 255, 255, 0.12);
}

.btn-mode-card.card-classic:hover {
  transform: translateY(-2px);
  box-shadow: 0 16px 30px -10px rgba(255, 77, 109, 0.85);
  background: #ff3358;
}

.btn-mode-card.card-duel {
  background: var(--color-surface2);
  color: #ffffff;
  border-color: var(--color-line);
  box-shadow: 0 12px 24px -10px rgba(0, 0, 0, 0.5);
}

.btn-mode-card.card-duel .diag {
  background: rgba(255, 255, 255, 0.05);
}

.btn-mode-card.card-duel:hover {
  transform: translateY(-2px);
  border-color: rgba(255, 255, 255, 0.25);
  background: #223040;
}

.btn-mode-card:active {
  transform: scale(0.97);
}

.btn-mode-card.selected {
  border-color: #ffffff;
  box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.18), 0 16px 30px -10px rgba(0, 0, 0, 0.55);
  transform: translateY(-2px);
}

.btn-mode-card:disabled {
  cursor: wait;
  opacity: 0.7;
  transform: none;
}

.btn-mode-card:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 2px;
}

.mode-card-content {
  position: relative;
  z-index: 1;
}

.mode-card-title {
  font-size: 0.95rem;
  font-weight: 800;
  line-height: 1.3;
}

.mode-card-sub {
  font-size: 0.78rem;
  margin-top: 4px;
  font-weight: 600;
  opacity: 0.85;
}

/* Join By Code Panel */
.join-box {
  padding: 20px 18px;
}

.join-header {
  text-align: center;
  margin-bottom: 16px;
}

.join-title {
  font-size: 1.05rem;
  font-weight: 800;
  color: #ffffff;
  margin: 0;
}

.join-subtitle {
  font-size: 0.8rem;
  color: var(--color-mist);
  margin-top: 4px;
}

.input-room-code {
  text-align: center;
  letter-spacing: 5px;
  font-size: 1.25rem;
  font-weight: 800;
  direction: ltr;
}

.btn-join-submit {
  width: 100%;
  margin-top: 6px;
  background: #ffffff !important;
  color: var(--color-ink) !important;
  font-weight: 800 !important;
  font-size: 0.95rem !important;
  min-height: 48px;
  border-radius: var(--radius-xl);
  box-shadow: 0 10px 25px -5px rgba(255, 255, 255, 0.25);
  border: none;
  cursor: pointer;
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
  display: flex;
  align-items: center;
  justify-content: center;
}

.btn-join-submit:hover {
  background: #f1f5f9 !important;
  transform: translateY(-1px);
}

.btn-join-submit:active {
  transform: scale(0.98);
}

.btn-join-submit:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 2px;
}

/* Card Container & Form Styling */
.card-box {
  background-color: var(--bg-card);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-2xl);
  padding: 20px;
  box-shadow: var(--shadow-panel);
  display: flex;
  flex-direction: column;
  gap: 16px;
  position: relative;
}

.btn {
  background-color: var(--primary);
  background-image: linear-gradient(135deg, #f2554b 0%, #e03930 100%);
  color: white;
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: var(--radius-lg);
  padding: 13px 20px;
  font-size: 1.05rem;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
  width: 100%;
  text-align: center;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-shadow: var(--shadow-accent);
}

.btn:hover:not(:disabled) {
  background-image: linear-gradient(135deg, #fa635a 0%, #ea4438 100%);
  box-shadow: 0 14px 26px -8px rgba(240, 71, 60, 0.85);
  transform: translateY(-1px);
}

.btn:active:not(:disabled) {
  transform: translateY(1px) scale(0.99);
}

.btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  box-shadow: none;
}

.btn-secondary {
  background-color: var(--color-surface2);
  background-image: none;
  border: 1px solid var(--color-line);
  box-shadow: none;
  color: white;
}

.btn-secondary:hover:not(:disabled) {
  background-color: #233b5f;
  border-color: #3b5a8c;
  box-shadow: var(--shadow-sm);
  transform: translateY(-1px);
}

.btn-danger {
  background-color: var(--danger);
  background-image: linear-gradient(135deg, #ef4444 0%, #dc2626 100%);
  box-shadow: 0 8px 18px -4px rgba(239, 68, 68, 0.5);
}

.btn-warning {
  background-color: var(--warning);
  background-image: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);
  color: #0f172a;
  box-shadow: 0 8px 18px -4px rgba(245, 158, 11, 0.5);
}

.btn-outline {
  background-color: transparent;
  background-image: none;
  border: 1.5px solid var(--color-line);
  color: var(--text-main);
  box-shadow: none;
}

.btn-outline:hover:not(:disabled) {
  background-color: rgba(255, 255, 255, 0.06);
  border-color: var(--color-mist);
}

.btn-danger-outline {
  background-color: rgba(239, 68, 68, 0.12);
  background-image: none;
  border: 1px solid rgba(239, 68, 68, 0.4);
  color: #fca5a5;
  border-radius: var(--radius-md);
  cursor: pointer;
  font-family: inherit;
  font-weight: 700;
  transition: all 0.2s ease;
  width: auto;
  min-height: 44px;
  padding: 8px 16px;
}

.btn-danger-outline:hover, .btn-danger-outline:active {
  background-color: var(--danger);
  color: white;
  border-color: var(--danger);
}

#confetti-canvas {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  pointer-events: none;
  z-index: 99999;
  display: none;
}

.form-group {
  display: flex;
  flex-direction: column;
  gap: 8px;
  text-align: right;
}

.form-label {
  font-size: 0.95rem;
  color: var(--text-muted);
}

.input-field {
  background-color: var(--color-ink);
  border: 1px solid var(--color-line);
  border-radius: var(--radius-md);
  padding: 12px 14px;
  color: #ffffff;
  font-size: 1.1rem;
  text-align: center;
  direction: ltr;
  min-height: 44px;
  transition: all 0.2s ease;
}

.input-field:focus,
.input-field:focus-visible {
  outline: none;
  border-color: var(--color-accent);
  box-shadow: 0 0 0 2px rgba(240, 71, 60, 0.35);
}

/* Counter Control */
.counter-control {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  background-color: var(--color-ink);
  border: 1px solid var(--color-line);
  border-radius: var(--radius-lg);
  padding: 8px 12px;
}

.btn-counter {
  width: 44px;
  height: 44px;
  border-radius: var(--radius-md);
  background-color: var(--color-surface2);
  color: white;
  font-size: 1.4rem;
  font-weight: 700;
  border: 1px solid var(--color-line);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.2s ease;
  user-select: none;
}

.btn-counter:hover:not(:disabled) {
  background-color: #274068;
  border-color: #3b5a8c;
  transform: scale(1.04);
}

.btn-counter:active:not(:disabled) {
  transform: scale(0.96);
}

.counter-value {
  font-size: 1.4rem;
  font-weight: 800;
  min-width: 40px;
  text-align: center;
  color: #ffffff;
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum";
}

/* Room Code Display */
.code-display {
  font-size: 2.2rem;
  font-weight: 900;
  letter-spacing: 6px;
  color: #38bdf8;
  direction: ltr;
  text-align: center;
  background-color: #0f172a;
  padding: 12px;
  border-radius: 12px;
  border: 2px dashed #38bdf8;
}

/* QR Code Display */
#qrcode {
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: white;
  padding: 12px;
  border-radius: 12px;
  margin: 0 auto;
}

/* Large Current Number Display */
.current-number-box {
  position: relative;
  background: linear-gradient(135deg, #312e81 0%, #1e1b4b 100%);
  border: 2px solid #6366f1;
  border-radius: 16px;
  padding: 20px;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
}

.current-number-title {
  font-size: 1rem;
  color: #a5b4fc;
}

.current-number-val {
  font-size: 4rem;
  font-weight: 900;
  color: #ffffff;
  line-height: 1;
  text-shadow: 0 0 20px rgba(99, 102, 241, 0.8);
}

/* Called Numbers History */
.called-numbers-history {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  gap: 6px;
  width: 100%;
  min-width: 0;
  overflow-x: auto;
  overflow-y: hidden;
  padding: 8px 8px 6px;
  background-color: #0f172a;
  border-radius: 10px;
  direction: ltr;
  overscroll-behavior-x: contain;
  scroll-behavior: smooth;
  scrollbar-width: thin;
  scrollbar-color: color-mix(in srgb, var(--color-accent) 72%, var(--color-gold)) rgba(255, 255, 255, 0.06);
  -webkit-overflow-scrolling: touch;
}

.called-numbers-history::-webkit-scrollbar {
  height: 4px;
}

.called-numbers-history::-webkit-scrollbar-track {
  background: rgba(255, 255, 255, 0.05);
  border-radius: var(--radius-full);
}

.called-numbers-history::-webkit-scrollbar-thumb {
  background: linear-gradient(90deg, var(--color-accent), var(--color-gold));
  border-radius: var(--radius-full);
}

.called-numbers-history::-webkit-scrollbar-thumb:hover {
  background: linear-gradient(90deg, var(--color-accent-hover), #fbbf24);
}

.num-badge {
  flex: 0 0 auto;
  background-color: var(--bg-card);
  color: var(--text-main);
  border: 1px solid var(--border-color);
  border-radius: 6px;
  padding: 4px 8px;
  font-size: 0.9rem;
  font-weight: bold;
  opacity: max(0.55, calc(1 - (var(--history-index, 0) * 0.055)));
  transition: transform 180ms ease, opacity 180ms ease, background 180ms ease, border-color 180ms ease;
}

.num-badge.latest {
  background: linear-gradient(135deg, var(--primary), #22d3ee);
  color: white;
  border-color: #67e8f9;
  box-shadow: 0 0 14px rgba(34, 211, 238, 0.42);
  transform: scale(1.08);
  animation: history-badge-arrive 260ms cubic-bezier(0.16, 1, 0.3, 1) both;
}

.num-badge.recent-1,
.num-badge.recent-2 {
  opacity: 1;
}

@keyframes popIn {
  0% { transform: scale(0.5); opacity: 0; }
  100% { transform: scale(1); opacity: 1; }
}

@keyframes pulse {
  0% { transform: scale(1); }
  100% { transform: scale(1.05); }
}

@keyframes pulseMain {
  0% { box-shadow: 0 0 20px rgba(250, 204, 21, 0.4); }
  100% { box-shadow: 0 0 40px rgba(250, 204, 21, 0.8); }
}

/* ===================================================
   ROUND FINAL PODIUM & SCOREBOARD
   =================================================== */
.round-podium-container {
  display: flex;
  justify-content: center;
  align-items: flex-end;
  gap: 10px;
  margin: 16px 0 10px 0;
  direction: ltr; /* keep 2 - 1 - 3 visual order */
}

.podium-col {
  display: flex;
  flex-direction: column;
  align-items: center;
  flex: 1;
  max-width: 105px;
}

.podium-avatar {
  font-size: 1.6rem;
  margin-bottom: 2px;
  filter: drop-shadow(0 2px 6px rgba(0,0,0,0.4));
}

.podium-col.rank-1 .podium-avatar {
  font-size: 2.1rem;
  animation: bounceSlow 1.5s infinite alternate;
}

@keyframes bounceSlow {
  0% { transform: translateY(0); }
  100% { transform: translateY(-5px); }
}

.podium-player-name {
  font-size: 0.8rem;
  font-weight: bold;
  color: #ffffff;
  text-align: center;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 95px;
  margin-bottom: 2px;
}

.podium-player-score {
  font-size: 0.78rem;
  font-weight: 800;
  color: #fef08a;
  margin-bottom: 4px;
}

.podium-pillar {
  width: 100%;
  border-radius: 8px 8px 0 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.1rem;
  font-weight: 900;
  color: #ffffff;
  box-shadow: 0 4px 12px rgba(0,0,0,0.3);
}

.podium-col.rank-1 .podium-pillar {
  height: 95px;
  background: linear-gradient(180deg, #f59e0b 0%, #b45309 100%);
  border: 1px solid #fde047;
}

.podium-col.rank-2 .podium-pillar {
  height: 72px;
  background: linear-gradient(180deg, #94a3b8 0%, #475569 100%);
  border: 1px solid #e2e8f0;
}

.podium-col.rank-3 .podium-pillar {
  height: 52px;
  background: linear-gradient(180deg, #b45309 0%, #78350f 100%);
  border: 1px solid #d97706;
}

/* Round Scoreboard Mini-Table */
.round-scoreboard {
  margin-top: 14px;
  background: rgba(15, 23, 42, 0.6);
  border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, 0.15);
  padding: 10px;
  direction: rtl;
}

.round-scoreboard-title {
  font-size: 0.85rem;
  font-weight: bold;
  color: #cbd5e1;
  text-align: center;
  margin-bottom: 8px;
}

.round-scoreboard-list {
  display: flex;
  flex-direction: column;
  gap: 4px;
  max-height: 120px;
  overflow-y: auto;
  overflow-x: hidden;
  scrollbar-width: thin;
  scrollbar-color: rgba(245, 158, 11, 0.4) transparent;
}

.round-scoreboard-list::-webkit-scrollbar {
  width: 4px;
}

.round-scoreboard-list::-webkit-scrollbar-thumb {
  background: rgba(245, 158, 11, 0.4);
  border-radius: 4px;
}

.round-scoreboard-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: rgba(30, 41, 59, 0.7);
  padding: 5px 8px;
  border-radius: 6px;
  font-size: 0.8rem;
  border: 1px solid rgba(51, 65, 85, 0.5);
}

.round-scoreboard-row.rank-1 {
  border-color: rgba(245, 158, 11, 0.6);
  background: rgba(245, 158, 11, 0.15);
}

.round-scoreboard-row.rank-2 {
  border-color: rgba(203, 213, 225, 0.5);
  background: rgba(203, 213, 225, 0.12);
}

.round-scoreboard-row.rank-3 {
  border-color: rgba(217, 119, 6, 0.5);
  background: rgba(217, 119, 6, 0.12);
}

.round-row-left {
  display: flex;
  align-items: center;
  gap: 8px;
}

.round-row-rank {
  font-weight: 800;
  width: 20px;
  text-align: center;
}

.round-row-name {
  font-weight: 700;
  color: #fff;
}

.round-row-score {
  font-weight: 800;
  color: #fde047;
}

/* ===================================================
   WINNER ACTIONS (PLAY AGAIN / NEXT ROUND)
   =================================================== */
.winner-actions-bar {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px dashed rgba(255, 255, 255, 0.2);
}

.btn-next-round {
  background: linear-gradient(135deg, #10b981 0%, #059669 100%) !important;
  color: #ffffff !important;
  border: 1px solid #34d399 !important;
  font-size: 1.05rem !important;
  font-weight: 800 !important;
  padding: 12px 18px !important;
  border-radius: 12px !important;
  box-shadow: 0 4px 14px rgba(16, 185, 129, 0.4);
  cursor: pointer;
  transition: all 0.2s ease;
}

.btn-next-round:hover {
  background: linear-gradient(135deg, #059669 0%, #047857 100%) !important;
  transform: translateY(-2px);
  box-shadow: 0 6px 18px rgba(16, 185, 129, 0.6);
}

.winner-waiting-pill {
  background: rgba(15, 23, 42, 0.6);
  border: 1px solid rgba(255, 255, 255, 0.2);
  color: #fef08a;
  padding: 10px 16px;
  border-radius: 10px;
  font-size: 0.9rem;
  font-weight: 700;
  text-align: center;
  animation: pulse 1.8s infinite alternate;
}

.player-list-badge {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  background-color: #0f172a;
  border-radius: 8px;
  font-size: 0.9rem;
}

.dot-online {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background-color: var(--secondary);
}

.dot-offline {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background-color: var(--danger);
}

/* Settings Toggle Switch & Professional Descriptions */
.settings-group {
  display: flex;
  flex-direction: column;
  gap: 12px;
  background-color: #0f172a;
  padding: 14px;
  border-radius: 14px;
  border: 1px solid var(--border-color);
}

.settings-group-title {
  font-size: 0.92rem;
  font-weight: bold;
  color: #a5b4fc;
  text-align: right;
  padding: 0 2px;
}

.setting-card {
  background-color: var(--bg-card);
  border: 1px solid var(--border-color);
  border-radius: 12px;
  padding: 12px 14px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  transition: all 0.2s ease;
}

.setting-card:hover {
  border-color: #475569;
}

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

.setting-info {
  display: flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  user-select: none;
}

.setting-icon {
  font-size: 1.15rem;
}

.setting-title {
  font-size: 0.92rem;
  font-weight: 700;
  color: var(--text-main);
  cursor: pointer;
}

.toggle-switch-wrapper {
  position: relative;
  display: inline-block;
  width: 46px;
  height: 25px;
  cursor: pointer;
  flex-shrink: 0;
  user-select: none;
}

.toggle-switch-wrapper input {
  position: absolute;
  opacity: 0;
  cursor: pointer;
  height: 0;
  width: 0;
}

.toggle-slider {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #334155;
  border-radius: 24px;
  transition: all 0.3s ease;
}

.toggle-slider:before {
  position: absolute;
  content: "";
  height: 19px;
  width: 19px;
  left: 3px;
  bottom: 3px;
  background-color: white;
  border-radius: 50%;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
}

.toggle-switch-wrapper input:checked + .toggle-slider {
  background-color: var(--secondary);
}

.toggle-switch-wrapper input:checked + .toggle-slider:before {
  transform: translateX(21px);
}

.setting-description {
  display: flex;
  flex-direction: column;
  gap: 6px;
  border-top: 1px solid rgba(51, 65, 85, 0.5);
  padding-top: 8px;
  margin-top: 2px;
}

.desc-item {
  display: flex;
  align-items: flex-start;
  gap: 6px;
  line-height: 1.5;
}

.desc-badge {
  font-size: 0.72rem;
  font-weight: bold;
  padding: 1px 6px;
  border-radius: 4px;
  flex-shrink: 0;
  margin-top: 2px;
}

.desc-badge.badge-on {
  background-color: rgba(16, 185, 129, 0.15);
  color: #34d399;
  border: 1px solid rgba(16, 185, 129, 0.3);
}

.desc-badge.badge-off {
  background-color: rgba(148, 163, 184, 0.12);
  color: #94a3b8;
  border: 1px solid rgba(148, 163, 184, 0.25);
}

.desc-text {
  color: var(--text-muted);
  font-size: 0.81rem;
}

/* Auto Call & Next Number Host Action Row */
.host-call-actions-row {
  display: flex;
  align-items: stretch;
  gap: 10px;
  width: 100%;
  margin: 10px 0 6px;
}

.host-call-actions-row .btn-next-number-cta {
  flex: 1;
  min-height: 48px;
  font-size: 1.05rem;
  font-weight: 700;
  white-space: nowrap;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin: 0;
}

.host-call-actions-row .host-autocall-toggle-btn {
  flex-shrink: 0;
  width: auto;
  min-width: 125px;
  min-height: 48px;
  padding: 0 14px;
  font-size: 0.82rem;
  font-weight: 600;
  white-space: nowrap;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  margin: 0;
  border-radius: var(--radius-md, 12px);
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.15);
  color: #cbd5e1;
  transition: all 0.2s ease;
}

.host-call-actions-row .host-autocall-toggle-btn:hover {
  background: rgba(255, 255, 255, 0.1);
  border-color: rgba(255, 255, 255, 0.3);
  color: #fff;
}

.btn-autocall-active {
  background-color: rgba(16, 185, 129, 0.18) !important;
  border-color: #10b981 !important;
  color: #34d399 !important;
  box-shadow: 0 0 12px rgba(16, 185, 129, 0.25);
}

@media (max-width: 360px) {
  .host-call-actions-row {
    gap: 6px;
  }
  .host-call-actions-row .btn-next-number-cta {
    font-size: 0.95rem;
    padding: 0 8px;
  }
  .host-call-actions-row .host-autocall-toggle-btn {
    min-width: 105px;
    padding: 0 8px;
    font-size: 0.78rem;
  }
}

/* Interactive Cell Enhancements */
.daberna-cell.clickable {
  cursor: pointer;
  position: relative;
}

.daberna-cell.clickable:active {
  transform: scale(0.92);
}

.daberna-cell.pending-target {
  border: 2px solid #f59e0b !important;
  background-color: rgba(245, 158, 11, 0.15) !important;
  color: #fbbf24 !important;
  animation: targetPulse 0.8s infinite alternate !important;
}

.daberna-cell.wrong-click {
  animation: shake 0.35s cubic-bezier(.36,.07,.19,.97) both;
  border-color: var(--danger) !important;
}

@keyframes targetPulse {
  0% { transform: scale(1); box-shadow: 0 0 0 0 rgba(245, 158, 11, 0.4); }
  100% { transform: scale(1.08); box-shadow: 0 0 10px 3px rgba(245, 158, 11, 0.6); }
}

@keyframes shake {
  10%, 90% { transform: translate3d(-1px, 0, 0); }
  20%, 80% { transform: translate3d(2px, 0, 0); }
  30%, 50%, 70% { transform: translate3d(-3px, 0, 0); }
  40%, 60% { transform: translate3d(3px, 0, 0); }
}

/* ===================================================
   USER GUIDE STYLING (HOME VIEW)
   =================================================== */
.guide-card {
  padding: 16px 18px;
}

.guide-header {
  display: flex;
  width: 100%;
  justify-content: space-between;
  align-items: center;
  border: 0;
  background: transparent;
  color: inherit;
  font: inherit;
  text-align: inherit;
  cursor: pointer;
  padding: 4px 0;
  user-select: none;
}

.guide-title {
  font-size: 0.95rem;
  font-weight: 800;
  color: #ffffff;
  display: flex;
  align-items: center;
  gap: 8px;
}

.guide-chevron {
  font-size: 0.75rem;
  color: var(--color-mist);
  transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}

.guide-chevron.collapsed {
  transform: rotate(90deg);
}

.guide-content {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 14px;
  border-top: 1px solid var(--color-line);
  padding-top: 14px;
  transition: all 0.25s ease;
}

.guide-content.hidden {
  display: none !important;
}

.guide-step {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  background-color: var(--color-surface2);
  padding: 12px 14px;
  border-radius: var(--radius-xl);
  border: 1px solid var(--color-line);
}

.step-num {
  width: 28px;
  height: 28px;
  min-width: 28px;
  min-height: 28px;
  border-radius: var(--radius-lg);
  background: rgba(255, 77, 109, 0.15);
  color: var(--color-accent);
  border: 1px solid rgba(255, 77, 109, 0.35);
  display: grid;
  place-items: center;
  font-weight: 800;
  font-size: 0.9rem;
  flex-shrink: 0;
}

.step-body {
  font-size: 0.88rem;
  line-height: 1.6;
  color: var(--color-fog);
  flex: 1;
}

.step-body strong {
  color: #ffffff;
  font-weight: 800;
}

.step-body p {
  color: var(--color-mist);
  font-size: 0.82rem;
  margin-top: 4px;
  margin-bottom: 0;
}

.guide-prizes {
  list-style: none;
  margin-top: 8px;
  margin-bottom: 0;
  padding: 8px 12px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  background-color: var(--color-ink);
  border-radius: var(--radius-lg);
  border: 1px solid var(--color-line);
}

.guide-prizes li {
  font-size: 0.8rem;
  color: var(--color-fog);
}

.guide-prizes li b {
  color: var(--color-gold);
}

/* ===================================================
   SHARE BOX STYLING (HOST VIEW)
   =================================================== */
.share-box {
  background-color: #0f172a;
  border: 1px solid var(--border-color);
  border-radius: 12px;
  padding: 14px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 4px;
}

.share-label {
  font-size: 0.88rem;
  font-weight: 600;
  color: var(--text-muted);
  text-align: right;
}

.share-input-group {
  display: flex;
  gap: 8px;
  align-items: center;
}

.share-url-input {
  flex: 1;
  background-color: var(--bg-card);
  border: 1px solid var(--border-color);
  border-radius: 8px;
  padding: 10px 12px;
  color: #38bdf8;
  font-size: 0.86rem;
  direction: ltr;
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
  font-family: monospace;
}

.share-url-input:focus {
  outline: none;
  border-color: var(--primary);
}

.btn-copy {
  background-color: var(--primary);
  color: white;
  border: none;
  border-radius: 8px;
  padding: 10px 14px;
  font-size: 0.88rem;
  font-weight: bold;
  cursor: pointer;
  flex-shrink: 0;
  transition: all 0.2s ease;
  white-space: nowrap;
}

.btn-copy:hover {
  background-color: var(--primary-hover);
}

.btn-copy:active {
  transform: scale(0.96);
}

.share-actions-row {
  display: flex;
  gap: 8px;
  align-items: center;
  flex-wrap: wrap;
}

.btn-share-btn {
  border: none;
  border-radius: 8px;
  padding: 9px 12px;
  font-size: 0.88rem;
  font-weight: bold;
  cursor: pointer;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  transition: all 0.2s ease;
  color: white !important;
}

.btn-share-btn:active {
  transform: scale(0.96);
}

.btn-share-native {
  flex: 2;
  min-width: 140px;
  background-color: #4f46e5;
}

.btn-share-native:hover {
  background-color: #4338ca;
}

.btn-whatsapp {
  flex: 1;
  min-width: 70px;
  background-color: #16a34a;
}

.btn-whatsapp:hover {
  background-color: #15803d;
}

.btn-telegram {
  flex: 1;
  min-width: 70px;
  background-color: #0284c7;
}

.btn-telegram:hover {
  background-color: #0369a1;
}

.share-toast {
  position: fixed;
  bottom: 24px;
  left: 50%;
  transform: translateX(-50%);
  background-color: var(--color-surface2);
  color: #34d399;
  border: 1px solid rgba(16, 185, 129, 0.4);
  padding: 10px 20px;
  border-radius: var(--radius-full);
  font-size: 0.88rem;
  font-weight: 700;
  white-space: nowrap;
  box-shadow: 0 16px 32px rgba(0, 0, 0, 0.6), 0 0 20px rgba(16, 185, 129, 0.2);
  z-index: 10000;
  text-align: center;
  animation: daberna-pop 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}

/* ===================================================
   APP FOOTER
   =================================================== */
.app-footer {
  width: 100%;
  margin-top: 36px;
  padding: 16px 8px max(16px, env(safe-area-inset-bottom)) 8px;
  border-top: 1px solid var(--color-line);
  text-align: center;
}

.footer-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
}

.footer-copy {
  font-size: 0.78rem;
  color: var(--color-mist);
}

.footer-version {
  font-size: 0.72rem;
  background-color: var(--color-surface2);
  color: var(--color-fog);
  border: 1px solid var(--color-line);
  padding: 3px 12px;
  border-radius: var(--radius-full);
  display: inline-block;
  font-weight: 700;
  letter-spacing: 0.5px;
}

/* ===================================================
   SPEED & COMBO MICRO-HUD & MECHANICS
   =================================================== */
.speed-hud-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: nowrap;
  gap: 8px;
  background: rgba(30, 41, 59, 0.85);
  backdrop-filter: blur(8px);
  border: 1px solid var(--border-color);
  border-radius: 14px;
  padding: 6px 14px;
  min-height: 44px;
  max-height: 44px;
  box-sizing: border-box;
  overflow: hidden;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
}

.speed-hud-item {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 0.95rem;
}

.hud-label {
  color: var(--text-muted);
  font-weight: 500;
}

.hud-val {
  font-weight: 800;
  color: #38bdf8;
  font-size: 1.1rem;
}

.combo-badge {
  color: #94a3b8;
  display: inline-block;
  transition: color 240ms ease-out, text-shadow 240ms ease-out, transform 240ms ease-out, opacity 240ms ease-out;
}

.combo-badge.active {
  color: #06b6d4;
  text-shadow: 0 0 8px rgba(6, 182, 212, 0.45);
}

.combo-badge.combo-tier-1 {
  color: #06b6d4 !important;
  text-shadow: 0 0 8px rgba(6, 182, 212, 0.45) !important;
}

.combo-badge.combo-tier-2 {
  color: #c084fc !important;
  text-shadow: 0 0 12px rgba(168, 85, 247, 0.65) !important;
  animation: pulse-purple 1.1s infinite alternate ease-in-out;
}

.combo-badge.combo-tier-3 {
  color: #f59e0b !important;
  text-shadow: 0 0 14px rgba(245, 158, 11, 0.75), 0 0 22px rgba(239, 68, 68, 0.5) !important;
  animation: pulse-fire 0.85s infinite alternate ease-in-out;
}

.combo-badge.combo-breaking {
  opacity: 0.35;
  transform: scale(0.9);
  transition: all 240ms ease-out !important;
}

@keyframes pulse-purple {
  0% { transform: scale(1); filter: drop-shadow(0 0 2px #a855f7); }
  100% { transform: scale(1.12); filter: drop-shadow(0 0 8px #c084fc); }
}

@keyframes pulse-fire {
  0% { transform: scale(1); filter: drop-shadow(0 0 2px #f97316); }
  100% { transform: scale(1.15); filter: drop-shadow(0 0 8px #ef4444); }
}

.btn-rules-pill {
  background: rgba(99, 102, 241, 0.15);
  border: 1px solid rgba(99, 102, 241, 0.4);
  color: #c7d2fe;
  padding: 4px 10px;
  border-radius: 20px;
  font-size: 0.82rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s ease;
}

.btn-rules-pill:hover {
  background: rgba(99, 102, 241, 0.3);
  transform: scale(1.03);
}

/* ===================================================
   SHARED MODALS (LEADERBOARD, ROOM PREVIEW, QUICK RULES)
   =================================================== */
.modal-backdrop,
.quick-rules-box {
  position: fixed !important;
  inset: 0 !important;
  width: 100vw !important;
  height: 100vh !important;
  background-color: rgba(13, 18, 23, 0.78) !important;
  backdrop-filter: blur(12px) !important;
  -webkit-backdrop-filter: blur(12px) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  z-index: 9999 !important;
  padding: 16px !important;
  margin: 0 !important;
  box-sizing: border-box !important;
  animation: modalFadeIn 0.2s cubic-bezier(0.16, 1, 0.3, 1);
}

.modal-backdrop.hidden,
.quick-rules-box.hidden {
  display: none !important;
}

@keyframes modalFadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

.modal-dialog,
.quick-rules-content {
  width: 100%;
  max-width: 440px;
  max-height: 88vh;
  overflow-y: auto;
  background-color: var(--color-surface);
  border: 1px solid var(--color-line);
  border-radius: var(--radius-2xl);
  box-shadow: 0 30px 60px -25px rgba(0, 0, 0, 0.9), 0 0 0 1px rgba(255, 255, 255, 0.05);
  padding: 20px;
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
  animation: modalPopIn 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}

@keyframes modalPopIn {
  from {
    opacity: 0;
    transform: translateY(12px) scale(0.97);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

.modal-header,
.quick-rules-title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-bottom: 12px;
  margin-bottom: 14px;
  border-bottom: 1px solid var(--color-line);
  color: #ffffff;
  font-size: 1rem;
  font-weight: 800;
}

.btn-close-modal,
.btn-close-rules {
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  min-width: 36px;
  min-height: 36px;
  border-radius: var(--radius-lg);
  background: var(--color-surface2);
  border: 1px solid var(--color-line);
  color: var(--color-mist);
  font-size: 1.1rem;
  cursor: pointer;
  transition: all 0.15s ease;
  line-height: 1;
}

.btn-close-modal:hover,
.btn-close-rules:hover {
  background: rgba(255, 255, 255, 0.1);
  color: #ffffff;
  border-color: rgba(255, 255, 255, 0.2);
}

.quick-rules-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
  font-size: 0.86rem;
  color: var(--color-fog);
  line-height: 1.6;
}

.quick-rules-list li {
  background: var(--color-surface2);
  border: 1px solid var(--color-line);
  border-radius: var(--radius-lg);
  padding: 10px 12px;
}

.quick-rules-list li b {
  color: var(--color-gold);
}

/* Top Speed Announcement Sticky Floating Pill Toast */
.speed-top-banner {
  position: fixed;
  top: max(16px, env(safe-area-inset-top, 16px));
  left: 50%;
  transform: translateX(-50%);
  z-index: 9999;
  width: max-content;
  max-width: min(92vw, 420px);
  padding: 9px 18px;
  border-radius: 9999px;
  background: rgba(15, 23, 42, 0.94);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border: 1.5px solid rgba(245, 158, 11, 0.75);
  color: #fef08a;
  text-align: center;
  font-weight: 800;
  font-size: 0.9rem;
  line-height: 1.35;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.6), 0 0 22px rgba(245, 158, 11, 0.35);
  pointer-events: none;
  animation: slideInStickyPill 0.32s cubic-bezier(0.16, 1, 0.3, 1) forwards;
  transition: opacity 0.28s ease, transform 0.28s ease;
}

.speed-top-banner.speed-pill-hiding {
  opacity: 0;
  transform: translate(-50%, -12px);
}

.speed-top-banner.hidden {
  display: none !important;
}

@keyframes slideInStickyPill {
  from {
    opacity: 0;
    transform: translate(-50%, -18px) scale(0.95);
  }
  to {
    opacity: 1;
    transform: translate(-50%, 0) scale(1);
  }
}

/* Countdown Bar with Zero-CLS reserved space */
.countdown-container {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-top: 4px;
  min-height: 38px;
  transition: opacity 0.25s ease;
}

.countdown-container.hidden {
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
  display: flex !important;
}

.countdown-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 0.85rem;
}

.player-mode-hint {
  color: #94a3b8;
  font-weight: 500;
}

.countdown-seconds {
  font-weight: 800;
  color: #38bdf8;
  font-family: monospace;
}

.countdown-bar-wrapper {
  width: 100%;
  height: 6px;
  background-color: rgba(255, 255, 255, 0.1);
  border-radius: 4px;
  overflow: hidden;
}

.countdown-bar {
  height: 100%;
  width: 100%;
  background: linear-gradient(90deg, #10b981, #06b6d4);
  border-radius: 4px;
  transition: width 0.1s linear, background-color 0.2s ease;
}

.countdown-bar.warning {
  background: linear-gradient(90deg, #f59e0b, #eab308);
}

.countdown-bar.danger {
  background: linear-gradient(90deg, #ef4444, #dc2626);
}

/* Host Speed List - Single-line horizontal ticker */
.host-speed-box {
  background: rgba(15, 23, 42, 0.6);
  border: 1px solid var(--border-color);
  border-radius: 12px;
  padding: 8px 12px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  order: 6;
}

.host-speed-list {
  display: flex;
  flex-wrap: nowrap;
  gap: 6px;
  overflow-x: auto;
  overflow-y: hidden;
  padding-bottom: 4px;
  scrollbar-width: thin;
  -webkit-overflow-scrolling: touch;
}

#host-player-panel {
  order: 5;
}

.host-speed-chip {
  flex-shrink: 0;
  white-space: nowrap;
  background: rgba(30, 41, 59, 0.9);
  border: 1px solid rgba(56, 189, 248, 0.3);
  padding: 4px 10px;
  border-radius: 16px;
  font-size: 0.82rem;
  color: #f1f5f9;
  display: flex;
  align-items: center;
  gap: 4px;
}

.host-speed-chip.first {
  border-color: #f59e0b;
  background: rgba(245, 158, 11, 0.15);
  color: #fef08a;
  font-weight: 700;
}

/* Floating score on card cell */
.score-floating-tag {
  position: absolute;
  top: -12px;
  right: -8px;
  background: #10b981;
  color: white;
  font-size: 0.72rem;
  font-weight: 800;
  padding: 2px 5px;
  border-radius: 8px;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.4);
  pointer-events: none;
  animation: floatFade 1.2s forwards ease-out;
  z-index: 10;
}

@keyframes floatFade {
  0% { opacity: 0; transform: translateY(4px) scale(0.8); }
  25% { opacity: 1; transform: translateY(-4px) scale(1.1); }
  80% { opacity: 1; transform: translateY(-12px) scale(1); }
  100% { opacity: 0; transform: translateY(-20px) scale(0.9); }
}

/* ===================================================
   GOLDEN NUMBER STYLING
   =================================================== */
.golden-banner-badge {
  position: absolute;
  top: -12px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 10;
  background: linear-gradient(135deg, #f59e0b, #eab308, #fbbf24);
  color: #0f172a;
  font-weight: 800;
  font-size: 0.82rem;
  padding: 3px 14px;
  border-radius: 20px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 0 16px rgba(245, 158, 11, 0.6);
  animation: pulse-gold-badge 1.8s infinite alternate ease-in-out;
  white-space: nowrap;
}

@keyframes pulse-gold-badge {
  0% { transform: translateX(-50%) scale(0.98); box-shadow: 0 0 10px rgba(245, 158, 11, 0.4); }
  100% { transform: translateX(-50%) scale(1.04); box-shadow: 0 0 20px rgba(245, 158, 11, 0.85); }
}

.current-number-val.golden {
  color: #fef08a !important;
  border-color: #f59e0b !important;
  box-shadow: 0 0 28px rgba(245, 158, 11, 0.6) !important;
  animation: glow-golden-box 1.2s infinite alternate ease-in-out !important;
}

@keyframes glow-golden-box {
  0% { text-shadow: 0 0 10px #f59e0b; border-color: #f59e0b; }
  100% { text-shadow: 0 0 25px #fbbf24, 0 0 40px #eab308; border-color: #fbbf24; }
}

.score-floating-tag.golden {
  background: linear-gradient(135deg, #f59e0b, #eab308);
  color: #0f172a;
  font-weight: 900;
  box-shadow: 0 0 14px rgba(245, 158, 11, 0.8);
}

.speed-top-banner.golden {
  background: linear-gradient(135deg, rgba(30, 27, 75, 0.96), rgba(15, 23, 42, 0.96));
  border-color: #f59e0b;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.65), 0 0 28px rgba(245, 158, 11, 0.55);
  color: #fef08a;
}

/* ===================================================
   DUEL 1V1 MODE STYLING
   =================================================== */
.btn-duel {
  background: linear-gradient(135deg, #e11d48, #be123c);
  color: #fff;
  box-shadow: 0 4px 14px rgba(225, 29, 72, 0.35);
  font-weight: 700;
  border: 1px solid rgba(255, 255, 255, 0.15);
}

.btn-duel:hover {
  background: linear-gradient(135deg, #be123c, #9f1239);
  box-shadow: 0 6px 18px rgba(225, 29, 72, 0.5);
}

.duel-battle-hud {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: linear-gradient(135deg, #1e1b4b 0%, #31103f 100%);
  border: 1px solid #7c3aed;
  border-radius: 12px;
  padding: 10px 14px;
  margin: 10px 0 6px 0;
  box-shadow: 0 4px 16px rgba(124, 58, 237, 0.25);
  animation: popIn 0.3s ease;
}

.duel-player-box {
  display: flex;
  flex-direction: column;
  align-items: center;
  min-width: 80px;
}

.duel-player-box.left .duel-p-name {
  color: #38bdf8;
}

.duel-player-box.right .duel-p-name {
  color: #f43f5e;
}

.duel-p-name {
  font-size: 0.82rem;
  font-weight: 700;
  max-width: 100px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.duel-p-score {
  font-size: 1.35rem;
  font-weight: 900;
  color: #f8fafc;
}

.duel-center-box {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
}

.duel-vs-text {
  font-size: 0.88rem;
  font-weight: 800;
  color: #fbbf24;
  letter-spacing: 0.5px;
}

.duel-target-hint {
  font-size: 0.72rem;
  color: #94a3b8;
}

.duel-tug-wrapper {
  position: relative;
  width: 100%;
  height: 10px;
  background-color: #f43f5e;
  border-radius: 6px;
  overflow: hidden;
  margin-bottom: 10px;
  border: 1px solid rgba(255, 255, 255, 0.15);
  box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.5);
  transition: box-shadow 0.35s ease, border-color 0.35s ease, transform 0.25s ease;
}

.duel-tug-bar {
  height: 100%;
  background: linear-gradient(90deg, #0284c7, #38bdf8);
  transition: width 0.35s cubic-bezier(0.4, 0, 0.2, 1);
  box-shadow: 0 0 8px rgba(56, 189, 248, 0.4);
}

/* 80% Tension Glow on Tug-of-War bar */
.duel-tug-wrapper.tension-80 {
  border-color: rgba(245, 158, 11, 0.9);
  box-shadow: 0 0 16px rgba(245, 158, 11, 0.65), inset 0 0 8px rgba(245, 158, 11, 0.45);
  animation: duelTensionBreathing80 1.6s ease-in-out infinite alternate;
}

@keyframes duelTensionBreathing80 {
  0% {
    box-shadow: 0 0 10px rgba(245, 158, 11, 0.4), inset 0 0 4px rgba(245, 158, 11, 0.3);
  }
  100% {
    box-shadow: 0 0 20px rgba(245, 158, 11, 0.85), inset 0 0 10px rgba(251, 191, 36, 0.6);
  }
}

/* 95% Single Pulse on Tug-of-War bar (strictly single-shot) */
.duel-tug-wrapper.tension-pulse-95 {
  animation: duelCriticalSinglePulse 0.45s cubic-bezier(0.2, 0.9, 0.3, 1.2) forwards;
}

@keyframes duelCriticalSinglePulse {
  0% {
    transform: scale(1);
    box-shadow: 0 0 14px rgba(245, 158, 11, 0.6);
  }
  40% {
    transform: scale(1.04);
    box-shadow: 0 0 26px rgba(239, 68, 68, 0.95), inset 0 0 14px rgba(239, 68, 68, 0.7);
    border-color: #ef4444;
  }
  100% {
    transform: scale(1);
    box-shadow: 0 0 18px rgba(245, 158, 11, 0.75), inset 0 0 8px rgba(245, 158, 11, 0.5);
    border-color: rgba(245, 158, 11, 0.9);
  }
}

/* Duel Electric Wave overlay inside tug wrapper */
.duel-tug-lightning {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  pointer-events: none;
  overflow: hidden;
  border-radius: 5px;
}

.duel-tug-lightning .electric-spark-wave {
  position: absolute;
  top: -2px;
  bottom: -2px;
  width: 50px;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.95), #38bdf8, transparent);
  filter: drop-shadow(0 0 8px #38bdf8) drop-shadow(0 0 12px #fff);
  opacity: 0;
  border-radius: 4px;
}

.duel-tug-lightning.surge-left .electric-spark-wave {
  animation: surgeFromCenterToLeft 0.5s cubic-bezier(0.2, 0.8, 0.25, 1) forwards;
}

.duel-tug-lightning.surge-right .electric-spark-wave {
  animation: surgeFromCenterToRight 0.5s cubic-bezier(0.2, 0.8, 0.25, 1) forwards;
}

@keyframes surgeFromCenterToLeft {
  0% {
    left: 50%;
    transform: translateX(-50%) scaleX(0.5);
    opacity: 1;
    background: linear-gradient(90deg, transparent, #fff, #38bdf8, transparent);
  }
  60% {
    left: 15%;
    transform: translateX(-50%) scaleX(1.4);
    opacity: 1;
  }
  100% {
    left: -20px;
    transform: translateX(-50%) scaleX(0.8);
    opacity: 0;
  }
}

@keyframes surgeFromCenterToRight {
  0% {
    left: 50%;
    transform: translateX(-50%) scaleX(0.5);
    opacity: 1;
    background: linear-gradient(90deg, transparent, #38bdf8, #fff, transparent);
  }
  60% {
    left: 85%;
    transform: translateX(-50%) scaleX(1.4);
    opacity: 1;
  }
  100% {
    left: calc(100% + 20px);
    transform: translateX(-50%) scaleX(0.8);
    opacity: 0;
  }
}

/* ===================================================
   WIN CONDITION SELECTOR (HOST SETUP)
   =================================================== */
.win-condition-selector-box {
  background-color: #0f172a;
  border-radius: 12px;
  padding: 10px 12px;
  border: 1px solid #2563eb;
  margin: 10px 0;
}

.win-condition-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  justify-content: center;
  margin-top: 8px;
}

.win-condition-pill {
  flex: 1 1 calc(50% - 6px);
  background-color: #1e293b;
  border: 1px solid var(--border-color);
  color: var(--text-muted);
  font-size: 0.82rem;
  font-weight: 700;
  padding: 8px 6px;
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.2s ease;
  text-align: center;
  white-space: nowrap;
}

.win-condition-pill:first-child {
  flex: 1 1 100%;
}

.win-condition-pill:hover {
  background-color: #334155;
  color: #fff;
}

.win-condition-pill.active {
  background: linear-gradient(135deg, #2563eb, #1d4ed8);
  border-color: #60a5fa;
  color: #fff;
  box-shadow: 0 0 10px rgba(37, 99, 235, 0.4);
}

/* ===================================================
   PLAYER VIEW TARGET CONDITION BADGE
   =================================================== */
.target-condition-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: rgba(37, 99, 235, 0.15);
  border: 1px solid rgba(96, 165, 250, 0.3);
  color: #93c5fd;
  font-size: 0.8rem;
  font-weight: 700;
  padding: 4px 10px;
  border-radius: 16px;
  margin-top: 8px;
  width: fit-content;
}

.target-condition-badge span {
  color: #60a5fa;
}

/* ===================================================
   DUEL TARGET SELECTOR (HOST SETUP)
   =================================================== */
.duel-target-selector-box {
  background-color: #0f172a;
  border-radius: 12px;
  padding: 10px 12px;
  border: 1px solid #7c3aed;
  margin: 10px 0;
}

.duel-target-pills {
  display: flex;
  gap: 8px;
  justify-content: center;
  margin-top: 6px;
}

.duel-target-pill {
  flex: 1;
  background-color: #1e293b;
  border: 1px solid var(--border-color);
  color: var(--text-muted);
  font-size: 0.85rem;
  font-weight: 700;
  padding: 8px 6px;
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.2s ease;
}

.duel-target-pill:hover {
  background-color: #334155;
  color: #fff;
}

.duel-target-pill.active {
  background: linear-gradient(135deg, #7c3aed, #6d28d9);
  border-color: #a855f7;
  color: #fff;
  box-shadow: 0 0 10px rgba(124, 58, 237, 0.4);
}

/* ===================================================
   SESSION LEADERBOARD MODAL STYLING
   =================================================== */
.leaderboard-content {
  max-width: 440px;
  width: 100%;
}

.leaderboard-tabs {
  display: flex;
  gap: 6px;
  margin-bottom: 14px;
  background-color: var(--color-ink);
  border: 1px solid var(--color-line);
  padding: 4px;
  border-radius: var(--radius-xl);
}

.leaderboard-tab-btn {
  flex: 1;
  padding: 8px 12px;
  border: none;
  background: transparent;
  color: var(--color-mist);
  font-size: 0.8rem;
  font-weight: 700;
  border-radius: var(--radius-lg);
  cursor: pointer;
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
  min-height: 40px;
}

.leaderboard-tab-btn.active {
  background: var(--color-accent);
  color: #ffffff;
  box-shadow: 0 4px 14px -3px rgba(255, 77, 109, 0.6);
}

.leaderboard-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  max-height: 280px;
  overflow-y: auto;
  padding-right: 2px;
}

.leaderboard-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background-color: var(--color-surface2);
  border: 1px solid var(--color-line);
  border-radius: var(--radius-xl);
  padding: 10px 14px;
  transition: transform 0.15s ease, border-color 0.15s ease;
}

.leaderboard-item:hover {
  transform: translateX(-2px);
  border-color: rgba(255, 255, 255, 0.18);
}

.leaderboard-item.rank-1 {
  border-color: rgba(245, 158, 11, 0.5);
  background: linear-gradient(90deg, rgba(245, 158, 11, 0.15), var(--color-surface2));
}

.leaderboard-item.rank-2 {
  border-color: rgba(203, 213, 225, 0.4);
  background: linear-gradient(90deg, rgba(203, 213, 225, 0.12), var(--color-surface2));
}

.leaderboard-item.rank-3 {
  border-color: rgba(180, 83, 9, 0.4);
  background: linear-gradient(90deg, rgba(180, 83, 9, 0.12), var(--color-surface2));
}

.leaderboard-left {
  display: flex;
  align-items: center;
  gap: 10px;
}

.leaderboard-rank-badge {
  font-size: 0.95rem;
  font-weight: 900;
  width: 26px;
  text-align: center;
}

.leaderboard-player-name {
  font-size: 0.88rem;
  font-weight: 700;
  color: #ffffff;
}

.leaderboard-val {
  font-size: 0.88rem;
  font-weight: 800;
  color: var(--color-fog);
  direction: ltr;
}

.leaderboard-val.golden {
  color: var(--color-gold);
}

/* Hall of Fame Grid */
.leaderboard-hof-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  margin-bottom: 14px;
}

.hof-card {
  background: var(--color-surface2);
  border: 1px solid var(--color-line);
  border-radius: var(--radius-xl);
  padding: 10px 6px;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}

.hof-icon {
  font-size: 1.4rem;
  margin-bottom: 2px;
}

.hof-info {
  display: flex;
  flex-direction: column;
  width: 100%;
}

.hof-label {
  font-size: 0.68rem;
  color: var(--color-mist);
  font-weight: 700;
  white-space: nowrap;
}

.hof-value {
  font-size: 0.8rem;
  font-weight: 800;
  color: var(--color-gold);
  margin-top: 2px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.leaderboard-sub-info {
  font-size: 0.72rem;
  color: var(--color-mist);
  display: block;
  margin-top: 1px;
}

.duel-wl-badge {
  font-size: 0.75rem;
  padding: 2px 8px;
  border-radius: var(--radius-full);
  background-color: var(--color-ink);
  color: var(--color-fog);
  border: 1px solid var(--color-line);
}

/* ═══════════════════════════════════════════
   PUBLIC LOBBY
═══════════════════════════════════════════ */

.lobby-box {
  padding: 16px 18px;
}

.lobby-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 14px;
}

.lobby-title-wrap {
  display: flex;
  align-items: center;
  gap: 8px;
}

.lobby-icon {
  font-size: 1.15rem;
}

.lobby-title {
  font-size: 0.95rem;
  font-weight: 800;
  color: #ffffff;
}

.lobby-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  display: inline-block;
  flex-shrink: 0;
}

.lobby-dot--loading {
  background: var(--color-mist);
  animation: pulse 1.4s ease-in-out infinite;
}

.lobby-dot--connected {
  background: var(--color-felt);
  box-shadow: 0 0 8px var(--color-felt);
}

.lobby-dot--empty {
  background: var(--color-gold);
}

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

.lobby-empty {
  text-align: center;
  color: var(--color-mist);
  padding: 24px 12px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
}

.lobby-empty-icon {
  font-size: 2rem;
  margin-bottom: 4px;
  opacity: 0.8;
}

.lobby-empty p {
  font-size: 0.88rem;
  font-weight: 700;
  color: var(--color-fog);
  margin: 0;
}

.lobby-empty-sub {
  font-size: 0.75rem;
  color: var(--color-mist);
}

.lobby-skeleton {
  height: 82px;
  border-radius: var(--radius-xl);
  background: linear-gradient(90deg, var(--color-surface2) 25%, rgba(255, 255, 255, 0.05) 50%, var(--color-surface2) 75%);
  background-size: 200% 100%;
  animation: shimmer 1.4s infinite;
  border: 1px solid var(--color-line);
}

.lobby-room-card {
  background: var(--color-surface2);
  border: 1px solid var(--color-line);
  border-radius: var(--radius-xl);
  padding: 12px 16px;
  cursor: pointer;
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.lobby-room-card:hover {
  border-color: rgba(255, 255, 255, 0.22);
  transform: translateY(-1px);
  background: #202d3b;
}

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

.lobby-room-card-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.lobby-room-type {
  font-weight: 800;
  font-size: 0.92rem;
  color: #ffffff;
}

.lobby-room-capacity {
  font-size: 0.78rem;
  font-weight: 700;
  color: var(--color-mist);
  background: var(--color-ink);
  padding: 3px 8px;
  border-radius: var(--radius-full);
  border: 1px solid var(--color-line);
}

.lobby-room-capacity.full {
  color: #f87171;
  border-color: rgba(239, 68, 68, 0.3);
}

.lobby-room-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.lobby-badge {
  font-size: 0.72rem;
  padding: 3px 8px;
  border-radius: var(--radius-full);
  background: rgba(255, 255, 255, 0.05);
  color: var(--color-fog);
  border: 1px solid var(--color-line);
  white-space: nowrap;
  font-weight: 600;
}

.lobby-badge.badge-green {
  background: rgba(16, 185, 129, 0.12);
  color: #6ee7b7;
  border-color: rgba(16, 185, 129, 0.3);
}

.lobby-badge.badge-orange {
  background: rgba(245, 158, 11, 0.12);
  color: var(--color-gold);
  border-color: rgba(245, 158, 11, 0.3);
}

.lobby-badge.badge-purple {
  background: rgba(168, 85, 247, 0.12);
  color: #d8b4fe;
  border-color: rgba(168, 85, 247, 0.3);
}

.lobby-room-join-hint {
  font-size: 0.72rem;
  color: var(--color-mist);
  text-align: left;
}

/* ═══════════════════════════════════════════
   ROOM PREVIEW MODAL
═══════════════════════════════════════════ */

.room-preview-content {
  max-width: 440px;
  width: 100%;
}

.preview-badges-row {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 10px 0 12px;
}

.preview-badge {
  font-size: 0.76rem;
  padding: 4px 10px;
  border-radius: var(--radius-full);
  background: rgba(255, 77, 109, 0.12);
  color: var(--color-accent);
  border: 1px solid rgba(255, 77, 109, 0.3);
  font-weight: 700;
}

.preview-info-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin-bottom: 12px;
}

.preview-info-item {
  background: var(--color-surface2);
  border: 1px solid var(--color-line);
  border-radius: var(--radius-lg);
  padding: 10px 12px;
  font-size: 0.83rem;
}

.preview-info-label {
  color: var(--color-mist);
  margin-bottom: 3px;
  font-size: 0.72rem;
  font-weight: 600;
}

.preview-info-value {
  font-weight: 800;
  color: #ffffff;
}

.preview-capacity-bar-wrap {
  margin: 10px 0 6px;
}

.preview-capacity-label {
  display: flex;
  justify-content: space-between;
  font-size: 0.82rem;
  color: var(--color-mist);
  margin-bottom: 6px;
  font-weight: 600;
}

.preview-capacity-bar-bg {
  background: var(--color-ink);
  border: 1px solid var(--color-line);
  border-radius: var(--radius-full);
  height: 8px;
  overflow: hidden;
}

.preview-capacity-bar {
  height: 100%;
  background: linear-gradient(90deg, var(--color-accent), var(--color-gold));
  border-radius: var(--radius-full);
  transition: width 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

/* ── Daberna Design System Primitives (Phase 1) ──────────────────── */

/* Tabular Numbers */
.tnum {
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum";
}

/* Glassmorphism utility */
.glass {
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.06), rgba(255, 255, 255, 0.015));
  border: 1px solid rgba(255, 255, 255, 0.08);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

/* Diagonal ribbon effect */
.diag {
  transform: skewX(-6deg);
}

/* Numring for calling numbers */
.numring {
  background: radial-gradient(120% 120% at 50% 28%, #233c5e 0%, #14263f 60%), #14263f;
  box-shadow: var(--shadow-numring);
  position: relative;
  isolation: isolate;
  overflow: visible;
}

.numring .current-number-val {
  position: relative;
  z-index: 3;
}

.current-number-val.number-call-enter {
  animation: number-call-enter 360ms cubic-bezier(0.16, 1, 0.3, 1) both;
}

.countdown-ring {
  position: absolute;
  inset: -7px;
  width: calc(100% + 14px);
  height: calc(100% + 14px);
  overflow: visible;
  pointer-events: none;
  transform: rotate(-90deg);
  z-index: 2;
}

.countdown-ring-track,
.countdown-ring-progress {
  fill: none;
  stroke-linecap: round;
  vector-effect: non-scaling-stroke;
}

.countdown-ring-track {
  stroke: rgba(148, 163, 184, 0.18);
  stroke-width: 4;
  opacity: 0;
  transition: opacity 180ms ease;
}

.countdown-ring-progress {
  stroke: #22d3ee;
  stroke-width: 4.5;
  stroke-dasharray: 100;
  stroke-dashoffset: 0;
  opacity: 0;
  filter: drop-shadow(0 0 4px rgba(34, 211, 238, 0.9));
  transition: stroke 180ms ease, opacity 180ms ease, filter 180ms ease;
}

.numring.is-counting .countdown-ring-track,
.numring.is-counting .countdown-ring-progress {
  opacity: 1;
}

.numring.countdown-warning .countdown-ring-progress {
  stroke: #f59e0b;
  filter: drop-shadow(0 0 5px rgba(245, 158, 11, 0.95));
}

.numring.countdown-danger .countdown-ring-progress {
  stroke: #fb4b4b;
  filter: drop-shadow(0 0 6px rgba(251, 75, 75, 1));
}

.numring.countdown-danger .current-number-val {
  animation: countdown-number-urgent 420ms ease-in-out infinite alternate;
}

.numring.is-golden {
  border-color: #fbbf24 !important;
  background:
    radial-gradient(circle at 50% 35%, rgba(254, 240, 138, 0.2), transparent 42%),
    radial-gradient(circle, rgba(120, 53, 15, 0.48) 0%, rgba(18, 26, 43, 0.96) 74%) !important;
  box-shadow:
    0 0 18px rgba(245, 158, 11, 0.55),
    0 0 42px rgba(245, 158, 11, 0.22),
    inset 0 0 22px rgba(251, 191, 36, 0.14) !important;
}

.numring.is-golden .countdown-ring-track {
  stroke: rgba(254, 240, 138, 0.24);
}

.numring.is-golden .countdown-ring-progress {
  stroke: #fde047;
  stroke-width: 5;
  filter:
    drop-shadow(0 0 3px #fff7ae)
    drop-shadow(0 0 7px rgba(245, 158, 11, 1));
  animation: countdown-ring-golden-glow 520ms ease-in-out infinite alternate;
}

.numring-star-field {
  position: absolute;
  inset: 0;
  overflow: visible;
  pointer-events: none;
  z-index: 5;
}

.numring-trail-star {
  position: absolute;
  left: var(--star-x);
  top: var(--star-y);
  color: #fde047;
  font-family: Georgia, serif;
  font-size: var(--star-size);
  line-height: 1;
  text-shadow: 0 0 4px #fff7ae, 0 0 9px rgba(245, 158, 11, 0.95);
  transform: translate(-50%, -50%) scale(0.45) rotate(0deg);
  animation: numring-star-trail 680ms cubic-bezier(0.16, 1, 0.3, 1) forwards;
  will-change: transform, opacity;
}

@keyframes countdown-number-urgent {
  from { transform: scale(1); text-shadow: 0 0 12px rgba(251, 75, 75, 0.55); }
  to { transform: scale(1.055); text-shadow: 0 0 24px rgba(251, 75, 75, 0.95); }
}

@keyframes number-call-enter {
  0% {
    opacity: 0;
    transform: scale(0.72) rotate(-8deg);
    filter: blur(1px);
  }
  58% {
    opacity: 1;
    transform: scale(1.08) rotate(3deg);
    filter: blur(0);
  }
  100% {
    opacity: 1;
    transform: scale(1) rotate(0);
    filter: blur(0);
  }
}

@keyframes history-badge-arrive {
  0% {
    opacity: 0;
    transform: translateX(12px) scale(0.8);
  }
  100% {
    opacity: 1;
    transform: translateX(0) scale(1.08);
  }
}

/* Phase 3B: Arc flight of previous number to history */
.number-flight-ghost {
  position: fixed;
  left: 0;
  top: 0;
  width: 44px;
  height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-full);
  background: radial-gradient(circle, #38bdf8 0%, #1e40af 85%);
  border: 2px solid #7dd3fc;
  box-shadow: 0 0 16px rgba(56, 189, 248, 0.65);
  color: #ffffff;
  font-size: 1.4rem;
  font-weight: 900;
  line-height: 1;
  pointer-events: none;
  z-index: 10040;
  animation: number-flight-arc 250ms cubic-bezier(0.2, 0.8, 0.35, 1) forwards;
  will-change: transform, opacity;
}

.number-flight-ghost.golden {
  background: radial-gradient(circle, #fde047 0%, #d97706 85%);
  border-color: #fef08a;
  box-shadow: 0 0 18px rgba(245, 158, 11, 0.85);
  color: #0f172a;
}

@keyframes number-flight-arc {
  0% {
    opacity: 0.95;
    transform: translate(var(--flight-start-x), var(--flight-start-y)) translate(-50%, -50%) scale(1.05);
  }
  42% {
    opacity: 0.85;
    transform: translate(var(--flight-mid-x), var(--flight-mid-y)) translate(-50%, -50%) scale(0.68);
  }
  100% {
    opacity: 0;
    transform: translate(var(--flight-end-x), var(--flight-end-y)) translate(-50%, -50%) scale(0.32);
  }
}

/* Phase 3B: Incremental smooth badge insertion in history */
.num-badge.badge-slide-in {
  animation: history-badge-slide-in 260ms cubic-bezier(0.16, 1, 0.3, 1) both;
  will-change: transform, opacity, max-width;
}

@keyframes history-badge-slide-in {
  0% {
    opacity: 0;
    transform: scale(0.4) translateX(-14px);
    max-width: 0;
    padding-left: 0;
    padding-right: 0;
    margin-right: -6px;
  }
  60% {
    opacity: 1;
    max-width: 60px;
    padding-left: 8px;
    padding-right: 8px;
    margin-right: 0;
  }
  100% {
    opacity: 1;
    transform: scale(1.08) translateX(0);
    max-width: 60px;
    padding-left: 8px;
    padding-right: 8px;
    margin-right: 0;
  }
}

/* Phase 3B: Card dealing entrance animation on round start */
.daberna-card-wrapper.card-deal-enter {
  animation: card-deal-in 340ms var(--card-deal-delay, 0ms) cubic-bezier(0.16, 1, 0.3, 1) both;
  will-change: transform, opacity;
}

@keyframes card-deal-in {
  0% {
    opacity: 0;
    transform: translateY(-28px) scale(0.88) rotate(var(--card-deal-rotation, -2deg));
    filter: blur(1px);
  }
  68% {
    opacity: 1;
    transform: translateY(2px) scale(1.01) rotate(0deg);
    filter: blur(0);
  }
  100% {
    opacity: 1;
    transform: translateY(0) scale(1) rotate(0deg);
    filter: blur(0);
  }
}


@keyframes countdown-ring-golden-glow {
  from { opacity: 0.82; }
  to { opacity: 1; }
}

@keyframes numring-star-trail {
  0% {
    opacity: 0;
    transform: translate(-50%, -50%) scale(0.35) rotate(0deg);
  }
  24% { opacity: 1; }
  100% {
    opacity: 0;
    transform:
      translate(calc(-50% + var(--star-drift-x)), calc(-50% + var(--star-drift-y)))
      scale(1.05)
      rotate(var(--star-rotate));
  }
}

.golden-cell-spark {
  position: fixed;
  left: 0;
  top: 0;
  color: #fde047;
  font-family: Georgia, serif;
  font-size: 12px;
  line-height: 1;
  pointer-events: none;
  text-shadow: 0 0 5px #fff7ae, 0 0 11px rgba(245, 158, 11, 0.95);
  transform: translate(var(--spark-start-x), var(--spark-start-y)) scale(0.5);
  z-index: 10060;
  animation: golden-cell-spark 520ms var(--spark-delay, 0ms) cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

@keyframes golden-cell-spark {
  0% {
    opacity: 0;
    transform: translate(var(--spark-start-x), var(--spark-start-y)) scale(0.45) rotate(0deg);
  }
  22% {
    opacity: 1;
  }
  100% {
    opacity: 0;
    transform: translate(var(--spark-end-x), var(--spark-end-y)) scale(0.95) rotate(145deg);
  }
}

@keyframes cell-mark-stamp {
  0% {
    opacity: 0;
    transform: scale(0.55) rotate(-10deg);
  }
  42% {
    opacity: 1;
    transform: scale(1.08) rotate(3deg);
  }
  100% {
    opacity: 0;
    transform: scale(0.92) rotate(0deg);
  }
}

/* Panel Component */
.panel {
  overflow: hidden;
  border-radius: var(--radius-3xl);
  border: 1px solid var(--color-line);
  background-color: rgba(20, 34, 56, 0.88);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  box-shadow: var(--shadow-panel);
  position: relative;
}

.panel-sheen {
  pointer-events: none;
  position: absolute;
  top: -4rem;
  right: 0;
  left: 0;
  height: 10rem;
  background: radial-gradient(60% 100% at 70% 0, rgba(240, 71, 60, 0.18), transparent 70%);
}

/* Animations */
@keyframes daberna-pop {
  0% { transform: scale(0.4); opacity: 0; }
  60% { transform: scale(1.08); }
  100% { transform: scale(1); opacity: 1; }
}

@keyframes daberna-stamp {
  0% { transform: scale(1.6) rotate(8deg); opacity: 0; }
  100% { transform: scale(1) rotate(-9deg); opacity: 1; }
}

@keyframes pulse-live {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.35; transform: scale(0.85); }
}

@keyframes shimmer {
  0% { background-position: -200% 0; }
  100% { background-position: 200% 0; }
}

.pop-in {
  animation: daberna-pop 0.5s cubic-bezier(0.2, 1.3, 0.4, 1) both;
}

.stamp-in {
  animation: daberna-stamp 0.4s ease-out both;
}

.live-indicator {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 0.75rem;
  font-weight: 700;
  color: var(--color-felt);
}

.live-dot {
  width: 7px;
  height: 7px;
  border-radius: var(--radius-full);
  background-color: var(--color-felt);
  animation: pulse-live 2s infinite ease-in-out;
}

/* Badges & Status Pills */
.badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 3px 10px;
  border-radius: var(--radius-full);
  font-size: 0.75rem;
  font-weight: 700;
  line-height: 1.2;
}

.badge-accent {
  background: rgba(240, 71, 60, 0.16);
  color: var(--color-accent);
  border: 1px solid rgba(240, 71, 60, 0.35);
}

.badge-gold {
  background: rgba(245, 158, 11, 0.16);
  color: var(--color-gold);
  border: 1px solid rgba(245, 158, 11, 0.35);
}

.badge-felt {
  background: rgba(16, 185, 129, 0.16);
  color: var(--color-felt);
  border: 1px solid rgba(16, 185, 129, 0.35);
}

.badge-muted {
  background: rgba(255, 255, 255, 0.06);
  color: var(--color-mist);
  border: 1px solid var(--color-line);
}

/* Standard Primitive Buttons */
.btn-primary {
  background: linear-gradient(135deg, #f2554b 0%, #e03930 100%);
  color: #ffffff;
  border: 1px solid rgba(255, 255, 255, 0.18);
  box-shadow: var(--shadow-accent);
}

.btn-primary:hover:not(:disabled) {
  background: linear-gradient(135deg, #fa655b 0%, #ea4338 100%);
  box-shadow: 0 14px 28px -8px rgba(240, 71, 60, 0.85);
  transform: translateY(-1px);
}

.btn-primary:active:not(:disabled) {
  transform: translateY(1px) scale(0.99);
  box-shadow: 0 6px 14px -4px rgba(240, 71, 60, 0.6);
}

.btn-surface {
  background: var(--color-surface2);
  color: #ffffff;
  border: 1px solid var(--color-line);
}

.btn-surface:hover:not(:disabled) {
  background: #233b5f;
  border-color: #3b5a8c;
  transform: translateY(-1px);
}

.btn-surface:active:not(:disabled) {
  transform: translateY(1px);
}

.btn-icon {
  min-width: 44px;
  min-height: 44px;
  width: 44px;
  height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-md);
  border: 1px solid var(--color-line);
  background: var(--color-surface2);
  color: #ffffff;
  cursor: pointer;
  transition: all 0.2s ease;
}

.btn-icon:hover:not(:disabled) {
  background: #253e65;
  border-color: #3b5e96;
}

.btn-icon:active:not(:disabled) {
  transform: scale(0.96);
}

/* Accessibility Focus States */
button:focus-visible,
a:focus-visible,
input:focus-visible,
select:focus-visible,
[tabindex]:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 2px;
}

/* Touch Target Minimum (44x44px) */
button,
a.btn,
.btn,
.btn-sound-toggle,
.btn-auth,
.btn-profile-pill,
.counter-btn {
  min-height: 44px;
}

/* Empty State Primitive */
.empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 32px 16px;
  text-align: center;
  color: var(--color-mist);
}

.empty-state-icon {
  font-size: 2.2rem;
  margin-bottom: 8px;
  opacity: 0.8;
}

.empty-state-title {
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--text-main);
  margin-bottom: 4px;
}

.empty-state-text {
  font-size: 0.8rem;
  color: var(--color-fog);
}

/* Skeleton Loading Primitive */
.skeleton-loader {
  background: linear-gradient(90deg, var(--color-surface2) 25%, rgba(255, 255, 255, 0.08) 50%, var(--color-surface2) 75%);
  background-size: 200% 100%;
  animation: shimmer 1.8s infinite linear;
  border-radius: var(--radius-md);
}

/* Reduced Motion Support */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
  .pop-in,
  .stamp-in,
  .live-dot {
    animation: none !important;
  }
  .numring-trail-star {
    display: none !important;
  }
  .numring.countdown-danger .current-number-val,
  .numring.is-golden .countdown-ring-progress {
    animation: none !important;
  }
}/* ===================================================
   PHASE 4: HOST WAITING ROOM REDESIGN
   =================================================== */

.host-waiting-header-card {
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 18px 16px;
  margin-bottom: 14px;
}

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

.host-title-group {
  display: flex;
  align-items: center;
  gap: 8px;
}

.host-title-icon {
  font-size: 1.15rem;
}

.host-title-text {
  font-size: 0.95rem;
  font-weight: 800;
  color: #ffffff;
}

.btn-danger-outline {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: rgba(240, 71, 60, 0.08);
  border: 1px solid rgba(240, 71, 60, 0.3);
  color: var(--color-danger);
  padding: 6px 12px;
  border-radius: var(--radius-full);
  font-size: 0.8rem;
  font-weight: 700;
  cursor: pointer;
  transition: all var(--transition-fast);
}

.btn-danger-outline:hover {
  background: rgba(240, 71, 60, 0.2);
  border-color: var(--color-danger);
  color: #fff;
  transform: translateY(-1px);
}

.btn-danger-outline:active {
  transform: translateY(0) scale(0.97);
}

/* Room Code Hero Display */
.host-code-hero {
  border-radius: var(--radius-2xl);
  padding: 16px 12px;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  background: rgba(18, 26, 43, 0.7);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.35);
}

.host-code-caption {
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--color-mist);
  letter-spacing: 0.5px;
}

.host-code-display {
  font-size: 2.6rem;
  font-weight: 900;
  letter-spacing: 0.14em;
  color: #ffffff;
  direction: ltr;
  text-align: center;
  line-height: 1.1;
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum";
  text-shadow: 0 2px 14px rgba(255, 255, 255, 0.25);
  border: none;
  background: transparent;
  padding: 4px 0;
}

.host-code-hint {
  font-size: 0.75rem;
  color: var(--color-fog);
  margin: 0;
}

/* QR & Share Section */
.host-share-section {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.host-qr-wrapper {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
}

.host-qrcode-box {
  background-color: #ffffff;
  padding: 10px;
  border-radius: var(--radius-xl);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
  width: fit-content;
  margin: 0 auto;
}

.host-qrcode-box img,
.host-qrcode-box canvas {
  border-radius: var(--radius-md);
  display: block;
}

.host-qr-label {
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--color-fog);
  letter-spacing: 0.5px;
}

.host-share-box {
  background-color: var(--color-surface);
  border: 1px solid var(--color-line);
  border-radius: var(--radius-xl);
  padding: 12px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.share-input-group {
  display: flex;
  gap: 8px;
  align-items: center;
  width: 100%;
}

.share-url-input {
  flex: 1 1 auto;
  min-width: 0;
  width: 0;
  font-size: 0.8rem;
  padding: 8px 10px;
  height: 40px;
  border-radius: var(--radius-lg);
  background: var(--color-surface2);
  border: 1px solid var(--color-line);
  color: var(--color-fog);
  font-family: monospace;
}

.btn-copy {
  width: auto !important;
  flex: 0 0 auto;
  height: 40px;
  padding: 0 14px;
  font-size: 0.82rem;
  font-weight: 700;
  border-radius: var(--radius-lg);
  background: var(--color-surface2);
  color: #fff;
  border: 1px solid var(--color-line);
  cursor: pointer;
  white-space: nowrap;
  transition: all var(--transition-fast);
}

.btn-copy:hover {
  background: var(--color-line);
  color: #fff;
}

.btn-copy:active {
  transform: scale(0.96);
}

.share-actions-row {
  display: grid;
  grid-template-columns: 1.8fr 1fr 1fr;
  gap: 8px;
  width: 100%;
}

.duel-custom-target {
  display: flex;
  gap: 8px;
  margin-top: 10px;
  width: 100%;
  align-items: stretch;
}

.duel-custom-target .input-field {
  flex: 1 1 0;
  min-width: 0;
  width: 0;
}

.duel-custom-target .btn {
  flex: 0 0 auto;
  width: auto !important;
  min-width: 88px;
  padding-inline: 18px;
}

#duel-custom-target-input {
  direction: ltr;
  text-align: center;
}

@media (max-width: 360px) {
  .duel-custom-target {
    flex-wrap: wrap;
  }

  .duel-custom-target .input-field {
    flex-basis: 100%;
    width: 100%;
  }

  .duel-custom-target .btn {
    width: 100% !important;
  }
}

@media (max-width: 400px) {
  .share-actions-row {
    grid-template-columns: 1fr 1fr;
  }

  .btn-share-native {
    grid-column: 1 / -1;
  }
}

.btn-share-native {
  width: 100%;
  min-width: 0 !important;
  height: 42px;
  border-radius: var(--radius-lg);
  font-size: 0.82rem;
  font-weight: 700;
  background: linear-gradient(135deg, #4f46e5, #4338ca);
  color: #fff !important;
  border: 1px solid rgba(255, 255, 255, 0.15);
  box-shadow: 0 4px 12px rgba(79, 70, 229, 0.35);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all var(--transition-fast);
}

.btn-share-native:hover {
  transform: translateY(-1px);
  box-shadow: 0 6px 16px rgba(79, 70, 229, 0.45);
}

.btn-share-native:active {
  transform: scale(0.97);
}

.btn-whatsapp {
  width: 100%;
  min-width: 0 !important;
  height: 42px;
  border-radius: var(--radius-lg);
  font-size: 0.8rem;
  font-weight: 700;
  background: #16a34a;
  color: #fff !important;
  border: 1px solid rgba(255, 255, 255, 0.15);
  display: flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  transition: all var(--transition-fast);
}

.btn-whatsapp:hover {
  background: #15803d;
}

.btn-telegram {
  width: 100%;
  min-width: 0 !important;
  height: 42px;
  border-radius: var(--radius-lg);
  font-size: 0.8rem;
  font-weight: 700;
  background: #0284c7;
  color: #fff !important;
  border: 1px solid rgba(255, 255, 255, 0.15);
  display: flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  transition: all var(--transition-fast);
}

.btn-telegram:hover {
  background: #0369a1;
}

/* Players Waiting Bar */
.host-players-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 14px;
  border-radius: var(--radius-xl);
  background: rgba(11, 18, 32, 0.5);
  border: 1px solid var(--color-line);
}

.host-players-info {
  display: flex;
  align-items: center;
  gap: 8px;
}

.host-players-label {
  font-size: 0.84rem;
  font-weight: 600;
  color: var(--color-mist);
}

.host-players-count-pill {
  display: flex;
  align-items: center;
  gap: 4px;
  background: var(--color-surface2);
  border: 1px solid var(--color-line);
  padding: 3px 10px;
  border-radius: var(--radius-full);
  font-size: 0.85rem;
  color: #fff;
}

.host-players-count-pill b {
  font-size: 1.05rem;
  color: var(--color-accent);
}

/* Host Setup Panel */
.host-setup-panel {
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 18px 16px;
}

.setup-setting-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--color-line);
}

.setting-row-label {
  display: flex;
  align-items: center;
  gap: 10px;
}

.setting-row-icon {
  font-size: 1.4rem;
}

.setting-row-text .form-label {
  margin-bottom: 0;
  font-size: 0.88rem;
  font-weight: 700;
  color: #fff;
}

.setting-row-hint {
  font-size: 0.78rem;
  color: var(--color-fog);
  display: block;
}

/* Counter Control */
.counter-control {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: var(--color-surface2);
  border: 1px solid var(--color-line);
  border-radius: var(--radius-xl);
  padding: 4px 8px;
}

.btn-counter {
  width: 38px;
  height: 38px;
  min-width: 38px;
  display: grid;
  place-items: center;
  border-radius: var(--radius-lg);
  background: var(--color-surface);
  border: 1px solid var(--color-line);
  color: #fff;
  font-size: 1.2rem;
  font-weight: 800;
  cursor: pointer;
  transition: all var(--transition-fast);
}

.btn-counter:hover {
  background: rgba(255, 255, 255, 0.12);
  border-color: rgba(255, 255, 255, 0.25);
}

.btn-counter:active {
  transform: scale(0.92);
}

.counter-value {
  font-size: 1.3rem;
  font-weight: 900;
  color: #fff;
  min-width: 24px;
  text-align: center;
}

/* Duel Target & Win Condition Pills */
.duel-target-selector-box {
  background: rgba(124, 58, 237, 0.08);
  border: 1px solid rgba(168, 85, 247, 0.35);
  border-radius: var(--radius-xl);
  padding: 12px;
}

.duel-target-pills,
.win-condition-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 8px;
}

.duel-target-pill,
.win-condition-pill {
  flex: 1 1 calc(50% - 6px);
  background: var(--color-surface2);
  border: 1px solid var(--color-line);
  color: var(--color-mist);
  font-size: 0.8rem;
  font-weight: 700;
  padding: 9px 8px;
  border-radius: var(--radius-lg);
  cursor: pointer;
  transition: all var(--transition-fast);
  text-align: center;
  white-space: nowrap;
}

.win-condition-pill:first-child {
  flex: 1 1 100%;
}

.duel-target-pill:hover,
.win-condition-pill:hover {
  background: rgba(255, 255, 255, 0.08);
  color: #fff;
  border-color: rgba(255, 255, 255, 0.2);
}

.win-condition-pill.active {
  background: linear-gradient(135deg, rgba(240, 71, 60, 0.25), rgba(240, 71, 60, 0.15));
  border-color: var(--color-accent);
  color: #fff;
  box-shadow: 0 0 14px rgba(240, 71, 60, 0.3);
}

.duel-target-pill.active {
  background: linear-gradient(135deg, rgba(124, 58, 237, 0.4), rgba(109, 40, 217, 0.3));
  border-color: #a855f7;
  color: #fff;
  box-shadow: 0 0 14px rgba(168, 85, 247, 0.35);
}

/* Setting Cards in Settings Group */
.settings-group {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.settings-group-title {
  font-size: 0.82rem;
  font-weight: 700;
  color: var(--color-mist);
  margin-bottom: 2px;
}

.setting-card {
  background: var(--color-surface);
  border: 1px solid var(--color-line);
  border-radius: var(--radius-xl);
  padding: 12px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  transition: border-color var(--transition-fast);
}

.setting-card:hover {
  border-color: rgba(255, 255, 255, 0.18);
}

.setting-card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.setting-info {
  display: flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
}

.setting-icon {
  font-size: 1.15rem;
}

.setting-title {
  font-size: 0.86rem;
  font-weight: 700;
  color: #fff;
}

.toggle-switch-wrapper input:checked + .toggle-slider {
  background: linear-gradient(135deg, var(--color-felt), #10b981);
}

.setting-description {
  border-top: 1px solid rgba(255, 255, 255, 0.06);
  padding-top: 8px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.desc-item {
  display: flex;
  align-items: flex-start;
  gap: 6px;
  font-size: 0.78rem;
  line-height: 1.45;
}

.desc-badge {
  font-weight: 800;
  font-size: 0.75rem;
  padding: 1px 6px;
  border-radius: var(--radius-sm);
  flex-shrink: 0;
}

.desc-badge.badge-on {
  background: rgba(16, 185, 129, 0.15);
  color: #34d399;
}

.desc-badge.badge-off {
  background: rgba(148, 163, 184, 0.15);
  color: #94a3b8;
}

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

/* Host Start Button CTA */
.btn-host-start-cta {
  width: 100%;
  min-height: 52px;
  border-radius: var(--radius-xl);
  font-size: 1.05rem;
  font-weight: 800;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  box-shadow: 0 14px 28px -10px rgba(240, 71, 60, 0.75);
}

/* ===================================================
   PHASE 5: PLAYER WAITING & GAME TABLE REDESIGN
   =================================================== */

.player-header-panel {
  padding: 12px 14px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.player-top-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
}

.player-id-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: var(--color-surface2);
  border: 1px solid var(--color-line);
  padding: 4px 10px;
  border-radius: var(--radius-full);
}

.player-avatar-mini {
  font-size: 0.9rem;
}

.player-name-val {
  font-size: 0.85rem;
  color: #ffffff;
}

.player-room-pill {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 0.8rem;
  color: var(--color-mist);
}

.player-room-code-val {
  color: var(--color-gold);
  font-weight: 800;
  letter-spacing: 1px;
}

/* Player Waiting Notice Box */
.player-waiting-box {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 28px 16px;
  gap: 6px;
  background: var(--color-surface);
  border: 1px solid var(--color-line);
  border-radius: var(--radius-2xl);
  margin-top: 10px;
}

.waiting-spin-icon {
  font-size: 2rem;
  animation: pulse 1.5s infinite ease-in-out;
}

.waiting-title {
  font-size: 0.95rem;
  font-weight: 700;
  color: #ffffff;
  margin: 0;
}

.waiting-subtitle {
  font-size: 0.78rem;
  color: var(--color-fog);
}

/* Current Number and Numring */
.player-current-number-card {
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  margin-top: 8px;
}

.player-numring-box {
  display: grid;
  place-items: center;
  width: 104px;
  height: 104px;
  border-radius: var(--radius-full);
  background: radial-gradient(circle, rgba(240, 71, 60, 0.2) 0%, rgba(18, 26, 43, 0.9) 75%);
  border: 2px solid rgba(240, 71, 60, 0.45);
  box-shadow: 0 0 28px rgba(240, 71, 60, 0.35);
  margin: 4px auto;
}

.player-numring-box .current-number-val {
  font-size: 3.2rem;
  font-weight: 900;
  color: #ffffff;
  line-height: 1;
  text-shadow: 0 0 16px rgba(255, 255, 255, 0.4);
}

.called-history-wrapper {
  margin-top: 6px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  width: 100%;
}

.called-history-wrapper .form-label {
  font-size: 0.84rem;
  font-weight: 700;
  color: var(--color-mist);
  margin-bottom: 2px;
  padding-right: 4px;
}

.player-history-card {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  padding: 0 !important;
}

/* Redesigned Daberna Card & Grid */
.daberna-card-wrapper {
  display: flex;
  flex-direction: column;
  gap: 8px;
  background: var(--color-surface) !important;
  border: 1px solid var(--color-line) !important;
  border-radius: var(--radius-2xl) !important;
  padding: 14px 12px !important;
  margin-top: 14px !important;
  margin-bottom: 12px;
  box-shadow: var(--shadow-surface) !important;
}

.card-header-label {
  font-size: 0.82rem;
  font-weight: 700;
  color: var(--color-mist);
  margin-bottom: 8px;
  display: flex;
  align-items: center;
  gap: 6px;
}

.daberna-grid {
  display: grid !important;
  grid-template-columns: repeat(9, minmax(0, 1fr)) !important;
  width: 100%;
  min-width: 0;
  gap: 4px !important;
  background: rgba(11, 18, 32, 0.7) !important;
  padding: 8px !important;
  border-radius: var(--radius-xl) !important;
  border: 1px solid var(--color-line) !important;
  direction: ltr !important;
}

.daberna-cell {
  min-width: 0;
  width: 100%;
  position: relative;
  overflow: hidden;
  white-space: nowrap;
  aspect-ratio: 1 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  border-radius: var(--radius-md) !important;
  font-size: 0.88rem !important;
  font-weight: 800 !important;
  color: #ffffff !important;
  background: var(--color-surface2) !important;
  border: 1px solid var(--color-line) !important;
  font-variant-numeric: tabular-nums !important;
  font-feature-settings: "tnum" !important;
  user-select: none !important;
  touch-action: manipulation !important;
  transition: all var(--transition-fast) !important;
}

.daberna-cell.marked {
  background: rgba(16, 185, 129, 0.22) !important;
  color: #34d399 !important;
  border-color: rgba(16, 185, 129, 0.5) !important;
  box-shadow: 0 0 10px rgba(16, 185, 129, 0.35) !important;
  animation: daberna-stamp 0.25s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

.cell-mark-stamp {
  position: absolute;
  inset: auto 50% 50% auto;
  translate: 50% 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 34px;
  height: 34px;
  padding: 0 7px;
  border-radius: var(--radius-full);
  border: 2px solid rgba(187, 247, 208, 0.95);
  color: #dcfce7;
  background: rgba(6, 78, 59, 0.68);
  box-shadow: 0 0 14px rgba(16, 185, 129, 0.42);
  font-size: 0.58rem;
  font-weight: 900;
  line-height: 1;
  pointer-events: none;
  z-index: 8;
  animation: cell-mark-stamp 420ms cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

.cell-mark-stamp.golden {
  border-color: #fde68a;
  color: #0b1220;
  background: linear-gradient(135deg, #fef08a, #f59e0b);
  box-shadow: 0 0 18px rgba(245, 158, 11, 0.72);
}

.daberna-cell.pending-target {
  border: 2px solid var(--color-gold) !important;
  background: rgba(245, 158, 11, 0.22) !important;
  color: #fbbf24 !important;
  box-shadow: 0 0 14px rgba(245, 158, 11, 0.55) !important;
  animation: targetPulse 0.8s infinite alternate !important;
}

.daberna-cell.burned {
  background: rgba(220, 38, 38, 0.18) !important;
  color: #f87171 !important;
  border: 1px dashed rgba(239, 68, 68, 0.6) !important;
  box-shadow: inset 0 0 8px rgba(220, 38, 38, 0.3) !important;
  text-decoration: line-through;
  cursor: not-allowed !important;
  opacity: 0.75 !important;
}

.daberna-cell.clickable:hover:not(.marked):not(.burned) {
  border-color: rgba(255, 255, 255, 0.3);
  background: rgba(255, 255, 255, 0.12);
}

.daberna-cell.clickable:active:not(.marked):not(.burned) {
  transform: scale(0.92);
}

.daberna-cell.winning-row {
  background: linear-gradient(135deg, var(--color-gold), #d97706) !important;
  color: #0b1220 !important;
  font-weight: 900 !important;
  box-shadow: 0 0 18px rgba(245, 158, 11, 0.85) !important;
}

@media (max-width: 400px) {
  .daberna-grid {
    gap: 3px !important;
    padding: 6px !important;
  }
  .daberna-cell {
    font-size: 0.74rem !important;
    border-radius: var(--radius-sm) !important;
  }
}

/* ===================================================
   PHASE 6: HOST GAME TABLE & CONTROLS REDESIGN
   =================================================== */

.host-active-panel {
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 18px 16px;
}

.host-numring-box {
  display: grid;
  place-items: center;
  width: 116px;
  height: 116px;
  border-radius: var(--radius-full);
  background: radial-gradient(circle, rgba(240, 71, 60, 0.22) 0%, rgba(18, 26, 43, 0.9) 75%);
  border: 2px solid rgba(240, 71, 60, 0.45);
  box-shadow: 0 0 32px rgba(240, 71, 60, 0.4);
  margin: 4px auto;
}

.host-numring-box .current-number-val {
  font-size: 3.5rem;
  font-weight: 900;
  color: #ffffff;
  line-height: 1;
  text-shadow: 0 0 18px rgba(255, 255, 255, 0.45);
}

.host-autocall-toggle-btn {
  width: 100%;
  font-size: 0.88rem;
  font-weight: 700;
  padding: 10px 14px;
  border-radius: var(--radius-xl);
  background: var(--color-surface2);
  border: 1px solid var(--color-line);
  color: var(--color-mist);
  transition: all var(--transition-fast);
}

.host-autocall-toggle-btn:hover {
  background: rgba(255, 255, 255, 0.08);
  color: #ffffff;
}

.btn-next-number-cta {
  width: 100%;
  min-height: 56px;
  border-radius: var(--radius-xl);
  font-size: 1.25rem;
  font-weight: 900;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  box-shadow: 0 16px 32px -10px rgba(240, 71, 60, 0.85);
  transition: all var(--transition-fast);
}

.host-active-footer-actions {
  display: flex;
  gap: 10px;
  width: 100%;
}

.btn-warning-outline {
  flex: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  background: rgba(245, 158, 11, 0.08);
  border: 1px solid rgba(245, 158, 11, 0.35);
  color: #fbbf24;
  padding: 10px 14px;
  border-radius: var(--radius-xl);
  font-size: 0.84rem;
  font-weight: 700;
  cursor: pointer;
  transition: all var(--transition-fast);
}

.btn-warning-outline:hover {
  background: rgba(245, 158, 11, 0.18);
  border-color: #f59e0b;
  color: #ffffff;
}

.btn-pause-state-running {
  background: rgba(245, 158, 11, 0.08) !important;
  border: 1.5px solid rgba(245, 158, 11, 0.45) !important;
  color: #fbbf24 !important;
}

.btn-pause-state-running:hover {
  background: rgba(245, 158, 11, 0.22) !important;
  border-color: #f59e0b !important;
  color: #ffffff !important;
}

.btn-pause-state-paused {
  background: rgba(16, 185, 129, 0.16) !important;
  border: 1.5px solid #10b981 !important;
  color: #34d399 !important;
  box-shadow: 0 0 16px rgba(16, 185, 129, 0.35) !important;
  animation: pulse-resume-btn 1.6s infinite alternate ease-in-out;
}

.btn-pause-state-paused:hover {
  background: rgba(16, 185, 129, 0.32) !important;
  border-color: #34d399 !important;
  color: #ffffff !important;
  box-shadow: 0 0 24px rgba(16, 185, 129, 0.55) !important;
}

@keyframes pulse-resume-btn {
  0% { transform: scale(1); box-shadow: 0 0 8px rgba(16, 185, 129, 0.25); }
  100% { transform: scale(1.02); box-shadow: 0 0 20px rgba(16, 185, 129, 0.6); }
}

.host-active-footer-actions .btn-danger-outline {
  flex: 1;
  padding: 10px 14px;
  border-radius: var(--radius-xl);
  font-size: 0.84rem;
  justify-content: center;
}

/* Winner Banner Redesign as Floating Modal */
.winner-banner {
  position: fixed !important;
  top: 50% !important;
  left: 50% !important;
  transform: translate(-50%, -50%) !important;
  z-index: 10050 !important;
  width: min(92vw, 440px) !important;
  max-height: min(88vh, 620px) !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
  box-sizing: border-box !important;
  margin: 0 !important;
  background: linear-gradient(135deg, rgba(20, 30, 48, 0.98), rgba(10, 18, 30, 0.99)) !important;
  backdrop-filter: blur(20px) !important;
  -webkit-backdrop-filter: blur(20px) !important;
  border: 2px solid var(--color-gold) !important;
  border-radius: var(--radius-2xl) !important;
  box-shadow: 0 25px 60px rgba(0, 0, 0, 0.85), 0 0 35px rgba(245, 158, 11, 0.45) !important;
  padding: 18px 14px 16px !important;
  text-align: center;
  scrollbar-width: thin;
  scrollbar-color: rgba(245, 158, 11, 0.45) transparent;
  animation: daberna-modal-pop 0.32s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

.winner-banner::-webkit-scrollbar {
  width: 5px;
}

.winner-banner::-webkit-scrollbar-track {
  background: transparent;
}

.winner-banner::-webkit-scrollbar-thumb {
  background: rgba(245, 158, 11, 0.45);
  border-radius: 10px;
}

.winner-banner .btn-close-banner {
  top: 12px;
  left: 12px;
  width: 38px;
  height: 38px;
  border-radius: var(--radius-full);
  background:
    radial-gradient(circle at 50% 35%, rgba(255, 255, 255, 0.18), transparent 55%),
    rgba(15, 23, 42, 0.84);
  border: 1px solid rgba(250, 204, 21, 0.48);
  color: #fef3c7;
  box-shadow:
    0 10px 24px rgba(0, 0, 0, 0.35),
    0 0 0 1px rgba(255, 255, 255, 0.06) inset,
    0 0 18px rgba(245, 158, 11, 0.2);
  transition: transform 160ms ease, background 160ms ease, border-color 160ms ease, color 160ms ease, box-shadow 160ms ease;
}

.winner-banner .btn-close-banner:hover,
.winner-banner .btn-close-banner:focus-visible {
  background:
    radial-gradient(circle at 50% 35%, rgba(255, 255, 255, 0.24), transparent 55%),
    rgba(120, 53, 15, 0.95);
  border-color: rgba(253, 224, 71, 0.86);
  color: #ffffff;
  transform: translateY(-1px) scale(1.04);
  box-shadow:
    0 12px 30px rgba(0, 0, 0, 0.42),
    0 0 0 3px rgba(245, 158, 11, 0.18),
    0 0 22px rgba(245, 158, 11, 0.36);
  outline: none;
}

.winner-banner .btn-close-banner:active {
  transform: scale(0.94);
}

.winner-banner.hidden {
  display: none !important;
}

@keyframes daberna-modal-pop {
  from {
    opacity: 0;
    transform: translate(-50%, -46%) scale(0.92);
  }
  to {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1);
  }
}

.winner-title {
  font-size: 1.3rem;
  font-weight: 900;
  color: var(--color-gold);
  text-shadow: 0 0 12px rgba(245, 158, 11, 0.5);
  margin-bottom: 8px;
}

.winner-actions-bar {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-top: 10px;
}

.btn-next-round {
  min-height: 44px;
  padding: 8px 14px;
  border-radius: var(--radius-xl);
  font-size: 0.92rem;
  font-weight: 800;
}

/* ===================================================
   PHASE 7: WIN STAGES, RESULTS & MODAL POLISH
   =================================================== */

.milestone-badge-row {
  background: var(--color-surface2) !important;
  padding: 8px 12px !important;
  border-radius: var(--radius-lg) !important;
  font-size: 0.84rem !important;
  margin-top: 5px !important;
  text-align: right !important;
  border: 1px solid var(--color-line) !important;
  display: flex !important;
  align-items: center !important;
  gap: 6px !important;
  color: #ffffff !important;
}

.winner-banner.milestone-onerow {
  background: linear-gradient(135deg, rgba(245, 158, 11, 0.25), rgba(18, 26, 43, 0.95)) !important;
  border: 2px solid var(--color-gold) !important;
  box-shadow: 0 0 30px rgba(245, 158, 11, 0.4) !important;
}

.winner-banner.milestone-tworows {
  background: linear-gradient(135deg, rgba(203, 213, 225, 0.25), rgba(18, 26, 43, 0.95)) !important;
  border: 2px solid #cbd5e1 !important;
  box-shadow: 0 0 30px rgba(203, 213, 225, 0.4) !important;
}

.winner-banner.milestone-main {
  background: linear-gradient(135deg, rgba(240, 71, 60, 0.35), rgba(245, 158, 11, 0.3), rgba(18, 26, 43, 0.98)) !important;
  border: 2px solid var(--color-gold) !important;
  box-shadow: 0 0 45px rgba(245, 158, 11, 0.6) !important;
  animation: pulseMain 2s infinite alternate, daberna-pop 0.4s ease !important;
}

/* Compact Intermediate Milestone Toast (Single-Row / Two-Rows when game continues) */
.winner-banner.banner-intermediate {
  position: fixed !important;
  top: max(14px, env(safe-area-inset-top, 14px)) !important;
  left: 50% !important;
  transform: translateX(-50%) !important;
  width: max-content !important;
  max-width: min(92vw, 440px) !important;
  max-height: none !important;
  padding: 8px 18px !important;
  border-radius: var(--radius-full) !important;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.7), 0 0 20px rgba(245, 158, 11, 0.4) !important;
  pointer-events: none !important;
  animation: slideInIntermediatePill 0.32s cubic-bezier(0.16, 1, 0.3, 1) !important;
  overflow: visible !important;
  text-align: center !important;
  z-index: 10050 !important;
}

@keyframes slideInIntermediatePill {
  from {
    opacity: 0;
    transform: translate(-50%, -18px) scale(0.95);
  }
  to {
    opacity: 1;
    transform: translate(-50%, 0) scale(1);
  }
}

.winner-banner.banner-intermediate .btn-close-banner {
  display: none !important;
}

.winner-banner.banner-intermediate .winner-title {
  display: none !important;
}

.winner-banner.banner-intermediate .intermediate-milestone-box {
  display: flex;
  flex-direction: column;
  gap: 2px;
  align-items: center;
  justify-content: center;
}

.winner-banner.banner-intermediate .intermediate-winner-line {
  font-size: 0.88rem;
  font-weight: 800;
  color: #ffffff;
  line-height: 1.35;
}

.winner-banner.banner-intermediate .intermediate-winner-line b {
  color: #fef08a;
}

.winner-banner.banner-intermediate .intermediate-hint-line {
  font-size: 0.78rem;
  font-weight: 600;
  color: #93c5fd;
  line-height: 1.25;
}

.winner-banner.banner-intermediate .winner-actions-bar,
.winner-banner.banner-intermediate .round-scoreboard {
  display: none !important;
}

/* Final Scoreboard & Podium */
.round-scoreboard {
  margin-top: 10px;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  padding-top: 8px;
}

.round-scoreboard-title {
  font-size: 0.9rem;
  font-weight: 800;
  color: var(--color-gold);
  margin-bottom: 6px;
}

.round-podium-container {
  display: flex;
  justify-content: center;
  align-items: flex-end;
  gap: 8px;
  margin: 10px 0 6px 0;
  direction: ltr;
}

.podium-col {
  display: flex;
  flex-direction: column;
  align-items: center;
  flex: 1;
  max-width: 100px;
}

.podium-avatar {
  font-size: 1.35rem;
  margin-bottom: 2px;
}

.podium-col.rank-1 .podium-avatar {
  font-size: 1.65rem;
  animation: bounceSlow 1.5s infinite alternate;
}

.podium-player-name {
  font-size: 0.76rem;
  font-weight: 700;
  color: #ffffff;
  text-align: center;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 90px;
  margin-bottom: 2px;
}

.podium-player-score {
  font-size: 0.72rem;
  font-weight: 800;
  color: var(--color-gold);
  margin-bottom: 3px;
}

.podium-pillar {
  width: 100%;
  border-radius: var(--radius-md) var(--radius-md) 0 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1rem;
  font-weight: 900;
  color: #ffffff;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
}

.podium-col.rank-1 .podium-pillar {
  height: 72px;
  background: linear-gradient(180deg, #f59e0b, #b45309);
  border: 1px solid #fde047;
}

.podium-col.rank-2 .podium-pillar {
  height: 56px;
  background: linear-gradient(180deg, #94a3b8, #475569);
  border: 1px solid #cbd5e1;
}

.podium-col.rank-3 .podium-pillar {
  height: 42px;
  background: linear-gradient(180deg, #b45309, #78350f);
  border: 1px solid #d97706;
}

.podium-stage-badge {
  font-size: 0.68rem;
  font-weight: 800;
  padding: 1px 7px;
  border-radius: 6px;
  margin-bottom: 3px;
  white-space: nowrap;
  letter-spacing: -0.2px;
}

.podium-col.rank-1 .podium-stage-badge {
  background: rgba(245, 158, 11, 0.25);
  border: 1px solid #fde047;
  color: #fef08a;
}

.podium-col.rank-2 .podium-stage-badge {
  background: rgba(148, 163, 184, 0.25);
  border: 1px solid #cbd5e1;
  color: #f1f5f9;
}

.podium-col.rank-3 .podium-stage-badge {
  background: rgba(217, 119, 6, 0.25);
  border: 1px solid #f59e0b;
  color: #fed7aa;
}

.winner-waiting-pill {
  background: var(--color-surface2);
  border: 1px solid var(--color-line);
  padding: 8px 14px;
  border-radius: var(--radius-full);
  font-size: 0.82rem;
  font-weight: 700;
  color: var(--color-mist);
  display: inline-block;
  text-align: center;
}

/* Coordinated final-result reveal. Card destruction is added in the next phase. */
body.game-finale-active {
  overflow: hidden;
}

#game-finale-layer {
  position: fixed;
  inset: 0;
  z-index: 10055;
  overflow: hidden;
  pointer-events: none;
  direction: ltr;
}

/* ===================================================
   GOLDEN EMBER & ASH DISSOLVE (FINALE EFFECT)
   =================================================== */
.daberna-card-wrapper.card-finale-ember {
  border-color: rgba(245, 158, 11, 0.45) !important;
  box-shadow: 0 0 22px rgba(245, 158, 11, 0.22) !important;
  transition: border-color 0.4s ease, box-shadow 0.4s ease !important;
  pointer-events: none !important;
}

.daberna-cell.cell-ember-dissolve {
  animation: cellEmberDissolve 2.5s cubic-bezier(0.25, 0.1, 0.25, 1) forwards !important;
  animation-delay: var(--ember-delay, 0ms) !important;
  will-change: transform, opacity, filter, box-shadow !important;
  pointer-events: none !important;
  position: relative;
}

@keyframes cellEmberDissolve {
  0% {
    transform: scale(1);
    filter: brightness(1);
    opacity: 1;
    box-shadow: 0 0 0 rgba(245, 158, 11, 0);
  }
  20% {
    /* Hot Ember ignition: glowing golden-amber outline & text (~0.5s) */
    transform: scale(1.04);
    filter: brightness(1.35) drop-shadow(0 0 8px rgba(245, 158, 11, 0.95));
    border-color: #f59e0b !important;
    color: #fef08a !important;
    box-shadow: inset 0 0 14px rgba(245, 158, 11, 0.75), 0 0 16px rgba(245, 158, 11, 0.6) !important;
    opacity: 1;
  }
  55% {
    /* Charring ash and incandescent ember glow (~1.4s) */
    transform: scale(0.97) translateY(-2px);
    filter: brightness(1.15) drop-shadow(0 0 8px rgba(239, 68, 68, 0.8));
    border-color: #ef4444 !important;
    color: #f97316 !important;
    opacity: 0.82;
  }
  85% {
    /* Disintegrating into burning ash (~2.1s) */
    transform: scale(0.9) translateY(-6px);
    filter: blur(1.5px) brightness(0.85);
    opacity: 0.45;
    border-color: rgba(239, 68, 68, 0.4) !important;
  }
  100% {
    /* Dissolve softly into floating ash (~2.5s) */
    transform: scale(0.82) translateY(-10px);
    filter: blur(4px) brightness(0.5);
    opacity: 0;
    border-color: transparent !important;
  }
}

.daberna-cell.cell-winner-gold-crown {
  animation: winningGoldCrownPulse 1.2s ease-in-out infinite alternate !important;
  border-color: #fde047 !important;
  color: #ffffff !important;
  background: linear-gradient(135deg, rgba(245, 158, 11, 0.35), rgba(217, 119, 6, 0.6)) !important;
  box-shadow: 0 0 22px rgba(250, 204, 21, 0.9), inset 0 0 12px rgba(254, 240, 138, 0.75) !important;
  z-index: 5 !important;
  pointer-events: none !important;
}

@keyframes winningGoldCrownPulse {
  0% {
    transform: scale(1.03);
    box-shadow: 0 0 14px rgba(245, 158, 11, 0.75), inset 0 0 8px rgba(254, 240, 138, 0.5);
  }
  100% {
    transform: scale(1.08);
    box-shadow: 0 0 30px rgba(251, 191, 36, 1), inset 0 0 18px rgba(255, 255, 255, 0.85);
  }
}

.golden-ember-spark {
  position: fixed;
  border-radius: 50%;
  pointer-events: none;
  background: radial-gradient(circle, #fef08a 25%, #f59e0b 65%, rgba(239, 68, 68, 0) 100%);
  box-shadow: 0 0 6px #f59e0b, 0 0 12px #ef4444;
  animation: floatEmberAsh var(--ember-dur, 2100ms) var(--ember-delay, 0ms) cubic-bezier(0.22, 1, 0.36, 1) forwards;
  will-change: transform, opacity;
  z-index: 10057;
}

@keyframes floatEmberAsh {
  0% {
    transform: translate3d(0, 0, 0) scale(1) rotate(0deg);
    opacity: 1;
  }
  50% {
    transform: translate3d(calc(var(--ember-drift-x, 0px) * 0.6), calc(var(--ember-drift-y, -60px) * 0.5), 0) scale(1.3) rotate(45deg);
    opacity: 0.9;
  }
  100% {
    transform: translate3d(var(--ember-drift-x, 0px), var(--ember-drift-y, -90px), 0) scale(0.3) rotate(90deg);
    opacity: 0;
  }
}

.finale-card-fragment {
  position: fixed;
  z-index: 10056;
  display: grid;
  place-items: center;
  overflow: hidden;
  color: rgba(255, 255, 255, 0.76);
  font-size: 0.68rem;
  font-weight: 900;
  border: 1px solid rgba(148, 163, 184, 0.32);
  background:
    linear-gradient(145deg, rgba(45, 66, 98, 0.98), rgba(15, 28, 48, 0.98));
  box-shadow: inset 0 0 9px rgba(255, 255, 255, 0.05), 0 5px 12px rgba(0, 0, 0, 0.38);
  animation: finale-fragment-fall 820ms var(--fragment-delay) cubic-bezier(0.35, 0, 0.75, 0.35) both;
  will-change: transform, opacity, filter;
}

.finale-card-fragment::after {
  content: '';
  position: absolute;
  inset: 12%;
  border: 1px solid rgba(245, 158, 11, 0.16);
  border-radius: 3px;
}

.fragment-variant-0 { clip-path: polygon(0 0, 92% 5%, 100% 83%, 12% 100%); }
.fragment-variant-1 { clip-path: polygon(7% 0, 100% 8%, 91% 100%, 0 88%); }
.fragment-variant-2 { clip-path: polygon(0 9%, 88% 0, 100% 91%, 9% 100%); }
.fragment-variant-3 { clip-path: polygon(12% 0, 100% 0, 90% 88%, 0 100%); }

.finale-winner-card-flight {
  position: fixed !important;
  z-index: 10060 !important;
  margin: 0 !important;
  transform-origin: center;
  pointer-events: none !important;
  border-color: #fde047 !important;
  box-shadow:
    0 0 22px rgba(245, 158, 11, 0.72),
    0 0 54px rgba(245, 158, 11, 0.34) !important;
  animation: finale-winner-card-flight 980ms 90ms cubic-bezier(0.16, 1, 0.3, 1) both !important;
  will-change: transform, opacity, filter;
}

.finale-card-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  margin: 2px auto 10px;
  padding: 5px 12px;
  border: 1px solid rgba(253, 224, 71, 0.72);
  border-radius: var(--radius-full);
  color: #fef08a;
  background: linear-gradient(135deg, rgba(180, 83, 9, 0.38), rgba(245, 158, 11, 0.12));
  box-shadow: 0 0 14px rgba(245, 158, 11, 0.24);
  font-size: 0.78rem;
  font-weight: 900;
}

.finale-card-badge span {
  color: #fde047;
  text-shadow: 0 0 8px rgba(253, 224, 71, 0.9);
}

body.game-finale-active::after {
  content: '';
  position: fixed;
  inset: 0;
  z-index: 10020;
  pointer-events: none;
  background:
    radial-gradient(circle at 50% 42%, rgba(245, 158, 11, 0.16), transparent 32%),
    rgba(3, 7, 18, 0.74);
  backdrop-filter: blur(5px) saturate(0.78);
  -webkit-backdrop-filter: blur(5px) saturate(0.78);
  animation: finale-backdrop-in 360ms ease-out both;
}

body.game-finale-active::before {
  content: '';
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: min(120vw, 620px);
  height: min(120vh, 620px);
  z-index: 10030;
  pointer-events: none;
  border-radius: var(--radius-full);
  background: conic-gradient(
    from 180deg,
    transparent 0 18%,
    rgba(254, 240, 138, 0.14) 22%,
    transparent 27% 60%,
    rgba(245, 158, 11, 0.15) 65%,
    transparent 70%
  );
  filter: blur(16px);
  animation: finale-halo-turn 7s linear infinite;
}

.winner-banner.finale-entering {
  animation: finale-banner-in 680ms cubic-bezier(0.16, 1, 0.3, 1) both !important;
}

.winner-banner.finale-entering .finale-reveal-item {
  opacity: 0;
  animation: finale-item-rise 520ms cubic-bezier(0.16, 1, 0.3, 1) both;
  animation-delay: calc(180ms + (var(--finale-order, 0) * 110ms));
}

.winner-banner.finale-entering .podium-col.rank-1.finale-reveal-item {
  animation-name: finale-champion-rise;
}

.winner-banner.finale-entering .podium-col.rank-1 .podium-avatar {
  animation: finale-crown-drop 650ms 750ms cubic-bezier(0.16, 1, 0.3, 1) both !important;
}

@keyframes finale-source-card-out {
  from { opacity: 1; transform: scale(1); filter: brightness(1); }
  to { opacity: 0; transform: scale(0.985); filter: brightness(1.35) blur(1px); }
}

@keyframes finale-fragment-fall {
  0% {
    opacity: 0;
    transform: translate3d(0, 0, 0) rotate(0deg) scale(0.96);
    filter: brightness(1.45);
  }
  16% { opacity: 1; }
  100% {
    opacity: 0;
    transform:
      translate3d(var(--fragment-x), var(--fragment-y), 0)
      rotate(var(--fragment-rotate))
      scale(0.72);
    filter: brightness(0.62) blur(1.5px);
  }
}

@keyframes finale-winner-card-flight {
  0% {
    opacity: 0;
    transform: translate3d(0, 0, 0) scale(0.96) rotate(0deg);
    filter: brightness(1.8);
  }
  18% {
    opacity: 1;
    transform: translate3d(0, -5px, 0) scale(1.025) rotate(-1deg);
    filter: brightness(1.18);
  }
  76% {
    opacity: 1;
    transform:
      translate3d(var(--winner-flight-x), var(--winner-flight-y), 0)
      scale(0.3)
      rotate(5deg);
    filter: brightness(1.6);
  }
  100% {
    opacity: 0;
    transform:
      translate3d(var(--winner-flight-x), var(--winner-flight-y), 0)
      scale(0.16)
      rotate(8deg);
    filter: brightness(2) blur(2px);
  }
}

@keyframes finale-backdrop-in {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes finale-banner-in {
  0% {
    opacity: 0;
    transform: translate(-50%, -44%) scale(0.88);
    filter: brightness(1.8) blur(5px);
  }
  62% {
    opacity: 1;
    transform: translate(-50%, -51%) scale(1.025);
    filter: brightness(1.12) blur(0);
  }
  100% {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1);
    filter: brightness(1) blur(0);
  }
}

@keyframes finale-item-rise {
  from {
    opacity: 0;
    transform: translateY(18px) scale(0.94);
    filter: blur(3px);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
    filter: blur(0);
  }
}

@keyframes finale-champion-rise {
  0% {
    opacity: 0;
    transform: translateY(36px) scale(0.86);
    filter: brightness(1.6) blur(4px);
  }
  72% {
    opacity: 1;
    transform: translateY(-5px) scale(1.045);
    filter: brightness(1.16) blur(0);
  }
  100% {
    opacity: 1;
    transform: translateY(0) scale(1);
    filter: brightness(1) blur(0);
  }
}

@keyframes finale-crown-drop {
  0% { opacity: 0; transform: translateY(-24px) rotate(-10deg) scale(1.35); }
  68% { opacity: 1; transform: translateY(3px) rotate(4deg) scale(0.96); }
  100% { opacity: 1; transform: translateY(0) rotate(0) scale(1); }
}

@keyframes finale-halo-turn {
  to { transform: rotate(360deg); }
}

/* ===================================================
   Phase 4A: Combo Hierarchy, Sparks & Near-Win Wave
   =================================================== */

/* Card wrappers combo halo */
.daberna-card-wrapper {
  transition: border-color 240ms ease-out, box-shadow 240ms ease-out !important;
}

.daberna-card-wrapper.card-combo-tier-1 {
  border-color: rgba(6, 182, 212, 0.4) !important;
  box-shadow: 0 0 12px rgba(6, 182, 212, 0.22) !important;
}

.daberna-card-wrapper.card-combo-tier-2 {
  border-color: rgba(168, 85, 247, 0.5) !important;
  box-shadow: 0 0 16px rgba(168, 85, 247, 0.32) !important;
}

.daberna-card-wrapper.card-combo-tier-3 {
  border-color: rgba(245, 158, 11, 0.65) !important;
  box-shadow: 0 0 20px rgba(245, 158, 11, 0.4), 0 0 8px rgba(239, 68, 68, 0.22) !important;
}

/* Combo sparks on cell mark */
.combo-spark {
  position: fixed;
  z-index: 10040;
  pointer-events: none;
  font-size: 0.85rem;
  font-weight: 900;
  animation: combo-spark-pop 460ms ease-out forwards;
  will-change: transform, opacity;
}

.combo-spark.purple {
  color: #c084fc;
  text-shadow: 0 0 8px rgba(168, 85, 247, 0.9);
}

.combo-spark.gold {
  color: #fde047;
  text-shadow: 0 0 10px rgba(245, 158, 11, 0.95);
}

@keyframes combo-spark-pop {
  0% {
    opacity: 1;
    transform: translate(-50%, -50%) scale(0.6);
  }
  50% {
    opacity: 0.9;
    transform: translate(calc(-50% + var(--spark-x, 0px)), calc(-50% + var(--spark-y, -20px))) scale(1.15);
  }
  100% {
    opacity: 0;
    transform: translate(calc(-50% + var(--spark-x, 0px) * 1.3), calc(-50% + var(--spark-y, -20px) - 8px)) scale(0.35);
  }
}

/* Near-Win / One-Away Row Tension */
.daberna-cell.row-near-win {
  border-top: 1.5px solid rgba(245, 158, 11, 0.55) !important;
  border-bottom: 1.5px solid rgba(245, 158, 11, 0.55) !important;
  animation: row-near-win-wave 2.2s ease-in-out infinite;
}

.daberna-cell.row-near-win[data-col="0"] {
  border-left: 1.5px solid rgba(245, 158, 11, 0.55) !important;
}

.daberna-cell.row-near-win[data-col="8"] {
  border-right: 1.5px solid rgba(245, 158, 11, 0.55) !important;
}

@keyframes row-near-win-wave {
  0%, 100% {
    border-top-color: rgba(245, 158, 11, 0.35);
    border-bottom-color: rgba(245, 158, 11, 0.35);
    box-shadow: inset 0 0 2px rgba(245, 158, 11, 0.08);
  }
  50% {
    border-top-color: rgba(251, 191, 36, 0.9);
    border-bottom-color: rgba(251, 191, 36, 0.9);
    box-shadow: inset 0 0 6px rgba(245, 158, 11, 0.22), 0 0 8px rgba(245, 158, 11, 0.16);
  }
}

/* ===================================================
   FASTEST PLAYER RIBBON (PHASE 4B / ZERO-HEIGHT OVERLAY)
   =================================================== */
.fastest-player-ribbon {
  position: fixed !important;
  top: max(14px, env(safe-area-inset-top, 14px)) !important;
  left: 50% !important;
  transform: translateX(-50%) !important;
  margin: 0 !important;
  width: max-content;
  max-width: min(92vw, 420px);
  z-index: var(--z-toast, 9999) !important;
  pointer-events: none !important;
  display: flex;
  align-items: center;
  justify-content: center;
  animation: ribbonPopIn 0.32s cubic-bezier(0.175, 0.885, 0.32, 1.25) forwards;
  transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.3s ease, filter 0.3s ease;
  will-change: transform, opacity;
}

.fastest-player-ribbon.hidden {
  display: none !important;
}

.fastest-player-ribbon .ribbon-body {
  position: relative;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 7px 18px;
  background: linear-gradient(135deg, rgba(15, 23, 42, 0.96), rgba(30, 41, 59, 0.96));
  border: 1.5px solid #06b6d4;
  border-radius: 9999px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.65), 0 0 16px rgba(6, 182, 212, 0.4);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  color: #e0f2fe;
  font-size: 0.85rem;
  font-weight: 700;
  text-align: center;
  z-index: 2;
}

.fastest-player-ribbon .ribbon-icon {
  font-size: 1.1rem;
  line-height: 1;
}

.fastest-player-ribbon.golden .ribbon-body {
  background: linear-gradient(135deg, rgba(26, 18, 7, 0.97), rgba(69, 39, 16, 0.97));
  border-color: #f59e0b;
  box-shadow: 0 8px 26px rgba(0, 0, 0, 0.75), 0 0 22px rgba(245, 158, 11, 0.55);
  color: #fef08a;
}

/* Ribbon decorative tails */
.fastest-player-ribbon .ribbon-tail-left,
.fastest-player-ribbon .ribbon-tail-right {
  position: relative;
  width: 14px;
  height: 22px;
  background: rgba(15, 23, 42, 0.9);
  border: 1.5px solid #06b6d4;
  z-index: 1;
}

.fastest-player-ribbon .ribbon-tail-left {
  margin-right: -4px;
  border-right: none;
  clip-path: polygon(100% 0, 0 50%, 100% 100%);
  transform: rotate(180deg);
}

.fastest-player-ribbon .ribbon-tail-right {
  margin-left: -4px;
  border-left: none;
  clip-path: polygon(0 0, 100% 50%, 0 100%);
  transform: rotate(180deg);
}

.fastest-player-ribbon.golden .ribbon-tail-left,
.fastest-player-ribbon.golden .ribbon-tail-right {
  background: rgba(40, 25, 8, 0.9);
  border-color: #f59e0b;
}

@keyframes ribbonPopIn {
  0% {
    opacity: 0;
    transform: translate(-50%, -18px) scale(0.88);
  }
  70% {
    opacity: 1;
    transform: translate(-50%, 2px) scale(1.02);
  }
  100% {
    opacity: 1;
    transform: translate(-50%, 0) scale(1);
  }
}

/* Collapsing towards HUD after 1.2s */
.fastest-player-ribbon.collapsing-to-hud {
  opacity: 0;
  transform: translate(-50%, -24px) scale(0.85);
  filter: blur(2px);
  pointer-events: none;
}

/* HUD Docked Fastest Item in speed-hud-bar */
.hud-fastest-item {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 2px 8px;
  border-radius: 20px;
  background: rgba(245, 158, 11, 0.12);
  border: 1px solid rgba(245, 158, 11, 0.45);
  font-size: 0.82rem;
  max-width: 135px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  flex-shrink: 1;
  animation: hudDockPulse 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  transition: all 0.25s ease;
}

.hud-fastest-item.golden {
  background: rgba(245, 158, 11, 0.22);
  border-color: rgba(245, 158, 11, 0.75);
  box-shadow: 0 0 10px rgba(245, 158, 11, 0.35);
}

.fastest-badge {
  font-weight: 800;
  color: #fbbf24;
  max-width: 80px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  display: inline-block;
  vertical-align: middle;
}

@keyframes hudDockPulse {
  0% {
    transform: scale(0.75);
    opacity: 0;
  }
  50% {
    transform: scale(1.1);
  }
  100% {
    transform: scale(1);
    opacity: 1;
  }
}

/* ===================================================
   SVG ICONS & EMBEDDED SPRITE (PHASE 5A)
   =================================================== */
.svg-inline-icon {
  display: inline-block;
  width: 1.15em;
  height: 1.15em;
  vertical-align: -0.18em;
  fill: currentColor;
  flex-shrink: 0;
}

.setting-row-icon .svg-inline-icon {
  width: 24px;
  height: 24px;
}

/* ===================================================
   HOST ADVANCED SETTINGS ACCORDION (PHASE 5A)
   =================================================== */
.host-advanced-accordion {
  margin-top: 14px;
  border: 1px solid var(--border-color);
  border-radius: 12px;
  background: rgba(15, 23, 42, 0.65);
  overflow: hidden;
  transition: border-color 0.25s ease, background 0.25s ease;
}

.host-advanced-accordion[open] {
  border-color: rgba(56, 189, 248, 0.4);
  background: rgba(15, 23, 42, 0.88);
}

.host-accordion-summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 14px;
  cursor: pointer;
  font-size: 0.9rem;
  font-weight: 700;
  color: var(--text-main);
  user-select: none;
  list-style: none;
}

.host-accordion-summary::-webkit-details-marker {
  display: none;
}

.host-accordion-summary .accordion-chevron {
  transition: transform 0.25s ease;
  font-size: 0.85rem;
  color: var(--text-muted);
}

.host-advanced-accordion[open] .accordion-chevron {
  transform: rotate(180deg);
  color: #38bdf8;
}

.host-accordion-content {
  padding: 6px 12px 14px 12px;
  border-top: 1px solid rgba(255, 255, 255, 0.07);
}

.host-accordion-content .setting-card:last-child {
  margin-bottom: 0;
}

/* ===================================================
   AMBIENT BACKGROUND PARTICLES (PHASE 5A)
   =================================================== */
.ambient-particles {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  overflow: hidden;
}

.ambient-particle {
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
  opacity: 0.06;
  background: radial-gradient(circle, rgba(56, 189, 248, 0.85) 0%, rgba(14, 165, 233, 0) 70%);
  animation: ambientFloat linear infinite;
  will-change: transform, opacity;
}

.ambient-particles.duel-mode .ambient-particle {
  background: radial-gradient(circle, rgba(244, 63, 94, 0.9) 0%, rgba(244, 63, 94, 0) 70%);
}

.ambient-particles.finale-mode .ambient-particle {
  background: radial-gradient(circle, rgba(251, 191, 36, 0.95) 0%, rgba(245, 158, 11, 0) 70%);
}

@keyframes ambientFloat {
  0% {
    transform: translateY(105vh) translateX(0) scale(0.85);
    opacity: 0;
  }
  20% {
    opacity: 0.065;
  }
  80% {
    opacity: 0.065;
  }
  100% {
    transform: translateY(-10vh) translateX(var(--drift-x, 24px)) scale(1.15);
    opacity: 0;
  }
}

/* ===================================================
   PHASE 5B: RESPONSIVE DESKTOP 2-COLUMN & MOBILE ADAPTATION
   =================================================== */

/* Mobile Layout Preservation (< 992px) */
@media (max-width: 991.98px) {
  .player-desktop-grid,
  .player-main-column,
  .player-side-column {
    display: contents;
  }

  /* Strict Mobile Visual Order */
  .player-header-panel { order: 1; }
  .speed-hud-bar { order: 2; }
  #duel-battle-hud { order: 3; }
  #duel-tug-wrapper { order: 4; }
  .player-current-number-card { order: 5; }
  #fastest-player-ribbon { order: 6; }
  #player-waiting-notice { order: 7; }
  #player-cards-container { order: 8; }
  .player-history-card { order: 9; }

  .host-desktop-grid {
    display: flex;
    flex-direction: column;
    gap: 14px;
    width: 100%;
  }

  .host-main-column,
  .host-side-column {
    display: flex;
    flex-direction: column;
    gap: 14px;
    width: 100%;
    min-width: 0;
  }
}

/* Desktop 2-Column Responsive Layout (>= 992px) */
@media (min-width: 992px) {
  body {
    max-width: 1060px;
    padding-left: 28px;
    padding-right: 28px;
  }

  .app-header {
    margin-bottom: 24px;
  }

  /* Player Desktop 2-Column Grid */
  .player-desktop-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.4fr) minmax(320px, 0.95fr);
    gap: 24px;
    align-items: start;
    width: 100%;
  }

  .player-main-column {
    display: flex;
    flex-direction: column;
    gap: 16px;
    min-width: 0;
  }

  .player-side-column {
    display: flex;
    flex-direction: column;
    gap: 16px;
    position: sticky;
    top: 16px;
    min-width: 0;
  }

  /* Host Desktop 2-Column Grid */
  .host-desktop-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.35fr) minmax(320px, 1fr);
    gap: 24px;
    align-items: start;
    width: 100%;
  }

  .host-main-column {
    display: flex;
    flex-direction: column;
    gap: 16px;
    min-width: 0;
  }

  .host-side-column {
    display: flex;
    flex-direction: column;
    gap: 16px;
    position: sticky;
    top: 16px;
    min-width: 0;
  }

  /* Desktop Home Flow & Lobby Polish */
  #view-home {
    max-width: 780px;
    margin: 0 auto;
  }
}

@media (prefers-reduced-motion: reduce) {
  body.game-finale-active::before {
    animation: none !important;
    opacity: 0 !important;
  }
  body.game-finale-active::after {
    animation: none !important;
  }
  .winner-banner.finale-entering,
  .winner-banner.finale-entering .finale-reveal-item,
  .winner-banner.finale-entering .podium-col.rank-1 .podium-avatar {
    animation: none !important;
    opacity: 1 !important;
    filter: none !important;
  }
  #game-finale-layer {
    display: none !important;
  }
  .finale-source-card,
  .finale-source-winner {
    animation: none !important;
    opacity: 0 !important;
  }
  .current-number-val.number-call-enter,
  .num-badge.latest,
  .num-badge.badge-slide-in,
  .cell-mark-stamp,
  .golden-cell-spark,
  .number-flight-ghost,
  .daberna-card-wrapper.card-deal-enter,
  .combo-badge.combo-tier-2,
  .combo-badge.combo-tier-3,
  .daberna-cell.row-near-win,
  .daberna-cell.cell-ember-dissolve,
  .daberna-cell.cell-winner-gold-crown,
  .golden-ember-spark,
  .fastest-player-ribbon,
  .hud-fastest-item,
  .duel-tug-wrapper.tension-80,
  .duel-tug-wrapper.tension-pulse-95,
  .duel-tug-lightning.surge-left .electric-spark-wave,
  .duel-tug-lightning.surge-right .electric-spark-wave {
    animation: none !important;
    transition: none !important;
  }
  .fastest-player-ribbon {
    transform: translateX(-50%) !important;
  }
  .fastest-player-ribbon.collapsing-to-hud {
    transform: translateX(-50%) !important;
    opacity: 0 !important;
  }
  .ambient-particles,
  .duel-tug-lightning {
    display: none !important;
  }
  .golden-cell-spark,
  .number-flight-ghost,
  .combo-spark {
    display: none !important;
  }
  .num-badge.badge-slide-in {
    max-width: none !important;
    transform: none !important;
  }
  .daberna-card-wrapper.card-deal-enter {
    transform: none !important;
    opacity: 1 !important;
  }
  .bordika-splash-overlay {
    display: none !important;
  }
}

/* ===================================================
   BORDIKA CINEMATIC INTRO SPLASH SCREEN
   =================================================== */
.bordika-splash-overlay {
  position: fixed;
  inset: 0;
  z-index: 99999;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background: radial-gradient(circle at center, #0e1b33 0%, #060b14 75%, #03060a 100%);
  overflow: hidden;
  user-select: none;
  touch-action: manipulation;
  transition: opacity 0.45s cubic-bezier(0.4, 0, 0.2, 1), visibility 0.45s ease;
}

.bordika-splash-overlay.splash-closing {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

.bordika-splash-glow {
  position: absolute;
  width: 420px;
  height: 420px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(245, 158, 11, 0.18) 0%, rgba(2, 132, 199, 0.14) 50%, transparent 70%);
  animation: splashGlowPulse 2.8s ease-in-out infinite alternate;
  pointer-events: none;
}

@keyframes splashGlowPulse {
  0% { transform: scale(0.85); opacity: 0.5; }
  100% { transform: scale(1.2); opacity: 0.9; }
}

.bordika-splash-content {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  z-index: 2;
  padding: 20px;
}

/* Stage 1: 3D 13 Ball Entrance */
.splash-ball-13-wrapper {
  position: absolute;
  z-index: 10;
  animation: splashBallEnter 0.9s cubic-bezier(0.18, 0.89, 0.32, 1.28) forwards;
}

.splash-ball-13 {
  position: relative;
  width: 68px;
  height: 68px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #ff5252 0%, #d50000 45%, #8b0000 85%, #4a0000 100%);
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.65), 0 0 20px rgba(239, 68, 68, 0.45);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.splash-ball-13 .ball-shine {
  position: absolute;
  top: 6px;
  left: 10px;
  width: 24px;
  height: 14px;
  border-radius: 50%;
  background: radial-gradient(ellipse at center, rgba(255, 255, 255, 0.75) 0%, transparent 80%);
  transform: rotate(-30deg);
}

.splash-ball-13 .ball-white-circle {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: #ffffff;
  box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.25);
  display: flex;
  align-items: center;
  justify-content: center;
  transform: rotate(-8deg);
}

.splash-ball-13 .ball-13-num {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  font-size: 1.15rem;
  font-weight: 900;
  color: #111827;
  letter-spacing: -0.5px;
  line-height: 1;
}

@keyframes splashBallEnter {
  0% {
    transform: scale(0.1) translate3d(0, -180px, 0) rotate(-140deg);
    opacity: 0;
  }
  60% {
    transform: scale(1.15) translate3d(0, 8px, 0) rotate(15deg);
    opacity: 1;
  }
  80% {
    transform: scale(0.95) translate3d(0, -4px, 0) rotate(-5deg);
  }
  100% {
    transform: scale(1) translate3d(0, 0, 0) rotate(0deg);
    opacity: 1;
  }
}

/* Stage 2: Ribbon B Wraps In */
.splash-ribbon-b-wrapper {
  position: relative;
  width: 150px;
  height: 150px;
  margin-bottom: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  animation: splashRibbonUnfold 1.15s cubic-bezier(0.16, 1, 0.3, 1) 0.5s both;
}

.splash-ribbon-b-img {
  width: 140px;
  height: 140px;
  object-fit: contain;
  filter: drop-shadow(0 14px 28px rgba(0, 0, 0, 0.55)) drop-shadow(0 0 35px rgba(245, 158, 11, 0.38));
}

.splash-ribbon-gleam {
  position: absolute;
  inset: -10px;
  border-radius: 35px;
  background: radial-gradient(circle at 75% 25%, rgba(254, 240, 138, 0.6) 0%, transparent 60%);
  animation: splashGleamFlash 1s ease 1.1s both;
  pointer-events: none;
}

@keyframes splashRibbonUnfold {
  0% {
    transform: scale(0.4) rotate(-25deg);
    opacity: 0;
    filter: blur(8px);
  }
  60% {
    transform: scale(1.06) rotate(4deg);
    opacity: 1;
    filter: blur(0);
  }
  100% {
    transform: scale(1) rotate(0deg);
    opacity: 1;
  }
}

@keyframes splashGleamFlash {
  0% { opacity: 0; transform: scale(0.8); }
  50% { opacity: 0.85; transform: scale(1.15); }
  100% { opacity: 0; transform: scale(1.3); }
}

/* Stage 3: Typography & Slogan Reveal */
.splash-brand-text {
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  animation: splashTextReveal 0.85s cubic-bezier(0.16, 1, 0.3, 1) 1.05s both;
}

.splash-brand-title {
  margin: 0;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  font-size: 2.3rem;
  font-weight: 900;
  color: #ffffff;
  letter-spacing: 0.5px;
  text-shadow: 0 4px 16px rgba(0, 0, 0, 0.6), 0 0 24px rgba(245, 158, 11, 0.35);
  display: flex;
  align-items: center;
  gap: 12px;
}

.splash-title-fa {
  font-family: 'Vazirmatn', -apple-system, BlinkMacSystemFont, sans-serif;
  font-size: 1.7rem;
  font-weight: 800;
  background: linear-gradient(135deg, #fbbf24 0%, #f59e0b 60%, #ea580c 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.splash-brand-slogan {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  font-size: 0.88rem;
  font-weight: 800;
  letter-spacing: 3.5px;
  color: #cbd5e1;
  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.5);
  display: flex;
  align-items: center;
  gap: 8px;
}

.splash-brand-slogan span:nth-child(1) { color: #38bdf8; }
.splash-brand-slogan span:nth-child(2) { color: #fbbf24; }
.splash-brand-slogan span:nth-child(3) { color: #34d399; }

.splash-brand-slogan-fa {
  font-family: 'Vazirmatn', -apple-system, BlinkMacSystemFont, sans-serif;
  font-size: 0.84rem;
  font-weight: 600;
  color: #94a3b8;
  margin-top: 2px;
}

@keyframes splashTextReveal {
  0% {
    transform: translateY(22px);
    opacity: 0;
    filter: blur(4px);
  }
  100% {
    transform: translateY(0);
    opacity: 1;
    filter: blur(0);
  }
}

.splash-skip-btn {
  position: absolute;
  bottom: max(24px, env(safe-area-inset-bottom, 24px));
  background: rgba(15, 23, 42, 0.6);
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 999px;
  padding: 7px 18px;
  color: #94a3b8;
  font-family: 'Vazirmatn', sans-serif;
  font-size: 0.82rem;
  font-weight: 600;
  cursor: pointer;
  backdrop-filter: blur(8px);
  transition: all 0.2s ease;
  z-index: 15;
}

.splash-skip-btn:hover,
.splash-skip-btn:active {
  background: rgba(30, 41, 59, 0.85);
  color: #f1f5f9;
  border-color: rgba(255, 255, 255, 0.35);
  transform: scale(1.04);
}

/* ==========================================================================
   PWA AUTO-UPDATE BANNER & FOOTER CHECK
   ========================================================================== */
.pwa-update-banner {
  position: fixed;
  bottom: max(20px, env(safe-area-inset-bottom, 20px));
  left: 50%;
  transform: translateX(-50%);
  width: min(480px, calc(100% - 28px));
  background: linear-gradient(135deg, rgba(15, 23, 42, 0.96) 0%, rgba(30, 41, 59, 0.96) 100%);
  border: 1px solid rgba(99, 102, 241, 0.5);
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.6), 0 0 24px rgba(99, 102, 241, 0.3);
  border-radius: 18px;
  padding: 14px 16px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  z-index: 100000;
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  animation: pwaBannerSlideUp 0.35s cubic-bezier(0.16, 1, 0.3, 1) forwards;
  direction: rtl;
}

.pwa-update-banner.hidden {
  display: none !important;
}

@keyframes pwaBannerSlideUp {
  0% {
    transform: translate(-50%, 30px) scale(0.95);
    opacity: 0;
  }
  100% {
    transform: translate(-50%, 0) scale(1);
    opacity: 1;
  }
}

.pwa-update-main {
  display: flex;
  align-items: center;
  gap: 12px;
}

.pwa-update-icon {
  font-size: 1.7rem;
  line-height: 1;
  flex-shrink: 0;
  animation: pwaRocketBounce 1.5s ease-in-out infinite alternate;
}

@keyframes pwaRocketBounce {
  0% { transform: translateY(0) rotate(0deg); }
  100% { transform: translateY(-3px) rotate(6deg); }
}

.pwa-update-texts {
  display: flex;
  flex-direction: column;
  gap: 2px;
  flex-grow: 1;
}

.pwa-update-title {
  font-size: 0.95rem;
  font-weight: 700;
  color: #f8fafc;
}

.pwa-update-desc {
  font-size: 0.78rem;
  color: #94a3b8;
  line-height: 1.35;
}

.pwa-update-actions {
  display: flex;
  align-items: center;
  gap: 10px;
}

.btn-update-apply {
  flex-grow: 1;
  background: linear-gradient(135deg, #6366f1 0%, #8b5cf6 100%);
  color: #ffffff;
  border: none;
  border-radius: 12px;
  padding: 9px 16px;
  font-family: 'Vazirmatn', sans-serif;
  font-size: 0.88rem;
  font-weight: 700;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  box-shadow: 0 4px 14px rgba(99, 102, 241, 0.4);
  transition: all 0.2s ease;
}

.btn-update-apply:hover,
.btn-update-apply:active {
  transform: translateY(-1px);
  box-shadow: 0 6px 20px rgba(99, 102, 241, 0.6);
  background: linear-gradient(135deg, #4f46e5 0%, #7c3aed 100%);
}

.btn-update-dismiss {
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 10px;
  width: 36px;
  height: 36px;
  color: #cbd5e1;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.2s ease;
  flex-shrink: 0;
}

.btn-update-dismiss:hover {
  background: rgba(255, 255, 255, 0.15);
  color: #fff;
}

.btn-check-update {
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 999px;
  color: #94a3b8;
  font-family: 'Vazirmatn', sans-serif;
  font-size: 0.72rem;
  padding: 3px 10px;
  margin-right: 8px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  transition: all 0.2s ease;
}

.btn-check-update:hover {
  background: rgba(99, 102, 241, 0.15);
  border-color: rgba(99, 102, 241, 0.4);
  color: #c7d2fe;
}

.spinning {
  animation: spin 1s linear infinite;
  display: inline-block;
}

@keyframes spin {
  100% { transform: rotate(360deg); }
}