/* ── JD Arena site style layer ──
   Loaded last on every player page (after ui.css). Colour rules, kept deliberately small:
   - ONE accent: the brand gold. Used for the primary button, active states, key numbers.
   - Neutral greys for everything structural (lines, borders, card frames).
   - Red means LIVE (or danger) and nothing else.
   - Two corner sizes: 6px for controls and tags, 10px for cards and panels.
   - Condensed uppercase only on display headings, the LIVE/NEXT bug and card status tabs;
     buttons, tabs and chips stay in normal case. Uppercase/letter-spacing for English only
     (Nepali sets <html lang="ne">; letter-spacing breaks Devanagari conjuncts).
   Selectors are scoped to page sections (dialogs reuse .btn-primary / .lang-btn), never
   touch 💬 Messages (.dm-*) or the squad effects themselves (.sqfx). */
:root{
  --bc-gold:#FFC83D;--bc-gold-2:#F5B32A;
  --bc-live:#E5484D;
  --bc-line:rgba(255,255,255,.09);--bc-line-2:rgba(255,255,255,.14);
  --bc-panel:#10141D;--bc-muted:#8A94A8;
  --bc-r-sm:6px;--bc-r:10px;
  --bc-display:'Barlow Condensed','Mukta',sans-serif;
}

/* header: one quiet hairline */
body>header{position:relative}
body>header::after{content:'';position:absolute;left:0;right:0;bottom:-1px;height:1px;background:var(--bc-line);pointer-events:none}

/* section titles: condensed uppercase title, short gold mark, hairline, quiet tag text */
.sec-h{align-items:center}
.sec-h h1,.sec-h h2{position:relative;padding-left:16px;font-family:var(--bc-display);line-height:1}
.sec-h h1::before,.sec-h h2::before{content:'';position:absolute;left:0;top:10%;bottom:10%;width:4px;border-radius:2px;background:var(--bc-gold)}
html:not([lang="ne"]) .sec-h h1,html:not([lang="ne"]) .sec-h h2{text-transform:uppercase;letter-spacing:.01em}
.sec-h .ln{height:1px;background:var(--bc-line)}
.sec-h .tag{flex:none;color:var(--bc-muted);font-weight:600;font-size:.74rem;white-space:nowrap}

