/* ═══════════════════════════════════════════════════════════════════ */
/* FORCE PORTRAIT — Block landscape on phones                          */
/* ═══════════════════════════════════════════════════════════════════ */
#landscape-blocker {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 99999;
  background: #0a0a12;
  color: #fff;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 16px;
  font-family: 'Teko', sans-serif;
  text-align: center;
}
#landscape-blocker .rotate-icon {
  font-size: 48px;
}
#landscape-blocker .rotate-text {
  font-size: 22px;
  letter-spacing: 2px;
  color: #ffd740;
}
@media (orientation: landscape) and (max-height: 500px) {
  #landscape-blocker {
    display: flex;
  }
}

/* ═══════════════════════════════════════════════════════════════════ */
/* SPLASH SCREEN — Startup logo reveal                                 */
/* ═══════════════════════════════════════════════════════════════════ */

#splash-screen {
  position: fixed;
  inset: 0;
  z-index: 20000;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 24px;
  opacity: 1;
  transition: opacity 0.8s ease;
  background: radial-gradient(ellipse at center, #1a0a3a 0%, #0e0520 50%, #06020f 100%);
}

#splash-screen.fade-out {
  opacity: 0;
  pointer-events: none;
}

.splash-glow {
  position: absolute;
  width: 400px;
  height: 400px;
  border-radius: 50%;
  pointer-events: none;
  animation: splash-pulse 2.5s ease-in-out infinite;
  background: radial-gradient(circle, rgba(120, 60, 200, 0.15) 0%, transparent 70%);
}

@keyframes splash-pulse {
  0%, 100% { transform: scale(1); opacity: 0.6; }
  50% { transform: scale(1.15); opacity: 1; }
}

.splash-logo {
  position: relative;
  max-width: min(70vw, 480px);
  max-height: min(40vh, 300px);
  object-fit: contain;
  opacity: 0;
  transform: scale(0.9);
  animation: splash-logo-in 1s ease-out 0.3s forwards;
  filter: drop-shadow(0 4px 24px rgba(0, 0, 0, 0.6))
          drop-shadow(0 0 40px rgba(120, 60, 200, 0.2));
}

@keyframes splash-logo-in {
  to {
    opacity: 1;
    transform: scale(1);
  }
}

.splash-tagline {
  position: relative;
  font-size: 14px;
  font-weight: 400;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  opacity: 0;
  animation: splash-tagline-in 0.8s ease-out 1s forwards;
  color: #b8a0d4;
}

@keyframes splash-tagline-in {
  to { opacity: 1; }
}

/* ═══════════════════════════════════════════════════════════════════ */
/* HOME SCREEN — Classic Poker (AAA studio feel, warm & refined)      */
/* ═══════════════════════════════════════════════════════════════════ */

#home-screen {
  position: fixed;
  inset: 0;
  z-index: 10000;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow-y: auto;
  /* background — provided by theme */
}

/* Texture overlay — visual provided by theme */
#home-screen::before {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
}

#home-screen.hidden {
  display: none;
}

/* ═══════════════════════════════════════════════════════════════════ */
/* AUTH SCREEN — Multiplayer login (mirrors home-screen layout)       */
/* ═══════════════════════════════════════════════════════════════════ */

#auth-screen {
  position: fixed;
  inset: 0;
  z-index: 10000;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  background: var(--bg-main, #0a0a12);
}

#auth-screen[style*="display: none"] {
  display: none !important;
}

.home-content {
  position: relative;
  width: 92%;
  max-width: 560px;
  padding: 32px 16px 24px;
  margin: auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  background: linear-gradient(145deg, #1a1a2e 0%, #16213e 50%, #0f3460 100%);
  border: 1px solid rgba(255, 215, 64, 0.3);
  border-radius: 16px;
  box-shadow:
    0 0 40px rgba(255, 215, 64, 0.15),
    0 20px 60px rgba(0, 0, 0, 0.6);
  box-sizing: border-box;
  overflow: hidden;
}

.home-title {
  font-family: var(--font-display);
  font-size: 38px;
  font-weight: 800;
  letter-spacing: 0.06em;
  margin-bottom: 0;
  text-transform: uppercase;
  text-align: center;
  width: 100%;
  /* color, text-shadow — provided by theme */
}

.home-title-img {
  max-width: min(85vw, 420px);
  height: auto;
  object-fit: contain;
  margin-bottom: -4px;
  filter: drop-shadow(0 4px 16px rgba(0, 0, 0, 0.5));
}

/* Decorative rule under title — visual provided by theme */
.home-rule {
  width: 100%;
  height: 2px;
  margin: 8px 0 4px;
  border-radius: 1px;
}

.home-subtitle {
  font-size: 15px;
  font-weight: 400;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  margin-bottom: 28px;
  /* color — provided by theme */
}

.home-menu {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-bottom: 0;
}

.home-btn {
  position: relative;
  width: 100%;
  padding: 14px 18px;
  font-family: 'Teko', sans-serif;
  font-size: 19px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 10px;
  cursor: pointer;
  transition: all 0.2s ease;
  text-align: left;
  color: rgba(255, 255, 255, 0.85);
  background: rgba(255, 255, 255, 0.04);
  box-sizing: border-box;
}

.home-btn:hover:not(:disabled) {
  transform: translateY(-1px);
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(255, 215, 64, 0.4);
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.3);
}

.home-btn:active:not(:disabled) {
  transform: translateY(0px) scale(0.98);
}

.home-btn:disabled {
  cursor: default;
  color: rgba(255, 255, 255, 0.25);
}

/* home-btn-primary, home-btn-store — all visual, provided by theme */

/* Coming Soon badge */
.coming-soon-badge {
  position: absolute;
  top: 50%;
  right: 14px;
  transform: translateY(-50%);
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 8.5px;
  font-weight: 700;
  letter-spacing: 0.1em;
  padding: 3px 8px;
  border-radius: 3px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.3);
  background: rgba(0, 0, 0, 0.3);
}

/* Top buttons row (Tutorial + Strategy Guide) */
.home-top-btns {
  width: 100%;
  display: flex;
  gap: 10px;
}

/* Footer buttons row */
.home-footer-btns {
  width: 100%;
  display: flex;
  gap: 10px;
  margin-top: 4px;
}

.home-btn-small {
  flex: 1;
  padding: 12px 16px 10px;
  font-size: 16px;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
}

/* Badge inside small buttons: inline-flow, not absolute */
.home-btn-small .coming-soon-badge {
  position: static;
  transform: none;
  font-size: 7.5px;
}

/* Phone landscape: tighter spacing */
@media (max-height: 500px) {
  #home-screen { padding: 6px 0; }
  .home-content {
    padding: 14px 20px;
    gap: 4px;
  }
  .home-title { font-size: 24px; }
  .home-title-img { max-width: min(75vw, 280px); }
  .home-rule { width: 100%; margin: 5px 0 2px; }
  .home-subtitle { font-size: 11px; margin-bottom: 10px; }
  .home-menu { gap: 6px; margin-bottom: 10px; }
  .home-btn { padding: 10px 16px; font-size: 16px; border-radius: 8px; }
  .home-btn-small { padding: 8px 12px; font-size: 15px; }
  .coming-soon-badge { font-size: 7.5px; right: 10px; }
  .home-top-btns { gap: 8px; }
  .home-footer-btns { padding-top: 8px; }
  #user-auth-area { padding-top: 8px; }
  .home-nameplate { width: 240px; min-height: 56px; }
}

/* Tablet / large phone portrait */
@media (min-width: 768px) and (min-height: 501px) {
  .home-content { max-width: 600px; padding: 40px 36px 32px; }
  .home-title { font-size: 44px; }
  .home-title-img { max-width: min(80vw, 500px); }
  .home-rule { width: 100%; height: 2px; margin: 10px 0 6px; }
  .home-subtitle { font-size: 16px; margin-bottom: 36px; }
  .home-btn { padding: 16px 22px; font-size: 20px; }
}

/* ═══════════════════════════════════════════════════════════════════ */
/* USER AUTH AREA                                                     */
/* ═══════════════════════════════════════════════════════════════════ */

#user-auth-area {
  width: 100%;
  margin-top: auto;
  padding-top: 18px;
  border-top: 1px solid rgba(255, 215, 64, 0.15);
  display: flex;
  flex-direction: column;
  align-items: center;
}

.auth-state {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}

#auth-signed-out {
  flex-direction: column;
  width: 100%;
  max-width: 260px;
  gap: 10px;
}
#auth-signed-out .tut-welcome-btn,
#auth-signed-out .tut-welcome-dismiss {
  width: 100%;
}

#auth-signed-in {
  flex-direction: column;
  align-items: center;
}

.auth-btn {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 8px 14px;
  font-size: 13px;
  font-weight: 600;
  border-radius: 6px;
  cursor: pointer;
  transition: all 0.2s ease;
  border: 1px solid;
  /* colors provided by theme */
}

.auth-btn:hover {
  transform: translateY(-1px);
}

.auth-icon {
  width: 16px;
  height: 16px;
}

.auth-btn-guest {
  opacity: 0.7;
}

.auth-btn-small {
  padding: 6px 10px;
  font-size: 11px;
}

/* HOME NAMEPLATE — reuses profile-nameplate sub-element styles */
.home-nameplate {
  position: relative;
  display: flex;
  flex-direction: row;
  align-items: stretch;
  width: 320px;
  min-height: 72px;
  border-radius: 10px;
  overflow: hidden;
  border: 1.5px solid rgba(255,255,255,0.15);
  background: linear-gradient(135deg, #1a1a1a 0%, #2a2a2a 100%);
  cursor: pointer;
}

.home-nameplate .profile-nameplate-avatar {
  width: 64px;
  min-width: 64px;
  margin: 6px 0 6px 8px;
}

.home-nameplate .profile-nameplate-avatar img {
  width: 56px;
  height: 56px;
}

.home-nameplate .profile-nameplate-name {
  font-size: 15px;
}

.home-nameplate .profile-nameplate-title {
  font-size: 10px;
}

.home-nameplate .profile-nameplate-stats-row {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  align-items: center;
  gap: 8px;
}

.home-nameplate .profile-nameplate-chips {
  font-size: 14px;
}

.home-signout-btn {
  margin-top: 8px;
}

.home-legal {
  margin-top: 12px;
  font-size: 11px;
  opacity: 0.4;
  text-align: center;
  line-height: 2;
}

.home-legal-link {
  color: rgba(255, 255, 255, 0.7);
  text-decoration: none;
}

.home-legal-btn {
  background: none;
  border: none;
  cursor: pointer;
  font: inherit;
  padding: 0;
}

.home-legal-link:hover {
  text-decoration: underline;
  opacity: 1;
}

.home-legal-sep {
  margin: 0 6px;
  color: rgba(255, 255, 255, 0.3);
}

/* Phone: smaller home nameplate */
@media (max-width: 480px) {
  .auth-btn {
    padding: 6px 10px;
    font-size: 11px;
  }
  .home-nameplate {
    width: 280px;
    min-height: 60px;
  }
  .home-nameplate .profile-nameplate-avatar {
    width: 50px;
    min-width: 50px;
  }
  .home-nameplate .profile-nameplate-avatar img {
    width: 44px;
    height: 44px;
  }
  .home-nameplate .profile-nameplate-name {
    font-size: 13px;
  }
}

/* ═══════════════════════════════════════════════════════════════════ */
/* MULTIPLAYER LOBBY                                                  */
/* ═══════════════════════════════════════════════════════════════════ */

#lobby-screen {
  position: fixed;
  inset: 0;
  z-index: 10000;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  overflow-y: auto;
  /* background — provided by theme */
}

.lobby-content {
  position: relative;
  width: 90%;
  max-width: 480px;
  margin: auto;
  padding: 36px 28px 32px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  background: linear-gradient(145deg, #1a1a2e 0%, #16213e 50%, #0f3460 100%);
  border: 1px solid rgba(255, 215, 64, 0.3);
  border-radius: 16px;
  box-shadow:
    0 0 40px rgba(255, 215, 64, 0.15),
    0 20px 60px rgba(0, 0, 0, 0.6);
  box-sizing: border-box;
  margin: 20px 0;
}

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

.lobby-back-btn {
  font-family: 'Teko', sans-serif;
  font-size: 15px;
  font-weight: 600;
  color: #ffd740;
  background: none;
  border: 1px solid rgba(255, 215, 64, 0.4);
  border-radius: 6px;
  padding: 6px 14px;
  cursor: pointer;
  transition: all 0.15s ease;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.lobby-back-btn:hover { background: rgba(255, 215, 64, 0.1); }
.lobby-back-btn:active { transform: scale(0.95); }

.lobby-title {
  font-family: 'Teko', sans-serif;
  font-size: 28px;
  font-weight: 700;
  letter-spacing: 3px;
  text-transform: uppercase;
  background: linear-gradient(135deg, #ffd740, #ffab00);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.lobby-rule {
  width: 100%;
  height: 2px;
  border-radius: 1px;
  margin: 4px 0;
  background: rgba(255, 215, 64, 0.15);
}

.lobby-section {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 16px 0;
}

.lobby-divider {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 8px 0;
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.1em;
  color: rgba(255, 255, 255, 0.5);
}

.lobby-divider::before,
.lobby-divider::after {
  content: '';
  flex: 1;
  height: 1px;
  background: rgba(255, 215, 64, 0.15);
}

.lobby-join-fields {
  display: flex;
  flex-direction: column;
  gap: 12px;
}


.lobby-join-row {
  display: flex;
  gap: 10px;
}

.lobby-input {
  flex: 1;
  padding: 14px 16px;
  font-family: 'Teko', sans-serif;
  font-size: 18px;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  text-align: center;
  border: 2px solid rgba(255, 255, 255, 0.15);
  border-radius: 10px;
  outline: none;
  transition: all 0.2s ease;
  background: rgba(0, 0, 0, 0.3);
  color: #ffd740;
  box-sizing: border-box;
}

.lobby-input::placeholder {
  letter-spacing: 0.1em;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.3);
}

.lobby-input:focus {
  border-color: rgba(255, 215, 64, 0.5);
  box-shadow: 0 0 12px rgba(255, 215, 64, 0.15);
}

.lobby-join-row .home-btn {
  width: auto;
  min-width: 100px;
}

/* Waiting Room */
.room-code-display {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 16px;
  border-radius: 12px;
  background: rgba(0, 0, 0, 0.3);
  border: 2px solid rgba(255, 215, 64, 0.3);
}

.room-code-label {
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.15em;
  color: rgba(255, 255, 255, 0.5);
}

.room-code-value {
  font-family: 'Teko', sans-serif;
  font-size: 28px;
  font-weight: 900;
  letter-spacing: 0.25em;
  color: #ffd740;
  text-shadow: 0 0 10px rgba(255, 215, 64, 0.3);
}

.room-code-copy {
  padding: 6px;
  background: none;
  border: 1px solid;
  border-radius: 6px;
  cursor: pointer;
  opacity: 0.7;
  transition: all 0.2s ease;
  /* colors provided by theme */
}

.room-code-copy:hover {
  opacity: 1;
  transform: scale(1.05);
}

.player-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 12px 0;
}

.player-list-header {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  /* color provided by theme */
}

.player-slots {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.player-slot {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  border-radius: 8px;
  border: 1px solid;
  transition: all 0.2s ease;
  /* colors provided by theme */
}

.player-slot.empty {
  opacity: 0.4;
  border-style: dashed;
}


.player-slot.ready::before {
  content: '✓';
  font-size: 14px;
  font-weight: 700;
  /* color provided by theme */
}

.player-slot-avatar {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  /* background provided by theme */
}

.player-slot-name {
  font-size: 14px;
  font-weight: 600;
  /* color provided by theme */
}

.player-slot-level {
  font-size: 11px;
  font-weight: 700;
  color: #ffd740;
  font-family: 'Teko', sans-serif;
  letter-spacing: 0.5px;
}

.lobby-actions {
  display: flex;
  gap: 12px;
  padding-top: 8px;
}

.lobby-actions .home-btn {
  flex: 1;
}

.home-btn-ready.is-ready {
  /* Visual feedback when ready — colors provided by theme */
}

.lobby-status {
  text-align: center;
  font-size: 13px;
  font-style: italic;
  margin-top: 8px;
  /* color provided by theme */
}

/* Game Settings (lobby) */
.game-settings {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 12px 0;
}

.game-settings-header {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  /* color provided by theme */
}

.game-settings-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}

.game-setting-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 8px 14px;
  border-radius: 8px;
  border: 1px solid;
  /* colors provided by theme */
}

.game-setting-label {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  white-space: nowrap;
  /* color provided by theme */
}

.game-setting-select {
  appearance: none;
  -webkit-appearance: none;
  border: 1px solid;
  border-radius: 6px;
  padding: 5px 24px 5px 10px;
  font-size: 13px;
  font-weight: 600;
  font-family: inherit;
  cursor: pointer;
  min-width: 80px;
  text-align: right;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%23999'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 8px center;
  /* colors provided by theme */
}

.game-setting-select:disabled {
  opacity: 0.6;
  cursor: default;
}

.game-setting-disabled {
  opacity: 0.4;
  pointer-events: none;
}

.game-setting-coming-soon {
  font-size: 12px;
  font-style: italic;
  font-weight: 500;
  letter-spacing: 0.05em;
  /* color provided by theme */
}

.game-setting-readonly .game-setting-select {
  pointer-events: none;
  opacity: 0.7;
}

/* ── Lobby button-grid settings (mirrors matchmaking style) ── */
.lobby-setting-section {
  margin-bottom: 10px;
}

.lobby-setting-label {
  font-family: 'Teko', sans-serif;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 2px;
  padding-bottom: 4px;
  margin-bottom: 8px;
  border-bottom: 1px solid rgba(255, 215, 64, 0.15);
  color: #ffd740;
  background: linear-gradient(135deg, #ffd740, #ffab00);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.lobby-setting-grid {
  display: grid;
  gap: 8px;
}

.lobby-grid-2 { grid-template-columns: 1fr 1fr; }
.lobby-grid-3 { grid-template-columns: 1fr 1fr 1fr; }

.lobby-option-btn {
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 8px;
  padding: 10px 6px;
  text-align: center;
  cursor: pointer;
  font-family: 'Teko', sans-serif;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 1px;
  color: rgba(255, 255, 255, 0.7);
  transition: all 0.15s ease;
}

.lobby-option-btn.active {
  border-color: #ffd740;
  color: #ffd740;
  background: rgba(255, 215, 64, 0.08);
  box-shadow: 0 0 12px rgba(255, 215, 64, 0.15);
}

.game-setting-readonly .lobby-option-btn {
  pointer-events: none;
  opacity: 0.7;
}

/* Guest read-only settings summary */
.game-settings-summary {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 14px 16px;
  border-radius: 10px;
  background: rgba(0, 0, 0, 0.25);
  border: 1px solid rgba(255, 215, 64, 0.12);
}

.game-settings-summary-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 4px 0;
}

.game-settings-summary-label {
  font-family: 'Teko', sans-serif;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 1.5px;
  color: rgba(255, 255, 255, 0.45);
}

.game-settings-summary-value {
  font-family: 'Teko', sans-serif;
  font-size: 15px;
  font-weight: 600;
  letter-spacing: 0.5px;
  color: #ffd740;
}

/* ── Legal document overlay ── */
#legal-overlay {
  position: fixed;
  inset: 0;
  z-index: 99999;
  background: #070f0a;
  display: flex;
  flex-direction: column;
}

.legal-overlay-header {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 12px 20px;
  background: rgba(7, 15, 10, 0.96);
  border-bottom: 1px solid rgba(201, 168, 76, 0.3);
  flex-shrink: 0;
}

.legal-overlay-back {
  background: none;
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 6px;
  color: #ffd740;
  font-family: 'Teko', sans-serif;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 1px;
  padding: 6px 14px;
  cursor: pointer;
}

.legal-overlay-title {
  font-family: 'Chakra Petch', sans-serif;
  font-size: 16px;
  font-weight: 700;
  color: #f0ead6;
  letter-spacing: 1px;
}

.legal-overlay-iframe {
  flex: 1;
  border: none;
  width: 100%;
  background: #070f0a;
}

.lobby-btn-disabled {
  opacity: 0.25;
  pointer-events: none;
}

.player-slot-bot {
  opacity: 0.7;
}

.player-slot-bot-avatar {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
}

/* Phone: lobby adjustments */
@media (max-width: 480px) {
  .lobby-content {
    padding: 24px 20px;
  }
  .lobby-title {
    font-size: 20px;
  }
  .room-code-value {
    font-size: 22px;
  }
  .lobby-input {
    font-size: 16px;
    padding: 12px 14px;
  }
  .game-settings-grid {
    grid-template-columns: 1fr;
  }
}

/* ═══════════════════════════════════════════════════════════════════ */
/* SINGLE PLAYER SETUP SCREEN                                         */
/* ═══════════════════════════════════════════════════════════════════ */

#sp-setup-screen {
  position: fixed;
  inset: 0;
  z-index: 10000;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding: 20px 0;
  background: #000;
}

