/*
 * ============================================================
 *  ALPHA ULTRA GOD  --  Main Stylesheet
 *  Luxury steampunk / dark-gold theme
 *
 *  Source:  aug-site-v6_21_3.html (inline <style>)
 *  Extracted & deduplicated: 2026-03-15
 * ============================================================
 */

/* ── SEO: hidden meta elements ── */
.seo-only,
[data-seo] {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0,0,0,0);
  white-space: nowrap;
  border: 0;
}

:root {
  --black:       #080604;
  --deep:        #120d07;
  --gold-dim:    #8a6820;
  --gold:        #d4a23c;
  --gold-bright: #f0c96a;
  --gold-pale:   #f8dfa0;
  --teal-dark:   #091f1d;
  --teal-glow:   #2e9990;
  --text-dim:    #7a6a48;
  --text-body:   #c0a870;
  --text-bright: #e0c888;
  --panel:       1000px;
  --main-font:   'Rajdhani';
}

/* ── THEME TRANSITION ── */
body { transition: background-color 1.4s ease, color 1.4s ease; }
.ambient { transition: opacity 1.4s ease; }

/* ── BIO BLOCK — hard zero above text ── */
#bioBlock { padding-top: 0 !important; padding-bottom: 0 !important; }
#bioText   { margin-top: 0 !important; padding-top: 0 !important; margin-bottom: 0 !important; }


html { scroll-behavior: smooth; }
body {
  background:
    linear-gradient(180deg,
      #011c30 0%,
      #011526 30%,
      #010e1d 60%,
      #00060d 100%
    ) fixed;
  background-color: #010d18;
  color: var(--text-body);
  font-family: var(--main-font), sans-serif;
  font-size: 13px;
  letter-spacing: 0.05em;
  line-height: 1.3;
  min-height: 100vh;
  overflow-x: hidden;
}

/* ── Outward links in editable text ── */
.blk a, .lyric-box a, .spirit-hero a, .txt-slot a, footer a,
.editable-zone a {
  color: var(--gold-bright);
  text-decoration: underline;
  text-underline-offset: 2px;
  text-decoration-color: rgba(212,162,60,0.4);
  transition: color 0.2s, text-decoration-color 0.2s;
}
.blk a:hover, .lyric-box a:hover, .spirit-hero a:hover, .txt-slot a:hover, footer a:hover,
.editable-zone a:hover {
  color: #fff;
  text-decoration-color: var(--gold);
}

/* ── Font selector styling ── */
#fontSelect {
  background: rgba(0,0,0,0.6);
  border: 1px solid rgba(212,162,60,0.3);
  color: var(--gold-bright);
  font-family: var(--main-font), sans-serif;
  font-size: 8px;
  letter-spacing: 0.15em;
  padding: 3px 8px;
  cursor: pointer;
  transition: border-color 0.2s;
}
#fontSelect:hover { border-color: var(--gold); }
#fontSelect option { background: #0a0604; color: var(--gold-bright); }

/* noise overlay */
body::after {
  content:''; position:fixed; inset:0;
  background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.028'/%3E%3C/svg%3E");
  pointer-events:none; z-index:9998;
}

.ambient {
  position:fixed; inset:0; pointer-events:none; z-index:0;
  background:
    radial-gradient(ellipse 70% 50% at 50% 0%, rgba(212,162,60,0.06) 0%, transparent 65%),
    radial-gradient(ellipse 60% 40% at 15% 40%, rgba(0,160,140,0.09) 0%, transparent 55%),
    radial-gradient(ellipse 50% 35% at 85% 60%, rgba(0,130,160,0.07) 0%, transparent 55%),
    radial-gradient(ellipse 40% 30% at 3% 95%, rgba(46,153,144,0.12) 0%, transparent 55%);
}

.site { position:relative; z-index:1; display:flex; flex-direction:column; align-items:center; }
.panel { width:100%; max-width:var(--panel); padding:0 20px; }
/* sections live inside .main-panel-wrap — override panel padding */
.section.panel { max-width:100%; padding:0; }

/* ── MAIN PANEL WRAPPER — gold frame + flowing current ── */
.main-panel-wrap {
  position: relative;
  width: 100%;
  max-width: var(--panel);
  border: 2px solid rgba(212,162,60,0.32);
  background: linear-gradient(180deg, #2b1e05 0%, #1c1205 25%, #130d04 55%, #0d0903 100%);
  box-shadow:
    0 0 22px rgba(212,162,60,0.1),
    0 0 60px rgba(180,130,30,0.05),
    inset 0 0 50px rgba(0,0,0,0.45);
}
#frameCanvas {
  position: absolute;
  top: -2px; left: -2px;
  width: calc(100% + 4px);
  height: calc(100% + 4px);
  pointer-events: none;
  z-index: 100;
}

/* ═══════════════════════════════════════════
   HEADER
═══════════════════════════════════════════ */
header {
  position: relative;
  width: 100%;
  box-sizing: border-box;
  padding: 14px 30px 0;
  display: grid;
  grid-template-columns: 90px 1fr 90px;
  align-items: center;
  gap: 6px;
  animation: fadeDown 0.9s ease both;
  overflow: visible;
}

/* ── LOGO ── */
.logo-wrap {
  position: relative;
  width: 90px; height: 90px;
  display: flex; align-items: center; justify-content: flex-start;
  z-index: 2;
}
/* Dark brown sphere behind the logo */
.logo-wrap::before {
  content: '';
  position: absolute;
  inset: 4px;
  border-radius: 50%;
  background:
    radial-gradient(circle at 36% 32%,
      rgba(30,18,4,0.98) 0%,
      rgba(14,8,2,0.99) 55%,
      rgba(4,2,0,1) 100%
    );
  box-shadow:
    0 0 22px rgba(0,0,0,0.98),
    0 0 6px rgba(0,0,0,1),
    inset 0 2px 6px rgba(60,35,8,0.18);
  z-index: 1;
  animation: spherePulse 4s ease-in-out infinite alternate;
}
@keyframes spherePulse {
  from { box-shadow: 0 0 18px rgba(0,0,0,0.98), 0 0 28px rgba(10,5,0,0.7); }
  to   { box-shadow: 0 0 28px rgba(0,0,0,1), 0 0 44px rgba(20,10,2,0.6); }
}
.logo-img {
  width: 90px; height: 90px;
  object-fit: contain;
  position: relative; z-index: 2;
  animation: logoBreathe 4s ease-in-out infinite alternate;
}
@keyframes logoBreathe {
  from { filter: drop-shadow(0 0 10px rgba(212,162,60,0.4)) drop-shadow(0 0 28px rgba(212,162,60,0.2)); }
  to   { filter: drop-shadow(0 0 22px rgba(212,162,60,0.85)) drop-shadow(0 0 55px rgba(248,223,160,0.35)); }
}

/* ── CENTER ── */
.header-center {
  display: flex; flex-direction: column;
  align-items: center; gap: 1px;
  position: relative; z-index: 3;
}

h1.site-title,
.site-title {
  margin: 0;
  padding: 0;
  font-family: var(--main-font), sans-serif;
  font-size: clamp(16px, 3.2vw, 26px);
  font-weight: 900;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  background: linear-gradient(180deg, var(--gold-pale) 0%, var(--gold-bright) 45%, var(--gold) 100%);
  -webkit-background-clip: text; -webkit-text-fill-color: transparent;
  background-clip: text;
  text-align: center; line-height: 1.1; white-space: nowrap;
}

p.site-sub,
.site-sub {
  margin: 0;
  padding: 0;
  font-family: var(--main-font), sans-serif;
  font-size: clamp(9px, 1.3vw, 11px);
  letter-spacing: 0.32em;
  color: var(--gold-bright);
  text-transform: uppercase;
  opacity: 0.82;
  text-align: center;
}

/* ── LIGHT RAYS canvas ── */
#rayCanvas {
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 100%;
  pointer-events: none;
  z-index: 1;
  opacity: 0.72;
}

/* ── SUB ROW: spans full header grid ── */
.sub-row {
  display: flex; align-items: center; justify-content: center;
  width: 100%;
}
.console-left {
  display: flex; align-items: center; justify-content: center; gap: 5px;
  flex: 1;
}
.console-right {
  display: flex; align-items: center; justify-content: center;
  flex: 1;
}
.sub-row .site-sub {
  text-align: center;
  margin: 0; padding: 0;
  flex-shrink: 0;
}

/* ── NAV ── */
nav {
  display: flex; align-items: center;
  justify-content: center; gap: 0;
  margin-top: 3px;
}
nav#mainNav {
  width: 100%;
}
.nav-tabs-center {
  display: flex; align-items: center; gap: 0;
}
.nav-tab {
  font-family: var(--main-font), sans-serif;
  font-size: clamp(9px, 1.6vw, 13px);
  font-weight: 700;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--text-dim);
  padding: 6px 18px;
  cursor: pointer;
  border: none; background: none;
  position: relative; transition: color 0.25s;
  white-space: nowrap;
}
.nav-tab::after {
  content:'';
  position:absolute; bottom:0; left:50%;
  transform:translateX(-50%) scaleX(0);
  width:70%; height:1px;
  background:var(--gold);
  transition:transform 0.25s;
}
.nav-tab:hover, .nav-tab.active { color: var(--gold-bright); }
.nav-tab:hover::after, .nav-tab.active::after { transform:translateX(-50%) scaleX(1); }
.nav-sep { width:1px; height:14px; background:rgba(212,162,60,0.2); }

/* ── GLOBE ── */
.globe-wrap {
  width: 90px; height: 90px;
  display: flex; align-items: center; justify-content: center;
  position: relative; z-index: 2;
  overflow: hidden;
  border-radius: 50%;
}
#globeCanvas {
  width: 82px; height: 82px;
  display: block;
  filter: drop-shadow(0 0 8px rgba(212,162,60,0.45));
  animation: globeGlow 4s ease-in-out infinite alternate;
}
@keyframes globeGlow {
  from { filter: drop-shadow(0 0 6px rgba(212,162,60,0.3)) drop-shadow(0 0 12px rgba(212,162,60,0.15)); }
  to   { filter: drop-shadow(0 0 12px rgba(212,162,60,0.7)) drop-shadow(0 0 20px rgba(248,223,160,0.25)); }
}

/* ── RULE ── */
.rule {
  width:100%; height:1px;
  background:linear-gradient(90deg,transparent,var(--gold-dim) 25%,var(--gold) 50%,var(--gold-dim) 75%,transparent);
  opacity:0.28;
}

/* ═══════════════════════════════════════════
   SECTIONS
═══════════════════════════════════════════ */
.section { display:none; width:100%; animation:fadeUp 0.5s ease both; }
.section.active { display:block; }
@keyframes fadeUp   { from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:translateY(0)} }
@keyframes fadeDown { from{opacity:0;transform:translateY(-10px)}to{opacity:1;transform:translateY(0)} }

.grid-2 { display:grid; grid-template-columns:1fr 1fr; gap:2px; margin-top:2px; }
.grid-3 { display:grid; grid-template-columns:1fr 1fr 1fr; gap:2px; margin-top:2px; }

