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

body {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  background: #000;
  color: #e8e4dc;
  min-height: 100vh;
  overflow-x: hidden;
  font-size: 15px;
  font-weight: 400;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased
}

body::before {
  content: '';
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: radial-gradient(ellipse at 20% 50%, rgba(40, 20, 10, 0.15) 0%, transparent 50%), radial-gradient(ellipse at 80% 50%, rgba(10, 20, 40, 0.1) 0%, transparent 50%), repeating-linear-gradient(0deg, transparent, transparent 40px, rgba(255, 255, 255, 0.008) 40px, rgba(255, 255, 255, 0.008) 41px), repeating-linear-gradient(90deg, transparent, transparent 40px, rgba(255, 255, 255, 0.008) 40px, rgba(255, 255, 255, 0.008) 41px);
  pointer-events: none;
  z-index: 0
}

.hidden {
  display: none !important
}

/* ===== Site Shell (Play / Range Trainer / Learn) ===== */
#site-shell {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  flex-direction: column;
  z-index: 100;
  background: #0a0a0a;
  transition: background 1s ease
}

/* logo | tabs | auth-actions, in a 3-column grid whose middle column is
   auto-sized and independently centered (justify-self on #site-nav-tabs) -
   this is what actually centers the tab group (and therefore Play, its
   middle tab) regardless of how wide the logo or a logged-in auth cluster
   are, the same technique an earlier, narrower version of this nav already
   proved out. minmax(min-content, 1fr) on the side columns keeps each at
   least as wide as its own content (logo / auth actions only now, both
   fairly narrow) while still sharing any leftover space evenly. */
#site-nav {
  flex-shrink: 0;
  display: grid;
  grid-template-columns: minmax(min-content, 1fr) auto minmax(min-content, 1fr);
  align-items: center;
  gap: 20px;
  padding: 14px 32px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
  background: #000;
  position: relative;
  z-index: 2
}

#site-logo {
  justify-self: start;
  font-family: 'Playfair Display', Georgia, serif;
  font-size: 1.15rem;
  font-weight: 700;
  color: #e8e4dc;
  text-decoration: none;
  letter-spacing: 0.5px;
  flex-shrink: 0
}

/* overflow-x:auto (scrollbar hidden) is a real safety net, not just
   tightened spacing - if the group is ever too wide for the space left
   over between the logo and auth columns, it scrolls instead of visually
   breaking, so overlap stays structurally impossible even if more tabs are
   added later. */
#site-nav-tabs {
  justify-self: center;
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
  overflow-x: auto;
  scrollbar-width: none
}
#site-nav-tabs::-webkit-scrollbar {
  display: none
}

.site-tab {
  flex-shrink: 0;
  font-family: 'Inter', sans-serif;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.5px;
  padding: 8px 14px;
  border: 1px solid transparent;
  border-radius: 0;
  background: transparent;
  color: rgba(255, 255, 255, 0.4);
  cursor: pointer;
  transition: all 0.15s;
  white-space: nowrap
}

.site-tab:hover {
  color: rgba(255, 255, 255, 0.7);
  border-color: rgba(255, 255, 255, 0.1)
}

.site-tab.active {
  background: #c9a84c;
  border-color: #c9a84c;
  color: #0d0d1a
}

#site-nav-actions {
  justify-self: end;
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0
}

@media (max-width: 1400px) {
  #site-nav {
    gap: 12px;
    padding: 14px 18px
  }
  #site-nav-tabs {
    gap: 4px
  }
  .site-tab {
    padding: 8px 10px
  }
}

.site-page {
  flex: 1;
  display: flex;
  align-items: safe center;
  justify-content: safe center;
  overflow-y: auto;
  overflow-x: hidden;
  position: relative;
  z-index: 1;
  padding: 20px
}

.site-page-title {
  font-family: 'Playfair Display', Georgia, serif;
  font-size: 1.8rem;
  font-weight: 700;
  color: #e8e4dc;
  margin-bottom: 14px;
  text-align: center
}

#home-bg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: radial-gradient(ellipse at 30% 40%, rgba(201, 168, 76, 0.04) 0%, transparent 50%), radial-gradient(ellipse at 70% 60%, rgba(255, 255, 255, 0.02) 0%, transparent 50%);
  pointer-events: none;
  transition: all 0.8s ease
}

/* A second layer that stays constant across every difficulty color, unlike
   #home-bg's own gradient above it - a faint suit watermark, a fine grid,
   a fractal-noise grain, and a few soft diagonal veins, together reading as
   a slab of polished dark marble rather than flat black. Oversized (20px
   past every edge) and mouse-parallax-shifted via --parallax-x/-y (set from
   JS, see setupHomeBgMouseLight) so a small shift never reveals an empty
   edge. */
#home-bg::before {
  content: '';
  position: absolute;
  top: -20px;
  left: -20px;
  width: calc(100% + 40px);
  height: calc(100% + 40px);
  background-image:
    repeating-linear-gradient(0deg, transparent, transparent 38px, rgba(255, 255, 255, 0.012) 38px, rgba(255, 255, 255, 0.012) 39px),
    repeating-linear-gradient(90deg, transparent, transparent 38px, rgba(255, 255, 255, 0.012) 38px, rgba(255, 255, 255, 0.012) 39px),
    linear-gradient(124deg, transparent 0%, transparent 37%, rgba(255, 255, 255, 0.05) 38.5%, rgba(255, 255, 255, 0.02) 40%, transparent 41.5%, transparent 100%),
    linear-gradient(38deg, transparent 0%, transparent 56%, rgba(255, 255, 255, 0.04) 57.5%, rgba(255, 255, 255, 0.018) 59%, transparent 61%, transparent 100%),
    linear-gradient(162deg, transparent 0%, transparent 21%, rgba(255, 255, 255, 0.035) 22.5%, transparent 24%, transparent 100%),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.012 0.04' numOctaves='3' seed='7'/%3E%3CfeColorMatrix type='matrix' values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 0.05 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Ctext x='14' y='46' font-size='30' fill='white' fill-opacity='0.022'%3E%E2%99%A0%3C/text%3E%3Ctext x='96' y='96' font-size='30' fill='white' fill-opacity='0.018'%3E%E2%99%A5%3C/text%3E%3Ctext x='36' y='138' font-size='30' fill='white' fill-opacity='0.018'%3E%E2%99%A6%3C/text%3E%3Ctext x='116' y='34' font-size='30' fill='white' fill-opacity='0.022'%3E%E2%99%A3%3C/text%3E%3C/svg%3E");
  transform: translate(var(--parallax-x, 0px), var(--parallax-y, 0px));
  transition: transform 0.2s ease-out
}

#site-shell[data-diff="easy"] {
  background: linear-gradient(135deg, #0a1a0a 0%, #0a2a0a 30%, #0a1a0a 60%, #0a0a0a 100%)
}

#site-shell[data-diff="easy"] #home-bg {
  background: radial-gradient(ellipse at 30% 40%, rgba(76, 175, 80, 0.15) 0%, transparent 50%), radial-gradient(ellipse at 70% 60%, rgba(76, 175, 80, 0.05) 0%, transparent 50%)
}

#site-shell[data-diff="medium"] {
  background: linear-gradient(135deg, #1a1a0a 0%, #2a2a0a 30%, #1a1a0a 60%, #0a0a0a 100%)
}

#site-shell[data-diff="medium"] #home-bg {
  background: radial-gradient(ellipse at 30% 40%, rgba(255, 193, 7, 0.15) 0%, transparent 50%), radial-gradient(ellipse at 70% 60%, rgba(255, 193, 7, 0.05) 0%, transparent 50%)
}

#site-shell[data-diff="hard"] {
  background: linear-gradient(135deg, #1a0a0a 0%, #2a0a0a 30%, #1a0a0a 60%, #0a0a0a 100%)
}

#site-shell[data-diff="hard"] #home-bg {
  background: radial-gradient(ellipse at 30% 40%, rgba(239, 83, 80, 0.15) 0%, transparent 50%), radial-gradient(ellipse at 70% 60%, rgba(239, 83, 80, 0.05) 0%, transparent 50%)
}

#site-shell[data-diff="expert"] {
  background: linear-gradient(135deg, #1a1a2a 0%, #2a2a3a 30%, #1a1a2a 60%, #0a0a0a 100%)
}

#site-shell[data-diff="expert"] #home-bg {
  background: radial-gradient(ellipse at 30% 40%, rgba(200, 200, 255, 0.10) 0%, transparent 50%), radial-gradient(ellipse at 70% 60%, rgba(255, 255, 255, 0.04) 0%, transparent 50%)
}

#home-content {
  text-align: center;
  padding: 26px 40px 30px;
  max-width: 780px;
  width: 92%;
  position: relative;
  z-index: 1
}

/* Thin, theme-colored scrollbar for .site-page's single scroll container
   (Firefox + WebKit) instead of the default chunky browser scrollbar. */
.site-page {
  scrollbar-width: thin;
  scrollbar-color: rgba(201, 168, 76, 0.35) transparent
}

.site-page::-webkit-scrollbar {
  width: 7px
}

.site-page::-webkit-scrollbar-track {
  background: transparent
}

.site-page::-webkit-scrollbar-thumb {
  background: rgba(201, 168, 76, 0.3);
  border-radius: 0
}

.site-page::-webkit-scrollbar-thumb:hover {
  background: rgba(201, 168, 76, 0.5)
}

#home-deco {
  font-size: 2.1rem;
  letter-spacing: 15px;
  color: rgba(255, 255, 255, 0.06);
  margin-bottom: 2px;
  font-weight: 300
}

#home-title {
  font-family: 'Playfair Display', Georgia, serif;
  font-size: 2.6rem;
  font-weight: 700;
  color: #e8e4dc;
  letter-spacing: 0.5px;
  margin-bottom: 2px;
  text-shadow: 0 0 30px rgba(201, 168, 76, 0.1)
}

#home-tagline {
  font-size: 0.7rem;
  color: rgba(255, 255, 255, 0.6);
  letter-spacing: 2px;
  font-weight: 300;
  margin-bottom: 14px;
  font-style: italic
}

#home-subtitle {
  font-size: 0.85rem;
  color: rgba(255, 255, 255, 0.65);
  margin-bottom: 14px
}

#guest-save-progress-hint {
  font-size: 0.72rem;
  color: rgba(255, 255, 255, 0.7);
  background: rgba(201, 168, 76, 0.06);
  border: 1px solid rgba(201, 168, 76, 0.2);
  border-radius: 0;
  padding: 8px 14px;
  margin-bottom: 16px
}

#guest-save-progress-hint button {
  background: none;
  border: none;
  color: #c9a84c;
  font-size: 0.72rem;
  font-weight: 600;
  text-decoration: underline;
  cursor: pointer;
  padding: 0
}

#guest-save-progress-hint button:hover {
  color: #dbb856
}

#home-top-row {
  display: flex;
  align-items: flex-end;
  gap: 12px;
  margin-bottom: 14px;
  text-align: left
}

#username-fg {
  flex: 1
}

#home-rank-hero {
  flex: 1;
  display: flex;
  align-items: center;
  gap: 14px;
  text-align: left;
  cursor: pointer;
  border-radius: 0;
  transition: background 0.15s ease
}

#home-rank-hero:hover,
#home-rank-hero:focus-visible {
  background: rgba(255, 255, 255, 0.04)
}

#home-rank-hero-badge {
  flex-shrink: 0;
  width: 72px;
  height: 72px;
  display: flex;
  align-items: center;
  justify-content: center
}

#home-rank-hero-info {
  flex: 1;
  min-width: 0
}

#home-rank-hero-label {
  font-family: 'Playfair Display', serif;
  font-size: 1.05rem;
  color: #e8e4dc;
  margin-bottom: 6px
}

#home-rank-hero-xp-bar-bg {
  width: 100%;
  height: 8px;
  border-radius: 0;
  background: rgba(255, 255, 255, 0.08);
  overflow: hidden
}

#home-rank-hero-xp-bar-fill {
  height: 100%;
  width: 0%;
  border-radius: 0;
  background: linear-gradient(90deg, #a8863a, #c9a84c);
  transition: width 0.6s ease
}

#home-rank-hero-xp-text {
  margin-top: 6px;
  font-size: 0.7rem;
  color: rgba(255, 255, 255, 0.65)
}

#difficulty-label {
  font-size: 0.65rem;
  text-transform: uppercase;
  letter-spacing: 2px;
  color: rgba(255, 255, 255, 0.65);
  font-weight: 500;
  margin-bottom: 10px;
  text-align: left
}

.fg {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
  width: 100%
}

.fg label {
  font-size: 0.6rem;
  text-transform: uppercase;
  letter-spacing: 1.5px;
  color: rgba(255, 255, 255, 0.25);
  font-weight: 500
}

.fg input,
.fg select {
  width: 100%;
  padding: 10px 14px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 0;
  background: rgba(0, 0, 0, 0.5);
  color: #e8e4dc;
  font-family: 'Inter', sans-serif;
  font-size: 0.9rem;
  outline: none;
  transition: border-color 0.2s
}

.fg input:focus,
.fg select:focus {
  border-color: rgba(255, 255, 255, 0.3);
  background: rgba(0, 0, 0, 0.7)
}

.fg select {
  cursor: pointer;
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='rgba(255,255,255,0.4)' d='M6 8L0 0h12z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
  padding-right: 32px
}

.fg select option {
  background: #1a1a1a;
  color: #e8e4dc
}

.sec-btn {
  font-family: 'Inter', sans-serif;
  font-size: 0.7rem;
  font-weight: 500;
  letter-spacing: 0.5px;
  padding: 8px 16px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 0;
  background: transparent;
  color: rgba(255, 255, 255, 0.35);
  cursor: pointer;
  transition: all 0.2s;
  width: 100%
}

.sec-btn:hover {
  border-color: rgba(255, 255, 255, 0.2);
  color: rgba(255, 255, 255, 0.6)
}

#home-actions {
  display: flex;
  gap: 10px;
  flex-direction: column;
  width: 100%
}

#home-config-row {
  display: flex;
  gap: 8px;
  flex-shrink: 0
}

#home-config-row .config-btn {
  width: auto;
  padding: 10px 16px;
  white-space: nowrap
}

.icon-btn {
  width: 38px !important;
  padding: 8px !important;
  font-size: 0.85rem;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center
}

/* Higher-contrast than the base .sec-btn (which is a fairly faded
   rgba(255,255,255,0.35) by design for secondary actions) - these two sit
   right at the top of the home screen and need to read clearly at a
   glance, not blend into the background. */
#btn-toggle-music-home,
#home-config-row .config-btn {
  color: rgba(255, 255, 255, 0.8);
  border-color: rgba(255, 255, 255, 0.28);
  background: rgba(255, 255, 255, 0.06)
}
#btn-toggle-music-home:hover,
#home-config-row .config-btn:hover {
  color: #fff;
  border-color: rgba(255, 255, 255, 0.45);
  background: rgba(255, 255, 255, 0.1)
}

.primary-action-btn {
  font-family: 'Inter', sans-serif;
  font-size: 0.85rem;
  font-weight: 600;
  letter-spacing: 1px;
  padding: 12px 40px;
  border: none;
  border-radius: 0;
  cursor: pointer;
  transition: all 0.2s;
  text-transform: uppercase;
  width: 100%
}

.primary-action-btn:disabled {
  background: rgba(255, 255, 255, 0.06) !important;
  color: rgba(255, 255, 255, 0.3) !important;
  cursor: not-allowed;
  box-shadow: none !important
}

.unranked-btn {
  background: linear-gradient(135deg, #1f9d6b, #167a52);
  color: #f0fff8
}

.unranked-btn:hover {
  background: linear-gradient(135deg, #26b57c, #1c9260);
  box-shadow: 0 4px 20px rgba(31, 157, 107, 0.3)
}

.ranked-btn {
  background: linear-gradient(135deg, #c9a84c, #a8863a);
  color: #0d0d1a
}

.ranked-btn:hover {
  background: linear-gradient(135deg, #dbb856, #b8953f);
  box-shadow: 0 4px 20px rgba(201, 168, 76, 0.3)
}

/* ===== Difficulty Boxes ===== */
#difficulty-boxes {
  display: flex;
  flex-direction: column;
  gap: 8px;
  width: 100%;
  margin-bottom: 14px
}

.diff-box {
  padding: 12px 24px;
  border-radius: 0;
  border: 3px solid #000;
  text-align: left;
  cursor: pointer;
  transition: all 0.25s;
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 4px
}

.diff-box-head {
  display: flex;
  align-items: center;
  gap: 12px
}

.diff-box-avatar {
  flex-shrink: 0;
  display: flex;
  line-height: 0;
  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.3))
}

.diff-box-titles {
  display: flex;
  flex-direction: column;
  gap: 2px
}

.diff-box-name-row {
  display: flex;
  align-items: baseline;
  gap: 8px;
  flex-wrap: wrap
}

.diff-box-name {
  font-size: 1.2rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 1.5px
}

.diff-box-mascot-name {
  font-size: 0.68rem;
  font-weight: 600;
  font-style: italic;
  opacity: 0.7
}

/* Short, single-line description sitting right under the name+flavor row
   instead of a separate full-width paragraph - keeps each box scannable at
   a glance rather than reading like a paragraph of rules. */
.diff-box-desc {
  font-size: 0.74rem;
  font-weight: 500;
  letter-spacing: 0.2px;
  color: inherit;
  opacity: 0.8;
  margin: 0
}

.diff-box:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.4)
}

.diff-box.selected {
  border-width: 3px !important;
  border-color: #fff !important;
  box-shadow: 0 0 20px rgba(255, 255, 255, 0.15);
  transform: translateY(-2px)
}

.diff-box.selected::after {
  content: '✓';
  position: absolute;
  top: -8px;
  right: -8px;
  width: 22px;
  height: 22px;
  background: #c9a84c;
  color: #000;
  border-radius: 50%;
  font-size: 12px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 0 10px rgba(201, 168, 76, 0.5)
}

.diff-box[data-diff="easy"] {
  background: rgba(76, 175, 80, 0.7);
  color: #fff
}

.diff-box[data-diff="medium"] {
  background: rgba(255, 193, 7, 0.7);
  color: #000
}

.diff-box[data-diff="hard"] {
  background: rgba(239, 83, 80, 0.7);
  color: #fff
}

.diff-box[data-diff="expert"] {
  background: rgba(255, 255, 255, 0.2);
  color: #fff
}

.diff-box[data-diff="drunk"] {
  background: rgba(255, 138, 101, 0.7);
  color: #fff
}

.diff-box[data-diff="bluffer"] {
  background: rgba(171, 71, 188, 0.7);
  color: #fff
}

.diff-box[data-diff="rock"] {
  background: rgba(120, 144, 156, 0.7);
  color: #fff
}

.diff-box[data-diff="maniac"] {
  background: rgba(255, 82, 82, 0.7);
  color: #fff
}

.diff-box[data-diff="boardroom"] {
  background: rgba(201, 168, 76, 0.55);
  color: #000
}

/* ===== Info icon (small "i" hover/focus tooltip) - no existing tooltip
   component in this codebase, so this is the first one, meant to be
   reusable anywhere a short explanation is useful. Pure CSS show/hide
   (:hover/:focus-within), no JS needed. ===== */
.info-icon {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 15px;
  height: 15px;
  margin-left: 5px;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.3);
  color: rgba(255, 255, 255, 0.55);
  font-family: 'Inter', sans-serif;
  font-size: 0.62rem;
  font-style: italic;
  font-weight: 700;
  cursor: help;
  vertical-align: middle
}

.info-icon:hover,
.info-icon:focus-visible {
  border-color: rgba(201, 168, 76, 0.6);
  color: #d9bb63;
  outline: none
}

.info-tooltip {
  position: absolute;
  bottom: calc(100% + 8px);
  left: 50%;
  transform: translateX(-50%) translateY(4px);
  width: 220px;
  padding: 10px 12px;
  border-radius: 0;
  background: rgba(13, 13, 26, 0.97);
  border: 1px solid rgba(255, 255, 255, 0.12);
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.4);
  color: rgba(255, 255, 255, 0.75);
  font-size: 0.68rem;
  font-weight: 400;
  font-style: normal;
  line-height: 1.5;
  text-align: left;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.15s ease, transform 0.15s ease;
  z-index: 400
}

.info-icon:hover .info-tooltip,
.info-icon:focus-visible .info-tooltip,
.info-icon:focus-within .info-tooltip {
  opacity: 1;
  visibility: visible;
  transform: translateX(-50%) translateY(0)
}

/* The header chip's info icon sits right at the top of the viewport and
   near the right edge - opening upward/centered (the default above) would
   push the tooltip off the top of the screen and/or off the right edge.
   Open downward instead, anchored to the icon's right edge. */
#auth-user-chip .info-tooltip {
  bottom: auto;
  top: calc(100% + 8px);
  left: auto;
  right: -8px;
  transform: translateY(-4px)
}

#auth-user-chip .info-icon:hover .info-tooltip,
#auth-user-chip .info-icon:focus-visible .info-tooltip,
#auth-user-chip .info-icon:focus-within .info-tooltip {
  transform: translateY(0)
}

.exp-box-tag {
  font-size: 0.62rem;
  font-weight: 600;
  letter-spacing: 0.5px;
  opacity: 0.75
}

.exp-box.locked {
  cursor: not-allowed;
  filter: grayscale(0.6);
  opacity: 0.55
}

.exp-box-lock {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 12px;
  border-radius: 0;
  background: rgba(0, 0, 0, 0.55);
  color: #e8e4dc;
  font-family: 'Inter', sans-serif;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.3px;
  text-align: center
}

/* ===== Experimental Bots page ===== */
#experimental-content {
  text-align: center;
  padding: 26px 40px 30px;
  max-width: 640px;
  width: 92%;
  display: flex;
  flex-direction: column;
  align-items: center
}

#experimental-intro {
  font-size: 0.8rem;
  color: rgba(255, 255, 255, 0.45);
  margin-bottom: 18px
}

#experimental-boxes, #experimental-multi-boxes {
  display: flex;
  flex-direction: column;
  gap: 10px;
  width: 100%;
  margin-bottom: 18px
}

.experimental-group-title {
  font-family: 'Playfair Display', Georgia, serif;
  font-size: 1rem;
  font-weight: 700;
  color: #e8e4dc;
  width: 100%;
  text-align: left;
  margin: 4px 0 2px
}

.experimental-group-desc {
  font-size: 0.72rem;
  color: rgba(255, 255, 255, 0.4);
  width: 100%;
  text-align: left;
  margin: 0 0 12px
}

#btn-start-experimental {
  max-width: 320px
}

/* ===== Settings Modal (Game Config) ===== */
#settings-modal {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.8);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 200
}

#settings-content {
  background: #111;
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 0;
  padding: 30px 34px;
  max-width: 380px;
  width: 90%
}

#settings-content h2 {
  font-size: 0.95rem;
  font-weight: 600;
  color: #e8e4dc;
  margin-bottom: 18px;
  text-align: center
}

#settings-form {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-bottom: 18px
}

.blind-row {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%
}

.blind-row select {
  flex: 1
}

.blind-sep {
  color: rgba(255, 255, 255, 0.2);
  font-size: 1rem
}

#settings-actions {
  display: flex;
  gap: 10px
}

#settings-actions button {
  flex: 1;
  padding: 10px;
  border: none;
  border-radius: 0;
  font-family: 'Inter', sans-serif;
  font-size: 0.75rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s
}

#settings-actions button:first-child {
  background: #c9a84c;
  color: #0d0d1a
}

#settings-actions button:first-child:hover {
  background: #dbb856
}

/* ===== Auth Modal (Log In / Sign Up) ===== */
#auth-modal {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.8);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 220
}

#auth-content {
  background: #111;
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 0;
  padding: 26px 30px 30px;
  max-width: 360px;
  width: 90%
}

#auth-tabs {
  display: flex;
  gap: 8px;
  margin-bottom: 20px
}

.auth-tab {
  flex: 1;
  font-family: 'Inter', sans-serif;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.4px;
  padding: 9px 0;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 0;
  background: transparent;
  color: rgba(255, 255, 255, 0.4);
  cursor: pointer;
  transition: all 0.15s
}

.auth-tab:hover {
  color: rgba(255, 255, 255, 0.7)
}

.auth-tab.active {
  background: #c9a84c;
  border-color: #c9a84c;
  color: #0d0d1a
}

.auth-form {
  display: flex;
  flex-direction: column;
  gap: 12px
}

.auth-error {
  font-size: 0.75rem;
  color: #f29e9c;
  background: rgba(239, 83, 80, 0.1);
  border: 1px solid rgba(239, 83, 80, 0.25);
  border-radius: 0;
  padding: 8px 12px;
  line-height: 1.5
}

#signup-legal-agree-row {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  font-size: 0.72rem;
  color: rgba(255, 255, 255, 0.5);
  line-height: 1.5;
  margin: 6px 0 14px;
  cursor: pointer;
  text-align: left
}

#signup-legal-agree-row input[type="checkbox"] {
  flex-shrink: 0;
  width: 15px;
  height: 15px;
  margin-top: 1px;
  accent-color: #c9a84c;
  cursor: pointer
}

#signup-legal-agree-row a {
  color: rgba(201, 168, 76, 0.85)
}

.auth-submit {
  font-family: 'Inter', sans-serif;
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.5px;
  padding: 11px 0;
  border: none;
  border-radius: 0;
  background: #c9a84c;
  color: #0d0d1a;
  cursor: pointer;
  transition: all 0.2s;
  text-transform: uppercase
}

