/* ============================================================
   NEXTRUM — Prova NexLäx (2026-10-31, omgjord 2026-11-03), /prova-nexlax

   Laddas sist, efter nextrum-sidor.css. Inga hexkoder: allt är cinemas
   tokens, och ämnets färg kommer i --f från banan, så sidan följer
   mörkt läge av sig själv. Kanterna under mynten och knapparna blandas
   med svart, som mynten i vyn (nextrum-uppgifter.css, VÄGEN SOM I
   DUOLINGO). Utan skript (ingen .pn-igang) står alla tre banorna som
   listor med Visa svaret, och spelaren och ämnesvalet är dolda.

   Spelaren har vyns form (SPELAREN i nextrum-uppgifter.css): mätaren,
   stora alternativ med en tjock kant under, foten som blir grön eller
   röd, gnistor vid rätt och en skakning vid fel. Tryck rör sig med
   scale, aldrig transform, och ingen skugga animeras.
   ============================================================ */

.pn{overflow-x:clip}
.pn-sek{padding-block:clamp(56px,7vw,104px)}
.pn-h2{
  margin:14px 0 0;font-size:clamp(1.7rem,3.4vw,2.6rem);line-height:1.05;
  letter-spacing:-.035em;font-weight:750;color:var(--bl);text-wrap:balance;
}

/* Fjädern i trycken och det som poppar in, som vyns --vy-fjader. */
.pn{--pn-fjader:cubic-bezier(.34,1.56,.64,1)}

/* ---------- scenen: rubriken, ämnena och spelet ---------- */
.pn-scen{position:relative;isolation:isolate;padding:clamp(100px,10vw,136px) 0 clamp(56px,7vw,96px)}
.pn-dekor{
  position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:
    radial-gradient(70% 62% at 70% 42%,transparent 0 28%,var(--pap) 80%),
    radial-gradient(circle,color-mix(in srgb,var(--bl) 13%,transparent) 1.1px,transparent 1.7px) 0 0/26px 26px;
}
.pn-scen-in{display:grid;gap:clamp(30px,4vw,64px);grid-template-columns:minmax(0,1fr);align-items:start}
@media (min-width:1000px){
  .pn-scen-in{grid-template-columns:minmax(0,.84fr) minmax(0,1.16fr)}
  .pn-intro{position:sticky;top:112px}
}
.pn-intro{min-width:0}
/* Tillbakalänken och etiketten står på var sin rad. */
.pn-intro .nx-back{display:inline-flex}
.pn-intro .pn-et{display:flex;width:fit-content;margin-top:22px}
.pn-rubrik{font-size:clamp(2.5rem,5vw,4.3rem)}
.pn-lede{max-width:44ch;margin-top:clamp(16px,2vw,24px)}

/* ---------- ämnesvalet: tre brickor med ämnets mynt ---------- */
.pn-val-t{
  margin:clamp(26px,3vw,38px) 0 0;
  font-family:var(--f-mono);font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--bl-3);
}
.pn-val{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin-top:12px;max-width:500px}
.pn-valj{
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;
  min-height:44px;padding:16px 6px 14px;
  border:2px solid var(--ln-2);border-radius:20px;background:var(--yta);
  box-shadow:0 5px 0 0 var(--ln-2);
  color:var(--bl);font:inherit;cursor:pointer;
  transition:scale .45s var(--pn-fjader),border-color .18s var(--e),background-color .18s var(--e);
  -webkit-tap-highlight-color:transparent;
}
.pn-valj b{font-size:.98rem;font-weight:750;letter-spacing:-.01em;line-height:1.1}
.pn-valj:active{scale:.95;transition-duration:.08s}
.pn-valj:focus-visible{outline:3px solid var(--focus);outline-offset:3px}
.pn-valj[aria-pressed="true"]{
  border-color:var(--f);background:color-mix(in srgb,var(--f) 9%,var(--yta));
  box-shadow:0 5px 0 0 color-mix(in srgb,var(--f) 68%,black);
}

