/* FUTBOIZ NEON GLASS UI — lightweight visual layer */
:root{
  --bg:#050806;
  --panel:#0d1511b8;
  --panel2:#111b16c7;
  --line:#9cff5a25;
  --text:#f7fff9;
  --muted:#8fa198;
  --green:#9cff5a;
  --neon:#9cff5a;
  --neon-soft:#9cff5a20;
  --neon-faint:#9cff5a0c;
  --glass:linear-gradient(145deg,#142019c9,#09100cc2);
  --glass-strong:linear-gradient(145deg,#17261ed9,#09100ce8);
  --glass-border:#c4ff9a2b;
  --glass-highlight:#ffffff10;
}

html,body{
  color:var(--text);
  background:
    radial-gradient(circle at 86% -8%,#8dff4730 0,transparent 32%),
    radial-gradient(circle at 8% 108%,#42ff8b14 0,transparent 30%),
    linear-gradient(#ffffff08 1px,transparent 1px),
    linear-gradient(90deg,#ffffff08 1px,transparent 1px),
    #050806;
  background-size:auto,auto,44px 44px,44px 44px,auto;
}
body:before{
  content:"";
  position:fixed;
  inset:0;
  z-index:-1;
  pointer-events:none;
  background:linear-gradient(120deg,transparent 25%,#9cff5a08 50%,transparent 75%);
}
*{scrollbar-width:thin;scrollbar-color:#80df4d55 #07100b}
*::-webkit-scrollbar{width:7px;height:7px}
*::-webkit-scrollbar-track{background:#07100b}
*::-webkit-scrollbar-thumb{border-radius:20px;background:#80df4d55}

.app-shell{grid-template-columns:176px minmax(0,1fr)}
.clean-sidebar{
  padding:22px 14px;
  border-color:var(--glass-border);
  background:#07100cdb;
  box-shadow:inset -1px 0 var(--glass-highlight),18px 0 70px #0005;
  backdrop-filter:blur(22px) saturate(1.15);
}
.logo{font-size:25px;letter-spacing:.5px}.logo span{color:var(--neon);text-shadow:0 0 22px #9cff5a77}
.nav-group-label{color:#6f8378}.clean-sidebar .nav{border-radius:13px;color:#768b80}
.clean-sidebar .nav:hover{border-color:#9cff5a1f;background:#9cff5a0a;color:#eaffee}
.clean-sidebar .nav.active{border-color:#a8ff6b4a;background:linear-gradient(90deg,#9cff5a20,transparent);color:var(--neon);box-shadow:inset 3px 0 var(--neon)}
.clean-sidebar .nav.active span{text-shadow:0 0 15px var(--neon)}
.sidebar-profile-link{border-color:#9cff5a1b;background:#0d1712a8}.sidebar-profile-link:hover,.sidebar-profile-link.active{border-color:#a6ff6960;background:#122017}
.sidebar-profile-link>span{background:linear-gradient(145deg,var(--neon),#4fc72a);box-shadow:0 0 22px #9cff5a45}
.status .dot,.live-dot{background:var(--neon);box-shadow:0 0 15px var(--neon)}

.topbar{align-items:center}.topstats>div,.profile-button,.wallet-pill{
  border-color:var(--glass-border);
  background:#0b1510ad;
  box-shadow:inset 0 1px var(--glass-highlight);
  backdrop-filter:blur(14px);
}
.topstats strong,.wallet-pill b{color:var(--neon)}
.kicker{color:#8cb69c;letter-spacing:1.65px}

button,select,input{
  border-color:#b8ff8830;
  background:#0c1711d9;
  color:#ecfff1;
  box-shadow:inset 0 1px #ffffff0a;
}
button{transition:transform .14s ease,border-color .14s ease,background .14s ease,box-shadow .14s ease}
button:hover{border-color:#aaff6d78;background:#14241a;box-shadow:0 0 22px #9cff5a12}
button:active{transform:scale(.98)}
button:focus-visible,input:focus-visible,select:focus-visible{outline:2px solid var(--neon);outline-offset:2px}
button.primary,.primary,.hero-main-cta{
  border-color:var(--neon);
  background:linear-gradient(135deg,#baff83,var(--neon));
  color:#071007;
  box-shadow:0 0 25px #9cff5a30,inset 0 1px #fff9;
}
button.primary:hover,.primary:hover{background:#c8ff9f;box-shadow:0 0 34px #9cff5a4a}
button:disabled{box-shadow:none}

/* Glass surfaces */
.home-hero-v2,.hub-page-head,.hub-launch,.mode-card,.pitch-panel,.roster-tray,.side-card,
.section-head,.pack-tile,.market-card,.objective-card,.sbc-card,.premium-panel,.leaderboard-card,
.online-squad-card,.online-actions article,.online-live,.online-result,.room-header,.online-team,
.profile-identity,.daily-card,.profile-stats-card,.profile-custom-card,.profile-promo-card,
.saved-squad-card,.saved-squad-editor,.cup-run,.cup-empty,.reward-ladder>div,.collection-progress{
  border-color:var(--glass-border)!important;
  background:var(--glass)!important;
  box-shadow:inset 0 1px var(--glass-highlight),0 16px 40px #0002;
}
@supports(backdrop-filter:blur(12px)){
  .home-hero-v2,.hub-page-head,.section-head,.pitch-panel,.roster-tray,.side-card,
  .premium-panel,.leaderboard-card,.profile-identity,.saved-squad-editor,.cup-run{
    backdrop-filter:blur(18px) saturate(1.12);
  }
  .hub-launch,.mode-card,.pack-tile,.market-card,.objective-card,.sbc-card{backdrop-filter:blur(9px)}
}
.hub-launch,.mode-card,.pack-tile,.market-card,.objective-card,.sbc-card{contain:layout paint}
.section-head{padding:12px 16px;border:1px solid var(--glass-border);border-radius:18px;margin-bottom:10px}
.section-head h2{margin:2px 0;font-size:27px}

/* Home and player artwork */
.home-hero-v2{
  min-height:0;
  background:
    radial-gradient(circle at 77% 45%,#9cff5a22 0,transparent 34%),
    linear-gradient(125deg,#142018dd 0%,#07100ce8 61%,#0d1812d4 100%)!important;
}
.home-hero-glow{background:radial-gradient(circle,#a6ff663d 0,#6bff2d12 43%,transparent 70%)}
.home-pitch-grid{opacity:.19;background-size:46px 46px}
.home-hero-copy{padding:42px 46px}.home-hero-copy h2{font-size:clamp(48px,5.6vw,78px);margin:16px 0 18px}
.home-hero-copy h2 span{color:var(--neon);text-shadow:0 0 36px #9cff5a36}
.home-hero-copy p{color:#9aac9f;font-size:13px;line-height:1.55}
.live-pill{border-color:#a5ff663c;background:#102016b8;color:#caffaa;box-shadow:0 0 24px #9cff5a12}
.live-pill i,.social-live-pill i{background:var(--neon);box-shadow:0 0 15px var(--neon)}
.neon-player-showcase{right:2%;width:410px;height:430px;transform:translateY(-50%)}
.neon-player-showcase .promo-orbit{inset:38px;border-color:#b7ff8838;box-shadow:0 0 100px #9cff5a20 inset,0 0 70px #9cff5a12}
.promo-player-halo{position:absolute;inset:72px 38px 22px;border-radius:50%;background:radial-gradient(circle,#9cff5a30,transparent 65%);filter:blur(20px)}
.promo-player{position:absolute;bottom:-16px;width:270px;height:420px;object-fit:contain;object-position:bottom;filter:drop-shadow(0 25px 25px #000b);mask-image:linear-gradient(to bottom,#000 82%,transparent 100%)}
.promo-ronaldo{right:84px;z-index:3}.promo-yamal{right:-32px;width:245px;height:380px;z-index:2;opacity:.76;transform:scale(.94)}

.hub-launch{min-height:0;padding:17px 18px}.hub-launch h3{margin:5px 0;font-size:23px}.hub-launch p{font-size:10px}
.hub-launch:after{background:var(--neon)!important;opacity:.12}
.hub-launch.play{--hub-art:url("../assets/players/cristiano-ronaldo-96.webp")}
.hub-launch.club{--hub-art:url("../assets/packs/futboiz-ultimate.webp")}
.hub-launch.social{--hub-art:url("../assets/players/lamine-yamal-98.webp")}
.hub-launch:before{width:170px;height:230px;right:-20px;bottom:-80px;opacity:.3;filter:drop-shadow(0 14px 22px #000a) drop-shadow(0 0 18px #9cff5a20)}

.hub-page-head{padding:18px 22px;margin:0}.hub-page-head:after{background:var(--neon)!important;opacity:.15}.hub-page-head h2{font-size:38px;margin:1px 0}.hub-page-head p{font-size:10px}.hub-back{margin-top:4px}
.mode-card{min-height:0;padding:19px;background:var(--glass)!important}
.mode-card:hover{transform:translateY(-3px);border-color:#acff7370!important;background:var(--glass-strong)!important}
.mode-card.featured,.club-modes .mode-card.featured,.social-modes .mode-card.featured{
  min-height:0;
  padding:24px;
  background:radial-gradient(circle at 76% 76%,#9cff5a25,transparent 37%),var(--glass-strong)!important;
}
.mode-card>span{color:#83b092}.mode-card h3{font-size:25px;margin:8px 0 6px}.mode-card p{font-size:10px;line-height:1.45;margin-bottom:25px}.mode-card>b{left:19px;bottom:16px;color:#baff92}
.mode-card:after{filter:drop-shadow(0 20px 24px #000a) drop-shadow(0 0 20px #9cff5a16);mask-image:linear-gradient(to bottom,#000 70%,transparent 100%)}
#page-playhub .mode-card:nth-child(1){--mode-art:url("../assets/players/cristiano-ronaldo-96.webp")}
#page-playhub .mode-card:nth-child(2){--mode-art:url("../assets/players/lamine-yamal-98.webp")}
#page-playhub .mode-card:nth-child(3){--mode-art:url("../assets/packs/futboiz-festival.webp")}
#page-playhub .mode-card:nth-child(4){--mode-art:url("../assets/players/lamine-yamal-98.webp")}
#page-clubhub .mode-card:nth-child(1){--mode-art:url("../assets/players/lamine-yamal-98.webp")}
#page-clubhub .mode-card:nth-child(2){--mode-art:url("../assets/packs/futboiz-ultimate.webp")}
#page-clubhub .mode-card:nth-child(3){--mode-art:url("../assets/players/cristiano-ronaldo-96.webp")}
#page-clubhub .mode-card:nth-child(4){--mode-art:url("../assets/players/lamine-yamal-98.webp")}
#page-clubhub .mode-card:nth-child(5){--mode-art:url("../assets/packs/futboiz-elite.webp")}
#page-clubhub .mode-card:nth-child(6){--mode-art:url("../assets/packs/futboiz-gold.webp")}
#page-socialhub .mode-card:nth-child(1){--mode-art:url("../assets/players/cristiano-ronaldo-96.webp")}
#page-socialhub .mode-card:nth-child(2){--mode-art:url("../assets/players/lamine-yamal-98.webp")}
#page-socialhub .mode-card:nth-child(3){--mode-art:url("../assets/players/cristiano-ronaldo-96.webp")}

/* Mode-specific colour kept readable inside the unified neon system */
.battle-stat.attack{border-color:#56b6ff80!important;background:#0b2032cc!important}.battle-stat.control{border-color:#ffe05d80!important;background:#2a2308cc!important}.battle-stat.defend{border-color:#ff626280!important;background:#2b0e0ecc!important}
.battle-three span:nth-child(1){border-color:#56b6ff66;color:#8fd1ff}.battle-three span:nth-child(2){border-color:#ffe05d66;color:#ffe985}.battle-three span:nth-child(3){border-color:#ff626266;color:#ff9292}
.rank-ladder .active,.rp-result.positive,.result-score.win{color:var(--neon)}

/* Packs, market, club and objectives */
.pack-tabs button.active,.market-tabs button.active{border-color:var(--neon);background:var(--neon);color:#071007;box-shadow:0 0 22px #9cff5a35}
.pack-product{border-color:#a9ff702d;background:radial-gradient(circle,#9cff5a16,transparent 55%),#07100c}
.pack-tile:hover{border-color:#a8ff6b66!important}.pack-brand span{color:#d7ffc1}.pack-meta span,.requirement-chips span{border-color:#aaff6d25;background:#0b1710;color:#9fb9a8}
.market-card.supply{border-color:#aaff6d34!important;background:radial-gradient(circle at 0 50%,#9cff5a12,transparent 50%),var(--glass)!important}
.collection-progress .progress-track i,.objective-card .progress-track i,.sbc-footer-progress i,.progress-track i{background:linear-gradient(90deg,#55d828,var(--neon));box-shadow:0 0 14px #9cff5a55}
.owned-card,.pack-card-result,.sbc-inv-card{border-color:#aaff6d20;background:#0a130fbd}.owned-card:hover,.sbc-inv-card:hover{border-color:#aaff6d66;box-shadow:0 0 20px #9cff5a14}
.compact-pager{display:flex;justify-content:center;align-items:center;gap:8px}.compact-pager b{min-width:58px;text-align:center;color:#c9ffab}

/* SBC presentation */
#page-sbc .sbc-grid{min-height:0}
.sbc-overview{border-color:var(--glass-border);background:linear-gradient(120deg,#17251dcc,#09100cbd)!important;box-shadow:inset 0 1px var(--glass-highlight),0 0 35px #9cff5a0d}
.sbc-card{grid-template-columns:72px minmax(0,1fr) auto;gap:13px;padding:12px 14px;border-radius:16px}
.sbc-card h3{font-size:16px;margin:3px 0}.sbc-card p{font-size:8px;margin:3px 0;color:#85988e}.sbc-card>button{padding:9px 12px;font-size:8px}
.sbc-icon{width:64px;height:64px;border-color:#aaff6d2b;background:#09130e}.sbc-icon.pack-reward{height:78px;overflow:hidden}.sbc-icon.pack-reward img{width:100%;height:100%;object-fit:contain;filter:drop-shadow(0 7px 9px #0009)}
.sbc-card.icon-sbc{border-color:#be8aff55!important;background:radial-gradient(circle at 0 50%,#a652ff1e,transparent 34%),var(--glass)!important}
.sbc-card-status span{border-color:#9cff5a31!important;background:#9cff5a0e!important;color:#baff96!important}
.sbc-builder{border-color:#b5ff8152;background:#07100ce8;box-shadow:0 35px 110px #000,0 0 60px #9cff5a16;backdrop-filter:blur(24px)}
.sbc-formation-pitch{border-color:#aaff6d38;background:linear-gradient(#ffffff08 1px,transparent 1px),linear-gradient(90deg,#ffffff08 1px,transparent 1px),radial-gradient(circle at 50% 45%,#183520,#07100b 74%)}
.sbc-requirement.met{border-color:#9cff5a5c;background:#122619}.sbc-requirement.met i{background:var(--neon);color:#071007;box-shadow:0 0 14px #9cff5a55}
.sbc-slot-main:hover,.sbc-pitch-slot.active .sbc-slot-main{border-color:var(--neon);box-shadow:0 0 20px #9cff5a25}
.sbc-confirm-summary{grid-template-columns:repeat(4,minmax(0,1fr))}

/* Modals */
.modal-backdrop{background:#020604d6;backdrop-filter:blur(11px)}
.picker,.summary-card,.auth-card,.match-card,.compare-card,.action-card,.replay-card,.cinematic-pack,.faceoff-stat-modal>div{
  border-color:#b1ff7b4a!important;
  background:linear-gradient(145deg,#111d16ef,#050a07f2)!important;
  box-shadow:0 35px 100px #000,0 0 48px #9cff5a13!important;
}
.toast{border:1px solid #c5ff9c;background:var(--neon);color:#061006;box-shadow:0 0 30px #9cff5a55}

/* Desktop: every route is one viewport; only dense lists scroll inside their panel */
@media(min-width:851px){
  html,body,.app-shell{height:100%;overflow:hidden}
  .app-shell>main{height:100dvh;overflow:hidden!important;padding:14px 20px 13px}
  .topbar{height:52px;margin-bottom:10px}.topbar h1{font-size:23px}.topstats>div{padding:7px 11px}.topstats strong{font-size:15px}
  .page.active{height:calc(100dvh - 76px);min-height:0;overflow:hidden}

  #page-home.active{display:grid;grid-template-rows:minmax(0,1fr) 104px;gap:9px}
  #page-home .hub-launch-grid{height:104px;margin:0;gap:9px}.home-hero-copy{height:100%;display:flex;flex-direction:column;justify-content:center}
  #page-home .hub-launch{height:104px}.hub-launch p{display:none}.hub-launch:before{bottom:-105px}

  .hub-page.active{display:grid;grid-template-rows:90px minmax(0,1fr);gap:9px}
  .hub-page .mode-grid{height:100%;min-height:0;gap:9px}
  #page-playhub .mode-grid{grid-template-columns:1.18fr 1fr 1fr;grid-template-rows:repeat(2,minmax(0,1fr))}
  #page-playhub .mode-card:nth-child(1){grid-column:1;grid-row:1/3}
  #page-playhub .mode-card:nth-child(2){grid-column:2;grid-row:1}
  #page-playhub .mode-card:nth-child(3){grid-column:3;grid-row:1}
  #page-playhub .mode-card:nth-child(4){grid-column:2/4;grid-row:2}
  #page-playhub .mode-card.featured{grid-row:1/3}
  #page-clubhub .mode-grid{grid-template-columns:repeat(3,minmax(0,1fr));grid-template-rows:repeat(2,minmax(0,1fr))}
  #page-clubhub .mode-card.featured{grid-row:auto}
  #page-socialhub .mode-grid{grid-template-columns:1.15fr 1fr 1fr;grid-template-rows:minmax(0,1fr)}
  #page-socialhub .mode-card.featured{grid-row:auto}
  .mode-card:after{width:190px;height:250px;bottom:-55px}.mode-card.featured:after{width:280px;height:370px}

  #page-draft.active{display:flex;flex-direction:column}.draft-toolbar{flex:0 0 44px;margin-bottom:7px}.draft-toolbar h2{font-size:23px}
  .draft-layout{flex:1;min-height:0;grid-template-columns:minmax(610px,1fr) 245px;gap:9px}.draft-main{display:grid;grid-template-rows:minmax(0,1fr) 124px;gap:8px;min-height:0}
  .pitch-panel{display:flex;flex-direction:column;min-height:0}.score-strip{flex:0 0 52px;height:52px;padding:0 14px}.score-strip strong{font-size:20px}.pitch{height:auto;flex:1;min-height:0}
  .slot{width:86px;height:112px}.slot img{width:86px;height:112px}.slot.empty .slot-box{width:66px;height:88px}.fit-badge{font-size:7px}.chem-mini{font-size:7px}
  .roster-tray{height:124px;margin:0;padding:8px 10px}.tray-head{margin-bottom:4px}.tray-head:nth-of-type(2){margin-top:6px}.roster-row{gap:5px}.roster-card{min-height:72px}.roster-card img{height:62px}.roster-row.reserves{position:absolute;right:12px;bottom:8px;width:41%;max-width:none}.reserves-head{position:absolute;right:40%;bottom:84px}
  .draft-side{gap:8px;min-height:0}.side-card{padding:11px}.side-card h3{margin-bottom:7px}.metric{padding:7px 0}.hint{font-size:9px}.finish-button{padding:10px}

  .compact-game-page.active,#page-club.active{display:flex;flex-direction:column;height:calc(100dvh - 76px)}
  .compact-game-page .section-head,#page-club .section-head{flex:0 0 auto}.compact-game-page .compact-pager,#page-club .compact-pager{flex:0 0 35px;margin-top:5px}
  .pack-command-bar,.market-command-bar{flex:0 0 auto}.pack-store,.market-grid,.objective-grid,#page-club .club-grid{flex:1;min-height:0;align-content:stretch}
  .pack-store{grid-template-rows:repeat(2,minmax(0,1fr))}.pack-tile{min-height:0}.pack-product{height:100%;max-height:225px}.pack-copy h3{font-size:19px}
  .market-grid{grid-template-rows:repeat(2,minmax(0,1fr))}.market-card{min-height:0}.objective-grid{grid-template-rows:repeat(3,minmax(0,1fr))}.objective-card{min-height:0}
  #page-club .club-grid{grid-template-rows:repeat(2,minmax(0,1fr))}#page-club .owned-card img{height:min(15vh,128px)}

  #page-sbc .sbc-grid{flex:1;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));grid-template-rows:82px repeat(2,minmax(0,1fr));gap:7px}
  #page-sbc .sbc-overview{grid-column:1/-1;min-height:0;padding:10px 14px}#page-sbc .sbc-overview h2{font-size:21px;margin:2px 0}#page-sbc .sbc-overview p{font-size:8px;margin:2px 0}#page-sbc .sbc-overview>div:last-child span{padding:6px 12px}
  #page-sbc .sbc-card{min-height:0}.sbc-builder{display:flex;flex-direction:column;width:min(1180px,96vw);height:94dvh;max-height:none;overflow:hidden;padding:17px}
  .sbc-builder-head{flex:0 0 auto}.sbc-builder-layout{flex:1;min-height:0;margin-top:9px;grid-template-columns:minmax(360px,.9fr) minmax(0,1.5fr);gap:10px}.sbc-pitch-panel,.sbc-builder-sidebar{min-height:0}.sbc-builder-sidebar{display:grid;grid-template-rows:auto minmax(0,1fr);gap:8px}.sbc-club-panel{min-height:0;display:flex;flex-direction:column}.sbc-inventory{flex:1;min-height:0;max-height:none}.sbc-builder-foot{flex:0 0 55px;margin-top:7px;padding-top:7px}

  #page-social.active,#page-profile.active,#page-leaderboard.active,#page-draftcup.active,#page-squads.active,#page-online.active{height:calc(100dvh - 76px);overflow:hidden}
  #page-social .social-layout{height:calc(100% - 76px)}#page-social .social-panel{min-height:0;height:100%;overflow:auto}
  #page-profile #profileHub,#page-leaderboard #leaderboardContent,#page-draftcup #draftCupContent,#page-squads #squadHub{height:calc(100% - 76px);overflow:auto;padding-right:4px}
  #page-online #onlineLobby,#page-online #onlineRoom{max-height:calc(100% - 115px);overflow:hidden}
}

@media(min-width:851px) and (max-height:760px){
  .home-hero-copy h2{font-size:48px}.home-hero-copy p{display:none}.neon-player-showcase{transform:translateY(-50%) scale(.84);transform-origin:right center}
  .hub-page-head p,.mode-card p{display:none}.hub-page.active{grid-template-rows:74px minmax(0,1fr)}.hub-page-head{padding:11px 16px}.hub-page-head h2{font-size:31px}
  .mode-card h3{font-size:21px}.mode-card.featured{padding:19px}.section-head{padding:8px 13px}.section-head h2{font-size:23px}
  #page-sbc .sbc-grid{grid-template-rows:66px repeat(2,minmax(0,1fr))}.sbc-card p{display:none}
}

@media(max-width:850px){
  html,body{overflow:auto}.app-shell{grid-template-columns:1fr}.app-shell>main{overflow:visible}
  .clean-sidebar{background:#07100cf2}.home-hero-v2{min-height:470px}.home-hero-copy{padding:34px 24px}.home-hero-copy h2{font-size:47px}
  .neon-player-showcase{display:none}.hub-launch-grid,.mode-grid{grid-template-columns:1fr}.hub-launch{min-height:118px}.mode-card,.mode-card.featured{min-height:225px}
  #page-sbc .sbc-grid{display:grid;grid-template-columns:1fr}.sbc-overview{grid-column:auto}.sbc-card{grid-template-columns:64px minmax(0,1fr)}.sbc-card>button{grid-column:1/-1}
}

@media(prefers-reduced-motion:reduce){.home-hero-glow,.promo-orbit,.live-pill i{animation:none!important}}