.blk {
  background:linear-gradient(135deg,rgba(30,20,9,0.97) 0%,rgba(8,6,4,0.99) 100%);
  border:1px solid rgba(212,162,60,0.1);
  padding:20px 22px; position:relative; overflow:hidden; transition:border-color 0.3s;
  text-align: center;
}
body.admin-mode .blk {
  resize: vertical;
  overflow: auto;
}
body.admin-mode .blk::after {
  content: '\u28FF';
  position: absolute; bottom: 3px; right: 5px;
  font-size: 8px; color: rgba(212,162,60,0.25);
  pointer-events: none; line-height: 1;
}
.blk::before {
  content:''; position:absolute; top:0; left:0; width:2px; height:100%;
  background:linear-gradient(180deg,transparent,var(--gold-dim),transparent);
  opacity:0; transition:opacity 0.3s;
}
.blk:hover { border-color:rgba(212,162,60,0.22); }
.blk:hover::before { opacity:1; }
.blk-teal {
  background:linear-gradient(135deg,rgba(9,31,29,0.97) 0%,rgba(8,6,4,0.99) 100%);
  border-color:rgba(46,153,144,0.12);
}
.blk-teal::before { background:linear-gradient(180deg,transparent,var(--teal-glow),transparent); }
.blk-teal:hover { border-color:rgba(46,153,144,0.28); }

.blk-label {
  font-family:var(--main-font),sans-serif;
  font-size:8px; font-weight:600; letter-spacing:0.55em; text-transform:uppercase;
  color:var(--gold-dim); margin-bottom:11px;
  display:flex; align-items:center; gap:9px;
}
.blk-label::after { content:''; flex:1; height:1px; background:linear-gradient(90deg,rgba(212,162,60,0.18),transparent); }
.blk-label-teal { color:var(--teal-glow); }
.blk-label-teal::after { background:linear-gradient(90deg,rgba(46,153,144,0.25),transparent); }

.blk-title {
  font-family:var(--main-font),sans-serif; font-size:12px; font-weight:700;
  color:var(--text-bright); margin-bottom:10px; letter-spacing:0.15em;
}

.ph {
  font-family:var(--main-font),sans-serif; font-size:12px; letter-spacing:0.15em;
  color:var(--gold-dim); opacity:0.62;
  border:1px dashed rgba(212,162,60,0.18);
  padding:14px; text-align:center; display:block;
}

.media-grid   { display:grid; grid-template-columns:repeat(3,1fr); gap:2px; margin-top:12px; }
.media-grid-4 { display:grid; grid-template-columns:repeat(4,1fr); gap:2px; }

.slot {
  aspect-ratio:1;
  background:linear-gradient(135deg,var(--deep),var(--black));
  border:1px solid rgba(212,162,60,0.08);
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:7px; cursor:pointer; transition:border-color 0.3s,background 0.3s;
  position:relative; overflow:hidden;
}
.slot:hover { border-color:rgba(212,162,60,0.22); background:rgba(30,20,9,0.8); }
.slot-icon { font-size:20px; opacity:0.40; }
.slot-lbl {
  font-family:var(--main-font),sans-serif; font-size:10px; letter-spacing:0.38em;
  color:var(--gold-dim); text-transform:uppercase; opacity:0.70;
}
.slot.teal { background:linear-gradient(135deg,var(--teal-dark),var(--black)); border-color:rgba(46,153,144,0.1); }
.slot.teal:hover { border-color:rgba(46,153,144,0.28); }
.slot.teal .slot-lbl { color:var(--teal-glow); }

.lyric-box { border-left:none; padding-left:0; margin:12px 0; text-align:center; }
.lyric-line { font-family:var(--main-font),sans-serif; font-size:15px; font-weight:300; color:var(--text-body); line-height:1.5; opacity:0.90; text-align:center; }
.lyric-line.ph-l { font-family:var(--main-font),sans-serif; font-size:12px; opacity:0.48; color:var(--gold-dim); text-align:center; }

.contact-line { display:flex; align-items:center; gap:12px; padding:10px 0; border-bottom:1px solid rgba(212,162,60,0.07); }
.contact-line:last-child { border-bottom:none; }
.c-icon { font-size:14px; opacity:0.60; width:16px; text-align:center; }
.c-label { font-family:var(--main-font),sans-serif; font-size:10px; letter-spacing:0.32em; color:var(--gold-dim); text-transform:uppercase; width:78px; }
.c-val { font-size:14px; color:var(--text-dim); opacity:0.70; }
.c-val.ph { border:none; padding:0; text-align:left; font-size:12px; opacity:0.60; }

.f-label { font-family:var(--main-font),sans-serif; font-size:10px; letter-spacing:0.32em; color:rgba(228,195,110,1); text-transform:uppercase; margin-bottom:5px; }
.f-input {
  background:rgba(255,235,180,0.06); border:1px solid rgba(212,162,60,0.18);
  color:rgba(220,200,160,0.92); font-family:var(--main-font),sans-serif; font-size:15px;
  padding:8px 12px; width:100%; outline:none; transition:border-color 0.25s; box-sizing:border-box;
}
.f-input::placeholder { color:rgba(212,175,90,0.72); }
.f-input:focus { border-color:rgba(212,162,60,0.45); background:rgba(255,235,180,0.09); }
textarea.f-input { resize:vertical; min-height:90px; }
.field-group { display:flex; flex-direction:column; gap:9px; }
.field-row { display:grid; grid-template-columns:1fr 1fr; gap:9px; }
.btn {
  font-family:var(--main-font),sans-serif; font-size:9px; font-weight:700;
  letter-spacing:0.4em; text-transform:uppercase;
  color:var(--gold); background:transparent; border:1px solid rgba(212,162,60,0.3);
  padding:11px 30px; cursor:pointer;
  transition:background 0.25s,color 0.25s,border-color 0.25s; margin-top:4px;
}
.btn:hover { background:rgba(212,162,60,0.08); border-color:var(--gold); color:var(--gold-bright); }

.spirit-hero {
  padding:44px 60px;
  background:linear-gradient(160deg,rgba(9,31,29,0.5) 0%,rgba(30,20,9,0.8) 50%,var(--black) 100%);
  border:1px solid rgba(212,162,60,0.08);
  text-align:center; position:relative; overflow:hidden; margin-top:2px;
}
.spirit-hero::before {
  content:'\2014 \2726 \2014'; position:absolute; top:14px; left:50%; transform:translateX(-50%);
  font-size:10px; letter-spacing:0.9em; color:var(--gold-dim); opacity:0.25;
}
.spirit-quote { font-family:var(--main-font),sans-serif; font-size:17px; font-weight:300; color:var(--text-bright); line-height:1.45; opacity:1; }

footer {
  width:100%; padding:22px 20px 36px;
  display:flex; justify-content:center; align-items:center;
  position: relative;
  box-sizing: border-box;
  overflow: hidden;
  text-align: center;
}
footer #footerContent,
footer #footerContent *,
#footerContent,
#footerContent * { text-align:center !important; display:block; }
footer .edit-handle { top: 8px; right: 10px; }
.ft-mark { font-family:var(--main-font),sans-serif; font-size:9px; letter-spacing:0.28em; color:var(--gold-dim); opacity:0.28; text-transform:uppercase; }
.ft-orn  { color:var(--gold-dim); opacity:0.18; font-size:13px; letter-spacing:0.5em; }

/* ── MOBILE ── */
@media (max-width:640px) {
  /* Globe = same size as logo for optical symmetry, no border overlap */
  header { grid-template-columns:52px 1fr 52px; gap:2px; padding:10px 6px 0 !important; }
  .logo-wrap { width:48px; height:48px; }
  .logo-img  { width:48px; height:48px; }
  .globe-wrap {
    width:48px; height:48px; justify-content:center !important;
    overflow: hidden;
    /* Subtle glow ring behind globe on dark mobile bg */
    background: radial-gradient(circle, rgba(212,162,60,0.12) 0%, rgba(212,162,60,0.04) 50%, transparent 72%);
    border-radius: 50%;
  }
  #globeCanvas {
    width:44px; height:44px;
    /* Boosted glow for dark mobile background */
    filter: drop-shadow(0 0 8px rgba(212,162,60,0.85)) drop-shadow(0 0 16px rgba(248,210,80,0.5)) !important;
    animation: none !important;
  }
  /* Compress center: allow wrapping, shrink font */
  .site-title { font-size:11px; letter-spacing:0.06em; white-space:normal !important; }
  .site-sub   { font-size:7.5px; letter-spacing:0.10em; }
  .nav-tab    { padding:5px 6px; font-size:9px; letter-spacing:0.15em !important; }
  .console-left { gap: 3px; }
  .console-btn { padding: 2px 4px; font-size: 8px; }
  .console-count { font-size: 9px; }
  .console-icon { font-size: 7px; }
  .share-label { font-size: 7px; letter-spacing: 0.12em; }
  .like-icon { font-size: 10px; }
  .sub-row { width: 100%; }
  .grid-2,.grid-3 { grid-template-columns:1fr; }
  .field-row { grid-template-columns:1fr; }
  .media-grid   { grid-template-columns:repeat(2,1fr); }
  .media-grid-4 { grid-template-columns:repeat(2,1fr); }
  .spirit-hero  { padding:30px 20px; }
  .blk { padding:16px 14px; }

  /* ── Social icons: equal distance within box ── */
  .social-bar-inner {
    justify-content: space-evenly !important;
    flex-wrap: nowrap !important;
    padding: 10px 6px !important;
    gap: 0 !important;
  }
  .soc-link {
    padding: 8px 2px !important;
  }
  .soc-link + .soc-link::before { display: none; }
  .soc-icon {
    width: 40px !important;
    height: 40px !important;
  }

  /* ── Mobile: hide color theme ambient/gradient — keep stars ── */
  .ambient { display: none !important; }
  body {
    background: #000 !important;
    background-color: #000 !important;
  }
  body::after { display: none !important; }
}
@media (max-width:400px) {
  header { grid-template-columns:42px 1fr 42px; gap:2px; padding:8px 4px 0 !important; }
  .logo-wrap { width:40px; height:40px; }
  .logo-img  { width:40px; height:40px; }
  .globe-wrap { width:40px; height:40px; }
  #globeCanvas {
    width:36px; height:36px;
    filter: drop-shadow(0 0 6px rgba(212,162,60,0.7)) drop-shadow(0 0 14px rgba(212,162,60,0.4)) !important;
    animation: none !important;
  }
  .site-title { font-size:10px; letter-spacing:0.04em; }
  .site-sub   { font-size:7px; }
  .nav-tab    { padding:4px 5px; font-size:8px; letter-spacing:0.10em !important; }
  .console-left { gap: 2px; }
  .console-btn { padding: 1px 3px; font-size: 7px; gap: 2px; }
  .console-count { font-size: 8px; }
  .share-label { font-size: 6px; letter-spacing: 0.1em; }
  .like-icon { font-size: 9px; }
  .sub-row { width: 100%; }
  .soc-icon { width: 34px !important; height: 34px !important; }
}

