/* ============================================================
   XF777-style skin — dark casino app, magenta accent
   ============================================================ */
:root{
  --bg:#121214; --bg2:#19191d; --card:#1f1f25; --card2:#26262e; --line:#2b2b33;
  --text:#f2f2f5; --muted:#8e8e99; --muted2:#b5b5c0;
  --pink:#e81ee0; --pink2:#ff3ae6; --pink-dark:#a60ea0;
  --gold:#ffb300; --gold2:#ffd54a; --red:#ff3b3b; --green:#2ecc71; --blue:#58a6ff;
  --w:500px; --r:14px; --nav-h:62px;
  --font:"Segoe UI",Roboto,"Helvetica Neue",Arial,"Noto Sans Bengali",sans-serif;
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;padding:0;background:#0a0a0b;color:var(--text);font:14px/1.4 var(--font)}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;border:0;background:none;cursor:pointer}
img{display:block;max-width:100%}
.app{max-width:var(--w);margin:0 auto;min-height:100vh;background:var(--bg);position:relative;box-shadow:0 0 60px rgba(0,0,0,.6)}
.app.with-nav{padding-bottom:calc(var(--nav-h) + 10px)}
.app::before{content:"";position:fixed;inset:0;pointer-events:none;
  background-image:linear-gradient(45deg,rgba(255,255,255,.015) 25%,transparent 25%,transparent 50%,rgba(255,255,255,.015) 50%,rgba(255,255,255,.015) 75%,transparent 75%,transparent);
  background-size:28px 28px;z-index:0}
.app>*{position:relative;z-index:1}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}

