/* ==========================================================================
   SLANG FC – collectible card UI. Colours, fonts and radii come from brand.css (brand/tokens.json)
   ========================================================================== */


* { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-padding-top: calc(var(--header-height) + 16px); }
body {
  background: var(--bg-deep);
  color: var(--text-main);
  font: 14.5px/1.55 var(--font);
  -webkit-font-smoothing: antialiased;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  min-width: 0;
  overflow-x: clip;
}

.wrap {
  width: 100%;
  max-width: 1360px;
  margin: 0 auto;
  padding: 0 24px;
  min-width: 0;
}

.main-content { min-width: 0; }
.main-content [id] { scroll-margin-top: calc(var(--header-height) + 16px); }

/* ==========================================================================
   Header & Brand
   ========================================================================== */
.app-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: var(--bg-glass);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  border-bottom: 1px solid var(--border-subtle);
}

.bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  row-gap: 8px;
  padding-block: 10px;
  min-height: var(--header-height);
}

.brand {
  display: flex;
  align-items: center;
  gap: 12px;
  text-decoration: none;
  color: inherit;
  min-width: 0;
  flex: 0 0 auto;
}

.brand-mark {
  width: 40px;
  height: 40px;
  flex-shrink: 0;
  filter: drop-shadow(0 4px 12px var(--accent-gold-glow));
}

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

.brand-title {
  white-space: nowrap;
  font-family: var(--font-display); font-stretch: 112%;
  font-size: 19px;
  font-weight: 900;
  letter-spacing: -0.02em;
  line-height: 1.1;
}

.accent-text {
  display: inline-block;
  margin-left: 4px;
  padding: 0 6px;
  border-radius: 6px;
  background: var(--accent-gold);
  color: var(--bg-deep);
  transform: rotate(-3deg);
}

.brand-sub {
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: 0.12em;
  color: var(--accent-gold);
}

.live-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 5px 12px;
  border-radius: 999px;
  background: var(--accent-emerald-surface);
  border: 1px solid rgba(61, 220, 151, 0.35);
  font-size: 12px;
  font-weight: 700;
  color: var(--accent-emerald);
  flex-shrink: 0;
}

.pulse-indicator {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--accent-emerald);
  box-shadow: 0 0 0 0 rgba(61, 220, 151, 0.7);
  animation: pulse-ring 1.8s infinite;
}

@keyframes pulse-ring {
  0% { transform: scale(0.95); box-shadow: 0 0 0 0 rgba(61, 220, 151, 0.7); }
  70% { transform: scale(1); box-shadow: 0 0 0 7px rgba(61, 220, 151, 0); }
  100% { transform: scale(0.95); box-shadow: 0 0 0 0 rgba(61, 220, 151, 0); }
}

.header-metrics {
  display: flex;
  align-items: center;
  gap: 16px;
  background: var(--bg-surface);
  padding: 6px 16px;
  border-radius: 999px;
  border: 1px solid var(--border-subtle);
  font-size: 12.5px;
}

.h-metric { display: flex; align-items: baseline; gap: 5px; }
.h-metric b { color: var(--text-main); font-weight: 800; }
.h-metric span { color: var(--text-muted); font-size: 11.5px; }
.h-metric-div { width: 1px; height: 14px; background: var(--border-subtle); }

/* Keep the brand and account controls readable before showing secondary counts. */
@media (max-width: 1200px) {
  .header-metrics { display: none; }
}

.header-actions {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
  margin-inline-start: auto;
}

.lang-switcher {
  display: inline-flex;
  align-items: center;
  background: var(--bg-surface);
  border: 1px solid var(--border-subtle);
  padding: 3px;
  border-radius: 999px;
  gap: 2px;
}

.lang-btn {
  background: transparent;
  border: none;
  padding: 5px 11px;
  border-radius: 999px;
  font-size: 11.5px;
  font-weight: 800;
  color: var(--text-muted);
  cursor: pointer;
  transition: var(--transition);
  display: inline-flex;
  align-items: center;
  gap: 4px;
  min-width: 44px;
  min-height: 44px;
}

.lang-btn:hover {
  color: var(--text-main);
}

.lang-btn.active {
  background: var(--bg-surface-elevated);
  color: var(--text-main);
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.15);
}

.theme-toggle {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--bg-surface);
  border: 1px solid var(--border-subtle);
  color: var(--text-muted);
  cursor: pointer;
  display: grid;
  place-items: center;
  font-size: 16px;
  transition: var(--transition);
}
.theme-toggle:hover { color: var(--text-main); border-color: var(--border-focus); transform: rotate(15deg); }

/* ==========================================================================
   Hero & Scope Bar
   ========================================================================== */
.hero-strip {
  padding: 18px 0 14px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.hero-headline {
  font-family: var(--font-display); font-stretch: 112%;
  font-size: clamp(22px, 2.5vw, 33px);
  font-weight: 900;
  letter-spacing: -0.025em;
  line-height: 1.18;
  max-width: 100%;
  overflow-wrap: anywhere;
}

.gradient-text {
  background: linear-gradient(135deg, #3ddc97, #38bdf8, #f5c518);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.hero-desc {
  color: var(--text-muted);
  font-size: 14px;
  max-width: 960px;
  margin-top: 6px;
}

/* Scope Tabs (FUT / Collectible Deck Style) */
.scope-tabs {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 6px;
  background: var(--bg-main);
  padding: 6px;
  border-radius: var(--radius-lg);
  border: 1px solid var(--border-subtle);
  width: 100%;
}

.scope-tab {
  background: transparent;
  border: 1px solid transparent;
  padding: 9px 10px;
  border-radius: var(--radius-md);
  color: var(--text-muted);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  font-weight: 700;
  font-size: 13px;
  line-height: 1.35;
  transition: var(--transition);
  position: relative;
  min-width: 0;
  min-height: 44px;
}

.tab-label { min-width: 0; overflow-wrap: anywhere; }

.scope-tab:hover {
  color: var(--text-main);
  background: rgba(255, 255, 255, 0.03);
}

.scope-tab.active {
  background: var(--bg-surface-elevated);
  color: var(--text-main);
  border-color: var(--border-focus);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.35);
}

.tab-emoji { font-size: 19px; }

.tab-count {
  background: var(--bg-deep);
  border: 1px solid var(--border-subtle);
  color: var(--accent-emerald);
  padding: 2px 8px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 800;
}

/* ==========================================================================
   Controls & Filters Panel
   ========================================================================== */
.controls-panel {
  background: var(--bg-surface);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  padding: 14px 18px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-bottom: 20px;
  box-shadow: 0 4px 20px rgba(0,0,0,0.15);
}

.league-group-tabs {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  border-bottom: 1px solid var(--border-subtle);
  padding-bottom: 6px;
  margin-bottom: 2px;
}

.group-tab-btn {
  background: transparent;
  border: 1px solid transparent;
  color: var(--text-muted);
  padding: 6px 14px;
  border-radius: var(--radius-sm);
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  transition: var(--transition);
  min-height: 44px;
  min-width: 0;
  overflow-wrap: anywhere;
}

.group-tab-btn:hover {
  color: var(--text-main);
  background: var(--bg-surface-elevated);
}

.group-tab-btn.active {
  background: var(--bg-surface-elevated);
  border-color: var(--border-medium);
  color: var(--accent-emerald);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25);
}

.league-bar {
  display: flex;
  align-items: center;
  gap: 8px;
  overflow-x: auto;
  min-width: 0;
  max-width: 100%;
  scrollbar-width: thin;
  scrollbar-color: var(--border-focus) var(--bg-surface);
  overscroll-behavior-x: contain;
  scroll-padding-inline: 4px;
  padding-bottom: 4px;
}
.league-bar::-webkit-scrollbar { height: 6px; }
.league-bar::-webkit-scrollbar-track { background: var(--bg-surface); }
.league-bar::-webkit-scrollbar-thumb { background: var(--border-focus); border-radius: 999px; }

.league-btn {
  background: var(--bg-surface-elevated);
  border: 1px solid var(--border-subtle);
  color: var(--text-muted);
  padding: 8px 16px;
  border-radius: 999px;
  font-size: 13.5px;
  font-weight: 700;
  cursor: pointer;
  white-space: nowrap;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  transition: var(--transition);
  min-height: 44px;
  flex-shrink: 0;
}

.league-btn:hover {
  color: var(--text-main);
  border-color: var(--border-focus);
}

.league-btn.active {
  background: linear-gradient(135deg, rgba(61, 220, 151, 0.22), rgba(61, 220, 151, 0.08));
  border-color: var(--accent-emerald);
  color: #6fe8b5;
  box-shadow: 0 2px 10px var(--accent-emerald-glow);
}

:root[data-theme="light"] .league-btn.active {
  background: linear-gradient(135deg, #0f9a62, #3ddc97);
  border-color: #0b7a4b;
  color: #ffffff;
  box-shadow: 0 4px 12px rgba(5, 150, 105, 0.28);
}

:root[data-theme="light"] .live-pill {
  background: #e7f7ee;
  border-color: #9cf0cb;
  color: #0b7a4b;
}

:root[data-theme="light"] .brand-sub {
  color: #c99a00;
}

:root[data-theme="light"] .card-btn.primary {
  background: #e7f7ee;
  border-color: #9cf0cb;
  color: #0b7a4b;
}

:root[data-theme="light"] .card-btn.primary:hover {
  background: #0f9a62;
  border-color: #0b7a4b;
  color: #ffffff;
}

.league-logo-img {
  width: 20px;
  height: 20px;
  object-fit: contain;
  flex-shrink: 0;
  border-radius: 4px;
}

.sub-controls-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px 14px;
  flex-wrap: wrap;
  padding-top: 10px;
  border-top: 1px solid var(--border-subtle);
}

.controls-left {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  min-width: 0;
  max-width: 100%;
}

.round-pills {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}

.round-pill {
  background: var(--bg-surface-elevated);
  border: 1px solid var(--border-subtle);
  color: var(--text-muted);
  width: 44px;
  height: 44px;
  border-radius: 50%;
  font-size: 13px;
  font-weight: 800;
  cursor: pointer;
  display: grid;
  place-items: center;
  transition: var(--transition);
}

.round-pill:hover {
  color: var(--text-main);
  border-color: var(--border-focus);
}

.round-pill.active {
  background: var(--accent-emerald);
  color: #04140c;
  border-color: var(--accent-emerald);
  box-shadow: 0 2px 8px var(--accent-emerald-glow);
}

.select-control {
  background-color: var(--bg-surface-elevated);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%2310b981' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center;
  border: 1.5px solid var(--border-medium, rgba(255, 255, 255, 0.12));
  color: #f6f3ea;
  padding: 9px 40px 9px 14px;
  border-radius: 10px;
  font-size: 13.5px;
  font-weight: 700;
  font-family: inherit;
  cursor: pointer;
  outline: none;
  appearance: none;
  -webkit-appearance: none;
  transition: all 0.2s ease;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25);
  color-scheme: dark; /* Enforces native dark popup on all browsers */
  max-width: 440px;
  min-width: 0;
  min-height: 44px;
  text-overflow: ellipsis;
}

.select-control:hover {
  border-color: var(--accent-emerald);
  box-shadow: 0 4px 14px rgba(61, 220, 151, 0.2);
}

.select-control:focus {
  border-color: var(--accent-emerald);
  box-shadow: 0 0 0 3px rgba(61, 220, 151, 0.25);
}

.select-control option {
  background-color: #0d1522;
  color: #efebdf;
  padding: 10px 14px;
  font-size: 13.5px;
  font-weight: 600;
}

.select-control optgroup {
  background-color: #070c14;
  color: #6fe8b5;
  font-weight: 800;
  font-size: 12px;
  letter-spacing: 0.04em;
  padding: 8px 12px;
}

.match-select-wrap {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  min-width: 0;
  max-width: 100%;
}

.match-select-label {
  font-weight: 700;
  font-size: 12.5px;
  color: var(--text-muted);
}

.controls-right {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
  max-width: 100%;
  flex-wrap: wrap;
}

.filter-pills {
  display: inline-flex;
  background: var(--bg-main);
  padding: 3px;
  border-radius: 999px;
  border: 1px solid var(--border-subtle);
  max-width: 100%;
  flex-wrap: wrap;
}

.filter-pill {
  background: transparent;
  border: none;
  color: var(--text-muted);
  padding: 6px 14px;
  border-radius: 999px;
  font-size: 12.5px;
  font-weight: 700;
  cursor: pointer;
  transition: var(--transition);
  min-width: 0;
  min-height: 44px;
  overflow-wrap: anywhere;
}

.filter-pill.active {
  background: var(--bg-surface-elevated);
  color: var(--text-main);
}
.filter-pill.praise.active { color: var(--accent-emerald); }
.filter-pill.roast.active { color: var(--accent-crimson); }

.search-box-wrap {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  max-width: 100%;
  flex-wrap: wrap;
}

.search-box {
  position: relative;
  display: flex;
  align-items: center;
  gap: 8px;
  background: var(--bg-surface-elevated);
  border: 1.5px solid var(--border-subtle);
  border-radius: 999px;
  padding: 0 12px;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
  min-width: 0;
  min-height: 46px;
  flex: 1 1 180px;
}

.search-box:focus-within {
  border-color: var(--accent-emerald);
  box-shadow: 0 0 0 3px rgba(61, 220, 151, 0.15);
}

.search-box input {
  background: transparent;
  border: none;
  outline: none;
  color: var(--text-main);
  font-size: 13.5px;
  width: 170px;
  min-width: 0;
  min-height: 44px;
  flex: 1 1 auto;
}

.search-box input::placeholder {
  color: var(--text-muted);
  opacity: 0.8;
}

.search-ico { font-size: 13px; color: var(--text-muted); }

.search-clear-btn {
  background: rgba(255, 255, 255, 0.1);
  border: none;
  color: var(--text-muted);
  width: 44px;
  height: 44px;
  flex: 0 0 44px;
  border-radius: 50%;
  font-size: 11px;
  font-weight: 800;
  cursor: pointer;
  display: none;
  place-items: center;
  padding: 0;
  line-height: 1;
  transition: background 0.15s ease, color 0.15s ease;
}

.search-clear-btn.visible {
  display: grid;
}

.search-clear-btn:hover {
  background: var(--accent-crimson);
  color: #fff;
}

.search-scope-pill {
  background: var(--bg-surface-elevated);
  border: 1px solid var(--border-subtle);
  border-radius: 999px;
  padding: 6px 12px;
  font-size: 11.5px;
  font-weight: 700;
  color: var(--text-muted);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  transition: var(--transition);
  min-width: 0;
  max-width: 100%;
  min-height: 44px;
  overflow-wrap: anywhere;
}

.search-scope-pill:hover {
  border-color: var(--accent-emerald);
  color: var(--text-main);
}

.search-scope-pill.active {
  background: rgba(61, 220, 151, 0.12);
  border-color: rgba(61, 220, 151, 0.4);
  color: var(--accent-emerald);
}

.scope-pill-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--text-muted);
  transition: background 0.2s ease, box-shadow 0.2s ease;
  flex-shrink: 0;
}

.search-scope-pill.active .scope-pill-dot {
  background: var(--accent-emerald);
  box-shadow: 0 0 6px var(--accent-emerald);
}

/* ==========================================================================
   Card Section & Collectible Card Grid
   ========================================================================== */
.cards-section {
  display: flex;
  flex-direction: column;
  gap: 20px;
  margin-bottom: 60px;
}

.cards-header-info {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 10px 16px;
  min-width: 0;
}
.section-title-wrap { min-width: 0; overflow-wrap: anywhere; }
.cards-actions { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; min-width: 0; }

.section-title {
  font-family: var(--font-display); font-stretch: 112%;
  font-size: 24px;
  font-weight: 900;
  letter-spacing: -0.02em;
}

.section-subtitle {
  color: var(--text-muted);
  font-size: 13.5px;
  font-weight: 600;
  margin-left: 10px;
}

.card-total-badge {
  background: var(--bg-surface);
  border: 1px solid var(--border-subtle);
  color: var(--text-muted);
  padding: 4px 12px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 700;
}

.cards-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 320px), 1fr));
  gap: 24px;
  min-width: 0;
}

/* ==========================================================================
   Collectible Card Item (FUT / Sorare Style)
   ========================================================================== */
.fut-card {
  position: relative;
  background: var(--card-bg);
  border-radius: var(--radius-lg);
  padding: 20px 18px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  box-shadow: var(--shadow-card);
  border: 1.5px solid var(--card-border, var(--border-subtle));
  cursor: pointer;
  transition: transform 0.12s ease-out, box-shadow 0.25s ease-out, border-color 0.25s ease-out;
  overflow: hidden;
  transform-style: preserve-3d;
  will-change: transform;
  box-sizing: border-box;
  min-width: 0;
}

.card-detail-trigger {
  position: absolute;
  inset: 0;
  z-index: 2;
  border: 0;
  border-radius: inherit;
  background: transparent;
  cursor: pointer;
}
.card-detail-trigger:focus-visible { outline-offset: -5px; }
.fut-card > :not(.card-detail-trigger):not(.card-bottom-actions) { pointer-events: none; }

.card-hologram-glare {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.25s ease;
  mix-blend-mode: color-dodge;
  z-index: 10;
}

.fut-card::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0; height: 160px;
  background: radial-gradient(circle at 50% -20%, var(--glow-color, rgba(61, 220, 151, 0.2)), transparent 70%);
  pointer-events: none;
}