/* ── homepage hero ── */
html:not([lang="ne"]) .hero h1{text-transform:uppercase;letter-spacing:0}
.hero .eye{color:var(--bc-gold);font-weight:600}
.hero .btns .btn-primary{border-radius:var(--bc-r-sm);background:var(--bc-gold);box-shadow:none}
.hero .btns .btn-primary:hover{background:#FFD45E;transform:translateY(-1px);box-shadow:none}
.hero .btns .btn-ghost{border-radius:var(--bc-r-sm);background:rgba(10,12,18,.7);backdrop-filter:none;border-color:var(--bc-line-2)}
.hero .btns .btn-ghost:hover{border-color:rgba(255,255,255,.35);background:rgba(10,12,18,.85);transform:translateY(-1px)}

/* hero stats: a plain scoreboard */
.arena-stats{border-radius:var(--bc-r);overflow:hidden;background:rgba(10,13,20,.92);backdrop-filter:none;border-color:var(--bc-line-2);box-shadow:none}
.arena-stats .stat{border-color:var(--bc-line)}
.arena-stats .stat b{font-size:2.3rem;color:#fff}
.arena-stats .stat span{color:var(--bc-muted)}
@media(max-width:900px){.arena-stats{position:relative}}

/* LIVE / NEXT bug (top of the hero): red only when something is really live */
.bc-bug{display:flex;width:fit-content;align-items:stretch;margin:0 0 18px;max-width:100%;font-family:var(--bc-display);color:#fff;text-decoration:none;border-radius:var(--bc-r-sm);overflow:hidden;border:1px solid var(--bc-line-2);background:rgba(10,13,20,.88)}
.bc-bug[hidden]{display:none}
.bc-bug .bc-tag{display:flex;align-items:center;gap:8px;padding:6px 12px;background:var(--bc-live);font-weight:700;font-size:1rem;letter-spacing:.06em}
.bc-bug.next .bc-tag{background:transparent;color:var(--bc-gold);border-right:1px solid var(--bc-line-2)}
.bc-bug .bc-dot{width:8px;height:8px;border-radius:50%;background:#fff;animation:bcBlink 1.4s ease-in-out infinite}
.bc-bug .bc-name{display:flex;align-items:center;padding:6px 12px;font-weight:700;font-size:1.05rem;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.bc-bug .bc-time{display:flex;align-items:center;padding:6px 12px;border-left:1px solid var(--bc-line);font-weight:700;font-size:1.05rem;font-variant-numeric:tabular-nums;color:#DDE3EE;white-space:nowrap}
.bc-bug:hover .bc-name{color:var(--bc-gold)}
.bc-bug:focus-visible{outline:2px solid #fff;outline-offset:3px}
@keyframes bcBlink{50%{opacity:.3}}

/* ticker along the bottom of the hero */
.bc-ticker{position:absolute;left:0;right:0;bottom:0;z-index:2;display:flex;align-items:stretch;height:40px;background:rgba(8,10,15,.94);border-top:1px solid var(--bc-line);overflow:hidden}
.bc-ticker[hidden]{display:none}
.bc-tk-label{flex:none;display:flex;align-items:center;padding:0 16px;border-right:1px solid var(--bc-line);color:var(--bc-muted);font:700 .9rem var(--bc-display);letter-spacing:.06em;text-transform:uppercase}
.bc-tk-view{flex:1;min-width:0;overflow:hidden;display:flex;align-items:center;-webkit-mask-image:linear-gradient(90deg,transparent,#000 24px,#000 calc(100% - 40px),transparent);mask-image:linear-gradient(90deg,transparent,#000 24px,#000 calc(100% - 40px),transparent)}
.bc-tk-track{display:flex;flex:none;align-items:center;white-space:nowrap;animation:bcScroll var(--bc-dur,40s) linear infinite;will-change:transform}
.bc-ticker:hover .bc-tk-track,.bc-ticker:focus-within .bc-tk-track{animation-play-state:paused}
.bc-tk-set{display:flex;flex:none;align-items:center}
.bc-tk-item{display:inline-flex;align-items:center;gap:8px;padding:0 24px 0 20px;font-size:.84rem;color:#B9C1CF}
.bc-tk-item b{color:#fff;font-weight:600}
.bc-tk-item em{font-style:normal;color:var(--bc-gold);font-weight:700}
.bc-tk-item::before{content:'';width:4px;height:4px;flex:none;border-radius:50%;background:#4A5366}
@keyframes bcScroll{from{transform:translateX(0)}to{transform:translateX(-50%)}}
.hero.has-ticker{padding-bottom:110px}
.hero.has-ticker .arena-stats{bottom:70px}
@media(max-width:900px){
  .hero.has-ticker{padding-bottom:62px}
  .hero.has-ticker .arena-stats{bottom:auto}
}
@media(max-width:640px){
  .bc-bug{margin-bottom:16px}
  .bc-bug .bc-tag,.bc-bug .bc-name,.bc-bug .bc-time{padding:5px 9px;font-size:.92rem}
  .bc-ticker{height:38px}
  .bc-tk-label{padding:0 12px;font-size:.82rem}
  .bc-tk-item{font-size:.78rem}
}

/* feature cards under the hero: they used to tuck 30px up into the hero; with the ticker there they sit below it */
.hero.has-ticker+.wrap .feature-strip{margin-top:22px}
.feature-strip .feature-card{border-radius:var(--bc-r);background:var(--bc-panel);border-color:var(--bc-line);backdrop-filter:none}
.feature-strip .feature-card:hover{border-color:var(--bc-line-2)}

/* tournament cards: calm frame, solid status tabs (gold upcoming, red live, grey done) */
.arena-grid .tcard{border-radius:var(--bc-r)}
.arena-grid .tcard .tbadge{border:0;border-radius:4px;padding:3px 9px;color:#14110A;background:var(--bc-gold);animation:none}
.arena-grid .tcard .tbadge.live{color:#fff;background:var(--bc-live)}
.arena-grid .tcard .tbadge.completed{color:#C9D0DD;background:#262D3B}
.arena-grid .tcard .tbadge.cancelled{color:#E5A3A6;background:rgba(229,72,77,.14)}
html:not([lang="ne"]) .arena-grid .tcard .tbadge{text-transform:uppercase;letter-spacing:.06em}
.arena-grid .tcard .tname{font-family:var(--bc-display)}
html:not([lang="ne"]) .arena-grid .tcard .tname{text-transform:uppercase;letter-spacing:.01em}

/* other pages: leaderboard tabs, past events */
.lb-tabs{margin-bottom:22px}
.lb-tabs button{border-radius:var(--bc-r-sm)}
.lb-tabs button[aria-selected="true"]{background:var(--bc-gold);color:#14110A}
.pe-head h1{font-family:var(--bc-display)}
html:not([lang="ne"]) .pe-head h1{text-transform:uppercase}

@media(prefers-reduced-motion:reduce){
  .bc-bug .bc-dot{animation:none}
  /* a static strip you can scroll sideways, starting at the first item (the copy is hidden) */
  .bc-tk-track{animation:none;transform:none}
  .bc-tk-view{overflow-x:auto;scrollbar-width:none;-webkit-mask-image:none;mask-image:none}
  .bc-tk-view::-webkit-scrollbar{display:none}
  .bc-tk-track [aria-hidden="true"]{display:none}
}

/* ── profile + wallet ── */
.pg-profile .top,.pg-wallet .top{padding-bottom:12px;margin-bottom:8px;border-bottom:1px solid var(--bc-line)}
.pg-profile .card,.pg-wallet .card{border-radius:var(--bc-r);border-color:var(--bc-line)}
.pg-profile .card h2,.pg-wallet .card h2{font-family:var(--bc-display)}
html:not([lang="ne"]) .pg-profile .card h2,html:not([lang="ne"]) .pg-wallet .card h2{text-transform:uppercase;letter-spacing:.02em}
.pg-profile .card h2 a,.pg-wallet .card h2 a{text-transform:none;letter-spacing:0}
.pg-profile .btn,.pg-wallet .btn{border-radius:var(--bc-r-sm)}
.pg-profile .btn:not(.ghost):not(.danger),.pg-wallet .btn:not(.ghost):not(.wa){background:var(--bc-gold)}
.pg-profile .pill,.pg-wallet .pill{border-radius:4px}

/* profile hero = player card: page title mark, square avatar, segmented rank bar */
.pg-profile .hero,.pg-wallet .hero{border-radius:var(--bc-r);border-color:var(--bc-line-2);background:var(--bc-panel)}
.pg-profile .av img{border-radius:var(--bc-r)}
html:not([lang="ne"]) .pg-profile .who h1{text-transform:uppercase;letter-spacing:.01em}
.pg-profile .rank{border-radius:var(--bc-r-sm);background:rgba(0,0,0,.3);border-color:var(--bc-line)}
.pg-profile .rank-top b{color:var(--bc-gold);font-size:1.25rem}
html:not([lang="ne"]) .pg-profile .rank-top b{text-transform:uppercase;letter-spacing:.04em}
.pg-profile .bar{position:relative;height:10px;border-radius:3px;margin-top:10px}
.pg-profile .bar i{border-radius:0;background:var(--bc-gold)}
.pg-profile .bar::after{content:'';position:absolute;inset:0;pointer-events:none;background:repeating-linear-gradient(90deg,transparent 0 calc(10% - 2px),#10141D calc(10% - 2px) 10%)}
.pg-profile .stat,.pg-wallet .stat{border-radius:var(--bc-r-sm);border-color:var(--bc-line);background:rgba(0,0,0,.28)}
.pg-profile .stat b{font-size:1.8rem}
.pg-profile .squad img,.pg-profile .squad .ph{border-radius:var(--bc-r)}
.pg-profile .trow .ic,.pg-wallet .ic{border-radius:var(--bc-r-sm)}

/* wallet: page title, quiet balance card, gold active tab */
.pg-wallet .wrap>h1{position:relative;padding-left:16px;font-family:var(--bc-display)}
.pg-wallet .wrap>h1::before{content:'';position:absolute;left:0;top:10%;bottom:10%;width:4px;border-radius:2px;background:var(--bc-gold)}
html:not([lang="ne"]) .pg-wallet .wrap>h1{text-transform:uppercase}
.pg-wallet .hero::after{display:none}
.pg-wallet .live{display:none}
.pg-wallet .tab{border-radius:var(--bc-r-sm)}
.pg-wallet .tab.on{background:var(--bc-gold);box-shadow:none}
.pg-wallet .row .amt{font-size:1.45rem}

/* Notifications (homepage overlay): unread gets the gold edge, read ones stay neutral */
#notif-overlay h3{font-family:var(--bc-display);font-size:1.6rem}
html:not([lang="ne"]) #notif-overlay h3{text-transform:uppercase;letter-spacing:.02em}
#notif-overlay .notif-item{border-radius:var(--bc-r);border-color:var(--bc-line)}
#notif-overlay .notif-item.unread{border-color:rgba(255,200,61,.35);background:rgba(255,200,61,.04);box-shadow:inset 3px 0 0 var(--bc-gold)}
#notif-overlay .notif-item .ni-ic,#notif-overlay .notif-item[class*=" k-"] .ni-ic{border-radius:var(--bc-r-sm);background:rgba(255,255,255,.05)}
#notif-overlay .notif-day{display:flex;align-items:center;gap:10px;color:var(--bc-muted)}
#notif-overlay .notif-day::after{content:'';flex:1;height:1px;background:var(--bc-line)}
#notif-overlay .notif-chips button{border-radius:var(--bc-r-sm)}
#notif-overlay .notif-item .ni-go{border-radius:var(--bc-r-sm)}

/* ── squad effects shop (#fx-overlay): a colour swatch on every effect so players pick by
   look (the swatches ARE the product colours), and a quiet "Live preview" label.
   The effects themselves (effects.css / effects-pro.css / fx-engine.js) are separate. ── */
#fx-overlay h3{font-family:var(--bc-display);font-size:1.6rem}
html:not([lang="ne"]) #fx-overlay h3{text-transform:uppercase;letter-spacing:.02em}
#fx-overlay .fx-plan{border-radius:var(--bc-r)}
#fx-overlay .fx-pick button{display:flex;align-items:center;justify-content:center;gap:7px;border-radius:var(--bc-r-sm)}
#fx-overlay .fx-pick button::before{content:'';flex:none;width:12px;height:12px;border-radius:50%;background:var(--sw,#888)}
#fx-overlay .fx-pick button.lock::before{opacity:.35}
#fx-overlay .fx-pick [data-fx="glow"]{--sw:linear-gradient(135deg,#fff3c4,#ffc83d)}
#fx-overlay .fx-pick [data-fx="steel"]{--sw:linear-gradient(135deg,#ffffff,#7d8898)}
#fx-overlay .fx-pick [data-fx="gold"]{--sw:linear-gradient(135deg,#fff6d6,#ffd24a 50%,#c98a00)}
#fx-overlay .fx-pick [data-fx="fire"]{--sw:linear-gradient(135deg,#ffd166,#ff6b3d)}
#fx-overlay .fx-pick [data-fx="ice"]{--sw:linear-gradient(135deg,#e6faff,#5fd3ff)}
#fx-overlay .fx-pick [data-fx="neon"]{--sw:linear-gradient(135deg,#c86bff,#ff5fd2)}
#fx-overlay .fx-pick [data-fx="rainbow"]{--sw:conic-gradient(#ff5f6d,#ffc371,#5fff9a,#5fd3ff,#c86bff,#ff5f6d)}
#fx-overlay .fx-pick [data-fx="galaxy"]{--sw:radial-gradient(circle at 30% 30%,#fff 0 8%,#8f6bff 30%,#2a1660)}
#fx-overlay .fx-pick [data-fx="thunder"]{--sw:linear-gradient(135deg,#ffffff,#4fd8ff)}
#fx-overlay .fx-pick [data-fx="bullets"]{--sw:linear-gradient(135deg,#fff2c0,#ff7a1a)}
#fx-overlay .fx-pick [data-fx="blade"]{--sw:linear-gradient(135deg,#ffffff,#c9d2de 45%,#ff5a6a)}
#fx-overlay .fx-pick [data-fx="legend"]{--sw:conic-gradient(#ffe38a,#ffc2f0,#c4f3ff,#9ff5c8,#ffe38a)}
#fx-overlay .fx-prev-lbl{display:block;margin:14px 0 6px;color:var(--bc-muted);font-size:.74rem;font-weight:600}