/* Nora & Chris · 15. mai 2027
   Siden er et teater (10.11.2026, carte blanche fra Chris): kappe med lysrekke øverst, sceneteppe bundet opp på
   hver side, scenegulv nederst, og billetten midt på scenen foran et bakteppe av grønn fløyel. Alt på én skjerm.
   Forsiden er invitasjonen, et trykk snur billetten, og baksiden er svarkupongen («Det vi trenger fra deg nå»).
   Forestillingen: anda opptrer foran det lukkede teppet, og teppet følger henne til side og blir hengende.
   Palett (Chris 4.11.2026): grønt, gull og rødt. Krem er papiret. Verdiene er forslag til DESIGN.md. */

@font-face{font-family:Fraunces;src:url('/fraunces.ttf') format('truetype');font-weight:400;font-display:swap}
@font-face{font-family:DM;src:url('/dm-sans.ttf') format('truetype');font-weight:400;font-display:swap}

:root{
  --gronn:#0d3338;
  --gronn-dyp:#06232a;
  --gronn-lys:#164c52;
  --rod:#6b1222;
  --rod-dyp:#3f0812;
  --rod-lys:#9a3242;
  --gull:#c9a060;
  --gull-dyp:#9c7a3e;
  --krem:#fbf0d9;
  --krem-lys:#fff8ea;
  --krem-dyp:#efdfc0;
  --blekk:#552333;
  --blekk-dempet:#6e4050;
  --kant:#8d6470;
  --display:Fraunces,Georgia,'Times New Roman',serif;
  --body:DM,'Segoe UI',Helvetica,Arial,sans-serif;
  --radius:6px;
  /* Høydeenheten: én hundredel av den synlige høyden. Settes her til nettleserens mål, og overstyres av
     invitasjon.js med det som faktisk er synlig (visualViewport), så bunnen aldri havner under verktøylinjer. */
  --u:1vh;
  /* teateret: kappas høyde, scenegulvets høyde og lufta på hver side av billetten */
  --kappe:clamp(40px,calc(var(--u)*7.2),92px);
  --gulv:clamp(34px,calc(var(--u)*6.4),70px);
  --side:max(22px,5.6vw);
  /* perforeringen: hullradius og avstand mellom hullene */
  --hull:5px;
  --steg:17px;
  color-scheme:dark;
}

@supports (height:1svh){:root{--u:1svh}}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;position:relative;min-height:calc(var(--u)*100);overflow-x:clip;
  background:var(--gronn-dyp);
  background-image:
    radial-gradient(90% calc(var(--u)*46) at 50% 0%,var(--gronn-lys) 0%,var(--gronn) 40%,transparent 78%),
    radial-gradient(70% calc(var(--u)*30) at 50% 100%,#0b3036 0%,transparent 80%),
    repeating-linear-gradient(90deg,rgba(255,255,255,.014) 0 3px,transparent 3px 9px);
  color:var(--krem);font:16px/1.5 var(--body);-webkit-font-smoothing:antialiased;
}
body::after{
  content:"";position:fixed;inset:0;z-index:30;pointer-events:none;opacity:.055;mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)'/%3E%3C/svg%3E");
}
[hidden]{display:none!important}
button,input{font:inherit;color:inherit}
button{cursor:pointer;touch-action:manipulation;-webkit-tap-highlight-color:transparent}
a{color:inherit}
:focus-visible{outline:3px solid var(--gull);outline-offset:4px}
h1,h2,p,dl,dd{margin:0}
h1,h2{font-family:var(--display);font-weight:400;text-wrap:balance}
b{font-weight:400}
small{font-size:inherit}

/* ---------- Siden: én skjerm, og den skjermen er en scene ----------
   Lagene, bakfra: bakteppet (body) · enhjørningene (1) · billetten (2) · teateret: gulv, sceneteppe, kappe (3) ·
   linja på scenegulvet (4) · anda i hjørnet (6) · mørket i salen (10) · forestillingen (20) · filmkorn (30). */