/* Praise Cards: Luxury Gold & Emerald Champion Palette */
.fut-card.praise {
  --card-border: rgba(245, 180, 20, 0.4);
  --glow-color: rgba(245, 180, 20, 0.22);
  --card-glow: #f5c518;
  background: linear-gradient(160deg, #111a1e 0%, #0d1519 50%, #080d10 100%);
}

.fut-card.praise:hover {
  border-color: rgba(245, 180, 20, 0.85);
  box-shadow: 0 16px 38px rgba(245, 180, 20, 0.25), 0 0 20px rgba(61, 220, 151, 0.25);
}

/* Roast Cards: Deep Crimson / Ruby Disaster Class Palette */
.fut-card.roast {
  --card-border: rgba(255, 90, 71, 0.48);
  --glow-color: rgba(255, 90, 71, 0.32);
  --card-glow: #ff5a47;
  background: linear-gradient(160deg, #1f0b0d 0%, #170708 50%, #0e0304 100%);
}

.fut-card.roast:hover {
  border-color: #ff5a47;
  box-shadow: 0 16px 40px rgba(255, 90, 71, 0.42), 0 0 24px rgba(224, 58, 44, 0.35);
}

/* 3D Parallax Floating elements on hover */
.fut-card:hover .player-avatar-stage {
  transform: translateZ(24px) scale(1.05);
  transition: transform 0.2s ease-out;
}
.fut-card:hover .card-emoji-pill {
  transform: translateZ(28px) scale(1.12);
  transition: transform 0.2s ease-out;
}
.fut-card:hover .card-title-text {
  transform: translateZ(16px);
  transition: transform 0.2s ease-out;
}

/* Card Visual Bar (Top Row: Avatar on Left, Big Card Icon on Right) */
.card-visual-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 16px;
}

.card-avatar-col {
  flex-shrink: 0;
}

.player-avatar-stage {
  position: relative;
  width: 76px;
  height: 76px;
  border-radius: 50%;
  background: var(--bg-surface-elevated);
  border: 2.5px solid var(--card-border, var(--border-subtle));
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.35);
  display: flex;
  align-items: center;
  justify-content: center;
}

:root[data-theme="light"] .player-avatar-stage {
  box-shadow: 0 6px 16px rgba(16, 32, 26, 0.1);
}

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

.club-avatar-img {
  object-fit: contain;
  padding: 7px;
}

.club-badge-overlay {
  position: absolute;
  bottom: -3px;
  right: -3px;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: var(--bg-surface);
  border: 2px solid var(--border-subtle);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.45);
}

.club-badge-overlay img {
  width: 21px;
  height: 21px;
  object-fit: contain;
}

/* Split Identity Row: Card Title on Left, Player/Club Name + Team on Right */
.card-identity-split {
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr);
  align-items: start;
  gap: 10px;
  padding-bottom: 12px;
  margin-bottom: 14px;
  border-bottom: 1px solid var(--border-subtle);
  min-width: 0;
  width: 100%;
  min-height: 56px;
  box-sizing: border-box;
}

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

.card-entity-pane {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  text-align: right;
  gap: 2px;
  min-width: 0;
  overflow: hidden;
}

.card-badges-group {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
  min-width: 0;
  margin-bottom: 4px;
}

.card-category-chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 3px 9px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.1);
  color: var(--text-muted);
  line-height: 1.2;
}

.card-category-chip.scope-chip {
  background: rgba(61, 220, 151, 0.14);
  border-color: rgba(61, 220, 151, 0.35);
  color: var(--accent-emerald);
}

.card-emoji-pill {
  font-size: 58px;
  line-height: 1;
  filter: drop-shadow(0 6px 14px rgba(0, 0, 0, 0.4));
  transition: transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  padding: 0;
}

.fut-card:hover .card-emoji-pill {
  transform: scale(1.15) rotate(8deg);
}

.card-title-text {
  font-family: var(--font-display); font-stretch: 112%;
  font-size: 15.5px;
  font-weight: 900;
  line-height: 1.25;
  letter-spacing: -0.015em;
  color: var(--accent-emerald);
  min-height: 2.6em; /* Exactly 2 lines reserved on every card for uniform baseline */
  max-height: 2.6em;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  word-break: break-word;
}

.fut-card.roast .card-title-text {
  color: #ff6b57;
}

:root[data-theme="light"] .fut-card.praise .card-title-text {
  color: #0f9a62;
}
:root[data-theme="light"] .fut-card.roast .card-title-text {
  color: #e11d48;
}

.entity-name {
  font-family: var(--font-display); font-stretch: 112%;
  font-size: 15.5px;
  font-weight: 800;
  color: var(--text-main);
  letter-spacing: -0.015em;
  line-height: 1.25;
  min-height: 2.6em; /* Exactly 2 lines reserved on every card for uniform baseline */
  max-height: 2.6em;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  word-break: break-word;
}

.entity-team {
  font-size: 12px;
  color: var(--card-player-team, var(--text-muted));
  font-weight: 600;
  opacity: 0.9;
  margin-top: 2px;
  max-width: 100%;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* 3 Key Metrics Row */
.card-metrics-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 6px;
  margin-bottom: 14px;
  width: 100%;
  min-width: 0;
  box-sizing: border-box;
}

.metric-pill {
  background: var(--card-metric-bg);
  border: 1px solid var(--card-metric-border);
  border-radius: var(--radius-sm);
  padding: 7px 2px;
  text-align: center;
  transition: var(--transition);
  min-height: 52px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  min-width: 0;
  max-width: 100%;
  width: 100%;
  overflow: hidden;
  box-sizing: border-box;
}

.metric-val {
  font-family: var(--font-display); font-stretch: 112%;
  font-size: 15px;
  font-weight: 900;
  color: var(--card-metric-val);
  line-height: 1.1;
  max-width: 100%;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  text-align: center;
}

.metric-lbl {
  font-size: 8.5px;
  color: var(--card-metric-lbl);
  font-weight: 700;
  text-transform: uppercase;
  margin-top: 3px;
  line-height: 1.15;
  letter-spacing: -0.01em;
  width: 100%;
  max-width: 100%;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  text-align: center;
}

/* Roast Quote Bubble */
.card-roast-quote {
  background: var(--card-roast-bg);
  border-left: 3.5px solid var(--card-border);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  padding: 10px 12px;
  margin-bottom: 14px;
  font-size: 12px;
  line-height: 1.4;
  color: var(--card-roast-text);
  font-style: italic;
  transition: var(--transition);
  min-height: 4.8em; /* Exactly 3 lines reserved for perfect uniform height */
  max-height: 4.8em;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  word-break: break-word;
  overflow-wrap: break-word;
  box-sizing: border-box;
  width: 100%;
}

/* Card Actions */
.card-bottom-actions {
  justify-content: flex-end;
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: auto;
  position: relative;
  z-index: 3;
  min-width: 0;
  pointer-events: none;
}
.card-bottom-actions :is(button, a) { pointer-events: auto; }

.card-btn {
  background: var(--bg-surface-elevated);
  border: 1px solid var(--border-subtle);
  color: var(--text-muted);
  padding: 9px 14px;
  border-radius: var(--radius-sm);
  font-size: 12.5px;
  font-weight: 700;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  transition: var(--transition);
  min-height: 44px;
  max-width: 100%;
  overflow-wrap: anywhere;
}

.card-btn:hover {
  background: var(--border-subtle);
  color: var(--text-main);
}

.card-btn.primary {
  flex: 1;
  background: linear-gradient(135deg, rgba(61, 220, 151, 0.18), rgba(61, 220, 151, 0.05));
  border-color: rgba(61, 220, 151, 0.35);
  color: var(--accent-emerald);
}
.card-btn.primary:hover {
  background: var(--accent-emerald);
  color: #04140c;
}

.fut-card.roast .card-btn.primary {
  background: linear-gradient(135deg, rgba(255, 90, 71, 0.16), rgba(255, 90, 71, 0.04));
  border-color: rgba(255, 90, 71, 0.35);
  color: #ff6b57;
}
.fut-card.roast .card-btn.primary:hover {
  background: var(--accent-crimson);
  color: #ffffff;
}

:root[data-theme="light"] .fut-card.roast .card-btn.primary {
  background: #fdecea;
  border-color: #fca5a5;
  color: #e03a2c;
}
:root[data-theme="light"] .fut-card.roast .card-btn.primary:hover {
  background: #e03a2c;
  border-color: #b3261e;
  color: #ffffff;
}

.card-icon-btn {
  background: var(--bg-surface-elevated);
  border: 1px solid var(--border-subtle);
  color: var(--text-muted);
  width: 44px;
  height: 44px;
  flex-shrink: 0;
  margin-block: -6px; /* Keep the existing action row height with a full touch target. */
  padding: 0;
  border-radius: var(--radius-sm);
  cursor: pointer;
  display: grid;
  place-items: center;
  font-size: 13px;
  transition: var(--transition);
}
.card-icon-btn:hover {
  border-color: var(--accent-emerald);
  color: var(--text-main);
  transform: translateY(-2px);
}

/* ==========================================================================
   "İstatistiğin Arka Yüzü" Modal
   ========================================================================== */
.modal-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(4, 7, 13, 0.85);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  z-index: 200;
  display: none;
  place-items: center;
  padding: 24px;
  overscroll-behavior: contain;
}

:root[data-theme="light"] .modal-backdrop {
  background: rgba(16, 32, 26, 0.55);
}

.modal-backdrop.open { display: grid; }

.modal-dialog {
  position: relative;
  background: var(--bg-surface);
  border: 1.5px solid var(--border-focus);
  border-radius: var(--radius-xl);
  max-width: 980px;
  width: 100%;
  max-height: min(90vh, calc(100dvh - 48px));
  overflow-y: auto;
  overflow-x: hidden;
  overscroll-behavior: contain;
  scrollbar-width: thin;
  scrollbar-color: var(--border-focus) var(--bg-surface);
  box-shadow: 0 25px 60px -15px rgba(0, 0, 0, 0.7);
  padding: 32px;
}

.modal-close {
  position: absolute;
  top: 20px;
  right: 20px;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--bg-surface-elevated);
  border: 1px solid var(--border-subtle);
  color: var(--text-muted);
  cursor: pointer;
  display: grid;
  place-items: center;
  font-size: 16px;
  transition: var(--transition);
  z-index: 20;
}
.modal-close:hover { color: var(--text-main); border-color: var(--accent-crimson); }

.modal-layout {
  display: grid;
  grid-template-columns: auto minmax(0, 380px) minmax(0, 1fr);
  gap: 28px;
  align-items: center;
}
.modal-layout > * { min-width: 0; max-width: 100%; }

/* Modal Vertical Scope Spine Ribbon (Far Left Edge) */
/* Minimal Sleek Vertical Scope Spine (Far Left Margin) */
.modal-vertical-scope-spine {
  writing-mode: vertical-rl;
  transform: rotate(180deg);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 12px 6px;
  background: transparent;
  border: none;
  border-left: 1.5px solid rgba(245, 180, 20, 0.35);
  font-family: var(--font-display); font-stretch: 112%;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  user-select: none;
  white-space: nowrap;
  max-height: 480px;
  align-self: center;
  opacity: 0.85;
  transition: opacity 0.2s ease, border-color 0.2s ease;
}

.modal-vertical-scope-spine:hover {
  opacity: 1;
}

.modal-vertical-scope-spine.spine-praise {
  border-left-color: rgba(245, 180, 20, 0.45);
  color: #f5b414;
}

.modal-vertical-scope-spine.spine-roast {
  border-left-color: rgba(255, 90, 71, 0.45);
  color: #ff8a7a;
}

.modal-vertical-scope-spine .modal-spine-line {
  display: inline;
  white-space: nowrap;
}

/* Modal Card Preview (Left Column) */
.modal-card-preview {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  position: relative;
}

.modal-winner-top-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 16px;
  border-radius: 999px;
  font-size: 11.5px;
  font-weight: 900;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.3);
}

