/* ============================================================
   CHEERS WORLD CUP FANTASY — Floodlight design system
   Dark neo-stadium · iOS liquid glass · mobile-first PWA
   ============================================================ */
:root{
  --ink:#05060F; --surface:#0B1020; --elevated:#131A30;
  --lime:#25E27E; --lime-glow:#00FFA3; --cyan:#22D3EE; --magenta:#FF2D78; --gold:#FFB020; --violet:#8B5CF6;
  --txt:#EEF1FF; --txt-2:#8B93B8; --txt-3:#5D6488;
  --line:rgba(255,255,255,.10); --line2:rgba(255,255,255,.20);
  --gk:#22D3EE; --def:#8B5CF6; --mid:#25E27E; --fwd:#FF2D78;
  --f-d:'Sora',system-ui,sans-serif; --f-b:'Inter',system-ui,sans-serif; --f-m:'JetBrains Mono',monospace;
  --r-sm:8px; --r-md:12px; --r-lg:16px; --r-xl:20px;
  --spring:cubic-bezier(.34,1.56,.64,1); --std:cubic-bezier(.2,.8,.2,1);
  --st:env(safe-area-inset-top,0px); --sb:env(safe-area-inset-bottom,0px);
  --glass-fill:linear-gradient(180deg,rgba(255,255,255,.16),rgba(255,255,255,.05));
  --glass-edge:inset 0 1px 0 rgba(255,255,255,.45);
}
*{margin:0;padding:0;box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{height:100%}
body{background:#03040a;color:var(--txt);font-family:var(--f-b);line-height:1.5;display:flex;align-items:center;justify-content:center;overflow:hidden;overscroll-behavior:none}
h1,h2,h3{font-family:var(--f-d);font-weight:700}
.mono{font-family:var(--f-m)}
button{font-family:inherit;cursor:pointer}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}

.app{width:100%;max-width:440px;height:100dvh;max-height:940px;position:relative;overflow:hidden;display:flex;flex-direction:column;background:radial-gradient(135% 70% at 50% -5%,#16203f,var(--ink) 55%)}
@media(min-width:480px){.app{border-radius:42px;height:900px;border:11px solid #11152a;box-shadow:0 40px 110px rgba(0,0,0,.7)}}

.glass{background:var(--glass-fill);backdrop-filter:blur(40px) saturate(180%) brightness(1.16);-webkit-backdrop-filter:blur(40px) saturate(180%) brightness(1.16);border:1px solid var(--line2);box-shadow:var(--glass-edge),0 12px 36px rgba(0,0,0,.45)}
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){.glass{background:rgba(16,21,42,.96)}}

/* app bar */
.appbar{position:sticky;top:0;z-index:30;padding:calc(10px + var(--st)) 16px 12px;background:var(--glass-fill);backdrop-filter:blur(40px) saturate(180%) brightness(1.18);-webkit-backdrop-filter:blur(40px) saturate(180%) brightness(1.18);border-bottom:1px solid var(--line);box-shadow:var(--glass-edge),0 10px 30px rgba(0,0,0,.35);transition:padding .25s var(--std)}
.appbar.shrunk{padding:calc(6px + var(--st)) 16px 8px}
.ab-row{display:flex;align-items:center;justify-content:space-between;gap:10px}
.ab-title{font-family:var(--f-d);font-weight:700;font-size:16px}
.brand{font-family:var(--f-d);font-weight:800;font-size:17px;display:flex;align-items:center;gap:7px}
.brand .d{width:9px;height:9px;border-radius:50%;background:var(--lime);box-shadow:0 0 12px var(--lime)}
.brand small{color:var(--lime)}
.wallet-pill{display:flex;align-items:center;gap:6px;background:rgba(255,255,255,.06);border:1px solid var(--line);padding:7px 12px;border-radius:30px;font-weight:600;font-size:13px;font-family:var(--f-m);color:var(--txt)}
.wallet-pill b{color:var(--lime-glow)}
.gwbar{display:flex;gap:9px;margin-top:10px}
.gwbar .chip{flex:1;background:rgba(255,255,255,.05);border:1px solid var(--line);border-radius:14px;padding:8px 11px}
.gwbar .chip .k{font-size:9px;color:var(--txt-2);text-transform:uppercase;letter-spacing:.4px;font-weight:600}
.gwbar .chip .v{font-size:15px;font-weight:700;font-family:var(--f-d);margin-top:2px}
.gwbar .chip.dl{background:linear-gradient(135deg,rgba(255,45,120,.22),rgba(139,92,246,.16));border-color:rgba(255,45,120,.35)}
.gwbar .chip.dl .v{color:#fff}
.meter{margin-top:10px;height:5px;border-radius:5px;background:rgba(255,255,255,.08);overflow:hidden}
.meter i{display:block;height:100%;background:linear-gradient(90deg,var(--lime),var(--cyan));transition:width .5s var(--spring)}
.meter-row{display:flex;justify-content:space-between;font-size:10px;color:var(--txt-2);margin-top:5px;font-family:var(--f-m)}
.appbar.shrunk .gwbar,.appbar.shrunk .meter,.appbar.shrunk .meter-row{display:none}

/* screens */
.screens{flex:1;position:relative;overflow:hidden}
.screen{position:absolute;inset:0;overflow-y:auto;overflow-x:hidden;-webkit-overflow-scrolling:touch;padding-bottom:24px;scrollbar-width:none}
.screen::-webkit-scrollbar{display:none}
.screen[hidden]{display:none}

.sec-h{padding:16px 18px 8px;display:flex;align-items:center;justify-content:space-between}
.sec-h h2{font-size:18px}
.sec-h .link{font-size:13px;color:var(--lime-glow);font-weight:600;background:none;border:0}
.lh{font-size:11px;color:var(--txt-3);font-family:var(--f-m);text-transform:uppercase;letter-spacing:1px;margin:14px 18px 6px}

/* pitch */
.pitch{margin:10px 12px 6px;border-radius:22px;padding:16px 6px 10px;position:relative;overflow:hidden;background:repeating-linear-gradient(0deg,rgba(255,255,255,.05) 0 36px,transparent 36px 72px),radial-gradient(120% 90% at 50% 0%,#0fae6e,#0a7d4f 45%,#06623e);border:1px solid var(--line2)}
.pitch::after{content:"";position:absolute;top:-58px;left:50%;width:150px;height:78px;border:2px solid rgba(255,255,255,.18);border-radius:0 0 90px 90px;transform:translateX(-50%)}
.line{display:flex;justify-content:space-around;position:relative;z-index:2;margin:6px 0}
.player{width:62px;display:flex;flex-direction:column;align-items:center;cursor:pointer;position:relative;background:none;border:0}
.jersey{width:44px;height:44px}
.nm{margin-top:3px;font-size:10px;font-weight:600;background:#05060f;padding:2px 6px;border-radius:6px 6px 0 0;max-width:62px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;border:1px solid var(--line);border-bottom:0;color:var(--txt)}
.vl{font-size:10px;font-weight:700;background:#fff;color:#05060f;padding:1px 6px;border-radius:0 0 6px 6px;width:100%;text-align:center;font-family:var(--f-m)}
.vl.pts{background:var(--lime);color:#03210f}
.cap{position:absolute;top:-4px;right:5px;width:18px;height:18px;border-radius:50%;background:var(--gold);color:#3a2600;font-size:10px;font-weight:800;display:flex;align-items:center;justify-content:center;border:2px solid #05060f;font-family:var(--f-d)}
.cap.vc{background:#cfd6ff;color:#1a1f3a}
.glow .jersey{filter:drop-shadow(0 0 10px rgba(255,176,32,.7))}
.live-dot{position:absolute;top:-3px;left:8px;background:var(--magenta);font-size:9px;font-weight:800;padding:1px 5px;border-radius:5px;letter-spacing:.5px;color:#fff;z-index:3}

.bench{margin:12px 14px 0;border-radius:18px;padding:12px}
.bench .bh{display:flex;justify-content:space-between;align-items:center;margin-bottom:8px}
.bench .bh span{font-size:11px;font-weight:700;letter-spacing:.5px;color:var(--txt-2);text-transform:uppercase}
.bench-row{display:flex;justify-content:space-around}

.formation-row{display:flex;gap:8px;padding:10px 14px 2px;overflow-x:auto;scrollbar-width:none}
.formation-row::-webkit-scrollbar{display:none}
.fbtn{flex:none;padding:7px 14px;border-radius:30px;background:rgba(255,255,255,.05);border:1px solid var(--line);font-size:12px;font-weight:600;color:var(--txt-2)}
.fbtn.on{background:var(--txt);color:#05060f;border-color:var(--txt)}

/* cards / stats */
.card{margin:0 14px 12px;border-radius:18px;padding:15px}
.statgrid{display:grid;grid-template-columns:1fr 1fr;gap:12px;padding:6px 14px}
.stat{border-radius:18px;padding:15px}
.stat .k{font-size:11px;color:var(--txt-2);font-weight:600;text-transform:uppercase;letter-spacing:.4px}
.stat .v{font-size:30px;font-weight:800;font-family:var(--f-d);margin-top:5px;line-height:1}
.stat .v.lime{color:var(--lime-glow)}
.stat .sub{font-size:12px;color:var(--txt-2);margin-top:6px}
.stat .sub b.up{color:var(--lime)} .stat .sub b.dn{color:var(--magenta)}

/* segmented base */
.seg button.on{color:#05060f}

/* matchc */
.matchc{margin:6px 14px 10px;border-radius:20px;padding:16px;position:relative;overflow:hidden;background:linear-gradient(135deg,rgba(139,92,246,.20),rgba(34,211,238,.10));border:1px solid var(--line2)}
.matchc .lv{position:absolute;top:14px;right:16px;background:var(--magenta);font-size:10px;font-weight:800;padding:2px 8px;border-radius:5px;letter-spacing:1px;color:#fff;animation:pulse 1.4s infinite}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.45}}
.matchc .teams{color:var(--txt-2);font-size:12px;font-weight:600}
.matchc .score{font-family:var(--f-d);font-size:26px;font-weight:800;margin-top:5px}
.bonus{display:flex;gap:8px;margin-top:12px;flex-wrap:wrap}
.bonus .b{background:rgba(255,255,255,.07);border:1px solid var(--line);border-radius:12px;padding:7px 11px;font-size:12px;font-weight:600;display:flex;align-items:center;gap:6px}
.bonus .b b{font-family:var(--f-m);color:var(--gold)}

/* leagues */
.lt{width:100%;border-collapse:collapse}
.lt th{font-size:11px;text-transform:uppercase;color:var(--txt-3);text-align:left;padding:6px 4px;font-weight:600;letter-spacing:.4px}
.lt td{padding:11px 4px;border-top:1px solid var(--line);font-size:14px}
.lt td.r{font-weight:800;font-family:var(--f-d);width:30px}
.lt tr.me td{background:rgba(37,226,126,.08)}
.lt .mv{font-size:11px;font-weight:700}.lt .mv.up{color:var(--lime)}.lt .mv.dn{color:var(--magenta)}.lt .mv.sm{color:var(--txt-3)}
.lt .tn b{display:block;font-size:14px}.lt .tn span{font-size:11px;color:var(--txt-2)}
.leaguehdr{display:flex;align-items:center;justify-content:space-between;margin-bottom:10px}
.leaguehdr b{font-size:15px;font-family:var(--f-d)} .leaguehdr .sub{font-size:12px;color:var(--txt-2)}
.tagcash{display:inline-flex;align-items:center;gap:6px;font-size:12px;font-weight:700;padding:5px 11px;border-radius:20px;background:linear-gradient(135deg,rgba(255,176,32,.2),rgba(255,45,120,.18));border:1px solid rgba(255,176,32,.4);color:#ffd58a}

/* transfers */
.transfer-bar{display:flex;gap:12px;padding:6px 14px 4px}
.tbx{flex:1;border-radius:16px;padding:13px;text-align:center}
.tbx .k{font-size:10px;color:var(--txt-2);font-weight:600;text-transform:uppercase}
.tbx .v{font-size:22px;font-weight:800;font-family:var(--f-d);margin-top:3px}.tbx .v.cost{color:var(--magenta)}

/* profile */
.profhdr{display:flex;align-items:center;gap:14px;padding:18px}
.avatar{width:60px;height:60px;border-radius:20px;display:flex;align-items:center;justify-content:center;font-family:var(--f-d);font-weight:800;font-size:24px;color:#03210f;background:linear-gradient(135deg,var(--lime),var(--lime-glow))}
.profhdr .nm2{font-size:20px;font-family:var(--f-d);font-weight:700}.profhdr .sub{font-size:13px;color:var(--txt-2)}
.wallet-card{margin:6px 14px 12px;border-radius:20px;padding:18px;background:linear-gradient(135deg,rgba(37,226,126,.16),rgba(34,211,238,.10));border:1px solid var(--line2)}
.wallet-card .k{font-size:12px;color:var(--txt-2);text-transform:uppercase;letter-spacing:.5px;font-weight:600}
.wallet-card .bal{font-size:38px;font-family:var(--f-d);font-weight:800;margin-top:4px}
.wallet-card .row{display:flex;gap:10px;margin-top:14px}
.wallet-card .row button{flex:1;height:44px;border-radius:14px;font-weight:700;font-family:var(--f-d);font-size:14px;border:0;display:flex;align-items:center;justify-content:center;gap:7px}
.btn-dep{background:linear-gradient(135deg,var(--lime),var(--lime-glow));color:#03210f}
.btn-wd{background:rgba(255,255,255,.08);color:var(--txt);border:1px solid var(--line2)!important}
.menu{margin:0 14px}
.menu .mi{display:flex;align-items:center;gap:13px;padding:15px;border-radius:14px;background:rgba(255,255,255,.04);border:1px solid var(--line);margin-bottom:9px;font-size:14px;font-weight:600;color:var(--txt)}
.menu .mi i:first-child{font-size:20px;color:var(--lime-glow)} .menu .mi .chev{margin-left:auto;color:var(--txt-3)}

/* buttons */
.btn{font-weight:700;font-size:15px;border:0;border-radius:14px;padding:13px 22px;display:inline-flex;align-items:center;justify-content:center;gap:8px;font-family:var(--f-d)}
.btn-primary{background:linear-gradient(135deg,var(--lime),var(--lime-glow));color:#03210f;box-shadow:0 6px 22px rgba(37,226,126,.4)}
.btn-secondary{background:rgba(255,255,255,.08);color:var(--txt);border:1px solid var(--line2)}

/* action bar */
.actionbar{position:sticky;bottom:0;z-index:30;margin:0 12px calc(8px + var(--sb));padding:11px 12px;border-radius:24px;display:flex;gap:10px;align-items:center}
.ab-stat{flex:none;padding-left:6px}
.ab-stat .k{font-size:9px;color:var(--txt-2);text-transform:uppercase;letter-spacing:.5px;font-weight:600}
.ab-stat .v{font-family:var(--f-d);font-weight:800;font-size:17px;color:var(--lime-glow)}
.cta{flex:1;height:50px;border:0;border-radius:16px;font-family:var(--f-d);font-weight:700;font-size:16px;color:#03210f;background:linear-gradient(135deg,var(--lime),var(--lime-glow));box-shadow:0 6px 22px rgba(37,226,126,.4);display:flex;align-items:center;justify-content:center;gap:8px}

/* tab nav */
.tabnav{display:flex;z-index:40;padding:8px 6px calc(8px + var(--sb));background:var(--glass-fill);backdrop-filter:blur(40px) saturate(180%) brightness(1.16);-webkit-backdrop-filter:blur(40px) saturate(180%) brightness(1.16);border-top:1px solid var(--line);box-shadow:var(--glass-edge)}
.tabnav button{flex:1;background:none;border:0;color:var(--txt-2);display:flex;flex-direction:column;align-items:center;gap:3px;font-size:10px;font-weight:600;padding:5px 0;font-family:var(--f-b)}
.tabnav button i{font-size:23px}
.tabnav button.on{color:var(--lime-glow)}
.tabnav button.on i{filter:drop-shadow(0 0 10px rgba(37,226,126,.6))}

/* bottom sheet */
.scrim{position:absolute;inset:0;background:rgba(0,0,0,.5);opacity:0;pointer-events:none;transition:opacity .3s;z-index:50}
.scrim.show{opacity:1;pointer-events:auto}
.sheet{position:absolute;left:0;right:0;bottom:0;z-index:55;transform:translateY(102%);background:linear-gradient(180deg,rgba(255,255,255,.16),rgba(20,26,48,.6));backdrop-filter:blur(48px) saturate(190%) brightness(1.12);-webkit-backdrop-filter:blur(48px) saturate(190%) brightness(1.12);border-radius:30px 30px 0 0;border:1px solid var(--line2);border-bottom:0;box-shadow:inset 0 1.5px 0 rgba(255,255,255,.55),0 -10px 50px rgba(0,0,0,.5);padding:8px 18px calc(20px + var(--sb));max-height:82%;overflow-y:auto;will-change:transform}
.handle{width:42px;height:5px;border-radius:5px;background:rgba(255,255,255,.25);margin:6px auto 14px}
.sheet h2{font-size:21px}.sheet .ssub{color:var(--txt-2);font-size:13px;margin:2px 0 16px;font-family:var(--f-m)}
.sstat{display:grid;grid-template-columns:1fr 1fr 1fr;gap:10px;margin-bottom:16px}
.sstat .c{background:rgba(255,255,255,.05);border:1px solid var(--line);border-radius:14px;padding:12px;text-align:center}
.sstat .c .k{font-size:10px;color:var(--txt-2);text-transform:uppercase;letter-spacing:.4px}
.sstat .c .v{font-family:var(--f-d);font-weight:800;font-size:22px;margin-top:3px}

/* onboarding */
.onb{position:absolute;inset:0;z-index:80;display:flex;flex-direction:column;justify-content:flex-end;padding:0 22px calc(28px + var(--sb));background:radial-gradient(120% 70% at 50% 0%,#0fae6e22,transparent 60%),radial-gradient(135% 80% at 50% -5%,#16203f,var(--ink) 60%)}
.onb .hero-badge{margin:0 auto 24px;width:96px;height:96px;border-radius:30px;display:flex;align-items:center;justify-content:center;background:linear-gradient(135deg,var(--lime),var(--lime-glow));box-shadow:0 20px 60px rgba(37,226,126,.45)}
.onb .hero-badge svg{width:60px;height:60px}
.onb-top{flex:1;display:flex;flex-direction:column;justify-content:center;align-items:center;text-align:center;padding-top:calc(36px + var(--st))}
.onb h1{font-size:32px;font-weight:800;letter-spacing:-.5px;background:linear-gradient(120deg,#fff 30%,var(--lime-glow));-webkit-background-clip:text;background-clip:text;color:transparent}
.onb p{color:var(--txt-2);font-size:15px;margin-top:10px;max-width:300px}
.onb .feats{display:flex;flex-direction:column;gap:12px;margin:26px 0}
.onb .feat{display:flex;align-items:center;gap:12px;font-size:14px;font-weight:500;color:var(--txt)}
.onb .feat i{width:38px;height:38px;border-radius:12px;display:flex;align-items:center;justify-content:center;font-size:19px;flex:none}
.onb .btn{width:100%;height:54px;font-size:16px;margin-bottom:10px}
.installhint{text-align:center;font-size:12px;color:var(--txt-3);font-family:var(--f-m)}

/* toast */
#toast{position:absolute;left:50%;bottom:130px;transform:translate(-50%,16px);background:#fff;color:#05060f;font-weight:700;font-size:13px;padding:11px 20px;border-radius:30px;opacity:0;transition:.3s;z-index:70;pointer-events:none;white-space:nowrap;box-shadow:0 10px 30px rgba(0,0,0,.4)}
#toast.show{opacity:1;transform:translate(-50%,0)}

/* install banner */
#installbar{position:absolute;left:12px;right:12px;bottom:calc(86px + var(--sb));z-index:45;border-radius:18px;padding:12px 14px;display:none;align-items:center;gap:12px}
#installbar.show{display:flex}
#installbar .ic{width:40px;height:40px;border-radius:12px;flex:none}
#installbar b{font-size:14px;display:block}#installbar span{font-size:12px;color:var(--txt-2)}
#installbar button{margin-left:auto;border:0;background:linear-gradient(135deg,var(--lime),var(--lime-glow));color:#03210f;font-weight:700;font-family:var(--f-d);padding:9px 16px;border-radius:12px;font-size:13px}

@media (prefers-reduced-motion: reduce){*{animation-duration:.001ms!important;transition-duration:.001ms!important}}

/* ============ World Cup additions ============ */
.ab-title{font-family:var(--f-d);font-weight:700;font-size:16px}
.dimx{color:var(--lime-glow);font-size:11px} .dim{color:var(--txt-3)!important}

.flagchip{font-size:15px;line-height:1}
.flagchip.sm{font-size:13px}
.player .flagchip{position:absolute;top:-2px;left:6px;z-index:3;filter:drop-shadow(0 1px 2px rgba(0,0,0,.5))}
.player .jw{position:relative;display:block}

.player.empty .emptyj{width:44px;height:44px;border-radius:12px;border:2px dashed rgba(255,255,255,.35);display:flex;align-items:center;justify-content:center;color:rgba(255,255,255,.6);font-size:22px;background:rgba(255,255,255,.04)}
.pitch.builder .line{margin:8px 0}
.builder-hint{margin:10px 14px 4px;border-radius:14px;padding:11px 13px;font-size:12px;color:var(--txt-2);display:flex;gap:8px;align-items:center}
.builder-hint i{color:var(--cyan);font-size:16px}
.needrow{display:flex;gap:8px;flex-wrap:wrap;padding:10px 14px}
.needpill{font-size:11px;font-weight:700;padding:5px 11px;border-radius:20px;background:rgba(255,255,255,.06);border:1px solid var(--line);color:var(--txt-2);font-family:var(--f-m)}
.needpill.done{background:rgba(37,226,126,.16);color:var(--lime-glow);border-color:rgba(37,226,126,.3)}

.quickbar{display:flex;gap:9px;padding:12px 14px 4px}
.qb{flex:1;border-radius:14px;padding:11px;border:1px solid var(--line);background:rgba(255,255,255,.05);color:var(--txt);font-weight:600;font-size:13px;display:flex;align-items:center;justify-content:center;gap:6px}
.qb.primary{background:linear-gradient(135deg,var(--lime),var(--lime-glow));color:#03210f;border:0;box-shadow:0 6px 20px rgba(37,226,126,.35)}
.qb i{font-size:17px}

.seg.static{display:flex;margin:10px 14px;background:rgba(255,255,255,.06);border:1px solid var(--line);border-radius:30px;padding:4px}
.seg.static button{flex:1;border:0;background:none;color:var(--txt-2);font-weight:600;font-size:13px;padding:9px 0;border-radius:30px}
.seg.static button.on{background:rgba(255,255,255,.92);color:#05060f}
.seg.small button{font-size:12px;padding:7px 0}

.sheet.full{max-height:90%;height:90%}
.picker-head{position:sticky;top:0;background:linear-gradient(180deg,rgba(20,26,48,.6),rgba(20,26,48,.2));backdrop-filter:blur(10px);padding-bottom:8px;z-index:2}
.ph-row{display:flex;align-items:center;justify-content:space-between}
.ph-bank{font-size:13px;color:var(--txt-2);font-family:var(--f-m);margin:2px 0 12px}
.ph-bank b{color:var(--lime-glow)}
.iconbtn{width:34px;height:34px;border-radius:50%;background:rgba(255,255,255,.08);border:1px solid var(--line);color:var(--txt);font-size:17px;display:flex;align-items:center;justify-content:center}
.search{width:100%;height:42px;border-radius:14px;background:rgba(255,255,255,.06);border:1px solid var(--line2);color:var(--txt);padding:0 14px;font-size:14px;font-family:var(--f-b);outline:none;margin-bottom:10px}
.search::placeholder{color:var(--txt-3)}
.search:focus{border-color:var(--lime);box-shadow:0 0 0 3px rgba(37,226,126,.18)}
.sortrow{display:flex;gap:8px}
.sortb{font-size:12px;font-weight:600;padding:6px 13px;border-radius:20px;background:rgba(255,255,255,.05);border:1px solid var(--line);color:var(--txt-2)}
.sortb.on{background:rgba(37,226,126,.16);color:var(--lime-glow);border-color:rgba(37,226,126,.3)}
.picker-list{margin-top:12px;display:flex;flex-direction:column;gap:8px}
.picker-list .prow{cursor:pointer}
.picker-list .prow.disabled{opacity:.5}
.addchip{width:32px;height:32px;border-radius:50%;background:linear-gradient(135deg,var(--lime),var(--lime-glow));color:#03210f;display:flex;align-items:center;justify-content:center;font-size:18px;flex:none}
.addchip.no{background:rgba(255,255,255,.08);color:var(--txt-3)}

.prow{display:flex;align-items:center;gap:11px;padding:11px;border-radius:16px;background:rgba(255,255,255,.04);border:1px solid var(--line);width:100%;text-align:left;color:var(--txt)}
.list .prow,.perf .prow{margin-bottom:9px}
.prow .pj{width:36px;height:36px;flex:none}
.prow .info{flex:1;min-width:0}
.prow .info b{font-size:14px;font-weight:600;display:flex;align-items:center;gap:6px}
.prow .info .sub{font-size:11px;color:var(--txt-2);margin-top:2px;font-family:var(--f-m);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.prow .pr{text-align:right;flex:none}
.prow .pr .p{font-family:var(--f-m);font-weight:700;font-size:15px}
.prow .pr .p.lime{color:var(--lime-glow)}
.prow .pr .o{font-size:10px;color:var(--txt-2);font-family:var(--f-m)}
.tag.set{font-size:10px;font-weight:800;padding:1px 6px;border-radius:5px;background:var(--gold);color:#3a2600}

.player-hero{display:flex;align-items:center;gap:14px;margin-bottom:14px}
.phflag{font-size:40px;line-height:1}
.player-hero h2{font-size:22px}
.fixmini{display:flex;gap:8px;margin-bottom:6px}
.fdrsq{width:38px;height:34px;border-radius:10px;font-size:13px;font-weight:800;display:flex;align-items:center;justify-content:center;font-family:var(--f-d)}
.breakdown{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:16px}
.bd{display:flex;align-items:center;gap:6px;background:rgba(255,255,255,.05);border:1px solid var(--line);border-radius:10px;padding:6px 10px;font-size:12px;color:var(--txt-2)}
.bd b{color:var(--lime-glow);font-family:var(--f-m)} .bd b.neg{color:var(--magenta)}
.row2{display:flex;gap:10px}
.b2{flex:1;height:48px;border-radius:14px;border:0;font-family:var(--f-d);font-weight:700;font-size:15px;display:flex;align-items:center;justify-content:center;gap:7px;color:var(--txt);background:rgba(255,255,255,.08)}
.b2.cap{background:var(--gold);color:#3a2600} .b2.add{background:linear-gradient(135deg,var(--lime),var(--lime-glow));color:#03210f}
.b2.rem{background:rgba(255,45,120,.16);color:var(--magenta)}

.lt .rt{text-align:right} .lt .pts{text-align:right;font-family:var(--f-m);font-weight:700}
.tag-classic{font-size:11px;font-weight:700;padding:5px 11px;border-radius:20px;background:rgba(34,211,238,.16);color:var(--cyan)}
.join-btn{width:100%;margin-top:12px;height:44px;border-radius:14px;border:1px solid rgba(255,176,32,.4);background:linear-gradient(135deg,rgba(255,176,32,.16),rgba(255,45,120,.12));color:#ffd58a;font-weight:700;font-family:var(--f-d);font-size:14px}
.prow.wide{margin-bottom:9px}
.contest-icn{width:38px;height:38px;border-radius:12px;display:flex;align-items:center;justify-content:center;font-size:18px;color:#fff;flex:none}

.fixrow{display:flex;align-items:center;justify-content:space-between;padding:12px 4px;border-bottom:1px solid var(--line);gap:8px}
.fixrow:last-child{border:0}
.fixrow .t{display:flex;align-items:center;gap:8px;font-size:13px;font-weight:600;flex:1;min-width:0}
.fixrow .t.end{justify-content:flex-end;text-align:right}
.fixrow .mid{display:flex;flex-direction:column;align-items:center;gap:2px;flex:none}
.fixrow .ko{font-size:11px;color:var(--txt-2);font-family:var(--f-m)}
.fixrow .grp{font-size:9px;color:var(--txt-3);text-transform:uppercase;letter-spacing:.5px}
.livescore{font-family:var(--f-d);font-weight:800;font-size:16px;color:var(--lime-glow)}
.livescore small{font-size:9px;color:var(--magenta);font-weight:700}
.tie{display:flex;align-items:center;justify-content:space-between;border-radius:14px;padding:13px;margin:0 14px 9px}
.teamline{display:flex;align-items:center;gap:8px;font-size:14px;font-weight:600;flex:1}
.teamline.end{justify-content:flex-end}
.vs{font-size:11px;color:var(--txt-3);font-family:var(--f-m);padding:0 8px}
.info-foot{text-align:center;font-size:12px;color:var(--txt-3);font-family:var(--f-m);padding:14px 18px}

.chipcards{display:grid;grid-template-columns:1fr 1fr;gap:12px;padding:0 14px 8px}
.chipc{border-radius:16px;padding:14px;text-align:left;color:var(--txt);border:1px solid var(--line)}
.chipc .ic{width:40px;height:40px;border-radius:12px;display:flex;align-items:center;justify-content:center;font-size:20px}
.chipc h3{font-size:14px;font-weight:700;margin-top:8px;font-family:var(--f-d)}
.chipc p{font-size:11px;color:var(--txt-2);margin-top:3px}
.chipc.used{opacity:.45} .chipc.active{border-color:var(--lime);box-shadow:0 0 0 2px rgba(37,226,126,.3)}

.emptyscreen{text-align:center;padding:60px 30px;color:var(--txt-2)}
.emptyscreen i{font-size:46px;color:var(--violet)}
.emptyscreen h3{font-size:19px;margin:14px 0 6px;color:var(--txt)}
.emptyscreen p{font-size:14px;margin-bottom:20px}

.edit-name{margin-left:auto;width:40px;height:40px;border-radius:12px;background:rgba(255,255,255,.06);border:1px solid var(--line);color:var(--txt);font-size:18px}
.wallet-foot{font-size:11px;color:var(--txt-2);margin-top:10px;font-family:var(--f-m)}
.mi{width:100%;text-align:left} .mi.danger{color:var(--magenta)} .mi.danger i:first-child{color:var(--magenta)}

.onb-kicker{font-family:var(--f-m);font-size:11px;letter-spacing:1.5px;color:var(--lime);text-transform:uppercase;margin-bottom:8px}
.onb-name{width:100%;height:52px;border-radius:16px;background:rgba(255,255,255,.07);border:1px solid var(--line2);color:var(--txt);padding:0 18px;font-size:16px;font-family:var(--f-b);outline:none;margin-top:22px;text-align:center}
.onb-name::placeholder{color:var(--txt-3)} .onb-name:focus{border-color:var(--lime);box-shadow:0 0 0 3px rgba(37,226,126,.18)}