/* ══════════════════════════════════════════════
   LUXURY STEAMPUNK PLAYER — full redesign
══════════════════════════════════════════════ */

/* Outer frame — Metallic Chrome-Gold look */
.player-wrap {
  background: linear-gradient(180deg,
    rgba(50,38,14,0.99) 0%,
    rgba(28,17,4,0.99) 15%,
    rgba(14,9,2,1) 50%,
    rgba(22,14,4,0.99) 85%,
    rgba(40,30,10,0.99) 100%);
  border: none;
  padding: 0;
  position: relative;
  margin: 10px 0;
  /* Chrome-metallic multi-layer frame */
  box-shadow:
    /* inner chrome highlight (top-left) */
    inset 1px 1px 0 rgba(255,235,150,0.40),
    /* inner chrome shadow (bottom-right) */
    inset -1px -1px 0 rgba(0,0,0,0.85),
    /* bright gold border */
    0 0 0 1px rgba(220,175,60,0.85),
    /* dark gap */
    0 0 0 2px rgba(6,4,1,1),
    /* chrome rim — lighter metallic */
    0 0 0 3px rgba(240,200,90,0.65),
    /* dark gap */
    0 0 0 4px rgba(4,2,0,1),
    /* outer gold rim */
    0 0 0 5px rgba(200,155,45,0.55),
    /* dark gap */
    0 0 0 7px rgba(4,2,0,1),
    /* outermost chrome rim */
    0 0 0 8px rgba(160,120,30,0.35),
    /* metallic glow */
    0 0 20px rgba(212,162,60,0.15),
    /* drop shadow */
    0 12px 50px rgba(0,0,0,0.95),
    0 4px 20px rgba(0,0,0,0.8);
}

/* Corner L-brackets */
.player-wrap::before, .player-wrap::after {
  content: '';
  position: absolute;
  width: 12px; height: 12px;
  z-index: 10; pointer-events: none;
}
.player-wrap::before {
  top: -1px; left: -1px;
  border-top: 2px solid rgba(255,230,130,0.85);
  border-left: 2px solid rgba(255,230,130,0.85);
}
.player-wrap::after {
  bottom: -1px; right: -1px;
  border-bottom: 2px solid rgba(255,230,130,0.85);
  border-right: 2px solid rgba(255,230,130,0.85);
}

.player-inner {
  padding: 12px 16px 12px;
  position: relative;
  overflow: hidden;
  /* Brushed-metal subtle texture overlay */
  background:
    repeating-linear-gradient(
      90deg,
      rgba(255,220,100,0.008) 0px,
      transparent 1px,
      transparent 3px,
      rgba(255,220,100,0.006) 4px
    ),
    linear-gradient(180deg,
      rgba(40,28,8,0.4) 0%,
      transparent 8%,
      transparent 92%,
      rgba(40,28,8,0.3) 100%);
}
/* Extra corner brackets on inner */
.player-inner::before, .player-inner::after {
  content: '';
  position: absolute;
  width: 8px; height: 8px;
  z-index: 10; pointer-events: none;
}
.player-inner::before {
  bottom: 0; left: 0;
  border-bottom: 1px solid rgba(212,162,60,0.35);
  border-left: 1px solid rgba(212,162,60,0.35);
}
.player-inner::after {
  top: 0; right: 0;
  border-top: 1px solid rgba(212,162,60,0.35);
  border-right: 1px solid rgba(212,162,60,0.35);
}

.player-label {
  font-family:var(--main-font),sans-serif; font-size:8px; font-weight:600;
  letter-spacing:0.55em; color:var(--gold-dim);
  margin-bottom:10px; display:flex; align-items:center; gap:9px;
  text-transform: uppercase;
}
.player-label::before { content:''; flex:1; height:1px; background:linear-gradient(270deg,rgba(212,162,60,0.3),transparent); }
.player-label::after  { content:''; flex:1; height:1px; background:linear-gradient(90deg,rgba(212,162,60,0.3),transparent); }

/* ── Display box — 3D inset panel ── */
.player-display {
  background: linear-gradient(180deg, rgba(0,0,0,0.9) 0%, rgba(0,18,12,0.85) 100%);
  border-radius: 3px;
  padding: 0;
  margin-bottom: 0;
  position: relative; overflow: hidden;
  height: 62px;
  box-shadow:
    inset 2px 2px 6px rgba(0,0,0,0.95),
    inset -1px -1px 3px rgba(0,60,40,0.15),
    inset 0 0 30px rgba(0,0,0,0.7),
    0 1px 0 rgba(212,162,60,0.12);
  border: 1px solid rgba(0,0,0,0.8);
}
/* Scanlines */
.player-display::after {
  content: '';
  position: absolute; inset: 0;
  background: repeating-linear-gradient(
    0deg, transparent, transparent 3px,
    rgba(0,0,0,0.06) 3px, rgba(0,0,0,0.06) 4px
  );
  pointer-events: none; z-index: 5;
}
#waveCanvas { position:absolute; inset:0; width:100%; height:100%; z-index:1; clip-path: inset(0); }