.modal-winner-top-pill.pill-gold {
  background: linear-gradient(135deg, #f5c518, #c99a00);
  color: #0b0f19;
  border: 1px solid rgba(254, 240, 138, 0.85);
  box-shadow: 0 4px 18px rgba(245, 197, 24, 0.45);
}

.modal-winner-top-pill.pill-flame {
  background: linear-gradient(135deg, #ff5a47, #b3261e);
  color: #ffffff;
  border: 1px solid rgba(254, 202, 202, 0.7);
  box-shadow: 0 4px 18px rgba(255, 90, 71, 0.5);
}

/* 3D Card Flipper & Opening Pack Flip */
.modal-flipper-container {
  perspective: 1200px;
  width: 100%;
  max-width: 380px;
  cursor: pointer;
  user-select: none;
}

.modal-flipper-card {
  position: relative;
  width: 100%;
  aspect-ratio: 1080 / 1350;
  transform-style: preserve-3d;
  transition: transform 0.65s cubic-bezier(0.34, 1.56, 0.64, 1);
  border-radius: var(--radius-md);
}

.modal-flipper-card.is-flipped {
  transform: rotateY(180deg);
}

@keyframes openingCardFlip {
  0% {
    transform: rotateY(180deg) scale(0.96);
    animation-timing-function: ease-out;
  }
  44% {
    /* Holds the collectible BACK face clearly visible so user can appreciate artwork and icon */
    transform: rotateY(180deg) scale(1.02);
    animation-timing-function: cubic-bezier(0.55, 0.05, 0.75, 0.45); /* Swift acceleration, no thin edge hesitation */
  }
  74% {
    /* Passes briskly through edge-on profile */
    transform: rotateY(55deg) scale(1.03);
    animation-timing-function: cubic-bezier(0.12, 0.9, 0.28, 1.05); /* Clean, satisfying snap onto front face */
  }
  100% {
    transform: rotateY(0deg) scale(1);
  }
}

.modal-flipper-card.opening-flip {
  animation: openingCardFlip 1.35s linear forwards;
}

/* Modal Interactive Light Reflection Sheen Layer */
.modal-card-light-sheen {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.2s ease;
  mix-blend-mode: color-dodge;
  z-index: 5;
}

.flipper-face {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border-radius: var(--radius-md);
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  overflow: hidden;
}

.flipper-front {
  transform: rotateY(0deg);
}

.modal-card-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: var(--radius-md);
  display: block;
}

/* Gold Frame for Praise Card Winner */
.modal-card-preview.praise-gold-frame .modal-flipper-card {
  border: 2px solid #f5c518;
  box-shadow: 0 0 32px rgba(245, 197, 24, 0.38), 0 20px 48px rgba(0, 0, 0, 0.65);
}

/* Crimson / Ruby Flame Frame for Roast / Disaster Class Card */
.modal-card-preview.roast-danger-frame .modal-flipper-card {
  border: 2.5px solid #ff5a47;
  box-shadow: 0 0 36px rgba(255, 90, 71, 0.48), 0 20px 48px rgba(0, 0, 0, 0.7);
}

/* Collectible Card Back Face (Textless, Iconic 3D Shield & Football Crest) */
.flipper-back {
  transform: rotateY(180deg);
  background: radial-gradient(circle at 50% 50%, #151d27 0%, #0a0e14 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  border: 2px solid rgba(245, 180, 20, 0.7);
  box-shadow: inset 0 0 45px rgba(0, 0, 0, 0.85);
}
.flipper-back.back-roast {
  background: radial-gradient(circle at 50% 50%, #220b0e 0%, #090304 100%);
  border: 2px solid rgba(255, 90, 71, 0.85);
  box-shadow: inset 0 0 45px rgba(0, 0, 0, 0.9);
}

.card-back-ornament-frame {
  position: absolute;
  inset: 12px;
  border: 1.5px solid rgba(245, 180, 20, 0.45);
  border-radius: 12px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
.back-roast .card-back-ornament-frame {
  border-color: rgba(255, 90, 71, 0.55);
}

.card-back-inner-border {
  position: absolute;
  inset: 8px;
  border: 1px dashed rgba(245, 180, 20, 0.3);
  border-radius: 8px;
  pointer-events: none;
}
.back-roast .card-back-inner-border {
  border-color: rgba(255, 90, 71, 0.35);
}

.card-back-corner {
  position: absolute;
  width: 22px;
  height: 22px;
  border-color: #f5c518;
  border-style: solid;
  pointer-events: none;
}
.back-roast .card-back-corner {
  border-color: #ff5a47;
}
.card-back-corner.tl { top: 6px; left: 6px; border-width: 3.5px 0 0 3.5px; border-radius: 4px 0 0 0; }
.card-back-corner.tr { top: 6px; right: 6px; border-width: 3.5px 3.5px 0 0; border-radius: 0 4px 0 0; }
.card-back-corner.bl { bottom: 6px; left: 6px; border-width: 0 0 3.5px 3.5px; border-radius: 0 0 0 4px; }
.card-back-corner.br { bottom: 6px; right: 6px; border-width: 0 3.5px 3.5px 0; border-radius: 0 0 4px 0; }

.card-back-pattern {
  position: absolute;
  inset: 0;
  background-image: 
    radial-gradient(circle at 50% 50%, rgba(245, 180, 20, 0.1) 1.5px, transparent 1.5px),
    radial-gradient(circle at 0% 0%, rgba(245, 180, 20, 0.08) 1.5px, transparent 1.5px);
  background-size: 24px 24px;
  opacity: 0.65;
}
.back-roast .card-back-pattern {
  background-image: 
    radial-gradient(circle at 50% 50%, rgba(255, 90, 71, 0.12) 1.5px, transparent 1.5px),
    radial-gradient(circle at 0% 0%, rgba(255, 90, 71, 0.09) 1.5px, transparent 1.5px);
}

.card-back-emblem {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
}

.card-back-shield {
  position: relative;
  width: 140px;
  height: 140px;
  border-radius: 50%;
  background: radial-gradient(circle at 40% 30%, #2a3441 0%, #111720 70%, #070a0e 100%);
  border: 3.5px solid #f5c518;
  box-shadow: 
    0 0 32px rgba(245, 197, 24, 0.4),
    inset 0 4px 12px rgba(255, 255, 255, 0.3),
    inset 0 -6px 14px rgba(0, 0, 0, 0.85);
  display: flex;
  align-items: center;
  justify-content: center;
}
.back-roast .card-back-shield {
  background: radial-gradient(circle at 40% 30%, #3d1417 0%, #1f080a 70%, #0d0304 100%);
  border-color: #ff5a47;
  box-shadow: 
    0 0 36px rgba(255, 90, 71, 0.5),
    inset 0 4px 12px rgba(255, 255, 255, 0.3),
    inset 0 -6px 14px rgba(0, 0, 0, 0.9);
}

.card-back-ring {
  position: absolute;
  inset: 8px;
  border-radius: 50%;
  border: 1.5px dashed rgba(245, 197, 24, 0.55);
  animation: slowSpinBack 25s linear infinite;
}
.back-roast .card-back-ring {
  border-color: rgba(255, 90, 71, 0.65);
}
@keyframes slowSpinBack {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

.card-back-icon {
  font-size: 64px;
  line-height: 1;
  filter: drop-shadow(0 4px 12px rgba(0, 0, 0, 0.7));
  transform: translateZ(12px);
}

.card-back-stars {
  font-size: 18px;
  letter-spacing: 0.35em;
  color: #f5c518;
  text-shadow: 0 0 10px rgba(245, 197, 24, 0.65);
}
.back-roast .card-back-stars {
  color: #ff5a47;
  text-shadow: 0 0 10px rgba(255, 90, 71, 0.75);
}

.card-back-foil {
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, transparent 20%, rgba(255, 255, 255, 0.16) 45%, rgba(245, 180, 20, 0.22) 55%, transparent 75%);
  pointer-events: none;
  mix-blend-mode: overlay;
}
.back-roast .card-back-foil {
  background: linear-gradient(135deg, transparent 20%, rgba(255, 255, 255, 0.2) 45%, rgba(255, 90, 71, 0.26) 55%, transparent 75%);
}

/* Modal Flip Control Pill */
.modal-flip-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 16px;
  border-radius: 999px;
  background: var(--bg-surface-elevated);
  border: 1px solid var(--border-subtle);
  color: var(--text-muted);
  font-size: 11.5px;
  font-weight: 700;
  cursor: pointer;
  transition: var(--transition);
  min-height: 44px;
  max-width: 100%;
  overflow-wrap: anywhere;
}
.modal-flip-btn:hover {
  color: var(--text-main);
  border-color: var(--border-focus);
  transform: translateY(-1px);
}

.modal-scope-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  align-self: center;
  padding: 5px 14px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  background: var(--accent-emerald-surface);
  border: 1px solid rgba(61, 220, 151, 0.3);
  color: var(--accent-emerald);
}

:root[data-theme="light"] .modal-scope-pill {
  background: #e7f7ee;
  border-color: #9cf0cb;
  color: #0b7a4b;
}

.modal-layout.roast .modal-scope-pill {
  background: var(--accent-crimson-surface);
  border-color: rgba(255, 90, 71, 0.3);
  color: #ff7b6b;
}

:root[data-theme="light"] .modal-layout.roast .modal-scope-pill {
  background: #fdecea;
  border-color: #fca5a5;
  color: #b3261e;
}

/* Modal Right Column: Card Race / Runners-Up Stack (2nd & 3rd Only) */
.modal-data-breakdown {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 20px;
  padding: 6px 0;
}

.modal-podium-header {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--border-subtle);
}

.modal-podium-title-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.modal-podium-title {
  font-family: var(--font-display); font-stretch: 112%;
  font-size: 19px;
  font-weight: 900;
  letter-spacing: -0.01em;
  margin: 0;
  color: var(--text-main);
}

.modal-podium-chip {
  font-size: 11px;
  font-weight: 900;
  padding: 3px 10px;
  border-radius: 999px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}
.modal-podium-chip.chip-gold {
  background: rgba(245, 197, 24, 0.16);
  color: #f5c518;
  border: 1px solid rgba(245, 197, 24, 0.4);
}
.modal-podium-chip.chip-roast {
  background: rgba(255, 90, 71, 0.16);
  color: #ff5a47;
  border: 1px solid rgba(255, 90, 71, 0.4);
}

.modal-podium-subtitle {
  font-size: 12.5px;
  color: var(--text-muted);
  font-weight: 600;
}

.modal-podium-stack {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.podium-card {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 16px 20px;
  border-radius: var(--radius-md);
  transition: var(--transition);
  position: relative;
  background: var(--card-metric-bg);
  border: 1.5px solid var(--border-subtle);
}
.podium-card:hover {
  transform: translateX(4px);
}

/* Tier Themes for Runners-Up */
.podium-card.tier-silver {
  background: linear-gradient(135deg, rgba(148, 163, 184, 0.12), rgba(100, 116, 139, 0.03));
  border: 1.5px solid rgba(148, 163, 184, 0.55);
  box-shadow: 0 4px 14px rgba(148, 163, 184, 0.12);
}
:root[data-theme="light"] .podium-card.tier-silver {
  background: linear-gradient(135deg, #f6f3ea, #efebdf);
  border-color: #a8b7ad;
}

.podium-card.tier-bronze {
  background: linear-gradient(135deg, rgba(201, 154, 0, 0.11), rgba(180, 83, 9, 0.03));
  border: 1.5px solid rgba(201, 154, 0, 0.55);
  box-shadow: 0 4px 14px rgba(201, 154, 0, 0.12);
}
:root[data-theme="light"] .podium-card.tier-bronze {
  background: linear-gradient(135deg, #fff7ed, #ffedd5);
  border-color: #c99a00;
}

/* Roast Cards Runners-Up: Pure Crimson & Ruby Progression */
.podium-card.tier-roast-2 {
  background: linear-gradient(135deg, rgba(255, 90, 71, 0.16), rgba(185, 28, 28, 0.05));
  border: 1.5px solid rgba(255, 90, 71, 0.65);
  box-shadow: 0 4px 16px rgba(255, 90, 71, 0.18);
}
:root[data-theme="light"] .podium-card.tier-roast-2 {
  background: linear-gradient(135deg, #fdecea, #fee2e2);
  border-color: #ff5a47;
}

.podium-card.tier-roast-3 {
  background: linear-gradient(135deg, rgba(224, 58, 44, 0.12), rgba(127, 29, 29, 0.04));
  border: 1.5px solid rgba(224, 58, 44, 0.5);
  box-shadow: 0 4px 14px rgba(224, 58, 44, 0.14);
}
:root[data-theme="light"] .podium-card.tier-roast-3 {
  background: linear-gradient(135deg, #fff5f5, #fed7d7);
  border-color: #e03a2c;
}

.podium-rank-tag {
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--text-muted);
  display: flex;
  align-items: center;
  gap: 4px;
}
.tier-silver .podium-rank-tag { color: #a8b7ad; }
.tier-bronze .podium-rank-tag { color: #c99a00; }
.tier-roast-2 .podium-rank-tag { color: #ff5a47; }
.tier-roast-3 .podium-rank-tag { color: #ff8a7a; }

.podium-player-row {
  display: flex;
  align-items: center;
  gap: 14px;
}

.podium-avatar-wrapper {
  position: relative;
  width: 48px;
  height: 48px;
  flex-shrink: 0;
}

.podium-avatar-img {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  object-fit: cover;
  background: var(--bg-surface-elevated);
  border: 1.5px solid var(--border-subtle);
  display: block;
}

.podium-team-badge {
  position: absolute;
  bottom: -3px;
  right: -3px;
  width: 19px;
  height: 19px;
  border-radius: 50%;
  background: var(--bg-surface);
  padding: 1px;
  object-fit: contain;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.35);
  border: 1px solid var(--border-subtle);
}

.podium-player-info {
  display: flex;
  flex-direction: column;
  min-width: 0;
  flex: 1;
}

.podium-player-name {
  font-family: var(--font-display); font-stretch: 112%;
  font-size: 16.5px;
  font-weight: 800;
  color: var(--text-main);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  line-height: 1.25;
}

.podium-player-team {
  font-size: 12.5px;
  font-weight: 600;
  color: var(--text-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  margin-top: 2px;
}

.podium-score-col {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  justify-content: center;
  flex-shrink: 0;
}

.podium-score-val {
  font-family: var(--font-display); font-stretch: 112%;
  font-size: 20px;
  font-weight: 900;
  color: var(--text-main);
  line-height: 1;
}

.podium-score-lbl {
  font-size: 10px;
  font-weight: 800;
  text-transform: uppercase;
  color: var(--text-muted);
  letter-spacing: 0.04em;
  margin-top: 3px;
}

.podium-empty-note {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 24px;
  border-radius: var(--radius-md);
  background: var(--bg-surface);
  border: 1px dashed var(--border-subtle);
  color: var(--text-muted);
  font-size: 13px;
  font-weight: 700;
}

.podium-player-row {
  display: flex;
  align-items: center;
  gap: 14px;
}

.podium-avatar-wrapper {
  position: relative;
  width: 44px;
  height: 44px;
  flex-shrink: 0;
}

.podium-avatar-img {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  object-fit: cover;
  background: var(--bg-surface-elevated);
  border: 1.5px solid var(--border-subtle);
  display: block;
}

.podium-team-badge {
  position: absolute;
  bottom: -3px;
  right: -3px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--bg-surface);
  padding: 1px;
  object-fit: contain;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.35);
  border: 1px solid var(--border-subtle);
}

.podium-player-info {
  display: flex;
  flex-direction: column;
  min-width: 0;
  flex: 1;
}

.podium-player-name {
  font-family: var(--font-display); font-stretch: 112%;
  font-size: 16px;
  font-weight: 800;
  color: var(--text-main);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  line-height: 1.25;
}

.podium-player-team {
  font-size: 12.5px;
  font-weight: 600;
  color: var(--text-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  margin-top: 2px;
}

.podium-score-col {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  justify-content: center;
  flex-shrink: 0;
}

.podium-score-val {
  font-family: var(--font-display); font-stretch: 112%;
  font-size: 19px;
  font-weight: 900;
  color: var(--text-main);
  line-height: 1;
}

.podium-score-lbl {
  font-size: 10px;
  font-weight: 800;
  text-transform: uppercase;
  color: var(--text-muted);
  letter-spacing: 0.04em;
  margin-top: 3px;
}

.podium-empty-note {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 20px;
  border-radius: var(--radius-md);
  background: var(--bg-surface);
  border: 1px dashed var(--border-subtle);
  color: var(--text-muted);
  font-size: 13px;
  font-weight: 700;
}

/* ==========================================================================
   Footer
   ========================================================================== */
.app-footer {
  margin-top: auto;
  background: var(--bg-main);
  border-top: 1px solid var(--border-subtle);
  padding: 30px 0;
}

.footer-content {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  flex-wrap: wrap;
}

.footer-title {
  font-size: 14.5px;
  color: var(--text-main);
  margin-bottom: 4px;
}

.footer-note {
  font-size: 12px;
  color: var(--text-muted);
  max-width: 650px;
}

.verified-data-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: var(--bg-surface);
  border: 1px solid var(--border-subtle);
  padding: 8px 16px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 700;
  color: var(--accent-emerald);
}

.check-icon {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--accent-emerald);
  color: #04140c;
  display: grid;
  place-items: center;
  font-size: 11px;
  font-weight: 900;
}

/* Empty State / Loader */
.empty-deck {
  grid-column: 1 / -1;
  text-align: center;
  padding: 60px 20px;
  background: var(--bg-surface);
  border: 1px dashed var(--border-subtle);
  border-radius: var(--radius-lg);
  color: var(--text-muted);
}
.empty-deck h3 { color: var(--text-main); margin-bottom: 8px; }

.loading-deck {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 240px), 1fr));
  gap: 24px;
  min-width: 0;
}
.loading-deck > :not(.card-skeleton) { grid-column: 1 / -1; color: var(--text-muted); }
.card-skeleton {
  min-height: 420px;
  border-radius: var(--radius-lg);
  border: 1px solid var(--border-subtle);
  background: linear-gradient(150deg, var(--bg-surface-elevated), var(--bg-surface) 65%);
}
.load-error {
  grid-column: 1 / -1;
  padding: 28px 20px;
  border: 1px solid var(--roast-border);
  border-radius: var(--radius-lg);
  background: var(--bg-surface);
  text-align: center;
  overflow-wrap: anywhere;
}
.load-error p { color: var(--text-muted); margin: 8px 0 16px; }
.translation-emergency {
  max-width: 640px;
  margin: 48px auto;
  padding: 24px;
  overflow-wrap: anywhere;
}
.translation-emergency p { color: var(--text-muted); margin: 12px 0 20px; }
:is(.load-error, .translation-emergency) button {
  min-height: 44px;
  max-width: 100%;
  padding: 10px 18px;
  border: 1px solid var(--accent-emerald);
  border-radius: var(--radius-sm);
  background: var(--bg-surface-elevated);
  color: var(--text-main);
  font: inherit;
  font-weight: 700;
  cursor: pointer;
}

/* Toast Notification Popup */
.toast-popup {
  position: fixed;
  bottom: 28px;
  right: 28px;
  background: var(--bg-surface-elevated);
  border: 1px solid var(--accent-emerald);
  color: var(--text-main);
  padding: 12px 22px;
  border-radius: 999px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.45);
  font-weight: 700;
  font-size: 13.5px;
  display: flex;
  align-items: center;
  gap: 8px;
  z-index: 1000;
  transform: translateY(100px);
  opacity: 0;
  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
  pointer-events: none;
  max-width: calc(100% - 32px);
  overflow-wrap: anywhere;
}
.toast-popup.show {
  transform: translateY(0);
  opacity: 1;
}

/* Mobile Bottom Navigation Bar (PWA / Native App Feel) */
.mobile-bottom-bar {
  display: none;
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  background: var(--bg-glass);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border-top: 1px solid var(--border-subtle);
  padding: 8px max(6px, env(safe-area-inset-right, 0px)) calc(8px + env(safe-area-inset-bottom, 0px)) max(6px, env(safe-area-inset-left, 0px));
  z-index: 150;
  justify-content: space-between;
  align-items: stretch;
}

.mobile-nav-btn {
  background: transparent;
  border: none;
  color: var(--text-muted);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  font-size: 11px;
  font-weight: 700;
  cursor: pointer;
  padding: 4px 3px;
  border-radius: var(--radius-sm);
  transition: var(--transition);
  flex: 1 1 0;
  min-width: 0;
  min-height: 52px;
  justify-content: center;
  line-height: 1.25;
  overflow-wrap: anywhere;
}
.mobile-nav-lbl { max-width: 100%; }

.mobile-nav-btn.active {
  color: var(--accent-emerald);
}

.mobile-nav-ico {
  font-size: 19px;
  line-height: 1;
}

.modal-share-footer {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding-top: 14px;
  border-top: 1px solid var(--border-subtle);
}

/* Modal Viral Actions */
.modal-viral-actions {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.modal-action-btn {
  background: var(--bg-surface-elevated);
  border: 1.5px solid var(--border-subtle);
  color: var(--text-main);
  padding: 13px 18px;
  border-radius: var(--radius-md);
  font-size: 13.5px;
  font-weight: 800;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  transition: var(--transition);
  text-decoration: none;
  min-height: 44px;
  min-width: 0;
  overflow-wrap: anywhere;
}
.modal-action-btn:hover {
  background: var(--border-subtle);
  border-color: var(--border-focus);
  transform: translateY(-1px);
}
.modal-action-btn.primary-action {
  background: var(--accent-emerald);
  color: #04140c;
  border-color: var(--accent-emerald);
  box-shadow: 0 4px 14px rgba(61, 220, 151, 0.25);
}
.modal-action-btn.primary-action:hover {
  background: #3ddc97;
  border-color: #6fe8b5;
  box-shadow: 0 6px 18px rgba(61, 220, 151, 0.35);
  color: #04140c;
}
.modal-action-btn.secondary-action {
  background: var(--bg-surface-elevated);
  color: var(--text-main);
  border: 1.5px solid var(--border-subtle);
}
.modal-action-btn.secondary-action:hover {
  background: var(--border-subtle);
  border-color: var(--border-focus);
}

/* ==========================================================================
   Thematic Collectible Card Borders & Corner Filigrees (Role-Specific)
   ========================================================================== */
.card-thematic-border {
  position: absolute;
  inset: 6px;
  border-radius: calc(var(--radius-lg) - 4px);
  pointer-events: none;
  z-index: 4;
  transition: all 0.25s ease;
  box-sizing: border-box;
}

/* Modal Card Front variant */
.flipper-front .card-thematic-border {
  inset: 8px;
  border-radius: calc(var(--radius-md) - 4px);
}

/* Corner Filigree Base */
.corner-filigree {
  position: absolute;
  width: 16px;
  height: 16px;
  pointer-events: none;
  transition: all 0.25s ease;
  box-sizing: border-box;
}

.corner-filigree.top-left {
  top: 0;
  left: 0;
  border-top: 2px solid currentColor;
  border-left: 2px solid currentColor;
  border-top-left-radius: 4px;
}

.corner-filigree.top-right {
  top: 0;
  right: 0;
  border-top: 2px solid currentColor;
  border-right: 2px solid currentColor;
  border-top-right-radius: 4px;
}

.corner-filigree.bottom-left {
  bottom: 0;
  left: 0;
  border-bottom: 2px solid currentColor;
  border-left: 2px solid currentColor;
  border-bottom-left-radius: 4px;
}

.corner-filigree.bottom-right {
  bottom: 0;
  right: 0;
  border-bottom: 2px solid currentColor;
  border-right: 2px solid currentColor;
  border-bottom-right-radius: 4px;
}

/* 1. Theme: Savunma (Fortified Steel, Rivets, Shield Armor) */
.card-thematic-border.theme-savunma {
  border: 1px dashed rgba(56, 189, 248, 0.28);
  color: #38bdf8;
}
.card-thematic-border.theme-savunma.tone-n {
  border-color: rgba(255, 90, 71, 0.32);
  color: #ff5a47;
}
.card-thematic-border.theme-savunma .corner-filigree::after {
  content: '';
  position: absolute;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: currentColor;
  box-shadow: 0 0 6px currentColor;
}
.card-thematic-border.theme-savunma .corner-filigree.top-left::after { top: 2px; left: 2px; }
.card-thematic-border.theme-savunma .corner-filigree.top-right::after { top: 2px; right: 2px; }
.card-thematic-border.theme-savunma .corner-filigree.bottom-left::after { bottom: 2px; left: 2px; }
.card-thematic-border.theme-savunma .corner-filigree.bottom-right::after { bottom: 2px; right: 2px; }

/* 2. Theme: Hucum (Aggressive Dagger / Striker Notches) */
.card-thematic-border.theme-hucum {
  border: 1px solid rgba(245, 197, 24, 0.3);
  color: #f5c518;
}
.card-thematic-border.theme-hucum.tone-n {
  border-color: rgba(244, 63, 94, 0.35);
  color: #f43f5e;
}
.card-thematic-border.theme-hucum .corner-filigree {
  width: 18px;
  height: 18px;
  border-width: 2.5px;
}

/* 3. Theme: Pas (Blueprint Target Reticle, Precision Grid Crosshairs) */
.card-thematic-border.theme-pas {
  border: 1px solid rgba(61, 220, 151, 0.28);
  color: #3ddc97;
}
.card-thematic-border.theme-pas.tone-n {
  border-color: rgba(249, 115, 22, 0.35);
  color: #f97316;
}
.card-thematic-border.theme-pas .corner-filigree {
  width: 18px;
  height: 18px;
}
.card-thematic-border.theme-pas .corner-filigree::before {
  content: '';
  position: absolute;
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: currentColor;
}
.card-thematic-border.theme-pas .corner-filigree.top-left::before { top: 3px; left: 3px; }
.card-thematic-border.theme-pas .corner-filigree.top-right::before { top: 3px; right: 3px; }
.card-thematic-border.theme-pas .corner-filigree.bottom-left::before { bottom: 3px; left: 3px; }
.card-thematic-border.theme-pas .corner-filigree.bottom-right::before { bottom: 3px; right: 3px; }

/* 4. Theme: Kaleci (Crossbar Padlock, Iron Gate Frames) */
.card-thematic-border.theme-kaleci {
  border: 1.5px solid rgba(234, 179, 8, 0.32);
  color: #eab308;
}
.card-thematic-border.theme-kaleci.tone-n {
  border-color: rgba(224, 58, 44, 0.4);
  color: #e03a2c;
}
.card-thematic-border.theme-kaleci .corner-filigree {
  width: 20px;
  height: 20px;
  border-width: 3px;
  border-radius: 2px;
}

/* 5. Theme: Finans (banknotes, vault guilloche clips) */
.card-thematic-border.theme-finans {
  border: 1px double rgba(52, 211, 153, 0.38);
  color: #6fe8b5;
}
.card-thematic-border.theme-finans.tone-n {
  border: 1px double rgba(251, 191, 36, 0.45);
  color: #ffd84d;
}
.card-thematic-border.theme-finans .corner-filigree {
  border-width: 2px;
  box-shadow: 0 0 8px currentColor;
}

/* 6. Theme: Kulup (Regal Stadium Heraldry, Double Pinstripes) */
.card-thematic-border.theme-kulup {
  border: 2px solid rgba(168, 85, 247, 0.3);
  color: #c084fc;
}
.card-thematic-border.theme-kulup.tone-n {
  border-color: rgba(255, 90, 71, 0.35);
  color: #ff5a47;
}
.card-thematic-border.theme-kulup .corner-filigree {
  width: 20px;
  height: 20px;
  border-width: 2.5px;
}

/* 7. Theme: Genel (Classic Ornate Collectible CCG Filigree) */
.card-thematic-border.theme-genel {
  border: 1px solid rgba(245, 180, 20, 0.22);
  color: #f5b414;
}
.card-thematic-border.theme-genel.tone-n {
  border-color: rgba(255, 90, 71, 0.25);
  color: #ff5a47;
}

/* Card Hover Accent Glow for Thematic Borders */
.fut-card:hover .card-thematic-border {
  opacity: 1;
  filter: drop-shadow(0 0 6px currentColor);
}


/* ==========================================================================
   Authentic Card Material Textures (Metallic, Wood, Artwork, Blueprint, Vault, Ironwork)
   ========================================================================== */

/* 1. Metallic (Titanium Steel / Armor Plate / Hard Defense) */
.fut-card.texture-metallic,
.flipper-front.texture-metallic {
  background:
    repeating-linear-gradient(135deg, rgba(255, 255, 255, 0.02) 0px, rgba(255, 255, 255, 0.02) 1px, transparent 1px, transparent 3px),
    linear-gradient(160deg, #1c2630 0%, #131b22 50%, #0d1217 100%) !important;
  border-color: rgba(148, 163, 184, 0.45) !important;
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.6), inset 0 1px 0 rgba(255, 255, 255, 0.12) !important;
}
.fut-card.texture-metallic:hover {
  border-color: #38bdf8 !important;
  box-shadow: 0 20px 48px rgba(0, 0, 0, 0.7), 0 0 25px rgba(56, 189, 248, 0.35) !important;
}

/* 2. Wood (Rustic Dark Walnut / Tavern Plank / Butcher Block / Savage Roasts) */
.fut-card.texture-wood,
.flipper-front.texture-wood {
  background:
    repeating-linear-gradient(90deg, rgba(0, 0, 0, 0.18) 0px, rgba(0, 0, 0, 0.18) 2px, transparent 2px, transparent 8px),
    repeating-linear-gradient(0deg, rgba(255, 255, 255, 0.015) 0px, rgba(255, 255, 255, 0.015) 1px, transparent 1px, transparent 4px),
    linear-gradient(160deg, #2b170e 0%, #1e1009 50%, #130a06 100%) !important;
  border-color: rgba(201, 154, 0, 0.45) !important;
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.65), inset 0 1px 0 rgba(245, 197, 24, 0.15) !important;
}
.fut-card.texture-wood:hover {
  border-color: #f5c518 !important;
  box-shadow: 0 20px 48px rgba(0, 0, 0, 0.75), 0 0 28px rgba(201, 154, 0, 0.4) !important;
}

/* 3. Artwork (Gilded Canvas / Obsidian Marble & Gold Leaf / Star Goalscorers & Dribblers) */
.fut-card.texture-artwork,
.flipper-front.texture-artwork {
  background:
    radial-gradient(circle at 85% 15%, rgba(245, 180, 20, 0.14), transparent 45%),
    radial-gradient(circle at 15% 85%, rgba(61, 220, 151, 0.08), transparent 45%),
    linear-gradient(160deg, #141c18 0%, #0d1210 50%, #060908 100%) !important;
  border-color: rgba(245, 180, 20, 0.55) !important;
  box-shadow: 0 14px 36px rgba(0, 0, 0, 0.7), inset 0 1px 1px rgba(254, 240, 138, 0.25) !important;
}
.fut-card.texture-artwork:hover {
  border-color: #ffd84d !important;
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.75), 0 0 32px rgba(245, 180, 20, 0.45) !important;
}

/* 4. Blueprint (Tactical Coordinate Grid / Playmaker Architects & Passers) */
.fut-card.texture-blueprint,
.flipper-front.texture-blueprint {
  background:
    linear-gradient(rgba(14, 165, 233, 0.07) 1px, transparent 1px),
    linear-gradient(90deg, rgba(14, 165, 233, 0.07) 1px, transparent 1px),
    linear-gradient(160deg, #0f1c24 0%, #091319 50%, #050a0e 100%) !important;
  background-size: 18px 18px, 18px 18px, 100% 100% !important;
  border-color: rgba(14, 165, 233, 0.45) !important;
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.6), inset 0 1px 0 rgba(56, 189, 248, 0.2) !important;
}
.fut-card.texture-blueprint:hover {
  border-color: #38bdf8 !important;
  box-shadow: 0 20px 48px rgba(0, 0, 0, 0.7), 0 0 28px rgba(14, 165, 233, 0.38) !important;
}

/* 5. Vault (guilloche banknote watermark / payroll and salaries) */
.fut-card.texture-vault,
.flipper-front.texture-vault {
  background:
    repeating-linear-gradient(60deg, rgba(52, 211, 153, 0.025) 0px, rgba(52, 211, 153, 0.025) 2px, transparent 2px, transparent 5px),
    repeating-linear-gradient(120deg, rgba(251, 191, 36, 0.02) 0px, rgba(251, 191, 36, 0.02) 2px, transparent 2px, transparent 5px),
    linear-gradient(160deg, #0e1e17 0%, #08140f 50%, #040a08 100%) !important;
  border-color: rgba(52, 211, 153, 0.5) !important;
  box-shadow: 0 12px 34px rgba(0, 0, 0, 0.65), inset 0 1px 0 rgba(52, 211, 153, 0.25) !important;
}
.fut-card.texture-vault:hover {
  border-color: #3ddc97 !important;
  box-shadow: 0 20px 48px rgba(0, 0, 0, 0.7), 0 0 28px rgba(61, 220, 151, 0.4) !important;
}

/* 6. Ironwork (Gothic Goal Cage / Goalkeeper Crossbar Lattice) */
.fut-card.texture-ironwork,
.flipper-front.texture-ironwork {
  background:
    radial-gradient(circle at 50% 50%, rgba(234, 179, 8, 0.06), transparent 70%),
    repeating-linear-gradient(45deg, rgba(255, 255, 255, 0.02) 0px, rgba(255, 255, 255, 0.02) 1px, transparent 1px, transparent 8px),
    repeating-linear-gradient(-45deg, rgba(255, 255, 255, 0.02) 0px, rgba(255, 255, 255, 0.02) 1px, transparent 1px, transparent 8px),
    linear-gradient(160deg, #1f1b12 0%, #14110a 50%, #0a0805 100%) !important;
  border-color: rgba(234, 179, 8, 0.5) !important;
  box-shadow: 0 12px 34px rgba(0, 0, 0, 0.65), inset 0 1px 0 rgba(234, 179, 8, 0.2) !important;
}
.fut-card.texture-ironwork:hover {
  border-color: #facc15 !important;
  box-shadow: 0 20px 48px rgba(0, 0, 0, 0.7), 0 0 28px rgba(234, 179, 8, 0.4) !important;
}

/* Responsive adjustments */
@media (max-width: 900px) {
  .modal-layout { grid-template-columns: 1fr; gap: 20px; }
  .modal-vertical-scope-spine {
    writing-mode: horizontal-tb;
    transform: none;
    flex-direction: row;
    max-height: none;
    padding: 6px 12px;
    width: 100%;
    justify-content: center;
    font-size: 11px;
    border-left: none;
    border-bottom: 1.5px solid rgba(245, 180, 20, 0.35);
  }
  .modal-vertical-scope-spine.spine-roast {
    border-bottom-color: rgba(255, 90, 71, 0.4);
  }
  .header-metrics { display: none; }
}

/* ==========================================================================
   View Mode Switcher Button & Team Deck Grouping (Fan-Out Overlapping Stacks)
   ========================================================================== */
.view-mode-pill {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  background: var(--bg-hover);
  border: 1px solid var(--border-color);
  color: var(--text-color);
  padding: 6px 14px;
  border-radius: 999px;
  font-size: 0.82rem;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.2s ease;
  user-select: none;
  min-height: 44px;
  min-width: 0;
  max-width: 100%;
  overflow-wrap: anywhere;
}
.view-mode-pill:hover {
  background: rgba(234, 179, 8, 0.15);
  border-color: rgba(234, 179, 8, 0.4);
  color: var(--gold-light, #fbe9a0);
  transform: translateY(-1px);
}
.view-mode-pill .v-icon {
  font-size: 1rem;
}

/* Container in Deck Mode (Smart Responsive Multi-Column Layout) */
.cards-grid.view-decks {
  display: grid !important;
  grid-template-columns: repeat(auto-fill, minmax(540px, 1fr)) !important;
  gap: 28px !important;
  align-items: start !important;
  width: 100% !important;
}

@media (max-width: 900px) {
  .cards-grid.view-decks {
    grid-template-columns: 1fr !important;
  }
}

.team-deck-block {
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.02) 0%, rgba(0, 0, 0, 0.25) 100%);
  border: 1px solid var(--border-color);
  border-radius: 18px;
  padding: 20px 22px;
  position: relative;
  overflow: visible;
  transition: border-color 0.25s ease, box-shadow 0.25s ease;
  min-width: 0;
  box-sizing: border-box;
}

.team-deck-block.span-large {
  grid-column: 1 / -1;
}

.team-deck-block:hover {
  border-color: rgba(245, 180, 20, 0.3);
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.3);
}

.team-deck-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 14px;
  padding-bottom: 12px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
  gap: 10px;
  flex-wrap: wrap;
}

.team-deck-brand {
  display: flex;
  align-items: center;
  gap: 14px;
  min-width: 0;
}

.team-deck-crest {
  width: 40px;
  height: 40px;
  object-fit: contain;
  filter: drop-shadow(0 4px 10px rgba(0,0,0,0.5));
  flex-shrink: 0;
}

.team-deck-title {
  font-size: 1.18rem;
  font-weight: 800;
  color: var(--text-color);
  letter-spacing: -0.02em;
  margin: 0;
  overflow-wrap: anywhere;
}

.team-deck-badge {
  font-size: 0.8rem;
  font-weight: 700;
  padding: 5px 14px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.05);
  color: var(--text-muted);
  border: 1px solid var(--border-color);
  letter-spacing: 0.02em;
}

/* Fan Deck for Teams with 2+ Cards */
.team-card-deck.fan-deck {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  padding: 54px 16px 32px 16px;
  margin-top: -24px;
  overflow-x: auto;
  overflow-y: visible;
  scroll-behavior: auto;
  position: relative;
  scrollbar-width: none;            /* no visible bar: the stack scrolls when the pointer nears its edges */
  -ms-overflow-style: none;
  max-width: 100%;
  overscroll-behavior-x: contain;
}
.team-card-deck.fan-deck::-webkit-scrollbar { display: none; }

.team-card-deck.fan-deck .fut-card {
  flex: 0 0 310px;
  width: 310px;
  transition: transform 0.35s cubic-bezier(0.2, 0.9, 0.3, 1.2), box-shadow 0.35s ease, z-index 0s;
  cursor: pointer;
  position: relative;
  transform: rotate(var(--fan-rot, 0deg));
}

.team-card-deck.fan-deck .fut-card:not(:first-child) {
  margin-left: -135px;
}

.team-card-deck.fan-deck .fut-card:hover {
  transform: translateY(-20px) scale(1.03) rotate(0deg) !important;
  z-index: 80 !important;
  box-shadow: 0 32px 64px rgba(0, 0, 0, 0.95), 0 0 35px rgba(234, 179, 8, 0.45) !important;
}

/* Single-card team deck */
.team-card-deck.single-card {
  display: flex;
  justify-content: flex-start;
  padding: 8px 0;
}
.team-card-deck.single-card .fut-card {
  max-width: 310px;
  width: 100%;
}

/* ==========================================================================
   Cross-League Archetype Comparison Arena ("⚔️ Kart Arenası")
   ========================================================================== */
.arena-leagues-strip {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  padding: 10px 16px;
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  width: 100%;
}
.arena-strip-title {
  font-weight: 800;
  font-size: 0.88rem;
  color: var(--accent-gold);
  margin-right: 4px;
}
.arena-league-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 0.82rem;
  font-weight: 700;
  background: var(--bg-surface-elevated);
  padding: 5px 12px;
  border-radius: 999px;
  color: var(--text-main);
  border: 1px solid var(--border-subtle);
}
.arena-league-chip .league-logo-img {
  width: 16px;
  height: 16px;
  object-fit: contain;
}

.archetype-controls-bar {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
}

.arch-mode-switch {
  display: inline-flex;
  background: var(--bg-surface-elevated);
  border: 1px solid var(--border-subtle);
  border-radius: 999px;
  padding: 3px;
  gap: 4px;
  max-width: 100%;
  flex-wrap: wrap;
}
.arch-mode-btn {
  background: transparent;
  border: none;
  color: var(--text-muted);
  font-size: 0.82rem;
  font-weight: 700;
  padding: 6px 14px;
  border-radius: 999px;
  cursor: pointer;
  transition: all 0.2s ease;
  min-height: 44px;
  min-width: 0;
  overflow-wrap: anywhere;
}
.arch-mode-btn.active {
  background: linear-gradient(135deg, #f5c518, #c99a00);
  color: #000;
  box-shadow: 0 2px 8px rgba(245, 197, 24, 0.35);
}

.arch-cat-filter {
  display: inline-flex;
  gap: 6px;
  flex-wrap: wrap;
}
.arch-cat-chip {
  background: var(--bg-surface-elevated);
  border: 1px solid var(--border-subtle);
  color: var(--text-muted);
  font-size: 0.78rem;
  font-weight: 700;
  padding: 5px 12px;
  border-radius: 999px;
  cursor: pointer;
  transition: all 0.2s ease;
  min-height: 44px;
  max-width: 100%;
  overflow-wrap: anywhere;
}
.arch-cat-chip.active {
  background: rgba(61, 220, 151, 0.18);
  color: #6fe8b5;
  border-color: var(--accent-emerald);
}
.arch-cat-chip:hover:not(.active) {
  background: rgba(255, 255, 255, 0.06);
  color: var(--text-main);
  border-color: var(--border-focus);
}

.archetype-arena-wrap {
  display: flex;
  flex-direction: column;
  gap: 48px;
}

.archetype-stage {
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.02) 0%, rgba(10, 15, 25, 0.6) 100%);
  border: 1.5px solid var(--border-color);
  border-radius: 24px;
  padding: 28px;
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.4);
  position: relative;
  overflow: visible;
}
.archetype-stage.stage-praise {
  border-color: rgba(245, 180, 20, 0.25);
}
.archetype-stage.stage-roast {
  border-color: rgba(255, 90, 71, 0.25);
}

