/* ═══════════════════════════════════════════════
   ماتين القادة v16 — Feature Rich + Bug Fixes
   Focus: scroll progress, char bars, account UX, new features
   ═══════════════════════════════════════════════ */

:root{
  --bg-0:#050507;--bg-1:#0a0b10;--bg-2:#0f1118;--bg-3:#151721;--bg-4:#1c1f2c;
  --glass:rgba(15,17,24,0.72);--glass-h:rgba(15,17,24,0.85);
  --bdr:rgba(201,168,76,0.07);--bdr-g:rgba(201,168,76,0.18);--bdr-h:rgba(201,168,76,0.32);
  --gold:#c9a84c;--gold-l:#e8d48b;--gold-b:#f5e6a3;--gold-d:#8a6d22;
  --glow:rgba(201,168,76,0.35);--gshadow:0 0 28px rgba(201,168,76,0.12);
  --red:#8b1a1a;--red-b:#c0392b;--red-glow:rgba(139,26,26,0.35);
  --green:#27ae60;--blue:#5865F2;--amber:#e67e22;
  --t1:#e8e4dc;--t2:#8a8578;--t3:#4e4a42;
  --ft:'Cinzel',serif;--fa:'Noto Kufi Arabic',sans-serif;--fb:'Amiri',serif;--fm:'Fira Code',monospace;
  --r:8px;--rl:14px;--tr:.25s cubic-bezier(.4,0,.2,1);--tr-bounce:.4s cubic-bezier(.34,1.56,.64,1);
}
*,*::before,*::after{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:80px}
::selection{background:rgba(201,168,76,.25);color:var(--t1)}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;scroll-behavior:auto!important}.reveal,.an{opacity:1!important;transform:none!important}}
body{font-family:var(--fa);background:var(--bg-0);color:var(--t1);line-height:1.8;direction:rtl;overflow-x:hidden;min-height:100vh}
::-webkit-scrollbar{width:6px}::-webkit-scrollbar-track{background:var(--bg-0)}::-webkit-scrollbar-thumb{background:rgba(201,168,76,.15);border-radius:3px}::-webkit-scrollbar-thumb:hover{background:rgba(201,168,76,.3)}
html{scrollbar-color:rgba(201,168,76,.15) var(--bg-0);scrollbar-width:thin}
body::before{content:'';position:fixed;inset:0;pointer-events:none;z-index:0;
  background:radial-gradient(ellipse 60% 40% at 15% 25%,rgba(139,26,26,.03) 0%,transparent 60%),radial-gradient(ellipse 50% 35% at 85% 70%,rgba(201,168,76,.02) 0%,transparent 50%)}
body::after{content:'';position:fixed;inset:0;pointer-events:none;z-index:0;opacity:.02;
  background-image:url("data:image/svg+xml,%3Csvg width='60' height='60' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M30 0L60 30L30 60L0 30z' fill='none' stroke='%23c9a84c' stroke-width='.3'/%3E%3C/svg%3E");background-size:60px 60px}
a{color:var(--gold);text-decoration:none;transition:color var(--tr)}a:hover{color:var(--gold-l)}
#bgCanvas{position:fixed;inset:0;z-index:0;pointer-events:none;opacity:.45}

/* ═══ PAGE LOAD ═══ */
.page-loader{position:fixed;top:0;left:0;width:100%;height:2px;background:linear-gradient(90deg,transparent,var(--gold),var(--gold-l),var(--gold),transparent);z-index:9999;transform-origin:right;animation:pageLoad .9s ease forwards}
@keyframes pageLoad{0%{transform:scaleX(0);opacity:1}70%{transform:scaleX(1);opacity:1}100%{transform:scaleX(1);opacity:0}}

/* ═══ SCROLL PROGRESS BAR ═══ */
.scroll-progress{position:fixed;top:0;right:0;height:2px;background:linear-gradient(90deg,var(--gold-d),var(--gold),var(--gold-l));z-index:1001;width:0;transition:none;pointer-events:none;box-shadow:0 0 6px var(--glow)}

/* ═══ SCROLL-AWARE NAV ═══ */
.nav{position:fixed;top:0;width:100%;z-index:1000;transition:all .35s ease;background:rgba(5,5,7,.65);backdrop-filter:blur(12px);border-bottom:1px solid transparent}
.nav.scrolled{background:rgba(5,5,7,.95);backdrop-filter:blur(20px) saturate(1.3);border-bottom-color:var(--bdr);box-shadow:0 2px 20px rgba(0,0,0,.3)}
.nav.hide-up{transform:translateY(-100%)}
.nav-in{max-width:1140px;margin:0 auto;display:flex;justify-content:space-between;align-items:center;padding:0 1.5rem;height:58px}
.logo{display:flex;align-items:center;gap:.55rem;text-decoration:none}
.logo-ic{width:32px;height:32px;background:linear-gradient(135deg,var(--gold),var(--gold-d));border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:.85rem;box-shadow:0 0 12px var(--glow);transition:all var(--tr)}
.logo:hover .logo-ic{box-shadow:0 0 22px var(--glow);transform:scale(1.05)}
.logo-tx{font-family:var(--fa);font-size:.95rem;font-weight:800;color:var(--gold);letter-spacing:.5px}
.logo-tx small{color:var(--t3);font-weight:400;font-size:.58rem;display:block;margin-top:-2px;letter-spacing:0}
.nlinks{display:flex;gap:.1rem;list-style:none;align-items:center}
.nlinks a{font-size:.74rem;font-weight:500;color:var(--t2);padding:.38rem .7rem;border-radius:5px;transition:all var(--tr);position:relative}
.nlinks a:hover,.nlinks a.on{color:var(--gold);background:rgba(201,168,76,.05)}
.nlinks a.on::after{content:'';position:absolute;bottom:1px;right:50%;transform:translateX(50%);width:14px;height:1.5px;border-radius:1px;background:var(--gold);box-shadow:0 0 6px var(--glow)}
.nbtn{display:inline-flex;align-items:center;gap:.25rem;font-family:var(--fa);font-size:.7rem;font-weight:600;padding:.35rem .75rem;border-radius:5px;border:none;cursor:pointer;transition:all var(--tr);text-decoration:none}
.nbtn-gold{background:var(--gold);color:var(--bg-0)}.nbtn-gold:hover{box-shadow:var(--gshadow);color:var(--bg-0);transform:translateY(-1px)}
.nbtn-out{background:0;border:1px solid var(--bdr);color:var(--t2)}.nbtn-out:hover{border-color:var(--gold);color:var(--gold)}
.ncash{font-family:var(--fm);font-size:.72rem;color:var(--gold);background:rgba(201,168,76,.05);border:1px solid rgba(201,168,76,.1);padding:.28rem .6rem;border-radius:4px;white-space:nowrap}
.ntoggle{display:none;background:0;border:0;color:var(--gold);font-size:1.1rem;cursor:pointer;padding:.3rem;width:34px;height:34px;border-radius:5px;transition:all var(--tr);align-items:center;justify-content:center}
.ntoggle:hover{background:rgba(201,168,76,.06)}
.sdot{display:inline-block;width:6px;height:6px;border-radius:50%;margin-left:.25rem;vertical-align:middle}
.sdot.on{background:var(--green);box-shadow:0 0 8px rgba(39,174,96,.5);animation:blink 2.5s infinite}
.sdot.off{background:var(--red-b);box-shadow:0 0 6px var(--red-glow)}
@keyframes blink{0%,100%{opacity:1}50%{opacity:.15}}

