/* ============================================================================
   TheoryBoard — Cassette audio player (M-A)
   A handheld "note-recorder" pinned bottom-right. It is a FIXED overlay that
   lives OUTSIDE .board-frame, so the board's zoom transform never touches it
   (the no-filters/​no-transform-in-board rule does not apply here) and it stays
   put while the world zooms — you can pause/stop audio at any time.
   All visuals are CSS/gradients (no <img>, no SVG filters). Reels spin via
   animation-play-state, toggled by JS adding #cassette.is-playing.
============================================================================ */
#cassette{
  position:fixed; right:16px; bottom:16px; z-index:85; width:268px;
  font-family:var(--font-type,'Special Elite','Courier New',monospace); color:#e9dcc0;
  border-radius:14px; padding:12px 12px 10px;
  background:linear-gradient(160deg,#3a342b 0%,#272219 60%,#1c1813 100%);
  box-shadow:0 2px 0 rgba(255,255,255,.06) inset, 0 18px 40px -12px rgba(0,0,0,.8), 0 6px 16px rgba(0,0,0,.55);
  border:1px solid #15110c; user-select:none;
  transition:transform .3s cubic-bezier(.33,0,.2,1), opacity .3s ease;
}
#cassette::after{content:""; position:absolute; inset:5px; border-radius:10px; pointer-events:none;
  box-shadow:0 0 0 1px rgba(0,0,0,.5), 0 1px 0 rgba(255,255,255,.05) inset;}

