
/* HoopIQ v109 Lovable Exact UI — pixel-closer Arena Live skin, feature-safe overlay */
:root{
  --love-bg:#05070d;
  --love-bg2:#080b14;
  --love-panel:#0d1320;
  --love-panel-2:#111726;
  --love-line:rgba(255,255,255,.088);
  --love-line-soft:rgba(255,255,255,.055);
  --love-text:#f6f1ea;
  --love-muted:#8f96a6;
  --love-dim:#6f7686;
  --love-orange:#ff7a18;
  --love-gold:#ffbd2e;
  --love-blue:#3f78ff;
  --love-purple:#6d57ff;
  --love-cyan:#37d7ff;
  --love-shadow:0 30px 90px rgba(0,0,0,.5);
}
*{scrollbar-color:rgba(255,122,24,.42) rgba(255,255,255,.04);}
html{scroll-padding-top:102px;background:var(--love-bg);}
body{
  min-height:100%;
  color:var(--love-text)!important;
  background:
    radial-gradient(circle at 24% 23%,rgba(255,122,24,.18),transparent 26%),
    radial-gradient(circle at 82% 14%,rgba(44,100,255,.22),transparent 31%),
    radial-gradient(circle at 45% 78%,rgba(255,190,46,.055),transparent 30%),
    linear-gradient(180deg,#070812 0%,#05070e 44%,#04060b 100%)!important;
  overflow-x:hidden;
}
body::before{
  background:
    linear-gradient(rgba(255,255,255,.027) 1px,transparent 1px),
    linear-gradient(90deg,rgba(255,255,255,.027) 1px,transparent 1px)!important;
  background-size:64px 64px!important;
  opacity:.92;
}
body::after{
  background:linear-gradient(90deg,rgba(255,122,24,.10) 0%,rgba(255,122,24,.03) 24%,rgba(17,34,70,.28) 70%,rgba(34,83,170,.22) 100%)!important;
}
.ambient{opacity:.26!important;filter:blur(88px)!important;}
.site-header.arena-live-header{
  width:100%;
  max-width:none!important;
  border-radius:0!important;
  border:0!important;
  border-bottom:1px solid rgba(255,255,255,.075)!important;
  padding:0!important;
  height:70px!important;
  background:rgba(8,11,22,.84)!important;
  box-shadow:0 8px 34px rgba(0,0,0,.28)!important;
  backdrop-filter:blur(22px)!important;
  grid-template-columns:minmax(18px,1fr) auto auto minmax(250px,430px) auto minmax(18px,1fr)!important;
  gap:20px!important;
}
.site-header.arena-live-header > .arena-brand{grid-column:2;align-self:center;}
.site-header.arena-live-header > .nav-toggle{grid-column:5;}
.site-header.arena-live-header > .arena-nav{grid-column:3;}
.site-header.arena-live-header > .arena-search{grid-column:4;}
.site-header.arena-live-header > .arena-header-actions{grid-column:5;}
.lovable-brand-letter{
  width:43px!important;height:43px!important;border-radius:14px!important;
  display:grid!important;place-items:center!important;
  background:linear-gradient(135deg,#f07b15,#ffae2e)!important;
  color:#10131b!important;font-weight:1000!important;font-size:1.12rem!important;letter-spacing:-.04em!important;
  box-shadow:0 12px 30px rgba(255,122,24,.26)!important;
  border:1px solid rgba(255,255,255,.12)!important;
}
.arena-brand{min-width:134px!important;gap:11px!important;}
.arena-brand-copy strong{font-size:1.09rem!important;color:#f4f0ec!important;line-height:1!important;}
.arena-brand-copy strong span{color:#f4f0ec!important;}
.arena-brand-copy small{letter-spacing:.36em!important;font-size:.52rem!important;color:#8b90a0!important;margin-top:3px!important;}
.arena-nav{gap:12px!important;}
.arena-nav>a,.arena-more>summary{
  color:#9ca2b3!important;font-size:.89rem!important;font-weight:820!important;padding:10px 3px!important;border-radius:8px!important;background:transparent!important;border:0!important;
}
.arena-nav>a:hover,.arena-nav>a.active,.arena-more[open]>summary{color:#fff!important;background:transparent!important;}
.nav-more-menu{top:calc(100% + 14px)!important;}
.arena-search{
  height:42px!important;border-radius:15px!important;max-width:430px!important;min-width:300px!important;
  background:rgba(8,13,27,.82)!important;border:1px solid rgba(255,255,255,.085)!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.035)!important;
}
.arena-search input{font-size:.92rem!important;}
.arena-search kbd{background:rgba(255,255,255,.08)!important;color:#babfce!important;border-color:rgba(255,255,255,.1)!important;}
.arena-header-actions{gap:10px!important;}
.arena-coin-pill{height:42px!important;border-radius:13px!important;padding:0 12px!important;background:rgba(255,190,46,.07)!important;border:1px solid rgba(255,190,46,.22)!important;}
.coin-logo{width:25px!important;height:25px!important;}
.coin-logo-core{font-size:.58rem!important;}
.coin-copy strong{font-size:.95rem!important;}
.coin-copy small{font-size:.65rem!important;}
.header-notify-slot .notification-bell,.notification-bell{height:42px!important;width:42px!important;border-radius:14px!important;background:rgba(255,255,255,.045)!important;border:1px solid rgba(255,255,255,.08)!important;}
.arena-profile-btn{height:42px!important;min-width:164px!important;border-radius:14px!important;background:rgba(255,255,255,.045)!important;}
.profile-avatar-mini{width:31px!important;height:31px!important;background:linear-gradient(135deg,#6b56ff,#816dff)!important;}
.profile-menu-copy strong{font-size:.9rem!important;}
.profile-menu-copy small{display:none!important;}
.profile-caret{color:#8e95a7!important;}
.arena-ticker{
  top:70px!important;height:34px!important;background:rgba(4,7,14,.84)!important;
  border-top:1px solid rgba(255,255,255,.032)!important;border-bottom:1px solid rgba(255,255,255,.045)!important;
}
.arena-ticker-track{font-size:.86rem!important;color:#8f96a4!important;gap:60px!important;animation-duration:34s!important;}
.lovable-exact-main,main{max-width:1320px!important;padding-top:60px!important;padding-left:20px!important;padding-right:20px!important;}
.arena-live-hero{
  min-height:690px!important;
  grid-template-columns:minmax(0,1.02fr) 520px!important;
  gap:74px!important;
  align-items:center!important;
  padding:72px 0 132px!important;
}
.arena-live-hero::before{
  inset:-120px -90px -40px!important;
  background:
    radial-gradient(circle at 21% 42%,rgba(255,122,24,.18),transparent 30%),
    radial-gradient(circle at 84% 25%,rgba(61,113,255,.25),transparent 34%)!important;
}
.arena-live-copy{max-width:680px!important;}
.arena-eyebrow{
  padding:8px 14px!important;border-radius:999px!important;background:rgba(255,255,255,.055)!important;border:1px solid rgba(255,255,255,.09)!important;
  color:#969cad!important;letter-spacing:.31em!important;font-size:.68rem!important;line-height:1!important;
}
.arena-live-copy h1{
  max-width:650px!important;margin:32px 0 22px!important;
  font-size:clamp(4.4rem,5.5vw,5.55rem)!important;line-height:1.01!important;letter-spacing:-.067em!important;
  color:#f6f1ea!important;font-weight:980!important;text-wrap:balance;
}
.arena-live-copy h1 span{background:linear-gradient(180deg,#ff7b1a 0%,#ffb326 100%)!important;-webkit-background-clip:text!important;background-clip:text!important;color:transparent!important;}
.arena-live-copy p{max-width:595px!important;color:#a5aab8!important;font-size:1.075rem!important;line-height:1.62!important;}
.arena-live-actions{margin-top:34px!important;gap:12px!important;}
.arena-live-actions .btn{height:48px!important;border-radius:12px!important;padding-inline:25px!important;font-size:.91rem!important;}
.arena-live-actions .btn.primary{min-width:215px!important;justify-content:center;}
.arena-live-actions .btn.ghost{min-width:202px!important;justify-content:center;background:rgba(6,10,20,.7)!important;}
.arena-stat-row{margin-top:42px!important;max-width:500px!important;grid-template-columns:repeat(3,1fr)!important;gap:16px!important;}
.arena-stat-row div{height:80px!important;padding:15px 15px!important;border-radius:11px!important;background:rgba(14,19,33,.7)!important;border:1px solid rgba(255,255,255,.08)!important;}
.arena-stat-row strong{font-size:1.35rem!important;line-height:1!important;}
.arena-stat-row span{font-size:.73rem!important;color:#8d94a4!important;}
.lovable-exact-live-card,.arena-live-card{
  width:520px!important;min-height:306px!important;max-width:520px!important;justify-self:end!important;
  margin-top:28px!important;padding:25px!important;border-radius:19px!important;
  background:linear-gradient(180deg,rgba(13,17,30,.90),rgba(9,12,22,.82))!important;
  border:1px solid rgba(255,122,24,.35)!important;
  box-shadow:0 36px 100px rgba(0,0,0,.55),0 0 70px rgba(255,122,24,.14)!important;
}
.arena-live-card::before{background:linear-gradient(125deg,rgba(255,122,24,.12),transparent 36%,rgba(63,120,255,.11))!important;}
.arena-live-card-top small{font-size:.78rem!important;color:#868fa1!important;}
.live-dot{font-size:.72rem!important;text-transform:none!important;letter-spacing:.01em!important;padding:4px 9px!important;color:#ff8934!important;background:rgba(255,122,24,.12)!important;}
.arena-matchup{margin:22px 0 20px!important;grid-template-columns:1fr 118px 1fr!important;gap:10px!important;}
.arena-team-badge strong{width:59px!important;height:59px!important;border-radius:12px!important;margin-bottom:10px!important;font-size:1.08rem!important;}
.arena-team-badge span{font-size:.83rem!important;color:#f0f3fb!important;}
.arena-team-badge small{font-size:.78rem!important;color:#7e8799!important;}
.arena-score-stack strong{font-size:2.55rem!important;letter-spacing:.03em!important;}
.arena-score-stack span{font-size:.6rem!important;letter-spacing:.31em!important;margin-top:3px!important;}
.arena-progress-meta{font-size:.75rem!important;color:#8c94a6!important;margin-bottom:8px!important;}
.arena-score-progress{margin-top:0!important;}
.arena-score-progress .xp-bar{height:8px!important;background:rgba(255,255,255,.085)!important;}
.arena-score-progress .xp-bar span{height:100%!important;width:80%!important;background:linear-gradient(90deg,#ff7a18,#ffbd2e)!important;}
.arena-reaction-row{margin-top:15px!important;grid-template-columns:repeat(4,1fr)!important;gap:7px!important;}
.arena-reaction-row button{height:38px!important;border-radius:12px!important;background:rgba(255,255,255,.035)!important;border:1px solid rgba(255,255,255,.075)!important;}
.arena-profile-mini{display:none!important;}
.arena-mode-dock{
  left:0!important;right:0!important;bottom:28px!important;height:123px!important;
  grid-template-columns:repeat(6,1fr)!important;align-items:center!important;gap:14px!important;
  padding:24px 72px 22px!important;border-radius:17px!important;background:rgba(13,17,30,.86)!important;border:1px solid rgba(255,255,255,.085)!important;
  box-shadow:0 28px 90px rgba(0,0,0,.40)!important;backdrop-filter:blur(24px)!important;
}
.arena-mode-dock a{gap:10px!important;color:#e6eaf4!important;}
.arena-mode-dock span{width:45px!important;height:45px!important;border-radius:13px!important;font-size:1.08rem!important;}
.arena-mode-dock strong{font-size:.75rem!important;}
.section-heading .eyebrow,.game-topline span{color:var(--love-orange)!important;}
.panel{border-radius:20px!important;}
.game-card,.battle-card,.broadcast-jumbo,.broadcast-card,.leaderboard-main-card,.metric-card{border-radius:18px!important;}
/* Make existing feature sections feel like the same Lovable app instead of old dashboard cards */
#games,#battle-arena,#training,#tracker,#coach,#live-picks,#leaderboards,#friends-social-hub,#crews,#daily-spin,#patch-notes,#broadcast-arena,#replay-studio,#production-plan{
  scroll-margin-top:118px;
}
#battle-arena .game-card,#teamBattleSection .game-card,.team-battle-lobby,.team-battle-card{
  background:linear-gradient(180deg,rgba(14,19,33,.88),rgba(8,11,19,.78))!important;
  border:1px solid rgba(255,255,255,.085)!important;
  box-shadow:0 24px 72px rgba(0,0,0,.32)!important;
}
button,.btn,a.btn{transition:transform .16s ease,background .16s ease,border-color .16s ease,box-shadow .16s ease!important;}
button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible{outline:2px solid rgba(255,190,46,.85)!important;outline-offset:3px!important;}
input,select,textarea{border-radius:13px!important;}
.lovable-palette-toast{position:fixed;right:18px;bottom:18px;z-index:9999;max-width:330px;padding:14px 16px;border-radius:16px;background:rgba(10,14,25,.94);border:1px solid rgba(255,255,255,.1);box-shadow:0 20px 60px rgba(0,0,0,.42);color:#eef2ff;font-weight:850;transform:translateY(18px);opacity:0;animation:loveToast .34s ease forwards}.lovable-palette-toast small{display:block;color:#9ba3b5;font-weight:700;margin-top:3px}@keyframes loveToast{to{transform:none;opacity:1}}
@media(max-width:1380px){.site-header.arena-live-header{grid-template-columns:18px auto auto minmax(220px,360px) auto 18px!important;gap:14px!important}.arena-live-hero{grid-template-columns:minmax(0,1fr) 480px!important;gap:44px!important}.lovable-exact-live-card,.arena-live-card{width:480px!important;max-width:480px!important}.arena-live-copy h1{font-size:clamp(4rem,5.7vw,5.15rem)!important}.arena-mode-dock{padding-inline:48px!important}}
@media(max-width:1180px){.site-header.arena-live-header{grid-template-columns:14px auto auto 1fr 14px!important}.site-header.arena-live-header>.arena-search{display:none!important}.site-header.arena-live-header>.arena-header-actions{grid-column:4!important}.site-header.arena-live-header>.arena-nav{grid-column:3!important}.arena-nav>.mega-nav-item:nth-of-type(n+4){display:none!important}.arena-nav>a:nth-of-type(n+4){display:none!important}.arena-live-hero{grid-template-columns:1fr!important;padding-bottom:162px!important}.lovable-exact-live-card,.arena-live-card{justify-self:stretch!important;width:100%!important;max-width:none!important;margin-top:0!important}.arena-mode-dock{grid-template-columns:repeat(3,1fr)!important;height:auto!important;padding:18px 24px!important}}
@media(max-width:760px){.site-header.arena-live-header{height:64px!important;display:flex!important;padding:0 10px!important;gap:8px!important}.arena-brand{margin-right:auto!important;min-width:auto!important}.nav-toggle{display:inline-flex!important;order:4}.arena-header-actions{order:3}.arena-nav{display:none!important}.arena-brand-copy strong{font-size:1rem!important}.arena-brand-copy small{display:none!important}.arena-coin-pill .coin-copy small{display:none!important}.arena-profile-btn{min-width:auto!important;padding:0 8px!important}.profile-menu-copy,.profile-caret{display:none!important}.arena-ticker{top:64px!important}.lovable-exact-main,main{padding:34px 14px 84px!important}.arena-live-hero{padding:34px 0 270px!important;gap:24px!important}.arena-live-copy h1{font-size:clamp(3.15rem,15vw,4.35rem)!important;line-height:.95!important}.arena-live-copy p{font-size:1rem!important}.arena-stat-row{grid-template-columns:1fr!important;max-width:none!important}.arena-live-actions{grid-template-columns:1fr!important;display:grid!important}.arena-live-actions .btn{width:100%!important}.arena-matchup{grid-template-columns:1fr!important}.arena-score-stack{order:-1}.arena-mode-dock{grid-template-columns:repeat(2,1fr)!important;bottom:14px!important;padding:14px!important}.arena-mode-dock span{width:42px!important;height:42px!important}.lovable-exact-live-card,.arena-live-card{min-height:unset!important;padding:20px!important}}
@media(prefers-reduced-motion:reduce){.arena-ticker-track{animation:none!important}.lovable-palette-toast{animation:none!important;opacity:1!important;transform:none!important}}

/* v111 real live ticker polish */
.arena-ticker-track a.real-ticker-item{color:inherit;text-decoration:none;display:inline-flex;align-items:center;gap:8px}
.arena-ticker-track a.real-ticker-item:hover{color:#fff;text-shadow:0 0 16px rgba(255,138,31,.35)}
.real-ticker-empty{color:#a9b2c7!important;font-weight:850}
#heroLiveStatus{max-width:230px;overflow:hidden;text-overflow:ellipsis}
#heroTeamAName,#heroTeamBName{max-width:145px;margin-inline:auto;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