/* Ämnets mynt: ovalt, platt färg och två ljusa ränder, som i vyn. */
.pn-valj-mynt{
  position:relative;display:grid;place-items:center;width:54px;height:44px;border-radius:50%;
  background:color-mix(in srgb,var(--f) 14%,var(--yta));color:var(--f);
  transition:background-color .2s var(--e),color .2s var(--e);
}
.pn-valj-mynt svg{position:relative;width:24px;height:24px;fill:none;stroke:currentColor;stroke-width:2.1;stroke-linecap:round;stroke-linejoin:round}
.pn-valj[aria-pressed="true"] .pn-valj-mynt,
.pn-app-amne .pn-valj-mynt{background:var(--f);color:var(--yta);box-shadow:0 4px 0 0 color-mix(in srgb,var(--f) 68%,black)}
.pn-valj[aria-pressed="true"] .pn-valj-mynt::before,
.pn-app-amne .pn-valj-mynt::before,
.pn-rmynt.ratt::before,
.pn-mynt::before{
  content:"";position:absolute;inset:0;border-radius:50%;pointer-events:none;
  background:linear-gradient(140deg,
    transparent 0 33%,color-mix(in srgb,white 22%,transparent) 33% 51%,
    transparent 51% 57%,color-mix(in srgb,white 22%,transparent) 57% 63%,transparent 63%);
}
@media (max-width:420px){
  .pn-val{gap:8px}
  .pn-valj{padding:13px 4px 12px;border-radius:18px}
  .pn-valj b{font-size:.86rem}
  .pn-valj-mynt{width:46px;height:38px}
  .pn-valj-mynt svg{width:21px;height:21px}
}
/* Utan skript gör valet ingenting, så det visas inte. */
.pn-scen-in:not(.pn-igang) .pn-val,
.pn-scen-in:not(.pn-igang) .pn-val-t{display:none}

.pn-not{margin:18px 4px 0;max-width:60ch;font-size:.86rem;line-height:1.5;color:var(--muted)}
/* På telefonen ska frågan synas utan att man rullar: mindre luft ovanför. */
@media (max-width:600px){
  .pn-scen{padding-top:92px}
  .pn-intro .pn-et{margin-top:14px}
  .pn-rubrik{font-size:clamp(2.2rem,11vw,2.7rem)}
  .pn-lede{font-size:1rem;line-height:1.5}
  .pn-val-t{margin-top:20px}
  .pn-scen-in{gap:22px}
}

/* ---------- banorna utan skript ---------- */
.pn-bana{margin-top:34px}
.pn-bana:first-child{margin-top:0}
.pn-bana-t{margin:0 0 14px;font-size:1.25rem;letter-spacing:-.02em;color:var(--f)}
.pn-fragor{margin:0;padding-left:1.4em;display:grid;gap:18px}
.pn-fraga{color:var(--bl)}
.pn-q{margin:0;font-weight:650;line-height:1.45}
.pn-alt{margin:8px 0 0;padding-left:1.2em;color:var(--bl-2);line-height:1.6}
.pn-svar{margin-top:8px;color:var(--bl-2)}
.pn-svar summary{cursor:pointer;color:var(--acc-text);font-weight:600;min-height:32px}
.pn-svar p{margin:6px 0 0;line-height:1.55}
/* Med skriptet spelas banorna i spelaren, och listorna göms. */
.pn-igang .pn-bana{display:none}

/* ---------- spelaren ---------- */
.pn-spelyta{position:relative;min-width:0}
/* Ämnets sken bakom spelaren. Byter med ämnet, utan övergång. */
.pn-igang .pn-spelyta::before{
  content:"";position:absolute;inset:-14% -12% -16%;z-index:-1;pointer-events:none;
  background:radial-gradient(closest-side,color-mix(in srgb,var(--f) 20%,transparent),transparent);
}
.pn-app{
  position:relative;overflow:hidden;display:flex;flex-direction:column;
  border-radius:28px;background:var(--yta);
  box-shadow:0 0 0 1px var(--ln),0 40px 80px -44px color-mix(in srgb,var(--f) 60%,transparent),var(--sk-2);
}
.pn-app[hidden]{display:none}
.pn-app.ny{animation:pn-in .5s var(--e-ut) both}
@keyframes pn-in{from{opacity:0;translate:0 14px}to{opacity:1;translate:0 0}}