.player-display-text {
  position:absolute; inset:0; z-index:3;
  display:flex; flex-direction:column;
  align-items:center; justify-content:center; gap:4px;
  pointer-events:none;
}
.marquee-outer {
  width:92%; overflow:hidden; position:relative;
}
.marquee-outer::before { content:''; position:absolute; top:0; bottom:0; left:0; width:22px; z-index:4; background:linear-gradient(90deg,rgba(0,0,0,0.7),transparent); }
.marquee-outer::after  { content:''; position:absolute; top:0; bottom:0; right:0; width:22px; z-index:4; background:linear-gradient(270deg,rgba(0,0,0,0.7),transparent); }
.marquee-track {
  display:inline-block; white-space:nowrap;
  font-family:var(--main-font),sans-serif; font-size:16px; letter-spacing:0.12em;
  color:#3dffc0;
  text-shadow: 0 0 8px rgba(0,230,170,0.9), 0 0 20px rgba(0,180,130,0.55), 0 0 40px rgba(0,140,100,0.3);
  animation: marqueeScroll 16s linear infinite, trackGlow 2.5s ease-in-out infinite alternate;
  padding-left: 100%;
}
.player-display:hover .marquee-track { animation-play-state: paused; }
@keyframes marqueeScroll { 0%{transform:translateX(0)} 100%{transform:translateX(-100%)} }
@keyframes trackGlow {
  from { color:#2eefaf; text-shadow:0 0 5px rgba(0,200,150,0.7),0 0 14px rgba(0,160,120,0.4); }
  to   { color:#5fffcc; text-shadow:0 0 12px rgba(60,255,200,1),0 0 28px rgba(0,210,160,0.75),0 0 55px rgba(0,160,120,0.45); }
}
.player-track-meta {
  font-family:var(--main-font),sans-serif; font-size:7px; letter-spacing:0.28em;
  color:rgba(0,200,150,0.4); text-transform:uppercase;
}

/* Progress bar — chrome rail */
.player-progress-wrap {
  height: 5px;
  background: rgba(0,0,0,0.85);
  cursor: pointer; position: relative;
  box-shadow: inset 0 1px 3px rgba(0,0,0,0.95), inset 0 -1px 0 rgba(212,162,60,0.12);
  border-top: 1px solid rgba(80,60,15,0.3);
  border-bottom: 1px solid rgba(212,162,60,0.15);
}
.player-progress-bar {
  height:100%;
  background: linear-gradient(90deg, #7a5c1e, #e8c06a, #f8dfa0, #c9973a);
  width:0%; transition:width 0.25s linear;
  box-shadow: 0 0 8px rgba(212,162,60,0.8), 0 0 2px rgba(255,235,160,1);
}
.player-progress-wrap:hover .player-progress-bar { box-shadow: 0 0 14px rgba(248,210,110,1); }

/* ── CONTROLS PANEL — Chrome-metallic raised slab + shimmer sweep ── */
.player-controls {
  display:flex; align-items:center; justify-content:center;
  gap:0; padding:10px 14px 9px;
  background: linear-gradient(180deg,
    rgba(55,40,12,0.98) 0%,
    rgba(35,24,6,0.99) 8%,
    rgba(18,11,3,0.99) 45%,
    rgba(12,8,2,0.99) 70%,
    rgba(28,18,5,0.98) 92%,
    rgba(45,32,10,0.98) 100%);
  box-shadow:
    inset 0 1px 0 rgba(255,230,120,0.30),
    inset 0 2px 4px rgba(255,220,80,0.08),
    inset 0 -1px 0 rgba(0,0,0,0.85),
    inset 0 -2px 4px rgba(0,0,0,0.4),
    inset 1px 0 rgba(255,220,80,0.10),
    inset -1px 0 rgba(0,0,0,0.5);
  border-top: 1px solid rgba(200,155,40,0.45);
  border-bottom: 1px solid rgba(120,90,20,0.25);
  position: relative;
  overflow: visible;
}
/* Gold-chrome shimmer sweep — pseudo-element gliding left->right */
.player-controls::before {
  content: '';
  position: absolute;
  top: -20%; left: -80%;
  width: 55%; height: 140%;
  background: linear-gradient(
    105deg,
    transparent 0%,
    transparent 30%,
    rgba(255,235,140,0.03) 38%,
    rgba(255,220,100,0.10) 45%,
    rgba(255,245,180,0.18) 50%,
    rgba(255,220,100,0.10) 55%,
    rgba(255,235,140,0.03) 62%,
    transparent 70%,
    transparent 100%
  );
  animation: sheenSweep 4s ease-in-out infinite;
  pointer-events: none; z-index: 20;
  transform: skewX(-15deg);
}
/* The right-side rivet — using after only */
.player-controls::after {
  content:''; position:absolute; top:8px; right:10px;
  width:4px; height:4px; border-radius:50%;
  background:radial-gradient(circle at 35% 35%, #d4a23c, #2a1604);
  box-shadow: 0 1px 3px rgba(0,0,0,0.8), 0 0 4px rgba(212,162,60,0.3);
  pointer-events:none; z-index:21;
}
/* Left rivet via player-inner */
.player-inner > .player-controls-rivet-l {
  display: none;
}
@keyframes sheenSweep {
  0%   { left: -80%; opacity: 0; }
  8%   { opacity: 1; }
  60%  { left: 130%; opacity: 1; }
  65%  { opacity: 0; }
  100% { left: 130%; opacity: 0; }
}

/* ── FLAT SHIMMER BUTTONS ── */
.player-btn {
  position:relative; width:56px; height:56px;
  background:none; border:none; cursor:pointer;
  display:flex; align-items:center; justify-content:center;
  flex-shrink:0; transition:transform 0.12s; margin:0 2px;
}
.player-btn .btn-sym {
  font-size:22px; font-family:var(--main-font),sans-serif;
  filter: drop-shadow(0 2px 3px rgba(0,0,0,0.95)) drop-shadow(0 0 5px rgba(180,130,30,0.3));
  transition:filter 0.2s, transform 0.12s; display:inline-flex; align-items:center; justify-content:center; gap:2px;
}
/* Border-based gold triangles — works on every browser */
.tp-tri-r, .tp-tri-l {
  display:inline-block; width:0; height:0;
  border-top:11px solid transparent;
  border-bottom:11px solid transparent;
}
.tp-tri-r { border-left:14px solid #d4a23c; }
.tp-tri-l { border-right:14px solid #d4a23c; }
.tp-tri-r.tp-lg {
  border-top-width:13px; border-bottom-width:13px;
  border-left-width:18px;
}
.tp-bar {
  display:inline-block; width:7px; height:24px;
  background:#d4a23c; border-radius:1px;
}
.player-btn:hover .btn-sym {
  filter: drop-shadow(0 2px 3px rgba(0,0,0,0.9))
          drop-shadow(0 0 10px rgba(255,220,80,0.9))
          drop-shadow(0 0 22px rgba(212,162,60,0.6));
  transform:scale(1.15);
}
.player-btn:active { transform:scale(0.92); }
.player-btn.play-pause .btn-sym { gap:4px; }
.player-btn.play-pause.playing .btn-sym {
  animation:playShimmer 1.6s ease-in-out infinite alternate;
}
@keyframes playShimmer {
  from { filter:drop-shadow(0 2px 3px rgba(0,0,0,0.9)) drop-shadow(0 0 8px rgba(255,200,60,0.7)); }
  to   { filter:drop-shadow(0 2px 3px rgba(0,0,0,0.9)) drop-shadow(0 0 18px rgba(255,245,120,1)) drop-shadow(0 0 38px rgba(212,162,60,0.7)); }
}

/* ── KNOB BASE ── */
.knob-wrap { display:flex; flex-direction:column; align-items:center; justify-content:flex-end; gap:4px; margin:0 6px; }
.knob-label {
  font-family:var(--main-font),sans-serif; font-size:8px; letter-spacing:0.30em;
  text-transform:uppercase; color:#96e4ff; opacity:0.95;
  text-shadow: 0 0 8px rgba(120,225,255,0.55);
  transition:color 0.3s, opacity 0.3s, text-shadow 0.3s;
}
canvas.knob { cursor:pointer; display:block; touch-action:none; }
.knob-wrap.lit canvas.knob {
  filter:drop-shadow(0 0 8px rgba(212,162,60,0.85)) drop-shadow(0 0 20px rgba(212,162,60,0.4));
}
.knob-wrap.lit .knob-label { color:var(--gold-bright); opacity:1; text-shadow:0 0 6px rgba(212,162,60,0.7); }
/* VID knob — phthalo green LED */
.knob-wrap.lit-vid canvas.knob {
  filter: drop-shadow(0 0 8px rgba(61,255,140,0.95)) drop-shadow(0 0 22px rgba(30,200,100,0.6)) drop-shadow(0 0 40px rgba(20,160,80,0.3));
}
.knob-wrap.lit-vid .knob-label { color:#3dff8c; opacity:1; text-shadow:0 0 8px rgba(61,255,140,0.9); }
/* MP3 knob — turquoise LED */
.knob-wrap.lit-mp3 canvas.knob {
  filter: drop-shadow(0 0 8px rgba(61,220,255,0.95)) drop-shadow(0 0 22px rgba(30,170,220,0.6)) drop-shadow(0 0 40px rgba(20,140,200,0.3));
}
.knob-wrap.lit-mp3 .knob-label { color:#3ddcff; opacity:1; text-shadow:0 0 8px rgba(61,220,255,0.9); }
.player-sep::before {
  content:'\25C8'; position:absolute; top:50%; left:50%;
  transform:translate(-50%,-50%);
  font-size:6px; color:rgba(212,162,60,0.35);
}
.player-spacer { flex:1; min-width:6px; }

/* Playlist — only 3 rows visible */
.playlist-wrap {
  max-height: 78px;
  overflow-y: auto;
  border-top: none;
  padding-top: 0;
  margin-top: 0;
  scrollbar-width: thin;
  scrollbar-color: rgba(212,162,60,0.3) transparent;
}
.playlist-wrap::-webkit-scrollbar { width: 2px; }
.playlist-wrap::-webkit-scrollbar-track { background: transparent; }
.playlist-wrap::-webkit-scrollbar-thumb { background: rgba(212,162,60,0.3); border-radius: 2px; }
.playlist-item {
  display: flex; align-items: center; gap: 8px;
  padding: 5px 7px; cursor: pointer;
  border-bottom: 1px solid rgba(212,162,60,0.06);
  transition: background 0.2s;
}
.playlist-item:last-child { border-bottom: none; }
.playlist-item:hover { background: rgba(212,162,60,0.06); }
.playlist-item.active { background: rgba(0,40,80,0.75); box-shadow: inset 0 0 12px rgba(0,160,255,0.12), inset 0 0 3px rgba(0,120,220,0.25); }
.playlist-item.active .pl-name { color: #a8e6ff; text-shadow: 0 0 8px rgba(100,220,255,0.9), 0 0 20px rgba(80,190,255,0.5); }
.pl-num { font-family:var(--main-font),sans-serif; font-size:7px; color:var(--gold-dim); opacity:0.5; width:14px; text-align:right; flex-shrink:0; }
.pl-name { font-family:var(--main-font),sans-serif; font-size:13px; font-weight:600; color:#7dd8f8; text-shadow: 0 0 6px #7dd8f8, 0 0 15px rgba(100,210,255,1), 0 0 30px rgba(60,180,255,0.65); flex:1; }
.pl-dur  { font-family:var(--main-font),sans-serif; font-size:8px; color:var(--gold-dim); opacity:0.4; flex-shrink:0; }
.pl-playing-dot { width:4px; height:4px; border-radius:50%; background:var(--gold-bright); box-shadow:0 0 5px rgba(212,162,60,0.8); flex-shrink:0; animation: dotPulse 1s ease-in-out infinite alternate; display:none; }
.playlist-item.active .pl-playing-dot { display:block; }
@keyframes dotPulse { from{opacity:0.5} to{opacity:1} }

.player-hint {
  font-family:var(--main-font),sans-serif; font-size:8px; letter-spacing:0.1em;
  color:var(--gold-dim); opacity:0.35; margin-top:8px; line-height:1.2;
  text-align: center;
}
/* ══════════════════════════════════════════
   ADMIN — hidden 20x20 button, bottom-right
══════════════════════════════════════════ */
#adminBtn {
  position: fixed;
  bottom: 0; right: 0;
  width: 20px; height: 20px;
  background: rgba(0,0,0,0.01);
  border: none; cursor: pointer;
  z-index: 9997;
  opacity: 0;
}
#adminBtn:hover { opacity: 1; background: rgba(212,162,60,0.08); }

/* Modal overlay */
.modal-overlay {
  display: none;
  position: fixed; inset: 0;
  background: rgba(0,0,0,0.82);
  backdrop-filter: blur(4px);
  z-index: 10000;
  align-items: center; justify-content: center;
}
.modal-overlay.open { display: flex; }

.modal-box {
  background: linear-gradient(160deg, rgba(35,22,6,0.99) 0%, rgba(8,5,2,1) 100%);
  border: 1px solid rgba(212,162,60,0.35);
  box-shadow: 0 0 60px rgba(0,0,0,0.9), 0 0 30px rgba(212,162,60,0.1);
  padding: 36px 40px 32px;
  width: 320px;
  position: relative;
  animation: modalIn 0.25s ease both;
}
@keyframes modalIn { from{opacity:0;transform:translateY(-12px)} to{opacity:1;transform:translateY(0)} }
.modal-title {
  font-family: var(--main-font), sans-serif;
  font-size: 11px; font-weight: 700; letter-spacing: 0.4em;
  color: var(--gold-bright); text-transform: uppercase;
  margin-bottom: 24px; text-align: center;
}
.modal-subtitle {
  font-family: var(--main-font), sans-serif;
  font-size: 9px; letter-spacing: 0.25em;
  color: var(--gold-dim); opacity: 0.55;
  text-align: center; margin-bottom: 20px;
}
.modal-input {
  background: rgba(0,0,0,0.6);
  border: 1px solid rgba(212,162,60,0.2);
  color: var(--gold-bright);
  font-family: var(--main-font), sans-serif;
  font-size: 16px; letter-spacing: 0.35em;
  padding: 12px 14px; width: 100%;
  outline: none; text-align: center;
  margin-bottom: 14px;
  transition: border-color 0.2s, box-shadow 0.2s;
}
.modal-input:focus { border-color: var(--gold); box-shadow: 0 0 12px rgba(212,162,60,0.25); }
.modal-input::placeholder { opacity: 0.3; font-size: 12px; }
.modal-btn {
  font-family: var(--main-font), sans-serif;
  font-size: 9px; font-weight: 700; letter-spacing: 0.4em;
  color: var(--gold); background: transparent;
  border: 1px solid rgba(212,162,60,0.35);
  padding: 11px; width: 100%; cursor: pointer;
  transition: all 0.2s; margin-bottom: 8px;
}
.modal-btn:hover { background: rgba(212,162,60,0.1); border-color: var(--gold); color: var(--gold-bright); }
.modal-btn.secondary { border-color: rgba(212,162,60,0.15); color: var(--gold-dim); font-size: 8px; }
.modal-close {
  position: absolute; top: 12px; right: 14px;
  background: none; border: none; color: var(--gold-dim);
  font-size: 14px; cursor: pointer; opacity: 0.5;
  transition: opacity 0.2s;
}
.modal-close:hover { opacity: 1; }
.modal-err {
  font-family: var(--main-font), sans-serif;
  font-size: 9px; letter-spacing: 0.2em;
  color: #e05050; text-align: center;
  margin-bottom: 10px; min-height: 14px;
}
.modal-ok {
  font-family: var(--main-font), sans-serif;
  font-size: 9px; color: #50c878; text-align: center;
  margin-bottom: 10px; min-height: 14px;
}

/* ── Admin view indicator ── */
#adminBar {
  display: none;
  position: fixed; top: 0; left: 0; right: 0;
  min-height: 36px;
  background: linear-gradient(90deg, rgba(10,6,2,0.97), rgba(18,11,3,0.97));
  border-bottom: 1px solid rgba(212,162,60,0.3);
  z-index: 9990;
  align-items: center; justify-content: space-between;
  padding: 0 14px;
  gap: 12px;
  flex-wrap: wrap;
}
#adminBar.visible { display: flex; }
.adminbar-label {
  font-family: var(--main-font), sans-serif;
  font-size: 8px; letter-spacing: 0.4em; color: var(--gold-bright);
  text-transform: uppercase; white-space: nowrap;
}
.adminbar-hint {
  font-family: var(--main-font), sans-serif;
  font-size: 9px; color: var(--gold-dim); opacity: 0.6;
}
.adminbar-logout {
  font-family: var(--main-font), sans-serif; font-size: 8px; letter-spacing: 0.3em;
  color: var(--gold-dim); background: none; border: 1px solid rgba(212,162,60,0.2);
  padding: 3px 10px; cursor: pointer; transition: all 0.2s; white-space: nowrap;
}
.adminbar-logout:hover { border-color: var(--gold); color: var(--gold); }

/* ── Theme preset pill buttons ── */
.theme-pill {
  font-family: var(--main-font), sans-serif;
  font-size: 7px; letter-spacing: 0.28em;
  text-transform: uppercase;
  border: 1px solid rgba(255,255,255,0.15);
  background: rgba(0,0,0,0.4);
  color: rgba(255,255,255,0.55);
  padding: 3px 10px 3px 8px;
  cursor: pointer;
  transition: all 0.22s;
  display: flex; align-items: center; gap: 5px;
  white-space: nowrap;
}
.theme-pill:hover { border-color: rgba(255,255,255,0.4); color: #fff; background: rgba(255,255,255,0.07); }
.theme-pill.active { color: #fff; border-color: rgba(255,255,255,0.55); background: rgba(255,255,255,0.12); }
.theme-pill .t-dot {
  width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0;
}

/* ── Drag-and-drop editable zones ── */
.editable-zone {
  position: relative;
}
body.admin-mode .editable-zone {
  outline: 1px dashed rgba(212,162,60,0.25);
  outline-offset: 3px;
}
body.admin-mode .editable-zone:hover {
  outline-color: rgba(212,162,60,0.6);
}
.edit-handle {
  display: none;
  position: absolute; top: 4px; right: 4px;
  background: rgba(212,162,60,0.15);
  border: 1px solid rgba(212,162,60,0.4);
  color: var(--gold);
  font-family: var(--main-font), sans-serif;
  font-size: 7px; letter-spacing: 0.2em;
  padding: 3px 8px; cursor: pointer;
  z-index: 5; transition: all 0.2s;
}
body.admin-mode .editable-zone:hover .edit-handle { display: block; }
.edit-handle:hover { background: rgba(212,162,60,0.25); }

.drop-zone {
  display: none;
  border: 2px dashed rgba(212,162,60,0.3);
  padding: 20px;
  text-align: center;
  cursor: pointer;
  transition: all 0.2s;
  margin-top: 8px;
}
body.admin-mode .drop-zone { display: block; }
.drop-zone.drag-over { border-color: var(--gold); background: rgba(212,162,60,0.05); }
.drop-zone-label {
  font-family: var(--main-font), sans-serif;
  font-size: 9px; letter-spacing: 0.2em;
  color: var(--gold-dim); opacity: 0.5;
}

/* Edit text popup */
.edit-popup {
  display: none;
  position: fixed; inset: 0;
  background: rgba(0,0,0,0.75);
  z-index: 10001;
  align-items: center; justify-content: center;
}
.edit-popup.open { display: flex; }
.edit-popup-box {
  background: linear-gradient(160deg, rgba(35,22,6,0.99) 0%, rgba(8,5,2,1) 100%);
  border: 1px solid rgba(212,162,60,0.35);
  padding: 28px; width: 500px; max-width: 92vw;
  animation: modalIn 0.2s ease both;
}
.edit-popup-title {
  font-family: var(--main-font), sans-serif; font-size: 9px;
  letter-spacing: 0.4em; color: var(--gold-dim);
  text-transform: uppercase; margin-bottom: 14px;
}
.edit-textarea {
  width: 100%; min-height: 100px;
  background: rgba(0,0,0,0.5);
  border: 1px solid rgba(212,162,60,0.2);
  color: var(--text-body);
  font-family: var(--main-font), sans-serif; font-size: 13px;
  padding: 10px 12px; outline: none; resize: vertical;
  line-height: 1.3; margin-bottom: 12px;
}
.edit-textarea:focus { border-color: rgba(212,162,60,0.45); }
.edit-popup-btns { display: flex; gap: 8px; }
.edit-save-btn { flex: 1; }

/* Track list editor (admin-only) */
.track-editor {
  display: none;
  margin-top: 12px;
  border-top: 1px solid rgba(212,162,60,0.12);
  padding-top: 12px;
}
body.admin-mode .track-editor { display: block; }
.track-editor-title {
  font-family: var(--main-font), sans-serif; font-size: 8px;
  letter-spacing: 0.4em; color: var(--gold-dim);
  text-transform: uppercase; margin-bottom: 10px; opacity: 0.6;
}
.track-row {
  display: grid; grid-template-columns: auto 1fr 1fr auto;
  gap: 6px; margin-bottom: 6px; align-items: center;
}
.track-move-btns {
  display: flex; flex-direction: column; gap: 2px;
}
.track-move-btn {
  background: none; border: 1px solid rgba(212,162,60,0.15);
  color: var(--gold-dim); font-size: 9px; line-height: 1;
  width: 20px; height: 14px;
  cursor: pointer; transition: all 0.2s; padding: 0;
  display: flex; align-items: center; justify-content: center;
}
.track-move-btn:hover { border-color: var(--gold); color: var(--gold); }
.track-move-btn:disabled { opacity: 0.2; cursor: default; }
.track-input {
  background: rgba(0,0,0,0.4);
  border: 1px solid rgba(212,162,60,0.12);
  color: var(--text-body);
  font-family: var(--main-font), sans-serif; font-size: 11px;
  padding: 5px 8px; outline: none;
}
.track-input:focus { border-color: rgba(212,162,60,0.3); }
.track-del-btn {
  background: none; border: 1px solid rgba(200,60,60,0.2);
  color: rgba(200,80,80,0.6); font-size: 11px;
  width: 24px; height: 24px;
  cursor: pointer; transition: all 0.2s;
}
.track-del-btn:hover { border-color: rgba(200,60,60,0.6); color: #e05050; }
.add-track-btn {
  font-family: var(--main-font), sans-serif; font-size: 8px;
  letter-spacing: 0.3em; color: var(--gold-dim);
  background: none; border: 1px dashed rgba(212,162,60,0.2);
  padding: 7px; width: 100%; cursor: pointer;
  margin-top: 4px; transition: all 0.2s;
}
.add-track-btn:hover { border-color: rgba(212,162,60,0.5); color: var(--gold); }
/* ── MP3 drop zone on player (admin only) ── */
body.admin-mode #bannerVideoAdmin { display:flex !important; }
#mp3DropZone {
  display: none;
  margin-top: 12px;
  border: 2px dashed rgba(0,180,130,0.3);
  padding: 18px 14px;
  text-align: center;
  cursor: default;
  transition: all 0.2s;
  background: rgba(0,0,0,0.3);
}
body.admin-mode #mp3DropZone { display: block; }
#mp3DropZone.drag-over {
  border-color: #3dffc0;
  background: rgba(0,180,130,0.06);
  box-shadow: inset 0 0 20px rgba(0,180,130,0.08);
}
#mp3DropZone .dz-label {
  font-family: var(--main-font), sans-serif;
  font-size: 10px; letter-spacing: 0.22em;
  color: rgba(0,180,130,0.55);
}
#mp3DropZone.drag-over .dz-label { color: #3dffc0; }
/* Also a file-browse fallback */
#mp3FileInput { display: none; }
#mp3BrowseBtn {
  font-family: var(--main-font), sans-serif; font-size: 8px;
  letter-spacing: 0.3em; color: var(--gold-dim);
  background: none; border: 1px solid rgba(212,162,60,0.15);
  padding: 5px 12px; cursor: pointer; margin-top: 8px;
  transition: all 0.2s; display: none;
}
body.admin-mode #mp3BrowseBtn { display: inline-block; }
#mp3BrowseBtn:hover { border-color: rgba(212,162,60,0.45); color: var(--gold); }
/* ── Universal editable slot overlay (admin mode) ── */
.embed-slot {
  position: relative;
  overflow: hidden;
}
body.admin-mode .embed-slot::after {
  content: '\270E CLICK TO EDIT';
  position: absolute; inset: 0;
  background: rgba(0,0,0,0.55);
  display: flex; align-items: center; justify-content: center;
  font-family: var(--main-font), sans-serif;
  font-size: 9px; letter-spacing: 0.35em;
  color: var(--gold-bright);
  opacity: 0;
  transition: opacity 0.2s;
  cursor: pointer;
  z-index: 10;
}
body.admin-mode .embed-slot:hover::after { opacity: 1; }

/* ── Media description overlay (hover tooltip + admin editable) ── */
.media-desc-overlay {
  position: absolute;
  bottom: 0; left: 0; right: 0;
  background: linear-gradient(0deg, rgba(0,0,0,0.88) 0%, rgba(0,0,0,0.45) 65%, transparent 100%);
  padding: 18px 10px 8px;
  opacity: 0;
  transition: opacity 0.3s ease;
  pointer-events: none;
  z-index: 8;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
}
.embed-slot:hover .media-desc-overlay.has-desc,
#bannerWrap:hover .media-desc-overlay.has-desc { opacity: 1; }
body.admin-mode .embed-slot:hover .media-desc-overlay,
body.admin-mode #bannerWrap:hover .media-desc-overlay {
  opacity: 1;
  pointer-events: auto;
}
.media-desc-text {
  font-family: var(--main-font), sans-serif;
  font-size: 9px;
  letter-spacing: 0.1em;
  color: var(--gold-pale);
  text-align: center;
  line-height: 1.45;
  max-height: 56px;
  overflow: hidden;
}
.media-desc-edit {
  position: relative !important;
  top: auto !important; right: auto !important;
  margin-top: 3px;
  display: none !important;
  font-size: 8px !important;
  padding: 2px 8px !important;
  letter-spacing: 0.2em !important;
}
body.admin-mode .embed-slot:hover .media-desc-edit,
body.admin-mode #bannerWrap:hover .media-desc-edit { display: inline-block !important; }

/* ── MEDIA SUBLABEL ROW (below image slots) ── */
.media-sublabel-row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2px;
  padding: 2px 0 1px;
  margin: 0;
}
.media-sublabel-cell {
  position: relative;
  text-align: center;
  line-height: 1.1;
  min-height: 14px;
  padding: 0 4px;
}
.media-sublabel {
  display: inline-block;
  font-family: 'Cinzel', serif;
  font-size: 12px;
  font-weight: 600;
  color: var(--gold-bright, #E6B422);
  letter-spacing: 0.15em;
  text-transform: uppercase;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
  line-height: 1.1;
}
.media-sublabel-edit {
  position: relative !important;
  display: none !important;
  margin-left: 4px;
  font-size: 8px !important;
  padding: 1px 6px !important;
  letter-spacing: 0.2em !important;
  vertical-align: middle;
}
body.admin-mode .media-sublabel-edit { display: inline-block !important; }
@media (max-width: 640px) {
  .media-sublabel { font-size: 10px; letter-spacing: 0.08em; }
  .media-sublabel-cell { padding: 0 2px; }
}

/* ── TEMPLE ENTRANCE HOVER — glow + "Enter ..." overlay ── */
.embed-slot[data-enter-text] {
  cursor: pointer;
  transition: filter 0.35s ease, box-shadow 0.35s ease, transform 0.35s ease;
}
.embed-slot[data-enter-text]:hover {
  filter: brightness(1.18) saturate(1.1);
  box-shadow: 0 0 28px rgba(230, 180, 34, 0.6), inset 0 0 12px rgba(230, 180, 34, 0.35);
  transform: translateY(-1px);
}
.embed-slot[data-enter-text]::before {
  content: attr(data-enter-text);
  position: absolute;
  top: 0; left: 0; right: 0;
  padding: 5px 6px;
  background: rgba(0, 0, 0, 0.82);
  color: var(--enter-color, #FFD54F);
  font-family: var(--enter-font, 'Cinzel'), serif;
  font-size: var(--enter-size, 11px);
  font-weight: var(--enter-weight, 600);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  text-align: center;
  border-bottom: 1px solid rgba(230, 180, 34, 0.55);
  pointer-events: none;
  z-index: 10;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  opacity: 0;
  transform: translateY(-100%);
  transition: opacity 0.3s ease, transform 0.3s ease;
}
.embed-slot[data-enter-text]:hover::before {
  opacity: 1;
  transform: translateY(0);
}
.embed-slot.teal[data-enter-text]:hover {
  box-shadow: 0 0 28px rgba(46, 153, 144, 0.6), inset 0 0 12px rgba(46, 153, 144, 0.35);
}
.embed-slot.teal[data-enter-text]::before {
  color: var(--enter-color, #87E6DD);
  border-bottom-color: rgba(46, 153, 144, 0.7);
}
/* Purgatorium — light red glow */
#mood2.embed-slot[data-enter-text]:hover {
  box-shadow: 0 0 30px rgba(255, 120, 120, 0.7), inset 0 0 14px rgba(255, 120, 120, 0.4);
}
#mood2.embed-slot[data-enter-text]::before {
  color: var(--enter-color, #FFB0B0);
  border-bottom-color: rgba(255, 120, 120, 0.75);
}
@media (max-width: 640px) {
  .embed-slot[data-enter-text]::before {
    font-size: var(--enter-size, 9px);
    letter-spacing: 0.08em;
    padding: 3px 4px;
  }
  /* Mobile: only the center temple PNG visible per gallery, bigger */
  #here .media-grid,
  #colab .media-grid,
  #spirit .media-grid {
    grid-template-columns: 1fr !important;
  }
  #here .media-grid > .slot:not(#img2),
  #colab .media-grid > .slot:not(#collabBox2),
  #spirit .media-grid > .slot:not(#mood2) {
    display: none !important;
  }
  #here .media-sublabel-row,
  #colab .media-sublabel-row,
  #spirit .media-sublabel-row {
    grid-template-columns: 1fr !important;
  }
  #here .media-sublabel-row > .media-sublabel-cell:nth-child(1),
  #here .media-sublabel-row > .media-sublabel-cell:nth-child(3),
  #colab .media-sublabel-row > .media-sublabel-cell:nth-child(1),
  #colab .media-sublabel-row > .media-sublabel-cell:nth-child(3),
  #spirit .media-sublabel-row > .media-sublabel-cell:nth-child(1),
  #spirit .media-sublabel-row > .media-sublabel-cell:nth-child(3) {
    display: none !important;
  }
  #img2, #collabBox2, #mood2 {
    aspect-ratio: 1 / 1;
    max-width: 92vw;
    margin: 0 auto;
  }
}

/* Video embed slot — responsive 16:9 */
.vid-slot {
  position: relative;
  width: 100%; aspect-ratio: 16/9;
  background: linear-gradient(135deg, var(--teal-dark), var(--black));
  border: 1px solid rgba(46,153,144,0.1);
  overflow: hidden;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer;
  transition: border-color 0.2s;
}
.vid-slot:hover { border-color: rgba(46,153,144,0.28); }
.vid-slot iframe, .vid-slot video {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  border: none;
}
.vid-slot .slot-ph {
  display: flex; flex-direction: column; align-items: center; gap: 6px;
  pointer-events: none;
}
.vid-slot .slot-ph .slot-icon { font-size: 22px; opacity: 0.3; }
.vid-slot .slot-ph .slot-lbl {
  font-family: var(--main-font), sans-serif;
  font-size: 9px; letter-spacing: 0.25em;
  color: var(--teal-glow); opacity: 0.4;
}
.vid-slot.has-content .slot-ph { display: none; }

/* Text/lyric editable blocks */
.txt-slot {
  position: relative; cursor: default;
}
body.admin-mode .txt-slot {
  outline: 1px dashed rgba(212,162,60,0.2);
  outline-offset: 4px;
}
body.admin-mode .txt-slot:hover {
  outline-color: rgba(212,162,60,0.5);
}

/* Edit embed popup */
#embedPopup {
  display: none; position: fixed; inset: 0;
  background: rgba(0,0,0,0.82); backdrop-filter: blur(4px);
  z-index: 10002; align-items: center; justify-content: center;
}
#embedPopup.open { display: flex; }
.embed-popup-box {
  background: linear-gradient(160deg, rgba(35,22,6,0.99) 0%, rgba(8,5,2,1) 100%);
  border: 1px solid rgba(212,162,60,0.35);
  padding: 28px 32px 24px;
  width: 540px; max-width: 94vw;
  animation: modalIn 0.2s ease both;
  position: relative;
}
.embed-popup-title {
  font-family: var(--main-font), sans-serif; font-size: 9px;
  letter-spacing: 0.4em; color: var(--gold-dim);
  text-transform: uppercase; margin-bottom: 8px;
}
.embed-popup-hint {
  font-family: var(--main-font), sans-serif; font-size: 9px;
  color: var(--gold-dim); opacity: 0.5; margin-bottom: 14px; line-height: 1.7;
}
#embedTextarea {
  width: 100%; min-height: 80px;
  background: rgba(0,0,0,0.6);
  border: 1px solid rgba(212,162,60,0.2);
  color: var(--text-body);
  font-family: var(--main-font), sans-serif; font-size: 11px;
  padding: 10px 12px; outline: none; resize: vertical;
  line-height: 1.6; margin-bottom: 12px;
}
#embedTextarea:focus { border-color: rgba(212,162,60,0.45); }
.embed-popup-btns { display: flex; gap: 8px; }

