.club-radio{width:min(365px,calc(100vw - 36px))}
.club-radio .radio-face{grid-template-columns:180px 1fr}
.radio-cassette{position:relative;box-sizing:border-box;width:180px;min-height:100px;height:100px;padding:8px 10px 7px;border:2px solid #555750;border-radius:7px;background:repeating-linear-gradient(0deg,#181918 0 2px,#20211f 2px 4px);box-shadow:inset 0 0 0 2px #090a09,inset 0 0 12px #000,0 2px 4px #000;color:#161713;overflow:hidden}
.radio-cassette::before,.radio-cassette::after{display:none!important}
.cassette-head{position:relative;z-index:2;display:grid;grid-template-columns:1fr auto;align-items:center;height:21px;padding:2px 8px;background:#ebe8dd;clip-path:polygon(3% 0,97% 0,100% 100%,0 100%)}
.cassette-head strong{font:900 .48rem/1 monospace;letter-spacing:.04em}.cassette-head span{position:absolute;left:50%;bottom:2px;transform:translateX(-50%);font:700 .28rem/1 monospace;white-space:nowrap}.cassette-head b{font:900 .48rem/1 monospace}
.cassette-stripes{position:absolute;z-index:1;left:11px;right:11px;top:29px;height:25px;background:linear-gradient(#e84d4d 0 20%,#ed8a3e 20% 40%,#e7d957 40% 60%,#4e9a62 60% 80%,#3d83ad 80%)}
.cassette-window{position:relative;z-index:3;display:flex;align-items:center;justify-content:space-between;width:112px;height:30px;margin:-1px auto 2px;padding:2px 8px;border:3px solid #292a28;border-radius:2px;background:#403229;box-shadow:inset 0 0 7px #000}
.cassette-window .cassette-tape{position:absolute;left:28px;right:28px;top:11px;height:4px;background:#160d08;box-shadow:0 0 0 1px #6b3d20}
.cassette-reel{position:relative;z-index:2;width:25px;height:25px;border:4px dashed #e8e6dd;border-radius:50%;background:radial-gradient(circle,#222 0 24%,#f0eee6 27% 44%,#555 47%);animation:cassette-spin 1.15s linear infinite;animation-play-state:paused}
.playing .cassette-reel{animation-play-state:running}.reel-right{animation-direction:normal!important}
.cassette-index{position:relative;z-index:4;display:grid;grid-template-columns:34px 1fr;align-items:center;height:29px;padding:3px 7px;background:#efede5;border:1px solid #777;clip-path:polygon(4% 0,96% 0,100% 100%,0 100%)}
.cassette-index>span{font:900 .42rem/1 monospace}.cassette-label{box-sizing:border-box;width:100%;height:20px;margin:0;padding:1px 18px 1px 4px;border:0;border-bottom:1px solid #555;background:#f7f5ed;color:#171713;font:800 .48rem/17px monospace;text-align:left;text-overflow:ellipsis;cursor:pointer}
.cassette-label:focus{outline:2px solid #e9ad18;outline-offset:0}
.cassette-led{position:absolute;z-index:6;top:7px;right:44px;padding:2px 3px;border-radius:2px;background:#50130f;color:#ff8478;font:900 .3rem/1 monospace;font-style:normal}.playing .cassette-led{background:#bd2016;color:#fff;box-shadow:0 0 6px #f03220}
.cassette-screw{position:absolute;z-index:7;width:7px;height:7px;border-radius:50%;background:linear-gradient(135deg,#aaa,#1b1b1b 45% 55%,#888);box-shadow:0 0 0 1px #050505}.cassette-screw.s1{left:5px;top:5px}.cassette-screw.s2{right:5px;top:5px}.cassette-screw.s3{left:5px;bottom:5px}.cassette-screw.s4{right:5px;bottom:5px}
.club-radio.compact{width:min(330px,calc(100vw - 36px))}.club-radio.compact .radio-face{height:39px;padding:5px 76px 5px 9px}.club-radio.compact .radio-cassette{display:block;width:100%;height:28px;min-height:28px;padding:0;border-radius:3px;background:#20211f}.club-radio.compact .cassette-head,.club-radio.compact .cassette-stripes,.club-radio.compact .cassette-window,.club-radio.compact .cassette-led,.club-radio.compact .cassette-screw{display:none}.club-radio.compact .cassette-index{display:grid;height:26px;padding:2px 5px;clip-path:none}.club-radio.compact .cassette-label{height:20px;font-size:.5rem}
@media(max-width:600px){.club-radio{width:min(350px,calc(100vw - 16px))}.club-radio .radio-face{grid-template-columns:170px 1fr}.radio-cassette{width:170px}.cassette-window{width:104px}}