/* Palco: schermata verticale 9:16 per TikTok LIVE Studio */
html, body { height: 100%; overflow: hidden; }
body { display: grid; place-items: center; background: #000; }

.frame {
  position: relative; z-index: 1;
  height: 100dvh; width: calc(100dvh * 9 / 16); max-width: 100vw; max-height: calc(100vw * 16 / 9);
  aspect-ratio: 9 / 16; overflow: hidden; background: var(--bg);
  display: grid; grid-template-rows: auto 1fr auto; padding: 4.5% 6%;
  container-type: size;
}
.frame .atmos { position: absolute; }

.top { display: flex; align-items: center; justify-content: space-between; gap: 2cqw; }
.logo { font-family: var(--font-display); font-weight: 800; font-size: 4.2cqw; letter-spacing: 0.12em; text-transform: uppercase;
  background: linear-gradient(90deg, #fff, var(--cyan)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.live {
  display: inline-flex; align-items: center; gap: 1.6cqw; font-family: var(--mono); font-size: 2.6cqw;
  padding: 1.2cqw 2.6cqw; border-radius: 999px; background: rgba(255, 61, 154, 0.12); border: 1px solid rgba(255, 61, 154, 0.35);
}
.live::before { content: ''; width: 1.8cqw; height: 1.8cqw; border-radius: 50%; background: var(--magenta); animation: pulse 1.8s var(--out) infinite; }

.center { display: grid; align-content: center; justify-items: center; gap: 3cqh; }
.stage3d { width: 100%; }
.stack { width: 76cqw; }
.frame .stack .card.front { animation: sway 12s var(--spring) infinite alternate; }
@keyframes sway {
  0% { transform: rotateY(-10deg) rotateX(4deg); }
  50% { transform: rotateY(6deg) rotateX(-3deg) translateZ(30px); }
  100% { transform: rotateY(12deg) rotateX(5deg); }
}
.ring { position: absolute; inset: -9%; border-radius: 50%; pointer-events: none; }

.meta { text-align: center; width: 100%; }
.meta .t { font-family: var(--font-display); font-weight: 800; font-size: 7cqw; line-height: 1.02; letter-spacing: -0.02em;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.meta .a { font-size: 4.4cqw; color: var(--ink-2); margin-top: 1cqh; }
.meta .chip { font-size: 3cqw; padding: 1cqw 2.6cqw; margin-top: 1.4cqh; }
.meta .progress { height: 0.9cqw; margin-top: 2cqh; }
canvas.viz { height: 8cqh; }

.bottom { display: grid; gap: 2.2cqh; }
.next { display: grid; grid-template-columns: 13cqw 1fr auto; align-items: center; gap: 3cqw; padding: 2cqw; border-radius: 4cqw; background: rgba(255, 255, 255, 0.05); border: 1px solid var(--hair); }
.next .cover { border-radius: 2.6cqw; aspect-ratio: 1; }
.next .cover .initials { font-size: 5cqw; mix-blend-mode: normal; }
.next .lbl { font-family: var(--mono); font-size: 2.4cqw; color: var(--cyan); letter-spacing: 0.2em; text-transform: uppercase; }
.next .nt { font-weight: 600; font-size: 3.8cqw; line-height: 1.15; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.next .na { font-size: 3cqw; color: var(--ink-3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.next > div { min-width: 0; }
.next .chip { font-size: 2.8cqw; }

.cta { display: grid; grid-template-columns: 22cqw 1fr; gap: 4cqw; align-items: center; padding: 3cqw; border-radius: 5cqw;
  background: linear-gradient(120deg, rgba(139, 92, 246, 0.2), rgba(255, 61, 154, 0.14)); border: 1px solid rgba(255, 255, 255, 0.12); }
.cta img { width: 22cqw; height: 22cqw; }
.cta .h { font-family: var(--font-display); font-weight: 700; font-size: 4.6cqw; line-height: 1.05; }
.cta .s { font-size: 3cqw; color: var(--ink-2); margin-top: 1cqh; }
.cta .u { font-family: var(--mono); font-size: 3cqw; color: var(--cyan); margin-top: 0.6cqh; }

.shout {
  position: absolute; z-index: 5; left: 6%; right: 6%; top: 13%;
  padding: 3.4cqw 4cqw; border-radius: 5cqw; text-align: center;
  background: linear-gradient(120deg, rgba(255, 200, 80, 0.22), rgba(255, 61, 154, 0.22)); border: 1px solid rgba(255, 200, 80, 0.5);
  backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px);
  transform: translateY(-160%) scale(0.9); opacity: 0; transition: transform 1s var(--spring), opacity 1s var(--spring);
}
.shout.show { transform: none; opacity: 1; }
.shout .k { font-family: var(--mono); font-size: 2.6cqw; letter-spacing: 0.2em; color: #ffd87a; }
.shout .m { font-family: var(--font-display); font-size: 5cqw; font-weight: 700; margin-top: 1cqh; line-height: 1.1; }

.start {
  position: fixed; inset: 0; z-index: 50; display: grid; place-items: center; text-align: center; gap: 1rem;
  background: rgba(5, 4, 9, 0.9); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); cursor: pointer;
}
.start p { color: var(--ink-2); max-width: 26rem; margin: 1rem auto 0; padding: 0 1rem; }