/* ── VIDEO OVERLAY CONTROLS ── */
#vidOverlay { opacity:0; pointer-events:none; }
#bannerWrap:hover #vidOverlay { opacity:1; pointer-events:auto; }
.vid-ctrl-btn {
  -webkit-appearance: none; appearance: none;
  background: none;
  border: none;
  width: 56px; height: 56px;
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  filter: drop-shadow(0 2px 4px rgba(0,0,0,0.9)) drop-shadow(0 0 8px rgba(212,162,60,0.5)) drop-shadow(0 0 16px rgba(255,200,50,0.25));
  transition: filter 0.2s, transform 0.1s;
  flex-shrink: 0;
}
.vid-ctrl-btn:hover { filter: drop-shadow(0 2px 6px rgba(0,0,0,0.8)) drop-shadow(0 0 14px rgba(255,220,80,0.9)) drop-shadow(0 0 28px rgba(255,200,50,0.5)); transform: scale(1.12); }
.vid-ctrl-btn:active { transform: scale(0.92); }
.vid-play-btn { width: 64px; height: 64px; }

/* ═══════════════════════════════════════════
   SOCIAL BAR
═══════════════════════════════════════════ */
.social-bar {
  background: linear-gradient(160deg, rgba(28,17,4,0.99) 0%, rgba(8,5,2,1) 100%);
  border-top: 1px solid rgba(212,162,60,0.15);
  border-bottom: 1px solid rgba(212,162,60,0.1);
  position: relative;
  margin-top: 2px;
  box-shadow:
    inset 1px 1px 0 rgba(255,220,100,0.12),
    inset -1px -1px 0 rgba(0,0,0,0.6),
    0 0 0 1px rgba(140,100,20,0.4),
    0 0 0 3px rgba(4,2,0,1),
    0 0 0 4px rgba(180,130,30,0.3),
    0 0 0 6px rgba(4,2,0,1),
    0 4px 24px rgba(0,0,0,0.8);
}
.social-bar::before, .social-bar::after {
  content: '';
  position: absolute;
  width: 10px; height: 10px;
  z-index: 10; pointer-events: none;
}
.social-bar::before { top:-1px; left:-1px; border-top:2px solid rgba(248,210,110,0.6); border-left:2px solid rgba(248,210,110,0.6); }
.social-bar::after  { bottom:-1px; right:-1px; border-bottom:2px solid rgba(248,210,110,0.6); border-right:2px solid rgba(248,210,110,0.6); }

