*{box-sizing:border-box}
:root{--accent:#e11f1f;--accent2:#e1a51b;--bg:#08090b;--panel:#111418;--line:#292f36;--text:#eee;--muted:#8c949d;--vip1:#9f69ff;--vip2:#f3d37a}
body{margin:0;background:#08090b;color:var(--text);font-family:Arial,sans-serif;background-image:linear-gradient(#0008,#0008),url("assets/underground_dashboard.png");background-size:cover;background-position:center;background-attachment:fixed}
.hidden{display:none!important}.auth{min-height:100vh;display:grid;place-items:center;background:linear-gradient(90deg,#000d,#0008),url("assets/underground_dashboard.png") center/cover no-repeat}
.loginbox{width:min(470px,94vw);background:#0c0f13ed;border:1px solid #343b43;border-top:3px solid var(--accent);padding:30px;box-shadow:0 25px 80px #000}.loginbox h1{font-size:38px}.loginbox h1 b,.logo b{color:var(--accent)}.loginbox p{color:var(--muted)}
input,select,button{width:100%;padding:13px;margin:6px 0;background:#0b0e12;color:#fff;border:1px solid #343b43;font:inherit}
button{background:linear-gradient(#e22a22,#9b1310);color:#fff;font-weight:900;cursor:pointer;border-color:#6f0e0c}button:hover{filter:brightness(1.12)}.dark{background:#232932;color:white;border-color:#343b43}.premiumBtn{background:linear-gradient(#9f69ff,#593093)!important;border-color:#6d44a8!important}
.shell{display:grid;grid-template-columns:230px 1fr;min-height:100vh}aside{position:fixed;width:230px;inset:0 auto 0 0;background:#080a0df2;border-right:1px solid #252a30;padding:20px 12px;overflow:auto;backdrop-filter:blur(8px)}
.logo{font-weight:1000;font-size:21px;padding:6px 8px 20px}.logo small{display:block;color:#68727c;font-size:9px;letter-spacing:2px;margin-top:4px}aside button{background:transparent;color:#9ba4ae;text-align:left;border:0;border-left:3px solid transparent}aside button:hover{background:#171c22;color:#fff;border-left-color:var(--accent)}
main{grid-column:2;padding:0 26px 40px;min-width:0}header{height:84px;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid #22282e;margin-bottom:22px;background:#07090bb8;padding:0 12px;backdrop-filter:blur(8px)}header small{color:var(--accent);letter-spacing:2px}header h2{margin:4px 0}.who b,.who span{display:block;text-align:right}.who span{color:var(--muted);font-size:12px}
.panel{background:#0d1014e8;border:1px solid var(--line);padding:18px;margin-bottom:16px;box-shadow:0 12px 35px #0008;backdrop-filter:blur(7px)}
.art-banner{position:relative;min-height:310px;padding:0;overflow:hidden;background-image:linear-gradient(90deg,#000d 0%,#0008 35%,#0001 70%),url("assets/underground_dashboard.png");background-size:cover;background-position:center}.art-banner::after{content:"";position:absolute;inset:0;border-top:3px solid var(--accent);box-shadow:inset 0 -90px 80px #0009}.art-banner.vip-active{background-image:linear-gradient(90deg,#130d1de0 0%,#0007 35%,#0001 70%),url("assets/underground_dashboard.png")}.art-banner.vip-active::before{content:"";position:absolute;inset:0;background:url("assets/vip_frame.svg") center/100% 100% no-repeat;pointer-events:none;z-index:1;filter:drop-shadow(0 0 15px #8f5cff66)}
.art-banner.vip-active .art-overlay h1{color:#f3d37a;text-shadow:0 0 12px #f3d37a55,0 0 24px #9f69ff55;animation:vipPulse 2.4s infinite ease-in-out}
@keyframes vipPulse{0%,100%{transform:translateY(0);filter:brightness(1)}50%{transform:translateY(-2px);filter:brightness(1.15)}}
.art-overlay{position:absolute;left:28px;bottom:28px;z-index:2}.art-overlay small{color:var(--accent);letter-spacing:2px}.art-overlay h1{font-size:42px;margin:8px 0;text-shadow:0 3px 10px #000}.art-overlay p{margin:6px 0 0}
.vipBadgeWrap{display:flex;align-items:center;gap:10px;margin-bottom:10px;padding:8px 12px;background:#140f22c9;border:1px solid #7050ac;width:max-content;border-radius:999px}.vipBadgeWrap img{width:32px;height:32px}.vipBadgeWrap span{color:#f3d37a;font-weight:900;letter-spacing:1px}
.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin-bottom:16px}.stats div{background:#0d1014e8;border:1px solid var(--line);padding:16px;border-top:2px solid #3b4046;box-shadow:0 10px 25px #0005}.stats span,.stats b{display:block}.stats span{font-size:10px;color:var(--muted)}.stats b{font-size:24px;margin-top:6px}.premiumStat{border-top-color:#9f69ff!important;background:linear-gradient(135deg,#17111f,#0d1014)!important}.premiumStat b{color:#d4b4ff}.vipStat{border-top-color:#f3d37a!important;background:linear-gradient(135deg,#20170b,#0d1014)!important}.vipStat b{color:#f3d37a}
.quick{display:grid;grid-template-columns:1fr 1fr 1fr;gap:10px}.section-art{min-height:220px;padding:0;background-size:cover;background-position:center;overflow:hidden}.training-art{background-image:linear-gradient(90deg,#000d,#0002),url("assets/underground_dashboard.png")}.fight-art{background-image:linear-gradient(90deg,#000d,#0002),url("assets/underground_dashboard.png");background-position:center 42%}.section-shade{min-height:220px;display:flex;flex-direction:column;justify-content:flex-end;padding:24px;background:linear-gradient(0deg,#000c,transparent)}.section-shade h3{font-size:28px;margin:0 0 6px}.section-shade p{color:#bbb;margin:0}.cards3{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}.cards3 button{min-height:180px;background:#14171bea;color:#fff;border:1px solid #343b43;border-top:2px solid var(--accent)}.cards3 b,.cards3 small{display:block}.cards3 b{margin:10px 0}.cards3 small{color:#a9afb6}.fightStage{display:grid;grid-template-columns:1fr 70px 1fr;gap:10px;align-items:center;margin:20px 0}.fightStage div{height:160px;display:grid;place-items:center;background:#15181ce8;border:1px solid #343b43;font-size:30px;font-weight:900}.fightStage b{text-align:center;color:var(--accent)}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:12px}.item,.allianceRow,.memberRow,.historyRow,.orderRow{background:#15181cea;border:1px solid var(--line);padding:13px}.item{background-image:linear-gradient(135deg,#171b20,#0d1014)}.item button{margin-top:8px}.premiumHero,.vipHero,.topupHero{display:flex;align-items:center;justify-content:space-between;min-height:220px}.premiumHero{background:linear-gradient(100deg,#130d1dF2,#111318E8 58%,#2b1b0cE8),url("assets/underground_dashboard.png") center/cover}.vipHero{background:linear-gradient(100deg,#1b122dF0,#0f1319EA 58%,#1f1809EA),url("assets/underground_dashboard.png") center/cover}.topupHero{background:linear-gradient(100deg,#11233aF0,#0f1319EA 58%,#1a1b2eEA),url("assets/underground_dashboard.png") center/cover}.premiumHero small,.vipHero small,.topupHero small{color:#c89cff;letter-spacing:2px;font-weight:900}.premiumHero h2,.vipHero h2,.topupHero h2{font-size:34px;margin:7px 0}.premiumHero p,.vipHero p,.topupHero p{color:#c8c8cf}.premiumHero b,.vipHero b,.topupHero b{color:#d9b7ff}.premiumNote{font-size:12px;color:#9490a0!important}.premiumCrown{font-size:88px;filter:drop-shadow(0 0 24px #8f5cff88);margin-right:50px}.premiumDaily{max-width:360px;background:linear-gradient(#9f69ff,#593093);border-color:#6d44a8}.vipHeroArt img{width:130px;height:130px;filter:drop-shadow(0 0 24px #8f5cff88)}.vipBenefits{margin:12px 0 0;padding-left:18px;color:#d7d3de}.vipBenefits li{margin:6px 0}
.premiumGrid{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}.premiumItem{background:linear-gradient(145deg,#181020,#11151a);border:1px solid #5d4772;padding:16px;box-shadow:inset 0 1px #ffffff08}.premiumItem .picon{font-size:36px}.premiumItem h4{margin:9px 0}.premiumItem p{color:#9d95a8;font-size:12px;min-height:30px}.premiumItem .price{color:#d4b4ff;font-weight:900;font-size:18px}.premiumItem button{background:linear-gradient(#9f69ff,#593093);border-color:#6d44a8}.vipCard{border-color:#c7a650;background:linear-gradient(145deg,#231914,#12161b)}.vipCard .price{color:#f3d37a}.vipCard button{background:linear-gradient(#d6b463,#876315);border-color:#a77f29}.topupCard{border-color:#4e7fc2;background:linear-gradient(145deg,#111b2a,#12161b)}.topupCard .price{color:#9fd1ff}.topupCard select{margin-top:10px;background:#0b0e12;color:white}.topupCard button{background:linear-gradient(#3472d6,#1d4678);border-color:#29527f}.boxItem{border-color:#8a65b8}.openBoxBtn{background:linear-gradient(#cb8b1a,#8c5b0b)!important;border-color:#9b6a15!important}
.allianceRow,.memberRow{display:grid;grid-template-columns:1fr 90px 100px;gap:10px;align-items:center;margin-bottom:8px}.chatBox{height:420px;overflow:auto;background:#07090bec;border:1px solid #272d34;padding:12px}.chatMsg{padding:9px 6px;border-bottom:1px solid #20252b}.chatMsg .meta{font-size:11px;color:#7d8792}.chatMsg b{color:var(--accent2)}.chatMsg p{margin:5px 0 0}.vipNick{color:#f3d37a!important;text-shadow:0 0 8px #f3d37a55;font-weight:900}.send{display:grid;grid-template-columns:1fr 130px;gap:8px;margin-top:8px}.send input,.send button{margin:0}table{width:100%;border-collapse:collapse;min-width:680px}th,td{padding:11px;border-bottom:1px solid #252b31;text-align:left}th{font-size:10px;color:var(--accent)}.tablewrap{overflow:auto}.historyRow{display:grid;grid-template-columns:100px 1fr 100px 160px;gap:10px;margin-bottom:8px}.orderRow{display:grid;grid-template-columns:90px 1fr 90px 100px 130px;gap:10px;margin-bottom:8px}.win{color:#8fe39a}.loss{color:#e37b84}.toast{position:fixed;right:20px;bottom:20px;background:#1b2026;border-left:4px solid var(--accent);padding:13px 16px;opacity:0;transition:.2s}.toast.show{opacity:1}
@media(max-width:1050px){.premiumGrid{grid-template-columns:1fr 1fr}.orderRow{grid-template-columns:1fr}}
@media(max-width:900px){.shell{grid-template-columns:74px 1fr}aside{width:74px}.logo{font-size:0}.logo:after{content:'KG';font-size:20px;color:var(--accent)}.logo small{display:none}aside button{font-size:0;height:44px}main{grid-column:2;padding:0 12px 30px}.stats{grid-template-columns:1fr 1fr}.cards3,.grid2,.premiumGrid{grid-template-columns:1fr}.send{grid-template-columns:1fr}.art-banner{min-height:250px}.quick{grid-template-columns:1fr}.premiumCrown,.vipHeroArt{display:none}}

.hint{color:#89939d;font-size:12px}.missionHero,.warHero,.adminHero{display:flex;align-items:center;justify-content:space-between;min-height:190px;background:linear-gradient(100deg,#16100ce8,#0f1319e8 58%,#20100ce8),url("assets/underground_dashboard.png") center/cover}.missionHero small,.warHero small,.adminHero small{color:#e1a51b;letter-spacing:2px}.missionGrid{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}.missionCard{background:#15181cea;border:1px solid #323943;border-top:2px solid #e1a51b;padding:16px}.missionCard.done{border-color:#4f8d5a}.missionCard button:disabled{opacity:.45;cursor:not-allowed}.progressText{font-weight:900;margin:10px 0 5px}.progressBar{height:8px;background:#080a0d;border:1px solid #30363e}.progressBar i{display:block;height:100%;background:linear-gradient(90deg,#a76d0a,#e1a51b)}.warRow{display:grid;grid-template-columns:1fr 100px 280px;gap:12px;align-items:center;background:#15181cea;border:1px solid #323943;padding:14px;margin-bottom:9px}.warScore{text-align:center;font-size:24px;font-weight:900;color:#e1a51b}.warRow button{width:auto;margin:2px;padding:8px}.adminHero{background:linear-gradient(100deg,#111b28e8,#0f1319e8 58%,#171017e8),url("assets/underground_dashboard.png") center/cover}#adminUsers button{width:auto;padding:7px;margin:2px;font-size:11px}@media(max-width:1100px){.missionGrid{grid-template-columns:1fr 1fr}.warRow{grid-template-columns:1fr}}@media(max-width:700px){.missionGrid{grid-template-columns:1fr}}

.headerRight{display:flex;align-items:center;gap:12px}.bellBtn{position:relative;width:auto;padding:9px 12px;margin:0;background:#15191e;border:1px solid #323942}.notifBadge,.navBadge{display:inline-grid;place-items:center;min-width:19px;height:19px;padding:0 5px;border-radius:99px;background:#d51d1d;color:#fff;font-size:10px;font-weight:900}.notifBadge{position:absolute;right:-7px;top:-7px}.navBadge{margin-left:5px}.playersHero,.notificationHero{display:flex;align-items:center;justify-content:space-between;min-height:190px;background:linear-gradient(100deg,#101a22e8,#0f1319e8 58%,#16100ce8),url("assets/underground_dashboard.png") center/cover}.playersHero small,.notificationHero small{color:#e1a51b;letter-spacing:2px}.playerSearch{display:grid;grid-template-columns:1fr 150px;gap:10px}.playerSearch input,.playerSearch button{margin:0}.playersLayout{display:grid;grid-template-columns:minmax(300px,.8fr) minmax(420px,1.2fr);gap:16px}.playerList{display:grid;gap:8px;max-height:650px;overflow:auto}.playerRow{display:grid;grid-template-columns:1fr 90px 100px;gap:10px;align-items:center;background:#15191ee8;border:1px solid #303740;padding:12px;cursor:pointer}.playerRow:hover{border-color:#e1a51b;background:#191d22}.onlinePill,.offlinePill{font-size:10px;font-weight:900;white-space:nowrap}.onlinePill{color:#7ee58d}.offlinePill{color:#6f7781}.profileCard{position:relative;padding:20px;background:linear-gradient(135deg,#141920,#0b0e12);border:1px solid #343c45;overflow:hidden}.profileCard.profileVip{border-color:#b99646;box-shadow:inset 0 0 45px #9f69ff12}.profileCard.profileVip:before{content:"";position:absolute;inset:0;background:url("assets/vip_frame.svg") center/100% 100% no-repeat;pointer-events:none;opacity:.7}.profileHead{position:relative;z-index:1;display:flex;justify-content:space-between;align-items:start}.profileHead h2{font-size:30px;margin:5px 0}.profileHead small{color:#e1a51b;letter-spacing:2px}.profileLevel{font-size:24px;font-weight:900;color:#e1a51b}.profileStats{position:relative;z-index:1;display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin:18px 0}.profileStats div{background:#0c0f13cc;border:1px solid #303740;padding:12px}.profileStats span,.profileStats b{display:block}.profileStats span{font-size:9px;color:#8d96a0}.profileStats b{font-size:22px;margin-top:5px}.profileRecord{position:relative;z-index:1;padding:12px;background:#080a0dc9;border-left:3px solid #e1a51b;margin-bottom:12px}.challengeRow{display:grid;grid-template-columns:1fr 120px 300px;gap:12px;align-items:center;background:#15191ee8;border:1px solid #303740;padding:12px;margin-bottom:8px}.challengeRow button{width:auto;padding:8px 12px;margin:2px}.challengeStatus{font-size:10px;font-weight:900;padding:6px 9px;border-radius:4px;background:#252b32}.status-pending{color:#e1a51b}.status-finished{color:#79df89}.status-declined,.status-expired{color:#8b929a}.notificationTools{display:flex;justify-content:flex-end;margin-bottom:10px}.notificationTools button{width:auto}.notificationRow{display:grid;grid-template-columns:46px 1fr;gap:12px;padding:14px;border:1px solid #2b3239;background:#11151ae8;margin-bottom:8px;cursor:pointer}.notificationRow.unread{border-left:4px solid #e1a51b;background:#17191ae8}.notifIcon{font-size:25px}.notificationRow p{margin:6px 0;color:#c3c8ce}.notificationRow small{color:#707983}.notifActions{display:flex;gap:6px;margin-top:10px}.notifActions button{width:auto;padding:8px 12px}.nickLink{display:inline;width:auto;margin:0;padding:0;border:0;background:transparent;color:inherit;text-align:left}.nickLink:hover{text-decoration:underline;filter:none}@media(max-width:1050px){.playersLayout{grid-template-columns:1fr}.challengeRow{grid-template-columns:1fr}.profileStats{grid-template-columns:1fr 1fr}}@media(max-width:650px){.playerSearch{grid-template-columns:1fr}.playerRow{grid-template-columns:1fr}.profileStats{grid-template-columns:1fr 1fr}.headerRight{gap:6px}}

.messagesHero,.friendsHero,.pvpHero{display:flex;align-items:center;justify-content:space-between;min-height:190px;background:linear-gradient(100deg,#0e2032F2,#111318E8 58%,#191126E8),url("assets/underground_dashboard.png") center/cover}
.messagesHero small,.friendsHero small,.pvpHero small{color:#7cc7ff;letter-spacing:2px;font-weight:900}
.messagesHero h2,.friendsHero h2,.pvpHero h2{font-size:34px;margin:7px 0}
.messagesHero p,.friendsHero p,.pvpHero p{color:#c8c8cf}
.messagesLayout{display:grid;grid-template-columns:330px 1fr;gap:16px}
.conversationList{display:flex;flex-direction:column;gap:8px}
.conversationRow{display:grid;grid-template-columns:1fr auto;gap:10px;padding:12px;background:#14181e;border:1px solid #2d3640;cursor:pointer}
.conversationRow:hover,.conversationRow.active{border-color:#4f8bc5;background:#16202a}
.conversationRow p{margin:5px 0 0;color:#8f99a4;font-size:12px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:230px}
.messageUnread{min-width:24px;height:24px;border-radius:50%;display:grid;place-items:center;background:#d52b2b;color:white;font-weight:900;font-size:11px}
.privateChatPanel{min-height:560px}
.privateChatHeader{min-height:54px;border-bottom:1px solid #2a3138;margin-bottom:10px}
.privateChatHeader h3{margin:0 0 4px}
.privateChatBox{height:430px}
.privateMessage{max-width:78%;padding:9px 12px;margin:8px 0;border-radius:7px;background:#161b21;border:1px solid #2b343d}
.privateMessage.mine{margin-left:auto;background:#1c2631;border-color:#38566f}
.privateMessage small{display:block;color:#77828d;margin-top:5px}
.socialRow{display:grid;grid-template-columns:1fr auto;gap:10px;align-items:center;padding:12px;background:#15191f;border:1px solid #2b3138;margin-bottom:8px}
.socialActions{display:flex;gap:6px;flex-wrap:wrap}.socialActions button{width:auto;margin:0;padding:8px 10px}
.profileActions{display:flex;gap:8px;flex-wrap:wrap;margin:14px 0}.profileActions button{width:auto;min-width:140px}
.profilePvpHistory{margin-top:18px;border-top:1px solid #313740;padding-top:12px}
.profilePvpRow{display:grid;grid-template-columns:90px 1fr 90px 150px;gap:8px;padding:8px 0;border-bottom:1px solid #262c32}
.pvpRecord{margin:10px 0;padding:10px;background:#0d1116;border-left:3px solid #c69c3c}
@media(max-width:1000px){.messagesLayout{grid-template-columns:1fr}.privateChatPanel{min-height:auto}.privateChatBox{height:380px}}
@media(max-width:700px){.profilePvpRow{grid-template-columns:1fr}.socialRow{grid-template-columns:1fr}.socialActions{justify-content:flex-start}}


/* =========================================================
   v4.9.1 — MOBILE UI REBUILD
   ========================================================= */
.mobileMenuBtn,.mobileCloseBtn,.mobileNavOverlay{display:none}
.mobileHeaderLeft{display:flex;align-items:center;gap:12px;min-width:0}
html,body{max-width:100%;overflow-x:hidden}
img{max-width:100%;height:auto}

@media (max-width:820px){
  html{font-size:15px}
  body{
    background-attachment:scroll;
    background-size:auto 100vh;
    min-width:0;
    overflow-x:hidden;
  }
  body.mobile-menu-open{overflow:hidden}

  /* Real mobile drawer instead of the old 74px desktop sidebar */
  .shell{
    display:block!important;
    min-height:100vh;
  }
  aside{
    position:fixed!important;
    z-index:1005;
    top:0!important;left:0!important;bottom:0!important;
    width:min(84vw,320px)!important;
    transform:translateX(-105%);
    transition:transform .22s ease;
    padding:16px 12px 28px!important;
    background:#080a0dfa!important;
    box-shadow:16px 0 45px #000b;
    border-right:1px solid #333a43;
    overflow-y:auto;
    overscroll-behavior:contain;
  }
  body.mobile-menu-open aside{transform:translateX(0)}
  .mobileNavOverlay{
    display:block;
    position:fixed;
    inset:0;
    z-index:1000;
    background:#000a;
    opacity:0;
    pointer-events:none;
    transition:opacity .22s ease;
  }
  body.mobile-menu-open .mobileNavOverlay{
    opacity:1;
    pointer-events:auto;
  }
  aside .logo{
    display:block!important;
    font-size:22px!important;
    padding:7px 8px 12px!important;
  }
  aside .logo:after{content:none!important}
  aside .logo small{display:block!important}
  aside button{
    display:flex!important;
    align-items:center;
    width:100%!important;
    min-height:46px!important;
    height:auto!important;
    padding:11px 10px!important;
    margin:2px 0!important;
    font-size:13px!important;
    line-height:1.15;
    white-space:normal;
    border-left:3px solid transparent;
  }
  .mobileCloseBtn{
    display:block!important;
    margin-bottom:12px!important;
    background:#171c22!important;
    border:1px solid #343b43!important;
    text-align:center!important;
    justify-content:center;
  }

  main{
    display:block!important;
    width:100%!important;
    max-width:100vw!important;
    margin:0!important;
    padding:0 10px 28px!important;
    grid-column:auto!important;
    overflow:hidden;
  }

  header{
    position:sticky;
    z-index:900;
    top:0;
    height:66px!important;
    margin:0 -10px 12px!important;
    padding:0 10px!important;
    background:#080a0df4!important;
    border-bottom:1px solid #2b323a;
    gap:8px;
  }
  .mobileMenuBtn{
    display:grid!important;
    place-items:center;
    flex:0 0 42px;
    width:42px!important;
    height:42px!important;
    padding:0!important;
    margin:0!important;
    font-size:22px!important;
    line-height:1;
    background:#171c22!important;
    border:1px solid #3b434c!important;
    border-radius:5px;
  }
  header small{
    display:block;
    max-width:150px;
    overflow:hidden;
    white-space:nowrap;
    text-overflow:ellipsis;
    font-size:8px!important;
    letter-spacing:1px!important;
  }
  header h2{
    max-width:150px;
    overflow:hidden;
    white-space:nowrap;
    text-overflow:ellipsis;
    font-size:18px!important;
    margin:2px 0 0!important;
  }
  .headerRight{gap:7px!important}
  .bellBtn{
    width:40px!important;height:40px!important;
    padding:0!important;margin:0!important;
  }
  .who{max-width:105px}
  .who b,.who span{
    max-width:105px;
    overflow:hidden;
    white-space:nowrap;
    text-overflow:ellipsis;
  }
  .who b{font-size:12px}
  .who span{font-size:9px!important}

  .panel{
    width:100%;
    max-width:100%;
    padding:13px!important;
    margin-bottom:11px!important;
    border-radius:3px;
    overflow:hidden;
  }

  /* Home */
  .art-banner{
    min-height:245px!important;
    background-position:58% center!important;
  }
  .art-overlay{
    left:16px!important;
    right:12px!important;
    bottom:16px!important;
  }
  .art-overlay h1{
    font-size:30px!important;
    margin:5px 0!important;
    overflow-wrap:anywhere;
  }
  .art-overlay p{font-size:12px}
  .vipBadgeWrap{padding:5px 8px!important}
  .vipBadgeWrap img{width:25px!important;height:25px!important}
  .stats{
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
    gap:7px!important;
  }
  .stats div{padding:11px!important;min-width:0}
  .stats span{font-size:8px!important;white-space:normal}
  .stats b{font-size:18px!important;overflow-wrap:anywhere}
  .quick{grid-template-columns:1fr!important;gap:6px!important}
  .quick button{min-height:48px}

  /* Generic responsive grids */
  .grid2,.cards3,.premiumGrid,.missionGrid,.playersLayout,.messagesLayout{
    grid-template-columns:1fr!important;
    gap:9px!important;
  }
  .premiumItem,.missionCard,.item{min-width:0}
  .cards3 button{
    min-height:105px!important;
    padding:15px 10px!important;
  }

  /* Hero panels */
  .premiumHero,.vipHero,.topupHero,.playersHero,.notificationHero,.missionHero,.warHero,.adminHero,.messagesHero,.friendsHero,.pvpHero{
    min-height:150px!important;
    display:block!important;
    padding:17px!important;
    background-position:center!important;
  }
  .premiumHero h2,.vipHero h2,.topupHero h2,.messagesHero h2,.friendsHero h2,.pvpHero h2{
    font-size:25px!important;
  }
  .premiumCrown,.vipHeroArt{display:none!important}

  /* Player browser + profiles */
  .playerSearch{grid-template-columns:1fr!important;gap:5px!important}
  .playerRow{
    grid-template-columns:1fr auto!important;
    gap:6px!important;
    padding:11px!important;
  }
  .playerRow > *:nth-child(3){grid-column:1/-1}
  .profileCard{padding:14px!important}
  .profileHead{gap:8px}
  .profileHead h2{font-size:24px!important;overflow-wrap:anywhere}
  .profileLevel{font-size:18px!important}
  .profileStats{
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
    gap:6px!important;
    margin:12px 0!important;
  }
  .profileStats div{padding:9px!important}
  .profileStats b{font-size:18px!important}
  .profileActions{
    display:grid!important;
    grid-template-columns:1fr!important;
    gap:6px!important;
  }
  .profileActions button{
    width:100%!important;
    min-width:0!important;
    margin:0!important;
    min-height:44px;
  }
  .profilePvpRow{
    grid-template-columns:1fr auto!important;
    gap:6px!important;
    padding:10px 0!important;
  }
  .profilePvpRow > *:nth-child(3),
  .profilePvpRow > *:nth-child(4){font-size:11px}

  /* Challenges, wars, alliance members and social lists */
  .challengeRow,.warRow,.allianceRow,.memberRow,.socialRow,.historyRow,.orderRow{
    grid-template-columns:1fr!important;
    gap:7px!important;
  }
  .challengeRow button,.warRow button,.socialActions button{
    width:100%!important;
    min-height:42px;
    margin:2px 0!important;
  }
  .socialActions{
    display:grid!important;
    grid-template-columns:1fr!important;
    width:100%;
  }
  .warScore{text-align:left!important}

  /* Messages and chats */
  .messagesLayout{display:block!important}
  .messagesLayout > .panel{width:100%}
  .conversationRow{
    grid-template-columns:minmax(0,1fr) auto!important;
    padding:11px!important;
  }
  .conversationRow p{max-width:calc(100vw - 105px)!important}
  .privateChatPanel{min-height:0!important}
  .chatBox,.privateChatBox{
    height:52vh!important;
    min-height:310px;
    max-height:520px;
    padding:9px!important;
  }
  .privateMessage{
    max-width:88%!important;
    overflow-wrap:anywhere;
  }
  .send{
    display:grid!important;
    grid-template-columns:1fr!important;
    gap:5px!important;
  }
  .send input,.send button{
    width:100%!important;
    min-height:46px;
  }

  /* Notifications */
  .notificationRow{
    grid-template-columns:34px minmax(0,1fr)!important;
    gap:8px!important;
    padding:11px!important;
  }
  .notifIcon{font-size:20px!important}
  .notificationRow p{overflow-wrap:anywhere}
  .notifActions{
    display:grid!important;
    grid-template-columns:1fr!important;
  }
  .notifActions button{width:100%!important;margin:2px 0!important}

  /* Tables: deliberate horizontal scroll instead of page overflow */
  .tablewrap{
    width:calc(100% + 8px);
    max-width:calc(100vw - 20px);
    margin-right:-8px;
    overflow-x:auto!important;
    -webkit-overflow-scrolling:touch;
    scrollbar-width:thin;
  }
  table{
    min-width:620px!important;
    font-size:12px;
  }
  th,td{
    padding:9px 8px!important;
    white-space:nowrap;
  }

  /* Forms and buttons */
  input,select,button{
    font-size:16px; /* prevents iOS zoom on focus */
    min-width:0;
  }
  button{touch-action:manipulation}
  .loginbox{
    width:calc(100% - 20px)!important;
    padding:20px 15px!important;
  }
  .loginbox h1{font-size:31px!important}
  .auth{padding:10px}

  /* Toast */
  .toast{
    left:10px!important;
    right:10px!important;
    bottom:10px!important;
    width:auto!important;
    max-width:none!important;
    z-index:1200;
  }
}

@media (max-width:380px){
  main{padding-left:7px!important;padding-right:7px!important}
  header{margin-left:-7px!important;margin-right:-7px!important}
  .stats{grid-template-columns:1fr 1fr!important}
  .stats div{padding:9px!important}
  .stats b{font-size:16px!important}
  .art-overlay h1{font-size:26px!important}
  .who{display:none}
  header h2{max-width:175px}
}


/* ================= v4.9.2 AVATARS & PROFILE SETTINGS ================= */
.avatarFrame{
  position:relative;display:inline-grid;place-items:center;flex:0 0 auto;
  border-radius:50%;padding:3px;background:#171b20;border:2px solid #424950;
}
.avatarFrame img{width:100%;height:100%;display:block;object-fit:cover;border-radius:50%;background:#0b0d10}
.avatarXs{width:34px;height:34px}.avatarSm{width:44px;height:44px}.avatarMd{width:54px;height:54px}
.avatarProfile{width:92px;height:92px}.avatarHero{width:76px;height:76px;margin-bottom:10px}
.avatarSettings{width:130px;height:130px}.avatarPresetImg{width:78px;height:78px}.avatarFrameDemo{width:76px;height:76px}
.frame-default{border-color:#4b535c;box-shadow:0 0 0 2px #090b0e}
.frame-vip-gold{border-color:#d0a83c;box-shadow:0 0 0 2px #4c3811,0 0 18px #d0a83c88;animation:avatarGoldPulse 2s ease-in-out infinite}
.frame-vip-neon{border-color:#62d8ff;box-shadow:0 0 0 2px #103947,0 0 20px #42c7ff99;animation:avatarNeonPulse 1.7s ease-in-out infinite}
.frame-vip-crimson{border-color:#ed454d;box-shadow:0 0 0 2px #52151a,0 0 22px #e42f3a99;animation:avatarCrimsonPulse 1.8s ease-in-out infinite}
.frame-vip-diamond{border-color:#d7edff;box-shadow:0 0 0 2px #526a80,0 0 24px #a6d8ff9e;animation:avatarDiamondPulse 2.2s ease-in-out infinite}
@keyframes avatarGoldPulse{50%{box-shadow:0 0 0 3px #6c5017,0 0 28px #d0a83cbb}}
@keyframes avatarNeonPulse{50%{box-shadow:0 0 0 3px #155169,0 0 31px #42c7ffcc}}
@keyframes avatarCrimsonPulse{50%{box-shadow:0 0 0 3px #6b171e,0 0 31px #e42f3acc}}
@keyframes avatarDiamondPulse{50%{box-shadow:0 0 0 3px #6a879e,0 0 34px #b9e1ffcf}}
.playerIdentity,.profileIdentity,.conversationIdentity,.privateChatIdentity,.rankIdentity{display:flex;align-items:center;gap:10px;min-width:0}
.profileIdentity{gap:14px}.rankIdentity{gap:7px}.conversationIdentity>div,.playerIdentity>div{min-width:0}
.chatWithAvatar{display:flex!important;align-items:flex-start;gap:9px}.chatContent{min-width:0;flex:1}
.settingsHero{display:flex;justify-content:space-between;align-items:center;gap:18px;min-height:190px;background:linear-gradient(100deg,#12171df2,#15100ee8),url("assets/underground_dashboard.png") center/cover}
.settingsHero small{letter-spacing:2px;color:#d0a83c;font-weight:900}.settingsHero h2{font-size:32px;margin:7px 0}
.avatarPresetGrid{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:9px}
.avatarPreset,.frameChoice{
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;
  min-height:125px;background:#11151a;border:1px solid #303840;padding:10px;margin:0
}
.avatarPreset:hover,.frameChoice:hover,.avatarPreset.selected,.frameChoice.selected{border-color:#c69c3c;background:#181814}
.avatarPreset b,.frameChoice b{font-size:11px;text-align:center}.frameChoice small{color:#d0a83c;font-weight:900}
.profileFrameGrid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
#vipAvatarFile{width:100%;margin:10px 0;padding:11px;background:#101419;border:1px solid #303840;color:#d8d8da}
.headerRight .avatarXs{margin-right:2px}
.art-overlay .avatarHero{box-shadow:0 8px 22px #0009}
@media(max-width:1000px){.avatarPresetGrid{grid-template-columns:repeat(4,minmax(0,1fr))}}
@media(max-width:820px){
  .avatarPresetGrid{grid-template-columns:repeat(3,minmax(0,1fr))!important}
  .settingsHero{min-height:160px!important;padding:15px!important}
  .settingsHero h2{font-size:25px!important}.avatarSettings{width:92px;height:92px}
  .avatarProfile{width:72px;height:72px}.avatarHero{width:64px;height:64px}
  .headerRight .avatarXs{width:36px;height:36px}
  .playerRow .playerIdentity{grid-column:1/2}
}
@media(max-width:460px){
  .avatarPresetGrid{grid-template-columns:repeat(2,minmax(0,1fr))!important}
  .settingsHero{align-items:flex-start}.avatarSettings{width:76px;height:76px}
  .profileIdentity{align-items:flex-start}.profileHead{align-items:flex-start}
  .profileFrameGrid{grid-template-columns:1fr 1fr}
}


/* ================= v4.9.3 AUTH / REGISTRATION REBUILD ================= */
.auth{
  min-height:100vh;
  display:grid;
  place-items:center;
  padding:28px;
  background:
    radial-gradient(circle at 78% 22%,#7b131a24 0,transparent 32%),
    linear-gradient(90deg,#020304f2 0%,#05070adc 48%,#08090cb5 100%),
    url("assets/underground_dashboard.png") center/cover no-repeat;
}
.authShell{
  width:min(1080px,100%);
  display:grid;
  grid-template-columns:minmax(300px,.9fr) minmax(390px,1.1fr);
  gap:34px;
  align-items:center;
}
.authBrand{
  padding:28px;
  text-shadow:0 4px 18px #000;
}
.authLogo{
  font-size:24px;
  font-weight:1000;
  letter-spacing:.5px;
  margin-bottom:6px;
}
.authLogo b{color:var(--accent)}
.authBrand>small{color:#8c949d;letter-spacing:2px;font-weight:800}
.authBrand h1{
  font-size:52px;
  line-height:.98;
  margin:26px 0 14px;
}
.authBrand p{max-width:520px;color:#b7bdc5;line-height:1.55;font-size:15px}
.authFeatureList{display:flex;flex-wrap:wrap;gap:8px;margin-top:22px}
.authFeatureList span{
  padding:8px 11px;
  border:1px solid #333a43;
  background:#0a0d11c7;
  font-size:11px;
  font-weight:800;
}
.authCard{
  background:#0b0e12f5;
  border:1px solid #353c45;
  border-top:3px solid var(--accent);
  padding:24px;
  box-shadow:0 30px 90px #000c;
  backdrop-filter:blur(12px);
}
.authTabs{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:5px;
  padding:4px;
  margin-bottom:22px;
  background:#07090c;
  border:1px solid #282e35;
}
.authTab{
  margin:0!important;
  border:0!important;
  background:transparent!important;
  color:#777f88!important;
  min-height:42px;
}
.authTab.active{
  background:#1b2026!important;
  color:#fff!important;
  box-shadow:inset 0 -2px var(--accent);
}
.authForm h2{font-size:27px;margin:0 0 5px}
.authHint{margin:0 0 18px;color:#8f98a2;font-size:12px;line-height:1.45}
.authForm label{
  display:block;
  color:#b9c0c7;
  font-size:10px;
  font-weight:900;
  letter-spacing:.8px;
  margin:12px 0 2px;
  text-transform:uppercase;
}
.authForm input,.authForm select{
  margin:4px 0!important;
  min-height:48px;
  background:#080b0f;
  border-color:#343c45;
}
.authForm input:focus,.authForm select:focus{
  outline:none;
  border-color:#a92323;
  box-shadow:0 0 0 2px #a9232326;
}
.authGrid2{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.passwordField{position:relative}
.passwordField input{padding-right:78px}
.passwordToggle{
  position:absolute;
  right:7px;
  top:9px;
  width:auto!important;
  min-height:34px!important;
  padding:6px 9px!important;
  margin:0!important;
  background:#1b2026!important;
  border:1px solid #343c45!important;
  color:#aeb5bd!important;
  font-size:9px!important;
}
.authPrimary{
  min-height:50px;
  margin-top:16px!important;
  letter-spacing:.4px;
}
.authDivider{
  display:flex;
  align-items:center;
  gap:10px;
  margin:18px 0 12px;
  color:#626a73;
  font-size:10px;
}
.authDivider:before,.authDivider:after{content:"";height:1px;background:#2b3138;flex:1}
.facebookBtn{
  position:relative;
  display:grid;
  grid-template-columns:32px 1fr auto;
  align-items:center;
  gap:9px;
  min-height:48px;
  background:#172d57!important;
  border-color:#294879!important;
  text-align:left;
  padding:9px 11px!important;
}
.facebookBtn:hover{background:#1d396d!important}
.facebookIcon{
  display:grid;
  place-items:center;
  width:28px;height:28px;
  border-radius:50%;
  background:#fff;
  color:#1d4f91;
  font-family:Arial,sans-serif;
  font-size:21px;
  font-weight:1000;
}
.facebookBtn small{
  color:#9bb7da;
  font-size:8px;
  letter-spacing:1px;
}
.authSwitch{
  text-align:center;
  margin:16px 0 0!important;
  color:#737c85!important;
  font-size:11px;
}
.authSwitch button{
  display:inline;
  width:auto;
  border:0;
  background:transparent;
  padding:0;
  margin:0 0 0 3px;
  color:#e2e6ea;
  text-decoration:underline;
}
.registerInfo{
  margin-top:13px;
  padding:10px 12px;
  border-left:3px solid #b58b2d;
  background:#17140d;
  color:#bcb7aa;
  font-size:11px;
}
.authMsg{
  min-height:20px;
  margin:13px 0 0!important;
  color:#ff6c6c!important;
  text-align:center;
  font-weight:800;
  font-size:11px;
}
.authPrivacy{
  text-align:center;
  color:#59616a!important;
  font-size:9px!important;
  line-height:1.45;
  margin:7px 0 0!important;
}
@media(max-width:900px){
  .authShell{grid-template-columns:1fr;max-width:590px;gap:10px}
  .authBrand{padding:8px 8px 14px;text-align:center}
  .authBrand h1{font-size:37px;margin:13px 0 8px}
  .authBrand p{margin:0 auto}
  .authFeatureList{justify-content:center;margin-top:13px}
}
@media(max-width:620px){
  .auth{padding:10px!important;align-items:start}
  .authShell{display:block;width:100%}
  .authBrand{padding:16px 8px 13px}
  .authBrand h1{font-size:31px}
  .authBrand p{font-size:12px}
  .authFeatureList span{font-size:9px;padding:6px 8px}
  .authCard{
    width:100%;
    padding:16px 13px;
    border-left:0;
    border-right:0;
  }
  .authGrid2{grid-template-columns:1fr}
  .authForm h2{font-size:23px}
  .facebookBtn{grid-template-columns:30px 1fr auto}
}


/* ================= v4.9.4 EQUIPMENT ================= */
.equipmentHero{display:flex;align-items:center;justify-content:space-between;min-height:190px;background:linear-gradient(100deg,#17120ef2,#10131ae6 58%,#1c1010e8),url("assets/underground_dashboard.png") center/cover}
.equipmentHero small{color:#d8b15b;letter-spacing:2px;font-weight:900}.equipmentHero h2{font-size:34px;margin:7px 0}.equipmentHero p{color:#c7ccd2}
.gearShopItem,.gearCard{background:#11151a;border:1px solid #303840;padding:13px}.gearTop{display:flex;justify-content:space-between;gap:10px;align-items:flex-start;margin-bottom:8px}.gearIcon{font-size:34px}.gearQty{padding:4px 8px;background:#0b0d11;border:1px solid #323841;font-weight:900}
.rarityBadge{padding:5px 8px;border:1px solid #404853;font-size:9px;font-weight:900;letter-spacing:1px}.rarity-common{border-color:#48515b;background:#111418}.rarity-rare{border-color:#4e79b0;background:#111927}.rarity-epic{border-color:#8851b3;background:#191127}
.bonusLine{display:flex;flex-wrap:wrap;gap:6px;margin:10px 0 8px}.bonusLine span,.bonusLine{color:#d5dbe1}.bonusLine span{padding:5px 7px;background:#0d1116;border:1px solid #2e363f;font-size:11px}.gearPrice{font-weight:900;color:#d3a53f}
.equipmentSlots{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}.slotCard{padding:12px;border:1px dashed #424a53;background:#0f1216;min-height:166px}.slotCard.filled{border-style:solid;background:#141a20}.slotIcon{font-size:30px;margin-bottom:7px}.slotCard p{font-size:12px;color:#9ea7b1;line-height:1.4}
.equipmentSummary{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}.summaryStat{padding:12px;background:#11151a;border:1px solid #303840}.summaryStat span{display:block;color:#919aa4;font-size:10px;font-weight:900;letter-spacing:1px}.summaryStat b{display:block;font-size:24px;margin-top:4px}
.equipmentGrid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}.gearActions{display:flex;gap:7px;flex-wrap:wrap}.gearActions button{width:auto;min-width:120px;margin:0}
@media(max-width:820px){.equipmentSlots,.equipmentSummary,.equipmentGrid{grid-template-columns:1fr!important}.gearActions{display:grid;grid-template-columns:1fr}.gearActions button{width:100%!important;min-width:0}.equipmentHero{min-height:150px!important;padding:17px!important}.equipmentHero h2{font-size:26px!important}}


/* ================= v4.9.5 ENERGY 2.0 ================= */
.energyPanel{background:linear-gradient(120deg,#10161d,#111317 60%,#18110c);border-top:2px solid #c88b32}
.energyPanelHead{display:flex;justify-content:space-between;align-items:flex-start;gap:15px;margin-bottom:12px}
.energyPanelHead small{color:#d29a43;letter-spacing:2px;font-weight:900}.energyPanelHead h3{font-size:25px;margin:5px 0}
.energyBig{text-align:right}.energyBig b{display:block;font-size:30px}.energyBig span{font-size:11px;color:#9aa4ae}
.energyBar{height:13px;background:#080b0e;border:1px solid #333c45;overflow:hidden;margin-bottom:14px}
.energyBar span{display:block;height:100%;width:0;background:linear-gradient(90deg,#8a4c1a,#e19c36);transition:width .4s ease}
.energyCards{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px}
.energyCard{padding:11px;background:#0d1115;border:1px solid #2c343c;min-height:95px}
.energyCard span{display:block;color:#87919b;font-size:9px;font-weight:900;letter-spacing:.8px}.energyCard b{display:block;margin:6px 0;font-size:15px}.energyCard small{color:#b0b8c0;line-height:1.4}
.energyActions{display:flex;gap:8px;margin-top:12px}.energyActions button{width:auto;min-width:210px;margin:0}
.energyActions button:disabled{opacity:.45;cursor:not-allowed}
@media(max-width:900px){.energyCards{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:620px){
  .energyPanelHead{display:block}.energyBig{text-align:left;margin-top:10px}
  .energyCards{grid-template-columns:1fr}
  .energyActions{display:grid;grid-template-columns:1fr}
  .energyActions button{width:100%!important;min-width:0}
}


/* ================= v4.9.6 CRATES 2.0 ================= */
.crateSystemPanel{background:linear-gradient(120deg,#11151a,#15120e 70%,#21160b);border-top:2px solid #c58e38}
.crateSystemHead,.tokenShopHead{display:flex;justify-content:space-between;align-items:flex-start;gap:15px;margin-bottom:14px}
.crateSystemHead small{color:#dda84c;letter-spacing:2px;font-weight:900}.crateSystemHead h3{font-size:25px;margin:5px 0}
.crateTokenBalance{padding:10px 13px;background:#0c0f13;border:1px solid #665128;font-size:14px;white-space:nowrap}.crateTokenBalance b{font-size:22px;color:#e7ba5d}
.crateInfoCards{display:grid;grid-template-columns:1fr 1fr;gap:10px}.crateInfoCard{padding:15px;background:#0e1217;border:1px solid #333b44;position:relative;overflow:hidden}.crateInfoCard.eliteInfo{border-color:#765596;background:linear-gradient(135deg,#14121b,#1e1227)}
.crateInfoIcon{font-size:42px}.crateInfoCard h4{font-size:19px;margin:6px 0}.crateInfoCard p{color:#aeb7c0;min-height:38px}
.odds{display:flex;gap:6px;flex-wrap:wrap;margin:10px 0}.odds span{padding:6px 8px;background:#090c10;border:1px solid #343b43;font-size:10px}.odds b{font-size:13px}.epicText{color:#d99cff!important}
.pityBox{margin-top:12px;padding:13px;background:#0b0e12;border:1px solid #4b3e55}.pityBox>div:first-child{display:flex;justify-content:space-between;gap:10px}.pityBox span{font-size:10px;font-weight:900;letter-spacing:1px}.pityTrack{height:11px;background:#17131b;margin:9px 0;border:1px solid #4b3f51;overflow:hidden}.pityTrack span{display:block;height:100%;width:0;background:linear-gradient(90deg,#75489a,#d69cff);transition:width .5s ease}
.tokenShopGrid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:9px}.tokenRewardCard{padding:12px;background:#101419;border:1px solid #343c44;text-align:center}.tokenRewardIcon{font-size:38px;margin:5px}.tokenRewardCard h4{min-height:36px}.tokenRewardCard p{font-size:11px;color:#aab3bc;min-height:32px}.tokenRewardCard button:disabled{opacity:.4}
.crateHistory{display:flex;flex-direction:column;gap:6px}.crateHistoryRow{display:grid;grid-template-columns:12px 1fr auto;gap:9px;align-items:center;padding:10px;background:#0f1318;border:1px solid #2d343c}.crateHistoryRow small{display:block;color:#8f99a4;margin-top:3px}.crateHistoryRow time{font-size:10px;color:#737e89}.rarityDot{width:10px;height:10px;border-radius:50%;display:block}.rarityDot.rarity-common{background:#87919b}.rarityDot.rarity-rare{background:#4f91e2}.rarityDot.rarity-epic{background:#c26cff;box-shadow:0 0 10px #c26cff}
.crateStoreCard .dark{margin-bottom:5px}
.crateModal{position:fixed;inset:0;z-index:5000;display:grid;place-items:center;padding:15px}.crateModal.hidden{display:none}.crateModalBackdrop{position:absolute;inset:0;background:#020306e8;backdrop-filter:blur(8px)}
.crateModalCard{position:relative;z-index:1;width:min(520px,100%);min-height:470px;padding:28px;background:radial-gradient(circle at 50% 30%,#25201a,#0b0e12 62%);border:1px solid #5b4a30;box-shadow:0 30px 100px #000,0 0 50px #a46a2033;text-align:center;display:flex;flex-direction:column;justify-content:center;align-items:center}
.crateOpenStage{display:grid;place-items:center;gap:18px}.crateChestVisual{font-size:105px;filter:drop-shadow(0 16px 18px #000);transform-origin:center}.crateChestVisual.opening{animation:crateShake .18s linear infinite,crateGlow 1.2s ease-in-out infinite}.crateChestVisual.eliteChest{filter:drop-shadow(0 0 30px #ad65e6)}
.crateOpeningText{letter-spacing:3px;font-size:13px;font-weight:1000;color:#d8c4a1;animation:openingPulse .7s ease-in-out infinite}
.crateRewardReveal{position:relative;width:100%;padding:16px;animation:rewardReveal .5s cubic-bezier(.16,.9,.3,1)}.crateRewardReveal.rarity-common{border:1px solid #68717a}.crateRewardReveal.rarity-rare{border:1px solid #4e8fdc;box-shadow:0 0 35px #3788e355}.crateRewardReveal.rarity-epic{border:1px solid #c16cff;box-shadow:0 0 50px #b54cff77;background:radial-gradient(circle,#481c623d,transparent 65%)}
.rewardRarity{font-size:11px;font-weight:1000;letter-spacing:2px;margin-bottom:6px}.rarity-rare .rewardRarity{color:#68aaff}.rarity-epic .rewardRarity{color:#dc9cff;text-shadow:0 0 14px #c06aff}.rewardIcon{font-size:82px;margin:7px 0}.crateRewardReveal h2{font-size:28px;margin:8px 0}.crateRewardReveal p{color:#aeb6bf}.rewardBonuses,.rewardExtra{display:flex;justify-content:center;gap:6px;flex-wrap:wrap;margin:12px 0}.rewardBonuses span,.rewardExtra span{padding:7px 9px;background:#090c10;border:1px solid #39414a;font-size:11px}.rewardExtra span{border-color:#6b552b;color:#e4bd6b}
#crateCloseBtn{width:auto;min-width:230px;margin-top:18px}
@keyframes crateShake{0%{transform:rotate(-3deg) scale(1)}50%{transform:rotate(3deg) scale(1.03)}100%{transform:rotate(-3deg) scale(1)}}@keyframes crateGlow{50%{filter:drop-shadow(0 0 35px #d49a42)}}@keyframes openingPulse{50%{opacity:.45}}@keyframes rewardReveal{0%{opacity:0;transform:scale(.55) rotate(-4deg)}100%{opacity:1;transform:scale(1) rotate(0)}}
@media(max-width:950px){.tokenShopGrid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:650px){.crateSystemHead,.tokenShopHead{display:block}.crateTokenBalance{display:inline-block;margin-top:9px}.crateInfoCards,.tokenShopGrid{grid-template-columns:1fr}.crateHistoryRow{grid-template-columns:12px 1fr}.crateHistoryRow time{grid-column:2}.crateModalCard{min-height:420px;padding:18px}.crateChestVisual{font-size:88px}.crateRewardReveal h2{font-size:23px}}


/* ================= v4.9.7 CLUB PICKER ================= */
.clubPickerGrid{align-items:end}
.clubSeasonHint{margin:5px 0 0!important;color:#616b75!important;font-size:9px!important;text-align:right}
#registerLeague,#registerClub{width:100%;text-overflow:ellipsis}
@media(max-width:620px){
  .clubPickerGrid{grid-template-columns:1fr!important;gap:0!important}
  .clubSeasonHint{text-align:left}
}


/* ================= v4.9.8 GENERIC LEAGUE LABELS ================= */
.clubDisclaimer{
  margin:9px 0 2px;
  padding:9px 10px;
  background:#0c0f13;
  border:1px solid #2d343c;
  border-left:3px solid #6c737b;
  color:#737d87;
  font-size:9px;
  line-height:1.45;
}
@media(max-width:620px){
  .clubDisclaimer{font-size:9px;padding:8px 9px}
}


/* ================= v4.9.9 ADMIN + CLICKABLE CHAT PROFILES ================= */
.adminNick{
  color:#ff3b3b!important;
  font-weight:1000!important;
  text-shadow:0 0 10px rgba(255,36,36,.48);
}
.adminBadge{
  display:inline-block;
  margin-left:5px;
  padding:2px 5px;
  border:1px solid #a72727;
  background:#2a0909;
  color:#ff5c5c;
  font-size:8px;
  line-height:1.1;
  letter-spacing:.8px;
  font-weight:1000;
  vertical-align:middle;
}
.adminStatus{
  display:inline-block;
  padding:6px 9px;
  border:1px solid #9d2525;
  border-left:3px solid #ff3030;
  background:#240909;
  color:#ff5555;
  font-size:10px;
  font-weight:1000;
  letter-spacing:1px;
}
.adminChatMsg{
  border-left:3px solid #e82d2d!important;
  background:linear-gradient(90deg,rgba(101,13,13,.20),rgba(15,18,22,.75))!important;
}
.chatAvatarButton,.chatNickButton{
  appearance:none;
  -webkit-appearance:none;
  border:0!important;
  background:transparent!important;
  padding:0!important;
  margin:0!important;
  width:auto!important;
  min-width:0!important;
  color:inherit;
  font:inherit;
  box-shadow:none!important;
}
.chatAvatarButton{
  display:flex;
  flex:0 0 auto;
  border-radius:50%!important;
  cursor:pointer;
}
.chatNickButton{
  display:inline-flex;
  align-items:center;
  cursor:pointer;
  text-align:left;
}
.chatAvatarButton:hover .avatarFrame{
  transform:scale(1.08);
  filter:brightness(1.15);
}
.chatNickButton:hover .adminNick,
.chatNickButton:hover .vipNick,
.chatNickButton:hover{
  text-decoration:underline;
}
.chatAvatarButton .avatarFrame{
  transition:transform .15s ease,filter .15s ease;
}
@media(max-width:620px){
  .adminBadge{font-size:7px;padding:2px 4px}
}


/* ================= v4.10.0 GOLD BADGE ================= */
.goldBadgeIcon{
  display:inline-block;
  margin-right:2px;
  font-size:.95em;
  line-height:1;
  filter:drop-shadow(0 0 5px rgba(255,194,55,.55));
  vertical-align:baseline;
}
.goldBadgeOwnedEquipped{
  border-color:#a97c24!important;
  background:linear-gradient(145deg,#17140d,#221a08)!important;
  box-shadow:inset 0 0 25px rgba(222,166,42,.08);
}
.goldBadgeOwnedEquipped .picon{
  filter:drop-shadow(0 0 12px rgba(255,188,46,.6));
}
.goldBadgeState{
  color:#d8ad4b!important;
  font-size:9px!important;
  font-weight:1000;
  letter-spacing:1px;
}


/* ================= v4.11.0 CLUB LEAGUE ================= */
.clubLeagueHero{display:grid;grid-template-columns:1fr minmax(250px,360px);gap:18px;align-items:center;background:linear-gradient(125deg,#11161b,#17140f 70%,#25170b);border-top:2px solid #b9782e}
.clubLeagueHero>div:first-child>small{color:#c58d45;letter-spacing:1.5px;font-weight:900}.clubLeagueHero h2{font-size:30px;margin:5px 0 8px}
.myClubLeagueCard{padding:15px;border:1px solid #735127;background:#0c1014;box-shadow:inset 0 0 30px rgba(170,105,26,.08)}
.myClubLeagueCard small{display:block;color:#9a8163;font-size:9px;letter-spacing:1.4px;font-weight:900}.myClubLeagueCard>b{display:block;font-size:21px;margin:5px 0 12px}
.myClubLeagueCard>div{display:grid;grid-template-columns:repeat(3,1fr);gap:5px}.myClubLeagueCard>div span{padding:8px;background:#12171c;font-size:9px;color:#8d97a1}.myClubLeagueCard strong{display:block;color:#eee;font-size:16px;margin-top:3px}
.myClubLeagueToolbar,.clubLeagueToolbar{display:flex;justify-content:space-between;align-items:flex-end;gap:15px}.clubLeagueToolbar>div:first-child{min-width:260px}.clubLeagueToolbar label{display:block;font-size:9px;color:#7e8993;font-weight:900;letter-spacing:1px;margin-bottom:5px}.clubLeagueToolbar select{width:100%}
.leagueRules{display:flex;gap:7px;flex-wrap:wrap;justify-content:flex-end}.leagueRules span{padding:7px 9px;border:1px solid #343c44;background:#0c1014;font-size:10px;color:#9ca5ae}.leagueRules b{color:#df9e43}
.clubLeagueTitleRow{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:10px}.clubLeagueTitleRow small{color:#7d8790;font-size:9px;letter-spacing:1.5px;font-weight:900}.clubLeagueTitleRow h3{margin:2px 0;font-size:22px}.clubLeagueRefresh{width:auto!important;margin:0!important}
.clubLeagueTableWrap{overflow-x:auto}.clubLeagueTable{min-width:720px;width:100%;border-collapse:collapse}.clubLeagueTable th,.clubLeagueTable td{padding:10px 9px;border-bottom:1px solid #252c33;text-align:center}.clubLeagueTable th:nth-child(2),.clubLeagueTable td:nth-child(2){text-align:left}.clubLeagueTable th{font-size:9px;color:#77818b;letter-spacing:.8px}.clubLeagueTable td{font-size:12px}.clubLeagueTable tbody tr:hover{background:#12171c}
.myClubLeagueRow{background:linear-gradient(90deg,rgba(150,91,24,.22),rgba(16,20,24,.2))!important}.myClubMarker{color:#db9c44;margin-right:6px}.clubPoints{font-size:17px;color:#e7ad59}.clubNameCell{display:flex;align-items:center}
.clubForm{display:flex;gap:3px;justify-content:center}.formDot{width:20px;height:20px;display:grid;place-items:center;font-size:9px;font-weight:1000;border:1px solid #343c44}.formDot.win{background:#13281b;border-color:#276d3d;color:#69d287}.formDot.loss{background:#2a1313;border-color:#732b2b;color:#e67474}.formEmpty{color:#66717b}
.clubLeagueBottom{align-items:start}.clubLeagueRecent,.clubContributors{display:flex;flex-direction:column;gap:7px}.clubResultRow,.clubContributorRow{padding:10px;background:#0f1419;border:1px solid #2a323a}.clubResultRow>div{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:9px}.clubResultRow>div span:last-child{text-align:right}.clubResultRow b{font-size:14px;color:#d99b46}.clubResultRow small{display:block;margin-top:5px;color:#78838e;font-size:9px}.clubWin{font-weight:900;color:#e8edf2}
.clubContributorRow{display:grid;grid-template-columns:28px 1fr auto;align-items:center;gap:7px}.clubContributorRow>span{color:#6f7982;font-size:10px}.clubContributorRow>b{color:#d99c48}
@media(max-width:820px){.clubLeagueHero{grid-template-columns:1fr}.clubLeagueToolbar{display:block}.clubLeagueToolbar>div:first-child{min-width:0;margin-bottom:10px}.leagueRules{justify-content:flex-start}}
@media(max-width:520px){.clubLeagueHero h2{font-size:25px}.clubResultRow>div{font-size:10px}}


/* ================= v4.12.0 PVP ARENA 2.0 ================= */

/* richer challenge cards */
.challengeCardV2{
  grid-template-columns:minmax(0,1fr) 150px minmax(230px,auto)!important;
  background:linear-gradient(110deg,#11171d,#17120f)!important;
  border-left:3px solid #555f69!important;
  overflow:hidden;
}
.challengeCardV2.incomingChallenge{border-left-color:#d68b2d!important;box-shadow:inset 18px 0 35px rgba(182,104,22,.08)}
.challengeVsMini{display:grid;grid-template-columns:1fr 44px 1fr;gap:8px;align-items:center}
.challengeVsMini>div{min-width:0}.challengeVsMini small,.challengeVsMini span{display:block;color:#78838d;font-size:9px}.challengeVsMini b{display:block;margin:3px 0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.challengeVsMini strong{font-size:17px;color:#c98b39;text-align:center;font-style:italic}
.challengeMetaV2{display:flex;flex-direction:column;align-items:center;gap:7px}.challengeMetaV2 small{font-size:9px;color:#6e7882;text-align:center}.challengeMiniScore{font-size:17px;color:#e4e8ec}
.challengeActionsV2{display:flex;justify-content:flex-end;gap:6px;flex-wrap:wrap}.challengeActionsV2 button{margin:0!important}
.emptyArenaState{padding:28px;text-align:center;border:1px dashed #343c44;background:#0d1115}.emptyArenaState b{font-size:18px}.emptyArenaState p{color:#737e88}

/* cinematic modal */
.pvpArenaModal{position:fixed;inset:0;z-index:6000;display:grid;place-items:center;padding:14px}
.pvpArenaModal.hidden{display:none}
.pvpArenaBackdrop{position:absolute;inset:0;background:rgba(1,3,5,.94);backdrop-filter:blur(10px)}
.pvpArenaShell{
  position:relative;z-index:1;
  width:min(980px,100%);min-height:580px;max-height:94vh;overflow:auto;
  background:
    radial-gradient(circle at 50% 33%,rgba(154,72,25,.20),transparent 28%),
    linear-gradient(130deg,#0a0e12,#11161b 48%,#100b09);
  border:1px solid #4b3d31;border-top:3px solid #b86d27;
  box-shadow:0 35px 120px #000,0 0 70px rgba(173,84,27,.20);
  padding:28px;
}
.pvpArenaShell:before{
  content:"";position:absolute;inset:0;pointer-events:none;opacity:.16;
  background-image:linear-gradient(rgba(255,255,255,.025) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.02) 1px,transparent 1px);
  background-size:32px 32px;
}
.pvpArenaX{position:absolute!important;right:12px;top:10px;z-index:5;width:36px!important;height:36px;padding:0!important;margin:0!important;border-radius:50%!important;background:#11161bcc!important;border:1px solid #39414a!important;color:#b8c0c8!important;font-size:24px!important}
.pvpCountdownStage{min-height:520px;display:grid;place-items:center;align-content:center;gap:12px;text-align:center;position:relative;z-index:2}
.pvpCountdownStage small{font-size:11px;letter-spacing:5px;color:#9d7651;font-weight:1000}
.pvpCountdownNumber{font-size:128px;font-weight:1000;line-height:.9;color:#f0f3f5;text-shadow:0 0 35px rgba(213,120,43,.65)}
.pvpCountdownStage b{letter-spacing:4px;color:#c28a52;font-size:13px}
.countPop{animation:pvpCountPop .55s cubic-bezier(.16,.88,.3,1)}
@keyframes pvpCountPop{0%{transform:scale(.35);opacity:.1}70%{transform:scale(1.16)}100%{transform:scale(1);opacity:1}}

.pvpFightStage{position:relative;z-index:2}
.pvpArenaTopline{display:flex;justify-content:space-between;gap:12px;padding-bottom:12px;border-bottom:1px solid #2d343b;color:#8f99a2;font-size:10px;letter-spacing:1.5px}
.pvpArenaTopline b{color:#c8883c}
.pvpFighters{display:grid;grid-template-columns:1fr 100px 1fr;gap:12px;align-items:center;margin-top:18px}
.pvpFighterCard{position:relative;min-height:350px;padding:18px;text-align:center;background:linear-gradient(160deg,#11171d,#090c10);border:1px solid #343c44;overflow:hidden}
.pvpFighterCard:nth-child(3){background:linear-gradient(200deg,#11171d,#090c10)}
.pvpFighterGlow{position:absolute;width:210px;height:210px;border-radius:50%;left:50%;top:32px;transform:translateX(-50%);background:radial-gradient(circle,rgba(75,116,143,.20),transparent 68%);filter:blur(6px)}
.pvpFighterGlow.winnerGlow{background:radial-gradient(circle,rgba(205,124,40,.30),transparent 68%)}
.pvpFighterAvatar{position:relative;display:flex;justify-content:center;margin:10px 0 12px}.pvpFighterAvatar .avatarProfile{width:112px;height:112px}
.pvpFighterIdentity{position:relative}.pvpFighterIdentity small{color:#77828c}.pvpFighterIdentity h3{font-size:22px;margin:4px 0}.pvpFighterIdentity>span{font-size:10px;color:#c38a46;font-weight:900}
.pvpFighterStatsMini{display:grid;grid-template-columns:1fr 1fr;gap:5px;margin:14px 0}.pvpFighterStatsMini span{padding:7px;background:#090d11;border:1px solid #29313a;color:#707c86;font-size:8px}.pvpFighterStatsMini b{display:block;color:#dce1e5;font-size:13px;margin-top:2px}
.pvpFighterPower{padding:10px;background:#15100c;border:1px solid #5c4027}.pvpFighterPower span{font-size:8px;color:#9b7651}.pvpFighterPower b{display:block;font-size:26px;color:#dfa653}
.pvpVsCore{text-align:center}.pvpVsCore>span{display:grid;place-items:center;width:76px;height:76px;margin:auto;border-radius:50%;background:#17100b;border:2px solid #9d5d25;color:#e1a254;font-size:27px;font-weight:1000;font-style:italic;box-shadow:0 0 30px rgba(190,103,31,.25)}.pvpVsCore small{display:block;margin-top:10px;color:#89939d;font-size:9px;letter-spacing:1px}
.pvpClashZone{margin-top:18px;padding:14px;background:#080b0e;border:1px solid #2b333a}
.pvpPowerTrack{height:15px;display:flex;position:relative;overflow:hidden;background:#0a0d11}.pvpPowerTrack>span:first-child{background:linear-gradient(90deg,#25516d,#4f9fcb);transition:width 1s cubic-bezier(.15,.7,.2,1)}.pvpPowerTrack>span:last-child{background:linear-gradient(90deg,#be6b31,#7e351f);transition:width 1s cubic-bezier(.15,.7,.2,1)}.pvpPowerTrack i{position:absolute;left:50%;top:-5px;width:2px;height:25px;background:#fff;z-index:2;box-shadow:0 0 8px #fff}
.pvpBattleNarration{text-align:center;margin-top:12px;color:#bbc3ca;font-size:13px;min-height:20px}
.fighterEnterLeft{animation:fighterLeft .65s cubic-bezier(.15,.8,.25,1)}.fighterEnterRight{animation:fighterRight .65s cubic-bezier(.15,.8,.25,1)}
@keyframes fighterLeft{0%{transform:translateX(-90px);opacity:0}100%{transform:translateX(0);opacity:1}}
@keyframes fighterRight{0%{transform:translateX(90px);opacity:0}100%{transform:translateX(0);opacity:1}}
.arenaClash .pvpFighterCard:first-child{animation:leftStrike .55s ease}.arenaClash .pvpFighterCard:nth-child(3){animation:rightStrike .55s ease .12s}
@keyframes leftStrike{50%{transform:translateX(16px) rotate(.5deg)}}@keyframes rightStrike{50%{transform:translateX(-16px) rotate(-.5deg)}}
.arenaImpact{animation:arenaImpact .35s ease}
@keyframes arenaImpact{0%,100%{transform:translate(0)}25%{transform:translate(-4px,2px)}50%{transform:translate(4px,-2px)}75%{transform:translate(-2px,-1px)}}

.pvpResultStage{position:relative;z-index:2;min-height:515px;text-align:center;display:flex;flex-direction:column;align-items:center;justify-content:center}
.pvpResultStage>small{letter-spacing:3px;color:#858f98;font-size:9px}
.pvpResultStamp{font-size:12px;letter-spacing:3px;font-weight:1000;padding:7px 14px;margin-bottom:8px;border:1px solid}
.pvpResultStamp.victory{color:#76dc8e;border-color:#357446;background:#112719;box-shadow:0 0 25px rgba(64,167,89,.18)}
.pvpResultStamp.defeat{color:#e27979;border-color:#773636;background:#291313}
.pvpResultStage h2{font-size:34px;margin:8px 0}.pvpResultStage h2 small{display:block;color:#7d8790;font-size:13px;font-weight:500;margin-top:6px}
#pvpResultScore{font-size:15px;color:#c7914f;margin:3px 0 15px}
.pvpRewardGrid{display:grid;grid-template-columns:repeat(4,minmax(110px,1fr));gap:7px;width:min(680px,100%)}.pvpRewardGrid>div{padding:12px;background:#0b0f13;border:1px solid #303840}.pvpRewardGrid span{display:block;color:#77828c;font-size:9px}.pvpRewardGrid b{display:block;font-size:20px;margin-top:4px;color:#e2e7eb}
.pvpLeagueReward{margin-top:11px;padding:10px 14px;border:1px solid #755022;background:#1c1309;color:#e0aa5c}
.pvpResultActions{display:flex;gap:7px;flex-wrap:wrap;justify-content:center;margin-top:18px}.pvpResultActions button{width:auto!important;min-width:160px;margin:0!important}
.resultReveal{animation:resultReveal .55s cubic-bezier(.15,.85,.25,1)}
@keyframes resultReveal{0%{opacity:0;transform:scale(.82)}100%{opacity:1;transform:scale(1)}}

@media(max-width:800px){
  .challengeCardV2{grid-template-columns:1fr!important}.challengeActionsV2{justify-content:flex-start}
  .pvpArenaShell{padding:18px;min-height:540px}
  .pvpFighters{grid-template-columns:1fr 60px 1fr;gap:7px}
  .pvpVsCore>span{width:52px;height:52px;font-size:19px}
  .pvpFighterCard{padding:10px;min-height:315px}.pvpFighterAvatar .avatarProfile{width:82px;height:82px}
  .pvpFighterIdentity h3{font-size:17px}.pvpFighterStatsMini{grid-template-columns:1fr 1fr}.pvpFighterPower b{font-size:21px}
  .pvpRewardGrid{grid-template-columns:1fr 1fr}
}
@media(max-width:520px){
  .pvpArenaModal{padding:0}.pvpArenaShell{width:100%;min-height:100vh;max-height:100vh;border-left:0;border-right:0;padding:14px;padding-top:45px}
  .pvpCountdownNumber{font-size:98px}
  .pvpFighters{grid-template-columns:1fr 44px 1fr}.pvpFighterCard{min-height:285px;padding:8px}.pvpFighterAvatar .avatarProfile{width:70px;height:70px}
  .pvpFighterStatsMini{display:none}.pvpFighterIdentity h3{font-size:14px}.pvpFighterIdentity small{font-size:8px}.pvpFighterPower b{font-size:18px}
  .pvpResultStage h2{font-size:25px}.pvpResultActions{display:grid;width:100%}.pvpResultActions button{width:100%!important}
  .challengeVsMini{grid-template-columns:1fr 36px 1fr}.challengeVsMini b{font-size:12px}
}


/* ================= v4.13.0 MOBILE LIVE ================= */
.liveSyncBadge{
  width:auto!important;
  min-width:70px;
  padding:7px 9px!important;
  margin:0!important;
  border-radius:999px!important;
  background:#102419!important;
  border:1px solid #27633b!important;
  color:#72df91!important;
  font-size:9px!important;
  letter-spacing:.8px;
  line-height:1;
  box-shadow:0 0 15px rgba(54,181,89,.10);
}
.liveSyncBadge.live{animation:livePulse 2.2s ease-in-out infinite}
.liveSyncBadge.syncing{
  background:#251d0c!important;
  border-color:#78601f!important;
  color:#e5b84d!important;
  animation:liveSpinPulse .75s ease-in-out infinite alternate;
}
.liveSyncBadge.offline{
  background:#291212!important;
  border-color:#7e3030!important;
  color:#e97b7b!important;
  animation:none;
}
@keyframes livePulse{0%,100%{box-shadow:0 0 7px rgba(70,205,106,.05)}50%{box-shadow:0 0 18px rgba(70,205,106,.24)}}
@keyframes liveSpinPulse{from{opacity:.62}to{opacity:1}}

.pullRefreshIndicator{
  --pull:0px;
  position:fixed;
  z-index:1400;
  top:8px;
  left:50%;
  transform:translate(-50%,calc(-70px + var(--pull)));
  display:flex;
  align-items:center;
  gap:8px;
  padding:9px 13px;
  max-width:90vw;
  border-radius:999px;
  background:#0d1217f2;
  border:1px solid #343e47;
  color:#9ea8b1;
  box-shadow:0 8px 26px #000a;
  opacity:0;
  pointer-events:none;
  transition:opacity .12s ease,border-color .12s ease,color .12s ease;
}
.pullRefreshIndicator.visible{opacity:1}
.pullRefreshIndicator.ready{color:#78df95;border-color:#34784a}
.pullRefreshIndicator.refreshing{color:#dfad50;border-color:#795a26}
.pullRefreshIndicator span{font-size:17px;font-weight:1000}
.pullRefreshIndicator b{font-size:9px;letter-spacing:.7px;white-space:nowrap}
.pullRefreshIndicator.refreshing span{animation:pullLiveSpin .7s linear infinite}
@keyframes pullLiveSpin{to{transform:rotate(360deg)}}

@media(max-width:820px){
  html,body{
    overscroll-behavior-y:contain;
  }
  .headerRight{
    gap:5px!important;
  }
  .liveSyncBadge{
    min-width:58px;
    padding:7px!important;
    font-size:8px!important;
  }
}
@media(max-width:480px){
  .liveSyncBadge{min-width:52px;font-size:7px!important;padding:7px 5px!important}
  .pullRefreshIndicator b{font-size:8px}
}


/* ================= v4.14.0 LONG PVP FIGHT ================= */
.pvpBattleNarration{
  transition:opacity .25s ease,transform .25s ease;
  min-height:38px;
  display:flex;
  align-items:center;
  justify-content:center;
}
.pvpVsCore small{
  min-height:12px;
}
.pvpFighterCard{
  transition:transform .25s ease,box-shadow .25s ease,border-color .25s ease;
}
.arenaClash .pvpFighterCard{
  border-color:#5b4534;
}
.arenaClash .pvpFighterCard:first-child{
  box-shadow:10px 0 35px rgba(71,139,178,.10);
}
.arenaClash .pvpFighterCard:nth-child(3){
  box-shadow:-10px 0 35px rgba(191,101,43,.10);
}


/* =========================================================
   v4.14.1 — MOBILE PVP RESPONSIVE FIX
   ========================================================= */

@media (max-width:620px){

  /* Header: zostawiamy najważniejsze elementy i nie ściskamy tytułu */
  header{
    min-height:68px!important;
    height:auto!important;
    padding:9px 8px!important;
    gap:6px!important;
  }
  header>div:first-child{
    min-width:0;
    flex:1 1 auto;
  }
  header h2{
    max-width:none!important;
    font-size:16px!important;
  }
  header small{
    max-width:120px!important;
  }
  .headerRight{
    flex:0 0 auto;
    gap:4px!important;
  }
  .headerRight .avatarFrame{
    display:none!important;
  }
  .who{
    display:none!important;
  }
  .liveSyncBadge{
    min-width:52px!important;
    padding:7px 5px!important;
    font-size:7px!important;
  }
  .bellBtn{
    width:36px!important;
    height:36px!important;
    padding:0!important;
  }

  /* Arena korzysta z realnej wysokości ekranu telefonu */
  .pvpArenaModal{
    padding:0!important;
    align-items:start!important;
    overflow:hidden!important;
  }
  .pvpArenaShell{
    box-sizing:border-box!important;
    width:100%!important;
    max-width:none!important;
    min-height:100dvh!important;
    height:100dvh!important;
    max-height:100dvh!important;
    overflow-y:auto!important;
    overflow-x:hidden!important;
    border-left:0!important;
    border-right:0!important;
    border-bottom:0!important;
    padding:
      calc(46px + env(safe-area-inset-top))
      10px
      calc(18px + env(safe-area-inset-bottom))
      10px!important;
    -webkit-overflow-scrolling:touch;
  }
  .pvpArenaX{
    position:fixed!important;
    top:calc(7px + env(safe-area-inset-top))!important;
    right:8px!important;
    width:34px!important;
    height:34px!important;
    z-index:6200!important;
  }

  /* Odliczanie nie wychodzi poza ekran */
  .pvpCountdownStage{
    min-height:calc(100dvh - 90px)!important;
    padding:10px!important;
  }
  .pvpCountdownNumber{
    font-size:82px!important;
  }
  .pvpCountdownStage small{
    font-size:9px!important;
    letter-spacing:3px!important;
  }
  .pvpCountdownStage b{
    font-size:10px!important;
    letter-spacing:2px!important;
  }

  .pvpArenaTopline{
    padding:0 2px 8px!important;
    font-size:8px!important;
    letter-spacing:.7px!important;
  }

  /* Najważniejsza poprawka:
     na telefonie nie ma już 3 ciasnych kolumn: GRACZ / VS / GRACZ.
     Są 2 równe karty, a VS jest nakładką pośrodku. */
  .pvpFighters{
    position:relative!important;
    display:grid!important;
    grid-template-columns:minmax(0,1fr) minmax(0,1fr)!important;
    gap:7px!important;
    align-items:stretch!important;
    margin-top:10px!important;
  }
  .pvpFighterCard{
    min-width:0!important;
    width:100%!important;
    min-height:248px!important;
    padding:8px 6px!important;
    border-radius:3px!important;
  }
  .pvpFighterCard:first-child{
    grid-column:1!important;
  }
  .pvpFighterCard:nth-child(3){
    grid-column:2!important;
  }
  .pvpVsCore{
    position:absolute!important;
    z-index:12!important;
    left:50%!important;
    top:66px!important;
    transform:translateX(-50%)!important;
    width:38px!important;
    pointer-events:none!important;
  }
  .pvpVsCore>span{
    width:36px!important;
    height:36px!important;
    font-size:14px!important;
    border-width:1px!important;
    background:#17100bf2!important;
    box-shadow:0 0 14px rgba(190,103,31,.32)!important;
  }
  .pvpVsCore small{
    display:none!important;
  }

  .pvpFighterGlow{
    width:105px!important;
    height:105px!important;
    top:20px!important;
  }
  .pvpFighterAvatar{
    margin:4px 0 6px!important;
  }
  .pvpFighterAvatar .avatarProfile{
    width:62px!important;
    height:62px!important;
  }
  .pvpFighterIdentity{
    min-width:0!important;
  }
  .pvpFighterIdentity small{
    display:block!important;
    min-height:22px!important;
    max-height:22px!important;
    overflow:hidden!important;
    font-size:7px!important;
    line-height:11px!important;
  }
  .pvpFighterIdentity h3{
    width:100%!important;
    min-height:34px!important;
    margin:3px 0!important;
    font-size:12px!important;
    line-height:16px!important;
    overflow-wrap:anywhere!important;
  }
  .pvpFighterIdentity h3 .adminBadge{
    display:block!important;
    width:max-content!important;
    margin:2px auto 0!important;
  }
  .pvpFighterIdentity>span{
    font-size:8px!important;
  }

  .pvpFighterStatsMini{
    display:grid!important;
    grid-template-columns:1fr 1fr!important;
    gap:3px!important;
    margin:7px 0!important;
  }
  .pvpFighterStatsMini span{
    min-width:0!important;
    padding:4px 2px!important;
    font-size:6px!important;
  }
  .pvpFighterStatsMini b{
    font-size:10px!important;
    margin-top:1px!important;
  }
  .pvpFighterPower{
    padding:6px 3px!important;
  }
  .pvpFighterPower span{
    font-size:6px!important;
  }
  .pvpFighterPower b{
    font-size:17px!important;
  }

  .pvpClashZone{
    margin-top:9px!important;
    padding:9px 7px!important;
  }
  .pvpPowerTrack{
    height:11px!important;
  }
  .pvpBattleNarration{
    box-sizing:border-box!important;
    width:100%!important;
    min-height:58px!important;
    margin-top:8px!important;
    padding:4px!important;
    font-size:11px!important;
    line-height:15px!important;
    overflow-wrap:anywhere!important;
  }

  /* Wynik po walce */
  .pvpResultStage{
    min-height:calc(100dvh - 100px)!important;
    justify-content:flex-start!important;
    padding:18px 0 8px!important;
  }
  .pvpResultStamp{
    font-size:10px!important;
  }
  .pvpResultStage h2{
    width:100%!important;
    font-size:23px!important;
    line-height:28px!important;
    overflow-wrap:anywhere!important;
  }
  .pvpResultStage h2 small{
    font-size:11px!important;
    line-height:15px!important;
  }
  #pvpResultScore{
    font-size:12px!important;
  }
  .pvpRewardGrid{
    width:100%!important;
    grid-template-columns:1fr 1fr!important;
    gap:5px!important;
  }
  .pvpRewardGrid>div{
    min-width:0!important;
    padding:9px 5px!important;
  }
  .pvpRewardGrid b{
    font-size:16px!important;
  }
  .pvpLeagueReward{
    width:100%!important;
    box-sizing:border-box!important;
    font-size:11px!important;
    line-height:15px!important;
  }
  .pvpResultActions{
    display:grid!important;
    grid-template-columns:1fr!important;
    width:100%!important;
    gap:6px!important;
    margin-top:12px!important;
  }
  .pvpResultActions button{
    width:100%!important;
    min-width:0!important;
    margin:0!important;
  }

  /* Lista wyzwań też nie może się rozjeżdżać */
  .challengeCardV2{
    display:block!important;
    padding:10px!important;
  }
  .challengeVsMini{
    grid-template-columns:minmax(0,1fr) 28px minmax(0,1fr)!important;
    gap:4px!important;
  }
  .challengeVsMini>div{
    min-width:0!important;
  }
  .challengeVsMini b{
    white-space:normal!important;
    overflow-wrap:anywhere!important;
    font-size:11px!important;
    line-height:14px!important;
  }
  .challengeVsMini span{
    white-space:normal!important;
    overflow-wrap:anywhere!important;
    line-height:12px!important;
  }
  .challengeMetaV2{
    margin:9px 0!important;
  }
  .challengeActionsV2{
    display:grid!important;
    grid-template-columns:1fr!important;
    width:100%!important;
  }
  .challengeActionsV2 button{
    width:100%!important;
  }
}

@media (max-width:360px){
  .pvpArenaShell{
    padding-left:6px!important;
    padding-right:6px!important;
  }
  .pvpFighters{
    gap:4px!important;
  }
  .pvpFighterCard{
    padding-left:4px!important;
    padding-right:4px!important;
  }
  .pvpFighterAvatar .avatarProfile{
    width:54px!important;
    height:54px!important;
  }
  .pvpVsCore{
    top:59px!important;
  }
  .pvpVsCore>span{
    width:30px!important;
    height:30px!important;
    font-size:11px!important;
  }
  .pvpFighterStatsMini{
    display:none!important;
  }
  .pvpFighterCard{
    min-height:205px!important;
  }
  .pvpBattleNarration{
    font-size:10px!important;
  }
}


/* =========================================================
   v4.15.0 — MOBILE PERFORMANCE + AVATAR SETTINGS FIX
   ========================================================= */
.liveSyncBadge.paused{
  background:#191c20!important;border-color:#4c5660!important;color:#aab2ba!important;animation:none!important;
}
.settingsBusy .avatarPreset,.settingsBusy .frameChoice,.settingsBusy #vipAvatarUploadBtn{
  pointer-events:none!important;opacity:.68!important;
}
.avatarPreset.saving,.frameChoice.saving{
  border-color:#d2a747!important;box-shadow:inset 0 0 20px rgba(210,167,71,.12)!important;
}
@media(max-width:620px){
  button,.avatarPreset,.frameChoice,.chatAvatarButton,.chatNickButton{touch-action:manipulation;-webkit-tap-highlight-color:transparent}
  .settingsHero{display:grid!important;grid-template-columns:minmax(0,1fr) 76px!important;gap:10px!important;min-height:130px!important}
  .settingsHero h2{font-size:21px!important;line-height:25px!important}
  .settingsHero p{font-size:11px!important;line-height:15px!important}
  .avatarSettings{width:66px!important;height:66px!important}
  .avatarPresetGrid{grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:7px!important}
  .avatarPreset,.frameChoice{min-width:0!important;min-height:102px!important;padding:7px 4px!important;gap:5px!important}
  .avatarPresetImg,.avatarFrameDemo{width:58px!important;height:58px!important}
  .avatarPreset b,.frameChoice b{font-size:10px!important;line-height:13px!important;overflow-wrap:anywhere}
  .profileFrameGrid{grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:7px!important}
  #vipAvatarFile{box-sizing:border-box!important;max-width:100%!important;font-size:12px!important}
  /* Animowane, duże cienie kilku ramek naraz są kosztowne na telefonie. */
  #settings .frame-vip-gold,#settings .frame-vip-neon,#settings .frame-vip-crimson,#settings .frame-vip-diamond{animation:none!important}
  #settings .frame-vip-gold{box-shadow:0 0 0 2px #4c3811,0 0 10px #d0a83c66!important}
  #settings .frame-vip-neon{box-shadow:0 0 0 2px #103947,0 0 10px #42c7ff66!important}
  #settings .frame-vip-crimson{box-shadow:0 0 0 2px #52151a,0 0 10px #e42f3a66!important}
  #settings .frame-vip-diamond{box-shadow:0 0 0 2px #526a80,0 0 10px #a6d8ff66!important}
  /* Mniej kosztownych animacji w zwykłym mobilnym interfejsie. */
  .liveSyncBadge.live{animation:none!important}
  .art-banner.vip-active .art-overlay h1{animation:none!important}
  .page{contain:layout style paint}
  .page.hidden{display:none!important}
}
@media(max-width:360px){
  .settingsHero{grid-template-columns:minmax(0,1fr) 60px!important}.avatarSettings{width:54px!important;height:54px!important}
  .avatarPresetImg,.avatarFrameDemo{width:52px!important;height:52px!important}
}


/* =========================================================
   v4.15.1 — MOBILE STABILITY / NATIVE SCROLL FIX
   ========================================================= */
@media(max-width:900px){
  html,body{
    overscroll-behavior-y:auto!important;
    touch-action:auto!important;
  }
  body{
    overflow-y:auto!important;
    -webkit-overflow-scrolling:touch;
  }

  /* Własny pull-to-refresh został wyłączony.
     Telefon korzysta z normalnego przewijania / odświeżania przeglądarki. */
  .pullRefreshIndicator{
    display:none!important;
  }

  /* Zwykłe elementy interfejsu nie są obejmowane contain:paint,
     które na części mobilnych przeglądarek powodowało problemy z dotykiem. */
  .page{
    contain:none!important;
  }

  /* LIVE nie powinien przejmować szerokości nagłówka. */
  .liveSyncBadge{
    position:relative;
    z-index:2;
  }

  /* Ustawienia profilu zawsze przewijalne i klikalne. */
  #settings{
    overflow:visible!important;
    touch-action:auto!important;
  }
  #settings .avatarPresetGrid,
  #settings .profileFrameGrid,
  #settings .avatarPreset,
  #settings .frameChoice,
  #settings input,
  #settings button{
    touch-action:manipulation!important;
  }
}

/* Po zapisie tylko kliknięta operacja jest blokowana przez JS.
   Nie nakładamy niewidzialnych warstw na całą stronę. */
.settingsBusy{
  pointer-events:auto!important;
}