.pn-app-topp{display:flex;align-items:center;gap:12px;padding:16px clamp(16px,3vw,26px) 4px}
.pn-app-amne{display:inline-flex;align-items:center;gap:9px;flex:none;font-weight:750;font-size:.92rem;color:var(--bl)}
.pn-app-amne .pn-valj-mynt{width:36px;height:30px}
.pn-app-amne .pn-valj-mynt svg{width:17px;height:17px;stroke-width:2.4}
@media (max-width:480px){.pn-app-amne span:last-child{display:none}}

/* Mätaren: hur långt man kommit, mossa, och varm från tre rätt i rad. */
.pn-mat{flex:1;min-width:60px;height:16px;border-radius:99px;background:var(--pap-3);overflow:hidden}
.pn-mat i{
  position:relative;display:block;height:100%;width:calc(var(--andel,0) * 100%);
  border-radius:99px;background:var(--mossa);
  transition:width .55s var(--e-ut);
}
.pn-mat i::after{
  content:"";position:absolute;left:8px;right:8px;top:3px;height:4px;border-radius:99px;
  background:color-mix(in srgb,white 32%,transparent);
}
.pn-app.het .pn-mat i{background:linear-gradient(90deg,var(--mossa),var(--ockra))}
.pn-app-tal{flex:none;min-width:40px;text-align:right;font-family:var(--f-mono);font-size:.8rem;color:var(--bl-3);font-variant-numeric:tabular-nums}

.pn-ljud{
  flex:none;width:40px;height:40px;margin-right:-8px;border-radius:50%;border:0;background:none;
  display:grid;place-items:center;color:var(--bl-3);cursor:pointer;
  transition:scale .4s var(--pn-fjader),background-color .2s var(--e);
}
.pn-ljud[hidden]{display:none}
.pn-ljud:active{scale:.88;transition-duration:.08s}
.pn-ljud:focus-visible{outline:3px solid var(--focus);outline-offset:2px}
.pn-ljud svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.pn-ljud .av,.pn-ljud[aria-pressed="false"] .pa{display:none}
.pn-ljud[aria-pressed="false"] .av{display:inline}

/* Kroppen har en minsta höjd, så att foten och knappen inte hoppar
   mellan en kort och en lång fråga. */
.pn-app-kropp{position:relative;padding:20px clamp(16px,3vw,30px) 24px;min-height:clamp(290px,30vw,340px)}
.pn-app-fraga[hidden]{display:none}
.pn-fraga-kort{animation:pn-fraga-in .34s var(--e-ut) both}
@keyframes pn-fraga-in{from{opacity:0;translate:22px 0}to{opacity:1;translate:0 0}}
.pn-typ{margin:0 0 10px;font-family:var(--f-mono);font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--f)}
.pn-fraga-q{
  margin:0 0 22px;font-size:clamp(1.3rem,2.3vw,1.62rem);font-weight:700;line-height:1.3;
  letter-spacing:-.015em;color:var(--bl);text-wrap:pretty;
}