.social-bar-inner {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0;
  padding: 3px 30px;  /* was 18px — reduced 15px top+bottom */
}

.soc-link {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0;
  text-decoration: none;
  padding: 8px 32px;
  position: relative;
  transition: transform 0.3s;
}
.soc-link + .soc-link::before {
  content: '';
  position: absolute; left: 0; top: 20%; height: 60%;
  width: 1px;
  background: linear-gradient(180deg, transparent, rgba(212,162,60,0.18), transparent);
}

/* Metallic gold gradient — applied via SVG linearGradient inside each icon */
.soc-icon {
  width: 54px; height: 54px;
  display: block;
  animation: socShimmer 4.5s ease-in-out infinite alternate;
  transition: filter 0.35s, transform 0.3s;
}

.soc-link:nth-child(1) .soc-icon { animation-delay: 0s; }
.soc-link:nth-child(2) .soc-icon { animation-delay: 0.9s; }
.soc-link:nth-child(3) .soc-icon { animation-delay: 1.8s; }
.soc-link:nth-child(4) .soc-icon { animation-delay: 2.7s; }
.soc-link:nth-child(5) .soc-icon { animation-delay: 3.6s; }

@keyframes socShimmer {
  0%   { filter: drop-shadow(0 0 4px rgba(212,162,60,0.3))  drop-shadow(0 2px 6px rgba(0,0,0,0.8));  opacity: 0.70; }
  50%  { filter: drop-shadow(0 0 10px rgba(248,210,80,0.66)) drop-shadow(0 2px 6px rgba(0,0,0,0.7)); opacity: 0.95; }
  100% { filter: drop-shadow(0 0 6px rgba(248,220,100,0.42))drop-shadow(0 2px 6px rgba(0,0,0,0.8));  opacity: 0.80; }
}

/* Hover — 20% stronger glow than before */
.soc-link:hover .soc-icon {
  animation: none;
  opacity: 1;
  filter:
    drop-shadow(0 0 12px rgba(255,220,80,1))
    drop-shadow(0 0 28px rgba(212,162,60,1))
    drop-shadow(0 0 58px rgba(212,162,60,0.48));
  transform: scale(1.14) translateY(-3px);
}
.soc-link:hover { transform: none; }

