/* League of Legends TCG Showcase - Authentic LCU / Hextech UI Stylesheet */

:root {
  interpolate-size: allow-keywords;

  /* Hextech LoL Client Color Palette */
  --hex-bg-void: #010a13;
  --hex-bg-slate: #091428;
  --hex-bg-card: #0e1826;
  --hex-bg-card-alt: #060c14;
  --hex-bg-input: #050d1a;

  --hex-gold-bright: #f0e6d2;
  --hex-gold-main: #c8aa6e;
  --hex-gold-dark: #785a28;
  --hex-gold-deep: #463714;
  --hex-gold-glow: rgba(200, 170, 110, 0.4);

  --hex-blue-cyan: #0ac8b9;
  --hex-blue-glow: rgba(10, 200, 185, 0.4);

  --text-primary: #f0e6d2;
  --text-secondary: #cdbe91;
  --text-muted: #a09b8c;
  --text-dim: #64748b;

  /* Tier Gems & Glows */
  --tier-legend: #f59e0b;
  --tier-legend-glow: rgba(245, 158, 11, 0.5);
  --tier-elite: #a855f7;
  --tier-elite-glow: rgba(168, 85, 247, 0.5);
  --tier-star: #0ea5e9;
  --tier-star-glow: rgba(14, 165, 233, 0.5);
  --tier-rising: #10b981;
  --tier-rising-glow: rgba(16, 185, 129, 0.5);
  --tier-prospect: #94a3b8;
  --tier-prospect-glow: rgba(148, 163, 184, 0.4);

  /* Attributes Rating Colors */
  --attr-green: #2ce892;
  --attr-yellow: #fbd672;
  --attr-white: #f8fafc;
  --attr-coral: #ee6a55;

  /* Typography */
  --font-serif: 'Cinzel', Georgia, serif;
  --font-heading: 'Rajdhani', -apple-system, BlinkMacSystemFont, sans-serif;
  --font-body: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  --font-smooth: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, sans-serif;
}

html {
  scroll-behavior: smooth;
  overflow-x: hidden;
  max-width: 100%;
}

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

body {
  background-color: var(--hex-bg-void);
  color: var(--text-primary);
  font-family: var(--font-body);
  line-height: 1.5;
  min-height: 100vh;
  overflow-x: hidden;
  max-width: 100%;
  width: 100%;
  background-image: 
    radial-gradient(ellipse at 50% 0%, rgba(10, 32, 64, 0.4) 0%, transparent 65%),
    radial-gradient(circle at 10% 30%, rgba(168, 85, 247, 0.04) 0%, transparent 40%),
    radial-gradient(circle at 90% 60%, rgba(200, 170, 110, 0.05) 0%, transparent 40%),
    linear-gradient(180deg, #010a13 0%, #040910 100%);
  background-attachment: fixed;
}

/* ==========================================================================
   Header - Authentic League of Legends Client Top Navigation
   ========================================================================== */
.site-header {
  border-bottom: 2px solid var(--hex-gold-dark);
  background: rgba(1, 10, 19, 0.96);
  backdrop-filter: blur(16px);
  position: sticky;
  top: 0;
  z-index: 100;
  padding: 0;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.8);
}

.header-container {
  max-width: 1680px;
  margin: 0 auto;
  padding: 0 32px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  height: 68px;
}

/* Brand */
.brand {
  display: flex;
  align-items: center;
  gap: 14px;
  text-decoration: none;
  cursor: default;
  flex-shrink: 0;
}

.brand-emblem {
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1), filter 0.3s ease;
  filter: drop-shadow(0 2px 8px rgba(0, 0, 0, 0.7)) drop-shadow(0 0 10px rgba(200, 170, 110, 0.25));
}

.brand:hover .brand-emblem {
  transform: scale(1.08);
  filter: drop-shadow(0 2px 10px rgba(0, 0, 0, 0.8)) drop-shadow(0 0 16px rgba(10, 200, 185, 0.55));
}

.brand-emblem-svg {
  display: block;
  width: 100%;
  height: 100%;
  overflow: visible;
}

.brand-text {
  display: flex;
  flex-direction: column;
}

.brand-sub {
  font-family: var(--font-heading);
  font-size: 11px;
  letter-spacing: 3.5px;
  color: var(--hex-gold-main);
  font-weight: 800;
  line-height: 1.2;
}

