/* ===================================================================
   OBS – CSS:en är uppdelad i två filer (2026-10-19, för snabbare laddning):
     site.css   gemensamt + allt som startsidan, spelen (/games, /games/{spel})
                och FAQ behöver. Laddas på alla sidor.
     sidor.css  resten: Arena, kontot, kassan, statister, villkor, Så spelar du,
                Om oss, kontakt m.m. Laddas på alla sidor UTOM de fyra ovan
                (ViewData["BaraBasCss"] = true i Index, Spel, SpelDetalj, Faq).
   Ny stil för en enskild undersida → sidor.css. Används den på startsidan,
   spelsidorna, FAQ, i sidhuvudet/sidfoten, varukorgen eller cookierutan → site.css.
   =================================================================== */
/* ===================================================================
   Brightland Maze — designsystem
   Byggt från maindesign.html. Huvudfärg: #ff355e. Rubriker: Fraunces (mjuk). Typsnitten ligger lokalt i wwwroot/fonts/.
   =================================================================== */
/* ---------- typsnitt – lokala filer i wwwroot/fonts/, inga externa anrop ---------- */
@font-face{
  font-family:"Fraunces"; font-style:normal; font-weight:300 700; font-display:swap;
  src:url("../fonts/fraunces.woff2") format("woff2");
}
@font-face{
  font-family:"Fraunces"; font-style:italic; font-weight:300 700; font-display:swap;
  src:url("../fonts/fraunces-italic.woff2") format("woff2");
}
@font-face{
  font-family:"Jost"; font-style:normal; font-weight:300 600; font-display:swap;
  src:url("../fonts/jost.woff2") format("woff2");
}
@font-face{
  font-family:"Courier Prime"; font-style:normal; font-weight:400; font-display:swap;
  src:url("../fonts/courier-prime.woff2") format("woff2");
}
@font-face{
  font-family:"Courier Prime"; font-style:normal; font-weight:700; font-display:swap;
  src:url("../fonts/courier-prime-bold.woff2") format("woff2");
}
@font-face{
  font-family:"Courier Prime"; font-style:italic; font-weight:400; font-display:swap;
  src:url("../fonts/courier-prime-italic.woff2") format("woff2");
}
:root{
  /* =================================================================
     FÄRGER – temat "Rosenvatten" (ljust)
     Alla färger på sajten utgår härifrån. Ljust rosa botten, vita kort
     och mörk vinröd text; rosa (#ff355e) är huvudfärgen.
     OBS: namnen är kvar från det mörka temat – --ink är nu sidans LJUSA
     botten och --blush är den MÖRKA texten. --ljus-rgb ger mörka linjer.
     JUST NU används bara Rosa sammet (:root[data-theme="dark"] nedanför) –
     _Layout.cshtml har data-theme="dark" fast. Det ljusa temat avvaktar
     (beslut 2026-10-18) men ligger kvar här för att kunna slås på igen.
     Äldre teman: _fore-farger-2026-10-18/ (sammet) · _fore-farger-2026-10-17/ (skymning)
     *-rgb används för genomskinliga toner: rgba(var(--ink-rgb), .8)
     ================================================================= */
  --ink:#FCE9EF;             /* sidans bakgrund */
  --velvet:#F7D7E2;          /* band och sektioner */
  --plum:#FFFFFF;
  --plum-2:#F3CAD8;
  --ink-rgb:252,233,239;
  --velvet-rgb:247,215,226;
  --plum-rgb:255,255,255;

  --pink:#ff355e;            /* huvudfärg */
  --pink-soft:#b80f3a;        /* används mest som text – mörkare rosa i ljust tema */
  --pink-hot:#ff5074;
  --pink-knapp:#d6153f;      /* knappar och märken med vit text – mörkare rosa ger läsbar kontrast (4,7:1) */
  --pink-knapp-hover:#b8103a;
  --pink-text:#c4103d;       /* rosa text på mörk botten, t.ex. "Maze" i loggan */
  --rosa-rgb:255,53,94;
  --rosa-mjuk-rgb:184,15,58;

  --blush:#2E0D1A;           /* text */
  --muted:#6B3048;           /* dämpad text */
  --brass:#8A5418;           /* guld */
  --paper:#FFFFFF;           /* papperslappar */
  --paper-ink:#3d1020;
  --ljus-rgb:46,13,26;    /* linjer och ljusa slöjor */
  --massing-rgb:138,84,24;
  --dampad-rgb:107,48,72;
  --platshallare-a:#f3cad8;  /* bakgrund bakom bilder som inte laddats än */
  --platshallare-b:#f7d7e2;
  --ok:#1f7a4f;              /* klart/lyckat */
  --fel:#b3261e;             /* problem */
  --fel-rgb:179,38,30;
  --pa-brass:#fff;           /* text på guldfärgad yta */
  color-scheme:light;

  /* ---- typsnitt ---- */
  --display:"Fraunces", Georgia, serif;
  --body:"Jost", "Helvetica Neue", Arial, sans-serif;
  --type:"Courier Prime", "Courier New", monospace;

  /* ---- mått ---- */
  --wrap:1180px;
  --r:2px;
  --header-h:72px;
}
/* =================================================================
   MÖRKT LÄGE – temat "Rosa sammet"
   Sajtens enda tema just nu: _Layout.cshtml har <html data-theme="dark">
   fast (ljust läge och temaknappen togs bort 2026-10-18).
   ================================================================= */
