/* ==========================================================
   CASSETTE — Mockup Edition
   ========================================================== */

.cassette{
    width:min(820px, 92vw, calc((100vh - 330px) * 1.5625));
    margin:0 auto;
    position:relative;
    user-select:none;
}

.cassette-shell{
    position:relative;
    aspect-ratio:1000/640;
    border-radius:26px;
    overflow:hidden;
    background:
        radial-gradient(120% 90% at 50% 0%, rgba(120,170,220,.16), transparent 60%),
        linear-gradient(160deg, rgba(42,56,76,.88), rgba(10,14,22,.94) 70%);
    border:1px solid rgba(160,200,255,.18);
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.16),
        inset 0 -30px 60px rgba(0,0,0,.35),
        0 40px 90px rgba(0,0,0,.55);
    transition:box-shadow .5s, border-color .5s;
}

body.playing .cassette-shell{
    border-color:rgba(120,190,255,.4);
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.16),
        inset 0 -30px 60px rgba(0,0,0,.35),
        0 40px 90px rgba(0,0,0,.55),
        0 0 70px rgba(70,160,255,.18);
}

/* ---------------- screws ---------------- */

.screw{
    position:absolute;
    width:18px;height:18px;border-radius:50%;
    background:radial-gradient(circle at 35% 30%, #dfe4ea, #7d858e 70%);
    box-shadow:inset 0 -2px 3px rgba(0,0,0,.5), 0 1px 2px rgba(255,255,255,.2);
    z-index:5;
}
.screw::before{
    content:"";position:absolute;left:3px;right:3px;top:8px;height:2px;background:#4a4f55;
}
.tl{left:20px;top:20px;} .tr{right:20px;top:20px;}
.bl{left:20px;bottom:20px;} .br{right:20px;bottom:20px;}

/* ---------------- label strip (верх) ---------------- */

.label-strip{
    position:absolute;left:6%;right:6%;top:5%;height:17%;
    background:linear-gradient(#f6eed9,#e6d9bd);
    border-radius:8px;
    box-shadow:0 4px 14px rgba(0,0,0,.45), inset 0 0 0 1px rgba(0,0,0,.08);
    display:flex;align-items:center;gap:18px;
    padding:0 20px;
    z-index:4;
}

.side-badge{
    flex:none;width:46px;height:46px;border-radius:8px;
    background:#182230;color:#fff;
    display:flex;align-items:center;justify-content:center;
    font-weight:800;font-size:24px;
    box-shadow:inset 0 0 0 2px rgba(255,255,255,.12);
}

.label-hand{flex:1;min-width:0;font-family:"Caveat",cursive;line-height:1.08;}
.hand-line{
    white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
    font-size:clamp(18px,2.4vw,30px);color:#1d1d1d;font-weight:600;
}

.label-brand{text-align:right;flex:none;}
.brand-name{font-weight:800;letter-spacing:.05em;color:#16324a;font-size:clamp(13px,1.5vw,19px);}
.brand-name span{color:#1f8fd0;}
.brand-meta{font-size:10px;letter-spacing:.14em;color:#7a6c50;margin-top:2px;}

/* ---------------- tape area (катушки + обложка) ---------------- */

.tape-area{
    position:absolute;left:5%;right:5%;top:26%;height:42%;
    display:flex;align-items:center;justify-content:space-between;
}

.reel{position:relative;height:100%;aspect-ratio:1;}

.tape{
    position:absolute;inset:0;border-radius:50%;
    background:radial-gradient(circle at 38% 32%, #2b2016, #0a0705 62%, #000 100%);
    box-shadow:inset 0 0 34px rgba(0,0,0,.85), 0 6px 18px rgba(0,0,0,.5);
}

.ring{
    position:absolute;inset:15%;border-radius:50%;
    background:repeating-conic-gradient(#39b2f2 0deg 9deg, #0d5d8e 9deg 14deg);
    -webkit-mask:radial-gradient(circle, transparent 0 33%, #000 34% 68%, transparent 69%);
            mask:radial-gradient(circle, transparent 0 33%, #000 34% 68%, transparent 69%);
    filter:drop-shadow(0 0 6px rgba(60,170,255,.35));
}

.spokes{
    position:absolute;inset:31%;border-radius:50%;
    background:repeating-conic-gradient(#e2e8ef 0deg 18deg, #232a33 18deg 60deg);
    -webkit-mask:radial-gradient(circle, transparent 0 16%, #000 17%);
            mask:radial-gradient(circle, transparent 0 16%, #000 17%);
    animation:spin 3s linear infinite;
    animation-play-state:paused;
}

.hub{
    position:absolute;inset:44%;border-radius:50%;
    background:#0b0e12;
    box-shadow:inset 0 2px 4px rgba(255,255,255,.25), 0 0 10px #000;
}

body.playing .spokes{animation-play-state:running;}

.cover-window{
    height:90%;aspect-ratio:1;border-radius:10px;overflow:hidden;
    border:2px solid rgba(200,228,255,.35);
    background:#000;
    box-shadow:0 16px 44px rgba(0,0,0,.65);
}
.cover-window img{width:100%;height:100%;object-fit:cover;}

/* ---------------- низ: надпись + 90 ---------------- */

.bottom-row{
    position:absolute;left:7%;right:7%;top:71%;
    display:flex;justify-content:space-between;align-items:baseline;
}
.hand-note{
    font-family:"Caveat",cursive;
    font-size:clamp(18px,2.3vw,28px);
    color:#49c7ff;
    text-shadow:0 0 14px rgba(70,190,255,.45);
}
.tape-90{font-weight:800;font-size:clamp(22px,2.8vw,34px);color:#2f9fe0;}

/* ---------------- spectrum ---------------- */

.spectrum{position:absolute;left:10%;right:10%;top:81%;height:10%;}
.spectrum canvas{width:100%;height:100%;display:block;}

/* ---------------- anim ---------------- */

@keyframes spin{from{transform:rotate(0)}to{transform:rotate(360deg)}}

/* ---------------- responsive ---------------- */

@media (max-width:900px){
    .label-brand{display:none;}
    .hand-note{font-size:16px;}
}