.sp-setup-content {
  position: relative;
  width: 90%;
  max-width: 480px;
  padding: 24px 20px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  background: linear-gradient(145deg, #1a1a2e 0%, #16213e 50%, #0f3460 100%);
  border: 1px solid rgba(255, 215, 64, 0.3);
  border-radius: 16px;
  box-shadow:
    0 0 40px rgba(255, 215, 64, 0.15),
    0 20px 60px rgba(0, 0, 0, 0.6);
}

.sp-setup-header {
  display: flex;
  align-items: center;
  gap: 12px;
}

.sp-setup-back-btn {
  font-family: 'Teko', sans-serif;
  font-size: 15px;
  font-weight: 600;
  color: #ffd740;
  background: none;
  border: 1px solid rgba(255, 215, 64, 0.4);
  border-radius: 6px;
  padding: 6px 14px;
  cursor: pointer;
  transition: all 0.15s ease;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.sp-setup-back-btn:hover {
  background: rgba(255, 215, 64, 0.1);
}

.sp-setup-back-btn:active {
  transform: scale(0.95);
}

.sp-setup-title {
  font-family: 'Teko', sans-serif;
  font-size: 28px;
  font-weight: 700;
  letter-spacing: 3px;
  text-transform: uppercase;
  background: linear-gradient(135deg, #ffd740, #ffab00);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.sp-setup-rule {
  width: 100%;
  height: 2px;
  border-radius: 1px;
  background: rgba(255, 215, 64, 0.15);
}

.sp-setup-section {
  margin-bottom: 8px;
  position: relative;
  z-index: 1;
}

.sp-setup-section-header {
  font-family: 'Teko', sans-serif;
  font-size: 16px;
  font-weight: 600;
  letter-spacing: 2px;
  padding-bottom: 6px;
  border-bottom: 1px solid rgba(255, 215, 64, 0.15);
  margin-bottom: 10px;
  color: #ffd740;
  background: linear-gradient(135deg, #ffd740, #ffab00);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.sp-setup-option-grid {
  display: grid;
  gap: 8px;
}

.sp-setup-grid-2 { grid-template-columns: 1fr 1fr; }
.sp-setup-grid-3 { grid-template-columns: 1fr 1fr 1fr; }
.sp-setup-grid-4 { grid-template-columns: repeat(4, 1fr); }
.sp-setup-grid-5 { grid-template-columns: repeat(5, 1fr); }

.sp-setup-option-btn {
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 8px;
  padding: 10px 6px;
  text-align: center;
  cursor: pointer;
  font-family: 'Teko', sans-serif;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 1px;
  color: rgba(255, 255, 255, 0.7);
  transition: all 0.15s ease;
}

.sp-setup-option-btn.active {
  border-color: #ffd740;
  color: #ffd740;
  background: rgba(255, 215, 64, 0.08);
  box-shadow: 0 0 12px rgba(255, 215, 64, 0.15);
}

.sp-setup-option-btn.locked {
  opacity: 0.4;
  cursor: default;
  position: relative;
}

.sp-setup-theme-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}

.sp-setup-theme-card {
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 10px;
  padding: 8px;
  cursor: pointer;
  transition: all 0.15s ease;
  text-align: center;
}

.sp-setup-theme-card.active {
  border-color: #ffd740;
  background: rgba(255, 215, 64, 0.08);
  box-shadow: 0 0 12px rgba(255, 215, 64, 0.15);
}

.sp-setup-theme-card img {
  width: 100%;
  height: 60px;
  object-fit: cover;
  border-radius: 6px;
}

.sp-setup-theme-card .sp-setup-theme-label {
  font-family: 'Teko', sans-serif;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 1px;
  color: rgba(255, 255, 255, 0.7);
  margin-top: 4px;
}

.sp-setup-theme-card.active .sp-setup-theme-label {
  color: #ffd740;
}

.sp-setup-badge {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: rgba(0, 0, 0, 0.8);
  padding: 2px 8px;
  border-radius: 4px;
  font-family: 'Teko', sans-serif;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 1px;
  color: rgba(255, 255, 255, 0.7);
  white-space: nowrap;
}

.sp-setup-start-btn {
  width: 100%;
  font-family: 'Teko', sans-serif;
  font-size: 20px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 3px;
  background: linear-gradient(135deg, #ffd740, #ffab00);
  color: #1a1a2e;
  border: none;
  border-radius: 10px;
  padding: 14px;
  cursor: pointer;
  transition: transform 0.1s ease;
}

.sp-setup-start-btn:active {
  transform: scale(0.97);
}

/* ═══════════════════════════════════════════════════════════════════ */
/* MATCHMAKING SETUP SCREEN                                            */
/* ═══════════════════════════════════════════════════════════════════ */

#mm-setup-screen {
  position: fixed;
  inset: 0;
  z-index: 10000;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  background: radial-gradient(ellipse at center, #1a1a2e 0%, #0a0a14 100%);
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding: 20px 0;
}

.mm-setup-content {
  position: relative;
  width: 90%;
  max-width: 480px;
  padding: 24px 20px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  background: linear-gradient(145deg, #1a1a2e 0%, #16213e 50%, #0f3460 100%);
  border: 1px solid rgba(255, 215, 64, 0.3);
  border-radius: 16px;
  box-shadow:
    0 0 40px rgba(255, 215, 64, 0.15),
    0 20px 60px rgba(0, 0, 0, 0.6);
}

.mm-setup-header {
  display: flex;
  align-items: center;
  gap: 12px;
}

.mm-setup-back-btn {
  font-family: 'Teko', sans-serif;
  font-size: 15px;
  font-weight: 600;
  color: #ffd740;
  background: none;
  border: 1px solid rgba(255, 215, 64, 0.4);
  border-radius: 6px;
  padding: 6px 14px;
  cursor: pointer;
  transition: all 0.15s ease;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.mm-setup-back-btn:hover {
  background: rgba(255, 215, 64, 0.1);
}

.mm-setup-back-btn:active {
  transform: scale(0.95);
}

.mm-setup-title {
  font-family: 'Teko', sans-serif;
  font-size: 28px;
  font-weight: 700;
  letter-spacing: 3px;
  text-transform: uppercase;
  background: linear-gradient(135deg, #ffd740, #ffab00);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.mm-setup-rule {
  width: 100%;
  height: 2px;
  border-radius: 1px;
  background: rgba(255, 215, 64, 0.15);
}

.mm-setup-section {
  margin-bottom: 8px;
  position: relative;
  z-index: 1;
}

.mm-setup-section-header {
  font-family: 'Teko', sans-serif;
  font-size: 16px;
  font-weight: 600;
  letter-spacing: 2px;
  padding-bottom: 6px;
  border-bottom: 1px solid rgba(255, 215, 64, 0.15);
  margin-bottom: 10px;
  color: #ffd740;
  background: linear-gradient(135deg, #ffd740, #ffab00);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.mm-setup-option-grid {
  display: grid;
  gap: 8px;
}

.mm-setup-grid-2 { grid-template-columns: 1fr 1fr; }
.mm-setup-grid-3 { grid-template-columns: 1fr 1fr 1fr; }

.mm-setup-option-btn {
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 8px;
  padding: 10px 6px;
  text-align: center;
  cursor: pointer;
  font-family: 'Teko', sans-serif;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 1px;
  color: rgba(255, 255, 255, 0.7);
  transition: all 0.15s ease;
  position: relative;
}

.mm-setup-option-btn.active {
  border-color: #ffd740;
  color: #ffd740;
  background: rgba(255, 215, 64, 0.08);
  box-shadow: 0 0 12px rgba(255, 215, 64, 0.15);
}

.mm-setup-option-btn.disabled {
  opacity: 0.4;
  cursor: default;
  pointer-events: none;
  position: relative;
}

.mm-setup-badge {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: rgba(0, 0, 0, 0.8);
  padding: 2px 8px;
  border-radius: 4px;
  font-family: 'Teko', sans-serif;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 1px;
  color: rgba(255, 255, 255, 0.7);
  white-space: nowrap;
}

/* Buy-in input */
.mm-setup-buyin-row {
  display: flex;
  align-items: center;
  gap: 12px;
}

.mm-setup-input {
  flex: 1;
  font-family: 'Teko', sans-serif;
  font-size: 18px;
  font-weight: 600;
  letter-spacing: 1px;
  color: #ffd740;
  background: rgba(0, 0, 0, 0.3);
  border: 1px solid rgba(255, 215, 64, 0.3);
  border-radius: 8px;
  padding: 10px 14px;
  outline: none;
  transition: border-color 0.15s ease;
  -moz-appearance: textfield;
}

.mm-setup-input::-webkit-outer-spin-button,
.mm-setup-input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

.mm-setup-input:focus {
  border-color: #ffd740;
}

.mm-setup-buyin-range {
  font-family: 'Teko', sans-serif;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 1px;
  color: rgba(255, 255, 255, 0.5);
  white-space: nowrap;
}

/* Theme grid (shared pattern with SP) */
.mm-setup-theme-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}

.mm-setup-theme-card {
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 10px;
  padding: 8px;
  cursor: pointer;
  transition: all 0.15s ease;
  text-align: center;
}

.mm-setup-theme-card.active {
  border-color: #ffd740;
  background: rgba(255, 215, 64, 0.08);
  box-shadow: 0 0 12px rgba(255, 215, 64, 0.15);
}

.mm-setup-theme-card img {
  width: 100%;
  height: 60px;
  object-fit: cover;
  border-radius: 6px;
}

.mm-setup-theme-card .mm-setup-theme-label {
  font-family: 'Teko', sans-serif;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 1px;
  color: rgba(255, 255, 255, 0.7);
  margin-top: 4px;
}

.mm-setup-theme-card.active .mm-setup-theme-label {
  color: #ffd740;
}

/* Chip balance display */
.mm-setup-balance {
  text-align: center;
  font-family: 'Teko', sans-serif;
  font-size: 16px;
  font-weight: 600;
  letter-spacing: 1px;
  color: rgba(255, 255, 255, 0.6);
}

.mm-setup-balance span {
  color: #ffd740;
  font-size: 18px;
}

/* AI disclosure */
.mm-setup-disclosure {
  text-align: center;
  font-size: 11px;
  color: rgba(255, 255, 255, 0.45);
  margin-bottom: 10px;
  font-style: italic;
}

/* Find Match button */
.mm-setup-start-btn {
  width: 100%;
  font-family: 'Teko', sans-serif;
  font-size: 20px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 3px;
  background: linear-gradient(135deg, #ffd740, #ffab00);
  color: #1a1a2e;
  border: none;
  border-radius: 10px;
  padding: 14px;
  cursor: pointer;
  transition: transform 0.1s ease;
}

.mm-setup-start-btn:active {
  transform: scale(0.97);
}

/* ═══════════════════════════════════════════════════════════════════ */
/* MATCHMAKING SEARCHING OVERLAY                                       */
/* ═══════════════════════════════════════════════════════════════════ */

#mm-searching-overlay {
  position: fixed;
  inset: 0;
  z-index: 10001;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.88);
}

.mm-searching-content {
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
  padding: 40px;
}

.mm-searching-spinner {
  width: 48px;
  height: 48px;
  border: 3px solid rgba(255, 215, 64, 0.2);
  border-top-color: #ffd740;
  border-radius: 50%;
  animation: mm-spin 0.8s linear infinite;
}

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

.mm-searching-text {
  font-family: 'Teko', sans-serif;
  font-size: 24px;
  font-weight: 700;
  letter-spacing: 2px;
  color: #ffd740;
  text-transform: uppercase;
}

.mm-searching-status {
  font-family: 'Teko', sans-serif;
  font-size: 15px;
  font-weight: 600;
  letter-spacing: 1px;
  color: rgba(255, 255, 255, 0.5);
}

.mm-searching-cancel-btn {
  font-family: 'Teko', sans-serif;
  font-size: 16px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 2px;
  color: #ffd740;
  background: none;
  border: 1px solid rgba(255, 215, 64, 0.4);
  border-radius: 8px;
  padding: 10px 32px;
  cursor: pointer;
  transition: all 0.15s ease;
}

.mm-searching-cancel-btn:hover {
  background: rgba(255, 215, 64, 0.1);
}

.mm-searching-cancel-btn:active {
  transform: scale(0.95);
}

/* ═══════════════════════════════════════════════════════════════════ */
/* PAUSE OVERLAY                                                      */
/* ═══════════════════════════════════════════════════════════════════ */

#pause-overlay {
  position: fixed;
  inset: 0;
  z-index: 9999;
  background: rgba(0, 0, 0, 0.85);
  display: flex;
  align-items: center;
  justify-content: center;
}

.pause-overlay-content {
  text-align: center;
  display: flex;
  flex-direction: column;
  gap: 16px;
  align-items: center;
}

.pause-title {
  font-family: 'Teko', sans-serif;
  font-size: 48px;
  font-weight: 700;
  letter-spacing: 6px;
  text-transform: uppercase;
  background: linear-gradient(135deg, #ffd740, #ffab00);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.pause-resume-btn {
  width: 200px;
  font-family: 'Teko', sans-serif;
  font-size: 20px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 3px;
  background: linear-gradient(135deg, #ffd740, #ffab00);
  color: #1a1a2e;
  border: none;
  border-radius: 10px;
  padding: 14px;
  cursor: pointer;
  transition: transform 0.1s ease;
}

.pause-resume-btn:active {
  transform: scale(0.97);
}

.pause-quit-btn {
  width: 200px;
  font-family: 'Teko', sans-serif;
  font-size: 16px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 2px;
  background: transparent;
  color: rgba(255, 255, 255, 0.8);
  border: 1px solid rgba(255, 255, 255, 0.3);
  border-radius: 10px;
  padding: 10px;
  cursor: pointer;
  transition: all 0.15s ease;
}

.pause-quit-btn:hover {
  background: rgba(255, 255, 255, 0.05);
  border-color: rgba(255, 255, 255, 0.5);
}

.pause-quit-btn:active {
  transform: scale(0.97);
}

/* ═══════════════════════════════════════════════════════════════════ */
/* SETTINGS SCREEN                                                    */
/* ═══════════════════════════════════════════════════════════════════ */

#settings-screen {
  position: fixed;
  inset: 0;
  z-index: 10000;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow-y: auto;
  /* background — provided by theme */
}

.settings-content {
  position: relative;
  width: 90%;
  max-width: 480px;
  padding: 36px 28px 32px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  background: linear-gradient(145deg, #1a1a2e 0%, #16213e 50%, #0f3460 100%);
  border: 1px solid rgba(255, 215, 64, 0.3);
  border-radius: 16px;
  box-shadow:
    0 0 40px rgba(255, 215, 64, 0.15),
    0 20px 60px rgba(0, 0, 0, 0.6);
  box-sizing: border-box;
  margin: 20px 0;
}

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

.settings-back-btn {
  font-family: 'Teko', sans-serif;
  font-size: 15px;
  font-weight: 600;
  color: #ffd740;
  background: none;
  border: 1px solid rgba(255, 215, 64, 0.4);
  border-radius: 6px;
  padding: 6px 14px;
  cursor: pointer;
  transition: all 0.15s ease;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.settings-back-btn:hover { background: rgba(255, 215, 64, 0.1); }

.settings-back-btn:active {
  transform: scale(0.95);
}

.settings-title {
  font-family: 'Teko', sans-serif;
  font-size: 28px;
  font-weight: 700;
  letter-spacing: 3px;
  text-transform: uppercase;
  background: linear-gradient(135deg, #ffd740, #ffab00);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.settings-rule {
  width: 100%;
  height: 2px;
  border-radius: 1px;
  background: rgba(255, 215, 64, 0.15);
}

.settings-section {
  margin-bottom: 8px;
}

.settings-section-header {
  font-family: 'Teko', sans-serif;
  font-size: 16px;
  font-weight: 600;
  letter-spacing: 2px;
  padding-bottom: 6px;
  border-bottom: 1px solid rgba(255, 215, 64, 0.15);
  margin-bottom: 8px;
  background: linear-gradient(135deg, #ffd740, #ffab00);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.settings-toggle-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 4px;
}

.settings-toggle-label {
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 15px;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.85);
}

.settings-menu-item {
  display: block;
  width: 100%;
  text-align: left;
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 15px;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.85);
  background: none;
  border: none;
  padding: 8px 4px;
  border-radius: 4px;
  cursor: pointer;
  transition: all 0.15s ease;
  letter-spacing: 0.03em;
}

.settings-menu-item:hover {
  background: rgba(255, 215, 64, 0.08);
}

.settings-menu-item:active {
  transform: scale(0.97);
}

a.settings-menu-link {
  text-decoration: none;
}

/* Settings — phone landscape */
@media (max-height: 500px) {
  .settings-content { padding: 16px 20px; gap: 10px; }
  .settings-title { font-size: 22px; }
  .settings-toggle-label { font-size: 13px; }
}

/* Settings — tablet */
@media (min-width: 768px) and (min-height: 501px) {
  .settings-content { max-width: 480px; padding: 48px 32px 40px; }
  .settings-title { font-size: 28px; }
}

/* ═══════════════════════════════════════════════════════════════════ */
/* PROFILE SCREEN                                                      */
/* ═══════════════════════════════════════════════════════════════════ */

#profile-screen {
  position: fixed;
  inset: 0;
  z-index: 10000;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  overflow-y: auto;
  padding: 20px 0;
  background: #000;
}

.profile-content {
  position: relative;
  width: 90%;
  max-width: 480px;
  padding: 24px 20px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  background: linear-gradient(145deg, #1a1a2e 0%, #16213e 50%, #0f3460 100%);
  border: 1px solid rgba(255, 215, 64, 0.3);
  border-radius: 16px;
  box-shadow:
    0 0 40px rgba(255, 215, 64, 0.15),
    0 20px 60px rgba(0, 0, 0, 0.6);
}

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

.profile-back-btn {
  font-family: 'Teko', sans-serif;
  font-size: 15px;
  font-weight: 600;
  color: #ffd740;
  background: none;
  border: 1px solid rgba(255, 215, 64, 0.4);
  border-radius: 6px;
  padding: 6px 14px;
  cursor: pointer;
  transition: all 0.15s ease;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.profile-back-btn:hover {
  background: rgba(255, 215, 64, 0.1);
}

.profile-back-btn:active {
  transform: scale(0.95);
}

.profile-title {
  font-family: 'Teko', sans-serif;
  font-size: 28px;
  font-weight: 700;
  letter-spacing: 3px;
  text-transform: uppercase;
  background: linear-gradient(135deg, #ffd740, #ffab00);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.profile-rule {
  width: 100%;
  height: 2px;
  border-radius: 1px;
  background: rgba(255, 215, 64, 0.15);
}

.profile-section {
  margin-bottom: 8px;
  position: relative;
  z-index: 1;
}

.profile-section-header {
  font-family: 'Teko', sans-serif;
  font-size: 16px;
  font-weight: 600;
  letter-spacing: 2px;
  padding-bottom: 6px;
  border-bottom: 1px solid rgba(255, 215, 64, 0.15);
  margin-bottom: 10px;
  color: #ffd740;
  background: linear-gradient(135deg, #ffd740, #ffab00);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* === PROFILE NAMEPLATE BANNER === */
.profile-nameplate {
  --np-base: 24px;
  position: relative;
  display: flex;
  flex-direction: row;
  align-items: stretch;
  width: calc(var(--np-base) * 13);
  max-width: 100%;
  margin: 0 auto;
  border-radius: calc(var(--np-base) * 0.75);
  overflow: hidden;
  border: 1px solid rgba(255,255,255,0.15);
  background: linear-gradient(135deg, #1a1a1a 0%, #2a2a2a 100%);
}

.profile-nameplate-banner-bg {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  z-index: 0;
}

.profile-nameplate-scrim {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.55);
  z-index: 1;
  pointer-events: none;
}

.profile-nameplate-avatar {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: calc(var(--np-base, 24px) * 4);
  min-width: calc(var(--np-base, 24px) * 4);
  padding: calc(var(--np-base, 24px) * 0.4);
  overflow: visible;
  -webkit-transform: translateZ(0);
  transform: translateZ(0);
}

.profile-nameplate-avatar img {
  width: calc(var(--np-base, 24px) * 3.2);
  height: calc(var(--np-base, 24px) * 3.2);
  border-radius: calc(var(--np-base, 24px) * 0.5);
  object-fit: cover;
  border: 2px solid #555;
  box-shadow: 0 2px 8px rgba(0,0,0,0.4);
}

.profile-nameplate-prestige-stars {
  position: absolute;
  bottom: -4px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 2px;
  z-index: 3;
  font-size: 14px;
}

.profile-nameplate-text {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  padding: calc(var(--np-base, 24px) * 0.25) calc(var(--np-base, 24px) * 0.6) calc(var(--np-base, 24px) * 0.25) 0;
  position: relative;
  z-index: 2;
  min-width: 0;
  overflow: hidden;
  -webkit-transform: translateZ(0);
  transform: translateZ(0);
}

.profile-nameplate-name-row {
  display: flex;
  align-items: center;
  gap: calc(var(--np-base, 24px) * 0.2);
  width: 100%;
}

.profile-nameplate-name {
  font-family: var(--font-player-name, 'Orbitron', sans-serif);
  font-size: calc(var(--np-base, 24px) * 0.55);
  font-weight: 700;
  letter-spacing: 0.05em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  color: #fff;
  text-shadow: 0 1px 3px rgba(0,0,0,0.7);
  line-height: 1.15;
}

.profile-nameplate-edit-name-btn {
  background: none;
  border: none;
  color: rgba(255,255,255,0.5);
  font-size: calc(var(--np-base, 24px) * 0.37);
  cursor: pointer;
  padding: 0 calc(var(--np-base, 24px) * 0.1);
  z-index: 2;
  position: relative;
  transition: color 0.15s;
  vertical-align: middle;
  flex-shrink: 0;
}
.profile-nameplate-edit-name-btn:hover {
  color: #fff;
}

.profile-nameplate-name-input {
  font-family: var(--font-player-name, 'Orbitron', sans-serif);
  font-size: calc(var(--np-base, 24px) * 0.5);
  font-weight: 700;
  color: #fff;
  background: rgba(0,0,0,0.4);
  border: 1px solid rgba(255,255,255,0.3);
  border-radius: 4px;
  padding: 2px calc(var(--np-base, 24px) * 0.2);
  outline: none;
  width: calc(var(--np-base, 24px) * 6);
  max-width: 100%;
  z-index: 2;
  position: relative;
}
.profile-nameplate-name-input:focus {
  border-color: var(--chip-green, #4caf50);
}

.profile-nameplate-name-error {
  font-family: 'Barlow Condensed', sans-serif;
  font-size: calc(var(--np-base, 24px) * 0.37);
  color: #ff5555;
  position: relative;
  z-index: 2;
  margin-top: 2px;
}

.profile-nameplate-title {
  font-family: var(--font-body, 'Crimson Pro', serif);
  font-style: italic;
  font-size: calc(var(--np-base, 24px) * 0.43);
  font-weight: 600;
  color: rgba(255,255,255,0.85);
  letter-spacing: 0.02em;
  text-shadow: 0 1px 2px rgba(0,0,0,0.5);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  line-height: 1.1;
}

.profile-nameplate-title:empty { display: none; }

.profile-nameplate-stats-row {
  display: flex;
  align-items: center;
  gap: calc(var(--np-base, 24px) * 0.35);
  margin-top: calc(var(--np-base, 24px) * 0.1);
}

.profile-nameplate-level {
  font-size: calc(var(--np-base, 24px) * 0.43);
  font-weight: 700;
  color: #ffd740;
  font-family: 'Teko', sans-serif;
  letter-spacing: 0.5px;
  text-shadow: 0 1px 2px rgba(0,0,0,0.7);
}

/* Animated level text colors per prestige tier */
.level-green, .level-blue, .level-magenta, .level-red, .level-rainbow {
  display: inline-block;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  background-size: 200% 100%;
  animation: level-color-shift 3s linear infinite;
}
.level-green   { background-image: linear-gradient(90deg, #2ecc71, #ffffff, #2ecc71); }
.level-blue    { background-image: linear-gradient(90deg, #00c8ff, #ffffff, #00c8ff); }
.level-magenta { background-image: linear-gradient(90deg, #c850c0, #ffffff, #c850c0); }
.level-red     { background-image: linear-gradient(90deg, #e74c3c, #ffffff, #e74c3c); }
.level-rainbow { background-image: linear-gradient(90deg, #e74c3c, #f39c12, #2ecc71, #00c8ff, #9b59b6, #e74c3c); }
@keyframes level-color-shift {
  0%   { background-position: 0% 50%; }
  100% { background-position: 200% 50%; }
}

/* Lifetime VIP title — animated gold shimmer */
.title-lifetime-vip {
  display: inline-block;
  background-image: linear-gradient(90deg, #ffd740, #ff6f00, #ffd740, #ffab00, #ffd740);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  background-size: 300% 100%;
  animation: lifetime-vip-shimmer 2.5s linear infinite;
}
@keyframes lifetime-vip-shimmer {
  0%   { background-position: 0% 50%; }
  100% { background-position: 300% 50%; }
}

/* Prestige star text characters — sized by container, animated by level-* classes */
.prestige-star-char {
  display: inline-block;
  line-height: 1;
}

.profile-nameplate-chips {
  display: flex;
  align-items: center;
  gap: calc(var(--np-base, 24px) * 0.2);
  font-family: 'Teko', sans-serif;
  font-size: calc(var(--np-base, 24px) * 0.5);
  font-weight: 600;
  color: var(--chip-green, #4caf50);
  text-shadow: 0 1px 2px rgba(0,0,0,0.5);
  margin-top: calc(var(--np-base, 24px) * 0.1);
}

.profile-nameplate-separator {
  color: rgba(255,255,255,0.3);
  margin: 0 2px;
}

.profile-nameplate-jewel-icon { font-size: calc(var(--np-base, 24px) * 0.33); }

.profile-nameplate-customize-btn {
  display: block;
  width: calc(var(--np-base, 24px) * 13);
  max-width: 100%;
  margin: 8px auto 0;
  font-family: 'Teko', sans-serif;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 2px;
  text-transform: uppercase;
  padding: 8px 0;
  border-radius: 8px;
  border: 1px solid rgba(255, 215, 64, 0.3);
  background: rgba(255, 215, 64, 0.08);
  color: #ffd740;
  cursor: pointer;
  transition: all 0.15s ease;
}

.profile-nameplate-customize-btn:active {
  transform: scale(0.97);
  background: rgba(255, 215, 64, 0.15);
}

/* === CUSTOMIZE PANEL (2x2 grid) === */
.profile-customize-panel {
  display: none;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  border-radius: 10px;
  border: 1px solid rgba(255,255,255,0.12);
  background: rgba(15,15,25,0.95);
  backdrop-filter: blur(10px);
  padding: 8px;
  margin-top: 8px;
  box-sizing: border-box;
  width: 100%;
  max-height: 50vh;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}
.profile-customize-panel.visible { display: grid; }

.customize-cell {
  border-radius: 8px;
  border: 1px solid rgba(255,255,255,0.08);
  background: rgba(255,255,255,0.02);
  display: flex;
  flex-direction: column;
  min-height: 140px;
  max-height: 220px;
  box-sizing: border-box;
  overflow: hidden;
}

.customize-cell-header {
  font-family: 'Teko', sans-serif;
  font-size: 16px;
  font-weight: 600;
  letter-spacing: 0.1em;
  padding: 8px 10px 4px;
  color: rgba(255,255,255,0.7);
  flex-shrink: 0;
}

/* Theme tabs within cell */
.customize-cell-tabs {
  display: flex;
  gap: 4px;
  padding: 0 8px 6px;
  flex-shrink: 0;
  border-bottom: 1px solid rgba(255,255,255,0.06);
  overflow-x: auto;
  scrollbar-width: thin;
  scrollbar-color: rgba(255,255,255,0.15) transparent;
}
.customize-cell-tabs::-webkit-scrollbar { height: 4px; }
.customize-cell-tabs::-webkit-scrollbar-track { background: transparent; }
.customize-cell-tabs::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.15); border-radius: 2px; }

.customize-tab {
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.06em;
  padding: 3px 8px;
  border-radius: 10px;
  border: 1px solid rgba(255,255,255,0.12);
  background: transparent;
  color: rgba(255,255,255,0.4);
  cursor: pointer;
  white-space: nowrap;
  transition: all 0.15s ease;
}
.customize-tab:hover { color: rgba(255,255,255,0.7); border-color: rgba(255,255,255,0.25); }
.customize-tab.active {
  background: rgba(0,229,255,0.12);
  border-color: rgba(0,229,255,0.4);
  color: #00e5ff;
}

.customize-cell-body {
  flex: 1;
  overflow-y: auto;
  padding: 8px;
  scrollbar-width: thin;
  scrollbar-color: rgba(255,255,255,0.15) transparent;
}
.customize-cell-body::-webkit-scrollbar { width: 4px; }
.customize-cell-body::-webkit-scrollbar-track { background: transparent; }
.customize-cell-body::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.15); border-radius: 2px; }

/* Shared grid for avatar + banner thumbnails */
.customize-avatar-grid,
.customize-banner-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 6px;
}

/* Avatar items */
.customize-avatar-item {
  aspect-ratio: 1;
  border-radius: 6px;
  border: 2px solid rgba(255,255,255,0.12);
  overflow: hidden;
  cursor: pointer;
  transition: all 0.15s ease;
  background: rgba(255,255,255,0.05);
  position: relative;
}
.customize-avatar-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Banner items */
.customize-banner-item {
  aspect-ratio: 16 / 9;
  border-radius: 4px;
  border: 2px solid rgba(255,255,255,0.12);
  overflow: hidden;
  cursor: pointer;
  transition: all 0.15s ease;
  background: rgba(255,255,255,0.05);
  position: relative;
  background-size: cover;
  background-position: center;
}
.customize-banner-item.banner-none {
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 10px;
  color: rgba(255,255,255,0.35);
  letter-spacing: 0.1em;
}

/* Shared hover / active / locked for avatars + banners */
.customize-avatar-item:hover:not(.locked),
.customize-banner-item:hover:not(.locked) {
  border-color: rgba(255,255,255,0.4);
}
.customize-avatar-item.active,
.customize-banner-item.active {
  border-color: #00e5ff;
  box-shadow: 0 0 6px rgba(0,229,255,0.3);
}
.customize-avatar-item.locked,
.customize-banner-item.locked {
  opacity: 0.5;
  cursor: default;
}

/* Lock overlay with requirement text */
.customize-lock-overlay {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background: rgba(0,0,0,0.45);
  gap: 2px;
}
.customize-lock-icon { font-size: 14px; }
.customize-lock-req {
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 9px;
  font-weight: 600;
  color: rgba(255,255,255,0.6);
  letter-spacing: 0.05em;
}

/* Title list within cell */
.customize-title-item {
  padding: 6px 8px;
  border-radius: 4px;
  border: 1px solid rgba(255,255,255,0.08);
  cursor: pointer;
  transition: all 0.15s ease;
  margin-bottom: 4px;
}
.customize-title-item:last-child { margin-bottom: 0; }
.customize-title-item:hover:not(.locked) {
  background: rgba(255,255,255,0.05);
}
.customize-title-item.active {
  border-color: #00e5ff;
  background: rgba(0,229,255,0.08);
}
.customize-title-item.locked {
  opacity: 0.35;
  cursor: default;
}
.customize-title-name {
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 12px;
  font-weight: 600;
  font-style: italic;
  color: #fff;
}
.customize-title-req {
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 9px;
  font-weight: 500;
  color: rgba(255,255,255,0.4);
  margin-top: 1px;
}

.customize-title-section-header {
  font-family: 'Teko', sans-serif;
  font-size: 12px;
  font-weight: 500;
  color: rgba(255,255,255,0.35);
  text-transform: uppercase;
  letter-spacing: 1px;
  padding: 6px 4px 2px;
  border-bottom: 1px solid rgba(255,255,255,0.08);
  margin-bottom: 2px;
}

/* Border color swatches */
.customize-border-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  justify-items: center;
}
.customize-border-swatch {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: 2.5px solid rgba(255,255,255,0.15);
  cursor: pointer;
  transition: all 0.15s ease;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}
.customize-border-swatch:hover:not(.locked) { transform: scale(1.1); }
.customize-border-swatch.active {
  border-color: #00e5ff;
  box-shadow: 0 0 8px rgba(0,229,255,0.4);
  transform: scale(1.1);
}
.customize-border-swatch.locked {
  opacity: 0.3;
  cursor: default;
}
.customize-border-swatch-none {
  font-size: 14px;
  color: rgba(255,255,255,0.4);
}
.customize-border-swatch-label {
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 8px;
  font-weight: 600;
  color: rgba(255,255,255,0.5);
  text-align: center;
  margin-top: 2px;
  letter-spacing: 0.05em;
}

/* === LEVEL REWARDS CAROUSEL === */
.profile-rewards-carousel-wrapper {
  position: relative;
  margin: 0 -28px;
  padding: 0 28px;
  overflow: hidden;
}

.profile-rewards-carousel {
  display: flex;
  gap: 12px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  padding: 10px 4px 14px;
  cursor: grab;
  user-select: none;
  -webkit-user-select: none;
}

.profile-rewards-carousel::-webkit-scrollbar { display: none; }
.profile-rewards-carousel.dragging { cursor: grabbing; scroll-snap-type: none; }

.profile-rewards-carousel-fade-left,
.profile-rewards-carousel-fade-right {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 32px;
  z-index: 5;
  pointer-events: none;
}

.profile-rewards-carousel-fade-left {
  left: 0;
  background: linear-gradient(to right, rgba(22, 33, 62, 0.95), transparent);
}

.profile-rewards-carousel-fade-right {
  right: 0;
  background: linear-gradient(to left, rgba(22, 33, 62, 0.95), transparent);
}

/* --- Reward Items --- */
.reward-item {
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  scroll-snap-align: center;
  width: 160px;
  perspective: 600px;
}

.reward-box {
  width: 152px;
  height: 220px;
  border-radius: 10px;
  border-top: 1px solid rgba(255,255,255,0.3);
  border-left: 1px solid rgba(255,255,255,0.15);
  border-right: 1px solid rgba(255,255,255,0.08);
  border-bottom: 1px solid rgba(255,255,255,0.05);
  background: linear-gradient(160deg, rgba(255,255,255,0.1) 0%, rgba(255,255,255,0.02) 40%, rgba(255,255,255,0.04) 100%);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  position: relative;
  overflow: hidden;
  transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.2s ease;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.2),
    inset 0 -2px 4px rgba(0,0,0,0.15),
    0 6px 16px rgba(0,0,0,0.4),
    0 2px 4px rgba(0,0,0,0.2);
  transform: rotateX(2deg);
}

.reward-box::before {
  content: '';
  position: absolute;
  top: 0;
  left: -20%;
  width: 140%;
  height: 45%;
  background: linear-gradient(180deg, rgba(255,255,255,0.1) 0%, rgba(255,255,255,0.02) 60%, transparent 100%);
  border-radius: 10px 10px 50% 50%;
  pointer-events: none;
  z-index: 0;
}

.reward-box:hover {
  transform: rotateX(0deg) translateY(-2px);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.25),
    inset 0 -2px 4px rgba(0,0,0,0.1),
    0 10px 24px rgba(0,0,0,0.45),
    0 4px 8px rgba(0,0,0,0.2);
}

/* State: current level */
.reward-item.reward-current .reward-box {
  border-top-color: rgba(255, 215, 64, 0.5);
  border-left-color: rgba(255, 215, 64, 0.3);
  border-right-color: rgba(255, 215, 64, 0.15);
  border-bottom-color: rgba(255, 215, 64, 0.1);
  border-width: 2px;
  box-shadow:
    0 0 16px rgba(201, 168, 76, 0.35),
    inset 0 1px 0 rgba(255,255,255,0.25),
    inset 0 -2px 4px rgba(0,0,0,0.15),
    0 6px 16px rgba(0,0,0,0.4);
  background: linear-gradient(160deg, rgba(201, 168, 76, 0.14) 0%, rgba(255,255,255,0.03) 40%, rgba(201, 168, 76, 0.08) 100%);
}

/* State: earned/past */
.reward-item.reward-earned .reward-box {
  border-top-color: rgba(76, 175, 80, 0.45);
  border-left-color: rgba(76, 175, 80, 0.25);
  border-right-color: rgba(76, 175, 80, 0.12);
  border-bottom-color: rgba(76, 175, 80, 0.06);
  background: linear-gradient(160deg, rgba(76, 175, 80, 0.1) 0%, rgba(255,255,255,0.02) 40%, rgba(76, 175, 80, 0.05) 100%);
}

.reward-item.reward-earned .reward-box::after {
  content: '\2713';
  position: absolute;
  top: 6px;
  right: 6px;
  font-size: 14px;
  color: #4caf50;
  font-weight: 700;
  z-index: 2;
}

/* State: future */
.reward-item.reward-future .reward-box { opacity: 0.5; }

/* Reward icon layout */
.reward-icon {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
}

.reward-amount {
  font-family: 'Teko', sans-serif;
  font-size: 32px;
  font-weight: 600;
  line-height: 1;
  color: #fff;
}

.reward-type-label {
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.1em;
  color: rgba(255,255,255,0.6);
  text-transform: uppercase;
}

/* Chip rewards */
.reward-icon-chips .reward-amount { color: var(--chip-green, #4caf50); }

/* Jewel rewards */
.reward-box-jewel { border-color: rgba(0, 200, 255, 0.3); background: rgba(0, 200, 255, 0.05); }
.reward-icon-jewel .reward-amount { color: #00c8ff; font-size: 36px; }
.reward-bonus-chip {
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 11px;
  color: rgba(76, 175, 80, 0.7);
  font-weight: 500;
}

/* === NAMEPLATE PREVIEW REWARDS (Title / Avatar / Banner) === */
.reward-box-nameplate {
  padding: 0;
  gap: 0;
  justify-content: flex-start;
}

/* Mini nameplate container */
.reward-np {
  width: 100%;
  height: 72px;
  border-radius: 8px 8px 0 0;
  position: relative;
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px;
  background-size: cover;
  background-position: center;
  overflow: hidden;
}

.reward-np-scrim {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.55);
  border-radius: inherit;
}

.reward-np-avatar {
  width: 42px;
  height: 42px;
  border-radius: 4px;
  object-fit: cover;
  border: 2px solid #555;
  position: relative;
  z-index: 1;
  flex-shrink: 0;
}

.reward-np-avatar-default {
  width: 42px;
  height: 42px;
  border-radius: 4px;
  border: 2px solid #555;
  background: linear-gradient(135deg, #667eea, #764ba2);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  position: relative;
  z-index: 1;
  flex-shrink: 0;
}

.reward-np-info {
  display: flex;
  flex-direction: column;
  gap: 1px;
  position: relative;
  z-index: 1;
  min-width: 0;
  flex: 1;
}

.reward-np-name {
  font-family: 'Orbitron', sans-serif;
  font-size: 8px;
  font-weight: 700;
  color: #fff;
  text-shadow: 0 1px 3px rgba(0,0,0,0.8);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.reward-np-title {
  font-family: var(--font-body, 'Crimson Pro', serif);
  font-style: italic;
  font-size: 7px;
  color: rgba(255, 255, 255, 0.8);
  text-shadow: 0 1px 2px rgba(0,0,0,0.8);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.reward-np-chips {
  font-family: 'Teko', sans-serif;
  font-size: 9px;
  font-weight: 500;
  color: var(--chip-green, #4caf50);
  text-shadow: 0 1px 2px rgba(0,0,0,0.8);
}

/* Label area below the nameplate preview */
.reward-np-label {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 6px 4px 4px;
  width: 100%;
}

/* Reward detail area — shows the actual reward item */
.reward-np-detail {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  flex: 1;
  width: 100%;
  padding: 4px;
}

/* Title name display */
.reward-np-detail-title {
  font-family: var(--font-body, 'Crimson Pro', serif);
  font-style: italic;
  font-size: 15px;
  font-weight: 600;
  color: var(--gold, #c9a84c);
  text-align: center;
  line-height: 1.3;
  padding: 0 6px;
  text-shadow: 0 1px 4px rgba(0,0,0,0.5);
}

/* Standalone avatar image */
.reward-np-detail-avatar {
  width: 72px;
  height: 72px;
  object-fit: cover;
  border-radius: 6px;
  border: 2px solid rgba(160, 100, 220, 0.4);
  box-shadow: 0 2px 8px rgba(0,0,0,0.4);
}

/* Standalone banner image */
.reward-np-detail-banner {
  width: 136px;
  height: 54px;
  object-fit: cover;
  border-radius: 4px;
  border: 1px solid rgba(60, 160, 240, 0.3);
  box-shadow: 0 2px 8px rgba(0,0,0,0.4);
}

/* Theme badge on rewards */
.reward-theme-badge {
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 9px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.5);
  background: rgba(255,255,255,0.08);
  padding: 2px 8px;
  border-radius: 3px;
}

/* Locked theme rewards */
.reward-box-locked { opacity: 0.45; border-style: dashed; }
.reward-lock-icon {
  font-size: 16px;
  position: absolute;
  top: 6px;
  left: 6px;
  z-index: 2;
}
.reward-theme-locked { color: rgba(255, 100, 100, 0.6); }
.reward-unlock-link {
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 10px;
  color: #00c8ff;
  text-decoration: underline;
  margin-top: 2px;
}

/* Prestige card */
.reward-box-prestige {
  border-color: rgba(255, 215, 0, 0.5);
  background: linear-gradient(135deg, rgba(255, 215, 0, 0.1) 0%, rgba(255, 0, 255, 0.08) 100%);
  box-shadow: 0 0 20px rgba(255, 215, 0, 0.15);
}

.reward-prestige-star {
  font-size: 28px;
  white-space: nowrap;
}

.reward-prestige-label {
  font-family: 'Bebas Neue', sans-serif;
  font-size: 16px;
  letter-spacing: 0.15em;
  color: #ffd700;
}

.reward-prestige-desc {
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 11px;
  color: rgba(255, 255, 255, 0.5);
}

/* Level label */
.reward-level {
  font-family: 'Teko', sans-serif;
  font-size: 16px;
  font-weight: 600;
  color: rgba(255,255,255,0.6);
  letter-spacing: 0.05em;
}

.reward-item.reward-current .reward-level {
  color: var(--gold, #c9a84c);
  font-size: 18px;
  font-weight: 700;
}

/* Theme filter tabs */
.profile-rewards-theme-filter {
  display: flex;
  gap: 8px;
  justify-content: center;
  padding-top: 8px;
  flex-wrap: wrap;
}

.profile-rewards-theme-tab {
  font-family: 'Teko', sans-serif;
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.08em;
  padding: 4px 12px;
  border-radius: 4px;
  border: 1px solid rgba(255,255,255,0.15);
  background: transparent;
  color: rgba(255,255,255,0.5);
  cursor: pointer;
  transition: all 0.15s ease;
}

.profile-rewards-theme-tab.active {
  border-color: var(--gold, #c9a84c);
  color: var(--gold, #c9a84c);
  background: rgba(201, 168, 76, 0.1);
}

.profile-rewards-theme-tab:active { transform: scale(0.95); }

/* === LEVEL & XP DISPLAY === */
.profile-level-display {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
}

.profile-level-badge {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 60px;
  height: 60px;
  border-radius: 50%;
  border: 3px solid rgba(255, 215, 64, 0.4);
  flex-shrink: 0;
}

.profile-level-number {
  font-size: 22px;
  font-weight: 900;
  line-height: 1;
  color: #ffd740;
}

.profile-level-label {
  font-size: 8px;
  font-weight: 700;
  letter-spacing: 0.15em;
  color: rgba(255, 215, 64, 0.7);
  opacity: 1;
}

.profile-xp-bar-container {
  flex: 1;
  min-width: 150px;
}

.profile-xp-bar {
  height: 12px;
  border-radius: 6px;
  overflow: hidden;
  border: none;
  background: rgba(255, 255, 255, 0.08);
}

.profile-xp-fill {
  height: 100%;
  border-radius: 6px;
  transition: width 0.5s ease;
  width: 0%;
  background: linear-gradient(90deg, #ffd740, #ffab00);
  box-shadow: 0 0 8px rgba(255, 215, 64, 0.4);
}

.profile-xp-text {
  font-family: 'Teko', sans-serif;
  font-size: 13px;
  font-weight: 400;
  margin-top: 4px;
  text-align: right;
  color: rgba(255, 255, 255, 0.5);
  opacity: 1;
}

.profile-prestige-info {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 6px;
  font-family: 'Teko', sans-serif;
  font-size: 13px;
  font-weight: 600;
  margin-top: 4px;
}

/* === RANK DISPLAY === */
.profile-rank-display {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 12px;
  border-radius: 8px;
  border: 1px solid rgba(255, 215, 64, 0.15);
  background: rgba(255,255,255,0.03);
}

.profile-rank-badge {
  width: 50px;
  height: 60px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.profile-rank-badge svg {
  width: 100%;
  height: 100%;
}

.profile-rank-info {
  flex: 1;
}

.profile-rank-tier {
  font-family: 'Teko', sans-serif;
  font-size: 18px;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.profile-rank-progress {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 6px;
}

.profile-rank-bar {
  flex: 1;
  height: 8px;
  border-radius: 4px;
  overflow: hidden;
  border: none;
  background: rgba(255, 255, 255, 0.08);
}

.profile-rank-fill {
  height: 100%;
  border-radius: 4px;
  transition: width 0.5s ease;
  width: 0%;
}

.profile-rank-points {
  font-family: 'Teko', sans-serif;
  font-size: 12px;
  font-weight: 500;
  opacity: 0.8;
}

.profile-rank-season {
  font-family: 'Teko', sans-serif;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.1em;
  margin-top: 4px;
  opacity: 0.7;
}

/* === STATS === */
.profile-stats-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0;
}

.profile-stat-item {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  padding: 6px 12px;
  border-radius: 0;
  border: none;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
  background: none;
}

.profile-stat-value {
  font-family: 'Teko', sans-serif;
  font-size: 16px;
  font-weight: 600;
  color: #fff;
}

.profile-stat-label {
  font-family: 'Teko', sans-serif;
  font-size: 14px;
  font-weight: 400;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  text-align: left;
  color: rgba(255, 255, 255, 0.6);
  margin-top: 0;
  opacity: 1;
}

/* === CHANCE CARD STATS GRID (Front-Facing Cards) === */
.profile-chance-stats-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  padding: 8px 0;
}

.profile-chance-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  cursor: pointer;
  transition: transform 0.15s ease;
}

.profile-chance-card:hover {
  transform: scale(1.05);
}

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

.profile-chance-card-face {
  width: 90px;
  height: 126px;
  border-radius: 5px;
  border: 2px solid;
  background-size: cover;
  background-position: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  padding: 20px 6px 24px;
  box-sizing: border-box;
  position: relative;
  overflow: hidden;
}

/* Dark overlay like game cards */
.profile-chance-card-face::before {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,0.45);
  border-radius: inherit;
  z-index: 0;
}

.profile-chance-card-name {
  position: absolute;
  top: 6px;
  left: 0;
  width: 100%;
  font-family: var(--font-display);
  font-size: 8px;
  font-weight: 700;
  color: #fff;
  text-shadow: 0 0 4px rgba(0,0,0,0.9), 0 1px 3px rgba(0,0,0,0.9);
  text-align: center;
  z-index: 1;
  line-height: 1.2;
  padding: 0 4px;
  box-sizing: border-box;
}

.profile-chance-card-desc {
  font-family: var(--font-body);
  font-size: 6.5px;
  font-weight: 600;
  color: rgba(255,255,255,0.9);
  text-shadow: 0 1px 2px rgba(0,0,0,0.9);
  text-align: center;
  z-index: 1;
  line-height: 1.3;
  padding: 0 4px;
}

.profile-chance-card-scope {
  position: absolute;
  bottom: 16px;
  left: 0;
  width: 100%;
  text-align: center;
  font-family: var(--font-display);
  font-size: 5px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.85);
  text-shadow: 0 0 3px rgba(0,0,0,0.8);
  z-index: 1;
}

.profile-chance-card-tier {
  position: absolute;
  bottom: 7px;
  left: 0;
  width: 100%;
  text-align: center;
  font-family: var(--font-display);
  font-size: 5px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  z-index: 1;
  text-shadow: 0 0 6px currentColor;
}

.profile-chance-card-info {
  margin-top: 4px;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1px;
}

.profile-chance-card-count {
  font-family: 'Teko', sans-serif;
  font-size: 14px;
  font-weight: 600;
  color: rgba(255,255,255,0.8);
}

.profile-chance-card-count.unplayed {
  color: rgba(255,255,255,0.3);
}

.profile-chance-card-winrate {
  font-family: 'Teko', sans-serif;
  font-size: 12px;
  font-weight: 500;
  color: rgba(255,255,255,0.6);
}

.profile-chance-card-net {
  font-family: 'Teko', sans-serif;
  font-size: 12px;
  font-weight: 600;
}

.profile-chance-card-net.positive {
  color: #2ecc71;
}

.profile-chance-card-net.negative {
  color: #e74c3c;
}

/* Tier-based border colors for chance cards */
.profile-chance-card[data-tier="common"] .profile-chance-card-face { border-color: #2ecc71; box-shadow: 0 0 8px rgba(57,255,20,0.3); }
.profile-chance-card[data-tier="uncommon"] .profile-chance-card-face { border-color: #00c8ff; box-shadow: 0 0 8px rgba(0,200,255,0.3); }
.profile-chance-card[data-tier="rare"] .profile-chance-card-face { border-color: #9b59b6; box-shadow: 0 0 8px rgba(221,68,255,0.3); }
.profile-chance-card[data-tier="legendary"] .profile-chance-card-face { border-color: #f39c12; box-shadow: 0 0 8px rgba(255,58,30,0.3); }
.profile-chance-card[data-tier="mythic"] .profile-chance-card-face { border-color: #e74c3c; box-shadow: 0 0 8px rgba(255,106,0,0.3); }

/* === CHANCE CARD DETAIL OVERLAY (3D Rocking Card) === */
#chance-card-detail-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0,0,0,0.9);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 10000;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.25s ease;
  perspective: 800px;
}

#chance-card-detail-overlay.visible {
  opacity: 1;
  pointer-events: auto;
}

.chance-detail-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 24px;
}

/* 3D card container */
.chance-detail-3d-card {
  width: 220px;
  height: 308px;
  border-radius: 12px;
  border: 3px solid;
  transform-style: preserve-3d;
  will-change: transform, box-shadow;
  position: relative;
  --light-intensity: 0;
}

/* Lighting gradient overlay - simulates directional light */
.chance-detail-3d-card::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 10px;
  pointer-events: none;
  z-index: 10;
  background: linear-gradient(
    90deg,
    rgba(255,255,255, calc(0.12 * max(0, var(--light-intensity)))) 0%,
    transparent 40%,
    transparent 60%,
    rgba(0,0,0, calc(0.15 * max(0, calc(-1 * var(--light-intensity))))) 100%
  );
  opacity: 1;
}

/* Front face - matches game c3d-front styling */
.chance-detail-3d-front {
  width: 100%;
  height: 100%;
  border-radius: 10px;
  overflow: hidden;
  background-size: cover;
  background-position: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 48px 16px 56px;
  box-sizing: border-box;
  position: relative;
}

/* Dark overlay like game cards */
.chance-detail-3d-front::before {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,0.45);
  border-radius: inherit;
  z-index: 0;
}

.chance-detail-stats {
  display: flex;
  gap: 20px;
  flex-wrap: wrap;
  justify-content: center;
}

.chance-detail-stat {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
}

.chance-detail-stat-value {
  font-size: 28px;
  font-weight: 800;
  color: #fff;
}

.chance-detail-stat-value.win-color {
  color: #2ecc71;
}

.chance-detail-stat-value.loss-color {
  color: #e74c3c;
}

.chance-detail-stat-label {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.05em;
  color: rgba(255,255,255,0.6);
  text-transform: uppercase;
}

.chance-detail-best-hand {
  font-size: 14px;
  font-weight: 700;
  color: #f1c40f;
  text-align: center;
  margin-top: 4px;
}

.chance-detail-hint {
  font-size: 12px;
  color: rgba(255,255,255,0.4);
  font-style: italic;
}

/* === CUSTOMIZATION MENU ITEMS === */
.profile-menu-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  text-align: left;
  font-family: 'Teko', sans-serif;
  font-size: 18px;
  font-weight: 600;
  letter-spacing: 1px;
  color: #1a1a2e;
  background: linear-gradient(135deg, #ffd740, #ffab00);
  border: none;
  padding: 10px 16px;
  border-radius: 8px;
  cursor: pointer;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
  margin-bottom: 6px;
}

.profile-menu-item:hover:not(:disabled) {
  transform: scale(1.02);
  box-shadow: 0 4px 20px rgba(255, 215, 64, 0.3);
  color: #1a1a2e;
}

.profile-menu-item:disabled {
  opacity: 0.4;
  cursor: default;
  color: #888;
}

.profile-menu-item:active:not(:disabled) {
  transform: scale(0.98);
}

.profile-quick-links {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin: 20px 0 24px 0;
}

.profile-owned-count {
  font-size: 14px;
  font-weight: 500;
  color: #1a1a2e;
}

/* === AVATAR PICKER OVERLAY === */
#avatar-picker-overlay,
#title-picker-overlay {
  position: fixed;
  inset: 0;
  z-index: 10001;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.25s ease;
  background: rgba(0,0,0,0.7);
}

#avatar-picker-overlay.visible,
#title-picker-overlay.visible {
  opacity: 1;
  pointer-events: auto;
}

.avatar-picker-panel,
.title-picker-panel {
  position: relative;
  background: #1a1a2e;
  border: 1.5px solid rgba(255,255,255,0.2);
  border-radius: 12px;
  padding: 20px 24px;
  min-width: 300px;
  max-width: 90vw;
  max-height: 80vh;
  overflow-y: auto;
  transform: translateY(8px);
  transition: transform 0.25s ease;
  color: #fff;
}

#avatar-picker-overlay.visible .avatar-picker-panel,
#title-picker-overlay.visible .title-picker-panel {
  transform: translateY(0);
}

.avatar-picker-header,
.title-picker-header {
  display: flex;
  align-items: center;
  gap: 12px;
  padding-bottom: 12px;
  border-bottom: 1px solid;
  margin-bottom: 16px;
}

.avatar-picker-back-btn,
.title-picker-back-btn {
  font-size: 11px;
  font-weight: 700;
  background: rgba(255,255,255,0.1);
  border: 1px solid rgba(255,255,255,0.3);
  border-radius: 6px;
  padding: 5px 10px;
  cursor: pointer;
  letter-spacing: 0.08em;
  color: #fff;
}

.avatar-picker-back-btn:hover,
.title-picker-back-btn:hover {
  background: rgba(255,255,255,0.2);
}

.avatar-picker-back-btn:active,
.title-picker-back-btn:active {
  transform: scale(0.95);
}

.avatar-picker-title,
.title-picker-title {
  font-size: 13px;
  font-weight: 900;
  letter-spacing: 0.15em;
}

.avatar-picker-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
}

.avatar-option {
  width: 60px;
  height: 60px;
  border-radius: 8px;
  border: 2px solid;
  overflow: hidden;
  cursor: pointer;
  transition: all 0.2s ease;
  position: relative;
  background: rgba(255,255,255,0.1);
}

.avatar-option:hover:not(.locked) {
  transform: scale(1.05);
}

.avatar-option.active {
  border-width: 3px;
}

.avatar-option.locked {
  opacity: 0.4;
  cursor: default;
}

.avatar-option.locked::after {
  content: '🔒';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 18px;
}

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

.title-picker-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.title-option {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 12px;
  border-radius: 6px;
  border: 1.5px solid;
  cursor: pointer;
  transition: all 0.2s ease;
}

.title-option:hover:not(.locked) {
  background: rgba(255,255,255,0.05);
}

.title-option.active {
  border-width: 2px;
}

.title-option.locked {
  opacity: 0.4;
  cursor: default;
}

.title-option-name {
  font-size: 14px;
  font-weight: 600;
  font-style: italic;
}

.title-option-requirement {
  font-size: 10px;
  font-weight: 500;
  opacity: 0.6;
}

/* Profile — phone landscape */
@media (max-height: 500px) {
  .profile-content { padding: 16px 24px; gap: 10px; }
  .profile-title { font-size: 18px; }
  .profile-avatar { width: 60px; height: 60px; }
  .profile-player-name { font-size: 16px; }
  .profile-stats-grid { gap: 0; }
  .profile-stat-item { padding: 4px 10px; }
  .profile-stat-value { font-size: 14px; }
  .profile-chance-stats-grid { grid-template-columns: repeat(6, 1fr); gap: 6px; }
  .profile-chance-card-face { width: 60px; height: 84px; padding: 14px 4px 16px; }
  .profile-chance-card-name { font-size: 5px; top: 4px; }
  .profile-chance-card-desc { font-size: 4.5px; }
  .profile-chance-card-scope { font-size: 3.5px; bottom: 10px; }
  .profile-chance-card-tier { font-size: 3.5px; bottom: 4px; }
  .profile-chance-card-count { font-size: 10px; }
  .profile-chance-card-info { margin-top: 3px; }
}

/* Profile — tablet */
@media (min-width: 768px) and (min-height: 501px) {
  .profile-content { max-width: 700px; padding: 48px 32px 40px; }
  .profile-title { font-size: 28px; }
  .profile-stats-grid { grid-template-columns: 1fr; }
  .profile-chance-stats-grid { grid-template-columns: repeat(6, 1fr); gap: 12px; }
  .profile-chance-card-face { width: 100px; height: 140px; padding: 22px 8px 28px; }
  .profile-chance-card-name { font-size: 9px; top: 7px; }
  .profile-chance-card-desc { font-size: 7px; }
  .profile-chance-card-scope { font-size: 5.5px; bottom: 18px; }
  .profile-chance-card-tier { font-size: 5.5px; bottom: 8px; }
}

/* ═══════════════════════════════════════════════════════════════════ */
/* THEMES & CUSTOMIZATION SCREEN                                      */
/* ═══════════════════════════════════════════════════════════════════ */

#themes-screen {
  position: fixed;
  inset: 0;
  z-index: 10000;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  overflow-y: auto;
  background: #000;
}

.themes-content {
  position: relative;
  width: 100%;
  max-width: 480px;
  padding: 36px 28px 32px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  background: linear-gradient(145deg, #1a1a2e 0%, #16213e 50%, #0f3460 100%);
  border: 1px solid rgba(255, 215, 64, 0.3);
  border-radius: 16px;
  box-shadow: 0 0 40px rgba(255, 215, 64, 0.15), 0 20px 60px rgba(0, 0, 0, 0.6);
  margin: 20px 0;
}

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

.themes-back-btn {
  font-family: 'Teko', sans-serif;
  font-size: 15px;
  font-weight: 600;
  color: #ffd740;
  background: none;
  border: 1px solid rgba(255, 215, 64, 0.4);
  border-radius: 6px;
  padding: 6px 14px;
  cursor: pointer;
  transition: all 0.15s ease;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.themes-back-btn:hover { background: rgba(255, 215, 64, 0.1); }
.themes-back-btn:active { transform: scale(0.95); }

.themes-title {
  font-family: 'Teko', sans-serif;
  font-size: 28px;
  font-weight: 700;
  letter-spacing: 3px;
  text-transform: uppercase;
  background: linear-gradient(135deg, #ffd740, #ffab00);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.themes-rule {
  width: 100%;
  height: 2px;
  border-radius: 1px;
  background: rgba(255, 215, 64, 0.15);
}

.themes-section {
  margin-bottom: 16px;
}

.themes-section-header {
  font-family: 'Teko', sans-serif;
  font-size: 16px;
  font-weight: 600;
  letter-spacing: 2px;
  text-transform: uppercase;
  background: linear-gradient(135deg, #ffd740, #ffab00);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  color: #ffd740;
  border-bottom: 1px solid rgba(255, 215, 64, 0.15);
  padding-bottom: 6px;
  margin-bottom: 10px;
}

.themes-section-desc {
  font-family: 'Teko', sans-serif;
  font-size: 13px;
  font-weight: 400;
  color: rgba(255, 255, 255, 0.5);
  margin: 0 0 10px;
  letter-spacing: 0.5px;
}

/* ── Active Theme Selector Grid ── */

.themes-selector-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 8px;
}

.themes-selector-btn {
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 10px;
  padding: 14px 10px;
  text-align: center;
  cursor: pointer;
  transition: all 0.2s ease;
  position: relative;
  overflow: hidden;
}
.themes-selector-btn:hover { background: rgba(255, 255, 255, 0.08); }
.themes-selector-btn:active { transform: scale(0.97); }

.themes-selector-name {
  font-family: 'Teko', sans-serif;
  font-size: 16px;
  font-weight: 600;
  color: #fff;
  display: block;
  letter-spacing: 1px;
}

.themes-selector-status {
  font-family: 'Teko', sans-serif;
  font-size: 11px;
  font-weight: 400;
  color: rgba(255, 255, 255, 0.4);
  text-transform: uppercase;
  letter-spacing: 1.5px;
  display: block;
  margin-top: 2px;
}

.themes-selector-btn.active {
  border-color: rgba(255, 215, 64, 0.5);
  box-shadow: 0 0 12px rgba(255, 215, 64, 0.15);
}
.themes-selector-btn.active .themes-selector-status {
  color: #ffd740;
}

/* Inline color scheme display inside owned theme buttons */
.themes-selector-scheme {
  margin-top: 6px;
  padding: 4px 8px;
  display: flex;
  align-items: center;
  gap: 8px;
  pointer-events: none;
}
.themes-selector-scheme .themes-color-swatch {
  flex: 1;
  height: 6px;
  border-radius: 3px;
  display: flex;
  overflow: hidden;
  margin-bottom: 0;
}
.themes-selector-scheme .themes-color-swatch span { flex: 1; }
.themes-scheme-label {
  font-family: 'Teko', sans-serif;
  font-size: 11px;
  color: rgba(255, 255, 255, 0.3);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  white-space: nowrap;
}

/* Locked theme buttons */
.themes-selector-btn.locked {
  opacity: 0.7;
  cursor: default;
}
.themes-selector-btn.locked:hover { background: rgba(255, 255, 255, 0.04); }
.themes-selector-btn.locked:active { transform: none; }

.themes-selector-lock {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  margin-top: 4px;
}

.themes-selector-price {
  font-family: 'Teko', sans-serif;
  font-size: 14px;
  font-weight: 600;
  color: #ffd740;
}

.themes-selector-store-link {
  font-family: 'Teko', sans-serif;
  font-size: 11px;
  color: rgba(255, 215, 64, 0.7);
  text-decoration: underline;
  cursor: pointer;
  letter-spacing: 1px;
  background: none;
  border: none;
  padding: 0;
}
.themes-selector-store-link:hover { color: #ffd740; }

/* ── Home Color Scheme Grid ── */

.themes-color-scheme-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 8px;
}

.themes-color-btn {
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 10px;
  padding: 10px;
  text-align: center;
  cursor: pointer;
  transition: all 0.2s ease;
  position: relative;
}
.themes-color-btn:hover { background: rgba(255, 255, 255, 0.08); }
.themes-color-btn:active { transform: scale(0.97); }

.themes-color-swatch {
  height: 6px;
  border-radius: 3px;
  display: flex;
  overflow: hidden;
  margin-bottom: 6px;
}
.themes-color-swatch span {
  flex: 1;
}

.themes-color-name {
  font-family: 'Teko', sans-serif;
  font-size: 13px;
  font-weight: 600;
  color: #fff;
  letter-spacing: 0.5px;
}

.themes-color-btn.active {
  border-color: rgba(255, 215, 64, 0.5);
  box-shadow: 0 0 12px rgba(255, 215, 64, 0.15);
}

.themes-color-btn.locked {
  opacity: 0.5;
  cursor: default;
}
.themes-color-btn.locked:hover { background: rgba(255, 255, 255, 0.04); }
.themes-color-btn.locked:active { transform: none; }
.themes-color-lock-text {
  font-family: 'Teko', sans-serif;
  font-size: 10px;
  color: rgba(255, 215, 64, 0.6);
  letter-spacing: 1px;
}

/* ── Card Backs ── */

.themes-card-backs {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  justify-content: center;
}

.themes-card-back-option {
  width: 80px;
  cursor: pointer;
  border-radius: 8px;
  border: 2px solid transparent;
  padding: 4px;
  transition: all 0.2s ease;
  text-align: center;
}
.themes-card-back-option:hover { border-color: rgba(255, 255, 255, 0.2); }
.themes-card-back-option:active { transform: scale(0.95); }
.themes-card-back-option.active {
  border-color: rgba(255, 215, 64, 0.6);
  box-shadow: 0 0 10px rgba(255, 215, 64, 0.2);
}

.themes-card-back-preview {
  width: 100%;
  border-radius: 6px;
  display: block;
}

.themes-card-back-label {
  font-family: 'Teko', sans-serif;
  font-size: 12px;
  color: rgba(255, 255, 255, 0.6);
  margin-top: 4px;
  letter-spacing: 0.5px;
}

.themes-card-backs-note {
  font-family: 'Teko', sans-serif;
  font-size: 12px;
  color: rgba(255, 255, 255, 0.4);
  text-align: center;
  margin-top: 8px;
  width: 100%;
}

.themes-store-link {
  font-family: 'Teko', sans-serif;
  font-size: 13px;
  color: rgba(255, 215, 64, 0.7);
  text-decoration: underline;
  cursor: pointer;
  display: block;
  text-align: center;
  margin-top: 6px;
  background: none;
  border: none;
  padding: 0;
  letter-spacing: 0.5px;
}
.themes-store-link:hover { color: #ffd740; }

/* ── Nameplate Preview ── */

.themes-nameplate-preview {
  --np-base: 24px;
  position: relative;
  display: flex;
  flex-direction: row;
  align-items: stretch;
  width: calc(var(--np-base) * 13);
  max-width: 100%;
  margin: 0 auto 10px;
  border-radius: calc(var(--np-base) * 0.75);
  overflow: hidden;
  border: 1px solid rgba(255,255,255,0.15);
  background: linear-gradient(135deg, #1a1a1a 0%, #2a2a2a 100%);
}

/* ── Nameplate Customize Panel ── */

.themes-customize-panel {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}

/* ── Playlist Creator ── */

.themes-playlist {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.themes-playlist-group {
  margin-bottom: 10px;
}

.themes-playlist-group-header {
  font-family: 'Teko', sans-serif;
  font-size: 14px;
  font-weight: 600;
  color: rgba(255, 215, 64, 0.7);
  letter-spacing: 1px;
  margin-bottom: 4px;
  text-transform: uppercase;
}

.themes-playlist-group-note {
  font-family: 'Teko', sans-serif;
  font-size: 11px;
  color: rgba(255, 215, 64, 0.5);
  font-style: italic;
  cursor: pointer;
  margin-bottom: 4px;
  letter-spacing: 0.5px;
}
.themes-playlist-group-note:hover { color: #ffd740; text-decoration: underline; }

.themes-playlist-track {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 6px 8px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

.themes-playlist-track-name {
  font-family: 'Teko', sans-serif;
  font-size: 14px;
  font-weight: 400;
  color: #fff;
  flex: 1;
  letter-spacing: 0.3px;
}

.themes-playlist-preview-btn {
  background: none;
  border: 1px solid rgba(255, 215, 64, 0.3);
  color: rgba(255, 215, 64, 0.7);
  font-size: 12px;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 8px;
  transition: all 0.2s;
  flex-shrink: 0;
}
.themes-playlist-preview-btn:hover {
  border-color: rgba(255, 215, 64, 0.6);
  color: #ffd740;
  background: rgba(255, 215, 64, 0.1);
}
.themes-playlist-preview-btn.playing {
  border-color: #ffd740;
  color: #ffd740;
  background: rgba(255, 215, 64, 0.15);
  box-shadow: 0 0 6px rgba(255, 215, 64, 0.3);
}

.themes-playlist-track .nav-toggle {
  transform: scale(0.8);
  transform-origin: right center;
}
.themes-playlist-track.locked {
  opacity: 0.4;
  pointer-events: none;
}
.themes-playlist-preview-btn:disabled {
  opacity: 0.3;
  cursor: not-allowed;
}

.themes-playlist-actions {
  margin-top: 10px;
  text-align: center;
}

.themes-playlist-reset-btn {
  font-family: 'Teko', sans-serif;
  font-size: 13px;
  font-weight: 500;
  color: rgba(255, 215, 64, 0.6);
  background: none;
  border: 1px solid rgba(255, 215, 64, 0.3);
  padding: 6px 16px;
  border-radius: 6px;
  cursor: pointer;
  letter-spacing: 1px;
  transition: all 0.15s ease;
}
.themes-playlist-reset-btn:hover {
  color: #ffd740;
  border-color: rgba(255, 215, 64, 0.5);
  background: rgba(255, 215, 64, 0.05);
}
.themes-playlist-reset-btn:active { transform: scale(0.95); }

/* ── Themes Screen Responsive ── */

@media (max-height: 500px) {
  .themes-content { padding: 16px 20px; gap: 10px; }
  .themes-title { font-size: 22px; }
  .themes-section-header { font-size: 14px; }
  .themes-customize-panel { grid-template-columns: 1fr; }
}

@media (min-width: 768px) and (min-height: 501px) {
  .themes-content { max-width: 520px; padding: 48px 32px 40px; }
  .themes-title { font-size: 32px; }
}

/* ═══════════════════════════════════════════════════════════════════ */
/* STORE SCREEN                                                       */
/* ═══════════════════════════════════════════════════════════════════ */

#store-screen {
  position: fixed;
  inset: 0;
  z-index: 10000;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  overflow-y: auto;
  overflow-x: hidden;
  -webkit-overflow-scrolling: touch;
  padding: 20px 0;
}

.store-content {
  position: relative;
  width: 90%;
  max-width: 480px;
  padding: 36px 28px 32px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  background: linear-gradient(145deg, #1a1a2e 0%, #16213e 50%, #0f3460 100%);
  border: 1px solid rgba(255, 215, 64, 0.3);
  border-radius: 16px;
  box-shadow:
    0 0 40px rgba(255, 215, 64, 0.15),
    0 20px 60px rgba(0, 0, 0, 0.6);
  box-sizing: border-box;
  margin: 20px 0;
}

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

.store-back-btn {
  font-family: 'Teko', sans-serif;
  font-size: 15px;
  font-weight: 600;
  color: #ffd740;
  background: none;
  border: 1px solid rgba(255, 215, 64, 0.4);
  border-radius: 6px;
  padding: 6px 14px;
  cursor: pointer;
  transition: all 0.15s ease;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.store-back-btn:hover {
  background: rgba(255, 215, 64, 0.1);
}
.store-back-btn:active { transform: scale(0.95); }

.store-title {
  font-family: 'Teko', sans-serif;
  font-size: 28px;
  font-weight: 700;
  letter-spacing: 3px;
  text-transform: uppercase;
  background: linear-gradient(135deg, #ffd740, #ffab00);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.store-rule {
  width: 100%;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(201,168,76,0.4), transparent);
  margin-bottom: 4px;
}

/* --- Jewel / Chip Balance Bar --- */
.store-jewel-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 14px 20px;
  border-radius: 10px;
  border: 1.5px solid rgba(201, 168, 76, 0.4);
  background: linear-gradient(135deg, rgba(201, 168, 76, 0.08), rgba(201, 168, 76, 0.02));
}

.store-balance-group {
  display: flex;
  align-items: center;
  gap: 6px;
}

.store-jewel-icon {
  font-size: 20px;
}
.store-chip-icon {
  font-size: 16px;
  color: var(--gold, #c9a84c);
}

.store-jewel-amount {
  font-family: 'Orbitron', sans-serif;
  font-size: 22px;
  font-weight: 700;
  color: #e0d0ff;
}
.store-chip-amount {
  font-family: 'Orbitron', sans-serif;
  font-size: 22px;
  font-weight: 700;
  color: var(--gold, #c9a84c);
}

.store-balance-label {
  font-family: 'Russo One', sans-serif;
  font-size: 9px;
  letter-spacing: 0.12em;
  opacity: 0.5;
  text-transform: uppercase;
}

/* --- Theme Showcase Cards --- */
.store-themes {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

@media (min-width: 768px) {
  .store-themes {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
  }
}

.store-theme-card {
  border-radius: 14px;
  overflow: hidden;
  border: 1.5px solid rgba(255,255,255,0.12);
  background: linear-gradient(180deg, #1a1a2e 0%, #0f0f1a 100%);
}

.store-theme-hero {
  position: relative;
  width: 100%;
  height: 180px;
  overflow: hidden;
}

.store-theme-hero-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: brightness(0.7) saturate(1.2);
}

.store-theme-hero-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom, transparent 30%, rgba(0,0,0,0.85) 100%);
}

.store-theme-name {
  position: absolute;
  bottom: 32px;
  left: 20px;
  font-family: 'Orbitron', sans-serif;
  font-size: 22px;
  font-weight: 900;
  letter-spacing: 0.1em;
  text-shadow: 0 2px 12px rgba(0,0,0,0.8);
  color: #fff;
}

.store-theme-tagline {
  position: absolute;
  bottom: 14px;
  left: 20px;
  font-family: 'Crimson Pro', serif;
  font-size: 14px;
  font-style: italic;
  opacity: 0.8;
  color: #fff;
}

.store-theme-body {
  padding: 16px 20px 20px;
}

.store-theme-desc {
  font-family: 'Crimson Pro', serif;
  font-size: 15px;
  line-height: 1.5;
  color: rgba(255,255,255,0.75);
  margin-bottom: 12px;
}

.store-theme-features {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 12px 0;
  border-top: 1px solid rgba(255,255,255,0.08);
  border-bottom: 1px solid rgba(255,255,255,0.08);
  margin-bottom: 16px;
}

.store-feature-row {
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 14px;
  font-weight: 400;
  color: rgba(255,255,255,0.7);
  letter-spacing: 0.02em;
}

.store-feature-bonus {
  color: var(--gold, #c9a84c);
  font-weight: 700;
}

.store-theme-action {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

/* --- Purchase / Trial / Owned Buttons --- */
.store-btn-purchase {
  width: 100%;
  padding: 14px;
  font-family: 'Orbitron', sans-serif;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.06em;
  border-radius: 8px;
  border: 2px solid var(--gold, #c9a84c);
  background: linear-gradient(135deg, rgba(201,168,76,0.2), rgba(201,168,76,0.05));
  color: var(--gold, #c9a84c);
  cursor: pointer;
  transition: all 0.2s ease;
}
.store-btn-purchase:hover:not(:disabled) {
  background: linear-gradient(135deg, rgba(201,168,76,0.35), rgba(201,168,76,0.1));
  transform: translateY(-1px);
  box-shadow: 0 4px 20px rgba(201,168,76,0.3);
}
.store-btn-purchase:disabled {
  opacity: 0.4;
  cursor: default;
}

.store-btn-trial {
  width: 100%;
  padding: 12px;
  font-family: 'Russo One', sans-serif;
  font-size: 12px;
  letter-spacing: 0.08em;
  border-radius: 8px;
  border: 1px solid rgba(255,255,255,0.3);
  background: rgba(255,255,255,0.05);
  color: rgba(255,255,255,0.8);
  cursor: pointer;
  transition: all 0.15s ease;
}
.store-btn-trial:hover:not(:disabled) {
  background: rgba(255,255,255,0.1);
  border-color: rgba(255,255,255,0.5);
}
.store-btn-trial:disabled {
  opacity: 0.4;
  cursor: default;
}

.store-btn-trial-used {
  width: 100%;
  padding: 12px;
  font-family: 'Russo One', sans-serif;
  font-size: 12px;
  letter-spacing: 0.08em;
  border-radius: 8px;
  border: 1px solid rgba(255,255,255,0.15);
  background: rgba(255,255,255,0.02);
  color: rgba(255,255,255,0.35);
  cursor: default;
}

.store-btn-owned {
  width: 100%;
  padding: 14px;
  font-family: 'Orbitron', sans-serif;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.06em;
  border-radius: 8px;
  border: 2px solid rgba(76, 201, 96, 0.4);
  background: rgba(76, 201, 96, 0.1);
  color: #4cc960;
  cursor: default;
}

.store-theme-card[data-theme="standard"] .store-btn-owned {
  border-color: rgba(255,255,255,0.2);
  background: rgba(255,255,255,0.05);
  color: rgba(255,255,255,0.6);
}

.store-trial-active {
  text-align: center;
  font-family: 'Russo One', sans-serif;
  font-size: 12px;
  letter-spacing: 0.08em;
  color: #00e5ff;
  padding: 10px;
  border: 1px solid rgba(0, 229, 255, 0.3);
  border-radius: 8px;
  background: rgba(0, 229, 255, 0.06);
}

/* --- Sections --- */
.store-section {
  margin-top: 8px;
}

.store-section-header {
  font-family: 'Russo One', sans-serif;
  font-size: 12px;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.5);
  margin-bottom: 12px;
}

/* --- Jewel Exchange --- */
.store-exchange-info {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 12px;
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 15px;
  color: rgba(255,255,255,0.7);
}

.store-exchange-note {
  font-size: 11px;
  opacity: 0.5;
  font-style: italic;
}

.store-exchange-buttons {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.store-exchange-btn {
  width: 100%;
  padding: 12px 16px;
  border-radius: 8px;
  border: 1px solid rgba(201,168,76,0.3);
  background: rgba(201,168,76,0.05);
  color: rgba(255,255,255,0.7);
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 14px;
  letter-spacing: 0.02em;
  cursor: pointer;
  transition: all 0.15s ease;
}
.store-exchange-btn:hover:not(:disabled) {
  background: rgba(201,168,76,0.12);
  border-color: rgba(201,168,76,0.5);
  color: var(--gold, #c9a84c);
}
.store-exchange-btn:disabled {
  opacity: 0.3;
  cursor: default;
}

/* --- Get Jewels Coming Soon --- */
.store-coming-soon-panel {
  text-align: center;
  padding: 20px;
  border: 1px dashed rgba(255,255,255,0.15);
  border-radius: 10px;
  color: rgba(255,255,255,0.4);
  font-family: 'Crimson Pro', serif;
  font-size: 14px;
}
.store-earn-hint {
  margin-top: 6px;
  font-size: 12px;
  opacity: 0.7;
}

/* --- Jewel Pack Cards --- */
.store-jewel-packs {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
}
.jewel-pack-card {
  flex: 0 0 calc(33.33% - 7px);
  min-width: 0;
}
@media (max-width: 400px) {
  .jewel-pack-card {
    flex: 0 0 calc(50% - 5px);
  }
}

.jewel-pack-card {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 16px 8px 14px;
  border-radius: 10px;
  border: 1.5px solid rgba(201, 168, 76, 0.25);
  background: linear-gradient(180deg, rgba(201, 168, 76, 0.08) 0%, rgba(0, 0, 0, 0.2) 100%);
  cursor: pointer;
  transition: all 0.15s ease;
  font-family: 'Orbitron', sans-serif;
}
.jewel-pack-card:active {
  transform: scale(0.97);
}

.jewel-pack-popular {
  border-color: rgba(0, 229, 255, 0.5);
  background: linear-gradient(180deg, rgba(0, 229, 255, 0.1) 0%, rgba(0, 0, 0, 0.2) 100%);
}
.jewel-pack-best {
  border-color: rgba(255, 215, 64, 0.5);
  background: linear-gradient(180deg, rgba(255, 215, 64, 0.12) 0%, rgba(0, 0, 0, 0.2) 100%);
}

.jewel-pack-badge {
  position: absolute;
  top: -9px;
  left: 50%;
  transform: translateX(-50%);
  font-size: 8px;
  font-weight: 700;
  letter-spacing: 0.1em;
  padding: 2px 8px;
  border-radius: 4px;
  white-space: nowrap;
}
.jewel-pack-popular .jewel-pack-badge {
  background: #00e5ff;
  color: #0a1a2e;
}
.jewel-pack-best .jewel-pack-badge {
  background: linear-gradient(135deg, #ffd740, #ffab00);
  color: #1a1a2e;
}

.jewel-pack-img {
  width: 64px;
  height: 64px;
  border-radius: 8px;
  object-fit: cover;
}
.jewel-pack-amount {
  font-size: 16px;
  font-weight: 900;
  color: #e0d0ff;
  letter-spacing: 0.02em;
}
.jewel-pack-bonus {
  font-size: 10px;
  font-weight: 700;
  color: var(--gold, #c9a84c);
  letter-spacing: 0.02em;
}
.jewel-pack-label {
  font-size: 9px;
  font-weight: 600;
  letter-spacing: 0.12em;
  color: rgba(255, 255, 255, 0.5);
  text-transform: uppercase;
}
.jewel-pack-price {
  font-size: 14px;
  font-weight: 700;
  color: var(--gold, #c9a84c);
  margin-top: 4px;
}

/* --- Lifetime VIP Pass Card --- */
.lifetime-pass-card {
  position: relative;
  margin-top: 16px;
  border-radius: 12px;
  border: 2px solid rgba(255, 175, 0, 0.5);
  background: linear-gradient(135deg, rgba(255, 215, 64, 0.08) 0%, rgba(255, 111, 0, 0.06) 50%, rgba(255, 215, 64, 0.08) 100%);
  overflow: hidden;
}
.lifetime-pass-badge {
  text-align: center;
  padding: 6px;
  font-family: 'Orbitron', sans-serif;
  font-size: 11px;
  font-weight: 900;
  letter-spacing: 0.2em;
  background: linear-gradient(135deg, #ffd740, #ff6f00);
  color: #1a1a2e;
}
.lifetime-pass-body {
  padding: 16px;
}
.lifetime-pass-img {
  display: block;
  width: 80px;
  height: 80px;
  border-radius: 10px;
  object-fit: cover;
  margin: 0 auto 12px;
}
.lifetime-pass-title {
  font-family: 'Orbitron', sans-serif;
  font-size: 18px;
  font-weight: 900;
  letter-spacing: 0.08em;
  background: linear-gradient(135deg, #ffd740, #ffab00);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  margin-bottom: 12px;
}
.lifetime-pass-perks {
  list-style: none;
  padding: 0;
  margin: 0 0 14px;
}
.lifetime-pass-perks li {
  font-family: 'Crimson Pro', serif;
  font-size: 13px;
  color: rgba(255, 255, 255, 0.8);
  padding: 4px 0 4px 18px;
  position: relative;
}
.lifetime-pass-perks li::before {
  content: '✦';
  position: absolute;
  left: 0;
  color: #ffd740;
}
.lifetime-pass-price {
  text-align: center;
  font-family: 'Orbitron', sans-serif;
  font-size: 28px;
  font-weight: 900;
  color: #ffd740;
  margin-bottom: 12px;
}
.lifetime-pass-btn {
  width: 100%;
  padding: 14px;
  font-family: 'Orbitron', sans-serif;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.1em;
  border-radius: 8px;
  border: none;
  background: linear-gradient(135deg, #ffd740, #ff6f00);
  color: #1a1a2e;
  cursor: pointer;
  transition: all 0.15s ease;
}
.lifetime-pass-btn:active {
  transform: scale(0.97);
}
.lifetime-pass-btn:disabled {
  opacity: 0.5;
  cursor: default;
}
.lifetime-pass-owned {
  background: linear-gradient(135deg, rgba(76, 201, 96, 0.06) 0%, rgba(46, 125, 50, 0.04) 100%);
}
.lifetime-pass-owned .lifetime-pass-badge {
  background: linear-gradient(135deg, #4cc960, #2e7d32);
}

/* --- Stripe Payment Modal --- */
#stripe-payment-overlay {
  position: fixed;
  inset: 0;
  z-index: 10500;
  background: rgba(0, 0, 0, 0.85);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  animation: fadeIn 0.15s ease;
}
.stripe-payment-panel {
  background: linear-gradient(135deg, #1a1a2e 0%, #16213e 100%);
  border: 1px solid rgba(201, 168, 76, 0.4);
  border-radius: 14px;
  padding: 24px 20px;
  max-width: 380px;
  width: 100%;
  box-shadow: 0 0 40px rgba(201, 168, 76, 0.1), 0 8px 32px rgba(0, 0, 0, 0.6);
}
.stripe-payment-title {
  text-align: center;
  font-family: 'Orbitron', sans-serif;
  font-size: 16px;
  letter-spacing: 0.15em;
  color: var(--gold, #c9a84c);
  margin: 0 0 16px;
}
.stripe-payment-summary {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 16px;
  border-radius: 8px;
  background: rgba(0, 0, 0, 0.3);
  margin-bottom: 16px;
}
.stripe-payment-pack {
  font-family: 'Russo One', sans-serif;
  font-size: 14px;
  color: #e0d0ff;
}
.stripe-payment-total {
  font-family: 'Orbitron', sans-serif;
  font-size: 18px;
  font-weight: 700;
  color: var(--gold, #c9a84c);
}
#stripe-card-element {
  padding: 14px;
  border-radius: 8px;
  border: 1px solid rgba(201, 168, 76, 0.3);
  background: rgba(0, 0, 0, 0.3);
  margin-bottom: 8px;
}
.stripe-card-errors {
  color: #ff5252;
  font-family: 'Crimson Pro', serif;
  font-size: 13px;
  min-height: 20px;
  margin-bottom: 12px;
}
.stripe-payment-buttons {
  display: flex;
  gap: 10px;
}
.stripe-cancel-btn,
.stripe-pay-btn {
  flex: 1;
  padding: 14px;
  font-family: 'Orbitron', sans-serif;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.06em;
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.15s ease;
}
.stripe-cancel-btn {
  border: 1px solid rgba(255, 255, 255, 0.2);
  background: rgba(255, 255, 255, 0.05);
  color: rgba(255, 255, 255, 0.6);
}
.stripe-pay-btn {
  border: 2px solid var(--gold, #c9a84c);
  background: linear-gradient(135deg, rgba(201, 168, 76, 0.2), rgba(201, 168, 76, 0.05));
  color: var(--gold, #c9a84c);
}
.stripe-pay-btn:disabled {
  opacity: 0.3;
  cursor: default;
}

/* --- Jewel Exchange Confirmation Overlay --- */
#jewel-exchange-overlay {
  position: fixed;
  inset: 0;
  z-index: 10500;
  background: rgba(0,0,0,0.85);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  animation: fadeIn 0.15s ease;
}
.jewel-exchange-panel {
  background: linear-gradient(135deg, #1a1a2e 0%, #16213e 100%);
  border: 1px solid rgba(201,168,76,0.4);
  border-radius: 14px;
  padding: 24px 20px;
  max-width: 380px;
  width: 100%;
  box-shadow: 0 0 40px rgba(201,168,76,0.1), 0 8px 32px rgba(0,0,0,0.6);
}
.jewel-exchange-title {
  text-align: center;
  font-family: 'Orbitron', sans-serif;
  font-size: 16px;
  letter-spacing: 0.15em;
  color: var(--gold, #c9a84c);
  margin: 0 0 16px;
}
.jewel-exchange-nameplate {
  position: relative;
  display: flex;
  align-items: center;
  border-radius: 10px;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,0.1);
  margin-bottom: 16px;
  min-height: 64px;
}
.jewel-exchange-nameplate .profile-nameplate-avatar {
  width: 56px;
  min-width: 56px;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  z-index: 2;
  margin: 6px 0 6px 8px;
  -webkit-transform: translateZ(0);
  transform: translateZ(0);
}
.jewel-exchange-nameplate .profile-nameplate-avatar img {
  width: 48px;
  height: 48px;
  border-radius: 6px;
  object-fit: cover;
  border: 2px solid #555;
}
.jewel-exchange-nameplate .profile-nameplate-text {
  flex: 1;
  padding: 8px 12px;
  position: relative;
  z-index: 2;
  -webkit-transform: translateZ(0);
  transform: translateZ(0);
}
.jewel-exchange-nameplate .profile-nameplate-name {
  font-size: 13px;
}
.jewel-exchange-nameplate .profile-nameplate-title {
  font-size: 11px;
}
.jewel-exchange-nameplate .profile-nameplate-chips {
  font-size: 12px;
}
.jewel-exchange-details {
  text-align: center;
  margin-bottom: 14px;
}
.jewel-exchange-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 8px 16px;
  background: rgba(255,255,255,0.04);
  border-radius: 8px;
}
.jewel-exchange-label {
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 13px;
  color: rgba(255,255,255,0.5);
  text-transform: uppercase;
  letter-spacing: 0.08em;
}
.jewel-exchange-value {
  font-family: 'Russo One', sans-serif;
  font-size: 18px;
  color: var(--gold, #c9a84c);
}
.jewel-exchange-value-chips {
  color: #4fc3f7;
}
.jewel-exchange-details .jewel-exchange-row + .jewel-exchange-row {
  margin-top: 6px;
}
.jewel-exchange-warning {
  background: rgba(255,60,60,0.08);
  border: 1px solid rgba(255,60,60,0.25);
  border-radius: 8px;
  padding: 10px 14px;
  font-family: 'Crimson Pro', serif;
  font-size: 13px;
  color: rgba(255,180,180,0.9);
  text-align: center;
  margin-bottom: 14px;
  line-height: 1.4;
}
.jewel-exchange-confirm-input {
  margin-bottom: 16px;
}
.jewel-exchange-confirm-input label {
  display: block;
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 13px;
  color: rgba(255,255,255,0.6);
  margin-bottom: 6px;
  text-align: center;
}
.jewel-exchange-confirm-input input {
  width: 100%;
  padding: 10px 14px;
  border-radius: 8px;
  border: 1px solid rgba(201,168,76,0.3);
  background: rgba(0,0,0,0.3);
  color: #fff;
  font-family: 'Russo One', sans-serif;
  font-size: 18px;
  text-align: center;
  letter-spacing: 0.05em;
  outline: none;
  transition: border-color 0.15s ease;
  box-sizing: border-box;
  -moz-appearance: textfield;
}
.jewel-exchange-confirm-input input::-webkit-outer-spin-button,
.jewel-exchange-confirm-input input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
.jewel-exchange-confirm-input input:focus {
  border-color: var(--gold, #c9a84c);
}
.jewel-exchange-confirm-input input::placeholder {
  color: rgba(255,255,255,0.2);
  font-size: 14px;
}
.jewel-exchange-buttons {
  display: flex;
  gap: 10px;
}
.jewel-exchange-cancel-btn,
.jewel-exchange-confirm-btn {
  flex: 1;
  padding: 12px 16px;
  border-radius: 8px;
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 14px;
  letter-spacing: 0.08em;
  cursor: pointer;
  transition: all 0.15s ease;
  text-transform: uppercase;
}
.jewel-exchange-cancel-btn {
  border: 1px solid rgba(255,255,255,0.15);
  background: rgba(255,255,255,0.05);
  color: rgba(255,255,255,0.6);
}
.jewel-exchange-cancel-btn:hover {
  background: rgba(255,255,255,0.1);
  color: rgba(255,255,255,0.8);
}
.jewel-exchange-confirm-btn {
  border: 1px solid rgba(201,168,76,0.4);
  background: linear-gradient(135deg, rgba(201,168,76,0.15) 0%, rgba(201,168,76,0.05) 100%);
  color: var(--gold, #c9a84c);
}
.jewel-exchange-confirm-btn:hover:not(:disabled) {
  background: linear-gradient(135deg, rgba(201,168,76,0.25) 0%, rgba(201,168,76,0.1) 100%);
  border-color: rgba(201,168,76,0.6);
  box-shadow: 0 0 12px rgba(201,168,76,0.15);
}
.jewel-exchange-confirm-btn:disabled {
  opacity: 0.3;
  cursor: default;
}

/* --- Store Responsive --- */
@media (min-width: 600px) {
  .store-content {
    max-width: 700px;
    padding: 48px 32px 40px;
  }
  .store-theme-hero {
    height: 220px;
  }
}

/* ═══════════════════════════════════════════════════════════════════ */
/* GAME STYLES — Standard / Green Felt (theme-specific below)        */
/* ═══════════════════════════════════════════════════════════════════ */

/* Chaos Hold'em — Standard / Green Felt Style */
/* Mobile-first, landscape orientation, fully responsive */

/* === RESET & BASE === */
*, *::before, *::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

:root {
  /* Sizing base (scales with viewport) */
  --base: min(1.2vw, 1.2vh);
}

html, body {
  width: 100%;
  height: 100%;
  overflow: hidden;
  font-size: calc(var(--base) * 1.4);
  -webkit-font-smoothing: antialiased;
  background: #0a0a12;
  color: #f0ead6;
}

/* === GAME CONTAINER === */
#game-container {
  width: 100%;
  height: 100%;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  padding-top: env(safe-area-inset-top);
  padding-bottom: env(safe-area-inset-bottom);
  padding-left: env(safe-area-inset-left);
  padding-right: env(safe-area-inset-right);
}

/* === TABLE === */
#table {
  position: relative;
  width: 90%;
  height: 85%;
  max-width: 1200px;
  max-height: 700px;
  border-radius: 50%;
  border: 6px solid;
}

/* Felt surface */
#table::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
}

/* Subtle felt texture overlay */
#table::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
}

/* Theme decoration layers — hidden by default, styled by specific themes */
.table-rail,
.felt-ferns,
.felt-wildlife,
.felt-beach-edge,
.table-pinstripe {
  display: none;
}

/* === COMMUNITY CARDS === */
#community-area {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -55%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: calc(var(--base) * 0.8);
  z-index: 10;
}

#community-cards {
  display: flex;
  gap: calc(var(--base) * 0.6);
  justify-content: center;
}

/* === EFFECT NOTIFICATIONS (above community cards) — "screen" look === */
#effect-notifications {
  position: relative;
  /* Fixed width matching community cards area: 5x3.8 + 4x0.6 = 21.4 base */
  width: calc(var(--base) * 21.4);
  min-height: calc(var(--base) * 2.4);
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid;
  border-radius: calc(var(--base) * 0.3);
  overflow: hidden;
}

#effect-notifications:empty {
  display: flex;
}

.effect-notification {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: calc(var(--base) * 0.65);
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: calc(var(--base) * 0.4) calc(var(--base) * 1);
  width: 100%;
  white-space: nowrap;
  border: 1px solid;
  border-radius: calc(var(--base) * 0.25);
  animation: notification-pulse 2.5s ease-in-out infinite;
  transition: opacity 0.4s ease;
  position: relative;
}

.effect-notification .effect-text {
  flex: 1;
  text-align: center;
}

.effect-notification .effect-counter {
  position: absolute;
  right: calc(var(--base) * 0.6);
  font-size: calc(var(--base) * 0.5);
  opacity: 0.5;
  font-weight: 400;
}

.effect-notification .effect-tap-hint {
  position: absolute;
  left: calc(var(--base) * 0.6);
  font-size: calc(var(--base) * 0.5);
  opacity: 0.4;
  font-weight: 600;
  letter-spacing: 0.5px;
  text-transform: uppercase;
}

/* --- Notification tier colors — provided by theme --- */

/* Expanded notification list (click to expand/collapse) */
#effect-notifications.expanded {
  z-index: 15;
  overflow: visible;
}

.effect-notification-list {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  display: flex;
  flex-direction: column;
  gap: calc(var(--base) * 0.35);
  padding: calc(var(--base) * 0.3);
  border: 1px solid;
  border-radius: calc(var(--base) * 0.3);
}

.effect-notification-list .effect-notification {
  animation: none;
  width: auto;
}

.effect-collapse-hint {
  position: absolute;
  bottom: 100%;
  left: 50%;
  transform: translateX(-50%);
  font-size: calc(var(--base) * 0.55);
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  white-space: nowrap;
  padding-bottom: calc(var(--base) * 0.15);
  pointer-events: none;
}

@keyframes notification-pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.65; }
}

/* === CHANCE CARD SLOTS (bottom-right) === */
#chance-slots {
  position: absolute;
  bottom: calc(var(--base) * 1);
  right: calc(var(--base) * 1.5);
  display: flex;
  gap: calc(var(--base) * 0.8);
  z-index: 25;
}

.chance-slot {
  /* 3x the size of playing cards (cards are ~3.8 x 5.4 base units) */
  width: calc(var(--base) * 11.4);
  height: calc(var(--base) * 15);
  border-radius: calc(var(--base) * 0.8);
  border: 1.5px dashed;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  opacity: 0.5;
  transition: opacity 0.3s;
}

.chance-slot-label {
  font-size: calc(var(--base) * 1.1);
  letter-spacing: 0.15em;
  opacity: 0.6;
}

/* === CHANCE CARD (filled slot) === */
.chance-card {
  width: calc(var(--base) * 11.4);
  height: calc(var(--base) * 15);
  border-radius: calc(var(--base) * 0.8);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: calc(var(--base) * 0.6);
  padding: calc(var(--base) * 3.2) calc(var(--base) * 0.8) calc(var(--base) * 3.8);
  transition: opacity 0.3s ease, transform 0.3s ease, box-shadow 0.3s ease;
  cursor: default;
  position: relative;
  overflow: hidden;
  background-size: 115%;
  background-position: center;
  background-repeat: no-repeat;
  box-sizing: border-box;
}

/* Front face — tier image with text overlay */
.chance-card.chance-front::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border-radius: inherit;
  z-index: 0;
}

.chance-card.chance-front {
  border: 2px solid;
}

.chance-card-name {
  position: absolute;
  top: calc(var(--base) * 0.8);
  left: 0;
  width: 100%;
  font-size: calc(var(--base) * 1.05);
  font-weight: 700;
  letter-spacing: 0.05em;
  text-align: center;
  z-index: 1;
  line-height: 1.2;
}

.chance-card-desc {
  font-size: calc(var(--base) * 0.95);
  font-weight: 600;
  text-align: center;
  line-height: 1.3;
  z-index: 1;
}

.chance-card-scope {
  position: absolute;
  bottom: calc(var(--base) * 2.4);
  left: 0;
  width: 100%;
  text-align: center;
  font-size: calc(var(--base) * 0.6);
  font-weight: 700;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  z-index: 1;
}

.chance-card-tier {
  position: absolute;
  bottom: calc(var(--base) * 1);
  left: 0;
  width: 100%;
  text-align: center;
  font-size: calc(var(--base) * 0.55);
  font-weight: 700;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  z-index: 1;
}

/* Back face — raw tier image, no text overlay */
.chance-card.chance-back {
  border: 2px solid;
}

/* Tier-specific background images and border colors — provided by theme */

/* === AI SEAT CHANCE CARDS (mini backs) === */
.seat-chance-cards {
  display: flex;
  gap: calc(var(--base) * 0.3);
  justify-content: center;
  margin-top: calc(var(--base) * 0.3);
}

/* Hero seat hides seat-level chance cards (uses #chance-slots instead) */
#seat-0 .seat-chance-cards {
  display: none;
}

.chance-card-mini {
  width: calc(var(--base) * 3.8);
  height: calc(var(--base) * 5.4);
  border-radius: calc(var(--base) * 0.4);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Mini placeholder slots for opponent seats */
.chance-slot-mini {
  width: calc(var(--base) * 3.8);
  height: calc(var(--base) * 5.4);
  border-radius: calc(var(--base) * 0.4);
  border: 1.5px dashed;
  opacity: 0.4;
  display: flex;
  align-items: center;
  justify-content: center;
}

.chance-slot-mini-label {
  font-size: calc(var(--base) * 0.55);
  font-weight: 700;
  letter-spacing: 0.1em;
  opacity: 0.85;
}

.chance-card-mini.tier-common { border: 1.5px solid; }
.chance-card-mini.tier-uncommon { border: 1.5px solid; }
.chance-card-mini.tier-rare { border: 1.5px solid; }
.chance-card-mini.tier-legendary { border: 1.5px solid; }
.chance-card-mini.tier-mythic { border: 1.5px solid; }

/* Face-up (played) mini cards — artwork provided by theme */

/* Played chance card — face-up mini with highlight */
.chance-card-played {
  position: relative;
  overflow: visible;
  border: 2px solid;
  animation: glowIn 0.3s ease-out;
}

/* Dark overlay so text is readable on the tier background */
.chance-card-played::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border-radius: inherit;
  z-index: 0;
}

.chance-played-name {
  font-size: calc(var(--base) * 0.45);
  font-weight: 700;
  text-align: center;
  line-height: 1.15;
  z-index: 1;
  position: relative;
  padding: calc(var(--base) * 0.2);
}

/* Scope label on mini played cards */
.chance-played-scope {
  position: absolute;
  bottom: calc(var(--base) * 0.3);
  left: 0;
  width: 100%;
  text-align: center;
  font-size: calc(var(--base) * 0.35);
  font-weight: 700;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  z-index: 1;
}

/* ACTIVE bobbing label for played chance cards */
@keyframes activeBob {
  0%, 100% { transform: translateX(-50%) translateY(0); }
  50% { transform: translateX(-50%) translateY(-4px); }
}

.chance-active-label {
  position: absolute;
  top: calc(var(--base) * -1.4);
  left: 50%;
  transform: translateX(-50%);
  font-size: calc(var(--base) * 0.8);
  font-weight: 700;
  letter-spacing: 0.05em;
  z-index: 2;
  pointer-events: none;
  animation: activeBob 1.2s ease-in-out infinite;
  white-space: nowrap;
}

/* Smaller ACTIVE label on AI mini cards */
.chance-card-mini .chance-active-label {
  font-size: calc(var(--base) * 0.45);
  top: calc(var(--base) * -0.8);
}

/* Hero's played chance card — full-size with highlight */
.chance-card-played-front {
  opacity: 0.85;
  pointer-events: none;
  position: relative;
  overflow: visible !important;
  min-width: 0;
}

/* === POT DISPLAY — "screen" look === */
#pot-display {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, calc(var(--base) * 5));
  z-index: 10;
  text-align: center;
  opacity: 0;
  transition: opacity 0.3s ease;
  display: flex;
  align-items: center;
  gap: calc(var(--base) * 0.5);
  width: auto;
}

#pot-display.visible {
  opacity: 1;
}

#pot-main {
  width: calc(var(--base) * 10);
  border: 1px solid;
  border-radius: calc(var(--base) * 0.3);
  padding: calc(var(--base) * 0.3) calc(var(--base) * 1.2);
  text-align: center;
}

#pot-label {
  font-size: calc(var(--base) * 0.55);
  letter-spacing: 0.15em;
  text-transform: uppercase;
}

#pot-amount {
  font-size: calc(var(--base) * 1.8);
  font-weight: 900;
}

#side-pots {
  display: none;
  flex-direction: column;
  gap: calc(var(--base) * 0.2);
}

#side-pots.visible {
  display: flex;
}

.side-pot-entry {
  font-size: calc(var(--base) * 0.65);
  padding: calc(var(--base) * 0.15) calc(var(--base) * 0.6);
  border: 1px solid;
  border-radius: calc(var(--base) * 0.2);
  text-align: center;
  opacity: 0.85;
}

.side-pot-label {
  font-size: calc(var(--base) * 0.45);
  text-transform: uppercase;
  letter-spacing: 0.1em;
}

.side-pot-amount {
  font-weight: 700;
  font-size: calc(var(--base) * 0.75);
}

/* === BURN CARD DISPLAY (card face + label, left of community — mirrors chance deck) === */
#burn-card-display {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(calc(var(--base) * -17.5), calc(var(--base) * 6));
  z-index: 10;
  display: flex;
  align-items: center;
  gap: calc(var(--base) * 0.6);
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.3s ease;
}

#burn-card-display.visible {
  opacity: 1;
}

#burn-card-info {
  text-align: center;
}

#burn-card-label {
  font-size: calc(var(--base) * 0.5);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  display: flex;
  flex-direction: column;
  align-items: center;
  line-height: 1.3;
}

#burn-card-face {
  position: relative;
  width: calc(var(--base) * 3.8);
  height: calc(var(--base) * 5.3);
  border-radius: calc(var(--base) * 0.3);
  perspective: 600px;
}

#burn-card-back,
#burn-card-front {
  position: absolute;
  inset: 0;
  border-radius: calc(var(--base) * 0.3);
  backface-visibility: hidden;
  transition: transform 0.5s ease;
}

#burn-card-back {
  overflow: hidden;
  border: 1.5px solid;
  transform: rotateY(0deg);
}

#burn-card-back img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: inherit;
}

#burn-card-front {
  border: 1.5px solid;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: calc(var(--base) * 0.1);
  transform: rotateY(180deg);
}

#burn-card-face.face-up #burn-card-back {
  transform: rotateY(-180deg);
}

#burn-card-face.face-up #burn-card-front {
  transform: rotateY(0deg);
}

#burn-card-rank {
  font-family: 'Crimson Pro', Georgia, serif;
  font-size: calc(var(--base) * 1.2);
  font-weight: 900;
  line-height: 1;
}

#burn-card-suit {
  font-size: calc(var(--base) * 1.4);
  line-height: 1;
}

/* Burn card suit colors — provided by theme */

/* === CHANCE DECK DISPLAY (3D stacked card back + count, right of pot) === */
#chance-deck-display {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(calc(var(--base) * 11), calc(var(--base) * 6));
  z-index: 10;
  display: flex;
  align-items: center;
  gap: calc(var(--base) * 0.6);
  pointer-events: none;
}

/* 3D stack container — perspective for depth */
#chance-deck-stack {
  position: relative;
  width: calc(var(--base) * 3.4);
  height: calc(var(--base) * 4.8);
  perspective: 300px;
}

/* Shared style for all stack layers */
.chance-deck-layer,
#chance-deck-card-back {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border-radius: calc(var(--base) * 0.3);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

/* Bottom layers — offset to simulate depth */
.chance-deck-layer-3 {
  transform: translate(3px, 3px);
  border: 1px solid;
}

.chance-deck-layer-2 {
  transform: translate(2px, 2px);
  border: 1px solid;
}

.chance-deck-layer-1 {
  transform: translate(1px, 1px);
  border: 1px solid;
}

/* Top card — shows the actual tier back image */
#chance-deck-card-back {
  border: 1.5px solid;
  transition: background-image 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease;
  z-index: 1;
}

#chance-deck-info {
  text-align: center;
}

#chance-deck-label {
  font-size: calc(var(--base) * 0.5);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  display: flex;
  flex-direction: column;
  align-items: center;
  line-height: 1.3;
}

#chance-deck-count {
  font-size: calc(var(--base) * 1.1);
  font-weight: 900;
}

/* === PHASE LABEL (standalone, below pot) === */
#phase-label {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, calc(var(--base) * 9.5));
  z-index: 10;
  font-size: calc(var(--base) * 0.75);
  font-weight: 700;
  letter-spacing: 0.2em;
  text-indent: 0.2em;
  text-align: center;
  white-space: nowrap;
  transition: color 0.3s ease, text-shadow 0.3s ease;
}

/* === PLAYER SEATS === */
.seat {
  position: absolute;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: calc(var(--base) * 0.3);
  z-index: 15;
  transition: all 0.3s ease;
}

.seat.empty {
  opacity: 0;
  pointer-events: none;
}

/* Seat positions (percentage-based for responsiveness) */
#seat-0 { bottom: -3%; left: 50%; transform: translateX(-50%); }
#seat-1 { bottom: 8%; left: 2%; }
#seat-2 { top: 2%; left: 3%; }
#seat-3 { top: -6%; left: 50%; transform: translateX(-50%); }
#seat-4 { top: 2%; right: 3%; }
#seat-5 { bottom: 8%; right: 2%; }

/* === Speech bubble (quips) === */
.quip-bubble {
  position: absolute;
  z-index: 50;
  max-width: calc(var(--base) * 14);
  padding: calc(var(--base) * 0.4) calc(var(--base) * 0.7);
  font-family: var(--font-body, 'Rajdhani', sans-serif);
  font-size: calc(var(--base) * 0.85);
  font-weight: 700;
  letter-spacing: 0.02em;
  color: #1a1a2e;
  background: #f0f0f0;
  border: none;
  border-radius: calc(var(--base) * 0.5);
  box-shadow: 0 4px 16px rgba(0,0,0,0.4);
  white-space: nowrap;
  text-align: center;
  pointer-events: none;
  animation: quipBubbleIn 0.25s ease-out;
}

.quip-bubble.quip-bubble--out {
  animation: quipBubbleOut 0.3s ease-in forwards;
}

/* Tail — small triangle pointing toward the player */
.quip-bubble::after {
  content: '';
  position: absolute;
  width: calc(var(--base) * 0.6);
  height: calc(var(--base) * 0.6);
  background: #f0f0f0;
  border: none;
}

/* Bottom seats (0,1,5): bubble above, tail points down */
#seat-0 .quip-bubble,
#seat-1 .quip-bubble,
#seat-5 .quip-bubble {
  bottom: 100%;
  left: 50%;
  transform: translateX(-50%);
  margin-bottom: calc(var(--base) * 0.6);
}
#seat-0 .quip-bubble::after,
#seat-1 .quip-bubble::after,
#seat-5 .quip-bubble::after {
  bottom: calc(var(--base) * -0.35);
  left: 50%;
  transform: translateX(-50%) rotate(45deg);
}

/* Top seats (2,3,4): bubble below, tail points up */
#seat-2 .quip-bubble,
#seat-3 .quip-bubble,
#seat-4 .quip-bubble {
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  margin-top: calc(var(--base) * 0.6);
}
#seat-2 .quip-bubble::after,
#seat-3 .quip-bubble::after,
#seat-4 .quip-bubble::after {
  top: calc(var(--base) * -0.35);
  left: 50%;
  transform: translateX(-50%) rotate(-135deg);
}

