/*
 * tape.css — the Tape Deck, minimal full-screen version.
 * The artwork fills the viewport with a slow floaty pan/zoom; a small control bar
 * fades in on hover/tap and fades away while you watch. Save-the-mix prompt + the
 * "explode" stay, styled minimally.
 */
/* short explainer line above the player */
.tape-intro {
  text-align: center;
  margin: 0 auto 14px;
  max-width: calc((100vh - 120px) * 1.6);
  color: #555;
  font-family: 'Roboto Slab', serif;
  font-size: clamp(13px, 1.6vw, 16px);
  font-style: italic;
  letter-spacing: .2px;
  line-height: 1.5;
}
.tape-cc { font-size: 12px; font-style: normal; color: #888; }
.tape-cc a { color: #888; text-decoration: underline; }
.tape-cc a:hover { color: #555; }

/* download button: spins while rendering/encoding */
.tape-dl.is-busy { pointer-events: none; }
.tape-dl.is-busy svg { animation: tape-dl-spin 1s linear infinite; }
@keyframes tape-dl-spin { to { transform: rotate(360deg); } }

/* The stage is ALWAYS a 16:10 box, whatever the device. It takes the full width
 * available but never taller than the viewport, and is centred. */
.tape-stage {
  position: relative;
  width: 100%;
  max-width: calc((100vh - 120px) * 1.6); /* cap width so the 16:10 box fits the viewport height */
  aspect-ratio: 16 / 10;
  margin: 0 auto;
  background: #06100c;
  overflow: hidden;
  border-radius: 4px;
}
/* Fullscreen: centre a 16:10 box (letterboxed) on a black field, filling the screen. */
.tape-stage.is-fullscreen,
.tape-stage:fullscreen,
.tape-stage:-webkit-full-screen {
  width: 100vw; height: 100vh; max-width: none; aspect-ratio: auto;
  border-radius: 0; background: #000;
  display: flex; align-items: center; justify-content: center;
}
.tape-stage canvas {
  display: block; width: 100%; height: 100%;
}
/* in fullscreen the canvas keeps 16:10 and letterboxes */
.tape-stage.is-fullscreen canvas,
.tape-stage:fullscreen canvas,
.tape-stage:-webkit-full-screen canvas {
  width: auto; height: auto; max-width: 100vw; max-height: 100vh; aspect-ratio: 16 / 10;
}

/* idle prompt before first play */
.tape-stage__idle {
  position: absolute; inset: 0; z-index: 2;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 16px; text-align: center; color: #ede6dc;
  background: radial-gradient(120% 100% at 50% 40%, #0e1d15, #06100c 80%);
  cursor: pointer;
}
.tape-stage.is-started .tape-stage__idle { display: none; }
.tape-stage__play {
  width: 84px; height: 84px; border-radius: 50%;
  border: 2px solid rgba(255,255,255,.55);
  background: rgba(255,255,255,.06);
  display: flex; align-items: center; justify-content: center;
  transition: transform .15s ease, background .2s ease, border-color .2s ease;
}
.tape-stage__idle:hover .tape-stage__play { transform: scale(1.06); background: rgba(255,255,255,.12); border-color: #fff; }
.tape-stage__play svg { width: 34px; height: 34px; fill: #fff; margin-left: 4px; }
.tape-stage__idle p { margin: 0; font-size: 14px; letter-spacing: 1px; opacity: .8; font-family: 'Roboto Slab', serif; }
.tape-stage__idle .sub { font-size: 12px; opacity: .55; }

/* tiny dissolve-in vignette so the art edges feel soft, never a hard box */
.tape-stage::after {
  content: ''; position: absolute; inset: 0; pointer-events: none; z-index: 1;
  box-shadow: inset 0 0 90px rgba(0,0,0,.45);
}

/* ---- auto-hiding control bar ---- */
.tape-bar {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 3;
  display: flex; align-items: center; gap: 16px;
  padding: 14px 18px;
  background: linear-gradient(to top, rgba(0,0,0,.62), rgba(0,0,0,.18) 70%, transparent);
  color: #fff;
  opacity: 0; transform: translateY(8px);
  transition: opacity .3s ease, transform .3s ease;
  font-family: 'Roboto Slab', serif;
}
/* show when hovering the stage, when paused, or when recently interacted */
.tape-stage:hover .tape-bar,
.tape-stage.is-paused .tape-bar,
.tape-stage.bar-show .tape-bar { opacity: 1; transform: translateY(0); }
@media (hover: none) { .tape-bar { opacity: 1; transform: none; } }

.tape-bar__btn {
  width: 44px; height: 44px; flex: 0 0 auto;
  border: 0; border-radius: 50%;
  background: rgba(255,255,255,.12); color: #fff; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: background .15s ease, transform .08s ease;
}
.tape-bar__btn:hover { background: rgba(255,255,255,.24); }
.tape-bar__btn:active { transform: scale(.94); }
.tape-bar__btn svg { width: 20px; height: 20px; fill: currentColor; }

.tape-bar__time { flex: 0 0 auto; font-size: 13px; font-variant-numeric: tabular-nums; opacity: .9; min-width: 96px; }

/* seek bar — click or drag anywhere to skip through the mix */
.tape-bar__seek { flex: 1 1 auto; height: 22px; display: flex; align-items: center; cursor: pointer; touch-action: none; }
.tape-bar__seek-track { position: relative; width: 100%; height: 5px; background: rgba(255,255,255,.22); border-radius: 3px; }
.tape-bar__seek-fill { position: absolute; left: 0; top: 0; bottom: 0; width: 0; background: #ff3b6b; border-radius: 3px; box-shadow: 0 0 8px rgba(255,59,107,.7); }
.tape-bar__seek-knob {
  position: absolute; top: 50%; left: 0; width: 13px; height: 13px; margin: -6.5px 0 0 -6.5px;
  border-radius: 50%; background: #fff; box-shadow: 0 0 6px rgba(255,255,255,.7);
  opacity: 0; transition: opacity .15s ease;
}
.tape-bar__seek:hover .tape-bar__seek-knob,
.tape-bar__seek.is-dragging .tape-bar__seek-knob,
.tape-bar__seek:focus .tape-bar__seek-knob { opacity: 1; }
.tape-bar__seek:focus { outline: none; }
.tape-bar__seek:focus .tape-bar__seek-track { box-shadow: 0 0 0 2px rgba(52,226,228,.5); }

.tape-bar__status { font-size: 11px; letter-spacing: 1px; opacity: .6; flex: 0 0 auto; }
.tape-fs { margin-left: 2px; }

@media (max-width: 640px) {
  .tape-bar { gap: 10px; padding: 10px 12px; }
  .tape-bar__time { min-width: 78px; font-size: 12px; }
}

/* Mobile landscape: turning the phone sideways fills the screen with the 16:10 art.
 * (We expand the stage to the full viewport; the canvas stays 16:10 and letterboxes
 * minimally since phone landscape is wider than 16:10.) */
@media (max-width: 950px) and (orientation: landscape) {
  .tape-page { padding: 0; }
  .tape-stage {
    position: fixed; inset: 0; z-index: 50;
    width: 100vw; height: 100vh; max-width: none; aspect-ratio: auto;
    margin: 0; border-radius: 0; background: #000;
    display: flex; align-items: center; justify-content: center;
  }
  .tape-stage canvas { width: auto; height: auto; max-width: 100vw; max-height: 100vh; aspect-ratio: 16 / 10; }
  .tape-shelf, .tape-intro { display: none !important; }
}

/* ---- save prompt (full-screen, minimal) ---- */
.tape-save {
  position: fixed; inset: 0; z-index: 10000;
  display: none; align-items: center; justify-content: center;
  background: rgba(6,10,8,.9); backdrop-filter: blur(3px);
  font-family: 'Roboto Slab', serif;
}
.tape-save.is-open { display: flex; }
.tape-save__box {
  width: min(440px, 92vw); text-align: center; color: #f3ece2;
  background: rgba(20,28,22,.85); border: 1px solid rgba(255,255,255,.12);
  border-radius: 10px; padding: 26px;
  box-shadow: 0 20px 60px rgba(0,0,0,.5);
}
.tape-save__box h3 { margin: 0 0 6px; letter-spacing: 2px; font-weight: 400; }
.tape-save__box p { margin: 0 0 14px; font-size: 13px; opacity: .75; }
.tape-save__timer { font-size: 34px; color: #ff3b6b; text-shadow: 0 0 16px rgba(255,59,107,.6); margin: 6px 0 14px; font-variant-numeric: tabular-nums; }
.tape-save__box input {
  width: 100%; box-sizing: border-box; padding: 11px 12px; margin-bottom: 14px;
  background: rgba(0,0,0,.35); border: 1px solid rgba(255,255,255,.18); color: #fff;
  font: inherit; font-size: 15px; border-radius: 6px; outline: none; text-align: center;
}
.tape-save__box input:focus { border-color: #34e2e4; }
.tape-save__btns { display: flex; gap: 10px; justify-content: center; }
.tape-save__btns button { font: inherit; padding: 10px 20px; border: 0; border-radius: 6px; cursor: pointer; letter-spacing: 1px; }
.tape-save__keep { background: #34e2e4; color: #06231f; font-weight: 700; }
.tape-save__let  { background: rgba(255,255,255,.1); color: #d8d8e0; }

.tape-boom { position: fixed; inset: 0; z-index: 10001; pointer-events: none; display: none; align-items: center; justify-content: center; }
.tape-boom.is-on { display: flex; animation: tape-boom-flash .7s ease-out forwards; }
.tape-boom span { font-size: clamp(40px, 12vw, 120px); }
@keyframes tape-boom-flash { 0% { background: rgba(255,255,255,.85); } 35% { background: rgba(255,59,107,.4); } 100% { background: rgba(255,59,107,0); } }

/* saved tapes shelf (kept, minimal) */
.tape-shelf { width: min(1100px, 96vw); margin: 18px auto 0; }
.tape-shelf h4 { color: #888; letter-spacing: 1px; font-size: 12px; text-transform: uppercase; margin: 0 0 10px; font-weight: 400; }
.tape-shelf__list { display: flex; flex-wrap: wrap; gap: 8px; }
.tape-cassette {
  display: flex; align-items: center; gap: 8px;
  background: #1c2830; border: 1px solid rgba(255,255,255,.1); border-radius: 6px;
  padding: 8px 12px; color: #cbb890; cursor: pointer; font-size: 12px;
  font-family: 'Roboto Slab', serif;
}
.tape-cassette:hover { border-color: #cbb890; }
.tape-cassette .reel { width: 11px; height: 11px; border-radius: 50%; border: 2px solid #cbb890; }