/* ===== PADEL MANAGER PRO - PROFESSIONAL DARK THEME ===== */
/* Clean, modern dark UI with green accent (#7CFF00) */
/* Professional aesthetic - no debug/terminal styling */

/* --- CSS Variables --- */
:root {
  --bg-darkest: #0D0D0D;
  --bg-dark: #121212;
  --bg-panel: #161618;
  --bg-card: #1a1a1c;
  --bg-input: #0e0e10;
  --bg-inner: #1c1c1f;
  --bg-hover: #222225;
  --accent: #7CFF00;
  --accent-dim: rgba(124, 255, 0, 0.08);
  --accent-border: rgba(124, 255, 0, 0.25);
  --accent-hover: #6BDD00;
  --text-primary: #f4f4f5;
  --text-secondary: #b4b4b8;
  --text-muted: #8e8e93;
  --text-dim: #a1a1aa;
  --text-ghost: #636366;
  --border-default: #2c2c2e;
  --border-subtle: #232325;
  --border-input: #3a3a3c;
  --red-error: #ff453a;
  --green-ok: #30d158;
  --gold: #ffd60a;
  --font-sans: 'Inter', sans-serif;
  --font-mono: 'Roboto Mono', monospace;
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --radius-xl: 24px;
}

/* --- Reset & Base --- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
* { font-family: var(--font-sans); }
.font-mono, .fm, code, pre { font-family: var(--font-mono) !important; }

html { scroll-behavior: smooth; }

body {
  background-color: var(--bg-darkest);
  color: var(--text-secondary);
  min-height: 100vh;
  -webkit-tap-highlight-color: transparent;
  overflow-x: hidden;
  display: flex;
  flex-direction: column;
}

::selection { background: var(--accent); color: black; }

/* --- Custom Scrollbar --- */
::-webkit-scrollbar { width: 4px; height: 4px; }
::-webkit-scrollbar-track { background: var(--bg-panel); }
::-webkit-scrollbar-thumb { background: var(--border-default); border-radius: 4px; }
::-webkit-scrollbar-thumb:hover { background: var(--accent); }

/* Hide number input arrows */
input[type="number"]::-webkit-inner-spin-button,
input[type="number"]::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
input[type="number"] { -moz-appearance: textfield; }

/* --- Background (subtle, no orbs) --- */
#mesh-bg { display: none; }

/* --- Header --- */
header {
  background: var(--bg-darkest) !important;
  border-bottom: 1px solid var(--border-subtle);
  transition: background .35s ease;
}
header.glass {
  background: rgba(13,13,13,0.92) !important;
  backdrop-filter: blur(20px) !important;
  -webkit-backdrop-filter: blur(20px) !important;
  box-shadow: 0 1px 0 rgba(255,255,255,0.02), 0 4px 20px rgba(0,0,0,.3) !important;
}
#hdr-strip { height: 0; overflow: hidden; transition: height .38s cubic-bezier(.4,0,.2,1), opacity .3s ease; opacity: 0; display: flex; align-items: center; padding: 0 12px; gap: 8px; }
#hdr-strip.visible { height: 36px; opacity: 1; }
#hdr-strip-name { font-size: 13px; font-weight: 700; color: var(--text-primary); flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#hdr-strip-sub { font-size: 11px; color: var(--text-muted); flex-shrink: 0; }
#hdr-toggle { display: none; position: absolute; bottom: -10px; left: 50%; transform: translateX(-50%); z-index: 60; background: var(--bg-panel); border: 1px solid var(--border-default); border-radius: 999px; padding: 3px 12px; cursor: pointer; transition: all .2s; }
#hdr-toggle:hover { border-color: var(--accent); }
#hdr-toggle svg { display: block; transition: transform .3s ease; stroke: var(--text-muted); }
#hdr-toggle.collapsed svg { transform: rotate(180deg); }
#hdr-body { overflow: hidden; max-height: 120px; transition: max-height .3s ease, opacity .25s ease; }
#hdr-body.hdr-hidden { max-height: 0 !important; opacity: 0; pointer-events: none; }

/* --- Step Pills --- */
.step-pill { flex: 1; height: 3px; border-radius: 999px; transition: all .5s cubic-bezier(.4,0,.2,1); }

/* --- Splash Screen --- */
#splash { position: fixed; inset: 0; z-index: 9999; background: var(--bg-darkest); display: flex; flex-direction: column; align-items: center; justify-content: center; transition: opacity .4s ease, visibility .4s ease; }
#splash.fade-out { opacity: 0; visibility: hidden; pointer-events: none; }
.splash-logo { width: 84px; height: 84px; background: var(--bg-panel); border: 2px solid var(--accent); border-radius: var(--radius-xl); display: flex; align-items: center; justify-content: center; animation: popIn .65s .2s both cubic-bezier(.175,.885,.32,1.275); }
.splash-title { font-size: 28px; font-weight: 900; color: var(--text-primary); margin: 16px 0 4px; letter-spacing: -.5px; animation: fadeSlide .5s .5s both; display: flex; align-items: center; gap: 8px; }
.splash-sub { font-size: 14px; color: var(--text-muted); margin-bottom: 32px; animation: fadeSlide .5s .6s both; }
.splash-bar-track { width: 200px; height: 4px; background: var(--border-default); border-radius: 999px; overflow: hidden; animation: fadeSlide .5s .7s both; }
.splash-bar-fill { height: 100%; border-radius: 999px; background: var(--accent); width: 0%; transition: width .1s linear; }
.splash-msg { font-size: 12px; color: var(--text-muted); margin-top: 10px; animation: fadeSlide .5s .8s both; }

.splash-svg-wrap { position: relative; }
.splash-svg-wrap svg { position: relative; z-index: 5; }

