/* ===================================================================
   Brightland Maze — sidor.css
   Stilarna för undersidorna: Arena och arenakontot, kassan och tack-sidan,
   statister, Om oss, kontakt, villkor, cookies, Så spelar du, recensioner m.m.
   Laddas efter site.css på alla sidor utom startsidan, spelsidorna och FAQ
   (se kommentaren överst i site.css). Variablerna (färger, typsnitt) finns i site.css.
   =================================================================== */

/* ---------- typografi ---------- */
.serif-i{font-family:var(--display); font-style:italic; color:var(--blush)}

/* ---------- knappar ---------- */
.btn-ink{background:var(--paper-ink); color:var(--paper)}

/* ---------- teamet (Om oss): porträtt i välvda ramar ---------- */
.portratt-lista{display:grid; grid-template-columns:repeat(3,1fr); gap:34px; align-items:start; margin-top:14px}
.portratt-ram{position:relative; margin:0 auto 26px; width:min(78%, 250px)}
.portratt-kvist{display:block; width:138px; margin:0 auto -9px; color:var(--brass); position:relative; z-index:1}
.portratt-monogram{
  position:absolute; inset:0; display:grid; place-items:center;
  font-family:var(--display); font-style:italic; font-weight:300; font-size:clamp(4.5rem, 9vw, 6.5rem);
  color:rgba(var(--ljus-rgb),.85); text-shadow:0 6px 30px rgba(var(--rosa-rgb),.45);
}
/* färre eller fler än tre personer (valda i X Ray → Inställningar) */
@media (min-width: 681px){
  .portratt-lista[data-antal="1"]{grid-template-columns:minmax(0,420px); justify-content:center}
  .portratt-lista[data-antal="2"], .portratt-lista[data-antal="4"]{grid-template-columns:repeat(2,minmax(0,400px)); justify-content:center}
}
button.portratt-spela{display:block; width:100%; padding:0; border:0; font:inherit; color:inherit; background:none; cursor:pointer; text-align:inherit}
button.portratt-spela:focus-visible{outline:2px solid var(--pink); outline-offset:4px}
.portratt-play{
  position:absolute; left:50%; top:50%; z-index:2; width:58px; height:58px; margin:-29px 0 0 -29px; border-radius:50%;
  display:grid; place-items:center; background:rgba(var(--ink-rgb),.55); color:#fff;
  border:1.5px solid rgba(255,255,255,.75); box-shadow:0 10px 30px -10px rgba(0,0,0,.8); transition:transform .3s, background .3s;
}
.portratt-play svg{width:24px; height:24px; margin-left:3px}
.portratt-spela:hover .portratt-play, .portratt-spela:focus-visible .portratt-play{transform:scale(1.08); background:var(--pink)}
dialog.galleri-visning.team-film{padding:12px 12px 14px; background:#0d0a0b; color:var(--blush); border:1px solid rgba(var(--massing-rgb),.35)}
dialog.galleri-visning.team-film video{display:block; width:min(860px, 88vw); max-height:78vh; border-radius:3px; background:#000}
.portratt-kropp{text-align:center}
.portratt-roll{font-family:var(--type); font-size:.7rem; letter-spacing:.18em; text-transform:uppercase; color:var(--pink-soft); margin:0 0 8px}
.portratt-namn{font-size:1.7rem; font-weight:400; margin:0}
.portratt-namn em{color:var(--pink-text); font-weight:300}
.portratt-citat{margin:16px auto 18px; max-width:30ch; position:relative}
.portratt-citat p{font-family:var(--display); font-style:italic; font-size:1.05rem; line-height:1.45; color:var(--blush); margin:0}
.portratt-citat::before{content:"\201C"; display:block; font-family:var(--display); font-size:2.6rem; line-height:.6; color:var(--brass); opacity:.8; margin-bottom:6px}
.portratt-text{color:var(--muted); font-size:.93rem; margin:0 0 22px; text-align:left}
.personakt{
  text-align:left; padding:16px 18px 14px; border-radius:4px;
  background:rgba(var(--ink-rgb),.45); border:1px dashed rgba(var(--massing-rgb),.35);
}
.personakt-rubrik{font-family:var(--type); font-size:.66rem; letter-spacing:.22em; text-transform:uppercase; color:var(--brass); margin:0 0 10px}
.personakt dl{margin:0; display:grid; gap:9px}
.personakt dl > div{display:grid; gap:1px}
.personakt dt{font-family:var(--type); font-size:.68rem; letter-spacing:.08em; text-transform:uppercase; color:rgba(var(--dampad-rgb),.8)}
.personakt dd{margin:0; font-size:.92rem; color:var(--blush)}
@media (max-width: 1000px){
  .portratt-lista{grid-template-columns:repeat(2,1fr)}
}
@media (max-width: 680px){
  .portratt-lista{grid-template-columns:1fr; max-width:420px; margin-inline:auto}
}

/* ---------- arena ---------- */
.code-row{display:flex; gap:12px; flex-wrap:wrap; margin-top:24px}
.code-row input{
  flex:1 1 240px; background:rgba(var(--ink-rgb),.75); border:1px solid rgba(var(--ljus-rgb),.22);
  color:var(--blush); padding:15px 20px; border-radius:100px; font-family:var(--type);
  letter-spacing:.24em; text-transform:uppercase; font-size:.9rem;
}
.code-row input::placeholder{color:rgba(var(--dampad-rgb),.6); letter-spacing:.2em}
.rooms{display:grid; gap:14px; margin-top:26px}
.room{
  display:flex; align-items:center; gap:18px; padding:18px 22px;
  border:1px solid rgba(var(--ljus-rgb),.12); border-radius:var(--r); background:rgba(var(--ink-rgb),.5);
  flex-wrap:wrap;
}
.dot{width:8px; height:8px; border-radius:50%; background:var(--pink); flex:none; box-shadow:0 0 0 4px rgba(var(--rosa-rgb),.18)}
.dot.vantar{background:var(--brass); box-shadow:0 0 0 4px rgba(var(--massing-rgb),.16)}
.room .rname{font-family:var(--display); font-size:1.1rem; flex:1 1 200px}
.room .rmeta{font-family:var(--type); font-size:.74rem; letter-spacing:.1em; color:var(--muted)}
.clues{list-style:none; padding:0; margin:0; display:grid; gap:12px}
.clue{
  border:1px solid rgba(var(--ljus-rgb),.14); border-left:2px solid var(--pink);
  padding:16px 20px; background:rgba(var(--ink-rgb),.55); font-family:var(--type); font-size:.9rem;
  color:var(--muted); border-radius:var(--r);
}
.clue.hidden{display:none}
.clue b{color:var(--blush); font-weight:400; display:block; margin-bottom:4px; letter-spacing:.14em; font-size:.7rem; text-transform:uppercase}
.suspects{display:grid; gap:12px; margin-top:18px}
.suspect{
  text-align:left; width:100%; background:rgba(var(--ink-rgb),.55); border:1px solid rgba(var(--ljus-rgb),.16);
  padding:16px 20px; border-radius:var(--r); transition:.25s; display:flex; justify-content:space-between; gap:12px; align-items:center;
}
.suspect:hover{border-color:var(--pink); background:rgba(var(--rosa-rgb),.08)}
.suspect .sname{font-family:var(--display); font-size:1.1rem}
.suspect .srole{font-family:var(--type); font-size:.72rem; letter-spacing:.1em; color:var(--muted)}
.suspect.right{border-color:var(--pink); background:rgba(var(--rosa-rgb),.14)}
.suspect.wrong{opacity:.42}
.verdict{margin-top:20px; padding:22px 24px; border:1px dashed rgba(var(--rosa-rgb),.5); border-radius:var(--r); background:rgba(var(--rosa-rgb),.07)}
.verdict.hidden{display:none}
.verdict h4{font-family:var(--display); font-size:1.3rem; margin-bottom:8px}
.verdict p{margin:0; color:var(--muted); font-size:.96rem}

/* ---------- kontakt ---------- */
.field{margin-bottom:20px}
.field label{
  display:block; font-family:var(--type); font-size:.72rem; letter-spacing:.16em;
  text-transform:uppercase; color:var(--muted); margin-bottom:9px;
}
.field input,.field textarea,.field select{
  width:100%; background:rgba(var(--velvet-rgb),.6); border:1px solid rgba(var(--ljus-rgb),.18);
  color:var(--blush); padding:14px 17px; border-radius:var(--r); font-family:var(--body); font-size:1rem;
}
.field textarea{min-height:150px; resize:vertical}
.field select{
  appearance:none;
  background-image:linear-gradient(45deg,transparent 50%,var(--pink) 50%),linear-gradient(135deg,var(--pink) 50%,transparent 50%);
  background-position:calc(100% - 22px) 22px, calc(100% - 16px) 22px;
  background-size:6px 6px; background-repeat:no-repeat;
}
.field .fel{color:var(--pink-soft); font-family:var(--type); font-size:.74rem; margin-top:7px; display:block}
.info-block{border:1px solid rgba(var(--ljus-rgb),.14); padding:34px 30px; border-radius:var(--r); background:rgba(var(--velvet-rgb),.55)}
.info-block h3{font-size:1.2rem; margin-bottom:18px}
.info-row{display:flex; gap:14px; padding:13px 0; border-bottom:1px dashed rgba(var(--ljus-rgb),.16); font-size:.95rem}
.info-row:last-child{border-bottom:0}
.info-row span{font-family:var(--type); font-size:.72rem; letter-spacing:.14em; text-transform:uppercase; color:var(--muted); min-width:88px; padding-top:3px}
.sent{
  margin-top:18px; font-family:var(--type); font-size:.86rem; color:var(--brass);
  border:1px dashed rgba(var(--massing-rgb),.5); padding:14px 18px; border-radius:var(--r);
}
/* ---------- cta-band ---------- */
.cta-band{text-align:center; padding:96px 0}
.cta-band h2{margin-bottom:18px}
.news{display:flex; gap:12px; max-width:520px; margin:0 auto; flex-wrap:wrap}
.news input{
  flex:1 1 240px; background:rgba(var(--ink-rgb),.7); border:1px solid rgba(var(--ljus-rgb),.22);
  color:var(--blush); padding:15px 22px; border-radius:100px; font-family:var(--body);
}
/* ---------- felsida ---------- */
.felsida{min-height:64vh; display:grid; place-items:center; text-align:center; padding:100px 0}
.felkod{font-family:var(--type); font-size:.8rem; letter-spacing:.3em; color:var(--pink-text); text-transform:uppercase; margin-bottom:18px}

/* ---------- responsivt ---------- */
@media (max-width:1000px){
  .split.rev .split-art{order:0}
}
/* ---- /korg utan JS ---- */
.korg-sida-ram{max-width:640px}

/* ---------- KASSAN ---------- */
.kassa-steg{display:grid; gap:22px}
.kassa-block{
  margin:0; min-width:0; border:1px solid rgba(var(--ljus-rgb),.14); border-radius:var(--r);
  background:rgba(var(--velvet-rgb),.55); padding:30px 30px 12px;
}
.kassa-block legend{
  float:left; width:100%; padding:0; margin-bottom:22px;
  display:flex; align-items:center; gap:14px;
  font-family:var(--display); font-size:1.45rem; color:var(--blush);
}
.kassa-block legend + *{clear:both}
.kassa-nr{
  font-family:var(--type); font-size:.7rem; letter-spacing:.12em; color:var(--pink-text);
  border:1px solid rgba(var(--rosa-rgb),.5); border-radius:100px; padding:4px 9px;
}
.falt-par{display:grid; grid-template-columns:1fr 1fr; gap:0 16px}
.falt-par.postort{grid-template-columns:.7fr 1.3fr}
.field .hjalp{display:block; margin-top:7px; font-size:.82rem; color:var(--muted)}
.field input:focus, .field select:focus, .field textarea:focus{outline:none; border-color:var(--pink); box-shadow:0 0 0 3px rgba(var(--rosa-rgb),.15)}
.field input.input-validation-error{border-color:var(--pink-soft)}
.kassa-block > .fel{display:block; color:var(--pink-soft); font-family:var(--type); font-size:.74rem; margin:-6px 0 14px}
.leveranssatt{
  display:flex; align-items:center; gap:14px; padding:15px 18px; margin-bottom:4px;
  border:1px solid var(--pink); border-radius:var(--r); background:rgba(var(--rosa-rgb),.07);
  font-size:.95rem;
}
.leveranssatt b{margin-left:auto; font-weight:400; font-family:var(--display); font-size:1.1rem}
.leveranssatt-prick{width:16px; height:16px; border-radius:50%; border:1px solid var(--pink); display:grid; place-items:center; flex:none}
.leveranssatt-prick::after{content:""; width:8px; height:8px; border-radius:50%; background:var(--pink)}
.kassa-info{color:var(--muted); margin:0 0 20px}
/* Ombudsval (Fraktjakt) – korten återanvänder betalsättens stil */
.ombudsval{margin:6px 0 18px}
.ombud-rubrik{font-family:var(--type); font-size:.74rem; letter-spacing:.12em; text-transform:uppercase; color:var(--muted); margin:0 0 8px}
.ombudsval > .fel{display:block; color:var(--pink-soft); font-family:var(--type); font-size:.74rem; margin-top:6px}
.ombudsval > .fel:empty{display:none}
.betalning-plats{
  border:1px dashed rgba(var(--massing-rgb),.5); border-radius:var(--r); padding:18px 20px; margin-bottom:22px;
  background:repeating-linear-gradient(135deg, rgba(var(--massing-rgb),.04) 0 12px, transparent 12px 24px);
}
.betalning-plats .chip{color:var(--brass)}
.betalning-plats p{margin:12px 0 0; font-size:.92rem; color:var(--muted)}
.kassa-sammanfattning{
  position:sticky; top:calc(var(--header-h) + 20px);
  border:1px solid rgba(var(--rosa-rgb),.3); border-radius:var(--r);
  background:linear-gradient(168deg, rgba(var(--plum-rgb),.94), rgba(var(--ink-rgb),.96));
  padding:26px 28px 28px;
}
.kassa-sammanfattning-huvud{display:flex; justify-content:space-between; align-items:baseline; margin-bottom:4px}
.kassa-sammanfattning-huvud h3{font-size:1.4rem}
.kassa-sammanfattning-huvud a{font-family:var(--type); font-size:.7rem; letter-spacing:.14em; text-transform:uppercase; color:var(--pink-soft)}
.korg-lage-kassa .korg-typ{margin-bottom:4px}
.kassa-tom{max-width:640px; margin:0 auto; text-align:center}
.kassa-tom h2{margin-bottom:10px}
/* ---- tack ---- */
.tack-sida{min-height:70vh; display:grid; place-items:center; padding:90px 0}
.tack-kort{text-align:center; max-width:640px}
.tack-kort h1{font-size:clamp(2.6rem,6vw,4.4rem); margin:6px 0 20px}
.tack-kort .lead{margin:0 auto 24px}
.tack-lista{list-style:none; padding:0; margin:0 auto 10px; display:grid; gap:8px; color:var(--blush)}
.tack-lista li::before{content:"— "; color:var(--pink-text)}
.tack-kort .note{margin-bottom:32px}
@media (max-width:1000px){
  .kassa-sammanfattning{position:static; order:-1}
}
@media (max-width:760px){
  .kassa-block{padding:24px 18px 8px}
  .falt-par, .falt-par.postort{grid-template-columns:1fr}
  .kassa-sammanfattning{padding:22px 18px}
}
/* ===================================================================
   ARENA — växlaren kod / konto, info om Arena
   =================================================================== */
.arena-topp{padding-top:84px}
.arena-grid{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.02fr); gap:64px; align-items:center}
.arena-rubrik{font-size:clamp(2.6rem,5.2vw,4.3rem); line-height:1.02; margin:6px 0 22px}
.arena-rubrik em{color:var(--pink-text); font-style:italic}
.arena-punkter{list-style:none; padding:0; margin:28px 0 0; display:grid; gap:12px}
.arena-punkter li{display:flex; gap:12px; align-items:baseline; color:var(--blush)}
.arena-punkter li::before{content:""; width:18px; height:1px; background:var(--pink); flex:none; transform:translateY(-4px)}
/* ---- kortet med växlaren ---- */
.vaxel-kort{
  position:relative; border-radius:10px; padding:8px;
  background:linear-gradient(168deg, rgba(var(--plum-rgb),.96), rgba(var(--ink-rgb),.98));
  border:1px solid rgba(var(--rosa-rgb),.3);
  box-shadow:0 50px 110px -50px rgba(0,0,0,1), 0 0 0 1px rgba(var(--rosa-rgb),.05), 0 0 80px -30px rgba(var(--rosa-rgb),.35);
}
.vaxel-radio{position:absolute; opacity:0; width:1px; height:1px; pointer-events:none}
.vaxel-knappar{
  position:relative; display:grid; grid-template-columns:1fr 1fr;
  background:rgba(var(--ink-rgb),.55); border:1px solid rgba(var(--ljus-rgb),.1); border-radius:100px; padding:5px;
}
.vaxel-knappar label{
  position:relative; z-index:1; display:flex; align-items:center; justify-content:center; gap:9px;
  padding:13px 10px; border-radius:100px; cursor:pointer; user-select:none;
  font-family:var(--type); font-size:.72rem; letter-spacing:.16em; text-transform:uppercase; color:var(--muted);
  transition:color .35s;
}
.vaxel-knappar label svg{width:18px; height:18px; flex:none}
.vaxel-knappar label:hover{color:var(--blush)}
.vaxel-markor{
  position:absolute; top:5px; bottom:5px; left:5px; width:calc(50% - 5px); border-radius:100px;
  background:var(--pink-knapp); box-shadow:0 10px 26px -10px rgba(var(--rosa-rgb),.9);
  transition:transform .5s cubic-bezier(.6,.05,.25,1.15);
}
#lage-konto:checked ~ .vaxel-knappar .vaxel-markor{transform:translateX(100%)}
#lage-kod:checked ~ .vaxel-knappar label[for=lage-kod],
#lage-konto:checked ~ .vaxel-knappar label[for=lage-konto]{color:#fff}
#lage-kod:focus-visible ~ .vaxel-knappar label[for=lage-kod],
#lage-konto:focus-visible ~ .vaxel-knappar label[for=lage-konto]{outline:2px solid var(--blush); outline-offset:3px}
.vaxel-paneler{display:grid}
.vaxel-panel{
  grid-area:1/1; padding:30px 28px 26px; min-width:0;
  transition:opacity .35s ease, transform .5s cubic-bezier(.2,.8,.2,1), visibility 0s;
}
#lage-kod:checked ~ .vaxel-paneler .panel-konto,
#lage-konto:checked ~ .vaxel-paneler .panel-kod{
  opacity:0; visibility:hidden; pointer-events:none;
  transition:opacity .25s ease, transform .5s cubic-bezier(.2,.8,.2,1), visibility 0s .5s;
}
#lage-kod:checked ~ .vaxel-paneler .panel-konto{transform:translateX(28px)}
#lage-konto:checked ~ .vaxel-paneler .panel-kod{transform:translateX(-28px)}
.panel-rubrik{font-size:1.75rem; margin-bottom:8px}
.panel-text{color:var(--muted); margin:0 0 22px}
/* ---- kodfältet ---- */
.kod-falt{position:relative}
.kod-falt input{
  width:100%; padding:20px 74px 20px 20px; border-radius:6px;
  background:rgba(var(--ink-rgb),.7); border:1px solid rgba(var(--ljus-rgb),.2); color:var(--blush);
  font-family:var(--type); font-size:1.28rem; letter-spacing:.14em; text-transform:uppercase; text-align:center;
  transition:border-color .25s, box-shadow .25s;
}
.kod-falt input::placeholder{color:rgba(var(--ljus-rgb),.22)}
.kod-falt input:focus{outline:none; border-color:var(--pink); box-shadow:0 0 0 4px rgba(var(--rosa-rgb),.14)}
.kod-raknare{
  position:absolute; right:16px; top:50%; transform:translateY(-50%);
  font-family:var(--type); font-size:.72rem; color:var(--muted); pointer-events:none;
}
.kod-raknare b{font-weight:400; color:var(--blush)}
.kod-falt.komplett .kod-raknare b{color:var(--pink-text)}
.kod-falt.fel input{border-color:var(--pink-soft); animation:skaka .45s}
.falt-fel{margin:10px 0 0; font-family:var(--type); font-size:.76rem; color:var(--pink-soft)}
.testtips{
  margin-top:24px; padding:14px 16px; border-radius:6px;
  border:1px dashed rgba(var(--massing-rgb),.45);
  background:repeating-linear-gradient(135deg, rgba(var(--massing-rgb),.04) 0 12px, transparent 12px 24px);
}
.testtips .chip{color:var(--brass)}
.testtips p{margin:10px 0 6px; font-size:.86rem; color:var(--muted)}
.testtips ul{list-style:none; margin:0; padding:0; display:flex; flex-wrap:wrap; gap:6px 14px}
.testtips code, .erbjudande-kod code{font-family:var(--type); color:var(--blush); font-size:.84rem; letter-spacing:.06em}
/* ---- steg 2: giltig kod ---- */
.kod-giltig{
  scroll-margin-top:calc(var(--header-h) + 18px);
  display:flex; align-items:center; gap:10px; margin-bottom:18px;
  font-family:var(--type); font-size:.8rem; letter-spacing:.04em; color:var(--brass);
}
.kod-giltig svg{width:22px; height:22px; flex:none; padding:3px; border-radius:50%; background:rgba(var(--massing-rgb),.15)}
.kod-giltig b{font-weight:400; color:var(--blush)}
.kod-fall{
  display:grid; grid-template-columns:128px 1fr; gap:18px; align-items:center;
  padding:14px; margin-bottom:20px; border-radius:6px;
  background:rgba(var(--ink-rgb),.45); border:1px solid rgba(var(--ljus-rgb),.1);
  animation:stig .5s both;
}
.kod-fall-bild{aspect-ratio:16/10; border-radius:4px; overflow:hidden; background:linear-gradient(150deg,var(--platshallare-a),var(--platshallare-b))}
.kod-fall-bild img{width:100%; height:100%; object-fit:cover; display:block}
.kod-fall-no{margin:0 0 6px; font-family:var(--type); font-size:.66rem; letter-spacing:.14em; color:var(--muted); display:flex; align-items:center; gap:8px; flex-wrap:wrap}
.kod-fall-no .chip{font-size:.56rem; padding:3px 8px}
.kod-fall-namn{font-size:1.4rem; margin:0 0 4px}
.kod-fall-tag{margin:0; font-family:var(--display); font-style:italic; color:var(--pink-soft); font-size:.95rem}
.delvaxel-knappar{display:grid; grid-template-columns:1fr 1fr; border-bottom:1px solid rgba(var(--ljus-rgb),.14); margin-bottom:22px}
.delvaxel-knappar label{
  padding:12px 6px; text-align:center; cursor:pointer; color:var(--muted);
  font-family:var(--type); font-size:.72rem; letter-spacing:.14em; text-transform:uppercase;
  border-bottom:2px solid transparent; margin-bottom:-1px; transition:color .25s, border-color .35s;
}
.delvaxel-knappar label:hover{color:var(--blush)}
#steg2-login:checked ~ .delvaxel-knappar label[for=steg2-login],
#steg2-ny:checked ~ .delvaxel-knappar label[for=steg2-ny]{color:var(--blush); border-color:var(--pink)}
#steg2-login:focus-visible ~ .delvaxel-knappar label[for=steg2-login],
#steg2-ny:focus-visible ~ .delvaxel-knappar label[for=steg2-ny]{outline:2px solid var(--blush); outline-offset:2px}
.delvaxel-paneler{display:grid}
.delvaxel-panel{grid-area:1/1; transition:opacity .3s, visibility 0s}
#steg2-login:checked ~ .delvaxel-paneler .panel-steg2-ny,
#steg2-ny:checked ~ .delvaxel-paneler .panel-steg2-login{opacity:0; visibility:hidden; pointer-events:none; transition:opacity .2s, visibility 0s .3s}
.login-lankar{margin-top:20px; display:grid; gap:8px; justify-items:start; font-size:.88rem; color:var(--muted)}
.logga-ut{margin:14px 0 0; text-align:center}
.logga-ut button{
  background:none; border:0; padding:8px; color:var(--muted); cursor:pointer;
  font-family:var(--type); font-size:.72rem; letter-spacing:.16em; text-transform:uppercase;
}
.logga-ut button:hover{color:var(--pink-soft)}
/* ---- vad är Arena? ---- */
.arena-funktioner{display:grid; grid-template-columns:repeat(4, minmax(0,1fr)); gap:22px}
.arena-funktion{
  padding:30px 26px 28px; border-radius:6px;
  background:rgba(var(--velvet-rgb),.6); border:1px solid rgba(var(--ljus-rgb),.12);
  transition:border-color .3s, transform .3s;
}
.arena-funktion:hover{border-color:rgba(var(--rosa-rgb),.4); transform:translateY(-4px)}
.funktion-ikon{
  display:grid; place-items:center; width:56px; height:56px; border-radius:50%; margin-bottom:22px;
  color:var(--pink-text); background:rgba(var(--rosa-rgb),.1); border:1px solid rgba(var(--rosa-rgb),.3);
}
.funktion-ikon svg{width:28px; height:28px}
.arena-funktion h3{font-size:1.3rem; margin-bottom:10px}
.arena-funktion p{margin:0; color:var(--muted); font-size:.96rem}
/* Lappar med snöre – blocktypen "lappar" på Så spelar du (fanns tidigare under Arenan). */
.serie-rad{display:grid; grid-template-columns:1fr 110px 1fr 110px 1fr; align-items:center; margin-top:26px}
@media (min-width:981px){
  .serie-rad[style*="--lappar:1"]{grid-template-columns:minmax(0,420px); justify-content:center}
  .serie-rad[style*="--lappar:2"]{grid-template-columns:1fr 110px 1fr}
  .serie-rad[style*="--lappar:4"]{grid-template-columns:1fr 70px 1fr 70px 1fr 70px 1fr}
  .serie-rad[style*="--lappar:5"]{grid-template-columns:1fr 50px 1fr 50px 1fr 50px 1fr 50px 1fr}
}
.sg-lappar.serie{margin-top:0}
.sg-lapp-text p{margin:10px 0 0}
.sg-lapp-text p:first-child:only-child{margin-top:0}
.serie-steg .serie-del + .sg-lapp-text p:first-child{margin-top:10px}
.serie-steg{
  background:var(--paper); color:var(--paper-ink); padding:22px 22px 20px; border-radius:2px;
  font-family:var(--type); font-size:.86rem; line-height:1.6; text-align:left;
  box-shadow:0 24px 50px -30px rgba(0,0,0,.85); transform:rotate(-.8deg);
}
.serie-steg:nth-of-type(2){transform:rotate(.6deg)}
.serie-steg.sista{transform:rotate(-.3deg)}
.serie-steg p{margin:10px 0 0}
.serie-del{
  display:inline-block; background:var(--pink-knapp); color:#fff; border-radius:100px; padding:3px 11px;
  font-size:.62rem; letter-spacing:.2em; text-transform:uppercase;
}
.serie-trad{width:100%; height:44px; overflow:visible}
.serie-trad path{fill:none; stroke:var(--pink); stroke-width:1.6; stroke-dasharray:5 5}