.auth-submit:hover {
  background: #dbb856
}

#auth-content #btn-close-auth {
  margin-top: 14px
}

#btn-open-auth {
  width: auto;
  padding: 8px 16px;
  white-space: nowrap
}

#auth-user-chip {
  display: flex;
  align-items: center;
  gap: 8px
}

#auth-user-name {
  font-size: 0.75rem;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.6);
  white-space: nowrap
}

#auth-user-badge {
  display: inline-flex;
  align-items: center;
  line-height: 0
}

#auth-user-coins {
  /* Deliberately not the monospace font used elsewhere for numbers - its
     stylized zero is genuinely hard to tell apart from a 9 at this small a
     size, and a currency count is exactly the wrong place for that. */
  font-family: 'Inter', sans-serif;
  font-size: 0.78rem;
  font-weight: 700;
  color: #c9a84c;
  white-space: nowrap
}

/* ===== Play Page 3-column layout (leaderboard / home content / friends) =====
   The two side columns are fixed, IDENTICAL widths (250px each) no matter
   how much content stacks inside them - that's what keeps #home-content
   mathematically centered in the middle of the row (flexbox centers the
   whole 3-item row as a block; since both outer widths are always equal,
   the center item's own center always lands on the row's center, and the
   row itself is centered in the viewport via max-width + margin:auto). This
   holds regardless of how tall either column's stacked boxes get. */
#play-layout {
  display: flex;
  align-items: flex-start;
  justify-content: center;
  gap: 22px;
  width: 100%;
  max-width: 1400px;
  margin: 0 auto
}

.play-side-column {
  display: flex;
  flex-direction: column;
  gap: 20px;
  width: 290px;
  flex-shrink: 0;
  margin-top: 26px
}

.play-side-panel {
  width: 100%;
  box-sizing: border-box;
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 0;
  padding: 24px;
  text-align: left
}

.play-side-panel h3 {
  font-family: 'Playfair Display', Georgia, serif;
  font-size: 1.15rem;
  font-weight: 700;
  color: #e8e4dc;
  text-align: center;
  margin-bottom: 14px
}

#play-friends-hint {
  font-size: 0.82rem;
  color: rgba(255, 255, 255, 0.75);
  line-height: 1.55;
  text-align: center;
  margin-bottom: 18px
}

@media (max-width: 1400px) {
  #play-layout {
    flex-direction: column;
    align-items: center
  }

  .play-side-column {
    width: 100%;
    max-width: 780px;
    margin-top: 0
  }
}

/* Standalone info boxes ("What is Poker?" / "How to Play" / the Range
   Trainer nudge) - each its own full card, matching the leaderboard/friends
   panel's visual weight rather than a thin addendum tacked onto the bottom
   of another box. flex: 1 lets the main two boxes stretch to fill whatever
   vertical space is left in their column, so they read as a substantial
   part of the sidebar rather than an afterthought - deliberately still
   light on text (a hook for a first-time visitor, not a rules document, with
   full detail on the Learn tab this links to), just given more visual room. */
.home-standalone-info-box {
  flex: 1;
  display: flex;
  flex-direction: column
}

.home-standalone-info-box ul {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-bottom: 14px
}

.home-standalone-info-box li {
  font-size: 0.85rem;
  color: rgba(255, 255, 255, 0.85);
  line-height: 1.6;
  padding-left: 14px;
  position: relative
}

.home-standalone-info-box li::before {
  content: '•';
  position: absolute;
  left: 0;
  color: rgba(201, 168, 76, 0.7)
}

.home-standalone-info-box p {
  font-size: 0.85rem;
  color: rgba(255, 255, 255, 0.85);
  line-height: 1.6;
  margin-bottom: 14px
}

.home-standalone-info-box-small {
  flex: 0 0 auto
}

.home-info-link {
  background: none;
  border: none;
  color: #c9a84c;
  font-size: 0.72rem;
  font-weight: 600;
  cursor: pointer;
  padding: 0;
  text-align: left;
  transition: color 0.2s;
  margin-top: auto
}

.home-info-link:hover {
  color: #dbb856
}

.play-side-panel-head {
  margin-bottom: 12px
}

#lb-period-tabs {
  display: flex;
  gap: 6px
}

.lb-period-tab {
  flex: 1;
  font-family: 'Inter', sans-serif;
  font-size: 0.66rem;
  font-weight: 600;
  letter-spacing: 0.3px;
  padding: 6px 0;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 0;
  background: transparent;
  color: rgba(255, 255, 255, 0.4);
  cursor: pointer;
  transition: all 0.15s
}

.lb-period-tab:hover {
  color: rgba(255, 255, 255, 0.7)
}

.lb-period-tab.active {
  background: #c9a84c;
  border-color: #c9a84c;
  color: #0d0d1a
}

/* Compact leaderboard rows in the sidebar - tier label dropped (the badge
   already encodes it), same shared .lb-row markup reused from the row
   renderer, just visually condensed for a 250px-wide panel. */
#home-leaderboard-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
  max-height: 340px;
  overflow-y: auto;
  margin-bottom: 6px
}

#home-leaderboard-list .lb-tier,
#home-leaderboard-you-row .lb-tier {
  display: none
}

#home-leaderboard-you-row {
  padding-top: 8px;
  border-top: 1px dashed rgba(255, 255, 255, 0.1)
}

.lb-loading {
  text-align: center;
  color: rgba(255, 255, 255, 0.4);
  font-size: 0.8rem;
  padding: 20px 0
}

.lb-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 12px;
  border-radius: 0;
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid rgba(255, 255, 255, 0.05);
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s
}

.lb-row:hover {
  background: rgba(255, 255, 255, 0.06);
  border-color: rgba(255, 255, 255, 0.15)
}

.lb-row.lb-you {
  background: rgba(201, 168, 76, 0.1);
  border-color: rgba(201, 168, 76, 0.35)
}

.lb-row.lb-you:hover {
  background: rgba(201, 168, 76, 0.16)
}

.lb-rank {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 0.75rem;
  color: rgba(255, 255, 255, 0.55);
  width: 28px;
  flex-shrink: 0
}

.lb-badge {
  display: inline-flex;
  align-items: center;
  flex-shrink: 0;
  line-height: 0
}

.lb-name {
  flex: 1;
  font-size: 0.82rem;
  font-weight: 600;
  color: #e8e4dc;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis
}

.lb-tier {
  font-size: 0.68rem;
  color: rgba(255, 255, 255, 0.6);
  white-space: nowrap
}

.lb-xp {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 0.78rem;
  color: #c9a84c;
  font-weight: 600;
  white-space: nowrap
}


/* ===== Private Rooms (Play with Friends) ===== */
/* ===== Ranked Setup Modal ===== */
#ranked-setup-modal {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.8);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 220
}

#ranked-setup-content {
  background: #111;
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 0;
  padding: 26px 30px 30px;
  max-width: 440px;
  width: 90%
}

#ranked-setup-content h2 {
  font-size: 0.95rem;
  font-weight: 600;
  color: #e8e4dc;
  margin-bottom: 18px;
  text-align: center
}

#ranked-setup-diff-row,
#ranked-setup-length-row {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 16px
}

.ranked-setup-btn {
  flex: 1;
  min-width: 90px;
  font-family: 'Inter', sans-serif;
  font-size: 0.7rem;
  font-weight: 600;
  padding: 8px 6px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 0;
  background: rgba(255, 255, 255, 0.03);
  color: rgba(255, 255, 255, 0.5);
  cursor: pointer;
  transition: all 0.15s
}

.ranked-setup-btn:hover {
  border-color: rgba(255, 255, 255, 0.2);
  color: rgba(255, 255, 255, 0.8)
}

.ranked-setup-btn.active {
  background: #c9a84c;
  border-color: #c9a84c;
  color: #0d0d1a
}

#ranked-setup-xp-info {
  font-size: 0.75rem;
  color: #c9a84c;
  text-align: center;
  margin-bottom: 10px;
  line-height: 1.5
}

#ranked-setup-fixed-hint {
  font-size: 0.68rem;
  color: rgba(255, 255, 255, 0.35);
  font-style: italic;
  text-align: center;
  line-height: 1.5;
  margin-bottom: 18px
}

#ranked-setup-content #btn-close-ranked-setup {
  margin-top: 10px
}

/* ===== Rank Results Modal (session/tournament complete) ===== */
/* Bottom-anchored rather than centered, and a much lighter backdrop than a
   typical modal scrim - deliberately so it never fully covers the board:
   community cards sit in the upper/middle portion of the felt, so a panel
   docked to the bottom of the viewport (with its own capped-height,
   scrollable showdown list below, rather than letting the whole box grow
   tall enough to reach back up over the board) leaves the river visible
   the entire time this screen is prompting Continue/Play Again/Analyze. */
#rank-results-modal {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.4);
  display: flex;
  align-items: flex-end;
  justify-content: center;
  padding-bottom: 24px;
  z-index: 230
}

#rank-results-content {
  background: #111;
  border: 1px solid rgba(201, 168, 76, 0.25);
  border-radius: 0;
  padding: 30px 34px;
  max-width: 400px;
  width: 90%;
  max-height: 80vh;
  overflow-y: auto;
  text-align: center;
  box-shadow: 0 0 60px rgba(0, 0, 0, 0.7)
}

#rank-results-showdown {
  margin-bottom: 14px;
  max-height: 140px;
  overflow-y: auto
}

#btn-analyze-hand-ranked {
  margin-top: 10px
}

#rank-results-title {
  font-family: 'Playfair Display', Georgia, serif;
  font-size: 1.2rem;
  font-weight: 700;
  color: #e8e4dc;
  margin-bottom: 18px
}

#rank-results-badge-row {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  margin-bottom: 10px
}

#rank-results-label {
  font-size: 0.95rem;
  font-weight: 600;
  color: #e8e4dc
}

#rank-results-tier-flourish {
  font-size: 0.85rem;
  font-weight: 700;
  color: #6fd67a;
  margin-bottom: 14px
}

#rank-results-xp-bar-bg {
  height: 10px;
  background: rgba(255, 255, 255, 0.08);
  border-radius: 0;
  overflow: hidden;
  margin-bottom: 8px
}

#rank-results-xp-bar-fill {
  height: 100%;
  width: 0%;
  background: linear-gradient(90deg, #a8863a, #c9a84c);
  border-radius: 0
}

#rank-results-xp-text {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 0.72rem;
  color: rgba(255, 255, 255, 0.5);
  margin-bottom: 22px
}

#daily-reward-modal {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.85);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 230
}

#daily-reward-content {
  background: #111;
  border: 1px solid rgba(201, 168, 76, 0.25);
  border-radius: 0;
  padding: 30px 34px;
  max-width: 360px;
  width: 90%;
  text-align: center
}

#daily-reward-content h2 {
  font-family: 'Playfair Display', Georgia, serif;
  font-size: 1.2rem;
  font-weight: 700;
  color: #e8e4dc;
  margin-bottom: 18px
}

#daily-reward-coins-amount {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 1.4rem;
  font-weight: 700;
  color: #c9a84c;
  margin-bottom: 6px
}

#daily-reward-streak-text {
  font-size: 0.78rem;
  color: rgba(255, 255, 255, 0.5);
  margin-bottom: 22px
}

.auth-user-profile-btn {
  display: flex;
  align-items: center;
  gap: 6px;
  background: transparent;
  border: none;
  cursor: pointer;
  padding: 4px 6px;
  border-radius: 0;
  transition: background 0.15s
}

.auth-user-profile-btn:hover {
  background: rgba(255, 255, 255, 0.06)
}

/* ===== Profile Modal ===== */
#profile-modal {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.8);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 220
}

#profile-content {
  background: #111;
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 0;
  padding: 26px 30px 30px;
  max-width: 420px;
  width: 90%
}

#profile-head {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 16px
}

#profile-name {
  font-family: 'Playfair Display', Georgia, serif;
  font-size: 1.15rem;
  font-weight: 700;
  color: #e8e4dc
}

#profile-rank-label {
  font-size: 0.75rem;
  color: rgba(255, 255, 255, 0.5);
  font-weight: 500
}

#profile-xp-bar-row {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 4px
}

#profile-xp-bar-bg {
  flex: 1;
  height: 8px;
  background: rgba(255, 255, 255, 0.08);
  border-radius: 0;
  overflow: hidden
}

#profile-xp-bar-fill {
  height: 100%;
  width: 0%;
  background: linear-gradient(90deg, #a8863a, #c9a84c);
  border-radius: 0;
  transition: width 0.6s ease
}

#profile-xp-text {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 0.68rem;
  color: rgba(255, 255, 255, 0.5);
  white-space: nowrap
}

#profile-coins-row {
  /* Same reasoning as #auth-user-coins - avoid the monospace zero/nine
     ambiguity at small sizes for a number people actually need to read. */
  font-family: 'Inter', sans-serif;
  font-size: 0.85rem;
  font-weight: 700;
  color: #c9a84c;
  margin-bottom: 12px
}

#profile-scope-hint {
  font-size: 0.7rem;
  color: rgba(255, 255, 255, 0.35);
  font-style: italic;
  margin-bottom: 18px
}

#profile-stats-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin-bottom: 20px
}

.profile-stat {
  display: flex;
  flex-direction: column;
  gap: 3px;
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid rgba(255, 255, 255, 0.05);
  border-radius: 0;
  padding: 10px 12px
}

.profile-stat-label {
  font-size: 0.62rem;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: rgba(255, 255, 255, 0.35)
}

.profile-stat-value {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 0.95rem;
  font-weight: 600;
  color: #c9a84c
}

#profile-content #btn-open-delete-account {
  display: block;
  width: 100%;
  margin-top: 14px;
  background: none;
  border: none;
  color: rgba(239, 83, 80, 0.55);
  font-size: 0.68rem;
  text-decoration: underline;
  cursor: pointer;
  text-align: center
}

/* ===== Rank Ladder modal - all 16 RANK_TIERS, opened from home-rank-hero.
   #rank-ladder-list is deliberately scrollable-but-scrollbar-less (both
   vendor hiding rules below), so the "climb the ladder" feel doesn't come
   with a bare OS scrollbar track cutting across it. ===== */
#rank-ladder-modal {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.8);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 220
}

#rank-ladder-content {
  background: #111;
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 0;
  padding: 26px 30px 30px;
  max-width: 420px;
  width: 90%;
  display: flex;
  flex-direction: column;
  max-height: 86vh
}

#rank-ladder-title {
  font-family: 'Playfair Display', Georgia, serif;
  font-size: 1.2rem;
  color: #e8e4dc;
  margin-bottom: 6px
}

#rank-ladder-subtitle {
  font-size: 0.78rem;
  color: rgba(255, 255, 255, 0.5);
  margin-bottom: 16px
}

#rank-ladder-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  overflow-y: auto;
  padding-right: 2px;
  margin-bottom: 16px;
  scrollbar-width: none /* Firefox */
}

#rank-ladder-list::-webkit-scrollbar {
  display: none /* Chrome/Safari/Edge */
}

.rank-ladder-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  border-radius: 0;
  border: 1px solid rgba(255, 255, 255, 0.06);
  background: rgba(255, 255, 255, 0.02);
  opacity: 0.45;
  flex-shrink: 0
}

.rank-ladder-row-reached {
  opacity: 1
}

.rank-ladder-row-current {
  border-color: rgba(201, 168, 76, 0.5);
  background: rgba(201, 168, 76, 0.08);
  box-shadow: 0 0 0 1px rgba(201, 168, 76, 0.2)
}

.rank-ladder-row-badge {
  flex-shrink: 0;
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center
}

.rank-ladder-row-info {
  flex: 1;
  min-width: 0
}

.rank-ladder-row-label {
  font-family: 'Playfair Display', Georgia, serif;
  font-size: 0.9rem;
  color: #e8e4dc
}

.rank-ladder-row-threshold {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 0.68rem;
  color: rgba(255, 255, 255, 0.45);
  margin-top: 2px
}

.rank-ladder-row-you {
  flex-shrink: 0;
  font-size: 0.65rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: #c9a84c;
  border: 1px solid rgba(201, 168, 76, 0.4);
  border-radius: 0;
  padding: 4px 10px
}

#profile-content #btn-open-delete-account:hover {
  color: rgba(239, 83, 80, 0.85)
}

/* ===== Public Profile Modal (any leaderboard row) - same shell as
   #profile-modal above, reusing .profile-stat/.profile-stat-label/
   .profile-stat-value for the grid, just no coins row and no account
   actions since this is a read-only view of someone else's account. ===== */
#public-profile-modal {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.8);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 220
}

#public-profile-content {
  background: #111;
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 0;
  padding: 26px 30px 30px;
  max-width: 420px;
  width: 90%
}

#public-profile-head {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 16px
}

#public-profile-name {
  font-family: 'Playfair Display', Georgia, serif;
  font-size: 1.15rem;
  font-weight: 700;
  color: #e8e4dc
}

#public-profile-rank-label {
  font-size: 0.75rem;
  color: rgba(255, 255, 255, 0.5);
  font-weight: 500
}

#public-profile-xp-bar-row {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 4px
}

#public-profile-xp-bar-bg {
  flex: 1;
  height: 8px;
  background: rgba(255, 255, 255, 0.08);
  border-radius: 0;
  overflow: hidden
}

#public-profile-xp-bar-fill {
  height: 100%;
  width: 0%;
  background: linear-gradient(90deg, #a8863a, #c9a84c);
  border-radius: 0;
  transition: width 0.6s ease
}

#public-profile-xp-text {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 0.68rem;
  color: rgba(255, 255, 255, 0.5);
  white-space: nowrap
}

#public-profile-scope-hint {
  font-size: 0.7rem;
  color: rgba(255, 255, 255, 0.35);
  font-style: italic;
  margin-bottom: 18px;
  margin-top: 8px
}

#public-profile-stats-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin-bottom: 20px
}

/* ===== Delete Account Modal ===== */
#delete-account-modal {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.85);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 230
}

#delete-account-content {
  background: #111;
  border: 1px solid rgba(239, 83, 80, 0.2);
  border-radius: 0;
  padding: 26px 30px 30px;
  max-width: 420px;
  width: 90%
}

#delete-account-content h2 {
  font-family: 'Playfair Display', Georgia, serif;
  font-size: 1.15rem;
  font-weight: 700;
  color: #e8e4dc;
  margin-bottom: 12px
}

#delete-account-warning {
  font-size: 0.82rem;
  color: rgba(255, 255, 255, 0.7);
  margin-bottom: 10px
}

#delete-account-loss-list {
  list-style: none;
  margin: 0 0 20px;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 6px
}

#delete-account-loss-list li {
  font-size: 0.78rem;
  color: #f29e9c;
  padding-left: 14px;
  position: relative
}

#delete-account-loss-list li::before {
  content: '-';
  position: absolute;
  left: 0
}

#delete-account-agree-row {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  font-size: 0.72rem;
  color: rgba(255, 255, 255, 0.5);
  line-height: 1.5;
  margin: 12px 0 16px;
  cursor: pointer;
  text-align: left
}

#delete-account-agree-row input[type="checkbox"] {
  flex-shrink: 0;
  width: 15px;
  height: 15px;
  margin-top: 1px;
  accent-color: #ef5350;
  cursor: pointer
}

#btn-confirm-delete-account {
  width: 100%;
  background: #ef5350;
  color: #fff;
  border: none;
  border-radius: 0;
  padding: 11px;
  font-family: 'Inter', sans-serif;
  font-size: 0.82rem;
  font-weight: 700;
  cursor: pointer;
  margin-bottom: 10px;
  transition: background 0.2s
}

#btn-confirm-delete-account:hover {
  background: #d64541
}

#btn-confirm-delete-account:disabled {
  opacity: 0.6;
  cursor: not-allowed
}

/* ===== Customize Modal (cosmetics shop) ===== */
#customize-modal {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.8);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 220
}

#customize-content {
  background: #111;
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 0;
  padding: 26px 30px 30px;
  max-width: 720px;
  width: 92%;
  max-height: 85vh;
  overflow-y: auto
}

#customize-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 18px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  padding-bottom: 14px
}

.customize-tab {
  font-family: 'Inter', sans-serif;
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.3px;
  padding: 7px 12px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 0;
  background: transparent;
  color: rgba(255, 255, 255, 0.4);
  cursor: pointer;
  transition: all 0.2s
}

.customize-tab:hover {
  color: rgba(255, 255, 255, 0.7);
  border-color: rgba(255, 255, 255, 0.2)
}

.customize-tab.active {
  background: rgba(201, 168, 76, 0.16);
  border-color: rgba(201, 168, 76, 0.5);
  color: #d9bb63
}

#customize-content h2 {
  font-family: 'Playfair Display', Georgia, serif;
  font-size: 1.15rem;
  font-weight: 700;
  color: #e8e4dc;
  margin-bottom: 8px
}

#customize-coins-row {
  font-family: 'Inter', sans-serif;
  font-size: 0.85rem;
  font-weight: 700;
  color: #c9a84c;
  margin-bottom: 18px
}

.customize-section {
  margin-bottom: 20px
}

.customize-section-title {
  font-size: 0.68rem;
  text-transform: uppercase;
  letter-spacing: 0.8px;
  color: rgba(255, 255, 255, 0.4);
  margin-bottom: 10px
}

.customize-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(96px, 1fr));
  gap: 12px
}

.customize-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid rgba(255, 255, 255, 0.05);
  border-radius: 0;
  padding: 10px
}

.customize-swatch {
  width: 60px;
  height: 60px;
  display: flex;
  align-items: center;
  justify-content: center
}

.customize-swatch-card {
  width: 44px;
  height: 60px
}

