/* SHOCKER OWNZ / ELITE UI 10.4 — Premium industrial components.
   Architecture: plate CTAs, precision secondary controls, steel icon controls.
   Reusable in future projects; asset URLs are relative to this file. */
:root{
  --ownz-hot:#ff3550;--ownz-hot2:#cf1830;
  --ownz-white:#fff8f8;--ownz-steel:#868d99;
  --ownz-edge:#69717f;--ownz-cut:#171920;
  --ownz-plate:linear-gradient(170deg,#33363f 0%,#1d2027 12%,#101218 48%,#080a10 100%);
  --ownz-emblem:url('./elite-emblem.png');
}
/* Tier 1: featured machined plates. Use on important CTAs, not all controls. */
.btn,.hero-btn-primary,.elite-plate{
  --ownz-ring:42px;
  position:relative; isolation:isolate; overflow:hidden;
  display:inline-flex;align-items:center;justify-content:center;gap:12px;
  min-height:66px;padding:16px 24px 16px calc(var(--ownz-ring) + 33px);
  border:1px solid #65616a;border-radius:14px;
  background:radial-gradient(circle at 12px 12px,#a4abb6 0 2px,transparent 3px),radial-gradient(circle at calc(100% - 12px) 12px,#a4abb6 0 2px,transparent 3px),radial-gradient(circle at 12px calc(100% - 12px),#a4abb6 0 2px,transparent 3px),radial-gradient(circle at calc(100% - 12px) calc(100% - 12px),#a4abb6 0 2px,transparent 3px),linear-gradient(180deg,rgba(255,255,255,.12),transparent 18%),var(--ownz-plate);
  color:var(--ownz-white);font-weight:900;font-size:13px;line-height:1.25;letter-spacing:.055em;text-transform:uppercase;
  box-shadow:inset 0 1px rgba(255,255,255,.28),inset 0 -2px 0 #801626,0 1px 0 #000,0 14px 34px #0008,0 0 0 1px #110b0d;
  text-shadow:0 2px 5px #000;transition:transform .17s ease,border-color .17s ease,box-shadow .17s ease;
}
.btn:before,.hero-btn-primary:before,.elite-plate:before{
  content:'';position:absolute;left:14px;top:50%;width:var(--ownz-ring);height:var(--ownz-ring);transform:translateY(-50%);
  background:var(--ownz-emblem) center/contain no-repeat;filter:drop-shadow(0 1px 3px #0008);pointer-events:none;
}
.btn:after,.hero-btn-primary:after,.elite-plate:after{
  content:'';position:absolute;left:calc(var(--ownz-ring) + 30px);right:19px;bottom:10px;height:2px;
  background:linear-gradient(90deg,transparent,#ec283f 42%,#7b1826 80%,transparent);opacity:.7;pointer-events:none;
}
.btn:hover,.hero-btn-primary:hover,.elite-plate:hover{
  transform:translateY(-2px);border-color:#f13d55;
  box-shadow:inset 0 1px rgba(255,255,255,.29),inset 0 -2px 0 #e02742,0 1px 0 #000,0 17px 36px #000a,0 0 14px #d3213b35;
}
.btn:active,.hero-btn-primary:active,.elite-plate:active{transform:translateY(1px);box-shadow:inset 0 5px 12px #000c,0 2px 7px #000a}
.btn span,.hero-btn-primary span{z-index:1;font-size:1em;line-height:1}
.btn-primary,.hero-btn-primary{border-color:#a8273b;background:radial-gradient(circle at 12px 12px,#a4abb6 0 2px,transparent 3px),radial-gradient(circle at calc(100% - 12px) 12px,#a4abb6 0 2px,transparent 3px),radial-gradient(circle at 12px calc(100% - 12px),#a4abb6 0 2px,transparent 3px),radial-gradient(circle at calc(100% - 12px) calc(100% - 12px),#a4abb6 0 2px,transparent 3px),linear-gradient(180deg,#503037,#17151c 36%,#090b10 100%)}
/* Header plates: compact, no oversized emblem; desktop always fits. */
.join-button{
  position:relative;display:inline-flex;align-items:center;justify-content:center;gap:9px;
  min-height:42px;min-width:124px;padding:10px 15px;border:1px solid #a3384b;border-radius:11px;
  background:linear-gradient(155deg,#2e2931,#14151c 58%,#0b0c11);color:#fff;font-size:11px;font-weight:850;letter-spacing:.065em;line-height:1.1;
  box-shadow:inset 0 1px #bcbec033,0 5px 16px #0008,inset 0 -2px #a51c31;
  white-space:nowrap;transition:background .15s,border-color .15s,transform .15s;
}
.join-button:hover{background:linear-gradient(160deg,#45313b,#1a151d);border-color:#ff566a;color:#fff;transform:translateY(-1px)}
.join-button:active{transform:translateY(1px)}
.join-button:before,.join-button:after{content:none}
.join-button svg{flex:none;width:16px;height:16px}
/* Steel square icon controls. CSS compatible with future native webviews. */
.elite-icon-btn,.player-btn,.search-toggle,.search-close,.menu-toggle{
  display:grid;place-items:center;
  width:44px;height:44px;min-width:44px;min-height:44px;padding:7px;
  border-radius:12px;border:1px solid #4d515e;color:#fff;
  background:linear-gradient(155deg,#363b46 0%,#171a21 38%,#0a0c10 100%);
  box-shadow:inset 0 1px #ffffff39,inset 0 -1px #9b1d2e,0 6px 15px #0009;
  text-shadow:0 1px 3px #000;transition:transform .14s,border-color .14s,box-shadow .14s;
}
.elite-icon-btn:hover,.player-btn:hover,.search-toggle:hover,.search-close:hover,.menu-toggle:hover{border-color:#e52c48;box-shadow:inset 0 1px #ffffff42,0 6px 18px #000b,0 0 14px #d8224030;transform:translateY(-1px)}
.elite-icon-btn:active,.player-btn:active,.search-toggle:active,.search-close:active,.menu-toggle:active{transform:translateY(1px);box-shadow:inset 0 3px 7px #000b}
.search-toggle svg{stroke:currentColor}
.search-close{font-size:24px}
/* Restore native responsive visibility: V10.3 inadvertently showed Menu on desktop. */
.menu-toggle{display:none}
@media(max-width:940px){.menu-toggle{display:grid}}
/* Tier 2: action controls repeated in track cards. Clean, no repetitive badge. */
.track-play,.track-download,.player-download{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  min-height:46px;padding:9px 11px;
  border-radius:10px;border:1px solid #51505c;background:linear-gradient(155deg,#2c3038,#11131a 55%,#0b0d12);
  box-shadow:inset 0 1px #ffffff21,inset 0 -1px #8a2030,0 5px 10px #0006;
  color:white;font-family:inherit;font-size:11px;font-weight:900;letter-spacing:.045em;line-height:1.3;text-align:center;text-transform:uppercase;
  white-space:nowrap;transition:background .15s,border-color .15s,transform .15s;
}
.track-play{background:linear-gradient(150deg,#e92744,#ad1029 80%,#851528);border-color:#e14053}
.track-play:hover,.track-play.is-playing{background:linear-gradient(150deg,#ff3a55,#ae172c);border-color:#ff6375;color:white;transform:translateY(-1px)}
.track-download:hover,.player-download:hover{background:linear-gradient(150deg,#3b2c35,#18151c);border-color:#ff5a6a;transform:translateY(-1px)}
.track-play:active,.track-download:active,.player-download:active{transform:translateY(1px)}
.track-play:before,.track-play:after,.track-download:before,.track-download:after,.player-download:before,.player-download:after{content:none!important;display:none!important}
.track-play .icon{font-size:13px;flex:none}
.track-download{font-size:10px;letter-spacing:.035em}
.player-download{min-height:42px;padding:9px 14px;min-width:126px;font-size:10px}
.player-download.disabled{opacity:.4;pointer-events:none}
/* Dedicated main transport - machined steel and red center, no flashing. */
.player-btn{width:42px;height:42px;min-width:42px;min-height:42px;border-radius:12px;font-size:18px}
.player-btn-primary{width:54px;height:54px;min-width:54px;min-height:54px;border:1px solid #ef3a50;
  background:linear-gradient(155deg,#ef304a,#8c0c25);box-shadow:inset 0 1px #ffffff60,0 8px 22px #e51f3b39,0 7px 20px #0007}
.player-btn-primary:hover{background:linear-gradient(150deg,#ff425b,#a90e2a)}
.player-btn svg{width:21px;height:21px;stroke:currentColor;stroke-width:2;fill:none;stroke-linecap:round;stroke-linejoin:round}
.player-btn-primary svg{width:22px;height:22px}
/* Filters only receive a quiet red edge and active underline. */
.filter-chip{min-height:42px;padding:9px 13px;border:1px solid #383940;border-radius:9px;background:#17181d;color:#cec8cd;box-shadow:inset 0 1px #ffffff13;font-weight:820}
.filter-chip:hover{background:#282229;border-color:#8d3042;color:#fff}
.filter-chip.active{background:#431822;border-color:#f23d55;color:#fff;box-shadow:inset 0 -2px #f53049}
/* Clear focus and reduced motion support */
.btn:focus-visible,.join-button:focus-visible,.hero-btn-primary:focus-visible,.elite-icon-btn:focus-visible,.track-play:focus-visible,.track-download:focus-visible,.player-download:focus-visible,.player-btn:focus-visible{outline:3px solid #ff9aab;outline-offset:3px}
@media(max-width:940px){.site-header .header-actions .join-button{display:none}}
@media(max-width:760px){
 .btn,.hero-btn-primary,.elite-plate{--ownz-ring:34px;min-height:55px;padding:12px 17px 12px calc(var(--ownz-ring) + 28px);border-radius:12px;font-size:11px;gap:8px;letter-spacing:.035em}
 .btn:before,.hero-btn-primary:before,.elite-plate:before{left:11px}
 .btn:after,.hero-btn-primary:after,.elite-plate:after{left:calc(var(--ownz-ring) + 25px);bottom:8px}
 .player-btn{width:44px;height:44px;min-width:44px;min-height:44px}
 .player-btn-primary{width:50px;height:50px;min-width:50px;min-height:50px}
 .track-play,.track-download{min-height:42px;padding:8px 9px;font-size:10px}
 .track-download{font-size:10px}
}
@media(max-width:420px){
 .btn,.hero-btn-primary,.elite-plate{--ownz-ring:32px;min-height:54px;font-size:10px}
 .track-play,.track-download{min-height:42px}
 .player-download{min-height:40px}
}
@media(prefers-reduced-motion:reduce){.btn,.join-button,.hero-btn-primary,.elite-plate,.elite-icon-btn,.player-btn,.search-toggle,.search-close,.menu-toggle,.track-play,.track-download,.player-download{transition:none}.btn:hover,.join-button:hover,.hero-btn-primary:hover,.elite-plate:hover,.player-btn:hover,.track-play:hover,.track-download:hover,.player-download:hover{transform:none}}

/* Honor native hidden attributes on buttons; prevent hidden workflow controls from appearing. */
.btn[hidden],.elite-plate[hidden],.menu-toggle[hidden],.mobile-menu[hidden],.join-button[hidden]{display:none!important}


/* V10.4.1 — Verified phone CTA correction: emblem-safe legible button labels.
   Side-by-side at roomy widths, single-column on phones where text was clipped.
   Does not alter navigation, button targets, or music controls. */
@media (max-width:560px) {
  .hero-ctas { display:grid; grid-template-columns:minmax(0,1fr); gap:12px; width:100%; max-width:370px; }
  .hero-ctas .btn {
    width:100%; min-width:0; box-sizing:border-box;
    flex:none; display:flex; justify-content:center; align-items:center;
    min-height:58px; padding:13px 22px 13px 76px;
    font-size:12px; line-height:1.3; letter-spacing:.045em;
    white-space:normal; text-align:center; overflow:hidden; gap:10px;
  }
  .hero-ctas .btn::before {left:15px; width:36px; height:36px;}
  .hero-ctas .btn::after {left:69px; right:18px;}
  .hero-ctas .btn > span {font-size:1.15em; flex:none; margin-left:4px; }
}
@media (max-width:360px) {
  .hero-ctas {max-width:100%;}
  .hero-ctas .btn {font-size:11px; min-height:56px; padding-left:72px; padding-right:15px;}
  .hero-ctas .btn::before{left:13px;width:34px;height:34px;}
}


/* V10.4.2: statistics labels must never spill into neighboring cards. */
@media (max-width: 1024px) {
  .stats-grid { min-width: 0; }
  .stat { min-width: 0; }
  .stat > div { min-width: 0; flex: 1 1 0%; }
  .stat strong { display: block; max-width: 100%; white-space: normal; overflow-wrap: normal; line-height: 1.08; }
  .stat small { display: block; max-width: 100%; white-space: normal; overflow-wrap: anywhere; line-height: 1.35; }
  .stat-icon { flex: 0 0 auto; }
}
@media (max-width: 350px) {
  .stat { flex-direction: column; align-items: flex-start; justify-content: center; gap: 8px; }
  .stat > div { width: 100%; flex: 0 1 auto; }
  .stat strong { font-size: 18px; }
}