/* =========================
   CORE VARS / RESET
========================= */
*,*::before,*::after{box-sizing:border-box}
:root{
  --parallax-img:url('https://smallsjustnice.com/images/Ghana-flag.jpg');
  --parallax-overlay:.25;

  --gh-red:#ce1126; --gh-gold:#fcd116; --gh-green:#009e49; --gh-black:#0b0b0b;

  --ghana-gradient:linear-gradient(90deg,var(--gh-red),var(--gh-gold),var(--gh-green));
  --kente-trim:repeating-linear-gradient(90deg,
    #140b0b 0 10px,#2b1a1a 10px 16px,
    var(--gh-red) 16px 28px,#af0f22 28px 32px,
    var(--gh-gold) 32px 44px,#c7a90f 44px 48px,
    var(--gh-green) 48px 60px,#0d7a3c 60px 64px);

  --spray: radial-gradient(1200px 800px at 0% 0%,rgba(255,255,255,.03),transparent 60%),
           radial-gradient(1000px 800px at 100% 100%,rgba(0,0,0,.18),transparent 55%);

  --noise:url("data:image/svg+xml;utf8,\
  <svg xmlns='http://www.w3.org/2000/svg' width='120' height='120' viewBox='0 0 120 120'>\
  <filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/></filter>\
  <rect width='120' height='120' filter='url(%23n)' opacity='.065'/></svg>");

  /* tuning knobs */
  --hero-img-max: 860px;
  --hero-img-w: 92%;
  --card-img-max-h: 420px;
  --card-img-max-w: 100%;
  --mnp-offset:0px;
}
html,body{
  margin:0; padding:0; width:100%; min-height:100vh; overflow-x:hidden;
  color:#fff; background:transparent;
  font-family:'Roboto',system-ui,-apple-system,"Segoe UI",Arial,sans-serif;
}
body{position:relative; isolation:isolate}

/* Parallax background + overlay */
body::before{
  content:""; position:fixed; inset:0; z-index:0;
  background:var(--parallax-img) center/cover no-repeat;
  filter:saturate(1.05) contrast(1.05) brightness(.9);
  transform:translateZ(0);
}
body::after{
  content:""; position:fixed; inset:0; z-index:1; pointer-events:none;
  background:rgba(0,0,0,var(--parallax-overlay));
  box-shadow:inset 0 0 180px rgba(0,0,0,.55);
}

/* =========================
   SECTION SKIN
========================= */
.viz-section{ position:relative; z-index:2; padding:18px; margin:18px 0; border-radius:16px; overflow:hidden; background:transparent; }
.viz-section > *:not(canvas){ position:relative; z-index:4; }
canvas.sectionViz,canvas.sectionBar{ position:absolute; inset:0; width:100%; height:100%; pointer-events:none }
canvas.sectionViz{ z-index:2 }
canvas.sectionBar{ z-index:0; opacity:1 }

/* STAR + KENTE crown on every section (single source of truth) */
.viz-section::before{
  content:"";
  position:absolute; left:0; right:0; top:0; height:12px; z-index:3;
  background:
    url("data:image/svg+xml;utf8,\
      <svg xmlns='http://www.w3.org/2000/svg' width='64' height='12' viewBox='0 0 64 12'>\
        <rect width='64' height='12' fill='none'/>\
        <polygon fill='%23000' points='40,1 41.8,6 47,6 42.5,9 44.2,11 40,8.8 35.8,11 37.5,9 33,6 38.2,6'/>\
      </svg>"
    ) repeat-x 0 0 / 64px 12px,
    var(--kente-trim);
  box-shadow:0 8px 22px rgba(0,0,0,.45);
  pointer-events:none;
}

/* inner glaze */
.viz-section:not(#hero)::after{
  content:""; position:absolute; inset:10px; border-radius:14px; z-index:1;
  background:
    radial-gradient(60% 50% at 50% 0%, rgba(252,209,22,.08), transparent 60%),
    radial-gradient(80% 60% at 100% 100%, rgba(0,158,73,.07), transparent 55%),
    var(--spray);
  mix-blend-mode:screen;
}

/* per-section background (unchanged look) */
#nav   { background: linear-gradient(135deg,rgba(0,0,0,.75),rgba(10,10,10,.55)); }
#hero  { background: linear-gradient(135deg,rgba(15,15,15,.85),rgba(0,0,0,.75)); }
#music { background: linear-gradient(135deg,rgba(9,9,9,.9),rgba(18,18,18,.85)); }
#shows { background:
  linear-gradient(120deg,rgba(206,17,38,.14),rgba(252,209,22,.10),rgba(0,158,73,.12)),
  linear-gradient(135deg,rgba(12,12,12,.92),rgba(18,18,18,.92)); }