/* ---------- top: download bar ---------- */
.dlbar{display:flex;align-items:center;gap:8px;padding:6px 10px;background:#0c0c0e;border-bottom:1px solid #1d1d22}
.dlbar .x{color:#ff3ae6;font-size:18px;line-height:1;padding:4px 6px}
.dlbar .ico{width:30px;height:30px;border-radius:8px;background:linear-gradient(135deg,#ff2bd6,#7a1fff);display:grid;place-items:center;font-weight:900;font-size:11px;letter-spacing:-.5px}
.dlbar .t{flex:1;font-weight:700;font-size:13px;line-height:1.15}
.dlbar .t b{color:#ff3ae6;font-size:15px}
.dlbar .dlbtn{background:linear-gradient(180deg,#ff3ae6,#c21bb8);border-radius:8px;padding:5px 10px;font-size:11px;line-height:1.1;text-align:center;font-weight:700}

/* ---------- header ---------- */
.hdr{display:flex;align-items:center;gap:10px;padding:8px 10px;background:#0f0f11;border-bottom:1px solid #1d1d22;position:sticky;top:0;z-index:30}
.hdr .menu{position:relative;width:28px;height:28px;display:grid;place-items:center}
.hdr .menu i{display:block;width:18px;height:2px;background:#ddd;box-shadow:0 -6px 0 #ddd,0 6px 0 #ddd}
.badge{position:absolute;top:-6px;right:-6px;min-width:16px;height:16px;padding:0 4px;border-radius:8px;background:var(--red);color:#fff;font-size:10px;font-weight:700;display:grid;place-items:center}
.logo{display:flex;align-items:center;gap:3px;font-weight:900;font-style:italic;font-size:20px;letter-spacing:-.5px;white-space:nowrap}
.logo .a{color:#ffd54a;text-shadow:0 2px 0 #b3721b,0 0 10px rgba(255,200,60,.5)}
.logo .b{background:linear-gradient(180deg,#ff3d3d,#b80000);border:2px solid #ffd54a;border-radius:8px;padding:0 6px;color:#fff;font-style:normal;font-size:16px;box-shadow:0 2px 0 #7a0000}
.logo .c{color:#fff;font-style:normal;font-size:14px;font-weight:700;opacity:.9}
.logo img{height:30px;width:auto}
.hdr .sp{flex:1}
.bal{display:flex;align-items:center;gap:6px;background:#1a1a1f;border:1px solid #2a2a31;border-radius:20px;padding:4px 10px 4px 6px;font-weight:700}
.bal .flag{width:18px;height:18px;border-radius:50%;background:radial-gradient(circle at 42% 50%,#f42a41 0 34%,#006a4e 36%);border:1px solid #333}
.bal .amt{color:var(--gold2);border-bottom:1px solid var(--gold2);line-height:1.1}
.bal .rf{color:var(--gold);font-size:14px}
.dep{position:relative;background:linear-gradient(180deg,#ff3ae6,#c21bb8);border-radius:10px;padding:8px 14px;font-weight:700;font-size:14px;box-shadow:0 3px 10px rgba(232,30,224,.35)}
.dep .pct{position:absolute;top:-9px;right:-6px;background:var(--red);border-radius:9px;font-size:10px;padding:1px 5px;font-weight:700}
.authbtns{display:flex;gap:6px}
.authbtns a{padding:7px 12px;border-radius:9px;font-weight:700;font-size:13px}
.authbtns .l{border:1px solid var(--pink);color:#ff6bea}
.authbtns .r{background:linear-gradient(180deg,#ff3ae6,#c21bb8)}

/* ---------- banner ---------- */
.banner{margin:10px;border-radius:12px;overflow:hidden;position:relative;aspect-ratio:1000/300;background:#000}
.banner .track{display:flex;height:100%;transition:transform .5s ease}
.banner .slide{min-width:100%;height:100%;position:relative;display:flex;align-items:center;padding:14px 18px;overflow:hidden}
.banner .slide img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.banner .s1{background:radial-gradient(120% 140% at 85% 50%,#5b1aa6 0%,#2a0d50 45%,#0d0616 100%)}
.banner .s2{background:radial-gradient(120% 140% at 15% 50%,#a6127e 0%,#4a0b3a 45%,#120612 100%)}
.banner .s3{background:radial-gradient(120% 140% at 50% 120%,#b36b00 0%,#4a2a00 45%,#120d04 100%)}
.banner .txt{position:relative;z-index:1;max-width:62%}
.banner .txt .lg{font-size:18px;margin-bottom:4px}
.banner .txt h3{margin:0;font-size:15px;line-height:1.15;text-transform:uppercase;font-weight:900}
.banner .txt h3 em{font-style:normal;color:#ff3ae6}
.banner .txt p{margin:4px 0 0;font-size:11px;color:#ddd}
.banner .txt .big{font-size:24px;font-weight:900;color:#ff3ae6;margin-top:2px;letter-spacing:1px}
.banner .art{position:absolute;right:-6px;bottom:-8px;width:44%;height:120%;pointer-events:none;
  background:radial-gradient(circle at 60% 60%,rgba(255,60,120,.55),transparent 60%),radial-gradient(circle at 30% 30%,rgba(255,200,80,.45),transparent 50%)}
.banner .art::before,.banner .art::after{content:"";position:absolute;border-radius:50%;background:conic-gradient(from 90deg,#ff3ae6,#ffb300,#ff3ae6);filter:blur(1px);opacity:.9}
.banner .art::before{width:46%;aspect-ratio:1;left:14%;top:12%;box-shadow:0 0 30px #ff3ae6}
.banner .art::after{width:30%;aspect-ratio:1;left:52%;top:40%;box-shadow:0 0 24px #ffb300}
.banner .dots{position:absolute;left:0;right:0;bottom:6px;display:flex;justify-content:center;gap:5px}
.banner .dots i{width:6px;height:6px;border-radius:3px;background:rgba(255,255,255,.35);transition:.3s}
.banner .dots i.on{width:16px;background:#fff}

/* ---------- marquee ---------- */
.mq{display:flex;align-items:center;gap:8px;margin:0 10px;padding:6px 0}
.mq .spk{color:#ccc;font-size:16px}
.mq .box{flex:1;overflow:hidden;white-space:nowrap}
.mq .box span{display:inline-block;padding-left:100%;animation:mq 18s linear infinite;color:#2ee6ff;font-weight:700;font-size:13px;text-transform:uppercase}
.mq .box span b{color:var(--gold)}
@keyframes mq{to{transform:translateX(-100%)}}
.mq .mail{position:relative;width:26px;height:22px;color:#c9c9d6}

/* ---------- category tabs ---------- */
.tabs{display:flex;gap:4px;overflow-x:auto;scrollbar-width:none;padding:6px 6px 8px;border-bottom:1px solid #1d1d22;background:var(--bg);position:sticky;top:46px;z-index:25}
.tabs::-webkit-scrollbar{display:none}
.tab{flex:0 0 auto;min-width:70px;display:flex;flex-direction:column;align-items:center;gap:4px;padding:4px 6px;color:var(--muted2);font-size:13px;border-radius:10px}
.tab .ic{width:34px;height:34px}
.tab.on{color:#fff}
.tab.on .ic{filter:drop-shadow(0 0 6px rgba(255,58,230,.8))}
.tabs .more{flex:0 0 auto;align-self:center;color:#888;font-size:16px;padding:0 2px}

/* ---------- sections + game cards ---------- */
.sec{padding:10px 10px 4px}
.sec .sh{display:flex;align-items:center;gap:8px;margin:4px 0 10px}
.sec .sh .ic{width:26px;height:26px}
.sec .sh h2{margin:0;font-size:17px;font-weight:600;flex:1}
.sec .sh a{color:var(--muted);font-size:13px}
.grid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.grid.col2{grid-template-columns:repeat(2,1fr)}
.gc{position:relative;border-radius:14px;overflow:hidden;background:var(--card);aspect-ratio:0.78;border:1.5px solid transparent;cursor:pointer;transform:translateZ(0)}
.gc.pk{border-color:rgba(232,30,224,.55);box-shadow:inset 0 0 0 1px rgba(255,58,230,.15),0 0 10px rgba(232,30,224,.18)}
.gc img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;background:#2a2a33;transition:transform .25s}
.gc:active img{transform:scale(1.04)}
.gc .ph{position:absolute;inset:0;display:grid;place-items:center;font-size:34px;background:linear-gradient(160deg,#2b2b36,#15151a)}
.gc .nm{position:absolute;left:0;right:0;bottom:0;padding:26px 6px 8px;text-align:center;font-weight:700;font-size:12px;line-height:1.15;color:#fff;text-shadow:0 1px 3px #000;
  background:linear-gradient(180deg,transparent,rgba(0,0,0,.72) 55%)}
.gc .pv{position:absolute;top:6px;left:28px;right:28px;text-align:center;font-size:10px;font-weight:800;letter-spacing:.3px;color:#ffe08a;text-shadow:0 1px 2px #000,0 0 6px rgba(0,0,0,.8);text-transform:uppercase}
.gc .like{position:absolute;top:0;left:0;width:26px;height:26px;border-radius:14px 0 14px 0;background:linear-gradient(135deg,#ffb300,#ff7a00);display:grid;place-items:center;font-size:12px}
.gc .star{position:absolute;top:5px;right:5px;width:22px;height:22px;border-radius:50%;background:rgba(0,0,0,.45);border:1px solid rgba(255,255,255,.35);display:grid;place-items:center;font-size:11px;color:#eee}
.gc .top{position:absolute;right:0;top:26px;background:#ff3ae6;color:#fff;font-size:9px;font-weight:800;padding:1px 5px;border-radius:6px 0 0 6px}
.more-row{text-align:center;color:var(--muted);font-size:13px;padding:8px 0 4px}
.more-row b{color:#ff3ae6;font-weight:600;margin-left:4px;cursor:pointer}
.more-row b::after{content:" ⌄";font-size:14px}
.more-row b.open::after{content:" ⌃"}
.grid .hid{display:none}
.grid.open .hid{display:block}

/* ---------- footer ---------- */
.ft{margin-top:14px;background:#0f0f11;border-top:1px solid #1d1d22;padding:14px 12px 8px}
.ft .cols{display:grid;grid-template-columns:1fr 1fr 1.2fr;gap:8px}
.ft h4{margin:0 0 6px;color:var(--muted);font-weight:500;font-size:14px}
.ft a{display:block;color:#dcdce4;font-size:14px;padding:3px 0}
.ft hr{border:0;border-top:1px solid #2a2a31;margin:14px 0 10px}
.ft .lic{display:flex;align-items:center;gap:14px;color:var(--muted)}
.b18{width:34px;height:34px;border-radius:50%;border:2px solid #ff3b3b;color:#ff3b3b;font-weight:900;font-size:12px;display:grid;place-items:center;position:relative}
.b18::after{content:"+";position:absolute;top:-6px;right:-4px;font-size:12px}

/* ---------- bottom nav ---------- */
.bnav{position:fixed;left:50%;transform:translateX(-50%);bottom:0;width:100%;max-width:var(--w);height:var(--nav-h);background:#101013;border-top:1px solid #222228;display:flex;z-index:40;padding-bottom:env(safe-area-inset-bottom)}
.bnav a{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;color:#9a9aa6;font-size:12px;position:relative}
.bnav a .ic{width:24px;height:24px}
.bnav a.on{color:#ff3ae6}
.bnav a .bd{position:absolute;top:6px;left:50%;margin-left:4px;background:var(--red);color:#fff;border-radius:9px;font-size:10px;padding:1px 5px;font-weight:700}
.totop{position:fixed;right:max(10px,calc(50% - var(--w)/2 + 10px));bottom:calc(var(--nav-h) + 14px);background:#151518;border:1px solid #2a2a31;border-radius:12px;padding:6px 12px 6px 6px;display:none;align-items:center;gap:6px;font-size:12px;color:#ddd;z-index:35}
.totop i{width:22px;height:22px;border-radius:50%;background:#ff3ae6;display:grid;place-items:center;font-style:normal;font-size:12px}
.totop.show{display:flex}

/* ---------- generic page bits ---------- */
.pgh{display:flex;align-items:center;gap:8px;padding:10px 12px;position:sticky;top:0;background:var(--bg);z-index:30;border-bottom:1px solid #1d1d22}
.pgh .back{width:28px;height:28px;display:grid;place-items:center;font-size:20px;color:#ccc}
.pgh h1{margin:0;font-size:17px;font-weight:600;flex:1;text-align:center}
.pgh .r{width:28px;text-align:right;color:#ff3ae6}
.card{background:var(--card);border-radius:12px;margin:10px;padding:12px}
.row{display:flex;align-items:center;gap:10px}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;padding:11px 16px;border-radius:10px;font-weight:700;font-size:15px;width:100%}
.btn.p{background:linear-gradient(180deg,#ff3ae6,#c21bb8);color:#fff;box-shadow:0 4px 14px rgba(232,30,224,.3)}
.btn.g{background:linear-gradient(180deg,#ffc247,#ff9d00);color:#1a1200}
.btn.o{border:1px solid #3a3a44;color:#ddd}
.btn.s{width:auto;padding:8px 14px;font-size:13px}
.muted{color:var(--muted)}
.gold{color:var(--gold2)}
.pink{color:#ff3ae6}
.tag{display:inline-block;padding:1px 6px;border-radius:8px;font-size:10px;font-weight:700}
.tag.r{background:var(--red)} .tag.gr{background:#1f9d55}
.chips{display:flex;gap:6px;overflow-x:auto;scrollbar-width:none;padding:8px 10px}
.chips::-webkit-scrollbar{display:none}
.chip{flex:0 0 auto;padding:6px 12px;border-radius:16px;background:#1d1d23;border:1px solid #2b2b33;color:#ccc;font-size:12px;white-space:nowrap}
.chip.on{background:rgba(232,30,224,.18);border-color:#ff3ae6;color:#fff}
.search{display:flex;align-items:center;gap:8px;margin:8px 10px 0;background:#1a1a1f;border:1px solid #2a2a31;border-radius:12px;padding:8px 12px}
.search input{flex:1;background:none;border:0;color:#fff;font-size:14px;outline:none}
.empty{padding:40px 20px;text-align:center;color:var(--muted)}
.empty .ic{font-size:44px;opacity:.5;margin-bottom:8px}
.toast{position:fixed;left:50%;top:40%;transform:translate(-50%,-50%);background:rgba(20,20,24,.95);border:1px solid #333;color:#fff;padding:12px 18px;border-radius:12px;font-size:14px;z-index:100;max-width:80%;text-align:center;display:none}
.loading{position:fixed;inset:0;background:rgba(0,0,0,.55);display:none;place-items:center;z-index:99}
.loading i{width:40px;height:40px;border:4px solid rgba(255,255,255,.2);border-top-color:#ff3ae6;border-radius:50%;animation:sp .8s linear infinite}
@keyframes sp{to{transform:rotate(360deg)}}

/* ---------- auth pages ---------- */
.auth{padding:0 0 30px}
.auth .hero{background:linear-gradient(180deg,#2a0b28,#121214);padding:28px 20px 20px;text-align:center}
.auth .hero .logo{justify-content:center;font-size:30px}
.auth .hero .logo .b{font-size:24px}
.auth .hero h1{margin:14px 0 4px;font-size:20px}
.auth .hero p{margin:0;color:var(--muted);font-size:13px}
.seg{display:flex;margin:14px 12px 0;border-bottom:1px solid #2a2a31}
.seg a{flex:1;text-align:center;padding:10px;color:var(--muted);font-weight:600}
.seg a.on{color:#ff3ae6;border-bottom:2px solid #ff3ae6}
.fld{margin:14px 12px 0}
.fld label{display:flex;align-items:center;gap:8px;color:#ddd;font-size:14px;margin-bottom:8px;font-weight:600}
.fld .in{display:flex;align-items:center;gap:8px;background:#1a1a1f;border:1px solid #2a2a31;border-radius:12px;padding:0 12px;height:48px}
.fld .in .dc{color:#ccc;font-weight:700;padding-right:8px;border-right:1px solid #333}
.fld .in input{flex:1;background:none;border:0;color:#fff;font-size:15px;outline:none;height:100%}
.fld .in .eye{color:#888;font-size:16px}
.chk{display:flex;align-items:center;gap:8px;margin:14px 12px 0;color:#bbb;font-size:13px}
.chk input{accent-color:#ff3ae6;width:16px;height:16px}
.auth .btns{margin:18px 12px 0;display:grid;gap:10px}
.auth .links{display:flex;justify-content:space-between;margin:14px 20px 0;color:var(--muted);font-size:13px}
.auth .links a{color:#ff3ae6}

/* ---------- profile ---------- */
.pf-top{background:radial-gradient(120% 100% at 50% 0,#2b0f2a,#131316 70%);padding:12px 12px 16px}
.pf-top .bar{display:flex;justify-content:space-between;align-items:center;margin-bottom:10px}
.pf-top .bar .ics{display:flex;gap:14px;color:#ff3ae6;font-size:20px}
.pf-id{display:flex;align-items:center;gap:12px}
.av{width:64px;height:64px;border-radius:50%;background:linear-gradient(135deg,#ff3ae6,#7a1fff);display:grid;place-items:center;font-size:26px;font-weight:900;color:#fff;text-shadow:0 1px 3px rgba(0,0,0,.5);overflow:hidden;position:relative;flex:0 0 auto}
.av img{width:100%;height:100%;object-fit:cover}
.av .ed{position:absolute;right:-2px;bottom:-2px;width:22px;height:22px;border-radius:50%;background:#ff3ae6;border:2px solid #131316;font-size:11px;display:grid;place-items:center}
.pf-id .nm{font-size:16px;font-weight:600}
.pf-id .id{color:#ccc;font-size:15px;margin-top:2px}
.pf-id .id b{color:#fff;font-size:18px}
.pf-id .id .cp{color:#ff3ae6;margin-left:4px}
.quick{display:grid;grid-template-columns:repeat(4,1fr);margin:16px 0 0;text-align:center}
.quick a{display:flex;flex-direction:column;align-items:center;gap:6px;font-size:14px;color:#eee;position:relative}
.quick .ic{width:36px;height:36px;color:#ff3ae6}
.quick .tg{position:absolute;top:-8px;left:50%;margin-left:6px;font-size:10px;padding:1px 5px;border-radius:8px;font-weight:700}
.vipc{margin:12px 10px 0;border-radius:14px;padding:14px 12px;background:linear-gradient(135deg,#ff2bd6,#c60cb8 60%,#e81ee0);position:relative;overflow:hidden;display:flex;gap:10px;align-items:center}
.vipc::before{content:"";position:absolute;inset:0;background:repeating-radial-gradient(circle at 20% 50%,rgba(255,255,255,.08) 0 2px,transparent 2px 18px);pointer-events:none}
.vipc .l{flex:1}
.vipc .lv{display:flex;align-items:center;gap:8px;font-size:26px;font-weight:900;font-style:italic}
.vipc .lv i{width:34px;height:34px;border-radius:50%;background:#1e8f6a;border:3px solid #cfe;display:grid;place-items:center;font-style:normal;font-size:12px}
.vipc .pr{height:16px;border-radius:8px;background:rgba(0,0,0,.35);border:1px solid rgba(255,255,255,.35);margin-top:8px;position:relative;font-size:11px;text-align:center;line-height:14px;overflow:hidden}
.vipc .pr i{position:absolute;left:0;top:0;bottom:0;background:rgba(255,255,255,.45)}
.vipc .r{text-align:left;font-size:12px}
.vipc .r b{font-size:15px}
.vipc .arrow{font-size:22px;color:#fff}
.menu-list{margin:10px 0 0;background:var(--bg)}
.menu-list .gap{height:8px;background:#0e0e10}
.mi{display:flex;align-items:center;gap:12px;padding:14px 12px;border-bottom:1px solid #1b1b20;font-size:15px}
.mi .ic{width:26px;height:26px;color:#ff3ae6;font-size:20px;text-align:center}
.mi .t{flex:1}
.mi .s{color:#ff3ae6;font-size:13px;text-align:right;max-width:55%}
.mi .s.m{color:var(--muted)}
.mi .ar{color:#777;font-size:18px}
.mi .gift{background:#1f9d55;border-radius:10px;font-size:11px;padding:1px 7px;font-weight:700}

/* ---------- wallet ---------- */
.wtabs{display:flex;gap:4px;padding:0 10px;border-bottom:1px solid #1d1d22}
.wtabs a{flex:1;text-align:center;padding:12px 4px;color:#ddd;font-weight:600;position:relative}
.wtabs a.on{color:#ff3ae6}
.wtabs a.on::after{content:"";position:absolute;left:30%;right:30%;bottom:0;height:3px;border-radius:2px;background:#ff3ae6}
.wsum{display:grid;grid-template-columns:1fr 1px 1fr;gap:10px;align-items:center;text-align:center}
.wsum .d{background:#2a2a31}
.wsum .lb{color:var(--muted);font-size:13px}
.wsum .v{font-size:26px;font-weight:600;margin:4px 0 10px}
.wsum .v.g{color:var(--gold)}
.wsum .btn{width:auto;min-width:110px;padding:9px 14px;font-size:14px;position:relative}
.wsum .btn .pct{position:absolute;top:-9px;right:-10px;background:#1f9d55;border-radius:9px;font-size:10px;padding:1px 6px;color:#fff}
.wsum .btn.dis{background:#4a4a52;color:#ddd;box-shadow:none}
.notes{color:var(--muted);font-size:12px;margin-top:4px}
.notes b{color:#fff;font-weight:600}
.rec{display:flex;align-items:center;gap:10px;padding:10px 0;border-bottom:1px solid #26262c;font-size:13px}
.rec .k{width:34px;height:34px;border-radius:10px;display:grid;place-items:center;font-size:16px;background:#26262e}
.rec .k.d{color:#2ecc71} .rec .k.w{color:#ffb300}
.rec .t{flex:1}
.rec .t small{display:block;color:var(--muted)}
.rec .a{font-weight:700}
.rec .st{font-size:11px;padding:1px 6px;border-radius:8px}
.st.ok{background:#164d33;color:#5ee39a} .st.pd{background:#4d3b16;color:#ffd27a} .st.no{background:#4d1616;color:#ff8a8a}

/* ---------- promo ---------- */
.promo-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px;padding:10px}
.pc{border-radius:14px;padding:14px 12px;min-height:110px;position:relative;overflow:hidden;background:var(--card);display:flex;flex-direction:column;justify-content:flex-end}
.pc .ic{position:absolute;right:10px;top:10px;font-size:34px;opacity:.9}
.pc h3{margin:0;font-size:15px}
.pc p{margin:4px 0 0;font-size:11px;color:#ddd;opacity:.85}
.pc.p1{background:linear-gradient(135deg,#5b1aa6,#2a0d50)} .pc.p2{background:linear-gradient(135deg,#a6127e,#4a0b3a)}
.pc.p3{background:linear-gradient(135deg,#b36b00,#4a2a00)} .pc.p4{background:linear-gradient(135deg,#0a6e5a,#083a30)}
.pc.p5{background:linear-gradient(135deg,#1c4ea6,#0b2350)} .pc.p6{background:linear-gradient(135deg,#a62a1a,#4a110b)}
.pc .pill{position:absolute;left:10px;top:10px;background:var(--red);font-size:10px;padding:1px 6px;border-radius:8px;font-weight:700}

/* desktop frame */
@media (min-width:640px){
  body{background:#070708 radial-gradient(60% 50% at 50% 0,#1d0b1c,transparent)}
}