.stage-banner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 24px;
  padding-bottom: 16px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  flex-wrap: wrap;
}
.stage-banner-left {
  display: flex;
  align-items: center;
  gap: 16px;
  min-width: 0;
  max-width: 100%;
}
.stage-emoji {
  font-size: 2.2rem;
  line-height: 1;
  filter: drop-shadow(0 4px 10px rgba(0,0,0,0.5));
  flex-shrink: 0;
}
.stage-heading-block {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
  overflow-wrap: anywhere;
}
.stage-title-row {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}
.stage-title {
  font-size: 1.35rem;
  font-weight: 850;
  color: var(--text-color);
  letter-spacing: -0.02em;
  margin: 0;
  overflow-wrap: anywhere;
}
.stage-cat-pill {
  font-size: 0.75rem;
  font-weight: 750;
  padding: 3px 10px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.08);
  color: var(--text-muted);
}
.stage-contender-count {
  font-size: 0.75rem;
  font-weight: 750;
  padding: 3px 10px;
  border-radius: 999px;
  background: rgba(234, 179, 8, 0.12);
  color: var(--gold-light, #fbe9a0);
  border: 1px solid rgba(234, 179, 8, 0.25);
}
.stage-tagline {
  font-size: 0.88rem;
  color: var(--text-muted);
  font-style: italic;
  margin: 0;
}
.stage-domestic-pill {
  font-size: 0.78rem;
  font-weight: 700;
  padding: 5px 12px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.04);
  color: var(--text-muted);
  border: 1px solid rgba(255, 255, 255, 0.06);
}

.stage-duel-grid {
  display: grid;
  grid-template-columns: 340px minmax(0, 1fr);
  gap: 32px;
  align-items: start;
}
.stage-duel-grid > * { min-width: 0; }