#merch { background:
  linear-gradient(120deg,rgba(0,158,73,.16),rgba(252,209,22,.12)),
  linear-gradient(135deg,rgba(12,12,12,.92),rgba(22,22,22,.92)); }
#gallery{ background:
  linear-gradient(120deg,rgba(252,209,22,.12),rgba(0,158,73,.12)),
  linear-gradient(135deg,rgba(10,10,10,.92),rgba(20,20,20,.92)); }
#contact{ background:
  linear-gradient(120deg,rgba(206,17,38,.18),rgba(0,158,73,.18)),
  linear-gradient(135deg,rgba(8,8,8,.94),rgba(18,18,18,.94)); }

/* grime overlay */
.viz-section .grime{
  content:""; position:absolute; inset:0; z-index:2; pointer-events:none;
  background-image:var(--noise);
  mix-blend-mode:overlay;
}

/* =========================
   TYPE & HEADERS
========================= */
h1,h2,nav a,.cta-ghana{ font-family:'Anton',Impact,sans-serif; letter-spacing:.3px }
.tagline{ font-family:'Black Ops One',system-ui,sans-serif; letter-spacing:.5px; text-transform:uppercase }

.viz-section>h2{
  display:inline-grid; gap:6px; place-items:center start; margin:0 0 12px; padding-bottom:6px; text-transform:uppercase;
  text-shadow:0 2px 0 rgba(0,0,0,.5), 0 8px 24px rgba(0,0,0,.5);
}
.viz-section>h2::after{
  content:""; width:100%; height:6px; border-radius:999px; background:var(--ghana-gradient);
  box-shadow:0 0 18px rgba(252,209,22,.45),0 0 26px rgba(206,17,38,.3),0 0 26px rgba(0,158,73,.3);
}
.viz-section>h2::before{
  content:""; position:absolute; right:-18px; top:-6px; width:20px; height:20px;
  background:url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cpolygon points='100,10 123,75 192,75 136,115 158,180 100,140 42,180 64,115 8,75 77,75' fill='%23000000'/%3E%3C/svg%3E") center/contain no-repeat;
  filter:drop-shadow(0 1px 0 rgba(0,0,0,.4));
  animation:starPulse 2.8s ease-in-out infinite;
}
@keyframes starPulse{0%,100%{transform:scale(1);opacity:.9}50%{transform:scale(1.15);opacity:1}}

/* utility for no-crop imgs */
.fit-img{ width:100%; height:auto; object-fit:contain; object-position:center; display:block }

/* =========================
   CARDS & GRID
========================= */
.grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(200px,1fr)); gap:18px }
.card:not(.hero-card){
  background:rgba(255,255,255,.06); padding:14px; border-radius:14px; text-align:left;
  border:1px solid rgba(255,255,255,.08); box-shadow:0 8px 18px rgba(0,0,0,.35);
  transition:transform .15s, box-shadow .2s, background .15s;
  position:relative;
  display:flex; flex-direction:column; gap:10px;
}
.card:hover{ transform:translateY(-2px) scale(1.01); background:rgba(255,255,255,.08); box-shadow:0 16px 28px rgba(0,0,0,.45) }
/* FIX: exclude hero-card correctly */
.card:not(.hero-card)::after{
 content:""; display:block; height:6px; border-radius:999px; background:var(--ghana-gradient); box-shadow:0 0 8px rgba(252,209,22,.45) }