.brand-title {
  font-family: var(--font-serif);
  font-size: 20px;
  font-weight: 900;
  letter-spacing: 1.5px;
  background: linear-gradient(180deg, #ffffff 30%, #c8aa6e 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  line-height: 1.2;
}

/* Nav Tabs */
.client-nav {
  display: flex;
  align-items: stretch;
  height: 100%;
  gap: 4px;
}

.nav-tab {
  display: flex;
  align-items: center;
  justify-content: center;
  background: none;
  border: none;
  padding: 0 24px;
  cursor: pointer;
  position: relative;
  text-decoration: none;
  transition: all 0.2s ease;
  height: 100%;
}

.nav-tab-label {
  font-family: var(--font-serif);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 2.5px;
  color: var(--text-muted);
  text-transform: uppercase;
  transition: color 0.2s ease, text-shadow 0.2s ease;
}

.nav-tab:hover:not(.nav-tab-disabled) .nav-tab-label {
  color: var(--hex-gold-bright);
  text-shadow: 0 0 12px var(--hex-gold-glow);
}

.nav-tab.active .nav-tab-label {
  color: var(--hex-gold-bright);
  text-shadow: 0 0 16px var(--hex-gold-glow);
  background: linear-gradient(180deg, #ffffff 20%, #c8aa6e 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.nav-tab-caret {
  display: none;
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 0;
  height: 0;
  border-left: 6px solid transparent;
  border-right: 6px solid transparent;
  border-bottom: 6px solid var(--hex-gold-main);
  z-index: 3;
}

.nav-tab.active .nav-tab-caret {
  display: block;
}

.nav-tab-indicator {
  position: absolute;
  bottom: -2px;
  left: 0;
  right: 0;
  height: 3px;
  background: transparent;
  transition: all 0.2s ease;
}

.nav-tab.active .nav-tab-indicator {
  background: linear-gradient(90deg, transparent 0%, var(--hex-gold-main) 20%, var(--hex-gold-bright) 50%, var(--hex-gold-main) 80%, transparent 100%);
  box-shadow: 0 0 10px var(--hex-gold-main);
}

.nav-tab-disabled {
  opacity: 0.35;
  cursor: not-allowed;
}

/* Header Actions (Search + Language Selector) */
.header-actions {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-shrink: 0;
}

/* Header Search */
.header-search {
  flex: 0 1 300px;
}

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

.search-svg {
  position: absolute;
  left: 14px;
  pointer-events: none;
  color: var(--hex-gold-main);
  opacity: 0.85;
}

.search-wrapper input {
  width: 100%;
  height: 38px;
  background: var(--hex-bg-input);
  border: 1px solid var(--hex-gold-dark);
  border-radius: 2px;
  padding: 0 34px 0 40px;
  color: var(--hex-gold-bright);
  font-family: var(--font-body);
  font-size: 13px;
  outline: none;
  box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.9);
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.search-wrapper input:focus {
  border-color: var(--hex-gold-main);
  box-shadow: 0 0 12px rgba(200, 170, 110, 0.4), inset 0 0 6px rgba(0, 0, 0, 0.9);
}

.search-wrapper input::placeholder {
  color: var(--text-dim);
  font-size: 12px;
}

.search-clear {
  position: absolute;
  right: 12px;
  background: none;
  border: none;
  color: var(--text-dim);
  cursor: pointer;
  font-size: 14px;
  padding: 4px;
  display: none;
}

.search-clear:hover {
  color: var(--hex-gold-bright);
}

/* Hextech Language Selector Dropdown */
.lang-selector-dropdown {
  position: relative;
  user-select: none;
}

.lang-toggle-btn {
  height: 38px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 0 14px;
  font-family: var(--font-heading);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 1.5px;
  color: var(--hex-gold-bright);
  background: rgba(1, 10, 19, 0.85);
  border: 1px solid var(--hex-gold-dark);
  border-radius: 2px;
  cursor: pointer;
  transition: all 0.2s ease;
  white-space: nowrap;
}

.lang-toggle-btn:hover,
.lang-toggle-btn.is-open {
  border-color: var(--hex-gold-main);
  box-shadow: 0 0 14px var(--hex-gold-glow);
  background: rgba(10, 25, 40, 0.95);
  color: #ffffff;
}

.lang-flag {
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.lang-flag-img {
  width: 22px;
  height: 15px;
  object-fit: cover;
  border-radius: 2px;
  display: block;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.6);
  border: 1px solid rgba(200, 170, 110, 0.45);
}

.lang-option-flag {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.lang-option-flag .lang-flag-img {
  width: 20px;
  height: 14px;
}

.lang-code {
  display: none;
}

.lang-arrow {
  font-size: 9px;
  color: var(--hex-gold-main);
  transition: transform 0.25s ease;
  display: inline-block;
}

.lang-toggle-btn.is-open .lang-arrow {
  transform: rotate(180deg);
}

.lang-dropdown-menu {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  min-width: 146px;
  background: rgba(3, 15, 28, 0.98);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border: 1px solid var(--hex-gold-main);
  border-radius: 4px;
  padding: 6px;
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.9), 0 0 16px rgba(200, 170, 110, 0.25);
  display: none;
  flex-direction: column;
  gap: 4px;
  z-index: 120;
  transform-origin: top right;
  animation: langDropdownFadeIn 0.18s cubic-bezier(0.16, 1, 0.3, 1);
}

.lang-dropdown-menu.show {
  display: flex;
}

@keyframes langDropdownFadeIn {
  from {
    opacity: 0;
    transform: translateY(-6px) scale(0.97);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

.lang-option {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 12px;
  background: transparent;
  border: 1px solid transparent;
  border-radius: 2px;
  color: var(--text-dim);
  font-family: var(--font-heading);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 1px;
  cursor: pointer;
  text-align: left;
  transition: all 0.15s ease;
  width: 100%;
}

.lang-option:hover {
  background: rgba(200, 170, 110, 0.12);
  border-color: rgba(200, 170, 110, 0.4);
  color: var(--hex-gold-bright);
  box-shadow: 0 0 8px rgba(200, 170, 110, 0.2);
}

.lang-option.active {
  background: rgba(200, 170, 110, 0.18);
  border-color: var(--hex-gold-main);
  color: var(--hex-gold-bright);
}

.lang-option-flag {
  font-size: 16px;
  line-height: 1;
}

.lang-option-name {
  flex: 1;
}

.lang-option-check {
  font-size: 10px;
  color: var(--hex-gold-main);
  opacity: 0;
  transition: opacity 0.15s ease;
}

.lang-option.active .lang-option-check {
  opacity: 1;
}

/* ==========================================================================
   Hextech Controls Deck (Command Console)
   ========================================================================== */
.collection-controls-deck {
  background: linear-gradient(180deg, #091428 0%, #030a12 100%);
  border-bottom: 2px solid var(--hex-gold-dark);
  padding: 16px 0 10px 0;
  position: sticky;
  top: 68px;
  z-index: 90;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.8);
  transition: padding 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.deck-container {
  max-width: 1680px;
  margin: 0 auto;
  padding: 0 32px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

/* Subnav Row: Season Tabs & Tools */
.deck-subnav-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  flex-wrap: wrap;
}

/* Season Tabs */
.season-tabs {
  display: flex;
  align-items: center;
  gap: 10px;
}

.season-tab {
  height: 42px;
  padding: 0 20px;
  background: linear-gradient(180deg, #1e282d 0%, #0f171d 100%);
  border: 1px solid var(--hex-gold-dark);
  border-radius: 2px;
  color: var(--text-secondary);
  font-family: var(--font-heading);
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08), 0 2px 6px rgba(0, 0, 0, 0.6);
  transition: all 0.2s ease;
  position: relative;
}

.season-tab:hover {
  background: linear-gradient(180deg, #2d3b45 0%, #17242c 100%);
  border-color: var(--hex-gold-main);
  color: var(--hex-gold-bright);
  box-shadow: 0 0 12px var(--hex-gold-glow);
}

.season-tab.active {
  background: linear-gradient(180deg, #322616 0%, #17120a 100%);
  border-color: var(--hex-gold-main);
  color: #ffffff;
  box-shadow: 0 0 16px var(--hex-gold-glow), inset 0 0 8px rgba(200, 170, 110, 0.3);
}

.season-tab.active::after {
  content: "";
  position: absolute;
  bottom: -1px;
  left: 10%;
  right: 10%;
  height: 2px;
  background: var(--hex-gold-main);
  box-shadow: 0 0 8px var(--hex-gold-main);
}

.season-gem {
  color: var(--hex-gold-main);
  font-size: 11px;
  text-shadow: 0 0 6px var(--hex-gold-main);
}

.season-counter {
  font-size: 11px;
  font-weight: 800;
  color: var(--hex-blue-cyan);
  background: rgba(10, 200, 185, 0.15);
  padding: 3px 8px;
  border-radius: 2px;
  border: 1px solid rgba(10, 200, 185, 0.4);
  letter-spacing: 0.8px;
}

/* Tools Group (View switch & sort) */
.deck-tools-group {
  display: flex;
  align-items: center;
  gap: 20px;
  flex-wrap: wrap;
}

.tool-label {
  font-family: var(--font-heading);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 1.5px;
  color: var(--hex-gold-main);
  text-transform: uppercase;
}

.view-mode-frame {
  display: flex;
  align-items: center;
  gap: 8px;
}

.view-btn-group {
  display: flex;
  background: #010a13;
  border: 1px solid var(--hex-gold-dark);
  padding: 2px;
  border-radius: 2px;
}

/* Sort Frame */
.sort-frame {
  display: flex;
  align-items: center;
  gap: 8px;
}

.lol-select-frame {
  position: relative;
  display: inline-block;
}

.lol-select-frame::after {
  content: "▼";
  font-size: 9px;
  color: var(--hex-gold-main);
  position: absolute;
  right: 12px;
  top: 50%;
  transform: translateY(-50%);
  pointer-events: none;
}

.custom-select {
  appearance: none;
  height: 38px;
  background: linear-gradient(180deg, #1e282d 0%, #0f171d 100%);
  border: 1px solid var(--hex-gold-dark);
  color: var(--text-secondary);
  font-family: var(--font-heading);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 1px;
  text-transform: uppercase;
  padding: 0 34px 0 14px;
  border-radius: 2px;
  cursor: pointer;
  outline: none;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08), 0 2px 6px rgba(0, 0, 0, 0.6);
  transition: all 0.2s ease;
}

.custom-select:hover,
.custom-select:focus {
  border-color: var(--hex-gold-main);
  color: var(--hex-gold-bright);
  box-shadow: 0 0 12px var(--hex-gold-glow);
}

/* Center Collapse / Expand Toggle Row */
.deck-toggle-row {
  display: flex;
  justify-content: center;
  align-items: center;
  padding-top: 4px;
}

.deck-collapse-toggle-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 24px;
  padding: 0 14px;
  background: linear-gradient(180deg, #182228 0%, #0a1116 100%);
  border: 1px solid var(--hex-gold-dark);
  border-radius: 12px;
  color: var(--text-secondary);
  font-family: var(--font-heading);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  cursor: pointer;
  outline: none;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08), inset 0 0 4px rgba(0, 0, 0, 0.8), 0 2px 5px rgba(0, 0, 0, 0.5);
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
  user-select: none;
}

.deck-collapse-toggle-btn:hover {
  background: linear-gradient(180deg, #24343d 0%, #101a21 100%);
  border-color: var(--hex-gold-main);
  color: var(--hex-gold-bright);
  box-shadow: 0 0 12px var(--hex-gold-glow), inset 0 0 6px rgba(200, 170, 110, 0.2);
  transform: translateY(-1px);
}

.deck-collapse-toggle-btn:active {
  transform: translateY(0);
}

.deck-collapse-toggle-btn .toggle-gem {
  font-size: 6px;
  color: var(--hex-gold-main);
  text-shadow: 0 0 4px var(--hex-gold-glow);
  transition: color 0.2s ease;
}

.deck-collapse-toggle-btn .toggle-arrow {
  font-size: 7px;
  color: var(--hex-gold-main);
  transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.deck-collapse-toggle-btn[aria-expanded="false"] .toggle-arrow {
  transform: rotate(180deg);
}

.deck-collapse-toggle-btn .toggle-text {
  transition: color 0.2s ease;
}

/* Collapsible Filters Wrapper */
.deck-filters-wrapper {
  display: grid;
  grid-template-rows: 1fr;
  transition: grid-template-rows 0.35s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.25s ease, visibility 0s;
  opacity: 1;
  visibility: visible;
}

.deck-filters-wrapper.is-collapsed {
  grid-template-rows: 0fr;
  opacity: 0;
  visibility: hidden;
  transition: grid-template-rows 0.35s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.25s ease, visibility 0.35s step-end;
  pointer-events: none;
}

.deck-filters-inner {
  min-height: 0;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.collection-controls-deck.is-filters-collapsed {
  padding: 6px 0;
}

.deck-container.is-filters-collapsed {
  gap: 0;
}

/* Filters Row (Tier, League & Role Cassettes) */
.deck-filters-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: 16px;
  padding-top: 14px;
  border-top: 1px solid rgba(120, 90, 40, 0.4);
}

/* Framed Cassettes */
.filter-cassette {
  background: rgba(4, 9, 16, 0.7);
  border: 1px solid var(--hex-gold-deep);
  border-radius: 2px;
  padding: 10px 14px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  box-shadow: inset 0 0 8px rgba(0, 0, 0, 0.6);
}

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

.cassette-title {
  font-family: var(--font-heading);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 1.8px;
  color: var(--hex-gold-main);
  text-transform: uppercase;
}

.cassette-buttons {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

/* ==========================================================================
   Authentic Hextech Metallic Button System
   ========================================================================== */
.hextech-btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: 38px;
  padding: 0 16px;
  background: linear-gradient(180deg, #1e282d 0%, #111a20 100%);
  border: 1px solid var(--hex-gold-dark);
  color: var(--text-secondary);
  font-family: var(--font-heading);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  cursor: pointer;
  outline: none;
  border-radius: 2px;
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1), inset 0 0 4px rgba(0, 0, 0, 0.8), 0 2px 6px rgba(0, 0, 0, 0.6);
  user-select: none;
}

.hextech-btn:hover {
  background: linear-gradient(180deg, #2d3b45 0%, #18252e 100%);
  border-color: var(--hex-gold-main);
  color: var(--hex-gold-bright);
  box-shadow: 0 0 12px var(--hex-gold-glow), inset 0 0 6px rgba(200, 170, 110, 0.2);
  transform: translateY(-1px);
}

.hextech-btn.active {
  background: linear-gradient(180deg, #322618 0%, #17130c 100%);
  border-color: var(--hex-gold-bright);
  color: #ffffff;
  box-shadow: 0 0 16px var(--hex-gold-glow), inset 0 0 8px rgba(200, 170, 110, 0.35);
}

.hextech-btn.active::after {
  content: "";
  position: absolute;
  bottom: -1px;
  left: 10%;
  right: 10%;
  height: 2px;
  background: var(--hex-gold-main);
  box-shadow: 0 0 8px var(--hex-gold-main);
}

/* Mode Buttons */
.mode-btn.hextech-btn {
  height: 34px;
  padding: 0 14px;
  font-size: 11px;
  border: none;
  background: transparent;
  box-shadow: none;
}

.mode-btn.hextech-btn:hover {
  background: rgba(255, 255, 255, 0.06);
  color: var(--hex-gold-bright);
  box-shadow: none;
  transform: none;
}

.mode-btn.hextech-btn.active {
  background: linear-gradient(180deg, #1e282d 0%, #0d1a20 100%);
  color: var(--hex-blue-cyan);
  border: 1px solid rgba(10, 200, 185, 0.5);
  box-shadow: 0 0 10px rgba(10, 200, 185, 0.3);
}

.mode-btn.hextech-btn.active::after {
  display: none;
}

.mode-svg {
  opacity: 0.9;
}

/* Gemstones */
.hex-gem {
  font-size: 11px;
  line-height: 1;
  display: inline-block;
}

.hex-gem-gold { color: var(--tier-legend); text-shadow: 0 0 8px var(--tier-legend-glow); }
.hex-gem-purple { color: var(--tier-elite); text-shadow: 0 0 8px var(--tier-elite-glow); }
.hex-gem-blue { color: var(--tier-star); text-shadow: 0 0 8px var(--tier-star-glow); }
.hex-gem-green { color: var(--tier-rising); text-shadow: 0 0 8px var(--tier-rising-glow); }
.hex-gem-silver { color: var(--tier-prospect); text-shadow: 0 0 8px var(--tier-prospect-glow); }
.hex-gem-amber { color: #f59e0b; text-shadow: 0 0 8px rgba(245, 158, 11, 0.6); }

/* Tier Button Hover / Active Glow Customizations */
.hextech-btn.tier-legend:hover,
.hextech-btn.tier-legend.active {
  border-color: var(--tier-legend);
  box-shadow: 0 0 14px var(--tier-legend-glow);
}
.hextech-btn.tier-legend.active {
  background: linear-gradient(180deg, #382506 0%, #181002 100%);
  color: #fef3c7;
}

.hextech-btn.tier-elite:hover,
.hextech-btn.tier-elite.active {
  border-color: var(--tier-elite);
  box-shadow: 0 0 14px var(--tier-elite-glow);
}
.hextech-btn.tier-elite.active {
  background: linear-gradient(180deg, #2b113d 0%, #12051b 100%);
  color: #f3e8ff;
}

.hextech-btn.tier-star:hover,
.hextech-btn.tier-star.active {
  border-color: var(--tier-star);
  box-shadow: 0 0 14px var(--tier-star-glow);
}
.hextech-btn.tier-star.active {
  background: linear-gradient(180deg, #07273d 0%, #03121d 100%);
  color: #e0f2fe;
}

.hextech-btn.tier-rising:hover,
.hextech-btn.tier-rising.active {
  border-color: var(--tier-rising);
  box-shadow: 0 0 14px var(--tier-rising-glow);
}
.hextech-btn.tier-rising.active {
  background: linear-gradient(180deg, #072e21 0%, #021610 100%);
  color: #d1fae5;
}

.hextech-btn.tier-prospect:hover,
.hextech-btn.tier-prospect.active {
  border-color: var(--tier-prospect);
  box-shadow: 0 0 12px var(--tier-prospect-glow);
}
.hextech-btn.tier-prospect.active {
  background: linear-gradient(180deg, #202733 0%, #0d1117 100%);
  color: #f1f5f9;
}

/* ==========================================================================
   Main Content Area
   ========================================================================== */
.main-content {
  padding: 32px 0 64px;
}

.content-container {
  max-width: 1680px;
  margin: 0 auto;
  padding: 0 32px;
}

/* Status Banner */
.results-meta {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 28px;
  gap: 16px;
  scroll-margin-top: 220px;
}

.status-line-decor {
  flex: 1;
  height: 1px;
}

.status-line-decor.left {
  background: linear-gradient(90deg, transparent 0%, var(--hex-gold-dark) 100%);
}

.status-line-decor.right {
  background: linear-gradient(90deg, var(--hex-gold-dark) 0%, transparent 100%);
}

.status-content {
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--hex-gold-main);
  font-family: var(--font-heading);
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 2.5px;
  text-transform: uppercase;
}

.status-gem {
  color: var(--hex-gold-dark);
  font-size: 10px;
}

/* ==========================================================================
   Teams View (Hextech Esports Hub) - Divided by Leagues
   ========================================================================== */
.teams-view-container {
  display: flex;
  flex-direction: column;
  gap: 28px;
}

/* Master Unified League Window */
.league-group-section {
  display: flex;
  flex-direction: column;
  scroll-margin-top: 220px;
  background: linear-gradient(180deg, rgba(8, 16, 28, 0.95) 0%, rgba(2, 6, 12, 0.98) 100%);
  border: 1px solid var(--hex-gold-dark);
  border-left: 5px solid var(--hex-gold-main);
  border-radius: 6px;
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.75);
  overflow: hidden;
  position: relative;
  transition: border-color 0.25s ease, box-shadow 0.25s ease;
}

.league-group-section:hover {
  border-color: rgba(200, 170, 110, 0.5);
}

.league-group-section.lck { border-left-color: #0ac8b9; }
.league-group-section.lpl { border-left-color: #ef4444; }
.league-group-section.lec { border-left-color: #3b82f6; }
.league-group-section.lcs { border-left-color: #10b981; }
.league-group-section.lcp { border-left-color: #f59e0b; }
.league-group-section.other { border-left-color: var(--hex-gold-main); }

/* Gold Corner Accent on Unified Window */
.league-group-section::before {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  width: 12px;
  height: 12px;
  border-top: 2px solid var(--hex-gold-main);
  border-right: 2px solid var(--hex-gold-main);
  pointer-events: none;
  z-index: 5;
}

.league-banner-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 22px;
  background: linear-gradient(90deg, rgba(12, 24, 44, 0.95) 0%, rgba(5, 12, 22, 0.9) 60%, rgba(2, 6, 12, 0.6) 100%);
  border: none;
  border-bottom: 1px solid rgba(200, 170, 110, 0.22);
  gap: 16px;
  cursor: pointer;
  user-select: none;
  transition: background 0.2s ease, border-color 0.2s ease;
  position: relative;
}

.league-banner-header:hover {
  background: linear-gradient(90deg, rgba(18, 36, 64, 0.95) 0%, rgba(8, 18, 32, 0.9) 60%, rgba(3, 8, 16, 0.7) 100%);
}

.league-banner-header:focus-visible {
  outline: 2px solid var(--hex-gold-main);
  outline-offset: -2px;
}

.league-group-section.is-collapsed .league-banner-header {
  border-bottom-color: transparent;
}

.league-banner-header::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 1px;
  background: linear-gradient(90deg, var(--hex-gold-main) 0%, transparent 60%);
  opacity: 0.6;
}

.league-group-section.is-collapsed .league-banner-header::after {
  display: none;
}

.league-title-box {
  display: flex;
  align-items: center;
  gap: 16px;
}

.league-crest-box {
  width: 56px;
  height: 56px;
  background: #010a13;
  border: 1px solid var(--hex-gold-main);
  border-radius: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 4px;
  box-shadow: 0 0 16px rgba(200, 170, 110, 0.35), inset 0 0 8px rgba(0, 0, 0, 0.8);
  position: relative;
  flex-shrink: 0;
}

.league-crest-box.lck { border-color: #0ac8b9; box-shadow: 0 0 14px rgba(10, 200, 185, 0.35), inset 0 0 8px rgba(0, 0, 0, 0.8); }
.league-crest-box.lpl { border-color: #ef4444; box-shadow: 0 0 14px rgba(239, 68, 68, 0.35), inset 0 0 8px rgba(0, 0, 0, 0.8); }
.league-crest-box.lec { border-color: #3b82f6; box-shadow: 0 0 14px rgba(59, 130, 246, 0.35), inset 0 0 8px rgba(0, 0, 0, 0.8); }
.league-crest-box.lcs { border-color: #10b981; box-shadow: 0 0 14px rgba(16, 185, 129, 0.35), inset 0 0 8px rgba(0, 0, 0, 0.8); }
.league-crest-box.lcp { border-color: #f59e0b; box-shadow: 0 0 14px rgba(245, 158, 11, 0.35), inset 0 0 8px rgba(0, 0, 0, 0.8); }
.league-crest-box.other { border-color: var(--hex-gold-main); box-shadow: 0 0 14px var(--hex-gold-glow), inset 0 0 8px rgba(0, 0, 0, 0.8); }

.league-crest-img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  filter: drop-shadow(0 2px 5px rgba(0, 0, 0, 0.7));
}

.league-badge {
  font-family: var(--font-heading);
  font-size: 16px;
  font-weight: 800;
  letter-spacing: 2px;
  color: #010a13;
  background: var(--hex-gold-main);
  padding: 5px 12px;
  border-radius: 2px;
  border: 1px solid var(--hex-gold-bright);
  box-shadow: 0 0 10px var(--hex-gold-glow);
  flex-shrink: 0;
}

.league-badge.lck { background: #0ac8b9; border-color: #72f3e8; color: #010a13; box-shadow: 0 0 12px rgba(10, 200, 185, 0.4); }
.league-badge.lpl { background: #ef4444; color: #fff; border-color: #fca5a5; box-shadow: 0 0 12px rgba(239, 68, 68, 0.4); }
.league-badge.lec { background: #3b82f6; color: #fff; border-color: #93c5fd; box-shadow: 0 0 12px rgba(59, 130, 246, 0.4); }
.league-badge.lcs { background: #10b981; color: #fff; border-color: #6ee7b7; box-shadow: 0 0 12px rgba(16, 185, 129, 0.4); }
.league-badge.lcp { background: #f59e0b; color: #010a13; border-color: #fde68a; box-shadow: 0 0 12px rgba(245, 158, 11, 0.4); }
.league-badge.other { background: var(--hex-gold-main); border-color: var(--hex-gold-bright); color: #010a13; box-shadow: 0 0 12px var(--hex-gold-glow); }

.league-meta-text {
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.league-full-name {
  font-family: var(--font-smooth);
  font-size: 19px;
  font-weight: 800;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  background: linear-gradient(180deg, #ffffff 40%, #c8aa6e 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  line-height: 1.25;
}

.league-region-tag {
  font-family: var(--font-smooth);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 1.5px;
  color: #93a3b8;
  text-transform: uppercase;
}

.league-stats-badges {
  display: flex;
  align-items: center;
  gap: 12px;
}

.league-stat-pill {
  background: linear-gradient(180deg, rgba(16, 28, 48, 0.75) 0%, rgba(5, 12, 22, 0.85) 100%);
  border: 1px solid rgba(200, 170, 110, 0.35);
  padding: 7px 16px;
  border-radius: 6px;
  font-family: var(--font-smooth);
  display: inline-flex;
  align-items: center;
  gap: 10px;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.08), 0 0 10px rgba(200, 170, 110, 0.08);
  transition: all 0.2s ease;
}

.league-stat-pill:hover {
  border-color: rgba(200, 170, 110, 0.65);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.6), 0 0 14px rgba(200, 170, 110, 0.2);
  transform: translateY(-1px);
}

.league-stat-icon {
  width: 14px;
  height: 14px;
  color: var(--hex-gold-main);
  flex-shrink: 0;
  filter: drop-shadow(0 0 4px rgba(200, 170, 110, 0.4));
}

.league-stat-pill span {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  color: #94a3b8;
}

.league-stat-pill strong {
  font-size: 15px;
  font-weight: 800;
  color: #ffffff;
  letter-spacing: 0.5px;
}

.league-header-controls {
  display: flex;
  align-items: center;
  gap: 14px;
}

.league-collapse-btn {
  background: linear-gradient(180deg, rgba(24, 38, 58, 0.85) 0%, rgba(9, 18, 30, 0.95) 100%);
  border: 1px solid var(--hex-gold-dark);
  color: var(--hex-gold-main);
  padding: 7px 16px;
  border-radius: 4px;
  font-family: var(--font-smooth);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 1.5px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.4);
  transition: all 0.2s ease;
  flex-shrink: 0;
}

.league-collapse-btn:hover {
  border-color: var(--hex-gold-main);
  color: var(--hex-gold-bright);
  box-shadow: 0 0 12px rgba(200, 170, 110, 0.3);
  transform: translateY(-1px);
}

.collapse-chevron {
  font-size: 10px;
  display: inline-block;
  transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1);
}

.league-group-section.is-collapsed .collapse-chevron {
  transform: rotate(180deg);
}

/* Collapsible Window Body */
.league-window-body {
  display: grid;
  grid-template-rows: 1fr;
  transition: grid-template-rows 0.35s cubic-bezier(0.4, 0, 0.2, 1);
}

.league-group-section.is-collapsed .league-window-body {
  grid-template-rows: 0fr;
}

.league-window-content {
  min-height: 0;
  overflow: hidden;
  padding: 24px;
  display: flex;
  flex-direction: column;
  gap: 24px;
  background: rgba(1, 6, 12, 0.5);
  transition: padding 0.35s cubic-bezier(0.4, 0, 0.2, 1);
}

.league-group-section.is-collapsed .league-window-content {
  padding-top: 0;
  padding-bottom: 0;
}

.league-teams-list {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.team-section {
  background: linear-gradient(180deg, var(--hex-bg-card) 0%, var(--hex-bg-card-alt) 100%);
  border: 1px solid var(--hex-gold-dark);
  border-radius: 4px;
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.7);
  overflow: hidden;
  position: relative;
}

/* Golden Corner Accents */
.team-section::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 10px;
  height: 10px;
  border-top: 2px solid var(--hex-gold-main);
  border-left: 2px solid var(--hex-gold-main);
  pointer-events: none;
}

.team-section::after {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  width: 10px;
  height: 10px;
  border-top: 2px solid var(--hex-gold-main);
  border-right: 2px solid var(--hex-gold-main);
  pointer-events: none;
}

.team-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 18px 24px;
  border-bottom: 1px solid rgba(120, 90, 40, 0.4);
  background: linear-gradient(90deg, rgba(9, 20, 40, 0.8) 0%, rgba(1, 10, 19, 0.6) 100%);
  gap: 16px;
  flex-wrap: wrap;
}

.team-info {
  display: flex;
  align-items: center;
  gap: 18px;
}

.team-crest-box {
  width: 72px;
  height: 72px;
  border: 1.5px solid var(--hex-gold-main);
  background: #010a13;
  border-radius: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 0 16px rgba(200, 170, 110, 0.3), inset 0 0 10px rgba(0, 0, 0, 0.85);
  padding: 3px;
}

.team-crest-img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  filter: drop-shadow(0 2px 5px rgba(0,0,0,0.7));
}

.team-names {
  display: flex;
  align-items: center;
  gap: 12px;
}

.team-title {
  font-family: var(--font-serif);
  font-size: 24px;
  font-weight: 800;
  letter-spacing: 1px;
  background: linear-gradient(180deg, #ffffff 30%, #c8aa6e 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.team-short-tag {
  font-family: var(--font-heading);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 1.5px;
  color: var(--hex-gold-main);
  background: #010a13;
  padding: 2px 8px;
  border-radius: 2px;
  border: 1px solid var(--hex-gold-dark);
}

.team-meta-badges {
  display: flex;
  align-items: center;
  gap: 12px;
}

.team-badge {
  background: #010a13;
  border: 1px solid var(--hex-gold-dark);
  padding: 6px 14px;
  border-radius: 2px;
  font-family: var(--font-heading);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  color: var(--text-muted);
  display: flex;
  align-items: center;
  gap: 6px;
}

.team-badge strong {
  color: #ffffff;
  font-size: 14px;
}

.team-badge.top-ovr strong {
  color: var(--hex-gold-bright);
  text-shadow: 0 0 8px var(--hex-gold-glow);
}

/* Team Cards Grid */
.team-cards-grid {
  padding: 24px;
  display: flex;
  flex-wrap: wrap;
  gap: 24px;
}

/* Grid View Mode */
.all-cards-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 24px;
}

/* ==========================================================================
   Card Item Presentation
   ========================================================================== */
.card-item {
  position: relative;
  cursor: pointer;
  transition: transform 0.25s cubic-bezier(0.2, 0, 0, 1), box-shadow 0.25s ease;
  user-select: none;
  border-radius: 12px;
  max-width: 250px;
  content-visibility: auto;
  contain-intrinsic-size: 220px 310px;
}

.card-item:hover {
  transform: translateY(-8px) scale(1.02);
  z-index: 10;
}

.card-img-wrapper {
  position: relative;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.7);
  aspect-ratio: 500 / 700;
  background: #091428;
}

.card-img-wrapper img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  border-radius: 12px;
}

.card-quick-overlay {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 10px 14px;
  background: linear-gradient(180deg, transparent 0%, rgba(1, 10, 19, 0.95) 100%);
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  opacity: 0;
  transition: opacity 0.2s ease;
}

.card-item:hover .card-quick-overlay {
  opacity: 1;
}

.card-player-quick .p-name {
  display: block;
  font-family: var(--font-heading);
  font-size: 14px;
  font-weight: 800;
  color: #fff;
}

.card-player-quick .p-role {
  display: block;
  font-size: 11px;
  color: var(--hex-gold-main);
  font-weight: 600;
}

.card-ovr-pill {
  font-family: var(--font-heading);
  font-size: 16px;
  font-weight: 900;
  color: var(--hex-gold-bright);
}

/* Substitute Pill on Card */
.card-sub-pill {
  position: absolute;
  top: 10px;
  right: 10px;
  background: rgba(1, 10, 19, 0.88);
  border: 1px solid var(--hex-gold-main);
  color: var(--hex-gold-bright);
  font-family: var(--font-heading);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 1.5px;
  padding: 3px 8px;
  border-radius: 4px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.8), 0 0 10px var(--hex-gold-glow);
  z-index: 5;
  text-transform: uppercase;
  pointer-events: none;
}

.modal-sub-badge {
  display: inline-block;
  background: rgba(200, 170, 110, 0.18);
  border: 1px solid var(--hex-gold-main);
  color: var(--hex-gold-bright);
  font-family: var(--font-heading);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 1.5px;
  padding: 2px 8px;
  border-radius: 3px;
  margin-left: 8px;
  text-transform: uppercase;
  vertical-align: middle;
}

/* Card Glows by Tier */
.card-item.tier-legend:hover .card-img-wrapper {
  box-shadow: 0 16px 36px var(--tier-legend-glow);
}

.card-item.tier-elite:hover .card-img-wrapper {
  box-shadow: 0 16px 36px var(--tier-elite-glow);
}

.card-item.tier-star:hover .card-img-wrapper {
  box-shadow: 0 16px 36px var(--tier-star-glow);
}

.card-item.tier-rising:hover .card-img-wrapper {
  box-shadow: 0 16px 36px var(--tier-rising-glow);
}

.card-item.tier-prospect:hover .card-img-wrapper {
  box-shadow: 0 16px 36px var(--tier-prospect-glow);
}

/* Card Ownership States in Deck View */
.card-item.is-unowned {
  filter: grayscale(100%) brightness(0.62) contrast(0.85);
  opacity: 0.65;
  transition: filter 0.25s ease, opacity 0.25s ease, transform 0.2s ease, box-shadow 0.2s ease;
}

.card-item.is-unowned:hover {
  filter: grayscale(60%) brightness(0.78) contrast(0.92);
  opacity: 0.88;
  transform: translateY(-4px);
}

.card-item.is-unowned .card-img-wrapper {
  border-color: rgba(255, 255, 255, 0.15) !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.5) !important;
}

.card-item.is-unowned:hover .card-img-wrapper {
  border-color: rgba(255, 255, 255, 0.3) !important;
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.7) !important;
}

.card-item.is-unowned .card-quick-overlay {
  background: linear-gradient(180deg, transparent 0%, rgba(1, 10, 19, 0.96) 100%);
}

.card-unowned-badge {
  position: absolute;
  top: 10px;
  right: 10px;
  background: rgba(1, 10, 19, 0.9);
  border: 1px solid rgba(160, 155, 140, 0.3);
  color: #8a8578;
  font-family: var(--font-heading, 'Cinzel', serif);
  font-weight: 800;
  font-size: 10px;
  padding: 3px 7px;
  border-radius: 2px;
  z-index: 5;
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  letter-spacing: 1px;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.6);
}

.card-unowned-badge .unowned-lock-svg {
  color: #8a8578;
  flex-shrink: 0;
}

.card-item.is-owned {
  position: relative;
}

.card-item.is-owned .card-img-wrapper {
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.6), 0 0 14px rgba(200, 170, 110, 0.2);
}

/* Card Thumbnail Edition & Quantity Badges - Hextech Design */
.card-edition-pill {
  position: absolute;
  top: 10px;
  right: 10px;
  display: inline-flex;
  align-items: center;
  gap: 3px;
  background: rgba(1, 10, 19, 0.92);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  border: 1px solid rgba(200, 170, 110, 0.45);
  color: #f0e6d2;
  font-family: var(--font-heading, 'Cinzel', serif);
  font-weight: 800;
  font-size: 11px;
  line-height: 1;
  padding: 3px 8px;
  border-radius: 2px;
  z-index: 5;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.7), inset 0 0 0 1px rgba(240, 230, 210, 0.08);
  letter-spacing: 0.8px;
  transition: transform 0.2s ease, border-color 0.2s ease;
}

.card-edition-pill .pill-hash {
  color: var(--hex-gold-bright, #c8aa6e);
  font-size: 10px;
  opacity: 0.85;
}

.card-edition-pill.is-first-edition {
  background: linear-gradient(135deg, rgba(24, 18, 8, 0.96) 0%, rgba(46, 34, 14, 0.96) 100%);
  border: 1px solid var(--hex-gold-bright, #c8aa6e);
  color: #f0e6d2;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.8), inset 0 0 6px rgba(200, 170, 110, 0.25);
}

.card-edition-pill .first-edition-crown-svg {
  color: var(--hex-gold-bright, #c8aa6e);
  filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.8));
  flex-shrink: 0;
}

.card-copies-pill {
  position: absolute;
  top: 10px;
  left: 10px;
  display: inline-flex;
  align-items: center;
  gap: 2px;
  background: rgba(1, 10, 19, 0.92);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  border: 1px solid rgba(200, 170, 110, 0.45);
  color: #f0e6d2;
  font-family: var(--font-heading, 'Cinzel', serif);
  font-weight: 800;
  font-size: 11px;
  line-height: 1;
  padding: 3px 7px;
  border-radius: 2px;
  z-index: 5;
  letter-spacing: 0.8px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.7), inset 0 0 0 1px rgba(240, 230, 210, 0.08);
}

.card-copies-pill .pill-copies-icon {
  font-size: 10px;
  color: var(--hex-gold-bright, #c8aa6e);
  opacity: 0.9;
}

.card-lvl-pill {
  position: absolute;
  top: 10px;
  left: 10px;
  background: rgba(1, 10, 19, 0.92);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  border: 1px solid rgba(200, 170, 110, 0.35);
  color: var(--hex-gold-bright, #f0e6d2);
  font-family: var(--font-heading, 'Cinzel', serif);
  font-weight: 800;
  font-size: 10px;
  padding: 3px 6px;
  border-radius: 2px;
  z-index: 5;
  letter-spacing: 0.8px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.7);
  transition: top 0.2s ease;
}

.card-lvl-pill.has-copies-offset {
  top: 36px;
}

/* Empty State */
.empty-state {
  text-align: center;
  padding: 80px 20px;
}

.empty-icon {
  font-size: 48px;
  color: var(--hex-gold-dark);
  margin-bottom: 16px;
}

.empty-state h3 {
  font-family: var(--font-serif);
  font-size: 22px;
  color: var(--hex-gold-bright);
  margin-bottom: 8px;
}

.empty-state p {
  color: var(--text-dim);
  font-size: 14px;
  margin-bottom: 24px;
}

/* ==========================================================================
   Modal - 3D Card Inspection Window
   ========================================================================== */
.modal-backdrop {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(1, 10, 19, 0.88);
  backdrop-filter: blur(12px);
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  animation: modalFadeIn 0.2s ease-out;
}

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

.modal-window {
  position: relative;
  background: linear-gradient(180deg, #0d1826 0%, #060b12 100%);
  border: 2px solid var(--hex-gold-main);
  border-radius: 4px;
  box-shadow: 0 24px 70px rgba(0, 0, 0, 0.95), 0 0 35px var(--hex-gold-glow);
  max-width: 1180px;
  width: 100%;
  max-height: 94vh;
  overflow-y: auto;
  overflow-x: hidden;
  padding: 28px 36px;
}

.modal-close-btn {
  position: absolute;
  top: 14px;
  right: 18px;
  background: none;
  border: none;
  color: var(--hex-gold-main);
  font-size: 28px;
  line-height: 1;
  cursor: pointer;
  transition: color 0.2s ease;
  z-index: 10;
}

.modal-close-btn:hover {
  color: #ffffff;
}

.modal-body {
  display: grid;
  grid-template-columns: 410px 1fr;
  gap: 36px;
  align-items: center;
}

/* 3D Tilt Card */
.modal-card-col {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  max-width: 410px;
}

.card-3d-wrapper {
  position: relative;
  width: 100%;
  border-radius: 14px;
  box-shadow: 0 16px 40px rgba(0,0,0,0.8);
  perspective: 1000px;
  transform-style: preserve-3d;
  transition: transform 0.1s ease-out;
}

.modal-card-img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: 14px;
  pointer-events: none;
}

.card-sheen {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  border-radius: 14px;
  pointer-events: none;
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.25) 0%, transparent 60%);
  opacity: 0;
  transition: opacity 0.2s ease;
}

.card-hint {
  font-size: 11px;
  color: var(--text-dim);
  margin-top: 10px;
  text-align: center;
}

/* Modal Info Column */
.modal-info-col {
  display: flex;
  flex-direction: column;
  gap: 13px;
  min-width: 0;
}

.modal-top-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
}

.modal-top-tags {
  display: flex;
  align-items: center;
  gap: 10px;
}

/* Modal Ownership Badges Group - Hextech Unified Aesthetic */
.modal-ownership-group,
.modal-ownership-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.modal-status-pill,
.modal-edition-pill,
.modal-copies-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 24px;
  padding: 0 10px;
  border-radius: 2px;
  font-family: var(--font-heading, 'Cinzel', serif);
  font-weight: 800;
  font-size: 11px;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  box-sizing: border-box;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.4);
}

.modal-status-pill.is-owned {
  background: rgba(1, 10, 19, 0.88);
  border: 1px solid rgba(200, 170, 110, 0.45);
  color: #f0e6d2;
  box-shadow: inset 0 0 6px rgba(200, 170, 110, 0.12), 0 2px 6px rgba(0, 0, 0, 0.4);
}

.modal-status-pill.is-owned .pill-status-icon {
  color: var(--hex-gold-main, #c8aa6e);
  flex-shrink: 0;
}

.modal-status-pill.is-unowned {
  background: rgba(1, 10, 19, 0.8);
  border: 1px solid rgba(160, 155, 140, 0.3);
  color: #8a8578;
}

.modal-status-pill.is-unowned .pill-status-icon {
  color: #8a8578;
  flex-shrink: 0;
}

.modal-edition-pill {
  background: rgba(1, 10, 19, 0.85);
  border: 1px solid rgba(200, 170, 110, 0.35);
  color: var(--hex-gold-bright, #c8aa6e);
}

.modal-edition-pill .pill-hash {
  color: var(--hex-gold-bright, #c8aa6e);
  opacity: 0.85;
}

.modal-edition-pill.is-first-edition {
  background: linear-gradient(135deg, rgba(26, 20, 8, 0.95) 0%, rgba(48, 36, 15, 0.95) 100%);
  border: 1px solid var(--hex-gold-bright, #c8aa6e);
  color: #f0e6d2;
  box-shadow: inset 0 0 8px rgba(200, 170, 110, 0.25), 0 2px 8px rgba(0, 0, 0, 0.6);
}

.modal-edition-pill .edition-crown-svg {
  color: var(--hex-gold-bright, #c8aa6e);
  flex-shrink: 0;
  filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.7));
}

.modal-copies-pill {
  background: rgba(1, 10, 19, 0.85);
  border: 1px solid rgba(200, 170, 110, 0.35);
  color: #f0e6d2;
}

.modal-copies-pill .copies-stack-svg {
  color: var(--hex-gold-bright, #c8aa6e);
  flex-shrink: 0;
}

.modal-copies-pill .copies-text-wrap {
  display: inline-flex;
  align-items: baseline;
  gap: 4px;
}

.modal-copies-pill .copies-count-bold {
  font-weight: 800;
  color: #f0e6d2;
}

.modal-copies-pill .copies-unit-txt {
  font-size: 10.5px;
  opacity: 0.85;
}

.modal-tier-tag {
  font-family: var(--font-heading);
  font-size: 12px;
  font-weight: 900;
  letter-spacing: 2px;
  color: #010a13;
  background: var(--hex-gold-bright);
  padding: 3px 12px;
  border-radius: 2px;
}

.modal-season-tag {
  font-family: var(--font-heading);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 1.5px;
  color: var(--hex-gold-main);
}

.modal-player-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  min-width: 0;
}

.player-title-row {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.modal-player-name {
  font-family: var(--font-serif);
  font-size: 34px;
  font-weight: 900;
  color: #fff;
  line-height: 1.1;
  word-break: break-word;
}

.modal-real-name {
  font-family: var(--font-heading);
  font-size: 13px;
  color: var(--text-muted);
  letter-spacing: 2px;
}

.modal-ovr-box {
  display: flex;
  flex-direction: column;
  align-items: center;
  background: #010a13;
  border: 1px solid var(--hex-gold-main);
  padding: 6px 16px;
  border-radius: 4px;
  box-shadow: 0 0 14px var(--hex-gold-glow);
  flex-shrink: 0;
}

.modal-ovr-lbl {
  font-family: var(--font-heading);
  font-size: 10px;
  font-weight: 800;
  color: var(--hex-gold-main);
  letter-spacing: 1px;
}

.modal-ovr-val {
  font-family: var(--font-heading);
  font-size: 28px;
  font-weight: 900;
  color: #fff;
  line-height: 1;
}

.modal-team-role-row {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}

.modal-team-badge {
  display: flex;
  align-items: center;
  gap: 8px;
  background: #010a13;
  border: 1px solid var(--hex-gold-dark);
  padding: 4px 12px;
  border-radius: 2px;
  font-weight: 700;
}

.modal-team-logo {
  width: 20px;
  height: 20px;
  object-fit: contain;
}

.modal-role-badge {
  background: #010a13;
  border: 1px solid var(--hex-blue-cyan);
  color: var(--hex-blue-cyan);
  padding: 4px 10px;
  border-radius: 2px;
  font-family: var(--font-heading);
  font-weight: 800;
  font-size: 12px;
  letter-spacing: 1px;
}

.modal-sub-badge {
  display: inline-block;
  font-size: 10px;
  padding: 1px 5px;
  background: rgba(200, 170, 110, 0.2);
  color: var(--hex-gold-bright);
  border: 1px solid var(--hex-gold-main);
  border-radius: 2px;
  margin-left: 6px;
  letter-spacing: 1px;
}

.modal-quote {
  font-style: italic;
  font-size: 13px;
  color: var(--text-muted);
}

/* Quick Stats Row */
.modal-quick-stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
  min-width: 0;
}

.quick-stat-item {
  background: #010a13;
  border: 1px solid rgba(120, 90, 40, 0.4);
  padding: 8px 10px;
  border-radius: 2px;
  text-align: center;
  min-width: 0;
}

.qs-lbl {
  display: block;
  font-family: var(--font-heading);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 1px;
  color: var(--hex-gold-main);
  margin-bottom: 2px;
}

.qs-val {
  font-family: var(--font-heading);
  font-size: 17px;
  font-weight: 900;
  color: #fff;
}

/* Attributes Grid */
.modal-section-title {
  font-family: var(--font-heading);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 2px;
  color: var(--hex-gold-main);
  border-bottom: 1px solid rgba(120, 90, 40, 0.3);
  padding-bottom: 4px;
}

.modal-attributes-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px 18px;
  min-width: 0;
}

.attribute-row {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}

.attr-meta {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 12px;
  font-weight: 600;
}

.attr-name {
  font-family: var(--font-body);
  color: var(--text-normal);
}

.attr-val {
  font-family: var(--font-heading);
  font-weight: 800;
  font-size: 13px;
}

.attr-bar-track {
  height: 6px;
  background: #010a13;
  border-radius: 2px;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.08);
}

.attr-bar-fill {
  height: 100%;
  border-radius: 2px;
}

/* Champions */
.modal-champions-row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  min-width: 0;
}

.champ-card {
  background: #010a13;
  border: 1px solid var(--hex-gold-dark);
  padding: 8px 12px;
  border-radius: 2px;
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.champ-card:hover {
  border-color: var(--hex-gold-main);
  box-shadow: 0 0 10px rgba(200, 170, 110, 0.2);
}

.champ-img {
  width: 44px;
  height: 44px;
  border-radius: 4px;
  border: 1px solid var(--hex-gold-main);
  object-fit: cover;
  flex-shrink: 0;
}

.champ-info {
  display: flex;
  flex-direction: column;
  min-width: 0;
  overflow: hidden;
}

.champ-name {
  font-weight: 700;
  font-size: 13px;
  color: #fff;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.champ-stat {
  font-size: 11px;
  color: var(--text-dim);
  white-space: nowrap;
}

/* Footer Box */
.modal-footer-box {
  margin-top: 4px;
  padding-top: 10px;
  border-top: 1px solid rgba(120, 90, 40, 0.4);
}

.modal-special-title {
  font-family: var(--font-heading);
  font-size: 14px;
  font-weight: 800;
  color: var(--hex-gold-bright);
}

.modal-footer-stats {
  font-size: 11px;
  color: var(--text-dim);
  margin-top: 2px;
}

/* ==========================================================================
   Footer
   ========================================================================== */
.site-footer {
  border-top: 2px solid var(--hex-gold-dark);
  background: #010a13;
  padding: 32px 0;
  text-align: center;
  color: var(--text-dim);
  font-size: 13px;
}

.footer-container {
  max-width: 1680px;
  margin: 0 auto;
  padding: 0 32px;
}

.disclaimer {
  font-size: 11px;
  margin-top: 8px;
  opacity: 0.6;
}

/* ==========================================================================
   Responsive Adaptations (Mobile & Tablet Support)
   ========================================================================== */

@media (max-width: 1200px) {
  .header-container {
    padding: 0 20px;
    gap: 16px;
  }

  .header-search {
    flex: 0 1 200px;
  }

  .client-nav .nav-tab {
    padding: 0 12px;
  }

  .nav-tab-label {
    font-size: 11px;
  }

  .brand-title {
    font-size: 14px;
  }

  .deck-filters-row {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 980px) {
  .modal-body {
    grid-template-columns: 1fr;
    gap: 24px;
  }
  .modal-card-col {
    max-width: 280px;
    margin: 0 auto;
  }
  .all-cards-grid {
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 18px;
  }
}

@media (max-width: 768px) {
  /* Header adjustments */
  .site-header {
    height: 56px;
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    overflow: visible;
    position: sticky;
    top: 0;
    z-index: 500;
  }

  .header-container {
    height: 56px;
    padding: 0 12px;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    position: relative;
    z-index: 501;
    overflow: visible;
  }

  /* Inactive and single collection tabs hidden on mobile to give room to search & language */
  .client-nav {
    display: none !important;
  }

  .brand {
    gap: 8px;
    min-width: 0;
    flex-shrink: 1;
    display: flex;
    align-items: center;
  }

  .brand-emblem {
    width: 32px;
    height: 32px;
    font-size: 13px;
    flex-shrink: 0;
    padding: 4px;
  }

  .brand-sub {
    display: none;
  }

  .brand-title {
    font-size: 13px;
    letter-spacing: 1px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .header-actions {
    display: flex;
    align-items: center;
    gap: 8px;
    flex: 1 1 auto;
    justify-content: flex-end;
    min-width: 0;
  }

  .header-search {
    flex: 1 1 140px;
    max-width: 180px;
    min-width: 65px;
  }

  .search-wrapper input {
    height: 32px;
    font-size: 11px;
    padding: 0 20px 0 26px;
    width: 100%;
    box-sizing: border-box;
  }

  .search-svg {
    left: 7px;
    width: 12px;
    height: 12px;
  }

  .lang-toggle-btn {
    height: 32px;
    padding: 0 7px;
    font-size: 11px;
    gap: 4px;
    letter-spacing: 0.5px;
    flex-shrink: 0;
  }

  .lang-flag-img {
    width: 20px;
    height: 13px;
  }

  .lang-code {
    display: none;
  }

  .lang-arrow {
    font-size: 8px;
  }

  .lang-selector-dropdown {
    position: relative;
    z-index: 502;
  }

  .lang-dropdown-menu {
    position: absolute;
    min-width: 136px;
    top: calc(100% + 6px);
    right: 0;
    z-index: 1000;
  }

  .lang-option {
    padding: 7px 10px;
    font-size: 12px;
  }

  /* Sticky Controls Deck */
  .collection-controls-deck {
    top: 56px;
    padding: 10px 0 6px 0;
  }

  .collection-controls-deck.is-filters-collapsed {
    padding: 4px 0;
  }

  .deck-container {
    padding: 0 12px;
    gap: 8px;
  }

  .deck-subnav-row {
    flex-direction: column;
    align-items: stretch;
    gap: 8px;
  }

  .season-tabs {
    display: flex;
    width: 100%;
    gap: 6px;
  }

  .season-tab {
    flex: 1;
    height: 34px;
    padding: 0 8px;
    font-size: 10px;
    letter-spacing: 1px;
    justify-content: center;
    gap: 6px;
  }

  .season-counter {
    font-size: 9px;
    padding: 2px 4px;
  }

  .season-gem {
    font-size: 9px;
  }

  .deck-tools-group {
    width: 100%;
    display: flex;
    justify-content: center;
  }

  .view-mode-frame {
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 8px;
  }

  .tool-label {
    font-size: 10px;
    letter-spacing: 1px;
  }

  .view-btn-group {
    flex: 1;
    max-width: 220px;
  }

  .mode-btn.hextech-btn {
    height: 28px;
    font-size: 10px;
    padding: 0 8px;
    letter-spacing: 1px;
    flex: 1;
    justify-content: center;
  }

  /* Filter Cassettes */
  .deck-filters-row {
    gap: 10px;
    padding-top: 10px;
  }

  .filter-cassette {
    padding: 8px 10px;
    gap: 6px;
  }

  .cassette-title {
    font-size: 10px;
    letter-spacing: 1.2px;
  }

  .cassette-buttons {
    gap: 5px;
  }

  .cassette-buttons .hextech-btn {
    height: 28px;
    padding: 0 10px;
    font-size: 10px;
    letter-spacing: 0.8px;
  }

  .hex-gem {
    font-size: 9px;
  }

  .deck-collapse-toggle-btn {
    height: 22px;
    font-size: 9px;
    padding: 0 12px;
  }

  /* Main content */
  .main-content {
    padding: 16px 0 40px;
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
  }

  .content-container {
    padding: 0 10px;
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
  }

  .results-meta {
    margin-bottom: 16px;
    gap: 8px;
    scroll-margin-top: 100px;
    width: 100%;
    box-sizing: border-box;
  }

  .status-content {
    font-size: 11px;
    letter-spacing: 1.5px;
  }

  /* Leagues */
  .teams-view-container {
    gap: 16px;
    width: 100%;
    box-sizing: border-box;
  }

  .league-group-section {
    scroll-margin-top: 100px;
    width: 100%;
    box-sizing: border-box;
    border-radius: 5px;
    border-left-width: 4px;
  }

  .league-banner-header {
    padding: 10px 12px;
    gap: 10px;
    flex-direction: column;
    align-items: stretch;
    width: 100%;
    box-sizing: border-box;
  }

  .league-title-box {
    gap: 10px;
    width: 100%;
    align-items: center;
  }

  .league-crest-box {
    width: 42px;
    height: 42px;
    padding: 3px;
  }

  .league-badge {
    font-size: 13px;
    padding: 3px 8px;
  }

  .league-full-name {
    font-size: 15px;
    line-height: 1.2;
  }

  .league-region-tag {
    font-size: 9.5px;
    letter-spacing: 1.2px;
  }

  .league-header-controls {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    flex-wrap: wrap;
  }

  .league-stats-badges {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
  }

  .league-stat-pill {
    padding: 5px 10px;
    border-radius: 5px;
    gap: 7px;
  }

  .league-stat-icon {
    width: 12px;
    height: 12px;
  }

  .league-stat-pill span {
    font-size: 10px;
    letter-spacing: 1px;
  }

  .league-stat-pill strong {
    font-size: 13px;
  }

  .league-collapse-btn {
    padding: 6px 12px;
    font-size: 11px;
    letter-spacing: 1px;
    gap: 6px;
    margin-left: auto;
  }

  .league-window-content {
    padding: 14px 10px;
    gap: 16px;
  }

  .league-teams-list {
    gap: 16px;
    width: 100%;
    box-sizing: border-box;
  }

  /* Teams & Cards */
  .team-section {
    border-radius: 4px;
    width: 100%;
    box-sizing: border-box;
  }

  .team-header {
    padding: 10px 12px;
    gap: 8px;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    box-sizing: border-box;
    flex-wrap: wrap;
  }

  .team-info {
    gap: 10px;
  }

  .team-crest-box {
    width: 42px;
    height: 42px;
    padding: 4px;
  }

  .team-title {
    font-size: 18px;
  }

  .team-short-tag {
    font-size: 10px;
    padding: 1px 6px;
  }

  .team-meta-badges {
    gap: 6px;
  }

  .team-badge {
    padding: 4px 8px;
    font-size: 10px;
  }

  /* 2-Column Mobile Grid for Cards */
  .team-cards-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
    padding: 10px;
    width: 100%;
    box-sizing: border-box;
  }

  .all-cards-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
    padding: 0;
    width: 100%;
    box-sizing: border-box;
  }

  @media (min-width: 500px) and (max-width: 768px) {
    .team-cards-grid {
      grid-template-columns: repeat(auto-fill, minmax(155px, 1fr));
      gap: 12px;
      padding: 12px;
    }
    .all-cards-grid {
      grid-template-columns: repeat(auto-fill, minmax(155px, 1fr));
      gap: 12px;
    }
  }

  .card-item {
    max-width: 100%;
    width: 100%;
    border-radius: 8px;
  }

  .card-img-wrapper {
    border-radius: 8px;
  }

  .card-img-wrapper img {
    border-radius: 8px;
  }

  .card-sub-pill {
    top: 6px;
    right: 6px;
    font-size: 8px;
    padding: 2px 5px;
  }

  /* Modal on Tablet/Mobile */
  .modal-backdrop {
    padding: 12px;
  }

  .modal-window {
    padding: 24px 16px 20px;
    max-height: 94dvh;
    border-radius: 4px;
  }

  .modal-close-btn {
    top: 8px;
    right: 10px;
    font-size: 26px;
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .modal-body {
    grid-template-columns: 1fr;
    gap: 16px;
  }

  .modal-card-col {
    max-width: 220px;
    margin: 0 auto;
  }

  .card-hint {
    font-size: 10px;
    margin-top: 6px;
  }

  .modal-info-col {
    gap: 14px;
  }

  .modal-player-name {
    font-size: 24px;
  }

  .modal-real-name {
    font-size: 12px;
  }

  .modal-ovr-num {
    font-size: 36px;
  }

  .modal-quick-stats {
    grid-template-columns: repeat(2, 1fr);
    gap: 6px;
  }

  .quick-stat-item {
    padding: 6px 8px;
  }

  .qs-val {
    font-size: 15px;
  }

  .modal-attributes-grid {
    grid-template-columns: 1fr;
    gap: 8px;
  }

  .modal-champions-row {
    grid-template-columns: 1fr;
    gap: 6px;
  }

  .champ-card {
    padding: 6px 10px;
  }

  .champ-img,
  .champ-icon {
    width: 32px;
    height: 32px;
  }

  .modal-special-title {
    font-size: 13px;
  }

  .modal-footer-stats {
    font-size: 11px;
  }
}

/* Small smartphones (< 480px) */
@media (max-width: 480px) {
  .header-container {
    padding: 0 8px;
    gap: 6px;
  }

  .brand {
    gap: 6px;
  }

  .brand-emblem {
    width: 28px;
    height: 28px;
    font-size: 11px;
    padding: 3px;
  }

  .brand-title {
    font-size: 11px;
    letter-spacing: 0.5px;
  }

  .header-actions {
    gap: 6px;
  }

  .header-search {
    flex: 1 1 100px;
    min-width: 60px;
    max-width: 140px;
  }

  .search-wrapper input {
    height: 30px;
    font-size: 10px;
    padding: 0 18px 0 24px;
  }

  .lang-toggle-btn {
    height: 30px;
    padding: 0 5px;
    font-size: 10px;
    gap: 3px;
  }

  .lang-code {
    display: none;
  }

  .lang-flag-img {
    width: 18px;
    height: 12px;
  }

  .lang-arrow {
    font-size: 7px;
  }

  .deck-container {
    padding: 0 6px;
  }

  .content-container {
    padding: 0 6px;
  }

  .team-cards-grid {
    gap: 6px;
    padding: 6px;
  }

  .all-cards-grid {
    gap: 6px;
  }

  .team-title {
    font-size: 15px;
  }

  .team-badge {
    padding: 2px 6px;
    font-size: 9px;
  }

  .team-badge strong {
    font-size: 12px;
  }

  .league-stat-pill {
    padding: 2px 6px;
    font-size: 9px;
  }

  .league-collapse-btn {
    padding: 5px 9px;
    font-size: 10px;
    letter-spacing: 0.8px;
  }

  .league-window-content {
    padding: 10px 6px;
    gap: 12px;
  }
}

/* Touch Device Interaction Optimizations */
@media (hover: none) {
  .card-item:hover {
    transform: none;
    box-shadow: none;
  }

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

  .hextech-btn:hover {
    transform: none;
  }

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

@media (prefers-reduced-motion: reduce) {
  .deck-filters-wrapper {
    transition: none !important;
  }
  .deck-collapse-toggle-btn .toggle-arrow {
    transition: none !important;
  }
  .card-3d-wrapper {
    transition: none !important;
  }
}

/* ==========================================================================
   Discord Auth & User Profile Header Widget
   ========================================================================== */
.user-auth-container {
  position: relative;
  display: flex;
  align-items: center;
}

.discord-login-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: linear-gradient(135deg, #5865f2 0%, #4752c4 100%);
  color: #ffffff;
  border: 1px solid rgba(240, 230, 210, 0.4);
  padding: 6px 14px;
  font-family: 'Rajdhani', sans-serif;
  font-weight: 700;
  font-size: 13px;
  letter-spacing: 1px;
  text-transform: uppercase;
  border-radius: 4px;
  cursor: pointer;
  transition: all 0.25s ease;
  box-shadow: 0 2px 10px rgba(88, 101, 242, 0.35), inset 0 0 8px rgba(255, 255, 255, 0.2);
}

.discord-login-btn:hover {
  background: linear-gradient(135deg, #6775f5 0%, #5865f2 100%);
  border-color: var(--hex-gold-bright, #f0e6d2);
  box-shadow: 0 0 16px rgba(88, 101, 242, 0.6), inset 0 0 12px rgba(255, 255, 255, 0.4);
  transform: translateY(-1px);
}

.discord-svg-icon {
  width: 17px;
  height: 17px;
  flex-shrink: 0;
}

.user-profile-widget {
  position: relative;
}

.user-profile-btn {
  display: flex;
  align-items: center;
  gap: 10px;
  background: linear-gradient(180deg, rgba(16, 30, 48, 0.85) 0%, rgba(9, 20, 40, 0.95) 100%);
  border: 1px solid var(--hex-border, #1e282d);
  padding: 4px 12px 4px 5px;
  border-radius: 20px;
  cursor: pointer;
  transition: all 0.2s ease;
}

.user-profile-btn:hover,
.user-profile-btn.is-open {
  border-color: var(--hex-gold-bright, #c8aa6e);
  box-shadow: 0 0 12px rgba(200, 170, 110, 0.25);
}

.user-avatar-wrap {
  position: relative;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: 1.5px solid var(--hex-gold-bright, #c8aa6e);
  overflow: hidden;
  background: #010a13;
  flex-shrink: 0;
}

.user-avatar-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.user-tier-dot {
  position: absolute;
  bottom: 0;
  right: 0;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  border: 1.5px solid #010a13;
  background: #0ac8b9;
}

.user-btn-info {
  display: flex;
  flex-direction: column;
  text-align: left;
  line-height: 1.15;
}

.user-btn-name {
  font-family: 'Rajdhani', sans-serif;
  font-weight: 700;
  font-size: 13px;
  color: var(--hex-gold-bright, #f0e6d2);
  max-width: 110px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.user-btn-rank {
  font-family: 'Inter', sans-serif;
  font-size: 10px;
  font-weight: 600;
  color: #788594;
  letter-spacing: 0.5px;
  text-transform: uppercase;
}

.user-arrow {
  font-size: 8px;
  color: var(--hex-gold-bright, #c8aa6e);
  transition: transform 0.2s ease;
}

.user-profile-btn.is-open .user-arrow {
  transform: rotate(180deg);
}

/* User Dropdown Menu */
.user-dropdown-menu {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  width: 260px;
  background: #091428;
  border: 1px solid var(--hex-gold-bright, #c8aa6e);
  border-radius: 6px;
  box-shadow: 0 10px 32px rgba(0, 0, 0, 0.85), 0 0 12px rgba(200, 170, 110, 0.2);
  padding: 10px 0;
  z-index: 1000;
  display: none;
  animation: fadeInDown 0.15s ease-out;
}

.user-dropdown-menu.show {
  display: block;
}

.user-menu-header {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 8px 16px 12px;
}

.user-menu-avatar-large {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 2px solid var(--hex-gold-bright, #c8aa6e);
  overflow: hidden;
  flex-shrink: 0;
  background: #010a13;
}

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

.user-menu-meta {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.user-menu-name {
  font-family: 'Rajdhani', sans-serif;
  font-weight: 700;
  font-size: 16px;
  color: #ffffff;
}

.user-menu-coins {
  font-family: 'Inter', sans-serif;
  font-size: 12px;
  color: #38bdf8;
  font-weight: 600;
}

.user-menu-divider {
  height: 1px;
  background: #1e282d;
  margin: 6px 0;
}

.user-menu-section-label {
  padding: 4px 16px;
  font-size: 11px;
  color: #788594;
  font-family: 'Rajdhani', sans-serif;
  font-weight: 700;
  letter-spacing: 0.8px;
  text-transform: uppercase;
}

.demo-accounts-list {
  padding: 4px 8px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.demo-account-btn {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: 6px 10px;
  background: rgba(1, 10, 19, 0.6);
  border: 1px solid #1e282d;
  border-radius: 4px;
  color: #a09b8c;
  font-family: 'Rajdhani', sans-serif;
  font-weight: 600;
  font-size: 13px;
  cursor: pointer;
  transition: all 0.15s ease;
}

.demo-account-btn:hover {
  background: rgba(200, 170, 110, 0.12);
  border-color: var(--hex-gold-bright, #c8aa6e);
  color: #ffffff;
}

.demo-account-btn.is-current {
  border-color: #0ac8b9;
  background: rgba(10, 200, 185, 0.12);
  color: #0ac8b9;
}

.user-menu-item {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 9px 16px;
  background: transparent;
  border: none;
  color: #f0e6d2;
  font-family: 'Rajdhani', sans-serif;
  font-weight: 700;
  font-size: 14px;
  letter-spacing: 0.8px;
  text-transform: uppercase;
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease;
  text-align: left;
}

.user-menu-item:hover {
  background: rgba(200, 170, 110, 0.15);
  color: #ffffff;
}

.user-menu-item.logout-item {
  color: #e74c3c;
}

.user-menu-item.logout-item:hover {
  background: rgba(231, 76, 60, 0.15);
  color: #ff6b6b;
}

.menu-item-icon {
  font-size: 15px;
  width: 20px;
  text-align: center;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

/* ==========================================================================
   Auth Prompt Card (Unauthenticated Deck & Profile)
   ========================================================================== */
.auth-prompt-card {
  max-width: 620px;
  margin: 40px auto;
  padding: 40px 32px;
  background: radial-gradient(circle at 50% 20%, rgba(16, 35, 60, 0.85) 0%, rgba(9, 20, 40, 0.95) 100%);
  border: 1px solid var(--hex-gold-bright, #c8aa6e);
  border-radius: 12px;
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.8), 0 0 20px rgba(200, 170, 110, 0.15);
  text-align: center;
  position: relative;
  overflow: hidden;
}

.auth-prompt-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: linear-gradient(90deg, transparent, #c8aa6e, #f0e6d2, #c8aa6e, transparent);
}

.auth-prompt-icon {
  font-size: 48px;
  color: var(--hex-gold-bright, #c8aa6e);
  margin-bottom: 16px;
  text-shadow: 0 0 20px rgba(200, 170, 110, 0.4);
}

.auth-prompt-title {
  font-family: 'Cinzel', serif;
  font-size: 24px;
  font-weight: 700;
  color: #f0e6d2;
  margin-bottom: 12px;
  letter-spacing: 1.5px;
}

.auth-prompt-desc {
  font-family: 'Inter', sans-serif;
  font-size: 14px;
  color: #a09b8c;
  line-height: 1.6;
  max-width: 480px;
  margin: 0 auto 24px;
}

.auth-prompt-btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: linear-gradient(135deg, #5865f2 0%, #4752c4 100%);
  color: #ffffff;
  border: 1px solid rgba(240, 230, 210, 0.5);
  padding: 12px 28px;
  border-radius: 6px;
  font-family: 'Rajdhani', sans-serif;
  font-weight: 700;
  font-size: 16px;
  letter-spacing: 1.2px;
  cursor: pointer;
  transition: all 0.25s ease;
  box-shadow: 0 4px 20px rgba(88, 101, 242, 0.5);
}

.auth-prompt-btn:hover {
  background: linear-gradient(135deg, #6775f5 0%, #5865f2 100%);
  border-color: #ffffff;
  box-shadow: 0 0 24px rgba(88, 101, 242, 0.8);
  transform: translateY(-2px);
}

.auth-demo-section {
  margin-top: 28px;
  padding-top: 20px;
  border-top: 1px solid #1e282d;
}

.auth-demo-label {
  font-family: 'Rajdhani', sans-serif;
  font-size: 13px;
  font-weight: 700;
  color: #788594;
  letter-spacing: 1px;
  text-transform: uppercase;
  margin-bottom: 12px;
}

.auth-demo-buttons {
  display: flex;
  gap: 10px;
  justify-content: center;
  flex-wrap: wrap;
}

.auth-demo-chip {
  padding: 8px 16px;
  background: rgba(1, 10, 19, 0.7);
  border: 1px solid #1e282d;
  border-radius: 20px;
  color: #f0e6d2;
  font-family: 'Rajdhani', sans-serif;
  font-weight: 700;
  font-size: 14px;
  cursor: pointer;
  transition: all 0.2s ease;
}

.auth-demo-chip:hover {
  border-color: var(--hex-gold-bright, #c8aa6e);
  background: rgba(200, 170, 110, 0.15);
  transform: translateY(-1px);
}

/* ==========================================================================
   Deck View (Active Lineup & Inventory)
   ========================================================================== */
.deck-view-container {
  max-width: 1400px;
  margin: 0 auto;
  padding: 10px 0 60px;
}

.deck-section-box {
  background: rgba(5, 15, 30, 0.75);
  border: 1px solid rgba(200, 170, 110, 0.35);
  border-radius: 12px;
  padding: 24px;
  margin-bottom: 32px;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.6);
  position: relative;
  overflow: hidden;
}

.deck-section-box::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: linear-gradient(90deg, transparent, #c8aa6e, transparent);
}

.deck-section-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 16px;
  margin-bottom: 24px;
  padding-bottom: 16px;
  border-bottom: 1px solid #1e282d;
}

.deck-title-group {
  display: flex;
  align-items: center;
  gap: 12px;
}

.deck-title-gem {
  color: var(--hex-gold-bright, #c8aa6e);
  font-size: 16px;
}

.deck-section-title {
  font-family: 'Cinzel', serif;
  font-size: 20px;
  font-weight: 700;
  color: #f0e6d2;
  letter-spacing: 1.2px;
  margin: 0;
}

.lineup-summary-badges {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}

.lineup-stat-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: rgba(1, 10, 19, 0.85);
  border: 1px solid #1e282d;
  padding: 6px 14px;
  border-radius: 20px;
  font-family: 'Rajdhani', sans-serif;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.8px;
  color: #a09b8c;
}

.lineup-stat-pill strong {
  color: #ffffff;
  font-size: 15px;
}

.lineup-stat-pill.ovr-pill strong {
  color: var(--hex-gold-bright, #f0e6d2);
  text-shadow: 0 0 8px rgba(200, 170, 110, 0.5);
}

.lineup-stat-pill.synergy-pill {
  border-color: #0ac8b9;
  background: rgba(10, 200, 185, 0.1);
  color: #0ac8b9;
}

.lineup-stat-pill.avg-pill strong {
  color: #f59e0b;
}

.lineup-stat-pill .synergy-gain {
  color: #10b981;
  font-size: 13px;
  font-weight: 800;
  margin-left: 3px;
}

.lineup-stat-pill.synergy-count-pill.active {
  border-color: #10b981;
  background: rgba(16, 185, 129, 0.12);
  color: #10b981;
}

.lineup-stat-pill.synergy-count-pill.active strong {
  color: #34d399;
  text-shadow: 0 0 10px rgba(52, 211, 153, 0.5);
}

/* Lineup Synergies Showcase Tray */
.lineup-synergies-tray {
  display: flex;
  align-items: center;
  gap: 14px;
  background: rgba(10, 20, 36, 0.7);
  border: 1px solid rgba(59, 130, 246, 0.25);
  border-radius: 8px;
  padding: 10px 16px;
  margin-bottom: 18px;
  flex-wrap: wrap;
}

.lineup-synergies-tray.empty {
  border-color: rgba(255, 255, 255, 0.08);
  background: rgba(1, 10, 19, 0.4);
  padding: 8px 16px;
}

.tray-label {
  display: flex;
  align-items: center;
  gap: 6px;
  font-family: 'Rajdhani', sans-serif;
  font-weight: 800;
  font-size: 13px;
  letter-spacing: 1px;
  color: #38bdf8;
  text-transform: uppercase;
  flex-shrink: 0;
}

.tray-empty-text {
  font-family: 'Rajdhani', sans-serif;
  font-size: 13px;
  color: #64748b;
  font-style: italic;
}

.tray-badges-list {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.synergy-chip {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 5px 12px;
  border-radius: 7px;
  font-family: 'Rajdhani', sans-serif;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.6px;
  background: rgba(15, 23, 42, 0.9);
  border: 1px solid #334155;
  color: #f1f5f9;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.35);
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
  backdrop-filter: blur(6px);
}

.synergy-chip:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.5);
}

.synergy-chip .chip-icon-box {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  flex-shrink: 0;
}

.synergy-chip .chip-team-img {
  width: 18px;
  height: 18px;
  object-fit: contain;
  filter: drop-shadow(0 0 5px rgba(255, 255, 255, 0.35));
}

.synergy-chip .ui-svg-icon {
  width: 16px;
  height: 16px;
  display: block;
}

.synergy-chip.team-badge {
  border-color: rgba(239, 68, 68, 0.85);
  background: linear-gradient(135deg, rgba(239, 68, 68, 0.2), rgba(30, 10, 15, 0.85));
  color: #fecaca;
  box-shadow: 0 0 12px rgba(239, 68, 68, 0.22);
}

.synergy-chip.legacy-badge {
  border-color: rgba(245, 158, 11, 0.85);
  background: linear-gradient(135deg, rgba(245, 158, 11, 0.2), rgba(35, 20, 5, 0.85));
  color: #fde68a;
  box-shadow: 0 0 12px rgba(245, 158, 11, 0.22);
}

.synergy-chip.season-badge {
  border-color: rgba(6, 182, 212, 0.85);
  background: linear-gradient(135deg, rgba(6, 182, 212, 0.2), rgba(5, 30, 40, 0.85));
  color: #a5f3fc;
  box-shadow: 0 0 12px rgba(6, 182, 212, 0.22);
}

.synergy-chip.league-badge {
  border-color: rgba(59, 130, 246, 0.85);
  background: linear-gradient(135deg, rgba(59, 130, 246, 0.2), rgba(10, 20, 45, 0.85));
  color: #bfdbfe;
  box-shadow: 0 0 12px rgba(59, 130, 246, 0.22);
}

.synergy-chip.duo-badge {
  border-color: rgba(16, 185, 129, 0.85);
  background: linear-gradient(135deg, rgba(16, 185, 129, 0.2), rgba(5, 35, 25, 0.85));
  color: #a7f3d0;
  box-shadow: 0 0 12px rgba(16, 185, 129, 0.22);
}

.synergy-chip .chip-title {
  text-transform: uppercase;
  font-weight: 800;
  letter-spacing: 0.6px;
}

/* Card Chemistry Indicators */
.lineup-card-chem-pill {
  position: absolute;
  top: 8px;
  right: 8px;
  z-index: 5;
  background: rgba(16, 185, 129, 0.95);
  color: #ffffff;
  border: 1px solid rgba(255, 255, 255, 0.5);
  box-shadow: 0 0 10px rgba(16, 185, 129, 0.6);
  padding: 2px 7px;
  border-radius: 10px;
  font-family: 'Rajdhani', sans-serif;
  font-weight: 800;
  font-size: 11px;
  letter-spacing: 0.5px;
}

.lineup-header-left {
  display: flex;
  align-items: center;
  gap: 8px;
}

.lineup-duo-badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-family: 'Rajdhani', sans-serif;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.8px;
  padding: 2px 7px;
  border-radius: 5px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.4);
  transition: all 0.2s ease;
}

.lineup-duo-badge .ui-svg-icon {
  width: 12px;
  height: 12px;
  display: inline-block;
  flex-shrink: 0;
}

.lineup-duo-badge.river-duo {
  background: linear-gradient(135deg, rgba(6, 182, 212, 0.25), rgba(8, 51, 68, 0.7));
  border: 1px solid rgba(6, 182, 212, 0.9);
  color: #a5f3fc;
  box-shadow: 0 0 10px rgba(6, 182, 212, 0.35);
}

.lineup-duo-badge.bot-duo {
  background: linear-gradient(135deg, rgba(245, 158, 11, 0.25), rgba(69, 26, 3, 0.7));
  border: 1px solid rgba(245, 158, 11, 0.9);
  color: #fde68a;
  box-shadow: 0 0 10px rgba(245, 158, 11, 0.35);
}

.lineup-slot-ovr.boosted {
  color: #34d399;
  text-shadow: 0 0 8px rgba(52, 211, 153, 0.5);
}

.lineup-slot-ovr.boosted small {
  color: #fbbf24;
  font-size: 11px;
  margin-left: 2px;
}

/* 5-Slot Lineup Bench */
.lineup-bench-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 18px;
}

.lineup-slot-card {
  display: flex;
  flex-direction: column;
  background: rgba(1, 10, 19, 0.85);
  border: 1px solid #1e282d;
  border-radius: 10px;
  overflow: hidden;
  position: relative;
  transition: all 0.25s ease;
}

.lineup-slot-card:hover {
  border-color: var(--hex-gold-bright, #c8aa6e);
  transform: translateY(-4px);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.6);
}

.lineup-slot-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 12px;
  background: rgba(16, 30, 48, 0.9);
  border-bottom: 1px solid #1e282d;
}

.lineup-role-tag {
  font-family: 'Rajdhani', sans-serif;
  font-weight: 800;
  font-size: 14px;
  letter-spacing: 1px;
  color: var(--hex-gold-bright, #f0e6d2);
}

.lineup-slot-ovr {
  font-family: 'Rajdhani', sans-serif;
  font-weight: 800;
  font-size: 14px;
  color: #0ac8b9;
}

.lineup-card-body {
  padding: 12px;
  display: flex;
  flex-direction: column;
  align-items: center;
  min-height: 240px;
  justify-content: center;
}

.lineup-card-img-wrap {
  width: 100%;
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.6);
  cursor: pointer;
  transition: transform 0.2s ease;
}

.lineup-card-img-wrap:hover {
  transform: scale(1.03);
}

.lineup-card-img-wrap img {
  width: 100%;
  height: auto;
  display: block;
}

.lineup-card-meta {
  width: 100%;
  margin-top: 10px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.lineup-card-player {
  font-family: 'Rajdhani', sans-serif;
  font-weight: 700;
  font-size: 15px;
  color: #ffffff;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.lineup-card-team {
  font-family: 'Inter', sans-serif;
  font-size: 11px;
  color: #a09b8c;
}

.lineup-level-badge {
  background: rgba(200, 170, 110, 0.2);
  border: 1px solid var(--hex-gold-bright, #c8aa6e);
  color: #f0e6d2;
  font-family: 'Rajdhani', sans-serif;
  font-weight: 700;
  font-size: 11px;
  padding: 2px 6px;
  border-radius: 4px;
}

/* Empty Lineup Slot */
.lineup-empty-slot {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 240px;
  padding: 20px;
  text-align: center;
  border: 2px dashed #1e282d;
  border-radius: 8px;
  margin: 12px;
  background: rgba(1, 10, 19, 0.4);
}

.lineup-empty-icon {
  font-size: 32px;
  color: #3b4b59;
  margin-bottom: 8px;
}

.lineup-empty-text {
  font-family: 'Rajdhani', sans-serif;
  font-weight: 700;
  font-size: 13px;
  letter-spacing: 0.8px;
  color: #788594;
  margin-bottom: 4px;
  text-transform: uppercase;
}

.lineup-empty-hint {
  font-family: 'Inter', sans-serif;
  font-size: 11px;
  color: #4e5d6c;
}

/* Inventory Grid (Legacy fallback) */
.inventory-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
  gap: 20px;
}

/* Deck Album Section & Controls */
.deck-album-controls {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 16px;
  margin-bottom: 24px;
  padding: 14px 20px;
  background: rgba(1, 10, 19, 0.7);
  border: 1px solid rgba(200, 170, 110, 0.25);
  border-radius: 8px;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.4);
}

.deck-filter-pills {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  align-items: center;
}

.deck-filter-pill {
  background: rgba(16, 35, 60, 0.6);
  border: 1px solid #1e282d;
  color: #a09b8c;
  padding: 6px 14px;
  border-radius: 20px;
  font-family: 'Rajdhani', sans-serif;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.8px;
  cursor: pointer;
  transition: all 0.2s cubic-bezier(0.2, 0, 0, 1);
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.deck-filter-pill:hover {
  border-color: var(--hex-gold-bright, #c8aa6e);
  color: #f0e6d2;
  transform: translateY(-1px);
}

.deck-filter-pill.active {
  background: rgba(200, 170, 110, 0.2);
  border-color: var(--hex-gold-bright, #c8aa6e);
  color: var(--hex-gold-bright, #f0e6d2);
  box-shadow: 0 0 12px rgba(200, 170, 110, 0.25);
}

.deck-progress-meta {
  font-family: 'Rajdhani', sans-serif;
  font-size: 14px;
  font-weight: 700;
  color: #a09b8c;
  display: flex;
  align-items: center;
  gap: 14px;
}

.deck-progress-meta strong {
  color: #ffffff;
  font-size: 15px;
}

.deck-progress-bar-wrap {
  width: 140px;
  height: 8px;
  background: rgba(0, 0, 0, 0.7);
  border: 1px solid #1e282d;
  border-radius: 4px;
  overflow: hidden;
  position: relative;
}

.deck-progress-bar-fill {
  height: 100%;
  background: linear-gradient(90deg, #c8aa6e, #0ac8b9);
  border-radius: 3px;
  transition: width 0.4s ease;
}

/* Team & League Owned Stats */
.team-badge.owned-progress {
  background: rgba(1, 10, 19, 0.9);
  border-color: rgba(200, 170, 110, 0.35);
}

.team-badge.owned-progress strong.has-owned {
  color: var(--hex-gold-bright, #c8aa6e);
  text-shadow: 0 0 8px rgba(200, 170, 110, 0.4);
}

.team-badge.owned-progress strong.is-complete {
  color: #0ac8b9;
  text-shadow: 0 0 10px rgba(10, 200, 185, 0.6);
}

.team-badge.complete-star {
  background: rgba(10, 200, 185, 0.15);
  border-color: #0ac8b9;
  color: #0ac8b9;
}

.league-stat-pill.is-complete {
  border-color: #0ac8b9;
  background: rgba(10, 200, 185, 0.12);
}

/* ==========================================================================
   Player Profile View
   ========================================================================== */
.profile-view-container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 10px 0 60px;
}

.profile-hero-card {
  background: radial-gradient(circle at 30% 30%, rgba(16, 35, 60, 0.9) 0%, rgba(9, 20, 40, 0.98) 100%);
  border: 1px solid var(--hex-gold-bright, #c8aa6e);
  border-radius: 14px;
  padding: 32px;
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.75), 0 0 24px rgba(200, 170, 110, 0.15);
  margin-bottom: 32px;
  position: relative;
  overflow: hidden;
}

.profile-hero-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: linear-gradient(90deg, transparent, #c8aa6e, #0ac8b9, #c8aa6e, transparent);
}

.profile-hero-inner {
  display: flex;
  align-items: center;
  gap: 28px;
  flex-wrap: wrap;
}

.profile-avatar-frame {
  position: relative;
  width: 96px;
  height: 96px;
  border-radius: 50%;
  border: 3px solid var(--hex-gold-bright, #c8aa6e);
  box-shadow: 0 0 20px rgba(200, 170, 110, 0.4);
  background: #010a13;
  overflow: hidden;
  flex-shrink: 0;
}

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

.profile-main-meta {
  flex: 1;
  min-width: 260px;
}

.profile-username {
  font-family: 'Cinzel', serif;
  font-size: 28px;
  font-weight: 700;
  color: #ffffff;
  margin: 0 0 4px;
  letter-spacing: 1px;
}

.profile-discord-id {
  font-family: 'Rajdhani', sans-serif;
  font-size: 13px;
  color: #788594;
  letter-spacing: 0.8px;
  margin-bottom: 12px;
}

.profile-tags-row {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}

.profile-tag {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 12px;
  border-radius: 16px;
  font-family: 'Rajdhani', sans-serif;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.8px;
}

.profile-tag.tier-tag {
  background: rgba(10, 200, 185, 0.15);
  border: 1px solid #0ac8b9;
  color: #0ac8b9;
}

.profile-tag.coins-tag {
  background: rgba(14, 165, 233, 0.15);
  border: 1px solid rgba(56, 189, 248, 0.5);
  color: #38bdf8;
}

/* Profile LP Progress Bar */
.profile-rank-section {
  margin-top: 24px;
  padding-top: 20px;
  border-top: 1px solid #1e282d;
}

.profile-rank-header {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: 8px;
}

.profile-rank-title {
  font-family: 'Rajdhani', sans-serif;
  font-size: 14px;
  font-weight: 700;
  color: #f0e6d2;
  letter-spacing: 1px;
  text-transform: uppercase;
}

.profile-lp-val {
  font-family: 'Rajdhani', sans-serif;
  font-size: 16px;
  font-weight: 800;
  color: #0ac8b9;
}

.profile-lp-track {
  width: 100%;
  height: 10px;
  background: #010a13;
  border: 1px solid #1e282d;
  border-radius: 5px;
  overflow: hidden;
  position: relative;
}

.profile-lp-fill {
  height: 100%;
  background: linear-gradient(90deg, #005a82 0%, #0ac8b9 100%);
  border-radius: 4px;
  box-shadow: 0 0 10px rgba(10, 200, 185, 0.6);
  transition: width 0.5s ease;
}

/* Profile Stats Grid (Match Stats, Winrate, Collection Progress) */
.profile-stats-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 20px;
  margin-bottom: 32px;
}

.profile-stat-card {
  background: rgba(5, 15, 30, 0.8);
  border: 1px solid #1e282d;
  border-radius: 10px;
  padding: 20px;
  position: relative;
  transition: border-color 0.2s ease;
}

.profile-stat-card:hover {
  border-color: var(--hex-gold-bright, #c8aa6e);
}

.profile-stat-card-title {
  font-family: 'Rajdhani', sans-serif;
  font-size: 13px;
  font-weight: 700;
  color: #788594;
  letter-spacing: 1px;
  text-transform: uppercase;
  margin-bottom: 8px;
}

.profile-stat-big-val {
  font-family: 'Rajdhani', sans-serif;
  font-size: 32px;
  font-weight: 800;
  color: #ffffff;
  line-height: 1.1;
  margin-bottom: 6px;
}

.profile-stat-sub {
  font-family: 'Inter', sans-serif;
  font-size: 12px;
  color: #a09b8c;
}

/* Discord Bot Bot Commands Guide inside Profile */
.discord-commands-box {
  background: rgba(10, 20, 35, 0.7);
  border: 1px solid #1e282d;
  border-radius: 10px;
  padding: 20px 24px;
}

.discord-commands-title {
  font-family: 'Cinzel', serif;
  font-size: 16px;
  font-weight: 700;
  color: #f0e6d2;
  margin-bottom: 14px;
  display: flex;
  align-items: center;
  gap: 8px;
}

.discord-commands-list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 12px;
}

.cmd-card {
  background: rgba(1, 10, 19, 0.8);
  border: 1px solid #1e282d;
  border-radius: 6px;
  padding: 10px 14px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.cmd-name {
  font-family: 'Rajdhani', sans-serif;
  font-weight: 700;
  font-size: 14px;
  color: #0ac8b9;
}

.cmd-desc {
  font-family: 'Inter', sans-serif;
  font-size: 12px;
  color: #788594;
}

/* Responsive Media Queries */
@media (max-width: 900px) {
  .lineup-bench-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

@media (max-width: 600px) {
  .lineup-bench-grid {
    grid-template-columns: 1fr;
  }
  .profile-hero-inner {
    flex-direction: column;
    text-align: center;
  }
  .profile-tags-row {
    justify-content: center;
  }
  .user-btn-name {
    max-width: 70px;
  }
  .discord-btn-label {
    display: none;
  }
  .discord-login-btn {
    padding: 6px 10px;
  }
}

/* ==========================================================================
   Home View - Hero Showcase & Bot Players Leaderboard Table
   ========================================================================== */

.home-view-container {
  display: flex;
  flex-direction: column;
  gap: 40px;
  max-width: 1560px;
  margin: 0 auto;
  padding: 10px 0 60px 0;
  width: 100%;
}

/* --- Hero Banner (Worlds Championship Sovereign 85% Frame) --- */
.home-hero-card {
  position: relative;
  max-width: 1380px;
  margin: 15px auto 0 auto;
  background: radial-gradient(ellipse 70% 360px at 80% 50%, rgba(10, 200, 185, 0.16) 0%, transparent 70%),
              radial-gradient(ellipse 60% 300px at 15% 25%, rgba(200, 170, 110, 0.18) 0%, transparent 65%),
              linear-gradient(135deg, rgba(8, 18, 32, 0.98) 0%, rgba(2, 6, 14, 0.99) 100%);
  border: 2px solid rgba(200, 170, 110, 0.7);
  outline: 1.5px solid rgba(200, 170, 110, 0.35);
  outline-offset: 4px;
  border-radius: 14px;
  padding: 56px 52px 60px 52px;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.9), 0 0 35px rgba(200, 170, 110, 0.22), inset 0 0 45px rgba(10, 200, 185, 0.08);
  overflow: visible;
  display: grid;
  grid-template-columns: 1.15fr 0.85fr;
  align-items: center;
  gap: 44px;
}

.home-hero-card::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0; height: 3px;
  background: linear-gradient(90deg, transparent, #c8aa6e, #0ac8b9, #c8aa6e, transparent);
  box-shadow: 0 0 10px rgba(10, 200, 185, 0.5);
  border-radius: 14px 14px 0 0;
}

/* Worlds Top Championship Winged Crest (Summoner's Cup 3D Art) */
.worlds-art-crest-top {
  position: absolute;
  top: -46px;
  left: 50%;
  transform: translateX(-50%);
  width: 460px;
  max-width: 44%;
  height: auto;
  z-index: 12;
  pointer-events: none;
  filter: drop-shadow(0 8px 24px rgba(0, 0, 0, 0.95)) drop-shadow(0 0 25px rgba(245, 158, 11, 0.5)) drop-shadow(0 0 35px rgba(10, 200, 185, 0.35));
}

/* Worlds Bottom Victorious Winged Chevron (3D Art) */
.worlds-art-crest-bottom {
  position: absolute;
  bottom: -44px;
  left: 50%;
  transform: translateX(-50%);
  width: 420px;
  max-width: 40%;
  height: auto;
  z-index: 12;
  pointer-events: none;
  filter: drop-shadow(0 -8px 24px rgba(0, 0, 0, 0.95)) drop-shadow(0 0 25px rgba(245, 158, 11, 0.5)) drop-shadow(0 0 35px rgba(10, 200, 185, 0.35));
}

/* Worlds 4 Faceted Diamond Corners (3D Art) */
.worlds-art-corner {
  position: absolute;
  width: 118px;
  height: auto;
  pointer-events: none;
  z-index: 11;
  filter: drop-shadow(0 0 16px rgba(0, 0, 0, 0.9)) drop-shadow(0 0 18px rgba(200, 170, 110, 0.45));
}

.worlds-art-corner.top-left {
  top: -26px;
  left: -26px;
}

.worlds-art-corner.top-right {
  top: -26px;
  right: -26px;
  transform: scaleX(-1);
}

.worlds-art-corner.bottom-left {
  bottom: -26px;
  left: -26px;
  transform: scaleY(-1);
}

.worlds-art-corner.bottom-right {
  bottom: -26px;
  right: -26px;
  transform: scale(-1, -1);
}

/* Worlds Side Chevrons Midpoints (3D Art) */
.worlds-art-flange {
  position: absolute;
  top: 50%;
  width: 46px;
  height: auto;
  pointer-events: none;
  z-index: 10;
  filter: drop-shadow(0 0 14px rgba(10, 200, 185, 0.65)) drop-shadow(0 0 10px rgba(245, 158, 11, 0.45));
}

.worlds-art-flange.left {
  left: -20px;
  transform: translateY(-50%);
}

.worlds-art-flange.right {
  right: -20px;
  transform: translateY(-50%) scaleX(-1);
}

/* Glowing Neon Cyan & Gold Energy Trails */
.worlds-energy-trail {
  position: absolute;
  left: 95px;
  right: 95px;
  height: 2px;
  pointer-events: none;
  z-index: 5;
}

.worlds-energy-trail.top {
  top: -1px;
  background: linear-gradient(90deg, transparent, #eab308 14%, #0ac8b9 35%, transparent 48%, transparent 52%, #0ac8b9 65%, #eab308 86%, transparent);
  box-shadow: 0 0 10px rgba(10, 200, 185, 0.85), 0 0 20px rgba(234, 179, 8, 0.6);
}

.worlds-energy-trail.bottom {
  bottom: -1px;
  background: linear-gradient(90deg, transparent, #eab308 14%, #0ac8b9 35%, transparent 48%, transparent 52%, #0ac8b9 65%, #eab308 86%, transparent);
  box-shadow: 0 0 10px rgba(10, 200, 185, 0.85), 0 0 20px rgba(234, 179, 8, 0.6);
}

.hero-left-col {
  display: flex;
  flex-direction: column;
  gap: 18px;
  z-index: 2;
  position: relative;
}

.hero-badge-tag {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  align-self: flex-start;
  padding: 6px 16px;
  border-radius: 20px;
  background: linear-gradient(135deg, rgba(200, 170, 110, 0.22) 0%, rgba(10, 200, 185, 0.1) 100%);
  border: 1.5px solid rgba(200, 170, 110, 0.55);
  box-shadow: 0 0 16px rgba(200, 170, 110, 0.35);
  font-family: var(--font-heading);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 2px;
  color: var(--hex-gold-bright);
  text-transform: uppercase;
}

.hero-badge-tag .badge-gem {
  color: #fbbf24;
  font-size: 11px;
  filter: drop-shadow(0 0 4px rgba(251, 191, 36, 0.8));
}

.hero-title-wrap {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.hero-title {
  font-family: var(--font-serif);
  font-size: 42px;
  line-height: 1.12;
  font-weight: 800;
  color: #ffffff;
  text-shadow: 0 4px 18px rgba(0, 0, 0, 0.9);
}

.hero-title-sub {
  display: block;
  font-size: 38px;
  letter-spacing: 1px;
  color: #f1f5f9;
}

.hero-title-main {
  display: block;
  font-size: 46px;
  letter-spacing: 1.5px;
}

.hero-title .gold-gradient-text {
  background: linear-gradient(135deg, #ffffff 0%, #f0e6d2 25%, #c8aa6e 65%, #f59e0b 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  filter: drop-shadow(0 0 20px rgba(200, 170, 110, 0.35));
}

/* Symmetrical Title Flourish Bar */
.hero-flourish-bar {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 4px;
  max-width: 320px;
}

.hero-bar-wing {
  height: 2px;
  flex: 1;
  box-shadow: 0 0 6px rgba(200, 170, 110, 0.5);
  position: relative;
}

.hero-bar-wing.left {
  background: linear-gradient(90deg, transparent, #c8aa6e, #f0e6d2);
}

.hero-bar-wing.right {
  background: linear-gradient(90deg, #f0e6d2, #c8aa6e, transparent);
}

.hero-bar-diamond {
  color: #fbbf24;
  font-size: 13px;
  filter: drop-shadow(0 0 5px rgba(251, 191, 36, 0.85));
}

.hero-desc {
  font-size: 15px;
  line-height: 1.65;
  color: #cbd5e1;
  max-width: 580px;
  text-shadow: 0 2px 6px rgba(0, 0, 0, 0.5);
}

/* Esports Leagues Showcase Row */
.hero-leagues-showcase {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  margin-top: 2px;
}

.leagues-showcase-label {
  font-family: var(--font-heading);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 1.5px;
  color: var(--hex-gold-main);
  text-transform: uppercase;
}

.league-chips-list {
  display: flex;
  align-items: center;
  gap: 8px;
}

.hero-league-chip {
  font-family: var(--font-heading);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 1px;
  padding: 3px 9px;
  border-radius: 4px;
  border: 1px solid;
  background: rgba(4, 10, 20, 0.85);
  transition: all 0.2s ease;
  cursor: default;
}

.hero-league-chip.chip-lck { color: #38bdf8; border-color: rgba(56, 189, 248, 0.5); box-shadow: 0 0 8px rgba(56, 189, 248, 0.2); }
.hero-league-chip.chip-lpl { color: #f87171; border-color: rgba(248, 113, 113, 0.5); box-shadow: 0 0 8px rgba(248, 113, 113, 0.2); }
.hero-league-chip.chip-lec { color: #34d399; border-color: rgba(52, 211, 153, 0.5); box-shadow: 0 0 8px rgba(52, 211, 153, 0.2); }
.hero-league-chip.chip-lcs { color: #fbbf24; border-color: rgba(251, 191, 36, 0.5); box-shadow: 0 0 8px rgba(251, 191, 36, 0.2); }
.hero-league-chip.chip-lcp { color: #c084fc; border-color: rgba(192, 132, 252, 0.5); box-shadow: 0 0 8px rgba(192, 132, 252, 0.2); }

.hero-league-chip:hover {
  transform: translateY(-1px);
  filter: brightness(1.25);
}

.hero-cta-group {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin-top: 10px;
}

.hero-btn-primary {
  background: linear-gradient(135deg, #f0e6d2 0%, #c8aa6e 50%, #94733c 100%);
  color: #010a13;
  border: 1.5px solid #ffffff;
  font-family: var(--font-heading);
  font-size: 15px;
  font-weight: 800;
  letter-spacing: 1px;
  padding: 13px 24px;
  border-radius: 6px;
  cursor: pointer;
  box-shadow: 0 4px 20px rgba(200, 170, 110, 0.55), inset 0 1px 0 rgba(255, 255, 255, 0.6);
  transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
  display: inline-flex;
  align-items: center;
  gap: 10px;
}

.hero-btn-primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 30px rgba(200, 170, 110, 0.8), 0 0 16px #f0e6d2;
  background: linear-gradient(135deg, #ffffff 0%, #f0e6d2 40%, #c8aa6e 100%);
}

.hero-btn-secondary {
  background: linear-gradient(135deg, rgba(10, 200, 185, 0.18) 0%, rgba(6, 182, 212, 0.08) 100%);
  color: #22d3ee;
  border: 1.5px solid #0ac8b9;
  font-family: var(--font-heading);
  font-size: 15px;
  font-weight: 800;
  letter-spacing: 1px;
  padding: 13px 22px;
  border-radius: 6px;
  cursor: pointer;
  box-shadow: 0 0 16px rgba(10, 200, 185, 0.28);
  transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
  display: inline-flex;
  align-items: center;
  gap: 10px;
}

.hero-btn-secondary:hover {
  background: rgba(10, 200, 185, 0.28);
  border-color: #38bdf8;
  color: #ffffff;
  transform: translateY(-2px);
  box-shadow: 0 0 24px rgba(10, 200, 185, 0.55);
}

.hero-btn-icon {
  flex-shrink: 0;
  transition: transform 0.2s ease;
}

.hero-btn-primary:hover .hero-btn-icon,
.hero-btn-secondary:hover .hero-btn-icon {
  transform: scale(1.15);
}

/* --- Hero Right: 3D Cards Showcase & Pedestal --- */
.hero-cards-showcase {
  position: relative;
  height: 400px;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Hextech Runic Stage Pedestal */
.hero-stage-pedestal {
  position: absolute;
  bottom: 25px;
  width: 320px;
  height: 90px;
  pointer-events: none;
  z-index: 1;
}

.pedestal-glow-core {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: radial-gradient(ellipse at 50% 50%, rgba(10, 200, 185, 0.4) 0%, rgba(200, 170, 110, 0.25) 45%, transparent 75%);
  filter: blur(10px);
}

.pedestal-outer-ring {
  position: absolute;
  inset: 12px;
  border-radius: 50%;
  border: 1.5px solid rgba(200, 170, 110, 0.5);
  box-shadow: 0 0 20px rgba(10, 200, 185, 0.45);
  transform: rotateX(65deg);
}

.hero-spotlight-card {
  position: absolute;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.85);
  cursor: pointer;
  transition: all 0.35s cubic-bezier(0.16, 1, 0.3, 1);
}

.hero-spotlight-card img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.hero-card-center {
  width: 200px;
  height: 310px;
  z-index: 4;
  transform: scale(1.08) translateY(-12px);
  border: 2px solid #fbbf24;
  box-shadow: 0 22px 50px rgba(0, 0, 0, 0.9), 0 0 28px rgba(245, 158, 11, 0.5);
}

.hero-card-left {
  width: 180px;
  height: 280px;
  z-index: 2;
  transform: translateX(-118px) translateY(12px) rotate(-8deg) scale(0.92);
  border: 2px solid #a855f7;
  box-shadow: 0 16px 36px rgba(0, 0, 0, 0.8), 0 0 20px rgba(168, 85, 247, 0.35);
  opacity: 0.92;
}

.hero-card-right {
  width: 180px;
  height: 280px;
  z-index: 2;
  transform: translateX(118px) translateY(12px) rotate(8deg) scale(0.92);
  border: 2px solid #0ea5e9;
  box-shadow: 0 16px 36px rgba(0, 0, 0, 0.8), 0 0 20px rgba(14, 165, 233, 0.35);
  opacity: 0.92;
}

.card-crown-crest {
  position: absolute;
  top: 10px;
  right: 10px;
  background: rgba(4, 10, 20, 0.88);
  border: 1px solid #fbbf24;
  color: #fef08a;
  font-family: var(--font-heading);
  font-size: 11px;
  font-weight: 800;
  padding: 3px 8px;
  border-radius: 12px;
  box-shadow: 0 0 10px rgba(245, 158, 11, 0.7);
  z-index: 3;
}

.card-rank-tag {
  position: absolute;
  top: 8px;
  right: 8px;
  background: rgba(4, 10, 20, 0.85);
  border: 1px solid rgba(255, 255, 255, 0.3);
  color: #cbd5e1;
  font-family: var(--font-heading);
  font-size: 10px;
  font-weight: 800;
  padding: 2px 6px;
  border-radius: 10px;
  z-index: 3;
}

.hero-spotlight-card:hover {
  z-index: 10;
  transform: scale(1.14) translateY(-22px) !important;
  box-shadow: 0 28px 60px rgba(200, 170, 110, 0.65), 0 0 25px rgba(200, 170, 110, 0.4) !important;
  opacity: 1 !important;
}

/* Interactive 3D Hint Badge */
.hero-cards-hint-pill {
  position: absolute;
  bottom: 6px;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 5px 14px;
  border-radius: 20px;
  background: rgba(4, 10, 20, 0.92);
  border: 1px solid rgba(200, 170, 110, 0.4);
  font-family: var(--font-heading);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.8px;
  color: var(--hex-gold-bright);
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.6);
  pointer-events: none;
  z-index: 5;
}

.hint-icon {
  font-size: 12px;
  filter: drop-shadow(0 0 4px rgba(251, 191, 36, 0.8));
}

/* --- Reference Design V4 (Worlds Championship Sovereign 85% Frame Content) --- */
.home-hero-card.reference-hero-card {
  position: relative;
  background: linear-gradient(135deg, rgba(6, 14, 28, 0.96) 0%, rgba(3, 8, 18, 0.98) 100%);
  border: 1.5px solid rgba(200, 170, 110, 0.45);
  border-radius: 14px;
  padding: 50px 44px 40px 64px;
  box-shadow: 0 24px 70px rgba(0, 0, 0, 0.92), 0 0 35px rgba(200, 170, 110, 0.2), inset 0 0 50px rgba(10, 200, 185, 0.06);
  overflow: visible;
  display: grid;
  grid-template-columns: 0.98fr 1.22fr;
  align-items: center;
  gap: 15px;
  min-height: 500px;
}

/* LEFT COLUMN: Deeply indented and fully shielded from crest wings and corners */
.ref-hero-left {
  display: flex;
  flex-direction: column;
  justify-content: center;
  z-index: 10;
  position: relative;
  padding: 12px 0 14px 24px;
  max-width: 460px;
}

.ref-hero-headline {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  font-size: 43px;
  line-height: 1.1;
  font-weight: 900;
  letter-spacing: -1.2px;
  color: #ffffff;
  margin: 0 0 16px 0;
  text-shadow: 0 4px 20px rgba(0, 0, 0, 0.9);
}

.ref-hero-headline .headline-line {
  display: block;
}

.ref-hero-desc {
  font-size: 15px;
  line-height: 1.58;
  font-weight: 400;
  color: #94a3b8;
  max-width: 440px;
  margin: 0 0 24px 0;
  letter-spacing: -0.1px;
}

/* ACTION BUTTONS */
.ref-btn-group {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 26px;
  flex-wrap: wrap;
}

.ref-btn-discord {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 12px 22px;
  border-radius: 9px;
  background: #5865F2;
  color: #ffffff;
  font-family: 'Inter', sans-serif;
  font-size: 14px;
  font-weight: 800;
  letter-spacing: 0.2px;
  border: 1px solid rgba(255, 255, 255, 0.25);
  box-shadow: 0 4px 18px rgba(88, 101, 242, 0.55), inset 0 1px 0 rgba(255, 255, 255, 0.35);
  cursor: pointer;
  transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}
.ref-btn-discord:hover {
  background: #4752c4;
  transform: translateY(-2px);
  box-shadow: 0 8px 26px rgba(88, 101, 242, 0.75), 0 0 12px rgba(88, 101, 242, 0.5);
}
.ref-discord-icon {
  width: 20px;
  height: 20px;
  fill: #ffffff;
}

.ref-btn-browse {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 12px 20px;
  border-radius: 9px;
  background: rgba(15, 23, 42, 0.75);
  backdrop-filter: blur(8px);
  color: #f1f5f9;
  font-family: 'Inter', sans-serif;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.2px;
  border: 1.5px solid rgba(200, 170, 110, 0.45);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.5);
  cursor: pointer;
  transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}
.ref-btn-browse:hover {
  background: rgba(26, 38, 64, 0.9);
  border-color: #f59e0b;
  color: #fbbf24;
  transform: translateY(-2px);
  box-shadow: 0 6px 22px rgba(245, 158, 11, 0.35);
}
.ref-card-icon {
  font-size: 16px;
}

/* COMPACT STATS ROW - TERMINATES OVER 100PX BEFORE BOTTOM CREST */
.ref-stats-row {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
  padding-top: 14px;
  border-top: 1px solid rgba(255, 255, 255, 0.09);
  max-width: 275px;
}
.ref-stat-item {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.ref-stat-num {
  font-family: 'Inter', -apple-system, sans-serif;
  font-size: 20px;
  font-weight: 900;
  line-height: 1.1;
  letter-spacing: -0.5px;
  color: #ffffff;
}
.ref-stat-num.highlight-gold {
  color: #fbbf24;
  text-shadow: 0 0 16px rgba(251, 191, 36, 0.4);
}
.ref-stat-num.highlight-cyan {
  color: #38bdf8;
}
.ref-stat-label {
  font-size: 10px;
  font-weight: 500;
  color: #94a3b8;
  letter-spacing: 0.1px;
  white-space: nowrap;
}

/* RIGHT COLUMN: 5-Card Dynamic Fan with Ambient Rings */
.ref-hero-right {
  position: relative;
  height: 450px;
  display: flex;
  align-items: center;
  justify-content: center;
  perspective: 1400px;
}

/* Ambient Floor Glow & Orbital Rings */
.ref-stage-floor {
  position: absolute;
  bottom: 14px;
  width: 560px;
  height: 140px;
  pointer-events: none;
  z-index: 1;
}
.ref-floor-ring-1 {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 1.5px solid rgba(88, 101, 242, 0.35);
  transform: rotateX(70deg);
  box-shadow: 0 0 25px rgba(88, 101, 242, 0.4);
}
.ref-floor-ring-2 {
  position: absolute;
  inset: 20px 28px;
  border-radius: 50%;
  border: 1.5px solid rgba(200, 170, 110, 0.45);
  transform: rotateX(70deg);
  box-shadow: 0 0 35px rgba(200, 170, 110, 0.35);
}
.ref-floor-glow {
  position: absolute;
  inset: 25px;
  border-radius: 50%;
  background: radial-gradient(ellipse at center, rgba(10, 200, 185, 0.32) 0%, rgba(88, 101, 242, 0.18) 45%, transparent 70%);
  filter: blur(16px);
}

/* 5-CARD FAN CONTAINER */
.ref-cards-fan {
  position: relative;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 5;
}

/* PREMIUM CARD SHELL - NO PILL BADGES */
.fan-card {
  position: absolute;
  border-radius: 12px;
  overflow: hidden;
  cursor: pointer;
  transition: all 0.35s cubic-bezier(0.16, 1, 0.3, 1);
  transform-origin: center 85%;
  filter: contrast(1.06) brightness(1.03);
  background: #091220;
}
.fan-card img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  border-radius: 10px;
}

/* Holographic Diagonal Sheen */
.fan-card .card-glass-sheen {
  position: absolute;
  inset: 0;
  background: linear-gradient(125deg, 
    rgba(255, 255, 255, 0) 28%, 
    rgba(255, 255, 255, 0.14) 42%, 
    rgba(255, 255, 255, 0.32) 48%, 
    rgba(255, 255, 255, 0.06) 54%, 
    transparent 70%);
  pointer-events: none;
  z-index: 8;
}

/* CARD 1: Far Left (Zeus TOP) */
.fan-card.c1-far-left {
  width: 172px;
  height: 266px;
  z-index: 2;
  transform: translateX(-184px) translateY(22px) rotate(-13deg) scale(0.86);
}
.fan-card.c1-far-left:hover {
  transform: translateX(-184px) translateY(2px) rotate(-8deg) scale(0.96);
  z-index: 20;
}

/* CARD 2: Mid Left (Chovy MID) */
.fan-card.c2-mid-left {
  width: 178px;
  height: 276px;
  z-index: 4;
  transform: translateX(-92px) translateY(7px) rotate(-6deg) scale(0.95);
}
.fan-card.c2-mid-left:hover {
  transform: translateX(-92px) translateY(-14px) rotate(-2deg) scale(1.04);
  z-index: 20;
}

/* CARD 3: Center Featured (Faker MID #1 GOAT) */
.fan-card.c3-center {
  width: 202px;
  height: 312px;
  z-index: 6;
  transform: translateX(0px) translateY(-16px) rotate(0deg) scale(1.06);
  border-width: 2.5px;
}
.fan-card.c3-center:hover {
  transform: translateX(0px) translateY(-32px) scale(1.13);
  z-index: 20;
}

/* Radiant Center Backlight */
.faker-backlight {
  position: absolute;
  width: 260px;
  height: 360px;
  background: radial-gradient(ellipse at center, rgba(251, 191, 36, 0.35) 0%, rgba(245, 158, 11, 0.15) 50%, transparent 75%);
  filter: blur(25px);
  z-index: 5;
  pointer-events: none;
}

/* CARD 4: Mid Right (Viper ADC) */
.fan-card.c4-mid-right {
  width: 178px;
  height: 276px;
  z-index: 4;
  transform: translateX(92px) translateY(7px) rotate(6deg) scale(0.95);
}
.fan-card.c4-mid-right:hover {
  transform: translateX(92px) translateY(-14px) rotate(2deg) scale(1.04);
  z-index: 20;
}

/* CARD 5: Far Right (Keria SUP) */
.fan-card.c5-far-right {
  width: 172px;
  height: 266px;
  z-index: 2;
  transform: translateX(184px) translateY(22px) rotate(13deg) scale(0.86);
}
.fan-card.c5-far-right:hover {
  transform: translateX(184px) translateY(2px) rotate(8deg) scale(0.96);
  z-index: 20;
}

/* Rarity-based Outermost Border & Glow */
.fan-card.tier-legend {
  border: 2px solid #fbbf24;
  box-shadow: 0 20px 48px rgba(0, 0, 0, 0.9), 0 0 24px rgba(245, 158, 11, 0.5);
}
.fan-card.tier-legend:hover {
  box-shadow: 0 30px 65px rgba(0, 0, 0, 0.95), 0 0 42px rgba(245, 158, 11, 0.85);
}
.fan-card.c3-center.tier-legend {
  border: 2.5px solid #fbbf24;
  box-shadow: 0 28px 75px rgba(0, 0, 0, 0.95), 0 0 45px rgba(245, 158, 11, 0.75), 0 0 20px rgba(254, 240, 138, 0.6);
}
.fan-card.c3-center.tier-legend:hover {
  box-shadow: 0 36px 85px rgba(0, 0, 0, 0.98), 0 0 55px rgba(245, 158, 11, 0.95);
}

.fan-card.tier-elite {
  border: 2px solid #c084fc;
  box-shadow: 0 20px 48px rgba(0, 0, 0, 0.9), 0 0 24px rgba(168, 85, 247, 0.5);
}
.fan-card.tier-elite:hover {
  box-shadow: 0 30px 65px rgba(0, 0, 0, 0.95), 0 0 42px rgba(168, 85, 247, 0.85);
}
.fan-card.c3-center.tier-elite {
  border: 2.5px solid #c084fc;
  box-shadow: 0 28px 75px rgba(0, 0, 0, 0.95), 0 0 45px rgba(168, 85, 247, 0.75), 0 0 20px rgba(216, 180, 254, 0.6);
}
.fan-card.c3-center.tier-elite:hover {
  box-shadow: 0 36px 85px rgba(0, 0, 0, 0.98), 0 0 55px rgba(168, 85, 247, 0.95);
}

.fan-card.tier-star {
  border: 2px solid #38bdf8;
  box-shadow: 0 20px 48px rgba(0, 0, 0, 0.9), 0 0 24px rgba(14, 165, 233, 0.5);
}
.fan-card.tier-star:hover {
  box-shadow: 0 30px 65px rgba(0, 0, 0, 0.95), 0 0 42px rgba(14, 165, 233, 0.85);
}
.fan-card.c3-center.tier-star {
  border: 2.5px solid #38bdf8;
  box-shadow: 0 28px 75px rgba(0, 0, 0, 0.95), 0 0 45px rgba(14, 165, 233, 0.75);
}

.fan-card.tier-rising {
  border: 2px solid #34d399;
  box-shadow: 0 20px 48px rgba(0, 0, 0, 0.9), 0 0 24px rgba(16, 185, 129, 0.5);
}
.fan-card.tier-rising:hover {
  box-shadow: 0 30px 65px rgba(0, 0, 0, 0.95), 0 0 42px rgba(16, 185, 129, 0.85);
}
.fan-card.c3-center.tier-rising {
  border: 2.5px solid #34d399;
  box-shadow: 0 28px 75px rgba(0, 0, 0, 0.95), 0 0 45px rgba(16, 185, 129, 0.75);
}

.fan-card.tier-prospect {
  border: 2px solid #cbd5e1;
  box-shadow: 0 20px 48px rgba(0, 0, 0, 0.9), 0 0 24px rgba(148, 163, 184, 0.4);
}
.fan-card.tier-prospect:hover {
  box-shadow: 0 30px 65px rgba(0, 0, 0, 0.95), 0 0 42px rgba(148, 163, 184, 0.8);
}

/* Hint Pill below cards - Safe from bottom crest */
.ref-cards-hint {
  position: absolute;
  bottom: 12px;
  right: 36px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 5px 14px;
  background: rgba(4, 10, 22, 0.88);
  backdrop-filter: blur(8px);
  border: 1px solid rgba(200, 170, 110, 0.35);
  border-radius: 20px;
  font-size: 11px;
  font-weight: 700;
  color: #cbd5e1;
  letter-spacing: 0.5px;
  z-index: 8;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.6);
}

/* --- Metrics Bar (Hextech Glassmorphic Cards) --- */
.home-metrics-bar {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
  margin: 6px 0 24px 0;
}

.metric-tile {
  position: relative;
  background: linear-gradient(145deg, rgba(16, 26, 42, 0.9) 0%, rgba(8, 15, 26, 0.96) 100%);
  border: 1px solid rgba(200, 170, 110, 0.22);
  border-radius: 12px;
  padding: 20px 22px;
  display: flex;
  align-items: center;
  gap: 18px;
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.45);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1), 
              box-shadow 0.25s cubic-bezier(0.16, 1, 0.3, 1), 
              border-color 0.25s ease;
  overflow: hidden;
  cursor: default;
}

/* Subtle radiant accent top border */
.metric-tile::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: linear-gradient(90deg, transparent 5%, var(--tile-accent, var(--hex-gold-main)) 50%, transparent 95%);
  opacity: 0.65;
  transition: opacity 0.25s ease, height 0.25s ease;
}

/* Ambient glow in corner */
.metric-tile::after {
  content: "";
  position: absolute;
  top: -35px;
  left: -35px;
  width: 95px;
  height: 95px;
  background: radial-gradient(circle, var(--tile-glow, rgba(200, 170, 110, 0.25)) 0%, transparent 70%);
  pointer-events: none;
  opacity: 0.55;
  transition: opacity 0.25s ease, transform 0.25s ease;
}

.metric-tile:hover {
  transform: translateY(-4px);
  border-color: var(--tile-accent, var(--hex-gold-main));
  box-shadow: 0 16px 36px rgba(0, 0, 0, 0.58), 0 0 25px var(--tile-glow, rgba(200, 170, 110, 0.25));
}

.metric-tile:hover::before {
  opacity: 1;
  height: 3px;
}

.metric-tile:hover::after {
  opacity: 0.85;
  transform: scale(1.25);
}

/* Color Variables per Tile */
.metric-tile.tile-cards {
  --tile-accent: #f59e0b;
  --tile-glow: rgba(245, 158, 11, 0.28);
}

.metric-tile.tile-leagues {
  --tile-accent: #0ac8b9;
  --tile-glow: rgba(10, 200, 185, 0.28);
}

.metric-tile.tile-teams {
  --tile-accent: #a855f7;
  --tile-glow: rgba(168, 85, 247, 0.28);
}

.metric-tile.tile-players {
  --tile-accent: #10b981;
  --tile-glow: rgba(16, 185, 129, 0.28);
}

/* Icon Container */
.metric-icon-wrap {
  width: 58px;
  height: 58px;
  border-radius: 12px;
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.05) 0%, rgba(0, 0, 0, 0.45) 100%);
  border: 1px solid var(--tile-accent);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.5), inset 0 0 14px var(--tile-glow);
  transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.25s ease;
  position: relative;
}

.metric-tile:hover .metric-icon-wrap {
  transform: scale(1.06);
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.6), inset 0 0 18px var(--tile-glow);
}

.metric-svg {
  width: 36px;
  height: 36px;
  display: block;
  filter: drop-shadow(0 2px 6px rgba(0, 0, 0, 0.45));
}

/* Metric Content */
.metric-body {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.metric-val {
  font-family: var(--font-heading);
  font-size: 32px;
  font-weight: 800;
  color: #ffffff;
  line-height: 1;
  letter-spacing: 0.5px;
  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.6);
}

.metric-tile.tile-cards .metric-val {
  background: linear-gradient(180deg, #ffffff 35%, #fcd34d 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.metric-tile.tile-leagues .metric-val {
  background: linear-gradient(180deg, #ffffff 35%, #7dd3fc 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.metric-tile.tile-teams .metric-val {
  background: linear-gradient(180deg, #ffffff 35%, #d8b4fe 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.metric-tile.tile-players .metric-val {
  background: linear-gradient(180deg, #ffffff 35%, #6ee7b7 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.metric-title {
  font-size: 13px;
  font-weight: 700;
  color: #f0e6d2;
  text-transform: uppercase;
  letter-spacing: 0.8px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  margin-top: 3px;
}

.metric-sub-pill {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 11px;
  font-weight: 600;
  color: #94a3b8;
  letter-spacing: 0.4px;
  margin-top: 3px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.metric-sub-pill .sub-gem {
  font-size: 8px;
  color: var(--tile-accent);
}

/* --- Leaderboard Section --- */
.home-leaderboard-section {
  background: rgba(14, 24, 38, 0.92);
  border: 1px solid var(--hex-gold-dark);
  border-radius: 12px;
  padding: 36px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.6);
  position: relative;
}

.leaderboard-header-row {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  flex-wrap: wrap;
  gap: 20px;
  margin-bottom: 28px;
  padding-bottom: 20px;
  border-bottom: 1px solid rgba(200, 170, 110, 0.2);
}

.leaderboard-title-group h2 {
  font-family: var(--font-serif);
  font-size: 28px;
  font-weight: 800;
  color: var(--hex-gold-bright);
  display: flex;
  align-items: center;
  gap: 12px;
}

.leaderboard-title-group p {
  color: #94a3b8;
  font-size: 14px;
  margin-top: 4px;
}

.leaderboard-tools {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
}

.leaderboard-search-input {
  background: rgba(5, 13, 26, 0.9);
  border: 1px solid rgba(200, 170, 110, 0.35);
  border-radius: 6px;
  padding: 9px 16px;
  color: #f1f5f9;
  font-size: 14px;
  min-width: 240px;
  outline: none;
  transition: border-color 0.2s ease;
}

.leaderboard-search-input:focus {
  border-color: var(--hex-gold-main);
  box-shadow: 0 0 10px rgba(200, 170, 110, 0.25);
}

.leaderboard-sort-group {
  display: flex;
  gap: 8px;
  background: rgba(5, 13, 26, 0.6);
  padding: 4px;
  border-radius: 6px;
  border: 1px solid rgba(200, 170, 110, 0.2);
}

.sort-pill-btn {
  background: transparent;
  border: none;
  color: #94a3b8;
  font-family: var(--font-heading);
  font-size: 13px;
  font-weight: 700;
  padding: 6px 12px;
  border-radius: 4px;
  cursor: pointer;
  transition: all 0.2s ease;
}

.sort-pill-btn.active, .sort-pill-btn:hover {
  background: rgba(200, 170, 110, 0.2);
  color: var(--hex-gold-bright);
}

/* --- Leaderboard Table Outer Frame (Sleek Worlds Edition - Version 1) --- */
.hextech-table-frame {
  position: relative;
  border-radius: 12px;
  border: 2px solid rgba(200, 170, 110, 0.7);
  outline: 1.5px solid rgba(200, 170, 110, 0.35);
  outline-offset: 4px;
  background: 
    radial-gradient(ellipse 90% 160px at 50% 0%, rgba(200, 170, 110, 0.18) 0%, transparent 80%),
    radial-gradient(ellipse 80% 140px at 50% 100%, rgba(10, 200, 185, 0.12) 0%, transparent 75%),
    linear-gradient(180deg, rgba(6, 14, 28, 0.98) 0%, rgba(3, 8, 18, 0.99) 100%);
  backdrop-filter: blur(14px);
  box-shadow: 
    0 20px 60px rgba(0, 0, 0, 0.9), 
    0 0 30px rgba(200, 170, 110, 0.2), 
    inset 0 0 40px rgba(10, 200, 185, 0.06);
  padding: 34px 24px 30px 24px;
  margin-top: 24px;
}

/* Neon Cyan & Gold Energy Trails along top & bottom rims */
.hextech-table-frame .worlds-energy-trail {
  position: absolute;
  left: 70px;
  right: 70px;
  height: 2px;
  pointer-events: none;
  z-index: 5;
}

.hextech-table-frame .worlds-energy-trail.top {
  top: -1px;
  background: linear-gradient(90deg, 
    transparent 0%, 
    #eab308 15%, 
    #0ac8b9 35%, 
    transparent 48%, 
    transparent 52%, 
    #0ac8b9 65%, 
    #eab308 85%, 
    transparent 100%
  );
  box-shadow: 0 0 10px rgba(10, 200, 185, 0.85), 0 0 16px rgba(234, 179, 8, 0.55);
}

.hextech-table-frame .worlds-energy-trail.bottom {
  bottom: -1px;
  background: linear-gradient(90deg, 
    transparent 0%, 
    #eab308 18%, 
    #0ac8b9 38%, 
    transparent 48%, 
    transparent 52%, 
    #0ac8b9 62%, 
    #eab308 82%, 
    transparent 100%
  );
  box-shadow: 0 0 10px rgba(10, 200, 185, 0.85), 0 0 16px rgba(234, 179, 8, 0.55);
}

/* 4 Refined 3D Faceted Diamond Corners (58px scaled from Worlds Banner) */
.table-frame-corner {
  position: absolute;
  width: 58px;
  height: auto;
  pointer-events: none;
  z-index: 12;
  filter: drop-shadow(0 0 10px rgba(0, 0, 0, 0.9)) drop-shadow(0 0 14px rgba(200, 170, 110, 0.45));
  transition: all 0.3s ease;
}

.table-frame-corner.top-left {
  top: -14px;
  left: -14px;
}

.table-frame-corner.top-right {
  top: -14px;
  right: -14px;
  transform: scaleX(-1);
}

.table-frame-corner.bottom-left {
  bottom: -14px;
  left: -14px;
  transform: scaleY(-1);
}

.table-frame-corner.bottom-right {
  bottom: -14px;
  right: -14px;
  transform: scale(-1, -1);
}

/* Side Flanges (26px) */
.table-frame-flange {
  position: absolute;
  top: 50%;
  width: 26px;
  height: auto;
  pointer-events: none;
  z-index: 10;
  filter: drop-shadow(0 0 10px rgba(10, 200, 185, 0.6)) drop-shadow(0 0 8px rgba(245, 158, 11, 0.4));
  transition: all 0.3s ease;
}

.table-frame-flange.left {
  left: -13px;
  transform: translateY(-50%);
}

.table-frame-flange.right {
  right: -13px;
  transform: translateY(-50%) scaleX(-1);
}

/* Top Ornate Plaque Header on Frame with Compact 3D Crest */
.table-frame-top-bar {
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  margin-bottom: 22px;
  z-index: 8;
}

.table-frame-crest-top {
  position: absolute;
  top: -26px;
  left: 50%;
  transform: translateX(-50%);
  width: 195px;
  height: auto;
  pointer-events: none;
  z-index: 1;
  filter: drop-shadow(0 4px 12px rgba(0, 0, 0, 0.85)) drop-shadow(0 0 16px rgba(245, 158, 11, 0.55));
}

.frame-bar-wing {
  flex: 1;
  height: 2px;
  max-width: 220px;
  position: relative;
  box-shadow: 0 0 8px rgba(200, 170, 110, 0.6);
}

.frame-bar-wing.left {
  background: linear-gradient(90deg, transparent 0%, #c8aa6e 60%, #f0e6d2 100%);
}

.frame-bar-wing.right {
  background: linear-gradient(90deg, #f0e6d2 0%, #c8aa6e 40%, transparent 100%);
}

.frame-bar-wing::after {
  content: '';
  position: absolute;
  top: -3.5px;
  width: 9px;
  height: 9px;
  background: #fbbf24;
  transform: rotate(45deg);
  box-shadow: 0 0 8px rgba(251, 191, 36, 0.85);
  border: 1px solid #f0e6d2;
}

.frame-bar-wing.left::after {
  right: -4px;
}

.frame-bar-wing.right::after {
  left: -4px;
}

.frame-bar-crest {
  position: relative;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 7px 26px;
  border-radius: 20px;
  background: linear-gradient(135deg, 
    rgba(6, 16, 32, 0.98) 0%, 
    rgba(10, 24, 46, 0.95) 50%, 
    rgba(3, 10, 22, 0.98) 100%
  );
  border: 1.5px solid #c8aa6e;
  box-shadow: 0 0 20px rgba(200, 170, 110, 0.45), inset 0 0 10px rgba(200, 170, 110, 0.2);
}

.frame-crest-svg {
  filter: drop-shadow(0 0 6px rgba(245, 158, 11, 0.9));
}

.frame-bar-title {
  font-family: var(--font-heading);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--hex-gold-bright);
  text-shadow: 0 0 10px rgba(200, 170, 110, 0.6);
}

/* Bottom Ornate Plaque Accent on Frame with Compact 3D Crest */
.table-frame-bottom-bar {
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  margin-top: 18px;
  z-index: 8;
}

.table-frame-crest-bottom {
  position: absolute;
  bottom: -16px;
  left: 50%;
  transform: translateX(-50%);
  width: 145px;
  height: auto;
  pointer-events: none;
  z-index: 2;
  filter: drop-shadow(0 -4px 12px rgba(0, 0, 0, 0.85)) drop-shadow(0 0 14px rgba(245, 158, 11, 0.55));
}

.table-frame-bottom-bar .frame-bar-wing {
  max-width: 180px;
}

.table-frame-bottom-bar .frame-bar-wing.left {
  background: linear-gradient(90deg, transparent 0%, rgba(200, 170, 110, 0.4) 50%, #c8aa6e 100%);
}

.table-frame-bottom-bar .frame-bar-wing.right {
  background: linear-gradient(90deg, #c8aa6e 0%, rgba(200, 170, 110, 0.4) 50%, transparent 100%);
}

.table-frame-bottom-bar .frame-bar-wing::after {
  display: none;
}

/* Inner Table Wrapper */
.leaderboard-table-wrapper {
  overflow-x: auto;
  border-radius: 8px;
  border: 1px solid rgba(200, 170, 110, 0.25);
  background: rgba(4, 10, 18, 0.75);
  position: relative;
  z-index: 1;
  box-shadow: inset 0 0 20px rgba(0, 0, 0, 0.5);
}

.hextech-leaderboard-table {
  width: 100%;
  min-width: 1360px;
  table-layout: fixed;
  border-collapse: collapse;
  text-align: center;
  font-size: 14px;
}

/* Table Headers Centered over Columns */
.hextech-leaderboard-table th {
  background: linear-gradient(180deg, rgba(16, 34, 64, 0.98) 0%, rgba(6, 14, 28, 0.98) 100%);
  color: var(--hex-gold-bright);
  font-family: var(--font-heading);
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  padding: 18px 12px;
  border-bottom: 2px solid rgba(200, 170, 110, 0.55);
  border-right: 1px solid rgba(200, 170, 110, 0.16);
  white-space: nowrap;
  text-align: center;
  vertical-align: middle;
  box-shadow: inset 0 -2px 6px rgba(200, 170, 110, 0.25);
}

.hextech-leaderboard-table th:last-child {
  border-right: none;
}

.th-gem {
  color: #fbbf24;
  font-size: 11px;
  margin-right: 6px;
  filter: drop-shadow(0 0 4px rgba(251, 191, 36, 0.7));
  vertical-align: middle;
}

/* Explicit Column Widths & Centering */
.th-col-rank, .td-col-rank { width: 90px; text-align: center; }
.th-col-player, .td-col-player { width: 280px; text-align: center; }
.th-col-tier, .td-col-tier { width: 185px; text-align: center; }
.th-col-lp, .td-col-lp { width: 130px; text-align: center; }
.th-col-coll, .td-col-coll { width: 205px; text-align: center; }
.th-col-record, .td-col-record { width: 175px; text-align: center; }
.th-col-coins, .td-col-coins { width: 135px; text-align: center; }
.th-col-action, .td-col-action { width: 160px; text-align: center; }

.hextech-leaderboard-table td {
  padding: 16px 10px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
  border-right: 1px solid rgba(200, 170, 110, 0.09);
  vertical-align: middle;
  color: #e2e8f0;
  text-align: center;
}

.hextech-leaderboard-table td:last-child {
  border-right: none;
}

.hextech-leaderboard-table tbody tr {
  transition: background 0.22s ease, transform 0.15s ease;
  cursor: pointer;
}

.hextech-leaderboard-table tbody tr:hover {
  background: rgba(200, 170, 110, 0.08);
}

/* Podium & Top 10 Row Highlights */
.leaderboard-row.row-podium-1 {
  background: linear-gradient(90deg, rgba(245, 158, 11, 0.12) 0%, rgba(4, 10, 18, 0.6) 100%);
  border-left: 4px solid #f59e0b;
}

.leaderboard-row.row-podium-1:hover {
  background: linear-gradient(90deg, rgba(245, 158, 11, 0.22) 0%, rgba(200, 170, 110, 0.12) 100%);
}

.leaderboard-row.row-podium-2 {
  background: linear-gradient(90deg, rgba(203, 213, 225, 0.1) 0%, rgba(4, 10, 18, 0.6) 100%);
  border-left: 4px solid #cbd5e1;
}

.leaderboard-row.row-podium-2:hover {
  background: linear-gradient(90deg, rgba(203, 213, 225, 0.18) 0%, rgba(148, 163, 184, 0.1) 100%);
}

.leaderboard-row.row-podium-3 {
  background: linear-gradient(90deg, rgba(205, 127, 50, 0.1) 0%, rgba(4, 10, 18, 0.6) 100%);
  border-left: 4px solid #cd7f32;
}

.leaderboard-row.row-podium-3:hover {
  background: linear-gradient(90deg, rgba(205, 127, 50, 0.18) 0%, rgba(180, 83, 9, 0.1) 100%);
}

.leaderboard-row.row-top10 {
  border-left: 3px solid rgba(56, 189, 248, 0.55);
}

.leaderboard-row.row-top10:hover {
  background: rgba(56, 189, 248, 0.09);
}

/* Custom Prestigious Podium Badges */
.td-col-rank {
  font-family: var(--font-heading);
  white-space: nowrap;
}

.podium-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 6px 14px;
  border-radius: 6px;
  font-family: var(--font-heading);
  font-weight: 800;
  font-size: 15px;
  letter-spacing: 0.5px;
  margin: 0 auto;
}

.podium-badge.badge-rank-1 {
  background: linear-gradient(135deg, rgba(245, 158, 11, 0.38) 0%, rgba(200, 170, 110, 0.16) 100%);
  border: 1.5px solid #fbbf24;
  color: #fef08a;
  box-shadow: 0 0 16px rgba(245, 158, 11, 0.55), inset 0 0 8px rgba(251, 191, 36, 0.3);
}

.podium-crown-svg {
  color: #fbbf24;
  filter: drop-shadow(0 0 6px rgba(245, 158, 11, 0.9));
}

.podium-badge.badge-rank-2 {
  background: linear-gradient(135deg, rgba(203, 213, 225, 0.32) 0%, rgba(148, 163, 184, 0.14) 100%);
  border: 1.5px solid #e2e8f0;
  color: #ffffff;
  box-shadow: 0 0 14px rgba(203, 213, 225, 0.45), inset 0 0 8px rgba(255, 255, 255, 0.25);
}

.podium-wing-svg {
  color: #e2e8f0;
  filter: drop-shadow(0 0 5px rgba(203, 213, 225, 0.8));
}

.podium-badge.badge-rank-3 {
  background: linear-gradient(135deg, rgba(205, 127, 50, 0.32) 0%, rgba(180, 83, 9, 0.14) 100%);
  border: 1.5px solid #f97316;
  color: #fed7aa;
  box-shadow: 0 0 14px rgba(205, 127, 50, 0.45), inset 0 0 8px rgba(249, 115, 22, 0.25);
}

.podium-flame-svg {
  color: #fb923c;
  filter: drop-shadow(0 0 5px rgba(205, 127, 50, 0.8));
}

.podium-badge.badge-top10 {
  background: linear-gradient(135deg, rgba(14, 165, 233, 0.22) 0%, rgba(2, 132, 199, 0.08) 100%);
  border: 1.5px solid #38bdf8;
  color: #bae6fd;
  box-shadow: 0 0 12px rgba(56, 189, 248, 0.35);
}

.top10-gem {
  color: #38bdf8;
  font-size: 10px;
}

.podium-badge.badge-normal {
  color: #94a3b8;
  font-weight: 700;
  background: rgba(100, 116, 139, 0.12);
  border: 1px solid rgba(100, 116, 139, 0.25);
}

/* Player Cell */
.player-cell-content {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  margin: 0 auto;
  width: 240px;
  max-width: 240px;
  gap: 12px;
  text-align: left;
}

.player-avatar-wrap {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  padding: 2px;
  position: relative;
  flex-shrink: 0;
  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.5);
  border: 2px solid var(--hex-gold-dark);
}

.player-avatar-img {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  object-fit: cover;
  display: block;
}

.avatar-tier-gem {
  position: absolute;
  bottom: -3px;
  right: -3px;
  width: 15px;
  height: 15px;
  border-radius: 50%;
  background: #010a13;
  border: 1px solid var(--hex-gold-main);
  color: var(--hex-gold-bright);
  font-size: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 0 6px rgba(200, 170, 110, 0.6);
}

.player-names-wrap {
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
  flex: 1;
}

.player-main-name {
  font-weight: 700;
  font-size: 14px;
  color: #ffffff;
  display: flex;
  align-items: center;
  gap: 6px;
  white-space: nowrap;
}

.collector-crown-badge {
  background: linear-gradient(135deg, rgba(245, 158, 11, 0.28), rgba(200, 170, 110, 0.18));
  border: 1px solid #f59e0b;
  color: #fbbf24;
  font-size: 10px;
  font-weight: 800;
  padding: 2px 6px;
  border-radius: 10px;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  white-space: nowrap;
  box-shadow: 0 0 8px rgba(245, 158, 11, 0.4);
}

.player-sub-meta {
  font-size: 11px;
  color: #64748b;
  display: flex;
  align-items: center;
  gap: 5px;
  white-space: nowrap;
}

.meta-dot {
  color: #334155;
  font-size: 8px;
}

.player-id-tag {
  font-family: monospace;
  font-size: 11px;
  color: #64748b;
}

.player-status-tag {
  font-family: var(--font-heading);
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 0.6px;
  padding: 1px 5px;
  border-radius: 3px;
  background: rgba(100, 116, 139, 0.15);
  color: #94a3b8;
  border: 1px solid rgba(100, 116, 139, 0.3);
}

.player-status-tag.status-apex {
  background: rgba(239, 68, 68, 0.16);
  color: #f87171;
  border-color: rgba(239, 68, 68, 0.4);
  box-shadow: 0 0 8px rgba(239, 68, 68, 0.2);
}

/* Tier Cell */
.tier-cell-content {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  margin: 0 auto;
  width: fit-content;
}

.tier-crest-img {
  width: 44px;
  height: 44px;
  object-fit: contain;
  filter: drop-shadow(0 2px 6px rgba(0, 0, 0, 0.75));
  flex-shrink: 0;
  transition: transform 0.25s cubic-bezier(0.2, 0.8, 0.2, 1), filter 0.25s ease;
}

.leaderboard-row:hover .tier-crest-img {
  transform: scale(1.18);
  filter: drop-shadow(0 4px 14px rgba(200, 155, 60, 0.45));
}

.tier-badge {
  font-family: var(--font-heading);
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 1px;
  padding: 4px 10px;
  border-radius: 4px;
  border: 1px solid;
  text-transform: uppercase;
}

.tier-badge.tier-challenger {
  background: rgba(251, 191, 36, 0.15);
  border-color: #f59e0b;
  color: #fbbf24;
  box-shadow: 0 0 10px rgba(245, 158, 11, 0.3);
}

.tier-badge.tier-grandmaster {
  background: rgba(239, 68, 68, 0.15);
  border-color: #ef4444;
  color: #fca5a5;
  box-shadow: 0 0 10px rgba(239, 68, 68, 0.3);
}

.tier-badge.tier-master {
  background: rgba(168, 85, 247, 0.15);
  border-color: #a855f7;
  color: #c084fc;
}

.tier-badge.tier-diamond {
  background: rgba(56, 189, 248, 0.15);
  border-color: #38bdf8;
  color: #7dd3fc;
}

.tier-badge.tier-emerald {
  background: rgba(16, 185, 129, 0.15);
  border-color: #10b981;
  color: #34d399;
}

.tier-badge.tier-platinum {
  background: rgba(45, 212, 191, 0.15);
  border-color: #14b8a6;
  color: #2dd4bf;
}

.tier-badge.tier-gold {
  background: rgba(234, 179, 8, 0.15);
  border-color: #eab308;
  color: #fde047;
}

.tier-badge.tier-silver {
  background: rgba(203, 213, 225, 0.15);
  border-color: #cbd5e1;
  color: #e2e8f0;
}

.tier-badge.tier-bronze {
  background: rgba(205, 127, 50, 0.15);
  border-color: #cd7f32;
  color: #fed7aa;
}

.tier-badge.tier-iron {
  background: rgba(100, 116, 139, 0.15);
  border-color: #64748b;
  color: #94a3b8;
}

/* LP Cell */
.lp-cell-wrap {
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: 4px;
  margin: 0 auto;
}

.lp-cell-val {
  font-family: var(--font-heading);
  font-size: 17px;
  font-weight: 800;
  color: var(--hex-gold-bright);
}

.lp-cell-unit {
  font-size: 12px;
  color: var(--hex-gold-main);
  font-weight: 600;
}

/* Collection Progress Cell */
.collection-cell-content {
  min-width: 175px;
  max-width: 195px;
  margin: 0 auto;
}

.collection-cell-stats {
  display: flex;
  justify-content: space-between;
  font-size: 13px;
  font-weight: 600;
  margin-bottom: 6px;
}

.coll-count-text {
  color: #cbd5e1;
}

.coll-pct-text {
  font-weight: 700;
  color: #0ac8b9;
}

.coll-track {
  width: 100%;
  height: 8px;
  background: rgba(5, 13, 26, 0.8);
  border: 1px solid rgba(200, 170, 110, 0.25);
  border-radius: 4px;
  overflow: hidden;
}

.coll-bar-fill {
  height: 100%;
  background: linear-gradient(90deg, #0ac8b9, #c8aa6e);
  border-radius: 3px;
  transition: width 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}

/* Record / Winrate Cell */
.record-cell-content {
  display: flex;
  flex-direction: column;
  gap: 5px;
  min-width: 145px;
  max-width: 165px;
  margin: 0 auto;
}

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

.record-wl {
  font-weight: 700;
  font-size: 13px;
  color: #f1f5f9;
}

.record-wr {
  font-size: 12px;
  font-weight: 700;
}

.wr-green { color: #0ac8b9; }
.wr-red { color: #ef4444; }

.wr-bar-track {
  width: 100%;
  height: 6px;
  background: rgba(5, 13, 26, 0.9);
  border-radius: 3px;
  display: flex;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.08);
}

.wr-bar-win {
  background: linear-gradient(90deg, #059669, #10b981);
  height: 100%;
  transition: width 0.4s ease;
}

.wr-bar-loss {
  background: linear-gradient(90deg, #dc2626, #ef4444);
  height: 100%;
  transition: width 0.4s ease;
}

/* Coins Pill */
.table-coins-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 5px 12px;
  border-radius: 14px;
  background: rgba(14, 165, 233, 0.08);
  border: 1px solid rgba(56, 189, 248, 0.35);
  box-shadow: inset 0 0 8px rgba(14, 165, 233, 0.08);
  margin: 0 auto;
}

.coin-mini-svg, .ui-be-img {
  filter: drop-shadow(0 0 5px rgba(56, 189, 248, 0.6));
  flex-shrink: 0;
  object-fit: contain;
}

.coins-val-num {
  font-family: var(--font-heading);
  font-size: 13px;
  font-weight: 800;
  color: #38bdf8;
}

/* Action Button */
.profile-action-btn,
.deck-action-btn {
  background: rgba(200, 170, 110, 0.1);
  border: 1px solid var(--hex-gold-main);
  color: var(--hex-gold-bright);
  font-family: var(--font-heading);
  font-size: 13px;
  font-weight: 800;
  padding: 8px 14px;
  border-radius: 4px;
  cursor: pointer;
  white-space: nowrap;
  transition: all 0.2s ease;
}

.deck-action-btn.hextech-deck-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  background: linear-gradient(135deg, rgba(200, 170, 110, 0.16), rgba(10, 200, 185, 0.1));
  border: 1px solid var(--hex-gold-main);
  color: var(--hex-gold-bright);
  font-family: var(--font-heading);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.6px;
  padding: 8px 15px;
  border-radius: 4px;
  cursor: pointer;
  white-space: nowrap;
  transition: all 0.22s cubic-bezier(0.16, 1, 0.3, 1);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
  margin: 0 auto;
}

.deck-action-btn.hextech-deck-btn:hover {
  background: linear-gradient(135deg, var(--hex-gold-bright), #c8aa6e);
  color: #010a13;
  border-color: #f0e6d2;
  box-shadow: 0 0 16px rgba(200, 170, 110, 0.55), 0 4px 12px rgba(0, 0, 0, 0.4);
  transform: translateY(-1px);
}

.deck-btn-svg {
  stroke: currentColor;
  transition: transform 0.2s ease;
}

.deck-action-btn.hextech-deck-btn:hover .deck-btn-svg {
  transform: scale(1.15);
}

/* Breadcrumb Navigation Bar in Deck & Profile Views */
.view-breadcrumb-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 24px;
  padding: 10px 16px;
  background: rgba(9, 20, 40, 0.7);
  border: 1px solid rgba(200, 170, 110, 0.25);
  border-radius: 6px;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.4);
}

.breadcrumb-left-group {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}

.deck-inspect-user-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 4px 12px;
  background: rgba(200, 170, 110, 0.12);
  border: 1px solid rgba(200, 170, 110, 0.3);
  border-radius: 20px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
}

.deck-inspect-avatar {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  border: 1.5px solid var(--hex-gold-bright);
  object-fit: cover;
}

.deck-inspect-name {
  font-family: var(--font-heading);
  font-size: 13px;
  font-weight: 800;
  color: #ffffff;
}

.deck-inspect-tag {
  font-size: 10px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--hex-gold-bright);
  background: rgba(200, 170, 110, 0.2);
  padding: 2px 6px;
  border-radius: 4px;
}

.breadcrumb-back-btn,
.breadcrumb-deck-btn,
.breadcrumb-profile-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: rgba(200, 170, 110, 0.08);
  border: 1px solid rgba(200, 170, 110, 0.35);
  color: var(--hex-gold-bright);
  font-family: var(--font-heading);
  font-size: 13px;
  font-weight: 700;
  padding: 7px 16px;
  border-radius: 4px;
  cursor: pointer;
  transition: all 0.2s ease;
}

.breadcrumb-back-btn:hover,
.breadcrumb-deck-btn:hover,
.breadcrumb-profile-btn:hover {
  background: var(--hex-gold-main);
  color: #010a13;
  box-shadow: 0 0 12px rgba(200, 170, 110, 0.45);
}

.breadcrumb-back-btn .back-arrow {
  font-size: 15px;
  transition: transform 0.2s ease;
}

.breadcrumb-back-btn:hover .back-arrow {
  transform: translateX(-3px);
}

.profile-tier-crest {
  width: 24px;
  height: 24px;
  object-fit: contain;
  vertical-align: middle;
  margin-right: 6px;
  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.6));
}

/* Discord Guide Box */
.home-discord-guide {
  background: rgba(9, 20, 40, 0.7);
  border: 1px solid rgba(200, 170, 110, 0.2);
  border-radius: 10px;
  padding: 28px;
}

.guide-heading {
  font-family: var(--font-serif);
  font-size: 20px;
  font-weight: 700;
  color: var(--hex-gold-bright);
  margin-bottom: 20px;
  display: flex;
  align-items: center;
  gap: 10px;
}

.guide-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
}

.guide-item {
  background: rgba(4, 10, 18, 0.7);
  border: 1px solid rgba(200, 170, 110, 0.15);
  border-radius: 6px;
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.guide-cmd {
  font-family: monospace;
  font-size: 14px;
  font-weight: 700;
  color: var(--hex-blue-cyan);
}

.guide-desc {
  font-size: 13px;
  color: #94a3b8;
  line-height: 1.4;
}

@media (max-width: 1100px) {
  .home-hero-card {
    grid-template-columns: 1fr;
    padding: 36px 28px;
  }
  .home-hero-card.reference-hero-card {
    grid-template-columns: 1fr;
    padding: 44px 28px 36px;
    gap: 28px;
  }
  .ref-hero-left {
    padding: 10px 0;
    max-width: 100%;
    align-items: center;
    text-align: center;
  }
  .ref-hero-headline {
    font-size: 34px;
  }
  .ref-hero-desc {
    max-width: 600px;
  }
  .ref-btn-group {
    justify-content: center;
  }
  .ref-stats-row {
    max-width: 380px;
    margin: 0 auto;
  }
  .ref-hero-right {
    height: 380px;
    width: 100%;
  }
  .ref-cards-hint {
    right: 50%;
    transform: translateX(50%);
    bottom: 8px;
  }
  .worlds-art-crest-top {
    width: 380px;
    max-width: 60%;
    top: -30px;
  }
  .worlds-art-crest-bottom {
    width: 350px;
    max-width: 55%;
    bottom: -30px;
  }
  .worlds-art-corner {
    width: 90px;
  }
  .worlds-art-corner.top-left { top: -21px; left: -21px; }
  .worlds-art-corner.top-right { top: -21px; right: -21px; }
  .worlds-art-corner.bottom-left { bottom: -21px; left: -21px; }
  .worlds-art-corner.bottom-right { bottom: -21px; right: -21px; }
  .worlds-art-flange {
    width: 36px;
  }
  .worlds-art-flange.left { left: -16px; }
  .worlds-art-flange.right { right: -16px; }
  .hero-cards-showcase {
    height: 320px;
  }
  .home-metrics-bar {
    grid-template-columns: repeat(2, 1fr);
  }
  .guide-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 700px) {
  .hero-title {
    font-size: 30px;
  }
  .home-hero-card.reference-hero-card {
    padding: 36px 16px 28px;
  }
  .ref-hero-headline {
    font-size: 26px;
  }
  .ref-btn-group {
    flex-direction: column;
    width: 100%;
  }
  .ref-btn-discord, .ref-btn-browse {
    width: 100%;
    justify-content: center;
  }
  .ref-hero-right {
    height: 310px;
    transform: scale(0.85);
  }
  .ref-stats-row {
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
    max-width: 260px;
  }
  .worlds-art-crest-top {
    width: 250px;
    max-width: 75%;
    top: -20px;
  }
  .worlds-art-crest-bottom {
    width: 230px;
    max-width: 70%;
    bottom: -20px;
  }
  .worlds-art-corner {
    width: 65px;
  }
  .worlds-art-corner.top-left { top: -15px; left: -15px; }
  .worlds-art-corner.top-right { top: -15px; right: -15px; }
  .worlds-art-corner.bottom-left { bottom: -15px; left: -15px; }
  .worlds-art-corner.bottom-right { bottom: -15px; right: -15px; }
  .worlds-art-flange {
    display: none;
  }
  .worlds-energy-trail {
    display: none;
  }
  .hero-cta-group {
    flex-direction: column;
  }
  .hero-cards-showcase {
    display: none;
  }
  .home-metrics-bar {
    grid-template-columns: 1fr;
    gap: 14px;
  }
  .metric-tile {
    padding: 16px 18px;
  }
  .guide-grid {
    grid-template-columns: 1fr;
  }
}

/* ==========================================================================
   UI Semantic SVG Icons & Graphics
   ========================================================================== */
.ui-svg-icon {
  display: inline-block;
  vertical-align: middle;
  flex-shrink: 0;
}

.icon-coin {
  filter: drop-shadow(0 0 5px rgba(56, 189, 248, 0.6));
}

.icon-trophy {
  filter: drop-shadow(0 0 4px rgba(200, 170, 110, 0.45));
}

.icon-deck {
  filter: drop-shadow(0 0 4px rgba(10, 200, 185, 0.4));
}

.icon-swords {
  filter: drop-shadow(0 0 4px rgba(200, 170, 110, 0.4));
}

.icon-sparkle {
  filter: drop-shadow(0 0 5px rgba(10, 200, 185, 0.6));
}

.icon-crown {
  filter: drop-shadow(0 0 5px rgba(245, 158, 11, 0.5));
}

.icon-robot {
  filter: drop-shadow(0 0 5px rgba(10, 200, 185, 0.5));
}

.icon-user {
  filter: drop-shadow(0 0 3px rgba(200, 170, 110, 0.4));
}

.icon-logout {
  color: inherit;
}

.icon-star {
  filter: drop-shadow(0 0 3px rgba(10, 200, 185, 0.6));
}

.sort-pill-btn {
  display: inline-flex !important;
  align-items: center !important;
  gap: 7px !important;
}

.collector-crown-badge {
  display: inline-flex !important;
  align-items: center !important;
  gap: 5px !important;
}

.guide-heading {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
}

.guide-heading-icon {
  display: inline-flex;
  align-items: center;
}

.card-hint {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 6px !important;
}

.hint-sparkle-icon {
  display: inline-flex;
  align-items: center;
  flex-shrink: 0;
}

.ref-cards-hint {
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
}

.title-crown-icon {
  display: inline-flex;
  align-items: center;
  color: var(--hex-gold-bright);
}

.modal-role-icon {
  width: 14px;
  height: 14px;
  object-fit: contain;
  vertical-align: middle;
  filter: drop-shadow(0 0 3px rgba(10, 200, 185, 0.5));
}

.breadcrumb-icon {
  display: inline-flex;
  align-items: center;
}

.demo-current-check {
  display: inline-flex;
  align-items: center;
  color: #10b981;
}

.user-menu-coins {
  display: flex !important;
  align-items: center !important;
  gap: 6px !important;
}

.profile-tag.coins-tag {
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
}

.ref-card-icon {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
}