/* /radio/ (radio.js): a night sky the sounds ripple across, the controls, and the log */
.radio { display: grid; gap: 14px; }
.radio-stage { position: relative; height: 260px; border-radius: 16px; overflow: hidden; background: radial-gradient(120% 90% at 50% 110%, #3a2a12 0%, #1b1510 55%, #120e0a 100%); display: grid; place-items: center; }
.radio-stage canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
.radio-play { position: relative; display: inline-flex; align-items: center; gap: 8px; font-size: 1.05rem; padding: 12px 22px; }
.radio-play svg { width: 18px; height: 18px; }
.radio-stage.on .radio-play { position: absolute; left: 12px; bottom: 12px; font-size: .9rem; padding: 8px 14px; }
.radio-stage.on .radio-play svg { display: none; }
.radio-next { position: absolute; right: 14px; bottom: 10px; margin: 0; color: #e9dcc0; font-size: .8rem; opacity: .8; }
.radio-ctl { display: flex; flex-wrap: wrap; gap: 10px 20px; align-items: center; color: var(--muted); font-size: .92rem; }
.radio-ctl label { display: inline-flex; align-items: center; gap: 6px; }
.radio-vol input { width: 130px; accent-color: var(--gold); }
.radio-log { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; min-height: 2em; }
.radio-log li { display: flex; gap: 10px; align-items: baseline; }
.radio-log li.earlier { color: var(--muted); }
.radio-dot { display: inline-block; flex: none; width: 10px; height: 10px; border-radius: 50%; background: var(--gold); }
.radio-dot.k-faucet { background: #4fb3e8; } .radio-dot.k-score { background: #9a6cf0; } .radio-dot.k-lotto { background: #ff8a3d; } .radio-dot.k-wall { background: #5cc157; }
.radio-key li { list-style: none; display: flex; gap: 10px; align-items: baseline; }
.radio-key { padding-left: 0; }
@media (max-width: 560px) { .radio-stage { height: 200px; } .radio-next { left: 14px; right: auto; bottom: auto; top: 10px; } }
.radio-dot.k-hum { background: #c9b88f; }
/* a block's song (?block=): its garlic, its fortune, play and download */
.song { display: grid; grid-template-columns: 180px minmax(0, 1fr); gap: 20px; align-items: center; }
.song[hidden] { display: none; }
.song-art .garlic-art { width: 100%; height: auto; border-radius: 18px; display: block; }
.song-body > * { margin: 0 0 8px; }
.song-title { font-size: 1.5rem; margin-bottom: 4px; }
.song-fortune { font-style: italic; font-size: 1.05rem; color: var(--ink); }
.song-fortune:not(:empty)::before { content: "🥠 "; font-style: normal; }
.song-ctl { display: flex; flex-wrap: wrap; gap: 8px; margin: 12px 0; }
.song-find { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; color: var(--muted); font-size: .92rem; }
.song-find input { width: 150px; }
@media (max-width: 560px) { .song { grid-template-columns: minmax(0, 1fr); } .song-art { max-width: 200px; margin: 0 auto; } }
.radio-fortune { position: absolute; left: 0; right: 0; top: 12px; margin: 0; padding: 0 16px; text-align: center; color: #f3e6c8; font-style: italic; font-size: .95rem; opacity: .9; pointer-events: none; }
.radio-fortune:not(:empty)::before { content: "🥠 "; font-style: normal; }
.radio-stage:not(.on) .radio-fortune { display: none; }
@media (max-width: 560px) { .radio-fortune { top: 34px; font-size: .85rem; } }
/* the Block Lotto draw (lottoshow.js): a line across the stage, the winner bigger */
.radio-lotto { position: absolute; left: 50%; top: 42px; transform: translateX(-50%); z-index: 1; width: max-content; max-width: calc(100% - 24px); margin: 0; padding: 6px 14px; border-radius: 999px;
  text-align: center; font-weight: 700; font-size: .92rem; color: #ffe2c4; background: rgba(40, 22, 8, .8); border: 1px solid rgba(255, 159, 90, .55); pointer-events: none; }
.radio-lotto[hidden], .radio-stage:not(.on) .radio-lotto { display: none; }
.radio-lotto.is-drawing { animation: radio-lotto-pulse 1.4s ease-in-out infinite; }
.radio-lotto.is-win { top: 50%; transform: translate(-50%, -50%); padding: 12px 20px; border-radius: 16px; font-size: 1.2rem; line-height: 1.3; color: #fff4d4; }
.radio-lotto.is-win strong { color: #f2b632; }
.radio-lotto.is-jackpot { border-color: #f2b632; box-shadow: 0 0 18px rgba(242, 182, 50, .4); }
.radio-lotto.is-win.is-jackpot { font-size: 1.45rem; }
@keyframes radio-lotto-pulse { 50% { border-color: rgba(255, 159, 90, 1); } }
@media (prefers-reduced-motion: reduce) { .radio-lotto.is-drawing { animation: none; } }
@media (max-width: 560px) { .radio-lotto { top: 62px; font-size: .82rem; } .radio-lotto.is-win { font-size: 1.05rem; } }
/* the newest block's haiku (haiku.js) takes turns with its fortune at the top of the stage, every 20 s (radio.js) */
.radio-fortune { transition: opacity 1.4s ease; }
.radio-haiku { position: absolute; left: 0; right: 0; top: 12px; margin: 0; padding: 0 16px; text-align: center; color: #f3e6c8; font-style: italic; font-size: .9rem; line-height: 1.4; opacity: 0; pointer-events: none; transition: opacity 1.4s ease; }
.radio-haiku span, .song-haiku span { display: block; }
.radio-stage.show-haiku .radio-fortune { opacity: 0; }
.radio-stage.show-haiku .radio-haiku { opacity: .9; }
.radio-stage:not(.on) .radio-haiku { display: none; }
@media (max-width: 560px) { .radio-haiku { top: 34px; font-size: .82rem; } }
@media (prefers-reduced-motion: reduce) { .radio-fortune, .radio-haiku { transition-duration: 2.5s; } }
.song-haiku { font-style: italic; color: var(--muted); line-height: 1.45; }