@font-face {
  font-family: Cinzel;
  src: url("fonts/CinzelDecorative-Bold.ttf") format("truetype");
  font-weight: 700;
  font-display: swap;
}
@font-face {
  font-family: Yeseva;
  src: url("fonts/YesevaOne-Regular.ttf") format("truetype");
  font-weight: 400;
  font-display: swap;
}

:root {
  --bg: #070605;
  --panel: #100e0c;
  --line: #2a221c;
  --text: #e8dcc8;
  --muted: #8f857a;
  --hi: #f3ece3;
  --accent: #8b2a1a;
  --chalk: #c6b8a8;
}

* { box-sizing: border-box; }
html, body {
  height: 100%;
  margin: 0;
  background: #000;
  color: var(--text);
  font: 14px/1.45 "Segoe UI", system-ui, sans-serif;
  color-scheme: dark;
}
button, input { font: inherit; color: inherit; }
button { background: none; border: 0; cursor: pointer; }
img { display: block; }

.shell {
  position: relative;
  height: 100%;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: #000;
}
.shell::after {
  content: "";
  position: absolute;
  inset: 0 0 0 28%;
  background: url("hero.jpg") right center / auto 100% no-repeat;
  opacity: .72;
  pointer-events: none;
  mask-image: linear-gradient(90deg, transparent, #000 22%);
}

.top {
  display: grid;
  grid-template-columns: auto auto 1fr;
  gap: 18px;
  align-items: center;
  padding: 18px 28px 10px;
  position: relative;
  z-index: 2;
}
.air {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--chalk);
  font-size: 11px;
  letter-spacing: .2em;
  text-transform: uppercase;
  opacity: .8;
  padding: 0;
}
.air img { width: 14px; height: 14px; }
.air.on { opacity: 1; color: #e8b4a8; filter: drop-shadow(0 0 8px #8b2a1a88); }
.brand { display: flex; align-items: center; gap: 10px; }
.brand img { width: 22px; height: 22px; opacity: .9; }
.meta {
  font-family: Cinzel, "Times New Roman", serif;
  font-size: 11px;
  letter-spacing: .42em;
  text-transform: uppercase;
  color: var(--chalk);
  opacity: .7;
}
.idle h2 {
  margin: 8px 0 14px;
  font-family: Yeseva, "Times New Roman", serif;
  font-weight: 400;
  font-size: 64px;
  letter-spacing: .04em;
  line-height: .95;
  color: var(--hi);
  text-transform: uppercase;
}
.search-wrap { position: relative; max-width: 560px; }
.si {
  position: absolute;
  left: 12px;
  top: 50%;
  width: 16px;
  height: 16px;
  transform: translateY(-50%);
  opacity: .55;
  pointer-events: none;
}
#q {
  width: 100%;
  background: #0008;
  border: 0;
  border-bottom: 1px solid #5c534a;
  border-radius: 0;
  padding: 10px 12px 10px 38px;
  outline: none;
  color: var(--hi);
}
#q::placeholder { color: #6e665d; }
#q:focus { border-bottom-color: var(--chalk); }
.results {
  position: absolute;
  z-index: 5;
  left: 0; right: 0; top: 42px;
  background: #0c0a09ee;
  border: 1px solid var(--line);
  max-height: 280px;
  overflow: auto;
  box-shadow: 0 18px 50px #000c;
}
.hit { display: flex; gap: 10px; width: 100%; text-align: left; padding: 9px 12px; }
.hit:hover { background: #1a1210; }
.hit img { width: 36px; height: 36px; object-fit: cover; background: #000; }
.hit b { display: block; font-weight: 600; color: var(--hi); }
.hit span { color: var(--muted); font-size: 12px; }

.body { flex: 1; display: flex; min-height: 0; padding: 4px 22px 12px; gap: 22px; position: relative; z-index: 1; }
.stage { flex: 1; display: flex; align-items: center; min-width: 0; position: relative; }
#ytwrap {
  position: absolute;
  inset: 0 0 0 0;
  display: flex;
  flex-direction: column;
  background: #000;
  z-index: 2;
}
#ytwrap[hidden] { display: none !important; }
#ytposter {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 3;
  background: #000;
  cursor: pointer;
}
#clip {
  flex: 1;
  width: 100%;
  height: 100%;
  object-fit: contain;
  background: #000;
  position: relative;
  z-index: 2;
}
.shell.cinema .side { display: none; }
.shell.cinema .body { padding: 0; gap: 0; }
.shell.cinema .top { padding-bottom: 6px; }
.shell.cinema #cinema.on { opacity: .45; }
#ythint {
  margin: 0;
  padding: 8px 12px;
  font-size: 12px;
  color: var(--chalk);
  letter-spacing: .04em;
}
.stage.watch .lyrics { display: none; }
.lyrics { width: min(640px, 100%); color: var(--muted); }
.idle h2 { font-size: 64px; }
.idle p {
  margin: 0;
  letter-spacing: .28em;
  text-transform: uppercase;
  font-size: 12px;
  color: var(--chalk);
  opacity: .75;
}
.line { margin: 8px 0; transition: color .2s, font-size .2s, opacity .2s; opacity: .4; font-family: Yeseva, Georgia, serif; }
.line.on { color: var(--hi); font-size: 24px; opacity: 1; }

