/* Nite Show på TV:n. Samma grund som resten av TV-appen (Fredoka, vw-mått, Gamenites färger),
   men större, tjockare och mer "tv-program". Se docs/nite-show/design.md. */

.nite {
  position: fixed;
  top: 0; right: 0; bottom: 0; left: 0;
  z-index: 10;
  overflow: hidden;
  background: linear-gradient(160deg, #1B0B3A, #3A0C4F);
}
body.nite-on #app, body.nite-on .blob { display: none; }

.n-stage, .nite-canvas { position: absolute; top: 0; right: 0; bottom: 0; left: 0; width: 100%; height: 100%; }
.nite-canvas { display: block; image-rendering: auto; }

.n-ui {
  position: absolute;
  top: 0; right: 0; bottom: 0; left: 0;
  padding: 3vw 4vw;
  pointer-events: none;
  /* Mörkare upptill så att frågor och rubriker syns mot den livliga scenen */
  background: linear-gradient(to bottom, rgba(27, 11, 58, 0.55), rgba(27, 11, 58, 0) 40%);
}
.n-view { height: 100%; display: flex; flex-direction: column; }

/* Blixt över hela skärmen */
.nite-flash { position: absolute; top: 0; right: 0; bottom: 0; left: 0; opacity: 0; pointer-events: none; mix-blend-mode: screen; }
.nite-flash.on { animation: n-flash 0.45s ease-out; }
@keyframes n-flash { from { opacity: 0.85; } to { opacity: 0; } }

/* Text med kraftig kontur så att den syns mot en livlig bakgrund */
.n-title, .n-big, .n-heading, .n-question, .n-clock, .n-pot-value, .n-buzzcall, .n-go, .n-buzzer-name {
  font-weight: 700;
  color: #fff;
  text-shadow: 0 0.35vw 0 rgba(27, 11, 58, 0.55), 0 0 2vw rgba(27, 11, 58, 0.6);
}

.n-center { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; gap: 1.2vw; }
.n-kicker { font-size: 1.7vw; font-weight: 600; letter-spacing: 0.35vw; text-transform: uppercase; color: #FFD23F; }
.n-title { font-size: 8.5vw; line-height: 0.95; letter-spacing: -0.2vw; }
.n-sub { font-size: 1.9vw; color: rgba(255, 255, 255, 0.85); max-width: 60vw; }
.n-tagline { font-size: 2.6vw; font-weight: 600; padding: 0.4vw 1.8vw; border-radius: 999px; background: rgba(27, 11, 58, 0.6); }
.n-big { font-size: 6vw; }
.n-heading { font-size: 4vw; text-align: center; margin-bottom: 1.5vw; }

.n-top { display: flex; align-items: center; justify-content: space-between; gap: 2vw; min-height: 4vw; }
.n-pill {
  padding: 0.7vw 1.6vw;
  border-radius: 999px;
  background: rgba(27, 11, 58, 0.55);
  border: 0.15vw solid rgba(255, 255, 255, 0.25);
  font-size: 1.6vw;
  font-weight: 600;
}

/* Avatarer i HTML-lagret (3D-figurerna har sina egna) */
.n-avatar {
  width: 5vw; height: 5vw; border-radius: 50%;
  border: 0.3vw solid #fff;
  background-size: cover; background-position: center;
  display: flex; align-items: center; justify-content: center;
  font-weight: 700; font-size: 2.2vw; color: #fff; flex: none;
}
.n-avatar.xs { width: 2.2vw; height: 2.2vw; font-size: 1vw; border-width: 0.15vw; }
.n-avatar.sm { width: 3.2vw; height: 3.2vw; font-size: 1.4vw; border-width: 0.2vw; }
.n-avatar.lg { width: 8vw; height: 8vw; font-size: 3.6vw; border-width: 0.45vw; }

.n-chips { display: flex; flex-wrap: wrap; justify-content: center; gap: 1vw; max-width: 80vw; }
.n-chip {
  display: flex; align-items: center; gap: 0.7vw;
  padding: 0.4vw 1.2vw 0.4vw 0.4vw;
  border-radius: 999px; background: rgba(27, 11, 58, 0.6);
  font-size: 1.6vw; font-weight: 600;
}

/* Rundintro: "så här trycker du" */
.n-howto {
  display: flex; align-items: center; gap: 2vw;
  margin-top: 1vw; padding: 1.4vw 2.2vw;
  border-radius: 2vw; background: rgba(27, 11, 58, 0.65);
  font-size: 1.9vw; text-align: left; max-width: 62vw;
}
.n-howto-label { font-size: 1.3vw; font-weight: 600; color: #22D3EE; text-transform: uppercase; letter-spacing: 0.2vw; }
.n-phone {
  width: 5.5vw; height: 10vw; flex: none;
  border-radius: 1vw; border: 0.35vw solid #fff; background: #1B0B3A;
  display: flex; align-items: center; justify-content: center;
}
.n-phone-btn { width: 3.6vw; height: 3.6vw; border-radius: 50%; background: #FF3EA5; box-shadow: 0 0.35vw 0 #C21877; animation: n-press 1.2s ease-in-out infinite; }
.n-phone-btn.k-choice, .n-phone-btn.k-bet {
  border-radius: 0.3vw; box-shadow: none; animation: none;
  background: linear-gradient(90deg, #FF3EA5 48%, transparent 48% 52%, #8B5CF6 52%) top / 100% 48% no-repeat,
              linear-gradient(90deg, #0E7490 48%, transparent 48% 52%, #B45309 52%) bottom / 100% 48% no-repeat;
}
.n-phone-btn.k-hold { animation: n-hold 2.4s ease-in-out infinite; }
.n-phone-btn.k-mash { animation-duration: 0.25s; }
@keyframes n-press { 0%, 70%, 100% { transform: translateY(0); } 80% { transform: translateY(0.3vw); box-shadow: 0 0.05vw 0 #C21877; } }
@keyframes n-hold { 0%, 15% { transform: translateY(0); } 20%, 85% { transform: translateY(0.3vw); box-shadow: 0 0.05vw 0 #C21877; } 90% { transform: translateY(0); } }

/* Frågor och svar */
.n-question { margin-top: 2vw; font-size: 3.6vw; line-height: 1.15; text-align: center; padding: 0 4vw; }
.n-question.small { font-size: 2.8vw; margin-top: 1.4vw; }
.n-options { display: grid; grid-template-columns: 1fr 1fr; gap: 1.2vw; margin: 2vw 6vw 0; }
.n-option {
  display: flex; align-items: center; flex-wrap: wrap; gap: 1.2vw;
  padding: 1.2vw 1.6vw; border-radius: 1.4vw;
  font-size: 2.1vw; font-weight: 600;
  box-shadow: 0 0.4vw 0 rgba(0, 0, 0, 0.3);
  transition: opacity 0.4s, transform 0.4s;
}
.n-option.o-pink { background: #FF3EA5; }
.n-option.o-violet { background: #8B5CF6; }
.n-option.o-cyan { background: #0E7490; }
.n-option.o-yellow { background: #B45309; }
.n-option.right { background: #4D7C0F; outline: 0.35vw solid #A3E635; transform: scale(1.04); }
.n-option.wrong { opacity: 0.35; }
.n-shape { width: 3vw; height: 3vw; border-radius: 50%; background: rgba(0, 0, 0, 0.25); display: flex; align-items: center; justify-content: center; flex: none; }
.n-shape svg { width: 1.8vw; height: 1.8vw; }
.n-otext { flex: 1; }
.n-who { display: flex; gap: 0.3vw; width: 100%; padding-left: 4.2vw; }

.n-timebar { margin: auto 6vw 0; height: 1.2vw; border-radius: 999px; background: rgba(27, 11, 58, 0.6); overflow: hidden; }
.n-timebar-fill { height: 100%; width: 100%; border-radius: 999px; background: linear-gradient(90deg, #22D3EE, #A3E635); }
.n-timebar-fill.low { background: linear-gradient(90deg, #FF5470, #FB923C); }

.n-answered { display: flex; gap: 0.6vw; }
.n-ans { opacity: 0.3; transition: opacity 0.2s, transform 0.2s; }
.n-ans.on { opacity: 1; transform: translateY(-0.4vw); }

.n-buzzcall { margin: 3vw auto 0; font-size: 4vw; color: #FFD23F; animation: n-pulse 0.8s ease-in-out infinite; }
.n-buzzer { display: flex; align-items: center; justify-content: center; gap: 2vw; margin-top: 1vw; }
.n-buzzer-name { font-size: 4.4vw; }
.n-miss { display: flex; align-items: center; justify-content: center; gap: 1vw; margin-top: 1vw; font-size: 1.8vw; color: #FF8FA3; }
@keyframes n-pulse { 50% { transform: scale(1.08); } }

/* Kvickdraget */
.n-wait { color: rgba(255, 255, 255, 0.85); animation: n-breathe 1.6s ease-in-out infinite; }
.n-now { font-size: 12vw; color: #22D3EE; animation: n-pop 0.25s ease-out; }
@keyframes n-breathe { 50% { opacity: 0.45; } }

/* Prick */
.n-clock { font-size: 13vw; font-variant-numeric: tabular-nums; }
.n-clock.hidden { color: rgba(255, 255, 255, 0.25); }

/* Hönsa ur */
.n-pot { margin-top: 1vw; text-align: center; }
.n-pot-value { font-size: 9vw; color: #FFD23F; font-variant-numeric: tabular-nums; }
.n-holders { margin-top: auto; display: flex; justify-content: center; gap: 1.4vw; }
.n-holder { display: flex; flex-direction: column; align-items: center; gap: 0.3vw; font-size: 1.5vw; font-weight: 700; transition: transform 0.3s, opacity 0.3s; }
.n-holder:not(.out) .n-avatar { animation: n-shake 0.15s linear infinite; }
.n-holder.out { transform: translateY(-1vw); color: #A3E635; }
@keyframes n-shake { 25% { transform: translateX(-0.12vw); } 75% { transform: translateX(0.12vw); } }

/* Spurten */
.n-go { margin: 1vw auto 0; font-size: 6vw; color: #FFD23F; animation: n-go 0.9s ease-out forwards; }
@keyframes n-go { 0% { transform: scale(0.4); opacity: 0; } 20% { transform: scale(1.2); opacity: 1; } 70% { opacity: 1; } 100% { transform: scale(1); opacity: 0; } }

/* Finalen */
.n-bets { display: flex; gap: 1.6vw; margin: 1vw 0; }
.n-bet { padding: 1vw 2vw; border-radius: 1.2vw; background: rgba(27, 11, 58, 0.65); border: 0.2vw solid #FFD23F; font-size: 2.6vw; font-weight: 700; }

/* Resultatrader */
.n-rows { display: flex; flex-direction: column; gap: 0.8vw; margin: 0 auto; width: 64vw; }
.n-row {
  display: flex; align-items: center; gap: 1.2vw;
  padding: 0.7vw 1.4vw; border-radius: 1.2vw;
  background: rgba(27, 11, 58, 0.86);
  font-size: 1.9vw; font-weight: 600;
  animation: n-slide 0.45s ease-out both;
}
.n-row:nth-child(2) { animation-delay: 0.1s; } .n-row:nth-child(3) { animation-delay: 0.2s; }
.n-row:nth-child(4) { animation-delay: 0.3s; } .n-row:nth-child(5) { animation-delay: 0.4s; }
.n-row:nth-child(6) { animation-delay: 0.5s; } .n-row:nth-child(7) { animation-delay: 0.6s; } .n-row:nth-child(8) { animation-delay: 0.7s; }
.n-row.bad { color: #FF8FA3; }
.n-row-place { width: 2.6vw; text-align: center; font-weight: 700; color: #FFD23F; }
.n-row-name { flex: 1; }
.n-row-note { color: rgba(255, 255, 255, 0.75); font-weight: 500; }
.n-row-note small { font-size: 1.4vw; }
.n-row-pts { width: 7vw; text-align: right; font-weight: 700; }
.n-row-pts.up, .n-gain.up, .n-bar-gain.up { color: #A3E635; }
.n-row-pts.down, .n-gain.down, .n-bar-gain.down { color: #FF5470; }

.n-gains { margin-top: auto; display: flex; justify-content: center; flex-wrap: wrap; gap: 1vw; }
.n-gain { display: flex; align-items: center; gap: 0.5vw; padding: 0.4vw 1vw 0.4vw 0.4vw; border-radius: 999px; background: rgba(27, 11, 58, 0.7); font-size: 1.7vw; font-weight: 700; }

/* Ställning */
.n-bars { display: flex; flex-direction: column; gap: 0.9vw; width: 72vw; margin: 0 auto; }
.n-bar-row {
  display: flex; align-items: center; gap: 1.2vw;
  padding: 0.6vw 1.2vw; border-radius: 1.2vw; background: rgba(27, 11, 58, 0.86);
  font-size: 1.9vw; font-weight: 600;
  animation: n-slide 0.5s ease-out both;
}
.n-bar-row .n-row-name { flex: none; width: 14vw; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.n-bar { flex: 1; height: 1.4vw; border-radius: 999px; background: rgba(255, 255, 255, 0.1); overflow: hidden; }
.n-bar-fill { height: 100%; border-radius: 999px; animation: n-grow 1.2s cubic-bezier(.2, .9, .3, 1.2) both; transform-origin: left; }
.n-bar-score { width: 6vw; text-align: right; font-weight: 700; }
.n-bar-gain { width: 6vw; text-align: right; font-size: 1.5vw; }
@keyframes n-grow { from { transform: scaleX(0); } to { transform: scaleX(1); } }

/* Prispall: namnen ovanför 3D-pallen */
.n-podium { margin-top: auto; display: flex; justify-content: center; align-items: flex-end; gap: 4vw; height: 30vh; }
.n-podium-spot { width: 16vw; text-align: center; animation: n-slide 0.6s ease-out both; }
.n-podium-spot.p1 { order: 2; animation-delay: 1.6s; }
.n-podium-spot.p2 { order: 1; animation-delay: 1s; }
.n-podium-spot.p3 { order: 3; animation-delay: 0.6s; }
.n-podium-name { font-size: 2.2vw; font-weight: 700; }
.n-podium-score { font-size: 1.6vw; color: #FFD23F; }
.n-podium-place { font-size: 3vw; font-weight: 700; color: rgba(255, 255, 255, 0.5); }

/* Inträdesanimationer */
.n-pop { animation: n-pop 0.6s cubic-bezier(.2, 1.4, .4, 1) both; }
.n-in { animation: n-slide 0.5s ease-out both; }
.n-in2 { animation: n-slide 0.5s ease-out 0.35s both; }
.n-in3 { animation: n-slide 0.5s ease-out 0.7s both; }
@keyframes n-pop { from { transform: scale(0.3); opacity: 0; } to { transform: scale(1); opacity: 1; } }
@keyframes n-slide { from { transform: translateY(2vw); opacity: 0; } to { transform: translateY(0); opacity: 1; } }

/* Reservscen utan WebGL2: avatarer längst ner som studsar */
.n-stage2d {
  position: absolute; left: 0; right: 0; bottom: 3vw;
  display: flex; justify-content: center; gap: 2vw;
  transition: background 0.15s;
}
.n-stage2d[data-scene="podium"], .n-stage2d[data-scene="standings"] { opacity: 0.25; }
.n-fig { transition: transform 0.3s; }
.n-fig.act-jump, .n-fig.act-buzz { animation: n-jump 0.6s ease-out; }
.n-fig.act-cheer { animation: n-jump 0.5s ease-out 3; }
.n-fig.act-sad, .n-fig.act-fall { animation: n-sad 1.2s ease-out; }
.n-fig.act-wave, .n-fig.act-spin { animation: n-spin 0.8s ease-in-out; }
@keyframes n-jump { 40% { transform: translateY(-3vw) scale(1.1); } }
@keyframes n-sad { 30%, 80% { transform: rotate(-25deg) translateY(1vw); opacity: 0.6; } }
@keyframes n-spin { 50% { transform: rotate(180deg) scale(1.1); } 100% { transform: rotate(360deg); } }