:root { --paper: #f4eee2; --ink: #142036; --gold: #e3a63f; --line: rgba(244,238,226,.24); }
* { box-sizing: border-box; }
body { margin: 0; min-height: 100svh; background: linear-gradient(rgba(10,20,34,.44), rgba(9,16,27,.82)), url("public/papon-river-bg.png") center/cover fixed; color: var(--paper); font: 11px "DM Mono", monospace; letter-spacing: .1em; }
.radio-shell { min-height: 100svh; padding: 28px 5vw; display: flex; flex-direction: column; background: radial-gradient(circle at 50% 30%, transparent 10%, rgba(8,14,24,.3) 75%); }
header { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; }
.brand { font-size: 17px; color: var(--paper); text-decoration: none; letter-spacing: .16em; }
.brand span { color: var(--gold); font-size: 9px; margin-left: 8px; }
.status { display: flex; gap: 9px; align-items: center; padding: 11px 16px; border: 1px solid var(--line); border-radius: 30px; background: rgba(18,23,36,.6); }
.status i { width: 7px; height: 7px; border-radius: 50%; background: #ff4c40; box-shadow: 0 0 10px #ff4c40; }
.status b { color: var(--gold); font-weight: 400; }
button { border: 0; color: inherit; background: none; font: inherit; letter-spacing: inherit; cursor: pointer; }
.schedule-toggle { justify-self: end; padding: 12px 16px; border: 1px solid var(--line); border-radius: 28px; background: rgba(18,23,36,.58); }
.clock { margin-top: 13vh; }
.clock time { font: 500 clamp(45px,6vw,82px)/1 "Playfair Display", serif; letter-spacing: -.06em; }
.clock p, .eyebrow { margin: 8px 0 0; color: #d3bd9d; font-size: 9px; }
.player { align-self: center; display: grid; grid-template-columns: 280px 1fr; width: min(850px,100%); min-height: 315px; margin: auto; overflow: hidden; border: 1px solid var(--line); border-radius: 20px; background: rgba(16,22,34,.78); box-shadow: 0 25px 60px rgba(0,0,0,.28); backdrop-filter: blur(12px); }
.cover { position: relative; min-height: 315px; overflow: hidden; background: #080d15; }
.cover iframe { display: block; width: 100%; height: 100%; border: 0; }
.track-info { display: flex; flex-direction: column; padding: 44px 34px 25px; }
.track-info h1 { margin: 16px 0 10px; font: 500 clamp(30px,4vw,48px)/1 "Playfair Display", serif; letter-spacing: -.055em; }
.track-info > p:not(.eyebrow):not(.notice) { margin: 0; color: #c7bdaf; font-size: 9px; }
.progress { display: grid; grid-template-columns: 38px 1fr 38px; gap: 9px; align-items: center; margin-top: auto; color: #c7bdaf; font-size: 9px; }
input[type=range] { height: 3px; border-radius: 9px; accent-color: var(--gold); cursor: pointer; }
.progress input { width: 100%; }
.controls { display: flex; gap: 12px; align-items: center; margin-top: 18px; }
.controls button { color: #e9e4db; font-size: 24px; line-height: 1; }
.controls .play { width: 48px; height: 48px; border-radius: 50%; background: var(--paper); color: var(--ink); font-size: 17px; }
.controls #mute { margin-left: auto; font-size: 18px; }
.controls input { width: 90px; }
.notice { min-height: 13px; margin: 13px 0 0; color: var(--gold); font-size: 9px; }
.station-note { margin: 0 0 18px; color: #d3bd9d; text-align: center; font-size: 9px; }
.schedule { position: fixed; z-index: 4; inset: 0 0 0 auto; width: min(590px,100%); padding: 78px 48px; overflow: auto; background: #1d2432; box-shadow: -20px 0 60px rgba(0,0,0,.35); transform: translateX(100%); transition: transform .3s ease; }
.schedule.open { transform: translateX(0); }
.close { position: absolute; top: 25px; right: 28px; color: #d3bd9d; font-size: 30px; }
.schedule h2 { margin: 13px 0 36px; font: 500 clamp(34px,4vw,48px)/1 "Playfair Display", serif; letter-spacing: -.05em; }
.slot { display: grid; grid-template-columns: 145px 1fr; gap: 18px; padding: 22px 5px; border-top: 1px solid rgba(244,238,226,.13); }
.slot.active { padding-left: 18px; border-left: 2px solid var(--gold); background: linear-gradient(90deg,rgba(227,166,63,.14),transparent); }
.slot time { color: var(--gold); font-size: 10px; }
.slot h3 { margin: 0; font: 500 22px/1.1 "Playfair Display", serif; letter-spacing: -.03em; }
.slot p { margin: 9px 0 0; color: #b9b5b0; font-size: 10px; line-height: 1.7; letter-spacing: .04em; }
.live { margin-left: 7px; color: #ff6d58; font-size: 8px; letter-spacing: .12em; }
@media (max-width: 640px) { .radio-shell { padding: 22px 6vw; } header { grid-template-columns: 1fr auto; } .status { display: none; } .clock { margin-top: 10vh; } .player { grid-template-columns: 1fr; min-height: 0; margin: 45px 0 auto; } .cover { min-height: 225px; height: 225px; } .track-info { min-height: 280px; padding: 27px 22px 22px; } .schedule { padding: 74px 25px; } .slot { grid-template-columns: 1fr; gap: 10px; } .station-note { line-height: 1.7; } }
.queue-panel { position: fixed; z-index: 5; inset: 0 0 0 auto; width: min(430px,100%); padding: 78px 34px 34px; overflow: auto; background: #111a2a; box-shadow: -20px 0 60px rgba(0,0,0,.35); transform: translateX(100%); transition: transform .3s ease; }
.queue-panel.open { transform: translateX(0); }
.queue-close { position: absolute; top: 25px; right: 28px; color: #d3bd9d; font-size: 30px; }
.queue-panel h2 { margin: 13px 0 8px; font: 500 clamp(32px,4vw,46px)/1 "Playfair Display",serif; letter-spacing: -.05em; }
.queue-mood { margin: 0 0 28px; color: #b9b5b0; font-size: 9px; }
#queue-list { margin: 0; padding: 0; list-style: none; }
#queue-list li { display: grid; grid-template-columns: 34px 1fr auto; gap: 12px; align-items: center; padding: 15px 4px; border-top: 1px solid rgba(244,238,226,.13); }
#queue-list li span { color: var(--gold); font-size: 9px; }
#queue-list li strong { font: 500 18px/1.1 "Playfair Display",serif; letter-spacing: -.03em; }
#queue-list li em { color: #ff6d58; font-size: 8px; font-style: normal; }
#queue-list li.current { padding-left: 12px; border-left: 2px solid var(--gold); background: linear-gradient(90deg,rgba(227,166,63,.13),transparent); }