/* SPIDERVERSES RADIO: a comic-page radio. Same family as daily / rank / track / draft. */
:root {
  --paper: #f3ecda; --paper2: #e9e0c8; --card: #fffaf0; --ink: #141210; --red: #e3262f; --cyan: #1fb7d6; --yellow: #ffe14d; --blue: #2b59c3; --pink: #ff2bd6; --mute: #6d6556;
  --st: var(--red);
  --display: 'Bangers', Impact, sans-serif; --marker: 'Permanent Marker', cursive; --mono: 'Space Mono', monospace; --body: 'Comic Neue', 'Comic Sans MS', sans-serif;
}
* { box-sizing: border-box; }
html { background: var(--paper); }
body { margin: 0; color: var(--ink); font: 700 16px/1.45 var(--body); overflow-x: clip;
  background: radial-gradient(circle, #0000001c 1px, transparent 1.6px) 0 0 / 6px 6px, var(--paper); }
a { color: var(--blue); }
button { font: inherit; cursor: pointer; color: inherit; }
.ic { width: 1em; height: 1em; vertical-align: -.14em; flex-shrink: 0; }
[hidden] { display: none !important; }

/* masthead */
.top { position: sticky; top: 0; z-index: 40; display: flex; align-items: center; gap: 18px; padding: 10px 22px; background: var(--ink); color: var(--paper); border-bottom: 5px solid var(--st); transition: border-color .4s; }
.brand { display: flex; align-items: center; gap: 10px; color: var(--paper); text-decoration: none; }
.brand .mark { display: inline-flex; color: var(--red); filter: drop-shadow(2px 2px 0 #000); } .brand .mark .ic { width: 34px; height: 34px; }
.brand span:last-child { font-family: var(--display); font-size: 30px; letter-spacing: .04em; line-height: 1; text-shadow: -2px 0 var(--cyan), 2px 0 var(--red); }
.brand b { font-family: var(--marker); font-weight: 400; font-size: 20px; color: var(--yellow); text-shadow: none; margin-left: 4px; rotate: -4deg; display: inline-block; }
.onair { margin-left: auto; display: inline-flex; gap: 8px; align-items: center; font: 400 20px/1 var(--display); letter-spacing: .1em; color: #ffffff55; border: 2px solid #ffffff33; padding: 6px 12px 4px; }
.onair i { width: 10px; height: 10px; border-radius: 50%; background: #ffffff33; }
body.playing .onair { color: #fff; border-color: #fff; background: var(--red); box-shadow: 3px 3px 0 #000; rotate: -2deg; }
body.playing .onair i { background: #fff; animation: blink 1s steps(2) infinite; }
@keyframes blink { 50% { opacity: .2; } }

main { max-width: 1240px; margin: 0 auto; padding: 24px 22px 30px; }
.deck { display: grid; grid-template-columns: minmax(0, 1fr) 390px; gap: 26px; align-items: start; }

/* the console: a comic panel, not a gadget */
.console { position: relative; background: radial-gradient(circle, #14121014 1px, transparent 1.5px) 0 0 / 5px 5px, var(--card); color: var(--ink); border: 5px solid var(--ink);
  box-shadow: 10px 10px 0 var(--st), 10px 10px 0 4px var(--ink); padding: 16px; transition: box-shadow .4s; }
.head { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.stamp { font: 400 22px/1 var(--display); letter-spacing: .12em; color: #b9ab84; border: 3px solid #b9ab84; padding: 5px 10px 2px; rotate: -6deg; }
body.playing .stamp { color: #fff; background: var(--red); border-color: var(--ink); box-shadow: 3px 3px 0 var(--ink); }
.stname b { display: block; font: 400 clamp(34px, 4vw, 48px)/.9 var(--display); letter-spacing: .02em; color: #fff; -webkit-text-stroke: 2px var(--ink);
  text-shadow: 4px 4px 0 var(--st), 6px 6px 0 var(--ink); transition: text-shadow .4s; }
.stname span { font: 700 13px var(--mono); letter-spacing: .14em; color: var(--mute); }
/* a speech bubble with a tail */
.bubble { position: relative; margin-left: auto; font: 700 13px var(--mono); background: #fff; border: 3px solid var(--ink); border-radius: 18px; padding: 7px 14px 6px; box-shadow: 3px 3px 0 var(--ink); }
.bubble b { font: 400 22px/1 var(--display); vertical-align: -2px; color: var(--red); }
.bubble .ic { color: var(--ink); }
.bubble::after { content: ""; position: absolute; left: 18px; bottom: -12px; width: 14px; height: 14px; background: #fff; border-right: 3px solid var(--ink); border-bottom: 3px solid var(--ink); transform: skewY(40deg) rotate(10deg); }
/* the tuner: tick marks, the four stations, a needle that swings across */
.tuner { position: relative; height: 58px; margin: 18px 0 14px; background: var(--paper); border: 3px solid var(--ink); box-shadow: inset 0 -4px 0 #14121014; overflow: hidden; }
.scale { position: absolute; inset: 0;
  background: repeating-linear-gradient(90deg, var(--ink) 0 2px, transparent 2px 12px) 0 0 / 100% 12px no-repeat,
              repeating-linear-gradient(90deg, var(--ink) 0 2px, transparent 2px 60px) 0 0 / 100% 20px no-repeat; }
.scale .num { position: absolute; top: 22px; translate: -50% 0; font: 700 10px var(--mono); color: var(--mute); }
.scale .mk { position: absolute; bottom: 4px; translate: -50% 0; }
.scale .mk em { display: block; font: 400 15px/1 var(--display); font-style: normal; letter-spacing: .04em; background: var(--c); color: var(--ink); border: 2px solid var(--ink); padding: 2px 5px 0; }
.needle { position: absolute; top: -4px; bottom: -4px; width: 4px; margin-left: -2px; background: var(--red); box-shadow: 2px 0 0 var(--ink); transition: left .9s cubic-bezier(.3, 1.6, .5, 1); z-index: 2; }
.needle::before { content: ""; position: absolute; top: 0; left: -5px; width: 14px; height: 10px; background: var(--red); border: 2px solid var(--ink); }
.screen { position: relative; aspect-ratio: 16 / 9; overflow: hidden; background: #000; border: 4px solid var(--ink); box-shadow: 5px 5px 0 var(--ink); container-type: inline-size; }
/* YouTube's player, zoomed so its title bar and caption line fall outside (same as spiderverses.com's music box) */
.frame { position: absolute; inset: 0; }
.frame iframe { position: absolute; left: -30cqw; top: -16.875cqw; width: 160cqw; height: 90cqw; border: 0; display: block; }
.shield { position: absolute; inset: 0; z-index: 2; }
.cover { position: absolute; inset: 0; z-index: 3; display: grid; place-items: center; transition: opacity .5s; }
.cover .art { position: absolute; inset: 0; background-size: cover; background-position: center; filter: saturate(1.15) brightness(.55); }
.cover .art::after { content: ""; position: absolute; inset: 0; background: radial-gradient(circle, #0000004d 1px, transparent 1.5px) 0 0 / 5px 5px; }
body.playing .cover { opacity: 0; pointer-events: none; }
.tune { position: relative; display: grid; justify-items: center; gap: 2px; padding: 16px 34px 12px; background: var(--yellow); color: var(--ink); border: 4px solid #000; box-shadow: 7px 7px 0 #000; rotate: -2deg; transition: translate .1s, box-shadow .1s; }
.tune:hover { translate: -2px -2px; box-shadow: 9px 9px 0 var(--st); }
.tune .ic { width: 40px; height: 40px; }
.tune b { font: 400 44px/1 var(--display); letter-spacing: .06em; }
.tune small { font: 700 11px var(--mono); letter-spacing: .16em; }
.ytl { position: absolute; right: 10px; bottom: 9px; z-index: 4; line-height: 0; opacity: .85; filter: drop-shadow(0 1px 2px #0009); }
.ytl svg { width: 66px; height: auto; } .ytl:hover { opacity: 1; }

.meta { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 16px; align-items: center; margin-top: 16px; }
.eq { display: flex; gap: 4px; align-items: flex-end; height: 58px; width: 58px; padding: 6px; background: var(--ink); border: 3px solid var(--ink); box-shadow: 3px 3px 0 var(--st); }
.eq i { flex: 1; height: 15%; background: var(--st); transition: background .4s; }
body.playing .eq i { animation: eq 1.1s steps(6) infinite; }
.eq i:nth-child(2) { animation-duration: .9s !important; } .eq i:nth-child(3) { animation-duration: 1.3s !important; } .eq i:nth-child(4) { animation-duration: .8s !important; }
.eq i:nth-child(5) { animation-duration: 1.2s !important; } .eq i:nth-child(6) { animation-duration: 1s !important; } .eq i:nth-child(7) { animation-duration: 1.4s !important; }
@keyframes eq { 0% { height: 20%; } 20% { height: 90%; } 40% { height: 45%; } 60% { height: 100%; } 80% { height: 35%; } 100% { height: 70%; } }
.tt { min-width: 0; }
.alb { display: inline-block; font: 700 10px var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--ink); background: var(--st); border: 2px solid var(--ink); padding: 2px 7px 1px; rotate: -1deg; transition: background .4s; }
.tt h1 { margin: 6px 0 2px; font: 400 clamp(32px, 4.4vw, 54px)/.92 var(--display); letter-spacing: .02em; color: #fff; -webkit-text-stroke: 2px var(--ink); text-shadow: -3px 0 var(--cyan), 3px 0 var(--red), 5px 5px 0 var(--ink); overflow-wrap: anywhere; }
.tt p { margin: 0; font: 700 14px var(--mono); color: var(--mute); }

.prog { display: grid; grid-template-columns: auto 1fr auto; gap: 12px; align-items: center; margin-top: 16px; font: 700 12px var(--mono); color: var(--ink); }
.bar { height: 14px; background: var(--paper2); border: 3px solid var(--ink); position: relative; overflow: hidden; }
.bar i { position: absolute; inset: 0 auto 0 0; width: 0; background: var(--st); transition: background .4s; }
.ctrl { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; margin-top: 16px; }
.big { width: 64px; height: 64px; display: grid; place-items: center; border-radius: 50%; background: var(--yellow); color: var(--ink); border: 4px solid var(--ink); box-shadow: 4px 4px 0 var(--ink); padding: 0; }
.big .ic { width: 28px; height: 28px; } .big:hover { background: #fff; }
.vol { display: flex; gap: 8px; align-items: center; color: var(--ink); } .vol .ic { width: 22px; height: 22px; }
.vol input { width: 130px; accent-color: var(--red); }
.sp { flex: 1; }
.btn { display: inline-flex; align-items: center; gap: 7px; border: 3px solid var(--ink); background: #fff; color: var(--ink); font: 400 18px/1 var(--display); letter-spacing: .05em; padding: .5em .8em .4em; text-decoration: none; box-shadow: 3px 3px 0 var(--ink); }
.btn.x { background: var(--ink); color: #fff; } .btn:hover { translate: -1px -1px; }

/* station dial */
.dial { display: grid; gap: 10px; }
.stn { position: relative; display: grid; grid-template-columns: 92px minmax(0, 1fr); gap: 12px; align-items: center; text-align: left; padding: 10px 12px; background: var(--card); border: 4px solid var(--ink); box-shadow: 5px 5px 0 var(--ink); transition: translate .1s, box-shadow .1s; }
.stn:hover { translate: -2px -2px; box-shadow: 7px 7px 0 var(--c); }
.stn .f { font: 700 26px/1 var(--mono); color: var(--ink); }
.stn .f small { display: block; font-size: 10px; letter-spacing: .14em; color: var(--mute); margin-top: 3px; }
.stn b { display: block; font: 400 24px/1 var(--display); letter-spacing: .03em; }
.stn .n { display: block; margin-top: 3px; font: 700 11px var(--mono); color: var(--mute); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.stn .p { position: absolute; left: 0; bottom: 0; height: 4px; background: var(--c); }
.stn .l { position: absolute; top: -10px; right: 10px; font: 700 10px var(--mono); letter-spacing: .1em; background: var(--ink); color: #fff; padding: 2px 6px; }
.stn.on { background: var(--ink); color: #fff; box-shadow: 5px 5px 0 var(--c), 5px 5px 0 3px var(--ink); }
.stn.on .f { color: var(--c); } .stn.on .f small, .stn.on .n { color: #cfc6b0; }
.stn.on .l { background: var(--c); color: var(--ink); }

.list { margin-top: 20px; background: var(--card); border: 4px solid var(--ink); box-shadow: 6px 6px 0 var(--ink); }
.list h2 { margin: 0; display: flex; gap: 8px; align-items: center; padding: 8px 12px 6px; background: var(--ink); color: #fff; font: 400 22px/1 var(--display); letter-spacing: .05em; }
.list h2 .ic { color: var(--yellow); }
.list ol { list-style: none; margin: 0; padding: 4px 0; }
.list li { display: grid; grid-template-columns: 64px minmax(0, 1fr) auto; gap: 10px; align-items: center; padding: 6px 12px; }
.list li + li { border-top: 2px solid #1412101a; }
.list img { width: 64px; height: 36px; object-fit: cover; border: 2px solid var(--ink); background: var(--ink); }
.list b { display: block; font: 400 18px/1 var(--display); letter-spacing: .02em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.list small { display: block; font: 700 10px var(--mono); color: var(--mute); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.list .w { font: 700 11px var(--mono); color: var(--mute); }
.past li { opacity: .7; }
.about { max-width: 760px; margin: 26px auto 0; text-align: center; font-size: 15px; color: var(--mute); }

#toast { position: fixed; left: 50%; bottom: 22px; translate: -50% 0; z-index: 120; display: none; font: 400 19px var(--display); letter-spacing: .04em; background: var(--yellow); border: 3px solid var(--ink); box-shadow: 4px 4px 0 var(--ink); padding: 8px 16px 5px; }
.foot { max-width: 1240px; margin: 10px auto 0; padding: 18px 22px 30px; border-top: 4px solid var(--ink); font-size: 13px; font-weight: 400; }
.foot p { margin: 6px 0; } .foot .note { color: var(--mute); }
.more { display: flex; flex-wrap: wrap; gap: 6px 14px; align-items: center; } .more b { font: 400 18px var(--display); letter-spacing: .04em; }

@media (max-width: 1000px) { .deck { grid-template-columns: 1fr; } .dial { grid-template-columns: 1fr 1fr; } }
@media (max-width: 720px) {
  .top { padding: 8px 12px; } .brand span:last-child { font-size: 22px; } .brand b { font-size: 15px; } .brand .mark .ic { width: 26px; height: 26px; }
  .onair { font-size: 15px; padding: 5px 8px 3px; }
  main { padding: 14px 12px 24px; }
  .console { padding: 10px; box-shadow: 6px 6px 0 var(--st), 6px 6px 0 3px var(--ink); }
  .stname b { font-size: 30px; } .bubble { margin-left: 0; } .tuner { height: 52px; } .scale .num { display: none; } .scale .mk em { font-size: 13px; }
  .tune { padding: 10px 22px 8px; } .tune b { font-size: 30px; } .tune .ic { width: 28px; height: 28px; }
  .eq { width: 44px; height: 44px; }
  .vol input { width: 90px; }
  .dial { grid-template-columns: 1fr; } .stn { grid-template-columns: 78px minmax(0, 1fr); } .stn .f { font-size: 22px; }
  .ctrl .btn { font-size: 16px; }
}
@media (prefers-reduced-motion: reduce) { body.playing .eq i, body.playing .onair i, body.playing .live i { animation: none; } .eq i { height: 60% !important; } }

/* tuned in: while a song starts, the cover art stays up (YouTube shows its own buttons for a few seconds) */
body.playing.warming .cover { opacity: 1; }
body.tuned .cover .tune { display: none; }
.cover .warm { position: relative; display: none; font: 400 30px/1 var(--display); letter-spacing: .08em; color: #fff; background: var(--ink); border: 3px solid #fff; padding: 8px 16px 5px; rotate: -2deg; }
body.tuned .cover .warm { display: block; animation: blink 1s steps(2) infinite; }

.mu { display: grid; place-items: center; width: 40px; height: 40px; padding: 0; background: #fff; color: var(--ink); border: 3px solid var(--ink); border-radius: 50%; box-shadow: 2px 2px 0 var(--ink); }
.mu .ic { width: 20px; height: 20px; } .mu.off { background: var(--red); color: #fff; }
.vol .ios { font: 700 11px var(--mono); color: var(--mute); max-width: 110px; line-height: 1.2; }