.side {
  width: 280px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  min-width: 220px;
  background: #07060599;
  border: 1px solid #2a221c88;
  padding: 12px 12px 8px;
}
.block { background: transparent; }
.block.grow { flex: 1; min-height: 0; display: flex; flex-direction: column; }
.block-h {
  display: flex; justify-content: space-between; align-items: center;
  color: var(--chalk); font-size: 11px; letter-spacing: .16em; text-transform: uppercase;
  padding: 4px 2px 10px;
}
.block-h span, .block-h button { display: flex; align-items: center; gap: 8px; }
.block-h img { width: 14px; height: 14px; opacity: .8; }
.block-h button { color: var(--accent); font-size: 11px; letter-spacing: 0; text-transform: none; }
.list { overflow: auto; }
.row { display: flex; gap: 8px; width: 100%; text-align: left; padding: 7px 4px; }
.row:hover { background: #1a1210aa; }
.row.on { background: #241810cc; box-shadow: inset 2px 0 0 var(--accent); }
.row img { width: 32px; height: 32px; object-fit: cover; background: #000; }
.row .meta { min-width: 0; letter-spacing: 0; text-transform: none; font-family: inherit; opacity: 1; font-size: inherit; }
.row b { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-weight: 600; font-size: 13px; color: var(--hi); }
.row span { color: var(--muted); font-size: 12px; }
.empty { color: var(--muted); font-size: 12px; padding: 8px 4px; opacity: .7; }

.bar {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 12px 28px 16px;
  position: relative;
  z-index: 2;
  background: linear-gradient(180deg, #0000, #0a0806f0 28%, #070605);
  border-top: 1px solid #3a322c;
  box-shadow: 0 -16px 40px #000a;
}
.seek-row {
  display: grid;
  grid-template-columns: 44px 1fr 44px;
  gap: 12px;
  align-items: center;
  color: var(--chalk);
  font-size: 11px;
  letter-spacing: .1em;
  font-variant-numeric: tabular-nums;
}
.bar-main {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  gap: 16px;
  align-items: center;
}
.now { display: flex; gap: 12px; align-items: center; min-width: 0; }
.art {
  width: 52px;
  height: 52px;
  flex: none;
  display: grid;
  place-items: center;
  background: #120e0c;
  border: 1px solid #3a322c;
  box-shadow: 0 0 18px #8b2a1a22;
}
.art img { width: 52px; height: 52px; object-fit: cover; grid-area: 1 / 1; }
.art-fallback { width: 22px !important; height: 22px !important; opacity: .55; }
.now:has(#cover:not([hidden])) .art-fallback { display: none; }
#cover[hidden], #cover:not([src]) { display: none !important; }
.now-t { min-width: 0; }
.t { font-family: Yeseva, Georgia, serif; font-size: 16px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.a { color: var(--muted); font-size: 12px; letter-spacing: .08em; }
#seek, #vol {
  appearance: none;
  height: 3px;
  width: 100%;
  outline: none;
  border-radius: 0;
  background: linear-gradient(90deg, var(--accent) var(--pct, 0%), #2a221c var(--pct, 0%));
}
#seek::-webkit-slider-thumb, #vol::-webkit-slider-thumb {
  appearance: none;
  width: 11px;
  height: 11px;
  background: var(--hi);
  transform: rotate(45deg);
  box-shadow: 0 0 8px #8b2a1a66;
}
.btns { display: flex; gap: 4px; align-items: center; }
.btns button {
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  opacity: .72;
}
.btns button img { width: 18px; height: 18px; }
.btns button.flip img, img.flip { transform: scaleX(-1); }
.btns button:hover { opacity: 1; background: #1a1410; }
.btns button.on { opacity: 1; color: #e8b4a8; filter: drop-shadow(0 0 8px #8b2a1a99); }
.play {
  width: 56px;
  height: 56px;
  border: 1px solid #8a7d70;
  background: #16110e;
  opacity: 1 !important;
  box-shadow: inset 0 0 0 1px #000, 0 0 20px #8b2a1a22;
}
.play:hover { background: #1e1713; }
.i-play {
  width: 0;
  height: 0;
  margin-left: 3px;
  border-style: solid;
  border-width: 8px 0 8px 14px;
  border-color: transparent transparent transparent var(--chalk);
}
.i-pause {
  display: none;
  width: 12px;
  height: 14px;
  border-left: 3px solid var(--chalk);
  border-right: 3px solid var(--chalk);
}
.play.on .i-play { display: none; }
.play.on .i-pause { display: block; }
.vol { display: flex; align-items: center; gap: 8px; justify-content: flex-end; }
.vol img { width: 16px; height: 16px; opacity: .7; }
#vol { width: 110px; }
#voln { color: var(--muted); font-size: 12px; width: 36px; letter-spacing: .06em; }

#tap {
  position: fixed;
  inset: 0;
  z-index: 20;
  background: #000d;
  color: var(--hi);
  font-family: Yeseva, Georgia, serif;
  font-size: 22px;
  letter-spacing: .08em;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 16px;
}
#tap img { width: 36px; height: 36px; }
#tap[hidden] { display: none; }

@media (max-width: 860px) {
  .top { grid-template-columns: 1fr; }
  .idle h2 { font-size: 40px; }
  .body { flex-direction: column; }
  .side { width: 100%; flex-direction: row; height: 160px; }
  .block.grow, .block { flex: 1; }
  .bar-main { grid-template-columns: 1fr; justify-items: center; }
  .now, .vol { width: 100%; }
  .vol { justify-content: center; }
}