/* images inside cards default to non-crop */
.card img{
  width:100%;
  height:auto;
  object-fit:contain;
  display:block;
  background:transparent;
}

/* specifically for hero image */
.hero-card img{
  border:none;
  border-radius:0;
  box-shadow:none;
}

/* CTA */
.cta-ghana{
  align-self:flex-start;
  margin-top:auto;
  padding:10px 16px; border-radius:12px; font-weight:800; letter-spacing:.3px; text-decoration:none; color:#111;
  background:var(--ghana-gradient); background-size:220% 100%;
  transition:background-position .25s, box-shadow .2s, transform .15s;
}
.cta-ghana:hover{
  background-position:100% 0; transform:translateY(-1px);
  box-shadow:0 0 22px rgba(252,209,22,.85),0 0 36px rgba(206,17,38,.55),0 0 48px rgba(0,158,73,.55)
}

/* =========================
   NAV
========================= */
nav{ text-align:center; padding:16px 12px 20px; position:relative }
nav a{
  margin:6px 10px; color:#fff; text-decoration:none; font-weight:600;
  position:relative; z-index:3; display:inline-block; padding:8px 12px; border-radius:12px;
  background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.08);
  transition:transform .12s, box-shadow .15s, background .15s, filter .2s;
  text-transform:uppercase; letter-spacing:.5px
}
nav a::after{
  content:""; position:absolute; left:10px; right:10px; bottom:-6px; height:6px; border-radius:999px; background:var(--ghana-gradient); opacity:0; transform:translateY(2px); transition:opacity .18s, transform .18s;
}
nav a:hover{ transform:translateY(-1px); background:rgba(255,255,255,.1); box-shadow:0 8px 20px rgba(0,0,0,.35); filter:drop-shadow(0 0 10px rgba(252,209,22,.35)) }
nav a:hover::after{ opacity:1; transform:translateY(0) }
.mobile-nav{ display:none }

.nav-marquee{
  margin-top:6px; overflow:hidden; border-radius:10px; border:1px solid rgba(255,255,255,.08);
  background:linear-gradient(90deg, rgba(206,17,38,.25), rgba(252,209,22,.25), rgba(0,158,73,.25)), rgba(0,0,0,.55);
}
.nav-marquee .line{
  --marq-speed: 21s;
  display:flex;
  gap:28px;
  padding:8px 14px;
  animation: marq var(--marq-speed) linear infinite;
  white-space:nowrap;
  font-weight:700;
  letter-spacing:.4px;
  will-change: transform;
}
@media (max-width:700px){
  .nav-marquee .line{ --marq-speed: 10s; }
}
@keyframes marq{
  from{ transform: translateX(0) }
  to{   transform: translateX(-50%) }
}


/* =========================
   HERO
========================= */
#hero{ text-align:center; padding:52px 18px 28px; position:relative }
#hero .overlay-star{
  position:absolute; inset:auto -12% -8% -12%; background:
   radial-gradient(50% 50% at 50% 60%, rgba(0,0,0,.45), transparent 70%),
   conic-gradient(from 0deg, rgba(206,17,38,.08), rgba(252,209,22,.08), rgba(0,158,73,.08), rgba(206,17,38,.08));
  filter:blur(24px); z-index:2; pointer-events:none;
  mask:url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cpolygon points='100,10 123,75 192,75 136,115 158,180 100,140 42,180 64,115 8,75 77,75' fill='%23000'/%3E%3C/svg%3E") center/50% 50% no-repeat;
  opacity:.35;
}
#hero h2{ font-size:clamp(2rem,6vw,3.6rem); margin:0 0 8px; letter-spacing:1px }
#hero p{ font-size:clamp(.95rem,2.2vw,1.1rem); max-width:740px; margin:0 auto 12px; color:#ececec; opacity:.95 }
#hero .tagline{
  display:inline-block; padding:6px 12px; border-radius:10px; margin:6px 0 14px;
  background:rgba(0,0,0,.55); border:1px solid rgba(255,255,255,.08);
  box-shadow:0 0 0 2px rgba(0,0,0,.15) inset;
}
#hero-image{ width:min(var(--hero-img-w),var(--hero-img-max)); height:auto; background:transparent!important; display:block; margin:4px auto 30px; filter:drop-shadow(0 24px 40px rgba(0,0,0,.45)) }

