:root {
  --bg: #111; --yta: #1c1c1c; --yta2: #262626; --text: #f3f3f3; --dämpad: #9a9a9a;
  --rod: #e8352b; --gul: #fff041; --kant: #2e2e2e;
  --safe-b: env(safe-area-inset-bottom, 0px); --safe-t: env(safe-area-inset-top, 0px);
}
* { box-sizing: border-box; }
html, body { margin: 0; background: var(--bg); color: var(--text); font: 16px/1.45 -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; -webkit-text-size-adjust: 100%; }
body { min-height: 100dvh; padding-bottom: calc(72px + var(--safe-b)); }
a { color: var(--gul); }
button { font: inherit; color: inherit; }
.dold { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.dämpad { color: var(--dämpad); }
.liten { font-size: 13px; }

/* Topp */
.topp { display: flex; align-items: center; justify-content: space-between; padding: calc(10px + var(--safe-t)) 16px 10px; border-bottom: 1px solid var(--kant); position: sticky; top: 0; background: rgba(17,17,17,.92); backdrop-filter: blur(8px); z-index: 5; }
.logga { display: block; line-height: 0; }
.logga img { height: 46px; width: auto; }
.topp-hoger { display: flex; gap: 10px; align-items: center; }
.live { font-size: 11px; font-weight: 800; letter-spacing: .12em; padding: 4px 8px; border-radius: 999px; background: var(--yta2); color: var(--dämpad); }
.live.pa { background: var(--rod); color: #fff; animation: puls 1.6s ease-in-out infinite; }
@keyframes puls { 0%,100% { opacity: 1; } 50% { opacity: .55; } }
.knapp-liten { background: var(--yta2); border: 1px solid var(--kant); border-radius: 999px; padding: 6px 12px; font-size: 13px; }

/* Vyer */
main { max-width: 520px; margin: 0 auto; padding: 16px; }
.vy h1 { font-size: 22px; margin: 8px 0 4px; }
.vy h2 { font-size: 17px; margin: 0 0 6px; }
.kort { background: var(--yta); border: 1px solid var(--kant); border-radius: 14px; padding: 16px; margin: 14px 0; }
.kort p { margin: 6px 0; }
.punkter { margin: 6px 0 0; padding-left: 20px; } .punkter li { margin: 4px 0; }
.knapp { display: inline-block; background: var(--gul); color: #111; text-decoration: none; font-weight: 700; padding: 12px 18px; border-radius: 999px; margin-top: 8px; }

/* Skivan */
.skiva-ram { display: flex; justify-content: center; margin: 14px 0 10px; }
.skiva { width: min(62vw, 260px); aspect-ratio: 1; border-radius: 50%; background: radial-gradient(circle, #2a2a2a 0 14%, #0c0c0c 15% 18%, #1a1a1a 19% 100%); box-shadow: 0 0 0 6px #0a0a0a, 0 12px 40px rgba(0,0,0,.6); position: relative; display: grid; place-items: center; }
.skiva::before { content: ""; position: absolute; inset: 8%; border-radius: 50%; background: repeating-radial-gradient(circle, transparent 0 3px, rgba(255,255,255,.035) 3px 4px); }
.etikett { width: 46%; aspect-ratio: 1; border-radius: 50%; background: #0c0c0c; display: grid; place-items: center; }
.etikett img { width: 78%; height: auto; display: block; }
.skiva.snurrar { animation: snurr 2.4s linear infinite; }
@keyframes snurr { to { transform: rotate(360deg); } }

/* Nu spelas */
.nu { text-align: center; min-height: 84px; }
.nu-artist { color: var(--gul); font-weight: 700; letter-spacing: .04em; text-transform: uppercase; font-size: 14px; }
.nu-titel { font-size: 22px; font-weight: 800; line-height: 1.2; }
.status { color: var(--dämpad); font-size: 14px; margin-top: 4px; }
.status.fel { color: var(--rod); }

/* Kontroller */
.kontroller { display: flex; align-items: center; justify-content: center; gap: 22px; margin: 14px 0 4px; }
.play { width: 92px; height: 92px; border-radius: 50%; border: 0; background: var(--gul); color: #111; display: grid; place-items: center; box-shadow: 0 10px 30px rgba(255,240,65,.25); cursor: pointer; transition: transform .1s; }
.play:active { transform: scale(.95); }
.play .ikon-stopp { display: none; }
.play[aria-pressed="true"] .ikon-play { display: none; }
.play[aria-pressed="true"] .ikon-stopp { display: block; }
.play.vantar { animation: puls 1s ease-in-out infinite; }
.rund { width: 48px; height: 48px; border-radius: 50%; border: 1px solid var(--kant); background: var(--yta2); display: grid; place-items: center; cursor: pointer; }
.rund[aria-pressed="true"] { color: var(--gul); border-color: var(--gul); }
.somn-ram { position: relative; }
.somn { position: absolute; inset: 0; opacity: 0; width: 100%; height: 100%; }
.somn-ram.aktiv { color: var(--gul); border-color: var(--gul); }
.somn-text { text-align: center; color: var(--dämpad); font-size: 13px; min-height: 18px; }

/* Banner */
.banner { margin-top: 18px; background: var(--yta); border: 1px solid var(--kant); border-radius: 12px; overflow: hidden; position: relative; }
.banner img { display: block; width: 100%; aspect-ratio: 4 / 1; object-fit: cover; }
.markning { position: absolute; top: 6px; left: 8px; z-index: 1; font-size: 10px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; background: rgba(0,0,0,.65); color: #fff; padding: 2px 6px; border-radius: 4px; }

/* Historik */
.historik { list-style: none; padding: 0; margin: 10px 0; }
.historik li { display: flex; gap: 12px; align-items: center; padding: 10px 0; border-bottom: 1px solid var(--kant); }
.historik .tid { color: var(--dämpad); font-variant-numeric: tabular-nums; font-size: 13px; width: 44px; }
.historik a { color: inherit; text-decoration: none; flex: 1; }
.historik .h-artist { color: var(--gul); font-size: 13px; text-transform: uppercase; letter-spacing: .04em; }
.historik .h-titel { font-weight: 700; }

/* Sponsorer */
.sponsorer { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin: 12px 0; }
.sponsorer a { display: block; border-radius: 12px; overflow: hidden; border: 1px solid var(--kant); }
.sponsorer img { display: block; width: 100%; aspect-ratio: 2 / 1; object-fit: cover; }

/* Flikar */
.flikar { position: fixed; left: 0; right: 0; bottom: 0; display: flex; justify-content: space-around; background: rgba(17,17,17,.96); border-top: 1px solid var(--kant); padding: 6px 0 calc(6px + var(--safe-b)); z-index: 5; }
.flikar button { background: none; border: 0; color: var(--dämpad); display: flex; flex-direction: column; align-items: center; gap: 2px; font-size: 11px; padding: 6px 14px; min-width: 64px; cursor: pointer; }
.flikar button[aria-current="page"] { color: var(--text); }
.flikar button[aria-current="page"] svg { color: var(--gul); }

/* Takeover */
.takeover { position: fixed; inset: 0; z-index: 20; background: #000; display: flex; flex-direction: column; }
.takeover[hidden] { display: none; }
.takeover-topp { display: flex; justify-content: space-between; align-items: center; padding: calc(10px + var(--safe-t)) 12px 8px; }
.takeover-topp .markning { position: static; }
.stang { width: 44px; height: 44px; border-radius: 50%; border: 1px solid #444; background: rgba(255,255,255,.1); color: #fff; font-size: 18px; cursor: pointer; }
.takeover-yta { flex: 1; display: block; min-height: 0; }
.takeover-yta img { width: 100%; height: 100%; object-fit: contain; display: block; }

@media (min-width: 720px) { body { padding-bottom: 90px; } }
@media (prefers-reduced-motion: reduce) { .skiva.snurrar, .live.pa, .play.vantar { animation: none; } }