@keyframes quipBubbleIn {
  0% { opacity: 0; transform: translateX(-50%) scale(0.8); }
  100% { opacity: 1; transform: translateX(-50%) scale(1); }
}

@keyframes quipBubbleOut {
  0% { opacity: 1; transform: translateX(-50%) scale(1); }
  100% { opacity: 0; transform: translateX(-50%) scale(0.8); }
}

/* Player card (the info panel — mini nameplate) */
.player-info {
  position: relative;
  display: flex;
  flex-direction: row;
  align-items: stretch;
  border-radius: calc(var(--base) * 0.75);
  width: calc(var(--base) * 13);
  overflow: hidden;
  border: 1px solid;
  transition: all 0.3s ease;
  background: linear-gradient(135deg, #1a1a1a 0%, #2a2a2a 100%);
}

.banner-bg {
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  background-size: cover;
  background-position: center;
  z-index: 0;
}

.player-info-scrim {
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  background: rgba(0, 0, 0, 0.55);
  z-index: 1;
}

.player-avatar {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: calc(var(--base) * 4);
  min-width: calc(var(--base) * 4);
  padding: calc(var(--base) * 0.4);
}

.player-avatar img {
  width: calc(var(--base) * 3.2);
  height: calc(var(--base) * 3.2);
  border-radius: calc(var(--base) * 0.5);
  border: 2px solid #555;
  object-fit: cover;
}

.player-avatar img[src=""],
.player-avatar img:not([src]) {
  display: none;
}

.player-prestige-stars {
  display: flex;
  gap: 1px;
  justify-content: center;
  margin-top: 2px;
  font-size: 10px;
}

.player-text {
  position: relative;
  z-index: 2;
  flex: 1;
  display: flex;
  flex-wrap: wrap;
  align-content: center;
  align-items: baseline;
  padding: calc(var(--base) * 0.25) calc(var(--base) * 0.6) calc(var(--base) * 0.25) 0;
  min-width: 0;
  overflow: hidden;
}

.seat.folded .player-info {
  opacity: 0.35;
}

.seat.folded::before {
  content: 'FOLDED';
  font-size: calc(var(--base) * 0.65);
  font-weight: 700;
  letter-spacing: 0.12em;
}

.player-name {
  width: 100%;
  font-size: calc(var(--base) * 0.85);
  font-weight: 700;
  letter-spacing: 0.05em;
  line-height: 1.15;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  text-shadow: 0 1px 3px rgba(0,0,0,0.7);
}

.player-title {
  width: 100%;
  font-family: 'Crimson Pro', serif;
  font-style: italic;
  font-size: calc(var(--base) * 0.72);
  line-height: 1.1;
  margin-top: calc(var(--base) * -0.05);
  opacity: 0.85;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  text-shadow: 0 1px 2px rgba(0,0,0,0.5);
}

.player-title:empty {
  display: none;
}

.player-level-badge {
  display: inline;
  font-size: calc(var(--base) * 0.65);
  line-height: 1;
  font-weight: 700;
  color: #ffd740;
  text-shadow: 0 1px 2px rgba(0,0,0,0.7);
  font-family: 'Teko', sans-serif;
  letter-spacing: 0.5px;
  margin-right: calc(var(--base) * 0.35);
  margin-top: calc(var(--base) * 0.1);
}

.player-chips {
  display: inline;
  font-size: calc(var(--base) * 0.8);
  line-height: 1;
  font-weight: 600;
  text-shadow: 0 1px 2px rgba(0,0,0,0.5);
  margin-top: calc(var(--base) * 0.1);
}

.player-chips::before {
  content: '\25C6 ';
  font-size: 0.7em;
}

/* === LIVE HAND DISPLAY === */
.live-hand {
  display: none;
}

#seat-0 .live-hand {
  display: flex;
  flex-direction: column;
  align-items: center;
  position: absolute;
  bottom: calc(var(--base) * -2.8);
  left: 50%;
  transform: translateX(-50%);
  pointer-events: auto;
  cursor: pointer;
  z-index: 5;
  white-space: nowrap;
}

