/* ================= JEM — fold-aware cassette app ================= */
:root{
  --pink:#ff2db7;      --pink2:#ff7ad9;
  --cyan:#33e7ff;      --purple:#8a2be2;
  --gold:#ffd43b;      --ink:#0a0510;
  --marker:#1a1a1a;
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{height:100%;margin:0;overflow:hidden;background:var(--ink);
  font-family:'Orbitron',system-ui,sans-serif;color:#fff;
  user-select:none;-webkit-user-select:none;touch-action:manipulation}
body{position:fixed;inset:0}

/* hide everything for a beat so we don't flash the wrong panel */
body.booting #cover,body.booting #main{opacity:0}

/* ---------- VIEW SWITCH: pure CSS, aspect-ratio driven ---------- */
/* folded cover screen is very tall & narrow (~0.39); unfolded is near-square (~0.9) */
#cover{display:flex}
#main{display:none}
@media (min-aspect-ratio:3/5){      /* 0.6 threshold cleanly splits the two screens */
  #cover{display:none}
  #main{display:flex}
}
/* JS override for ?debug manual flip */
body.force-cover #cover{display:flex!important}
body.force-cover #main{display:none!important}
body.force-main  #cover{display:none!important}
body.force-main  #main{display:flex!important}

section{position:absolute;inset:0;flex-direction:column;align-items:center;justify-content:center;
  transition:opacity .35s ease}

/* ===================== COVER (folded) ===================== */
#cover{
  background:#05030a url('img/cover-deck.png') center/cover no-repeat;
  justify-content:flex-start;padding:13vh 6vw 8vh;gap:2vh;
}
#cover::before{content:"";position:absolute;inset:0;
  background:radial-gradient(120% 80% at 50% 42%,transparent 38%,rgba(0,0,0,.78) 100%)}
.deck-wrap{position:relative;z-index:2;display:flex;flex-direction:column;align-items:center;
  width:min(68vw,300px)}
.slot{display:none}
.deck-glow{position:absolute;inset:-18% -10% 20%;border-radius:50%;
  background:radial-gradient(closest-side,rgba(255,45,183,.45),transparent 70%);
  filter:blur(14px);z-index:-1;animation:breathe 3s ease-in-out infinite}
@keyframes breathe{50%{opacity:.5;transform:scale(1.08)}}