/* ── Social icon tooltip ── */
.soc-link::after {
  content: attr(data-tooltip);
  position: absolute;
  bottom: calc(100% + 10px);
  left: 50%; transform: translateX(-50%) translateY(4px);
  background: linear-gradient(160deg, rgba(35,22,6,0.98) 0%, rgba(8,5,2,1) 100%);
  border: 1px solid rgba(212,162,60,0.4);
  color: var(--gold-bright);
  font-family: var(--main-font), sans-serif;
  font-size: 8px; letter-spacing: 0.35em;
  text-transform: uppercase;
  padding: 5px 12px;
  white-space: nowrap;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.22s ease, transform 0.22s ease;
  box-shadow: 0 4px 14px rgba(0,0,0,0.7), 0 0 8px rgba(212,162,60,0.15);
  z-index: 20;
}
/* small arrow pointing down */
.soc-link:hover::after {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

/* ── Admin link editor ── */
.soc-admin-panel {
  display: none;
  padding: 14px 30px 18px;
  border-top: 1px solid rgba(212,162,60,0.1);
  background: rgba(0,0,0,0.3);
  overflow: hidden;
}
body.admin-mode .soc-admin-panel { display: block; }
.soc-admin-title {
  font-family: var(--main-font), sans-serif;
  font-size: 8px; letter-spacing: 0.45em;
  color: var(--gold-dim); opacity: 0.7;
  text-transform: uppercase; margin-bottom: 12px;
}
.soc-admin-grid { display: flex; flex-direction: column; gap: 7px; margin-bottom: 14px; }
.soc-admin-row { display: grid; grid-template-columns: 110px 1fr; align-items: center; gap: 10px; min-width: 0; overflow: hidden; }
.soc-admin-lbl { font-family: var(--main-font), sans-serif; font-size: 8px; letter-spacing: 0.28em; color: var(--gold-dim); text-transform: uppercase; opacity: 0.7; }
.soc-admin-input {
  background: rgba(0,0,0,0.5); border: 1px solid rgba(212,162,60,0.18);
  color: var(--text-body); font-family: var(--main-font), sans-serif;
  font-size: 11px; padding: 6px 10px; outline: none; transition: border-color 0.2s;
  width: 100%; box-sizing: border-box; min-width: 0;
}
.soc-admin-input:focus { border-color: rgba(212,162,60,0.5); box-shadow: 0 0 8px rgba(212,162,60,0.1); }
.soc-admin-input::placeholder { color: var(--gold-dim); opacity: 0.3; }
.soc-admin-save {
  font-family: var(--main-font), sans-serif; font-size: 8px; font-weight: 700; letter-spacing: 0.4em;
  color: var(--gold); background: transparent; border: 1px solid rgba(212,162,60,0.3);
  padding: 8px 22px; cursor: pointer; transition: all 0.2s;
}
.soc-admin-save:hover { background: rgba(212,162,60,0.08); border-color: var(--gold); color: var(--gold-bright); }
.soc-admin-ok { font-family: var(--main-font), sans-serif; font-size: 9px; color: #50c878; margin-left: 12px; opacity: 0; transition: opacity 0.3s; }
.soc-admin-ok.show { opacity: 1; }

/* ── Contact form admin panel ── */
.contact-admin-panel {
  display: none;
  padding: 10px 0 18px;
  border-bottom: 1px solid rgba(212,162,60,0.1);
  margin-bottom: 20px;
}
body.admin-mode .contact-admin-panel { display: block; }
.contact-admin-title {
  font-family:var(--main-font),sans-serif; font-size:8px; letter-spacing:0.45em;
  color:var(--gold-dim); opacity:0.7; text-transform:uppercase; margin-bottom:10px;
}
.contact-admin-row {
  display:flex; align-items:center; gap:10px; flex-wrap:wrap;
}
.contact-admin-lbl {
  font-family:var(--main-font),sans-serif; font-size:8px; letter-spacing:0.28em;
  color:var(--gold-dim); text-transform:uppercase; opacity:0.7; white-space:nowrap;
}
.contact-admin-row .soc-admin-input { flex:1; min-width:180px; max-width:340px; }

.field-row { display:grid; grid-template-columns:1fr 1fr; gap:100px; }
#contactBlock .field-group { max-width:680px; margin:0 auto; }
#cf-status.ok  { color:#50c878; opacity:1; }
#cf-status.err { color:#e87070; opacity:1; }

/* ── Message inbox (admin only) ── */
.cf-inbox { display:none; margin-top:22px; border-top:1px solid rgba(212,162,60,0.12); padding-top:16px; }
body.admin-mode .cf-inbox { display:block; }
.cf-inbox-title {
  font-family:var(--main-font),sans-serif; font-size:10px; letter-spacing:0.45em;
  color:var(--gold-dim); opacity:0.85; text-transform:uppercase; margin-bottom:12px; text-align:center;
}
.cf-inbox-empty {
  font-family:var(--main-font),sans-serif; font-size:11px; color:var(--gold-dim);
  opacity:0.50; text-align:center; padding:10px 0;
}
/* Scrollable inbox — fits ~100 messages without bloating the page */
#cfInboxList {
  max-height: 520px;
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: rgba(212,162,60,0.3) transparent;
  padding-right: 4px;
}
#cfInboxList::-webkit-scrollbar { width: 3px; }
#cfInboxList::-webkit-scrollbar-thumb { background: rgba(212,162,60,0.3); border-radius: 2px; }
.cf-msg {
  background:rgba(0,0,0,0.35); border:1px solid rgba(212,162,60,0.1);
  padding:14px 18px; margin-bottom:6px; position:relative;
}
.cf-msg-head {
  display:flex; justify-content:space-between; align-items:center;
  margin-bottom:6px; flex-wrap:wrap; gap:6px;
}
.cf-msg-from { font-family:var(--main-font),sans-serif; font-size:10px; letter-spacing:0.2em; color:var(--gold-bright); }
.cf-msg-date { font-family:var(--main-font),sans-serif; font-size:10px; color:var(--gold-dim); opacity:0.60; }
.cf-msg-subject { font-family:var(--main-font),sans-serif; font-size:14px; font-weight:600; color:var(--text-bright); margin-bottom:6px; }
.cf-msg-body { font-family:var(--main-font),sans-serif; font-size:14px; color:var(--text-body); opacity:0.90; white-space:pre-wrap; line-height:1.2; }
.cf-msg-del {
  position:absolute; top:8px; right:10px;
  font-family:var(--main-font),sans-serif; font-size:7px; letter-spacing:0.2em;
  color:var(--gold-dim); opacity:0.4; cursor:pointer; background:none; border:none; padding:2px 6px;
  transition:opacity 0.2s;
}
.cf-msg-del:hover { opacity:1; color:#e87070; }
.cf-inbox-clear {
  font-family:var(--main-font),sans-serif; font-size:8px; font-weight:700; letter-spacing:0.35em;
  color:var(--gold-dim); background:transparent; border:1px solid rgba(212,162,60,0.2);
  padding:6px 16px; cursor:pointer; margin-top:8px; transition:all 0.2s; display:block; margin:10px auto 0;
}
.cf-inbox-clear:hover { border-color:var(--gold); color:var(--gold); }

/* ── Global centre alignment for all content ── */
.editable-zone, .editable-zone p, .editable-zone span,
.editable-zone div:not(.edit-handle),
.txt-slot, .ph, .blk-title,
.spirit-quote, #bioText,
.field-group, .contact-line { text-align: center; }
.contact-line { justify-content: center; }

/* ═══════════════════════════════════════════
   CONSOLE — inline with nav tabs
═══════════════════════════════════════════ */
.console-stat {
  display: flex; align-items: center; gap: 4px;
}
.console-icon {
  font-size: 9px; color: #0fa; opacity: 0.7;
  text-shadow: 0 0 6px rgba(0,255,170,0.5);
}
.console-count {
  font-family: var(--main-font), sans-serif; font-size: 11px;
  color: #3dffc0; letter-spacing: 0.05em;
  text-shadow: 0 0 8px rgba(61,255,192,0.5);
}
.console-actions {
  display: flex; align-items: center; gap: 6px;
}
/* nav#mainNav .console-group overrides .console-actions when inline */
.console-btn {
  background: none; border: 1px solid rgba(0,255,170,0.15);
  color: #3dffc0; padding: 2px 8px; cursor: pointer;
  display: flex; align-items: center; gap: 4px;
  font-family: var(--main-font), sans-serif; font-size: 10px;
  transition: all 0.25s; letter-spacing: 0.05em;
}
.console-btn:hover {
  border-color: rgba(0,255,170,0.5); color: #6effda;
  box-shadow: 0 0 10px rgba(0,255,170,0.2);
}
.like-icon { font-size: 13px; transition: all 0.25s; }
.console-btn.liked .like-icon { color: #3dffc0; text-shadow: 0 0 8px rgba(0,255,170,0.7); }
.console-btn.liked { border-color: rgba(0,255,170,0.4); }
.share-label {
  font-family: var(--main-font), sans-serif; font-size: 9px;
  letter-spacing: 0.25em; color: #3dffc0;
  text-shadow: 0 0 6px rgba(61,255,192,0.4);
  font-weight: 600;
}

/* ═══════════════════════════════════════════
   PLAY COUNT in playlist
═══════════════════════════════════════════ */
.pl-plays {
  font-family: var(--main-font), sans-serif; font-size: 11px;
  color: #7dd8f8; opacity: 0.85; flex-shrink: 0;
  min-width: 36px; text-align: right; letter-spacing: 0.05em;
  text-shadow: 0 0 6px rgba(100,210,255,0.5);
}

/* ═══════════════════════════════════════════
   TRACK STAR RATING in playlist
═══════════════════════════════════════════ */
.pl-star-btn {
  background: none; border: none; cursor: pointer;
  display: flex; align-items: center; gap: 3px;
  padding: 2px 5px; border-radius: 8px;
  font-size: 15px; flex-shrink: 0;
  transition: all 0.2s; color: var(--gold-dim);
}
.pl-star-btn:hover {
  background: rgba(212,162,60,0.12);
  transform: scale(1.15);
  filter: brightness(1.3);
}
.pl-star-btn:active { transform: scale(0.9); }
.pl-star-count {
  font-family: var(--main-font), sans-serif; font-size: 11px;
  color: #7dd8f8; letter-spacing: 0.05em;
  text-shadow: 0 0 6px rgba(100,210,255,0.5);
}

/* ═══════════════════════════════════════════
   EMOJI REACTION BAR + FOUNTAIN
═══════════════════════════════════════════ */
.emoji-bar {
  position: relative; padding: 8px 20px 6px; text-align: center;
  border-top: 1px solid rgba(212,162,60,0.06);
  overflow: visible;
}
.emoji-fountain {
  position: absolute; left: 0; right: 0; bottom: 0; height: 250px;
  pointer-events: none; overflow: visible; z-index: 1;
}
.emoji-float {
  position: absolute; bottom: 0;
  font-size: 22px; pointer-events: none; z-index: 1;
  animation: emojiRise 2.5s ease-out forwards;
}
@keyframes emojiRise {
  0%   { transform: translateX(-50%) translateY(0) scale(1); opacity: 1; filter: brightness(1); }
  20%  { transform: translateX(-50%) translateY(-30px) scale(1.5); opacity: 1; filter: brightness(2.2) drop-shadow(0 0 12px rgba(255,220,80,0.9)) drop-shadow(0 0 20px rgba(61,255,192,0.6)); }
  45%  { transform: translateX(-50%) translateY(-80px) scale(1.3); opacity: 1; filter: brightness(1.8) drop-shadow(0 0 8px rgba(255,200,60,0.7)); }
  70%  { transform: translateX(-50%) translateY(-140px) scale(1.1); opacity: 0.7; filter: brightness(1.3) drop-shadow(0 0 4px rgba(212,162,60,0.4)); }
  100% { transform: translateX(-50%) translateY(-200px) scale(0.7); opacity: 0; filter: brightness(1); }
}
.emoji-buttons {
  display: flex; justify-content: center; gap: 6px;
  flex-wrap: nowrap; position: relative; z-index: 2;
}
.emoji-react-btn {
  background: rgba(212,162,60,0.04); border: 1px solid rgba(212,162,60,0.12);
  border-radius: 18px; padding: 4px 10px; cursor: pointer;
  display: flex; align-items: center; gap: 4px;
  font-size: 16px; transition: all 0.2s; color: var(--gold-dim);
  height: 34px;
}
.emoji-char {
  display: flex; align-items: center; justify-content: center;
  line-height: 1;
}
.emoji-react-btn:hover {
  background: rgba(212,162,60,0.12); border-color: var(--gold);
  transform: scale(1.08);
}
.emoji-react-btn:active { transform: scale(0.95); }

/* ── Individual emoji styles ── */
.emoji-react-btn[data-emoji="crown"] .emoji-char {
  font-size: 20px;
  text-shadow: 0 0 6px rgba(212,162,60,0.8), 0 0 14px rgba(190,140,30,0.5);
  filter: brightness(1.3) saturate(1.2);
}
.emoji-react-btn[data-emoji="crown"]:hover {
  border-color: rgba(212,162,60,0.5);
  box-shadow: 0 0 10px rgba(212,162,60,0.25);
}
.emoji-react-btn[data-emoji="heart"] .emoji-char {
  font-size: 20px;
  filter: hue-rotate(160deg) saturate(1.8) brightness(1.1);
  text-shadow: 0 0 8px rgba(0,131,108,0.7), 0 0 16px rgba(1,100,80,0.4);
}
.emoji-react-btn[data-emoji="heart"]:hover {
  border-color: rgba(0,131,108,0.5);
  box-shadow: 0 0 12px rgba(0,131,108,0.3);
}
.emoji-react-btn[data-emoji="mic"] .emoji-char {
  font-size: 19px;
  filter: sepia(1) saturate(2) brightness(1.1) hue-rotate(5deg);
  text-shadow: 0 0 6px rgba(190,140,30,0.6), 0 0 12px rgba(160,120,20,0.3);
}
.emoji-react-btn[data-emoji="mic"]:hover {
  border-color: rgba(212,162,60,0.5);
  box-shadow: 0 0 10px rgba(212,162,60,0.2);
}
.emoji-react-btn[data-emoji="eye"] .emoji-char {
  font-size: 22px;
  filter: sepia(1) saturate(2.5) brightness(1.5) hue-rotate(8deg);
  text-shadow: 0 0 8px rgba(212,162,60,0.8), 0 0 16px rgba(190,140,30,0.5);
}
.emoji-react-btn[data-emoji="eye"]:hover {
  border-color: rgba(212,162,60,0.5);
  box-shadow: 0 0 10px rgba(212,162,60,0.25);
}
.emoji-react-btn[data-emoji="star"] .emoji-char {
  font-size: 20px;
  filter: brightness(1.4) saturate(1.4);
  text-shadow: 0 0 6px rgba(180,60,255,0.5), 0 0 14px rgba(140,40,220,0.3);
}
.emoji-react-btn[data-emoji="star"]:hover {
  border-color: rgba(180,60,255,0.5);
  box-shadow: 0 0 10px rgba(180,60,255,0.2);
}

.react-count {
  font-family: var(--main-font), sans-serif; font-size: 12px;
  letter-spacing: 0.08em; color: #3dffc0;
  text-shadow: 0 0 6px rgba(61,255,192,0.4);
  font-weight: 600;
}

/* ═══════════════════════════════════════════
   ADMIN — tiny input + save button for stats/reactions
═══════════════════════════════════════════ */
.admin-tiny-input {
  width: 60px; padding: 3px 6px;
  background: rgba(0,0,0,0.5); border: 1px solid rgba(212,162,60,0.2);
  color: var(--gold-bright); font-family: var(--main-font), sans-serif;
  font-size: 10px; outline: none;
}
.admin-tiny-input:focus { border-color: rgba(212,162,60,0.4); }
.admin-save-btn {
  padding: 3px 12px; background: rgba(61,255,192,0.08);
  border: 1px solid rgba(61,255,192,0.25); color: #3dffc0;
  font-family: var(--main-font), sans-serif;
  font-size: 7px; letter-spacing: 0.3em; cursor: pointer;
  transition: all 0.2s;
}
.admin-save-btn:hover { background: rgba(61,255,192,0.15); border-color: rgba(61,255,192,0.5); }

/* ═══════════════════════════════════════════
   TABLET BREAKPOINT
═══════════════════════════════════════════ */
@media (max-width:768px) {
  header { padding: 12px 20px 0; grid-template-columns: 64px 1fr 64px; }
  .logo-wrap { width: 60px; height: 60px; }
  .logo-img  { width: 60px; height: 60px; }
  .globe-wrap { width: 60px; height: 60px; }
  #globeCanvas { width: 54px; height: 54px; animation: none !important;
    filter: drop-shadow(0 0 6px rgba(212,162,60,0.6)) !important; }
  .grid-3 { grid-template-columns:1fr 1fr; }
  .media-grid-4 { grid-template-columns:repeat(3,1fr); }
  .sub-row { width: 100%; }
  .soc-link { padding: 8px 20px; }
  .soc-icon { width: 44px; height: 44px; }
  .spirit-hero { padding: 36px 36px; }
  .blk { padding: 18px 18px; }
}

/* ═══════════════════════════════════════════
   MOBILE PLAYER CASCADE + LARGER TABS
═══════════════════════════════════════════ */
@media (max-width:640px) {
  /* ── Mobile header: globe = logo size, override tablet 768px block ── */
  header { grid-template-columns:52px 1fr 52px !important; gap:2px !important; padding:10px 6px 0 !important; }
  .logo-wrap { width:48px !important; height:48px !important; }
  .logo-img  { width:48px !important; height:48px !important; }
  .globe-wrap {
    width:48px !important; height:48px !important; justify-content:center !important;
    overflow: hidden !important;
    background: radial-gradient(circle, rgba(212,162,60,0.12) 0%, rgba(212,162,60,0.04) 50%, transparent 72%) !important;
    border-radius: 50% !important;
  }
  #globeCanvas {
    width:44px !important; height:44px !important;
    filter: drop-shadow(0 0 8px rgba(212,162,60,0.85)) drop-shadow(0 0 16px rgba(248,210,80,0.5)) !important;
    animation: none !important;
  }

  /* Enlarge nav tabs on mobile */
  .nav-tab {
    font-size: 13px !important;
    padding: 8px 16px !important;
    letter-spacing: 0.22em !important;
  }

  /* Stack player controls vertically */
  .player-controls {
    flex-direction: column !important;
    align-items: center !important;
    gap: 8px !important;
    padding: 10px 10px !important;
  }

  /* 1. Playlist — full width row */
  .pc-playlist {
    width: 100% !important;
    order: 1;
    justify-content: center !important;
  }

  /* 2. Transport buttons — centered row, not absolute */
  .pc-transport {
    position: static !important;
    left: auto !important;
    transform: none !important;
    order: 2;
    gap: 8px !important;
  }
  .pc-transport .player-btn {
    width: 44px;
    height: 44px;
  }
  .pc-transport .play-pause {
    width: 52px;
    height: 52px;
  }

  /* 3. Knobs — centered row */
  .pc-knobs {
    order: 3;
    justify-content: center !important;
    flex-wrap: wrap !important;
    gap: 10px !important;
  }
  .pc-knobs .player-sep { display: none; }
  /* Video overlay — visible by default on mobile, hidden during playback */
  #vidOverlay { opacity: 1 !important; pointer-events: auto !important; transition: opacity 0.3s !important; }
  #vidOverlay.vid-mobile-hidden { opacity: 0 !important; pointer-events: none !important; }
  .vid-ctrl-btn { width: 44px; height: 44px; background-size: 24px 18px !important; }
  .vid-play-btn { width: 50px; height: 50px; background-size: 18px 22px !important; }
  .console-btn { padding: 2px 5px; font-size: 9px; }
  .console-count { font-size: 9px; }
  .share-label { font-size: 7px; letter-spacing: 0.15em; }
  .console-icon { font-size: 7px; }
  .emoji-bar { padding: 6px 8px 4px; }
  .emoji-react-btn { padding: 2px 4px; font-size: 13px; gap: 2px; min-width: 0; }
  .emoji-buttons { gap: 3px; }
  .react-count { font-size: 9px; }
}

@media (max-width:400px) {
  header { grid-template-columns:42px 1fr 42px !important; gap:2px !important; padding:8px 4px 0 !important; }
  .logo-wrap { width:40px !important; height:40px !important; }
  .logo-img  { width:40px !important; height:40px !important; }
  .globe-wrap { width:40px !important; height:40px !important; }
  #globeCanvas {
    width:36px !important; height:36px !important;
    filter: drop-shadow(0 0 6px rgba(212,162,60,0.7)) drop-shadow(0 0 14px rgba(212,162,60,0.4)) !important;
    animation: none !important;
  }
  .nav-tab {
    font-size: 12px !important;
    padding: 7px 12px !important;
  }
}