/* ═══ BUTTONS ═══ */
.btn{display:inline-flex;align-items:center;gap:.4rem;font-family:var(--fa);font-size:.82rem;font-weight:700;padding:.7rem 1.5rem;border-radius:var(--r);border:none;cursor:pointer;transition:all var(--tr);text-decoration:none;position:relative;overflow:hidden}
.btn::before{content:'';position:absolute;inset:0;background:linear-gradient(135deg,rgba(255,255,255,.08),transparent 50%);opacity:0;transition:opacity var(--tr)}.btn:hover::before{opacity:1}
.btn-gold{background:linear-gradient(135deg,var(--gold-d),var(--gold));color:var(--bg-0);box-shadow:0 3px 16px var(--glow)}.btn-gold:hover{transform:translateY(-2px);box-shadow:0 6px 28px var(--glow);color:var(--bg-0)}
.btn-red{background:linear-gradient(135deg,var(--red),var(--red-b));color:var(--t1);box-shadow:0 3px 14px var(--red-glow)}.btn-red:hover{transform:translateY(-2px);box-shadow:0 6px 24px var(--red-glow);color:#fff}
.btn-ghost{background:0;color:var(--t1);border:1px solid var(--bdr)}.btn-ghost:hover{border-color:var(--gold);color:var(--gold);transform:translateY(-2px)}
.btn-discord{background:#5865F2;color:#fff}.btn-discord:hover{transform:translateY(-2px);box-shadow:0 6px 20px rgba(88,101,242,.28);color:#fff}
.btn-lg{padding:.85rem 2rem;font-size:.88rem}.btn-sm{padding:.38rem .85rem;font-size:.72rem}
.btn-block{width:100%;justify-content:center}
.btn:disabled{opacity:.2;cursor:not-allowed;transform:none!important;box-shadow:none!important}
.btn:active:not(:disabled){transform:translateY(0)!important;transition-duration:.08s}
.btn.submitting{opacity:.5;pointer-events:none}.btn.submitting::after{content:'';display:inline-block;width:12px;height:12px;border:2px solid;border-color:transparent currentColor currentColor;border-radius:50%;animation:spin .5s linear infinite;margin-right:.4rem}
@keyframes spin{to{transform:rotate(360deg)}}

/* ═══ HERO ═══ */
.hero{position:relative;z-index:1;min-height:100vh;display:flex;align-items:center;justify-content:center;text-align:center;padding:95px 1.5rem 45px}
.hero-c{position:relative;max-width:680px}
.hero-badge{display:inline-flex;align-items:center;gap:.4rem;font-family:var(--fm);font-size:.65rem;color:var(--gold);background:rgba(201,168,76,.04);border:1px solid rgba(201,168,76,.09);padding:.28rem .9rem;border-radius:50px;margin-bottom:1.6rem}
.hero h1{font-family:var(--fa);font-size:clamp(2rem,5.5vw,3.5rem);font-weight:900;line-height:1.15;margin-bottom:.4rem}
.hero h1 .glow{background:linear-gradient(135deg,var(--gold-d),var(--gold),var(--gold-l),var(--gold));background-size:300% 300%;-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;animation:gs 6s ease infinite;filter:drop-shadow(0 0 18px rgba(201,168,76,.12))}
@keyframes gs{0%,100%{background-position:0% 50%}50%{background-position:100% 50%}}
.hero-en{font-family:var(--ft);font-size:.72rem;letter-spacing:5px;text-transform:uppercase;color:var(--t3);margin-bottom:1.3rem}
.hero p{font-size:.95rem;color:var(--t2);max-width:460px;margin:0 auto 2rem;line-height:2}
.hero-acts{display:flex;gap:.55rem;justify-content:center;flex-wrap:wrap}
.hero-stats{display:grid;grid-template-columns:repeat(4,1fr);gap:.8rem;margin-top:3rem;max-width:500px;margin-left:auto;margin-right:auto}
.hstat{text-align:center;padding:.7rem .4rem;background:var(--glass);backdrop-filter:blur(6px);border:1px solid var(--bdr);border-radius:var(--r);transition:all .3s ease}
.hstat:hover{border-color:var(--bdr-g);transform:translateY(-3px);box-shadow:0 6px 20px rgba(0,0,0,.25)}
.hstat-v{font-family:var(--fm);font-size:1.1rem;font-weight:600;display:block;color:var(--gold);transition:color .3s}
.hstat-v.live{color:var(--green)}
.hstat-l{font-size:.58rem;color:var(--t3);font-weight:500;letter-spacing:.3px;margin-top:.05rem}

/* ═══ Event Countdown ═══ */
.event-bar{position:relative;z-index:1;padding:.7rem 1.5rem;background:linear-gradient(135deg,rgba(139,26,26,.12),rgba(201,168,76,.06));border-top:1px solid rgba(201,168,76,.06);border-bottom:1px solid rgba(201,168,76,.06);text-align:center}
.event-bar-title{font-size:.82rem;font-weight:700;color:var(--gold);margin-bottom:.3rem}
.event-bar-countdown{display:inline-flex;gap:.8rem}
.event-bar-unit{text-align:center}
.event-bar-num{font-family:var(--fm);font-size:1.3rem;font-weight:600;color:var(--t1);display:block;min-width:36px;transition:transform .3s}
.event-bar-lbl{font-size:.55rem;color:var(--t3);text-transform:uppercase;letter-spacing:.5px}

/* ═══ SECTIONS ═══ */
.sec{position:relative;z-index:1;padding:65px 1.5rem}
.wrap{max-width:1100px;margin:0 auto}
.sh{text-align:center;margin-bottom:2.5rem}
.sh h2{font-family:var(--fa);font-size:clamp(1.2rem,3vw,1.7rem);font-weight:800;margin-bottom:.35rem}
.sh h2 .hl{color:var(--gold)}
.sh p{color:var(--t2);font-size:.85rem;max-width:380px;margin:0 auto}
.sh-line{width:50px;height:1.5px;background:linear-gradient(90deg,transparent,var(--gold),transparent);margin:.7rem auto 0}
.ornament{text-align:center;padding:.8rem 0;color:var(--t3);font-size:.6rem;letter-spacing:8px}

/* ═══ REVEAL ANIMATIONS (IntersectionObserver) ═══ */
.reveal,.an{opacity:0;transform:translateY(20px);transition:opacity .6s ease,transform .6s ease}
.reveal.visible,.an.visible{opacity:1;transform:translateY(0)}
.reveal-d1,.an1{transition-delay:.08s}.reveal-d2,.an2{transition-delay:.16s}.reveal-d3,.an3{transition-delay:.24s}.reveal-d4{transition-delay:.32s}.reveal-d5{transition-delay:.4s}

/* ═══ CARDS ═══ */
.fgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:.9rem}
.fcard{background:var(--glass);backdrop-filter:blur(6px);border:1px solid var(--bdr);border-radius:var(--rl);padding:1.4rem;transition:all .3s ease;position:relative;overflow:hidden}
.fcard::after{content:'';position:absolute;top:-1px;right:0;left:0;height:1.5px;background:linear-gradient(90deg,transparent,var(--gold),transparent);opacity:0;transition:opacity .3s}
.fcard:hover{border-color:var(--bdr-g);transform:translateY(-4px);box-shadow:0 10px 35px rgba(0,0,0,.3),inset 0 1px 0 rgba(201,168,76,.04)}.fcard:hover::after{opacity:.6}
.fcard-i{font-size:1.3rem;margin-bottom:.5rem;display:block}
.fcard h3{font-size:.84rem;font-weight:700;margin-bottom:.2rem}
.fcard p{font-size:.76rem;color:var(--t2);line-height:1.8}

/* ═══ NEWS ═══ */
.news-list{display:flex;flex-direction:column;gap:.7rem}
.news-item{display:flex;gap:1rem;align-items:flex-start;padding:1rem 1.3rem;background:var(--glass);border:1px solid var(--bdr);border-radius:var(--r);transition:all var(--tr)}
.news-item:hover{border-color:var(--bdr-g);transform:translateX(-3px)}
.news-item.pinned{border-color:rgba(201,168,76,.15);background:rgba(201,168,76,.02)}
.news-date{flex-shrink:0;text-align:center;min-width:44px;padding:.35rem .5rem;border-radius:5px;background:rgba(201,168,76,.05);border:1px solid rgba(201,168,76,.08)}
.news-date-d{font-family:var(--fm);font-size:1rem;font-weight:600;color:var(--gold);display:block}
.news-date-m{font-size:.55rem;color:var(--t3);text-transform:uppercase;font-family:var(--fa);letter-spacing:0}
.news-body h3{font-size:.85rem;font-weight:700;margin-bottom:.15rem;color:var(--t1)}
.news-body p{font-size:.76rem;color:var(--t2);line-height:1.7}
.news-body p.news-full{display:none}.news-body.expanded p.news-preview{display:none}.news-body.expanded p.news-full{display:block}
.news-toggle{font-size:.68rem;color:var(--gold);cursor:pointer;margin-top:.2rem;display:inline-block;transition:color var(--tr)}.news-toggle:hover{color:var(--gold-l)}
.nbadge{font-family:var(--fm);font-size:.52rem;font-weight:600;padding:.08rem .35rem;border-radius:3px;margin-left:.3rem;vertical-align:middle}
.nbadge-update{background:var(--gold);color:var(--bg-0)}.nbadge-event{background:var(--red-b);color:#fff}.nbadge-info{background:var(--blue);color:#fff}
.pin-icon{font-size:.6rem;color:var(--gold);margin-left:.2rem}

/* ═══ RANKINGS ═══ */
.rank-tabs{display:flex;gap:.25rem;justify-content:center;margin-bottom:1rem}
.rtab{font-size:.75rem;font-weight:600;padding:.4rem .9rem;border-radius:50px;background:var(--bg-4);border:1px solid var(--bdr);color:var(--t2);cursor:pointer;transition:all var(--tr);text-decoration:none}
.rtab:hover{color:var(--gold);border-color:rgba(201,168,76,.12)}.rtab.on{background:var(--gold);color:var(--bg-0);border-color:var(--gold);box-shadow:0 2px 10px var(--glow)}
.rtable{width:100%;border-collapse:collapse;font-size:.8rem}
.rtable th{font-weight:700;color:var(--t2);text-align:right;padding:.6rem .7rem;border-bottom:2px solid var(--bdr);font-size:.67rem;text-transform:uppercase;letter-spacing:.5px}
.rtable td{padding:.55rem .7rem;border-bottom:1px solid var(--bdr);color:var(--t2);transition:all var(--tr)}
.rtable tr:hover td{background:rgba(201,168,76,.02);transform:translateX(-2px)}
.rtable tr:first-child td{background:rgba(201,168,76,.03)}.rtable tr:nth-child(2) td{background:rgba(201,168,76,.015)}
.rn{font-family:var(--fm);font-weight:600;color:var(--t3);width:32px}
.r1{color:var(--gold)!important;font-size:.95rem}.r2{color:#c0c0c0!important}.r3{color:#cd7f32!important}
.rname{color:var(--t1)!important;font-weight:600}.rlvl{font-family:var(--fm);color:var(--gold)}

/* ═══ FORMS ═══ */
.auth-wrap{min-height:100vh;display:flex;align-items:center;justify-content:center;padding:90px 1.5rem 40px}
.auth-box{width:100%;max-width:380px}
.auth-or{text-align:center;color:var(--t3);font-size:.72rem;margin:.8rem 0;position:relative}
.auth-or::before,.auth-or::after{content:'';position:absolute;top:50%;width:calc(50% - 25px);height:1px;background:var(--bdr)}
.auth-or::before{right:0}.auth-or::after{left:0}
.auth-links{text-align:center;margin-top:.7rem;font-size:.75rem;color:var(--t3)}.auth-links a{color:var(--gold)}
.auth-forgot{text-align:center;margin-top:.5rem}.auth-forgot a{font-size:.72rem;color:var(--t3);transition:color var(--tr)}.auth-forgot a:hover{color:var(--gold)}
.auth-reg-btn{font-size:.78rem}
.auth-box-wide{max-width:420px}
.fbox-result{margin-top:1rem}
.fg-code input{text-align:center;letter-spacing:5px;font-family:var(--fm)}
.fg-ltr input{text-align:left;direction:ltr}
.fg-pw{position:relative}
.pw-toggle{position:absolute;left:.65rem;top:1.85rem;background:0;border:0;color:var(--t3);cursor:pointer;font-size:.8rem;padding:.2rem;transition:color var(--tr);line-height:1;z-index:1}.pw-toggle:hover{color:var(--gold)}
.smtp-warn{margin-top:.7rem;padding:.6rem;background:rgba(192,57,43,.04);border:1px solid rgba(192,57,43,.1);border-radius:var(--r);text-align:center}
.smtp-warn p{font-size:.72rem;color:var(--red-b)}.smtp-warn p+p{font-size:.68rem;color:var(--t3);margin-top:.2rem}
.logout-form{display:inline}.logout-form button{background:0;border:0;padding:0;font:inherit;cursor:pointer;color:inherit;text-decoration:inherit}
.fbox{max-width:420px;margin:0 auto;background:var(--glass);backdrop-filter:blur(14px);border:1px solid var(--bdr);border-radius:var(--rl);padding:2rem 1.7rem;box-shadow:0 6px 35px rgba(0,0,0,.35);position:relative}
.fbox::before{content:'';position:absolute;top:-1px;right:0;left:0;height:1.5px;background:linear-gradient(90deg,transparent,var(--gold),transparent);border-radius:2px 2px 0 0}
.fbox h2{font-family:var(--fa);font-size:1.2rem;font-weight:800;color:var(--gold);text-align:center;margin-bottom:.2rem}
.fbox-sub{text-align:center;color:var(--t2);font-size:.78rem;margin-bottom:1.6rem}
.fg{margin-bottom:.9rem;position:relative}
.fg label{display:block;font-size:.72rem;font-weight:600;color:var(--t2);margin-bottom:.25rem;transition:color var(--tr)}
.fg:focus-within label{color:var(--gold)}
.fg input,.fg select,.fg textarea{width:100%;padding:.65rem .8rem;background:var(--bg-1);border:1px solid var(--bdr);border-radius:6px;color:var(--t1);font-family:var(--fa);font-size:.85rem;transition:all var(--tr);direction:ltr;text-align:left}
.fg input:focus,.fg textarea:focus,.fg select:focus{outline:0;border-color:var(--gold);box-shadow:0 0 0 3px rgba(201,168,76,.06);background:var(--bg-2)}
.fg input::placeholder{color:var(--t3);font-size:.78rem}
.fg-hint{font-size:.62rem;color:var(--t3);margin-top:.15rem}
.pw-str{height:2px;border-radius:1px;margin-top:.2rem;transition:all .4s}.pw-str.weak{background:var(--red-b);width:33%}.pw-str.mid{background:var(--amber);width:66%}.pw-str.strong{background:var(--green);width:100%}
.alr{padding:.7rem .9rem;border-radius:var(--r);margin-bottom:1rem;font-size:.78rem;line-height:1.7;border:1px solid}
.alr-ok{background:rgba(39,174,96,.05);border-color:rgba(39,174,96,.18);color:var(--green)}
.alr-err{background:rgba(192,57,43,.05);border-color:rgba(192,57,43,.18);color:var(--red-b)}

/* ═══ SHOP — IMPROVED ═══ */
.shop-top{display:flex;justify-content:space-between;align-items:center;padding:.9rem 1.2rem;background:var(--glass);backdrop-filter:blur(10px);border:1px solid var(--bdr);border-radius:var(--rl);flex-wrap:wrap;gap:.7rem;margin-bottom:.9rem}
.shop-user{display:flex;align-items:center;gap:.5rem}.shop-user strong{color:var(--t1);font-size:.82rem}
.shop-user-icon{font-size:1.1rem}.shop-user-label{color:var(--t3);font-size:.68rem;display:block}
.shop-actions{display:flex;align-items:center;gap:.5rem;flex-wrap:wrap}
.shop-search-icon{color:var(--t3)}
.shop-search-clear{display:none;background:0;border:0;color:var(--t3);cursor:pointer;font-size:.72rem;padding:0 .2rem}.shop-search-clear.vis{display:block}
.shop-search-count{font-size:.62rem;color:var(--t3);white-space:nowrap}
.shop-sort-wrap{display:flex;align-items:center;gap:.5rem}
.shop-cash{display:flex;align-items:baseline;gap:.25rem;padding:.4rem 1rem;background:rgba(201,168,76,.04);border:1px solid rgba(201,168,76,.09);border-radius:var(--r);transition:all var(--tr)}
.shop-cash.flash{animation:cashFlash .6s ease}
@keyframes cashFlash{0%,100%{background:rgba(201,168,76,.04)}50%{background:rgba(201,168,76,.15)}}
.shop-cash-n{font-family:var(--fm);font-size:1.15rem;font-weight:600;color:var(--gold)}
.shop-cash-c{font-size:.6rem;color:var(--gold-d)}
.shop-toolbar{display:flex;justify-content:space-between;align-items:center;gap:.7rem;flex-wrap:wrap;margin-bottom:.9rem}
.shop-search{display:flex;align-items:center;gap:.3rem;background:var(--bg-4);border:1px solid var(--bdr);border-radius:6px;padding:0 .65rem;flex:1;max-width:280px;transition:all var(--tr)}
.shop-search:focus-within{border-color:var(--gold);box-shadow:0 0 0 3px rgba(201,168,76,.04)}
.shop-search input{flex:1;background:0;border:0;color:var(--t1);font-family:var(--fa);font-size:.8rem;padding:.5rem 0;outline:0;direction:rtl}
.shop-search input::placeholder{color:var(--t3)}
.shop-sort{font-family:var(--fa);font-size:.72rem;background:var(--bg-4);border:1px solid var(--bdr);color:var(--t2);border-radius:5px;padding:.4rem .6rem;cursor:pointer;transition:all var(--tr)}
.shop-sort:focus{outline:0;border-color:var(--gold)}
.shop-cats{display:flex;gap:.2rem;flex-wrap:wrap;margin-bottom:.9rem;overflow-x:auto;-webkit-overflow-scrolling:touch;scrollbar-width:none;padding-bottom:.2rem;position:relative}
.shop-cats::-webkit-scrollbar{display:none}
.shop-cats::after{content:'';position:sticky;left:0;width:24px;flex-shrink:0;background:linear-gradient(to right,transparent,var(--bg-0));pointer-events:none;display:none}
@media(max-width:768px){.shop-cats{flex-wrap:nowrap}.shop-cats::after{display:block}}
.cpill{font-size:.72rem;font-weight:600;padding:.38rem .8rem;border-radius:50px;background:var(--bg-4);border:1px solid var(--bdr);color:var(--t2);cursor:pointer;transition:all var(--tr);text-decoration:none;white-space:nowrap}
.cpill:hover{color:var(--gold);border-color:rgba(201,168,76,.1)}
.cpill.on{background:var(--gold);color:var(--bg-0);border-color:var(--gold);font-weight:700;box-shadow:0 2px 8px var(--glow)}
.view-toggle{display:flex;gap:.15rem;background:var(--bg-4);border:1px solid var(--bdr);border-radius:5px;padding:2px}
.view-btn{font-size:.72rem;padding:.3rem .5rem;border-radius:3px;border:0;background:0;color:var(--t3);cursor:pointer;transition:all var(--tr)}.view-btn.on{background:var(--gold);color:var(--bg-0)}

/* ═══ ITEM CARDS — ENHANCED ═══ */
.sgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(195px,1fr));gap:.8rem;transition:opacity .3s}
.sgrid.loading{opacity:.4;pointer-events:none}
.si{background:var(--glass);backdrop-filter:blur(6px);border:1px solid var(--bdr);border-radius:var(--r);overflow:hidden;display:flex;flex-direction:column;transition:all .3s cubic-bezier(.4,0,.2,1);position:relative}
.si:hover{border-color:var(--bdr-h);transform:translateY(-4px);box-shadow:0 12px 40px rgba(0,0,0,.35),0 0 0 1px rgba(201,168,76,.06)}
.si-img{position:relative;height:115px;display:flex;align-items:center;justify-content:center;background:linear-gradient(135deg,var(--bg-1),var(--bg-3));border-bottom:1px solid var(--bdr);overflow:hidden}
.si-img::before{content:'';position:absolute;inset:0;background:radial-gradient(circle at center,rgba(201,168,76,.04),transparent 70%);opacity:0;transition:opacity .4s}.si:hover .si-img::before{opacity:1}
.si-img img{max-width:55px;max-height:55px;object-fit:contain;image-rendering:pixelated;position:relative;z-index:1;filter:drop-shadow(0 2px 8px rgba(201,168,76,.1));transition:all .4s cubic-bezier(.34,1.56,.64,1)}
.si:hover .si-img img{transform:scale(1.15) translateY(-2px);filter:drop-shadow(0 6px 16px rgba(201,168,76,.2))}
.si-badge{position:absolute;top:6px;left:6px;font-family:var(--fm);font-size:.52rem;font-weight:600;padding:.12rem .4rem;border-radius:3px;text-transform:uppercase;letter-spacing:.3px;z-index:2}
.si-badge-new{background:var(--green);color:#fff}.si-badge-hot{background:var(--red-b);color:#fff}.si-badge-sale{background:var(--blue);color:#fff}
.si-body{padding:.65rem .8rem;flex:1;display:flex;flex-direction:column}
.si-name{font-size:.78rem;font-weight:700;margin-bottom:.1rem;line-height:1.4}
.si-desc{font-size:.65rem;color:var(--t3);line-height:1.5;margin-bottom:auto}
.si-count{font-family:var(--fm);font-size:.6rem;color:var(--gold-d);margin-top:.2rem}
.si-count.low{color:var(--red-b)}
.si-foot{display:flex;justify-content:space-between;align-items:center;padding:.5rem .8rem;border-top:1px solid var(--bdr)}
.si-price{font-family:var(--fm);font-size:.8rem;font-weight:600;color:var(--gold)}
.si-buy{font-family:var(--fa);font-size:.7rem;font-weight:700;padding:.38rem .85rem;border-radius:5px;border:0;background:var(--gold);color:var(--bg-0);cursor:pointer;transition:all var(--tr);position:relative;overflow:hidden}
.si-buy:hover:not(:disabled){box-shadow:0 0 14px var(--glow);transform:translateY(-1px)}
.si-buy:active:not(:disabled){transform:translateY(0);transition-duration:.05s}
.si-buy:disabled{opacity:.25;cursor:not-allowed;filter:grayscale(.5)}
.si-buy.bought{background:var(--green);animation:buyPulse .5s ease}
.si-buy.buying{background:var(--bg-4);color:var(--t3);pointer-events:none}
@keyframes buyPulse{0%{transform:scale(1)}50%{transform:scale(1.08)}100%{transform:scale(1)}}


/* List view */
.sgrid.list-view{grid-template-columns:1fr}
.sgrid.list-view .si{flex-direction:row}.sgrid.list-view .si-img{width:80px;height:80px;min-height:auto;border-bottom:0;border-left:1px solid var(--bdr)}
.sgrid.list-view .si-body{padding:.6rem .8rem}.sgrid.list-view .si-foot{flex-direction:column;gap:.2rem;padding:.6rem .8rem;border-top:0;border-right:1px solid var(--bdr);justify-content:center}

/* ═══ ITEM DETAIL MODAL ═══ */
.item-detail{display:flex;gap:1rem;margin-bottom:.8rem}
.item-detail-img{width:80px;height:80px;background:var(--bg-1);border:1px solid var(--bdr);border-radius:var(--r);display:flex;align-items:center;justify-content:center;flex-shrink:0}
.item-detail-img img{max-width:50px;max-height:50px;image-rendering:pixelated}
.item-detail-info{flex:1}.item-detail-info h4{font-size:.88rem;font-weight:700;color:var(--t1);margin-bottom:.2rem}
.item-detail-info p{font-size:.72rem;color:var(--t2);line-height:1.7}

/* ═══ TABLES ═══ */
.htable{width:100%;border-collapse:collapse;font-size:.78rem}
.htable th{font-weight:700;color:var(--t2);text-align:right;padding:.6rem .65rem;border-bottom:2px solid var(--bdr);font-size:.65rem;text-transform:uppercase;letter-spacing:.5px}
.htable td{padding:.55rem .65rem;border-bottom:1px solid var(--bdr);color:var(--t2);transition:all var(--tr)}
.htable tr:hover td{background:rgba(201,168,76,.015)}
.hprice{font-family:var(--fm);color:var(--gold);font-weight:500}
.hdate{font-family:var(--fm);font-size:.68rem;color:var(--t3)}
.stat-row{display:flex;gap:.6rem;flex-wrap:wrap;justify-content:center;margin-bottom:1.2rem}
.stat-card{flex:1;min-width:130px;background:var(--glass);border:1px solid var(--bdr);border-radius:var(--r);padding:.9rem 1rem;text-align:center;transition:all var(--tr)}
.stat-card:hover{border-color:var(--bdr-g);transform:translateY(-2px)}
.stat-card-v{font-family:var(--fm);font-size:1.2rem;font-weight:600}
.stat-card-l{font-size:.62rem;color:var(--t3);margin-top:.05rem}

/* ═══ ACCOUNT ═══ */
.acc-grid{display:grid;grid-template-columns:280px 1fr;gap:1rem;align-items:start}
.acc-sidebar{background:var(--glass);border:1px solid var(--bdr);border-radius:var(--rl);padding:1.5rem;text-align:center}
.acc-avatar{width:64px;height:64px;border-radius:50%;background:linear-gradient(135deg,var(--gold-d),var(--gold));display:flex;align-items:center;justify-content:center;font-size:1.5rem;margin:0 auto .7rem;box-shadow:0 0 18px var(--glow)}
.acc-name{font-size:1rem;font-weight:800;color:var(--t1);margin-bottom:.1rem}
.acc-id{font-family:var(--fm);font-size:.65rem;color:var(--t3)}
.acc-cash{font-family:var(--fm);font-size:1.5rem;font-weight:600;color:var(--gold);margin-top:.8rem}
.acc-cash-l{font-size:.65rem;color:var(--t3)}
.acc-stat{display:flex;justify-content:space-between;padding:.4rem 0;font-size:.78rem;border-bottom:1px solid var(--bdr)}.acc-stat:last-child{border:0}.acc-stat span:first-child{color:var(--t2)}.acc-stat span:last-child{font-family:var(--fm);color:var(--t1);font-weight:500}
.char-card{display:flex;align-items:center;gap:.7rem;padding:.7rem .9rem;background:var(--glass);border:1px solid var(--bdr);border-radius:var(--r);margin-bottom:.5rem;transition:all .3s ease;position:relative;overflow:hidden}
.char-card::before{content:'';position:absolute;top:0;right:0;bottom:0;width:2px;border-radius:0 0 0 2px}
.char-card:hover{border-color:var(--bdr-g);transform:translateX(-4px);box-shadow:0 4px 16px rgba(0,0,0,.2)}
.char-card.job-warrior::before{background:var(--red-b)}.char-card.job-ninja::before{background:#9b59b6}
.char-card.job-sura::before{background:var(--blue)}.char-card.job-shaman::before{background:var(--green)}
.char-card.job-lycan::before{background:var(--amber)}
.char-job{font-size:1.2rem;flex-shrink:0}.char-info h4{font-size:.82rem;font-weight:700;color:var(--t1);margin-bottom:.05rem}
.char-info p{font-size:.68rem;color:var(--t2)}.char-lvl{margin-right:auto;font-family:var(--fm);font-size:.82rem;font-weight:600;color:var(--gold)}

/* ═══ RULES ═══ */
.rule-card{background:var(--glass);border:1px solid var(--bdr);border-radius:var(--r);padding:1.2rem 1.5rem;margin-bottom:.7rem;transition:all var(--tr)}
.rule-card:hover{border-color:var(--bdr-g);transform:translateX(-3px)}
.rule-card h3{font-size:.88rem;font-weight:700;color:var(--gold);margin-bottom:.4rem;display:flex;align-items:center;gap:.4rem}
.rule-card p{font-size:.8rem;color:var(--t2);line-height:1.9}

/* ═══ DOWNLOAD ═══ */
.dlcard{max-width:480px;margin:0 auto;background:var(--glass);backdrop-filter:blur(14px);border:1px solid var(--bdr);border-radius:var(--rl);padding:1.8rem;text-align:center;box-shadow:0 6px 35px rgba(0,0,0,.35);position:relative}
.dlcard::before{content:'';position:absolute;top:-1px;right:0;left:0;height:1.5px;background:linear-gradient(90deg,transparent,var(--gold),transparent)}
.dlcard h3{font-family:var(--ft);font-size:1rem;color:var(--gold);letter-spacing:2px;margin-bottom:.3rem}
.dlmeta{display:flex;justify-content:center;gap:1.5rem;margin:.8rem 0 1.3rem;flex-wrap:wrap}
.dlmeta-i{text-align:center}.dlmeta-i span{display:block;font-size:.55rem;color:var(--t3);text-transform:uppercase;letter-spacing:.5px}.dlmeta-i strong{font-family:var(--fm);font-size:.82rem;color:var(--t1)}

/* ═══ ADMIN ═══ */
.admin-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:.9rem}
.admin-card{background:var(--glass);border:1px solid var(--bdr);border-radius:var(--rl);padding:1.3rem;transition:border-color var(--tr)}.admin-card:hover{border-color:var(--bdr-g)}
.admin-card h3{font-size:.85rem;font-weight:700;color:var(--gold);margin-bottom:.7rem;display:flex;align-items:center;gap:.3rem}
.admin-stat{display:flex;justify-content:space-between;padding:.35rem 0;border-bottom:1px solid var(--bdr);font-size:.78rem}.admin-stat:last-child{border:0}.admin-stat span:first-child{color:var(--t2)}.admin-stat span:last-child{font-family:var(--fm);color:var(--t1);font-weight:500}
.smtp-status{display:inline-flex;align-items:center;gap:.3rem;font-size:.68rem;padding:.2rem .6rem;border-radius:50px;font-weight:500}
.smtp-on{background:rgba(39,174,96,.08);color:var(--green);border:1px solid rgba(39,174,96,.15)}
.smtp-off{background:rgba(192,57,43,.06);color:var(--red-b);border:1px solid rgba(192,57,43,.12)}

/* ═══ MODAL ═══ */
body.modal-open{overflow:hidden}
.mbg{position:fixed;inset:0;background:rgba(0,0,0,.75);backdrop-filter:blur(6px);display:flex;align-items:center;justify-content:center;z-index:2000;padding:1rem;opacity:0;pointer-events:none;transition:opacity .3s ease}.mbg.show{opacity:1;pointer-events:auto}
.mbox{background:var(--bg-3);border:1px solid var(--bdr-g);border-radius:var(--rl);width:100%;max-width:380px;transform:translateY(16px) scale(.94);transition:transform .35s var(--tr-bounce),opacity .3s;opacity:0;box-shadow:0 20px 60px rgba(0,0,0,.5)}.mbg.show .mbox{transform:translateY(0) scale(1);opacity:1}
.mhead{display:flex;justify-content:space-between;align-items:center;padding:.85rem 1.1rem;border-bottom:1px solid var(--bdr)}.mhead h3{font-size:.88rem;font-weight:700;color:var(--gold)}
.mx{background:0;border:0;color:var(--t3);font-size:1rem;cursor:pointer;transition:color var(--tr)}.mx:hover{color:var(--t1)}
.mbody{padding:1.1rem;font-size:.82rem;color:var(--t2);line-height:2}.mbody .mprice{color:var(--gold);font-family:var(--fm);font-weight:600}.mbody .mrem{font-size:.72rem;color:var(--t3)}
.mfoot{display:flex;gap:.4rem;padding:0 1.1rem 1.1rem}.mfoot .btn{flex:1;justify-content:center}

/* ═══ TOAST — IMPROVED ═══ */
.toast{position:fixed;bottom:22px;left:50%;transform:translateX(-50%) translateY(80px);padding:.75rem 1.6rem;border-radius:var(--r);font-size:.8rem;font-weight:600;z-index:3000;box-shadow:0 8px 35px rgba(0,0,0,.5);transition:transform .4s var(--tr-bounce),opacity .4s;max-width:88%;backdrop-filter:blur(8px);opacity:0;text-align:center}
.toast.vis{transform:translateX(-50%) translateY(0);opacity:1}.toast-ok{background:rgba(39,174,96,.92);color:#fff}.toast-err{background:rgba(192,57,43,.92);color:#fff}

/* ═══ SCROLL TO TOP ═══ */
.scroll-top{position:fixed;bottom:20px;right:20px;width:38px;height:38px;border-radius:50%;background:var(--gold);color:var(--bg-0);border:0;cursor:pointer;z-index:900;display:flex;align-items:center;justify-content:center;font-size:.85rem;box-shadow:0 3px 14px var(--glow);opacity:0;transform:translateY(12px);transition:all var(--tr);pointer-events:none}
.scroll-top.show{opacity:1;transform:translateY(0);pointer-events:auto}
.scroll-top:hover{transform:translateY(-3px);box-shadow:0 6px 22px var(--glow)}

/* ═══ FOCUS VISIBLE (accessibility) ═══ */
*:focus-visible{outline:2px solid var(--gold);outline-offset:2px;border-radius:3px}
input:focus-visible,select:focus-visible,textarea:focus-visible,button:focus-visible{outline-offset:0}

/* ═══ BREADCRUMB ═══ */
.breadcrumb{display:flex;gap:.3rem;align-items:center;font-size:.68rem;color:var(--t3);margin-bottom:.9rem;flex-wrap:wrap}
.breadcrumb a{color:var(--t2);transition:color var(--tr)}.breadcrumb a:hover{color:var(--gold)}
.breadcrumb span{color:var(--t3)}

/* ═══ EMPTY STATE ═══ */
.empty-state{text-align:center;padding:3rem 1rem;color:var(--t3)}
.empty-state-icon{font-size:2.5rem;margin-bottom:.6rem;opacity:.5}
.empty-state-text{font-size:.88rem;margin-bottom:.8rem}

/* ═══ TOOLTIP ═══ */
[data-tip]{position:relative}
[data-tip]:hover::after{content:attr(data-tip);position:absolute;bottom:calc(100% + 6px);left:50%;transform:translateX(-50%);background:var(--bg-4);color:var(--t1);font-size:.62rem;padding:.3rem .6rem;border-radius:4px;white-space:nowrap;border:1px solid var(--bdr);pointer-events:none;z-index:100;animation:tipIn .15s ease}
@keyframes tipIn{from{opacity:0;transform:translateX(-50%) translateY(3px)}to{opacity:1;transform:translateX(-50%) translateY(0)}}

/* ═══ FOOTER ═══ */
.foot{position:relative;z-index:1;border-top:1px solid var(--bdr);padding:1.3rem;text-align:center}
.foot p{font-size:.65rem;color:var(--t3)}.foot-links{display:flex;justify-content:center;gap:1rem;margin-top:.3rem;flex-wrap:wrap}.foot-links a{font-size:.65rem;color:var(--t2);transition:color var(--tr);position:relative}.foot-links a:hover{color:var(--gold)}
.foot-links a::after{content:'';position:absolute;bottom:-2px;right:0;width:0;height:1px;background:var(--gold);transition:width .3s ease}.foot-links a:hover::after{width:100%}

/* ═══ UTILITY CLASSES ═══ */
.sec-inner{padding-top:90px}
.wrap-sm{max-width:720px;margin:0 auto}
.wrap-xs{max-width:580px;margin:0 auto}
.panel{background:var(--glass);border:1px solid var(--bdr);border-radius:var(--rl);padding:1.2rem;margin-bottom:.9rem;position:relative;overflow:hidden}
.panel::after{content:'';position:absolute;top:-1px;right:0;left:0;height:1px;background:linear-gradient(90deg,transparent,rgba(201,168,76,.08),transparent);pointer-events:none}
.panel-title{font-size:.85rem;font-weight:700;color:var(--gold);margin-bottom:.7rem;display:flex;align-items:center;gap:.35rem}
.txt-gold{color:var(--gold)}.txt-red{color:var(--red-b)}.txt-blue{color:var(--blue)}.txt-green{color:var(--green)}
.txt-sm{font-size:.62rem}.txt-mono{font-family:var(--fm)}.txt-muted{color:var(--t3)}
.td-idx{color:var(--t3);font-family:var(--fm)}.td-name{color:var(--t1);font-weight:600}.td-code{font-family:var(--fm);color:var(--t3)}
.mb-sm{margin-bottom:.8rem}
.gap-actions{display:flex;gap:.3rem;flex-wrap:wrap}
.acc-sidebar-stats{margin-top:.8rem;text-align:right}
.acc-sidebar-actions{margin-top:.7rem;display:flex;gap:.3rem;flex-wrap:wrap;justify-content:center}
.stat-card-v.gold{color:var(--gold)}.stat-card-v.red{color:var(--red-b)}.stat-card-v.blue{color:var(--blue)}.stat-card-v.green{color:var(--green)}
.acc-stat-val-sm{font-family:var(--fm);color:var(--t1);font-weight:500;font-size:.62rem}

/* ═══ ENHANCED TABLE WRAPPER ═══ */
.table-wrap{background:var(--glass);border:1px solid var(--bdr);border-radius:var(--rl);overflow:auto;position:relative}
.table-wrap::after{content:'';position:absolute;top:-1px;right:0;left:0;height:1px;background:linear-gradient(90deg,transparent,rgba(201,168,76,.08),transparent);pointer-events:none}

/* ═══ INSTALL STEPS ═══ */
.install-steps{font-size:.8rem;color:var(--t2);line-height:2.2;counter-reset:step}
.install-steps p{padding-right:1.4rem;position:relative;margin-bottom:.2rem}
.install-steps p::before{counter-increment:step;content:counter(step);position:absolute;right:0;top:.1rem;width:1rem;height:1rem;border-radius:50%;background:rgba(201,168,76,.08);border:1px solid rgba(201,168,76,.12);color:var(--gold);font-family:var(--fm);font-size:.55rem;display:flex;align-items:center;justify-content:center;font-weight:600}
.install-steps code{font-family:var(--fm);color:var(--gold);font-size:.72rem;background:rgba(201,168,76,.04);padding:.05rem .35rem;border-radius:3px;border:1px solid rgba(201,168,76,.06)}
.install-note{margin-top:1.2rem;padding:.7rem;background:rgba(201,168,76,.03);border:1px solid rgba(201,168,76,.08);border-radius:var(--r)}
.install-note p{font-size:.72rem;color:var(--t2)}.install-note p+p{font-size:.65rem;color:var(--t3);margin-top:.2rem}

/* ═══ RANKING TABLE POLISH ═══ */
.rank-wrap{background:var(--glass);border:1px solid var(--bdr);border-radius:var(--rl);overflow:auto;position:relative}
.rank-wrap::after{content:'';position:absolute;top:-1px;right:0;left:0;height:1px;background:linear-gradient(90deg,transparent,rgba(201,168,76,.08),transparent);pointer-events:none}
.rank-note{text-align:center;margin-top:.8rem;font-size:.65rem;color:var(--t3)}
.sec-news{padding-top:25px}
.txt-center{text-align:center}.txt-right{text-align:right}
.mt-lg{margin-top:2rem}.mt-md{margin-top:1.5rem}
.justify-center{justify-content:center}
.rtable th.th-narrow{width:35px}

/* ═══ ERROR PAGE ═══ */
.err-page{min-height:50vh;display:flex;align-items:center;justify-content:center;text-align:center;padding:2rem}
.err-code{font-family:var(--fm);font-size:clamp(4rem,12vw,7rem);font-weight:700;color:var(--gold);opacity:.25;line-height:1}
.err-msg{font-size:1.2rem;font-weight:700;color:var(--t1);margin:.3rem 0}
.err-sub{font-size:.82rem;color:var(--t2);margin-bottom:1.5rem}

/* ═══ SKIP TO CONTENT (a11y) ═══ */
.skip-link{position:absolute;top:-100%;left:50%;transform:translateX(-50%);background:var(--gold);color:var(--bg-0);padding:.5rem 1.2rem;border-radius:0 0 var(--r) var(--r);font-size:.78rem;font-weight:700;z-index:10000;transition:top .2s}
.skip-link:focus{top:0;color:var(--bg-0)}

/* ═══ FORM VALIDATION FEEDBACK ═══ */
.fg-valid input{border-color:rgba(39,174,96,.4)!important}.fg-valid label{color:var(--green)!important}
.fg-invalid input{border-color:rgba(192,57,43,.3)!important}.fg-invalid label{color:var(--red-b)!important}
.fg-feedback{font-size:.58rem;margin-top:.15rem;transition:all .2s}.fg-feedback.ok{color:var(--green)}.fg-feedback.err{color:var(--red-b)}

/* ═══ STOCK PROGRESS BAR ═══ */
.si-stock{margin-top:.25rem;display:flex;align-items:center;gap:.35rem}
.si-stock-text{font-family:var(--fm);font-size:.58rem;color:var(--t3);white-space:nowrap}
.si-stock-text.low{color:var(--red-b)}.si-stock-text.out{color:var(--t3);opacity:.5}
.si-stock-bar{flex:1;height:3px;background:var(--bg-4);border-radius:2px;overflow:hidden}
.si-stock-fill{height:100%;border-radius:2px;transition:width .4s ease,background .4s}
.si-stock-fill.high{background:var(--green)}.si-stock-fill.mid{background:var(--amber)}.si-stock-fill.low{background:var(--red-b)}

/* ═══ RELATIVE TIME TOOLTIP ═══ */
.time-rel{cursor:help;border-bottom:1px dotted var(--bdr);transition:color var(--tr)}
.time-rel:hover{color:var(--gold)}

/* ═══ KEYBOARD SHORTCUT HINT ═══ */
.kbd{display:inline-flex;align-items:center;justify-content:center;min-width:18px;height:18px;padding:0 4px;font-family:var(--fm);font-size:.55rem;color:var(--t3);background:var(--bg-4);border:1px solid var(--bdr);border-radius:3px;line-height:1}

/* ═══ PRINT ═══ */
@media print{
  .nav,.scroll-top,.mobile-home,.scroll-progress,.page-loader,#bgCanvas,.hero-acts,.btn,.breadcrumb,.event-bar,.ornament,footer,.ntoggle{display:none!important}
  body{background:#fff;color:#000;font-size:12pt}body::before,body::after{display:none}
  .sec{padding:10px 0}.hero{min-height:auto;padding:20px 0}
  .fcard,.si,.panel,.fbox{border:1px solid #ccc;box-shadow:none;backdrop-filter:none}
  a{color:#000;text-decoration:underline}
}

/* ═══ CHARACTER LEVEL BAR ═══ */
.char-level-bar{height:3px;border-radius:2px;background:var(--bg-4);margin-top:.25rem;overflow:hidden}
.char-level-fill{height:100%;border-radius:2px;background:linear-gradient(90deg,var(--gold-d),var(--gold));transition:width .8s ease}
.char-level-pct{font-family:var(--fm);font-size:.5rem;color:var(--t3);margin-top:.05rem}

/* ═══ COPY BUTTON ═══ */
.copy-btn{display:inline-flex;align-items:center;gap:.2rem;font-family:var(--fa);font-size:.6rem;color:var(--t3);background:var(--bg-4);border:1px solid var(--bdr);border-radius:4px;padding:.15rem .4rem;cursor:pointer;transition:all var(--tr)}
.copy-btn:hover{border-color:var(--gold);color:var(--gold)}
.copy-btn.copied{border-color:var(--green);color:var(--green);background:rgba(39,174,96,.06)}

/* ═══ ACCOUNT SOCIAL ID ═══ */
.acc-social{display:flex;align-items:center;gap:.3rem;justify-content:center;margin-top:.4rem}
.acc-social-code{font-family:var(--fm);font-size:.72rem;color:var(--t2);letter-spacing:2px;direction:ltr}

/* ═══ ACCOUNT LAST PLAY ═══ */
.acc-last-play{font-size:.6rem;color:var(--t3);margin-top:.3rem}

/* ═══ TODAY/YESTERDAY NEWS BADGE ═══ */
.news-date-rel{font-size:.48rem;color:var(--gold);font-weight:700;display:block;margin-top:.05rem;letter-spacing:0}

/* ═══ SCROLL TOP PERCENTAGE ═══ */
.scroll-top .scroll-pct{position:absolute;top:-18px;left:50%;transform:translateX(-50%);font-family:var(--fm);font-size:.5rem;color:var(--gold);background:var(--bg-4);border:1px solid var(--bdr);border-radius:3px;padding:.05rem .25rem;white-space:nowrap;opacity:0;transition:opacity .2s;pointer-events:none}
.scroll-top:hover .scroll-pct{opacity:1}

/* ═══ CTA SECTION ═══ */
.sec-cta{padding-bottom:70px;position:relative}
.sec-cta .cta-box{background:linear-gradient(135deg,rgba(201,168,76,.04),rgba(139,26,26,.03));border:1px solid rgba(201,168,76,.1);border-radius:var(--rl);padding:2.5rem 1.5rem;text-align:center;position:relative;overflow:hidden}
.sec-cta .cta-box::before{content:'';position:absolute;top:-1px;right:0;left:0;height:1.5px;background:linear-gradient(90deg,transparent,var(--gold),transparent);opacity:.4}
.sec-cta .cta-box h2{font-family:var(--fa);font-size:1.3rem;font-weight:800;margin-bottom:.3rem}
.sec-cta .cta-box p{color:var(--t2);font-size:.82rem;margin-bottom:1.2rem}

/* ═══ FOOTER LINK GLOW ═══ */
.foot-links a{position:relative}.foot-links a::after{content:'';position:absolute;bottom:-2px;right:0;width:0;height:1px;background:var(--gold);transition:width .3s ease}.foot-links a:hover::after{width:100%}

/* ═══ COUNTING ANIMATION ═══ */
.hstat-v.counting{color:var(--gold-l);transition:none}

/* ═══ MOBILE HOME BUTTON (v15) ═══ */
.mobile-home{display:none;position:fixed;bottom:20px;left:20px;width:40px;height:40px;border-radius:50%;background:var(--glass-h);backdrop-filter:blur(12px);border:1px solid var(--bdr-g);color:var(--gold);font-size:.95rem;z-index:900;align-items:center;justify-content:center;box-shadow:0 4px 18px rgba(0,0,0,.4);transition:all var(--tr);text-decoration:none;cursor:pointer}
.mobile-home:hover{transform:translateY(-2px);box-shadow:0 6px 24px rgba(0,0,0,.5);border-color:var(--gold);color:var(--gold-l)}

/* ═══ RESPONSIVE ═══ */
@media(max-width:1024px){
  .hero-stats{grid-template-columns:repeat(4,1fr);gap:.5rem;max-width:420px}
  .fgrid{grid-template-columns:repeat(auto-fit,minmax(180px,1fr))}
}
@media(max-width:768px){
  .nav-in{padding:0 1rem}
  .nlinks{display:none;position:absolute;top:58px;right:0;width:100%;background:rgba(5,5,7,.97);backdrop-filter:blur(20px);flex-direction:column;padding:.8rem;gap:.2rem;border-bottom:1px solid var(--bdr);animation:navSlide .25s ease}.nlinks.open{display:flex}
  @keyframes navSlide{from{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:translateY(0)}}
  .ntoggle{display:block}
  .hero{padding:80px 1.5rem 30px}.hero h1{font-size:clamp(1.8rem,5vw,2.8rem)}
  .hero-acts{flex-direction:column;align-items:center}.hero-acts .btn{width:100%;max-width:240px;justify-content:center}
  .hero-stats{grid-template-columns:repeat(2,1fr);gap:.5rem}
  .sec{padding:40px 1.5rem}
  .shop-top{flex-direction:column;text-align:center}.shop-toolbar{flex-direction:column}
  .shop-search{max-width:100%}
  .sgrid{grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:.5rem}
  .si-img{height:95px}.si-img img{max-width:42px;max-height:42px}
  .fbox{padding:1.5rem 1.1rem}
  .acc-grid{grid-template-columns:1fr}
  .stat-row{flex-direction:column}
  .scroll-top{bottom:16px;right:16px;width:34px;height:34px;font-size:.75rem}
  .mobile-home{display:flex}
  .auth-wrap .breadcrumb{position:static;margin-bottom:.5rem}
  .sec-cta .cta-box{padding:1.5rem 1rem}
  .nlinks li{width:100%}.nlinks a,.nlinks .nbtn{display:block;width:100%;text-align:center;padding:.5rem .7rem}
  .ncash{display:block;text-align:center;margin:.2rem 0}
}
@media(max-width:480px){
  .sgrid{grid-template-columns:1fr 1fr;gap:.4rem}
  .si-body{padding:.4rem .5rem}.si-desc{display:none}.si-name{font-size:.72rem}
  .si-foot{padding:.35rem .5rem;flex-direction:column;gap:.2rem}.si-buy{width:100%;text-align:center}
  .event-bar-num{font-size:1rem}
}