:root[data-theme="dark"]{
  --ink:#3d1020;
  --velvet:#4a1427;
  --plum:#5c1931;
  --plum-2:#6e1f3b;
  --ink-rgb:61,16,32;
  --velvet-rgb:74,20,39;
  --plum-rgb:92,25,49;

  --pink-soft:#FF7B98;
  --pink-knapp:#e0204a;
  --pink-knapp-hover:#c81a42;
  --pink-text:#ff9ab0;
  --rosa-mjuk-rgb:255,123,152;

  --blush:#FFF4F7;
  --muted:#F8CEDB;
  --brass:#F6D3A0;
  --paper:#FFF1F2;
  --paper-ink:#561531;
  --ljus-rgb:255,244,247;
  --massing-rgb:246,211,160;
  --dampad-rgb:248,206,219;

  --platshallare-a:#6e1f3b;
  --platshallare-b:#4a1427;
  --ok:#8FE3BB;
  --fel:#ffb4a8;
  --fel-rgb:255,180,168;
  --pa-brass:#4a1427;
  color-scheme:dark;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  background:var(--ink);
  color:var(--blush);
  font-family:var(--body);
  font-weight:300;
  font-size:17px;
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
/* mjuk färgdimma över hela sajten */
body::before{
  content:"";
  position:fixed; inset:0; z-index:0; pointer-events:none;
  background:
    radial-gradient(900px 620px at 78% -8%, rgba(var(--rosa-rgb),.20), transparent 62%),
    radial-gradient(760px 700px at 6% 24%, rgba(var(--plum-rgb),.55), transparent 70%),
    radial-gradient(1000px 800px at 50% 120%, rgba(var(--massing-rgb),.08), transparent 60%);
}
/* filmkorn */
body::after{
  content:"";
  position:fixed; inset:0; z-index:1; pointer-events:none; opacity:.05;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E");
}
main,header,footer{position:relative; z-index:2}
img{max-width:100%; display:block}
a{color:inherit; text-decoration:none}
button{font:inherit; color:inherit; cursor:pointer}
::selection{background:var(--pink); color:#fff}
.wrap{width:min(var(--wrap), calc(100% - 44px)); margin-inline:auto}
.skip-link{
  position:absolute; left:-9999px; top:0; z-index:200;
  background:var(--pink-knapp); color:#fff; padding:12px 20px;
  font-family:var(--type); font-size:.8rem; letter-spacing:.14em; text-transform:uppercase;
}
.skip-link:focus{left:0}
/* ---------- typografi ---------- */
h1,h2,h3,h4{font-family:var(--display); font-weight:400; margin:0; line-height:1.08; letter-spacing:-.005em}
h1{font-size:clamp(2.9rem, 7.4vw, 5.5rem); font-weight:400}
h2{font-size:clamp(2.1rem, 4.2vw, 3.3rem)}
h3{font-size:1.42rem; line-height:1.2}
p{margin:0 0 1.1em}
em{font-style:italic}
.eyebrow{
  font-family:var(--type); font-size:.72rem; letter-spacing:.30em;
  text-transform:uppercase; color:var(--pink-soft); margin:0 0 20px;
  display:flex; align-items:center; gap:12px;
}
.eyebrow::before{content:""; width:34px; height:1px; background:var(--pink); flex:none}
.eyebrow.center{justify-content:center}
.lead{font-size:1.16rem; color:var(--muted); max-width:56ch}
/* ---------- header ---------- */
/* Scopad till sidhuvudet — annars fastnar även <header> inuti innehållet,
   t.ex. detaljvyns rubrikblock. */
body > header{
  position:sticky; top:0; z-index:60;
  backdrop-filter:blur(14px);
  background:rgba(var(--ink-rgb),.78);
  border-bottom:1px solid rgba(var(--ljus-rgb),.10);
}
.bar{display:flex; align-items:center; justify-content:space-between; gap:24px; padding:14px 0}
.brand{display:flex; align-items:center; gap:13px; flex:none}
.brand img{height:34px; width:auto}
.brand-word{
  font-family:var(--display); font-size:1.24rem; font-weight:500;
  letter-spacing:.01em; color:var(--blush); line-height:1; white-space:nowrap;
}
.brand-word em{font-style:italic; color:var(--pink-text)}
@media (max-width:420px){
  .brand-word{font-size:1.05rem}
}
nav.main{display:flex; gap:30px; align-items:center}
nav.main a{
  font-size:.83rem; letter-spacing:.14em; text-transform:uppercase; font-weight:400;
  color:var(--muted); padding:6px 0; position:relative; transition:color .25s;
}
nav.main a::after{
  content:""; position:absolute; left:0; right:100%; bottom:0; height:1px;
  background:var(--pink); transition:right .3s ease;
}
nav.main a:hover{color:var(--blush)}
nav.main a:hover::after, nav.main a.active::after{right:0}
nav.main a.active{color:var(--blush)}
.burger{
  display:none; background:none; border:1px solid rgba(var(--ljus-rgb),.22);
  padding:9px 12px; border-radius:var(--r); color:var(--blush);
  font-family:var(--type); font-size:.74rem; letter-spacing:.14em; text-transform:uppercase;
}
/* ---------- språkväljare med flaggor ---------- */
.bar-hoger{display:flex; align-items:center; gap:18px; flex:none}
.sprakval{
  display:flex; align-items:center; gap:2px;
  border:1px solid rgba(var(--ljus-rgb),.18); border-radius:100px; padding:3px;
}
.sprakval > a, .sprakval > span{
  display:grid; place-items:center; padding:6px 8px; border-radius:100px; line-height:0;
  transition:background .25s;
}
.sprakval .flagga{
  display:block; width:22px; height:15px; border-radius:2px; overflow:hidden;
  box-shadow:0 0 0 1px rgba(255,255,255,.18);
}
/* det språk man inte står på är nedtonat tills man pekar på det */
.sprakval > a .flagga{opacity:.5; filter:saturate(.35); transition:opacity .25s, filter .25s, transform .25s}
.sprakval > a:hover{background:rgba(var(--ljus-rgb),.08)}
.sprakval > a:hover .flagga, .sprakval > a:focus-visible .flagga{opacity:1; filter:none; transform:scale(1.08)}
.sprakval > .on{background:rgba(var(--rosa-rgb),.18); box-shadow:inset 0 0 0 1px var(--pink)}
.flagga-text{font-family:var(--type); font-size:.7rem; letter-spacing:.14em; text-transform:uppercase; line-height:1}
/* text som bara skärmläsare ser */
.dold-text{
  position:absolute !important; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0;
}
/* ---------- knappar ---------- */
.btn{
  display:inline-flex; align-items:center; gap:10px;
  padding:14px 26px; border-radius:100px; border:1px solid transparent;
  font-size:.82rem; letter-spacing:.16em; text-transform:uppercase; font-weight:500;
  transition:transform .2s, background .25s, color .25s, border-color .25s;
}
.btn:hover{transform:translateY(-2px)}
.btn-solid{background:var(--pink-knapp); color:#fff; box-shadow:0 14px 34px -16px rgba(var(--rosa-rgb),.9)}
.btn-solid:hover{background:var(--pink-knapp-hover); color:#fff}
.btn-ghost{background:transparent; border-color:rgba(var(--ljus-rgb),.30); color:var(--blush)}
.btn-ghost:hover{border-color:var(--pink); color:var(--pink-soft)}
.btn[disabled]{opacity:.5; pointer-events:none}
/* ---------- sektioner ---------- */
.section{padding:100px 0}
.section.tight{padding:74px 0}
.section-head{max-width:60ch; margin-bottom:56px}
.section-head.center{margin-inline:auto; text-align:center}
.section-head.center .eyebrow{justify-content:center}
.section-head.center .lead{margin-inline:auto}
.band{background:var(--velvet); border-block:1px solid rgba(var(--ljus-rgb),.1)}
/* ===================================================================
   HERO — fullbredd videobakgrund, centrerat innehåll
   =================================================================== */
.hero{
  position:relative; isolation:isolate;
  min-height:clamp(560px, 86vh, 900px);
  display:grid; place-items:center;
  padding:110px 0 96px;
  text-align:center;
  overflow:hidden;
}
/* videolagret täcker hela hero-ytan */
.hero-bg{position:absolute; inset:0; overflow:hidden; z-index:0; pointer-events:none}
.hero-bg video{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
  opacity:0; transition:opacity 1.8s ease;
}
.hero-bg.ready video{opacity:.62}
.hero-bg .hero-poster{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; opacity:.62}
/* När filmen syns (.ready) tonas stillbilden bort – annars lyser den igenom den halvgenomskinliga filmen.
   Väntar tills filmen tonat in klart (1,8 s), så att bakgrunden inte mörknar under övergången.
   Faller filmen bort (fel) tas .ready bort och bilden kommer tillbaka direkt. */
.hero-bg.ready .hero-poster{opacity:0; transition:opacity .6s ease 1.8s}
/* levande reservbakgrund om videon saknas eller inte laddar */
.hero-bg::before{
  content:""; position:absolute; inset:-14%;
  background:
    radial-gradient(38% 46% at 26% 34%, rgba(var(--rosa-rgb),.30), transparent 62%),
    radial-gradient(34% 40% at 72% 62%, rgba(var(--plum-rgb),.44), transparent 66%),
    radial-gradient(30% 38% at 54% 12%, rgba(var(--massing-rgb),.12), transparent 66%);
  filter:blur(24px);
  animation:fogdrift 34s ease-in-out infinite alternate;
}
@keyframes fogdrift{
  0%{transform:translate3d(-3%,-2%,0) scale(1.06)}
  50%{transform:translate3d(4%,3%,0) scale(1.14)}
  100%{transform:translate3d(-2%,4%,0) scale(1.08)}
}
/* mörkläggning så texten alltid håller kontrast mot videon */
.hero-bg::after{
  content:""; position:absolute; inset:0;
  background:
    radial-gradient(70% 70% at 50% 50%, rgba(var(--ink-rgb),.55) 0%, rgba(var(--ink-rgb),.80) 100%),
    linear-gradient(to bottom, var(--ink) 0%, rgba(var(--ink-rgb),0) 22%, rgba(var(--ink-rgb),0) 62%, var(--ink) 100%);
}
.hero-inner{position:relative; z-index:1; max-width:920px; margin-inline:auto}
.hero .eyebrow{justify-content:center}
.hero h1 span{display:block}
.hero h1 .accent{font-style:italic; color:var(--pink-text)}
.hero .lead{margin:28px auto 36px; max-width:60ch}
.hero-cta{display:flex; gap:14px; flex-wrap:wrap; justify-content:center}
/* citatet under knapparna */
.hero-citat{margin:56px auto 0; max-width:640px}
.hero-citat blockquote{
  margin:0; font-family:var(--display); font-style:italic; font-weight:400;
  font-size:clamp(1.15rem, 2.1vw, 1.45rem); line-height:1.5; color:var(--blush);
  text-wrap:balance;
}
.hero-citat figcaption{
  margin-top:16px; font-family:var(--type); font-size:.72rem; letter-spacing:.18em;
  text-transform:uppercase; color:var(--muted);
}
.hero-citat figcaption::before{content:"— "; color:var(--pink-text)}
/* pil som lockar ner i sidan */
.hero-scroll{
  position:absolute; left:50%; bottom:28px; z-index:2; transform:translateX(-50%);
  font-family:var(--type); font-size:.64rem; letter-spacing:.24em; text-transform:uppercase;
  color:var(--muted); display:grid; justify-items:center; gap:10px;
}
.hero-scroll::after{
  content:""; width:1px; height:34px;
  background:linear-gradient(to bottom, var(--pink), transparent);
  animation:scrollpulse 2.4s ease-in-out infinite;
}
@keyframes scrollpulse{0%,100%{opacity:.35; height:24px} 50%{opacity:1; height:38px}}
/* ---------- steg + röd tråd ---------- */
.steps-wrap{position:relative}
.thread{position:absolute; inset:0; width:100%; height:100%; pointer-events:none; z-index:0}
.thread path{
  fill:none; stroke:var(--pink); stroke-width:1.6; stroke-linecap:round;
  stroke-dasharray:1800; stroke-dashoffset:1800; opacity:.85;
}
.thread.drawn path{transition:stroke-dashoffset 2.4s cubic-bezier(.4,0,.2,1); stroke-dashoffset:0}
.steps{display:grid; grid-template-columns:repeat(3,1fr); gap:34px; position:relative; z-index:1}
.step{padding:34px 30px; background:rgba(var(--velvet-rgb),.72); border:1px solid rgba(var(--ljus-rgb),.12); border-radius:var(--r)}
.step .no{
  font-family:var(--type); font-size:.74rem; letter-spacing:.2em; color:var(--pink-text);
  display:flex; align-items:center; gap:10px; margin-bottom:18px;
}
.step .no::before{content:""; width:9px; height:9px; border-radius:50%; background:var(--pink); box-shadow:0 0 0 5px rgba(var(--rosa-rgb),.16)}
.step h3{margin-bottom:10px}
.step p{color:var(--muted); font-size:.97rem; margin:0}
/* ---------- fallkort ---------- */
.grid-cases{display:grid; grid-template-columns:repeat(auto-fill, minmax(min(320px, 100%),1fr)); gap:30px}
.case{
  position:relative; display:flex; flex-direction:column;
  background:linear-gradient(168deg, rgba(var(--plum-rgb),.94), rgba(var(--ink-rgb),.96));
  border:1px solid rgba(var(--ljus-rgb),.13); border-radius:var(--r);
  overflow:hidden; cursor:pointer;
  transition:transform .3s ease, border-color .3s ease, box-shadow .3s ease;
}
.case-inner{display:flex; flex-direction:column; flex:1; padding:22px 28px 26px}
/* ---- produktbild ---- */
.case-bild{
  position:relative; aspect-ratio:16/9; overflow:hidden;
  background:linear-gradient(150deg, var(--platshallare-a), var(--platshallare-b));
  flex:none;
}
.case-bild img{
  width:100%; height:100%; object-fit:cover; display:block;
  transition:transform .7s cubic-bezier(.2,.6,.2,1);
}
.case:hover .case-bild img{transform:scale(1.055)}
.case-bild-toning{
  position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(to bottom, rgba(var(--ink-rgb),.06) 38%, rgba(var(--ink-rgb),.55) 76%, rgba(var(--ink-rgb),.97));
}
.case-bild-reserv{
  position:absolute; inset:0; display:grid; place-items:center;
  font-family:var(--type); font-size:1.1rem; letter-spacing:.3em;
  color:rgba(var(--ljus-rgb),.16);
}
.case-chip{
  position:absolute; top:12px; right:12px; z-index:2;
  background:rgba(var(--ink-rgb),.72); backdrop-filter:blur(7px);
}
.case-trailer{
  position:absolute; left:14px; bottom:13px; z-index:2;
  display:flex; align-items:center; gap:6px;
  font-family:var(--type); font-size:.64rem; letter-spacing:.18em;
  text-transform:uppercase; color:var(--blush);
  opacity:.85; transition:opacity .3s, color .3s;
}
.case-trailer svg{width:13px; height:13px; color:var(--pink-text)}
.case:hover .case-trailer{opacity:1; color:var(--blush)}
/* hela kortet klickbart, men köpknappen ligger ovanpå */
.case-lank{color:inherit; transition:color .25s}
.case-lank::after{content:""; position:absolute; inset:0; z-index:3}
.case:hover .case-lank{color:var(--pink-soft)}
.case-foot .buy{position:relative; z-index:4}
.case-betyg{
  display:flex; align-items:center; gap:5px;
  font-family:var(--type); font-size:.74rem; letter-spacing:.06em; color:var(--blush);
}
.case-betyg small{color:var(--muted); font-size:.68rem}
.stjarnor{color:var(--pink-text); letter-spacing:.08em}
.case::before{
  content:""; position:absolute; top:0; left:0; right:0; height:2px;
  background:linear-gradient(90deg, var(--pink), rgba(var(--rosa-rgb),0));
  transform:scaleX(.22); transform-origin:left; transition:transform .45s ease;
}
.case:hover{transform:translateY(-6px); border-color:rgba(var(--rosa-rgb),.45); box-shadow:0 30px 60px -34px rgba(0,0,0,.9)}
.case:hover::before{transform:scaleX(1)}
.case-top{display:flex; justify-content:space-between; align-items:flex-start; gap:14px; margin-bottom:22px}
.case-no{font-family:var(--type); font-size:.72rem; letter-spacing:.18em; color:var(--muted)}
.chip{
  font-family:var(--type); font-size:.64rem; letter-spacing:.16em; text-transform:uppercase;
  padding:5px 11px; border-radius:100px; border:1px solid currentColor; white-space:nowrap;
}
.chip.fysisk{color:var(--brass)}
.chip.online{color:var(--pink-soft)}
.case h3{margin-bottom:8px}
.case .tag{font-family:var(--display); font-style:italic; color:var(--pink-soft); font-size:1rem; margin-bottom:14px}
.case p{color:var(--muted); font-size:.96rem}
.case-facts{
  list-style:none; margin:6px 0 22px; padding:18px 0 0; border-top:1px dashed rgba(var(--ljus-rgb),.2);
  font-family:var(--type); font-size:.78rem; letter-spacing:.06em; color:var(--muted);
  display:grid; gap:7px;
}
.case-facts li{display:flex; justify-content:space-between; gap:14px}
.case-facts b{font-weight:400; color:var(--blush)}
.dots{letter-spacing:.2em; color:var(--pink-text)}
.dots span{color:rgba(var(--ljus-rgb),.25)}
.case-foot{margin-top:auto; display:flex; align-items:center; justify-content:space-between; gap:16px}
.price{font-family:var(--display); font-size:1.5rem; color:var(--blush)}
.price small{font-family:var(--type); font-size:.68rem; letter-spacing:.12em; color:var(--muted); display:block; margin-top:2px}
.case-foot .buy{
  font-family:var(--type); font-size:.74rem; letter-spacing:.16em; text-transform:uppercase;
  color:var(--pink-text); background:none; border:0; padding:8px 0;
}
.case-foot .buy::after{content:""; position:absolute; left:0; right:0; bottom:2px; height:1px; background:var(--pink); opacity:.45; transition:opacity .25s}
.case-foot .buy:hover::after{opacity:1}
/* ---------- sök + filter ---------- */
.controls{display:flex; gap:12px; margin-bottom:22px; flex-wrap:wrap; align-items:center}
.search-wrap{flex:1 1 260px; position:relative}
.search-input{
  width:100%; background:rgba(var(--velvet-rgb),.6);
  border:1px solid rgba(var(--ljus-rgb),.2); border-radius:100px;
  padding:13px 20px 13px 46px; color:var(--blush);
  font-family:var(--body); font-size:1rem; outline:none;
  transition:border-color .2s;
}
.search-input::placeholder{color:rgba(var(--dampad-rgb),.6)}
.search-input:focus{border-color:rgba(var(--rosa-rgb),.6)}
.search-icon{
  position:absolute; left:20px; top:50%; transform:translateY(-50%);
  color:var(--muted); pointer-events:none; width:16px; height:16px;
}
.filters{display:flex; gap:10px; flex-wrap:wrap; margin-bottom:16px}
.filters button{
  background:none; border:1px solid rgba(var(--ljus-rgb),.2); color:var(--muted);
  padding:10px 20px; border-radius:100px; font-family:var(--type); font-size:.74rem;
  letter-spacing:.14em; text-transform:uppercase; transition:.25s;
}
.filters button:hover{color:var(--blush); border-color:rgba(var(--ljus-rgb),.45)}
.filters button.on{background:var(--pink-knapp); border-color:var(--pink-knapp); color:#fff}
/* ---------- taggar ---------- */
.taggfilter{display:flex; gap:8px; flex-wrap:wrap; align-items:center; margin:0 0 18px}
.taggfilter-etikett{
  font-family:var(--type); font-size:.68rem; letter-spacing:.18em; text-transform:uppercase;
  color:var(--muted); margin-right:4px;
}
.taggfilter .tagg{
  display:inline-flex; align-items:center; gap:2px;
  background:rgba(var(--ljus-rgb),.05); border:1px dashed rgba(var(--ljus-rgb),.25); color:var(--blush);
  padding:6px 12px 6px 10px; border-radius:100px; font-family:var(--body); font-size:.86rem; line-height:1.2;
  transition:background .2s, border-color .2s, color .2s, transform .2s;
}
.taggfilter .tagg .tagg-hash{color:var(--pink-text); font-weight:600; margin-right:1px}
.taggfilter .tagg small{
  margin-left:6px; font-family:var(--type); font-size:.68rem; color:var(--muted);
  background:rgba(var(--ljus-rgb),.08); border-radius:100px; padding:1px 7px;
}
.taggfilter .tagg:hover{border-color:rgba(var(--rosa-rgb),.7); background:rgba(var(--rosa-rgb),.08)}
.taggfilter .tagg.on{background:var(--pink-knapp); border:1px solid var(--pink-knapp); color:#fff}
.taggfilter .tagg.on .tagg-hash{color:#fff}
.taggfilter .tagg.on small{background:rgba(255,255,255,.2); color:#fff}
.taggfilter .tagg:active{transform:scale(.96)}
.taggfilter-rensa{
  background:none; border:0; color:var(--pink-text); font-family:var(--type); font-size:.7rem;
  letter-spacing:.14em; text-transform:uppercase; text-decoration:underline; text-underline-offset:3px; padding:6px 8px;
}
.taggfilter-rensa:hover{color:var(--blush)}
.taggfilter-rensa[hidden]{display:none}
.case-taggar{list-style:none; display:flex; flex-wrap:wrap; gap:6px; margin:12px 0 0; padding:0}
.case-taggar li{margin:0}
.tagg-lank{
  position:relative; z-index:4; display:inline-block;
  font-size:.78rem; line-height:1.2; color:var(--pink-soft);
  background:rgba(var(--rosa-rgb),.1); border:1px solid rgba(var(--rosa-rgb),.25);
  padding:3px 9px; border-radius:100px; text-decoration:none; transition:background .2s, color .2s, border-color .2s;
}
.tagg-lank:hover, .tagg-lank:focus-visible{background:rgba(var(--rosa-rgb),.22); color:var(--blush); border-color:rgba(var(--rosa-rgb),.6)}
.tagg-lank.on{background:var(--pink-knapp); border-color:var(--pink-knapp); color:#fff}
.detalj-taggar{margin-top:14px}
@media (max-width:700px){
  /* många taggar: en rad som går att svepa i stället för en hög */
  .taggfilter{flex-wrap:nowrap; overflow-x:auto; margin-right:-22px; padding-right:22px; scrollbar-width:none;
    -webkit-mask-image:linear-gradient(90deg,#000 85%,transparent); mask-image:linear-gradient(90deg,#000 85%,transparent)}
  .taggfilter::-webkit-scrollbar{display:none}
  .taggfilter .tagg, .taggfilter-rensa, .taggfilter-etikett{flex:none}
  .taggfilter-etikett{order:-2}
  .taggfilter-rensa{order:-1}
}
.results-hint{
  font-family:var(--type); font-size:.72rem; letter-spacing:.18em;
  color:var(--muted); text-transform:uppercase; margin:0 0 30px;
}
/* ---------- vittnesmål ---------- */
.witnesses{display:grid; grid-template-columns:repeat(3,1fr); gap:26px}
.witness{
  background:var(--paper); color:var(--paper-ink); padding:32px 28px 26px; border-radius:var(--r);
  font-family:var(--type); font-size:.92rem; line-height:1.7; position:relative;
  transform:rotate(-.6deg); box-shadow:0 24px 50px -30px rgba(0,0,0,.85);
}
.witness:nth-child(2){transform:rotate(.5deg)}
.witness:nth-child(3){transform:rotate(-.25deg)}
.witness::before{
  content:attr(data-etikett); position:absolute; top:-10px; left:26px; background:var(--pink-knapp); color:#fff;
  font-size:.6rem; letter-spacing:.2em; text-transform:uppercase; padding:4px 12px; border-radius:100px;
}
.witness .sig{
  font-family:var(--display); font-style:italic; font-size:1.1rem; margin-top:16px;
  padding-top:14px; border-top:1px solid rgba(var(--velvet-rgb),.2);
}
.witness .sig small{display:block; font-family:var(--type); font-style:normal; font-size:.68rem; letter-spacing:.12em; opacity:.6; margin-top:3px}
/* ---------- split (om oss) ---------- */
.split{display:grid; grid-template-columns:1fr 1fr; gap:64px; align-items:center}
.split.rev .split-art{order:-1}
.split-art{position:relative; display:grid; place-items:center; padding:20px; min-height:280px}
.split-art img{width:78%; opacity:.94; filter:drop-shadow(0 0 46px rgba(var(--rosa-rgb),.28))}
.frame{position:absolute; inset:0; border:1px solid rgba(var(--ljus-rgb),.16); border-radius:var(--r)}
.frame::before,.frame::after{content:""; position:absolute; width:16px; height:16px; border:1px solid var(--pink)}
.frame::before{top:-1px; left:-1px; border-right:0; border-bottom:0}
.frame::after{bottom:-1px; right:-1px; border-left:0; border-top:0}
.values{display:grid; grid-template-columns:repeat(3,1fr); gap:1px; background:rgba(var(--ljus-rgb),.14); border:1px solid rgba(var(--ljus-rgb),.14)}
.value{background:var(--ink); padding:36px 30px}
.value h3{font-size:1.2rem; margin-bottom:10px}
.value p{color:var(--muted); font-size:.95rem; margin:0}
/* ---------- teamet (Om oss): porträtt i välvda ramar ---------- */
.team .section-head{max-width:780px; margin-inline:auto}
.team .section-head .lead{max-width:560px; margin-inline:auto}
.portratt-lista > .portratt:nth-child(2){margin-top:46px}
/* lite förskjutet – som på en vägg */
.portratt{
  position:relative; padding:34px 28px 30px; border-radius:220px 220px 18px 18px;
  background:
    radial-gradient(120% 60% at 50% 0%, rgba(var(--rosa-rgb),.13), transparent 60%),
    linear-gradient(180deg, rgba(var(--plum-rgb),.7), rgba(var(--velvet-rgb),.55));
  border:1px solid rgba(var(--massing-rgb),.28);
  box-shadow:0 30px 60px -38px rgba(0,0,0,.55), inset 0 0 0 6px rgba(var(--ink-rgb),.35), inset 0 0 0 7px rgba(var(--massing-rgb),.14);
  transition:transform .5s ease, box-shadow .5s ease;
}
.portratt:hover{transform:translateY(-4px); box-shadow:0 38px 70px -36px rgba(var(--rosa-rgb),.35), inset 0 0 0 6px rgba(var(--ink-rgb),.35), inset 0 0 0 7px rgba(var(--massing-rgb),.22)}
.portratt-bild{
  position:relative; aspect-ratio:4/5; border-radius:999px 999px 10px 10px; overflow:hidden;
  background:linear-gradient(160deg, rgba(var(--rosa-mjuk-rgb),.35), rgba(var(--plum-rgb),.9) 70%);
  box-shadow:0 0 0 1px rgba(var(--massing-rgb),.55), 0 0 0 7px rgba(var(--ink-rgb),.55), 0 0 0 8px rgba(var(--massing-rgb),.3);
}
.portratt-bild img{width:100%; height:100%; object-fit:cover; object-position:50% 25%; transition:transform 1.2s ease; filter:saturate(.92) contrast(1.02)}
.portratt-bild::after{          /* mjukt rosa skimmer över fotot */
  content:""; position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(180deg, rgba(var(--rosa-mjuk-rgb),.08), transparent 40%, rgba(var(--ink-rgb),.35));
}
.portratt:hover .portratt-bild img{transform:scale(1.04)}
@media (max-width: 1000px){
  .portratt-lista > .portratt:nth-child(2){margin-top:0}
}
@media (prefers-reduced-motion: reduce){
  .portratt, .portratt-bild img{transition:none}
  .portratt:hover, .portratt:hover .portratt-bild img{transform:none}
}
/* ---------- arena ---------- */
.arena-panel{
  background:linear-gradient(160deg, rgba(var(--plum-rgb),.72), rgba(var(--ink-rgb),.9));
  border:1px solid rgba(var(--ljus-rgb),.14); border-radius:var(--r); padding:46px 44px;
}
.note{font-family:var(--type); font-size:.76rem; color:var(--muted); margin-top:16px}
.note.ok{color:var(--brass)}
.note.fel{color:var(--pink-soft)}
/* minimysterium */
.mini{display:grid; grid-template-columns:1.05fr .95fr; gap:40px; align-items:start}
/* ---------- faq ---------- */
.faq{border-top:1px solid rgba(var(--ljus-rgb),.14); max-width:860px}
.q{border-bottom:1px solid rgba(var(--ljus-rgb),.14)}
.q button{
  width:100%; background:none; border:0; text-align:left; padding:26px 44px 26px 0;
  font-family:var(--display); font-size:1.22rem; color:var(--blush); position:relative; line-height:1.3;
}
.q button::after{
  content:"+"; position:absolute; right:6px; top:50%; transform:translateY(-50%);
  font-family:var(--body); font-size:1.4rem; color:var(--pink-text); transition:transform .3s;
}
.q.open button::after{transform:translateY(-50%) rotate(45deg)}
.q .a{max-height:0; overflow:hidden; transition:max-height .4s ease}
.q .a p{color:var(--muted); font-size:1rem; padding-right:44px; margin:0 0 26px}
.q .a p:not(:last-child){margin-bottom:14px}   /* svar med flera stycken (Infrastruktur/Faqtext.cs) */
/* ---------- kontakt ---------- */
.contact{display:grid; grid-template-columns:1.15fr .85fr; gap:60px; align-items:start}
.cta-band .lead{margin:0 auto 32px}
/* ---------- footer ---------- */
footer{border-top:1px solid rgba(var(--ljus-rgb),.12); padding:60px 0 40px; background:rgba(var(--ink-rgb),.7)}
.foot-grid{display:grid; grid-template-columns:1.4fr 1fr 1fr 1fr; gap:40px}
.foot-logo{width:152px; height:auto; margin-bottom:20px}
.foot-grid p{color:var(--muted); font-size:.93rem; max-width:34ch}
.foot-grid h2{font-family:var(--type); font-size:.72rem; letter-spacing:.18em; text-transform:uppercase; color:var(--blush); margin-bottom:16px; font-weight:400}
.foot-grid ul{list-style:none; margin:0; padding:0; display:grid; gap:10px}
.foot-grid ul a{color:var(--muted); font-size:.94rem}
.foot-grid ul a:hover{color:var(--pink-soft)}
.foot-bottom{
  margin-top:48px; padding-top:24px; border-top:1px solid rgba(var(--ljus-rgb),.1);
  display:flex; justify-content:space-between; gap:20px; flex-wrap:wrap;
  font-family:var(--type); font-size:.72rem; letter-spacing:.1em; color:var(--muted);
}
/* ===================================================================
   DETALJVY — samma markup i modalen och på /spel/{slug}
   =================================================================== */
/* banderollen är beskuren tills trailern startas, då fälls den ut till 16:9 */
/* Höjden sätts explicit — aspect-ratio ihop med max-height får webbläsaren
   att krympa bredden i stället för höjden. Vid uppspelning räknar site.js
   ut exakt 16:9-höjd utifrån bredden. */
.detalj-media{
  position:relative; overflow:hidden;
  height:clamp(210px, 33vh, 340px);
  background:linear-gradient(150deg, var(--platshallare-a), var(--platshallare-b));
  transition:height .6s cubic-bezier(.16,.84,.34,1);
}
.detalj-media img{width:100%; height:100%; object-fit:cover; display:block}
.detalj-media video{width:100%; height:100%; object-fit:contain; display:block; background:#000}
.detalj-media-reserv{
  position:absolute; inset:0; display:grid; place-items:center;
  font-family:var(--type); letter-spacing:.3em; color:rgba(var(--ljus-rgb),.16);
}
.detalj-media::after{
  content:""; position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(to bottom, rgba(var(--ink-rgb),.45) 0%, transparent 30%, transparent 55%, rgba(var(--ink-rgb),.85) 100%);
  transition:opacity .4s ease;
}
.detalj-media.spelar::after{opacity:0}
.detalj-play{
  position:absolute; inset:0; z-index:2;
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:14px;
  background:none; border:0; color:var(--blush);
}
.detalj-play-ring{
  width:66px; height:66px; border-radius:50%;
  display:grid; place-items:center;
  border:1px solid rgba(var(--rosa-rgb),.6); background:rgba(var(--rosa-rgb),.14);
  backdrop-filter:blur(6px); color:#fff;
  transition:transform .35s cubic-bezier(.16,.84,.34,1), background .3s, box-shadow .3s;
  box-shadow:0 0 0 0 rgba(var(--rosa-rgb),.45);
}
.detalj-play-ring svg{width:26px; height:26px; margin-left:3px}
.detalj-play-text{
  font-family:var(--type); font-size:.68rem; letter-spacing:.24em; text-transform:uppercase;
  transition:color .3s;
}
.detalj-play:hover .detalj-play-ring{
  transform:scale(1.09); background:var(--pink);
  box-shadow:0 0 0 12px rgba(var(--rosa-rgb),.13);
}
.detalj-play:hover .detalj-play-text{color:#fff}
.detalj-media.spelar .detalj-play{display:none}
.detalj-huvud{padding:34px 46px 0}
.detalj-huvud .eyebrow{display:flex; align-items:center; gap:14px; margin-bottom:16px}
.detalj-titel{font-size:clamp(1.9rem, 3.4vw, 2.9rem); line-height:1.05}
.detalj-tagline{
  font-family:var(--display); font-style:italic; color:var(--pink-soft);
  font-size:1.16rem; margin:12px 0 0;
}
.detalj-betyg{
  display:flex; align-items:center; gap:10px; flex-wrap:wrap;
  margin:18px 0 0; font-family:var(--type); font-size:.8rem; color:var(--muted);
}
.detalj-betyg .stjarnor{font-size:1rem}
.detalj-betyg b{color:var(--blush); font-weight:400}
.detalj-kropp{
  display:grid; grid-template-columns:1.55fr .82fr; gap:46px;
  padding:34px 46px 46px; align-items:start;
}
.detalj-text .lead{max-width:62ch}
.detalj-rubrik{
  font-family:var(--type); font-size:.72rem; letter-spacing:.22em; text-transform:uppercase;
  color:var(--pink-soft); font-weight:400; margin:38px 0 18px;
}
.innehall{list-style:none; padding:0; margin:0; display:grid; gap:10px}
.innehall li{position:relative; padding-left:24px; color:var(--muted); font-size:.96rem}
.innehall li::before{
  content:""; position:absolute; left:0; top:.68em;
  width:10px; height:1px; background:var(--pink);
}
.recensioner{display:grid; gap:16px}
.recension{
  border:1px solid rgba(var(--ljus-rgb),.12); border-left:2px solid rgba(var(--rosa-rgb),.55);
  background:rgba(var(--ink-rgb),.45); border-radius:var(--r); padding:20px 24px;
}
.recension-topp{display:flex; justify-content:space-between; align-items:center; gap:14px; margin-bottom:12px}
.recension-datum{font-family:var(--type); font-size:.68rem; letter-spacing:.12em; color:var(--muted)}
.recension p{color:var(--muted); font-size:.97rem; margin:0 0 14px}
.recension-sig{font-family:var(--display); font-style:italic; font-size:1.06rem; color:var(--blush); margin:0}
.recension-sig small{
  display:block; font-family:var(--type); font-style:normal;
  font-size:.68rem; letter-spacing:.1em; color:var(--muted); margin-top:4px;
}
.detalj-sido{position:sticky; top:22px}
.detalj-fakta{
  list-style:none; margin:0 0 22px; padding:0;
  border:1px solid rgba(var(--ljus-rgb),.14); border-radius:var(--r);
}
.detalj-fakta li{
  display:flex; justify-content:space-between; gap:14px; padding:13px 18px;
  border-bottom:1px dashed rgba(var(--ljus-rgb),.14);
  font-family:var(--type); font-size:.76rem; letter-spacing:.05em; color:var(--muted);
}
.detalj-fakta li:last-child{border-bottom:0}
.detalj-fakta b{font-weight:400; color:var(--blush)}
.detalj-kop{
  display:grid; gap:18px; justify-items:start;
  border:1px solid rgba(var(--rosa-rgb),.3); background:rgba(var(--rosa-rgb),.06);
  border-radius:var(--r); padding:24px;
}
/* egen sida: ge detaljvyn samma ram som modalen */
.detalj-sida{
  background:linear-gradient(168deg, rgba(var(--plum-rgb),.7), rgba(var(--ink-rgb),.85));
  border:1px solid rgba(var(--ljus-rgb),.13); border-radius:var(--r); overflow:hidden;
}
.tillbaka{
  font-family:var(--type); font-size:.74rem; letter-spacing:.16em;
  text-transform:uppercase; margin-bottom:24px;
}
.tillbaka a{color:var(--muted); transition:color .25s}
.tillbaka a:hover{color:var(--pink-soft)}
/* ===================================================================
   MODALEN — fälls upp från kortet
   =================================================================== */
.spelmodal{position:fixed; inset:0; z-index:200; display:grid; place-items:center; padding:26px}
.spelmodal[hidden]{display:none}
.spelmodal-bakgrund{
  position:absolute; inset:0;
  background:rgba(var(--ink-rgb),.74); backdrop-filter:blur(9px);
  opacity:0; transition:opacity .45s ease;
}
.spelmodal.on .spelmodal-bakgrund{opacity:1}
.spelmodal-panel{
  position:relative; z-index:1;
  width:min(1140px, 100%); max-height:92vh;
  display:flex; flex-direction:column; overflow:hidden;
  background:linear-gradient(168deg, rgba(var(--plum-rgb),.98), rgba(var(--ink-rgb),.99));
  border:1px solid rgba(var(--ljus-rgb),.17); border-radius:4px;
  box-shadow:0 70px 150px -55px rgba(0,0,0,1), 0 0 0 1px rgba(var(--rosa-rgb),.08);
  opacity:0;
  transform:translate(var(--fx,0px), var(--fy,0px)) scale(var(--fs,.92));
  transition:opacity .34s ease, transform .56s cubic-bezier(.16,.84,.34,1);
  will-change:transform, opacity;
}
.spelmodal.on .spelmodal-panel{opacity:1}
/* används medan JS placerar panelen över kortet, före uppfällningen */
.spelmodal-panel.utan-overgang{transition:none}
.spelmodal-scroll{overflow-y:auto; overscroll-behavior:contain; flex:1}
.spelmodal-stang{
  position:absolute; top:16px; right:16px; z-index:5;
  width:44px; height:44px; border-radius:50%;
  display:grid; place-items:center;
  border:1px solid rgba(var(--ljus-rgb),.25); background:rgba(var(--ink-rgb),.76);
  backdrop-filter:blur(8px); color:var(--blush);
  transition:border-color .25s, color .25s, transform .25s;
}
.spelmodal-stang svg{width:20px; height:20px}
.spelmodal-stang:hover{border-color:var(--pink); color:var(--pink-soft); transform:rotate(90deg)}
/* innehållet stiger in strax efter panelen */
.spelmodal.on .detalj-media{animation:stig .5s .10s both}
.spelmodal.on .detalj-huvud{animation:stig .5s .17s both}
.spelmodal.on .detalj-kropp{animation:stig .5s .25s both}
@keyframes stig{
  from{opacity:0; transform:translateY(18px)}
  to{opacity:1; transform:none}
}
.spelmodal-laddar{
  display:grid; place-items:center; min-height:420px;
  font-family:var(--type); font-size:.74rem; letter-spacing:.24em;
  text-transform:uppercase; color:var(--muted);
}
.spelmodal-laddar::after{
  content:""; display:block; width:34px; height:1px; margin-top:16px;
  background:var(--pink); animation:laddar 1.3s ease-in-out infinite;
}
@keyframes laddar{0%,100%{opacity:.25; width:18px} 50%{opacity:1; width:46px}}
body.modal-oppen{overflow:hidden}
/* ---------- fokus & reveal ---------- */
input:focus-visible, textarea:focus-visible, select:focus-visible,
button:focus-visible, a:focus-visible{
  outline:2px solid var(--pink); outline-offset:3px;
}
.rv{opacity:0; transform:translateY(22px); transition:opacity .7s ease, transform .7s ease}
.rv.in{opacity:1; transform:none}
@media (max-width:1000px){
  /* ---------- responsivt ---------- */
  .split,.mini,.contact,.detalj-kropp{grid-template-columns:1fr; gap:36px}
  .detalj-sido{position:static}
  .detalj-huvud{padding:28px 30px 0}
  .detalj-kropp{padding:28px 30px 36px}
  .steps,.witnesses,.values{grid-template-columns:1fr}
  .thread{display:none}
  .foot-grid{grid-template-columns:1fr 1fr}
  .section{padding:76px 0}
}
@media (max-width:980px){
  /* Menyn fälls ihop till "Meny"-knappen när länkarna, flaggorna och korgen inte ryms på en rad. */
  nav.main{
    position:fixed; inset:70px 0 auto; flex-direction:column; align-items:flex-start; gap:0;
    background:rgba(var(--ink-rgb),.98); padding:12px 22px 26px; border-bottom:1px solid rgba(var(--ljus-rgb),.14);
    display:none;
  }
  nav.main.open{display:flex}
  nav.main a{padding:15px 0; width:100%; border-bottom:1px solid rgba(var(--ljus-rgb),.08); font-size:.9rem}
  .burger{display:block}
}
@media (max-width:760px){
  body{font-size:16px}
  .hero{min-height:74vh; padding:80px 0 76px}
  .hero-citat{margin-top:40px}
  .hero-scroll{display:none}
  .hero-bg.ready video{opacity:.5}
  .hero-bg .hero-poster{opacity:.5}
  /* mobil: ingen rörlig dimma – sparar processor och batteri */
  .hero-bg::before{animation:none}
  .arena-panel{padding:32px 22px}
  .foot-grid{grid-template-columns:1fr}
  .witness{transform:none}
  .spelmodal{padding:0}
  .spelmodal-panel{max-height:100vh; height:100vh; border:0; border-radius:0; width:100%}
  .detalj-huvud{padding:24px 22px 0}
  .detalj-kropp{padding:24px 22px 40px; gap:30px}
  .detalj-rubrik{margin:30px 0 14px}
  .spelmodal-stang{top:12px; right:12px; width:40px; height:40px}
}
@media (prefers-reduced-motion:reduce){
  *{animation:none !important; transition:none !important}
  .rv{opacity:1; transform:none}
  .thread path{stroke-dashoffset:0}
  html{scroll-behavior:auto}
}
/* ===================================================================
   VARUKORGEN — knappen i menyn, panelen från höger, korgsidan
   =================================================================== */
.korg-knapp{
  position:relative; display:grid; place-items:center;
  width:42px; height:42px; border-radius:100px;
  border:1px solid rgba(var(--ljus-rgb),.18); color:var(--blush);
  transition:border-color .25s, color .25s, background .25s;
}
.korg-knapp:hover{border-color:var(--pink); color:var(--pink-soft)}
.korg-knapp svg{width:20px; height:20px}
.korg-raknare{
  position:absolute; top:-5px; right:-5px; min-width:19px; height:19px; padding:0 5px;
  display:grid; place-items:center; border-radius:100px;
  background:var(--pink-knapp); color:#fff; font-family:var(--type); font-size:.66rem; line-height:1;
  box-shadow:0 0 0 2px var(--ink);
  transform:scale(0); transition:transform .35s cubic-bezier(.3,1.6,.5,1);
}
.korg-knapp.har-varor .korg-raknare{transform:scale(1)}
.korg-knapp.studs{animation:studs .6s cubic-bezier(.3,1.6,.5,1)}
@keyframes studs{
  0%{transform:scale(1)} 30%{transform:scale(1.22) rotate(-8deg)} 60%{transform:scale(.94) rotate(4deg)} 100%{transform:none}
}
/* ---- panelen ---- */
.korg{position:fixed; inset:0; z-index:300}
.korg[hidden]{display:none}
.korg-bakgrund{
  position:absolute; inset:0; background:rgba(var(--ink-rgb),.62); backdrop-filter:blur(6px);
  opacity:0; transition:opacity .4s ease;
}
.korg.on .korg-bakgrund{opacity:1}
.korg-panel{
  position:absolute; top:0; right:0; bottom:0; width:min(460px, 100%);
  display:flex; flex-direction:column;
  background:linear-gradient(180deg, rgba(var(--plum-rgb),.99), rgba(var(--ink-rgb),.995));
  border-left:1px solid rgba(var(--rosa-rgb),.28);
  box-shadow:-40px 0 120px -40px rgba(0,0,0,1);
  transform:translateX(104%); transition:transform .55s cubic-bezier(.16,.84,.3,1);
  outline:none;
}
.korg.on .korg-panel{transform:none}
/* rosa ljuskant som sveper in med panelen */
.korg-panel::before{
  content:""; position:absolute; left:-1px; top:0; bottom:0; width:2px;
  background:linear-gradient(180deg, transparent, var(--pink) 30%, var(--pink) 70%, transparent);
  opacity:0; transition:opacity .6s .25s;
}
.korg.on .korg-panel::before{opacity:.9}
.korg-huvud{
  display:flex; align-items:center; justify-content:space-between; gap:16px;
  padding:24px 28px 20px; border-bottom:1px solid rgba(var(--ljus-rgb),.1);
}
.korg-huvud h2{font-size:1.9rem}
.korg-stang{
  width:40px; height:40px; border-radius:100px; display:grid; place-items:center;
  background:none; border:1px solid rgba(var(--ljus-rgb),.2); color:var(--blush);
  transition:border-color .25s, color .25s, transform .3s;
}
.korg-stang svg{width:18px; height:18px}
.korg-stang:hover{border-color:var(--pink); color:var(--pink-soft); transform:rotate(90deg)}
.korg-scroll{flex:1; overflow-y:auto; overscroll-behavior:contain}
body.korg-oppen{overflow:hidden}
/* ---- innehållet (samma i panel, på /korg och i kassan) ---- */
.korg-innehall{display:flex; flex-direction:column; min-height:100%}
.korg-panel .korg-innehall{padding:0 28px 28px}
.korg-frakt{padding:18px 0 16px; border-bottom:1px dashed rgba(var(--ljus-rgb),.14)}
.korg-frakt p{margin:0 0 10px; font-size:.9rem; color:var(--muted)}
.korg-frakt p b{color:var(--blush); font-weight:500}
.korg-frakt-stapel{display:block; height:3px; border-radius:3px; background:rgba(var(--ljus-rgb),.1); overflow:hidden}
.korg-frakt-stapel i{
  display:block; height:100%; border-radius:3px;
  background:linear-gradient(90deg, var(--pink), var(--pink-soft));
  transition:width .8s cubic-bezier(.2,.8,.2,1);
}
.korg-frakt.klar p b{color:var(--brass)}
.korg-frakt.klar .korg-frakt-stapel i{background:linear-gradient(90deg, var(--brass), #f3d29f)}
.korg-rader{list-style:none; margin:0; padding:0}
.korg-rad{
  display:grid; grid-template-columns:92px 1fr auto; gap:16px; align-items:start;
  padding:20px 0; border-bottom:1px solid rgba(var(--ljus-rgb),.08);
}
.korg-bild{
  aspect-ratio:16/10; border-radius:3px; overflow:hidden;
  background:linear-gradient(150deg, var(--platshallare-a), var(--platshallare-b)); border:1px solid rgba(var(--ljus-rgb),.1);
  display:grid; place-items:center;
  font-family:var(--type); font-size:.6rem; letter-spacing:.2em; color:rgba(var(--ljus-rgb),.25);
}
.korg-bild img{width:100%; height:100%; object-fit:cover; display:block}
.korg-namn{font-family:var(--display); font-size:1.12rem; line-height:1.2; margin:0 0 7px; color:var(--blush)}
.korg-typ{display:flex; align-items:center; flex-wrap:wrap; gap:8px; margin:0 0 12px}
.korg-typ .chip{font-size:.56rem; padding:3px 8px}
.korg-typ small{font-family:var(--type); font-size:.66rem; color:var(--muted); letter-spacing:.06em}
.korg-atgarder{display:flex; align-items:center; gap:16px; flex-wrap:wrap}
.korg-atgarder form{margin:0}
.korg-antal-val{
  display:inline-flex; align-items:center;
  border:1px solid rgba(var(--ljus-rgb),.2); border-radius:100px;
}
.korg-antal-val button{
  width:30px; height:28px; background:none; border:0; color:var(--blush);
  font-size:1rem; line-height:1; border-radius:100px; transition:color .2s, background .2s;
}
.korg-antal-val button:hover:not([disabled]){color:var(--pink-text); background:rgba(var(--rosa-rgb),.1)}
.korg-antal-val button[disabled]{opacity:.3}
.korg-antal-val output{min-width:22px; text-align:center; font-family:var(--type); font-size:.82rem}
.korg-antal-text{font-family:var(--type); font-size:.8rem; color:var(--muted)}
.korg-ta-bort{
  background:none; border:0; padding:4px 0; color:var(--muted);
  font-family:var(--type); font-size:.66rem; letter-spacing:.14em; text-transform:uppercase;
  border-bottom:1px solid transparent; transition:color .2s, border-color .2s;
}
.korg-ta-bort:hover{color:var(--pink-soft); border-color:currentColor}
.korg-pris{font-family:var(--display); font-size:1.12rem; margin:0; white-space:nowrap}
/* raden som nyss lades till lyser upp */
.korg-rad.ny{animation:ny-rad 1.6s ease}
@keyframes ny-rad{
  0%{background:rgba(var(--rosa-rgb),.22); box-shadow:inset 3px 0 0 var(--pink)}
  100%{background:transparent; box-shadow:inset 0 0 0 transparent}
}
/* raderna glider in när panelen öppnas */
.korg.on .korg-rad{animation:stig .5s both}
.korg.on .korg-rad.ny{animation:stig .5s both, ny-rad 1.6s .2s ease}
.korg.on .korg-rad:nth-child(1){animation-delay:.12s}
.korg.on .korg-rad:nth-child(2){animation-delay:.18s}
.korg.on .korg-rad:nth-child(3){animation-delay:.24s}
.korg.on .korg-rad:nth-child(4){animation-delay:.30s}
.korg.on .korg-rad:nth-child(n+5){animation-delay:.36s}
/* men inte när innehållet byts efter en ändring */
.korg.on .korg-innehall.utbytt .korg-rad{animation:none}
.korg.on .korg-innehall.utbytt .korg-rad.ny{animation:ny-rad 1.6s ease}
.korg-summa{margin:22px 0 0; padding:0; display:grid; gap:9px}
.korg-summa > div{display:flex; justify-content:space-between; gap:16px; font-size:.95rem; color:var(--muted)}
.korg-summa dt, .korg-summa dd{margin:0}
.korg-summa dd{color:var(--blush)}
.korg-summa .gratis{color:var(--brass)}
.korg-summa .totalt{
  margin-top:8px; padding-top:16px; border-top:1px solid rgba(var(--ljus-rgb),.14);
  font-family:var(--display); font-size:1.5rem; color:var(--blush);
}
.korg-moms{margin:8px 0 0; text-align:right; font-family:var(--type); font-size:.68rem; letter-spacing:.06em; color:var(--muted)}
.korg-cta{margin-top:auto; padding-top:26px; display:grid; gap:12px}
.korg-till-kassan{justify-content:center; width:100%}
.korg-till-kassan svg{width:18px; height:18px; transition:transform .25s}
.korg-till-kassan:hover svg{transform:translateX(4px)}
.korg-fortsatt{
  background:none; border:0; padding:10px; text-align:center; color:var(--muted);
  font-family:var(--type); font-size:.72rem; letter-spacing:.16em; text-transform:uppercase;
  transition:color .2s;
}
.korg-fortsatt:hover{color:var(--blush)}
.korg-tom{margin:auto 0; padding:60px 10px; text-align:center; display:grid; justify-items:center; gap:10px}
.korg-tom-ikon{width:74px; height:74px; color:var(--pink-text); opacity:.8; margin-bottom:8px}
.korg-tom h3{font-size:1.6rem}
.korg-tom p{color:var(--muted); margin:0 0 18px; max-width:30ch}
/* köpknappen i kortet/detaljvyn medan den lägger till */
.korg-lagg{display:inline-block; margin:0}
.korg-lagg .buy.tillagd{color:var(--brass)}
.korg-lagg .btn.buy.tillagd{background:var(--brass); color:var(--paper-ink); box-shadow:none}
.korg-lagg.skickar .buy{opacity:.55; pointer-events:none}
/* ===================================================================
   KASSAN
   =================================================================== */
.kassa{display:grid; grid-template-columns:minmax(0,1.25fr) minmax(0,.9fr); gap:44px; align-items:start}
.ombud-status{margin:0 0 10px}
.ombud-status:empty{display:none}
.ombud-status.varning{color:var(--brass)}
.ombud-lista:empty{display:none}
.ombud-kort{padding-top:12px; padding-bottom:12px}
.villkor{display:flex; gap:12px; align-items:flex-start; margin-bottom:18px; font-size:.95rem; cursor:pointer}
.villkor input{width:18px; height:18px; margin-top:4px; accent-color:var(--pink); flex:none}
.villkor a{color:var(--pink-soft); border-bottom:1px solid currentColor}
.kassa-slutfor{width:100%; justify-content:center; padding:18px 26px; font-size:.86rem}
.korg-lage-kassa .korg-rad{grid-template-columns:70px 1fr auto; padding:16px 0}
.tack-sigill{width:92px; height:92px; color:var(--pink-text); margin-bottom:24px; animation:sigill .9s cubic-bezier(.3,1.5,.5,1) both}
@keyframes sigill{from{opacity:0; transform:scale(.4) rotate(-40deg)} to{opacity:1; transform:none}}
@media (max-width:1000px){
  .kassa{grid-template-columns:1fr}
}
@media (max-width:760px){
  /* på mobil kommer korgen upp nerifrån */
  .korg-panel{
    top:auto; left:0; width:100%; max-height:88vh; height:auto;
    border-left:0; border-top:1px solid rgba(var(--rosa-rgb),.35); border-radius:16px 16px 0 0;
    transform:translateY(104%);
    box-shadow:0 -30px 80px -30px rgba(0,0,0,1);
  }
  .korg-panel::before{left:30%; right:30%; top:8px; bottom:auto; width:auto; height:4px; border-radius:4px; background:rgba(var(--ljus-rgb),.25); opacity:1}
  .korg-huvud{padding:26px 20px 16px}
  .korg-panel .korg-innehall{padding:0 20px 24px}
  .korg-rad{grid-template-columns:72px 1fr auto; gap:12px}
  .bar-hoger{gap:10px}
  .korg-knapp{width:38px; height:38px}
}
@media (max-width:420px){
  /* logga, språk, korg och meny ska rymmas på en rad */
  .bar{gap:10px}
  .brand{gap:8px}
  .brand img{height:28px}
  .bar-hoger{gap:7px}
  .sprakval > a, .sprakval > span{padding:5px 6px}
  .sprakval .flagga{width:20px; height:14px}
  .korg-knapp{width:36px; height:36px}
  .burger{padding:8px 9px; letter-spacing:.08em}
}
@media (max-width:380px){
  .bar{gap:6px}
  .brand img{height:26px}
  .brand-word{font-size:.92rem}
  .sprakval{padding:2px}
  .sprakval > a, .sprakval > span{padding:4px 5px}
  .sprakval .flagga{width:18px; height:12px}
  .korg-knapp{width:34px; height:34px}
  .burger{padding:7px 7px; font-size:.66rem}
}
@media (max-width:330px){
  /* allra smalast: bara hjärnan som logga */
  .brand-word{display:none}
}
@media (prefers-reduced-motion:reduce){
  .korg-panel, .korg-bakgrund{transition:none}
  .korg.on .korg-rad, .korg-rad.ny, .korg-knapp.studs, .tack-sigill{animation:none}
}
@keyframes skaka{20%{transform:translateX(-6px)} 40%{transform:translateX(5px)} 60%{transform:translateX(-3px)} 80%{transform:translateX(2px)}}
.falt-hjalp{margin:10px 0 20px; font-size:.86rem; color:var(--muted)}
.btn.bred{width:100%; justify-content:center; margin-top:4px}
.annan-kod{margin:18px 0 0; text-align:center}
.annan-kod a, .login-lankar a, .lank{
  color:var(--muted); font-size:.88rem; border-bottom:1px solid rgba(var(--ljus-rgb),.25); cursor:pointer;
  transition:color .2s, border-color .2s;
}
.annan-kod a:hover, .login-lankar a:hover, .lank:hover{color:var(--pink-soft); border-color:currentColor}
.login-lankar .lank{color:var(--blush)}
.serie{margin-top:64px; text-align:center}
.serie .eyebrow{justify-content:center}
/* ===================================================================
   MITT ARENAKONTO
   =================================================================== */
.konto{padding-top:74px}
/* "Bjud in en vän" (Pages/ArenaKonto) */
dialog.inbjudan{
  width:min(480px, 94vw); padding:30px 28px 24px; border-radius:18px; color:var(--blush);
  background:var(--velvet); border:1px solid rgba(var(--massing-rgb),.35); box-shadow:0 40px 90px -30px rgba(0,0,0,.7);
}
dialog.inbjudan::backdrop{background:rgba(var(--ink-rgb),.8); backdrop-filter:blur(3px)}
dialog.inbjudan[open]{animation:stig .35s both}
dialog.inbjudan h2{font-size:1.5rem; margin:0 0 10px}
dialog.inbjudan .eyebrow{margin-bottom:6px}
dialog.inbjudan .falt-hjalp{margin:16px 0 0}
.konto-sektion > .konto-sektion-rubrik + .konto-fall,
.konto-sektion > .konto-sektion-rubrik + .konto-tomt{margin-top:22px}
.framsteg{height:4px; border-radius:4px; background:rgba(var(--ljus-rgb),.1); overflow:hidden}
.framsteg span{display:block; height:100%; background:linear-gradient(90deg, var(--pink), var(--pink-soft)); border-radius:4px}
.konto-fallkort-inner .btn{margin-top:auto}
.konto-fallkort-inner .btn[disabled]{opacity:.45}
.konto-tomt{
  padding:34px 26px; border-radius:6px; text-align:center; color:var(--muted);
  border:1px dashed rgba(var(--ljus-rgb),.18);
}
.konto-tomt p{margin:0 0 18px}
.konto-tomt.liten{padding:24px 20px}
.konto-tomt.liten p{margin:0}
.starta-knapp{
  width:100%; justify-content:center; padding:24px 26px; font-size:1.05rem; letter-spacing:.24em;
  border-radius:12px; position:relative; overflow:hidden;
  background:linear-gradient(135deg, var(--pink), #c81e4d 60%, #b00d49);
  box-shadow:0 22px 50px -18px rgba(var(--rosa-rgb),1), inset 0 1px 0 rgba(255,255,255,.25);
  animation:starta-puls 2.8s ease-in-out infinite;
}
.starta-knapp svg{width:22px; height:22px}
.starta-knapp::after{
  content:""; position:absolute; top:0; left:-60%; width:40%; height:100%;
  background:linear-gradient(90deg, transparent, rgba(255,255,255,.4), transparent); transform:skewX(-18deg);
  animation:starta-glans 3.6s ease-in-out infinite;
}
@keyframes starta-puls{0%,100%{box-shadow:0 22px 50px -18px rgba(var(--rosa-rgb),1), inset 0 1px 0 rgba(255,255,255,.25)} 50%{box-shadow:0 22px 70px -12px rgba(var(--rosa-rgb),1), inset 0 1px 0 rgba(255,255,255,.25)}}
@keyframes starta-glans{0%,60%{left:-60%} 100%{left:130%}}
.falt-hjalp.center{text-align:center; margin-top:14px}
button.lank{background:none; border:0; padding:0; font:inherit; font-size:.88rem}
.starta{padding-top:70px; min-height:calc(100vh - var(--header-h))}
.starta-kort{
  position:relative; overflow:hidden; width:min(620px,100%); margin:0 auto;
  padding:clamp(28px,4.6vw,46px); border-radius:18px;
  background:linear-gradient(160deg, rgba(var(--plum-rgb),.96), rgba(var(--ink-rgb),.98));
  border:1px solid rgba(var(--massing-rgb),.24);
  box-shadow:0 50px 110px -50px rgba(0,0,0,1), inset 0 1px 0 rgba(255,255,255,.06);
  animation:stig .6s both;
}
.starta-glans{
  position:absolute; top:-60%; left:-40%; width:60%; height:220%; pointer-events:none;
  background:linear-gradient(90deg, transparent, rgba(255,255,255,.07), transparent);
  transform:rotate(14deg); animation:starta-glans-kort 7.5s ease-in-out infinite;
}
@keyframes starta-glans-kort{0%,72%{left:-45%} 100%{left:130%}}
.otp-block{
  border:1px solid rgba(var(--massing-rgb),.22); border-radius:14px; padding:18px; margin-bottom:14px;
  background:rgba(var(--ink-rgb),.4); animation:stig .6s both; transition:border-color .3s;
}
.otp-rutor{display:flex; gap:12px; justify-content:center}
.otp-rutor input, .otp-falt{
  width:clamp(52px,14vw,64px); height:clamp(60px,16vw,72px); text-align:center;
  font-family:var(--type); font-size:1.7rem; color:var(--blush);
  background:rgba(var(--ink-rgb),.85); border:1px solid rgba(var(--massing-rgb),.3); border-radius:12px;
  transition:border-color .2s, box-shadow .2s, transform .2s;
}
.otp-falt{width:100%; letter-spacing:.6em}
.otp-rutor input:focus, .otp-falt:focus{outline:none; border-color:var(--pink); box-shadow:0 0 0 3px rgba(var(--rosa-rgb),.16); transform:translateY(-3px)}
.otp-block.ok{border-color:rgba(120,220,170,.55)}
.otp-block.ok .otp-rutor input{border-color:rgba(120,220,170,.6); color:#9FE8C4}
.otp-block.fel .otp-rutor input{border-color:var(--pink-soft)}
@keyframes testinkorg{from{opacity:0; transform:translateX(40px) rotate(2deg)} to{opacity:1; transform:none}}
.gava-ikon{
  flex:none; display:grid; place-items:center; width:54px; height:54px; border-radius:50%;
  color:var(--brass); background:rgba(var(--massing-rgb),.12); border:1px solid rgba(var(--massing-rgb),.4);
  animation:gava-gung 3.2s ease-in-out infinite;
}
.gava-ikon svg{width:28px; height:28px}
@keyframes gava-gung{0%,100%{transform:rotate(0)} 8%{transform:rotate(-8deg)} 16%{transform:rotate(6deg)} 24%{transform:rotate(0)}}
@media (max-width:600px){
  .starta{padding-top:36px}
  .starta-kort{padding:26px 18px}
  .otp-rutor{gap:8px}
  /* på mobil ligger testkoderna under kortet i stället för ovanpå fälten */
  .starta{min-height:0; padding-bottom:24px}
}
@media (prefers-reduced-motion:reduce){
  .starta-knapp, .starta-knapp::after, .starta-glans, .gava-ikon, .otp-block, .starta-kort{animation:none}
}
/* =====================================================================
   SPELSERIER
   ===================================================================== */
/* märke på kortets bild + raden ovanför rubriken */
.case-serie-del{
  position:absolute; top:12px; left:12px; z-index:2;
  font-family:var(--type); font-size:.62rem; letter-spacing:.16em; text-transform:uppercase;
  padding:5px 11px; border-radius:100px; color:#fff;
  background:rgba(var(--rosa-rgb),.82); backdrop-filter:blur(7px);
}
.case .case-serie{
  display:flex; align-items:center; gap:9px; margin:-8px 0 10px;
  font-family:var(--type); font-size:.68rem; letter-spacing:.14em; text-transform:uppercase;
  color:var(--pink-soft);
}
.case-serie-ikon{
  flex:none; width:22px; height:8px; position:relative;
  background:radial-gradient(circle, var(--pink) 3px, transparent 3.5px) 0 50%/8px 8px repeat-x;
}
/* sektionen på Spel-sidan */
.spelserier{padding-top:0}
.spelserie{
  display:grid; grid-template-columns:minmax(0, 5fr) minmax(0, 7fr); gap:46px; align-items:center;
  padding:42px 44px; margin-bottom:30px; border-radius:var(--r);
  border:1px solid rgba(var(--rosa-rgb),.28);
  background:
    radial-gradient(ellipse at 0% 0%, rgba(var(--rosa-rgb),.16), transparent 55%),
    linear-gradient(168deg, rgba(var(--plum-rgb),.94), rgba(var(--ink-rgb),.96));
  position:relative; overflow:hidden;
}
.spelserie-antal{
  font-family:var(--type); font-size:.7rem; letter-spacing:.2em; text-transform:uppercase;
  color:var(--pink-text); margin-bottom:12px;
}
.spelserie-namn{font-size:clamp(1.7rem, 3vw, 2.4rem); line-height:1.08; margin-bottom:10px}
.spelserie-tagline{font-family:var(--display); font-style:italic; color:var(--pink-soft); font-size:1.06rem; margin-bottom:14px}
.spelserie-beskrivning{color:var(--muted); font-size:.97rem}
.spelserie-minne{
  display:flex; gap:10px; align-items:flex-start; margin:18px 0 0; padding-top:16px;
  border-top:1px dashed rgba(var(--ljus-rgb),.2);
  font-family:var(--type); font-size:.74rem; letter-spacing:.05em; color:var(--blush);
}
.spelserie-minne svg{flex:none; width:18px; height:18px; color:var(--pink-text); margin-top:1px}
.spelserie-delar{
  list-style:none; margin:0; padding:0; position:relative;
  display:grid; grid-template-columns:repeat(auto-fit, minmax(150px, 1fr)); gap:18px;
}
/* tråden som binder ihop delarna */
.spelserie-delar::before{
  content:""; position:absolute; left:8%; right:8%; top:calc(28% + 1px); height:2px; z-index:0;
  background:linear-gradient(90deg, rgba(var(--rosa-rgb),.1), var(--pink), rgba(var(--rosa-rgb),.1));
}
.spelserie-del{
  position:relative; z-index:1; display:flex; flex-direction:column;
  border-radius:12px; overflow:hidden; cursor:pointer;
  background:rgba(var(--ink-rgb),.72); border:1px solid rgba(var(--ljus-rgb),.13);
  transition:transform .3s ease, border-color .3s ease;
}
.spelserie-del:hover{transform:translateY(-4px); border-color:rgba(var(--rosa-rgb),.5)}
.spelserie-del-bild{position:relative; aspect-ratio:16/9; background:linear-gradient(150deg, var(--platshallare-a), var(--platshallare-b))}
.spelserie-del-bild img{width:100%; height:100%; object-fit:cover; display:block}
.spelserie-del-nr{
  position:absolute; left:50%; bottom:-17px; transform:translateX(-50%);
  width:34px; height:34px; border-radius:50%; display:grid; place-items:center;
  background:var(--pink-knapp); color:#fff; font-family:var(--display); font-size:1.05rem;
  box-shadow:0 0 0 5px rgba(var(--ink-rgb),.95), 0 0 0 6px rgba(var(--rosa-rgb),.35);
}
.spelserie-del-text{display:flex; flex-direction:column; gap:5px; padding:26px 16px 18px; text-align:center}
.spelserie-del-text small{font-family:var(--type); font-size:.64rem; letter-spacing:.16em; text-transform:uppercase; color:var(--muted)}
.spelserie-del-text .case-lank{font-family:var(--display); font-size:1.1rem; line-height:1.2; color:var(--blush)}
.spelserie-del:hover .case-lank{color:var(--pink-soft)}
.spelserie-del-text span{color:var(--muted); font-size:.84rem; line-height:1.45}
.spelserie-del .case-lank::after{border-radius:12px}
/* detaljvyn */
.detalj-serie{
  font-family:var(--type); font-size:.72rem; letter-spacing:.16em; text-transform:uppercase;
  color:var(--pink-soft); margin:-4px 0 12px;
}
.detalj-serie-text{color:var(--muted); font-size:.95rem; max-width:62ch}
.spelserie-trad{list-style:none; margin:18px 0 0; padding:0; position:relative}
.spelserie-trad::before{
  content:""; position:absolute; left:16px; top:18px; bottom:18px; width:2px;
  background:linear-gradient(var(--pink), rgba(var(--rosa-rgb),.15));
}
.spelserie-trad li{position:relative; display:flex; gap:18px; align-items:flex-start; padding:10px 0}
.spelserie-parla{
  flex:none; position:relative; z-index:1; width:34px; height:34px; border-radius:50%;
  display:grid; place-items:center; font-family:var(--display); font-size:1rem;
  color:var(--blush); background:var(--plum); border:1px solid rgba(var(--rosa-rgb),.55);
}
.spelserie-trad li.aktuell .spelserie-parla{background:var(--pink-knapp); border-color:var(--pink-knapp); color:#fff; box-shadow:0 0 0 5px rgba(var(--rosa-rgb),.18)}
.spelserie-trad-text{display:flex; flex-direction:column; gap:3px; padding-top:1px}
.spelserie-trad-text small{font-family:var(--type); font-size:.64rem; letter-spacing:.16em; text-transform:uppercase; color:var(--muted)}
.spelserie-trad-text b{font-family:var(--display); font-weight:400; font-size:1.12rem; color:var(--blush)}
.spelserie-trad-text .spelserie-lank{font-family:var(--display); font-size:1.12rem; color:var(--blush); text-decoration:underline; text-decoration-color:rgba(var(--rosa-rgb),.45); text-underline-offset:4px}
.spelserie-trad-text .spelserie-lank:hover{color:var(--pink-soft); text-decoration-color:var(--pink)}
.spelserie-trad-text .spelserie-lank::after{content:none}
.spelserie-trad-text span{color:var(--muted); font-size:.88rem}
.spelserie-trad-text .spelserie-har{font-family:var(--type); font-size:.64rem; letter-spacing:.16em; text-transform:uppercase; color:var(--pink-text)}
/* byte av fall inuti inforutan */
#spelModalInnehall.byter > *{opacity:0; transform:translateY(8px); transition:opacity .22s ease, transform .22s ease}
@media (max-width: 980px){
  .spelserie{grid-template-columns:1fr; gap:30px; padding:34px 30px}
}
@media (max-width: 620px){
  .spelserie{padding:28px 20px}
  .spelserie-delar{grid-template-columns:1fr; gap:26px}
  .spelserie-delar::before{left:50%; right:auto; top:0; bottom:0; width:2px; height:auto;
    background:linear-gradient(rgba(var(--rosa-rgb),.1), var(--pink), rgba(var(--rosa-rgb),.1))}
}
.rabatt-rad dd{color:var(--pink-soft)}
.rabatt{margin-top:22px; padding-top:20px; border-top:1px dashed rgba(var(--ljus-rgb),.2)}
.rabatt.uppdaterad{animation:stig .45s both}
.rabatt-rad-in .btn{padding:11px 20px; flex:none}
/* =====================================================================
   COOKIEBANNERN
   Ett svävande kort nere till vänster (på mobil ett blad nerifrån).
   ===================================================================== */
.kaka{
  position:fixed; left:24px; bottom:24px; z-index:250;
  width:min(440px, calc(100vw - 32px));
  opacity:0; transform:translateY(22px) scale(.98);
  transition:opacity .45s ease, transform .55s cubic-bezier(.2,.8,.2,1);
  pointer-events:none;
}
.kaka.visa{opacity:1; transform:none; pointer-events:auto}
.kaka.stanger{opacity:0; transform:translateY(14px) scale(.985)}
.kaka[hidden]{display:none}
.kaka-kort{
  position:relative; margin:0; padding:30px 28px 22px;
  border-radius:20px; border:1px solid rgba(var(--rosa-rgb),.32);
  background:
    radial-gradient(ellipse at 100% 0%, rgba(var(--rosa-rgb),.16), transparent 58%),
    radial-gradient(ellipse at 0% 100%, rgba(var(--massing-rgb),.08), transparent 55%),
    linear-gradient(168deg, rgba(var(--plum-rgb),.97), rgba(var(--ink-rgb),.98));
  backdrop-filter:blur(14px);
  box-shadow:0 40px 80px -30px rgba(0,0,0,.95), 0 0 0 1px rgba(var(--ljus-rgb),.04) inset;
}
/* en tunn rosa tråd överst */
.kaka-kort::before{
  content:""; position:absolute; top:-1px; left:28px; right:28px; height:1px;
  background:linear-gradient(90deg, transparent, var(--pink-soft), transparent);
}
.kaka-ornament{
  position:absolute; top:22px; right:24px; width:40px; height:40px; color:var(--pink-soft);
  opacity:.85; animation:kaka-glimt 5s ease-in-out infinite;
}
.kaka-ornament svg{width:100%; height:100%}
@keyframes kaka-glimt{0%,100%{transform:rotate(0)} 50%{transform:rotate(-8deg)}}
.kaka-eyebrow{
  font-family:var(--type); font-size:.66rem; letter-spacing:.24em; text-transform:uppercase;
  color:var(--pink-text); margin:0 0 8px;
}
.kaka-rubrik{
  font-family:var(--display); font-style:italic; font-weight:400;
  font-size:1.55rem; line-height:1.15; color:var(--blush); margin:0 56px 12px 0;
}
.kaka-text{font-size:.9rem; line-height:1.6; color:var(--muted); margin:0 0 18px}
.kaka-text a{color:var(--pink-soft); border-bottom:1px solid rgba(var(--rosa-mjuk-rgb),.4); white-space:nowrap}
.kaka-text a:hover{border-bottom-color:currentColor}
/* valen – dolda tills man trycker Anpassa */
.kaka-val{
  display:grid; gap:8px; margin:0 0 18px;
  max-height:0; overflow:hidden; opacity:0;
  transition:max-height .45s cubic-bezier(.2,.8,.2,1), opacity .3s ease, margin .3s;
}
.kaka.anpassar .kaka-val{max-height:420px; opacity:1}
.kaka:not(.anpassar) .kaka-val{margin:0}
.kaka-rad{
  position:relative; display:grid; grid-template-columns:auto 1fr auto; gap:12px; align-items:center;
  padding:12px 14px; border-radius:14px; cursor:pointer;
  background:rgba(var(--ink-rgb),.45); border:1px solid rgba(var(--ljus-rgb),.1);
  transition:border-color .25s, background .25s;
}
.kaka-rad:hover{border-color:rgba(var(--rosa-rgb),.35)}
.kaka-rad.last{cursor:default}
.kaka-rad input{position:absolute; opacity:0; pointer-events:none}
.kaka-reglage{
  width:36px; height:21px; border-radius:100px; position:relative;
  background:rgba(var(--ljus-rgb),.16); transition:background .25s;
}
.kaka-reglage::after{
  content:""; position:absolute; top:3px; left:3px; width:15px; height:15px; border-radius:50%;
  background:var(--blush); transition:transform .3s cubic-bezier(.3,1.4,.5,1);
}
.kaka-rad input:checked + .kaka-reglage{background:var(--pink)}
.kaka-rad input:checked + .kaka-reglage::after{transform:translateX(15px); background:#fff}
.kaka-rad.last input:checked + .kaka-reglage{background:rgba(var(--rosa-rgb),.45)}
.kaka-rad input:focus-visible + .kaka-reglage{box-shadow:0 0 0 3px rgba(var(--rosa-rgb),.35)}
.kaka-rad-text{display:flex; flex-direction:column; gap:2px; min-width:0}
.kaka-rad-text b{font-family:var(--display); font-weight:400; font-size:1rem; color:var(--blush)}
.kaka-rad-text small{font-size:.8rem; line-height:1.45; color:var(--muted)}
.kaka-alltid{font-family:var(--type); font-size:.6rem; letter-spacing:.14em; text-transform:uppercase; color:var(--pink-soft); white-space:nowrap}
.kaka-knappar{display:grid; grid-template-columns:1fr 1fr; gap:10px}
.kaka-knappar .btn{justify-content:center; padding:13px 14px; font-size:.72rem; width:100%}
.kaka-fot{display:flex; justify-content:space-between; align-items:center; margin-top:14px; min-height:22px}
.kaka-anpassa, .kaka-spara{
  background:none; border:0; padding:4px 0; cursor:pointer;
  font-family:var(--type); font-size:.68rem; letter-spacing:.16em; text-transform:uppercase;
  color:var(--muted); transition:color .2s;
}
.kaka-anpassa:hover, .kaka-spara:hover{color:var(--pink-soft)}
.kaka-anpassa::after{content:" +"; color:var(--pink-text)}
.kaka.anpassar .kaka-anpassa::after{content:" −"}
.kaka-spara{display:none; color:var(--pink-soft); border-bottom:1px solid rgba(var(--rosa-mjuk-rgb),.45)}
.kaka.anpassar .kaka-spara{display:inline-block}
@media (max-width:560px){
  .kaka{left:8px; right:8px; bottom:8px; width:auto}
  .kaka-kort{padding:26px 20px 18px; border-radius:18px}
  .kaka-rubrik{font-size:1.35rem}
  .kaka-knappar .btn{letter-spacing:.1em; padding:12px 10px}
  .kaka.anpassar .kaka-val{max-height:60vh; overflow:auto}
}
@media (max-width:370px){
  .kaka-knappar{grid-template-columns:1fr}
}
@media (prefers-reduced-motion:reduce){
  .kaka, .kaka-val{transition:none}
  .kaka-ornament{animation:none}
}
/* länken "Cookieinställningar" i sidfoten ser ut som de andra länkarna */
.fot-lank{background:none; border:0; padding:0; cursor:pointer; font:inherit; font-size:.94rem; color:var(--muted); text-align:left}
.fot-lank:hover{color:var(--pink-soft)}
/* ---- sidan Om cookies ---- */
.cookies-sida .section-head h1{font-size:clamp(2.4rem, 5vw, 3.6rem)}
.cookies-kort .btn{margin-top:6px}
/* =====================================================================
   VITTNESMÅL MED FOTO – en bild fäst med gem i pappersarkets hörn.
   Vinkel, storlek, placering och gemets läge sätts per vittnesmål
   (--foto-*, --gem-*) i Pages/Index.cshtml, så att inga två ser likadana ut.
   ===================================================================== */
.witness-foto{
  float:right; position:relative; z-index:2;
  width:var(--foto-bredd, 44%);
  margin:var(--foto-upp, -34px) var(--foto-ut, -14px) 12px 16px;
  padding:7px 7px 18px; background:#fbf5f1;
  box-shadow:0 14px 26px -12px rgba(0,0,0,.55), 0 2px 5px rgba(0,0,0,.18);
  transform:rotate(var(--foto-vrid, 4deg));
  transform-origin:var(--gem-x, 50%) 0;
  transition:transform .5s cubic-bezier(.3,1.4,.5,1);
}
.witness-foto img{display:block; width:100%; height:auto; aspect-ratio:9/7; object-fit:cover; filter:saturate(.92) contrast(1.02)}
/* en svag skugga under bilden så den ser ut att ligga ovanpå pappret */
.witness-foto::after{
  content:""; position:absolute; left:8%; right:8%; bottom:-6px; height:10px; z-index:-1;
  background:radial-gradient(closest-side, rgba(0,0,0,.25), transparent); filter:blur(3px);
}
.witness:hover .witness-foto{transform:rotate(calc(var(--foto-vrid, 4deg) * .6)) translateY(-2px)}
/* gemet: en tunn metalltråd som går över fotots överkant */
.witness-gem{
  position:absolute; top:-26px; left:var(--gem-x, 50%);
  width:18px; height:48px; margin-left:-9px;
  transform:rotate(var(--gem-vrid, 0deg));
  stroke:#b9b2b7; filter:drop-shadow(0 1px 1px rgba(0,0,0,.35));
}
.witness-gem path{stroke:#c9c1c6}
.witness.med-foto p:first-of-type{margin-top:0}
@media (max-width:980px){
  .witness-foto{width:min(var(--foto-bredd, 44%), 220px)}
}
@media (prefers-reduced-motion:reduce){
  .witness-foto{transition:none}
}
/* ---------- Bli statist (/statist) ---------- */
.statist .section-head{max-width:720px}
.statist-fel-ruta{
  margin:0 0 26px; padding:13px 17px; font-family:var(--type); font-size:.82rem; color:var(--pink-soft);
  border:1px dashed rgba(var(--rosa-mjuk-rgb),.55); border-radius:var(--r); background:rgba(var(--rosa-rgb),.07);
}
.statist-hjalp{margin:-8px 0 16px; font-size:.9rem; color:var(--muted)}
.sprak-annat{display:none; margin:14px 0 0; color:var(--pink-soft)}
.sprak-annat.syns{display:block}
.kamera-knapp{margin-top:14px; gap:10px}
.kamera-knapp svg{width:18px; height:18px}
.statist-skicka .btn{margin-top:6px}
.statist-kort{
  padding:52px 30px 30px; border-radius:120px 120px 14px 14px; text-align:center;
  background:radial-gradient(120% 70% at 50% 0%, rgba(var(--rosa-rgb),.12), transparent 65%), rgba(var(--velvet-rgb),.55);
  border:1px solid rgba(var(--massing-rgb),.25);
}
.statist-kort + .statist-kort{border-radius:14px}
.statist-kort.liten{padding:20px 24px}
.statist-kort h2{font-size:1.4rem; margin:0 0 14px}
.statist-kort p{color:var(--muted); font-size:.94rem; margin:0}
/* ---------- banner: bli statist (_StatistBanner) ---------- */
.statist-banner{padding-block:40px}
.statist-banner-inre{
  position:relative; overflow:hidden; display:grid; grid-template-columns:auto 1fr; gap:48px; align-items:center;
  padding:44px 56px 44px 48px; border-radius:18px;
  background:
    radial-gradient(60% 120% at 12% 30%, rgba(var(--rosa-rgb),.22), transparent 60%),
    linear-gradient(115deg, rgba(var(--plum-rgb),.95), rgba(var(--velvet-rgb),.92) 55%, rgba(var(--ink-rgb),.95));
  border:1px solid rgba(var(--massing-rgb),.3);
  box-shadow:0 40px 80px -50px rgba(0,0,0,.7), inset 0 0 0 7px rgba(var(--ink-rgb),.3), inset 0 0 0 8px rgba(var(--massing-rgb),.14);
}
/* filmremsa längs kanterna */
.statist-banner-inre::before, .statist-banner-inre::after{
  content:""; position:absolute; left:0; right:0; height:10px; opacity:.35; pointer-events:none;
  background:repeating-linear-gradient(90deg, transparent 0 14px, rgba(var(--ljus-rgb),.55) 14px 24px);
  -webkit-mask:linear-gradient(90deg, transparent, #000 15%, #000 85%, transparent);
          mask:linear-gradient(90deg, transparent, #000 15%, #000 85%, transparent);
}
.statist-banner-inre::before{top:10px}
.statist-banner-inre::after{bottom:10px}
.statist-banner-fonster{
  position:relative; width:170px; aspect-ratio:4/5; border-radius:999px 999px 10px 10px; overflow:hidden;
  background:linear-gradient(180deg, rgba(var(--rosa-mjuk-rgb),.25), rgba(var(--ink-rgb),.6));
  box-shadow:0 0 0 1px rgba(var(--massing-rgb),.55), 0 0 0 7px rgba(var(--ink-rgb),.5), 0 0 0 8px rgba(var(--massing-rgb),.3);
}
.statist-banner-fonster svg{position:absolute; inset:0; width:100%; height:100%}
.statist-banner-fraga{
  position:absolute; left:50%; top:39%; transform:translate(-50%,-50%);
  font-family:var(--display); font-style:italic; font-size:2.6rem; color:var(--pink-soft);
  text-shadow:0 0 18px rgba(var(--rosa-rgb),.7); animation:statistFraga 4.5s ease-in-out infinite;
}
@keyframes statistFraga{0%,100%{opacity:.55} 50%{opacity:1}}
.statist-banner-eyebrow{
  display:inline-flex; align-items:center; gap:10px; margin:0 0 12px;
  font-family:var(--type); font-size:.72rem; letter-spacing:.22em; text-transform:uppercase; color:var(--brass);
}
.statist-banner-eyebrow::before{content:""; width:8px; height:8px; border-radius:50%; background:var(--pink); box-shadow:0 0 0 4px rgba(var(--rosa-rgb),.2); animation:statistPuls 2s ease-in-out infinite}
@keyframes statistPuls{0%,100%{box-shadow:0 0 0 3px rgba(var(--rosa-rgb),.25)} 50%{box-shadow:0 0 0 7px rgba(var(--rosa-rgb),.05)}}
.statist-banner h2{font-size:clamp(1.8rem,3.4vw,2.6rem); line-height:1.08; margin:0 0 14px}
.statist-banner h2 em{color:var(--pink-text); font-style:italic; font-weight:300}
.statist-banner-text > p:not(.statist-banner-eyebrow){color:var(--muted); max-width:52ch; margin:0 0 24px}
.statist-banner-knappar{display:flex; align-items:center; gap:18px; flex-wrap:wrap}
.statist-banner-not{font-family:var(--type); font-size:.72rem; letter-spacing:.12em; text-transform:uppercase; color:var(--muted)}
@media (max-width: 760px){
  .statist-banner-inre{grid-template-columns:1fr; justify-items:center; text-align:center; gap:28px; padding:44px 24px 40px}
  .statist-banner-fonster{width:130px}
  .statist-banner-text > p:not(.statist-banner-eyebrow){margin-inline:auto}
  .statist-banner-knappar{justify-content:center}
}
@media (prefers-reduced-motion: reduce){
  .statist-banner-fraga, .statist-banner-eyebrow::before{animation:none}
}
/* ---------- bilder från tidigare statistinspelningar (polaroider) ---------- */
.polaroid{
  list-style:none; background:var(--paper); padding:10px 10px 14px; border-radius:3px;
  box-shadow:0 18px 34px -18px rgba(0,0,0,.65), 0 2px 6px rgba(0,0,0,.18);
}
.polaroid img{display:block; width:100%; height:auto; aspect-ratio:1; object-fit:cover; border-radius:1px; filter:saturate(.9) sepia(.08)}
.polaroider .polaroid{
  flex:0 0 clamp(170px, 19vw, 230px); scroll-snap-align:start;
  transform:rotate(var(--vrid, 0deg)) translateY(var(--upp, 0px)); transition:transform .35s ease, box-shadow .35s ease;
}
.polaroider .polaroid:hover{transform:rotate(0deg) translateY(-6px) scale(1.03); box-shadow:0 26px 44px -18px rgba(0,0,0,.7); z-index:1}
/* i bannern: tre polaroider i en solfjäder */
.statist-banner-foton{position:relative; display:block; width:230px; height:210px}
.statist-banner-foton .polaroid{position:absolute; width:140px; padding:7px 7px 18px; transition:transform .4s ease}
.statist-banner-foton .polaroid:nth-child(1){left:6px;  top:30px; transform:rotate(-9deg)}
.statist-banner-foton .polaroid:nth-child(2){left:78px; top:18px; transform:rotate(7deg)}
.statist-banner-foton .polaroid:nth-child(3){left:44px; top:44px; transform:rotate(-2deg); z-index:2}
.statist-banner-foton.antal-1 .polaroid:nth-child(1){left:40px; top:20px; width:160px; transform:rotate(-4deg)}
.statist-banner-foton.antal-2 .polaroid:nth-child(2){z-index:2}
.statist-banner-foton:hover .polaroid:nth-child(1){transform:rotate(-13deg) translateX(-8px)}
.statist-banner-foton:hover .polaroid:nth-child(2){transform:rotate(11deg) translateX(8px)}
@media (max-width: 760px){
  .statist-banner-foton{width:220px; height:190px}
  .statist-banner-foton .polaroid{width:125px}
}
@media (prefers-reduced-motion: reduce){
  .polaroider .polaroid, .statist-banner-foton .polaroid{transition:none}
}
.statist-tabort{text-align:left; border-radius:14px !important}
.statist-tabort h2{font-size:1.2rem}
.statist-tabort p{margin-bottom:14px !important}
/* ---------- kassan: betalsätt (Kustom, PayPal) ---------- */
.betalsatt{display:grid; gap:10px; margin:0 0 8px}
.betalsatt-kort{
  position:relative; display:flex; align-items:center; gap:16px; cursor:pointer;
  padding:16px 18px; border-radius:12px; border:1px solid rgba(var(--ljus-rgb),.18); background:rgba(var(--ink-rgb),.3);
  transition:border-color .2s, background .2s, box-shadow .2s;
}
.betalsatt-kort:hover{border-color:rgba(var(--rosa-mjuk-rgb),.55)}
.betalsatt-kort input{position:absolute; opacity:0; width:1px; height:1px}
.betalsatt-prick{width:18px; height:18px; border-radius:50%; flex:none; border:1.5px solid rgba(var(--ljus-rgb),.45); transition:all .2s}
.betalsatt-text{display:grid; gap:3px; flex:1}
.betalsatt-text b{font-weight:500; color:var(--blush)}
.betalsatt-text small{color:var(--muted); font-size:.86rem}
.betalsatt-kort:has(input:checked){border-color:var(--pink); background:rgba(var(--rosa-rgb),.09); box-shadow:0 10px 26px -18px rgba(var(--rosa-rgb),.9)}
.betalsatt-kort:has(input:checked) .betalsatt-prick{border-color:var(--pink); background:var(--pink); box-shadow:inset 0 0 0 3px var(--velvet)}
.betalsatt-kort:has(input:focus-visible){outline:2px solid var(--pink-soft); outline-offset:3px}
.losen-grid .statist-kort{text-align:left; border-radius:16px}
/* ---------- felrutan (site.js: alla felmeddelanden i en flytande ruta) ---------- */
.bm-fel{
  position:fixed; inset:0; z-index:1000; display:grid; place-items:center; padding:20px; cursor:pointer;
  background:rgba(var(--ink-rgb),.72); backdrop-filter:blur(3px); -webkit-backdrop-filter:blur(3px);
  opacity:0; transition:opacity .25s ease;
}
.bm-fel.syns{opacity:1}
.bm-fel:focus{outline:none}
.bm-fel-kort{
  width:min(460px, 100%); padding:30px 30px 22px; border-radius:18px; text-align:center;
  background:radial-gradient(120% 80% at 50% 0%, rgba(var(--rosa-rgb),.22), transparent 60%), var(--velvet);
  border:1px solid rgba(var(--rosa-mjuk-rgb),.6);
  box-shadow:0 30px 80px -20px rgba(0,0,0,.7), 0 0 0 6px rgba(var(--rosa-rgb),.12);
  transform:translateY(12px) scale(.97); transition:transform .3s cubic-bezier(.2,.9,.3,1.2);
}
.bm-fel.syns .bm-fel-kort{transform:none}
.bm-fel-ikon{display:inline-grid; place-items:center; width:54px; height:54px; border-radius:50%; margin-bottom:14px; color:#fff; background:var(--pink); box-shadow:0 0 0 7px rgba(var(--rosa-rgb),.2)}
.bm-fel-ikon svg{width:28px; height:28px}
.bm-fel h2{font-size:1.45rem; margin:0 0 14px}
.bm-fel ul{list-style:none; margin:0; padding:0; display:grid; gap:9px; text-align:left}
.bm-fel li{position:relative; padding:10px 14px 10px 34px; border-radius:10px; background:rgba(var(--ink-rgb),.45); color:var(--blush); font-size:.96rem; line-height:1.45}
.bm-fel li::before{content:""; position:absolute; left:14px; top:1.05em; width:8px; height:8px; border-radius:50%; background:var(--pink)}
.bm-fel-detalj{margin:12px 0 0; padding:8px 12px; border-radius:8px; text-align:left; font-family:var(--type); font-size:.72rem; color:var(--muted); background:rgba(var(--ink-rgb),.5); word-break:break-word}
.bm-fel-stang{margin:18px 0 0; font-family:var(--type); font-size:.68rem; letter-spacing:.16em; text-transform:uppercase; color:var(--muted)}
@media (prefers-reduced-motion: reduce){
  .bm-fel, .bm-fel-kort{transition:none}
}
/* ===================================================================
   UTMANINGEN "LOST IN THE MAZE" (/1052) – Pages/Shared/_Limi.cshtml, js/limi.js
   =================================================================== */
.limi-ruta{
  position:fixed; z-index:90; left:50%; top:50%; transform:translate(-50%,-50%);
  width:min(440px, calc(100vw - 32px)); padding:30px 28px 26px; border-radius:6px; text-align:center;
  background:linear-gradient(168deg, rgba(var(--plum-rgb),.98), rgba(var(--ink-rgb),.98));
  border:1px solid rgba(var(--rosa-rgb),.5);
  box-shadow:0 30px 70px -20px rgba(0,0,0,.8), 0 0 0 100vmax rgba(20,6,16,.62);
  animation:limiIn .35s both;
}
@keyframes limiIn{from{opacity:0; transform:translate(-50%,calc(-50% + 18px))}to{opacity:1; transform:translate(-50%,-50%)}}
.limi-ruta[hidden]{display:none}
.limi-ruta h2{font-size:1.7rem; margin:6px 0 10px}
.limi-ruta p{color:var(--muted); margin:0 0 18px}
.limi-ruta-bild{display:block; margin:0 auto 12px; transform:rotate(-6deg)}
.limi-knappar{display:flex; gap:10px; justify-content:center; flex-wrap:wrap}
.limi-kod{margin:0 0 20px !important}
.limi-kod code{
  display:inline-block; padding:10px 18px; border:1px dashed var(--pink); border-radius:4px;
  font-size:1.15rem; letter-spacing:.18em; color:var(--blush); user-select:all;
}
.limi-ruta.vann{border-color:var(--brass)}
.limi-ruta.vann h2{color:var(--brass)}
.limi-klocka{
  position:fixed; z-index:70; left:50%; top:50%; transform:translate(-50%,-50%);
  width:132px; height:132px; display:grid; place-items:center; pointer-events:none;
}
.limi-klocka[hidden]{display:none}
.limi-klocka svg{position:absolute; inset:0; transform:rotate(-90deg)}
.limi-klocka-bana{fill:rgba(var(--ink-rgb),.72); stroke:rgba(var(--ljus-rgb),.18); stroke-width:6}
.limi-klocka-kvar{fill:none; stroke:var(--pink); stroke-width:6; stroke-linecap:round; transition:stroke-dashoffset .2s linear}
.limi-klocka.bradskande .limi-klocka-kvar{stroke:var(--fel)}
.limi-klocka.bradskande .limi-sekunder{animation:limiPuls 1s infinite}
.limi-sekunder{position:relative; font-family:var(--display); font-size:2.6rem; line-height:1; color:var(--blush); margin-top:-12px}
.limi-antal{position:absolute; bottom:30px; font-family:var(--type); font-size:.66rem; letter-spacing:.12em; color:var(--muted)}
@keyframes limiPuls{50%{transform:scale(1.12)}}
.limi-skylt{
  position:absolute; z-index:55; padding:0; border:0; background:none; cursor:pointer; line-height:0;
  filter:drop-shadow(0 3px 6px rgba(0,0,0,.45)); transition:filter .2s;
}
.limi-skylt img{width:100%; height:auto; display:block; pointer-events:none; user-select:none}
.limi-skylt:hover{filter:drop-shadow(0 0 8px rgba(var(--rosa-rgb),.8))}
.limi-skylt:focus-visible{outline:2px solid var(--pink-soft); outline-offset:3px}
.limi-skylt.hittad{animation:limiHittad .45s forwards; pointer-events:none}
@keyframes limiHittad{to{transform:scale(1.8) rotate(0deg); opacity:0}}
@media (prefers-reduced-motion:reduce){
  .limi-skylt.hittad{animation:none; opacity:0}
  .limi-klocka.bradskande .limi-sekunder{animation:none}
}
@keyframes kontoPuls{
  0%,100%{box-shadow:0 0 0 0 rgba(255,53,94,.0), 0 18px 40px -24px rgba(255,53,94,.5)}
  50%{box-shadow:0 0 0 6px rgba(255,53,94,.14), 0 22px 54px -18px rgba(255,53,94,.85)}
}
@keyframes kontoPrick{0%{box-shadow:0 0 0 0 rgba(255,53,94,.7)}100%{box-shadow:0 0 0 9px rgba(255,53,94,0)}}
.btn.liten{padding:9px 16px; font-size:.78rem}
@keyframes lagIn{from{opacity:0; transform:translateY(10px) scale(.9)} to{opacity:1; transform:none}}
/* ---------- spelets språk: faktarad, val vid köp, "finns bara på …" ---------- */
.spelsprak{display:inline-flex; flex-wrap:wrap; align-items:center; justify-content:flex-end; gap:4px 8px}
.spelsprak-ett, .spelas-pa, .korg-sprak, .order-sprak, .sprak-bara{display:inline-flex; align-items:center; gap:7px}
.spelsprak-skilje{color:var(--muted)}
.spelsprak .flagga, .kopsprak .flagga, .sprak-bara .flagga, .korg-sprak .flagga, .spelas-pa .flagga, .order-sprak .flagga{
  width:18px; height:12px; border-radius:2px; flex:none; box-shadow:0 0 0 1px rgba(var(--ljus-rgb),.18)
}
.sprak-bara{
  display:flex; position:relative; z-index:4; margin:0 0 16px; padding:9px 13px; border-radius:12px;
  background:rgba(var(--rosa-rgb),.1); border:1px solid rgba(var(--rosa-rgb),.4);
  color:var(--blush); font-size:.86rem; line-height:1.35
}
.kopsprak{position:relative; z-index:4; border:0; margin:0 0 16px; padding:0; min-width:0}
.kopsprak legend{
  padding:0; margin:0 0 8px; font-family:var(--type); font-size:.66rem; letter-spacing:.16em;
  text-transform:uppercase; color:var(--muted)
}
.kopsprak-knappar{display:flex; flex-wrap:wrap; gap:8px}
.kopsprak-radio{position:absolute; opacity:0; width:1px; height:1px; pointer-events:none}
.kopsprak-knapp{
  display:inline-flex; align-items:center; gap:8px; padding:8px 15px; border-radius:100px; cursor:pointer;
  border:1px solid rgba(var(--ljus-rgb),.3); color:var(--blush); font-size:.88rem; line-height:1;
  transition:border-color .2s, background .2s, color .2s
}
.kopsprak-knapp:hover{border-color:rgba(var(--rosa-rgb),.7)}
.kopsprak-radio:checked + .kopsprak-knapp{border-color:var(--pink); background:rgba(var(--rosa-rgb),.16); color:var(--blush)}
.kopsprak-radio:focus-visible + .kopsprak-knapp{outline:2px solid var(--pink-soft); outline-offset:2px}
.korg-sprak{margin:-3px 0 8px; font-size:.8rem; color:var(--muted)}
/* =====================================================================
   NYHETSFLASHEN – glider in från höger (Pages/Shared/_Nyhetsflash.cshtml,
   js/nyhetsflash.js). Hopfälld: en flik i högerkanten med hjärnan.
   ===================================================================== */
.nflash[hidden]{display:none}
.nflash{--nf-in:cubic-bezier(.2,.9,.22,1.06); --nf-ut:cubic-bezier(.55,0,.75,.3)}
/* ---- fliken ---- */
.nflash-flik{
  position:fixed; right:0; bottom:132px; z-index:240;
  display:flex; flex-direction:column; align-items:center; gap:12px;
  padding:16px 11px 18px 13px; border:1px solid rgba(var(--ljus-rgb),.16); border-right:0;
  border-radius:16px 0 0 16px; cursor:pointer; color:var(--blush);
  background:linear-gradient(170deg, rgba(var(--plum-rgb),.97), rgba(var(--ink-rgb),.97));
  box-shadow:-14px 18px 40px -18px rgba(0,0,0,.65), inset 1px 0 0 rgba(var(--rosa-rgb),.25);
  transform:translateX(110%);
  transition:transform .55s var(--nf-in), background .3s, padding .3s;
}
.nflash.redo .nflash-flik{transform:none}
.nflash.oppen .nflash-flik{transform:translateX(110%); transition:transform .3s var(--nf-ut)}
.nflash-flik:hover, .nflash-flik:focus-visible{padding-right:17px}
.nflash-flik:focus-visible{outline:2px solid var(--pink-soft); outline-offset:3px}
.nflash-flik img{width:30px; height:auto; display:block; filter:drop-shadow(0 2px 6px rgba(0,0,0,.4))}
.nflash-flik-text{
  writing-mode:vertical-rl; transform:rotate(180deg);
  font-family:var(--type); font-size:.66rem; letter-spacing:.24em; text-transform:uppercase; color:var(--blush);
  max-height:150px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap
}
.nflash-flik-prick{
  position:absolute; top:9px; left:9px; width:8px; height:8px; border-radius:50%;
  background:var(--pink); box-shadow:0 0 0 0 rgba(var(--rosa-rgb),.6); animation:nflashPuls 2.4s ease-out infinite
}
/* ---- rutan ---- */
.nflash-kort{
  position:fixed; right:24px; bottom:24px; z-index:245;
  width:min(372px, calc(100vw - 32px)); max-height:calc(100vh - var(--header-h) - 40px); overflow:auto;
  padding:26px 26px 24px; border-radius:20px; color:var(--blush);
  background:
    radial-gradient(120% 70% at 100% 0%, rgba(var(--rosa-rgb),.22), transparent 60%),
    radial-gradient(90% 60% at 0% 100%, rgba(var(--massing-rgb),.10), transparent 70%),
    linear-gradient(165deg, var(--plum) 0%, var(--velvet) 45%, var(--ink) 100%);
  border:1px solid rgba(var(--ljus-rgb),.15);
  box-shadow:0 40px 80px -30px rgba(0,0,0,.75), 0 0 0 1px rgba(0,0,0,.2), inset 0 1px 0 rgba(var(--ljus-rgb),.12);
  opacity:0; visibility:hidden; transform:translateX(calc(100% + 48px)) rotate(1.5deg);
  transition:transform .5s var(--nf-ut), opacity .35s ease, visibility 0s linear .5s;
  scrollbar-width:thin; outline:none;
}
.nflash.oppen .nflash-kort{
  opacity:1; visibility:visible; transform:none;
  transition:transform .85s var(--nf-in), opacity .4s ease, visibility 0s
}
.nflash-sken{
  position:absolute; inset:0; border-radius:inherit; pointer-events:none;
  background:linear-gradient(115deg, transparent 30%, rgba(var(--ljus-rgb),.07) 45%, transparent 60%);
  background-size:250% 100%; background-position:120% 0
}
.nflash.oppen .nflash-sken{animation:nflashSken 1.6s ease .5s both}
/* den röda tråden */
.nflash-trad{position:absolute; left:0; right:0; top:0; width:100%; height:120px; pointer-events:none; overflow:visible}
.nflash-trad path{fill:none; stroke:var(--pink); stroke-width:1.4; stroke-linecap:round; opacity:.55; stroke-dasharray:520; stroke-dashoffset:520}
.nflash-trad circle{fill:var(--pink); opacity:0; transform-box:fill-box; transform-origin:center}
.nflash.oppen .nflash-trad path{animation:nflashTrad 1.6s cubic-bezier(.6,0,.2,1) .35s forwards}
.nflash.oppen .nflash-trad circle{animation:nflashKnut .4s ease 1.3s forwards}
.nflash-stang{
  position:absolute; top:14px; right:14px; z-index:2; width:34px; height:34px; display:grid; place-items:center;
  border-radius:50%; border:1px solid rgba(var(--ljus-rgb),.22); color:var(--blush);
  background:rgba(var(--ink-rgb),.55); cursor:pointer; transition:background .2s, border-color .2s, transform .25s
}
.nflash-stang svg{width:15px; height:15px}
.nflash-stang:hover{background:rgba(var(--rosa-rgb),.2); border-color:rgba(var(--rosa-rgb),.6); transform:rotate(90deg)}
.nflash-stang:focus-visible{outline:2px solid var(--pink-soft); outline-offset:2px}
.nflash-etikett{
  position:relative; display:flex; align-items:center; flex-wrap:wrap; gap:10px; margin:0 44px 16px 0;
  font-family:var(--type); font-size:.68rem; letter-spacing:.24em; text-transform:uppercase; color:var(--pink-soft)
}
.nflash-puls{width:8px; height:8px; border-radius:50%; background:var(--pink); flex:none; animation:nflashPuls 2.4s ease-out infinite}
.nflash-forhand{
  letter-spacing:.12em; font-size:.6rem; color:var(--paper-ink); background:var(--brass);
  padding:3px 8px; border-radius:100px
}
/* bilden som en polaroid med tejp */
.nflash-bild{
  position:relative; margin:4px 4px 22px; padding:8px 8px 22px; background:var(--paper);
  border-radius:3px; transform:rotate(-2deg);
  box-shadow:0 18px 30px -14px rgba(0,0,0,.7), 0 2px 0 rgba(0,0,0,.08)
}
.nflash.oppen .nflash-bild{animation:nflashPolaroid .9s var(--nf-in) .25s both}
.nflash-bild img{display:block; width:100%; height:auto; aspect-ratio:16/10; object-fit:cover; border-radius:1px; background:rgba(var(--ink-rgb),.2)}
.nflash-tejp{
  position:absolute; top:-10px; left:50%; width:86px; height:22px; transform:translateX(-50%) rotate(3deg);
  background:linear-gradient(90deg, rgba(var(--massing-rgb),.55), rgba(var(--massing-rgb),.72), rgba(var(--massing-rgb),.55));
  box-shadow:0 1px 2px rgba(0,0,0,.15); opacity:.9;
  -webkit-mask:linear-gradient(90deg, transparent 0 2px, #000 2px calc(100% - 2px), transparent calc(100% - 2px));
          mask:linear-gradient(90deg, transparent 0 2px, #000 2px calc(100% - 2px), transparent calc(100% - 2px))
}
.nflash-rubrik{
  font-family:var(--display); font-weight:400; font-size:1.85rem; line-height:1.08; letter-spacing:-.01em;
  margin:0 0 14px; color:var(--blush); text-wrap:balance
}
.nflash-rubrik em{font-style:italic; color:var(--pink-text)}
.nflash-nar{
  display:inline-flex; align-items:center; gap:8px; margin:0 0 16px; padding:7px 12px 7px 10px;
  border:1px dashed rgba(var(--massing-rgb),.6); border-radius:4px; transform:rotate(-1deg);
  font-family:var(--type); font-size:.74rem; letter-spacing:.1em; text-transform:uppercase; color:var(--brass);
  background:rgba(var(--massing-rgb),.06)
}
.nflash-nar svg{width:15px; height:15px; flex:none}
.nflash-text{font-size:.95rem; line-height:1.6; color:rgba(var(--ljus-rgb),.86)}
.nflash-text p{margin:0 0 10px}
.nflash-text p:last-child{margin-bottom:0}
.nflash-knapp{width:100%; justify-content:center; margin-top:20px}
.nflash-knapp svg{width:17px; height:17px; transition:transform .25s}
.nflash-knapp:hover svg{transform:translateX(4px)}
/* rutans innehåll kommer in efter varandra */
.nflash.oppen .nflash-etikett, .nflash.oppen .nflash-rubrik, .nflash.oppen .nflash-nar,
.nflash.oppen .nflash-text, .nflash.oppen .nflash-knapp{animation:nflashUpp .7s var(--nf-in) both}
.nflash.oppen .nflash-etikett{animation-delay:.18s}
.nflash.oppen .nflash-rubrik{animation-delay:.32s}
.nflash.oppen .nflash-nar{animation-delay:.42s}
.nflash.oppen .nflash-text{animation-delay:.5s}
.nflash.oppen .nflash-knapp{animation-delay:.6s}
@keyframes nflashPuls{0%{box-shadow:0 0 0 0 rgba(var(--rosa-rgb),.6)}70%{box-shadow:0 0 0 9px rgba(var(--rosa-rgb),0)}100%{box-shadow:0 0 0 0 rgba(var(--rosa-rgb),0)}}
@keyframes nflashTrad{to{stroke-dashoffset:0}}
@keyframes nflashKnut{from{opacity:0; transform:scale(.2)}to{opacity:.9; transform:none}}
@keyframes nflashUpp{from{opacity:0; transform:translateY(12px)}to{opacity:1; transform:none}}
@keyframes nflashPolaroid{from{opacity:0; transform:rotate(-9deg) translate(24px,-10px) scale(.92)}to{opacity:1; transform:rotate(-2deg)}}
@keyframes nflashSken{to{background-position:-60% 0}}
@media (max-width:560px){
  .nflash-kort{right:10px; left:10px; bottom:10px; width:auto; padding:22px 20px 20px; border-radius:18px;
    transform:translateY(calc(100% + 30px)); max-height:calc(100vh - 80px)}
  .nflash.oppen .nflash-kort{transform:none}
  .nflash-bild{margin:2px 2px 18px}
  .nflash-bild img{aspect-ratio:16/8}
  .nflash-rubrik{font-size:1.55rem}
  .nflash-flik{bottom:96px; padding:12px 8px 14px 10px; gap:9px}
  .nflash-flik img{width:24px}
  .nflash-flik-text{font-size:.6rem; max-height:110px}
}
@media (prefers-reduced-motion:reduce){
  .nflash-flik, .nflash-kort, .nflash.oppen .nflash-kort{transition:opacity .2s, visibility 0s}
  .nflash-kort{transform:none}
  .nflash *, .nflash-flik-prick{animation:none !important}
  .nflash-trad path{stroke-dashoffset:0}
  .nflash-trad circle{opacity:.9}
}
.juridik-innehall{position:sticky; top:calc(var(--header-h) + 24px); max-height:calc(100vh - var(--header-h) - 48px); overflow:auto;
  padding:20px 18px; border:1px solid rgba(var(--ljus-rgb),.12); border-radius:16px; background:rgba(var(--plum-rgb),.35)}
.juridik-innehall > p{margin:0 0 12px; font-family:var(--type); font-size:.66rem; letter-spacing:.2em; text-transform:uppercase; color:var(--pink-soft)}
.juridik-innehall ol{list-style:none; margin:0; padding:0; display:grid; gap:2px}
.juridik-innehall a{display:block; padding:6px 10px; border-radius:8px; font-size:.88rem; line-height:1.35; color:var(--muted); transition:background .2s, color .2s}
.juridik-innehall a:hover, .juridik-innehall a:focus-visible{background:rgba(var(--rosa-rgb),.12); color:var(--blush)}
@media (max-width:900px){
  .juridik-innehall{position:static; max-height:none}
  .juridik-innehall ol{grid-template-columns:repeat(auto-fill, minmax(200px, 1fr))}
}
@media print{
  body{background:#fff !important; color:#000 !important}
  body > header, body > footer, .nflash, .kaka, .korg, .spelmodal, .juridik-innehall, .skip-link{display:none !important}
}
/* ---------- förhandsvisning av textutkast från X Ray ---------- */
.textutkast-ruta{
  position:fixed; left:50%; top:82px; transform:translateX(-50%); z-index:9000; display:flex; max-width:calc(100vw - 32px); align-items:center; gap:10px;
  background:#1f0d18; color:#fff; border:1px solid var(--pink-knapp); border-radius:100px;
  padding:9px 16px; font-family:var(--body); font-size:.85rem; box-shadow:0 12px 30px -12px rgba(0,0,0,.8);
}
.textutkast-ruta{white-space:nowrap}
.textutkast-prick{flex:none; width:9px; height:9px; border-radius:50%; background:var(--pink); box-shadow:0 0 0 4px rgba(var(--rosa-rgb),.25)}
.textutkast-ruta a{color:var(--pink-soft); text-decoration:underline; text-underline-offset:3px}
@media print{
  .textutkast-ruta{display:none}
}
@media (max-width:600px){
  .textutkast-lang{display:none}
  .textutkast-ruta{top:76px}
}
/* ---------- underhåll: raden överst när Arena eller kassan är stängd (X Ray → Underhåll) ---------- */
.underhall-rad{position:relative;z-index:60;padding:9px 16px;text-align:center;font-size:.88rem;letter-spacing:.02em;
  background:#ff355e;color:#fff}
.underhall-rad:empty{display:none}
/* Meddelanderaden från X Ray → Inställningar */
.meddelande-rad{position:relative;z-index:59;padding:9px 16px;text-align:center;font-size:.88rem;letter-spacing:.02em;
  background:linear-gradient(90deg,rgba(var(--plum-rgb),.95),rgba(var(--rosa-rgb),.35),rgba(var(--plum-rgb),.95));color:var(--blush);
  border-bottom:1px solid rgba(var(--massing-rgb),.35)}
.meddelande-rad a{color:inherit;text-decoration:none}
.meddelande-rad a:hover{color:#fff;text-decoration:underline;text-underline-offset:3px}
.meddelande-rad a span{color:var(--pink-text)}
/* Länkar som skrivits in i Sajtens texter i X Ray (knappen "Länk till Så spelar du"). */
a.textlank{color:var(--pink-soft); border-bottom:1px solid rgba(var(--rosa-mjuk-rgb),.5); transition:border-color .2s, color .2s}
a.textlank:hover, a.textlank:focus-visible{color:var(--pink-text); border-color:currentColor}
/* Knapplänkar från Sajtens texter: class="btn btn-solid textknapp" eller "btn btn-ghost textknapp". */
a.textknapp{margin:10px 10px 4px 0; vertical-align:middle; text-decoration:none}
p > a.textknapp:first-child{margin-left:0}
@media (max-width:520px){
  a.textknapp{padding:12px 20px; font-size:.76rem}
}