.live-hand-tooltip {
  position: absolute;
  bottom: 100%;
  left: 50%;
  transform: translateX(-50%);
  margin-bottom: calc(var(--base) * 0.3);
  border: 1px solid;
  border-radius: calc(var(--base) * 0.25);
  padding: calc(var(--base) * 0.3) calc(var(--base) * 0.6);
  font-size: calc(var(--base) * 0.55);
  white-space: nowrap;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.2s ease;
}

.live-hand-tooltip.visible {
  opacity: 1;
}

.live-hand:empty {
  display: none;
}

.live-hand-label {
  font-size: calc(var(--base) * 0.5);
  font-weight: 400;
  letter-spacing: 0.15em;
  line-height: 1;
}

.live-hand-name {
  font-size: calc(var(--base) * 0.75);
  font-weight: 700;
  letter-spacing: 0.05em;
  white-space: nowrap;
  line-height: 1.1;
}

/* Color by hand rank — provided by theme */

.player-badge {
  position: absolute;
  left: calc(100% + var(--base) * 0.6);
  top: calc(var(--base) * 1.5);
  transform: scale(0);
  width: calc(var(--base) * 2.2);
  height: calc(var(--base) * 2.2);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: 'Segoe UI', system-ui, -apple-system, sans-serif;
  font-size: calc(var(--base) * 0.62);
  font-weight: 800;
  letter-spacing: 0.02em;
  text-shadow: 0 1px 2px rgba(0,0,0,0.3);
  border: calc(var(--base) * 0.15) solid;
  box-shadow: 0 2px 8px rgba(0,0,0,0.5), inset 0 1px 1px rgba(255,255,255,0.15);
  z-index: 5;
  transition: transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.player-badge:empty {
  display: none;
}

.player-badge:not(:empty) {
  transform: scale(1);
}

/* Dealer chip — white with black text */
.player-badge[data-badge="dealer"] {
  background: radial-gradient(circle at 35% 35%, #ffffff 0%, #d0d0d0 100%);
  color: #111;
  border-color: #888;
  text-shadow: none;
}

/* Small Blind chip — blue tones */
.player-badge[data-badge="sb"] {
  background: radial-gradient(circle at 35% 35%, #5b9bd5 0%, #2a5f9e 100%);
  color: #fff;
  border-color: #3a7bc8;
}

/* Big Blind chip — deep red/gold */
.player-badge[data-badge="bb"] {
  background: radial-gradient(circle at 35% 35%, #e8c44a 0%, #c0392b 100%);
  color: #fff;
  border-color: #d4a940;
}

/* Heads-up: Dealer + Small Blind combined — pill shape */
.player-badge[data-badge="dealer-sb"] {
  width: auto;
  min-width: calc(var(--base) * 2.2);
  padding: 0 calc(var(--base) * 0.4);
  border-radius: calc(var(--base) * 1.1);
  background: radial-gradient(circle at 35% 35%, #ffffff 0%, #d0d0d0 100%);
  color: #111;
  border-color: #888;
  font-size: calc(var(--base) * 0.5);
  text-shadow: none;
}

.player-bet {
  font-size: calc(var(--base) * 1.6);
  font-weight: 700;
  opacity: 0;
  transition: opacity 0.2s ease;
}

.player-bet.visible {
  opacity: 1;
}

.player-bet::before {
  content: 'BET ';
  font-size: 0.7em;
}

/* Wild card label — shown under hole cards (AI) or under info panel (hero) */
.wild-card-label {
  display: none;
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  font-size: calc(var(--base) * 0.6);
  font-weight: 700;
  letter-spacing: 0.1em;
  text-align: center;
  white-space: nowrap;
  padding: calc(var(--base) * 0.1) calc(var(--base) * 0.4);
  animation: wildLabelPulse 2s ease-in-out infinite alternate;
  pointer-events: none;
  z-index: 5;
}
.wild-card-label.visible {
  display: block;
}
@keyframes wildLabelPulse {
  from { opacity: 0.8; }
  to   { opacity: 1; }
}

#seat-0 .wild-card-label {
  bottom: calc(var(--base) * -1.2);
  z-index: 4;
}

/* Player hole cards */
.player-cards {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  gap: calc(var(--base) * 0.3);
  justify-content: center;
}

/* === CARDS === */
.card {
  width: calc(var(--base) * 3.8);
  height: calc(var(--base) * 5.4);
  border-radius: calc(var(--base) * 0.4);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: calc(var(--base) * 0.1);
  font-weight: 700;
  position: relative;
  transition: transform 0.2s ease;
}

.hole-card {
  border: 1.5px solid;
}

.community-card {
  border: 1.5px solid;
  width: calc(var(--base) * 4.5);
  height: calc(var(--base) * 6.2);
}

/* Suit color classes — provided by theme */

.card-rank {
  font-family: 'Crimson Pro', Georgia, serif;
  font-size: calc(var(--base) * 1.6);
  line-height: 1;
}

.community-card .card-rank {
  font-size: calc(var(--base) * 2);
}

.card-suit {
  font-size: calc(var(--base) * 1.2);
  line-height: 1;
}

.community-card .card-suit {
  font-size: calc(var(--base) * 1.5);
}

/* NEW card-back — PlayingCardBack.jpeg image */
.card-back {
  border: 1.5px solid;
  overflow: hidden;
}

.card-back-design {
  /* Image covers the card — no inner design needed */
  display: none;
}

.card-back-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: inherit;
}

/* === 3D PLAYING CARD FLIP ANIMATION === */
#playing-card-3d-overlay {
  position: fixed;
  inset: 0;
  z-index: 50;
  display: none;
  pointer-events: none;
}
#playing-card-3d-overlay.visible {
  display: block;
}

.pc3d-card {
  position: fixed;
  perspective: 800px;
  pointer-events: none;
  will-change: transform, opacity;
}

.pc3d-inner {
  width: 100%;
  height: 100%;
  position: relative;
  transform-style: preserve-3d;
}

.pc3d-face {
  position: absolute;
  width: 100%;
  height: 100%;
  backface-visibility: hidden;
  border-radius: calc(var(--base) * 0.4);
  overflow: hidden;
}

.pc3d-front {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: calc(var(--base) * 0.1);
  border: 1.5px solid;
  font-weight: 700;
}

.pc3d-rank {
  font-family: 'Crimson Pro', Georgia, serif;
  font-size: calc(var(--base) * 1.6);
  line-height: 1;
}

.pc3d-suit {
  font-size: calc(var(--base) * 1.2);
  line-height: 1;
}

.pc3d-back {
  transform: rotateY(180deg);
  background-size: cover;
  background-position: center;
  border: 1.5px solid;
}

/* Swap animation card back (not flipped, just flying) */
.pc3d-swap-back {
  background-size: cover;
  background-position: center;
  border: 1.5px solid;
  border-radius: calc(var(--base) * 0.4);
}

.card-slot.empty-slot {
  width: calc(var(--base) * 4.5);
  height: calc(var(--base) * 6.2);
  border-radius: calc(var(--base) * 0.4);
  border: 1px dashed;
}

/* === ACTION BUTTONS (centered bottom) === */
#action-panel {
  position: absolute;
  bottom: calc(var(--base) * 2);
  left: 50%;
  transform: translateX(-50%);
  z-index: 40;
  display: none; /* Hidden by default */
  flex-direction: column;
  align-items: center;
  gap: calc(var(--base) * 0.5);
  background: rgba(0, 0, 0, 0.75);
  padding: calc(var(--base) * 1) calc(var(--base) * 1.5);
  border-radius: calc(var(--base) * 1);
  border: 1px solid rgba(255, 255, 255, 0.15);
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.5);
}