/* ═══════════════════════════════════════════
   REDUCED MOTION
═══════════════════════════════════════════ */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
}

/* ═══════════════════════════════════════════
   TAB-HIDDEN PERFORMANCE
═══════════════════════════════════════════ */
.tab-hidden .ambient,
.tab-hidden #starsCanvas {
  display: none;
}

/* ═══════════════════════════════════════════
   UTILITY CLASSES
═══════════════════════════════════════════ */

/* Utility: hidden for visitors, visible for admin */
.admin-only { display: none; }
body.admin-mode .admin-only { display: block; }

/* Utility: loading states */
.is-loading { opacity: 0.5; pointer-events: none; }

/* Utility: notification toast */
/* ── Slot link row (admin only, below image grid) ── */
.slot-link-row { display: none; text-align: center; margin-top: 6px; }
body.admin-mode .slot-link-row { display: block; }
.slot-link-input {
  width: 280px; max-width: 90%;
  padding: 5px 8px;
  background: rgba(0,0,0,0.5);
  border: 1px solid rgba(212,162,60,0.25);
  color: var(--gold-bright);
  font-family: var(--main-font), sans-serif;
  font-size: 9px; text-align: center; outline: none;
}

.toast { position:fixed; bottom:20px; left:50%; transform:translateX(-50%); background:rgba(35,22,6,0.97); border:1px solid rgba(212,162,60,0.5); color:var(--gold-bright); font-family:var(--main-font),sans-serif; font-size:11px; letter-spacing:0.15em; padding:10px 24px; z-index:10010; opacity:0; transition:opacity 0.3s; pointer-events:none; }
.toast.show { opacity:1; }