main{
  position:relative;z-index:2;max-width:calc(560px + 2*var(--side));margin:0 auto;min-height:calc(var(--u)*100);
  padding:calc(var(--kappe) + 2px) max(var(--side),env(safe-area-inset-right,0px)) calc(var(--gulv) + 2px) max(var(--side),env(safe-area-inset-left,0px));
  display:flex;flex-direction:column;justify-content:center;pointer-events:none;
}
main>*{pointer-events:auto}
/* lufta over og under billetten */
.eng{flex:1 1 0;min-height:4px;pointer-events:none}

/* ---------- Teateret ---------- */
#teater{position:fixed;left:0;right:0;top:0;height:calc(var(--u)*100);z-index:4;pointer-events:none}
/* til teateret er tegnet: skjul siden bak et mørkt forheng, så billetten ikke blinker fram før teppet er på plass */
#teater:not(.klar)::before{content:"";position:absolute;inset:0;background:var(--gronn-dyp)}
#teater svg{position:absolute;display:block;overflow:visible}
.kappe{left:0;top:0;width:100%;height:calc(var(--kappe)*1.3)}
.teppe{top:calc(var(--kappe)*.5);height:calc(100% - var(--kappe)*.5 - var(--gulv)*.55);width:calc(50% + 12px)}
.teppe-v{left:0;transform-origin:0 0;animation:svai-v 9s ease-in-out infinite}
.teppe-h{right:0;transform:scaleX(-1);transform-origin:50% 0;animation:svai-h 9s ease-in-out -3s infinite}
/* stoffet henger aldri helt stille */
@keyframes svai-v{0%,100%{transform:skewX(0deg)}50%{transform:skewX(.4deg)}}
@keyframes svai-h{0%,100%{transform:scaleX(-1) skewX(0deg)}50%{transform:scaleX(-1) skewX(.4deg)}}
.gulv{
  position:absolute;left:0;right:0;bottom:0;height:var(--gulv);
  background:
    linear-gradient(180deg,rgba(255,214,150,.16),transparent 55%),
    repeating-linear-gradient(90deg,rgba(0,0,0,.22) 0 1.5px,transparent 1.5px 86px),
    repeating-linear-gradient(180deg,rgba(0,0,0,.28) 0 1px,transparent 1px 13px),
    linear-gradient(180deg,#6a3d24,#3b2114 60%,#24130b);
  border-top:2px solid #d9ad56;
  box-shadow:0 -1px 0 #6f4d18,0 -14px 30px rgba(0,0,0,.5),inset 0 2px 0 rgba(255,235,180,.35);
}
/* rampelyset: varmt lys som stråler opp fra forkanten av scenen når lysene er tent */
.gulv::before{
  content:"";position:absolute;left:0;right:0;bottom:100%;height:calc(var(--gulv)*1.7);opacity:0;transition:opacity 1.6s ease;
  background:radial-gradient(60% 100% at 50% 100%,rgba(255,206,130,.2),transparent 70%);
}
.gulv.tent::before{opacity:1}
/* rampelysene: en rekke små lamper langs forkanten av scenen */
.gulv::after{
  content:"";position:absolute;left:0;right:0;top:-6px;height:10px;opacity:.3;transition:opacity 1.2s ease;
  background:radial-gradient(circle at 50% 50%,#fff3cf 0 1.6px,rgba(255,205,120,.55) 2.6px,transparent 5px) 50% 0/44px 10px repeat-x;
}
.gulv.tent::after{opacity:1}
/* lyspærene på kappa: glør svakt i mørket, tennes og løper når teppet går */
.paere{opacity:.3;transition:opacity 1.2s ease}
.kappe.tent .paere{opacity:1;animation:paere 2.4s ease-in-out infinite}
@keyframes paere{0%,100%{opacity:1}50%{opacity:.5}}
/* mørket i salen før forestillingen */
#morke{position:fixed;inset:0;z-index:10;pointer-events:none;background:#020708;opacity:0}

/* ---------- Kortet som snus ---------- */
.kort{position:relative;z-index:0;perspective:1600px;flex:none}
.kort::before{ /* skyggen ligger bak, fordi masken klipper bort skygge på selve papiret */
  content:"";position:absolute;z-index:-1;left:10px;right:10px;top:12px;bottom:-4px;border-radius:12px;
  box-shadow:0 34px 60px -22px rgba(0,0,0,.75),0 12px 24px -12px rgba(0,0,0,.5);
}
.flate{
  display:grid;transform-style:preserve-3d;
  transition:transform .85s cubic-bezier(.4,.1,.2,1);
}
.flate>*{grid-area:1/1;backface-visibility:hidden;-webkit-backface-visibility:hidden}
.kupong{transform:rotateY(180deg)}
.kort.snudd .flate{transform:rotateY(180deg)}
.ticket{cursor:pointer}
.kort.snudd .ticket{cursor:default}

/* Billett og kupong: krem papir med messingramme og perforering rundt hele kanten */
.ticket,.kupong{
  position:relative;background:var(--krem);color:var(--blekk);
  background-image:linear-gradient(180deg,var(--krem-lys),var(--krem) 30%,var(--krem) 85%,var(--krem-dyp));
  display:flex;flex-direction:column;
  -webkit-mask:
    linear-gradient(#000,#000) center/calc(100% - 2*var(--hull)) calc(100% - 2*var(--hull)) no-repeat,
    radial-gradient(circle at 50% 0,transparent var(--hull),#000 calc(var(--hull) + .6px)) top/var(--steg) var(--hull) round no-repeat,
    radial-gradient(circle at 50% 100%,transparent var(--hull),#000 calc(var(--hull) + .6px)) bottom/var(--steg) var(--hull) round no-repeat,
    radial-gradient(circle at 0 50%,transparent var(--hull),#000 calc(var(--hull) + .6px)) left/var(--hull) var(--steg) no-repeat round,
    radial-gradient(circle at 100% 50%,transparent var(--hull),#000 calc(var(--hull) + .6px)) right/var(--hull) var(--steg) no-repeat round;
  mask:
    linear-gradient(#000,#000) center/calc(100% - 2*var(--hull)) calc(100% - 2*var(--hull)) no-repeat,
    radial-gradient(circle at 50% 0,transparent var(--hull),#000 calc(var(--hull) + .6px)) top/var(--steg) var(--hull) round no-repeat,
    radial-gradient(circle at 50% 100%,transparent var(--hull),#000 calc(var(--hull) + .6px)) bottom/var(--steg) var(--hull) round no-repeat,
    radial-gradient(circle at 0 50%,transparent var(--hull),#000 calc(var(--hull) + .6px)) left/var(--hull) var(--steg) no-repeat round,
    radial-gradient(circle at 100% 50%,transparent var(--hull),#000 calc(var(--hull) + .6px)) right/var(--hull) var(--steg) no-repeat round;
}
.ramme{
  flex:1;margin:calc(var(--hull) + 8px) calc(var(--hull) + 8px) 0;
  border:1px solid var(--gull);outline:1px solid rgba(207,170,112,.4);outline-offset:3px;
  padding:clamp(14px,calc(var(--u)*2.4),26px) clamp(16px,4vw,28px) clamp(12px,calc(var(--u)*2),22px);text-align:center;
}
/* avrivningen nederst: stiplet linje og stubb */
.stubb{
  display:flex;justify-content:space-between;align-items:center;gap:12px;
  margin:10px calc(var(--hull) + 8px) var(--hull);padding:9px 6px 7px;
  border-top:2px dashed rgba(85,35,51,.28);
  font-size:11.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--blekk-dempet);
}
.snu{
  background:none;border:0;padding:8px 2px;min-height:40px;letter-spacing:.12em;text-transform:uppercase;font-size:11.5px;
  color:var(--rod);text-decoration:underline;text-underline-offset:4px;text-decoration-color:rgba(107,18,34,.45);
}
.snu:hover{text-decoration-color:var(--rod)}

/* Forsiden: innholdet står midt i ramma, siden baksiden (skjemaet) bestemmer høyden */
.ticket .ramme{display:flex;flex-direction:column;justify-content:center}
.over{font-family:var(--display);font-size:clamp(16px,calc(var(--u)*2.4),21px);color:var(--blekk-dempet)}
h1{font-size:clamp(38px,min(10.5vw,calc(var(--u)*7.2)),70px);line-height:1.02;letter-spacing:-.01em;margin-top:4px}
h1:focus,h1:focus-visible{outline:none}
.og{color:var(--gull-dyp);font-size:.78em;padding:0 .04em}
.ukedag{margin-top:clamp(8px,calc(var(--u)*1.6),18px);font-size:14px;color:var(--blekk-dempet)}
.dato{display:flex;justify-content:center;align-items:center;gap:14px;margin:0 0 clamp(6px,calc(var(--u)*1.2),12px);font-family:var(--display)}
.tall{font-size:clamp(84px,min(28vw,calc(var(--u)*15)),144px);line-height:.86;letter-spacing:-.06em;color:var(--rod);font-variant-numeric:lining-nums}
.mnd{display:flex;flex-direction:column;text-align:left;font-size:clamp(21px,calc(var(--u)*3.2),27px);line-height:1.15;border-left:1px solid var(--gull);padding-left:14px;color:var(--blekk)}
.mnd b{color:var(--blekk-dempet)}
.sted{font-size:clamp(13.5px,calc(var(--u)*1.9),15.5px);line-height:1.5}
/* Billetten sveipes rundt (Chris 10.11: ingen knapp – «sveipe den rundt, vis på en bedre måte»). Det vises ved at
   billetten selv gløtter på baksiden, og med én dempet linje. Knappen finnes bare for tastatur og skjermleser. */
.sveip{display:flex;align-items:center;justify-content:center;gap:9px;margin-top:clamp(8px,calc(var(--u)*1.6),15px);font-size:13px;line-height:1.3;color:var(--blekk-dempet);transition:opacity .6s ease}
/* to små haker som vugger mot venstre: «dra hit» */
.sveip-pil{position:relative;flex:none;width:15px;height:10px;animation:vugg 1.8s ease-in-out infinite}
.sveip-pil::before,.sveip-pil::after{content:"";position:absolute;top:1.5px;width:6px;height:6px;border-left:1.5px solid var(--gull-dyp);border-bottom:1.5px solid var(--gull-dyp);transform:rotate(45deg)}
.sveip-pil::before{left:2px}
.sveip-pil::after{left:8px}
@keyframes vugg{0%,100%{transform:translateX(2px)}50%{transform:translateX(-3px)}}
.kort.rort .sveip{opacity:.6}
.kort.rort .sveip-pil{animation:none}
.kun-fokus{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0;padding:0;background:none}
.kun-fokus:focus-visible{right:calc(var(--hull) + 16px);top:calc(var(--hull) + 16px);width:auto;height:auto;clip:auto;overflow:visible;z-index:2;
  padding:8px 12px;background:var(--krem-lys);border:1px solid var(--kant);border-radius:4px;color:var(--rod);font-size:13px}
/* Nedtellingen: fire like brede kolonner med en tynn gullstrek mellom, så tallene aldri flyter sammen */
.nedtelling{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));width:min(100%,292px);margin:clamp(10px,calc(var(--u)*1.9),18px) auto 0;padding-top:clamp(9px,calc(var(--u)*1.6),14px);border-top:1px solid rgba(207,170,112,.5)}
.nedtelling>div{display:flex;flex-direction:column;align-items:center;min-width:0;padding:1px 2px;border-left:1px solid rgba(207,170,112,.5)}
.nedtelling>div:first-child{border-left:0}
.nedtelling .n{font-family:var(--display);font-size:clamp(21px,calc(var(--u)*3.2),28px);line-height:1;font-variant-numeric:tabular-nums lining-nums;color:var(--blekk)}
.nedtelling .e{font-size:10px;letter-spacing:.13em;text-transform:uppercase;margin-top:5px;color:var(--blekk-dempet)}
.nedtelling-tekst{margin-top:18px;padding-top:14px;border-top:1px solid rgba(207,170,112,.5);font-family:var(--display);font-size:22px}
/* QR-koden: booking og informasjon, på billettens stubb. Lenke, så den kan trykkes på telefonen også. */
.stubb-qr{flex-direction:column;justify-content:center;gap:7px;padding-top:8px;padding-bottom:6px}
.festen-fot{margin:0;font-family:var(--display);text-transform:none;letter-spacing:0;font-size:clamp(13px,calc(var(--u)*1.8),15px);line-height:1.35;color:var(--blekk);text-align:center}
.qr{display:flex;align-items:center;justify-content:center;gap:11px;text-decoration:none;text-align:left;color:var(--blekk);width:fit-content}
.qr img{display:block;width:clamp(38px,calc(var(--u)*6.4),50px);height:auto;border:1px solid rgba(207,170,112,.6);padding:3px;background:var(--krem-lys);border-radius:3px}
.qr span{display:flex;flex-direction:column;font-size:11.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--blekk-dempet);line-height:1.5}
.qr small{font-family:var(--display);font-size:15px;letter-spacing:0;text-transform:none;color:var(--blekk)}
.qr:hover small{text-decoration:underline;text-underline-offset:3px}

/* Baksiden: svarkupongen */
.kupong form{display:flex;flex-direction:column;flex:1}
.kupong .ramme{text-align:left}
.kupong h2,.kvittering h2{font-size:clamp(24px,calc(var(--u)*3.6),30px);line-height:1.1}
.kupong h2:focus{outline:none}
.ingress{margin:6px 0 clamp(10px,calc(var(--u)*1.8),16px);font-size:14.5px;line-height:1.45;color:var(--blekk-dempet)}
.felt{margin-bottom:clamp(8px,calc(var(--u)*1.4),14px)}
.felt label{display:block;font-size:14.5px;margin-bottom:3px}
.felt label small{color:var(--blekk-dempet);font-size:12.5px;margin-left:4px}
input:not([type=checkbox]){
  display:block;width:100%;min-height:44px;padding:8px 12px;font-size:16px;
  background:var(--krem-lys);color:var(--blekk);border:1.5px solid var(--kant);border-radius:4px;
}
input::placeholder{color:transparent}
input:focus-visible{outline-offset:2px}
input[aria-invalid=true]{border:2px solid var(--rod)}
.feil{margin-top:5px;font-size:13.5px;line-height:1.4;color:var(--rod)}
.feil::before{content:"Feil: ";position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
.feil-oppsummering{border:2px solid var(--rod);border-radius:4px;padding:10px 12px;margin-bottom:12px}
.feil-oppsummering p{font-size:14.5px;margin-bottom:3px}
.feil-oppsummering ul{margin:0;padding-left:20px;font-size:14px;line-height:1.5}
.feil-oppsummering a{color:var(--rod)}
#send{
  display:block;width:100%;min-height:46px;margin-top:4px;padding:10px 18px;border:0;border-radius:4px;
  background:var(--rod);color:var(--krem);font-size:16px;letter-spacing:.02em;
  transition:background .2s,transform .2s;box-shadow:0 10px 24px -14px rgba(76,16,30,.9);
}
#send:hover{background:var(--rod-dyp)}
#send:active{transform:translateY(1px)}
#send[aria-busy=true]{background:var(--blekk-dempet)}
.status{margin-top:8px;font-size:14px;line-height:1.45}
.status:empty{display:none}
.status.ok{color:var(--blekk)}
.resten{margin-top:clamp(10px,calc(var(--u)*1.8),16px);font-family:var(--display);font-size:clamp(19px,calc(var(--u)*2.8),23px);text-align:center;color:var(--blekk)}
.personvern{margin-top:clamp(8px,calc(var(--u)*1.4),12px);font-size:12px;line-height:1.45;color:var(--blekk-dempet);text-align:center}
.kvittering{text-align:center;padding-top:34px;padding-bottom:34px;justify-content:center;display:flex;flex-direction:column}
.kvittering p{margin-top:12px;font-size:16px;line-height:1.5}
.kvittering .resten{margin-top:18px}
.kvittering-liten{font-size:13px;color:var(--blekk-dempet)}

/* Linja på scenegulvet */
.bunn{position:fixed;z-index:5;left:0;right:0;top:calc(var(--u)*100 - var(--gulv));height:var(--gulv);padding:0 max(14px,env(safe-area-inset-right,0px)) 0 max(14px,env(safe-area-inset-left,0px));
  display:flex;justify-content:center;align-items:center;flex-wrap:wrap;gap:0 18px;text-align:center;pointer-events:none}
.bunn>*{pointer-events:auto}
.bunn{transition:opacity .8s ease}
body.spiller .bunn{opacity:0;visibility:hidden}
/* billetten får et lite løft idet teppet går fra */
.kort.avduket{animation:avduk 1.1s cubic-bezier(.2,.9,.3,1) backwards}
@keyframes avduk{from{transform:scale(.965);filter:brightness(.82)}to{transform:none;filter:none}}
/* … og lyset stryker én gang over papiret */
.kort.avduket .ticket::after{content:"";position:absolute;inset:0;pointer-events:none;opacity:0;
  background:linear-gradient(105deg,transparent 38%,rgba(255,255,255,.6) 50%,transparent 62%);animation:glans 1.5s ease-in-out .55s 1}
@keyframes glans{0%{transform:translateX(-110%);opacity:1}100%{transform:translateX(110%);opacity:1}}
/* … og billetten viser selv at den kan snus: et gløtt på baksiden når teppet har gått, og et lite nikk hvert
   åttende sekund til noen har tatt i den (invitasjon.js setter .nikk og .rort) */
.kort.avduket .flate{animation:kikk 1.5s cubic-bezier(.4,0,.2,1) 1.9s 1}
.kort.nikk .flate{animation:nikk 1.1s cubic-bezier(.4,0,.2,1) 1}
.kort.snudd .flate,.kort.rort .flate{animation:none}
@keyframes kikk{0%,100%{transform:rotateY(0deg)}34%{transform:rotateY(-26deg)}62%{transform:rotateY(7deg)}82%{transform:rotateY(-2deg)}}
@keyframes nikk{0%,100%{transform:rotateY(0deg)}40%{transform:rotateY(-15deg)}72%{transform:rotateY(4deg)}}
/* mens fingeren drar billetten rundt, følger den direkte (ingen overgang) */
.kort{touch-action:pan-y;-webkit-user-select:none;user-select:none}
/* tekstmarkering er slått av på billetten: et drag over markert tekst blir ellers «dra teksten», og sveipet avbrytes */
.kort input{-webkit-user-select:text;user-select:text}
.flate.drar{transition:none}
.bunn button{background:none;border:0;padding:4px 0;min-height:30px;color:#f1cf80;font-size:13px;text-decoration:underline;text-underline-offset:4px;text-decoration-color:rgba(241,207,128,.5);text-shadow:0 1px 2px rgba(0,0,0,.6)}
.bunn button:hover{text-decoration-color:#f1cf80}
.fangst{font-size:12.5px;color:rgba(251,240,217,.82);text-shadow:0 1px 2px rgba(0,0,0,.6)}
.fangst:empty{display:none}

/* ---------- Enhjørninger: eget lerret foran billetten, men bak teateret ----------
   De kommer fra kulissene: kikker fram bak sceneteppet, henger ned bak kappa og spretter opp bak rampelyset.
   Lerretet tar ikke imot trykk selv (billetten ligger under); treffene fanges i scene3d. */
#enhjorninger{position:fixed;inset:0;width:100%;height:100%;z-index:3;display:block;pointer-events:none}

/* ---------- Forestillingen: anda på et gjennomsiktig lerret foran teppet ---------- */
#scene{position:fixed;left:0;right:0;top:0;height:calc(var(--u)*100);z-index:20;overflow:hidden;background:transparent;color:var(--krem)}
/* GAK-nummeret: tre plakater fires ned fra snorloftet – G, A, K – og folder seg ut til Gamle Aker Kirke.
   Krem papir med rød skrift og gullkant, som små billetter: ingen gull-på-rødt. */
.plakater{position:absolute;left:0;right:0;top:calc(var(--kappe)*1.3 + var(--u)*8);display:flex;justify-content:center;align-items:flex-start;gap:clamp(1px,0.5vw,7px);pointer-events:none}
.plakater::before{content:"";position:absolute;left:8%;right:8%;top:-60%;bottom:-90%;background:radial-gradient(closest-side,rgba(255,226,160,.3),transparent);opacity:0;transition:opacity .7s ease}
.plakater.ut::before{opacity:1}
.plakat{position:relative;margin:0;padding:.3em .42em .32em;white-space:nowrap;
  font:clamp(28px,8.2vw,66px)/1 var(--display);color:var(--rod);
  background:linear-gradient(180deg,var(--krem-lys),var(--krem) 55%,var(--krem-dyp));
  border-radius:5px;box-shadow:0 16px 28px rgba(0,0,0,.5),inset 0 0 0 1px rgba(201,160,96,.9),inset 0 0 0 4px var(--krem),inset 0 0 0 5px rgba(201,160,96,.45);
  transform:translateY(calc(-100% - var(--kappe)*1.3 - var(--u)*12));transform-origin:50% -60px;
  transition:transform .75s cubic-bezier(.3,1.45,.5,1),translate .72s cubic-bezier(.33,1,.3,1)}
.plakat:nth-child(2){transition-delay:.13s}
.plakat:nth-child(3){transition-delay:.26s}
/* snorene opp til snorloftet */
.plakat::before,.plakat::after{content:"";position:absolute;bottom:100%;width:1.5px;height:calc(var(--u)*8 + var(--kappe));background:linear-gradient(180deg,rgba(241,207,128,.3),rgba(241,207,128,.9))}
.plakat::before{left:20%}
.plakat::after{right:20%}
.plakater.ned .plakat{transform:none;animation:dingle 3.2s ease-in-out .8s infinite}
.plakater.ned .plakat:nth-child(2){animation-delay:1s;animation-duration:3.6s}
.plakater.ned .plakat:nth-child(3){animation-delay:1.2s;animation-duration:2.9s}
@keyframes dingle{0%,100%{rotate:-1.3deg}50%{rotate:1.3deg}}
/* opp igjen går fortere enn ned */
.plakater:not(.ned) .plakat{transition:transform .5s cubic-bezier(.6,0,.9,.4)}
.plakat b{font-weight:400}
.plakat span{display:inline-block;max-width:0;opacity:0;overflow:hidden;vertical-align:bottom;white-space:pre;
  transition:max-width .7s cubic-bezier(.3,.9,.3,1),opacity .45s ease .18s}
.plakat:nth-child(2) span{transition-delay:.18s,.36s}
.plakat:nth-child(3) span{transition-delay:.36s,.54s}
.plakater.ut .plakat span{max-width:3.3em;opacity:1}
/* GAK starter tett og dras utover mens ordene folder seg ut */
.plakater.ut .plakat:first-child{translate:-.5em 0}
.plakater.ut .plakat:last-child{translate:.5em 0}
#scene.ferdig{pointer-events:none}
#scene.ferdig #skip{display:none}
.scene-3d,.scene-3d canvas{position:absolute;inset:0;width:100%;height:100%;display:block}
/* Snakkebobla: «GAK!» */
.boble{position:absolute;left:0;top:0;margin:0;pointer-events:none;will-change:transform}
.boble span{display:block;position:relative;white-space:nowrap;transform:translate(-50%,-100%) scale(0);transform-origin:50% 100%;opacity:0;
  padding:10px 18px 11px;border-radius:22px;background:var(--krem);color:var(--rod);
  font:30px/1 var(--display);box-shadow:0 10px 24px rgba(0,0,0,.4);transition:transform .45s cubic-bezier(.3,1.7,.4,1),opacity .2s}
.boble span::after{content:"";position:absolute;left:50%;top:100%;margin:-1px 0 0 -9px;border:9px solid transparent;border-top:12px solid var(--krem);border-bottom:0}
.boble.vis span{transform:translate(-50%,-100%) scale(1) rotate(-3deg);opacity:1}
/* uten 3D: navnene på teppet et øyeblikk før det går */
.scene-reserve{display:none}
.uten-3d .scene-reserve{position:absolute;inset:0;display:grid;place-content:center;text-align:center;font:clamp(36px,8vw,64px)/1.1 var(--display);color:var(--krem);text-shadow:0 2px 12px rgba(0,0,0,.6);animation:reserve 1.2s ease both}
.uten-3d .scene-reserve span{font-size:.4em;letter-spacing:.2em}
@keyframes reserve{from{opacity:0;transform:scale(.96)}to{opacity:1;transform:none}}
#skip{position:absolute;z-index:3;right:max(14px,env(safe-area-inset-right,0px));bottom:calc(var(--gulv) + 14px);
  min-height:44px;padding:10px 16px;border:1px solid rgba(207,170,112,.6);border-radius:22px;background:rgba(6,35,42,.72);color:var(--krem);font-size:13.5px;backdrop-filter:blur(6px)}

@media (max-width:480px){
  .dato{gap:12px}
  .mnd{padding-left:12px}
  .boble span{font-size:23px;padding:8px 14px 9px}
}
/* Lave telefoner (f.eks. iPhone SE med verktøylinjer, ca. 550 px): stram inn så alt fortsatt får plass på én skjerm */
:root.lav{--kappe:38px;--gulv:32px}
.lav .ramme{padding-top:10px;padding-bottom:8px}
.lav .ingress{margin:4px 0 8px}
.lav .felt{margin-bottom:6px}
.lav .felt label{margin-bottom:2px}
.lav input:not([type=checkbox]){min-height:40px;padding:6px 12px}
.lav #send{min-height:42px;padding:8px 18px}
.lav .resten{margin-top:8px}
.lav .personvern{margin-top:6px;font-size:11.5px}
.lav .stubb{margin-top:5px;padding:5px 6px 3px}
.lav .snu{min-height:34px;padding:5px 2px}
.lav .qr{margin-top:8px}
.lav .bunn button{min-height:26px}
:root.lavere{--kappe:32px;--gulv:28px}
.lavere .kupong h2,.lavere .kvittering h2{font-size:20px}
.lavere .ingress{font-size:13.5px;margin:2px 0 6px}
.lavere .felt{margin-bottom:4px}
.lavere .felt label{font-size:13.5px}
.lavere input:not([type=checkbox]){min-height:36px;padding:4px 10px}
.lavere #send{min-height:38px;padding:6px 18px}
.lavere .resten{font-size:17px;margin-top:6px}
.lavere .personvern{font-size:11px;margin-top:4px;line-height:1.35}
.lavere .ramme{padding-top:8px;padding-bottom:6px}
.lavere .stubb{margin-top:3px;padding:3px 6px 1px}
.lavere .snu{min-height:30px}
.lavere .tall{font-size:72px}
.lavere h1{font-size:34px}
.lavere .nedtelling{margin-top:8px;padding-top:8px}
.lavere .qr img{width:52px}
.lav .sveip{margin-top:7px;font-size:12.5px}
.lav .stubb-qr{padding:5px 6px 3px}
.lav .stubb .qr{margin-top:0}
.lavere .sveip{margin-top:5px;font-size:12px}
.lavere .qr img{width:34px}
.lavere .qr small{font-size:13.5px}
/* lave vinduer (telefon på tvers): la siden heller rulle enn å klemme */
@media (max-height:520px){
  main{min-height:auto}
  .bunn{position:static;height:auto;padding-block:8px;background:#3b2114}
  .gulv{display:none}
}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important}
}

/* Anda i hjørnet etter innsending */
#and-hilsen{position:fixed;z-index:6;right:max(6px,env(safe-area-inset-right,0px));bottom:max(4px,env(safe-area-inset-bottom,0px));width:150px;height:170px;cursor:pointer;touch-action:manipulation;-webkit-tap-highlight-color:transparent}
.and-3d,.and-3d canvas{position:absolute;inset:0;width:100%;height:100%;display:block}
.boble-liten span{font-size:20px;padding:6px 11px 7px}
@media (max-width:480px){#and-hilsen{width:120px;height:136px}}