#action-panel.visible {
  display: flex; /* Show when it's player's turn */
}

#action-buttons {
  display: flex;
  gap: calc(var(--base) * 0.6);
}

/* -- "YOUR TURN" indicator -- */
#your-turn-indicator {
  font-size: calc(var(--base) * 1.1);
  font-weight: 700;
  letter-spacing: 0.15em;
  padding: calc(var(--base) * 0.3) calc(var(--base) * 1);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease, font-size 0.4s ease;
  text-align: center;
  line-height: 1.3;
}

#your-turn-indicator .chance-subtitle {
  display: block;
  font-size: calc(var(--base) * 0.6);
  letter-spacing: 0.12em;
  margin-top: calc(var(--base) * 0.1);
}

/* Turn countdown in the main YOUR TURN overlay */
#your-turn-indicator .turn-countdown {
  display: inline;
  margin-right: calc(var(--base) * 0.4);
  font-variant-numeric: tabular-nums;
  color: var(--gold, #c9a84c);
}
#your-turn-indicator .turn-countdown.urgent {
  color: #ff4444;
}

#your-turn-indicator.visible {
  opacity: 1;
  animation: your-turn-pulse 2s ease-in-out infinite;
}

#your-turn-indicator.escalated {
  font-size: calc(var(--base) * 1.5);
}

#your-turn-indicator.escalated .chance-subtitle {
  font-size: calc(var(--base) * 0.75);
}

#your-turn-indicator.shake {
  animation: your-turn-shake 0.4s ease-in-out, your-turn-pulse 2s ease-in-out infinite;
}

@keyframes your-turn-pulse {
  0%, 100% { opacity: 0.85; }
  50% { opacity: 1; }
}

@keyframes your-turn-shake {
  0%, 100% { transform: translateX(0); }
  15% { transform: translateX(-6px); }
  30% { transform: translateX(5px); }
  45% { transform: translateX(-4px); }
  60% { transform: translateX(3px); }
  75% { transform: translateX(-2px); }
  90% { transform: translateX(1px); }
}

/* -- Timeout overlay (stage 3 — floating over community cards) -- */
#timeout-overlay {
  position: absolute;
  bottom: 58%;
  left: 50%;
  transform: translateX(-50%);
  z-index: 50;
  display: none;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  pointer-events: none;
  border: 1px solid;
  border-radius: calc(var(--base) * 0.8);
  padding: calc(var(--base) * 1.2) calc(var(--base) * 2.5);
}

#timeout-overlay.visible {
  display: flex;
}

/* When dismissed, strip the panel box and hide everything except the countdown */
#timeout-overlay.dismissed {
  background: none;
  border: none;
  box-shadow: none;
  backdrop-filter: none;
  padding: 0;
  pointer-events: none;
}

#timeout-overlay.dismissed #timeout-label,
#timeout-overlay.dismissed #timeout-sublabel,
#timeout-overlay.dismissed #timeout-actions,
#timeout-overlay.dismissed #timeout-hint,
#timeout-overlay.dismissed #timeout-dismiss {
  display: none;
}

#timeout-label {
  font-size: calc(var(--base) * 1.2);
  font-weight: 900;
  letter-spacing: 0.2em;
}

#timeout-sublabel {
  font-size: calc(var(--base) * 0.55);
  font-weight: 700;
  letter-spacing: 0.12em;
  margin-bottom: calc(var(--base) * 0.3);
}

#timeout-sublabel:empty {
  display: none;
}

#timeout-countdown {
  font-size: calc(var(--base) * 5);
  font-weight: 900;
  line-height: 1;
  animation: timeout-pulse 1s ease-in-out infinite;
}

#timeout-hint {
  font-size: calc(var(--base) * 0.6);
  font-weight: 700;
  letter-spacing: 0.12em;
  margin-top: calc(var(--base) * 0.5);
  text-align: center;
  max-width: calc(var(--base) * 24);
}

#timeout-dismiss {
  margin-top: calc(var(--base) * 0.6);
  border: 1px solid;
  border-radius: calc(var(--base) * 0.3);
  font-size: calc(var(--base) * 0.55);
  font-weight: 700;
  letter-spacing: 0.15em;
  cursor: pointer;
  padding: calc(var(--base) * 0.25) calc(var(--base) * 1);
  transition: all 0.15s ease;
  pointer-events: auto;
}

@keyframes timeout-pulse {
  0%, 100% { opacity: 0.85; }
  50% { opacity: 1; }
}

/* YOUR TURN indicator in timeout mode */
#your-turn-indicator.timeout {
  font-size: calc(var(--base) * 1.5);
}

/* Timeout overlay action buttons */
#timeout-actions {
  display: flex;
  gap: calc(var(--base) * 0.5);
  justify-content: center;
  flex-wrap: wrap;
  margin-top: calc(var(--base) * 0.3);
  pointer-events: auto;
}

#timeout-actions:empty {
  display: none;
}

#timeout-actions .action-btn {
  font-size: calc(var(--base) * 0.7);
  padding: calc(var(--base) * 0.35) calc(var(--base) * 0.9);
}

.action-btn {
  font-family: system-ui, -apple-system, sans-serif;
  font-size: calc(var(--base) * 0.85);
  font-weight: 800;
  letter-spacing: 0.1em;
  padding: calc(var(--base) * 0.6) calc(var(--base) * 1.2);
  border: none;
  border-radius: calc(var(--base) * 0.4);
  cursor: pointer;
  text-transform: uppercase;
  min-width: calc(var(--base) * 6);
  text-align: center;
  color: #fff;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.2),
    inset 0 -2px 0 rgba(0, 0, 0, 0.25),
    0 2px 6px rgba(0, 0, 0, 0.4);
  -webkit-tap-highlight-color: transparent;
  user-select: none;
}


/* Action button color variants */
.action-check {
  background: linear-gradient(180deg, #1fa843 0%, #0e6e28 100%);
  border-bottom: 2px solid #074d1a;
}
.action-bet, .action-raise {
  background: linear-gradient(180deg, #d4a822 0%, #8a6e12 100%);
  border-bottom: 2px solid #5c4a0a;
}

.action-call {
  background: linear-gradient(180deg, #1aad3e 0%, #0c7a2a 100%);
  border-bottom: 2px solid #065a1c;
}

.action-fold {
  background: linear-gradient(180deg, #d42a2a 0%, #8b1a1a 100%);
  border-bottom: 2px solid #5c0e0e;
}

.action-skip {
  background: linear-gradient(180deg, #555 0%, #333 100%);
  border-bottom: 2px solid #222;
}

.action-chance {
  background: linear-gradient(180deg, #0abfd4 0%, #077a8a 100%);
  border-bottom: 2px solid #045560;
}

/* No visual change on any interaction state — static buttons */
.action-btn:hover,
.action-btn:active,
.action-btn:focus,
.action-btn:focus-visible {
  filter: none !important;
  transform: none !important;
  opacity: 1 !important;
  outline: none !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.2),
    inset 0 -2px 0 rgba(0, 0, 0, 0.25),
    0 2px 6px rgba(0, 0, 0, 0.4) !important;
  -webkit-tap-highlight-color: transparent;
}

.action-btn-disabled {
  opacity: 0.3;
  cursor: not-allowed;
  pointer-events: none;
}

/* === NO-LIMIT BET LAYOUT (buttons left, slider right) === */
#action-buttons.nl-layout {
  flex-direction: row;
  align-items: center;
  gap: calc(var(--base) * 0.8);
}

.nl-btn-group {
  display: flex;
  flex-direction: row;
  gap: calc(var(--base) * 0.35);
  flex-shrink: 0;
  margin-right: 8px;
}

.nl-btn {
  font-size: calc(var(--base) * 0.7) !important;
  padding: calc(var(--base) * 0.45) calc(var(--base) * 0.9) !important;
  min-width: calc(var(--base) * 5) !important;
  min-height: calc(var(--base) * 2.2);
  display: flex;
  align-items: center;
  justify-content: center;
  white-space: nowrap;
}

.nl-slider-group {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: calc(var(--base) * 0.3);
  flex: 1;
  min-width: calc(var(--base) * 12);
}

/* === NO-LIMIT BET SLIDER === */
.nl-slider-row {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: calc(var(--base) * 0.4);
  width: 100%;
}

.nl-slider-value {
  font-family: var(--font-ui, 'Exo 2', sans-serif);
  font-size: calc(var(--base) * 1.2);
  font-weight: 800;
  color: #ffcc00;
  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.6);
  text-align: center;
}

/* === CUSTOM BET SLIDER === */
.nl-slider-container {
  position: relative;
  width: 100%;
  height: calc(var(--base) * 3);
  touch-action: none;
  -webkit-tap-highlight-color: transparent;
  user-select: none;
  cursor: pointer;
}

.nl-slider-track {
  position: absolute;
  left: 0;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  height: calc(var(--base) * 1.2);
  background: linear-gradient(180deg, #333, #222);
  border-radius: calc(var(--base) * 0.4);
  overflow: hidden;
}

.nl-slider-fill {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 0%;
  background: linear-gradient(180deg, #ffcc00, #cc9900);
  border-radius: calc(var(--base) * 0.4);
}

.nl-slider-thumb {
  position: absolute;
  top: 50%;
  left: 0%;
  width: calc(var(--base) * 2.4);
  height: calc(var(--base) * 2.4);
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background: linear-gradient(180deg, #ffcc00, #cc9900);
  border: 2px solid #997300;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.4);
  z-index: 2;
}

.nl-slider-thumb.dragging {
  box-shadow: 0 2px 10px rgba(255, 204, 0, 0.6);
  transform: translate(-50%, -50%) scale(1.15);
}

.nl-slider-particles {
  position: absolute;
  left: 0;
  pointer-events: none;
  z-index: 1;
}

/* Cyberpunk slider */
[data-theme="cyberpunk"] .nl-slider-track {
  background: linear-gradient(180deg, #1a1a2e, #0d1117);
  border: 1px solid rgba(0, 240, 255, 0.2);
}
[data-theme="cyberpunk"] .nl-slider-fill {
  background: linear-gradient(90deg, #00f0ff, #b829dd);
}
[data-theme="cyberpunk"] .nl-slider-thumb {
  background: linear-gradient(180deg, #00f0ff, #0088aa);
  border-color: #00f0ff;
  box-shadow: 0 0 10px rgba(0, 240, 255, 0.4);
}
[data-theme="cyberpunk"] .nl-slider-thumb.dragging {
  box-shadow: 0 0 16px rgba(0, 240, 255, 0.7);
}
@keyframes cyberpunk-track-pulse {
  0%   { background: linear-gradient(180deg, #003844, #001a22); border-color: rgba(0, 240, 255, 0.5); box-shadow: inset 0 0 8px rgba(0, 240, 255, 0.3); }
  25%  { background: linear-gradient(180deg, #3a0a22, #1e0512); border-color: rgba(255, 45, 123, 0.5); box-shadow: inset 0 0 8px rgba(255, 45, 123, 0.3); }
  50%  { background: linear-gradient(180deg, #2a0a3a, #15051e); border-color: rgba(184, 41, 221, 0.5); box-shadow: inset 0 0 8px rgba(184, 41, 221, 0.3); }
  75%  { background: linear-gradient(180deg, #2a2a05, #1a1a02); border-color: rgba(240, 255, 0, 0.5); box-shadow: inset 0 0 8px rgba(240, 255, 0, 0.3); }
  100% { background: linear-gradient(180deg, #003844, #001a22); border-color: rgba(0, 240, 255, 0.5); box-shadow: inset 0 0 8px rgba(0, 240, 255, 0.3); }
}
[data-theme="cyberpunk"] .nl-slider--active .nl-slider-track {
  animation: cyberpunk-track-pulse 1.5s ease infinite;
}

/* Warlord slider */
[data-theme="warlord"] .nl-slider-track {
  background: linear-gradient(180deg, #2a1a0a, #1a0a04);
  border: 1px solid rgba(201, 168, 76, 0.2);
}
[data-theme="warlord"] .nl-slider-fill {
  background: linear-gradient(90deg, #e8842a, #c9a84c);
}
[data-theme="warlord"] .nl-slider-thumb {
  background: linear-gradient(180deg, #e8842a, #c9a84c);
  border-color: #c9a84c;
}
[data-theme="warlord"] .nl-slider-thumb.dragging {
  box-shadow: 0 2px 12px rgba(232, 132, 42, 0.6);
}

/* Tropical Rainforest slider */
[data-theme="tropicalrainforest"] .nl-slider-track {
  background: linear-gradient(180deg, #1e4a32, #082818);
  border: 1px solid rgba(124, 181, 24, 0.2);
}
[data-theme="tropicalrainforest"] .nl-slider-fill {
  background: linear-gradient(90deg, #7cb518, #4caf50);
}
[data-theme="tropicalrainforest"] .nl-slider-thumb {
  background: linear-gradient(180deg, #7cb518, #4caf50);
  border-color: #7cb518;
}
[data-theme="tropicalrainforest"] .nl-slider-thumb.dragging {
  box-shadow: 0 2px 10px rgba(124, 181, 24, 0.5);
}

.nl-quick-buttons {
  display: flex;
  gap: calc(var(--base) * 0.4);
  justify-content: center;
  flex-wrap: wrap;
}

.nl-quick-btn {
  font-family: var(--font-ui, 'Exo 2', sans-serif);
  font-size: calc(var(--base) * 0.7);
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  padding: calc(var(--base) * 0.3) calc(var(--base) * 0.6);
  background: linear-gradient(180deg, #444, #2a2a2a);
  border: 1px solid #555;
  border-radius: calc(var(--base) * 0.3);
  color: #ccc;
  cursor: pointer;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
}

/* No hover/active visual change — match action-btn pattern */
.nl-quick-btn:hover,
.nl-quick-btn:active,
.nl-quick-btn:focus {
  filter: none !important;
  transform: none !important;
  outline: none !important;
  -webkit-tap-highlight-color: transparent;
}

/* Larger buttons for chance window */
.chance-window-btn {
  font-size: calc(var(--base) * 1.1);
  padding: calc(var(--base) * 0.8) calc(var(--base) * 1.8);
  min-width: calc(var(--base) * 8);
}

/* Auto-skip countdown label */
.auto-skip-label {
  color: #ffcc00;
  font-size: calc(var(--base) * 0.9);
  font-weight: 600;
  text-align: center;
  padding: calc(var(--base) * 0.4) calc(var(--base) * 0.8);
  white-space: nowrap;
}

/* === MESSAGE OVERLAY === */
#message-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 100;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.4s ease;
}

#message-overlay.visible {
  opacity: 1;
  pointer-events: auto;
}

#message-text {
  font-size: calc(var(--base) * 2.2);
  font-weight: 900;
  text-align: center;
  padding: calc(var(--base) * 1.5) calc(var(--base) * 3);
  border: 1px solid;
  border-radius: calc(var(--base) * 0.6);
}

/* === PLACEMENT / RESULTS OVERLAY === */
#placement-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 100;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.4s ease;
}

#placement-overlay.visible {
  opacity: 1;
  pointer-events: auto;
}

.placement-panel {
  position: relative;
  border: 1.5px solid;
  border-radius: calc(var(--base) * 0.8);
  padding: calc(var(--base) * 1.5) calc(var(--base) * 2);
  min-width: calc(var(--base) * 30);
  max-width: calc(var(--base) * 45);
  max-height: 80%;
  overflow-y: auto;
}

.placement-title {
  font-size: calc(var(--base) * 1.6);
  font-weight: 900;
  text-align: center;
  letter-spacing: 0.2em;
  margin-bottom: calc(var(--base) * 1.2);
}

.placement-list {
  display: flex;
  flex-direction: column;
  gap: calc(var(--base) * 0.4);
}

.placement-entry {
  border-radius: calc(var(--base) * 0.3);
  border: 1px solid transparent;
  transition: all 0.2s ease;
}

.placement-entry.placement-folded {
  opacity: 0.4;
}

.placement-row {
  display: grid;
  grid-template-columns:
    calc(var(--base) * 3.5)
    1fr
    calc(var(--base) * 10)
    calc(var(--base) * 5)
    calc(var(--base) * 6);
  align-items: center;
  padding: calc(var(--base) * 0.5) calc(var(--base) * 0.8);
}

.placement-mod-row {
  font-size: calc(var(--base) * 0.6);
  font-weight: 600;
  padding: 0 calc(var(--base) * 0.8) calc(var(--base) * 0.3);
  letter-spacing: 0.02em;
}

.placement-mod-row.placement-mod--helped { color: #4cff91; }
.placement-mod-row.placement-mod--hurt { color: #ff6b6b; }
.placement-mod-row.placement-mod--blocked { color: #7eb8ff; }

.placement-place {
  font-size: calc(var(--base) * 1);
  font-weight: 900;
}

.placement-name {
  font-size: calc(var(--base) * 0.9);
  font-weight: 700;
  letter-spacing: 0.05em;
}

.placement-hand {
  font-size: calc(var(--base) * 0.95);
  font-weight: 600;
  text-align: center;
}

.placement-folded .placement-hand {
  font-style: italic;
}

.placement-amount {
  font-size: calc(var(--base) * 0.9);
  font-weight: 700;
  text-align: right;
}

.placement-draws {
  font-size: calc(var(--base) * 0.8);
  font-weight: 600;
  text-align: right;
}

/* --- Chaos Card Modifier Tags (placement + hand history) --- */
.placement-modifiers,
.hh-modifiers {
  display: flex;
  flex-wrap: wrap;
  gap: calc(var(--base) * 0.2) calc(var(--base) * 0.4);
  margin-top: calc(var(--base) * 0.15);
}

.placement-mod {
  font-size: calc(var(--base) * 0.65);
  font-weight: 600;
  letter-spacing: 0.03em;
  padding: calc(var(--base) * 0.05) calc(var(--base) * 0.3);
  border-radius: calc(var(--base) * 0.15);
}

.placement-mod--helped {
  color: #4cff91;
}

.placement-mod--hurt {
  color: #ff6b6b;
}

.placement-mod--blocked {
  color: #7eb8ff;
}

.placement-buttons {
  display: flex;
  gap: calc(var(--base) * 1);
  justify-content: center;
  margin-top: calc(var(--base) * 1.2);
  padding-bottom: calc(var(--base) * 2.5); /* reserve space for absolutely-positioned quit btn */
}

#placement-close-btn {
  font-size: calc(var(--base) * 0.75);
  font-weight: 700;
  letter-spacing: 0.1em;
  padding: calc(var(--base) * 0.5) calc(var(--base) * 2);
  border: 1.5px solid;
  border-radius: calc(var(--base) * 0.4);
  cursor: pointer;
  transition: all 0.2s ease;
  text-transform: uppercase;
}

#placement-deal-btn {
  font-size: calc(var(--base) * 0.75);
  font-weight: 700;
  letter-spacing: 0.1em;
  padding: calc(var(--base) * 0.5) calc(var(--base) * 2);
  border: 1.5px solid;
  border-radius: calc(var(--base) * 0.4);
  cursor: pointer;
  transition: all 0.2s ease;
  text-transform: uppercase;
}

#placement-quit-btn {
  position: absolute;
  bottom: calc(var(--base) * 0.8);
  left: calc(var(--base) * 1.2);
  font-size: calc(var(--base) * 0.55);
  font-weight: 600;
  letter-spacing: 0.08em;
  padding: calc(var(--base) * 0.3) calc(var(--base) * 1);
  border: 1px solid;
  border-radius: calc(var(--base) * 0.4);
  cursor: pointer;
  transition: all 0.2s ease;
  text-transform: uppercase;
  opacity: 0.6;
}
#placement-quit-btn:hover {
  opacity: 1;
}

/* === TITLE BLOCK === */
#game-title-block {
  position: absolute;
  top: calc(var(--base) * 0.5);
  left: calc(var(--base) * 1.5);
  z-index: 20;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

#game-title {
  font-family: var(--font-display);
  font-weight: 900;
  font-size: calc(var(--base) * 1.3);
  letter-spacing: 0.15em;
  text-transform: uppercase;
  /* color, gradient — provided by theme */
}

#game-title-rule {
  width: 100%;
  height: 2px;
  margin: calc(var(--base) * 0.3) 0 calc(var(--base) * 0.15);
  border-radius: 1px;
  /* background — provided by theme */
}

#game-title-subtitle {
  font-size: calc(var(--base) * 0.55);
  font-weight: 400;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  align-self: center;
  /* color — provided by theme */
}

/* === HAND INFO === */
#hand-info {
  position: absolute;
  top: calc(var(--base) * 0.5);
  right: calc(var(--base) * 1.5);
  z-index: 20;
  font-size: calc(var(--base) * 0.7);
  letter-spacing: 0.1em;
}

/* === POST-HAND ACTION PANEL === */
#post-hand-panel {
  position: absolute;
  bottom: calc(var(--base) * 1.5);
  left: 50%;
  transform: translateX(-50%);
  z-index: 110;
  display: none;
  flex-direction: column;
  align-items: center;
  gap: calc(var(--base) * 0.6);
  width: min(80%, calc(var(--base) * 22));
}

/* In portrait mode with drawer visible, lift panel above the drawer handle */
#game-container.drawer-enabled #post-hand-panel {
  bottom: calc(var(--base) * 5.5);
}

#post-hand-panel.visible {
  display: flex;
}

#post-hand-panel button:not(#table-quit-btn) {
  width: 100%;
  font-weight: 700;
  letter-spacing: 0.1em;
  border-radius: calc(var(--base) * 0.4);
  cursor: pointer;
  transition: all 0.2s ease;
  text-transform: uppercase;
  white-space: nowrap;
}

#table-quit-btn {
  font-size: calc(var(--base) * 0.6);
  padding: calc(var(--base) * 0.35) calc(var(--base) * 1.5);
  border: 1px solid;
  opacity: 0.5;
}

#new-hand-btn {
  font-size: calc(var(--base) * 0.85);
  padding: calc(var(--base) * 0.6) calc(var(--base) * 1.5);
  border: 2px solid;
}

#show-results-btn {
  font-size: calc(var(--base) * 0.7);
  padding: calc(var(--base) * 0.45) calc(var(--base) * 1.5);
  border: 1.5px solid;
}

/* Next-hand countdown inside placement panel (top-right) */
#next-hand-countdown {
  position: absolute;
  top: calc(var(--base) * 1.2);
  right: calc(var(--base) * 1.5);
  font-size: calc(var(--base) * 0.85);
  font-weight: 700;
  letter-spacing: 0.08em;
  opacity: 0.8;
  display: none;
}
#next-hand-countdown.visible {
  display: block;
}

/* Floating next-hand countdown (visible when results overlay is hidden) */
#next-hand-countdown-floating {
  position: absolute;
  top: calc(var(--base) * 2);
  right: calc(var(--base) * 2);
  z-index: 110;
  font-size: calc(var(--base) * 0.85);
  font-weight: 700;
  letter-spacing: 0.08em;
  opacity: 0.8;
  display: none;
}
#next-hand-countdown-floating.visible {
  display: block;
}

/* === AUDIO CONTROLS === */
#audio-controls {
  position: absolute;
  bottom: calc(var(--base) * 1);
  left: calc(var(--base) * 1.5);
  z-index: 60;
  display: flex;
  gap: calc(var(--base) * 0.5);
}

.audio-ctrl-btn {
  width: calc(var(--base) * 3);
  height: calc(var(--base) * 3);
  border-radius: calc(var(--base) * 0.4);
  border: 1px solid;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.15s ease;
  position: relative;
  overflow: hidden;
}

.audio-ctrl-btn:active {
  transform: scale(0.9);
}

/* Jump + spin on click */
.audio-ctrl-btn.clicked {
  animation: jumpSpin 0.5s ease;
}

@keyframes jumpSpin {
  0%   { transform: translateY(0) rotate(0deg); }
  30%  { transform: translateY(calc(var(--base) * -1.5)) rotate(120deg); }
  60%  { transform: translateY(calc(var(--base) * -0.5)) rotate(270deg); }
  100% { transform: translateY(0) rotate(360deg); }
}

/* Volume icon via SVG inline */
.audio-ctrl-btn svg {
  width: calc(var(--base) * 1.6);
  height: calc(var(--base) * 1.6);
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* === DESKTOP QUIPS POPUP === */
#desktop-quips-popup {
  position: absolute;
  bottom: calc(var(--base) * 5);
  left: calc(var(--base) * 1.5);
  z-index: 110;
  border: 1.5px solid var(--border-glow, rgba(255,255,255,0.2));
  border-radius: calc(var(--base) * 0.8);
  background: var(--bg-dark, #0d1f15);
  padding: calc(var(--base) * 1) calc(var(--base) * 1);
  width: calc(var(--base) * 24);
  max-height: 60vh;
  display: flex;
  flex-direction: column;
  transform: translateY(8px);
  opacity: 0;
  transition: transform 0.25s ease, opacity 0.25s ease;
  box-shadow: 0 8px 32px rgba(0,0,0,0.5), 0 0 1px rgba(255,255,255,0.1);
}

#desktop-quips-popup.visible {
  transform: translateY(0);
  opacity: 1;
}

.desktop-quips__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-bottom: calc(var(--base) * 0.6);
  margin-bottom: calc(var(--base) * 0.6);
  border-bottom: 1px solid var(--border-dim, rgba(255,255,255,0.1));
  flex-shrink: 0;
}

.desktop-quips__title {
  font-family: var(--font-display, sans-serif);
  font-size: calc(var(--base) * 0.85);
  font-weight: 900;
  letter-spacing: 0.2em;
  color: var(--gold, #c9a84c);
}

.desktop-quips__header-right {
  display: flex;
  align-items: center;
  gap: calc(var(--base) * 0.4);
}

.desktop-quips__theme-select {
  font-family: var(--font-body, sans-serif);
  font-size: calc(var(--base) * 0.65);
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: #fff;
  background: rgba(0,0,0,0.5);
  border: 1px solid rgba(255,255,255,0.2);
  border-radius: calc(var(--base) * 0.3);
  padding: calc(var(--base) * 0.2) calc(var(--base) * 1.2) calc(var(--base) * 0.2) calc(var(--base) * 0.5);
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='rgba(255,255,255,0.6)'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 6px center;
}

.desktop-quips__theme-select option {
  background: #1a1a2e;
  color: #fff;
}

.desktop-quips__close {
  display: flex;
  align-items: center;
  justify-content: center;
  width: calc(var(--base) * 1.5);
  height: calc(var(--base) * 1.5);
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: calc(var(--base) * 0.25);
  color: rgba(255,255,255,0.5);
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
  padding: 0;
}

.desktop-quips__close:hover {
  background: rgba(255,255,255,0.12);
  color: rgba(255,255,255,0.9);
}

.desktop-quips__body {
  overflow-y: auto;
  flex: 1;
  min-height: 0;
}

/* Reuse the drawer quip section/grid/button styles */
.desktop-quips__body .drawer-quips__section {
  margin-bottom: calc(var(--base) * 0.6);
}

.desktop-quips__body .drawer-quips__section-label {
  font-family: var(--font-title, 'Chakra Petch', sans-serif);
  font-size: calc(var(--base) * 0.7);
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--gold, #c9a84c);
  padding: calc(var(--base) * 0.3) 0;
}

.desktop-quips__body .drawer-quips__section-label::before,
.desktop-quips__body .drawer-quips__section-label::after {
  content: '';
  flex: 1;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(201, 168, 76, 0.35), transparent);
}

.desktop-quips__body .drawer-quips__grid {
  gap: calc(var(--base) * 0.35);
}

.desktop-quips__body .drawer-quips__btn {
  padding: calc(var(--base) * 0.35) calc(var(--base) * 0.5);
  font-size: calc(var(--base) * 0.8);
  font-family: var(--font-body, 'Rajdhani', sans-serif);
  font-weight: 700;
  letter-spacing: 0.03em;
  color: var(--text-primary, #f0ead6);
  text-shadow: 0 1px 2px rgba(0,0,0,0.6);
  background: linear-gradient(180deg, rgba(255,255,255,0.08) 0%, rgba(255,255,255,0.02) 100%);
  border: 1px solid rgba(255,255,255,0.1);
  border-bottom: 2px solid rgba(0,0,0,0.3);
  border-radius: calc(var(--base) * 0.4);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.1), 0 2px 4px rgba(0,0,0,0.3);
  cursor: pointer;
  transition: none;
}

/* === SCANLINE EFFECT (disabled for Standard theme) === */
/* #game-container::after — scanlines removed for green felt look */

/* === NAV MENU === */
#nav-menu {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 120;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.25s ease;
}

#nav-menu.visible {
  opacity: 1;
  pointer-events: auto;
}

.nav-menu-panel {
  position: absolute;
  bottom: calc(var(--base) * 5);
  left: calc(var(--base) * 1.5);
  border: 1.5px solid;
  border-radius: calc(var(--base) * 0.6);
  padding: calc(var(--base) * 1) calc(var(--base) * 1.2);
  min-width: calc(var(--base) * 18);
  transform: translateY(8px);
  transition: transform 0.25s ease;
}

#nav-menu.visible .nav-menu-panel {
  transform: translateY(0);
}