/* ===== GENERATE LOADER ===== */
#gen-loader { position: fixed; inset: 0; z-index: 9998; background: var(--bg-darkest); display: none; align-items: center; justify-content: center; }
.gen-grid-bg { display: none; }
.gen-scanline { display: none; }
.gen-sidebar { display: none !important; }
.gen-tech-block { margin-bottom: 20px; }
.gen-tech-title { color: var(--text-ghost); font-size: 10px; font-weight: 600; text-transform: uppercase; letter-spacing: 1.5px; margin-bottom: 6px; padding-left: 0; }
.gen-tech-value { color: var(--text-secondary); font-size: 12px; line-height: 1.6; }
.gen-tech-neon { color: var(--accent); }
.gen-loader-center { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); z-index: 10; text-align: center; width: 90%; max-width: 400px; }
.gen-svg-wrapper { position: relative; width: 220px; height: 220px; margin: 0 auto 30px; }
.gen-svg-loader { width: 100%; height: 100%; position: relative; z-index: 5; }
.gen-status-title { font-size: 16px; font-weight: 700; letter-spacing: 2px; text-transform: uppercase; color: #fff; margin-bottom: 8px; }
.gen-status-sub { font-size: 12px; color: var(--text-muted); letter-spacing: 0.5px; }
.geo-ring { transform-origin: 130px 130px; animation: rotateGeo 12s cubic-bezier(0.4,0,0.2,1) infinite; }
.ball-lines { transform-origin: 130px 130px; animation: rotateBall 25s linear infinite; }
.paddle-core { animation: paddlePulse 2s ease-in-out infinite; }
@keyframes rotateGeo { 0%{transform:rotate(0deg)} 25%{transform:rotate(90deg)} 50%{transform:rotate(180deg)} 75%{transform:rotate(270deg)} 100%{transform:rotate(360deg)} }
@keyframes rotateBall { 0%{transform:rotate(360deg)} 100%{transform:rotate(0deg)} }
@keyframes paddlePulse { 0%,100%{opacity:.85} 50%{opacity:1} }
.gen-skip-btn { position: absolute; bottom: 30px; left: 50%; transform: translateX(-50%); z-index: 10; background: transparent; border: 1px solid var(--border-default); color: var(--text-muted); padding: 10px 24px; font-size: 12px; text-transform: uppercase; letter-spacing: 1px; cursor: pointer; border-radius: var(--radius-md); transition: all .2s ease; }
.gen-skip-btn:hover { border-color: var(--accent); color: var(--accent); }

/* --- Champion Celebration --- */
#champ { position: fixed; inset: 0; z-index: 9970; background: rgba(0,0,0,.8); display: none; align-items: center; justify-content: center; padding: 20px; }
.champ-card { background: linear-gradient(135deg, #1a1a1c, #222225); border-radius: var(--radius-xl); padding: 44px 32px; text-align: center; max-width: 340px; width: 100%; box-shadow: 0 20px 60px rgba(0,0,0,.5); border: 1px solid var(--accent-border); animation: popIn .5s cubic-bezier(.175,.885,.32,1.275); }
.champ-trophy { display: flex; justify-content: center; animation: trBounce 1.2s ease infinite; }
@keyframes trBounce { 0%,100%{transform:translateY(0) rotate(-4deg)} 50%{transform:translateY(-14px) rotate(4deg)} }
#confetti { position: fixed; inset: 0; pointer-events: none; z-index: 9960; }

/* --- Neon Badge --- */
.neon-badge { background: var(--accent); color: black; font-size: 10px; padding: 2px 8px; border-radius: var(--radius-sm); font-weight: 700; letter-spacing: 0.05em; }

/* --- Status Indicator --- */
.status-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--accent); }

/* ===== TAB INDICATOR ===== */
.tab-group { position: relative; display: grid; gap: 4px; background: var(--bg-input); padding: 4px; border-radius: var(--radius-md); border: 1px solid var(--border-subtle); }
.tab-group .tab-indicator { position: absolute; height: calc(100% - 8px); top: 4px; background: var(--accent); border-radius: 8px; transition: all .25s cubic-bezier(.4,0,.2,1); z-index: 0; }
.tab-group button { position: relative; z-index: 1; padding: 8px 12px; font-size: 12px; font-weight: 600; border-radius: 8px; border: none; background: transparent; cursor: pointer; transition: color .2s; }
.tab-group button.active { color: black; font-weight: 700; }
.tab-group button:not(.active) { color: var(--text-muted); }
.tab-group button:not(.active):hover { color: var(--text-primary); }

/* ===== CATEGORY CHIPS (multi-select) ===== */
.cat-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.cat-chip {
  position: relative;
  padding: 5px 11px;
  font-size: 11px;
  font-weight: 600;
  font-family: ui-monospace, SFMono-Regular, 'Cascadia Mono', 'Roboto Mono', monospace;
  letter-spacing: .02em;
  text-transform: uppercase;
  border-radius: 8px;
  border: 1px solid #27272a;
  background: transparent;
  color: #52525b;
  cursor: pointer;
  transition: all .18s ease;
  user-select: none;
  white-space: nowrap;
}
.cat-chip:hover { border-color: #3f3f46; color: #a1a1aa; }
.cat-chip.active {
  border-color: var(--accent);
  color: var(--accent);
  background: rgba(124,255,0,.06);
  box-shadow: 0 0 8px rgba(124,255,0,.1);
}

/* ===== PRIMARY BUTTONS ===== */
.neon-btn { background: var(--accent); color: black; font-weight: 700; font-size: 13px; padding: 14px 32px; border-radius: 12px; border: none; cursor: pointer; transition: all .2s; letter-spacing: 0.03em; text-transform: uppercase; display: flex; align-items: center; justify-content: center; gap: 8px; position: relative; overflow: hidden; }
.neon-btn:hover { background: var(--accent-hover); }
.neon-btn:disabled { opacity: .4; cursor: not-allowed; }
.neon-btn:disabled:hover { background: var(--accent); }
.neon-btn-sm { padding: 8px 16px; font-size: 11px; }

.ghost-btn { background: transparent; border: 1px solid var(--border-default); color: #d4d4d8; font-weight: 600; font-size: 11px; padding: 8px 16px; border-radius: 12px; cursor: pointer; transition: all .2s; text-transform: uppercase; letter-spacing: 0.03em; }
.ghost-btn:hover { border-color: var(--accent); color: var(--accent); }

.danger-btn { background: transparent; border: 1px solid rgba(255,69,58,0.3); color: #ff6961; font-weight: 600; font-size: 11px; padding: 8px 16px; border-radius: 12px; cursor: pointer; transition: all .2s; }
.danger-btn:hover { border-color: var(--red-error); background: rgba(255,69,58,0.08); }

/* ===== FORMAT SELECTOR CARDS ===== */
.format-card { background: var(--bg-input); border: 1px solid var(--border-subtle); border-radius: 16px; padding: 14px; cursor: pointer; transition: all .25s; display: flex; flex-direction: column; gap: 4px; }
.format-card:hover { border-color: var(--border-default); background: var(--bg-hover); }
.format-card.active { border-color: var(--accent); background: var(--accent-dim); }
.format-dot { width: 8px; height: 8px; border-radius: 50%; background: #52525b; flex-shrink: 0; transition: all .2s; }
.format-card.active .format-dot { background: var(--accent); }

/* ===== RADIO CARDS ===== */
.radio-card { background: var(--bg-input); border: 1px solid var(--border-subtle); border-radius: 16px; padding: 12px; cursor: pointer; transition: all .2s; display: flex; flex-direction: column; justify-content: space-between; }
.radio-card:hover { border-color: var(--border-default); }
.radio-card.selected, .radio-card.active { border-color: var(--accent); background: var(--accent-dim); }
.radio-card .radio-dot { width: 12px; height: 12px; border-radius: 50%; border: 2px solid var(--border-default); display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.radio-card.selected .radio-dot, .radio-card.active .radio-dot { border-color: var(--accent); }
.radio-card.selected .radio-dot::after, .radio-card.active .radio-dot::after { content: ''; width: 6px; height: 6px; border-radius: 50%; background: var(--accent); }

/* ===== DATA TABLE ===== */
.ltable { width: 100%; border-collapse: collapse; }
.ltable th { background: var(--bg-input); padding: 10px 8px; text-align: left; font-size: 11px; font-weight: 600; text-transform: uppercase; color: var(--text-muted); letter-spacing: .4px; border-bottom: 1px solid var(--border-default); }
.ltable td { padding: 10px 8px; border-bottom: 1px solid var(--border-subtle); font-size: 13px; color: var(--text-secondary); }
.ltable tr:hover td { background: var(--bg-hover); }
.ltable tr.highlight td { border-left: 2px solid var(--accent); background: var(--accent-dim); }

/* --- Score Pills --- */
.sp { font-size: 11px; font-weight: 700; padding: 2px 6px; border-radius: var(--radius-sm); font-family: var(--font-mono); background: var(--bg-input); color: #d4d4d8; }
.sp.w { background: rgba(48,209,88,0.12); color: var(--green-ok); }
.sp.l { background: rgba(255,69,58,0.1); color: #ff6961; }

/* ===== BRACKET STYLES ===== */
.bwrap { overflow-x: auto; padding: 16px; background: var(--bg-input); border-radius: 16px; }
.brow { display: flex; gap: 28px; min-width: max-content; }
.bcol { display: flex; flex-direction: column; min-width: 185px; }
.bcol-title { text-align: center; font-weight: 600; font-size: 11px; text-transform: uppercase; letter-spacing: 1px; color: var(--text-muted); margin-bottom: 10px; }
.bmatch { background: var(--bg-panel); border: 1px solid var(--border-default); border-radius: 12px; margin: 8px 0; overflow: hidden; cursor: pointer; transition: transform .15s, border-color .15s; }
.bmatch:hover { transform: scale(1.02); border-color: var(--text-muted); }
.bmatch.done { border-color: var(--green-ok); }
.bmatch.final { border: 2px solid var(--gold); }
.bteam { display: flex; justify-content: space-between; align-items: center; padding: 9px 12px; font-size: 13px; color: #e4e4e7; }
.bteam:first-child { border-bottom: 1px solid var(--border-subtle); }
.bteam.winner { background: rgba(48,209,88,0.06); font-weight: 700; color: var(--green-ok); }
.bteam.loser { color: var(--text-muted); }
.bscore { font-weight: 800; font-family: var(--font-mono); background: var(--bg-input); padding: 3px 8px; border-radius: 8px; min-width: 30px; text-align: center; font-size: 12px; color: #e4e4e7; }
.bteam.winner .bscore { background: var(--green-ok); color: white; }

/* --- Bracket format-specific layouts --- */
.brow.brow-vertical { display: block; min-width: auto; gap: 0; }
.bracket-leaderboard { width: 100%; }
.bracket-leaderboard-row { display: flex; align-items: center; gap: 8px; padding: 7px 12px; border-radius: 10px; margin-bottom: 3px; transition: background .2s, border-color .2s; }
.bracket-leaderboard-row:hover { filter: brightness(1.1); }
.bracket-leaderboard-bar { margin: -1px 12px 4px 46px; height: 2px; border-radius: 1px; background: var(--border-subtle); overflow: hidden; }
.bracket-leaderboard-bar-fill { height: 100%; border-radius: 1px; transition: width .5s ease; }
.bracket-stats-row { display: flex; gap: 12px; margin-bottom: 12px; padding: 10px 14px; border-radius: 12px; }
.bracket-stats-cell { flex: 1; }
.bracket-stats-label { font-size: 10px; color: var(--text-muted); text-transform: uppercase; font-weight: 700; letter-spacing: .08em; }
.bracket-stats-value { font-size: 20px; font-weight: 900; }
.bracket-tier-label { font-size: 9px; font-weight: 800; text-transform: uppercase; letter-spacing: .12em; padding: 6px 12px 2px; }

/* --- Match Cards --- */
.mcard { background: var(--bg-panel); border-radius: 12px; padding: 14px; border-left: 3px solid var(--accent); cursor: pointer; margin-bottom: 8px; transition: transform .15s, border-color .15s; }
.mcard:hover { transform: translateX(4px); border-left-color: white; }
.mcard.won { border-left-color: var(--green-ok); background: rgba(48,209,88,0.04); }

/* ===== TICKER MARQUEE ===== */
.ticker-bar { background: var(--bg-panel); border: 1px solid var(--border-subtle); border-radius: 16px; height: 48px; overflow: hidden; display: flex; align-items: center; position: relative; }
.ticker-anchor-left { background: var(--accent); color: black; font-size: 10px; font-weight: 700; padding: 4px 12px; letter-spacing: .05em; text-transform: uppercase; flex-shrink: 0; z-index: 2; display: flex; align-items: center; gap: 6px; }
.ticker-scroll { flex: 1; overflow: hidden; position: relative; height: 100%; display: flex; align-items: center; }
.ticker-content { display: flex; gap: 48px; animation: tickerScroll 25s linear infinite; white-space: nowrap; padding-left: 20px; }
.ticker-content:hover { animation-play-state: paused; }
.ticker-item { font-size: 11px; color: var(--text-muted); display: flex; align-items: center; gap: 8px; flex-shrink: 0; }
.ticker-item .neon { color: var(--accent); }
.ticker-anchor-right { color: var(--accent); font-size: 11px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; padding: 4px 12px; flex-shrink: 0; z-index: 2; display: flex; align-items: center; gap: 6px; }
@keyframes tickerScroll { 0% { transform: translateX(0); } 100% { transform: translateX(-50%); } }

/* ===== SPONSOR / SPOTLIGHT CARDS ===== */
.sponsor-card { background: var(--bg-input); border: 1px solid var(--border-subtle); border-radius: 16px; padding: 12px; margin-bottom: 8px; display: flex; align-items: center; gap: 10px; }
.spotlight-card { background: var(--bg-input); border: 1px solid var(--border-subtle); border-radius: 16px; padding: 8px; border-left: 2px solid var(--accent); }

/* ===== AD SLOT STYLES ===== */
.ad-slot { background: var(--bg-input); border: 1px dashed var(--border-default); border-radius: 12px; padding: 12px; display: flex; flex-direction: column; align-items: center; justify-content: center; min-height: 140px; transition: all .25s; position: relative; overflow: hidden; }
.ad-slot::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 2px; background: linear-gradient(90deg, transparent, var(--accent-border), transparent); opacity: 0; transition: opacity .3s; }
.ad-slot:hover { border-color: var(--accent-border); background: var(--accent-dim); }
.ad-slot:hover::before { opacity: 1; }
.ad-slot-label { font-size: 10px; font-weight: 600; color: var(--text-ghost); text-transform: uppercase; letter-spacing: 1px; }
.ad-slot-icon { opacity: 0.3; margin-bottom: 4px; }

.sponsor-slot { background: var(--bg-input); border: 1px solid var(--border-subtle); border-radius: 12px; padding: 12px 16px; display: flex; align-items: center; justify-content: center; gap: 8px; transition: all .25s; min-height: 56px; }
.sponsor-slot:hover { border-color: var(--accent-border); background: var(--accent-dim); }

/* Hide ad management in public view - accessible via modal only */
.dash-ad-admin { display: none; }

/* --- Ad config map --- */
#map-banner { transition: all .3s; }
#map-banner:hover { border-color: var(--accent); }

/* --- Toast --- */
#toast { position: fixed; bottom: 76px; left: 50%; transform: translateX(-50%) translateY(14px); background: var(--bg-panel); color: var(--accent); padding: 9px 18px; border-radius: 12px; font-size: 13px; font-weight: 600; z-index: 9990; opacity: 0; transition: all .28s cubic-bezier(.4,0,.2,1); pointer-events: none; white-space: nowrap; box-shadow: 0 8px 28px rgba(0,0,0,.4); border: 1px solid var(--accent-border); }
#toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }

/* ===== ANIMATIONS ===== */
@keyframes popIn { from{transform:scale(.7);opacity:0} to{transform:scale(1);opacity:1} }
@keyframes fadeSlide { from{opacity:0;transform:translateY(-10px)} to{opacity:1;transform:translateY(0)} }
@keyframes slideUp { from{opacity:0;transform:translateY(24px)} to{opacity:1;transform:translateY(0)} }
@keyframes rowSlideIn { from{opacity:0;transform:translateY(-10px)} to{opacity:1;transform:translateY(0)} }
.manim { animation: slideUp .32s cubic-bezier(.175,.885,.32,1.275); }
.animate-row { animation: rowSlideIn 0.3s cubic-bezier(.4,0,.2,1) forwards; }
.animate-neon-btn { }
.ico-glow { }

/* ===== SVG FORMAT PREVIEW ANIMATIONS ===== */
/* Fade in with slight scale for SVG elements */
@keyframes svgFadeIn {
  from { opacity: 0; transform: scale(0.85); }
  to { opacity: 1; transform: scale(1); }
}

/* Line drawing animation using stroke-dashoffset */
@keyframes svgDrawLine {
  from { stroke-dashoffset: var(--dash-len, 100); }
  to { stroke-dashoffset: 0; }
}

/* Pulse glow for highlighted SVG elements */
@keyframes svgPulseGlow {
  0%, 100% { filter: drop-shadow(0 0 2px var(--accent, #39FF14)); opacity: 0.7; }
  50% { filter: drop-shadow(0 0 6px var(--accent, #39FF14)); opacity: 1; }
}

/* Rotation for Americano wheel animation */
@keyframes svgRotate {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

/* Bounce scale for Mexicano sorting animation */
@keyframes svgBounceScale {
  0% { transform: scale(0); opacity: 0; }
  60% { transform: scale(1.2); opacity: 1; }
  100% { transform: scale(1); opacity: 1; }
}

/* Slide in from left for Swiss pairing lines */
@keyframes svgSlideIn {
  from { opacity: 0; transform: translateX(-8px); }
  to { opacity: 1; transform: translateX(0); }
}

/* Winner path highlight for elimination bracket */
@keyframes svgWinnerPath {
  0% { stroke-width: 1.5; opacity: 0.5; }
  50% { stroke-width: 3; opacity: 1; }
  100% { stroke-width: 2; opacity: 0.9; }
}

/* Ensure SVG preview container allows transforms */
#format-preview-svg {
  overflow: visible;
}
#format-preview-svg g {
  transform-origin: center center;
}
#format-preview-svg line,
#format-preview-svg circle,
#format-preview-svg rect,
#format-preview-svg text {
  transform-origin: center center;
}

/* --- Icon Animations (keep hover, no glow) --- */
.ico { display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; transition: transform .25s cubic-bezier(.4,0,.2,1); }
.ico svg { display: block; }
.ico-float { animation: icoFloat 3s ease-in-out infinite; }
@keyframes icoFloat { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-5px)} }
.ico-hbounce:hover svg { animation: icoBounce .45s ease; }
.ico-hwiggle:hover svg { animation: icoWiggle .45s ease; }
.ico-hshake:hover svg { animation: icoShake .45s ease; }
.ico-hrotate:hover { transform: rotate(180deg) !important; }
.ico-hscale:hover { transform: scale(1.25) !important; }
@keyframes icoBounce { 0%,100%{transform:translateY(0)} 40%{transform:translateY(-5px)} 70%{transform:translateY(-2px)} }
@keyframes icoWiggle { 0%,100%{transform:rotate(0)} 25%{transform:rotate(-18deg)} 75%{transform:rotate(18deg)} }
@keyframes icoShake { 0%,100%{transform:rotate(0) scale(1)} 20%{transform:rotate(-20deg) scale(1.2)} 50%{transform:rotate(18deg) scale(1.2)} 75%{transform:rotate(-10deg)} }

.ico-badge { display: inline-flex; align-items: center; justify-content: center; border-radius: var(--radius-md); padding: 6px; flex-shrink: 0; }
.ico-blue { background: linear-gradient(135deg, var(--accent), #8bcc00); color: black; }
.ico-green { background: linear-gradient(135deg, #4ade80, #16a34a); color: white; }
.ico-purple { background: linear-gradient(135deg, #a78bfa, #7c3aed); color: white; }
.ico-gold { background: linear-gradient(135deg, #fbbf24, #f59e0b); color: black; }
.ico-red { background: linear-gradient(135deg, #f87171, #dc2626); color: white; }

.btn-shine::after { content: ''; position: absolute; inset: 0; background: linear-gradient(105deg, transparent 35%, rgba(255,255,255,.15) 50%, transparent 65%); transform: translateX(-100%) skewX(-15deg); transition: none; }
.btn-shine:hover::after { transform: translateX(150%) skewX(-15deg); transition: transform .55s ease; }
.btn-pulse { }

.btn-hdr { transition: transform .2s ease, background .2s ease !important; border: 1px solid var(--border-default); background: transparent; color: #d4d4d8; border-radius: 12px; }
.btn-hdr:hover { transform: scale(1.05) !important; border-color: var(--accent); color: var(--accent); }

button { position: relative; overflow: hidden; -webkit-tap-highlight-color: transparent; user-select: none; transition: transform .15s ease; min-height: 36px; }
button:active { transform: scale(0.97) !important; }
button:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
nav button { min-height: 48px; }
.ripple { position: absolute; border-radius: 50%; background: rgba(124,255,0,.15); transform: scale(0); animation: rippleOut .55s ease-out forwards; pointer-events: none; z-index: 10; }
@keyframes rippleOut { to{transform:scale(4.5);opacity:0} }

/* --- Cal Cell --- */
.cal-cell { width: 100%; aspect-ratio: 1; border: 1px solid var(--border-default); border-radius: 10px; display: flex; align-items: center; justify-content: center; font-size: 10px; cursor: pointer; transition: all .15s; color: #d4d4d8; background: var(--bg-input); min-height: 36px; }
.cal-cell.active { border-color: var(--accent-border); background: var(--accent-dim); color: var(--accent); }

/* --- Telemetry --- */
.telemetry-row { display: flex; justify-content: space-between; align-items: center; padding: 6px 0; border-bottom: 1px solid var(--border-subtle); font-size: 11px; }
.telemetry-row:last-child { border-bottom: none; }
.telemetry-label { color: var(--text-muted); }
.telemetry-value { color: var(--accent); font-weight: 700; }

/* --- Tour Banner --- */
#tour-banner { border-radius: 20px; overflow: hidden; background: linear-gradient(135deg, #0d0d0d 0%, #1a1a1c 55%, #111113 100%); border: 1px solid var(--border-default); box-shadow: 0 8px 40px rgba(0,0,0,.3); position: relative; margin: 0 auto 2rem; max-width: 800px; min-height: 172px; }
.banner-gold { position: absolute; left: 0; top: 0; bottom: 0; width: 4px; background: var(--accent); z-index: 2; }
.banner-inner { position: relative; height: 172px; overflow: hidden; }
.banner-slide { position: absolute; inset: 0; display: flex; align-items: center; padding: 0 90px 0 24px; gap: 16px; opacity: 0; transform: translateY(8px); transition: opacity .45s cubic-bezier(.4,0,.2,1), transform .45s cubic-bezier(.4,0,.2,1); color: white; pointer-events: none; min-width: 0; overflow: hidden; }
.banner-slide.active { opacity: 1; transform: translateY(0); pointer-events: auto; }
.banner-emoji { font-size: 32px; flex-shrink: 0; line-height: 1; }
.banner-txt-wrap { flex: 1; min-width: 0; overflow: hidden; }
.banner-txt { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: rgba(255,255,255,.92); font-size: 18px; font-weight: 600; }
.banner-txt strong { font-weight: 800; color: #fff; }
.banner-txt-sub { display: block; font-size: 14px; color: rgba(255,255,255,.6); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-top: 4px; }
.banner-ad-logo { width: 64px; height: 64px; border-radius: 16px; object-fit: contain; background: rgba(255,255,255,.08); flex-shrink: 0; }
.banner-ad-logo-wide { max-width: 160px; height: 64px; border-radius: 16px; object-fit: contain; background: rgba(255,255,255,.08); flex-shrink: 0; }
.banner-ad-cta { font-size: 12px; font-weight: 800; color: var(--accent); background: var(--accent-dim); padding: 4px 12px; border-radius: 999px; flex-shrink: 0; border: 1px solid var(--accent-border); white-space: nowrap; }
.banner-ad { display: flex; align-items: center; gap: 16px; width: 100%; min-width: 0; text-decoration: none; color: white; overflow: hidden; }
.banner-dots { position: absolute; right: 50px; bottom: 14px; display: flex; gap: 6px; z-index: 3; }
.bdot { width: 6px; height: 6px; border-radius: 50%; background: rgba(255,255,255,.25); cursor: pointer; transition: all .3s ease; }
.bdot.active { background: var(--accent); transform: scale(1.35); }
.banner-ad-video { max-width: 140px; height: 100px; border-radius: 16px; object-fit: cover; flex-shrink: 0; background: #000; }

/* --- Full-Width Banner Ad (fills entire banner area) --- */
.banner-ad-full { position: absolute; inset: 0; display: flex; align-items: flex-end; overflow: hidden; border-radius: 20px; }
.banner-ad-full-media { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; border-radius: 20px; }
.banner-ad-full-overlay { position: absolute; inset: 0; background: linear-gradient(to top, rgba(0,0,0,.7) 0%, rgba(0,0,0,.2) 50%, rgba(0,0,0,.05) 100%); z-index: 1; }
.banner-ad-full-text { position: relative; z-index: 2; padding: 0 90px 16px 24px; width: 100%; display: flex; flex-direction: column; gap: 2px; }

/* ─── Hero Sponsor Banner ─── */
.hero-sponsor-banner {
  position: relative;
  overflow: hidden;
  background: linear-gradient(135deg, rgba(124,255,0,0.08) 0%, rgba(124,255,0,0.02) 50%, rgba(124,255,0,0.05) 100%);
  border: 1px solid rgba(124,255,0,0.2);
  border-radius: 14px;
  min-height: 80px;
  flex-shrink: 0;
}
.hero-sponsor-banner::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 4px;
  background: var(--accent);
  z-index: 2;
}
.hero-sponsor-banner::after {
  content: 'PATROCINADOR OFICIAL';
  position: absolute;
  top: 6px;
  right: 10px;
  font-size: 7px;
  font-weight: 800;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--accent);
  opacity: 0.6;
  font-family: var(--font-mono);
}
.hero-sponsor-inner {
  position: relative;
  height: 80px;
  overflow: hidden;
}
.hero-sponsor-slide {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  padding: 0 20px;
  gap: 16px;
  opacity: 0;
  transform: translateX(12px);
  transition: opacity .5s, transform .5s;
  pointer-events: none;
}
.hero-sponsor-slide.active {
  opacity: 1;
  transform: translateX(0);
  pointer-events: auto;
}
.hero-sponsor-media {
  width: 56px;
  height: 56px;
  border-radius: 12px;
  overflow: hidden;
  flex-shrink: 0;
  background: rgba(0,0,0,0.2);
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(124,255,0,0.15);
}
.hero-sponsor-media img,
.hero-sponsor-media video {
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.hero-sponsor-emoji {
  font-size: 36px;
  flex-shrink: 0;
  line-height: 1;
}
.hero-sponsor-text-wrap {
  flex: 1;
  min-width: 0;
}
.hero-sponsor-name {
  display: block;
  font-size: 18px;
  font-weight: 900;
  color: var(--text-primary);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  letter-spacing: -.01em;
}
.hero-sponsor-tagline {
  display: block;
  font-size: 12px;
  color: var(--text-secondary);
  margin-top: 2px;
}
.hero-sponsor-cta {
  font-size: 10px;
  font-weight: 800;
  color: var(--accent);
  background: var(--accent-dim);
  padding: 6px 16px;
  border-radius: 999px;
  flex-shrink: 0;
  border: 1px solid var(--accent-border);
  white-space: nowrap;
  cursor: pointer;
}
.hero-sponsor-dots {
  position: absolute;
  bottom: 8px;
  left: 20px;
  display: flex;
  gap: 6px;
  z-index: 3;
}
.hero-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--border-default);
  cursor: pointer;
  transition: all .2s;
}
.hero-dot.active {
  background: var(--accent);
  box-shadow: 0 0 8px rgba(124,255,0,0.3);
}
/* Full-width image ads in hero banner */
.hero-sponsor-full {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: flex-end;
  overflow: hidden;
}
.hero-sponsor-full img,
.hero-sponsor-full video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.hero-sponsor-full-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(0,0,0,.75) 0%, rgba(0,0,0,.2) 50%, rgba(0,0,0,.05) 100%);
  z-index: 1;
}
.hero-sponsor-full-text {
  position: relative;
  z-index: 2;
  padding: 0 20px 12px;
  width: 100%;
}

/* ─── Sponsor Strips (fullscreen left/right) ─── */
.dash-sponsor-strip-left,
.dash-sponsor-strip-right {
  display: none;
  flex-direction: column;
  gap: 0;
  overflow: hidden;
  flex-shrink: 0;
  width: 56px;
  background: var(--bg-panel);
}
.dash-sponsor-strip-left {
  border-right: 1px solid var(--border-subtle);
}
.dash-sponsor-strip-right {
  border-left: 1px solid var(--border-subtle);
}
.sponsor-strip-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0;
  width: 100%;
}
.sponsor-strip-item {
  width: 56px;
  height: 56px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-bottom: 1px solid var(--border-subtle);
  flex-shrink: 0;
  background: var(--bg-input);
  transition: all .2s;
  cursor: pointer;
  position: relative;
}
.sponsor-strip-item:hover {
  background: var(--accent-dim);
}
.sponsor-strip-item img,
.sponsor-strip-item video {
  width: 40px;
  height: 40px;
  object-fit: contain;
  border-radius: 6px;
}
.sponsor-strip-item .strip-emoji {
  font-size: 22px;
}
.sponsor-strip-label {
  width: 100%;
  padding: 4px 2px;
  font-size: 6px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .1em;
  text-align: center;
  color: var(--accent);
  background: var(--bg-darkest);
  border-bottom: 1px solid var(--border-subtle);
  flex-shrink: 0;
}

/* --- Stadium LED Ticker --- */
.stadium-ticker { width: 100%; overflow: hidden; position: relative; background: linear-gradient(90deg, #0a0a0b 0%, #111113 50%, #0a0a0b 100%); border: 1px solid var(--accent-border); border-radius: 14px; margin-bottom: 1rem; min-height: 48px; display: none; }
.stadium-ticker.has-items { display: block; }
.stadium-ticker::before, .stadium-ticker::after { content: ''; position: absolute; top: 0; bottom: 0; width: 60px; z-index: 2; pointer-events: none; }
.stadium-ticker::before { left: 0; background: linear-gradient(90deg, #0a0a0b, transparent); }
.stadium-ticker::after { right: 0; background: linear-gradient(270deg, #0a0a0b, transparent); }
.stadium-ticker-label { position: absolute; left: 0; top: 0; bottom: 0; width: 36px; background: var(--accent); display: flex; align-items: center; justify-content: center; z-index: 3; border-radius: 14px 0 0 14px; }
.stadium-ticker-label svg { width: 16px; height: 16px; }
.stadium-ticker-track { display: flex; align-items: center; height: 48px; padding-left: 44px; white-space: nowrap; animation: tickerScroll var(--ticker-duration, 30s) linear infinite; }
.stadium-ticker:hover .stadium-ticker-track { animation-play-state: paused; }
.stadium-ticker-item { display: inline-flex; align-items: center; gap: 8px; padding: 0 24px; flex-shrink: 0; cursor: pointer; transition: opacity .2s; }
.stadium-ticker-item:hover { opacity: .8; }
.stadium-ticker-item img { width: 28px; height: 28px; border-radius: 6px; object-fit: contain; }
.stadium-ticker-item .ticker-emoji { font-size: 20px; }
.stadium-ticker-item .ticker-text { font-size: 13px; font-weight: 700; color: rgba(255,255,255,.9); letter-spacing: .02em; }
.stadium-ticker-item .ticker-sub { font-size: 10px; color: rgba(255,255,255,.4); font-weight: 500; margin-left: 4px; }
.stadium-ticker-sep { display: inline-flex; align-items: center; justify-content: center; width: 6px; height: 6px; border-radius: 50%; background: var(--accent); opacity: .4; flex-shrink: 0; margin: 0 8px; }
@keyframes tickerScroll { 0% { transform: translateX(0); } 100% { transform: translateX(-50%); } }

/* --- Sponsor Cards (Sidebar) --- */
.sponsor-card-premium { background: linear-gradient(135deg, rgba(124,255,0,0.08) 0%, rgba(124,255,0,0.02) 100%); border: 1px solid rgba(124,255,0,0.25); border-radius: 16px; padding: 16px; display: flex; flex-direction: column; align-items: center; text-align: center; gap: 8px; transition: all .3s; position: relative; overflow: hidden; cursor: pointer; }
.sponsor-card-premium::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px; background: linear-gradient(90deg, transparent, var(--accent), transparent); }
.sponsor-card-premium:hover { border-color: var(--accent); transform: translateY(-2px); box-shadow: 0 8px 24px rgba(124,255,0,0.1); }
.sponsor-card-premium img { width: 100%; height: auto; border-radius: 8px; object-fit: contain; }
.sponsor-card-premium .sp-emoji { font-size: 28px; }
.sponsor-card-premium .sp-name { font-size: 14px; font-weight: 800; color: #f4f4f5; letter-spacing: -.01em; }
.sponsor-card-premium .sp-role { font-size: 9px; font-weight: 700; color: var(--accent); text-transform: uppercase; letter-spacing: .08em; }
.sponsor-card-premium .sp-url { font-size: 9px; color: rgba(255,255,255,.3); font-weight: 500; }

/* --- Ad Cards --- */
.ad-card { border: 1px solid var(--border-default); border-radius: 12px; padding: 12px; margin-bottom: 8px; background: var(--bg-panel); display: flex; align-items: center; gap: 10px; }
.ad-card-logo { width: 40px; height: 40px; border-radius: 10px; object-fit: contain; background: var(--bg-input); flex-shrink: 0; border: 1px solid var(--border-default); }

/* --- Player Edit Zone --- */
#player-edit-zone { position: fixed; inset: 0; z-index: 9998; background: rgba(7,7,8,0.95); display: none; overflow-y: auto; padding: 20px; }
.pe-card { background: var(--bg-panel); border-radius: var(--radius-xl); padding: 24px; max-width: 480px; margin: 40px auto; border: 1px solid var(--border-default); }
.pe-title { font-size: 24px; font-weight: 900; color: var(--text-primary); margin-bottom: 6px; }
.pe-subtitle { font-size: 13px; color: var(--text-muted); }
.pe-media-zone { width: 100%; aspect-ratio: 1; border-radius: 20px; background: var(--bg-input); border: 2px dashed var(--border-default); display: flex; align-items: center; justify-content: center; cursor: pointer; overflow: hidden; transition: all .3s ease; margin-bottom: 16px; position: relative; }
.pe-media-zone:hover { border-color: var(--accent); background: var(--accent-dim); }
.pe-media-zone img, .pe-media-zone video { width: 100%; height: 100%; object-fit: cover; border-radius: 20px; }
.pe-media-placeholder { display: flex; flex-direction: column; align-items: center; gap: 8px; color: var(--text-muted); }
.pe-media-badge { position: absolute; top: 10px; right: 10px; background: rgba(0,0,0,.6); backdrop-filter: blur(4px); padding: 4px 10px; border-radius: 999px; font-size: 10px; font-weight: 700; color: white; display: none; }
.pe-media-badge.show { display: block; }
.pe-form { display: grid; gap: 14px; }
.pe-label { font-size: 11px; font-weight: 700; color: #d4d4d8 !important; text-transform: uppercase; letter-spacing: .06em; margin-bottom: 4px; display: block; }
.pe-input { width: 100%; border: 1px solid var(--border-default); border-radius: 10px; padding: 10px 12px; color: #e4e4e7; font-size: 14px; outline: none; transition: border-color .2s; background: var(--bg-input); }
.pe-input:focus { border-color: var(--accent); }
.pe-select { width: 100%; border: 1px solid var(--border-default); border-radius: 10px; padding: 10px 12px; color: #e4e4e7; font-size: 14px; outline: none; cursor: pointer; appearance: none; background: var(--bg-input); }
.pe-select:focus { border-color: var(--accent); }
.pe-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.pe-progress { height: 6px; background: var(--border-default); border-radius: 999px; overflow: hidden; }
.pe-progress-fill { height: 100%; border-radius: 999px; background: var(--accent); width: 0%; transition: width .3s; }
.pe-video-indicator { position: absolute; bottom: 10px; left: 10px; background: rgba(0,0,0,.6); backdrop-filter: blur(4px); padding: 4px 10px; border-radius: 999px; font-size: 10px; font-weight: 700; color: white; display: none; align-items: center; gap: 4px; }
.pe-video-indicator.show { display: flex; }
.pe-btn-row { display: flex; gap: 10px; }
.pe-btn { flex: 1; padding: 12px; border-radius: 12px; font-weight: 700; font-size: 14px; border: none; cursor: pointer; display: flex; align-items: center; justify-content: center; gap: 8px; transition: all .2s; }
.pe-btn-cancel { background: var(--bg-hover); color: var(--text-secondary); border: 1px solid var(--border-default); }
.pe-btn-cancel:hover { background: var(--border-default); }
.pe-btn-save { background: var(--accent); color: black; }
.pe-btn-save:hover { background: var(--accent-hover); }

/* --- Dark Panel (Modals) --- */
.dark-panel { background: var(--bg-panel) !important; border: 1px solid var(--border-default) !important; border-radius: 20px !important; padding: 20px; }

/* ===== CARD STYLES (unified rounded) ===== */
.bg-\[\#111113\],
[class*="bg-[#111113]"] { border-radius: 16px !important; }

/* ===== CONTRAST FIXES ===== */
.text-zinc-400, .text-gray-400 { color: var(--text-secondary) !important; }
.text-zinc-500, .text-gray-500 { color: var(--text-muted) !important; }
label { color: #d4d4d8 !important; }
.btn-hdr { color: #d4d4d8 !important; border-color: var(--border-default) !important; }
.btn-hdr:hover { color: var(--accent) !important; border-color: var(--accent) !important; }
.ghost-btn { color: #d4d4d8 !important; border-color: var(--border-default) !important; }
.ghost-btn:hover { color: var(--accent) !important; border-color: var(--accent-border) !important; }
.danger-btn { color: #ff6961 !important; border-color: rgba(255,69,58,0.3) !important; }
.sp { color: #d4d4d8 !important; }
.sp.w { color: var(--green-ok) !important; }
.sp.l { color: #ff6961 !important; }
.bteam { color: #e4e4e7 !important; }
.bscore { color: #e4e4e7 !important; }
.cal-cell { color: #d4d4d8 !important; }
.cal-cell.active { color: var(--accent) !important; }
select option { background: var(--bg-panel) !important; color: #e4e4e7 !important; }
input[type="date"]::-webkit-calendar-picker-indicator { filter: invert(1); }

/* Dashboard tabs */
#v-dash .grid.grid-cols-4 button, #v-dash [data-action="showTab"] {
  border: 1px solid var(--border-default); color: var(--text-muted);
  background: var(--bg-input); border-radius: 12px; transition: all .25s ease;
}
#v-dash .grid.grid-cols-4 button:hover, #v-dash [data-action="showTab"]:hover {
  color: var(--text-primary); border-color: var(--border-default); background: var(--bg-hover);
}

/* Modal overlays */
[id^="m-"][style*="bg-black"] { backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); }

/* ===== INPUT STYLING (unified rounded) ===== */
input[type="text"],
input[type="url"],
input[type="number"],
input[type="date"],
select {
  border-radius: 10px !important;
}

/* ===== FORMAT INFOGRAPHIC ANIMATIONS ===== */
.format-infographic {
  height: auto;
  width: 100%;
  margin-top: 6px;
  opacity: 0.6;
  transition: opacity .3s ease, transform .3s ease;
  border-radius: 10px;
  overflow: hidden;
}
.format-card:hover .format-infographic,
.format-card.active .format-infographic {
  opacity: 1;
}

/* Elimination bracket animation */
.fi-elim-advance {
  animation: fiElimPulse 2.5s ease-in-out infinite;
}
.fi-elim-winner {
  animation: fiElimGlow 1.8s ease-in-out infinite;
}
@keyframes fiElimPulse {
  0%, 100% { fill-opacity: 0.12; }
  50% { fill-opacity: 0.3; }
}
@keyframes fiElimGlow {
  0%, 100% { fill-opacity: 0.25; stroke-width: 1.8; }
  50% { fill-opacity: 0.5; stroke-width: 2.2; }
}

/* League circular rotation */
.fi-league-rotate {
  transform-origin: 150px 40px;
  animation: fiLeagueRotate 10s linear infinite;
}
@keyframes fiLeagueRotate {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

/* Groups arrow animation */
.fi-groups-arrow {
  animation: fiGroupsSlide 2.2s ease-in-out infinite;
}
@keyframes fiGroupsSlide {
  0%, 100% { opacity: 0.5; transform: translateX(0); }
  50% { opacity: 1; transform: translateX(3px); }
}

/* Americano rotating players — orbit around court center */
.fi-am-rot-1 { animation: fiAmOrbit 5s ease-in-out infinite; }
.fi-am-rot-2 { animation: fiAmOrbit 5s ease-in-out infinite; animation-delay: -2.5s; }
.fi-am-rot-3 { animation: fiAmOrbit 5s ease-in-out infinite; animation-delay: -1.25s; }
.fi-am-rot-4 { animation: fiAmOrbit 5s ease-in-out infinite; animation-delay: -3.75s; }
.fi-am-rot-5 { animation: fiAmPulse 2s ease-in-out infinite; }
.fi-am-orbit { animation: fiAmOrbitSpin 12s linear infinite; transform-origin: 100px 40px; }
@keyframes fiAmOrbit {
  0%, 100% { opacity: 0.35; }
  50% { opacity: 0.85; }
}
@keyframes fiAmPulse {
  0%, 100% { opacity: 0.3; }
  50% { opacity: 0.7; }
}
@keyframes fiAmOrbitSpin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

/* Mexicano up/down arrows */
.fi-mex-up { animation: fiMexUp 1.8s ease-in-out infinite; }
.fi-mex-down { animation: fiMexDown 1.8s ease-in-out infinite; }
@keyframes fiMexUp {
  0%, 100% { opacity: 0.5; transform: translateY(0); }
  50% { opacity: 1; transform: translateY(-4px); }
}
@keyframes fiMexDown {
  0%, 100% { opacity: 0.35; transform: translateY(0); }
  50% { opacity: 0.7; transform: translateY(4px); }
}

/* Swiss ranking bars - subtle pulse */
.fi-swiss rect {
  animation: fiSwissPulse 3.5s ease-in-out infinite;
}
.fi-swiss rect:nth-child(1) { animation-delay: 0s; }
.fi-swiss rect:nth-child(2) { animation-delay: 0.15s; }
.fi-swiss rect:nth-child(3) { animation-delay: 0.3s; }
@keyframes fiSwissPulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.6; }
}

/* ===== LED TICKER GLOW EFFECTS ===== */
.led-ticker {
  height: 36px !important;
  border-radius: 0 !important;
  border-left: none !important;
  border-right: none !important;
  background: var(--bg-panel) !important;
  position: relative;
  overflow: hidden;
}
.led-ticker::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--accent), transparent);
  opacity: 0.4;
}
.led-ticker::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--accent), transparent);
  opacity: 0.4;
}
.led-ticker .ticker-item {
  text-shadow: 0 0 8px var(--accent-border);
  font-weight: 500;
}
.led-ticker .neon {
  text-shadow: 0 0 12px var(--accent-border), 0 0 24px rgba(124,255,0,0.1);
}
.led-anchor {
  text-shadow: 0 0 8px var(--accent-border);
}
.led-ticker-top {
  margin-bottom: 8px;
}
.led-ticker-bottom {
  margin-top: 8px;
}

/* ===== DASHBOARD REDESIGNED LAYOUT ===== */
/* Visual Hierarchy: Header → Banner → Content (Main + Sidebar) → Bottom Ticker */

/* ─── Wrapper: Flexbox column, fills available height ─── */
.dash-wrapper {
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-height: 0;
  max-width: 100%;
}

/* ─── Header Bar: Compact, one-line with inline stats ─── */
.dash-header-bar {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 10px;
  background: var(--bg-panel);
  border: 1px solid var(--border-default);
  border-radius: 14px;
  flex-shrink: 0;
}
.dash-header-left {
  display: flex;
  align-items: center;
  gap: 10px;
  flex: 1;
  min-width: 0;
  overflow: hidden;
}
.dash-tour-logo-wrap {
  width: 36px;
  height: 36px;
  border-radius: 10px;
  overflow: hidden;
  flex-shrink: 0;
  border: 1px solid var(--border-default);
}
.dash-tour-logo-wrap img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.dash-header-info {
  flex: 1;
  min-width: 0;
}
.dash-header-title-row {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 3px;
}
.dash-tour-name {
  font-size: 14px;
  font-weight: 800;
  color: var(--text-primary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  flex-shrink: 1;
  min-width: 0;
}
.dash-header-stats {
  display: flex;
  gap: 4px;
  flex-shrink: 0;
}
.dh-stat {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 2px 6px;
  border-radius: 6px;
  background: var(--bg-input);
  border: 1px solid var(--border-subtle);
  min-width: 32px;
}
.dh-stat-val {
  font-size: 13px;
  font-weight: 900;
  line-height: 1;
  color: var(--text-primary);
  font-family: var(--font-mono);
}
.dh-stat-lbl {
  font-size: 7px;
  font-weight: 700;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: .05em;
  margin-top: 1px;
}
.dh-stat-done .dh-stat-val { color: #22c55e; }
.dh-stat-pend .dh-stat-val { color: #f97316; }
.dh-stat-round .dh-stat-val { color: #fbbf24; }
.dash-header-sub-row {
  display: flex;
  align-items: center;
  gap: 8px;
}
.dash-header-sub {
  font-size: 10px;
  font-weight: 600;
  color: var(--text-dim);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  flex-shrink: 1;
  min-width: 0;
}
.dh-prog-wrap {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
}
.dh-prog-bar {
  width: 60px;
  height: 4px;
  border-radius: 4px;
  background: var(--border-default);
  overflow: hidden;
}
.dh-prog-fill {
  height: 100%;
  border-radius: 4px;
  background: var(--accent);
  transition: width .7s ease;
}
.dh-prog-lbl {
  font-size: 9px;
  color: var(--text-muted);
  font-weight: 600;
  font-family: var(--font-mono);
}
.dh-prog-pct {
  font-size: 9px;
  color: var(--text-dim);
  font-weight: 800;
  font-family: var(--font-mono);
}
.dash-header-actions {
  display: flex;
  gap: 4px;
  flex-shrink: 0;
  align-items: center;
}
.dash-fs-btn {
  background: var(--bg-input);
  border: 1px solid var(--border-default);
  color: var(--text-muted);
  width: 30px;
  height: 30px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all .2s;
  flex-shrink: 0;
  padding: 0;
  min-height: unset;
}
.dash-fs-btn:hover {
  color: var(--accent);
  border-color: var(--accent);
  background: var(--accent-dim);
}
.dash-fs-close {
  position: fixed;
  top: 12px;
  right: 12px;
  z-index: 9990;
  background: var(--bg-panel);
  border: 1px solid var(--border-default);
  color: var(--text-secondary);
  width: 36px;
  height: 36px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all .2s;
  box-shadow: 0 4px 16px rgba(0,0,0,.5);
  padding: 0;
  min-height: unset;
  backdrop-filter: blur(8px);
}
.dash-fs-close:hover {
  color: #ff6961;
  border-color: #ff6961;
  background: rgba(255,69,58,0.08);
}

/* ─── Content Area: Left Ads | Center | Right Ads ─── */
.dash-content-area {
  display: flex;
  gap: 8px;
  flex: 1;
  min-height: 0;
  overflow: hidden;
}

/* ─── Ad Columns (Left & Right) ─── */
.dash-ad-column {
  width: 140px;
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.dash-ad-card {
  flex: 1;
  min-height: 0;
  background: var(--bg-panel);
  border: 1px solid var(--border-default);
  border-radius: 12px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  position: relative;
}
.dash-ad-card img,
.dash-ad-card video {
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.dash-ad-empty {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  color: var(--text-muted);
  font-size: 9px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .06em;
  padding: 12px;
}
.dash-ad-empty svg {
  opacity: 0.3;
}
/* Ad card with content */
.dash-ad-card.has-ad {
  cursor: pointer;
  transition: border-color .2s, box-shadow .2s;
}
.dash-ad-card.has-ad:hover {
  border-color: rgba(124,255,0,0.3);
  box-shadow: 0 0 12px rgba(124,255,0,0.08);
}
.dash-ad-card .ad-card-media {
  width: 100%;
  flex: 1;
  min-height: 0;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--bg-input);
  position: relative;
}
.dash-ad-card .ad-card-media img,
.dash-ad-card .ad-card-media video {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.dash-ad-card .ad-card-text {
  padding: 6px 8px;
  background: var(--bg-panel);
  border-top: 1px solid var(--border-subtle);
}
.dash-ad-card .ad-card-name {
  font-size: 10px;
  font-weight: 700;
  color: var(--text-primary, #f4f4f5);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.dash-ad-card .ad-card-sub {
  font-size: 8px;
  color: var(--text-muted);
  margin-top: 1px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ─── Compact Info Bar ─── */
.dash-compact-info {
  display: none;
  position: absolute;
  bottom: 6px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 10;
  flex-direction: row;
  align-items: center;
  gap: 8px;
  background: rgba(0,0,0,0.6);
  backdrop-filter: blur(8px);
  border: 1px solid var(--border-default);
  border-radius: 10px;
  padding: 4px 10px;
}
.compact-ad-btn {
  font-size: 9px;
  font-weight: 600;
  color: var(--text-muted);
  background: var(--bg-input);
  border: 1px solid var(--border-default);
  border-radius: 6px;
  padding: 3px 8px;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 4px;
}
.compact-upcoming {
  font-size: 9px;
  font-family: var(--font-mono);
  color: var(--text-muted);
  display: flex;
  gap: 6px;
  overflow: hidden;
}
.compact-upcoming a {
  color: var(--accent);
  text-decoration: none;
}

/* ─── Main Content: Bracket / Tab Content ─── */
.dash-main-content {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: var(--bg-panel);
  border: 1px solid var(--border-default);
  border-radius: 14px;
  padding: 10px;
}

/* ─── Tab Navigation ─── */
.dash-tab-nav {
  display: flex;
  gap: 4px;
  flex-shrink: 0;
  margin-bottom: 8px;
  overflow-x: auto;
  scrollbar-width: none;
}
.dash-tab-nav::-webkit-scrollbar { display: none; }
.dash-tab-nav button {
  flex: 1;
  padding: 7px 8px;
  font-size: 11px;
  font-weight: 700;
  font-family: var(--font-mono);
  text-transform: uppercase;
  letter-spacing: .04em;
  border-radius: 10px;
  border: 1px solid var(--border-default);
  background: transparent;
  color: var(--text-muted);
  cursor: pointer;
  transition: all .2s;
  white-space: nowrap;
  min-height: 34px;
}
.dash-tab-nav button:hover {
  color: var(--text-secondary);
  border-color: var(--text-muted);
}

/* ─── Tab Content: now using slide system ─── */
.dash-tab-content {
  flex: 1;
  overflow-y: auto;
  overflow-x: hidden;
  min-height: 0;
  scrollbar-width: thin;
  scrollbar-color: var(--border-default) transparent;
}

/* ─── Slide System ─── */
.dash-slide-viewport {
  flex: 1;
  min-height: 0;
  overflow: hidden;
  position: relative;
  border-radius: 12px;
  background: var(--bg-input);
}
.dash-slide-track {
  display: flex;
  height: 100%;
  transition: transform 0.5s cubic-bezier(.4,0,.2,1);
  will-change: transform;
}
.dash-slide {
  min-width: 100%;
  height: 100%;
  overflow-y: auto;
  overflow-x: hidden;
  scrollbar-width: thin;
  scrollbar-color: var(--border-default) transparent;
  padding: 2px;
  flex-shrink: 0;
}
.dash-slide::-webkit-scrollbar { width: 3px; }
.dash-slide::-webkit-scrollbar-track { background: transparent; }
.dash-slide::-webkit-scrollbar-thumb { background: var(--border-default); border-radius: 3px; }
.dash-slide::-webkit-scrollbar-thumb:hover { background: var(--accent); }

/* ─── Highlights Section (Jugadores Destacados) ─── */
.hl-section-title {
  font-size: 11px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--text-muted);
  padding: 8px 10px 6px;
  border-bottom: 1px solid var(--border-subtle);
  display: flex;
  align-items: center;
  gap: 8px;
}
.hl-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 8px;
  padding: 8px;
}
.hl-card {
  background: var(--bg-panel);
  border: 1px solid var(--border-default);
  border-radius: 14px;
  overflow: hidden;
  transition: transform .2s, border-color .2s;
  cursor: default;
  position: relative;
}
.hl-card:hover {
  transform: translateY(-2px);
  border-color: var(--accent-border);
}
.hl-card-medal {
  position: absolute;
  top: 8px;
  right: 8px;
  font-size: 18px;
  z-index: 2;
  filter: drop-shadow(0 1px 3px rgba(0,0,0,.5));
}
.hl-card-photo {
  width: 100%;
  aspect-ratio: 1;
  background: linear-gradient(135deg, var(--bg-input) 0%, var(--bg-hover) 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  position: relative;
}
.hl-card-photo img,
.hl-card-photo video {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.hl-card-photo .hl-avatar-fallback {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content:center;
  font-weight: 900;
  font-size: 26px;
}
.hl-card-info {
  padding: 8px 10px;
}
.hl-card-name {
  font-size: 13px;
  font-weight: 800;
  color: var(--text-primary);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.hl-card-team {
  font-size: 10px;
  color: var(--text-muted);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  margin-top: 1px;
}
.hl-card-stats {
  display: flex;
  gap: 8px;
  margin-top: 6px;
}
.hl-stat-chip {
  font-size: 10px;
  font-weight: 700;
  font-family: var(--font-mono);
  padding: 3px 8px;
  border-radius: 8px;
  background: var(--bg-input);
  color: var(--text-secondary);
  border: 1px solid var(--border-subtle);
}
.hl-stat-chip.win { background: rgba(48,209,88,0.1); color: var(--green-ok); border-color: rgba(48,209,88,0.2); }
.hl-stat-chip.pts { background: var(--accent-dim); color: var(--accent); border-color: var(--accent-border); }
.hl-stat-chip.loss { background: rgba(255,69,58,0.08); color: #ff6961; border-color: rgba(255,69,58,0.15); }

/* ─── Live Match Section (Partidos del Momento) ─── */
.lm-container {
  display: flex;
  flex-direction: column;
  height: 100%;
  overflow-y: auto;
}
.lm-header {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 8px;
  font-size: 11px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--text-muted);
  border-bottom: 1px solid var(--border-subtle);
}
.lm-header .lm-live-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #ff453a;
  animation: lmPulse 1.5s ease-in-out infinite;
}
@keyframes lmPulse {
  0%, 100% { opacity: 1; box-shadow: 0 0 0 0 rgba(255,69,58,0.5); }
  50% { opacity: 0.7; box-shadow: 0 0 0 6px rgba(255,69,58,0); }
}
.lm-faceoff {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  padding: 16px;
  position: relative;
}
.lm-team-side {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 10px;
  max-width: 240px;
}
.lm-team-logo {
  width: 64px;
  height: 64px;
  border-radius: 16px;
  overflow: hidden;
  background: var(--bg-input);
  border: 2px solid var(--border-default);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.lm-team-logo img,
.lm-team-logo video {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.lm-players-row {
  display: flex;
  gap: -8px;
  align-items: center;
  justify-content: center;
}
.lm-player-photo {
  width: 72px;
  height: 72px;
  border-radius: 50%;
  overflow: hidden;
  border: 3px solid var(--border-default);
  background: var(--bg-input);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: border-color .3s;
}
.lm-player-photo:first-child {
  margin-right: -16px;
  z-index: 2;
}
.lm-player-photo.winner-side { border-color: var(--green-ok); }
.lm-player-photo img,
.lm-player-photo video {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.lm-player-photo .lm-avatar-fb {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 900;
  font-size: 24px;
}
.lm-team-name {
  font-size: 14px;
  font-weight: 900;
  color: var(--text-primary);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 100%;
}
.lm-team-cats {
  font-size: 9px;
  color: var(--text-ghost);
  text-transform: uppercase;
  letter-spacing: .08em;
}
.lm-vs-badge {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 5;
  background: var(--bg-panel);
  border: 2px solid var(--accent-border);
  border-radius: 50%;
  width: 48px;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  font-weight: 900;
  color: var(--accent);
  font-family: var(--font-mono);
  box-shadow: 0 4px 20px rgba(0,0,0,.4);
}
.lm-score-bar {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 8px 12px;
  border-top: 1px solid var(--border-subtle);
  border-bottom: 1px solid var(--border-subtle);
  background: var(--bg-panel);
}
.lm-score-side {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
}
.lm-score-label {
  font-size: 11px;
  font-weight: 700;
  color: var(--text-muted);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.lm-score-val {
  font-size: 18px;
  font-weight: 900;
  font-family: var(--font-mono);
  color: var(--text-primary);
}
.lm-score-val.w { color: var(--green-ok); }
.lm-match-info {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 8px;
  font-size: 10px;
  color: var(--text-ghost);
}
.lm-match-info .lm-court {
  padding: 2px 8px;
  border-radius: 8px;
  background: var(--accent-dim);
  color: var(--accent);
  font-weight: 700;
}
.lm-match-info .lm-status {
  font-weight: 700;
}
.lm-match-info .lm-status.live {
  color: #ff453a;
}
.lm-match-info .lm-status.pending {
  color: var(--gold);
}
.lm-no-matches {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100%;
  gap: 8px;
  color: var(--text-muted);
}
.lm-no-matches svg {
  opacity: 0.3;
}
.lm-queue {
  padding: 8px;
  border-top: 1px solid var(--border-subtle);
}
.lm-queue-title {
  font-size: 9px;
  font-weight: 800;
  color: var(--text-ghost);
  text-transform: uppercase;
  letter-spacing: .08em;
  margin-bottom: 6px;
}
.lm-queue-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 8px;
  border-radius: 10px;
  background: var(--bg-panel);
  border: 1px solid var(--border-subtle);
  margin-bottom: 4px;
  font-size: 11px;
  transition: all .2s;
}
.lm-queue-item:hover {
  border-color: var(--accent-border);
}
.lm-queue-av {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  overflow: hidden;
  flex-shrink: 0;
  background: var(--bg-input);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 10px;
  font-weight: 800;
  border: 1px solid var(--border-default);
}
.lm-queue-av img,
.lm-queue-av video {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.lm-queue-names {
  flex: 1;
  display: flex;
  align-items: center;
  gap: 4px;
  font-weight: 700;
  color: var(--text-secondary);
  overflow: hidden;
}
.lm-queue-court {
  font-size: 9px;
  font-weight: 700;
  color: var(--accent);
  background: var(--accent-dim);
  padding: 2px 6px;
  border-radius: 6px;
  flex-shrink: 0;
}
.bracket-container {
  background: var(--bg-input);
  border-radius: 12px;
  overflow: hidden;
}
.bracket-title {
  font-size: 12px;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: .08em;
  padding: 10px 12px 0;
}
.standings-container {
  background: var(--bg-input);
  border-radius: 12px;
  overflow: hidden;
}
.standings-header {
  padding: 10px 12px;
  border-bottom: 1px solid var(--border-default);
}
.stats-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }

/* ─── Right Sidebar: Sponsors + Ads ─── */
.dash-sidebar {
  width: 200px;
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
  overflow-y: auto;
  overflow-x: hidden;
  min-height: 0;
  scrollbar-width: thin;
  scrollbar-color: var(--border-default) transparent;
}
.sidebar-section {
  background: var(--bg-panel);
  border: 1px solid var(--border-default);
  border-radius: 12px;
  padding: 10px;
}
.sidebar-section-title {
  font-size: 9px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--text-muted);
  margin-bottom: 8px;
  padding-bottom: 6px;
  border-bottom: 1px solid var(--border-subtle);
}
.sidebar-sponsors {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.sidebar-sponsors .sponsor-slot {
  padding: 8px 10px;
  min-height: 42px;
}
.sidebar-sponsors .sponsor-slot .text-neon-lime {
  font-size: 11px !important;
}

/* Spotlight grid (compact) */
.spotlight-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4px;
}
.spotlight-card-sm {
  text-align: center;
  background: var(--bg-input);
  border-radius: 8px;
  padding: 6px 4px;
  border-left: 2px solid var(--accent);
}

/* Ad sidebar grid */
.ad-sidebar-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4px;
}
.ad-sidebar-grid .ad-slot {
  min-height: 80px;
  padding: 8px;
}
.ad-sidebar-grid .ad-slot-icon {
  width: 12px;
  height: 12px;
}

/* Upcoming matches list */
.upcoming-list {
  font-size: 10px;
  font-family: var(--font-mono);
}

/* ─── Banner: Compact for dashboard ─── */
.dash-wrapper #tour-banner {
  border-radius: 12px !important;
  min-height: 64px !important;
  max-height: 100px !important;
  margin: 0 !important;
  flex-shrink: 0;
}
.dash-wrapper .banner-inner {
  height: 64px !important;
}
.dash-wrapper .banner-slide {
  padding: 0 40px 0 16px !important;
  gap: 10px !important;
}
.dash-wrapper .banner-emoji { font-size: 22px !important; }
.dash-wrapper .banner-txt { font-size: 13px !important; }
.dash-wrapper .banner-txt-sub { font-size: 10px !important; }
.dash-wrapper .banner-ad-logo { width: 36px !important; height: 36px !important; border-radius: 8px !important; }

/* ═══════════════════════════════════════════════════════
   FULLSCREEN MODE — Everything fits in viewport, ZERO SCROLL
   ═══════════════════════════════════════════════════════ */
body.dash-fullscreen {
  overflow: hidden !important;
}
body.dash-fullscreen #main-header {
  display: none !important;
}
body.dash-fullscreen nav {
  display: none !important;
}
body.dash-fullscreen main {
  padding: 0 !important;
  margin: 0 !important;
  max-width: 100% !important;
  height: 100vh !important;
  overflow: hidden !important;
}
body.dash-fullscreen #v-dash {
  height: 100vh !important;
  max-height: 100vh !important;
  overflow: hidden !important;
  display: flex !important;
  flex-direction: column !important;
  padding: 0 !important;
  background: var(--bg-darkest);
}
/* Wrapper fills REMAINING space (NOT 100vh — ticker-top is outside) */
body.dash-fullscreen .dash-wrapper {
  flex: 1;
  min-height: 0;
  gap: 0;
  padding: 0;
}
/* Top ticker: edge-to-edge, thin */
body.dash-fullscreen .led-ticker-top {
  flex-shrink: 0 !important;
  border-radius: 0 !important;
  margin: 0 !important;
  height: 36px !important;
}
body.dash-fullscreen .ticker-anchor-left,
body.dash-fullscreen .ticker-anchor-right {
  font-size: 8px !important;
  padding: 2px 8px !important;
}
body.dash-fullscreen .ticker-item { font-size: 10px !important; }
/* Bottom ticker: edge-to-edge, thin */
body.dash-fullscreen .led-ticker-bottom {
  flex-shrink: 0 !important;
  border-radius: 0 !important;
  margin: 0 !important;
  height: 36px !important;
}
/* Header bar: centered tournament name, accent gradient */
body.dash-fullscreen .dash-header-bar {
  padding: 8px 14px !important;
  border-radius: 0 !important;
  border-left: none !important;
  border-right: none !important;
  gap: 6px;
  margin: 0 0 0 0 !important;
  flex-shrink: 0;
  min-height: 50px;
  background: linear-gradient(90deg, rgba(124,255,0,0.06) 0%, rgba(124,255,0,0.1) 50%, rgba(124,255,0,0.06) 100%) !important;
  align-items: center;
  justify-content: center;
  text-align: center;
}
body.dash-fullscreen .dash-tour-name {
  font-size: 22px !important;
  font-weight: 900 !important;
  text-align: center !important;
  width: 100%;
  letter-spacing: -.02em;
}
body.dash-fullscreen .dh-stat {
  padding: 1px 4px !important;
  min-width: 28px;
}
body.dash-fullscreen .dh-stat-val {
  font-size: 12px !important;
}
body.dash-fullscreen .dh-stat-lbl {
  font-size: 6px !important;
}
body.dash-fullscreen .dash-header-sub {
  font-size: 9px !important;
}
body.dash-fullscreen .dash-tour-logo-wrap {
  width: 28px !important;
  height: 28px !important;
}
/* Hero sponsor: compact in fullscreen, integrated into layout */
body.dash-fullscreen .hero-sponsor-banner {
  display: flex !important;
  min-height: 56px !important;
  border-radius: 0 !important;
  margin: 0 !important;
  flex-shrink: 0;
}
body.dash-fullscreen .hero-sponsor-inner {
  height: 56px !important;
  min-height: 56px !important;
}
/* Banner: compact in fullscreen, full-width, integrated */
body.dash-fullscreen #tour-banner {
  display: block !important;
  max-width: 100% !important;
  margin: 0 !important;
  border-radius: 0 !important;
  border-left: none !important;
  border-right: none !important;
  min-height: auto !important;
  flex-shrink: 0;
}
body.dash-fullscreen .banner-inner {
  height: 56px !important;
}
body.dash-fullscreen .banner-slide {
  padding: 0 50px 0 16px !important;
  gap: 10px !important;
}
body.dash-fullscreen .banner-emoji {
  font-size: 22px !important;
}
body.dash-fullscreen .banner-txt {
  font-size: 13px !important;
}
body.dash-fullscreen .banner-txt-sub {
  font-size: 10px !important;
}
body.dash-fullscreen .banner-ad-logo {
  width: 36px !important;
  height: 36px !important;
}
body.dash-fullscreen .banner-dots {
  right: 40px !important;
  bottom: 10px !important;
}
/* Show sponsor strips in fullscreen — no longer needed with new layout */
/* Content area: fills remaining space */
body.dash-fullscreen .dash-content-area {
  flex: 1 !important;
  gap: 4px;
  overflow: hidden !important;
  min-height: 0;
  flex-direction: row !important;
}
/* Ad columns in fullscreen */
body.dash-fullscreen .dash-ad-column {
  /* width controlled by specific :first-child / :last-child rules in TV v2 block */
  gap: 4px;
}
body.dash-fullscreen .dash-ad-card {
  border-radius: 8px !important;
  overflow: hidden !important;
}
body.dash-fullscreen .dash-ad-card .ad-card-media {
  flex: 1 1 0% !important;
  min-height: 0 !important;
  max-height: 100% !important;
  overflow: hidden !important;
  width: 100% !important;
  height: 100% !important;
  position: relative !important;
}
body.dash-fullscreen .dash-ad-card .ad-card-media img,
body.dash-fullscreen .dash-ad-card .ad-card-media video {
  width: 100% !important;
  height: 100% !important;
  max-height: 100% !important;
  object-fit: contain !important;
  min-height: 0 !important;
}
body.dash-fullscreen .dash-ad-card .ad-card-text {
  flex-shrink: 0 !important;
  padding: 4px 6px !important;
}
body.dash-fullscreen .dash-ad-card .ad-card-name {
  font-size: 9px !important;
}
body.dash-fullscreen .dash-ad-card .ad-card-sub {
  font-size: 7px !important;
}
/* Main content: borderless, fills ALL remaining space */
body.dash-fullscreen .dash-main-content {
  border-radius: 0 !important;
  border: none !important;
  padding: 6px 8px !important;
  flex: 1 !important;
  min-height: 0 !important;
  overflow: hidden !important;
  display: flex !important;
  flex-direction: column !important;
}
body.dash-fullscreen .dash-tab-nav {
  gap: 3px !important;
  margin-bottom: 4px !important;
}
body.dash-fullscreen .dash-tab-nav button {
  font-size: 10px !important;
  padding: 5px 6px !important;
  min-height: 28px;
  border-radius: 8px !important;
}
/* Hide admin/action buttons in fullscreen */
body.dash-fullscreen .dash-header-actions {
  display: none !important;
}
/* Hide back button in fullscreen header for clean centering */
body.dash-fullscreen .dash-header-title-row button[data-action="navigate"] {
  display: none !important;
}
/* Prominent tournament name in fullscreen header (merged — no duplicates) */
body.dash-fullscreen .dash-header-info {
  text-align: center;
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
}
/* Fullscreen venue/club header accent bar */
body.dash-fullscreen .dash-tour-logo-wrap {
  width: 34px !important;
  height: 34px !important;
  border-radius: 10px !important;
  border-color: var(--accent-border) !important;
}
/* (merged into rule above at line 1984) */
body.dash-fullscreen .dash-header-stats {
  gap: 6px !important;
}
body.dash-fullscreen .dash-slide-viewport {
  min-height: 0 !important;
  flex: 1 !important;
}
/* Fullscreen slides: fill all available height, no scroll */
body.dash-fullscreen .dash-slide {
  display: flex !important;
  flex-direction: column !important;
  overflow: hidden !important;
  padding: 0 !important;
}
body.dash-fullscreen .dash-slide > div {
  flex: 1;
  min-height: 0;
  overflow: hidden;
}
body.dash-fullscreen .dash-slide .bracket-container {
 display: flex;
  flex-direction: column;
}
body.dash-fullscreen .dash-slide .bracket-container .bwrap {
  flex: 1;
  min-height: 0;
  overflow: auto;
}
body.dash-fullscreen .dash-slide .standings-container {
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
body.dash-fullscreen .dash-slide .standings-container .overflow-x-auto {
  flex: 1;
  min-height: 0;
  overflow: auto;
}
body.dash-fullscreen .dash-slide .stats-grid {
  flex: 1;
  min-height: 0;
  overflow: hidden;
}
/* Hide old sidebar in fullscreen */
body.dash-fullscreen .dash-sidebar {
  display: none !important;
}
/* Hide admin elements in fullscreen */
body.dash-fullscreen .dash-ad-admin {
  display: none !important;
}
body.dash-fullscreen .hero-sponsor-media {
  width: 32px !important;
  height: 32px !important;
}
body.dash-fullscreen .hero-sponsor-emoji {
  font-size: 22px !important;
}
body.dash-fullscreen .hero-sponsor-name {
  font-size: 14px !important;
}
body.dash-fullscreen .hero-sponsor-tagline {
  font-size: 9px !important;
}
body.dash-fullscreen .hero-sponsor-cta {
  font-size: 8px !important;
  padding: 3px 8px !important;
}
body.dash-fullscreen .hero-sponsor-dots {
  bottom: 4px !important;
  left: 12px !important;
}
body.dash-fullscreen .dash-fs-btn {
  display: none !important;
}
/* Hide ad management button in fullscreen banner */
body.dash-fullscreen #banner-ad-btn {
  display: none !important;
}
body.dash-fullscreen .dash-fs-close {
  display: flex !important;
  position: fixed !important;
  top: 8px !important;
  right: 8px !important;
  z-index: 9999 !important;
}
/* Bracket: slight shadow for depth */
body.dash-fullscreen .bmatch {
  box-shadow: 0 1px 4px rgba(0,0,0,0.3) !important;
}
body.dash-fullscreen .bmatch.final {
  border-width: 2px !important;
}
/* Match cards: compact, no animation (perf) */
body.dash-fullscreen .mcard {
  animation: none !important;
  padding: 7px 10px !important;
  margin-bottom: 3px !important;
  border-radius: 8px !important;
  border-left-width: 2px !important;
}
body.dash-fullscreen .mcard div[style*="font-size:13px"] {
  font-size: 11px !important;
}
body.dash-fullscreen .mcard span[style*="font-size:11px"] {
  font-size: 9px !important;
}
body.dash-fullscreen .mcard span[style*="font-size:12px"] {
  font-size: 10px !important;
}
body.dash-fullscreen .mcard div[style*="margin-bottom:5px"] {
  margin-bottom: 2px !important;
}
body.dash-fullscreen .mcard div[style*="margin-bottom:4px"] {
  margin-bottom: 2px !important;
}
body.dash-fullscreen .mcard div[style*="gap:6px"] {
  gap: 4px !important;
}
/* Round containers compact */
body.dash-fullscreen .dash-slide .dark-panel {
 padding: 4px 6px !important;
  margin-bottom: 2px !important;
  border-radius: 10px !important;
}
body.dash-fullscreen .dash-slide .dark-panel h4 {
  font-size: 10px !important;
  margin-bottom: 3px !important;
}
body.dash-fullscreen .dash-slide .dark-panel h3 {
  font-size: 10px !important;
  margin-bottom: 2px !important;
}
/* Players list: compact rows, no scroll */
body.dash-fullscreen #players-list > div {
  padding: 0 !important;
}
body.dash-fullscreen #players-list > div > div:first-child {
  padding: 4px 10px !important;
}
body.dash-fullscreen #players-list > div > div:not(:first-child) {
  padding: 5px 10px !important;
  gap: 8px !important;
  align-items: center !important;
}
/* Fullscreen matches grid layout */
body.dash-fullscreen .fs-matches-grid {
  display: grid !important;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)) !important;
  gap: 4px;
  overflow: hidden;
  height: 100%;
}
body.dash-fullscreen .fs-matches-grid .fs-round-group {
  display: contents;
}
/* Fullscreen players grid layout — optimized container */
body.dash-fullscreen .fs-players-grid {
  display: grid !important;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)) !important;
  gap: 4px;
  overflow: hidden;
  height: 100%;
  align-content: start;
}
body.dash-fullscreen .fs-players-grid .fs-player-card {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 5px 8px;
  background: rgba(39,39,42,0.4);
  border: 1px solid #1c1c1f;
  border-radius: 8px;
}
body.dash-fullscreen #players-list img,
body.dash-fullscreen #players-list video,
body.dash-fullscreen #players-list div[style*="width:40px;height:40px"] {
  width: 32px !important;
  height: 32px !important;
  min-width: 32px !important;
  min-height: 32px !important;
}
body.dash-fullscreen #players-list div[style*="font-size:16px"] {
  font-size: 13px !important;
}
body.dash-fullscreen #players-list button {
  padding: 3px 8px !important;
  font-size: 9px !important;
}
/* Stats grid compact */
body.dash-fullscreen .stats-grid {
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap: 6px !important;
}
body.dash-fullscreen .stats-grid > div {
  padding: 6px 8px !important;
}
body.dash-fullscreen .stats-grid h3 {
  font-size: 10px !important;
  margin-bottom: 4px !important;
}
/* Standings table compact */
body.dash-fullscreen .ltable th {
  padding: 4px 4px !important;
  font-size: 9px !important;
}
body.dash-fullscreen .ltable td {
  padding: 4px 4px !important;
  font-size: 10px !important;
}

/* Hide old dash-top-strip if it exists */
.dash-top-strip { display: none; }

/* ===== PRINT ===== */
@media print {
  .no-print,nav,#main-header,.ticker-bar,#toast,footer,#mesh-bg,#splash,#gen-loader,#champ,#confetti,button[data-action="printWindow"],button[data-action="openShare"],.btn-hdr,.ghost-btn,#tour-banner,.banner-dots,.ico,.ticker-anchor-left,.ticker-anchor-right,.dash-ad-admin{display:none!important}
  body{background:white!important;color:black!important;font-size:12pt}
  main{padding:0!important}
  .bwrap{background:white!important;border:1px solid #ddd!important}
  .bmatch{background:white!important;border:1px solid #999!important}
  .bteam{color:black!important;border-bottom-color:#ccc!important}
  .bscore{background:#eee!important;color:black!important}
  .bteam.winner .bscore{background:#d4edda!important;color:#155724!important}
  .bteam.winner{background:#f0fff4!important;color:#155724!important}
  .bcol-title{color:#333!important}
  .ltable th{background:#f5f5f5!important;color:#333!important;border-bottom-color:#999!important}
  .ltable td{color:black!important;border-bottom-color:#ddd!important}
  .ltable tr:hover td{background:transparent!important}
  .ltable tr.highlight td{border-left-color:#155724!important;background:#f0fff4!important}
  .dark-panel{background:white!important;border:1px solid #ddd!important}
  .cfg-card{border:1px solid #ddd!important}
  .mcard{background:white!important;border-left-color:#333!important}
  .sp{background:#eee!important;color:black!important}
  .sp.w{background:#d4edda!important;color:#155724!important}
  .sp.l{background:#f8d7da!important;color:#721c24!important}
  .brow{gap:16px}.bcol{min-width:150px}
  .neon-badge,.neon-btn{background:#333!important;color:white!important;box-shadow:none!important}
  .format-dot{background:#999!important}
}

/* ===== TABLET ===== */
@media (max-width: 1024px) {
  .splash-svg-wrap{max-width:220px!important;max-height:220px!important}
  .dash-content-area { flex-direction: column; }
  .dash-sidebar { width: 100% !important; flex-direction: row; flex-wrap: wrap; overflow-y: visible; max-height: 200px; }
  .sidebar-section { flex: 1; min-width: 140px; }
  .sidebar-section.flex-grow { display: none; }
  .dash-main-content { min-height: 400px; }
  .bwrap{max-width:100%!important;overflow-x:auto!important}
}

/* ===== MOBILE ===== */
@media (max-width: 640px) {
  body{padding:0!important}
  main{padding:8px 4px 70px!important;width:100%!important;max-width:100vw!important;overflow-x:hidden!important;box-sizing:border-box!important}
  #v-dash{width:100%!important;max-width:100%!important;overflow-x:hidden!important}
  #hdr-body .max-w-7xl{padding-left:8px!important;padding-right:8px!important}
  header .flex.items-center.gap-2{flex-wrap:wrap;gap:4px!important}
  .btn-hdr span{display:none!important}

  /* Mobile: sidebar below main */
  .dash-content-area { flex-direction: column; }
  .dash-sidebar { width: 100% !important; flex-direction: row; flex-wrap: wrap; gap: 4px !important; overflow-y: visible; max-height: none; }
  .sidebar-section { flex: 1; min-width: 120px; padding: 8px !important; }
  .sidebar-section.flex-grow { display: none; }
  .dash-main-content { min-height: 350px; border-radius: 12px !important; }
  .dash-header-bar { flex-wrap: wrap; border-radius: 12px !important; padding: 8px !important; }
  .dash-header-title-row { flex-wrap: wrap; }
  .dash-tour-name { font-size: 12px !important; min-width: 100px; }
  .dh-stat { padding: 2px 5px !important; min-width: 28px; }
  .dh-stat-val { font-size: 11px !important; }
  .dh-stat-lbl { font-size: 6px !important; }
  .dash-tab-nav { gap: 3px !important; }
  .dash-tab-nav button { font-size: 9px !important; padding: 5px 4px !important; min-height: 30px; }
  .stadium-ticker { min-height: 32px !important; border-radius: 8px !important; margin-bottom: 4px !important; }
  .stadium-ticker-track { height: 32px !important; padding-left: 32px !important; }
  .stadium-ticker-label { width: 24px !important; border-radius: 8px 0 0 8px !important; }
  .stadium-ticker-item .ticker-text { font-size: 10px !important; }
  .stadium-ticker-item .ticker-emoji { font-size: 14px !important; }
  .ticker-bar { height: 32px !important; border-radius: 8px !important; margin-top: 4px !important; }
  .bcol { min-width: 130px !important; }
  .bteam { padding: 4px 6px !important; font-size: 10px !important; }
  .bscore { padding: 1px 4px !important; font-size: 9px !important; }
  .bmatch { border-radius: 10px; }
  .mcard { border-radius: 10px; }

  /* Mobile: larger inputs for touch */
  input[type="text"],
  input[type="url"],
  input[type="number"],
  input[type="date"],
  select {
    min-height: 44px;
    font-size: 16px !important;
    padding: 10px 14px !important;
    border-radius: 12px !important;
  }

  /* Mobile: scrollable tab navigation */
  #v-dash .grid.grid-cols-4 {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    -ms-overflow-style: none;
    flex-wrap: nowrap;
    gap: 6px;
  }
  #v-dash .grid.grid-cols-4::-webkit-scrollbar { display: none; }
  #v-dash .grid.grid-cols-4 button {
    white-space: nowrap;
    flex-shrink: 0;
    min-width: auto;
    padding: 10px 14px;
  }

  /* Mobile: touch-friendly bottom nav */
  nav button { min-height: 56px; min-width: 68px; padding: 12px 10px!important; }

  /* Mobile: ad slots stacked */
  #dash-player-cards { grid-template-columns: 1fr !important; }

  /* ===== MOBILE FIXES: Config Section ===== */
  /* Config: force 2-col grids to single column on very small screens */
  #v-config .grid.grid-cols-2 { grid-template-columns: 1fr !important; }
  /* Config: scoring grid-cols-3 → stacked */
  #v-config .grid.grid-cols-3 { grid-template-columns: 1fr 1fr !important; gap: 8px !important; }
  /* Config: scoring points row → 3 cols is fine but tighten */
  #v-config .p-5 { padding: 16px !important; }

  /* ===== MOBILE FIXES: Ad Config Section ===== */
  /* Ad config: visual map grid-cols-12 → stacked */
  #v-config .grid.grid-cols-12 { grid-template-columns: 1fr !important; }
  #v-config .col-span-3, #v-config .col-span-6, #v-config .col-span-12 { grid-column: span 1 !important; }
  /* Ad config: form grid-cols-2 → stacked */
  .rounded-xl .grid.grid-cols-2 { grid-template-columns: 1fr !important; }
  /* Ad config: emoji + button row */
  .rounded-xl .flex.items-end.gap-2 { flex-direction: column !important; }
  .rounded-xl .flex.items-end.gap-2 .w-20 { width: 100% !important; }

  /* ===== MOBILE FIXES: Dashboard ===== */
  /* Dashboard: stats row 2x2 on mobile instead of 4 across */
  #v-dash .grid.grid-cols-4.gap-2.mb-4 { grid-template-columns: 1fr 1fr !important; }
  /* Dashboard: sponsor cards 1 col on mobile */
  #dash-sponsor-slots { display: grid !important; grid-template-columns: 1fr 1fr !important; gap: 8px !important; }
  /* Dashboard: banner slots 2 col on mobile */
  #dash-ad-slots { grid-template-columns: 1fr 1fr !important; gap: 8px !important; }
  /* Dashboard: main grid stacked — force 1fr column */
  #v-dash .grid { grid-template-columns: 1fr !important; }
  /* Dashboard: force ALL lg:col-span elements to full width */
  #v-dash [class*="lg:col-span"] { grid-column: span 1 !important; width: 100% !important; max-width: 100% !important; min-width: 0 !important; }
  /* Dashboard: minimize height constraints */
  #v-dash .min-h-\[580px\] { min-height: auto !important; }
  /* Dashboard: ticker bar full width */
  #v-dash .ticker-bar { width: 100% !important; max-width: 100% !important; }
  /* Dashboard: bracket wrap not wider than screen */
  #v-dash .bwrap { max-width: 100% !important; overflow-x: auto !important; }
  /* Dashboard: banner not wider than screen */
  #v-dash #tour-banner { max-width: 100% !important; }
  #v-dash .banner-inner { max-width: 100% !important; }
  /* Dashboard: all cards max-width */
  #v-dash .bg-\[\#111113\], #v-dash .bg-\[\#0a0a0b\] { max-width: 100% !important; min-width: 0 !important; }
  /* Dashboard: CRITICAL - prevent grid blowout from content */
  #v-dash, #v-dash > * { min-width: 0 !important; }
  #v-dash .grid > * { min-width: 0 !important; overflow-wrap: break-word !important; }
  /* Dashboard: prevent flex items from growing beyond container */
  #v-dash .flex-1 { min-width: 0 !important; }
  /* Dashboard: all direct children of v-dash constrained */
  #v-dash > div { max-width: 100% !important; overflow-x: hidden !important; }

  /* ===== MOBILE FIXES: Dashboard Deep Fixes ===== */
  /* Dashboard: Nav row compact — hide share/print text */
  #v-dash .ghost-btn span { display: none !important; }
  /* Dashboard: Progress bar row compact */
  #v-dash .flex.items-center.gap-2.sm\:gap-3 { gap: 6px !important; flex-wrap: wrap !important; }
  /* Dashboard: Stats cards compact text */
  #v-dash .text-2xl.font-black { font-size: 1.25rem !important; }
  #v-dash .text-\\[10px\\] { font-size: 9px !important; }
  /* Dashboard: Tab nav use 2x2 grid on small phones instead of horizontal scroll */
  #v-dash .grid.grid-cols-2.sm\:grid-cols-4 { grid-template-columns: 1fr 1fr !important; }
  /* Dashboard: Stadium ticker compact on mobile */
  .stadium-ticker { border-radius: 10px !important; min-height: 38px !important; margin-bottom: 0.5rem !important; }
  .stadium-ticker-track { height: 38px !important; padding-left: 36px !important; }
  .stadium-ticker-item .ticker-text { font-size: 11px !important; }
  .stadium-ticker-item .ticker-emoji { font-size: 16px !important; }
  .stadium-ticker-label { width: 28px !important; border-radius: 10px 0 0 10px !important; }
  .stadium-ticker-label svg { width: 12px !important; height: 12px !important; }
  /* Dashboard: Banner compact on mobile */
  #tour-banner { border-radius: 12px !important; min-height: 100px !important; margin: 0 auto 1rem !important; }
  .banner-inner { height: 100px !important; }
  .banner-slide { padding: 0 20px 0 12px !important; gap: 8px !important; }
  .banner-emoji { font-size: 22px !important; }
  .banner-txt { font-size: 14px !important; }
  .banner-txt-sub { font-size: 11px !important; }
  .banner-ad-logo { width: 40px !important; height: 40px !important; border-radius: 10px !important; }
  .banner-dots { right: 24px !important; bottom: 8px !important; }
  .banner-ad-video { max-width: 80px !important; height: 60px !important; border-radius: 8px !important; }
  #banner-ad-btn { top: 6px !important; right: 6px !important; font-size: 14px !important; padding: 3px 6px !important; border-radius: 6px !important; }
  /* Dashboard: Sponsor cards compact on mobile */
  .sponsor-card-premium { padding: 10px !important; border-radius: 10px !important; }
  .sponsor-card-premium .sp-emoji { font-size: 20px !important; }
  .sponsor-card-premium .sp-name { font-size: 12px !important; }
  .sponsor-card-premium .sp-role { font-size: 8px !important; }
  /* Dashboard: Player edit zone full mobile */
  #player-edit-zone { padding: 10px !important; }
  .pe-card { margin: 10px auto !important; padding: 16px !important; border-radius: 16px !important; }
  .pe-grid { grid-template-columns: 1fr !important; gap: 10px !important; }
  .pe-media-zone { aspect-ratio: 4/3 !important; border-radius: 12px !important; }
  /* Dashboard: bracket compact on mobile */
  .bwrap { padding: 8px !important; border-radius: 10px !important; }
  .bcol { min-width: 140px !important; }
  .bmatch { margin: 4px 0 !important; border-radius: 8px !important; }
  .bteam { padding: 6px 8px !important; font-size: 11px !important; }
  .bscore { padding: 2px 5px !important; font-size: 10px !important; }
  .bcol-title { font-size: 9px !important; margin-bottom: 6px !important; }
  /* Dashboard: Match cards compact */
  .mcard { padding: 10px !important; border-radius: 8px !important; }
  /* Dashboard: Table compact */
  .ltable th { padding: 6px 4px !important; font-size: 9px !important; }
  .ltable td { padding: 6px 4px !important; font-size: 11px !important; }
  /* Dashboard: Right sidebar stats compact */
  #v-dash .grid.grid-cols-3.gap-2 { gap: 4px !important; }
  #v-dash .bg-zinc-950.border.border-zinc-900.p-2\\.5 { padding: 8px !important; }
  /* Dashboard: Upcoming matches compact */
  #upcoming-matches { font-size: 9px !important; }

  /* ===== MOBILE FIXES: Banner ===== */
  .banner-slide { padding: 0 50px 0 16px !important; gap: 10px !important; }
  .banner-inner { height: 120px !important; }
  .banner-emoji { font-size: 24px !important; }
  .banner-txt { font-size: 14px !important; }
  .banner-txt-sub { font-size: 11px !important; }
  .banner-ad-logo { width: 44px !important; height: 44px !important; border-radius: 10px !important; }
  .banner-ad-logo-wide { max-width: 80px !important; height: 44px !important; }
  .banner-ad-video { max-width: 80px !important; height: 56px !important; }
  .banner-ad-cta { font-size: 10px !important; padding: 3px 8px !important; }
  .banner-dots { right: 16px !important; bottom: 8px !important; }
  #tour-banner { min-height: 120px !important; border-radius: 14px !important; margin-bottom: 12px !important; }
  #banner-ad-btn { top: 6px !important; right: 6px !important; font-size: 14px !important; padding: 3px 6px !important; }

  /* ===== MOBILE FIXES: Stadium Ticker ===== */
  .stadium-ticker { border-radius: 10px !important; min-height: 40px !important; margin-bottom: 8px !important; }
  .stadium-ticker-label { width: 28px !important; border-radius: 10px 0 0 10px !important; }
  .stadium-ticker-label svg { width: 12px !important; height: 12px !important; }
  .stadium-ticker-track { height: 40px !important; padding-left: 34px !important; }
  .stadium-ticker-item { padding: 0 12px !important; gap: 6px !important; }
  .stadium-ticker-item .ticker-emoji { font-size: 16px !important; }
  .stadium-ticker-item .ticker-text { font-size: 11px !important; }
  .stadium-ticker-item .ticker-sub { font-size: 8px !important; }
  .stadium-ticker-sep { width: 4px !important; height: 4px !important; margin: 0 4px !important; }

  /* ===== MOBILE FIXES: Ticker Bar (bottom) ===== */
  .ticker-bar { border-radius: 10px !important; height: 40px !important; }
  .ticker-anchor-left { font-size: 8px !important; padding: 3px 8px !important; }
  .ticker-anchor-right { font-size: 9px !important; padding: 3px 8px !important; }
  .ticker-item { font-size: 10px !important; }

  /* ===== MOBILE FIXES: Sponsor Cards ===== */
  .sponsor-card-premium { padding: 10px !important; border-radius: 12px !important; }
  .sponsor-card-premium .sp-emoji { font-size: 22px !important; }
  .sponsor-card-premium .sp-name { font-size: 12px !important; }
  .sponsor-card-premium .sp-role { font-size: 8px !important; }
  .sponsor-card-premium img { width: 32px !important; height: 32px !important; }

  /* ===== MOBILE FIXES: Registration Section ===== */
  #v-register .lg\:col-span-5, #v-register .lg\:col-span-3, #v-register .lg\:col-span-4 { min-height: auto !important; }
  /* Register: action buttons wrap properly */
  #v-register .flex.gap-2.mb-4.flex-wrap { gap: 6px !important; }
  #v-register .flex.gap-2.mb-4.flex-wrap .neon-btn,
  #v-register .flex.gap-2.mb-4.flex-wrap .ghost-btn,
  #v-register .flex.gap-2.mb-4.flex-wrap .danger-btn { flex: 1 1 calc(50% - 6px) !important; min-width: 0 !important; }

  /* ===== MOBILE FIXES: Modals ===== */
  .dark-panel { max-width: 100% !important; }
  /* Modal tab groups: smaller text */
  #m-ads .tab-group button { font-size: 9px !important; padding: 8px 4px !important; }
  #m-ads .tab-group button svg { display: none !important; }

  /* ===== MOBILE FIXES: Bracket ===== */
  .bwrap { padding: 8px !important; border-radius: 12px !important; }
  .brow { gap: 12px !important; }
  .bcol { min-width: 150px !important; }
  .bmatch { border-radius: 10px !important; margin: 4px 0 !important; }
  .bteam { padding: 6px 8px !important; font-size: 11px !important; }
  .bscore { font-size: 10px !important; padding: 2px 5px !important; }

  /* ===== MOBILE FIXES: Player Edit ===== */
  .pe-card { padding: 16px !important; margin: 10px auto !important; }
  .pe-grid { grid-template-columns: 1fr !important; gap: 10px !important; }
  .pe-media-zone { aspect-ratio: 4/3 !important; }

  /* ===== MOBILE FIXES: General ===== */
  /* Hide share/print buttons on mobile to save space */
  #v-dash .ghost-btn.no-print { padding: 6px !important; }
  #v-dash .ghost-btn.no-print span { display: none !important; }
  /* Force all 3-tab groups to scroll horizontally on very small screens */
  .tab-group[style*="repeat(3"] { overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; }
  .tab-group[style*="repeat(3"]::-webkit-scrollbar { display: none; }
  /* Make sure text doesn't get cut off */
  .truncate, [class*="overflow-hidden"] { min-width: 0 !important; }
}

/* ===== EXTRA SMALL PHONES (<=375px) ===== */
@media (max-width: 375px) {
  main { padding: 8px 6px 80px !important; width: 100% !important; max-width: 100vw !important; overflow-x: hidden !important; }
  #v-dash { overflow-x: hidden !important; }
  /* Config cards tighter */
  #v-config .p-5 { padding: 12px !important; }
  /* Tab buttons even smaller */
  .tab-group button { font-size: 9px !important; padding: 8px 4px !important; }
  /* Dashboard stats: stack to 1 col */
  #v-dash .grid.grid-cols-4.gap-2.mb-4 { grid-template-columns: 1fr 1fr !important; gap: 6px !important; }
  #v-dash .grid.grid-cols-4.gap-2.mb-4 > div { padding: 8px !important; }
  #v-dash .grid.grid-cols-4.gap-2.mb-4 p.text-2xl { font-size: 20px !important; }
  /* Sponsor cards: single col */
  #dash-sponsor-slots { grid-template-columns: 1fr !important; }
  /* Banner even smaller */
  .banner-slide { padding: 0 40px 0 12px !important; }
  .banner-inner { height: 100px !important; }
  .banner-emoji { font-size: 20px !important; }
  .banner-txt { font-size: 12px !important; }
  .banner-txt-sub { font-size: 10px !important; }
  .banner-ad-logo { width: 36px !important; height: 36px !important; }
  .banner-ad-logo-wide { max-width: 60px !important; height: 36px !important; }
  .banner-ad-cta { display: none !important; }
  /* Scoring row: single col on tiny phones */
  #v-config .grid.grid-cols-3 { grid-template-columns: 1fr !important; }
}

/* ===== FULLSCREEN PRESENTATION MODE ===== */
body.fs-mode #main-header,
body.fs-mode nav,
body.fs-mode #mesh-bg { display: none !important; }
body.fs-mode main { padding: 8px !important; max-width: 100% !important; }
body.fs-mode .dash-grid { height: calc(100vh - 16px); }
body.fs-mode .dash-header-row { display: none; }
body.fs-mode .dash-sidebar-left,
body.fs-mode .dash-sidebar-right { max-width: 180px; }
body.fs-mode #tour-banner { min-height: 120px; margin-bottom: 8px; display: block !important; }
body.fs-mode .stadium-ticker { margin-bottom: 8px; }
body.fs-mode #bottom-ticker { display: none; }
body.fs-mode .dash-banner { min-height: 100px !important; }
body.fs-mode .dash-banner .banner-inner { height: 100px !important; }
body.fs-mode .dash-banner .banner-txt { font-size: 16px !important; }
body.fs-mode .dash-banner .banner-emoji { font-size: 28px !important; }
body.fs-mode .sponsor-card-premium { padding: 12px; }
body.fs-mode .sponsor-card-premium .sp-emoji { font-size: 22px; }
body.fs-mode .sponsor-card-premium .sp-name { font-size: 12px; }

/* ===== REMOTE SCORE INDICATOR ===== */
.remote-active {
  box-shadow: 0 0 0 2px var(--accent), 0 0 20px var(--accent-dim) !important;
  animation: remotePulse 2s ease-in-out infinite;
}
@keyframes remotePulse {
  0%, 100% { box-shadow: 0 0 0 2px var(--accent), 0 0 10px var(--accent-dim); }
  50% { box-shadow: 0 0 0 2px var(--accent), 0 0 25px var(--accent); }
}

/* ===== ORIENTATION: PORTRAIT (Vertical screens) ===== */
/* On portrait screens (phone vertical, vertical TV), stack layout vertically */
@media (orientation: portrait) and (max-height: 768px) {
  /* Hide side ad columns — not enough horizontal space */
  .dash-ad-column {
    display: none !important;
  }

  /* Content area: single column, bracket fills full width */
  .dash-content-area {
    flex-direction: column !important;
  }

  /* Main content fills full width */
  .dash-main-content {
    min-height: 300px;
    border-radius: 12px !important;
  }

  /* Make hero banner more compact */
  .hero-sponsor-banner {
    min-height: 60px !important;
    border-radius: 10px !important;
  }
  .hero-sponsor-inner {
    height: 60px !important;
  }
  .hero-sponsor-media {
    width: 44px !important;
    height: 44px !important;
  }
  .hero-sponsor-emoji {
    font-size: 28px !important;
  }
  .hero-sponsor-name {
    font-size: 15px !important;
  }
  .hero-sponsor-tagline {
    font-size: 10px !important;
  }
  .hero-sponsor-cta {
    font-size: 8px !important;
    padding: 4px 10px !important;
  }

  /* Compact bracket elements */
  .bwrap {
    padding: 8px !important;
  }
  .bcol {
    min-width: 130px !important;
  }
  .bmatch {
    margin: 4px 0 !important;
  }
  .bteam {
    padding: 6px 8px !important;
    font-size: 11px !important;
  }
  .bscore {
    padding: 2px 5px !important;
    font-size: 10px !important;
  }

  /* Compact match cards */
  .mcard {
    padding: 10px !important;
  }

  /* Compact header */
  .dash-header-bar {
    padding: 4px 8px !important;
    gap: 6px !important;
  }
  .dash-tour-name {
    font-size: 12px !important;
  }
  .dh-stat {
    padding: 1px 4px !important;
    min-width: 26px !important;
  }
  .dh-stat-val {
    font-size: 11px !important;
  }

  /* Compact ticker */
  .ticker-bar {
    height: 36px !important;
    border-radius: 10px !important;
  }
  .ticker-item {
    font-size: 10px !important;
  }

  /* Compact tab nav */
  .dash-tab-nav {
    gap: 2px !important;
    margin-bottom: 4px !important;
  }
  .dash-tab-nav button {
    font-size: 9px !important;
    padding: 4px 5px !important;
    min-height: 26px !important;
  }
}

/* Portrait fullscreen combined — everything must fit in viewport */
@media (orientation: portrait) and (max-height: 768px) {
  body.dash-fullscreen .dash-wrapper {
    gap: 0 !important;
  }
  body.dash-fullscreen .led-ticker-top {
    height: 30px !important;
  }
  body.dash-fullscreen .led-ticker-bottom {
    height: 30px !important;
  }
  body.dash-fullscreen .dash-header-bar {
    padding: 3px 8px !important;
    flex-shrink: 0 !important;
  }
  /* In short portrait, hide tour banner to save space */
  body.dash-fullscreen #tour-banner {
    display: none !important;
  }
  body.dash-fullscreen .hero-sponsor-banner {
    min-height: 32px !important;
  }
  body.dash-fullscreen .hero-sponsor-inner {
    height: 32px !important;
  }
  body.dash-fullscreen .dash-content-area {
    flex: 1 !important;
    min-height: 0 !important;
    overflow: hidden !important;
  }
  body.dash-fullscreen .dash-main-content {
    padding: 4px !important;
  }
  body.dash-fullscreen .dash-tab-nav {
    gap: 2px !important;
    margin-bottom: 2px !important;
  }
  body.dash-fullscreen .dash-tab-nav button {
    font-size: 8px !important;
    padding: 3px 4px !important;
    min-height: 22px !important;
  }
  body.dash-fullscreen .dash-slide-viewport {
    flex: 1 !important;
    min-height: 0 !important;
  }
  body.dash-fullscreen .dash-slide {
    padding: 0 !important;
  }
  body.dash-fullscreen .bwrap {
    padding: 4px !important;
    border-radius: 8px !important;
  }
  body.dash-fullscreen .bcol {
    min-width: 120px !important;
  }
  body.dash-fullscreen .bmatch {
    margin: 2px 0 !important;
    border-radius: 6px !important;
  }
  body.dash-fullscreen .bteam {
    padding: 4px 6px !important;
    font-size: 10px !important;
  }
  body.dash-fullscreen .bscore {
    font-size: 9px !important;
    padding: 1px 3px !important;
  }
}

/* ===== GENERAL PORTRAIT OPTIMIZATION (ALL screens, not just fullscreen) ===== */
/* Handles tablets and phones in portrait orientation across the ENTIRE app */
@media (orientation: portrait) {
  /* Body: reduce padding in portrait */
  body {
    padding: 0 !important;
  }

  /* Main: full width, reduced vertical padding */
  main {
    width: 100% !important;
    max-width: 100vw !important;
    padding: 12px 12px 80px !important;
    overflow-x: hidden !important;
    box-sizing: border-box !important;
  }

  /* Header: compact in portrait */
  #main-header {
    padding: 0 12px !important;
  }

  /* Config section: stack grids in portrait */
  #v-config .grid.grid-cols-2 {
    grid-template-columns: 1fr !important;
  }

  #v-config .grid.grid-cols-3 {
    grid-template-columns: 1fr 1fr !important;
  }

  #v-config .grid.grid-cols-12 {
    grid-template-columns: 1fr !important;
  }

  #v-config .col-span-3,
  #v-config .col-span-6,
  #v-config .col-span-12 {
    grid-column: span 1 !important;
  }

  /* Dashboard: full width in portrait */
  #v-dash {
    width: 100% !important;
    max-width: 100% !important;
    overflow-x: hidden !important;
  }

  #v-dash > div {
    max-width: 100% !important;
    overflow-x: hidden !important;
  }

  /* Dashboard grids: single column in portrait */
  #v-dash .grid {
    grid-template-columns: 1fr !important;
  }

  #v-dash [class*="lg:col-span"] {
    grid-column: span 1 !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
  }

  /* Sponsor cards: 2 columns in portrait */
  #dash-sponsor-slots {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 8px !important;
  }

  /* Ad slots: 2 columns in portrait */
  #dash-ad-slots {
    grid-template-columns: 1fr 1fr !important;
    gap: 8px !important;
  }

  /* Dashboard stats: 2x2 in portrait */
  #v-dash .grid.grid-cols-4.gap-2.mb-4 {
    grid-template-columns: 1fr 1fr !important;
  }

  /* Banner: compact in portrait */
  #tour-banner {
    max-width: 100% !important;
    margin: 0 auto 12px !important;
    min-height: 120px !important;
  }

  .banner-inner {
    max-width: 100% !important;
    height: 120px !important;
  }

  /* Bracket: scrollable in portrait */
  .bwrap {
    max-width: 100% !important;
    overflow-x: auto !important;
  }

  /* Nav: compact in portrait */
  nav {
    padding: 0 8px !important;
  }

  /* Modals: full width in portrait */
  .dark-panel {
    max-width: 100% !important;
    margin: 8px !important;
  }

  /* Registration: full width in portrait */
  #v-register .lg\:col-span-5,
  #v-register .lg\:col-span-3,
  #v-register .lg\:col-span-4 {
    min-height: auto !important;
  }
}

/* Short portrait override (max-height 768px): extra compact */
@media (orientation: portrait) and (max-height: 768px) {
  main {
    padding: 8px 8px 70px !important;
  }

  /* Dashboard: hide side ad columns — not enough horizontal space */
  .dash-ad-column {
    display: none !important;
  }

  /* Content area: single column */
  .dash-content-area {
    flex-direction: column !important;
  }

  /* Main content: compact */
  .dash-main-content {
    min-height: 200px;
    border-radius: 12px !important;
  }

  /* Compact header */
  .dash-header-bar {
    padding: 4px 8px !important;
    gap: 6px !important;
  }

  .dash-tour-name {
    font-size: 12px !important;
    min-width: 80px;
  }

  .dh-stat {
    padding: 1px 4px !important;
    min-width: 26px !important;
  }

  .dh-stat-val {
    font-size: 11px !important;
  }

  /* Compact banner */
  .hero-sponsor-banner {
    min-height: 50px !important;
  }

  .hero-sponsor-inner {
    height: 50px !important;
  }

  /* Compact bracket */
  .bwrap {
    padding: 8px !important;
  }

  .bcol {
    min-width: 130px !important;
  }

  /* Compact ticker */
  .ticker-bar {
    height: 36px !important;
  }

  /* Compact tab nav */
  .dash-tab-nav {
    gap: 2px !important;
  }

  .dash-tab-nav button {
    font-size: 9px !important;
    padding: 4px 5px !important;
    min-height: 26px !important;
  }

  /* Compact match cards */
  .mcard {
    padding: 10px !important;
  }

  /* Compact table */
  .ltable th {
    padding: 6px 4px !important;
    font-size: 9px !important;
  }

  .ltable td {
    padding: 6px 4px !important;
    font-size: 11px !important;
  }

  /* Compact player cards */
  .pe-card {
    margin: 8px auto !important;
    padding: 12px !important;
  }

  .pe-grid {
    grid-template-columns: 1fr !important;
  }
}

/* ===== ORIENTATION: LANDSCAPE (Wide screens) ===== */
/* Optimize for wide horizontal displays */
@media (orientation: landscape) and (min-width: 1024px) {
  /* Ensure 3-column layout on wide landscape */
  .dash-content-area {
    flex-direction: row !important;
  }

  /* Ad columns get more width on wide screens */
  .dash-ad-column {
    width: 160px !important;
  }

  /* Main bracket area has comfortable width */
  .dash-main-content {
    min-height: 0;
  }

  /* Hero banner stretches nicely */
  .hero-sponsor-banner {
    min-height: 80px;
  }
  .hero-sponsor-inner {
    height: 80px;
  }
}

/* Landscape fullscreen — maximize bracket visibility */
@media (orientation: landscape) {
  body.dash-fullscreen .dash-wrapper {
    flex-direction: column;
    flex: 1;
    min-height: 0;
    gap: 0;
  }
  body.dash-fullscreen .dash-content-area {
    flex: 1 !important;
    flex-direction: row !important;
    gap: 4px;
    min-height: 0;
    overflow: hidden !important;
  }
  body.dash-fullscreen .dash-ad-column {
    /* width controlled by specific :first-child / :last-child rules in TV v2 block */
    gap: 4px;
  }
  body.dash-fullscreen .dash-main-content {
    flex: 1 !important;
    min-width: 0 !important;
    min-height: 0 !important;
    overflow: hidden !important;
    display: flex !important;
    flex-direction: column !important;
  }
  body.dash-fullscreen .dash-slide-viewport {
    flex: 1 !important;
    min-height: 0 !important;
    overflow: hidden !important;
  }
  body.dash-fullscreen .dash-slide {
    overflow: hidden !important;
  }
  body.dash-fullscreen .bwrap {
    overflow-x: auto !important;
    max-height: 100% !important;
  }
}

/* ===== TALL SCREENS (1080px+ height portrait, e.g. vertical TV) ===== */
@media (orientation: portrait) and (min-height: 1080px) {
  /* Show side ads on tall portrait screens — enough width */
  .dash-ad-column {
    display: flex !important;
    width: 120px !important;
  }
  .dash-content-area {
    flex-direction: row !important;
  }
  .dash-main-content {
    min-height: 0;
  }
  /* Give more vertical room to bracket */
  .bwrap {
    padding: 12px !important;
  }
  .bcol {
    min-width: 155px !important;
  }
  .bteam {
    padding: 7px 10px !important;
    font-size: 12px !important;
  }
  .bscore {
    padding: 2px 6px !important;
    font-size: 11px !important;
  }
}

/* ===== SCHEDULE CALENDAR ===== */
.sched-summary { margin-bottom: 10px; padding: 8px; background: rgba(57,255,20,0.04); border: 1px solid rgba(57,255,20,0.12); border-radius: 10px; }
.sched-summary-row { display: flex; justify-content: space-between; align-items: center; padding: 4px 0; font-size: 10px; }
.sched-summary-row + .sched-summary-row { border-top: 1px solid rgba(57,255,20,0.08); }
.sched-sum-label { color: var(--text-dim); font-family: var(--font-mono); font-size: 10px; }
.sched-sum-value { color: var(--accent); font-weight: 700; font-family: var(--font-mono); font-size: 10px; }

.sched-months { display: flex; flex-wrap: wrap; gap: 12px; }
.sched-month { flex: 1; min-width: 180px; }
.sched-month-title { font-size: 10px; font-weight: 800; color: var(--text-primary); text-transform: uppercase; letter-spacing: .06em; margin-bottom: 6px; padding-bottom: 4px; border-bottom: 1px solid var(--border-subtle); }
.sched-cal { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; }
.sched-hdr { text-align: center; font-size: 8px; font-weight: 700; color: var(--text-dim); text-transform: uppercase; padding: 3px 0; font-family: var(--font-mono); }
.sched-hdr.disabled { color: var(--text-ghost); opacity: .4; }

.sched-cell { position: relative; text-align: center; padding: 3px 1px; border-radius: 5px; min-height: 26px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px; transition: all .15s; }
.sched-cell.empty { opacity: 0; pointer-events: none; }
.sched-cell.blocked { opacity: .12; }
.sched-cell.tournament { background: rgba(57,255,20,0.08); border: 1px solid rgba(57,255,20,0.2); }
.sched-cell.today .sched-num { text-decoration: underline; text-underline-offset: 2px; }

.sched-num { font-size: 10px; font-weight: 600; color: var(--text-dim); font-family: var(--font-mono); line-height: 1; }
.sched-cell.tournament .sched-num { color: var(--accent); font-weight: 800; }
.sched-badge { font-size: 6px; font-weight: 800; color: #0D0D0D; background: var(--accent); border-radius: 999px; padding: 0 3px; line-height: 12px; min-width: 12px; text-align: center; }

.sched-compact .sched-month { min-width: 140px; }
.sched-month-extra { display: flex; align-items: center; justify-content: center; min-height: 50px; border: 1px dashed var(--border-subtle); border-radius: 10px; }
/* ================================================================
   PROPADEL TV FULLSCREEN OVERRIDE — v2 "Large-Ad Proportions"
   ================================================================
   Landscape 16:9 — "Broadcast Pro":  65 % content / 35 % ads
   Portrait  9:16 — "Stadium Arena":  36 % content / 64 % ads

   Injected via <link> tag AFTER the main propadel stylesheet.
   All existing-element selectors MUST start with  body.dash-fullscreen
   New injected elements use their own .tv-* class names.
   ================================================================ */

/* ----------------------------------------------------------------
   COLOR TOKENS
   ---------------------------------------------------------------- */
:root {
  --tv-bg-darkest:      #0D0D0D;
  --tv-bg-dark:         #121212;
  --tv-bg-panel:        #161618;
  --tv-accent:          #7CFF00;
  --tv-accent-dim:      rgba(124,255,0,0.08);
  --tv-accent-border:   rgba(124,255,0,0.25);
  --tv-text-primary:    #f4f4f5;
  --tv-text-muted:      #8e8e93;
  --tv-border-default:  #2c2c2e;
  --tv-border-subtle:   #232325;
}


/* ================================================================
   BASE FULLSCREEN RESET — Edge-to-edge, zero margin, full viewport
   ================================================================
   DOM hierarchy (from index.html):
     body (has p-4 md:p-6 — MUST be zeroed)
       main#main-content (has padding — MUST be zeroed)
         #v-dash (flex-column, 100vh)
           .led-ticker-top  ← OUTSIDE dash-wrapper!
           .dash-wrapper (flex-column, flex:1 NOT 100vh)
             .dash-header-bar
             .hero-sponsor-banner
             #tour-banner
             .dash-content-area (flex:1)
               .dash-ad-column (left)
               .dash-main-content (flex:1)
               .dash-ad-column (right)
             .dash-compact-info
             .led-ticker-bottom
             [injected: tv-bottom-ad-strip, tv-fixed-brand-bar]
   ================================================================ */

/* — BODY: strip ALL margin/padding — */
body.dash-fullscreen {
  padding: 0 !important;
  margin: 0 !important;
  width: 100vw !important;
  height: 100vh !important;
  max-width: 100vw !important;
  max-height: 100vh !important;
  overflow: hidden !important;
  background: var(--tv-bg-darkest) !important;
  box-sizing: border-box !important;
}

/* — MAIN: strip ALL margin/padding — */
body.dash-fullscreen main {
  padding: 0 !important;
  margin: 0 !important;
  width: 100% !important;
  height: 100% !important;
  max-width: 100% !important;
  overflow: hidden !important;
}

/* — #v-dash: flex column filling viewport — */
body.dash-fullscreen #v-dash {
  display: flex !important;
  flex-direction: column !important;
  width: 100% !important;
  height: 100vh !important;
  max-height: 100vh !important;
  overflow: hidden !important;
  padding: 0 !important;
  margin: 0 !important;
  background: var(--tv-bg-darkest) !important;
}

/* — #v-dash-content: CRITICAL intermediate wrapper must be flex column —
   The partials loader injects dashboard HTML into #v-dash-content.
   Without this, ticker-top and dash-wrapper are in block flow, not flex,
   causing dash-wrapper to expand beyond viewport. */
body.dash-fullscreen #v-dash-content {
  display: flex !important;
  flex-direction: column !important;
  flex: 1 1 0% !important;
  min-height: 0 !important;
  width: 100% !important;
  height: 100% !important;
  overflow: hidden !important;
  padding: 0 !important;
  margin: 0 !important;
}

/* — dash-wrapper: flex:1 fills remaining space AFTER ticker-top — */
body.dash-fullscreen .dash-wrapper {
  display: flex !important;
  flex-direction: column !important;
  flex: 1 1 0% !important;
  min-height: 0 !important;
  width: 100% !important;
  overflow: hidden !important;
  background: var(--tv-bg-darkest) !important;
  gap: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
}

/* — Hide non-essential chrome in fullscreen — */
body.dash-fullscreen #main-header,
body.dash-fullscreen nav,
body.dash-fullscreen .dash-compact-info,
body.dash-fullscreen .pe-placeholder-wrap,
body.dash-fullscreen #splash-placeholder,
body.dash-fullscreen #mesh-bg {
  display: none !important;
}

/* — dash-fs-close: keep visible as overlay — */
body.dash-fullscreen .dash-fs-close {
  display: flex !important;
}


/* ================================================================
   LANDSCAPE 16:9 — "Broadcast Pro"  (default / min-aspect-ratio)
   ----------------------------------------------------------------
   DOM layout (top → bottom):
     .led-ticker-top              38 px
     .dash-header-bar             50 px
     .hero-sponsor-banner         56 px
     #tour-banner                 56 px  (if present)
     .dash-content-area           flex:1  ← horizontal row
       .dash-ad-column  (left)   ~10 %
       .dash-main-content         ~77 %
       .dash-ad-column  (right)  ~13 %
     .led-ticker-bottom          38 px
     .tv-bottom-ad-strip         48 px   ← injected
     .tv-fixed-brand-bar         32 px   ← injected
   ================================================================ */


/* — LED Tickers — full width — */
body.dash-fullscreen .led-ticker-top,
body.dash-fullscreen .led-ticker-bottom {
  height: 38px !important;
  min-height: 38px !important;
  max-height: 38px !important;
  flex-shrink: 0 !important;
  background: var(--tv-bg-dark) !important;
  overflow: hidden !important;
  width: 100% !important;
}

/* — Header bar — */
body.dash-fullscreen .dash-header-bar {
  min-height: 50px !important;
  max-height: 60px !important;
  flex-shrink: 0 !important;
  background: var(--tv-bg-dark) !important;
  border-bottom: 1px solid var(--tv-border-subtle) !important;
  padding: 0 12px !important;
}

body.dash-fullscreen .dash-tour-name {
  font-size: 20px !important;
  font-weight: 800 !important;
  color: var(--tv-text-primary) !important;
  letter-spacing: 0.02em !important;
}

/* — Hero sponsor banner — 56 px tall — */
body.dash-fullscreen .hero-sponsor-banner {
  height: 56px !important;
  min-height: 56px !important;
  max-height: 56px !important;
  flex-shrink: 0 !important;
  background: var(--tv-bg-panel) !important;
  border-bottom: 1px solid rgba(124,255,0,0.25) !important;
  overflow: hidden !important;
}
body.dash-fullscreen .hero-sponsor-inner {
  height: 56px !important;
  min-height: 56px !important;
}

/* — Tour banner — */
body.dash-fullscreen #tour-banner {
  height: 56px !important;
  min-height: 56px !important;
  max-height: 56px !important;
  flex-shrink: 0 !important;
  overflow: hidden !important;
}

/* — Content area: horizontal row — */
body.dash-fullscreen .dash-content-area {
  display: flex !important;
  flex-direction: row !important;
  flex: 1 1 0% !important;
  min-height: 0 !important;
  overflow: hidden !important;
  align-items: stretch !important;
  justify-content: space-evenly !important;
  gap: 0 !important;
}

/* — DO NOT use the old 56px sponsor strips in this design — */
body.dash-fullscreen .dash-sponsor-strip-left,
body.dash-fullscreen .dash-sponsor-strip-right {
  display: none !important;
}


/* ================================================================
   AD COLUMNS — landscape sidebars with LARGE sponsor cards
   ----------------------------------------------------------------
   Left column: flex 0 0 21% (reduced from 37.5%)
   Right column: flex 0 0 21% (reduced from 37.5%)
   Bracket center: flex 0 0 58% (reduced BY 25% from ~77% — NOT set TO 25%)
   Content area: justify-content space-evenly for perfect centering
   Cards fill available height, logos fill cards, no frames.
   ================================================================ */

/* — General ad column — */
body.dash-fullscreen .dash-ad-column {
  display: flex !important;
  flex-direction: column !important;
  flex-shrink: 0 !important;
  overflow: hidden !important;
  background: var(--tv-bg-dark) !important;
  gap: 2px !important;
  padding: 0 !important;
  scrollbar-width: none !important;
}

body.dash-fullscreen .dash-ad-column::-webkit-scrollbar {
  display: none !important;
}

/* Left column — 21%, bracket center gets 58% (reduced 25% from ~77%) */
body.dash-fullscreen .dash-content-area > #dash-ad-left {
  flex: 0 0 21% !important;
  border-right: 1px solid var(--tv-accent-border) !important;
}

/* Right column — 21%, bracket center gets 58% (reduced 25% from ~77%) */
body.dash-fullscreen .dash-content-area > #dash-ad-right {
  flex: 0 0 21% !important;
  border-left: 1px solid var(--tv-accent-border) !important;
}

/* — Ad card items — FIXED SIZE containers, image adapts to space — */
body.dash-fullscreen .dash-ad-column .dash-ad-card {
  display: flex !important;
  flex-direction: column !important;
  align-items: stretch !important;
  justify-content: stretch !important;
  gap: 0 !important;
  flex: 0 0 calc(50% - 1px) !important;
  min-height: 0 !important;
  height: calc(50% - 1px) !important;
  max-height: calc(50% - 1px) !important;
  background: var(--tv-bg-panel) !important;
  border: none !important;
  border-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  overflow: hidden !important;
  cursor: pointer !important;
  transition: background 0.25s ease !important;
  position: relative !important;
}

/* Make link wrapper inside card fill entire card with position absolute */
body.dash-fullscreen .dash-ad-column .dash-ad-card > a {
  position: absolute !important;
  inset: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: stretch !important;
  justify-content: stretch !important;
  text-decoration: none !important;
  color: inherit !important;
  min-height: 0 !important;
  overflow: hidden !important;
}

body.dash-fullscreen .dash-ad-column .dash-ad-card:hover {
  background: var(--tv-bg-hover, #1e1e21) !important;
}

/* Prevent hover border/shadow on fullscreen ad cards */
body.dash-fullscreen .dash-ad-card.has-ad {
  border: none !important;
  box-shadow: none !important;
}
body.dash-fullscreen .dash-ad-card.has-ad:hover {
  border: none !important;
  box-shadow: none !important;
  background: var(--tv-bg-hover, #1e1e21) !important;
}

/* Ad empty placeholder: no frames in fullscreen */
body.dash-fullscreen .dash-ad-column .dash-ad-empty {
  padding: 0 !important;
  gap: 2px !important;
}

/* Ad card logo / image — CONSTRAIN to container, image adapts */
body.dash-fullscreen .dash-ad-column .dash-ad-card img,
body.dash-fullscreen .dash-ad-column .dash-ad-card video {
  width: 100% !important;
  height: 100% !important;
  max-width: 100% !important;
  max-height: 100% !important;
  min-width: 0 !important;
  min-height: 0 !important;
  object-fit: contain !important;
  border-radius: 0 !important;
  flex-shrink: 1 !important;
}

/* Hide text section in fullscreen sidebar cards — image fills entire card */
body.dash-fullscreen .dash-ad-column .dash-ad-card .ad-card-text {
  display: none !important;
}

/* Make media area fill entire card in fullscreen — ABSOLUTE to prevent image from affecting card size */
body.dash-fullscreen .dash-ad-column .dash-ad-card .ad-card-media {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  min-height: 0 !important;
  border-radius: 0 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  overflow: hidden !important;
  background: transparent !important;
}

/* Sponsor strip items in fullscreen — fill container */
body.dash-fullscreen .sponsor-strip-item img,
body.dash-fullscreen .sponsor-strip-item video {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  border-radius: 0 !important;
}

/* Stadium ticker images in fullscreen — fill container */
body.dash-fullscreen .stadium-ticker-item img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  border-radius: 0 !important;
}

/* Hero sponsor media in fullscreen — fill container */
body.dash-fullscreen .hero-sponsor-media img,
body.dash-fullscreen .hero-sponsor-media video {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  border-radius: 0 !important;
}

/* Ad card emoji fallback */
body.dash-fullscreen .dash-ad-column .dash-ad-card .ad-emoji,
body.dash-fullscreen .dash-ad-column .dash-ad-card .ad-icon {
  font-size: 46px !important;
  line-height: 1 !important;
  flex-shrink: 0 !important;
}

/* Ad card text — 11-13 px, not icon-sized */
body.dash-fullscreen .dash-ad-column .dash-ad-card .ad-name,
body.dash-fullscreen .dash-ad-column .dash-ad-card .ad-title {
  font-size: 14px !important;
  font-weight: 700 !important;
  color: var(--tv-text-primary) !important;
  text-align: center !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
  max-width: 100% !important;
}

body.dash-fullscreen .dash-ad-column .dash-ad-card .ad-subtitle,
body.dash-fullscreen .dash-ad-column .dash-ad-card .ad-desc,
body.dash-fullscreen .dash-ad-column .dash-ad-card .ad-tagline {
  font-size: 12px !important;
  color: var(--tv-text-muted) !important;
  text-align: center !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
  max-width: 100% !important;
}

/* Ad card CTA badge */
body.dash-fullscreen .dash-ad-column .dash-ad-card .ad-cta {
  font-size: 9px !important;
  font-weight: 800 !important;
  color: var(--tv-accent) !important;
  text-transform: uppercase !important;
  letter-spacing: 0.06em !important;
  padding: 2px 8px !important;
  border: 1px solid var(--tv-accent-border) !important;
  border-radius: 4px !important;
  background: var(--tv-accent-dim) !important;
}

/* Column heading / label inside ad column */
body.dash-fullscreen .dash-ad-column .ad-column-label {
  font-size: 9px !important;
  font-weight: 800 !important;
  letter-spacing: 0.14em !important;
  text-transform: uppercase !important;
  color: var(--tv-accent) !important;
  text-align: center !important;
  padding: 0 0 6px 0 !important;
  border-bottom: 1px solid var(--tv-accent-border) !important;
  margin-bottom: 2px !important;
  flex-shrink: 0 !important;
}


/* — Main content center — 58% width (bracket/info, reduced 25% from ~77%) — */
body.dash-fullscreen .dash-main-content {
  flex: 0 0 58% !important;
  min-width: 0 !important;
  min-height: 0 !important;
  overflow: hidden !important;
  display: flex !important;
  flex-direction: column !important;
  padding: 6px 8px !important;
  background: transparent !important;
  border: none !important;
  border-radius: 0 !important;
}


/* ================================================================
   INJECTED LANDSCAPE ELEMENTS
   ================================================================ */

/* — Bottom Ad Strip — horizontal row of 4-6 LARGE sponsor logos — */
.tv-bottom-ad-strip {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  height: 40px !important;
  min-height: 40px !important;
  max-height: 40px !important;
  flex-shrink: 0 !important;
  background: var(--tv-bg-dark) !important;
  border-top: 1px solid var(--tv-border-subtle) !important;
  border-bottom: 1px solid var(--tv-border-subtle) !important;
  padding: 0 16px !important;
  overflow: hidden !important;
}

.tv-bottom-ad-strip .tv-ad-strip-item {
  display: flex !important;
  align-items: center !important;
  gap: 6px !important;
  padding: 2px 6px !important;
  border-radius: 0 !important;
  background: var(--tv-bg-panel) !important;
  border: none !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  max-width: 180px !important;
}

.tv-bottom-ad-strip .tv-ad-strip-item img,
.tv-bottom-ad-strip .tv-ad-strip-item video {
  width: 32px !important;
  height: 32px !important;
  object-fit: cover !important;
  border-radius: 0 !important;
  flex-shrink: 0 !important;
}

.tv-bottom-ad-strip .tv-ad-strip-item .tv-ad-strip-emoji {
  font-size: 22px !important;
  flex-shrink: 0 !important;
}

.tv-bottom-ad-strip .tv-ad-strip-item .tv-ad-strip-name {
  font-size: 11px !important;
  font-weight: 700 !important;
  color: var(--tv-text-primary) !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

/* — Ad Grid 3×1 — merged columns, full-height image ads — */
.tv-ad-grid {
  display: grid !important;
  grid-template-columns: repeat(3, 1fr) !important;
  gap: 4px !important;
  flex-shrink: 0 !important;
  padding: 4px 12px !important;
  background: var(--tv-bg-darkest) !important;
  overflow: hidden !important;
  height: 140px !important;
}

.tv-ad-grid .tv-ad-grid-item {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  background: var(--tv-bg-panel) !important;
  border: none !important;
  border-radius: 0 !important;
  overflow: hidden !important;
  position: relative !important;
  cursor: pointer !important;
  transition: background 0.25s ease !important;
}

.tv-ad-grid .tv-ad-grid-item:hover {
  background: var(--tv-bg-hover, #1e1e21) !important;
}

.tv-ad-grid .tv-ad-grid-item img,
.tv-ad-grid .tv-ad-grid-item video {
  width: 100% !important;
  height: 100% !important;
  object-fit: contain !important;
  border-radius: 0 !important;
  position: absolute !important;
  inset: 0 !important;
}

.tv-ad-grid .tv-ad-grid-item .tv-ad-grid-emoji {
  font-size: 24px !important;
  flex-shrink: 0 !important;
}

.tv-ad-grid .tv-ad-grid-item .tv-ad-grid-name {
  font-size: 11px !important;
  font-weight: 700 !important;
  color: var(--tv-text-primary) !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

.tv-ad-grid .tv-ad-grid-item .tv-ad-grid-sub {
  font-size: 9px !important;
  color: var(--tv-text-muted) !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

/* — Fixed Brand Bar — PEPSI-like accent gradient — */
.tv-fixed-brand-bar {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  height: 28px !important;
  min-height: 28px !important;
  max-height: 28px !important;
  flex-shrink: 0 !important;
  background: linear-gradient(
    90deg,
    rgba(124,255,0,0.15) 0%,
    rgba(124,255,0,0.06) 50%,
    rgba(124,255,0,0.15) 100%
  ) !important;
  border-top: 1px solid var(--tv-accent-border) !important;
  padding: 0 16px !important;
  overflow: hidden !important;
}

.tv-fixed-brand-bar .tv-brand-logo {
  height: 22px !important;
  max-height: 22px !important;
  width: auto !important;
  object-fit: contain !important;
  filter: brightness(1.1) !important;
}

.tv-fixed-brand-bar .tv-brand-name {
  font-size: 11px !important;
  font-weight: 900 !important;
  color: var(--tv-text-primary) !important;
  letter-spacing: 0.06em !important;
  text-transform: uppercase !important;
}

.tv-fixed-brand-bar .tv-brand-lock {
  font-size: 9px !important;
  color: var(--tv-accent) !important;
  opacity: 0.7 !important;
}


/* ================================================================
   PORTRAIT 9:16 — "Stadium Arena" (v37)
   ----------------------------------------------------------------
   Activated by  @media (max-aspect-ratio: 1/1)
   Flex-grow layout: ads AUTOMATICALLY fill ALL remaining space.
   Bracket capped at 28vh. NO dead space at bottom.
   Asymmetric growth: bottom-grid 2x > featured 1.5x > pepsi=ad-row 1x.

   DOM layout (top → bottom):
     .tv-portrait-banner-grid    12vh   flex:0 0 (fixed, outside wrapper)
     .led-ticker-top              2.5vh  flex:0 0 (fixed, outside wrapper)
     ┌─ .dash-wrapper flex:1 ─────────────────────────────────────┐
     │  .dash-header-bar             5vh   flex:0 0 (fixed)        │
     │  .tv-portrait-pepsi-banner          flex:1 1 6vh  (grows)   │
     │  .tv-portrait-ad-row                 flex:1 1 8vh  (grows)   │
     │  .dash-content-area           28vh   flex:0 0 (CAPPED)       │
     │  .tv-portrait-featured-ad           flex:1.5 1 10vh (grows)  │
     │  .led-ticker-bottom           2.5vh  flex:0 0 (fixed)        │
     │  .tv-portrait-bottom-grid           flex:2 1 12vh (grows 2x) │
     │  .tv-fixed-brand-bar          4vh   flex:0 0 (fixed)        │
     └───────────────────────────────────────────────────────────┘
     Wrapper fills 85.5vh; fixed=39.5vh; growing fills ~46vh.
     Sidebars (.dash-ad-column) are HIDDEN.
   ================================================================ */

@media (max-aspect-ratio: 1/1) {

  /* — Hide sidebars — */
  body.dash-fullscreen .dash-ad-column {
    display: none !important;
  }

  /* — Hide old sponsor strips — */
  body.dash-fullscreen .dash-sponsor-strip-left,
  body.dash-fullscreen .dash-sponsor-strip-right {
    display: none !important;
  }

  /* — Wrapper stays column, fills remaining space — */
  body.dash-fullscreen .dash-wrapper {
    flex-direction: column !important;
    flex: 1 1 0% !important;
    min-height: 0 !important;
    max-height: 100% !important;
    gap: 0 !important;
    overflow: hidden !important;
  }

  /* — Content area: CAPPED at 28vh — bracket gets limited space — */
  body.dash-fullscreen .dash-content-area {
    flex-direction: column !important;
    flex: 0 0 28vh !important;
    min-height: 0 !important;
    overflow: hidden !important;
  }

  /* — Main content fills remaining vertical space — */
  body.dash-fullscreen .dash-main-content {
    flex: 1 !important;
    min-height: 0 !important;
    padding: 6px 8px !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
  }

  /* — Compact header — */
  body.dash-fullscreen .dash-header-bar {
    min-height: 5vh !important;
    max-height: 6vh !important;
    padding: 3px 8px !important;
    flex: 0 0 5vh !important;
  }

  body.dash-fullscreen .dash-tour-name {
    font-size: 14px !important;
  }

  /* — Compact tickers — */
  body.dash-fullscreen .led-ticker-top,
  body.dash-fullscreen .led-ticker-bottom {
    height: 2.5vh !important;
    min-height: 20px !important;
    max-height: 3vh !important;
    flex: 0 0 2.5vh !important;
  }

  body.dash-fullscreen .ticker-item {
    font-size: 9px !important;
  }

  /* — Hide landscape banners, replaced by portrait grids — */
  body.dash-fullscreen .hero-sponsor-banner {
    display: none !important;
  }

  body.dash-fullscreen #tour-banner {
    display: none !important;
  }

  /* — Hide landscape-only injected elements — */
  body.dash-fullscreen .tv-bottom-ad-strip,
  body.dash-fullscreen .tv-ad-grid {
    display: none !important;
  }

  /* ============================================================
     NEW PORTRAIT INJECTED ELEMENTS
     ============================================================ */

  /* — Top Banner Grid: 2 rows × 4 cols, 12vh — */
  .tv-portrait-banner-grid {
    display: grid !important;
    grid-template-columns: repeat(4, 1fr) !important;
    grid-template-rows: 1fr 1fr !important;
    gap: 5px !important;
    padding: 0.8vh 10px !important;
    flex-shrink: 0 !important;
    background: var(--tv-bg-darkest) !important;
    height: 12vh !important;
    min-height: 70px !important;
    max-height: 12vh !important;
    overflow: hidden !important;
  }

  .tv-portrait-banner-grid .tv-pgrid-item {
    display: flex !important;
    align-items: center !important;
    gap: 4px !important;
    background: var(--tv-bg-panel) !important;
    border: none !important;
    border-radius: 0 !important;
    padding: 2px 4px !important;
    overflow: hidden !important;
    cursor: pointer !important;
    transition: background 0.25s ease !important;
  }

  .tv-portrait-banner-grid .tv-pgrid-item:hover {
    background: var(--tv-bg-hover, #1e1e21) !important;
  }

  /* Banner grid logo — fill available space */
  .tv-portrait-banner-grid .tv-pgrid-item img,
  .tv-portrait-banner-grid .tv-pgrid-item video {
    width: 28px !important;
    height: 28px !important;
    object-fit: cover !important;
    border-radius: 0 !important;
    flex-shrink: 0 !important;
  }

  .tv-portrait-banner-grid .tv-pgrid-item .tv-pgrid-emoji {
    font-size: 16px !important;
  }

  /* Banner grid text */
  .tv-portrait-banner-grid .tv-pgrid-item .tv-pgrid-name {
    font-size: 13px !important;
    font-weight: 700 !important;
    color: var(--tv-text-primary) !important;
    text-align: center !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
    max-width: 100% !important;
  }

  .tv-portrait-banner-grid .tv-pgrid-item .tv-pgrid-label {
    font-size: 9px !important;
    color: var(--tv-text-muted) !important;
    text-transform: uppercase !important;
    letter-spacing: 0.05em !important;
  }

  /* — Portrait PEPSI Brand Banner — */
  .tv-portrait-pepsi-banner {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 12px !important;
    padding: 0 16px !important;
    flex: 1 1 6vh !important;
    min-height: 36px !important;
    overflow: hidden !important;
    background: linear-gradient(
      90deg,
      rgba(124,255,0,0.12) 0%,
      rgba(124,255,0,0.04) 50%,
      rgba(124,255,0,0.12) 100%
    ) !important;
    border-top: 1px solid var(--tv-accent-border) !important;
    border-bottom: 1px solid var(--tv-accent-border) !important;
  }

  .tv-portrait-pepsi-banner .tv-pp-logo {
    height: 20px !important;
    max-height: 20px !important;
    width: auto !important;
    object-fit: contain !important;
    filter: brightness(1.1) !important;
  }

  .tv-portrait-pepsi-banner .tv-pp-name {
    font-size: 11px !important;
    font-weight: 900 !important;
    color: var(--tv-text-primary) !important;
    letter-spacing: 0.06em !important;
    text-transform: uppercase !important;
  }

  .tv-portrait-pepsi-banner .tv-pp-lock {
    font-size: 8px !important;
    color: var(--tv-accent) !important;
  }

  /* — Portrait Ad Row: flex:1 1 8vh (grows 1x) — */
  .tv-portrait-ad-row {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 6px !important;
    padding: 6px 8px !important;
    flex: 1 1 8vh !important;
    min-height: 48px !important;
    background: var(--tv-bg-dark) !important;
  }

  .tv-portrait-ad-row .tv-par-item {
    display: flex !important;
    align-items: center !important;
    gap: 6px !important;
    flex: 1 !important;
    justify-content: center !important;
    background: var(--tv-bg-panel) !important;
    border: none !important;
    border-radius: 0 !important;
    padding: 4px 8px !important;
    overflow: hidden !important;
    cursor: pointer !important;
    transition: background 0.25s ease !important;
  }

  .tv-portrait-ad-row .tv-par-item:hover {
    background: var(--tv-bg-hover, #1e1e21) !important;
  }

  /* Ad row images — fill */
  .tv-portrait-ad-row .tv-par-item img,
  .tv-portrait-ad-row .tv-par-item video {
    width: 28px !important;
    height: 28px !important;
    object-fit: cover !important;
    border-radius: 0 !important;
    flex-shrink: 0 !important;
  }

  .tv-portrait-ad-row .tv-par-item .tv-par-emoji {
    font-size: 3vh !important;
  }

  /* Ad row text — 1.6vh */
  .tv-portrait-ad-row .tv-par-item .tv-par-name {
    font-size: 1.6vh !important;
    font-weight: 700 !important;
    color: var(--tv-text-primary) !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
  }

  /* — Portrait Featured Ad: flex:1.5 1 10vh (grows 1.5x — asymmetric!) — */
  .tv-portrait-featured-ad {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 1.5vh !important;
    padding: 1vh 1.5vh !important;
    flex: 1.5 1 10vh !important;
    min-height: 70px !important;
    background: linear-gradient(135deg, var(--tv-bg-panel) 0%, var(--tv-bg-dark) 100%) !important;
    border: none !important;
    border-radius: 0 !important;
    margin: 0 !important;
    overflow: hidden !important;
    cursor: pointer !important;
  }

  /* Featured ad logo — fill */
  .tv-portrait-featured-ad img,
  .tv-portrait-featured-ad video {
    width: 7vh !important;
    height: 7vh !important;
    min-width: 42px !important;
    min-height: 42px !important;
    object-fit: cover !important;
    border-radius: 0 !important;
    flex-shrink: 0 !important;
  }

  .tv-portrait-featured-ad .tv-pfa-emoji {
    font-size: 5vh !important;
    flex-shrink: 0 !important;
  }

  .tv-portrait-featured-ad .tv-pfa-info {
    display: flex !important;
    flex-direction: column !important;
    gap: 3px !important;
    overflow: hidden !important;
  }

  .tv-portrait-featured-ad .tv-pfa-name {
    font-size: 2.2vh !important;
    font-weight: 900 !important;
    color: var(--tv-text-primary) !important;
  }

  .tv-portrait-featured-ad .tv-pfa-sub {
    font-size: 1.5vh !important;
    color: var(--tv-text-muted) !important;
  }

  .tv-portrait-featured-ad .tv-pfa-cta {
    font-size: 1.2vh !important;
    color: var(--tv-accent) !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.06em !important;
  }

  /* — Portrait Bottom Banner Grid: flex:2 1 12vh (grows 2x — biggest ad space!) — */
  .tv-portrait-bottom-grid {
    display: grid !important;
    grid-template-columns: repeat(3, 1fr) !important;
    grid-template-rows: 1fr 1fr !important;
    gap: 6px !important;
    padding: 0.8vh 10px !important;
    flex: 2 1 12vh !important;
    background: var(--tv-bg-darkest) !important;
    min-height: 60px !important;
    overflow: hidden !important;
  }

  .tv-portrait-bottom-grid .tv-pbgrid-item {
    display: flex !important;
    align-items: center !important;
    gap: 4px !important;
    background: var(--tv-bg-panel) !important;
    border: none !important;
    border-radius: 0 !important;
    padding: 4px 6px !important;
    overflow: hidden !important;
    cursor: pointer !important;
    transition: background 0.25s ease !important;
  }

  .tv-portrait-bottom-grid .tv-pbgrid-item:hover {
    background: var(--tv-bg-hover, #1e1e21) !important;
  }

  /* Bottom grid logo — fill */
  .tv-portrait-bottom-grid .tv-pbgrid-item img,
  .tv-portrait-bottom-grid .tv-pbgrid-item video {
    width: 3.5vh !important;
    height: 3.5vh !important;
    min-width: 26px !important;
    min-height: 26px !important;
    object-fit: cover !important;
    border-radius: 0 !important;
    flex-shrink: 0 !important;
  }

  .tv-portrait-bottom-grid .tv-pbgrid-item .tv-pbgrid-emoji {
    font-size: 2.6vh !important;
  }

  /* Bottom grid text — 1.4vh */
  .tv-portrait-bottom-grid .tv-pbgrid-item .tv-pbgrid-name {
    font-size: 1.4vh !important;
    font-weight: 700 !important;
    color: var(--tv-text-primary) !important;
    text-align: center !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
    max-width: 100% !important;
  }

  .tv-portrait-bottom-grid .tv-pbgrid-item .tv-pbgrid-label {
    font-size: 1vh !important;
    color: var(--tv-text-muted) !important;
    text-transform: uppercase !important;
    letter-spacing: 0.05em !important;
  }

  /* — Portrait brand bar: flex:0 0 4vh (fixed) — */
  body.dash-fullscreen .tv-fixed-brand-bar {
    display: flex !important;
    flex: 0 0 4vh !important;
    height: 4vh !important;
    min-height: 28px !important;
    max-height: 4vh !important;
    overflow: hidden !important;
  }

  .tv-fixed-brand-bar .tv-brand-logo {
    height: 3vh !important;
    max-height: 3vh !important;
  }

  .tv-fixed-brand-bar .tv-brand-name {
    font-size: 1.5vh !important;
  }

  /* — Portrait compact tab nav — */
  body.dash-fullscreen .dash-tab-nav {
    gap: 2px !important;
    margin-bottom: 2px !important;
  }

  /* — Portrait slide viewport: scrollable for small screens — */
  body.dash-fullscreen .dash-slide-viewport {
    overflow-y: auto !important;
    min-height: 0 !important;
  }

  body.dash-fullscreen .dash-tab-nav button {
    font-size: 9px !important;
    padding: 3px 6px !important;
    min-height: 24px !important;
    border-radius: 6px !important;
  }

  /* — Portrait compact bracket — */
  body.dash-fullscreen .bwrap {
    padding: 4px !important;
  }

  body.dash-fullscreen .bcol {
    min-width: 110px !important;
  }

  body.dash-fullscreen .bmatch {
    margin: 2px 0 !important;
    border-radius: 5px !important;
  }

  body.dash-fullscreen .bteam {
    padding: 3px 5px !important;
    font-size: 10px !important;
  }

  body.dash-fullscreen .bscore {
    font-size: 9px !important;
    padding: 1px 3px !important;
  }

  /* — Portrait compact standings — */
  body.dash-fullscreen .ltable th {
    font-size: 9px !important;
    padding: 3px 4px !important;
  }

  body.dash-fullscreen .ltable td {
    font-size: 9px !important;
    padding: 2px 4px !important;
  }

  /* — Portrait compact stats grid — */
  body.dash-fullscreen .stats-grid {
    gap: 3px !important;
  }

  body.dash-fullscreen .stats-grid > div {
    padding: 5px !important;
  }

} /* end @media portrait */


/* ================================================================
   VISIBILITY TOGGLES — landscape vs portrait
   ================================================================ */

/* Hide all portrait elements by default (landscape) */
.tv-portrait-banner-grid,
.tv-portrait-pepsi-banner,
.tv-portrait-ad-row,
.tv-portrait-featured-ad,
.tv-portrait-bottom-grid {
  display: none !important;
}

/* Hide all landscape injected elements by default */
.tv-bottom-ad-strip,
.tv-ad-grid,
.tv-fixed-brand-bar {
  display: none !important;
}

/* Show portrait elements ONLY in portrait */
@media (max-aspect-ratio: 1/1) {
  .tv-portrait-banner-grid,
  .tv-portrait-pepsi-banner,
  .tv-portrait-ad-row,
  .tv-portrait-featured-ad,
  .tv-portrait-bottom-grid {
    display: flex !important;
  }
  .tv-portrait-banner-grid {
    display: grid !important;
  }
  .tv-portrait-bottom-grid {
    display: grid !important;
  }
}

/* Show landscape injected elements ONLY in landscape */
@media (min-aspect-ratio: 1/1) {
  .tv-bottom-ad-strip,
  .tv-ad-grid,
  .tv-fixed-brand-bar {
    display: flex !important;
  }
  .tv-ad-grid {
    display: grid !important;
  }
}


/* ================================================================
   UTILITY & ANIMATIONS
   ================================================================ */

/* Subtle glow pulse on ad card accent borders */
@keyframes tv-accent-pulse {
  0%, 100% { border-color: var(--tv-border-subtle); }
  50%      { border-color: var(--tv-accent-border); }
}

body.dash-fullscreen .dash-ad-column .dash-ad-card,
.tv-ad-grid-item,
.tv-pgrid-item,
.tv-pbgrid-item,
.tv-portrait-featured-ad {
  animation: tv-accent-pulse 5s ease-in-out infinite;
}

/* Stagger animations so they don't all pulse in sync */
body.dash-fullscreen .dash-ad-column .dash-ad-card:nth-child(odd),
.tv-ad-grid-item:nth-child(odd),
.tv-pgrid-item:nth-child(odd),
.tv-pbgrid-item:nth-child(odd) {
  animation-delay: -2.5s;
}

/* Lock icon pulsing */
@keyframes tv-lock-pulse {
  0%, 100% { opacity: 0.45; }
  50%      { opacity: 1; }
}

.tv-brand-lock,
.tv-pp-lock {
  animation: tv-lock-pulse 3s ease-in-out infinite;
}

/* Subtle fade-in for fullscreen mode */
body.dash-fullscreen .dash-wrapper {
  animation: tv-fade-in 0.4s ease-out;
}

@keyframes tv-fade-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}

/* Hide scrollbars globally in fullscreen */
body.dash-fullscreen ::-webkit-scrollbar {
  width: 0 !important;
  height: 0 !important;
}

body.dash-fullscreen * {
  scrollbar-width: none !important;
}

/* Ensure all text in fullscreen uses the correct foreground */
body.dash-fullscreen .dash-wrapper,
body.dash-fullscreen .dash-wrapper * {
  color: var(--tv-text-primary);
}

/* Reset muted text */
body.dash-fullscreen .dash-wrapper .tv-text-muted,
body.dash-fullscreen .dash-wrapper [class*="muted"],
body.dash-fullscreen .dash-wrapper [class*="secondary"] {
  color: var(--tv-text-muted) !important;
}

/* Prevent text selection in TV mode */
body.dash-fullscreen .dash-wrapper {
  -webkit-user-select: none;
  -moz-user-select: none;
  user-select: none;
}

/* Prevent cursor blink / hide cursor after idle (optional, for kiosk) */
body.dash-fullscreen.dash-kiosk .dash-wrapper {
  cursor: none !important;
}

/* ─── Ad Slideshow (L4-L7 rotating ads) — clean fade, no chrome ─────────── */
.ad-slideshow {
  position: absolute;
  inset: 0;
  overflow: hidden;
}
.ad-slide {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  opacity: 0;
  transition: opacity 0.8s ease-in-out;
  pointer-events: none;
  overflow: hidden;
}
.ad-slide.active {
  opacity: 1;
  pointer-events: auto;
}
/* TV fullscreen: slideshow fills card edge-to-edge, slides fill slideshow */
body.dash-fullscreen .dash-ad-column .dash-ad-card .ad-slideshow {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
}
body.dash-fullscreen .dash-ad-column .dash-ad-card .ad-slide {
  transition: opacity 0.6s ease-in-out !important;
}
body.dash-fullscreen .dash-ad-column .dash-ad-card .ad-slide video {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
}