.customize-swatch-felt {
  width: 60px;
  height: 44px;
  border-radius: 22px/16px;
  background: radial-gradient(ellipse at 30% 40%, #1f7a42 0%, #155d30 30%, #0f4d2b 55%, #0a3d22 100%)
}

.customize-swatch[data-felt="blue"] .customize-swatch-felt {
  background: radial-gradient(ellipse at 30% 40%, #1f5a8a 0%, #154268 30%, #0f3454 55%, #0a2740 100%)
}
.customize-swatch[data-felt="crimson"] .customize-swatch-felt {
  background: radial-gradient(ellipse at 30% 40%, #8a2432 0%, #681823 30%, #541019 55%, #400a12 100%)
}
.customize-swatch[data-felt="purple"] .customize-swatch-felt {
  background: radial-gradient(ellipse at 30% 40%, #6a248a 0%, #4c1868 30%, #3c1054 55%, #2c0a40 100%)
}
.customize-swatch[data-felt="teal"] .customize-swatch-felt {
  background: radial-gradient(ellipse at 30% 40%, #1f7a7a 0%, #155d5d 30%, #0f4d4d 55%, #0a3d3d 100%)
}
.customize-swatch[data-felt="black"] .customize-swatch-felt {
  background: radial-gradient(ellipse at 30% 40%, #2a2a2a 0%, #1a1a1a 30%, #101010 55%, #050505 100%)
}
.customize-swatch[data-felt="rose"] .customize-swatch-felt {
  background: radial-gradient(ellipse at 30% 40%, #b8547a 0%, #8a3d5c 30%, #6b2d47 55%, #4d1f33 100%)
}
.customize-swatch[data-felt="gold"] .customize-swatch-felt {
  background: radial-gradient(ellipse at 30% 40%, #b89550 0%, #96773d 30%, #7a5f2f 55%, #5c481f 100%)
}

.customize-swatch[data-cardback="diamond"] .customize-swatch-card {
  background: #12321f;
  background-image:
    linear-gradient(45deg, transparent 45%, #2f6b4a 45%, #2f6b4a 55%, transparent 55%),
    linear-gradient(-45deg, transparent 45%, #2f6b4a 45%, #2f6b4a 55%, transparent 55%);
  background-size: 10px 10px;
  border: 2px solid #0a1f14
}
.customize-swatch[data-cardback="jewel"] .customize-swatch-card {
  background: radial-gradient(ellipse at 35% 30%, #9c2c5e 0%, #5c1638 55%, #2c0a1e 100%);
  border: 2px solid #1a0512
}
.customize-swatch[data-cardback="suits"] .customize-swatch-card {
  background: #2a2a2a;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24'%3E%3Ctext x='1' y='11' font-size='9' fill='%23555'%3E%E2%99%A0%3C/text%3E%3Ctext x='12' y='22' font-size='9' fill='%23555'%3E%E2%99%A5%3C/text%3E%3C/svg%3E");
  background-size: 24px 24px;
  border: 2px solid #171717
}
.customize-swatch[data-cardback="emerald"] .customize-swatch-card {
  background: radial-gradient(ellipse at 35% 30%, #1fa363 0%, #0d6b3f 55%, #04331f 100%);
  border: 2px solid #02190f
}
.customize-swatch[data-cardback="midnight"] .customize-swatch-card {
  background: radial-gradient(ellipse at 35% 30%, #2c3e6b 0%, #16203d 55%, #080b18 100%);
  border: 2px solid #04060c
}
.customize-swatch[data-cardback="royal"] .customize-swatch-card {
  background: #1a1a1a;
  background-image: linear-gradient(45deg, #1a1a1a 25%, #3a3220 25%, #3a3220 50%, #1a1a1a 50%, #1a1a1a 75%, #3a3220 75%);
  background-size: 10px 10px;
  border: 2px solid #0d0d0d
}
.customize-swatch[data-cardback="prism"] .customize-swatch-card {
  background: linear-gradient(135deg, #ff6b6b 0%, #ffd166 25%, #06d6a0 50%, #4d96ff 75%, #b28dff 100%);
  border: 2px solid #1a1a1a
}
.customize-swatch[data-cardback="aurora"] .customize-swatch-card {
  background: linear-gradient(160deg, #0a2e2a 0%, #114a3e 30%, #1f9e7a 55%, #3ad6c2 75%, #8f5fd6 100%);
  border: 2px solid #06110f
}
.customize-swatch[data-cardback="celestial"] .customize-swatch-card {
  background:
    radial-gradient(circle at 20% 20%, rgba(255, 255, 255, 0.9) 0.5px, transparent 1.2px) 0 0/14px 14px,
    radial-gradient(circle at 60% 60%, rgba(255, 255, 255, 0.7) 0.5px, transparent 1.2px) 4px 6px/18px 18px,
    radial-gradient(ellipse at 40% 30%, #241a52 0%, #150f38 55%, #06041a 100%);
  border: 2px solid #04030f
}
.customize-swatch[data-cardback="onyx"] .customize-swatch-card {
  background: radial-gradient(ellipse at 35% 25%, #4a4a4a 0%, #232323 45%, #0a0a0a 100%);
  border: 2px solid #000
}
.customize-swatch[data-cardback="topaz"] .customize-swatch-card {
  background: radial-gradient(ellipse at 35% 30%, #ffc266 0%, #d4881f 45%, #7a4a10 100%);
  border: 2px solid #3d2408
}
.customize-swatch[data-cardback="opal"] .customize-swatch-card {
  background: linear-gradient(135deg, #f2e6ff 0%, #d4f1f4 25%, #ffe0f0 50%, #e0f4e0 75%, #fff4d4 100%);
  border: 2px solid #2a2a2a
}
.customize-swatch[data-cardback="platinum"] .customize-swatch-card {
  background: radial-gradient(ellipse at 35% 25%, #eef0f4 0%, #b8bcc4 45%, #767a82 100%);
  border: 2px solid #3a3d42
}
.customize-swatch[data-cardback="nebula"] .customize-swatch-card {
  background:
    radial-gradient(circle at 25% 25%, rgba(255, 255, 255, 0.7) 0.5px, transparent 1.2px) 0 0/16px 16px,
    radial-gradient(ellipse at 30% 30%, #7a4cc4 0%, #3d2266 45%, #170c33 75%, #08040f 100%);
  border: 2px solid #05030a
}
.customize-swatch[data-felt="sapphireNight"] .customize-swatch-felt {
  background: radial-gradient(ellipse at 30% 40%, #16305c 0%, #0e2246 30%, #091834 55%, #050f22 100%)
}
.customize-swatch[data-felt="amber"] .customize-swatch-felt {
  background: radial-gradient(ellipse at 30% 40%, #b8802a 0%, #8f611f 30%, #6b4816 55%, #4a3010 100%)
}
.customize-swatch[data-felt="forest"] .customize-swatch-felt {
  background: radial-gradient(ellipse at 30% 40%, #1a4a2a 0%, #123a20 30%, #0c2c18 55%, #071c10 100%)
}
.customize-swatch[data-felt="slate"] .customize-swatch-felt {
  background: radial-gradient(ellipse at 30% 40%, #4a5a6a 0%, #384552 30%, #2a343e 55%, #1c232a 100%)
}
.customize-swatch[data-felt="magenta"] .customize-swatch-felt {
  background: radial-gradient(ellipse at 30% 40%, #a8286a 0%, #821d52 30%, #64163f 55%, #470f2d 100%)
}

.customize-item-name {
  font-size: 0.68rem;
  color: rgba(255, 255, 255, 0.7);
  text-align: center
}

.customize-action-btn {
  font-size: 0.65rem;
  padding: 6px 10px
}

.customize-equipped-label {
  font-size: 0.65rem;
  color: #6bbf6b;
  font-weight: 600
}

.customize-locked-label {
  font-size: 0.62rem;
  color: rgba(255, 255, 255, 0.4);
  font-weight: 600;
  text-align: center
}

.customize-item-locked {
  opacity: 0.75
}

#customize-content #btn-close-customize {
  margin-top: 6px
}

/* ===== Shop preview swatches: table-theme pattern (on a neutral green
   felt swatch, independent of feltColor), ripple color, name flair, and
   victory effect - same "what you see is what you get" spirit as the
   card-back/felt swatches above. ===== */
.customize-swatch-theme {
  width: 60px;
  height: 44px;
  border-radius: 22px/16px;
  background: radial-gradient(ellipse at 30% 40%, #1f7a42 0%, #155d30 30%, #0f4d2b 55%, #0a3d22 100%);
  position: relative;
  overflow: hidden
}
.customize-swatch-theme::after {
  content: '';
  position: absolute;
  inset: 0
}
.customize-swatch[data-theme="herringbone"] .customize-swatch-theme::after {
  opacity: 0.22;
  background-image:
    repeating-linear-gradient(45deg, rgba(255, 255, 255, 0.2) 0 3px, transparent 3px 6px),
    repeating-linear-gradient(-45deg, rgba(255, 255, 255, 0.2) 0 3px, transparent 3px 6px);
  background-size: 12px 12px
}
.customize-swatch[data-theme="diamond"] .customize-swatch-theme::after {
  opacity: 0.2;
  background-image:
    linear-gradient(45deg, rgba(255, 255, 255, 0.25) 25%, transparent 25%, transparent 75%, rgba(255, 255, 255, 0.25) 75%),
    linear-gradient(45deg, rgba(255, 255, 255, 0.25) 25%, transparent 25%, transparent 75%, rgba(255, 255, 255, 0.25) 75%);
  background-size: 16px 16px;
  background-position: 0 0, 8px 8px
}
.customize-swatch[data-theme="leather"] .customize-swatch-theme::after {
  opacity: 0.2;
  background-image:
    radial-gradient(circle at 30% 30%, rgba(0, 0, 0, 0.4) 0%, transparent 60%),
    radial-gradient(circle at 70% 70%, rgba(0, 0, 0, 0.4) 0%, transparent 60%);
  background-size: 20px 20px
}
.customize-swatch[data-theme="starlight"] .customize-swatch-theme::after {
  opacity: 0.35;
  background-image: radial-gradient(circle, rgba(255, 255, 255, 0.9) 1px, transparent 1.5px);
  background-size: 14px 14px
}
.customize-swatch[data-theme="royalCrest"] .customize-swatch-theme::after {
  opacity: 0.3;
  background-image: radial-gradient(circle at 50% 50%, rgba(201, 168, 76, 0.6) 0%, transparent 70%);
  background-size: 44px 44px
}
.customize-swatch[data-theme="marble"] .customize-swatch-theme::after {
  opacity: 0.28;
  background-image:
    linear-gradient(115deg, transparent 40%, rgba(255, 255, 255, 0.5) 41%, rgba(255, 255, 255, 0.5) 42%, transparent 43%),
    linear-gradient(70deg, transparent 60%, rgba(255, 255, 255, 0.35) 61%, rgba(255, 255, 255, 0.35) 62%, transparent 63%)
}
.customize-swatch[data-theme="mahogany"] .customize-swatch-theme::after {
  opacity: 0.3;
  background-image: repeating-linear-gradient(94deg, rgba(120, 70, 30, 0.5) 0 2px, transparent 2px 8px)
}
/* Tournament-exclusive trophy felts share one "medal rays" sunburst motif
   (distinct from the weave/diamond/leather/dot patterns above), each tinted
   to its own tier's accent color - see the matching nameFlair veteran
   colors above for the same tier->color mapping. */
.customize-swatch[data-theme="localTrophy"] .customize-swatch-theme::after {
  opacity: 0.35;
  background-image: repeating-conic-gradient(from 0deg, rgba(180, 131, 90, 0.55) 0deg 8deg, transparent 8deg 20deg)
}
.customize-swatch[data-theme="stateTrophy"] .customize-swatch-theme::after {
  opacity: 0.35;
  background-image: repeating-conic-gradient(from 0deg, rgba(184, 194, 204, 0.55) 0deg 8deg, transparent 8deg 20deg)
}
.customize-swatch[data-theme="naTrophy"] .customize-swatch-theme::after {
  opacity: 0.35;
  background-image: repeating-conic-gradient(from 0deg, rgba(201, 168, 76, 0.55) 0deg 8deg, transparent 8deg 20deg)
}
.customize-swatch[data-theme="worldTrophy"] .customize-swatch-theme::after {
  opacity: 0.35;
  background-image: repeating-conic-gradient(from 0deg, rgba(156, 106, 222, 0.55) 0deg 8deg, transparent 8deg 20deg)
}
.customize-swatch[data-theme="highRollersTrophy"] .customize-swatch-theme::after {
  opacity: 0.35;
  background-image: repeating-conic-gradient(from 0deg, rgba(96, 205, 240, 0.55) 0deg 8deg, transparent 8deg 20deg)
}
.customize-swatch[data-theme="celebrityTrophy"] .customize-swatch-theme::after {
  opacity: 0.35;
  background-image: repeating-conic-gradient(from 0deg, rgba(230, 83, 156, 0.55) 0deg 8deg, transparent 8deg 20deg)
}
.customize-swatch[data-theme="undergroundTrophy"] .customize-swatch-theme::after {
  opacity: 0.35;
  background-image: repeating-conic-gradient(from 0deg, rgba(214, 62, 62, 0.55) 0deg 8deg, transparent 8deg 20deg)
}

.customize-swatch-ripple {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.55);
  box-shadow: 0 0 0 6px rgba(255, 255, 255, 0.12)
}
.customize-swatch[data-ripple="gold"] .customize-swatch-ripple { background: #c9a84c; box-shadow: 0 0 0 6px rgba(201, 168, 76, 0.18) }
.customize-swatch[data-ripple="crimson"] .customize-swatch-ripple { background: #d34242; box-shadow: 0 0 0 6px rgba(211, 66, 66, 0.18) }
.customize-swatch[data-ripple="azure"] .customize-swatch-ripple { background: #42a5f5; box-shadow: 0 0 0 6px rgba(66, 165, 245, 0.18) }
.customize-swatch[data-ripple="emerald"] .customize-swatch-ripple { background: #4caf50; box-shadow: 0 0 0 6px rgba(76, 175, 80, 0.18) }
.customize-swatch[data-ripple="violet"] .customize-swatch-ripple { background: #9c27b0; box-shadow: 0 0 0 6px rgba(156, 39, 176, 0.18) }
.customize-swatch[data-ripple="silver"] .customize-swatch-ripple { background: #c8c8d0; box-shadow: 0 0 0 6px rgba(200, 200, 210, 0.18) }
.customize-swatch[data-ripple="coral"] .customize-swatch-ripple { background: #ff7f6b; box-shadow: 0 0 0 6px rgba(255, 127, 107, 0.18) }
.customize-swatch[data-ripple="amethyst"] .customize-swatch-ripple { background: #9966cc; box-shadow: 0 0 0 6px rgba(153, 102, 204, 0.18) }
.customize-swatch[data-ripple="rainbow"] .customize-swatch-ripple {
  background: conic-gradient(#ff5252, #ffca28, #66bb6a, #42a5f5, #ab47bc, #ff5252);
  box-shadow: 0 0 0 6px rgba(255, 255, 255, 0.12)
}

/* A "Name" placeholder recolored the same way the real thing is (see
   .name-flair below) - not a colored pill anymore, so the shop preview
   actually matches what equipping it does to your real display name. */
.customize-swatch-flair {
  font-family: 'Inter', sans-serif;
  font-size: 0.85rem;
  font-weight: 700;
  color: rgba(255, 255, 255, 0.5)
}
.customize-swatch-flair[data-flair="sapphire"] { color: #7fb2f7 }
.customize-swatch-flair[data-flair="ember"] { color: #ff8a65 }
.customize-swatch-flair[data-flair="silver"] { color: #cfd3da }
.customize-swatch-flair[data-flair="gold"] { color: #d9bb63 }
.customize-swatch-flair[data-flair="addict"] { color: #ce93d8 }
.customize-swatch-flair[data-flair="star"] { color: #64b5f6 }
.customize-swatch-flair[data-flair="jade"] { color: #81c995 }
.customize-swatch-flair[data-flair="crimson"] { color: #e57373 }

.customize-swatch-effect {
  font-size: 1.8rem;
  line-height: 1
}

/* ===== Equipped name flair - recolors the display name itself (header
   chip, profile modal, in-game "You" seat), rather than appending a
   separate colored label next to it. Solid color for the simple flairs;
   Legend and every tournament-exclusive veteran flair get an animated
   multi-tone gradient instead, achieved by clipping the gradient to the
   text itself (background-clip:text) so the name's own letters shimmer.
   Tournament flairs are each tinted toward their own tier's accent color
   (see .tournament-tier-bar[data-tier-key=...] in the Tournament section),
   so the reward visually ties back to what earned it. Same color mapping
   as .customize-swatch-flair above, so the shop preview matches exactly. ===== */
.name-flair {
  font-weight: 700
}
.name-flair[data-flair="sapphire"] { color: #7fb2f7 }
.name-flair[data-flair="ember"] { color: #ff8a65 }
.name-flair[data-flair="silver"] { color: #cfd3da }
.name-flair[data-flair="gold"] { color: #d9bb63 }
.name-flair[data-flair="addict"] { color: #ce93d8 }
.name-flair[data-flair="star"] { color: #64b5f6 }
.name-flair[data-flair="jade"] { color: #81c995 }
.name-flair[data-flair="crimson"] { color: #e57373 }

/* Each gradient flair is ONE rule shared by both the shop-preview swatch
   and the real name, with background-clip/color/background/animation all
   declared together - splitting background-clip:text into a separate rule
   from the background shorthand doesn't work (the background shorthand
   resets background-clip to its initial value wherever it's set, silently
   clobbering an earlier background-clip:text declaration even though that
   rule comes first in source order - equal-specificity rules on the same
   element resolve per property, not as whole rule blocks). This was a real
   bug: every tournament-exclusive flair rendered as an invisible-text solid
   block in the shop instead of shimmering colored text. */
.name-flair[data-flair="legend"], .customize-swatch-flair[data-flair="legend"] {
  background: linear-gradient(90deg, #ffd166, #b28dff, #ffd166);
  background-size: 220% auto;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  animation: flair-shimmer 3s linear infinite
}
.name-flair[data-flair="localLegend"], .customize-swatch-flair[data-flair="localLegend"] {
  background: linear-gradient(90deg, #b4835a, #ffcd8c, #b4835a);
  background-size: 220% auto;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  animation: flair-shimmer 3s linear infinite
}
.name-flair[data-flair="stateChampion"], .customize-swatch-flair[data-flair="stateChampion"] {
  background: linear-gradient(90deg, #96a5b4, #f5faff, #96a5b4);
  background-size: 220% auto;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  animation: flair-shimmer 3s linear infinite
}
.name-flair[data-flair="nationalHero"], .customize-swatch-flair[data-flair="nationalHero"] {
  background: linear-gradient(90deg, #c9a84c, #ff6464, #c9a84c);
  background-size: 220% auto;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  animation: flair-shimmer 2.6s linear infinite
}
.name-flair[data-flair="worldChampion"], .customize-swatch-flair[data-flair="worldChampion"] {
  background: linear-gradient(90deg, #ffd166, #9c6ade, #4d96ff, #ffd166);
  background-size: 320% auto;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  animation: flair-shimmer 2.8s linear infinite
}
.name-flair[data-flair="highRoller"], .customize-swatch-flair[data-flair="highRoller"] {
  background: linear-gradient(90deg, #60cdf0, #d2f5ff, #60cdf0);
  background-size: 220% auto;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  animation: flair-shimmer 2.4s linear infinite
}
.name-flair[data-flair="aLister"], .customize-swatch-flair[data-flair="aLister"] {
  background: linear-gradient(90deg, #e6539c, #ffbee1, #e6539c);
  background-size: 220% auto;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  animation: flair-shimmer 2.6s linear infinite
}
.name-flair[data-flair="undergroundLegend"], .customize-swatch-flair[data-flair="undergroundLegend"] {
  background: linear-gradient(90deg, #d63e3e, #ff8a8a, #d63e3e);
  background-size: 220% auto;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  animation: flair-shimmer 2s linear infinite, flair-pulse-glow-text 2s ease-in-out infinite
}

@keyframes flair-shimmer {
  to { background-position: 220% center }
}
/* Underground Legend's pulse, adapted from a box-shadow (which only works
   on a boxed element) to a text-shadow (which works on inline text). */
@keyframes flair-pulse-glow-text {
  0%, 100% { text-shadow: 0 0 3px rgba(214, 62, 62, 0.3) }
  50% { text-shadow: 0 0 10px rgba(214, 62, 62, 0.95) }
}
@media (prefers-reduced-motion: reduce) {
  .customize-swatch-flair,
  .name-flair {
    animation: none !important
  }
}

#room-modal {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.8);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 220
}

#room-content {
  background: #111;
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 0;
  padding: 26px 30px 30px;
  max-width: 360px;
  width: 90%
}

#room-tabs {
  display: flex;
  gap: 8px;
  margin-bottom: 20px
}

#room-content #btn-close-room {
  margin-top: 14px
}

#hroom {
  font-size: 0.55rem;
  text-transform: uppercase;
  letter-spacing: 1.5px;
  padding: 2px 8px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 0;
  color: #ffffff;
  font-weight: 500;
  font-family: 'IBM Plex Mono', monospace
}

/* Room lobby (shown in place of the solo bot-configuration overlay while
   gameStarted is false and the player is in a room, not a solo game) */
#room-lobby-overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.85);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 100
}

#room-lobby-card {
  background: #111;
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 0;
  padding: 30px 34px;
  max-width: 380px;
  width: 90%;
  text-align: center
}

#room-lobby-card h2 {
  font-size: 1.1rem;
  font-weight: 600;
  color: #e8e4dc;
  margin-bottom: 6px
}

#room-lobby-code {
  font-family: 'IBM Plex Mono', monospace;
  color: #c9a84c;
  letter-spacing: 2px
}

#room-lobby-hint {
  font-size: 0.75rem;
  color: rgba(255, 255, 255, 0.4);
  margin-bottom: 18px
}

#room-lobby-players {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-bottom: 20px
}

.room-lobby-player {
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 0;
  padding: 8px 12px;
  font-size: 0.82rem;
  color: #e8e4dc;
  text-align: left
}

#btn-room-start-game {
  font-family: 'Inter', sans-serif;
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.5px;
  padding: 11px 0;
  width: 100%;
  border: none;
  border-radius: 0;
  background: #c9a84c;
  color: #0d0d1a;
  cursor: pointer;
  transition: all 0.2s;
  text-transform: uppercase;
  margin-bottom: 10px
}

#btn-room-start-game:hover {
  background: #dbb856
}

#btn-room-start-game:disabled {
  background: rgba(255, 255, 255, 0.08);
  color: rgba(255, 255, 255, 0.3);
  cursor: not-allowed
}

#room-lobby-waiting {
  font-size: 0.78rem;
  color: rgba(255, 255, 255, 0.4);
  margin-bottom: 10px
}

/* ===== XP Popup (hand completion) ===== */
.xp-popup {
  top: 18%;
  font-size: 0.85rem;
  font-weight: 700;
  padding: 6px 16px;
  border-radius: 0
}

.xp-popup.positive {
  color: #6fd67a;
  border-color: rgba(76, 175, 80, 0.35)
}

.xp-popup.negative {
  color: #f29e9c;
  border-color: rgba(239, 83, 80, 0.35)
}

/* ===== App Settings Modal (Volume, Font, etc) ===== */
#app-settings-modal {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.8);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 210
}

#app-settings-content {
  background: #111;
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 0;
  padding: 30px 34px;
  max-width: 360px;
  width: 90%
}

#app-settings-content h2 {
  font-size: 0.95rem;
  font-weight: 600;
  color: #e8e4dc;
  margin-bottom: 18px;
  text-align: center
}

#app-settings-form {
  display: flex;
  flex-direction: column;
  gap: 14px;
  margin-bottom: 18px
}

.as-row {
  display: flex;
  flex-direction: column;
  gap: 4px
}

.as-row label {
  font-size: 0.6rem;
  text-transform: uppercase;
  letter-spacing: 1.5px;
  color: rgba(255, 255, 255, 0.25);
  font-weight: 500
}

.as-row input[type="range"] {
  width: 100%;
  accent-color: #c9a84c;
  height: 4px
}

.as-row select {
  padding: 8px 10px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 0;
  background: rgba(0, 0, 0, 0.4);
  color: #e8e4dc;
  font-family: 'Inter', sans-serif;
  font-size: 0.75rem;
  outline: none;
  cursor: pointer
}

.as-row select option {
  background: #1a1a1a;
  color: #e8e4dc
}

#app-settings-actions {
  display: flex;
  gap: 10px
}

#app-settings-actions button {
  flex: 1;
  padding: 10px;
  border: none;
  border-radius: 0;
  font-family: 'Inter', sans-serif;
  font-size: 0.75rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s
}

#app-settings-actions button:first-child {
  background: #c9a84c;
  color: #0d0d1a
}

#app-settings-actions button:first-child:hover {
  background: #dbb856
}

#app-settings-actions .sec-btn {
  background: transparent;
  border: 1px solid rgba(255, 255, 255, 0.08);
  color: rgba(255, 255, 255, 0.35)
}

#app-settings-actions .sec-btn:hover {
  border-color: rgba(255, 255, 255, 0.2);
  color: rgba(255, 255, 255, 0.6)
}

.as-vol-label {
  display: flex;
  justify-content: space-between;
  font-size: 0.65rem;
  color: rgba(255, 255, 255, 0.3);
  margin-top: -2px
}

/* ===== Pause Overlay ===== */
#pause-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 300;
  backdrop-filter: blur(16px);
  background: rgba(0, 0, 0, 0.7);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center
}

#pause-overlay h2 {
  font-family: 'Playfair Display', Georgia, serif;
  font-size: 3rem;
  font-weight: 700;
  color: #e8e4dc;
  margin-bottom: 10px;
  letter-spacing: 6px;
  text-shadow: 0 0 40px rgba(201, 168, 76, 0.15)
}

#pause-overlay p {
  font-size: 0.7rem;
  color: rgba(255, 255, 255, 0.25);
  margin-bottom: 30px;
  letter-spacing: 2px
}

#btn-unpause {
  font-family: 'Inter', sans-serif;
  font-size: 0.85rem;
  font-weight: 600;
  letter-spacing: 2px;
  padding: 14px 48px;
  border: none;
  border-radius: 0;
  background: #c9a84c;
  color: #0d0d1a;
  cursor: pointer;
  transition: all 0.2s;
  text-transform: uppercase
}

#btn-unpause:hover {
  background: #dbb856;
  box-shadow: 0 4px 24px rgba(201, 168, 76, 0.3);
  transform: translateY(-2px)
}

/* ===== App Layout ===== */
#app {
  display: flex;
  flex-direction: column;
  height: 100vh;
  overflow: hidden;
  position: relative;
  z-index: 1
}

/* ===== Pre-hand overlay ===== */
#pre-hand-overlay {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.75);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 25;
  backdrop-filter: blur(8px)
}

#pre-hand-card {
  background: #111;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 0;
  padding: 24px 28px;
  text-align: center;
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.35);
  max-width: 400px;
  width: 90%
}

#pre-hand-card h2 {
  font-size: 1rem;
  font-weight: 600;
  color: #e8e4dc;
  margin-bottom: 4px
}

#pre-hand-card p {
  font-size: 0.75rem;
  color: rgba(255, 255, 255, 0.45);
  margin-bottom: 14px
}

#bot-customize-form {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-bottom: 14px;
  text-align: left
}

.bc-fg {
  display: flex;
  flex-direction: column;
  gap: 3px
}

.bc-fg label {
  font-size: 0.6rem;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: rgba(255, 255, 255, 0.3);
  font-weight: 500
}

.bc-fg select {
  padding: 8px 10px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 0;
  background: rgba(0, 0, 0, 0.4);
  color: #e8e4dc;
  font-family: 'Inter', sans-serif;
  font-size: 0.75rem;
  outline: none
}

.bc-slider-row {
  display: flex;
  align-items: center;
  gap: 8px
}

.bc-slider-row input {
  flex: 1;
  accent-color: #c9a84c;
  height: 4px
}

.bc-range {
  width: 100%;
  accent-color: #c9a84c;
  height: 4px;
  margin: 4px 0
}

.bc-range-val {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 0.7rem;
  color: #c9a84c;
  text-align: right
}

.agg-slider {
  background: linear-gradient(to right, #4dd0e1, #c9a84c, #ef5350);
  height: 4px;
  border-radius: 0;
  accent-color: #c9a84c
}

#btn-start-hand {
  font-family: 'Inter', sans-serif;
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 1px;
  padding: 10px 24px;
  border: none;
  border-radius: 0;
  background: #c9a84c;
  color: #0d0d1a;
  cursor: pointer;
  transition: all 0.2s
}

#btn-start-hand:hover {
  background: #dbb856
}

/* ===== Header ===== */
#header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 20px;
  background: rgba(0, 0, 0, 0.6);
  border-bottom: 1px solid rgba(255, 255, 255, 0.04);
  flex-shrink: 0;
  min-height: 42px;
  backdrop-filter: blur(8px)
}

#hl {
  display: flex;
  align-items: center;
  gap: 10px
}

#logo-link {
  color: #fff !important;
  text-decoration: none !important;
  font-size: 0.85rem;
  font-weight: 600;
  letter-spacing: 0.3px;
  cursor: pointer;
  transition: opacity 0.2s
}

#logo-link:hover {
  opacity: 0.85
}

#hu {
  font-size: 0.75rem;
  color: rgba(255, 255, 255, 0.3)
}

#hu.hu-clickable {
  cursor: pointer;
  text-decoration: underline;
  text-decoration-color: transparent;
  transition: color 0.2s, text-decoration-color 0.2s
}

#hu.hu-clickable:hover {
  color: rgba(255, 255, 255, 0.65);
  text-decoration-color: rgba(255, 255, 255, 0.4)
}

#hm {
  font-size: 0.55rem;
  text-transform: uppercase;
  letter-spacing: 1.5px;
  padding: 2px 8px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 0;
  color: #ffffff;
  font-weight: 500
}

#hranked {
  font-size: 0.55rem;
  text-transform: uppercase;
  letter-spacing: 1.5px;
  padding: 2px 8px;
  border: 1px solid rgba(201, 168, 76, 0.35);
  border-radius: 0;
  color: #c9a84c;
  font-weight: 600
}

#hc {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.8rem;
  color: rgba(255, 255, 255, 0.35)
}

#h-counter {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 0.75rem;
  color: rgba(255, 255, 255, 0.3)
}

#h-street {
  font-weight: 600;
  color: #e8e4dc
}

#h-pot {
  color: #c9a84c;
  font-weight: 500
}

#h-blinds {
  color: rgba(255, 255, 255, 0.3);
  font-family: 'IBM Plex Mono', monospace;
  font-size: 0.65rem
}

.hd {
  color: rgba(255, 255, 255, 0.05)
}

#hr {
  display: flex;
  align-items: center;
  gap: 6px
}

#hr button {
  font-family: 'Inter', sans-serif;
  font-size: 0.6rem;
  text-transform: uppercase;
  letter-spacing: 1px;
  padding: 4px 10px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 0;
  background: transparent;
  color: #ffffff;
  cursor: pointer;
  transition: all 0.2s
}

#hr button:hover {
  border-color: rgba(255, 255, 255, 0.15);
  color: rgba(255, 255, 255, 0.8)
}

#btn-pause {
  color: #c9a84c !important;
  border-color: rgba(201, 168, 76, 0.2) !important
}

/* ===== Main Layout ===== */
#main-layout {
  display: flex;
  flex: 1;
  min-height: 0;
  overflow: hidden
}

/* ===== Left Panel ===== */
#left-panel {
  width: 200px;
  flex-shrink: 0;
  border-right: 1px solid rgba(255, 255, 255, 0.03);
  display: flex;
  flex-direction: column;
  background: rgba(0, 0, 0, 0.2);
  height: 100%;
  min-height: 0;
  overflow: hidden
}

#turn-indicator-box {
  padding: 10px 12px 4px;
  flex-shrink: 0
}