.nav-menu-section {
  margin-bottom: calc(var(--base) * 0.6);
}

.nav-menu-section:last-child {
  margin-bottom: 0;
}

.nav-menu-header {
  font-size: calc(var(--base) * 0.6);
  font-weight: 900;
  letter-spacing: 0.2em;
  padding: calc(var(--base) * 0.3) calc(var(--base) * 0.5);
  border-bottom: 1px solid;
  margin-bottom: calc(var(--base) * 0.2);
}

.nav-menu-item {
  display: block;
  width: 100%;
  text-align: left;
  font-family: inherit;
  font-size: calc(var(--base) * 0.85);
  font-weight: 600;
  background: none;
  border: none;
  padding: calc(var(--base) * 0.35) calc(var(--base) * 0.5);
  border-radius: calc(var(--base) * 0.2);
  cursor: pointer;
  transition: all 0.15s ease;
  letter-spacing: 0.03em;
}

.nav-menu-item:active {
  transform: scale(0.97);
}

.nav-menu-item-leave-toggle {
  color: #ff6b6b;
}
.nav-menu-item--active {
  color: #4caf50;
}

/* Toggle rows */
.nav-menu-toggle-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: calc(var(--base) * 0.35) calc(var(--base) * 0.5);
}

.nav-menu-toggle-label {
  font-size: calc(var(--base) * 0.85);
  font-weight: 600;
}

/* Toggle switch */
.nav-toggle {
  position: relative;
  width: calc(var(--base) * 4.5);
  height: calc(var(--base) * 1.8);
  border-radius: calc(var(--base) * 1);
  border: 1.5px solid;
  cursor: pointer;
  transition: all 0.25s ease;
  padding: 0;
  display: flex;
  align-items: center;
}

.nav-toggle-knob {
  position: absolute;
  left: calc(var(--base) * 0.2);
  width: calc(var(--base) * 1.3);
  height: calc(var(--base) * 1.3);
  border-radius: 50%;
  transition: all 0.25s ease;
}

.nav-toggle.active .nav-toggle-knob {
  left: calc(100% - var(--base) * 1.5);
}

.nav-toggle-text {
  position: absolute;
  width: 100%;
  text-align: center;
  font-size: calc(var(--base) * 0.5);
  font-weight: 700;
  letter-spacing: 0.1em;
  pointer-events: none;
}

.nav-menu-close {
  position: absolute;
  top: calc(var(--base) * 0.5);
  right: calc(var(--base) * 0.5);
  background: none;
  border: 1px solid var(--border-color, rgba(255, 255, 255, 0.2));
  border-radius: calc(var(--base) * 0.3);
  color: var(--text-primary, #fff);
  font-size: calc(var(--base) * 1.2);
  line-height: 1;
  padding: calc(var(--base) * 0.2) calc(var(--base) * 0.5);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

/* === THEME SELECTOR OVERLAY === */
#theme-selector-overlay,
#theme-customizer-overlay {
  position: fixed;
  top: 0; left: 0;
  width: 100%; height: 100%;
  z-index: 10001;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.25s ease;
}

#theme-selector-overlay.visible,
#theme-customizer-overlay.visible {
  opacity: 1;
  pointer-events: auto;
}

.theme-selector-panel,
.theme-customizer-panel {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%) translateY(8px);
  border: 1.5px solid;
  border-radius: calc(var(--base) * 0.6);
  padding: calc(var(--base) * 1.2) calc(var(--base) * 1.5);
  min-width: calc(var(--base) * 22);
  max-width: 90vw;
  transition: transform 0.25s ease;
}

#theme-selector-overlay.visible .theme-selector-panel,
#theme-customizer-overlay.visible .theme-customizer-panel {
  transform: translate(-50%, -50%) translateY(0);
}

/* Theme selector title */
.theme-selector-title {
  font-size: calc(var(--base) * 0.7);
  font-weight: 900;
  letter-spacing: 0.2em;
  padding-bottom: calc(var(--base) * 0.5);
  border-bottom: 1px solid;
  margin-bottom: calc(var(--base) * 0.6);
}

/* Theme option buttons */
.theme-selector-list {
  display: flex;
  flex-direction: column;
  gap: calc(var(--base) * 0.4);
}

.theme-option {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: calc(var(--base) * 0.5) calc(var(--base) * 0.8);
  border-radius: calc(var(--base) * 0.35);
  border: 1.5px solid;
  cursor: pointer;
  transition: all 0.2s ease;
}

.theme-option.disabled {
  opacity: 0.4;
  cursor: default;
}

.theme-option-name {
  font-size: calc(var(--base) * 0.9);
  font-weight: 700;
  letter-spacing: 0.03em;
}

.theme-option-status {
  font-size: calc(var(--base) * 0.45);
  font-weight: 700;
  letter-spacing: 0.12em;
}

/* === THEME CUSTOMIZER === */
.theme-customizer-header {
  display: flex;
  align-items: center;
  gap: calc(var(--base) * 0.6);
  padding-bottom: calc(var(--base) * 0.5);
  border-bottom: 1px solid;
  margin-bottom: calc(var(--base) * 0.8);
}

.theme-customizer-back-btn {
  font-size: calc(var(--base) * 0.55);
  font-weight: 700;
  background: none;
  border: 1px solid;
  border-radius: calc(var(--base) * 0.3);
  padding: calc(var(--base) * 0.2) calc(var(--base) * 0.5);
  cursor: pointer;
  transition: all 0.15s ease;
  letter-spacing: 0.08em;
}

.theme-customizer-title {
  font-size: calc(var(--base) * 0.65);
  font-weight: 900;
  letter-spacing: 0.15em;
}

.theme-customizer-section {
  margin-bottom: calc(var(--base) * 0.7);
}

.theme-customizer-section:last-child {
  margin-bottom: 0;
}

.theme-customizer-section-header {
  font-size: calc(var(--base) * 0.55);
  font-weight: 700;
  letter-spacing: 0.15em;
  margin-bottom: calc(var(--base) * 0.4);
}

.theme-customizer-section-header.disabled-section {
  opacity: 0.35;
}

.coming-soon-tag {
  font-size: calc(var(--base) * 0.4);
  letter-spacing: 0.1em;
  margin-left: calc(var(--base) * 0.4);
}

/* Card back option buttons */
.theme-customizer-options {
  display: flex;
  gap: calc(var(--base) * 0.5);
  flex-wrap: wrap;
}

.theme-cust-option {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: calc(var(--base) * 0.25);
  padding: calc(var(--base) * 0.35);
  border: 1.5px solid;
  border-radius: calc(var(--base) * 0.4);
  cursor: pointer;
  transition: all 0.2s ease;
}

.theme-cust-preview {
  width: calc(var(--base) * 4);
  height: calc(var(--base) * 5.6);
  border-radius: calc(var(--base) * 0.25);
  object-fit: cover;
  pointer-events: none;
}

.theme-cust-label {
  font-size: calc(var(--base) * 0.6);
  font-weight: 700;
  letter-spacing: 0.05em;
}

/* === RESPONSIVE ADJUSTMENTS === */
@media (max-width: 900px) and (orientation: landscape) {
  :root {
    --base: min(1.6vw, 1.6vh);
  }
}

@media (max-width: 700px) and (orientation: landscape) {
  :root {
    --base: min(2vw, 2vh);
  }

  .action-btn {
    min-width: calc(var(--base) * 5);
    padding: calc(var(--base) * 0.5) calc(var(--base) * 0.8);
  }
}

@media (orientation: landscape) and (max-height: 500px) {
  /* Compact chance slots on short landscape screens */
  #chance-slots {
    bottom: calc(var(--base) * 0.5);
    right: calc(var(--base) * 1);
  }

  .chance-slot {
    width: calc(var(--base) * 8);
    height: calc(var(--base) * 11);
  }

  .chance-slot-label {
    font-size: calc(var(--base) * 0.85);
  }

  /* Pull seat-5 (bottom-right) away from chance slots */
  #seat-5 {
    bottom: 20%;
    right: 8%;
  }
}

@media (orientation: portrait) {
  :root {
    --base: min(2.4vw, 1.3vh);
  }

  /* --- Container: align to top instead of center --- */
  #game-container {
    align-items: flex-start;
    padding-top: env(safe-area-inset-top, 0px);
  }

  /* --- Table: flush to top, use full vertical space --- */
  #table {
    width: 96%;
    height: 75%;
    margin-top: 0;
    max-width: none;
    max-height: none;
  }

  /* --- Title block: shrink so it doesn't overlap --- */
  #game-title {
    font-size: calc(var(--base) * 0.85);
    letter-spacing: 0.08em;
  }
  #game-title-rule { width: 100%; }
  #game-title-subtitle { font-size: calc(var(--base) * 0.4); }

  #hand-info {
    font-size: calc(var(--base) * 0.9);
  }

  /* --- Player info: bigger names, titles, and chip counts --- */
  .player-name {
    font-size: calc(var(--base) * 1.05);
  }

  .player-title {
    font-size: calc(var(--base) * 0.85);
  }

  .player-chips {
    font-size: calc(var(--base) * 1.1);
  }

  .live-hand-label {
    font-size: calc(var(--base) * 0.55);
  }

  .live-hand-name {
    font-size: calc(var(--base) * 0.85);
  }

  .player-badge {
    font-size: calc(var(--base) * 0.65);
  }

  .player-bet {
    font-size: calc(var(--base) * 1.9);
  }

  /* --- Seat positions for portrait --- */
  #seat-0 {
    bottom: 5%;
  }

  /* Wild card label: position between player-bet and live-hand */
  #seat-0 .wild-card-label {
    bottom: calc(var(--base) * -1.2);
    z-index: 4;
  }

  #seat-1 {
    bottom: 4%;
    left: -1%;
  }

  #seat-2 {
    top: 5%;
    left: -1%;
  }

  #seat-3 {
    top: 0%;
  }

  #seat-4 {
    top: 5%;
    right: -1%;
  }

  #seat-5 {
    bottom: 4%;
    right: -1%;
  }

  /* --- Chance deck: to the right of community cards, label underneath --- */
  #chance-deck-display {
    transform: translate(calc(var(--base) * 14), calc(var(--base) * -4)) scale(1.08);
    flex-direction: column;
    align-items: center;
  }

  #chance-deck-label {
    font-size: calc(var(--base) * 0.75);
    font-weight: 700;
  }

  /* --- Burn card: to the left of community cards, label underneath --- */
  #burn-card-display {
    transform: translate(calc(var(--base) * -18), calc(var(--base) * -3.8));
    flex-direction: column-reverse;
    align-items: center;
  }

  #burn-card-label {
    font-weight: 700;
  }

  /* --- Pot display: bigger --- */
  #pot-label {
    font-size: calc(var(--base) * 0.85);
  }

  #pot-amount {
    font-size: calc(var(--base) * 2);
  }

  #phase-label {
    font-size: calc(var(--base) * 1.0);
    font-weight: 700;
  }

  /* --- Chance slots: offset right at bottom of screen --- */
  #chance-slots {
    bottom: calc(var(--base) * -1);
    left: auto;
    right: calc(50% - var(--base) * 3);
    transform: translateX(50%);
    gap: calc(var(--base) * 0.4);
    /* Fixed width for 3 slots + gaps to prevent collapse */
    min-width: calc(var(--base) * 12 * 3 + var(--base) * 0.4 * 2);
  }

  .chance-slot {
    width: calc(var(--base) * 12);
    height: calc(var(--base) * 16.2);
    min-width: calc(var(--base) * 12);
    flex-shrink: 0;
  }

  #chance-slots .chance-card {
    width: calc(var(--base) * 12);
    height: calc(var(--base) * 16.2);
    flex-shrink: 0;
  }

  .chance-slot-label {
    font-size: calc(var(--base) * 0.85);
  }

  /* --- Opponent chance cards: bigger TEXT only, keep card sizes --- */
  .chance-slot-mini-label {
    font-size: calc(var(--base) * 0.75);
  }

  .chance-played-name {
    font-size: calc(var(--base) * 0.85);
    transform: rotate(-35deg);
    line-height: 1.05;
    padding: 0;
    word-break: break-word;
    hyphens: auto;
    max-width: 140%;
    overflow: visible;
  }

  .chance-card-mini .chance-active-label {
    font-size: calc(var(--base) * 0.55);
  }

  /* --- Action buttons: above chance cards, below live hand --- */
  #action-panel {
    bottom: calc(var(--base) * 15 + 20px);
  }

  #your-turn-indicator {
    margin-bottom: calc(var(--base) * 0.5);
  }

  /* --- Timeout overlay: larger text for mobile readability --- */
  #timeout-label {
    font-size: calc(var(--base) * 2);
  }

  #timeout-sublabel {
    font-size: calc(var(--base) * 1);
  }

  #timeout-hint {
    font-size: calc(var(--base) * 1.1);
  }

  #timeout-dismiss {
    font-size: calc(var(--base) * 1);
    padding: calc(var(--base) * 0.4) calc(var(--base) * 1.5);
  }

  #timeout-actions .action-btn {
    font-size: calc(var(--base) * 1.2);
    padding: calc(var(--base) * 0.6) calc(var(--base) * 1);
  }

  .action-btn {
    font-size: calc(var(--base) * 1.3);
    padding: calc(var(--base) * 0.8) calc(var(--base) * 1.5);
    min-width: calc(var(--base) * 7);
    min-height: calc(var(--base) * 3.5);
    white-space: nowrap;
  }

  .nl-btn {
    font-size: calc(var(--base) * 1) !important;
    padding: calc(var(--base) * 0.6) calc(var(--base) * 1) !important;
    min-width: calc(var(--base) * 6) !important;
    min-height: calc(var(--base) * 2.8);
  }

  .nl-slider-group {
    min-width: calc(var(--base) * 16);
  }

  /* --- Hide arrow on Play Card button (renders as ugly emoji on mobile) --- */
  .chance-arrow {
    display: none;
  }

  /* --- Audio controls: move to left side, stack vertically, bottom of screen --- */
  #audio-controls {
    bottom: 8px;
    left: 8px;
    right: auto;
    flex-direction: column;
  }

  /* Hide desktop quips popup in portrait (drawer Social tab handles it) */
  #desktop-quips-popup { display: none !important; }

  /* Speech bubbles — larger on mobile */
  .quip-bubble {
    font-size: 14px;
    padding: 6px 12px;
    max-width: 200px;
    border-radius: 8px;
  }

  .audio-ctrl-btn {
    width: calc(var(--base) * 3.5);
    height: calc(var(--base) * 3.5);
  }

  /* --- Burn card label --- */
  #burn-card-label {
    font-size: calc(var(--base) * 0.75);
  }

  /* --- Effect notifications: move up on mobile --- */
  #effect-notifications {
    margin-top: -30px;
  }

  /* --- Hero chance cards: match 3D preview proportions exactly (20% larger) --- */
  #chance-slots .chance-card .chance-card-name {
    top: calc(var(--base) * 0.72);
    font-size: calc(var(--base) * 1.08);
    line-height: 1.25;
  }

  #chance-slots .chance-card .chance-card-desc {
    font-size: calc(var(--base) * 0.86);
    line-height: 1.3;
  }

  #chance-slots .chance-card .chance-card-scope {
    bottom: calc(var(--base) * 2.04);
    font-size: calc(var(--base) * 0.65);
    letter-spacing: 0.15em;
  }

  #chance-slots .chance-card .chance-card-tier {
    bottom: calc(var(--base) * 0.96);
    font-size: calc(var(--base) * 0.6);
    letter-spacing: 0.15em;
  }

  /* --- 3D Chance Card preview label: move higher on mobile --- */
  #chance-3d-label {
    top: 3% !important;
  }

  /* --- Nav menu items: bigger touch targets --- */
  .nav-menu-item {
    font-size: calc(var(--base) * 1);
    padding: calc(var(--base) * 0.45) calc(var(--base) * 0.5);
  }

  /* --- Swap announcement banner: contained on mobile, wraps text --- */
  #swap-announcement {
    font-size: 14px !important;
    padding: 8px 12px;
    max-width: 88vw !important;
    white-space: normal !important;
    text-align: center;
    line-height: 1.3;
    box-sizing: border-box;
  }

  /* --- Profile Screen: Mobile Portrait Adjustments --- */
  .profile-content {
    padding: 20px 16px;
    gap: 12px;
  }

  .profile-title {
    font-size: 20px;
  }

  .profile-chance-stats-grid {
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
  }

  .profile-chance-card-face {
    width: 70px;
    height: 98px;
    padding: 12px 4px 14px;
  }

  .profile-chance-card-name {
    font-size: 5.5px;
    top: 4px;
  }

  .profile-chance-card-desc {
    font-size: 4.5px;
  }

  .profile-chance-card-scope {
    font-size: 3.5px;
    bottom: 10px;
  }

  .profile-chance-card-tier {
    font-size: 3.5px;
    bottom: 4px;
  }

  .profile-chance-card-count {
    font-size: 11px;
  }

  .profile-chance-card-info {
    margin-top: 3px;
  }

  .nl-slider-container {
    height: calc(var(--base) * 4);
  }

  .nl-slider-thumb {
    width: calc(var(--base) * 3);
    height: calc(var(--base) * 3);
  }

  .nl-slider-value {
    font-size: calc(var(--base) * 1.8);
  }

  .nl-quick-btn {
    font-size: calc(var(--base) * 1);
    padding: calc(var(--base) * 0.5) calc(var(--base) * 1);
  }
}

/* === iPhone 15 / 14 / 13 (390px, portrait) === */
@media (orientation: portrait) and (max-width: 430px) and (min-width: 385px) {
  /* Opponent seats — push further to edges */
  #seat-1 { left: -4%; }
  #seat-2 { left: -4%; }
  #seat-4 { right: -4%; }
  #seat-5 { right: -4%; }

  /* Opponent hole cards — 20% bigger */
  .seat:not(#seat-0) .card {
    width: calc(var(--base) * 4.6);
    height: calc(var(--base) * 6.5);
  }
  .seat:not(#seat-0) .card-rank { font-size: calc(var(--base) * 1.9); }
  .seat:not(#seat-0) .card-suit { font-size: calc(var(--base) * 1.4); }

  /* Chaos cards in drawer — 15% smaller */
  .chance-slot {
    width: calc(var(--base) * 10.2);
    height: calc(var(--base) * 13.8);
    min-width: calc(var(--base) * 10.2);
  }

  #chance-slots {
    min-width: calc(var(--base) * 10.2 * 3 + var(--base) * 0.4 * 2);
  }

}

/* === SMALL PHONE (375px and under, portrait) === */
@media (orientation: portrait) and (max-width: 384px) {
  :root {
    --base: min(2.6vw, 1.3vh);
  }

  .chance-slot {
    width: calc(var(--base) * 7);
    height: calc(var(--base) * 9.5);
  }

  .chance-slot-label {
    font-size: calc(var(--base) * 0.8);
  }
}

/* === SWAP ANNOUNCEMENT BANNER === */
#swap-announcement {
  position: fixed;
  top: 46%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 9999;
  background: rgba(0, 0, 0, 0.85);
  color: #fff;
  font-family: var(--font-display, 'Segoe UI', sans-serif);
  font-size: calc(var(--base, 4px) * 2.8);
  font-weight: 700;
  letter-spacing: 0.05em;
  padding: calc(var(--base, 4px) * 1.2) calc(var(--base, 4px) * 3);
  border-radius: calc(var(--base, 4px) * 1);
  border: 1px solid rgba(255, 255, 255, 0.25);
  text-align: center;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.3s ease;
  white-space: nowrap;
  text-shadow: 0 0 8px rgba(255, 255, 255, 0.4);
}

#swap-announcement.visible {
  opacity: 1;
}

#swap-announcement.fade-out {
  opacity: 0;
}

/* === ANIMATIONS === */
@keyframes neonPulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.7; }
}

@keyframes glowIn {
  from { opacity: 0; transform: scale(0.9); }
  to { opacity: 1; transform: scale(1); }
}

.seat.winner .player-info {
  animation: neonPulse 1.5s ease-in-out infinite;
}

.community-card {
  animation: glowIn 0.3s ease-out;
}

.community-card.burn-swapped {
  animation: burnSwapPulse 2s ease-in-out infinite alternate;
}

@keyframes burnSwapPulse {
  from { opacity: 0.9; }
  to { opacity: 1; }
}

/* === CHANCE CARD SELECTION OVERLAY === */
#chance-selection-overlay,
#hole-card-picker-overlay,
#card-pass-picker-overlay,
#wild-card-picker-overlay,
#burn-swap-picker-overlay,
#sneak-peek-picker-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 120;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.3s ease;
}

/* Sub-pickers: position above community cards so they remain visible */
#hole-card-picker-overlay,
#card-pass-picker-overlay,
#wild-card-picker-overlay,
#burn-swap-picker-overlay,
#sneak-peek-picker-overlay {
  align-items: flex-start;
  padding-top: calc(var(--base) * 3);
}

#chance-selection-overlay.visible,
#hole-card-picker-overlay.visible,
#card-pass-picker-overlay.visible,
#wild-card-picker-overlay.visible,
#burn-swap-picker-overlay.visible,
#sneak-peek-picker-overlay.visible {
  opacity: 1;
  pointer-events: auto;
}

.chance-selection-panel,
.picker-panel {
  border: 1px solid;
  border-radius: calc(var(--base) * 0.8);
  padding: calc(var(--base) * 1.5) calc(var(--base) * 2);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: calc(var(--base) * 1.2);
  animation: glowIn 0.3s ease-out;
}

.picker-context {
  font-size: calc(var(--base) * 0.95);
  font-weight: 600;
  letter-spacing: 0.08em;
  margin-bottom: calc(var(--base) * 0.4);
  text-align: center;
}

.picker-context:empty {
  display: none;
}

.chance-selection-title,
.picker-title {
  font-size: calc(var(--base) * 1.3);
  font-weight: 900;
  letter-spacing: 0.15em;
}

/* Picker countdown timer */
.picker-countdown {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: calc(var(--base) * 0.2);
  min-height: calc(var(--base) * 3);
  transition: color 0.3s, text-shadow 0.3s;
}

.picker-countdown .picker-countdown-label {
  font-size: calc(var(--base) * 0.7);
  font-weight: 700;
  letter-spacing: 0.2em;
}

.picker-countdown .picker-countdown-number {
  font-size: calc(var(--base) * 1.8);
  font-weight: 900;
}

.picker-countdown.urgent .picker-countdown-number {
  animation: timeout-pulse 1s ease-in-out infinite;
}

.picker-auto-select-banner {
  width: 100%;
  text-align: center;
  font-size: calc(var(--base) * 0.85);
  font-weight: 900;
  letter-spacing: 0.15em;
  padding: calc(var(--base) * 0.6) calc(var(--base) * 1);
  border-radius: calc(var(--base) * 0.4);
  background: rgba(220, 50, 50, 0.25);
  border: 1px solid rgba(220, 50, 50, 0.5);
  color: #ff6b6b;
  animation: glowIn 0.3s ease-out;
}

.picker-hint {
  font-size: calc(var(--base) * 0.6);
  font-weight: 700;
  letter-spacing: 0.12em;
  text-align: center;
  max-width: calc(var(--base) * 24);
}

.picker-dismiss {
  border: 1px solid;
  border-radius: calc(var(--base) * 0.3);
  font-size: calc(var(--base) * 0.55);
  font-weight: 700;
  letter-spacing: 0.15em;
  cursor: pointer;
  padding: calc(var(--base) * 0.25) calc(var(--base) * 1);
  transition: all 0.15s ease;
}

#chance-selection-cards {
  display: flex;
  gap: calc(var(--base) * 1);
  justify-content: center;
  flex-wrap: wrap;
  max-width: calc(var(--base) * 50);
}

/* Chance selection card (in overlay) */
.chance-selection-card {
  width: calc(var(--base) * 12);
  height: calc(var(--base) * 16);
  border-radius: calc(var(--base) * 0.6);
  background-size: cover;
  background-position: center;
  border: 3px solid;
  cursor: pointer;
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: calc(var(--base) * 1);
  transition: all 0.2s ease;
  overflow: hidden;
}

.chance-selection-card::before {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.5);
  border-radius: inherit;
  z-index: 0;
}

.chance-selection-card:hover {
  transform: translateY(calc(var(--base) * -0.5)) scale(1.05);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
}

.chance-selection-card:active {
  transform: scale(0.95);
}

.chance-selection-card .chance-card-name {
  position: relative;
  top: auto;
  font-size: calc(var(--base) * 1.1);
  font-weight: 700;
  color: #fff;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.8);
  text-align: center;
  z-index: 1;
  margin-bottom: calc(var(--base) * 0.5);
}

.chance-selection-card .chance-card-desc {
  position: relative;
  font-size: calc(var(--base) * 0.85);
  font-weight: 500;
  color: rgba(255, 255, 255, 0.9);
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.8);
  text-align: center;
  z-index: 1;
  line-height: 1.3;
  padding: 0 calc(var(--base) * 0.5);
}

.chance-selection-card .chance-card-tier {
  position: absolute;
  bottom: calc(var(--base) * 0.8);
  left: 0;
  width: 100%;
  font-size: calc(var(--base) * 0.7);
  font-weight: 700;
  letter-spacing: 0.15em;
  text-align: center;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.8);
  z-index: 1;
}

/* Selectable chance cards — hover/click effects */
.chance-selectable {
  cursor: pointer;
  transition: all 0.2s ease;
}

.chance-selectable:hover {
  transform: translateY(calc(var(--base) * -0.5)) scale(1.05);
}

.chance-selectable:active {
  transform: scale(0.95);
}

/* Selectable playing cards (for pickers) */
.card-selectable {
  cursor: pointer;
  transition: all 0.2s ease;
  width: calc(var(--base) * 6);
  height: calc(var(--base) * 8.5);
}

.card-selectable:hover {
  transform: translateY(calc(var(--base) * -0.5)) scale(1.08);
}

.card-selectable:active {
  transform: scale(0.95);
}

.card-selectable .card-rank {
  font-size: calc(var(--base) * 2.2);
}

.card-selectable .card-suit {
  font-size: calc(var(--base) * 1.8);
}

/* Burn Swap Picker labels */
.burn-swap-burn-label,
.burn-swap-flop-label {
  font-size: calc(var(--base) * 0.7);
  font-weight: 700;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  text-align: center;
}

.burn-swap-flop-label {
  margin-top: calc(var(--base) * 0.5);
}

#burn-swap-burn-card {
  display: flex;
  justify-content: center;
}

#burn-swap-picker-cards {
  display: flex;
  gap: calc(var(--base) * 1);
  justify-content: center;
}

/* Sneak Peek picker buttons */
#sneak-peek-picker-targets,
#sneak-peek-picker-cards {
  display: flex;
  gap: calc(var(--base) * 0.6);
  justify-content: center;
  flex-wrap: wrap;
}

.sneak-peek-target-btn,
.sneak-peek-card-btn {
  font-size: calc(var(--base) * 0.85);
  font-weight: 700;
  letter-spacing: 0.08em;
  padding: calc(var(--base) * 0.6) calc(var(--base) * 1.2);
  border: 1.5px solid;
  border-radius: calc(var(--base) * 0.4);
  cursor: pointer;
  transition: all 0.15s ease;
  text-transform: uppercase;
  min-width: calc(var(--base) * 7);
  text-align: center;
}

.sneak-peek-target-btn:active,
.sneak-peek-card-btn:active {
  transform: scale(0.95);
}

/* Skip button */
.chance-selection-buttons {
  display: flex;
  gap: calc(var(--base) * 1);
}

#chance-skip-btn,
#chance-dismiss-btn {
  font-size: calc(var(--base) * 0.9);
  font-weight: 700;
  letter-spacing: 0.1em;
  padding: calc(var(--base) * 0.6) calc(var(--base) * 2);
  border: 1.5px solid;
  border-radius: calc(var(--base) * 0.4);
  cursor: pointer;
  transition: all 0.2s ease;
  text-transform: uppercase;
}

#chance-skip-btn:active,
#chance-dismiss-btn:active {
  transform: scale(0.95);
}

/* Picker cards container */
#hole-card-picker-cards,
#card-pass-picker-cards {
  display: flex;
  gap: calc(var(--base) * 1.5);
  justify-content: center;
}

/* Wild Card Picker (rank selection) */

#wild-card-picker-grid {
  display: flex;
  flex-wrap: wrap;
  gap: calc(var(--base) * 0.5);
  justify-content: center;
  max-width: calc(var(--base) * 36);
}

.wild-rank-btn {
  width: calc(var(--base) * 3.8);
  height: calc(var(--base) * 3.8);
  border: 1px solid;
  border-radius: calc(var(--base) * 0.4);
  font-size: calc(var(--base) * 1.3);
  font-weight: 700;
  cursor: pointer;
  transition: all 0.15s ease;
}

.wild-rank-btn:hover {
  transform: scale(1.1);
}

.wild-rank-btn.disabled {
  opacity: 0.35;
  cursor: not-allowed;
  position: relative;
}

.wild-rank-btn.disabled::after {
  content: 'WILD';
  position: absolute;
  bottom: calc(var(--base) * 0.2);
  left: 50%;
  transform: translateX(-50%);
  font-size: calc(var(--base) * 0.4);
  letter-spacing: 0.1em;
}

.wild-rank-btn.disabled:hover {
  transform: none;
}

.wild-rank-btn.disabled.shake {
  animation: your-turn-shake 0.4s ease-in-out;
}

/* Tutorial rank picker — locked ranks are dimmed but don't show WILD label */
#wild-card-picker-overlay.tutorial-picker .wild-rank-btn.disabled::after {
  content: none;
}

/* Hero's hole cards shown at top of Wild Card picker */
.wild-picker-hero-cards {
  text-align: center;
  margin-bottom: calc(var(--base) * 1);
  padding-bottom: calc(var(--base) * 0.8);
  border-bottom: 1px solid;
}

.wild-picker-hero-label {
  font-size: calc(var(--base) * 0.7);
  letter-spacing: 0.15em;
  margin-bottom: calc(var(--base) * 0.4);
}

.wild-picker-hero-row {
  display: flex;
  justify-content: center;
  gap: calc(var(--base) * 0.8);
}

/* === ACTION LOG PANEL === */

#action-log-panel {
  position: absolute;
  top: calc(var(--base) * 4);
  right: calc(var(--base) * 1.5);
  width: calc(var(--base) * 22);
  max-height: calc(var(--base) * 28);
  z-index: 95;
  border: 1.5px solid;
  border-radius: calc(var(--base) * 0.6);
  display: flex;
  flex-direction: column;
  pointer-events: auto;
  opacity: 0;
  transform: translateY(-8px);
  transition: opacity 0.25s ease, transform 0.25s ease;
  visibility: hidden;
}

#action-log-panel.visible {
  opacity: 1;
  transform: translateY(0);
  visibility: visible;
}

.action-log-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: calc(var(--base) * 0.4) calc(var(--base) * 0.8);
  border-bottom: 1px solid;
  flex-shrink: 0;
}

.action-log-title {
  font-size: calc(var(--base) * 0.65);
  font-weight: 900;
  letter-spacing: 0.2em;
}

.action-log-ctrl {
  background: none;
  border: 1px solid;
  width: calc(var(--base) * 2);
  height: calc(var(--base) * 2);
  border-radius: calc(var(--base) * 0.2);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: calc(var(--base) * 1);
  line-height: 1;
  transition: all 0.15s ease;
}

#action-log-entries {
  flex: 1;
  overflow-y: auto;
  padding: calc(var(--base) * 0.4) calc(var(--base) * 0.6);
  scrollbar-width: thin;
}

#action-log-entries::-webkit-scrollbar {
  width: 4px;
}

#action-log-entries::-webkit-scrollbar-thumb {
  border-radius: 2px;
}

.action-log-entry {
  font-size: calc(var(--base) * 0.75);
  font-weight: 500;
  padding: calc(var(--base) * 0.15) 0;
  line-height: 1.3;
}

.action-log-player {
  font-weight: 700;
}

.action-log-amount {
  font-weight: 700;
}