#hero-grid{ display:grid; gap:18px }
@media (min-width:901px){
  #hero-grid{ grid-template-columns: 1fr minmax(280px, var(--hero-img-max)) 1fr; align-items:center }
  .hero-copy{ font-size:1rem; color:#e8e8e8; line-height:1.5; opacity:.95 }
  .hero-card{ justify-self:center }
}
@media (max-width:900px){
  #hero-grid{ grid-template-columns:1fr }
  .hero-copy{ order:3 }
}

/* =========================
   MUSIC
========================= */
#music .media-row{ display:grid; grid-template-columns:1fr 1fr; gap:16px; align-items:start }
#music-player{
  position:relative; background:rgba(0,0,0,.72); border-radius:16px; padding:14px; width:100%; max-width:860px; margin:0;
  box-shadow:0 10px 22px rgba(0,0,0,.4); display:grid; grid-template-rows:auto 1fr; row-gap:10px; border:1px solid rgba(255,255,255,.08)
}
#player-header h2{ margin:0 0 6px; font-size:1.05rem; opacity:.95 }
#player-body{ display:grid; grid-template-columns:180px 1fr; gap:14px; align-items:start }
#player-left{ display:grid; gap:10px }
#current-track-info{ display:grid; gap:10px; text-align:center }
#current-track-art{
  width:100%; height:auto; object-fit:contain; background:#000; border-radius:12px;
  border:1px solid rgba(255,255,255,.08); box-shadow:0 8px 16px rgba(0,0,0,.4)
}
#current-track-details{ font-size:.95rem; color:#e6e6e6 }
#player-right{ display:grid; gap:10px; grid-auto-rows:min-content }
#controls{ display:flex; gap:8px; flex-wrap:wrap; align-items:center; justify-content:flex-start }
.control-btn{ background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.08); font-size:1.2em; color:#fff; cursor:pointer; padding:10px 14px; border-radius:12px; transition:transform .12s, background .15s, box-shadow .15s }
.control-btn:hover{ transform:scale(1.06); background:rgba(255,255,255,.1); box-shadow:0 8px 18px rgba(0,0,0,.35) }
#progress-container{ width:100%; background:#3d3d3d; border-radius:8px; height:10px; margin:2px 0; cursor:pointer; overflow:hidden; border:1px solid rgba(255,255,255,.08) }
#progress{ background:var(--gh-gold); height:100%; width:0% }
#volume-mode-row{ display:flex; gap:10px; flex-wrap:wrap; align-items:center }
#volume-container{ display:flex; align-items:center; gap:8px }
#volume-container input{ width:150px }
#visualizer{ width:100%; height:64px; background:#101010; border-radius:12px; border:1px solid rgba(255,255,255,.08) }
#visualizer.sectionBar{ position:relative!important; top:auto; left:auto; opacity:1; mix-blend-mode:normal; pointer-events:none; z-index:2 }
#playlist-container{ width:100%; max-height:240px; overflow:auto; background:rgba(0,0,0,.55); border-radius:12px; padding:6px; box-shadow:0 8px 18px rgba(0,0,0,.25); border:1px solid rgba(255,255,255,.08) }
#playlist{ list-style:none; margin:0; padding:0 }
#playlist li{ display:flex; align-items:center; gap:12px; padding:8px; border-bottom:1px solid #3a3a3a; cursor:pointer; transition:background .15s; border-radius:10px }
#playlist li:hover{ background:#2b2b2b }
#playlist li.active{ background:#444 }
#playlist li img{ width:48px; height:48px; border-radius:8px; object-fit:contain; background:#000; border:1px solid rgba(255,255,255,.08) }
#playlist li small{ color:#bbb; display:block; margin-top:4px; font-size:.8rem }