#turn-indicator {
  font-size: 0.6rem;
  text-transform: uppercase;
  letter-spacing: 1.5px;
  color: rgba(255, 255, 255, 0.2);
  font-weight: 500;
  transition: all 0.3s
}

#turn-indicator.active-turn {
  color: #c9a84c;
  text-shadow: 0 0 12px rgba(201, 168, 76, 0.2);
  animation: pulse 1.5s ease-in-out infinite
}

@keyframes pulse {

  0%,
  100% {
    opacity: 0.7
  }

  50% {
    opacity: 1
  }
}

#history-box {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-height: 0;
  padding: 4px 12px 10px;
  overflow: hidden
}

#history-header {
  font-size: 0.55rem;
  text-transform: uppercase;
  letter-spacing: 1.5px;
  color: rgba(255, 255, 255, 0.5);
  font-weight: 500;
  margin-bottom: 6px;
  flex-shrink: 0
}

#history-list {
  overflow-y: auto;
  overflow-x: hidden;
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  gap: 1px;
  scrollbar-width: thin;
  scrollbar-color: rgba(255, 255, 255, 0.15) transparent
}

#history-list::-webkit-scrollbar {
  width: 6px
}

#history-list::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.15);
  border-radius: 0
}

#history-list::-webkit-scrollbar-thumb:hover {
  background: rgba(255, 255, 255, 0.25)
}

.h-line {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 0.6rem;
  color: rgba(255, 255, 255, 0.55);
  padding: 2px 0;
  line-height: 1.5;
  white-space: normal;
  word-wrap: break-word;
  overflow-wrap: break-word
}

/* ===== Center Area ===== */
#center-area {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: safe center;
  padding: 30px 16px 0;
  min-width: 0;
  min-height: 0;
  overflow-y: auto;
  overflow-x: hidden;
  margin-top: 0;
  background-image:
    radial-gradient(ellipse at 50% 0%, rgba(255, 255, 255, 0.02) 0%, transparent 45%),
    repeating-linear-gradient(0deg, transparent, transparent 38px, rgba(255, 255, 255, 0.012) 38px, rgba(255, 255, 255, 0.012) 39px),
    repeating-linear-gradient(90deg, transparent, transparent 38px, rgba(255, 255, 255, 0.012) 38px, rgba(255, 255, 255, 0.012) 39px),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.25'/%3E%3C/svg%3E")
}

/* ===== Table Wrapper ===== */
#table-wrapper {
  position: relative;
  width: 1260px;
  height: 590px;
  flex-shrink: 0
}

/* Textured rail behind the felt so the surrounding black space isn't flat */
#table-wrapper::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 1100px;
  height: 680px;
  border-radius: 390px / 250px;
  background-image:
    radial-gradient(ellipse at 28% 25%, rgba(120, 82, 32, 0.16) 0%, transparent 55%),
    radial-gradient(ellipse at 76% 78%, rgba(20, 24, 36, 0.5) 0%, transparent 60%),
    repeating-linear-gradient(45deg, rgba(255, 255, 255, 0.015) 0px, rgba(255, 255, 255, 0.015) 1px, transparent 1px, transparent 7px),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.35'/%3E%3C/svg%3E"),
    linear-gradient(160deg, #1a1108 0%, #0c0805 45%, #050403 100%);
  box-shadow: inset 0 0 140px rgba(0, 0, 0, 0.85), 0 0 100px rgba(0, 0, 0, 0.55);
  z-index: 1;
  pointer-events: none
}

/* ===== Table Felt ===== */
#table-felt {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 880px;
  height: 480px;
  background: radial-gradient(ellipse at 30% 40%, #1f7a42 0%, #155d30 30%, #0f4d2b 55%, #0a3d22 100%);
  border-radius: 340px/205px;
  border: 14px solid #2a1a0a;
  box-shadow: 0 0 60px rgba(0, 0, 0, 0.8), inset 0 0 100px rgba(0, 0, 0, 0.25);
  z-index: 2;
  overflow: hidden
}

#table-felt::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  border-radius: 0;
  background: repeating-linear-gradient(0deg, transparent, transparent 3px, rgba(0, 0, 0, 0.02) 3px, rgba(0, 0, 0, 0.02) 5px), repeating-linear-gradient(90deg, transparent, transparent 3px, rgba(0, 0, 0, 0.02) 3px, rgba(0, 0, 0, 0.02) 5px);
  pointer-events: none;
  z-index: 1
}

#tf-felt-texture {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  border-radius: 0;
  background: radial-gradient(circle at 20% 30%, rgba(255, 255, 255, 0.02) 0%, transparent 50%), radial-gradient(circle at 80% 70%, rgba(255, 255, 255, 0.015) 0%, transparent 50%);
  pointer-events: none;
  z-index: 1
}

#tf-stitch-outer {
  position: absolute;
  top: 8px;
  left: 8px;
  right: 8px;
  bottom: 8px;
  border-radius: 330px/195px;
  border: 2px dashed rgba(255, 255, 255, 0.06);
  pointer-events: none;
  z-index: 1
}

#tf-inner-ring {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 75%;
  height: 65%;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.05);
  pointer-events: none;
  z-index: 1
}

#tf-label {
  position: absolute;
  top: 10%;
  left: 50%;
  transform: translateX(-50%);
  font-size: 0.5rem;
  letter-spacing: 6px;
  color: rgba(255, 255, 255, 0.04);
  font-weight: 600;
  z-index: 2
}

/* ===== Board ===== */
#board-area {
  position: absolute;
  top: 32%;
  left: 50%;
  transform: translate(-50%, -50%);
  display: flex;
  gap: 12px;
  z-index: 3;
  perspective: 900px
}

.bc {
  width: 82px;
  height: 116px;
  border-radius: 0
}

.bc.empty {
  background: rgba(255, 255, 255, 0.03);
  border: 1.5px dashed rgba(255, 255, 255, 0.05)
}

/* Flop reveal - a real dealer-style turn (face-down to face-up), not an
   instant pop-in. .bc-flip-inner rotates 180deg on its Y axis; both faces
   are absolutely stacked with backface-visibility:hidden so only one is
   ever visible at a time, and the back face is pre-rotated 180deg so it
   reads right-side-up once the whole thing has turned. */
.bc-flip {
  width: 100%;
  height: 100%
}

.bc-flip-inner {
  position: relative;
  width: 100%;
  height: 100%;
  transition: transform 0.5s cubic-bezier(0.3, 0.15, 0.15, 1);
  transform-style: preserve-3d
}

.bc-flip.flipped .bc-flip-inner {
  transform: rotateY(180deg)
}

.bc-flip-face {
  position: absolute;
  inset: 0;
  backface-visibility: hidden;
  border-radius: 0;
  overflow: hidden
}

.bc-flip-face.bc-flip-back {
  transform: rotateY(180deg)
}

@media (prefers-reduced-motion: reduce) {
  .bc-flip-inner {
    transition: none
  }
}

/* ===== Pot Center ===== */
#pot-center {
  position: absolute;
  bottom: 12%;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  z-index: 3;
  background: rgba(0, 0, 0, 0.6);
  border: 1px solid rgba(201, 168, 76, 0.2);
  border-radius: 0;
  padding: 4px 14px;
  box-shadow: 0 0 20px rgba(201, 168, 76, 0.06)
}

#pot-label {
  font-size: 0.5rem;
  text-transform: uppercase;
  letter-spacing: 2px;
  color: rgba(255, 255, 255, 0.2);
  font-weight: 500
}

#pot-value {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 1.2rem;
  color: #c9a84c;
  font-weight: 600;
  text-shadow: 0 0 20px rgba(201, 168, 76, 0.15);
  letter-spacing: 0.5px
}

/* ===== Ripple Effects ===== */
@keyframes rippleWin {
  0% {
    box-shadow: 0 0 0 0 rgba(76, 175, 80, 0.6), 0 0 0 0 rgba(76, 175, 80, 0.35);
    border-color: #2a1a0a;
    filter: brightness(1)
  }

  35% {
    box-shadow: 0 0 0 60px rgba(76, 175, 80, 0.22), 0 0 0 130px rgba(76, 175, 80, 0.08);
    border-color: rgba(76, 175, 80, 0.5);
    filter: brightness(1.12)
  }

  100% {
    box-shadow: 0 0 0 0 rgba(76, 175, 80, 0), 0 0 0 0 rgba(76, 175, 80, 0);
    border-color: #2a1a0a;
    filter: brightness(1)
  }
}

@keyframes rippleLose {
  0% {
    box-shadow: 0 0 0 0 rgba(239, 83, 80, 0.6), 0 0 0 0 rgba(239, 83, 80, 0.35);
    border-color: #2a1a0a;
    filter: brightness(1)
  }

  35% {
    box-shadow: 0 0 0 60px rgba(239, 83, 80, 0.22), 0 0 0 130px rgba(239, 83, 80, 0.08);
    border-color: rgba(239, 83, 80, 0.5);
    filter: brightness(0.94)
  }

  100% {
    box-shadow: 0 0 0 0 rgba(239, 83, 80, 0), 0 0 0 0 rgba(239, 83, 80, 0);
    border-color: #2a1a0a;
    filter: brightness(1)
  }
}

#table-felt.ripple-win {
  animation: rippleWin 2.2s ease-out
}

#table-felt.ripple-lose {
  animation: rippleLose 2.2s ease-out
}

/* ===== Action Popups ===== */
#action-popup-area {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 15;
  pointer-events: none;
  overflow: visible
}

.action-popup {
  position: absolute;
  background: rgba(0, 0, 0, 0.88);
  border: 1px solid rgba(201, 168, 76, 0.12);
  border-radius: 0;
  padding: 4px 10px;
  font-size: 0.6rem;
  color: #c9a84c;
  font-weight: 500;
  font-family: 'IBM Plex Mono', monospace;
  opacity: 0;
  transform: translate(-50%, -50%) scale(0.8);
  transition: all 0.4s ease-out;
  white-space: nowrap;
  pointer-events: none;
  top: 45%;
  left: 50%
}

.action-popup.show {
  opacity: 1;
  transform: translate(-50%, -50%) scale(1);
  animation: popupFade 2s ease-out forwards
}

@keyframes popupFade {
  0% {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1)
  }

  70% {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1.02)
  }

  100% {
    opacity: 0;
    transform: translate(-50%, -50%) scale(0.95)
  }
}

/* ===== Toasts - viewport-anchored, visible over any page/modal ===== */
#toast-container {
  position: fixed;
  top: 76px;
  right: 20px;
  z-index: 500;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 8px;
  pointer-events: none
}

.toast {
  background: rgba(13, 13, 26, 0.95);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 0;
  padding: 10px 16px;
  font-family: 'Inter', sans-serif;
  font-size: 0.8rem;
  font-weight: 600;
  color: #e8e4dc;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.4);
  opacity: 0;
  transform: translateX(20px);
  transition: opacity 0.3s ease, transform 0.3s ease
}

.toast.show {
  opacity: 1;
  transform: translateX(0)
}

.toast-coins {
  border-color: rgba(201, 168, 76, 0.4);
  color: #c9a84c
}

.toast-coins-loss {
  border-color: rgba(239, 83, 80, 0.35);
  color: rgba(239, 83, 80, 0.85)
}

/* ===== Celebration / Heartbreak ===== */
#celebration-container {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 30;
  overflow: hidden
}

.celeb-particle {
  position: absolute;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  opacity: 1;
  animation: particleFall 3s ease-out forwards
}

/* Victory-effect cosmetics that use an emoji glyph instead of a plain
   colored dot (Coin Shower, Fireworks, Golden Glow, Royal Fanfare) - same
   falling/rotating animation, just sized and shaped for a character. */
.celeb-particle-emoji {
  width: auto;
  height: auto;
  border-radius: 0;
  background: none !important;
  font-size: 1.5rem;
  line-height: 1
}

/* ===== Click ripple (cosmetic, color set by the equipped rippleColor via
   the <html data-ripple="..."> attribute) - spawned on every button click
   site-wide, see the delegated click listener. ===== */
.click-ripple {
  position: fixed;
  width: 10px;
  height: 10px;
  margin-left: -5px;
  margin-top: -5px;
  border-radius: 50%;
  pointer-events: none;
  z-index: 9999;
  background: rgba(255, 255, 255, 0.55);
  animation: click-ripple-expand 0.6s ease-out forwards
}

@keyframes click-ripple-expand {
  0% { transform: scale(1); opacity: 0.6 }
  100% { transform: scale(10); opacity: 0 }
}

html[data-ripple="gold"] .click-ripple { background: rgba(201, 168, 76, 0.6) }
html[data-ripple="crimson"] .click-ripple { background: rgba(211, 66, 66, 0.55) }
html[data-ripple="azure"] .click-ripple { background: rgba(66, 165, 245, 0.55) }
html[data-ripple="emerald"] .click-ripple { background: rgba(76, 175, 80, 0.55) }
html[data-ripple="violet"] .click-ripple { background: rgba(156, 39, 176, 0.55) }
html[data-ripple="silver"] .click-ripple { background: rgba(200, 200, 210, 0.55) }
html[data-ripple="coral"] .click-ripple { background: rgba(255, 127, 107, 0.55) }
html[data-ripple="amethyst"] .click-ripple { background: rgba(153, 102, 204, 0.55) }
html[data-ripple="rainbow"] .click-ripple {
  background: conic-gradient(#ff5252, #ffca28, #66bb6a, #42a5f5, #ab47bc, #ff5252);
  opacity: 0.55
}

@keyframes particleFall {
  0% {
    opacity: 1;
    transform: translateY(0) rotate(0deg) scale(1)
  }

  100% {
    opacity: 0;
    transform: translateY(100vh) rotate(720deg) scale(0.3)
  }
}

.heartbreak-particle {
  position: absolute;
  font-size: 2rem;
  opacity: 1;
  animation: heartBreak 2s ease-out forwards
}

@keyframes heartBreak {
  0% {
    opacity: 1;
    transform: translateY(0) scale(1)
  }

  50% {
    transform: translateY(-40px) scale(1.3);
    opacity: 0.8
  }

  100% {
    opacity: 0;
    transform: translateY(60px) scale(0.3) rotate(180deg)
  }
}

/* ===== Cards ===== */
.card {
  width: 100%;
  height: 100%;
  border-radius: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.35)
}

.card-f {
  background: #faf8f5
}

.crt {
  position: absolute;
  top: 4px;
  left: 6px;
  font-family: 'Inter', sans-serif;
  font-size: 12px;
  font-weight: 600
}

.crb {
  position: absolute;
  bottom: 4px;
  right: 6px;
  font-family: 'Inter', sans-serif;
  font-size: 12px;
  font-weight: 600;
  transform: rotate(180deg)
}

.csc {
  font-size: 24px
}

.card-b {
  background: #1a3a5c;
  background-image: linear-gradient(45deg, #1a3a5c 25%, #2a5a7c 25%, #2a5a7c 50%, #1a3a5c 50%, #1a3a5c 75%, #2a5a7c 75%);
  background-size: 8px 8px;
  border: 2px solid #1a2a3c
}

/* Small cards in seats - enlarged from the original 23x32 so the equipped
   card back actually reads at a glance around the table, not just on your
   own hole cards. */
.cs {
  display: inline-block;
  width: 32px;
  height: 45px;
  border-radius: 0;
  font-family: 'Inter', sans-serif;
  font-size: 13px;
  font-weight: 600;
  text-align: center;
  line-height: 45px;
  background: #faf8f5;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25);
  margin: 0 2px
}

.csb {
  background: #1a3a5c;
  background-image: linear-gradient(45deg, #1a3a5c 25%, #2a5a7c 25%, #2a5a7c 50%, #1a3a5c 50%, #1a3a5c 75%, #2a5a7c 75%);
  background-size: 4px 4px;
  border: 1px solid #1a2a3c
}

/* ===== Seats ===== */
#seats-container {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 5;
  pointer-events: none
}

.seat {
  position: absolute;
  transform: translate(-50%, -50%);
  background: rgba(0, 0, 0, 0.85);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 0;
  padding: 8px 14px;
  text-align: center;
  min-width: 148px;
  transition: all 0.3s;
  backdrop-filter: blur(4px);
  pointer-events: auto
}

/* A pulsing red edge (border + an expanding "ring" via a second box-shadow
   layer), not just a static highlight - paired with .turn-pointer above,
   red is now the whole table's shared "it's your turn" signal. */
.seat.active {
  border-color: #e63946;
  background: rgba(0, 0, 0, 0.92);
  animation: seatActivePulse 1.4s ease-in-out infinite
}

@keyframes seatActivePulse {
  0%, 100% {
    box-shadow: 0 0 8px rgba(230, 57, 70, 0.25), 0 0 0 0 rgba(230, 57, 70, 0.35)
  }
  50% {
    box-shadow: 0 0 20px rgba(230, 57, 70, 0.55), 0 0 0 5px rgba(230, 57, 70, 0.12)
  }
}

@media (prefers-reduced-motion: reduce) {
  .seat.active,
  .turn-pointer {
    animation: none
  }
}

.seat.folded {
  opacity: 0.25
}

.sh {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  margin-bottom: 2px
}

.sn {
  font-size: 11px;
  font-weight: 500;
  color: #d4d0c8;
  white-space: nowrap
}

.sc {
  margin: 2px 0
}

.ss {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 12px;
  color: #c9a84c;
  font-weight: 500
}

.sbet {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 10px;
  color: rgba(255, 255, 255, 0.12);
  margin-top: 1px;
  min-height: 13px
}

/* ===== Turn Pointer (floating over the active player, replaces the old
   gold chip) - a red hand jabbing down at the seat, easier to spot at a
   glance than a small coin. Bobs downward (toward the seat) rather than
   up, reading as "pointing at this one" instead of just idling. ===== */
.turn-pointer {
  position: absolute;
  top: -32px;
  left: 50%;
  transform: translateX(-50%);
  color: #e63946;
  filter: drop-shadow(0 0 6px rgba(230, 57, 70, 0.7)) drop-shadow(0 2px 3px rgba(0, 0, 0, 0.5));
  animation: turnPointerBob 1.1s ease-in-out infinite;
  z-index: 10
}

.turn-pointer svg {
  display: block;
  fill: currentColor
}

@keyframes turnPointerBob {
  0%, 100% {
    transform: translateX(-50%) translateY(0)
  }
  50% {
    transform: translateX(-50%) translateY(7px)
  }
}

/* ===== Player colors ===== */
.seat.color-0 {
  border-color: rgba(255, 255, 255, 0.18)
}

.seat.color-1 {
  border-color: #4dd0e1;
  box-shadow: 0 0 16px rgba(77, 208, 225, 0.2)
}

.seat.color-2 {
  border-color: #ffa726;
  box-shadow: 0 0 16px rgba(255, 167, 38, 0.2)
}

.seat.color-3 {
  border-color: #ab47bc;
  box-shadow: 0 0 16px rgba(171, 71, 188, 0.2)
}

.seat.color-4 {
  border-color: #66bb6a;
  box-shadow: 0 0 16px rgba(102, 187, 106, 0.2)
}

.seat.color-5 {
  border-color: #ef5350;
  box-shadow: 0 0 16px rgba(239, 83, 80, 0.2)
}

/* Your own seat is slightly larger than everyone else's - scale rather
   than resizing padding/fonts individually, so it stays visually identical
   in proportion, just a bit more prominent. transform re-declares the
   base .seat translate(-50%,-50%) since a later transform value replaces
   the earlier one entirely rather than composing with it. */
.seat.you {
  border-color: #ffffff !important;
  box-shadow: 0 0 16px rgba(255, 255, 255, 0.2);
  transform: translate(-50%, -50%) scale(1.08);
  z-index: 6
}

/* ===== Bot chat bubbles ===== */
#bot-chat-container {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 6;
  pointer-events: none
}

.bot-chat-bubble {
  position: absolute;
  transform: translate(-50%, calc(-100% - 46px));
  background: rgba(20, 20, 28, 0.95);
  border: 1px solid rgba(201, 168, 76, 0.3);
  border-radius: 0;
  padding: 8px 14px;
  max-width: 170px;
  font-family: 'Inter', sans-serif;
  font-size: 0.7rem;
  line-height: 1.4;
  color: #e8e4dc;
  text-align: center;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.4);
  opacity: 0;
  transition: opacity 0.35s ease
}

.bot-chat-bubble.visible {
  opacity: 1
}

.bot-chat-bubble::after {
  content: '';
  position: absolute;
  bottom: -6px;
  left: 50%;
  transform: translateX(-50%);
  border-width: 6px 6px 0 6px;
  border-style: solid;
  border-color: rgba(20, 20, 28, 0.95) transparent transparent transparent
}

/* ===== Badges ===== */
.badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  font-family: 'Inter', sans-serif;
  font-size: 8px;
  font-weight: 600
}

.db {
  background: #c9a84c;
  color: #0d0d1a
}

.sbb {
  background: rgba(255, 255, 255, 0.05);
  color: rgba(255, 255, 255, 0.35);
  border: 1px solid rgba(255, 255, 255, 0.06)
}

.bbb {
  background: rgba(255, 255, 255, 0.08);
  color: rgba(255, 255, 255, 0.45);
  border: 1px solid rgba(255, 255, 255, 0.1)
}

/* Longer text than SB/BB, so it overrides the base .badge circle with a
   pill-shaped box instead - still hard-cornered (border-radius:0), matching
   the rest of the site's flat-edge styling. */
.aib {
  width: auto;
  height: auto;
  padding: 1px 4px;
  border-radius: 0;
  background: rgba(239, 83, 80, 0.15);
  color: #ef5350;
  border: 1px solid rgba(239, 83, 80, 0.4);
  margin-left: 3px;
  white-space: nowrap
}

/* ===== Player Area =====
   Now also holds #action-bar (see its own comment) so the hole cards and
   the action buttons sit in one row - max-width widened from 880 to fit
   both comfortably (matching #table-wrapper's own 1260px budget above it),
   flex-wrap as a safety net at narrower widths rather than overflowing. */
#player-area {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 16px;
  padding: 14px 26px;
  margin-top: 10px;
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid rgba(255, 255, 255, 0.04);
  border-radius: 0;
  min-height: 100px;
  width: 100%;
  max-width: 1180px;
  flex-shrink: 0;
  position: relative;
  z-index: 10
}

#player-cards {
  display: flex;
  gap: 12px
}

/* Enlarged from the original 68x98 - your own hole cards are the one card
   pairing that should always read clearly at a glance. */
#player-cards .card {
  width: 82px;
  height: 118px
}

