/* ===================================================================
   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}
/* 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}
/* ---------- 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}
}