.video-wrap{ position:relative; width:100%; aspect-ratio:16/9; border-radius:16px; overflow:hidden; background:rgba(0,0,0,.72); box-shadow:0 10px 22px rgba(0,0,0,.4); border:1px solid rgba(255,255,255,.08) }
.video-wrap::after{ content:""; position:absolute; left:10px; right:10px; bottom:10px; height:6px; border-radius:999px; background:var(--ghana-gradient); opacity:.9; box-shadow:0 0 10px rgba(252,209,22,.45) }
.video-wrap iframe{ position:absolute; inset:0; width:100%; height:100%; border:0 }

/* =========================
   SHOWS + MERCH (two-up)
========================= */
.two-up{ display:grid; gap:24px; align-items:start }
@media (min-width:901px){
  .two-up{ grid-template-columns:1fr 1fr }
  .two-up .viz-section{ margin:0 }
  .two-up .grid{ height:auto }
}
/* non-cropping image enforcement for Shows & Merch */
#shows .card img,
#merch .card img{
  max-width:var(--card-img-max-w);
  max-height:var(--card-img-max-h);
  width:auto; height:auto;
  object-fit:contain; background:transparent;
  margin:0 auto;
}

/* Responsive video in Shows/Merch cards */
#shows .card .video-wrap,
#merch .card .video-wrap{
  width:100%;
  max-width:100%;
  aspect-ratio:16/9;
  border-radius:16px;
  overflow:hidden;
  background:rgba(0,0,0,.72);
  box-shadow:0 10px 22px rgba(0,0,0,.4);
  border:1px solid rgba(255,255,255,.08);
  margin:0 auto;
}
#shows .card .video-wrap iframe,
#merch .card .video-wrap iframe{
  position:absolute; inset:0; width:100%; height:100%; border:0; display:block;
}
@media (max-width:700px){
  #shows .card .video-wrap,
  #merch .card .video-wrap{ max-height:220px; }
}

/* body copy in cards */
#shows .card p,#merch .card p{ font-size:1rem; color:#ddd; margin:6px 0; text-align:center }

/* sticker badge */
.sticker{
  position:absolute; top:14px; left:14px; z-index:5;
  font-size:.72rem; font-weight:900; text-transform:uppercase; letter-spacing:.8px;
  background:rgba(0,0,0,.8); color:#fff; border:1px solid rgba(255,255,255,.12);
  padding:6px 10px; border-radius:10px; transform:rotate(-2.5deg);
  box-shadow:0 6px 14px rgba(0,0,0,.5);
}