/* ---------- MITT ARENAKONTO ---------- */
.konto-huvud{display:flex; justify-content:space-between; align-items:flex-end; gap:24px; flex-wrap:wrap; margin-bottom:34px}
.konto-rubrik{font-size:clamp(2.3rem,4.6vw,3.6rem); margin:4px 0 10px}
.konto-rubrik em{color:var(--pink-text); font-style:italic}
.konto-sedan{margin:0; font-family:var(--type); font-size:.76rem; letter-spacing:.06em; color:var(--muted)}
.konto-atgarder{display:flex; align-items:center; gap:10px}
.konto-atgarder .logga-ut{margin:0}
.konto-atgarder{flex-wrap:wrap}
.inbjudan-text{color:var(--muted); margin:0 0 20px; font-size:.95rem}
.inbjudan-stang{position:absolute; top:14px; right:14px; width:38px; height:38px; display:grid; place-items:center;
  background:transparent; border:1px solid rgba(var(--ljus-rgb),.2); border-radius:50%; color:var(--blush); cursor:pointer}
.inbjudan-stang:hover{border-color:var(--pink); color:var(--pink-soft)}
.inbjudan-stang svg{width:16px; height:16px}
.inbjudan-knappar{display:flex; gap:12px; flex-wrap:wrap; margin-top:6px}
.konto-meddelande{
  display:flex; align-items:center; gap:12px; margin:0 0 30px; padding:15px 18px; border-radius:6px;
  border:1px solid rgba(var(--massing-rgb),.45); background:rgba(var(--massing-rgb),.08); color:var(--blush);
  animation:stig .5s both;
}
.konto-meddelande svg{width:22px; height:22px; flex:none; color:var(--brass)}
.konto-statistik{display:grid; grid-template-columns:repeat(4, minmax(0,1fr)); gap:16px; margin:0 0 56px}
.konto-statistik > div{
  padding:22px 22px 20px; border-radius:6px; background:rgba(var(--velvet-rgb),.6); border:1px solid rgba(var(--ljus-rgb),.12);
}
.konto-statistik dt{font-family:var(--type); font-size:.68rem; letter-spacing:.16em; text-transform:uppercase; color:var(--muted)}
.konto-statistik dd{margin:8px 0 0; font-family:var(--display); font-size:2.7rem; line-height:1; color:var(--blush)}
.konto-statistik dd small{font-size:1.1rem; color:var(--muted); margin-left:6px}
.konto-sektion{margin-bottom:56px}
.konto-sektion-rubrik{font-size:1.9rem; margin-bottom:8px}
.konto-sektion-lead{color:var(--muted); margin:0 0 22px}
.konto-fall{display:grid; grid-template-columns:repeat(auto-fill, minmax(min(280px,100%),1fr)); gap:24px}
.konto-fallkort{
  display:flex; flex-direction:column; border-radius:6px; overflow:hidden;
  background:linear-gradient(168deg, rgba(var(--plum-rgb),.94), rgba(var(--ink-rgb),.96));
  border:1px solid rgba(var(--ljus-rgb),.13);
}
.konto-fallkort-bild{position:relative; aspect-ratio:16/8; background:linear-gradient(150deg,var(--platshallare-a),var(--platshallare-b))}
.konto-fallkort-bild img{width:100%; height:100%; object-fit:cover; display:block}
.konto-status{position:absolute; top:12px; left:12px; background:rgba(var(--ink-rgb),.78); backdrop-filter:blur(6px)}
.status-pagar .konto-status{color:var(--pink-soft)}
.status-lost .konto-status{color:var(--brass)}
.status-ny .konto-status{color:var(--blush)}
.konto-fallkort-inner{padding:18px 22px 22px; display:flex; flex-direction:column; flex:1}
.konto-fallkort-inner .case-no{margin:0 0 8px}
.konto-fallkort-inner h3{font-size:1.35rem; margin-bottom:16px}
.status-lost .framsteg span{background:linear-gradient(90deg, var(--brass), #f3d29f)}
.framsteg-text{margin:9px 0 18px; font-family:var(--type); font-size:.72rem; color:var(--muted)}
.konto-tva{display:grid; grid-template-columns:1fr 1fr; gap:40px}
.val-lista{list-style:none; margin:0; padding:0 0 0 22px; border-left:1px dashed rgba(var(--rosa-rgb),.45); display:grid; gap:18px}
.val-lista li{position:relative}
.val-lista li::before{
  content:""; position:absolute; left:-28px; top:7px; width:11px; height:11px; border-radius:50%;
  background:var(--pink); box-shadow:0 0 0 4px rgba(var(--rosa-rgb),.18);
}
.val-text{margin:0 0 6px; color:var(--blush); font-family:var(--display); font-size:1.15rem; line-height:1.35}
.val-foljer{margin:0; display:flex; align-items:center; gap:8px; font-family:var(--type); font-size:.74rem; color:var(--muted)}
.val-foljer svg{width:15px; height:15px; color:var(--pink-text); flex:none}
.val-foljer b{font-weight:400; color:var(--pink-soft)}
.erbjudanden{display:grid; gap:16px}
.erbjudande{padding:20px 22px; border-radius:6px; background:rgba(var(--velvet-rgb),.6); border:1px solid rgba(var(--ljus-rgb),.12)}
.erbjudande.gava{border-color:rgba(var(--massing-rgb),.45); background:linear-gradient(135deg, rgba(var(--massing-rgb),.1), rgba(var(--velvet-rgb),.6) 60%)}
.erbjudande.gava .chip{color:var(--brass)}
.erbjudande.rabatt .chip{color:var(--pink-soft)}
.erbjudande h3{font-size:1.25rem; margin:12px 0 6px}
.erbjudande p{margin:0; color:var(--muted); font-size:.94rem}
.erbjudande-kod{margin-top:12px !important}
.erbjudande-kod code{display:inline-block; padding:7px 14px; border:1px dashed var(--pink); border-radius:4px; font-size:1rem; letter-spacing:.2em}
.erbjudande .note{margin-top:10px}
/* ---- mina beställningar ---- */
.order-lista{list-style:none; margin:0; padding:0; display:grid; gap:10px}
.order-rad{
  display:grid; grid-template-columns:110px minmax(0,1fr) auto 18px; align-items:center; gap:18px;
  padding:16px 20px; border-radius:6px; color:inherit; text-decoration:none;
  background:rgba(var(--velvet-rgb),.6); border:1px solid rgba(var(--ljus-rgb),.12);
  transition:border-color .25s, transform .25s;
}
.order-rad:hover{border-color:rgba(var(--rosa-rgb),.5); transform:translateX(3px)}
.order-rad-datum{font-family:var(--type); font-size:.74rem; letter-spacing:.06em; color:var(--muted)}
.order-rad-text{display:grid; gap:3px; min-width:0}
.order-rad-text b{font-weight:500; color:var(--blush); overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.order-rad-text small{font-family:var(--type); font-size:.72rem; color:var(--muted)}
.order-rad-pil{color:var(--pink-text)}
.order-chip.pagar{color:var(--pink-soft)}
.order-chip.klar{color:var(--brass)}
.order-chip.problem{color:var(--fel)}
/* ---- en order ---- */
.order-sida .tillbaka{margin-bottom:18px}
.order-grid{display:grid; grid-template-columns:minmax(0,1.5fr) minmax(0,1fr); gap:48px; align-items:start}
.order-kvitto{padding:26px 26px 22px; border-radius:6px; background:rgba(var(--velvet-rgb),.6); border:1px solid rgba(var(--ljus-rgb),.12)}
.order-kvitto .konto-sektion-rubrik{font-size:1.5rem}
.order-rader{list-style:none; margin:16px 0 0; padding:0; display:grid; gap:12px}
.order-rader li{display:flex; justify-content:space-between; gap:14px}
.order-rader .chip{font-size:.54rem; padding:2px 8px; margin-left:6px; vertical-align:2px}
.order-summa{margin:18px 0 0; padding-top:14px; border-top:1px dashed rgba(var(--ljus-rgb),.2); display:grid; gap:8px}
.order-summa div{display:flex; justify-content:space-between; gap:14px; color:var(--muted)}
.order-summa dd{margin:0}
.order-summa .totalt{color:var(--blush); font-family:var(--display); font-size:1.3rem; margin-top:4px}
.leverans-steg{list-style:none; margin:22px 0 18px; padding:0; display:grid; grid-template-columns:repeat(5, minmax(0,1fr)); counter-reset:steg}
.leverans-steg li{position:relative; display:grid; justify-items:center; gap:10px; text-align:center}
.leverans-steg li::before{
  content:""; position:absolute; top:8px; left:-50%; width:100%; height:2px; background:rgba(var(--ljus-rgb),.16);
}
.leverans-steg li:first-child::before{display:none}
.leverans-steg li.klar::before, .leverans-steg li.nu::before{background:var(--pink)}
.leverans-prick{
  position:relative; z-index:1; width:18px; height:18px; border-radius:50%;
  border:2px solid rgba(var(--ljus-rgb),.3); background:var(--ink);
}
.leverans-steg li.klar .leverans-prick{border-color:var(--pink); background:var(--pink)}
.leverans-steg li.nu .leverans-prick{border-color:var(--pink); background:var(--ink); box-shadow:0 0 0 5px rgba(var(--rosa-rgb),.22)}
.leverans-steg li.nu .leverans-prick::after{content:""; position:absolute; inset:3px; border-radius:50%; background:var(--pink)}
.leverans-namn{font-family:var(--type); font-size:.68rem; letter-spacing:.1em; text-transform:uppercase; color:var(--muted)}
.leverans-steg li.nu .leverans-namn{color:var(--blush)}
.leverans-steg.problem li.nu .leverans-prick{border-color:var(--fel); box-shadow:0 0 0 5px rgba(var(--fel-rgb),.15)}
.leverans-steg.problem li.nu .leverans-prick::after{background:var(--fel)}
.leverans-text{margin:0 0 22px; font-family:var(--display); font-size:1.2rem; color:var(--blush)}
.leverans-problem{margin:0 0 22px; padding:14px 18px; border-radius:6px; border:1px solid rgba(255,180,168,.5); background:rgba(255,180,168,.08); color:var(--blush)}
.leverans-fakta{display:grid; grid-template-columns:repeat(auto-fit, minmax(200px,1fr)); gap:18px; margin:0 0 22px}
.leverans-fakta dt{font-family:var(--type); font-size:.68rem; letter-spacing:.16em; text-transform:uppercase; color:var(--muted); margin-bottom:6px}
.leverans-fakta dd{margin:0; color:var(--blush); font-size:.95rem; line-height:1.5}
.leverans-fakta dd b{font-weight:500}
.leverans-handelser-rubrik{font-size:1.15rem; margin:30px 0 12px}
.leverans-handelser{list-style:none; margin:0; padding:0 0 0 22px; border-left:1px dashed rgba(var(--rosa-rgb),.45); display:grid; gap:14px}
.leverans-handelser li{position:relative; display:grid; gap:2px}
.leverans-handelser li::before{
  content:""; position:absolute; left:-27px; top:6px; width:9px; height:9px; border-radius:50%; background:rgba(var(--rosa-rgb),.5);
}
.leverans-handelser li:first-child::before{background:var(--pink); box-shadow:0 0 0 4px rgba(var(--rosa-rgb),.18)}
.handelse-tid{font-family:var(--type); font-size:.7rem; color:var(--muted)}
.handelse-text{color:var(--blush)}
.handelse-text small{color:var(--muted)}
@media (max-width:980px){
  .order-grid{grid-template-columns:1fr; gap:10px}
}
@media (max-width:600px){
  .order-rad{grid-template-columns:minmax(0,1fr) auto; gap:6px 12px; padding:14px 16px}
  .order-rad-datum{grid-column:1 / -1}
  .order-rad-pil{display:none}
  .leverans-namn{font-size:.56rem; letter-spacing:.04em}
}
@media (max-width:1100px){
  .arena-funktioner{grid-template-columns:repeat(2, minmax(0,1fr))}
}
@media (max-width:980px){
  .arena-grid{grid-template-columns:1fr; gap:40px}
  .serie-rad{grid-template-columns:1fr; gap:0; max-width:420px; margin-inline:auto}
  .serie-trad{height:46px; width:46px; justify-self:center; transform:rotate(90deg)}
  .konto-tva{grid-template-columns:1fr; gap:0}
  .konto-statistik{grid-template-columns:repeat(2, minmax(0,1fr))}
}
@media (max-width:600px){
  .arena-topp{padding-top:48px}
  .arena-funktioner{grid-template-columns:1fr}
  .vaxel-panel{padding:24px 16px 20px}
  .vaxel-knappar label{font-size:.64rem; letter-spacing:.1em; gap:6px; padding:12px 6px}
  .kod-falt input{font-size:1rem; letter-spacing:.08em; padding:18px 58px 18px 14px}
  .kod-fall{grid-template-columns:90px 1fr; gap:14px}
  .konto-statistik dd{font-size:2.1rem}
  .konto-huvud{align-items:flex-start}
}
@media (prefers-reduced-motion:reduce){
  .vaxel-markor, .vaxel-panel, .delvaxel-panel{transition:none}
  .kod-falt.fel input, .kod-fall, .konto-meddelande{animation:none}
}
/* ===================================================================
   STARTA SPELET — knappen, verifieringen och utbländningen
   =================================================================== */
.starta-form{margin:6px 0 0}
.starta-steg{list-style:none; margin:0 0 24px; padding:0; display:flex; align-items:center; justify-content:center}
.starta-steg li{display:flex; align-items:center; gap:9px; font-family:var(--type); font-size:.7rem; letter-spacing:.16em; text-transform:uppercase; color:var(--muted)}
.starta-steg .parla{width:11px; height:11px; border-radius:50%; border:1px solid rgba(var(--massing-rgb),.55)}
.starta-steg .klar .parla{background:var(--pink); border-color:var(--pink); box-shadow:0 0 12px rgba(var(--rosa-rgb),.9)}
.starta-steg .nu{color:var(--blush)}
.starta-steg .nu .parla{background:var(--brass); border-color:var(--brass); box-shadow:0 0 12px rgba(var(--massing-rgb),.9)}
.starta-steg .trad{width:clamp(22px,7vw,56px); height:1px; margin:0 12px; background:rgba(var(--massing-rgb),.25); position:relative; overflow:hidden}
.starta-steg .trad i{position:absolute; inset:0; background:var(--pink); transform:scaleX(0); transform-origin:left; transition:transform .7s ease}
.starta-steg .trad.fylld i{transform:scaleX(1)}
.starta-steg .klar + .trad i{transform:scaleX(1)}
@media (max-width:640px){
  /* fem steg (kod – kontakt – mina enheter – laget – spel): på smala skärmar syns bara det aktuella stegets namn */
  .starta-steg .trad{width:clamp(10px,5vw,34px); margin:0 7px}
  .starta-steg li:not(.trad):not(.nu){font-size:0; gap:0}
}
.starta-fall{text-align:center; margin:0 0 6px; font-family:var(--type); font-size:.72rem; letter-spacing:.2em; text-transform:uppercase; color:var(--brass)}
.starta-rubrik{text-align:center; font-size:clamp(1.9rem,4vw,2.6rem); margin:0 0 12px}
.starta-lead{text-align:center; color:var(--muted); margin:0 auto 26px; max-width:46ch}
/* redan verifierade uppgifter – starta direkt */
.starta-verifierade{margin:0 0 22px; animation:stig .6s both}
.starta-verifierade h3{font-size:1.05rem; margin:0 0 4px; color:var(--blush)}
.starta-verifierade p{color:var(--muted); margin:0 0 14px; font-size:.92rem}
.starta-verifierade form{margin:0 0 10px}
.verifierad-val{
  width:100%; display:flex; align-items:center; gap:14px; text-align:left; cursor:pointer; font:inherit; color:inherit;
  background:rgba(var(--ink-rgb),.5); border:1px solid rgba(var(--massing-rgb),.3); border-radius:14px; padding:14px 16px;
  transition:border-color .2s, transform .2s, box-shadow .2s;
}
.verifierad-val:hover, .verifierad-val:focus-visible{border-color:var(--pink); transform:translateY(-2px); box-shadow:0 12px 30px -16px rgba(var(--rosa-rgb),.9); outline:none}
.vv-uppgifter{display:flex; flex-direction:column; gap:2px; min-width:0; flex:1}
.vv-uppgifter b{color:var(--blush); overflow-wrap:anywhere}
.vv-uppgifter span{font-family:var(--type); font-size:.86rem; color:var(--blush)}
.vv-uppgifter small{color:var(--ok); font-size:.76rem}
.vv-starta{flex:none; font-family:var(--type); font-size:.74rem; letter-spacing:.18em; text-transform:uppercase; color:var(--pink-soft)}
.vv-andra{display:inline-block; margin-top:6px; color:var(--brass); font-size:.9rem}
.otp-huvud{display:flex; align-items:center; gap:10px; margin-bottom:14px; font-size:.9rem; flex-wrap:wrap}
.otp-huvud label{color:var(--blush)}
.otp-ikon{width:28px; height:28px; display:grid; place-items:center; border-radius:8px; background:rgba(var(--rosa-rgb),.16); color:var(--pink-soft)}
.otp-ikon svg{width:17px; height:17px}
.otp-till{margin-left:auto; font-family:var(--type); font-size:.76rem; color:var(--muted)}
.otp-klar{display:none; color:var(--ok); font-size:1rem}
.otp-block.ok .otp-klar{display:inline}
.starta-koder .falt-fel{text-align:center; min-height:1.2em}
.starta-koder.skaka{animation:skaka .45s}
.starta-lankar{display:flex; justify-content:center; gap:22px; flex-wrap:wrap; margin-top:18px}
.starta-lankar form{margin:0}
/* testläge: koderna visas som två små "meddelanden" */
.testinkorg{position:fixed; right:18px; bottom:18px; z-index:90; width:min(260px,78vw); display:grid; gap:10px}
.testinkorg-kort{
  padding:12px 15px; border-radius:14px; border:1px solid rgba(var(--massing-rgb),.4);
  background:linear-gradient(150deg, rgba(var(--plum-rgb),.97), rgba(var(--ink-rgb),.98));
  box-shadow:0 26px 60px -24px rgba(0,0,0,1); animation:testinkorg .6s cubic-bezier(.2,.8,.2,1) both;
}
.testinkorg .fran{margin:0 0 2px; font-family:var(--type); font-size:.64rem; letter-spacing:.18em; text-transform:uppercase; color:var(--brass)}
.testinkorg .kod{margin:0; font-family:var(--type); font-size:1.6rem; letter-spacing:.3em; color:var(--pink-soft)}
/* hela sidan bländas ut innan spelpanelen öppnas */
.utblandning{position:fixed; inset:0; z-index:9999; background:#431436; opacity:0; pointer-events:none; transition:opacity 1s ease}
html.blandas-ut .utblandning{opacity:1; pointer-events:auto}
html.blandas-ut body > *:not(.utblandning){transition:filter 1s ease, transform 1.1s ease; filter:blur(6px); transform:scale(.985)}
/* ---- registrering ---- */
.reg{padding-top:84px}
.reg-grid{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,.95fr); gap:64px; align-items:center}
.reg-kort .vaxel-panel{padding:30px 28px 26px}
.gava-ruta{
  display:flex; gap:18px; align-items:flex-start; margin:26px 0 8px; padding:20px 22px; border-radius:10px;
  border:1px solid rgba(var(--massing-rgb),.5);
  background:linear-gradient(135deg, rgba(var(--massing-rgb),.16), rgba(var(--velvet-rgb),.5) 70%);
  box-shadow:0 0 50px -20px rgba(var(--massing-rgb),.5);
}
.gava-rubrik{margin:0 0 6px; font-family:var(--display); font-size:1.35rem; color:var(--blush); line-height:1.2}
.gava-text{margin:0; color:var(--muted); font-size:.95rem}
@media (max-width:980px){
  .reg-grid{grid-template-columns:1fr; gap:36px}
}
@media (max-width:600px){
  .starta-steg li{font-size:.6rem; letter-spacing:.1em; gap:6px}
  .starta-steg .trad{margin:0 7px}
  .otp-till{margin-left:0; width:100%}
  .reg{padding-top:44px}
  .testinkorg{position:static; width:auto; margin:0 22px 40px; grid-template-columns:1fr 1fr}
  .testinkorg .kod{font-size:1.3rem}
}
/* =====================================================================
   KASSAN – rabattkod och present
   ===================================================================== */
.visually-hidden{position:absolute !important; width:1px; height:1px; margin:-1px; padding:0; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0}
.rabatt-falt summary{
  cursor:pointer; list-style:none; display:inline-flex; align-items:center; gap:10px;
  font-family:var(--type); font-size:.72rem; letter-spacing:.14em; text-transform:uppercase; color:var(--pink-soft);
}
.rabatt-falt summary::-webkit-details-marker{display:none}
.rabatt-falt summary::before{
  content:"+"; width:20px; height:20px; border-radius:50%; border:1px solid currentColor;
  display:grid; place-items:center; font-size:.9rem; line-height:1; transition:transform .25s;
}
.rabatt-falt[open] summary::before{transform:rotate(45deg)}
.rabatt-rad-in{display:flex; gap:10px; margin-top:14px}
.rabatt-rad-in input{
  flex:1; min-width:0; background:rgba(var(--ink-rgb),.6); border:1px solid rgba(var(--ljus-rgb),.22); border-radius:100px;
  padding:11px 18px; color:var(--blush); font-family:var(--type); font-size:.86rem; letter-spacing:.14em; text-transform:uppercase;
}
.rabatt-rad-in input::placeholder{text-transform:none; letter-spacing:.04em; color:rgba(var(--dampad-rgb),.6)}
.rabatt-rad-in input:focus{outline:none; border-color:var(--pink); box-shadow:0 0 0 3px rgba(var(--rosa-rgb),.15)}
.rabatt-fel{margin:10px 0 0; font-size:.86rem; color:var(--pink-soft)}
.rabatt-demo{margin:10px 0 0; font-size:.8rem; color:var(--muted)}
.rabatt-demo code{font-family:var(--type); font-size:.72rem; color:var(--brass); border:1px dashed rgba(var(--massing-rgb),.45); border-radius:6px; padding:2px 6px; margin-left:4px}
.rabatt-aktiv{display:grid; grid-template-columns:auto 1fr auto; gap:4px 12px; align-items:center}
.rabatt-bricka{
  font-family:var(--type); font-size:.74rem; letter-spacing:.14em; padding:5px 11px; border-radius:100px;
  background:var(--pink-knapp); color:#fff;
}
.rabatt-aktiv.vilande .rabatt-bricka{background:none; color:var(--muted); border:1px dashed rgba(var(--ljus-rgb),.35)}
.rabatt-aktiv p{margin:0; font-size:.88rem; color:var(--blush)}
.rabatt-aktiv.vilande p{color:var(--muted)}
.rabatt-ta-bort{font-family:var(--type); font-size:.68rem; letter-spacing:.14em; text-transform:uppercase; color:var(--pink-soft); background:none; border:0; cursor:pointer}
/* ---- present ---- */
.present-val{margin:6px 0 22px}
.present-vaxel{
  display:flex; align-items:center; gap:16px; cursor:pointer; position:relative;
  padding:18px 20px; border:1px solid rgba(var(--ljus-rgb),.2); border-radius:var(--r);
  background:rgba(var(--ink-rgb),.4); transition:border-color .25s, background .25s;
}
.present-vaxel:hover{border-color:rgba(var(--rosa-rgb),.5)}
.present-vaxel input{position:absolute; opacity:0; pointer-events:none}
.present-vaxel-reglage{
  flex:none; width:42px; height:24px; border-radius:100px; position:relative;
  background:rgba(var(--ljus-rgb),.16); transition:background .25s;
}
.present-vaxel-reglage::after{
  content:""; position:absolute; top:3px; left:3px; width:18px; height:18px; border-radius:50%;
  background:var(--blush); transition:transform .3s cubic-bezier(.3,1.4,.5,1);
}
.present-vaxel-text{display:flex; flex-direction:column; gap:3px; flex:1}
.present-vaxel-text b{font-family:var(--display); font-weight:400; font-size:1.15rem; color:var(--blush)}
.present-vaxel-text small{color:var(--muted); font-size:.86rem; line-height:1.45}
.present-vaxel-ikon{width:30px; height:30px; flex:none; color:rgba(var(--ljus-rgb),.35); transition:color .3s, transform .4s cubic-bezier(.3,1.5,.5,1)}
.present-vaxel input:focus-visible ~ .present-vaxel-reglage{box-shadow:0 0 0 3px rgba(var(--rosa-rgb),.35)}
.present-val:has(#arPresent:checked) .present-vaxel{border-color:var(--pink); background:rgba(var(--rosa-rgb),.07)}
.present-val:has(#arPresent:checked) .present-vaxel-reglage{background:var(--pink)}
.present-val:has(#arPresent:checked) .present-vaxel-reglage::after{transform:translateX(18px); background:#fff}
.present-val:has(#arPresent:checked) .present-vaxel-ikon{color:var(--pink-text); transform:rotate(-8deg) scale(1.08)}
.present-panel{display:none; padding:22px 4px 0}
.present-val:has(#arPresent:checked) .present-panel{display:block; animation:stig .45s both}
.present-etikett{
  font-family:var(--type); font-size:.7rem; letter-spacing:.16em; text-transform:uppercase;
  color:var(--pink-soft); margin:8px 0 14px;
}
.present-satt{display:grid; grid-template-columns:1fr 1fr; gap:14px; margin-bottom:16px}
.satt-kort{
  position:relative; cursor:pointer; display:flex; flex-direction:column; gap:6px;
  padding:18px 18px 16px; border:1px solid rgba(var(--ljus-rgb),.2); border-radius:var(--r);
  background:rgba(var(--ink-rgb),.4); transition:border-color .25s, background .25s, transform .25s;
}
.satt-kort:hover{border-color:rgba(var(--rosa-rgb),.5)}
.satt-kort input{position:absolute; opacity:0; pointer-events:none}
.satt-kort::after{
  content:""; position:absolute; top:16px; right:16px; width:16px; height:16px; border-radius:50%;
  border:1px solid rgba(var(--ljus-rgb),.4);
}
.satt-kort:has(input:checked){border-color:var(--pink); background:rgba(var(--rosa-rgb),.08)}
.satt-kort:has(input:checked)::after{border-color:var(--pink); background:radial-gradient(circle, var(--pink) 4px, transparent 4.5px)}
.satt-kort:has(input:focus-visible){box-shadow:0 0 0 3px rgba(var(--rosa-rgb),.3)}
.satt-ikon{display:flex; align-items:center; gap:4px; color:var(--pink-text); margin-bottom:4px}
.satt-ikon svg{width:24px; height:24px}
.satt-plus{font-family:var(--type); font-size:.8rem; color:var(--muted)}
.satt-kort b{font-family:var(--display); font-weight:400; font-size:1.1rem; color:var(--blush); padding-right:22px}
.satt-kort small{color:var(--muted); font-size:.84rem; line-height:1.45}
.present-info{
  position:relative; margin:0 0 20px; padding:18px 20px 16px 22px; border-radius:var(--r);
  border:1px dashed rgba(var(--massing-rgb),.45);
  background:repeating-linear-gradient(135deg, rgba(var(--massing-rgb),.035) 0 12px, transparent 12px 24px);
}
.present-info::before{
  content:"i"; position:absolute; top:-11px; left:18px; width:22px; height:22px; border-radius:50%;
  display:grid; place-items:center; background:var(--brass); color:var(--pa-brass);
  font-family:var(--display); font-style:italic; font-size:.9rem;
}
.present-info-rubrik{font-family:var(--type); font-size:.72rem; letter-spacing:.14em; text-transform:uppercase; color:var(--brass); margin:4px 0 10px}
.present-info ol{margin:0; padding-left:20px; display:grid; gap:7px; font-size:.9rem; color:var(--blush)}
.present-info ol li::marker{color:var(--brass); font-family:var(--type); font-size:.8rem}
.present-info-not{margin:12px 0 0; font-size:.82rem; color:var(--muted)}
.present-info-samtal{display:none}
.present-panel:has(#sattSamtal:checked) .present-info-epost{display:none}
.present-panel:has(#sattSamtal:checked) .present-info-samtal{display:block; animation:stig .35s both}
.present-telefon{display:none}
.present-panel:has(#sattSamtal:checked) .present-telefon{display:block}
.present-tid{margin-bottom:0}
.present-tid .field{margin-bottom:8px}
.field select option:disabled{color:#7b5869}
.field input[type=date]{color-scheme:dark}
.present-tid-fel{display:block; color:var(--pink-soft); font-family:var(--type); font-size:.74rem; margin:2px 0 6px}
.present-tid-hjalp{display:block; margin:0 0 18px; font-size:.82rem; color:var(--muted)}
.present-panel textarea{min-height:92px; resize:vertical}
@media (max-width:760px){
  .present-satt{grid-template-columns:1fr}
  .present-tid{grid-template-columns:1fr 1fr}
  .rabatt-aktiv{grid-template-columns:auto 1fr}
  .rabatt-aktiv p{grid-column:1 / -1; order:3}
}
/* testläge: förhandsvisning av presentmejlet på tacksidan */
.test-mejl{margin:0 auto 34px; text-align:left; max-width:560px}
.test-mejl-etikett{font-size:.88rem; color:var(--muted); margin:0 0 12px}
.test-mejl-etikett .chip{color:var(--brass); margin-right:6px}
.test-mejl-brev{background:var(--paper); color:var(--paper-ink); border-radius:var(--r); padding:22px 24px; box-shadow:0 24px 50px -30px rgba(0,0,0,.85)}
.test-mejl-amne{font-family:var(--display); font-size:1.15rem; margin:0 0 12px; padding-bottom:10px; border-bottom:1px solid rgba(var(--velvet-rgb),.18)}
.test-mejl-brev pre{margin:0; white-space:pre-wrap; font-family:var(--type); font-size:.84rem; line-height:1.65}

/* ---------- sidan Om cookies ---------- */
.cookies-kort{max-width:820px}
.cookies-kort h2{font-size:1.5rem; margin:36px 0 10px}
.cookies-kort h2:first-child{margin-top:0}
.cookies-kort p{color:var(--muted); max-width:68ch}
.cookies-kort .note{margin-top:34px}
.cookies-kort .note a{color:var(--pink-soft); border-bottom:1px solid currentColor}
.cookies-tabell{overflow-x:auto; margin:18px 0 6px; border:1px solid rgba(var(--ljus-rgb),.14); border-radius:14px}
.cookies-tabell table{width:100%; border-collapse:collapse; font-size:.9rem; min-width:560px}
.cookies-tabell th{
  text-align:left; padding:12px 16px; background:rgba(var(--plum-rgb),.6);
  font-family:var(--type); font-weight:400; font-size:.66rem; letter-spacing:.16em; text-transform:uppercase; color:var(--pink-soft);
}
.cookies-tabell td{padding:12px 16px; border-top:1px solid rgba(var(--ljus-rgb),.08); color:var(--blush); vertical-align:top}
.cookies-tabell td:first-child code{font-family:var(--type); font-size:.78rem; color:var(--brass); word-break:break-all}
.cookies-tabell td:last-child{white-space:nowrap; color:var(--muted)}
/* =====================================================================
   TURNSTILE – widgeten syns bara om Cloudflare behöver fråga något
   ===================================================================== */
.turnstile{margin:4px 0 16px}
.turnstile:has(.cf-turnstile:empty){margin:0}
.turnstile .falt-fel{margin-top:8px}
.news .turnstile{flex-basis:100%; margin:0}
.skicka-igen .turnstile{margin:0 0 6px}
/* ---- Fortsätt med Google (_ExternInloggning) ----
   Färgerna följer Googles riktlinjer för knappen: vit med grå kant.
   Typsnittet är systemets – inga Google Fonts. */
.extern-inloggning{display:grid; gap:10px; margin:18px 0 6px}
.extern-knapp{
  display:flex; align-items:center; justify-content:center; gap:12px;
  min-height:46px; padding:10px 18px; border-radius:999px;
  font:500 .95rem/1.2 system-ui,-apple-system,"Segoe UI",sans-serif; letter-spacing:.01em;
  text-decoration:none; transition:box-shadow .2s ease, transform .2s ease, background-color .2s ease;
}
.extern-knapp img{width:20px; height:20px; flex:none}
.extern-knapp.google{background:#fff; color:#1f1f1f; border:1px solid #747775}
.extern-knapp.google:hover{background:#f7f3f5; color:#1f1f1f}
.extern-knapp:hover{box-shadow:0 10px 26px -14px rgba(var(--ink-rgb),.55); transform:translateY(-1px)}
.extern-knapp:focus-visible{outline:2px solid var(--pink); outline-offset:3px}
.extern-eller{
  display:flex; align-items:center; gap:14px; margin:8px 0 2px;
  font-family:var(--type); font-size:.72rem; letter-spacing:.14em; text-transform:uppercase; color:var(--muted);
}
.extern-eller::before, .extern-eller::after{content:""; flex:1; height:1px; background:rgba(var(--dampad-rgb),.35)}
.extern-fel{margin:0 0 12px}
.konto-sektion .extern-inloggning{max-width:340px}
.inloggningssatt{list-style:none; padding:0; margin:18px 0 0; display:flex; flex-wrap:wrap; gap:8px}
.inloggningssatt .chip.kopplad::before{content:"✓ "}
@media (prefers-reduced-motion: reduce){
  .extern-knapp{transition:none}
  .extern-knapp:hover{transform:none}
}

/* ---------- Bli statist (/statist) ---------- */
.statist-grid{display:grid; grid-template-columns:minmax(0,1.5fr) minmax(0,1fr); gap:56px; align-items:start}
.statist-form{
  padding:40px 40px 36px; border-radius:var(--r);
  background:linear-gradient(170deg, rgba(var(--plum-rgb),.6), rgba(var(--velvet-rgb),.5));
  border:1px solid rgba(var(--ljus-rgb),.14);
}
.statist-block{border:0; padding:0; margin:0 0 34px; min-width:0}
.statist-block legend{
  display:flex; align-items:baseline; gap:14px; width:100%; padding:0 0 12px; margin-bottom:20px;
  font-family:var(--display); font-size:1.35rem; color:var(--blush);
  border-bottom:1px solid rgba(var(--ljus-rgb),.12);
}
.statist-nr{font-family:var(--display); font-style:italic; font-weight:300; font-size:1.05rem; color:var(--pink-text)}
.statist-rad{display:grid; grid-template-columns:1fr 1fr; gap:0 18px}
.statist-form .fel{color:var(--pink-soft); font-family:var(--type); font-size:.74rem; margin:8px 0 0; min-height:0}
.statist-form .fel:empty{display:none}
/* språken – små etiketter att kryssa i */
.sprak-val{display:flex; flex-wrap:wrap; gap:9px}
.sprak-chip{position:relative; cursor:pointer}
.sprak-chip input{position:absolute; opacity:0; width:1px; height:1px}
.sprak-chip span{
  display:inline-flex; align-items:center; gap:8px; padding:9px 16px; border-radius:999px;
  border:1px solid rgba(var(--ljus-rgb),.2); background:rgba(var(--ink-rgb),.35);
  font-size:.92rem; color:var(--muted); transition:all .2s ease; user-select:none;
}
.sprak-chip span::before{
  content:""; width:8px; height:8px; border-radius:50%; border:1px solid currentColor; transition:all .2s ease;
}
.sprak-chip:hover span{border-color:rgba(var(--rosa-mjuk-rgb),.6); color:var(--blush)}
.sprak-chip input:checked + span{
  border-color:var(--pink); color:var(--blush); background:rgba(var(--rosa-rgb),.2);
  box-shadow:0 6px 18px -10px rgba(var(--rosa-rgb),.9);
}
.sprak-chip input:checked + span::before{background:var(--pink); border-color:var(--pink); box-shadow:0 0 0 3px rgba(var(--rosa-rgb),.25)}
.sprak-chip input:focus-visible + span{outline:2px solid var(--pink-soft); outline-offset:3px}
/* fotot */
.foto-falt{position:relative}
.foto-drop{
  position:relative; display:grid; justify-items:center; gap:6px; padding:34px 20px; text-align:center; cursor:pointer;
  border:1.5px dashed rgba(var(--ljus-rgb),.28); border-radius:14px; background:rgba(var(--ink-rgb),.3);
  transition:border-color .2s ease, background .2s ease;
}
.foto-drop:hover, .foto-drop.over, .foto-drop:focus-within{border-color:var(--pink); background:rgba(var(--rosa-rgb),.07)}
.foto-drop input{position:absolute; inset:0; opacity:0; cursor:pointer; width:100%; height:100%}
.foto-drop svg{width:38px; height:38px; color:var(--pink-soft); margin-bottom:4px}
.foto-drop-text{font-size:.98rem; color:var(--blush)}
.foto-drop-text strong{color:var(--pink-soft); font-weight:500}
.foto-drop-info{font-family:var(--type); font-size:.7rem; letter-spacing:.1em; color:var(--muted)}
.foto-forhand{display:none; align-items:center; gap:20px; padding:14px; border-radius:14px; border:1px solid rgba(var(--massing-rgb),.35); background:rgba(var(--ink-rgb),.35)}
.foto-forhand img{width:96px; height:120px; object-fit:cover; border-radius:60px 60px 8px 8px; box-shadow:0 0 0 1px rgba(var(--massing-rgb),.5), 0 0 0 5px rgba(var(--ink-rgb),.6)}
.foto-namn{margin:0 0 8px; font-size:.9rem; color:var(--blush); word-break:break-all}
.foto-byt{background:none; border:0; padding:0; font-family:var(--type); font-size:.74rem; letter-spacing:.12em; text-transform:uppercase; color:var(--pink-soft); cursor:pointer; border-bottom:1px solid currentColor}
.foto-falt.har-foto .foto-drop{display:none}
.foto-falt.har-foto .foto-forhand{display:flex}
.statist-skicka{padding-top:26px; border-top:1px solid rgba(var(--ljus-rgb),.12)}
.statist-gdpr{display:flex; gap:10px; align-items:flex-start; margin:16px 0 0; font-size:.84rem; color:var(--muted)}
.statist-gdpr svg{width:16px; height:16px; flex:none; margin-top:3px; color:var(--brass)}
/* sidokolumnen */
.statist-info{display:grid; gap:20px; position:sticky; top:calc(var(--header-h) + 24px)}
.statist-kort-eyebrow{font-family:var(--type); font-size:.68rem; letter-spacing:.2em; text-transform:uppercase; color:var(--brass); margin:10px 0 8px}
.statist-lista{list-style:none; padding:0; margin:0; text-align:left; display:grid; gap:12px; counter-reset:steg}
.statist-lista li{position:relative; padding-left:38px; color:var(--muted); font-size:.94rem; counter-increment:steg}
.statist-lista li::before{
  content:counter(steg); position:absolute; left:0; top:-1px; width:26px; height:26px; border-radius:50%;
  display:grid; place-items:center; font-family:var(--display); font-style:italic; font-size:.9rem;
  color:var(--pink-text); border:1px solid rgba(var(--rosa-rgb),.45);
}
/* tack */
.statist-klar{
  max-width:640px; margin:0 auto; text-align:center; padding:54px 40px 48px; border-radius:220px 220px 18px 18px;
  background:radial-gradient(120% 60% at 50% 0%, rgba(var(--rosa-rgb),.14), transparent 60%), rgba(var(--velvet-rgb),.6);
  border:1px solid rgba(var(--massing-rgb),.3);
}
.statist-klar-ikon{display:inline-grid; place-items:center; width:72px; height:72px; border-radius:50%; border:1px solid rgba(var(--rosa-rgb),.6); color:var(--pink-text); margin-bottom:22px; background:rgba(var(--rosa-rgb),.08)}
.statist-klar-ikon svg{width:34px; height:34px}
.statist-klar h2{font-size:2rem; margin:0 0 12px}
.statist-klar p{color:var(--muted); margin:0 auto 28px; max-width:46ch}
.statist-klar .hero-cta{justify-content:center}
/* kameran */
dialog.kamera{
  width:min(520px, 94vw); padding:26px; 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.kamera::backdrop{background:rgba(var(--ink-rgb),.8); backdrop-filter:blur(3px)}
dialog.kamera h2{font-size:1.3rem; margin:0 0 14px}
dialog.kamera video{width:100%; border-radius:12px; background:#000; display:block; transform:scaleX(-1)}
.kamera-knappar{display:flex; gap:12px; margin-top:16px; flex-wrap:wrap}
@media (max-width: 960px){
  .statist-grid{grid-template-columns:1fr}
  .statist-info{position:static}
}
@media (max-width: 600px){
  .statist-form{padding:28px 20px}
  .statist-rad{grid-template-columns:1fr}
  .statist-klar{padding:44px 22px 36px; border-radius:140px 140px 14px 14px}
}

/* ---------- bilder från tidigare statistinspelningar (polaroider) ---------- */
.statist-galleri{margin:-14px 0 56px}
.statist-galleri-rubrik{
  display:flex; align-items:center; gap:14px; margin:0 0 22px;
  font-family:var(--type); font-size:.72rem; letter-spacing:.2em; text-transform:uppercase; color:var(--brass);
}
.statist-galleri-rubrik::after{content:""; flex:1; height:1px; background:rgba(var(--massing-rgb),.25)}
.polaroider{
  display:flex; gap:26px; margin:0; padding:18px 6px 26px; overflow-x:auto; scroll-snap-type:x proximity;
  scrollbar-width:thin; scrollbar-color:rgba(var(--rosa-rgb),.5) transparent;
}
.polaroid-lank{display:block; cursor:zoom-in}
.polaroid-lank:focus-visible{outline:2px solid var(--pink); outline-offset:4px}
.polaroid-text{margin:10px 2px 0; font-family:var(--display); font-style:italic; font-size:.92rem; line-height:1.3; color:var(--paper-ink); text-align:center}
dialog.galleri-visning{
  max-width:min(900px, 94vw); padding:16px 16px 18px; border:0; border-radius:4px; background:var(--paper); color:var(--paper-ink);
  box-shadow:0 40px 100px -30px rgba(0,0,0,.8);
}
dialog.galleri-visning::backdrop{background:rgba(var(--ink-rgb),.88); backdrop-filter:blur(4px)}
dialog.galleri-visning img{display:block; max-width:100%; max-height:78vh; margin:0 auto}
dialog.galleri-visning p{margin:12px 0 0; text-align:center; font-family:var(--display); font-style:italic; font-size:1.05rem}
dialog.galleri-visning p:empty{display:none}
.galleri-stang{
  position:absolute; top:-14px; right:-14px; width:36px; height:36px; border-radius:50%; border:0; cursor:pointer;
  background:var(--pink); color:#fff; font-size:1.3rem; line-height:1; box-shadow:0 6px 16px rgba(0,0,0,.4);
}
/* ---------- statist + arenakonto ---------- */
.statist-konto-not{
  display:flex; gap:12px; align-items:flex-start; margin:0 0 28px; padding:14px 16px; border-radius:10px;
  background:rgba(var(--massing-rgb),.08); border:1px solid rgba(var(--massing-rgb),.3); color:var(--blush); font-size:.93rem;
}
.statist-konto-not svg{width:20px; height:20px; flex:none; color:var(--brass); margin-top:1px}
.statist-kontoval .konto-val{display:flex; gap:14px; align-items:flex-start; 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}
.statist-kontoval .konto-val:has(input:checked){border-color:var(--pink); background:rgba(var(--rosa-rgb),.08)}
.statist-kontoval .konto-val input{width:18px; height:18px; margin-top:3px; accent-color:var(--pink); flex:none}
.statist-kontoval .konto-val strong{display:block; font-weight:500; color:var(--blush)}
.statist-kontoval .konto-val small{display:block; margin-top:4px; color:var(--muted); font-size:.88rem}
.konto-losen{margin-top:18px}
.statist-kontoval:has(#skapaKonto:not(:checked)) .konto-losen{display:none}
.statist-har-konto{margin:14px 0 0}
.statist-klar-konto{color:var(--brass) !important; font-size:.95rem}
.statist-tabort .villkor{font-size:.9rem}
.statist-tabort .fel{color:var(--pink-soft); font-family:var(--type); font-size:.74rem; margin:-6px 0 12px !important}
/* Mitt konto: sammanfattningen */
.statist-sammanfattning{
  display:grid; grid-template-columns:auto 1fr; gap:28px; align-items:start; margin-top:22px; padding:26px;
  border-radius:16px; background:rgba(var(--velvet-rgb),.55); border:1px solid rgba(var(--massing-rgb),.25);
}
.statist-sammanfattning-foto img{
  display:block; width:120px; height:150px; object-fit:cover; border-radius:60px 60px 8px 8px;
  box-shadow:0 0 0 1px rgba(var(--massing-rgb),.55), 0 0 0 6px rgba(var(--ink-rgb),.5), 0 0 0 7px rgba(var(--massing-rgb),.3);
}
.statist-sammanfattning-namn{font-family:var(--display); font-size:1.4rem; margin:0 0 4px; color:var(--blush)}
.statist-sammanfattning-rad{margin:0 0 12px; color:var(--muted); font-size:.92rem}
.statist-sammanfattning-sprak{list-style:none; padding:0; margin:0 0 12px; display:flex; flex-wrap:wrap; gap:6px}
.statist-sammanfattning-sprak li{padding:4px 11px; border-radius:999px; font-size:.8rem; border:1px solid rgba(var(--rosa-rgb),.45); color:var(--pink-soft)}
.statist-sammanfattning-om{margin:0 0 10px; color:var(--muted); font-size:.93rem; white-space:pre-line}
.statist-sammanfattning .note{margin:0 0 16px}
.statist-inbjudan{
  margin-top:22px; padding:26px; border-radius:16px; display:flex; gap:22px; align-items:center; justify-content:space-between; flex-wrap:wrap;
  background:radial-gradient(80% 140% at 0% 0%, rgba(var(--rosa-rgb),.14), transparent 60%), rgba(var(--velvet-rgb),.55);
  border:1px dashed rgba(var(--massing-rgb),.4);
}
.statist-inbjudan p{margin:0; color:var(--blush); max-width:52ch}
@media (max-width: 600px){
  .statist-sammanfattning{grid-template-columns:1fr; justify-items:center; text-align:center}
  .statist-sammanfattning-sprak{justify-content:center}
}
/* ---------- kassan: var hamnar onlinefallen? ---------- */
.kassa-konto{
  display:flex; gap:12px; align-items:flex-start; margin:0 0 18px; padding:14px 16px; border-radius:10px;
  background:rgba(var(--massing-rgb),.08); border:1px solid rgba(var(--massing-rgb),.3);
}
.kassa-konto svg{width:20px; height:20px; flex:none; color:var(--brass); margin-top:2px}
.kassa-konto p{margin:0; font-size:.93rem; color:var(--blush)}
.kassa-konto-present{display:none}
.kassa:has(#arPresent:checked) .kassa-konto{background:rgba(var(--rosa-rgb),.07); border-color:rgba(var(--rosa-mjuk-rgb),.4)}
.kassa:has(#arPresent:checked) .kassa-konto svg{color:var(--pink-soft)}
.kassa:has(#arPresent:checked) .kassa-konto-egen{display:none}
.kassa:has(#arPresent:checked) .kassa-konto-present{display:block}
.kassa-konto-tips{margin:0 0 18px; font-size:.9rem; color:var(--muted)}

/* ---------- kassan: betalsätt (Kustom, PayPal) ---------- */
.betalsatt-logga{height:26px; width:auto; max-width:110px; flex:none; padding:4px 8px; border-radius:6px; background:#fff}
.betalning-hur{margin:6px 0 18px}
.betalning-fel{
  margin:0 0 16px; padding:13px 16px; border-radius:10px; font-size:.92rem; color:var(--blush);
  background:rgba(var(--rosa-rgb),.1); border:1px solid rgba(var(--rosa-mjuk-rgb),.5);
}
/* ---------- sparade uppgifter ---------- */
.kassa-sparat{margin:-6px 0 18px; font-size:.88rem; color:var(--muted)}
.kassa-sparat a{color:var(--pink-soft); border-bottom:1px solid currentColor}
.spara-uppgifter{font-size:.92rem; color:var(--muted)}
.uppgifter-kort{
  margin-top:22px; padding:24px 26px; border-radius:16px; display:flex; gap:24px; align-items:flex-end; justify-content:space-between; flex-wrap:wrap;
  background:rgba(var(--velvet-rgb),.55); border:1px solid rgba(var(--massing-rgb),.25);
}
.uppgifter-kort dl{margin:0; display:grid; grid-template-columns:repeat(auto-fit, minmax(170px, 1fr)); gap:14px 28px; flex:1}
.uppgifter-kort dt{font-family:var(--type); font-size:.66rem; letter-spacing:.16em; text-transform:uppercase; color:var(--brass); margin-bottom:4px}
.uppgifter-kort dd{margin:0; color:var(--blush); font-size:.95rem; overflow-wrap:anywhere}
/* ---------- Mitt konto: genvägsboxar högst upp ---------- */
.konto-genvagar{display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:18px; margin:6px 0 30px}
.genvag{
  position:relative; display:grid; grid-template-columns:auto 1fr; grid-template-rows:1fr auto; gap:6px 16px;
  padding:22px 22px 18px; border-radius:16px;
  background:radial-gradient(90% 120% at 0% 0%, rgba(var(--rosa-rgb),.1), transparent 60%), rgba(var(--velvet-rgb),.6);
  border:1px solid rgba(var(--massing-rgb),.28);
  transition:border-color .25s, transform .25s, box-shadow .25s;
}
.genvag:hover{border-color:rgba(var(--rosa-mjuk-rgb),.55); transform:translateY(-2px); box-shadow:0 20px 40px -28px rgba(var(--rosa-rgb),.6)}
.genvag-ikon{
  width:44px; height:44px; border-radius:50%; display:grid; place-items:center; color:var(--brass);
  border:1px solid rgba(var(--massing-rgb),.45); background:rgba(var(--ink-rgb),.35);
}
.genvag-ikon svg{width:22px; height:22px}
.genvag-foto img{
  display:block; width:44px; height:55px; object-fit:cover; border-radius:22px 22px 5px 5px;
  box-shadow:0 0 0 1px rgba(var(--massing-rgb),.55), 0 0 0 4px rgba(var(--ink-rgb),.5);
}
.genvag-text{min-width:0}
.genvag h2{font-family:var(--type); font-size:.7rem; font-weight:400; letter-spacing:.18em; text-transform:uppercase; color:var(--brass); margin:2px 0 8px}
.genvag-status{margin:0; font-family:var(--display); font-size:1.15rem; color:var(--blush); overflow-wrap:anywhere}
.genvag-status.ok{color:var(--blush)}
.genvag-status.tom{color:var(--muted); font-style:italic}
.genvag-detalj{margin:4px 0 0; font-size:.86rem; color:var(--muted); overflow-wrap:anywhere}
.genvag-lank{
  grid-column:1 / -1; justify-self:start; margin-top:10px; font-family:var(--type); font-size:.72rem; letter-spacing:.14em; text-transform:uppercase;
  color:var(--pink-soft); border-bottom:1px solid transparent; transition:border-color .2s;
}
.genvag-lank::after{content:""; position:absolute; inset:0; border-radius:16px}
/* hela boxen klickbar */
.genvag-lank:hover{border-color:currentColor}
.genvag-lank:focus-visible{outline:none}
.genvag:has(.genvag-lank:focus-visible){outline:2px solid var(--pink); outline-offset:3px}
.genvag .inloggningssatt{margin:0; gap:6px}
.genvag .inloggningssatt .chip{font-size:.62rem}
.genvag .falt-fel{margin:8px 0 0}
.genvag-koppla{grid-column:1 / -1; margin-top:6px}
.genvag-koppla .extern-inloggning{margin:0}
.genvag-koppla .extern-knapp{min-height:38px; padding:7px 14px; font-size:.86rem}
@media (max-width: 900px){
  .konto-genvagar{grid-template-columns:1fr}
}
@media (prefers-reduced-motion: reduce){
  .genvag{transition:none}
  .genvag:hover{transform:none}
}
/* ---------- byt lösenord ---------- */
.losen-grid{display:grid; grid-template-columns:minmax(0,1.2fr) minmax(0,1fr); gap:48px; align-items:start; max-width:960px}
.losen-grid .fel{display:block; color:var(--pink-soft); font-family:var(--type); font-size:.74rem; margin-top:7px}
.genvag-losen{
  position:relative; z-index:1; display:inline-block; margin-top:12px; font-family:var(--type); font-size:.72rem; letter-spacing:.14em;
  text-transform:uppercase; color:var(--pink-soft); border-bottom:1px solid transparent;
}
.genvag-losen:hover{border-color:currentColor}
@media (max-width: 800px){
  .losen-grid{grid-template-columns:1fr}
}
.betalning-detalj{margin:-6px 0 16px; padding:12px 14px; border-radius:8px; white-space:pre-wrap; word-break:break-word; font-family:var(--type); font-size:.74rem; color:var(--muted); background:rgba(var(--ink-rgb),.5); border:1px dashed rgba(var(--ljus-rgb),.2)}

/* ---------- felrutan (site.js: alla felmeddelanden i en flytande ruta) ---------- */
/* Felmeddelandena vid fälten syns också tydligare. */
.falt-fel, .field .fel, .statist-form .fel{
  display:block; padding:7px 11px 7px 30px; border-radius:8px; position:relative;
  background:rgba(var(--rosa-rgb),.12); color:#ffd3dd !important; border-left:3px solid var(--pink);
}
.falt-fel::before, .field .fel::before, .statist-form .fel::before{
  content:"!"; position:absolute; left:10px; top:50%; transform:translateY(-50%); width:14px; height:14px; border-radius:50%;
  display:grid; place-items:center; font:700 .62rem/1 var(--body); color:#fff; background:var(--pink);
}
.field .fel:empty, .statist-form .fel:empty, .field .fel.field-validation-valid{display:none}
/* ---------- gå med i ett lag (/lag) ---------- */
.lag-kort .eyebrow{margin-bottom:6px}
.lag-kort .valfri{font-weight:400; text-transform:none; letter-spacing:0; color:var(--muted); font-size:.8em; margin-left:4px}
.lagkod-falt{font-family:var(--type); letter-spacing:.32em; text-transform:uppercase; text-align:center; font-size:1.15rem}
/* ---------- arenakontot: dina spel ---------- */
.konto-spel-huvud{display:flex; flex-wrap:wrap; align-items:flex-end; justify-content:space-between; gap:14px 24px; margin-bottom:22px}
.konto-spel-huvud .konto-sektion-rubrik{margin:0}
.konto-filter{display:flex; flex-wrap:wrap; gap:8px}
.konto-filter-knapp{
  display:inline-flex; align-items:center; gap:8px; padding:9px 14px; border-radius:999px; cursor:pointer;
  font:inherit; font-size:.86rem; color:var(--blush); background:rgba(var(--ljus-rgb),.04);
  border:1px solid rgba(var(--ljus-rgb),.16); transition:border-color .2s, background .2s, color .2s;
}
.konto-filter-knapp span{font-family:var(--type); font-size:.72rem; color:var(--muted)}
.konto-filter-knapp:hover:not(:disabled){border-color:rgba(255,53,94,.55)}
.konto-filter-knapp.vald{background:rgba(255,53,94,.16); border-color:var(--pink); color:var(--blush)}
.konto-filter-knapp.vald span{color:var(--pink-soft)}
.konto-filter-knapp:disabled{opacity:.4; cursor:default}
.konto-fallkort[hidden]{display:none}
/* spelet som pågår just nu pulserar */
.konto-fallkort.status-pagar{border-color:rgba(255,53,94,.6); animation:kontoPuls 2.4s ease-in-out infinite}
.konto-puls{display:inline-block; width:8px; height:8px; margin-right:8px; border-radius:50%; background:var(--pink);
  box-shadow:0 0 0 0 rgba(255,53,94,.7); animation:kontoPrick 1.6s ease-out infinite; vertical-align:1px}
@media (prefers-reduced-motion:reduce){
  .konto-fallkort.status-pagar,.konto-puls{animation:none}
  .konto-fallkort.status-pagar{box-shadow:0 0 0 2px rgba(255,53,94,.35)}
}
.konto-spelknapp{margin-top:auto}
.konto-upptagen{margin:10px 0 0; font-size:.84rem; color:var(--muted); text-align:center}
/* se statistik – fälls ut i kortet */
.konto-statistikruta{margin-top:auto}
.konto-statistikruta summary{list-style:none; cursor:pointer}
.konto-statistikruta summary::-webkit-details-marker{display:none}
.konto-statistikruta dl{margin:14px 0 0; display:grid; grid-template-columns:1fr 1fr; gap:10px}
.konto-statistikruta dl div{padding:10px 12px; border-radius:6px; background:rgba(var(--ljus-rgb),.05); border:1px solid rgba(var(--ljus-rgb),.1)}
.konto-statistikruta dt{font-family:var(--type); font-size:.62rem; letter-spacing:.14em; text-transform:uppercase; color:var(--muted)}
.konto-statistikruta dd{margin:5px 0 0; color:var(--blush); font-size:.95rem}
/* ---------- starta spelet: steget "Laget" ---------- */
.starta-lag .field{margin-bottom:22px}
.starta-etikett{margin:0 0 8px; font-family:var(--type); font-size:.68rem; letter-spacing:.18em; text-transform:uppercase; color:var(--brass)}
.starta-inbjudan{
  display:grid; grid-template-columns:auto 1fr; gap:20px; align-items:center; margin-bottom:24px;
  padding:18px; border-radius:14px; border:1px solid rgba(var(--rosa-rgb),.3); background:rgba(var(--rosa-rgb),.05);
}
.starta-qr{width:132px; background:#fff; border-radius:10px; padding:6px; line-height:0}
.starta-qr:empty{display:none}
.starta-qr svg{width:100%; height:auto}
.starta-inbjudan-text{min-width:0}
.starta-hjalp{margin:0 0 12px; font-size:.88rem; color:var(--muted)}
.starta-lagkod{margin:0 0 4px; font-family:var(--type); font-size:1.5rem; letter-spacing:.28em; color:var(--blush)}
.starta-lanktext{margin:0 0 12px; font-size:.78rem; overflow-wrap:anywhere}
.starta-lanktext a{color:var(--pink-soft)}
.starta-lagknappar{display:flex; flex-wrap:wrap; gap:8px}
.starta-laget{list-style:none; margin:0 0 24px; padding:0; display:flex; flex-wrap:wrap; gap:8px}
.starta-laget li{
  display:inline-flex; align-items:center; gap:8px; padding:7px 14px 7px 7px; border-radius:999px;
  background:rgba(var(--ink-rgb),.55); border:1px solid rgba(var(--massing-rgb),.25); color:var(--blush); font-size:.9rem;
}
.starta-laget .nr{width:24px; height:24px; border-radius:50%; display:grid; place-items:center; font-family:var(--type); font-size:.72rem;
  border:1px solid rgba(var(--massing-rgb),.5); color:var(--brass)}
.starta-laget li:first-child .nr{background:var(--pink); border-color:var(--pink); color:#fff}
.starta-laget small{font-family:var(--type); font-size:.6rem; letter-spacing:.14em; text-transform:uppercase; color:var(--brass)}
.starta-laget li.ny{animation:lagIn .7s cubic-bezier(.2,.8,.2,1) both; border-color:rgba(var(--rosa-rgb),.6)}
.starta-laget li.ny small{color:var(--pink-soft)}
.starta-senare{margin:12px 0 0; text-align:center; font-size:.82rem; color:var(--muted)}
@media (max-width:560px){
  .starta-inbjudan{grid-template-columns:1fr; justify-items:center; text-align:center}
  .starta-lagknappar{justify-content:center}
  .starta-steg .trad{width:clamp(14px,4vw,40px); margin:0 5px}
}
@media (prefers-reduced-motion:reduce){
  .starta-laget li.ny{animation:none}
}
/* ---- recensionen (/games/review) -------------------------------------- */
.recension .starta-kort{max-width:620px}
.recension-form{margin-top:8px}
.recension-kod{text-align:center; font-family:var(--type); font-size:1.4rem; letter-spacing:.2em; text-transform:uppercase}
.recension-betyg{border:0; padding:0; margin:0 0 20px}
.recension-betyg legend{font-size:.9rem; color:var(--blush); margin-bottom:10px}
.nycklar{display:flex; gap:8px; justify-content:center}
.recension-betyg .nycklar{flex-direction:row-reverse}
.recension-betyg input{position:absolute; opacity:0; pointer-events:none}
.recension-betyg label{cursor:pointer; padding:6px; border-radius:12px; transition:transform .2s}
.recension-betyg label:hover{transform:translateY(-2px)}
.nycklar svg{width:44px; height:44px; fill:none; stroke:rgba(var(--massing-rgb),.45); stroke-width:1.6; stroke-linecap:round; transition:stroke .2s, filter .2s}
.recension-betyg label:hover svg, .recension-betyg label:hover ~ label svg,
.recension-betyg input:checked + label svg, .recension-betyg input:checked + label ~ label svg,
.nycklar.visa svg.pa{stroke:var(--brass); filter:drop-shadow(0 0 8px rgba(var(--massing-rgb),.6))}
.recension-betyg input:focus-visible + label{outline:2px solid var(--pink); outline-offset:2px}
.nycklar.visa{justify-content:flex-start; margin-bottom:10px}
.nycklar.visa svg{width:30px; height:30px}
.recension-not{color:var(--muted); font-size:.86rem; margin:0 0 14px}
.recension-kvittens{color:var(--ok); text-align:center; margin:0 0 16px}
.recension-visa{margin:0 0 26px; padding:18px 20px; border:1px solid rgba(var(--massing-rgb),.25); border-radius:14px; background:rgba(var(--ink-rgb),.45)}
.recension-visa blockquote{margin:0 0 10px; color:var(--blush); font-size:1.05rem; white-space:pre-line}
.recension-visa figcaption{color:var(--muted); font-size:.86rem}
.recension-underrubrik{font-size:1.15rem; margin:0 0 4px; text-align:center}
.recension-foto{display:block; max-width:100%; max-height:420px; margin:0 auto 16px; border-radius:12px; border:1px solid rgba(var(--massing-rgb),.3)}
.recension-godkann{margin-top:10px}
.konto-recension{margin-top:10px}
.konto-recension.klar{display:block; text-align:center; color:var(--ok); font-size:.86rem}
/* recensionen: QR-kod för att ta fotot med mobilen, och mobilens kamerasida */
.recension-qr{display:flex; gap:16px; align-items:center; margin:0 0 18px; padding:14px; border:1px dashed rgba(var(--massing-rgb),.35); border-radius:14px}
.recension-qr-kod{flex:none; width:120px; height:120px; background:#fff; border-radius:8px; padding:4px}
.recension-qr-kod svg{width:100%; height:100%; display:block}
.recension-qr b{color:var(--blush)}
.recension-qr p{margin:4px 0 0; color:var(--muted); font-size:.88rem}
@media (max-width:700px), (pointer:coarse){
  .recension-qr{display:none}
}
.recension-kamera{display:grid; place-items:center; min-height:220px; margin:0 0 16px; border:2px dashed rgba(var(--massing-rgb),.45); border-radius:16px; cursor:pointer; font-size:1.15rem; color:var(--blush); overflow:hidden; text-align:center; padding:12px}
.recension-kamera img{max-width:100%; max-height:420px; border-radius:10px}

/* ---------- spelets språk: faktarad, val vid köp, "finns bara på …" ---------- */
.spelas-pa{margin:8px 0 0; font-size:.88rem; color:var(--blush)}
.order-sprak{margin:0 4px; font-size:.78rem; color:var(--muted)}
/* =====================================================================
   VILLKOR OCH INTEGRITETSPOLICY (Pages/Shared/_Juridik.cshtml)
   Innehållsförteckning till vänster som följer med, texten i en läsvänlig spalt.
   ===================================================================== */
.juridik-huvud{margin-bottom:44px}
.juridik-huvud h1{font-size:clamp(2.4rem, 5vw, 3.6rem)}
.juridik-giltig{
  display:inline-flex; margin-top:14px; padding:6px 12px; border:1px dashed rgba(var(--massing-rgb),.55); border-radius:4px;
  font-family:var(--type); font-size:.72rem; letter-spacing:.12em; text-transform:uppercase; color:var(--brass)
}
.juridik{display:grid; grid-template-columns:260px minmax(0,1fr); gap:56px; align-items:start}
.juridik-skrivut{
  margin-top:14px; width:100%; padding:9px 12px; border-radius:100px; cursor:pointer; background:none;
  border:1px solid rgba(var(--ljus-rgb),.25); color:var(--blush); font-family:var(--type); font-size:.68rem; letter-spacing:.16em; text-transform:uppercase
}
.juridik-skrivut:hover{border-color:var(--pink)}
.juridik-text{max-width:72ch; font-size:1.02rem; line-height:1.75; color:rgba(var(--ljus-rgb),.88)}
.juridik-text > p:first-child{font-size:1.14rem; color:var(--blush)}
.juridik-text h2{
  font-size:clamp(1.45rem, 2.4vw, 1.85rem); margin:52px 0 14px; padding-top:22px; color:var(--blush);
  border-top:1px solid rgba(var(--ljus-rgb),.1); scroll-margin-top:calc(var(--header-h) + 20px)
}
.juridik-text h3{
  margin:26px 0 8px; font-family:var(--type); font-weight:400; font-size:.78rem; letter-spacing:.16em; text-transform:uppercase; color:var(--pink-soft);
  scroll-margin-top:calc(var(--header-h) + 20px)
}
.juridik-text p{margin:0 0 14px}
.juridik-text ul{margin:0 0 16px; padding-left:0; list-style:none; display:grid; gap:8px}
.juridik-text li{position:relative; padding-left:22px}
.juridik-text li::before{content:""; position:absolute; left:2px; top:.72em; width:8px; height:1px; background:var(--pink)}
.juridik-text a{color:var(--pink-soft); border-bottom:1px solid rgba(var(--rosa-mjuk-rgb),.45); transition:border-color .2s}
.juridik-text a:hover{border-color:currentColor}
.juridik-text b{color:var(--blush); font-weight:500}
.juridik-text i{color:var(--muted); font-size:.92em}
@media (max-width:900px){
  .juridik{grid-template-columns:1fr; gap:28px}
}
@media print{
  .juridik{display:block}
  .juridik-text, .juridik-text p, .juridik-text b, .juridik-text h2, .juridik-text h3, .juridik-huvud h1{color:#000 !important}
  .juridik-text a{color:#000; border:0}
  .juridik-text h2{border-color:#ccc; break-after:avoid}
}
/* ---------- gå med i ett lag: verifierade uppgifter (2026-10-11) ---------- */
.lag-verifierade{border:0; padding:0; margin:0 0 18px; min-width:0}
.lag-verifierade legend{padding:0; font-size:1.05rem; margin:0 0 4px; color:var(--blush)}
.lag-verifierade p{color:var(--muted); margin:0 0 12px; font-size:.92rem}
.lag-vv{margin:0 0 10px}
.lag-vv input{flex:none; width:18px; height:18px; margin:0; accent-color:var(--pink)}
.lag-vv:has(input:checked){border-color:var(--pink); box-shadow:0 12px 30px -18px rgba(var(--rosa-rgb),.9)}
.lag-vv-annat .vv-uppgifter b{font-weight:500; color:var(--muted)}
/* De egna fälten används bara när "Ange andra uppgifter" är valt. */
.lag-verifierade:has(input[value]:checked):not(:has(input[value="annat"]:checked)) ~ .lag-egna.doljbar{display:none}
.lag-konto-not{margin:4px 0 16px; font-size:.86rem; color:var(--muted)}
.lag-konto-not::before{content:"✓ "; color:var(--ok)}
.konto-inbjuden{margin:-4px 0 10px; font-size:.82rem; color:var(--muted)}
.konto-inbjuden::before{content:"👥 "}
.lag-utan{margin-top:14px; text-align:center}
.lag-utan .lank{font-size:.88rem; color:var(--muted)}
.lag-steglank{display:block;margin:14px auto 0;text-align:center;font-size:.9rem}

/* ---------- underhåll: raden överst när Arena eller kassan är stängd (X Ray → Underhåll) ---------- */
/* Laginbjudan: logga in på arenakontot (Pages/Lag) */
.lag-arena-login{display:flex; align-items:center; gap:14px; flex-wrap:wrap; margin:0 0 22px; padding:14px 16px;
  border:1px solid rgba(255,53,94,.35); border-radius:14px; background:rgba(255,53,94,.07); text-align:left}
.lag-arena-login p{flex:1 1 240px; margin:0; font-size:.9rem; color:var(--muted)}
.lag-arena-login p b{display:block; color:var(--blush); margin-bottom:2px}
.lag-arena-login .btn{flex:0 0 auto; white-space:nowrap}
@media (max-width:520px){
  .lag-arena-login .btn{width:100%; text-align:center}
}
.login-tillbaka-laget{margin:16px 0 0; text-align:center; font-size:.88rem}
.login-tillbaka-laget a{color:var(--muted)}
/* Laginbjudan: "Spelar du i samma rum som …?" (Pages/Lag) */
.lag-sammarum{border:0; padding:0; margin:4px 0 18px; min-width:0}
.lag-sammarum legend{padding:0; font-size:1.05rem; margin:0 0 10px; color:var(--blush)}
.vr-rum{display:inline-block; margin-left:6px; padding:1px 8px; border-radius:999px; font-size:.7rem; font-style:normal; font-weight:600;
  background:rgba(var(--ljus-rgb),.08); border:1px solid rgba(var(--ljus-rgb),.22); color:var(--muted); vertical-align:middle}
/* =====================================================================
   SÅ SPELAR DU (/how-to-play, Pages/Spelguide.cshtml) – byggs i X Ray.
   Samma upplägg som villkoren: innehåll till vänster som följer med,
   blocken i en läsvänlig spalt till höger.
   ===================================================================== */
.spelguide-huvud{max-width:68ch; margin-bottom:52px}
.spelguide-huvud h1{font-size:clamp(2.5rem, 5.4vw, 4rem)}
.spelguide-huvud h1 em{font-style:italic; color:var(--pink-text)}
.spelguide-huvud .lead{margin-top:20px}
.spelguide-forhand{
  display:inline-flex; margin:-24px 0 36px; padding:8px 14px; border:1px dashed var(--pink); border-radius:4px;
  font-family:var(--type); font-size:.74rem; letter-spacing:.1em; text-transform:uppercase; color:var(--pink-soft)
}
.spelguide{max-width:860px}
.spelguide.med-innehall{max-width:none; display:grid; grid-template-columns:240px minmax(0,1fr); gap:60px; align-items:start}
.spelguide-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)
}
.spelguide-innehall > p{margin:0 0 12px; font-family:var(--type); font-size:.66rem; letter-spacing:.2em; text-transform:uppercase; color:var(--pink-soft)}
.spelguide-innehall ol{list-style:none; margin:0; padding:0; display:grid; gap:2px; counter-reset:sgi}
.spelguide-innehall a{display:flex; gap:10px; padding:6px 10px; border-radius:8px; font-size:.9rem; line-height:1.35; color:var(--muted); transition:background .2s, color .2s}
.spelguide-innehall a::before{counter-increment:sgi; content:counter(sgi, decimal-leading-zero); font-family:var(--type); font-size:.7rem; padding-top:.2em; color:rgba(var(--rosa-rgb),.6)}
.spelguide-innehall a:hover, .spelguide-innehall a:focus-visible{background:rgba(var(--rosa-rgb),.12); color:var(--blush)}
.spelguide-innehallet{display:grid; gap:64px; max-width:860px; min-width:0}
/* gemensamt för blocken */
.sg{position:relative; margin:0; scroll-margin-top:calc(var(--header-h) + 24px)}
.sg h2{font-size:clamp(1.7rem, 3vw, 2.3rem); margin-bottom:18px; color:var(--blush)}
.sg h2 em, .sg h3 em{font-style:italic; color:var(--pink-text)}
.sg-brodtext{font-size:1.04rem; line-height:1.75; color:rgba(var(--ljus-rgb),.86)}
.sg-brodtext > :first-child{margin-top:0}
.sg-brodtext > :last-child{margin-bottom:0}
.sg-brodtext p{margin:0 0 14px}
.sg-brodtext ul, .sg-brodtext ol{margin:0 0 16px; padding-left:0; list-style:none; display:grid; gap:8px}
.sg-brodtext ul li{position:relative; padding-left:22px}
.sg-brodtext ul li::before{content:""; position:absolute; left:2px; top:.8em; width:9px; height:1px; background:var(--pink)}
.sg-brodtext ol{counter-reset:sgo}
.sg-brodtext ol li{position:relative; padding-left:30px}
.sg-brodtext ol li::before{counter-increment:sgo; content:counter(sgo) "."; position:absolute; left:0; font-family:var(--type); font-size:.85em; color:var(--pink-soft); top:.12em}
.sg-brodtext b{color:var(--blush); font-weight:500}
.sg-brodtext em{font-family:var(--display); font-style:italic; color:var(--blush)}
.sg-brodtext a{color:var(--pink-soft); border-bottom:1px solid rgba(var(--rosa-mjuk-rgb),.45); transition:border-color .2s}
.sg-brodtext a:hover{border-color:currentColor}
.sg-knapprad{margin:24px 0 0}
/* dolda block i förhandsvisningen */
.sg-dold{outline:1px dashed rgba(var(--rosa-rgb),.7); outline-offset:14px; opacity:.72}
.sg-dold::after{
  content:attr(data-dold); position:absolute; top:-26px; right:-14px; padding:3px 10px; border-radius:100px;
  background:var(--pink-knapp); color:#fff; font-family:var(--type); font-size:.6rem; letter-spacing:.18em; text-transform:uppercase
}
/* text, gärna med bild bredvid */
.sg-text.sg-med-bild{display:grid; grid-template-columns:minmax(0,1.25fr) minmax(0,1fr); gap:44px; align-items:center}
.sg-text.sg-bild-vanster .sg-sidobild{order:-1}
.sg-sidobild{margin:0; position:relative; padding:12px}
.sg-sidobild::before{content:""; position:absolute; inset:0; border:1px solid rgba(var(--ljus-rgb),.16); border-radius:var(--r)}
.sg-sidobild img{display:block; width:100%; height:auto; border-radius:var(--r); box-shadow:0 26px 60px -34px rgba(0,0,0,.9)}
/* steg för steg */
.sg-steg{list-style:none; margin:0; padding:0; display:grid; gap:18px}
.sg-steg li{
  display:grid; grid-template-columns:auto minmax(0,1fr); gap:22px; align-items:start;
  padding:26px 28px; background:rgba(var(--velvet-rgb),.72); border:1px solid rgba(var(--ljus-rgb),.12); border-radius:var(--r)
}
.sg-nr{
  display:inline-flex; align-items:center; gap:10px; font-family:var(--type); font-size:.8rem; letter-spacing:.16em; color:var(--pink-soft); padding-top:.35em
}
.sg-nr::before{content:""; width:9px; height:9px; border-radius:50%; background:var(--pink); box-shadow:0 0 0 5px rgba(var(--rosa-rgb),.16)}
.sg-steg h3{margin-bottom:8px}
.sg-steg .sg-brodtext{font-size:.98rem; color:var(--muted)}
/* bild */
.sg-figur{max-width:720px}
.sg-figur.bred{max-width:none}
.sg-figur img{display:block; width:100%; height:auto; border-radius:var(--r); box-shadow:0 30px 70px -40px rgba(0,0,0,.95)}
.sg-figur figcaption{margin-top:14px; font-size:.92rem; color:var(--muted)}
.sg-figur figcaption p{margin:0}
/* film */
.sg-film{position:relative; border-radius:var(--r); overflow:hidden; background:#000; box-shadow:0 30px 70px -40px rgba(0,0,0,.95); border:1px solid rgba(var(--ljus-rgb),.12)}
.sg-film video{display:block; width:100%; height:auto; aspect-ratio:16/9; background:#000}
.sg-filmblock .sg-brodtext{margin-top:16px; font-size:.96rem; color:var(--muted)}
/* dokument att ladda ner */
.sg-dok-kort{
  display:grid; grid-template-columns:auto minmax(0,1fr) auto; gap:22px; align-items:center;
  padding:22px 26px; border:1px solid rgba(var(--ljus-rgb),.16); border-radius:var(--r);
  background:linear-gradient(160deg, rgba(var(--plum-rgb),.6), rgba(var(--ink-rgb),.85)); transition:border-color .2s, transform .2s
}
.sg-dok-kort:hover, .sg-dok-kort:focus-visible{border-color:var(--pink); transform:translateY(-2px)}
.sg-dok-ikon{display:grid; justify-items:center; gap:4px; color:var(--pink-soft)}
.sg-dok-ikon svg{width:40px; height:40px}
.sg-dok-ikon small{font-family:var(--type); font-size:.58rem; letter-spacing:.16em; text-transform:uppercase; color:var(--muted)}
.sg-dok-text{display:grid; gap:4px; min-width:0}
.sg-dok-text b{font-family:var(--display); font-weight:400; font-size:1.3rem; color:var(--blush); overflow-wrap:anywhere}
.sg-dok-text .sg-brodtext{font-size:.94rem; color:var(--muted); line-height:1.55}
.sg-dok-text small{font-family:var(--type); font-size:.68rem; letter-spacing:.14em; text-transform:uppercase; color:rgba(var(--dampad-rgb),.7)}
.sg-dok-knapp{
  padding:11px 20px; border-radius:100px; border:1px solid rgba(var(--ljus-rgb),.3); color:var(--blush);
  font-size:.74rem; letter-spacing:.16em; text-transform:uppercase; white-space:nowrap; transition:background .2s, border-color .2s
}
.sg-dok-kort:hover .sg-dok-knapp{background:var(--pink-knapp); border-color:var(--pink-knapp); color:#fff}
/* tips – en papperslapp */
.sg-tips{
  background:var(--paper); color:var(--paper-ink); padding:30px 30px 26px; border-radius:2px; max-width:680px;
  transform:rotate(-.5deg); box-shadow:0 24px 50px -30px rgba(0,0,0,.85)
}
.sg-tips:nth-of-type(even){transform:rotate(.45deg)}
.sg-tips-etikett{
  position:absolute; top:-11px; left:26px; background:var(--pink-knapp); color:#fff; border-radius:100px; padding:4px 12px;
  font-family:var(--type); font-size:.62rem; letter-spacing:.2em; text-transform:uppercase
}
.sg-tips .sg-brodtext{font-family:var(--type); font-size:.94rem; line-height:1.7; color:var(--paper-ink)}
.sg-tips .sg-brodtext b, .sg-tips .sg-brodtext em{color:var(--paper-ink)}
.sg-tips .sg-brodtext a{color:var(--pink-knapp); border-color:rgba(var(--rosa-rgb),.5)}
.sg-tips .sg-brodtext ul li::before{background:var(--pink-knapp)}
/* knapp – en ruta med text och knapp */
.sg-knappblock{
  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:40px 42px
}
.sg-knappblock h3{font-size:clamp(1.5rem, 2.6vw, 1.9rem); margin-bottom:10px}
.sg-knappblock .sg-brodtext{color:var(--muted); margin-bottom:24px; max-width:56ch}
@media (max-width:980px){
  .spelguide.med-innehall{grid-template-columns:1fr; gap:32px}
  .spelguide-innehall{position:static; max-height:none}
  .spelguide-innehall ol{grid-template-columns:repeat(auto-fill, minmax(220px, 1fr))}
}
@media (max-width:760px){
  .spelguide-innehallet{gap:48px}
  .sg-text.sg-med-bild{grid-template-columns:1fr; gap:26px}
  .sg-text.sg-bild-vanster .sg-sidobild{order:0}
  .sg-steg li{grid-template-columns:1fr; gap:10px; padding:22px 20px}
  .sg-dok-kort{grid-template-columns:auto minmax(0,1fr); padding:18px}
  .sg-dok-knapp{grid-column:1 / -1; justify-self:start}
  .sg-tips{padding:26px 22px 22px}
  .sg-knappblock{padding:30px 22px}
  .sg-dold{outline-offset:8px}
  .sg-dold::after{right:0}
}

/* =====================================================================
   YTOR (<bm-yta namn="…" />, Pages/Shared/_Yta.cshtml) – block som lagts
   till i redigeringsläget mellan sidornas avsnitt. Samma block som på
   Så spelar du (.sg-* ovan). Startsidan och spelsidan laddar bara site.css,
   så _Yta lägger till sidor.css där när en yta har innehåll.
   ===================================================================== */
.bm-yta-innehall{display:grid; gap:64px}
.bm-yta-innehall > *{width:100%; max-width:860px; margin-inline:auto; min-width:0}
.bm-yta-innehall > .sg-figur.bred,
.bm-yta-innehall > .bm-block:has(> .sg-figur.bred){max-width:none}
@media (max-width:760px){
  .bm-yta-innehall{gap:48px}
}