/* ===== MintyGang shared theme ===== */
:root{
  --pink:#ff1e8c;
  --pink-soft:#ff5cae;
  --pink-glow:rgba(255,30,140,.55);
  --bg:#050506;
  --bg-2:#0c0a0f;
  --card:rgba(20,14,22,.72);
  --line:rgba(255,30,140,.22);
  --text:#f6eef3;
  --muted:#b79fac;
  --green:#3ce88a;
}
*{margin:0;padding:0;box-sizing:border-box}
/* Text selection matches the pink theme instead of the browser default blue */
::selection{background:var(--pink);color:#fff;text-shadow:none}
::-moz-selection{background:var(--pink);color:#fff;text-shadow:none}
img{user-select:none;-webkit-user-select:none;-webkit-user-drag:none;pointer-events:none}
html{scroll-behavior:smooth}
body{font-family:'Poppins',system-ui,sans-serif;background:var(--bg);color:var(--text);overflow-x:hidden;line-height:1.6}

/* MintCoin logo */
.mint-coin{width:1.05em;height:1.05em;vertical-align:-0.18em;flex:none}

/* Background FX */
.bg-fx{position:fixed;inset:0;z-index:-2;background:
  radial-gradient(900px 500px at 80% -10%, rgba(255,30,140,.20), transparent 60%),
  radial-gradient(800px 600px at 10% 110%, rgba(255,30,140,.14), transparent 55%),
  linear-gradient(180deg,#050506,#0c0a0f 60%,#050506);}
.grid-fx{position:fixed;inset:0;z-index:-1;opacity:.35;
  background-image:linear-gradient(var(--line) 1px,transparent 1px),linear-gradient(90deg,var(--line) 1px,transparent 1px);
  background-size:54px 54px;
  mask-image:radial-gradient(circle at 50% 30%,#000 0%,transparent 75%);}
.orb{position:fixed;border-radius:50%;filter:blur(60px);z-index:-1;opacity:.5;animation:float 12s ease-in-out infinite}
.orb.a{width:320px;height:320px;background:var(--pink);top:-80px;right:-60px}
.orb.b{width:260px;height:260px;background:#8a0f4d;bottom:-70px;left:-50px;animation-delay:-6s}
@keyframes float{50%{transform:translateY(28px)}}

/* Owner / Dev dock (fixed on the left) */
.team-dock{position:fixed;left:16px;top:50%;transform:translateY(-50%);z-index:40;width:190px;
  background:var(--card);border:1px solid var(--line);border-radius:18px;padding:16px 14px;
  backdrop-filter:blur(10px);box-shadow:0 18px 50px rgba(0,0,0,.5)}
.team-title{font-family:'Sora';font-weight:800;font-size:.72rem;letter-spacing:2px;text-transform:uppercase;
  color:var(--pink);text-align:center;margin-bottom:14px}
.team-member{display:flex;align-items:center;gap:10px;padding:8px;border-radius:12px;transition:.2s}
.team-member+.team-member{margin-top:6px}
.team-member:hover{background:rgba(255,30,140,.10)}
.team-av{width:38px;height:38px;flex:none;border-radius:50%;display:grid;place-items:center;
  font-family:'Sora';font-weight:800;color:#fff;background:linear-gradient(135deg,var(--pink),#8a0f4d);
  box-shadow:0 0 14px var(--pink-glow);border:1px solid var(--line)}
.team-av.alt{background:linear-gradient(135deg,#ff5cae,#b3115f)}
.team-info{display:flex;flex-direction:column;line-height:1.2;min-width:0}
.team-name{font-family:'Sora';font-weight:700;font-size:.95rem;color:var(--text)}
.team-role{color:var(--muted);font-size:.72rem}
/* On smaller screens the fixed dock would overlap content — hide it there;
   the footer credit still shows both names. */
@media(max-width:1240px){ .team-dock{display:none} }

/* Layout */
.wrap{max-width:1080px;margin:0 auto;padding:0 22px}
section{padding:90px 0}

/* Cursor glow */
#cursor-glow{position:fixed;top:0;left:0;width:260px;height:260px;border-radius:50%;pointer-events:none;z-index:9999;
  transform:translate(-50%,-50%);transition:opacity .3s ease;opacity:0;
  background:radial-gradient(circle,rgba(255,30,140,.35),rgba(255,30,140,.12) 40%,transparent 70%);
  filter:blur(6px);mix-blend-mode:screen}
@media(hover:none){#cursor-glow{display:none}}

/* Nav */
header{position:sticky;top:0;z-index:50;backdrop-filter:blur(14px);background:rgba(5,5,6,.6);border-bottom:1px solid var(--line)}
nav{display:flex;align-items:center;padding:16px 22px;max-width:1160px;margin:0 auto;gap:14px;flex-wrap:wrap}
.brand{display:flex;align-items:center;gap:12px;font-family:'Sora';font-weight:800;font-size:1.15rem;letter-spacing:.5px;text-decoration:none;color:var(--text);flex:1 0 auto}
.brand .mini{width:40px;height:40px;border-radius:12px;overflow:hidden;box-shadow:0 0 18px var(--pink-glow);border:1px solid var(--line)}
.brand .mini img{width:100%;height:100%;object-fit:cover;object-position:50% 20%;display:block}
.brand b{color:var(--pink)}
.brand .wordmark{display:inline-flex;letter-spacing:.5px}
/* Text links centered in the bar; connect + coin chip float to the right */
.navlinks{display:flex;gap:22px;align-items:center;flex-wrap:wrap;flex:2 1 auto;justify-content:center}
.navlinks .dc-btn{margin-left:auto}
.navlinks a{color:var(--muted);text-decoration:none;font-weight:500;font-size:.95rem;transition:.2s}
.navlinks a:hover{color:var(--pink)}

/* Coin chip */
.coin-chip{display:inline-flex;align-items:center;gap:6px;padding:6px 12px;border-radius:999px;
  background:rgba(255,30,140,.12);border:1px solid var(--line);font-weight:700;font-size:.9rem;color:var(--pink-soft)}
.coin-chip b{color:var(--pink);font-family:'Sora'}

/* Discord connect button */
.dc-btn{display:inline-flex;align-items:center;gap:8px;padding:7px 14px;border-radius:999px;cursor:pointer;
  background:rgba(255,30,140,.12);border:1px solid var(--line);color:var(--pink-soft);font-weight:600;font-size:.9rem;
  font-family:'Poppins';transition:.2s}
.dc-btn:hover{background:rgba(255,30,140,.22);box-shadow:0 0 16px var(--pink-glow)}
.dc-btn svg{width:20px;height:20px;fill:var(--pink-soft)}
.dc-btn.connected{background:rgba(255,30,140,.14);border-color:var(--pink);color:var(--pink-soft)}
.dc-btn.connected svg{fill:var(--pink)}
.dc-btn img,.dc-btn .dc-pfp{width:22px;height:22px;border-radius:50%;pointer-events:none;object-fit:cover}
.dc-btn .dc-initial{width:22px;height:22px;border-radius:50%;display:grid;place-items:center;
  background:var(--pink);color:#fff;font-weight:800;font-size:.8rem;flex:none}

/* Hero */
.hero{text-align:center;padding:70px 0 60px}
.logo-ring{width:230px;height:230px;margin:0 auto 26px;border-radius:50%;display:grid;place-items:center;position:relative;
  background:radial-gradient(circle,rgba(255,30,140,.18),transparent 70%);animation:bob 5s ease-in-out infinite}
.logo-ring svg,.logo-ring img{width:200px;height:200px;border-radius:50%;background:#100810;box-shadow:0 0 40px var(--pink-glow)}
.logo-ring img{object-fit:cover;object-position:50% 22%}
@keyframes bob{50%{transform:translateY(-12px)}}
.hero h1{font-family:'Sora';font-size:clamp(2.4rem,7vw,4.2rem);font-weight:800;line-height:1.05;margin-bottom:14px}
.hero h1 span{color:var(--pink);text-shadow:0 0 30px var(--pink-glow)}
.hero p{color:var(--muted);max-width:560px;margin:0 auto 30px;font-size:1.08rem}
.socials{display:flex;gap:18px;justify-content:center;flex-wrap:wrap}
.social{display:inline-flex;align-items:center;gap:10px;padding:13px 22px;border-radius:14px;
  border:1px solid var(--line);background:var(--card);color:var(--text);text-decoration:none;font-weight:600;
  transition:transform .2s,box-shadow .2s,border-color .2s}
.social svg{width:24px;height:24px;fill:var(--pink);transition:.2s}
.social:hover{transform:translateY(-4px);border-color:var(--pink);box-shadow:0 10px 30px var(--pink-glow)}
.social:hover svg{filter:drop-shadow(0 0 8px var(--pink-glow))}

/* Section heading */
.eyebrow{color:var(--pink);font-weight:700;letter-spacing:3px;text-transform:uppercase;font-size:.8rem;text-align:center;margin-bottom:10px}
.sec-title{font-family:'Sora';font-weight:800;font-size:clamp(1.8rem,4vw,2.6rem);text-align:center;margin-bottom:44px}

/* About */
.about-card{background:var(--card);border:1px solid var(--line);border-radius:22px;padding:40px;max-width:760px;margin:0 auto;box-shadow:0 20px 60px rgba(0,0,0,.5)}
.about-card p{color:var(--muted);font-size:1.05rem}
.about-card p + p{margin-top:16px}
.tags{display:flex;gap:10px;flex-wrap:wrap;margin-top:26px}
.tag{padding:7px 15px;border-radius:999px;background:rgba(255,30,140,.12);border:1px solid var(--line);color:var(--pink-soft);font-weight:600;font-size:.85rem}

/* Pricing */
.price-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:22px;max-width:1040px;margin:0 auto}
.price{position:relative;background:var(--card);border:1px solid var(--line);border-radius:20px;padding:32px 26px;display:flex;flex-direction:column;transition:transform .25s,box-shadow .25s,border-color .25s}
.price:hover{transform:translateY(-6px);border-color:var(--pink);box-shadow:0 18px 44px var(--pink-glow)}
.price.featured{border-color:var(--pink);box-shadow:0 0 30px rgba(255,30,140,.25)}
.badge{position:absolute;top:-12px;left:50%;transform:translateX(-50%);background:var(--pink);color:#fff;font-size:.72rem;font-weight:700;letter-spacing:1px;text-transform:uppercase;padding:5px 14px;border-radius:999px;box-shadow:0 0 16px var(--pink-glow)}
.price-name{font-family:'Sora';font-weight:700;font-size:1.15rem;color:var(--pink-soft)}
.price-amt{font-family:'Sora';font-weight:800;font-size:2.4rem;margin:8px 0 18px}
.price-amt span{font-size:.9rem;font-weight:500;color:var(--muted)}
.price ul{list-style:none;margin:0 0 24px;flex:1}
.price li{color:var(--muted);padding:7px 0 7px 26px;position:relative;font-size:.95rem}
.price li::before{content:"✓";position:absolute;left:0;color:var(--pink);font-weight:800}
.reward-note{display:inline-flex;align-items:center;gap:5px;font-size:.78rem;color:var(--pink-soft);margin-bottom:14px;font-weight:600}
.buy{display:inline-flex;align-items:center;justify-content:center;gap:6px;text-align:center;padding:12px 18px;border-radius:12px;background:var(--pink);color:#fff;text-decoration:none;font-weight:700;border:none;cursor:pointer;font-family:'Poppins';font-size:1rem;transition:transform .2s,box-shadow .2s}
.buy:hover{transform:translateY(-2px);box-shadow:0 10px 26px var(--pink-glow)}
.buy[disabled]{opacity:.5;cursor:not-allowed;transform:none;box-shadow:none}

/* Casino CTA card (home page) */
.casino-cta{max-width:640px;margin:0 auto;background:var(--card);border:1px solid var(--line);border-radius:22px;padding:40px;text-align:center;box-shadow:0 20px 60px rgba(0,0,0,.5)}
.casino-cta .cta-coin{font-size:64px;margin-bottom:6px;display:flex;justify-content:center}
.casino-cta .cta-coin .mint-coin{width:72px;height:72px;filter:drop-shadow(0 0 18px var(--pink-glow))}
.casino-cta h3{font-family:'Sora';font-size:1.5rem;margin:6px 0 8px}
.casino-cta p{color:var(--muted);margin:0 auto 22px;max-width:440px}
.mini-wallet{display:inline-flex;align-items:center;gap:8px;background:rgba(255,30,140,.10);border:1px solid var(--line);border-radius:999px;padding:8px 16px;margin-bottom:22px;font-family:'Sora';font-weight:800}
.mini-wallet .mint-coin{width:1.2em;height:1.2em}
.mini-wallet b{color:var(--pink)}
.cta-btns{display:flex;gap:14px;justify-content:center;flex-wrap:wrap}

/* Wallet (casino page) */
.wallet{max-width:640px;margin:0 auto 22px;display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;background:var(--card);border:1px solid var(--line);border-radius:18px;padding:20px 24px}
.wallet-bal{display:flex;flex-direction:column;gap:2px}
.wlabel{color:var(--muted);font-size:.8rem;font-weight:600;text-transform:uppercase;letter-spacing:1px}
.wamt{font-family:'Sora';font-size:1.6rem;font-weight:800;display:inline-flex;align-items:center;gap:8px}
.wamt .mint-coin{width:1.15em;height:1.15em}
.wamt b{color:var(--pink);font-variant-numeric:tabular-nums}
.wamt b.bump{animation:bump .25s ease}
@keyframes bump{50%{color:var(--green);transform:scale(1.04)}}
.wunit{font-size:.85rem;color:var(--muted);font-weight:500}
.wrate{color:var(--pink-soft);font-size:.75rem;font-weight:600}
#daily-btn[disabled]{opacity:.5;cursor:not-allowed}

/* Casino tabs + panels */
.cas-tabs{display:flex;gap:10px;justify-content:center;flex-wrap:wrap;margin-bottom:20px}
.cas-tab{display:inline-flex;align-items:center;gap:8px;padding:10px 18px;border-radius:12px;background:var(--card);border:1px solid var(--line);color:var(--muted);font-weight:600;cursor:pointer;transition:.2s;font-size:.92rem;font-family:'Poppins'}
.cas-tab svg{width:20px;height:20px;fill:currentColor}
.cas-tab:hover{color:var(--pink)}
.cas-tab.active{background:var(--pink);color:#fff;border-color:var(--pink);box-shadow:0 0 16px var(--pink-glow)}
.cas-panel{display:none;max-width:600px;margin:0 auto;background:var(--card);border:1px solid var(--line);border-radius:20px;padding:28px;text-align:center;box-shadow:0 20px 60px rgba(0,0,0,.5)}
.cas-panel.active{display:block;animation:fade .3s ease}
@keyframes fade{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}

/* ===== Game tabs (Stake-style) ===== */
.gtabs{display:flex;gap:8px;justify-content:center;flex-wrap:wrap;margin:0 auto 22px;max-width:760px;padding:10px;border-radius:16px;background:rgba(12,9,14,.72);border:1px solid var(--line);backdrop-filter:blur(8px);position:sticky;top:64px;z-index:30}
.gtab{display:inline-flex;align-items:center;gap:7px;padding:9px 15px;border-radius:11px;border:1px solid transparent;background:transparent;color:var(--muted);font-weight:700;font-family:'Poppins';font-size:.85rem;cursor:pointer;transition:.2s;position:relative}
.gtab svg{width:18px;height:18px;fill:currentColor}
.gtab:hover{color:var(--text);background:rgba(255,255,255,.05)}
.gtab.active{color:#fff;background:var(--pink);border-color:var(--pink);box-shadow:0 0 14px rgba(255,30,140,.4)}
@media(max-width:640px){.gtabs{position:static;gap:6px}.gtab{padding:8px 11px;font-size:.78rem}}
.bet-row{display:flex;gap:12px;justify-content:center;align-items:center;flex-wrap:wrap;margin:20px 0 6px}
.bet-row label{color:var(--muted);font-weight:600;font-size:.9rem;display:flex;align-items:center;gap:8px}
.bet-row input{width:120px;padding:10px 12px;border-radius:10px;border:1px solid var(--line);background:#0a070c;color:var(--text);font-size:1rem;font-family:'Poppins'}
.bet-row input:focus{outline:none;border-color:var(--pink)}
.cas-result{color:var(--muted);font-size:.9rem;margin-top:12px;min-height:1.2em}
.cas-result.win{color:var(--green);font-weight:700}
.cas-result.lose{color:#ff5c7a;font-weight:700}
.cas-result{transition:.3s}
.cas-result.win{animation:reswin .5s ease}
@keyframes reswin{40%{transform:scale(1.06)}}
.game-tip{text-align:center;color:var(--muted);font-size:.82rem;margin-top:22px;max-width:560px;margin-left:auto;margin-right:auto}
/* Coin flip */
.flip-coin{width:132px;height:132px;margin:0 auto;display:grid;place-items:center;border-radius:50%;background:radial-gradient(circle,rgba(255,30,140,.2),transparent 70%);perspective:600px}
.flip-coin svg{width:100px;height:100px;filter:drop-shadow(0 10px 24px rgba(255,30,140,.5))}
.flip-coin .coin-inner{width:100px;height:100px;transform-style:preserve-3d}
.flip-coin.spin .coin-inner{animation:flipspin .8s cubic-bezier(.4,.1,.2,1)}
@keyframes flipspin{0%{transform:rotateX(0) scaleY(1)}50%{transform:rotateX(780deg) scaleY(.72)}100%{transform:rotateX(1440deg) scaleY(1)}}
.pick-row{display:flex;gap:12px;justify-content:center;margin-top:14px}
.pick{padding:9px 22px;border-radius:10px;background:#0a070c;border:1px solid var(--line);color:var(--muted);font-weight:700;cursor:pointer;transition:.2s;font-family:'Poppins'}
.pick:hover{transform:translateY(-2px);color:#fff}
.pick.active{background:var(--pink);color:#fff;border-color:var(--pink);box-shadow:0 0 14px var(--pink-glow)}
/* Slots */
.reels{display:flex;gap:14px;justify-content:center}
.reel{position:relative;width:88px;height:132px;display:flex;flex-direction:column;overflow:hidden;border-radius:16px;background:#0a070c;border:1px solid var(--line);box-shadow:inset 0 0 30px rgba(0,0,0,.6)}
.rstrip{height:132px;flex:none;display:grid;place-items:center;transition:transform .5s cubic-bezier(.2,.9,.25,1);border-bottom:1px solid rgba(255,255,255,.04)}
.rstrip svg{width:50px;height:50px;filter:drop-shadow(0 4px 10px rgba(255,30,140,.35))}
.reel.wheeling .rstrip{animation:stripdrop .45s ease}
@keyframes stripdrop{from{transform:translateY(-88px)}to{transform:none}}
.reel.wheeling .rstrip:nth-child(2){animation-delay:.06s}
.reel.wheeling .rstrip:nth-child(3){animation-delay:.12s}
.reel.wheeling .rstrip:nth-child(4){animation-delay:.18s}
.reel.wheeling{box-shadow:inset 0 0 30px rgba(0,0,0,.6),0 0 20px rgba(255,30,140,.25)}
/* Plinko */
#plinko{width:420px;max-width:100%;height:auto;background:radial-gradient(circle at 50% 0%,rgba(255,30,140,.08),transparent 60%),#0a070c;border:1px solid var(--line);border-radius:16px}

/* ===== Casino catalog ===== */
.catalog-head{text-align:center;margin:8px 0 22px}
.catalog-head .sec-title{margin-bottom:6px}
.cat-title{font-family:'Sora';font-weight:800;font-size:1.5rem;margin:2px 0 14px}
.cat-filters{display:flex;gap:10px;justify-content:center;flex-wrap:wrap}
.cat-fil{padding:9px 20px;border-radius:50px;background:var(--card);border:1px solid var(--line);color:var(--muted);font-weight:700;font-family:'Poppins';font-size:.88rem;cursor:pointer;transition:.2s}
.cat-fil:hover{color:var(--pink);border-color:var(--pink)}
.cat-fil.active{background:var(--pink);color:#fff;border-color:var(--pink);box-shadow:0 0 16px var(--pink-glow)}
.catalog{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:16px;margin-bottom:26px}
.gcard{position:relative;display:flex;flex-direction:column;text-align:left;background:linear-gradient(180deg,#17101c,#0b080d);border:1px solid var(--line);border-radius:16px;overflow:hidden;cursor:pointer;transition:transform .3s cubic-bezier(.2,.8,.3,1),box-shadow .3s,border-color .3s;padding:0;font-family:'Poppins';color:var(--text)}
.gcard::after{content:"";position:absolute;inset:0;border-radius:16px;padding:1px;background:linear-gradient(135deg,rgba(255,30,140,.6),transparent 40%,rgba(255,30,140,.3));-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;opacity:0;transition:opacity .3s;pointer-events:none}
.gcard:hover{transform:translateY(-6px) scale(1.015);border-color:rgba(255,30,140,.5);box-shadow:0 22px 50px rgba(0,0,0,.55),0 0 30px rgba(255,30,140,.28)}
.gcard:hover::after{opacity:1}
.gcard-art{position:relative;height:120px;display:grid;place-items:center;overflow:hidden}
.gcard-ico{position:relative;display:grid;place-items:center;width:96px;height:96px;border-radius:22px;background:rgba(5,3,6,.55);border:1px solid rgba(255,255,255,.09);z-index:2;transition:transform .35s cubic-bezier(.2,.9,.3,1.3);box-shadow:inset 0 0 24px rgba(0,0,0,.4)}
.gcard:hover .gcard-ico{transform:translateY(-6px) scale(1.08) rotate(-3deg);box-shadow:inset 0 0 24px rgba(0,0,0,.4),0 14px 34px rgba(0,0,0,.5)}
.gcard-ico svg{width:58px;height:58px;filter:drop-shadow(0 8px 18px rgba(255,30,140,.6));transition:transform .3s}
.gcard:hover .gcard-ico svg{animation:iconbeat 1s ease infinite}
@keyframes iconbeat{50%{transform:scale(1.06)}}
.gblob{position:absolute;width:150px;height:150px;border-radius:50%;filter:blur(46px);opacity:.55;transform:translateZ(0);transition:opacity .3s}
.gcard:hover .gblob{opacity:.85}
.art-flip .gblob{background:#ff1e8c}.art-flip{background:linear-gradient(160deg,#2a0f24 30%,#0b080d)}
.art-slots .gblob{background:#b3115f}.art-slots{background:linear-gradient(160deg,#33092a 30%,#0b080d)}
.art-plinko .gblob{background:#7a0bff}.art-plinko{background:linear-gradient(160deg,#240f2c 30%,#0b080d)}
.art-roulette .gblob{background:#e0144a}.art-roulette{background:linear-gradient(160deg,#3a0c1e 30%,#0b080d)}
.art-dice .gblob{background:#ff5cae}.art-dice{background:linear-gradient(160deg,#2b0a18 30%,#0b080d)}
.art-wheel .gblob{background:#8a0f4d}.art-wheel{background:linear-gradient(160deg,#140810 30%,#0b080d)}
.art-crash .gblob{background:#ffb43a}.art-crash{background:linear-gradient(160deg,#2f0a12 30%,#0b080d)}
.art-hilo .gblob{background:#4a1056}.art-hilo{background:linear-gradient(160deg,#201032 30%,#0b080d)}
.art-leaders .gblob{background:#3ce88a}.art-leaders{background:linear-gradient(160deg,#06130d 30%,#0b080d)}
.gwin{position:absolute;top:10px;right:10px;z-index:3;font-size:.64rem;font-weight:800;letter-spacing:.4px;padding:5px 9px;border-radius:50px;background:rgba(10,7,12,.72);color:#ffd1e8;border:1px solid rgba(255,92,174,.35);backdrop-filter:blur(4px)}
.gcat{position:absolute;bottom:10px;left:10px;z-index:3;font-size:.6rem;font-weight:700;letter-spacing:1.2px;text-transform:uppercase;padding:4px 8px;border-radius:50px;background:rgba(255,30,140,.14);color:var(--pink-soft);border:1px solid var(--line)}
.gcard-body{display:flex;flex-direction:column;gap:3px;padding:14px 16px 16px}
.gname{font-family:'Sora';font-weight:800;font-size:1.02rem}
.gdesc{color:var(--muted);font-size:.76rem;min-height:2.2em;line-height:1.4}
.gplay{display:inline-flex;align-items:center;gap:6px;align-self:flex-start;color:var(--pink);font-weight:700;font-size:.8rem;margin-top:8px;padding:6px 12px;border-radius:9px;background:rgba(255,30,140,.10);border:1px solid var(--line);transition:.2s}
.gplay .mint-coin{width:14px;height:14px}
.gcard:hover .gplay{background:var(--pink);color:#fff;box-shadow:0 6px 18px var(--pink-glow)}
.cas-wrap{display:none;max-width:640px;margin:0 auto}
.gcard-anim{animation:gcardin .4s ease both}
@keyframes gcardin{from{opacity:0;transform:translateY(18px) scale(.97)}to{opacity:1;transform:none}}
.back-cat{align-self:flex-start;background:none;border:none;color:var(--pink-soft);font-weight:700;font-family:'Poppins';cursor:pointer;font-size:.85rem;padding:0;margin-bottom:10px}
.back-cat:hover{color:var(--pink)}
.panel-title{font-family:'Sora';font-weight:800;font-size:1.35rem;margin:0 0 18px}
/* canvas + controls chips (Ember style) */
.game-opt{display:flex;align-items:center;justify-content:center;gap:8px;margin-bottom:10px}
.game-opt span{color:var(--muted);font-weight:600;font-size:.78rem;text-transform:uppercase;letter-spacing:1px;margin-right:4px}
.game-opt button{padding:6px 14px;border-radius:8px;border:1px solid var(--line);background:#0a070c;color:var(--muted);font-weight:800;font-family:'Poppins';font-size:.78rem;cursor:pointer;transition:.2s}
.game-opt button:hover{color:#fff;transform:translateY(-1px)}
.game-opt button.active{background:var(--pink);color:#fff;border-color:var(--pink);box-shadow:0 0 12px var(--pink-glow)}
#plinko{width:420px;max-width:100%;height:auto;background:radial-gradient(circle at 50% 0%,rgba(255,30,140,.08),transparent 60%),#0a070c;border:1px solid var(--line);border-radius:16px}

/* ===== Roulette ===== */
.roulette{display:flex;flex-direction:column;align-items:center;gap:14px}
.rw-box{width:320px}
#rwcv{max-width:100%;height:auto;filter:drop-shadow(0 18px 40px rgba(255,30,140,.28))}
.rw-box .wheel-pointer{top:-2px}
.rbet-row{display:flex;gap:10px;justify-content:center;flex-wrap:wrap}
.rchip{padding:10px 18px;border-radius:12px;border:1px solid var(--line);background:#0a070c;color:var(--muted);font-weight:800;font-family:'Poppins';font-size:.8rem;cursor:pointer;transition:.2s}
.rchip:hover{transform:translateY(-2px);color:#fff}
.rchip.red{color:#ff6b8a}.rchip.black{color:#9fb0ff}.rchip.odd{color:#fff}.rchip.even{color:#ffd1e8}.rchip.up{color:#7dff9e}.rchip.down{color:#ff8dff}
.rchip.red.active{background:#e0144a;border-color:#e0144a;color:#fff;box-shadow:0 0 14px rgba(224,20,74,.6)}
.rchip.black.active{background:#30377a;border-color:#4b53c4;color:#fff;box-shadow:0 0 14px rgba(75,83,196,.5)}
.rchip.odd.active,.rchip.even.active,.rchip.up.active,.rchip.down.active{background:var(--pink);border-color:var(--pink);color:#fff;box-shadow:0 0 14px var(--pink-glow)}
.rgrid{display:grid;grid-template-columns:repeat(6,1fr);gap:6px;max-width:360px;width:100%}
.rgrid button{padding:9px 0;border-radius:10px;border:1px solid var(--line);font-weight:800;font-family:'Poppins';font-size:.85rem;cursor:pointer;transition:.15s;color:#fff}
.rgrid button:hover{transform:scale(1.06)}
.rgrid .rgr{background:#a0103f}.rgrid .rgb{background:#20203f}.rgrid .rg0{background:#0a5e2a}
.rgrid button.active{box-shadow:0 0 0 2px #fff,0 0 16px var(--pink-glow);transform:scale(1.08)}

/* ===== Dice ===== */
.dice-3d-wrap{display:flex;justify-content:center;align-items:center;padding:30px 0 26px;perspective:560px}
.dice-3d{position:relative;width:110px;height:110px;transform-style:preserve-3d}
.face{position:absolute;inset:0;border-radius:16px;display:grid;place-items:center;background:linear-gradient(145deg,#ff5cae,#c00d63);border:2px solid #ffe0ef;box-shadow:0 14px 40px rgba(255,30,140,.4)}
.face i{font-family:'Sora';font-style:normal;font-weight:800;font-size:2.2rem;color:#fff;text-shadow:0 2px 6px rgba(0,0,0,.35)}
.f1{transform:translateZ(55px)}
.f2{transform:rotateY(90deg) translateZ(55px)}
.f3{transform:rotateY(180deg) translateZ(55px)}
.f4{transform:rotateY(-90deg) translateZ(55px)}
.f5{transform:rotateX(90deg) translateZ(55px)}
.f6{transform:rotateX(-90deg) translateZ(55px)}
/* shimmer sweep over the cube */
.dice-3d-wrap::before{content:"";position:absolute;width:200px;height:200px;border-radius:50%;background:radial-gradient(circle,rgba(255,30,140,.25),transparent 65%);filter:blur(20px);pointer-events:none}
.dchip{padding:9px 14px;border-radius:12px;border:1px solid var(--line);background:#0a070c;color:var(--muted);font-weight:800;font-family:'Poppins';font-size:.78rem;cursor:pointer;transition:.2s}
.dchip:hover{color:var(--pink)}
.dchip.active{background:var(--pink);color:#fff;border-color:var(--pink);box-shadow:0 0 14px var(--pink-glow)}

/* ===== Lucky Wheel ===== */
.wheel-box{position:relative;width:300px;max-width:100%;margin:4px auto 16px;display:grid;place-items:center}
.wheel-pointer{position:absolute;top:-6px;left:50%;transform:translateX(-50%);width:0;height:0;border-left:14px solid transparent;border-right:14px solid transparent;border-top:22px solid var(--pink);filter:drop-shadow(0 0 8px var(--pink-glow))}
#wcv{max-width:100%;height:auto}

/* ===== Crash ===== */
.crash-box{position:relative;border:1px solid var(--line);border-radius:16px;overflow:hidden;background:linear-gradient(180deg,#100810,#1a0c1c);margin-bottom:14px}
.crash-mult{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);font-family:'Sora';font-weight:800;font-size:2.4rem;color:#fff;text-shadow:0 0 26px var(--pink-glow)}
.cbet-row{display:flex;gap:12px;justify-content:center;align-items:center;flex-wrap:wrap;margin:14px 0 6px}
.cbet-row label{color:var(--muted);font-weight:600;font-size:.85rem;display:flex;align-items:center;gap:8px}
.cbet-row input{width:104px;padding:10px 12px;border-radius:10px;border:1px solid var(--line);background:#0a070c;color:var(--text);font-size:1rem;font-family:'Poppins'}
.cbet-row input:focus{outline:none;border-color:var(--pink)}

/* ===== Hi-Lo ===== */
.cards-row{display:flex;gap:26px;justify-content:center;margin:6px 0 18px}
.card-box{position:relative;width:100px;height:138px;border-radius:14px;background:linear-gradient(160deg,#fff,#f3c9dd);display:grid;place-items:center;border:1px solid #ffb8d4;box-shadow:0 10px 30px rgba(255,30,140,.25)}
.card-box::before{content:"";position:absolute;inset:5px;border-radius:9px;border:1px solid rgba(255,47,151,.18);pointer-events:none}
.card-box b{font-family:'Sora';font-weight:800;font-size:2.8rem;transition:.2s}
.card-box i{position:absolute;top:9px;left:12px;font-style:normal;font-size:1.2rem}
.card-box[data-color="black"] b{color:#171726}
.card-box[data-color="black"] i{color:#171726}
.card-box[data-color="red"] b{color:#e0144a}
.card-box[data-color="red"] i{color:#e0144a}
.card-box i#suit-br{position:absolute;bottom:9px;right:12px;transform:rotate(180deg)}
.card-box.flip{animation:cardflip .5s ease}
@keyframes cardflip{50%{transform:rotateY(90deg)}100%{transform:rotateY(0)}}

/* ===== Leaderboard ===== */
.lb-head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:14px}
.lb-head h3{font-family:'Sora';font-size:1.15rem}
.lb-head .btn-ghost{width:auto;padding:8px 14px;border-radius:10px;border:1px solid var(--line);background:transparent;color:var(--text);font-weight:600;font-family:'Poppins';cursor:pointer;font-size:.85rem;transition:.2s}
.lb-head .btn-ghost:hover{border-color:var(--pink);color:var(--pink)}
.leaderboard{list-style:none;margin:0;padding:0;text-align:left;display:flex;flex-direction:column;gap:8px}
.lb-row{display:flex;align-items:center;gap:12px;padding:10px 14px;border-radius:12px;background:#0a070c;border:1px solid var(--line)}
.lb-row.mine{border-color:var(--pink);box-shadow:0 0 14px rgba(255,30,140,.25);background:rgba(255,30,140,.08)}
.lb-rank{width:28px;text-align:center;font-weight:800;font-family:'Sora';color:var(--pink-soft);flex:none}
.lb-row img,.lb-noav{width:34px;height:34px;border-radius:50%;flex:none;pointer-events:none}
.lb-noav{display:grid;place-items:center;background:rgba(255,30,140,.18);color:var(--pink-soft);font-weight:800;border:1px solid var(--line)}
.lb-name{flex:1;font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.lb-bal{font-family:'Sora';font-weight:800;color:var(--pink);font-variant-numeric:tabular-nums}
.lb-empty{color:var(--muted);text-align:center;padding:24px 10px;list-style:none;font-size:.92rem}

/* Status */
.status-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:18px;max-width:820px;margin:0 auto}
.status{display:flex;align-items:center;justify-content:space-between;padding:22px;border-radius:18px;background:var(--card);border:1px solid var(--line);transition:transform .2s}
.status:hover{transform:translateY(-4px)}
.status .label{font-weight:600}
.status .sub{color:var(--muted);font-size:.82rem}
.pill{display:inline-flex;align-items:center;gap:8px;font-weight:700;font-size:.85rem;color:var(--green)}
.dot{width:10px;height:10px;border-radius:50%;background:var(--green);box-shadow:0 0 10px var(--green);animation:pulse 1.8s infinite}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.35}}

/* Footer */
footer{border-top:1px solid var(--line);padding:34px 0;text-align:center;color:var(--muted);font-size:.9rem}
footer .fsoc{display:flex;gap:16px;justify-content:center;margin-bottom:16px}
footer .fsoc a{width:44px;height:44px;display:grid;place-items:center;border-radius:12px;border:1px solid var(--line);background:var(--card);transition:.2s}
footer .fsoc a svg{width:22px;height:22px;fill:var(--pink)}
footer .fsoc a:hover{border-color:var(--pink);box-shadow:0 0 20px var(--pink-glow);transform:translateY(-3px)}
footer b{color:var(--pink)}

/* Reveal */
.reveal{opacity:0;transform:translateY(26px);transition:opacity .7s ease,transform .7s ease}
.reveal.in{opacity:1;transform:none}

/* Toast */
#toast{position:fixed;left:50%;bottom:28px;transform:translate(-50%,20px);z-index:10000;background:var(--pink);color:#fff;font-weight:700;padding:12px 22px;border-radius:12px;box-shadow:0 10px 30px var(--pink-glow);opacity:0;pointer-events:none;transition:.35s;font-size:.92rem}
#toast.show{opacity:1;transform:translate(-50%,0)}

/* Modal */
.modal-backdrop{position:fixed;inset:0;z-index:10001;background:rgba(3,2,4,.72);backdrop-filter:blur(6px);display:flex;align-items:center;justify-content:center;padding:20px;opacity:0;pointer-events:none;transition:opacity .25s}
.modal-backdrop.show{opacity:1;pointer-events:auto}
.modal{width:100%;max-width:420px;background:linear-gradient(180deg,#140e16,#0b080d);border:1px solid var(--line);border-radius:22px;padding:32px 28px;text-align:center;box-shadow:0 30px 80px rgba(0,0,0,.6);transform:translateY(14px) scale(.98);transition:transform .25s}
.modal-backdrop.show .modal{transform:none}
.modal h3{font-family:'Sora';font-size:1.4rem;margin-bottom:6px}
.modal .msub{color:var(--muted);font-size:.9rem;margin-bottom:22px}
.modal .dc-mark{width:60px;height:60px;margin:0 auto 14px;display:grid;place-items:center;border-radius:16px;background:rgba(88,101,242,.15);border:1px solid rgba(88,101,242,.5)}
.modal .dc-mark svg{width:34px;height:34px;fill:#7d8bff}
.modal input{width:100%;padding:12px 14px;border-radius:12px;border:1px solid var(--line);background:#0a070c;color:var(--text);font-size:1rem;font-family:'Poppins';margin-bottom:14px}
.modal input:focus{outline:none;border-color:var(--pink)}
.modal .btn-discord{width:100%;display:inline-flex;align-items:center;justify-content:center;gap:10px;padding:13px;border-radius:12px;border:none;cursor:pointer;background:#5865f2;color:#fff;font-weight:700;font-family:'Poppins';font-size:1rem;margin-bottom:12px;transition:.2s}
.modal .btn-discord:hover{background:#4752e0;box-shadow:0 8px 24px rgba(88,101,242,.4)}
.modal .btn-discord svg{width:22px;height:22px;fill:#fff}
.modal .btn-ghost{width:100%;padding:12px;border-radius:12px;border:1px solid var(--line);background:transparent;color:var(--text);font-weight:600;font-family:'Poppins';cursor:pointer;transition:.2s}
.modal .btn-ghost:hover{border-color:var(--pink);color:var(--pink)}
.modal .divider{display:flex;align-items:center;gap:12px;color:var(--muted);font-size:.78rem;margin:6px 0 14px}
.modal .divider::before,.modal .divider::after{content:"";flex:1;height:1px;background:var(--line)}
.modal .profile{display:flex;align-items:center;gap:14px;justify-content:center;margin-bottom:20px}
.modal .profile img{width:56px;height:56px;border-radius:50%;pointer-events:none;border:2px solid var(--pink)}
.modal .profile .pname{font-family:'Sora';font-weight:700;font-size:1.1rem;text-align:left}
.modal .profile .ptag{color:var(--muted);font-size:.82rem}
.modal .note{color:var(--muted);font-size:.72rem;margin-top:14px;line-height:1.5}
.modal .x{position:absolute;top:14px;right:16px;background:none;border:none;color:var(--muted);font-size:1.4rem;cursor:pointer;line-height:1}

@media(max-width:640px){
  .navlinks{gap:14px}
  section{padding:64px 0}
}

/* ===== Admin panel ===== */
.admin-wrap{max-width:1080px;margin:0 auto}
/* wider panels than the casino default so tables breathe */
#admin-panel .cas-panel{max-width:100%;text-align:left;padding:24px}
/* Stat cards (Overview) */
.stat-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:16px;margin-bottom:8px}
.stat-card{background:linear-gradient(180deg,rgba(255,30,140,.08),transparent),#0a070c;border:1px solid var(--line);border-radius:18px;padding:20px 22px;position:relative;overflow:hidden}
.stat-card::after{content:"";position:absolute;right:-30px;top:-30px;width:90px;height:90px;border-radius:50%;background:var(--pink-glow);filter:blur(30px);opacity:.4}
.stat-card .sc-label{color:var(--muted);font-size:.78rem;font-weight:600;text-transform:uppercase;letter-spacing:1px}
.stat-card .sc-val{font-family:'Sora';font-weight:800;font-size:2rem;color:var(--pink);margin-top:6px;font-variant-numeric:tabular-nums;line-height:1}
.stat-card .sc-sub{color:var(--muted);font-size:.74rem;margin-top:6px}
/* Toolbar row (search + refresh + add) */
.admin-bar{display:flex;gap:10px;align-items:center;flex-wrap:wrap;margin-bottom:16px}
.admin-bar input.search{flex:1;min-width:180px;padding:11px 14px;border-radius:12px;border:1px solid var(--line);background:#0a070c;color:var(--text);font-family:'Poppins';font-size:.92rem}
.admin-bar input.search:focus{outline:none;border-color:var(--pink)}
/* Data table */
.dtable{width:100%;border-collapse:separate;border-spacing:0 8px;font-size:.88rem}
.dtable th{text-align:left;color:var(--muted);font-weight:600;font-size:.72rem;text-transform:uppercase;letter-spacing:1px;padding:0 14px 4px}
.dtable td{background:#0a070c;border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding:12px 14px;vertical-align:middle}
.dtable td:first-child{border-left:1px solid var(--line);border-radius:12px 0 0 12px}
.dtable td:last-child{border-right:1px solid var(--line);border-radius:0 12px 12px 0}
.dtable tr:hover td{border-color:rgba(255,30,140,.4)}
.dtable code{color:var(--pink-soft);user-select:all;word-break:break-all}
/* Status pills */
.pill{display:inline-flex;align-items:center;gap:6px;padding:4px 10px;border-radius:999px;font-size:.72rem;font-weight:700;border:1px solid var(--line)}
.pill.ok{background:rgba(60,232,138,.12);color:var(--green);border-color:rgba(60,232,138,.4)}
.pill.bad{background:rgba(255,92,122,.12);color:#ff5c7a;border-color:rgba(255,92,122,.4)}
.pill.warn{background:rgba(255,180,60,.12);color:#ffb43c;border-color:rgba(255,180,60,.4)}
.pill.muted{background:rgba(183,159,172,.1);color:var(--muted)}
/* Row action buttons */
.row-actions{display:flex;gap:6px;flex-wrap:wrap}
.mini-btn{padding:6px 12px;border-radius:9px;border:1px solid var(--line);background:transparent;color:var(--text);font-weight:600;font-size:.76rem;font-family:'Poppins';cursor:pointer;transition:.15s}
.mini-btn:hover{border-color:var(--pink);color:var(--pink)}
.mini-btn.danger:hover{border-color:#ff5c7a;color:#ff5c7a}
.mini-btn.warn:hover{border-color:#ffb43c;color:#ffb43c}
/* Form grid for Create */
.form-grid{display:grid;gap:14px;max-width:460px}
.form-grid label{display:flex;flex-direction:column;gap:6px;text-align:left;color:var(--muted);font-size:.82rem;font-weight:600}
.form-grid input,.form-grid select{padding:11px 13px;border-radius:11px;border:1px solid var(--line);background:#0a070c;color:var(--text);font-family:'Poppins';font-size:.95rem}
.form-grid input:focus,.form-grid select:focus{outline:none;border-color:var(--pink)}
/* Generated-key result box */
.keybox{margin-top:18px;padding:16px;border-radius:14px;background:rgba(255,30,140,.08);border:1px solid var(--pink);display:none}
.keybox.show{display:block;animation:fade .3s ease}
.keybox code{display:block;font-size:1.05rem;color:#fff;user-select:all;word-break:break-all;margin:8px 0;font-family:'Sora'}
.admin-empty{color:var(--muted);text-align:center;padding:34px 10px;font-size:.92rem}
.admin-loading{color:var(--muted);text-align:center;padding:34px 10px;font-size:.92rem}
@media(max-width:720px){
  .dtable thead{display:none}
  .dtable,.dtable tbody,.dtable tr,.dtable td{display:block;width:100%}
  .dtable td{border:1px solid var(--line)!important;border-radius:10px!important;margin-bottom:-1px}
  .dtable td::before{content:attr(data-l);color:var(--muted);font-size:.7rem;text-transform:uppercase;letter-spacing:1px;display:block;margin-bottom:3px}
}

/* ===== Interactive menu showcase (live HTML replica of the real menu) =====
   The reference build's own design tokens, written out longhand (it ships them
   as Tailwind utilities). They are scoped to .ch-wrap on purpose so the oklch
   palette cannot leak into the rest of the site, which is hex.

   Deliberately NOT copied: the reference puts backdrop-filter:blur on the
   panel. Its background is 95% opaque, so the blur is invisible and only costs
   repaints on a 900px surface. Skipped. */
.ch-wrap{
  --menu-accent:oklch(68% .21 353);
  --menu-accent-soft:oklch(68% .21 353/.55);
  --menu-sidebar:oklch(16% .014 320/.8);
  --menu-panel:oklch(20% .016 320/.55);
  --menu-input:oklch(26% .016 320);
  --menu-border:oklch(32% .02 320);
  --menu-text:oklch(72% .012 320);
  --menu-title:oklch(93% .008 320);
  --menu-dim:oklch(52% .014 320);
  --menu-warn:oklch(82% .17 85);
  --menu-shadow:0 10px 30px -12px oklch(0% 0 0/.7);
  --menu-glow:0 0 8px 1px var(--menu-accent-soft);
  --menu-grad:linear-gradient(90deg,oklch(62% .2 350),var(--menu-accent));
  /* No background here. In the reference that radial gradient is the PAGE
     background; reproduced as a wrapper it reads as a box drawn around the
     menu, which is not what the reference looks like. This element exists only
     to hold the tokens above. */
  position:relative;max-width:900px;margin:0 auto
}
.cheat{position:relative;max-width:900px;margin:0 auto;display:grid;grid-template-columns:172px minmax(0,1fr);background:oklch(14% .012 320/.95);border:1px solid var(--menu-border);border-radius:.75rem;overflow:hidden;box-shadow:var(--menu-shadow)}
/* Floating dots behind the panel. Absolutely positioned, so it is not a grid
   child and does not become a third column. */
.ch-dots{position:absolute;inset:0;pointer-events:none;overflow:hidden}
.ch-dots i{position:absolute;border-radius:50%;background:var(--menu-accent);opacity:.13;animation:ch-float 10s ease-in-out infinite}
/* Sidebar */
.ch-side{position:relative;z-index:1;background:var(--menu-sidebar);border-right:1px solid var(--menu-border);padding:12px;display:flex;flex-direction:column;gap:4px;min-height:560px}
.ch-avatar{width:120px;height:120px;margin:0 auto 4px;display:flex;align-items:center;justify-content:center}
.ch-avatar img{width:100%;height:100%;object-fit:contain;filter:drop-shadow(0 6px 18px oklch(68% .21 353/.35))}
.ch-grp{font-size:13px;font-weight:500;letter-spacing:0;text-transform:none;color:var(--menu-title);padding:0 4px 4px;margin:8px 0 0}
.ch-grp:first-of-type{margin-top:0}
.ch-nav{position:relative;display:flex;align-items:center;gap:8px;width:100%;text-align:left;padding:6px 8px;border-radius:6px;border:none;background:transparent;color:var(--menu-dim);font-family:'Poppins';font-weight:400;font-size:14px;cursor:pointer;transition:all .2s}
/* The 2px accent rail the reference slides in on the active item. */
.ch-nav::before{content:'';position:absolute;left:0;top:50%;width:2px;height:0;opacity:0;border-radius:999px;background:var(--menu-accent);transform:translateY(-50%);transition:height .3s,opacity .3s}
.ch-nav.active::before{height:20px;opacity:1}
.ch-nav .ch-ic{width:16px;height:16px;flex:0 0 auto;display:block}
.ch-nav .ch-ic svg{width:16px;height:16px;display:block}
.ch-nav:hover{color:var(--menu-text);background:oklch(26% .016 320/.5)}
.ch-nav.active{color:var(--menu-title);background:var(--menu-input)}
.ch-user{margin-top:auto;display:flex;align-items:center;gap:8px;padding:8px;border-radius:6px;background:oklch(26% .016 320/.7);border:1px solid var(--menu-border)}
.ch-user b{font-size:12px;font-weight:500;color:var(--menu-title);display:block;line-height:1.25}
.ch-user small{font-size:12px;color:var(--menu-dim);line-height:1.25}
.ch-user small i{font-style:normal;color:var(--menu-accent)}
.ch-uav{width:24px;height:24px;border-radius:50%;background:var(--menu-accent);color:#fff;display:flex;align-items:center;justify-content:center;font-weight:600;font-family:'Poppins';font-size:12px;flex:0 0 auto}
/* Stage */
.ch-stage{position:relative;z-index:1;background:none;min-height:0;padding:12px}
.ch-panel{display:none}
.ch-panel.active{display:grid;grid-template-columns:1fr 1fr;gap:12px;animation:ch-in .4s cubic-bezier(.22,1,.36,1) both}
.ch-panel .ch-full{grid-column:1 / -1}
.ch-col{display:flex;flex-direction:column;gap:12px}
.ch-card{background:var(--menu-panel);border:1px solid var(--menu-border);border-radius:.375rem;padding:12px;box-shadow:var(--menu-shadow);animation:ch-in .4s cubic-bezier(.22,1,.36,1) both}
/* Tailwind space-y-2 written out: 8px between every block inside a card, and
   4px between a label and the control it belongs to. */
.ch-card > * + *{margin-top:8px}
.ch-title{font-family:'Poppins';font-weight:500;font-size:13px;color:var(--menu-title);margin:0 0 8px;padding:0;border:none}
.ch-lbl{font-size:13px;color:var(--menu-text);margin:0;letter-spacing:0}
.ch-card > .ch-lbl + *{margin-top:4px}
/* Toggle — the reference uses a 15px square checkbox with a check mark that
   scales in, not a sliding switch. */
.ch-toggle{display:flex;align-items:center;gap:8px;padding:0;font-size:13px;color:var(--menu-text);cursor:pointer;user-select:none;transition:color .2s}
.ch-toggle:hover{color:var(--menu-accent)}
.ch-toggle input{position:absolute;opacity:0;width:0;height:0}
.ch-box{position:relative;width:15px;height:15px;border-radius:3px;background:var(--menu-input);border:1px solid var(--menu-border);flex:0 0 auto;transition:all .2s}
.ch-toggle:hover .ch-box{border-color:oklch(68% .21 353/.6)}
/* The tick itself: an SVG-shaped stroke drawn with two borders, rotated. */
.ch-box::after{content:'';position:absolute;left:4px;top:1px;width:5px;height:9px;border:solid var(--menu-accent);border-width:0 2px 2px 0;transform:rotate(45deg) scale(.5);opacity:0;transition:all .2s}
.ch-toggle input:checked + .ch-box{border-color:var(--menu-accent);background:oklch(68% .21 353/.15);box-shadow:var(--menu-glow)}
.ch-toggle input:checked + .ch-box::after{opacity:1;transform:rotate(45deg) scale(1)}
.ch-key{margin-left:auto;font-size:13px;color:var(--menu-text);background:var(--menu-input);border:1px solid var(--menu-border);padding:2px 12px;border-radius:5px;pointer-events:none}
/* Colour swatch on the ESP rows. Had no rule at all before this pass, so it
   rendered as a zero-width span. */
.ch-sw{width:13px;height:13px;border-radius:3px;flex:0 0 auto;background:var(--c,#fff);border:1px solid oklch(100% 0 0/.2)}
/* Select */
.ch-select,.ch-input{width:100%;padding:6px 10px;border-radius:5px;border:1px solid var(--menu-border);background:var(--menu-input);color:var(--menu-title);font-family:'Poppins';font-size:13px;margin:0;transition:border-color .2s;
  -webkit-appearance:none;appearance:none;
  background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23787084' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 10px center;background-size:14px;padding-right:30px}
.ch-input{background-image:none;padding-right:10px}
.ch-select:hover{border-color:oklch(68% .21 353/.6)}
/* Without this the native option list renders white-on-white on Windows. */
.ch-select option{background:#211b26;color:#e8e2ea}
.ch-select:focus,.ch-input:focus{outline:none;border-color:var(--menu-accent)}
/* Slider */
.ch-slider{margin:0}
.ch-slabel{display:flex;align-items:baseline;justify-content:space-between;gap:8px;font-size:13px;color:var(--menu-text);margin:0}
.ch-slabel b{color:var(--menu-title);font-family:ui-monospace,'Cascadia Mono',Consolas,monospace;font-weight:400;font-variant-numeric:tabular-nums}
.ch-track{position:relative;height:14px;margin-top:4px;cursor:pointer}
/* The visible bar is a child of the 14px hit area so the knob has room to
   overflow it without the pointer target shrinking to 6px. */
.ch-track::before{content:'';position:absolute;left:0;right:0;top:50%;height:6px;transform:translateY(-50%);border-radius:999px;background:var(--menu-input)}
.ch-fill{position:absolute;left:0;top:50%;height:6px;transform:translateY(-50%);border-radius:999px;background:var(--menu-grad);transition:width .1s}
.ch-knob{position:absolute;top:50%;width:13px;height:13px;border-radius:50%;background:var(--menu-accent);box-shadow:var(--menu-glow);transform:translate(-50%,-50%);transition:transform .15s}
.ch-track:hover .ch-knob{transform:translate(-50%,-50%) scale(1.15)}
/* Buttons / hints */
.ch-apply{padding:6px 14px;border-radius:5px;border:1px solid transparent;background:var(--menu-grad);color:#fff;font-family:'Poppins';font-weight:500;font-size:13px;cursor:pointer;transition:opacity .2s}
.ch-apply:hover{opacity:.88}
.ch-hint{font-size:13px;color:var(--menu-dim)}
/* Skin tab — laid out from _archive/menu/menu4.png, which is the real menu.
   The warning line sits above everything, the loadout grid takes the left
   column and the per-skin detail rail the right one. */
.ch-warn{font-size:15px;font-weight:500;color:var(--menu-warn);margin-bottom:10px}
.ch-skinbar{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-bottom:12px}
.ch-skinbar .ch-apply{margin-left:auto}
.ch-count{display:inline-flex;align-items:center;justify-content:center;min-width:20px;height:20px;padding:0 5px;border-radius:999px;background:oklch(68% .21 353/.18);border:1px solid var(--menu-accent);color:var(--menu-title);font-size:12px;margin-left:4px}
/* The card-size slider is the only one that must not stretch to full width. */
.ch-cardsize{margin-left:auto;width:190px;flex:0 0 auto}
.ch-skinsplit{display:grid;grid-template-columns:minmax(0,1fr) 230px;gap:12px;align-items:start}
.ch-skindet{background:var(--menu-panel);border:1px solid var(--menu-border);border-radius:.375rem;padding:12px}
.ch-skindet > * + *{margin-top:8px}
.ch-skindet > .ch-lbl + *{margin-top:4px}
.ch-dtitle b{display:block;font-size:15px;font-weight:500;color:var(--menu-title);line-height:1.25}
.ch-dtitle span{display:block;font-size:15px;color:var(--menu-text);line-height:1.25}
.ch-ghost{width:100%;padding:6px 10px;border-radius:5px;border:1px solid var(--menu-border);background:var(--menu-input);color:var(--menu-text);font-family:'Poppins';font-size:13px;cursor:pointer;transition:border-color .2s,color .2s}
.ch-ghost:hover{border-color:oklch(68% .21 353/.6);color:var(--menu-title)}
/* Skin grid — cards carry a rarity rail (--r) under the name, like the game.
   Card width is driven by --ch-card, which the "Card size" slider writes, so
   the columns reflow the way the real menu's thumb slider does. */
.ch-skingrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(var(--ch-card,107px),1fr));gap:8px;background:oklch(14% .012 320/.6);border:1px solid var(--menu-border);border-radius:.375rem;padding:10px;align-content:start}
.ch-skin{position:relative;display:block;width:100%;background:var(--menu-panel);border:1px solid var(--menu-border);border-radius:6px;padding:10px 6px 6px;text-align:center;cursor:pointer;transition:border-color .2s,box-shadow .2s,background .2s;font-family:'Poppins';font-size:13px;color:var(--menu-dim)}
.ch-skin b{display:block;color:var(--menu-title);margin-top:6px;padding-top:5px;font-size:13px;font-weight:400;text-align:left;border-top:2px solid var(--r,var(--menu-border));white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
/* Preview art. Same source the real menu uses: skin_db.cpp builds
   kSkinImagePrefix + the entry's "i" field and skin_images::get_url downloads
   it, so these are the exact Steam CDN thumbnails, asked for at 256x128 rather
   than full size. The box scales with the card so a name never crowds the art,
   and its height is fixed so a card doesn't resize while an image is in flight. */
.ch-skin .ch-skimg{display:flex;align-items:center;justify-content:center;height:calc(var(--ch-card,107px) * .5)}
.ch-skin .ch-skimg img{max-width:100%;max-height:100%;object-fit:contain;display:block}
.ch-skin:hover{border-color:oklch(68% .21 353/.6);background:oklch(26% .016 320/.5)}
.ch-skin.on{border-color:var(--menu-accent);box-shadow:var(--menu-glow)}
/* "Applied" dot, the pink marker the real menu paints on catalogue cards that
   are already in the loadout. */
.ch-skin.applied::after{content:'';position:absolute;top:7px;right:7px;width:8px;height:8px;border-radius:50%;background:var(--menu-accent);box-shadow:0 0 0 2px oklch(14% .012 320)}
.ch-skin.add{display:flex;flex-direction:column;align-items:center;justify-content:center;min-height:96px;color:var(--menu-dim);border-style:dashed}
.ch-skin.add svg{width:26px;height:26px;display:block}
.ch-skin.add small{font-size:12px;margin-top:2px}
.ch-skin.add:disabled{cursor:not-allowed;opacity:.45}
.ch-skin.add:disabled:hover{border-color:var(--menu-border);background:var(--menu-panel)}
/* Picker (steps 1 and 2). It replaces the loadout view rather than opening on
   top of it — the real menu returns early while picking, so nothing behind is
   drawn at all. The [hidden] rule is explicit because a later `display` on
   .ch-view would silently beat the UA stylesheet's. */
.ch-view[hidden]{display:none}
.ch-pickbar{display:flex;align-items:center;gap:10px;margin-bottom:10px}
.ch-picktitle{font-size:15px;font-weight:500;color:var(--menu-title)}
.ch-back{width:auto;flex:0 0 auto;padding:6px 12px}
.ch-search{margin-left:auto;width:200px;flex:0 0 auto;-webkit-appearance:none;appearance:none}
/* type=search draws its own clear button, in the UA's colours, which reads as a
   light artefact on a dark field. */
.ch-search::-webkit-search-cancel-button,.ch-search::-webkit-search-decoration{-webkit-appearance:none;appearance:none}
.ch-search::placeholder{color:var(--menu-dim)}
/* The picker scrolls instead of growing the page. This is the one scroll box
   on the site, and it is deliberate: step 1 is 63 weapons and step 2 is up to
   58 skins, so an uncapped grid pushed the section to ~1000px and shoved the
   rest of the page down. The real menu does the same thing — DrawSkin wraps
   its catalogue in a BeginChild scroll region.
   The height is viewport-relative so the whole picker (back bar + grid) stays
   on screen on any display, with a floor so it never collapses to a slit. */
.ch-pickgrid{max-height:min(52vh,520px);min-height:220px;overflow-y:auto;overscroll-behavior:contain;scrollbar-width:thin;scrollbar-color:oklch(68% .21 353/.5) transparent}
.ch-pickgrid::-webkit-scrollbar{width:8px}
.ch-pickgrid::-webkit-scrollbar-track{background:transparent}
.ch-pickgrid::-webkit-scrollbar-thumb{background:oklch(68% .21 353/.45);border-radius:4px}
.ch-pickgrid::-webkit-scrollbar-thumb:hover{background:oklch(68% .21 353/.7)}
/* Category heading inside the weapon picker — full-row, so the grid breaks
   cleanly between Rifles / SMGs / Pistols / Heavy / Knives / Gloves. It sticks
   to the top of the scroll box so you always know which category you are in;
   top:-10px cancels the grid's own padding, and the opaque background is
   required or the cards would show through as it passes over them. */
.ch-cat{grid-column:1 / -1;position:sticky;top:-10px;z-index:1;font-size:13px;font-weight:500;color:var(--menu-title);padding:6px 2px 2px;background:oklch(14% .012 320/.97);border-bottom:1px solid var(--menu-border)}
.ch-cat:first-child{padding-top:0}
.ch-none{grid-column:1 / -1;padding:24px 2px;font-size:13px;color:var(--menu-dim)}
/* Nothing is selected once the last loadout card is removed. */
.ch-skindet.empty > *{opacity:.35;pointer-events:none}
@keyframes ch-in{from{opacity:0;transform:translateY(10px) scale(.985)}to{opacity:1;transform:none}}
@keyframes ch-float{0%,100%{transform:translate(0,0) scale(1)}50%{transform:translate(6px,-22px) scale(1.35)}}
@media(prefers-reduced-motion:reduce){
  .ch-panel.active,.ch-card{animation:none}
  .ch-dots i{animation:none}
}
@media(max-width:720px){
  .cheat{grid-template-columns:1fr}
  .ch-side{flex-direction:row;flex-wrap:wrap;justify-content:center;border-right:none;border-bottom:1px solid var(--menu-border);gap:6px;min-height:0}
  .ch-avatar,.ch-grp,.ch-user{display:none}
  .ch-nav{width:auto;padding:6px 10px}
  .ch-nav::before{display:none}
  .ch-panel.active{grid-template-columns:1fr}
  .ch-skinsplit{grid-template-columns:1fr}
  /* Phone: ignore the card-size slider and force three columns, otherwise a
     107px minimum leaves one card per row on a narrow screen. */
  .ch-skingrid{grid-template-columns:repeat(3,1fr)}
  .ch-skin .ch-skimg{height:44px}
  .ch-cardsize{margin-left:0;width:100%}
  .ch-pickbar{flex-wrap:wrap}
  .ch-search{margin-left:0;width:100%;order:3}
}

/* ===== Customer panel ===== */
/* Avatar fallback when Discord gives us no image. Sized to match .ch-av. */
.pf-initial{width:58px;height:58px;border-radius:50%;background:var(--pink);color:#fff;display:flex;align-items:center;justify-content:center;font-family:'Sora';font-weight:800;font-size:1.45rem;flex:0 0 auto;box-shadow:0 0 18px var(--pink-glow)}
/* Downloads */
.dl-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:14px;margin-top:16px}
.dl-card{display:flex;align-items:center;gap:14px;padding:16px 18px;border-radius:16px;background:#0a070c;border:1px solid var(--line);text-decoration:none;color:var(--text);transition:.18s}
.dl-card:hover{border-color:var(--pink);transform:translateY(-2px);box-shadow:0 12px 30px rgba(0,0,0,.4)}
.dl-card .dl-ic{width:42px;height:42px;flex:0 0 auto;display:flex;align-items:center;justify-content:center;border-radius:12px;background:rgba(255,30,140,.12);border:1px solid var(--line)}
.dl-card .dl-ic [data-ico]{width:24px;height:24px}
.dl-card b{display:block;font-size:.98rem}
.dl-card small{color:var(--muted);font-size:.78rem}
.dl-card .dl-go{margin-left:auto;color:var(--pink-soft);font-weight:700;font-size:.85rem;white-space:nowrap}
.mini-btn.danger{border-color:rgba(255,92,122,.4)}

/* ===== Customer panel v2 — stacked cards, no tabs, no scroll boxes ===== */
.cust-head{display:flex;align-items:center;gap:16px;flex-wrap:wrap;margin-bottom:26px}
.cust-head .ch-av{width:58px;height:58px;border-radius:50%;border:2px solid var(--pink);object-fit:cover;flex:0 0 auto;box-shadow:0 0 18px var(--pink-glow)}
.cust-head .ch-who{min-width:0}
.cust-head .ch-name{font-family:'Sora';font-weight:800;font-size:clamp(1.35rem,3vw,1.85rem);line-height:1.12;letter-spacing:.01em}
.cust-head .ch-name b{color:var(--pink)}
.cust-head .ch-sub{color:var(--muted);font-size:.88rem;margin-top:3px}
.cust-head .ch-act{margin-left:auto;display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.logout-btn{display:inline-flex;align-items:center;gap:8px;padding:11px 18px;border-radius:13px;border:1px solid var(--line);background:var(--card);color:var(--text);font-family:'Poppins';font-weight:700;font-size:.9rem;cursor:pointer;transition:.16s}
.logout-btn svg{width:17px;height:17px;flex:none}
.logout-btn:hover{border-color:#ff5c7a;color:#ff5c7a;box-shadow:0 8px 22px rgba(255,92,122,.18)}

.cpanel{background:var(--card);border:1px solid var(--line);border-radius:20px;padding:24px;margin-bottom:18px;box-shadow:0 20px 60px rgba(0,0,0,.45)}
.cpanel-head{display:flex;align-items:center;gap:14px;margin-bottom:18px}
.cp-ic{width:42px;height:42px;flex:0 0 auto;display:flex;align-items:center;justify-content:center;border-radius:13px;background:rgba(255,30,140,.12);border:1px solid var(--line);color:var(--pink)}
.cp-ic svg{width:21px;height:21px;flex:none}
.cp-title{font-family:'Sora';font-weight:700;font-size:1.1rem;line-height:1.2}
.cp-sub{color:var(--muted);font-size:.84rem;margin-top:3px}

.redeem-row{display:flex;gap:12px;flex-wrap:wrap}
.redeem-row input{flex:1;min-width:230px;padding:14px 16px;border-radius:14px;border:1px solid var(--line);background:#0a070c;color:var(--text);font-family:'Sora';font-weight:600;letter-spacing:.13em;font-size:.92rem;transition:.16s}
.redeem-row input::placeholder{color:#6b5461;letter-spacing:.13em}
.redeem-row input:focus{outline:none;border-color:var(--pink);box-shadow:0 0 0 3px rgba(255,30,140,.15)}
.redeem-row .buy{padding:14px 26px;border-radius:14px;flex:0 0 auto}
.redeem-note{font-size:.78rem;margin-top:12px;color:var(--muted)}
.redeem-note a{color:var(--pink-soft);text-decoration:none}
.redeem-note.err{color:#ff5c7a}

.lic-row{display:flex;align-items:center;gap:16px;padding:17px 19px;border-radius:16px;background:#0a070c;border:1px solid var(--line);margin-top:12px;flex-wrap:wrap;transition:.16s}
.lic-row:first-of-type{margin-top:0}
.lic-row:hover{border-color:rgba(255,30,140,.42)}
.lic-main{flex:1 1 240px;min-width:0}
.lic-name{font-family:'Sora';font-weight:700;font-size:1.02rem;display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.lic-key{font-family:'Sora';font-weight:600;letter-spacing:.11em;font-size:.88rem;margin-top:8px;color:#8d7482;word-break:break-all}
.lic-key.shown{color:var(--pink-soft)}
.lic-meta{color:var(--muted);font-size:.79rem;margin-top:6px}
.lic-acts{display:flex;gap:8px;margin-left:auto;flex:0 0 auto}
.icon-btn{width:37px;height:37px;flex:none;border-radius:11px;border:1px solid var(--line);background:transparent;color:var(--muted);display:flex;align-items:center;justify-content:center;cursor:pointer;transition:.15s;padding:0}
.icon-btn svg{width:18px;height:18px;flex:none}
.icon-btn:hover{border-color:var(--pink);color:var(--pink)}
.icon-btn.danger:hover{border-color:#ff5c7a;color:#ff5c7a}
.icon-btn.ok{border-color:var(--green);color:var(--green)}

.pill{display:inline-flex;align-items:center;padding:3px 11px;border-radius:999px;font-family:'Poppins';font-size:.68rem;font-weight:700;letter-spacing:.09em;text-transform:uppercase;white-space:nowrap}
.pill.on{background:rgba(60,232,138,.13);color:var(--green);border:1px solid rgba(60,232,138,.42)}
.pill.pink{background:rgba(255,30,140,.15);color:#ff4fa8;border:1px solid rgba(255,79,168,.45)}
.pill.off{background:rgba(123,98,112,.15);color:#7b6270;border:1px solid rgba(123,98,112,.4)}
.pill.bad{background:rgba(255,92,122,.13);color:#ff5c7a;border:1px solid rgba(255,92,122,.42)}
.cp-empty{color:var(--muted);font-size:.88rem;padding:22px 4px;text-align:center}
@media(max-width:560px){
  .cust-head .ch-act{margin-left:0;width:100%}
  .lic-acts{margin-left:0}
  .redeem-row .buy{width:100%}
}

/* ===== Music panel (js/music.js) ===== */
/* Lives inline in .navlinks, at the right end of the nav: a round button that
   expands into a transport pill on hover.

   The container's footprint is FIXED at 36px and never changes — the pill is
   position:absolute at every moment, so opening it costs no layout at all.
   That is not a style choice, it is the only safe option here: `nav` and
   `.navlinks` are both flex-wrap:wrap, so an element that grew in flow would
   reflow the nav, possibly wrap to a new line, slide out from under the cursor,
   fire mouseleave, shrink back, fire mouseenter — an oscillation that pins the
   tab at 100%. A hover target must never resize the layout it sits in.

   The pill grows leftward from the button and overlays the nav links while it
   is open. It is a child of .mz, so moving the pointer from the button onto the
   pill does not count as leaving .mz and does not close it. */
.mz{position:relative;display:inline-flex;align-items:center;justify-content:flex-end;
  width:36px;height:36px;flex:0 0 36px}
.mz svg{width:100%;height:100%;display:block}

/* --- closed: the round note button --- */
.mz-chip{width:36px;height:36px;padding:9px;border-radius:50%;cursor:pointer;
  background:rgba(255,30,140,.12);border:1px solid var(--line);color:var(--pink-soft);
  transition:opacity .25s,transform .25s,color .2s,background .2s,box-shadow .2s}
.mz-chip:hover{color:var(--pink);box-shadow:0 0 16px var(--pink-glow)}
.mz.playing .mz-chip{color:var(--pink);border-color:var(--pink);animation:mz-pulse 2s ease-in-out infinite}
@keyframes mz-pulse{0%,100%{opacity:1}50%{opacity:.55}}
/* Fades out but keeps its box — removing it from flow is what caused the loop. */
.mz.on .mz-chip{opacity:0;transform:scale(.75);pointer-events:none}

/* --- open: the transport pill --- */
/* position:absolute in BOTH states, so it never participates in layout. It is
   vertically centred on the button and grows leftward from the same right edge.
   No backdrop-filter: the header above it is already blurred, and stacking a
   second backdrop-filter inside the first is expensive enough to stutter on
   every repaint. An opaque background is cheaper and looks the same here. */
.mz-bar{position:absolute;right:0;top:50%;z-index:2;
  display:flex;align-items:center;gap:4px;
  padding:5px 8px;border-radius:999px;white-space:nowrap;
  background:#120d16;border:1px solid var(--line);
  box-shadow:0 10px 30px rgba(0,0,0,.55);
  transform-origin:right center;transform:translateY(-50%) scale(.75) translateX(16px);
  opacity:0;pointer-events:none;transition:opacity .25s,transform .25s}
.mz.on .mz-bar{opacity:1;transform:translateY(-50%);pointer-events:auto}

/* While the pill is open the nav items get out of its way instead of being
   covered. `--mz-push` and the `.mz-away` marks are computed in JS (measure()
   in music.js) — .mz-away is put only on the items the pill actually reaches.

   Both properties here are transform and opacity on purpose: they are
   compositor-only. Nothing may change SIZE on hover in this nav, or the header
   reflows and the freeze described above comes straight back. */
.navlinks > *:not(.mz){transition:color .2s,background .2s,opacity .24s,transform .28s cubic-bezier(.22,.61,.36,1)}
.navlinks.mz-open > .mz-away{transform:translateX(calc(var(--mz-push,0px) * -.28));opacity:0;pointer-events:none}

.mz-b{width:28px;height:28px;padding:7px;border:0;border-radius:50%;cursor:pointer;
  background:transparent;color:var(--muted);flex:0 0 auto;
  transition:color .18s,background .18s,filter .18s}
.mz-b:hover{color:var(--pink);background:rgba(255,30,140,.14)}
.mz-b.go{width:32px;height:32px;padding:9px;color:#fff;
  background:linear-gradient(135deg,var(--pink),#8a0f4d);box-shadow:0 0 14px var(--pink-glow)}
.mz-b.go:hover{color:#fff;filter:brightness(1.14)}
.mz-sep{width:1px;height:18px;background:var(--line);flex:0 0 auto;margin:0 3px}

/* Equalizer — the only "is it playing" readout, exactly as in the reference.
   Hidden with visibility, not display, so the pill's width is identical whether
   or not something is playing: a width change under the pointer can pull the
   pill's edge past the cursor and close it mid-use. Height is animated on three
   3px bars only, which is small enough that the per-frame layout is free. */
.mz-eq{display:inline-flex;align-items:flex-end;gap:2px;height:13px;flex:0 0 auto;
  margin-right:3px;visibility:hidden}
.mz.playing .mz-eq{visibility:visible}
/* scaleY on a fixed-height bar rather than animating `height`: the bars run
   forever while music plays, and height would relayout the pill every frame. */
.mz-eq i{display:block;width:2.5px;height:13px;border-radius:2px;background:var(--pink);
  transform-origin:50% 100%;animation:mz-eq .9s ease-in-out infinite;will-change:transform}
.mz-eq i:nth-child(2){animation-delay:.15s}
.mz-eq i:nth-child(3){animation-delay:.3s}
@keyframes mz-eq{0%,100%{transform:scaleY(.3)}50%{transform:scaleY(1)}}

.mz-vol{-webkit-appearance:none;appearance:none;width:64px;height:4px;flex:0 0 auto;
  border-radius:999px;cursor:pointer;outline:none;
  background:linear-gradient(90deg,rgba(255,30,140,.6),rgba(255,30,140,.2))}
.mz-vol::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;
  width:12px;height:12px;border-radius:50%;background:var(--pink);
  border:2px solid #fff;box-shadow:0 0 8px var(--pink-glow);cursor:pointer}
.mz-vol::-moz-range-thumb{width:12px;height:12px;border-radius:50%;background:var(--pink);
  border:2px solid #fff;box-shadow:0 0 8px var(--pink-glow);cursor:pointer}

/* Playlist unreachable: no controls to offer, so show nothing but a dim note. */
.mz-dead .mz-chip{opacity:.35;pointer-events:none;animation:none}
.mz-dead .mz-bar{display:none}

/* Fallback for a page with no nav bar — pin it to the corner instead. */
.mz-float{position:fixed;top:80px;right:18px;z-index:60}

@media(prefers-reduced-motion:reduce){
  .mz-eq i{animation:none;transform:scaleY(.7)}
  .mz.playing .mz-chip{animation:none}
  .mz-chip,.mz-bar{transition:opacity .01s}
  .navlinks > *:not(.mz){transition:none}
}
/* Hover does not exist on touch: the pill opens on tap instead, and it must not
   be wider than the screen when it does. */
@media(max-width:560px){
  .mz-vol{width:48px}
  .mz-bar{padding:4px 6px}
}