/* =========================
   SCROLLING GALLERY
========================= */
.scroll-gallery{
  --item-size:140px; --speed:25s;
  position:relative; overflow:hidden; width:100%; padding:.75rem 0; border:1px solid rgba(255,255,255,.08); border-radius:12px; background:rgba(0,0,0,.45)
}
.scroll-gallery .track{ display:flex; align-items:center; gap:1rem; width:max-content; animation:sg-scroll var(--speed) linear infinite }
.scroll-gallery:hover .track{ animation-play-state:paused }
.scroll-gallery li{ list-style:none; flex:0 0 auto; width:var(--item-size); height:var(--item-size); border-radius:.75rem; overflow:hidden; box-shadow:0 2px 10px rgba(0,0,0,.35); border:1px solid rgba(255,255,255,.08); background:#000 }
.scroll-gallery img{ width:100%; height:100%; object-fit:contain; display:block; background:#000 }
.scroll-gallery.alt .track{ animation-direction:reverse }
@keyframes sg-scroll{ from{transform:translateX(0)} to{transform:translateX(-50%)} }
@media (prefers-reduced-motion:reduce){ .scroll-gallery .track{ animation:none } }
@media (min-width:768px){ .scroll-gallery{ --item-size:160px } }
@media (min-width:1024px){ .scroll-gallery{ --item-size:190px } }

/* =========================
   SETTINGS PANEL (Desktop defaults)
========================= */
#toggleSettings{
  position:fixed; top:10px; right:10px;
  background:#444; color:#fff; border:none; border-radius:15px; padding:6px 14px; cursor:pointer; z-index:1003
}
#settingsPanel{
  position:fixed; top:50px; right:10px; left:auto; bottom:auto;
  width:360px; max-height:80vh; overflow:auto;
  padding:10px; border-radius:15px;
  background:rgba(0,0,0,.86);
  border:1px solid rgba(255,255,255,.08);
  box-shadow:0 8px 18px rgba(0,0,0,.35);
  z-index:1002;
  transition:transform .3s, opacity .3s;
  transform:translateX(110%); opacity:0; /* hidden by default */
}
#settingsPanel.open{ transform:translateX(0); opacity:1 }
.setting-row{ margin:8px 0; display:flex; align-items:center; gap:8px }
.setting-row label{ flex:1; font-size:.9em }
.setting-row input[type=range],.setting-row input[type=color],.setting-row select{ flex:1 }
.setting-title{ margin:10px 0 5px; font-weight:500; text-align:center }

/* =========================
   CONTACT LAYOUT (centered)
========================= */
.contact-row{
  display:grid;
  gap:16px;
  grid-template-columns:1fr;          /* stack on mobile */
  align-items:center;
  justify-items:center;               /* center each cell on mobile */
  padding:16px;
  border:1px solid rgba(255,255,255,.08);
  border-radius:12px;
  background:rgba(0,0,0,.35);
}
@media (min-width:700px){
  .contact-row{
    grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);
    align-items:center;               /* vertical centering on the line */
    justify-items:stretch;
    padding:20px 24px;
  }
  .contact-email{ justify-self:start }
  .socials{ justify-self:center }      /* dead-center socials */
  .maker{ justify-self:end; text-align:right }
}

.contact-email a{
  display:inline-flex;
  align-items:center;
  gap:10px;
  padding:10px 14px;
  border-radius:12px;
  background:rgba(0,0,0,.55);
  border:1px solid rgba(255,255,255,.12);
  color:#fff;
  text-decoration:none;
  font-weight:600;
}
.contact-email svg{ flex:0 0 auto }

.socials{
  display:flex;
  justify-content:center;
  align-items:center;                  /* vertical center inside the row */
  gap:14px;
  flex-wrap:wrap;
}
.socials a{
  display:inline-flex;
  width:40px; height:40px;
  align-items:center; justify-content:center;
  border-radius:10px;
  background:rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.12);
  transition:transform .12s, background .15s;
}
.socials a:hover{
  background:rgba(255,255,255,.12);
  transform:translateY(-1px);
}

.maker{ text-align:center }
.maker a{
  color:#fff; text-decoration:none; font-size:.9rem; opacity:.85;
}
.maker img{ width:50px; margin-top:6px }

/* =========================
   MOBILE / RESPONSIVE
========================= */
#mobile-nowplaying{ display:none }
.sr-only{ position:absolute!important; width:1px!important; height:1px!important; padding:0!important; margin:-1px!important; overflow:hidden!important; clip:rect(0,0,0,0)!important; white-space:nowrap!important; border:0!important }

