:root {
  --bg0: #0a0132;
  --bg1: #200a44;
  --deep: #1d055b;
  --magenta: #b95fd9;
  --cyan: #7fb9e4;
  --offwhite: #cfdef3;

  --fg: rgba(235, 230, 255, 0.92);
  --fg2: rgba(235, 230, 255, 0.65);

  /* Safe area insets for notched devices */
  --safe-top: env(safe-area-inset-top, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
  --safe-left: env(safe-area-inset-left, 0px);
  --safe-right: env(safe-area-inset-right, 0px);
}

* { box-sizing: border-box; }
html, body { height: 100%; margin: 0; overflow: hidden; background: var(--bg0); color: var(--fg);
  font-family: ui-sans-serif, system-ui, -apple-system, "SF Pro Text", "Inter", Arial; }

#bg {
  position: fixed; inset: 0;
  width: 100vw; height: 100vh;
  background: black;
}

#stage {
  position: relative;
  height: 100vh;
  height: 100dvh; /* Dynamic viewport height - accounts for browser chrome on mobile */
  padding: 36px 20px;
  padding-top: calc(36px + var(--safe-top));
  padding-bottom: calc(36px + var(--safe-bottom));
  overflow: hidden;
}

.hint {
  position: absolute;
  left: 20px;
  top: 24px;
  max-width: min(900px, 92vw);
  padding: 14px 14px;
  border-radius: 12px;
  background: rgba(0,0,0,0.22);
  border: 1px solid rgba(255,255,255,0.10);
  backdrop-filter: blur(8px);
}

.hint-title {
  font-weight: 650;
  letter-spacing: 0.4px;
  margin-bottom: 6px;
}

.hint-sub {
  opacity: 0.75;
  line-height: 1.35;
}

.layer {
  position: absolute;
  opacity: 0;
  transform: translateY(8px);
  will-change: opacity, transform, filter;
}

/* Text layers need max-width to prevent overflow, but canvas/media can overflow intentionally */
.layer.text,
.layer.textbox {
  max-width: min(980px, 92vw);
}

.text {
  white-space: pre-wrap;
  line-height: 1.25;
  font-size: 40px;
  text-shadow:
    0 0 18px rgba(0,0,0,0.35),
    0 0 28px rgba(0,0,0,0.25);
}

.title {
  font-size: 44px;
  font-weight: 750;
  letter-spacing: 0.6px;
}

.small {
  font-size: 18px;
  opacity: 0.85;
}

.glow-magenta {
  text-shadow:
    0 0 18px rgba(0,0,0,0.35),
    0 0 24px rgba(185, 95, 217, 0.20),
    0 0 52px rgba(185, 95, 217, 0.16);
}

.glow-cyan {
  text-shadow:
    0 0 18px rgba(0,0,0,0.35),
    0 0 24px rgba(127, 185, 228, 0.20),
    0 0 52px rgba(127, 185, 228, 0.16);
}

#controls {
  position: fixed; left: 0; right: 0; bottom: 0;
  display: flex; align-items: center; gap: 12px;
  padding: 10px 12px;
  background: rgba(0,0,0,0.35);
  backdrop-filter: blur(8px);
  border-top: 1px solid rgba(255,255,255,0.08);
}

#audio { width: min(860px, 72vw); }
#time { font-variant-numeric: tabular-nums; opacity: 0.8; }

/* Optional media layers (image/video) */
.media {
  width: 360px;
  height: 360px;
  object-fit: cover;
  border-radius: 999px; /* default: circular */
  box-shadow:
    0 0 22px rgba(0,0,0,0.38),
    0 0 58px rgba(127,185,228,0.10),
    0 0 58px rgba(185,95,217,0.10);
  border: 1px solid rgba(255,255,255,0.12);
  backdrop-filter: blur(2px);
}

/* Frame types - use .media prefix for specificity */
.media.frame-circular {
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,0.12) !important;
}

.media.frame-none {
  border-radius: 0 !important;
  border: none !important;
  box-shadow: none !important;
  object-fit: contain;
}

.media.frame-fade {
  border-radius: 0 !important;
  border: none !important;
  box-shadow: none !important;
  object-fit: cover;
  -webkit-mask-image: linear-gradient(to right, transparent 0%, black 12%, black 88%, transparent 100%),
                      linear-gradient(to bottom, transparent 0%, black 12%, black 88%, transparent 100%);
  -webkit-mask-composite: source-in;
  mask-image: linear-gradient(to right, transparent 0%, black 12%, black 88%, transparent 100%),
              linear-gradient(to bottom, transparent 0%, black 12%, black 88%, transparent 100%);
  mask-composite: intersect;
}

.media.frame-circle-fade {
  border-radius: 0 !important;
  border: none !important;
  box-shadow: none !important;
  object-fit: cover;
  -webkit-mask-image: radial-gradient(circle at center, black 0%, black 40%, transparent 50%);
  mask-image: radial-gradient(circle at center, black 0%, black 40%, transparent 50%);
}

/* Legacy classes for backwards compatibility */
.media-rect {
  border-radius: 12px;
}

.media-sharp {
  border-radius: 0;
}

/* Fractal layers */
.fractal {
  pointer-events: none;
  background: transparent;
  filter: blur(0.8px);
}

/* Generative visualization layers */
.generative {
  pointer-events: none;
  background: transparent;
}

/* Elements with links */
.has-link {
  pointer-events: auto !important;
  cursor: pointer;
}

.has-link:hover {
  filter: brightness(1.1);
}

.fractal-glow {
  filter: drop-shadow(0 0 20px rgba(127,185,228,0.3))
          drop-shadow(0 0 40px rgba(185,95,217,0.2));
}

.fractal-glow-strong {
  filter: drop-shadow(0 0 30px rgba(127,185,228,0.5))
          drop-shadow(0 0 50px rgba(185,95,217,0.4));
}

.start-overlay{
  position: fixed; inset: 0;
  display: grid; place-items: center;
  z-index: 9999;
  cursor: pointer;
}
.start-play-btn{
  background: none;
  border: none;
  cursor: pointer;
  opacity: 0.7;
  transition: opacity 0.2s, transform 0.2s;
  padding: 0;
}
.start-play-btn:hover{
  opacity: 1;
  transform: scale(1.1);
}

/* Textbox - stacking lyrics */
.textbox {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  overflow: hidden;
  text-align: center; /* default, overridden by inline style */
}

.textbox-lines {
  display: flex;
  flex-direction: column;
  width: 100%;
  gap: 0.3em;
}

.textbox-line {
  line-height: 1.3;
  opacity: 0;
  transform: translateY(8px);
  animation: textbox-line-in 0.3s ease-out forwards;
}

@keyframes textbox-line-in {
  from {
    opacity: 0;
    transform: translateY(8px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.textbox-line.textbox-line-clearing {
  animation: textbox-line-out 0.25s ease-in forwards !important;
}

@keyframes textbox-line-out {
  from {
    opacity: 1;
    transform: translateY(0);
  }
  to {
    opacity: 0;
    transform: translateY(-8px);
  }
}