/* ---- top brand row + minimize -------------------------------------------- */
.cass-top{display:flex; align-items:center; justify-content:space-between; margin:0 2px 8px; position:relative; z-index:1;}
.cass-brand{font-size:9px; letter-spacing:.22em; text-transform:uppercase; color:#b79a6a;}
.cass-min{appearance:none; border:0; background:none; cursor:pointer; color:#b79a6a; font:inherit; font-size:13px; line-height:1; padding:2px 4px; border-radius:6px;}
.cass-min:hover{color:#f0d8a8; background:#ffffff14;}

/* ---- the cassette window (clear plastic door over the tape) -------------- */
.cass-window{position:relative; border-radius:8px; padding:10px 12px 12px; overflow:hidden; z-index:1;
  background:linear-gradient(180deg,#141009,#0c0905); box-shadow:0 2px 8px rgba(0,0,0,.6) inset;}
/* the cassette shell sitting behind the door */
.cass-body{position:relative; border-radius:5px; padding:9px 10px 12px;
  background:linear-gradient(165deg,#d8cdb4,#b9ad90 55%,#9d9275);
  box-shadow:0 1px 0 rgba(255,255,255,.4) inset, 0 -2px 6px rgba(0,0,0,.25) inset, 0 2px 5px rgba(0,0,0,.4);}
.cass-label{font-family:var(--font-hand,'Caveat','Segoe Print',cursive); font-size:15px; line-height:1.02; color:#2c2418;
  text-align:center; background:linear-gradient(#f3ead0,#e6d9b6); border:1px solid #00000022; border-radius:2px;
  padding:3px 6px 2px; margin-bottom:9px; box-shadow:0 1px 2px rgba(0,0,0,.18); white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
.cass-reels{display:flex; align-items:center; justify-content:space-between; gap:6px; padding:0 4px;}

/* a reel (M-F): a variable-radius tape pack + a spoked hub. cassette.js drives the pack scale
   (tape transfers L->R with progress) and the hub rotation (speed ~ 1/radius, direction = playback
   or scrub direction). No CSS animation — JS sets the transforms each frame. */
.reel{position:relative; width:58px; height:58px; border-radius:50%; flex:0 0 auto; overflow:hidden;
  background:radial-gradient(circle at 50% 50%, #4a4334 0 38%, #2c281e 100%);   /* reel flange (shows when tape is low) */
  box-shadow:0 1px 2px rgba(0,0,0,.5), 0 0 0 1px #00000050;}
.reel-pack{position:absolute; inset:0; border-radius:50%; transform-origin:50% 50%; transform:scale(1);
  background:radial-gradient(circle at 50% 50%, #251f17 0 60%, #14100b 100%);}  /* the wound tape */
.reel-hub{position:absolute; left:29%; top:29%; width:42%; height:42%; border-radius:50%; transform-origin:50% 50%; transform:rotate(0deg);
  background:repeating-conic-gradient(from 0deg, #d7cdb4 0deg 30deg, #a99c7e 30deg 60deg); box-shadow:0 0 0 2px #00000033 inset;}
.reel-hole{position:absolute; left:50%; top:50%; width:13px; height:13px; transform:translate(-50%,-50%); border-radius:50%;
  background:radial-gradient(circle at 40% 35%, #4a4233, #221d14); box-shadow:0 0 0 2px #0008;}

/* tape stretched between the two reels */
.cass-tape{flex:1 1 auto; height:30px; position:relative; align-self:center;}
.cass-tape::before{content:""; position:absolute; left:0; right:0; top:50%; height:13px; transform:translateY(-50%);
  background:linear-gradient(#3a3328,#211c14); border-top:1px solid #00000055; border-bottom:1px solid #00000055; opacity:.92;}

/* the clear-plastic door: a glassy sheen + edge highlight over the window */
.cass-door{position:absolute; inset:0; pointer-events:none; border-radius:8px;
  background:linear-gradient(125deg, rgba(255,255,255,.16) 0%, rgba(255,255,255,.04) 26%, rgba(255,255,255,0) 42%),
            linear-gradient(0deg, rgba(255,255,255,.05), rgba(255,255,255,0) 30%);
  box-shadow:0 0 0 1px rgba(255,255,255,.08) inset, 0 0 18px rgba(0,0,0,.4) inset;}

/* ---- seek bar + time ----------------------------------------------------- */
.cass-seek{display:flex; align-items:center; gap:7px; margin:11px 2px 9px; position:relative; z-index:1;}
.cass-time{font-size:9.5px; letter-spacing:.04em; color:#c7b385; min-width:30px;}
.cass-time.dur{text-align:right;}
.cass-bar{position:relative; flex:1 1 auto; height:16px; cursor:pointer; display:flex; align-items:center;}
.cass-bar-track{position:absolute; left:0; right:0; top:50%; transform:translateY(-50%); height:4px; border-radius:3px;
  background:#0e0b07; box-shadow:0 1px 1px rgba(0,0,0,.5) inset;}
.cass-fill{position:absolute; left:0; top:50%; transform:translateY(-50%); height:4px; width:0; border-radius:3px;
  background:linear-gradient(90deg,#caa46a,#e9c98a);}
.cass-handle{position:absolute; top:50%; left:0; width:11px; height:11px; transform:translate(-50%,-50%); border-radius:50%;
  background:radial-gradient(circle at 38% 32%, #fff7, #d9b777 45%, #9c7a3e 80%); box-shadow:0 1px 2px rgba(0,0,0,.5); pointer-events:none;}

/* ---- transport + volume -------------------------------------------------- */
.cass-controls{display:flex; align-items:center; justify-content:center; gap:8px; position:relative; z-index:1;}
.cass-btn{appearance:none; border:1px solid #4a3f2b; background:linear-gradient(#2e2820,#211c15); color:#e9d3a0; cursor:pointer;
  border-radius:9px; font:inherit; font-size:11px; line-height:1; padding:7px 9px; transition:background .15s,color .15s,box-shadow .15s;}
.cass-btn:hover{background:#3a3122; color:#fff;}
.cass-btn:active{box-shadow:0 1px 3px rgba(0,0,0,.5) inset;}
.cass-btn:focus-visible{outline:2px solid #f0d8a8; outline-offset:2px;}
.cass-play{font-size:14px; min-width:42px;}
.cass-vol{display:flex; align-items:center; gap:5px; margin-left:4px;}
.cass-vol-ico{font-size:12px; color:#c7b385;}
.cass-vol input[type=range]{width:58px; accent-color:#caa46a; cursor:pointer;}

/* ---- minimized state: collapse to a slim tab ----------------------------- */
#cassette.is-min{width:auto; padding:7px 9px;}
#cassette.is-min .cass-window, #cassette.is-min .cass-seek, #cassette.is-min .cass-vol{display:none;}
#cassette.is-min .cass-top{margin-bottom:6px;}
#cassette.is-min .cass-controls{gap:7px;}

/* ---- responsive: shrink + dock on small screens -------------------------- */
@media (max-width:600px){
  #cassette{right:8px; bottom:8px; left:8px; width:auto;}   /* dock as a full-width bar */
  .reel{width:48px; height:48px;}
}
@media (prefers-reduced-motion:reduce){
  #cassette{transition:none;}   /* reels: cassette.js skips rotation under reduced-motion (packs still reflect position) */
}