#player-info {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px
}

#player-name-display {
  font-size: 0.8rem;
  color: rgba(255, 255, 255, 0.5);
  font-weight: 500
}

#player-stack-display {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 1.15rem;
  color: #c9a84c;
  font-weight: 600
}

/* ===== Chip Stack Visual ===== */
#chip-stack-container {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-left: auto;
  padding-left: 16px;
  border-left: 1px solid rgba(255, 255, 255, 0.04)
}

.chip-stack-visual {
  display: flex;
  flex-direction: row-reverse;
  align-items: center;
  position: relative;
  width: 60px;
  height: 24px
}

.chip-token {
  position: absolute;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  border: 2px solid rgba(255, 255, 255, 0.3);
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.4), inset 0 1px 2px rgba(255, 255, 255, 0.2);
  transition: all 0.4s ease
}

.chip-token.chip-1000 {
  background: radial-gradient(circle at 35% 35%, #ffd700, #ffaa00, #cc8800);
  border-color: #ffe066
}

.chip-token.chip-500 {
  background: radial-gradient(circle at 35% 35%, #9b59b6, #8e44ad, #6c3483);
  border-color: #bb77d0
}

.chip-token.chip-100 {
  background: radial-gradient(circle at 35% 35%, #e74c3c, #c0392b, #a93226);
  border-color: #ff6b6b
}

.chip-token.chip-25 {
  background: radial-gradient(circle at 35% 35%, #3498db, #2980b9, #21618c);
  border-color: #5dade2
}

.chip-token.chip-10 {
  background: radial-gradient(circle at 35% 35%, #2ecc71, #27ae60, #1e8449);
  border-color: #58d68d
}

.chip-token.chip-5 {
  background: radial-gradient(circle at 35% 35%, #e67e22, #d35400, #ba4a00);
  border-color: #f0a04b
}

#chip-balance-text {
  display: none
}

/* ===== Timer Bar ===== */
/* Turn countdown ring, next to the balance in the bottom bar - only visible
   while a time limit is actually running (hidden otherwise via .hidden). */
#turn-timer-ring {
  position: relative;
  width: 44px;
  height: 44px;
  flex-shrink: 0
}

#turn-timer-ring svg {
  transform: rotate(-90deg)
}

.ttr-track {
  fill: none;
  stroke: rgba(255, 255, 255, 0.1);
  stroke-width: 3
}

.ttr-progress {
  fill: none;
  stroke: #c9a84c;
  stroke-width: 3;
  stroke-linecap: round;
  transition: stroke-dashoffset 0.9s linear, stroke 0.3s ease
}

#turn-timer-ring.warning .ttr-progress {
  stroke: #ffa726
}

#turn-timer-ring.danger .ttr-progress {
  stroke: #ef5350
}

#ttr-text {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: 'IBM Plex Mono', monospace;
  font-size: 0.72rem;
  font-weight: 600;
  color: #e8e4dc
}

/* ===== Last Action ===== */
.la {
  font-size: 7px;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.2);
  margin-top: 1px;
  letter-spacing: 0.5px;
  font-family: 'IBM Plex Mono', monospace
}

/* ===== Action Bar =====
   Lives inside #player-area now, beside the hole cards, rather than as its
   own centered row underneath - and stays permanently in the layout flow
   (opacity/visibility toggle via .inactive, not display:none) so showing
   it never changes #player-area's height and never shifts the vertically-
   centered table above it. */
#action-bar {
  display: flex;
  align-items: center;
  flex-shrink: 0;
  margin-left: auto;
  transition: opacity 0.2s ease;
  opacity: 1;
  visibility: visible;
  position: relative;
  z-index: 10
}

#action-bar.inactive {
  opacity: 0;
  visibility: hidden;
  pointer-events: none
}

#hotkey-hint {
  text-align: center;
  font-size: 0.6rem;
  color: rgba(255, 255, 255, 0.2);
  letter-spacing: 0.5px;
  margin-top: 2px;
  font-family: 'IBM Plex Mono', monospace
}

.act-btn {
  padding: 10px 28px;
  border: none;
  border-radius: 0;
  font-family: 'Inter', sans-serif;
  font-size: 0.78rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.15s;
  text-transform: uppercase;
  letter-spacing: 1px;
  margin: 0 5px
}

.act-btn:hover {
  filter: brightness(1.2);
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3)
}

.act-btn:active {
  transform: scale(0.97)
}

.fold-btn {
  background: #5c1a1a;
  color: #e8b4b4
}

.check-btn {
  background: #1a4a2a;
  color: #a8d8b8
}

.call-btn {
  background: #1a2a5c;
  color: #b4c8e8
}

.bet-btn {
  background: #5c3a0a;
  color: #e8d0a0
}

.raise-btn {
  background: #3a1a5c;
  color: #c8b4e8
}

#bet-area {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-left: 6px
}

#bet-slider {
  width: 90px;
  accent-color: #c9a84c;
  height: 3px
}

#bet-amount {
  width: 60px;
  padding: 5px 6px;
  border: 1px solid rgba(255, 255, 255, 0.07);
  border-radius: 0;
  background: rgba(0, 0, 0, 0.4);
  color: #c9a84c;
  font-family: 'IBM Plex Mono', monospace;
  font-size: 0.8rem;
  text-align: center;
  font-weight: 500
}

/* ===== Ranked entry intro (plays once, right after "Begin Ranked Game") =====
   A short "entering the room" moment: a spotlight sweep, a stylized table
   with an emoji cast already seated, and a walking figure approaching the
   one open seat, before fading into the real ranked table. All animations
   live directly on these elements (not toggled via a helper class), so
   simply removing/adding #ranked-intro-overlay's .hidden class (display:
   none <-> flex) is enough to replay the whole sequence from the start
   every time a new ranked session begins - a display:none->visible element
   always restarts its CSS animations from frame zero. */
#ranked-intro-overlay {
  position: fixed;
  inset: 0;
  z-index: 900;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  pointer-events: none;
  background: radial-gradient(ellipse at 50% 40%, #2a1f0a 0%, #100b02 55%, #000 100%);
  opacity: 0;
  animation: ranked-intro-fade-in 0.6s ease forwards, ranked-intro-fade-out 0.6s ease forwards 2.9s
}

@keyframes ranked-intro-fade-in {
  from { opacity: 0 }
  to { opacity: 1 }
}

@keyframes ranked-intro-fade-out {
  from { opacity: 1 }
  to { opacity: 0 }
}

#ranked-intro-spotlight {
  position: absolute;
  top: -20%;
  left: -20%;
  width: 60%;
  height: 160%;
  background: linear-gradient(100deg, transparent 30%, rgba(255, 235, 180, 0.16) 48%, rgba(255, 235, 180, 0.32) 50%, rgba(255, 235, 180, 0.16) 52%, transparent 70%);
  transform: rotate(12deg) translateX(-120%);
  animation: ranked-intro-sweep 1.4s ease-in-out forwards
}

@keyframes ranked-intro-sweep {
  to { transform: rotate(12deg) translateX(220%) }
}

#ranked-intro-scene {
  position: relative;
  width: 100%;
  max-width: 560px;
  height: 300px;
  opacity: 0;
  transform: scale(0.92);
  animation: ranked-intro-scene-in 0.9s ease forwards 0.5s
}

@keyframes ranked-intro-scene-in {
  to { opacity: 1; transform: scale(1) }
}

#ranked-intro-table {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -46%);
  width: 420px;
  height: 220px;
  border-radius: 210px/110px;
  background: radial-gradient(ellipse at 35% 35%, #1f7a42 0%, #155d30 45%, #0a3d22 100%);
  border: 9px solid #2a1a0a;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.6)
}

.ranked-intro-seat {
  position: absolute;
  display: flex;
  flex-direction: column;
  align-items: center;
  font-size: 2.1rem;
  filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.5))
}

.ranked-intro-tie {
  font-size: 0.95rem;
  margin-top: -6px
}

.ranked-intro-seat-1 { top: -32px; left: 16% }
.ranked-intro-seat-2 { top: -32px; right: 16% }
.ranked-intro-seat-3 { bottom: -32px; left: 10% }
.ranked-intro-seat-4 { top: 38%; right: -30px }

/* Triggered from JS (srankedintro) in sync with each fanfare note - see
   RANKED_INTRO_NOTES for exactly which seat(s) jump on which note. */
.ranked-intro-seat.jump {
  animation: ranked-intro-jump 0.35s ease-out
}

@keyframes ranked-intro-jump {
  0%, 100% { transform: translateY(0) }
  40%, 65% { transform: translateY(-14px) }
}

#ranked-intro-walker {
  position: absolute;
  bottom: -120px;
  left: 50%;
  font-size: 2.4rem;
  transform: translateX(-50%);
  filter: drop-shadow(0 4px 10px rgba(0, 0, 0, 0.6));
  opacity: 0;
  animation: ranked-intro-walk 1.6s ease-in-out forwards 1.1s, ranked-intro-bob 0.35s ease-in-out infinite 1.1s
}

@keyframes ranked-intro-walk {
  0% { bottom: -120px; opacity: 0 }
  15% { opacity: 1 }
  100% { bottom: 42% }
}

@keyframes ranked-intro-bob {
  0%, 100% { margin-top: 0 }
  50% { margin-top: -6px }
}

#ranked-intro-caption {
  font-family: 'Playfair Display', Georgia, serif;
  font-size: 1.1rem;
  letter-spacing: 1px;
  color: #e8d9b0;
  margin-top: 24px;
  opacity: 0;
  animation: ranked-intro-caption-in 0.8s ease forwards 0.8s
}

@keyframes ranked-intro-caption-in {
  to { opacity: 1 }
}

@media (prefers-reduced-motion: reduce) {
  #ranked-intro-overlay,
  #ranked-intro-spotlight,
  #ranked-intro-scene,
  #ranked-intro-walker,
  #ranked-intro-caption,
  .ranked-intro-seat.jump {
    animation: none;
    opacity: 1;
    transform: none
  }
}

/* ===== Per-difficulty "entering the table" intro (Unranked only) - one
   shared overlay, [data-diff] drives the color/shape/motion so each of the
   4 standard difficulties reads as genuinely distinct: Easy is a calm green
   bloom, Medium an amber sweep, Hard a harsh red strobe with a screen
   shake, Expert a pair of curtains parting. See playDifficultyIntro(). ===== */
#diff-intro-overlay {
  position: fixed;
  inset: 0;
  z-index: 900;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  pointer-events: none;
  background: radial-gradient(ellipse at 50% 45%, #161616 0%, #060606 60%, #000 100%);
  opacity: 0;
  animation: diff-intro-fade-in 0.3s ease forwards, diff-intro-fade-out 0.45s ease forwards 1.75s
}

@keyframes diff-intro-fade-in {
  from { opacity: 0 }
  to { opacity: 1 }
}

@keyframes diff-intro-fade-out {
  from { opacity: 1 }
  to { opacity: 0 }
}

#diff-intro-flash {
  position: absolute;
  inset: -30%;
  opacity: 0
}

#diff-intro-content {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  opacity: 0;
  transform: scale(0.85);
  animation: diff-intro-content-in 0.5s ease forwards 0.15s
}

@keyframes diff-intro-content-in {
  to { opacity: 1; transform: scale(1) }
}

#diff-intro-mascot svg {
  width: 96px;
  height: 96px;
  filter: drop-shadow(0 4px 16px rgba(0, 0, 0, 0.6))
}

.diff-intro-emoji {
  display: block;
  font-size: 4.2rem;
  line-height: 1;
  filter: drop-shadow(0 4px 16px rgba(0, 0, 0, 0.6))
}

#diff-intro-caption {
  font-family: 'Playfair Display', Georgia, serif;
  font-size: 1.15rem;
  letter-spacing: 1px;
  color: #e8e4dc;
  text-align: center
}

/* Easy - a calm single green bloom */
#diff-intro-overlay[data-diff="easy"] #diff-intro-flash {
  background: radial-gradient(circle, rgba(102, 187, 106, 0.55) 0%, rgba(102, 187, 106, 0.15) 40%, transparent 70%);
  animation: diff-intro-bloom 0.9s ease forwards 0.05s
}

@keyframes diff-intro-bloom {
  0% { opacity: 0; transform: scale(0.5) }
  40% { opacity: 1; transform: scale(1.05) }
  100% { opacity: 0; transform: scale(1.3) }
}

/* Medium - an amber spotlight sweep (same technique as #ranked-intro-spotlight) */
#diff-intro-overlay[data-diff="medium"] #diff-intro-flash {
  background: linear-gradient(100deg, transparent 30%, rgba(255, 202, 40, 0.16) 48%, rgba(255, 202, 40, 0.42) 50%, rgba(255, 202, 40, 0.16) 52%, transparent 70%);
  transform: rotate(8deg) translateX(-140%);
  opacity: 1;
  animation: diff-intro-sweep 0.85s ease-in-out forwards 0.05s
}

@keyframes diff-intro-sweep {
  to { transform: rotate(8deg) translateX(140%) }
}

/* Hard - a harsh red double-strobe plus a shake on the mascot/caption */
#diff-intro-overlay[data-diff="hard"] #diff-intro-flash {
  background: radial-gradient(circle, rgba(239, 83, 80, 0.6) 0%, rgba(239, 83, 80, 0.1) 45%, transparent 70%);
  animation: diff-intro-strobe 0.55s steps(1) forwards 0.05s
}

@keyframes diff-intro-strobe {
  0% { opacity: 0 }
  10% { opacity: 1 }
  25% { opacity: 0.15 }
  40% { opacity: 0.9 }
  60% { opacity: 0.1 }
  100% { opacity: 0 }
}

#diff-intro-overlay[data-diff="hard"] #diff-intro-content {
  animation: diff-intro-content-in 0.5s ease forwards 0.15s, diff-intro-shake 0.4s ease-out 0.15s
}

@keyframes diff-intro-shake {
  0%, 100% { margin-left: 0 }
  20% { margin-left: -6px }
  40% { margin-left: 5px }
  60% { margin-left: -4px }
  80% { margin-left: 3px }
}

/* Expert - a cool silver bloom plus a pair of curtains parting to reveal the scene */
#diff-intro-overlay[data-diff="expert"] #diff-intro-flash {
  background: radial-gradient(circle, rgba(220, 220, 255, 0.4) 0%, rgba(220, 220, 255, 0.1) 45%, transparent 70%);
  animation: diff-intro-bloom 1s ease forwards 0.05s
}

#diff-intro-overlay[data-diff="expert"]::before,
#diff-intro-overlay[data-diff="expert"]::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  height: 52%;
  background: #050505;
  border-color: rgba(220, 220, 255, 0.25);
  z-index: 2
}

#diff-intro-overlay[data-diff="expert"]::before {
  top: 0;
  border-bottom: 1px solid rgba(220, 220, 255, 0.25);
  animation: diff-intro-wipe-top 0.7s ease forwards 0.05s
}

#diff-intro-overlay[data-diff="expert"]::after {
  bottom: 0;
  border-top: 1px solid rgba(220, 220, 255, 0.25);
  animation: diff-intro-wipe-bottom 0.7s ease forwards 0.05s
}

@keyframes diff-intro-wipe-top {
  from { transform: translateY(0) }
  to { transform: translateY(-100%) }
}

@keyframes diff-intro-wipe-bottom {
  from { transform: translateY(0) }
  to { transform: translateY(100%) }
}

/* Rumble - an electric cyan strobe plus a chaotic multi-axis shake, wilder
   than Hard's single-axis one to match the "power-ups can hit at any
   moment" chaos of the mode itself. */
#diff-intro-overlay[data-diff="rumble"] #diff-intro-flash {
  background: radial-gradient(circle, rgba(77, 208, 225, 0.6) 0%, rgba(77, 208, 225, 0.12) 45%, transparent 70%);
  animation: diff-intro-strobe 0.6s steps(1) forwards 0.05s
}

#diff-intro-overlay[data-diff="rumble"] #diff-intro-content {
  animation: diff-intro-content-in 0.5s ease forwards 0.15s, diff-intro-rumble-shake 0.65s ease-out 0.15s
}

@keyframes diff-intro-rumble-shake {
  0%, 100% { margin-left: 0; margin-top: 0 }
  15% { margin-left: -6px; margin-top: 3px }
  30% { margin-left: 7px; margin-top: -4px }
  45% { margin-left: -7px; margin-top: 2px }
  60% { margin-left: 5px; margin-top: -3px }
  75% { margin-left: -3px; margin-top: 2px }
  90% { margin-left: 2px; margin-top: -1px }
}

/* Tournament round start - the same parting-curtains technique Expert uses
   (a literal curtain fits "beginning a round" better than any of the other
   difficulty flashes), but themed in the Tournament page's own violet
   accent instead of Expert's cool silver, so it reads as its own mode
   rather than borrowed Expert theming. */
#diff-intro-overlay[data-diff="tournament"] #diff-intro-flash {
  background: radial-gradient(circle, rgba(156, 106, 222, 0.5) 0%, rgba(156, 106, 222, 0.12) 45%, transparent 70%);
  animation: diff-intro-bloom 1s ease forwards 0.05s
}

#diff-intro-overlay[data-diff="tournament"]::before,
#diff-intro-overlay[data-diff="tournament"]::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  height: 52%;
  background: #0d0812;
  border-color: rgba(156, 106, 222, 0.35);
  z-index: 2
}

#diff-intro-overlay[data-diff="tournament"]::before {
  top: 0;
  border-bottom: 1px solid rgba(156, 106, 222, 0.35);
  animation: diff-intro-wipe-top 0.7s ease forwards 0.05s
}

#diff-intro-overlay[data-diff="tournament"]::after {
  bottom: 0;
  border-top: 1px solid rgba(156, 106, 222, 0.35);
  animation: diff-intro-wipe-bottom 0.7s ease forwards 0.05s
}

@media (prefers-reduced-motion: reduce) {
  #diff-intro-overlay,
  #diff-intro-flash,
  #diff-intro-content,
  #diff-intro-overlay[data-diff="hard"] #diff-intro-content,
  #diff-intro-overlay[data-diff="rumble"] #diff-intro-content,
  #diff-intro-overlay[data-diff="expert"]::before,
  #diff-intro-overlay[data-diff="expert"]::after,
  #diff-intro-overlay[data-diff="tournament"]::before,
  #diff-intro-overlay[data-diff="tournament"]::after {
    animation: none;
    opacity: 1;
    transform: none;
    margin-left: 0;
    margin-top: 0
  }
}

/* ===== Result Overlay =====
   top is set inline in JS (see updateGameState) as a fixed px offset below
   the board, not a percentage center point - transform only centers
   horizontally here (no translateY), so the box always grows downward from
   that fixed top edge and can never push back up into the community cards.
   Deliberately NOT capping this outer box's own height (an earlier attempt
   did, via max-height+overflow-y here) - that clipped/scrolled away
   #result-actions entirely below the visible window whenever the showdown
   details were tall enough, making "Next Hand" and "Reset balance each
   hand" unreachable without first discovering a hidden internal scrollbar.
   The title and action row must always render in full; only the
   variable-length showdown-details list below gets its own scroll cap
   (see #result-details) so an unusually large multi-way showdown can't
   blow the whole popup up to an unreasonable height, without ever risking
   the actions themselves going out of view. */
#result-overlay {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  z-index: 20;
  background: rgba(0, 0, 0, 0.94);
  border: 1px solid rgba(201, 168, 76, 0.2);
  border-radius: 0;
  padding: 14px 18px;
  text-align: center;
  min-width: 260px;
  backdrop-filter: blur(10px);
  box-shadow: 0 0 50px rgba(0, 0, 0, 0.6)
}

#result-title {
  font-size: 1rem;
  font-weight: 600;
  color: #c9a84c;
  margin-bottom: 12px
}

#result-details {
  margin-bottom: 14px;
  max-height: 140px;
  overflow-y: auto
}

.sd-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 5px 10px;
  border-radius: 0;
  background: rgba(255, 255, 255, 0.02);
  font-size: 0.75rem;
  gap: 8px
}

.sd-row.win {
  background: rgba(201, 168, 76, 0.07);
  border: 1px solid rgba(201, 168, 76, 0.1)
}

.sdh {
  color: rgba(255, 255, 255, 0.25);
  font-size: 0.7rem
}

.sdw {
  color: #c9a84c;
  font-weight: 500;
  font-family: 'IBM Plex Mono', monospace;
  font-size: 0.75rem
}

#result-actions {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px
}

#btn-next-hand {
  font-family: 'Inter', sans-serif;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 1px;
  padding: 9px 26px;
  border: none;
  border-radius: 0;
  background: #c9a84c;
  color: #0d0d1a;
  cursor: pointer;
  transition: all 0.15s
}

#btn-next-hand:hover {
  background: #dbb856
}

#btn-analyze-hand {
  font-family: 'Inter', sans-serif;
  font-size: 0.65rem;
  font-weight: 500;
  letter-spacing: 0.5px;
  padding: 6px 16px;
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 0;
  background: transparent;
  color: rgba(255, 255, 255, 0.5);
  cursor: pointer;
  transition: all 0.2s
}

#btn-analyze-hand:hover {
  border-color: rgba(255, 255, 255, 0.3);
  color: rgba(255, 255, 255, 0.8)
}

#toggle-reset-label {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 0.65rem;
  color: rgba(255, 255, 255, 0.2);
  cursor: pointer
}

#toggle-reset-label input {
  accent-color: #c9a84c
}

/* ===== Visual Replay Timeline ===== */
.replay-visual-step {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 4px 8px;
  border-radius: 0;
  background: rgba(255, 255, 255, 0.02);
  margin: 2px 0;
  font-size: 0.65rem;
  border-left: 2px solid rgba(201, 168, 76, 0.15);
  transition: all 0.2s
}

.replay-visual-step:hover {
  background: rgba(255, 255, 255, 0.05)
}

.replay-visual-step .rvs-label {
  color: rgba(255, 255, 255, 0.4);
  font-size: 0.55rem;
  min-width: 80px;
  font-family: 'IBM Plex Mono', monospace
}

.replay-visual-step .rvs-action {
  color: #c9a84c;
  font-weight: 500
}

.replay-visual-step .rvs-cards {
  display: flex;
  gap: 2px;
  margin-left: auto
}

.replay-visual-step .rvs-card {
  display: inline-block;
  width: 16px;
  height: 22px;
  border-radius: 0;
  font-size: 6px;
  text-align: center;
  line-height: 22px;
  background: #faf8f5;
  font-weight: 600;
  font-family: 'Inter', sans-serif;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2)
}

.replay-visual-step .rvs-card.rvs-back {
  background: #1a3a5c;
  background-image: linear-gradient(45deg, #1a3a5c 25%, #2a5a7c 25%, #2a5a7c 50%, #1a3a5c 50%, #1a3a5c 75%, #2a5a7c 75%);
  background-size: 3px 3px
}

/* ===== Right Spacer ===== */
#right-spacer {
  width: 0;
  flex-shrink: 0
}

/* ===== Analyzer Modal ===== */
#analyzer-modal {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.85);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 60;
  backdrop-filter: blur(6px)
}

#analyzer-content {
  background: #111;
  border: 1px solid rgba(201, 168, 76, 0.15);
  border-radius: 0;
  width: 90%;
  max-width: 560px;
  max-height: 85vh;
  display: flex;
  flex-direction: column;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.6)
}

#analyzer-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 18px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.04)
}

#analyzer-head span {
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 1.5px;
  color: #c9a84c;
  font-weight: 600
}

#btn-close-analyzer {
  background: none;
  border: none;
  color: rgba(255, 255, 255, 0.15);
  font-size: 0.9rem;
  cursor: pointer;
  padding: 4px
}

#btn-close-analyzer:hover {
  color: rgba(255, 255, 255, 0.4)
}

#analyzer-body {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 14px 18px;
  overflow-y: auto;
  flex: 1
}

#analyzer-replay-header {
  font-size: 0.55rem;
  text-transform: uppercase;
  letter-spacing: 1.5px;
  color: rgba(255, 255, 255, 0.3);
  font-weight: 500;
  margin-bottom: 4px
}

#analyzer-replay-steps {
  display: flex;
  flex-direction: column;
  gap: 1px;
  max-height: 160px;
  overflow-y: auto
}

.replay-step {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 0.6rem;
  color: rgba(255, 255, 255, 0.5);
  padding: 2px 4px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.02)
}

.replay-grade {
  display: inline-block;
  padding: 1px 6px;
  border-radius: 0;
  font-weight: 700;
  font-size: 0.56rem;
  text-transform: uppercase;
  letter-spacing: 0.4px
}

.replay-grade-brilliant {
  background: rgba(79, 195, 247, 0.18);
  color: #4fc3f7
}

.replay-grade-good {
  background: rgba(76, 175, 80, 0.18);
  color: #81c784
}

.replay-grade-inaccuracy {
  background: rgba(255, 193, 7, 0.18);
  color: #ffca28
}

.replay-grade-mistake {
  background: rgba(255, 152, 0, 0.18);
  color: #ffa726
}

.replay-grade-blunder {
  background: rgba(239, 83, 80, 0.2);
  color: #ef5350
}

#analyzer-street-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 10px
}

.street-tab {
  font-family: 'Inter', sans-serif;
  font-size: 0.6rem;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  font-weight: 600;
  padding: 6px 12px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 0;
  background: transparent;
  color: rgba(255, 255, 255, 0.4);
  cursor: pointer;
  transition: all 0.15s
}