@media (max-width:700px){
  #nav{ padding:12px; margin:12px 0 }
  #nav .grid{ display:none }
  #nav .mobile-nav{ display:flex; justify-content:center; align-items:center; padding:4px 0 8px }
  .mobile-nav-select-wrap{ position:relative; display:inline-block; width:100%; max-width:520px }
  #mobileNavSelect{
    width:100%; appearance:none; background:#1a1a1a; color:#fff; border:1px solid #444; border-radius:12px; padding:12px 40px 12px 14px; font-size:1rem;
    box-shadow:0 4px 10px rgba(0,0,0,.25)
  }
  .mobile-nav .caret{ position:absolute; right:12px; top:50%; transform:translateY(-50%); pointer-events:none; opacity:.9 }

  #music .media-row{ grid-template-columns:1fr; gap:6px }
  #music{ padding:8px 12px }
  #music-player{ width:100%; max-width:640px; padding:10px; margin:8px auto 16px; max-height:calc(100svh - 110px); overflow:hidden }
  #player-header h2{ font-size:.95rem }
  #player-right{ gap:8px }
  #controls .control-btn{ font-size:1rem; padding:8px 10px }
  #progress-container{ height:8px }
  #volume-container input{ width:120px }
  #visualizer{ height:56px }
  #playlist-container{ max-height:32svh }
  #player-body{ grid-template-columns:1fr; grid-auto-rows:min-content; gap:10px; align-items:start }
  #current-track-art{ max-width:46%; margin:0 auto }

  #mobile-nowplaying{
    position:fixed; left:0; right:0; bottom:0; display:grid; grid-template-columns:auto 1fr auto; gap:10px; align-items:center;
    padding:10px 12px calc(10px + env(safe-area-inset-bottom)) 12px;
    background:linear-gradient(90deg, rgba(206,17,38,.35), rgba(252,209,22,.35), rgba(0,158,73,.35)), rgba(0,0,0,.9);
    border-top:1px solid #333; z-index:1002; backdrop-filter:blur(8px)
  }
  .mnp-pod{ display:flex; align-items:center; gap:8px }
  .mnp-btn{ background:#222; border:1px solid #444; color:#fff; border-radius:12px; padding:8px 10px; font-size:1rem; line-height:1 }
  .mnp-info{ display:grid; gap:6px; min-width:0 }
  .mnp-title{ font-weight:600; font-size:.9rem; line-height:1.1; white-space:nowrap; overflow:hidden; text-overflow:ellipsis }
  .mnp-sub{ font-size:.78rem; color:#bbb; white-space:nowrap; overflow:hidden; text-overflow:ellipsis }
  .mnp-progress{ width:100%; height:6px; background:#333; border-radius:8px; overflow:hidden }
  .mnp-progress-bar{ width:0%; height:100%; background:var(--gh-gold) }

  .viz-section>canvas.sectionBar,.viz-section>canvas.sectionViz{ position:absolute; inset:0; width:100%; height:100% }
  .viz-section{ scroll-margin-top:90px }

  .mini-player-viz{ position:relative; padding:12px; border-radius:12px }
  .mini-player-viz>canvas.sectionBar,.mini-player-viz>canvas.sectionViz{ position:absolute; inset:0; width:100%; height:100%; pointer-events:none }
  .mini-player-viz>*:not(canvas){ position:relative; z-index:3 }

  :root{ --mnp-offset:calc(86px + env(safe-area-inset-bottom)) }
  body{ padding-bottom:var(--mnp-offset) }

  /* ==== SETTINGS PANEL: Mobile override (30% width shelf) ==== */
  #toggleSettings{ top:12px; right:12px; z-index:1003 }
  #settingsPanel{
    top:0; right:0; bottom:0; left:auto;   /* dock to right edge */
    width:60vw;                             /* 60% width on mobile */
    min-width:0; max-width:none;            /* no floors/caps */
    border-radius:0;                         /* flush edge */
    border-left:1px solid rgba(255,255,255,.12);
    max-height:100svh;                      /* full device height */
    transform:translateX(100%);             /* hidden off-canvas */
    opacity:0;
  }
  /* .open state from desktop applies globally */
}

/* CMS media safety */
.video-wrap > video { width:100%; height:100%; display:block; object-fit:contain; background:#000; }
[hidden] { display:none !important; }