/* the cassette (CSS-drawn) that gets "loaded" */
.cassette-cover{position:relative;width:100%;aspect-ratio:16/10;border-radius:12px;
  background:linear-gradient(160deg,#2a2330,#15121b 60%,#0d0a12);
  box-shadow:0 14px 34px rgba(0,0,0,.6),inset 0 1px 0 rgba(255,255,255,.08),
    0 0 0 2px rgba(255,255,255,.05);
  transition:transform .55s cubic-bezier(.6,-0.2,.3,1.3),opacity .5s;
  will-change:transform}
.cass-art{position:absolute;inset:8% 8% 42% 8%;border-radius:6px;
  background:linear-gradient(180deg,rgba(51,231,255,.12),rgba(255,45,183,.12));
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.1)}
.cass-art::before,.cass-art::after{content:"";position:absolute;top:50%;width:22%;aspect-ratio:1;
  transform:translateY(-50%);border-radius:50%;background:radial-gradient(#fff6,#0000 60%),#241f2c;
  box-shadow:inset 0 0 0 3px #0006}
.cass-art::before{left:14%}.cass-art::after{right:14%}
.cass-label{position:absolute;left:10%;right:10%;bottom:9%;height:34%;background:#f7f2e8;
  border-radius:4px;transform:rotate(-1.4deg);box-shadow:0 2px 6px #0007;
  display:flex;flex-direction:column;align-items:center;justify-content:center;overflow:hidden}
.lbl-jem{font-family:'Permanent Marker',cursive;color:var(--marker);font-size:clamp(20px,9vw,40px);
  line-height:.9;letter-spacing:1px;transform:rotate(-2deg)}
.lbl-sub{font-family:'Permanent Marker',cursive;color:#c0256f;font-size:clamp(7px,2.6vw,11px);margin-top:2px}
.lbl-side{position:absolute;top:3px;right:6px;font-family:'Permanent Marker',cursive;
  color:#555;font-size:9px;transform:rotate(-4deg)}

/* slot */
.slot{position:relative;z-index:1;width:86%;height:26px;margin-top:3vh;border-radius:6px;
  background:linear-gradient(#000,#1a1620);box-shadow:inset 0 6px 14px #000,0 1px 0 #ffffff14}
.slot-mouth{position:absolute;inset:8px 10px;background:#000;border-radius:3px;
  box-shadow:inset 0 0 10px #000,0 0 14px #ff2db766}

/* loaded state: cassette slides down into the deck window */
body.loaded .cassette-cover{transform:translateY(32vh) scale(.72);opacity:0;filter:brightness(1.4)}
body.loaded .cover-hint{display:none}

.cover-hint{position:absolute;bottom:9vh;left:0;right:0;z-index:2;text-align:center;animation:bob 1.6s ease-in-out infinite}
.hint-main{display:block;font-weight:900;font-size:clamp(16px,6vw,26px);color:#fff;
  text-shadow:0 0 10px var(--pink),0 0 22px var(--pink)}
.hint-sub{font-size:12px;letter-spacing:4px;color:var(--cyan);text-transform:uppercase}
@keyframes bob{50%{transform:translateY(6px)}}

.cover-open{position:absolute;bottom:7vh;left:0;right:0;z-index:2;text-align:center;display:none;
  flex-direction:column;align-items:center;gap:8px;animation:pulseGlow 1.3s ease-in-out infinite}
body.loaded .cover-open{display:flex}
.open-main{font-weight:900;font-size:clamp(18px,7vw,30px);letter-spacing:2px;
  text-shadow:0 0 12px var(--cyan),0 0 26px var(--cyan)}
.open-sub{font-size:12px;letter-spacing:3px;color:var(--pink2)}
.unfold-icon{display:flex;gap:6px}
.unfold-icon span{width:26px;height:40px;border:2px solid var(--cyan);border-radius:4px;
  box-shadow:0 0 10px var(--cyan)}
.unfold-icon span:first-child{animation:leaf 1.3s ease-in-out infinite}
@keyframes leaf{50%{transform:perspective(200px) rotateY(-55deg);opacity:.5}}
@keyframes pulseGlow{50%{transform:scale(1.04);filter:brightness(1.3)}}

/* ===================== MAIN (unfolded) ===================== */
#main{
  background:#0a0510 url('img/bg-neon.png') center/cover no-repeat;
  padding:2.5vmin 4vmin;gap:1.5vmin;overflow-y:auto;overflow-x:hidden;
  justify-content:safe center}
#main::before{content:"";position:absolute;inset:0;background:rgba(6,2,12,.42)}
#main>*{position:relative;z-index:2}
.scanlines{position:absolute;inset:0;z-index:3;pointer-events:none;opacity:.14;
  background:repeating-linear-gradient(0deg,#000 0 1px,transparent 1px 3px)}
.flash{position:absolute;inset:0;z-index:9;background:#fff;opacity:0;pointer-events:none}
body.just-unfolded .flash{animation:flash .7s ease-out}
@keyframes flash{0%{opacity:.9}100%{opacity:0}}

.brand{text-align:center;line-height:1}
.jem-title{font-family:'Monoton',cursive;margin:0;font-size:clamp(38px,10vmin,104px);
  color:#fff;letter-spacing:4px;line-height:1.05;padding-top:.08em;
  text-shadow:0 0 8px var(--pink),0 0 20px var(--pink),0 0 42px var(--purple),0 0 70px var(--pink)}
.sub-title{font-weight:900;letter-spacing:clamp(2px,2vmin,10px);font-size:clamp(10px,2.6vmin,18px);
  color:var(--cyan);text-shadow:0 0 10px var(--cyan)}
.tagline{font-family:'Permanent Marker',cursive;color:var(--gold);font-size:clamp(14px,4vmin,30px);
  transform:rotate(-2deg);margin-top:.4vmin;text-shadow:0 0 12px #ffae00}

.player{display:flex;flex-direction:column;align-items:center;gap:1.4vmin;width:min(94vw,560px)}

/* CSS cassette with spinning reels */
.tape{position:relative;width:min(66vw,360px);aspect-ratio:16/10;border-radius:16px;
  background:linear-gradient(160deg,#322a3b,#1a1522 55%,#0f0b16);
  box-shadow:0 18px 40px rgba(0,0,0,.6),inset 0 1px 0 #ffffff1a,0 0 26px #ff2db74d}
.tape-window{position:absolute;left:8%;right:8%;top:9%;height:46%;border-radius:10px;
  background:linear-gradient(180deg,rgba(51,231,255,.14),rgba(255,45,183,.1));
  box-shadow:inset 0 0 0 2px #ffffff1f,inset 0 0 22px #000a;
  display:flex;align-items:center;justify-content:space-between;padding:0 7%}
.reel{width:30%;aspect-ratio:1}
.reel svg{width:100%;height:100%;filter:drop-shadow(0 0 4px #000)}
.reel-rim{fill:#0d0a12;stroke:#4a4256;stroke-width:3}
.reel-hub{fill:#e9e2d8;stroke:#b8b0a4;stroke-width:2}
.spokes line{stroke:#2a2531;stroke-width:3}
.spin{transform-origin:50px 50px}
body.playing .reel-l .spin{animation:spin 1.4s linear infinite}
body.playing .reel-r .spin{animation:spin 1.9s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
.tape-span{flex:1;height:5px;margin:0 4%;align-self:center;border-radius:3px;
  background:linear-gradient(#5b2a1e,#3a1a12);box-shadow:0 0 6px #000 inset}
.tape-label{position:absolute;left:12%;right:12%;bottom:10%;height:30%;background:#f7f2e8;
  border-radius:6px;transform:rotate(-1.2deg);box-shadow:0 3px 10px #0008;
  display:flex;flex-direction:column;align-items:center;justify-content:center;overflow:hidden}
.tl-jem{font-family:'Permanent Marker',cursive;color:var(--marker);
  font-size:clamp(22px,7vmin,46px);line-height:.85;transform:rotate(-2deg)}
.tl-sub{font-family:'Permanent Marker',cursive;color:#c0256f;font-size:clamp(8px,2vmin,13px)}
.tl-side{position:absolute;top:4px;right:10px;font-family:'Permanent Marker',cursive;
  color:#666;font-size:clamp(7px,1.6vmin,11px);transform:rotate(-3deg)}
.screw{position:absolute;width:9px;height:9px;border-radius:50%;
  background:radial-gradient(#6b6474,#2a2531);box-shadow:inset 0 0 0 1px #0007}
.screw.s1{top:6px;left:6px}.screw.s2{top:6px;right:6px}
.screw.s3{bottom:6px;left:6px}.screw.s4{bottom:6px;right:6px}

/* equalizer */
.eq{display:flex;align-items:flex-end;gap:clamp(3px,1vmin,7px);height:7vmin;min-height:34px}
.eq span{width:clamp(5px,1.6vmin,11px);height:20%;border-radius:3px 3px 0 0;
  background:linear-gradient(#33e7ff,#ff2db7);box-shadow:0 0 8px #ff2db7aa}
body.playing .eq span{animation:bars .9s ease-in-out infinite}
.eq span:nth-child(2n){animation-duration:.7s}
.eq span:nth-child(3n){animation-duration:1.1s}
.eq span:nth-child(5n){animation-duration:.55s}
@keyframes bars{0%,100%{height:18%}50%{height:100%}}

/* transport */
.transport{display:flex;align-items:center;gap:4vmin}
.btn{border:0;cursor:pointer;color:#fff;font-family:'Orbitron';font-weight:900;
  background:linear-gradient(#2a2433,#14101c);border-radius:50%;
  box-shadow:0 6px 16px #0007,inset 0 1px 0 #ffffff22,0 0 0 2px #ffffff12;
  display:grid;place-items:center;transition:transform .12s}
.btn:active{transform:scale(.92)}
.btn.sm{width:13vmin;height:13vmin;max-width:64px;max-height:64px;font-size:clamp(14px,4vmin,22px);color:var(--cyan)}
.btn.play{width:19vmin;height:19vmin;max-width:94px;max-height:94px;font-size:clamp(22px,6vmin,38px);
  color:#fff;box-shadow:0 8px 22px #ff2db766,inset 0 1px 0 #ffffff33,0 0 0 2px #ff2db755;
  background:radial-gradient(circle at 50% 35%,#ff5cc6,#c0167f)}
.ico-pause{display:none}
body.playing .btn.play .ico-play{display:none}
body.playing .btn.play .ico-pause{display:inline}

.now-playing{font-weight:700;letter-spacing:1px;color:#fff;font-size:clamp(11px,2.6vmin,16px);
  text-shadow:0 0 10px var(--pink);min-height:1.2em;text-align:center}

.tracklist{list-style:none;margin:.3vmin 0 0;padding:0;width:100%;max-width:440px;
  display:flex;flex-direction:column;gap:.5vmin;max-height:22vh;overflow:auto}
.tracklist li{display:flex;align-items:center;gap:10px;padding:1vmin 3vmin;border-radius:10px;
  background:rgba(255,255,255,.06);box-shadow:inset 0 0 0 1px #ffffff14;
  font-size:clamp(11px,2.4vmin,15px);cursor:pointer;transition:.15s}
.tracklist li .n{color:var(--cyan);font-weight:900;width:1.4em;text-align:right}
.tracklist li .t{flex:1}
.tracklist li .d{opacity:.6;font-size:.85em}
.tracklist li.active{background:linear-gradient(90deg,#ff2db73a,#33e7ff22);
  box-shadow:inset 0 0 0 1px #ff2db7aa,0 0 16px #ff2db744}
.tracklist li.active .t{color:var(--gold)}

.credits{position:absolute;bottom:1.4vmin;left:0;right:0;text-align:center;z-index:2;
  font-size:clamp(8px,1.8vmin,12px);letter-spacing:1px;color:#d9c7ff;opacity:.72}
.credits b{color:var(--pink2)}

.swap{position:fixed;z-index:20;top:env(safe-area-inset-top,0);right:0;padding:10px 12px;
  font-size:11px;letter-spacing:1px;color:#ffffff3a;text-decoration:none;font-weight:700}
.swap:active{color:#fff}

#dbg{position:fixed;z-index:99;bottom:8px;right:8px;padding:8px 12px;border:0;border-radius:8px;
  background:#ff2db7;color:#fff;font-weight:900}