.action-log-separator {
  font-size: calc(var(--base) * 0.55);
  font-weight: 700;
  letter-spacing: 0.15em;
  text-align: center;
  padding: calc(var(--base) * 0.3) 0;
  margin: calc(var(--base) * 0.2) 0;
  border-top: 1px solid;
  border-bottom: 1px solid;
}

.action-log-hand-start {
  font-size: calc(var(--base) * 0.6);
  font-weight: 900;
  letter-spacing: 0.2em;
  text-align: center;
  padding: calc(var(--base) * 0.4) 0;
}

/* === RULES OVERLAY === */
#rules-overlay {
  position: fixed;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 99999;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.3s ease;
  background: rgba(0, 0, 0, 0.7);
}

#rules-overlay.visible {
  opacity: 1;
  pointer-events: auto;
}

.rules-panel {
  background: linear-gradient(145deg, #1a1a2e 0%, #16213e 50%, #0f3460 100%);
  border: 1px solid rgba(255, 215, 64, 0.3);
  border-radius: 16px;
  box-shadow:
    0 0 40px rgba(255, 215, 64, 0.15),
    0 20px 60px rgba(0, 0, 0, 0.6);
  padding: 28px 24px 24px;
  width: 90%;
  max-width: 480px;
  max-height: 80%;
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
}

.rules-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 12px;
  flex-shrink: 0;
  padding-bottom: 12px;
  border-bottom: 1px solid rgba(255, 215, 64, 0.15);
}

.rules-title {
  font-family: 'Teko', sans-serif;
  font-size: 28px;
  font-weight: 700;
  letter-spacing: 3px;
  text-transform: uppercase;
  background: linear-gradient(135deg, #ffd740, #ffab00);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

#rules-close-btn {
  font-family: 'Teko', sans-serif;
  font-size: 15px;
  font-weight: 600;
  color: #ffd740;
  background: none;
  border: 1px solid rgba(255, 215, 64, 0.4);
  border-radius: 6px;
  padding: 6px 14px;
  cursor: pointer;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  transition: all 0.15s ease;
}

#rules-close-btn:hover {
  background: rgba(255, 215, 64, 0.1);
}

#rules-close-btn:active {
  transform: scale(0.95);
}

#rules-content {
  overflow-y: auto;
  flex: 1;
  padding-right: 8px;
}

/* Scrollbar for rules content */
#rules-content::-webkit-scrollbar {
  width: 5px;
}

#rules-content::-webkit-scrollbar-track {
  border-radius: 3px;
  background: rgba(255, 255, 255, 0.03);
}

#rules-content::-webkit-scrollbar-thumb {
  border-radius: 3px;
  background: rgba(255, 215, 64, 0.2);
}

.rules-section-title {
  font-family: 'Teko', sans-serif;
  font-size: 17px;
  font-weight: 600;
  letter-spacing: 2px;
  text-transform: uppercase;
  margin-top: 16px;
  margin-bottom: 6px;
  padding-bottom: 4px;
  border-bottom: 1px solid rgba(255, 215, 64, 0.15);
  background: linear-gradient(135deg, #ffd740, #ffab00);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.rules-section-title:first-child {
  margin-top: 0;
}

.rules-text {
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 14px;
  font-weight: 400;
  line-height: 1.55;
  color: rgba(255, 255, 255, 0.75);
  margin-bottom: 8px;
}

/* Tier headers in rules */
.rules-tier-header {
  font-family: 'Teko', sans-serif;
  font-size: 15px;
  font-weight: 600;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  margin-top: 12px;
  margin-bottom: 4px;
  padding: 3px 8px;
  border-left: 3px solid currentColor;
}

/* Chance card entries in rules */
.rules-card-entry {
  display: flex;
  align-items: baseline;
  gap: 8px;
  padding: 4px 8px;
  margin-bottom: 2px;
  border-radius: 4px;
}

.rules-card-col-header {
  background: none;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  margin-bottom: 4px;
  padding-bottom: 6px;
}

.rules-card-col-header .rules-card-count,
.rules-card-col-header .rules-card-name,
.rules-card-col-header .rules-card-desc {
  font-family: 'Teko', sans-serif;
  font-size: 11px;
  font-weight: 400;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.4);
}

.rules-card-count {
  font-family: 'Teko', sans-serif;
  font-size: 14px;
  font-weight: 700;
  min-width: 24px;
  text-align: center;
  flex-shrink: 0;
}

.rules-card-name {
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 13px;
  font-weight: 600;
  white-space: nowrap;
  min-width: 110px;
}

.rules-card-desc {
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 13px;
  font-weight: 400;
  line-height: 1.4;
  color: rgba(255, 255, 255, 0.65);
}

/* === CHANCE WINDOW INLINE UI === */

/* Clickable hero chance cards during chance window */
.chance-playable {
  cursor: pointer;
  animation: chanceGlow 1.5s ease-in-out infinite;
}

.chance-playable:hover {
  transform: translateY(calc(var(--base) * -0.5)) scale(1.06);
}

.chance-playable:active {
  transform: scale(0.95);
}

@keyframes chanceGlow {
  0%, 100% { opacity: 0.9; }
  50% { opacity: 1; }
}

/* Non-playable cards during chance window */
.chance-unplayable {
  opacity: 0.35;
  filter: grayscale(0.5);
  cursor: not-allowed;
}

/* Blocked reason toast */
.chance-blocked-toast {
  position: fixed;
  transform: translateX(-50%) translateY(-100%);
  font-family: var(--font-display);
  font-size: 0.75rem;
  padding: 6px 14px;
  border-radius: 4px;
  border: 1px solid;
  white-space: nowrap;
  z-index: 10000;
  pointer-events: none;
  animation: toast-in 0.3s ease-out;
}
.chance-blocked-toast.fade-out {
  opacity: 0;
  transition: opacity 0.4s ease;
}
@keyframes toast-in {
  from { opacity: 0; transform: translateX(-50%) translateY(-80%); }
  to   { opacity: 1; transform: translateX(-50%) translateY(-100%); }
}

/* Confirmation dialog (e.g. Revealer Pro when Revealer is pending) */
.chance-confirm-dialog {
  position: fixed;
  transform: translateX(-50%) translateY(-100%);
  font-size: 0.8rem;
  font-weight: 600;
  padding: 12px 16px;
  border-radius: 8px;
  border: 1px solid;
  z-index: 10000;
  max-width: 260px;
  text-align: center;
  animation: toast-in 0.25s ease-out;
}
.chance-confirm-message {
  margin-bottom: 10px;
  line-height: 1.35;
}
.chance-confirm-buttons {
  display: flex;
  gap: 8px;
  justify-content: center;
}
.chance-confirm-btn {
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  padding: 6px 18px;
  border-radius: 4px;
  border: 1px solid;
  cursor: pointer;
  transition: all 0.15s ease;
}

/* PLAY CARD / PASS action buttons — visual colors provided by theme */

.chance-arrow {
  font-size: 1.2em;
  margin-left: 0.2em;
}

/* =================================================================
   POST-GAME RESULTS SCREEN
   ================================================================= */

#results-screen {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
}

.results-backdrop {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: #000;
}

.results-loading {
  color: rgba(255, 215, 64, 0.8);
  font-family: 'Teko', sans-serif;
  font-size: 20px;
  text-align: center;
  padding: 32px 0;
  letter-spacing: 2px;
  animation: resultsLoadingPulse 1.2s ease-in-out infinite;
}

@keyframes resultsLoadingPulse {
  0%, 100% { opacity: 0.5; }
  50% { opacity: 1; }
}

.results-panel {
  position: relative;
  width: 90%;
  max-width: 480px;
  max-height: 90vh;
  overflow-y: auto;
  background: linear-gradient(145deg, #1a1a2e 0%, #16213e 50%, #0f3460 100%);
  border: 1px solid rgba(255, 215, 64, 0.3);
  border-radius: 16px;
  padding: 24px 20px;
  box-shadow:
    0 0 40px rgba(255, 215, 64, 0.15),
    0 20px 60px rgba(0, 0, 0, 0.6);
  animation: resultsSlideIn 0.5s ease-out;
}

@keyframes resultsSlideIn {
  from {
    opacity: 0;
    transform: translateY(30px) scale(0.95);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

.results-header {
  text-align: center;
  font-family: 'Teko', sans-serif;
  font-size: 32px;
  font-weight: 700;
  letter-spacing: 3px;
  background: linear-gradient(135deg, #ffd740, #ffab00);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  margin-bottom: 16px;
  text-shadow: none;
}

/* --- Results Nameplate --- */
.results-nameplate {
  position: relative;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  border-radius: 10px;
  overflow: hidden;
  margin-bottom: 16px;
}

.results-nameplate-banner {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-size: cover;
  background-position: center;
  opacity: 0.4;
}

.results-nameplate-scrim {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, rgba(0,0,0,0.7) 0%, rgba(0,0,0,0.3) 100%);
}

.results-nameplate-avatar {
  position: relative;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  overflow: hidden;
  border: 2px solid rgba(255, 215, 64, 0.6);
  flex-shrink: 0;
}

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

.results-nameplate-info {
  position: relative;
  flex: 1;
  min-width: 0;
}

.results-nameplate-name {
  font-family: 'Teko', sans-serif;
  font-size: 20px;
  font-weight: 600;
  color: #fff;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.results-nameplate-level {
  font-family: 'Teko', sans-serif;
  font-size: 13px;
  font-weight: 700;
  color: #ffd740;
  letter-spacing: 0.5px;
}

.results-nameplate-resources {
  display: flex;
  align-items: center;
  gap: 6px;
  font-family: 'Teko', sans-serif;
  font-size: 15px;
  font-weight: 500;
  color: #4caf50;
  margin-top: 2px;
}

.results-chip-icon {
  color: #4caf50;
  font-size: 0.8em;
}

.results-jewel-icon {
  color: #e040fb;
  font-size: 0.8em;
}

.results-separator {
  color: rgba(255,255,255,0.3);
  margin: 0 2px;
}

.results-chips-value {
  color: #4caf50;
  transition: color 0.3s;
}

.results-jewels-value {
  color: #e040fb;
  transition: color 0.3s;
}

.results-chips-value.counting,
.results-jewels-value.counting {
  color: #ffd740;
}

/* --- Results Stats --- */
.results-stats {
  margin-bottom: 16px;
}

.results-stat-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 6px 12px;
  border-bottom: 1px solid rgba(255,255,255,0.06);
  opacity: 0;
  transform: translateX(-10px);
  transition: opacity 0.3s ease, transform 0.3s ease;
}

.results-stat-row.visible {
  opacity: 1;
  transform: translateX(0);
}

.results-stat-label {
  font-family: 'Teko', sans-serif;
  font-size: 14px;
  font-weight: 400;
  color: rgba(255,255,255,0.6);
  letter-spacing: 0.5px;
  text-transform: uppercase;
}

.results-stat-value {
  font-family: 'Teko', sans-serif;
  font-size: 16px;
  font-weight: 600;
  color: #fff;
}

.results-stat-value.positive {
  color: #4caf50;
}

.results-stat-value.negative {
  color: #f44336;
}

/* --- Results XP Section --- */
.results-xp-section {
  margin-bottom: 16px;
  opacity: 0;
  transition: opacity 0.5s ease;
}

.results-xp-section.visible {
  opacity: 1;
}

.results-xp-label {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 6px;
}

.results-xp-level-text {
  font-family: 'Teko', sans-serif;
  font-size: 16px;
  font-weight: 600;
  color: #ffd740;
}

.results-xp-amount {
  font-family: 'Teko', sans-serif;
  font-size: 13px;
  font-weight: 400;
  color: rgba(255,255,255,0.5);
}

.results-xp-bar-track {
  width: 100%;
  height: 12px;
  background: rgba(255,255,255,0.08);
  border-radius: 6px;
  overflow: hidden;
  position: relative;
}

.results-xp-bar-fill {
  height: 100%;
  width: 0%;
  background: linear-gradient(90deg, #ffd740, #ffab00);
  border-radius: 6px;
  transition: width 0.8s ease-out;
  box-shadow: 0 0 8px rgba(255, 215, 64, 0.4);
}

/* --- Level Up Celebration --- */
.results-levelup {
  text-align: center;
  margin-bottom: 16px;
  animation: levelUpPulse 0.6s ease-out;
}

@keyframes levelUpPulse {
  0% { opacity: 0; transform: scale(0.8); }
  50% { transform: scale(1.05); }
  100% { opacity: 1; transform: scale(1); }
}

.results-levelup-text {
  font-family: 'Teko', sans-serif;
  font-size: 28px;
  font-weight: 700;
  letter-spacing: 3px;
  background: linear-gradient(135deg, #ffd740, #ff6f00);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  margin-bottom: 8px;
  text-shadow: none;
}

.results-rewards-carousel-wrapper {
  overflow-x: auto;
  padding: 8px 0;
}

.results-rewards-carousel {
  display: flex;
  gap: 12px;
  justify-content: center;
  flex-wrap: wrap;
}

.results-reward-level-header {
  width: 100%;
  font-family: 'Teko', sans-serif;
  font-size: 15px;
  font-weight: 600;
  color: #ffd740;
  text-align: center;
  padding: 4px 0 2px;
  border-top: 1px solid rgba(255, 215, 64, 0.2);
  margin-top: 4px;
}

.results-reward-level-header:first-child {
  border-top: none;
  margin-top: 0;
}

.results-reward-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 8px 12px;
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255, 215, 64, 0.2);
  border-radius: 8px;
  min-width: 70px;
}

.results-reward-icon {
  font-size: 24px;
}

.results-reward-label {
  font-family: 'Teko', sans-serif;
  font-size: 11px;
  font-weight: 500;
  color: rgba(255,255,255,0.7);
  text-align: center;
  white-space: nowrap;
}

.results-reward-value {
  font-family: 'Teko', sans-serif;
  font-size: 14px;
  font-weight: 600;
  color: #ffd740;
}

/* --- Continue Button --- */
.results-continue-btn {
  display: block;
  width: 100%;
  padding: 12px;
  margin-top: 8px;
  font-family: 'Teko', sans-serif;
  font-size: 20px;
  font-weight: 700;
  letter-spacing: 2px;
  color: #1a1a2e;
  background: linear-gradient(135deg, #ffd740, #ffab00);
  border: none;
  border-radius: 8px;
  cursor: pointer;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
  animation: resultsBtnFadeIn 0.4s ease-out;
}

@keyframes resultsBtnFadeIn {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: translateY(0); }
}

.results-continue-btn:hover {
  transform: scale(1.02);
  box-shadow: 0 4px 20px rgba(255, 215, 64, 0.3);
}

.results-continue-btn:active {
  transform: scale(0.98);
}

/* ═══════════════════════════════════════════════════════════════════════════
   CHALLENGES — PROFILE SECTION
   ═══════════════════════════════════════════════════════════════════════════ */

.challenges-container {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 10px;
}

.challenges-weekly-header {
  margin-top: 12px;
}

.challenge-card {
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 8px;
  padding: 10px 12px;
  transition: opacity 0.3s ease;
}

.challenge-card.claimed {
  opacity: 0.5;
}

.challenge-card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 4px;
}

.challenge-card-title {
  font-family: 'Teko', sans-serif;
  font-size: 16px;
  font-weight: 600;
  color: #fff;
  letter-spacing: 1px;
}

.challenge-card-tier {
  font-family: 'Teko', sans-serif;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 1.5px;
}
.challenge-card-desc-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
}
.challenge-card-rewards {
  font-family: 'Crimson Pro', serif;
  font-size: 11px;
  color: rgba(255, 255, 255, 0.45);
  white-space: nowrap;
  margin-left: 8px;
}

.challenge-card-desc {
  font-family: 'Teko', sans-serif;
  font-size: 14px;
  font-weight: 400;
  letter-spacing: 0.5px;
  color: rgba(255, 255, 255, 0.6);
  margin-bottom: 6px;
}

.challenge-card-progress {
  display: flex;
  align-items: center;
  gap: 8px;
}

.challenge-card-bar {
  flex: 1;
  height: 6px;
  background: rgba(255, 255, 255, 0.1);
  border-radius: 3px;
  overflow: hidden;
}

.challenge-card-fill {
  height: 100%;
  border-radius: 3px;
  transition: width 0.5s ease-out;
}

.challenge-card-count {
  font-family: 'Teko', sans-serif;
  font-size: 13px;
  color: rgba(255, 255, 255, 0.7);
  min-width: 40px;
  text-align: right;
}

.challenge-claim-btn {
  display: block;
  width: 100%;
  margin-top: 8px;
  padding: 6px 12px;
  font-family: 'Teko', sans-serif;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 1.5px;
  color: #fff;
  border: none;
  border-radius: 6px;
  cursor: pointer;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}

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

.challenge-claimed-mark {
  margin-top: 6px;
  font-family: 'Teko', sans-serif;
  font-size: 13px;
  font-weight: 600;
  color: #4caf50;
  letter-spacing: 1px;
}

.challenges-bonus {
  text-align: center;
  padding: 6px 0;
}

.challenges-bonus-btn {
  display: inline-block;
  padding: 8px 24px;
  font-family: 'Teko', sans-serif;
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 1.5px;
  color: #1a1a2e;
  background: linear-gradient(135deg, #ffd740, #ffab00);
  border: none;
  border-radius: 6px;
  cursor: pointer;
  transition: transform 0.15s ease;
}

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

.challenges-bonus-claimed {
  font-family: 'Teko', sans-serif;
  font-size: 13px;
  color: #4caf50;
  letter-spacing: 1px;
}

.challenges-bonus-pending {
  font-family: 'Teko', sans-serif;
  font-size: 13px;
  color: rgba(255, 255, 255, 0.4);
  letter-spacing: 1px;
}

.challenges-jewel-hint {
  text-align: center;
  font-family: 'Teko', sans-serif;
  font-size: 13px;
  color: rgba(255, 255, 255, 0.35);
  letter-spacing: 1px;
  padding: 10px 12px 4px;
}
.challenges-jewel-hint-link {
  color: #ffd740;
  text-decoration: underline;
  cursor: pointer;
}

.challenges-reset-timer {
  float: right;
  font-size: 12px;
  font-weight: 400;
  letter-spacing: 0;
  color: rgba(255, 255, 255, 0.4);
  -webkit-text-fill-color: rgba(255, 255, 255, 0.4);
  background: none;
  -webkit-background-clip: unset;
  background-clip: unset;
}

.challenge-badge {
  position: absolute;
  top: -4px;
  right: -4px;
  min-width: 16px;
  height: 16px;
  padding: 0 4px;
  font-family: 'Teko', sans-serif;
  font-size: 11px;
  font-weight: 700;
  line-height: 16px;
  text-align: center;
  color: #fff;
  background: #e53935;
  border-radius: 8px;
  pointer-events: none;
}

/* ═══════════════════════════════════════════════════════════════════════════
   CHALLENGES — RESULTS SCREEN
   ═══════════════════════════════════════════════════════════════════════════ */

.results-challenges {
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.results-challenges-header {
  font-family: 'Teko', sans-serif;
  font-size: 16px;
  font-weight: 600;
  letter-spacing: 2px;
  color: #ffd740;
  background: linear-gradient(135deg, #ffd740, #ffab00);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  margin-bottom: 8px;
}

.results-challenges-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.results-challenge-row {
  background: rgba(255, 255, 255, 0.05);
  border-radius: 6px;
  padding: 8px 10px;
}

.results-challenge-row.results-challenge-complete {
  border: 1px solid rgba(76, 175, 80, 0.4);
  background: rgba(76, 175, 80, 0.08);
}

.results-challenge-info {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 4px;
}

.results-challenge-title {
  font-family: 'Teko', sans-serif;
  font-size: 14px;
  font-weight: 600;
  color: #fff;
  letter-spacing: 1px;
}

.results-challenge-nums {
  font-family: 'Teko', sans-serif;
  font-size: 13px;
  color: rgba(255, 255, 255, 0.6);
}

.results-challenge-bar {
  height: 4px;
  background: rgba(255, 255, 255, 0.1);
  border-radius: 2px;
  overflow: hidden;
}

.results-challenge-fill {
  height: 100%;
  background: #ffd740;
  border-radius: 2px;
}

.results-challenge-complete .results-challenge-fill {
  background: #4caf50;
}

.results-challenge-check {
  display: block;
  margin-top: 4px;
  font-family: 'Teko', sans-serif;
  font-size: 12px;
  font-weight: 600;
  color: #4caf50;
  letter-spacing: 1px;
}
.results-challenge-xp {
  color: #ffd740;
  margin-left: 6px;
}

/* --- Results: Title Unlocks --- */
.results-titles-section {
  margin-top: 16px;
  padding: 14px 16px;
  border-radius: 10px;
  border: 1.5px solid rgba(255, 215, 64, 0.4);
  background: linear-gradient(135deg, rgba(255, 215, 64, 0.08), rgba(255, 215, 64, 0.02));
}
.results-titles-header {
  font-family: 'Teko', sans-serif;
  font-size: 16px;
  font-weight: 700;
  letter-spacing: 2px;
  color: #ffd740;
  text-align: center;
  margin-bottom: 10px;
}
.results-title-item {
  text-align: center;
  padding: 6px 0;
}
.results-title-name {
  font-family: 'Teko', sans-serif;
  font-size: 18px;
  font-weight: 600;
  color: #e0d0ff;
  letter-spacing: 0.5px;
}
.results-title-desc {
  font-family: 'Crimson Pro', serif;
  font-size: 12px;
  font-style: italic;
  color: rgba(255, 255, 255, 0.5);
  margin-top: 2px;
}
.results-titles-hint {
  font-family: 'Crimson Pro', serif;
  font-size: 11px;
  color: rgba(255, 255, 255, 0.4);
  text-align: center;
  margin-top: 8px;
}

/* ═══════════════════════════════════════════════════════════════════════════
   CHALLENGES — TOAST POPUP
   ═══════════════════════════════════════════════════════════════════════════ */

.challenge-toast {
  position: fixed;
  top: 0;
  left: 50%;
  transform: translate(-50%, -100%);
  z-index: 100000;
  width: 90%;
  max-width: 360px;
  padding: 12px 16px;
  background: linear-gradient(135deg, #1a1a2e, #2a2a3e);
  border: 1px solid rgba(255, 215, 64, 0.4);
  border-radius: 0 0 12px 12px;
  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.5);
  cursor: pointer;
  transition: transform 0.4s cubic-bezier(0.22, 1, 0.36, 1);
}

.challenge-toast.visible {
  transform: translate(-50%, 0);
}

.challenge-toast-title {
  font-family: 'Teko', sans-serif;
  font-size: 18px;
  font-weight: 700;
  letter-spacing: 2px;
  color: #ffd740;
  margin-bottom: 2px;
}

.challenge-toast-desc {
  font-family: 'Raleway', sans-serif;
  font-size: 13px;
  color: rgba(255, 255, 255, 0.8);
  margin-bottom: 4px;
}

.challenge-toast-reward {
  font-family: 'Teko', sans-serif;
  font-size: 13px;
  color: rgba(255, 255, 255, 0.5);
  letter-spacing: 1px;
}

/* ═══════════════════════════════════════════════════════════════════════════
   HAND HISTORY SCREEN
   ═══════════════════════════════════════════════════════════════════════════ */

#hand-history-screen,
#hand-detail-screen {
  position: fixed;
  inset: 0;
  z-index: 10001;
  background: #000;
  overflow-y: auto;
  padding: 20px 0;
}

.hh-content,
.hd-content {
  position: relative;
  width: 90%;
  max-width: 520px;
  margin: 0 auto;
  padding: 24px 20px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  background: linear-gradient(145deg, #1a1a2e 0%, #16213e 50%, #0f3460 100%);
  border: 1px solid rgba(255, 215, 64, 0.3);
  border-radius: 16px;
  box-shadow:
    0 0 40px rgba(255, 215, 64, 0.15),
    0 20px 60px rgba(0, 0, 0, 0.6);
}

/* Header */
.hh-header,
.hd-header {
  display: flex;
  align-items: center;
  gap: 12px;
}

.hh-title {
  font-family: 'Teko', sans-serif;
  font-size: 28px;
  font-weight: 700;
  letter-spacing: 3px;
  text-transform: uppercase;
  background: linear-gradient(135deg, #ffd740, #ffab00);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  margin: 0;
}

.hh-back-btn,
.hd-back-btn {
  font-family: 'Teko', sans-serif;
  font-size: 15px;
  font-weight: 600;
  color: #ffd740;
  background: none;
  border: 1px solid rgba(255, 215, 64, 0.4);
  border-radius: 6px;
  padding: 6px 14px;
  cursor: pointer;
  transition: all 0.15s ease;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.hh-back-btn:hover,
.hd-back-btn:hover {
  background: rgba(255, 215, 64, 0.1);
}

/* Rule */
.hh-rule,
.hd-rule {
  width: 100%;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(201, 168, 76, 0.4), transparent);
}


/* Tabs */
.hh-tabs {
  display: flex;
  gap: 0;
  width: 100%;
}

.hh-tab {
  flex: 1;
  font-family: 'Teko', sans-serif;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.4);
  background: none;
  border: none;
  border-bottom: 2px solid transparent;
  padding: 10px 0;
  cursor: pointer;
  transition: all 0.15s ease;
}

.hh-tab--active {
  color: #ffd740;
  border-bottom-color: #ffd740;
}

/* Hand list */
.hh-list {
  display: flex;
  flex-direction: column;
  gap: 0;
}

/* Date group headers */
.hh-date-group {
  font-family: 'Teko', sans-serif;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.35);
  margin-top: 16px;
  margin-bottom: 6px;
}

.hh-date-group:first-child {
  margin-top: 4px;
}

/* Hand entry cards */
.hh-entry {
  position: relative;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 10px;
  padding: 14px 16px;
  margin-bottom: 8px;
  cursor: pointer;
  transition: background 0.15s ease;
}

.hh-entry:hover {
  background: rgba(255, 255, 255, 0.06);
}

.hh-entry--won {
  border-left: 3px solid #4caf50;
}

.hh-entry--lost {
  border-left: 3px solid #f44336;
}

.hh-entry--folded {
  opacity: 0.65;
}

.hh-entry__top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 4px;
}

.hh-entry__result {
  font-family: 'Teko', sans-serif;
  font-size: 15px;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.9);
}

.hh-entry--folded .hh-entry__result {
  color: rgba(255, 255, 255, 0.5);
}

.hh-entry__delta {
  font-family: 'Orbitron', sans-serif;
  font-size: 15px;
  font-weight: 700;
}

.hh-entry__delta--pos {
  color: #4caf50;
}

.hh-entry__delta--neg {
  color: #f44336;
}

.hh-entry__delta--zero {
  color: rgba(255, 255, 255, 0.4);
}

.hh-entry__bottom {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.hh-entry__opponents {
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 12px;
  color: rgba(255, 255, 255, 0.5);
}

.hh-entry__time {
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 11px;
  color: rgba(255, 255, 255, 0.35);
}

.hh-entry__chance {
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 11px;
  color: rgba(255, 255, 255, 0.4);
  margin-top: 4px;
}

/* Delete button on saved entries */
.hh-entry__delete {
  position: absolute;
  top: 8px;
  right: 8px;
  width: 24px;
  height: 24px;
  font-size: 16px;
  line-height: 24px;
  text-align: center;
  color: rgba(255, 255, 255, 0.3);
  background: none;
  border: none;
  border-radius: 50%;
  cursor: pointer;
  transition: all 0.15s ease;
  padding: 0;
}

.hh-entry__delete:hover {
  color: #f44336;
  background: rgba(244, 67, 54, 0.15);
}

/* Empty states */
.hh-empty {
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 14px;
  color: rgba(255, 255, 255, 0.4);
  text-align: center;
  padding: 40px 20px;
}

/* ═══════════════════════════════════════════════════════════════════════════
   HAND DETAIL SCREEN
   ═══════════════════════════════════════════════════════════════════════════ */

.hd-header {
  justify-content: space-between;
}

.hd-date {
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 13px;
  color: rgba(255, 255, 255, 0.5);
  flex: 1;
  text-align: center;
}

.hd-save-btn {
  width: 36px;
  height: 36px;
  font-size: 20px;
  line-height: 36px;
  text-align: center;
  color: #ffd740;
  background: none;
  border: 1px solid rgba(255, 215, 64, 0.4);
  border-radius: 50%;
  cursor: pointer;
  transition: all 0.15s ease;
  padding: 0;
}

.hd-save-btn:hover {
  box-shadow: 0 0 8px rgba(255, 215, 64, 0.3);
}

.hd-save-btn--saved {
  background: rgba(255, 215, 64, 0.15);
}

.hd-body {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

/* Result banner */
.hd-result-banner {
  font-family: 'Teko', sans-serif;
  font-size: 22px;
  font-weight: 700;
  text-align: center;
  letter-spacing: 2px;
  text-transform: uppercase;
}

.hd-result-banner--won {
  color: #4caf50;
}

.hd-result-banner--lost {
  color: #f44336;
}

.hd-result-banner--folded {
  color: rgba(255, 255, 255, 0.6);
}

/* Card chips */
.hd-cards-section {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.hd-cards-label {
  font-family: 'Teko', sans-serif;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.4);
}

.hd-cards-row {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}

.hd-card {
  display: inline-block;
  padding: 4px 8px;
  border-radius: 4px;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.15);
  font-family: 'Orbitron', sans-serif;
  font-size: 13px;
  font-weight: 700;
}

.hd-card--red {
  color: #f44336;
}

.hd-card--black {
  color: rgba(255, 255, 255, 0.9);
}

/* Players section */
.hd-players-section {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.hd-player {
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 8px;
  padding: 10px 12px;
}

.hd-player__top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 4px;
}

.hd-player__name {
  font-family: 'Teko', sans-serif;
  font-size: 15px;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.9);
}

.hd-player__badge {
  font-family: 'Orbitron', sans-serif;
  font-size: 9px;
  font-weight: 700;
  color: #ffd740;
  background: rgba(255, 215, 64, 0.15);
  border-radius: 3px;
  padding: 2px 5px;
  margin-left: 6px;
}

.hd-player__delta {
  font-family: 'Orbitron', sans-serif;
  font-size: 13px;
  font-weight: 700;
}

.hd-player__chips {
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 12px;
  color: rgba(255, 255, 255, 0.45);
}

.hd-player__hand {
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 13px;
  color: rgba(255, 255, 255, 0.6);
  margin-top: 2px;
}

.hd-player__chance {
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 12px;
  color: rgba(255, 255, 255, 0.4);
  font-style: italic;
  margin-top: 2px;
}

/* Action log */
.hd-action-log {
  padding-left: 12px;
  border-left: 2px solid rgba(255, 255, 255, 0.08);
}

.hd-street-header {
  font-family: 'Teko', sans-serif;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: #ffd740;
  margin-top: 12px;
  margin-bottom: 4px;
}

.hd-street-header:first-child {
  margin-top: 0;
}

.hd-action-entry {
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 13px;
  color: rgba(255, 255, 255, 0.7);
  padding: 2px 0;
}

.hd-chance-entry {
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 12px;
  color: rgba(255, 255, 255, 0.5);
  font-style: italic;
  padding: 2px 0 2px 8px;
}

/* Pot breakdown */
.hd-pot-section {
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 8px;
  padding: 10px 12px;
}

.hd-pot-label {
  font-family: 'Teko', sans-serif;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.4);
  margin-bottom: 4px;
}

.hd-pot-row {
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 13px;
  color: rgba(255, 255, 255, 0.7);
  padding: 2px 0;
}

.hd-pot-winner {
  color: #4caf50;
  font-weight: 600;
}

/* Active effects */
.hd-effects-section {
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 12px;
  color: rgba(255, 255, 255, 0.4);
}

.hd-effects-label {
  font-family: 'Teko', sans-serif;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.4);
  margin-bottom: 4px;
}

/* Loading state */
.hd-loading {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  padding: 40px 0;
  font-family: 'Teko', sans-serif;
  font-size: 14px;
  letter-spacing: 2px;
  color: rgba(255, 255, 255, 0.4);
}

.hd-loading-spinner {
  width: 32px;
  height: 32px;
  border: 3px solid rgba(255, 215, 64, 0.2);
  border-top-color: #ffd740;
  border-radius: 50%;
  animation: hdSpin 0.8s linear infinite;
}

@keyframes hdSpin {
  to { transform: rotate(360deg); }
}

/* Error message */
.hd-error {
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 14px;
  color: rgba(255, 255, 255, 0.5);
  text-align: center;
  padding: 40px 20px;
}

/* Toast notification for save actions */
.hh-toast {
  position: fixed;
  bottom: 30px;
  left: 50%;
  transform: translateX(-50%);
  font-family: 'Teko', sans-serif;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 1px;
  color: #fff;
  background: rgba(0, 0, 0, 0.85);
  border: 1px solid rgba(255, 215, 64, 0.3);
  border-radius: 8px;
  padding: 10px 20px;
  z-index: 10000;
  animation: hhToastIn 0.3s ease-out;
}

@keyframes hhToastIn {
  from { opacity: 0; transform: translateX(-50%) translateY(10px); }
  to { opacity: 1; transform: translateX(-50%) translateY(0); }
}

/* === STRATEGY GUIDE PANEL (PC/landscape) === */
#strategy-panel {
  display: none;
  position: absolute;
  right: 0;
  top: 0;
  bottom: calc(var(--base) * 20);
  width: calc(var(--base) * 28);
  max-width: 320px;
  background: rgba(0, 0, 0, 0.85);
  border-left: 1.5px solid var(--felt-border, rgba(255, 255, 255, 0.15));
  border-bottom: 1.5px solid var(--felt-border, rgba(255, 255, 255, 0.15));
  border-radius: 0 0 0 calc(var(--base) * 0.6);
  z-index: 50;
  flex-direction: column;
}
#strategy-panel.visible {
  display: flex;
}
@media (orientation: portrait) and (max-width: 768px) {
  #strategy-panel { display: none !important; }
}

