/* Mister Deejay – site styles. No build step, no external fonts. */
/* optional "now playing" fonts (admin setting), self-hosted variable fonts, OFL; loaded only when used */
@font-face { font-family: "Sora"; src: url("/fonts/sora-latin.woff2") format("woff2"); font-weight: 300 800; font-display: swap; unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2212; }
@font-face { font-family: "Sora"; src: url("/fonts/sora-latin-ext.woff2") format("woff2"); font-weight: 300 800; font-display: swap; unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1E00-1E9F, U+2020, U+20A0-20AB, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Space Grotesk"; src: url("/fonts/space-grotesk-latin.woff2") format("woff2"); font-weight: 300 800; font-display: swap; unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2212; }
@font-face { font-family: "Space Grotesk"; src: url("/fonts/space-grotesk-latin-ext.woff2") format("woff2"); font-weight: 300 800; font-display: swap; unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1E00-1E9F, U+2020, U+20A0-20AB, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Inter"; src: url("/fonts/inter-latin.woff2") format("woff2"); font-weight: 300 800; font-display: swap; unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2212; }
@font-face { font-family: "Inter"; src: url("/fonts/inter-latin-ext.woff2") format("woff2"); font-weight: 300 800; font-display: swap; unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1E00-1E9F, U+2020, U+20A0-20AB, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Michroma"; src: url("/fonts/michroma-latin.woff2") format("woff2"); font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2212; }
@font-face { font-family: "Michroma"; src: url("/fonts/michroma-latin-ext.woff2") format("woff2"); font-display: swap;
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1E00-1E9F, U+2020, U+20A0-20AB, U+2113, U+2C60-2C7F, U+A720-A7FF; }

/* Classic Mister Deejay look (default): dark steel-blue club scene on top, turntable edge, light page below. */
:root, :root[data-theme="light"] {
  --bg: #eef0f5;
  --bg-2: #e3e7ef;
  --card: #ffffff;
  --card-2: #f6f7fb;
  --line: #dde1ea;
  --text: #141826;
  --dim: #5d6475;
  --accent: #ffb400;          /* MRDJ yellow (old theme) */
  --accent-ink: #1a1200;
  --accent-text: #9a6700;     /* yellow tone with enough contrast on white */
  --accent-2: #6577a7;        /* MRDJ steel blue (old theme) */
  --navy: #34436e;            /* logo plate */
  --header-bg: #ffffff;
  --header-text: #1b2442;
  --bp: rgba(160, 190, 255, .72);        /* blueprint line colour */
  --bp-dim: rgba(160, 190, 255, .38);
  --hero-top: #161d36;
  --hero-mid: #33416c;
  --hero-low: #6577a7;
  --like: #128a4b;
  --dislike: #c8401f;
  --radius: 18px;
  --shadow: 0 18px 50px rgba(22, 29, 54, .16);
  --bar-h: 72px;
  --font: Verdana, Tahoma, "DejaVu Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --display: "Michroma", "Arial Black", var(--font);
  color-scheme: light;
}
:root[data-theme="dark"] {
  --bg: #0e1222;
  --bg-2: #161b2e;
  --card: #171c30;
  --card-2: #1d2339;
  --line: #2a3150;
  --text: #f1f3f9;
  --dim: #9aa2bd;
  --accent-text: #ffc233;
  --header-bg: #0f1428;
  --header-text: #f1f3f9;
  --hero-top: #070a14;
  --hero-mid: #1b2442;
  --hero-low: #34436e;
  --like: #2fd47a;
  --dislike: #ff6b4a;
  --shadow: 0 20px 60px rgba(0, 0, 0, .45);
  color-scheme: dark;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
html, body { overflow-x: clip; }
body {
  margin: 0;
  font: 15px/1.55 var(--font);
  color: var(--text);
  background: var(--bg);
  min-height: 100vh;
  padding-bottom: calc(var(--bar-h) + env(safe-area-inset-bottom) + 16px);
}
.backdrop {
  position: absolute; inset: 0; z-index: -1; overflow: hidden;
  background:
    radial-gradient(900px 380px at 80% 0%, rgba(255, 255, 255, .14), transparent 60%),
    linear-gradient(180deg, var(--hero-top) 0%, var(--hero-mid) 45%, var(--hero-low) 78%, var(--hero-low) 100%);
}
.backdrop > * { z-index: 1; }
/* halftone dot grid, turned 5° to the left */
.backdrop::before { content: ""; position: absolute; inset: -40%; z-index: 0; transform: rotate(-5deg);
  background: radial-gradient(circle at 50% 50%, rgba(255, 255, 255, .11) 1.25px, transparent 1.75px) 0 0 / 14px 14px; }
.backdrop::after { /* fade the halftone dots out towards the turntable */
  content: ""; position: absolute; inset: 0; z-index: 0;
  /* dark towards the DJ booth: the turntable sits in shadow, the lights stay up top */
  background: linear-gradient(180deg, transparent 0%, transparent 38%, rgba(5, 7, 16, .7) 60%, rgba(3, 4, 10, .93) 70%, rgba(2, 3, 8, .97) 86%, rgba(1, 2, 6, .99) 100%);
}
/* backlit crowd at the bottom of the stage (tools/crowd.py): a soft stage glow behind dark figures, fading out upwards */
.backdrop .crowd { position: absolute; left: 0; right: 0; bottom: 0; height: clamp(110px, 58%, 300px); pointer-events: none;
  -webkit-mask-image: linear-gradient(to top, #000 45%, transparent 100%); mask-image: linear-gradient(to top, #000 45%, transparent 100%); }
.backdrop .crowd::before { content: ""; position: absolute; inset: 0; opacity: var(--crowd-o, .35); background: radial-gradient(60% 75% at 50% 100%, rgba(120, 150, 235, .35), transparent 70%); }
.backdrop .crowd img { opacity: var(--crowd-o, .35); position: relative; width: 100%; height: 100%; max-width: none; object-fit: cover; object-position: 50% 100%; }
/* photo variant: same low band as the drawing (stays under the text), crowd heads at the bottom edge, toned to the hero's blue-grey */
/* heart made with both hands: one front-row figure in the right corner, outside the crowd's fade so it stands out;
   same height as the crowd band, so it is drawn at the front-row scale of crowd.svg (same viewBox height) */
.backdrop .crowd-heart { position: absolute; right: max(12px, 3%); bottom: 0; width: auto; max-width: none; height: clamp(110px, 58%, 300px); pointer-events: none;
  opacity: min(1, calc(var(--crowd-o, .35) * 1.9)); -webkit-mask-image: linear-gradient(to top, #000 70%, rgba(0, 0, 0, .6) 100%); mask-image: linear-gradient(to top, #000 70%, rgba(0, 0, 0, .6) 100%); }
/* heart hands as a photo: the right part of the picture (arms + heart), toned like the crowd, fading out to the left and the top */
/* MDJ classic (the old site's look, animated): dark navy dancers behind, the front row cut out of the page colour, so the crowd grows out of the content */
.backdrop .crowd-mdj::before { opacity: calc(var(--crowd-o, .35) * 1.4); }
.backdrop .crowd-mdj img { opacity: min(1, calc(var(--crowd-o, .35) * 1.7)); }
.backdrop .crowd-mdj { -webkit-mask-image: linear-gradient(to top, #000 60%, transparent 100%); mask-image: linear-gradient(to top, #000 60%, transparent 100%); }
.backdrop .crowd-front { position: absolute; inset: 0; background: var(--bg);
  -webkit-mask: var(--front) 50% 100% / 100% 100% no-repeat; mask: var(--front) 50% 100% / 100% 100% no-repeat; }
.backdrop .crowd-heart-front { height: clamp(110px, 58%, 300px); aspect-ratio: 260 / 380; width: auto; opacity: 1; background: var(--bg);
  -webkit-mask: var(--heart) 50% 100% / contain no-repeat; mask: var(--heart) 50% 100% / contain no-repeat; }
/* The stage (header + now playing + cover band) carries the dancefloor scene and grows with its content. */
.stage { position: relative; isolation: isolate; --hero-pad: clamp(22px, 3.4vw, 44px); }
/* nothing drawn in the hero (no turntable, no crowd): more air above and below the now-playing block */
.stage:not(.is-empty) { --hero-pad: var(--hero-air, clamp(30px, 5.4vw, 78px)); }  /* admin: Višina heroja – in every mode */
/* the same setting also opens up the rows inside the hero (--np-k: compact .85, normal 1, airy 1.35, extra airy 1.65):
   artist → progress, times → buttons (buttons move down), and the vote thank-you sits further from the buttons */
.stage:not(.is-empty) .np-artist { margin: calc(10px * var(--np-k, 1)) 0 calc(26px * var(--np-k, 1)); }
.stage:not(.is-empty) .np-times { margin: 6px 0 calc(24px * var(--np-k, 1)); }
.stage:not(.is-empty) .np-next ol { margin-bottom: calc(22px * var(--np-k, 1)); }
.stage:not(.is-empty) .vote-msg { margin-top: calc(16px * var(--np-k, 1)); }
@media (min-width: 861px) { .stage:not(.is-empty) .np-body .vote-msg { margin-top: calc(18px * var(--np-k, 1)); } }
.stage.is-empty .stage-content { min-height: clamp(40px, 6vw, 90px); }
/* covers stand on the record line (45/76 of the deck height from the top); only add room if they are taller than that */
/* pulled up towards the text (the drawing has empty room above the record line) */
.stage:not(.is-empty) .deck { margin-top: calc(var(--cw) * var(--zoom) * -.055); }
/* subpages: the drawing has empty space above the tonearm, so the deck moves up under the header */
.stage.is-empty:not(.no-deck) .stage-content { min-height: 0; }
.stage.is-empty .deck { margin-top: calc(var(--cw) * var(--zoom) * -.03); }
/* narrower than the turntable drawing: no turntable, the hero then ends like with the switch off */
@media (max-width: 860px) {
  .deck { display: none; }
  .stage:not(.is-empty) .stage-content { padding-bottom: var(--hero-pad); }
  .stage.is-empty:not(.no-deck) .stage-content { min-height: clamp(40px, 6vw, 90px); }
}
.stage-content { width: min(1180px, 100% - 32px); margin: 0 auto; display: grid; grid-template-columns: minmax(0, 1fr); gap: 22px; }
.stage-content:focus { outline: none; }
.stage.no-deck:not(.is-empty) .stage-content { padding-bottom: var(--hero-pad); }
/* with the turntable's room the deck sits under the buttons; extra air above it grows with the same setting */
@media (min-width: 861px) { .stage:not(.no-deck):not(.is-empty) .stage-content { padding-bottom: max(0px, calc(var(--hero-pad) - 44px)); } }
img { max-width: 100%; display: block; }
[hidden] { display: none !important; }
a { color: inherit; }
a:hover { color: var(--accent-2); }
:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; border-radius: 6px; }
.dim { color: var(--dim); }
.fine { font-size: .8rem; }
.sr, .skip:not(:focus) { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip:focus { position: fixed; top: 8px; left: 8px; z-index: 99; background: var(--accent); color: var(--accent-ink); padding: 8px 12px; border-radius: 8px; }
svg { width: 1.2em; height: 1.2em; fill: currentColor; flex: none; }
main { position: relative; z-index: 1; width: min(1180px, 100% - 32px); margin: 0 auto; display: grid; grid-template-columns: minmax(0, 1fr); gap: 28px; }
main > * { min-width: 0; }

/* ---------- header: white band ---------- */
.site-header {
  position: relative; z-index: 3; display: flex; align-items: center; gap: 20px;
  padding: 12px max(16px, calc((100% - 1180px) / 2)); background: var(--header-bg); color: var(--header-text);
  box-shadow: 0 1px 0 rgba(20, 28, 60, .08), 0 8px 24px rgba(10, 14, 30, .12);
}
.brand { display: flex; align-items: center; gap: 14px; text-decoration: none; color: var(--header-text); }
.brand:hover { color: var(--header-text); }
.logo { display: inline-flex; align-items: center; gap: 12px; }
.logo-badge { width: 42px; height: 42px; flex: none; transform: rotate(-14deg); filter: drop-shadow(0 3px 6px rgba(0, 0, 0, .3)); transition: transform .4s; }
.logo-badge circle { fill: #0b0b0b; }
.logo-badge path { fill: #fff; }
.is-live .logo-badge { transform: rotate(-14deg) scale(1.06); }
.logo-text { display: grid; line-height: 1.15; }
/* Michroma has one weight only: a thin outline in the text colour makes it heavier */
.logo-text strong { font-family: var(--display); font-weight: 400; font-size: clamp(1.2rem, 2.5vw, 1.7rem); letter-spacing: .06em; color: var(--header-text); -webkit-text-stroke: .045em currentColor; paint-order: stroke fill; }
.logo-text small { font-family: var(--display); font-size: .56rem; letter-spacing: .22em; text-transform: uppercase; color: var(--accent-text); margin-top: 3px; }
.site-nav { display: flex; gap: 4px; margin-left: auto; }
.site-nav a { text-decoration: none; font-weight: 700; padding: 8px 14px; border-radius: 999px; color: var(--header-text); opacity: .78; }
.site-nav a:hover { opacity: 1; color: var(--header-text); background: color-mix(in srgb, var(--header-text) 7%, transparent); }
.site-nav a[aria-current="page"] { opacity: 1; color: var(--accent-ink); background: var(--accent); }
.site-header .icon-btn { background: color-mix(in srgb, var(--header-text) 7%, transparent); border-color: transparent; color: var(--header-text); }

/* ---------- buttons ---------- */
.icon-btn { display: inline-grid; place-items: center; width: 40px; height: 40px; border-radius: 999px; border: 1px solid var(--line); background: var(--card); color: var(--text); cursor: pointer; }
.icon-btn:hover { border-color: var(--accent); }
.btn { display: inline-flex; align-items: center; gap: 10px; border: 0; border-radius: 999px; padding: 14px 22px; font: inherit; font-weight: 800; cursor: pointer; text-decoration: none; }
.btn-primary { background: var(--accent); color: var(--accent-ink); box-shadow: 0 10px 30px color-mix(in srgb, var(--accent) 35%, transparent); }
.btn-primary:hover { color: var(--accent-ink); filter: brightness(1.05); transform: translateY(-1px); }
.btn-ghost { background: transparent; color: var(--text); border: 1px solid var(--line); }
.badge { font-size: .65rem; text-transform: uppercase; letter-spacing: .1em; padding: 2px 6px; border-radius: 6px; background: var(--accent-2); color: #fff; }
.i-pause { display: none; }
.is-playing .i-play { display: none; }
.is-playing .i-pause { display: inline; }

/* ---------- now playing ---------- */
.eyebrow { margin: 0 0 8px; font-size: .75rem; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: var(--dim); display: flex; gap: 10px; align-items: center; }
.live-dot { display: inline-flex; align-items: center; gap: 6px; color: #ff5a3c; font-weight: 800; font-size: .72rem; letter-spacing: .12em; text-transform: uppercase; }
.live-dot::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: currentColor; box-shadow: 0 0 0 0 currentColor; }
/* the dot blinks only while the stream is playing */
/* the live dot stays still: any pulse made the browser redraw the player bar many times a second */
@keyframes live-fade { 50% { opacity: .3; } }
@keyframes pulse { 0% { opacity: 1; box-shadow: 0 0 0 0 color-mix(in srgb, #ff5a3c 70%, transparent); } 50% { opacity: .35; } 100% { opacity: 1; box-shadow: 0 0 0 10px transparent; } }

.np-body { min-width: 0; position: relative; }
/* the thank-you after a vote does not reserve a line on wide screens: it appears briefly under the buttons */
@media (min-width: 861px) { .np-body .vote-msg { position: absolute; left: 0; right: 0; top: 100%; margin-top: 10px; } }
.np-title { margin: 0; font-family: var(--display); font-size: clamp(1.4rem, 3.2vw, 2.4rem); line-height: 1.2; font-weight: 400; overflow-wrap: anywhere; }
.np-artist { margin: 6px 0 20px; font-size: clamp(1.05rem, 2vw, 1.35rem); color: var(--dim); font-weight: 600; }
.np-progress { height: 6px; border-radius: 999px; background: var(--line); overflow: hidden; }
.np-progress span { display: block; height: 100%; width: 0; background: linear-gradient(90deg, var(--accent), var(--accent-2)); transition: width 1s linear; }
.np-times { display: flex; justify-content: space-between; margin: 6px 0 20px; font-size: .8rem; font-variant-numeric: tabular-nums; }
.np-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 14px; }
.vote { display: inline-flex; align-items: center; gap: 8px; }
.vote-btn { display: inline-grid; place-items: center; width: 48px; height: 48px; border-radius: 50%; border: 1px solid var(--line); background: var(--bg-2); color: var(--text); cursor: pointer; transition: transform .15s, background .15s, color .15s; }
.vote-btn svg { width: 22px; height: 22px; }
.vote-btn.like:hover, .vote-btn.like.is-active { background: var(--like); border-color: var(--like); color: #fff; }
.vote-btn.dislike:hover, .vote-btn.dislike.is-active { background: var(--dislike); border-color: var(--dislike); color: #fff; }
.vote-btn:active { transform: scale(.92); }
.vote-btn:disabled { cursor: default; opacity: .55; }
.vote-btn.is-active:disabled { opacity: 1; }
.vote-msg { height: 1.5em; line-height: 1.5; margin: 10px 0 0; font-size: .9rem; color: var(--dim); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* fixed two-line box: messages of different length never change the hero height (no jumping) */
.ticker { margin: 4px 0 0; height: 3em; line-height: 1.5; color: var(--text); font-style: italic; opacity: .85; transition: opacity .4s;
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; overflow: hidden; }
.np-next li { display: flex; gap: 12px; align-items: baseline; min-width: 0; }
.np-next time { font-weight: 800; color: var(--accent-text); font-variant-numeric: tabular-nums; }
.np-next span { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--dim); }
.np-next b { color: var(--text); }

/* ---------- on-air hero (no frame, sits on the dancefloor scene) ---------- */
.np-hero {
  --text: #fff; --dim: rgba(255, 255, 255, .74); --line: rgba(255, 255, 255, .2); --bg-2: rgba(255, 255, 255, .1); --accent-text: #ffc233;
  --like: #2fd47a; --dislike: #ff6b4a;
  color: var(--text);
  display: grid; align-items: center; gap: clamp(20px, 3vw, 40px);
  grid-template-columns: auto minmax(0, 1fr) minmax(230px, 300px);
  padding: var(--hero-pad) 0 0;
  text-shadow: 0 2px 12px rgba(8, 10, 24, .45);
  position: relative;
}
/* soft dark scrim behind the now-playing text so it reads cleanly over the scene */
.np-hero::before { content: ""; position: absolute; inset: -90px -10vw -90px; z-index: -1; pointer-events: none;
  background: radial-gradient(closest-side, rgba(3, 5, 12, .7), rgba(3, 5, 12, .42) 55%, rgba(3, 5, 12, .14) 80%, transparent); }

/* current song: sleeve standing on the record above the spindle, vinyl sliding out to the right */
.np-sleeve { --s: 120px; position: relative; width: calc(var(--s) * 1.45); height: var(--s); flex: none; }
.np-sleeve::before { content: ""; position: absolute; left: -40%; top: -45%; width: 190%; height: 190%; border-radius: 50%; pointer-events: none;
  background: radial-gradient(closest-side, rgba(190, 210, 255, .32), rgba(150, 175, 255, .12) 55%, transparent); }
.np-cover { outline: 1px solid rgba(255, 255, 255, .35); outline-offset: -1px; }
.np-cover { position: absolute; left: 0; top: 0; width: var(--s); height: var(--s); border-radius: 6px; overflow: hidden; background: var(--accent); box-shadow: 0 14px 30px rgba(0, 0, 0, .45); z-index: 1; }
.np-cover img { width: 100%; height: 100%; object-fit: cover; }
.np-vinyl { position: absolute; left: calc(var(--s) * .38); top: calc(var(--s) * .04); width: calc(var(--s) * .92); height: calc(var(--s) * .92); border-radius: 50%;
  background: radial-gradient(circle, #0b0b0b 0 3%, var(--accent) 3.5% 26%, #0b0b0b 27% 29%, transparent 30%),
              repeating-radial-gradient(circle, #3a3f4e 0 1px, #16181f 1.5px 3px);
  box-shadow: 0 8px 24px rgba(0, 0, 0, .5), inset 0 0 0 2px rgba(220, 228, 245, .55), 0 0 0 1px rgba(255, 255, 255, .15); transition: left .6s cubic-bezier(.3, .7, .2, 1);
  animation: spin 1.8s linear infinite; animation-play-state: paused; }
.np-vinyl::after { content: ""; position: absolute; inset: 0; border-radius: 50%; background: conic-gradient(from 20deg, transparent 0 8%, rgba(255,255,255,.32) 12%, transparent 18% 55%, rgba(255,255,255,.24) 60%, transparent 66%); }
.is-live .np-vinyl { left: calc(var(--s) * .5); animation-play-state: running; }
.label-fallback { display: grid; place-items: center; width: 100%; height: 100%; font-family: var(--display); font-size: .85rem; color: var(--accent-ink); background: var(--accent); }
.np-next { position: relative; border-left: 1px solid var(--line); padding-left: clamp(16px, 2vw, 28px); }
.np-next::before { content: ""; position: absolute; inset: -70px -60px -70px -40px; z-index: -1; pointer-events: none;
  background: radial-gradient(closest-side, rgba(3, 5, 12, .78), rgba(3, 5, 12, .5) 60%, rgba(3, 5, 12, .18) 85%, transparent); }
.np-next ol { list-style: none; margin: 0 0 16px; padding: 0; display: grid; gap: 8px; }
.np-next li { display: block; min-width: 0; }
.mini-list.is-past { opacity: .72; }
.mini-cover { width: 36px; height: 36px; border-radius: 3px; object-fit: cover; box-shadow: 0 4px 10px rgba(0, 0, 0, .35); font-size: .6rem; }
.more-link { font-size: .85rem; font-weight: 700; color: var(--accent-text); text-decoration: none; }
.more-link:hover { color: #fff; }
.played-list { list-style: none; margin: 0; padding: 0; }
.played-list li { display: grid; grid-template-columns: 52px 36px minmax(0, 1fr) auto 40px; gap: 14px; align-items: center; padding: 8px 0; border-top: 1px solid var(--line); }
.played-list li:first-child { border-top: 0; }
.played-list time { font-weight: 800; color: var(--accent-text); font-variant-numeric: tabular-nums; }
.played .tabs a { white-space: nowrap; }
@media (max-width: 560px) { .played-list li { grid-template-columns: 44px 36px minmax(0, 1fr) auto; } .played-list li > :last-child { display: none; } }
.np-video { grid-column: 1 / -1; aspect-ratio: 16 / 9; max-width: 760px; width: 100%; justify-self: center; border-radius: 14px; overflow: hidden; background: #000; }
.np-video iframe { width: 100%; height: 100%; border: 0; }
@keyframes spin { to { transform: rotate(360deg); } }

/* ---------- turntable top in true proportions (generated by tools/turntable.py) ---------- */
.deck { --cw: min(1180px, 100vw - 32px); --zoom: 1.21; position: relative; z-index: 3; width: calc(var(--cw) * var(--zoom));
  /* the visible silhouette starts (where the platter edge fades in, ~4.9 % of the drawing) 1.8 % inside the content column's
     left edge, lined up with the cards below; it grows to the right, where the counterweight may reach out into the air */
  --lead: .049;
  margin: 10px 0 0 calc(50% - var(--cw) / 2 + var(--cw) * .0177 - var(--cw) * var(--zoom) * var(--lead));
  pointer-events: none; opacity: .92; }
.stage { overflow: hidden; }
.deck-base, .deck-arm { display: block; width: 100%; height: auto; overflow: visible; }
.deck-arm { position: absolute; inset: 0; z-index: 3; }
.tt-lines :is(rect, line, path) { fill: none; stroke: var(--bp-dim); stroke-width: 1.1px; vector-effect: non-scaling-stroke; }
.tt-lines .tt-fine { stroke: var(--bp-dim); stroke-width: 1px; }
.tt-lines .tt-band { fill: rgba(8, 11, 22, .85); stroke: var(--bp); }
.tt-lines .tt-record { stroke: var(--bp); stroke-width: 2.2px; stroke-linecap: round; }
.tt-lines .tt-plate { stroke: var(--bp-dim); }
.tt-lines .solid { fill: rgba(8, 11, 22, .88); stroke: var(--bp); stroke-width: 1px; stroke-linejoin: round; }
.tt-lines .fine { stroke: var(--bp-dim); stroke-width: .8px; }
.tt-lines .ta-lift { stroke: var(--bp); stroke-width: 1.3px; stroke-linecap: round; stroke-linejoin: round; }
.tt-lines .tt-stylus { stroke: var(--bp); stroke-width: 1.2px; stroke-linecap: round; }
.tt-dot { fill: var(--bp); opacity: .85; }
.ta-arm { fill: none; stroke: var(--bp); stroke-width: 2px; stroke-linecap: round; vector-effect: non-scaling-stroke; }
.ta-head { fill: rgba(8, 11, 22, .85); stroke: var(--bp); stroke-width: 1.3px; stroke-linejoin: round; vector-effect: non-scaling-stroke; }
.ta-shell { fill: #0e1220; stroke: var(--bp); stroke-width: 1.2px; vector-effect: non-scaling-stroke; }
.ta-stylus { stroke: #e9ecf3; stroke-width: 1.4px; vector-effect: non-scaling-stroke; }
.target-bulb { fill: #6b5a3a; transition: fill .4s; }
.target-glow { opacity: 0; transition: opacity .6s; mix-blend-mode: screen; }
.target-spot { fill: rgba(255, 214, 150, .55); filter: blur(1.2px); }
.is-live .target-bulb { fill: #fff1cc; }
.is-live .target-glow { opacity: 1; }
/* grey strip under the hero; the slogan is engraved into it (one shade darker than the metal,
   dark edge on top, faint highlight below), small and left-aligned with the page content */
.slogan-strip { margin-inline: calc(50% - 50vw); position: relative; z-index: 2;
  background: linear-gradient(#5a5e67, #4f535b 55%, #4a4d55); border-bottom: 1px solid rgba(0, 0, 0, .45); }
.slogan { width: min(1180px, 100% - 32px); margin: 0 auto; padding: 6px 0 5px; font-family: var(--display); font-size: .6rem; line-height: 1;
  letter-spacing: .22em; text-transform: uppercase; color: #464950; text-shadow: 0 1px 0 rgba(255, 255, 255, .09), 0 -1px 0 rgba(0, 0, 0, .35); }
/* the floor: a straight black line the deck stands on; the Hitmeter unrolls from it */
.floor-line { height: 5px; background: #000; margin-inline: calc(50% - 50vw); box-shadow: 0 6px 18px rgba(0, 0, 0, .35); position: relative; z-index: 2; }
.stage + main > .chart:first-child, .stage + main > .with-aside:first-child > div > .chart {
  border-top-left-radius: 0; border-top-right-radius: 0; transform-origin: top center;
  animation: unroll .9s cubic-bezier(.2, .75, .25, 1) both; }
.stage + main { margin-top: 0; }
@keyframes unroll { from { clip-path: inset(0 0 100% 0); transform: translateY(-6px); } to { clip-path: inset(0 0 0 0); transform: none; } }



/* ---------- club atmosphere (disco ball and its rays) ---------- */
/* sized by the free margin beside the content: big in the empty side margin on wide screens, small in the corner otherwise */
.discoball { position: absolute; top: 0; right: max(6px, calc((100% - 1180px) / 2 - min(190px, max(84px, (100% - 1180px) / 2 - 24px)) - 12px));
  width: min(190px, max(84px, calc((100% - 1180px) / 2 - 24px))); aspect-ratio: 200 / 360; z-index: 1; }
@media (max-width: 860px) { .discoball { width: 72px; right: 8px; } } 
/* subpages: DJ scenes take turns instead of the turntable. The deck stays in the layout (invisible) so the band keeps
   the same height on every subpage; the scenes are drawn on the bottom of the band, above the floor line and strip. */
.stage.alt-scene .deck { visibility: hidden; }
.stage.alt-scene:not(.scene-ball) .discoball { display: none; }
.stage.scene-ball .discoball { --d: calc(min(1180px, 100vw - 32px) * .3); --w: calc(var(--d) * 200 / 176);
  width: var(--w); left: 40%; right: auto; margin-left: calc(var(--w) / -2);
  top: calc((100% - 28px) / 2 - var(--w) * 1.8 * .7222); }
.scenes { position: absolute; left: 0; right: 0; top: 0; bottom: 28px; z-index: 1; }
.scenes .scene-heads, .scene-3d { display: none; }
.stage.scene-heads .scene-heads, .stage.scene-cdj .scene-cdj, .stage.scene-mixer .scene-mixer { display: block; }
.scenes .scene-heads { position: absolute; top: 0; bottom: 0; left: 50%; width: min(1180px, 100vw - 32px); height: 100%; transform: translateX(-50%); overflow: visible; }
/* close-ups lying on a desk, seen from the front at an angle */
.scene-3d { position: absolute; left: var(--x, 50%); bottom: var(--sink, -60px); width: calc(min(1180px, 100vw - 32px) * var(--size, .62)); transform: translateX(-50%); perspective: 800px; perspective-origin: 50% 20%; }
.scene-3d .scene { display: block; width: 100%; height: auto; overflow: visible; transform: rotateX(var(--tilt, 58deg)) rotateZ(var(--turn, -14deg)); transform-origin: 50% 100%; }
.scenes .scene-mixer { --turn: 12deg; --size: .6; --sink: -70px; --x: 52%; --tilt: 68deg; }
.scenes .scene-cdj { --size: .33; --sink: -14px; --x: 46%; --tilt: 66deg; }
/* close-up: the whole drawing is magnified 4× around one detail (CD: display and buttons; mixer: faders and meters) */
.stage.scene-cdj .scenes { transform: translateX(11vw) scale(4); }   /* a little right of the middle */
.stage.scene-mixer .scenes { transform: translateX(-90px) scale(2.11); }
.stage.scene-cdj .scenes { transform-origin: calc(50% - 95px) 62px; }
.stage.scene-mixer .scenes { transform-origin: calc(50% + 45px) 88px; }
.stage:is(.scene-cdj, .scene-mixer) .scene .bp :where(line, rect, circle, ellipse, path, polyline) { stroke-width: .5px; }
.scene .lcd-time { font-family: var(--display); font-size: 50px; fill: rgba(200, 218, 255, .85); letter-spacing: .04em; }
.scene .lcd-small { font-family: var(--display); font-size: 22px; fill: var(--bp); }
.scene .lcd-label { font-family: var(--display); font-size: 11px; fill: var(--bp-dim); letter-spacing: .14em; }
.scene .bp .screen { fill: rgba(4, 8, 20, .92); }
.scene .phones .band { stroke-width: 2px; }
.scene .bp :where(line, rect, circle, ellipse, path, polyline) { fill: none; stroke: var(--bp); stroke-width: 1.2px; vector-effect: non-scaling-stroke; stroke-linejoin: round; }
.scene .bp :where(.bp-dim), .scene .bp-dim :where(line, path) { stroke: var(--bp-dim); stroke-width: 1px; }
.scene .bp :where(.bp-solid) { fill: rgba(8, 11, 22, .82); }
.scene .sc-label { font-family: var(--display); font-size: 13px; fill: var(--bp); letter-spacing: .08em; }
.scene .sc-small { font-size: 9px; fill: var(--bp-dim); }
.scene .sc-icon { fill: var(--bp); stroke: none; }
/* moving heads sway; beams brighten while the stream plays */
.mh { transform-box: view-box; transform: rotate(var(--t, 0deg)); animation: mh-sway 7s ease-in-out infinite alternate; }
.mh { opacity: .6; transition: opacity .6s; }
.is-live .mh { opacity: 1; }
/* each beam breathes in its own rhythm */
.mh-beam, .mh-core { mix-blend-mode: screen; animation: mh-int var(--pulse, 4s) ease-in-out infinite alternate; }
@keyframes mh-int { 0% { opacity: .3; } 60% { opacity: .85; } 100% { opacity: 1; } }
@keyframes mh-sway { 0% { transform: rotate(calc(var(--t, 0deg) - var(--amp, 26deg))); } 100% { transform: rotate(calc(var(--t, 0deg) + var(--amp, 26deg))); } }
/* CD player: play button lights up and the jog wheel turns while playing */
.scene .bp .jog-mark { stroke: rgba(200, 218, 255, .9); stroke-width: 2.5px; stroke-linecap: round; }
.jog-spin { transform-box: view-box; animation: spin 1.8s linear infinite; animation-play-state: paused; }
:root[data-disco] .jog-spin { animation-play-state: running; }
.scene .wave { stroke: var(--bp-dim); }
.is-live .scene .bp .play-btn { stroke: rgba(210, 225, 255, .95); filter: drop-shadow(0 0 6px rgba(160, 190, 255, .6)); }
.is-live .scene-cdj .sc-icon { fill: rgba(210, 225, 255, .95); }
/* mixer: knob markers in accent, VU meters dance while playing */
.scene .bp .knob-mark { stroke: rgba(200, 218, 255, .9); stroke-width: 2px; stroke-linecap: round; }
/* level meters: segments light up like the mirror ball facets (app.js sets --a per segment) */
.scene .bp .vu { fill: rgba(160, 190, 255, var(--a, .08)); stroke: rgba(160, 190, 255, .22); stroke-width: .8px; }
@media (max-width: 860px) { .scenes { display: none; } }

.discoball svg { width: 100%; height: 100%; overflow: visible; }
.db-string { stroke: var(--bp-dim); stroke-width: 1.2px; vector-effect: non-scaling-stroke; }
.db-cap { fill: #1b2034; stroke: var(--bp); stroke-width: 1px; vector-effect: non-scaling-stroke; }
.db-outline { fill: #05070f; stroke: var(--bp-dim); stroke-width: 1.4px; vector-effect: non-scaling-stroke; }
.db-facets rect { stroke: rgba(160, 190, 255, .13); stroke-width: .5px; vector-effect: non-scaling-stroke; }
@keyframes twinkle { 0%, 100% { opacity: 0; transform: scale(.4); } 50% { opacity: 1; transform: scale(1); } }

/* rays bouncing off the ball */
.db-burst { position: absolute; left: 50%; top: 72.2%; width: 1100px; height: 1100px; margin: -550px 0 0 -550px; border-radius: 50%; pointer-events: none;
  background: repeating-conic-gradient(from 0deg, rgba(255, 255, 255, .07) 0 1.2deg, transparent 1.2deg 9deg),
              repeating-conic-gradient(from 4deg, rgba(255, 210, 140, .045) 0 .8deg, transparent .8deg 13deg);
  -webkit-mask: radial-gradient(circle, transparent 0 7%, #000 9%, transparent 62%); mask: radial-gradient(circle, transparent 0 7%, #000 9%, transparent 62%);
  mix-blend-mode: screen; animation: burst 60s linear infinite; }
@keyframes burst { to { transform: rotate(360deg); } }

/* ---------- ads: one placement per page view (chosen in app.js) ---------- */
.ad-place { position: relative; }
.ad-place::before { content: "Oglas"; display: block; font-size: .65rem; letter-spacing: .14em; text-transform: uppercase; color: var(--dim); margin-bottom: 4px; }
.chart-ad { padding: 12px 0; border-top: 1px solid var(--line); list-style: none; }
.ad-foot { width: min(1180px, 100% - 32px); margin: 28px auto 0; }
.with-aside { display: grid; gap: 28px; grid-template-columns: minmax(0, 1fr); align-items: start; }
.side { display: grid; gap: 24px; align-content: start; }
.side:not(:has(> :not([hidden]))) { display: none; }
.ad-aside { display: none; }
@media (min-width: 1100px) {
  /* Hitmeter narrower, right column for Facebook and (later) the sidebar ad */
  .with-aside:has(.side > :not([hidden])) { grid-template-columns: minmax(0, 1fr) 340px; }
  .side { position: sticky; top: 16px; }
  .stage + main > .with-aside:first-child > .side > .side-card:first-child { border-top-left-radius: 0; border-top-right-radius: 0; transform-origin: top center;
    animation: unroll .9s .15s cubic-bezier(.2, .75, .25, 1) both; }
}
@media (min-width: 1280px) { .ad-aside:not([hidden]) { display: block; min-height: 600px; } }
.side-card { background: var(--card); box-shadow: var(--shadow); border-radius: calc(var(--radius) + 8px); padding: 20px; }
.side-card h2 { display: flex; align-items: center; gap: 10px; margin: 0 0 14px; font-family: var(--display); font-size: 1.05rem; font-weight: 400; }
.side-card h2 svg { width: 22px; height: 22px; fill: #1877f2; }
.fb-frame { display: grid; gap: 14px; justify-items: start; }
.fb-frame p { margin: 0; font-size: .9rem; }
.fb-load { padding: 10px 18px; }
.fb-open { font-size: .85rem; }
.fb-frame.is-loaded { display: block; }
.fb-frame iframe { display: block; width: 100%; height: var(--fb-h, 560px); border: 0; border-radius: 10px; overflow: hidden; }

/* ---------- chart ---------- */
.chart { background: var(--card); border: 0; box-shadow: var(--shadow); border-radius: calc(var(--radius) + 8px); padding: 24px; }
.chart-head { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; justify-content: space-between; margin-bottom: 12px; }
.chart-head :is(h1, h2) { margin: 0; font-family: var(--display); font-size: 1.2rem; font-weight: 400; }
.tabs { display: flex; gap: 4px; padding: 4px; border-radius: 999px; background: var(--bg-2); }
.tabs a { text-decoration: none; padding: 6px 14px; border-radius: 999px; font-weight: 700; color: var(--dim); }
.tabs a[aria-current="page"] { background: var(--accent); color: var(--accent-ink); }
.chart-list { list-style: none; margin: 0; padding: 0; }
.chart-row { display: grid; grid-template-columns: 34px 34px 48px 1fr 40px auto; gap: 12px; align-items: center; padding: 10px 0; border-top: 1px solid var(--line); }
.chart-row:first-child { border-top: 0; }
.pos { font-size: 1.35rem; font-weight: 900; text-align: center; font-variant-numeric: tabular-nums; }
.chart-row:nth-child(-n+3) .pos { color: var(--accent-text); }
.trend { text-align: center; font-size: .8rem; }
.trend small { font-size: .6rem; font-weight: 800; color: var(--accent-2); }
.trend-up { color: var(--like); } .trend-down { color: var(--dislike); } .trend-same { color: var(--dim); }
.thumb { width: 48px; height: 48px; border-radius: 10px; object-fit: cover; }
.meta { display: grid; min-width: 0; }
.meta b, .meta .dim { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.meta .dim { font-size: .88rem; }
.vote.compact .vote-btn { width: 36px; height: 36px; }
.vote.compact .vote-btn svg { width: 16px; height: 16px; }
.more { margin: 12px 0 0; text-align: right; font-weight: 700; }
.empty, .note { padding: 8px 0; }

/* ---------- on-demand video (Hitmeter) ---------- */
.yt-btn { width: 40px; height: 40px; }
button.yt-btn { color: var(--dim); }
button.yt-btn:hover { background: var(--bg-2); border-color: var(--line); color: var(--text); }
.yt-dialog { width: min(960px, 100% - 24px); padding: 16px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--card); color: var(--text); box-shadow: var(--shadow); }
.yt-dialog::backdrop { background: rgba(0, 0, 0, .7); backdrop-filter: blur(4px); }
/* listener message: a discreet link in the hero, a small form in a dialog */
.msg-open { justify-self: start; margin-top: 2px; padding: 4px 0; border: 0; background: none; font: inherit; font-size: .85rem; color: var(--dim); cursor: pointer; text-decoration: underline; text-underline-offset: 3px; }
.msg-open:hover { color: var(--accent-text); }
.msg-dialog { width: min(440px, 100% - 24px); padding: 22px; border: 1px solid var(--line); border-radius: calc(var(--radius) + 6px); background: var(--card); color: var(--text); box-shadow: var(--shadow); }
.msg-dialog::backdrop { background: rgba(0, 0, 0, .65); backdrop-filter: blur(4px); }
.msg-dialog form { display: grid; gap: 12px; }
.msg-dialog h2 { margin: 0; font-family: var(--display); font-weight: 400; font-size: 1.2rem; }
.msg-dialog p { margin: 0; font-size: .9rem; }
.msg-dialog label { display: grid; gap: 4px; font-weight: 700; font-size: .9rem; }
.msg-dialog label small { font-weight: 400; }
.msg-dialog input:not([type=checkbox]), .msg-dialog textarea { font: inherit; font-weight: 400; padding: 10px 12px; border: 1px solid var(--line); border-radius: 10px; background: var(--bg); color: var(--text); resize: vertical; }
.msg-dialog .msg-check { display: flex; gap: 8px; align-items: flex-start; font-weight: 400; font-size: .82rem; color: var(--dim); }
.msg-dialog .msg-check input { margin-top: 3px; }
.msg-hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.msg-status { min-height: 1.4em; font-weight: 700; }
.msg-status.is-ok { color: var(--like); }
.msg-status.is-err { color: var(--dislike); }
.msg-actions { display: flex; justify-content: flex-end; gap: 10px; }
.msg-actions .btn { padding: 10px 18px; }
.yt-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 12px; }
.yt-frame { aspect-ratio: 16 / 9; background: #000; border-radius: 12px; overflow: hidden; }
.yt-frame iframe { width: 100%; height: 100%; border: 0; }

/* ---------- content pages ---------- */
.prose { max-width: 760px; background: var(--card); border: 0; box-shadow: var(--shadow); border-radius: calc(var(--radius) + 8px); padding: clamp(20px, 4vw, 44px); }
.prose h1 { margin-top: 0; font-family: var(--display); font-weight: 400; font-size: clamp(1.4rem, 3vw, 2rem); line-height: 1.25; }
.prose h2 { margin-top: 1.8em; }
.prose a { color: var(--accent-2); }
.prose table { width: 100%; border-collapse: collapse; margin: 1em 0; font-size: .9rem; display: block; overflow-x: auto; }
.prose th, .prose td { text-align: left; vertical-align: top; padding: 8px 10px; border-bottom: 1px solid var(--line); }
.prose th { font-weight: 800; }
.prose blockquote { margin: 0 0 1.2em; padding: 10px 14px; border-left: 4px solid var(--accent); background: var(--bg-2); border-radius: 0 8px 8px 0; }
.prose blockquote p { margin: 0; }
.prose h3 { margin-top: 1.4em; font-size: 1.05rem; }
.ad { min-height: 100px; }

/* ---------- footer ---------- */
.site-footer { width: min(1180px, 100% - 32px); margin: 40px auto 0; padding: 24px 0; border-top: 1px solid var(--line); color: var(--dim); }
.footer-links { display: flex; flex-wrap: wrap; gap: 8px 20px; }
.footer-links a { text-decoration: none; }
.preview-bar { position: relative; z-index: 5; padding: 6px 16px; background: #ffb400; color: #1a1300; font-size: .82rem; font-weight: 700; text-align: center; }
.link-btn { border: 0; padding: 0; background: none; font: inherit; color: var(--accent-text); cursor: pointer; }
.link-btn[hidden], .install-hint[hidden] { display: none; }
/* installed app: no popup window, no install offer */
@media (display-mode: standalone) { [data-popup], [data-install], [data-install-ios] { display: none !important; } }

/* ---------- sticky player bar ---------- */
.player-bar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 50;
  height: calc(var(--bar-h) + env(safe-area-inset-bottom)); padding: 0 max(14px, calc((100% - 1180px) / 2)) env(safe-area-inset-bottom);
  display: flex; align-items: center; gap: 14px;
  background: linear-gradient(180deg, color-mix(in srgb, var(--navy) 94%, transparent), color-mix(in srgb, var(--hero-top) 96%, transparent));
  color: #fff; box-shadow: 0 -10px 30px rgba(10, 14, 30, .25);
}
.player-bar .dim { color: rgba(255, 255, 255, .7); }
.player-bar .icon-btn { background: rgba(255, 255, 255, .12); border-color: transparent; color: #fff; }
.play-btn { position: relative; display: grid; place-items: center; width: 54px; height: 54px; border-radius: 50%; border: 0; background: var(--accent); color: var(--accent-ink); cursor: pointer; flex: none; }
.play-btn svg { width: 26px; height: 26px; }
.spinner { display: none; position: absolute; inset: -4px; border-radius: 50%; border: 3px solid transparent; border-top-color: var(--accent-2); animation: spin .8s linear infinite; }
.is-loading .spinner { display: block; }
@keyframes spin { to { transform: rotate(360deg); } }
.bar-cover { width: 44px; height: 44px; border-radius: 10px; object-fit: cover; flex: none; }
.bar-meta { display: grid; min-width: 0; flex: 1; line-height: 1.25; }
.bar-ticker { flex: 1.3; min-width: 0; margin: 0; text-align: center; font-size: .88rem; font-style: italic; color: rgba(255, 255, 255, .72);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; transition: opacity .4s; }
.bar-title { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 700; }
.volume input { width: 110px; accent-color: var(--accent); }

/* ---------- popup ---------- */
body.popup { padding: 0; background: #05070f; }
body.popup .floor-line { display: none; }
body.popup main { width: 100%; }
/* popup (480 × 760): the cover on top, the text below it at full width, compact spacing and three earlier songs,
   so everything fits the window; the admin's hero height does not apply here */
body.popup .stage:not(.is-empty) { --hero-pad: 14px !important; --np-k: .8 !important; }
body.popup .np-hero { grid-template-columns: minmax(0, 1fr); align-items: start; justify-items: stretch; gap: 12px; }
body.popup .stage .np-sleeve { --s: 140px; width: var(--s); margin-top: 2px; }
body.popup .np-cover { box-shadow: 0 16px 36px rgba(0, 0, 0, .45); }
body.popup .np-title { font-size: clamp(1.3rem, 6vw, 1.6rem); }
body.popup :is(.np-next, .np-video) { grid-column: 1 / -1; }
body.popup .np-next { border-left: 0; padding-left: 0; }
/* the popup is narrow: nothing may grow wider than the window (a grid item's min-content width came from the
   one-line vote thank-you and pushed title, progress and buttons over the edge); the thank-you wraps instead */
.np-body { min-width: 0; }
body.popup .vote-msg { white-space: normal; height: auto; min-height: 1.5em; overflow: visible; }
/* the popup is narrow but has room for the history: five earlier songs */
body.popup .np-next .np-prev-head { display: block; }
body.popup .np-next .mini-list.is-past { display: grid; }
body.popup .stage { min-height: 100vh; }
.popup-brand { padding-top: 12px; }
.popup-brand .logo-text strong { color: #fff; }
.popup-brand .logo-text small { display: none; }
.popup-brand .logo-badge circle { fill: #fff; }
.popup-brand .logo-badge path { fill: #0b0b0b; }
.tap-to-play .np-hero [data-play] { animation: tap-pulse 1.6s ease-in-out infinite; }
@keyframes tap-pulse { 50% { box-shadow: 0 0 0 10px color-mix(in srgb, var(--accent) 30%, transparent); } }

/* ---------- turntable on: the sleeve shows only the cover (the record is the turntable below) ---------- */
.stage:not(.no-deck) .np-vinyl { display: none; }
.stage:not(.no-deck) .np-sleeve { width: var(--s); }

/* ---------- hover (mouse only; touch screens keep the plain states) ---------- */
.np-cover, .thumb, .np-next li, .chart-row, .played-list li { transition: transform .2s, box-shadow .2s, background .2s, color .2s; }
.np-next li { padding: 3px 8px; margin: 0 -8px; border-radius: 5px; }
.chart-row, .played-list li { position: relative; }
.chart-row::before, .played-list li::before { content: ""; position: absolute; inset: 0 -12px; z-index: -1; border-radius: 10px; background: transparent; transition: background .2s; pointer-events: none; }
.chart-list, .played-list { isolation: isolate; }
@media (hover: hover) and (pointer: fine) {
  /* hero: without the turntable the record peeks out and turns; with it, the cover lifts and the platter speeds up (app.js) */
  .stage.no-deck .np-sleeve:hover .np-vinyl { left: calc(var(--s) * .5); animation-play-state: running; }
  .np-sleeve:hover .np-cover { transform: translateY(-3px) scale(1.04); box-shadow: 0 20px 38px rgba(0, 0, 0, .55); }
  .np-next li:hover { background: rgba(255, 255, 255, .07); }
  .np-next li:hover span { color: rgba(255, 255, 255, .9); }
  .np-next li:hover b { color: #fff; }
  .vote-btn:hover { transform: scale(1.08); }
  /* Hitmeter and history rows */
  .chart-row:hover::before, .played-list li:hover::before { background: color-mix(in srgb, var(--text) 4%, transparent); }
  .chart-row:hover .thumb { transform: scale(1.05); box-shadow: 0 6px 16px rgba(0, 0, 0, .22); }
  .chart-row:hover button.yt-btn, .played-list li:hover button.yt-btn { color: var(--text); border-color: color-mix(in srgb, var(--text) 30%, transparent); }
  .chart-row:hover .vote-btn, .played-list li:hover .vote-btn { border-color: color-mix(in srgb, var(--text) 25%, transparent); }
}

/* ---------- "now playing" font (admin: Nastavitve → Postaja). One family for the hero, the lists and the player bar;
   the title is the same family in a heavier weight instead of the wide display face. ---------- */
:root[data-np-font="sora"] { --np-font: "Sora", var(--font); }
:root[data-np-font="space"] { --np-font: "Space Grotesk", var(--font); }
:root[data-np-font="inter"] { --np-font: "Inter", var(--font); }
:root[data-np-font] :is(.np-hero, .player-bar) { font-family: var(--np-font); }
:root[data-np-font] .np-title { font-family: var(--np-font); font-weight: 650; letter-spacing: -.015em; line-height: 1.1; font-size: clamp(1.6rem, 3.6vw, 2.7rem); }
:root[data-np-font] .np-artist { font-weight: 400; }
:root[data-np-font] .np-hero .eyebrow { font-weight: 600; letter-spacing: .16em; }
:root[data-np-font] .np-next b, :root[data-np-font] .bar-title { font-weight: 600; }

/* ---------- minimal style (admin: Beta → Minimalni stil): one accent only on the progress bar, one font everywhere
   (Michroma stays only in the logo and the slogan), no "now playing" label above the title ---------- */
:root[data-style="minimal"][data-np-font] body { font-family: var(--np-font); }
:root[data-style="minimal"][data-np-font] :is(.chart-head h1, .chart-head h2, .side-card h2, .prose h1, .msg-dialog h2) { font-family: var(--np-font); font-weight: 600; letter-spacing: -.01em; }
:root[data-style="minimal"] .np-body > .eyebrow { display: none; }
/* lighter weights: Sora is wide, the old 700–900 weights look heavy */
:root[data-style="minimal"] :is(b, strong):not(.logo-text strong) { font-weight: 600; }
:root[data-style="minimal"] :is(.site-nav a, .tabs a, .btn, .more, .more-link, .msg-dialog label, .msg-status, .bar-title) { font-weight: 500; }
:root[data-style="minimal"] .np-next b, :root[data-style="minimal"] .bar-title { font-weight: 500; }
:root[data-style="minimal"] :is(.eyebrow, .live-dot, .trend small, .prose th) { font-weight: 600; }
:root[data-style="minimal"] .pos { font-weight: 300; }
:root[data-style="minimal"] .np-artist { font-weight: 400; }
:root[data-style="minimal"] .site-nav a[aria-current="page"] { color: var(--header-text); background: color-mix(in srgb, var(--header-text) 9%, transparent); }
:root[data-style="minimal"] .btn-primary { background: var(--text); color: var(--bg); box-shadow: none; }
:root[data-style="minimal"] .btn-primary:hover { color: var(--bg); filter: none; opacity: .88; }
:root[data-style="minimal"] .np-hero .btn-primary { background: transparent; color: #fff; border: 1px solid rgba(255, 255, 255, .75); }
:root[data-style="minimal"] .np-hero .btn-primary:hover { background: #fff; color: #0b0f1c; opacity: 1; }
:root[data-style="minimal"] .play-btn { background: #fff; color: #0b0f1c; }
:root[data-style="minimal"] .volume input { accent-color: #fff; }
:root[data-style="minimal"] .tabs a[aria-current="page"] { background: var(--text); color: var(--bg); }
:root[data-style="minimal"] .chart-row:nth-child(-n+3) .pos { color: var(--text); }
:root[data-style="minimal"] :is(.more-link, .link-btn) { color: var(--dim); }
:root[data-style="minimal"] .more-link:hover, :root[data-style="minimal"] .msg-open:hover { color: #fff; }
:root[data-style="minimal"] :is(.np-next time, .played-list time) { color: var(--text); font-weight: 600; }
:root[data-style="minimal"] .icon-btn:hover { border-color: color-mix(in srgb, var(--text) 45%, transparent); }
:root[data-style="minimal"] :focus-visible { outline-color: color-mix(in srgb, currentColor 70%, transparent); outline-width: 2px; }
:root[data-style="minimal"] :is(.np-cover, .label-fallback) { background: #26304f; color: #fff; }
:root[data-style="minimal"] .prose blockquote { border-left-color: color-mix(in srgb, var(--text) 30%, transparent); }
:root[data-style="minimal"].tap-to-play .np-hero [data-play] { animation-name: tap-pulse-min; }
@keyframes tap-pulse-min { 50% { box-shadow: 0 0 0 10px rgba(255, 255, 255, .14); } }
/* 3 · thin line icons and hairlines instead of fills and shadows */
:root[data-style="minimal"] .vote-btn { background: transparent; border: 1px solid color-mix(in srgb, var(--text) 22%, transparent); }
:root[data-style="minimal"] .vote-btn svg { fill: none; stroke: currentColor; stroke-width: 1.5px; stroke-linejoin: round; }
:root[data-style="minimal"] .vote-btn.like:hover, :root[data-style="minimal"] .vote-btn.like.is-active { background: transparent; border-color: var(--like); color: var(--like); }
:root[data-style="minimal"] .vote-btn.dislike:hover, :root[data-style="minimal"] .vote-btn.dislike.is-active { background: transparent; border-color: var(--dislike); color: var(--dislike); }
:root[data-style="minimal"] .vote-btn.is-active svg { fill: currentColor; fill-opacity: .18; }
:root[data-style="minimal"] .icon-btn { background: transparent; border: 1px solid color-mix(in srgb, var(--text) 18%, transparent); }
:root[data-style="minimal"] :is(.chart, .side-card, .prose) { box-shadow: none; border: 1px solid var(--line); }
:root[data-style="minimal"] .site-header { box-shadow: none; border-bottom: 1px solid var(--line); }
:root[data-style="minimal"] .chart-row, :root[data-style="minimal"] .played-list li { border-top-color: color-mix(in srgb, var(--line) 70%, transparent); }
:root[data-style="minimal"] :is(.np-cover, .thumb, .mini-cover, .bar-cover) { box-shadow: none; border-radius: 4px; }
:root[data-style="minimal"] .np-progress { height: 3px; }
:root[data-style="minimal"] .floor-line { height: 1px; background: rgba(160, 190, 255, .28); box-shadow: none; }

/* 4 · calmer hero: no halftone dots, one deep tone with a single soft light; blueprint drawings a notch quieter.
   With the raster switched on (admin) the hero keeps its original lighter blue look, dots and text scrims included. */
:root[data-style="minimal"]:not([data-raster]) .backdrop { background: radial-gradient(900px 420px at 72% -10%, rgba(140, 165, 230, .16), transparent 65%), linear-gradient(180deg, #0b1020 0%, #080c18 70%, #05070f 100%); }
:root[data-style="minimal"]:not([data-raster]) .backdrop::before { display: none; }
:root[data-style="minimal"]:not([data-raster]) .backdrop::after { background: linear-gradient(180deg, transparent 0%, transparent 55%, rgba(3, 4, 10, .55) 100%); }
:root[data-style="minimal"]:not([data-raster]) .np-hero::before, :root[data-style="minimal"]:not([data-raster]) .np-next::before { display: none; }
:root[data-style="minimal"]:not([data-raster]) .np-hero { text-shadow: none; }
:root[data-style="minimal"] .stage { --bp: rgba(160, 190, 255, .5); --bp-dim: rgba(160, 190, 255, .24); }

/* 5 · more air and a clearer type hierarchy */
:root[data-style="minimal"][data-np-font] .np-title { font-weight: 500; letter-spacing: -.025em; font-size: clamp(1.8rem, 4vw, 3.1rem); line-height: 1.05; }
:root[data-style="minimal"] .np-artist { margin: 10px 0 26px; font-size: clamp(.98rem, 1.6vw, 1.15rem); color: rgba(255, 255, 255, .6); }
:root[data-style="minimal"] .np-next { font-size: .88rem; }
:root[data-style="minimal"] .np-next ol { gap: 10px; margin-bottom: 22px; }
:root[data-style="minimal"] .np-next .eyebrow { font-size: .66rem; letter-spacing: .22em; color: rgba(255, 255, 255, .45); margin-bottom: 12px; }
:root[data-style="minimal"] .np-next { border-left-color: rgba(255, 255, 255, .1); }
:root[data-style="minimal"] .pos { font-variant-numeric: tabular-nums; font-size: 1.25rem; color: var(--dim); }
:root[data-style="minimal"] .chart-row:nth-child(-n+3) .pos { color: var(--text); }
:root[data-style="minimal"] .chart { padding: clamp(20px, 3vw, 34px); }

/* 6 · the player bar as frosted glass */
/* nearly opaque instead of frosted: the blur behind a fixed bar is redrawn on every change on the page */
:root[data-style="minimal"] .player-bar { background: rgba(9, 12, 24, .95);
  box-shadow: none; border-top: 1px solid rgba(255, 255, 255, .08); }
:root[data-style="minimal"] .player-bar .icon-btn { background: transparent; border: 1px solid rgba(255, 255, 255, .18); }

/* 7 · softer, slower motion */
:root[data-style="minimal"] :is(.btn, .vote-btn, .icon-btn, .site-nav a, .tabs a, .np-cover, .thumb, .np-next li, .chart-row, .played-list li, .chart-row::before, .played-list li::before) {
  transition-duration: .35s; transition-timing-function: cubic-bezier(.22, .61, .36, 1); }
:root[data-style="minimal"] .vote-btn:hover { transform: scale(1.04); }
:root[data-style="minimal"] .np-sleeve:hover .np-cover { transform: translateY(-2px) scale(1.02); box-shadow: 0 16px 34px rgba(0, 0, 0, .45); }

/* the progress bar carries the "live" signal: a soft light runs along it while the stream plays */
.np-progress span { position: relative; overflow: hidden; }
:root[data-style="minimal"].is-live .np-progress span::after { content: ""; position: absolute; inset: 0; width: 40%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .55), transparent); animation: np-sheen 2.4s ease-in-out infinite; }
@keyframes np-sheen { from { transform: translateX(-100%); } to { transform: translateX(260%); } }

/* covers that open the video: a small play mark shows on hover (always on touch screens) */
.thumb-btn { position: relative; display: block; padding: 0; border: 0; background: none; cursor: pointer; border-radius: 10px; line-height: 0; }
.thumb-btn::after { content: ""; position: absolute; right: -4px; bottom: -4px; width: 18px; height: 18px; border-radius: 50%;
  background: rgba(10, 14, 28, .82) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23fff' d='M9 7v10l8-5z'/%3E%3C/svg%3E") center / 14px no-repeat;
  box-shadow: 0 0 0 1.5px rgba(255, 255, 255, .85); opacity: 0; transform: scale(.8); transition: opacity .25s, transform .25s; }
.thumb-btn:hover::after, .thumb-btn:focus-visible::after { opacity: 1; transform: none; }
@media (hover: none) { .thumb-btn::after { opacity: .9; transform: none; } }

/* phones: the hero keeps only "next" (the history is one tap away), the Hitmeter drops the separate video column */
@media (max-width: 860px) {
  .np-next :is(.np-prev-head, .mini-list.is-past) { display: none; }
}
@media (max-width: 560px) {
  /* cards run edge to edge on phones: no side borders, no rounded corners, the text keeps the 16px gutter */
  main { width: 100%; }
  :is(.chart, .side-card, .prose) { border-radius: 0 !important; border-left: 0 !important; border-right: 0 !important; padding-left: 16px; padding-right: 16px; }
  .chart-row::before, .played-list li::before { inset: 0 -16px; border-radius: 0; }
  .chart-row { grid-template-columns: 26px 44px 1fr auto !important; }
  .chart-row > .yt-btn { display: none; }
}

/* ---------- responsive ---------- */
@media (max-width: 860px) {
  .np-hero { grid-template-columns: auto minmax(0, 1fr); }
  .np-next { grid-column: 1 / -1; border-left: 0; padding-left: 0; border-top: 1px solid var(--line); padding-top: 14px; }
  .chart { padding: 16px; }
  .chart-row { grid-template-columns: 28px 24px 44px 1fr 40px auto; gap: 10px; }
  .volume, .bar-ticker { display: none; }
}
/* the header: logo and theme toggle on top, the menu on its own row below, before anything wraps */
.logo-text strong, .site-nav a { white-space: nowrap; }
@media (max-width: 760px) {
  .site-header { flex-wrap: wrap; gap: 10px; }
  .site-nav { order: 3; width: 100%; margin: 0; overflow-x: auto; }
  .theme-toggle { margin-left: auto; }
}
@media (max-width: 560px) {
  .np-hero { grid-template-columns: minmax(0, 1fr); }
  .np-sleeve { --s: 96px; }
  .trend { display: none; }
  .chart-row { grid-template-columns: 26px 44px 1fr 40px auto; }
  .player-bar { gap: 10px; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  /* the live dot still fades in and out (no movement), so "playing" stays visible */
}

/* with the crowd on, the hero without the turntable gets extra room at the bottom, so the people stand under the buttons, not behind the text
   (with the turntable on, the deck already makes that room) */
.stage.has-crowd { --crowd-room: clamp(36px, 6.5vw, 100px); }
.stage.has-crowd.no-deck:not(.is-empty) .stage-content { padding-bottom: calc(var(--hero-pad) + var(--crowd-room)); }
.stage.has-crowd.no-deck.is-empty .stage-content { min-height: calc(clamp(40px, 6vw, 90px) + var(--crowd-room) * .6); }
@media (max-width: 860px) {
  .stage.has-crowd:not(.is-empty) .stage-content { padding-bottom: calc(var(--hero-pad) + var(--crowd-room)); }
}

/* dance floor at the end of the page (partials/footer-crowd): dark stage, animated navy dancers, front row + heart in the page colour */
.floor { position: relative; height: clamp(150px, 17vw, 260px); margin-top: 56px; overflow: hidden;
  background: radial-gradient(55% 85% at 50% 100%, rgba(120, 150, 235, .32), transparent 70%), linear-gradient(180deg, transparent 0%, rgba(27, 36, 66, .55) 14%, #141b36 34%, #0b1020 62%, #080c18 100%); }
.floor img { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; object-fit: cover; object-position: 50% 100%; opacity: .9;
  -webkit-mask-image: linear-gradient(to top, #000 55%, transparent 100%); mask-image: linear-gradient(to top, #000 55%, transparent 100%); }
.floor-front { position: absolute; inset: 0; background: var(--bg); -webkit-mask: var(--front) 50% 100% / 100% 100% no-repeat; mask: var(--front) 50% 100% / 100% 100% no-repeat; }
.floor-heart { position: absolute; right: max(12px, 6%); bottom: 0; height: 100%; aspect-ratio: 260 / 380; background: var(--bg);
  -webkit-mask: var(--heart) 50% 100% / contain no-repeat; mask: var(--heart) 50% 100% / contain no-repeat; }
.site-footer.on-floor { margin-top: 0; border-top: 0; padding-top: 4px; }
/* under the hero: the floor continues the hero's dark bottom (no fade from the page colour on top); the hero's floor line goes */
.floor.under-hero { --floor-h: clamp(140px, 15vw, 230px); margin-top: 0; margin-bottom: calc(-1 * var(--floor-h)); height: var(--floor-h); z-index: 0;
  background: radial-gradient(55% 85% at 50% 100%, rgba(120, 150, 235, .26), transparent 70%), linear-gradient(180deg, #03050b 0%, #070b17 100%); }
.floor.under-hero img { -webkit-mask-image: none; mask-image: none; }
.stage:has(+ .floor.under-hero) .floor-line { display: none; }
/* …and it is only a backdrop: the content starts right under the hero as before and covers the crowd (Hitmeter card on top) */
.floor.under-hero + main { position: relative; z-index: 1; }
/* the crowd belongs to the DJ mode: switched off (or on phones) there is none */
:root[data-modes]:not([data-dj]) :is(.floor, .backdrop .crowd, .backdrop .crowd-heart) { display: none; }

/* ---------- visitor modes (desktop): calm by default · DJ (power knob) · Disco (switches itself off after N songs) ---------- */
/* calm: no turntable, no ball, no crowd, and the hero is lower by the turntable's height (window.mdjLook sets .no-deck).
   Calm keeps the sleeve's room for the record sliding out; in DJ mode the record is on the turntable, so the text moves up to the cover. */
.stage.no-deck .deck { display: none; }
.stage.deck-off .deck { visibility: hidden; }
body.popup .np-vinyl { display: none; }
:root:not([data-disco]) .stage:not(.alt-scene) .discoball { display: none; }
/* disco: the crowd "dances" by showing five still poses one after another – no re-drawing of the big picture */
.crowd img.pose, .floor img.pose { display: none; }
:root[data-disco] :is(.crowd, .floor) img.pose { display: block; }
:root[data-disco] :is(.crowd, .floor) img.still { display: none; }
/* five poses, one per beat (124 bpm = .484 s), each image visible in its own fifth of the 2.42 s cycle */
.backdrop .crowd img.pose { position: absolute; inset: 0; }
:root[data-disco] img.pose { opacity: 0; animation: pose 2.42s steps(1, end) infinite; animation-delay: calc(var(--i) * -.484s); }
@keyframes pose { 0% { opacity: 1; } 20% { opacity: 0; } 100% { opacity: 0; } }
/* everything that sways, pulses or turns waits for the disco (the record still spins while the stream plays) */
:root:not([data-disco]) :is(.db-burst, .mh, .mh-beam, .mh-core) { animation-play-state: paused; }
/* disco on the home hero: moving-head beams aimed at the middle, behind the now-playing block (partials/home-beams) */
.home-beams { display: none; position: absolute; left: 0; right: 0; top: 0; bottom: 28px; width: 100%; height: calc(100% - 28px); z-index: 1; pointer-events: none; }
:root[data-disco] .home-beams { display: block; }
.home-beams :is(.mh-beam, .mh-core) { mix-blend-mode: normal; }


/* header buttons */
.look-btns { display: flex; gap: 8px; margin-left: -6px; }   /* sits between the menu and the theme toggle */
.look-btn svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.4; stroke-linecap: round; }
.look-btn[aria-pressed="true"] { color: var(--header-text); border-color: color-mix(in srgb, var(--header-text) 40%, transparent); }
/* DJ knob: "DJ" stays upright, the dash travels from 10 to 2 o'clock like a power knob being turned; red glow on the right when on */
.look-power { position: relative; }
:root .site-header .look-power { background: #0d0f14; border-color: #0d0f14; color: #fff; }
:root .site-header .look-power:hover { background: #000; border-color: #000; }
.pw-face { position: relative; display: grid; place-items: center; width: 100%; height: 100%; border-radius: 50%;
  font-size: .7rem; font-weight: 800; letter-spacing: .06em; line-height: 1; color: #fff; padding-top: 3px; }
.pw-dash { position: absolute; inset: 3px; border-radius: 50%; transform: rotate(-50deg); transition: transform .5s cubic-bezier(.3, 1.35, .5, 1); }
.pw-dash::before { content: ""; position: absolute; top: 0; left: 50%; width: 2px; height: 7px; margin-left: -1px; border-radius: 1px; background: currentColor; }
.look-power[aria-pressed="true"] .pw-dash { transform: rotate(50deg); }
:root .site-header .look-power[aria-pressed="true"] { border-color: #0d0f14; border-right-color: #ff2a1f;
  box-shadow: 7px 0 14px -3px rgba(255, 42, 31, .85), inset -6px 0 8px -5px rgba(255, 42, 31, .8); }
.look-power[aria-pressed="true"] .pw-dash::before { background: #ff2a1f; box-shadow: 0 0 4px rgba(255, 42, 31, .9); }
/* disco: the little ball sparkles and turns while the mode is on */
.look-disco .spark { opacity: 0; transition: opacity .25s; }
.look-disco[aria-pressed="true"] .spark { opacity: 1; stroke: #ffd23f; animation: look-spark 1.94s ease-in-out infinite; }
.look-disco { position: relative; }
.look-disco:disabled { opacity: .35; cursor: not-allowed; }
.look-disco:disabled:hover { border-color: color-mix(in srgb, var(--text) 18%, transparent); }
.look-disco[aria-pressed="true"] { border-color: transparent; }
.look-disco[aria-pressed="true"]::before { content: ""; position: absolute; inset: -2px; border-radius: 50%; padding: 2px; pointer-events: none;
  background: conic-gradient(from 0deg, #ff3b6b, #ffd23f, #3fe0c5, #4a9dff, #b45cff, #ff3b6b);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude;
  animation: spin 2.4s linear infinite; }
.look-disco[aria-pressed="true"] svg { filter: drop-shadow(0 0 3px rgba(255, 210, 63, .6)); }
@keyframes look-spark { 0%, 100% { opacity: .2; } 50% { opacity: 1; } }

/* phones: no modes; instead a clear "install as app" button in the header */
.install-cta { display: none; }
@media (max-width: 860px) {
  .look-btns { display: none; }
  .install-cta:not([hidden]) { display: inline-flex; align-items: center; gap: 6px; margin-left: auto; padding: 8px 14px; border-radius: 999px;
    border: 1px solid color-mix(in srgb, var(--header-text) 30%, transparent); background: transparent; color: var(--header-text);
    font: inherit; font-size: .85rem; font-weight: 600; cursor: pointer; white-space: nowrap; }
  .install-cta svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
  .install-cta:not([hidden]) ~ .theme-toggle { margin-left: 0; }
}
.ios-hint-pop { position: absolute; right: 16px; top: calc(100% + 8px); z-index: 50; max-width: 280px; padding: 12px 14px; border-radius: 10px;
  background: var(--card); color: var(--text); border: 1px solid var(--line); box-shadow: 0 10px 30px rgba(0, 0, 0, .25); font-size: .88rem; line-height: 1.45; }

/* ---------- stable layout while the songs change: the space is reserved, nothing jumps ---------- */
/* title: always room for two lines; a one-line title sits at the bottom, next to the artist; longer titles are cut */
.np-hero .np-title { display: flex; flex-direction: column; justify-content: flex-end; justify-content: safe flex-end;
  min-height: 2.1em; min-height: 2lh; max-height: 2.1em; max-height: 2lh; overflow: hidden; }
/* artist and the listed songs: one line each, cut with … */
.np-hero .np-artist, .np-next li { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* popup: the vote thank-you always has room for two lines */
body.popup .vote-msg { min-height: 2.8em; font-size: .85rem; margin-top: 8px; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; overflow: hidden; }

/* ---------- popup background (admin: Ozadje popupa; ?bg= previews) ---------- */
/* A · soft: a glow behind the cover at the top, evenly darker downwards, the dots only up top */
body.popup[data-popup-bg="soft"] .backdrop { background: radial-gradient(520px 360px at 30% 8%, rgba(150, 175, 240, .30), transparent 70%), linear-gradient(180deg, #1b2442 0%, #141b34 38%, #0c1124 70%, #080b18 100%); }
body.popup[data-popup-bg="soft"] .backdrop::after { background: none; }
body.popup[data-popup-bg="soft"] .backdrop::before { -webkit-mask-image: linear-gradient(180deg, #000 30%, transparent 70%); mask-image: linear-gradient(180deg, #000 30%, transparent 70%); }
/* B · cover: the current cover, blurred and darkened, fills the window (redrawn only when the song changes) */
body.popup[data-popup-bg="cover"] .backdrop { background: #0b0f1e; }
body.popup[data-popup-bg="cover"] .backdrop::before { display: none; }
body.popup[data-popup-bg="cover"] .backdrop::after { inset: -80px; background: linear-gradient(180deg, rgba(8, 11, 24, .2), rgba(8, 11, 24, .62) 50%, rgba(6, 8, 18, .9)), var(--cover-bg, none) center / cover no-repeat;
  filter: blur(42px) saturate(1.35); transition: background .8s; }
/* C · stage: a cone of light from above onto the player, the raster as a dance floor below */
body.popup[data-popup-bg="stage"] .backdrop { background: radial-gradient(60% 45% at 50% -5%, rgba(190, 205, 255, .28), transparent 70%),
  conic-gradient(from 180deg at 50% -20%, transparent 0 160deg, rgba(170, 190, 255, .08) 172deg, rgba(170, 190, 255, .14) 180deg, rgba(170, 190, 255, .08) 188deg, transparent 200deg),
  linear-gradient(180deg, #121a33 0%, #0a0f20 55%, #070a15 100%); }
body.popup[data-popup-bg="stage"] .backdrop::after { background: none; }
body.popup[data-popup-bg="stage"] .backdrop::before { -webkit-mask-image: linear-gradient(180deg, transparent 45%, #000 85%); mask-image: linear-gradient(180deg, transparent 45%, #000 85%); }
/* cover colours over A / C: the blurred cover blends into the light (soft-light keeps the blue, color takes the cover's hues);
   a still layer, redrawn only when the song changes */
body.popup:is([data-popup-bg="soft"], [data-popup-bg="stage"]):not([data-popup-tint="off"]) .backdrop::after { content: ""; position: absolute; inset: -80px; z-index: 0;
  background: var(--cover-bg, none) center / cover no-repeat; filter: blur(42px) saturate(1.7); mix-blend-mode: soft-light; opacity: .9; }
body.popup:is([data-popup-bg="soft"], [data-popup-bg="stage"])[data-popup-tint="strong"] .backdrop::after { mix-blend-mode: color; opacity: .85; }
/* popup: tighter rows between the buttons and the lists */
body.popup .stage:not(.is-empty) .np-artist { margin: 6px 0 14px; }
body.popup .stage:not(.is-empty) .np-times { margin: 4px 0 12px; }
body.popup .stage:not(.is-empty) .np-next { padding-top: 12px; }
body.popup .stage:not(.is-empty) .np-next ol { margin-bottom: 12px; gap: 6px; }
body.popup .stage:not(.is-empty) .np-next .eyebrow { margin-bottom: 8px; }

/* for screen readers and search engines only */
.sr-only { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }