/* =========================================================
   OFFICIAL WWCFAM SCD CARD DROP CANVAS SHELL BUILD
   Real DOM + real SoundCloud iframe + live Canvas FX layer.
   This is the final override block to remove older conflicting styles.
   ========================================================= */
:root{
  --wwc-canvas-bg:#02050d;
  --wwc-blue:#20dfff;
  --wwc-blue2:#2b79ff;
  --wwc-purple:#b05cff;
  --wwc-pink:#ff4eda;
  --wwc-orange:#ff8a22;
  --wwc-white:#f6fbff;
  --wwc-muted:#b6c8e9;
  --wwc-glass:rgba(3,9,23,.68);
  --wwc-glass-2:rgba(8,13,34,.76);
  --wwc-border:rgba(102,231,255,.36);
  --wwc-radius:24px;
  --safe:clamp(10px,2.2vw,24px);
  --max:1600px;
}
html{background:#02050d;scroll-padding-top:20px;}
body{
  min-height:100vh!important;
  background:
    radial-gradient(circle at 8% 26%,rgba(32,145,255,.24),transparent 21rem),
    radial-gradient(circle at 89% 22%,rgba(176,92,255,.28),transparent 25rem),
    radial-gradient(circle at 68% 78%,rgba(255,78,218,.13),transparent 31rem),
    linear-gradient(180deg,#02050d 0%,#06111f 45%,#020612 100%)!important;
  overflow-x:hidden!important;
}
body::before{
  content:""!important;
  position:fixed!important;
  inset:0!important;
  z-index:0!important;
  pointer-events:none!important;
  opacity:.88!important;
  background:
    radial-gradient(ellipse at 0% 30%, rgba(30,102,255,.24) 0 2rem, transparent 17rem),
    radial-gradient(ellipse at 112% 24%, rgba(177,77,255,.20) 0 2rem, transparent 25rem),
    linear-gradient(90deg, transparent 0 49.8%, rgba(32,223,255,.11) 49.9% 50.1%, transparent 50.2% 100%),
    linear-gradient(0deg, transparent 0 49.8%, rgba(176,92,255,.08) 49.9% 50.1%, transparent 50.2% 100%),
    radial-gradient(circle at 50% 50%, rgba(255,255,255,.09) 0 1px, transparent 1.6px)!important;
  background-size:auto,auto,540px 540px,540px 540px,82px 82px!important;
}
body::after{
  content:"";
  position:fixed;
  left:-7vw;
  top:125px;
  width:min(36vw,520px);
  height:min(36vw,520px);
  z-index:0;
  pointer-events:none;
  border-radius:50%;
  opacity:.72;
  background:
    radial-gradient(circle at 60% 42%, rgba(98,177,255,.20), transparent 18%),
    radial-gradient(circle at 42% 38%, rgba(53,116,255,.28), transparent 34%),
    radial-gradient(circle at 62% 65%, rgba(2,8,20,.96), rgba(4,11,27,.92) 55%, transparent 56%),
    radial-gradient(circle at 50% 50%, rgba(66,145,255,.35), rgba(5,16,35,.98) 63%, transparent 64%);
  box-shadow:0 0 70px rgba(43,121,255,.38), inset -30px -20px 80px rgba(0,0,0,.85);
  filter:blur(.2px);
}
#wwcCanvasShell,#fxCanvas{
  position:fixed!important;
  inset:0!important;
  width:100%!important;
  height:100%!important;
  pointer-events:none!important;
  user-select:none!important;
}
#wwcCanvasShell{z-index:5!important;mix-blend-mode:screen;opacity:.95;}
#fxCanvas{z-index:6!important;mix-blend-mode:screen;}
body.gate-locked #wwcCanvasShell{display:none!important;}
main,.topbar,.footer,.family-gate{position:relative;}
main{z-index:2;width:min(var(--max),calc(100% - var(--safe)*2))!important;margin:0 auto!important;}
.footer{z-index:2;}

/* Universal cloned header */
.topbar,body[data-page] .topbar{
  position:relative!important;
  z-index:1000!important;
  width:min(1860px,calc(100% - 30px))!important;
  max-width:1860px!important;
  min-height:98px!important;
  margin:18px auto 18px!important;
  padding:0 18px!important;
  display:grid!important;
  grid-template-columns:74px minmax(0,1fr) auto!important;
  align-items:center!important;
  gap:16px!important;
  border:1px solid rgba(122,228,255,.42)!important;
  border-radius:20px!important;
  overflow:visible!important;
  background:linear-gradient(90deg,rgba(2,7,17,.92),rgba(4,10,26,.86) 52%,rgba(18,5,31,.92))!important;
  box-shadow:0 0 0 1px rgba(255,78,218,.16),0 0 36px rgba(32,223,255,.12),0 18px 64px rgba(0,0,0,.52),inset 0 1px 0 rgba(255,255,255,.10)!important;
  backdrop-filter:blur(20px)!important;
}
body.gate-locked .topbar{display:none!important;}
.menu-toggle,body[data-page] .menu-toggle{
  order:0!important;
  grid-column:1!important;
  justify-self:center!important;
  display:inline-flex!important;
  flex:0 0 58px!important;
  width:58px!important;
  min-width:58px!important;
  height:58px!important;
  margin:0!important;
  align-items:center!important;
  justify-content:center!important;
  flex-direction:column!important;
  gap:8px!important;
  border-radius:18px!important;
  border:1px solid rgba(255,255,255,.13)!important;
  background:linear-gradient(145deg,rgba(255,255,255,.06),rgba(255,255,255,.02))!important;
  box-shadow:inset 0 0 20px rgba(32,223,255,.04),0 0 18px rgba(32,223,255,.10)!important;
}
.menu-toggle span{width:31px!important;height:3px!important;border-radius:99px!important;background:#f4fbff!important;box-shadow:0 0 13px rgba(255,255,255,.55)!important;}
.menu-toggle[aria-expanded="true"] span:nth-child(1){transform:translateY(11px) rotate(45deg)!important;}
.menu-toggle[aria-expanded="true"] span:nth-child(2){opacity:0!important;}
.menu-toggle[aria-expanded="true"] span:nth-child(3){transform:translateY(-11px) rotate(-45deg)!important;}
.brand,body[data-page] .brand{
  grid-column:2!important;
  display:flex!important;
  align-items:center!important;
  justify-content:flex-start!important;
  min-width:0!important;
  max-width:100%!important;
  gap:18px!important;
  overflow:hidden!important;
  text-decoration:none!important;
}
.brand img{
  flex:0 0 76px!important;
  width:76px!important;
  height:76px!important;
  border-radius:999px!important;
  padding:4px!important;
  background:radial-gradient(circle,rgba(255,255,255,.13),rgba(255,255,255,.04));
  border:1px solid rgba(255,231,167,.58)!important;
  box-shadow:0 0 24px rgba(255,231,167,.22),0 0 42px rgba(32,223,255,.12)!important;
  object-fit:contain!important;
}
.brand span{min-width:0!important;display:grid!important;gap:4px!important;}
.brand strong{
  display:block!important;
  color:#f8fbff!important;
  font-size:clamp(.95rem,1.4vw,1.55rem)!important;
  font-weight:700!important;
  letter-spacing:.28em!important;
  line-height:1.05!important;
  text-transform:uppercase!important;
  white-space:nowrap!important;
  overflow:hidden!important;
  text-overflow:ellipsis!important;
  text-shadow:0 0 14px rgba(255,255,255,.28)!important;
}
.brand small{display:block!important;color:#bfd5f2!important;font-size:.74rem!important;letter-spacing:.05em!important;white-space:nowrap!important;overflow:hidden!important;text-overflow:ellipsis!important;}
.header-actions{
  grid-column:3!important;
  display:flex!important;
  align-items:center!important;
  gap:12px!important;
  padding:12px 14px!important;
  border-left:1px solid rgba(255,255,255,.08)!important;
  border-radius:18px!important;
  background:linear-gradient(90deg,rgba(255,255,255,.035),rgba(177,92,255,.075))!important;
}
.header-actions a{
  display:inline-flex!important;
  align-items:center!important;
  gap:9px!important;
  color:#f1e9ff!important;
  text-decoration:none!important;
  text-transform:uppercase!important;
  letter-spacing:.12em!important;
  font-weight:700!important;
  font-size:clamp(.8rem,1vw,1.06rem)!important;
  padding:12px 14px!important;
  border-radius:14px!important;
  border:1px solid transparent!important;
}
.header-actions a:hover{border-color:rgba(176,92,255,.42)!important;background:rgba(176,92,255,.12)!important;box-shadow:0 0 20px rgba(176,92,255,.16)!important;}
.header-actions .ico{font-size:1.38em;color:#d28bff;text-shadow:0 0 16px rgba(211,139,255,.72);}
.nav,body[data-page] .nav{
  position:absolute!important;
  top:calc(100% + 12px)!important;
  left:18px!important;
  right:auto!important;
  width:min(340px,calc(100vw - 36px))!important;
  display:none!important;
  flex-direction:column!important;
  align-items:stretch!important;
  gap:9px!important;
  padding:12px!important;
  border-radius:18px!important;
  border:1px solid rgba(122,228,255,.42)!important;
  background:linear-gradient(180deg,rgba(2,7,17,.985),rgba(15,7,35,.985))!important;
  box-shadow:0 30px 86px rgba(0,0,0,.62),0 0 36px rgba(32,223,255,.14)!important;
  z-index:5000!important;
}
.nav.open{display:flex!important;}
.nav a{display:flex!important;align-items:center!important;justify-content:space-between!important;min-height:44px!important;border-radius:13px!important;border:1px solid rgba(255,255,255,.10)!important;background:rgba(255,255,255,.045)!important;color:#eef9ff!important;padding:10px 12px!important;text-decoration:none!important;text-transform:uppercase!important;letter-spacing:.08em!important;font-weight:900!important;}
.nav a:hover,.nav a:focus-visible{border-color:rgba(32,223,255,.62)!important;background:rgba(32,223,255,.11)!important;outline:none!important;}

/* Hero clone */
.panel{z-index:2;border-radius:var(--wwc-radius)!important;border:1px solid rgba(111,226,255,.22)!important;background:linear-gradient(145deg,rgba(4,13,31,.62),rgba(4,6,21,.50),rgba(17,6,38,.42))!important;box-shadow:inset 0 1px 0 rgba(255,255,255,.08),0 22px 90px rgba(0,0,0,.44)!important;backdrop-filter:blur(8px)!important;}
.hero{
  margin-top:4px!important;
  min-height:360px!important;
  display:grid!important;
  grid-template-columns:minmax(120px,190px) minmax(0,1fr)!important;
  gap:20px!important;
  align-items:center!important;
  text-align:center!important;
  padding-top:28px!important;
  padding-bottom:28px!important;
  background:transparent!important;
}
.logo-tile{width:min(190px,100%)!important;min-height:170px!important;margin:auto!important;border-radius:22px!important;background:radial-gradient(circle at 50% 34%,rgba(32,223,255,.18),rgba(176,92,255,.10),rgba(255,255,255,.025))!important;border-color:rgba(111,226,255,.34)!important;}
.logo-tile img{max-height:150px!important;max-width:92%!important;filter:drop-shadow(0 0 22px rgba(32,223,255,.28))!important;}
.hero-copy{text-align:center!important;min-width:0!important;}
.hero .eyebrow{color:#41fff4!important;font-size:.77rem!important;letter-spacing:.24em!important;}
.hero h1{
  margin:.02em 0 .08em!important;
  color:transparent!important;
  text-transform:uppercase!important;
  font-family:Impact, Haettenschweiler, 'Arial Black', system-ui, sans-serif!important;
  font-size:clamp(4.3rem,10.4vw,10.4rem)!important;
  line-height:.78!important;
  letter-spacing:.035em!important;
  background:linear-gradient(180deg,#f4fbff 0%,#5af4ff 28%,#126cff 54%,#d657ff 75%,#ff67dd 100%)!important;
  -webkit-background-clip:text!important;
  background-clip:text!important;
  -webkit-text-stroke:1px rgba(255,255,255,.18);
  text-shadow:0 0 20px rgba(45,210,255,.60),0 0 52px rgba(186,77,255,.36),0 6px 0 rgba(0,0,0,.52)!important;
}
.hero .subline{margin:0 auto 14px!important;color:#f6fbff!important;font-size:clamp(1rem,1.6vw,1.18rem)!important;max-width:820px!important;text-shadow:0 0 16px rgba(0,0,0,.75)!important;}
.hero .subline strong{display:block!important;color:#ffffff!important;letter-spacing:.38em!important;text-transform:uppercase!important;font-size:clamp(.88rem,1.7vw,1.35rem)!important;margin-bottom:7px!important;}
.drop-input-wrap{width:min(960px,100%)!important;margin:0 auto!important;display:grid!important;grid-template-columns:64px minmax(0,1fr) minmax(148px,188px)!important;gap:0!important;align-items:stretch!important;border:1px solid rgba(122,228,255,.32)!important;border-radius:16px!important;background:rgba(1,8,18,.72)!important;box-shadow:inset 0 0 30px rgba(32,223,255,.065),0 0 30px rgba(32,223,255,.10)!important;overflow:hidden!important;}
.drop-input-wrap::after{content:'🔗';display:grid;place-items:center;font-size:1.75rem;color:#ecf7ff;text-shadow:0 0 14px rgba(255,255,255,.42);grid-column:1;grid-row:1;}
#linkBox{grid-column:2!important;min-height:64px!important;height:64px!important;resize:none!important;border:0!important;border-left:1px solid rgba(255,255,255,.08)!important;border-radius:0!important;background:transparent!important;box-shadow:none!important;padding:18px 18px!important;color:#f9fbff!important;}
.drop-card-btn{grid-column:3!important;width:100%!important;border-radius:0!important;border:0!important;border-left:1px solid rgba(176,92,255,.42)!important;background:linear-gradient(135deg,rgba(53,103,255,.48),rgba(176,92,255,.38),rgba(255,78,218,.28))!important;color:white!important;text-transform:uppercase!important;letter-spacing:.06em!important;box-shadow:inset 0 0 22px rgba(255,255,255,.10),0 0 24px rgba(176,92,255,.24)!important;}
.status-line{margin:9px auto 0!important;text-align:center!important;color:#eaf2ff!important;font-size:.98rem!important;}
.status-line strong,.status-line .hl{color:#ff9f28!important;}

/* Stats and filters */
.players-panel{margin-top:22px!important;}
.players-head{display:grid!important;grid-template-columns:minmax(0,1fr) minmax(280px,520px)!important;gap:16px!important;align-items:end!important;}
.players-head h2{font-size:clamp(1.8rem,4vw,3.1rem)!important;line-height:.95!important;margin:0!important;}
.filters{display:grid!important;grid-template-columns:minmax(0,1fr) minmax(140px,190px)!important;gap:10px!important;}
.filters input,.filters select{height:52px!important;border-radius:14px!important;background:rgba(5,14,31,.78)!important;border-color:rgba(122,228,255,.28)!important;}
.stats{display:grid!important;grid-template-columns:repeat(4,minmax(0,1fr))!important;gap:16px!important;margin:18px 0 16px!important;}
.stats span{min-height:92px!important;display:grid!important;grid-template-rows:auto auto!important;place-content:center!important;gap:6px!important;text-align:center!important;border-radius:16px!important;border:1px solid rgba(122,228,255,.20)!important;background:linear-gradient(145deg,rgba(5,19,41,.72),rgba(9,10,34,.60))!important;color:#f6fbff!important;font-size:1.22rem!important;font-weight:900!important;text-transform:capitalize!important;box-shadow:inset 0 0 26px rgba(32,223,255,.05)!important;}
.stats span::before{display:block!important;margin:0 auto!important;width:54px!important;height:54px!important;line-height:52px!important;border-radius:999px!important;border:2px solid currentColor!important;font-size:1.45rem!important;text-shadow:0 0 14px currentColor!important;box-shadow:0 0 22px currentColor!important;}
.stats span:nth-child(1)::before{content:'👥'!important;color:#20dfff!important;}
.stats span:nth-child(2)::before{content:'👁'!important;color:#b05cff!important;}
.stats span:nth-child(3)::before{content:'♫'!important;color:#20dfff!important;}
.stats span:nth-child(4)::before{content:'▭'!important;color:#ff4eda!important;}
.filters-row,.filter-tabs{display:flex!important;flex-wrap:wrap!important;align-items:center!important;justify-content:center!important;gap:18px!important;margin:14px 0!important;}

/* Card shell to match mockup while preserving real SoundCloud iframe */
.cards{display:grid!important;grid-template-columns:repeat(auto-fit,minmax(min(100%,440px),1fr))!important;gap:24px!important;align-items:start!important;padding:12px 0!important;overflow:visible!important;}
.player-card{
  position:relative!important;
  isolation:isolate!important;
  overflow:visible!important;
  min-width:0!important;
  padding:18px!important;
  border-radius:24px!important;
  border:1px solid rgba(32,223,255,.58)!important;
  background:linear-gradient(145deg,rgba(2,11,25,.86),rgba(4,8,23,.84) 48%,rgba(11,7,28,.78))!important;
  box-shadow:0 0 0 1px rgba(255,255,255,.035),0 0 35px rgba(32,223,255,.16),0 18px 70px rgba(0,0,0,.50),inset 0 0 26px rgba(32,223,255,.06)!important;
  transform-style:preserve-3d;
}
.player-card[data-type="playlist"]{border-color:rgba(255,78,218,.54)!important;box-shadow:0 0 0 1px rgba(255,255,255,.035),0 0 35px rgba(255,78,218,.15),0 18px 70px rgba(0,0,0,.50),inset 0 0 26px rgba(176,92,255,.06)!important;}
.player-card::before{content:""!important;position:absolute!important;inset:-4px!important;border-radius:27px!important;pointer-events:none!important;z-index:-1!important;background:linear-gradient(90deg,transparent,rgba(32,223,255,.96),transparent) 0 0/68% 3px no-repeat,linear-gradient(180deg,transparent,rgba(32,223,255,.88),transparent) 0 0/3px 78% no-repeat,linear-gradient(270deg,transparent,rgba(255,78,218,.92),transparent) 100% 100%/70% 3px no-repeat,linear-gradient(0deg,transparent,rgba(176,92,255,.88),transparent) 100% 100%/3px 78% no-repeat!important;filter:drop-shadow(0 0 10px rgba(32,223,255,.88)) drop-shadow(0 0 24px rgba(32,223,255,.32))!important;animation:canvasBorderBreath 1.7s ease-in-out infinite alternate!important;}
.player-card[data-type="playlist"]::before{filter:drop-shadow(0 0 10px rgba(255,78,218,.88)) drop-shadow(0 0 24px rgba(176,92,255,.34))!important;}
@keyframes canvasBorderBreath{from{opacity:.68}to{opacity:1}}
.card-top{display:grid!important;grid-template-columns:minmax(0,1fr) auto!important;gap:10px!important;align-items:start!important;}
.card-title-wrap{min-width:0!important;}
.badge{display:inline-flex!important;align-items:center!important;gap:6px!important;margin-bottom:8px!important;border-radius:999px!important;padding:5px 11px!important;border:1px solid rgba(32,223,255,.62)!important;background:linear-gradient(135deg,rgba(32,223,255,.24),rgba(43,121,255,.10))!important;color:#caffff!important;text-transform:uppercase!important;font-size:.78rem!important;letter-spacing:.07em!important;box-shadow:0 0 18px rgba(32,223,255,.15)!important;}
.player-card[data-type="playlist"] .badge{border-color:rgba(176,92,255,.68)!important;color:#ffcbff!important;background:linear-gradient(135deg,rgba(176,92,255,.30),rgba(255,78,218,.11))!important;}
.badge::before{content:'♫';}
.player-card[data-type="playlist"] .badge::before{content:'▭';}
.player-card h3{font-size:clamp(1.08rem,1.55vw,1.45rem)!important;line-height:1.08!important;margin:0 0 6px!important;overflow-wrap:anywhere!important;color:#f8fbff!important;text-shadow:0 0 12px rgba(255,255,255,.18)!important;}
.url-line,.owner-line{font-size:.76rem!important;line-height:1.3!important;color:#a8bee1!important;margin:2px 0!important;overflow-wrap:anywhere!important;}
.owner-line{color:#f0f5ff!important;}
.icon-btn.remove-btn{width:36px!important;height:36px!important;border-radius:13px!important;background:rgba(255,255,255,.08)!important;border:1px solid rgba(255,255,255,.16)!important;color:#f4fbff!important;}
.soundcloud-frame{position:relative!important;overflow:hidden!important;border-radius:16px!important;margin-top:12px!important;border:1px solid rgba(255,255,255,.15)!important;background:#05070d!important;box-shadow:inset 0 0 22px rgba(32,223,255,.055),0 0 24px rgba(0,0,0,.36)!important;}
.soundcloud-frame iframe{display:block!important;width:100%!important;max-width:100%!important;height:clamp(220px,24vw,340px)!important;border:0!important;border-radius:inherit!important;background:#05070d!important;}
.player-card[data-type="song"] .soundcloud-frame iframe{height:clamp(150px,13vw,190px)!important;}
.actions{display:grid!important;grid-template-columns:minmax(74px,.65fr) repeat(4,minmax(0,1fr))!important;gap:9px!important;margin-top:12px!important;}
.btn,.actions .btn{min-width:0!important;width:100%!important;min-height:44px!important;border-radius:13px!important;border:1px solid rgba(255,255,255,.16)!important;background:linear-gradient(180deg,rgba(255,255,255,.09),rgba(255,255,255,.035))!important;color:#f7fbff!important;font-weight:900!important;text-decoration:none!important;text-align:center!important;display:inline-flex!important;align-items:center!important;justify-content:center!important;gap:7px!important;white-space:normal!important;line-height:1.1!important;overflow:hidden!important;}
.btn:hover,.btn:focus-visible{border-color:rgba(32,223,255,.58)!important;box-shadow:0 0 18px rgba(32,223,255,.18),inset 0 0 18px rgba(32,223,255,.06)!important;outline:none!important;}
.fire-btn{position:relative!important;color:#ffd9a8!important;border-color:rgba(255,139,34,.58)!important;background:radial-gradient(circle at 50% 32%,rgba(255,139,34,.26),rgba(255,255,255,.035))!important;box-shadow:0 0 22px rgba(255,139,34,.22),inset 0 0 18px rgba(255,139,34,.08)!important;}
.fire-btn::after{content:""!important;position:absolute!important;inset:-5px!important;border-radius:inherit!important;border:1px solid rgba(255,184,74,.55)!important;filter:drop-shadow(0 0 10px rgba(255,98,29,.88))!important;opacity:.6!important;animation:fireButtonPulse 1.15s ease-in-out infinite alternate!important;}
.repost-btn.active{border-color:rgba(32,223,255,.58)!important;background:linear-gradient(135deg,rgba(32,223,255,.16),rgba(176,92,255,.10))!important;}
.open-btn{color:#ffd4ad!important;border-color:rgba(255,139,34,.30)!important;}
.comments{margin-top:12px!important;padding-top:12px!important;border-top:1px solid rgba(122,228,255,.20)!important;}
.comment-form{display:grid!important;grid-template-columns:minmax(0,1fr) auto!important;gap:8px!important;}
.comment-form input{height:48px!important;border-radius:13px!important;background:rgba(5,14,31,.78)!important;}
.comment{border-radius:13px!important;background:rgba(2,8,20,.62)!important;border:1px solid rgba(122,228,255,.12)!important;}
.toast-wrap{z-index:6000!important;right:16px!important;bottom:16px!important;top:auto!important;width:min(390px,calc(100vw - 32px))!important;}
.toast{border-color:rgba(255,210,100,.46)!important;background:rgba(2,7,17,.96)!important;box-shadow:0 18px 42px rgba(0,0,0,.48),0 0 24px rgba(255,210,100,.16)!important;}

/* Login and gate stay clean */
.family-card,.login-panel{z-index:1001!important;}
.login-panel{width:min(850px,100%)!important;}
.login-actions{grid-template-columns:repeat(4,minmax(0,1fr))!important;}

/* Responsive - never cut off or overlap */
@media (max-width:1100px){
  .topbar{grid-template-columns:62px minmax(0,1fr) auto!important;min-height:82px!important;}
  .brand img{flex-basis:62px!important;width:62px!important;height:62px!important;}
  .brand strong{letter-spacing:.18em!important;font-size:clamp(.82rem,1.7vw,1.1rem)!important;}
  .header-actions{gap:6px!important;padding:8px!important;}
  .header-actions a{font-size:.78rem!important;padding:9px 10px!important;}
  .stats{grid-template-columns:repeat(2,minmax(0,1fr))!important;}
  .actions{grid-template-columns:repeat(2,minmax(0,1fr))!important;}
  .fire-btn{grid-column:span 2!important;}
}
@media (max-width:760px){
  body::after{display:none;}
  .topbar{width:calc(100% - 16px)!important;min-height:70px!important;margin:8px auto 12px!important;padding:7px 8px!important;grid-template-columns:48px minmax(0,1fr) auto!important;gap:8px!important;border-radius:16px!important;}
  .menu-toggle{width:44px!important;min-width:44px!important;height:44px!important;flex-basis:44px!important;border-radius:13px!important;gap:6px!important;}
  .menu-toggle span{width:24px!important;height:2px!important;}
  .brand{gap:8px!important;}
  .brand img{flex-basis:44px!important;width:44px!important;height:44px!important;border-radius:999px!important;}
  .brand strong{font-size:clamp(.68rem,3vw,.82rem)!important;letter-spacing:.055em!important;white-space:nowrap!important;}
  .brand small{display:none!important;}
  .header-actions{display:none!important;}
  .nav{left:6px!important;top:calc(100% + 8px)!important;width:min(310px,calc(100vw - 20px))!important;}
  main{width:calc(100% - 16px)!important;}
  .panel{border-radius:18px!important;padding:12px!important;margin:14px 0!important;}
  .hero{grid-template-columns:1fr!important;min-height:auto!important;padding:18px 12px!important;text-align:center!important;}
  .logo-tile{min-height:112px!important;width:min(160px,72vw)!important;}
  .logo-tile img{max-height:106px!important;}
  .hero h1{font-size:clamp(3rem,18vw,5rem)!important;letter-spacing:.02em!important;}
  .hero .subline strong{letter-spacing:.16em!important;}
  .drop-input-wrap{grid-template-columns:48px minmax(0,1fr)!important;}
  .drop-card-btn{grid-column:1 / -1!important;border-left:0!important;border-top:1px solid rgba(176,92,255,.42)!important;min-height:48px!important;}
  #linkBox{height:58px!important;min-height:58px!important;padding:14px 12px!important;}
  .players-head{grid-template-columns:1fr!important;}
  .filters{grid-template-columns:1fr!important;}
  .stats{grid-template-columns:1fr!important;gap:8px!important;}
  .stats span{min-height:68px!important;font-size:1rem!important;grid-template-columns:auto 1fr!important;grid-template-rows:1fr!important;justify-content:start!important;text-align:left!important;padding:10px 12px!important;}
  .stats span::before{width:42px!important;height:42px!important;line-height:40px!important;font-size:1.1rem!important;margin:0!important;}
  .cards{grid-template-columns:1fr!important;gap:20px!important;padding:8px 0!important;}
  .player-card{padding:12px!important;border-radius:18px!important;overflow:visible!important;}
  .player-card::before{inset:-3px!important;border-radius:21px!important;}
  .soundcloud-frame iframe,.player-card[data-type="song"] .soundcloud-frame iframe{height:176px!important;}
  .actions{grid-template-columns:1fr!important;}
  .fire-btn{grid-column:auto!important;}
  .comment-form{grid-template-columns:1fr!important;}
  .login-actions{grid-template-columns:1fr!important;}
}
@media (max-width:390px){.brand strong{font-size:.64rem!important}.topbar{grid-template-columns:44px minmax(0,1fr)!important}.brand img{display:none!important}.menu-toggle{grid-column:1!important}.brand{grid-column:2!important}.nav{left:0!important;width:calc(100vw - 16px)!important}.hero h1{font-size:2.65rem!important}.stats span{font-size:.92rem!important}}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;scroll-behavior:auto!important}#wwcCanvasShell{display:none!important}}

/* =========================================================
   VISUAL POLISH PASS v2: closer to the reference image
   - smaller header
   - real world/planet background layer
   - brighter background electricity
   - real fire reaction tile
   - animated icons and buttons
   ========================================================= */
:root{
  --cd-electric-blue:#18e5ff;
  --cd-hot-blue:#2b78ff;
  --cd-purple:#b14cff;
  --cd-pink:#ff36d5;
  --cd-fire:#ff7b18;
  --cd-fire2:#ffd45b;
}
body{
  background:
    radial-gradient(circle at 9% 30%, rgba(35,128,255,.30), transparent 23rem),
    radial-gradient(circle at 91% 24%, rgba(176,72,255,.33), transparent 29rem),
    radial-gradient(circle at 75% 72%, rgba(255,54,213,.16), transparent 34rem),
    linear-gradient(180deg,#01030a 0%,#061426 45%,#02050e 100%)!important;
}
body::after{
  left:-26px!important;
  top:105px!important;
  width:min(37vw,560px)!important;
  height:min(37vw,560px)!important;
  opacity:.94!important;
  background:
    linear-gradient(90deg,rgba(2,5,13,.10),rgba(2,5,13,.42)),
    url('../img/carddrop-world-planet-left.png') left center/contain no-repeat,
    radial-gradient(circle at 43% 48%, rgba(82,170,255,.55), rgba(14,31,70,.98) 48%, transparent 54%)!important;
  box-shadow:0 0 90px rgba(34,126,255,.58), inset -36px -26px 100px rgba(0,0,0,.88)!important;
  filter:saturate(1.25) contrast(1.08)!important;
}
body::before{
  opacity:1!important;
  background:
    radial-gradient(ellipse at 0% 27%, rgba(41,125,255,.28) 0 2rem, transparent 19rem),
    radial-gradient(ellipse at 110% 25%, rgba(196,60,255,.25) 0 2rem, transparent 27rem),
    linear-gradient(90deg, transparent 0 49.8%, rgba(32,223,255,.12) 49.9% 50.1%, transparent 50.2% 100%),
    linear-gradient(0deg, transparent 0 49.8%, rgba(176,92,255,.10) 49.9% 50.1%, transparent 50.2% 100%),
    radial-gradient(circle at 50% 50%, rgba(255,255,255,.12) 0 1px, transparent 1.7px)!important;
  background-size:auto,auto,520px 520px,520px 520px,78px 78px!important;
}

.topbar,body[data-page] .topbar{
  min-height:76px!important;
  margin:12px auto 12px!important;
  padding:0 14px!important;
  grid-template-columns:56px minmax(0,1fr) auto!important;
  gap:12px!important;
  border-radius:17px!important;
  box-shadow:0 0 0 1px rgba(255,78,218,.18),0 0 32px rgba(32,223,255,.16),0 14px 42px rgba(0,0,0,.55),inset 0 1px 0 rgba(255,255,255,.13)!important;
}
.menu-toggle,body[data-page] .menu-toggle{
  width:48px!important;min-width:48px!important;height:48px!important;flex-basis:48px!important;border-radius:15px!important;gap:6px!important;
  transition:transform .22s ease, box-shadow .22s ease, border-color .22s ease!important;
}
.menu-toggle:hover{transform:translateY(-1px)!important;box-shadow:0 0 26px rgba(32,223,255,.22),inset 0 0 22px rgba(32,223,255,.08)!important;border-color:rgba(32,223,255,.45)!important;}
.menu-toggle span{width:27px!important;height:2.5px!important;transition:transform .22s ease, opacity .22s ease!important;}
.menu-toggle[aria-expanded="true"] span:nth-child(1){transform:translateY(8.5px) rotate(45deg)!important;}
.menu-toggle[aria-expanded="true"] span:nth-child(3){transform:translateY(-8.5px) rotate(-45deg)!important;}
.brand img{flex:0 0 58px!important;width:58px!important;height:58px!important;}
.brand{gap:13px!important;}
.brand strong{font-size:clamp(.82rem,1.22vw,1.25rem)!important;letter-spacing:.22em!important;}
.brand small{font-size:.69rem!important;}
.header-actions{padding:8px 10px!important;border-radius:16px!important;}
.header-actions a{font-size:clamp(.72rem,.9vw,.95rem)!important;padding:10px 12px!important;}
.header-actions .ico{animation:iconFloatGlow 2.6s ease-in-out infinite!important;}

.hero{min-height:330px!important;padding-top:22px!important;padding-bottom:22px!important;}
.hero h1{
  filter:drop-shadow(0 0 18px rgba(24,229,255,.65)) drop-shadow(0 0 38px rgba(177,76,255,.50))!important;
}
.hero .subline strong{color:#fff!important;text-shadow:0 0 16px rgba(255,255,255,.42),0 0 24px rgba(24,229,255,.32)!important;}

/* Brighter animated panels/cards */
.panel,.player-card,.stats span,.drop-input-wrap{
  box-shadow:inset 0 1px 0 rgba(255,255,255,.10),0 0 0 1px rgba(24,229,255,.10),0 22px 84px rgba(0,0,0,.48)!important;
}
.player-card{
  background:
    radial-gradient(circle at 10% 0%,rgba(24,229,255,.16),transparent 34%),
    radial-gradient(circle at 105% 10%,rgba(177,76,255,.15),transparent 40%),
    linear-gradient(180deg,rgba(4,13,30,.92),rgba(2,7,17,.82))!important;
  filter:saturate(1.08)!important;
  transition:transform .22s ease, filter .22s ease, box-shadow .22s ease!important;
}
.player-card:hover{filter:saturate(1.24) brightness(1.08)!important;}
.player-card::before{
  opacity:.98!important;
  filter:drop-shadow(0 0 12px rgba(24,229,255,1)) drop-shadow(0 0 30px rgba(24,229,255,.45)) drop-shadow(0 0 54px rgba(177,76,255,.24))!important;
  animation:canvasBorderBreath .92s ease-in-out infinite alternate, electricBorderShift 3.8s linear infinite!important;
}
.player-card[data-type="playlist"]::before{
  filter:drop-shadow(0 0 12px rgba(255,54,213,1)) drop-shadow(0 0 32px rgba(177,76,255,.55)) drop-shadow(0 0 54px rgba(24,229,255,.18))!important;
}
@keyframes electricBorderShift{0%{background-position:0 0,0 0,100% 100%,100% 100%}50%{background-position:35% 0,0 45%,65% 100%,100% 55%}100%{background-position:0 0,0 0,100% 100%,100% 100%}}

/* Real fire reaction tile like the reference */
.actions{grid-template-columns:90px repeat(4,minmax(0,1fr))!important;align-items:stretch!important;}
.fire-btn{
  min-height:74px!important;
  height:100%!important;
  padding:7px!important;
  flex-direction:column!important;
  gap:3px!important;
  border-radius:15px!important;
  color:#fff7d1!important;
  border:1px solid rgba(255,191,62,.78)!important;
  background:
    radial-gradient(circle at 50% 25%,rgba(255,244,146,.56),transparent 18%),
    radial-gradient(circle at 48% 44%,rgba(255,88,10,.72),rgba(155,24,0,.36) 41%,rgba(6,8,16,.82) 72%),
    linear-gradient(180deg,rgba(61,13,0,.86),rgba(8,6,14,.92))!important;
  box-shadow:0 0 18px rgba(255,116,18,.58),0 0 42px rgba(255,42,8,.32),inset 0 0 30px rgba(255,127,24,.16)!important;
  overflow:visible!important;
  isolation:isolate!important;
  animation:fireTileBreath 1.15s ease-in-out infinite alternate!important;
}
.fire-btn span{font-size:2.15rem!important;line-height:.9!important;display:block!important;filter:drop-shadow(0 0 8px rgba(255,206,61,.95)) drop-shadow(0 0 18px rgba(255,72,6,.95))!important;animation:flameDance .72s ease-in-out infinite alternate!important;transform-origin:50% 90%!important;}
.fire-btn b{font-size:.98rem!important;line-height:1!important;color:#fff4c4!important;text-shadow:0 0 10px rgba(255,153,28,.90)!important;}
.fire-btn::before{
  content:""!important;
  position:absolute!important;
  inset:5px 11px 30px!important;
  z-index:-1!important;
  border-radius:50% 50% 42% 42%!important;
  background:
    radial-gradient(ellipse at 44% 80%,rgba(255,244,84,.88),transparent 28%),
    radial-gradient(ellipse at 51% 58%,rgba(255,119,0,.95),transparent 44%),
    radial-gradient(ellipse at 52% 70%,rgba(255,20,0,.65),transparent 61%)!important;
  filter:blur(1px) drop-shadow(0 0 13px rgba(255,98,0,.96))!important;
  clip-path:polygon(50% 0%,62% 26%,80% 15%,69% 44%,91% 39%,70% 61%,80% 88%,51% 71%,28% 92%,34% 62%,10% 50%,35% 43%,28% 18%,45% 31%)!important;
  animation:flameShape 1.05s ease-in-out infinite alternate!important;
}
.fire-btn::after{
  inset:-8px!important;
  border-radius:18px!important;
  border:1px solid rgba(255,211,86,.92)!important;
  box-shadow:0 0 12px rgba(255,230,105,.75),0 0 28px rgba(255,90,0,.72),0 0 54px rgba(255,32,0,.32),inset 0 0 18px rgba(255,191,62,.34)!important;
  opacity:.95!important;
  animation:fireFrameFlash .82s ease-in-out infinite alternate!important;
}
.fire-btn.active{border-color:rgba(255,235,111,1)!important;box-shadow:0 0 22px rgba(255,177,43,.76),0 0 70px rgba(255,58,0,.38),inset 0 0 32px rgba(255,186,50,.22)!important;}
@keyframes flameDance{0%{transform:translateY(1px) scale(.96) rotate(-3deg)}100%{transform:translateY(-2px) scale(1.08) rotate(3deg)}}
@keyframes flameShape{0%{transform:scale(.88,.96) skewX(-4deg);opacity:.78}100%{transform:scale(1.08,1.10) skewX(5deg);opacity:1}}
@keyframes fireFrameFlash{from{filter:drop-shadow(0 0 6px rgba(255,124,20,.86));opacity:.65}to{filter:drop-shadow(0 0 19px rgba(255,224,91,1));opacity:1}}
@keyframes fireTileBreath{from{transform:translateY(0) scale(1)}to{transform:translateY(-1px) scale(1.015)}}

/* Animated matching icons on every action */
.comment-toggle::before{content:'◌';font-size:1.25em;color:#f7fbff;text-shadow:0 0 10px rgba(255,255,255,.58);animation:iconFloatGlow 2.8s ease-in-out infinite!important;}
.repost-btn::before{content:'↻';font-size:1.22em;color:#cda4ff;text-shadow:0 0 14px rgba(177,76,255,.82);animation:repostSpinPulse 2.9s ease-in-out infinite!important;}
.share-btn::before{content:'➤';font-size:1.15em;color:#dff5ff;text-shadow:0 0 12px rgba(24,229,255,.65);animation:iconFloatGlow 2.6s ease-in-out infinite!important;}
.open-btn::before{content:'☁';font-size:1.18em;color:#ff8a22;text-shadow:0 0 12px rgba(255,116,18,.80);animation:cloudPulse 2.4s ease-in-out infinite!important;}
.drop-card-btn::after{content:'⚡';font-size:1.25em;color:#f0d6ff;text-shadow:0 0 18px rgba(255,255,255,.85),0 0 30px rgba(177,76,255,.95);animation:boltStrike 1.1s ease-in-out infinite!important;}
.stats span::before,.badge::before{animation:iconFloatGlow 2.3s ease-in-out infinite!important;}
@keyframes iconFloatGlow{0%,100%{transform:translateY(0);filter:brightness(1)}50%{transform:translateY(-2px);filter:brightness(1.55)}}
@keyframes repostSpinPulse{0%,100%{transform:rotate(0deg) scale(1)}45%{transform:rotate(20deg) scale(1.08)}70%{transform:rotate(-14deg) scale(1.04)}}
@keyframes cloudPulse{0%,100%{transform:translateX(0);filter:brightness(1)}50%{transform:translateX(2px);filter:brightness(1.55)}}
@keyframes boltStrike{0%,100%{transform:scale(1);opacity:.82}45%{transform:scale(1.28) rotate(7deg);opacity:1}60%{transform:scale(.95) rotate(-4deg)}}

/* More readable font colors and brighter text */
h1,h2,h3,.brand strong,.players-head h2{color:#f8fbff!important;text-shadow:0 0 14px rgba(255,255,255,.20),0 0 26px rgba(24,229,255,.14)!important;}
.url-line{color:#b9cff1!important;}
.owner-line{color:#ffffff!important;text-shadow:0 0 10px rgba(255,255,255,.12)!important;}
.comment,.comment p{color:#f3f8ff!important;}

@media (max-width:1100px){
  .topbar{min-height:68px!important;grid-template-columns:50px minmax(0,1fr) auto!important;}
  .brand img{flex-basis:52px!important;width:52px!important;height:52px!important;}
  .brand strong{letter-spacing:.13em!important;}
  .actions{grid-template-columns:82px repeat(2,minmax(0,1fr))!important;}
  .fire-btn{grid-column:auto!important;}
}
@media (max-width:760px){
  body::after{display:block!important;top:90px!important;left:-110px!important;width:330px!important;height:330px!important;opacity:.48!important;}
  .topbar{min-height:60px!important;grid-template-columns:44px minmax(0,1fr) auto!important;}
  .brand img{flex-basis:40px!important;width:40px!important;height:40px!important;}
  .actions{grid-template-columns:1fr 1fr!important;}
  .fire-btn{grid-column:1 / -1!important;min-height:64px!important;}
  .fire-btn span{font-size:1.85rem!important;}
}


/* =========================================================
   WWCFAM SCD CARD DROP - v3 mobile/header/performance polish
   Fixes: smaller header, clean mobile menu, centered icons,
   3-card desktop pattern, 4 stats desktop, stronger but lighter FX.
   ========================================================= */
:root{
  --cd-cyan:#18e5ff;
  --cd-blue:#2687ff;
  --cd-purple:#a64cff;
  --cd-pink:#ff36d5;
  --cd-fire:#ff7a16;
  --cd-gold:#ffd45b;
}
html,body{max-width:100%;overflow-x:hidden!important;}
body{
  background:
    radial-gradient(circle at 0% 31%,rgba(36,118,255,.38),transparent 19rem),
    radial-gradient(circle at 82% 26%,rgba(184,67,255,.25),transparent 26rem),
    linear-gradient(180deg,#02050d 0%,#06111f 48%,#020612 100%)!important;
}
body::before{
  background:
    url('../img/carddrop-world-planet-left.png') left 96px / min(46vw,620px) auto no-repeat,
    radial-gradient(circle at 50% 12%,rgba(24,229,255,.14),transparent 24rem),
    radial-gradient(circle at 86% 18%,rgba(255,54,213,.15),transparent 29rem),
    linear-gradient(90deg, transparent 0 49.8%, rgba(24,229,255,.08) 49.9% 50.1%, transparent 50.2% 100%),
    linear-gradient(0deg, transparent 0 49.8%, rgba(166,76,255,.07) 49.9% 50.1%, transparent 50.2% 100%),
    radial-gradient(circle at 50% 50%, rgba(255,255,255,.08) 0 1px, transparent 1.7px)!important;
  background-size:min(46vw,620px) auto,auto,auto,520px 520px,520px 520px,88px 88px!important;
  opacity:.98!important;
}
body::after{display:none!important;}

/* exact-style compact reference header */
.topbar,body[data-page] .topbar{
  width:min(1860px,calc(100% - 32px))!important;
  min-height:84px!important;
  height:84px!important;
  margin:18px auto 18px!important;
  padding:0 18px!important;
  display:grid!important;
  grid-template-columns:64px minmax(0,1fr) auto!important;
  align-items:center!important;
  gap:16px!important;
  border-radius:18px!important;
  border:1px solid rgba(132,230,255,.42)!important;
  overflow:visible!important;
  background:linear-gradient(90deg,rgba(1,5,13,.93),rgba(3,8,22,.90) 58%,rgba(19,6,34,.94))!important;
  box-shadow:0 0 0 1px rgba(255,54,213,.18),0 0 30px rgba(24,229,255,.15),0 16px 48px rgba(0,0,0,.58),inset 0 1px 0 rgba(255,255,255,.10)!important;
}
.menu-toggle,body[data-page] .menu-toggle{
  grid-column:1!important;
  width:52px!important;min-width:52px!important;height:52px!important;flex-basis:52px!important;
  justify-self:center!important;margin:0!important;border-radius:16px!important;gap:7px!important;
  display:inline-flex!important;align-items:center!important;justify-content:center!important;flex-direction:column!important;
}
.menu-toggle span{width:27px!important;height:2.5px!important;display:block!important;}
.brand,body[data-page] .brand{grid-column:2!important;gap:14px!important;align-items:center!important;overflow:hidden!important;}
.brand img{flex:0 0 64px!important;width:64px!important;height:64px!important;border-radius:999px!important;padding:3px!important;}
.brand strong{font-size:clamp(.92rem,1.15vw,1.34rem)!important;letter-spacing:.25em!important;font-weight:750!important;line-height:1!important;white-space:nowrap!important;overflow:hidden!important;text-overflow:ellipsis!important;}
.brand small{font-size:.66rem!important;letter-spacing:.055em!important;opacity:.9!important;}
.header-actions{
  grid-column:3!important;display:flex!important;align-items:center!important;justify-content:center!important;gap:12px!important;
  padding:8px 12px!important;min-height:58px!important;border-radius:17px!important;
  background:linear-gradient(90deg,rgba(6,9,23,.74),rgba(54,12,74,.72))!important;
  border:1px solid rgba(255,255,255,.08)!important;
}
.header-actions a{display:inline-flex!important;align-items:center!important;justify-content:center!important;gap:10px!important;min-height:42px!important;padding:8px 12px!important;font-size:clamp(.75rem,.88vw,.96rem)!important;letter-spacing:.12em!important;text-transform:uppercase!important;}
.header-actions .ico{width:22px!important;height:22px!important;display:inline-grid!important;place-items:center!important;color:#dca6ff!important;text-shadow:0 0 16px rgba(166,76,255,.95)!important;}
.nav{top:calc(100% + 8px)!important;}

/* reference panel sizes, spacing and 3-card desktop pattern */
main{width:min(1600px,calc(100% - 32px))!important;}
.hero{min-height:318px!important;padding:22px clamp(20px,3vw,44px)!important;}
.hero h1{font-size:clamp(4rem,8.2vw,8.25rem)!important;letter-spacing:.025em!important;line-height:.78!important;color:#dff7ff!important;}
.hero .subline{font-size:clamp(.95rem,1.2vw,1.25rem)!important;color:#f7fbff!important;}
.drop-input-wrap{width:min(950px,100%)!important;margin-inline:auto!important;}
.players-panel{padding:26px clamp(18px,2.2vw,34px)!important;}
.players-head{align-items:start!important;}
.stats{grid-template-columns:repeat(4,minmax(0,1fr))!important;gap:16px!important;}
.stats span{min-height:88px!important;border-radius:16px!important;display:grid!important;place-items:center!important;text-align:center!important;}
.stats span:nth-child(1),.player-card:nth-child(3n+1)::before{--accent:var(--cd-cyan);}
.stats span:nth-child(2),.player-card:nth-child(3n+2)::before{--accent:var(--cd-purple);}
.stats span:nth-child(3),.player-card:nth-child(3n+3)::before{--accent:var(--cd-cyan);}
.stats span:nth-child(4),.player-card[data-type="playlist"]::before{--accent:var(--cd-pink);}
.cards{grid-template-columns:repeat(3,minmax(0,1fr))!important;gap:22px!important;align-items:start!important;}
.player-card{min-width:0!important;border-radius:20px!important;padding:14px!important;}
.player-card::before{inset:-4px!important;border-radius:24px!important;filter:drop-shadow(0 0 14px var(--accent,var(--cd-cyan))) drop-shadow(0 0 34px rgba(24,229,255,.38))!important;}
.player-card:nth-child(3n+2)::before{filter:drop-shadow(0 0 14px var(--cd-purple)) drop-shadow(0 0 36px rgba(166,76,255,.46))!important;}
.player-card:nth-child(3n+3)::before{filter:drop-shadow(0 0 14px var(--cd-pink)) drop-shadow(0 0 38px rgba(255,54,213,.42))!important;}
.player-card h3{font-size:clamp(1.05rem,1.25vw,1.38rem)!important;line-height:1.08!important;color:#fafdff!important;}
.url-line{font-size:.72rem!important;color:#bed4f5!important;}
.owner-line{font-size:.75rem!important;color:#fff!important;}
.soundcloud-frame iframe,.player-card[data-type="song"] .soundcloud-frame iframe{height:clamp(150px,11.5vw,188px)!important;}
.actions{grid-template-columns:86px repeat(4,minmax(0,1fr))!important;gap:7px!important;}
.actions .btn{min-width:0!important;}

/* real fire tile closer to reference */
.fire-btn{
  min-height:68px!important;width:100%!important;border-radius:15px!important;padding:6px!important;
  background:
    radial-gradient(ellipse at 50% 28%,rgba(255,255,170,.9),transparent 15%),
    radial-gradient(ellipse at 47% 46%,rgba(255,123,16,.95),rgba(189,34,0,.55) 43%,rgba(8,5,12,.90) 76%),
    linear-gradient(180deg,rgba(46,13,0,.95),rgba(7,6,13,.96))!important;
  border-color:rgba(255,205,83,.96)!important;
  box-shadow:0 0 20px rgba(255,123,16,.82),0 0 46px rgba(255,45,0,.42),inset 0 0 26px rgba(255,200,65,.22)!important;
}
.fire-btn span{font-size:2.35rem!important;}
.fire-btn::before{filter:blur(.6px) drop-shadow(0 0 18px rgba(255,86,0,1))!important;}
.fire-btn:hover,.fire-btn.active{transform:translateY(-1px) scale(1.03)!important;}
.comment-toggle,.repost-btn,.share-btn,.open-btn{font-size:.82rem!important;}
.comment-form input{border-color:rgba(24,229,255,.42)!important;box-shadow:inset 0 0 18px rgba(24,229,255,.06)!important;}
.comment.new-comment{animation:commentNeonPop 1.25s ease both!important;border-color:rgba(24,229,255,.72)!important;}
@keyframes commentNeonPop{0%{transform:scale(.97);box-shadow:0 0 0 rgba(24,229,255,0)}38%{transform:scale(1.015);box-shadow:0 0 28px rgba(24,229,255,.38),0 0 46px rgba(166,76,255,.22)}100%{transform:scale(1);box-shadow:0 0 12px rgba(24,229,255,.12)}}

/* mobile: no messy words in header, centered icons, lighter effects */
@media (max-width:1180px){
  .cards{grid-template-columns:repeat(2,minmax(0,1fr))!important;}
  .hero h1{font-size:clamp(3.4rem,10vw,6rem)!important;}
}
@media (max-width:760px){
  body::before{
    background:
      url('../img/carddrop-world-planet-left.png') left 72px / 320px auto no-repeat,
      radial-gradient(circle at 70% 16%,rgba(166,76,255,.15),transparent 20rem),
      linear-gradient(90deg, transparent 0 49.8%, rgba(24,229,255,.055) 49.9% 50.1%, transparent 50.2% 100%),
      radial-gradient(circle at 50% 50%, rgba(255,255,255,.05) 0 1px, transparent 1.8px)!important;
    background-size:320px auto,auto,420px 420px,86px 86px!important;
  }
  #wwcCanvasShell{opacity:.45!important;}
  #fxCanvas{opacity:.55!important;}
  #tsparticles{display:none!important;}
  .topbar,body[data-page] .topbar{
    width:calc(100% - 12px)!important;height:58px!important;min-height:58px!important;margin:7px auto 10px!important;padding:0 8px!important;
    grid-template-columns:42px 42px 1fr!important;gap:7px!important;border-radius:15px!important;
  }
  .menu-toggle,body[data-page] .menu-toggle{width:40px!important;min-width:40px!important;height:40px!important;flex-basis:40px!important;border-radius:12px!important;gap:5px!important;}
  .menu-toggle span{width:22px!important;height:2px!important;}
  .brand,body[data-page] .brand{grid-column:2!important;gap:0!important;justify-self:start!important;overflow:visible!important;}
  .brand img{width:40px!important;height:40px!important;flex-basis:40px!important;display:block!important;padding:2px!important;}
  .brand span{display:none!important;}
  .header-actions{grid-column:3!important;justify-self:end!important;display:flex!important;gap:6px!important;padding:4px!important;min-height:42px!important;border-radius:13px!important;background:rgba(20,8,34,.72)!important;}
  .header-actions a{width:39px!important;height:36px!important;min-height:36px!important;padding:0!important;border-radius:11px!important;}
  .header-actions a span:not(.ico){display:none!important;}
  .header-actions .ico{width:22px!important;height:22px!important;font-size:1rem!important;}
  .nav{left:6px!important;top:calc(100% + 8px)!important;width:min(330px,calc(100vw - 12px))!important;border-radius:14px!important;}
  main{width:calc(100% - 12px)!important;}
  .hero{min-height:auto!important;padding:18px 10px!important;border-radius:18px!important;}
  .hero h1{font-size:clamp(3rem,17vw,4.7rem)!important;line-height:.82!important;}
  .hero .subline{font-size:.92rem!important;}
  .logo-tile{width:min(142px,56vw)!important;min-height:104px!important;}
  .drop-input-wrap{grid-template-columns:44px minmax(0,1fr)!important;border-radius:14px!important;}
  #linkBox{height:58px!important;min-height:58px!important;font-size:.86rem!important;}
  .drop-card-btn{grid-column:1 / -1!important;min-height:44px!important;}
  .players-panel{padding:14px 10px!important;border-radius:18px!important;}
  .players-head{gap:10px!important;}
  .players-head h2{font-size:clamp(1.85rem,8vw,2.55rem)!important;}
  .filters{grid-template-columns:1fr!important;gap:8px!important;}
  .stats{grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:8px!important;}
  .stats span{min-height:74px!important;padding:8px!important;display:grid!important;grid-template-columns:1fr!important;grid-template-rows:auto auto!important;place-items:center!important;text-align:center!important;font-size:.93rem!important;}
  .stats span::before{width:38px!important;height:38px!important;line-height:36px!important;font-size:1rem!important;margin:0 auto!important;}
  .cards{grid-template-columns:1fr!important;gap:18px!important;}
  .player-card{padding:12px!important;border-radius:18px!important;}
  .player-card::before{border-radius:21px!important;inset:-3px!important;}
  .player-card h3{font-size:1.08rem!important;}
  .soundcloud-frame iframe,.player-card[data-type="song"] .soundcloud-frame iframe{height:172px!important;}
  .actions{display:grid!important;grid-template-columns:1fr 1fr!important;gap:7px!important;}
  .fire-btn{grid-column:1 / -1!important;min-height:62px!important;}
  .comment-form{grid-template-columns:1fr!important;}
  .comment-form .btn{width:100%!important;}
}
@media (max-width:390px){
  .header-actions a{width:34px!important;}
  .topbar,body[data-page] .topbar{grid-template-columns:40px 38px 1fr!important;}
  .brand img{width:38px!important;height:38px!important;}
  .stats{grid-template-columns:1fr 1fr!important;}
}
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;}
  #wwcCanvasShell,#fxCanvas,#tsparticles{display:none!important;}
}

/* =========================================================
   WWCFAM SCD RESPONSIVE LINK + HEADER + PERFORMANCE v4 FINAL OVERRIDE
   Fixes desktop/mobile header, SoundCloud drop box scrollbar, action cutoff,
   mobile stat/icon alignment, 3-card desktop layout, and live publish FX.
   ========================================================= */
:root{
  --v4-cyan:#21e7ff;
  --v4-blue:#2778ff;
  --v4-purple:#a95cff;
  --v4-pink:#ff3ed2;
  --v4-fire:#ff7b16;
  --v4-gold:#ffd35b;
  --v4-panel:rgba(3,9,23,.78);
  --v4-panel2:rgba(7,13,32,.86);
}
html,body{max-width:100%;overflow-x:hidden!important;}
body{
  background:
    linear-gradient(90deg,rgba(1,7,18,.42),rgba(6,5,21,.2),rgba(18,5,30,.42)),
    url('../img/carddrop-world-planet-left.png') left top/auto min(74vh,720px) no-repeat fixed,
    radial-gradient(circle at 24% 22%,rgba(33,231,255,.20),transparent 28rem),
    radial-gradient(circle at 86% 18%,rgba(255,62,210,.22),transparent 30rem),
    linear-gradient(180deg,#02050d 0%,#071229 52%,#020610 100%)!important;
}
body::before{
  opacity:.72!important;
  background:
    linear-gradient(90deg,transparent 0 49.85%,rgba(33,231,255,.10) 49.9% 50.1%,transparent 50.15%),
    linear-gradient(0deg,transparent 0 49.85%,rgba(169,92,255,.075) 49.9% 50.1%,transparent 50.15%),
    radial-gradient(circle at 50% 50%,rgba(255,255,255,.14) 0 1px,transparent 1.6px)!important;
  background-size:520px 520px,520px 520px,90px 90px!important;
}
body::after{
  opacity:.82!important;
  width:clamp(260px,34vw,560px)!important;
  height:clamp(260px,34vw,560px)!important;
  top:clamp(84px,11vw,150px)!important;
  left:clamp(-240px,-9vw,-70px)!important;
}
#wwcCanvasShell{opacity:.82!important;}
#fxCanvas{opacity:.72!important;}

/* Header: one clean universal structure on every page */
.topbar,body[data-page] .topbar{
  position:relative!important;
  top:auto!important;
  width:min(1720px,calc(100% - 32px))!important;
  max-width:1720px!important;
  min-height:76px!important;
  margin:14px auto 16px!important;
  padding:9px 14px!important;
  display:grid!important;
  grid-template-columns:56px minmax(0,1fr) auto!important;
  gap:16px!important;
  align-items:center!important;
  border-radius:18px!important;
  background:linear-gradient(90deg,rgba(1,5,16,.94),rgba(4,8,23,.91) 48%,rgba(15,4,31,.94))!important;
  border:1px solid rgba(112,226,255,.42)!important;
  box-shadow:0 0 0 1px rgba(255,62,210,.12),0 0 28px rgba(33,231,255,.12),0 16px 48px rgba(0,0,0,.46),inset 0 1px 0 rgba(255,255,255,.09)!important;
  overflow:visible!important;
  backdrop-filter:blur(18px)!important;
}
.menu-toggle,body[data-page] .menu-toggle{
  grid-column:1!important;order:0!important;justify-self:center!important;
  display:inline-flex!important;align-items:center!important;justify-content:center!important;flex-direction:column!important;
  width:50px!important;min-width:50px!important;height:50px!important;flex:0 0 50px!important;
  gap:6px!important;margin:0!important;border-radius:15px!important;
  background:linear-gradient(145deg,rgba(255,255,255,.07),rgba(33,231,255,.04))!important;
  border:1px solid rgba(255,255,255,.14)!important;box-shadow:0 0 16px rgba(33,231,255,.10),inset 0 0 18px rgba(33,231,255,.05)!important;
}
.menu-toggle span{width:27px!important;height:3px!important;background:#effcff!important;border-radius:99px!important;box-shadow:0 0 12px rgba(255,255,255,.62)!important;}
.menu-toggle[aria-expanded="true"] span:nth-child(1){transform:translateY(9px) rotate(45deg)!important;}
.menu-toggle[aria-expanded="true"] span:nth-child(2){opacity:0!important;}
.menu-toggle[aria-expanded="true"] span:nth-child(3){transform:translateY(-9px) rotate(-45deg)!important;}
.brand,body[data-page] .brand{grid-column:2!important;display:flex!important;align-items:center!important;justify-content:flex-start!important;gap:16px!important;min-width:0!important;overflow:hidden!important;text-decoration:none!important;}
.brand img{width:58px!important;height:58px!important;flex:0 0 58px!important;border-radius:999px!important;padding:3px!important;object-fit:contain!important;background:radial-gradient(circle,rgba(255,236,177,.15),rgba(33,231,255,.045))!important;border:1px solid rgba(255,232,171,.52)!important;box-shadow:0 0 22px rgba(255,232,171,.20),0 0 30px rgba(33,231,255,.12)!important;}
.brand span{display:grid!important;min-width:0!important;gap:3px!important;}
.brand strong{font-size:clamp(.92rem,1.25vw,1.32rem)!important;letter-spacing:.22em!important;line-height:1.05!important;text-transform:uppercase!important;color:#f8fbff!important;white-space:nowrap!important;overflow:hidden!important;text-overflow:ellipsis!important;text-shadow:0 0 12px rgba(255,255,255,.30)!important;}
.brand small{font-size:.72rem!important;letter-spacing:.06em!important;color:#9defff!important;white-space:nowrap!important;overflow:hidden!important;text-overflow:ellipsis!important;}
.desktop-actions{grid-column:3!important;display:flex!important;align-items:center!important;gap:8px!important;padding:9px 10px!important;border-radius:16px!important;background:linear-gradient(90deg,rgba(255,255,255,.035),rgba(169,92,255,.12))!important;border-left:1px solid rgba(255,255,255,.08)!important;}
.desktop-actions a{display:inline-flex!important;align-items:center!important;justify-content:center!important;gap:9px!important;min-height:42px!important;padding:10px 14px!important;border-radius:13px!important;text-transform:uppercase!important;letter-spacing:.13em!important;text-decoration:none!important;color:#f5e9ff!important;font-weight:900!important;border:1px solid transparent!important;white-space:nowrap!important;}
.desktop-actions a:hover,.desktop-actions a:focus-visible{border-color:rgba(169,92,255,.44)!important;background:rgba(169,92,255,.13)!important;outline:none!important;box-shadow:0 0 20px rgba(169,92,255,.18)!important;}
.desktop-actions .quick-ico{font-size:1.25rem!important;color:#d898ff!important;text-shadow:0 0 16px rgba(216,152,255,.70)!important;}
.header-actions{display:none!important;}
.nav,body[data-page] .nav{position:absolute!important;top:calc(100% + 10px)!important;left:14px!important;right:auto!important;width:min(320px,calc(100vw - 28px))!important;display:none!important;flex-direction:column!important;align-items:stretch!important;gap:8px!important;padding:12px!important;border-radius:18px!important;border:1px solid rgba(112,226,255,.42)!important;background:linear-gradient(180deg,rgba(2,7,18,.985),rgba(15,6,34,.985))!important;box-shadow:0 28px 76px rgba(0,0,0,.62),0 0 30px rgba(33,231,255,.16)!important;z-index:5000!important;}
.nav.open,body[data-page] .nav.open{display:flex!important;}
.nav a{display:flex!important;align-items:center!important;justify-content:space-between!important;width:100%!important;min-height:44px!important;padding:10px 12px!important;border-radius:13px!important;background:rgba(255,255,255,.052)!important;border:1px solid rgba(255,255,255,.11)!important;color:#eefaff!important;text-decoration:none!important;font-weight:900!important;letter-spacing:.08em!important;text-transform:uppercase!important;}

/* Clean drop box: no internal scroll bar */
.drop-input-wrap{overflow:hidden!important;grid-template-columns:56px minmax(0,1fr) minmax(142px,188px)!important;align-items:stretch!important;}
.drop-input-wrap textarea,#linkBox{height:58px!important;min-height:58px!important;max-height:58px!important;overflow:hidden!important;resize:none!important;white-space:nowrap!important;text-overflow:ellipsis!important;scrollbar-width:none!important;line-height:1.3!important;padding:17px 16px!important;}
.drop-input-wrap textarea::-webkit-scrollbar,#linkBox::-webkit-scrollbar{display:none!important;}
.drop-card-btn{min-height:58px!important;display:inline-flex!important;align-items:center!important;justify-content:center!important;gap:8px!important;}

/* Desktop layout exactly: 4 stat boxes, 3 player cards */
.stats{display:grid!important;grid-template-columns:repeat(4,minmax(0,1fr))!important;gap:14px!important;width:100%!important;}
.stats span{min-width:0!important;display:grid!important;place-items:center!important;align-content:center!important;text-align:center!important;}
.cards{display:grid!important;grid-template-columns:repeat(3,minmax(0,1fr))!important;gap:18px!important;align-items:start!important;width:100%!important;overflow:visible!important;}
.player-card{min-width:0!important;max-width:100%!important;overflow:visible!important;padding:16px!important;border-radius:20px!important;}
.card-top{display:grid!important;grid-template-columns:minmax(0,1fr) auto!important;gap:10px!important;align-items:start!important;}
.card-title-wrap,.card-title-wrap h3,.url-line,.owner-line{min-width:0!important;max-width:100%!important;overflow-wrap:anywhere!important;word-break:break-word!important;}
.soundcloud-frame{width:100%!important;max-width:100%!important;overflow:hidden!important;border-radius:16px!important;}
.soundcloud-frame iframe{width:100%!important;max-width:100%!important;border:0!important;display:block!important;height:clamp(190px,20vw,270px)!important;}
.player-card[data-type="song"] .soundcloud-frame iframe{height:clamp(160px,13vw,190px)!important;}
.actions{display:grid!important;grid-template-columns:minmax(76px,.7fr) repeat(4,minmax(0,1fr))!important;gap:8px!important;width:100%!important;align-items:stretch!important;}
.actions .btn,.actions a.btn{min-width:0!important;width:100%!important;max-width:100%!important;min-height:44px!important;display:inline-flex!important;align-items:center!important;justify-content:center!important;gap:6px!important;padding:8px 9px!important;line-height:1.05!important;text-align:center!important;white-space:normal!important;overflow-wrap:anywhere!important;font-size:clamp(.70rem,.76vw,.88rem)!important;border-radius:12px!important;}
.open-btn{font-size:clamp(.62rem,.72vw,.80rem)!important;color:#ffe1a8!important;}
.comment-form{display:grid!important;grid-template-columns:minmax(0,1fr) auto!important;gap:8px!important;align-items:stretch!important;}
.comment-form input{min-width:0!important;}
.comment{animation:commentNeonPop .42s ease both;}
@keyframes commentNeonPop{0%{opacity:.1;transform:translateY(7px) scale(.98);box-shadow:0 0 0 rgba(33,231,255,0)}60%{opacity:1;transform:translateY(0) scale(1.01);box-shadow:0 0 22px rgba(33,231,255,.24)}100%{opacity:1;transform:none}}

/* Fire reaction: closer fire tile with pulsing flame */
.fire-btn{position:relative!important;isolation:isolate!important;min-height:58px!important;color:#ffe6b5!important;background:radial-gradient(circle at 50% 28%,rgba(255,211,91,.32),rgba(255,123,22,.18) 42%,rgba(255,42,0,.10) 70%,rgba(10,12,25,.65))!important;border:1px solid rgba(255,190,80,.58)!important;box-shadow:0 0 18px rgba(255,123,22,.28),inset 0 0 22px rgba(255,190,80,.12)!important;}
.fire-btn span{font-size:1.55rem!important;line-height:1!important;filter:drop-shadow(0 0 12px rgba(255,123,22,.9));animation:wwcFireFlicker .72s infinite alternate ease-in-out!important;}
.fire-btn::before{content:"";position:absolute;inset:-5px;border-radius:15px;z-index:-1;background:radial-gradient(circle at 50% 65%,rgba(255,211,91,.74),rgba(255,123,22,.38) 34%,rgba(255,37,0,.18) 58%,transparent 72%);filter:blur(9px);opacity:.70;animation:wwcFireAura 1.05s infinite alternate ease-in-out;}
.fire-btn::after{content:"";position:absolute;left:16%;right:16%;bottom:4px;height:44%;border-radius:50% 50% 35% 35%;background:linear-gradient(180deg,rgba(255,255,255,.92),rgba(255,215,82,.82),rgba(255,106,14,.42),transparent);clip-path:polygon(50% 0%,62% 28%,74% 7%,70% 45%,91% 25%,76% 72%,58% 100%,48% 68%,36% 100%,23% 72%,9% 30%,31% 47%,28% 8%,42% 31%);opacity:.55;mix-blend-mode:screen;animation:wwcFireShape .56s infinite alternate ease-in-out;}
@keyframes wwcFireFlicker{from{transform:translateY(1px) scale(.96) rotate(-2deg)}to{transform:translateY(-2px) scale(1.08) rotate(2deg)}}
@keyframes wwcFireAura{from{opacity:.50;transform:scale(.96)}to{opacity:.95;transform:scale(1.06)}}
@keyframes wwcFireShape{from{transform:translateY(2px) scaleX(.9);opacity:.38}to{transform:translateY(-3px) scaleX(1.15);opacity:.72}}

/* Publish screen effect */
.publish-screen-effect{position:fixed;inset:0;z-index:9000;pointer-events:none;display:grid;place-items:center;opacity:0;mix-blend-mode:screen;}
.publish-screen-effect.run{animation:publishFade 1.65s ease forwards;}
.publish-screen-effect strong{font-family:Impact,'Arial Black',system-ui,sans-serif;font-size:clamp(2.2rem,8vw,8rem);letter-spacing:.09em;color:transparent;background:linear-gradient(90deg,#21e7ff,#fff,#a95cff,#ff3ed2);-webkit-background-clip:text;background-clip:text;text-shadow:0 0 30px rgba(33,231,255,.75),0 0 60px rgba(255,62,210,.55);transform:scale(.72);animation:publishText .9s ease forwards;}
.publish-screen-effect .bolt{position:absolute;left:-10vw;right:-10vw;height:4px;background:linear-gradient(90deg,transparent,#21e7ff,#fff,#ff3ed2,transparent);filter:drop-shadow(0 0 16px #21e7ff);transform:translateX(-100%) skewX(-18deg);}
.publish-screen-effect .b1{top:42%;animation:publishBolt .65s ease forwards;}
.publish-screen-effect .b2{top:58%;animation:publishBolt .78s .08s ease forwards reverse;}
.publish-screen-effect .ring{position:absolute;width:18vw;min-width:150px;aspect-ratio:1;border-radius:999px;border:3px solid rgba(33,231,255,.82);box-shadow:0 0 30px rgba(33,231,255,.75),inset 0 0 22px rgba(255,62,210,.5);animation:publishRing 1.2s ease forwards;}
@keyframes publishFade{0%{opacity:0}12%{opacity:1}75%{opacity:1}100%{opacity:0}}
@keyframes publishText{0%{transform:scale(.65);opacity:0}55%{transform:scale(1.05);opacity:1}100%{transform:scale(1);opacity:1}}
@keyframes publishBolt{to{transform:translateX(100%) skewX(-18deg)}}
@keyframes publishRing{from{transform:scale(.35);opacity:1}to{transform:scale(4.8);opacity:0}}

/* Medium screens */
@media (max-width:1100px){
  .cards{grid-template-columns:repeat(2,minmax(0,1fr))!important;}
  .actions{grid-template-columns:repeat(2,minmax(0,1fr))!important;}
  .fire-btn{grid-column:auto!important;}
  .open-btn{grid-column:1 / -1!important;}
}

/* Mobile: compact header, no words, centered icons, lower lag */
@media (max-width:700px){
  body{background-attachment:scroll!important;background-size:auto 420px,auto,auto,auto,auto!important;}
  #wwcCanvasShell{opacity:.48!important;}
  #fxCanvas{opacity:.46!important;}
  .topbar,body[data-page] .topbar{
    width:calc(100% - 12px)!important;min-height:58px!important;margin:7px auto 10px!important;padding:6px 8px!important;
    grid-template-columns:44px minmax(0,1fr) auto!important;gap:7px!important;border-radius:15px!important;
  }
  .menu-toggle,body[data-page] .menu-toggle{width:42px!important;min-width:42px!important;height:42px!important;flex-basis:42px!important;border-radius:13px!important;gap:5px!important;}
  .menu-toggle span{width:23px!important;height:2.5px!important;}
  .menu-toggle[aria-expanded="true"] span:nth-child(1){transform:translateY(7.5px) rotate(45deg)!important;}
  .menu-toggle[aria-expanded="true"] span:nth-child(3){transform:translateY(-7.5px) rotate(-45deg)!important;}
  .brand,body[data-page] .brand{justify-content:center!important;gap:0!important;overflow:visible!important;}
  .brand img{width:42px!important;height:42px!important;flex:0 0 42px!important;border-radius:14px!important;padding:2px!important;}
  .brand span{display:none!important;}
  .desktop-actions{display:flex!important;gap:6px!important;padding:0!important;border:0!important;background:transparent!important;}
  .desktop-actions a{width:40px!important;height:40px!important;min-height:40px!important;padding:0!important;border-radius:13px!important;background:rgba(255,255,255,.065)!important;border:1px solid rgba(255,255,255,.10)!important;}
  .desktop-actions a span:not(.quick-ico){display:none!important;}
  .desktop-actions .quick-ico{font-size:1.18rem!important;}
  .nav{left:6px!important;right:6px!important;width:auto!important;top:calc(100% + 8px)!important;}
  main{width:calc(100% - 12px)!important;}
  .hero{grid-template-columns:1fr!important;gap:10px!important;min-height:auto!important;padding:18px 10px!important;text-align:center!important;}
  .logo-tile{width:124px!important;min-height:92px!important;}
  .logo-tile img{max-height:88px!important;}
  .hero .eyebrow{font-size:.62rem!important;letter-spacing:.20em!important;}
  .hero h1{font-size:clamp(3.1rem,17vw,5.2rem)!important;line-height:.84!important;text-align:center!important;}
  .hero .subline{font-size:.92rem!important;}
  .hero .subline strong{font-size:.78rem!important;letter-spacing:.20em!important;}
  .paste-label{font-size:.70rem!important;letter-spacing:.11em!important;}
  .drop-input-wrap{grid-template-columns:44px minmax(0,1fr)!important;width:100%!important;border-radius:14px!important;}
  .drop-input-wrap::after{font-size:1.3rem!important;}
  #linkBox{grid-column:2!important;height:52px!important;min-height:52px!important;max-height:52px!important;padding:15px 10px!important;font-size:.82rem!important;}
  .drop-card-btn{grid-column:1 / -1!important;min-height:44px!important;border-left:0!important;border-top:1px solid rgba(176,92,255,.35)!important;border-radius:0!important;font-size:.82rem!important;}
  .status-line{font-size:.82rem!important;line-height:1.35!important;}
  .players-head{grid-template-columns:1fr!important;gap:10px!important;}
  .players-head h2{font-size:2rem!important;}
  .filters{grid-template-columns:1fr!important;gap:8px!important;}
  .filters input,.filters select{height:46px!important;}
  .stats{grid-template-columns:1fr!important;gap:9px!important;}
  .stats span{min-height:70px!important;font-size:1rem!important;grid-template-columns:auto 1fr!important;grid-template-rows:1fr!important;justify-content:start!important;place-items:center!important;text-align:left!important;padding:10px 14px!important;}
  .stats span::before{width:44px!important;height:44px!important;line-height:42px!important;margin:0 12px 0 0!important;font-size:1.16rem!important;}
  .cards{grid-template-columns:1fr!important;gap:16px!important;padding:0!important;}
  .player-card{padding:12px!important;border-radius:17px!important;overflow:visible!important;}
  .player-card h3{font-size:1.08rem!important;line-height:1.12!important;}
  .url-line,.owner-line{font-size:.72rem!important;}
  .soundcloud-frame iframe{height:190px!important;}
  .player-card[data-type="song"] .soundcloud-frame iframe{height:166px!important;}
  .actions{grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:7px!important;}
  .actions .btn,.actions a.btn{min-height:42px!important;font-size:.73rem!important;padding:7px 8px!important;}
  .open-btn{grid-column:1 / -1!important;}
  .fire-btn{min-height:48px!important;}
  .fire-btn span{font-size:1.35rem!important;}
  .comment-form{grid-template-columns:minmax(0,1fr) 56px!important;}
  .comment-form .btn{padding:6px 8px!important;font-size:.74rem!important;}
}
@media (max-width:380px){
  .actions{grid-template-columns:1fr!important;}
  .open-btn{grid-column:auto!important;}
  .desktop-actions a{width:36px!important;height:36px!important;}
  .brand img{width:38px!important;height:38px!important;flex-basis:38px!important;}
}

/* PHASE 2A ONLY: mobile stat icons 2-by-2 cleanup.
   This only changes the four Live Card Drop stat/icon boxes on mobile. */
@media (max-width:700px){
  .stats{
    display:grid!important;
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
    gap:9px!important;
    width:100%!important;
    margin:12px 0 14px!important;
  }
  .stats span{
    min-width:0!important;
    min-height:92px!important;
    padding:10px 8px!important;
    display:flex!important;
    flex-direction:column!important;
    align-items:center!important;
    justify-content:center!important;
    gap:7px!important;
    text-align:center!important;
    font-size:clamp(.76rem,3vw,.96rem)!important;
    line-height:1.12!important;
    white-space:normal!important;
    overflow:hidden!important;
  }
  .stats span::before{
    display:grid!important;
    place-items:center!important;
    width:42px!important;
    height:42px!important;
    min-width:42px!important;
    min-height:42px!important;
    line-height:1!important;
    margin:0 auto!important;
    font-size:1.12rem!important;
    text-align:center!important;
  }
}
@media (max-width:380px){
  .stats{
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
    gap:8px!important;
  }
  .stats span{
    min-height:86px!important;
    padding:9px 6px!important;
    font-size:.72rem!important;
  }
  .stats span::before{
    width:38px!important;
    height:38px!important;
    min-width:38px!important;
    min-height:38px!important;
    font-size:1rem!important;
  }
}

/* PHASE 2B ONLY: desktop/laptop/TV action text fit.
   This does not touch mobile rules. It keeps Comment/Repost/Drop Card labels on one row on bigger screens. */
@media (min-width:701px){
  .comment-toggle,
  .repost-btn,
  .drop-card-btn{
    white-space:nowrap!important;
    word-break:normal!important;
    overflow-wrap:normal!important;
    line-height:1!important;
    letter-spacing:.015em!important;
    font-size:clamp(.56rem,.58vw,.76rem)!important;
    padding-left:6px!important;
    padding-right:6px!important;
    gap:4px!important;
  }
  .comment-toggle::before,
  .repost-btn::before{
    font-size:.95em!important;
    flex:0 0 auto!important;
    line-height:1!important;
  }
  .comment-toggle span,
  .repost-btn span,
  .drop-card-btn span{
    white-space:nowrap!important;
    word-break:normal!important;
    overflow-wrap:normal!important;
    min-width:0!important;
  }
  .actions .btn,
  .actions a.btn{
    white-space:nowrap!important;
    word-break:normal!important;
    overflow-wrap:normal!important;
  }
}
@media (min-width:1200px){
  .comment-toggle,
  .repost-btn{
    font-size:clamp(.60rem,.52vw,.82rem)!important;
  }
}

/* PHASE 2C ONLY: big-device Open SoundCloud button fit.
   Desktop/laptop/TV only. Mobile rules are untouched. */
@media (min-width:701px){
  .actions{
    grid-template-columns:86px minmax(0,.9fr) minmax(0,.9fr) minmax(0,.82fr) minmax(96px,1.16fr)!important;
  }
  .open-btn{
    min-width:0!important;
    white-space:normal!important;
    word-break:normal!important;
    overflow-wrap:normal!important;
    overflow:hidden!important;
    padding-left:5px!important;
    padding-right:5px!important;
    gap:3px!important;
    line-height:.92!important;
    font-size:0!important;
    letter-spacing:.005em!important;
  }
  .open-btn::before{
    flex:0 0 auto!important;
    width:14px!important;
    min-width:14px!important;
    display:inline-grid!important;
    place-items:center!important;
    font-size:.88rem!important;
    line-height:1!important;
    margin:0!important;
  }
  .open-btn::after{
    content:'Open\A SoundCloud'!important;
    display:block!important;
    white-space:pre!important;
    overflow:visible!important;
    text-align:center!important;
    font-size:clamp(.50rem,.46vw,.64rem)!important;
    line-height:.92!important;
    font-weight:900!important;
    letter-spacing:.01em!important;
  }
}
@media (min-width:1200px){
  .open-btn::after{
    font-size:clamp(.54rem,.43vw,.69rem)!important;
  }
}


/* PHASE 2D FULL: real-time count display + no-cut action boxes + lava/electric action buttons.
   Keeps existing desktop/mobile layouts but makes text/counts resilient. */
.actions .btn,
.actions a.btn{
  position:relative!important;
  isolation:isolate!important;
  overflow:hidden!important;
  min-width:0!important;
  max-width:100%!important;
  box-sizing:border-box!important;
}
.actions .btn::before,
.actions a.btn::before{
  position:relative!important;
  z-index:1!important;
}
.actions .btn > *,
.actions a.btn > *{
  position:relative!important;
  z-index:2!important;
}
.action-ico{
  display:inline-grid!important;
  place-items:center!important;
  flex:0 0 auto!important;
  line-height:1!important;
  width:1.05em!important;
  min-width:1.05em!important;
  text-align:center!important;
  filter:drop-shadow(0 0 8px rgba(33,231,255,.55))!important;
  animation:wwcIconBreath 2.8s ease-in-out infinite!important;
}
.action-label{
  min-width:0!important;
  max-width:100%!important;
  line-height:1!important;
  text-align:center!important;
  overflow:hidden!important;
  text-overflow:clip!important;
}
.count-pill{
  display:inline-grid!important;
  place-items:center!important;
  min-width:1.45em!important;
  max-width:3.2em!important;
  padding:0 .22em!important;
  margin-left:.05em!important;
  line-height:1!important;
  white-space:nowrap!important;
  overflow:hidden!important;
  text-overflow:clip!important;
  color:#f9fdff!important;
  text-shadow:0 0 9px rgba(255,255,255,.45),0 0 16px rgba(33,231,255,.28)!important;
}
.actions .btn:not(.fire-btn)::after,
.actions a.btn:not(.fire-btn)::after{
  content:""!important;
  position:absolute!important;
  inset:-40% -35%!important;
  z-index:0!important;
  background:
    radial-gradient(circle at 18% 30%,rgba(33,231,255,.26),transparent 24%),
    radial-gradient(circle at 74% 42%,rgba(169,92,255,.22),transparent 26%),
    radial-gradient(circle at 48% 82%,rgba(255,62,210,.16),transparent 30%),
    linear-gradient(115deg,rgba(255,255,255,.055),rgba(33,231,255,.03),rgba(169,92,255,.05));
  filter:blur(7px)!important;
  opacity:.62!important;
  transform:translate3d(-6%,0,0) rotate(0deg)!important;
  animation:wwcButtonLava 7.5s ease-in-out infinite alternate!important;
}
.comment-toggle{border-color:rgba(33,231,255,.24)!important;box-shadow:0 0 14px rgba(33,231,255,.09),inset 0 0 18px rgba(33,231,255,.035)!important;}
.comment-toggle.has-comments{border-color:rgba(33,231,255,.52)!important;box-shadow:0 0 18px rgba(33,231,255,.20),inset 0 0 18px rgba(33,231,255,.08)!important;}
.repost-btn.active{border-color:rgba(169,92,255,.56)!important;box-shadow:0 0 20px rgba(169,92,255,.23),inset 0 0 18px rgba(169,92,255,.08)!important;}
.share-btn{border-color:rgba(157,239,255,.24)!important;}
.open-btn{border-color:rgba(255,176,67,.30)!important;}
.open-btn .action-label-stack{
  display:flex!important;
  flex-direction:column!important;
  align-items:center!important;
  justify-content:center!important;
  gap:0!important;
  min-width:0!important;
  max-width:100%!important;
  overflow:visible!important;
}
.open-btn .action-label-stack span{
  display:block!important;
  white-space:nowrap!important;
  word-break:normal!important;
  overflow:visible!important;
  text-overflow:clip!important;
  max-width:100%!important;
  line-height:.94!important;
}
.live-count-updated .comment-toggle,
.live-count-updated .repost-btn,
.live-count-updated .fire-btn{
  animation:wwcLiveCountPulse .72s ease both!important;
}
@keyframes wwcIconBreath{
  0%,100%{transform:translateY(0) scale(1);opacity:.92}
  50%{transform:translateY(-1px) scale(1.08);opacity:1}
}
@keyframes wwcButtonLava{
  0%{transform:translate3d(-8%,-4%,0) rotate(0deg) scale(1);opacity:.52}
  45%{transform:translate3d(4%,2%,0) rotate(8deg) scale(1.06);opacity:.80}
  100%{transform:translate3d(9%,-2%,0) rotate(-6deg) scale(1.02);opacity:.60}
}
@keyframes wwcLiveCountPulse{
  0%{transform:scale(1);filter:brightness(1)}
  45%{transform:scale(1.045);filter:brightness(1.35);box-shadow:0 0 30px rgba(33,231,255,.32),0 0 44px rgba(255,62,210,.20),inset 0 0 22px rgba(255,255,255,.10)}
  100%{transform:scale(1);filter:brightness(1)}
}

@media (min-width:701px){
  .actions{
    grid-template-columns:minmax(70px,.72fr) minmax(86px,1fr) minmax(82px,.95fr) minmax(76px,.86fr) minmax(104px,1.18fr)!important;
    gap:7px!important;
  }
  .actions .btn,
  .actions a.btn{
    min-height:45px!important;
    padding:7px 6px!important;
    gap:4px!important;
    font-size:clamp(.56rem,.55vw,.76rem)!important;
    letter-spacing:.005em!important;
    white-space:nowrap!important;
  }
  .comment-toggle,
  .repost-btn{
    font-size:clamp(.54rem,.54vw,.74rem)!important;
  }
  .open-btn{
    font-size:clamp(.48rem,.43vw,.64rem)!important;
    line-height:.92!important;
    gap:3px!important;
    padding-left:4px!important;
    padding-right:4px!important;
    white-space:normal!important;
  }
  .open-btn .action-ico-open{
    width:.92em!important;
    min-width:.92em!important;
    font-size:.86rem!important;
    margin-right:1px!important;
  }
  .open-btn .action-label-stack span{
    font-size:clamp(.48rem,.43vw,.64rem)!important;
    letter-spacing:-.018em!important;
    transform:scaleX(.88)!important;
    transform-origin:center!important;
  }
  .count-pill{
    font-size:.88em!important;
  }
}
@media (min-width:1200px){
  .actions{
    grid-template-columns:minmax(78px,.72fr) minmax(92px,1fr) minmax(88px,.98fr) minmax(82px,.88fr) minmax(112px,1.2fr)!important;
  }
  .open-btn .action-label-stack span{
    font-size:clamp(.52rem,.42vw,.70rem)!important;
    transform:scaleX(.90)!important;
  }
}
@media (max-width:700px){
  .action-ico{width:1em!important;min-width:1em!important;}
  .count-pill{min-width:1.35em!important;max-width:2.8em!important;font-size:.86em!important;}
  .actions .btn,.actions a.btn{overflow:hidden!important;}
  .open-btn .action-label-stack span{font-size:.72rem!important;letter-spacing:-.015em!important;}
}
@media (prefers-reduced-motion: reduce){
  .actions .btn::after,.actions a.btn::after,.action-ico,.live-count-updated .comment-toggle,.live-count-updated .repost-btn,.live-count-updated .fire-btn{animation:none!important;}
}

/* =========================================================
   PHASE 2E FULL FIX: remove duplicated pseudo-icons, keep live counts readable,
   and make every action box center/fit without cutting off.
   ========================================================= */
.actions .btn:not(.fire-btn)::before,
.actions a.btn::before,
.comment-toggle::before,
.repost-btn::before,
.share-btn::before,
.open-btn::before,
.open-btn::after{
  content:none!important;
  display:none!important;
}
.actions{
  align-items:stretch!important;
  width:100%!important;
  max-width:100%!important;
  box-sizing:border-box!important;
}
.actions .btn,
.actions a.btn{
  display:inline-flex!important;
  align-items:center!important;
  justify-content:center!important;
  text-align:center!important;
  min-width:0!important;
  max-width:100%!important;
  width:100%!important;
  box-sizing:border-box!important;
  overflow:hidden!important;
  white-space:nowrap!important;
  word-break:normal!important;
  overflow-wrap:normal!important;
  gap:clamp(2px,.42vw,6px)!important;
  line-height:1!important;
}
.actions .btn > *,
.actions a.btn > *{
  min-width:0!important;
  max-width:100%!important;
  box-sizing:border-box!important;
}
.action-ico,
.fire-emoji{
  flex:0 0 auto!important;
  display:inline-grid!important;
  place-items:center!important;
  text-align:center!important;
}
.action-label{
  flex:0 1 auto!important;
  display:inline-flex!important;
  align-items:center!important;
  justify-content:center!important;
  min-width:0!important;
  max-width:100%!important;
  white-space:nowrap!important;
  overflow:hidden!important;
  text-overflow:clip!important;
  text-align:center!important;
}
.count-pill{
  flex:0 0 auto!important;
  display:inline-grid!important;
  place-items:center!important;
  min-width:1.25em!important;
  max-width:3.6em!important;
  white-space:nowrap!important;
  overflow:hidden!important;
  text-align:center!important;
  line-height:1!important;
}
.open-btn{
  flex-direction:row!important;
  justify-content:center!important;
  white-space:normal!important;
}
.open-btn .action-label-stack{
  display:flex!important;
  flex-direction:column!important;
  align-items:center!important;
  justify-content:center!important;
  gap:1px!important;
  line-height:.92!important;
  min-width:0!important;
  max-width:calc(100% - 16px)!important;
  overflow:hidden!important;
  text-align:center!important;
}
.open-btn .action-label-stack span{
  display:block!important;
  width:100%!important;
  max-width:100%!important;
  white-space:nowrap!important;
  overflow:hidden!important;
  text-overflow:clip!important;
  text-align:center!important;
  transform:none!important;
  line-height:.92!important;
}
@media (min-width:701px){
  .actions{
    grid-template-columns:minmax(66px,.68fr) minmax(78px,.94fr) minmax(76px,.90fr) minmax(72px,.82fr) minmax(100px,1.12fr)!important;
    gap:6px!important;
  }
  .actions .btn,
  .actions a.btn{
    min-height:45px!important;
    padding:7px 6px!important;
    font-size:clamp(.54rem,.55vw,.74rem)!important;
    letter-spacing:0!important;
  }
  .action-ico{font-size:clamp(.70rem,.65vw,.90rem)!important;width:.95em!important;min-width:.95em!important;}
  .count-pill{font-size:.86em!important;min-width:1.15em!important;padding:0 .12em!important;margin-left:0!important;}
  .comment-toggle .action-label,
  .repost-btn .action-label{
    font-size:clamp(.58rem,.58vw,.78rem)!important;
  }
  .open-btn .action-ico-open{font-size:clamp(.62rem,.58vw,.82rem)!important;width:.95em!important;min-width:.95em!important;margin:0!important;}
  .open-btn .action-label-stack span{font-size:clamp(.48rem,.45vw,.66rem)!important;letter-spacing:-.02em!important;}
}
@media (min-width:1200px){
  .actions{
    grid-template-columns:minmax(72px,.70fr) minmax(90px,1fr) minmax(86px,.96fr) minmax(78px,.86fr) minmax(112px,1.16fr)!important;
    gap:7px!important;
  }
  .actions .btn,
  .actions a.btn{font-size:clamp(.58rem,.50vw,.78rem)!important;padding-left:7px!important;padding-right:7px!important;}
  .open-btn .action-label-stack span{font-size:clamp(.52rem,.42vw,.68rem)!important;}
}
@media (max-width:700px){
  .actions .btn,
  .actions a.btn{white-space:nowrap!important;gap:5px!important;}
  .open-btn .action-label-stack span{font-size:.72rem!important;}
}

/* =========================================================
   PHASE 2F REAL FIX: action boxes cannot cut off, no duplicate icons,
   stronger visible lava/electric button layers, and centered live counts.
   ========================================================= */
.player-card .actions{
  display:grid!important;
  grid-template-columns:.72fr 1.06fr 1fr .86fr 1.30fr!important;
  gap:clamp(5px,.52vw,8px)!important;
  width:100%!important;
  max-width:100%!important;
  align-items:stretch!important;
  overflow:visible!important;
  box-sizing:border-box!important;
}
.player-card .actions .btn,
.player-card .actions a.btn{
  position:relative!important;
  isolation:isolate!important;
  min-width:0!important;
  width:100%!important;
  max-width:100%!important;
  min-height:clamp(46px,3.1vw,58px)!important;
  padding:clamp(6px,.55vw,9px) clamp(4px,.48vw,8px)!important;
  border-radius:clamp(11px,.78vw,15px)!important;
  display:inline-flex!important;
  align-items:center!important;
  justify-content:center!important;
  gap:clamp(2px,.36vw,5px)!important;
  box-sizing:border-box!important;
  overflow:hidden!important;
  white-space:nowrap!important;
  line-height:1!important;
  text-align:center!important;
  font-size:clamp(.60rem,.55vw,.82rem)!important;
  font-weight:900!important;
  letter-spacing:-.01em!important;
  color:#f8fbff!important;
  border:1px solid rgba(127,228,255,.25)!important;
  background:
    linear-gradient(180deg,rgba(255,255,255,.105),rgba(255,255,255,.035)),
    radial-gradient(circle at 20% 20%,rgba(33,231,255,.12),transparent 45%),
    rgba(11,17,35,.70)!important;
  box-shadow:
    0 0 12px rgba(33,231,255,.08),
    inset 0 0 18px rgba(255,255,255,.045)!important;
  transform:translateZ(0)!important;
}
.player-card .actions .btn::before,
.player-card .actions a.btn::before{
  content:""!important;
  display:block!important;
  position:absolute!important;
  inset:-65% -55%!important;
  z-index:0!important;
  pointer-events:none!important;
  border-radius:inherit!important;
  background:
    radial-gradient(circle at 18% 35%,var(--lava-a,rgba(33,231,255,.38)),transparent 20%),
    radial-gradient(circle at 72% 28%,var(--lava-b,rgba(174,92,255,.34)),transparent 24%),
    radial-gradient(circle at 45% 84%,var(--lava-c,rgba(255,78,218,.28)),transparent 28%),
    conic-gradient(from 0deg,transparent,rgba(255,255,255,.07),transparent,var(--lava-a,rgba(33,231,255,.28)),transparent)!important;
  filter:blur(6px) saturate(1.45)!important;
  opacity:.95!important;
  animation:wwcRealLavaBox 5.6s ease-in-out infinite alternate!important;
}
.player-card .actions .btn::after,
.player-card .actions a.btn::after{
  content:""!important;
  display:block!important;
  position:absolute!important;
  inset:1px!important;
  z-index:0!important;
  pointer-events:none!important;
  border-radius:inherit!important;
  background:linear-gradient(120deg,transparent 0 35%,rgba(255,255,255,.16) 48%,transparent 62% 100%)!important;
  background-size:240% 100%!important;
  opacity:.24!important;
  animation:wwcButtonGlassSweep 4.8s linear infinite!important;
}
.player-card .actions .btn > *,
.player-card .actions a.btn > *{
  position:relative!important;
  z-index:2!important;
  min-width:0!important;
  max-width:100%!important;
  box-sizing:border-box!important;
}
.comment-toggle{--lava-a:rgba(33,231,255,.46);--lava-b:rgba(40,160,255,.25);--lava-c:rgba(255,255,255,.16);border-color:rgba(33,231,255,.33)!important;}
.repost-btn{--lava-a:rgba(181,91,255,.45);--lava-b:rgba(33,231,255,.22);--lava-c:rgba(255,78,218,.25);border-color:rgba(181,91,255,.34)!important;}
.share-btn{--lava-a:rgba(126,232,255,.36);--lava-b:rgba(126,140,255,.24);--lava-c:rgba(255,255,255,.16);border-color:rgba(126,232,255,.27)!important;}
.open-btn{--lava-a:rgba(255,167,43,.42);--lava-b:rgba(255,211,91,.22);--lava-c:rgba(33,231,255,.18);border-color:rgba(255,181,61,.42)!important;}
.player-card .action-ico,
.player-card .fire-emoji{
  flex:0 0 auto!important;
  display:inline-grid!important;
  place-items:center!important;
  width:1em!important;
  min-width:1em!important;
  height:1em!important;
  margin:0!important;
  line-height:1!important;
  font-size:clamp(.76rem,.66vw,.98rem)!important;
  text-align:center!important;
}
.player-card .action-label{
  flex:0 1 auto!important;
  min-width:0!important;
  max-width:100%!important;
  overflow:visible!important;
  white-space:nowrap!important;
  text-align:center!important;
  line-height:1!important;
  font-size:inherit!important;
}
.player-card .count-pill{
  flex:0 0 auto!important;
  display:inline-grid!important;
  place-items:center!important;
  min-width:1.25em!important;
  max-width:3.6em!important;
  padding:0 .10em!important;
  margin:0!important;
  overflow:visible!important;
  white-space:nowrap!important;
  line-height:1!important;
  font-size:.92em!important;
  text-align:center!important;
  color:#fff7d7!important;
}
.player-card .open-btn{
  flex-direction:row!important;
  white-space:normal!important;
  gap:clamp(2px,.28vw,4px)!important;
}
.player-card .open-btn .action-label-stack{
  flex:1 1 auto!important;
  min-width:0!important;
  max-width:none!important;
  display:flex!important;
  flex-direction:column!important;
  align-items:center!important;
  justify-content:center!important;
  gap:0!important;
  overflow:visible!important;
  text-align:center!important;
  line-height:.88!important;
}
.player-card .open-btn .action-label-stack span{
  display:block!important;
  width:100%!important;
  min-width:0!important;
  max-width:none!important;
  overflow:visible!important;
  white-space:nowrap!important;
  text-overflow:clip!important;
  text-align:center!important;
  line-height:.88!important;
  font-size:clamp(.48rem,.40vw,.68rem)!important;
  letter-spacing:-.045em!important;
  transform:none!important;
}
.player-card .comment-toggle .action-label,
.player-card .repost-btn .action-label{
  font-size:clamp(.58rem,.50vw,.78rem)!important;
  letter-spacing:-.025em!important;
}
.player-card .fire-btn{
  --lava-a:rgba(255,220,92,.72);--lava-b:rgba(255,88,16,.54);--lava-c:rgba(255,31,0,.38);
  min-width:0!important;
  color:#fff1b2!important;
  border-color:rgba(255,197,61,.70)!important;
  box-shadow:0 0 18px rgba(255,126,20,.28),0 0 42px rgba(255,44,0,.14),inset 0 0 22px rgba(255,188,61,.12)!important;
}
.player-card .fire-btn .fire-emoji{font-size:clamp(1.35rem,1.45vw,2rem)!important;filter:drop-shadow(0 0 8px rgba(255,219,76,.95)) drop-shadow(0 0 16px rgba(255,76,0,.86))!important;animation:wwcFlameIconLive .58s infinite alternate ease-in-out!important;}
.player-card .fire-btn::before{opacity:1!important;filter:blur(7px) saturate(1.85)!important;}
.player-card .fire-btn::after{opacity:.42!important;}
@keyframes wwcRealLavaBox{
  0%{transform:translate3d(-8%,-5%,0) rotate(0deg) scale(1);opacity:.82;}
  33%{transform:translate3d(5%,2%,0) rotate(9deg) scale(1.08);opacity:1;}
  66%{transform:translate3d(-1%,7%,0) rotate(-7deg) scale(1.04);opacity:.9;}
  100%{transform:translate3d(8%,-2%,0) rotate(13deg) scale(1.10);opacity:1;}
}
@keyframes wwcButtonGlassSweep{0%{background-position:190% 0;}100%{background-position:-120% 0;}}
@keyframes wwcFlameIconLive{0%{transform:translateY(1px) scale(.96) rotate(-3deg);}100%{transform:translateY(-2px) scale(1.10) rotate(3deg);}}
@media (min-width:701px){
  .player-card .actions{grid-template-columns:.70fr 1.10fr 1.04fr .88fr 1.45fr!important;gap:clamp(5px,.42vw,7px)!important;}
  .player-card .actions .btn,.player-card .actions a.btn{font-size:clamp(.58rem,.47vw,.78rem)!important;min-height:clamp(46px,3vw,56px)!important;padding-left:clamp(4px,.34vw,7px)!important;padding-right:clamp(4px,.34vw,7px)!important;}
  .player-card .open-btn .action-label-stack span{font-size:clamp(.46rem,.35vw,.64rem)!important;letter-spacing:-.05em!important;}
}
@media (min-width:1280px){
  .player-card .actions{grid-template-columns:.68fr 1.14fr 1.08fr .92fr 1.58fr!important;gap:7px!important;}
  .player-card .actions .btn,.player-card .actions a.btn{font-size:clamp(.60rem,.42vw,.80rem)!important;}
  .player-card .open-btn .action-label-stack span{font-size:clamp(.48rem,.32vw,.66rem)!important;}
}
@media (max-width:700px){
  .player-card .actions{grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:7px!important;}
  .player-card .fire-btn{grid-column:1 / -1!important;min-height:58px!important;}
  .player-card .open-btn{grid-column:1 / -1!important;}
  .player-card .actions .btn,.player-card .actions a.btn{min-height:44px!important;font-size:.74rem!important;}
  .player-card .open-btn .action-label-stack span{font-size:.76rem!important;letter-spacing:-.01em!important;}
}

/* =========================================================
   PHASE 2G: restore mobile action alignment + stronger live lava/electric overlays.
   - Keeps the real fire button structure, but makes it brighter and alive.
   - Keeps the 4 normal buttons 2x2 on mobile.
   - Adds bright moving lava/water/electric overlays to buttons and comment sections.
   - Prevents action words/counts from cutting off.
   ========================================================= */
.player-card .actions{
  contain:layout paint!important;
}
.player-card .actions .btn,
.player-card .actions a.btn{
  isolation:isolate!important;
  overflow:hidden!important;
  transform:translateZ(0)!important;
  -webkit-transform:translateZ(0)!important;
  background:
    linear-gradient(180deg,rgba(255,255,255,.15),rgba(255,255,255,.04)),
    radial-gradient(circle at 20% 18%,rgba(36,235,255,.18),transparent 38%),
    radial-gradient(circle at 84% 82%,rgba(255,62,214,.12),transparent 44%),
    rgba(8,14,32,.82)!important;
  border-color:rgba(122,238,255,.38)!important;
  box-shadow:
    0 0 14px rgba(29,224,255,.18),
    0 0 30px rgba(169,92,255,.08),
    inset 0 0 18px rgba(255,255,255,.055)!important;
}
.player-card .actions .btn::before,
.player-card .actions a.btn::before{
  content:""!important;
  display:block!important;
  position:absolute!important;
  inset:-90% -70%!important;
  z-index:1!important;
  pointer-events:none!important;
  border-radius:inherit!important;
  background:
    radial-gradient(circle at 18% 44%,var(--lava-a,rgba(33,231,255,.76)),transparent 18%),
    radial-gradient(circle at 58% 24%,var(--lava-b,rgba(178,94,255,.62)),transparent 22%),
    radial-gradient(circle at 82% 70%,var(--lava-c,rgba(255,80,218,.52)),transparent 24%),
    radial-gradient(circle at 38% 84%,rgba(255,255,255,.22),transparent 18%),
    conic-gradient(from 0deg,transparent,rgba(255,255,255,.18),transparent,var(--lava-a,rgba(33,231,255,.48)),transparent,var(--lava-c,rgba(255,80,218,.34)),transparent)!important;
  filter:blur(5px) saturate(2.35) brightness(1.32)!important;
  opacity:.95!important;
  mix-blend-mode:screen!important;
  animation:wwcPhase2GLava 4.2s ease-in-out infinite alternate!important;
}
.player-card .actions .btn::after,
.player-card .actions a.btn::after{
  content:""!important;
  display:block!important;
  position:absolute!important;
  inset:1px!important;
  z-index:2!important;
  pointer-events:none!important;
  border-radius:inherit!important;
  background:
    linear-gradient(110deg,transparent 0 26%,rgba(255,255,255,.28) 43%,transparent 57% 100%),
    repeating-linear-gradient(90deg,transparent 0 9px,rgba(122,238,255,.10) 10px,transparent 14px)!important;
  background-size:260% 100%,100% 100%!important;
  opacity:.42!important;
  mix-blend-mode:screen!important;
  animation:wwcPhase2GSweep 2.75s linear infinite!important;
}
.player-card .actions .btn > *,
.player-card .actions a.btn > *{
  position:relative!important;
  z-index:4!important;
}
.player-card .action-ico,
.player-card .fire-emoji{
  filter:drop-shadow(0 0 8px rgba(255,255,255,.65)) drop-shadow(0 0 14px currentColor)!important;
}
.player-card .comment-toggle{--lava-a:rgba(25,229,255,.92);--lava-b:rgba(42,137,255,.54);--lava-c:rgba(255,255,255,.28)!important;}
.player-card .repost-btn{--lava-a:rgba(181,92,255,.90);--lava-b:rgba(39,229,255,.46);--lava-c:rgba(255,74,229,.58)!important;}
.player-card .share-btn{--lava-a:rgba(117,236,255,.76);--lava-b:rgba(104,124,255,.50);--lava-c:rgba(255,255,255,.24)!important;}
.player-card .open-btn{--lava-a:rgba(255,191,53,.82);--lava-b:rgba(255,234,98,.46);--lava-c:rgba(38,220,255,.34)!important;}

/* Fire button: keep the same real fire tile, but make it brighter and more alive. */
.player-card .fire-btn{
  --lava-a:rgba(255,235,90,.96);--lava-b:rgba(255,111,18,.86);--lava-c:rgba(255,29,0,.68)!important;
  background:
    radial-gradient(circle at 50% 36%,rgba(255,247,129,.46),rgba(255,129,24,.30) 34%,rgba(255,29,0,.16) 60%,rgba(11,13,26,.72) 78%),
    linear-gradient(180deg,rgba(255,190,55,.22),rgba(255,56,0,.10))!important;
  border-color:rgba(255,220,83,.92)!important;
  box-shadow:
    0 0 20px rgba(255,196,40,.56),
    0 0 44px rgba(255,83,0,.32),
    inset 0 0 26px rgba(255,214,89,.24)!important;
}
.player-card .fire-btn .fire-emoji{
  font-size:clamp(1.55rem,1.52vw,2.18rem)!important;
  animation:wwcPhase2GFlame .48s ease-in-out infinite alternate!important;
  filter:drop-shadow(0 0 7px rgba(255,255,255,.96)) drop-shadow(0 0 15px rgba(255,215,67,1)) drop-shadow(0 0 26px rgba(255,58,0,.95))!important;
}
.player-card .fire-btn .count-pill{
  color:#fff7c9!important;
  text-shadow:0 0 10px rgba(255,255,255,.72),0 0 22px rgba(255,102,0,.90)!important;
}

/* Comment section gets its own animated living panel, without changing the words. */
.player-card .comments,
.player-card .comment-form,
.player-card .comment-list,
.player-card .comment{
  position:relative!important;
  isolation:isolate!important;
}
.player-card .comments::before,
.player-card .comment-form::before,
.player-card .comment::before{
  content:""!important;
  position:absolute!important;
  inset:-2px!important;
  z-index:-1!important;
  pointer-events:none!important;
  border-radius:inherit!important;
  background:
    radial-gradient(circle at 12% 30%,rgba(26,226,255,.20),transparent 24%),
    radial-gradient(circle at 78% 62%,rgba(169,92,255,.22),transparent 28%),
    linear-gradient(90deg,rgba(25,226,255,.08),rgba(255,78,218,.08),rgba(25,226,255,.08))!important;
  background-size:180% 100%!important;
  filter:blur(4px)!important;
  opacity:.72!important;
  animation:wwcPhase2GCommentGlow 5.6s ease-in-out infinite alternate!important;
}
.player-card .comment-form input{
  overflow:hidden!important;
  text-overflow:ellipsis!important;
  border-color:rgba(24,229,255,.56)!important;
  box-shadow:0 0 18px rgba(24,229,255,.10),inset 0 0 22px rgba(24,229,255,.07)!important;
}
.player-card .comment-form .btn{
  min-width:52px!important;
  max-width:72px!important;
  white-space:nowrap!important;
}

/* Desktop / big screens: keep five action boxes in one row and guarantee Open SoundCloud is not chopped. */
@media (min-width:701px){
  .player-card .actions{
    grid-template-columns:minmax(76px,.72fr) minmax(92px,1fr) minmax(90px,1fr) minmax(78px,.88fr) minmax(132px,1.42fr)!important;
    gap:clamp(6px,.48vw,8px)!important;
  }
  .player-card .actions .btn,
  .player-card .actions a.btn{
    min-height:clamp(48px,3vw,58px)!important;
    padding:7px 8px!important;
    font-size:clamp(.62rem,.52vw,.82rem)!important;
    letter-spacing:0!important;
  }
  .player-card .open-btn{
    min-width:0!important;
    padding-left:8px!important;
    padding-right:8px!important;
    gap:5px!important;
  }
  .player-card .open-btn .action-label-stack{
    flex:1 1 auto!important;
    max-width:100%!important;
    overflow:visible!important;
    line-height:.92!important;
  }
  .player-card .open-btn .action-label-stack span{
    font-size:clamp(.58rem,.43vw,.74rem)!important;
    letter-spacing:-.025em!important;
    transform:none!important;
    overflow:visible!important;
  }
}
@media (min-width:1280px){
  .player-card .actions{
    grid-template-columns:minmax(82px,.72fr) minmax(104px,1.06fr) minmax(100px,1.02fr) minmax(90px,.90fr) minmax(152px,1.58fr)!important;
  }
  .player-card .open-btn .action-label-stack span{font-size:clamp(.60rem,.40vw,.76rem)!important;}
}

/* Mobile: fire stays full width like before; the 4 normal buttons are clean 2 and 2. */
@media (max-width:700px){
  .player-card .actions{
    display:grid!important;
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
    gap:7px!important;
  }
  .player-card .fire-btn{
    grid-column:1 / -1!important;
    min-height:60px!important;
  }
  .player-card .comment-toggle,
  .player-card .repost-btn,
  .player-card .share-btn,
  .player-card .open-btn{
    grid-column:auto!important;
    min-height:45px!important;
    display:inline-flex!important;
    align-items:center!important;
    justify-content:center!important;
    padding:7px 8px!important;
    gap:5px!important;
    font-size:.74rem!important;
    text-align:center!important;
  }
  .player-card .open-btn{
    flex-direction:row!important;
  }
  .player-card .open-btn .action-label-stack{
    max-width:100%!important;
    overflow:visible!important;
  }
  .player-card .open-btn .action-label-stack span{
    font-size:.70rem!important;
    line-height:.92!important;
    letter-spacing:-.02em!important;
  }
  .player-card .action-ico{font-size:.86rem!important;width:1em!important;min-width:1em!important;}
  .player-card .count-pill{font-size:.86em!important;min-width:1.2em!important;}
}

@keyframes wwcPhase2GLava{
  0%{transform:translate3d(-9%,-7%,0) rotate(0deg) scale(1);filter:blur(5px) saturate(2.1) hue-rotate(0deg);}
  33%{transform:translate3d(5%,4%,0) rotate(12deg) scale(1.14);filter:blur(4px) saturate(2.7) hue-rotate(18deg);}
  66%{transform:translate3d(-2%,9%,0) rotate(-10deg) scale(1.08);filter:blur(5px) saturate(2.4) hue-rotate(-16deg);}
  100%{transform:translate3d(10%,-2%,0) rotate(18deg) scale(1.16);filter:blur(4px) saturate(2.9) hue-rotate(24deg);}
}
@keyframes wwcPhase2GSweep{0%{background-position:240% 0,0 0;}100%{background-position:-160% 0,0 0;}}
@keyframes wwcPhase2GFlame{0%{transform:translateY(1px) scale(.96) rotate(-5deg);}55%{transform:translateY(-3px) scale(1.14) rotate(4deg);}100%{transform:translateY(-1px) scale(1.05) rotate(-2deg);}}
@keyframes wwcPhase2GCommentGlow{0%{background-position:0% 0;opacity:.50;}100%{background-position:100% 0;opacity:.86;}}
@media (prefers-reduced-motion:reduce){
  .player-card .actions .btn::before,
  .player-card .actions a.btn::before,
  .player-card .actions .btn::after,
  .player-card .actions a.btn::after,
  .player-card .comments::before,
  .player-card .comment-form::before,
  .player-card .comment::before,
  .player-card .fire-btn .fire-emoji{animation:none!important;}
}

/* PHASE 2H FINAL: keep everything inside the card, restore fire tile, add safe real-card tilt, and make the full border wrap the complete card. */
:root{
  --wwc-action-cyan:rgba(28,232,255,.92);
  --wwc-action-purple:rgba(176,91,255,.88);
  --wwc-action-pink:rgba(255,70,216,.78);
  --wwc-action-fire:rgba(255,114,16,.95);
  --wwc-action-gold:rgba(255,221,88,.94);
}

.cards,.players-grid,.player-list{
  max-width:100%!important;
  min-width:0!important;
  overflow:visible!important;
}

.player-card{
  position:relative!important;
  isolation:isolate!important;
  box-sizing:border-box!important;
  min-width:0!important;
  max-width:100%!important;
  overflow:hidden!important;
  border-radius:22px!important;
  padding:clamp(12px,1vw,16px)!important;
  transform-style:preserve-3d!important;
  transform:perspective(1100px) rotateX(var(--tilt-x,0deg)) rotateY(var(--tilt-y,0deg)) translateZ(0)!important;
  transition:transform .22s ease, filter .22s ease, box-shadow .22s ease!important;
  will-change:transform!important;
  background:
    radial-gradient(circle at var(--tilt-glow-x,50%) var(--tilt-glow-y,35%),rgba(255,255,255,.08),transparent 26%),
    linear-gradient(135deg,rgba(9,19,42,.94),rgba(18,18,55,.88) 52%,rgba(10,12,29,.94))!important;
  box-shadow:
    0 0 0 1px rgba(43,230,255,.38),
    0 0 28px rgba(28,232,255,.20),
    0 18px 58px rgba(0,0,0,.52),
    inset 0 0 34px rgba(34,229,255,.07)!important;
}
.player-card.card-tilting{
  filter:brightness(1.08) saturate(1.18)!important;
  box-shadow:
    0 0 0 1px rgba(78,241,255,.55),
    0 0 36px rgba(28,232,255,.32),
    0 20px 66px rgba(0,0,0,.58),
    inset 0 0 42px rgba(255,255,255,.08)!important;
}

/* Make the electric border live inside the card so it wraps the whole card and never floats outside/cuts the content. */
.player-card::before{
  inset:2px!important;
  border-radius:20px!important;
  z-index:1!important;
  pointer-events:none!important;
  opacity:.94!important;
}
.player-card .electric-svg,
.player-card > .electric-svg{
  inset:0!important;
  width:100%!important;
  height:100%!important;
  z-index:2!important;
  overflow:visible!important;
  opacity:.98!important;
  filter:drop-shadow(0 0 10px rgba(28,232,255,.82)) drop-shadow(0 0 26px rgba(176,91,255,.40))!important;
}
.player-card .electric-path.main{stroke-width:1.75!important;opacity:1!important;}
.player-card .electric-path.hot{stroke-width:1.15!important;opacity:.92!important;}
.player-card .electric-path.ghost{stroke-width:.62!important;opacity:.62!important;}
.player-card .electric-sparks,
.player-card > .electric-sparks{
  inset:0!important;
  z-index:2!important;
  overflow:hidden!important;
  border-radius:inherit!important;
}
.player-card > :not(.electric-svg):not(.electric-sparks){
  position:relative!important;
  z-index:5!important;
}

.card-top{
  display:grid!important;
  grid-template-columns:minmax(0,1fr) auto!important;
  gap:10px!important;
  align-items:start!important;
  width:100%!important;
  max-width:100%!important;
}
.card-title-wrap{min-width:0!important;max-width:100%!important;}
.player-card h3,.url-line,.owner-line{
  max-width:100%!important;
  overflow-wrap:anywhere!important;
  word-break:break-word!important;
}
.remove-btn{
  position:relative!important;
  top:auto!important;
  right:auto!important;
  justify-self:end!important;
  flex:0 0 auto!important;
  z-index:6!important;
}

.soundcloud-frame{
  width:100%!important;
  max-width:100%!important;
  min-width:0!important;
  overflow:hidden!important;
  border-radius:16px!important;
  box-sizing:border-box!important;
  transform:translateZ(0)!important;
  border:1px solid rgba(28,232,255,.28)!important;
  box-shadow:0 0 22px rgba(28,232,255,.16), inset 0 0 12px rgba(255,255,255,.05)!important;
}
.soundcloud-frame iframe{
  width:100%!important;
  max-width:100%!important;
  min-width:0!important;
  border:0!important;
  display:block!important;
  margin:0!important;
  border-radius:15px!important;
}

/* Desktop: five boxes stay inside the card. Open SoundCloud is two clean centered lines. */
.player-card .actions{
  width:100%!important;
  max-width:100%!important;
  min-width:0!important;
  box-sizing:border-box!important;
  display:grid!important;
  align-items:stretch!important;
  overflow:visible!important;
}
@media (min-width:701px){
  .player-card .actions{
    grid-template-columns:minmax(70px,.72fr) minmax(82px,1fr) minmax(82px,1fr) minmax(76px,.88fr) minmax(116px,1.42fr)!important;
    gap:clamp(5px,.42vw,8px)!important;
  }
}
@media (min-width:1280px){
  .player-card .actions{
    grid-template-columns:minmax(76px,.72fr) minmax(92px,1fr) minmax(92px,1fr) minmax(84px,.9fr) minmax(134px,1.55fr)!important;
  }
}
.player-card .actions .btn,
.player-card .actions a.btn{
  position:relative!important;
  isolation:isolate!important;
  min-width:0!important;
  width:100%!important;
  max-width:100%!important;
  box-sizing:border-box!important;
  min-height:clamp(46px,3.2vw,58px)!important;
  border-radius:13px!important;
  padding:7px clamp(5px,.5vw,9px)!important;
  display:inline-flex!important;
  align-items:center!important;
  justify-content:center!important;
  gap:clamp(3px,.35vw,6px)!important;
  text-align:center!important;
  overflow:hidden!important;
  white-space:nowrap!important;
  line-height:1!important;
  font-size:clamp(.58rem,.54vw,.82rem)!important;
  letter-spacing:-.01em!important;
  color:#f8fbff!important;
  border:1px solid rgba(255,255,255,.18)!important;
  background:rgba(10,17,38,.68)!important;
  box-shadow:0 0 18px rgba(28,232,255,.10), inset 0 0 20px rgba(255,255,255,.06)!important;
}
.player-card .actions .btn > *,
.player-card .actions a.btn > *{
  position:relative!important;
  z-index:5!important;
  flex:0 1 auto!important;
  min-width:0!important;
}
.player-card .action-ico{
  width:1em!important;
  min-width:1em!important;
  font-size:clamp(.72rem,.72vw,1rem)!important;
  display:inline-grid!important;
  place-items:center!important;
  line-height:1!important;
  flex:0 0 auto!important;
}
.player-card .action-label{
  display:inline-block!important;
  min-width:0!important;
  max-width:100%!important;
  overflow:hidden!important;
  text-overflow:clip!important;
  white-space:nowrap!important;
  line-height:1!important;
  text-align:center!important;
}
.player-card .count-pill{
  display:inline-grid!important;
  place-items:center!important;
  min-width:1.05em!important;
  line-height:1!important;
  font-size:.95em!important;
  white-space:nowrap!important;
  text-align:center!important;
}
.player-card .open-btn{
  gap:4px!important;
}
.player-card .open-btn .action-label-stack{
  display:grid!important;
  grid-template-rows:auto auto!important;
  gap:1px!important;
  align-items:center!important;
  justify-items:center!important;
  min-width:0!important;
  max-width:100%!important;
  overflow:visible!important;
  line-height:.88!important;
}
.player-card .open-btn .action-label-stack span{
  display:block!important;
  white-space:nowrap!important;
  overflow:visible!important;
  text-overflow:clip!important;
  text-align:center!important;
  font-size:clamp(.53rem,.42vw,.72rem)!important;
  line-height:.88!important;
  letter-spacing:-.03em!important;
}

/* Animated lava/water/electric overlays live inside normal action buttons, brighter but behind text. */
.player-card .actions .btn:not(.fire-btn)::before,
.player-card .actions a.btn:not(.fire-btn)::before{
  content:""!important;
  position:absolute!important;
  inset:-70% -60%!important;
  z-index:1!important;
  pointer-events:none!important;
  background:
    radial-gradient(circle at 18% 36%,var(--lava-a,rgba(28,232,255,.88)),transparent 18%),
    radial-gradient(circle at 68% 28%,var(--lava-b,rgba(176,91,255,.72)),transparent 22%),
    radial-gradient(circle at 50% 84%,var(--lava-c,rgba(255,70,216,.58)),transparent 28%),
    conic-gradient(from 0deg,transparent,rgba(255,255,255,.20),transparent,var(--lava-a,rgba(28,232,255,.52)),transparent,var(--lava-c,rgba(255,70,216,.35)),transparent)!important;
  filter:blur(5px) saturate(2.65) brightness(1.42)!important;
  opacity:.92!important;
  mix-blend-mode:screen!important;
  animation:wwcButtonLivingLava 4s ease-in-out infinite alternate!important;
}
.player-card .actions .btn:not(.fire-btn)::after,
.player-card .actions a.btn:not(.fire-btn)::after{
  content:""!important;
  position:absolute!important;
  inset:1px!important;
  z-index:2!important;
  pointer-events:none!important;
  border-radius:inherit!important;
  background:
    linear-gradient(112deg,transparent 0 24%,rgba(255,255,255,.34) 44%,transparent 58% 100%),
    repeating-linear-gradient(90deg,transparent 0 11px,rgba(28,232,255,.15) 12px,transparent 16px)!important;
  background-size:280% 100%,100% 100%!important;
  mix-blend-mode:screen!important;
  opacity:.58!important;
  animation:wwcButtonBrightSweep 2.35s linear infinite!important;
}
.player-card .comment-toggle{--lava-a:rgba(28,232,255,.95);--lava-b:rgba(48,154,255,.55);--lava-c:rgba(255,255,255,.28)!important;border-color:rgba(28,232,255,.42)!important;}
.player-card .repost-btn{--lava-a:rgba(186,92,255,.96);--lava-b:rgba(36,232,255,.50);--lava-c:rgba(255,70,216,.62)!important;border-color:rgba(186,92,255,.48)!important;}
.player-card .share-btn{--lava-a:rgba(116,235,255,.82);--lava-b:rgba(100,124,255,.58);--lava-c:rgba(255,255,255,.26)!important;border-color:rgba(116,235,255,.40)!important;}
.player-card .open-btn{--lava-a:rgba(255,189,48,.92);--lava-b:rgba(255,235,98,.50);--lava-c:rgba(32,232,255,.38)!important;border-color:rgba(255,190,58,.55)!important;}

/* Restore the fire tile as fire, not lava. */
.player-card .fire-btn{
  flex-direction:column!important;
  gap:2px!important;
  min-height:clamp(54px,3.5vw,66px)!important;
  border:1px solid rgba(255,214,74,.95)!important;
  background:
    radial-gradient(circle at 50% 58%,rgba(255,255,179,.72),rgba(255,184,41,.48) 22%,rgba(255,84,0,.32) 46%,rgba(76,13,0,.20) 68%,rgba(10,12,25,.80) 100%),
    linear-gradient(180deg,rgba(255,150,29,.22),rgba(255,40,0,.14))!important;
  box-shadow:
    0 0 20px rgba(255,186,38,.70),
    0 0 42px rgba(255,82,0,.46),
    inset 0 0 28px rgba(255,221,74,.28)!important;
}
.player-card .fire-btn::before{
  content:""!important;
  position:absolute!important;
  left:10%!important;right:10%!important;bottom:6px!important;top:auto!important;
  height:64%!important;
  z-index:1!important;
  pointer-events:none!important;
  border-radius:46% 46% 34% 34%!important;
  background:
    radial-gradient(circle at 50% 78%,rgba(255,255,207,.96),rgba(255,220,61,.82) 22%,rgba(255,103,9,.58) 48%,transparent 70%),
    linear-gradient(180deg,rgba(255,255,255,.72),rgba(255,206,50,.64),rgba(255,72,0,.38),transparent)!important;
  clip-path:polygon(50% 0%,62% 30%,75% 9%,71% 46%,93% 27%,78% 76%,60% 100%,50% 70%,36% 100%,22% 76%,8% 31%,30% 49%,27% 8%,42% 32%)!important;
  filter:blur(.5px) drop-shadow(0 0 10px rgba(255,221,61,1)) drop-shadow(0 0 22px rgba(255,66,0,.96))!important;
  mix-blend-mode:screen!important;
  opacity:.82!important;
  animation:wwcRealFlameTile 650ms ease-in-out infinite alternate!important;
}
.player-card .fire-btn::after{
  content:""!important;
  position:absolute!important;
  inset:-5px!important;
  z-index:0!important;
  pointer-events:none!important;
  border-radius:inherit!important;
  background:radial-gradient(circle at 50% 62%,rgba(255,211,67,.50),rgba(255,75,0,.24) 42%,transparent 72%)!important;
  filter:blur(8px) saturate(1.8)!important;
  opacity:.92!important;
  animation:wwcFireAuraPulse 1s ease-in-out infinite alternate!important;
}
.player-card .fire-btn .fire-emoji{
  z-index:4!important;
  font-size:clamp(1.65rem,1.65vw,2.28rem)!important;
  line-height:.9!important;
  filter:drop-shadow(0 0 9px rgba(255,255,255,.95)) drop-shadow(0 0 17px rgba(255,215,72,1)) drop-shadow(0 0 30px rgba(255,59,0,1))!important;
  animation:wwcFireEmojiAlive .55s ease-in-out infinite alternate!important;
}
.player-card .fire-btn .count-pill{
  z-index:4!important;
  color:#fff7c6!important;
  font-weight:1000!important;
  text-shadow:0 0 10px rgba(255,255,255,.88),0 0 21px rgba(255,89,0,1)!important;
}

/* Comment area stays inside the card and gets living glow, not layout shift. */
.player-card .comments{
  width:100%!important;
  max-width:100%!important;
  min-width:0!important;
  box-sizing:border-box!important;
  overflow:hidden!important;
  border-radius:14px!important;
  margin-top:10px!important;
}
.player-card .comment-form{
  width:100%!important;
  max-width:100%!important;
  min-width:0!important;
  box-sizing:border-box!important;
  display:grid!important;
  grid-template-columns:minmax(0,1fr) minmax(48px,62px)!important;
  gap:8px!important;
  align-items:stretch!important;
  overflow:hidden!important;
}
.player-card .comment-form input{
  min-width:0!important;
  width:100%!important;
  max-width:100%!important;
  box-sizing:border-box!important;
  overflow:hidden!important;
  text-overflow:ellipsis!important;
}
.player-card .comment-list,.player-card .comment{
  width:100%!important;
  max-width:100%!important;
  min-width:0!important;
  box-sizing:border-box!important;
  overflow-wrap:anywhere!important;
}
.player-card .comments::before,
.player-card .comment-form::before,
.player-card .comment::before{
  opacity:.84!important;
  filter:blur(5px) saturate(1.55)!important;
}

/* Mobile: restore 2 and 2 normal button alignment, fire full width, everything centered. */
@media (max-width:700px){
  .player-card{border-radius:18px!important;padding:12px!important;overflow:hidden!important;transform:none!important;}
  .player-card .electric-svg{inset:0!important;width:100%!important;height:100%!important;}
  .soundcloud-frame iframe,.player-card[data-type="song"] .soundcloud-frame iframe{height:168px!important;}
  .player-card .actions{
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
    gap:7px!important;
    width:100%!important;
  }
  .player-card .fire-btn{
    grid-column:1 / -1!important;
    min-height:58px!important;
  }
  .player-card .comment-toggle,
  .player-card .repost-btn,
  .player-card .share-btn,
  .player-card .open-btn{
    grid-column:auto!important;
    min-height:45px!important;
    display:inline-flex!important;
    align-items:center!important;
    justify-content:center!important;
    text-align:center!important;
    padding:7px 8px!important;
    gap:4px!important;
    font-size:.72rem!important;
  }
  .player-card .open-btn .action-label-stack span{font-size:.68rem!important;line-height:.9!important;}
  .player-card .action-ico{font-size:.82rem!important;width:1em!important;min-width:1em!important;}
  .player-card .comment-form{grid-template-columns:minmax(0,1fr) minmax(48px,58px)!important;}
}

@keyframes wwcButtonLivingLava{
  0%{transform:translate3d(-10%,-8%,0) rotate(0deg) scale(1);filter:blur(5px) saturate(2.3) hue-rotate(0deg)}
  35%{transform:translate3d(8%,3%,0) rotate(14deg) scale(1.13);filter:blur(4px) saturate(2.9) hue-rotate(22deg)}
  70%{transform:translate3d(-3%,10%,0) rotate(-12deg) scale(1.08);filter:blur(5px) saturate(2.5) hue-rotate(-15deg)}
  100%{transform:translate3d(11%,-2%,0) rotate(18deg) scale(1.18);filter:blur(4px) saturate(3.05) hue-rotate(26deg)}
}
@keyframes wwcButtonBrightSweep{0%{background-position:260% 0,0 0}100%{background-position:-170% 0,0 0}}
@keyframes wwcRealFlameTile{0%{transform:translateY(2px) scale(.94) skewX(-4deg);opacity:.74}55%{transform:translateY(-3px) scale(1.14) skewX(4deg);opacity:.96}100%{transform:translateY(-1px) scale(1.04) skewX(-2deg);opacity:.86}}
@keyframes wwcFireAuraPulse{from{opacity:.58;transform:scale(.95)}to{opacity:1;transform:scale(1.08)}}
@keyframes wwcFireEmojiAlive{0%{transform:translateY(1px) scale(.96) rotate(-5deg)}55%{transform:translateY(-4px) scale(1.16) rotate(5deg)}100%{transform:translateY(-1px) scale(1.06) rotate(-2deg)}}
@media (prefers-reduced-motion:reduce){
  .player-card{transform:none!important;transition:none!important;}
  .player-card .actions .btn::before,
  .player-card .actions a.btn::before,
  .player-card .actions .btn::after,
  .player-card .actions a.btn::after,
  .player-card .fire-btn::before,
  .player-card .fire-btn::after,
  .player-card .fire-btn .fire-emoji{animation:none!important;}
}


/* PHASE 2I: correct Open SoundCloud cutoff + restore realistic fire reaction and fire-burst layer. */
.player-card .actions,
.player-card .actions *{box-sizing:border-box!important;}
.player-card .actions{width:100%!important;max-width:100%!important;min-width:0!important;overflow:visible!important;align-items:stretch!important;}
.player-card .actions .btn,
.player-card .actions a.btn{
  position:relative!important;
  overflow:hidden!important;
  isolation:isolate!important;
  min-width:0!important;
  max-width:100%!important;
  white-space:normal!important;
  word-break:normal!important;
  overflow-wrap:normal!important;
}
.player-card .actions .btn > *,
.player-card .actions a.btn > *{position:relative!important;z-index:6!important;}

/* Big-screen card action row: five boxes stay inside, Open SoundCloud always fits as two centered lines. */
@media (min-width:701px){
  .player-card .actions{
    display:grid!important;
    grid-template-columns:minmax(58px,.66fr) minmax(62px,.82fr) minmax(62px,.82fr) minmax(58px,.78fr) minmax(82px,1.12fr)!important;
    gap:clamp(5px,.42vw,8px)!important;
  }
  .player-card .actions .btn,
  .player-card .actions a.btn{
    min-height:clamp(48px,3vw,58px)!important;
    padding:6px 6px!important;
    font-size:clamp(.52rem,.46vw,.72rem)!important;
    letter-spacing:-.02em!important;
    line-height:1!important;
    display:flex!important;align-items:center!important;justify-content:center!important;gap:3px!important;
  }
  .player-card .comment-toggle .action-label,
  .player-card .repost-btn .action-label,
  .player-card .share-btn .action-label{font-size:clamp(.55rem,.48vw,.74rem)!important;line-height:1!important;}
  .player-card .action-ico{font-size:clamp(.66rem,.55vw,.9rem)!important;width:1em!important;min-width:1em!important;line-height:1!important;}
  .player-card .count-pill{font-size:clamp(.58rem,.52vw,.78rem)!important;min-width:.9em!important;line-height:1!important;}
  .player-card .open-btn{padding:5px 4px!important;gap:2px!important;flex-direction:row!important;}
  .player-card .open-btn .action-ico-open{font-size:clamp(.58rem,.48vw,.74rem)!important;flex:0 0 auto!important;}
  .player-card .open-btn .action-label-stack{
    display:grid!important;grid-template-rows:auto auto!important;gap:0!important;place-items:center!important;
    min-width:0!important;width:100%!important;max-width:100%!important;overflow:visible!important;line-height:.84!important;
  }
  .player-card .open-btn .action-label-stack span{
    display:block!important;white-space:nowrap!important;max-width:100%!important;overflow:visible!important;text-overflow:clip!important;
    font-size:clamp(.48rem,.38vw,.62rem)!important;line-height:.86!important;letter-spacing:-.045em!important;text-align:center!important;
  }
}
@media (min-width:1500px){
  .player-card .actions{grid-template-columns:minmax(70px,.68fr) minmax(82px,.88fr) minmax(82px,.88fr) minmax(72px,.82fr) minmax(106px,1.20fr)!important;}
  .player-card .open-btn .action-label-stack span{font-size:clamp(.55rem,.34vw,.72rem)!important;letter-spacing:-.035em!important;}
}

/* Mobile returns to a clean 2x2 normal-button layout, fire full width, all text/icons centered. */
@media (max-width:700px){
  .player-card .actions{display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:7px!important;}
  .player-card .fire-btn{grid-column:1/-1!important;min-height:58px!important;}
  .player-card .comment-toggle,.player-card .repost-btn,.player-card .share-btn,.player-card .open-btn{
    grid-column:auto!important;min-height:45px!important;display:flex!important;align-items:center!important;justify-content:center!important;text-align:center!important;
    padding:7px 6px!important;gap:4px!important;font-size:.70rem!important;line-height:1!important;
  }
  .player-card .comment-toggle .action-label,.player-card .repost-btn .action-label,.player-card .share-btn .action-label{font-size:.70rem!important;}
  .player-card .open-btn .action-label-stack span{font-size:.62rem!important;line-height:.86!important;letter-spacing:-.035em!important;}
  .player-card .action-ico{font-size:.80rem!important;width:1em!important;min-width:1em!important;}
  .player-card .count-pill{font-size:.70rem!important;min-width:.9em!important;}
}

/* Stronger living button overlay, bright and in front enough to see, but behind the words. */
.player-card .actions .btn:not(.fire-btn)::before,
.player-card .actions a.btn:not(.fire-btn)::before{
  content:""!important;position:absolute!important;inset:-65% -55%!important;z-index:1!important;pointer-events:none!important;
  background:
    radial-gradient(circle at 20% 34%,var(--lava-a,rgba(33,235,255,.98)),transparent 18%),
    radial-gradient(circle at 70% 28%,var(--lava-b,rgba(186,92,255,.92)),transparent 23%),
    radial-gradient(circle at 48% 80%,var(--lava-c,rgba(255,60,220,.78)),transparent 29%),
    conic-gradient(from 0deg,rgba(255,255,255,.16),transparent 18%,var(--lava-a,rgba(33,235,255,.50)),transparent 46%,var(--lava-c,rgba(255,60,220,.42)),transparent 78%,rgba(255,255,255,.12));
  filter:blur(4px) saturate(3.05) brightness(1.65)!important;opacity:.88!important;mix-blend-mode:screen!important;
  animation:wwcV6LivingLiquid 3.15s ease-in-out infinite alternate!important;
}
.player-card .actions .btn:not(.fire-btn)::after,
.player-card .actions a.btn:not(.fire-btn)::after{
  content:""!important;position:absolute!important;inset:1px!important;z-index:2!important;pointer-events:none!important;border-radius:inherit!important;
  background:linear-gradient(115deg,transparent 0 22%,rgba(255,255,255,.42) 44%,transparent 62% 100%);
  background-size:260% 100%!important;mix-blend-mode:screen!important;opacity:.62!important;animation:wwcV6ButtonSweep 1.65s linear infinite!important;
}
.player-card .comment-toggle{--lava-a:rgba(37,235,255,1);--lava-b:rgba(54,160,255,.80);--lava-c:rgba(255,255,255,.40);}
.player-card .repost-btn{--lava-a:rgba(190,90,255,1);--lava-b:rgba(34,232,255,.78);--lava-c:rgba(255,55,216,.88);}
.player-card .share-btn{--lava-a:rgba(112,238,255,.98);--lava-b:rgba(96,116,255,.75);--lava-c:rgba(255,255,255,.34);}
.player-card .open-btn{--lava-a:rgba(255,199,50,1);--lava-b:rgba(255,235,92,.78);--lava-c:rgba(34,232,255,.62);}

/* Realistic fire reaction tile, contained inside the card, with real flame layers. */
.player-card .fire-btn{
  flex-direction:column!important;gap:2px!important;overflow:hidden!important;
  background:
    radial-gradient(circle at 50% 65%,rgba(255,255,175,.82),rgba(255,186,36,.60) 22%,rgba(255,83,0,.36) 45%,rgba(65,8,0,.22) 70%,rgba(8,11,28,.78) 100%)!important;
  border:1px solid rgba(255,205,68,.98)!important;
  box-shadow:0 0 18px rgba(255,202,45,.72),0 0 40px rgba(255,64,0,.55),inset 0 0 30px rgba(255,230,91,.25)!important;
}
.player-card .fire-btn .fire-real{position:relative!important;display:block!important;width:34px!important;height:34px!important;z-index:5!important;filter:drop-shadow(0 0 8px #fff2a2) drop-shadow(0 0 18px #ff6a00) drop-shadow(0 0 30px #ff2400)!important;animation:wwcV6FireBob .48s ease-in-out infinite alternate!important;}
.player-card .fire-btn .fire-real i,.player-card .fire-btn .fire-real em{position:absolute!important;left:50%!important;bottom:1px!important;display:block!important;transform-origin:50% 100%!important;}
.player-card .fire-btn .fire-real i:nth-child(1){width:28px;height:34px;margin-left:-14px;background:linear-gradient(180deg,#fff7b6 0%,#ffd447 28%,#ff7a05 62%,#f32900 100%);clip-path:polygon(50% 0,66% 28%,82% 12%,75% 52%,96% 34%,78% 84%,57% 100%,50% 74%,37% 100%,20% 83%,5% 36%,28% 52%,24% 13%,40% 30%);filter:blur(.2px);animation:wwcV6FlameA .62s ease-in-out infinite alternate;}
.player-card .fire-btn .fire-real i:nth-child(2){width:18px;height:27px;margin-left:-9px;background:linear-gradient(180deg,#ffffff 0%,#ffe86f 30%,#ff9717 70%,rgba(255,60,0,.30) 100%);clip-path:polygon(50% 0,61% 34%,78% 19%,68% 62%,84% 47%,65% 100%,50% 78%,34% 100%,17% 49%,33% 62%,25% 20%,42% 35%);mix-blend-mode:screen;animation:wwcV6FlameB .52s ease-in-out infinite alternate-reverse;}
.player-card .fire-btn .fire-real i:nth-child(3){width:12px;height:20px;margin-left:-6px;background:linear-gradient(180deg,#fff 0%,#fff6a2 38%,#ffbd2e 72%,rgba(255,85,0,.1) 100%);clip-path:polygon(50% 0,65% 32%,81% 20%,65% 72%,50% 100%,34% 72%,19% 22%,36% 34%);mix-blend-mode:screen;animation:wwcV6FlameC .44s ease-in-out infinite alternate;}
.player-card .fire-btn .fire-real em{width:42px;height:14px;margin-left:-21px;border-radius:50%;background:radial-gradient(ellipse at center,rgba(255,218,54,.88),rgba(255,75,0,.44) 48%,transparent 72%);filter:blur(4px);animation:wwcV6FireBase .8s ease-in-out infinite alternate;}
.player-card .fire-btn .count-pill{z-index:7!important;color:#fff8c8!important;text-shadow:0 0 8px #fff,0 0 17px #ff7500,0 0 26px #ff2600!important;font-weight:1000!important;}
.player-card .fire-btn.fire-struck{animation:wwcV6FireStrike .55s ease-out 1!important;}

@keyframes wwcV6LivingLiquid{0%{transform:translate(-8%,-7%) rotate(0) scale(1);filter:blur(4px) saturate(2.8) brightness(1.45) hue-rotate(0)}50%{transform:translate(7%,6%) rotate(16deg) scale(1.16);filter:blur(3px) saturate(3.5) brightness(1.85) hue-rotate(22deg)}100%{transform:translate(10%,-2%) rotate(-14deg) scale(1.08);filter:blur(4px) saturate(3.1) brightness(1.65) hue-rotate(-18deg)}}
@keyframes wwcV6ButtonSweep{0%{background-position:240% 0}100%{background-position:-160% 0}}
@keyframes wwcV6FireBob{from{transform:translateY(2px) scale(.98) rotate(-2deg)}to{transform:translateY(-3px) scale(1.08) rotate(2deg)}}
@keyframes wwcV6FlameA{from{transform:scaleX(.92) skewX(-4deg);opacity:.88}to{transform:scaleX(1.08) skewX(4deg);opacity:1}}
@keyframes wwcV6FlameB{from{transform:translateY(1px) scale(.9) skewX(5deg);opacity:.78}to{transform:translateY(-3px) scale(1.15) skewX(-5deg);opacity:1}}
@keyframes wwcV6FlameC{from{transform:translateY(2px) scale(.85);opacity:.70}to{transform:translateY(-4px) scale(1.2);opacity:1}}
@keyframes wwcV6FireBase{from{opacity:.45;transform:scaleX(.8)}to{opacity:.95;transform:scaleX(1.15)}}
@keyframes wwcV6FireStrike{0%{filter:brightness(1) saturate(1)}35%{filter:brightness(1.8) saturate(2.4);box-shadow:0 0 26px #fff174,0 0 58px #ff5b00,0 0 88px #ff1600}100%{filter:brightness(1) saturate(1)}}
@media (prefers-reduced-motion:reduce){.player-card .fire-btn .fire-real,.player-card .fire-btn .fire-real *,.player-card .actions .btn::before,.player-card .actions .btn::after,.player-card .actions a.btn::before,.player-card .actions a.btn::after{animation:none!important;}}

/* =========================================================
   V17 FOCUSED STABLE RESTORE
   Purpose: fix the broken orange overlay, remove the two hidden/ghost dots,
   and restore clean circular stat icons on desktop + mobile.
   This does not change posting, data, comments, reposts, SoundCloud, or login.
   ========================================================= */

/* kill every giant orange/newest/fire overlay that was accidentally created by later patches */
.wwc-screen-fire-burst,
.publish-screen-effect.fire,
.fire-screen-overlay,
.fire-burst-overlay,
.newest-fire-overlay,
.player-card .giant-fire-overlay,
.player-card .fire-overlay,
.player-card .newest-overlay {
  display:none!important;
  opacity:0!important;
  visibility:hidden!important;
  pointer-events:none!important;
}

/* newest should be a small orange attached tab above the newest card only */
.player-card.newest-card{overflow:visible!important;}
.player-card.newest-card::after{
  content:'★ NEWEST'!important;
  position:absolute!important;
  top:-16px!important;
  left:18px!important;
  width:auto!important;
  min-width:0!important;
  min-height:0!important;
  padding:7px 14px 6px!important;
  border-radius:14px 14px 10px 10px!important;
  background:linear-gradient(180deg,#ffcc46 0%, #ff9320 38%, #ff6200 100%)!important;
  border:1px solid rgba(255,240,162,.92)!important;
  color:#fff6cf!important;
  font-size:.76rem!important;
  font-weight:1000!important;
  letter-spacing:.09em!important;
  line-height:1!important;
  text-transform:uppercase!important;
  text-shadow:0 0 8px rgba(255,255,255,.55),0 0 14px rgba(255,125,0,.55)!important;
  box-shadow:0 12px 24px rgba(255,105,0,.24),0 0 20px rgba(255,153,0,.32), inset 0 1px 0 rgba(255,255,255,.45)!important;
  z-index:20!important;
  pointer-events:none!important;
  opacity:1!important;
}
.player-card.newest-card::before{content:none!important;}

/* remove the actual faint ghost graphics/images behind the layers */
.empty img,
.footer img,
.ghost-logo,
.ghost-icon,
.old-stat-icon,
.old-hidden-icon,
.hidden-stat-icon,
.canvas-ghost,
.canvas-bead {
  display:none!important;
  opacity:0!important;
  visibility:hidden!important;
  pointer-events:none!important;
}

/* protect against canvas bead/dot artifacts looking like hidden duplicate icons */
#wwcCanvasShell.ghostless,
body.v17-no-ghosts #wwcCanvasShell { pointer-events:none!important; }

/* restore clean stat boxes with one circular icon only */
#statsBar.stats{
  display:grid!important;
  grid-template-columns:repeat(4,minmax(0,1fr))!important;
  gap:16px!important;
  align-items:stretch!important;
}
#statsBar.stats span{
  position:relative!important;
  min-height:82px!important;
  padding:12px 18px!important;
  display:grid!important;
  grid-template-columns:58px minmax(0,1fr)!important;
  grid-template-rows:auto auto!important;
  align-items:center!important;
  justify-items:start!important;
  column-gap:14px!important;
  row-gap:1px!important;
  text-align:left!important;
  overflow:hidden!important;
  border-radius:16px!important;
  background:linear-gradient(145deg,rgba(8,21,48,.78),rgba(19,14,49,.66))!important;
  border:1px solid rgba(122,228,255,.20)!important;
}
#statsBar.stats span::before{
  grid-column:1!important;
  grid-row:1/3!important;
  width:50px!important;
  height:50px!important;
  min-width:50px!important;
  min-height:50px!important;
  border-radius:50%!important;
  display:grid!important;
  place-items:center!important;
  margin:0!important;
  line-height:1!important;
  border:2px solid currentColor!important;
  box-shadow:0 0 22px currentColor, inset 0 0 14px rgba(255,255,255,.09)!important;
  background:radial-gradient(circle at 50% 40%,rgba(255,255,255,.12),rgba(0,0,0,.10))!important;
  z-index:2!important;
}
#statsBar.stats span:nth-child(1)::before{content:'👥'!important;color:#20dfff!important;}
#statsBar.stats span:nth-child(2)::before{content:'👁'!important;color:#b45cff!important;}
#statsBar.stats span:nth-child(3)::before{content:'♫'!important;color:#20dfff!important;}
#statsBar.stats span:nth-child(4)::before{content:'▭'!important;color:#ff4eda!important;}

/* stat text split safely even if JS writes "1 total" as text */
#statsBar.stats span{font-size:clamp(.95rem,1vw,1.08rem)!important;font-weight:900!important;color:#f6fbff!important;text-shadow:0 0 10px rgba(255,255,255,.28)!important;}

/* mobile: 2 and 2, circular icons, nothing stretched or cut off */
@media (max-width:700px){
  #statsBar.stats{grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:10px!important;}
  #statsBar.stats span{
    min-height:88px!important;
    padding:12px!important;
    grid-template-columns:52px minmax(0,1fr)!important;
    column-gap:10px!important;
    justify-items:start!important;
    align-items:center!important;
    font-size:.88rem!important;
    line-height:1.05!important;
  }
  #statsBar.stats span::before{
    width:46px!important;height:46px!important;min-width:46px!important;min-height:46px!important;
    font-size:1.05rem!important;
  }
  .cards{grid-template-columns:1fr!important;}
  .player-card{max-width:100%!important;overflow:hidden!important;}
}


/* v18 focused fix: hard-remove any accidental giant orange fire oval overlays */
.player-card [class*='overlay'],
.player-card [class*='burst-overlay'],
.player-card [class*='screen-fire'],
.player-card [class*='newest-overlay']{
  display:none!important;
}
.player-card canvas.overlay,
.player-card .fire-screen-overlay,
.player-card .wwc-screen-fire-burst{
  display:none!important;
}


/* v19 focused fix: newest is ONLY a small tab; never a large orange/card overlay */
.player-card.newest-card::before{content:none!important;display:none!important;opacity:0!important;visibility:hidden!important;}
.player-card.newest-card::after{
  content:'★ NEWEST'!important;
  position:absolute!important;
  top:-18px!important;
  left:18px!important;
  display:inline-flex!important;
  align-items:center!important;
  justify-content:center!important;
  width:auto!important;
  height:auto!important;
  max-width:max-content!important;
  padding:7px 14px!important;
  border-radius:14px 14px 10px 10px!important;
  background:linear-gradient(180deg,#ffc947 0%,#ff8e18 52%,#ff6000 100%)!important;
  border:1px solid rgba(255,231,151,.95)!important;
  color:#fff8df!important;
  font-size:.76rem!important;
  font-weight:1000!important;
  letter-spacing:.08em!important;
  line-height:1!important;
  text-transform:uppercase!important;
  text-shadow:0 0 8px rgba(255,255,255,.65),0 0 16px rgba(255,115,0,.70)!important;
  box-shadow:0 8px 18px rgba(255,102,0,.26),0 0 18px rgba(255,158,29,.42),inset 0 1px 0 rgba(255,255,255,.42)!important;
  z-index:45!important;
  pointer-events:none!important;
  opacity:1!important;
  transform:none!important;
}
.player-card .newest-overlay,.player-card .newest-fire-overlay,.player-card .fire-overlay,.player-card .giant-fire-overlay,.player-card .orange-orb,.player-card .fire-orb,.player-card .latest-overlay,.player-card .card-fire-overlay,.player-card .soundcard-newest-overlay{display:none!important;opacity:0!important;visibility:hidden!important;pointer-events:none!important;}


/* =========================================================
   V20 FOCUSED NEWEST TAB FIX
   Positive: show one small orange NEWEST tab above newest player only.
   Negative: no giant orange oval, no pseudo-element card overlay, no stretched tab.
   ========================================================= */
.player-card.newest-card{
  position:relative!important;
  overflow:visible!important;
}
.player-card.newest-card::after{
  content:none!important;
  display:none!important;
  opacity:0!important;
  visibility:hidden!important;
  inset:auto!important;
  width:0!important;
  height:0!important;
  min-width:0!important;
  min-height:0!important;
  padding:0!important;
  margin:0!important;
  border:0!important;
  box-shadow:none!important;
  background:none!important;
  transform:none!important;
  pointer-events:none!important;
}
.player-card.newest-card::before{
  content:none!important;
  display:none!important;
  opacity:0!important;
  visibility:hidden!important;
  pointer-events:none!important;
}
.player-card .newest-tab{
  display:none!important;
}
.player-card.newest-card > .newest-tab{
  position:absolute!important;
  display:inline-flex!important;
  align-items:center!important;
  justify-content:center!important;
  gap:6px!important;
  top:-18px!important;
  left:18px!important;
  z-index:80!important;
  width:auto!important;
  height:auto!important;
  min-width:0!important;
  min-height:0!important;
  max-width:max-content!important;
  padding:7px 14px 6px!important;
  border-radius:12px 12px 10px 10px!important;
  background:linear-gradient(180deg,#ffd35a 0%,#ff9a20 45%,#ff6700 100%)!important;
  border:1px solid rgba(255,235,165,.95)!important;
  color:#fff8df!important;
  font-size:.75rem!important;
  font-weight:1000!important;
  font-family:inherit!important;
  line-height:1!important;
  letter-spacing:.09em!important;
  text-transform:uppercase!important;
  white-space:nowrap!important;
  text-shadow:0 0 8px rgba(255,255,255,.70),0 0 14px rgba(255,112,0,.76)!important;
  box-shadow:0 7px 18px rgba(255,102,0,.28),0 0 20px rgba(255,155,35,.42),inset 0 1px 0 rgba(255,255,255,.48)!important;
  pointer-events:none!important;
  opacity:1!important;
  transform:none!important;
  filter:none!important;
  mix-blend-mode:normal!important;
}
.player-card.newest-card > .newest-tab::before{
  content:'★'!important;
  display:inline-block!important;
  color:#fff5c9!important;
  font-size:.72rem!important;
  line-height:1!important;
}
.player-card.newest-card > .newest-tab::after{
  content:''!important;
  position:absolute!important;
  left:18px!important;
  bottom:-6px!important;
  width:12px!important;
  height:12px!important;
  background:linear-gradient(180deg,#ff9720 0%,#ff6900 100%)!important;
  transform:rotate(45deg)!important;
  border-right:1px solid rgba(255,235,165,.80)!important;
  border-bottom:1px solid rgba(255,235,165,.80)!important;
  border-radius:2px!important;
  z-index:-1!important;
}
.player-card .newest-overlay,
.player-card .newest-fire-overlay,
.player-card .latest-overlay,
.player-card .orange-orb,
.player-card .fire-orb,
.player-card .card-fire-overlay,
.player-card .soundcard-newest-overlay,
.player-card .giant-fire-overlay,
.player-card .fire-overlay,
.player-card [class*="newest-overlay"],
.player-card [class*="orange-orb"],
.player-card [class*="giant-fire"]{
  display:none!important;
  opacity:0!important;
  visibility:hidden!important;
  width:0!important;
  height:0!important;
  pointer-events:none!important;
}
@media (max-width:700px){
  .player-card.newest-card > .newest-tab{
    top:-14px!important;
    left:14px!important;
    padding:6px 11px 5px!important;
    font-size:.68rem!important;
  }
}


/* =========================================================
   V21 WWCFAM NETWORK MENU + PROMO FLYER
   Clean external menu links and mobile-safe promo flyer section.
   ========================================================= */
.nav a{
  min-width:0!important;
  overflow:hidden!important;
  text-overflow:ellipsis!important;
  white-space:nowrap!important;
}
.nav a[target="_blank"]::after{
  content:'↗';
  flex:0 0 auto;
  margin-left:12px;
  color:#20dfff;
  text-shadow:0 0 12px rgba(32,223,255,.75);
  font-size:.88em;
}
.promo-flyer{
  position:relative!important;
  isolation:isolate!important;
  margin-top:16px!important;
  overflow:visible!important;
  background:
    radial-gradient(circle at 14% 24%,rgba(32,223,255,.16),transparent 32%),
    radial-gradient(circle at 82% 28%,rgba(255,78,218,.15),transparent 34%),
    linear-gradient(145deg,rgba(5,18,42,.84),rgba(20,7,45,.76))!important;
}
.promo-flyer::before{
  content:'';
  position:absolute;
  inset:10px;
  border-radius:22px;
  border:1px solid rgba(32,223,255,.18);
  pointer-events:none;
  box-shadow:inset 0 0 38px rgba(32,223,255,.08),0 0 34px rgba(169,92,255,.08);
  z-index:-1;
}
.promo-flyer-head{
  display:grid!important;
  gap:8px!important;
  text-align:center!important;
  max-width:860px!important;
  margin:0 auto 20px!important;
}
.promo-flyer h2{
  margin:0!important;
  font-size:clamp(2rem,4vw,4.2rem)!important;
  line-height:.96!important;
  letter-spacing:-.05em!important;
  color:#f5fbff!important;
  text-shadow:0 0 20px rgba(32,223,255,.34),0 0 42px rgba(169,92,255,.22)!important;
}
.promo-link-grid{
  display:grid!important;
  grid-template-columns:repeat(4,minmax(0,1fr))!important;
  gap:14px!important;
  align-items:stretch!important;
}
.promo-link-card{
  min-width:0!important;
  display:grid!important;
  place-items:center!important;
  gap:8px!important;
  min-height:150px!important;
  padding:18px 12px!important;
  text-align:center!important;
  text-decoration:none!important;
  border-radius:20px!important;
  border:1px solid rgba(117,226,255,.25)!important;
  background:linear-gradient(145deg,rgba(6,21,48,.82),rgba(18,11,49,.68))!important;
  box-shadow:0 0 24px rgba(32,223,255,.10),inset 0 0 24px rgba(255,255,255,.035)!important;
  color:#f4fbff!important;
  overflow:hidden!important;
  position:relative!important;
  transform:translateZ(0);
}
.promo-link-card::before{
  content:'';
  position:absolute;
  inset:-45%;
  background:conic-gradient(from 90deg,transparent,rgba(32,223,255,.22),transparent,rgba(255,78,218,.18),transparent);
  opacity:.56;
  animation:wwcPromoSpin 9s linear infinite;
  pointer-events:none;
}
.promo-link-card > *{position:relative;z-index:1;min-width:0;max-width:100%;}
.promo-link-card .promo-icon{
  width:54px!important;
  height:54px!important;
  border-radius:999px!important;
  display:grid!important;
  place-items:center!important;
  font-size:1.6rem!important;
  background:rgba(0,0,0,.22)!important;
  border:1px solid rgba(255,255,255,.20)!important;
  box-shadow:0 0 22px rgba(32,223,255,.22)!important;
}
.promo-link-card strong{
  font-size:clamp(1.02rem,1.3vw,1.34rem)!important;
  line-height:1.05!important;
  letter-spacing:.02em!important;
  text-transform:uppercase!important;
  overflow-wrap:anywhere!important;
}
.promo-link-card small{
  color:#c7dcff!important;
  font-weight:800!important;
  font-size:.82rem!important;
  overflow-wrap:anywhere!important;
}
.promo-link-card:hover,.promo-link-card:focus-visible{
  transform:translateY(-2px);
  outline:none!important;
  border-color:rgba(32,223,255,.62)!important;
  box-shadow:0 0 30px rgba(32,223,255,.20),0 0 34px rgba(255,78,218,.14),inset 0 0 26px rgba(255,255,255,.05)!important;
}
.promo-link-card.main-feed{border-color:rgba(32,223,255,.38)!important;}
.promo-link-card.chat-link{border-color:rgba(169,92,255,.40)!important;}
.promo-link-card.radio-link{border-color:rgba(255,154,44,.34)!important;}
.promo-link-card.magazine-link{border-color:rgba(255,78,218,.40)!important;}
@keyframes wwcPromoSpin{to{transform:rotate(360deg)}}
@media (max-width:980px){
  .promo-link-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important;}
  .promo-link-card{min-height:132px!important;}
}
@media (max-width:520px){
  .nav{width:min(340px,calc(100vw - 14px))!important;max-height:calc(100vh - 92px)!important;overflow:auto!important;}
  .nav a{font-size:.82rem!important;letter-spacing:.05em!important;padding:10px 11px!important;}
  .promo-flyer{padding:20px 12px!important;border-radius:18px!important;}
  .promo-link-grid{grid-template-columns:1fr!important;gap:10px!important;}
  .promo-link-card{min-height:106px!important;grid-template-columns:48px minmax(0,1fr)!important;text-align:left!important;justify-items:start!important;padding:14px!important;}
  .promo-link-card .promo-icon{width:44px!important;height:44px!important;font-size:1.25rem!important;}
  .promo-link-card small,.promo-link-card strong{width:100%!important;}
}


/* =========================================================
   V22 CARD DROPPED SCREEN EFFECT
   Runs only after a successful SoundCloud card publish.
   Mobile-safe: fixed viewport, pointer-events none, no layout shift.
   ========================================================= */
.publish-screen-effect.card-dropped-fx{
  position:fixed!important;
  inset:0!important;
  z-index:999999!important;
  pointer-events:none!important;
  display:grid!important;
  place-items:center!important;
  padding:max(18px, env(safe-area-inset-top)) max(12px, env(safe-area-inset-right)) max(18px, env(safe-area-inset-bottom)) max(12px, env(safe-area-inset-left))!important;
  opacity:0!important;
  overflow:hidden!important;
  isolation:isolate!important;
  mix-blend-mode:normal!important;
  background:
    radial-gradient(circle at 50% 45%, rgba(33,231,255,.16), transparent 26%),
    radial-gradient(circle at 66% 52%, rgba(255,62,210,.15), transparent 34%),
    linear-gradient(90deg, rgba(3,8,20,.04), rgba(4,0,14,.08), rgba(3,8,20,.04))!important;
}
.publish-screen-effect.card-dropped-fx.run{animation:wwcDropFxFade 2.1s cubic-bezier(.2,.8,.2,1) forwards!important;}
.publish-screen-effect.card-dropped-fx .drop-fx-frame{
  position:absolute!important;
  inset:clamp(12px,3vw,38px)!important;
  border-radius:clamp(18px,3vw,42px)!important;
  border:1px solid rgba(38,230,255,.42)!important;
  box-shadow:0 0 28px rgba(38,230,255,.38), inset 0 0 38px rgba(184,84,255,.16)!important;
  transform:scale(.92)!important;
  opacity:0!important;
  animation:wwcDropFxFrame 1.55s ease forwards!important;
}
.publish-screen-effect.card-dropped-fx .drop-fx-card{
  position:relative!important;
  z-index:4!important;
  width:min(92vw, 780px)!important;
  max-width:calc(100vw - 28px)!important;
  min-height:clamp(126px, 20vw, 210px)!important;
  display:flex!important;
  flex-direction:column!important;
  align-items:center!important;
  justify-content:center!important;
  gap:8px!important;
  padding:clamp(18px,4vw,38px)!important;
  border-radius:clamp(18px,3vw,34px)!important;
  border:1px solid rgba(40,232,255,.58)!important;
  background:
    linear-gradient(135deg, rgba(6,17,40,.90), rgba(34,16,74,.76), rgba(5,12,30,.90)),
    radial-gradient(circle at 18% 28%, rgba(38,230,255,.24), transparent 35%),
    radial-gradient(circle at 82% 68%, rgba(255,62,210,.20), transparent 35%)!important;
  box-shadow:
    0 0 34px rgba(40,232,255,.35),
    0 0 76px rgba(177,76,255,.33),
    inset 0 0 38px rgba(255,255,255,.08)!important;
  transform:translateY(18px) scale(.82) rotateX(14deg)!important;
  opacity:0!important;
  overflow:hidden!important;
  animation:wwcDropFxCard 1.6s cubic-bezier(.16,1,.3,1) forwards!important;
}
.publish-screen-effect.card-dropped-fx .drop-fx-card::before{
  content:''!important;
  position:absolute!important;
  inset:-45%!important;
  background:conic-gradient(from 180deg, transparent, rgba(35,230,255,.45), transparent, rgba(255,62,210,.40), transparent)!important;
  filter:blur(18px)!important;
  opacity:.55!important;
  animation:wwcDropFxSpin 1.35s linear infinite!important;
}
.publish-screen-effect.card-dropped-fx .drop-fx-card::after{
  content:''!important;
  position:absolute!important;
  inset:0!important;
  background:linear-gradient(115deg, transparent 0%, rgba(255,255,255,.18) 42%, transparent 54%)!important;
  transform:translateX(-130%)!important;
  animation:wwcDropFxShine 1.15s .22s ease forwards!important;
}
.publish-screen-effect.card-dropped-fx strong{
  position:relative!important;
  z-index:2!important;
  margin:0!important;
  font-family:Impact,'Arial Black',system-ui,sans-serif!important;
  font-size:clamp(2.15rem, 8.4vw, 7.6rem)!important;
  line-height:.88!important;
  letter-spacing:.075em!important;
  text-align:center!important;
  white-space:normal!important;
  color:transparent!important;
  background:linear-gradient(90deg,#19e8ff 0%,#ffffff 32%,#b45cff 65%,#ff4eda 100%)!important;
  -webkit-background-clip:text!important;
  background-clip:text!important;
  filter:drop-shadow(0 0 14px rgba(33,231,255,.65)) drop-shadow(0 0 34px rgba(255,62,210,.42))!important;
  text-shadow:none!important;
  transform:none!important;
  animation:wwcDropFxText 1.12s cubic-bezier(.16,1,.3,1) forwards!important;
}
.publish-screen-effect.card-dropped-fx .drop-fx-small,
.publish-screen-effect.card-dropped-fx .drop-fx-sub{
  position:relative!important;
  z-index:2!important;
  display:block!important;
  text-align:center!important;
  color:#dffbff!important;
  text-transform:uppercase!important;
  font-weight:1000!important;
  letter-spacing:.22em!important;
  text-shadow:0 0 14px rgba(33,231,255,.65)!important;
}
.publish-screen-effect.card-dropped-fx .drop-fx-small{font-size:clamp(.68rem,1.6vw,1rem)!important;color:#6fffff!important;}
.publish-screen-effect.card-dropped-fx .drop-fx-sub{font-size:clamp(.68rem,1.8vw,1.05rem)!important;color:#fff!important;letter-spacing:.12em!important;}
.publish-screen-effect.card-dropped-fx .drop-fx-bolt{
  position:absolute!important;
  z-index:3!important;
  left:-20vw!important;
  width:140vw!important;
  height:3px!important;
  border-radius:999px!important;
  background:linear-gradient(90deg, transparent, #20e8ff 18%, #ffffff 43%, #b45cff 62%, #ff4eda 82%, transparent)!important;
  box-shadow:0 0 18px rgba(32,232,255,.95),0 0 42px rgba(255,78,218,.55)!important;
  transform:translateX(-120%) skewX(-18deg)!important;
  opacity:0!important;
}
.publish-screen-effect.card-dropped-fx .bolt-a{top:32%!important;animation:wwcDropFxBolt 1.05s .05s ease forwards!important;}
.publish-screen-effect.card-dropped-fx .bolt-b{top:50%!important;animation:wwcDropFxBolt 1.12s .18s ease forwards reverse!important;}
.publish-screen-effect.card-dropped-fx .bolt-c{top:69%!important;animation:wwcDropFxBolt 1.08s .30s ease forwards!important;}
.publish-screen-effect.card-dropped-fx .drop-fx-ring{
  position:absolute!important;
  z-index:1!important;
  width:clamp(120px, 23vw, 270px)!important;
  aspect-ratio:1!important;
  border-radius:50%!important;
  border:2px solid rgba(42,232,255,.72)!important;
  box-shadow:0 0 28px rgba(42,232,255,.62), inset 0 0 22px rgba(255,78,218,.28)!important;
  opacity:0!important;
  transform:scale(.3)!important;
}
.publish-screen-effect.card-dropped-fx .ring-a{animation:wwcDropFxRing 1.25s .04s ease forwards!important;}
.publish-screen-effect.card-dropped-fx .ring-b{animation:wwcDropFxRing 1.45s .18s ease forwards!important;border-color:rgba(255,78,218,.62)!important;}
.publish-screen-effect.card-dropped-fx .drop-fx-sparks{position:absolute!important;inset:0!important;z-index:3!important;overflow:hidden!important;}
.publish-screen-effect.card-dropped-fx .drop-fx-sparks i{
  position:absolute!important;
  width:clamp(5px,1vw,10px)!important;
  height:clamp(5px,1vw,10px)!important;
  border-radius:50%!important;
  background:#fff!important;
  box-shadow:0 0 14px #20e8ff,0 0 26px #ff4eda!important;
  opacity:0!important;
  animation:wwcDropFxSpark 1.25s ease forwards!important;
}
.publish-screen-effect.card-dropped-fx .drop-fx-sparks i:nth-child(1){left:18%;top:40%;animation-delay:.12s!important;--sx:-80px;--sy:-80px;}
.publish-screen-effect.card-dropped-fx .drop-fx-sparks i:nth-child(2){left:28%;top:62%;animation-delay:.18s!important;--sx:-110px;--sy:70px;}
.publish-screen-effect.card-dropped-fx .drop-fx-sparks i:nth-child(3){left:42%;top:34%;animation-delay:.10s!important;--sx:-35px;--sy:-100px;}
.publish-screen-effect.card-dropped-fx .drop-fx-sparks i:nth-child(4){left:57%;top:69%;animation-delay:.22s!important;--sx:55px;--sy:90px;}
.publish-screen-effect.card-dropped-fx .drop-fx-sparks i:nth-child(5){left:70%;top:38%;animation-delay:.15s!important;--sx:100px;--sy:-75px;}
.publish-screen-effect.card-dropped-fx .drop-fx-sparks i:nth-child(6){left:81%;top:55%;animation-delay:.28s!important;--sx:120px;--sy:20px;}
.publish-screen-effect.card-dropped-fx .drop-fx-sparks i:nth-child(7){left:50%;top:50%;animation-delay:.08s!important;--sx:0px;--sy:-120px;}
.publish-screen-effect.card-dropped-fx .drop-fx-sparks i:nth-child(8){left:50%;top:50%;animation-delay:.20s!important;--sx:0px;--sy:120px;}
@keyframes wwcDropFxFade{0%{opacity:0}8%{opacity:1}78%{opacity:1}100%{opacity:0}}
@keyframes wwcDropFxCard{0%{opacity:0;transform:translateY(24px) scale(.72) rotateX(18deg)}38%{opacity:1;transform:translateY(0) scale(1.04) rotateX(0deg)}72%{opacity:1;transform:translateY(0) scale(1) rotateX(0deg)}100%{opacity:.96;transform:translateY(-4px) scale(.98) rotateX(0deg)}}
@keyframes wwcDropFxFrame{0%{opacity:0;transform:scale(.9)}35%{opacity:1;transform:scale(1)}100%{opacity:0;transform:scale(1.05)}}
@keyframes wwcDropFxText{0%{opacity:0;transform:translateY(14px) scale(.84);letter-spacing:.18em}45%{opacity:1;transform:translateY(0) scale(1.04);letter-spacing:.08em}100%{opacity:1;transform:translateY(0) scale(1);letter-spacing:.075em}}
@keyframes wwcDropFxBolt{0%{opacity:0;transform:translateX(-120%) skewX(-18deg)}12%{opacity:1}100%{opacity:0;transform:translateX(120%) skewX(-18deg)}}
@keyframes wwcDropFxRing{0%{opacity:.95;transform:scale(.22)}70%{opacity:.45}100%{opacity:0;transform:scale(4.8)}}
@keyframes wwcDropFxSpin{to{transform:rotate(1turn)}}
@keyframes wwcDropFxShine{to{transform:translateX(135%)}}
@keyframes wwcDropFxSpark{0%{opacity:0;transform:translate(0,0) scale(.5)}14%{opacity:1}100%{opacity:0;transform:translate(var(--sx),var(--sy)) scale(1.7)}}
@media (max-width:700px){
  .publish-screen-effect.card-dropped-fx{padding:14px!important;}
  .publish-screen-effect.card-dropped-fx .drop-fx-card{width:min(94vw,420px)!important;min-height:132px!important;border-radius:20px!important;gap:6px!important;}
  .publish-screen-effect.card-dropped-fx strong{font-size:clamp(2.05rem,13.5vw,4.2rem)!important;line-height:.9!important;letter-spacing:.045em!important;}
  .publish-screen-effect.card-dropped-fx .drop-fx-small{font-size:.66rem!important;letter-spacing:.14em!important;}
  .publish-screen-effect.card-dropped-fx .drop-fx-sub{font-size:.70rem!important;letter-spacing:.06em!important;}
  .publish-screen-effect.card-dropped-fx .drop-fx-bolt{height:2px!important;}
  .publish-screen-effect.card-dropped-fx .drop-fx-sparks i:nth-child(n+6){display:none!important;}
}
@media (prefers-reduced-motion:reduce){
  .publish-screen-effect.card-dropped-fx,.publish-screen-effect.card-dropped-fx *{animation:none!important;}
  .publish-screen-effect.card-dropped-fx{opacity:0!important;display:none!important;}
}