:root{
  --bg:#0a0a0a;
  --panel:#121212;
  --surface:#171717;
  --text:#ffffff;
  --muted:#b9b9b9;
  --gold:#c9a44c;
  --gold-2:#e2c678;
  --border:#222;
  --danger:#ff4d4d;
}

html, body { touch-action: manipulation; }  /* helps block double-tap zoom on many browsers */

*{ box-sizing:border-box; }
html,body{ margin:0; height:100%; background:var(--bg); color:var(--text); font-family:'Quicksand',system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial; }
a{ color:inherit; text-decoration:none; }

.container{ max-width:820px; margin:0 auto; padding:16px 16px 40px; }

/* Boot overlay */
.boot{ position:fixed; inset:0; background:#000; display:grid; place-items:center; z-index:100; }
.bootInner{ display:grid; gap:14px; place-items:center; }
.bootText{ color:#e9e9e9; font-size:14px; opacity:.9; }
.spinner{ width:16px; height:16px; border:2px solid var(--gold); border-right-color:transparent; border-radius:50%; animation:spin .9s linear infinite; }
.spinner.big{ width:28px; height:28px; border-width:3px; }
@keyframes spin{ to{ transform:rotate(360deg);} }

/* Dropdowns */
.dropdowns{ display:grid; grid-template-columns:1fr; gap:12px; margin:4px 0 16px; }
@media(min-width:560px){ .dropdowns{ grid-template-columns:1fr 1fr; } }

.dd{ position:relative; }
.ddBtn{
  width:100%; display:flex; align-items:center; gap:10px; justify-content:space-between;
  background:#000; color:#f2f2f2; border:1px solid var(--border); border-radius:12px;
  padding:12px 40px 12px 12px; cursor:pointer; text-align:left; font-size:14px;
}
.ddBtn:focus{ outline:none; border-color:var(--gold); box-shadow:0 0 0 2px rgba(201,164,76,.18); }
.ddValue{ color:#fff; font-weight:600; }
.dd .arrow{
  position:absolute; right:12px; top:50%; transform:translateY(-50%);
  width:0; height:0; border-left:6px solid transparent; border-right:6px solid transparent; border-top:8px solid #d0d0d0; /* light grey */
  pointer-events:none;
}
.ddList{
  position:absolute; z-index:20; left:0; right:0; top:100%; margin-top:8px; max-height:300px;
  overflow-y:auto; background:#000; border:1px solid var(--gold); border-radius:12px; box-shadow:0 10px 30px rgba(0,0,0,.5);
  scrollbar-width:none; /* Firefox */
}
.ddList::-webkit-scrollbar{ width:0; height:0; } /* hide scrollbar */
.ddItem{
  padding:12px; color:var(--gold); background:#000; cursor:pointer; border-bottom:1px solid rgba(201,164,76,.08);
}
.ddItem:hover{ background:#0d0d0d; }
.ddItem.sel{ background:#111; color:#fff; }
.ddLoading{ display:flex; align-items:center; gap:8px; padding:12px; color:#e0e0e0; }

/* Card + hero */
.card{ background:var(--panel); border:1px solid var(--border); border-radius:16px; overflow:hidden; }
.hero{ position:relative; background:#000; min-height:200px; }
.hero img{ width:100%; display:block; max-height:420px; object-fit:cover; }

/* White overlay play/pause */
.mediaOverlay{
  position:absolute; left:50%; top:50%; transform:translate(-50%,-50%);
  width:76px; height:76px; border-radius:50%; border:none; background:rgba(0,0,0,.55);
  display:grid; place-items:center; cursor:pointer; transition:transform .15s ease, background .15s ease;
}
.mediaOverlay:hover{ transform:translate(-50%,-50%) scale(1.04); background:rgba(0,0,0,.7); }
.mediaOverlay .glyph{ position:relative; display:block; width:38px; height:38px; }
.mediaOverlay.play .glyph{ width:0; height:0; border-left:28px solid #fff; border-top:18px solid transparent; border-bottom:18px solid transparent; margin-left:6px; }
.mediaOverlay.pause .glyph::before, .mediaOverlay.pause .glyph::after{
  content:""; position:absolute; top:5px; width:10px; height:28px; background:#fff; border-radius:2px;
}
.mediaOverlay.pause .glyph::before{ left:6px; }
.mediaOverlay.pause .glyph::after{ right:6px; }

/* Spinners in card */
.loading{ display:flex; align-items:center; gap:10px; padding:16px; color:#cfcfcf; }
.loading.small{ padding:4px 12px; font-size:12px; color:#bdbdbd; }

/* Controls + sections */
.controlsRow{ display:flex; align-items:center; justify-content:space-between; padding:12px; gap:10px; border-top:1px solid var(--border); background:var(--surface); }
.seg{ display:flex; gap:8px; flex-wrap:wrap; }
.pill{ background:#000; color:#eee; border:1px solid var(--border); border-radius:999px; padding:8px 12px; font-size:13px; cursor:pointer; }
.pill.active{ border-color:var(--gold); color:var(--gold); box-shadow:0 0 0 2px rgba(201,164,76,.14) inset; }

.section{ padding:14px 12px; border-top:1px solid var(--border); }
.section h3{ margin:0 0 6px; font-size:14px; color:var(--gold-2); font-weight:600; letter-spacing:.2px; }
.section p{ margin:0; line-height:1.6; color:#eaeaea; font-size:14px; }
.muted{ color:var(--muted); }

/* Disclaimer fine print */
.fineprint{ color:#b8b8b8; font-size:12px; opacity:.78; }

/* Errors */
.error{ background:rgba(255,77,77,.08); color:#ff9b9b; border:1px solid rgba(255,77,77,.25); padding:10px 12px; border-radius:10px; }

/* Footer (compact) */
.footer{ font-size:12px; color:#a5a5a5; text-align:center; padding:10px 0 14px; }

/* Bottom player */
.player{
  position:fixed; left:0; right:0; bottom:0; transform:translateY(100%);
  transition:transform .25s ease; background:rgba(0,0,0,.88); backdrop-filter:saturate(140%) blur(6px);
  border-top:1px solid var(--border); z-index:60;
}
.player.open{ transform:translateY(0); }
.playerInner{ max-width:1000px; margin:0 auto; padding:10px 14px; display:grid; gap:10px; }
.playerRow{ display:flex; align-items:center; gap:10px; }
.thumb{ width:40px; height:40px; object-fit:cover; border-radius:8px; border:1px solid var(--border); background:#111; }
.title{ font-size:13px; color:#f3f3f3; }

.playerCtrls{ display:flex; align-items:center; gap:8px; }
.iconBtn{
  background:#121212; color:#f4f4f4; border:1px solid var(--border); border-radius:10px; padding:8px 12px; cursor:pointer; font-size:14px;
}
.iconBtn.active{ border-color:var(--gold); color:var(--gold); }
.iconBtn.closeBtn{ background:#1a0e0e; border-color:#3a1d1d; }
.pushRight{ margin-left:auto; }
.vol{ width:140px; accent-color:var(--gold); }

.bar{ display:grid; gap:6px; }
.progress{ width:100%; accent-color:var(--gold); }
.timeRow{ display:flex; align-items:center; justify-content:space-between; color:#eaeaea; font-size:12px; }