/* ===========================================================
   MIDI CLIPZ — y2k / HitClips aesthetic. modern css, 2004 soul.
   =========================================================== */

* { box-sizing: border-box; }

:root{
  --ink:#10103a;
  --panel:#dfe3ff;
  --panel-edge:#9aa0e0;
  --hot:#ff2e9a;
  --hot2:#7b2ff7;
}

body{
  margin:0;
  font-family: Verdana, Tahoma, Geneva, Arial, sans-serif;
  font-size:12px;
  color:var(--ink);
  /* tiled diagonal candy background */
  background-color:#1a0b3a;
  background-image:
    radial-gradient(circle at 20% 10%, rgba(255,255,255,.10) 0 2px, transparent 3px),
    radial-gradient(circle at 70% 60%, rgba(255,255,255,.08) 0 2px, transparent 3px),
    linear-gradient(135deg,#2a0a52 0%, #120a3a 40%, #06122e 100%);
  background-size:64px 64px, 90px 90px, 100% 100%;
  background-attachment: fixed;
}

a{ color:#1b3df0; }

.blink{ animation: blink 1s steps(2,start) infinite; color:#39ff7a; }
@keyframes blink{ to{ visibility:hidden; } }

/* ===== TOP BAR ===== */
#topbar{
  position:sticky; top:0; z-index:50;
  display:flex; align-items:center; justify-content:space-between;
  padding:5px 10px;
  background:linear-gradient(#3a3a6e,#1c1c3e);
  border-bottom:2px solid #000;
  color:#cfe;
  font-size:11px;
}
.tb-left{ letter-spacing:.5px; text-shadow:1px 1px 0 #000; }
.cartpill{
  font-family:inherit; font-weight:bold; font-size:12px; cursor:pointer;
  color:#311; padding:5px 12px; border-radius:14px;
  border:2px solid #fff7; border-top-color:#ffffffcc;
  background:linear-gradient(#ffe65a,#ffae00);
  box-shadow:0 2px 0 #00000055, inset 0 1px 0 #fff;
  transition:transform .08s;
}
.cartpill:active{ transform:translateY(2px); box-shadow:0 0 0 #0000; }
.cartpill.bump{ animation:bump .4s; }
@keyframes bump{ 0%,100%{transform:scale(1)} 30%{transform:scale(1.18) rotate(-3deg)} }

/* ===== MOBILE MENU (hamburger -> sidebar drawer) ===== */
.menupill{
  display:none; font-family:inherit; font-weight:bold; font-size:12px; cursor:pointer;
  color:#fff; padding:5px 12px; border-radius:14px;
  border:2px solid #fff7; border-top-color:#ffffffcc;
  background:linear-gradient(#5b6bff,#2a1d8f);
  box-shadow:0 2px 0 #00000055, inset 0 1px 0 #fff6; transition:transform .08s;
}
.menupill:active{ transform:translateY(2px); box-shadow:0 0 0 #0000; }
.sideclose{
  display:none; position:absolute; top:6px; right:8px; z-index:2;
  width:30px; height:30px; border-radius:8px; cursor:pointer;
  font:bold 18px/1 Verdana,sans-serif; color:#fff;
  background:linear-gradient(#ff5aa0,#c01070); border:2px solid #fff7;
  box-shadow:0 2px 0 #00000055;
}

/* ===== BANNER ===== */
#banner{ text-align:center; padding:18px 10px 8px; position:relative; }
.wordmark{
  font-family: "Arial Black", Impact, Haettenschweiler, sans-serif;
  font-weight:900; font-size:64px; line-height:.9; letter-spacing:-2px;
  background:linear-gradient(#fff 0%, #ffe96a 28%, #ff8a00 52%, #ff2e9a 70%, #b800ff 100%);
  -webkit-background-clip:text; background-clip:text; color:transparent;
  -webkit-text-stroke:2px #2a0050;
  filter:drop-shadow(3px 4px 0 #00000070);
  transform: scaleY(1.12);
}
.wordmark .tm{ font-size:20px; -webkit-text-stroke:1px #2a0050; }
.tagline{
  margin-top:8px; font-weight:bold; color:#ffe96a; font-size:13px;
  text-shadow:1px 1px 0 #b800ff, 2px 2px 0 #000;
}
.ownedchip{
  display:inline-block; margin-top:10px; padding:3px 12px; border-radius:12px;
  background:#00000055; color:#9effc4; border:1px solid #39ff7a55; font-size:11px;
}
.ownedchip b{ color:#fff; }

/* ===== MARQUEE ===== */
.marquee{
  position:sticky; top:var(--tbH,30px); z-index:45;
  overflow:hidden; white-space:nowrap; background:#000;
  border-top:2px solid #ff2e9a; border-bottom:2px solid #00e0ff;
  color:#39ff7a; font-weight:bold; padding:4px 0; font-size:12px; cursor:pointer;
}
.marquee:hover .marquee-track{ animation-play-state:paused; }   /* pause scroll on hover */
.marquee-track{ display:inline-block; padding-left:100%; animation:scroll 24s linear infinite; will-change:transform; }
@keyframes scroll{ to{ transform:translateX(-100%); } }
/* footer marquee: CSS transform (cheap) instead of the native <marquee> reflow */
.footmq{ overflow:hidden; white-space:nowrap; }
.footmq-track{ display:inline-block; padding-left:100%; animation:scroll 28s linear infinite; will-change:transform; color:#ffe96a; font-weight:bold; }

/* ===== NOW PLAYING ===== */
#nowplaying{
  position:sticky; top:calc(var(--tbH,30px) + var(--mqH,26px)); z-index:40;
  display:flex; align-items:center; gap:10px;
  padding:5px 12px;
  background:linear-gradient(#101030,#1c1c46);
  border-bottom:1px solid #00e0ff66;
  color:#dfe;
}
.np-label{ color:#00e0ff; font-weight:bold; white-space:nowrap; text-shadow:0 0 6px #00e0ff88; }
#npTitle{ font-weight:bold; color:#ffe96a; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; flex:0 1 auto; cursor:pointer; }
#npTitle:hover{ text-decoration:underline; }
.cart.locate{ animation:locateflash 1s ease; }
@keyframes locateflash{ 0%,100%{ box-shadow:none; } 30%,60%{ box-shadow:0 0 0 4px #ffe96a, 0 0 16px #ffe96a; } }
#npBar{ flex:1 1 auto; height:10px; background:#000; border:1px solid #444; border-radius:5px; overflow:hidden; min-width:60px; }
#npBar i{ display:block; height:100%; width:0; background:linear-gradient(90deg,#39ff7a,#00e0ff); transition:width .25s linear; }
.np-play{ font-family:inherit; cursor:pointer; border:2px outset #889; background:#cdd; border-radius:3px; min-width:24px; }

/* ===== LAYOUT ===== */
#layout{ display:flex; gap:14px; max-width:1024px; margin:14px auto; padding:0 12px; align-items:flex-start; }
#side{ width:200px; flex:0 0 200px; display:flex; flex-direction:column; gap:12px; }
#main{ flex:1 1 auto; min-width:0; }

/* ===== PANELS (XP-ish) ===== */
.panel{
  background:var(--panel); border:2px solid #fff;
  border-radius:8px; box-shadow:0 3px 0 #00000055, inset 0 0 0 2px var(--panel-edge);
  overflow:hidden;
}
.panel-h{
  background:linear-gradient(#5b6bff,#2a1d8f);
  color:#fff; font-weight:bold; padding:5px 8px; font-size:11px;
  letter-spacing:.5px; text-shadow:1px 1px 0 #0008;
}
.panel-b{ padding:8px; }
.infobox p{ margin:0 0 7px; line-height:1.45; }
.infobox .tiny, .tiny{ font-size:10px; color:#556; }
.counter{
  font-family:"Courier New",monospace; background:#000; color:#39ff7a;
  padding:3px 5px; border-radius:3px; letter-spacing:2px; text-align:center;
}
.webring .panel-b{ text-align:center; font-size:11px; }
.bestview{ margin-top:6px; color:#a40; font-weight:bold; font-size:10px; }

/* ===== MYSTERY CRATE + RARITY ===== */
.cratepanel .panel-h{ background:linear-gradient(#7b2ff7,#ff2e9a); }
.crateline{ font-size:11px; color:#445; text-align:center; margin-bottom:7px; }
.crateglow{ font-family:"Arial Black",Impact,sans-serif; font-size:13px; text-align:center; color:#2a1d8f; margin-bottom:3px; }
.cratehint{ font-size:9px; color:#667; text-align:center; margin-top:6px; line-height:1.3; }
.cratebtn{ width:100%; font-family:inherit; font-weight:bold; font-size:12px; cursor:pointer; padding:8px;
  border-radius:7px; border:2px solid #fff; background:linear-gradient(#c89bff,#6a1bd6); color:#fff;
  box-shadow:0 3px 0 #00000055; text-shadow:0 1px 0 #0006; }
.cratebtn:active{ transform:translateY(2px); box-shadow:0 0 0 #0000; }
.cratebtn.glow{ animation:cratepulse 1.6s ease-in-out infinite; }
@keyframes cratepulse{ 50%{ filter:brightness(1.3) drop-shadow(0 0 8px #fff8); } }
.tok{ word-break:break-all; } .tok b{ color:#0a7; font-family:"Courier New",monospace; }
.tokwink{ font-size:9px; color:#a40; }

/* rarity tints for the crate panel */
.cratepanel.r-silver .panel-h{ background:linear-gradient(#e8edf5,#9aa6c0); color:#223; text-shadow:none; }
.cratepanel.r-gold .panel-h{ background:linear-gradient(#ffe96a,#e0a200); color:#5a3b00; text-shadow:none; }
.cratepanel.r-diamond .panel-h{ background:linear-gradient(#bfeaff,#5ab0ff); color:#023; text-shadow:none; }
.cratepanel.r-holo .panel-h{ background:linear-gradient(90deg,#ff5ad0,#ffe96a,#5af0ff,#9bff6a,#ff5ad0); background-size:300% 100%; color:#1a0030; text-shadow:none; animation:holo 4s linear infinite; }
@keyframes holo{ to{ background-position:300% 0; } }

/* the reveal card in the crate modal */
.modal-h.crate{ background:linear-gradient(#7b2ff7,#ff2e9a); }
.reveal{ text-align:center; padding:14px; border-radius:10px; border:3px solid #fff; }
.reveal .rev-tier{ font-weight:900; font-size:13px; letter-spacing:1px; margin-bottom:6px; }
.reveal .rev-ttl{ font-family:"Arial Black",Impact,sans-serif; font-size:26px; color:#fff; text-shadow:1px 2px 0 #00000066; }
.reveal .rev-blip{ font-size:11px; color:#fff; opacity:.92; margin:6px 0 10px; line-height:1.4; }
.reveal .rev-row{ display:flex; gap:8px; justify-content:center; }
.reveal .rev-row .btn{ flex:0 1 150px; }
.reveal .rev-tiny{ font-size:10px; color:#fff; opacity:.8; margin-top:10px; }
.reveal.r-silver{ background:linear-gradient(140deg,#f2f5fb,#9aa6c0); } .reveal.r-silver .rev-tier{ color:#334; } .reveal.r-silver .rev-ttl,.reveal.r-silver .rev-blip,.reveal.r-silver .rev-tiny{ color:#1a2030; text-shadow:none; }
.reveal.r-gold{ background:linear-gradient(140deg,#fff3a8,#e0a200); } .reveal.r-gold .rev-tier{ color:#5a3b00; } .reveal.r-gold .rev-ttl,.reveal.r-gold .rev-blip,.reveal.r-gold .rev-tiny{ color:#3a2600; text-shadow:none; }
.reveal.r-diamond{ background:linear-gradient(140deg,#dff4ff,#5ab0ff); } .reveal.r-diamond .rev-tier{ color:#024; } .reveal.r-diamond .rev-ttl,.reveal.r-diamond .rev-blip,.reveal.r-diamond .rev-tiny{ color:#012; text-shadow:none; }
.reveal.r-holo{ background:linear-gradient(120deg,#ff5ad0,#ffe96a,#5af0ff,#9bff6a,#c89bff,#ff5ad0); background-size:300% 300%; animation:holo 5s linear infinite; }
.reveal.r-holo .rev-tier{ color:#1a0030; }
.reveal.dud{ background:linear-gradient(140deg,#3a3a5e,#1c1c3e); }
.reveal.dud .rev-ttl{ color:#cdd; } .reveal.dud .rev-blip,.reveal.dud .rev-tiny{ color:#99a; }
/* deal-pack crate (never empty) */
.cratepanel.dealcrate .panel-h{ background:linear-gradient(#39d27a,#0a8f3a); color:#fff; }
.reveal.deal{ background:linear-gradient(140deg,#5bff9a,#0a8f3a); }
.reveal.deal .rev-tier{ color:#053; }
.dealrows{ display:flex; flex-direction:column; gap:7px; margin:10px 0; }
.dealrow{ display:flex; align-items:center; gap:8px; background:#fff; border:2px solid #fff; border-radius:7px; padding:6px 8px; box-shadow:0 2px 0 #00000044; }
.dealplay{ flex:0 0 auto; width:26px; height:26px; border-radius:50%; cursor:pointer; font-size:12px; color:#fff;
  border:2px solid #fff; background:radial-gradient(circle at 35% 30%, var(--c1), var(--c2)); }
.dealnm{ flex:1 1 auto; font-weight:bold; color:#223; text-align:left; }
.dealpr{ font-family:"Courier New",monospace; font-size:11px; color:#0a6; }
.dealpr s{ color:#a55; opacity:.7; }
.dealbuy{ flex:0 0 auto; padding:5px 9px; }

/* ===== PRIZE CRATE: wider modal, face-down cards, flip/pop reveal ===== */
#crateModal{ width:760px; max-width:96vw; }
.crate-sub{ text-align:center; font-size:11px; color:#445; font-weight:bold; margin:2px 0 12px; }
.cratecards{ display:grid; gap:14px; grid-template-columns:repeat(auto-fit, minmax(196px,1fr)); }
.cardslot{ min-height:204px; display:flex; }
.cardslot .cart{ width:100%; }
.cardback{ width:100%; min-height:204px; cursor:pointer; border:3px dashed #fff; border-radius:10px;
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:8px; font-family:inherit;
  background:repeating-linear-gradient(45deg,#5b6bff 0 16px,#4a5ae0 16px 32px); color:#fff;
  box-shadow:0 5px 0 #00000055, inset 0 0 0 2px #ffffff55; animation:cardwiggle 2.2s ease-in-out infinite; }
.cardback:hover{ filter:brightness(1.12); transform:translateY(-2px); }
.cardback .cb-q{ font-family:"Arial Black",Impact,sans-serif; font-size:54px; text-shadow:0 3px 0 #00000055; }
.cardback .cb-hint{ font-size:11px; font-weight:bold; opacity:.92; }
.cardback.secret{ background:repeating-linear-gradient(45deg,#ff5ad0 0 16px,#9b1bd6 16px 32px); animation:cardwiggle 1.1s ease-in-out infinite; }
.cardback.secret.r-holo{ background:linear-gradient(120deg,#ff5ad0,#ffe96a,#5af0ff,#9bff6a,#ff5ad0); background-size:300% 100%; animation:holo 4s linear infinite, cardwiggle 1.1s ease-in-out infinite; }
@keyframes cardwiggle{ 50%{ transform:translateY(-3px) rotate(-1.2deg); } }
.cardslot.pop .cart{ animation:cardpop .45s cubic-bezier(.2,1.5,.4,1) both; }   /* pop only the card the user just flipped/bought */
@keyframes cardpop{ 0%{ transform:scale(.5) rotate(-8deg); opacity:0; } 60%{ transform:scale(1.07) rotate(2deg); } 100%{ transform:scale(1) rotate(0); opacity:1; } }
/* round prize badges (override the spiky NEW! star) */
.new-burst.deal{ background:#1ba23a; clip-path:none; border-radius:50%; width:38px; height:38px; font-size:12px; }
.new-burst.rare{ background:#ffd23a; color:#5a3b00; clip-path:none; border-radius:50%; width:38px; height:38px; font-size:20px; }
.cart.secretcard{ outline:2px solid #ffffffaa; }
@media (prefers-reduced-motion: reduce){ .cardback,.cardback.secret,.cardback.secret.r-holo,.cardslot.pop .cart{ animation:none !important; } }
body.paused .cardback{ animation-play-state:paused !important; }
@media (prefers-reduced-motion: reduce){ .cratebtn.glow,.cratepanel.r-holo .panel-h,.reveal.r-holo{ animation:none !important; } }
body.paused .cratebtn.glow,body.paused .cratepanel.r-holo .panel-h,body.paused .reveal.r-holo{ animation-play-state:paused !important; }

/* ===== CREDITS ===== */
.creditpanel .panel-h{ background:linear-gradient(#ffd23a,#e0a200); color:#5a3b00; text-shadow:none; }
.credbal{ font-family:"Arial Black",Impact,sans-serif; font-size:30px; line-height:1; text-align:center; color:#b8860b;
  text-shadow:0 1px 0 #fff, 0 2px 3px #0003; }
.credsub{ text-align:center; font-size:10px; color:#667; margin:2px 0 9px; }
/* buy-credits packs (one USDC top-up on Solana) */
.credpacks-h{ text-align:center; font-size:10px; font-weight:bold; color:#5a3b8f; margin:4px 0 5px; letter-spacing:.3px; }
.credpacks{ display:flex; gap:5px; margin-bottom:9px; }
.credpack{ flex:1 1 0; min-width:0; font-family:inherit; font-weight:bold; cursor:pointer; padding:7px 3px;
  border:2px solid #fff; border-radius:7px; color:#fff; background:linear-gradient(#b388ff,#7c3aed);
  box-shadow:0 3px 0 #00000044; display:flex; flex-direction:column; align-items:center; gap:2px; font-size:11px; line-height:1.1; }
.credpack.card{ background:linear-gradient(#5fb0ff,#1b6fe0); }
.credpack b{ font-size:16px; }
.credpack .cpprice{ font-size:10px; opacity:.9; }
.credpack:active{ transform:translateY(2px); box-shadow:0 0 0 #0000; }
.credpack:disabled{ filter:grayscale(.4) opacity(.7); cursor:wait; }
.credrow{ display:flex; gap:5px; margin-bottom:7px; }
.credrow input{ flex:1 1 auto; min-width:0; font-family:"Courier New",monospace; font-weight:bold; text-transform:uppercase;
  letter-spacing:2px; padding:6px; border:2px inset #c6cbff; border-radius:5px; font-size:12px; }
.credbtn{ flex:0 0 auto; font-family:inherit; font-weight:bold; font-size:11px; cursor:pointer; padding:6px 9px;
  border:2px solid #fff; border-radius:6px; background:linear-gradient(#ffe96a,#ff8a00); color:#5a2d00; box-shadow:0 3px 0 #00000055; }
.credbtn:active{ transform:translateY(2px); box-shadow:0 0 0 #0000; }
.credwallet{ width:100%; font-family:inherit; font-weight:bold; font-size:11px; cursor:pointer; padding:8px;
  border:2px solid #fff; border-radius:7px; background:linear-gradient(#7b6bff,#3a1d9f); color:#fff; box-shadow:0 3px 0 #00000055; text-shadow:0 1px 0 #0006; }
.credwallet:active{ transform:translateY(2px); box-shadow:0 0 0 #0000; }
.credtiny{ font-size:9px; color:#778; text-align:center; margin-top:6px; line-height:1.3; }
/* the FREE (credit) button on cards */
.btn.cred{ flex:1 1 auto; background:linear-gradient(#ffe96a,#ffb000); color:#5a3b00; }

/* toast */
#toast{ position:fixed; left:50%; top:64px; transform:translateX(-50%) translateY(-16px); z-index:250;
  background:linear-gradient(#2a1d8f,#5b6bff); color:#fff; font-weight:bold; font-size:13px; padding:9px 18px;
  border:2px solid #fff; border-radius:18px; box-shadow:0 6px 18px #0008; opacity:0; pointer-events:none;
  transition:opacity .2s, transform .2s; }
#toast.show{ opacity:1; transform:translateX(-50%) translateY(0); }

/* sound chip panel */
.chippanel .panel-h{ background:linear-gradient(#ff8a00,#ff2e9a); }
.chipwrap{ position:sticky; top:calc(var(--tbH,30px) + var(--mqH,26px) + var(--npH,34px)); z-index:30; }
.chippanel{ transition:box-shadow .3s ease, border-radius .3s ease; }
.chipwrap.stuck .chippanel{ border-radius:0 0 8px 8px; border-top-color:var(--panel-edge);
  box-shadow:0 10px 22px 4px #000c, inset 0 0 0 2px var(--panel-edge); }
.chipnow{ font-family:"Arial Black",Impact,sans-serif; font-size:17px; color:#2a1d8f; text-align:center; letter-spacing:-.5px; }
.chipblip{ font-size:10px; color:#556; text-align:center; margin:2px 0 8px; line-height:1.35; }
.chiprow{ display:flex; flex-direction:column; gap:4px; margin-bottom:7px; }
.chipbtn{ font-family:inherit; font-size:10px; font-weight:bold; padding:5px 6px; cursor:pointer;
  border:2px outset #c6cbff; border-radius:5px; background:linear-gradient(#fff,#dfe3ff); color:#222; }
.chipbtn:hover{ background:linear-gradient(#fffbe0,#ffe96a); }
.chipbtn.on{ background:linear-gradient(#39d27a,#0a8f3a); color:#fff; border-style:inset; }
.chipshuffle{ width:100%; font-family:inherit; font-weight:bold; font-size:11px; cursor:pointer; padding:7px;
  border-radius:6px; border:2px solid #fff; background:linear-gradient(#ffe96a,#ff8a00); color:#5a2d00;
  box-shadow:0 3px 0 #00000055; text-shadow:0 1px 0 #fff8; }
.chipshuffle:active{ transform:translateY(2px); box-shadow:0 0 0 #0000; }
.chiptiny{ font-size:9px; color:#778; text-align:center; margin-top:6px; line-height:1.3; }

/* genre list */
.gbtn{
  display:block; width:100%; text-align:left; font-family:inherit; font-size:11px;
  margin:0 0 4px; padding:5px 8px; cursor:pointer;
  background:linear-gradient(#fff,#dfe3ff); border:2px outset #c6cbff;
  border-radius:5px; color:#222; font-weight:bold;
}
.gbtn:hover{ background:linear-gradient(#fffbe0,#ffe96a); }
.gbtn.on{ background:linear-gradient(#ff8a00,#ff2e9a); color:#fff; border-style:inset; }
.gbtn .ct{ float:right; opacity:.7; font-weight:normal; }

/* ===== BARGAIN BAR ===== */
#bargainbar{
  cursor:pointer;
  background:repeating-linear-gradient(45deg,#ffe96a 0 14px,#ffd23a 14px 28px);
  border:2px solid #b87b00; border-radius:6px; padding:6px 10px; margin-bottom:12px;
  font-weight:bold; color:#5a3b00; text-shadow:0 1px 0 #fff8;
}
#bargainbar b{ color:#c00; }
#filterLabel{ color:#7b2ff7; }

/* ===== GRID ===== */
#grid{
  display:grid; gap:14px;
  grid-template-columns:repeat(auto-fill, minmax(212px,1fr));
}

/* ===== CARTRIDGE ===== */
.cart{
  position:relative; padding:10px 10px 12px;
  border-radius:8px 8px 10px 10px;
  border:2px solid #00000040;
  background:var(--c1);
  background-image:linear-gradient(160deg,var(--c1),var(--c2));
  box-shadow:0 5px 0 #00000055, inset 0 2px 0 #ffffff80, inset 0 -10px 18px #00000035;
  transition:transform .1s, box-shadow .1s;
}
.cart::before{ /* plastic gloss */
  content:""; position:absolute; left:6px; right:6px; top:5px; height:34%;
  background:linear-gradient(#ffffffaa,#ffffff10);
  border-radius:6px 6px 40px 40px; pointer-events:none;
}
.cart:hover{ transform:translateY(-3px) rotate(-.4deg); box-shadow:0 8px 0 #00000055, inset 0 2px 0 #fff9; }
.cart.playing{ outline:3px dashed #fff; outline-offset:2px; }
.cart.owned{ }

/* two little "screws" */
.cart .screws{ position:absolute; top:6px; right:8px; left:8px; display:flex; justify-content:space-between; pointer-events:none; }
.cart .screws i{ width:6px; height:6px; border-radius:50%; background:radial-gradient(#fff,#0006); box-shadow:inset 0 0 0 1px #0004; }

.cart .toprow{ position:relative; display:flex; align-items:center; gap:8px; margin-top:6px; }
.playbtn{
  flex:0 0 auto; width:46px; height:46px; border-radius:50%; cursor:pointer;
  font-size:18px; color:#fff; font-family:inherit;
  border:2px solid #ffffffcc;
  background:radial-gradient(circle at 35% 30%, #ffffff70, #00000055);
  box-shadow:0 2px 0 #0006, inset 0 0 6px #fff6; text-shadow:0 1px 2px #000;
}
.playbtn:active{ transform:translateY(2px); }
.cart .ttl{ font-family:"Arial Black",Impact,sans-serif; font-size:21px; line-height:1; color:#fff; text-shadow:1px 2px 0 #00000066; letter-spacing:-.5px; }

.label{
  margin-top:9px; background:#fffdf4; border:1px solid #00000030; border-radius:5px;
  padding:7px 8px; box-shadow:inset 0 1px 3px #00000022;
}
.label .gp{
  display:inline-block; font-size:9px; font-weight:bold; color:#fff; padding:2px 7px;
  border-radius:9px; background:linear-gradient(var(--c1),var(--c2)); border:1px solid #0003;
  text-shadow:0 1px 0 #0005;
}
.label .blurb{ margin:6px 0 6px; color:#333; line-height:1.4; min-height:34px; }
.label .meta{ font-size:10px; color:#667; font-family:"Courier New",monospace; }
.chiptag{ display:inline-block; background:linear-gradient(var(--c1),var(--c2)); color:#fff; font-weight:bold;
  padding:0 5px; border-radius:7px; font-size:9px; border:1px solid #0003; text-shadow:0 1px 0 #0005; }

.actions{ display:flex; gap:6px; margin-top:9px; }
.btn{
  font-family:inherit; font-weight:bold; cursor:pointer; border-radius:6px;
  padding:7px 6px; font-size:12px; border:2px solid #fff;
  box-shadow:0 3px 0 #00000055; transition:transform .07s;
}
.btn:active{ transform:translateY(3px); box-shadow:0 0 0 #0000; }
.btn.add{ flex:0 0 46px; background:linear-gradient(#fff,#cfe3ff); color:#13339a; }
.btn.add.inn{ background:linear-gradient(#9effc4,#39d27a); color:#063; }
.btn.buy{ flex:1 1 auto; background:linear-gradient(#ffe96a,#ff8a00); color:#5a2d00; text-shadow:0 1px 0 #fff8; }
.btn.dl{ flex:1 1 auto; background:linear-gradient(#bdf,#39a7ff); color:#023; text-decoration:none; text-align:center; }
.btn.owned{ flex:0 0 auto; background:linear-gradient(#cfe,#9effc4); color:#063; cursor:default; box-shadow:0 3px 0 #00000033; }
/* split download: two INDEPENDENT buttons (left .mid, right .mp3) joined into one pill,
   so pressing one half depresses ONLY that half (each .dlh is its own .btn). */
.dlsplit{ flex:1 1 auto; display:flex; min-width:0; }
.dlsplit .dlh{ flex:1 1 0; min-width:0; font-size:11px; padding:7px 4px; white-space:nowrap; }
.dlsplit .dlh:hover{ filter:brightness(1.08); }
.dlsplit .dlh:first-child{ border-top-right-radius:0; border-bottom-right-radius:0; }
.dlsplit .dlh:last-child{ border-top-left-radius:0; border-bottom-left-radius:0; border-left:0; }
/* single download button (non-MIDI sample tracks: .wav / .mp3 only) — fills the slot */
.dlsingle{ flex:1 1 auto; display:flex; min-width:0; }
.dlsingle .dlfull{ flex:1 1 0; min-width:0; font-size:11px; padding:7px 4px; white-space:nowrap; }
.dlsingle .dlfull:hover{ filter:brightness(1.08); }

/* price sticker */
.price-tag{
  position:absolute; top:-8px; right:-8px; z-index:3;
  background:radial-gradient(circle at 40% 35%, #fff44a, #ff2e00);
  color:#3a0000; font-family:"Arial Black",Impact,sans-serif; font-size:16px;
  width:46px; height:46px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  border:2px dashed #fff; box-shadow:0 2px 5px #0007; transform:rotate(12deg);
  text-shadow:0 1px 0 #fff7;
}
/* NEW! starburst */
.new-burst{
  position:absolute; top:-10px; left:-10px; z-index:4;
  width:42px; height:42px; color:#fff; font-weight:900; font-size:11px;
  display:flex; align-items:center; justify-content:center;
  background:#ff2e9a;
  clip-path:polygon(50% 0,61% 22%,86% 12%,79% 38%,100% 50%,79% 62%,86% 88%,61% 78%,50% 100%,39% 78%,14% 88%,21% 62%,0 50%,21% 38%,14% 12%,39% 22%);
  text-shadow:0 1px 1px #0008;
}
/* spin only on hover — 9 always-on clip-path spins were cooking the CPU at idle */
.cart:hover .new-burst{ animation:spin 4s linear infinite; will-change:transform; }
@keyframes spin{ to{ transform:rotate(360deg); } }

/* power: stop everything continuous when the tab is backgrounded, and respect reduced-motion */
body.paused .marquee-track, body.paused .footmq-track, body.paused .blink{ animation-play-state:paused !important; }
@media (prefers-reduced-motion: reduce){
  .marquee-track, .footmq-track, .blink, .new-burst, .cart:hover .new-burst, .spark{ animation:none !important; }
}

/* ===== tone palettes ===== */
.tone-magenta{ --c1:#ff5ad0; --c2:#9b1bd6; }
.tone-red    { --c1:#ff6a5a; --c2:#c01020; }
.tone-aqua   { --c1:#5af0ff; --c2:#118fd6; }
.tone-orange { --c1:#ffc14a; --c2:#ff6a00; }
.tone-teal   { --c1:#4af0c8; --c2:#0a8f8f; }
.tone-green  { --c1:#9bff6a; --c2:#1ba23a; }
.tone-purple { --c1:#c89bff; --c2:#6a1bd6; }
.tone-navy   { --c1:#6a8aff; --c2:#1b2a8f; }
.tone-slate  { --c1:#aeb6d6; --c2:#4a5270; }
.tone-lime   { --c1:#ddff5a; --c2:#7ac000; }
.tone-gold   { --c1:#ffe06a; --c2:#c79100; }

/* ===== DRAWER + MODAL ===== */
#overlay{ position:fixed; inset:0; background:#000a; z-index:90; display:none; }
#overlay.on{ display:block; }
body.noscroll{ overflow:hidden; }   /* lock page scroll while any drawer/modal is open */

.drawer{
  position:fixed; top:0; right:-360px; width:340px; max-width:90vw; height:100%;
  z-index:100; background:var(--panel); border-left:3px solid #2a1d8f;
  display:flex; flex-direction:column; transition:right .25s ease;
  box-shadow:-6px 0 18px #0007;
}
.drawer.on{ right:0; }
.drawer-h{ background:linear-gradient(#5b6bff,#2a1d8f); color:#fff; font-weight:bold; padding:9px 12px; font-size:14px; }
.drawer-b{ flex:1 1 auto; overflow:auto; padding:8px; }
.drawer-f{ padding:10px; border-top:2px solid var(--panel-edge); background:#eef0ff; }
.grandtotal{ font-weight:bold; font-size:15px; margin-bottom:8px; color:#2a1d8f; }
.x{ float:right; font-family:inherit; font-weight:bold; cursor:pointer; background:#fff4; border:1px solid #fff8; color:#fff; border-radius:4px; line-height:1; padding:1px 6px; }

.ci{ display:flex; align-items:center; gap:8px; padding:7px; margin-bottom:6px; background:#fff; border:1px solid var(--panel-edge); border-radius:6px; }
.ci .chip{ width:26px; height:26px; border-radius:4px; background:linear-gradient(var(--c1),var(--c2)); border:1px solid #0004; flex:0 0 auto; }
.ci .nm{ flex:1 1 auto; font-weight:bold; }
.ci .pr{ font-family:"Courier New",monospace; }
.ci .rm{ cursor:pointer; border:none; background:#ff5a5a; color:#fff; border-radius:4px; font-family:inherit; font-weight:bold; padding:2px 7px; }
.empty{ text-align:center; color:#778; padding:30px 10px; }

.bigbtn{
  width:100%; font-family:inherit; font-weight:bold; font-size:14px; cursor:pointer;
  padding:11px; border-radius:8px; border:2px solid #fff;
  background:linear-gradient(#5bff9a,#1ba23a); color:#053; text-shadow:0 1px 0 #fff7;
  box-shadow:0 4px 0 #00000055;
}
.bigbtn:active{ transform:translateY(3px); box-shadow:0 1px 0 #0006; }
.bigbtn.gold{ background:linear-gradient(#ffe96a,#ff8a00); color:#5a2d00; }
.bigbtn.solana{ background:linear-gradient(90deg,#9945FF,#14F195); color:#fff; text-shadow:0 1px 2px #0009; }
.bigbtn.eth{ background:linear-gradient(90deg,#0052ff,#3c8bff); color:#fff; text-shadow:0 1px 2px #0009; margin-top:8px; }
#coPay .bigbtn:first-child{ margin-top:0; }
#checkoutModal .modal-b > .bigbtn + .bigbtn{ margin-top:8px; }
.bigbtn[disabled]{ filter:grayscale(.7) opacity(.6); cursor:not-allowed; }
.co-cardhint{ font-size:10px; color:#557; text-align:center; margin-top:10px; padding-top:9px; border-top:2px dashed #c6cbff; }
.co-orline{ display:flex; align-items:center; text-align:center; gap:8px; margin:14px 0 9px; color:#5a3b8f; font-weight:bold; font-size:11px; }
.co-orline:before,.co-orline:after{ content:""; flex:1; height:2px; background:repeating-linear-gradient(90deg,#c6cbff 0 5px,transparent 5px 9px); }
.co-credithint{ font-size:10px; color:#557; text-align:center; margin-top:7px; }
#coCardWrap .co-form{ margin-bottom:9px; }
.co-or{ text-align:center; font-size:11px; font-weight:bold; color:#778; margin:10px 0 2px; letter-spacing:.5px; }
.rcpt-tx{ text-align:center; font-size:11px; font-weight:bold; color:#5a2d8f; background:#f3eeff; border:1px solid #d9cdf5; border-radius:7px; padding:7px; margin-bottom:8px; }
.rcpt-tx a{ color:#7a1bd6; }

.modal{
  position:fixed; top:50%; left:50%; transform:translate(-50%,-50%) scale(.9);
  width:420px; max-width:94vw; max-height:90vh; overflow:auto; z-index:110;
  background:var(--panel); border:3px solid #2a1d8f; border-radius:10px;
  display:none; box-shadow:0 10px 40px #000a;
}
.modal.on{ display:block; animation:pop .2s ease forwards; }
@keyframes pop{ to{ transform:translate(-50%,-50%) scale(1); } }
.modal-h{ background:linear-gradient(#5b6bff,#2a1d8f); color:#fff; font-weight:bold; padding:10px 12px; font-size:15px; position:sticky; top:0; z-index:6; }
.modal-h.win{ background:linear-gradient(#39d27a,#0a8f3a); }
.modal-b{ padding:12px; }
.co-summary{ background:#fff; border:1px solid var(--panel-edge); border-radius:6px; padding:8px; margin-bottom:10px; max-height:160px; overflow:auto; }
.co-form label{ display:block; font-weight:bold; font-size:11px; margin-bottom:7px; color:#334; }
.co-form input{ display:block; width:100%; font-family:"Courier New",monospace; font-size:12px; padding:6px; margin-top:2px; border:2px inset #c6cbff; border-radius:4px; }
.co-sec{ font-size:10px; color:#0a7; margin:6px 0 12px; }
.cifree{ color:#0a7a3a; font-weight:bold; }
.co-credits{ margin-top:8px; padding-top:8px; border-top:2px dashed #c6cbff; }
.co-cline{ font-size:11px; font-weight:bold; color:#5a3b8f; text-align:center; }
.receipt-top{ text-align:center; font-weight:bold; font-size:16px; color:#0a7a3a; margin-bottom:10px; }
.receipt-items{ display:flex; flex-direction:column; gap:6px; margin-bottom:10px; }
.rcpt-row{ display:flex; align-items:center; gap:8px; padding:6px 8px; border-radius:7px; background:#eef3ff; border:1px solid #cdd9f5; }
.rcpt-nm{ flex:1 1 auto; min-width:0; font-weight:bold; color:#123; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.rcpt-dl{ flex:0 0 auto; width:154px; }
.receipt-note{ text-align:center; color:#a40; font-weight:bold; font-size:11px; margin:8px 0; }

/* spinner */
.spin{ display:inline-block; width:14px; height:14px; border:3px solid #fff6; border-top-color:#fff; border-radius:50%; animation:sp .7s linear infinite; vertical-align:-2px; }
@keyframes sp{ to{ transform:rotate(360deg); } }

/* ===== FOOTER ===== */
#foot{ max-width:1024px; margin:18px auto 30px; padding:0 12px; text-align:center; color:#cdf; }
#foot marquee{ color:#ffe96a; font-weight:bold; }
.badges{ margin-top:8px; display:flex; gap:6px; justify-content:center; flex-wrap:wrap; }
.badge{ font-size:9px; font-weight:bold; padding:3px 8px; border:1px solid #000; color:#fff; }
.badge.ie{ background:#1b6; } .badge.ns{ background:#16b; } .badge.val{ background:#a14; } .badge.dl{ background:#640; }

/* sparkles */
#sparkle-layer{ position:fixed; inset:0; pointer-events:none; z-index:200; }
.spark{ position:absolute; font-size:20px; animation:fall 1.4s ease-in forwards; }
@keyframes fall{ 0%{ transform:translateY(-10px) rotate(0); opacity:1; } 100%{ transform:translateY(90vh) rotate(360deg); opacity:0; } }

@media (max-width:720px){
  #layout{ flex-direction:column; }
  .wordmark{ font-size:44px; }
  #menuBtn{ display:inline-block; }
  .tb-left{ display:none; }                 /* make room for the menu button */
  /* sidebar items aren't rendered inline; they live in a slide-in menu drawer */
  #side{
    position:fixed; top:0; left:0; bottom:0; width:84%; max-width:300px; flex:none;
    transform:translateX(-100%); transition:transform .25s ease; z-index:95;
    overflow-y:auto; padding:14px 10px 24px;
    background:linear-gradient(135deg,#2a0a52,#120a3a);
    box-shadow:4px 0 16px #000a; border-right:2px solid var(--hot);
  }
  #side.menuopen{ transform:translateX(0); }
  #side > *{ flex-shrink:0; }                /* keep panels full height so the drawer scrolls instead of squashing them */
  .chipwrap{ position:static; margin:0; padding:0; background:none; }
  .sideclose{ display:block; }
}

/* crawlable catalog fallback; app.js hides it once the grid renders */
.static-catalog{max-width:900px;margin:24px auto;padding:0 16px;color:#ddd;font:14px/1.5 system-ui}
.static-catalog li{margin:6px 0}

/* ===== THE FORGE (marketplace) ===== */
.forgepanel .panel-h{ background:linear-gradient(#ff8a00,#ff2e9a); }
.modal-h.forge{ background:linear-gradient(#ff8a00,#ff2e9a); }
.fg-lead{ font-size:10px; color:#445; line-height:1.4; margin-bottom:6px; }
.fg-prompt{ width:100%; font-family:inherit; font-size:11px; padding:5px 6px; border:2px inset #9aa0e0; border-radius:4px; background:#fff; resize:vertical; }
.fg-go{ width:100%; margin-top:5px; font-family:inherit; font-weight:bold; font-size:12px; cursor:pointer; padding:8px; border:2px outset #fff; border-radius:6px;
  background:linear-gradient(#ff8a00,#ff2e9a); color:#fff; text-shadow:0 1px 0 #0006; box-shadow:0 3px 0 #00000055; }
.fg-go:active{ transform:translateY(2px); box-shadow:0 0 0 #0000; }
.fg-go:disabled{ filter:grayscale(.6) opacity(.7); cursor:not-allowed; }
.fg-cost{ background:#fff3; border-radius:10px; padding:1px 6px; margin-left:4px; }
.fg-h{ font-size:10px; font-weight:bold; color:#5a3b8f; letter-spacing:.4px; margin:9px 0 4px; text-align:center; }
.fg-jobs{ display:flex; flex-direction:column; gap:3px; }
.fg-job,.fg-pub{ width:100%; text-align:left; font-family:inherit; font-size:10px; cursor:pointer; padding:4px 6px; border:1px solid #9aa0e0; border-radius:4px; background:#fff; display:flex; flex-direction:column; gap:1px; }
.fg-job:hover,.fg-pub:hover{ background:#fffbe0; }
.fg-jt{ font-weight:bold; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.fg-js,.fg-ps{ color:#667; font-family:"Courier New",monospace; font-size:9px; }
.fg-job.st-ready .fg-js{ color:#0a7a2a; font-weight:bold; }
.fg-job.st-held .fg-js{ color:#a40; }
.fg-job.st-published .fg-js{ color:#1b3df0; }
.fg-label{ font-size:10px; text-align:center; color:#334; margin-bottom:4px; }
.fg-tiny{ font-size:9px; color:#778; line-height:1.3; margin-top:6px; text-align:center; }
.fg-off{ font-size:10px; color:#667; text-align:center; line-height:1.4; padding:4px 0; }
/* modal */
.fg-prompt-echo{ font-style:italic; color:#556; font-size:11px; text-align:center; margin-bottom:8px; }
.fg-wait{ text-align:center; padding:18px 6px; font-weight:bold; color:#2a1d8f; }
.fg-spin{ width:26px; height:26px; margin:0 auto 10px; border-radius:50%; border:4px solid #dfe3ff; border-top-color:#ff2e9a; animation:fgspin 1s linear infinite; }
@keyframes fgspin{ to{ transform:rotate(360deg); } }
.fg-fail{ background:#ffe3e3; border:2px solid #d33; border-radius:6px; padding:8px; font-size:11px; }
.fg-title{ font-family:"Arial Black",Impact,sans-serif; font-size:24px; color:#2a1d8f; text-align:center; line-height:1; }
.fg-meta{ text-align:center; font-family:"Courier New",monospace; font-size:10px; color:#667; margin:4px 0 8px; }
.fg-gate{ border-radius:8px; padding:7px 9px; border:2px solid #fff; background:linear-gradient(#f2f5fb,#dfe3ff); }
.fg-gate.pass{ background:linear-gradient(#e6ffe9,#b8f5c3); }
.fg-gate.held{ background:linear-gradient(#fff3e0,#ffd9a8); }
.fg-gate-h{ font-size:11px; letter-spacing:.3px; }
.fg-bar{ height:9px; background:#0002; border-radius:5px; overflow:hidden; margin:5px 0; }
.fg-bar i{ display:block; height:100%; background:linear-gradient(90deg,#ff8a00,#ff2e9a); }
.fg-crit{ margin:4px 0 0; padding-left:16px; font-size:10px; line-height:1.4; }
.fg-chips{ display:flex; flex-direction:column; gap:4px; }
.fg-chip{ display:flex; align-items:center; justify-content:space-between; gap:6px; background:#fff; border:1px solid #9aa0e0; border-radius:5px; padding:4px 6px; font-size:11px; }
.fg-chipname{ font-weight:bold; }
.fg-def,.fg-addon{ font-style:normal; font-weight:normal; font-size:9px; color:#667; }
.fg-chip .btn{ flex:0 0 auto; padding:4px 9px; font-size:10px; }
.fg-play{ background:linear-gradient(#bdf,#39a7ff); color:#023; }
.fg-render{ background:linear-gradient(#fff,#cfe3ff); color:#13339a; }
.fg-rend{ font-size:10px; color:#778; font-style:italic; }
.fg-pubform{ background:#fff8; border:2px solid #fff; border-radius:8px; padding:8px; }
.fg-pubform label{ display:block; font-size:10px; font-weight:bold; margin-bottom:5px; }
.fg-pubform input[type=text],.fg-pubform input:not([type]),.fg-pubform input[type=number]{ display:block; width:100%; font-family:inherit; font-size:12px; padding:4px 6px; border:2px inset #9aa0e0; border-radius:4px; margin-top:2px; }
.fg-chipsel{ display:flex; flex-wrap:wrap; gap:6px 12px; margin:4px 0 8px; }
.fg-ck{ font-weight:normal !important; font-size:10px; display:inline-flex !important; align-items:center; gap:4px; }
.fg-ck.off{ opacity:.55; }
.fg-publish{ width:100%; }
.fg-done{ background:linear-gradient(#e6ffe9,#b8f5c3); border:2px solid #fff; border-radius:8px; padding:8px; font-size:11px; text-align:center; margin-top:8px; }
.fg-goto{ display:block; margin:6px auto 0; background:linear-gradient(#ffe96a,#ff8a00); color:#5a2d00; }
/* card strip */
.fg-stats{ display:flex; align-items:center; gap:5px; flex-wrap:wrap; font-size:9px; color:#667; margin-top:5px; font-family:"Courier New",monospace; }
.fg-badge{ background:linear-gradient(#ff8a00,#ff2e9a); color:#fff; font-weight:bold; border-radius:8px; padding:1px 5px; font-family:Verdana,sans-serif; font-size:8px; }
.fg-stars{ display:inline-flex; gap:0; }
.fg-star{ font-style:normal; color:#bbc; cursor:pointer; font-size:12px; line-height:1; transition:transform .1s; }
.fg-star.on{ color:#f5a800; text-shadow:0 0 2px #fff; }
.fg-star:hover{ transform:scale(1.25); color:#ff2e9a; }
.label .meta .share{ white-space:nowrap; color:#1b3df0; text-decoration:none; font-family:Verdana,sans-serif; font-size:9px; font-weight:bold; }
.label .meta .share:hover{ text-decoration:underline; }
.credinvite{ width:100%; margin-top:8px; font-family:inherit; font-weight:bold; font-size:11px; cursor:pointer; padding:7px 6px; border:2px outset #fff; border-radius:6px;
  background:linear-gradient(#ff8ad0,#ff2e9a); color:#fff; text-shadow:0 1px 0 #0006; box-shadow:0 3px 0 #00000055; }
.credinvite:active{ transform:translateY(2px); box-shadow:0 0 0 #0000; }
.forgecta{ display:block; width:100%; margin:0 0 10px; text-align:left; cursor:pointer; font-family:inherit; padding:12px 16px; border:3px solid #fff; border-radius:10px;
  background:linear-gradient(120deg,#ff8a00,#ff2e9a 55%,#7b2ff7); color:#fff; box-shadow:0 5px 0 #00000055, inset 0 2px 0 #fff9; }
.forgecta:hover{ transform:translateY(-2px); box-shadow:0 7px 0 #00000055, inset 0 2px 0 #fff9; }
.forgecta:active{ transform:translateY(2px); box-shadow:0 1px 0 #0006; }
.forgecta:disabled{ filter:grayscale(.5) opacity(.75); cursor:not-allowed; transform:none; }
.forgecta .fc-big{ display:block; font-family:"Arial Black",Impact,sans-serif; font-size:20px; letter-spacing:-.3px; text-shadow:1px 2px 0 #00000066; }
.forgecta .fc-sub{ display:block; font-size:11px; margin-top:3px; opacity:.95; }

/* forge modal: identity needed before the composer runs */
.fg-need{background:#3a1030;border:2px solid #ff5fd2;color:#ffd9f4;padding:8px 10px;margin:0 0 10px;border-radius:6px;font-weight:700}