/* Alternativen: stora, med en tjock kant under, lätta att träffa. */
.pn-alt-grid{display:grid;gap:12px}
@media (min-width:560px){.pn-alt-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
.pn-alt-knapp{
  display:flex;align-items:center;gap:12px;width:100%;min-height:62px;padding:12px 16px;
  border:2px solid var(--ln-2);border-radius:16px;background:var(--yta);color:var(--bl);
  font:inherit;font-size:1.04rem;font-weight:600;text-align:left;cursor:pointer;
  box-shadow:0 4px 0 0 var(--ln-2);
  transition:scale .45s var(--pn-fjader),border-color .15s var(--e),background-color .15s var(--e),opacity .2s var(--e);
  -webkit-tap-highlight-color:transparent;overflow-wrap:anywhere;
}
.pn-alt-knapp:active:not(:disabled){scale:.97;transition-duration:.08s}
.pn-alt-knapp:focus-visible{outline:3px solid var(--focus);outline-offset:2px}
.pn-alt-nr{
  flex:none;display:grid;place-items:center;width:28px;height:28px;border-radius:9px;
  border:1.5px solid var(--ln-2);font-family:var(--f-mono);font-size:.76rem;color:var(--bl-3);
  transition:background-color .15s var(--e),border-color .15s var(--e),color .15s var(--e);
}
.pn-alt-knapp[aria-pressed="true"]{
  border-color:var(--f);background:color-mix(in srgb,var(--f) 11%,var(--yta));
  box-shadow:0 4px 0 0 color-mix(in srgb,var(--f) 60%,transparent);
}
.pn-alt-knapp[aria-pressed="true"] .pn-alt-nr{border-color:var(--f);background:var(--f);color:var(--yta)}
.pn-alt-knapp.ar-ratt{
  border-color:var(--mossa);background:color-mix(in srgb,var(--mossa) 15%,var(--yta));
  box-shadow:0 4px 0 0 color-mix(in srgb,var(--mossa) 55%,transparent);
  animation:pn-studs .45s var(--pn-fjader) both;
}
.pn-alt-knapp.ar-ratt .pn-alt-nr{border-color:var(--mossa);background:var(--mossa);color:var(--yta)}
.pn-alt-knapp.ar-fel{
  border-color:var(--acc);background:color-mix(in srgb,var(--acc) 11%,var(--yta));
  box-shadow:0 4px 0 0 color-mix(in srgb,var(--acc) 45%,transparent);
}
.pn-alt-knapp.ar-fel .pn-alt-nr{border-color:var(--acc);background:var(--acc);color:var(--acc-ink)}
.pn-alt-knapp:disabled{cursor:default}
.pn-alt-knapp:disabled:not(.ar-ratt):not(.ar-fel){opacity:.55}
@keyframes pn-studs{0%{scale:1}40%{scale:1.04}100%{scale:1}}

/* Fel: frågan skakar en gång i sidled. */
.pn-fraga-kort.skaka{animation:pn-skaka .42s var(--e) both}
@keyframes pn-skaka{0%,100%{translate:0 0}18%{translate:-9px 0}36%{translate:8px 0}54%{translate:-5px 0}72%{translate:3px 0}}

.pn-skriv{margin:0}
.pn-skriv .pn-skriv-inp{
  width:100%;min-height:62px;padding:14px 18px;border-radius:16px;border-width:2px;
  font-size:1.3rem;font-weight:600;
}
.pn-skriv .pn-skriv-inp.ar-ratt{border-color:var(--mossa);background:color-mix(in srgb,var(--mossa) 12%,var(--yta))}
.pn-skriv .pn-skriv-inp.ar-fel{border-color:var(--acc);background:color-mix(in srgb,var(--acc) 9%,var(--yta))}

/* ---------- foten: beskedet och knappen ---------- */
.pn-app-fot{
  padding:16px clamp(16px,3vw,30px) 20px;border-top:1.5px solid var(--ln);background:var(--yta);
  transition:background-color .22s var(--e),border-color .22s var(--e);
}
.pn-app-fot[hidden]{display:none}
.pn-app.ratt .pn-app-fot{background:color-mix(in srgb,var(--mossa) 15%,var(--yta));border-top-color:transparent}
.pn-app.fel .pn-app-fot{background:color-mix(in srgb,var(--acc) 11%,var(--yta));border-top-color:transparent}

.pn-besked-topp{display:flex;align-items:center;gap:12px;flex-wrap:wrap;animation:pn-besked-in .26s var(--e-ut) both}
.pn-besked-topp[hidden],.pn-besked-text[hidden]{display:none}
@keyframes pn-besked-in{from{opacity:0;translate:0 10px}to{opacity:1;translate:0 0}}
.pn-besked-topp > b{font-size:1.25rem;font-weight:800;letter-spacing:-.01em}
.pn-app.ratt .pn-besked-topp > b{color:var(--mossa-text)}
.pn-app.fel .pn-besked-topp > b{color:var(--acc-text)}
.pn-besked-ik{position:relative;flex:none;display:grid;place-items:center;width:36px;height:36px;border-radius:50%}
.pn-besked-ik svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:3;stroke-linecap:round;stroke-linejoin:round}
.pn-app.ratt .pn-besked-ik{background:var(--mossa);color:var(--yta);animation:pn-pop .5s var(--pn-fjader) both}
.pn-app.fel .pn-besked-ik{background:var(--acc);color:var(--acc-ink)}
.pn-app.ratt .pn-besked-ik .ik-fel,.pn-app.fel .pn-besked-ik .ik-ratt{display:none}
@keyframes pn-pop{0%{scale:.3}55%{scale:1.22}100%{scale:1}}

