:root{
  --bg:#BD75C9;                       /* page background */
  --pink:#d6489a; --purple:#8a5cf0; --cyan:#6f4fc4;  /* accents readable on light */
  --yellow:#7c3fd6;                   /* logo / highlight accent */
  --cream:#36215e;                    /* main text (dark on light) */
  --ink:#2a1a4a;                      /* button text / deep accents */
  --field:rgba(255,255,255,.66);      /* input fields */
  --card:rgba(255,255,255,.5); --card-br:rgba(120,80,200,.3);
}

*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%}
body{
  font-family:'Quicksand',system-ui,sans-serif;
  color:var(--cream);
  background:var(--bg);
  min-height:100vh; overflow-x:hidden;
  display:flex; flex-direction:column; align-items:center;
  padding:18px 14px 40px;
}

/* twinkly background */
.stars{position:fixed;inset:0;pointer-events:none;z-index:0;
  background-image:
    radial-gradient(1.5px 1.5px at 20% 30%, #fff8, transparent),
    radial-gradient(1.5px 1.5px at 70% 20%, #fff6, transparent),
    radial-gradient(2px 2px at 40% 70%, var(--cyan), transparent),
    radial-gradient(1.5px 1.5px at 85% 60%, var(--pink), transparent),
    radial-gradient(1.5px 1.5px at 55% 45%, #fff7, transparent),
    radial-gradient(2px 2px at 12% 80%, var(--yellow), transparent);
  animation:twinkle 4s ease-in-out infinite alternate;
}
@keyframes twinkle{from{opacity:.4}to{opacity:.9}}

.topbar,.devices,.stage,.search-area,.foot{position:relative;z-index:1;width:100%;max-width:720px}

.logo{font-family:'Press Start 2P',monospace;font-size:clamp(15px,4vw,26px);
  text-align:center;color:#34106b;  /* deep purple — high contrast on the lighter bg */
  text-shadow:3px 3px 0 var(--pink),6px 6px 0 rgba(0,0,0,.25);
  letter-spacing:1px;margin-top:6px}
.tagline{text-align:center;color:var(--cyan);font-weight:600;margin:10px 0 18px;letter-spacing:.5px}

/* device chips */
.devices{display:flex;gap:10px;justify-content:center;flex-wrap:wrap;margin-bottom:22px}
.device-chip{
  display:flex;flex-direction:column;align-items:center;gap:6px;
  background:var(--card);border:2px solid var(--card-br);
  color:var(--cream);font-family:'Quicksand';font-weight:700;font-size:13px;
  padding:12px 18px;border-radius:16px;cursor:pointer;transition:.18s;
  backdrop-filter:blur(6px)}
.chip-emoji{font-size:24px}
.device-chip:hover{transform:translateY(-3px);border-color:var(--pink)}
.device-chip.active{background:linear-gradient(135deg,var(--pink),var(--purple));
  color:#fff;border-color:#fff;box-shadow:0 6px 20px rgba(138,92,240,.4);transform:translateY(-3px)}

/* stage */
.stage{display:flex;flex-direction:column;align-items:center}
.device-display{width:100%;display:flex;align-items:center;justify-content:center;
  min-height:50vh;margin-bottom:6px;overflow:visible}
/* JS sets the exact scale (≈50% of the screen); this is the transform anchor */
.device-display .dev{transform-origin:center;will-change:transform}

.now-playing{text-align:center;margin:6px 0 14px;max-width:100%}
.np-title{font-weight:700;font-size:17px;color:var(--ink);max-width:90vw;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.np-artist{font-size:13px;color:var(--cyan);margin-top:2px}

/* controls */
.controls{display:flex;align-items:center;gap:12px;width:100%;max-width:560px;
  background:var(--card);border:2px solid var(--card-br);border-radius:18px;
  padding:12px 16px;backdrop-filter:blur(6px);flex-wrap:wrap;justify-content:center}
.ctrl-btn{width:48px;height:48px;border-radius:50%;border:none;cursor:pointer;
  font-size:18px;background:linear-gradient(135deg,var(--pink),var(--purple));
  color:#fff;box-shadow:0 4px 12px rgba(0,0,0,.3);transition:.15s}
.ctrl-btn:hover:not(:disabled){transform:scale(1.08)}
.ctrl-btn:disabled{opacity:.4;cursor:not-allowed}
.seek{flex:1;min-width:140px;accent-color:var(--pink);cursor:pointer}
.time{font-size:12px;color:var(--cyan);font-variant-numeric:tabular-nums;min-width:84px;text-align:center}
.vol-wrap{display:flex;align-items:center;gap:6px}
.vol{width:80px;accent-color:var(--cyan);cursor:pointer}

/* gift note (recipient view) */
.gift-note{width:100%;max-width:560px;margin:0 auto 16px;text-align:center;
  background:linear-gradient(135deg,rgba(255,121,198,.22),rgba(189,147,249,.22));
  border:2px dashed var(--pink);border-radius:18px;padding:14px 18px;backdrop-filter:blur(6px);
  animation:pop .4s ease}
@keyframes pop{from{transform:scale(.9);opacity:0}to{transform:scale(1);opacity:1}}
.gift-from{display:block;font-family:'Press Start 2P';font-size:9px;color:var(--yellow);margin-bottom:8px}
.gift-msg{font-size:16px;font-weight:600;color:var(--ink);line-height:1.5;white-space:pre-wrap;word-break:break-word}
.reset-btn{margin-top:12px;border:none;cursor:pointer;border-radius:12px;font-weight:700;
  font-family:'Quicksand';padding:9px 16px;color:#fff;
  background:linear-gradient(135deg,var(--pink),var(--purple));transition:.15s}
.reset-btn:hover{transform:translateY(-2px)}
.share-box .reset-btn{display:block;width:100%}

/* share box */
.share-box{width:100%;max-width:560px;margin-top:16px;
  background:var(--card);border:2px solid var(--card-br);border-radius:18px;
  padding:14px 16px;backdrop-filter:blur(6px)}
.msg-label{display:block;font-weight:700;font-size:13px;color:var(--cyan);margin-bottom:8px}
.msg-input{width:100%;border-radius:12px;border:2px solid var(--card-br);
  background:var(--field);color:var(--cream);padding:10px 12px;font-size:14px;
  font-family:'Quicksand';resize:vertical}
.msg-input:focus,.from-input:focus{outline:none;border-color:var(--pink)}
.msg-extra{display:flex;align-items:center;gap:10px;margin:8px 0 12px}
.from-input{flex:1;border-radius:12px;border:2px solid var(--card-br);
  background:var(--field);color:var(--cream);padding:8px 12px;font-size:13px;font-family:'Quicksand'}
.msg-count{font-size:11px;color:rgba(0,0,0,.45);font-variant-numeric:tabular-nums}

/* share */
.share-row{display:flex;gap:8px;width:100%;flex-wrap:wrap}
.share-btn,.copy-btn{border:none;cursor:pointer;border-radius:12px;font-weight:700;
  font-family:'Quicksand';padding:10px 14px;transition:.15s}
.share-btn{background:linear-gradient(135deg,var(--cyan),var(--purple));color:#fff}
.copy-btn{background:var(--yellow);color:#fff}
.share-btn:disabled,.copy-btn:disabled{opacity:.4;cursor:not-allowed}
.share-btn:hover:not(:disabled),.copy-btn:hover:not(:disabled){transform:translateY(-2px)}
.share-link{flex:1;min-width:180px;border-radius:12px;border:2px solid var(--card-br);
  background:var(--field);color:var(--cream);padding:10px 12px;font-size:12px}

/* search */
.search-area{margin-top:30px}
.search-form{display:flex;gap:8px}
.search-input{flex:1;border-radius:14px;border:2px solid var(--card-br);
  background:var(--field);color:var(--cream);padding:13px 16px;font-size:15px;font-family:'Quicksand'}
.search-input:focus{outline:none;border-color:var(--pink)}
.search-go{border:none;cursor:pointer;border-radius:14px;font-weight:700;font-family:'Quicksand';
  padding:0 22px;font-size:15px;background:linear-gradient(135deg,var(--pink),var(--purple));color:#fff;transition:.15s}
.search-go:hover{transform:translateY(-2px)}

.results{margin-top:14px;display:flex;flex-direction:column;gap:8px}
.result{display:flex;gap:12px;align-items:center;cursor:pointer;
  background:var(--card);border:2px solid transparent;border-radius:14px;padding:8px;transition:.15s}
.result:hover{border-color:var(--pink);background:rgba(255,121,198,.12)}
.result img{width:84px;height:48px;object-fit:cover;border-radius:8px;flex-shrink:0;background:#0004}
.result .r-meta{min-width:0}
.r-title{font-weight:700;font-size:14px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.r-sub{font-size:12px;color:var(--cyan);margin-top:2px}
.results .hint{color:var(--cyan);font-size:13px;text-align:center;padding:12px;opacity:.8}
.results .spinner{text-align:center;padding:20px;color:var(--yellow);font-weight:700;animation:pulse 1s infinite}
@keyframes pulse{50%{opacity:.4}}

.foot{text-align:center;margin-top:34px;color:rgba(0,0,0,.42);font-size:12px}

/* toast */
.toast{position:fixed;bottom:24px;left:50%;transform:translateX(-50%) translateY(120px);
  background:var(--ink);color:#fff;border:2px solid var(--pink);
  padding:12px 20px;border-radius:14px;font-weight:700;z-index:50;transition:.3s;box-shadow:0 8px 30px #000a}
.toast.show{transform:translateX(-50%) translateY(0)}

#ytHost{position:fixed;width:1px;height:1px;left:-9999px;top:-9999px;opacity:0}

/* ============ DEVICE CSS ART ============ */
.dev{--spin:paused;position:relative}
.playing .dev{--spin:running}

/* shared spin */
@keyframes spin{to{transform:rotate(360deg)}}

/* --- BOOMBOX --- */
.boombox{width:320px;height:190px;background:linear-gradient(#4b4b55,#2c2c34);
  border-radius:14px;border:3px solid #1b1b22;box-shadow:inset 0 2px 6px #fff2,0 10px 26px #0008;
  display:flex;align-items:center;justify-content:space-between;padding:0 14px;position:relative}
.boombox::before{content:"";position:absolute;top:-16px;left:50%;transform:translateX(-50%);
  width:120px;height:18px;border:4px solid #1b1b22;border-bottom:none;border-radius:40px 40px 0 0;background:transparent}
.bb-speaker{width:84px;height:84px;border-radius:50%;
  background:radial-gradient(circle,#666 0 30%,#222 31% 33%,#555 34% 60%,#222 61% 63%,#555 64%);
  border:5px solid #15151b}
.bb-center{flex:1;min-width:0;margin:0 10px;height:150px;display:flex;flex-direction:column;justify-content:center;gap:8px}
.bb-screen{width:100%;min-width:0;height:30px;line-height:30px;background:#0d1f17;color:#7cffb0;border-radius:6px;
  border:2px solid #000;font-family:'Press Start 2P';font-size:7px;text-align:center;padding:0 6px;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;box-shadow:inset 0 0 8px #0f06}
.bb-deck{height:42px;background:#15151b;border-radius:8px;border:2px solid #000;
  display:flex;align-items:center;justify-content:center;gap:18px}
.bb-reel{width:16px;height:16px;border-radius:50%;border:3px solid #777;border-top-color:var(--pink);
  animation:spin 1s linear infinite;animation-play-state:var(--spin)}
.bb-eq{display:flex;gap:3px;height:22px;align-items:flex-end;justify-content:center}
.bb-eq i{width:5px;background:linear-gradient(var(--yellow),var(--pink));border-radius:2px;height:30%}
.playing .bb-eq i{animation:eq .6s ease-in-out infinite alternate}
.bb-eq i:nth-child(2){animation-delay:.1s}.bb-eq i:nth-child(3){animation-delay:.2s}
.bb-eq i:nth-child(4){animation-delay:.3s}.bb-eq i:nth-child(5){animation-delay:.15s}
.bb-eq i:nth-child(6){animation-delay:.25s}.bb-eq i:nth-child(7){animation-delay:.05s}
@keyframes eq{to{height:100%}}

/* --- CASSETTE --- */
.cassette{width:300px;height:188px;border-radius:14px;
  background:linear-gradient(135deg,var(--pink),var(--purple));
  border:3px solid #fff6;box-shadow:0 10px 26px #0008;padding:16px;position:relative}
.cassette .label{background:var(--cream);border-radius:8px;height:74px;margin-bottom:14px;
  display:flex;align-items:center;justify-content:center;color:var(--ink);font-weight:700;
  font-family:'Press Start 2P';font-size:9px;text-align:center;padding:6px;border:2px solid #0002}
.cs-window{background:#1a1140;border-radius:10px;height:66px;display:flex;
  align-items:center;justify-content:space-around;border:2px solid #0006;position:relative}
.cs-reel{width:48px;height:48px;border-radius:50%;background:radial-gradient(#777 0 18%,#222 19%);
  border:3px solid #aaa;position:relative;animation:spin 2s linear infinite;animation-play-state:var(--spin)}
.cs-reel::before,.cs-reel::after{content:"";position:absolute;inset:40%;background:#ccc;border-radius:2px}
.cs-reel::before{transform:rotate(0deg)}.cs-reel::after{transform:rotate(60deg)}
.cs-reel span{position:absolute;inset:35%;border:2px solid #ccc;border-radius:2px;transform:rotate(120deg)}
.cs-tape{flex:1;height:5px;background:#3a2a1a;margin:0 -4px;align-self:flex-start;margin-top:30px}

/* --- CD PLAYER --- */
.cdplayer{width:230px;height:230px;border-radius:24px;
  background:radial-gradient(circle at 30% 30%,#c9d4e0,#8a93a6);
  border:4px solid #5a6172;box-shadow:0 10px 26px #0008,inset 0 2px 8px #fff8;
  display:flex;align-items:center;justify-content:center;position:relative}
.cd{width:165px;height:165px;border-radius:50%;
  background:
    repeating-conic-gradient(from 0deg,#ff79c6 0deg 18deg,#bd93f9 18deg 36deg,#8be9fd 36deg 54deg,#f1fa8c 54deg 72deg);
  position:relative;animation:spin 1.6s linear infinite;animation-play-state:var(--spin);
  box-shadow:0 0 0 4px #0003,inset 0 0 30px #fff5;opacity:.92}
.cd::before{content:"";position:absolute;inset:0;border-radius:50%;
  background:repeating-radial-gradient(circle,transparent 0 3px,#0000000d 3px 4px)}
.cd::after{content:"";position:absolute;inset:38%;background:radial-gradient(#fff,#dde);
  border-radius:50%;border:6px solid #aab;box-shadow:0 0 0 6px #889}
.cd-title{position:absolute;top:8px;left:50%;transform:translateX(-50%);max-width:170px;
  background:#15101f;color:#8be9fd;font-family:'Press Start 2P';font-size:7px;
  padding:5px 8px;border-radius:6px;border:1px solid #000;z-index:4;box-shadow:0 2px 4px #0006;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cd-btns{position:absolute;bottom:14px;display:flex;gap:10px}
.cd-btns i{width:14px;height:14px;border-radius:50%;background:#5a6172;box-shadow:inset 0 1px 2px #fff6}
.playing .cd-btns i:first-child{background:var(--pink)}

/* --- iPOD --- */
.ipod{width:190px;height:300px;border-radius:22px;
  background:linear-gradient(160deg,#fdfdff,#d8dbe6);
  border:3px solid #b6bccb;box-shadow:0 12px 28px #0008;padding:16px;
  display:flex;flex-direction:column;align-items:center}
.ipod .screen{width:100%;height:130px;border-radius:8px;background:#1a1140;
  border:3px solid #0006;overflow:hidden;position:relative;padding:8px 6px;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px}
.ip-title{color:#dfe6ff;font-weight:700;font-size:10px;max-width:100%;text-align:center;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;text-shadow:0 1px 2px #000}
.ipod .screen .art{width:70px;height:70px;border-radius:8px;
  background:repeating-conic-gradient(from 0deg,var(--pink) 0 90deg,var(--purple) 90deg 180deg);
  box-shadow:0 4px 12px #0006}
.ipod .screen .bars{position:absolute;bottom:8px;display:flex;gap:3px;height:18px;align-items:flex-end}
.ipod .screen .bars i{width:4px;background:var(--cyan);height:30%;border-radius:2px}
.playing .ipod .screen .bars i{animation:eq .5s ease-in-out infinite alternate}
.ipod .screen .bars i:nth-child(2){animation-delay:.1s}.ipod .screen .bars i:nth-child(3){animation-delay:.2s}
.ipod .screen .bars i:nth-child(4){animation-delay:.05s}.ipod .screen .bars i:nth-child(5){animation-delay:.15s}
.wheel{margin-top:auto;width:130px;height:130px;border-radius:50%;
  background:radial-gradient(circle,#eef0f5 0 28%,#cfd3de 29%);
  border:2px solid #c2c7d4;box-shadow:inset 0 2px 6px #fff,inset 0 -2px 6px #0002;
  display:flex;align-items:center;justify-content:center;position:relative;color:#8a90a0;font-size:11px;font-weight:700}
.wheel .menu{position:absolute;top:8px}.wheel .pp{position:absolute;bottom:10px}
.wheel .bk{position:absolute;left:10px}.wheel .fw{position:absolute;right:10px}
.wheel .hub{width:42px;height:42px;border-radius:50%;background:#e7eaf1;box-shadow:inset 0 1px 3px #0002}
.playing .wheel .hub{background:radial-gradient(var(--pink),#e7eaf1)}

/* --- TURNTABLE --- */
.turntable{width:300px;height:230px;border-radius:18px;
  background:linear-gradient(160deg,#3a2f4a,#241a33);
  border:3px solid #15101f;box-shadow:0 12px 28px #0009,inset 0 2px 6px #fff2;
  position:relative;padding:18px}
.tt-platter{width:170px;height:170px;border-radius:50%;
  background:radial-gradient(circle,#222 0 30%,#2b2b2b 31%);
  border:6px solid #111;box-shadow:inset 0 0 24px #000a;position:relative;
  margin-left:6px;margin-top:6px;
  animation:spin 1.8s linear infinite;animation-play-state:var(--spin)}
.tt-vinyl{position:absolute;inset:6px;border-radius:50%;
  background:
    repeating-radial-gradient(circle,#0a0a0a 0 2px,#1a1a1a 2px 4px),
    radial-gradient(circle,#1a1a1a 0 100%);
  box-shadow:inset 0 0 30px #000}
.tt-label{position:absolute;inset:34%;border-radius:50%;
  background:repeating-conic-gradient(from 0deg,var(--pink) 0 90deg,var(--purple) 90deg 180deg);
  display:flex;align-items:center;justify-content:center}
.tt-label::after{content:"";width:10px;height:10px;border-radius:50%;background:#111}
.tt-shine{position:absolute;inset:0;border-radius:50%;
  background:linear-gradient(120deg,transparent 40%,#ffffff14 50%,transparent 60%)}
.tt-arm{position:absolute;top:18px;right:34px;width:14px;height:132px;z-index:3;
  background:linear-gradient(#ccc,#888);border-radius:8px;transform-origin:top right;
  /* pivot from back-right so the head rests on top of the record */
  transform:rotate(56deg);transition:transform .6s ease;box-shadow:0 2px 6px #0008}
.playing .tt-arm{transform:rotate(62deg)}
.tt-arm::before{content:"";position:absolute;top:-8px;right:-4px;width:22px;height:22px;
  border-radius:50%;background:radial-gradient(#ddd,#777);box-shadow:0 2px 4px #0008}
.tt-arm::after{content:"";position:absolute;bottom:-6px;left:-2px;width:18px;height:14px;
  background:#444;border-radius:3px}
.tt-knob{position:absolute;bottom:18px;right:24px;width:26px;height:26px;border-radius:50%;
  background:radial-gradient(#eee 0 30%,#999);box-shadow:inset 0 1px 2px #fff,0 2px 4px #0008}
.tt-title{position:absolute;bottom:10px;left:18px;max-width:170px;
  background:#15101f;color:#8be9fd;font-family:'Press Start 2P';font-size:7px;
  padding:5px 8px;border-radius:6px;border:1px solid #000;z-index:4;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

@media(max-width:480px){
  .boombox{width:280px}.cassette{width:270px}.turntable{width:280px}
}