.street-tab:hover {
  border-color: rgba(201, 168, 76, 0.3);
  color: rgba(255, 255, 255, 0.7)
}

.street-tab.active {
  background: #c9a84c;
  border-color: #c9a84c;
  color: #0d0d1a
}

#analyzer-street-board {
  display: flex;
  gap: 6px;
  min-height: 56px;
  align-items: center;
  padding: 8px 0
}

#analyzer-street-board .card {
  width: 40px;
  height: 56px;
  flex-shrink: 0
}

#analyzer-street-board .crt,
#analyzer-street-board .crb {
  font-size: 7px
}

#analyzer-street-board .csc {
  font-size: 13px
}

.street-board-empty {
  font-size: 0.65rem;
  color: rgba(255, 255, 255, 0.25);
  font-style: italic
}

#analyzer-street-info {
  border-top: 1px solid rgba(255, 255, 255, 0.04);
  border-bottom: 1px solid rgba(255, 255, 255, 0.04);
  padding: 6px 0;
  margin-bottom: 8px
}

#analyzer-street-actions {
  display: flex;
  flex-direction: column;
  gap: 1px;
  max-height: 120px;
  overflow-y: auto
}

#analyzer-stats {
  display: flex;
  flex-direction: column;
  gap: 2px;
  border-top: 1px solid rgba(255, 255, 255, 0.04);
  padding-top: 10px
}

#aa-luck-tag {
  margin-top: 8px;
  padding: 10px 12px;
  border-radius: 0;
  font-size: 0.72rem;
  line-height: 1.5
}

.aa-luck-tag-unlucky {
  background: rgba(255, 193, 7, 0.1);
  border: 1px solid rgba(255, 193, 7, 0.25);
  color: #ffca28
}

.aa-luck-tag-lucky {
  background: rgba(76, 175, 80, 0.1);
  border: 1px solid rgba(76, 175, 80, 0.25);
  color: #81c784
}

.arow {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 4px 0;
  font-size: 0.7rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.02)
}

.arow span:first-child {
  color: rgba(255, 255, 255, 0.5);
  font-weight: 400
}

.arow span:last-child {
  color: #e8e4dc;
  font-weight: 500;
  font-family: 'IBM Plex Mono', monospace;
  font-size: 0.65rem
}

/* ===== Stats Slide-Out ===== */
#stats-panel {
  position: fixed;
  top: 0;
  right: 0;
  width: 280px;
  height: 100vh;
  background: #000;
  border-left: 1px solid rgba(255, 255, 255, 0.05);
  z-index: 50;
  display: flex;
  flex-direction: column;
  box-shadow: -10px 0 40px rgba(0, 0, 0, 0.6);
  animation: slideIn 0.2s ease-out
}

@keyframes slideIn {
  from {
    transform: translateX(100%)
  }

  to {
    transform: translateX(0)
  }
}

#stats-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 16px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.04)
}

#stats-head span {
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 1.5px;
  color: #c9a84c;
  font-weight: 600
}

#btn-close-stats {
  background: none;
  border: none;
  color: rgba(255, 255, 255, 0.2);
  font-size: 1rem;
  cursor: pointer;
  padding: 4px
}

#btn-close-stats:hover {
  color: rgba(255, 255, 255, 0.6)
}

#stats-body {
  flex: 1;
  overflow-y: auto;
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 16px
}

#stats-graph-header {
  display: flex;
  align-items: center;
  justify-content: space-between
}

#graph-legend {
  display: flex;
  gap: 10px
}

.legend-item {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 0.6rem;
  color: rgba(255, 255, 255, 0.4);
  text-transform: none;
  font-weight: 400
}

.legend-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  display: inline-block
}

.legend-dot-actual {
  background: #c9a84c
}

.legend-dot-ev {
  background: #4dd0e1
}

.st-sec {
  display: flex;
  flex-direction: column;
  gap: 6px
}

.st-sec h4 {
  font-size: 0.6rem;
  text-transform: uppercase;
  letter-spacing: 1.5px;
  color: rgba(255, 255, 255, 0.25);
  font-weight: 600;
  margin-bottom: 2px
}

.sr {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 3px 0;
  font-size: 0.75rem
}

#stats-export-row {
  display: flex;
  gap: 8px;
  margin-top: 14px
}

#stats-export-row .sec-btn {
  font-size: 0.65rem;
  padding: 8px 10px
}

.sl {
  color: rgba(255, 255, 255, 0.4)
}

.sv {
  color: #e8e4dc;
  font-weight: 500;
  font-family: 'IBM Plex Mono', monospace
}

#balance-graph-box {
  margin-top: 10px;
  padding: 10px;
  background: rgba(255, 255, 255, 0.02);
  border-radius: 0;
  border: 1px solid rgba(255, 255, 255, 0.04)
}

#balance-graph-title {
  font-size: 0.6rem;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: rgba(255, 255, 255, 0.3);
  margin-bottom: 8px
}

/* ===== Game Background Themes & Suit Pattern ===== */
#app {
  transition: background 0.5s ease
}

#app::before {
  content: '♠ ♥ ♣ ♦';
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 18rem;
  letter-spacing: 40px;
  color: rgba(255, 255, 255, 0.012);
  pointer-events: none;
  z-index: 0;
  font-family: 'Playfair Display', serif
}

#app[data-diff="easy"] {
  background: radial-gradient(ellipse at 50% 40%, #092411 0%, #041209 60%, #020804 100%)
}

#app[data-diff="easy"] #table-felt {
  border-color: rgba(76, 175, 80, 0.3);
  box-shadow: 0 0 60px rgba(76, 175, 80, 0.15)
}

#app[data-diff="medium"] {
  background: radial-gradient(ellipse at 50% 40%, #261c07 0%, #140f03 60%, #080501 100%)
}

#app[data-diff="medium"] #table-felt {
  border-color: rgba(255, 193, 7, 0.3);
  box-shadow: 0 0 60px rgba(255, 193, 7, 0.15)
}

#app[data-diff="hard"] {
  background: radial-gradient(ellipse at 50% 40%, #280808 0%, #140303 60%, #080101 100%)
}

#app[data-diff="hard"] #table-felt {
  border-color: rgba(239, 83, 80, 0.3);
  box-shadow: 0 0 60px rgba(239, 83, 80, 0.15)
}

#app[data-diff="expert"] {
  background: radial-gradient(ellipse at 50% 40%, #182030 0%, #0d111c 60%, #05070a 100%)
}

#app[data-diff="expert"] #table-felt {
  border-color: rgba(200, 220, 255, 0.35);
  box-shadow: 0 0 60px rgba(200, 220, 255, 0.18)
}

#app[data-diff="drunk"] {
  background: radial-gradient(ellipse at 50% 40%, #2a1206 0%, #150903 60%, #080401 100%)
}

#app[data-diff="drunk"] #table-felt {
  border-color: rgba(255, 138, 101, 0.35);
  box-shadow: 0 0 60px rgba(255, 138, 101, 0.16)
}

#app[data-diff="bluffer"] {
  background: radial-gradient(ellipse at 50% 40%, #1e0a26 0%, #0f0513 60%, #060209 100%)
}

#app[data-diff="bluffer"] #table-felt {
  border-color: rgba(171, 71, 188, 0.35);
  box-shadow: 0 0 60px rgba(171, 71, 188, 0.16)
}

/* ===== Cosmetics: equipped felt color, wins over the base #table-felt
   background above by attribute+id specificity regardless of source order
   (the data-diff/ranked-table rules above only ever touch border/glow, so
   there's no property overlap to fight over). "green" is the default look
   and needs no override rule. ===== */
#app[data-felt="blue"] #table-felt {
  background: radial-gradient(ellipse at 30% 40%, #1f5a8a 0%, #154268 30%, #0f3454 55%, #0a2740 100%)
}
#app[data-felt="crimson"] #table-felt {
  background: radial-gradient(ellipse at 30% 40%, #8a2432 0%, #681823 30%, #541019 55%, #400a12 100%)
}
#app[data-felt="purple"] #table-felt {
  background: radial-gradient(ellipse at 30% 40%, #6a248a 0%, #4c1868 30%, #3c1054 55%, #2c0a40 100%)
}
#app[data-felt="teal"] #table-felt {
  background: radial-gradient(ellipse at 30% 40%, #1f7a7a 0%, #155d5d 30%, #0f4d4d 55%, #0a3d3d 100%)
}
#app[data-felt="black"] #table-felt {
  background: radial-gradient(ellipse at 30% 40%, #2a2a2a 0%, #1a1a1a 30%, #101010 55%, #050505 100%)
}
#app[data-felt="rose"] #table-felt {
  background: radial-gradient(ellipse at 30% 40%, #b8547a 0%, #8a3d5c 30%, #6b2d47 55%, #4d1f33 100%)
}
#app[data-felt="gold"] #table-felt {
  background: radial-gradient(ellipse at 30% 40%, #b89550 0%, #96773d 30%, #7a5f2f 55%, #5c481f 100%)
}
#app[data-felt="sapphireNight"] #table-felt {
  background: radial-gradient(ellipse at 30% 40%, #16305c 0%, #0e2246 30%, #091834 55%, #050f22 100%)
}
#app[data-felt="amber"] #table-felt {
  background: radial-gradient(ellipse at 30% 40%, #b8802a 0%, #8f611f 30%, #6b4816 55%, #4a3010 100%)
}
#app[data-felt="forest"] #table-felt {
  background: radial-gradient(ellipse at 30% 40%, #1a4a2a 0%, #123a20 30%, #0c2c18 55%, #071c10 100%)
}
#app[data-felt="slate"] #table-felt {
  background: radial-gradient(ellipse at 30% 40%, #4a5a6a 0%, #384552 30%, #2a343e 55%, #1c232a 100%)
}
#app[data-felt="magenta"] #table-felt {
  background: radial-gradient(ellipse at 30% 40%, #a8286a 0%, #821d52 30%, #64163f 55%, #470f2d 100%)
}

/* ===== Cosmetics: table-theme pattern, layered over the felt color above
   via a ::after overlay (independent of which color is equipped) - "plain"
   (no pattern) needs no override rule. ===== */
#table-felt::after {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0
}
#app[data-theme="herringbone"] #table-felt::after {
  opacity: 0.18;
  background-image:
    repeating-linear-gradient(45deg, rgba(255, 255, 255, 0.16) 0 4px, transparent 4px 8px),
    repeating-linear-gradient(-45deg, rgba(255, 255, 255, 0.16) 0 4px, transparent 4px 8px);
  background-size: 16px 16px
}
#app[data-theme="diamond"] #table-felt::after {
  opacity: 0.16;
  background-image:
    linear-gradient(45deg, rgba(255, 255, 255, 0.2) 25%, transparent 25%, transparent 75%, rgba(255, 255, 255, 0.2) 75%),
    linear-gradient(45deg, rgba(255, 255, 255, 0.2) 25%, transparent 25%, transparent 75%, rgba(255, 255, 255, 0.2) 75%);
  background-size: 24px 24px;
  background-position: 0 0, 12px 12px
}
#app[data-theme="leather"] #table-felt::after {
  opacity: 0.16;
  background-image:
    radial-gradient(circle at 30% 30%, rgba(0, 0, 0, 0.35) 0%, transparent 60%),
    radial-gradient(circle at 70% 70%, rgba(0, 0, 0, 0.35) 0%, transparent 60%);
  background-size: 30px 30px
}
#app[data-theme="starlight"] #table-felt::after {
  opacity: 0.3;
  background-image: radial-gradient(circle, rgba(255, 255, 255, 0.85) 1px, transparent 1.5px);
  background-size: 22px 22px
}
#app[data-theme="royalCrest"] #table-felt::after {
  opacity: 0.22;
  background-image: radial-gradient(circle at 50% 50%, rgba(201, 168, 76, 0.55) 0%, transparent 70%);
  background-size: 70px 70px
}
#app[data-theme="marble"] #table-felt::after {
  opacity: 0.22;
  background-image:
    linear-gradient(115deg, transparent 40%, rgba(255, 255, 255, 0.45) 41%, rgba(255, 255, 255, 0.45) 42%, transparent 43%),
    linear-gradient(70deg, transparent 60%, rgba(255, 255, 255, 0.3) 61%, rgba(255, 255, 255, 0.3) 62%, transparent 63%);
  background-size: 160px 160px
}
#app[data-theme="mahogany"] #table-felt::after {
  opacity: 0.24;
  background-image: repeating-linear-gradient(94deg, rgba(120, 70, 30, 0.45) 0 2px, transparent 2px 10px)
}
/* Tournament trophy felts - same "medal rays" sunburst motif as the shop
   swatch versions above, tinted per tier. */
#app[data-theme="localTrophy"] #table-felt::after {
  opacity: 0.26;
  background-image: repeating-conic-gradient(from 0deg, rgba(180, 131, 90, 0.5) 0deg 8deg, transparent 8deg 20deg);
  background-size: 260px 260px;
  background-position: center
}
#app[data-theme="stateTrophy"] #table-felt::after {
  opacity: 0.26;
  background-image: repeating-conic-gradient(from 0deg, rgba(184, 194, 204, 0.5) 0deg 8deg, transparent 8deg 20deg);
  background-size: 260px 260px;
  background-position: center
}
#app[data-theme="naTrophy"] #table-felt::after {
  opacity: 0.26;
  background-image: repeating-conic-gradient(from 0deg, rgba(201, 168, 76, 0.5) 0deg 8deg, transparent 8deg 20deg);
  background-size: 260px 260px;
  background-position: center
}
#app[data-theme="worldTrophy"] #table-felt::after {
  opacity: 0.26;
  background-image: repeating-conic-gradient(from 0deg, rgba(156, 106, 222, 0.5) 0deg 8deg, transparent 8deg 20deg);
  background-size: 260px 260px;
  background-position: center
}
#app[data-theme="highRollersTrophy"] #table-felt::after {
  opacity: 0.26;
  background-image: repeating-conic-gradient(from 0deg, rgba(96, 205, 240, 0.5) 0deg 8deg, transparent 8deg 20deg);
  background-size: 260px 260px;
  background-position: center
}
#app[data-theme="celebrityTrophy"] #table-felt::after {
  opacity: 0.26;
  background-image: repeating-conic-gradient(from 0deg, rgba(230, 83, 156, 0.5) 0deg 8deg, transparent 8deg 20deg);
  background-size: 260px 260px;
  background-position: center
}
#app[data-theme="undergroundTrophy"] #table-felt::after {
  opacity: 0.26;
  background-image: repeating-conic-gradient(from 0deg, rgba(214, 62, 62, 0.5) 0deg 8deg, transparent 8deg 20deg);
  background-size: 260px 260px;
  background-position: center
}

/* ===== Cosmetics: equipped card back. "classic" (the default diagonal
   stripe on .card-b/.csb above) needs no override rule. ===== */
#app[data-cardback="diamond"] .card-b {
  background: #12321f;
  background-image:
    linear-gradient(45deg, transparent 45%, #2f6b4a 45%, #2f6b4a 55%, transparent 55%),
    linear-gradient(-45deg, transparent 45%, #2f6b4a 45%, #2f6b4a 55%, transparent 55%);
  background-size: 10px 10px;
  border-color: #0a1f14
}
#app[data-cardback="diamond"] .csb {
  background: #12321f;
  background-image:
    linear-gradient(45deg, transparent 45%, #2f6b4a 45%, #2f6b4a 55%, transparent 55%),
    linear-gradient(-45deg, transparent 45%, #2f6b4a 45%, #2f6b4a 55%, transparent 55%);
  background-size: 6px 6px;
  border-color: #0a1f14
}
#app[data-cardback="jewel"] .card-b,
#app[data-cardback="jewel"] .csb {
  background: radial-gradient(ellipse at 35% 30%, #9c2c5e 0%, #5c1638 55%, #2c0a1e 100%);
  border-color: #1a0512
}
#app[data-cardback="suits"] .card-b {
  background: #2a2a2a;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24'%3E%3Ctext x='1' y='11' font-size='9' fill='%23555'%3E%E2%99%A0%3C/text%3E%3Ctext x='12' y='22' font-size='9' fill='%23555'%3E%E2%99%A5%3C/text%3E%3C/svg%3E");
  background-size: 24px 24px;
  border-color: #171717
}
#app[data-cardback="suits"] .csb {
  background: #2a2a2a;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12'%3E%3Ctext x='0' y='6' font-size='5' fill='%23555'%3E%E2%99%A0%3C/text%3E%3Ctext x='6' y='11' font-size='5' fill='%23555'%3E%E2%99%A5%3C/text%3E%3C/svg%3E");
  background-size: 12px 12px;
  border-color: #171717
}
#app[data-cardback="emerald"] .card-b,
#app[data-cardback="emerald"] .csb {
  background: radial-gradient(ellipse at 35% 30%, #1fa363 0%, #0d6b3f 55%, #04331f 100%);
  border-color: #02190f
}
#app[data-cardback="midnight"] .card-b,
#app[data-cardback="midnight"] .csb {
  background: radial-gradient(ellipse at 35% 30%, #2c3e6b 0%, #16203d 55%, #080b18 100%);
  border-color: #04060c
}
#app[data-cardback="royal"] .card-b {
  background: #1a1a1a;
  background-image: linear-gradient(45deg, #1a1a1a 25%, #3a3220 25%, #3a3220 50%, #1a1a1a 50%, #1a1a1a 75%, #3a3220 75%);
  background-size: 10px 10px;
  border-color: #0d0d0d
}
#app[data-cardback="royal"] .csb {
  background: #1a1a1a;
  background-image: linear-gradient(45deg, #1a1a1a 25%, #3a3220 25%, #3a3220 50%, #1a1a1a 50%, #1a1a1a 75%, #3a3220 75%);
  background-size: 6px 6px;
  border-color: #0d0d0d
}
#app[data-cardback="prism"] .card-b,
#app[data-cardback="prism"] .csb {
  background: linear-gradient(135deg, #ff6b6b 0%, #ffd166 25%, #06d6a0 50%, #4d96ff 75%, #b28dff 100%);
  border-color: #1a1a1a
}
#app[data-cardback="aurora"] .card-b,
#app[data-cardback="aurora"] .csb {
  background: linear-gradient(160deg, #0a2e2a 0%, #114a3e 30%, #1f9e7a 55%, #3ad6c2 75%, #8f5fd6 100%);
  border-color: #06110f
}
#app[data-cardback="celestial"] .card-b,
#app[data-cardback="celestial"] .csb {
  background:
    radial-gradient(circle at 20% 20%, rgba(255, 255, 255, 0.9) 0.5px, transparent 1.2px) 0 0/14px 14px,
    radial-gradient(circle at 60% 60%, rgba(255, 255, 255, 0.7) 0.5px, transparent 1.2px) 4px 6px/18px 18px,
    radial-gradient(ellipse at 40% 30%, #241a52 0%, #150f38 55%, #06041a 100%);
  border-color: #04030f
}
#app[data-cardback="onyx"] .card-b,
#app[data-cardback="onyx"] .csb {
  background: radial-gradient(ellipse at 35% 25%, #4a4a4a 0%, #232323 45%, #0a0a0a 100%);
  border-color: #000
}
#app[data-cardback="topaz"] .card-b,
#app[data-cardback="topaz"] .csb {
  background: radial-gradient(ellipse at 35% 30%, #ffc266 0%, #d4881f 45%, #7a4a10 100%);
  border-color: #3d2408
}
#app[data-cardback="opal"] .card-b,
#app[data-cardback="opal"] .csb {
  background: linear-gradient(135deg, #f2e6ff 0%, #d4f1f4 25%, #ffe0f0 50%, #e0f4e0 75%, #fff4d4 100%);
  border-color: #2a2a2a
}
#app[data-cardback="platinum"] .card-b,
#app[data-cardback="platinum"] .csb {
  background: radial-gradient(ellipse at 35% 25%, #eef0f4 0%, #b8bcc4 45%, #767a82 100%);
  border-color: #3a3d42
}
#app[data-cardback="nebula"] .card-b,
#app[data-cardback="nebula"] .csb {
  background:
    radial-gradient(circle at 25% 25%, rgba(255, 255, 255, 0.7) 0.5px, transparent 1.2px) 0 0/16px 16px,
    radial-gradient(ellipse at 30% 30%, #7a4cc4 0%, #3d2266 45%, #170c33 75%, #08040f 100%);
  border-color: #05030a
}

/* A faint, slowly breathing ambient glow behind the felt - present on every
   game screen (tinted to match whichever difficulty is active) so the
   background never reads as completely static, then overridden below with
   a gold tint and a slightly quicker pulse specifically for ranked. */
#app::after {
  content: '';
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  background: radial-gradient(ellipse at 50% 45%, rgba(255, 255, 255, 0.03) 0%, transparent 60%);
  animation: appAmbientPulse 6s ease-in-out infinite
}

@keyframes appAmbientPulse {
  0%, 100% { opacity: 0.5; transform: scale(1) }
  50% { opacity: 1; transform: scale(1.04) }
}

#app[data-diff="easy"]::after { background: radial-gradient(ellipse at 50% 45%, rgba(76, 175, 80, 0.07) 0%, transparent 60%) }
#app[data-diff="medium"]::after { background: radial-gradient(ellipse at 50% 45%, rgba(255, 193, 7, 0.07) 0%, transparent 60%) }
#app[data-diff="hard"]::after { background: radial-gradient(ellipse at 50% 45%, rgba(239, 83, 80, 0.07) 0%, transparent 60%) }
#app[data-diff="expert"]::after { background: radial-gradient(ellipse at 50% 45%, rgba(200, 220, 255, 0.07) 0%, transparent 60%) }
#app[data-diff="drunk"]::after { background: radial-gradient(ellipse at 50% 45%, rgba(255, 138, 101, 0.07) 0%, transparent 60%) }
#app[data-diff="bluffer"]::after { background: radial-gradient(ellipse at 50% 45%, rgba(171, 71, 188, 0.07) 0%, transparent 60%) }

/* ===== Ranked table - gold, competitive theme, distinct from unranked's
   per-difficulty coloring even at the same difficulty (wins by source
   order over the [data-diff] rules above, since both match at once). ===== */
#app.ranked-table {
  background: radial-gradient(ellipse at 50% 40%, #241a05 0%, #130d02 60%, #070401 100%)
}

#app.ranked-table #table-felt {
  border-color: rgba(201, 168, 76, 0.45);
  box-shadow: 0 0 80px rgba(201, 168, 76, 0.22)
}

#app.ranked-table::after {
  background: radial-gradient(ellipse at 50% 45%, rgba(201, 168, 76, 0.14) 0%, transparent 60%);
  animation: appAmbientPulse 4s ease-in-out infinite
}

/* ===== Poker Chips Visual ===== */
.chip-container {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  margin: 2px 0
}

.chip-stack {
  display: inline-flex;
  flex-direction: column-reverse;
  align-items: center;
  height: 16px;
  width: 18px;
  position: relative;
  margin-top: -2px
}

.chip-icon {
  display: inline-block;
  width: 16px;
  height: 6px;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.4);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
  margin-top: -3px
}

.chip-gold {
  background: linear-gradient(180deg, #ffd700, #b8860b);
  border-color: #fff
}

.chip-red {
  background: linear-gradient(180deg, #ff4d4d, #990000);
  border-color: #ffcccc
}

.chip-blue {
  background: linear-gradient(180deg, #4da6ff, #003399);
  border-color: #cce5ff
}

.chip-green {
  background: linear-gradient(180deg, #4dff88, #006622);
  border-color: #ccffdd
}

/* ===== Pause Modal & Blur ===== */
#pause-modal {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.75);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 90
}

#pause-card {
  background: #121216;
  border: 1px solid rgba(201, 168, 76, 0.3);
  border-radius: 0;
  padding: 32px 48px;
  text-align: center;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.8);
  max-width: 360px;
  width: 90%
}

#pause-card h2 {
  font-family: 'Playfair Display', serif;
  font-size: 1.8rem;
  color: #c9a84c;
  margin-bottom: 8px
}

#pause-card p {
  font-size: 0.8rem;
  color: rgba(255, 255, 255, 0.5);
  margin-bottom: 24px
}

#btn-resume-game {
  font-family: 'Inter', sans-serif;
  font-size: 0.9rem;
  font-weight: 600;
  letter-spacing: 1px;
  padding: 12px 36px;
  border: none;
  border-radius: 0;
  background: #c9a84c;
  color: #0a0a0a;
  cursor: pointer;
  text-transform: uppercase;
  transition: all 0.2s
}

#btn-resume-game:hover {
  background: #dbb856;
  box-shadow: 0 4px 20px rgba(201, 168, 76, 0.3)
}

/* ===== Site Settings Modal ===== */
#site-settings-modal {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.8);
  backdrop-filter: blur(8px);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 80
}

#site-settings-content {
  background: #111116;
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 0;
  padding: 28px;
  width: 90%;
  max-width: 420px;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.8)
}

#site-settings-content h2 {
  font-size: 1.2rem;
  color: #e8e4dc;
  margin-bottom: 20px;
  text-align: center;
  font-weight: 600
}

.ss-fg {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 18px
}

.ss-fg label {
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: rgba(255, 255, 255, 0.5);
  font-weight: 600;
  display: flex;
  justify-content: space-between
}

.ss-fg input[type="range"] {
  accent-color: #c9a84c;
  cursor: pointer;
  height: 4px
}

.ss-fg select {
  padding: 8px 12px;
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 0;
  background: #1a1a20;
  color: #e8e4dc;
  outline: none
}