/* Gnistorna runt bocken: sex prickar som far ut och tonar bort. */
.pn-gnistor{position:absolute;inset:0;pointer-events:none}
.pn-gnistor i{
  position:absolute;left:50%;top:50%;width:6px;height:6px;margin:-3px 0 0 -3px;border-radius:50%;
  background:var(--mossa);opacity:0;
}
.pn-gnistor i:nth-child(2n){background:var(--ockra)}
.pn-gnistor i:nth-child(1){--v:0deg}
.pn-gnistor i:nth-child(2){--v:60deg}
.pn-gnistor i:nth-child(3){--v:120deg}
.pn-gnistor i:nth-child(4){--v:180deg}
.pn-gnistor i:nth-child(5){--v:240deg}
.pn-gnistor i:nth-child(6){--v:300deg}
.pn-app.ratt .pn-gnistor i{animation:pn-gnista .62s var(--e-ut) .08s both}
@keyframes pn-gnista{
  0%{opacity:1;transform:rotate(var(--v)) translateX(4px) scale(1)}
  100%{opacity:0;transform:rotate(var(--v)) translateX(30px) scale(.4)}
}

/* I rad: bara den här omgången, aldrig sparat. */
.pn-rad{
  margin-left:auto;display:inline-flex;align-items:center;gap:4px;padding:4px 11px 4px 8px;border-radius:99px;
  background:var(--ockra-soft);color:var(--ockra-text);font-size:.82rem;font-weight:750;font-variant-numeric:tabular-nums;white-space:nowrap;
  animation:pn-chip-in .55s var(--pn-fjader) .05s both;
}
.pn-rad[hidden]{display:none}
.pn-rad svg{width:15px;height:15px;fill:var(--ockra)}
@keyframes pn-chip-in{0%{opacity:0;scale:.4}70%{opacity:1;scale:1.12}100%{opacity:1;scale:1}}

.pn-besked-text{margin:10px 0 14px;font-size:.98rem;line-height:1.5;color:var(--bl);animation:pn-besked-in .3s var(--e-ut) .04s both}
.pn-besked-text b{font-weight:750}

.pn-knapp{
  display:flex;align-items:center;justify-content:center;width:100%;min-height:56px;padding:12px 20px;
  border:0;border-radius:16px;background:var(--acc);color:var(--acc-ink);
  font:inherit;font-size:1.02rem;font-weight:750;letter-spacing:.01em;cursor:pointer;
  box-shadow:0 5px 0 0 color-mix(in srgb,var(--acc) 62%,black);
  transition:scale .4s var(--pn-fjader),background-color .18s var(--e),color .18s var(--e);
  -webkit-tap-highlight-color:transparent;
}
.pn-knapp:active:not(:disabled){scale:.97;transition-duration:.08s}
.pn-knapp:focus-visible{outline:3px solid var(--focus);outline-offset:3px}
.pn-knapp:disabled{background:var(--pap-3);color:var(--bl-3);box-shadow:0 5px 0 0 var(--ln-2);cursor:default}
.pn-app.ratt .pn-knapp{background:var(--mossa);color:var(--yta);box-shadow:0 5px 0 0 color-mix(in srgb,var(--mossa) 62%,black)}

