/* Base font-size: ~20px (default 16 × 125%). rem-based text across the app
   scales up ~25% from this single lever; uses % to respect the user's browser
   font-size / accessibility settings. */
html {
  font-size: 125%;
}

@keyframes castleShake {
  0%,
  100% {
    transform: translateX(0);
  }
  10%,
  30%,
  50%,
  70%,
  90% {
    transform: translateX(-8px);
  }
  20%,
  40%,
  60%,
  80% {
    transform: translateX(8px);
  }
}

@keyframes wallShake {
  0%,
  100% {
    transform: translateX(0);
  }
  10%,
  30%,
  50%,
  70%,
  90% {
    transform: translateX(-8px);
  }
  20%,
  40%,
  60%,
  80% {
    transform: translateX(8px);
  }
}

.shake-castle {
  animation: castleShake 0.6s ease-in-out;
}

.shake-wall {
  animation: wallShake 0.6s ease-in-out;
}

@keyframes resourceFlash {
  0% {
    opacity: 1;
    transform: scale(1.3);
    font-weight: bold;
  }
  75% {
    opacity: 1;
    transform: scale(1) translateY(-25px);
    font-weight: bold;
  }
  100% {
    opacity: 0;
    transform: scale(1) translateY(-25px);
  }
}

.resource-diff {
  position: absolute;
  right: -30px;
  top: -5px;
  font-size: 0.85em;
  font-weight: bold;
  animation: resourceFlash 3.5s ease-out forwards;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
}

.card-preview-anchor {
  position: relative;
  display: inline-block;
}

.card-preview-highlight {
  filter: drop-shadow(0 0 8px rgba(255, 215, 120, 0.35));
}

.card-preview-diff {
  position: absolute;
  left: calc(100% + 6px);
  top: 50%;
  transform: translateY(-50%);
  font-size: 0.8em;
  font-weight: 800;
  line-height: 1;
  white-space: nowrap;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.65);
  pointer-events: none;
  z-index: 2;
}

.card-preview-diff-wall {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  left: 50%;
  top: auto;
  bottom: calc(100% + 8px);
  transform: translateX(-50%);
  font-family: 'Oswald', sans-serif;
  font-size: 1.02em;
  font-weight: 900;
  line-height: 1;
  z-index: 6;
}

.card-preview-diff-wall.stat-pos {
  color: #dfff88;
  -webkit-text-stroke: 0 transparent;
  text-shadow:
    0 1px 2px rgba(0, 0, 0, 0.8),
    0 0 8px rgba(225, 255, 120, 0.45);
}

.card-preview-diff-wall.stat-neg {
  color: #ffb8b8;
  -webkit-text-stroke: 0 transparent;
  text-shadow:
    0 1px 2px rgba(0, 0, 0, 0.8),
    0 0 10px rgba(255, 160, 160, 0.5);
}

.card-preview-diff.stat-pos {
  color: var(--stat-color-pos);
  -webkit-text-stroke: 0 transparent;
  text-shadow:
    0 1px 2px rgba(0, 0, 0, 0.75),
    0 0 8px rgba(57, 255, 20, 0.25);
}

.card-preview-diff.stat-neg {
  color: var(--stat-color-neg);
  -webkit-text-stroke: 0 transparent;
  text-shadow:
    0 1px 2px rgba(0, 0, 0, 0.75),
    0 0 8px rgba(255, 68, 85, 0.22);
}

a:hover {
  cursor: pointer;
}

.flexcol {
  flex-direction: column;
}

.flexcolrev {
  flex-direction: column-reverse;
}

.flexrow {
  flex-direction: row;
}

.flexrowrev {
  flex-direction: row-reverse;
}

.install-button {
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #1d3557;
  color: #f1faee;
  border: none;
  border-radius: 8px;
  padding: 12px 24px;
  font-size: 16px;
  font-weight: bold;
  cursor: pointer;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  transition:
    background-color 0.3s,
    transform 0.2s;
}

.install-button .icon {
  margin-right: 8px;
  font-size: 20px;
}

.install-button:hover {
  background-color: #457b9d;
}

.install-button:active {
  transform: scale(0.95);
}

#install-container {
  display: none;
  position: fixed;
  bottom: 16px;
  right: 16px;
  z-index: 1000;
}

.install-dismiss {
  position: absolute;
  top: -12px;
  right: -12px;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  border: none;
  background: #e63946;
  color: white;
  font-size: 14px;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  z-index: 1;
}

.install-dismiss:hover {
  background: #c1121f;
}

/* Hide install prompt when already running as installed PWA */
@media (display-mode: standalone) {
  #install-container {
    display: none !important;
  }
}

.tutorial-button-container {
  display: flex;
  justify-content: space-around;
}

/* Tutorial Styles */
.tutorial-container {
  display: flex;
  flex-direction: column;
  gap: 20px;
  max-width: 900px;
  margin: 20px auto;
  padding: 0 20px;
}

.tutorial-progress {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.progress-info {
  text-align: center;
}

.progress-text {
  color: var(--text);
  font-size: 0.9rem;
  font-weight: 500;
  letter-spacing: 0.5px;
  text-transform: uppercase;
}

.progress-bar {
  width: 100%;
  height: 6px;
  background-color: rgba(255, 255, 255, 0.2);
  border-radius: 3px;
  overflow: hidden;
}

.progress-fill {
  height: 100%;
  background: linear-gradient(90deg, #a8dadc, #457b9d);
  border-radius: 3px;
  transition: width 0.4s ease;
}

.tutorial-panel {
  padding: 40px 50px;
}

.tutorial-title {
  font-size: 2.2rem;
  font-weight: 700;
  margin: 0 0 30px 0;
  color: var(--text);
  text-align: center;
}

.tutorial-image-container {
  margin: 30px 0;
  text-align: center;
  display: flex;
  justify-content: center;
}

.tutorial-image {
  max-width: 100%;
  max-height: 400px;
  border-radius: 8px;
  cursor: pointer;
  transition: transform 0.3s ease;
}

.tutorial-image:hover {
  transform: scale(1.02);
}

.tutorial-description {
  font-size: 1.05rem;
  line-height: 1.8;
  color: var(--text);
  margin: 30px 0;
  text-align: center;
  white-space: pre-wrap;
  word-break: break-word;
}

.tutorial-nav {
  display: flex;
  flex-direction: column;
  gap: 15px;
  margin-top: 30px;
}

.tutorial-buttons {
  display: flex;
  gap: 15px;
  justify-content: center;
  flex-wrap: wrap;
}

.tutorial-btn {
  padding: 12px 30px;
  border-radius: 6px;
  font-size: 1rem;
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
  transition: all 0.3s ease;
  border: none;
  display: inline-block;
  text-align: center;
}

.tutorial-btn-primary {
  background-color: #457b9d;
  color: white;
  flex: 1;
  min-width: 150px;
}

.tutorial-btn-primary:hover {
  background-color: #2c5073;
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
}

.tutorial-btn-secondary {
  background-color: rgba(168, 218, 220, 0.3);
  color: var(--text);
  flex: 1;
  min-width: 150px;
  border: 1px solid var(--text);
}

.tutorial-btn-secondary:hover {
  background-color: rgba(168, 218, 220, 0.5);
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
}

.tutorial-btn-success {
  background: linear-gradient(135deg, #06a77d, #059a6f);
  color: white;
  width: 100%;
  margin-top: 15px;
  font-size: 1.1rem;
  padding: 14px 30px;
}

.tutorial-btn-success:hover {
  background: linear-gradient(135deg, #059a6f, #047d58);
  transform: translateY(-2px);
  box-shadow: 0 6px 16px rgba(6, 168, 125, 0.3);
}

/* ==================== NAVBAR - MODERN REDESIGN ==================== */

.navbar {
  padding: 0;
  overflow: visible;
  background: var(--navbar-bg);
  background-blend-mode: var(--navbar-blend-mode);
  box-shadow:
    inset 0 -3px 6px rgba(0, 0, 0, 0.5),
    0 4px 12px rgba(0, 0, 0, 0.6);
  position: sticky;
  top: 0;
  z-index: 1000;
  font-family: "Cinzel", serif;
}

.navbar-bracket {
  position: absolute;
  top: -5px;
  height: calc(100% + 10px);
  width: auto;
  pointer-events: none;
  z-index: 4;
  filter:
    drop-shadow(1px 0 0 rgba(0, 0, 0, 0.8))
    drop-shadow(-1px 0 0 rgba(0, 0, 0, 0.8))
    drop-shadow(0 2px 3px rgba(0, 0, 0, 0.5));
}

.navbar-bracket-l {
  left: -8px;
}

.navbar-bracket-r {
  right: -8px;
  transform: scaleX(-1);
}


.navbar::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: rgba(255, 255, 255, 0.15);
  pointer-events: none;
  z-index: 1;
}

.navbar-inner {
  position: relative;
  z-index: 3;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  margin: 6px;
  padding: 6px 18px;
  border-radius: 6px;
}

/* ===== Left Section - Branding ===== */
.navbar-left {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-shrink: 0;
}

.navbar-brand {
  display: flex;
  align-items: center;
  gap: 12px;
  text-decoration: none;
  transition: transform 0.2s ease;
}

.navbar-brand:hover {
  transform: scale(1.05);
}

.navbar-logo {
  width: 40px;
  height: 40px;
  filter: brightness(0) invert(1) drop-shadow(0 1px 3px rgba(0, 0, 0, 0.8));
}

.navbar-title {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.game-name {
  color: #e6e0d5;
  font-size: 1.3rem;
  font-weight: 700;
  letter-spacing: 0.5px;
  text-shadow: 2px 2px 0 #1a0a00, 1px 1px 0 #3a1a00;
}

.navbar-version {
  color: rgba(241, 250, 238, 0.75);
  font-size: 0.7rem;
  font-weight: 400;
  font-family: "Inter", sans-serif;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.8);
}

.navbar-online {
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 0;
  background: none;
  border-radius: 0;
  font-size: 0.85rem;
  font-family: "Inter", sans-serif;
}

.navbar-online-dot {
  font-size: 0.5rem;
  color: #39ff6a;
  filter: drop-shadow(0 0 4px #39ff6a);
  animation: pulse 2s infinite;
}

.navbar-online-icon {
  font-size: 0.75rem;
  color: #f5ead8;
  filter: drop-shadow(0 1px 1px rgba(0, 0, 0, 0.9));
}

.navbar-online-count {
  color: #ffffff;
  text-shadow: 1px 1px 0 #000, -1px -1px 0 #000;
  font-weight: 600;
}

.navbar-online-trend {
  font-size: 0.65rem;
  font-weight: 700;
  line-height: 1;
  text-shadow: 1px 1px 0 rgba(0, 0, 0, 0.8);
  transition: color 0.3s ease;
}

.navbar-online-trend.trend-up   { color: #39ff6a; }
.navbar-online-trend.trend-down { color: #ff4d4d; }

/* ===== Center Section - Main Navigation ===== */
.navbar-center {
  display: flex;
  list-style: none;
  margin: 0;
  padding: 0;
  gap: 8px;
  flex: 1;
  justify-content: center;
  align-items: center;
}

.navbar-center li {
  margin: 0;
  padding: 0;
  position: relative;
  display: flex;
  align-items: center;
}


.navbar-center li.nav-link-secondary {
  display: none;
}

.theme-toggle-wrapper {
  display: flex;
  align-items: center;
  margin-left: 8px;
}

.nav-link {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 18px;
  color: #e6e0d5;
  text-decoration: none;
  border-radius: 8px;
  font-size: 0.95rem;
  font-weight: 500;
  text-shadow: 0 1px 0 rgba(0, 0, 0, 0.8);
  transition: all 0.2s ease;
  white-space: nowrap;
}

.nav-link i {
  font-size: 1rem;
  color: #f5ead8;
  filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.9));
}

.nav-link:hover {
  background: rgba(255, 200, 100, 0.1);
  color: #ffcc66;
  text-shadow: 0 0 6px rgba(255, 180, 60, 0.6);
  transform: translateY(-2px);
}

.nav-link-primary {
  background: linear-gradient(135deg, #06a87d 0%, #059a6f 100%);
  color: white !important;
  font-weight: 600;
  box-shadow: 0 2px 8px rgba(6, 168, 125, 0.3);
}

.nav-link-primary:hover {
  background: linear-gradient(135deg, #059a6f 0%, #047d58 100%);
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(6, 168, 125, 0.4);
}

/* ===== Right Section - User Actions ===== */
.navbar-right {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-shrink: 0;
}

.navbar-stats {
  display: flex;
  align-items: center;
  gap: 8px;
}

.navbar-actions {
  display: flex;
  align-items: center;
  gap: 8px;
}

.navbar-icon-btn {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  background: none;
  border: none;
  border-radius: 8px;
  color: #f5ead8;
  font-size: 1.1rem;
  cursor: pointer;
  transition: all 0.2s ease;
  filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.9));
}

.navbar-icon-btn:hover {
  background: rgba(255, 200, 100, 0.1);
  color: #ffcc66;
  filter: drop-shadow(0 0 4px rgba(255, 180, 60, 0.5));
  transform: translateY(-2px);
}

.navbar-badge {
  position: absolute;
  top: -4px;
  right: -4px;
  background: #e63946;
  color: white;
  font-size: 0.65rem;
  font-weight: 700;
  padding: 2px 6px;
  border-radius: 10px;
  min-width: 18px;
  text-align: center;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
}

.navbar-badge-muted {
  background: rgba(255, 200, 100, 0.2);
  color: #e0c882;
  box-shadow: none;
}

/* Achievement badge on navbar */
.nav-link-with-badge {
  position: relative;
}

.nav-achievement-badge {
  position: absolute;
  top: -5px;
  right: -5px;
  background: linear-gradient(135deg, #ffd700 0%, #ffed4e 100%);
  color: #1d3557;
  font-size: 0.75rem;
  font-weight: 700;
  padding: 1px 4px;
  border-radius: 8px;
  border: 1.5px solid rgba(29, 53, 87, 0.3);
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
  white-space: nowrap;
  line-height: 1.2;
  pointer-events: none;
}

/* Rank badge on navbar */
.nav-rank-badge {
  position: absolute;
  top: -5px;
  right: -5px;
  background: linear-gradient(135deg, #457b9d 0%, #a8dadc 100%);
  color: #1d3557;
  font-size: 0.75rem;
  font-weight: 700;
  padding: 1px 4px;
  border-radius: 8px;
  border: 1.5px solid rgba(29, 53, 87, 0.3);
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
  white-space: nowrap;
  line-height: 1.2;
  pointer-events: none;
}

/* Card count badge on navbar */
.nav-card-badge {
  position: absolute;
  top: -5px;
  right: -5px;
  background: linear-gradient(135deg, #8b5e2a 0%, #c8a060 100%);
  color: #fff;
  font-size: 0.75rem;
  font-weight: 700;
  padding: 1px 4px;
  border-radius: 8px;
  border: 1.5px solid rgba(29, 53, 87, 0.3);
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
  white-space: nowrap;
  line-height: 1.2;
  pointer-events: none;
}

/* Responsive adjustments */
@media (max-width: 768px),
       (orientation: landscape) and (max-height: 500px) and (pointer: coarse) {
  .nav-achievement-badge {
    top: 4px;
    right: 4px;
    font-size: 0.5rem;
    padding: 1px 3px;
  }

  .nav-rank-badge {
    top: 4px;
    right: 4px;
    font-size: 0.5rem;
    padding: 1px 3px;
  }

  .nav-card-badge {
    top: 4px;
    right: 4px;
    font-size: 0.5rem;
    padding: 1px 3px;
  }
}

/* ===== Compact Stats Component ===== */
.navbar-compact-stats {
  display: none;
  align-items: center;
  gap: 12px;
  padding: 6px 12px;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 10px;
  font-family: "Inter", sans-serif;
}

.compact-stat {
  display: flex;
  align-items: center;
  gap: 6px;
  color: rgba(241, 250, 238, 0.85);
  font-size: 0.9rem;
  font-weight: 600;
}

.compact-stat i {
  font-size: 0.95rem;
  opacity: 0.8;
}

.compact-stat-coins i {
  color: #ffd700;
}

.compact-stat-value {
  color: #f1faee;
  font-weight: 700;
  letter-spacing: 0.3px;
}

/* ===== Burger Menu (Mobile) ===== */
.burger {
  display: none;
  flex-direction: column;
  cursor: pointer;
  gap: 4px;
  padding: 8px;
}

.burger span {
  background: #f1faee;
  height: 2px;
  width: 24px;
  border-radius: 2px;
  transition: all 0.3s ease;
}

/* ===== Responsive Design ===== */
@media (max-width: 1430px) {
  .navbar {
    gap: 12px;
  }

  .navbar-left {
    gap: 12px;
  }

  .navbar-right {
    gap: 12px;
  }

  .stat-badge {
    padding: 5px 10px;
    font-size: 0.85rem;
    gap: 5px;
  }

  .stat-badge i {
    font-size: 0.9rem;
  }
}

@media (max-width: 1700px) {
  .navbar-center {
    gap: 4px;
  }

  .nav-link {
    padding: 8px 14px;
    font-size: 0.9rem;
  }

  .nav-link span {
    display: none;
  }

  .nav-link i {
    margin: 0;
    font-size: 1.2rem;
  }
}

/* On wide screens the nav-link label text is shown (it's hidden ≤1700px); make
   it bold so the buttons read stronger. */
@media (min-width: 1701px) {
  .nav-link span {
    font-weight: 700;
  }
}

@media (max-width: 1300px) {
  .navbar-online {
    display: none;
  }
}

@media (max-width: 1200px) {
  .navbar-stats {
    gap: 6px;
  }

  .stat-badge {
    padding: 4px 8px;
    font-size: 0.8rem;
  }
}

@media (max-width: 1024px) {
  .navbar-stats {
    display: none;
  }

  .navbar-compact-stats {
    display: flex;
  }
}

.navbar-home-btn,
.navbar-mobile-show {
  display: none;
}


@media (max-width: 920px),
       (orientation: landscape) and (max-height: 500px) and (pointer: coarse) {
  /* Mobile / narrow (any viewport up to ~920px wide): turn the navbar into
     a single horizontally-scrollable icon strip. Logo stays at the start,
     every nav link and action button flows after it in one row. Users
     swipe/scroll left/right to reveal more.
     The threshold is 920px (not 768px) because the full desktop navbar's
     content is ~911px wide, so anywhere below that it overflows horizontally.
     This must NOT be gated on pointer/touch: in an embedded portal at ~800px
     the overflow happens with touch on OR off. With touch (mobile UA) it makes
     the browser zoom the page out to fit; without touch it forces a horizontal
     scrollbar and shifts the board sideways. Either way the bottom UI (card-
     help panel) ends up off-screen. The scrollable strip keeps the navbar
     within the viewport so neither happens. */
  .navbar-home-btn,
  .navbar-mobile-show {
    display: flex;
  }

  /* Show every action button — no more hide/swap juggling. */
  .navbar-mobile-hide,
  .navbar-mobile-alt,
  .navbar-mobile-bonus {
    display: flex !important;
  }

  /* But suppress the standalone inbox icon when the primary button already
     shows inbox (i.e. there are unread messages) — avoid duplication. */
  .navbar-mobile-hide-inbox {
    display: none !important;
  }

  .burger {
    display: none;
  }

  .navbar-inner {
    margin: 4px;
    padding: 4px 8px;
    border-radius: 4px;
    box-shadow: inset 0 2px 6px rgba(0, 0, 0, 0.5);
    gap: 6px;
    justify-content: flex-start;
    flex-wrap: nowrap;
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-x: contain;
    scrollbar-width: none;
  }

  .navbar-inner::-webkit-scrollbar {
    display: none;
  }

  /* Flatten action containers so every icon becomes a direct flex child of
     .navbar-inner. This lets us assign `order` across what would otherwise
     be three separate flex contexts. */
  .navbar-right,
  .navbar-actions {
    display: contents;
  }

  .navbar-left,
  .navbar-center {
    flex-shrink: 0;
  }

  .navbar-icon-btn,
  .navbar-stats,
  .navbar-compact-stats {
    flex-shrink: 0;
  }

  .navbar-left {
    gap: 8px;
  }

  /* === Priority order on mobile ===
     1: Inbox/Home primary  (auto-flips icon based on unread count)
     2: Daily prize (when available)
     3: Standalone Inbox    (suppressed when primary already shows inbox)
     4: Coin status badge
     5: Settings
     10+: everything else
     99: Daily prize (when claimed) — pinned to the very end */
  .navbar-left                              { order: 0; }
  .navbar-home-btn                          { order: 1; }
  .daily-bonus-btn.daily-bonus-available    { order: 2; }
  .navbar-icon-inbox                        { order: 3; }
  .navbar-stats                             { order: 4; }
  .navbar-icon-settings                     { order: 5; }
  .navbar-center                            { order: 10; }
  .navbar-mobile-alt                        { order: 11; }
  .navbar-mobile-show                       { order: 12; }
  .navbar-icon-profile                      { order: 13; }
  .navbar-compact-stats                     { order: 14; }
  .daily-bonus-btn:not(.daily-bonus-available) { order: 99; }

  /* Hide the brand text on mobile — keep just the logo to save scroll space. */
  .navbar-title {
    display: none;
  }

  /* Center nav: from dropdown to inline horizontal row. */
  .navbar-center {
    display: flex;
    position: static;
    flex-direction: row;
    background: none;
    padding: 0;
    box-shadow: none;
    gap: 4px;
    flex: 0 0 auto;
  }

  .navbar-center > li:not(:last-child)::after {
    display: none;
  }

  .navbar-center li.nav-link-secondary {
    display: none;
  }

  .navbar-center li.nav-link-mobile-duplicate {
    display: none;
  }

  .nav-link {
    width: auto;
    justify-content: center;
    padding: 8px 10px;
  }

  .nav-link span {
    display: none;
  }

  .theme-toggle-wrapper {
    display: flex;
    margin: 0 0 0 4px;
    padding: 0;
    border-top: none;
    width: auto;
    justify-content: center;
  }

  /* Coin status: inline in the strip (no longer floating bottom-right). */
  .navbar-stats {
    display: flex;
    position: static;
    flex-direction: row;
    bottom: auto;
    right: auto;
    gap: 8px;
    z-index: auto;
  }

  .navbar-icon-btn {
    width: 36px;
    height: 36px;
    font-size: 1rem;
  }

  /* Compact stats hidden on mobile — coin badge above replaces it. */
  .navbar-compact-stats {
    display: none;
  }

  .game-name::before {
    content: attr(data-shorter);
  }
}

@media (max-width: 480px) {
  .navbar-compact-stats {
    gap: 6px;
    padding: 4px 8px;
  }

  .compact-stat {
    font-size: 0.8rem;
    gap: 4px;
  }

  .compact-stat i {
    font-size: 0.8rem;
  }
}

@media (max-width: 480px) {
  .navbar-logo {
    width: 32px;
    height: 32px;
  }

  .game-name {
    font-size: 1.1rem;
  }

  .navbar-stats {
    bottom: 16px;
    right: 16px;
  }

  .stat-badge {
    padding: 6px 10px;
    font-size: 0.85rem;
  }
}

@media (max-width: 480px) {
  /* Hide online-players + coins compact widget when navbar is tight */
  .navbar-compact-stats {
    display: none;
  }
}

/* Force-show coins in navbar on card shop & customization pages */
body.show-coins .navbar-compact-stats {
  display: flex !important;
}

body.show-coins .compact-stat:not(.compact-stat-coins) {
  display: none;
}

.background {
  position: fixed;
  /* Sticks to the viewport */
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: -1;
  /* Places it behind everything */
  pointer-events: none;
  /* Prevents interference with user interactions */
}

.progress-image {
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: bottom;
  z-index: 3;
  position: relative;
  transition: clip-path 0.8s ease-out;
}

.castle-preview-image,
.castle-damage-preview {
  width: 100%;
  height: 100%;
  position: absolute;
  bottom: 0;
  left: 0;
  pointer-events: none;
  transition: clip-path 0.12s ease-out, opacity 0.12s ease-out;
  -webkit-mask-image: var(--castle-preview-mask);
  mask-image: var(--castle-preview-mask);
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-size: contain;
  mask-size: contain;
  -webkit-mask-position: center bottom;
  mask-position: center bottom;
}

.castle-preview-image {
  z-index: 2;
  opacity: 0.84;
  background-image:
    linear-gradient(to top, rgba(244, 215, 120, 0.58), rgba(255, 243, 196, 0.24)),
    repeating-linear-gradient(
      -45deg,
      rgba(255, 250, 220, 0.34) 0 8px,
      rgba(158, 123, 38, 0.24) 8px 16px
    );
  background-size: auto, 16px 16px;
  background-repeat: repeat, repeat;
  background-position: bottom, bottom;
}

.castle-damage-preview {
  z-index: 3;
  opacity: 0.8;
  background-image:
    linear-gradient(to top, rgba(164, 34, 34, 0.56), rgba(255, 146, 146, 0.22)),
    repeating-linear-gradient(
      45deg,
      rgba(255, 196, 196, 0.28) 0 8px,
      rgba(120, 20, 20, 0.24) 8px 16px
    );
  background-size: auto, 16px 16px;
  background-repeat: repeat, repeat;
  background-position: bottom, bottom;
}

.overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 0;
  /* Fully visible initially */
  background: rgba(255, 255, 255, 0.9);
  /* Darkened overlay effect */
  transition: height 0.3s ease;
}

.darkened-background {
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: bottom;
  filter: brightness(0.25);
  /* Darken the background */
  z-index: 1;
  position: absolute;
  bottom: 0;
  left: 0;
}

.current-turn {
  display: flex;
  justify-content: center;
  padding: 5px;
  color: var(--text);
  transform-origin: center;
}

.current-turn.attention-pulse {
  animation: currentTurnAttention 0.7s ease-in-out;
}

.current-turn-timer {
  margin-left: 4px;
  font-weight: 700;
  color: #ff6b35;
}

/* ===== Game Log Modal ===== */
.last-played-card { cursor: pointer; }
.game-log-modal {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.65);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 9100;
  animation: tournamentFadeIn 0.18s ease-out;
}
.game-log-modal.hidden { display: none; }
.game-log-modal-inner {
  background: #1c1f26;
  color: #e8e8e8;
  border: 1px solid #3a3f4a;
  border-radius: 8px;
  width: min(560px, 94vw);
  max-height: 82vh;
  display: flex;
  flex-direction: column;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.5);
}
.game-log-modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 14px;
  border-bottom: 1px solid #3a3f4a;
}
.game-log-modal-title {
  font-weight: 700;
  font-size: 1rem;
}
.game-log-modal-close {
  background: transparent;
  border: 0;
  color: #e8e8e8;
  font-size: 1.1rem;
  cursor: pointer;
  padding: 4px 8px;
  border-radius: 4px;
}
.game-log-modal-close:hover { background: rgba(255, 255, 255, 0.08); }
.game-log-modal-list {
  padding: 6px;
  overflow-y: auto;
  font-size: 0.82rem;
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.game-log-empty {
  padding: 18px;
  text-align: center;
  opacity: 0.6;
}
.game-log-row {
  display: grid;
  grid-template-columns: 32px 10px 1fr auto auto;
  align-items: center;
  gap: 6px;
  padding: 5px 8px;
  background: #242832;
  border-left: 3px solid #555;
  border-radius: 3px;
  cursor: pointer;
  transition: background 0.12s;
}
.game-log-row:hover { background: #2c313d; }
.game-log-row-red { border-left-color: #e03c2d; }
.game-log-row-blue { border-left-color: #4060e0; }
.game-log-row-discarded { opacity: 0.62; }
.game-log-row-discarded .game-log-card { text-decoration: line-through; }
.game-log-turn {
  font-variant-numeric: tabular-nums;
  opacity: 0.55;
  font-size: 0.72rem;
}
.game-log-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  display: inline-block;
}
.game-log-dot-red { background: #e03c2d; }
.game-log-dot-blue { background: #4060e0; }
.game-log-player {
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 110px;
}
.game-log-card {
  text-align: right;
  white-space: nowrap;
}
.game-log-card-offense { color: #ff8b7e; }
.game-log-card-magic { color: #9fd1ff; }
.game-log-card-defense { color: #d6a570; }
.game-log-card-special { color: #c9c9c9; }
.game-log-card-resource { color: #ffd99c; }
.game-log-action {
  font-size: 0.7rem;
  opacity: 0.55;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.game-log-details {
  display: none;
  grid-column: 1 / -1;
  margin-top: 6px;
  padding-top: 6px;
  border-top: 1px dashed #3a3f4a;
  flex-wrap: wrap;
  gap: 10px;
  font-size: 0.74rem;
}
.game-log-row.expanded .game-log-details,
.game-log-row:hover .game-log-details {
  display: flex;
}
.game-log-side {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 3px 8px;
  border-radius: 3px;
  background: rgba(255, 255, 255, 0.04);
  flex: 1;
  min-width: 0;
}
.game-log-side-red .game-log-side-label { color: #e03c2d; }
.game-log-side-blue .game-log-side-label { color: #4060e0; }
.game-log-side-label {
  font-weight: 700;
  font-size: 0.66rem;
  letter-spacing: 0.05em;
}
.game-log-side span { white-space: nowrap; }

.game-chat-modal {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.65);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 9105;
  animation: tournamentFadeIn 0.18s ease-out;
}

.game-chat-modal.hidden { display: none; }

.game-chat-modal-inner {
  background: var(--panel-texture-url) center/cover, var(--panel-bg, #1c1f26);
  color: var(--text, #e8e8e8);
  border: 1px solid var(--resource-panel-border, #3a3f4a);
  border-radius: 10px;
  width: min(420px, 92vw);
  max-height: 72vh;
  display: flex;
  flex-direction: column;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.5);
}

.game-chat-modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 14px;
  border-bottom: 1px solid var(--resource-panel-border, #3a3f4a);
}

.game-chat-modal-title {
  font-weight: 700;
  font-size: 1rem;
}

.game-chat-modal-subtitle {
  padding: 8px 14px 0;
  font-size: 0.76rem;
  opacity: 0.72;
}

.game-chat-modal-close {
  background: transparent;
  border: 0;
  color: inherit;
  font-size: 1.1rem;
  cursor: pointer;
  padding: 4px 8px;
  border-radius: 4px;
}

.game-chat-modal-close:hover { background: rgba(255, 255, 255, 0.08); }

.game-chat-modal-list {
  margin: 10px 10px 0;
  padding: 10px;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-height: 180px;
  max-height: 42vh;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 8px;
  background: rgba(0, 0, 0, 0.12);
}

.game-chat-empty {
  padding: 18px;
  text-align: center;
  opacity: 0.6;
}

.game-chat-row {
  border-radius: 8px;
  padding: 8px 10px;
  background: rgba(255, 255, 255, 0.06);
  border-left: 3px solid rgba(255, 255, 255, 0.14);
}

.game-chat-row-red { border-left-color: rgba(224, 60, 45, 0.9); }
.game-chat-row-blue { border-left-color: rgba(64, 96, 224, 0.9); }

.game-chat-row-admin {
  box-shadow: inset 0 0 0 1px rgba(224, 200, 130, 0.24);
}

.game-chat-row-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 4px;
}

.game-chat-author { font-weight: 700; }

/* Use :where() to keep specificity at (0,0,0,1) so the author classes
 * (.chat-username, .game-chat-author, etc.) still win for color/font. */
button:where(.chat-author-link) {
  background: none;
  border: none;
  padding: 0 2px;
  margin: 0;
  font: inherit;
  color: inherit;
  cursor: pointer;
  border-radius: 4px;
  transition: background 0.12s;
}

button:where(.chat-author-link):hover,
button:where(.chat-author-link):focus-visible {
  background: rgba(255, 255, 255, 0.12);
  outline: none;
}

.chat-author-menu {
  position: fixed;
  z-index: 10000;
  min-width: 160px;
  padding: 6px;
  background: var(--panel-bg, #1c1f26);
  color: var(--text, #e6e8ee);
  border: 1px solid var(--resource-panel-border, rgba(255, 255, 255, 0.18));
  border-radius: 8px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.45);
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.chat-author-menu-header {
  padding: 6px 8px 4px;
  font-size: 0.78rem;
  font-weight: 700;
  color: var(--text, #e6e8ee);
  opacity: 0.75;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  border-bottom: 1px solid var(--surface-border, rgba(127, 127, 127, 0.25));
  margin-bottom: 2px;
}

.chat-author-menu-btn {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
  background: transparent;
  border: none;
  color: var(--text, #e6e8ee);
  font: inherit;
  font-size: 0.85rem;
  text-align: left;
  border-radius: 6px;
  cursor: pointer;
  transition: background 0.12s;
}

.chat-author-menu-btn:hover,
.chat-author-menu-btn:focus-visible {
  background: rgba(255, 255, 255, 0.1);
  outline: none;
}

.chat-author-menu-btn i {
  width: 14px;
  text-align: center;
  opacity: 0.85;
}

.chat-author-menu-empty {
  padding: 8px 10px;
  font-size: 0.8rem;
  opacity: 0.6;
}

.game-chat-admin-badge {
  color: #e0c882;
  margin-left: 6px;
  font-size: 0.75rem;
}

.game-chat-time {
  font-size: 0.74rem;
  opacity: 0.65;
}

.game-chat-text {
  line-height: 1.35;
  white-space: pre-wrap;
  word-break: break-word;
}

.game-chat-modal-input-row {
  display: flex;
  gap: 8px;
  padding: 10px;
}

.game-chat-modal-input {
  flex: 1;
  min-width: 0;
  padding: 8px 10px;
  border-radius: 8px;
  border: 1px solid var(--resource-panel-border);
  background: var(--panel-bg);
  color: var(--text);
  font-family: inherit;
  font-size: 0.84rem;
  box-sizing: border-box;
}

.game-chat-modal-input::placeholder {
  opacity: 0.45;
}

.game-chat-modal-send-btn {
  padding: 8px 12px;
  border-radius: 8px;
  border: 1px solid var(--resource-panel-border);
  background: rgba(255, 255, 255, 0.08);
  color: var(--text);
  cursor: pointer;
  transition: background 0.15s;
}

.game-chat-modal-send-btn:hover {
  background: rgba(255, 255, 255, 0.18);
}

/* ===== Mini Tournament Modal ===== */
.tournament-modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.65);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 9000;
  animation: tournamentFadeIn 0.2s ease-out;
}

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

.tournament-modal {
  background: #1f1d1a;
  color: #f5f0e6;
  border: 2px solid #c8960c;
  border-radius: 8px;
  padding: 20px 24px;
  width: min(90vw, 480px);
  max-height: 90vh;
  overflow-y: auto;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.6);
}

.tournament-modal-title {
  margin: 0 0 12px;
  font-size: 1.25rem;
  text-align: center;
  color: #c8960c;
}

.tournament-modal-text {
  margin: 0 0 12px;
  font-size: 0.95rem;
  line-height: 1.4;
  text-align: center;
}

.tournament-modal-hint {
  margin: 8px 0;
  font-size: 0.8rem;
  text-align: center;
  opacity: 0.7;
  font-style: italic;
}

.tournament-modal-actions {
  display: flex;
  gap: 10px;
  justify-content: center;
  margin: 14px 0;
  flex-wrap: wrap;
}

.tournament-btn {
  padding: 8px 16px;
  border-radius: 4px;
  border: 1px solid transparent;
  cursor: pointer;
  font-weight: 600;
  font-size: 0.9rem;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.tournament-btn-yes {
  background: #4caf50;
  color: white;
  border-color: #357a38;
}

.tournament-btn-yes:hover { background: #5cbf60; }

.tournament-btn-no {
  background: #555;
  color: white;
  border-color: #333;
}

.tournament-btn-no:hover { background: #666; }

.tournament-modal-players {
  margin: 12px 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.tournament-player-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 6px 10px;
  background: rgba(255, 255, 255, 0.05);
  border-radius: 4px;
}

.tournament-player-color {
  font-size: 0.7rem;
  font-weight: 700;
  padding: 2px 6px;
  border-radius: 3px;
  color: white;
  min-width: 56px;
  text-align: center;
}

.tournament-player-red { background: #e03c2d; }
.tournament-player-blue { background: #4060e0; }
.tournament-player-spectator { background: #888; }

.tournament-player-name {
  flex: 1;
  font-size: 0.9rem;
}

.tournament-player-status {
  font-size: 1rem;
}

.tournament-chat {
  margin-top: 14px;
  border-top: 1px solid rgba(200, 150, 12, 0.3);
  padding-top: 10px;
}

.tournament-chat-messages {
  max-height: 140px;
  overflow-y: auto;
  background: rgba(0, 0, 0, 0.3);
  border-radius: 4px;
  padding: 6px 8px;
  font-size: 0.8rem;
  margin-bottom: 6px;
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.tournament-chat-msg { line-height: 1.3; }

.tournament-chat-author {
  font-weight: 700;
  color: #c8960c;
  margin-right: 4px;
}

.tournament-chat-text { color: #f5f0e6; }

.tournament-chat-form {
  display: flex;
  gap: 6px;
}

.tournament-chat-input {
  flex: 1;
  padding: 6px 8px;
  background: rgba(0, 0, 0, 0.4);
  border: 1px solid rgba(200, 150, 12, 0.4);
  color: #f5f0e6;
  border-radius: 4px;
  font-size: 0.85rem;
}

.tournament-chat-send {
  padding: 6px 12px;
  background: #c8960c;
  color: #1f1d1a;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  font-weight: 700;
}

.tournament-chat-send:hover { background: #e0a814; }

.tournament-chat-pregame {
  max-width: none;
  width: 100%;
  max-height: none;
}

.tournament-chat-messages-fixed {
  height: 220px;
  min-height: 220px;
  max-height: 220px;
  overflow-y: auto;
  overflow-x: hidden;
}

@keyframes currentTurnAttention {
  0%   { transform: scale(1)   translateX(0); }
  15%  { transform: scale(1.6) translateX(-6px); }
  30%  { transform: scale(1.6) translateX(6px); }
  45%  { transform: scale(1.6) translateX(-4px); }
  60%  { transform: scale(1.6) translateX(4px); }
  80%  { transform: scale(1.3) translateX(0); }
  100% { transform: scale(1)   translateX(0); }
}


.turn-action {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
}

.turn-effects {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  justify-content: center;
  margin-top: 6px;
}

.effect-pill {
  font-size: 0.75rem;
  padding: 4px 10px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.85);
  color: #222;
  border: 1px solid rgba(0, 0, 0, 0.08);
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.12);
  text-transform: none;
  white-space: nowrap;
}

.effect-pill-attack {
  border-color: rgba(230, 57, 70, 0.4);
  box-shadow: 0 0 10px rgba(230, 57, 70, 0.25);
}

.effect-pill-build {
  border-color: rgba(188, 108, 37, 0.4);
  box-shadow: 0 0 10px rgba(188, 108, 37, 0.25);
}

.effect-pill-magic {
  border-color: rgba(157, 78, 221, 0.4);
  box-shadow: 0 0 10px rgba(157, 78, 221, 0.25);
}

.effect-pill-all {
  border-color: rgba(247, 127, 0, 0.45);
  box-shadow: 0 0 10px rgba(247, 127, 0, 0.25);
}

.effect-pill-shield {
  border-color: rgba(69, 123, 157, 0.45);
  box-shadow: 0 0 10px rgba(69, 123, 157, 0.25);
}

.effect-pill-warn {
  border-color: rgba(108, 117, 125, 0.5);
  box-shadow: 0 0 10px rgba(108, 117, 125, 0.25);
}

.action-text-discard {
  color: #f77f00;
  text-shadow: 0 0 10px rgba(247, 127, 0, 0.55);
  font-weight: 700;
}

.turn-hint {
  font-size: 0.85rem;
  color: var(--text);
  opacity: 0.85;
}

/* Drop the verbose turn-hint on small screens — there's no room for the long
   instruction line and the short #action-text ("play!" / "discard a card")
   already says what to do. Covers mobile widths and short/landscape-phone
   viewports. */
@media (max-width: 768px), (max-height: 600px) {
  .turn-hint {
    display: none;
  }
}

/* Country / platform codes shown next to player names in /stats, e.g. "Name [US] [WEB]". */
.stats-code {
  font-size: 0.78rem;
  font-weight: 600;
  text-transform: uppercase;
  white-space: nowrap;
}

.stats-code-country {
  color: #4aa3ff;
}

.stats-code-platform {
  color: #d8a32a;
}

.reconnect-overlay {
  position: fixed;
  inset: 0;
  background: rgba(10, 10, 10, 0.75);
  z-index: 10060;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  backdrop-filter: blur(4px);
}

.reconnect-overlay.hidden {
  display: none;
}

.reconnect-modal {
  background: var(--cloud-bg);
  color: var(--text);
  padding: 20px 24px;
  border-radius: 16px;
  width: min(520px, 90vw);
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.35);
  text-align: center;
}

.reconnect-title {
  font-size: 1.2rem;
  font-weight: 800;
  margin-bottom: 6px;
}

.reconnect-text {
  font-size: 0.95rem;
  opacity: 0.9;
  margin-bottom: 14px;
}

.reconnect-actions {
  display: flex;
  gap: 10px;
  justify-content: center;
}

.reconnect-actions.hidden {
  display: none;
}

.reconnect-refresh {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  margin-bottom: 14px;
}

.reconnect-refresh.hidden {
  display: none;
}

.reconnect-refresh-hint {
  font-size: 0.85rem;
  opacity: 0.85;
}

.reconnect-refresh .reconnect-btn i {
  margin-right: 6px;
}

.reconnect-btn {
  border: none;
  border-radius: 999px;
  padding: 8px 14px;
  font-size: 0.85rem;
  font-weight: 700;
  cursor: pointer;
}

.reconnect-btn-primary {
  background: #e63946;
  color: #fff;
}

.reconnect-btn-secondary {
  background: rgba(255, 255, 255, 0.9);
  color: #333;
}

#game {
  position: relative;
  max-width: 1280px;
  margin-left: auto;
  margin-right: auto;
}

.room-connecting {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 16px;
  min-height: 40vh;
  color: var(--text);
  opacity: 0.6;
}

.room-connecting-icon {
  font-size: 2.5rem;
  animation: roomConnectingPulse 1.4s ease-in-out infinite;
}

.room-connecting-text {
  font-family: "Cinzel", serif;
  font-size: 1rem;
  letter-spacing: 1px;
  margin: 0;
}

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


.discard-help {
  margin-top: 2px;
  position: absolute;
  top: 280px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 5;
  background: rgba(255, 255, 255, 0.85);
  color: #2a2a2a;
  border-radius: 10px;
  padding: 8px 10px;
  max-width: 420px;
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.15);
}

@media (max-width: 1000px) {
  .discard-help {
    position: static;
    transform: none;
    margin-top: 6px;
  }
}

@media (max-height: 650px) {
  .discard-help {
    display: none !important;
  }
}

@media (min-width: 1001px) and (max-height: 820px) {
  .discard-help {
    position: static;
    transform: none;
    left: auto;
    margin-top: 6px;
  }
}

.discard-help.hidden {
  display: none;
}

.discard-help-text {
  font-size: 0.85rem;
  font-weight: 600;
  margin-bottom: 6px;
}

.discard-help-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  justify-content: center;
}

.discard-help-btn {
  border: none;
  border-radius: 999px;
  padding: 6px 10px;
  font-size: 0.75rem;
  font-weight: 700;
  cursor: pointer;
}

.discard-help-btn:disabled {
  cursor: not-allowed;
  opacity: 0.4;
}

.discard-help-primary {
  background: #e63946;
  color: #fff;
}

.discard-help-secondary {
  background: rgba(0, 0, 0, 0.08);
  color: #222;
}

.discard-help-ghost {
  background: transparent;
  color: #444;
  border: 1px dashed rgba(0, 0, 0, 0.2);
}

.score {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  color: var(--text);
}

/* Banner score display */
.score-banners {
  display: flex;
  gap: 4px;
  align-items: flex-start;
}

.score-banner {
  position: relative;
  display: flex;
  justify-content: center;
}

.score-banner-img {
  width: 32px;
  height: auto;
  display: block;
}

.score-banner-val {
  position: absolute;
  top: 22%;
  left: 50%;
  transform: translateX(-50%);
  font-family: "Oswald", sans-serif;
  font-weight: 700;
  font-size: 0.75rem;
  color: #fff;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.7);
  line-height: 1;
  pointer-events: none;
}

/* Victory screen banners */
.final-score-section {
  display: flex;
  justify-content: center;
  gap: 24px;
}

.final-score-banner .score-banner-img {
  width: 80px;
}

.final-score-banner-val {
  top: 20%;
  font-size: 2rem;
}

.turn-hourglass {
  font-size: 1.4em;
  animation: hourglassFlip 0.7s cubic-bezier(0.34, 1.56, 0.64, 1) both;
}

.turn-hourglass-red  { color: #e03c2d; }
.turn-hourglass-blue { color: #4060e0; }

@keyframes hourglassFlip {
  0%   { transform: rotate(180deg) scale(1.5); opacity: 0; }
  40%  { opacity: 1; }
  100% { transform: rotate(0deg) scale(1); }
}

.discarded-txt {
  color: var(--text);
}

.castle-container {
  position: relative;
  /* Own stacking context so the z-index:-1 castle-buff-host paints behind the
     castles but in front of this container's background. */
  isolation: isolate;
}

.last-played-card {
  position: absolute;
  top: 0;
  left: 50%;
  width: 100px;
  height: 200px;
  transform: translateX(-50%);
}

/* Landing impact: the freshly-placed card gives a small squash against the
   stack (origin at the bottom, like it slammed down) plus a quick glow flash,
   then settles. Applied to the inner #deck card so the wrapper's
   translateX(-50%) centering is untouched. */
#deck.lpc-smack {
  animation:
    lpcSmack 0.28s cubic-bezier(0.22, 1, 0.36, 1),
    lpcSmackGlow 0.4s ease-out;
  transform-origin: center bottom;
}
/* Subtle squash — just enough to register the hit, no bouncy rebound. */
@keyframes lpcSmack {
  0% { transform: scale(1.1); }
  50% { transform: scale(1, 0.93); }
  100% { transform: scale(1); }
}
/* Bright flash + glow burst on contact, fading out. */
@keyframes lpcSmackGlow {
  0% { filter: brightness(1.6) drop-shadow(0 0 16px rgba(255, 232, 150, 0.95)); }
  55% { filter: brightness(1.15) drop-shadow(0 0 7px rgba(255, 232, 150, 0.45)); }
  100% { filter: brightness(1) drop-shadow(0 0 0 rgba(255, 232, 150, 0)); }
}

/* Finishing move: dramatic spotlight + slam */
.finishing-move-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.75);
  z-index: 999;
  animation: overlayFadeIn 0.3s ease-out forwards;
  pointer-events: none;
}

.finishing-move-overlay-fade-out {
  animation: overlayFadeOut 0.5s ease-in forwards;
}

.finishing-card-slam {
  position: fixed !important;
  top: 50% !important;
  left: 50% !important;
  width: auto !important;
  z-index: 1000 !important;
  animation: cardSlam 0.6s cubic-bezier(0.22, 0.61, 0.36, 1) forwards !important;
  filter: drop-shadow(0 0 30px rgba(255, 215, 0, 0.9)) drop-shadow(0 0 60px rgba(255, 215, 0, 0.4)) !important;
}

.finishing-card-slam .card {
  border-color: gold !important;
}

.finishing-card-settle {
  animation: cardSettle 0.5s ease-in forwards !important;
}

.screen-shake {
  animation: screenShake 0.5s ease-out !important;
}

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

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

@keyframes cardSlam {
  0% {
    transform: translate(-50%, -50%) scale(4) rotate(-8deg);
    opacity: 0;
  }
  50% {
    opacity: 1;
    transform: translate(-50%, -50%) scale(2.2) rotate(2deg);
  }
  75% {
    transform: translate(-50%, -50%) scale(2.7) rotate(-1deg);
  }
  100% {
    transform: translate(-50%, -50%) scale(2.5) rotate(0deg);
  }
}

@keyframes cardSettle {
  from {
    transform: translate(-50%, -50%) scale(2.5) rotate(0deg);
    opacity: 1;
  }
  to {
    transform: translate(-50%, -50%) scale(2) rotate(0deg);
    opacity: 0;
  }
}

@keyframes screenShake {
  0%, 100% { transform: translate(0, 0); }
  10% { transform: translate(-8px, -5px); }
  20% { transform: translate(8px, 5px); }
  30% { transform: translate(-6px, 4px); }
  40% { transform: translate(6px, -4px); }
  50% { transform: translate(-4px, 3px); }
  60% { transform: translate(4px, -2px); }
  70% { transform: translate(-3px, 2px); }
  80% { transform: translate(2px, -1px); }
  90% { transform: translate(-1px, 1px); }
}

.texture {
  width: 100%;
  height: 50%;
  /* Start hidden (no height) */
  background-image: url("/assets/wallc.png");
  /* Replace with your texture image path */
  background-size: auto;
  /* Ensure the texture repeats naturally */
  background-repeat: repeat;
  /* Repeat the texture */
  background-position: top;
  /* Background alignment */
  position: absolute;
  /* Align it within the container */
  bottom: 0;
  /* Ensure growth starts at the bottom */
  z-index: 2;
  transition: height 2s ease;
  /* Smooth growth animation */
}

.texture-preview {
  z-index: 1;
  opacity: 0.82;
  background-image:
    linear-gradient(to top, rgba(244, 215, 120, 0.55), rgba(255, 243, 196, 0.24)),
    repeating-linear-gradient(
      -45deg,
      rgba(255, 250, 220, 0.34) 0 6px,
      rgba(158, 123, 38, 0.24) 6px 12px
    ) !important;
  background-size: auto, 12px 12px;
  background-repeat: repeat, repeat;
  background-position: bottom, bottom;
  box-shadow:
    inset 0 0 0 1px rgba(255, 236, 179, 0.28),
    inset 0 6px 10px rgba(92, 66, 18, 0.16);
  transition: height 0.12s ease-out, opacity 0.12s ease-out;
}

.texture-damage-preview {
  z-index: 3;
  opacity: 0.78;
  background-image:
    linear-gradient(to top, rgba(164, 34, 34, 0.52), rgba(255, 146, 146, 0.2)),
    repeating-linear-gradient(
      45deg,
      rgba(255, 196, 196, 0.26) 0 6px,
      rgba(120, 20, 20, 0.24) 6px 12px
    ) !important;
  background-size: auto, 12px 12px;
  background-repeat: repeat, repeat;
  background-position: bottom, bottom;
  box-shadow:
    inset 0 0 0 1px rgba(255, 182, 182, 0.26),
    inset 0 -4px 8px rgba(90, 10, 10, 0.18);
  transition:
    bottom 0.12s ease-out,
    height 0.12s ease-out,
    opacity 0.12s ease-out;
}

.cloudy-round-panel {
  color: var(--text);
  background-color: var(--cloud-bg);
  background-image: var(--dirt-texture-url);
  background-repeat: repeat;
  padding: 20px 40px;
  border-radius: 2px;
  border: 1px solid var(--surface-border);
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

/* ---- Papyrus panel treatment ---- */

.color-picker-container,
.pregame-help,
.online-users-panel {
  position: relative;
  isolation: isolate;
  background: var(--papyrus-edge);
  color: var(--papyrus-text);
  border: none;
  border-radius: 0;
  box-shadow: none;
  clip-path: var(--papyrus-shape);
  filter: drop-shadow(0 4px 10px rgba(0, 0, 0, 0.4));
}

.color-picker-container::before,
.pregame-help::before,
.online-users-panel::before {
  content: '';
  position: absolute;
  inset: 16px;
  background:
    repeating-linear-gradient(
      0deg,
      transparent,
      transparent 4px,
      rgba(160, 100, 20, 0.07) 4px,
      rgba(160, 100, 20, 0.07) 5px
    ),
    repeating-linear-gradient(
      90deg,
      transparent,
      transparent 10px,
      rgba(160, 100, 20, 0.04) 10px,
      rgba(160, 100, 20, 0.04) 11px
    ),
    var(--papyrus-fill);
  z-index: -1;
}

/* ---- Per-panel layout ---- */

.color-picker-container {
  text-align: center;
  padding: 28px 44px;
  width: 100%;
}

.color-picker-status {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin-bottom: 16px;
  font-size: 1.2rem;
  font-weight: 600;
  font-family: "Cinzel", serif;
  color: var(--papyrus-text);
}

.color-picker-status i {
  font-size: 1.3rem;
  color: var(--text);
}

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

.color-picker-buttons {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 15px;
  flex-wrap: wrap;
}

.color-picker-label {
  color: var(--text);
  font-size: 0.9rem;
  opacity: 0.8;
}

.color-picker-taken {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--text);
  font-size: 0.95rem;
  opacity: 0.85;
  padding: 10px 14px;
  background: rgba(0, 0, 0, 0.18);
  border: 1px solid var(--surface-border);
  border-radius: 2px;
}

.color-picker-locked {
  margin-top: 12px;
  font-size: 0.9rem;
  opacity: 0.85;
}

.color-picker-spectate {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--papyrus-text);
  font-size: 1rem;
  font-family: "Cinzel", serif;
  padding: 12px 20px;
  background: rgba(0, 0, 0, 0.18);
  border: 1px solid var(--surface-border);
  border-radius: 2px;
}

.color-button {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 8px;
  border: 4px solid transparent;
  border-radius: 2px;
  padding: 22px 40px;
  min-width: 130px;
  font-size: 0.95rem;
  font-weight: 700;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  font-family: "Cinzel", serif;
  color: #e6d9c0;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.9), 0 0 8px rgba(220, 180, 100, 0.15);
  cursor: pointer;
  transition: all 0.2s ease;
  position: relative;
}

.color-button i {
  font-size: 1.8rem;
}

.color-button:hover {
  transform: translateY(-3px);
}

.color-button:disabled {
  pointer-events: none;
}

.color-button-loading {
  opacity: 0.5;
  filter: grayscale(0.4);
}

.color-button-selected {
  opacity: 1;
  filter: none;
  animation: color-btn-pulse 0.8s ease-in-out infinite;
}

@keyframes color-btn-pulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.03); }
}

/* Iron trim — red button */
.red-button {
  background:
    linear-gradient(to bottom, rgba(181, 34, 34, 0.82) 0%, rgba(139, 26, 26, 0.88) 50%, rgba(90, 8, 8, 0.95) 100%),
    url('/gui/brick_pattern.png');
  background-size: auto, auto;
  border-color: #3a3028;
  box-shadow:
    inset 0 2px 0 rgba(255, 200, 150, 0.18),
    inset 0 -4px 8px rgba(0, 0, 0, 0.65),
    0 0 0 1px #0d0a08,
    0 5px 15px rgba(0, 0, 0, 0.55);
}

.red-button:hover {
  background:
    linear-gradient(to bottom, rgba(197, 40, 40, 0.78) 0%, rgba(155, 28, 28, 0.85) 50%, rgba(104, 10, 10, 0.93) 100%),
    url('/gui/brick_pattern.png');
  background-size: auto, auto;
  box-shadow:
    inset 0 2px 0 rgba(255, 200, 150, 0.28),
    inset 0 -4px 8px rgba(0, 0, 0, 0.55),
    0 0 0 1px #1a0a08,
    0 6px 20px rgba(139, 28, 28, 0.65);
}

/* Steel-silver trim — blue button */
.blue-button {
  background:
    linear-gradient(to bottom, rgba(42, 78, 130, 0.82) 0%, rgba(30, 58, 110, 0.88) 50%, rgba(10, 24, 53, 0.95) 100%),
    url('/gui/brick_pattern.png');
  background-size: auto, auto;
  border-color: #5a7085;
  box-shadow:
    inset 0 2px 0 rgba(180, 210, 255, 0.15),
    inset 0 -4px 8px rgba(0, 0, 0, 0.65),
    0 0 0 1px #08101e,
    0 5px 15px rgba(0, 0, 0, 0.55);
}

.blue-button:hover {
  background:
    linear-gradient(to bottom, rgba(50, 90, 148, 0.78) 0%, rgba(37, 70, 128, 0.85) 50%, rgba(13, 32, 64, 0.93) 100%),
    url('/gui/brick_pattern.png');
  background-size: auto, auto;
  box-shadow:
    inset 0 2px 0 rgba(180, 210, 255, 0.25),
    inset 0 -4px 8px rgba(0, 0, 0, 0.55),
    0 0 0 1px #0a1428,
    0 6px 20px rgba(30, 58, 110, 0.65);
}

.red-button:focus:not(:focus-visible),
.blue-button:focus:not(:focus-visible) {
  outline: none;
}

/* Pregame Wrapper */
.pregame-wrapper {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 15px;
  padding: 15px;
  max-width: 600px;
  margin: 0 auto;
}

/* Timer Panel */
.pregame-timer-panel {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 12px;
  background-color: var(--cloud-bg);
  background-image: var(--dirt-texture-url);
  background-repeat: repeat;
  border: 1px solid var(--surface-border);
  padding: 16px 20px;
  border-radius: 2px;
  width: 100%;
  box-sizing: border-box;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.15);
}

.timer-info {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--text);
  font-size: 0.95rem;
}

.timer-info i {
  color: var(--text);
  font-size: 1.1rem;
}

.timer-actions {
  display: flex;
  gap: 8px;
  justify-content: center;
}

.timer-actions .timer-btn {
  flex: 1;
}

.timer-btn {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 8px 14px;
  border: none;
  border-radius: 2px;
  font-size: 0.85rem;
  font-weight: 600;
  font-family: "Cinzel", serif;
  letter-spacing: 0.3px;
  cursor: pointer;
  transition: all 0.2s ease;
}

.timer-btn:disabled {
  opacity: 0.55;
  cursor: not-allowed;
  transform: none;
  box-shadow: none;
}

.timer-btn:disabled:hover {
  transform: none;
  box-shadow: none;
}

.timer-btn i {
  font-size: 0.9rem;
}

.timer-btn-primary {
  background: linear-gradient(135deg, #e63946 0%, #d62828 100%);
  color: white;
}

.timer-btn-primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(230, 57, 70, 0.4);
}

.timer-btn-play-ai-pop {
  animation: timer-btn-play-ai-pop 0.95s cubic-bezier(0.2, 0.9, 0.2, 1);
  transform-origin: center;
}

.timer-btn-secondary {
  background: rgba(0, 0, 0, 0.2);
  color: var(--papyrus-text);
  border: 1px solid var(--surface-border);
}

.timer-btn-secondary:hover {
  background: rgba(200, 150, 12, 0.12);
  border-color: #c8960c;
}

@keyframes timer-btn-play-ai-pop {
  0% {
    transform: scale(1);
  }
  28% {
    transform: scale(1.12);
  }
  55% {
    transform: scale(0.97);
  }
  100% {
    transform: scale(1);
  }
}

/* Pregame Actions */
.pregame-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
  width: 100%;
  padding: 0 12px;
  box-sizing: border-box;
}

.pregame-action-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 12px 20px;
  border: none;
  border-radius: 2px;
  font-size: 0.9rem;
  font-weight: 700;
  font-family: "Cinzel", serif;
  letter-spacing: 0.5px;
  cursor: pointer;
  transition: all 0.2s ease;
  min-width: 120px;
}

.pregame-action-btn:disabled {
  opacity: 0.55;
  cursor: not-allowed;
  transform: none;
  box-shadow: none;
}

.pregame-action-btn:disabled:hover {
  transform: none;
  box-shadow: none;
}

.pregame-action-btn i {
  font-size: 1rem;
}

.pregame-action-primary {
  background: linear-gradient(135deg, #e63946 0%, #d62828 100%);
  color: white;
  box-shadow: 0 4px 12px rgba(230, 57, 70, 0.3);
  flex: 1;
  max-width: 200px;
}

.pregame-action-primary:hover {
  transform: translateY(-3px);
  box-shadow: 0 6px 16px rgba(230, 57, 70, 0.5);
}

.pregame-action-primary.red-accent {
  background: linear-gradient(135deg, #9B1C1C 0%, #720D0D 100%);
  box-shadow: 0 4px 12px rgba(139, 28, 28, 0.3);
}

.pregame-action-primary.red-accent:hover {
  box-shadow: 0 6px 16px rgba(139, 28, 28, 0.55);
}

.pregame-action-primary.blue-accent {
  background: linear-gradient(135deg, #2055A0 0%, #143070 100%);
  box-shadow: 0 4px 12px rgba(32, 85, 160, 0.3);
}

.pregame-action-primary.blue-accent:hover {
  box-shadow: 0 6px 16px rgba(32, 85, 160, 0.55);
}

.pregame-action-secondary {
  background: var(--action-secondary-bg);
  border: 2px solid var(--action-secondary-border);
  color: var(--action-secondary-color);
  text-shadow: 0 1px 1px rgba(0, 0, 0, 0.3);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.07),
    inset 0 -2px 5px rgba(0, 0, 0, 0.2),
    0 4px 10px rgba(0, 0, 0, 0.2);
}

.pregame-action-secondary:hover {
  background: var(--action-secondary-bg-hover);
  border-color: var(--action-secondary-border-hover);
  transform: translateY(-2px);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.1),
    inset 0 -2px 5px rgba(0, 0, 0, 0.15),
    0 5px 14px rgba(0, 0, 0, 0.25);
}

/* Invite a Challenger collapsible */
.invite-details {
  width: 100%;
}

.invite-summary {
  list-style: none;
  cursor: pointer;
  width: 100%;
  box-sizing: border-box;
  position: relative;
  isolation: isolate;
}

.invite-summary .gui-corner {
  width: 40px;
  height: 40px;
}

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

.invite-details[open] .invite-summary {
  border-bottom-left-radius: 2px;
  border-bottom-right-radius: 2px;
  opacity: 0.85;
}

.invite-dropdown {
  display: flex;
  flex-direction: row;
  gap: 10px;
  margin-top: 8px;
  justify-content: center;
  flex-wrap: wrap;
}

/* Pregame Help */
/* Quick Name Set */
.quick-name-prompt {
  background: var(--cloud-bg);
  border: 1px dashed rgba(100, 120, 200, 0.3);
  border-radius: 10px;
  padding: 12px 16px;
  width: 100%;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.quick-name-label {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  color: var(--text);
  opacity: 0.8;
}

.quick-name-label i {
  color: #5b9ee9;
  font-size: 12px;
}

.quick-name-form {
  display: flex;
  gap: 6px;
}

.quick-name-input {
  flex: 1;
  padding: 7px 12px;
  border: 1px solid rgba(100, 120, 200, 0.25);
  border-radius: 6px;
  background: rgba(0, 0, 0, 0.15);
  color: var(--text);
  font-size: 14px;
  outline: none;
  transition: border-color 0.2s ease;
}

.quick-name-input::placeholder {
  color: var(--text);
  opacity: 0.4;
}

.quick-name-input:focus {
  border-color: rgba(91, 158, 233, 0.5);
}

.quick-name-btn {
  padding: 7px 14px;
  background: rgba(40, 167, 69, 0.15);
  border: 1px solid rgba(40, 167, 69, 0.35);
  border-radius: 6px;
  color: #28a745;
  cursor: pointer;
  font-size: 14px;
  transition: all 0.15s ease;
  flex-shrink: 0;
}

.quick-name-btn:hover {
  background: rgba(40, 167, 69, 0.25);
  border-color: rgba(40, 167, 69, 0.5);
}

.quick-name-result {
  font-size: 12px;
  color: #28a745;
  min-height: 0;
}

.quick-name-result:empty {
  display: none;
}

.pregame-help {
  padding: 0;
  width: 100%;
  overflow: hidden;
}

.pregame-help summary {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 18px 24px;
  cursor: pointer;
  color: var(--papyrus-text);
  font-weight: 700;
  font-size: 1.1rem;
  font-family: "Cinzel", serif;
  letter-spacing: 0.5px;
  list-style: none;
}

.pregame-help summary::-webkit-details-marker {
  display: none;
}

.pregame-help summary i {
  color: var(--papyrus-text);
  font-size: 1rem;
}

.pregame-help summary::after {
  content: "\f078";
  font-family: "Font Awesome 6 Free";
  font-weight: 900;
  margin-left: auto;
  transition: transform 0.2s ease;
  font-size: 0.8rem;
}

.pregame-help[open] summary::after {
  transform: rotate(180deg);
}

.pregame-help p {
  padding: 0 26px 24px;
  margin: 0;
  color: var(--papyrus-text);
  font-size: 0.9rem;
  line-height: 1.6;
  opacity: 0.85;
}

.pregame-deck-selector {
  width: 100%;
  border: 1px solid var(--surface-border);
  background-color: var(--cloud-bg);
  background-image: var(--dirt-texture-url);
  background-repeat: repeat;
  padding: 16px 18px;
  box-sizing: border-box;
  border-radius: 2px;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.15);
}

.pregame-deck-selector-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 12px;
}

.pregame-deck-selector-title {
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: "Cinzel", serif;
  font-size: 1rem;
  font-weight: 700;
  color: var(--text);
}

.pregame-deck-selector-subtitle {
  color: var(--text);
  opacity: 0.82;
  font-size: 0.82rem;
  line-height: 1.4;
  text-align: right;
}

.pregame-deck-selector-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.pregame-deck-option {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  width: 100%;
  padding: 11px 12px;
  border: 1px solid var(--surface-border);
  background: var(--pregame-deck-option-bg, rgba(255, 255, 255, 0.38));
  color: var(--text);
  text-align: left;
  cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease, transform 0.15s ease;
}

.pregame-deck-option:hover:not(:disabled) {
  background: var(--surface-hover);
  border-color: var(--surface-border-hover);
  transform: translateY(-1px);
}

.pregame-deck-option:disabled {
  cursor: default;
}

.pregame-deck-option-active {
  background: var(--pregame-deck-option-active-bg, rgba(84, 127, 214, 0.16));
  border-color: var(--pregame-deck-option-active-border, rgba(84, 127, 214, 0.42));
}

.pregame-deck-option-disabled {
  opacity: 0.8;
}

.pregame-deck-option-main {
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
}

.pregame-deck-option-name {
  font-weight: 700;
  color: var(--text);
}

.pregame-deck-option-meta {
  font-size: 0.8rem;
  color: color-mix(in srgb, var(--text) 78%, transparent);
}

.pregame-deck-option-meta-invalid {
  color: var(--pregame-deck-invalid-meta-color, #8e2f2f);
  opacity: 1;
}

.pregame-deck-option-state {
  flex-shrink: 0;
}

button.pregame-deck-option .pregame-deck-option-badge,
button.pregame-deck-option .pregame-deck-option-cta,
button.pregame-deck-option .pregame-deck-option-invalid {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 8px;
  border-radius: 999px;
  font-size: 0.8rem;
  font-weight: 700;
  border: 1px solid transparent;
  background: rgba(0, 0, 0, 0.08) !important;
}

button.pregame-deck-option .pregame-deck-option-badge {
  color: var(--pregame-deck-badge-color, #f4fff6) !important;
  background: var(--pregame-deck-badge-bg, #1f5a2d) !important;
  border-color: var(--pregame-deck-badge-border, #184523) !important;
}

button.pregame-deck-option .pregame-deck-option-cta {
  color: var(--pregame-deck-cta-color, #fff8ec) !important;
  background: var(--pregame-deck-cta-bg, #7a4d08) !important;
  border-color: var(--pregame-deck-cta-border, #5e3a05) !important;
}

button.pregame-deck-option .pregame-deck-option-invalid {
  color: var(--pregame-deck-invalid-color, #fff3f3) !important;
  background: var(--pregame-deck-invalid-bg, #7a2626) !important;
  border-color: var(--pregame-deck-invalid-border, #5c1b1b) !important;
}

.pregame-global-chat {
  width: 100%;
  box-sizing: border-box;
  padding: 16px;
  border-radius: 2px;
  border: 1px solid var(--surface-border);
  background: var(--panel-texture-url) center/cover, var(--panel-bg);
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.22);
}

.pregame-global-chat-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 12px;
}

.pregame-global-chat-title {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--papyrus-text);
  font-family: "Cinzel", serif;
  font-weight: 700;
  letter-spacing: 0.4px;
}

.pregame-global-chat-title i {
  color: #67b8ff;
}

.pregame-global-chat-subtitle {
  color: color-mix(in srgb, var(--text) 74%, transparent);
  font-size: 0.88rem;
}

.pregame-global-chat .chat-messages {
  min-height: 180px;
  max-height: 260px;
  background: color-mix(in srgb, var(--panel-bg) 84%, transparent);
}

.pregame-global-chat .chat-form input {
  background: color-mix(in srgb, var(--panel-bg) 92%, transparent);
}

.pregame-global-chat .chat-message {
  background: color-mix(in srgb, var(--surface-subtle) 78%, transparent);
}

.pregame-global-chat .chat-edit-btn,
.pregame-global-chat .chat-delete-btn {
  color: color-mix(in srgb, var(--text) 40%, transparent);
}

/* Larger screens - horizontal layout */
@media (min-width: 768px) {
  .pregame-wrapper {
    max-width: 800px;
    gap: 20px;
    padding: 25px;
  }

  .pregame-timer-panel {
    padding: 16px 24px;
  }

  .timer-info {
    font-size: 1rem;
  }

  .timer-btn {
    padding: 10px 18px;
    font-size: 0.9rem;
  }

  .pregame-action-btn {
    padding: 14px 24px;
    font-size: 1rem;
    min-width: 140px;
  }

  .pregame-action-primary {
    max-width: 220px;
  }

  .pregame-help {
    max-width: 500px;
  }
}

@media (max-width: 767px) {
  .pregame-deck-selector-header {
    flex-direction: column;
  }

  .pregame-deck-selector-subtitle {
    text-align: left;
  }

  .pregame-global-chat-header {
    flex-direction: column;
    align-items: flex-start;
  }
}

/* Landscape mobile - compact */
@media (max-height: 500px) {
  .pregame-wrapper {
    gap: 10px;
    padding: 10px;
  }

  .color-picker-container {
    padding: 18px 28px;
    margin: 5px;
  }

  .color-picker-h1 {
    font-size: 1.1rem;
    margin-bottom: 10px;
  }

  .color-button {
    padding: 14px 24px;
    font-size: 0.85rem;
  }

  .pregame-timer-panel {
    padding: 10px 15px;
  }

  .timer-info {
    font-size: 0.85rem;
  }

  .timer-btn {
    padding: 6px 12px;
    font-size: 0.8rem;
  }

  .pregame-actions {
    gap: 8px;
  }

  .pregame-action-btn {
    padding: 10px 16px;
    font-size: 0.85rem;
    min-width: 100px;
  }

  .pregame-help summary {
    padding: 10px 14px;
    font-size: 0.9rem;
  }

  .pregame-help p {
    font-size: 0.85rem;
    padding: 0 14px 12px;
  }

  .pregame-deck-selector {
    padding: 12px 14px;
  }

  .pregame-global-chat {
    padding: 12px;
  }

  .pregame-global-chat .chat-messages {
    min-height: 140px;
    max-height: 180px;
  }
}

.cta {
  padding: 12px 24px;
  border-radius: 6px;
  border: none;
  font-size: 1rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s ease;
  text-decoration: none;
  display: inline-block;
  text-align: center;
}

.learn-more {
  background-color: #457b9d;
  color: white;
}

.learn-more:hover {
  background-color: #2c5073;
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
}

.learn-more:active {
  transform: translateY(0);
}

/* Game Over / Midgame Styles */
.game-over-container {
  display: flex;
  align-items: flex-start;
  justify-content: center;
  min-height: 100vh;
  width: 100%;
  padding: 20px;
  overflow-y: auto;
  box-sizing: border-box;
}

.game-over-content {
  background-color: var(--cloud-bg);
  background-image: var(--dirt-texture-url);
  background-repeat: repeat;
  border-radius: 2px;
  padding: 50px 40px;
  max-width: 700px;
  width: 100%;
  margin: auto;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.4);
  border: 1px solid var(--surface-border);
  animation: slideUp 0.6s cubic-bezier(0.34, 1.56, 0.64, 1);
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
}

@keyframes slideUp {
  from {
    opacity: 0;
    transform: translateY(40px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.game-over-header {
  display: flex;
  align-items: stretch;
  justify-content: space-between;
  margin-bottom: clamp(20px, 4vh, 40px);
  flex-shrink: 0;
}

.game-over-header-center {
  text-align: center;
  flex: 1;
  min-width: 0;
}

.game-over-header-action {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  background: rgba(0, 0, 0, 0.15);
  border: 1px solid var(--surface-border);
  border-radius: 2px;
  color: var(--text);
  opacity: 0.7;
  cursor: pointer;
  text-decoration: none;
  padding: 8px clamp(12px, 2vw, 20px);
  transition: color 0.2s ease, background 0.2s ease, opacity 0.2s ease;
  flex-shrink: 0;
  min-width: clamp(50px, 8vw, 70px);
}

.game-over-header-action-stack {
  display: flex;
  flex-direction: column;
  gap: 10px;
  flex-shrink: 0;
}

.game-over-header-action i {
  font-size: clamp(1.4rem, 3.5vw, 2rem);
  color: #c8960c;
}

.game-over-header-action span {
  font-size: clamp(0.55rem, 1vw, 0.7rem);
  font-weight: 700;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  font-family: "Cinzel", serif;
}

.game-over-header-action:hover {
  opacity: 1;
  background: rgba(200, 150, 12, 0.12);
  border-color: #c8960c;
}

#restart-button {
  opacity: 1;
  border-color: #c8960c;
  animation:
    restartGrow 0.5s ease-in-out 1 forwards,
    restartGlow 1.8s ease-in-out 0.5s infinite;
}

@keyframes restartGrow {
  0%   { transform: scale(1); }
  50%  { transform: scale(1.12); }
  100% { transform: scale(1); }
}

@keyframes restartGlow {
  0%   { box-shadow: 0 0 0px rgba(200, 150, 12, 0); }
  50%  { box-shadow: 0 0 14px rgba(200, 150, 12, 0.7), 0 0 28px rgba(200, 150, 12, 0.3); }
  100% { box-shadow: 0 0 0px rgba(200, 150, 12, 0); }
}

/* "Next Level" — the primary campaign-advance CTA. It reuses #restart-button's
   amber grow+glow, but the translucent fill + amber glow were easy to miss on
   the light theme's pale background. Give it a solid amber fill and a periodic
   light-reflection sweep (mirrors the coin badge shine) so it reads clearly as
   the obvious next step in both themes. */
.next-level-action.game-over-header-action {
  position: relative;
  overflow: hidden;
  background: linear-gradient(180deg, #ffd970, #f0a832);
  border-color: #8a5512;
  color: #2a1a06;
}

.next-level-action.game-over-header-action i,
.next-level-action.game-over-header-action span {
  color: #2a1a06;
}

.next-level-action.game-over-header-action:hover {
  background: linear-gradient(180deg, #ffe085, #f4b448);
  border-color: #8a5512;
  filter: brightness(1.04);
}

.next-level-action::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  background-image: linear-gradient(
    115deg,
    transparent 40%,
    rgba(255, 255, 255, 0.55) 47%,
    rgba(255, 255, 255, 0.95) 50%,
    rgba(255, 255, 255, 0.55) 53%,
    transparent 60%
  );
  background-repeat: no-repeat;
  background-size: 250% 100%;
  animation: next-level-shine 3.4s ease-in-out infinite;
}

/* Sweep occupies the first ~22% of the cycle, then rests before repeating. */
@keyframes next-level-shine {
  0%   { background-position-x: 140%; }
  22%  { background-position-x: -40%; }
  100% { background-position-x: -40%; }
}

@media (prefers-reduced-motion: reduce) {
  .next-level-action::after { animation: none; }
}

.winner-badge {
  display: inline-block;
  padding: clamp(6px, 1vh, 10px) clamp(12px, 2vw, 20px);
  border-radius: 2px;
  font-weight: 700;
  font-size: clamp(0.65rem, 1.2vw, 0.85rem);
  letter-spacing: 1px;
  text-transform: uppercase;
  font-family: "Cinzel", serif;
  margin-bottom: clamp(8px, 2vh, 15px);
  animation: pulse 1.5s ease-in-out infinite;
}

.winner-red {
  background: rgba(220, 53, 69, 0.8);
  color: white;
  border: 2px solid #dc3545;
}

.winner-blue {
  background: rgba(52, 152, 219, 0.8);
  color: white;
  border: 2px solid #3498db;
}

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

.game-over-title {
  font-size: clamp(1.5rem, 5vw, 3.5rem);
  font-weight: 800;
  margin: 0;
  color: var(--papyrus-text);
  font-family: "Cinzel", serif;
  text-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
  letter-spacing: 1px;
}

.final-score-section {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(10px, 3vw, 30px);
  margin: clamp(20px, 5vh, 40px) 0;
  padding: clamp(15px, 4vh, 30px) 0;
  border-top: 1px solid var(--surface-border);
  border-bottom: 1px solid var(--surface-border);
  flex-shrink: 0;
}

.score-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(6px, 1.5vh, 12px);
  padding: clamp(10px, 2vh, 20px) clamp(15px, 3vw, 30px);
  border-radius: 2px;
  background: rgba(0, 0, 0, 0.15);
  border: 1px solid var(--surface-border);
  min-width: clamp(60px, 15vw, 120px);
  position: relative;
}

.red-score {
  border-color: rgba(220, 53, 69, 0.4);
  background: rgba(220, 53, 69, 0.08);
}

.blue-score {
  border-color: rgba(52, 100, 180, 0.4);
  background: rgba(52, 100, 180, 0.08);
}

.score-label {
  font-size: clamp(0.7rem, 1.2vw, 0.9rem);
  font-weight: 700;
  color: var(--text);
  opacity: 0.7;
  text-transform: uppercase;
  letter-spacing: 1px;
  font-family: "Cinzel", serif;
}

.score-value {
  font-size: clamp(1.5rem, 4vw, 3.2rem);
  font-weight: 800;
  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
}

.score-badge {
  position: absolute;
  top: -10px;
  right: 8px;
  background: linear-gradient(to bottom, #e6ce6a 0%, #c8960c 50%, #b7892b 100%);
  color: #1a0a00;
  padding: clamp(3px, 0.5vh, 4px) clamp(8px, 1.5vw, 12px);
  border-radius: 2px;
  font-size: clamp(0.55rem, 1vw, 0.7rem);
  font-weight: 700;
  letter-spacing: 0.5px;
  font-family: "Cinzel", serif;
}

.deck-label {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  font-size: 0.7rem;
  opacity: 0.5;
  color: var(--text);
}

.deck-label-left {
  right: 100%;
  margin-right: 6px;
}

.deck-label-right {
  left: 100%;
  margin-left: 6px;
}

.score-divider {
  font-size: clamp(1.2rem, 3vw, 2.5rem);
  font-weight: 300;
  color: rgba(255, 255, 255, 0.5);
}

.finishing-card-section {
  text-align: center;
  padding: clamp(12px, 2vh, 20px);
  background: rgba(0, 0, 0, 0.15);
  border-radius: 2px;
  margin: clamp(15px, 3vh, 25px) 0;
  border-left: 3px solid #c8960c;
  flex-shrink: 0;
}

.finishing-card-label {
  margin: 0;
  font-size: clamp(0.75rem, 1.5vw, 1rem);
  color: var(--text);
  font-weight: 500;
  line-height: 1.4;
}

.finishing-card-label strong {
  color: #c8960c;
  font-weight: 700;
  font-size: clamp(0.85rem, 1.7vw, 1.1rem);
}

.elo-section {
  text-align: center;
  padding: clamp(12px, 2vh, 20px);
  background: rgba(0, 0, 0, 0.15);
  border-radius: 2px;
  margin: clamp(10px, 2vh, 18px) 0;
  border-left: 3px solid #c8960c;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.elo-change {
  font-size: clamp(1.2rem, 2.5vw, 1.6rem);
  font-weight: 700;
}

.elo-positive {
  color: #4caf50;
}

.elo-negative {
  color: #e74c3c;
}

.elo-new-rating {
  font-size: clamp(0.8rem, 1.5vw, 1rem);
  color: rgba(255, 255, 255, 0.85);
}

.elo-rank {
  font-size: clamp(0.75rem, 1.3vw, 0.9rem);
  color: #f0a500;
  font-weight: 500;
}

.campaign-stars-section {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin: clamp(20px, 5vh, 40px) 0;
  padding: clamp(15px, 4vh, 30px) 0;
  border-top: 1px solid var(--surface-border);
  border-bottom: 1px solid var(--surface-border);
}

.campaign-star-row {
  position: relative;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 14px;
  border-radius: 2px;
  background: rgba(0, 0, 0, 0.12);
  border: 1px solid var(--surface-border);
}

.campaign-star-row.achieved {
  background: rgba(200, 150, 12, 0.1);
  border-color: rgba(200, 150, 12, 0.3);
}

/* ── Star unlock celebration (victory screen) ──────────────────────────
 * Smacks the star icon down with an impact + a burst of dust particles,
 * flashes the row, then pops the Collect button in. Driven by
 * animateStarUnlocks() in main.js, which adds/removes these classes and
 * spawns .star-dust-particle spans. Multiple stars are staggered there. */
.campaign-star-row.star-unlock-flash::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: radial-gradient(circle at 30px 50%, rgba(255, 214, 110, 0.55), rgba(255, 214, 110, 0) 70%);
  animation: starRowFlashFade 0.8s ease-out both;
  animation-delay: var(--star-unlock-delay, 0s);
  pointer-events: none;
}

@keyframes starRowFlashFade {
  0% { opacity: 0; }
  25% { opacity: 1; }
  100% { opacity: 0; }
}

.campaign-star-icon.star-unlock-smack {
  display: inline-block;
  animation: starSmackDown 0.7s cubic-bezier(0.34, 1.56, 0.64, 1) both;
}

@keyframes starSmackDown {
  0% { transform: scale(2.6) translateY(-46px) rotate(-18deg); opacity: 0; }
  50% { transform: scale(0.85) translateY(2px) rotate(5deg); opacity: 1; }
  68% { transform: scale(1.18) translateY(-4px) rotate(-3deg); }
  100% { transform: scale(1) translateY(0) rotate(0deg); }
}

.campaign-star-collect-btn.star-unlock-pop {
  /* animation-delay is set inline per-row by animateStarUnlocks() in main.js */
  animation: starCollectPop 0.55s cubic-bezier(0.34, 1.56, 0.64, 1) both;
}

@keyframes starCollectPop {
  0% { transform: scale(0) translateY(10px); opacity: 0; }
  60% { transform: scale(1.2) translateY(-3px); opacity: 1; }
  82% { transform: scale(0.93); }
  100% { transform: scale(1) translateY(0); }
}

.star-dust-particle {
  position: absolute;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #fff3cf;
  box-shadow: 0 0 6px 2px rgba(255, 214, 110, 0.9);
  pointer-events: none;
  opacity: 0;
  transform: translate(-50%, -50%);
  animation: starDustBurst 0.7s cubic-bezier(0.15, 0.6, 0.3, 1) both;
}

/* Fast, bright burst outward for the first third, then a slow fade while
   drifting the rest of the way — "flying out fast, then fading away". */
@keyframes starDustBurst {
  0% { opacity: 1; transform: translate(-50%, -50%) scale(1) translate(0, 0); }
  30% { opacity: 1; transform: translate(-50%, -50%) scale(0.85) translate(calc(var(--dx) * 0.7), calc(var(--dy) * 0.7)); }
  100% { opacity: 0; transform: translate(-50%, -50%) scale(0.3) translate(var(--dx), var(--dy)); }
}

/* Per-star Collect button + Collected badge on the campaign victory screen.
 * margin-left:auto pushes them to the right edge of the flex row. */
.campaign-star-collect-btn {
  margin-left: auto;
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 14px;
  font-weight: 700;
  font-size: 0.85rem;
  white-space: nowrap;
  color: #2a1a06;
  background: linear-gradient(180deg, #ffd970, #f0a832);
  border: 1px solid #8a5512;
  border-radius: 6px;
  cursor: pointer;
  box-shadow: 0 2px 0 #8a5512;
  transition: transform 0.1s ease, filter 0.1s ease;
}

.campaign-star-collect-btn:hover {
  filter: brightness(1.06);
  transform: translateY(-1px);
}

.campaign-star-collect-btn:active {
  transform: translateY(1px);
  box-shadow: 0 1px 0 #8a5512;
}

.campaign-star-collected {
  margin-left: auto;
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 0.85rem;
  font-weight: 600;
  white-space: nowrap;
  color: #6fcf6f;
}

/* The collected-green (#6fcf6f) is tuned for dark surfaces; on the light theme's
   pale background it's washed out and low-contrast. Use a deeper green there. */
[data-theme="light"] .campaign-star-collected {
  color: #2e9e4f;
}

.campaign-star-icon {
  font-size: 1.3rem;
  flex-shrink: 0;
}

.star-achieved {
  color: #f0c040;
}

.star-missed {
  color: rgba(255, 255, 255, 0.2);
}

.campaign-star-info {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.campaign-star-label {
  font-weight: 600;
  font-size: 0.95rem;
  color: var(--text);
}

.campaign-star-desc {
  font-size: 0.8rem;
  color: color-mix(in srgb, var(--text) 72%, transparent);
}

.game-over-newgame {
  display: flex;
  justify-content: center;
  margin-top: clamp(15px, 3vh, 30px);
  flex-shrink: 0;
}

.game-over-btn {
  padding: clamp(10px, 1.5vh, 14px) clamp(20px, 3vw, 28px);
  border-radius: 2px;
  font-size: clamp(0.85rem, 1.5vw, 1rem);
  font-weight: 700;
  font-family: "Cinzel", serif;
  cursor: pointer;
  transition: all 0.2s ease;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  white-space: nowrap;
  letter-spacing: 0.5px;
}

.new-game-btn {
  background: linear-gradient(to bottom, #e6ce6a 0%, #c8960c 50%, #b7892b 100%);
  border: 1px solid #b7892b;
  color: #1a0a00;
}

.game-over-deck-cta {
  display: flex;
  justify-content: center;
  margin-top: 10px;
}

.deck-btn {
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid var(--surface-border);
  color: var(--text);
  font-size: clamp(0.75rem, 1.2vw, 0.85rem);
  opacity: 0.7;
}

.deck-btn:hover {
  opacity: 1;
  background: rgba(255, 255, 255, 0.12);
}

.deck-cta-msg {
  text-align: center;
  font-size: 0.8rem;
  opacity: 0.6;
  color: var(--text);
  margin: 0;
  display: flex;
  align-items: center;
  gap: 6px;
  justify-content: center;
}

/* The guest's "register an account" message is a button that opens the
   registration form, so it has to read as something you can press — the muted
   0.6 of the plain message would say "dead end". Rendered as a <button> for
   keyboard and screen-reader users; these rules strip the browser chrome. */
.deck-cta-register {
  appearance: none;
  background: none;
  border: 0;
  padding: 4px 6px;
  width: 100%;
  font: inherit;
  font-size: 0.8rem;
  opacity: 0.85;
  cursor: pointer;
  border-radius: 6px;
  transition: opacity 0.15s ease, background-color 0.15s ease;
}

.deck-cta-register .deck-cta-text {
  text-decoration: underline;
  text-underline-offset: 2px;
}

.deck-cta-register:hover,
.deck-cta-register:focus-visible {
  opacity: 1;
  background: rgba(255, 255, 255, 0.1);
}

.deck-cta-register:focus-visible {
  outline: 2px solid var(--text);
  outline-offset: 1px;
}

.new-game-btn:hover {
  opacity: 0.88;
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(200, 150, 12, 0.35);
}

.card-top-left {
  display: flex;
  align-items: center;
  gap: 4px;
  position: absolute;
  top: 8px;
  left: 8px;
}

.card-top-right {
  display: flex;
  align-items: center;
  gap: 4px;
  position: absolute;
  top: 8px;
  right: 8px;
}


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

.card-costs {
  position: absolute;
  top: 50%;
  left: 8px;
  transform: translateY(-50%);
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.card-cost {
  display: flex;
  flex-direction: row;
  color: white;
}

/* Marking a cost the player cannot pay.

   The card stays greyscaled while hovered — that is what tells the player a
   click will discard it rather than play it — and a filter applies to the
   whole subtree, so a highlight drawn inside .card would render grey. It is
   drawn just outside instead, in a layer that escapes the filter but matches
   the card's padding box and hides its own overflow, so it still cuts exactly
   where the card would. See ensureMissingCostLayer in main.js. */
.missing-cost-layer {
  position: absolute;
  overflow: hidden;
  pointer-events: none;
  z-index: 25;
}

.missing-cost-overlay {
  position: absolute;
  box-sizing: border-box;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  gap: 2px;
  color: white;
  background-color: rgba(153, 27, 27, 0.88);
  /* An inset ring rather than a border: this copy is sized from the row it
     covers, and a border would make it 2px larger than the original. */
  box-shadow:
    inset 0 0 0 1px rgba(255, 192, 192, 0.35),
    0 0 12px rgba(220, 38, 38, 0.45);
}

.missing-cost-overlay .card-value,
.card-cost.missing-cost-highlight .card-value {
  color: #ffe0e0;
}

.missing-cost-overlay .card-icon,
.card-cost.missing-cost-highlight .card-icon {
  filter: brightness(0) saturate(100%) invert(92%) sepia(16%) saturate(419%) hue-rotate(308deg) brightness(103%) contrast(103%);
}

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

.card-value {
  font-size: 14px;
  font-weight: bold;
  color: white;
}

.card-name {
  position: absolute;
  bottom: 10px;
  left: 50%;
  transform: translateX(-50%);
  font-size: 16px;
  font-weight: bold;
  text-align: center;
  /*white-space: nowrap;*/
  max-width: 80px;
  color: white;
}

.blue-hue {
  filter: hue-rotate(200deg);
}

.red-hue {
  filter: hue-rotate(290deg);
}

.efx-indicator {
  height: 50px;
}

:root {
  left: 0;
  --translate-start: -100%;
  /* Default: offscreen left */
  --translate-end: 0;
  /* Default: offscreen right */
}

@keyframes slideInOut {
  0% {
    transform: translateX(var(--translate-start));
    /* Start offscreen to the left */
    opacity: 0;
  }

  25% {
    transform: translateX(var(--translate-end));
    /* Fully visible in the center */
    opacity: 1;
  }

  75% {
    transform: translateX(var(--translate-end));
    /* Stay in place for a moment */
    opacity: 1;
  }

  100% {
    transform: translateX(var(--translate-start));
    /* Move offscreen to the right */
    opacity: 0;
    visibility: hidden;
  }
}

.played-card-anim {
  position: fixed;
  width: 130px;
  animation: slideInOut 2s ease-in-out 1 forwards;
  /*max-width: 60vw; */
  max-width: 100vw;
  max-height: 100vh;
  object-fit: contain;
  /* Preserve aspect ratio */
  overflow: hidden;
  top: 0%;
  /*transform: translateY(-50%);*/
  /* Adjust animation duration (3s) as needed */
}

.played-card-anim.red {
  left: 0;
  --translate-start: -100%;
  /* Default: offscreen left */
  --translate-end: 0;
  /* Default: offscreen right */
}

.played-card-anim.blue {
  right: 0;
  --translate-start: 100%;
  /* Default: offscreen left */
  --translate-end: 0;
  /* Default: offscreen right */
}

@keyframes fallToFlat {
  0% {
    transform: translate(-100%, -50%) rotate(-90deg);
    /* Offscreen, vertical position */
    opacity: 0;
    /* Hidden */
  }

  30% {
    transform: translate(0, -50%) rotate(-45deg);
    /* Midway, halfway through the fall */
    opacity: 1;
    /* Visible */
  }

  60% {
    transform: translate(0, -50%) rotate(0deg);
    /* In the center, flat position */
    opacity: 1;
  }

  80% {
    transform: translate(0, -50%) rotate(0deg);
    /* In the center, flat position */
    opacity: 1;
  }

  100% {
    transform: translateX(-100%);
    /* Move offscreen to the right */
    opacity: 0;
    visibility: hidden;
  }
}

.stick {
  position: absolute;
  top: 50%;
  /* Center vertically */
  left: 50%;
  /* Center horizontally */
  transform-origin: center left;
  /* Pivot point for rotation */
  transform: translate(-100%, -50%) rotate(-90deg);
  /* Initial offscreen vertical position */
  animation: fallToFlat 2s ease-out 1 forwards;
  /* Play once */
  max-width: 100vw;
  /* Fit within viewport width */
  max-height: 100vh;
  /* Fit within viewport height */
  object-fit: contain;
  /* Maintain aspect ratio */
}

.overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.8);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 1000;
}

.hidden {
  display: none;
}

.overlay-image {
  max-width: 90%;
  max-height: 90%;
  object-fit: contain;
  cursor: pointer;
  border: 2px solid white;
}

/***** MODAL DIALOG ****/
#modal {
  /* Underlay covers entire screen. */
  position: fixed;
  top: 0px;
  bottom: 0px;
  left: 0px;
  right: 0px;
  background-color: rgba(0, 0, 0, 0.5);
  z-index: 1000;

  /* Flexbox centers the .modal-content vertically and horizontally */
  display: flex;
  flex-direction: column;
  align-items: center;

  /* Animate when opening */
  animation-name: fadeIn;
  animation-duration: 150ms;
  animation-timing-function: ease;
}

#modal > .modal-underlay {
  /* underlay takes up the entire viewport. This is only
	required if you want to click to dismiss the popup */
  position: absolute;
  z-index: -1;
  top: 0px;
  bottom: 0px;
  left: 0px;
  right: 0px;
}

#modal > .modal-content {
  /* Position visible dialog near the top of the window */
  margin-top: 10vh;

  /* Sizing for visible dialog */
  width: 80%;
  max-width: 600px;
  max-height: 80vh;

  /* Display properties for visible dialog*/
  border: solid 1px #999;
  border-radius: 8px;
  box-shadow: 0px 0px 20px 0px rgba(0, 0, 0, 0.3);
  background-color: var(--cloud-bg);
  padding: 20px;

  /* Animate when opening */
  animation-name: zoomIn;
  animation-duration: 150ms;
  animation-timing-function: ease;
  overflow: scroll;
}

#modal.closing {
  /* Animate when closing */
  animation-name: fadeOut;
  animation-duration: 150ms;
  animation-timing-function: ease;
}

#modal.closing > .modal-content {
  /* Animate when closing */
  animation-name: zoomOut;
  animation-duration: 150ms;
  animation-timing-function: ease;
}

@keyframes fadeIn {
  0% {
    opacity: 0;
  }

  100% {
    opacity: 1;
  }
}

@keyframes fadeOut {
  0% {
    opacity: 1;
  }

  100% {
    opacity: 0;
  }
}

@keyframes zoomIn {
  0% {
    transform: scale(0.9);
  }

  100% {
    transform: scale(1);
  }
}

@keyframes zoomOut {
  0% {
    transform: scale(1);
  }

  100% {
    transform: scale(0.9);
  }
}

/* Form styling */
.form-group {
  margin-bottom: 15px;
}

.form-group label {
  display: block;
  margin-bottom: 5px;
}

.form-group input,
.form-group button {
  width: 100%;
  padding: 8px 12px;
  border: 1.5px solid var(--resource-panel-border);
  border-radius: 8px;
  background: var(--panel-bg);
  color: var(--text);
  font-family: inherit;
  font-size: 0.95rem;
  box-sizing: border-box;
}

.games-list {
  list-style: none;
  padding: 0;
  margin: 0;
  max-height: 200px;
  overflow: scroll;
}

.games-list li {
  display: flex;
  align-items: center;
  padding: 8px;
  border: 1px solid #ccc;
  border-radius: 4px;
  margin-bottom: 8px;
}

.games-list li span {
  flex: 1;
  padding: 0 5px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.games-list .room-name {
  flex: 2;
  /* Room name gets more space */
}

.games-list .actions {
  flex: 0 0 auto;
  /* Prevent actions from stretching */
  display: flex;
  gap: 5px;
}

.games-list .actions button {
  background: none;
  border: none;
  cursor: pointer;
  padding: 5px;
}

.games-list .actions button img {
  width: 16px;
  height: 16px;
}

.games-list .actions button:hover {
  opacity: 0.8;
}

/* Profile Modal Styling */
.profile-modal {
  width: 85%;
  max-width: 700px;
  overflow: clip; /* clip without creating scroll context; corners stay fixed */
  position: relative;
}

/* Override modal-content border/background for the profile modal.
   Higher specificity [1,2,0] needed to beat #modal > .modal-content [1,1,0]. */
#modal > .modal-content.profile-modal {
  border: none;
  padding: 5px; /* exact gap between modal edge and background image */
  background-color: transparent;
  background-image: url('/gui/gui_panel_dark.webp');
  background-repeat: no-repeat;
  background-size: 100% 100%;
  background-origin: content-box;
  background-clip: content-box;
}

/* Inner scroll container for profile modal content */
.modal-scroll-body {
  overflow-y: auto;
  max-height: 75vh;
  padding: 15px;
}

.profile-header {
  position: relative;
  isolation: isolate;
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 30px;
  padding-bottom: 20px;
  border-bottom: 2px solid var(--papyrus-edge);
}

.profile-header i {
  font-size: 1.8rem;
  color: var(--papyrus-text);
}

.profile-header h1 {
  margin: 0;
  font-size: 1.8rem;
  font-family: "Cinzel", serif;
  color: var(--papyrus-text);
}

.profile-section {
  position: relative;
  isolation: isolate;
  margin-bottom: 28px;
  padding: 0;
}

.profile-section-card {
  position: relative;
  isolation: isolate;
  background: var(--panel-texture-url) center/cover, var(--panel-bg);
  border: 1.5px solid var(--resource-panel-border);
  border-radius: 12px;
  padding: 15px;
  margin-bottom: 15px;
  box-shadow: 0 3px 12px rgba(0, 0, 0, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

.profile-section-card::before,
.checkbox-label::before,
.game-card::before {
  content: '';
  position: absolute;
  inset: 0;
  background: var(--dirt-texture-url) repeat;
  opacity: var(--dirt-opacity, 0.1);
  pointer-events: none;
  z-index: -1;
}

.profile-section::before,
.profile-header::before {
  content: '';
  position: absolute;
  inset: 0;
  background: var(--dirt-texture-url) repeat;
  opacity: 0.5;
  pointer-events: none;
  z-index: -1;
}

.section-title {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 15px;
  font-size: 1.05rem;
  font-weight: 700;
  font-family: "Cinzel", serif;
  letter-spacing: 0.4px;
  color: var(--papyrus-text);
}

.section-title i {
  color: var(--papyrus-text);
  font-size: 1.1rem;
}

.form-group {
  display: flex;
  flex-direction: column;
}

.form-group label {
  display: block;
  margin-bottom: 8px;
  font-weight: 600;
  font-family: "Cinzel", serif;
  font-size: 0.88rem;
  letter-spacing: 0.3px;
  color: var(--papyrus-text);
}

.form-group input,
.form-group textarea {
  padding: 10px 12px;
  border: 1px solid var(--resource-panel-border, rgba(255,255,255,0.15));
  border-radius: 6px;
  background: rgba(0, 0, 0, 0.25);
  color: var(--text);
  font-size: 0.95rem;
  transition: all 0.2s ease;
}

.form-group input:focus,
.form-group textarea:focus {
  outline: none;
  border-color: var(--papyrus-text, #c8a96e);
  box-shadow: 0 0 0 3px rgba(200, 169, 110, 0.15);
}

.form-hint {
  margin-top: 5px;
  font-size: 0.85rem;
  color: var(--number);
  font-weight: 400;
}

/* Checkbox Group */
.checkbox-group {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.checkbox-label {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  cursor: pointer;
  padding: 12px;
  border-radius: 2px;
  position: relative;
  isolation: isolate;
  background: var(--surface-subtle);
  border: 1px solid var(--surface-border);
  transition: background 0.2s ease, border-color 0.2s ease;
}

.checkbox-label:hover {
  background: var(--surface-hover);
  border-color: var(--surface-border-hover);
}

.checkbox-label input[type="checkbox"] {
  margin-top: 2px;
  cursor: pointer;
  accent-color: var(--primary-bg);
  width: 18px;
  height: 18px;
  flex-shrink: 0;
}

.checkbox-label > div {
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.checkbox-text {
  font-weight: 600;
  color: var(--text);
}

.checkbox-hint {
  font-size: 0.85rem;
  color: var(--number);
  font-weight: 400;
}

/* A setting that is announced but not wired up yet: readable, clearly inert,
   and not hoverable so it never looks like it failed to respond to a click. */
.checkbox-group.is-disabled .checkbox-label {
  cursor: default;
  opacity: 0.55;
}

.checkbox-group.is-disabled .checkbox-label:hover {
  background: var(--surface-subtle);
  border-color: var(--surface-border);
}

.checkbox-group.is-disabled .checkbox-label input[type="checkbox"] {
  cursor: default;
}

/* Volume row, sitting under the switch it belongs to. The group's 12px gap
   would float it away from its own switch, so the pair is joined into one
   card: the label loses its bottom radius, the row loses its top border. */
.checkbox-group:has(.volume-row) {
  gap: 0;
}

.checkbox-group:has(.volume-row) .checkbox-label {
  border-radius: 2px 2px 0 0;
}

.volume-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px 12px 40px;
  margin-top: -6px;
  background: var(--surface-subtle);
  border: 1px solid var(--surface-border);
  border-top: none;
  border-radius: 0 0 2px 2px;
}

.volume-icon {
  color: var(--number);
  font-size: 0.85rem;
  flex-shrink: 0;
}

.volume-slider {
  flex: 1;
  min-width: 0;
  accent-color: var(--primary-bg);
  cursor: pointer;
}

.volume-value {
  font-size: 0.8rem;
  color: var(--number);
  font-variant-numeric: tabular-nums;
  min-width: 3.2em;
  text-align: right;
  flex-shrink: 0;
}

.settings-soon-badge {
  display: inline-block;
  margin-left: 8px;
  padding: 2px 7px;
  border-radius: 999px;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  vertical-align: middle;
  color: var(--number);
  background: var(--surface-hover);
  border: 1px solid var(--surface-border);
}

/* Game Cards */
.games-list {
  list-style: none;
  padding: 0;
  margin: 0;
  max-height: 300px;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.game-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 15px;
  position: relative;
  isolation: isolate;
  background: var(--panel-texture-url) center/cover, var(--panel-bg);
  border: 1.5px solid var(--resource-panel-border);
  border-radius: 12px;
  transition: box-shadow 0.2s ease, transform 0.2s ease;
  box-shadow: 0 3px 12px rgba(0, 0, 0, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

.game-card:hover {
  transform: translateX(2px);
  box-shadow: 0 4px 18px rgba(0, 0, 0, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.12);
}

.game-info {
  display: flex;
  flex-direction: column;
  gap: 3px;
  flex: 1;
  min-width: 0;
}

.game-info .room-name {
  font-weight: 600;
  color: var(--primary-bg);
  text-decoration: none;
  cursor: pointer;
  transition: opacity 0.2s ease;
}

.game-info .room-name:hover {
  opacity: 0.8;
}

.game-info .opponent {
  font-size: 0.9rem;
  color: var(--text);
  opacity: 0.8;
}

.game-score {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 15px;
  font-weight: 700;
  font-size: 1.1rem;
  color: var(--primary-bg);
  min-width: 80px;
  text-align: center;
}

.game-actions {
  display: flex;
  gap: 8px;
  flex-shrink: 0;
}

.game-actions button {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border: none;
  border-radius: 6px;
  background: transparent;
  cursor: pointer;
  transition: all 0.2s ease;
  color: var(--text);
}

.game-actions .editGame {
  color: var(--text);
}

.game-actions .editGame:hover {
  background: rgba(69, 123, 157, 0.15);
}

.game-actions .deleteGame {
  color: #e63946;
}

.game-actions .deleteGame:hover {
  background: rgba(230, 57, 70, 0.15);
}

.game-actions button i {
  font-size: 1rem;
}

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

.empty-state i {
  font-size: 3rem;
  margin-bottom: 15px;
  opacity: 0.5;
}

.empty-state p {
  margin: 0;
  font-size: 1rem;
}

/* Form Actions */
.form-actions {
  display: flex;
  gap: 10px;
  margin-top: 30px;
  padding-top: 20px;
  border-top: 1px solid var(--papyrus-edge);
}

.form-actions button {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 12px 20px;
  border-radius: 2px;
  font-weight: 700;
  font-family: "Cinzel", serif;
  font-size: 0.88rem;
  letter-spacing: 0.5px;
  cursor: pointer;
  transition: all 0.2s ease;
  white-space: nowrap;
}

/* Amber/gold — confirm action */
.profile-btn-save {
  background: linear-gradient(to bottom, #d4841c 0%, #a85f08 50%, #5a2e00 100%);
  border: 2px solid #2a1a0a;
  color: #fff5d6;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.7);
  box-shadow:
    inset 0 1px 0 rgba(255, 200, 120, 0.22),
    inset 0 -3px 6px rgba(0, 0, 0, 0.5),
    0 0 0 1px #0a0500,
    0 4px 12px rgba(0, 0, 0, 0.4);
}

.profile-btn-save:hover {
  background: linear-gradient(to bottom, #e8941e 0%, #c07010 50%, #6a3500 100%);
  transform: translateY(-2px);
  box-shadow:
    inset 0 1px 0 rgba(255, 210, 130, 0.3),
    inset 0 -3px 6px rgba(0, 0, 0, 0.4),
    0 0 0 1px #1a0800,
    0 6px 16px rgba(180, 100, 20, 0.5);
}

.profile-btn-save:active {
  transform: translateY(0);
  background: linear-gradient(to bottom, #a86010 0%, #804808 50%, #401800 100%);
}

/* Dark iron — dismiss */
.profile-btn-close {
  background: linear-gradient(to bottom, #3a3028 0%, #2a2018 50%, #1a1008 100%);
  border: 2px solid #504838;
  color: #c8b898;
  text-shadow: 0 1px 1px rgba(0, 0, 0, 0.6);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.07),
    inset 0 -2px 5px rgba(0, 0, 0, 0.5),
    0 4px 10px rgba(0, 0, 0, 0.4);
}

.profile-btn-close:hover {
  background: linear-gradient(to bottom, #4a4038 0%, #3a3028 50%, #2a2010 100%);
  border-color: #706850;
  transform: translateY(-2px);
}

/* Logout / secondary action */
.profile-btn-logout {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  margin-top: 12px;
  padding: 10px 16px;
  background: linear-gradient(to bottom, #2a2018 0%, #1a1008 100%);
  border: 1px solid #4a4030;
  border-radius: 2px;
  color: #c8b898;
  font-family: "Cinzel", serif;
  font-size: 0.88rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.15s ease;
  text-shadow: 0 1px 1px rgba(0, 0, 0, 0.5);
}

.profile-btn-logout:hover {
  background: linear-gradient(to bottom, #3a3028 0%, #2a2018 100%);
  border-color: #6a6050;
}

.form-result {
  margin-top: 15px;
  padding: 12px;
  border-radius: 6px;
  text-align: center;
  font-weight: 500;
}

.form-result.success {
  background: rgba(6, 168, 125, 0.1);
  color: #06a77d;
}

.form-result.error {
  background: rgba(139, 28, 28, 0.12);
  color: #c03030;
}

/* Profile Modal Responsive */
@media (max-width: 768px) {
  .profile-modal {
    width: 95%;
    max-width: 100%;
  }

  .profile-header {
    margin-bottom: 20px;
    padding-bottom: 15px;
  }

  .profile-header h1 {
    font-size: 1.4rem;
  }

  .form-actions {
    flex-direction: column;
    gap: 8px;
  }

  .form-actions button {
    width: 100%;
  }

  .game-card {
    flex-wrap: wrap;
    gap: 8px;
  }

  .game-info {
    flex-basis: 100%;
  }

  .game-score {
    flex: 1;
    min-width: 60px;
  }

  .game-actions {
    flex-basis: 100%;
    justify-content: flex-end;
  }
}

.red {
  color: red;
}

.cloudbg2 {
  background-color: var(--cloud-bg2);
}

.info-bar-above-game {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

/* ---- Retro fighter HP bars ---- */

.player-hpbar-wrap {
  display: flex;
  flex-direction: column;
  gap: 3px;
  flex: 1;
  min-width: 120px;
  max-width: 220px;
}

.player-hpbar-name {
  display: flex;
  align-items: center;
  gap: 4px;
  font-family: "Cinzel", serif;
  font-size: 0.68rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.player-hpbar-bars {
  display: flex;
  flex-direction: column;
  gap: 2px;
  width: 100%;
}

.player-hpbar-track {
  position: relative;
  background: rgba(0, 0, 0, 0.65);
  border-radius: 1px;
  overflow: hidden;
  box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.7);
}

.player-hpbar-castle-track {
  height: 14px;
}

.player-hpbar-wall-track {
  height: 7px;
}

.player-hpbar-fill {
  height: 100%;
  transition: width 0.3s ease;
  border-radius: 1px;
}

.player-hpbar-castle-fill.hp-high {
  background: linear-gradient(to bottom, #5fdb6a 0%, #2ecc71 50%, #27ae60 100%);
  box-shadow: 0 0 4px rgba(46, 204, 113, 0.5);
}

.player-hpbar-castle-fill.hp-mid {
  background: linear-gradient(to bottom, #f0d060 0%, #e0a020 50%, #c88010 100%);
  box-shadow: 0 0 4px rgba(224, 160, 32, 0.5);
}

.player-hpbar-castle-fill.hp-low {
  background: linear-gradient(to bottom, #f06060 0%, #e03030 50%, #b02020 100%);
  box-shadow: 0 0 4px rgba(224, 48, 48, 0.5);
  animation: hpLowPulse 0.9s ease-in-out infinite;
}

@keyframes hpLowPulse {
  0%, 100% { filter: brightness(1); }
  50% { filter: brightness(1.3); }
}

.player-hpbar-wall-fill {
  background: linear-gradient(to bottom, #a0b4c8 0%, #7090a8 50%, #507090 100%);
}

.player-hpbar-fill.hp-overflow {
  animation: hpOverflowGlow 1.1s ease-in-out infinite;
}

@keyframes hpOverflowGlow {
  0%, 100% { box-shadow: 0 0 4px 1px rgba(255, 215, 0, 0.5), inset 0 0 6px rgba(255, 215, 0, 0.2); filter: brightness(1.05); }
  50% { box-shadow: 0 0 12px 3px rgba(255, 215, 0, 0.9), inset 0 0 10px rgba(255, 215, 0, 0.35); filter: brightness(1.25); }
}

.player-hpbar-val {
  position: absolute;
  top: 50%;
  right: 4px;
  transform: translateY(-50%);
  font-size: 0.6rem;
  font-weight: 700;
  font-family: "Cinzel", serif;
  color: rgba(255, 255, 255, 0.85);
  line-height: 1;
  pointer-events: none;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.8);
}

.player-hpbar-wall-val {
  font-size: 0.55rem;
}

/* Blue player: name right-aligned, bars fill right-to-left (P2 fighter style) */
.player-hpbar-blue .player-hpbar-name {
  justify-content: flex-end;
}

.player-hpbar-blue .player-hpbar-track {
  display: flex;
  justify-content: flex-end;
}

@media (max-width: 768px) {
  .player-hpbar-wrap {
    min-width: 0;
    max-width: 30vw;
  }
}

.skip-tutorial-btn {
  padding: 10px 16px;
  background: rgba(255, 255, 255, 0.15);
  border: 2px solid rgba(255, 255, 255, 0.3);
  color: white;
  font-weight: 600;
  border-radius: 6px;
  cursor: pointer;
  font-size: 0.95rem;
  transition: all 0.2s ease;
}

.skip-tutorial-btn:hover {
  background: rgba(255, 255, 255, 0.25);
  border-color: rgba(255, 255, 255, 0.5);
}

.skip-tutorial-btn:active {
  transform: scale(0.98);
}

/* Unified resource panel — one cohesive container instead of 6 individual pills */
.main-resources-group {
  display: flex;
  flex-direction: column;
  background: var(--panel-texture-url) center/cover, var(--panel-bg);
  border: 1.5px solid var(--resource-panel-border);
  border-radius: 12px;
  padding: 4px 6px;
  box-shadow: 0 3px 12px rgba(0, 0, 0, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

.main-resources-group .icon-number {
  background-color: transparent;
  border-radius: 0;
  gap: 4px;
}

/* Fixed two-column grid: left group always left half, right group always right half.
   This prevents layout jiggle when numbers change from 1 to 2 digits. */
.main-resources-group .resource-stats {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: center;
}

/* Right group: push content to the right edge of its column */
.main-resources-group .resource-stats .icon-number:last-child {
  justify-content: flex-end;
}

/* Secondary (income) icon — smaller than the primary */
.main-resources-group .resource-stats .icon-number:last-child .icon-img {
  width: 16px;
}

/* Remove horizontal padding from numbers — the pill bg is gone, padding just adds dead space */
.main-resources-group .number {
  padding-left: 0;
  padding-right: 0;
}

.main-resources-group .resource-stats + .resource-stats {
  border-top: 1px solid rgba(128, 128, 128, 0.2);
}

.resource-stats {
  display: flex;
  padding: 5px 0;
  position: relative;
}

.resource-protected {
  border-radius: 10px;
}

/* Primary resource count — larger and heavier, the main read */
.resource-value {
  font-size: 1.35em;
  font-weight: 800;
}

/* Income value — secondary read, smaller and dimmed */
.resource-inc-value {
  font-size: 1.2em;
  opacity: 0.6;
}

/* Outline on resource numbers — theme-aware via CSS variables */
.number span {
  -webkit-text-stroke: var(--stat-stroke);
  paint-order: stroke fill;
}

.number span.stat-pos {
  color: var(--stat-color-pos);
  -webkit-text-stroke: var(--stat-stroke-pos);
}

.number span.stat-neg {
  color: var(--stat-color-neg);
  -webkit-text-stroke: var(--stat-stroke-neg);
}

.icon-number.missing-cost-highlight {
  background: rgba(127, 29, 29, 0.22);
  border-radius: 12px;
  box-shadow:
    inset 0 0 0 1px rgba(255, 163, 163, 0.25),
    0 0 12px rgba(220, 38, 38, 0.2);
  padding: 2px 6px;
  margin: -2px -6px;
}

.icon-number.missing-cost-highlight .icon-img {
  filter: drop-shadow(0 0 6px rgba(220, 38, 38, 0.45));
}

.icon-number.missing-cost-highlight .resource-value,
.icon-number.missing-cost-highlight .resource-inc-value,
.resource-value.missing-cost-highlight,
.wall-image-hp.missing-cost-highlight {
  color: #ff7b7b;
  -webkit-text-stroke: 0.6px rgba(90, 0, 0, 0.9);
  text-shadow: 0 0 10px rgba(220, 38, 38, 0.5);
}

.wall-image-hp.missing-cost-highlight {
  background: rgba(127, 29, 29, 0.22);
  border-radius: 999px;
  padding: 0 6px;
}

.resource-protected-shield {
  position: absolute;
  top: -6px;
  left: -10px;
  width: 22px;
  height: 22px;
  filter: drop-shadow(0 0 8px rgba(69, 123, 157, 0.6));
  opacity: 0.95;
  pointer-events: none;
}

.resource-buffed .icon {
  box-shadow: 0 0 10px rgba(255, 215, 0, 0.6);
}

.resource-buffed-build .icon {
  box-shadow:
    0 0 10px rgba(188, 108, 37, 0.6),
    0 0 18px rgba(188, 108, 37, 0.45);
}

.resource-buffed-attack .icon {
  box-shadow:
    0 0 10px rgba(230, 57, 70, 0.7),
    0 0 18px rgba(230, 57, 70, 0.5);
}

.resource-buffed-magic .icon {
  box-shadow:
    0 0 10px rgba(157, 78, 221, 0.7),
    0 0 18px rgba(157, 78, 221, 0.5);
}

.resource-buff-badge {
  position: absolute;
  top: -8px;
  right: -10px;
  padding: 2px 6px;
  border-radius: 999px;
  font-size: 0.65rem;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  background: #ffd54f;
  color: #4a3400;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
}

.resource-blocked-badge {
  position: absolute;
  top: -8px;
  left: -10px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: rgba(60, 60, 60, 0.9);
  color: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 0.65rem;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.35);
}

.shield-magic-defense {
  position: absolute;
  top: 50%;
  /* Center vertically */
  left: 50%;
  /* Center horizontally */
  transform: translate(-50%, -50%);
  /* Adjust position to center the image fully */
  width: 40%;
  /* Adjust size as needed */
  height: auto;
  z-index: 10;
  /* Ensure it appears on top of other content */
}

.shield-magic-defense-glow {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 40%;
  height: auto;
  z-index: 9;
  filter: blur(10px) brightness(1.5);
}

/* Dispel temporarily preserves the shield across the htmx board swap, then
   cancels it with an anti-magic seal, cracks, and an inward collapse. */
.magic-defense-dispel-overlay {
  position: fixed;
  /* Academy spotlights hoist the castle to 10011; keep the preserved shield
     above that castle so it does not disappear behind its own renderer. */
  z-index: 10015;
  pointer-events: none;
  transform-origin: center;
  isolation: isolate;
}

.magic-defense-dispel-core,
.magic-defense-dispel-glow {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: fill;
  pointer-events: none;
}

.magic-defense-dispel-core {
  z-index: 2;
  filter: drop-shadow(0 0 5px rgba(116, 234, 255, 0.75));
}

.magic-defense-dispel-glow {
  z-index: 1;
  opacity: 0.82;
  filter: blur(10px) brightness(1.55) saturate(1.2);
}

.magic-defense-dispel-cracks,
.magic-defense-dispel-fragments {
  position: absolute;
  inset: 0;
  z-index: 4;
  overflow: visible;
  pointer-events: none;
}

.magic-defense-dispel-cracks span {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 47%;
  height: 2px;
  border-radius: 999px;
  opacity: 0;
  transform:
    rotate(var(--dispel-crack-angle))
    scaleX(0);
  transform-origin: left center;
  background: linear-gradient(
    90deg,
    rgba(255, 255, 255, 1),
    rgba(207, 130, 255, 0.95) 55%,
    transparent
  );
  box-shadow:
    0 0 4px rgba(255, 255, 255, 0.95),
    0 0 9px rgba(191, 78, 255, 0.9);
}

.magic-defense-dispel-fragments span {
  position: absolute;
  left: var(--dispel-fragment-x);
  top: var(--dispel-fragment-y);
  width: clamp(4px, 10%, 12px);
  height: clamp(5px, 13%, 15px);
  opacity: 0;
  clip-path: polygon(12% 0, 100% 25%, 67% 100%, 0 70%);
  background: linear-gradient(135deg, #ffffff 0%, #7cecff 38%, #c257ff 100%);
  box-shadow:
    0 0 5px rgba(124, 236, 255, 0.95),
    0 0 9px rgba(194, 87, 255, 0.75);
}

.magic-defense-dispel-caption {
  position: absolute;
  z-index: 6;
  left: 50%;
  top: 83%;
  padding: clamp(2px, 4%, 5px) clamp(6px, 10%, 12px);
  border: 2px solid rgba(255, 255, 255, 0.95);
  border-radius: 4px;
  opacity: 0;
  color: #fff;
  background: linear-gradient(180deg, #b94cff, #6421a9);
  box-shadow:
    2px 3px 0 rgba(39, 9, 62, 0.9),
    0 0 14px rgba(197, 91, 255, 0.85);
  font-family: "Arial Black", "Impact", system-ui, sans-serif;
  font-size: clamp(0.48rem, 1.5vw, 0.9rem);
  font-weight: 900;
  line-height: 1;
  letter-spacing: 0.04em;
  white-space: nowrap;
  transform: translate(-50%, -50%) rotate(-5deg) scale(0.2);
}

.magic-defense-dispel-seal {
  position: fixed;
  z-index: 10021;
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  border: 4px solid rgba(233, 174, 255, 0.95);
  border-radius: 50%;
  opacity: 0.3;
  color: #fff;
  background:
    radial-gradient(circle, rgba(164, 55, 232, 0.92), rgba(73, 17, 119, 0.96));
  box-shadow:
    0 0 8px rgba(255, 255, 255, 0.9),
    0 0 20px rgba(195, 81, 255, 0.95),
    0 0 34px rgba(109, 37, 198, 0.8);
  pointer-events: none;
  transform: translate(-50%, -50%) rotate(-80deg) scale(0.45);
  transition:
    left 0.31s cubic-bezier(0.55, 0.06, 0.85, 0.26),
    top 0.31s cubic-bezier(0.55, 0.06, 0.85, 0.26),
    transform 0.31s ease-in,
    opacity 0.12s ease;
}

.magic-defense-dispel-seal i {
  font-size: 1.45rem;
  text-shadow: 0 0 7px rgba(255, 255, 255, 0.9);
}

.magic-defense-dispel-seal-traveling {
  opacity: 1;
  transform: translate(-50%, -50%) rotate(160deg) scale(1.08);
}

.magic-defense-dispel-seal-impact {
  transition: none;
  animation: magic-defense-dispel-seal-impact 0.28s ease-out forwards;
}

.magic-defense-dispel-hit .magic-defense-dispel-core {
  animation: magic-defense-dispel-core 0.72s cubic-bezier(0.3, 0.8, 0.45, 1) forwards;
}

.magic-defense-dispel-hit .magic-defense-dispel-glow {
  animation: magic-defense-dispel-glow 0.66s ease-out forwards;
}

.magic-defense-dispel-hit .magic-defense-dispel-cracks span {
  animation: magic-defense-dispel-crack 0.38s ease-out forwards;
}

.magic-defense-dispel-hit .magic-defense-dispel-fragments span {
  animation: magic-defense-dispel-fragment 0.58s ease-out
    var(--dispel-fragment-delay) forwards;
}

.magic-defense-dispel-hit .magic-defense-dispel-caption {
  animation: magic-defense-dispel-caption 0.78s cubic-bezier(0.18, 1.45, 0.4, 1)
    forwards;
}

@keyframes magic-defense-dispel-seal-impact {
  0% {
    opacity: 1;
    transform: translate(-50%, -50%) rotate(160deg) scale(1.08);
  }
  100% {
    opacity: 0;
    transform: translate(-50%, -50%) rotate(220deg) scale(2.3);
  }
}

@keyframes magic-defense-dispel-core {
  0% {
    opacity: 1;
    transform: scale(1);
    filter: brightness(1) saturate(1.1)
      drop-shadow(0 0 5px rgba(116, 234, 255, 0.75));
  }
  13% {
    opacity: 1;
    transform: scale(1.08);
    filter: brightness(3.2) saturate(0)
      drop-shadow(0 0 14px rgba(255, 255, 255, 1));
  }
  36% {
    opacity: 0.95;
    transform: scale(1.02);
    filter: brightness(1.5) saturate(1.5) hue-rotate(55deg)
      drop-shadow(0 0 10px rgba(194, 87, 255, 0.95));
  }
  100% {
    opacity: 0;
    transform: scale(0.08) rotate(-18deg);
    filter: brightness(2) saturate(1.8) hue-rotate(70deg);
  }
}

@keyframes magic-defense-dispel-glow {
  0% {
    opacity: 0.9;
    transform: scale(1);
  }
  20% {
    opacity: 1;
    transform: scale(1.28);
    filter: blur(13px) brightness(2.6) hue-rotate(55deg);
  }
  100% {
    opacity: 0;
    transform: scale(0.05);
    filter: blur(2px) brightness(2) hue-rotate(75deg);
  }
}

@keyframes magic-defense-dispel-crack {
  0% {
    opacity: 0;
    transform: rotate(var(--dispel-crack-angle)) scaleX(0);
  }
  28% {
    opacity: 1;
  }
  68% {
    opacity: 1;
    transform: rotate(var(--dispel-crack-angle)) scaleX(1);
  }
  100% {
    opacity: 0;
    transform: rotate(var(--dispel-crack-angle)) scaleX(0.5);
  }
}

@keyframes magic-defense-dispel-fragment {
  0% {
    opacity: 0;
    transform: translate(-50%, -50%) scale(0.2);
  }
  18% {
    opacity: 1;
  }
  72% {
    opacity: 0.95;
    transform:
      translate(
        calc(-50% + var(--dispel-fragment-dx)),
        calc(-50% + var(--dispel-fragment-dy))
      )
      rotate(var(--dispel-fragment-rotate))
      scale(1);
  }
  100% {
    opacity: 0;
    transform: translate(-50%, -50%) rotate(0) scale(0.05);
  }
}

@keyframes magic-defense-dispel-caption {
  0% {
    opacity: 0;
    transform: translate(-50%, -50%) rotate(-5deg) scale(0.2);
  }
  24% {
    opacity: 1;
    transform: translate(-50%, -50%) rotate(-5deg) scale(1.18);
  }
  43% {
    opacity: 1;
    transform: translate(-50%, -50%) rotate(-5deg) scale(0.96);
  }
  72% {
    opacity: 1;
    transform: translate(-50%, -62%) rotate(-5deg) scale(1);
  }
  100% {
    opacity: 0;
    transform: translate(-50%, -105%) rotate(-5deg) scale(0.9);
  }
}

/* Other Dispel-removable buffs live on the resource panel rather than on the
   castle art. Preserve their outgoing UI across the htmx swap, then stamp it
   with the same anti-magic seal and implode it into effect-coloured sparks. */
.effect-dispel-overlay {
  --dispel-effect-color: #d58cff;
  --dispel-effect-accent: #7025b5;
  --dispel-caption-offset: 0px;
  position: fixed;
  z-index: 10016;
  pointer-events: none;
  isolation: isolate;
  transform-origin: center;
}

.effect-dispel-preserved,
.effect-dispel-ring,
.effect-dispel-sparks {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.effect-dispel-preserved {
  z-index: 2;
  filter:
    drop-shadow(0 0 5px var(--dispel-effect-color))
    drop-shadow(0 0 10px color-mix(in srgb, var(--dispel-effect-color) 65%, transparent));
}

.effect-dispel-preserved-item {
  position: absolute;
  overflow: visible;
}

.effect-dispel-clone-node.resource-stats {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: center;
  width: 100%;
  height: 100%;
  box-sizing: border-box;
  padding: 5px 4px;
  border: 1px solid color-mix(in srgb, var(--dispel-effect-color) 45%, transparent);
  border-radius: 8px;
  background: var(--panel-texture-url) center/cover, var(--panel-bg);
}

.effect-dispel-clone-node.resource-protected-shield,
.effect-dispel-clone-node.resource-blocked-badge {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.effect-dispel-token {
  position: absolute;
  left: 50%;
  top: 50%;
  display: grid;
  place-items: center;
  width: clamp(34px, 48%, 62px);
  aspect-ratio: 1;
  border: 2px solid var(--dispel-effect-color);
  border-radius: 50%;
  color: #fff;
  background:
    radial-gradient(
      circle,
      var(--dispel-effect-color),
      var(--dispel-effect-accent)
    );
  box-shadow:
    0 0 12px var(--dispel-effect-color),
    inset 0 0 10px rgba(255, 255, 255, 0.45);
  transform: translate(-50%, -50%);
}

.effect-dispel-ring {
  z-index: 3;
  left: 50%;
  top: 50%;
  right: auto;
  bottom: auto;
  width: max(38px, min(92px, 92%));
  aspect-ratio: 1;
  border: 3px solid var(--dispel-effect-color);
  border-radius: 50%;
  opacity: 0;
  box-shadow:
    0 0 9px #fff,
    0 0 18px var(--dispel-effect-color),
    inset 0 0 12px var(--dispel-effect-accent);
  transform: translate(-50%, -50%) scale(0.25);
}

.effect-dispel-sparks {
  z-index: 4;
  left: 50%;
  top: 50%;
  right: auto;
  bottom: auto;
  width: 1px;
  height: 1px;
  overflow: visible;
}

.effect-dispel-sparks span {
  position: absolute;
  left: 0;
  top: 0;
  width: 5px;
  height: clamp(18px, 45px, 55px);
  border-radius: 999px;
  opacity: 0;
  background:
    linear-gradient(180deg, #fff, var(--dispel-effect-color), transparent);
  box-shadow: 0 0 8px var(--dispel-effect-color);
  transform:
    rotate(var(--dispel-spark-angle))
    translateY(-10px)
    scaleY(0);
  transform-origin: center bottom;
}

.effect-dispel-caption {
  position: absolute;
  z-index: 6;
  left: 50%;
  top: calc(100% + 10px + var(--dispel-caption-offset));
  max-width: min(180px, 55vw);
  padding: 3px 8px;
  border: 2px solid rgba(255, 255, 255, 0.95);
  border-radius: 4px;
  opacity: 0;
  color: #fff;
  background:
    linear-gradient(
      180deg,
      var(--dispel-effect-color),
      var(--dispel-effect-accent)
    );
  box-shadow:
    2px 3px 0 color-mix(in srgb, var(--dispel-effect-accent) 72%, #170723),
    0 0 14px var(--dispel-effect-color);
  font-family: "Arial Black", "Impact", system-ui, sans-serif;
  font-size: clamp(0.5rem, 1.4vw, 0.8rem);
  font-weight: 900;
  line-height: 1;
  letter-spacing: 0.035em;
  text-align: center;
  white-space: nowrap;
  transform: translate(-50%, -50%) rotate(-4deg) scale(0.2);
}

.effect-dispel-hit .effect-dispel-preserved {
  animation: effect-dispel-preserved 0.72s cubic-bezier(0.3, 0.8, 0.45, 1)
    forwards;
}

.effect-dispel-hit .effect-dispel-ring {
  animation: effect-dispel-ring 0.58s ease-out forwards;
}

.effect-dispel-hit .effect-dispel-sparks span {
  animation: effect-dispel-spark 0.55s ease-out
    var(--dispel-spark-delay) forwards;
}

.effect-dispel-hit .effect-dispel-caption {
  animation: magic-defense-dispel-caption 0.8s
    cubic-bezier(0.18, 1.45, 0.4, 1) forwards;
}

.dispel-effect-batch .effect-dispel-caption,
.dispel-effect-batch .magic-defense-dispel-caption {
  display: none;
}

.effect-dispel-batch-caption {
  position: fixed;
  z-index: 10025;
  padding: 7px 14px;
  border: 2px solid rgba(255, 255, 255, 0.96);
  border-radius: 5px;
  color: #fff;
  background: linear-gradient(180deg, #c45cff, #5a1a9b);
  box-shadow:
    3px 4px 0 rgba(31, 7, 50, 0.9),
    0 0 18px rgba(196, 92, 255, 0.9);
  font-family: "Arial Black", "Impact", system-ui, sans-serif;
  font-size: clamp(0.68rem, 1.8vw, 1rem);
  font-weight: 900;
  line-height: 1;
  letter-spacing: 0.045em;
  white-space: nowrap;
  pointer-events: none;
  animation: effect-dispel-batch-caption 1.45s
    cubic-bezier(0.18, 1.3, 0.4, 1) 0.25s both;
}

@keyframes effect-dispel-batch-caption {
  0% {
    opacity: 0;
    transform: translate(-50%, -50%) rotate(-3deg) scale(0.2);
  }
  20% {
    opacity: 1;
    transform: translate(-50%, -50%) rotate(-3deg) scale(1.16);
  }
  36% {
    opacity: 1;
    transform: translate(-50%, -50%) rotate(-3deg) scale(0.98);
  }
  74% {
    opacity: 1;
    transform: translate(-50%, -62%) rotate(-3deg) scale(1);
  }
  100% {
    opacity: 0;
    transform: translate(-50%, -120%) rotate(-3deg) scale(0.92);
  }
}

@keyframes effect-dispel-preserved {
  0% {
    opacity: 1;
    transform: scale(1);
    filter:
      brightness(1)
      drop-shadow(0 0 5px var(--dispel-effect-color));
  }
  14% {
    opacity: 1;
    transform: scale(1.1);
    filter:
      brightness(2.8)
      saturate(0)
      drop-shadow(0 0 15px #fff);
  }
  38% {
    opacity: 0.95;
    transform: scale(1.02) rotate(-2deg);
    filter:
      brightness(1.7)
      saturate(1.8)
      drop-shadow(0 0 12px var(--dispel-effect-color));
  }
  100% {
    opacity: 0;
    transform: scale(0.08) rotate(12deg);
    filter:
      brightness(2.2)
      saturate(2);
  }
}

@keyframes effect-dispel-ring {
  0% {
    opacity: 0;
    transform: translate(-50%, -50%) scale(0.25);
  }
  22% {
    opacity: 1;
  }
  68% {
    opacity: 0.9;
    transform: translate(-50%, -50%) scale(1.1);
  }
  100% {
    opacity: 0;
    transform: translate(-50%, -50%) scale(0.03);
  }
}

@keyframes effect-dispel-spark {
  0% {
    opacity: 0;
    transform:
      rotate(var(--dispel-spark-angle))
      translateY(-9px)
      scaleY(0);
  }
  28% {
    opacity: 1;
  }
  70% {
    opacity: 0.9;
    transform:
      rotate(var(--dispel-spark-angle))
      translateY(-32px)
      scaleY(1);
  }
  100% {
    opacity: 0;
    transform:
      rotate(var(--dispel-spark-angle))
      translateY(-48px)
      scaleY(0.15);
  }
}

.magic-defense-dispel-reduced {
  transition: opacity 0.25s ease;
  opacity: 0;
}

.effect-dispel-reduced {
  transition: opacity 0.25s ease;
  opacity: 0;
}

@media (prefers-reduced-motion: reduce) {
  .magic-defense-dispel-seal,
  .magic-defense-dispel-cracks,
  .magic-defense-dispel-fragments,
  .magic-defense-dispel-caption,
  .effect-dispel-ring,
  .effect-dispel-sparks,
  .effect-dispel-caption,
  .effect-dispel-batch-caption {
    display: none;
  }
}

.image-container,
.castle-visual-group,
.castle-and-wall {
  overflow: visible !important;
}

.castle-decoration {
  position: absolute;
  pointer-events: none;
  z-index: 3;
  max-width: 40%;
  max-height: 40%;
}

.castle-and-wall-stacked {
  display: flex !important;
  flex-direction: row !important;
  align-items: flex-end;
  gap: 10px;
  position: relative;
}

/* Blue side: mirror the entire castle/wall layout horizontally. Wall slides
   in from the castle's left, HP sits on the castle's left, and the wall
   shell overlaps the castle from the right side (mirror of red's margin). */
.castle-and-wall-stacked-blue {
  flex-direction: row-reverse !important;
}

.castle-and-wall-stacked-blue .stacked-wall-shell {
  left: auto;
  right: calc(100% - 48px);
}

.castle-and-wall-stacked-blue .stacked-wall-column-segmented {
  translate: 0;
}

.castle-and-wall-stacked-blue .castle-image-hp.stacked-castle-hp {
  left: auto;
  right: calc(100% - 40px);
}

.stacked-castle-shell {
  width: 132px;
  order: 1;
  position: relative;
  z-index: 2;
}

.stacked-castle-frame {
  position: relative;
  height: 288px;
  overflow: visible;
}

.stacked-castle-stack {
  position: relative;
  width: 100%;
  height: 100%;
  clip-path: inset(-400px -400px 0 -400px);
}

.stacked-castle-segment {
  position: absolute;
  left: 50%;
  overflow: hidden;
  pointer-events: none;
  transition:
    bottom 0.8s ease-out,
    transform 0.8s ease-out,
    opacity 0.8s ease-out;
}

.stacked-castle-segment img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: bottom;
}

.stacked-castle-segment-base {
  width: 66px;
  height: 46px;
  margin-left: -33px;
  z-index: 6;
}

.stacked-castle-segment-mid {
  width: 37px;
  height: 28px;
  margin-left: -18.5px;
}

.stacked-castle-segment-top {
  width: 48px;
  height: 75px;
  margin-left: -24px;
  z-index: 1;
}

.stacked-castle-segment-mid-1 {
  z-index: 4;
}

.stacked-castle-segment-mid-2 {
  z-index: 3;
}

.stacked-castle-segment-mid-3 {
  z-index: 2;
}

/* War Drummer, standing on the stacked castle's base platform.

   Sits above the base in z-order (the base is z-index 6) so he reads as being
   on it, and offset from centre so the tower growing out of the base is not
   hidden behind him. Same two-frame sprite as the shop and chat, so whatever
   drives the drummer animates him here too. */
.stacked-castle-drummer {
  position: absolute;
  left: 50%;
  width: 18.75px;
  height: 33px;
  margin-left: 6px;
  z-index: 7;
  pointer-events: none;
  transition:
    bottom 0.8s ease-out,
    transform 0.8s ease-out,
    opacity 0.8s ease-out;
}

/* Face the middle of the board from either side. */
.stacked-castle-drummer-blue {
  margin-left: -24.75px;
  transform-origin: center bottom;
}

.stacked-castle-drummer-blue .cwl-drum-frame {
  transform: scaleX(-1);
}

.stacked-castle-drummer .cwl-drum-frame {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: bottom;
  opacity: 0;
}

.stacked-castle-drummer .cwl-drum-frame.on {
  opacity: 1;
}

.stacked-castle-preview-anchor {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.stacked-castle-decoration {
  max-width: 36%;
  max-height: 36%;
}

/* Chained selector raises specificity above mobile.css's single-class
   .castle-image-hp rule so our stacked positioning actually wins. */
.castle-image-hp.stacked-castle-hp {
  /* Tucked next to the top tower segment (top of the castle stack). */
  top: 85px;
  left: calc(100% - 40px);
  right: auto;
  bottom: auto;
  transform: none;
  translate: 0;
  padding: 4px 10px;
  border-radius: 999px;
  background: rgba(22, 16, 12, 0.72);
  z-index: 8;
  font-size: 20px;
}

.stacked-wall-shell {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  width: 140px;
  z-index: 1;
  /* Absolutely positioned so the wall overflows the castle column without
     taking layout space — the opponent's column ignores the wall extension.
     `bottom: 0` keeps the wall aligned to the bottom of the castle column
     on default-sized castles; the desktop media query overrides this with
     a `top:` value tuned for the bigger castle frame. */
  position: absolute;
  bottom: 0;
  left: calc(100% - 48px);
}

.stacked-wall-cap {
  width: 100%;
  height: 10px;
  border-radius: 6px 6px 0 0;
  background:
    linear-gradient(180deg, rgba(214, 196, 163, 0.95), rgba(120, 94, 59, 0.96));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.24);
}

.stacked-wall-column {
  position: relative;
  width: 100%;
  height: 112px;
  overflow: hidden;
  border: 2px solid rgba(91, 70, 43, 0.96);
  border-radius: 4px 4px 10px 10px;
  background:
    linear-gradient(180deg, rgba(49, 39, 27, 0.66), rgba(18, 14, 10, 0.95));
  box-shadow:
    inset 0 0 0 1px rgba(255, 240, 212, 0.08),
    0 6px 12px rgba(0, 0, 0, 0.25);
}

.stacked-wall-fill {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  background-size: auto;
  background-repeat: repeat;
  background-position: bottom;
}

/* Segmented wall (5 wall images, one per 20-point band). Each segment overlays
   the column and reveals via clip-path: odd segments grow from the castle side
   outward, even segments grow from the bottom up. Sized to match the castle
   base proportionally — width tuned for wall5's natural aspect at the castle
   base's effective render scale (~0.0915). */
.stacked-wall-column-segmented {
  width: 100%;
  height: 60px;
  background: none;
  border: none;
  border-radius: 0;
  box-shadow: none;
  /* Clip the sliding segment image to the column so the "not yet emerged"
     portion (which would otherwise extend out the left side or below) stays
     hidden — visible = the portion inside the column bounds. */
  overflow: hidden;
  translate: 0;
}

.stacked-wall-segment {
  position: absolute;
  inset: 0;
  pointer-events: none;
  transition:
    transform 0.8s ease-out,
    opacity 0.4s ease-out;
}

.stacked-wall-segment img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: bottom;
}

.stacked-wall-segment-1 { z-index: 1; }
.stacked-wall-segment-2 { z-index: 2; }
.stacked-wall-segment-3 { z-index: 3; }
.stacked-wall-segment-4 { z-index: 4; }
.stacked-wall-segment-5 { z-index: 5; }

.stacked-wall-fill-main {
  z-index: 2;
  transition: height 0.8s ease-out;
}

.stacked-wall-fill-preview {
  z-index: 1;
  opacity: 0.82;
  box-shadow:
    inset 0 0 0 1px rgba(255, 236, 179, 0.28),
    inset 0 6px 10px rgba(92, 66, 18, 0.16);
}

.stacked-wall-fill-damage {
  z-index: 3;
  opacity: 0.78;
  box-shadow:
    inset 0 0 0 1px rgba(255, 182, 182, 0.26),
    inset 0 -4px 8px rgba(90, 10, 10, 0.18);
}

/* Chained selector raises specificity above mobile.css's single-class
   .wall-image-hp rule so our stacked positioning actually wins. */
.wall-image-hp.stacked-wall-hp {
  position: absolute;
  /* Centered above the wall column, smaller than the castle HP to keep the
     visual hierarchy clear (castle is the primary, wall is secondary). */
  left: 50%;
  right: auto;
  top: -20px;
  bottom: auto;
  transform: translateX(-50%);
  padding: 2px 8px;
  border-radius: 999px;
  background: rgba(22, 16, 12, 0.72);
  white-space: nowrap;
  font-size: 13px;
  z-index: 8;
}

.stacked-shield-glow,
.stacked-shield-core {
  width: 34%;
  /* The stacked castle mass sits in the lower part of the frame, so the
     base `top: 50%` centers the shield too high — drop it down. */
  top: 70%;
}

.castle-renderer-harness-page {
  max-width: 1200px;
  margin: 0 auto;
  padding: 24px 20px 48px;
  min-height: 100vh;
}

.castle-renderer-harness-header h2 {
  margin: 0 0 6px;
}

.castle-renderer-harness-header p {
  margin: 0 0 20px;
  opacity: 0.82;
}

.castle-renderer-harness-controls {
  margin-bottom: 24px;
}

.castle-renderer-harness-panel {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 14px;
  align-items: end;
  padding: 16px 18px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 12px;
  background: rgba(17, 12, 8, 0.55);
}

.castle-renderer-harness-stats {
  display: flex;
  gap: 16px;
  min-width: 100%;
  font-weight: 600;
}

.castle-renderer-harness-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.castle-renderer-harness-field input {
  width: 120px;
  padding: 8px 10px;
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.08);
  color: var(--text);
}

.castle-renderer-harness-actions {
  display: flex;
  gap: 10px;
}

.castle-renderer-harness-board {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  min-height: 72vh;
  padding: 24px 48px 12px;
  gap: 80px;
}

.castle-renderer-harness-board .main-resources-group {
  display: none;
}

.castle-renderer-harness-board .castle-and-resources {
  width: auto !important;
  justify-content: flex-start !important;
  align-items: flex-start !important;
}

.castle-renderer-harness-board .castle-visual-group {
  transform: scale(2.7);
  transform-origin: left bottom;
}


.status-dot {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 14px;
  height: 14px;
  margin-left: 4px;
  background: none;
  border-radius: 0;
}

.status-dot::before {
  font-family: "Font Awesome 6 Free";
  font-weight: 900;
  font-size: 11px;
  content: "\f06d"; /* fire */
}

.status-dot.online::before {
  color: #e8902a;
  filter: drop-shadow(0 0 3px rgba(232, 144, 42, 0.65));
}

.status-dot.offline::before {
  color: rgba(120, 90, 60, 0.35);
  filter: none;
}

.status-dot.away::before {
  color: #d4a817;
  filter: drop-shadow(0 0 3px rgba(212, 168, 23, 0.5));
}

.banner-on-home {
  width: 300px;
  height: 250px;
  margin-right: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  position: relative;
  z-index: 3;
}

.banner-on-home.hidden {
  display: none;
}

.banner-fallback {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 16px;
  padding-top: 36px;
  text-align: center;
  background-color: var(--cloud-bg);
  background-image: var(--dirt-texture-url);
  background-repeat: repeat;
  border: 1px solid var(--surface-border);
  border-radius: 2px;
  position: relative;
  animation: fadeInOut 0.4s ease-in-out;
}

/* Category label tab */
.banner-category-label {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  padding: 4px 10px;
  font-family: "Cinzel", serif;
  font-size: 0.65rem;
  font-weight: 700;
  letter-spacing: 0.8px;
  text-transform: uppercase;
  display: flex;
  align-items: center;
  gap: 5px;
  border-bottom: 1px solid var(--surface-border);
}

/* Game news — amber/gold */
.banner-cat-game .banner-category-label {
  background: linear-gradient(to right, #7a4a00, #5a3000);
  color: #f5d080;
  border-bottom-color: #a06010;
}

/* Indie spotlight / cross-promo — deep teal */
.banner-cat-promo .banner-category-label {
  background: linear-gradient(to right, #0d3d3a, #082828);
  color: #7ee8e0;
  border-bottom-color: #1a6060;
}

/* Community — deep purple */
.banner-cat-community .banner-category-label {
  background: linear-gradient(to right, #2e1a4a, #1a0a30);
  color: #c4a0f0;
  border-bottom-color: #5a3090;
}

/* Image-type banner: full clickable image with optional CTA overlay */
.banner-fallback-image {
  padding: 0;
  gap: 0;
  background: none;
  text-decoration: none;
  color: inherit;
  position: relative;
  cursor: pointer;
}

.fallback-image-full {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 8px;
}

.fallback-image-cta {
  position: absolute;
  bottom: 12px;
  left: 50%;
  transform: translateX(-50%);
  padding: 8px 20px;
  background: rgba(255, 255, 255, 0.95);
  color: #333;
  font-family: "Comfortaa", sans-serif;
  font-size: 0.9rem;
  font-weight: 700;
  border-radius: 6px;
  white-space: nowrap;
  transition: background 0.2s;
}

.banner-fallback-image:hover .fallback-image-cta {
  background: #fff;
}

.fallback-image {
  width: 80px;
  height: 80px;
  object-fit: contain;
  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.2));
}

.fallback-content {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.banner-fallback-stat .fallback-content {
  align-items: center;
  gap: 12px;
}

.fallback-content h3 {
  margin: 0;
  font-size: 1rem;
  font-weight: 700;
  font-family: "Cinzel", serif;
  color: var(--papyrus-text);
}

.fallback-content p {
  margin: 0;
  font-size: 0.85rem;
  line-height: 1.3;
  color: var(--text);
}

.fallback-stat-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  width: 100%;
}

.fallback-stat-value {
  font-family: "Cinzel", serif;
  font-size: 4rem;
  line-height: 0.85;
  font-weight: 700;
  color: #f6f1e4;
  text-shadow: 0 2px 10px rgba(0, 0, 0, 0.28);
}

.fallback-stat-copy {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
  text-align: left;
  max-width: 130px;
}

.fallback-stat-copy strong {
  font-family: "Cinzel", serif;
  font-size: 0.98rem;
  line-height: 1.15;
  color: var(--papyrus-text);
}

.fallback-stat-copy span {
  font-size: 0.82rem;
  line-height: 1.2;
  color: var(--text);
}

.fallback-link {
  margin-top: 8px;
  padding: 6px 14px;
  font-size: 0.8rem;
  font-family: "Cinzel", serif;
  font-weight: 700;
  letter-spacing: 0.5px;
  background: linear-gradient(to bottom, #d4841c 0%, #a85f08 50%, #5a2e00 100%);
  border: 2px solid #2a1a0a;
  border-radius: 2px;
  color: #fff5d6;
  text-decoration: none;
  transition: all 0.2s ease;
  cursor: pointer;
}

.fallback-link:hover {
  background: linear-gradient(to bottom, #e4942c 0%, #b86f18 50%, #6a3e10 100%);
  border-color: #3a2a1a;
}

@keyframes fadeInOut {
  from {
    opacity: 0;
    transform: scale(0.95);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

.fallback-mobile-download {
  background-image: url(/screenshots/cwGameplayOnPhonesScewedTiny.png);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

.fallback-mobile-download .fallback-image {
  display: none;
}

.fallback-mobile-download .fallback-content {
  background: transparent;
  padding: 0;
  border-radius: 0;
  gap: 0;
  backdrop-filter: none;
}

.fallback-mobile-download .fallback-content h3,
.fallback-mobile-download .fallback-content p {
  display: none;
}

.fallback-mobile-download .fallback-link {
  background: rgba(255, 255, 255, 0.95);
  color: #333;
  font-weight: bold;
  border-color: white;
  padding: 12px 32px;
  font-size: 1rem;
  border-radius: 6px;
}

.fallback-mobile-download .fallback-link:hover {
  background: white;
}

.small-text-pane {
  width: 400px;
  margin-left: 10px;
}

.eventlog {
  display: flex;
  flex-direction: column;
  align-items: first baseline;
  align-self: baseline;
  height: 80px;
  width: 100%;
  overflow: scroll;
  scrollbar-width: none;
  /* Firefox */
  -ms-overflow-style: none;
  /* IE and Edge */

  ::-webkit-scrollbar {
    display: none;
    /* Chrome, Safari */
  }
}

/* HEX MAP */
/* Map Container */
.map-container {
  display: flex;
  flex-direction: column;
  gap: 30px;
  align-items: center;
  width: 100%;
}

/* Wide screens: campaign map on the left, dashboard + play on the top-right,
   star rankings below it — so the horizontal space is better utilised.

   Kicks in at 940px, not 1024px: the two columns need 488px (map) + 320px
   (dashboard min) + 28px gap + 32px padding = 868px, so 940 clears them with
   room to spare. The old 1024 threshold left 940–1023 stuck on the stacked
   layout, where the dashboard alone ate ~476px and pushed the level map
   entirely below the fold on short landscape viewports (e.g. 1015x514). */
@media (min-width: 940px) {
  .campaign-page-layout {
    display: grid;
    grid-template-columns: minmax(0, max-content) clamp(320px, 32%, 440px);
    grid-template-areas:
      "map dashboard"
      "map toplist";
    align-items: start;
    align-content: start;
    justify-content: center;
    gap: 20px 28px;
    max-width: 1400px;
    margin: 0 auto;
    padding: 28px 16px 0;
    box-sizing: border-box;
  }

  .campaign-page-layout > .campaign-dashboard {
    grid-area: dashboard;
    max-width: none;
    margin: 0;
  }

  .campaign-page-layout > .map-wrapper {
    grid-area: map;
    align-self: start;
    /* The map fits its column here, so let offset rows / next-level arrows
       overflow upward instead of being clipped (overflow-x:auto would
       otherwise force overflow-y to clip and cut off the top row's stars). */
    overflow: visible;
    padding-top: 24px;
  }

  .campaign-page-layout > .campaign-stars-toplist {
    grid-area: toplist;
    width: 100%;
    max-width: none;
    margin: 0;
  }

  /* The rankings column is only ~320px wide here no matter how wide the window
     is, and a table can't shrink below its min-content width — one star icon
     per star made .cst-stars 249px and pushed the table 71px outside its panel
     (invisible at 1024px+, where centring slack absorbs it, but a page-level
     horizontal scrollbar once the layout is tight). Reuse the compact
     one-icon-per-5 rendering that narrow phones already get. */
  .campaign-page-layout .cst-stars-full {
    display: none;
  }

  .campaign-page-layout .cst-stars-compact {
    display: inline;
  }

  /* Dashboard sits in a narrow column here — stack the header/CTA so the
     title and stats don't overlap (mirrors the small-screen treatment). */
  .campaign-page-layout .progress-info {
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
  }

  .campaign-page-layout .progress-stats {
    flex-wrap: wrap;
  }

  .campaign-page-layout .campaign-cta {
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
  }
}

/* Mid widths (e.g. 800px): the dashboard is full-width and looks too wide as a
   stacked top/bottom panel — split it into progress (left) + play CTA (right).
   Capped at 939px so it stops exactly where the two-column page layout above
   takes over; overlapping the two grids would leave them fighting. */
@media (min-width: 769px) and (max-width: 939px) {
  /* Grid (not flex) so the optional full-width star track can span both
     columns and not get squeezed into the header/CTA row. */
  .campaign-dashboard {
    display: grid;
    grid-template-columns: 56% 44%;
    grid-template-areas:
      "header cta"
      "track  track";
    align-items: stretch;
  }

  .campaign-dashboard .campaign-progress-header {
    grid-area: header;
    justify-content: center;
  }

  .campaign-dashboard .campaign-star-track-wrap {
    grid-area: track;
    border-top: 1px solid var(--surface-border);
    padding-top: 16px;
  }

  /* Keep the base wrapping-row flex (NOT flex-direction:column): the
     .campaign-next-detail card is flex:1 1 100% so it wraps to its own line
     and the play button stacks full-width below it. In a column flex the
     100% basis would be read as height and crush the button to a sliver. */
  .campaign-dashboard .campaign-cta {
    grid-area: cta;
    border-top: none;
    border-left: 1px solid var(--surface-border);
    align-content: center;
    text-align: left;
  }

  /* Header is now half-width, so stack its title/stats to avoid overlap. */
  .campaign-dashboard .progress-info {
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
  }

  .campaign-dashboard .progress-stats {
    flex-wrap: wrap;
  }
}

/* At ~832px (portrait tablets) the full-width star-track row makes the campaign
   dashboard too tall. Tuck the star track into the header column beneath the
   progress bar and let the play CTA span both rows on the right, so the track
   reads as part of the progress header and the whole dashboard is more compact.

   Extended to 939px (the whole remaining two-column-dashboard band): the play
   CTA is much taller than the progress header, so without the track to bulk it
   out the header column stretches and strands ~284px of empty texture around
   its vertically-centred content. Tucking the track in roughly halves that. */
@media (min-width: 769px) and (max-width: 939px) {
  .campaign-dashboard {
    grid-template-areas:
      "header cta"
      "track  cta";
  }

  .campaign-dashboard .campaign-star-track-wrap {
    border-top: none;
    padding-top: 4px;
  }
}

/* Unified Campaign Dashboard Panel */
.campaign-dashboard {
  width: 100%;
  max-width: 900px;
  background-color: var(--cloud-bg);
  background-image: var(--dirt-texture-url);
  background-repeat: repeat;
  border: 1px solid var(--surface-border);
  border-radius: 2px;
  overflow: hidden;
}

.campaign-set-switcher {
  display: flex;
  gap: 10px;
  padding: 16px 20px 0;
  flex-wrap: wrap;
}

.campaign-set-chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  border: 1px solid var(--surface-border);
  background: rgba(0, 0, 0, 0.12);
  color: var(--text);
  text-decoration: none;
  font-weight: 700;
  font-size: 0.92rem;
}

.campaign-set-chip.active {
  background: rgba(200, 150, 12, 0.18);
  color: var(--papyrus-text);
}

.campaign-set-chip.locked {
  opacity: 0.85;
}

/* Campaign Progress Header — inside dashboard, no own background */
.campaign-progress-header {
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

/* Campaign CTA — inside dashboard, separated by top border */
.campaign-dashboard .campaign-cta {
  background: rgba(0, 0, 0, 0.1);
  border: none;
  border-top: 1px solid var(--surface-border);
  border-radius: 0;
  max-width: 100%;
}

.progress-info {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.progress-title {
  margin: 0;
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 1.3rem;
  color: var(--papyrus-text);
  font-family: "Cinzel", serif;
  font-weight: 700;
}

.progress-title i {
  color: #c8960c;
  font-size: 1.5rem;
}

.progress-stats {
  display: flex;
  gap: 16px;
}

.progress-status {
  margin: 0;
  font-size: 0.95rem;
  color: var(--text);
  display: flex;
  align-items: center;
  gap: 6px;
}

.progress-level {
  font-weight: 700;
  color: #c8960c;
}

.progress-bar-container {
  width: 100%;
  height: 24px;
  background: rgba(0, 0, 0, 0.5);
  border-radius: 2px;
  overflow: hidden;
  border: 1px solid rgba(0, 0, 0, 0.4);
  box-shadow: inset 0 2px 5px rgba(0, 0, 0, 0.5);
  position: relative;
}

.progress-bar-label {
  position: absolute;
  right: 8px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 0.75rem;
  font-weight: 700;
  color: #1a0a00;
  text-shadow: none;
  z-index: 1;
  font-family: "Cinzel", serif;
}

.progress-bar-fill {
  height: 100%;
  background: linear-gradient(90deg, #b7892b 0%, #c8960c 50%, #e6ce6a 100%);
  transition: width 0.6s cubic-bezier(0.4, 0, 0.2, 1);
  display: flex;
  align-items: center;
  justify-content: flex-end;
  padding-right: 8px;
  position: relative;
  box-shadow: 0 0 8px rgba(200, 150, 12, 0.3) inset;
}

.progress-bar-fill::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(
    90deg,
    rgba(255, 255, 255, 0) 0%,
    rgba(255, 255, 255, 0.3) 50%,
    rgba(255, 255, 255, 0) 100%
  );
  animation: shimmer 2s infinite;
}

@keyframes shimmer {
  0% {
    transform: translateX(-100%);
  }
  100% {
    transform: translateX(100%);
  }
}

/* Campaign Stars Toplist */
.campaign-stars-toplist {
  width: 90%;
  max-width: 500px;
  margin: 24px auto 0;
}

.campaign-stars-toplist-title {
  text-align: center;
  color: var(--papyrus-text);
  font-size: 1.15rem;
  margin: 0 0 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-family: "Cinzel", serif;
}

.campaign-stars-table {
  width: 100%;
  border-collapse: collapse;
  background-color: var(--cloud-bg);
  background-image: var(--dirt-texture-url);
  background-repeat: repeat;
  border: 1px solid var(--surface-border);
  border-radius: 2px;
  overflow: hidden;
}

.campaign-stars-table thead {
  background: rgba(0, 0, 0, 0.2);
}

.campaign-stars-table th {
  color: var(--papyrus-text);
  font-weight: bold;
  padding: 10px 12px;
  text-align: left;
  font-size: 0.85em;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  font-family: "Cinzel", serif;
}

.campaign-stars-table td {
  color: var(--text);
  padding: 10px 12px;
  border-bottom: 1px solid var(--surface-border);
}

.campaign-stars-table tbody tr:last-child td {
  border-bottom: none;
}

.campaign-stars-table tbody tr:hover {
  background: rgba(200, 150, 12, 0.06);
}

.cst-rank {
  width: 40px;
  text-align: center !important;
  font-weight: bold;
}

.cst-player {
  font-weight: 500;
  display: flex;
  align-items: center;
  gap: 6px;
}

.cst-stars {
  width: 90px;
  text-align: right !important;
  white-space: nowrap;
}

.cst-star-icon {
  color: #ffd700;
  font-size: 0.75em;
}

.cst-star-count {
  font-weight: bold;
  color: #ffd700;
  margin-left: 4px;
  font-size: 0.9em;
}

/* Star Rankings: show the full row of stars on wide screens; on narrow screens
   collapse to one star per 5 (rendered in .cst-stars-compact) so a high-star
   player can't blow out the column. The exact count shows alongside either way. */
.cst-stars-compact {
  display: none;
}

@media (max-width: 600px) {
  .cst-stars-full {
    display: none;
  }
  .cst-stars-compact {
    display: inline;
  }
}

.cst-player-link {
  color: inherit;
  text-decoration: none;
  cursor: pointer;
  transition: color 0.15s;
}

.cst-player-link:hover {
  color: #c8960c;
  text-decoration: underline;
}

.cst-is-player {
  background: linear-gradient(90deg, rgba(240, 192, 64, 0.12) 0%, transparent 80%);
  box-shadow: inset 3px 0 0 #f0c040;
}

.cst-is-player:hover {
  background: linear-gradient(90deg, rgba(240, 192, 64, 0.2) 0%, rgba(255, 255, 255, 0.04) 80%) !important;
}

.cst-you-badge {
  background: linear-gradient(to bottom, #e6ce6a 0%, #c8960c 50%, #b7892b 100%);
  color: #1a0a00;
  font-size: 0.62em;
  padding: 1px 5px;
  border-radius: 2px;
  font-weight: bold;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  flex-shrink: 0;
}

@media (max-width: 768px) {
  .campaign-stars-toplist {
    width: 95%;
  }

  .campaign-stars-table th,
  .campaign-stars-table td {
    padding: 8px 10px;
    font-size: 0.85em;
  }
}

@media (max-width: 768px) {
  .campaign-progress-header {
    padding: 16px;
  }

  .progress-info {
    flex-direction: column;
    gap: 8px;
    align-items: flex-start;
  }

  .progress-title {
    font-size: 1.1rem;
  }
}

.campaign-cta {
  width: 100%;
  padding: 16px 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px 16px;
  box-sizing: border-box;
}

/* `.campaign-btn-play` carries `flex: 1; min-width: 0` for the level-detail
   modal, where a long localized label must be allowed to collapse rather than
   force horizontal scroll on a phone. In the dashboard CTA the button instead
   shares a wrapping row with the subtitle, and that same min-width:0 let it
   shrink below its own label — at 1015px it rendered 62px wide for a 95px
   label, spilling "Start Campaign" outside the gold box and over the subtitle.
   `fit-content` floors it at its label width but still caps at the available
   row width, so a long localized label can't force horizontal scroll.
   (It must be the bare keyword — intrinsic sizes are not allowed inside
   min()/max(), which silently invalidates the whole declaration.) */
.campaign-cta > .campaign-cta-btn {
  min-width: fit-content;
}

/* Rich "next level" detail card inside the campaign CTA. */
.campaign-next-detail {
  flex: 1 1 100%;
  width: 100%;
  box-sizing: border-box;
  text-align: left;
  /* Theme-aware: subtle surface + themed text/border. */
  background: var(--surface-subtle, rgba(0, 0, 0, 0.05));
  border: 1px solid var(--surface-border, rgba(0, 0, 0, 0.14));
  border-radius: 10px;
  padding: 12px 14px;
  color: var(--text);
}

.cnd-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 10px;
}

.cnd-title {
  font-weight: 800;
  font-size: 1rem;
  color: var(--text);
}

.cnd-title i {
  color: #c8960c;
  margin-right: 4px;
}

.cnd-difficulty {
  flex: 0 0 auto;
}

.cnd-challenges {
  list-style: none;
  margin: 0 0 10px;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.cnd-challenge {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.85rem;
  color: var(--text);
}

.cnd-challenge-star {
  color: #b8860b;
  flex: 0 0 auto;
}

.cnd-challenge-text {
  flex: 1;
  opacity: 0.92;
}

.cnd-challenge-hint {
  opacity: 0.72;
}

.cnd-challenge-coins {
  flex: 0 0 auto;
  color: #b8860b;
  font-weight: 700;
  white-space: nowrap;
}

.cnd-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 8px 14px;
  padding-top: 8px;
  border-top: 1px solid var(--surface-border, rgba(0, 0, 0, 0.12));
  font-size: 0.85rem;
}

.cnd-reward {
  color: #b8860b;
  font-weight: 700;
}

.cnd-stats {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  opacity: 0.92;
}

.cnd-stat {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.cnd-wins {
  color: #1f9d57;
}

.cnd-losses {
  color: #c0392b;
}

.cnd-winrate {
  font-weight: 700;
}

.cnd-stats-empty {
  opacity: 0.6;
  font-style: italic;
}

/* ── Campaign star-reward track + milestone circles ── */
.campaign-star-track-wrap {
  width: 100%;
  padding: 4px 20px 0;
  box-sizing: border-box;
}

.campaign-star-track-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 0.8rem;
  font-weight: 700;
  color: var(--text);
  margin-bottom: 14px;
  opacity: 0.9;
}

.campaign-star-track-head i {
  color: #b8860b;
}

[data-theme="dark"] .campaign-star-track-head i {
  color: #ffd23a;
}

.campaign-star-track {
  position: relative;
  height: 8px;
  margin: 0 20px 32px;
  background: rgba(0, 0, 0, 0.35);
  border-radius: 6px;
}

.campaign-star-track-fill {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  background: linear-gradient(90deg, #c8960c, #ffd23a);
  border-radius: 6px;
  transition: width 0.4s ease;
}

.star-milestone {
  position: absolute;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 38px;
  height: 38px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 2px solid;
  cursor: pointer;
  padding: 0;
  font-size: 14px;
  line-height: 1;
  z-index: 2;
  transition: filter 0.15s ease, transform 0.15s ease;
}

.star-milestone:hover {
  filter: brightness(1.12);
  transform: translate(-50%, -50%) scale(1.08);
}

.star-milestone-stars {
  position: absolute;
  bottom: -17px;
  font-size: 9px;
  font-weight: 800;
  white-space: nowrap;
  color: var(--text);
}

.star-milestone-stars i {
  font-size: 7px;
  color: #ffd23a;
  margin-left: 1px;
}

.star-milestone-locked {
  background: #3a4150;
  border-color: #5b636c;
  color: #aeb6bf;
}

.star-milestone-claimable {
  background: radial-gradient(circle, #ffe08a, #e0a31a);
  border-color: #fff3c4;
  color: #5a3e00;
  box-shadow: 0 0 10px rgba(255, 210, 90, 0.7);
  animation: rewardBadgePulse 1.6s ease-in-out infinite;
}

.star-milestone-claimed {
  background: radial-gradient(circle, #5fe08a, #1f9d57);
  border-color: #b6ffcf;
  color: #04391f;
}

/* ── Star-reward modal (rendered inside the map info modal) ── */
.star-reward-modal {
  text-align: center;
  padding: 24px 22px;
  /* Theme-aware panel, matching the daily/weekly bonus modal. */
  background-color: var(--cloud-bg);
  background-image: var(--dirt-texture-url);
  background-repeat: repeat;
  border: 1px solid var(--surface-border);
  border-radius: 2px;
  color: var(--text);
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.5);
}

.star-reward-header {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin-bottom: 6px;
}

.star-reward-header i {
  color: #b8860b;
  font-size: 1.6rem;
}

.star-reward-header h2 {
  margin: 0;
}

.star-reward-sub {
  opacity: 0.85;
  margin: 0 0 16px;
  font-size: 0.95rem;
}

.star-reward-cards {
  display: flex;
  justify-content: center;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 16px;
}

.star-reward-claim-btn {
  margin: 0 auto;
}

.star-reward-note {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
}

.star-reward-note p {
  margin: 0;
  opacity: 0.85;
}

.star-reward-claimed-note {
  color: #178a4c;
  font-weight: 700;
  margin: 0;
}

.star-reward-progress-note {
  color: #b8860b;
  font-weight: 700;
  margin: 0;
}

/* Dark theme: brighter accents read better on the dark surfaces. Light theme
   (default) keeps the deeper shades above for contrast on parchment. */
[data-theme="dark"] .cnd-challenge-star,
[data-theme="dark"] .cnd-challenge-coins,
[data-theme="dark"] .cnd-reward,
[data-theme="dark"] .star-reward-progress-note {
  color: #ffd23a;
}

[data-theme="dark"] .star-reward-header i {
  color: #ffd23a;
}

[data-theme="dark"] .cnd-wins {
  color: #2ecc71;
}

[data-theme="dark"] .cnd-losses {
  color: #ff6b5e;
}

[data-theme="dark"] .star-reward-claimed-note {
  color: #2ecc71;
}

.campaign-cta-subtitle {
  margin: 0;
  font-size: 0.95rem;
  color: var(--text);
}

.campaign-cta-stars {
  margin-left: 8px;
  color: #f0c040;
  font-size: 0.8rem;
}

.campaign-cta-stars i {
  margin-right: 2px;
}

.campaign-cta-btn {
  padding: 10px 24px;
  font-size: 0.9rem;
  font-weight: 700;
  font-family: "Cinzel", serif;
  gap: 8px;
  display: inline-flex;
  align-items: center;
  border-radius: 2px;
  cursor: pointer;
  white-space: nowrap;
  letter-spacing: 0.5px;
}

.campaign-cta-complete .campaign-cta-subtitle {
  width: 100%;
  text-align: center;
  font-size: 1.1rem;
  font-weight: 600;
}

.campaign-cta-complete .campaign-cta-subtitle i {
  color: #f0c040;
  margin-right: 8px;
}

@media (max-width: 768px) {
  .campaign-cta {
    flex-direction: column;
    text-align: center;
    padding: 14px 16px;
  }
}

.map-wrapper {
  width: 100%;
  display: flex;
  justify-content: center;
  overflow-x: auto;
  padding: 20px 0;
}

.hex-map {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0;
}

.hex-map-row {
  display: flex;
  justify-content: center;
}

/* Campaign progression arrows (level 1 -> 2 -> ...), drawn as an SVG overlay. */
.campaign-map-wrapper .hex-map {
  position: relative;
}

.campaign-arrows {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  overflow: visible;
  z-index: 30;
}

.campaign-arrow-line {
  stroke: #ff3d2e; /* fallback; per-state color set below */
  stroke-width: 5;
  stroke-linecap: round;
  stroke-dasharray: 9 7;
  opacity: 1;
  filter: drop-shadow(0 0 2px rgba(0, 0, 0, 0.9));
  animation: campaignArrowFlow 1.1s linear infinite;
}

/* Progression colors: beaten -> green, current -> gold, locked -> red. */
.campaign-arrow-completed {
  stroke: #2ecc71;
}
.campaign-arrow-current {
  stroke: #ffcf3a;
}
.campaign-arrow-locked {
  stroke: #ff3d2e;
}

.campaign-arrow-head {
  /* fill set per-marker inline so each arrowhead matches its line */
  filter: drop-shadow(0 0 2px rgba(0, 0, 0, 0.9));
}

@keyframes campaignArrowFlow {
  to {
    stroke-dashoffset: -16;
  }
}

@media (prefers-reduced-motion: reduce) {
  .campaign-arrow-line {
    animation: none;
  }
}

/* Hexagon Styling */
.hex {
  width: 50px;
  height: 57px;
  background-color: #6b8e23;
  clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  font-size: 12px;
  color: white;
  font-weight: bold;
  cursor: pointer;
  position: relative;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  overflow: hidden;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
  border: 2px solid rgba(255, 255, 255, 0.15);
  margin-right: 1px;
}

.hex-img {
  background-size: cover;
  background-position: center;
}

.hex:hover {
  transform: scale(1.08) translateZ(0);
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.35);
  border-color: rgba(255, 255, 255, 0.4);
}

.hex:active {
  transform: scale(0.98);
}

.hex-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    135deg,
    rgba(255, 255, 255, 0.1) 0%,
    rgba(0, 0, 0, 0.1) 100%
  );
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.3s ease;
}

.hex:hover .hex-overlay {
  opacity: 1;
}

.hex-content {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
}

.hex-value-txt {
  background: rgba(0, 0, 0, 0.5);
  backdrop-filter: blur(8px);
  border-radius: 12px;
  padding: 6px 10px;
  font-size: 16px;
  font-weight: 700;
  color: white;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.4);
  border: 1px solid rgba(255, 255, 255, 0.2);
  transition: all 0.2s ease;
}

.hex:hover .hex-value-txt {
  background: rgba(0, 0, 0, 0.7);
  transform: scale(1.1);
}

.hex-locked {
  opacity: 0.6;
  filter: grayscale(1) brightness(0.85);
}

.hex-locked:hover {
  opacity: 0.75;
  filter: grayscale(0.8) brightness(0.95);
}

.hex-unlocked {
  filter: brightness(1) saturate(1.1);
}

.hex-glow-gold {
  filter: brightness(1.1) saturate(1.2) drop-shadow(0 0 8px rgba(255, 215, 0, 0.7));
}

.hex-glow-silver {
  filter: brightness(1.1) saturate(1.1) drop-shadow(0 0 8px rgba(192, 192, 192, 0.6));
}

.hex-glow-bronze {
  filter: brightness(1.05) saturate(1.05) drop-shadow(0 0 6px rgba(205, 127, 50, 0.5));
}

/* Bottom-of-hex badge: difficulty label, or coins (claimable first, else
   remaining). */
.hex-bottom-badge {
  position: absolute;
  bottom: 5px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 6;
  font-size: 15px;
  font-weight: 800;
  line-height: 1;
  padding: 3px 9px;
  border-radius: 5px;
  pointer-events: none;
  white-space: nowrap;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

/* Coins ready to collect now — gold, pulsing to draw attention. */
.hex-badge-claimable {
  color: #ffd700;
  background: rgba(0, 0, 0, 0.72);
  border: 1px solid #ffd700;
  animation: rewardBadgePulse 2s ease-in-out infinite;
}

/* Coins still to be earned (not yet won) — muted gold, no pulse. */
.hex-badge-remaining {
  color: #e6c77a;
  background: rgba(0, 0, 0, 0.6);
  border: 1px solid rgba(230, 199, 122, 0.55);
}

/* Difficulty label with a fat outline, like the main-menu titles. */
.hex-badge-difficulty {
  background: transparent;
  font-size: 17px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  -webkit-text-stroke: 4px rgba(30, 18, 10, 0.92);
  paint-order: stroke fill;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.9);
}
.hex-diff-easy {
  color: #6dff8f;
}
.hex-diff-medium {
  color: #ffd23a;
}
.hex-diff-hard {
  color: #ff6b5e;
}

/* In light theme the dark text-stroke reads as a heavy outline against the pale
   background on the hard-difficulty badge — drop the stroke there. */
[data-theme="light"] .hex-badge-difficulty.hex-diff-hard {
  -webkit-text-stroke: 0;
}

@keyframes rewardBadgePulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.5; }
}

/* Premium (locked-by-unlock) campaign level: keep the art in colour behind a
   gold lock badge rather than the grey locked treatment, as a premium teaser */
.hex.hex-premium-locked {
  filter: brightness(0.7) saturate(1.05) !important;
}

.hex.hex-premium-locked:hover {
  filter: brightness(0.85) saturate(1.1) !important;
}

.hex-premium-lock {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 7;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.6);
  border: 2px solid #e6ce6a;
  color: #e6ce6a;
  font-size: 13px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.5);
  pointer-events: none;
}

.campaign-map-wrapper .hex-premium-lock {
  width: 42px;
  height: 42px;
  font-size: 18px;
  border-width: 3px;
}

/* Earned-star rating shown across the top of each campaign level hex */
.hex-stars {
  position: absolute;
  top: 7px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 6;
  display: flex;
  align-items: flex-end;
  gap: 3px;
  pointer-events: none;
}

.hex-star {
  font-size: 12px;
  line-height: 1;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.85);
  -webkit-text-stroke: 0.6px rgba(0, 0, 0, 0.85);
  paint-order: stroke fill;
}

/* Arch the trio: middle star lifted, side stars tilted outward */
.hex-star:first-child {
  transform: translateY(2px) rotate(-18deg);
}

.hex-star:nth-child(2) {
  transform: translateY(-2px);
}

.hex-star:last-child {
  transform: translateY(2px) rotate(18deg);
}

.hex-star-earned {
  color: #ffd24a;
  text-shadow: 0 0 4px rgba(255, 200, 40, 0.9), 0 1px 2px rgba(0, 0, 0, 0.85);
}

.hex-star-empty {
  color: rgba(255, 255, 255, 0.45);
}

/* Campaign map: larger hexes get larger, more prominent stars + a deeper arch */
.campaign-map-wrapper .hex-stars {
  top: 9px;
  gap: 4px;
}

.campaign-map-wrapper .hex-star {
  font-size: 18px;
  -webkit-text-stroke: 0.9px rgba(0, 0, 0, 0.85);
}

.campaign-map-wrapper .hex-star:first-child {
  transform: translateY(3px) rotate(-18deg);
}

.campaign-map-wrapper .hex-star:nth-child(2) {
  transform: translateY(-3px);
}

.campaign-map-wrapper .hex-star:last-child {
  transform: translateY(3px) rotate(18deg);
}

@media (max-width: 480px) {
  .campaign-map-wrapper .hex-stars {
    top: 5px;
    gap: 2px;
  }

  .campaign-map-wrapper .hex-star {
    font-size: 11px;
  }
}

/* Hex glow effect for highlighting next level */
.hex-glow {
  animation: hexGlowPulse 1.5s ease-in-out 3;
  z-index: 10;
  position: relative;
}

@keyframes hexGlowPulse {
  0%, 100% {
    filter: brightness(1) saturate(1.1) drop-shadow(0 0 0px rgba(255, 215, 0, 0));
    transform: scale(1);
  }
  50% {
    filter: brightness(1.4) saturate(1.5) drop-shadow(0 0 20px rgba(255, 215, 0, 0.8));
    transform: scale(1.15);
  }
}

.hex-map-offset {
  margin-left: 51px;
  height: 31px;
  transform: translate(0, -13px);
}

/* Campaign map: scale hexes up 2.4x for better readability */
.campaign-map-wrapper .hex {
  width: 120px;
  height: 137px;
  margin-right: 2px;
}

.campaign-map-wrapper .hex-map-offset {
  margin-left: 122px;
  height: 74px;
  transform: translate(0, -31px);
}

@media (max-width: 480px) {
  .campaign-map-wrapper .hex {
    width: 80px;
    height: 91px;
    margin-right: 2px;
  }

  .campaign-map-wrapper .hex-map-offset {
    margin-left: 82px;
    height: 50px;
    transform: translate(0, -21px);
  }

  .campaign-map-wrapper .hex-next-wrapper {
    margin-right: 2px;
  }

  .hex-next-arrow {
    font-size: 1.2rem;
    top: -28px;
  }
}

/* Wrapper for next-level hex — allows the arrow to float above */
.hex-next-wrapper {
  position: relative;
  overflow: visible;
  margin-right: 1px;
}

.hex-next-wrapper .hex {
  margin-right: 0;
}

.campaign-map-wrapper .hex-next-wrapper {
  margin-right: 2px;
}

/* Bouncing amber arrow above the next-level hex */
.hex-next-arrow {
  position: absolute;
  top: -38px;
  left: 50%;
  transform: translateX(-50%);
  color: #e6ce6a;
  font-size: 1.8rem;
  z-index: 20;
  pointer-events: none;
  text-shadow:
    0 0 6px rgba(200, 150, 12, 1),
    0 0 16px rgba(200, 150, 12, 0.8),
    0 0 30px rgba(200, 150, 12, 0.5);
  animation: hexArrowBounce 0.85s ease-in-out infinite;
}

@keyframes hexArrowBounce {
  0%, 100% { transform: translateX(-50%) translateY(0); opacity: 1; }
  50% { transform: translateX(-50%) translateY(-8px); opacity: 0.75; }
}

/* Next level to play: permanent amber pulsing glow */
.hex-next-level {
  animation: hexNextLevelGlow 2s ease-in-out infinite;
  z-index: 5;
  position: relative;
}

@keyframes hexNextLevelGlow {
  0%, 100% {
    filter: brightness(1.1) saturate(1.3) drop-shadow(0 0 6px rgba(200, 150, 12, 0.7));
    transform: scale(1);
  }
  50% {
    filter: brightness(1.25) saturate(1.5) drop-shadow(0 0 18px rgba(200, 150, 12, 1));
    transform: scale(1.05);
  }
}

/* Empty campaign hex: hidden, but still occupies space so the honeycomb
   offsets of the real level hexes stay intact */
.hex-campaign.hex-empty {
  visibility: hidden;
}

/* Map Info Section */
.map-info-section {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 20px;
  max-width: 900px;
}

.map-info-panel {
  min-height: 200px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.map-info-placeholder {
  text-align: center;
  opacity: 0.8;
}

.map-info-placeholder i {
  font-size: 3rem;
  margin-bottom: 12px;
  opacity: 0.6;
}

.map-info-placeholder p {
  margin: 0;
  font-size: 1rem;
  letter-spacing: 0.5px;
}

.map-description-panel {
  background-color: var(--cloud-bg);
  background-image: var(--dirt-texture-url);
  background-repeat: repeat;
  border: 1px solid var(--surface-border);
}

.map-description-content {
  padding: 20px 0;
}

.map-description-title {
  margin: 0 0 16px 0;
  font-size: 1.3rem;
  font-weight: 700;
  color: var(--papyrus-text);
  font-family: "Cinzel", serif;
  letter-spacing: 1px;
}

.map-description-text {
  margin: 0 0 12px 0;
  font-size: 0.95rem;
  line-height: 1.7;
  color: var(--papyrus-text);
}

.map-description-text:last-of-type {
  margin-bottom: 16px;
}

.map-description-subtitle {
  margin: 18px 0 10px 0;
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--papyrus-text);
  font-family: "Cinzel", serif;
  letter-spacing: 0.5px;
  display: flex;
  align-items: center;
  gap: 8px;
}

.map-description-todo {
  margin: 0;
  padding-left: 22px;
  color: var(--papyrus-text);
  font-size: 0.95rem;
  line-height: 1.7;
}

.map-description-todo li {
  margin-bottom: 6px;
}

.map-description-todo li:last-child {
  margin-bottom: 0;
}

.worldmap-tutorial-list {
  list-style: none;
  padding-left: 0;
  margin: 12px 0 0 0;
}

.worldmap-tutorial-item {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin-bottom: 8px;
  color: var(--papyrus-text);
}

.worldmap-tutorial-item:last-child {
  margin-bottom: 0;
}

.worldmap-tutorial-step-icon {
  flex: 0 0 auto;
  margin-top: 3px;
  font-size: 1rem;
}

.worldmap-tutorial-step-icon-pending {
  color: rgba(107, 80, 55, 0.35);
}

.worldmap-tutorial-step-icon-done {
  color: #2e8b57;
}

.worldmap-tutorial-item-done > span {
  text-decoration: line-through;
  opacity: 0.65;
}

.worldmap-tutorial-details > summary {
  cursor: pointer;
  list-style: none;
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0;
}

.worldmap-tutorial-details > summary::-webkit-details-marker {
  display: none;
}

.worldmap-tutorial-details[open] .worldmap-tutorial-list {
  margin-top: 12px;
}

.worldmap-tutorial-done-icon {
  color: #2e8b57;
}

.play-now-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 14px 28px;
  background: linear-gradient(to bottom, #e6ce6a 0%, #c8960c 50%, #b7892b 100%);
  color: #1a0a00;
  text-decoration: none;
  font-weight: 700;
  font-family: "Cinzel", serif;
  border-radius: 2px;
  transition: all 0.2s ease;
  border: 1px solid #b7892b;
  cursor: pointer;
  font-size: 1rem;
}

.play-now-btn:hover {
  opacity: 0.88;
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(200, 150, 12, 0.35);
}

/* Campaign Info Panel Styling */
.campaign-info-panel {
  min-height: unset;
  padding: 0;
}

.campaign-level-header {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 20px;
  background: rgba(0, 0, 0, 0.15);
  border-bottom: 1px solid var(--surface-border);
}

.campaign-level-badge {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 60px;
  height: 60px;
  background: linear-gradient(to bottom, #e6ce6a 0%, #c8960c 50%, #b7892b 100%);
  border: 1px solid #b7892b;
  border-radius: 2px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
  flex-shrink: 0;
}

.level-number {
  font-size: 1.8rem;
  font-weight: 800;
  color: #1a0a00;
  font-family: "Cinzel", serif;
}

.campaign-level-title {
  flex: 1;
  min-width: 0; /* allow the title to shrink/wrap instead of widening the panel */
}

.campaign-level-title h3 {
  margin: 0 0 6px 0;
  font-size: 1.4rem;
  color: var(--papyrus-text);
  font-family: "Cinzel", serif;
}

.campaign-difficulty {
  display: flex;
  gap: 4px;
  font-size: 1rem;
}

.campaign-difficulty-row {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}

.campaign-collect-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 12px;
  background: linear-gradient(to bottom, #e6ce6a 0%, #c8960c 50%, #b7892b 100%);
  border: 1px solid #b7892b;
  border-radius: 2px;
  color: #1a0a00;
  cursor: pointer;
  font-family: "Cinzel", serif;
  font-weight: 700;
  font-size: 12px;
  white-space: nowrap;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.25);
  animation: campaignCollectPulse 1.8s ease-in-out infinite;
}

.campaign-collect-btn:hover {
  opacity: 0.9;
}

@keyframes campaignCollectPulse {
  0%, 100% { box-shadow: 0 2px 6px rgba(0, 0, 0, 0.25); }
  50% { box-shadow: 0 2px 12px rgba(230, 206, 106, 0.85); }
}

.campaign-level-image {
  display: block;
  width: 100%;
  height: 200px;
  object-fit: cover;
  border-bottom: 1px solid var(--surface-border);
}

.campaign-content {
  padding: 20px;
}

.campaign-description {
  margin: 0 0 16px 0;
  font-size: 0.95rem;
  line-height: 1.6;
  color: var(--text);
}

.campaign-learning-box {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 12px 16px;
  background: rgba(200, 150, 12, 0.08);
  border-left: 3px solid #c8960c;
  border-radius: 2px;
  margin-bottom: 16px;
}

.campaign-learning-box i {
  color: #c8960c;
  font-size: 1.2rem;
  flex-shrink: 0;
  margin-top: 2px;
}

.campaign-learning-box span {
  font-size: 0.9rem;
  color: var(--text);
}

.campaign-actions {
  display: flex;
  gap: 10px;
  margin-top: 16px;
}

.campaign-btn-play,
.campaign-btn-locked {
  flex: 1;
  /* min-width:0 + wrapping text so a long label ("Locked - Complete Previous
     Levels", localized play/login strings) can't set a min-content width that
     pushes the whole panel past a phone's width and forces horizontal scroll. */
  min-width: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 14px 20px;
  border-radius: 2px;
  font-weight: 700;
  font-family: "Cinzel", serif;
  font-size: 0.95rem;
  cursor: pointer;
  transition: all 0.2s ease;
  white-space: normal;
  overflow-wrap: break-word;
  letter-spacing: 0.5px;
}

.campaign-btn-play {
  background: linear-gradient(to bottom, #e6ce6a 0%, #c8960c 50%, #b7892b 100%);
  border: 1px solid #b7892b;
  color: #1a0a00;
}

.campaign-btn-play:hover {
  opacity: 0.88;
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(200, 150, 12, 0.35);
}

.campaign-btn-play:active {
  transform: translateY(0);
}

.campaign-btn-locked {
  background: rgba(0, 0, 0, 0.2);
  border: 1px solid var(--surface-border);
  color: var(--text);
  cursor: not-allowed;
  opacity: 0.5;
}

.campaign-star-hints {
  margin-top: 12px;
  padding: 10px;
  background: rgba(0, 0, 0, 0.15);
  border-radius: 4px;
  border: 1px solid var(--surface-border);
}

.campaign-star-hints-title {
  font-family: "Cinzel", serif;
  font-size: 13px;
  margin: 0 0 8px 0;
  color: #c8960c;
}

.campaign-star-hints-title i {
  color: #c8960c;
}

.campaign-star-hint {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

.campaign-star-hint:last-child {
  border-bottom: none;
}

.campaign-star-hint.achieved {
  opacity: 0.6;
}

/* A claimable star is actionable — keep it bright and call it out. */
.campaign-star-hint.claimable {
  opacity: 1;
  background: rgba(200, 150, 12, 0.12);
  border-radius: 4px;
  padding-left: 6px;
  padding-right: 6px;
}

.campaign-star-hint > i {
  flex-shrink: 0;
  font-size: 14px;
}

.campaign-star-hint-label {
  font-weight: 700;
  font-size: 12px;
  display: block;
  color: var(--papyrus-text);
}

.campaign-star-hint-desc {
  font-size: 11px;
  opacity: 0.7;
  display: block;
}

.campaign-star-hint-info {
  flex: 1;
  min-width: 0; /* shrink/wrap long hint text rather than overflow the row */
  overflow-wrap: break-word;
}

.campaign-star-hint-reward {
  flex-shrink: 0;
  margin-left: auto;
}

.campaign-star-claim-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 16px;
  background: linear-gradient(to bottom, #ffe88a 0%, #f0b400 48%, #c8960c 100%);
  border: 1px solid #8a6508;
  border-radius: 4px;
  color: #1a0a00;
  cursor: pointer;
  font-family: "Cinzel", serif;
  font-weight: 700;
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: 0.3px;
  white-space: nowrap;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.35);
  transition: transform 0.12s ease, box-shadow 0.12s ease, filter 0.12s ease;
  animation: campaignClaimPulse 1.6s ease-in-out infinite;
}

.campaign-star-claim-btn i {
  font-size: 13px;
}

.campaign-star-claim-btn:hover {
  filter: brightness(1.08);
  transform: translateY(-1px);
  box-shadow: 0 4px 10px rgba(200, 150, 12, 0.55);
}

.campaign-star-claim-btn:active {
  transform: translateY(0);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.4);
}

@keyframes campaignClaimPulse {
  0%,
  100% {
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.35), 0 0 0 0 rgba(240, 180, 0, 0.55);
  }
  50% {
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.35), 0 0 0 6px rgba(240, 180, 0, 0);
  }
}

@media (prefers-reduced-motion: reduce) {
  .campaign-star-claim-btn {
    animation: none;
  }
}

/* On narrow screens drop the "Collect" word so the button stays compact and
   doesn't squeeze the challenge name — just the coin icon + value. */
@media (max-width: 768px) {
  .campaign-star-claim-word {
    display: none;
  }

  .campaign-star-claim-btn {
    padding: 8px 12px;
  }
}

.campaign-star-claimed {
  color: #28a745;
  font-size: 11px;
  font-weight: 600;
  white-space: nowrap;
}

/* Same as .campaign-star-collected: the success-green is too bright/saturated on
   the light theme's pale background — deepen it there for readable contrast. */
[data-theme="light"] .campaign-star-claimed {
  color: #1e7e34;
}

.campaign-star-reward-locked {
  color: #c8960c;
  font-size: 11px;
  opacity: 0.4;
  white-space: nowrap;
}

/* Campaign level community stats (in the level details panel) */
.campaign-level-stats {
  margin-top: 12px;
  padding: 10px;
  background: rgba(0, 0, 0, 0.15);
  border-radius: 4px;
  border: 1px solid var(--surface-border);
}

.campaign-level-stats-title {
  font-family: "Cinzel", serif;
  font-size: 13px;
  margin: 0 0 8px 0;
  color: #c8960c;
}

.campaign-level-stats-title i {
  color: #c8960c;
}

.campaign-level-stats-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px;
  font-size: 13px;
}

.campaign-level-stat {
  display: inline-flex;
  align-items: center;
  gap: 5px;
}

.campaign-stat-wins {
  color: #1f9d57;
}

.campaign-stat-losses {
  color: #c0392b;
}

.campaign-stat-winrate {
  font-weight: 700;
}

.campaign-level-stats-empty {
  margin: 0;
  font-size: 12px;
  opacity: 0.6;
  font-style: italic;
}

/* Campaign Chat */
.campaign-chat-section {
  margin-top: 16px;
  padding-top: 12px;
  border-top: 1px solid var(--surface-border);
}

.campaign-chat-title {
  font-size: 0.85rem;
  margin: 0 0 8px;
  color: var(--papyrus-text);
  font-family: "Cinzel", serif;
}

.campaign-chat-title i {
  margin-right: 4px;
}

.campaign-chat {
  background: rgba(0, 0, 0, 0.15);
  border: 1px solid var(--surface-border);
  border-radius: 2px;
  padding: 8px;
}

.campaign-chat-messages {
  max-height: 150px;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-bottom: 8px;
}

.campaign-chat-msg {
  font-size: 0.8rem;
  line-height: 1.3;
  padding: 5px 8px;
  border-left: 2px solid #c8960c;
  border-radius: 0 2px 2px 0;
  background: rgba(0, 0, 0, 0.15);
}

.campaign-chat-admin {
  border-left-color: #e0c882;
}

.campaign-chat-name {
  font-weight: 700;
  margin-right: 4px;
  color: #c8960c;
  font-size: 0.8rem;
}

.campaign-chat-admin-icon {
  color: #e0c882;
  font-size: 0.7rem;
  margin-right: 4px;
}

.campaign-chat-text {
  color: var(--text);
  word-break: break-word;
}

.campaign-chat-empty {
  font-size: 0.8rem;
  color: var(--text);
  opacity: 0.45;
  text-align: center;
  margin: 8px 0;
  font-style: italic;
}

.campaign-chat-form {
  display: flex;
  gap: 6px;
}

.campaign-chat-form input {
  flex: 1;
  border: 1px solid var(--surface-border);
  border-radius: 2px;
  padding: 6px 10px;
  font-size: 0.8rem;
  outline: none;
  background: rgba(0, 0, 0, 0.25);
  color: var(--text);
  transition: border-color 0.2s ease;
}

.campaign-chat-form input:focus {
  border-color: #c8960c;
}

.campaign-chat-form button {
  border: 1px solid #b7892b;
  background: linear-gradient(to bottom, #e6ce6a 0%, #c8960c 50%, #b7892b 100%);
  color: #1a0a00;
  border-radius: 2px;
  padding: 6px 10px;
  cursor: pointer;
  font-size: 0.8rem;
  transition: opacity 0.2s ease;
}

.campaign-chat-form button:hover {
  opacity: 0.85;
}

.campaign-chat-login-hint {
  font-size: 0.75rem;
  color: var(--text);
  opacity: 0.45;
  text-align: center;
  margin: 4px 0 0;
}

/* Responsive Campaign Panel */
@media (max-width: 768px) {
  .campaign-level-header {
    padding: 16px;
    flex-direction: column;
    text-align: center;
  }

  .campaign-level-title h3 {
    font-size: 1.2rem;
  }

  .campaign-level-badge {
    width: 50px;
    height: 50px;
  }

  .level-number {
    font-size: 1.4rem;
  }

  .campaign-actions {
    flex-direction: column;
  }
}

/* ==================== MAP INFO MODAL ==================== */

.map-info-modal {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  box-sizing: border-box;
  animation: fadeIn 0.2s ease;
}

.map-info-modal.hidden {
  display: none;
}

.map-info-modal-backdrop {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.75);
  backdrop-filter: blur(4px);
  cursor: pointer;
}

.map-info-modal-container {
  position: relative;
  width: 100%;
  max-width: 600px;
  max-height: 90vh;
  overflow-y: auto;
  z-index: 1;
  animation: modalSlideUp 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
  box-sizing: border-box;
}

@keyframes modalSlideUp {
  from {
    opacity: 0;
    transform: translateY(30px) scale(0.95);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

.map-info-modal-close {
  position: absolute;
  top: 10px;
  right: 10px;
  z-index: 2;
  background: rgba(0, 0, 0, 0.6);
  border: 1px solid var(--surface-border);
  color: var(--text);
  width: 36px;
  height: 36px;
  border-radius: 2px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.2rem;
  transition: all 0.2s ease;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
}

.map-info-modal-close:hover {
  background: rgba(200, 150, 12, 0.15);
  border-color: #c8960c;
  color: #c8960c;
}

.map-info-modal-content {
  position: relative;
}

.map-info-modal-content .map-info-content {
  margin: 0;
  width: 100%;
  /* `.cloudy-round-panel` adds a 1px border, so without border-box the panel
     renders 2px wider than the modal and every full-width child spills past
     the rounded edge. */
  box-sizing: border-box;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.4);
}

/* Ensure campaign level image is responsive in modal */
.map-info-modal-content .campaign-level-image {
  max-height: 250px;
  object-fit: cover;
}

/* Make sure buttons fit well in modal */
.map-info-modal-content .campaign-actions {
  display: flex;
  gap: 10px;
}

.map-info-modal-content .campaign-btn-play,
.map-info-modal-content .campaign-btn-locked {
  min-width: 0;
  flex: 1;
}

/* ==================== TOURNAMENT SYSTEM ==================== */

.hex-tournament-info {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  padding: 4px;
}

.hex-arena-name {
  font-size: 0.6em;
  font-weight: bold;
  text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.8);
  color: #fff;
  text-align: center;
  line-height: 1.1;
  max-width: 80px;
  overflow: hidden;
  text-overflow: ellipsis;
}

.hex-tournament-time {
  font-size: 0.55em;
  color: #f1c40f;
  font-weight: bold;
  text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.8);
}

.hex-player-count {
  font-size: 0.55em;
  color: #ddd;
  text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.8);
}

.hex-player-count i {
  font-size: 0.8em;
  margin-right: 2px;
}

.hex-status-badge {
  font-size: 0.5em;
  font-weight: bold;
  padding: 1px 6px;
  border-radius: 8px;
  text-transform: uppercase;
  letter-spacing: 1px;
}

.hex-status-active {
  background: #e74c3c;
  color: #fff;
  animation: pulse-badge 1.5s infinite;
}

@keyframes pulse-badge {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.6; }
}

.hex-tournament-active {
  box-shadow: 0 0 15px 3px rgba(231, 76, 60, 0.6);
  animation: tournament-glow 2s ease-in-out infinite;
}

@keyframes tournament-glow {
  0%, 100% { box-shadow: 0 0 15px 3px rgba(231, 76, 60, 0.6); }
  50% { box-shadow: 0 0 25px 6px rgba(231, 76, 60, 0.9); }
}

.hex-tournament-upcoming {
  box-shadow: 0 0 10px 2px rgba(241, 196, 15, 0.4);
}

.hex-tournament-closed {
  filter: grayscale(70%) brightness(50%);
  opacity: 0.6;
}

.hex-tournament-closed-info {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
}

.hex-status-closed {
  background: rgba(100, 100, 100, 0.8);
  color: #aaa;
  font-size: 0.6rem;
  padding: 1px 5px;
  border-radius: 3px;
  font-weight: 700;
}

.tournament-info-closed {
  text-align: center;
}

.tournament-closed-notice {
  margin-top: 12px;
  padding: 12px;
  background: rgba(100, 100, 100, 0.15);
  border-radius: 8px;
  color: #aaa;
  font-size: 0.9em;
}

.tournament-closed-notice p {
  margin: 4px 0;
}

.tournament-this-arena {
  display: flex;
  justify-content: center;
  gap: 16px;
  margin-top: 8px;
  font-size: 0.9em;
}

.tournament-this-time {
  color: #f1c40f;
  font-weight: bold;
}

.tournament-this-players {
  color: var(--text);
  opacity: 0.8;
}

.tournament-this-players i {
  color: #DAA520;
  margin-right: 4px;
}

/* Tournament info modal */
.tournament-info {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.tournament-header {
  text-align: center;
}

.tournament-arena-name {
  margin: 0 0 4px 0;
  font-size: 1.3em;
  color: var(--text);
}

.tournament-arena-name i {
  margin-right: 6px;
  color: #DAA520;
}

.tournament-arena-desc {
  margin: 0;
  font-size: 0.85em;
  color: var(--text);
  opacity: 0.6;
  font-style: italic;
}

.tournament-recent {
  margin: 10px 0 12px 0;
  padding: 8px 10px;
  background: rgba(128, 128, 128, 0.07);
  border-radius: 6px;
  border: 1px solid rgba(128, 128, 128, 0.12);
}

.tournament-recent-title {
  margin: 0 0 7px 0;
  font-size: 0.8em;
  opacity: 0.6;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.tournament-recent-title i {
  margin-right: 5px;
}

.tournament-recent-entry {
  display: flex;
  flex-direction: column;
  gap: 3px;
  padding: 5px 0;
  border-bottom: 1px solid rgba(128, 128, 128, 0.1);
}

.tournament-recent-entry:last-child {
  border-bottom: none;
  padding-bottom: 0;
}

.tournament-recent-date {
  font-size: 0.7em;
  opacity: 0.45;
}

.tournament-recent-podium {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.podium-entry {
  font-size: 0.82em;
  display: flex;
  align-items: center;
  gap: 5px;
}

.podium-1st i { color: #ffd700; }
.podium-2nd i { color: #b0b0b0; }
.podium-3rd i { color: #cd7f32; }

.tournament-schedule-title {
  margin: 0 0 8px 0;
  font-size: 1em;
  color: var(--text);
}

.tournament-schedule-title i {
  margin-right: 6px;
  color: #DAA520;
}

.tournament-schedule-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.tournament-schedule-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 8px 12px;
  border-radius: 6px;
  background: rgba(128, 128, 128, 0.08);
  border: 1px solid rgba(128, 128, 128, 0.2);
}

.tournament-schedule-item.tournament-active {
  background: rgba(231, 76, 60, 0.15);
  border-color: rgba(231, 76, 60, 0.4);
}

.tournament-schedule-item.tournament-upcoming {
  background: rgba(241, 196, 15, 0.08);
  border-color: rgba(241, 196, 15, 0.2);
}

.tournament-schedule-item.tournament-current {
  border-color: #DAA520;
  border-width: 2px;
}

.tournament-schedule-info {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.tournament-schedule-status {
  font-size: 0.75em;
  font-weight: bold;
  text-transform: uppercase;
  min-width: 80px;
}

.tournament-schedule-status i {
  margin-right: 4px;
}

.tournament-active .tournament-schedule-status {
  color: #e74c3c;
}

.tournament-upcoming .tournament-schedule-status {
  color: #f1c40f;
}

.tournament-completed .tournament-schedule-status {
  color: #7f8c8d;
}

.tournament-schedule-arena {
  font-size: 0.85em;
  color: var(--text);
}

.tournament-schedule-time {
  font-size: 0.8em;
  color: var(--text);
  opacity: 0.6;
}

.tournament-schedule-players {
  font-size: 0.8em;
  color: var(--text);
  opacity: 0.8;
  display: flex;
  align-items: center;
  gap: 4px;
}

.tournament-schedule-players i {
  color: #DAA520;
}

.tournament-actions {
  display: flex;
  justify-content: center;
  padding-top: 8px;
}

.tournament-btn {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 24px;
  border-radius: 8px;
  font-weight: bold;
  cursor: pointer;
  border: none;
  font-size: 0.95em;
  transition: all 0.2s;
}

.tournament-btn-register {
  background: linear-gradient(to bottom, #e6ce6a 0%, #c8960c 50%, #b7892b 100%);
  border: 1px solid #a07820;
  color: #1a0a00;
  font-family: "Cinzel", serif;
  letter-spacing: 0.5px;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.25);
}

.tournament-btn-register:hover {
  background: linear-gradient(to bottom, #f0da80 0%, #d4a20e 50%, #c8960c 100%);
  transform: translateY(-1px);
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3);
}

.tournament-btn-unregister {
  background: transparent;
  border: 1px solid rgba(180, 140, 80, 0.45);
  color: var(--text);
  opacity: 0.75;
}

.tournament-btn-unregister:hover {
  opacity: 1;
  border-color: rgba(180, 140, 80, 0.75);
  transform: translateY(-1px);
}

/* Tournament deck choice (register screen) */
.tournament-register-open,
.tournament-register-registered {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
}

.tournament-deck-choice {
  display: flex;
  flex-direction: column;
  gap: 4px;
  align-self: stretch;
}

.tournament-deck-notice,
.tournament-deck-locked {
  align-self: stretch;
}

.tournament-deck-label {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 0.8em;
  font-weight: bold;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  opacity: 0.85;
}

.tournament-deck-select {
  padding: 8px 10px;
  border-radius: 8px;
  border: 1px solid rgba(180, 140, 80, 0.45);
  background: rgba(20, 14, 6, 0.55);
  color: var(--text);
  font-size: 0.95em;
  cursor: pointer;
}

.tournament-deck-select:hover {
  border-color: rgba(180, 140, 80, 0.75);
}

.tournament-deck-hint {
  margin: 0;
  font-size: 0.72em;
  opacity: 0.6;
}

.tournament-deck-notice,
.tournament-deck-locked {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
  border-radius: 8px;
  font-size: 0.82em;
  background: rgba(72, 61, 139, 0.18);
  border: 1px solid rgba(120, 110, 190, 0.4);
}

.tournament-deck-locked {
  background: rgba(20, 14, 6, 0.45);
  border-color: rgba(180, 140, 80, 0.35);
}

.tournament-deck-locked-default {
  background: rgba(72, 61, 139, 0.18);
  border-color: rgba(120, 110, 190, 0.4);
}

/* Tournament banner above the map */
.tournament-banner {
  display: flex;
  align-items: stretch;
  gap: 12px;
  margin-bottom: 12px;
}

.tournament-banner-card {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 12px 16px;
  border-radius: 10px;
  background: var(--cloud-bg);
  border: 1px solid rgba(128, 128, 128, 0.2);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15);
}

.tournament-banner-card-upcoming {
  border-color: rgba(241, 196, 15, 0.35);
}

.tournament-banner-status {
  font-size: 0.7em;
  font-weight: bold;
  text-transform: uppercase;
  letter-spacing: 1px;
  padding: 3px 8px;
  border-radius: 5px;
  white-space: nowrap;
  display: inline-block;
  width: fit-content;
}

.tournament-banner-live {
  background: rgba(231, 76, 60, 0.25);
  color: #e74c3c;
  border: 1px solid rgba(231, 76, 60, 0.4);
  animation: pulse-badge 1.5s infinite;
}

.tournament-banner-completed {
  background: rgba(127, 140, 141, 0.2);
  color: #95a5a6;
  border: 1px solid rgba(127, 140, 141, 0.3);
}

.tournament-banner-upcoming {
  background: rgba(241, 196, 15, 0.15);
  color: #f1c40f;
  border: 1px solid rgba(241, 196, 15, 0.3);
}

.tournament-banner-details {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.tournament-banner-arena {
  font-weight: bold;
  color: var(--text);
  font-size: 0.95em;
}

.tournament-banner-time {
  color: #f1c40f;
  font-size: 0.85em;
  font-weight: bold;
}

.tournament-banner-players {
  color: var(--text);
  opacity: 0.65;
  font-size: 0.8em;
}

.tournament-banner-players i {
  color: #DAA520;
  margin-right: 3px;
}

.tournament-banner-action {
  margin-top: 4px;
}

.tournament-banner-action .tournament-btn {
  width: 100%;
  justify-content: center;
  padding: 8px 16px;
  font-size: 0.85em;
}

.tournament-banner-prize {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  padding: 12px 16px;
  border-radius: 10px;
  background: var(--cloud-bg);
  border: 1px solid rgba(218, 165, 32, 0.35);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
  min-width: 100px;
}

.tournament-banner-prize-label {
  font-size: 0.7em;
  color: var(--text);
  opacity: 0.6;
  text-transform: uppercase;
  letter-spacing: 1px;
}

.tournament-banner-prize-label i {
  margin-right: 3px;
  color: #DAA520;
}

.tournament-banner-prize-total {
  font-size: 1.4em;
  font-weight: bold;
  color: #f1c40f;
}

.tournament-banner-prize-split {
  display: flex;
  gap: 8px;
  font-size: 0.7em;
}

.prize-1st {
  color: #ffd700;
}

.prize-2nd {
  color: #c0c0c0;
}

.prize-3rd {
  color: #cd7f32;
}

.tournament-banner-prize-split i {
  margin-right: 2px;
}

@media (max-width: 768px) {
  .tournament-banner {
    flex-direction: column;
    gap: 8px;
  }

  .tournament-banner-details {
    justify-content: center;
  }

  .tournament-banner-card {
    align-items: center;
    text-align: center;
  }

  .tournament-banner-prize-split {
    justify-content: center;
  }
}

/* Responsive modal adjustments */
@media (max-width: 768px) {
  .map-info-modal {
    padding: 15px;
  }

  .map-info-modal-container {
    max-width: 100%;
    max-height: 95vh;
  }

  .map-info-modal-close {
    width: 32px;
    height: 32px;
    font-size: 1rem;
    top: 8px;
    right: 8px;
  }
}

@media (max-width: 480px) {
  .map-info-modal {
    padding: 10px;
  }

  .map-info-modal-container {
    max-height: 98vh;
  }

  .map-info-modal-close {
    width: 30px;
    height: 30px;
    top: 6px;
    right: 6px;
  }
}

@media (max-height: 600px) {
  .map-info-modal {
    padding: 10px;
    align-items: flex-start;
  }

  .map-info-modal-container {
    max-height: 98vh;
    margin-top: 10px;
  }

  .map-info-modal-content .campaign-level-image {
    max-height: 150px;
  }
}

@media (max-height: 450px) {
  .map-info-modal-container {
    max-height: 95vh;
  }

  .map-info-modal-content .campaign-level-header {
    padding: 12px;
  }

  .map-info-modal-content .campaign-level-image {
    max-height: 120px;
  }

  .map-info-modal-content .campaign-content {
    padding: 15px;
  }

  .map-info-modal-content .campaign-description {
    font-size: 0.9rem;
  }
}

/* ==================== MODERN PROGRESS BAR ==================== */

.progbar-modern {
  background: var(--cloud-bg2);
  border-bottom: 1px solid rgba(0, 0, 0, 0.1);
  color: var(--text);
}

.progbar-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 20px;
  cursor: pointer;
  transition: background 0.2s ease;
}

.progbar-header:hover {
  background: rgba(0, 0, 0, 0.05);
}

.progbar-title {
  display: flex;
  align-items: center;
  gap: 10px;
  font-weight: 600;
  font-size: 14px;
}

.progbar-title i {
  color: #ffa726;
  font-size: 16px;
}

.progbar-toggle {
  background: none;
  border: none;
  color: var(--text);
  cursor: pointer;
  font-size: 14px;
  transition: transform 0.3s ease;
}

.progbar-content.collapsed {
  max-height: 0;
  overflow: hidden;
}

.progbar-content.collapsed + .progbar-header .progbar-toggle i {
  transform: rotate(-90deg);
}

.progbar-content {
  max-height: 500px;
  overflow: hidden;
  transition: max-height 0.3s ease;
  padding: 0 20px;
}

.progbar-goal {
  padding: 15px 0;
  border-bottom: 1px solid rgba(0, 0, 0, 0.05);
}

.progbar-goal:last-of-type {
  border-bottom: none;
}

.progbar-goal-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  margin-bottom: 10px;
  gap: 10px;
}

.progbar-goal-info {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  flex: 1;
}

.progbar-goal-icon {
  font-size: 20px;
  color: #ffa726;
  flex-shrink: 0;
  margin-top: 2px;
}

.progbar-goal-text {
  flex: 1;
  min-width: 0;
}

.progbar-goal-title {
  font-weight: 600;
  font-size: 13px;
  margin-bottom: 4px;
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.progbar-goal-rarity {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.progbar-goal-desc {
  font-size: 12px;
  opacity: 0.7;
  line-height: 1.4;
}

.progbar-goal-points {
  font-weight: 700;
  font-size: 13px;
  color: #06a77d;
  flex-shrink: 0;
}

.progbar-goal-progress {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.progbar-progress-track {
  height: 8px;
  background: rgba(0, 0, 0, 0.1);
  border-radius: 10px;
  overflow: hidden;
  position: relative;
}

.progbar-progress-fill {
  height: 100%;
  background: #4fc3f7;
  border-radius: 10px;
  transition: width 0.5s ease, background-color 0.3s ease;
  position: relative;
}

.progbar-progress-fill::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(255, 255, 255, 0.3),
    transparent
  );
  animation: shimmer 2s infinite;
}

@keyframes shimmer {
  0% {
    transform: translateX(-100%);
  }
  100% {
    transform: translateX(100%);
  }
}

.progbar-progress-text {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 11px;
}

.progbar-progress-stat {
  opacity: 0.7;
  font-weight: 500;
}

.progbar-progress-percent {
  font-weight: 700;
  color: var(--text);
}

.progbar-footer {
  padding: 15px 0;
  text-align: center;
  border-top: 1px solid rgba(0, 0, 0, 0.05);
  margin-top: 10px;
}

.progbar-view-all {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 16px;
  background: var(--primary-bg);
  color: var(--text-on-dark);
  border-radius: 6px;
  text-decoration: none;
  font-size: 12px;
  font-weight: 600;
  transition: all 0.2s ease;
}

.progbar-view-all:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.progbar-view-all i {
  font-size: 10px;
}

.progbar-empty {
  padding: 20px;
}

.progbar-empty-message {
  text-align: center;
  opacity: 0.6;
}

.progbar-empty-message i {
  font-size: 32px;
  color: #ffa726;
  margin-bottom: 10px;
}

.progbar-empty-message p {
  font-size: 14px;
  margin: 0;
}

/* Responsive */
@media (max-width: 768px) {
  .progbar-header {
    padding: 10px 15px;
  }

  .progbar-content {
    padding: 0 15px;
  }

  .progbar-goal {
    padding: 12px 0;
  }

  .progbar-goal-header {
    flex-direction: column;
    gap: 8px;
  }

  .progbar-goal-points {
    align-self: flex-start;
  }

  .progbar-goal-icon {
    font-size: 18px;
  }

  .progbar-title {
    font-size: 13px;
  }
}

/* Toast Container */
#toast-container {
  position: fixed;
  bottom: 20px;
  right: 20px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  z-index: 1000;
  pointer-events: none;
}

/* Toast Notification */
.toast {
  background-color: #333;
  color: #fff;
  padding: 12px 20px;
  border-radius: 5px;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.2);
  animation:
    toastFadeIn 0.3s ease,
    toastFadeOut 0.5s ease 3s forwards;
}

.toast-action {
  pointer-events: auto;
  display: flex;
  align-items: center;
  gap: 12px;
  background-color: #8b1f1f;
  border: 1px solid rgba(255, 200, 200, 0.35);
  animation: toastFadeIn 0.3s ease;
}

.toast-action .toast-action-text {
  flex: 1;
}

.toast-action-btn {
  background-color: #ffd766;
  color: #4a1a00;
  font-weight: 700;
  border: none;
  border-radius: 4px;
  padding: 6px 14px;
  cursor: pointer;
}

.toast-action-btn:hover {
  background-color: #ffe08a;
}

.toast-close-btn {
  background: transparent;
  border: none;
  color: inherit;
  opacity: 0.7;
  cursor: pointer;
  padding: 4px 6px;
  margin-left: 2px;
  font-size: 1rem;
  line-height: 1;
  border-radius: 4px;
}

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

/* Fade Animations */
@keyframes toastFadeIn {
  from {
    opacity: 0;
    transform: translateY(20px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes toastFadeOut {
  from {
    opacity: 1;
  }

  to {
    opacity: 0;
    transform: translateY(-20px);
  }
}

.fill-button {
  position: relative;
  height: 45px;
  width: 150px;
  margin: 10px 7px;
  padding: 5px 5px;
  font-weight: 700;
  font-size: 15px;
  letter-spacing: 2px;
  color: gray;
  border: 2px #383736 solid;
  border-radius: 4px;
  text-transform: uppercase;
  outline: 0;
  overflow: hidden;
  background: none;
  z-index: 1;
  cursor: pointer;
  transition: 0.08s ease-in;
  -o-transition: 0.08s ease-in;
  -ms-transition: 0.08s ease-in;
  -moz-transition: 0.08s ease-in;
  -webkit-transition: 0.08s ease-in;
}

.fill-button:hover {
  color: whitesmoke;
}

.fill-button:before {
  content: "";
  position: absolute;
  background: #383736;
  bottom: 0;
  left: 0;
  right: 0;
  top: var(--fill-height, 20%);
  /*top: 100%;*/
  z-index: -1;
  -webkit-transition: top 0.09s ease-in;
}

/*.fill-button:hover:before {*/
/*  top: 0;*/
/*}*/
.advisor-wrapper {
  position: fixed;
  bottom: 20px;
  right: 20px;
  z-index: 10010;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 10px;
  pointer-events: none;
}

.advisor-icon-btn {
  width: 68px;
  height: 68px;
  border-radius: 50%;
  background: #2b2b2b;
  border: 3px solid #f5c518;
  cursor: pointer;
  position: relative;
  overflow: visible;
  pointer-events: all;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.5);
  flex-shrink: 0;
}

.advisor-icon-btn:hover {
  transform: scale(1.08);
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.6);
}

.advisor-thumb {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
  border-radius: 50%;
  display: block;
}

.advisor-badge {
  position: absolute;
  top: -4px;
  right: -4px;
  min-width: 22px;
  height: 22px;
  background: #e63946;
  color: #fff;
  border-radius: 50%;
  font-size: 13px;
  font-weight: bold;
  display: none;
  align-items: center;
  justify-content: center;
  border: 2px solid #fff;
  animation: advisorBadgePop 0.3s ease;
  pointer-events: none;
}

@keyframes advisorBadgePop {
  0% { transform: scale(0); }
  60% { transform: scale(1.25); }
  100% { transform: scale(1); }
}

.advisor-wrapper.advisor-unread .advisor-badge {
  display: flex;
}

.advisor-bubble {
  max-width: min(420px, calc(100vw - 110px));
  pointer-events: all;
}

.advisor-wrapper.advisor-minimized .advisor-bubble {
  display: none;
}

.bubble {
  position: relative;
  max-width: 700px;
  width: 100%;
  box-sizing: border-box;
  text-align: center;
  line-height: 1.4em;
  margin: 0;
  background-color: #fff;
  border: 8px solid #333;
  border-radius: 30px;
  font-family: sans-serif;
  padding: 20px;
  font-size: large;
}

/* Ensure speech bubble is the positioning parent */
.speech.bubble {
  position: relative !important;
}

.speech-close-btn {
  position: absolute;
  top: 6px;
  right: 10px;
  background: none;
  border: none;
  font-size: 1.1rem;
  color: #999;
  cursor: pointer;
  padding: 2px 6px;
  line-height: 1;
  border-radius: 50%;
  transition: color 0.15s ease, background 0.15s ease;
}

.speech-close-btn:hover {
  color: #333;
  background: rgba(0, 0, 0, 0.08);
}

.speech-text {
  display: block;
  white-space: pre-line;
}

.speech-actions {
  display: flex;
  gap: 10px;
  justify-content: center;
  margin: 8px 0 4px;
}

.speech-action-btn {
  border: none;
  border-radius: 999px;
  padding: 6px 14px;
  font-size: 0.85rem;
  font-weight: 700;
  cursor: pointer;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.speech-action-primary {
  background: #e63946;
  color: #fff;
  box-shadow: 0 4px 10px rgba(230, 57, 70, 0.35);
}

.speech-action-primary:hover {
  transform: translateY(-1px);
  box-shadow: 0 6px 14px rgba(230, 57, 70, 0.45);
}

.speech-action-secondary {
  background: rgba(255, 255, 255, 0.9);
  color: #333;
  border: 1px solid rgba(0, 0, 0, 0.08);
}

.speech-action-secondary:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.12);
}

.tutorial-skip-btn {
  display: flex;
  justify-content: flex-end;
  gap: 12px;
  margin-top: 16px;
  padding-top: 12px;
  border-top: 1px solid rgba(0, 0, 0, 0.1);
}

.speech-color-buttons {
  display: flex;
  justify-content: center;
  gap: 12px;
  margin-top: 12px;
}

.speech-color-buttons .color-button {
  flex-direction: row;
  font-size: 0.85rem;
  padding: 8px 18px;
  min-width: unset;
  letter-spacing: 0.5px;
}

.speech-cards-row {
  display: flex;
  justify-content: center;
  gap: 16px;
  margin-top: 10px;
}

.speech-card-thumb {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
}

.speech-card-thumb img {
  width: 60px;
  border-radius: 6px;
  border: 2px solid #333;
}

.speech-card-thumb > span {
  font-size: 0.75rem;
  color: #666;
  font-weight: 600;
}

/* Wrapper around the card image so demo overlays can be absolutely
   positioned relative to the image, not the whole thumb (which also
   contains the card name label). */
.speech-card-thumb-img-wrap {
  position: relative;
  display: inline-block;
  line-height: 0;
}

/* === multiDiscard "select then rebound" demo ==========================
   Three cards demo the multi-select flow: each one slides up and gets the
   in-game cyan "SELECTED" treatment in sequence, the trio holds together,
   then they all fade out and slide upward, repositioning below and sliding
   back up into place to restart the loop.

   Cycle = 6s. nth-child controls when each card "selects":
     - card 1: 0.4s   (~7%)
     - card 2: 1.1s   (~18%)
     - card 3: 1.8s   (~30%)
   All three then fade out (~3.8–4.5s), reposition below (~4.5–5s) and
   slide back in (~5–6s). */

.speech-card-thumb.demo-select-cycle .speech-card-thumb-img-wrap {
  display: inline-block;
  /* Animation set by nth-child so each card picks up its own "select" timing. */
  animation-duration: 6s;
  animation-timing-function: ease-out;
  animation-iteration-count: infinite;
}

.speech-card-thumb.demo-select-cycle:nth-child(1) .speech-card-thumb-img-wrap { animation-name: demo-select-cycle-1; }
.speech-card-thumb.demo-select-cycle:nth-child(2) .speech-card-thumb-img-wrap { animation-name: demo-select-cycle-2; }
.speech-card-thumb.demo-select-cycle:nth-child(3) .speech-card-thumb-img-wrap { animation-name: demo-select-cycle-3; }

/* "SELECTED" pill, mirroring the real .long-press::after badge. */
.speech-card-thumb.demo-select-cycle .demo-select-badge {
  position: absolute;
  bottom: -10px;
  left: 50%;
  transform: translateX(-50%);
  background: rgba(46, 196, 182, 0.95);
  color: #083c36;
  font-size: 0.55rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  padding: 2px 6px;
  border-radius: 999px;
  text-transform: uppercase;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.25);
  pointer-events: none;
  opacity: 0;
  animation-duration: 6s;
  animation-iteration-count: infinite;
  animation-timing-function: steps(1, end);
}

.speech-card-thumb.demo-select-cycle:nth-child(1) .demo-select-badge { animation-name: demo-badge-1; }
.speech-card-thumb.demo-select-cycle:nth-child(2) .demo-select-badge { animation-name: demo-badge-2; }
.speech-card-thumb.demo-select-cycle:nth-child(3) .demo-select-badge { animation-name: demo-badge-3; }

/* Card 1: selects almost immediately. */
@keyframes demo-select-cycle-1 {
  0%, 5%   { transform: translateY(0)   scale(1);    opacity: 1; box-shadow: none; filter: none; }
  10%      { transform: translateY(-10px) scale(1.04); opacity: 1; box-shadow: 0 0 14px rgba(46,196,182,0.7), 0 0 26px rgba(46,196,182,0.45); filter: drop-shadow(0 0 2px rgba(46,196,182,0.9)); }
  62%      { transform: translateY(-10px) scale(1.04); opacity: 1; box-shadow: 0 0 14px rgba(46,196,182,0.7), 0 0 26px rgba(46,196,182,0.45); filter: drop-shadow(0 0 2px rgba(46,196,182,0.9)); }
  75%      { transform: translateY(-46px) scale(1.04); opacity: 0; box-shadow: 0 0 14px rgba(46,196,182,0.5); filter: drop-shadow(0 0 2px rgba(46,196,182,0.9)); }
  76%      { transform: translateY(36px)  scale(1);    opacity: 0; box-shadow: none; filter: none; }
  100%     { transform: translateY(0)    scale(1);    opacity: 1; box-shadow: none; filter: none; }
}

/* Card 2: selects slightly later. */
@keyframes demo-select-cycle-2 {
  0%, 16%  { transform: translateY(0)   scale(1);    opacity: 1; box-shadow: none; filter: none; }
  21%      { transform: translateY(-10px) scale(1.04); opacity: 1; box-shadow: 0 0 14px rgba(46,196,182,0.7), 0 0 26px rgba(46,196,182,0.45); filter: drop-shadow(0 0 2px rgba(46,196,182,0.9)); }
  62%      { transform: translateY(-10px) scale(1.04); opacity: 1; box-shadow: 0 0 14px rgba(46,196,182,0.7), 0 0 26px rgba(46,196,182,0.45); filter: drop-shadow(0 0 2px rgba(46,196,182,0.9)); }
  75%      { transform: translateY(-46px) scale(1.04); opacity: 0; box-shadow: 0 0 14px rgba(46,196,182,0.5); filter: drop-shadow(0 0 2px rgba(46,196,182,0.9)); }
  76%      { transform: translateY(36px)  scale(1);    opacity: 0; box-shadow: none; filter: none; }
  100%     { transform: translateY(0)    scale(1);    opacity: 1; box-shadow: none; filter: none; }
}

/* Card 3: selects last. */
@keyframes demo-select-cycle-3 {
  0%, 28%  { transform: translateY(0)   scale(1);    opacity: 1; box-shadow: none; filter: none; }
  33%      { transform: translateY(-10px) scale(1.04); opacity: 1; box-shadow: 0 0 14px rgba(46,196,182,0.7), 0 0 26px rgba(46,196,182,0.45); filter: drop-shadow(0 0 2px rgba(46,196,182,0.9)); }
  62%      { transform: translateY(-10px) scale(1.04); opacity: 1; box-shadow: 0 0 14px rgba(46,196,182,0.7), 0 0 26px rgba(46,196,182,0.45); filter: drop-shadow(0 0 2px rgba(46,196,182,0.9)); }
  75%      { transform: translateY(-46px) scale(1.04); opacity: 0; box-shadow: 0 0 14px rgba(46,196,182,0.5); filter: drop-shadow(0 0 2px rgba(46,196,182,0.9)); }
  76%      { transform: translateY(36px)  scale(1);    opacity: 0; box-shadow: none; filter: none; }
  100%     { transform: translateY(0)    scale(1);    opacity: 1; box-shadow: none; filter: none; }
}

/* Card-shadow on the <img> via box-shadow needs the image to clip cleanly,
   so make sure the wrap doesn't crop it. */
.speech-card-thumb.demo-select-cycle img {
  border-radius: 6px;
  border: 2px solid #333;
}

/* Badge fades in only while the card is "selected" and out before fade. */
@keyframes demo-badge-1 {
  0%, 9%   { opacity: 0; }
  10%, 74% { opacity: 1; }
  75%, 100%{ opacity: 0; }
}
@keyframes demo-badge-2 {
  0%, 20%  { opacity: 0; }
  21%, 74% { opacity: 1; }
  75%, 100%{ opacity: 0; }
}
@keyframes demo-badge-3 {
  0%, 32%  { opacity: 0; }
  33%, 74% { opacity: 1; }
  75%, 100%{ opacity: 0; }
}

/* === Per-method "selecting" overlays =================================
   Overlay each card with the gesture being demonstrated, only during the
   tiny window when that card transitions from idle → selected.
   Windows (matching the demo-select-cycle-N keyframes):
     - card 1 long-press: 3% → 11%
     - card 2 selector:   14% → 22%
     - card 3 swipe-up:   26% → 34%
*/

.demo-method-overlay {
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0;
}

/* Show finger on touch devices, cursor on mouse devices. */
.demo-method-overlay .demo-cursor-icon { display: none; }
.demo-method-overlay .demo-touch-icon  { display: inline; }
@media (pointer: fine) {
  .demo-method-overlay .demo-touch-icon  { display: none; }
  .demo-method-overlay .demo-cursor-icon { display: inline; }
}

.demo-method-overlay i {
  position: absolute;
  font-size: 1rem;
  color: #fff;
  text-shadow: 0 1px 2px rgba(0,0,0,0.7);
  filter: drop-shadow(0 0 2px rgba(0,0,0,0.5));
}

/* ── Card 1: long-press (click & hold) ───────────────────────────── */
.demo-overlay-long-press {
  animation: demo-overlay-window-1 6s linear infinite;
}
.demo-overlay-long-press i {
  left: 50%;
  top: 55%;
  transform: translate(-50%, -50%);
  animation: demo-long-press-finger 6s ease-out infinite;
}
.demo-overlay-long-press .demo-touch-ripple {
  position: absolute;
  left: 50%;
  top: 55%;
  width: 14px;
  height: 14px;
  margin: -7px 0 0 -7px;
  border-radius: 50%;
  background: rgba(46, 196, 182, 0.85);
  box-shadow: 0 0 0 0 rgba(46, 196, 182, 0.7);
  transform: scale(0);
  animation: demo-long-press-ripple 6s ease-out infinite;
}

/* Show overlay only during card-1's select window. */
@keyframes demo-overlay-window-1 {
  0%, 2%, 12%, 100% { opacity: 0; }
  3%, 11%           { opacity: 1; }
}
@keyframes demo-long-press-finger {
  0%, 1%   { transform: translate(-50%, 30%) scale(0.85); opacity: 0; }
  3%       { transform: translate(-50%, -50%) scale(1); opacity: 1; }
  5%, 9%   { transform: translate(-50%, -45%) scale(0.9); opacity: 1; }
  11%      { transform: translate(-50%, -65%) scale(1); opacity: 0.7; }
  12%, 100%{ opacity: 0; transform: translate(-50%, -65%) scale(1); }
}
@keyframes demo-long-press-ripple {
  0%, 4%   { transform: scale(0); opacity: 0; box-shadow: 0 0 0 0 rgba(46,196,182,0.6); }
  5%       { transform: scale(0.6); opacity: 1; box-shadow: 0 0 0 0 rgba(46,196,182,0.7); }
  10%      { transform: scale(2.4); opacity: 0; box-shadow: 0 0 0 14px rgba(46,196,182,0); }
  11%, 100%{ transform: scale(0); opacity: 0; }
}

/* ── Card 2: top-right corner selector ───────────────────────────── */
.demo-overlay-selector {
  animation: demo-overlay-window-2 6s linear infinite;
}
.demo-overlay-selector .demo-corner-glow {
  position: absolute;
  top: 0;
  right: 0;
  width: 18px;
  height: 18px;
  background: radial-gradient(circle at top right, rgba(255, 215, 0, 0.95) 0%, rgba(255, 215, 0, 0.5) 50%, rgba(255, 215, 0, 0) 100%);
  border-top-right-radius: 6px;
  box-shadow: 0 0 8px rgba(255, 215, 0, 0.8);
  animation: demo-corner-pulse 6s ease-in-out infinite;
}
.demo-overlay-selector i {
  top: 0;
  right: 0;
  transform: translate(-25%, -25%) scale(0.9);
  font-size: 0.85rem;
  animation: demo-selector-finger 6s ease-out infinite;
}
@keyframes demo-overlay-window-2 {
  0%, 13%, 23%, 100% { opacity: 0; }
  14%, 22%           { opacity: 1; }
}
@keyframes demo-corner-pulse {
  0%, 13%  { transform: scale(0.6); opacity: 0; }
  14%      { transform: scale(0.8); opacity: 1; }
  18%      { transform: scale(1.4); opacity: 1; }
  22%      { transform: scale(0.9); opacity: 0.6; }
  23%, 100%{ opacity: 0; }
}
@keyframes demo-selector-finger {
  0%, 13%  { transform: translate(40%, -90%) scale(1); opacity: 0; }
  16%      { transform: translate(-25%, -25%) scale(0.95); opacity: 1; }
  19%, 21% { transform: translate(-15%, -15%) scale(0.85); opacity: 1; }
  22%      { transform: translate(20%, -50%) scale(1); opacity: 0; }
  23%, 100%{ opacity: 0; }
}

/* ── Card 3: swipe-up gesture ────────────────────────────────────── */
.demo-overlay-swipe-up {
  animation: demo-overlay-window-3 6s linear infinite;
}
.demo-overlay-swipe-up .demo-swipe-trail {
  position: absolute;
  left: 50%;
  bottom: 5%;
  width: 3px;
  height: 0;
  margin-left: -1.5px;
  background: linear-gradient(to top, rgba(46, 196, 182, 0.7), rgba(46, 196, 182, 0));
  border-radius: 999px;
  animation: demo-swipe-trail 6s ease-out infinite;
}
.demo-overlay-swipe-up i {
  left: 50%;
  bottom: 0;
  transform: translateX(-50%);
  animation: demo-swipe-finger 6s ease-out infinite;
}
@keyframes demo-overlay-window-3 {
  0%, 25%, 35%, 100% { opacity: 0; }
  26%, 34%           { opacity: 1; }
}
@keyframes demo-swipe-finger {
  0%, 25%  { bottom: -20%; opacity: 0; }
  27%      { bottom: -10%; opacity: 1; }
  32%      { bottom: 70%;  opacity: 1; }
  34%      { bottom: 95%;  opacity: 0; }
  35%, 100%{ opacity: 0; }
}
@keyframes demo-swipe-trail {
  0%, 26%  { height: 0;   bottom: 5%;  opacity: 0; }
  28%      { height: 10%; bottom: 5%;  opacity: 1; }
  32%      { height: 60%; bottom: 5%;  opacity: 1; }
  34%      { height: 75%; bottom: 5%;  opacity: 0; }
  35%, 100%{ opacity: 0; }
}

/* Reduced motion: hold the cards in their final selected state without
   looping the fade-in/out, and hide the gesture overlays entirely. */
@media (prefers-reduced-motion: reduce) {
  .speech-card-thumb.demo-select-cycle .speech-card-thumb-img-wrap,
  .speech-card-thumb.demo-select-cycle .demo-select-badge,
  .demo-method-overlay,
  .demo-method-overlay * {
    animation: none;
  }
  .speech-card-thumb.demo-select-cycle .speech-card-thumb-img-wrap {
    transform: translateY(-10px) scale(1.04);
    box-shadow: 0 0 14px rgba(46,196,182,0.7), 0 0 26px rgba(46,196,182,0.45);
  }
  .speech-card-thumb.demo-select-cycle .demo-select-badge {
    opacity: 1;
  }
  .demo-method-overlay { opacity: 0; }
}

.speech-card-effect {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 4px;
  font-size: 0.85rem;
  font-weight: 700;
}

.speech-card-effect img {
  width: 18px;
  height: 18px;
  border: none;
  border-radius: 0;
}

.speech-effect-from {
  color: #888;
}

.speech-effect-to,
.speech-effect-positive {
  color: #28a745;
}

.speech-effect-negative {
  color: #e63946;
}

.speech-card-effect i {
  font-size: 0.7rem;
  color: #888;
}

.speech-tutorial-buttons {
  display: flex;
  justify-content: center;
  gap: 10px;
  margin-top: 12px;
}

.proceed-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: rgba(40, 167, 69, 0.1);
  color: #28a745;
  border: 2px solid #28a745;
  border-radius: 20px;
  padding: 8px 16px;
  font-weight: 600;
  font-size: 0.9rem;
  cursor: pointer;
  transition: all 0.2s ease;
}

.proceed-btn:hover {
  background: rgba(40, 167, 69, 0.2);
  transform: translateY(-1px);
  box-shadow: 0 4px 10px rgba(40, 167, 69, 0.25);
}

.proceed-btn:active {
  transform: translateY(0);
}

.proceed-btn i {
  font-size: 1rem;
}

.skip-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: rgba(230, 57, 70, 0.1);
  color: #e63946;
  border: 2px solid #e63946;
  border-radius: 20px;
  padding: 8px 16px;
  font-weight: 600;
  font-size: 0.9rem;
  cursor: pointer;
  transition: all 0.2s ease;
}

.skip-btn:hover {
  background: rgba(230, 57, 70, 0.2);
  transform: translateY(-1px);
  box-shadow: 0 4px 10px rgba(230, 57, 70, 0.25);
}

.skip-btn:active {
  transform: translateY(0);
}

.skip-btn i {
  font-size: 1rem;
}

p.thought {
  width: 300px;
  border-radius: 200px;
  padding: 30px;
}

.bubble:before,
.bubble:after {
  content: none;
}

.advisor-bubble {
  position: relative;
}

.advisor-bubble:before,
.advisor-bubble:after {
  content: " ";
  position: absolute;
  width: 0;
  height: 0;
}

.advisor-bubble:before {
  right: 30px;
  left: auto;
  bottom: -48px;
  border: 24px solid;
  border-color: #333 transparent transparent transparent;
}

.advisor-bubble:after {
  right: 35px;
  left: auto;
  bottom: -31px;
  border: 19px solid;
  border-color: #fff transparent transparent transparent;
}

p.thought:before,
p.thought:after {
  left: 10px;
  bottom: -30px;
  width: 40px;
  height: 40px;
  background-color: #fff;
  border: 8px solid #333;
  -webkit-border-radius: 28px;
  -moz-border-radius: 28px;
  border-radius: 28px;
}

p.thought:after {
  width: 20px;
  height: 20px;
  left: 5px;
  bottom: -40px;
  -webkit-border-radius: 18px;
  -moz-border-radius: 18px;
  border-radius: 18px;
}

.speech-image {
  position: absolute;
  bottom: 0;
  left: 0;
  /*width: 50vw; /* Half of the screen width */
  height: 50vh; /* Half of the screen height */
  object-fit: cover;
}

/* Tutorial builder pop animation */
@keyframes tutorialBuilderPop {
  0%   { transform: scale(1);    filter: none; }
  25%  { transform: scale(1.7);  filter: drop-shadow(0 0 8px rgba(255, 200, 50, 0.95)); }
  55%  { transform: scale(1.45); filter: drop-shadow(0 0 5px rgba(255, 200, 50, 0.7)); }
  80%  { transform: scale(1.15); filter: none; }
  100% { transform: scale(1);    filter: none; }
}

.tutorial-builder-pop {
  animation: tutorialBuilderPop 1.4s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
  position: relative;
  z-index: 5;
}

/* Tutorial cursor / finger animation */
.tutorial-cursor {
  position: fixed;
  font-size: 52px;
  z-index: 10020;
  pointer-events: none;
  color: #fff;
  filter: drop-shadow(2px 3px 6px rgba(0, 0, 0, 0.85));
  transition: left 0.85s cubic-bezier(0.25, 0.46, 0.45, 0.94),
              top 0.85s cubic-bezier(0.25, 0.46, 0.45, 0.94),
              opacity 0.35s ease;
  transform-origin: top left;
  opacity: 0;
}

.tutorial-cursor.tutorial-cursor-visible {
  opacity: 1;
}

@keyframes tutorialClick {
  0%   { transform: scale(1); }
  35%  { transform: scale(0.72); }
  70%  { transform: scale(1.08); }
  100% { transform: scale(1); }
}

.tutorial-cursor.tutorial-cursor-click {
  animation: tutorialClick 0.35s ease forwards;
}

/* Ripple that appears at click point */
.tutorial-click-ripple {
  position: fixed;
  width: 50px;
  height: 50px;
  border-radius: 50%;
  border: 3px solid rgba(255, 255, 255, 0.9);
  pointer-events: none;
  z-index: 10019;
  transform: translate(-50%, -50%) scale(0);
  animation: tutorialRipple 0.5s ease-out forwards;
}

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

/* ── Tutorial Intro Overlay ── */
.tutorial-intro-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.82);
  z-index: 10010;
  transition: opacity 0.4s ease;
  opacity: 0;
  pointer-events: all;
  cursor: pointer;
}
.tutorial-intro-overlay.active { opacity: 1; }
.tutorial-intro-overlay.fade-out { opacity: 0; }

.academy-spotlight-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.76);
  z-index: 9000;
  transition: opacity 0.25s ease;
  opacity: 0;
  pointer-events: all;
}
.academy-spotlight-overlay.active { opacity: 1; }
.academy-spotlight-overlay.fade-out { opacity: 0; }

.academy-lightning-breakdown-overlay {
  cursor: default;
}

.academy-lightning-equation {
  position: fixed;
  top: 22%;
  left: 50%;
  transform: translateX(-50%);
  z-index: 10014;
  padding: 10px 16px;
  border-radius: 8px;
  border: 1px solid rgba(255, 215, 120, 0.6);
  background: rgba(20, 16, 8, 0.92);
  color: #ffe287;
  font-weight: 800;
  font-size: 1.1rem;
  letter-spacing: 0.5px;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.8);
  transition: opacity 0.2s ease;
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.academy-eq-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 8px;
  border-radius: 6px;
  background: rgba(255, 215, 120, 0.14);
  border: 1px solid rgba(255, 215, 120, 0.35);
  line-height: 1;
}

.academy-eq-chip img {
  width: 16px;
  height: 16px;
  object-fit: contain;
}

.academy-eq-op {
  opacity: 0.85;
  font-weight: 700;
}

.academy-lightning-equation.fade-out {
  opacity: 0;
}

.academy-lightning-caption {
  position: fixed;
  top: calc(22% + 58px);
  left: 50%;
  transform: translateX(-50%);
  z-index: 10014;
  color: #ffe9a8;
  font-size: 0.92rem;
  font-weight: 600;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.85);
  transition: opacity 0.2s ease;
  white-space: nowrap;
}

.academy-lightning-caption.fade-out {
  opacity: 0;
}

.academy-lightning-attack-highlight {
  display: inline-block;
  border-radius: 6px;
  padding: 1px 6px;
  background: rgba(255, 214, 64, 0.22);
  box-shadow:
    0 0 0 2px rgba(255, 214, 64, 0.72),
    0 0 16px rgba(255, 214, 64, 0.4);
  color: #fff7cc !important;
}

.tutorial-intro-spotlight {
  position: relative;
  z-index: 10011 !important;
  transition: box-shadow 0.4s ease, transform 0.3s ease;
  box-shadow: 0 0 0 4px rgba(255, 215, 0, 0.7), 0 0 20px 8px rgba(255, 215, 0, 0.3);
  border-radius: 8px;
}
/* Force readable white text inside spotlighted resource stats (light theme
   dims the numbers too much against the yellow glow). */
.tutorial-intro-spotlight .resource-value,
.tutorial-intro-spotlight .resource-inc-value,
.tutorial-intro-spotlight .number {
  color: #fff !important;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.85), 0 0 4px rgba(0, 0, 0, 0.6) !important;
  -webkit-text-stroke: 0 !important;
}

/* Advisor bubble override during intro — keep above overlay */
.tutorial-intro-active .advisor-wrapper {
  z-index: 10012 !important;
}
.tutorial-intro-active .advisor-bubble {
  z-index: 10013 !important;
}
.tutorial-intro-active .advisor-icon-btn {
  z-index: 10013 !important;
}

.academy-spotlight-active .advisor-wrapper {
  z-index: 10012 !important;
}
.academy-spotlight-active .advisor-bubble {
  z-index: 10013 !important;
}
.academy-spotlight-active .advisor-icon-btn {
  z-index: 10013 !important;
}

/* Intro advisor content panel */
.tutorial-intro-content {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

/* Night: dim the demo cards the intro animates in. A scrim, not a filter —
   one of those cards carries an inline `filter: grayscale(100%)` to show what
   an unaffordable card looks like, and a stylesheet filter would replace it.
   The chips and values are positioned, so they still paint over the scrim.
   Both dark signals, with a light override, as elsewhere. */
:root[data-theme="dark"] .tutorial-intro-content .card::after {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(4, 3, 10, 0.34);
  pointer-events: none;
}

@media (prefers-color-scheme: dark) {
  .tutorial-intro-content .card::after {
    content: "";
    position: absolute;
    inset: 0;
    background: rgba(4, 3, 10, 0.34);
    pointer-events: none;
  }
}

:root[data-theme="light"] .tutorial-intro-content .card::after {
  content: none;
}
.tutorial-intro-text {
  font-size: 0.95rem;
  line-height: 1.5;
  color: #222;
}
.tutorial-intro-next {
  align-self: flex-end;
  padding: 8px 20px;
  background: linear-gradient(135deg, #4a90d9, #357abd);
  color: #fff;
  border: none;
  border-radius: 6px;
  font-size: 0.9rem;
  font-weight: 600;
  cursor: pointer;
  transition: transform 0.15s, box-shadow 0.15s;
  font-family: inherit;
}
.tutorial-intro-next:hover {
  transform: translateY(-1px);
  box-shadow: 0 3px 10px rgba(74, 144, 217, 0.4);
}

/* Card comparison in intro */
.tutorial-intro-cards {
  display: flex;
  gap: 16px;
  justify-content: center;
  align-items: center;
  margin: 8px 0;
}
.tutorial-intro-card-demo {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
}
.tutorial-intro-card-demo .card {
  border-radius: 6px;
  border: 2px solid rgba(255,255,255,0.2);
}
.tutorial-intro-card-demo span {
  font-size: 0.75rem;
  font-weight: 600;
  color: #555;
}
.tutorial-intro-card-demo.playable span { color: #2e7d32; }
.tutorial-intro-card-demo.unplayable span { color: #c62828; }

/* Large card display in intro */
.tutorial-intro-card-large {
  display: flex;
  justify-content: center;
  margin: 4px 0;
}
.tutorial-intro-card-large .card {
  border-radius: 8px;
  border: 2px solid rgba(255,215,0,0.5);
  box-shadow: 0 0 12px rgba(255,215,0,0.2);
}

/* Highlighted section on tutorial card (cost or effect area) */
.tutorial-highlight-section {
  border: 4px solid #ffd700;
  border-radius: 6px;
  padding: 4px 6px;
}

/* Arrow pointer for card sections */
.tutorial-intro-pointer {
  display: flex;
  align-items: center;
  gap: 8px;
  background: rgba(229, 57, 53, 0.08);
  border: 1px solid rgba(229, 57, 53, 0.3);
  border-radius: 6px;
  padding: 6px 10px;
  font-size: 0.82rem;
  color: #b71c1c;
}
.tutorial-intro-pointer i {
  font-size: 1rem;
}

/* Responsive adjustments for speech bubble on mobile */
@media (max-width: 768px) {
  .bubble {
    padding: 15px;
    font-size: medium;
  }
  .tutorial-intro-card-demo .card { width: 60px !important; height: 120px !important; }
  .tutorial-intro-card-demo .card .card-name { font-size: 9px !important; max-width: 50px !important; }
  .tutorial-intro-card-large .card { width: 100px !important; height: 180px !important; }
}

/* Cards Overview Grid */
.cards-overview-header {
  text-align: center;
  margin-bottom: 30px;
}

.cards-overview-header h3 {
  margin: 0 0 10px 0;
  font-size: 1.8rem;
  font-family: "Cinzel", serif;
  color: var(--papyrus-text);
}

.cards-overview-subtitle {
  margin: 0;
  font-size: 0.95rem;
  color: var(--text);
  opacity: 0.8;
  letter-spacing: 0.5px;
}

.cards-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 20px;
  margin-bottom: 30px;
}

.card-grid-item {
  display: flex;
  flex-direction: column;
  text-decoration: none;
  color: inherit;
  border-radius: 2px;
  overflow: hidden;
  background-color: var(--cloud-bg);
  background-image: var(--dirt-texture-url);
  background-repeat: repeat;
  border: 1px solid var(--surface-border);
  transition: all 0.3s ease;
  cursor: pointer;
  height: 100%;
}

.card-grid-item:hover {
  transform: translateY(-8px);
  border-color: #c8960c;
  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.3);
}

.card-grid-item-recent,
.card-grid-item-recent:hover {
  border-color: #ffd24a;
  box-shadow: 0 0 0 3px #ffd24a;
}

.deck-builder-card.card-grid-item-recent {
  border-color: #ffd24a;
  box-shadow: 0 0 0 3px #ffd24a, 0 3px 12px rgba(0, 0, 0, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

.card-grid-image {
  position: relative;
  width: 100%;
  aspect-ratio: 3 / 4;
  background-size: cover;
  background-position: center;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  padding-bottom: 10px;
}

.card-grid-overlay {
  position: absolute;
  inset: 0;
}

.deck-count-badge {
  position: absolute;
  top: 6px;
  left: 6px;
  display: inline-flex;
  align-items: center;
  cursor: default;
}

.card-grid-overlay .card-type-badge {
  position: absolute;
  bottom: 6px;
  left: 50%;
  transform: translateX(-50%);
  white-space: nowrap;
}

.deck-count-number {
  background: rgba(15, 15, 25, 0.75);
  color: #fff;
  font-size: 0.7rem;
  font-weight: 700;
  padding: 3px 7px;
  border-radius: 20px;
  border: 1px solid rgba(255, 255, 255, 0.2);
  backdrop-filter: blur(4px);
  letter-spacing: 0.3px;
}

.deck-count-tooltip {
  display: none;
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  transform: none;
  background: rgba(15, 15, 25, 0.92);
  color: #fff;
  font-size: 0.78rem;
  font-family: "Comfortaa", sans-serif;
  padding: 5px 10px;
  border-radius: 6px;
  width: max-content;
  max-width: 160px;
  white-space: normal;
  line-height: 1.35;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.45);
  z-index: 10;
  pointer-events: none;
}

.deck-count-badge:hover .deck-count-tooltip {
  display: block;
}

.card-type-badge {
  padding: 6px 12px;
  border-radius: 2px;
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  background: rgba(0, 0, 0, 0.6);
  color: white;
  backdrop-filter: blur(4px);
  border: 1px solid rgba(255, 255, 255, 0.2);
}

.card-type-offense {
  background: rgba(205, 92, 92, 0.7);
}

.card-type-magic {
  background: rgba(173, 216, 230, 0.7);
  color: #333;
}

.card-type-defense {
  background: rgba(139, 69, 19, 0.7);
}

.card-type-special {
  background: rgba(128, 128, 128, 0.7);
}

.card-type-resource {
  background: rgba(255, 228, 181, 0.7);
  color: #333;
}

.card-grid-info {
  padding: 12px 12px;
  flex-grow: 1;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.card-grid-title {
  margin: 0 0 8px 0;
  font-size: 0.95rem;
  font-weight: 600;
  font-family: "Cinzel", serif;
  color: var(--papyrus-text);
  line-height: 1.3;
  word-break: break-word;
  text-transform: capitalize;
}

.card-grid-costs {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.cost-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 8px;
  background: rgba(0, 0, 0, 0.55);
  border-radius: 2px;
  font-size: 0.8rem;
  color: white;
  font-weight: 500;
}

.tutorial-nav-link {
  transition: all 0.2s ease;
  border-radius: 6px;
  padding: 8px 16px;
  display: inline-block;
  border: 1px solid transparent;
}

.tutorial-nav-link:hover {
  background: rgba(200, 150, 12, 0.12);
  border-color: #c8960c;
}

/* Card Details View */
.card-details-container {
  display: flex;
  flex-direction: column;
  gap: 24px;
  background-color: var(--cloud-bg);
  background-image: var(--dirt-texture-url);
  background-repeat: repeat;
  border: 1px solid var(--surface-border);
  border-radius: 2px;
  padding: 28px 32px;
}

.card-details-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--surface-border);
}

.card-back-link {
  font-family: "Cinzel", serif;
  color: var(--papyrus-text);
  text-decoration: none;
  font-size: 0.85rem;
  font-weight: 600;
  padding: 7px 14px;
  border-radius: 2px;
  border: 1px solid var(--surface-border);
  background: rgba(0, 0, 0, 0.15);
  transition: all 0.2s ease;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  letter-spacing: 0.5px;
  text-transform: uppercase;
}

.card-back-link:hover {
  background: rgba(200, 150, 12, 0.15);
  border-color: #c8960c;
}

.card-navigation-counter {
  font-family: "Cinzel", serif;
  color: var(--papyrus-text);
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 1px;
  padding: 6px 12px;
  border: 1px solid var(--surface-border);
  border-radius: 2px;
  background: rgba(0, 0, 0, 0.15);
}

.card-details-content {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 40px;
  align-items: start;
}

.card-details-image-section {
  display: flex;
  justify-content: center;
}

.card-image-wrapper {
  position: relative;
  width: 100%;
  max-width: 400px;
  border-radius: 2px;
  overflow: hidden;
  border: 3px solid var(--surface-border);
  box-shadow:
    0 0 0 1px rgba(0, 0, 0, 0.5),
    0 12px 32px rgba(0, 0, 0, 0.5),
    inset 0 0 0 1px rgba(255, 255, 255, 0.06);
}

.card-details-image {
  width: 100%;
  height: auto;
  display: block;
  border-radius: 0;
  cursor: pointer;
  transition: transform 0.3s ease;
}

.card-details-image:hover {
  transform: scale(1.02);
}

.card-type-badge-large {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 8px 12px;
  border-radius: 0;
  color: white;
  font-family: "Cinzel", serif;
  font-weight: 700;
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 2px;
  text-align: center;
  background: rgba(0, 0, 0, 0.75);
  backdrop-filter: blur(6px);
  border-top: 1px solid rgba(255, 255, 255, 0.15);
}

.card-details-info-section {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.card-details-title-section {
  border-bottom: 1px solid var(--surface-border);
  padding-bottom: 16px;
}

.card-details-title {
  margin: 0;
  font-size: 2rem;
  font-weight: 700;
  font-family: "Cinzel", serif;
  color: var(--papyrus-text);
  text-transform: capitalize;
  line-height: 1.2;
}

.card-purchase-panel {
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 18px;
  background:
    linear-gradient(135deg, rgba(200, 150, 12, 0.12), rgba(0, 0, 0, 0.02)),
    var(--panel-texture-url) center/cover,
    rgba(24, 16, 8, 0.82);
  border: 1px solid rgba(200, 150, 12, 0.3);
  border-radius: 2px;
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.04),
    0 10px 24px rgba(0, 0, 0, 0.22);
}

.card-purchase-topline {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 14px;
}

.card-purchase-copy {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
}

.card-purchase-kicker {
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #c8960c;
  opacity: 0.9;
}

.card-purchase-summary {
  margin: 0;
  font-size: 0.95rem;
  line-height: 1.55;
  color: var(--text);
}

.card-purchase-status {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 6px 10px;
  border-radius: 999px;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  white-space: nowrap;
}

.card-purchase-status-ready {
  color: #214d17;
  background: rgba(173, 214, 122, 0.92);
  border: 1px solid rgba(130, 176, 77, 0.9);
}

.card-purchase-status-waiting {
  color: #f2dc9f;
  background: rgba(55, 39, 14, 0.78);
  border: 1px solid rgba(200, 150, 12, 0.3);
}

.card-purchase-stats {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}

.card-purchase-stat {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 6px;
  padding: 12px 14px;
  background: rgba(13, 10, 6, 0.35);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 2px;
}

.card-purchase-value {
  font-family: "Oswald", sans-serif;
  font-size: 1.35rem;
  font-weight: 700;
  color: #c89a4a;
  line-height: 1;
}

.card-purchase-label {
  color: var(--text);
  font-size: 0.68rem;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  opacity: 0.7;
}

.card-purchase-actions {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}

.card-purchase-hint {
  margin: 0;
  font-size: 0.82rem;
  line-height: 1.45;
  color: var(--text);
  opacity: 0.82;
  flex: 1;
  min-width: 220px;
  padding: 10px 12px;
  background: rgba(0, 0, 0, 0.18);
  border-left: 2px solid rgba(200, 150, 12, 0.55);
  border-radius: 0 2px 2px 0;
}

.card-details-section-label {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 10px 0;
  font-size: 0.8rem;
  font-weight: 700;
  font-family: "Cinzel", serif;
  color: #c8960c;
  text-transform: uppercase;
  letter-spacing: 2px;
}

.card-details-section-label::after {
  content: '';
  flex: 1;
  height: 1px;
  background: var(--surface-border);
}

.card-details-decks-section {
  margin-top: 4px;
}

.card-deck-slot-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.card-deck-slot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 8px 12px;
  background-color: var(--surface-subtle);
  border: 1px solid var(--surface-border);
  border-radius: 4px;
  color: var(--text);
}

.card-deck-slot-name {
  font-weight: 600;
  color: var(--text);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.card-deck-slot-controls {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}

.card-deck-slot-btn {
  width: 28px;
  height: 28px;
  border-radius: 4px;
  border: 1px solid rgba(200, 150, 12, 0.9);
  background: rgba(200, 150, 12, 0.55);
  color: #2a1d00;
  cursor: pointer;
  font-size: 1rem;
  font-weight: 700;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.15s, box-shadow 0.15s;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.15);
}

.card-deck-slot-btn:hover:not(:disabled) {
  background: rgba(200, 150, 12, 0.8);
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

.card-deck-slot-btn:disabled {
  opacity: 0.45;
  cursor: not-allowed;
  background: rgba(150, 150, 150, 0.15);
  border-color: var(--surface-border);
  color: var(--text);
  filter: grayscale(1);
  box-shadow: none;
}

.card-deck-slot-count {
  min-width: 28px;
  text-align: center;
  font-weight: 600;
  color: var(--text);
}

.card-version-history {
  margin-top: 4px;
}

.card-version-gallery {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}

.card-version-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
}

.card-version-thumb {
  width: 80px;
  height: 112px;
  object-fit: cover;
  border-radius: 2px;
  border: 2px solid var(--surface-border);
  cursor: pointer;
  opacity: 0.65;
  transition: opacity 0.2s ease, border-color 0.2s ease;
}

.card-version-thumb:hover {
  opacity: 1;
  border-color: #c8960c;
}

.card-version-label {
  font-family: "Cinzel", serif;
  font-size: 0.65rem;
  color: var(--papyrus-text);
  opacity: 0.6;
  letter-spacing: 0.5px;
}

.card-details-description-section {
  padding: 0;
}

.card-details-description {
  margin: 0;
  font-size: 1rem;
  line-height: 1.85;
  color: var(--text);
  padding: 14px 16px;
  background: rgba(0, 0, 0, 0.18);
  border-left: 3px solid #c8960c;
  border-radius: 0 2px 2px 0;
  font-style: italic;
}

.card-details-stats {
  margin-top: 4px;
}

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

.card-stat-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 10px 8px;
  background: var(--panel-texture-url) center/cover, var(--panel-bg);
  border: 1.5px solid var(--resource-panel-border);
  border-radius: 10px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25);
}

.card-stat-value {
  font-family: 'Oswald', sans-serif;
  font-size: 1.4rem;
  font-weight: 700;
  color: #c89a4a;
  line-height: 1;
  margin-bottom: 4px;
}

.card-stat-label {
  font-size: 0.7rem;
  color: var(--text);
  opacity: 0.65;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.card-navigation-buttons {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 8px;
  padding-top: 16px;
  border-top: 1px solid var(--surface-border);
}

.card-nav-button {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 13px 18px;
  background: rgba(0, 0, 0, 0.2);
  border: 1px solid var(--surface-border);
  border-radius: 2px;
  color: var(--text);
  text-decoration: none;
  font-size: 0.9rem;
  transition: all 0.2s ease;
  cursor: pointer;
}

.card-nav-button:hover {
  background: rgba(200, 150, 12, 0.12);
  border-color: #c8960c;
}

.card-nav-prev:hover {
  /* no transform — medieval doors don't slide */
}

.card-nav-button span {
  flex: 1;
  font-family: "Cinzel", serif;
  font-size: 0.85rem;
  color: var(--papyrus-text);
  text-transform: capitalize;
}

.card-nav-button i {
  font-size: 1rem;
  color: #c8960c;
}

@media (max-width: 860px) {
  .card-details-container {
    padding: 22px 20px;
  }

  .card-details-header {
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
  }

  .card-details-content {
    grid-template-columns: 1fr;
    gap: 24px;
  }
}

@media (max-width: 520px) {
  .card-purchase-topline {
    flex-direction: column;
    align-items: stretch;
  }

  .card-purchase-stats {
    grid-template-columns: 1fr;
  }

  .card-purchase-actions {
    align-items: stretch;
  }

  .buy-card-btn-detail {
    width: 100%;
    align-self: stretch;
  }
}

/* Player List Styles */
.players-container {
  max-width: 700px;
  margin: 0 auto;
  padding: 20px;
}

.players-header {
  display: flex;
  align-items: center;
  gap: 20px;
  margin-bottom: 25px;
  flex-wrap: wrap;
}

.players-title {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 1.8rem;
  font-family: "Cinzel", serif;
  color: var(--text);
  margin: 0;
  flex: 1;
}

.players-title i {
  color: var(--text);
}

.players-count {
  background: var(--cloud-bg);
  padding: 8px 16px;
  border-radius: 20px;
  font-size: 0.9rem;
  color: var(--text);
}

.back-link {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 16px;
  background: var(--cloud-bg);
  border-radius: 8px;
  color: var(--text);
  text-decoration: none;
  font-weight: 500;
  transition: all 0.2s ease;
}

.back-link:hover {
  transform: translateX(-3px);
}

.players-search-section {
  margin-bottom: 16px;
}

.players-search {
  position: relative;
  display: flex;
  align-items: center;
  background: var(--cloud-bg2, rgba(20, 25, 42, 0.4));
  border: 1px solid var(--surface-border, rgba(245, 196, 94, 0.18));
  border-radius: 8px;
  padding: 10px 14px;
  gap: 10px;
  transition: border-color 0.15s;
}

.players-search:focus-within {
  border-color: rgba(245, 196, 94, 0.5);
}

.players-search-icon {
  opacity: 0.6;
  font-size: 14px;
}

.players-search-input {
  flex: 1;
  background: transparent;
  border: none;
  outline: none;
  color: var(--text);
  font-size: 14px;
  font-family: inherit;
  padding: 2px 0;
}

.players-search-input::placeholder {
  color: var(--text);
  opacity: 0.45;
}

.players-search-locked {
  cursor: pointer;
  text-decoration: none;
  color: var(--text);
}

.players-search-locked:hover {
  border-color: rgba(245, 196, 94, 0.5);
}

.players-search-locked-text {
  flex: 1;
  opacity: 0.55;
  font-size: 14px;
}

.players-search-premium-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: rgba(245, 196, 94, 0.15);
  color: #f5c45e;
  border: 1px solid rgba(245, 196, 94, 0.35);
  padding: 2px 8px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.players-list-footer {
  margin-top: 14px;
  padding: 10px 14px;
  text-align: center;
  font-size: 13px;
  opacity: 0.8;
  border-top: 1px dashed var(--surface-border, rgba(245, 196, 94, 0.18));
}

.players-premium-link {
  color: #f5c45e;
  text-decoration: none;
  font-weight: 600;
}

.players-premium-link:hover {
  text-decoration: underline;
}

.players-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.player-card {
  display: flex;
  align-items: center;
  gap: 15px;
  background: var(--cloud-bg);
  padding: 16px 20px;
  border-radius: 12px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  transition: all 0.2s ease;
}

.player-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.player-rank {
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--text);
  opacity: 0.6;
  min-width: 40px;
}

.player-info {
  flex: 1;
  min-width: 0;
}

.player-name {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 1.1rem;
  font-weight: 600;
  color: var(--text);
  margin-bottom: 4px;
}

.player-name i {
  color: var(--text);
  opacity: 0.7;
}

.player-stats {
  display: flex;
  gap: 15px;
  flex-wrap: wrap;
}

.player-stat {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 0.85rem;
  color: var(--text);
  opacity: 0.8;
}

.player-stat i {
  font-size: 0.8rem;
}

.player-stat-date {
  display: none;
}

@media (min-width: 600px) {
  .player-stat-date {
    display: flex;
  }
}

.player-actions {
  display: flex;
  gap: 8px;
}

.player-action-btn {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 10px 16px;
  background: linear-gradient(135deg, #457b9d 0%, #1d3557 100%);
  border: none;
  border-radius: 8px;
  color: white;
  font-size: 0.85rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s ease;
}

.player-action-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(69, 123, 157, 0.4);
}

.player-action-btn i {
  font-size: 0.9rem;
}

.player-action-btn span {
  display: none;
}

@media (min-width: 500px) {
  .player-action-btn span {
    display: inline;
  }
}

.player-action-disabled {
  background: rgba(128, 128, 128, 0.3);
  cursor: not-allowed;
}

.player-action-disabled:hover {
  transform: none;
  box-shadow: none;
}

.player-you-badge {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 8px 14px;
  background: linear-gradient(135deg, #28a745 0%, #1e7e34 100%);
  border-radius: 8px;
  color: white;
  font-size: 0.85rem;
  font-weight: 600;
}

.players-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 60px 20px;
  background: var(--cloud-bg);
  border-radius: 12px;
  text-align: center;
}

.players-empty i {
  font-size: 3rem;
  color: var(--text);
  opacity: 0.4;
  margin-bottom: 16px;
}

.players-empty p {
  color: var(--text);
  font-size: 1.1rem;
  margin: 0;
}

.players-empty-hint {
  font-size: 0.9rem !important;
  opacity: 0.7;
  margin-top: 8px !important;
}

/* Profile Color Picker */
.color-picker-row {
  display: flex;
  align-items: center;
  gap: 12px;
}

.color-input {
  width: 50px;
  height: 40px;
  padding: 0;
  border: none;
  border-radius: 8px;
  cursor: pointer;
  background: transparent;
}

.color-input::-webkit-color-swatch-wrapper {
  padding: 0;
}

.color-input::-webkit-color-swatch {
  border: 2px solid rgba(255, 255, 255, 0.3);
  border-radius: 6px;
}

.color-input::-moz-color-swatch {
  border: 2px solid rgba(255, 255, 255, 0.3);
  border-radius: 6px;
}

.color-preview {
  width: 40px;
  height: 40px;
  border-radius: 8px;
  border: 2px solid rgba(255, 255, 255, 0.3);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
}

.color-value {
  font-family: monospace;
  font-size: 0.9rem;
  opacity: 0.8;
}

/* Game Tooltip (follows cursor, respects Card Help setting) */
.game-tooltip {
  position: fixed;
  z-index: 100000;
  pointer-events: none;
  background: rgba(15, 15, 25, 0.92);
  color: #fff;
  font-size: 0.78rem;
  font-family: "Comfortaa", sans-serif;
  padding: 5px 10px;
  border-radius: 6px;
  max-width: 220px;
  white-space: normal;
  line-height: 1.35;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.45);
  opacity: 0;
  transition: opacity 0.1s ease;
}

.game-tooltip.game-tooltip-visible {
  opacity: 1;
}

/* While hidden, park the (position:fixed) tooltip at the top-left. Its last
   mouse-follow position can sit below the fold, and fixed elements aren't
   contained by overflow:hidden, so it would otherwise extend the page's
   scrollable height (and let the game board scroll). */
.game-tooltip:not(.game-tooltip-visible) {
  top: 0 !important;
  left: 0 !important;
}

/* In-Game Card Help Panel */
.card-help-container {
  width: 100%;
  max-width: 500px;
  margin: 8px auto 0;
  padding: 0 8px;
  box-sizing: border-box;
  /* Reserve the worst-case help height up front — ~3 rows of text + the
     effects/buff row + the panel's padding — so the slot stays a constant
     height. Long descriptions or cards with buffs then fill the reserved space
     instead of growing the page and triggering scrollbars mid-game (e.g. at
     1920x945). The panel itself stays content-sized; only the slot is fixed. */
  min-height: 100px;
}

.card-help-panel {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  background: var(--help-panel-bg);
  border: 2px solid var(--help-panel-border);
  border-radius: 8px;
  padding: 8px 12px;
  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.25), inset 0 1px 0 rgba(255, 255, 255, 0.06);
  min-height: 40px;
  transition: all 0.2s ease;
  /* Cap the panel at the reserved slot height (matches the container's
     min-height) so async-loaded help — long descriptions, buff badges that
     render a beat after load — can NEVER grow the page and trigger a scrollbar
     mid-game. Anything taller scrolls inside the body instead. */
  box-sizing: border-box;
  max-height: 100px;
}

.card-help-icon {
  flex-shrink: 0;
  width: 20px;
  height: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--help-panel-icon);
  font-size: 14px;
}

.card-help-body {
  display: flex;
  flex: 1;
  min-width: 0;
  flex-direction: column;
  gap: 6px;
  /* Scroll inside the capped panel rather than growing it (min-height:0 lets a
     flex child actually shrink so overflow can kick in). */
  min-height: 0;
  overflow-y: auto;
}

.card-help-text {
  flex: 1;
  margin: 0;
  padding: 0;
  font-size: 12px;
  line-height: 1.4;
  color: var(--help-panel-text);
  font-weight: 400;
}

.card-preview-effects {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.card-preview-effects.hidden {
  display: none;
}

/* Resource icon badges inside card help text */
.help-res-icon {
  width: 14px;
  height: 14px;
  vertical-align: middle;
  display: inline-block;
  margin-bottom: 1px;
}

.help-res-badge {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  padding: 1px 5px;
  margin: 0 1px;
  border-radius: 4px;
  background: rgba(255, 255, 255, 0.08);
  font-size: 0.8em;
  font-weight: 700;
  vertical-align: middle;
  white-space: nowrap;
}

.help-res-badge.help-res-cost span { color: var(--help-res-cost, #ff7575); }
.help-res-badge.help-res-gain span { color: var(--help-res-gain, #75ffb3); }
.help-res-badge.help-res-dmg span  { color: var(--help-res-dmg, #ffaa75); }

/* Mobile responsive */
@media (max-width: 768px) {
  .card-help-container {
    margin: 6px auto 0;
    padding: 0 6px;
    /* Mobile has its own compact help sizing and tighter vertical budget — don't
       reserve the desktop worst-case height here. */
    min-height: 0;
  }

  .card-help-panel {
    padding: 6px 10px;
    gap: 6px;
    min-height: 36px;
  }

  .card-help-icon {
    width: 18px;
    height: 18px;
    font-size: 12px;
  }

  .card-help-text {
    font-size: 11px;
  }
}

/* Very small screens */
@media (max-width: 480px) {
  .card-help-panel {
    padding: 5px 8px;
    gap: 6px;
    min-height: 32px;
    border-radius: 6px;
  }

  .card-help-icon {
    width: 16px;
    height: 16px;
    font-size: 11px;
  }

  .card-help-text {
    font-size: 10px;
    line-height: 1.3;
  }
}

/* Large screens with vertical headroom: bigger, more readable card help text.
   Gated on min-height as well as width so short-but-wide displays (e.g.
   1920x945 — the tight case the reserved-height tuning above is sized for)
   keep the compact text and never gain a mid-game scrollbar. The reserved slot
   grows in step with the text so the bigger help still fits without clipping. */
@media (min-width: 1280px) and (min-height: 950px) {
  .card-help-container {
    min-height: 120px;
  }

  .card-help-panel {
    max-height: 120px;
  }

  .card-help-icon {
    width: 22px;
    height: 22px;
    font-size: 15px;
  }

  .card-help-text {
    font-size: 14px;
    line-height: 1.45;
  }
}

/* Online Users Compact List */
.online-users-panel {
  padding: 20px 26px;
  margin-top: 12px;
  width: 100%;
  max-width: 550px;
  margin-left: auto;
  margin-right: auto;
  box-sizing: border-box;
}

.online-users-header {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 14px;
  font-weight: 600;
  color: var(--text);
  margin-bottom: 10px;
  opacity: 0.8;
}

.online-users-header i {
  color: #5b9ee9;
  font-size: 14px;
}

.online-users-self-wrap {
  margin-bottom: 8px;
}

.online-users-self {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 5px 8px;
  background: rgba(91, 158, 233, 0.08);
  border: 1px solid rgba(91, 158, 233, 0.2);
  border-radius: 6px;
  font-size: 13px;
  color: var(--text);
}

.self-name {
  font-weight: 600;
}

.self-you-tag {
  font-size: 9px;
  background: #b8780a;
  color: #fff5d6;
  padding: 2px 14px 2px 7px;
  border-radius: 0;
  clip-path: polygon(0% 0%, calc(100% - 8px) 0%, 100% 50%, calc(100% - 8px) 100%, 0% 100%);
  text-transform: uppercase;
  font-family: "Cinzel", serif;
  font-weight: 700;
  letter-spacing: 1px;
  text-shadow: 0 1px 1px rgba(0, 0, 0, 0.5);
}

.rename-btn {
  display: inline-flex;
  align-items: center;
  margin-left: auto;
  background: none;
  border: none;
  color: var(--papyrus-text);
  opacity: 0.55;
  cursor: pointer;
  padding: 4px 6px;
  font-size: 13px;
  transition: opacity 0.15s ease;
}

.rename-btn:hover {
  opacity: 1;
}

.rename-popover {
  margin-top: 6px;
  padding: 8px;
  background: var(--surface-subtle);
  border: 1px solid var(--surface-border);
  border-radius: 2px;
}

.rename-popover.hidden {
  display: none;
}

.rename-form {
  display: flex;
  gap: 6px;
}

.rename-input {
  flex: 1;
  padding: 6px 10px;
  border: 1px solid rgba(100, 120, 200, 0.25);
  border-radius: 5px;
  background: rgba(0, 0, 0, 0.15);
  color: var(--text);
  font-size: 13px;
  outline: none;
  min-width: 0;
  transition: border-color 0.2s ease;
}

.rename-input::placeholder {
  color: var(--text);
  opacity: 0.4;
}

.rename-input:focus {
  border-color: rgba(91, 158, 233, 0.5);
}

.rename-submit {
  padding: 6px 12px;
  background: rgba(40, 167, 69, 0.15);
  border: 1px solid rgba(40, 167, 69, 0.35);
  border-radius: 5px;
  color: #28a745;
  cursor: pointer;
  font-size: 13px;
  transition: all 0.15s ease;
  flex-shrink: 0;
}

.rename-submit:hover {
  background: rgba(40, 167, 69, 0.25);
  border-color: rgba(40, 167, 69, 0.5);
}

.rename-result {
  font-size: 11px;
  color: #28a745;
  margin-top: 4px;
}

.rename-result:empty {
  display: none;
}

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

.online-users-section {
  display: flex;
  flex-direction: column;
}

.online-section-label {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 11px;
  font-weight: 600;
  color: var(--text);
  opacity: 0.6;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  padding-bottom: 5px;
  border-bottom: 1px solid rgba(100, 120, 200, 0.1);
  margin-bottom: 2px;
}

.section-icon-free {
  font-size: 11px;
  color: #e8902a;
  filter: drop-shadow(0 0 3px rgba(232, 144, 42, 0.7));
  flex-shrink: 0;
}

.section-icon-busy {
  font-size: 11px;
  color: var(--papyrus-text);
  opacity: 0.7;
  flex-shrink: 0;
}

.section-icon-recent {
  font-size: 11px;
  color: rgba(120, 90, 60, 0.5);
  flex-shrink: 0;
}

.online-user-row.recently-online {
  opacity: 0.45;
}

.user-color-dot-offline {
  background-color: rgba(120, 90, 60, 0.35) !important;
  border-color: rgba(120, 90, 60, 0.2);
}

.recently-online-ago {
  font-size: 10px;
  color: var(--text);
  opacity: 0.5;
  white-space: nowrap;
}

.invite-push-btn {
  background: rgba(212, 168, 23, 0.12);
  color: #d4a817;
  border-color: rgba(212, 168, 23, 0.3);
}

.invite-push-btn:hover {
  background: rgba(212, 168, 23, 0.2);
}

/* Push Invite Modal */
.push-invite-modal-box {
  max-width: 400px;
  text-align: center;
}

.push-invite-close {
  position: absolute;
  top: 10px;
  right: 14px;
  background: none;
  border: none;
  color: var(--text);
  opacity: 0.5;
  font-size: 1.2rem;
  cursor: pointer;
  padding: 4px 8px;
  transition: opacity 0.15s;
}

.push-invite-close:hover {
  opacity: 1;
}

#modal > .modal-content.tos-modal-content {
  max-width: 720px;
  position: relative;
}

.tos-modal-content .cloudy-round-panel {
  background: transparent;
  background-image: none;
  border: none;
  box-shadow: none;
  padding: 0;
  max-width: none;
}

.tos-modal-close {
  position: absolute;
  top: 10px;
  right: 14px;
  background: none;
  border: none;
  color: var(--text);
  opacity: 0.5;
  font-size: 1.2rem;
  cursor: pointer;
  padding: 4px 8px;
  transition: opacity 0.15s;
  z-index: 1;
}

.tos-modal-close:hover {
  opacity: 1;
}

.push-invite-header {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin-bottom: 12px;
}

.push-invite-header h3 {
  margin: 0;
  font-family: "Cinzel", serif;
  font-size: 1.1rem;
  color: var(--papyrus-text);
}

.push-invite-icon {
  color: #d4a817;
  font-size: 1.2rem;
}

.push-invite-desc {
  font-size: 0.88rem;
  color: var(--text);
  line-height: 1.5;
  margin: 0 0 14px;
}

.push-invite-cost {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 16px;
  background: rgba(212, 168, 23, 0.1);
  border: 1px solid rgba(212, 168, 23, 0.3);
  border-radius: 6px;
  font-family: "Cinzel", serif;
  font-weight: 700;
  font-size: 0.95rem;
  color: #d4a817;
  margin-bottom: 16px;
}

.push-invite-actions {
  display: flex;
  gap: 10px;
  justify-content: center;
}

.push-invite-send-btn {
  padding: 9px 20px;
  background: linear-gradient(to bottom, #e6ce6a 0%, #c8960c 50%, #b7892b 100%);
  border: 1px solid #b7892b;
  border-radius: 2px;
  color: #1a0a00;
  cursor: pointer;
  font-family: "Cinzel", serif;
  font-weight: 700;
  font-size: 0.82rem;
  letter-spacing: 0.5px;
  transition: opacity 0.2s;
}

.push-invite-send-btn:hover {
  opacity: 0.85;
}

.push-invite-cancel-btn {
  padding: 9px 20px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid var(--surface-border);
  border-radius: 2px;
  color: var(--text);
  cursor: pointer;
  font-family: "Cinzel", serif;
  font-weight: 600;
  font-size: 0.82rem;
  transition: opacity 0.2s;
}

.push-invite-cancel-btn:hover {
  opacity: 0.7;
}

.train-premium-modal-box {
  max-width: 440px;
  text-align: left;
}

.train-premium-close {
  position: absolute;
  top: 10px;
  right: 14px;
  background: none;
  border: none;
  color: var(--text);
  opacity: 0.5;
  font-size: 1.2rem;
  cursor: pointer;
  padding: 4px 8px;
  transition: opacity 0.15s;
}

.train-premium-close:hover {
  opacity: 1;
}

.train-premium-header {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin-bottom: 14px;
  text-align: center;
}

.train-premium-header h3 {
  margin: 0;
  font-family: "Cinzel", serif;
  font-size: 1.1rem;
  color: var(--papyrus-text);
}

.train-premium-icon {
  color: #c8960c;
  font-size: 1.4rem;
}

.train-premium-desc {
  font-size: 0.9rem;
  color: var(--text);
  line-height: 1.55;
  margin: 0 0 14px;
}

.train-premium-pitch {
  padding: 14px 16px;
  background: rgba(200, 150, 12, 0.06);
  border: 1px solid rgba(200, 150, 12, 0.25);
  border-radius: 6px;
  margin-bottom: 16px;
}

.train-premium-why {
  font-size: 0.88rem;
  color: var(--text);
  line-height: 1.5;
  margin: 0 0 10px;
}

.train-premium-perks {
  list-style: none;
  margin: 0;
  padding: 0;
  font-size: 0.87rem;
  color: var(--text);
}

.train-premium-perks li {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 4px 0;
  line-height: 1.4;
}

.train-premium-perks li i {
  color: #c8960c;
  width: 16px;
  text-align: center;
}

.train-premium-actions {
  display: flex;
  gap: 10px;
  justify-content: flex-end;
}

.train-premium-buy-btn {
  padding: 10px 20px;
  background: linear-gradient(to bottom, #e6ce6a 0%, #c8960c 50%, #b7892b 100%);
  border: 1px solid #b7892b;
  border-radius: 2px;
  color: #1a0a00;
  cursor: pointer;
  font-family: "Cinzel", serif;
  font-weight: 700;
  font-size: 0.85rem;
  letter-spacing: 0.5px;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  transition: opacity 0.2s;
}

.train-premium-buy-btn:hover {
  opacity: 0.88;
}

.train-premium-cancel-btn {
  padding: 10px 18px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid var(--surface-border);
  border-radius: 2px;
  color: var(--text);
  cursor: pointer;
  font-family: "Cinzel", serif;
  font-weight: 600;
  font-size: 0.85rem;
  transition: opacity 0.2s;
}

.train-premium-cancel-btn:hover {
  opacity: 0.7;
}

.push-invite-result {
  margin-top: 10px;
  font-size: 0.85rem;
  min-height: 20px;
}

.push-invite-success {
  color: #28a745;
}

.push-invite-error {
  color: #dc3545;
}

.online-users-table {
  display: flex;
  flex-direction: column;
}

.online-user-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 7px 8px;
  font-size: 14px;
  color: var(--text);
  border-bottom: 1px solid rgba(100, 120, 200, 0.07);
  transition: background 0.15s ease;
}

.online-user-row:last-child {
  border-bottom: none;
}

.online-user-row:hover {
  background: rgba(100, 120, 200, 0.08);
}

.online-user-row.in-game {
  opacity: 0.5;
}

.user-color-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  flex-shrink: 0;
  border: 1px solid rgba(255, 255, 255, 0.3);
}

.user-name {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  min-width: 0;
  flex: 1;
}

.user-profile-link {
  color: inherit;
  text-decoration: none;
  cursor: pointer;
  transition: color 0.15s;
}

.user-profile-link:hover {
  color: #06a77d;
  text-decoration: underline;
}

.user-rank-badge {
  font-size: 0.7rem;
  font-weight: 700;
  color: var(--text);
  opacity: 0.6;
  flex-shrink: 0;
  line-height: 1;
}

/* Bot accounts are always visibly labelled — in the online list and on the
   in-game nameplate. They play ranked like any other account. */
.user-bot-badge {
  font-size: 0.68rem;
  color: var(--text);
  opacity: 0.55;
  flex-shrink: 0;
  line-height: 1;
  margin-left: 0.25rem;
}

.bot-badge-icon {
  font-size: 0.72em;
  opacity: 0.6;
  margin-left: 0.3em;
  vertical-align: baseline;
}

.user-rank-badge.top-1 {
  color: #ffd700;
  opacity: 1;
}

.user-rank-badge.top-2 {
  color: #c0c0c0;
  opacity: 1;
}

.user-rank-badge.top-3 {
  color: #cd7f32;
  opacity: 1;
}

.user-rank-badge i {
  font-size: 0.75rem;
}

.user-row-actions {
  margin-left: auto;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  gap: 6px;
}

.user-activity-badge {
  font-size: 11px;
  background: rgba(220, 53, 69, 0.12);
  color: #dc3545;
  padding: 3px 8px;
  border-radius: 4px;
  font-weight: 500;
  white-space: nowrap;
}

.user-activity-badge.available-badge {
  background: rgba(100, 120, 200, 0.1);
  color: var(--text);
  opacity: 0.5;
}

.user-activity-badge.away-badge {
  background: rgba(212, 168, 23, 0.15);
  color: #d4a817;
}

.user-color-dot-away {
  background-color: #d4a817 !important;
  box-shadow: 0 0 4px rgba(212, 168, 23, 0.5);
  border-color: rgba(212, 168, 23, 0.4);
}

.online-user-row.user-away {
  opacity: 0.6;
}

.online-users-empty {
  text-align: center;
  font-size: 13px;
  color: var(--text);
  opacity: 0.6;
  padding: 12px 0;
}

.online-users-more {
  font-size: 10px;
  color: var(--text);
  opacity: 0.6;
  padding: 4px 8px;
  font-style: italic;
  text-align: center;
}

.invite-btn,
.join-btn {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  cursor: pointer;
  padding: 4px 12px;
  font-size: 12px;
  border-radius: 5px;
  transition: all 0.15s ease;
  font-weight: 600;
  white-space: nowrap;
  text-decoration: none;
}

.invite-btn {
  background: rgba(40, 167, 69, 0.12);
  border: 1px solid rgba(40, 167, 69, 0.3);
  color: #28a745;
}

.invite-btn:hover {
  background: rgba(40, 167, 69, 0.22);
  border-color: rgba(40, 167, 69, 0.5);
  color: #218838;
}

.invite-btn-sent,
.invite-btn-sent:hover {
  background: rgba(200, 160, 0, 0.15);
  border-color: rgba(200, 160, 0, 0.5);
  color: #c8a000;
  cursor: default;
}

.join-btn {
  background: rgba(91, 158, 233, 0.12);
  border: 1px solid rgba(91, 158, 233, 0.3);
  color: #5b9ee9;
}

.join-btn:hover {
  background: rgba(91, 158, 233, 0.25);
  border-color: rgba(91, 158, 233, 0.5);
  color: #4a90d9;
}

.you-badge {
  font-size: 8px;
  background: rgba(74, 144, 226, 0.2);
  color: #5b9ee9;
  padding: 1px 4px;
  border-radius: 4px;
  margin-left: auto;
  text-transform: uppercase;
  font-weight: 600;
}

/* Toast Container - Fixed Position */
#toast-container {
  position: fixed;
  top: 20px;
  right: 20px;
  z-index: 10000;
  display: flex;
  flex-direction: column;
  gap: 10px;
  pointer-events: none;
}

#toast-container > * {
  pointer-events: auto;
}

/* Invite Toast */
.invite-toast {
  display: flex;
  align-items: center;
  gap: 12px;
  background: linear-gradient(135deg, #4a90e2, #5b9ee9);
  color: white;
  padding: 12px 16px;
  border-radius: 10px;
  box-shadow: 0 4px 20px rgba(74, 144, 226, 0.4);
  animation: slideInRight 0.3s ease;
  max-width: 350px;
}

.invite-toast .toast-content {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: 1;
  font-size: 13px;
}

.invite-toast .toast-content i {
  font-size: 18px;
}

.invite-toast .toast-action {
  background: white;
  color: #4a90e2;
  padding: 6px 14px;
  border-radius: 6px;
  font-weight: 600;
  font-size: 12px;
  text-decoration: none;
  transition: all 0.2s ease;
}

.invite-toast .toast-action:hover {
  background: #f0f7ff;
  transform: scale(1.05);
}

.invite-toast .toast-buttons {
  display: flex;
  align-items: center;
  gap: 6px;
}

.invite-toast .toast-close {
  background: none;
  border: none;
  color: rgba(255, 255, 255, 0.7);
  cursor: pointer;
  padding: 4px;
  font-size: 14px;
  transition: color 0.2s ease;
}

.invite-toast .toast-close:hover {
  color: white;
}

.invite-toast .toast-mute {
  background: rgba(255, 255, 255, 0.15);
  border: none;
  color: rgba(255, 255, 255, 0.8);
  cursor: pointer;
  padding: 6px 10px;
  font-size: 12px;
  border-radius: 4px;
  transition: all 0.2s ease;
}

.invite-toast .toast-mute:hover {
  background: rgba(255, 255, 255, 0.25);
  color: white;
}

/* Error Toast */
.error-toast {
  display: flex;
  align-items: center;
  gap: 12px;
  background: linear-gradient(135deg, #e74c3c 0%, #c0392b 100%);
  color: white;
  padding: 12px 16px;
  border-radius: 8px;
  box-shadow: 0 4px 12px rgba(231, 76, 60, 0.4);
  animation: slideInRight 0.3s ease-out;
  margin-bottom: 10px;
}

.error-toast .toast-content {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: 1;
  font-size: 14px;
}

.error-toast .toast-content i {
  font-size: 18px;
}

.error-toast .toast-close {
  background: none;
  border: none;
  color: rgba(255, 255, 255, 0.7);
  cursor: pointer;
  padding: 4px;
  font-size: 14px;
  transition: color 0.2s ease;
}

.error-toast .toast-close:hover {
  color: white;
}

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

/* Mobile responsive - Online Users */
@media (max-width: 768px) {
  .online-users-panel {
    max-width: 100%;
    padding: 16px 18px;
    margin-top: 10px;
  }

  .online-users-header {
    font-size: 12px;
    margin-bottom: 8px;
  }

  .online-user-row {
    font-size: 13px;
    padding: 6px 6px;
    gap: 7px;
  }

  .action-label {
    display: none;
  }

  .invite-btn,
  .join-btn {
    font-size: 12px;
    padding: 4px 10px;
  }

  .user-activity-badge {
    font-size: 10px;
    padding: 2px 7px;
  }

  .you-badge {
    font-size: 7px;
    padding: 1px 3px;
  }

  .invite-toast {
    max-width: 300px;
    padding: 10px 12px;
    gap: 8px;
  }

  .invite-toast .toast-content {
    font-size: 12px;
  }

  .invite-toast .toast-action {
    padding: 5px 10px;
    font-size: 11px;
  }

  .error-toast {
    max-width: 300px;
    padding: 10px 12px;
    gap: 8px;
  }

  .error-toast .toast-content {
    font-size: 12px;
  }

  #toast-container {
    top: 10px;
    right: 10px;
    left: 10px;
  }
}

@media (max-width: 480px) {
  .online-users-panel {
    padding: 6px 8px;
    margin-top: 8px;
  }

  .online-user-row {
    font-size: 12px;
    padding: 5px 5px;
    gap: 6px;
  }

  .invite-btn,
  .join-btn {
    font-size: 11px;
    padding: 3px 8px;
  }

  .user-activity-badge {
    font-size: 9px;
    padding: 2px 6px;
  }

  .invite-toast {
    max-width: 280px;
    padding: 8px 10px;
    gap: 6px;
    font-size: 11px;
  }

  .invite-toast .toast-content i {
    font-size: 14px;
  }

  .error-toast {
    max-width: 280px;
    padding: 8px 10px;
    gap: 6px;
    font-size: 11px;
  }

  .error-toast .toast-content i {
    font-size: 14px;
  }
}

/* Inbox Page Styles */
.inbox-container {
  max-width: 900px;
  margin: 40px auto;
  padding: 24px 28px;
  background-color: var(--cloud-bg);
  background-image: var(--dirt-texture-url);
  background-repeat: repeat;
  border: 1px solid var(--surface-border);
  border-radius: 2px;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15);
}

.inbox-header {
  text-align: center;
  margin-bottom: 30px;
  padding-bottom: 20px;
  border-bottom: 1px solid var(--surface-border);
}

.inbox-header h1 {
  font-size: 2rem;
  margin-bottom: 10px;
  font-family: "Cinzel", serif;
  color: var(--papyrus-text);
}

.inbox-header i {
  margin-right: 10px;
  color: #c8960c;
}

.inbox-subtitle {
  font-size: 0.9rem;
  opacity: 0.7;
  color: var(--text);
}

.inbox-error {
  text-align: center;
  padding: 40px 20px;
}

.inbox-error i {
  font-size: 64px;
  color: #dc3545;
  margin-bottom: 20px;
  display: block;
}

.inbox-error p {
  margin-bottom: 20px;
  font-size: 1.1rem;
}

.messages-list {
  display: flex;
  flex-direction: column;
  gap: 15px;
}

.message-item {
  background: var(--cloud-bg2);
  border-radius: 8px;
  padding: 16px;
  transition: all 0.2s ease;
  border-left: 4px solid transparent;
}

.message-item.unread {
  border-left-color: #4a90e2;
  background: rgba(74, 144, 226, 0.05);
}

.message-item.read {
  opacity: 0.8;
}

.message-item:hover {
  transform: translateX(4px);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.message-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 12px;
  flex-wrap: wrap;
  gap: 10px;
}

.message-sender {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--text);
}

.message-sender i {
  color: #c8960c;
}

.message-sender strong {
  font-size: 1.1rem;
}

.unread-dot {
  width: 10px;
  height: 10px;
  background: #c8960c;
  border-radius: 2px;
  display: inline-block;
  animation: pulse 2s infinite;
}

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

.message-time {
  font-size: 0.85rem;
  opacity: 0.6;
  color: var(--text);
}

.message-body {
  margin-bottom: 12px;
  line-height: 1.6;
  padding: 12px;
  background: rgba(0, 0, 0, 0.05);
  border-radius: 6px;
  color: var(--text);
  word-wrap: break-word;
}

.message-actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.btn-message-action {
  background: rgba(0, 0, 0, 0.15);
  border: 1px solid var(--surface-border);
  color: var(--text);
  padding: 6px 12px;
  border-radius: 2px;
  cursor: pointer;
  font-size: 0.85rem;
  transition: all 0.2s ease;
}

.btn-message-action:hover {
  background: rgba(200, 150, 12, 0.15);
  border-color: #c8960c;
}

.btn-message-action i {
  margin-right: 4px;
}

.btn-message-reply {
  background: linear-gradient(to bottom, #e6ce6a 0%, #c8960c 50%, #b7892b 100%);
  border: 1px solid #b7892b;
  color: #1a0a00;
  font-family: "Cinzel", serif;
  font-weight: 700;
}

.btn-message-reply:hover {
  opacity: 0.88;
}

.btn-message-delete {
  background: #dc3545;
  color: white;
  border-color: #dc3545;
}

.btn-message-delete:hover {
  background: #c82333;
}

.inbox-empty {
  text-align: center;
  padding: 60px 20px;
}

.inbox-empty i {
  font-size: 64px;
  color: var(--text);
  opacity: 0.3;
  margin-bottom: 20px;
  display: block;
}

.inbox-empty p {
  font-size: 1.2rem;
  color: var(--text);
  opacity: 0.6;
  margin-bottom: 8px;
}

.inbox-empty-hint {
  font-size: 0.9rem;
  opacity: 0.5;
}

/* Unread Badge in Navbar */
.unread-badge {
  background: #dc3545;
  color: white;
  font-size: 0.7rem;
  padding: 2px 6px;
  border-radius: 10px;
  margin-left: 6px;
  font-weight: bold;
  animation: badgePulse 2s infinite;
}

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

/* Mobile Responsive - Inbox */
@media (max-width: 768px) {
  .inbox-container {
    margin: 20px 10px;
    padding: 15px;
  }

  .inbox-header h1 {
    font-size: 1.5rem;
  }

  .message-item {
    padding: 12px;
  }

  .message-header {
    flex-direction: column;
    align-items: flex-start;
  }

  .message-sender strong {
    font-size: 1rem;
  }

  .message-actions {
    width: 100%;
  }

  .btn-message-action {
    flex: 1;
    text-align: center;
  }
}

@media (max-width: 480px) {
  .inbox-container {
    margin: 10px 5px;
    padding: 10px;
  }

  .inbox-header h1 {
    font-size: 1.3rem;
  }

  .message-body {
    font-size: 0.9rem;
  }

  .btn-message-action {
    font-size: 0.8rem;
    padding: 5px 8px;
  }
}

/* Conversations List Styles */
.conversations-list {
  display: flex;
  flex-direction: column;
  gap: 0;
}

.conversation-item {
  display: flex;
  align-items: center;
  gap: 15px;
  padding: 16px;
  background: rgba(0, 0, 0, 0.1);
  border-bottom: 1px solid var(--surface-border);
  transition: all 0.2s ease;
  cursor: pointer;
  text-decoration: none;
  color: var(--text);
}

.conversation-item:first-child {
  border-top-left-radius: 2px;
  border-top-right-radius: 2px;
}

.conversation-item:last-child {
  border-bottom-left-radius: 2px;
  border-bottom-right-radius: 2px;
  border-bottom: none;
}

.conversation-item:hover {
  background: rgba(200, 150, 12, 0.1);
  border-left: 3px solid #c8960c;
}

.conversation-item.unread {
  background: rgba(200, 150, 12, 0.06);
  border-left: 3px solid #c8960c;
}

.conversation-avatar {
  width: 50px;
  height: 50px;
  border-radius: 2px;
  background: linear-gradient(to bottom, #3a2a00, #1a0a00);
  border: 1px solid var(--surface-border);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #c8960c;
  font-size: 24px;
  flex-shrink: 0;
}

.conversation-content {
  flex: 1;
  min-width: 0;
}

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

.conversation-name {
  font-size: 1rem;
  font-family: "Cinzel", serif;
  color: var(--papyrus-text);
}

.conversation-time {
  font-size: 0.8rem;
  opacity: 0.6;
  color: var(--text);
}

.conversation-preview {
  margin-bottom: 6px;
  font-size: 0.9rem;
  opacity: 0.8;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--text);
}

.conversation-meta {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.message-count {
  font-size: 0.85rem;
  opacity: 0.6;
  color: var(--text);
}

.message-count i {
  margin-right: 4px;
}

.unread-count {
  background: rgba(200, 150, 12, 0.25);
  border: 1px solid #c8960c;
  color: #c8960c;
  font-size: 0.75rem;
  padding: 2px 8px;
  border-radius: 2px;
  font-weight: bold;
}

/* Conversation Thread Styles */
.conversation-container {
  max-width: 900px;
  margin: 20px auto;
  background-color: var(--cloud-bg);
  background-image: var(--dirt-texture-url);
  background-repeat: repeat;
  border: 1px solid var(--surface-border);
  border-radius: 2px;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15);
  display: flex;
  flex-direction: column;
  height: calc(100vh - 140px);
  max-height: 700px;
}

.conversation-header-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 20px;
  border-bottom: 1px solid var(--surface-border);
  background: rgba(0, 0, 0, 0.2);
  border-top-left-radius: 2px;
  border-top-right-radius: 2px;
}

.back-button {
  background: rgba(0, 0, 0, 0.18);
  border: 1px solid var(--surface-border);
  color: var(--papyrus-text);
  padding: 7px 14px;
  border-radius: 2px;
  text-decoration: none;
  transition: all 0.2s ease;
  cursor: pointer;
  font-family: "Cinzel", serif;
  font-size: 0.82rem;
  font-weight: 600;
  letter-spacing: 0.5px;
}

.back-button:hover {
  background: rgba(200, 150, 12, 0.15);
  border-color: #c8960c;
}

.back-button i {
  margin-right: 6px;
}

.conversation-partner-info {
  flex: 1;
  text-align: center;
  font-size: 1.2rem;
  color: var(--text);
}

.conversation-partner-info i {
  margin-right: 8px;
  color: #c8960c;
}

.messages-thread {
  flex: 1;
  overflow-y: auto;
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.message-bubble {
  max-width: 70%;
  padding: 12px 16px;
  border-radius: 2px;
  word-wrap: break-word;
}

.message-bubble.sent {
  align-self: flex-end;
  background: linear-gradient(to bottom, #3a2800, #1a1200);
  border: 1px solid #c8960c;
  color: #e6ce6a;
  border-bottom-right-radius: 0;
}

.message-bubble.received {
  align-self: flex-start;
  background: rgba(0, 0, 0, 0.2);
  color: var(--text);
  border-bottom-left-radius: 0;
  border: 1px solid var(--surface-border);
  border-left: 2px solid #c8960c;
}

.message-bubble-content {
  margin-bottom: 4px;
  line-height: 1.5;
}

.message-bubble.sent .message-bubble-content {
  color: #e6ce6a;
}

.message-bubble.received .message-bubble-content {
  color: var(--text);
}

.conversation-gift-panel {
  margin-top: 10px;
  padding: 12px 14px;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(200, 150, 12, 0.22);
}

.conversation-gift-panel-claimed {
  border-color: rgba(74, 160, 108, 0.28);
  background: rgba(74, 160, 108, 0.1);
}

.conversation-gift-title {
  display: flex;
  align-items: center;
  gap: 8px;
  font-weight: 700;
  color: #f0d27a;
}

.conversation-gift-description {
  margin: 8px 0 0;
  opacity: 0.82;
  font-size: 0.92rem;
}

.btn-message-gift {
  margin-top: 10px;
  background: #c8960c;
  color: #241700;
}

.conversation-gift-badge {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  margin-top: 10px;
  padding: 6px 10px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.08);
  font-size: 0.8rem;
  font-weight: 700;
}

.message-bubble-time {
  font-size: 0.75rem;
  opacity: 0.7;
}

.message-bubble.sent .message-bubble-time {
  color: rgba(200, 150, 12, 0.7);
  text-align: right;
}

.message-bubble.received .message-bubble-time {
  color: var(--text);
}

.message-bubble {
  position: relative;
}

.message-bubble-delete {
  position: absolute;
  top: 4px;
  right: 4px;
  width: 24px;
  height: 24px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  background: transparent;
  border: none;
  color: rgba(255, 255, 255, 0.35);
  cursor: pointer;
  border-radius: 4px;
  opacity: 0;
  transition: opacity 0.15s ease, color 0.15s ease, background 0.15s ease;
}

.message-bubble:hover .message-bubble-delete,
.message-bubble-delete:focus-visible {
  opacity: 1;
}

.message-bubble-delete:hover {
  color: #ff6b6b;
  background: rgba(255, 107, 107, 0.12);
}

@media (hover: none) {
  .message-bubble-delete {
    opacity: 0.6;
  }
}

.conversation-form {
  display: flex;
  align-items: flex-end;
  gap: 10px;
  padding: 12px 16px;
  border-top: 1px solid var(--surface-border);
  background: rgba(0, 0, 0, 0.2);
}

.conversation-form textarea {
  flex: 1;
  min-height: 40px;
  max-height: 140px;
  padding: 10px 12px;
  border-radius: 2px;
  border: 1px solid var(--surface-border);
  background: var(--cloud-bg2);
  color: var(--text);
  font-family: inherit;
  font-size: 0.95rem;
  line-height: 1.4;
  resize: vertical;
  box-sizing: border-box;
}

.conversation-form textarea:focus {
  outline: none;
  border-color: #c8960c;
  box-shadow: 0 0 0 2px rgba(200, 150, 12, 0.25);
}

.conversation-send-btn {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  padding: 0;
  background: linear-gradient(to bottom, #3a2800, #1a1200);
  border: 1px solid #c8960c;
  border-radius: 2px;
  color: #e6ce6a;
  cursor: pointer;
  transition: all 0.15s ease;
}

.conversation-send-btn:hover:not(:disabled) {
  background: linear-gradient(to bottom, #4a3300, #241700);
  color: #f0d27a;
}

.conversation-send-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.conversation-form-disabled {
  padding: 14px 16px;
  border-top: 1px solid var(--surface-border);
  text-align: center;
  opacity: 0.65;
  font-size: 0.9rem;
}

.conversation-form-disabled i {
  margin-right: 6px;
  color: #c8960c;
}

.conversation-empty {
  text-align: center;
  padding: 60px 20px;
  color: var(--text);
}

.conversation-empty i {
  font-size: 64px;
  opacity: 0.3;
  margin-bottom: 20px;
  display: block;
}

.conversation-empty p {
  font-size: 1.2rem;
  opacity: 0.6;
}

/* Mobile Responsive - Conversations */
@media (max-width: 768px) {
  .conversation-item {
    padding: 12px;
    gap: 12px;
  }

  .conversation-avatar {
    width: 40px;
    height: 40px;
    font-size: 20px;
  }

  .conversation-name {
    font-size: 1rem;
  }

  .conversation-preview {
    font-size: 0.85rem;
  }

  .conversation-container {
    margin: 10px;
    height: calc(100vh - 120px);
  }

  .conversation-header-bar {
    padding: 12px 15px;
    flex-wrap: wrap;
    gap: 10px;
  }

  .conversation-partner-info {
    font-size: 1rem;
    order: -1;
    width: 100%;
    text-align: center;
  }

  .message-bubble {
    max-width: 85%;
  }

  .messages-thread {
    padding: 15px;
  }
}

@media (max-width: 480px) {
  .conversation-item {
    padding: 10px;
    gap: 10px;
  }

  .conversation-avatar {
    width: 35px;
    height: 35px;
    font-size: 18px;
  }

  .conversation-name {
    font-size: 0.95rem;
  }

  .conversation-preview {
    font-size: 0.8rem;
  }

  .back-button {
    padding: 6px 12px;
    font-size: 0.9rem;
  }

  .btn-message-reply {
    padding: 6px 10px;
    font-size: 0.85rem;
  }

  .message-bubble {
    max-width: 90%;
    padding: 10px 12px;
  }
}

/* Navbar Stats Display */
.stats-display {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0 !important;
}

.stat-badge {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  border-radius: 20px;
  font-size: 0.9rem;
  font-weight: 600;
  transition: all 0.2s ease;
  cursor: default;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
}

.coin-badge {
  background: linear-gradient(135deg, #ffd700 0%, #ffed4e 100%);
  color: #1a1a1a;
  cursor: pointer;
}

.coin-badge i {
  color: #b8860b;
  font-size: 1rem;
}

.coin-badge:hover {
  transform: scale(1.05);
  box-shadow: 0 3px 10px rgba(255, 215, 0, 0.4);
}

.compact-stat-coins {
  cursor: pointer;
  transition: all 0.2s ease;
}

.compact-stat-coins:hover {
  transform: scale(1.05);
}

.progress-badge {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  color: white;
}

.progress-badge i {
  color: rgba(255, 255, 255, 0.9);
  font-size: 1rem;
}

.progress-badge:hover {
  transform: scale(1.05);
  box-shadow: 0 3px 10px rgba(102, 126, 234, 0.4);
}

.stat-badge span {
  font-weight: 700;
  letter-spacing: 0.5px;
}

/* Mobile stats display */
.mobile-stats {
  display: none;
  align-items: center;
  gap: 8px;
  margin-right: 15px;
}

/* Hide old coins-on-narrow-view */
.coins-on-narrow-view {
  display: none;
}

/* Responsive adjustments */
@media (max-width: 1024px) {
  .stats-display {
    display: none;
  }

  .mobile-stats {
    display: flex;
  }
}

@media (max-width: 768px) {
  .stat-badge {
    padding: 5px 10px;
    font-size: 0.85rem;
    gap: 5px;
  }

  .stat-badge i {
    font-size: 0.9rem;
  }

  .mobile-stats {
    margin-right: 10px;
  }
}

@media (max-width: 480px) {
  .stat-badge {
    padding: 4px 8px;
    font-size: 0.8rem;
    gap: 4px;
  }

  .stat-badge i {
    font-size: 0.85rem;
  }

  .mobile-stats {
    gap: 6px;
  }
}

/* Info Modal Styles */
.info-modal {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.7);
  backdrop-filter: blur(4px);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 10000;
  padding: 20px;
  animation: fadeIn 0.2s ease;
}

.info-modal.hidden {
  display: none;
}

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

.info-modal-content {
  background-color: var(--cloud-bg);
  background-image: var(--dirt-texture-url);
  background-repeat: repeat;
  border: 1px solid var(--surface-border);
  border-radius: 2px;
  max-width: 500px;
  width: 100%;
  max-height: calc(100vh - 40px);
  overflow-y: auto;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.5);
  position: relative;
  animation: slideUp 0.3s ease;
}

@keyframes slideUp {
  from {
    transform: translateY(20px);
    opacity: 0;
  }
  to {
    transform: translateY(0);
    opacity: 1;
  }
}

.info-modal-close {
  position: absolute;
  top: 15px;
  right: 15px;
  background: transparent;
  border: none;
  color: var(--papyrus-text);
  font-size: 1.5rem;
  cursor: pointer;
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 2px;
  transition: all 0.2s ease;
}

.info-modal-close:hover {
  background: rgba(200, 150, 12, 0.15);
  transform: rotate(90deg);
}

.info-modal-header {
  display: flex;
  align-items: center;
  gap: 15px;
  padding: 30px 30px 20px;
  border-bottom: 1px solid var(--surface-border);
}

.info-modal-header h2 {
  font-family: "Cinzel", serif;
  color: var(--papyrus-text);
  font-size: 1.5rem;
  margin: 0;
  font-weight: 700;
}

.info-modal-body {
  padding: 25px 30px 30px;
  color: var(--text);
  line-height: 1.6;
}

.coin-balance-row {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px 12px;
  padding: 12px 16px;
  margin-bottom: 18px;
  background: var(--surface-subtle);
  border: 1px solid var(--surface-border);
  border-radius: 8px;
}

.coin-balance-label {
  font-size: 0.95rem;
  opacity: 0.8;
}

.coin-balance-value {
  font-size: 1.3rem;
  font-weight: 700;
  color: #c8960c;
}

.coin-earn-btn {
  margin-left: auto;
  padding: 6px 14px;
  font-size: 0.85rem;
  font-weight: 600;
  font-family: inherit;
  background: linear-gradient(to bottom, #e6ce6a 0%, #c8960c 100%);
  color: #1a0a00;
  border: 1px solid #b7892b;
  border-radius: 6px;
  cursor: pointer;
  white-space: nowrap;
}

.coin-earn-btn:hover {
  background: linear-gradient(to bottom, #f0da80 0%, #d4a010 100%);
}

.coin-buy-btn {
  margin-left: 6px;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.coin-buy-btn-disabled {
  opacity: 0.45;
  cursor: not-allowed;
  position: relative;
}

.coin-buy-btn-disabled:hover::after {
  content: attr(data-tooltip);
  position: absolute;
  bottom: 110%;
  left: 50%;
  transform: translateX(-50%);
  background: #1a1d23;
  color: #e0c882;
  padding: 6px 12px;
  border-radius: 6px;
  font-size: 0.78rem;
  white-space: nowrap;
  border: 1px solid rgba(255, 200, 100, 0.2);
  pointer-events: none;
  z-index: 10;
}

.info-modal-body p {
  margin: 0 0 15px 0;
  font-size: 1rem;
}

.info-list {
  list-style: none;
  padding: 0;
  margin: 15px 0;
}

.info-list li {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 12px;
  margin-bottom: 10px;
  background: rgba(0, 0, 0, 0.15);
  border-radius: 2px;
  border-left: 3px solid #c8960c;
}

.info-list li i {
  color: #c8960c;
  font-size: 1.2rem;
  margin-top: 2px;
  flex-shrink: 0;
}

.info-list li strong {
  color: var(--text);
}

.info-list-text {
  flex: 1;
  min-width: 0;
}

/* Full-width image-button rows (Buy Cards / Customization / World Map) — same
   look as the main-menu image buttons (artwork + overlaid title), a bit smaller. */
.info-list li.info-list-button-row {
  display: block;
  padding: 0;
  background: none;
  border-left: none;
}

.coin-use-btn {
  position: relative;
  display: block;
  width: 100%;
  height: 120px;
  padding: 0;
  border: 1px solid rgba(200, 150, 12, 0.45);
  border-radius: 10px;
  overflow: hidden;
  cursor: pointer;
  background: rgba(0, 0, 0, 0.2);
}

.coin-use-btn img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
  transition: transform 0.3s ease;
}

.coin-use-btn:hover img {
  transform: scale(1.04);
}

/* Standalone shop / buy-coins CTA (outside the .info-list) needs its own spacing. */
.coin-shop-btn {
  margin: 4px 0 18px;
}

.coin-use-btn .coin-use-title {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 2;
  text-align: center;
  padding: 8px 12px 9px;
  font-size: 1.15rem;
  font-weight: 700;
  color: #fff;
  -webkit-text-stroke: 8px rgba(120, 90, 60, 0.9);
  paint-order: stroke fill;
  text-shadow:
    0 1px 3px rgba(0, 0, 0, 0.95),
    0 0 8px rgba(0, 0, 0, 0.6);
  pointer-events: none;
  background: linear-gradient(to top, rgba(0, 0, 0, 0.55), transparent);
}

.info-modal-footer {
  margin-top: 20px;
  padding: 15px;
  background: rgba(200, 150, 12, 0.08);
  border-radius: 2px;
  border: 1px solid var(--surface-border);
}

.info-modal-footer p {
  margin: 0;
  font-size: 0.95rem;
}

.info-modal-footer i {
  color: #c8960c;
  margin-right: 8px;
}

.info-footer-icon-img {
  width: 110px;
  height: 110px;
  object-fit: contain;
  float: left;
  margin: 0 14px 6px 0;
}

.locale-choice-modal-content {
  max-width: 560px;
}

.locale-choice-header h2 {
  display: flex;
  align-items: center;
  gap: 10px;
}

.locale-choice-body {
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.locale-choice-body p {
  margin: 0;
}

.locale-choice-actions {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 10px;
}

.locale-choice-inline-form,
.locale-choice-manual-form {
  margin: 0;
}

.locale-choice-btn,
.locale-choice-apply {
  width: 100%;
  justify-content: center;
}

.locale-choice-manual-form {
  padding: 14px;
  background: rgba(0, 0, 0, 0.12);
  border: 1px solid var(--surface-border);
  border-radius: 8px;
}

.locale-choice-label {
  display: block;
  margin-bottom: 8px;
  font-weight: 700;
}

.locale-choice-manual-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 10px;
  align-items: center;
}

.locale-choice-select {
  width: 100%;
  min-width: 0;
  padding: 10px 12px;
  border-radius: 8px;
  border: 1px solid var(--surface-border);
  background: var(--cloud-bg);
  color: var(--text);
  font: inherit;
}

/* Kongregate "rate the game" prompt — reuses the shared .info-modal shell. */
.kong-rate-modal-content {
  max-width: 480px;
  text-align: center;
}

.kong-rate-header {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
}

.kong-rate-logo {
  width: 76px;
  height: auto;
  display: block;
  border-radius: 8px;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
}

.kong-rate-header h2 {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin: 0;
}

.kong-rate-header h2 .fa-star {
  color: #f5b50a;
}

.kong-rate-body {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.kong-rate-body p {
  margin: 0;
}

.kong-rate-stars {
  display: flex;
  justify-content: center;
  gap: 8px;
  font-size: 1.8em;
  color: #f5b50a;
}

.kong-rate-footer {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.kong-rate-btn {
  width: 100%;
  justify-content: center;
}

.discord-link {
  color: #5865f2;
  font-weight: 600;
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: border-color 0.2s ease;
}

.discord-link:hover {
  border-bottom-color: #5865f2;
}

@media (max-width: 600px) {
  .info-modal-content {
    max-width: 95%;
  }

  .info-modal-header {
    padding: 25px 20px 15px;
  }

  .info-modal-header h2 {
    font-size: 1.3rem;
  }

  .info-modal-body {
    padding: 20px;
  }

  .locale-choice-manual-row {
    grid-template-columns: 1fr;
  }

  .coin-balance-row {
    flex-wrap: wrap;
    align-items: center;
  }

  .coin-balance-label {
    flex: 1 1 auto;
  }

  .coin-balance-value {
    margin-left: auto;
  }

  .coin-balance-row .coin-earn-btn,
  .coin-balance-row .coin-buy-btn {
    width: 100%;
    margin-left: 0;
    justify-content: center;
    text-align: center;
  }

  .info-list li {
    flex-direction: column;
    gap: 8px;
  }
}

/* Achievement Celebration Overlay */
.achievement-celebration-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.9);
  backdrop-filter: blur(8px);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 10001;
  animation: fadeIn 0.3s ease;
}

.achievement-celebration-overlay.hidden {
  display: none;
}

#achievement-confetti-canvas {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 1;
}

.achievement-celebration-content {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  padding: 20px;
}

.achievement-celebration-stage {
  position: relative;
  width: min(95vw, 700px);
  height: min(85vh, 600px);
  max-height: 100%;
}

.achievement-slots-container {
  position: absolute;
  inset: 0;
  z-index: 4;
  pointer-events: none;
}

.achievement-slot {
  position: absolute;
  width: 110px;
  height: 110px;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  border: 2px dashed rgba(230, 206, 106, 0.35);
  background: radial-gradient(circle, rgba(0, 0, 0, 0.45) 30%, rgba(0, 0, 0, 0.1) 100%);
  box-shadow: inset 0 0 18px rgba(0, 0, 0, 0.6);
  opacity: 0.55;
  transition: opacity 0.3s ease, transform 0.5s cubic-bezier(0.34, 1.56, 0.64, 1), left 0.4s ease, top 0.4s ease;
  display: flex;
  align-items: center;
  justify-content: center;
}

.achievement-slot.achievement-slot-filled {
  border-color: transparent;
  background: transparent;
  box-shadow: none;
  opacity: 1;
}

.achievement-slot .achievement-collected-item {
  pointer-events: auto;
}

#achievement-display-container {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 0;
  height: 0;
  z-index: 30;
  pointer-events: none;
}

.achievement-celebration-item {
  position: absolute;
  top: 0;
  left: 0;
  transform-origin: center center;
  animation: achievementEnter 0.8s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}

@keyframes achievementEnter {
  0% {
    transform: translate(-50%, -50%) scale(0) rotate(-180deg);
    opacity: 0;
  }
  60% {
    transform: translate(-50%, -50%) scale(2.5) rotate(0deg);
    opacity: 1;
  }
  100% {
    transform: translate(-50%, -50%) scale(2.5) rotate(0deg);
    opacity: 1;
  }
}

.achievement-celebration-item.flying-to-slot {
  animation: achievementFly 0.6s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}

@keyframes achievementFly {
  0% {
    transform: translate(-50%, -50%) scale(2.5);
    opacity: 1;
  }
  100% {
    transform: translate(calc(-50% + var(--target-x)), calc(-50% + var(--target-y))) scale(0.85);
    opacity: 1;
  }
}

.achievement-collected-item {
  transform: scale(0.85);
  opacity: 1;
  transition: transform 0.3s ease;
}

.achievement-collected-item:hover {
  transform: scale(0.95);
}

.achievement-celebration-button {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  padding: 15px 40px;
  font-size: 1.2rem;
  font-weight: 700;
  background: linear-gradient(to bottom, #e6ce6a 0%, #c8960c 50%, #b7892b 100%);
  color: #1a0a00;
  border: 1px solid #b7892b;
  border-radius: 2px;
  cursor: pointer;
  box-shadow: 0 4px 15px rgba(200, 150, 12, 0.4);
  transition: opacity 0.3s ease, filter 0.3s ease, box-shadow 0.3s ease;
  font-family: "Cinzel", serif;
  text-transform: uppercase;
  letter-spacing: 1px;
  z-index: 20;
}

.achievement-celebration-button.inactive {
  opacity: 0.35;
  filter: grayscale(75%) brightness(0.7);
  cursor: not-allowed;
  pointer-events: none;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.5);
}

.achievement-celebration-button.active {
  animation: buttonLightUp 0.7s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}

@keyframes buttonLightUp {
  0% {
    opacity: 0.35;
    filter: grayscale(75%) brightness(0.7);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.5);
  }
  50% {
    opacity: 1;
    filter: grayscale(0%) brightness(1.2);
    box-shadow: 0 0 45px rgba(255, 215, 100, 0.95), 0 0 80px rgba(255, 215, 100, 0.5);
    transform: translate(-50%, -50%) scale(1.12);
  }
  100% {
    opacity: 1;
    filter: none;
    box-shadow: 0 4px 15px rgba(200, 150, 12, 0.4);
    transform: translate(-50%, -50%) scale(1);
  }
}

.achievement-celebration-button:not(.inactive):hover {
  box-shadow: 0 6px 20px rgba(200, 150, 12, 0.6);
  background: linear-gradient(to bottom, #f0da80 0%, #d4a010 50%, #c8960c 100%);
}

@media (max-width: 768px) {
  .achievement-celebration-stage {
    width: 95vw;
    height: 85vh;
  }

  .achievement-slot {
    width: 80px;
    height: 80px;
  }

  .achievement-celebration-item {
    animation: achievementEnterMobile 0.8s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
  }

  @keyframes achievementEnterMobile {
    0% {
      transform: translate(-50%, -50%) scale(0) rotate(-180deg);
      opacity: 0;
    }
    60% {
      transform: translate(-50%, -50%) scale(1.8) rotate(0deg);
      opacity: 1;
    }
    100% {
      transform: translate(-50%, -50%) scale(1.8) rotate(0deg);
      opacity: 1;
    }
  }

  .achievement-celebration-item.flying-to-slot {
    animation: achievementFlyMobile 0.6s cubic-bezier(0.4, 0, 0.2, 1) forwards;
  }

  @keyframes achievementFlyMobile {
    0% {
      transform: translate(-50%, -50%) scale(1.8);
      opacity: 1;
    }
    100% {
      transform: translate(calc(-50% + var(--target-x)), calc(-50% + var(--target-y))) scale(0.7);
      opacity: 1;
    }
  }

  .achievement-collected-item {
    transform: scale(0.7);
  }

  .achievement-celebration-button {
    padding: 12px 30px;
    font-size: 1rem;
  }
}

/* Magic Bricks Particle Effect */
@keyframes brickParticleFloat {
  0% {
    transform: translateY(0) scale(1);
    opacity: 0.8;
  }
  100% {
    transform: translateY(-120px) scale(0.5);
    opacity: 0;
  }
}

/* Castle buff particles: weapon/brick icons rising from the castle base and
   fanning outward, behind the castle (built in main.js syncCastleBuffParticles). */
/* Persistent host positioned (in JS) over each castle, living in the stable
   .castle-container so its particle animations are never interrupted by the
   per-turn castle re-render. z-index:-1 keeps it behind the castle imagery
   (relies on .castle-container being an isolated stacking context). */
.castle-buff-host {
  position: absolute;
  overflow: visible;
  pointer-events: none;
  z-index: -1;
}

/* Per-buff sub-layer so each effect can fade out on its own when spent. */
.castle-buff-layer {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 0;
  overflow: visible;
  pointer-events: none;
}

.castle-buff-particle {
  position: absolute;
  left: 50%;
  bottom: 0;
  width: var(--size, 18px);
  height: var(--size, 18px);
  margin-left: calc(var(--size, 18px) / -2);
  opacity: 0;
  will-change: transform, opacity;
  animation: castleBuffRise var(--dur, 1.8s) ease-out var(--delay, 0s) infinite;
  filter: drop-shadow(0 0 4px var(--glow, rgba(255, 255, 255, 0.5)));
}

@keyframes castleBuffRise {
  0% {
    transform: translate(0, 0) scale(0.4) rotate(0deg);
    opacity: 0;
  }
  15% {
    opacity: 0.95;
  }
  80% {
    opacity: 0.55;
  }
  100% {
    transform: translate(var(--dx, 0), var(--dy, -150px)) scale(1)
      rotate(var(--rot, 0deg));
    opacity: 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  .castle-buff-particle {
    animation: none;
    display: none;
  }
}

.magic-bricks-active {
  position: relative;
  overflow: visible;
}

.magic-bricks-active::before,

/* Magic Bricks Particle Effect */
@keyframes brickParticleFloat {
  0% {
    transform: translateY(0) scale(1);
    opacity: 0.8;
  }
  100% {
    transform: translateY(-120px) scale(0.5);
    opacity: 0;
  }
}

.magic-bricks-active {
  position: relative;
  overflow: visible;
}

/* Tutorial Color Picker Pulsate Animation */
@keyframes tutorialPulsate {
  0%, 100% {
    transform: scale(1);
    box-shadow: 0 0 10px rgba(255, 215, 0, 0.5), 0 0 20px rgba(255, 215, 0, 0.3);
    filter: brightness(1);
  }
  50% {
    transform: scale(1.1);
    box-shadow: 0 0 20px rgba(255, 215, 0, 0.8), 0 0 40px rgba(255, 215, 0, 0.5), 0 0 60px rgba(255, 215, 0, 0.3);
    filter: brightness(1.3);
  }
}

.tutorial-pulsate {
  animation: tutorialPulsate 2s ease-in-out infinite;
}

.tutorial-pulsate-offset {
  animation-delay: 1s;
}

.red-button.tutorial-pulsate {
  box-shadow: 0 0 10px rgba(155, 28, 28, 0.6), 0 0 20px rgba(155, 28, 28, 0.35) !important;
}

.red-button.tutorial-pulsate:nth-of-type(1) {
  animation: tutorialPulsateRed 2s ease-in-out infinite;
}

.blue-button.tutorial-pulsate {
  box-shadow: 0 0 10px rgba(40, 85, 160, 0.6), 0 0 20px rgba(40, 85, 160, 0.35) !important;
}

.blue-button.tutorial-pulsate-offset {
  animation: tutorialPulsateBlue 2s ease-in-out infinite 1s;
}

@keyframes tutorialPulsateRed {
  0%, 100% {
    transform: scale(1);
    box-shadow: 0 0 10px rgba(155, 28, 28, 0.6), 0 0 20px rgba(155, 28, 28, 0.35);
    filter: brightness(1);
  }
  50% {
    transform: scale(1.1);
    box-shadow: 0 0 20px rgba(155, 28, 28, 0.9), 0 0 40px rgba(155, 28, 28, 0.6), 0 0 60px rgba(155, 28, 28, 0.35);
    filter: brightness(1.3);
  }
}

@keyframes tutorialPulsateBlue {
  0%, 100% {
    transform: scale(1);
    box-shadow: 0 0 10px rgba(40, 85, 160, 0.6), 0 0 20px rgba(40, 85, 160, 0.35);
    filter: brightness(1);
  }
  50% {
    transform: scale(1.1);
    box-shadow: 0 0 20px rgba(40, 85, 160, 0.9), 0 0 40px rgba(40, 85, 160, 0.6), 0 0 60px rgba(40, 85, 160, 0.35);
    filter: brightness(1.3);
  }
}

/* --- In-game trophy for top 3 players --- */
.custom-deck-icon {
  margin-left: 4px;
  font-size: 0.7em;
  opacity: 0.7;
  vertical-align: middle;
  color: var(--text);
}

.trophy-icon {
  margin-left: 5px;
  vertical-align: middle;
}

/* Size by period: daily smallest → alltime largest */
.trophy-daily {
  font-size: 0.7em;
}

.trophy-weekly {
  font-size: 0.85em;
}

.trophy-monthly {
  font-size: 1em;
}

.trophy-alltime {
  font-size: 1.2em;
}

/* Glow by rank position */
@keyframes trophyGlow1 {
  0%, 100% {
    filter: drop-shadow(0 0 4px #ffd700) drop-shadow(0 0 8px #ffd700);
  }
  50% {
    filter: drop-shadow(0 0 8px #ffd700) drop-shadow(0 0 16px #ffaa00) drop-shadow(0 0 24px #ffd700);
  }
}

@keyframes trophyGlow2 {
  0%, 100% {
    filter: drop-shadow(0 0 3px #c0c0c0) drop-shadow(0 0 6px #c0c0c0);
  }
  50% {
    filter: drop-shadow(0 0 6px #c0c0c0) drop-shadow(0 0 12px #a0a0a0);
  }
}

@keyframes trophyGlow3 {
  0%, 100% {
    filter: drop-shadow(0 0 2px #cd7f32);
  }
  50% {
    filter: drop-shadow(0 0 4px #cd7f32) drop-shadow(0 0 8px #b5651d);
  }
}

.trophy-rank-1 {
  color: #ffd700;
  animation: trophyGlow1 2s ease-in-out infinite;
}

.trophy-rank-2 {
  color: #c0c0c0;
  animation: trophyGlow2 2.5s ease-in-out infinite;
}

.trophy-rank-3 {
  color: #cd7f32;
  animation: trophyGlow3 3s ease-in-out infinite;
}

/* ============ Admin Dashboard ============ */

.admin-dashboard {
  max-width: 900px;
  margin: 0 auto;
  padding: 24px 20px;
  font-family: "Comfortaa", sans-serif;
  color: var(--text);
}

.admin-dash-header {
  margin-bottom: 28px;
}

.admin-stat-card-clickable {
  cursor: pointer;
  transition: background 0.15s ease, transform 0.1s ease;
}
.admin-stat-card-clickable:hover {
  background: rgba(255, 255, 255, 0.06);
  transform: translateY(-1px);
}

/* Generic admin modal (used by the newsletter subscriber list) */
.admin-modal-overlay {
  position: fixed;
  inset: 0;
  z-index: 9300;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  background: rgba(0, 0, 0, 0.6);
}
.admin-modal-card {
  width: min(520px, 96vw);
  max-height: 82vh;
  display: flex;
  flex-direction: column;
  background: #1c1f26;
  border: 1px solid #2f343d;
  border-radius: 10px;
  box-shadow: 0 18px 60px rgba(0, 0, 0, 0.6);
}
.admin-modal-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 18px;
  border-bottom: 1px solid #2f343d;
}
.admin-modal-head h2 {
  margin: 0;
  font-size: 1.1rem;
  color: #ffce5a;
}
.admin-modal-close {
  background: none;
  border: none;
  color: #c8d0db;
  font-size: 1.6rem;
  line-height: 1;
  cursor: pointer;
  padding: 0 4px;
}
.admin-modal-close:hover { color: #fff; }
.admin-modal-body {
  padding: 12px 18px 18px;
  overflow-y: auto;
}
.admin-subscriber-list {
  margin: 0;
  padding-left: 26px;
}
.admin-subscriber-list li {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px 10px;
  padding: 5px 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}
.admin-subscriber-tag {
  font-weight: 700;
  color: #e8e8e8;
}
.admin-subscriber-email {
  font-size: 0.82rem;
  color: #8b94a3;
  word-break: break-all;
}

.admin-newsletter-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.9rem;
  margin-top: 8px;
}
.admin-newsletter-table th,
.admin-newsletter-table td {
  padding: 8px 12px;
  text-align: left;
  border-bottom: 1px solid var(--surface-border, rgba(255, 255, 255, 0.12));
}
.admin-newsletter-table th {
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  opacity: 0.75;
}
.admin-newsletter-table tbody tr:hover {
  background: rgba(255, 255, 255, 0.04);
}

.admin-campaign-difficulty-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.92rem;
}

.admin-campaign-difficulty-table th,
.admin-campaign-difficulty-table td {
  padding: 9px 12px;
  text-align: left;
  border-bottom: 1px solid var(--surface-border, rgba(255, 255, 255, 0.12));
}

.admin-campaign-difficulty-table th {
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  opacity: 0.75;
  cursor: help;
}

.admin-campaign-difficulty-table tbody tr:hover {
  background: rgba(255, 255, 255, 0.04);
}

.admin-dash-header h1 {
  margin: 0 0 6px 0;
  font-size: 1.6rem;
  display: flex;
  align-items: center;
  gap: 10px;
}

.admin-dash-header > p {
  margin: 0;
  opacity: 0.65;
  font-size: 0.95rem;
}

.admin-dash-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 16px;
}

.admin-dash-card {
  background: var(--cloud-bg2);
  border-radius: 12px;
  padding: 20px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.15);
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.admin-dash-card-icon {
  font-size: 1.6rem;
  line-height: 1;
}

.admin-dash-card-body {
  flex: 1;
}

.admin-dash-card-body h2 {
  margin: 0 0 4px 0;
  font-size: 1rem;
  font-weight: 700;
}

.admin-dash-card-body > p {
  margin: 0 0 12px 0;
  font-size: 0.82rem;
  opacity: 0.6;
}

.admin-dash-stats {
  display: flex;
  gap: 20px;
}

.admin-dash-stat {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.admin-dash-stat-value {
  font-size: 1.5rem;
  font-weight: 700;
  line-height: 1;
  color: var(--text);
}

.admin-dash-stat-sm {
  font-size: 0.95rem;
}

.admin-dash-stat-unit {
  font-size: 0.75rem;
  opacity: 0.6;
  margin-left: 2px;
}

.admin-dash-stat-label {
  font-size: 0.72rem;
  opacity: 0.55;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

.admin-dash-card-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 14px;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 8px;
  color: var(--text);
  font-size: 0.85rem;
  text-decoration: none;
  transition: background 0.15s ease;
  align-self: flex-start;
}

.admin-dash-card-link:hover {
  background: rgba(255, 255, 255, 0.12);
}

/* ============ Admin Gift Codes ============ */

.admin-page-wrap {
  max-width: 1000px;
  margin: 0 auto;
  padding: 24px 20px;
  font-family: "Comfortaa", sans-serif;
  color: var(--text);
}

.admin-page-header {
  margin-bottom: 20px;
}

.admin-page-header h1 {
  margin: 0 0 4px 0;
  font-size: 1.5rem;
  display: flex;
  align-items: center;
  gap: 10px;
}

.admin-page-header > p {
  margin: 0 0 8px;
  opacity: 0.7;
  font-size: 0.95rem;
}

.admin-back-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--text);
  opacity: 0.65;
  text-decoration: none;
  font-size: 0.85rem;
}

.admin-back-link:hover { opacity: 1; }

.admin-gift-form {
  margin-bottom: 24px;
  padding: 16px;
  border-radius: 10px;
  background: var(--surface-subtle);
  border: 1px solid var(--surface-border);
}

.admin-gift-form-row {
  display: flex;
  gap: 12px;
  align-items: end;
  flex-wrap: wrap;
}

.admin-gift-form-row label {
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: 0.85rem;
  font-weight: 600;
}

.admin-gift-form-note { flex: 1; min-width: 220px; }

.admin-gift-form-row input {
  padding: 8px 10px;
  border-radius: 6px;
  border: 1px solid var(--surface-border);
  background: var(--cloud-bg2, rgba(255, 255, 255, 0.05));
  color: var(--text);
  font: inherit;
  min-width: 100px;
}

.admin-gift-newcode {
  margin-bottom: 18px;
  padding: 14px 16px;
  border-radius: 10px;
  background: rgba(212, 160, 23, 0.12);
  border: 1px solid rgba(212, 160, 23, 0.45);
}

.admin-gift-newcode-label {
  font-size: 0.85rem;
  opacity: 0.85;
  margin-bottom: 8px;
  display: flex;
  align-items: center;
  gap: 6px;
}

.admin-gift-newcode-value {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}

.admin-gift-newcode-value code {
  font-size: 1.4rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  background: var(--cloud-bg2, rgba(0, 0, 0, 0.2));
  padding: 6px 12px;
  border-radius: 6px;
  user-select: all;
}

.admin-gift-copy-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 10px;
  border-radius: 6px;
  border: 1px solid var(--surface-border);
  background: transparent;
  color: var(--text);
  cursor: pointer;
}

.admin-gift-copy-btn:hover { background: var(--surface-hover); }

.admin-gift-newcode-meta {
  margin-top: 6px;
  font-size: 0.85rem;
  opacity: 0.85;
}

.admin-gift-error {
  margin-bottom: 14px;
  padding: 10px 14px;
  border-radius: 8px;
  background: rgba(220, 53, 69, 0.15);
  border: 1px solid rgba(220, 53, 69, 0.4);
  color: var(--text);
}

.admin-gift-stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
  margin-bottom: 20px;
}

.admin-gift-stat {
  padding: 10px 12px;
  border-radius: 8px;
  background: var(--surface-subtle);
  border: 1px solid var(--surface-border);
  display: flex;
  flex-direction: column;
}

.admin-gift-stat-value {
  font-size: 1.2rem;
  font-weight: 700;
}

.admin-gift-stat-label {
  font-size: 0.75rem;
  opacity: 0.7;
}

.admin-gift-section-title {
  margin: 0 0 8px;
  font-size: 1.05rem;
}

.admin-gift-empty {
  opacity: 0.65;
  font-style: italic;
}

.admin-gift-table-wrap {
  overflow-x: auto;
  border: 1px solid var(--surface-border);
  border-radius: 8px;
}

.admin-gift-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.88rem;
}

.admin-gift-table th,
.admin-gift-table td {
  padding: 8px 12px;
  text-align: left;
  border-bottom: 1px solid var(--surface-border);
}

.admin-gift-table thead th {
  background: var(--surface-subtle);
  font-weight: 700;
  text-transform: uppercase;
  font-size: 0.72rem;
  letter-spacing: 0.05em;
  opacity: 0.85;
}

.admin-gift-table tbody tr.is-redeemed { opacity: 0.7; }

.admin-gift-table code {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-weight: 700;
  letter-spacing: 0.05em;
}

.admin-gift-note {
  max-width: 240px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.admin-gift-status {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-weight: 700;
  font-size: 0.78rem;
}

.admin-gift-status.redeemed { color: #2a8a3f; }
.admin-gift-status.pending { color: #b88408; }

@media (max-width: 700px) {
  .admin-gift-stats { grid-template-columns: repeat(2, 1fr); }
  .admin-gift-form-row { flex-direction: column; align-items: stretch; }
  .admin-gift-form-note { min-width: 0; }
}

.admin-table {
  width: 100%;
  border-collapse: collapse;
  margin-top: 16px;
  color: var(--text);
}

.admin-table th,
.admin-table td {
  padding: 10px 14px;
  text-align: left;
  border-bottom: 1px solid var(--surface-border);
}

.admin-table th {
  font-size: 0.85rem;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  opacity: 0.7;
}

.admin-table tbody tr:hover {
  background: rgba(255, 255, 255, 0.04);
}

/* ============ Admin Engagement Metrics ============ */

.admin-metrics-wrapper {
  max-width: 900px;
  margin: 0 auto;
  padding: 20px;
  font-family: "Comfortaa", sans-serif;
  color: var(--text);
}

.admin-metrics-section-title {
  font-size: 1rem;
  font-weight: 700;
  opacity: 0.7;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin: 0 0 12px 0;
}

.admin-metrics-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 16px;
}

.admin-metrics-card {
  background: var(--cloud-bg2);
  border-radius: 12px;
  padding: 18px 20px;
}

.admin-metrics-card-title {
  font-size: 0.95rem;
  font-weight: 700;
  margin-bottom: 14px;
  display: flex;
  align-items: center;
  gap: 8px;
}

.admin-metrics-funnel {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.admin-metrics-funnel-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 0.88rem;
}

.admin-metrics-funnel-rate {
  border-top: 1px solid rgba(255,255,255,0.1);
  padding-top: 8px;
  margin-top: 2px;
  font-weight: 700;
}

.admin-metrics-funnel-label {
  opacity: 0.75;
}

.admin-metrics-funnel-value {
  font-weight: 700;
  font-size: 1rem;
}

.admin-metrics-dropoffs {
  margin-top: 16px;
  padding-top: 12px;
  border-top: 1px solid rgba(255,255,255,0.1);
}

.admin-metrics-dropoffs-title {
  font-size: 0.75rem;
  opacity: 0.55;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: 8px;
}

.admin-metrics-dropoff-row {
  display: flex;
  justify-content: space-between;
  font-size: 0.82rem;
  padding: 3px 0;
}

.admin-metrics-dropoff-label {
  opacity: 0.8;
}

.admin-metrics-dropoff-count {
  font-weight: 700;
  color: #e74c3c;
}

.admin-metrics-bucket-row {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.85rem;
  padding: 2px 0;
}

.admin-metrics-bucket-bar-wrap {
  flex: 1;
  height: 8px;
  background: rgba(255,255,255,0.08);
  border-radius: 4px;
  overflow: hidden;
  min-width: 60px;
}

.admin-metrics-bucket-bar {
  height: 100%;
  border-radius: 4px;
  transition: width 0.3s ease;
  min-width: 2px;
}

.admin-metrics-bucket-count {
  font-weight: 700;
  min-width: 28px;
  text-align: right;
}

.admin-metrics-table-wrap {
  overflow-x: auto;
  border-radius: 12px;
  background: var(--cloud-bg2);
}

.admin-metrics-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.85rem;
}

.admin-metrics-table th,
.admin-metrics-table td {
  padding: 10px 14px;
  text-align: left;
  border-bottom: 1px solid rgba(255,255,255,0.07);
}

.admin-metrics-table th {
  opacity: 0.55;
  font-weight: 600;
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.admin-metrics-table tbody tr:last-child td {
  border-bottom: none;
}

.admin-screen-sizes-wrapper {
  max-width: 1000px;
}

.admin-screen-size-date {
  height: 36px;
  padding: 0 10px;
  border-radius: 8px;
  border: 1px solid var(--surface-border);
  background: var(--cloud-bg2);
  color: var(--text);
  font: inherit;
}

.admin-screen-size-row {
  display: grid;
  grid-template-columns: minmax(260px, 1fr) minmax(160px, 0.8fr) 72px;
  gap: 12px;
  align-items: center;
  padding: 9px 0;
  border-bottom: 1px solid rgba(255,255,255,0.07);
}

.admin-screen-size-row:last-child {
  border-bottom: none;
}

.admin-screen-size-main {
  min-width: 0;
}

.admin-screen-size-label {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.admin-screen-size-label strong {
  font-size: 0.9rem;
}

.admin-screen-size-label span {
  font-size: 0.76rem;
  opacity: 0.65;
}

.admin-screen-size-query {
  display: inline-block;
  margin-top: 5px;
  max-width: 100%;
  overflow-wrap: anywhere;
  font-size: 0.72rem;
  opacity: 0.75;
}

.admin-screen-size-bar-wrap {
  height: 9px;
  border-radius: 999px;
  background: rgba(255,255,255,0.08);
  overflow: hidden;
}

.admin-screen-size-bar {
  height: 100%;
  border-radius: inherit;
}

.admin-screen-size-count {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 2px;
}

.admin-screen-size-count strong {
  font-size: 0.95rem;
}

.admin-screen-size-count span {
  font-size: 0.72rem;
  opacity: 0.65;
}

@media (max-width: 700px) {
  .admin-screen-size-row {
    grid-template-columns: 1fr 58px;
  }

  .admin-screen-size-bar-wrap {
    grid-column: 1 / -1;
    order: 3;
  }
}

.admin-metrics-table tbody tr:hover {
  background: rgba(255,255,255,0.04);
}

/* Tutorial Deep Dive stage rows */
.admin-metrics-stage-row {
  padding: 8px 0;
  border-bottom: 1px solid rgba(255,255,255,0.06);
}
.admin-metrics-stage-row:last-child { border-bottom: none; }
.admin-metrics-stage-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 4px;
}
.admin-metrics-stage-label {
  font-weight: 600;
  font-size: 0.85rem;
}
.admin-metrics-stage-entered {
  font-size: 0.8rem;
  opacity: 0.7;
}
.admin-metrics-stage-details {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 6px;
}
.admin-metrics-stage-tag {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 8px;
  border-radius: 10px;
  font-size: 0.75rem;
  font-weight: 600;
}
.admin-metrics-stage-tag i { font-size: 0.7rem; }

.admin-metrics-nav-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 6px;
  background: #2a2a3e;
  color: #ccc;
  text-decoration: none;
  font-size: 0.9rem;
  transition: background 0.15s;
}
.admin-metrics-nav-btn:hover { background: #3a3a5e; color: #fff; }

/* ============ Game Chat ============ */

.chat-bubble-area {
  position: absolute;
  top: 205px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  z-index: 50;
  pointer-events: none;
  max-width: 300px;
}

.chat-bubble {
  padding: 6px 12px;
  border-radius: 10px;
  font-size: 0.82rem;
  color: #fff;
  animation: chatBubbleIn 0.25s ease;
  pointer-events: none;
  text-align: center;
  max-width: 100%;
  word-break: break-word;
}

.chat-bubble-red {
  background: rgba(180, 50, 50, 0.85);
}

.chat-bubble-blue {
  background: rgba(50, 80, 180, 0.85);
}

.chat-bubble-spectator {
  background: rgba(110, 110, 120, 0.85);
}

.chat-bubble-name {
  font-weight: 700;
  margin-right: 4px;
}

.chat-bubble-admin {
  color: #e0c882;
  font-size: 0.72rem;
  margin-left: 3px;
}

.chat-bubble-admin-msg {
  border: 1px solid rgba(224, 200, 130, 0.4);
}

.chat-bubble-fade {
  opacity: 0;
  transition: opacity 0.5s ease;
}

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

.chat-toggle-btn {
  position: fixed;
  bottom: 16px;
  right: 16px;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 1.5px solid var(--resource-panel-border);
  background: var(--panel-bg);
  color: var(--text);
  font-size: 1.1rem;
  cursor: pointer;
  z-index: 60;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 3px 12px rgba(0, 0, 0, 0.4);
  transition: background 0.15s;
}

.chat-toggle-btn:hover {
  background: rgba(255, 255, 255, 0.12);
}

.chat-toggle-dot {
  position: absolute;
  top: 6px;
  right: 6px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #e74c3c;
}

.game-chat-panel {
  position: fixed;
  bottom: 70px;
  right: 16px;
  width: 280px;
  background: var(--panel-texture-url) center/cover, var(--panel-bg);
  border: 1.5px solid var(--resource-panel-border);
  border-radius: 12px;
  padding: 12px;
  z-index: 60;
  box-shadow: 0 6px 24px rgba(0, 0, 0, 0.5);
  animation: chatPanelIn 0.2s ease;
}

@keyframes chatPanelIn {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}

.game-chat-emotes {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 10px;
}

.game-chat-emote-btn {
  padding: 5px 10px;
  border-radius: 6px;
  border: 1px solid var(--resource-panel-border);
  background: rgba(255, 255, 255, 0.08);
  color: var(--text);
  font-size: 0.75rem;
  cursor: pointer;
  font-family: inherit;
  transition: background 0.15s;
}

.game-chat-emote-btn:hover {
  background: rgba(255, 255, 255, 0.18);
}

.game-chat-history-btn {
  font-weight: 600;
}

.game-chat-input-row {
  display: flex;
  gap: 6px;
}

.game-chat-input {
  flex: 1;
  padding: 6px 10px;
  border-radius: 8px;
  border: 1.5px solid var(--resource-panel-border);
  background: var(--panel-bg);
  color: var(--text);
  font-family: inherit;
  font-size: 0.82rem;
  box-sizing: border-box;
  min-width: 0;
}

.game-chat-input::placeholder {
  opacity: 0.4;
}

.game-chat-send-btn {
  padding: 6px 10px;
  border-radius: 8px;
  border: 1px solid var(--resource-panel-border);
  background: rgba(255, 255, 255, 0.08);
  color: var(--text);
  cursor: pointer;
  font-size: 0.85rem;
  transition: background 0.15s;
}

.game-chat-send-btn:hover {
  background: rgba(255, 255, 255, 0.18);
}

/* Mobile: hide the floating chat button, tap castle instead */
@media (max-width: 700px) {
  .chat-toggle-btn {
    display: none !important;
  }

  .game-chat-panel {
    right: 8px;
    left: 8px;
    bottom: 8px;
    width: auto;
  }

  .image-container,
  [data-castle-renderer] {
    cursor: pointer;
  }
}

/* ============ Captain's Log ============ */

.captains-log {
  max-width: 900px;
  margin: 0 auto;
  padding: 20px 16px;
}

.captains-log-header {
  text-align: center;
  margin-bottom: 8px;
}

.captains-log-header h1 {
  color: var(--text);
  font-size: 1.4rem;
  margin: 0 0 4px;
}

.captains-log-nav {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 20px;
  margin-bottom: 24px;
}

.captains-log-nav-btn {
  padding: 6px 14px;
  border-radius: 6px;
  border: 1px solid var(--resource-panel-border);
  background: rgba(255, 255, 255, 0.08);
  color: var(--text);
  font-size: 0.85rem;
  cursor: pointer;
  text-decoration: none;
  transition: background 0.15s;
}

.captains-log-nav-btn:hover:not(.captains-log-nav-disabled) {
  background: rgba(255, 255, 255, 0.15);
}

.captains-log-nav-disabled {
  opacity: 0.3;
  cursor: default;
}

.captains-log-date {
  color: var(--text);
  font-size: 1.1rem;
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: 8px;
}

.captains-log-today-badge {
  font-size: 0.7rem;
  background: rgba(6, 167, 125, 0.2);
  color: #06a77d;
  padding: 2px 8px;
  border-radius: 4px;
  font-weight: 600;
}

.captains-log-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px;
}

.captains-log-card {
  background: var(--panel-texture-url) center/cover, var(--panel-bg);
  border: 1.5px solid var(--resource-panel-border);
  border-radius: 12px;
  padding: 16px;
  box-shadow: 0 3px 12px rgba(0, 0, 0, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

.captains-log-card-wide {
  grid-column: 1 / -1;
}

.captains-log-card-title {
  color: var(--text);
  font-size: 0.9rem;
  font-weight: 600;
  margin-bottom: 12px;
  display: flex;
  align-items: center;
  gap: 8px;
}

.captains-log-stats {
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
  margin-bottom: 12px;
}

.captains-log-stat {
  display: flex;
  flex-direction: column;
  align-items: center;
  min-width: 55px;
}

.captains-log-stat-value {
  color: var(--text);
  font-size: 1.4rem;
  font-weight: 700;
  line-height: 1;
}

.captains-log-stat-label {
  color: var(--text);
  font-size: 0.7rem;
  opacity: 0.5;
  margin-top: 4px;
}

.captains-log-details {
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  padding-top: 8px;
}

.captains-log-detail-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 4px 0;
  color: var(--text);
  font-size: 0.82rem;
}

.captains-log-detail-row span:first-child {
  opacity: 0.7;
}

.captains-log-bars {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.captains-log-bar-row {
  display: flex;
  align-items: center;
  gap: 10px;
}

.captains-log-bar-label {
  color: var(--text);
  font-size: 0.8rem;
  min-width: 65px;
  opacity: 0.7;
}

.captains-log-bar-track {
  flex: 1;
  height: 8px;
  background: rgba(255, 255, 255, 0.08);
  border-radius: 4px;
  overflow: hidden;
  min-width: 60px;
}

.captains-log-bar-fill {
  height: 100%;
  border-radius: 4px;
  transition: width 0.3s ease;
  min-width: 2px;
}

.captains-log-bar-count {
  color: var(--text);
  font-size: 0.8rem;
  min-width: 70px;
  text-align: right;
}

@media (max-width: 700px) {
  .captains-log-grid {
    grid-template-columns: 1fr;
  }
  .captains-log-card-wide {
    grid-column: auto;
  }
}

/* ============ FAQ Page ============ */

.faq-wrapper {
  width: 100%;
  max-width: 780px;
  padding: 0 0 40px;
  font-family: "Comfortaa", sans-serif;
  color: var(--text);
}

.faq-header {
  padding: 28px 0 20px;
  border-bottom: 1px solid rgba(255,255,255,0.1);
  margin-bottom: 28px;
}

.faq-header h1 {
  margin: 0 0 8px;
  font-size: 1.7rem;
  display: flex;
  align-items: center;
  gap: 10px;
}

.faq-header > p {
  margin: 0;
  opacity: 0.65;
  font-size: 0.95rem;
}

.faq-section {
  margin-bottom: 28px;
}

.faq-category {
  font-size: 0.78rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  opacity: 0.5;
  margin: 0 0 10px;
}

.faq-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.faq-item {
  background: var(--cloud-bg2);
  border-radius: 10px;
  overflow: hidden;
}

.faq-question {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  padding: 14px 18px;
  cursor: pointer;
  font-size: 0.95rem;
  font-weight: 600;
  list-style: none;
  user-select: none;
}

.faq-question::-webkit-details-marker {
  display: none;
}

.faq-question:hover {
  background: rgba(255,255,255,0.05);
}

.faq-chevron {
  flex-shrink: 0;
  font-size: 0.75rem;
  opacity: 0.5;
  transition: transform 0.2s ease;
}

.faq-item[open] .faq-chevron {
  transform: rotate(180deg);
}

.faq-answer {
  margin: 0;
  padding: 0 18px 16px;
  font-size: 0.88rem;
  line-height: 1.6;
  opacity: 0.82;
  border-top: 1px solid rgba(255,255,255,0.06);
  padding-top: 12px;
}

.faq-footer {
  margin-top: 32px;
  padding-top: 20px;
  border-top: 1px solid rgba(255,255,255,0.1);
  font-size: 0.88rem;
  opacity: 0.7;
  text-align: center;
}

.faq-link {
  color: var(--text);
  opacity: 1;
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
}

.faq-link:hover {
  opacity: 0.8;
}

/* ============ Admin Banner Management ============ */

.admin-banners-wrapper {
  max-width: 800px;
  margin: 0 auto;
  padding: 20px;
  font-family: "Comfortaa", sans-serif;
  color: var(--text);
}

.admin-banners-wrapper h1 {
  margin-bottom: 5px;
}

.admin-banners-wrapper > p {
  margin-bottom: 20px;
  opacity: 0.7;
}

.admin-banner-form {
  background: var(--cloud-bg2);
  border-radius: 12px;
  padding: 20px;
  margin-bottom: 30px;
}

.admin-banner-form h2 {
  margin-top: 0;
  margin-bottom: 15px;
}

.form-row {
  margin-bottom: 12px;
}

.form-row label {
  display: block;
  margin-bottom: 4px;
  font-size: 0.9rem;
  font-weight: 700;
}

.form-row input[type="text"],
.form-row input[type="number"] {
  width: 100%;
  padding: 8px 12px;
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 8px;
  background: rgba(0, 0, 0, 0.2);
  color: var(--text);
  font-family: "Comfortaa", sans-serif;
  font-size: 0.9rem;
  box-sizing: border-box;
}

.form-row-checkboxes label {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  cursor: pointer;
  font-weight: 400;
}

.admin-btn {
  padding: 8px 16px;
  border: none;
  border-radius: 8px;
  font-family: "Comfortaa", sans-serif;
  font-size: 0.85rem;
  font-weight: 700;
  cursor: pointer;
  transition: filter 0.2s;
}

.admin-btn:hover {
  filter: brightness(1.2);
}

.admin-btn-primary {
  background: #4a90d9;
  color: #fff;
}

.admin-btn-success {
  background: #27ae60;
  color: #fff;
}

.admin-btn-warning {
  background: #e67e22;
  color: #fff;
}

.admin-btn-danger {
  background: #c0392b;
  color: #fff;
}

.admin-btn-edit {
  background: #8e44ad;
  color: #fff;
}

.admin-banner-card {
  display: flex;
  align-items: center;
  gap: 15px;
  background: var(--cloud-bg2);
  border-radius: 12px;
  padding: 15px;
  margin-bottom: 12px;
  transition: opacity 0.2s;
}

.admin-banner-disabled {
  opacity: 0.5;
}

.admin-banner-preview {
  flex-shrink: 0;
  width: 64px;
  height: 64px;
  border-radius: 8px;
  overflow: hidden;
  background: rgba(0, 0, 0, 0.2);
  display: flex;
  align-items: center;
  justify-content: center;
}

.admin-banner-preview img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}

.admin-banner-info {
  flex: 1;
  min-width: 0;
}

.admin-banner-header {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 4px;
}

.admin-banner-info p {
  margin: 2px 0;
  font-size: 0.85rem;
  opacity: 0.8;
}

.admin-banner-link a {
  color: #4a90d9;
  text-decoration: none;
  word-break: break-all;
}

.admin-badge {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 12px;
  font-size: 0.75rem;
  font-weight: 700;
  background: rgba(255, 255, 255, 0.1);
}

.admin-badge-enabled {
  background: rgba(39, 174, 96, 0.3);
  color: #27ae60;
}

.admin-badge-disabled {
  background: rgba(192, 57, 43, 0.3);
  color: #e74c3c;
}

.admin-badge-order {
  background: rgba(74, 144, 217, 0.2);
  color: #4a90d9;
}

.admin-banner-actions {
  display: flex;
  flex-direction: column;
  gap: 6px;
  flex-shrink: 0;
}

.admin-banner-actions-row {
  flex-direction: row;
  justify-content: flex-end;
}

.admin-banner-editing {
  opacity: 1 !important;
  border: 1px solid rgba(142, 68, 173, 0.4);
}

.admin-banner-edit-form {
  width: 100%;
}

.admin-banner-edit-form .edit-form-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}

.admin-banner-edit-form .form-row {
  margin-bottom: 0;
}

.admin-banner-edit-form select {
  width: 100%;
  padding: 8px 12px;
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 8px;
  background: rgba(0, 0, 0, 0.2);
  color: var(--text);
  font-family: "Comfortaa", sans-serif;
  font-size: 0.9rem;
}

.admin-banner-edit-form select option {
  background: #2a2d3a;
  color: var(--text);
}

.admin-banner-edit-form .field-label-image {
  display: none;
}

.admin-banner-edit-form.form-type-image .field-label-standard {
  display: none;
}

.admin-banner-edit-form.form-type-image .field-label-image {
  display: block;
}

.admin-banner-edit-form.form-type-image [data-field="title"],
.admin-banner-edit-form.form-type-image [data-field="text"] {
  display: none;
}

.admin-badge-type {
  background: rgba(155, 89, 182, 0.2);
  color: #9b59b6;
}

.admin-banner-form select {
  width: 100%;
  padding: 8px 12px;
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 8px;
  background: rgba(0, 0, 0, 0.2);
  color: var(--text);
  font-family: "Comfortaa", sans-serif;
  font-size: 0.9rem;
}

.admin-banner-form select option {
  background: #2a2d3a;
  color: var(--text);
}

.admin-banner-form .field-label-image {
  display: none;
}

.admin-banner-form.form-type-image .field-label-standard {
  display: none;
}

.admin-banner-form.form-type-image .field-label-image {
  display: block;
}

.admin-banner-form.form-type-image [data-field="title"],
.admin-banner-form.form-type-image [data-field="text"] {
  display: none;
}

.admin-banner-stats {
  display: flex;
  gap: 15px;
  margin-top: 6px;
  font-size: 0.8rem;
  opacity: 0.7;
}

.admin-stat i {
  margin-right: 3px;
}

.admin-empty {
  text-align: center;
  opacity: 0.5;
  padding: 30px;
}

/* ============ Admin Notification Management ============ */

.admin-notif-overview {
  display: flex;
  gap: 12px;
  margin-bottom: 24px;
}

.admin-notif-stat-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 16px 28px;
  background: var(--cloud-bg2);
  border-radius: 10px;
  border: 1px solid rgba(128, 128, 128, 0.2);
}

.admin-notif-stat-value {
  font-size: 2rem;
  font-weight: 700;
  color: #4a90d9;
}

.admin-notif-stat-label {
  font-size: 0.8rem;
  opacity: 0.65;
  margin-top: 2px;
}

.admin-notif-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.88rem;
}

.admin-notif-table thead th {
  text-align: left;
  padding: 8px 12px;
  border-bottom: 2px solid rgba(128, 128, 128, 0.25);
  opacity: 0.65;
  font-weight: 600;
  text-transform: uppercase;
  font-size: 0.75rem;
  letter-spacing: 0.04em;
}

.admin-notif-table tbody tr {
  border-bottom: 1px solid rgba(128, 128, 128, 0.12);
}

.admin-notif-table tbody tr:hover {
  background: rgba(128, 128, 128, 0.06);
}

.admin-notif-table td {
  padding: 10px 12px;
  vertical-align: middle;
}

.admin-notif-date {
  white-space: nowrap;
  opacity: 0.65;
  font-size: 0.8rem;
}

.admin-notif-title {
  font-weight: 600;
}

.admin-notif-body {
  opacity: 0.75;
  max-width: 280px;
}

.admin-notif-num {
  text-align: center;
  font-variant-numeric: tabular-nums;
}

.admin-notif-rate {
  text-align: center;
  font-weight: 600;
  opacity: 0.45;
}

.admin-notif-rate-hit {
  color: #28a745;
  opacity: 1;
}

.admin-collector-form {
  margin-top: 18px;
}

.admin-collector-toolbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  margin-bottom: 16px;
  flex-wrap: wrap;
}

.admin-collector-select-all {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: 0.88rem;
  opacity: 0.78;
  cursor: pointer;
}

.admin-collector-check {
  width: 16px;
  height: 16px;
  accent-color: #4a90d9;
}

.admin-collector-table-wrap {
  overflow-x: auto;
}

.admin-collector-table {
  margin-top: 0;
}

.admin-collector-col-check {
  width: 46px;
  text-align: center;
}

.admin-collector-feedback {
  border-radius: 10px;
  padding: 14px 16px;
  margin-bottom: 16px;
}

.admin-collector-feedback-error {
  background: rgba(192, 57, 43, 0.12);
  border: 1px solid rgba(192, 57, 43, 0.35);
  color: #f3b0a8;
}

.admin-collector-feedback-success {
  background: rgba(39, 174, 96, 0.12);
  border: 1px solid rgba(39, 174, 96, 0.35);
}

.admin-collector-feedback-title {
  display: flex;
  align-items: center;
  gap: 8px;
  font-weight: 700;
  margin-bottom: 10px;
}

.admin-collector-result-list {
  margin: 0;
  padding-left: 18px;
}

.admin-collector-result-item {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 6px;
}

.admin-collector-result-item:last-child {
  margin-bottom: 0;
}

.admin-collector-player {
  font-weight: 700;
}

.admin-collector-card-badge {
  display: inline-flex;
  align-items: center;
  padding: 3px 10px;
  border-radius: 999px;
  background: rgba(74, 144, 217, 0.18);
  color: #8fc0ff;
  font-size: 0.8rem;
  font-weight: 700;
}

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

/* Broadcast detail panel */
.admin-notif-detail {
  margin-top: 16px;
  border-radius: 8px;
  background: var(--cloud-bg2);
  padding: 16px 20px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
}

.admin-notif-detail-header {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-bottom: 14px;
  padding-bottom: 12px;
  border-bottom: 1px solid rgba(128, 128, 128, 0.2);
}

.admin-notif-detail-title {
  display: flex;
  align-items: baseline;
  gap: 10px;
  font-size: 1rem;
}

.admin-notif-detail-date {
  opacity: 0.55;
  font-size: 0.8rem;
}

.admin-notif-detail-body {
  opacity: 0.7;
  font-size: 0.9rem;
}

.admin-notif-detail-gift {
  font-size: 0.9rem;
  margin: 4px 0;
  color: var(--text);
}

.admin-notif-detail-stats {
  display: flex;
  gap: 18px;
  font-size: 0.85rem;
  opacity: 0.8;
}

.admin-notif-detail-rate {
  opacity: 0.45;
}

/* Player chips */
.admin-notif-player-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.admin-notif-player {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 4px 10px;
  border-radius: 16px;
  background: rgba(128, 128, 128, 0.12);
  font-size: 0.82rem;
}

.admin-notif-player-returned {
  background: rgba(40, 167, 69, 0.1);
  border: 1px solid rgba(40, 167, 69, 0.25);
}

.admin-notif-player-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
}

.admin-notif-player-name {
  color: var(--text);
}

.admin-notif-player-badge {
  font-size: 0.7rem;
  color: #28a745;
  font-weight: 600;
}

@media (max-width: 600px) {
  .admin-banner-card {
    flex-direction: column;
    align-items: stretch;
  }

  .admin-banner-preview {
    width: 100%;
    height: 80px;
  }

  .admin-banner-actions {
    flex-direction: row;
    justify-content: flex-end;
  }

  .admin-banner-edit-form .edit-form-grid {
    grid-template-columns: 1fr;
  }
}

/* ============ REPLAY SHARING ============ */

.tournament-victory-status {
  text-align: center;
  margin: 18px 0;
}

.tournament-victory-info {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  font-size: 1rem;
  color: #c8960c;
  padding: 12px 20px;
  border-radius: 2px;
  background: rgba(200, 150, 12, 0.1);
  border: 1px solid rgba(200, 150, 12, 0.3);
}

/* Share button on game-over modal */
.share-replay-section {
  text-align: center;
  margin: 12px 0;
}

.share-btn {
  background: rgba(0, 0, 0, 0.2);
  color: var(--text);
  border: 1px solid var(--surface-border);
  padding: 8px 20px;
  border-radius: 2px;
  cursor: pointer;
  font-family: "Cinzel", serif;
  font-size: 0.85rem;
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  transition: background 0.2s, border-color 0.2s;
}

.share-btn:hover {
  background: rgba(200, 150, 12, 0.12);
  border-color: #c8960c;
}

.share-result {
  display: flex;
  align-items: center;
  gap: 8px;
  justify-content: center;
  flex-wrap: wrap;
}

.share-url-input {
  background: rgba(0, 0, 0, 0.25);
  border: 1px solid var(--surface-border);
  color: var(--text);
  padding: 6px 12px;
  border-radius: 2px;
  font-family: inherit;
  font-size: 0.85rem;
  width: 260px;
  max-width: 60vw;
  outline: none;
}

.share-url-input:focus {
  border-color: #c8960c;
}

.share-copy-btn {
  background: linear-gradient(to bottom, #e6ce6a 0%, #c8960c 50%, #b7892b 100%);
  border: 1px solid #b7892b;
  color: #1a0a00;
  padding: 6px 14px;
  border-radius: 2px;
  cursor: pointer;
  font-family: "Cinzel", serif;
  font-size: 0.82rem;
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  transition: opacity 0.2s;
}

.share-copy-btn:hover {
  opacity: 0.85;
}

/* Activity stats — bar chart hover labels */
.bar-col:hover .bar-label-hover {
  opacity: 0.8 !important;
}
.bar-col:hover .bar-label-peak {
  opacity: 0;
}

/* Replay page — iframe renders game at mobile viewport */
.replay-outer-body {
  margin: 0;
  background: var(--primary-bg, #0b0013);
  display: flex;
  justify-content: center;
  min-height: 100vh;
}

.replay-phone-frame {
  width: 390px;
  max-width: 100vw;
  height: 100vh;
}

.replay-iframe {
  width: 100%;
  height: 100%;
  border: none;
}

.replay-loading {
  text-align: center;
  opacity: 0.5;
  padding: 40px;
  color: var(--text, white);
}

.replay-overlay {
  position: fixed;
  left: 0;
  right: 0;
  z-index: 100;
  pointer-events: none;
}

.replay-overlay-top {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 6px 12px;
  background: rgba(0, 0, 0, 0.6);
  backdrop-filter: blur(4px);
  pointer-events: auto;
  font-size: 0.8rem;
  color: white;
  gap: 8px;
}

.replay-overlay-bottom {
  position: fixed;
  bottom: 12px;
  left: 0;
  right: 0;
  display: flex;
  justify-content: center;
  gap: 8px;
  pointer-events: auto;
}

.replay-home-link {
  display: flex;
  align-items: center;
  gap: 6px;
  color: white;
  text-decoration: none;
  opacity: 0.9;
}

.replay-home-link:hover {
  opacity: 1;
}

.replay-overlay-info {
  display: flex;
  align-items: center;
  gap: 8px;
  opacity: 0.9;
}

.replay-winner-badge {
  font-size: 0.75rem;
  padding: 2px 8px;
  border-radius: 12px;
  text-transform: uppercase;
  letter-spacing: 1px;
}

.replay-winner-red {
  background: rgba(255, 107, 107, 0.3);
  color: #ff6b6b;
}

.replay-winner-blue {
  background: rgba(107, 163, 255, 0.3);
  color: #6ba3ff;
}

.replay-control-btn {
  background: rgba(0, 0, 0, 0.6);
  color: white;
  border: 1px solid rgba(255, 255, 255, 0.2);
  padding: 8px 16px;
  border-radius: 20px;
  cursor: pointer;
  font-family: inherit;
  font-size: 0.85rem;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  backdrop-filter: blur(4px);
  text-decoration: none;
  transition: background 0.2s;
}

.replay-control-btn:hover {
  background: rgba(0, 0, 0, 0.8);
}

.replay-play-btn {
  background: rgba(231, 76, 60, 0.8);
}

.replay-play-btn:hover {
  background: rgba(192, 57, 43, 0.9);
}

.replay-finisher-badge {
  text-align: center;
  font-size: 1.2rem;
  font-weight: bold;
  color: #ffd700;
  text-transform: uppercase;
  letter-spacing: 2px;
  padding: 8px;
  background: linear-gradient(90deg, transparent, rgba(255, 215, 0, 0.15), transparent);
  animation: replay-finisher-pulse 1.5s ease-in-out infinite;
}

@keyframes replay-finisher-pulse {
  0%, 100% { opacity: 0.8; }
  50% { opacity: 1; text-shadow: 0 0 10px rgba(255, 215, 0, 0.5); }
}

@media (max-width: 500px) {
  .share-url-input {
    width: 180px;
  }
}

/* ===== Tournament Bracket ===== */

.bracket-page {
  max-width: 1200px;
  margin: 0 auto;
  padding: 20px;
  color: var(--text);
}

.bracket-header {
  text-align: center;
  margin-bottom: 30px;
}

.bracket-title {
  font-size: 1.6rem;
  margin: 0 0 10px;
}

.bracket-title i {
  margin-right: 8px;
  color: var(--accent-color, #daa520);
}

.bracket-meta {
  display: flex;
  gap: 20px;
  justify-content: center;
  align-items: center;
  margin-bottom: 15px;
  font-size: 0.95rem;
  opacity: 0.85;
}

.bracket-countdown {
  font-size: 1.15rem;
  font-weight: bold;
  color: var(--accent-color, #daa520);
  margin-bottom: 12px;
}

.bracket-countdown i {
  margin-right: 6px;
}

.bracket-countdown-timer {
  font-variant-numeric: tabular-nums;
  letter-spacing: 1px;
}

.bracket-back-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 0.85rem;
  padding: 6px 14px;
  cursor: pointer;
}

/* Empty / Postponed state */
.bracket-empty {
  text-align: center;
  padding: 60px 20px;
  opacity: 0.8;
}

.bracket-empty-icon {
  font-size: 3rem;
  margin-bottom: 15px;
  color: var(--accent-color, #daa520);
}

.bracket-empty h3 {
  margin: 0 0 10px;
  font-size: 1.3rem;
}

.bracket-empty p {
  margin: 0;
  font-size: 1rem;
  opacity: 0.7;
}

/* Registration-phase participant list */
.tournament-participants-panel {
  padding: 18px;
  background-color: var(--cloud-bg);
  background-image: var(--dirt-texture-url);
  background-repeat: repeat;
  border: 1px solid var(--surface-border);
  border-radius: 2px;
}

.tournament-participants-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
  padding-bottom: 14px;
  margin-bottom: 14px;
  border-bottom: 1px solid var(--surface-border);
}

.tournament-participants-title {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 4px;
  font-family: "Cinzel", serif;
  font-size: 1rem;
  color: var(--papyrus-text);
}

.tournament-participants-title i {
  color: #c8960c;
}

.tournament-participants-subtitle {
  margin: 0;
  font-size: 0.86rem;
  color: var(--text);
  opacity: 0.68;
}

.tournament-participants-count {
  flex-shrink: 0;
  padding: 5px 10px;
  border: 1px solid rgba(200, 150, 12, 0.35);
  border-radius: 2px;
  color: #c8960c;
  font-size: 0.82rem;
  font-weight: 700;
  white-space: nowrap;
}

.tournament-participants-list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.tournament-participant-row {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  padding: 9px 10px;
  background: rgba(0, 0, 0, 0.14);
  border: 1px solid rgba(128, 128, 128, 0.18);
  border-radius: 2px;
}

.tournament-participant-current {
  border-color: rgba(200, 150, 12, 0.45);
  background: rgba(200, 150, 12, 0.1);
}

.tournament-participant-rank {
  flex: 0 0 26px;
  color: var(--papyrus-text);
  opacity: 0.75;
  font-size: 0.78rem;
  font-weight: 700;
  text-align: center;
}

.tournament-participant-name {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--text);
  font-weight: 600;
}

.tournament-participant-you {
  flex-shrink: 0;
  padding: 2px 6px;
  background: rgba(200, 150, 12, 0.18);
  border: 1px solid rgba(200, 150, 12, 0.3);
  border-radius: 2px;
  color: #c8960c;
  font-size: 0.68rem;
  font-weight: 700;
  text-transform: uppercase;
}

.tournament-participants-empty {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 120px;
  color: var(--text);
  opacity: 0.62;
  font-style: italic;
}

/* Banner postponed message */
.tournament-banner-postponed-msg {
  font-size: 0.8rem;
  opacity: 0.7;
  font-style: italic;
  color: var(--text);
}

.tournament-banner-postponed-msg i {
  margin-right: 4px;
}

/* Spectate button */
.tournament-btn-spectate {
  background: linear-gradient(135deg, #2980b9, #3498db);
  font-size: 0.8rem;
  padding: 5px 12px;
}

.tournament-btn-spectate:hover {
  background: linear-gradient(135deg, #3498db, #5dade2);
}

/* Bracket grid */
.bracket {
  display: flex;
  gap: 10px;
  overflow-x: auto;
  padding: 10px 0 20px;
  align-items: stretch;
}

.bracket-round {
  display: flex;
  flex-direction: column;
  min-width: 160px;
  flex-shrink: 0;
}

.bracket-round-label {
  text-align: center;
  font-weight: 700;
  font-size: 0.85rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: 12px;
  opacity: 0.7;
}

.bracket-matches {
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  flex: 1;
  gap: 8px;
}

.bracket-match {
  background: rgba(128, 128, 128, 0.1);
  border: 1px solid rgba(128, 128, 128, 0.2);
  border-radius: 8px;
  padding: 6px 10px;
  position: relative;
}

.bracket-slot {
  padding: 5px 8px;
  font-size: 0.85rem;
  border-radius: 4px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.bracket-slot-vs {
  text-align: center;
  font-size: 0.7rem;
  opacity: 0.4;
  text-transform: uppercase;
  padding: 1px 0;
}

.bracket-slot-bye {
  opacity: 0.35;
  font-style: italic;
}

.bracket-slot-winner {
  background: rgba(46, 204, 113, 0.15);
  font-weight: 700;
}

/* Champion column */
.bracket-round-winner .bracket-round-label {
  color: #ffd700;
  opacity: 1;
}

.bracket-round-placement .bracket-round-label {
  color: #cd7f32;
  opacity: 1;
}

.bracket-placement-block {
  margin-top: 18px;
}

.bracket-placement-label {
  color: #cd7f32;
  margin-bottom: 10px;
}

.bracket-match-champion {
  background: linear-gradient(135deg, rgba(218, 165, 32, 0.15), rgba(255, 215, 0, 0.1));
  border-color: rgba(218, 165, 32, 0.35);
}

.bracket-slot-champion {
  text-align: center;
  font-weight: 700;
  font-size: 1rem;
  padding: 12px 8px;
  color: #ffd700;
}

.bracket-slot-champion i {
  margin-right: 6px;
}

/* Connector lines between rounds */
.bracket-match::after {
  content: "";
  position: absolute;
  top: 50%;
  right: -10px;
  width: 10px;
  height: 1px;
  background: rgba(128, 128, 128, 0.25);
}

.bracket-round:last-child .bracket-match::after {
  display: none;
}

/* Live tournament match */
.bracket-match-live {
  cursor: pointer;
  position: relative;
  animation: bracketLiveGlow 2s ease-in-out infinite;
  border: 1px solid rgba(255, 60, 60, 0.6);
  border-radius: 6px;
}

@keyframes bracketLiveGlow {
  0%, 100% { box-shadow: 0 0 4px rgba(255, 60, 60, 0.3); }
  50% { box-shadow: 0 0 12px rgba(255, 60, 60, 0.6); }
}

.bracket-match-live:hover {
  border-color: rgba(255, 60, 60, 0.9);
}

/* Live score floating tooltip */
.bracket-live-tooltip {
  display: none;
  position: fixed;
  z-index: 9999;
  pointer-events: none;
  background: var(--cloud-bg);
  color: var(--text);
  border: 1px solid rgba(255, 60, 60, 0.5);
  border-radius: 8px;
  padding: 10px 12px;
  min-width: 160px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.4);
}

.bracket-live-tooltip.visible {
  display: block;
}

.live-tooltip-header {
  font-size: 0.6rem;
  text-transform: uppercase;
  letter-spacing: 0.8px;
  opacity: 0.5;
  text-align: center;
  margin-bottom: 8px;
}

.live-tooltip-grid {
  display: flex;
  gap: 8px;
  align-items: stretch;
}

.live-tooltip-col {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.live-tooltip-col-red {
  align-items: flex-end;
}

.live-tooltip-col-blue {
  align-items: flex-start;
}

.live-tooltip-divider {
  width: 1px;
  background: rgba(128, 128, 128, 0.2);
  align-self: stretch;
}

.live-tooltip-stat {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 0.8rem;
}

.live-tooltip-col-red .live-tooltip-stat {
  flex-direction: row-reverse;
}

.live-tooltip-col-red .live-tooltip-stat i {
  color: rgba(231, 76, 60, 0.85);
  font-size: 0.7rem;
}

.live-tooltip-col-blue .live-tooltip-stat i {
  color: rgba(52, 152, 219, 0.85);
  font-size: 0.7rem;
}

.live-tooltip-stat span {
  font-weight: 600;
  min-width: 22px;
  text-align: center;
}

.bracket-match-live-badge {
  position: absolute;
  top: -8px;
  right: -4px;
  background: #e63946;
  color: #fff;
  font-size: 0.6rem;
  font-weight: 700;
  padding: 1px 5px;
  border-radius: 3px;
  letter-spacing: 0.5px;
  z-index: 1;
}

.bracket-match-method {
  position: absolute;
  top: -8px;
  right: -4px;
  background: rgba(128, 128, 128, 0.45);
  color: var(--text);
  font-size: 0.55rem;
  font-weight: 700;
  padding: 1px 4px;
  border-radius: 3px;
  letter-spacing: 0.5px;
  z-index: 1;
}

.bracket-match-done {
  opacity: 0.7;
}

.bracket-match-eliminated {
  opacity: 0.4;
}

.bracket-auto-join {
  text-align: center;
  padding: 12px;
  color: #4ecdc4;
  font-weight: 600;
  animation: fadeIn 0.3s ease;
}

@media (max-width: 600px) {
  .bracket {
    gap: 6px;
  }
  .bracket-round {
    min-width: 130px;
  }
  .bracket-slot {
    font-size: 0.75rem;
    padding: 4px 6px;
  }
}

/* Tournament Lobby */
.tournament-lobby {
  display: flex;
  gap: 16px;
  margin-top: 16px;
}

.tournament-lobby-bracket {
  flex: 2;
  min-width: 0;
  overflow-x: auto;
}

.tournament-chat {
  flex: 1;
  min-width: 260px;
  max-width: 360px;
  background-color: var(--cloud-bg);
  background-image: var(--dirt-texture-url);
  background-repeat: repeat;
  border: 1px solid var(--surface-border);
  border-radius: 2px;
  display: flex;
  flex-direction: column;
  max-height: 500px;
}

.tournament-chat-title {
  padding: 10px 12px;
  margin: 0;
  font-size: 0.85rem;
  font-family: "Cinzel", serif;
  font-weight: 600;
  letter-spacing: 0.5px;
  border-bottom: 1px solid var(--surface-border);
  color: var(--papyrus-text);
}

.tournament-chat-title i {
  margin-right: 6px;
  color: #c8960c;
}

.tournament-chat-messages {
  flex: 1;
  overflow-y: auto;
  overflow-x: hidden;
  padding: 8px 10px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-height: 200px;
  max-height: 380px;
}

.tournament-chat-msg {
  font-size: 0.82rem;
  line-height: 1.35;
  word-break: break-word;
  overflow-wrap: break-word;
  min-width: 0;
  max-width: 100%;
  padding: 4px 8px;
  background: rgba(0, 0, 0, 0.12);
  border-left: 2px solid #c8960c;
  border-radius: 0 2px 2px 0;
}

.tournament-chat-user {
  font-weight: 700;
  color: #c8960c;
  margin-right: 5px;
}

.tournament-chat-user::after {
  content: ":";
}

.tournament-chat-text {
  color: var(--text);
}

.tournament-chat-empty {
  color: var(--text);
  opacity: 0.45;
  font-size: 0.82rem;
  text-align: center;
  padding: 20px 8px;
  font-style: italic;
}

.tournament-chat-form {
  display: flex;
  border-top: 1px solid var(--surface-border);
  padding: 8px;
  gap: 6px;
}

.tournament-chat-input {
  flex: 1;
  background: rgba(0, 0, 0, 0.22);
  border: 1px solid var(--surface-border);
  border-radius: 2px;
  color: var(--text);
  padding: 6px 10px;
  font-size: 0.82rem;
  outline: none;
  transition: border-color 0.2s ease;
}

.tournament-chat-input:focus {
  border-color: #c8960c;
}

.tournament-chat-send {
  background: rgba(200, 150, 12, 0.18);
  border: 1px solid rgba(200, 150, 12, 0.45);
  border-radius: 2px;
  color: #c8960c;
  padding: 6px 10px;
  cursor: pointer;
  font-size: 0.82rem;
  transition: background 0.2s ease;
}

.tournament-chat-send:hover {
  background: rgba(200, 150, 12, 0.32);
}

@media (max-width: 768px) {
  .tournament-lobby {
    flex-direction: column;
  }
  .tournament-chat {
    max-width: none;
    min-width: 0;
    width: 100%;
    max-height: 360px;
  }
}

.tournament-elo-toplist {
  margin: 16px auto 8px;
  max-width: 720px;
  padding: 14px 16px 16px;
  background-color: var(--cloud-bg);
  background-image: var(--dirt-texture-url);
  background-repeat: repeat;
  border: 1px solid var(--surface-border);
  border-radius: 2px;
}

.tournament-elo-toplist-title {
  margin: 0 0 4px;
  font-size: 1rem;
  font-family: "Cinzel", serif;
  font-weight: 600;
  letter-spacing: 0.5px;
  color: var(--papyrus-text);
  text-align: center;
}

.tournament-elo-toplist-title i {
  margin-right: 8px;
}

.tournament-elo-toplist-hint {
  margin: 0 0 10px;
  font-size: 0.78rem;
  opacity: 0.6;
  color: var(--text);
  text-align: center;
}

.tournament-elo-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.86rem;
  color: var(--text);
}

.tournament-elo-table th {
  font-family: "Cinzel", serif;
  font-weight: 600;
  font-size: 0.78rem;
  letter-spacing: 0.4px;
  text-align: left;
  padding: 6px 8px;
  border-bottom: 1px solid var(--surface-border);
  color: var(--papyrus-text);
  opacity: 0.85;
}

.tournament-elo-table th.tet-rank,
.tournament-elo-table th.tet-elo {
  text-align: center;
}

.tournament-elo-table .tet-row {
  border-bottom: 1px solid rgba(255, 255, 255, 0.04);
}

.tournament-elo-table .tet-row:nth-child(odd) {
  background: rgba(0, 0, 0, 0.08);
}

.tournament-elo-table td {
  padding: 6px 8px;
  vertical-align: middle;
}

.tournament-elo-table .tet-rank {
  width: 38px;
  text-align: center;
  font-weight: 700;
  color: #c8960c;
}

.tournament-elo-table .tet-player {
  font-weight: 600;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 240px;
}

.tournament-elo-table .tet-elo {
  width: 70px;
  text-align: center;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: var(--papyrus-text);
}

.tournament-elo-table .tet-record {
  font-size: 0.78rem;
  opacity: 0.8;
  white-space: nowrap;
}

.tournament-elo-table .tet-noshows {
  color: #d97a4a;
}

.tournament-elo-toplist-empty {
  margin: 8px 0 0;
  font-size: 0.85rem;
  font-style: italic;
  opacity: 0.55;
  color: var(--text);
  text-align: center;
}

@media (max-width: 600px) {
  .tournament-elo-toplist { padding: 10px 8px 12px; }
  .tournament-elo-table { font-size: 0.78rem; }
  .tournament-elo-table .tet-player { max-width: 130px; }
  .tournament-elo-table .tet-record { font-size: 0.72rem; }
  .tournament-elo-table th,
  .tournament-elo-table td { padding: 5px 4px; }
}

/* ============ My Deck / Deck Toggle ============ */

.deck-toggle {
  display: flex;
  flex-direction: row;
  gap: 8px;
  margin-top: 10px;
  flex-wrap: wrap;
}

.deck-toggle-btn {
  padding: 6px 16px;
  border: 1px solid var(--surface-border);
  border-radius: 2px;
  background: transparent;
  color: inherit;
  font-size: 0.85rem;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  text-decoration: none;
  font-family: inherit;
  line-height: 1;
  box-sizing: border-box;
}

.deck-toggle-btn:hover:not(:disabled) {
  background: rgba(200, 150, 12, 0.12);
  border-color: #c8960c;
}

.deck-toggle-btn.active {
  background: rgba(200, 150, 12, 0.2);
  border-color: #c8960c;
  font-weight: 600;
}

.deck-toggle-btn--disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

.deck-toggle-btn-locked {
  opacity: 0.55;
  cursor: default;
  font-size: 0.8rem;
}

.deck-toggle-btn-wrap {
  position: relative;
  display: inline-block;
}

.deck-toggle-tooltip {
  display: none;
  position: absolute;
  bottom: calc(100% + 6px);
  left: 50%;
  transform: translateX(-50%);
  white-space: nowrap;
  background: rgba(20, 20, 30, 0.92);
  color: #fff;
  font-size: 0.78rem;
  padding: 5px 10px;
  border-radius: 6px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.4);
  pointer-events: none;
  z-index: 10;
}

.deck-toggle-btn-wrap:hover .deck-toggle-tooltip {
  display: block;
}

.card-unowned .card-grid-image {
  filter: grayscale(0.6) brightness(0.55);
}

.card-owned-badge {
  position: absolute;
  bottom: 4px;
  right: 4px;
  background: rgba(0, 0, 0, 0.75);
  color: #ffd700;
  font-size: 0.7rem;
  font-weight: 700;
  padding: 1px 6px;
  border-radius: 4px;
  pointer-events: none;
}

.my-cards-card-item {
  cursor: default;
}

.my-cards-card-link {
  display: block;
  color: inherit;
  text-decoration: none;
}

.my-cards-card-link:hover .card-grid-title {
  color: #c8960c;
}

.my-cards-card-item .card-grid-image {
  position: relative;
}

.my-cards-card-actions {
  padding-top: 0;
}

.buy-card-btn {
  width: 100%;
  margin-top: 4px;
  padding: 4px 8px;
  font-size: 0.75rem;
  font-weight: 600;
  border: 1px solid rgba(200, 150, 12, 0.9);
  border-radius: 2px;
  background: rgba(200, 150, 12, 0.55);
  color: #2a1d00;
  cursor: pointer;
  transition: background 0.15s, box-shadow 0.15s;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.15);
}

.buy-card-btn:hover:not(:disabled) {
  background: rgba(200, 150, 12, 0.8);
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

.buy-card-btn:disabled {
  opacity: 0.45;
  cursor: not-allowed;
  background: rgba(150, 150, 150, 0.15);
  border-color: rgba(120, 120, 120, 0.4);
  color: inherit;
  font-weight: 400;
  box-shadow: none;
  filter: grayscale(1);
}

.buy-card-btn-detail {
  width: auto;
  min-width: 200px;
  margin-top: 0;
  align-self: flex-start;
  padding: 11px 18px;
  font-size: 0.88rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #2d1d00;
  background: linear-gradient(180deg, #e6c46d 0%, #c9951f 100%);
  border-color: rgba(110, 67, 6, 0.55);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.28),
    0 6px 14px rgba(0, 0, 0, 0.22);
}

.buy-card-btn-detail:hover:not(:disabled) {
  background: linear-gradient(180deg, #efd88f 0%, #d3a43a 100%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.34),
    0 8px 18px rgba(0, 0, 0, 0.28);
}

.buy-card-btn-detail:disabled {
  background: rgba(90, 80, 58, 0.28);
  border-color: rgba(150, 130, 96, 0.24);
  color: rgba(255, 245, 214, 0.7);
  box-shadow: none;
  filter: none;
}

/* ===== Gamepad / Keyboard / TV Spatial Navigation ===== */
/* Uses :focus-visible so mouse clicks stay outline-free while keyboard,
   gamepad, and TV spatial-nav focus (which doesn't set body.nav-mode) is shown. */
*:focus-visible {
  outline: 2px solid #c8960c;
  outline-offset: 2px;
  z-index: 10;
}

.menu-button:focus-visible {
  outline-offset: -2px;
  box-shadow: 0 0 12px rgba(200, 150, 12, 0.5), inset 0 0 0 2px rgba(200, 150, 12, 0.3);
}

.navbar-icon-btn:focus-visible {
  outline-offset: 0;
  box-shadow: 0 0 8px rgba(200, 150, 12, 0.5);
}

.nav-link:focus-visible {
  outline-offset: 0;
  color: #c8960c;
}

.stat-badge:focus-visible,
.compact-stat:focus-visible {
  outline-offset: 0;
  box-shadow: 0 0 8px rgba(200, 150, 12, 0.5);
}

.customization-tab:focus-visible,
.customization-item:focus-visible {
  outline-offset: -2px;
}

.card-grid-item:focus-visible,
.card-grid-item:focus-within {
  outline: 2px solid #c8960c;
  outline-offset: -2px;
}

.card-container:focus {
  outline: none;
}

/* Suppress outline only when focus is NOT keyboard/spatial-nav driven */
*:focus:not(:focus-visible) {
  outline: none;
}

/* Join AI Dialog */
.join-ai-dialog {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 60vh;
  padding: 1rem;
}

.join-ai-dialog-inner {
  background: var(--card-bg, rgba(0, 0, 0, 0.4));
  border: 1px solid var(--resource-panel-border, rgba(255, 255, 255, 0.15));
  border-radius: 12px;
  padding: 2rem;
  max-width: 420px;
  width: 100%;
  text-align: center;
}

.join-ai-dialog-title {
  font-size: 1.4rem;
  color: var(--papyrus-text, #c8a96e);
  margin: 0 0 0.75rem;
}

.join-ai-dialog-title i {
  margin-right: 0.4rem;
}

.join-ai-dialog-desc {
  color: var(--text-secondary, rgba(255, 255, 255, 0.7));
  font-size: 0.95rem;
  margin: 0 0 1.5rem;
  line-height: 1.5;
}

.join-ai-dialog-actions {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.join-ai-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 1rem;
  border-radius: 8px;
  text-decoration: none;
  cursor: pointer;
  transition: transform 0.15s, box-shadow 0.15s;
  border: 1px solid rgba(255, 255, 255, 0.1);
}

.join-ai-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}

.join-ai-btn i {
  font-size: 1.3rem;
  margin-bottom: 0.3rem;
}

.join-ai-btn span:first-of-type {
  font-weight: 600;
  font-size: 1.05rem;
}

.join-ai-btn-sub {
  font-size: 0.8rem;
  opacity: 0.7;
  margin-top: 0.15rem;
}

.join-ai-btn-join {
  background: rgba(76, 175, 80, 0.25);
  border-color: rgba(76, 175, 80, 0.4);
  color: #a5d6a7;
}

.join-ai-btn-join:hover {
  background: rgba(76, 175, 80, 0.35);
}

.join-ai-btn-new {
  background: rgba(100, 149, 237, 0.2);
  border-color: rgba(100, 149, 237, 0.3);
  color: #90caf9;
}

.join-ai-btn-new:hover {
  background: rgba(100, 149, 237, 0.3);
}

/* Turn warning bar */
.turn-warning {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  background: rgba(20, 10, 0, 0.92);
  border-top: 2px solid #c8390a;
  padding: 8px 16px 6px;
  z-index: 500;
  text-align: center;
  transition: opacity 0.3s;
}

.turn-warning.hidden {
  display: none;
}

#turn-warning-text {
  display: block;
  color: #ffd580;
  font-size: 0.85rem;
  margin-bottom: 6px;
  font-family: "Comfortaa", sans-serif;
}

.turn-warning-bar-wrap {
  height: 4px;
  background: rgba(255, 255, 255, 0.1);
  border-radius: 2px;
  overflow: hidden;
}

.turn-warning-bar {
  height: 100%;
  background: linear-gradient(90deg, #c8390a, #ff6b35);
  border-radius: 2px;
  transition: width 1s linear;
}

.turn-indicator-wrap {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 6px;
}

.turn-countdown {
  font-size: 0.75rem;
  font-weight: 700;
  font-family: "Courier New", monospace;
  color: #ff6b35;
  background: rgba(200, 57, 10, 0.15);
  border: 1px solid rgba(200, 57, 10, 0.4);
  border-radius: 4px;
  padding: 1px 5px;
}

.turn-countdown.hidden {
  display: none;
}

.turn-countdown.urgent {
  color: #ff2222;
  background: rgba(200, 10, 10, 0.2);
  border-color: rgba(200, 10, 10, 0.6);
  animation: countdownPulse 0.4s ease-in-out infinite;
}

@keyframes countdownPulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.6; }
}

@keyframes rematchPulse {
  from { box-shadow: 0 0 0 0 rgba(6, 167, 125, 0.4); }
  to { box-shadow: 0 0 0 8px rgba(6, 167, 125, 0); }
}

/* ========== World Map ========== */

.worldmap-container {
  max-width: 900px;
  margin: 0 auto;
}

.worldmap-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 16px 24px;
  margin-bottom: 12px;
  color: var(--text);
  background-color: var(--cloud-bg);
  background-image: var(--dirt-texture-url);
  background-repeat: repeat;
  border: 1px solid var(--surface-border);
  border-radius: 2px;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  flex-wrap: wrap;
  gap: 12px;
}

.worldmap-title {
  font-size: 1.3rem;
  color: var(--text);
  margin: 0;
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}

.worldmap-header-actions {
  display: flex;
  gap: 14px;
  align-items: center;
  justify-content: flex-end;
  flex-wrap: wrap;
  flex: 1 1 auto;
  min-width: 0;
}

.worldmap-stats {
  display: flex;
  gap: 4px 6px;
  align-items: center;
  flex-wrap: wrap;
}

.worldmap-tax-actions {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 4px;
}

.worldmap-tax-row {
  display: flex;
  align-items: center;
  gap: 10px;
}

.worldmap-next-coin {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 0.82rem;
  color: var(--text);
  opacity: 0.85;
  white-space: nowrap;
}

.worldmap-next-coin i {
  color: #d6a92e;
}

.worldmap-next-coin-label {
  opacity: 0.7;
}

.worldmap-next-coin-countdown {
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.worldmap-claim-taxes-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  white-space: nowrap;
  position: relative;
  overflow: hidden;
  isolation: isolate;
}

/* Left→right fill showing collectible taxes vs. the total daily tax cap across
   all owned territories (width driven by --tax-fill from worldMapTaxActions). */
.worldmap-claim-taxes-fill {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: var(--tax-fill, 0%);
  /* Gold fill on the light CTA — visible as a left→right progress band. */
  background: linear-gradient(to right, rgba(240, 184, 28, 0.95), rgba(245, 200, 70, 0.9));
  border-right: 2px solid rgba(180, 130, 10, 0.9);
  box-shadow: 0 0 8px rgba(240, 184, 28, 0.5);
  transition: width 0.5s ease;
  pointer-events: none;
  z-index: 0;
}

.worldmap-claim-taxes-label {
  position: relative;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.worldmap-claim-taxes-btn:disabled {
  opacity: 0.55;
  cursor: default;
}

.worldmap-tax-note {
  font-size: 0.78rem;
  color: var(--text);
  opacity: 0.72;
  text-align: right;
}

.worldmap-stat {
  color: var(--text);
  opacity: 0.78;
  font-size: 0.74rem;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 8px;
  background: rgba(0, 0, 0, 0.08);
  border: 1px solid var(--surface-border);
  border-radius: 999px;
  white-space: nowrap;
}

.worldmap-stat i {
  font-size: 0.8em;
  opacity: 0.85;
}

.worldmap-stat strong {
  color: var(--text);
  opacity: 1;
}

.worldmap-game-over-container .game-over-content {
  gap: 18px;
}

.worldmap-victory-summary {
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 16px 18px;
  border-radius: 10px;
  background: var(--input-bg, rgba(255, 255, 255, 0.06));
  border: 1px solid var(--surface-border);
  color: var(--papyrus-text);
}

.worldmap-victory-matchup {
  display: flex;
  align-items: stretch;
  justify-content: center;
  gap: 14px;
}

.worldmap-victory-side {
  flex: 1 1 140px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 10px 12px;
  border-radius: 8px;
  background: var(--cloud-bg);
  border: 1px solid var(--surface-border);
  color: var(--papyrus-text);
}

.worldmap-victory-side i {
  font-size: 1.4rem;
  opacity: 0.9;
  color: var(--papyrus-text);
}

.worldmap-victory-side-winner {
  border-color: rgba(255, 215, 102, 0.75);
  background: rgba(255, 215, 102, 0.18);
  box-shadow: 0 0 12px rgba(255, 215, 102, 0.22);
}

.worldmap-victory-side-loser {
  opacity: 0.7;
}

.worldmap-victory-side-label {
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  opacity: 0.8;
  color: var(--papyrus-text);
}

.worldmap-victory-side-name {
  font-weight: 700;
  font-size: 1rem;
  text-align: center;
  color: var(--papyrus-text);
}

.worldmap-victory-vs {
  align-self: center;
  font-weight: 700;
  font-size: 0.95rem;
  opacity: 0.8;
  color: var(--papyrus-text);
}

.worldmap-victory-details {
  display: flex;
  flex-direction: column;
  gap: 8px;
  color: var(--papyrus-text);
}

.worldmap-victory-line {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin: 0;
  font-size: 0.95rem;
  line-height: 1.45;
  color: var(--papyrus-text);
}

.worldmap-victory-line strong {
  color: var(--papyrus-text);
}

.worldmap-victory-line i {
  margin-top: 3px;
  opacity: 0.9;
  color: var(--papyrus-text);
}

.worldmap-victory-actions {
  display: flex;
  justify-content: center;
  margin-top: 6px;
}

.worldmap-victory-primary {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 20px;
  font-size: 1rem;
  font-weight: 700;
  text-decoration: none;
}

.academy-victory-actions {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  margin-top: 6px;
}

.academy-victory-btn {
  width: 100%;
  min-height: 48px;
  background: var(--surface-subtle);
  border: 1px solid var(--surface-border);
  color: var(--text);
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.12);
}

.academy-victory-btn:hover {
  background: rgba(200, 150, 12, 0.12);
  border-color: rgba(200, 150, 12, 0.35);
  transform: translateY(-1px);
}

.academy-victory-btn-primary {
  background: linear-gradient(to bottom, #e6ce6a 0%, #c8960c 50%, #b7892b 100%);
  border-color: #b7892b;
  color: #1a0a00;
  box-shadow: 0 10px 24px rgba(200, 150, 12, 0.24);
}

.academy-victory-btn-primary:hover {
  opacity: 0.92;
  box-shadow: 0 12px 28px rgba(200, 150, 12, 0.34);
}

.academy-victory-btn-disabled,
.academy-victory-btn-disabled:hover {
  opacity: 0.45;
  cursor: not-allowed;
  transform: none;
  box-shadow: none;
  filter: grayscale(0);
}

@media (max-width: 520px) {
  .academy-victory-actions {
    gap: 8px;
  }

  .academy-victory-btn {
    padding-inline: 14px;
    font-size: 0.8rem;
  }
}

/* Post-onboarding "where next" screen — big visual tile buttons */
.onboarding-next {
  display: flex;
  flex-direction: column;
  gap: 14px;
  margin-top: 6px;
}

.onboarding-next-tiles {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}

.onboarding-next-tile {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  text-align: center;
  text-decoration: none;
  color: var(--text);
  background: var(--surface-subtle);
  border: 1px solid var(--surface-border);
  border-radius: 14px;
  overflow: hidden;
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.12);
  transition: transform 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease;
}

.onboarding-next-tile:hover {
  transform: translateY(-3px);
  border-color: rgba(200, 150, 12, 0.45);
  box-shadow: 0 16px 32px rgba(0, 0, 0, 0.2);
}

.onboarding-next-tile-primary {
  border-color: #b7892b;
  box-shadow: 0 12px 28px rgba(200, 150, 12, 0.24);
}

.onboarding-next-thumb {
  display: block;
  width: 100%;
  /* Scale the image area down on narrow screens so both tiles + the menu
     link always fit without scrolling. */
  height: clamp(64px, 22vw, 110px);
  background-size: cover;
  background-position: center;
}

.onboarding-next-advisor {
  display: flex;
  align-items: flex-end;
  justify-content: center;
  height: clamp(64px, 22vw, 110px);
  background: radial-gradient(circle at 50% 120%, rgba(200, 150, 12, 0.28), rgba(0, 0, 0, 0.04) 70%);
}

.onboarding-next-advisor-img {
  height: 95%;
  width: auto;
  object-fit: contain;
  filter: drop-shadow(0 6px 10px rgba(0, 0, 0, 0.35));
}

.onboarding-next-tile-body {
  display: flex;
  flex-direction: column;
  gap: 3px;
  padding: 10px 12px 14px;
}

.onboarding-next-tile-title {
  font-weight: 700;
  font-size: 1rem;
}

.onboarding-next-tile-primary .onboarding-next-tile-title {
  color: #c8960c;
}

.onboarding-next-tile-sub {
  font-size: 0.78rem;
  opacity: 0.75;
  line-height: 1.25;
}

.onboarding-next-menu-link {
  align-self: center;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 16px;
  font-size: 0.85rem;
  text-decoration: none;
  color: var(--text);
  opacity: 0.7;
  transition: opacity 0.15s ease;
}

.onboarding-next-menu-link:hover {
  opacity: 1;
}

@media (max-width: 520px) {
  .onboarding-next-tiles {
    gap: 10px;
  }

  .onboarding-next-tile-body {
    padding: 8px 8px 10px;
  }

  .onboarding-next-tile-title {
    font-size: 0.9rem;
  }

  .onboarding-next-tile-sub {
    font-size: 0.72rem;
  }
}

.academy-page-wrap {
  display: flex;
  justify-content: center;
}

.academy-page-panel {
  width: min(940px, 100%);
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.academy-page-header {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.academy-page-title {
  margin: 0;
}

.academy-page-subtitle {
  margin: 0;
  opacity: 0.9;
}

.academy-progress-block {
  border: 1px solid var(--surface-border);
  background: var(--surface-subtle);
  border-radius: 10px;
  padding: 12px 14px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.academy-progress-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  font-weight: 600;
  color: var(--text);
}

.academy-progress-track {
  height: 10px;
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.22);
  overflow: hidden;
}

.academy-progress-fill {
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(to right, #e6ce6a 0%, #c8960c 100%);
  transition: width 260ms ease;
}

.academy-episode-list {
  display: grid;
  gap: 10px;
}

.academy-episode-card {
  border: 1px solid var(--surface-border);
  border-radius: 10px;
  background: var(--surface-subtle);
  padding: 12px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 12px;
  align-items: center;
}

.academy-episode-card.is-completed {
  border-color: #b7892b;
}

.academy-episode-card.is-locked {
  opacity: 0.74;
}

.academy-episode-main {
  min-width: 0;
}

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

.academy-episode-title {
  margin: 0;
  color: var(--text);
  font-size: 1rem;
}

.academy-episode-summary {
  margin: 6px 0 0;
  color: var(--text);
  opacity: 0.9;
  line-height: 1.4;
}

.academy-episode-status {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border-radius: 999px;
  font-size: 0.72rem;
  padding: 2px 8px;
  font-weight: 700;
}

.academy-episode-status.done {
  color: #1a0a00;
  background: #d5b34e;
}

.academy-episode-status.live {
  color: #103512;
  background: #89c98d;
}

.academy-episode-status.lock {
  color: var(--text);
  background: var(--surface-subtle);
}

.academy-episode-action {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  text-decoration: none;
  border: 1px solid #b7892b;
  border-radius: 8px;
  background: linear-gradient(to bottom, #e6ce6a 0%, #c8960c 50%, #b7892b 100%);
  color: #1a0a00;
  font-weight: 700;
  padding: 9px 14px;
  white-space: nowrap;
}

.academy-episode-action:hover {
  opacity: 0.92;
}

.academy-episode-action.locked {
  border-color: var(--surface-border);
  background: var(--surface-subtle);
  color: var(--text);
  opacity: 0.7;
}

@media (max-width: 700px) {
  .academy-episode-card {
    grid-template-columns: 1fr;
    align-items: stretch;
  }

  .academy-episode-action {
    justify-content: center;
    width: 100%;
  }
}

.academy-archive {
  margin-top: 24px;
  padding-top: 18px;
  border-top: 1px dashed var(--surface-border);
}

.academy-archive-title {
  margin: 0 0 4px;
  color: var(--text);
  font-size: 1.05rem;
  display: flex;
  align-items: center;
  gap: 8px;
  opacity: 0.85;
}

.academy-archive-subtitle {
  margin: 0 0 12px;
  color: var(--text);
  opacity: 0.65;
  font-size: 0.85rem;
}

.academy-episode-card.is-archive {
  background: transparent;
  border-style: dashed;
  opacity: 0.92;
}

.academy-episode-card.is-archive .academy-episode-action {
  background: transparent;
  border-color: var(--surface-border);
  color: var(--text);
}

.academy-episode-card.is-archive .academy-episode-action:hover {
  background: var(--surface-hover);
  opacity: 1;
}

/* Gradual onboarding — top section of /academy, pre-tutorial entry. */
.academy-onboarding-section {
  margin-bottom: 1.25rem;
}
.academy-onboarding-card {
  border: 2px solid #6ad06a;
  background: linear-gradient(135deg, rgba(106, 208, 106, 0.08), transparent);
}
.academy-onboarding-card .academy-episode-title i {
  color: #6ad06a;
}
.academy-onboarding-card .academy-episode-action {
  background: #6ad06a;
  color: #1c2a1c;
  border-color: #4ea84e;
}
.academy-onboarding-card .academy-episode-action:hover {
  background: #7be07b;
}

.worldmap-active-raids {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.worldmap-upcoming-battles {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 10px;
}

.worldmap-upcoming-battle-card {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  border-radius: 10px;
  border: 1px solid rgba(255, 255, 255, 0.14);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05);
}

.worldmap-upcoming-battle-card-defense {
  background: linear-gradient(135deg, rgba(43, 59, 92, 0.92), rgba(26, 35, 56, 0.96));
  color: #eef4ff;
}

.worldmap-upcoming-battle-card-offense {
  background: linear-gradient(135deg, rgba(92, 58, 22, 0.92), rgba(56, 34, 14, 0.96));
  color: #fff1d8;
}

.worldmap-upcoming-battle-main {
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-width: 0;
}

.worldmap-upcoming-battle-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.worldmap-upcoming-battle-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 9px;
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.24);
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.02em;
}

.worldmap-upcoming-battle-pill-time {
  font-weight: 600;
}

.worldmap-upcoming-countdown {
  font-variant-numeric: tabular-nums;
}

.worldmap-upcoming-battle-copy {
  font-size: 0.95rem;
  line-height: 1.4;
}

.worldmap-upcoming-battle-copy strong {
  color: #fff;
}

.worldmap-active-raid-banner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 14px;
  border-radius: 8px;
  border: 1px solid transparent;
  flex-wrap: wrap;
  animation: raidBannerPulse 2.2s ease-in-out infinite;
}

.worldmap-active-raid-banner-defense {
  background-color: rgba(139, 31, 31, 0.92);
  border-color: rgba(255, 200, 200, 0.4);
  color: #fff0f0;
}

.worldmap-active-raid-banner-offense {
  background-color: rgba(74, 26, 0, 0.92);
  border-color: rgba(255, 215, 102, 0.45);
  color: #ffe9c2;
}

/* Territory-claim battles get a distinct gold/green accent vs the red raid
   banners — claiming a territory is the headline event. Defense stays alarming. */
.worldmap-active-raid-banner-conquer.worldmap-active-raid-banner-offense {
  background-color: rgba(28, 64, 30, 0.94);
  border-color: rgba(140, 230, 150, 0.5);
  color: #e6ffe9;
}

/* "Starting soon" upcoming battles (≤5 min): lifted, glowing, attention-grabbing
   so the player is ready when it goes live and the Join banner appears. */
.worldmap-upcoming-battle-card-soon {
  border-color: rgba(255, 215, 102, 0.7);
  box-shadow: 0 0 0 1px rgba(255, 215, 102, 0.35),
    0 0 14px rgba(255, 200, 90, 0.35);
  animation: raidBannerPulse 2.2s ease-in-out infinite;
}

.worldmap-upcoming-battle-pill-soon {
  background: rgba(255, 196, 64, 0.22);
  color: #ffd970;
  text-transform: uppercase;
}

.worldmap-active-raid-info {
  display: flex;
  align-items: center;
  gap: 10px;
  flex: 1 1 240px;
  font-size: 0.95rem;
  line-height: 1.35;
}

.worldmap-active-raid-info i {
  font-size: 1.1rem;
  opacity: 0.9;
}

.worldmap-active-raid-info strong {
  color: #fff;
}

.worldmap-active-raid-countdown {
  display: inline-block;
  margin-left: 8px;
  padding: 2px 8px;
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.3);
  font-variant-numeric: tabular-nums;
  font-weight: 600;
  font-size: 0.85rem;
}

.worldmap-active-raid-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background-color: #ffd766;
  color: #4a1a00;
  font-weight: 700;
  border: none;
  border-radius: 6px;
  padding: 8px 16px;
  cursor: pointer;
  text-decoration: none;
  white-space: nowrap;
}

.worldmap-active-raid-btn:hover {
  background-color: #ffe28a;
}

@keyframes raidBannerPulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(255, 215, 102, 0); }
  50% { box-shadow: 0 0 0 4px rgba(255, 215, 102, 0.18); }
}

.worldmap-map-viewport {
  position: relative;
  width: 100%;
  align-self: stretch;
  margin-bottom: 12px;
  height: 560px;
  max-height: 75vh;
  overflow: hidden;
  cursor: grab;
  touch-action: none;
  user-select: none;
  border-radius: 4px;
  background-color: var(--cloud-bg);
  background-image: url('/map/map_bg_paper_tiny.png');
  background-position: center;
  background-size: cover;
}

.worldmap-map-viewport.is-grabbing {
  cursor: grabbing;
}

.worldmap-map-viewport.is-grabbing .worldmap-hex,
.worldmap-map-viewport.is-transforming .worldmap-hex {
  pointer-events: none;
}

.worldmap-map-wrapper {
  position: absolute;
  top: 0;
  left: 0;
  transform-origin: 0 0;
  will-change: transform;
}

.worldmap-map-viewport.is-transforming .worldmap-attack-arrow,
.worldmap-map-viewport.is-grabbing .worldmap-attack-arrow {
  opacity: 0;
}
@media (max-width: 700px) {
  .worldmap-header {
    padding: 12px 14px;
    gap: 10px;
  }

  .worldmap-title {
    font-size: 1.1rem;
    width: 100%;
  }

  .worldmap-header-actions {
    width: 100%;
    justify-content: flex-start;
    flex-direction: column;
    align-items: stretch;
    gap: 10px;
  }

  .worldmap-stats {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 6px;
    width: 100%;
  }

  .worldmap-stat {
    font-size: 0.74rem;
    padding: 3px 8px;
    justify-content: flex-start;
  }

  .worldmap-tax-actions {
    align-items: stretch;
    width: 100%;
  }

  .worldmap-claim-taxes-btn {
    justify-content: center;
    width: 100%;
  }

  .worldmap-tax-note {
    text-align: center;
  }

  /* The claim button is full-width on mobile, so stack the timer below it
     (DOM order is timer-first, hence column-reverse). */
  .worldmap-tax-row {
    flex-direction: column-reverse;
    align-items: stretch;
    gap: 6px;
  }

  .worldmap-next-coin {
    justify-content: center;
  }

  .worldmap-map-viewport {
    height: 420px;
    max-height: 65vh;
  }
}

/* Mobile portrait: stat chips become icon + value only (labels hidden). */
@media (max-width: 700px) and (orientation: portrait) {
  .worldmap-stat-text {
    display: none;
  }

  .worldmap-stats {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
    gap: 6px;
  }

  .worldmap-stat {
    gap: 5px;
    padding: 4px 10px;
    font-size: 0.86rem;
  }

  .worldmap-stat i {
    font-size: 0.95em;
    opacity: 1;
  }
}

.worldmap-hex-map {
  background: url('/map/map_bg_paper_tiny.png') no-repeat center / 100% 100%;
  padding: 30px 60px 20px 16px;
  min-width: 620px;
}

.worldmap-zoom-controls {
  position: absolute;
  top: 16px;
  right: 16px;
  z-index: 5;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.worldmap-zoom-btn {
  width: 36px;
  height: 36px;
  border-radius: 999px;
  border: 1px solid var(--surface-border);
  background: var(--cloud-bg);
  background-image: var(--dirt-texture-url);
  color: var(--text);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 0.95rem;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.25);
  padding: 0;
}

.worldmap-zoom-btn:hover {
  filter: brightness(1.1);
}

.worldmap-zoom-btn:active {
  transform: translateY(1px);
}

@media (max-width: 700px) {
  .worldmap-zoom-controls {
    top: 10px;
    right: 10px;
  }

  .worldmap-zoom-btn {
    width: 32px;
    height: 32px;
    font-size: 0.85rem;
  }
}

.worldmap-hex-map .hex {
  flex-shrink: 0;
}

.worldmap-hex-neutral {
  opacity: 0.6;
  transition: opacity 0.2s;
}

.worldmap-hex-neutral:hover {
  opacity: 1;
}

.worldmap-hex-owned {
  opacity: 1;
  background-color: transparent !important;
}

.worldmap-hex-own {
  opacity: 1;
}

.worldmap-hex-attacker {
  box-shadow: 0 0 0 3px #e0b03a, 0 0 14px 4px rgba(224, 176, 58, 0.55);
  z-index: 3;
}

.worldmap-hex-attacker::after {
  content: "\f192"; /* fa-circle-dot */
  font-family: "Font Awesome 6 Free";
  font-weight: 900;
  position: absolute;
  left: 4px;
  top: 4px;
  color: #ffd766;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.9);
  font-size: 0.95rem;
  z-index: 4;
  pointer-events: none;
}

.worldmap-hex-attackable {
  box-shadow: 0 0 0 2px #e03a3a, 0 0 10px 2px rgba(224, 58, 58, 0.5);
}

.worldmap-hex-attackable::after {
  content: "\f3ed"; /* fa-shield-halved */
  font-family: "Font Awesome 6 Free";
  font-weight: 900;
  position: absolute;
  left: 4px;
  top: 4px;
  color: #ff8c8c;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.9);
  font-size: 0.95rem;
  z-index: 4;
  pointer-events: none;
}

.worldmap-attack-arrow {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 25;
  overflow: visible;
}

.worldmap-persistent-attack-arrow-line {
  stroke: #c95d5d;
  stroke-width: 3;
  stroke-dasharray: 10 7;
  opacity: 0.82;
  filter: drop-shadow(0 0 4px rgba(120, 30, 30, 0.35));
}

.worldmap-recent-raid-arrow-line {
  stroke-width: 4;
  stroke-linecap: round;
  opacity: 0.95;
}

.worldmap-recent-raid-arrow-line-success {
  stroke: #4fbe73;
  filter: drop-shadow(0 0 6px rgba(42, 122, 73, 0.45));
}

.worldmap-recent-raid-arrow-line-failure {
  stroke: #d96a6a;
  filter: drop-shadow(0 0 6px rgba(133, 53, 53, 0.45));
}

.worldmap-recent-raid-arrow-line-launched {
  stroke: #d8a34a;
  filter: drop-shadow(0 0 6px rgba(151, 98, 28, 0.45));
}

.worldmap-recent-raid-marker-ring {
  stroke-width: 2;
}

.worldmap-recent-raid-marker-ring-success {
  fill: rgba(22, 49, 32, 0.92);
  stroke: #77d795;
}

.worldmap-recent-raid-marker-ring-failure {
  fill: rgba(61, 23, 23, 0.94);
  stroke: #f09191;
}

.worldmap-recent-raid-marker-ring-launched {
  fill: rgba(69, 43, 12, 0.94);
  stroke: #f1c16d;
}

.worldmap-recent-raid-marker-icon {
  fill: #fff5df;
  font-size: 10px;
  font-weight: 700;
  pointer-events: none;
}

.worldmap-recent-raid-count-badge {
  fill: #f5efe2;
  stroke: rgba(0, 0, 0, 0.28);
  stroke-width: 1.2;
}

.worldmap-recent-raid-count-text {
  fill: #232323;
  font-size: 9px;
  font-weight: 700;
  pointer-events: none;
}

.worldmap-active-attack-arrow-line {
  stroke: #e03a3a;
  stroke-width: 4;
  filter: drop-shadow(0 0 6px rgba(150, 20, 20, 0.45));
}

.worldmap-closeup {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  margin: 16px 0 4px;
}

.worldmap-closeup-grid {
  position: relative;
  width: 150px;
  height: 143px;
}

.worldmap-closeup-hex {
  position: absolute !important;
  cursor: pointer;
  transition: transform 0.1s ease;
  margin: 0 !important;
}

.worldmap-closeup-hex:hover {
  transform: scale(1.05);
  z-index: 6;
}

.worldmap-closeup-center {
  box-shadow: 0 0 0 3px #e0b03a, 0 0 14px 4px rgba(224, 176, 58, 0.55);
  z-index: 3;
}

.worldmap-closeup-center-marker {
  color: #ffd766;
  font-size: 1.1rem;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.9);
}

.worldmap-closeup-attack-marker {
  color: #ff8080;
  font-size: 1.1rem;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.9);
}

.worldmap-closeup-claim-marker {
  color: #c4ff8a;
  font-size: 1rem;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.9);
}

.worldmap-closeup-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  font-size: 0.78rem;
  color: var(--papyrus-text);
  opacity: 0.9;
}

.worldmap-closeup-legend span i {
  margin-right: 3px;
}

.worldmap-closeup-arrow {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 30;
  overflow: visible;
}

.worldmap-closeup-arrow .worldmap-active-attack-arrow-line {
  stroke: #ffb347;
  stroke-width: 3;
  stroke-linecap: round;
  filter: drop-shadow(0 0 4px rgba(224, 90, 40, 0.7));
}

.worldmap-closeup-popover {
  width: 100%;
  max-width: 320px;
  margin-top: 10px;
}

.worldmap-closeup-popover:empty {
  display: none;
}

.worldmap-quick-attack {
  background:
    linear-gradient(180deg, rgba(0, 0, 0, 0.08), rgba(0, 0, 0, 0.14)),
    var(--panel-texture-url) center/cover,
    var(--panel-bg);
  border: 1.5px solid var(--resource-panel-border);
  border-radius: 10px;
  padding: 10px 12px;
  color: var(--text);
  display: flex;
  flex-direction: column;
  gap: 8px;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.45);
}

.worldmap-quick-attack-alert {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  padding: 8px 10px;
  border-radius: 8px;
  background: rgba(146, 37, 37, 0.28);
  border: 1px solid rgba(214, 99, 99, 0.4);
  color: #ffd3d3;
  font-size: 0.8rem;
  line-height: 1.4;
}

.worldmap-quick-attack-alert i {
  color: #ff9b9b;
  margin-top: 2px;
}

.worldmap-quick-attack-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.worldmap-quick-attack-title {
  font-weight: 700;
  font-size: 0.95rem;
  color: var(--papyrus-text);
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.worldmap-quick-attack-close {
  background: transparent;
  border: none;
  color: var(--text);
  cursor: pointer;
  font-size: 1rem;
  padding: 2px 6px;
  border-radius: 4px;
}

.worldmap-quick-attack-close:hover {
  background: rgba(255, 255, 255, 0.1);
}

.worldmap-quick-attack-stats {
  display: flex;
  gap: 12px;
  font-size: 0.85rem;
  opacity: 0.92;
  color: var(--text);
}

.worldmap-quick-attack-stat i {
  margin-right: 4px;
  color: #ffd766;
}

.worldmap-quick-attack-form {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.worldmap-quick-attack-mode {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 10px;
  border-radius: 10px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.04), rgba(0, 0, 0, 0.06)),
    var(--panel-texture-url) center/cover,
    color-mix(in srgb, var(--panel-bg) 88%, transparent);
  border: 1px solid color-mix(in srgb, var(--resource-panel-border) 85%, transparent);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06);
}

.worldmap-quick-attack-mode-raid {
  background:
    linear-gradient(180deg, rgba(120, 28, 53, 0.24), rgba(46, 14, 21, 0.2)),
    var(--panel-texture-url) center/cover,
    color-mix(in srgb, var(--panel-bg) 82%, rgba(120, 28, 53, 0.18));
  border-color: rgba(233, 110, 145, 0.28);
}

.worldmap-quick-attack-mode-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.worldmap-quick-attack-mode-title {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--papyrus-text);
  font-size: 0.84rem;
  font-weight: 700;
}

.worldmap-quick-attack-mode-title i {
  color: #ffd766;
}

.worldmap-quick-attack-mode-raid .worldmap-quick-attack-mode-title i {
  color: #ff8fb0;
}

.worldmap-quick-attack-mode-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 48px;
  padding: 4px 8px;
  border-radius: 999px;
  background: rgba(255, 215, 102, 0.12);
  border: 1px solid rgba(255, 215, 102, 0.2);
  color: #ffe298;
  font-size: 0.74rem;
  font-weight: 700;
}

.worldmap-quick-attack-mode-raid .worldmap-quick-attack-mode-pill {
  background: rgba(255, 143, 176, 0.14);
  border-color: rgba(255, 143, 176, 0.22);
  color: #ffc0d1;
}

.worldmap-quick-attack-copy,
.worldmap-quick-attack-meta {
  color: var(--text);
  opacity: 0.88;
  font-size: 0.78rem;
  line-height: 1.45;
}

.worldmap-quick-attack-label {
  color: var(--text);
  font-size: 0.82rem;
  opacity: 0.9;
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}

.worldmap-quick-attack-label i {
  color: #ffd766;
}

.worldmap-quick-attack-slot-time {
  font-weight: 600;
  color: var(--papyrus-text);
}

.worldmap-quick-attack-select {
  background: color-mix(in srgb, var(--panel-bg) 90%, rgba(255, 255, 255, 0.06));
  border: 1px solid color-mix(in srgb, var(--papyrus-text) 34%, transparent);
  color: var(--text);
  padding: 4px 6px;
  border-radius: 6px;
  font-size: 0.82rem;
}

.worldmap-quick-attack-checkbox {
  color: var(--text);
  font-size: 0.78rem;
  display: flex;
  align-items: center;
  gap: 6px;
  opacity: 0.88;
}

.worldmap-quick-attack-actions {
  display: flex;
  gap: 6px;
  margin-top: 4px;
  flex-wrap: wrap;
}

.worldmap-quick-attack-btn {
  flex: 1;
  min-width: 0;
  font-size: 0.82rem;
  padding: 6px 10px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  white-space: nowrap;
}

.worldmap-quick-attack-btn.btn.btn-secondary {
  background: color-mix(in srgb, var(--panel-bg) 92%, white 8%);
  border-color: color-mix(in srgb, var(--surface-border) 88%, transparent);
  color: var(--text);
}

.worldmap-quick-attack-btn.btn.btn-secondary:hover {
  background: color-mix(in srgb, var(--panel-bg) 82%, white 18%);
  color: var(--text);
}

.worldmap-quick-attack-btn-raid {
  background: linear-gradient(180deg, #d05680, #9e375e);
  border-color: rgba(255, 179, 198, 0.26);
  color: #fff4f7;
}

.worldmap-quick-attack-btn-raid:hover {
  filter: brightness(1.06);
}

.worldmap-quick-attack-note {
  font-size: 0.82rem;
  display: flex;
  flex-direction: column;
  gap: 6px;
  align-items: flex-start;
  color: var(--text);
}

.worldmap-quick-attack-note i {
  margin-right: 4px;
  color: #e0b03a;
}

.worldmap-hex-own .hex-overlay {
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.25);
}

.worldmap-hex-castle {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 80%;
  height: 80%;
  object-fit: contain;
  image-rendering: pixelated;
  pointer-events: none;
}

.worldmap-hex-content {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
}

.worldmap-hex-badges {
  position: absolute;
  top: 4px;
  right: 4px;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 4px;
  z-index: 2;
}

.worldmap-hex-badge {
  width: 20px;
  height: 20px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 0.65rem;
  color: #f8f4ea;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.35);
}

.worldmap-hex-badge-slot {
  background: rgba(58, 91, 139, 0.92);
}

.worldmap-hex-badge-defense {
  background: rgba(20, 124, 91, 0.92);
}

.worldmap-hex-badge-attack {
  background: rgba(159, 68, 36, 0.92);
}

.worldmap-hex-badge-tournament {
  background: rgba(135, 88, 26, 0.96);
}

.worldmap-hex-badge-coin {
  background: rgba(120, 85, 10, 0.92);
  color: #ffd700;
  border: 1px solid rgba(255, 215, 0, 0.75);
  box-shadow: 0 0 6px rgba(255, 215, 0, 0.45);
  animation: rewardBadgePulse 2s ease-in-out infinite;
}

.worldmap-hex-badge-raidable {
  background: rgba(90, 45, 10, 0.9);
  color: #ffb347;
  border: 1px solid rgba(255, 179, 71, 0.7);
  box-shadow: 0 0 5px rgba(255, 120, 60, 0.5);
  opacity: 0.9;
}

.worldmap-hex-badge-special {
  background: rgba(34, 22, 56, 0.92);
  border: 1px solid currentColor;
  box-shadow: 0 0 8px currentColor;
  animation: rewardBadgePulse 2.4s ease-in-out infinite;
}

.worldmap-hex-badge-special-tavern { color: #d49bff; }
.worldmap-hex-badge-special-shrine { color: #a08bff; }
.worldmap-hex-badge-special-sword  { color: #f0c060; }

.worldmap-hex-badge-locked {
  background: rgba(40, 40, 46, 0.92);
  color: #b9b2a6;
  border: 1px solid rgba(255, 255, 255, 0.18);
}

/* Locked frontier hexes — outside the temporary claim boundary. Dimmed and
   desaturated so the settled region reads as the active play area. */
.worldmap-hex-locked {
  opacity: 0.32;
  filter: grayscale(0.85);
  cursor: help;
}

.worldmap-hex-locked:hover {
  opacity: 0.55;
}

/* "Beyond the Frontier" panel shown in the hex info modal for locked hexes. */
.worldmap-bounds-locked {
  text-align: center;
  padding: 18px 16px 8px;
}

.worldmap-bounds-locked-icon {
  font-size: 1.8rem;
  color: #c9c0b0;
  opacity: 0.8;
  margin-bottom: 8px;
}

.worldmap-bounds-locked-title {
  margin: 0 0 8px 0;
  font-family: "Cinzel", serif;
  color: var(--papyrus-text);
  font-size: 1.05rem;
  letter-spacing: 0.5px;
}

.worldmap-bounds-locked-text {
  margin: 0;
  font-size: 0.88rem;
  line-height: 1.55;
  opacity: 0.8;
}

.worldmap-hex-special-img {
  filter: drop-shadow(0 0 4px rgba(255, 220, 180, 0.4));
}

.worldmap-special-panel {
  margin: 12px 0;
  padding: 12px 14px;
  border-radius: 10px;
  background: rgba(120, 60, 180, 0.16);
  border: 1px solid rgba(200, 140, 255, 0.4);
  color: var(--text);
}

.worldmap-special-panel-shrine {
  background: rgba(80, 70, 180, 0.16);
  border-color: rgba(160, 140, 255, 0.45);
}

.worldmap-special-panel-sword {
  background: rgba(160, 110, 30, 0.16);
  border-color: rgba(240, 192, 96, 0.45);
}

.worldmap-castle-preview-special {
  display: flex;
  justify-content: center;
  margin: 6px 0 12px;
}

.worldmap-special-img {
  max-width: 220px;
  max-height: none;
  width: auto;
  height: auto;
  object-fit: contain;
  border-radius: 12px;
  filter: drop-shadow(0 6px 18px rgba(0, 0, 0, 0.45));
}

.worldmap-info-panel-special-tavern {
  box-shadow: inset 0 0 0 1px rgba(212, 155, 255, 0.25);
}

.worldmap-info-panel-special-shrine {
  box-shadow: inset 0 0 0 1px rgba(160, 139, 255, 0.28);
}

.worldmap-info-panel-special-sword {
  box-shadow: inset 0 0 0 1px rgba(240, 192, 96, 0.28);
}

.worldmap-unclaimed-body-special {
  align-items: center;
  text-align: center;
}

.worldmap-ai-deck {
  margin: 12px 0;
  padding: 10px 12px;
  border-radius: 10px;
  background: var(--surface-subtle, rgba(127, 127, 127, 0.06));
  border: 1px solid var(--surface-border, rgba(127, 127, 127, 0.3));
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.worldmap-ai-deck-hint {
  margin: 0;
  font-size: 0.82rem;
  opacity: 0.8;
}

.worldmap-ai-deck-form {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.worldmap-ai-deck-select {
  padding: 6px 10px;
  border-radius: 6px;
  border: 1px solid var(--surface-border, rgba(127, 127, 127, 0.4));
  background: var(--cloud-bg2, rgba(255, 255, 255, 0.05));
  color: var(--text);
  font: inherit;
  flex: 1;
  min-width: 160px;
}

.worldmap-ai-deck-save {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

/* ===== World map tabs (Activity / Stats) ===== */
.worldmap-tabs {
  display: flex;
  gap: 6px;
  margin-bottom: 10px;
  border-bottom: 1px solid var(--surface-border, rgba(127, 127, 127, 0.25));
}

.worldmap-tab {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 14px;
  background: transparent;
  border: none;
  border-bottom: 2px solid transparent;
  color: var(--text);
  opacity: 0.7;
  cursor: pointer;
  font: inherit;
  font-size: 0.92rem;
  border-radius: 6px 6px 0 0;
  transition: background 0.12s, opacity 0.12s, border-color 0.12s;
}

.worldmap-tab:hover { opacity: 1; }

.worldmap-tab-active {
  opacity: 1;
  background: var(--surface-subtle, rgba(127, 127, 127, 0.08));
  border-bottom-color: #c8960c;
  font-weight: 700;
}

[data-worldmap-tabpanel][hidden] { display: none; }

.worldmap-tab-label { white-space: nowrap; }

/* Phone portrait: the full labels overflow the panel and force a horizontal
   scrollbar. Collapse inactive tabs to icon-only; the selected tab keeps its
   icon + label (truncated if a translation is very long) so the row always fits. */
@media (max-width: 600px) {
  .worldmap-tabs { gap: 4px; flex-wrap: nowrap; }
  .worldmap-tab { padding: 8px 12px; }
  .worldmap-tab .worldmap-tab-label { display: none; }
  .worldmap-tab.worldmap-tab-active .worldmap-tab-label {
    display: inline-block;
    max-width: 55vw;
    overflow: hidden;
    text-overflow: ellipsis;
    vertical-align: middle;
  }
}

/* ===== Map stats leaderboards ===== */
.worldmap-stats-summary {
  margin: 0 0 12px;
  font-size: 0.86rem;
  opacity: 0.85;
}

.worldmap-stats-summary-tail { opacity: 0.7; }

.worldmap-leaderboards {
  display: flex;
  flex-direction: column;
  gap: 0;
  width: 100%;
  min-width: 0;
}

.worldmap-leaderboards-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 10px;
  width: 100%;
  min-width: 0;
}

@media (min-width: 640px) {
  .worldmap-leaderboards-grid {
    grid-template-columns: 1fr 1fr;
    gap: 12px;
  }
}

.worldmap-stats-board {
  padding: 8px 10px;
  border-radius: 10px;
  background: var(--surface-subtle, rgba(127, 127, 127, 0.06));
  border: 1px solid var(--surface-border, rgba(127, 127, 127, 0.2));
  min-width: 0;
}

@media (min-width: 540px) {
  .worldmap-stats-board {
    padding: 10px 12px;
  }
}

.worldmap-stats-board-title {
  margin: 0 0 8px;
  font-size: 0.92rem;
  display: flex;
  align-items: center;
  gap: 6px;
  color: var(--text);
}

.worldmap-stats-board-title i { color: #d7aa3d; }

.worldmap-stats-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.worldmap-stats-row {
  display: grid;
  grid-template-columns: 26px minmax(0, 1fr) auto;
  gap: 6px;
  align-items: baseline;
  padding: 4px 6px;
  border-radius: 6px;
  font-size: 0.85rem;
}

@media (min-width: 540px) {
  .worldmap-stats-row {
    grid-template-columns: 32px minmax(0, 1fr) auto;
    gap: 8px;
    font-size: 1rem;
  }
}

.worldmap-stats-row:nth-child(odd) {
  background: rgba(255, 255, 255, 0.04);
}

.worldmap-stats-rank {
  font-weight: 700;
  opacity: 0.55;
  font-size: 0.8rem;
}

.worldmap-stats-name {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.worldmap-stats-value {
  font-weight: 700;
  color: #c8960c;
  font-size: 0.92rem;
  white-space: nowrap;
}

.worldmap-stats-unit {
  font-weight: 400;
  opacity: 0.7;
  margin-left: 3px;
  font-size: 0.78rem;
}

@media (max-width: 539px) {
  .worldmap-stats-unit {
    display: none;
  }
}

.worldmap-stats-value-time {
  color: var(--text);
  opacity: 0.85;
  font-size: 0.85rem;
  font-weight: 600;
}

.worldmap-stats-empty {
  margin: 0;
  font-size: 0.82rem;
  opacity: 0.65;
  font-style: italic;
}

/* ===== World map legend ===== */
.worldmap-legend-btn {
  color: #e0c882;
}

.worldmap-legend {
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.worldmap-legend-header {
  border-bottom: 1px solid var(--surface-border, rgba(127, 127, 127, 0.25));
  padding-bottom: 10px;
}

.worldmap-legend-title {
  margin: 0 0 4px;
  font-size: 1.15rem;
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--text);
}

.worldmap-legend-sub {
  margin: 0;
  font-size: 0.85rem;
  opacity: 0.75;
  color: var(--text);
}

.worldmap-legend-section {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.worldmap-legend-section-title {
  margin: 0;
  font-size: 0.95rem;
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--text);
}

.worldmap-legend-paragraph {
  margin: 0;
  font-size: 0.84rem;
  line-height: 1.45;
  opacity: 0.85;
  color: var(--text);
}

.worldmap-legend-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 8px;
}

@media (min-width: 540px) {
  .worldmap-legend-grid {
    grid-template-columns: 1fr 1fr;
  }
}

.worldmap-legend-item {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  padding: 8px 10px;
  border-radius: 8px;
  background: var(--surface-subtle, rgba(127, 127, 127, 0.06));
  border: 1px solid var(--surface-border, rgba(127, 127, 127, 0.2));
}

.worldmap-legend-item > div {
  min-width: 0;
}

.worldmap-legend-item strong {
  display: block;
  margin-bottom: 2px;
  color: var(--text);
}

.worldmap-legend-item p {
  margin: 0;
  font-size: 0.8rem;
  line-height: 1.4;
  opacity: 0.85;
  color: var(--text);
}

.worldmap-legend-item .worldmap-hex-badge {
  position: static;
  flex-shrink: 0;
  width: 28px;
  height: 28px;
  font-size: 0.78rem;
  animation: none;
}

.worldmap-legend-tile {
  width: 32px;
  height: 32px;
  flex-shrink: 0;
  border-radius: 6px;
  border: 1px solid rgba(255, 255, 255, 0.18);
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.15);
}

.worldmap-legend-tile-neutral {
  background: #6b8e2344;
}

.worldmap-legend-tile-own {
  background: #4a90d955;
  border-color: rgba(74, 144, 217, 0.65);
}

.worldmap-legend-tile-enemy {
  background: #c8503044;
  border-color: rgba(200, 80, 48, 0.55);
}

.worldmap-legend-arrow {
  width: 32px;
  height: 32px;
  flex-shrink: 0;
  border-radius: 6px;
  position: relative;
  background: rgba(0, 0, 0, 0.18);
  border: 1px solid var(--surface-border, rgba(127, 127, 127, 0.3));
}

.worldmap-legend-arrow::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image: linear-gradient(to right, transparent 6px, currentColor 6px, currentColor calc(100% - 12px), transparent calc(100% - 12px)),
                    linear-gradient(135deg, transparent 50%, currentColor 50%);
  background-size: 100% 2px, 8px 8px;
  background-position: center, calc(100% - 4px) center;
  background-repeat: no-repeat;
}

.worldmap-legend-arrow-outgoing { color: #ffb347; }
.worldmap-legend-arrow-incoming { color: #d05858; }
.worldmap-legend-arrow-raid     { color: rgba(255, 179, 71, 0.55); }

.worldmap-legend-footer {
  margin-top: 4px;
  display: flex;
  justify-content: flex-end;
}

.worldmap-special-header {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.95rem;
  margin-bottom: 4px;
}

.worldmap-special-header i {
  color: #d49bff;
}

.worldmap-special-note {
  margin: 0 0 6px;
  font-size: 0.84rem;
  opacity: 0.9;
  line-height: 1.4;
}

.worldmap-special-meta {
  margin-top: 4px;
  font-size: 0.82rem;
  opacity: 0.85;
}

.worldmap-admin-panel {
  margin: 12px 0;
  padding: 12px;
  border-radius: 10px;
  background: var(--surface-subtle, rgba(127, 127, 127, 0.08));
  border: 1px dashed var(--surface-border, rgba(127, 127, 127, 0.4));
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.worldmap-admin-label {
  font-size: 0.78rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  opacity: 0.7;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.worldmap-admin-form {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.worldmap-admin-select {
  padding: 6px 10px;
  border-radius: 6px;
  border: 1px solid var(--surface-border, rgba(127, 127, 127, 0.4));
  background: var(--cloud-bg2, rgba(255, 255, 255, 0.05));
  color: var(--text);
  font: inherit;
  flex: 1;
  min-width: 140px;
}

.worldmap-admin-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.worldmap-admin-types {
  margin: 0;
  padding-left: 18px;
  font-size: 0.78rem;
  opacity: 0.85;
  display: flex;
  flex-direction: column;
  gap: 2px;
  list-style: disc;
}

.worldmap-own-marker {
  color: #fff;
  font-size: 0.7rem;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.8);
}

.worldmap-enemy-marker {
  color: rgba(255, 255, 255, 0.6);
  font-size: 0.6rem;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.8);
}

/* World Map Info Panel */

.worldmap-info-panel {
  padding: 0;
}

.worldmap-info-header {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  padding: 16px 16px 8px;
  gap: 8px;
}

.worldmap-info-title {
  margin: 0;
  font-size: 1.1rem;
  color: var(--text);
  display: flex;
  align-items: center;
  gap: 8px;
}

.worldmap-coords {
  color: var(--text);
  opacity: 0.5;
  font-size: 0.75rem;
  font-family: monospace;
  white-space: nowrap;
}

/* Castle Preview */
.worldmap-castle-preview {
  text-align: center;
  padding: 8px 16px;
  background: var(--surface-subtle);
}

.worldmap-castle-img {
  max-height: 100px;
  image-rendering: pixelated;
  filter: drop-shadow(0 2px 6px rgba(0,0,0,0.4));
}

/* Owner Card */
.worldmap-owner-card {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 16px;
  margin: 0 12px;
  background: var(--surface-subtle);
  border: 1px solid var(--surface-border);
  border-radius: 8px;
}

.worldmap-owner-identity {
  display: flex;
  align-items: center;
  gap: 8px;
}

.worldmap-owner-color {
  display: inline-block;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  flex-shrink: 0;
  border: 1px solid var(--surface-border);
}

.worldmap-owner-tag {
  color: var(--text);
  font-weight: bold;
  cursor: pointer;
  text-decoration: none;
}

.worldmap-owner-tag:hover {
  text-decoration: underline;
}

.worldmap-rank-badge {
  font-size: 0.75rem;
  padding: 2px 6px;
  background: rgba(255, 215, 0, 0.15);
  border: 1px solid rgba(255, 215, 0, 0.3);
  border-radius: 4px;
  color: #daa520;
}

.worldmap-rating {
  color: var(--text);
  opacity: 0.6;
  font-size: 0.8rem;
}

/* Stats Grid */
.worldmap-stats-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1px;
  margin: 12px 12px 0;
  background: var(--surface-border);
  border-radius: 8px;
  overflow: hidden;
}

.worldmap-stat-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 10px 8px;
  background: var(--cloud-bg);
}

.worldmap-stat-label {
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--text);
  opacity: 0.5;
}

.worldmap-stat-value {
  font-size: 1rem;
  font-weight: bold;
  color: var(--text);
}

.worldmap-stat-small {
  font-size: 0.8rem;
}

/* Footer Info */
.worldmap-info-footer {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  padding: 12px 16px;
  font-size: 0.8rem;
  color: var(--text);
  opacity: 0.6;
}

.worldmap-info-footer span {
  display: flex;
  align-items: center;
  gap: 4px;
}

/* Unclaimed Territory */
.worldmap-unclaimed-body {
  text-align: center;
  padding: 20px 16px;
}

.worldmap-unclaimed-icon {
  font-size: 2.5rem;
  color: #6b8e23;
  opacity: 0.5;
  margin-bottom: 8px;
}

.worldmap-unclaimed-text {
  color: var(--text);
  opacity: 0.6;
  margin: 0;
  font-size: 0.9rem;
}

/* Actions & Messages */
.worldmap-info-actions {
  padding: 0 16px 16px;
}

.worldmap-claim-btn {
  width: 100%;
  padding: 12px 16px;
  font-size: 1rem;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}

.worldmap-info-msg {
  margin: 0 16px 16px;
  padding: 10px 12px;
  background: rgba(200, 150, 50, 0.1);
  border: 1px solid rgba(200, 150, 50, 0.25);
  border-radius: 8px;
  color: #c89030;
  font-size: 0.85rem;
  display: flex;
  align-items: center;
  gap: 8px;
}

/* Stat level bonus indicator */
.worldmap-stat-level {
  font-size: 0.7rem;
  color: #5cb85c;
  margin-left: 2px;
}

/* Upgrades Section */
.worldmap-upgrades {
  margin: 12px 12px 0;
  padding: 12px;
  background: var(--surface-subtle);
  border: 1px solid var(--surface-border);
  border-radius: 8px;
}

.worldmap-upgrades-title {
  margin: 0 0 10px;
  font-size: 0.85rem;
  color: var(--text);
  display: flex;
  align-items: center;
  gap: 6px;
}

.worldmap-upgrade-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 8px 0;
  border-top: 1px solid var(--surface-border);
}

.worldmap-upgrade-info {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.worldmap-upgrade-name {
  color: var(--text);
  font-size: 0.85rem;
  font-weight: bold;
}

.worldmap-upgrade-level {
  color: var(--text);
  opacity: 0.6;
  font-size: 0.75rem;
}

.worldmap-upgrade-next {
  color: #5cb85c;
}

.worldmap-upgrade-btn {
  padding: 6px 14px;
  font-size: 0.8rem;
  white-space: nowrap;
  display: flex;
  align-items: center;
  gap: 4px;
}

.worldmap-upgrade-maxed {
  color: #5cb85c;
  font-size: 0.8rem;
  font-weight: bold;
  padding: 6px 10px;
}

.worldmap-defense-section {
  margin: 12px 12px 0;
  padding: 12px;
  background: var(--surface-subtle);
  border: 1px solid var(--surface-border);
  border-radius: 8px;
}

.worldmap-defense-slots {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.worldmap-defense-slot {
  padding: 10px;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.08);
}

.worldmap-defense-slot-header {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  align-items: flex-start;
}

.worldmap-defense-slot-main {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.worldmap-defense-slot-time {
  font-weight: 600;
  color: var(--text);
  font-size: 0.88rem;
}

.worldmap-defense-slot-status {
  display: inline-flex;
  width: fit-content;
  padding: 2px 8px;
  border-radius: 999px;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.02em;
}

.worldmap-defense-slot-open {
  color: #84c8ff;
  background: rgba(64, 120, 210, 0.16);
}

.worldmap-defense-slot-duel {
  color: #6ed1a3;
  background: rgba(34, 145, 108, 0.16);
}

.worldmap-defense-slot-tournament {
  color: #ffd27d;
  background: rgba(179, 121, 34, 0.18);
}

.worldmap-defense-slot-raid {
  color: #ffb3c6;
  background: rgba(170, 58, 102, 0.16);
}

.worldmap-defense-slot-meta {
  color: var(--text);
  opacity: 0.66;
  font-size: 0.76rem;
  text-align: right;
}

.worldmap-defense-challengers {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 10px;
}

.worldmap-defense-challenger {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 8px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.08);
  color: var(--text);
  font-size: 0.74rem;
}

.worldmap-defense-challenger-self {
  border-color: rgba(218, 165, 32, 0.35);
  background: rgba(218, 165, 32, 0.11);
}

.worldmap-defense-slot-actions {
  margin-top: 10px;
}

.worldmap-slot-action-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.worldmap-slot-action-btn-primary {
  margin-top: 8px;
}

.worldmap-defense-slot-note {
  color: var(--text);
  opacity: 0.68;
  font-size: 0.76rem;
  line-height: 1.4;
}

.worldmap-defense-slot-form,
.worldmap-defense-create-form {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.worldmap-defense-create-form {
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid var(--surface-border);
}

.worldmap-defense-form-label {
  font-size: 0.78rem;
  color: var(--text);
  opacity: 0.72;
}

.worldmap-defense-select {
  width: 100%;
  border-radius: 8px;
  border: 1px solid var(--surface-border);
  background: rgba(0, 0, 0, 0.18);
  color: var(--text);
  padding: 10px 12px;
}

.worldmap-defense-checkbox {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--text);
  font-size: 0.78rem;
  opacity: 0.82;
}

.worldmap-defense-empty {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--text);
  opacity: 0.66;
  font-size: 0.82rem;
}

.worldmap-defense-slot-queued {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.worldmap-battle-bracket {
  margin-top: 10px;
  padding: 10px;
  border-radius: 10px;
  background: rgba(0, 0, 0, 0.16);
  border: 1px solid rgba(255, 255, 255, 0.06);
}

.worldmap-battle-bracket-title {
  display: flex;
  align-items: center;
  gap: 6px;
  color: var(--text);
  font-size: 0.8rem;
  font-weight: 700;
  margin-bottom: 8px;
}

.worldmap-battle-bracket-rounds {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.worldmap-battle-bracket-round-label {
  color: var(--text);
  opacity: 0.65;
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin-bottom: 4px;
}

.worldmap-battle-bracket-matches {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.worldmap-battle-bracket-match {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  gap: 6px;
  align-items: center;
}

.worldmap-battle-bracket-link {
  grid-column: 1 / -1;
  justify-self: start;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 0.72rem;
  color: #ffd27a;
  text-decoration: none;
}

.worldmap-battle-bracket-slot {
  padding: 6px 8px;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.06);
  color: var(--text);
  font-size: 0.74rem;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.worldmap-battle-bracket-slot-winner {
  border-color: rgba(109, 196, 139, 0.4);
  background: rgba(43, 122, 76, 0.18);
}

.worldmap-battle-bracket-vs {
  color: var(--text);
  opacity: 0.45;
  font-size: 0.68rem;
  text-transform: uppercase;
}

.worldmap-activity-panel {
  margin-top: 14px;
}

.worldmap-activity-panel-featured {
  position: relative;
  overflow: hidden;
}

.worldmap-activity-panel-featured::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 4px;
  background: linear-gradient(180deg, #ffd27a 0%, #c8960c 100%);
}

.worldmap-activity-intro {
  margin-bottom: 12px;
  opacity: 0.82;
}

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

.worldmap-activity-actions {
  display: flex;
  justify-content: center;
  margin-top: 12px;
}

.worldmap-activity-load-more {
  min-width: 140px;
}

/* Activity Summary tab — compact one-row-per-player daily rollups. */
.worldmap-summary-list {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.worldmap-summary-day {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.worldmap-summary-day-label {
  font-weight: 700;
  font-size: 0.82em;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  opacity: 0.65;
  padding-left: 2px;
}

.worldmap-summary-row {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 6px 10px;
  padding: 10px 14px;
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.08);
}

.worldmap-summary-player {
  font-weight: 700;
}

.worldmap-summary-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.worldmap-summary-chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 3px 9px;
  border-radius: 999px;
  font-size: 0.85em;
  font-weight: 600;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.1);
  white-space: nowrap;
}

.worldmap-summary-chip i {
  opacity: 0.85;
}

.worldmap-summary-chip-tax {
  background: rgba(240, 196, 80, 0.16);
  border-color: rgba(240, 196, 80, 0.4);
}

.worldmap-summary-chip-claim {
  background: rgba(99, 196, 135, 0.16);
  border-color: rgba(99, 196, 135, 0.4);
}

.worldmap-summary-chip-raid {
  background: rgba(221, 124, 124, 0.16);
  border-color: rgba(221, 124, 124, 0.4);
}

.worldmap-summary-chip-win {
  background: rgba(120, 180, 240, 0.16);
  border-color: rgba(120, 180, 240, 0.4);
}

.worldmap-summary-chip-loss {
  background: rgba(255, 255, 255, 0.04);
  border-color: rgba(255, 255, 255, 0.1);
  opacity: 0.8;
}

.worldmap-activity-entry {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  padding: 12px 14px;
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.08);
  transition: background 0.15s, border-color 0.15s;
}

.worldmap-activity-importance-major {
  background: rgba(99, 196, 135, 0.14);
  border-color: rgba(99, 196, 135, 0.45);
  box-shadow: inset 3px 0 0 rgba(99, 196, 135, 0.85);
}

.worldmap-activity-importance-major.worldmap-activity-conquer,
.worldmap-activity-importance-major.worldmap-activity-attack {
  background: rgba(221, 124, 124, 0.14);
  border-color: rgba(221, 124, 124, 0.5);
  box-shadow: inset 3px 0 0 rgba(221, 124, 124, 0.85);
}

.worldmap-activity-ai-defense-win {
  background: rgba(221, 124, 124, 0.14);
  border-color: rgba(221, 124, 124, 0.5);
  box-shadow: inset 3px 0 0 rgba(221, 124, 124, 0.85);
}

.worldmap-activity-importance-minor {
  opacity: 0.7;
  background: rgba(255, 255, 255, 0.03);
  border-color: rgba(255, 255, 255, 0.06);
}

.worldmap-activity-importance-major .worldmap-activity-text {
  font-weight: 600;
}

.worldmap-activity-name {
  display: inline;
  padding: 0;
  background: none;
  border: none;
  font-weight: 700;
  color: var(--action-secondary-color, #3d2000);
  font-family: inherit;
  font-size: inherit;
  line-height: inherit;
  transition: color 0.12s;
}

button.worldmap-activity-name {
  cursor: pointer;
}

button.worldmap-activity-name:hover,
button.worldmap-activity-name:focus-visible {
  color: var(--text);
  text-decoration: underline;
  outline: none;
}

.worldmap-activity-name-static {
  cursor: default;
}

.worldmap-activity-icon {
  width: 34px;
  height: 34px;
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: rgba(218, 165, 32, 0.14);
  color: #d7aa3d;
}

.worldmap-activity-tax .worldmap-activity-icon {
  background: rgba(200, 150, 12, 0.16);
  color: #c8960c;
}

.worldmap-activity-claim .worldmap-activity-icon {
  background: rgba(90, 170, 120, 0.16);
  color: #63c487;
}

.worldmap-activity-conquer .worldmap-activity-icon,
.worldmap-activity-attack .worldmap-activity-icon {
  background: rgba(196, 87, 87, 0.16);
  color: #dd7c7c;
}

.worldmap-activity-schedule .worldmap-activity-icon {
  background: rgba(69, 107, 187, 0.16);
  color: #8fb4ff;
}

.worldmap-activity-challenge .worldmap-activity-icon,
.worldmap-activity-tournament .worldmap-activity-icon {
  background: rgba(191, 136, 49, 0.16);
  color: #f0c36d;
}

.worldmap-activity-battle .worldmap-activity-icon {
  background: rgba(255, 210, 122, 0.18);
  color: #ffd27a;
}

.worldmap-activity-body {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}

.worldmap-activity-text {
  font-size: 0.95rem;
  line-height: 1.45;
  color: var(--text);
}

.worldmap-activity-time {
  font-size: 0.78rem;
  opacity: 0.7;
}

.worldmap-activity-empty {
  text-align: center;
  padding: 18px 12px 10px;
  opacity: 0.75;
}

.worldmap-activity-empty i {
  font-size: 1.35rem;
  margin-bottom: 8px;
  color: #d7aa3d;
}

.worldmap-activity-empty p {
  margin: 0;
}

/* === Tiled world map === */
/* The host is positioned relative so tiles place at world-pixel offsets.
   JS resizes width/height after each load to match the bbox of loaded
   tiles, so the existing pan-clamp logic still constrains drag distance. */
.worldmap-tile-host {
  position: relative;
  display: block;
  align-items: initial;
  gap: 0;
  padding: 0;
  min-width: 0;
  background: none;
}

.worldmap-tile {
  position: absolute;
  left: 0;
  top: 0;
  display: block;
}

/* Inside a tile, rows must NOT centre (the tile itself is already placed
   at the correct world pixel column). */
.worldmap-tile .hex-map-row {
  justify-content: flex-start;
}

.worldmap-tile .hex-map-offset {
  margin-left: 25px;
}

/* ── Territory-claim battle result modal (shown on the map after the orchestrator
   resolves a battle and bounces the player back) ───────────────────────────── */
.cwl-battle-result-overlay {
  position: fixed;
  inset: 0;
  z-index: 9200;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  background: rgba(0, 0, 0, 0.66);
  animation: cwlBattleResultFade 0.2s ease-out;
}

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

.cwl-battle-result-card {
  width: min(440px, 94vw);
  text-align: center;
  padding: 28px 26px 24px;
  border-radius: 14px;
  background: linear-gradient(160deg, #20262f, #161a21);
  border: 1px solid rgba(255, 255, 255, 0.12);
  box-shadow: 0 18px 60px rgba(0, 0, 0, 0.6);
  animation: cwlBattleResultPop 0.3s cubic-bezier(0.22, 1, 0.36, 1);
}

@keyframes cwlBattleResultPop {
  from { transform: scale(0.9); opacity: 0; }
  to { transform: scale(1); opacity: 1; }
}

.cwl-battle-result-icon {
  font-size: 3rem;
  margin-bottom: 10px;
}

.cwl-battle-result-won .cwl-battle-result-icon {
  color: #ffce5a;
  text-shadow: 0 0 18px rgba(255, 200, 90, 0.6);
}

.cwl-battle-result-lost .cwl-battle-result-icon {
  color: #b06a6a;
}

.cwl-battle-result-title {
  margin: 0 0 8px;
  font-size: 1.5rem;
  color: #fff;
}

.cwl-battle-result-won .cwl-battle-result-title {
  color: #ffe39a;
}

.cwl-battle-result-body {
  margin: 0 0 20px;
  color: #cdd4de;
  line-height: 1.45;
}

.cwl-battle-result-close {
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

/* ==========================================================================
   World-map hex panel — hub & sections
   The territory modal is a hub of action buttons; each opens one focused
   section back into the same modal target. Styling follows the medieval
   language already used by the campaign panel in this same modal: sharp
   2px corners, Cinzel titles, gold gradient plates, stone bevels.
   ========================================================================== */

.worldmap-info-header-section {
  align-items: center;
  border-bottom: 1px solid rgba(183, 137, 43, 0.45);
  padding-bottom: 10px;
}

.worldmap-hex-back {
  flex-shrink: 0;
  width: 32px;
  height: 32px;
  border-radius: 2px;
  border: 1px solid #b7892b;
  background: linear-gradient(to bottom, #e6ce6a 0%, #c8960c 50%, #b7892b 100%);
  color: #3d2000;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
  transition: filter 0.15s ease, transform 0.15s ease;
}

.worldmap-hex-back:hover {
  filter: brightness(1.12);
  transform: translateX(-2px);
}

.worldmap-info-header-section .worldmap-info-title {
  flex: 1;
  min-width: 0;
  font-family: "Cinzel", serif;
  letter-spacing: 0.5px;
}

.worldmap-castle-caption {
  display: block;
  margin-top: 4px;
  font-family: "Cinzel", serif;
  font-size: 0.72rem;
  letter-spacing: 0.6px;
  color: var(--text);
  opacity: 0.6;
}

.worldmap-stats-grid-compact {
  grid-template-columns: repeat(2, 1fr);
}

@media (min-width: 480px) {
  .worldmap-stats-grid-compact {
    grid-template-columns: repeat(3, 1fr);
  }
}

/* --- Hub action menu ----------------------------------------------------- */

.worldmap-hex-actions {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 12px;
}

/* Each row is a small stone plaque with a gold spine. --hex-tone recolors the
   spine and icon plate per action type (attack / alert / done). */
.worldmap-hex-action {
  --hex-tone: #b7892b;
  --hex-plate: linear-gradient(to bottom, #e6ce6a 0%, #c8960c 50%, #b7892b 100%);
  --hex-plate-ink: #3d2000;
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  padding: 10px 12px;
  text-align: left;
  border: 1px solid var(--surface-border);
  border-left: 3px solid var(--hex-tone);
  border-radius: 2px;
  background:
    linear-gradient(to bottom, rgba(255, 255, 255, 0.07) 0%, rgba(0, 0, 0, 0.10) 100%),
    var(--surface-subtle);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.12),
    inset 0 -2px 0 rgba(0, 0, 0, 0.22);
  color: var(--text);
  cursor: pointer;
  font: inherit;
  transition: border-color 0.15s ease, filter 0.15s ease, transform 0.1s ease;
}

.worldmap-hex-action:hover {
  border-color: var(--hex-tone);
  filter: brightness(1.06);
}

.worldmap-hex-action:active {
  transform: translateY(1px);
  box-shadow: inset 0 2px 6px rgba(0, 0, 0, 0.35);
}

.worldmap-hex-action-icon {
  flex-shrink: 0;
  width: 38px;
  height: 38px;
  border-radius: 2px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 1.05rem;
  background: var(--hex-plate);
  border: 1px solid var(--hex-tone);
  color: var(--hex-plate-ink);
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
}

.worldmap-hex-action-body {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.worldmap-hex-action-label {
  font-family: "Cinzel", serif;
  font-weight: 700;
  letter-spacing: 0.5px;
  font-size: 0.92rem;
  line-height: 1.2;
}

.worldmap-hex-action-summary {
  font-size: 0.78rem;
  opacity: 0.7;
  line-height: 1.3;
}

.worldmap-hex-action-badge {
  flex-shrink: 0;
  font-size: 0.72rem;
  font-weight: 700;
  padding: 3px 8px;
  border-radius: 2px;
  background: rgba(200, 150, 12, 0.16);
  border: 1px solid rgba(183, 137, 43, 0.55);
  white-space: nowrap;
}

.worldmap-hex-action-chevron {
  flex-shrink: 0;
  opacity: 0.4;
  font-size: 0.8rem;
}

.worldmap-hex-action-attack {
  --hex-tone: #7d2418;
  --hex-plate: linear-gradient(to bottom, #e08a7a 0%, #b03a2e 50%, #7d2418 100%);
  --hex-plate-ink: #ffe8e0;
}

.worldmap-hex-action-attack .worldmap-hex-action-badge {
  background: rgba(176, 58, 46, 0.18);
  border-color: rgba(125, 36, 24, 0.6);
}

.worldmap-hex-action-alert {
  --hex-tone: #b06010;
  --hex-plate: linear-gradient(to bottom, #ffc060 0%, #e8891a 50%, #b06010 100%);
  --hex-plate-ink: #3d1e00;
}

.worldmap-hex-action-done {
  --hex-tone: #4a7a35;
  --hex-plate: linear-gradient(to bottom, #a8d08d 0%, #6aa84f 50%, #4a7a35 100%);
  --hex-plate-ink: #17300b;
}

.worldmap-hex-action-disabled {
  opacity: 0.5;
  cursor: default;
}

.worldmap-hex-hub-note,
.worldmap-hex-hub-inline-form {
  padding: 0 12px 12px;
}

.worldmap-hex-hub-note {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.8rem;
  opacity: 0.7;
}

.worldmap-hex-hub-inline-btn {
  width: 100%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}

/* --- Section screens ----------------------------------------------------- */

.worldmap-hex-section {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 12px;
}

.worldmap-hex-section-lead {
  display: flex;
  flex-direction: column;
  gap: 3px;
  padding: 10px 12px;
  border-radius: 2px;
  background: rgba(0, 0, 0, 0.14);
  border: 1px solid var(--surface-border);
  border-left: 3px solid #b7892b;
}

.worldmap-hex-section-lead-main {
  font-family: "Cinzel", serif;
  font-weight: 700;
  letter-spacing: 0.4px;
  font-size: 0.9rem;
}

.worldmap-hex-section-lead-sub {
  font-size: 0.78rem;
  opacity: 0.7;
  line-height: 1.35;
}

.worldmap-hex-block {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 12px;
  border-radius: 2px;
  border: 1px solid var(--surface-border);
  background:
    linear-gradient(to bottom, rgba(255, 255, 255, 0.05) 0%, rgba(0, 0, 0, 0.08) 100%),
    var(--surface-subtle);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.10);
}

.worldmap-hex-block-raid {
  border-color: rgba(125, 36, 24, 0.5);
}

.worldmap-hex-block-title {
  margin: 0;
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: "Cinzel", serif;
  font-weight: 700;
  letter-spacing: 0.5px;
  font-size: 0.9rem;
  padding-bottom: 6px;
  border-bottom: 1px solid rgba(183, 137, 43, 0.35);
}

.worldmap-hex-block-pill {
  margin-left: auto;
  font-family: inherit;
  font-size: 0.72rem;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: 2px;
  background: rgba(200, 150, 12, 0.16);
  border: 1px solid rgba(183, 137, 43, 0.55);
}

.worldmap-hex-block-raid .worldmap-hex-block-pill {
  background: rgba(176, 58, 46, 0.18);
  border-color: rgba(125, 36, 24, 0.6);
}

.worldmap-hex-block-hint {
  margin: 0;
  font-size: 0.78rem;
  opacity: 0.7;
  line-height: 1.35;
}

.worldmap-hex-inline-form {
  display: flex;
  gap: 8px;
  align-items: center;
  flex-wrap: wrap;
}

.worldmap-hex-inline-form .worldmap-defense-select {
  flex: 1;
  min-width: 140px;
}

.worldmap-hex-inline-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  white-space: nowrap;
}

.worldmap-hex-quick-form {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.worldmap-hex-quick-btn {
  width: 100%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  flex-wrap: wrap;
  font-family: "Cinzel", serif;
  letter-spacing: 0.4px;
}

.worldmap-hex-callout {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  padding: 10px 12px;
  border-radius: 2px;
  background: rgba(200, 150, 50, 0.12);
  border: 1px solid rgba(200, 150, 50, 0.45);
  border-left: 3px solid #c8960c;
  font-size: 0.82rem;
  line-height: 1.4;
}

.worldmap-hex-callout .worldmap-hex-inline-btn {
  margin-top: 8px;
}

/* --- Record strip -------------------------------------------------------- */

.worldmap-hex-record {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(60px, 1fr));
  gap: 1px;
  background: var(--surface-border);
  border: 1px solid var(--surface-border);
  border-radius: 2px;
  overflow: hidden;
}

.worldmap-hex-record-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  padding: 8px 4px;
  background:
    linear-gradient(to bottom, rgba(255, 255, 255, 0.05) 0%, rgba(0, 0, 0, 0.08) 100%),
    var(--cloud-bg);
}

/* Text ink, not the gold accent: #c8960c lands at 2.25:1 on the light
   parchment surface, and a value is text — the marks carry the color. */
.worldmap-hex-record-value {
  font-size: 1.15rem;
  font-weight: 700;
  line-height: 1;
  color: var(--text);
}

.worldmap-hex-record-label {
  font-size: 0.65rem;
  text-transform: uppercase;
  letter-spacing: 0.4px;
  opacity: 0.6;
  text-align: center;
}

/* --- Upgrade level pips -------------------------------------------------- */

.worldmap-upgrade-pips {
  display: inline-flex;
  gap: 3px;
  margin-top: 4px;
}

.worldmap-upgrade-pip {
  width: 18px;
  height: 5px;
  border-radius: 1px;
  background: rgba(0, 0, 0, 0.22);
  border: 1px solid var(--surface-border);
}

.worldmap-upgrade-pip-filled {
  background: linear-gradient(to bottom, #e6ce6a 0%, #c8960c 100%);
  border-color: #b7892b;
}

/* --- Admin disclosure ---------------------------------------------------- */

summary.worldmap-admin-label {
  cursor: pointer;
  list-style: none;
}

summary.worldmap-admin-label::-webkit-details-marker {
  display: none;
}

.worldmap-admin-caret {
  font-size: 0.65rem;
  opacity: 0.6;
  transition: transform 0.15s ease;
}

details[open] > summary .worldmap-admin-caret {
  transform: rotate(180deg);
}

/* --- Buttons inside the hex panel ---------------------------------------
   `.cta` is a layout-only base class (padding/weight, no color), so on its own
   it renders as a browser-default white box. The campaign card in this same
   modal uses a gold plate + Cinzel, so match it here rather than leaving the
   territory actions unthemed. Scoped to the world-map panels so the global
   `.cta` users elsewhere keep their own modifiers. */

.worldmap-info-panel .cta,
.worldmap-quick-attack .cta {
  background: linear-gradient(to bottom, #e6ce6a 0%, #c8960c 50%, #b7892b 100%);
  border: 1px solid #b7892b;
  border-radius: 2px;
  color: #2b1a00;
  font-family: "Cinzel", serif;
  font-weight: 700;
  letter-spacing: 0.5px;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.35),
    0 2px 6px rgba(0, 0, 0, 0.3);
  transition: filter 0.15s ease, transform 0.1s ease;
}

.worldmap-info-panel .cta:hover,
.worldmap-quick-attack .cta:hover {
  filter: brightness(1.08);
}

.worldmap-info-panel .cta:active,
.worldmap-quick-attack .cta:active {
  transform: translateY(1px);
  box-shadow: inset 0 2px 6px rgba(0, 0, 0, 0.35);
}

/* Raid is the aggressive action — crimson plate instead of gold. */
.worldmap-hex-block-raid .cta,
.worldmap-quick-attack-btn-raid {
  background: linear-gradient(to bottom, #e08a7a 0%, #b03a2e 50%, #7d2418 100%);
  border-color: #7d2418;
  color: #fff1ec;
}

/* `.btn` is layout-only too and `.btn-secondary` supplies just the colors, so
   give the pair its padding/shape here. */
.worldmap-info-panel .btn,
.worldmap-quick-attack .btn {
  padding: 8px 14px;
  border-radius: 2px;
  font-family: "Cinzel", serif;
  font-weight: 700;
  font-size: 0.82rem;
  letter-spacing: 0.4px;
  cursor: pointer;
  background: rgba(0, 0, 0, 0.2);
  color: var(--text);
  border: 1px solid var(--surface-border);
  transition: background 0.15s ease, border-color 0.15s ease;
}

.worldmap-info-panel .btn:hover,
.worldmap-quick-attack .btn:hover {
  background: rgba(200, 150, 12, 0.14);
  border-color: #c8960c;
}

/* Selects and checkboxes in the panel should read as part of the same set. */
.worldmap-info-panel .worldmap-defense-select,
.worldmap-info-panel .worldmap-admin-select {
  padding: 7px 10px;
  border-radius: 2px;
  background: rgba(0, 0, 0, 0.18);
  color: var(--text);
  border: 1px solid var(--surface-border);
  font: inherit;
  font-size: 0.82rem;
}

.worldmap-info-panel .worldmap-defense-select:focus,
.worldmap-info-panel .worldmap-admin-select:focus {
  outline: none;
  border-color: #c8960c;
}

/* Keep hub rows compact: a long localized label or a wrapped timestamp must
   not stretch one button to three lines next to its neighbours. */
.worldmap-hex-action-summary {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* This stylesheet has no global `* { box-sizing: border-box }`, so every
   full-width element in the panel must opt in or its padding/border pushes it
   past the modal edge. */
.worldmap-hex-action,
.worldmap-hex-block,
.worldmap-hex-section-lead,
.worldmap-hex-callout,
.worldmap-hex-record,
.worldmap-hex-quick-btn,
.worldmap-hex-hub-inline-btn,
.worldmap-info-panel .worldmap-defense-select,
.worldmap-info-panel .worldmap-admin-select {
  box-sizing: border-box;
}

/* The one-tap publish button carries a timestamp, so keep it on a tight
   single-line-ish scale instead of inheriting the big `.cta` padding. */
.worldmap-hex-quick-btn {
  padding: 9px 12px;
  font-size: 0.82rem;
  line-height: 1.35;
  gap: 6px;
}

/* `.cloudy-round-panel button { margin: 10px }` applies to everything in this
   panel. The hub rows and full-width buttons are laid out by flex `gap`, and a
   width:100% element plus that margin overflows the modal — so opt them out. */
.worldmap-info-panel .worldmap-hex-action,
.worldmap-info-panel .worldmap-hex-back,
.worldmap-info-panel .worldmap-hex-quick-btn,
.worldmap-info-panel .worldmap-hex-hub-inline-btn,
.worldmap-info-panel .worldmap-hex-inline-btn {
  margin: 0;
}

/* Phone: the modal is ~350px, so a long label plus a wide badge (a converted
   local time) squeezes the title onto three lines. Drop the type a notch and
   let the badge sit under the summary instead of stealing the label's width. */
@media (max-width: 430px) {
  .worldmap-hex-action {
    display: grid;
    grid-template-columns: auto 1fr auto;
    grid-template-areas:
      "icon body chevron"
      "icon badge chevron";
    align-items: center;
    column-gap: 10px;
    row-gap: 6px;
  }

  .worldmap-hex-action-icon { grid-area: icon; align-self: start; }
  .worldmap-hex-action-body { grid-area: body; }
  .worldmap-hex-action-badge { grid-area: badge; justify-self: start; font-size: 0.68rem; }
  .worldmap-hex-action-chevron { grid-area: chevron; }

  .worldmap-hex-action-label {
    font-size: 0.86rem;
  }
}

/* The slot status pills are tuned for the dark theme (bright text on a
   translucent tint). On the light parchment panel that lands at roughly 1.5:1
   contrast — effectively unreadable — so darken the ink for light mode. */
@media (prefers-color-scheme: light) {
  .worldmap-defense-slot-open {
    color: #1c4f88;
    background: rgba(64, 120, 210, 0.18);
  }

  .worldmap-defense-slot-duel {
    color: #14603f;
    background: rgba(34, 145, 108, 0.20);
  }

  .worldmap-defense-slot-tournament {
    color: #7a4c07;
    background: rgba(179, 121, 34, 0.22);
  }

  .worldmap-defense-slot-raid {
    color: #8c1f42;
    background: rgba(170, 58, 102, 0.18);
  }
}

/* ==========================================================================
   Hex panel — territory stat tiles & meters
   Meter ramp is a single gold hue, validated per mode (ordinal checks:
   monotone lightness, adjacent ΔL >= 0.06, track clears the surface).
     light  track #c2a052 (2.08:1 on parchment) · fill #b0850b
     dark   track #8a6608 (3.23:1 on #1A1C24)   · fill #e6ce6a
   Values wear text ink, never the ramp — the meter is what carries color.
   ========================================================================== */

.worldmap-stat-block {
  --meter-track: #c2a052;
  --meter-fill: #b0850b;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  padding: 12px;
}

@media (prefers-color-scheme: dark) {
  .worldmap-stat-block {
    --meter-track: #8a6608;
    --meter-fill: #e6ce6a;
  }
}

.worldmap-stat-tile {
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
  padding: 10px;
  border-radius: 2px;
  border: 1px solid var(--surface-border);
  background:
    linear-gradient(to bottom, rgba(255, 255, 255, 0.05) 0%, rgba(0, 0, 0, 0.08) 100%),
    var(--surface-subtle);
}

.worldmap-stat-tile-wide {
  grid-column: 1 / -1;
}

.worldmap-stat-tile-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
  min-width: 0;
}

.worldmap-stat-tile-label {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  min-width: 0;
  font-size: 0.68rem;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--text);
  opacity: 0.6;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Proportional figures: these are standalone values, not a column to align. */
.worldmap-stat-tile-value {
  flex-shrink: 0;
  font-weight: 700;
  font-size: 1.15rem;
  line-height: 1;
  color: var(--text);
}

.worldmap-stat-tile-value-sm {
  font-size: 0.85rem;
  font-weight: 600;
}

.worldmap-stat-tile-unit {
  margin-left: 2px;
  font-size: 0.66rem;
  font-weight: 600;
  opacity: 0.55;
  text-transform: uppercase;
}

/* Meter: fill grows from the left baseline, 4px rounded data-end only. */
.worldmap-meter {
  position: relative;
  height: 6px;
  border-radius: 2px;
  background: var(--meter-track);
  overflow: hidden;
}

.worldmap-meter-fill {
  height: 100%;
  min-width: 0;
  background: var(--meter-fill);
  border-radius: 0 4px 4px 0;
  transition: width 0.3s ease;
}

.worldmap-stat-tile-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
  min-width: 0;
}

.worldmap-stat-tile-sub {
  font-size: 0.68rem;
  line-height: 1.25;
  color: var(--text);
  opacity: 0.55;
  min-width: 0;
}

/* Status chips ship with a label, never color alone. Text contrast checked
   per surface: warning 6.14:1 light / 6.95:1 dark, good 5.27:1 / 8.33:1. */
.worldmap-stat-chip {
  flex-shrink: 0;
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.4px;
  text-transform: uppercase;
  padding: 1px 6px;
  border-radius: 2px;
  border: 1px solid currentColor;
}

.worldmap-stat-chip-good { color: #3d6b2a; }
.worldmap-stat-chip-warning { color: #a3271b; }
.worldmap-stat-chip-neutral { color: var(--text); opacity: 0.55; }

@media (prefers-color-scheme: dark) {
  .worldmap-stat-chip-good { color: #8fc470; }
  .worldmap-stat-chip-warning { color: #f08a74; }
}

@media (max-width: 430px) {
  .worldmap-stat-block {
    grid-template-columns: 1fr;
  }
}

/* ==========================================================================
   World-map magnitude encodings
   Hex fill colour already carries owner identity, so SIZE carries "how much is
   at stake here". Both ramps are ordinal buckets (4 tiers) documented in the
   map legend — thresholds live in misc/worldMapScales.js. The exact number is
   in each mark's title and in the territory panel, so size never gates a value.
   ========================================================================== */

/* Coins at stake (claimable by the owner / raidable by everyone else). */
.worldmap-hex-badge.worldmap-coin-t1 { width: 14px; height: 14px; font-size: 0.5rem; }
.worldmap-hex-badge.worldmap-coin-t2 { width: 18px; height: 18px; font-size: 0.6rem; }
.worldmap-hex-badge.worldmap-coin-t3 { width: 21px; height: 21px; font-size: 0.72rem; }
.worldmap-hex-badge.worldmap-coin-t4 { width: 25px; height: 25px; font-size: 0.86rem; }

/* Conquer prize. Pixel sprite, bottom-left, behind the castle silhouette.
   OFF by default on the map until the encoding is judged in production —
   toggled via the map controls, which set `cwl-show-chests` on <body>. Because
   the switch is a body class, virtualized tiles fetched later inherit the
   current state with no re-application and no flash of visible chests.
   The scoping to `.worldmap-hex` keeps the legend's key swatches always
   visible, so the legend still explains the encoding while it is switched off. */
.worldmap-hex .worldmap-hex-chest {
  display: none;
}

body.cwl-show-chests .worldmap-hex .worldmap-hex-chest {
  display: block;
}

.worldmap-hex-chest {
  position: absolute;
  left: 3px;
  bottom: 3px;
  z-index: 2;
  image-rendering: pixelated;
  pointer-events: none;
  filter: drop-shadow(0 1px 3px rgba(0, 0, 0, 0.55));
}

/* Kept well under the castle sprite (80% of the hex): the castle is the hex's
   primary mark and the chest is an annotation on it, so the ramp tops out at
   about half the castle's width rather than rivalling it. */
.worldmap-chest-t1 { width: 11px; }
.worldmap-chest-t2 { width: 14px; }
.worldmap-chest-t3 { width: 18px; }
/* Top tier gets a faint glint so a jackpot hex is findable while panning. */
.worldmap-chest-t4 {
  width: 23px;
  filter: drop-shadow(0 1px 3px rgba(0, 0, 0, 0.55)) drop-shadow(0 0 5px rgba(255, 215, 0, 0.55));
}

/* Legend swatches reuse the same ramp so the key matches what's drawn. */
.worldmap-legend-scale {
  display: flex;
  align-items: flex-end;
  gap: 10px;
  flex-wrap: wrap;
}

.worldmap-legend-scale-step {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  min-width: 44px;
}

.worldmap-legend-scale-step .worldmap-hex-chest,
.worldmap-legend-scale-step .worldmap-hex-badge {
  position: static;
}

.worldmap-legend-scale-label {
  font-size: 0.66rem;
  opacity: 0.7;
  white-space: nowrap;
}

/* Chest toggle in the map controls — matches the merged-territory toggle's
   active treatment so the control bar reads as one set. */
.worldmap-chest-toggle.is-active {
  border-color: #e0b03a;
  color: #ffd766;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.25), 0 0 0 1px rgba(224, 176, 58, 0.45);
}