#site-settings-actions {
  display: flex;
  gap: 10px;
  justify-content: flex-end;
  margin-top: 24px
}

/* ===== Current Hand Display ===== */
#your-hand-badge {
  font-size: 0.7rem;
  font-weight: 600;
  color: #c9a84c;
  background: rgba(201, 168, 76, 0.12);
  border: 1px solid rgba(201, 168, 76, 0.25);
  padding: 3px 10px;
  border-radius: 0;
  margin-top: 4px;
  display: inline-block;
  letter-spacing: 0.5px
}

.seat-hand-badge {
  font-size: 0.6rem;
  font-weight: 600;
  color: #4caf50;
  background: rgba(76, 175, 80, 0.15);
  border: 1px solid rgba(76, 175, 80, 0.3);
  padding: 2px 6px;
  border-radius: 0;
  margin-top: 2px
}
/* ===== Range Trainer Page ===== */
#trainer-page-content {
  display: flex;
  flex-direction: column;
  gap: 18px;
  align-items: center;
  text-align: center;
  width: 100%;
  max-width: 620px;
  padding: 10px 0 40px
}

#trainer-disclaimer {
  font-size: 0.7rem;
  color: rgba(255, 255, 255, 0.3);
  font-style: italic;
  align-self: stretch;
  margin-top: -6px
}

#trainer-stats {
  display: flex;
  gap: 40px;
  align-self: stretch;
  justify-content: center;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
  padding-bottom: 16px
}

#trainer-stats .arow {
  flex-direction: column;
  gap: 4px;
  border-bottom: none;
  align-items: center;
  padding: 0
}

#trainer-stats .arow span:first-child {
  font-size: 0.65rem;
  text-transform: uppercase;
  letter-spacing: 1px
}

#trainer-stats .arow span:last-child {
  font-size: 1.1rem
}

#btn-toggle-range-chart {
  width: auto;
  padding: 8px 20px;
  margin-top: 4px
}

#trainer-range-chart-panel {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  margin-top: 12px;
  padding-top: 16px;
  border-top: 1px solid rgba(255, 255, 255, 0.06);
  width: 100%
}

#trc-caption {
  font-size: 0.8rem;
  color: rgba(255, 255, 255, 0.5);
  text-align: center;
  max-width: 480px
}

#trc-grid {
  display: grid;
  grid-template-columns: repeat(13, minmax(24px, 1fr));
  gap: 2px;
  width: 100%;
  max-width: 560px
}

.trc-cell {
  aspect-ratio: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: 'IBM Plex Mono', monospace;
  font-size: 0.58rem;
  font-weight: 700;
  border-radius: 0;
  cursor: default
}

.trc-cell-raise {
  background: rgba(239, 83, 80, 0.55);
  color: #fff
}

.trc-cell-call {
  background: rgba(255, 193, 7, 0.5);
  color: #1a1108
}

.trc-cell-fold {
  background: rgba(255, 255, 255, 0.04);
  color: rgba(255, 255, 255, 0.3)
}

#trc-legend {
  display: flex;
  gap: 16px;
  font-size: 0.7rem;
  color: rgba(255, 255, 255, 0.5)
}

.trc-legend-item {
  display: flex;
  align-items: center;
  gap: 6px
}

.trc-swatch {
  width: 12px;
  height: 12px;
  border-radius: 0;
  display: inline-block
}

.trc-swatch-raise {
  background: rgba(239, 83, 80, 0.55)
}

.trc-swatch-call {
  background: rgba(255, 193, 7, 0.5)
}

.trc-swatch-fold {
  background: rgba(255, 255, 255, 0.04)
}

@media (max-width: 640px) {
  #trc-grid {
    grid-template-columns: repeat(13, minmax(18px, 1fr))
  }

  .trc-cell {
    font-size: 0.48rem
  }
}

#trainer-scenario {
  font-size: 1.05rem;
  color: rgba(255, 255, 255, 0.8);
  line-height: 1.5;
  min-height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  max-width: 520px
}

#trainer-hand {
  display: flex;
  gap: 14px;
  min-height: 150px;
  align-items: center;
  justify-content: center
}

#trainer-hand .card {
  width: 110px;
  height: 150px
}

#trainer-hand .crt,
#trainer-hand .crb {
  font-size: 18px
}

#trainer-hand .csc {
  font-size: 36px
}

#trainer-actions {
  display: flex;
  gap: 14px;
  align-self: stretch;
  max-width: 440px;
  margin: 0 auto
}

#trainer-actions .act-btn {
  flex: 1;
  padding: 14px 0;
  font-size: 0.9rem
}

#trainer-feedback {
  align-self: stretch;
  max-width: 520px;
  margin: 0 auto;
  padding: 16px;
  border-radius: 0;
  background: rgba(255, 255, 255, 0.03);
  font-size: 0.85rem;
  line-height: 1.6
}

#trainer-feedback.correct {
  border: 1px solid rgba(76, 175, 80, 0.3);
  color: #8fd694
}

#trainer-feedback.incorrect {
  border: 1px solid rgba(239, 83, 80, 0.3);
  color: #f29e9c
}

#trainer-feedback .tf-verdict {
  font-weight: 700;
  display: block;
  margin-bottom: 6px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  font-size: 0.75rem
}

#btn-trainer-next {
  align-self: center;
  font-family: 'Inter', sans-serif;
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.5px;
  padding: 12px 40px;
  border: none;
  border-radius: 0;
  background: #c9a84c;
  color: #0d0d1a;
  cursor: pointer;
  text-transform: uppercase
}

#btn-trainer-next:hover {
  background: #dbb856
}

/* ===== Learn Page ===== */
#page-learn-body {
  width: 100%;
  display: flex;
  justify-content: center;
  padding: 10px 0 60px
}

#learn-content {
  width: 100%;
  max-width: 820px;
  text-align: left;
  color: rgba(255, 255, 255, 0.75)
}

#learn-content .site-page-title {
  text-align: center
}

#learn-intro {
  text-align: center;
  color: rgba(255, 255, 255, 0.45);
  font-size: 0.9rem;
  font-style: italic;
  max-width: 560px;
  margin: 0 auto 22px
}

#lp-toc {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
  margin-bottom: 40px;
  padding-bottom: 20px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06)
}

.lp-toc-link {
  font-family: 'Inter', sans-serif;
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.4px;
  text-decoration: none;
  color: rgba(255, 255, 255, 0.55);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 0;
  padding: 6px 14px;
  transition: all 0.15s
}

.lp-toc-link:hover {
  color: #0d0d1a;
  background: #c9a84c;
  border-color: #c9a84c
}

.lp-section {
  margin-bottom: 48px;
  scroll-margin-top: 20px
}

.lp-section-title {
  font-family: 'Playfair Display', Georgia, serif;
  font-size: 1.3rem;
  font-weight: 700;
  color: #e8e4dc;
  margin-bottom: 8px;
  border-left: 3px solid #c9a84c;
  padding-left: 12px
}

.lp-section-sub {
  color: rgba(255, 255, 255, 0.45);
  font-size: 0.82rem;
  line-height: 1.6;
  margin-bottom: 18px;
  max-width: 680px
}

.lp-section p {
  font-size: 0.85rem;
  line-height: 1.75;
  margin-bottom: 12px
}

.lp-list {
  list-style: none;
  padding: 0;
  margin: 0 0 12px
}

.lp-list li {
  font-size: 0.85rem;
  line-height: 1.7;
  padding: 6px 0 6px 16px;
  border-left: 2px solid rgba(201, 168, 76, 0.3);
  margin-bottom: 6px
}

/* --- Hand Rankings --- */
#lp-rank-list {
  display: flex;
  flex-direction: column;
  gap: 6px
}

.lp-rank-row {
  display: flex;
  align-items: center;
  gap: 16px;
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid rgba(255, 255, 255, 0.05);
  border-radius: 0;
  padding: 10px 16px
}

.lp-rank-num {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 0.9rem;
  color: rgba(201, 168, 76, 0.5);
  font-weight: 600;
  width: 20px;
  flex-shrink: 0;
  text-align: center
}

.lp-rank-body {
  flex: 1;
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 4px 12px
}

.lp-rank-name {
  font-weight: 600;
  color: #e8e4dc;
  font-size: 0.85rem;
  min-width: 130px
}

.lp-rank-desc {
  color: rgba(255, 255, 255, 0.5);
  font-size: 0.78rem;
  flex: 1;
  min-width: 200px
}

.lp-rank-cards {
  display: flex;
  gap: 5px;
  flex-shrink: 0
}

/* Enlarged from the original 26x36 - these example hands are the whole
   point of this section, they should read clearly at a glance. */
.lp-rank-cards .card {
  width: 42px;
  height: 58px
}

.lp-rank-cards .crt,
.lp-rank-cards .crb {
  font-size: 11px;
  top: 3px;
  left: 4px
}

.lp-rank-cards .crb {
  bottom: 3px;
  right: 4px;
  top: auto;
  left: auto
}

.lp-rank-cards .csc {
  font-size: 20px
}

/* --- How a Hand Is Played --- */
.lp-flow-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 12px
}

.lp-flow-step {
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid rgba(255, 255, 255, 0.05);
  border-radius: 0;
  padding: 14px
}

.lp-flow-label {
  font-family: 'Playfair Display', Georgia, serif;
  font-weight: 700;
  color: #c9a84c;
  font-size: 0.95rem;
  margin-bottom: 6px
}

.lp-flow-step p {
  font-size: 0.78rem;
  color: rgba(255, 255, 255, 0.5);
  line-height: 1.6;
  margin: 0
}

/* --- Betting Actions --- */
.lp-actions-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
  gap: 10px
}

.lp-action-card {
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid rgba(255, 255, 255, 0.05);
  border-radius: 0;
  padding: 12px 14px
}

.lp-action-name {
  font-weight: 700;
  color: #e8e4dc;
  font-size: 0.82rem;
  margin-bottom: 4px;
  text-transform: uppercase;
  letter-spacing: 0.5px
}

.lp-action-card p {
  font-size: 0.76rem;
  color: rgba(255, 255, 255, 0.5);
  line-height: 1.6;
  margin: 0
}

/* --- Poker Terms --- */
#lp-terms-list {
  display: flex;
  flex-direction: column;
  gap: 8px
}

.lp-term-row {
  display: flex;
  gap: 18px;
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid rgba(255, 255, 255, 0.05);
  border-radius: 0;
  padding: 12px 16px;
  flex-wrap: wrap
}

.lp-term-name {
  font-weight: 600;
  color: #c9a84c;
  font-size: 0.82rem;
  min-width: 160px
}

.lp-term-desc {
  flex: 1;
  min-width: 240px;
  font-size: 0.78rem;
  color: rgba(255, 255, 255, 0.55);
  line-height: 1.65
}

/* --- Play Styles --- */
#lp-styles-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 12px
}

.lp-style-card {
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid rgba(255, 255, 255, 0.05);
  border-radius: 0;
  padding: 14px 16px
}

.lp-style-tag {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 0.62rem;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: rgba(201, 168, 76, 0.6);
  margin-bottom: 4px
}

.lp-style-name {
  font-weight: 700;
  color: #e8e4dc;
  font-size: 0.88rem;
  margin-bottom: 6px
}

.lp-style-desc {
  font-size: 0.78rem;
  color: rgba(255, 255, 255, 0.5);
  line-height: 1.65
}

/* --- Stat Glossary --- */
#lp-glossary-list {
  display: flex;
  flex-direction: column;
  gap: 8px
}

.lp-stat-row {
  display: flex;
  gap: 18px;
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid rgba(255, 255, 255, 0.05);
  border-radius: 0;
  padding: 12px 16px;
  flex-wrap: wrap
}

.lp-stat-name {
  font-family: 'IBM Plex Mono', monospace;
  font-weight: 600;
  color: #c9a84c;
  font-size: 0.8rem;
  min-width: 160px;
  display: flex;
  flex-direction: column;
  gap: 2px
}

.lp-stat-full {
  font-family: 'Inter', sans-serif;
  font-weight: 400;
  font-size: 0.65rem;
  color: rgba(255, 255, 255, 0.3);
  text-transform: uppercase;
  letter-spacing: 0.4px
}

.lp-stat-desc {
  flex: 1;
  min-width: 240px;
  font-size: 0.78rem;
  color: rgba(255, 255, 255, 0.55);
  line-height: 1.65
}

/* --- Using This App --- */
.lp-using-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 12px
}

.lp-using-card {
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid rgba(255, 255, 255, 0.05);
  border-radius: 0;
  padding: 14px 16px
}

.lp-using-name {
  font-family: 'Playfair Display', Georgia, serif;
  font-weight: 700;
  color: #c9a84c;
  font-size: 0.9rem;
  margin-bottom: 6px
}

.lp-using-card p {
  font-size: 0.78rem;
  color: rgba(255, 255, 255, 0.5);
  line-height: 1.65;
  margin: 0
}

/* --- Equity Matrix --- */
#lp-equity-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px
}

#lp-equity-matrix {
  display: grid;
  grid-template-columns: repeat(13, minmax(28px, 1fr));
  gap: 2px;
  width: 100%;
  max-width: 620px
}

.lp-eq-cell {
  aspect-ratio: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: 'IBM Plex Mono', monospace;
  font-size: 0.62rem;
  font-weight: 700;
  border-radius: 0;
  cursor: default
}

#lp-equity-legend {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 0.7rem;
  color: rgba(255, 255, 255, 0.4)
}

#lp-equity-legend-bar {
  width: 160px;
  height: 10px;
  border-radius: 0;
  background: linear-gradient(90deg, rgb(90, 40, 40), rgb(201, 168, 76))
}

@media (max-width: 640px) {
  #lp-equity-matrix {
    grid-template-columns: repeat(13, minmax(20px, 1fr))
  }

  .lp-eq-cell {
    font-size: 0.5rem
  }
}

/* ===== Multiplayer "Coming Soon" page ===== */
#multiplayer-placeholder {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  max-width: 520px;
  padding: 10px 0 40px
}

.mp-heading {
  font-family: 'Playfair Display', Georgia, serif;
  font-size: 1.5rem;
  font-weight: 700;
  color: #e8e4dc;
  margin: 4px 0 10px
}

#multiplayer-placeholder p:not(.mp-heading) {
  color: rgba(255, 255, 255, 0.45);
  font-size: 0.85rem;
  line-height: 1.6
}

#mp-robot-scene {
  position: relative;
  width: 260px;
  height: 160px;
  margin: 10px 0 18px
}

.mp-workbench {
  position: absolute;
  bottom: 18px;
  left: 10px;
  right: 10px;
  height: 6px;
  border-radius: 0;
  background: linear-gradient(90deg, transparent, rgba(201, 168, 76, 0.35) 15%, rgba(201, 168, 76, 0.35) 85%, transparent)
}

.mp-robot {
  position: absolute;
  bottom: 22px;
  width: 58px;
  height: 78px;
  animation: mp-bob 2.4s ease-in-out infinite
}

.mp-robot-1 {
  left: 26px
}

.mp-robot-2 {
  right: 26px;
  animation-delay: 1.1s
}

.mp-robot-head {
  position: relative;
  width: 34px;
  height: 26px;
  margin: 0 auto;
  background: #cfd6dc;
  border-radius: 0;
  border: 2px solid #8a939b;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px
}

.mp-robot-eye {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #4fc3f7;
  box-shadow: 0 0 6px rgba(79, 195, 247, 0.9);
  animation: mp-blink 3.6s ease-in-out infinite
}

.mp-robot-2 .mp-robot-eye {
  animation-delay: 1.6s;
  background: #ef9a9a;
  box-shadow: 0 0 6px rgba(239, 154, 154, 0.9)
}

.mp-robot-body {
  position: relative;
  width: 46px;
  height: 40px;
  margin: 4px auto 0;
  background: #b8c0c8;
  border: 2px solid #838c94;
  border-radius: 0;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding-top: 8px
}

.mp-robot-light {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #9ccc65;
  box-shadow: 0 0 6px rgba(156, 204, 101, 0.9);
  animation: mp-blink 1.4s ease-in-out infinite
}

.mp-robot-arm {
  position: absolute;
  top: 34px;
  width: 8px;
  height: 26px;
  background: #a3acb4;
  border: 2px solid #838c94;
  border-radius: 0
}

.mp-robot-arm-left {
  left: -4px;
  transform-origin: top center;
  animation: mp-arm-wave 2.4s ease-in-out infinite
}

.mp-robot-arm-right {
  right: -4px;
  transform-origin: top center;
  animation: mp-arm-wave 2.4s ease-in-out infinite reverse
}

.mp-wrench {
  position: absolute;
  bottom: -6px;
  left: 50%;
  width: 16px;
  height: 5px;
  background: #d8b74a;
  border-radius: 0;
  transform: translateX(-50%) rotate(35deg);
  transform-origin: center;
  animation: mp-wrench-turn 1.8s ease-in-out infinite
}

.mp-gear {
  position: absolute;
  border-radius: 50%;
  border: 4px dashed rgba(201, 168, 76, 0.55);
  background: rgba(201, 168, 76, 0.08)
}

.mp-gear-big {
  width: 36px;
  height: 36px;
  top: 4px;
  left: 50%;
  animation: mp-spin-centered 6s linear infinite
}

.mp-gear-small {
  width: 20px;
  height: 20px;
  top: 14px;
  left: calc(50% + 30px);
  animation: mp-spin-plain 4s linear infinite reverse
}

@keyframes mp-bob {
  0%, 100% { transform: translateY(0) }
  50% { transform: translateY(-6px) }
}

@keyframes mp-blink {
  0%, 88%, 100% { opacity: 1 }
  92% { opacity: 0.15 }
}

@keyframes mp-arm-wave {
  0%, 100% { transform: rotate(0deg) }
  50% { transform: rotate(18deg) }
}

@keyframes mp-wrench-turn {
  0%, 100% { transform: translateX(-50%) rotate(20deg) }
  50% { transform: translateX(-50%) rotate(50deg) }
}

/* Bakes the horizontal re-centering into every frame since an animated
   transform replaces the whole property, not just the rotation part. */
@keyframes mp-spin-centered {
  from { transform: translateX(-50%) rotate(0deg) }
  to { transform: translateX(-50%) rotate(360deg) }
}

@keyframes mp-spin-plain {
  from { transform: rotate(0deg) }
  to { transform: rotate(360deg) }
}

/* ===== Rumble "Coming Soon" page ===== */
#rumble-placeholder {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  max-width: 520px;
  padding: 10px 0 40px
}

#rumble-placeholder p:not(.mp-heading) {
  color: rgba(255, 255, 255, 0.45);
  font-size: 0.85rem;
  line-height: 1.6
}

#rumble-wheel-scene {
  position: relative;
  width: 260px;
  height: 160px;
  margin: 10px 0 18px;
  display: flex;
  align-items: center;
  justify-content: center
}

#rumble-wheel {
  width: 120px;
  height: 120px;
  border-radius: 50%;
  background: conic-gradient(
    #c9a84c 0deg 45deg, #7a1f1f 45deg 90deg,
    #c9a84c 90deg 135deg, #1a3a5c 135deg 180deg,
    #c9a84c 180deg 225deg, #7a1f1f 225deg 270deg,
    #c9a84c 270deg 315deg, #1a3a5c 315deg 360deg
  );
  border: 3px solid rgba(255, 255, 255, 0.15);
  box-shadow: 0 0 24px rgba(201, 168, 76, 0.25), 0 4px 16px rgba(0, 0, 0, 0.4);
  animation: rumble-spin 6s linear infinite
}

#rumble-wheel-hub {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 18px;
  height: 18px;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background: #0d0d1a;
  border: 2px solid rgba(255, 255, 255, 0.3);
  z-index: 1
}

#rumble-wheel-pointer {
  position: absolute;
  top: calc(50% - 68px);
  left: 50%;
  transform: translateX(-50%);
  width: 0;
  height: 0;
  border-left: 8px solid transparent;
  border-right: 8px solid transparent;
  border-top: 14px solid #e8e4dc;
  filter: drop-shadow(0 2px 3px rgba(0, 0, 0, 0.5));
  z-index: 1
}

.rumble-spark {
  position: absolute;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #c9a84c;
  box-shadow: 0 0 8px rgba(201, 168, 76, 0.9);
  animation: rumble-spark-twinkle 2.2s ease-in-out infinite
}

.rumble-spark-1 { top: 20%; left: 18%; animation-delay: 0s }
.rumble-spark-2 { top: 30%; right: 16%; animation-delay: 0.7s }
.rumble-spark-3 { bottom: 22%; left: 30%; animation-delay: 1.4s }

@keyframes rumble-spin {
  from { transform: rotate(0deg) }
  to { transform: rotate(360deg) }
}

@keyframes rumble-spark-twinkle {
  0%, 100% { opacity: 0.2; transform: scale(0.8) }
  50% { opacity: 1; transform: scale(1.3) }
}

/* ===== Rumble landing page (real content, replaces the old placeholder) ===== */
#rumble-page-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  max-width: 720px;
  width: 100%;
  padding: 10px 0 40px
}

#rumble-hero {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  width: 100%;
  max-width: 380px
}

#rumble-hero-tagline {
  color: rgba(255, 255, 255, 0.5);
  font-size: 0.88rem;
  line-height: 1.6;
  margin: 2px 0 18px
}

.rumble-btn {
  background: linear-gradient(135deg, #4dd0e1, #2b96a8);
  color: #0d0d1a;
  margin-bottom: 6px
}

.rumble-btn:hover {
  background: linear-gradient(135deg, #64ddee, #33abc0);
  box-shadow: 0 4px 20px rgba(77, 208, 225, 0.35)
}

#rumble-explainer {
  width: 100%;
  margin-top: 34px;
  padding-top: 24px;
  border-top: 1px solid rgba(255, 255, 255, 0.06)
}

.rumble-section-title {
  font-family: 'Playfair Display', Georgia, serif;
  font-size: 1.1rem;
  font-weight: 700;
  color: #e8e4dc;
  text-align: center;
  margin-bottom: 12px
}

#rumble-rules-list {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-bottom: 30px
}

#rumble-rules-list li {
  position: relative;
  padding-left: 20px;
  color: rgba(255, 255, 255, 0.55);
  font-size: 0.82rem;
  line-height: 1.6
}

#rumble-rules-list li::before {
  content: '♠';
  position: absolute;
  left: 0;
  top: 0;
  color: #4dd0e1;
  opacity: 0.7;
  font-size: 0.75rem
}

#rumble-powerups-hint {
  text-align: center;
  color: rgba(255, 255, 255, 0.4);
  font-size: 0.78rem;
  line-height: 1.6;
  margin-bottom: 18px
}

#rumble-powerup-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 14px
}

.rpu-grid-cell {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px
}

.rpu-grid-category {
  font-size: 0.62rem;
  text-transform: uppercase;
  letter-spacing: 0.8px;
  color: rgba(255, 255, 255, 0.3);
  text-align: center
}

@media (max-width: 640px) {
  #rumble-powerup-grid {
    grid-template-columns: 1fr
  }
}

/* ===== Rumble power-up card (shared component - the explainer grid above
   and the in-game secret card below both render the exact same markup/CSS,
   per the "same card you'll see in-game" requirement) ===== */
.rpu-card {
  width: 100%;
  max-width: 210px;
  background: linear-gradient(160deg, #16161f, #0d0d14);
  border: 1px solid rgba(77, 208, 225, 0.25);
  border-radius: 0;
  padding: 14px 16px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.35)
}

.rpu-card-top {
  display: flex;
  align-items: center;
  gap: 8px
}

.rpu-card-icon {
  font-size: 1.4rem;
  line-height: 1;
  flex-shrink: 0
}

.rpu-card-name {
  font-family: 'Playfair Display', Georgia, serif;
  font-size: 0.92rem;
  font-weight: 700;
  color: #e8e4dc
}

.rpu-card-desc {
  font-size: 0.72rem;
  line-height: 1.5;
  color: rgba(255, 255, 255, 0.5)
}

/* ===== In-game secret power-up panel (visible only to "You" - lives inside
   #player-area alongside the hole cards/stack, same flex row) ===== */
#rumble-powerup-panel {
  flex-shrink: 0
}

#rumble-powerup-panel .rpu-card {
  max-width: 220px;
  padding: 10px 14px;
  gap: 4px
}

#rumble-powerup-panel .rpu-card-desc {
  font-size: 0.68rem;
  margin-bottom: 2px
}

#rumble-powerup-panel.rpu-used .rpu-card {
  opacity: 0.5;
  border-color: rgba(255, 255, 255, 0.1)
}

#rumble-powerup-target-hint {
  font-size: 0.68rem;
  font-weight: 600;
  color: #4dd0e1;
  margin-bottom: 4px
}