/* ---------- slutet: en klarad nivå ---------- */
.pn-slut{position:relative;display:flex;flex-direction:column;align-items:center;text-align:center;padding:4px 0 0}
.pn-slut[hidden],.pn-slut [hidden]{display:none}
.pn-slut:focus{outline:none}
.pn-slut-et{margin:0;font-family:var(--f-mono);font-size:10.5px;letter-spacing:.18em;text-transform:uppercase;color:var(--f)}
.pn-slut-rubrik{
  margin:10px 0 0;font-size:clamp(2.1rem,4.2vw,2.9rem);font-weight:800;letter-spacing:-.04em;line-height:1;color:var(--bl);
  animation:pn-rubrik .8s var(--pn-fjader) .1s both;
}
@keyframes pn-rubrik{0%{opacity:0;scale:.7}60%{opacity:1;scale:1.07}100%{opacity:1;scale:1}}
.pn-slut-tal{margin:14px 0 0;font-size:1.05rem;font-weight:650;color:var(--bl-2)}
.pn-slut-tal b{font-size:clamp(2.4rem,5.4vw,3.3rem);font-weight:800;letter-spacing:-.04em;color:var(--f);font-variant-numeric:tabular-nums;vertical-align:-.1em}

/* Talet räknas upp: en registrerad egenskap som går från noll till
   --till. Utan @property hoppar det till slutvärdet, och med rörelse
   bortvald står det där direkt. */
@property --pn-n{syntax:'<integer>';inherits:false;initial-value:0}
.pn-raknare{--pn-n:var(--till,0);counter-reset:pn-n var(--pn-n)}
.pn-raknare::after{content:counter(pn-n)}
.pn-raknare.kor{animation:pn-rakna .9s var(--e-ut) .35s both}
@keyframes pn-rakna{from{--pn-n:0}to{--pn-n:var(--till,0)}}

.pn-slut-mynt{display:flex;flex-wrap:wrap;justify-content:center;gap:10px;margin:20px 0 6px;padding:0;list-style:none}
.pn-rmynt{
  position:relative;display:grid;place-items:center;width:46px;height:38px;border-radius:50%;
  animation:pn-mynt-in .5s var(--pn-fjader) both;animation-delay:calc(.45s + var(--i,0) * .11s);
}
.pn-rmynt svg{position:relative;width:19px;height:19px;fill:none;stroke:currentColor;stroke-width:3;stroke-linecap:round;stroke-linejoin:round}
.pn-rmynt.ratt{background:var(--f);color:var(--yta);box-shadow:0 5px 0 0 color-mix(in srgb,var(--f) 68%,black)}
.pn-rmynt.fel{background:var(--pap-3);color:var(--bl-3);box-shadow:0 5px 0 0 var(--ln-2)}
.pn-rmynt.ratt .ik-fel,.pn-rmynt.fel .ik-ratt{display:none}
@media (max-width:480px){
  .pn-slut-mynt{gap:7px}
  .pn-rmynt{width:40px;height:33px}
  .pn-rmynt svg{width:16px;height:16px}
}
@keyframes pn-mynt-in{0%{opacity:0;scale:.3;translate:0 10px}70%{opacity:1;scale:1.12;translate:0 0}100%{opacity:1;scale:1;translate:0 0}}

.pn-slut-text{margin:16px 0 0;max-width:44ch;line-height:1.55;color:var(--bl-2);text-wrap:pretty}
.pn-slut-cta{
  width:100%;margin-top:22px;padding:18px clamp(14px,3vw,24px) 20px;border-radius:20px;
  background:color-mix(in srgb,var(--f) 8%,var(--pap));
  animation:pn-besked-in .5s var(--e-ut) 1.1s both;
}
.pn-slut-cta p{margin:0;line-height:1.5;color:var(--bl-2);text-wrap:pretty}
.pn-slut-cta p b{color:var(--bl)}
.pn-slut-knappar{display:flex;flex-wrap:wrap;justify-content:center;gap:10px;margin-top:14px}