.strategy-panel__header {
  display: flex;
  align-items: center;
  padding: calc(var(--base) * 0.6) calc(var(--base) * 0.8);
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}
.strategy-panel__title {
  color: var(--accent, #ffd700);
  font-family: var(--font-ui);
  font-size: calc(var(--base) * 0.7);
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.strategy-panel__body {
  flex: 1;
  overflow-y: auto;
  padding: calc(var(--base) * 0.6);
}

.sg-panel-placeholder {
  color: rgba(255, 255, 255, 0.4);
  text-align: center;
  padding: calc(var(--base) * 2) calc(var(--base) * 1);
  font-family: var(--font-ui);
  font-size: calc(var(--base) * 0.7);
}
.sg-exit-btn {
  padding: calc(var(--base) * 0.6) calc(var(--base) * 2);
  background: linear-gradient(180deg, #d42a2a, #8b1a1a);
  border: none;
  border-bottom: 2px solid #5c0e0e;
  border-radius: calc(var(--base) * 0.4);
  color: #fff;
  font-family: var(--font-ui);
  font-size: calc(var(--base) * 0.75);
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

/* === STRATEGY GUIDE — SCENARIOS PANEL === */
.sg-scenarios {
  padding: 8px;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  height: 100%;
}

/* Dropdown row */
.sg-scenarios__cat-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 4px 0 8px;
}
.sg-scenarios__cat-label {
  font-family: var(--font-ui);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.5);
  white-space: nowrap;
}
.sg-scenarios__cat-select {
  padding: 6px 28px 6px 10px;
  font-family: var(--font-ui);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: #fff;
  background: rgba(0, 0, 0, 0.5);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 4px;
  appearance: none;
  -webkit-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='rgba(255,255,255,0.6)'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 8px center;
  cursor: pointer;
}

/* Quick-link pills — single row */
.sg-scenarios__nav {
  display: flex;
  flex-wrap: nowrap;
  gap: 6px;
  justify-content: center;
  padding-bottom: 8px;
}
.sg-scenarios__nav-pill {
  flex: 1;
  min-width: 0;
  padding: 7px 6px;
  font-family: var(--font-ui);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--text-primary, #f0ead6);
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 14px;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.sg-scenarios__nav-pill:active { background: rgba(255, 255, 255, 0.15); }

/* Collapsible sections */
.sg-scenarios__section {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-bottom: 10px;
}
.sg-scenarios__section--collapsed .sg-scenarios__grid,
.sg-scenarios__section--collapsed .sg-scenarios__placeholder { display: none; }
.sg-scenarios__section--collapsed .sg-scenarios__chevron { transform: rotate(-90deg); }

.sg-scenarios__section-label {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 0 2px;
  font-family: var(--font-ui);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--gold, #c9a84c);
  user-select: none;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.sg-scenarios__section-label::before,
.sg-scenarios__section-label::after {
  content: '';
  flex: 1;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(201, 168, 76, 0.35), transparent);
}
.sg-scenarios__chevron { transition: transform 0.2s; }

/* Tier sub-headers within chaos section */
.sg-scenarios__tier-label {
  font-family: var(--font-ui);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  padding: 8px 2px 2px;
  grid-column: 1 / -1;
}
.sg-scenarios__tier-label--common { color: #2ecc71; }
.sg-scenarios__tier-label--uncommon { color: #00c8ff; }
.sg-scenarios__tier-label--rare { color: #9b59b6; }
.sg-scenarios__tier-label--legendary { color: #f39c12; }
.sg-scenarios__tier-label--mythic { color: #e74c3c; }

/* 2-column button grid */
.sg-scenarios__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px;
}

/* Scenario button */
.sg-scenarios__btn {
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  min-height: 40px;
  padding: 8px 8px;
  font-family: var(--font-ui);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.03em;
  color: var(--text-primary, #f0ead6);
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.6);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.08) 0%, rgba(255, 255, 255, 0.02) 100%);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-bottom: 2px solid rgba(0, 0, 0, 0.3);
  border-radius: 8px;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1), 0 2px 4px rgba(0, 0, 0, 0.3);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  overflow: hidden;
  user-select: none;
}
.sg-scenarios__btn:active { background: rgba(255, 255, 255, 0.15); }

/* Tier-colored text on chaos card buttons */
.sg-scenarios__btn--common { color: #2ecc71; }
.sg-scenarios__btn--uncommon { color: #00c8ff; }
.sg-scenarios__btn--rare { color: #9b59b6; }
.sg-scenarios__btn--legendary { color: #f39c12; }
.sg-scenarios__btn--mythic { color: #e74c3c; }
.sg-scenarios__btn--strategy { color: #c9a84c; }

/* PASS button in SG chaos panel */
.sg-pass-btn {
  display: block;
  margin: 10px auto 0;
}

/* Placeholder for empty categories */
.sg-scenarios__placeholder {
  color: rgba(255, 255, 255, 0.3);
  text-align: center;
  padding: 24px 8px;
  font-family: var(--font-ui);
  font-size: 13px;
  font-style: italic;
}

/* === STRATEGY GUIDE OVERLAY === */
#sg-overlay {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.7);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 200;
  -webkit-tap-highlight-color: transparent;
}
@media (orientation: portrait) {
  #sg-overlay { padding-bottom: 390px; }
}
.sg-overlay__box {
  position: relative;
  background: rgba(10, 10, 20, 0.95);
  border: 1.5px solid rgba(255, 255, 255, 0.15);
  border-radius: calc(var(--base) * 0.6);
  padding: calc(var(--base) * 1.5) calc(var(--base) * 2);
  max-width: 380px;
  width: 85%;
  text-align: center;
}
.sg-overlay__scenario {
  font-family: var(--font-ui);
  font-size: calc(var(--base) * 0.85);
  font-weight: 600;
  color: rgba(255, 255, 255, 0.45);
  text-align: left;
  margin-bottom: calc(var(--base) * 0.2);
}
.sg-overlay__label {
  font-family: var(--font-ui);
  font-size: calc(var(--base) * 2.2);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--accent, #ffd700);
}
.sg-overlay__reward {
  font-family: 'Raleway', sans-serif;
  font-size: calc(var(--base) * 1.1);
  font-weight: 600;
  color: #ffd700;
  margin-top: calc(var(--base) * 0.8);
  margin-bottom: calc(var(--base) * 1.5);
  letter-spacing: 0.03em;
}
.sg-overlay__reward--claimed {
  color: rgba(255, 255, 255, 0.4);
  font-style: italic;
}
.sg-overlay__desc {
  font-family: var(--font-ui);
  font-size: calc(var(--base) * 1.0);
  color: rgba(255, 255, 255, 0.6);
  font-style: italic;
  line-height: 1.4;
  margin-bottom: calc(var(--base) * 0.8);
}
.sg-overlay__text {
  font-family: 'Raleway', sans-serif;
  font-size: calc(var(--base) * 1.3);
  color: rgba(255, 255, 255, 0.9);
  line-height: 1.5;
  margin-bottom: calc(var(--base) * 1.2);
}
.sg-overlay__hint {
  font-family: var(--font-ui);
  font-size: calc(var(--base) * 1.0);
  color: var(--accent, #ffd700);
  font-weight: 600;
  margin-bottom: calc(var(--base) * 0.8);
}
.sg-overlay__btn {
  font-family: var(--font-ui);
  padding: calc(var(--base) * 1.2) calc(var(--base) * 4);
  background: linear-gradient(180deg, #3a7bd5, #1a4a8a);
  border: none;
  border-bottom: 3px solid #0e2d5c;
  border-radius: calc(var(--base) * 0.6);
  color: #fff;
  font-family: var(--font-ui);
  font-size: calc(var(--base) * 1.4);
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.sg-overlay__mute {
  position: absolute;
  bottom: calc(var(--base) * 1);
  right: calc(var(--base) * 1);
  background: none;
  border: none;
  font-size: calc(var(--base) * 1.2);
  cursor: pointer;
  opacity: 0.7;
  -webkit-tap-highlight-color: transparent;
}

/* === SG HINT BANNER (mid-nudge soft prompt) === */
#sg-hint-banner {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 200;
  pointer-events: none;
}
.sg-hint__box {
  pointer-events: auto;
  position: relative;
  background: rgba(10, 10, 20, 0.92);
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: calc(var(--base) * 0.5);
  padding: calc(var(--base) * 0.8) calc(var(--base) * 2.5) calc(var(--base) * 0.8) calc(var(--base) * 1.2);
  text-align: center;
  max-width: 90vw;
  white-space: nowrap;
  animation: sg-hint-fade-in 0.4s ease;
}
@keyframes sg-hint-fade-in {
  from { opacity: 0; transform: translateY(-8px); }
  to { opacity: 1; transform: translateY(0); }
}
.sg-hint__gold {
  font-family: var(--font-ui);
  font-size: calc(var(--base) * 1.5);
  font-weight: 700;
  color: var(--accent, #ffd700);
  line-height: 1.4;
}
.sg-hint__gray {
  font-family: var(--font-ui);
  font-size: calc(var(--base) * 1.2);
  color: rgba(255, 255, 255, 0.4);
  line-height: 1.4;
}
.sg-hint__close {
  position: absolute;
  top: calc(var(--base) * 0.3);
  right: calc(var(--base) * 0.4);
  background: none;
  border: none;
  color: rgba(255, 255, 255, 0.4);
  font-size: calc(var(--base) * 0.9);
  cursor: pointer;
  padding: calc(var(--base) * 0.2);
  line-height: 1;
  -webkit-tap-highlight-color: transparent;
}

#sg-phase-banner {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 200;
  pointer-events: none;
}

/* === STRATEGY GUIDE TARGET PICKER === */
.sg-target-highlight {
  animation: sg-target-pulse 1.2s ease-in-out infinite;
  z-index: 100;
}
@keyframes sg-target-pulse {
  0%, 100% { filter: drop-shadow(0 0 6px rgba(255, 215, 0, 0.6)); }
  50% { filter: drop-shadow(0 0 18px rgba(255, 215, 0, 1.0)); }
}
#sg-target-banner {
  position: absolute;
  top: calc(var(--base) * 2);
  left: 50%;
  transform: translateX(-50%);
  z-index: 200;
  pointer-events: none;
}
.sg-target-banner__text {
  font-family: var(--font-ui);
  font-size: calc(var(--base) * 1.6);
  font-weight: 700;
  color: var(--accent, #ffd700);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.8);
  background: rgba(10, 10, 20, 0.85);
  border: 1px solid rgba(255, 215, 0, 0.3);
  border-radius: calc(var(--base) * 0.5);
  padding: calc(var(--base) * 0.6) calc(var(--base) * 2);
  white-space: nowrap;
  animation: sg-hint-fade-in 0.4s ease;
}

/* ═══════════════════════════════════════════════════════════════════
   PLAYER CARD SCREEN
═══════════════════════════════════════════════════════════════════ */
#player-card-screen {
  position: fixed;
  inset: 0;
  z-index: 10001;
  background: #000;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding: 20px 0;
}
.pc-content {
  position: relative;
  width: 90%;
  max-width: 520px;
  margin: 0 auto;
  padding: 24px 20px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  background: linear-gradient(145deg, #1a1a2e 0%, #16213e 50%, #0f3460 100%);
  border: 1px solid rgba(255, 215, 64, 0.3);
  border-radius: 16px;
  box-shadow:
    0 0 40px rgba(255, 215, 64, 0.15),
    0 20px 60px rgba(0, 0, 0, 0.6);
}
.pc-preview-box {
  border: 1px solid rgba(255, 215, 64, 0.25);
  border-radius: 12px;
  overflow: hidden;
}
/* Make profile-nameplate fill the preview box width with no margin */
.pc-nameplate-override {
  width: 100%;
  margin: 0;
  border-radius: 0;
  border: none;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}
.pc-preview-stats {
  padding: 4px 12px 8px;
}
.pc-preview-stats:empty {
  display: none;
}

.pc-header {
  display: flex;
  align-items: center;
  gap: 12px;
}
.pc-back-btn {
  font-family: 'Teko', sans-serif;
  font-size: 15px;
  font-weight: 600;
  color: #ffd740;
  background: none;
  border: 1px solid rgba(255, 215, 64, 0.4);
  border-radius: 6px;
  padding: 6px 14px;
  cursor: pointer;
  transition: all 0.15s ease;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  flex-shrink: 0;
}
.pc-back-btn:hover {
  background: rgba(255, 215, 64, 0.1);
}
.pc-title {
  font-family: 'Teko', sans-serif;
  font-size: 28px;
  font-weight: 700;
  letter-spacing: 3px;
  text-transform: uppercase;
  background: linear-gradient(135deg, #ffd740, #ffab00);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  margin: 0;
}
.pc-rule {
  width: 100%;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(201, 168, 76, 0.4), transparent);
  margin-bottom: 4px;
}
.pc-description {
  font-family: 'Teko', sans-serif;
  font-size: 13px;
  font-weight: 400;
  color: rgba(255, 255, 255, 0.4);
  letter-spacing: 0.3px;
  text-align: center;
  margin: 10px 16px 16px;
  line-height: 1.5;
}
.pc-section-label {
  font-family: 'Teko', sans-serif;
  font-size: 16px;
  font-weight: 600;
  letter-spacing: 2px;
  padding-bottom: 6px;
  border-bottom: 1px solid rgba(255, 215, 64, 0.15);
  margin-bottom: 10px;
  background: linear-gradient(135deg, #ffd740, #ffab00);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}
/* Privacy toggle rows */
.pc-privacy-section-header {
  font-family: 'Teko', sans-serif;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: #c9a84c;
  padding: 14px 0 4px;
  border-top: 1px solid rgba(201, 168, 76, 0.2);
  margin-top: 4px;
}
.pc-privacy-section-header:first-child {
  padding-top: 0;
  border-top: none;
  margin-top: 0;
}
.pc-privacy-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 6px 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}
.pc-privacy-row:last-child { border-bottom: none; }
.pc-privacy-label {
  font-family: 'Teko', sans-serif;
  font-size: 16px;
  font-weight: 600;
  color: #fff;
  letter-spacing: 0.5px;
}
.pc-privacy-sublabel {
  font-family: 'Teko', sans-serif;
  font-size: 13px;
  font-weight: 400;
  color: rgba(255, 255, 255, 0.4);
  letter-spacing: 0.3px;
  text-transform: uppercase;
}
/* Toggle switch */
.pc-toggle {
  position: relative;
  width: calc(var(--base) * 4.2);
  height: calc(var(--base) * 2.4);
  flex-shrink: 0;
}
.pc-toggle input { opacity: 0; width: 0; height: 0; }
.pc-toggle-track {
  position: absolute;
  inset: 0;
  background: rgba(255, 255, 255, 0.12);
  border-radius: 999px;
  cursor: pointer;
  transition: background 0.2s;
}
.pc-toggle input:checked + .pc-toggle-track {
  background: var(--color-gold, #ffd700);
}
.pc-toggle-thumb {
  position: absolute;
  top: calc(var(--base) * 0.25);
  left: calc(var(--base) * 0.25);
  width: calc(var(--base) * 1.9);
  height: calc(var(--base) * 1.9);
  background: #fff;
  border-radius: 50%;
  transition: transform 0.2s;
  pointer-events: none;
}
.pc-toggle input:checked ~ .pc-toggle-thumb {
  transform: translateX(calc(var(--base) * 1.8));
}
/* Full stats list */
.pc-stat-row {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  padding: 6px 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}
.pc-stat-row:last-child { border-bottom: none; }
.pc-stat-value {
  font-family: 'Teko', sans-serif;
  font-size: 16px;
  font-weight: 600;
  color: #fff;
}
.pc-stat-value.pending {
  color: rgba(255, 255, 255, 0.3);
}
.pc-stat-label {
  font-family: 'Teko', sans-serif;
  font-size: 14px;
  font-weight: 400;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.6);
}
.pc-stat-header {
  margin-top: 10px;
  border-bottom: 1px solid rgba(255, 215, 64, 0.2);
}
.pc-stat-header .pc-stat-label {
  background: linear-gradient(135deg, #ffd740, #ffab00);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  font-weight: 600;
  font-size: 15px;
}
.pc-stat-header .pc-stat-value {
  color: #ffd740;
}

/* ═══════════════════════════════════════════════════════════════════
   IN-GAME PLAYER PROFILE POPUP
═══════════════════════════════════════════════════════════════════ */
#player-popup {
  position: fixed;
  inset: 0;
  z-index: 800;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: calc(var(--base) * 2);
}
.player-popup-bg {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.7);
}
.player-popup-card {
  position: relative;
  background: #0e0e1c;
  border: 1px solid rgba(255, 215, 0, 0.3);
  border-radius: calc(var(--base) * 1.2);
  width: 100%;
  max-width: 340px;
  max-height: 80vh;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  box-shadow: 0 8px 40px rgba(0, 0, 0, 0.7);
  animation: popup-in 0.18s ease-out;
}
@keyframes popup-in {
  from { transform: scale(0.92); opacity: 0; }
  to   { transform: scale(1);    opacity: 1; }
}
.player-popup-close {
  position: absolute;
  top: calc(var(--base) * 0.8);
  right: calc(var(--base) * 1);
  background: none;
  border: none;
  color: rgba(255, 255, 255, 0.5);
  font-size: calc(var(--base) * 2);
  cursor: pointer;
  z-index: 10;
  line-height: 1;
  padding: 0 calc(var(--base) * 0.4);
}
.player-popup-close:hover { color: #fff; }
/* Nameplate — uses profile-nameplate component, overrides sizing/radius for popup context */
.player-popup-nameplate-override {
  width: 100%;
  margin: 0;
  border-radius: calc(var(--base) * 1.2) calc(var(--base) * 1.2) 0 0;
  border: none;
  --np-base: 28px;
}
/* Sections */
.player-popup-section {
  border-top: 1px solid rgba(255, 255, 255, 0.07);
  padding: calc(var(--base) * 1.2) calc(var(--base) * 1.5);
}
.player-popup-section-label {
  font-family: var(--font-display);
  font-size: calc(var(--base) * 1);
  color: rgba(255, 255, 255, 0.35);
  letter-spacing: 0.1em;
  margin-bottom: calc(var(--base) * 0.8);
}
/* Theme badge */
.player-popup-theme-badge {
  display: inline-block;
  font-family: var(--font-display);
  font-size: calc(var(--base) * 1.2);
  color: var(--color-gold, #ffd700);
  background: rgba(255, 215, 0, 0.08);
  border: 1px solid rgba(255, 215, 0, 0.25);
  border-radius: calc(var(--base) * 0.5);
  padding: calc(var(--base) * 0.3) calc(var(--base) * 0.8);
}
/* Themes owned list */
.player-popup-themes-list {
  display: flex;
  flex-wrap: wrap;
  gap: calc(var(--base) * 0.6);
}
.player-popup-theme-chip {
  font-family: var(--font-display);
  font-size: calc(var(--base) * 1.05);
  color: rgba(255, 255, 255, 0.75);
  background: rgba(255, 255, 255, 0.07);
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: calc(var(--base) * 0.4);
  padding: calc(var(--base) * 0.25) calc(var(--base) * 0.7);
}
.player-popup-theme-chip.active {
  color: var(--color-gold, #ffd700);
  border-color: rgba(255, 215, 0, 0.4);
  background: rgba(255, 215, 0, 0.08);
}
/* Stats rows */
.player-popup-stat-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: calc(var(--base) * 0.55) 0;
  font-family: var(--font-body, 'Raleway', sans-serif);
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}
.player-popup-stat-row:last-child { border-bottom: none; }
.player-popup-stat-label {
  font-size: calc(var(--base) * 1.15);
  color: rgba(255, 255, 255, 0.55);
}
.player-popup-stat-value {
  font-size: calc(var(--base) * 1.2);
  color: #fff;
  font-weight: 600;
}
.player-popup-stat-value.hidden {
  color: rgba(255, 255, 255, 0.2);
  font-weight: 400;
}

/* ═══════════════════════════════════════════════════════════════════ */
/* TUTORIAL WELCOME MODAL                                               */
/* ═══════════════════════════════════════════════════════════════════ */

#tut-welcome-overlay {
  position: fixed;
  inset: 0;
  z-index: 31000;
  background: rgba(0, 0, 0, 0.88);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  animation: tut-welcome-fade-in 0.3s ease;
}

@keyframes tut-welcome-fade-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}

#tut-welcome-card {
  background: linear-gradient(160deg, #0d0d1b 0%, #131325 100%);
  border: 1px solid rgba(201, 168, 76, 0.35);
  border-radius: 16px;
  padding: 28px 24px 24px;
  max-width: 380px;
  width: 100%;
  box-shadow:
    0 0 60px rgba(0, 0, 0, 0.9),
    inset 0 1px 0 rgba(255, 255, 255, 0.07),
    0 0 30px rgba(201, 168, 76, 0.08);
  text-align: center;
}

.tut-welcome-title {
  font-family: var(--font-display, 'Teko', sans-serif);
  font-size: 32px;
  font-weight: 700;
  color: #fff;
  line-height: 1.1;
  margin-bottom: 10px;
  text-shadow: 0 0 24px rgba(201, 168, 76, 0.35);
}

.tut-welcome-divider {
  width: 60px;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(201,168,76,0.6), transparent);
  margin: 0 auto 14px;
}

.tut-welcome-body {
  font-family: 'Raleway', sans-serif;
  font-size: 14px;
  color: rgba(255, 255, 255, 0.72);
  line-height: 1.55;
  margin-bottom: 24px;
}

.tut-welcome-rewards {
  display: flex;
  gap: 14px;
  justify-content: center;
  margin-bottom: 24px;
}

.tut-reward-pill {
  flex: 1;
  max-width: 140px;
  padding: 16px 10px 14px;
  border-radius: 12px;
  border: 1px solid;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
  position: relative;
  overflow: hidden;
}

.tut-reward-pill::before {
  content: '';
  position: absolute;
  top: 0; left: -10%; width: 120%; height: 40%;
  background: linear-gradient(180deg, rgba(255,255,255,0.07) 0%, transparent 100%);
  border-radius: 12px 12px 50% 50%;
  pointer-events: none;
}

.tut-reward-pill-chips {
  border-color: rgba(76, 175, 80, 0.4);
  background: rgba(76, 175, 80, 0.07);
  box-shadow: 0 4px 16px rgba(76, 175, 80, 0.1);
}

.tut-reward-pill-jewels {
  border-color: rgba(0, 200, 255, 0.4);
  background: rgba(0, 200, 255, 0.07);
  box-shadow: 0 4px 16px rgba(0, 200, 255, 0.1);
}

.tut-reward-icon {
  font-size: 26px;
  line-height: 1;
}

.tut-reward-amount {
  font-family: 'Teko', sans-serif;
  font-size: 38px;
  font-weight: 600;
  line-height: 1;
}

.tut-reward-pill-chips .tut-reward-amount { color: #4caf50; }
.tut-reward-pill-jewels .tut-reward-amount { color: #00c8ff; }

.tut-reward-label {
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.5);
}

.tut-welcome-btns {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.tut-welcome-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 11px 16px;
  border-radius: 8px;
  border: none;
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 0.06em;
  cursor: pointer;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.tut-welcome-btn:hover { transform: translateY(-1px); }
.tut-welcome-btn:active { transform: translateY(0); }

.tut-welcome-btn-google {
  background: #fff;
  color: #1a1a1a;
  box-shadow: 0 2px 8px rgba(0,0,0,0.4);
}

.tut-welcome-btn-apple {
  background: #1a1a1a;
  color: #fff;
  border: 1px solid rgba(255,255,255,0.2);
  box-shadow: 0 2px 8px rgba(0,0,0,0.4);
}

.tut-welcome-dismiss {
  font-family: 'Raleway', sans-serif;
  font-size: 12px;
  color: rgba(255, 255, 255, 0.35);
  background: none;
  border: none;
  cursor: pointer;
  padding: 6px;
  text-decoration: underline;
  transition: color 0.15s ease;
}

.tut-welcome-dismiss:hover { color: rgba(255, 255, 255, 0.6); }

/* ── Report Player Button (player popup) ── */
.player-popup-report-btn {
  position: absolute;
  bottom: 8px;
  right: 10px;
  background: none;
  border: none;
  color: rgba(255, 255, 255, 0.28);
  font-family: 'Raleway', sans-serif;
  font-size: 11px;
  letter-spacing: 0.04em;
  cursor: pointer;
  padding: 2px 4px;
  transition: color 0.15s ease;
  z-index: 2;
}
.player-popup-report-btn:hover { color: rgba(255, 100, 100, 0.7); }

/* ── Report Modal ── */
#report-overlay {
  position: fixed;
  inset: 0;
  z-index: 31000;
  background: rgba(0, 0, 0, 0.88);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  animation: tut-welcome-fade-in 0.3s ease;
}
#report-card {
  background: linear-gradient(160deg, #0d0d1b 0%, #131325 100%);
  border: 1px solid rgba(201, 168, 76, 0.35);
  border-radius: 16px;
  padding: 28px 24px 24px;
  max-width: 380px;
  width: 100%;
  box-shadow: 0 0 60px rgba(0,0,0,0.9), inset 0 1px 0 rgba(255,255,255,0.07);
  text-align: center;
}
.report-category-group {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 14px;
  text-align: left;
}
.report-category-label {
  font-family: 'Raleway', sans-serif;
  font-size: 13px;
  color: rgba(255, 255, 255, 0.75);
  display: flex;
  align-items: flex-start;
  gap: 8px;
  cursor: pointer;
  line-height: 1.4;
}
.report-category-label input { margin-top: 2px; flex-shrink: 0; accent-color: rgba(201, 168, 76, 0.9); }
#report-note {
  width: 100%;
  box-sizing: border-box;
  background: rgba(255, 255, 255, 0.07);
  border: 1px solid rgba(201, 168, 76, 0.3);
  border-radius: 8px;
  color: #fff;
  font-family: 'Raleway', sans-serif;
  font-size: 13px;
  padding: 8px 12px;
  resize: none;
  outline: none;
}
#report-note:focus { border-color: rgba(201, 168, 76, 0.7); }
#report-error {
  font-family: 'Raleway', sans-serif;
  font-size: 12px;
  color: #ff6b6b;
  margin-top: 6px;
  min-height: 16px;
}


/* ── Bug Report Modal ── */
#bug-report-overlay {
  position: fixed;
  inset: 0;
  z-index: 31000;
  background: rgba(0, 0, 0, 0.88);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  animation: tut-welcome-fade-in 0.3s ease;
}
#bug-report-card {
  background: linear-gradient(160deg, #0d0d1b 0%, #131325 100%);
  border: 1px solid rgba(201, 168, 76, 0.35);
  border-radius: 16px;
  padding: 28px 24px 24px;
  max-width: 380px;
  width: 100%;
  box-shadow: 0 0 60px rgba(0,0,0,0.9), inset 0 1px 0 rgba(255,255,255,0.07);
  text-align: center;
}
#bug-description {
  width: 100%;
  box-sizing: border-box;
  background: rgba(255, 255, 255, 0.07);
  border: 1px solid rgba(201, 168, 76, 0.3);
  border-radius: 8px;
  color: #fff;
  font-family: 'Raleway', sans-serif;
  font-size: 13px;
  padding: 8px 12px;
  resize: none;
  outline: none;
}
#bug-description:focus { border-color: rgba(201, 168, 76, 0.7); }
.bug-chaos-note {
  display: none;
  background: rgba(201, 168, 76, 0.08);
  border: 1px solid rgba(201, 168, 76, 0.25);
  border-radius: 8px;
  padding: 10px 12px;
  margin-bottom: 10px;
  font-family: 'Raleway', sans-serif;
  font-size: 12px;
  color: rgba(255, 255, 255, 0.65);
  text-align: left;
  line-height: 1.6;
}
.bug-chaos-note--visible { display: block; }
.bug-chaos-note span { display: block; padding-left: 2px; }

/* ── Username Picker Modal ── */
#tut-username-overlay {
  position: fixed;
  inset: 0;
  z-index: 31000;
  background: rgba(0, 0, 0, 0.88);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  animation: tut-welcome-fade-in 0.3s ease;
}

#tut-username-card {
  background: linear-gradient(160deg, #0d0d1b 0%, #131325 100%);
  border: 1px solid rgba(201, 168, 76, 0.35);
  border-radius: 16px;
  padding: 28px 24px 24px;
  max-width: 380px;
  width: 100%;
  box-shadow:
    0 0 60px rgba(0, 0, 0, 0.9),
    inset 0 1px 0 rgba(255, 255, 255, 0.07),
    0 0 30px rgba(201, 168, 76, 0.08);
  text-align: center;
}

#tut-username-input {
  width: 100%;
  box-sizing: border-box;
  background: rgba(255, 255, 255, 0.07);
  border: 1px solid rgba(201, 168, 76, 0.35);
  border-radius: 8px;
  color: #fff;
  font-family: 'Raleway', sans-serif;
  font-size: 16px;
  padding: 10px 14px;
  margin-bottom: 8px;
  outline: none;
  transition: border-color 0.15s ease;
}
#tut-username-input:focus { border-color: rgba(201, 168, 76, 0.75); }
#tut-username-input::placeholder { color: rgba(255, 255, 255, 0.3); }

#tut-username-error {
  display: none;
  font-family: 'Raleway', sans-serif;
  font-size: 12px;
  color: #ff6b6b;
  margin-bottom: 10px;
  min-height: 16px;
}

#tut-username-skip-msg {
  display: none;
  font-family: 'Raleway', sans-serif;
  font-size: 13px;
  color: rgba(255, 255, 255, 0.7);
  line-height: 1.6;
}
#tut-username-skip-msg strong { color: rgba(201, 168, 76, 0.9); }
#tut-username-skip-msg .tut-welcome-btn { margin-top: 16px; width: 100%; }

/* ═══════════════════════════════════════════════════════════════════ */
/* TUTORIAL SPOTLIGHT                                                   */
/* ═══════════════════════════════════════════════════════════════════ */

#tutorial-spotlight {
  position: fixed;
  inset: 0;
  z-index: 25000;
  pointer-events: all;
  cursor: pointer;
}
#tutorial-spotlight.hidden {
  display: none;
}

/* The cutout — box-shadow trick: huge spread creates the dark scrim,
   the element itself is the "hole" punched through it */
#tutorial-spotlight-cutout {
  position: absolute;
  border-radius: 10px;
  box-shadow:
    0 0 0 9999px rgba(0, 0, 0, 0.78),
    0 0 0 3px rgba(201, 168, 76, 0.85),
    0 0 16px 4px rgba(201, 168, 76, 0.35);
  transition: top 0.25s ease, left 0.25s ease, width 0.25s ease, height 0.25s ease;
  pointer-events: none;
}

/* Full-scrim mode — no visible cutout, just the dark overlay */
#tutorial-spotlight.full-scrim #tutorial-spotlight-cutout {
  box-shadow: 0 0 0 9999px rgba(0, 0, 0, 0.78);
  width: 0 !important;
  height: 0 !important;
}

#tutorial-tooltip {
  position: absolute;
  background: rgba(10, 10, 18, 0.96);
  border: 1px solid rgba(201, 168, 76, 0.45);
  border-radius: 10px;
  padding: 12px 16px;
  max-width: 260px;
  pointer-events: none;
  transition: top 0.25s ease, left 0.25s ease;
}
#tutorial-tooltip.tut-centered {
  transform: translate(-50%, -50%);
  text-align: center;
}
#tutorial-tooltip p {
  font-family: 'Raleway', sans-serif;
  font-size: 14px;
  color: #fff;
  margin: 0;
  line-height: 1.5;
}
/* Small tap-to-continue hint */
#tutorial-tooltip::after {
  content: 'Tap anywhere to continue';
  display: block;
  margin-top: 8px;
  font-family: 'Raleway', sans-serif;
  font-size: 11px;
  color: rgba(201, 168, 76, 0.7);
  letter-spacing: 0.3px;
}

/* ═══════════════════════════════════════════════════════════════════
   Muck / Show Cards — CSS classes
   ═══════════════════════════════════════════════════════════════════ */

/* Grayed-out hero cards shown on table/drawer after folding — tappable */
.card--muck-toggle {
  opacity: 0.45;
  filter: grayscale(0.6);
  cursor: pointer;
  transition: opacity 0.15s ease, filter 0.15s ease, box-shadow 0.15s ease;
}

/* Card selected for "show on muck" — highlighted */
.card--marked-show {
  opacity: 1;
  filter: grayscale(0);
  box-shadow: 0 0 8px 2px rgba(255, 215, 0, 0.7);
}

/* Revealed card on placement screen — shown by a folded player */
.card--shown-reveal {
  opacity: 1;
  filter: none;
}

/* Drawer muck cards container */
#drawer-muck-cards {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 8px 0;
}
#drawer-muck-cards:empty {
  display: none;
}
.drawer-muck__label {
  font-family: 'Raleway', sans-serif;
  font-size: 12px;
  color: rgba(255, 255, 255, 0.6);
  letter-spacing: 0.5px;
}
.drawer-muck__cards {
  display: flex;
  gap: 8px;
  justify-content: center;
}

/* Muck hint label below hero cards on table */
.muck-hint {
  position: absolute;
  bottom: calc(var(--base) * -1.2);
  left: 50%;
  transform: translateX(-50%);
  font-family: 'Raleway', sans-serif;
  font-size: calc(var(--base) * 0.75);
  color: rgba(255, 255, 255, 0.55);
  text-align: center;
  letter-spacing: 0.3px;
  pointer-events: none;
  white-space: nowrap;
}

/* Shown cards on placement screen — actual card elements */
.placement-shown-cards-row {
  display: flex;
  gap: 4px;
  justify-content: center;
  padding: 4px 0;
}
.placement-shown-cards-row .card {
  width: calc(var(--base) * 3);
  height: calc(var(--base) * 4.2);
  font-size: calc(var(--base) * 0.7);
}