/* Left Column: Apex Winner Showcase */
.stage-apex-col {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.apex-header-strip {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: linear-gradient(135deg, rgba(234, 179, 8, 0.2) 0%, rgba(201, 154, 0, 0.1) 100%);
  border: 1px solid rgba(234, 179, 8, 0.4);
  padding: 7px 14px;
  border-radius: 12px;
}
.apex-crown-ico {
  font-size: 1.2rem;
  filter: drop-shadow(0 2px 6px rgba(234, 179, 8, 0.5));
}
.apex-strip-label {
  font-size: 0.8rem;
  font-weight: 900;
  letter-spacing: 0.05em;
  color: #fbe9a0;
  text-transform: uppercase;
}
.apex-score-badge {
  font-size: 0.78rem;
  font-weight: 800;
  background: #f5c518;
  color: #000;
  padding: 2px 8px;
  border-radius: 999px;
}

.apex-card-stage-wrap {
  position: relative;
}
.apex-league-watermark {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 8px;
  font-size: 0.82rem;
  font-weight: 800;
  color: var(--text-muted);
}
.apex-champion-card {
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.7), 0 0 30px rgba(234, 179, 8, 0.35) !important;
  border-color: rgba(234, 179, 8, 0.7) !important;
}

/* Right Column: Contenders Podium List */
.stage-podium-col {
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.podium-col-header {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.92rem;
  font-weight: 800;
  color: var(--text-color);
  letter-spacing: -0.01em;
}
.podium-contenders-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.contender-podium-card {
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid var(--border-color);
  border-radius: 14px;
  padding: 14px 18px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  transition: all 0.25s ease;
  cursor: pointer;
}
.contender-podium-card:hover {
  background: rgba(255, 255, 255, 0.06);
  border-color: rgba(255, 255, 255, 0.25);
  transform: translateX(4px);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
}
.contender-podium-card.tier-silver {
  border-left: 4px solid #a8b7ad;
}
.contender-podium-card.tier-bronze {
  border-left: 4px solid #b45309;
}
.contender-podium-card.tier-follower {
  border-left: 4px solid rgba(255, 255, 255, 0.15);
}

.contender-top-strip {
  display: flex;
  align-items: center;
  gap: 10px;
}
.contender-rank-pill {
  font-size: 0.78rem;
  font-weight: 850;
  padding: 3px 10px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.08);
  color: var(--text-color);
}
.tier-silver .contender-rank-pill {
  background: rgba(148, 163, 184, 0.2);
  color: #cbd5e1;
}
.tier-bronze .contender-rank-pill {
  background: rgba(180, 83, 9, 0.2);
  color: #f5c518;
}

.contender-league-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 0.8rem;
  font-weight: 750;
  color: var(--text-color);
}
.contender-score-pill {
  margin-left: auto;
  font-size: 0.78rem;
  font-weight: 800;
  padding: 2px 10px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.06);
  color: var(--text-muted);
}

.contender-identity-row {
  display: flex;
  align-items: center;
  gap: 14px;
}
.contender-avatar-box {
  position: relative;
  width: 44px;
  height: 44px;
  flex-shrink: 0;
}
.contender-avatar-img {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  object-fit: cover;
  background: #1e293b;
  border: 1.5px solid rgba(255, 255, 255, 0.15);
}
.contender-team-crest {
  position: absolute;
  bottom: -3px;
  right: -3px;
  width: 20px;
  height: 20px;
  object-fit: contain;
  background: #10201a;
  border-radius: 50%;
  padding: 2px;
  border: 1px solid rgba(255, 255, 255, 0.2);
}

.contender-names-box {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
  flex: 1;
}
.contender-player-name {
  font-size: 0.95rem;
  font-weight: 800;
  color: var(--text-color);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.contender-team-name {
  font-size: 0.8rem;
  color: var(--text-muted);
  font-weight: 600;
}

.contender-inspect-btn {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.12);
  color: var(--text-color);
  padding: 5px 12px;
  min-height: 44px;
  max-width: 100%;
  overflow-wrap: anywhere;
  border-radius: 8px;
  font-size: 0.78rem;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.2s ease;
  flex-shrink: 0;
}
.contender-inspect-btn:hover {
  background: rgba(234, 179, 8, 0.2);
  border-color: rgba(234, 179, 8, 0.5);
  color: #fbe9a0;
}

.contender-metrics-row {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}
.c-metric-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: rgba(0, 0, 0, 0.3);
  padding: 4px 10px;
  border-radius: 6px;
  border: 1px solid rgba(255, 255, 255, 0.06);
}
.c-m-val {
  font-size: 0.82rem;
  font-weight: 850;
  color: var(--text-color);
}
.c-m-lbl {
  font-size: 0.72rem;
  color: var(--text-muted);
  font-weight: 600;
}

@media (max-width: 900px) {
  .stage-duel-grid {
    grid-template-columns: 1fr;
  }
  .stage-apex-col {
    max-width: 360px;
    margin: 0 auto;
    width: 100%;
  }
  .team-card-deck.fan-deck .fut-card:not(:first-child) {
    margin-left: -110px;
  }
}

@media (max-width: 768px) {
  .mobile-bottom-bar { display: flex; }
  body { padding-bottom: calc(92px + env(safe-area-inset-bottom, 0px)); }
  .wrap { padding-inline: 16px; }
  .hero-strip { padding-top: 14px; gap: 12px; }
  .hero-desc { font-size: 13px; }
  .controls-panel { padding: 12px; gap: 8px; border-radius: var(--radius-md); }
  .league-bar { scroll-snap-type: x proximity; }
  .league-btn { scroll-snap-align: start; }
  .toast-popup { bottom: calc(102px + env(safe-area-inset-bottom, 0px)); right: 16px; left: 16px; justify-content: center; }
  .cards-grid { grid-template-columns: minmax(0, 1fr); }
  .scope-tabs { display: none; } /* On mobile, the native bottom bar takes over scope switching */
}

