/* ═══════════════════════════════════════════════════════════════════════════
   forre_pulse — SPRITES · SKÅPET (?page=sprites)                    2026-11-04
   ═══════════════════════════════════════════════════════════════════════════
   Kentas val C "Skåpet" ur design-proposals/sprites-parmen-2026-11-03.html.
   Ersätter pulse-sprites-rad.css + pulse-sprites-logg.css (laddas inte längre).
   pulse-sprites.css (brickans bas, statusremsan, Dela-rutan) och
   pulse-sprites-nasta.css (railens Härnäst + Vem kan hjälpa) ligger kvar.

   Spelets stil bor i RUTORNA: rariteten är ytan (ljus mitt → mörk kant),
   silhuett för det du inte hittat, guld + LV 5 + krona för maxad, två avskurna
   hörn. Allt runt omkring (knappar, menyer, fält) är vanligt, rakt och tyst —
   som i PokédexTracker och fortnite.gg. Inga linjer, ingen glow.
   ═══════════════════════════════════════════════════════════════════════════ */

.sq4{
  --sk-gx:"Roboto Condensed",Roboto,system-ui,sans-serif;
  --sk-ch:9px;
  --sk-maxad:#c9971c; --sk-gink:#2a1a00;
  --sk-gfoil:linear-gradient(100deg,#fff2bf 0%,#f5c542 28%,#c98a12 62%,#ffe58f 100%);
  --sk-sil:brightness(0); --sk-sil-o:.22;
  --sk-f-base:#646e7b; --sk-f-fortune:#d63a3d; --sk-f-cursed:#2f8a5b; --sk-f-gold:#b8860b;
  --sk-band:rgba(0,0,0,.42); --sk-tom-band:color-mix(in srgb,var(--ink) 10%,transparent);
  --sk-sh:0 10px 30px rgba(16,24,40,.16);
}
html[data-theme="dark"] .sq4{
  --sk-maxad:#e8b84a; --sk-sil-o:.62;
  --sk-f-base:#b9bbbe; --sk-f-fortune:#ee4245; --sk-f-cursed:#4fae7c; --sk-f-gold:#e8b84a;
  --sk-sh:0 14px 36px rgba(0,0,0,.6);
}
/* Spelets rariteter som yta (din skärmdump ur spelet + fortnite.gg) */
.sk-r-mythic   {--rc:#f6c33e;--rc2:#b06d0e;--rc3:#3b2104}
.sk-r-legendary{--rc:#ff9a3d;--rc2:#bd4a14;--rc3:#3d1405}
.sk-r-epic     {--rc:#cf7bff;--rc2:#7327c2;--rc3:#230d44}
.sk-r-rare     {--rc:#58c6ff;--rc2:#1e63c4;--rc3:#0a1f44}
.sk-r-okand    {--rc:#9aa3ad;--rc2:#4b5563;--rc3:#1f2933}
.sk-r-mythic,.sk-r-legendary,.sk-r-epic,.sk-r-rare,.sk-r-okand{
  --yta:radial-gradient(120% 95% at 50% 22%,var(--rc) 0%,var(--rc2) 58%,var(--rc3) 100%);
}

/* Panelen är inte längre ett kort: rutorna är korten. */
.sq-mx.sq-skap{
  background:transparent; border:0; box-shadow:none; border-radius:0;
  overflow:visible; container-type:inline-size; container-name:skap;
}
.sq-mx.sq-skap::before{ display:none; }
.sq-skap [hidden]{ display:none !important; }

/* ── knappar (raka, tysta) ─────────────────────────────────────────────── */
.sk-kn{
  height:34px; padding:0 14px; border:0; border-radius:8px; background:var(--inset);
  display:inline-flex; align-items:center; gap:6px; flex:none; cursor:pointer;
  font:600 13px/1 Roboto,system-ui,sans-serif; color:var(--ink); white-space:nowrap;
}
.sk-kn:hover{ filter:brightness(1.08); }
.sk-kn.sk-p{ background:var(--accent); color:#fff; }
.sk-kn.sk-s{ height:28px; padding:0 10px; font-size:12px; }
.sk-kn[aria-pressed="true"]{ background:var(--accent-wash); color:var(--accent-ink); }
.sk-kn .sk-dim{ opacity:.72; font-weight:600; }
.sk-kn i{ font-size:14px; }
.sk-ik{
  flex:none; width:34px; height:34px; border:0; border-radius:8px; background:var(--inset);
  display:grid; place-items:center; cursor:pointer; color:var(--ink2); font-size:15px;
}
.sk-ik:hover{ color:var(--ink); }

/* ── rad 1: säsongen är rubriken (och menyn) ───────────────────────────── */
.sk-h1{ display:flex; align-items:center; gap:8px; }
.sk-sp{ flex:1; }
.sk-mw{ position:relative; display:inline-flex; min-width:0; }
.sk-ssv{
  border:0; background:transparent; padding:0; display:inline-flex; align-items:center; gap:8px;
  cursor:pointer; color:var(--ink); min-width:0;
  font:italic 900 28px/1 var(--sk-gx); text-transform:uppercase; letter-spacing:.005em;
}
.sk-ssv span{ white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.sk-ssv i{ font-size:13px; color:var(--dim); -webkit-text-stroke:1px currentColor; }
.sk-meny{
  position:absolute; top:calc(100% + 6px); z-index:40; width:270px; max-height:460px; overflow:auto;
  background:var(--card); border-radius:10px; box-shadow:var(--sk-sh); padding:6px;
  animation:skFade .12s ease-out;
}
.sk-meny.sk-vg{ left:0; } .sk-meny.sk-hg{ right:0; }
@keyframes skFade{ from{ opacity:0; transform:translateY(-4px); } }
.sk-meny h6{ margin:8px 8px 3px; font:600 11.5px Roboto,system-ui,sans-serif; color:var(--dim); }
.sk-mi, .sk-meny .sq-typ-b{
  display:flex; width:100%; align-items:center; gap:8px; border:0; background:transparent;
  padding:7px 8px; border-radius:6px; cursor:pointer; text-align:left;
  font:500 13px Roboto,system-ui,sans-serif; color:var(--ink);
}
.sk-mi:hover, .sk-meny .sq-typ-b:hover{ background:var(--inset); }
.sk-mi.is-on{ color:var(--accent-ink); font-weight:700; }
.sk-ml .sq-seg.is-on::after{ content:"\F272"; font-family:bootstrap-icons; margin-left:auto; }  /* check2 */
span.sk-mi{ cursor:default; opacity:.55; }
.sk-mi .sk-r, .sk-mi > b.sk-r{ margin-left:auto; color:var(--dim); font-size:12px; font-weight:500; }
.sk-mi.is-full > b.sk-r{ color:var(--live); }
.sk-tt b{ display:block; font-weight:700; }
.sk-tt small{ display:block; font-size:11.5px; color:var(--dim); }
.sk-ok{ color:var(--live); }
.sk-mt{ display:flex; flex-wrap:wrap; gap:4px; padding:2px 6px 4px; }
.sk-meny .sk-mt .sq-typ-b{ width:auto; padding:5px 9px; background:var(--inset); font-size:12.5px; }
.sk-meny .sk-mt .sq-typ-b.is-on{ background:var(--accent); color:#fff; }
.sk-mt small{ opacity:.7; }
.sk-fd{ width:9px; height:9px; border-radius:2px; background:var(--sk-f-base); flex:none; }
.sk-fd.sk-f-fortune{ background:var(--sk-f-fortune); } .sk-fd.sk-f-cursed{ background:var(--sk-f-cursed); }
.sk-fd.sk-f-gold{ background:var(--sk-f-gold); }

/* ── rad 2: en stapel, en mening ───────────────────────────────────────── */
.sk-pb{
  position:relative; margin-top:12px; height:30px; border-radius:8px; background:var(--card);
  overflow:hidden; display:flex; align-items:center; gap:8px; padding:0 12px;
}
.sk-pb-f{ position:absolute; inset:0; }
.sk-pb-f i{ position:absolute; left:0; top:0; bottom:0; background:color-mix(in srgb,var(--accent) 30%,var(--card)); transition:width .4s; }
.sk-pb-t, .sk-pb-p{ position:relative; font-size:12.5px; color:var(--ink2); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.sk-pb-t b{ color:var(--ink); font-weight:800; }
.sk-gd{ color:var(--sk-maxad); font-weight:700; }
.sk-pb-p{ margin-left:auto; flex:none; font-weight:800; color:var(--ink); }

/* ── rad 3: sök · Bara saknade · Filter ────────────────────────────────── */
.sk-h3{ display:flex; align-items:center; gap:10px; margin-top:10px; }
/* Menyerna ligger i rubrikraderna — de måste stå över skåpet (globalt får .sq-mx-barn z-index:1). */
.sq-mx.sq-skap .sk-h1, .sq-mx.sq-skap .sk-h3{ z-index:6; }
.sk-sok{
  flex:1; max-width:340px; height:34px; display:flex; align-items:center; gap:8px; padding:0 12px;
  border-radius:8px; background:var(--card); color:var(--dim);
}
.sk-sok input{ flex:1; min-width:0; border:0; background:transparent; outline:0; font-size:13px; color:var(--ink); }
.sk-tg{ display:inline-flex; align-items:center; gap:7px; font-size:13px; color:var(--ink2); cursor:pointer; white-space:nowrap; user-select:none; }
.sk-tg input{ width:16px; height:16px; margin:0; accent-color:var(--accent); cursor:pointer; }
.sk-tg-s{ display:none; }
.sk-pt{ width:7px; height:7px; border-radius:50%; background:var(--accent); }

.sk-arkiv{ margin:10px 0 0; font-size:12.5px; color:var(--ink2); }
.sk-guide{ margin-top:10px; }
.sk-snabb{ margin:10px 0 0; }
.sk-compare{ margin:10px 0 0; padding:8px 12px; border:0; border-radius:10px; background:var(--card); }

/* telefonens rad: Härnästs etta + Kan hjälpa */
.sk-rad2{ display:none; gap:8px; margin-top:8px; }
.sk-rad1{
  display:flex; align-items:center; gap:10px; min-width:0; border:0; background:var(--card);
  border-radius:10px; padding:5px 10px; cursor:pointer; text-align:left; color:var(--ink);
}
.sk-rad1:first-child{ flex:1; }
.sk-rad1 img{ width:28px; height:28px; object-fit:contain; flex:none; }
.sk-rad1 > span:not(.sk-faces){ flex:1; min-width:0; }
.sk-rad1 small{ display:block; font-size:10.5px; line-height:1.2; color:var(--dim); }
.sk-rad1 b{ display:block; font-size:12.5px; line-height:1.3; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.sk-rad1 > i{ color:var(--dim); }
.sk-faces{ display:inline-flex; align-items:center; }
.sk-av{
  width:22px; height:22px; border-radius:50%; display:inline-grid; place-items:center; flex:none;
  background:hsl(var(--h,210) 55% 45%); color:#fff; font:800 8px/1 Roboto,system-ui,sans-serif;
  box-shadow:0 0 0 2px var(--card);
}
.sk-faces .sk-av + .sk-av{ margin-left:-6px; }
.sk-faces small{ margin-left:3px; font:800 10px Roboto,system-ui,sans-serif; color:var(--accent-ink); }

/* förklaringsraden + Välj flera */
.sk-leg{ display:flex; align-items:center; gap:10px; margin-top:10px; font-size:12px; color:var(--dim); }
.sk-leg p{ flex:1; margin:0; }
.sk-leg b{ color:var(--ink); }

/* ═══ SKÅPET: rutnätet + panelen ═══════════════════════════════════════════ */
.sk-skap{ display:grid; grid-template-columns:minmax(0,1fr) 380px; gap:14px; margin-top:12px; align-items:start; }
.sk-vanster{ min-width:0; }
.sk-rut{ display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:6px; }
@container skap (max-width:860px){
  .sk-skap{ grid-template-columns:minmax(0,1fr); }
  .sk-det{ display:none !important; }
  .sk-rut{ grid-template-columns:repeat(auto-fill,minmax(112px,1fr)); }
}
@container skap (max-width:560px){
  .sk-rut{ grid-template-columns:repeat(3,minmax(0,1fr)); }
  .sk-rad2{ display:flex; }
  .sk-ssv{ font-size:22px; }
  .sk-tg-l, .sk-kn-l{ display:none; } .sk-tg-s{ display:inline; }
  .sk-pb{ height:26px; margin-top:8px; }
  .sk-h3{ margin-top:8px; }
  .sk-ti-c .sq-cell{ --z:28px; }
}

/* RUTAN — rariteten är ytan; porträttet öppnar panelen, minibrickorna bockar */
.sk-ti{
  position:relative; display:flex; flex-direction:column; min-width:0; overflow:visible;
  background:var(--yta);
  clip-path:polygon(0 0,calc(100% - var(--sk-ch)) 0,100% var(--sk-ch),100% 100%,var(--sk-ch) 100%,0 calc(100% - var(--sk-ch)));
  transition:transform .15s;
  animation:skUpp .35s cubic-bezier(.2,.8,.3,1) both; animation-delay:calc(var(--i,0) * 22ms);
}
@keyframes skUpp{ from{ opacity:0; transform:translateY(8px); } }
.sk-ti.is-miss{ background:var(--inset); }
.sk-ti:hover{ transform:translateY(-2px); }
.sk-ti-p{
  position:relative; display:block; width:100%; border:0; padding:0; background:transparent;
  color:inherit; cursor:pointer; text-align:center; font:inherit;
}
.sk-port{ position:relative; display:grid; place-items:center; height:104px; }
.sk-port .sq-av{
  width:86px; height:86px; object-fit:contain; border:0; border-radius:0; background:transparent;
  filter:drop-shadow(0 4px 4px rgba(0,0,0,.35)); transition:transform .25s;
}
.sk-ti-p:hover .sk-port .sq-av{ transform:scale(1.07) rotate(-3deg); }
.sk-ti.is-miss .sk-port .sq-av{ filter:var(--sk-sil); opacity:var(--sk-sil-o); }
.sk-ti.sk-tre .sk-port .sq-av{ animation:skTre .5s cubic-bezier(.2,1.4,.4,1); }
@keyframes skTre{ 40%{ transform:scale(1.25) rotate(6deg); } }
.sk-kom{
  position:absolute; left:0; right:0; top:44px; font:italic 900 13px var(--sk-gx);
  letter-spacing:.04em; text-transform:uppercase; color:var(--ink);
}
.sk-ct{
  position:absolute; right:6px; top:6px; height:18px; padding:0 8px;
  clip-path:polygon(4px 0,100% 0,calc(100% - 4px) 100%,0 100%);
  background:rgba(0,0,0,.45); color:#fff; font:italic 900 11px/18px var(--sk-gx);
}
.sk-ti.is-miss .sk-ct{ background:color-mix(in srgb,var(--ink) 12%,transparent); color:var(--ink2); }
.sk-ti.is-done .sk-ct{ background:var(--live); }
.sk-ti.is-max .sk-ct{ background:var(--sk-gfoil); color:var(--sk-gink); }
.sk-hus{ position:absolute; left:6px; top:6px; display:inline-flex; align-items:center; }
.sk-hus .sk-av{ width:20px; height:20px; font-size:7px; }
.sk-hus .sk-av + .sk-av{ margin-left:-6px; }
.sk-hus small{ margin-left:3px; font:800 10px Roboto,system-ui,sans-serif; color:#fff; text-shadow:0 1px 2px rgba(0,0,0,.6); }
.sk-ti.is-miss .sk-hus small{ color:var(--accent-ink); text-shadow:none; }
.sk-nm{
  display:block; padding:6px 6px 4px; background:var(--sk-band); color:#fff;
  font:italic 900 13.5px/1.2 var(--sk-gx); text-transform:uppercase; letter-spacing:.01em;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis; text-shadow:0 1px 0 rgba(0,0,0,.4);
}
.sk-ti.is-miss .sk-nm{ background:var(--sk-tom-band); color:var(--ink2); text-shadow:none; }
.sk-ti.sk-val .sk-nm{ background:var(--accent) !important; color:#fff !important; }
.sk-ti.sk-val{ transform:translateY(-3px); }
.sk-ti.is-flash{ animation:skFlash .9s ease-out; }
@keyframes skFlash{ 30%{ transform:translateY(-6px) scale(1.04); } }
/* Välj flera */
.sk-vk{
  position:absolute; left:6px; top:6px; width:22px; height:22px; border-radius:50%;
  display:grid; place-items:center; background:rgba(0,0,0,.35); color:transparent; font-size:13px;
  box-shadow:inset 0 0 0 2px rgba(255,255,255,.75);
}
.sk-ti.sk-mk .sk-vk{ background:var(--accent); color:#fff; box-shadow:none; animation:skStamp .3s cubic-bezier(.2,1.6,.4,1); }
.sk-ti.sk-mk{ transform:translateY(-3px); }
.sk-ti.sk-mk .sk-port::after{ content:""; position:absolute; inset:0; background:color-mix(in srgb,var(--accent) 22%,transparent); }
.sq-skap.sk-valj .sk-hus{ display:none; }
.sq-skap.sk-valj .sk-ti-p{ cursor:copy; }
@keyframes skStamp{ 0%{ opacity:0; transform:scale(1.9) rotate(-25deg); } 100%{ opacity:1; transform:none; } }

/* MINIBRICKORNA — samma knapp (button.sq-cell) som förut, ny form */
.sk-ti-c{ display:flex; justify-content:center; flex-wrap:wrap; gap:5px; padding:5px 4px 7px; background:var(--sk-band); }
.sk-ti.is-miss .sk-ti-c{ background:var(--sk-tom-band); }
.sk-m7 .sk-ti-c{ gap:4px; }
.sk-ti-c .sq-cell{
  --z:30px; position:relative; width:var(--z); height:var(--z); margin:0; padding:0;
  border:0 !important; border-radius:0; background:transparent !important; box-shadow:none;
  display:grid; place-items:center; touch-action:pan-y; -webkit-user-select:none; user-select:none;
  opacity:1;
}
.sk-m7 .sk-ti-c .sq-cell{ --z:24px; }
.sk-ti-c .sq-cell::before{
  content:""; position:absolute; inset:0; background:var(--inset);
  clip-path:polygon(0 0,calc(100% - 5px) 0,100% 5px,100% 100%,5px 100%,0 calc(100% - 5px));
  transition:background .25s;
}
.sk-ti.is-miss .sk-ti-c .sq-cell::before{ background:color-mix(in srgb,var(--ink) 8%,var(--inset)); }
.sk-ti-c .sq-cell .sq-art{ position:relative; z-index:1; width:92%; height:92%; overflow:visible; }
.sk-ti-c .sq-cell .sq-art img{ width:100%; height:100%; object-fit:contain; filter:var(--sk-sil); opacity:var(--sk-sil-o); transition:filter .45s,opacity .45s; }
.sk-ti-c .sq-cell .sq-vt, .sk-ti-c .sq-cell .sq-pct, .sk-ti-c .sq-cell .sq-soon{ display:none; }
.sk-ti-c button.sq-cell:hover{ transform:translateY(-1px); }
.sk-ti-c button.sq-cell:hover::before{ background:color-mix(in srgb,var(--accent) 22%,var(--inset)); }
.sk-ti-c button.sq-cell:hover .sq-art img{ filter:grayscale(1); opacity:.6; }
.sk-ti-c .sq-cell[data-state="owned"]::before{ background:var(--yta); }
.sk-ti-c .sq-cell[data-state="mastered"]::before{ background:var(--sk-gfoil); }
.sk-ti-c .sq-cell[data-state="owned"] .sq-art img,
.sk-ti-c .sq-cell[data-state="mastered"] .sq-art img{ filter:drop-shadow(0 2px 2px rgba(0,0,0,.4)); opacity:1; }
.sk-ti-c .sq-cell .sq-mark{
  z-index:2; top:auto; right:-3px; bottom:-3px; width:12px; height:12px; font-size:8px;
  border-radius:0; box-shadow:none;
  clip-path:polygon(3px 0,100% 0,100% calc(100% - 3px),calc(100% - 3px) 100%,0 100%,0 3px);
}
.sk-ti-c .sq-cell[data-state="mastered"] .sq-mark{
  top:-6px; bottom:auto; right:auto; left:50%; transform:translateX(-50%);
  width:14px; height:10px; background:transparent; color:#f5c542; clip-path:none;
  filter:drop-shadow(0 1px 1px rgba(0,0,0,.6));
}
.sk-ti-c .sq-cell[data-state="mastered"] .sq-mark::before{ width:14px; height:10px; }
/* Säsongslagrets röda X (pulse-skattjakt.css) hör till Loggbokens brickor — i skåpet är saknad en silhuett. */
html .sq-skap .sk-ti-c .sq-cell[data-state="none"]:not(.is-locked)::after{ display:none; }
/* Kommer: mörk, låst — går fortfarande att bocka (spelaren vet före källorna) */
.sk-ti-c .sq-cell.is-locked[data-state="none"] .sq-art img{ opacity:.18; }
html .sq-skap .sk-ti-c .sq-cell.is-locked[data-state="none"]::after{
  content:"\F47A"; font-family:bootstrap-icons; position:absolute; z-index:2; inset:0; width:auto; height:auto;
  display:grid; place-items:center; font-size:10px; color:var(--ink2); background:none; opacity:1;
}
.sk-ti-c .sq-cell.is-pop .sq-art img{ animation:skFram .5s cubic-bezier(.2,1.2,.4,1); }
@keyframes skFram{ 0%{ filter:brightness(0); transform:scale(.85); } 60%{ transform:scale(1.15); } }
.sk-ti-c .sq-cell.is-error::before{ background:color-mix(in srgb,var(--danger) 45%,var(--inset)); }
.sk-ti-c .sq-cell.is-saving .sq-art{ opacity:.8; }
.sk-ti-c .sq-cell.sk-drag::before{ background:var(--yta); }
.sk-ti-c .sq-cell.sk-drag .sq-art img{ filter:none; opacity:1; }
.sk-ti-c span.sq-cell{ cursor:default; }

.sk-maxk{ display:none !important; }
.sk-none{ margin:10px 0 0; padding:24px 12px; text-align:center; color:var(--dim); font-size:13px; }
.sk-ti.is-typ-ut{ display:none !important; }

/* ═══ PANELEN (dator) / ARKET (telefon) ═══════════════════════════════════ */
.sk-det{
  position:sticky; top:70px; background:var(--card); overflow:hidden;
  clip-path:polygon(0 0,calc(100% - 12px) 0,100% 12px,100% 100%,12px 100%,0 calc(100% - 12px));
}
.sk-det:empty{ display:none; }
.sk-d-h{
  position:relative; display:flex; gap:14px; align-items:center; padding:16px;
  background:var(--yta); color:#fff;
}
.sk-d-h.is-miss{ background:var(--inset); color:var(--ink); }
.sk-d-port{ width:112px; height:112px; flex:none; display:grid; place-items:center; }
.sk-d-port img{ width:100%; height:100%; object-fit:contain; filter:drop-shadow(0 4px 4px rgba(0,0,0,.35)); }
.sk-d-h.is-miss .sk-d-port img{ filter:var(--sk-sil); opacity:var(--sk-sil-o); }
.sk-d-t{ flex:1; min-width:0; }
.sk-d-meta{ display:flex; gap:6px; align-items:center; font:800 11px Roboto,system-ui,sans-serif; letter-spacing:.06em; text-transform:uppercase; opacity:.9; }
.sk-d-meta span + span::before{ content:"·"; margin-right:6px; }
.sk-d-t b{ display:block; margin:5px 0 4px; font:italic 900 32px/1 var(--sk-gx); text-transform:uppercase; text-shadow:0 2px 0 rgba(0,0,0,.25); }
.sk-d-h.is-miss .sk-d-t b{ text-shadow:none; }
.sk-d-t p{ margin:0; font-size:12.5px; line-height:1.45; opacity:.9; }
.sk-d-st{ display:inline-flex; align-items:center; gap:4px; margin-left:6px; padding:0 8px; height:18px; border-radius:99px; background:var(--live); color:#fff; font:800 10px/18px Roboto,system-ui,sans-serif; letter-spacing:.04em; text-transform:uppercase; vertical-align:2px; }
.sk-d-st.is-max{ background:var(--sk-gfoil); color:var(--sk-gink); }
.sk-d-pn{ position:absolute; right:10px; top:10px; display:flex; align-items:center; gap:4px; }
.sk-d-pn button{ width:30px; height:30px; border:0; border-radius:8px; background:rgba(0,0,0,.3); color:#fff; cursor:pointer; }
.sk-d-h.is-miss .sk-d-pn button{ background:var(--card); color:var(--ink); }
.sk-d-pn small{ min-width:40px; text-align:center; font:700 12px Roboto,system-ui,sans-serif; }
.sk-d-b{ padding:4px 16px 16px; }
.sk-dcs{ display:flex; gap:16px; flex-wrap:wrap; justify-content:center; padding:10px 0 4px; }
.sk-dcw{ display:flex; flex-direction:column; align-items:center; gap:4px; }
.sk-dc{
  --z:78px; position:relative; width:var(--z); height:var(--z); border:0; padding:0; background:transparent;
  display:grid; place-items:center; cursor:pointer;
}
.sk-dc::before{
  content:""; position:absolute; inset:0; background:var(--inset);
  clip-path:polygon(0 0,calc(100% - 9px) 0,100% 9px,100% 100%,9px 100%,0 calc(100% - 9px)); transition:background .25s;
}
.sk-dc img{ position:relative; z-index:1; width:88%; height:88%; object-fit:contain; filter:var(--sk-sil); opacity:var(--sk-sil-o); transition:filter .4s,opacity .4s; }
.sk-dc:hover::before{ background:color-mix(in srgb,var(--accent) 20%,var(--inset)); }
.sk-dc:hover img{ filter:grayscale(1); opacity:.6; }
.sk-dc[data-state="owned"]::before{ background:var(--yta); }
.sk-dc[data-state="mastered"]::before{ background:var(--sk-gfoil); }
.sk-dc[data-state="owned"] img, .sk-dc[data-state="mastered"] img{ filter:drop-shadow(0 3px 3px rgba(0,0,0,.4)); opacity:1; }
.sk-dc .sk-bd{
  position:absolute; z-index:2; right:-3px; bottom:-3px; width:20px; height:20px; display:grid; place-items:center;
  background:var(--accent); color:#fff; font-size:12px;
  clip-path:polygon(4px 0,100% 0,100% calc(100% - 4px),calc(100% - 4px) 100%,0 100%,0 4px);
}
.sk-dc .sk-lv{
  position:absolute; z-index:2; left:0; right:0; bottom:0; height:17px; display:flex; align-items:center; justify-content:center;
  background:var(--sk-gfoil); color:var(--sk-gink); font:italic 900 11px/1 var(--sk-gx); letter-spacing:.04em;
  clip-path:polygon(0 0,100% 0,100% 100%,9px 100%,0 calc(100% - 9px));
}
.sk-dc .sk-kr{ position:absolute; z-index:3; left:50%; top:-9px; width:22px; height:16px; margin-left:-11px; color:#f5c542; filter:drop-shadow(0 1px 1px rgba(0,0,0,.6)); }
.sk-dc .sk-las{ position:absolute; z-index:2; inset:0; display:grid; place-items:center; align-content:center; gap:2px; color:var(--ink2); font:italic 900 11px/1.1 var(--sk-gx); text-transform:uppercase; }
.sk-dc .sk-las i{ font-size:15px; }
.sk-dc .sk-hm{ position:absolute; z-index:3; left:-6px; top:-6px; }
.sk-dc.is-pop img{ animation:skFram .5s cubic-bezier(.2,1.2,.4,1); }
.sk-dc.is-pop .sk-lv{ animation:skLv .5s cubic-bezier(.2,.8,.3,1); }
@keyframes skLv{ from{ transform:translateX(-100%); } }
.sk-dcf{ font:800 10px/1 Roboto,system-ui,sans-serif; letter-spacing:.05em; text-transform:uppercase; color:var(--sk-f-base); }
.sk-dcf.sk-f-fortune{ color:var(--sk-f-fortune); } .sk-dcf.sk-f-cursed{ color:var(--sk-f-cursed); } .sk-dcf.sk-f-gold{ color:var(--sk-f-gold); }
.sk-dcp{ font-size:11px; color:var(--dim); }
.sk-d-var{ display:flex; gap:8px; margin-top:12px; font-size:12.5px; color:var(--ink2); }
.sk-d-var i{ color:var(--accent-ink); }
.sk-d-hus{ margin-top:10px; padding:10px; background:var(--inset); }
.sk-d-hus h5{ margin:0 0 6px; font:800 10px Roboto,system-ui,sans-serif; letter-spacing:.06em; text-transform:uppercase; color:var(--dim); }
.sk-d-hr{ display:flex; align-items:center; gap:8px; padding:4px 0; font-size:12.5px; }
.sk-d-hr b{ font-weight:700; }
.sk-d-hr small{ flex:1; min-width:0; color:var(--dim); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.sk-d-f{ display:flex; align-items:center; gap:8px; margin-top:12px; }
.sk-d-f small{ font-size:11px; color:var(--dim); }
.sk-d-f kbd{ font:700 10px Roboto,system-ui,sans-serif; background:var(--inset); border-radius:4px; padding:1px 5px; color:var(--ink2); }
.sk-d-tom{ padding:28px 16px; text-align:center; color:var(--dim); font-size:13px; }
.sk-det.sk-byt .sk-d-h, .sk-det.sk-byt .sk-d-b{ animation:skUpp .25s cubic-bezier(.2,.8,.3,1); }

.sk-ark-bg{ position:fixed; inset:0; z-index:1990; background:rgba(0,0,0,.4); animation:skFade .2s; }
.sk-ark{
  position:fixed; left:0; right:0; bottom:0; z-index:2000; max-height:84vh; overflow:auto;
  background:var(--card); box-shadow:0 -14px 40px rgba(0,0,0,.45);
  clip-path:polygon(0 0,calc(100% - 14px) 0,100% 14px,100% 100%,0 100%);
  animation:skArk .3s cubic-bezier(.2,.8,.3,1);
  padding-bottom:env(safe-area-inset-bottom);
}
@keyframes skArk{ from{ transform:translateY(100%); } }
.sk-ark .sk-grepp{ width:40px; height:5px; border-radius:99px; background:var(--inset); margin:8px auto 0; }
.sk-ark .sk-d-port{ width:88px; height:88px; }
.sk-ark .sk-d-t b{ font-size:24px; }
.sk-ark .sk-dc{ --z:70px; }

/* Välj flera — listen längst ner */
.sk-vbar{
  position:sticky; bottom:14px; z-index:8; display:flex; align-items:center; gap:6px; flex-wrap:wrap;
  margin-top:12px; padding:8px 10px; border-radius:12px; background:var(--card); box-shadow:var(--sk-sh);
  animation:skUpp .2s cubic-bezier(.2,.8,.3,1);
}
.sk-vbar .sk-vn{ font-size:13px; color:var(--ink2); margin-right:4px; } .sk-vbar .sk-vn b{ color:var(--ink); font-size:15px; }
.sk-vbar .sk-vl{ font-size:12px; color:var(--dim); }
.sk-vbar .sk-kn.sk-gd{ background:var(--sk-maxad); color:var(--sk-gink); }
@container skap (max-width:560px){
  .sk-vbar{ bottom:calc(66px + env(safe-area-inset-bottom)); display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:5px; padding:8px; }
  .sk-vbar .sk-vn{ grid-column:1/4; align-self:center; } .sk-vbar .sk-sp{ display:none; }
  .sk-vbar [data-sk-valj]{ grid-column:4/6; }
  .sk-vbar .sk-kn.sk-s{ justify-content:center; padding:0 4px; font-size:11.5px; }
  .sk-vbar .sk-vl, .sk-vbar .sk-ta-bort{ display:none; }
  .sk-vbar.sk-tom [data-sk-vb="saknas"]{ grid-column:1/6; }
}

@media (prefers-reduced-motion:reduce){
  .sk-ti, .sk-ti-c .sq-cell .sq-art img, .sk-dc img, .sk-dc .sk-lv, .sk-ark, .sk-vbar, .sk-vk, .sk-meny{ animation:none !important; transition:none !important; }
}

/* Dra-markering: ingen textmarkering eller egen dra-bild i skåpets celler. */
.sk-ti-c .sq-cell, .sk-ti-c .sq-cell img{ -webkit-user-select:none; user-select:none; -webkit-user-drag:none; }

/* KATALOGEN (utloggad: ingen hylla att fylla) — allt som finns visas i färg, utan räknare.
   Silhuetten betyder "du saknar den"; en gäst saknar ingenting, hen bläddrar. Kommande behåller sin silhuett. */
.sq-skap.sk-katalog .sk-ti:not(:has(.sk-kom)), .sq-skap.sk-katalog .sk-det{ --sk-sil:drop-shadow(0 2px 2px rgba(0,0,0,.3)); --sk-sil-o:1; }
.sq-skap.sk-katalog .sk-ti.is-miss:not(:has(.sk-kom)), .sq-skap.sk-katalog .sk-d-h.is-miss{ background:var(--yta); color:#fff; }
.sq-skap.sk-katalog .sk-ti.is-miss:not(:has(.sk-kom)) .sk-nm{ background:var(--sk-band); color:#fff; text-shadow:0 1px 0 rgba(0,0,0,.4); }
.sq-skap.sk-katalog .sk-ti.is-miss:not(:has(.sk-kom)) .sk-ti-c{ background:var(--sk-band); }
.sq-skap.sk-katalog .sk-ti.is-miss:not(:has(.sk-kom)) .sk-ti-c .sq-cell::before{ background:color-mix(in srgb,#fff 16%,transparent); }
.sq-skap.sk-katalog .sk-d-h.is-miss .sk-d-t b{ text-shadow:0 2px 0 rgba(0,0,0,.25); }
.sq-skap.sk-katalog .sk-d-h.is-miss .sk-d-pn button{ background:rgba(0,0,0,.3); color:#fff; }
.sq-skap.sk-katalog .sk-ct, .sq-skap.sk-katalog .sk-pb{ display:none; }
.sq-skap.sk-katalog .sk-tg{ display:none; }