/* «Filmstudioet»: kamera, filmstripe og avspiller i kveldsstilen (mørkt glass, neonglød). Alle klasser starter med studio-.
   Liggende: søkeren til venstre, knappene til høyre, filmstripen under. Stående: under hverandre. */

:root { --studio-neon: linear-gradient(120deg, var(--rosa), var(--lilla) 38%, var(--himmel) 70%, var(--mynte)); }
[class*="studio-"][hidden] { display: none !important; }                /* display i reglene under skal ikke overstyre hidden */

/* ── Oppsett ───────────────────────────────────────────────────────────── */
.studio { --forhold: 1.3333; flex: 1 0 auto; display: grid; gap: 14px 18px; min-height: 0; }
.studio-sokboks { grid-area: sok; min-width: 0; min-height: 0; display: grid; place-items: center; }
.studio-knapper { grid-area: knapper; min-width: 0; display: flex; flex-direction: column; gap: 12px; }
.studio-rullboks { grid-area: rull; min-width: 0; display: flex; flex-direction: column; gap: 8px; }
.studio-valg { grid-area: valg; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.studio-utloser { grid-area: utloser; }
.studio-angre { grid-area: angre; }
.studio-aksjon { grid-area: aksjon; display: grid; gap: 12px; }

@media (orientation: landscape) {
  .studio { flex: 1 1 0; grid-template-columns: minmax(0, 1fr) 300px; grid-template-rows: minmax(512px, 1fr) auto; grid-template-areas: "sok knapper" "rull rull"; }
  .studio-sokboks { container-type: size; }                             /* søkeren fyller plassen, men beholder formen (4:3 eller 16:9) */
  .studio-skjerm { width: min(calc(100cqw - 2 * var(--rand)), calc((100cqh - 2 * var(--rand)) * var(--forhold))); }
  .studio-knapper { justify-content: center; }
}
@media (orientation: landscape) and (max-height: 790px) {              /* lavere iPad (mini): tettere knapper, så alt fortsatt får plass */
  .studio { grid-template-rows: minmax(430px, 1fr) auto; }
  .studio-knapper { gap: 8px; }
  .studio-knapper .knapp.stor { min-height: 64px; padding-block: 8px; font-size: 24px; }
  .studio-utloser { width: 108px; height: 108px; }
  .studio-bryter { min-height: 80px; }
}
@media (orientation: portrait) {
  .studio { grid-template-columns: minmax(0, 1fr); grid-template-areas: "sok" "knapper" "rull"; }
  .studio-kamera, .studio-skjerm { width: 100%; }
  .studio-knapper { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; grid-template-areas: "valg utloser angre" "aksjon aksjon aksjon"; align-items: center; gap: 14px; }
  .studio-valg { grid-template-columns: repeat(3, 98px); }
  .studio-aksjon { grid-template-columns: 1fr 1fr; }
}

/* ── Toppen: hjelp og ny film ───────────────────────────────────────────── */
.studio-ikon { font-size: 28px; }
.studio-ny { min-height: 60px; padding: 0 20px; font-size: 20px; white-space: nowrap; }

/* ── Søkeren: kameraet i en tykk ramme med neonkant ─────────────────────── */
.studio-kamera {
  --pad: 16px; --kant: 3px; --rand: calc(var(--pad) + var(--kant));
  position: relative; padding: var(--pad); border: var(--kant) solid transparent; border-radius: 38px;
  background: linear-gradient(180deg, #2a2142, #120e1b) padding-box, var(--studio-neon) border-box;
  box-shadow: 0 0 34px rgba(157, 107, 255, 0.42), 0 0 84px rgba(255, 79, 163, 0.16), var(--leke);
}
.studio-skjerm { position: relative; overflow: hidden; isolation: isolate; border-radius: 24px; background: #07050d; aspect-ratio: var(--forhold); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.1); }
.studio-video, .studio-lok { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.studio-lok { opacity: 0.35; pointer-events: none; }                    /* forrige bilde som spøkelse */
.studio-skjerm::after {                                                 /* søkerhjørner */
  content: ""; position: absolute; inset: 14px; z-index: 2; pointer-events: none; --m: 3px; --l: 34px; --c: rgba(255, 255, 255, 0.8);
  background:
    linear-gradient(var(--c), var(--c)) top left / var(--l) var(--m), linear-gradient(var(--c), var(--c)) top left / var(--m) var(--l),
    linear-gradient(var(--c), var(--c)) top right / var(--l) var(--m), linear-gradient(var(--c), var(--c)) top right / var(--m) var(--l),
    linear-gradient(var(--c), var(--c)) bottom left / var(--l) var(--m), linear-gradient(var(--c), var(--c)) bottom left / var(--m) var(--l),
    linear-gradient(var(--c), var(--c)) bottom right / var(--l) var(--m), linear-gradient(var(--c), var(--c)) bottom right / var(--m) var(--l);
  background-repeat: no-repeat;
}

/* Kameraet er av (grått felt) eller starter */
.studio-felt { position: absolute; inset: 0; z-index: 2; display: grid; place-content: center; justify-items: center; gap: 14px; padding: 28px; text-align: center; background: radial-gradient(70% 70% at 50% 40%, #1d1730, #0c0a13); }
.studio-felt.av { background: repeating-linear-gradient(135deg, #2c2935 0 22px, #28252f 22px 44px); }
.studio-felt-emoji { font-size: 64px; line-height: 1; filter: drop-shadow(0 0 18px rgba(157, 107, 255, 0.6)); }
.studio-felt.av .studio-felt-emoji { filter: grayscale(1) opacity(0.7); }
.studio-felt-tekst { margin: 0; max-width: 520px; font-size: 24px; font-weight: 700; line-height: 1.25; color: #fff; }

/* Merker i hjørnene: antall bilder og «live» */
.studio-merke, .studio-tally { position: absolute; top: 14px; z-index: 3; display: inline-flex; align-items: center; gap: 8px; min-height: 40px; padding: 0 14px; border-radius: 99px; background: rgba(12, 10, 19, 0.72); border: 1px solid var(--linje); color: #fff; font-family: var(--font-tittel); font-style: normal; font-size: 19px; font-weight: 800; letter-spacing: 0.04em; text-transform: uppercase; }
.studio-merke { left: 14px; }
.studio-tally { right: 14px; color: var(--svak); }
.studio-tally::before { content: ""; width: 12px; height: 12px; border-radius: 50%; background: #6d6480; }
.studio-tally::after { content: "av"; }
.studio-skjerm.live .studio-tally { color: #fff; }
.studio-skjerm.live .studio-tally::before { background: var(--rod); box-shadow: 0 0 12px 2px var(--rod); animation: studio-blunk 1.6s ease-in-out infinite; }
.studio-skjerm.live .studio-tally::after { content: "live"; }
@keyframes studio-blunk { 50% { opacity: 0.35; } }

/* Hjelpelinjen (lukkes, og kommer tilbake med ❓ øverst) */
.studio-hjelp { position: absolute; left: 12px; right: 12px; bottom: 12px; z-index: 4; display: flex; align-items: center; gap: 10px; padding: 8px 8px 8px 16px; border-radius: 22px; background: rgba(18, 14, 27, 0.88); border: 1px solid var(--linje); box-shadow: 0 0 24px rgba(157, 107, 255, 0.3); }
.studio-hjelp ol { flex: 1; min-width: 0; margin: 0; padding: 0; list-style: none; counter-reset: s; display: flex; flex-wrap: wrap; gap: 6px 12px; font-size: 17px; font-weight: 700; line-height: 1.2; color: #fff; }
.studio-hjelp li { display: flex; align-items: center; gap: 6px; counter-increment: s; }
.studio-hjelp li:last-child { flex: 1 0 100%; }                          /* de tre korte på første linje, den lange på neste */
.studio-hjelp li::before { content: counter(s); flex: none; width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; background: linear-gradient(135deg, #d6338a, #7a4de0); color: #fff; font-size: 15px; font-weight: 800; }
.studio-hjelp b { color: var(--mynte); }
.studio-hjelp-lukk { flex: none; width: 60px; height: 60px; border-radius: 18px; border: 1px solid var(--linje); background: rgba(255, 255, 255, 0.08); color: #fff; font-size: 22px; font-weight: 900; }

/* Nedtelling og blink */
.studio-nedtelling { position: absolute; inset: 0; z-index: 5; display: grid; place-items: center; font-size: min(46vh, 300px); line-height: 1; pointer-events: none;
  background: radial-gradient(circle min(27vh, 180px) at 50% 50%, rgba(12, 10, 19, 0.62) 94%, transparent 100%); }   /* mørk skive: hvitt tall må være lesbart også mot et lyst kamerabilde */
.studio-nedtelling.tikk { animation: studio-tikk 1s ease-out; }
@keyframes studio-tikk { 0% { transform: scale(1.7); opacity: 0; } 25% { transform: scale(1); opacity: 1; } 100% { transform: scale(0.85); opacity: 0.55; } }
.studio-blink { position: absolute; inset: 0; z-index: 6; background: #fff; opacity: 0; pointer-events: none; }
.studio-blink.go { animation: studio-blink 0.4s ease-out; }
@keyframes studio-blink { 0% { opacity: 0.95; } 100% { opacity: 0; } }

/* ── Utløseren: stor, rund og glinsende, med neonring ───────────────────── */
.studio-utloser {
  position: relative; justify-self: center; align-self: center; flex: none; width: 124px; height: 124px; padding: 0; border: 0; border-radius: 50%; cursor: pointer; display: grid; place-items: center;
  background: conic-gradient(from 200deg, var(--rosa), var(--lilla), var(--himmel), var(--mynte), var(--rosa));
  box-shadow: 0 0 34px rgba(255, 79, 163, 0.55), 0 0 76px rgba(157, 107, 255, 0.3), 0 14px 30px rgba(0, 0, 0, 0.5);
  transition: filter 0.15s; touch-action: manipulation; animation: studio-puls 2.8s ease-in-out infinite;
}
.studio-utloser::before { content: ""; position: absolute; inset: 7px; border-radius: 50%; background: #120e1b; }
.studio-utloser::after { content: ""; position: absolute; inset: 14px; border-radius: 50%; background: radial-gradient(circle at 35% 28%, #ffa6d3 0%, var(--rosa) 42%, #b3206a 100%); box-shadow: inset 0 -7px 12px rgba(0, 0, 0, 0.3), inset 0 4px 6px rgba(255, 255, 255, 0.5); }
.studio-utloser-emoji { position: relative; z-index: 1; font-size: 54px; line-height: 1; filter: drop-shadow(0 3px 4px rgba(0, 0, 0, 0.35)); }
.studio-utloser:active { animation: none; transform: scale(0.93); filter: brightness(1.15); }
.studio-utloser.teller::after { background: radial-gradient(circle at 35% 28%, #b8a2ff 0%, var(--lilla) 45%, #4a2aa8 100%); }
@keyframes studio-puls { 50% { transform: scale(1.05); } }

/* ── Brytere: forrige bilde, selvutløser, kamera ────────────────────────── */
.studio-bryter { min-width: 0; min-height: 92px; padding: 8px 4px; border-radius: 20px; border: 1px solid var(--linje); background: rgba(255, 255, 255, 0.07); box-shadow: var(--leke); color: #fff; cursor: pointer; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; transition: transform 0.18s var(--fjar), box-shadow 0.18s, border-color 0.18s; touch-action: manipulation; }
.studio-bryter:active { transform: scale(0.94); }
.studio-bryter-emoji { font-size: 28px; line-height: 1; }
.studio-bryter-navn { font-family: var(--font-tittel); font-size: 16px; font-weight: 800; line-height: 1.05; text-align: center; text-transform: uppercase; letter-spacing: 0.02em; }
.studio-pille { padding: 2px 11px; border-radius: 99px; background: rgba(255, 255, 255, 0.12); color: var(--svak); font-family: var(--font-tittel); font-size: 14px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.06em; }
.studio-bryter.paa { border-color: var(--mynte); background: rgba(34, 224, 176, 0.12); box-shadow: 0 0 20px rgba(34, 224, 176, 0.45), var(--leke); }
.studio-bryter.paa .studio-pille { background: var(--mynte); color: var(--mork); }
.knapp.studio-vent { opacity: 0.55; filter: grayscale(0.45); }          /* ikke nok bilder ennå: ser avslått ut, men svarer fortsatt med en beskjed */
.knapp.studio-rod { --f1: #ff7a93; --f2: var(--rod); }

/* ── Filmstripen: en ekte filmrull med hull i kantene ───────────────────── */
.studio-teller { font-family: var(--font-tittel); font-size: 24px; font-weight: 800; letter-spacing: 0.03em; text-transform: uppercase; color: #fff; text-shadow: 0 0 18px rgba(34, 224, 176, 0.5); }
.studio-rull { overflow-x: auto; overflow-y: hidden; border-radius: 18px; background: #07050d; border: 1px solid var(--linje); box-shadow: var(--leke), 0 0 28px rgba(157, 107, 255, 0.22); -webkit-overflow-scrolling: touch; scrollbar-width: none; }
.studio-rull::-webkit-scrollbar { display: none; }
.studio-rull-inn {
  --hull: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='26' height='14'%3E%3Crect x='5' y='2' width='16' height='10' rx='3.5' fill='%23fff' fill-opacity='.22'/%3E%3C/svg%3E");
  display: flex; align-items: center; gap: 10px; width: max-content; min-width: 100%; min-height: 128px; padding: 22px 16px;
  background: var(--hull) repeat-x left 0 top 4px / 26px 14px, var(--hull) repeat-x left 0 bottom 4px / 26px 14px;
}
.studio-rute { position: relative; flex: none; height: 84px; width: calc(84px * var(--forhold)); min-width: 64px; padding: 0; border: 0; border-radius: 10px; overflow: hidden; background: #1b1527; box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.7); cursor: pointer; touch-action: manipulation; }
.studio-rute img { display: block; width: 100%; height: 100%; object-fit: cover; }
.studio-rute.sist { box-shadow: 0 0 0 3px var(--rosa), 0 0 18px 3px rgba(255, 79, 163, 0.7); }
.studio-rute.ny { animation: studio-ny-rute 0.45s var(--fjar); }
@keyframes studio-ny-rute { from { transform: scale(0.3); opacity: 0; } }
.studio-nr { position: absolute; left: 4px; bottom: 4px; min-width: 24px; padding: 1px 7px; border-radius: 8px; background: rgba(12, 10, 19, 0.85); color: #fff; font-size: 14px; font-weight: 800; text-align: center; }
.studio-rull-tom { flex: 1; align-self: stretch; display: grid; place-items: center; min-height: 84px; border-radius: 12px; border: 2px dashed rgba(184, 172, 205, 0.4); color: var(--svak); font-family: var(--font-tittel); font-size: 20px; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase; }

/* ── Avspilleren: fullskjerm ────────────────────────────────────────────── */
.studio-spiller { position: fixed; inset: 0; z-index: 50; display: flex; flex-direction: column; gap: 14px; padding: calc(var(--topp) + 16px) 18px calc(var(--bunn) + 16px); background: radial-gradient(70% 50% at 20% 0%, rgba(157, 107, 255, 0.35), transparent 70%), radial-gradient(60% 50% at 90% 100%, rgba(56, 194, 255, 0.25), transparent 70%), #0a0810; animation: studio-inn 0.3s var(--fjar); }
@keyframes studio-inn { from { opacity: 0; transform: scale(0.97); } }
.studio-spiller-skjerm { flex: 1; min-height: 0; display: grid; place-items: center; container-type: size; }
.studio-spiller-lerret { width: min(calc(100cqw - 8px), calc((100cqh - 8px) * var(--forhold))); aspect-ratio: var(--forhold); height: auto; border-radius: 22px; background: #000; box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.85), 0 0 50px rgba(157, 107, 255, 0.6), 0 0 110px rgba(255, 79, 163, 0.25); }
.studio-spiller-bunn { flex: none; display: grid; grid-template-columns: minmax(0, 1fr) auto auto; align-items: center; gap: 16px; }
.studio-spiller-info { display: grid; gap: 8px; min-width: 0; }
.studio-spiller-nr { font-family: var(--font-tittel); font-size: 24px; font-weight: 800; letter-spacing: 0.04em; text-transform: uppercase; color: #fff; }
.studio-spiller-bar { height: 10px; border-radius: 99px; background: rgba(255, 255, 255, 0.12); overflow: hidden; }
.studio-spiller-bar i { display: block; height: 100%; width: 0; background: var(--studio-neon); box-shadow: 0 0 12px var(--rosa); }
@media (orientation: portrait) {
  .studio-spiller-bunn { grid-template-columns: 1fr; }
  .studio-spiller-bunn .knapp { width: 100%; }
}

/* ── Fartsvelgeren (i avspilleren og i arket) ───────────────────────────── */
.studio-farter { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.studio-fart { min-width: 104px; min-height: 72px; padding: 6px 10px; border-radius: 20px; border: 1px solid var(--linje); background: rgba(255, 255, 255, 0.07); color: #fff; cursor: pointer; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; font-family: var(--font-tittel); font-size: 20px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.03em; transition: transform 0.18s var(--fjar), box-shadow 0.18s; touch-action: manipulation; }
.studio-fart:active { transform: scale(0.94); }
.studio-fart-emoji { font-size: 28px; line-height: 1; }
.studio-fart[aria-pressed="true"] { border-color: var(--himmel); background: rgba(56, 194, 255, 0.16); box-shadow: 0 0 20px rgba(56, 194, 255, 0.5); }

/* ── Arket «Lag filmen» ─────────────────────────────────────────────────── */
.studio-ferdig { display: grid; gap: 14px; }
.studio-etikett { font-family: var(--font-tittel); font-size: 22px; font-weight: 800; letter-spacing: 0.05em; text-transform: uppercase; color: var(--svak); }
.studio-tittel-felt { width: 100%; min-height: 72px; padding: 10px 20px; border-radius: 20px; border: 1px solid var(--linje); background: rgba(255, 255, 255, 0.08); color: #fff; font: 800 32px/1.1 var(--font-tittel); letter-spacing: 0.02em; outline: none; -webkit-user-select: text; user-select: text; }
.studio-tittel-felt:focus { border-color: var(--lilla); box-shadow: 0 0 0 3px rgba(157, 107, 255, 0.4), 0 0 26px rgba(157, 107, 255, 0.4); }
.studio-forslag { display: flex; flex-wrap: wrap; gap: 10px; }
.studio-forslag-knapp { min-height: 60px; padding: 0 22px; border-radius: 99px; border: 1px solid var(--linje); background: rgba(255, 255, 255, 0.07); color: #fff; font-size: 20px; font-weight: 700; cursor: pointer; touch-action: manipulation; }
.studio-forslag-knapp:active { transform: scale(0.95); }
.studio-lengde { margin: 0; font-size: 20px; font-weight: 600; color: var(--svak); }
.studio-lag { width: 100%; margin-top: 6px; }
.studio-lager { margin: 0; text-align: center; font-family: var(--font-tittel); font-size: 32px; font-weight: 800; letter-spacing: 0.03em; text-transform: uppercase; }
.studio-lager-tips { margin: 0; text-align: center; font-size: 20px; font-weight: 600; color: var(--svak); }
.studio-film-lerret { justify-self: center; width: min(100%, 560px); aspect-ratio: var(--forhold); height: auto; border-radius: 20px; background: #000; box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.2), 0 0 44px rgba(157, 107, 255, 0.45); }
@media (orientation: landscape) { .studio-film-lerret { width: min(100%, 440px); } }   /* liggende er arket lavt: alt må få plass uten rulling */
.studio-bar { height: 16px; border-radius: 99px; background: rgba(255, 255, 255, 0.1); overflow: hidden; }
.studio-bar i { display: block; height: 100%; width: 0; background: var(--studio-neon); box-shadow: 0 0 14px var(--rosa); transition: width 0.2s linear; }
.studio-klar { text-align: center; font-size: 36px; line-height: 1.05; text-shadow: 0 0 26px rgba(34, 224, 176, 0.6); }
.studio-klar-rad { display: grid; gap: 16px; align-items: center; }
.studio-klar-hoyre { display: grid; gap: 14px; align-content: center; }
.studio-film-video { justify-self: center; width: 100%; max-width: 640px; border-radius: 20px; background: #000; box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.2), 0 0 44px rgba(34, 224, 176, 0.4); }
@media (orientation: landscape) {                                       /* video til venstre, delingen til høyre: knappen skal synes uten å rulle */
  .studio-klar-rad { grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 24px; }
  .studio-klar-hoyre .studio-klar, .studio-klar-hoyre .studio-lagre-tekst { text-align: left; }
}
.studio-lagre-tekst { margin: 0; text-align: center; font-size: 22px; font-weight: 600; line-height: 1.3; color: var(--svak); }
.studio-lagre-tekst b { color: #fff; }
.studio-lagre { display: grid; }
.studio-lagre .knapp { width: 100%; }

/* Er du sikker? */
.studio-spor-bilde { display: block; width: min(100%, 520px); margin: 0 auto 16px; border-radius: 18px; box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.25), 0 0 40px rgba(255, 79, 163, 0.35); }
.studio-spor-tekst { margin: 0 0 16px; font-size: 22px; font-weight: 600; line-height: 1.3; color: var(--svak); }
.studio-spor-knapper { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }

/* Plakaten i premiere-avsløringen */
.studio-plakat { display: block; max-width: 100%; max-height: 100%; border: 3px solid transparent; border-radius: 16px; background: linear-gradient(#000, #000) padding-box, var(--studio-neon) border-box; box-shadow: 0 0 44px rgba(255, 79, 163, 0.55), 0 0 90px rgba(157, 107, 255, 0.35); transform: rotate(-2deg); }