/* Accessibility: stable focus and reduced motion also cover existing effects. */
:focus-visible { outline: 3px solid #ffd84d; outline-offset: 4px; }
:root[data-theme="light"] :focus-visible { outline-color: #0b7a4b; }
.skip-link { position: fixed; top: -100px; left: 12px; z-index: 10000; padding: 12px; background: #0e1f17; color: #fff; }
.skip-link:focus { top: 8px; }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
  .fut-card { transform: none !important; }
}

@media (max-width: 600px) {
  .bar { gap: 8px; }
  .brand { min-width: 0; gap: 6px; }
  .brand-sub { display: none; }
  .live-pill { display: none; }
  .header-actions { flex-shrink: 0; }
  .controls-right { width: 100%; }
  .search-box input { width: 100%; }
  .select-control { max-width: 100%; }
  .controls-left, .match-select-wrap { width: 100%; }
  .controls-left > .select-control, .match-select-wrap > .select-control { width: 100%; }
  .search-box-wrap { width: 100%; }
  .search-box { flex-basis: 160px; }
  .cards-header-info { align-items: flex-start; }
  .section-subtitle { display: block; margin: 4px 0 0; }
  .team-deck-block, .archetype-stage { padding: 16px 12px; }
  .team-deck-brand { gap: 8px; }
  .modal-backdrop { padding: max(12px, env(safe-area-inset-top, 0px)) 12px max(12px, env(safe-area-inset-bottom, 0px)); }
  .modal-dialog { padding: 56px 16px 20px; max-height: calc(100dvh - max(12px, env(safe-area-inset-top, 0px)) - max(12px, env(safe-area-inset-bottom, 0px))); border-radius: var(--radius-lg); }
  .modal-close { top: 8px; right: 8px; }
  .modal-viral-actions { grid-template-columns: minmax(0, 1fr); }
  .translation-emergency { margin-block: 24px; padding: 20px 16px; }
}


/* i18n: nothing is shown until the translation bundle is applied, so no source-language text ever flashes. */
body.i18n-pending header,
body.i18n-pending main,
body.i18n-pending footer,
body.i18n-pending #mobile-nav { visibility: hidden; }

.lang-select {
  background: transparent;
  border: none;
  color: var(--text-main);
  font-size: 12px;
  font-weight: 800;
  padding: 5px 8px;
  cursor: pointer;
  min-width: 64px;
  min-height: 44px;
}


/* Arena banner: title on the left, tagline mirrored on the right of the same row. */
.stage-banner-left { flex: 0 1 auto; }
.stage-tagline {
  flex: 1 1 280px;
  max-width: 60%;
  margin: 0 0 0 auto;
  text-align: right;
}
@media (max-width: 760px) {
  .stage-tagline { max-width: 100%; flex-basis: 100%; text-align: left; margin: 0; }
}


/* ---- Team shelves: compact cards side by side that grow on hover ---- */
.cards-grid.view-decks {
  grid-template-columns: repeat(12, minmax(0, 1fr)) !important;
  grid-auto-flow: row dense;
  gap: 20px !important;
}
.team-deck-block,
.team-deck-block.span-large { grid-column: span var(--span, 12); }
.cards-grid.view-decks.scope-match .team-deck-block { grid-column: 1 / -1; }   /* match view: the two clubs one under the other */
@media (max-width: 1100px) {
  .team-deck-block, .team-deck-block.span-large { grid-column: 1 / -1; }
}
@media (max-width: 900px) {
  .cards-grid.view-decks { grid-template-columns: 1fr !important; }
}

/* Deck that cannot fit one row: scrolls at its edges, so it needs room inside for the hovered card. */
.team-card-deck.fan-deck {
  padding: 76px 64px 72px 64px;
  margin-top: -40px;
}
/* Deck that fits: nothing is clipped, hovered cards simply grow over their neighbours. */
.team-card-deck.fan-deck.deck-fits,
.team-card-deck.single-card.deck-fits {
  overflow: visible;
  padding: 50px 20px 46px 20px;
}
.team-card-deck.single-card { padding: 28px 12px 28px 12px; }

.team-card-deck.fan-deck .fut-card,
.team-card-deck.single-card .fut-card {
  zoom: var(--z, 0.66);
  flex: 0 0 310px;
  width: 310px;
  max-width: 310px;
  transform: none;
  transform-origin: 50% 50%;
  transition: transform 0.28s cubic-bezier(0.2, 0.9, 0.3, 1.1), box-shadow 0.28s ease;
}
.team-card-deck.fan-deck .fut-card:not(:first-child) { margin-left: var(--gap, -34px); }
.team-card-deck.fan-deck .fut-card:hover,
.team-card-deck.single-card .fut-card:hover {
  transform: translateY(-6px) scale(calc(0.96 / var(--z, 0.66))) !important;   /* about 96% of the full card size */
  z-index: 90 !important;
}

/* The shrunken cards must stay legible: the smallest labels get a floor. */
.team-card-deck .fut-card .metric-lbl { font-size: 11px; line-height: 1.15; }
.team-card-deck .fut-card .card-roast-quote { font-size: 13px; }

.card-review-status { margin-right: auto; min-width: 0; overflow-wrap: anywhere; font-size: 11px; font-weight: 600; color: var(--text-muted, #b8c5d6); }

/* Card detail polish: shared by the standard grid and team shelves. */
.lang-switcher {
  flex: 0 0 auto;
  min-width: 0;
  max-width: 10rem;
  padding: 0;
}
.lang-switcher .lang-select {
  flex: 0 0 auto;
  width: 9rem;
  min-width: 8rem;
  max-width: 100%;
  min-height: 44px;
  padding: 8px 10px;
  background: var(--bg-surface-elevated);
  color: var(--text-main);
  border: 0;
  border-radius: inherit;
  font-family: inherit;
  font-size: 12px;
  line-height: 1.3;
  appearance: auto;
  -webkit-appearance: menulist;
  color-scheme: dark;
  text-overflow: clip;
  box-shadow: none;
}
.lang-switcher .lang-select option {
  background: var(--bg-surface);
  color: var(--text-main);
}
:root[data-theme="light"] .lang-switcher .lang-select { color-scheme: light; }

/* Keep the rotating element unflattened. Effects belong on each opaque face. */
.modal-flipper-container {
  display: block;
  padding: 0;
  border: 0;
  border-radius: var(--radius-md);
  background: transparent;
  color: inherit;
  font: inherit;
  text-align: inherit;
  touch-action: manipulation;
}
.modal-flipper-container:focus-visible { outline-offset: 6px; }
.modal-flipper-card {
  transform-style: preserve-3d;
  -webkit-transform-style: preserve-3d;
  overflow: visible;
  isolation: auto;
  opacity: 1;
  filter: none;
  mix-blend-mode: normal;
  transition: transform 0.58s cubic-bezier(0.22, 0.68, 0.18, 1);
}
.flipper-face {
  background-color: #08150f;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  isolation: isolate;
  box-sizing: border-box;
}
.flipper-front { transform: rotateY(0deg) translateZ(0.5px); }
.flipper-back { transform: rotateY(180deg) translateZ(0.5px); }

/* Football collectables: a lit pitch for praise, a worn stamp for roast. */
.flipper-back.back-praise {
  color: #f6e7b7;
  background: radial-gradient(ellipse at 0% 0%, #586035 0%, #173b2a 38%, #091b14 78%);
  border: 2px solid #cfb563;
  box-shadow: inset 0 0 0 5px #10281d;
}
.flipper-back.back-roast {
  color: #f2b5a7;
  background: linear-gradient(145deg, #3b2923, #211715 62%, #191311);
  border: 2px solid #ae7162;
  box-shadow: inset 0 0 0 5px #291b17;
}
.card-back-ornament-frame {
  inset: 13px;
  padding: 28px 18px 24px;
  gap: 14px;
  justify-content: space-between;
  border: 1px solid rgba(225, 203, 135, 0.6);
  border-radius: 8px;
  text-align: center;
}
.back-roast .card-back-ornament-frame { border: 1px dashed rgba(224, 151, 131, 0.65); }
.card-back-inner-border { inset: 7px; border-color: rgba(225, 203, 135, 0.2); }
.back-roast .card-back-inner-border { border-color: rgba(224, 151, 131, 0.22); }
.card-back-corner { border-color: #cfb563; width: 16px; height: 16px; }
.back-roast .card-back-corner { border-color: #ae7162; }
.card-back-brand,
.card-back-title,
.card-back-caption { position: relative; z-index: 2; max-width: 100%; margin: 0; }
.card-back-brand {
  order: 0;
  font-family: var(--font-display);
  font-size: 12px;
  font-weight: 900;
  letter-spacing: 0.24em;
  line-height: 1.4;
}
.card-back-title {
  order: 1;
  font-family: var(--font-display);
  font-size: clamp(20px, 2.4vw, 29px);
  font-weight: 900;
  line-height: 1.12;
  overflow-wrap: anywhere;
  text-wrap: balance;
}
.card-back-emblem { order: 2; flex: 1 1 auto; justify-content: center; min-height: 0; gap: 12px; }
.card-back-caption { order: 3; font-size: 11px; line-height: 1.45; color: inherit; opacity: 0.8; text-wrap: balance; }
.card-back-pattern {
  opacity: 1;
  background: linear-gradient(90deg, transparent 49.7%, rgba(165, 218, 174, 0.14) 50%, transparent 50.3%);
  background-size: auto;
}
.back-praise .card-back-pattern::before {
  content: '';
  position: absolute;
  inset: 13%;
  border: 1px solid rgba(165, 218, 174, 0.14);
}
.back-praise .card-back-pattern::after {
  content: '';
  position: absolute;
  width: 44%;
  aspect-ratio: 1;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  border: 1px solid rgba(165, 218, 174, 0.14);
  border-radius: 50%;
}
.back-roast .card-back-pattern {
  background-image: repeating-linear-gradient(-32deg, transparent 0 16px, rgba(242, 156, 135, 0.07) 16px 18px),
    repeating-linear-gradient(8deg, transparent 0 47px, rgba(242, 156, 135, 0.08) 47px 48px);
  background-size: auto;
}
.card-back-shield {
  width: 104px;
  height: 104px;
  flex: 0 0 auto;
  background: #173b2a;
  border: 2px solid #cfb563;
  box-shadow: inset 0 0 0 5px #10281d;
}
.back-roast .card-back-shield {
  border: 3px double #c78775;
  border-radius: 9px;
  background: #2c211e;
  box-shadow: none;
  transform: rotate(-8deg);
}
.card-back-ring { border-color: rgba(225, 203, 135, 0.45); animation: none; }
.back-roast .card-back-ring { border-radius: 3px; border-color: rgba(224, 151, 131, 0.4); }
.card-back-icon { font-size: 49px; filter: none; transform: none; }
.back-roast .card-back-icon { transform: rotate(8deg); }
.card-back-stars { font-size: 12px; color: #cfb563; text-shadow: none; letter-spacing: 0.25em; }
.back-roast .card-back-stars { display: none; }
.card-back-foil {
  background: linear-gradient(125deg, rgba(255, 245, 197, 0.09), transparent 38%);
  mix-blend-mode: normal;
}
.back-roast .card-back-foil {
  background: repeating-linear-gradient(-32deg, transparent 0 92px, rgba(242, 156, 135, 0.1) 92px 94px);
}

.fut-card.praise { border-color: #a68f4b !important; }
.fut-card.praise::before {
  inset: 0;
  height: auto;
  background: radial-gradient(ellipse at 0% 0%, rgba(255, 222, 131, 0.3), transparent 55%),
    linear-gradient(125deg, rgba(115, 231, 175, 0.13), transparent 38%);
}
.fut-card.praise:hover { border-color: #e4ca79 !important; }
.fut-card.roast {
  border-color: #ac7264 !important;
  border-style: dashed;
  box-shadow: 0 14px 28px rgba(0, 0, 0, 0.3), inset 0 0 0 4px rgba(172, 114, 100, 0.07) !important;
}
.fut-card.roast::before {
  inset: 0;
  height: auto;
  background: linear-gradient(145deg, rgba(222, 122, 98, 0.12), transparent 48%),
    repeating-linear-gradient(-32deg, transparent 0 54px, rgba(255, 185, 161, 0.04) 54px 55px);
}
.fut-card.roast:hover { border-color: #dc9883 !important; box-shadow: 0 18px 32px rgba(0, 0, 0, 0.4), inset 0 0 0 4px rgba(172, 114, 100, 0.1) !important; }
.fut-card.roast .card-emoji-pill { border-style: dashed; border-radius: 9px; box-shadow: none; transform: rotate(-6deg); }
.fut-card.roast:hover .card-emoji-pill { transform: rotate(0deg); }
:root[data-theme="light"] .fut-card.praise { background: linear-gradient(155deg, #fff7d9, #f7f4e8 50%, #e9f3e9) !important; }
:root[data-theme="light"] .fut-card.roast { background: linear-gradient(155deg, #f3e6df, #eee4dd 55%, #e8ddd6) !important; }

/* One row: image controls split the left half, pack fills the right half. */
.modal-share-footer .modal-viral-actions {
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  align-items: stretch;
  gap: 10px;
}
.modal-image-actions {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 6px;
  min-width: 0;
}
.modal-image-actions:only-child { grid-column: 1 / -1; }
.modal-viral-actions .modal-action-btn { width: 100%; min-width: 0; padding: 12px 8px; line-height: 1.3; }
.modal-image-actions .modal-action-btn { height: 100%; font-size: 12px; }
.modal-viral-actions > .cm-card-pack { align-self: stretch; font-size: 12px; }
.modal-viral-actions .modal-action-btn > span:last-child { min-width: 0; overflow-wrap: anywhere; }
@media (max-width: 600px) {
  .lang-switcher .lang-select { width: 8rem; min-width: 7.5rem; }
  .modal-share-footer .modal-viral-actions { gap: 6px; }
  .modal-image-actions { gap: 4px; }
  .modal-viral-actions .modal-action-btn { padding: 10px 5px; gap: 4px; font-size: 11px; }
}


/* ==========================================================================
   Brand polish (v1.1): logo spacing, X button, one-row detail actions,
   spotlight for praise and a mocking look for roast cards
   ========================================================================== */
.brand { gap: 8px; }
.brand-mark { width: 36px; height: 36px; }
.brand-title { letter-spacing: -0.01em; }

/* X share button: a compact black tile that keeps the 44px touch target through a larger hit area. */
.card-icon-btn.share-x-btn {
  position: relative;
  width: 34px;
  height: 34px;
  margin-block: 0;
  background: #000;
  border: 1px solid rgba(244, 241, 232, 0.28);
  color: #f4f1e8;
  border-radius: 9px;
}
.card-icon-btn.share-x-btn::after { content: ''; position: absolute; inset: -6px; }
.card-icon-btn.share-x-btn svg { display: block; }
.card-icon-btn.share-x-btn:hover { background: #111; border-color: #f4f1e8; color: #fff; }
:root[data-theme="light"] .card-icon-btn.share-x-btn { background: #10201a; color: #f6f3ea; border-color: #10201a; }

/* Detail actions: copy and save share the left half, send-pack gets the right half. */
.modal-share-footer .modal-viral-actions {
  display: grid;
  grid-template-columns: 1fr 1fr 2fr;
  gap: 8px;
  align-items: stretch;
}
.modal-share-footer .modal-viral-actions .modal-action-btn {
  width: 100%;
  min-height: 48px;
  padding: 10px 8px;
  font-size: 12.5px;
  line-height: 1.2;
  flex-direction: column;
  gap: 2px;
  text-align: center;
}
.modal-share-footer .modal-viral-actions > .cm-card-pack { flex-direction: row; gap: 8px; font-size: 13.5px; }
.modal-flip-btn { display: none; }
@media (max-width: 600px) {
  .modal-share-footer .modal-viral-actions { grid-template-columns: 1fr 1fr; }
  .modal-share-footer .modal-viral-actions > .cm-card-pack { grid-column: 1 / -1; }
}

/* Praise: a stadium spotlight falling in from the top-left corner, on grid cards, team decks and the detail card. */
.fut-card.praise::after,
.modal-card-preview.praise-gold-frame .flipper-front::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  z-index: 3;
  background:
    radial-gradient(130% 90% at 0% 0%, rgba(255, 236, 160, 0.34) 0%, rgba(255, 236, 160, 0.12) 32%, transparent 62%),
    linear-gradient(128deg, rgba(255, 248, 205, 0.20) 0%, rgba(255, 248, 205, 0.05) 22%, transparent 36%);
  mix-blend-mode: screen;
}
.modal-card-preview.praise-gold-frame { position: relative; }
.modal-card-preview.praise-gold-frame::before {
  content: '';
  position: absolute;
  left: -90px;
  top: -70px;
  width: 520px;
  height: 520px;
  pointer-events: none;
  background: radial-gradient(circle at 18% 14%, rgba(255, 232, 140, 0.20) 0%, transparent 60%);
  filter: blur(6px);
}

/* Roast: cracked, taped and dimmed, as if the card was caught committing a foul. */
.fut-card.roast::after,
.modal-card-preview.roast-danger-frame .flipper-front::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  z-index: 3;
  background:
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 120'><g fill='none' stroke=%27rgba(255,230,225,0.4)%27 stroke-width='1.1' stroke-linecap='round'><path d='M118 2 L84 30 L92 44 L62 66'/><path d='M84 30 L66 24 L54 34'/><path d='M92 44 L108 52'/><path d='M62 66 L48 62 L40 78'/><path d='M62 66 L70 88'/></g></svg>") top right / 30% auto no-repeat,
    repeating-linear-gradient(-45deg, rgba(255, 90, 71, 0.00) 0 9px, rgba(255, 90, 71, 0.045) 9px 18px),
    linear-gradient(0deg, rgba(40, 0, 0, 0.42) 0%, transparent 38%);
  mix-blend-mode: normal;
}
.fut-card.roast::before { filter: saturate(0.85); }
.fut-card.roast .player-avatar-stage { transform: rotate(-3deg); filter: saturate(0.8) contrast(1.05); }
.fut-card.roast .card-title-text { text-shadow: 0 0 14px rgba(255, 90, 71, 0.35); }
/* caution tape across the bottom edge */
.fut-card.roast .card-bottom-actions { position: relative; }
.fut-card.roast .card-bottom-actions::before {
  content: '';
  position: absolute;
  left: -14px;
  right: -14px;
  top: -9px;
  height: 5px;
  background: repeating-linear-gradient(-45deg, #f5c518 0 8px, #050f0a 8px 16px);
  opacity: 0.55;
  transform: rotate(-1.2deg);
  pointer-events: none;
}
.modal-card-preview.roast-danger-frame::before {
  content: '';
  position: absolute;
  inset: -30px -60px;
  pointer-events: none;
  background: radial-gradient(circle at 50% 60%, rgba(255, 70, 50, 0.16) 0%, transparent 62%);
}
.modal-card-preview.roast-danger-frame { position: relative; }
@media (prefers-reduced-motion: reduce) { .fut-card.roast .player-avatar-stage { transform: none; } }

/* Face switching does not rely on backface-visibility alone: the hidden face is also faded out at the half-turn,
   so the mirrored side can never show through (some GPUs ignore backface-visibility on rounded, clipped faces). */
.flipper-front { opacity: 1; transition: opacity 0s linear 0.29s; }
.flipper-back { opacity: 0; transition: opacity 0s linear 0.29s; }
.modal-flipper-card.is-flipped .flipper-front { opacity: 0; }
.modal-flipper-card.is-flipped .flipper-back { opacity: 1; }
@keyframes openFrontFace { 0%, 64% { opacity: 0; } 65%, 100% { opacity: 1; } }
@keyframes openBackFace { 0%, 64% { opacity: 1; } 65%, 100% { opacity: 0; } }
.modal-flipper-card.opening-flip .flipper-front { animation: openFrontFace 1.35s linear forwards; }
.modal-flipper-card.opening-flip .flipper-back { animation: openBackFace 1.35s linear forwards; }
@media (prefers-reduced-motion: reduce) {
  .modal-flipper-card.opening-flip, .modal-flipper-card.opening-flip .flipper-front, .modal-flipper-card.opening-flip .flipper-back { animation: none; }
}

/* Card back: the brand's yellow card on a lit pitch (praise) or on a dimmed, taped surface (roast). Same back on every card, so the deck reads as one set. */
.card-back-shield, .card-back-ring, .card-back-icon { display: none; }
.flipper-back .card-back-emblem { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; width: 100%; height: 100%; position: relative; z-index: 2; }
.card-back-mark { width: 46%; height: auto; filter: drop-shadow(0 10px 22px rgba(0, 0, 0, 0.55)); transform: rotate(-3deg); }
.back-roast .card-back-mark { filter: drop-shadow(0 10px 22px rgba(0, 0, 0, 0.7)) saturate(0.8) hue-rotate(-14deg); transform: rotate(5deg); }
.card-back-word { font-family: var(--font-display); font-weight: 900; font-stretch: 125%; font-size: clamp(18px, 6.4cqw, 26px); letter-spacing: 0.04em; color: var(--text-main); }
.card-back-word span { margin-left: 6px; padding: 1px 7px; border-radius: 6px; background: var(--accent-gold); color: var(--bg-deep); display: inline-block; transform: rotate(-3deg); }
.card-back-rule { width: 52%; height: 2px; background: linear-gradient(90deg, transparent, var(--accent-gold), transparent); opacity: 0.8; }
.back-roast .card-back-rule { background: repeating-linear-gradient(-45deg, #f5c518 0 6px, #050f0a 6px 12px); height: 5px; opacity: 0.7; }
.flipper-back .card-back-stars { display: block; font-size: 13px; letter-spacing: 0.3em; color: var(--accent-gold); }
.back-roast .card-back-stars { color: var(--accent-crimson); letter-spacing: 0.25em; }
.flipper-back { container-type: inline-size; }
.flipper-back::after { content: ''; position: absolute; inset: 0; pointer-events: none; z-index: 3; border-radius: inherit; }
.flipper-back.back-praise::after { background: radial-gradient(120% 80% at 0% 0%, rgba(255, 236, 160, 0.30) 0%, transparent 58%); mix-blend-mode: screen; }
.flipper-back.back-roast::after { background: repeating-linear-gradient(-45deg, rgba(255, 90, 71, 0) 0 9px, rgba(255, 90, 71, 0.05) 9px 18px), linear-gradient(0deg, rgba(40, 0, 0, 0.4), transparent 45%); }


/* ==========================================================================
   Card face v2: "referee card". Praise = yellow card, roast = red card.
   Card name in a black label, player name big underneath, no corner ornaments,
   stat labels wrap to two lines, a FUT-style rating chip with a tier ring.
   ========================================================================== */
.fut-card.fut-card[data-card-id] {
  --ink: #08150f;
  --ink-soft: #3a3000;
  --on-ink: #f4f1e8;
  --label-fg: #f5c518;
  --tile: rgba(8, 21, 15, 0.12);
  container-type: inline-size;
  padding: 5cqw 5cqw 4.5cqw;
  border: 3px solid var(--ink);
  border-radius: 7cqw;
  color: var(--ink);
  gap: 3cqw;
  background: linear-gradient(160deg, #f7cf2e 0%, #e4b200 100%) !important;
}
.fut-card.fut-card.roast[data-card-id] {
  --ink: #ffffff;
  --ink-soft: #ffd9d4;
  --on-ink: #b3261e;
  --label-fg: #b3261e;
  --tile: rgba(0, 0, 0, 0.2);
  background: linear-gradient(160deg, #e8473a 0%, #aa201a 100%) !important;
}
.fut-card.fut-card[data-card-id]::before { display: none; }
.fut-card.fut-card[data-card-id]:hover { box-shadow: 0 18px 40px rgba(0, 0, 0, 0.5); border-color: var(--ink); }
.fut-card.fut-card.praise[data-card-id]:hover { box-shadow: 0 18px 44px rgba(245, 197, 24, 0.35); }
.fut-card.fut-card.roast[data-card-id]:hover { box-shadow: 0 18px 44px rgba(255, 90, 71, 0.35); }

.fut-card.fut-card[data-card-id] .card-visual-bar { margin-bottom: 0; gap: 3cqw; }
.fut-card.fut-card[data-card-id] .player-avatar-stage { width: 26cqw; height: 26cqw; background: #fff; border: 1cqw solid var(--ink); box-shadow: 0 1.2cqw 3cqw rgba(0, 0, 0, 0.3); }
.fut-card.fut-card[data-card-id] .club-badge-overlay { width: 10.4cqw; height: 10.4cqw; right: -1.6cqw; bottom: -1cqw; background: #fff; border: 0.6cqw solid var(--ink); }
.fut-card.fut-card[data-card-id] .club-badge-overlay img { width: 7.4cqw; height: 7.4cqw; }
.fut-card.fut-card[data-card-id] .card-emoji-pill { font-size: 19cqw; margin-left: auto; }
.card-rating {
  margin-left: auto;
  align-self: flex-start;
  min-width: 13.5cqw;
  height: 13.5cqw;
  padding: 0 1.2cqw;
  box-sizing: border-box;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: #08150f;
  color: #f4f1e8;
  font-family: var(--font-display);
  font-weight: 900;
  font-stretch: 112%;
  font-size: clamp(12px, 6cqw, 21px);
  border: 0.9cqw solid #d08a4b;
  line-height: 1;
}
.card-rating.tier-silver { border-color: #d6dde4; }
.card-rating.tier-gold { border-color: #ffd84d; box-shadow: 0 0 0 0.5cqw rgba(255, 216, 77, 0.35); }
.fut-card.fut-card[data-card-id] .card-rating + .card-emoji-pill { margin-left: 0; }

.fut-card.fut-card[data-card-id] .card-identity-split {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 1.6cqw;
  border: 0;
  padding: 0;
  margin: 1cqw 0 0;
  min-height: 0;
}
.fut-card.fut-card[data-card-id] .card-title-pane { overflow: visible; }
.fut-card.fut-card[data-card-id] .card-title-text {
  min-height: 0;
  max-height: none;
  display: block;
  -webkit-line-clamp: unset;
  text-align: center;
  text-transform: uppercase;
  font-size: clamp(15px, 9.8cqw, 30px);
  line-height: 1.08;
  letter-spacing: -0.01em;
  color: var(--label-fg);
  background: #08150f;
  padding: 3cqw 3.4cqw;
  border-radius: 3.4cqw;
  transform: rotate(-1.6deg);
  text-wrap: balance;
  overflow-wrap: anywhere;
}
.fut-card.fut-card.roast[data-card-id] .card-title-text { background: #ffffff; color: #b3261e; text-shadow: none; }
.fut-card.fut-card[data-card-id] .card-entity-pane { align-items: center; text-align: center; overflow: visible; gap: 0; }
.fut-card.fut-card[data-card-id] .entity-name {
  min-height: 0;
  max-height: none;
  display: block;
  -webkit-line-clamp: unset;
  font-size: clamp(15px, 8.4cqw, 26px);
  font-weight: 900;
  color: var(--ink);
  line-height: 1.15;
  overflow-wrap: anywhere;
}
.fut-card.fut-card[data-card-id] .entity-team { color: var(--ink-soft); font-size: clamp(11px, 4.5cqw, 15px); font-weight: 700; margin-top: 0.6cqw; max-width: 100%; }

.fut-card.fut-card[data-card-id] .card-metrics-grid { gap: 2cqw; margin: 1.5cqw 0 2.5cqw; }
.fut-card.fut-card[data-card-id] .metric-pill {
  background: var(--tile);
  border: 0.7cqw solid var(--ink);
  border-radius: 3.2cqw;
  padding: 3cqw 1cqw;
  min-height: 0;
  gap: 0.8cqw;
}
.fut-card.fut-card[data-card-id] .metric-val { color: var(--ink); font-size: clamp(15px, 9cqw, 28px); }
.fut-card.fut-card[data-card-id] .metric-lbl {
  color: var(--ink-soft);
  font-size: clamp(8px, 3.2cqw, 11px);
  line-height: 1.14;
  white-space: normal;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  overflow-wrap: anywhere;
  text-overflow: clip;
  min-height: 2.28em;
}
.fut-card.fut-card[data-card-id] .card-roast-quote {
  background: #08150f;
  color: #f4f1e8;
  border: 0;
  border-left: 1.4cqw solid #f5c518;
  border-radius: 2.6cqw;
  font-size: clamp(11px, 4.6cqw, 15px);
  font-style: italic;
  padding: 3.2cqw 3.6cqw;
}
.fut-card.fut-card.roast[data-card-id] .card-roast-quote { background: #ffffff; color: #b3261e; border-left-color: #b3261e; }
.fut-card.fut-card[data-card-id] .card-review-status { color: var(--ink-soft); }
.fut-card.fut-card[data-card-id] .card-bottom-actions { margin-top: 1.5cqw; }

/* Referee-card polish: centre the content block, no dashed emoji frame, no crack overlay over the content. */
.fut-card.fut-card[data-card-id] > div:first-of-type { margin-block: auto; }
.fut-card.fut-card[data-card-id] .card-emoji-pill { border: 0; outline: 0; background: none; box-shadow: none; }
.fut-card.roast.fut-card[data-card-id]::after {
  background:
    repeating-linear-gradient(-45deg, rgba(0, 0, 0, 0) 0 9px, rgba(0, 0, 0, 0.05) 9px 18px),
    linear-gradient(0deg, rgba(40, 0, 0, 0.35) 0%, transparent 38%);
}
.fut-card.praise.fut-card[data-card-id]::after {
  background: radial-gradient(130% 90% at 0% 0%, rgba(255, 250, 215, 0.55) 0%, rgba(255, 250, 215, 0.16) 34%, transparent 62%);
}

/* cqw on the card itself resolves against the page, not the card (it is the container): the card's own box uses plain units. */
.fut-card.fut-card[data-card-id] {
  padding: 6% 6% 5%;
  border-radius: 22px;
  gap: 10px;
}
.fut-card.fut-card[data-card-id] .metric-val {
  font-size: clamp(14px, 7.6cqw, 26px);
  font-stretch: 100%;
  letter-spacing: -0.02em;
  text-overflow: clip;
}

/* Good and bad cards in two separate zones: a spotlight stage for praise, a mocking stage for roast. */
.tone-split { display: flex; flex-direction: column; gap: 30px; min-width: 0; }
.tone-zone { position: relative; border-radius: 28px; padding: 22px 22px 26px; isolation: isolate; overflow: hidden; min-width: 0; }
.tone-zone-title {
  display: flex; align-items: center; gap: 10px; margin: 0 0 18px;
  font-family: var(--font-display); font-stretch: 112%; font-weight: 900; font-size: 20px; letter-spacing: 0.01em; text-transform: uppercase;
}
.tone-zone-title small { margin-left: auto; font-family: var(--font); font-stretch: 100%; font-weight: 800; font-size: 12px; opacity: 0.75; text-transform: none; }
.tone-zone-mark { font-size: 18px; }
.tone-zone-body { position: relative; z-index: 1; min-width: 0; }

.tone-zone-p {
  border: 1px solid rgba(245, 197, 24, 0.32);
  background:
    radial-gradient(140% 100% at 0% 0%, rgba(255, 236, 160, 0.26) 0%, rgba(255, 236, 160, 0.08) 30%, transparent 62%),
    linear-gradient(180deg, rgba(245, 197, 24, 0.05), rgba(8, 21, 15, 0.0));
}
.tone-zone-p::before {
  content: ''; position: absolute; left: -12%; top: -30%; width: 70%; height: 160%; z-index: 0; pointer-events: none;
  background: linear-gradient(118deg, rgba(255, 246, 200, 0.16) 0%, rgba(255, 246, 200, 0.05) 28%, transparent 46%);
  transform: rotate(-4deg);
}
.tone-zone-p .tone-zone-title { color: #ffe27a; text-shadow: 0 0 22px rgba(245, 197, 24, 0.45); }

.tone-zone-n {
  border: 1px dashed rgba(255, 90, 71, 0.55);
  background:
    repeating-linear-gradient(-45deg, rgba(255, 90, 71, 0) 0 14px, rgba(255, 90, 71, 0.05) 14px 28px),
    linear-gradient(180deg, rgba(70, 12, 10, 0.55), rgba(18, 6, 6, 0.5));
}
.tone-zone-n::before {
  content: ''; position: absolute; left: -2%; right: -2%; top: 0; height: 12px; z-index: 0; pointer-events: none; opacity: 0.8;
  background: repeating-linear-gradient(-45deg, #f5c518 0 14px, #050f0a 14px 28px);
  transform: rotate(-0.6deg);
}
.tone-zone-n .tone-zone-title { color: #ffb3a8; margin-top: 10px; }
.tone-zone-n .tone-zone-title > span:nth-child(2) { text-decoration: line-through wavy rgba(255, 90, 71, 0.8); text-decoration-thickness: 2px; }
:root[data-theme="light"] .tone-zone-p .tone-zone-title { color: #8a6400; text-shadow: none; }
:root[data-theme="light"] .tone-zone-n .tone-zone-title { color: #b3261e; }
:root[data-theme="light"] .tone-zone-n { background: repeating-linear-gradient(-45deg, rgba(224, 58, 44, 0) 0 14px, rgba(224, 58, 44, 0.06) 14px 28px), #fdecea; }
@media (max-width: 700px) { .tone-zone { padding: 16px 12px 20px; border-radius: 22px; } .tone-zone-title { font-size: 17px; } }

/* Header controls: three pills of one height, no pulsing halo, a compact language select with its own arrow. */
.apex-header-strip { justify-content: center; gap: 10px; }
.header-actions { gap: 8px; }
.cm-pred-pill, #cm-account-btn { min-height: 40px; box-sizing: border-box; }
.cm-pred-pill { animation: none !important; box-shadow: none !important; margin-right: 0; padding: 0 16px; display: inline-flex; align-items: center; gap: 6px; }
.cm-pred-pill:hover { filter: brightness(1.06); }
.lang-switcher { max-width: none; }
.lang-switcher .lang-select {
  width: auto;
  min-width: 7.4rem;
  min-height: 40px;
  height: 40px;
  padding: 0 34px 0 16px;
  background-color: var(--bg-surface);
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'><path d='M1 1.5l5 5 5-5' fill='none' stroke='%23a8b7ad' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/></svg>");
  background-repeat: no-repeat;
  background-position: right 13px center;
  border: 1px solid var(--border-subtle);
  border-radius: 999px;
  -webkit-appearance: none;
  appearance: none;
  font-weight: 800;
}
.lang-switcher .lang-select:hover { border-color: var(--border-focus); }
@media (max-width: 600px) { .lang-switcher .lang-select { min-width: 6.4rem; padding-left: 12px; } }

/* Winners on the left, losers on the right, more cards per row. */
.tone-split { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: 22px; align-items: start; }
.tone-zone { padding: 18px 16px 22px; }
.tone-zone .cards-grid:not(.view-decks) { grid-template-columns: repeat(auto-fill, minmax(min(100%, 205px), 1fr)); gap: 14px; }
.tone-zone-n .cards-grid:not(.view-decks) { grid-template-columns: repeat(auto-fill, minmax(min(100%, 205px), 1fr)); }
@media (max-width: 1050px) { .tone-split { grid-template-columns: minmax(0, 1fr); } }

/* Team view inside the winners/losers stages: one club per row, the fan of cards uses the whole stage width. */
.tone-zone .cards-grid.view-decks {
  grid-template-columns: minmax(0, 1fr) !important;
  gap: 16px !important;
  grid-auto-flow: row;
}
.tone-zone .team-deck-block,
.tone-zone .team-deck-block.span-large { grid-column: 1 / -1 !important; min-width: 0; }
.tone-zone .team-deck-header { gap: 10px; }
.tone-zone .team-deck-title { font-size: 1rem; white-space: normal; overflow-wrap: anywhere; }
.tone-zone .team-deck-block { padding-inline: 8px; }

/* In the winners/losers stages a club's cards wrap in a grid (no fan, no edge-scrolling, no zoom), so nothing is clipped. */
.tone-zone .team-card-deck.fan-deck,
.tone-zone .team-card-deck.single-card {
  display: grid !important;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 200px), 1fr));
  gap: 12px;
  padding: 4px 0 12px !important;
  margin: 0 !important;
  overflow: visible !important;
  scrollbar-width: none;
}
.tone-zone .team-card-deck .fut-card {
  zoom: 1 !important;
  flex: none !important;
  width: auto !important;
  max-width: none !important;
  margin-left: 0 !important;
  transform: none !important;
}
.tone-zone .team-card-deck .fut-card:hover { transform: translateY(-4px) !important; z-index: 5 !important; }
.tone-zone .team-deck-block { background: rgba(0, 0, 0, 0.14); border-radius: 18px; padding: 10px 12px 6px; }

/* Review fixes: detail actions (copy + save share the left half, pack the right half), chip vs close button,
   soft spotlight without a visible box, labels that never break inside a word. */
.modal-share-footer .modal-viral-actions { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); width: 100%; }
.modal-share-footer .modal-viral-actions > .cm-card-pack { grid-column: auto; }
.modal-share-footer .modal-image-actions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; min-width: 0; }
.modal-share-footer .modal-viral-actions .modal-action-btn {
  flex-direction: row;
  gap: 6px;
  min-height: 52px;
  padding: 10px 8px;
  font-size: 12.5px;
  line-height: 1.15;
  text-align: center;
  text-wrap: balance;
}
.modal-share-footer .modal-viral-actions .modal-action-btn > span:last-child { overflow-wrap: normal; word-break: normal; min-width: 0; }
.modal-share-footer .modal-viral-actions > .cm-card-pack { font-size: 13.5px; }
@media (max-width: 600px) {
  .modal-share-footer .modal-viral-actions { grid-template-columns: minmax(0, 1fr); }
  .modal-share-footer .modal-viral-actions .modal-action-btn { font-size: 12px; }
}
.modal-podium-header { padding-right: 56px; }
.modal-card-preview.praise-gold-frame::before {
  left: 0; top: 0; width: 100%; height: 100%; filter: none;
  background: radial-gradient(circle closest-side at 30% 30%, rgba(255, 232, 140, 0.18) 0%, transparent 100%);
}
.modal-card-preview.roast-danger-frame::before {
  inset: 0; filter: none;
  background: radial-gradient(circle closest-side at 50% 55%, rgba(255, 70, 50, 0.16) 0%, transparent 100%);
}
.fut-card.fut-card[data-card-id] .metric-lbl {
  overflow-wrap: normal;
  word-break: normal;
  hyphens: manual;
  letter-spacing: -0.015em;
  font-size: clamp(7px, 2.5cqw, 10px);
}
.fut-card.fut-card[data-card-id] .metric-pill { padding-inline: 0.6cqw; }
.tone-split { grid-template-columns: minmax(0, var(--zone-l, 1.5fr)) minmax(0, var(--zone-r, 1fr)); }
@media (max-width: 1050px) { .tone-split { grid-template-columns: minmax(0, 1fr); } }

/* Detail actions: copy and save are icon buttons (the label lives in title/aria-label); send-pack keeps its word. */
.modal-share-footer .modal-viral-actions { grid-template-columns: auto minmax(0, 1fr); align-items: stretch; }
.modal-share-footer .modal-image-actions { grid-template-columns: repeat(2, 52px); gap: 8px; }
.modal-share-footer .modal-viral-actions .modal-action-btn.icon-only { padding: 0; min-width: 52px; width: 52px; min-height: 52px; }
.modal-action-btn.icon-only svg { display: block; }
@media (max-width: 600px) {
  .modal-share-footer .modal-viral-actions { grid-template-columns: auto minmax(0, 1fr); }
  .modal-share-footer .modal-viral-actions > .cm-card-pack { grid-column: auto; }
}

/* The PNG already carries its own look (frame, stripes, spotlight): no second overlay on top of the detail card (it drew crack lines over the rating and icon). */
.modal-card-preview.praise-gold-frame .flipper-front::after,
.modal-card-preview.roast-danger-frame .flipper-front::after { content: none; display: none; }

/* Team view everywhere (also the match view and single-tone lists): a club's cards wrap in a grid, never zoomed or fanned. */
.cards-grid.view-decks .team-card-deck.fan-deck,
.cards-grid.view-decks .team-card-deck.single-card {
  display: grid !important;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 210px), 1fr));
  gap: 12px;
  padding: 4px 0 14px !important;
  margin: 0 !important;
  overflow: visible !important;
  scrollbar-width: none;
}
.cards-grid.view-decks .team-card-deck .fut-card {
  zoom: 1 !important;
  flex: none !important;
  width: auto !important;
  max-width: none !important;
  margin-left: 0 !important;
  transform: none !important;
}
.cards-grid.view-decks .team-card-deck .fut-card:hover { transform: translateY(-4px) !important; z-index: 5 !important; }
.cards-grid.view-decks .team-deck-block { background: rgba(0, 0, 0, 0.12); border-radius: 18px; padding: 10px 14px 6px; }

/* Detail footer: image tools share the left half; pack takes the right half at every width. */
.coverage-note { flex-basis: 100%; margin: 0; color: var(--text-muted); font-size: 11px; line-height: 1.5; max-width: 70ch; }
.card-status-meta { min-width: 0; }
.card-sponsor-label { display: block; color: var(--text-main); font-size: 9px; line-height: 1.45; max-width: 20ch; overflow-wrap: anywhere; }
.card-sponsor-note { padding: 14px; margin-bottom: 14px; border: 1px solid var(--border-medium); border-radius: 12px; background: var(--bg-surface); }
.card-sponsor-note small { display: block; color: var(--text-muted); font-size: 11px; }
.card-sponsor-note p { margin: 8px 0; font-size: 14px; line-height: 1.5; }
.card-sponsor-note a { color: var(--text-main); text-underline-offset: 3px; }
.modal-share-footer .modal-viral-actions { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.modal-share-footer .modal-image-actions { grid-template-columns: repeat(2, minmax(0, 1fr)); min-width: 0; }
.modal-share-footer .modal-viral-actions .modal-action-btn.icon-only { width: 100%; min-width: 0; }
@media (max-width: 600px) {
  .bar .brand { flex-shrink: 0; }
  .bar .brand-mark { width: 36px; height: 36px; }
  .bar .brand-title { font-size: 16px; }
  .header-actions .cm-pred-pill { width: 40px; min-width: 40px; padding: 0; justify-content: center; margin-right: 0; font-size: 16px; }
  .header-actions .cm-pred-label { display: none; }
}
@media (max-width: 400px) {
  .bar .brand-text { display: none; }
  .bar .header-actions { gap: 6px; }
}
@media (max-width: 900px) {
  .modal-vertical-scope-spine { white-space: normal; min-width: 0; }
  .modal-vertical-scope-spine .modal-spine-line { white-space: normal; overflow-wrap: anywhere; text-align: center; line-height: 1.6; letter-spacing: .08em; }
}

/* Detail card: two equal columns, with the actions bounded by the card's bottom edge. */
.modal-dialog { max-width: 920px; padding: 56px 28px 28px; }
.modal-layout { grid-template-columns: 30px repeat(2, minmax(0, 380px)); gap: 24px; align-items: start; justify-content: center; }
.modal-vertical-scope-spine { align-self: center; }
.modal-data-breakdown { aspect-ratio: 4 / 5; min-height: 0; padding: 0; gap: 12px; overflow: hidden; justify-content: flex-start; }
.modal-detail-body { display: flex; flex-direction: column; gap: 12px; flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; padding-right: 2px; }
.modal-detail-body > * { flex-shrink: 0; }
.modal-podium-stack { gap: 10px; }
.modal-podium-stack .podium-card { padding: 10px 14px; gap: 5px; }
.modal-podium-stack .podium-rank-tag { font-size: 10px; }
.modal-podium-stack .podium-card:hover { transform: none; }
.modal-podium-stack .podium-card.has-metrics { display: grid; grid-template-columns: minmax(0, 1fr) minmax(112px, 38%); column-gap: 12px; align-items: center; }
.podium-identity { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.modal-podium-stack .podium-rank-tag, .modal-podium-stack .podium-player-row { grid-column: 1; min-width: 0; }
.modal-podium-stack .podium-player-row { gap: 10px; }
.modal-podium-stack .podium-player-name, .modal-podium-stack .podium-player-team { white-space: normal; overflow-wrap: anywhere; }
.podium-metrics { grid-column: 2; grid-row: 1; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: center; gap: 8px; min-width: 0; margin: 0; padding-left: 12px; border-left: 1px solid var(--border-subtle); }
.podium-metric { display: flex; flex-direction: column; align-items: center; gap: 4px; min-width: 0; text-align: center; }
.podium-metric dt { font-size: 9.5px; line-height: 1.25; color: var(--text-muted); overflow-wrap: anywhere; }
.podium-metric dd { order: -1; margin: 0; max-width: 100%; font-size: 19px; font-weight: 900; line-height: 1.1; color: var(--text-main); overflow-wrap: anywhere; }
.fut-card.fut-card[data-card-id] .card-roast-quote { display: flex; align-items: center; justify-content: center; min-height: 4.8em; text-align: center; }
@media (max-width: 500px) {
  .modal-podium-stack .podium-card.has-metrics { grid-template-columns: minmax(0, 1fr) 90px; column-gap: 10px; }
  .podium-metrics { grid-template-columns: minmax(0, 1fr); gap: 10px; padding-left: 10px; }
  .modal-podium-stack .podium-avatar-wrapper, .modal-podium-stack .podium-avatar-img { width: 36px; height: 36px; }
  .modal-podium-stack .podium-player-name { font-size: 13px; }
  .modal-podium-stack .podium-player-team { font-size: 11px; }
}
.modal-share-footer { display: block; flex: 0 0 auto; margin-top: 0; padding-top: 12px; }
.modal-card-preview { --modal-card-radius: 22px; --modal-frame-width: 2px; }
.modal-card-preview .modal-flipper-card { border-width: var(--modal-frame-width); border-radius: var(--modal-card-radius); }
.modal-flipper-card > .flipper-face { border-radius: calc(var(--modal-card-radius) - var(--modal-frame-width)); }
.modal-face-card { position: absolute; inset: 0; width: 100% !important; height: 100% !important; max-width: none !important; margin: 0 !important; aspect-ratio: auto; transform: none !important; transition: none !important; box-shadow: none !important; }
.fut-card.fut-card.modal-face-card[data-card-id] { border-radius: inherit; }
.modal-face-card > div { display: flex; flex-direction: column; justify-content: space-between; gap: 12px; height: 100%; }
.modal-face-card .card-rating { display: none; }
.modal-face-card .card-metrics-grid { margin-top: auto; }
.modal-face-card .card-identity-split { margin-block: auto !important; }
.modal-face-card .card-detail-trigger, .modal-face-card .card-bottom-actions { display: none; }
.modal-flipper-container { position: relative; }
.modal-flip-trigger { position: absolute; inset: 0; z-index: 10; width: 100%; height: 100%; padding: 0; border: 0; border-radius: var(--modal-card-radius); background: transparent; cursor: pointer; }
.modal-flip-trigger:focus-visible { outline: 3px solid var(--accent-emerald); outline-offset: 5px; }
@keyframes detailOpening { 0%, 20% { transform: rotateY(180deg) scale(.98); } 100% { transform: rotateY(0deg) scale(1); } }
@keyframes detailOpeningFront { 0%, 59.99% { opacity: 0; } 60%, 100% { opacity: 1; } }
@keyframes detailOpeningBack { 0%, 59.99% { opacity: 1; } 60%, 100% { opacity: 0; } }
.modal-flipper-card.opening-flip { animation: detailOpening 1s linear both; }
.modal-flipper-card.opening-flip .flipper-front { animation: detailOpeningFront 1s linear both; }
.modal-flipper-card.opening-flip .flipper-back { animation: detailOpeningBack 1s linear both; }
@media (max-width: 900px) {
  .modal-dialog { padding: 56px 18px 20px; }
  .modal-layout { grid-template-columns: minmax(0, 1fr); gap: 18px; }
  .modal-card-preview { justify-self: center; width: 100%; }
  .modal-data-breakdown { aspect-ratio: auto; overflow: visible; }
  .modal-detail-body { overflow: visible; flex: none; }
}
@media (prefers-reduced-motion: reduce) {
  .modal-flipper-card.opening-flip, .modal-flipper-card.opening-flip .flipper-front, .modal-flipper-card.opening-flip .flipper-back { animation: none; }
}

/* Card face, final spacing: no rating number, no "approved" label; the X appears on hover only; content spread evenly top to bottom. */
.fut-card.fut-card[data-card-id] > div:first-of-type {
  margin-block: 0;
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  justify-content: space-evenly;
  gap: 8px;
}
.fut-card.fut-card[data-card-id] .card-visual-bar,
.fut-card.fut-card[data-card-id] .card-identity-split,
.fut-card.fut-card[data-card-id] .card-metrics-grid { margin-top: 0; margin-bottom: 0; }
.fut-card.fut-card[data-card-id] { padding: 7% 6% 6%; }
.fut-card .card-bottom-actions:has(> .card-status-meta:empty) {
  position: absolute;
  right: 10px;
  bottom: 10px;
  margin: 0;
  padding: 0;
  z-index: 4;
  pointer-events: none;
}
.fut-card .share-x-btn { opacity: 0; transform: translateY(4px) scale(0.92); transition: opacity 0.18s ease, transform 0.18s ease; pointer-events: auto; }
.fut-card:hover .share-x-btn,
.fut-card:focus-within .share-x-btn,
.fut-card .share-x-btn:focus-visible { opacity: 1; transform: none; }
@media (hover: none) { .fut-card .share-x-btn { opacity: 1; transform: none; } }
.fut-card .card-bottom-actions:has(> .card-status-meta:empty)::before { display: none; }

/* The X lives in its own thin strip under the content (never over the quote box) and shows on hover only. */
.fut-card.fut-card[data-card-id] { padding: 20px 6% 40px; }
.fut-card .card-bottom-actions:has(> .card-status-meta:empty) { right: 11px; bottom: 9px; }
.fut-card .card-bottom-actions:has(> .card-status-meta:empty) .share-x-btn { width: 28px; height: 28px; border-radius: 8px; }
.fut-card .card-bottom-actions:has(> .card-status-meta:empty) .share-x-btn svg { width: 13px; height: 13px; }

/* No X on the grid card (it took a row for nothing): sharing to X is the third icon in the card detail. */
.fut-card.fut-card[data-card-id] { padding: 6% 6% 5.5%; }
.fut-card .card-bottom-actions:has(> .card-status-meta:empty) { display: none; }
.modal-share-footer .modal-image-actions { grid-template-columns: repeat(3, minmax(0, 1fr)); }

/* Card detail: the quote is part of the card; no scrollbars anywhere in the dialog; a smaller close button tucked into the corner. */
.modal-dialog,
.modal-detail-body,
.modal-data-breakdown { scrollbar-width: none; -ms-overflow-style: none; overflow-x: hidden; }
.modal-dialog::-webkit-scrollbar,
.modal-detail-body::-webkit-scrollbar,
.modal-data-breakdown::-webkit-scrollbar { display: none; width: 0; height: 0; }
.modal-dialog > .modal-close,
.modal-close {
  top: 14px;
  right: 14px;
  width: 36px;
  height: 36px;
  font-size: 14px;
  background: rgba(255, 255, 255, 0.06);
  border-color: rgba(255, 255, 255, 0.14);
  backdrop-filter: blur(6px);
}
.modal-close:hover { background: var(--accent-crimson); border-color: var(--accent-crimson); color: #fff; }
.modal-dialog { padding-top: 54px; }

/* Card arena: the leader card on the left, the next four on the right at the same height; league and club on the right of each row (no "inspect" button, the row itself opens the card). */
.stage-duel-grid { align-items: stretch; }
.stage-podium-col { display: flex; min-height: 0; }
.podium-contenders-list {
  flex: 1;
  display: grid;
  grid-template-rows: repeat(4, minmax(0, 1fr));
  gap: 10px;
  min-height: 0;
}
.contender-podium-card { padding: 9px 16px; gap: 6px; justify-content: space-between; min-height: 0; }
.contender-podium-card:focus-visible { outline: 3px solid var(--accent-gold); outline-offset: 2px; }
.contender-identity-row { align-items: center; gap: 12px; }
.contender-names-box { min-width: 0; flex: 1; }
.contender-where { margin-left: auto; text-align: right; display: grid; gap: 2px; min-width: 0; max-width: 46%; }
.contender-where .cw-league { font-size: 13px; font-weight: 800; color: var(--text-main); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.contender-where .cw-team { font-size: 12px; font-weight: 600; color: var(--text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.contender-inspect-btn { display: none; }
@media (max-width: 900px) {
  .podium-contenders-list { grid-template-rows: none; grid-auto-rows: auto; }
}

/* ==========================================================================
   Phone and tablet polish
   ========================================================================== */
/* Phones: filter rows are single scrollable lines instead of 3-5 wrapped rows, so the cards start higher. */
@media (max-width: 760px) {
  .arena-leagues-strip,
  .league-bar,
  .arch-cat-filter,
  .round-pills,
  .league-group-tabs {
    display: flex;
    flex-wrap: nowrap;
    overflow-x: auto;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
    padding-bottom: 2px;
    max-width: 100%;
  }
  .arena-leagues-strip::-webkit-scrollbar,
  .league-bar::-webkit-scrollbar,
  .arch-cat-filter::-webkit-scrollbar,
  .round-pills::-webkit-scrollbar,
  .league-group-tabs::-webkit-scrollbar { display: none; }
  .arena-leagues-strip > *,
  .arch-cat-filter > *,
  .round-pills > *,
  .league-group-tabs > * { flex: 0 0 auto; }
  .round-pill { width: 40px; height: 40px; }
  .controls-panel { gap: 10px; padding: 12px; }
}
/* The analytics control is a small tab above the bottom bar, never over a card's title. */
@media (max-width: 900px) {
  .sa-preferences {
    bottom: calc(max(8px, env(safe-area-inset-bottom, 0px)) + 66px) !important;
    left: 8px !important;
    min-height: 32px !important;
    padding: 4px 10px !important;
    font-size: 11px !important;
    border-radius: 999px !important;
    opacity: 0.8;
  }
}
/* Tablets: the six scope tabs share one row (icon over label) instead of wrapping to two uneven rows. */
@media (min-width: 700px) and (max-width: 1100px) {
  #scope-tabs { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 6px; }
  #scope-tabs .scope-tab { flex-direction: column; gap: 4px; padding: 10px 4px; font-size: 12.5px; text-align: center; line-height: 1.15; }
  .brand-sub { white-space: nowrap; }
}
/* Arena on a tablet keeps the leader card and the four contenders side by side. */
@media (min-width: 700px) and (max-width: 1100px) {
  .stage-duel-grid { grid-template-columns: 300px minmax(0, 1fr); gap: 20px; }
}
@media (min-width: 700px) and (max-width: 1100px) {
  .podium-contenders-list { grid-template-rows: repeat(4, minmax(0, 1fr)); grid-auto-rows: auto; }
}

/* ==========================================================================
   Phone layout: a compact header block and four slim filter rows, so the cards start right after them.
   ========================================================================== */
@media (max-width: 600px) {
  .hero-desc { display: none; }
  .hero-strip { padding-top: 10px; gap: 10px; }
  .hero-headline { font-size: 22px; line-height: 1.15; margin: 0; }

  .controls-panel { padding: 10px; gap: 8px; border-radius: 18px; }
  .league-group-tabs { gap: 8px; margin: 0; }
  .group-tab-btn { min-height: 34px; padding: 4px 12px; font-size: 12.5px; }
  .league-bar { min-height: 0; padding: 4px 0 8px; border-bottom: 0; }
  .league-btn { min-height: 36px; padding: 4px 12px; font-size: 12.5px; gap: 6px; }
  .league-btn img, .league-btn .league-logo-img { width: 18px; height: 18px; }

  .sub-controls-bar { gap: 8px; padding-top: 8px; }
  #scope-sub-controls, #scope-sub-controls > div { width: 100%; }
  #scope-sub-controls > div { flex-wrap: nowrap !important; gap: 8px !important; min-width: 0; }
  #scope-sub-controls > div > span { white-space: nowrap; font-size: 11.5px !important; }
  #scope-sub-controls .round-picker-label { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  #scope-sub-controls .round-pills { flex: 1; min-width: 0; }
  .round-pill { width: 34px; height: 34px; font-size: 12px; }
  .coverage-note { display: none !important; }

  .controls-right { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; width: 100%; }
  .filter-pills { padding: 3px; }
  .filter-pill { min-height: 32px; padding: 4px 11px; font-size: 12.5px; }
  .search-box-wrap { flex: 1 1 140px; min-width: 0; display: flex; align-items: center; gap: 6px; }
  .search-box { flex: 1; min-width: 0; min-height: 38px; height: 38px; padding: 0 10px; }
  .search-box input { font-size: 13px; }
  .search-scope-pill { min-height: 34px; height: 34px; padding: 0 10px; font-size: 11px; white-space: nowrap; }
  .cards-header-info { margin-bottom: 8px; }
  .section-title { font-size: 20px; }
  .view-mode-pill { min-height: 36px; padding: 0 10px; font-size: 12.5px; }
  .card-total-badge { font-size: 11.5px; }
  .tone-zone-title { font-size: 15px; }
}

@media (max-width: 600px) {
  /* tone filter on its own row, the search (with its scope pill) on the next, full width */
  .search-box-wrap { flex: 1 1 100%; }
  .filter-pills { align-self: flex-start; }
  /* arena: duel toggle and categories as two slim rows */
  .archetype-controls-bar { display: grid; gap: 8px; width: 100%; }
  .arch-mode-switch { display: flex; width: 100%; }
  .arch-mode-btn { flex: 1 1 0; white-space: nowrap; padding: 8px 6px; font-size: 12.5px; min-height: 36px; }
  .arch-cat-chip { white-space: nowrap; min-height: 34px; padding: 4px 12px; font-size: 12.5px; }
}
/* On phones the analytics control sits at the very end of the page instead of floating over cards. */
@media (max-width: 900px) {
  .sa-preferences { position: static !important; margin: 14px 12px 84px !important; width: fit-content; max-width: calc(100% - 24px); opacity: 0.85; }
}

/* Filters fold into one summary bar on phones (tap to open); desktop and tablet keep the full panel. */
.mf-toggle { display: none; }
@media (max-width: 600px) {
  .controls-panel { padding: 8px; gap: 8px; }
  .mf-toggle {
    display: flex; align-items: center; gap: 10px; width: 100%; min-height: 46px; padding: 6px 14px;
    border: 1px solid var(--border-subtle); border-radius: 14px; background: var(--bg-surface); color: var(--text-main);
    font: inherit; cursor: pointer; text-align: left;
  }
  .mf-toggle:focus-visible { outline: 3px solid var(--accent-gold); outline-offset: 2px; }
  .mf-label { font-weight: 900; font-size: 13px; color: var(--accent-gold); }
  .mf-summary { flex: 1; min-width: 0; font-size: 13px; font-weight: 700; color: var(--text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .mf-chev { font-size: 14px; color: var(--text-muted); transition: transform 0.2s ease; }
  .controls-panel.mf-open .mf-chev { transform: rotate(180deg); }
  .controls-panel:not(.mf-open) > :not(.mf-toggle) { display: none !important; }
}

/* Gallery geometry: pack clubs into measured card tracks; text never changes a card's outer size. */
#cards-container.tone-split {
  display: grid;
  gap: 22px;
  justify-content: center;
  align-items: start;
  min-width: 0;
}
/* Winners sit on the left edge and losers on the right edge of the gallery; a stacked (narrow) layout stays centred. */
#cards-container.tone-split[data-card-layout="split"] { justify-content: space-between; }
#cards-container .tone-zone { box-sizing: border-box; padding: 16px; min-width: 0; }
#cards-container .tone-zone-title {
  min-height: 34px;
  margin: 0 0 16px;
  gap: 8px;
  font-size: 17px;
  line-height: 1.2;
}
#cards-container .tone-zone-n .tone-zone-title > span:nth-child(2) { text-decoration: none; }
#cards-container .tone-zone-body.cards-grid {
  display: grid;
  grid-template-columns: repeat(var(--zone-columns, 1), var(--card-w, 230px)) !important;
  gap: 12px !important;
  align-items: start;
  padding: 0;
  margin: 0;
}
#cards-container .team-deck-block {
  padding: 0;
  margin: 0;
  min-width: 0;
  background: transparent;
  border: 0;
  box-shadow: none;
}
#cards-container .team-deck-header {
  height: 56px;
  box-sizing: border-box;
  margin: 0;
  padding: 0 0 10px;
  flex-wrap: nowrap;
  gap: 6px;
}
#cards-container .team-deck-brand { flex: 1; gap: 7px; }
#cards-container .team-deck-info { min-width: 0; }
#cards-container .team-deck-crest { width: 26px; height: 26px; }
#cards-container .team-deck-title { font-size: 13px; line-height: 1.25; }
#cards-container .team-deck-badge { padding: 4px 7px; font-size: 10px; white-space: nowrap; flex-shrink: 0; }
#cards-container .team-deck-header .cm-pack-mini { flex-shrink: 0; width: 30px; height: 30px; padding: 0; }
#cards-container .team-card-deck {
  display: grid !important;
  grid-template-columns: repeat(var(--team-columns, 1), var(--card-w, 230px)) !important;
  gap: 12px;
  padding: 0 !important;
  margin: 0 !important;
  overflow: visible !important;
}
#cards-container.tone-split .fut-card[data-card-id] {
  width: var(--card-w, 230px) !important;
  height: calc(var(--card-w, 230px) * 1.36) !important;
  min-height: 0;
  max-width: none !important;
  padding: calc(var(--card-w, 230px) * 0.05) !important;
  border-radius: 18px;
  gap: 0;
  zoom: 1 !important;
  transform: none !important;
}
#cards-container.tone-split .fut-card[data-card-id] > .card-face-content {
  display: grid;
  grid-template-rows: minmax(0, 17fr) minmax(0, 37fr) minmax(0, 23fr) minmax(0, 23fr);
  gap: 6px;
  flex: 1;
  min-height: 0;
  height: auto !important;
  margin: 0;
}
#cards-container.tone-split .card-visual-bar { align-items: center; margin: 0; min-height: 0; }
#cards-container.tone-split .player-avatar-stage { width: 21cqw; height: 21cqw; }
#cards-container.tone-split .club-badge-overlay { width: 9cqw; height: 9cqw; }
#cards-container.tone-split .club-badge-overlay img { width: 6.4cqw; height: 6.4cqw; }
#cards-container.tone-split .card-emoji-pill { font-size: 19cqw; }
#cards-container.tone-split .card-identity-split {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: minmax(0, 1.3fr) minmax(0, 1fr);
  align-items: stretch;
  gap: 4px;
  margin: 0;
  min-height: 0;
}
#cards-container.tone-split .card-title-pane { min-height: 0; }
#cards-container.tone-split .card-title-text {
  display: flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  height: 100%;
  padding: 2cqw 2.4cqw;
  font-size: clamp(16px, 9cqw, 26px);
  line-height: 1.06;
  border-radius: 7px;
}
#cards-container.tone-split .card-entity-pane { display: grid; grid-template-columns: minmax(0, 1fr); grid-template-rows: minmax(0, 1fr) auto; min-height: 0; }
#cards-container.tone-split .entity-name {
  align-content: center;
  height: 100%;
  min-height: 0;
  font-size: clamp(15px, 8.2cqw, 24px);
  line-height: 1.1;
}
#cards-container.tone-split .entity-team { margin-top: 2px; font-size: clamp(11px, 5.5cqw, 14px); line-height: 1.15; }
#cards-container.tone-split .card-metrics-grid { margin: 0; min-height: 0; gap: 2cqw; }
#cards-container.tone-split .metric-pill { display: grid; grid-template-rows: minmax(14px, 0.8fr) minmax(0, 1.2fr); padding: 1.5cqw 0.6cqw; min-height: 0; gap: 2px; }
#cards-container.tone-split .metric-val { height: 100%; min-height: 0; align-content: center; font-size: clamp(15px, 8cqw, 26px); line-height: 1.1; white-space: nowrap; }
#cards-container.tone-split .metric-lbl {
  display: block;
  align-content: center;
  min-height: 0;
  height: 100%;
  font-size: clamp(7px, 2.7cqw, 9px);
  line-height: 1.15;
  overflow: visible;
  -webkit-line-clamp: unset;
}
#cards-container.tone-split .card-roast-quote {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 0;
  margin: 0;
  padding: 2.2cqw 2.8cqw;
  font-size: clamp(10px, 4.6cqw, 13px);
  line-height: 1.35;
  text-align: center;
  text-wrap: pretty;
  box-sizing: border-box;
}
#cards-container.tone-split .card-bottom-actions { flex: 0 0 auto; }

/* Metric tiles: the number and its label are one group, centred in the tile (the number used to sit high with the label low),
   and a card with only one or two metrics keeps the same tile size and stays centred under the title. */
#cards-container.tone-split .metric-pill,
.fut-card.fut-card[data-card-id] .metric-pill {
  display: grid;
  grid-template-rows: auto auto;
  align-content: center;
  justify-items: center;
  row-gap: 2px;
}
#cards-container.tone-split .metric-val,
.fut-card.fut-card[data-card-id] .metric-val {
  height: auto;
  align-content: center;
}
#cards-container.tone-split .metric-lbl,
.fut-card.fut-card[data-card-id] .metric-lbl {
  height: auto;
  min-height: 0;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  text-align: center;
}
.card-metrics-grid:has(> :nth-child(2):last-child),
.card-metrics-grid:has(> :nth-child(1):last-child) {
  grid-template-columns: repeat(var(--metric-count, 2), calc((100% - 2 * var(--metric-gap, 2cqw)) / 3));
  justify-content: center;
}
.card-metrics-grid:has(> :nth-child(1):last-child) { --metric-count: 1; }
.card-metrics-grid:has(> :nth-child(2):last-child) { --metric-count: 2; }

/* Runner-up rows in the card dialog: values like "€220K" / "€94.0M" are single words. They never wrap (no "€220" + "K") and shrink to fit;
   the metrics column is wide enough for two such values side by side. */
.modal-podium-stack .podium-card.has-metrics { grid-template-columns: minmax(0, 1fr) minmax(140px, 44%); }
.podium-metric dd { display: block; white-space: nowrap; overflow-wrap: normal; word-break: keep-all; overflow: hidden; text-overflow: clip; font-size: 17px; }
.podium-metric dt { overflow-wrap: break-word; }
.modal-face-card .metric-val { white-space: nowrap; overflow-wrap: normal; }
@media (max-width: 560px) {
  .modal-podium-stack .podium-card.has-metrics { grid-template-columns: minmax(0, 1fr) minmax(112px, 40%); }
  .podium-metrics { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; }
}

/* The detail column may be taller than the dialog (vote block + closed-vote notice): a slim visible scrollbar instead of a silent cut. */
.modal-detail-body { scrollbar-width: thin; -ms-overflow-style: auto; scrollbar-color: rgba(255, 255, 255, 0.35) transparent; padding-right: 6px; }
.modal-detail-body::-webkit-scrollbar { display: block; width: 6px; height: auto; }
.modal-detail-body::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, 0.3); border-radius: 99px; }
.modal-detail-body::-webkit-scrollbar-track { background: transparent; }
.modal-detail-body .cm-vote-block { gap: 10px; padding: 12px; }
.modal-detail-body .cm-vote-btn { padding: 9px 8px; }
.modal-detail-body .cm-vote-msg { margin: 0; }