700;800;900&display=swap');

:root {
  --text:#13214a; --muted:#8a97b4; --line:#e7edf7; --blue:#478cff;
  --shadow:0 16px 40px rgba(58,86,145,.10);
}
*{box-sizing:border-box}
html,body{margin:0;min-height:100%;font-family:Nunito,system-ui,sans-serif;color:var(--text)}
body{
  background:
  radial-gradient(circle at 4% 0%,#daf2ff 0,transparent 28%),
  radial-gradient(circle at 90% 5%,#efe5ff 0,transparent 25%),
  #f3f8ff;
}
button{font:inherit;cursor:pointer}
img{display:block;max-width:100%}

.app{min-height:100vh;display:grid;grid-template-columns:210px 1fr}

.sidebar{
  height:100vh;position:sticky;top:0;padding:22px 15px;
  display:flex;flex-direction:column;
  background:linear-gradient(#fff,#f9fcff);
  border-right:1px solid #e5edf7;
}

.brand{display:flex;gap:11px;align-items:center}
.brand-mark{
  width:56px;height:56px;flex:0 0 56px;border-radius:19px;
  overflow:hidden;position:relative;
  background:linear-gradient(145deg,#56bcff,#6b5cff 60%,#ba5cff);
  box-shadow:0 12px 25px rgba(88,91,255,.22)
}
.brand-mark img{
  position:absolute;width:68px;height:68px;object-fit:contain;
  right:-10px;bottom:-14px;max-width:none
}
.brand-text{display:flex;flex-direction:column}
.brand-text b{font-size:20px}
.brand-text span{font-size:9px;color:var(--muted);font-weight:700}

.label{font-size:8px;font-weight:900;letter-spacing:1.4px;color:#a5afc4;margin:21px 9px 9px}

nav{display:flex;flex-direction:column;gap:6px}
.nav{
  height:47px;border:0;border-radius:15px;background:transparent;color:#7482a2;
  display:flex;align-items:center;gap:9px;padding:0 8px
}
.nav.active{background:#eaf3ff;color:#2f7df8}
.ico{
  width:35px;height:35px;border-radius:12px;background:#f7faff;
  display:grid;place-items:center
}
.nav.active .ico{color:#fff;background:linear-gradient(145deg,#4ba3ff,#665cff)}
.nav b{font-size:12px}
.nav em{
  margin-left:auto;font-style:normal;font-size:8px;background:#eee7ff;color:#8058e8;
  padding:4px 6px;border-radius:99px
}

.level{
  margin-top:16px;padding:12px;border-radius:17px;background:#fff;
  border:1px solid #e9eff7;box-shadow:0 9px 22px rgba(63,88,136,.05)
}
.level-top{display:grid;grid-template-columns:32px 1fr auto;gap:8px;align-items:center}
.level-top>span{
  width:32px;height:32px;border-radius:11px;
  background:linear-gradient(145deg,#ffc950,#ffad3d);color:#fff;
  display:grid;place-items:center;font-size:11px;font-weight:900
}
.level-top>div{display:flex;flex-direction:column}
.level-top small{font-size:6px;color:#a3aec3;font-weight:900}
.level-top b{font-size:10px}
.level-top strong{font-size:8px;color:#715cf0}
.xp{height:6px;background:#edf2fa;border-radius:99px;overflow:hidden;margin:9px 0 5px}
.xp i{display:block;width:62%;height:100%;background:linear-gradient(90deg,#4c9dff,#725ff3)}
.xp-meta{display:flex;justify-content:space-between;font-size:7px;color:#9ca7bd;font-weight:800}

.side-promo{
  margin-top:auto;height:190px;border-radius:23px;overflow:hidden;
  display:grid;grid-template-columns:1fr 96px;color:#fff;
  background:linear-gradient(150deg,#6252f4,#825fff 49%,#53c9e5);
  box-shadow:0 18px 35px rgba(98,85,224,.18)
}
.promo-copy{padding:16px 0 16px 16px;z-index:2}
.promo-copy small{font-size:7px;font-weight:900;opacity:.75}
.promo-copy b{display:block;font-size:16px;line-height:1.08;margin:7px 0 12px}
.promo-copy button{
  border:0;border-radius:10px;padding:7px 9px;color:#6452e9;background:#fff;
  font-size:8px;font-weight:900
}
.promo-art{position:relative;overflow:hidden}
.promo-robot{
  position:absolute;width:115px;height:145px;object-fit:contain;
  right:-24px;bottom:-16px;max-width:none
}
.promo-coin{
  position:absolute;width:38px;height:38px;object-fit:contain;
  left:-4px;bottom:10px
}

main{min-width:0;padding:16px 20px 30px}

.topbar{
  height:68px;background:#fff;border-radius:22px;box-shadow:var(--shadow);
  display:flex;align-items:center;padding:0 15px;margin-bottom:16px
}
.search{
  flex:1;max-width:500px;border-radius:14px;background:#f3f6fc;
  padding:10px 13px;color:#98a5bf;font-size:12px
}
.user{margin-left:auto;display:flex;align-items:center;gap:8px}
.bell{width:38px;height:38px;border-radius:13px;border:1px solid #edf1f7;background:#fff}
.profile,.balance{display:flex;align-items:center;border:1px solid #edf1f7;background:#fff;border-radius:14px}
.profile{padding:5px 9px 5px 6px;gap:7px}
.profile>span{
  width:31px;height:31px;border-radius:50%;
  background:linear-gradient(145deg,#ffd990,#ffa777);
  display:grid;place-items:center;font-weight:900
}
.profile>div{display:flex;flex-direction:column}
.profile small{font-size:8px;color:var(--muted)}
.profile b{font-size:11px}
.balance{padding:6px 10px 6px 7px;gap:7px}
.balance img{width:27px;height:27px;object-fit:contain}
.balance b{font-size:12px}

.grid{display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:16px}
.maincol,.rightcol{display:flex;flex-direction:column;gap:14px}

.hero{
  height:304px;border-radius:30px;overflow:hidden;position:relative;color:#fff;
  background:linear-gradient(120deg,#478bff,#56bdf0 52%,#66ddc5);
  box-shadow:0 20px 46px rgba(63,123,214,.16)
}
.hero-copy{position:relative;z-index:3;width:60%;padding:31px}
.hero-copy small{font-size:12px;font-weight:800}
.hero-copy h1{font-size:52px;line-height:1;margin:7px 0 11px;letter-spacing:-2px}
.hero-copy p{font-size:13px;font-weight:700;margin:0 0 18px}
.bar{height:14px;padding:3px;border-radius:99px;background:rgba(255,255,255,.38)}
.bar i{display:block;width:64%;height:100%;border-radius:99px;background:linear-gradient(90deg,#3ad2a2,#69df89 60%,#ffed7c)}
.bar-meta{display:flex;justify-content:space-between;font-size:10px;margin-top:6px}
.hero-copy button{
  margin-top:16px;border:0;border-radius:13px;padding:10px 14px;
  color:#2f78ef;background:#fff;font-weight:900
}
.hero-art{position:absolute;right:0;top:0;width:42%;height:100%;overflow:hidden}
.hero-robot{
  position:absolute;width:260px;height:280px;object-fit:contain;
  right:3px;bottom:-7px;max-width:none
}
.hero-coin-one{
  position:absolute;width:52px;height:52px;object-fit:contain;
  left:12px;top:52px
}
.hero-coin-two{
  position:absolute;width:38px;height:38px;object-fit:contain;
  right:12px;bottom:43px
}

.quick{display:grid;grid-template-columns:repeat(4,1fr);gap:10px}
.quick article{
  height:82px;background:#fff;border-radius:20px;box-shadow:var(--shadow);
  display:grid;grid-template-columns:54px 1fr;gap:9px;align-items:center;
  padding:10px;overflow:hidden
}
.thumb{width:54px;height:54px;border-radius:15px;overflow:hidden;background:#eef4ff}
.thumb img{width:54px;height:54px;object-fit:cover}
.cointhumb{background:linear-gradient(145deg,#fff5c9,#ffe09f);display:grid;place-items:center}
.cointhumb img{width:45px;height:45px;object-fit:contain}
.quick article>div:last-child{display:flex;flex-direction:column}
.quick b{font-size:11px}
.quick small{font-size:7px;color:#98a3ba;font-weight:800;margin-top:3px}

.head,.cardhead{display:flex;align-items:center;justify-content:space-between}
.head{margin-bottom:10px}
.head small{font-size:8px;color:#6f8cc4;font-weight:900;letter-spacing:1.3px}
.head h2{margin:2px 0 0;font-size:22px}
.head button,.cardhead a{border:0;background:transparent;color:#4387ff;font-size:9px;font-weight:900}

.gamegrid{display:grid;grid-template-columns:repeat(3,1fr);gap:11px}
.game{background:#fff;border-radius:22px;box-shadow:var(--shadow);padding:8px}
.cover{height:147px;border-radius:17px;overflow:hidden;position:relative;background:#e8f3ff}
.cover img{width:100%;height:100%;object-fit:cover}
.cover span{
  position:absolute;right:7px;top:7px;background:#fff;border-radius:99px;
  padding:4px 7px;font-size:8px;font-weight:900
}
.game h3{font-size:14px;margin:9px 2px 0}
.game p{font-size:9px;color:var(--muted);margin:2px 2px 8px}
.game>button{
  border:0;width:100%;padding:7px;border-radius:10px;
  background:#edf5ff;color:#347dff;font-size:9px;font-weight:900
}

.rankban{
  height:92px;border-radius:24px;padding:15px 19px;
  display:flex;align-items:center;gap:13px;color:#fff;
  background:linear-gradient(115deg,#5f4df1,#5288ff 55%,#4ccddb);
  box-shadow:0 15px 30px rgba(76,106,220,.15)
}
.trophy{
  width:55px;height:55px;border-radius:17px;background:rgba(255,255,255,.13);
  display:grid;place-items:center;font-size:29px
}
.rankban>div:nth-child(2){display:flex;flex-direction:column;flex:1}
.rankban b{font-size:14px}
.rankban span{font-size:9px;opacity:.9;font-weight:700}
.rankban button{width:36px;height:36px;border:0;border-radius:50%;background:#fff;color:#3d82f7;font-size:21px}

.twocol{display:grid;grid-template-columns:1fr 1fr;gap:11px}
.card{background:#fff;border-radius:22px;padding:16px;box-shadow:var(--shadow)}
.cardhead h3{margin:0;font-size:15px}
.row{display:grid;grid-template-columns:25px 27px 1fr auto;align-items:center;gap:6px;min-height:40px;border-bottom:1px solid var(--line);font-size:9px}
.row:last-child{border:0}
.row i{width:26px;height:26px;border-radius:50%;background:linear-gradient(145deg,#afd8ff,#ffd9ab);display:grid;place-items:center;font-style:normal;font-weight:900}
.row strong{font-size:8px}
.row.mine{background:#edf6ff;color:#2475ed;border:0;border-radius:10px;padding:0 5px;margin:3px -5px}
.raffle .cardhead>span{font-size:7px;background:#f0eaff;color:#7655e8;border-radius:99px;padding:4px 6px;font-weight:900}
.raffbody{height:105px;display:flex;align-items:center;justify-content:space-between}
.raffbody>div:first-child{display:flex;flex-direction:column}
.raffbody small{font-size:8px;color:var(--muted)}
.raffbody b{font-size:29px;color:#7256ef}
.raffbody p{font-size:8px;color:var(--muted)}
.gift{width:74px;height:74px;border-radius:20px;background:linear-gradient(145deg,#ff69ae,#9a65ff);display:grid;place-items:center;font-size:40px}
.raffle>button{width:100%;border:0;border-radius:10px;padding:8px;background:linear-gradient(90deg,#4f8cff,#7457f3);color:#fff;font-size:9px;font-weight:900}

.walletbox{
  margin-top:9px;height:120px;border-radius:18px;padding:15px;
  display:flex;align-items:center;justify-content:space-between;color:#fff;
  background:linear-gradient(120deg,#4f83ff,#4daeea 52%,#63d8de)
}
.walletbox>div:first-child{display:flex;flex-direction:column}
.walletbox small,.walletbox span{font-size:8px}
.walletbox b{font-size:25px}
.coins{width:86px;height:80px;position:relative}
.coins img{position:absolute;width:56px;height:56px;object-fit:contain}
.coins img:first-child{right:0;top:0}
.coins img:last-child{left:0;bottom:0;width:50px;height:50px}
.note{display:flex;gap:7px;padding:9px;margin-top:9px;border-radius:13px;background:#f6f8fd}
.note>div{display:flex;flex-direction:column}
.note b{font-size:9px}
.note small{font-size:7px;color:var(--muted)}

.task{height:56px;display:grid;grid-template-columns:40px 1fr auto;align-items:center;gap:7px;border-bottom:1px solid var(--line)}
.task:last-child{border:0}
.task>span{width:37px;height:37px;border-radius:11px;overflow:hidden;background:#eef5ff;display:grid;place-items:center}
.task>span img{width:37px;height:37px;object-fit:cover}
.task:nth-of-type(2)>span img{width:31px;height:31px;object-fit:contain}
.task b{font-size:9px}
.task strong{font-size:8px;color:#f1911c}

.bigpromo{
  height:218px;border-radius:24px;overflow:hidden;
  display:grid;grid-template-columns:1fr 128px;color:#fff;
  background:linear-gradient(145deg,#ff7eb4,#c169f5 50%,#7761ff);
  box-shadow:0 17px 35px rgba(158,79,214,.14)
}
.bp-copy{padding:18px 0 18px 18px}
.bp-copy>small{display:inline-block;background:#fff;color:#7c4ddd;border-radius:99px;padding:4px 7px;font-size:6px;font-weight:900}
.bp-copy h3{font-size:25px;line-height:.95;margin:8px 0 5px}
.bp-copy h3 strong{color:#ffe368;font-size:29px}
.bp-copy p{font-size:8px;max-width:140px}
.bp-copy button{margin-top:10px;border:0;border-radius:10px;background:#fff;color:#7653e8;padding:8px 9px;font-size:8px;font-weight:900}
.bp-art{position:relative;overflow:hidden}
.bp-robot{position:absolute;width:150px;height:180px;object-fit:contain;right:-25px;bottom:-15px;max-width:none}
.bp-coin{position:absolute;width:43px;height:43px;object-fit:contain;left:-3px;bottom:13px}

@media(max-width:1100px){
  .app{grid-template-columns:80px 1fr}
  .brand-text,.label,.level,.side-promo{display:none}
  .brand{justify-content:center}
  .nav b,.nav em{display:none}
  .nav{justify-content:center;padding:0}
  .grid{grid-template-columns:1fr}
  .rightcol{display:grid;grid-template-columns:repeat(3,1fr)}
}
@media(max-width:760px){
  .app{display:block} .sidebar{display:none}
  main{padding:0 0 75px;max-width:430px;margin:auto}
  .topbar{border-radius:0;margin:0}
  .search,.profile{display:none}
  .maincol{padding:11px} .rightcol{display:none}
  .hero{height:198px}
  .hero-copy{padding:19px;width:72%}
  .hero-copy small{display:none}
  .hero-copy h1{font-size:27px;letter-spacing:-1px}
  .hero-copy p{font-size:9px;margin-bottom:12px}
  .bar{height:11px} .bar-meta{font-size:7px}
  .hero-copy button{font-size:8px;padding:7px 10px;margin-top:9px}
  .hero-art{width:40%}
  .hero-robot{width:165px;height:185px;right:-28px}
  .hero-coin-one{width:34px;height:34px;left:-4px}
  .hero-coin-two{display:none}
  .quick{gap:6px}
  .quick article{height:68px;display:flex;flex-direction:column;justify-content:center;padding:5px;gap:4px;text-align:center}
  .thumb{width:35px;height:35px;border-radius:10px}
  .thumb img{width:35px;height:35px}
  .cointhumb img{width:30px;height:30px}
  .quick small{display:none} .quick b{font-size:7px}
  .gamegrid{gap:6px}
  .game{padding:5px;border-radius:16px}
  .cover{height:88px;border-radius:12px}
  .game h3{font-size:10px} .game p{font-size:7px}
  .game>button{display:none}
  .rankban{height:68px;border-radius:17px;padding:10px}
  .trophy{width:40px;height:40px;font-size:21px}
  .rankban b{font-size:8px} .rankban span{font-size:6px}
  .rankban button{width:29px;height:29px}
  .twocol{gap:6px}
  .card{padding:10px;border-radius:16px}
  .cardhead h3{font-size:10px}
  .row{grid-template-columns:16px 19px 1fr auto;gap:3px;min-height:29px;font-size:6px}
  .row i{width:18px;height:18px;font-size:6px}
  .raffbody{height:72px} .raffbody b{font-size:20px}
  .gift{width:48px;height:48px;font-size:26px}
  .raffle>button{font-size:7px;padding:6px}
}


/* === SIDEBAR FIX MERGED === */

/* =========================================================
   NP ARENA - SIDEBAR VISUAL UPGRADE
   Mevcut tek dosyalık index.html içindeki <style> bloğunun
   EN ALTINA eklenmek üzere hazırlanmıştır.
   ========================================================= */

/* SIDEBAR GENEL */
.sidebar{
    padding:22px 14px 18px !important;
    background:
        radial-gradient(circle at 0% 0%,rgba(80,190,255,.14),transparent 24%),
        radial-gradient(circle at 100% 38%,rgba(155,100,255,.08),transparent 28%),
        linear-gradient(180deg,#ffffff 0%,#f9fcff 100%) !important;
}

/* MENÜ */
nav{gap:7px !important}

.nav{
    height:52px !important;
    border-radius:17px !important;
    padding:6px 8px !important;
    transition:transform .18s ease,background .18s ease,box-shadow .18s ease !important;
}

.nav:hover{
    transform:translateX(3px);
    background:#f1f7ff !important;
}

.ico{
    width:38px !important;
    height:38px !important;
    flex:0 0 38px;
    border-radius:13px !important;
    display:grid !important;
    place-items:center !important;
    font-size:16px;
    background:white !important;
    border:1px solid #e9f0fa;
    box-shadow:0 6px 14px rgba(64,89,142,.07);
}

.nav:nth-child(1) .ico{
    color:#3f89ff;
    background:linear-gradient(145deg,#e6f3ff,#f4f8ff) !important;
}
.nav:nth-child(2) .ico{
    color:#765aff;
    background:linear-gradient(145deg,#eee9ff,#f8f5ff) !important;
}
.nav:nth-child(3) .ico{
    color:#22b88a;
    background:linear-gradient(145deg,#ddf8ef,#f3fffa) !important;
}
.nav:nth-child(4) .ico{
    color:#f0a51e;
    background:linear-gradient(145deg,#fff1c7,#fffaf0) !important;
}
.nav:nth-child(5) .ico{
    color:#ef62a7;
    background:linear-gradient(145deg,#ffe1ef,#fff5fa) !important;
}
.nav:nth-child(6) .ico{
    color:#40a7da;
    background:linear-gradient(145deg,#ddf5ff,#f4fbff) !important;
}

.nav.active{
    position:relative;
    background:linear-gradient(90deg,#e5f1ff,#f0f6ff) !important;
    box-shadow:
        inset 0 0 0 1px rgba(70,140,255,.08),
        0 7px 18px rgba(70,100,160,.07);
}

.nav.active::before{
    content:"";
    position:absolute;
    left:-14px;
    width:4px;
    height:27px;
    border-radius:0 8px 8px 0;
    background:linear-gradient(180deg,#48a5ff,#725cff);
    box-shadow:0 4px 10px rgba(70,130,255,.30);
}

.nav.active .ico{
    color:white !important;
    background:linear-gradient(145deg,#4da3ff,#675bff) !important;
    border-color:transparent;
    box-shadow:0 8px 17px rgba(73,112,245,.22);
}

.nav b{
    font-size:12px !important;
    letter-spacing:-.1px;
}

.nav em{
    min-width:25px;
    padding:5px 7px !important;
    border-radius:999px !important;
    text-align:center;
    background:linear-gradient(145deg,#f0e7ff,#e4dbff) !important;
    color:#7855dc !important;
    box-shadow:0 5px 10px rgba(119,85,220,.08);
}

/* LEVEL CARD */
.level{
    position:relative;
    overflow:hidden;
    padding:14px !important;
    margin-top:18px !important;
    border-radius:20px !important;
    border:1px solid #e5edf8 !important;
    background:
        radial-gradient(circle at 100% 0%,rgba(123,94,255,.12),transparent 35%),
        linear-gradient(145deg,#ffffff,#f7faff) !important;
    box-shadow:0 12px 28px rgba(57,83,137,.08) !important;
}

.level::after{
    content:"★";
    position:absolute;
    right:-8px;
    bottom:-15px;
    font-size:75px;
    color:rgba(112,92,242,.045);
}

.level-top > span{
    width:40px !important;
    height:40px !important;
    border-radius:14px !important;
    font-size:14px !important;
    background:linear-gradient(145deg,#ffd34e,#ffab39) !important;
    box-shadow:0 8px 16px rgba(222,151,32,.20);
}

.level-top small{
    font-size:7px !important;
    letter-spacing:1px;
}

.level-top b{
    font-size:11px !important;
    margin-top:2px;
}

.level-top strong{
    padding:4px 7px;
    border-radius:9px;
    color:#7558e8 !important;
    background:#efe9ff;
}

.xp{
    height:8px !important;
    margin:12px 0 6px !important;
}

.xp i{
    position:relative;
    background:linear-gradient(90deg,#48a2ff,#765cff) !important;
}

.xp i::after{
    content:"";
    position:absolute;
    right:0;
    top:0;
    width:9px;
    height:100%;
    background:rgba(255,255,255,.35);
    border-radius:50%;
}

.xp-meta{font-size:7px !important}

/* MOR PROMO KART */
.side-promo{
    height:220px !important;
    min-height:220px !important;
    margin-top:auto;
    border-radius:26px !important;
    overflow:hidden !important;
    position:relative;
    display:block !important;
    isolation:isolate;
    background:
        radial-gradient(circle at 80% 20%,rgba(255,255,255,.20),transparent 20%),
        radial-gradient(circle at 100% 100%,rgba(72,210,232,.35),transparent 38%),
        linear-gradient(145deg,#6050f3 0%,#795fff 52%,#4fc8e4 100%) !important;
    box-shadow:0 20px 38px rgba(95,82,224,.22) !important;
}

.side-promo::before{
    content:"";
    position:absolute;
    width:150px;
    height:150px;
    border-radius:50%;
    right:-65px;
    bottom:-65px;
    border:1px solid rgba(255,255,255,.15);
}

.side-promo::after{
    content:"✦";
    position:absolute;
    right:18px;
    top:14px;
    font-size:25px;
    color:rgba(255,235,112,.85);
}

.promo-copy{
    position:relative;
    z-index:5;
    padding:19px 15px !important;
    width:130px;
}

.promo-copy small{
    display:inline-block;
    margin-bottom:7px;
    font-size:7px !important;
    letter-spacing:1px;
    opacity:.82 !important;
}

.promo-copy b{
    display:block;
    max-width:118px;
    font-size:17px !important;
    line-height:1.08 !important;
    margin:0 0 13px !important;
}

.promo-copy button{
    border:0 !important;
    border-radius:11px !important;
    padding:8px 10px !important;
    background:#fff !important;
    color:#6653e9 !important;
    font-size:8px !important;
    font-weight:900 !important;
    box-shadow:0 8px 16px rgba(52,39,135,.14);
}

.promo-art{
    position:absolute !important;
    inset:0 !important;
    overflow:hidden !important;
    pointer-events:none;
}

.promo-robot{
    position:absolute !important;
    width:126px !important;
    height:160px !important;
    max-width:126px !important;
    max-height:160px !important;
    object-fit:contain !important;
    right:-20px !important;
    bottom:-15px !important;
    filter:drop-shadow(0 12px 14px rgba(50,35,125,.2));
}

.promo-coin{
    position:absolute !important;
    width:44px !important;
    height:44px !important;
    max-width:44px !important;
    max-height:44px !important;
    object-fit:contain !important;
    right:74px !important;
    left:auto !important;
    bottom:10px !important;
    transform:rotate(-14deg) !important;
    filter:drop-shadow(0 6px 7px rgba(141,84,0,.16));
}

/* MOBİL / DAR EKRAN */
@media(max-width:1100px){
    .level,
    .side-promo{
        display:none !important;
    }
}


/* =========================================================
   SIDEBAR X — RADICAL VISUAL REDESIGN
   ========================================================= */

.app{grid-template-columns:270px 1fr !important}

.sidebar-x{
  width:270px !important;
  padding:14px 14px 16px !important;
  background:
    radial-gradient(circle at 0 0,rgba(96,188,255,.17),transparent 22%),
    radial-gradient(circle at 100% 42%,rgba(151,99,255,.09),transparent 25%),
    linear-gradient(180deg,#ffffff 0%,#f8fbff 100%) !important;
  border-right:1px solid #e5edf8 !important;
  gap:0 !important;
  overflow:hidden !important;
}

/* VISUAL BRAND HERO */
.side-hero{
  position:relative;
  height:132px;
  border-radius:25px;
  overflow:hidden;
  margin-bottom:14px;
  background:
    radial-gradient(circle at 80% 15%,rgba(255,255,255,.25),transparent 20%),
    linear-gradient(145deg,#4c9fff 0%,#665dff 52%,#a65fff 100%);
  box-shadow:0 16px 32px rgba(84,91,230,.20);
}
.side-hero-bg{
  position:absolute; inset:0;
  background:
    radial-gradient(circle at 15% 80%,rgba(82,211,222,.35),transparent 28%),
    linear-gradient(180deg,rgba(255,255,255,.05),transparent);
}
.side-hero-robot{
  position:absolute;
  width:138px !important;
  height:145px !important;
  max-width:none !important;
  object-fit:contain !important;
  right:-17px !important;
  bottom:-21px !important;
  filter:drop-shadow(0 12px 16px rgba(43,38,123,.20));
}
.side-hero-coin{
  position:absolute;
  width:44px !important;
  height:44px !important;
  object-fit:contain !important;
  right:77px !important;
  bottom:9px !important;
  transform:rotate(-12deg);
  filter:drop-shadow(0 5px 7px rgba(148,89,0,.17));
}
.side-logo-pill{
  position:absolute;
  left:16px; top:16px;
  width:43px; height:43px;
  border-radius:14px;
  display:grid; place-items:center;
  color:white; font-weight:900; font-size:14px;
  background:linear-gradient(145deg,#59c5ff,#745bff);
  border:1px solid rgba(255,255,255,.55);
  box-shadow:0 8px 16px rgba(40,61,170,.17);
}
.side-brand-copy{
  position:absolute;
  left:16px; bottom:17px;
  display:flex; flex-direction:column;
  max-width:125px;
  z-index:2;
}
.side-brand-copy b{
  font-size:21px;
  color:white;
  line-height:1;
  letter-spacing:-.4px;
}
.side-brand-copy span{
  margin-top:5px;
  color:rgba(255,255,255,.82);
  font-size:8px;
  font-weight:800;
}
.side-spark{
  position:absolute;
  color:#ffef8b;
  text-shadow:0 0 8px rgba(255,255,255,.4);
}
.side-spark.one{right:84px;top:17px;font-size:16px}
.side-spark.two{left:73px;top:13px;font-size:10px}

/* SECTION TITLE */
.side-section-title{
  display:flex;align-items:center;gap:8px;
  margin:3px 8px 8px;
}
.side-section-title span{
  font-size:8px;
  font-weight:900;
  letter-spacing:1.5px;
  color:#a2aec5;
}
.side-section-title i{
  height:1px;
  flex:1;
  background:linear-gradient(90deg,#e5ebf5,transparent);
}

/* NAV CARDS */
.side-menu{
  display:flex !important;
  flex-direction:column !important;
  gap:6px !important;
}
.side-item{
  position:relative;
  width:100%;
  min-height:57px;
  border:0;
  border-radius:18px;
  display:grid;
  grid-template-columns:46px 1fr auto;
  align-items:center;
  gap:10px;
  padding:6px 9px;
  color:#7181a2;
  background:transparent;
  transition:.18s ease;
}
.side-item:hover{
  transform:translateX(3px);
  background:#f2f7ff;
}
.side-item.active{
  color:#2d7bf7;
  background:linear-gradient(90deg,#e7f2ff,#f0f6ff);
  box-shadow:inset 0 0 0 1px rgba(75,143,255,.07),0 8px 19px rgba(61,99,163,.06);
}
.side-item.active::before{
  content:"";
  position:absolute;
  left:-14px;
  width:4px;height:28px;
  border-radius:0 8px 8px 0;
  background:linear-gradient(180deg,#4ba4ff,#705bff);
}

.side-icon{
  width:46px;height:46px;
  border-radius:15px;
  overflow:hidden;
  display:grid;place-items:center;
  box-shadow:0 6px 15px rgba(57,83,137,.06);
  border:1px solid rgba(231,238,248,.95);
}
.side-icon img{
  width:46px !important;
  height:46px !important;
  object-fit:cover !important;
  max-width:46px !important;
  max-height:46px !important;
}
.side-icon.blue{background:linear-gradient(145deg,#e5f3ff,#f4f9ff)}
.side-icon.purple{background:linear-gradient(145deg,#eee9ff,#faf7ff)}
.side-icon.mint{background:linear-gradient(145deg,#dff8ef,#f2fffa)}
.side-icon.gold{background:linear-gradient(145deg,#fff2c9,#fffaf1)}
.side-icon.pink{background:linear-gradient(145deg,#ffe2ef,#fff6fa)}
.side-icon.cyan{background:linear-gradient(145deg,#def5ff,#f4fcff)}

.home-shape{
  width:20px;height:17px;
  border:3px solid #4b92ff;
  border-top:0;
  border-radius:4px 4px 5px 5px;
  position:relative;
}
.home-shape::before{
  content:"";
  position:absolute;
  width:14px;height:14px;
  border-left:3px solid #4b92ff;
  border-top:3px solid #4b92ff;
  transform:rotate(45deg);
  top:-9px;left:0;
  border-radius:2px;
}
.side-item.active .home-shape,
.side-item.active .home-shape::before{
  border-color:white;
}
.side-item.active .side-icon.blue{
  background:linear-gradient(145deg,#4ca2ff,#675cff);
}

.cup{
  font-size:23px;
  color:#f0a51e;
}

.side-text{
  display:flex;
  flex-direction:column;
  min-width:0;
  text-align:left;
}
.side-text b{
  font-size:12px;
  line-height:1.05;
}
.side-text small{
  margin-top:4px;
  color:#a0abc0;
  font-size:7px;
  font-weight:800;
}
.side-item em{
  font-style:normal;
  color:#b4bfd3;
  font-size:18px;
}
.side-dot,.ticket-pill{
  min-width:23px;height:21px;
  border-radius:99px;
  display:grid;place-items:center;
  padding:0 6px;
  font-size:8px;font-weight:900;
}
.side-dot{background:#e7f6ff;color:#448cf4}
.ticket-pill{background:#eee6ff;color:#7a56df}

/* LEVEL VISUAL */
.side-level-card{
  margin:14px 1px 13px;
  padding:13px;
  border-radius:21px;
  display:grid;
  grid-template-columns:62px 1fr;
  gap:12px;
  align-items:center;
  background:
    radial-gradient(circle at 100% 0,rgba(117,95,255,.11),transparent 35%),
    linear-gradient(145deg,#fff,#f8fbff);
  border:1px solid #e8eef7;
  box-shadow:0 12px 26px rgba(58,84,138,.07);
}
.level-visual{
  position:relative;
  width:62px;height:62px;
  display:grid;place-items:center;
}
.level-ring{
  width:58px;height:58px;border-radius:50%;
  padding:5px;
  display:grid;place-items:center;
  background:conic-gradient(#745fff 0 62%,#e8edf8 62% 100%);
  box-shadow:0 7px 15px rgba(83,78,210,.12);
}
.level-ring::before{
  content:"";
  position:absolute;
  width:46px;height:46px;
  border-radius:50%;
  background:linear-gradient(145deg,#ffd65c,#ffad3c);
}
.level-ring span{
  position:relative;z-index:2;
  color:white;font-size:18px;font-weight:900;
}
.level-star{
  position:absolute;color:#ffdf5a;
  text-shadow:0 2px 4px rgba(160,103,0,.15);
}
.star-1{right:-1px;top:1px;font-size:13px}
.star-2{left:0;bottom:1px;font-size:8px}
.level-info{
  min-width:0;
}
.level-info>small{
  display:block;
  color:#a2aec4;
  font-size:7px;
  font-weight:900;
  letter-spacing:1px;
}
.level-title-row{
  display:flex;justify-content:space-between;align-items:center;
  margin-top:2px;
}
.level-title-row b{font-size:12px}
.level-title-row span{
  font-size:8px;font-weight:900;color:#7459e9;
  padding:4px 6px;border-radius:8px;background:#eee9ff;
}
.side-xp{
  height:7px;border-radius:99px;background:#edf2fa;overflow:hidden;
  margin:9px 0 5px;
}
.side-xp i{
  display:block;width:62%;height:100%;
  border-radius:inherit;
  background:linear-gradient(90deg,#4b9fff,#735ff2);
}
.side-xp-meta{
  display:flex;justify-content:space-between;
  color:#99a5bd;font-size:7px;font-weight:800;
}

/* BOTTOM PROMO */
.side-big-promo{
  position:relative;
  margin-top:auto;
  min-height:205px;
  border-radius:25px;
  overflow:hidden;
  isolation:isolate;
  color:white;
  background:linear-gradient(145deg,#6352f4 0%,#825fff 48%,#51c9e5 100%);
  box-shadow:0 19px 38px rgba(96,83,224,.2);
}
.promo-gradient{
  position:absolute;inset:0;z-index:-1;
  background:
    radial-gradient(circle at 88% 13%,rgba(255,255,255,.22),transparent 21%),
    radial-gradient(circle at 100% 100%,rgba(70,216,226,.3),transparent 33%);
}
.promo-copy-x{
  position:relative;z-index:3;
  padding:18px 0 18px 17px;
  width:145px;
}
.promo-copy-x small{
  display:block;
  font-size:7px;font-weight:900;letter-spacing:1px;
  opacity:.8;margin-bottom:6px;
}
.promo-copy-x b{
  display:block;
  font-size:17px;line-height:1.08;
  margin-bottom:13px;
}
.promo-copy-x button{
  border:0;border-radius:11px;padding:8px 10px;
  background:white;color:#6652e9;
  font-size:8px;font-weight:900;
  box-shadow:0 8px 15px rgba(55,39,137,.14);
}
.promo-copy-x button span{font-size:12px}
.promo-x-robot{
  position:absolute !important;
  width:130px !important;height:165px !important;
  max-width:130px !important;max-height:165px !important;
  object-fit:contain !important;
  right:-18px !important;bottom:-18px !important;
  filter:drop-shadow(0 12px 14px rgba(51,35,125,.2));
}
.promo-x-coin{
  position:absolute !important;
  width:45px !important;height:45px !important;
  max-width:45px !important;max-height:45px !important;
  object-fit:contain !important;
  right:78px !important;bottom:10px !important;
  transform:rotate(-14deg);
  filter:drop-shadow(0 6px 7px rgba(135,82,0,.16));
}
.promo-x-star{
  position:absolute;color:#ffef88;font-style:normal;
  text-shadow:0 0 8px rgba(255,255,255,.4);
}
.promo-x-star.one{right:20px;top:14px;font-size:20px}
.promo-x-star.two{right:93px;top:35px;font-size:9px}

/* Wider content adjustment */
@media(max-width:1100px){
  .app{grid-template-columns:92px 1fr !important}
  .sidebar-x{width:92px !important;padding:14px 10px !important}
  .side-hero{height:74px;border-radius:20px}
  .side-brand-copy,.side-logo-pill,.side-section-title,.side-level-card,.side-big-promo{display:none}
  .side-hero-robot{width:84px !important;height:88px !important;right:-5px !important;bottom:-14px !important}
  .side-hero-coin,.side-spark{display:none}
  .side-item{display:flex;justify-content:center;padding:5px;min-height:52px}
  .side-text,.side-item em,.side-dot,.ticket-pill{display:none}
  .side-icon{width:43px;height:43px;flex:0 0 43px}
}


/* =========================================================
   SIDEBAR MENU - UNIQUE VISUAL ICONS
   ========================================================= */

.side-icon{
  position:relative;
  overflow:hidden;
}

.image-card img{
  width:46px !important;
  height:46px !important;
  max-width:46px !important;
  max-height:46px !important;
  object-fit:cover !important;
  display:block !important;
}

.purple-card{
  background:linear-gradient(145deg,#765aff,#a965ff) !important;
}

.mint-card{
  background:linear-gradient(145deg,#65d8e7,#67e0b1) !important;
}

.cyan-card{
  background:linear-gradient(145deg,#65cfff,#5ca7ff) !important;
}

/* HOME */
.home-card{
  background:linear-gradient(145deg,#e4f3ff,#eff7ff) !important;
}

.side-item.active .home-card{
  background:linear-gradient(145deg,#4fa4ff,#655dff) !important;
}

.home-visual{
  width:24px;
  height:24px;
  position:relative;
  display:block;
}

.home-visual i:first-child{
  position:absolute;
  width:18px;
  height:14px;
  left:3px;
  bottom:1px;
  border-radius:4px;
  background:#4c91ff;
}

.home-visual i:last-child{
  position:absolute;
  width:16px;
  height:16px;
  left:4px;
  top:1px;
  transform:rotate(45deg);
  border-radius:3px;
  background:#4c91ff;
}

.home-card::after{
  content:"";
  position:absolute;
  width:5px;
  height:9px;
  left:21px;
  bottom:10px;
  border-radius:2px 2px 0 0;
  background:white;
  z-index:3;
}

.side-item.active .home-visual i{
  background:white !important;
}

/* RANKING */
.ranking-card{
  background:
    radial-gradient(circle at 50% 18%,rgba(255,255,255,.65),transparent 30%),
    linear-gradient(145deg,#fff0c6,#ffd76d) !important;
}

.podium-mini{
  position:relative;
  width:31px;
  height:31px;
  display:block;
}

.podium-mini i{
  position:absolute;
  bottom:3px;
  width:8px;
  border-radius:3px 3px 1px 1px;
}

.podium-mini .p1{
  left:11px;
  height:18px;
  background:linear-gradient(#ffca32,#f6a800);
}

.podium-mini .p2{
  left:2px;
  height:12px;
  background:linear-gradient(#dce5f1,#aeb9c9);
}

.podium-mini .p3{
  right:2px;
  height:9px;
  background:linear-gradient(#ffb57a,#d77943);
}

.podium-mini b{
  position:absolute;
  top:-3px;
  left:10px;
  color:#ff9e0b;
  font-size:12px;
  text-shadow:0 2px 3px rgba(176,103,0,.14);
}

/* RAFFLE */
.raffle-card{
  background:
    radial-gradient(circle at 75% 22%,rgba(255,255,255,.6),transparent 24%),
    linear-gradient(145deg,#ffe1ef,#f4ddff) !important;
}

.raffle-coin{
  position:absolute !important;
  width:34px !important;
  height:34px !important;
  max-width:34px !important;
  max-height:34px !important;
  object-fit:contain !important;
  left:4px !important;
  bottom:4px !important;
  transform:rotate(-10deg);
}

.ticket-mark{
  position:absolute;
  right:3px;
  top:4px;
  width:17px;
  height:17px;
  border-radius:6px;
  display:grid;
  place-items:center;
  color:white;
  background:linear-gradient(145deg,#ff68ad,#9b66ff);
  border:2px solid rgba(255,255,255,.85);
  font-size:8px;
  font-weight:900;
  transform:rotate(8deg);
  box-shadow:0 4px 8px rgba(142,71,192,.13);
}

/* improve differing border / depth */
.side-icon.purple-card,
.side-icon.mint-card,
.side-icon.cyan-card,
.side-icon.ranking-card,
.side-icon.raffle-card{
  border-color:rgba(255,255,255,.85) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.35),
    0 7px 15px rgba(53,79,132,.08) !important;
}


/* =========================================================
   SIDE HERO V2 — cleaner brand hierarchy
   ========================================================= */

.side-hero-v2{
  height:148px !important;
  border-radius:26px !important;
  overflow:hidden !important;
  position:relative !important;
  margin-bottom:15px !important;
  background:
    radial-gradient(circle at 78% 18%,rgba(255,255,255,.24),transparent 18%),
    linear-gradient(145deg,#4b9fff 0%,#665dff 52%,#a55fff 100%) !important;
  box-shadow:
    0 18px 36px rgba(80,88,226,.21),
    inset 0 1px 0 rgba(255,255,255,.22) !important;
}

.side-hero-v2-bg{
  position:absolute;
  inset:0;
  background:
    radial-gradient(circle at 7% 90%,rgba(92,219,224,.35),transparent 28%),
    radial-gradient(circle at 100% 100%,rgba(72,196,235,.24),transparent 30%);
}

.side-brand-lockup{
  position:absolute;
  left:15px;
  top:15px;
  z-index:5;
  display:flex;
  align-items:center;
  gap:10px;
}

.side-brand-logo{
  width:46px;
  height:46px;
  border-radius:15px;
  position:relative;
  display:grid;
  place-items:center;
  color:#fff;
  background:
    radial-gradient(circle at 27% 18%,rgba(255,255,255,.4),transparent 25%),
    linear-gradient(145deg,#5bc5ff,#755cff);
  border:1px solid rgba(255,255,255,.6);
  box-shadow:0 8px 16px rgba(39,58,164,.18);
}

.logo-crown{
  position:absolute;
  top:-10px;
  color:#ffd548;
  font-size:16px;
  filter:drop-shadow(0 2px 3px rgba(174,103,0,.2));
}

.logo-np{
  font-size:14px;
  font-weight:900;
  letter-spacing:-.5px;
}

.side-brand-copy-v2{
  display:flex;
  flex-direction:column;
  color:#fff;
}

.side-brand-copy-v2 b{
  font-size:19px;
  line-height:1;
  letter-spacing:-.35px;
}

.side-brand-copy-v2 span{
  margin-top:4px;
  font-size:7px;
  font-weight:800;
  color:rgba(255,255,255,.82);
}

.side-mascot-stage{
  position:absolute;
  right:-5px;
  bottom:-7px;
  width:138px;
  height:126px;
  overflow:hidden;
}

.side-mascot-main{
  position:absolute !important;
  width:136px !important;
  height:142px !important;
  max-width:136px !important;
  max-height:142px !important;
  object-fit:contain !important;
  right:-6px !important;
  bottom:-20px !important;
  filter:drop-shadow(0 12px 15px rgba(42,34,118,.21));
}

.side-mascot-coin{
  position:absolute !important;
  width:39px !important;
  height:39px !important;
  max-width:39px !important;
  max-height:39px !important;
  object-fit:contain !important;
  left:8px !important;
  bottom:12px !important;
  transform:rotate(-13deg);
  z-index:3;
  filter:drop-shadow(0 5px 7px rgba(151,92,0,.18));
}

.side-mascot-spark{
  position:absolute;
  color:#fff09a;
  z-index:4;
  text-shadow:0 0 8px rgba(255,255,255,.38);
}

.side-mascot-spark.sp1{
  right:20px;
  top:11px;
  font-size:17px;
}

.side-mascot-spark.sp2{
  left:18px;
  top:31px;
  font-size:8px;
}

.side-mini-status{
  position:absolute;
  left:15px;
  bottom:14px;
  display:flex;
  align-items:center;
  gap:6px;
  z-index:5;
  padding:5px 8px;
  border-radius:999px;
  background:rgba(255,255,255,.14);
  border:1px solid rgba(255,255,255,.18);
  backdrop-filter:blur(5px);
  color:#fff;
  font-size:7px;
  font-weight:900;
}

.online-dot{
  width:6px;
  height:6px;
  border-radius:50%;
  background:#5af2a7;
  box-shadow:0 0 0 3px rgba(90,242,167,.13);
}

/* =========================================================
   NEXT PASS — topbar, hero, cards, right rail
   ========================================================= */

.topbar{
  min-height:72px !important;
  border:1px solid rgba(255,255,255,.9) !important;
  background:rgba(255,255,255,.91) !important;
  backdrop-filter:blur(18px) !important;
  box-shadow:
    0 14px 34px rgba(62,88,145,.09),
    inset 0 1px 0 rgba(255,255,255,.7) !important;
}

.search{
  border:1px solid #eef2f8 !important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.7);
}

.hero{
  box-shadow:
    0 22px 50px rgba(61,119,210,.18),
    inset 0 1px 0 rgba(255,255,255,.24) !important;
  background:
    radial-gradient(circle at 84% 15%,rgba(255,255,255,.26),transparent 18%),
    radial-gradient(circle at 63% 120%,rgba(70,225,190,.30),transparent 39%),
    linear-gradient(118deg,#468aff 0%,#57bef0 51%,#64ddc4 100%) !important;
}

.hero-copy h1{
  text-shadow:0 3px 12px rgba(42,90,166,.13);
}

.primary-button,
.hero-copy button{
  box-shadow:0 9px 20px rgba(25,77,159,.13) !important;
  transition:transform .16s ease,box-shadow .16s ease;
}

.primary-button:hover,
.hero-copy button:hover{
  transform:translateY(-2px);
  box-shadow:0 13px 24px rgba(25,77,159,.17) !important;
}

.game{
  transition:transform .18s ease,box-shadow .18s ease;
  border:1px solid rgba(255,255,255,.8);
}

.game:hover{
  transform:translateY(-4px);
  box-shadow:0 20px 42px rgba(58,86,145,.13) !important;
}

.cover{
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.15);
}

.card{
  border:1px solid rgba(255,255,255,.9);
  box-shadow:
    0 15px 36px rgba(58,86,145,.085),
    inset 0 1px 0 rgba(255,255,255,.72) !important;
}

.walletbox{
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.22),
    0 12px 24px rgba(68,130,212,.12);
}

.bigpromo{
  box-shadow:
    0 18px 38px rgba(149,76,210,.16),
    inset 0 1px 0 rgba(255,255,255,.18) !important;
}

/* More premium background spacing */
.maincol,.rightcol{
  gap:15px !important;
}

/* Better visual rhythm in popular game row */
.games{
  padding-top:2px;
}

/* Mobile safe */
@media(max-width:1100px){
  .side-hero-v2{
    height:76px !important;
  }
  .side-brand-lockup,
  .side-mini-status{
    display:none !important;
  }
  .side-mascot-stage{
    width:74px;
    height:76px;
    right:0;
    bottom:0;
  }
  .side-mascot-main{
    width:80px !important;
    height:86px !important;
    max-width:80px !important;
    max-height:86px !important;
    right:-4px !important;
    bottom:-13px !important;
  }
  .side-mascot-coin,
  .side-mascot-spark{
    display:none !important;
  }
}


/* CLEAN BRAND - remove ugly NP square */
.side-brand-lockup.brand-clean{
  left:14px !important;
  top:18px !important;
  gap:8px !important;
  align-items:flex-start !important;
}

.brand-crown-only{
  width:24px;
  height:24px;
  display:grid;
  place-items:center;
  margin-top:-4px;
  color:#ffd44d;
  font-size:22px;
  line-height:1;
  transform:rotate(-5deg);
  filter:drop-shadow(0 3px 3px rgba(171,103,0,.18));
}

.brand-clean .side-brand-copy-v2 b{
  font-size:21px !important;
  line-height:1 !important;
  letter-spacing:-.45px !important;
  text-shadow:0 2px 7px rgba(44,62,155,.14);
}

.brand-clean .side-brand-copy-v2 span{
  margin-top:5px !important;
  font-size:7px !important;
  letter-spacing:.05px !important;
}

@media(max-width:1100px){
  .brand-clean{display:none !important;}
}


/* PLAYABLE GAMES */
.game-modal{
  position:fixed; inset:0; z-index:9999; display:none; place-items:center;
  padding:20px; background:rgba(15,25,62,.48); backdrop-filter:blur(12px);
}
.game-modal.open{display:grid}
.game-shell{
  width:min(840px,96vw); max-height:92vh; overflow:hidden;
  border-radius:30px; background:#f8fbff;
  box-shadow:0 35px 100px rgba(14,28,72,.32);
  border:1px solid rgba(255,255,255,.8);
}
.game-top{
  min-height:82px; padding:16px 20px; display:flex; align-items:center; justify-content:space-between;
  background:#fff; border-bottom:1px solid #e8eef8;
}
.game-top small{color:#7890bd;font-size:8px;font-weight:900;letter-spacing:1.4px}
.game-top h2{margin:2px 0 0;font-size:23px}
.game-stats{display:flex;align-items:center;gap:8px}
.game-stats>div{
  min-width:78px; padding:9px 12px; border-radius:14px; background:#edf5ff; text-align:center;
}
.game-stats small{display:block;font-size:7px}
.game-stats b{font-size:16px}
.game-close{
  width:42px;height:42px;border:0;border-radius:14px;background:#f2f5fa;color:#63739a;
  font-size:25px;line-height:1
}
.game-stage{
  position:relative; min-height:480px; overflow:hidden;
  background:
    radial-gradient(circle at 12% 0,rgba(93,199,255,.18),transparent 26%),
    radial-gradient(circle at 88% 5%,rgba(173,129,255,.13),transparent 30%),
    linear-gradient(180deg,#f9fcff,#eef6ff);
}
.game-intro,.game-result{
  min-height:480px; display:flex; flex-direction:column; align-items:center; justify-content:center;
  padding:35px; text-align:center;
}
.intro-icon,.result-badge{font-size:58px}
.game-intro h3,.game-result h3{font-size:30px;margin:10px 0 5px}
.game-intro p,.game-result p{max-width:450px;color:#8392b1;font-weight:700}
.game-primary,.game-secondary{
  border:0;border-radius:15px;padding:12px 20px;font-weight:900
}
.game-primary{
  color:#fff;background:linear-gradient(90deg,#438cff,#6e5cff);
  box-shadow:0 12px 24px rgba(69,105,232,.2)
}
.game-secondary{margin-top:8px;background:#eaf1fb;color:#607097}
.hidden{display:none!important}
.mini-game{position:absolute;inset:0}

/* Reflex */
#reflexGame{
  background:
    radial-gradient(circle at center,rgba(122,92,255,.12),transparent 28%),
    linear-gradient(180deg,#eff7ff,#e7f1ff);
}
.reflex-target{
  position:absolute;width:90px;height:90px;border:0;border-radius:50%;
  display:grid;place-items:center;font-size:40px;
  background:linear-gradient(145deg,#ffd758,#ffb132);
  box-shadow:0 18px 35px rgba(196,122,0,.25),0 0 0 16px rgba(255,210,73,.12);
  transition:transform .08s;
}
.reflex-target:active{transform:scale(.9)}

/* Color match */
#colorGame{padding:25px}
.color-instruction{text-align:center;font-size:20px;font-weight:900;margin:12px 0 22px}
.color-board{
  width:min(520px,90%);margin:auto;display:grid;grid-template-columns:repeat(2,1fr);gap:18px
}
.color-tile{
  aspect-ratio:1.35;border:0;border-radius:26px;box-shadow:0 15px 30px rgba(48,67,123,.12);
  transition:transform .12s,filter .12s
}
.color-tile:hover{transform:translateY(-3px)}
.color-tile.wrong{filter:grayscale(.6);transform:scale(.94)}

/* Space game */
#spaceGame{display:grid;place-items:center;padding:20px}
#spaceCanvas{
  width:min(700px,95%);height:auto;border-radius:24px;
  background:linear-gradient(180deg,#17235c,#342171 65%,#713988);
  box-shadow:0 22px 50px rgba(33,32,91,.25)
}
.space-help{position:absolute;bottom:12px;font-size:9px;color:#7182a7;font-weight:800}

/* Result */
.result-score,.result-reward{
  width:min(320px,90%);display:flex;justify-content:space-between;align-items:center;
  padding:13px 16px;border-radius:15px;margin:5px 0;background:#fff;box-shadow:0 8px 20px rgba(54,78,132,.07)
}
.result-score span,.result-reward span{color:#8391af;font-weight:800}
.result-score b{font-size:22px}.result-reward b{font-size:22px;color:#16b77b}

@media(max-width:700px){
  .game-modal{padding:0}
  .game-shell{width:100vw;height:100vh;max-height:none;border-radius:0}
  .game-stage,.game-intro,.game-result{min-height:calc(100vh - 82px)}
  .game-top{padding:12px}
  .game-top h2{font-size:18px}
  .game-stats>div{min-width:55px;padding:7px}
  .game-stats b{font-size:13px}
  .game-stats small{font-size:6px}
  .color-board{gap:12px}
  .color-tile{border-radius:19px}
}


/* ADVANCED APP PANELS */
.advanced-panel{background:#fff;border-radius:24px;box-shadow:0 16px 40px rgba(58,86,145,.10);padding:18px;margin-top:14px}
.advanced-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:12px}
.advanced-head h3{margin:0;font-size:18px}
.advanced-head span{font-size:9px;color:#7a8bab;font-weight:800}
.all-games-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:10px}
.all-game{
  border:0;border-radius:18px;padding:10px;min-height:110px;text-align:left;color:#13214a;
  background:linear-gradient(145deg,#f6f9ff,#fff);box-shadow:0 8px 20px rgba(53,81,137,.07);
  transition:.18s
}
.all-game:hover{transform:translateY(-3px);box-shadow:0 14px 28px rgba(53,81,137,.11)}
.all-game b{display:block;font-size:11px;margin-top:7px}
.all-game small{display:block;font-size:7px;color:#8d9ab6;margin-top:3px}
.all-game-art{height:56px;border-radius:14px;display:grid;place-items:center;font-size:27px;color:white}
.ag1{background:linear-gradient(145deg,#765cff,#aa64ff)}
.ag2{background:linear-gradient(145deg,#4fb9f0,#6be0cf)}
.ag3{background:linear-gradient(145deg,#ff9b62,#ff7083)}
.ag4{background:linear-gradient(145deg,#ffca4e,#ff9f3e)}
.ag5{background:linear-gradient(145deg,#49c58d,#53d7ba)}
.ag6{background:linear-gradient(145deg,#4f8dff,#4fd4f0)}
.ag7{background:linear-gradient(145deg,#ec6ea7,#aa6af2)}
.ag8{background:linear-gradient(145deg,#656ef5,#48bce4)}
.ag9{background:linear-gradient(145deg,#66c68a,#9edb62)}
.ag10{background:linear-gradient(145deg,#ffb348,#ff6f79)}

.dashboard-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.task-live,.raffle-live,.withdraw-box,.ad-box{background:#f8fbff;border:1px solid #edf2f8;border-radius:18px;padding:14px}
.live-row{display:grid;grid-template-columns:1fr auto;gap:8px;align-items:center;padding:10px 0;border-bottom:1px solid #e8eef7}
.live-row:last-child{border-bottom:0}
.live-row b{font-size:10px}.live-row small{display:block;color:#8d9ab6;font-size:7px;margin-top:2px}
.claim-btn,.action-btn{border:0;border-radius:10px;padding:8px 10px;font-size:8px;font-weight:900;background:#438cff;color:white}
.claim-btn[disabled]{background:#dbe4f3;color:#91a0ba}
.ticket-num{font-size:32px;font-weight:900;color:#7257ed}
.withdraw-form{display:grid;gap:8px}
.withdraw-form input{border:1px solid #e1e8f3;border-radius:11px;padding:9px;font:inherit;font-size:9px}
.ad-box{text-align:center}
.ad-box .ad-icon{font-size:35px}
.ad-box b{display:block;margin:6px 0 4px}
@media(max-width:900px){.all-games-grid{grid-template-columns:repeat(2,1fr)}.dashboard-grid{grid-template-columns:1fr}}


/* Raffle system detail UI */
.raffle-rules-preview{
  margin-top:10px;
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:6px;
}
.raffle-rules-preview span{
  padding:6px 5px;
  border-radius:10px;
  text-align:center;
  background:#f1edff;
  color:#6e54d8;
  font-size:7px;
  font-weight:900;
}
.raffle-prizes-list{
  display:flex;
  flex-direction:column;
  gap:5px;
  margin-top:8px;
}
.raffle-prize-chip{
  padding:7px 8px;
  border-radius:10px;
  background:#fff7db;
  color:#8c6500;
  font-size:8px;
  font-weight:900;
}


/* PROFILE SYSTEM */
.profile-button{
  cursor:pointer;
  font:inherit;
  color:inherit;
}
.profile-button:hover{box-shadow:0 8px 18px rgba(58,86,145,.10)}

.profile-modal{
  position:fixed; inset:0; z-index:10000;
  display:grid; place-items:center; padding:22px;
  background:rgba(15,25,62,.50); backdrop-filter:blur(12px);
}
.hidden-profile{display:none!important}

.profile-shell{
  width:min(920px,96vw); max-height:92vh; overflow:auto;
  border-radius:30px; background:#f7fbff;
  box-shadow:0 35px 100px rgba(15,28,70,.32);
  border:1px solid rgba(255,255,255,.8);
}
.profile-header{
  position:sticky; top:0; z-index:5;
  display:flex; justify-content:space-between; align-items:center;
  padding:18px 22px; background:rgba(255,255,255,.96);
  border-bottom:1px solid #e8eef7; backdrop-filter:blur(15px)
}
.profile-header small{font-size:8px;letter-spacing:1.4px;color:#7d91ba;font-weight:900}
.profile-header h2{margin:2px 0 0;font-size:23px}
.profile-close{
  width:42px;height:42px;border:0;border-radius:14px;background:#eef3fa;color:#65769a;font-size:25px
}

.profile-layout{display:grid;grid-template-columns:250px 1fr;min-height:560px}
.profile-side{
  padding:24px; background:
    radial-gradient(circle at 20% 0,rgba(85,184,255,.17),transparent 30%),
    linear-gradient(180deg,#eff7ff,#f7fbff);
  border-right:1px solid #e5edf8;text-align:center
}
.profile-avatar-large{
  width:108px;height:108px;margin:auto;border-radius:32px;overflow:hidden;
  display:grid;place-items:center;font-size:42px;font-weight:900;color:#fff;
  background:linear-gradient(145deg,#4fa5ff,#765cff);
  box-shadow:0 16px 32px rgba(79,102,233,.20);
  background-size:cover;background-position:center
}
.profile-side h3{font-size:21px;margin:13px 0 1px}
.profile-side>span{font-size:9px;color:#8796b4;font-weight:800}
.profile-level-card{
  margin-top:20px;padding:13px;border-radius:19px;background:#fff;display:grid;
  grid-template-columns:56px 1fr;gap:10px;align-items:center;text-align:left;box-shadow:0 10px 24px rgba(58,86,145,.07)
}
.profile-level-ring{
  width:54px;height:54px;border-radius:50%;display:grid;place-items:center;
  background:linear-gradient(145deg,#ffd154,#ffac3b);color:#fff;font-size:18px
}
.profile-level-card>div:last-child{display:flex;flex-direction:column}
.profile-level-card small{font-size:6px;color:#98a5bf;font-weight:900}
.profile-level-card strong{font-size:11px;margin:1px 0 5px}
.profile-xp{height:6px;border-radius:99px;background:#edf2f8;overflow:hidden}
.profile-xp i{display:block;width:0;height:100%;background:linear-gradient(90deg,#4b9cff,#735ff2)}
.profile-level-card span{font-size:6px;color:#98a4bb;margin-top:3px}
.profile-wallet-mini{margin-top:12px;padding:13px;border-radius:18px;color:#fff;background:linear-gradient(145deg,#4d8fff,#58cbdc)}
.profile-wallet-mini span{display:block;font-size:8px}.profile-wallet-mini b{font-size:20px}

.profile-content{padding:20px}
.profile-tabs{display:flex;gap:7px;margin-bottom:18px}
.profile-tab{
  border:0;border-radius:12px;padding:9px 13px;background:#edf3fb;color:#7080a1;font-size:9px;font-weight:900
}
.profile-tab.active{background:linear-gradient(90deg,#4c90ff,#6f5cff);color:#fff}
.profile-tab-panel{display:none}.profile-tab-panel.active{display:block}
.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.profile-tab-panel label{display:flex;flex-direction:column;gap:5px;font-size:9px;font-weight:900;color:#7180a0}
.profile-tab-panel input,.profile-tab-panel textarea{
  border:1px solid #dfe7f2;border-radius:12px;padding:10px;background:#fff;font:inherit;font-size:10px;outline:0
}
.profile-tab-panel input:focus,.profile-tab-panel textarea:focus{border-color:#6d8fff;box-shadow:0 0 0 3px rgba(75,139,255,.08)}
.avatar-presets{margin:16px 0}
.avatar-presets>small{display:block;color:#7483a2;font-size:8px;font-weight:900;margin-bottom:7px}
#avatarPresetList{display:flex;gap:8px;flex-wrap:wrap}
.avatar-preset{
  width:52px;height:52px;border-radius:16px;border:2px solid transparent;
  background-size:cover;background-position:center;cursor:pointer;
  display:grid;place-items:center;font-size:23px;color:white;font-weight:900
}
.avatar-preset.selected{border-color:#4d91ff;box-shadow:0 0 0 3px rgba(77,145,255,.10)}
.avatar-url-field{margin-top:12px}
.profile-primary,.profile-danger{
  border:0;border-radius:12px;padding:10px 14px;font-weight:900;font-size:9px
}
.profile-primary{color:#fff;background:linear-gradient(90deg,#438cff,#6f5cff);box-shadow:0 9px 18px rgba(66,105,229,.16)}
.profile-danger{color:#d64a62;background:#ffe9ee}
#profileSaveMessage,#profileWithdrawMessage,#passwordMessage{display:block;margin-top:8px;font-size:8px;color:#71809d}

.withdraw-card,.security-card,.logout-card{
  padding:16px;border-radius:19px;background:#fff;border:1px solid #e7edf6;box-shadow:0 9px 22px rgba(58,86,145,.06)
}
.withdraw-card h3,.security-card h3,.logout-card h3,.withdraw-history h3{margin:0 0 8px;font-size:15px}
.withdraw-card p,.logout-card p{font-size:9px;color:#8795b1}
.withdraw-card input,.security-card input{width:100%;margin-bottom:8px}
.withdraw-history{margin-top:14px}
.withdraw-history-row{
  display:grid;grid-template-columns:1fr auto;gap:8px;padding:10px;border-bottom:1px solid #e9eef6;font-size:9px
}
.withdraw-history-row:last-child{border-bottom:0}
.withdraw-history-row span{color:#8795b1}
.withdraw-status{font-weight:900;color:#705be8}
.logout-card{margin-top:13px}

.logout-overlay{
  position:fixed;inset:0;z-index:20000;display:grid;place-items:center;
  background:linear-gradient(145deg,#eaf5ff,#f0e9ff)
}
.logout-overlay>div{text-align:center;background:#fff;border-radius:26px;padding:35px;box-shadow:0 20px 55px rgba(58,86,145,.12)}
.logout-overlay h2{margin:0 0 5px}.logout-overlay p{font-size:10px;color:#8795b1}

@media(max-width:760px){
  .profile-modal{padding:0}
  .profile-shell{width:100vw;height:100vh;max-height:none;border-radius:0}
  .profile-layout{grid-template-columns:1fr}
  .profile-side{border-right:0;border-bottom:1px solid #e5edf8;padding:18px}
  .profile-avatar-large{width:84px;height:84px;border-radius:25px}
  .profile-level-card{max-width:300px;margin:14px auto 0}
  .profile-wallet-mini{max-width:300px;margin:10px auto 0}
  .form-grid{grid-template-columns:1fr}
}


/* =========================================================
   DEDICATED GAMES CATALOG PAGE
   ========================================================= */
.catalog-page{
  position:fixed;
  left:270px;
  right:0;
  top:0;
  bottom:0;
  z-index:9500;
  overflow:auto;
  padding:24px;
  background:
    radial-gradient(circle at 8% 0%,rgba(96,196,255,.20),transparent 26%),
    radial-gradient(circle at 92% 4%,rgba(179,128,255,.15),transparent 26%),
    #f1f7ff;
}

.catalog-shell{
  width:min(1200px,96vw);
  margin:0 auto;
}

.catalog-top{
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
  padding:26px 28px;
  border-radius:28px;
  color:white;
  background:
    radial-gradient(circle at 82% 18%,rgba(255,255,255,.22),transparent 18%),
    linear-gradient(120deg,#4b8fff,#6c62ff 52%,#56cbdc);
  box-shadow:0 20px 48px rgba(66,105,213,.18);
}

.catalog-top small{
  font-size:8px;
  font-weight:900;
  letter-spacing:1.5px;
  opacity:.8;
}
.catalog-top h1{
  margin:4px 0 5px;
  font-size:38px;
  letter-spacing:-1px;
}
.catalog-top p{
  margin:0;
  max-width:650px;
  font-size:11px;
  font-weight:700;
  opacity:.9;
}
.catalog-close{
  width:44px;
  height:44px;
  border:0;
  border-radius:14px;
  background:rgba(255,255,255,.16);
  color:white;
  font-size:28px;
}

.catalog-toolbar{
  margin-top:14px;
  display:flex;
  justify-content:space-between;
  gap:12px;
  align-items:center;
  padding:12px;
  border-radius:20px;
  background:#fff;
  box-shadow:0 12px 28px rgba(58,86,145,.08);
}

.catalog-search{
  flex:1;
  display:flex;
  align-items:center;
  gap:7px;
  padding:10px 12px;
  border-radius:13px;
  background:#f4f7fc;
  color:#8e9bb7;
}
.catalog-search input{
  width:100%;
  border:0;
  outline:0;
  background:transparent;
  font:inherit;
  font-size:10px;
}

.catalog-filters{
  display:flex;
  gap:6px;
  flex-wrap:wrap;
}
.catalog-filters button{
  border:0;
  border-radius:11px;
  padding:8px 10px;
  background:#edf3fb;
  color:#71809f;
  font-size:8px;
  font-weight:900;
}
.catalog-filters button.active{
  color:white;
  background:linear-gradient(90deg,#4a8fff,#705cff);
}

.catalog-summary{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:10px;
  margin:14px 0;
}
.catalog-summary>div{
  padding:14px;
  border-radius:18px;
  background:#fff;
  box-shadow:0 10px 24px rgba(58,86,145,.07);
}
.catalog-summary span{
  display:block;
  color:#8c99b5;
  font-size:8px;
  font-weight:800;
}
.catalog-summary b{
  display:block;
  margin-top:3px;
  font-size:18px;
}

.games-catalog-grid{
  display:grid;
  grid-template-columns:repeat(5,1fr);
  gap:12px;
  padding-bottom:40px;
}

.catalog-game-card{
  overflow:hidden;
  border-radius:23px;
  background:#fff;
  box-shadow:0 12px 30px rgba(58,86,145,.09);
  border:1px solid rgba(255,255,255,.8);
  transition:.18s ease;
}
.catalog-game-card:hover{
  transform:translateY(-4px);
  box-shadow:0 18px 40px rgba(58,86,145,.13);
}

.catalog-game-art{
  height:132px;
  position:relative;
  display:grid;
  place-items:center;
  font-size:43px;
  color:white;
  overflow:hidden;
}
.catalog-game-art::after{
  content:"";
  position:absolute;
  width:110px;
  height:110px;
  right:-45px;
  bottom:-55px;
  border-radius:50%;
  background:rgba(255,255,255,.12);
}
.catalog-game-rights{
  position:absolute;
  top:9px;
  right:9px;
  z-index:3;
  padding:5px 7px;
  border-radius:99px;
  background:#fff;
  color:#24335b;
  font-size:7px;
  font-weight:900;
}

.catalog-game-body{
  padding:11px;
}
.catalog-game-body h3{
  margin:0;
  font-size:12px;
}
.catalog-game-body p{
  margin:3px 0 9px;
  min-height:25px;
  color:#8c99b4;
  font-size:7px;
  font-weight:700;
}
.catalog-game-meta{
  display:flex;
  gap:5px;
  flex-wrap:wrap;
  margin-bottom:8px;
}
.catalog-game-meta span{
  padding:4px 6px;
  border-radius:8px;
  background:#f1f5fb;
  color:#72809d;
  font-size:6px;
  font-weight:900;
}
.catalog-game-play{
  width:100%;
  border:0;
  border-radius:10px;
  padding:8px;
  color:white;
  background:linear-gradient(90deg,#4b8fff,#6f5cff);
  font-size:8px;
  font-weight:900;
}

.cg-purple{background:linear-gradient(145deg,#6e58ff,#aa64ff)}
.cg-blue{background:linear-gradient(145deg,#4f9cff,#50d1e7)}
.cg-orange{background:linear-gradient(145deg,#ffad54,#ff7082)}
.cg-green{background:linear-gradient(145deg,#45c88e,#65ddbb)}
.cg-pink{background:linear-gradient(145deg,#f06da8,#ab65ef)}
.cg-yellow{background:linear-gradient(145deg,#ffc84c,#ff9e43)}

@media(max-width:1100px){
  .catalog-page{left:92px}
  .games-catalog-grid{grid-template-columns:repeat(3,1fr)}
}
@media(max-width:700px){
  .catalog-page{left:0;padding:0}
  .catalog-top{border-radius:0;padding:20px}
  .catalog-top h1{font-size:28px}
  .catalog-toolbar{margin:10px;border-radius:16px;display:block}
  .catalog-filters{margin-top:8px}
  .catalog-summary{margin:10px;grid-template-columns:1fr}
  .games-catalog-grid{grid-template-columns:repeat(2,1fr);gap:8px;padding:10px}
  .catalog-game-art{height:105px}
}


/* =========================================================
   UX FIX — CLEAN BRAND
   ========================================================= */
.side-brand-card{
  height:138px;
  margin-bottom:14px;
  border-radius:25px;
  position:relative;
  overflow:hidden;
  background:
    radial-gradient(circle at 82% 18%,rgba(255,255,255,.5),transparent 24%),
    linear-gradient(145deg,#e9f6ff 0%,#eef0ff 54%,#efe8ff 100%);
  border:1px solid rgba(219,230,247,.9);
  box-shadow:0 14px 30px rgba(58,86,145,.09);
}
.brand-soft-bg{
  position:absolute;
  inset:0;
  background:
    radial-gradient(circle at 0% 100%,rgba(80,203,226,.18),transparent 30%),
    radial-gradient(circle at 100% 100%,rgba(117,91,255,.13),transparent 35%);
}
.brand-left{
  position:absolute;
  left:14px;
  top:14px;
  z-index:4;
}
.brand-logo-clean{
  width:42px;
  height:42px;
  border-radius:14px;
  display:grid;
  place-items:center;
  position:relative;
  color:white;
  background:linear-gradient(145deg,#4ba3ff,#6c5cff);
  box-shadow:0 8px 15px rgba(73,97,221,.17);
}
.brand-logo-clean b{font-size:13px}
.brand-logo-crown{
  position:absolute;
  top:-10px;
  color:#ffd44e;
  font-size:15px;
}
.brand-clean-copy{
  margin-top:11px;
  display:flex;
  flex-direction:column;
}
.brand-clean-copy strong{
  font-size:20px;
  line-height:1;
  letter-spacing:-.45px;
}
.brand-clean-copy span{
  margin-top:4px;
  color:#8290af;
  font-size:7px;
  font-weight:800;
}
.brand-live{
  margin-top:10px;
  display:inline-flex;
  align-items:center;
  gap:5px;
  padding:5px 7px;
  border-radius:99px;
  color:#4583c9;
  background:rgba(255,255,255,.68);
  border:1px solid rgba(206,220,242,.85);
  font-size:6px;
  font-weight:900;
}
.brand-live i{
  width:6px;height:6px;border-radius:50%;
  background:#42d990;
  box-shadow:0 0 0 3px rgba(66,217,144,.10);
}
.brand-character{
  position:absolute;
  right:0;
  bottom:0;
  width:125px;
  height:138px;
  overflow:hidden;
}
.brand-character-robot{
  position:absolute!important;
  width:132px!important;
  height:142px!important;
  max-width:132px!important;
  max-height:142px!important;
  object-fit:contain!important;
  right:-14px!important;
  bottom:-17px!important;
  filter:drop-shadow(0 10px 13px rgba(60,56,146,.16));
}
.brand-character-coin{
  position:absolute!important;
  width:36px!important;
  height:36px!important;
  max-width:36px!important;
  max-height:36px!important;
  object-fit:contain!important;
  left:4px!important;
  bottom:15px!important;
  transform:rotate(-13deg);
  z-index:3;
}
.brand-star{
  position:absolute;
  color:#ffd955;
  font-size:12px;
}
.bs1{right:17px;top:15px}
.bs2{left:16px;top:24px;font-size:7px}

/* =========================================================
   PROFILE DROPDOWN
   ========================================================= */
.topbar{position:relative;z-index:100}
.profile-button{
  border:1px solid #edf1f7!important;
  background:#fff!important;
  cursor:pointer;
}
.profile-dropdown{
  position:absolute;
  right:18px;
  top:76px;
  width:370px;
  max-height:calc(100vh - 100px);
  overflow:auto;
  z-index:12000;
  border-radius:24px;
  padding:14px;
  background:rgba(255,255,255,.98);
  border:1px solid #e6edf7;
  box-shadow:0 28px 70px rgba(20,38,83,.22);
  backdrop-filter:blur(18px);
}
.profile-dropdown-hidden{display:none!important}
.pd-head{
  display:grid;
  grid-template-columns:54px 1fr 34px;
  gap:10px;
  align-items:center;
  padding:4px 3px 12px;
}
.pd-avatar{
  width:54px;height:54px;
  border-radius:17px;
  display:grid;place-items:center;
  color:white;font-size:20px;font-weight:900;
  background:linear-gradient(145deg,#4ba4ff,#725cff);
  background-size:cover;
  background-position:center;
  box-shadow:0 9px 19px rgba(76,100,231,.17);
}
.pd-person{display:flex;flex-direction:column}
.pd-person strong{font-size:15px}
.pd-person span{margin-top:2px;color:#8a98b5;font-size:8px;font-weight:800}
.pd-close{
  width:34px;height:34px;border:0;border-radius:11px;
  background:#f0f4fa;color:#71809e;font-size:20px
}
.pd-level{
  padding:11px;
  border-radius:16px;
  background:linear-gradient(145deg,#f2f7ff,#f8f5ff);
  border:1px solid #e7edf7;
}
.pd-level-top{display:flex;justify-content:space-between;font-size:8px;color:#7483a1}
.pd-level-top b,.pd-level-top strong{color:#7258e8}
.pd-xp{height:7px;border-radius:99px;background:#e9eef7;overflow:hidden;margin:7px 0 4px}
.pd-xp i{display:block;width:0;height:100%;background:linear-gradient(90deg,#4b9cff,#735ff2)}
.pd-level>small{font-size:6px;color:#96a3bb}
.pd-wallet{
  margin-top:8px;
  padding:12px;
  border-radius:17px;
  color:white;
  background:linear-gradient(120deg,#4c8fff,#55c5df);
}
.pd-wallet span{display:block;font-size:7px}
.pd-wallet strong{display:block;font-size:22px;margin-top:1px}
.pd-wallet small{font-size:7px;opacity:.85}

.pd-tabs{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:5px;
  margin:10px 0;
}
.pd-tab{
  border:0;border-radius:10px;padding:8px 4px;
  background:#edf3fa;color:#71809e;
  font-size:7px;font-weight:900
}
.pd-tab.active{
  color:white;background:linear-gradient(90deg,#4b90ff,#705cff)
}
.pd-panel{display:none}
.pd-panel.active{display:block}

.pd-stat-grid{
  display:grid;grid-template-columns:repeat(3,1fr);gap:6px;margin-bottom:8px
}
.pd-stat-grid>div{
  padding:9px;border-radius:13px;text-align:center;background:#f4f7fc
}
.pd-stat-grid span{display:block;font-size:6px;color:#8e9ab4}
.pd-stat-grid b{display:block;margin-top:2px;font-size:14px}

.pd-action-row{
  width:100%;
  border:0;
  border-bottom:1px solid #ebf0f7;
  background:transparent;
  display:grid;
  grid-template-columns:38px 1fr auto;
  gap:9px;align-items:center;
  padding:9px 2px;text-align:left
}
.pd-action-icon{
  width:36px;height:36px;border-radius:12px;display:grid;place-items:center;font-weight:900
}
.pd-action-icon.blue{background:#e5f2ff;color:#438cff}
.pd-action-icon.purple{background:#eee8ff;color:#7458ed}
.pd-action-icon.mint{background:#def7ef;color:#20ad7f}
.pd-action-row>span:nth-child(2){display:flex;flex-direction:column}
.pd-action-row b{font-size:9px}
.pd-action-row small{font-size:6px;color:#95a1b9;margin-top:2px}
.pd-action-row em{font-style:normal;color:#b1bdd1;font-size:17px}
.pd-logout{
  margin-top:9px;width:100%;border:0;border-radius:11px;padding:9px;
  color:#d84b65;background:#ffedf1;font-size:8px;font-weight:900
}

.pd-panel label{
  display:flex;flex-direction:column;gap:4px;
  margin-bottom:8px;
  color:#71809e;font-size:7px;font-weight:900
}
.pd-panel input,.pd-panel textarea{
  border:1px solid #dfe7f2;border-radius:10px;padding:9px;
  outline:0;background:#fff;font:inherit;font-size:8px
}
.pd-panel input:focus,.pd-panel textarea:focus{
  border-color:#6b8fff;box-shadow:0 0 0 3px rgba(75,140,255,.08)
}
.pd-avatar-title,.pd-history-title{
  margin:10px 0 6px;font-size:7px;color:#7483a0;font-weight:900
}
.pd-avatar-presets{display:flex;gap:7px;margin-bottom:9px}
.pd-avatar-preset{
  width:43px;height:43px;border-radius:13px;border:2px solid transparent;
  display:grid;place-items:center;color:white;font-weight:900;font-size:15px
}
.pd-avatar-preset.selected{border-color:#438cff;box-shadow:0 0 0 3px rgba(67,140,255,.1)}
.pd-primary{
  width:100%;border:0;border-radius:11px;padding:9px;
  color:white;background:linear-gradient(90deg,#438cff,#705cff);
  font-size:8px;font-weight:900
}
.pd-message{display:block;margin-top:6px;font-size:7px;color:#71809d}
.pd-info-box{
  padding:10px;border-radius:13px;background:#fff5d8;margin-bottom:9px;color:#8c6500
}
.pd-info-box b{display:block;font-size:10px}
.pd-info-box span{font-size:7px}
.pd-history-row{
  display:grid;grid-template-columns:1fr auto;gap:6px;
  padding:8px 2px;border-bottom:1px solid #ebf0f7
}
.pd-history-row b{font-size:8px}
.pd-history-row small{display:block;font-size:6px;color:#8e9ab2}
.pd-status{font-size:7px;font-weight:900;color:#7259e6}

/* Hide old full profile modal entirely */
#profileModal{display:none!important}

/* mobile */
@media(max-width:760px){
  .profile-dropdown{
    position:fixed;
    left:10px;right:10px;top:72px;
    width:auto;
    max-height:calc(100vh - 85px);
  }
}


/* =========================================================
   BRAND CARD PRO — clean premium casual-game header
   ========================================================= */

.sidebar-brand-fixed{
  padding-top:14px !important;
}

.brand-card-pro{
  position:relative;
  height:142px;
  border-radius:28px;
  overflow:hidden;
  margin-bottom:16px;

  background:
    radial-gradient(circle at 82% 18%, rgba(255,255,255,.68), transparent 23%),
    radial-gradient(circle at 6% 100%, rgba(89,213,229,.22), transparent 34%),
    linear-gradient(145deg,#edf8ff 0%,#eef1ff 56%,#f2eaff 100%);

  border:1px solid rgba(217,228,246,.94);

  box-shadow:
    0 18px 42px rgba(65,89,144,.11),
    inset 0 1px 0 rgba(255,255,255,.9);
}

.brand-card-pro::after{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  background:
    linear-gradient(120deg, rgba(255,255,255,.20), transparent 45%);
}

.brand-glow{
  position:absolute;
  border-radius:50%;
  filter:blur(3px);
  pointer-events:none;
}

.glow-a{
  width:110px;
  height:110px;
  right:-35px;
  top:-35px;
  background:rgba(103,94,255,.11);
}

.glow-b{
  width:95px;
  height:95px;
  left:-35px;
  bottom:-40px;
  background:rgba(83,205,226,.14);
}

.brand-pro-left{
  position:absolute;
  left:15px;
  top:15px;
  bottom:14px;
  z-index:4;
  display:flex;
  flex-direction:column;
  align-items:flex-start;
}

.brand-pro-logo{
  width:46px;
  height:46px;
  border-radius:16px;
  display:grid;
  place-items:center;
  position:relative;

  color:#fff;

  background:
    radial-gradient(circle at 28% 18%,rgba(255,255,255,.42),transparent 27%),
    linear-gradient(145deg,#4aa6ff 0%,#655dff 65%,#a75dff 100%);

  border:1px solid rgba(255,255,255,.74);

  box-shadow:
    0 9px 18px rgba(74,95,220,.18),
    inset 0 1px 0 rgba(255,255,255,.40);
}

.brand-pro-crown{
  position:absolute;
  top:-10px;
  color:#ffd34e;
  font-size:16px;
  transform:rotate(-4deg);
  filter:drop-shadow(0 2px 3px rgba(167,100,0,.18));
}

.brand-pro-np{
  font-size:14px;
  font-weight:900;
  letter-spacing:-.5px;
}

.brand-pro-copy{
  margin-top:10px;
  display:flex;
  flex-direction:column;
  align-items:flex-start;
}

.brand-pro-copy strong{
  color:#17234e;
  font-size:21px;
  line-height:1;
  letter-spacing:-.55px;
}

.brand-pro-copy span{
  margin-top:5px;
  color:#8592af;
  font-size:7px;
  font-weight:900;
  letter-spacing:.08px;
}

.brand-pro-status{
  margin-top:auto;

  display:inline-flex;
  align-items:center;
  gap:6px;

  padding:5px 8px;
  border-radius:999px;

  color:#3f7fbe;
  background:rgba(255,255,255,.72);

  border:1px solid rgba(210,223,242,.92);

  font-size:6px;
  font-weight:900;

  box-shadow:0 5px 12px rgba(63,91,148,.05);
}

.brand-pro-status i{
  width:6px;
  height:6px;
  border-radius:50%;
  background:#44d994;
  box-shadow:0 0 0 3px rgba(68,217,148,.11);
}

.brand-pro-art{
  position:absolute;
  right:0;
  bottom:0;
  width:134px;
  height:142px;
  overflow:hidden;
  z-index:3;
}

.brand-pro-robot{
  position:absolute !important;

  width:142px !important;
  height:150px !important;
  max-width:142px !important;
  max-height:150px !important;

  object-fit:contain !important;

  right:-16px !important;
  bottom:-18px !important;

  filter:
    drop-shadow(0 13px 16px rgba(45,48,120,.16));
}

.brand-pro-coin{
  position:absolute !important;

  width:34px !important;
  height:34px !important;
  max-width:34px !important;
  max-height:34px !important;

  object-fit:contain !important;

  left:0 !important;
  bottom:13px !important;

  transform:rotate(-12deg);

  filter:drop-shadow(0 5px 6px rgba(142,87,0,.14));

  z-index:5;
}

.brand-pro-star{
  position:absolute;
  z-index:5;

  color:#ffd951;
  text-shadow:0 0 8px rgba(255,255,255,.55);

  font-style:normal;
}

.brand-pro-star.star-a{
  top:13px;
  right:19px;
  font-size:15px;
}

.brand-pro-star.star-b{
  top:31px;
  left:8px;
  font-size:7px;
}

/* remove any old brand visuals still leaking */
.sidebar-brand-fixed > .brand,
.sidebar-brand-fixed > .side-hero,
.sidebar-brand-fixed > .side-brand-card{
  display:none !important;
}

/* compact version */
@media(max-width:1100px){
  .brand-card-pro{
    height:78px;
    border-radius:20px;
    margin-bottom:12px;
  }

  .brand-pro-left{
    display:none;
  }

  .brand-pro-art{
    width:78px;
    height:78px;
    right:50%;
    transform:translateX(50%);
  }

  .brand-pro-robot{
    width:84px !important;
    height:90px !important;
    max-width:84px !important;
    max-height:90px !important;
    right:-3px !important;
    bottom:-13px !important;
  }

  .brand-pro-coin,
  .brand-pro-star{
    display:none !important;
  }
}


/* Mascot brand logo */
.brand-pro-logo.mascot-logo{
  overflow:hidden !important;
  padding:0 !important;
  background:
    radial-gradient(circle at 25% 18%,rgba(255,255,255,.55),transparent 28%),
    linear-gradient(145deg,#dff4ff,#eee9ff) !important;
  border:1px solid rgba(214,228,246,.95) !important;
  box-shadow:0 8px 17px rgba(62,91,154,.10) !important;
}
.mascot-logo-img{
  width:54px !important;
  height:54px !important;
  max-width:54px !important;
  max-height:54px !important;
  object-fit:contain !important;
  transform:translate(-4px,4px) scale(1.12);
  display:block !important;
}


/* =========================================================
   GAMEPLAY V2 — REAL FEEDBACK / FAIL STATES
   ========================================================= */
.game-hud{
  position:absolute;left:15px;top:15px;z-index:10;
  display:flex;gap:7px;flex-wrap:wrap
}
.game-hud span{
  padding:6px 9px;border-radius:999px;background:rgba(255,255,255,.9);
  color:#536481;font-size:8px;font-weight:900;box-shadow:0 5px 12px rgba(40,61,112,.08)
}
.feedback-pop{
  position:absolute;z-index:50;pointer-events:none;
  font-size:20px;font-weight:900;color:#21b87d;
  animation:feedbackPop .55s ease forwards
}
.feedback-pop.bad{color:#e9546e}
@keyframes feedbackPop{
  0%{opacity:0;transform:translateY(8px) scale(.7)}
  25%{opacity:1;transform:translateY(0) scale(1.1)}
  100%{opacity:0;transform:translateY(-25px) scale(.9)}
}

/* Balloon */
.balloon-stage{
  position:absolute;inset:0;overflow:hidden;
  background:linear-gradient(180deg,#dff5ff 0%,#eff0ff 60%,#f9ecff 100%)
}
.balloon{
  position:absolute;border:0;width:62px;height:76px;border-radius:50% 50% 46% 46%;
  color:white;font-size:23px;font-weight:900;
  box-shadow:inset -9px -12px 18px rgba(80,30,130,.11),0 12px 25px rgba(65,71,140,.13);
  animation:balloonFloat linear forwards;
}
.balloon::after{
  content:"";position:absolute;left:50%;bottom:-30px;width:1px;height:31px;background:#8d88ae
}
.balloon.pop{
  animation:none!important;
  transform:scale(1.4);
  opacity:0;
  transition:.18s ease
}
@keyframes balloonFloat{
  from{transform:translateY(0)}
  to{transform:translateY(-570px)}
}

/* Falling item games */
.fall-stage{
  position:absolute;inset:0;overflow:hidden;
  background:linear-gradient(180deg,#dff5ff,#eef0ff)
}
.falling-item{
  position:absolute;width:60px;height:60px;border:0;border-radius:50%;
  font-size:31px;background:rgba(255,255,255,.92);
  box-shadow:0 12px 25px rgba(55,78,130,.12)
}
.falling-item.hit{
  transform:scale(.25) rotate(30deg);
  opacity:0;
  transition:.2s ease
}

/* Aim target */
.aim-stage{position:absolute;inset:0;background:linear-gradient(180deg,#eef7ff,#f1edff)}
.aim-target{
  position:absolute;width:74px;height:74px;border:7px solid white;border-radius:50%;
  display:grid;place-items:center;color:white;font-size:21px;font-weight:900;
  background:radial-gradient(circle,#ffda54 0 25%,#ff6f7c 26% 50%,#4b91ff 51% 72%,#fff 73%);
  box-shadow:0 15px 28px rgba(67,86,150,.18)
}
.aim-target.hit{animation:targetHit .2s ease}
@keyframes targetHit{50%{transform:scale(.75)}}

/* Word/math feedback */
.answer-good{animation:answerGood .28s ease}
.answer-bad{animation:answerBad .28s ease}
@keyframes answerGood{50%{box-shadow:0 0 0 5px rgba(40,201,132,.18)}}
@keyframes answerBad{25%,75%{transform:translateX(-5px)}50%{transform:translateX(5px)}}

/* Block breaker */
.breaker-wrap{height:100%;display:grid;place-items:center;position:relative}
.breaker-canvas{width:min(680px,96%);height:auto;border-radius:22px;background:#152158;box-shadow:0 20px 48px rgba(31,39,94,.24)}
.breaker-info{position:absolute;left:22px;top:18px;color:white;font-size:10px;font-weight:900}

/* Maze */
.real-maze{display:grid;gap:3px;justify-content:center;margin:28px auto 0}
.maze-cell{
  width:48px;height:48px;border:0;border-radius:8px;background:#eaf0f9;
  display:grid;place-items:center;font-size:18px
}
.maze-cell.wall{background:#6f7798;box-shadow:inset 0 0 0 2px rgba(255,255,255,.15)}
.maze-cell.goal{background:#dff8e9}
.maze-controls{display:flex;gap:6px;justify-content:center;margin-top:12px}
.maze-controls button{border:0;border-radius:10px;padding:9px 13px;background:#edf3fb;color:#586b90;font-weight:900}

/* Tower */
.tower-wrap{height:100%;display:grid;place-items:center;position:relative}
.tower-canvas{width:min(650px,96%);height:auto;border-radius:22px;background:linear-gradient(#dff5ff,#f3efff)}


/* HARD ECONOMY qualification note */
.qualification-note{
  margin-top:8px;
  padding:8px 10px;
  border-radius:11px;
  color:#7d5d00;
  background:#fff3c8;
  border:1px solid #f7df8a;
  font-size:8px;
  font-weight:900;
}

.mobile-mode-badge{position:absolute;left:16px;top:-8px;padding:4px 7px;border-radius:999px;background:#eaf3ff;color:#4382e6;font-size:6px;font-weight:900;letter-spacing:.4px}

/* =========================================================
   MOBILE-FIRST APP LAYER
   ========================================================= */
.mobile-bottom-nav{display:none}

@media(max-width:760px){
  html,body{width:100%;overflow-x:hidden;background:#eef6ff}
  body{padding-bottom:74px}
  .app{display:block!important;width:100%!important;min-height:100vh}
  .sidebar{display:none!important}
  main{width:100%!important;max-width:none!important;padding:0 0 82px!important;margin:0!important}
  .topbar{
    position:sticky!important;top:0!important;z-index:5000!important;
    width:100%!important;height:64px!important;border-radius:0!important;margin:0!important;
    padding:0 12px!important;box-shadow:0 5px 16px rgba(49,78,137,.07)!important
  }
  .mobile-mode-badge{display:none!important}
  .search{display:none!important}
  .user{margin-left:auto!important;gap:6px!important}
  .bell{display:none!important}
  .profile{padding:4px 7px 4px 5px!important;border-radius:12px!important}
  .profile>span{width:30px!important;height:30px!important}
  .profile small{display:none!important}
  .profile b{font-size:9px!important}
  .balance{padding:5px 8px 5px 5px!important;border-radius:12px!important}
  .balance img{width:24px!important;height:24px!important}
  .balance b{font-size:9px!important}

  .grid{display:block!important;width:100%!important}
  .maincol{display:flex!important;flex-direction:column!important;gap:10px!important;padding:10px!important}
  .rightcol{
    display:flex!important;flex-direction:column!important;gap:10px!important;
    padding:0 10px 10px!important
  }

  .hero{
    width:100%!important;height:198px!important;border-radius:23px!important;
    margin:0!important
  }
  .hero-copy{width:72%!important;padding:18px!important}
  .hero-copy small{display:none!important}
  .hero-copy h1{font-size:28px!important;letter-spacing:-1px!important;margin:0 0 8px!important}
  .hero-copy p{font-size:9px!important;margin-bottom:11px!important;max-width:190px!important}
  .bar{height:11px!important}.bar-meta{font-size:7px!important}
  .hero-copy button{font-size:8px!important;padding:8px 10px!important;margin-top:9px!important}
  .hero-art{width:42%!important}
  .hero-robot{width:175px!important;height:190px!important;right:-31px!important;bottom:-7px!important}
  .hero-coin-one{width:34px!important;height:34px!important;left:-2px!important;top:58px!important}
  .hero-coin-two{display:none!important}

  .quick{display:grid!important;grid-template-columns:repeat(4,1fr)!important;gap:6px!important}
  .quick article{
    height:71px!important;padding:6px 3px!important;border-radius:17px!important;
    display:flex!important;flex-direction:column!important;justify-content:center!important;gap:4px!important;text-align:center!important
  }
  .thumb{width:36px!important;height:36px!important;border-radius:11px!important}
  .thumb img{width:36px!important;height:36px!important}
  .cointhumb img{width:30px!important;height:30px!important}
  .quick b{font-size:7px!important}.quick small{display:none!important}

  .head{margin-bottom:7px!important}.head h2{font-size:17px!important}.head small{display:none!important}
  .head button{font-size:8px!important}

  .gamegrid{
    display:flex!important;gap:7px!important;overflow-x:auto!important;padding:0 1px 3px!important;
    scroll-snap-type:x mandatory!important
  }
  .gamegrid::-webkit-scrollbar{display:none}
  .game{
    flex:0 0 132px!important;width:132px!important;padding:5px!important;border-radius:17px!important;
    scroll-snap-align:start!important
  }
  .cover{height:92px!important;border-radius:13px!important}
  .game h3{font-size:10px!important;margin-top:6px!important}
  .game p{font-size:6px!important;margin:2px 1px 3px!important;min-height:16px!important}
  .game>button{display:none!important}

  .rankban{
    width:100%!important;height:72px!important;border-radius:18px!important;padding:10px!important;gap:8px!important
  }
  .trophy{width:42px!important;height:42px!important;border-radius:13px!important;font-size:22px!important}
  .rankban b{font-size:9px!important}.rankban span{font-size:6px!important}
  .rankban button{width:30px!important;height:30px!important}

  .twocol{display:grid!important;grid-template-columns:1fr!important;gap:8px!important}
  .card{border-radius:18px!important;padding:12px!important}
  .cardhead h3{font-size:12px!important}.cardhead a{font-size:7px!important}
  .row{min-height:34px!important;font-size:7px!important}
  .raffbody{height:82px!important}
  .raffbody b{font-size:22px!important}.gift{width:54px!important;height:54px!important;font-size:29px!important}

  .rightcol .wallet,.rightcol .tasks,.rightcol .bigpromo{display:block!important}
  .walletbox{height:106px!important}
  .walletbox b{font-size:21px!important}
  .tasks .task{height:49px!important}
  .bigpromo{height:175px!important;grid-template-columns:1fr 108px!important}
  .bp-copy h3{font-size:21px!important}.bp-copy h3 strong{font-size:24px!important}
  .bp-robot{width:125px!important;height:150px!important}

  /* games catalog becomes in-app page, not desktop overlay */
  .catalog-page{
    left:0!important;right:0!important;top:64px!important;bottom:67px!important;
    padding:0!important;background:#eef6ff!important;z-index:6000!important
  }
  .catalog-shell{width:100%!important;margin:0!important}
  .catalog-top{
    border-radius:0 0 24px 24px!important;padding:20px 16px!important;min-height:145px!important
  }
  .catalog-top h1{font-size:27px!important;margin:3px 0 5px!important}
  .catalog-top p{font-size:9px!important;max-width:310px!important}
  .catalog-close{width:36px!important;height:36px!important;font-size:21px!important}
  .catalog-toolbar{
    margin:10px!important;padding:9px!important;border-radius:16px!important;display:block!important
  }
  .catalog-search{padding:9px!important}
  .catalog-filters{display:flex!important;overflow-x:auto!important;flex-wrap:nowrap!important;margin-top:7px!important}
  .catalog-filters::-webkit-scrollbar{display:none}
  .catalog-filters button{flex:0 0 auto!important}
  .catalog-summary{margin:10px!important;grid-template-columns:repeat(3,1fr)!important;gap:6px!important}
  .catalog-summary>div{padding:9px!important;border-radius:14px!important}
  .catalog-summary span{font-size:6px!important}.catalog-summary b{font-size:13px!important}
  .games-catalog-grid{
    grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:8px!important;padding:0 10px 16px!important
  }
  .catalog-game-card{border-radius:18px!important}
  .catalog-game-art{height:102px!important;font-size:33px!important}
  .catalog-game-body{padding:9px!important}
  .catalog-game-body h3{font-size:10px!important}
  .catalog-game-body p{font-size:6px!important;min-height:22px!important}
  .catalog-game-meta span{font-size:5px!important}
  .catalog-game-play{padding:8px!important;font-size:7px!important}

  /* profile dropdown as full-width bottom sheet */
  .profile-dropdown{
    position:fixed!important;left:8px!important;right:8px!important;top:72px!important;bottom:75px!important;
    width:auto!important;max-height:none!important;border-radius:22px!important;overflow:auto!important;z-index:12000!important
  }
  .pd-head{grid-template-columns:48px 1fr 32px!important}
  .pd-avatar{width:48px!important;height:48px!important}
  .pd-tabs{position:sticky!important;top:-14px!important;z-index:3!important;background:#fff!important;padding-top:5px!important}

  /* game modal true full screen */
  .game-modal{padding:0!important}
  .game-shell{width:100vw!important;height:100vh!important;max-height:none!important;border-radius:0!important}
  .game-top{height:72px!important;padding:10px!important}
  .game-stage{min-height:calc(100vh - 72px)!important}
  .game-intro,.game-result{min-height:calc(100vh - 72px)!important;padding:22px!important}
  .game-top h2{font-size:17px!important}
  .game-stats>div{min-width:52px!important;padding:7px!important}
  .game-close{width:36px!important;height:36px!important}

  .mobile-bottom-nav{
    position:fixed;left:0;right:0;bottom:0;height:67px;z-index:10000;
    display:grid!important;grid-template-columns:repeat(5,1fr);
    padding:5px 5px 7px;background:rgba(255,255,255,.97);
    backdrop-filter:blur(18px);border-top:1px solid #e3ebf6;box-shadow:0 -8px 24px rgba(49,78,137,.07)
  }
  .mbn{
    border:0;background:transparent;color:#8795b3;display:flex;flex-direction:column;
    align-items:center;justify-content:center;gap:1px;font-weight:800
  }
  .mbn span{font-size:17px}.mbn small{font-size:6px}
  .mbn.active{color:#397ff4}
}

@media(min-width:761px){
  .mobile-bottom-nav{display:none!important}
}


/* =========================================================
   V3 MOBILE TYPOGRAPHY + PROFILE OVERLAY
   ========================================================= */
@media(max-width:760px){
  .catalog-game-body{
    padding:11px 10px 12px!important;
  }
  .catalog-game-body h3{
    font-size:14px!important;
    line-height:1.15!important;
    letter-spacing:-.15px!important;
  }
  .catalog-game-body p{
    margin:5px 0 9px!important;
    min-height:34px!important;
    font-size:9px!important;
    line-height:1.35!important;
  }
  .catalog-game-meta{
    gap:5px!important;
    margin-bottom:9px!important;
  }
  .catalog-game-meta span{
    padding:5px 6px!important;
    font-size:7px!important;
    border-radius:8px!important;
  }
  .catalog-game-play{
    padding:10px 8px!important;
    font-size:9px!important;
    border-radius:11px!important;
  }
  .catalog-game-rights{
    padding:5px 8px!important;
    font-size:8px!important;
  }
  .catalog-game-art{
    height:112px!important;
    font-size:38px!important;
  }
  .games-catalog-grid{
    gap:10px!important;
  }
}

/* Profile backdrop */
.profile-dim{
  position:fixed;
  inset:0;
  z-index:11950;
  background:rgba(16,26,61,.45);
  backdrop-filter:blur(6px);
  opacity:1;
  transition:.16s ease;
}
.profile-dim.hidden{display:none!important}

/* keep dropdown above backdrop */
.profile-dropdown{z-index:12000!important}

/* desktop profile dropdown backdrop */
@media(min-width:761px){
  .profile-dropdown{
    box-shadow:0 34px 85px rgba(15,28,69,.30)!important;
  }
}

/* mobile profile becomes true sheet */
@media(max-width:760px){
  .profile-dropdown{
    left:8px!important;
    right:8px!important;
    top:76px!important;
    bottom:76px!important;
    width:auto!important;
    border-radius:24px!important;
    box-shadow:0 26px 70px rgba(14,27,68,.30)!important;
  }
}


/* =========================================================
   V4 — MOBILE READABILITY
   ========================================================= */
@media(max-width:760px){
  body{
    font-size:14px!important;
  }

  /* catalog */
  .catalog-top small{
    font-size:10px!important;
  }
  .catalog-top h1{
    font-size:32px!important;
    line-height:1.05!important;
  }
  .catalog-top p{
    font-size:12px!important;
    line-height:1.5!important;
  }

  .catalog-search{
    font-size:13px!important;
  }
  .catalog-search input{
    font-size:13px!important;
  }

  .catalog-filters button{
    font-size:10px!important;
    padding:9px 12px!important;
  }

  .catalog-summary span{
    font-size:8px!important;
  }
  .catalog-summary b{
    font-size:16px!important;
  }

  .catalog-game-body{
    padding:12px 11px 13px!important;
  }

  .catalog-game-body h3{
    font-size:16px!important;
    line-height:1.15!important;
    font-weight:900!important;
    letter-spacing:-.2px!important;
  }

  .catalog-game-body p{
    margin:6px 0 10px!important;
    min-height:40px!important;
    font-size:11px!important;
    line-height:1.4!important;
    font-weight:700!important;
  }

  .catalog-game-meta{
    gap:6px!important;
    margin-bottom:10px!important;
  }

  .catalog-game-meta span{
    padding:6px 7px!important;
    border-radius:9px!important;
    font-size:9px!important;
    line-height:1!important;
  }

  .catalog-game-play{
    padding:11px 9px!important;
    border-radius:12px!important;
    font-size:11px!important;
    font-weight:900!important;
  }

  .catalog-game-rights{
    top:8px!important;
    right:8px!important;
    padding:6px 9px!important;
    font-size:10px!important;
  }

  .catalog-game-art{
    height:122px!important;
    font-size:42px!important;
  }

  .games-catalog-grid{
    gap:11px!important;
  }

  /* home app readability */
  .hero-copy h1{
    font-size:31px!important;
    line-height:1.02!important;
  }

  .hero-copy p{
    font-size:11px!important;
    line-height:1.45!important;
  }

  .quick b{
    font-size:9px!important;
  }

  .head h2{
    font-size:20px!important;
  }

  .game h3{
    font-size:12px!important;
    line-height:1.2!important;
  }

  .game p{
    font-size:8px!important;
    line-height:1.35!important;
  }

  .rankban b{
    font-size:11px!important;
  }
  .rankban span{
    font-size:8px!important;
  }

  .cardhead h3{
    font-size:14px!important;
  }

  .row{
    font-size:9px!important;
  }

  .walletbox b{
    font-size:24px!important;
  }

  .task b{
    font-size:10px!important;
  }

  .task strong{
    font-size:9px!important;
  }

  /* bottom nav */
  .mbn span{
    font-size:19px!important;
  }
  .mbn small{
    font-size:8px!important;
  }

  /* profile sheet */
  .pd-person strong{
    font-size:16px!important;
  }
  .pd-person span{
    font-size:10px!important;
  }
  .pd-tab{
    font-size:9px!important;
  }
  .pd-action-row b{
    font-size:11px!important;
  }
  .pd-action-row small{
    font-size:8px!important;
  }
  .pd-panel label{
    font-size:9px!important;
  }
  .pd-panel input,
  .pd-panel textarea{
    font-size:11px!important;
  }
  .pd-primary{
    font-size:10px!important;
  }

  /* modal */
  .game-top h2{
    font-size:20px!important;
  }
  .game-stats b{
    font-size:15px!important;
  }
  .game-stats small{
    font-size:8px!important;
  }
}


/* =========================================================
   MOBILE AUTH
   ========================================================= */
.auth-gate{
  position:fixed;
  inset:0;
  z-index:30000;
  display:grid;
  place-items:center;
  padding:22px;
  overflow:auto;
  background:
    radial-gradient(circle at 7% 0%,rgba(87,197,255,.26),transparent 28%),
    radial-gradient(circle at 94% 5%,rgba(179,127,255,.22),transparent 29%),
    #f2f8ff;
}
.auth-hidden{display:none!important}
.auth-bg-orb{
  position:fixed;
  border-radius:50%;
  filter:blur(4px);
  pointer-events:none;
}
.orb-a{
  width:300px;height:300px;left:-120px;bottom:-100px;
  background:rgba(87,210,226,.16);
}
.orb-b{
  width:330px;height:330px;right:-150px;top:-130px;
  background:rgba(126,91,255,.13);
}
.auth-card{
  width:min(930px,96vw);
  min-height:570px;
  display:grid;
  grid-template-columns:.9fr 1.1fr;
  overflow:hidden;
  border-radius:32px;
  background:#fff;
  border:1px solid rgba(255,255,255,.85);
  box-shadow:0 35px 90px rgba(32,54,111,.18);
}
.auth-visual{
  position:relative;
  overflow:hidden;
  padding:28px;
  color:white;
  background:
    radial-gradient(circle at 82% 17%,rgba(255,255,255,.25),transparent 20%),
    linear-gradient(145deg,#4b8fff 0%,#665eff 53%,#4bcbd7 100%);
}
.auth-brand{
  display:flex;
  align-items:center;
  gap:10px;
  position:relative;
  z-index:3;
}
.auth-brand-avatar{
  width:52px;height:52px;border-radius:17px;
  overflow:hidden;
  background:rgba(255,255,255,.9);
  border:1px solid rgba(255,255,255,.5);
}
.auth-brand-avatar img{
  width:62px;height:62px;max-width:none;
  object-fit:contain;
  transform:translate(-5px,4px);
}
.auth-brand>div:last-child{display:flex;flex-direction:column}
.auth-brand b{font-size:18px}
.auth-brand span{font-size:7px;font-weight:800;opacity:.8}
.auth-copy{
  position:relative;
  z-index:3;
  margin-top:65px;
  max-width:330px;
}
.auth-kicker{
  display:inline-flex;
  padding:6px 9px;
  border-radius:999px;
  background:rgba(255,255,255,.14);
  border:1px solid rgba(255,255,255,.18);
  font-size:7px;
  font-weight:900;
}
.auth-copy h1{
  margin:13px 0 10px;
  font-size:45px;
  line-height:.98;
  letter-spacing:-1.7px;
}
.auth-copy p{
  margin:0;
  max-width:310px;
  font-size:11px;
  line-height:1.55;
  font-weight:700;
  opacity:.88;
}
.auth-robot{
  position:absolute;
  width:300px!important;
  height:340px!important;
  max-width:300px!important;
  max-height:340px!important;
  object-fit:contain!important;
  right:-65px!important;
  bottom:-83px!important;
  filter:drop-shadow(0 20px 20px rgba(39,38,115,.22));
}
.auth-coin{
  position:absolute;
  width:65px!important;
  height:65px!important;
  max-width:65px!important;
  max-height:65px!important;
  object-fit:contain!important;
  right:135px!important;
  bottom:24px!important;
  transform:rotate(-12deg);
}
.auth-form-side{
  padding:30px;
  display:flex;
  flex-direction:column;
}
.auth-tabs{
  width:100%;
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:6px;
  padding:5px;
  border-radius:15px;
  background:#f0f4fa;
}
.auth-tab{
  border:0;
  border-radius:11px;
  padding:10px;
  background:transparent;
  color:#7886a5;
  font-size:9px;
  font-weight:900;
}
.auth-tab.active{
  color:white;
  background:linear-gradient(90deg,#4b8fff,#705cff);
  box-shadow:0 7px 15px rgba(67,102,225,.16);
}
.auth-panel{
  display:none;
  padding-top:24px;
}
.auth-panel.active{display:block}
.auth-title h2{
  margin:0 0 4px;
  font-size:24px;
}
.auth-title p{
  margin:0 0 20px;
  color:#8390aa;
  font-size:9px;
  font-weight:700;
  line-height:1.5;
}
.auth-panel label{
  display:flex;
  flex-direction:column;
  gap:5px;
  margin-bottom:12px;
  color:#657492;
  font-size:8px;
  font-weight:900;
}
.auth-panel input{
  width:100%;
  border:1px solid #dfe7f2;
  border-radius:12px;
  padding:11px 12px;
  outline:0;
  background:#fbfdff;
  color:#17244b;
  font:inherit;
  font-size:10px;
}
.auth-panel input:focus{
  border-color:#6c8fff;
  box-shadow:0 0 0 3px rgba(75,140,255,.08);
}
.auth-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:10px;
}
.password-field{position:relative}
.password-toggle{
  position:absolute;
  right:6px;
  top:50%;
  transform:translateY(-50%);
  width:32px;height:32px;
  border:0;border-radius:9px;
  background:#edf3fa;
}
.password-field input{padding-right:44px}
.auth-check{
  flex-direction:row!important;
  align-items:flex-start!important;
  gap:8px!important;
  font-size:7px!important;
  line-height:1.4!important;
}
.auth-check input{
  width:15px!important;
  height:15px!important;
  margin:1px 0 0!important;
}
.auth-primary{
  width:100%;
  border:0;
  border-radius:13px;
  padding:12px;
  color:white;
  background:linear-gradient(90deg,#438cff,#705cff);
  font-size:10px;
  font-weight:900;
  box-shadow:0 11px 22px rgba(64,102,228,.18);
}
.auth-demo{
  width:100%;
  margin-top:8px;
  border:1px solid #e5ebf4;
  border-radius:13px;
  padding:10px;
  color:#667492;
  background:#f7faff;
  font-size:8px;
  font-weight:900;
}
.auth-demo small{
  display:block;
  margin-top:2px;
  font-size:6px;
  color:#99a4ba;
}
.auth-message{
  min-height:18px;
  margin-top:8px;
  color:#dc536a;
  font-size:8px;
  font-weight:800;
}

@media(max-width:760px){
  .auth-gate{
    padding:0;
    display:block;
    background:#f2f8ff;
  }
  .auth-card{
    width:100%;
    min-height:100vh;
    border-radius:0;
    display:block;
    box-shadow:none;
  }
  .auth-visual{
    height:250px;
    padding:18px;
    border-radius:0 0 28px 28px;
  }
  .auth-copy{
    margin-top:27px;
    max-width:220px;
  }
  .auth-copy h1{
    font-size:32px;
  }
  .auth-copy p{
    font-size:9px;
    max-width:220px;
  }
  .auth-robot{
    width:195px!important;
    height:220px!important;
    max-width:195px!important;
    max-height:220px!important;
    right:-35px!important;
    bottom:-50px!important;
  }
  .auth-coin{
    width:47px!important;
    height:47px!important;
    max-width:47px!important;
    max-height:47px!important;
    right:92px!important;
    bottom:16px!important;
  }
  .auth-form-side{
    padding:18px 16px 32px;
  }
  .auth-panel{
    padding-top:18px;
  }
  .auth-title h2{
    font-size:22px;
  }
  .auth-title p{
    font-size:10px;
  }
  .auth-panel label{
    font-size:10px;
  }
  .auth-panel input{
    padding:12px;
    font-size:13px;
  }
  .auth-grid{
    grid-template-columns:1fr;
    gap:0;
  }
  .auth-tab{
    font-size:11px;
  }
  .auth-primary{
    padding:13px;
    font-size:12px;
  }
  .auth-demo{
    font-size:10px;
  }
}

#logoutOverlay{display:none!important}

/* MOBILE CLICK SAFETY */
.auth-hidden,
.hidden-profile,
.profile-dropdown-hidden,
.profile-dim.hidden{
  display:none!important;
  pointer-events:none!important;
}
.profile-dropdown:not(.profile-dropdown-hidden),
.catalog-page:not(.hidden-profile),
.game-modal.open,
.auth-gate:not(.auth-hidden){
  pointer-events:auto!important;
}
.mobile-bottom-nav,
.mobile-bottom-nav button,
.catalog-game-play,
.profile-button,
.pd-tab,
.pd-action-row,
.side-item,
.game button{
  touch-action:manipulation;
  -webkit-tap-highlight-color:transparent;
}


/* =========================================================
   AVATAR CLEANUP + GAME TEXT READABILITY
   ========================================================= */
.auth-brand-avatar,
.brand-pro-logo,
.mascot-logo,
.side-logo-pill,
.side-brand-logo{
  display:none!important;
}
.auth-brand{gap:0!important}
.auth-brand b{font-size:21px!important}
.auth-brand span{font-size:9px!important}

.brand-pro-left{left:17px!important}
.brand-pro-copy{margin-top:2px!important}
.brand-pro-copy strong{font-size:22px!important}
.brand-pro-copy span{font-size:9px!important;margin-top:5px!important}

/* Desktop/tablet catalog readability */
.catalog-game-body h3{
  font-size:17px!important;
  line-height:1.2!important;
  font-weight:900!important;
  letter-spacing:-.2px!important;
}
.catalog-game-body p{
  font-size:11px!important;
  line-height:1.45!important;
  min-height:48px!important;
  margin:7px 0 11px!important;
  color:#7383a3!important;
  font-weight:700!important;
}
.catalog-game-meta span{
  font-size:9px!important;
  line-height:1!important;
  padding:6px 8px!important;
  border-radius:9px!important;
}
.catalog-game-play{
  font-size:11px!important;
  padding:11px 9px!important;
  border-radius:11px!important;
}
.catalog-game-rights{
  font-size:10px!important;
  padding:6px 9px!important;
}

/* Home featured game cards */
.game h3,.gameMeta h3,.game-copy h3{
  font-size:15px!important;
  line-height:1.2!important;
}
.game p,.gameMeta p,.game-copy p{
  font-size:10px!important;
  line-height:1.4!important;
  color:#7f8eaa!important;
}
.game>button,.gameMeta button,.game-copy button{
  font-size:10px!important;
}

@media(max-width:760px){
  .catalog-game-body{padding:12px 11px 13px!important}
  .catalog-game-body h3{font-size:16px!important;line-height:1.18!important}
  .catalog-game-body p{
    font-size:11px!important;
    line-height:1.45!important;
    min-height:46px!important;
    margin:7px 0 10px!important
  }
  .catalog-game-meta{gap:6px!important;margin-bottom:10px!important}
  .catalog-game-meta span{font-size:9px!important;padding:6px 7px!important}
  .catalog-game-play{font-size:11px!important;padding:11px 8px!important}
  .catalog-game-rights{font-size:10px!important;padding:6px 9px!important}
  .catalog-game-art{height:120px!important;font-size:42px!important}

  .game h3,.gameMeta h3,.game-copy h3{font-size:13px!important}
  .game p,.gameMeta p,.game-copy p{font-size:9px!important;line-height:1.4!important}
}


/* REMOVE UNWANTED ROBOT+LIGHTNING STICKER EVERYWHERE */
img[src=""]{display:none!important}

/* Clean replacement for empty game artwork slots */
.cover:empty,
.thumb:empty,
.quick-thumb:empty,
.game-cover:empty,
.gameArt:empty,
.catalog-game-art:empty{
  position:relative;
  background:linear-gradient(145deg,#6558ff,#9a63ff)!important;
}
.cover:empty::after,
.thumb:empty::after,
.quick-thumb:empty::after,
.game-cover:empty::after,
.gameArt:empty::after,
.catalog-game-art:empty::after{
  content:"⚡";
  position:absolute;
  inset:0;
  display:grid;
  place-items:center;
  font-size:34px;
  color:#ffe05a;
}

/* Never show the removed sticker class if old markup survives */
.game-sticker,
.hero-game-card,
.hero-mini-card,
.mini-game-art,
.brand-game-card{
  display:none!important;
}


/* FINAL BAD STICKER CLEANUP */
img[src=""]{display:none!important}
.game-sticker,
.hero-game-card,
.hero-mini-card,
.mini-game-art{
  display:none!important;
}


.notif-panel{position:fixed;right:18px;top:78px;width:330px;max-height:70vh;overflow:auto;z-index:13000;padding:12px;border-radius:20px;background:#fff;box-shadow:0 25px 65px rgba(20,34,78,.25);border:1px solid #e5ecf6}.notif-hidden{display:none!important}.notif-head{display:flex;justify-content:space-between;align-items:center;padding:4px 2px 9px}.notif-head button{border:0;width:30px;height:30px;border-radius:9px;background:#edf3fa}.notif-item{padding:10px;border-bottom:1px solid #edf1f6}.notif-item.unread{background:#f1f6ff;border-radius:11px}.notif-item b{display:block;font-size:10px}.notif-item p{margin:3px 0;color:#7d8ba6;font-size:8px;line-height:1.4}.notif-item small{font-size:6px;color:#a0abc0}.notif-read{width:100%;border:0;border-radius:10px;padding:8px;background:#edf4ff;color:#3f7fe8;font-size:8px;font-weight:900}@media(max-width:760px){.notif-panel{left:8px;right:8px;top:70px;width:auto;bottom:76px;max-height:none}}


.notif-button{position:relative!important}
.notif-badge{
  position:absolute;right:-4px;top:-5px;
  min-width:18px;height:18px;padding:0 5px;border-radius:999px;
  display:grid;place-items:center;background:#ff4f6e;color:white;
  font-size:8px;font-weight:900;border:2px solid #fff;
}
.notif-badge-hidden{display:none!important}


.utility-sheet{position:fixed;left:12px;right:12px;top:76px;bottom:78px;z-index:12500;background:#fff;border-radius:23px;padding:14px;overflow:auto;box-shadow:0 28px 70px rgba(17,31,75,.28);border:1px solid #e3eaf5}
.utility-hidden{display:none!important}.utility-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:10px}.utility-head b{font-size:16px}.utility-head button{border:0;width:34px;height:34px;border-radius:10px;background:#edf3fa}
.util-card{padding:12px;border-radius:15px;background:#f7faff;border:1px solid #e8eef7;margin-bottom:8px}.util-card b{display:block;font-size:11px}.util-card p{margin:4px 0;color:#7e8daa;font-size:8px;line-height:1.45}.util-card button{border:0;border-radius:9px;padding:7px 9px;background:#4387f7;color:#fff;font-size:8px;font-weight:900}.util-meta{display:flex;gap:5px;flex-wrap:wrap;margin:6px 0}.util-meta span{padding:4px 6px;border-radius:8px;background:#edf3fa;font-size:7px;color:#677694}.util-form input,.util-form textarea{width:100%;margin:5px 0;padding:9px;border:1px solid #dfe7f2;border-radius:9px;font:inherit;font-size:9px}.util-form textarea{min-height:90px}

.pd-tabs{grid-template-columns:repeat(5,1fr)!important}
.pref-row{display:flex!important;flex-direction:row!important;justify-content:space-between!important;align-items:center!important;padding:9px 0;border-bottom:1px solid #edf1f6}
.pref-row input{width:18px!important;height:18px!important}


/* RESTORED APPROVED ARTWORK */
.game .cover{overflow:hidden}
.game .cover>img{
  width:100%!important;height:100%!important;object-fit:cover!important;
  display:block!important;
}
.game .cover>span{position:absolute!important;z-index:2!important}
.task>span{overflow:hidden!important;display:grid!important;place-items:center!important}
.task>span>img{
  width:100%!important;height:100%!important;object-fit:cover!important;display:block!important;
}
.side-icon.image-card{overflow:hidden!important}
.side-icon.image-card>img{
  width:100%!important;height:100%!important;object-fit:cover!important;display:block!important;
}


/* DIRECT REGISTER: no OTP/email/SMS verification screens */
.otp-panel,.verify-panel,.email-verification,.phone-verification,
[data-step="otp"],[data-step="verify"]{display:none!important}


/* =========================================================
   PREMIUM GAME FX LAYER
   ========================================================= */
.game-shell{
  box-shadow:0 32px 90px rgba(34,64,132,.24)!important;
  border:1px solid rgba(255,255,255,.75)!important;
}
.game-top{
  background:rgba(255,255,255,.88)!important;
  backdrop-filter:blur(18px) saturate(1.2)!important;
  -webkit-backdrop-filter:blur(18px) saturate(1.2)!important;
}
.game-stage{
  background:
    radial-gradient(circle at 20% 10%,rgba(85,194,255,.22),transparent 28%),
    radial-gradient(circle at 82% 18%,rgba(135,92,255,.18),transparent 30%),
    radial-gradient(circle at 50% 100%,rgba(79,230,187,.14),transparent 34%),
    linear-gradient(180deg,#fafdff,#edf5ff)!important;
}
.game-stage::before{
  content:"";position:absolute;inset:-40%;
  background:conic-gradient(from 0deg,transparent,rgba(255,255,255,.3),transparent 28%);
  animation:arenaGlow 11s linear infinite;pointer-events:none;
}
@keyframes arenaGlow{to{transform:rotate(360deg)}}
.game-primary{
  background:linear-gradient(135deg,#3f91ff,#7657ff)!important;
  box-shadow:0 12px 30px rgba(86,91,255,.27)!important;
  transition:.18s transform,.18s box-shadow!important;
}
.game-primary:hover{transform:translateY(-2px) scale(1.015);box-shadow:0 16px 36px rgba(86,91,255,.34)!important}
.game-primary:active{transform:translateY(0) scale(.98)}
.game-stats>div{
  background:linear-gradient(180deg,#fff,#f6f9ff)!important;
  border:1px solid #e5ecf7!important;
  box-shadow:0 7px 18px rgba(42,70,126,.07)!important;
}
#liveScore.score-pop{animation:scorePop .32s ease}
@keyframes scorePop{0%{transform:scale(1)}45%{transform:scale(1.42);color:#5d59ff}100%{transform:scale(1)}}
.game-stage.fx-hit{animation:stageHit .25s ease}
@keyframes stageHit{50%{filter:brightness(1.08) saturate(1.15)}}
.game-stage.fx-miss{animation:stageShake .28s ease}
@keyframes stageShake{20%{transform:translateX(-5px)}40%{transform:translateX(5px)}60%{transform:translateX(-3px)}80%{transform:translateX(3px)}}
.fx-float{
  position:absolute;z-index:999;pointer-events:none;font-weight:1000;
  font-size:18px;color:#5a5cff;text-shadow:0 3px 12px rgba(78,79,255,.25);
  animation:floatScore .7s ease forwards;
}
@keyframes floatScore{0%{opacity:0;transform:translate(-50%,0) scale(.7)}20%{opacity:1;transform:translate(-50%,-8px) scale(1.15)}100%{opacity:0;transform:translate(-50%,-48px) scale(.9)}}
.combo-pill{
  position:absolute;top:18px;left:50%;transform:translateX(-50%);
  z-index:1000;padding:8px 13px;border-radius:999px;
  background:linear-gradient(135deg,#725cff,#ff6ab7);color:#fff;font-weight:1000;
  font-size:11px;box-shadow:0 10px 26px rgba(111,83,255,.28);
  opacity:0;transition:.2s;
}
.combo-pill.show{opacity:1;transform:translateX(-50%) translateY(4px) scale(1.04)}
.fx-ripple{
  position:fixed;z-index:15000;width:12px;height:12px;border-radius:50%;
  border:2px solid rgba(108,91,255,.55);pointer-events:none;
  animation:rippleFx .55s ease-out forwards;
}
@keyframes rippleFx{to{width:72px;height:72px;margin:-30px;opacity:0}}
.result-badge{animation:resultBounce .7s cubic-bezier(.2,.8,.2,1)}
@keyframes resultBounce{0%{transform:scale(.3) rotate(-12deg);opacity:0}60%{transform:scale(1.18) rotate(4deg)}100%{transform:scale(1) rotate(0)}}
.game-result.fx-success{background:radial-gradient(circle at 50% 24%,rgba(61,216,157,.22),transparent 35%)}
.game-result.fx-fail{background:radial-gradient(circle at 50% 24%,rgba(255,93,120,.15),transparent 35%)}
.premium-confetti{position:absolute;inset:0;pointer-events:none;overflow:hidden;z-index:20}
.premium-confetti i{position:absolute;top:-10%;width:8px;height:15px;border-radius:3px;animation:confettiFall 1.9s ease-in forwards}
@keyframes confettiFall{to{transform:translateY(115vh) rotate(620deg);opacity:.15}}
.mini-game button,.color-tile,.reflex-target{transition:transform .12s ease,box-shadow .12s ease,filter .12s ease}
.mini-game button:active,.color-tile:active,.reflex-target:active{transform:scale(.93)!important;filter:saturate(1.18)}


/* PREMIUM APP POLISH */
.game,.catalog-game-card,.advanced-panel,.task-card,.wallet-card{
  transition:transform .22s ease,box-shadow .22s ease!important;
}
.game:hover,.catalog-game-card:hover{
  transform:translateY(-4px)!important;
  box-shadow:0 18px 42px rgba(47,77,138,.14)!important;
}
.game .cover,.catalog-game-art{position:relative;isolation:isolate}
.game .cover::after,.catalog-game-art::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(120deg,transparent 20%,rgba(255,255,255,.22) 45%,transparent 70%);
  transform:translateX(-120%);animation:cardSheen 6s ease-in-out infinite;
}
@keyframes cardSheen{0%,72%{transform:translateX(-120%)}88%,100%{transform:translateX(120%)}}


/* VERIFIED SIDEBAR + TASK ART */
.side-icon.image-card{overflow:hidden!important}
.side-icon.image-card>img,
.task>span>img{
  width:100%!important;height:100%!important;object-fit:cover!important;display:block!important;
}
.task>span{overflow:hidden!important}


/* BALLOON INPUT FIX */
.balloon-stage{touch-action:manipulation!important;pointer-events:auto!important}
.balloon{
  z-index:30!important;
  width:72px!important;height:88px!important;
  cursor:pointer!important;touch-action:manipulation!important;
  pointer-events:auto!important;
  -webkit-tap-highlight-color:transparent;
}
.balloon-shine{
  position:absolute;left:16px;top:13px;width:15px;height:23px;border-radius:50%;
  background:rgba(255,255,255,.55);transform:rotate(24deg);pointer-events:none
}
.balloon-bomb{display:grid;place-items:center;width:100%;height:100%;font-size:31px;pointer-events:none}
.balloon-tip{
  position:absolute;left:50%;top:52px;transform:translateX(-50%);
  z-index:2;padding:6px 10px;border-radius:999px;background:rgba(255,255,255,.8);
  color:#637493;font-size:9px;font-weight:900;pointer-events:none
}
.game-stage::before{pointer-events:none!important}


/* =========================================================
   PREMIUM PLUS — APP / PROFILE
   ========================================================= */
:root{
  --np-ink:#12214b;--np-muted:#7888a7;--np-blue:#4a91ff;--np-violet:#735cff;
  --np-mint:#4dd8bd;--np-surface:rgba(255,255,255,.92);--np-line:#e5edf8;
  --np-shadow:0 22px 60px rgba(45,72,132,.13);
}
body{
  background:
    radial-gradient(circle at 7% 0%,rgba(76,167,255,.15),transparent 25%),
    radial-gradient(circle at 94% 4%,rgba(126,93,255,.12),transparent 24%),
    #f4f8ff!important;
}
.sidebar{
  background:rgba(255,255,255,.88)!important;
  backdrop-filter:blur(22px) saturate(1.18)!important;
  -webkit-backdrop-filter:blur(22px) saturate(1.18)!important;
  border-right:1px solid rgba(217,229,245,.92)!important;
}
.side-item{transition:.22s ease!important}
.side-item:hover{transform:translateX(3px);background:#f1f6ff!important}
.side-item.active{box-shadow:0 12px 28px rgba(75,116,225,.10)!important}
.hero,.game,.tasks,.bigpromo,.side-level-card,.catalog-game-card{
  border:1px solid rgba(255,255,255,.84)!important;
  box-shadow:var(--np-shadow)!important;
}
.profile-modal{
  background:rgba(19,30,66,.28)!important;
  backdrop-filter:blur(14px)!important;
}
.profile-shell{
  width:min(1020px,94vw)!important;
  border-radius:32px!important;
  border:1px solid rgba(255,255,255,.85)!important;
  background:linear-gradient(145deg,rgba(255,255,255,.98),rgba(246,250,255,.98))!important;
  box-shadow:0 38px 100px rgba(25,43,91,.24)!important;
}
.profile-header{
  padding:22px 26px!important;
  background:
    radial-gradient(circle at 80% 0%,rgba(255,255,255,.18),transparent 22%),
    linear-gradient(120deg,#438fff,#725cff 58%,#4fd2c6)!important;
  color:#fff!important;border-bottom:0!important;
}
.profile-header small,.profile-header h2{color:#fff!important}
.profile-layout{grid-template-columns:320px 1fr!important}
.profile-side{
  background:linear-gradient(180deg,#f7faff,#f2f6ff)!important;
  padding:28px!important;
}
.profile-avatar-large,.profile-avatar-preview,.pd-upload-preview{
  border:4px solid rgba(255,255,255,.95)!important;
  box-shadow:0 16px 40px rgba(67,90,160,.20)!important;
}
.profile-avatar-large{
  width:118px!important;height:118px!important;border-radius:34px!important;font-size:48px!important;
}
.profile-content{padding:26px!important}
.profile-tabs{
  padding:5px!important;background:#edf3fb!important;border-radius:15px!important;display:grid!important;
  grid-template-columns:repeat(3,1fr)!important;
}
.profile-tab{background:transparent!important;padding:11px 12px!important;font-size:10px!important}
.profile-tab.active{box-shadow:0 8px 20px rgba(75,95,220,.18)!important}
.profile-tab-panel{
  margin-top:18px;padding:20px;border:1px solid var(--np-line);border-radius:22px;background:rgba(255,255,255,.9);
  box-shadow:0 14px 34px rgba(47,75,135,.07)
}
.profile-tab-panel label{font-size:10px!important}
.profile-tab-panel input,.profile-tab-panel textarea{
  padding:12px!important;border-radius:13px!important;background:#fafdff!important;
}
.profile-primary{
  min-height:44px!important;padding:12px 18px!important;border-radius:13px!important;font-size:10px!important;
  background:linear-gradient(135deg,#438fff,#725cff)!important;box-shadow:0 12px 26px rgba(75,91,223,.22)!important;
  cursor:pointer;transition:.2s ease
}
.profile-primary:hover{transform:translateY(-2px);box-shadow:0 17px 32px rgba(75,91,223,.28)!important}
.profile-secondary{
  border:1px solid #dfe7f4;border-radius:11px;padding:9px 12px;background:#fff;color:#617391;font-size:9px;font-weight:900;cursor:pointer
}
.profile-avatar-editor{
  display:grid;grid-template-columns:94px 1fr;gap:16px;align-items:center;
  padding:16px;margin:16px 0;border-radius:20px;
  background:linear-gradient(145deg,#eef6ff,#f7f2ff);border:1px solid #e0e9f7
}
.profile-avatar-preview{width:88px;height:88px;border-radius:27px;display:grid;place-items:center;font-size:37px;color:#fff;background:linear-gradient(145deg,#4fa5ff,#765cff);background-size:cover;background-position:center}
.profile-avatar-editor-copy b{display:block;font-size:13px;color:var(--np-ink)}
.profile-avatar-editor-copy>span{display:block;margin-top:4px;color:var(--np-muted);font-size:9px;line-height:1.45}
.profile-upload-actions{display:flex;gap:8px;flex-wrap:wrap;margin:10px 0 5px}
.profile-upload-button,.pd-upload-button{
  display:inline-flex!important;align-items:center!important;justify-content:center!important;
  border-radius:11px!important;padding:9px 12px!important;background:linear-gradient(135deg,#4a91ff,#735cff)!important;
  color:#fff!important;font-size:9px!important;font-weight:900!important;cursor:pointer!important
}
.profile-avatar-editor-copy small{color:#8b99b3;font-size:8px}
.avatar-presets{padding:14px;border-radius:18px;background:#f8faff;border:1px solid #e9eef7}
.avatar-preset{
  width:58px!important;height:58px!important;border-radius:18px!important;font-size:27px!important;
  transition:.18s ease!important
}
.avatar-preset:hover{transform:translateY(-3px) scale(1.03)}
.avatar-preset.selected{border-color:#fff!important;box-shadow:0 0 0 3px #568cff,0 10px 24px rgba(74,101,211,.18)!important}

.pd-upload-box{
  display:grid;grid-template-columns:62px 1fr;gap:10px;align-items:center;padding:10px;margin:8px 0 11px;
  border-radius:14px;background:linear-gradient(145deg,#eef6ff,#f8f3ff);border:1px solid #e2eaf6
}
.pd-upload-preview{width:58px;height:58px;border-radius:18px;display:grid;place-items:center;font-size:24px;color:#fff;background:linear-gradient(145deg,#4fa5ff,#765cff);background-size:cover;background-position:center}
.pd-upload-box small{display:block;margin-top:5px;color:#8c99b1;font-size:7px}

@media(max-width:760px){
  .profile-layout{grid-template-columns:1fr!important}
  .profile-side{padding:18px!important}
  .profile-content{padding:14px!important}
  .profile-avatar-editor{grid-template-columns:74px 1fr;gap:12px}
  .profile-avatar-preview{width:70px;height:70px;border-radius:22px}
  .profile-shell{border-radius:0!important}
}


.pattern-preview{display:flex;justify-content:center;gap:10px;padding:34px 12px 24px}
.pattern-preview span{width:52px;height:52px;border-radius:16px;display:grid;place-items:center;background:linear-gradient(145deg,#edf5ff,#f3efff);font-size:25px;color:#5d68d8;box-shadow:0 8px 20px rgba(62,82,150,.09)}
.pattern-choices{display:grid;grid-template-columns:1fr 1fr;gap:10px;width:min(520px,92%);margin:0 auto}
.pattern-option{border:1px solid #e1e9f5;border-radius:15px;padding:15px;background:#fff;color:#27365f;font-size:17px;font-weight:900;box-shadow:0 8px 18px rgba(47,70,126,.06);transition:.16s ease}
.pattern-option:active{transform:scale(.97);background:#eef4ff}


/* =========================================================
   ULTRA POLISH — MOBILE APP
   ========================================================= */
:root{
  --u-shadow-soft:0 12px 34px rgba(37,62,119,.08);
  --u-shadow-card:0 20px 55px rgba(35,64,126,.13);
  --u-radius:22px;
}
*{scrollbar-width:thin;scrollbar-color:#cdd8e9 transparent}
button,input,textarea,select{font-family:inherit}
button{touch-action:manipulation}
button:focus-visible,input:focus-visible,textarea:focus-visible,select:focus-visible{
  outline:3px solid rgba(73,133,255,.22)!important;
  outline-offset:2px!important;
}
.side-item,.mbn,.pd-action-row,.profile-tab,.pd-tab,.game-primary,.catalog-filter,.catalog-filters button{
  min-height:44px
}
.sidebar,.profile-dropdown,.profile-shell,.catalog-shell,.game-shell{
  animation:surfaceIn .32s ease
}
@keyframes surfaceIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}

.app-toast-stack{
  position:fixed;right:18px;top:18px;z-index:60000;display:flex;flex-direction:column;gap:8px;
  width:min(360px,calc(100vw - 28px));pointer-events:none
}
.app-toast{
  pointer-events:auto;padding:12px 14px;border-radius:15px;background:rgba(20,33,70,.96);color:#fff;
  box-shadow:0 18px 48px rgba(22,34,74,.25);display:grid;grid-template-columns:auto 1fr auto;gap:10px;align-items:start;
  animation:toastIn .24s ease
}
.app-toast.success{background:linear-gradient(135deg,#25b982,#3bc5a0)}
.app-toast.error{background:linear-gradient(135deg,#e3516a,#ff7b8f)}
.app-toast .ico{font-size:17px;line-height:1}.app-toast b{display:block;font-size:11px}.app-toast span{display:block;font-size:9px;opacity:.9;margin-top:2px;line-height:1.4}
.app-toast button{border:0;background:transparent;color:white;font-size:17px;padding:0;min-height:auto}
@keyframes toastIn{from{opacity:0;transform:translateY(-8px) scale(.98)}to{opacity:1;transform:none}}

.loading-skeleton{
  position:relative;overflow:hidden;background:#edf3fb!important;color:transparent!important;border-color:transparent!important
}
.loading-skeleton:after{
  content:"";position:absolute;inset:0;transform:translateX(-100%);
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.75),transparent);
  animation:skeletonMove 1.25s infinite
}
@keyframes skeletonMove{to{transform:translateX(100%)}}

.empty-state{
  padding:24px 18px;text-align:center;border-radius:18px;background:linear-gradient(145deg,#f7fbff,#f8f5ff);
  border:1px dashed #d9e4f2;color:#7888a5
}
.empty-state .icon{font-size:30px;display:block;margin-bottom:8px}.empty-state b{display:block;color:#23345f;font-size:12px}.empty-state span{font-size:9px}

.game{
  border-radius:22px!important;overflow:hidden!important;
  background:linear-gradient(180deg,#fff,#fbfdff)!important
}
.game h3{font-size:15px!important;letter-spacing:-.25px}
.game p{font-size:10px!important;line-height:1.5!important}
.game button{min-height:38px!important;border-radius:11px!important}
.game .cover{border-radius:18px!important;overflow:hidden}
.game .cover img{transition:transform .28s ease,filter .28s ease}
.game:hover .cover img{transform:scale(1.045);filter:saturate(1.07)}
.catalog-game-card{
  overflow:hidden!important;border-radius:22px!important;
  background:linear-gradient(180deg,#fff,#fbfdff)!important
}
.catalog-game-card:hover{transform:translateY(-5px)!important}
.catalog-game-body h3{letter-spacing:-.2px!important}

.game-result{
  backdrop-filter:blur(16px)!important;
}
.game-result .result-card,.result-card{
  border-radius:28px!important;
  border:1px solid rgba(255,255,255,.88)!important;
  box-shadow:0 30px 90px rgba(28,46,96,.23)!important;
}
#resultScore{font-size:42px!important;letter-spacing:-1px}
#resultReward{font-size:24px!important}
#resultMessage{max-width:420px;margin-left:auto!important;margin-right:auto!important;line-height:1.5!important}

.profile-dropdown{
  border-radius:24px!important;box-shadow:0 28px 85px rgba(24,43,91,.22)!important;
  border:1px solid rgba(226,234,245,.94)!important
}
.pd-head{padding:16px!important}
.pd-wallet,.pd-level,.pd-info-box{
  border:1px solid #e5edf7!important;box-shadow:var(--u-shadow-soft)!important
}
.pd-action-row{
  transition:.18s ease;border-radius:13px!important
}
.pd-action-row:hover{transform:translateX(3px);background:#f4f8ff!important}
.pd-primary,.profile-primary{
  letter-spacing:.05px;transition:.18s ease
}
.pd-primary:active,.profile-primary:active{transform:translateY(1px) scale(.99)}

.profile-avatar-editor{box-shadow:inset 0 1px rgba(255,255,255,.8),0 12px 30px rgba(58,79,139,.07)}
.profile-upload-button:hover,.pd-upload-button:hover{filter:brightness(1.04);transform:translateY(-1px)}

.mobile-bottom-nav{
  background:rgba(255,255,255,.9)!important;backdrop-filter:blur(22px) saturate(1.18)!important;
  border-top:1px solid rgba(221,231,243,.92)!important;
  box-shadow:0 -12px 35px rgba(37,58,107,.07)!important
}
.mbn{transition:.18s ease}.mbn.active{transform:translateY(-2px)}
.mbn.active span{filter:drop-shadow(0 6px 10px rgba(83,95,220,.18))}

@media(max-width:760px){
  .app-toast-stack{left:14px;right:14px;top:12px;width:auto}
  .profile-dropdown{left:8px!important;right:8px!important;top:68px!important;bottom:76px!important;width:auto!important;max-height:none!important}
  .game-shell{border-radius:0!important}
  .game-stage{min-height:calc(100vh - 150px)!important}
  .catalog-page{padding:10px!important}
  .catalog-top{border-radius:22px!important;padding:20px!important}
}
@media(prefers-reduced-motion:reduce){
  *,*:before,*:after{animation-duration:.001ms!important;animation-iteration-count:1!important;scroll-behavior:auto!important;transition-duration:.001ms!important}
}


/* =========================================================
   REAL APP PAGES — TASKS / RANKING / RAFFLE
   ========================================================= */
.np-page{
  position:fixed;left:270px;right:0;top:0;bottom:0;z-index:9400;overflow:auto;
  padding:24px;background:
    radial-gradient(circle at 8% 0%,rgba(78,171,255,.17),transparent 27%),
    radial-gradient(circle at 94% 5%,rgba(131,92,255,.12),transparent 27%),
    #f2f7fe;
}
.np-page-shell{width:min(1180px,96vw);margin:0 auto 60px}
.np-page-hero{
  min-height:178px;padding:28px 30px;border-radius:28px;color:#fff;display:flex;
  justify-content:space-between;align-items:flex-start;box-shadow:0 22px 55px rgba(56,88,190,.19);
  position:relative;overflow:hidden
}
.np-page-hero:after{content:"";position:absolute;width:250px;height:250px;border-radius:50%;right:-70px;bottom:-165px;border:34px solid rgba(255,255,255,.10)}
.np-page-hero-tasks{background:linear-gradient(125deg,#4a91ff,#765cff 58%,#50d3c2)}
.np-page-hero-ranking{background:linear-gradient(125deg,#665cff,#4b91ff 58%,#51c8e0)}
.np-page-hero-raffle{background:linear-gradient(125deg,#725cff,#af61ef 55%,#ff83ad)}
.np-page-hero small{font-size:8px;font-weight:1000;letter-spacing:1.5px;opacity:.8}
.np-page-hero h1{margin:5px 0;font-size:38px;letter-spacing:-1.2px}
.np-page-hero p{margin:0;max-width:610px;font-size:11px;line-height:1.55;opacity:.9}
.np-page-close{position:relative;z-index:2;border:1px solid rgba(255,255,255,.28);background:rgba(255,255,255,.15);color:#fff;width:40px;height:40px;border-radius:13px;font-size:22px;cursor:pointer}
.np-page-summary,.raffle-page-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin:14px 0}
.np-page-summary>div,.raffle-page-stats>div{padding:15px;border-radius:18px;background:#fff;border:1px solid #e5edf7;box-shadow:0 10px 28px rgba(46,70,125,.07)}
.np-page-summary span,.raffle-page-stats span{display:block;color:#8392ad;font-size:8px;font-weight:900}.np-page-summary b,.raffle-page-stats b{display:block;margin-top:4px;font-size:20px;color:#223660}
.task-page-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:12px}
.task-page-card{padding:17px;border-radius:20px;background:#fff;border:1px solid #e4ecf7;box-shadow:0 12px 32px rgba(40,65,122,.075)}
.task-page-head{display:flex;justify-content:space-between;gap:10px}.task-page-head b{font-size:14px}.task-page-head span{font-size:11px;font-weight:1000;color:#4c80e3}
.task-page-card p{color:#8190aa;font-size:9px;line-height:1.5}.task-progress{height:8px;background:#edf3fa;border-radius:99px;overflow:hidden;margin:10px 0}.task-progress i{display:block;height:100%;background:linear-gradient(90deg,#49a0ff,#745cff);border-radius:99px}
.task-page-card button{width:100%;border:0;border-radius:11px;padding:10px;font-size:9px;font-weight:900;background:linear-gradient(135deg,#438fff,#725cff);color:#fff}.task-page-card button:disabled{background:#edf2f8;color:#99a6bc}
.ranking-toolbar{display:flex;gap:10px;align-items:end;margin:14px 0;padding:14px;border-radius:18px;background:#fff;border:1px solid #e5edf7}.ranking-toolbar label{flex:1;font-size:9px;font-weight:900;color:#71809e}.ranking-toolbar select{display:block;width:100%;margin-top:5px;border:1px solid #dfe7f2;border-radius:11px;padding:10px;background:#fbfdff}.np-page-primary{border:0;border-radius:11px;padding:11px 14px;background:linear-gradient(135deg,#438fff,#725cff);color:#fff;font-weight:900;cursor:pointer}
.ranking-podium{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-bottom:12px}.podium-card{padding:16px;text-align:center;border-radius:19px;background:#fff;border:1px solid #e5edf7;box-shadow:0 12px 30px rgba(42,67,123,.07)}.podium-card .medal{font-size:28px}.podium-card b{display:block;font-size:12px}.podium-card span{font-size:9px;color:#7e8daa}
.ranking-table-wrap{background:#fff;border:1px solid #e5edf7;border-radius:19px;overflow:hidden;box-shadow:0 12px 30px rgba(42,67,123,.07)}.ranking-table{width:100%;border-collapse:collapse}.ranking-table th,.ranking-table td{padding:11px;text-align:left;border-bottom:1px solid #edf2f8;font-size:9px}.ranking-table th{background:#f7faff;color:#7585a2;text-transform:uppercase}.ranking-table tbody tr:last-child td{border-bottom:0}
.np-page-title{font-size:16px;margin:20px 0 10px;color:#24365e}.raffle-page-grid,.raffle-history-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:12px}.raffle-page-card,.raffle-history-card{padding:17px;border-radius:20px;background:#fff;border:1px solid #e5edf7;box-shadow:0 12px 32px rgba(42,67,123,.07)}.raffle-page-card h3,.raffle-history-card h3{margin:0 0 5px;font-size:14px}.raffle-page-card p,.raffle-history-card p{font-size:9px;color:#8090aa}.raffle-ticket-big{font-size:24px;font-weight:1000;color:#6c5ce8;margin:8px 0}.raffle-prize-row{padding:7px 9px;margin-top:6px;border-radius:10px;background:#f6f8ff;font-size:8px;font-weight:900;color:#566a91}
.pd-footer-logout{margin-top:auto;padding:12px 14px;border-top:1px solid #e9eef6;background:#fff;position:sticky;bottom:0}.pd-footer-logout .pd-logout{width:100%;margin:0!important}
@media(max-width:760px){
 .np-page{left:0;padding:10px 10px 88px}.np-page-shell{width:100%}.np-page-hero{min-height:150px;padding:20px;border-radius:23px}.np-page-hero h1{font-size:30px}
 .np-page-summary,.raffle-page-stats{grid-template-columns:1fr 1fr}.task-page-grid,.raffle-page-grid,.raffle-history-grid{grid-template-columns:1fr}.ranking-podium{grid-template-columns:1fr 1fr 1fr}.ranking-toolbar{align-items:stretch;flex-direction:column}
}


/* HOME SEARCH — REAL FUNCTIONAL SEARCH */
.search{position:relative!important}
.home-search-results{
  position:absolute;left:0;right:0;top:calc(100% + 8px);z-index:16000;
  background:rgba(255,255,255,.98);border:1px solid #e2eaf5;border-radius:16px;
  box-shadow:0 18px 50px rgba(34,58,112,.16);padding:7px;max-height:360px;overflow:auto
}
.search-results-hidden{display:none!important}
.home-search-item{
  width:100%;border:0;background:transparent;border-radius:12px;padding:10px 11px;
  display:grid;grid-template-columns:38px 1fr auto;gap:10px;align-items:center;text-align:left;
  cursor:pointer;color:#20345f
}
.home-search-item:hover,.home-search-item.active{background:#f1f6ff}
.home-search-icon{
  width:38px;height:38px;border-radius:12px;display:grid;place-items:center;
  background:linear-gradient(145deg,#eaf4ff,#f4efff);font-size:18px
}
.home-search-item b{display:block;font-size:10px}
.home-search-item small{display:block;font-size:8px;color:#8a98b2;margin-top:2px}
.home-search-item em{font-style:normal;font-size:8px;font-weight:900;color:#5e73a1}
@media(max-width:760px){
  .topbar .search{display:block!important;position:absolute!important;left:12px!important;right:12px!important;top:68px!important;z-index:6000!important}
  .topbar{margin-bottom:48px!important}
  .home-search-results{top:calc(100% + 5px)}
}


.search{display:flex!important;align-items:center!important;gap:8px!important}
.search input{
  flex:1;min-width:0;border:0!important;outline:0!important;background:transparent!important;
  color:#33466f!important;font-size:10px!important;font-weight:700!important;padding:0!important
}
.search input::placeholder{color:#9aa7bd!important;opacity:1}
.home-search-glyph{color:#7d8eac;font-size:17px;line-height:1}


/* =========================================================
   FINAL VISUAL PASS — APP
   ========================================================= */
:root{
  --fp-card:rgba(255,255,255,.95);--fp-border:#e3ebf6;--fp-ink:#142650;
  --fp-soft:#f6f9fe;--fp-shadow:0 18px 52px rgba(38,64,122,.10)
}
main{background:transparent!important}
.topbar{
  border:1px solid rgba(222,232,245,.92)!important;
  background:rgba(255,255,255,.89)!important;
  backdrop-filter:blur(20px) saturate(1.16)!important;
  box-shadow:0 10px 32px rgba(43,66,116,.065)!important
}
.search{
  min-height:42px!important;border:1px solid #e0e8f3!important;border-radius:13px!important;
  background:#f9fbff!important;box-shadow:inset 0 1px rgba(255,255,255,.8)!important
}
.user .profile,.balance,.bell{
  border:1px solid #e4ebf5!important;background:#fff!important;
  box-shadow:0 8px 20px rgba(46,68,120,.055)!important
}
.hero,.tasks,.bigpromo,.walletbox,.rankban,.raffle,.game{
  box-shadow:var(--fp-shadow)!important
}
.hero{border-radius:28px!important}
.quick article{
  background:linear-gradient(180deg,#fff,#fafcff)!important;border:1px solid var(--fp-border)!important;
  box-shadow:0 9px 24px rgba(43,66,116,.06)!important;transition:.18s ease
}
.quick article:hover{transform:translateY(-3px);box-shadow:0 14px 30px rgba(43,66,116,.09)!important}
.rightcol>section{border-radius:22px!important}
.live-row{transition:.15s ease}.live-row:hover{background:#f7faff!important}
.claim-btn:not(:disabled){box-shadow:0 8px 18px rgba(72,95,216,.14)}
.catalog-toolbar,.catalog-summary{
  background:rgba(255,255,255,.91)!important;border:1px solid #e1eaf6!important;
  box-shadow:0 12px 32px rgba(44,67,119,.07)!important
}
.catalog-search input{font-size:11px!important}
.catalog-filters button{transition:.17s ease}
.catalog-filters button.active{box-shadow:0 8px 18px rgba(80,94,214,.14)}
.np-page-shell{animation:npPageIn .24s ease}
@keyframes npPageIn{from{opacity:0;transform:translateY(7px)}to{opacity:1;transform:none}}
.np-page-summary>div,.raffle-page-stats>div{transition:.18s ease}
.np-page-summary>div:hover,.raffle-page-stats>div:hover{transform:translateY(-2px)}
.task-page-card,.raffle-page-card,.raffle-history-card,.podium-card{
  transition:.18s ease
}
.task-page-card:hover,.raffle-page-card:hover,.raffle-history-card:hover,.podium-card:hover{
  transform:translateY(-3px);box-shadow:0 16px 40px rgba(42,67,123,.11)!important
}
.ranking-table tbody tr{transition:.15s}.ranking-table tbody tr:hover{background:#f7faff}
.profile-dropdown{display:flex!important;flex-direction:column!important}
#pd-summary,#pd-account,#pd-withdraw,#pd-security,#pd-preferences{min-height:0}
.pd-footer-logout{margin-top:auto!important}
.profile-tabs button,.pd-tabs button{transition:.16s ease}
.profile-tabs button:hover,.pd-tabs button:hover{filter:brightness(.98)}
.profile-content,.pd-panel{color:var(--fp-ink)}
.profile-tab-panel,.pd-panel{scrollbar-width:thin}
.game-top{border-bottom:1px solid #e7edf6!important}
.game-stage{position:relative;overflow:hidden}
.game-stage:after{
  content:"";position:absolute;inset:0;pointer-events:none;
  box-shadow:inset 0 0 80px rgba(75,110,190,.05)
}
#startGameButton[disabled]{opacity:.6;cursor:wait}
.empty-state{min-height:130px;display:grid;place-items:center;align-content:center}
@media(max-width:760px){
  .topbar{border-left:0!important;border-right:0!important}
  .quick{grid-template-columns:repeat(2,1fr)!important}
  .quick article{height:82px!important}
  .game{border-radius:19px!important}
  .np-page-hero{box-shadow:0 16px 38px rgba(49,76,160,.16)!important}
  .profile-dropdown{border-radius:20px!important}
}


/* PROFILE DROPDOWN VISIBILITY FIX */
#profileDropdown.profile-dropdown-hidden{display:none!important;opacity:0!important;visibility:hidden!important;pointer-events:none!important;transform:translateY(-8px) scale(.985)!important}
#profileDropdown:not(.profile-dropdown-hidden){display:flex!important;opacity:1!important;visibility:visible!important;pointer-events:auto!important}
#profileDim.hidden{display:none!important;opacity:0!important;pointer-events:none!important}
#profileDim:not(.hidden){display:block!important;opacity:1!important;pointer-events:auto!important}


/* FINAL PROFILE VISIBILITY GUARANTEE */
#profileDropdown.profile-dropdown-hidden{display:none!important;visibility:hidden!important;opacity:0!important;pointer-events:none!important}
#profileDropdown:not(.profile-dropdown-hidden){display:flex!important;visibility:visible!important;opacity:1!important;pointer-events:auto!important}
#profileDim.hidden{display:none!important;pointer-events:none!important}


/* GAME LIFECYCLE HARD STOP */
#gameStage.game-ending .mini-game,
#gameStage.game-ending #spaceGame,
#gameStage.game-ending canvas,
#gameStage.game-ending .balloon-stage,
#gameStage.game-ending .fall-stage{
  pointer-events:none!important;
}
#gameResult.result-processing #resultReward{opacity:.55}
#gameResult.result-processing #resultMessage:after{
  content:"";display:inline-block;width:11px;height:11px;margin-left:7px;border:2px solid #c9d5e7;
  border-top-color:#5d78ef;border-radius:50%;vertical-align:-2px;animation:npSpin .7s linear infinite
}
@keyframes npSpin{to{transform:rotate(360deg)}}


/* RESULT CONTROLS MUST NEVER BE LOCKED BY GAME FAIL STATE */
#gameStage.game-ending #gameResult{
  pointer-events:auto!important;
  position:relative;
  z-index:50;
}
#gameStage.game-ending #gameResult button,
#gameResult #playAgain,
#gameResult #resultClose{
  pointer-events:auto!important;
}
#gameResult button:disabled{
  opacity:1!important;
  cursor:pointer!important;
}


/* =========================================================
   PREMIUM X — APP VISUAL SYSTEM
   ========================================================= */
:root{
  --px-ink:#15254d;
  --px-muted:#7b8aa7;
  --px-line:rgba(218,228,243,.9);
  --px-surface:rgba(255,255,255,.94);
  --px-soft:#f5f8fd;
  --px-blue:#4b97ff;
  --px-violet:#715cff;
  --px-mint:#45d1b1;
  --px-gold:#ffc85c;
  --px-shadow:0 20px 60px rgba(38,60,115,.12);
  --px-shadow-soft:0 10px 30px rgba(38,60,115,.07);
}
html{scroll-behavior:smooth}
body{
  background:
    radial-gradient(circle at 8% 0%,rgba(73,157,255,.16),transparent 27%),
    radial-gradient(circle at 95% 2%,rgba(113,92,255,.13),transparent 26%),
    linear-gradient(180deg,#f8fbff 0%,#f2f7fd 48%,#eef4fb 100%)!important;
  color:var(--px-ink);
}
.app{position:relative}
.sidebar{
  box-shadow:20px 0 60px rgba(39,59,106,.045)!important;
  border-right:1px solid rgba(219,228,242,.9)!important;
}
.side-item{
  overflow:hidden;
}
.side-item::after{
  content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;
  box-shadow:inset 0 1px rgba(255,255,255,.65);
}
.side-item:hover{
  transform:translateX(4px) translateY(-1px)!important;
  box-shadow:0 10px 26px rgba(49,77,136,.07)!important;
}
.topbar{
  background:rgba(255,255,255,.88)!important;
  border:1px solid rgba(218,228,243,.92)!important;
  backdrop-filter:blur(24px) saturate(1.2)!important;
  -webkit-backdrop-filter:blur(24px) saturate(1.2)!important;
  box-shadow:0 16px 46px rgba(39,60,112,.08)!important;
}
.search{
  background:linear-gradient(180deg,#fbfdff,#f6f9fd)!important;
  border:1px solid #dfe8f4!important;
  box-shadow:inset 0 1px rgba(255,255,255,.9)!important;
}
.search:focus-within{
  border-color:#86a6ff!important;
  box-shadow:0 0 0 4px rgba(81,126,255,.09),inset 0 1px rgba(255,255,255,.9)!important;
}
.profile,.balance,.bell{
  transition:.18s ease!important;
}
.profile:hover,.balance:hover,.bell:hover{
  transform:translateY(-2px)!important;
  box-shadow:0 12px 26px rgba(43,67,119,.10)!important;
}
.hero{
  position:relative!important;
  overflow:hidden!important;
  background:
    radial-gradient(circle at 74% 18%,rgba(255,255,255,.22),transparent 18%),
    radial-gradient(circle at 12% 90%,rgba(255,255,255,.10),transparent 24%),
    linear-gradient(124deg,#3992ff 0%,#625fff 53%,#4bd2c4 100%)!important;
  border:1px solid rgba(255,255,255,.30)!important;
  box-shadow:0 28px 72px rgba(53,80,184,.22)!important;
}
.hero::after{
  content:"";position:absolute;right:-72px;top:-105px;width:280px;height:280px;
  border-radius:50%;border:32px solid rgba(255,255,255,.08);pointer-events:none
}
.hero-copy h1{letter-spacing:-1.4px!important;text-shadow:0 4px 20px rgba(18,43,115,.12)}
.hero-copy button{
  border:1px solid rgba(255,255,255,.38)!important;
  box-shadow:0 15px 32px rgba(24,51,125,.19)!important;
  transition:.18s ease!important
}
.hero-copy button:hover{transform:translateY(-2px) scale(1.01)!important}
.quick article,.game,.tasks,.walletbox,.rankban,.raffle,.bigpromo{
  border:1px solid var(--px-line)!important;
  background:linear-gradient(180deg,rgba(255,255,255,.98),rgba(249,251,255,.94))!important;
  box-shadow:var(--px-shadow-soft)!important;
}
.quick article,.game{
  transition:.2s ease!important;
}
.quick article:hover,.game:hover{
  transform:translateY(-4px)!important;
  box-shadow:0 18px 42px rgba(39,65,122,.12)!important;
}
.game .cover{overflow:hidden}
.game .cover img{transition:transform .28s ease}
.game:hover .cover img{transform:scale(1.035)}
.game button,.claim-btn,.pd-primary,.profile-primary,.np-page-primary{
  box-shadow:0 10px 24px rgba(65,86,200,.15);
  transition:.16s ease!important
}
.game button:hover,.claim-btn:not(:disabled):hover,.pd-primary:hover,.profile-primary:hover,.np-page-primary:hover{
  transform:translateY(-1px)
}
.cardhead h3,.games .head h2{letter-spacing:-.35px}
.live-row{
  border:1px solid transparent;
  transition:.16s ease;
}
.live-row:hover{
  border-color:#e3ebf6;
  background:#f7faff!important;
}
.profile-dropdown{
  border:1px solid rgba(218,228,243,.96)!important;
  box-shadow:0 30px 85px rgba(31,52,103,.22)!important;
  backdrop-filter:blur(22px)!important;
}
.pd-head{background:linear-gradient(180deg,#ffffff,#fbfdff)}
.pd-wallet{
  background:
    radial-gradient(circle at 90% 10%,rgba(255,255,255,.24),transparent 20%),
    linear-gradient(135deg,#4a95ff,#6f5cff)!important;
  box-shadow:0 15px 35px rgba(72,87,211,.18)!important
}
.pd-action-row{transition:.16s ease}
.pd-action-row:hover{transform:translateX(3px);background:#f6f9fe!important}
.profile-shell{
  border:1px solid rgba(220,229,243,.95)!important;
  box-shadow:0 34px 90px rgba(31,53,105,.24)!important;
}
.catalog-shell,.np-page-shell{
  filter:drop-shadow(0 10px 24px rgba(39,62,118,.03))
}
.games-catalog-grid .catalog-game-card,
.task-page-card,.raffle-page-card,.raffle-history-card,.podium-card{
  border:1px solid var(--px-line)!important;
  background:linear-gradient(180deg,#fff,#fafcff)!important;
  box-shadow:var(--px-shadow-soft)!important;
  transition:.18s ease!important
}
.games-catalog-grid .catalog-game-card:hover,
.task-page-card:hover,.raffle-page-card:hover,.raffle-history-card:hover,.podium-card:hover{
  transform:translateY(-4px)!important;
  box-shadow:0 18px 45px rgba(42,66,122,.12)!important
}
.ranking-table-wrap{
  border:1px solid var(--px-line)!important;
  box-shadow:var(--px-shadow-soft)!important
}
.ranking-table tbody tr:hover{background:#f6f9fe!important}
.game-modal{backdrop-filter:blur(10px)!important}
.game-shell{
  border:1px solid rgba(216,226,240,.95)!important;
  box-shadow:0 35px 100px rgba(22,42,88,.32)!important;
}
.game-top{
  background:linear-gradient(180deg,#fff,#fbfdff)!important;
}
.game-result{
  background:
    radial-gradient(circle at 50% 8%,rgba(103,92,255,.10),transparent 30%),
    linear-gradient(180deg,#ffffff,#f9fbff)!important;
  border-radius:24px!important;
  box-shadow:0 20px 50px rgba(44,66,121,.10)!important;
}
.result-badge{
  width:74px!important;height:74px!important;border-radius:24px!important;
  background:linear-gradient(145deg,#fff3c8,#ffe08b)!important;
  box-shadow:0 14px 30px rgba(177,125,25,.15)!important
}
#playAgain{background:linear-gradient(135deg,#4b96ff,#715cff)!important}
#resultClose{background:#eef3fa!important;border:1px solid #e0e8f2!important}
.mobile-bottom-nav{
  backdrop-filter:blur(20px)!important;
  background:rgba(255,255,255,.92)!important;
  border-top:1px solid rgba(215,226,241,.9)!important;
  box-shadow:0 -12px 32px rgba(38,59,105,.08)!important
}
.mbn{transition:.16s ease!important}
.mbn.active{
  background:linear-gradient(180deg,#eef5ff,#f6f8ff)!important;
  color:#4f6fe4!important
}
.mbn.active span{transform:translateY(-1px)}
button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible,a:focus-visible{
  outline:3px solid rgba(78,124,255,.22)!important;
  outline-offset:2px!important
}
@media(max-width:760px){
  .hero{border-radius:24px!important}
  .hero-copy h1{font-size:27px!important}
  .quick article{min-height:82px!important}
  .game{border-radius:20px!important}
  .profile-dropdown{border-radius:22px 22px 0 0!important}
  .np-page{background:
    radial-gradient(circle at 0 0,rgba(76,157,255,.13),transparent 23%),
    #f2f7fd!important}
}
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important}
}


/* AUTHORITATIVE START/RESULT CONTROL GUARANTEE */
#gameIntro,#gameResult{
  pointer-events:auto!important;
}
#startGameButton,#playAgain,#resultClose,#closeGame{
  pointer-events:auto;
  touch-action:manipulation;
}
#startGameButton:not(:disabled),#playAgain:not(:disabled),#resultClose:not(:disabled),#closeGame:not(:disabled){
  cursor:pointer;
}


/* =========================================================
   NP ARENA — PREMIUM EXPERIENCE FINAL
   ========================================================= */
:root{--np-ink:#122048;--np-muted:#7889a9;--np-blue:#468fff;--np-violet:#725cff;--np-mint:#43d2b1;--np-gold:#ffc85b;--np-card:#fff;--np-line:#e4ebf6;--np-shadow:0 18px 55px rgba(42,65,123,.12)}
body{background:radial-gradient(circle at 5% 0%,rgba(82,183,255,.18),transparent 27%),radial-gradient(circle at 94% 0%,rgba(126,91,255,.14),transparent 25%),linear-gradient(180deg,#f8fbff,#eef5fd)!important}
.sidebar{background:rgba(255,255,255,.91)!important;backdrop-filter:blur(24px) saturate(1.14);border-right:1px solid rgba(220,229,242,.92)!important;box-shadow:18px 0 55px rgba(37,58,105,.06)!important}
.nav,.side-item{transition:transform .18s ease,box-shadow .18s ease,background .18s ease}.nav:hover,.side-item:hover{transform:translateX(3px);box-shadow:0 10px 24px rgba(48,72,126,.07)}
.topbar{border:1px solid rgba(219,229,243,.94)!important;background:rgba(255,255,255,.87)!important;backdrop-filter:blur(22px) saturate(1.15)!important;box-shadow:0 16px 48px rgba(38,59,110,.09)!important}
.hero{border:1px solid rgba(255,255,255,.3)!important;box-shadow:0 30px 80px rgba(55,79,182,.22)!important}
.quick article,.game,.tasks,.walletbox,.rankban,.raffle,.bigpromo,.task-page-card,.raffle-page-card,.podium-card,.catalog-game-card{border:1px solid var(--np-line)!important;background:linear-gradient(180deg,#fff,#f9fbff)!important;box-shadow:0 12px 36px rgba(42,66,122,.08)!important;transition:.18s ease!important}
.quick article:hover,.game:hover,.task-page-card:hover,.raffle-page-card:hover,.podium-card:hover,.catalog-game-card:hover{transform:translateY(-4px)!important;box-shadow:0 20px 48px rgba(42,66,122,.13)!important}
.game-shell{border:1px solid rgba(219,228,242,.96)!important;border-radius:28px!important;box-shadow:0 38px 110px rgba(25,43,91,.34)!important;overflow:hidden}
.game-top{background:linear-gradient(180deg,#fff,#f8fbff)!important;border-bottom:1px solid #edf2f8!important}
.game-stage{background:radial-gradient(circle at 50% 10%,rgba(76,150,255,.10),transparent 30%),linear-gradient(180deg,#f9fcff,#f2f7fd)!important}
.game-intro,.game-result{border:1px solid rgba(220,229,242,.95)!important;box-shadow:0 20px 55px rgba(42,65,121,.11)!important}
.game-result.fx-success{background:radial-gradient(circle at 50% 16%,rgba(65,211,166,.20),transparent 34%),linear-gradient(180deg,#fff,#f7fffb)!important}
.game-result.fx-neutral{background:radial-gradient(circle at 50% 16%,rgba(76,147,255,.13),transparent 34%),linear-gradient(180deg,#fff,#f8fbff)!important}
.game-result.fx-fail{background:linear-gradient(180deg,#fff,#f8fbff)!important}
#resultTitle{font-size:25px!important;letter-spacing:-.6px!important}
#resultMessage{max-width:430px;margin-left:auto!important;margin-right:auto!important;line-height:1.55!important;color:#667896!important}
#playAgain{background:linear-gradient(135deg,var(--np-blue),var(--np-violet))!important;box-shadow:0 13px 30px rgba(73,86,214,.20)!important}
#resultClose{background:#edf3fa!important;color:#526787!important;border:1px solid #dfe8f3!important}
#playAgain,#resultClose,#closeGame{pointer-events:auto!important;touch-action:manipulation!important}
#gameStage.game-ending #gameResult,#gameStage.game-ending #gameResult *{pointer-events:auto!important}
.games-catalog-grid{gap:14px!important}.catalog-game-card{border-radius:22px!important;overflow:hidden!important}.catalog-game-card button{background:linear-gradient(135deg,#4b95ff,#705cff)!important}
.ranking-table-wrap{border:1px solid var(--np-line)!important;border-radius:22px!important;box-shadow:var(--np-shadow)!important;overflow:hidden!important}.ranking-table thead{background:#f4f8fe!important}.ranking-table tbody tr:hover{background:#f4f8ff!important}
.profile-dropdown,.profile-shell{border:1px solid rgba(220,229,243,.96)!important;box-shadow:0 34px 95px rgba(30,51,101,.24)!important}
.mobile-bottom-nav{background:rgba(255,255,255,.93)!important;backdrop-filter:blur(22px)!important;border-top:1px solid rgba(218,228,242,.92)!important;box-shadow:0 -14px 36px rgba(37,57,104,.09)!important}
@media(max-width:760px){.game-shell{border-radius:22px 22px 0 0!important}.game-stage{min-height:420px!important}.game-result{margin:12px!important;padding:24px 18px!important}.quick{gap:10px!important}.quick article{border-radius:18px!important}.games-catalog-grid{grid-template-columns:1fr!important}.np-page-shell{padding:14px!important}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important}}