/* Konfettin, bara när det gick bra: faller genom kortet och tonar bort. */
.pn-konfetti{position:absolute;left:-8%;right:-8%;top:-70px;height:0;pointer-events:none;z-index:3}
.pn-konfetti i{
  position:absolute;top:0;left:var(--x);width:9px;height:14px;border-radius:2px;opacity:0;
  animation:pn-konfetti 2.2s cubic-bezier(.22,.62,.36,1) var(--d) both;
}
.pn-konfetti i.t0{background:var(--ockra)}
.pn-konfetti i.t1{background:var(--mossa)}
.pn-konfetti i.t2{background:var(--acc);border-radius:50%;width:10px;height:10px}
.pn-konfetti i.t3{background:var(--amne-ma)}
.pn-konfetti i.t4{background:var(--amne-en);height:8px}
.pn-konfetti i.t5{background:var(--amne-ms);border-radius:50%;width:8px;height:8px}
@keyframes pn-konfetti{
  0%{opacity:0;translate:0 0;rotate:0deg}
  8%{opacity:1}
  80%{opacity:1}
  100%{opacity:0;translate:var(--dx) var(--fall);rotate:var(--r)}
}

/* ---------- vägen och vad NexLäx är ---------- */
.pn-mer{border-top:1px solid var(--ln)}
.pn-mer-in{display:grid;gap:clamp(36px,5vw,76px);grid-template-columns:minmax(0,1fr);align-items:center}
@media (min-width:900px){.pn-mer-in{grid-template-columns:minmax(0,.78fr) minmax(0,1.22fr)}}

.pn-vag{
  position:relative;display:grid;place-items:center;padding:clamp(34px,5vw,56px) 16px clamp(30px,4vw,44px);
  border-radius:32px;
  background:
    radial-gradient(circle,color-mix(in srgb,var(--bl) 11%,transparent) 1.1px,transparent 1.7px) 0 0/22px 22px,
    var(--pap-2);
  box-shadow:inset 0 0 0 1px var(--ln);
}
.pn-vag ol{display:flex;flex-direction:column;align-items:center;gap:16px;margin:0;padding:0;list-style:none}
.pn-vag li{position:relative;display:flex;flex-direction:column;align-items:center;translate:calc(var(--x) * 58px) 0}
.pn-mynt{
  --kant:color-mix(in srgb,var(--f) 68%,black);
  position:relative;display:grid;place-items:center;width:80px;height:64px;border-radius:50%;
  background:var(--f);color:var(--yta);box-shadow:0 8px 0 0 var(--kant);
}
.pn-mynt svg{position:relative;width:30px;height:30px;fill:none;stroke:currentColor;stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round}
.pn-mynt svg.fylld,.pn-del-ik svg.fylld{fill:currentColor;stroke:none}
.pn-vag li.last .pn-mynt{
  --f:color-mix(in srgb,var(--bl-3) 20%,var(--yta));
  --kant:color-mix(in srgb,var(--bl-3) 36%,var(--yta));
  color:var(--bl-3);
}
.pn-vag li.last .pn-mynt::before{opacity:.5}
.pn-vag li.mastare .pn-mynt{width:94px;height:74px}
.pn-vag li.mastare .pn-mynt svg{width:34px;height:34px}
.pn-vag-namn{margin-top:16px;font-size:.88rem;font-weight:750;color:var(--bl-3)}

/* Den som står på tur: en ring som andas och en lapp som gungar. */
.pn-vag li.nu .pn-mynt::after{
  content:"";position:absolute;inset:-13px;border-radius:50%;
  border:3px solid color-mix(in srgb,var(--f) 60%,transparent);
  animation:pn-ring 1.9s var(--e-ut) infinite;
}
@keyframes pn-ring{0%{scale:.9;opacity:.95}100%{scale:1.22;opacity:0}}
.pn-vag-lapp{
  position:relative;margin-bottom:18px;padding:7px 13px;border-radius:12px;
  background:var(--yta);box-shadow:0 0 0 2px var(--ln-2),0 4px 0 0 var(--ln-2);
  font-family:var(--f-mono);font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--f);white-space:nowrap;
  animation:pn-gunga 2.4s ease-in-out infinite;
}
.pn-vag-lapp::after{
  content:"";position:absolute;left:50%;bottom:-7px;width:12px;height:12px;margin-left:-6px;
  background:var(--yta);rotate:45deg;box-shadow:2px 2px 0 0 var(--ln-2);
}
@keyframes pn-gunga{0%,100%{translate:0 0}50%{translate:0 -5px}}