.rpu-activate-btn {
  font-family: 'Inter', sans-serif;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  padding: 7px 0;
  border: none;
  border-radius: 0;
  cursor: pointer;
  background: linear-gradient(135deg, #4dd0e1, #2b96a8);
  color: #0d0d1a;
  transition: all 0.2s
}

.rpu-activate-btn:hover:not(:disabled) {
  background: linear-gradient(135deg, #64ddee, #33abc0);
  box-shadow: 0 2px 12px rgba(77, 208, 225, 0.35)
}

.rpu-activate-btn:disabled {
  background: rgba(255, 255, 255, 0.06);
  color: rgba(255, 255, 255, 0.3);
  cursor: not-allowed
}

/* ===== Header pill (mirrors #hranked's look, cyan instead of gold) ===== */
#hrumble {
  font-size: 0.55rem;
  text-transform: uppercase;
  letter-spacing: 1.5px;
  padding: 2px 8px;
  border: 1px solid rgba(77, 208, 225, 0.35);
  border-radius: 0;
  color: #4dd0e1;
  font-weight: 600
}

/* ===== Seat states: targetable (choosing an X-Ray Vision/Freeze-Silence
   target), pulse (a power-up was just activated at this seat), frozen
   (Freeze/Silence is currently restricting this seat's options) ===== */
.seat.targetable {
  cursor: pointer;
  border-color: #4dd0e1 !important;
  box-shadow: 0 0 16px rgba(77, 208, 225, 0.5) !important;
  animation: rpu-target-pulse 1.2s ease-in-out infinite
}

@keyframes rpu-target-pulse {
  0%, 100% { box-shadow: 0 0 10px rgba(77, 208, 225, 0.35) }
  50% { box-shadow: 0 0 20px rgba(77, 208, 225, 0.7) }
}

.seat.rpu-pulse {
  animation: rpu-seat-pulse 0.9s ease
}

@keyframes rpu-seat-pulse {
  0% { box-shadow: 0 0 0 0 rgba(201, 168, 76, 0.7) }
  70% { box-shadow: 0 0 0 18px rgba(201, 168, 76, 0) }
  100% { box-shadow: 0 0 0 0 rgba(201, 168, 76, 0) }
}

.seat.rpu-frozen {
  border-color: #4dd0e1 !important
}

.rpu-frozen-badge {
  position: absolute;
  top: -11px;
  right: -8px;
  background: linear-gradient(135deg, #4dd0e1, #2b96a8);
  color: #0d0d1a;
  font-size: 9px;
  font-weight: 700;
  padding: 2px 6px;
  border-radius: 0;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.4);
  z-index: 6;
  white-space: nowrap
}

/* ===== Center-screen power-up reveal - everyone at the table sees this the
   moment any player (human or bot) activates their power-up. Same restart
   technique as #ranked-intro-overlay: toggling .hidden (display:none <->
   flex) always replays the CSS animations below from frame zero. ===== */
#rumble-reveal-overlay {
  position: fixed;
  inset: 0;
  z-index: 250;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  pointer-events: none;
  opacity: 0;
  /* Held noticeably longer than a typical toast/flourish (~4s total) so
     everyone actually has time to read who used what on whom before it
     fades - a quick blip is easy to miss mid-hand. */
  animation: rpu-reveal-bg-in 0.3s ease forwards, rpu-reveal-bg-out 0.5s ease forwards 3.5s
}

#rumble-reveal-overlay::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at 50% 50%, rgba(0, 0, 0, 0.55) 0%, rgba(0, 0, 0, 0.15) 55%, transparent 100%)
}

@keyframes rpu-reveal-bg-in {
  from { opacity: 0 }
  to { opacity: 1 }
}

@keyframes rpu-reveal-bg-out {
  from { opacity: 1 }
  to { opacity: 0 }
}

#rumble-reveal-card {
  position: relative;
  z-index: 1;
  width: 160px;
  min-height: 190px;
  background: linear-gradient(160deg, #1c1c2c, #0d0d1a);
  border: 2px solid #4dd0e1;
  border-radius: 0;
  padding: 18px 12px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.6), 0 0 30px rgba(77, 208, 225, 0.3);
  opacity: 0;
  transform: rotateY(90deg) scale(0.6);
  animation: rpu-card-flip 0.55s cubic-bezier(0.2, 0.9, 0.3, 1.2) forwards 0.15s
}

@keyframes rpu-card-flip {
  0% { transform: rotateY(90deg) scale(0.6); opacity: 0 }
  70% { transform: rotateY(0deg) scale(1.06); opacity: 1 }
  100% { transform: rotateY(0deg) scale(1); opacity: 1 }
}

#rpu-reveal-icon {
  font-size: 2.6rem;
  line-height: 1;
  filter: drop-shadow(0 2px 6px rgba(0, 0, 0, 0.5))
}

#rpu-reveal-name {
  font-family: 'Playfair Display', Georgia, serif;
  font-size: 1rem;
  font-weight: 700;
  color: #e8e4dc;
  text-align: center;
  padding: 0 6px
}

#rpu-reveal-swap {
  display: none;
  align-items: center;
  gap: 8px;
  margin-top: 4px
}

#rpu-reveal-swap.showing {
  display: flex
}

.rpu-swap-card {
  width: 32px;
  height: 46px
}

#rpu-reveal-swap-old {
  opacity: 1;
  animation: rpu-swap-out 0.6s ease forwards 0.7s
}

#rpu-reveal-swap-new {
  opacity: 0;
  animation: rpu-swap-in 0.6s ease forwards 1s
}

#rpu-reveal-swap-arrow {
  color: rgba(255, 255, 255, 0.4);
  font-size: 1rem;
  opacity: 0;
  animation: rpu-reveal-bg-in 0.3s ease forwards 0.8s
}

@keyframes rpu-swap-out {
  0% { transform: translateX(0) rotate(0deg); opacity: 1 }
  100% { transform: translateX(-12px) rotate(-14deg); opacity: 0.15 }
}

@keyframes rpu-swap-in {
  0% { transform: translateX(12px) rotate(14deg); opacity: 0 }
  100% { transform: translateX(0) rotate(0deg); opacity: 1 }
}

#rpu-reveal-caption {
  position: relative;
  z-index: 1;
  margin-top: 20px;
  font-family: 'Inter', sans-serif;
  font-size: 0.9rem;
  font-weight: 600;
  color: #e8d9b0;
  text-align: center;
  padding: 0 20px;
  opacity: 0;
  animation: rpu-reveal-bg-in 0.4s ease forwards 0.5s
}

/* ===== Rumble power-up PRIVATE reveal (activator-only) - a real face-up
   card popup, click anywhere (or wait 5s) to dismiss. Reuses the public
   reveal's own fade keyframes and the difficulty-intro's content-in scale
   keyframe rather than defining new ones. ===== */
#rpu-private-reveal-overlay {
  position: fixed;
  inset: 0;
  z-index: 260;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.7);
  cursor: pointer;
  opacity: 0;
  animation: rpu-reveal-bg-in 0.25s ease forwards, rpu-reveal-bg-out 0.4s ease forwards 4.6s
}

#rpu-private-reveal-content {
  background: linear-gradient(160deg, #1c1c2c, #0d0d1a);
  border: 2px solid #c9a84c;
  border-radius: 0;
  padding: 26px 30px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  box-shadow: 0 12px 50px rgba(0, 0, 0, 0.7), 0 0 30px rgba(201, 168, 76, 0.25);
  opacity: 0;
  transform: scale(0.85);
  animation: diff-intro-content-in 0.4s ease forwards 0.1s
}

#rpu-private-reveal-heading {
  font-family: 'Playfair Display', Georgia, serif;
  font-size: 1.1rem;
  font-weight: 700;
  color: #e8e4dc
}

#rpu-private-reveal-cards {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 14px;
  max-width: 320px
}

#rpu-private-reveal-cards .card {
  width: 84px;
  height: 120px
}

#rpu-private-reveal-arrow {
  font-size: 1.4rem;
  color: rgba(255, 255, 255, 0.4)
}

#rpu-private-reveal-caption {
  font-size: 0.85rem;
  color: rgba(255, 255, 255, 0.6);
  text-align: center
}

/* ===== Rumble tournament-complete results screen (mirrors #rank-results-modal) ===== */
#rumble-results-modal {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.85);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 230
}

#rumble-results-content {
  background: #111;
  border: 1px solid rgba(77, 208, 225, 0.3);
  border-radius: 0;
  padding: 30px 34px;
  max-width: 400px;
  width: 90%;
  text-align: center
}

#rumble-results-title {
  font-family: 'Playfair Display', Georgia, serif;
  font-size: 1.2rem;
  font-weight: 700;
  color: #e8e4dc;
  margin-bottom: 20px
}

#rumble-results-standings {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-bottom: 22px
}

.rumble-standing-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 12px;
  border-radius: 0;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.06)
}

.rumble-standing-row.you {
  border-color: rgba(255, 255, 255, 0.25)
}

.rumble-standing-row.winner {
  border-color: rgba(77, 208, 225, 0.45);
  background: rgba(77, 208, 225, 0.08)
}

.rumble-standing-rank {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 0.72rem;
  color: rgba(255, 255, 255, 0.35);
  width: 22px;
  flex-shrink: 0;
  text-align: left
}

.rumble-standing-name {
  flex: 1;
  text-align: left;
  font-size: 0.82rem;
  font-weight: 500;
  color: #e8e4dc
}

.rumble-standing-stack {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 0.82rem;
  font-weight: 600;
  color: #c9a84c
}

/* ===== Tournament page - a violet/prestige accent, distinct from Ranked's
   gold, Rumble's cyan, and every difficulty's own color. ===== */
#tournament-page-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  max-width: 720px;
  width: 100%;
  padding: 10px 0 40px
}

#tournament-select-view,
#tournament-home-view {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%
}

#tournament-multiplayer-note {
  text-align: center;
  color: rgba(255, 255, 255, 0.4);
  font-size: 0.76rem;
  font-style: italic;
  max-width: 480px;
  line-height: 1.6;
  margin: 2px 0 22px
}

#tournament-info-box {
  width: 100%;
  max-width: 480px;
  margin-bottom: 30px;
  padding-top: 26px;
  border-top: 1px solid rgba(255, 255, 255, 0.06)
}

#tournament-rules-list {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 10px
}

#tournament-rules-list li {
  position: relative;
  padding-left: 20px;
  color: rgba(255, 255, 255, 0.55);
  font-size: 0.82rem;
  line-height: 1.6
}

#tournament-rules-list li::before {
  content: '♠';
  position: absolute;
  left: 0;
  top: 0;
  color: #9c6ade;
  opacity: 0.75;
  font-size: 0.75rem
}

.tournament-btn {
  background: linear-gradient(135deg, #9c6ade, #7c4dbd);
  color: #fbf7ff
}

.tournament-btn:hover {
  background: linear-gradient(135deg, #ad7ded, #8c5dce);
  box-shadow: 0 4px 20px rgba(156, 106, 222, 0.35)
}

/* ===== Tier bars - long horizontal boxes (medal icon left, name/stats
   middle, Enter right), each with its own layered background wash + a
   large faded medal watermark for "more detail in the background" without
   the icon fighting the readable content sitting on top of it. ===== */
#tournament-tier-grid {
  display: flex;
  flex-direction: column;
  gap: 14px;
  width: 100%;
  margin-bottom: 30px
}

.tournament-tier-bar {
  display: flex;
  align-items: center;
  gap: 20px;
  width: 100%;
  padding: 20px 26px;
  border-radius: 0;
  border: 1px solid rgba(156, 106, 222, 0.25);
  background: linear-gradient(120deg, #17151c 0%, #16161f 55%, #0d0d14 100%);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.35);
  position: relative;
  overflow: hidden
}

.tournament-tier-bar::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px
}

.tournament-tier-watermark {
  position: absolute;
  right: -8px;
  top: 50%;
  transform: translateY(-50%) rotate(-10deg);
  font-size: 6rem;
  line-height: 1;
  opacity: 0.06;
  pointer-events: none;
  z-index: 0
}

/* Rising-prestige tints per tier, echoed in the top accent strip above. */
.tournament-tier-bar[data-tier-key="local"] {
  border-color: rgba(180, 131, 90, 0.3)
}
.tournament-tier-bar[data-tier-key="local"]::before {
  background: linear-gradient(90deg, transparent, #b4835a, transparent)
}
.tournament-tier-bar[data-tier-key="state"] {
  border-color: rgba(154, 165, 178, 0.35)
}
.tournament-tier-bar[data-tier-key="state"]::before {
  background: linear-gradient(90deg, transparent, #b8c2cc, transparent)
}
.tournament-tier-bar[data-tier-key="na"] {
  border-color: rgba(201, 168, 76, 0.35)
}
.tournament-tier-bar[data-tier-key="na"]::before {
  background: linear-gradient(90deg, transparent, #c9a84c, transparent)
}
.tournament-tier-bar[data-tier-key="worldSeries"] {
  border-color: rgba(156, 106, 222, 0.5);
  box-shadow: 0 4px 20px rgba(156, 106, 222, 0.18), 0 4px 16px rgba(0, 0, 0, 0.35)
}
.tournament-tier-bar[data-tier-key="worldSeries"]::before {
  background: linear-gradient(90deg, transparent, #9c6ade, transparent)
}
.tournament-tier-bar[data-tier-key="highRollers"] {
  border-color: rgba(96, 205, 240, 0.45);
  box-shadow: 0 4px 20px rgba(96, 205, 240, 0.15), 0 4px 16px rgba(0, 0, 0, 0.35)
}
.tournament-tier-bar[data-tier-key="highRollers"]::before {
  background: linear-gradient(90deg, transparent, #60cdf0, transparent)
}
.tournament-tier-bar[data-tier-key="celebrityCasual"] {
  border-color: rgba(230, 83, 156, 0.45);
  box-shadow: 0 4px 20px rgba(230, 83, 156, 0.15), 0 4px 16px rgba(0, 0, 0, 0.35)
}
.tournament-tier-bar[data-tier-key="celebrityCasual"]::before {
  background: linear-gradient(90deg, transparent, #e6539c, transparent)
}
.tournament-tier-bar[data-tier-key="undergroundTables"] {
  border-color: rgba(214, 62, 62, 0.5);
  box-shadow: 0 4px 22px rgba(214, 62, 62, 0.2), 0 4px 16px rgba(0, 0, 0, 0.4)
}
.tournament-tier-bar[data-tier-key="undergroundTables"]::before {
  background: linear-gradient(90deg, transparent, #d63e3e, transparent)
}

.tournament-tier-locked {
  filter: grayscale(0.6);
  opacity: 0.75
}

.tournament-tier-rank-req {
  color: #c9a3ec
}

.tournament-tier-bar-icon {
  flex-shrink: 0;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.9rem;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.1);
  position: relative;
  z-index: 1
}

.tournament-tier-bar-info {
  flex: 1;
  min-width: 0;
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  gap: 8px;
  text-align: left
}

.tournament-tier-name {
  font-family: 'Playfair Display', Georgia, serif;
  font-size: 1.05rem;
  font-weight: 700;
  color: #e8e4dc;
  text-align: left
}

.tournament-tier-stats {
  display: flex;
  gap: 16px;
  font-family: 'IBM Plex Mono', monospace;
  font-size: 0.8rem;
  color: rgba(255, 255, 255, 0.6)
}

.tournament-enter-btn {
  flex-shrink: 0;
  width: auto;
  min-width: 150px;
  font-weight: 700;
  position: relative;
  z-index: 1
}

.tournament-enter-btn:not(:disabled) {
  border-color: rgba(156, 106, 222, 0.4);
  color: #c9a3ec
}

@media (max-width: 640px) {
  .tournament-tier-bar {
    flex-wrap: wrap
  }
  .tournament-enter-btn {
    width: 100%
  }
}

/* ===== Tournament home - a decorative hero + a real connected "path to
   the trophy" instead of a bare row of boxes, to fill what used to be a
   pretty barren screen. ===== */
#tournament-home-hero {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-bottom: 30px
}

#tournament-home-trophy {
  font-size: 3.2rem;
  line-height: 1;
  margin-bottom: 6px;
  filter: drop-shadow(0 4px 16px rgba(156, 106, 222, 0.35));
  animation: tournament-trophy-bob 3s ease-in-out infinite
}

@keyframes tournament-trophy-bob {
  0%, 100% { transform: translateY(0) }
  50% { transform: translateY(-6px) }
}

#tournament-home-tier-name {
  font-family: 'Playfair Display', Georgia, serif;
  font-size: 1.15rem;
  font-weight: 700;
  color: #e8e4dc;
  text-align: center
}

#tournament-progress-track {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 0;
  width: 100%;
  max-width: 640px;
  padding: 30px 20px;
  margin-bottom: 30px;
  border-radius: 0;
  background: radial-gradient(ellipse at 50% 40%, rgba(156, 106, 222, 0.08) 0%, transparent 70%)
}

.tournament-round-connector {
  width: 26px;
  height: 3px;
  flex-shrink: 0;
  background: rgba(255, 255, 255, 0.1);
  margin: 0 -1px
}

.tournament-connector-done {
  background: linear-gradient(90deg, #66bb6a, #81c784)
}

.tournament-round-node {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  width: 130px;
  height: 120px;
  padding: 14px 10px;
  border-radius: 0;
  border: 1px solid rgba(255, 255, 255, 0.08);
  background: rgba(255, 255, 255, 0.02);
  flex-shrink: 0
}

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

.tournament-round-label {
  font-size: 0.74rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: rgba(255, 255, 255, 0.55)
}

.tournament-round-diff {
  font-size: 0.8rem;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.4)
}

/* Difficulty-tinted, same green/amber/red/silver language as the per-
   difficulty entry-intro flashes - round 5 (Master) reuses expert's tint,
   same as it reuses expert's actual bot logic. */
.tournament-round-node[data-difficulty="easy"] {
  border-color: rgba(102, 187, 106, 0.35);
  background: rgba(102, 187, 106, 0.06)
}
.tournament-round-node[data-difficulty="easy"] .tournament-round-diff { color: #81c784 }
.tournament-round-node[data-difficulty="medium"] {
  border-color: rgba(255, 202, 40, 0.35);
  background: rgba(255, 202, 40, 0.06)
}
.tournament-round-node[data-difficulty="medium"] .tournament-round-diff { color: #ffca28 }
.tournament-round-node[data-difficulty="hard"] {
  border-color: rgba(239, 83, 80, 0.35);
  background: rgba(239, 83, 80, 0.06)
}
.tournament-round-node[data-difficulty="hard"] .tournament-round-diff { color: #ef5350 }
.tournament-round-node[data-difficulty="expert"] {
  border-color: rgba(220, 220, 255, 0.3);
  background: rgba(220, 220, 255, 0.05)
}
.tournament-round-node[data-difficulty="expert"] .tournament-round-diff { color: #dcdcff }

.tournament-round-done {
  box-shadow: inset 0 0 0 1px rgba(76, 175, 80, 0.4)
}

.tournament-round-done .tournament-round-label {
  color: #81c784
}

.tournament-round-current {
  box-shadow: inset 0 0 0 2px rgba(156, 106, 222, 0.6), 0 0 16px rgba(156, 106, 222, 0.3)
}

.tournament-round-current .tournament-round-label {
  color: #c9a3ec
}

.tournament-round-locked {
  opacity: 0.4
}

.tournament-trophy-node {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 74px;
  height: 74px;
  border-radius: 50%;
  font-size: 2.1rem;
  flex-shrink: 0;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.1);
  filter: grayscale(1);
  opacity: 0.5
}

.tournament-trophy-won {
  filter: none;
  opacity: 1;
  background: radial-gradient(circle, rgba(201, 168, 76, 0.25), transparent 70%);
  border-color: rgba(201, 168, 76, 0.5);
  box-shadow: 0 0 20px rgba(201, 168, 76, 0.4);
  animation: tournament-trophy-bob 2.4s ease-in-out infinite
}

#tournament-home-actions {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%
}

#btn-tournament-begin-round {
  max-width: 340px;
  margin-bottom: 10px
}

#btn-tournament-exit {
  color: rgba(239, 83, 80, 0.7);
  border-color: rgba(239, 83, 80, 0.25)
}

#btn-tournament-exit:hover {
  color: rgba(239, 83, 80, 0.9);
  border-color: rgba(239, 83, 80, 0.4)
}

/* ===== Header pill (mirrors #hrumble's look, violet instead of cyan) ===== */
#htournament {
  font-size: 0.55rem;
  text-transform: uppercase;
  letter-spacing: 1.5px;
  padding: 2px 8px;
  border: 1px solid rgba(156, 106, 222, 0.35);
  border-radius: 0;
  color: #c9a3ec;
  font-weight: 600
}

/* ===== Tournament round-result modal (mirrors #rank-results-modal) ===== */
#tournament-round-result-modal {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.85);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 230
}

#tournament-round-result-content {
  background: #111;
  border: 1px solid rgba(156, 106, 222, 0.3);
  border-radius: 0;
  padding: 30px 34px;
  max-width: 400px;
  width: 90%;
  text-align: center
}

#tournament-round-result-title {
  font-family: 'Playfair Display', Georgia, serif;
  font-size: 1.2rem;
  font-weight: 700;
  color: #e8e4dc;
  margin-bottom: 14px
}

#tournament-round-result-detail {
  font-size: 0.85rem;
  color: rgba(255, 255, 255, 0.6);
  line-height: 1.6;
  margin-bottom: 18px
}

#tournament-round-result-unlocks {
  font-size: 0.8rem;
  font-weight: 600;
  color: #c9a3ec;
  margin-bottom: 18px
}

/* ===== Exit-tournament confirmation ===== */
#tournament-exit-confirm-modal {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.85);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 240
}

#tournament-exit-confirm-content {
  background: #111;
  border: 1px solid rgba(239, 83, 80, 0.3);
  border-radius: 0;
  padding: 30px 34px;
  max-width: 380px;
  width: 90%;
  text-align: center
}

#tournament-exit-confirm-content h2 {
  font-family: 'Playfair Display', Georgia, serif;
  font-size: 1.1rem;
  font-weight: 700;
  color: #e8e4dc;
  margin-bottom: 14px
}

#tournament-exit-confirm-content p {
  font-size: 0.82rem;
  color: rgba(255, 255, 255, 0.6);
  line-height: 1.6;
  margin-bottom: 20px
}

#btn-tournament-exit-confirm {
  background: linear-gradient(135deg, #ef5350, #d32f2f);
  color: #fff5f5;
  margin-bottom: 10px
}

#btn-tournament-exit-confirm:hover {
  background: linear-gradient(135deg, #f2645f, #dc3a3a);
  box-shadow: 0 4px 20px rgba(239, 83, 80, 0.35)
}

/* ===== Spins page - a giant spinnable wheel, gold/violet accented to sit
   between Tournament's violet and the site's gold, since it pays out in
   both coins and XP. ===== */
#spins-page-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  max-width: 480px;
  width: 100%
}

#spins-subtitle {
  font-size: 0.85rem;
  color: rgba(255, 255, 255, 0.55);
  text-align: center;
  margin-bottom: 26px
}

#spin-wheel-wrap {
  position: relative;
  width: 300px;
  height: 300px;
  margin-bottom: 22px
}

#spin-wheel-svg-wrap {
  width: 100%;
  height: 100%;
  filter: drop-shadow(0 8px 30px rgba(0, 0, 0, 0.55))
}

#spin-wheel-svg-wrap svg {
  width: 100%;
  height: 100%;
  display: block
}

#spin-wheel-rotor {
  transform-origin: 150px 150px;
  transform: rotate(0deg);
  transition: transform 5s cubic-bezier(0.14, 0.67, 0.1, 1)
}

#spin-wheel-pointer {
  position: absolute;
  top: -6px;
  left: 50%;
  transform: translateX(-50%);
  font-size: 1.8rem;
  color: #c9a84c;
  z-index: 3;
  filter: drop-shadow(0 2px 6px rgba(0, 0, 0, 0.6))
}

#spin-wheel-hub {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 54px;
  height: 54px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #2a2536 0%, #17141e 70%);
  border: 3px solid #c9a84c;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.5rem;
  z-index: 2;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.5)
}

#spin-sparkles {
  position: absolute;
  inset: 0;
  pointer-events: none;
  overflow: visible;
  z-index: 4
}

.spin-sparkle {
  position: absolute;
  top: 50%;
  left: 50%;
  font-size: 1.15rem;
  transform: translate(-50%, -50%);
  animation: spin-sparkle-burst 0.95s ease-out forwards;
  will-change: transform, opacity
}

@keyframes spin-sparkle-burst {
  0% { transform: translate(-50%, -50%) translate(calc(var(--sx) * 60px), calc(var(--sy) * 60px)) scale(0.4); opacity: 0 }
  25% { opacity: 1 }
  100% { transform: translate(-50%, -50%) translate(calc(var(--sx) * 190px), calc(var(--sy) * 190px)) scale(1.15); opacity: 0 }
}

#spins-coins-row {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 1rem;
  color: #e8e4dc;
  margin-bottom: 16px
}

#btn-spin {
  min-width: 220px;
  font-weight: 700
}

#spin-result {
  margin-top: 20px;
  font-family: 'Playfair Display', Georgia, serif;
  font-size: 1.3rem;
  font-weight: 700;
  text-align: center;
  animation: spin-result-pop 0.4s ease
}

@keyframes spin-result-pop {
  0% { opacity: 0; transform: scale(0.7) }
  60% { opacity: 1; transform: scale(1.08) }
  100% { opacity: 1; transform: scale(1) }
}

.spin-result-coins { color: #c9a84c }
.spin-result-xp { color: #6bbf6b }
.spin-result-jackpot {
  font-size: 1.6rem;
  background: linear-gradient(90deg, #ffd166, #9c6ade, #ffd166);
  background-size: 200% auto;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  animation: spin-result-pop 0.4s ease, spin-jackpot-shimmer 1.8s linear infinite
}

@keyframes spin-jackpot-shimmer {
  to { background-position: 200% center }
}

@media (max-width: 480px) {
  #spin-wheel-wrap {
    width: 260px;
    height: 260px
  }
}