/* =========================
   styles.css (standalone)
   ========================= */

:root{
  --bg:#0b1220;
  --bg2:#0e1426;
  --panel:rgba(255,255,255,0.06);
  --panelBorder:rgba(255,255,255,0.08);
  --text:#e6ebf4;
  --muted:#9aa3b2;
  --accent:#00b1aa;
  --accent-2:#24d6cf;
  --shadow:0 10px 30px rgba(0,0,0,0.35);
}

*,*::before,*::after{box-sizing:border-box}
html,body{height:100%}
body{margin:0}
img{max-width:100%; display:block}

body.site{
  color:var(--text);
  background:
    radial-gradient(1200px 800px at 10% 10%, #10193a, transparent 60%),
    radial-gradient(1000px 700px at 90% 20%, #062a2b, transparent 50%),
    linear-gradient(180deg, var(--bg), var(--bg2));
  font-family:Inter, ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial;
  font-weight:400; font-size:16px; line-height:1.6;
}
.wrap{max-width:auto; margin:0 auto; padding:32px; min-height:100vh; display:flex; flex-direction:column}

.site-header{display:flex; align-items:center; justify-content:space-between; margin-bottom:28px}
.brand{display:flex; align-items:center; gap:10px}
.brand .dot{width:10px; height:10px; border-radius:50%; background:linear-gradient(135deg, var(--accent), var(--accent-2)); box-shadow:0 0 18px var(--accent)}
.brand .title{font-family:"Space Grotesk", Inter, sans-serif; font-weight:600; letter-spacing:0.2px}
.actions{display:flex; gap:12px}

.layout{display:grid; grid-template-columns:1.1fr 1fr; gap:36px; align-items:center; flex:1}
@media (max-width:980px){.layout{grid-template-columns:1fr;}}

.copy h1{font-size:34px; line-height:1.2; margin:0 0 10px}
.copy p{color:var(--muted); margin:0 0 18px}

.nowplaying{display:flex; gap:16px; align-items:center; background:var(--panel); border:1px solid var(--panelBorder); border-radius:18px; padding:14px; box-shadow:var(--shadow)}
.nowplaying .cover{width:84px; height:84px; border-radius:12px; overflow:hidden; flex:none}
.nowplaying .cover img{width:100%; height:100%; object-fit:cover}
.nowplaying .meta{min-width:0}
.nowplaying .track{font-weight:600; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.nowplaying .artist{opacity:.95}
.nowplaying .album{color:var(--muted); font-size:14px}

.btn{appearance:none; border:0; border-radius:12px; padding:10px 14px; font-weight:600; cursor:pointer; text-decoration:none; transition:.15s transform ease}
.btn:hover{transform:translateY(-1px)}
.btn:active{transform:translateY(0)}
.btn.primary{background:linear-gradient(135deg, var(--accent), var(--accent-2)); color:#05201f; box-shadow:0 8px 18px rgba(0,177,170,.25)}
.btn.ghost{background:transparent; color:var(--text); border:1px solid var(--panelBorder)}

.deck{display:flex; flex-direction:column; align-items:center; gap:14px}
.hint{color:var(--muted); font-size:13px; text-align:center}

.console{display:flex; gap:12px; margin-top:18px}
.console-btn{appearance:none; border-radius:999px; border:1px solid var(--panelBorder); background:rgba(255,255,255,0.05); color:var(--text); font-weight:600; padding:8px 18px; cursor:pointer; transition:transform .15s ease, background .15s ease}
.console-btn:hover:not(:disabled){transform:translateY(-1px); background:rgba(255,255,255,0.08)}
.console-btn:active:not(:disabled){transform:none}
.console-btn:disabled{opacity:0.4; cursor:not-allowed; transform:none}
.console-btn.primary{background:linear-gradient(135deg, var(--accent), var(--accent-2)); color:#041f1e; border-color:transparent}
.console-btn.primary:disabled{background:linear-gradient(135deg, rgba(0,177,170,.4), rgba(36,214,207,.4)); color:rgba(4,31,30,.6)}
.toggle-only{margin-top:16px; padding:8px 18px; border-radius:999px; border:1px solid var(--panelBorder); background:rgba(255,255,255,0.04); color:var(--text); font-weight:600; cursor:pointer; transition:transform .15s ease, background .15s ease}
.toggle-only:hover{transform:translateY(-1px); background:rgba(255,255,255,0.08)}
.toggle-only:active{transform:none}

.turntable{--size:360px; position:relative; width:var(--size); height:var(--size)}
@media (max-width:480px){.turntable{--size:300px}}

.disc{position:absolute; inset:0; border-radius:50%;
  background:
    radial-gradient(closest-side, #0f172a 0%, #0b1224 60%, #000 92%),
    repeating-radial-gradient(circle at 50% 50%, rgba(255,255,255,0.08) 0 1px, rgba(255,255,255,0.02) 1px 3px);
  box-shadow:0 18px 40px rgba(0,0,0,.45);
}
.is-playing .disc{animation:spin 10s linear infinite}
.is-playing .label{animation:spin 10s linear infinite}

.label{position:absolute; inset:0; display:grid; place-items:center; pointer-events:none}
.label > img{width:56%; height:56%; border-radius:50%; object-fit:cover; box-shadow:0 10px 20px rgba(0,0,0,.45)}
.label .spindle{position:absolute; width:12px; height:12px; border-radius:50%; background:#e5e7eb; box-shadow:inset 0 0 0 2px rgba(0,0,0,.2)}

.rim{position:absolute; inset:0; border-radius:50%; box-shadow:inset 0 0 0 12px rgba(2,6,23,.6)}
.tonearm{position:absolute; right:-34px; top:48px; transform-origin:top right; transform:rotate(18deg)}
.tonearm .arm{display:block; width:120px; height:10px; background:#586073; border-radius:12px; box-shadow:0 2px 6px rgba(0,0,0,.35)}
.tonearm .head{display:block; width:16px; height:26px; background:#6b7280; border-bottom-left-radius:10px; border-bottom-right-radius:10px; margin-left:102px; margin-top:-2px; box-shadow:0 2px 6px rgba(0,0,0,.35)}

.site-footer{margin-top:26px; color:var(--muted); text-align:center}

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

.deck-only .copy{display:none}
.deck-only .layout{grid-template-columns:1fr; justify-items:center; text-align:center}
.deck-only .deck{margin-top:0; align-items:center}
.deck-only .toggle-only{margin-top:24px}
.deck-only .hint{margin-top:20px}

@media (prefers-reduced-motion: reduce){
  .is-playing .disc{animation:none}
  .btn{transition:none}
}