/* Tonewell cassette skins. Original designs, drawn only with CSS gradients/shapes (no images, no brands).
   Each skin sets the variables used by .wm-cassette (Walkman + picker thumbnails) and the small Now Playing
   .cassette, then adds its own window shape, reel/hub style and label pattern.
   Unit: --u = 1/100 of the cassette's length. The title strip (--lines) is always a solid plate so the title stays readable. */

/* 1. Night Shift (default): graphite shell, cream ruled label, pill window, three-spoke cream reels — the variable defaults. */

/* 2. Smoke Glass: see-through smoky shell, gears and tape pack visible, clear window, toothed hubs */
[data-skin="smoke"] {
  --shell: linear-gradient(160deg, rgba(150,160,180,.30), rgba(40,46,58,.55) 55%, rgba(90,98,115,.38)),
           repeating-linear-gradient(90deg, rgba(255,255,255,.03) 0 1px, transparent 1px 6px);
  --shell-glow: inset 0 0 0 calc(var(--u) * .5) rgba(220,230,255,.18);
  --screw: radial-gradient(circle at 35% 35%, #e3e7ee, #6f7685);
  --label: linear-gradient(180deg, #f1efe9 0 calc(var(--u) * 17.4), transparent calc(var(--u) * 17.4)), rgba(255,255,255,.04);
  --np-label: #f1efe9;
  --label-edge: rgba(255,255,255,.22);
  --lines: linear-gradient(#f1efe9, #f1efe9);
  --ink: #23262e; --ink2: #50566a; --stripe: #9aa3b5; --stripe2: transparent;
  --side: #e6ebf5; --hz: #e6ebf5;
  --win: rgba(14,16,22,.18); --win-r: calc(var(--u) * 2.2);
  --win-border: inset 0 0 0 calc(var(--u) * .35) rgba(230,236,250,.45);
  --reel: radial-gradient(circle, transparent 0 30%, rgba(240,244,255,.55) 31% 60%, transparent 61%), repeating-conic-gradient(rgba(240,244,255,.7) 0 12deg, transparent 12deg 30deg);
  --hub: rgba(20,22,28,.85); --spoke: rgba(240,244,255,.8);
  --reel-ring: 0 0 0 calc(var(--u) * .25) rgba(240,244,255,.35);
  --foot: linear-gradient(180deg, rgba(30,34,44,.55), rgba(20,22,30,.7)); --foot-hole: rgba(0,0,0,.6);
}
.wm-cassette[data-skin="smoke"] .wm-gears { display: block; }
.wm-gears i {
  position: absolute; border-radius: 50%; transform: translate(-50%, -50%);
  background: radial-gradient(circle, rgba(10,12,18,.9) 0 16%, rgba(205,212,228,.55) 17% 58%, transparent 59%),
              repeating-conic-gradient(rgba(205,212,228,.55) 0 11deg, transparent 11deg 24deg);
  animation: wmgear 4s linear infinite; animation-play-state: paused;
}
.wm-gears i.g1 { left: 11%; top: 74%; width: calc(var(--u) * 11); height: calc(var(--u) * 11); }
.wm-gears i.g2 { left: 17.5%; top: 88%; width: calc(var(--u) * 6.5); height: calc(var(--u) * 6.5); animation-direction: reverse; animation-duration: 2.4s; }
.wm-gears i.g3 { left: 89%; top: 74%; width: calc(var(--u) * 9.5); height: calc(var(--u) * 9.5); animation-direction: reverse; }
.wm-gears i.g4 { left: 50%; top: 79%; width: calc(var(--u) * 7); height: calc(var(--u) * 7); animation-duration: 3s; }
.wm-playing .wm-gears i { animation-play-state: running; }
@keyframes wmgear { from { transform: translate(-50%, -50%) rotate(0deg); } to { transform: translate(-50%, -50%) rotate(360deg); } }
.wm-cassette[data-skin="smoke"] .wm-stripe { height: calc(var(--u) * .5); }
.wm-cassette[data-skin="smoke"] .wm-tape { background: #6a4c34; opacity: .9; }

/* 3. Ink & Rule: classic matte black, white ruled label with a red margin line, square window, six-notch sprocket hubs */
[data-skin="ink"] {
  --shell: repeating-linear-gradient(0deg, rgba(255,255,255,.015) 0 1px, transparent 1px 3px), linear-gradient(170deg, #1a1a1c, #0b0b0c 60%, #141416);
  --shell-r: 2.4;
  --screw: radial-gradient(circle at 35% 35%, #6d6d72, #232326);
  --label: linear-gradient(90deg, transparent calc(var(--u) * 3.2), #d8312b calc(var(--u) * 3.2) calc(var(--u) * 3.45), transparent calc(var(--u) * 3.45)),
           repeating-linear-gradient(180deg, transparent 0 calc(var(--u) * 3.3), rgba(20,20,20,.22) calc(var(--u) * 3.3) calc(var(--u) * 3.45)), #fdfdfb;
  --np-label: #fdfdfb; --label-r: .6;
  --lines: linear-gradient(90deg, transparent calc(var(--u) * 3.2), #d8312b calc(var(--u) * 3.2) calc(var(--u) * 3.45), transparent calc(var(--u) * 3.45)), repeating-linear-gradient(180deg, transparent 0 calc(var(--u) * 3.3), rgba(20,20,20,.22) calc(var(--u) * 3.3) calc(var(--u) * 3.45)), #fdfdfb;
  --ink: #111; --ink2: #3b3b3b; --title-weight: 700;
  --stripe: #111; --stripe2: #111; --side: #111; --hz: #d8312b;
  --win: linear-gradient(180deg, #151517, #222226); --win-r: calc(var(--u) * .8);
  --win-border: inset 0 0 0 calc(var(--u) * .4) #fdfdfb;
  --reel: radial-gradient(circle, #fff 0 62%, transparent 63%), repeating-conic-gradient(#fff 0 22deg, transparent 22deg 60deg);
  --hub: #111; --spoke: transparent;
  --foot: linear-gradient(180deg, #0f0f10, #070708);
}
.wm-cassette[data-skin="ink"] .wm-stripe { height: calc(var(--u) * .35); box-shadow: 0 calc(var(--u) * .8) 0 #111; }
.wm-cassette[data-skin="ink"] .wm-side { border: calc(var(--u) * .45) solid #111; padding: calc(var(--u) * .4) calc(var(--u) * .9); border-radius: calc(var(--u) * .6); font-size: calc(var(--u) * 4.6); }
.wm-cassette[data-skin="ink"] .wm-reel b { box-shadow: 0 0 0 calc(var(--u) * .7) #fff, 0 0 0 calc(var(--u) * 1) #111; }

/* 4. Ember Red: glossy bright-red shell, label with hazard band, trapezoid window, three-hole solid hubs */
[data-skin="ember"] {
  --shell: linear-gradient(115deg, transparent 30%, rgba(255,255,255,.18) 38%, transparent 46%), linear-gradient(165deg, #ff4b3a, #c8141b 55%, #8f0b12);
  --shell-r: 4.5;
  --screw: radial-gradient(circle at 35% 35%, #ffd0c8, #7a1d1d); --screw-slot: #5a0d0d;
  --label: repeating-linear-gradient(-45deg, #141414 0 calc(var(--u) * 2.2), #ffcf1f calc(var(--u) * 2.2) calc(var(--u) * 4.4)) 0 100% / 100% calc(var(--u) * 3.6) no-repeat, #fff6ec;
  --np-label: #fff6ec;
  --lines: #fff6ec;
  --ink: #8a0d14; --ink2: #3a1a1a; --stripe: #141414; --stripe2: #e8231f; --side: #e8231f; --hz: #141414;
  --win: linear-gradient(180deg, #2a0d0f, #3c1416); --win-r: 0; --win-clip: polygon(7% 0, 93% 0, 100% 100%, 0 100%);
  --reel: radial-gradient(circle at 50% 21%, #3c1416 0 10%, transparent 11%), radial-gradient(circle at 77% 65%, #3c1416 0 10%, transparent 11%), radial-gradient(circle at 23% 65%, #3c1416 0 10%, transparent 11%), radial-gradient(circle at 40% 35%, #ff6a5c, #c8141b 70%);
  --hub: #fff6ec; --spoke: transparent;
  --reel-ring: 0 0 0 calc(var(--u) * .4) #fff6ec;
  --foot: linear-gradient(180deg, #a10f16, #6e0a10); --foot-hole: #3a0508;
}
.wm-cassette[data-skin="ember"] .wm-reel b { width: 22%; height: 22%; }

/* 5. Volt Blue: electric-blue shell with a fine grid, graph-paper label, hexagon window, eight-point star hubs */
[data-skin="volt"] {
  --shell: repeating-linear-gradient(60deg, rgba(255,255,255,.05) 0 1px, transparent 1px calc(var(--u) * 2.5)), repeating-linear-gradient(-60deg, rgba(255,255,255,.05) 0 1px, transparent 1px calc(var(--u) * 2.5)), linear-gradient(160deg, #3d6bff, #1638e0 50%, #0b1f9e);
  --shell-glow: 0 0 calc(var(--u) * 3) rgba(60,120,255,.45);
  --screw: radial-gradient(circle at 35% 35%, #d9e6ff, #2a3c8f); --screw-slot: #0b1a5c;
  --label: repeating-linear-gradient(90deg, rgba(30,80,200,.16) 0 1px, transparent 1px calc(var(--u) * 2.6)), repeating-linear-gradient(180deg, rgba(30,80,200,.16) 0 1px, transparent 1px calc(var(--u) * 2.6)), #eef5ff;
  --np-label: #eef5ff; --label-r: 1;
  --lines: #f7fbff;
  --ink: #0a1f7a; --ink2: #2a4cbf; --stripe: #00d8ff; --stripe2: #0a1f7a; --side: #0a1f7a; --hz: #e60a8f;
  --win: linear-gradient(180deg, #04103f, #0a1d63); --win-r: 0; --win-clip: polygon(9% 0, 91% 0, 100% 50%, 91% 100%, 9% 100%, 0 50%);
  --reel: radial-gradient(circle, transparent 0 36%, #dce8ff 37%), #dce8ff;
  --hub: repeating-conic-gradient(#0a1f7a 0 22.5deg, #00d8ff 22.5deg 45deg); --spoke: transparent;
  --reel-ring: 0 0 0 calc(var(--u) * .35) #00d8ff;
  --foot: linear-gradient(180deg, #0f2cc0, #0a1d8a); --foot-hole: #020a3a;
}
.wm-cassette[data-skin="volt"] .wm-reel b { width: 62%; height: 62%; clip-path: polygon(50% 0, 61% 30%, 93% 25%, 70% 50%, 93% 75%, 61% 70%, 50% 100%, 39% 70%, 7% 75%, 30% 50%, 7% 25%, 39% 30%); border-radius: 0; }

/* 6. Sunshine: sunny-yellow shell, label with a sunrise ray fan, twin round windows, flower hubs */
[data-skin="sunny"] {
  --shell: radial-gradient(circle at 25% 15%, rgba(255,255,255,.35), transparent 45%), linear-gradient(165deg, #ffe14d, #ffc400 55%, #f0a800);
  --shell-r: 5;
  --screw: radial-gradient(circle at 35% 35%, #fff7d1, #b07a00); --screw-slot: #7a5200;
  --label: repeating-conic-gradient(from -90deg at 50% 120%, #ffb000 0 6deg, #fff3c2 6deg 12deg) 0 calc(var(--u) * 17.4) / 100% 100% no-repeat, #fffdf4;
  --np-label: #fffdf4; --label-r: 3;
  --lines: #fffdf4;
  --ink: #7a3300; --ink2: #a8560e; --stripe: #ff7a00; --stripe2: #ffd23a; --side: #ff7a00; --hz: #7a3300;
  --win: #3b2a10; --win-r: 0;
  --reel: repeating-conic-gradient(#fff 0 30deg, #ffe680 30deg 60deg);
  --hub: #ff8a00; --spoke: transparent;
  --foot: linear-gradient(180deg, #e6a100, #c98a00); --foot-hole: #6b4a00;
}
.wm-cassette[data-skin="sunny"] .wm-window {
  background: transparent; box-shadow: none;
  -webkit-mask: radial-gradient(circle at 21% 50%, #000 0 calc(var(--u) * 8.6), transparent calc(var(--u) * 8.7)), radial-gradient(circle at 79% 50%, #000 0 calc(var(--u) * 8.6), transparent calc(var(--u) * 8.7)), linear-gradient(180deg, transparent 40%, #000 40% 60%, transparent 60%);
          mask: radial-gradient(circle at 21% 50%, #000 0 calc(var(--u) * 8.6), transparent calc(var(--u) * 8.7)), radial-gradient(circle at 79% 50%, #000 0 calc(var(--u) * 8.6), transparent calc(var(--u) * 8.7)), linear-gradient(180deg, transparent 40%, #000 40% 60%, transparent 60%);
}
.wm-cassette[data-skin="sunny"] .wm-window::before { content: ""; position: absolute; inset: 0; background: #3b2a10; }
.wm-cassette[data-skin="sunny"] .wm-reel { border-radius: 50%; clip-path: polygon(50% 0, 63% 12%, 85% 15%, 88% 37%, 100% 50%, 88% 63%, 85% 85%, 63% 88%, 50% 100%, 37% 88%, 15% 85%, 12% 63%, 0 50%, 12% 37%, 15% 15%, 37% 12%); }
.wm-cassette[data-skin="sunny"] .wm-tape { bottom: 46%; height: calc(var(--u) * 1.2); }

/* 7. Mint Soda: mint shell, polka-dot label, arched window, white reels with round-dot spokes */
[data-skin="mint"] {
  --shell: radial-gradient(circle at 70% 85%, rgba(255,255,255,.18), transparent 40%), linear-gradient(160deg, #a6f0d8, #5fd1b0 55%, #3fb594);
  --shell-r: 6;
  --screw: radial-gradient(circle at 35% 35%, #ffffff, #5aa894); --screw-slot: #2d6e5d;
  --label: radial-gradient(circle, #8fe3c9 0 calc(var(--u) * .9), transparent calc(var(--u) * 1)) 0 0 / calc(var(--u) * 4) calc(var(--u) * 4), radial-gradient(circle, #ffb3c7 0 calc(var(--u) * .6), transparent calc(var(--u) * .7)) calc(var(--u) * 2) calc(var(--u) * 2) / calc(var(--u) * 4) calc(var(--u) * 4), #f7fff9;
  --np-label: #f7fff9; --label-r: 4;
  --lines: #f7fff9;
  --ink: #0e5246; --ink2: #2f7d6c; --stripe: #2fbf98; --stripe2: #ffb3c7; --side: #2fbf98; --hz: #0e5246;
  --win: linear-gradient(180deg, #123b33, #1c5248); --win-r: calc(var(--u) * 9) calc(var(--u) * 9) calc(var(--u) * 1.5) calc(var(--u) * 1.5);
  --reel: #ffffff; --hub: #2fbf98; --spoke: #2fbf98; --spoke-r: 50%;
  --foot: linear-gradient(180deg, #43b897, #349c7f); --foot-hole: #1d5a49;
}
.wm-cassette[data-skin="mint"] .wm-reel i { width: 22%; height: 22%; top: 4%; left: 39%; transform-origin: 50% 210%; }
.wm-cassette[data-skin="mint"] .wm-reel b { width: 26%; height: 26%; }

/* 8. Grape Fizz: purple shell with bubbles, lilac pinstripe label, octagon window, gear-tooth hubs */
[data-skin="grape"] {
  --shell: radial-gradient(circle at 12% 80%, rgba(255,255,255,.14) 0 calc(var(--u) * 1.5), transparent calc(var(--u) * 1.6)), radial-gradient(circle at 88% 22%, rgba(255,255,255,.12) 0 calc(var(--u) * 2), transparent calc(var(--u) * 2.1)), radial-gradient(circle at 93% 70%, rgba(255,255,255,.1) 0 calc(var(--u) * 1), transparent calc(var(--u) * 1.1)), linear-gradient(160deg, #8e4fe0, #5d22a8 55%, #3e1478);
  --screw: radial-gradient(circle at 35% 35%, #efe0ff, #5a3290); --screw-slot: #2e1150;
  --label: repeating-linear-gradient(135deg, #e7d6ff 0 calc(var(--u) * 1.2), #f6efff calc(var(--u) * 1.2) calc(var(--u) * 2.4)), #f6efff;
  --np-label: #f6efff; --label-r: 1.2;
  --lines: #fffbff;
  --ink: #4a1490; --ink2: #7a4ac0; --stripe: #b06cff; --stripe2: #ff7ad9; --side: #b06cff; --hz: #4a1490;
  --win: linear-gradient(180deg, #1d0b36, #2c1250); --win-r: 0; --win-clip: polygon(6% 0, 94% 0, 100% 22%, 100% 78%, 94% 100%, 6% 100%, 0 78%, 0 22%);
  --reel: radial-gradient(circle, #f3eaff 0 66%, transparent 67%), repeating-conic-gradient(#f3eaff 0 10deg, transparent 10deg 20deg);
  --hub: #4a1490; --spoke: #4a1490;
  --reel-ring: none;
  --foot: linear-gradient(180deg, #4b1a8c, #36106a); --foot-hole: #1a0634;
}
.wm-cassette[data-skin="grape"] .wm-reel i { width: 8%; height: 34%; top: 2%; left: 46%; transform-origin: 50% 140%; }

/* 9. Memphis 90: teal shell, neon geometric label (triangles, dots, zigzags), black title plate, slanted window */
[data-skin="memphis"] {
  --shell: radial-gradient(circle, rgba(0,0,0,.08) 0 calc(var(--u) * .5), transparent calc(var(--u) * .6)) 0 0 / calc(var(--u) * 3) calc(var(--u) * 3), linear-gradient(160deg, #26c6c4, #12a3a6 60%, #0d8287);
  --shell-r: 2.2;
  --screw: radial-gradient(circle at 35% 35%, #fff, #333); --screw-slot: #111;
  --label:
    linear-gradient(to top right, #ff3fa4 0 50%, transparent 50%) calc(var(--u) * 8) calc(var(--u) * 28) / calc(var(--u) * 9) calc(var(--u) * 9) no-repeat,
    linear-gradient(to bottom left, #3b5bff 0 50%, transparent 50%) right calc(var(--u) * 3) top calc(var(--u) * 18) / calc(var(--u) * 8) calc(var(--u) * 8) no-repeat,
    repeating-linear-gradient(90deg, #6ff7ff 0 calc(var(--u) * .7), transparent calc(var(--u) * .7) calc(var(--u) * 1.8)) right calc(var(--u) * 1) top calc(var(--u) * 30) / calc(var(--u) * 7) calc(var(--u) * 6) no-repeat,
    linear-gradient(135deg, transparent 0 25%, #111 25% 50%, transparent 50% 75%, #111 75%) 0 calc(var(--u) * 39.5) / calc(var(--u) * 3) calc(var(--u) * 3) repeat-x,
    radial-gradient(circle, #ffe600 0 calc(var(--u) * .9), transparent calc(var(--u) * 1)) calc(var(--u) * 1) calc(var(--u) * 18) / calc(var(--u) * 5) calc(var(--u) * 5),
    #ffffff;
  --np-label: #ffffff; --label-r: .4;
  --lines: radial-gradient(circle at 96% 20%, #ff3fa4 0 calc(var(--u) * 1.2), transparent calc(var(--u) * 1.3)), #121212;
  --ink: #f8ff3a; --ink2: #6ff7ff; --stripe: #ff3fa4; --stripe2: #6ff7ff; --side: #111; --hz: #ff3fa4;
  --win: linear-gradient(180deg, #111, #222); --win-r: 0; --win-clip: polygon(5% 0, 100% 0, 95% 100%, 0 100%);
  --win-border: inset 0 0 0 calc(var(--u) * .6) #111;
  --reel: repeating-conic-gradient(#ff3fa4 0 30deg, #ffffff 30deg 60deg); --hub: #111; --spoke: transparent;
  --reel-ring: 0 0 0 calc(var(--u) * .45) #111;
  --foot: linear-gradient(180deg, #111, #000); --foot-hole: #ff3fa4;
}
.wm-cassette[data-skin="memphis"] .wm-artist { top: calc(var(--u) * 9.4); }
.wm-cassette[data-skin="memphis"] .wm-side { font-style: italic; text-shadow: calc(var(--u) * .5) calc(var(--u) * .5) 0 #ffe600; }

/* 10. Chrome Reference: brushed-metal shell, smoked-glass label with silver capitals, slim wide window, machined hubs */
[data-skin="chrome"] {
  --shell: linear-gradient(105deg, transparent 20%, rgba(255,255,255,.55) 32%, transparent 44%, transparent 60%, rgba(255,255,255,.35) 70%, transparent 80%), repeating-linear-gradient(90deg, #c9ced6 0 1px, #b3b9c2 1px 2px, #d6dbe2 2px 3px), #c2c7cf;
  --shell-r: 2;
  --shell-glow: inset 0 0 0 calc(var(--u) * .4) rgba(255,255,255,.55);
  --screw: conic-gradient(#777, #eee, #888, #ddd, #777); --screw-slot: #333;
  --label: linear-gradient(180deg, #24272d, #15171b); --np-label: #1c1f24; --label-r: 1; --label-edge: rgba(255,255,255,.25);
  --lines: linear-gradient(180deg, #2a2e35, #1d2025);
  --ink: #eef2f7; --ink2: #aeb6c2; --title-font: system-ui, "Segoe UI", Roboto, sans-serif; --title-weight: 700; --title-case: uppercase; --title-spacing: .08em;
  --stripe: #d9dde3; --stripe2: transparent; --side: #cfd5de; --hz: #cfd5de;
  --win: linear-gradient(180deg, #0b0c0e, #191b1f); --win-r: calc(var(--u) * 1.5);
  --win-border: inset 0 0 0 calc(var(--u) * .45) #c8ced6;
  --reel: conic-gradient(#8c929b, #f2f4f7, #7b818a, #e4e7eb, #8c929b, #f2f4f7, #7b818a, #e4e7eb, #8c929b);
  --hub: radial-gradient(circle, #0d0e10 0 45%, #5c626b 46%); --spoke: #3d4249; --spoke-r: 1px;
  --foot: linear-gradient(180deg, #a9afb8, #8a9099); --foot-hole: #2a2d33;
}
.wm-cassette[data-skin="chrome"] .wm-window { width: calc(var(--u) * 74); margin-left: calc(var(--u) * -37); top: calc(var(--u) * 21.5); height: calc(var(--u) * 15); }
.wm-cassette[data-skin="chrome"] .wm-reel { width: calc(var(--u) * 9.4); height: calc(var(--u) * 9.4); }
.wm-cassette[data-skin="chrome"] .wm-reel.left, .wm-cassette[data-skin="chrome"] .wm-pack.left { left: 18%; }
.wm-cassette[data-skin="chrome"] .wm-reel.right, .wm-cassette[data-skin="chrome"] .wm-pack.right { left: 82%; }
.wm-cassette[data-skin="chrome"] .wm-title-text { transform: none; }
.wm-cassette[data-skin="chrome"] .wm-stripe { height: calc(var(--u) * .6); background: linear-gradient(90deg, #8d939c, #f4f6f9, #8d939c); }
.wm-cassette[data-skin="chrome"] .wm-artist { font-size: calc(var(--u) * 2.8); letter-spacing: .12em; text-transform: uppercase; }
.wm-cassette[data-skin="chrome"] .wm-side { font-weight: 300; }
.wm-cassette[data-skin="chrome"] .wm-hz { font-family: system-ui, sans-serif; transform: none; font-size: calc(var(--u) * 3.4); }

/* 11. Walnut Studio: wood-grain shell, kraft-paper label with typewriter title, brass-bezel window, brass slotted hubs */
[data-skin="walnut"] {
  --shell:
    radial-gradient(ellipse 6% 3% at 18% 30%, rgba(40,20,8,.5), transparent 70%),
    radial-gradient(ellipse 5% 2.5% at 80% 70%, rgba(40,20,8,.45), transparent 70%),
    repeating-linear-gradient(178deg, rgba(60,30,10,.0) 0 calc(var(--u) * 1.1), rgba(60,30,10,.28) calc(var(--u) * 1.1) calc(var(--u) * 1.4), rgba(255,220,170,.06) calc(var(--u) * 1.4) calc(var(--u) * 2.3)),
    repeating-linear-gradient(181deg, transparent 0 calc(var(--u) * 3.1), rgba(30,14,4,.18) calc(var(--u) * 3.1) calc(var(--u) * 3.3)),
    linear-gradient(170deg, #8a5a33, #6b4224 50%, #573418);
  --shell-r: 2.8;
  --screw: radial-gradient(circle at 35% 35%, #ffe7a8, #8a6420); --screw-slot: #5a3d0a;
  --label: repeating-linear-gradient(180deg, transparent 0 calc(var(--u) * 3.6), rgba(90,60,30,.18) calc(var(--u) * 3.6) calc(var(--u) * 3.75)), radial-gradient(circle at 30% 40%, rgba(255,255,255,.12), transparent 60%), #d8b886;
  --np-label: #d8b886; --label-r: .8;
  --lines: #e5cb9f;
  --ink: #2b1709; --ink2: #5a3a1c; --title-font: "Courier New", Courier, ui-monospace, monospace; --title-weight: 700;
  --stripe: #2b1709; --stripe2: #b0823a; --side: #2b1709; --hz: #2b1709;
  --win: linear-gradient(180deg, #1c120a, #2b1c10); --win-r: calc(var(--u) * 3);
  --win-border: inset 0 0 0 calc(var(--u) * .7) #c9a04a, inset 0 0 0 calc(var(--u) * 1) #7a5a1c;
  --reel: radial-gradient(circle at 35% 35%, #f3d78c, #b88c2e 70%); --hub: #2b1709; --spoke: #2b1709; --spoke-r: 0;
  --foot: linear-gradient(180deg, #4a2c14, #3a220f); --foot-hole: #1a0d04;
}
.wm-cassette[data-skin="walnut"] .wm-title-text { transform: none; }
.wm-cassette[data-skin="walnut"] .wm-reel i { width: 14%; height: 30%; }
.wm-cassette[data-skin="walnut"] .wm-stripe { height: calc(var(--u) * .5); box-shadow: 0 calc(var(--u) * .9) 0 #b0823a; }

/* 12. Pastel Blush: soft pink shell, cream label with a scalloped gingham border, framed capsule window, eight-spoke reels */
[data-skin="blush"] {
  --shell: radial-gradient(circle at 25% 20%, rgba(255,255,255,.35), transparent 50%), linear-gradient(160deg, #ffd1e0, #f7a8c4 55%, #e98aae);
  --shell-r: 6.5;
  --screw: radial-gradient(circle at 35% 35%, #fff, #c76b8f); --screw-slot: #8a3a5a;
  --label: radial-gradient(circle at 50% 0, transparent 0 calc(var(--u) * 1.4), #fffaf3 calc(var(--u) * 1.5)) 0 calc(var(--u) * 38) / calc(var(--u) * 3.6) calc(var(--u) * 4) repeat-x,
           repeating-linear-gradient(0deg, rgba(240,120,160,.16) 0 calc(var(--u) * 1.5), transparent calc(var(--u) * 1.5) calc(var(--u) * 3)),
           repeating-linear-gradient(90deg, rgba(240,120,160,.16) 0 calc(var(--u) * 1.5), transparent calc(var(--u) * 1.5) calc(var(--u) * 3)), #fffaf3;
  --np-label: #fffaf3; --label-r: 4;
  --lines: #fffaf3;
  --ink: #8a1d4a; --ink2: #b44c78; --stripe: #f07aa6; --stripe2: #ffd27a; --side: #f07aa6; --hz: #8a1d4a;
  --win: linear-gradient(180deg, #3a1a28, #4a2434);
  --win-border: inset 0 0 0 calc(var(--u) * .8) #fff;
  --reel: repeating-conic-gradient(#fff 0 8deg, #ffd6e4 8deg 45deg); --hub: #f07aa6; --spoke: transparent;
  --foot: linear-gradient(180deg, #e98aae, #d7769b); --foot-hole: #8a3a5a;
}
.wm-cassette[data-skin="blush"] .wm-reel b { box-shadow: 0 0 0 calc(var(--u) * .5) #fff; }

/* 13. Afterglow: dark shell with luminous green edges and ink, glowing outline window and spokes */
[data-skin="glow"] {
  --shell: radial-gradient(circle at 50% 120%, rgba(150,255,120,.12), transparent 60%), linear-gradient(160deg, #1f2a22, #121813 60%, #18201a);
  --shell-glow: inset 0 0 0 calc(var(--u) * .45) rgba(160,255,130,.55), 0 0 calc(var(--u) * 4) rgba(140,255,110,.35);
  --screw: radial-gradient(circle at 35% 35%, #d8ffcc, #3d6b36); --screw-slot: #12210f;
  --label: repeating-linear-gradient(180deg, transparent 0 calc(var(--u) * 3.4), rgba(160,255,130,.12) calc(var(--u) * 3.4) calc(var(--u) * 3.55)), #0d140e;
  --np-label: #0d140e; --label-edge: rgba(160,255,130,.45);
  --lines: #0a100b;
  --ink: #c4ffad; --ink2: #8fe0ff; --title-glow: 0 0 calc(var(--u) * .8) rgba(150,255,110,.75);
  --stripe: #8dff6a; --stripe2: #63e0ff; --side: #8dff6a; --hz: #63e0ff;
  --win: #050805; --win-r: calc(var(--u) * 3);
  --win-border: inset 0 0 0 calc(var(--u) * .4) #8dff6a, 0 0 calc(var(--u) * 1.5) rgba(140,255,110,.6);
  --reel: radial-gradient(circle, #050805 0 60%, #8dff6a 61% 68%, #050805 69%); --hub: #63e0ff; --spoke: #8dff6a;
  --reel-ring: 0 0 calc(var(--u) * 1.2) rgba(140,255,110,.7);
  --pack: radial-gradient(circle, #1f3a1a 0 55%, #142812 56%); --tape: #2f5a28;
  --foot: linear-gradient(180deg, #141c15, #0b100b); --foot-hole: #8dff6a;
}
.wm-cassette[data-skin="glow"] .wm-stripe { box-shadow: 0 calc(var(--u) * 1.6) 0 #63e0ff, 0 0 calc(var(--u) * 1.2) #8dff6a; }
.wm-cassette[data-skin="glow"] .wm-reel b { box-shadow: 0 0 calc(var(--u) * 1) #63e0ff; }
.wm-cassette[data-skin="glow"] .wm-reel i { box-shadow: 0 0 calc(var(--u) * .8) #8dff6a; }
.wm-cassette[data-skin="glow"] .wm-side, .wm-cassette[data-skin="glow"] .wm-hz { text-shadow: 0 0 calc(var(--u) * 1) currentColor; }

/* ---------- Skin picker (Settings sheet + Walkman panel) ---------- */
.skin-row { display: flex; gap: 10px; overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; padding: 6px 2px 10px; touch-action: pan-x; -webkit-overflow-scrolling: touch; }
.skin-row::-webkit-scrollbar { height: 6px; } .skin-row::-webkit-scrollbar-thumb { background: #3a3f4d; border-radius: 3px; }
.skin-opt { flex: 0 0 auto; scroll-snap-align: start; display: grid; justify-items: center; gap: 6px; padding: 8px 8px 6px; border-radius: 12px; border: 2px solid transparent; background: #1a1d25; cursor: pointer; color: var(--text); }
.skin-opt[aria-checked="true"] { border-color: var(--accent); background: #20303a; }
.skin-opt:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.skin-opt span { font: 600 .78rem/1.1 system-ui, sans-serif; white-space: nowrap; }
.wm-cassette.sk-thumb { --u: 1.25px; position: relative; left: auto; top: auto; transform: none; width: calc(var(--u) * 100); cursor: inherit; pointer-events: none; }
.sk-thumb .wm-title { justify-content: center; }
.sk-thumb .wm-title-text { font-size: calc(var(--u) * 6.4); }
.sk-thumb .wm-artist { font-size: calc(var(--u) * 3.6); }
.sk-thumb .wm-hz { display: none; }
.sk-thumb .wm-pack.left { --pack-l: 13; } .sk-thumb .wm-pack.right { --pack-r: 11; }
.wm-skins {
  position: absolute; z-index: 3; left: 50%; bottom: calc(14px + env(safe-area-inset-bottom)); transform: translateX(-50%);
  width: min(96vw, 760px); padding: 10px 12px 6px; border-radius: 20px; border: 1px solid rgba(255,255,255,.14);
  background: rgba(14,16,22,.88); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); color: #e8eaf0;
}
.wm-skins[hidden] { display: none; }
.wm-skins-head { display: flex; align-items: center; justify-content: space-between; font: 600 .9rem/1 system-ui, sans-serif; padding: 0 4px 4px; }
.wm-skins-head button { background: none; border: 1px solid rgba(255,255,255,.2); border-radius: 999px; padding: 6px 14px; cursor: pointer; }
.walkman.wm-picking .wm-strip { display: none; }
.wm-skin-btn { left: calc(64px + env(safe-area-inset-left)); top: calc(12px + env(safe-area-inset-top)); padding: 0; width: 44px; }
@media (prefers-reduced-motion: reduce) { .wm-gears i { animation: none; } }
.skin-heading { margin: 16px 0 2px; font-size: .95rem; }
dialog .skin-row { max-width: 100%; }