/* Mynten kommer in ett i taget när vägen syns (skriptet sätter .vanta
   och sedan .syns). Utan skriptet står de där. */
.pn-vag.vanta:not(.syns) li{opacity:0}
.pn-vag.syns li{animation:pn-vag-in .55s var(--pn-fjader) both;animation-delay:calc(var(--i,0) * .12s)}
/* Utan translate: den står redan för sicksacken på li. */
@keyframes pn-vag-in{0%{opacity:0;scale:.3}70%{opacity:1;scale:1.12}100%{opacity:1;scale:1}}

@media (max-width:600px){
  .pn-vag li{translate:calc(var(--x) * 42px) 0}
  .pn-vag ol{gap:13px}
  .pn-mynt{width:66px;height:53px;box-shadow:0 7px 0 0 var(--kant)}
  .pn-mynt svg{width:25px;height:25px}
  .pn-vag li.mastare .pn-mynt{width:78px;height:62px}
}

.pn-mer-text{min-width:0}
.pn-mer-text .pn-h2.nlx-rubrik{margin-top:14px;font-size:clamp(2rem,3.7vw,3.1rem)}
.pn-mer-lede{margin-top:16px;max-width:52ch}
.pn-delar{display:grid;gap:12px;margin:26px 0 0;padding:0;list-style:none}
@media (min-width:640px){.pn-delar{grid-template-columns:repeat(2,minmax(0,1fr))}}
.pn-delar li{
  display:flex;gap:14px;align-items:flex-start;padding:16px;border-radius:20px;
  background:var(--yta);box-shadow:0 0 0 1px var(--ln);
}
.pn-del-ik{
  flex:none;display:grid;place-items:center;width:44px;height:44px;border-radius:14px;
  background:color-mix(in srgb,var(--f) 14%,var(--yta));color:var(--f);
}
.pn-del-ik svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.pn-delar h3{margin:2px 0 4px;font-size:1rem;font-weight:750;letter-spacing:-.01em;color:var(--bl)}
.pn-delar p{margin:0;font-size:.9rem;line-height:1.5;color:var(--bl-2)}
.pn-mer-not{margin:22px 0 0;max-width:62ch;line-height:1.55;color:var(--bl-2)}
.pn-mer-cta{margin-top:22px}

/* Hovring bara med en riktig pekare: på en telefon fastnar :hover på
   det man senast tryckte nära, och ett alternativ ser valt ut. */
@media (hover:hover){
  .pn-valj:hover{border-color:color-mix(in srgb,var(--f) 55%,var(--ln-2))}
  .pn-alt-knapp:hover:not(:disabled){border-color:color-mix(in srgb,var(--f) 55%,var(--ln-2))}
  .pn-ljud:hover{background:var(--bricka)}
}

/* ---------- utan rörelse ---------- */
@media (prefers-reduced-motion:reduce){
  .pn-valj,.pn-alt-knapp,.pn-knapp,.pn-ljud,.pn-mat i,.pn-app-fot,.pn-valj-mynt,.pn-alt-nr{transition:none}
  .pn-app.ny,.pn-fraga-kort,.pn-fraga-kort.skaka,.pn-alt-knapp.ar-ratt,.pn-besked-topp,.pn-besked-text,
  .pn-app.ratt .pn-besked-ik,.pn-rad,.pn-slut-rubrik,.pn-raknare.kor,.pn-rmynt,.pn-slut-cta,
  .pn-vag.syns li,.pn-vag-lapp{animation:none}
  .pn-app.ratt .pn-gnistor i,.pn-vag li.nu .pn-mynt::after{animation:none;opacity:0}
}