:root {
  --bg: #17120d; --wood: #2a1f15; --wood2: #1d150d; --panel: #211910; --ink: #f3e7d3; --dim: #a8967c; --amber: #ffb347; --amber2: #ff8a1f; --line: #3b2d1d; --good: #7fd18b;
  --glassA: #f6d9a0; --glassB: #c98f3d; --tick: #3a2511; --needle: #d8261c; --knobA: #8c7a62; --knobB: #2b2218;
}
* { box-sizing: border-box; }
[hidden] { display: none !important; }
html, body { margin: 0; background: var(--bg); color: var(--ink); font: 16px/1.45 system-ui, "Segoe UI", sans-serif; }
body { min-height: 100vh; background: radial-gradient(1200px 600px at 50% -10%, #3a2a19 0%, var(--bg) 60%); }
a { color: var(--amber); }
.set { max-width: 980px; margin: 0 auto; padding: 20px 16px 40px; }
.top { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
h1 { margin: 0; font: 700 28px/1 "Georgia", serif; letter-spacing: .04em; }
h1 span { color: var(--amber); font-style: italic; }
.freq { font: 600 20px/1 ui-monospace, Consolas, monospace; color: var(--amber); letter-spacing: .08em; }

/* the cabinet: a wooden set with a lit dial on top */
.cabinet { margin-top: 18px; padding: 16px; border: 1px solid #0c0804; border-radius: 18px; box-shadow: 0 14px 36px rgba(0,0,0,.55), inset 0 1px 0 rgba(255,255,255,.07), inset 0 0 0 3px rgba(0,0,0,.25);
  background: repeating-linear-gradient(90deg, rgba(255,255,255,.018) 0 2px, rgba(0,0,0,.02) 2px 5px), linear-gradient(180deg, var(--wood), var(--wood2)); }

.dialwin { --inset: 24px; position: relative; height: 146px; border-radius: 10px; overflow: hidden; cursor: ew-resize; touch-action: none; user-select: none; -webkit-user-select: none;
  border: 3px solid #0c0804; box-shadow: inset 0 0 22px rgba(0,0,0,.6);
  background: linear-gradient(180deg, var(--glassA), var(--glassB)); }
.dialwin::before { content: ""; position: absolute; inset: 0; background: radial-gradient(60% 120% at 50% 110%, rgba(255,214,140,.55), transparent 70%); pointer-events: none; }
.scale { position: absolute; left: var(--inset); right: var(--inset); top: 14px; height: 40px; }
.scale .tk { position: absolute; bottom: 0; width: 1px; height: 10px; background: var(--tick); }
.scale .tk.mid { height: 16px; }
.scale .tk.major { height: 26px; width: 2px; margin-left: -1px; }
.scale b { position: absolute; top: -2px; transform: translateX(-50%); font: 700 12px/1 ui-monospace, Consolas, monospace; color: var(--tick); }
.marks { position: absolute; left: var(--inset); right: var(--inset); top: 58px; height: 56px; }
.mark { position: absolute; top: 0; width: 10px; height: 10px; margin-left: -5px; border-radius: 50%; background: #5b2f0a; box-shadow: 0 0 0 2px rgba(0,0,0,.25); }
.mark em { position: absolute; top: 14px; left: 50%; transform: translateX(-50%); font: 700 10px/1 ui-monospace, Consolas, monospace; font-style: normal; letter-spacing: .06em; color: var(--tick); white-space: nowrap; text-transform: uppercase; }
.mark.r1 em { top: 27px; }
.mark.r2 em { top: 40px; }
.mark.near { background: #8a5a1a; transition: background .15s; }
.mark.near em { color: #1b0d03; }
.dialwin.locked .mark { background: #fff3c4; box-shadow: 0 0 10px 3px rgba(255,236,160,.9), 0 0 0 2px rgba(0,0,0,.25); }
.needle { --p: .5; position: absolute; top: 6px; bottom: 30px; width: 2px; left: calc(var(--inset) + (100% - 2 * var(--inset)) * var(--p)); transform: translateX(-1px); background: var(--needle); box-shadow: 0 0 6px 1px rgba(216,38,28,.7); }
.glass { position: absolute; inset: 0; pointer-events: none; background: linear-gradient(115deg, rgba(255,255,255,.28) 0%, rgba(255,255,255,.04) 38%, transparent 40%); }
.readout { position: absolute; left: 14px; bottom: 8px; display: flex; align-items: baseline; gap: 6px; color: var(--tick); }
.fq { font: 700 24px/1 ui-monospace, Consolas, monospace; }
.mhz { font: 700 11px/1 ui-monospace, Consolas, monospace; letter-spacing: .08em; }
.stname.faint { opacity: .6; }
.stname { margin-left: 8px; font: 700 12px/1 ui-monospace, Consolas, monospace; letter-spacing: .1em; text-transform: uppercase; }
.lamps { position: absolute; right: 14px; bottom: 8px; display: flex; align-items: center; gap: 8px; }
.lamp { font: 700 10px/1 ui-monospace, Consolas, monospace; letter-spacing: .1em; text-transform: uppercase; padding: 3px 6px; border-radius: 3px; color: rgba(58,37,17,.55); border: 1px solid rgba(58,37,17,.35); }
.lamp.on { color: #fff; background: #1d6b2f; border-color: #1d6b2f; box-shadow: 0 0 8px rgba(60,200,100,.8); }
#lamp-static.on { background: #8a3a12; border-color: #8a3a12; box-shadow: 0 0 8px rgba(255,140,60,.8); }
.meter { width: 70px; height: 8px; border-radius: 4px; background: rgba(58,37,17,.35); overflow: hidden; }
.meter i { display: block; height: 100%; width: 0; background: #1d6b2f; transition: width .12s linear; }

.deck { display: grid; grid-template-columns: minmax(240px, 340px) 1fr; gap: 20px; margin-top: 14px; align-items: start; }
.speaker { padding: 10px; border-radius: 12px; background: repeating-linear-gradient(90deg, #120d08 0 3px, #1a130c 3px 6px); border: 2px solid #0c0804; align-self: start; }
.screen { position: relative; width: 100%; aspect-ratio: 16 / 9; background: #000; border-radius: 6px; overflow: hidden; }
.screen iframe, .screen #player { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.art { position: absolute; inset: 0; z-index: 1; display: none; align-items: center; justify-content: center; background: radial-gradient(circle at 50% 40%, #3a2a19, #0b0805); }
.art img { max-width: 100%; max-height: 100%; object-fit: contain; }
.screen.isfile .art { display: flex; }
.screen.isfile iframe { visibility: hidden; }
.list li .t a { color: inherit; text-decoration: none; }
.list li .t a:hover { text-decoration: underline; }
.shield { position: absolute; inset: 0; z-index: 2; }        /* listeners cannot pause or scrub the shared stream */
.idle { position: absolute; inset: 0; z-index: 3; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; padding: 12px; text-align: center; background: rgba(10,7,4,.92); }
.idle p { margin: 0; color: var(--dim); font-size: 13px; max-width: 30ch; }
.idle[hidden] { display: none; }
.tune { font: 700 18px/1 inherit; padding: 14px 28px; border-radius: 999px; border: 0; cursor: pointer; color: #1b1007; background: linear-gradient(180deg, var(--amber), var(--amber2)); box-shadow: 0 4px 14px rgba(255,138,31,.35); }
.tune:hover { filter: brightness(1.08); }
.tune:focus-visible, button:focus-visible, input:focus-visible, .knob:focus-visible, a:focus-visible { outline: 2px solid var(--amber); outline-offset: 2px; }

.dial { display: flex; flex-direction: column; min-width: 0; }
.dial.swap h2, .dial.swap .by, .dial.swap .from { animation: swapin .35s ease-out; }
@keyframes swapin { from { opacity: .25; transform: translateY(3px); } to { opacity: 1; transform: none; } }
.onair { align-self: flex-start; font: 700 12px/1 ui-monospace, Consolas, monospace; letter-spacing: .14em; text-transform: uppercase; padding: 6px 10px; border-radius: 999px; border: 1px solid var(--line); color: var(--dim); }
.onair.live { color: #1b1007; background: var(--good); border-color: var(--good); }
h2 { margin: 14px 0 4px; font: 700 26px/1.15 "Georgia", serif; overflow-wrap: anywhere; }
.by { margin: 0; font-size: 18px; color: var(--amber); }
.from { margin: 4px 0 0; color: var(--dim); }
#yt { margin-top: 10px; font-size: 14px; }
.msg { margin: 10px 0 0; color: var(--amber); font-size: 14px; }

/* the magic eye (a tuning-indicator tube): a green glowing fan with a dark wedge that closes as the station comes in */
.eye { --gap: 88deg; width: 66px; height: 66px; border-radius: 50%; position: relative; flex: none;
  background: radial-gradient(circle at 50% 50%, #0c3 0 14%, #45ff93 15%, #1fd86d 46%, #0a7a3a 72%, #04200f 100%);
  box-shadow: 0 0 0 4px #1b140d, 0 0 0 6px #6b5a45, inset 0 0 14px rgba(0,0,0,.65), 0 0 18px rgba(80,255,150,.35); }
.eye::before { content: ""; position: absolute; inset: 0; border-radius: 50%;
  background: conic-gradient(from calc(180deg - var(--gap) / 2), #010a04 0 var(--gap), transparent var(--gap) 360deg); }
.eye::after { content: ""; position: absolute; left: 50%; top: 50%; width: 16px; height: 16px; margin: -8px 0 0 -8px; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #1c3a28, #020b05); box-shadow: 0 0 0 2px rgba(0,0,0,.5); }
.eye.lit { animation: eyeglow 3.2s ease-in-out infinite; }
@keyframes eyeglow { 50% { box-shadow: 0 0 0 4px #1b140d, 0 0 0 6px #6b5a45, inset 0 0 14px rgba(0,0,0,.65), 0 0 26px rgba(80,255,150,.6); } }

/* the faceplate: the controls sit right under the dial, like the knobs and buttons of a real set */
.strip { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 14px; align-items: center; margin-top: 10px; padding: 12px 14px; border-radius: 10px;
  background: linear-gradient(180deg, #120d08, #1c150d); border: 1px solid #0a0603; box-shadow: inset 0 2px 8px rgba(0,0,0,.7), 0 1px 0 rgba(255,255,255,.05); }
.grp { display: flex; align-items: center; gap: 10px; }
.grp.vol { flex-direction: column; gap: 6px; min-width: 92px; }
.grp.tuning { gap: 12px; }
.tunewrap { display: flex; flex-direction: column; align-items: center; gap: 6px; }
.lbl { font: 700 10px/1 ui-monospace, Consolas, monospace; letter-spacing: .22em; text-transform: uppercase; color: var(--dim); }
.knobrow { display: flex; align-items: center; gap: 8px; }
.knob { --rot: 0deg; width: 84px; height: 84px; border-radius: 50%; cursor: grab; touch-action: none; user-select: none; -webkit-user-select: none; position: relative; flex: none;
  background: conic-gradient(from 0deg, var(--knobA), var(--knobB), var(--knobA), var(--knobB), var(--knobA), var(--knobB), var(--knobA), var(--knobB), var(--knobA));
  box-shadow: 0 6px 14px rgba(0,0,0,.6), inset 0 0 0 5px rgba(0,0,0,.45), inset 0 0 0 7px rgba(255,255,255,.08); transform: rotate(var(--rot)); }
.knob.small { width: 62px; height: 62px; }
.knob:active { cursor: grabbing; }
.knob::after { content: ""; position: absolute; inset: 20px; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #5b4b38, #1a130c); box-shadow: inset 0 0 0 2px rgba(0,0,0,.5); }
.knob.small::after { inset: 15px; }
.knob i { position: absolute; z-index: 1; left: 50%; top: 5px; width: 4px; height: 18px; margin-left: -2px; border-radius: 2px; background: #fff3c4; box-shadow: 0 0 6px rgba(255,236,160,.8); }
.knob.small i { top: 4px; height: 13px; }
.seek { width: 32px; height: 32px; border-radius: 50%; border: 1px solid var(--line); background: #1a130c; color: var(--ink); cursor: pointer; font-size: 12px; }
.seek:hover { background: var(--amber); color: #1b1007; }
.seek[aria-pressed="true"] { background: var(--amber); color: #1b1007; }

/* car-radio style station buttons, in a row between the two knobs */
.presets { display: grid; grid-template-columns: repeat(auto-fit, minmax(84px, 1fr)); gap: 8px; }
.pre { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; min-height: 62px; padding: 9px 6px 7px; border-radius: 8px; cursor: pointer; color: var(--ink); font: inherit;
  border: 1px solid #0c0804; background: linear-gradient(180deg, #4a3d2f, #2a2118 55%, #1e1710); box-shadow: 0 3px 0 #0a0603, 0 5px 8px rgba(0,0,0,.5), inset 0 1px 0 rgba(255,255,255,.12); }
.pre:hover { filter: brightness(1.12); }
.pre:active { transform: translateY(2px); box-shadow: 0 1px 0 #0a0603, inset 0 1px 6px rgba(0,0,0,.6); }
.pre i { position: absolute; left: 6px; top: 5px; font: 700 10px/1 ui-monospace, Consolas, monospace; font-style: normal; color: var(--dim); }
.pre b { font: 700 18px/1 ui-monospace, Consolas, monospace; letter-spacing: .03em; }
.pre span { font-size: 11px; color: var(--dim); max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pre.on { background: linear-gradient(180deg, #7b5a22, #4a3412 55%, #34240c); border-color: var(--amber); box-shadow: 0 0 14px rgba(255,179,71,.5), 0 3px 0 #0a0603, inset 0 1px 0 rgba(255,255,255,.2); }
.pre.on b { color: #fff3c4; text-shadow: 0 0 8px rgba(255,236,160,.8); }
.pre.on span { color: var(--ink); }
.seek.wide { width: auto; height: auto; padding: 5px 12px; border-radius: 8px; font-size: 12px; justify-self: start; }

/* sound-off banner and the autoplay help */
.soundbar { display: block; width: 100%; margin-top: 14px; padding: 10px 14px; border-radius: 10px; border: 1px solid var(--amber); background: rgba(255,179,71,.12); color: var(--ink); font: inherit; cursor: pointer; text-align: center; }
.soundbar:hover { background: rgba(255,179,71,.2); }
.auto { margin-top: 12px; display: grid; gap: 8px; font-size: 13px; color: var(--dim); }
.auto label { display: flex; align-items: center; gap: 8px; cursor: pointer; }
.auto input { accent-color: var(--amber); }
.help summary { cursor: pointer; }
.help p, .help ul { margin: 8px 0 0; }
.help ul { padding-left: 18px; } .help li { margin: 4px 0; }

.upnext { margin-top: 22px; }
.livecard { display: flex; flex-direction: column; align-items: center; gap: 6px; text-align: center; padding: 12px; }
.livecard b { font: 700 13px/1 ui-monospace, Consolas, monospace; letter-spacing: .3em; color: #1b1007; background: var(--amber); padding: 5px 10px; border-radius: 4px; box-shadow: 0 0 14px rgba(255,179,71,.55); }
.livecard span { font: 700 22px/1.15 Georgia, serif; color: var(--ink); }
.livecard em { font: 600 14px/1 ui-monospace, Consolas, monospace; font-style: normal; color: var(--dim); }

h3 { margin: 0 0 8px; font: 700 13px/1 ui-monospace, Consolas, monospace; letter-spacing: .14em; text-transform: uppercase; color: var(--dim); }
.list { margin: 0; padding: 0; list-style: none; border: 1px solid var(--line); border-radius: 12px; background: var(--panel); }
.list li { display: flex; justify-content: space-between; gap: 12px; padding: 10px 14px; border-bottom: 1px solid var(--line); }
.list li:last-child { border-bottom: 0; }
.list li .t { min-width: 0; overflow-wrap: anywhere; }
.list li .t small { display: block; color: var(--dim); }
.list li .w { color: var(--dim); font: 13px ui-monospace, Consolas, monospace; white-space: nowrap; }
.list li.dim { color: var(--dim); }
.list li.cur { background: rgba(255,179,71,.08); }
footer { margin-top: 28px; color: var(--dim); font-size: 14px; text-align: center; }

@media (max-width: 860px) {
  .strip { grid-template-columns: 1fr 1fr; }
  .grp.vol { grid-column: 1; grid-row: 1; flex-direction: row; justify-content: center; }
  .grp.tuning { grid-column: 2; grid-row: 1; justify-content: center; }
  .presets { grid-column: 1 / -1; grid-row: 2; grid-template-columns: repeat(auto-fit, minmax(92px, 1fr)); }
  .deck { grid-template-columns: minmax(0, 1fr); }
  .screen { aspect-ratio: auto; height: 200px; }   /* YouTube asks for an embed of at least 200 px each way */
  h2 { font-size: 22px; }
}
@media (max-width: 600px) {
  .mark em { display: none; }               /* too many names for a phone-width dial: only the station you are near gets its name */
  .mark.near em, .dialwin.locked .mark.near em { display: block; top: 14px; }
  .presets { grid-template-columns: repeat(auto-fit, minmax(80px, 1fr)); }
}
@media (max-width: 480px) {
  .grp.tuning .eye { display: none; }
  .grp.vol .lbl { display: none; }
  .knob { width: 74px; height: 74px; }
  .knob.small { width: 56px; height: 56px; }
  .cabinet { padding: 10px; }
  .dialwin { height: 134px; --inset: 14px; }
  .lamps .lamp { display: none; }
}
@media (prefers-reduced-motion: reduce) { .dial.swap h2, .dial.swap .by, .dial.swap .from { animation: none; } }

/* 694849 / Clobal Ghalet: the inverted twin of the Global Chalet palette */
body.inverted { --bg: #e8e2d6; --wood: #d6cfc0; --wood2: #c9c2b1; --panel: #ded8cb; --ink: #0c0a07; --dim: #55503f; --amber: #0044cc; --amber2: #2a6bff; --line: #b3ab98; --good: #0b7a2a;
  --glassA: #0a2b66; --glassB: #1d5fe0; --tick: #cfe0ff; --needle: #fff23a; --knobA: #6a7a96; --knobB: #d9e2f2; }
body.inverted { background: radial-gradient(1200px 600px at 50% -10%, #f4efe4 0%, var(--bg) 60%); }
body.inverted .cabinet { border-color: #8f8672; }
body.inverted .speaker { background: repeating-linear-gradient(90deg, #cfc8b8 0 3px, #c5bdab 3px 6px); border-color: #a79f8b; }
body.inverted .tune { color: #fff; }
body.inverted .onair.live { color: #fff; }
body.inverted .seek { background: #d1cabb; }
body.inverted .seek:hover, body.inverted .seek[aria-pressed="true"] { color: #fff; }
body.inverted .strip { background: linear-gradient(180deg, #bdb5a2, #cfc8b8); border-color: #8f8672; box-shadow: inset 0 2px 8px rgba(0,0,0,.25); }
body.inverted .idle { background: rgba(232,226,214,.94); }
body.inverted .art { background: radial-gradient(circle at 50% 40%, #f4efe4, #cfc8b8); }
body.inverted .mark { background: #cfe0ff; }
body.inverted .dialwin.locked .mark { background: #fff23a; box-shadow: 0 0 10px 3px rgba(255,242,58,.9), 0 0 0 2px rgba(0,0,0,.25); }
body.inverted .knob i { background: #0a2b66; box-shadow: none; }
body.inverted .knob::after { background: radial-gradient(circle at 35% 30%, #e8eefb, #8fa0c0); }
body.inverted .eye { background: radial-gradient(circle at 50% 50%, #ffe14a 0 14%, #fff27a 15%, #ffd400 46%, #c79a00 72%, #3d2f00 100%); box-shadow: 0 0 0 4px #c9c2b1, 0 0 0 6px #8f8672, inset 0 0 14px rgba(0,0,0,.4), 0 0 18px rgba(255,220,60,.4); }
body.inverted .eye::before { background: conic-gradient(from calc(180deg - var(--gap) / 2), #0a2b66 0 var(--gap), transparent var(--gap) 360deg); }
body.inverted .pre { background: linear-gradient(180deg, #f1ece0, #d9d2c2 55%, #cdc5b3); border-color: #8f8672; box-shadow: 0 3px 0 #8f8672, 0 5px 8px rgba(0,0,0,.25), inset 0 1px 0 #fff; color: #0c0a07; }
body.inverted .pre.on { background: linear-gradient(180deg, #2a6bff, #0044cc); border-color: #0033a0; box-shadow: 0 0 14px rgba(42,107,255,.6), 0 3px 0 #002a80; }
body.inverted .pre.on b, body.inverted .pre.on span { color: #fff; text-shadow: none; }
body.inverted .livecard b { color: #fff; }
body.inverted .soundbar { background: rgba(0,68,204,.1); }

/* ---- embed mode (?embed=1, inside a Chauvet room): only the picture, no controls, no text ---- */
body.embed { background: #000; min-height: 0; overflow: hidden; }
body.embed .set { max-width: none; margin: 0; padding: 0; }
body.embed .top, body.embed .soundbar, body.embed:not(.dialon) .dialwin, body.embed:not(.dialon) .strip, body.embed .dial, body.embed .auto, body.embed .upnext, body.embed footer, body.embed .idle, body.embed #msg { display: none !important; }
body.embed .cabinet, body.embed .deck, body.embed .speaker { display: block; margin: 0; padding: 0; border: 0; background: none; box-shadow: none; border-radius: 0; }
body.embed .screen { position: fixed; inset: 0; width: 100vw; height: 100vh; aspect-ratio: auto; border-radius: 0; }
/* the room's moderators can ask for the dial (cmd 'dial'): the faceplate sits over the bottom of the picture, so the video or cover art stays visible */
body.embed.dialon .cabinet { position: fixed; left: 0; right: 0; bottom: 0; z-index: 20; padding: 6px 8px 8px; background: rgba(15,10,6,.9); }
body.embed.dialon .dialwin { height: 112px; }
body.embed.dialon .strip { margin-top: 6px; padding: 8px 10px; grid-template-columns: minmax(0, 1fr) auto; }
body.embed.dialon .strip .grp.vol { display: none; }
body.embed.dialon .screen { bottom: 0; }
@media (max-width: 600px) { body.embed.dialon .strip { grid-template-columns: 1fr; } body.embed.dialon .grp.tuning { justify-content: center; } }
body.embed.dialon .strip { grid-template-columns: minmax(0, 1fr) auto; gap: 10px; }
body.embed.dialon .presets { grid-template-columns: repeat(auto-fit, minmax(64px, 1fr)); gap: 6px; }
body.embed.dialon .pre { min-height: 40px; padding: 6px 4px 5px; }
body.embed.dialon .pre i, body.embed.dialon .pre span { display: none; }
body.embed.dialon .pre b { font-size: 14px; }
body.embed.dialon .eye { width: 34px; height: 34px; }
body.embed.dialon .knob:not(.small) { width: 48px; height: 48px; }
@media (max-width: 600px) { body.embed.dialon .strip { grid-template-columns: 1fr; } }
body.embed.dialon .knob:not(.small)::after { inset: 13px; }
body.embed.dialon .knob:not(.small) i { top: 4px; height: 12px; }
body.embed.dialon .screen { z-index: 0; }
body.embed.dialon .dialwin, body.embed.dialon .strip { position: relative; z-index: 2; }
body.embed.dialro .dialwin, body.embed.dialro .strip { pointer-events: none; cursor: default; }
.tunerby { position: absolute; right: 10px; top: 8px; z-index: 5; padding: 3px 9px; border-radius: 999px; background: rgba(15,10,6,.78); color: var(--amber); font: 600 12px/1.3 system-ui, sans-serif; letter-spacing: .02em; pointer-events: none; }
.tunerby[hidden] { display: none; }