/* ═══════════════════════════════════════════════════════════════════════════
   forre_pulse — SPRITES · LISTAN (?page=sprites)                     2026-11-12
   ═══════════════════════════════════════════════════════════════════════════
   Kentas val 1 "Listan" ur design-proposals/sprites-nedladdning-2026-11-12.html
   (runda 3: "1 listan var klart bäst").

   Ligger OVANPÅ pulse-sprites-skap.css och byter bara formen. Raderna, cellerna
   och alla krokar (data-sq-row, .sq-cell, data-sk-ti, .sk-ti-c …) är Skåpets, så
   sprites-page.js (sparning, Ångra, filter, nedladdning) och pulse-sprites-skap.js
   (dra, Välj flera, Gå igenom, menyerna) kör oförändrade.

   En rad = porträtt på raritetsytan · namn, rarity, typ och VAD DEN GÖR (alltid
   synligt, aldrig klippt) · en fast kolumn per finish · "I huset": vilka som har
   det du saknar + Fråga (fylls av pulse-sprites-skap.js synka()).

   Regler som styr formen: inga lodräta linjer (kolumnerna hålls av luft och ett
   tonat band, inte avdelare), ingen glow, varannan rad tonad.
   Detaljpanelen visas inte — allt den visade står på raden. Porträttet öppnar
   fortfarande arket med allt om spriten (smalLayout() blir sann när .sk-skap
   inte längre är ett tvåkolumnsrutnät).
   ═══════════════════════════════════════════════════════════════════════════ */

.sq4{ --ls-c:52px; --ls-g:6px; --ls-hu:210px; --ls-port:64px; --ls-band:rgba(184,134,11,.12); --ls-tint:rgba(16,24,40,.035); }
html[data-theme="dark"] .sq4{ --ls-band:rgba(232,184,74,.075); --ls-tint:rgba(255,255,255,.028); }

.sq-skap .sk-skap.sk-lista{ display:block; }
.sq-skap .sk-lista .sk-det{ display:none !important; }
.sq-skap .sk-lista .sk-vanster{ min-width:0; }

/* ── kolumnhuvudet ─────────────────────────────────────────────────────── */
.sk-lh{
  display:grid; grid-template-columns:minmax(0,1fr) auto var(--ls-hu); column-gap:14px; align-items:end;
  padding:0 12px 0 calc(12px + var(--ls-port) + 14px);
}
.sk-lh-l{ font:800 9.5px/1 var(--sk-gx); letter-spacing:.14em; text-transform:uppercase; color:var(--dim); padding-bottom:9px; }
.sk-lh-h{ font:800 9.5px/1 var(--sk-gx); letter-spacing:.14em; text-transform:uppercase; color:var(--dim); padding-bottom:9px; }
.sk-lh-c{ display:grid; grid-template-columns:repeat(var(--sk-cols,4),var(--ls-c)); column-gap:var(--ls-g); }
.sk-lh-f{
  display:flex; flex-direction:column; align-items:center; gap:3px; padding:6px 0 9px; margin:0;
  border:0; background:transparent; color:inherit; cursor:pointer; border-radius:6px 6px 0 0; font:inherit;
}
.sk-lh-f b{ font:800 9.5px/1 var(--sk-gx); letter-spacing:.11em; text-transform:uppercase; }
.sk-lh-f em{ font:700 11px/1 Roboto,system-ui,sans-serif; font-style:normal; color:var(--ink2); }
.sk-lh-f:not(:disabled):hover{ background:var(--accent-wash); }
.sk-lh-f:disabled{ cursor:default; }
.sk-lh-f:disabled em{ color:var(--dim); }
.sk-lh-f.is-band{ background:var(--ls-band); }
.sk-lh-f b.sk-f-normal{ color:var(--sk-f-base); } .sk-lh-f b.sk-f-gold{ color:var(--sk-f-gold); }
.sk-lh-f b.sk-f-fortune{ color:var(--sk-f-fortune); } .sk-lh-f b.sk-f-cursed{ color:var(--sk-f-cursed); }

/* ── raderna ───────────────────────────────────────────────────────────── */
.sq-skap .sk-lista .sk-rut{ display:block; }
.sq-skap .sk-lista .sk-ti{
  display:grid; grid-template-columns:var(--ls-port) minmax(0,1fr) auto var(--ls-hu); column-gap:14px; align-items:center;
  padding:0 12px; background:transparent; clip-path:none; border-radius:6px;
}
.sq-skap .sk-lista .sk-ti:nth-child(odd){ background:var(--ls-tint); }
.sq-skap .sk-lista .sk-ti:hover{ transform:none; background:color-mix(in srgb,var(--accent) 6%,transparent); }
.sq-skap .sk-lista .sk-ti.sk-val{ transform:none; }
.sq-skap .sk-lista .sk-ti[hidden]{ display:none !important; }

/* porträttet: raritetsytan, avskurna hörn */
.sk-lista .sk-ti-p{ width:var(--ls-port); margin:8px 0; }
.sk-lista .sk-port{
  height:var(--ls-port); background:var(--yta);
  clip-path:polygon(0 0,calc(100% - 9px) 0,100% 9px,100% 100%,9px 100%,0 calc(100% - 9px));
}
.sk-lista .sk-ti.is-miss .sk-port{ background:var(--inset); }
.sk-lista .sk-port .sq-av{ width:56px; height:56px; }
.sk-lista .sk-nm, .sk-lista .sk-hus{ display:none; }
.sk-lista .sk-kom{
  position:absolute; inset:auto 0 0; padding:2px 0; font:900 italic 9px/1 var(--sk-gx); text-transform:uppercase;
  letter-spacing:.04em; background:color-mix(in srgb,var(--ink) 12%,transparent); color:var(--ink2);
}
.sk-lista .sk-ct{ top:2px; right:2px; bottom:auto; left:auto; transform:none; font-size:9px; padding:1px 4px; }
.sq-skap.sk-valj .sk-lista .sk-ti-p{ cursor:copy; }
.sk-lista .sk-ti.sk-mk{ background:color-mix(in srgb,var(--accent) 14%,transparent) !important; }

/* namn · rarity · typ · förmågan */
.sk-lt{ min-width:0; padding:8px 0; }
.sk-lt-n{ display:flex; flex-wrap:wrap; align-items:baseline; gap:2px 8px; }
.sk-lt-n b{ font:900 italic 16px/1.05 var(--sk-gx); text-transform:uppercase; letter-spacing:.01em; color:var(--ink); }
.sk-lt-r, .sk-lt-t{ font:800 9px/1 Roboto,system-ui,sans-serif; letter-spacing:.13em; text-transform:uppercase; }
.sk-lt-t{ color:var(--dim); }
.sk-r-mythic .sk-lt-r{ color:color-mix(in srgb,#e8b84a 80%,var(--ink)); }
.sk-r-legendary .sk-lt-r{ color:color-mix(in srgb,#f0913a 82%,var(--ink)); }
.sk-r-epic .sk-lt-r{ color:color-mix(in srgb,#a879f0 85%,var(--ink)); }
.sk-r-rare .sk-lt-r{ color:color-mix(in srgb,#3d8fe0 85%,var(--ink)); }
.sk-lt-a{ margin:4px 0 0; font:500 12.5px/1.42 Roboto,system-ui,sans-serif; color:var(--ink2); }
.sk-ti[data-soon]:not([data-soon="0"]).is-miss .sk-lt-n b{ color:var(--ink2); }

/* finishkolumnerna — fasta, så att en lucka alltid står på samma plats */
.sq-skap .sk-lista .sk-ti-c{
  display:grid; grid-template-columns:repeat(var(--sk-cols,4),var(--ls-c)); column-gap:var(--ls-g);
  align-self:stretch; align-items:center; justify-items:center; padding:0; background-color:transparent !important; background-image:none !important;
}
.sq-skap .sk-lista .har-band .sk-ti-c{
  /* Bara longhand-egenskaper här: en shorthand med !important nollställde storlek och läge,
     och då täckte bandet alla kolumner (uppmätt på live 2026-11-12). */
  background-image:linear-gradient(var(--ls-band),var(--ls-band)) !important; background-repeat:no-repeat !important;
  background-size:var(--ls-c) 100% !important; background-position:calc(var(--sk-bi,0) * (var(--ls-c) + var(--ls-g))) 0 !important;
}
.sq-skap .sk-lista .sk-ti-c .sq-cell{ --z:var(--ls-c); }
.sk-lista .sk-ltom{ width:var(--ls-c); height:var(--ls-c); }
/* Kommer: konsten tonad i grått, låset i hörnet — inte en svart ruta (felet före 2026-11-12) */
.sq-skap .sk-lista .sk-ti-c .sq-cell.is-locked[data-state="none"]::before{ background:color-mix(in srgb,var(--ink) 5%,transparent); }
.sq-skap .sk-lista .sk-ti-c .sq-cell.is-locked[data-state="none"] .sq-art img{ filter:grayscale(1); opacity:.3; }
html .sq-skap .sk-lista .sk-ti-c .sq-cell.is-locked[data-state="none"]::after{
  inset:3px 4px auto auto; display:block; font-size:9px; color:var(--dim);
}

/* I huset */
.sk-lhu{ display:flex; align-items:center; gap:8px; min-width:0; padding:8px 0; font:500 11.5px/1.25 Roboto,system-ui,sans-serif; color:var(--dim); }
.sk-lhu .sk-faces{ display:inline-flex; flex:none; }
.sk-lhu .sk-av{ width:24px; height:24px; font-size:8.5px; box-shadow:0 0 0 2px var(--card); }
.sk-lhu .sk-av + .sk-av{ margin-left:-7px; }
.sk-lhu-t{ min-width:0; flex:1; }
.sk-lhu-t b{ display:block; color:var(--ink2); font-weight:700; }
.sk-lhu .sk-kn{ flex:none; height:26px; padding:0 10px; font-size:11.5px; border-radius:13px; }
.sq-skap.sk-valj .sk-lhu{ visibility:hidden; }

/* ── smal spalt (container skap): raden i två våningar ─────────────────── */
@container skap (max-width:760px){
  .sk-lh{ grid-template-columns:auto; padding-left:calc(12px + var(--ls-port) + 12px); }
  .sk-lh-l, .sk-lh-h{ display:none; }
  .sq-skap .sk-lista .sk-ti{ grid-template-columns:var(--ls-port) minmax(0,1fr); column-gap:12px; row-gap:0; align-items:start; padding-bottom:8px; }
  .sq-skap .sk-lista .sk-ti-p{ grid-row:1 / span 3; }
  .sq-skap .sk-lista .sk-ti-c{ grid-column:2; justify-content:start; }
  .sk-lhu{ grid-column:2; padding:6px 0 0; }
}
@container skap (max-width:480px){
  .sq-skap .sk-lista{ --ls-c:42px; --ls-g:5px; --ls-port:52px; }
  .sk-lista .sk-port .sq-av{ width:46px; height:46px; }
  .sk-lt-a{ font-size:12px; }
}

/* ── Du kan hjälpa (railen, när du har allt) ──────────────────────────── */
.sk-dk .sk-dk-t{ margin:0 0 8px; font:400 12.5px/1.45 Roboto,system-ui,sans-serif; color:var(--ink2); }
.sk-dk .sk-dk-h{ margin:12px 0 7px; font:800 10.5px/1 Roboto,system-ui,sans-serif; letter-spacing:.08em; text-transform:uppercase; color:var(--dim); }
.sk-dk .sk-dk-k{ display:flex; flex-wrap:wrap; gap:6px; margin-bottom:9px; }
.sk-dk .sk-dk-p{ width:40px; height:40px; display:grid; place-items:center; background:var(--inset);
  clip-path:polygon(0 0,calc(100% - 6px) 0,100% 6px,100% 100%,6px 100%,0 calc(100% - 6px)); }
.sk-dk .sk-dk-p img{ width:36px; height:36px; object-fit:contain; filter:grayscale(1); opacity:.55; }

/* ── Vem kan hjälpa, ritad av JS när du bockat ur något (2026-11-12) ──── */
.sk-hjdyn .sk-hjr{ display:grid; grid-template-columns:28px minmax(0,1fr) auto; gap:9px; align-items:center; padding:7px 0; }
.sk-hjdyn .sk-hjr + .sk-hjr{ box-shadow:0 -1px 0 var(--line); }
.sk-hjdyn .sk-av{ width:28px; height:28px; font-size:10px; }
.sk-hjdyn .sk-hjr-t b{ display:block; font:700 12.5px/1.2 Roboto,system-ui,sans-serif; color:var(--ink); }
.sk-hjdyn .sk-hjr-t small{ font-size:11px; color:var(--dim); }
.sk-hjdyn .sk-kn{ height:26px; padding:0 10px; font-size:11.5px; border-radius:13px; }

/* ── Katalogläget (utloggad/gäst): Skåpets regel målade hela raden i raritetsytan,
      och listans text blev blå på blått (uppmätt i iPhone-storlek 2026-11-12). I listan
      bär porträttet rariteten — raden är alltid neutral. ─────────────────────────── */
.sq-skap.sk-katalog .sk-lista .sk-ti.is-miss:not(:has(.sk-kom)){ background:transparent; color:inherit; }
.sq-skap.sk-katalog .sk-lista .sk-ti.is-miss:nth-child(odd){ background:var(--ls-tint); }
.sq-skap.sk-katalog .sk-lista .sk-ti.is-miss .sk-port{ background:var(--yta); }

/* ═══ SPELETS NUMMER I HÖRNET (2026-11-12, Kenta: "sätt nummer i hörnen på spritsen lite snyggt")
   Samma typ som spelet ("#23 CURSED KELPER"): kursiv kondenserad 900. Plattan har brickans
   skurna hörn. Mörkt läge: mörk platta på färgytan; ljust läge: vit platta — aldrig ett
   mörkt block på ljust. Sitter uppe till vänster: bocken bor nere till höger, kronan i mitten
   upptill och låset uppe till höger. ═══ */
.sk-lista .sq-cell .sq-nr{
  position:absolute; left:0; top:0; z-index:3; pointer-events:none;
  padding:1px 4px 1px 3px; font:italic 900 calc(var(--ls-c) * .2)/1 var(--sk-gx);
  color:#fff; background:rgba(8,12,20,.6);
  clip-path:polygon(0 0,100% 0,100% calc(100% - 4px),calc(100% - 4px) 100%,0 100%);
}
.sk-lista .sq-cell .sq-nr small{ font-size:.72em; opacity:.7; margin-right:1px; }
html[data-theme="light"] .sk-lista .sq-cell .sq-nr{ background:rgba(255,255,255,.92); color:#101828; }
.sk-lista .sq-cell.is-locked[data-state="none"] .sq-nr{ opacity:.75; }

/* ═══ MOBIL = förslag A (Kentas val 2026-11-12: "den som var närmast var A, ska inte behöva
   skifta sidor"). Raden i två våningar: porträtt + namn + vad den gör, och under den fyra
   STORA rutor som fyller bredden med finishens namn i rutan. Kolumnhuvudet behövs inte då. */
@container skap (max-width:560px){
  .sq-skap .sk-lista{ --ls-c:min(86px, calc((100cqw - 24px - 18px) / 4)); --ls-g:6px; --ls-port:56px; }
  .sk-lh{ display:none; }
  .sq-skap .sk-lista .sk-ti{ grid-template-columns:var(--ls-port) minmax(0,1fr); padding:8px 12px 10px; row-gap:6px; }
  .sq-skap .sk-lista .sk-ti-p{ grid-row:auto; margin:0; }
  .sk-lista .sk-port .sq-av{ width:50px; height:50px; }
  .sk-lt{ padding:0; }
  .sk-lt-n b{ font-size:17px; }
  .sk-lt-a{ font-size:12.5px; line-height:1.35; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
  .sq-skap .sk-lista .sk-ti-c{ grid-column:1 / -1; justify-content:stretch; grid-template-columns:repeat(var(--sk-cols,4),var(--ls-c)); }
  .sq-skap .sk-lista .har-band .sk-ti-c{ background-image:none !important; }
  .sq-skap .sk-lista .sk-ti-c .sq-cell .sq-vt{
    display:block; position:absolute; left:0; right:0; bottom:3px; z-index:3; text-align:center;
    font:800 8.5px/1 Roboto,system-ui,sans-serif; letter-spacing:.1em; text-transform:uppercase;
    color:#fff; text-shadow:0 1px 2px rgba(0,0,0,.6); pointer-events:none;
  }
  .sq-skap .sk-lista .sk-ti-c .sq-cell[data-state="none"] .sq-vt{ color:var(--dim); text-shadow:none; }
  .sq-skap .sk-lista .sk-ti-c .sq-cell[data-state="owned"] .sq-mark{ top:3px; right:3px; bottom:auto; width:16px; height:16px; font-size:10px; }
  .sk-lhu{ grid-column:1 / -1; padding:2px 0 0; }
}

/* Mobil A: listan först. Railens kort (Härnäst, Vem kan hjälpa) är egna rutnätsrader i
   skalet på mobil (aside är display:contents) — order:2 lägger dem EFTER listan. På datorn
   är railen en vanlig spalt och order gör ingenting. "Nästa / Kan hjälpa"-raden och
   hjälptexten säger samma sak som korten och tas bort på mobil (mätt 2026-11-12: listan
   började 567 px ner). */
/* pulse-sprites-nasta.css rad 235 lade Härnäst ÖVERST på telefon (beslut före listan). Kenta valde
   förslag A 2026-11-12: listan först — Härnäst och Vem kan hjälpa under den. */
@media (max-width:900px){ html .shell.c3 > .sq-hr > .sq-nx, html .shell.c3 > .sq-hr > .sq-hj{ order:2; } }
@media (max-width:560px){
  .sq4 .sk-rad2, .sq4 [data-sk-leg-t]{ display:none !important; }
  .sq4 .sk-leg{ justify-content:flex-end; }
}
/* Säsongsnamnet klipptes ("TREASURE …") — Gå igenom blir ikon + antal på mobil. */
@media (max-width:560px){
  .sq4 .sk-h1 .sk-kn.sk-p[data-sk-gg]{ font-size:0; gap:5px; padding:0 11px; }
  .sq4 .sk-h1 .sk-kn.sk-p[data-sk-gg]::before{ content:"\f4f4"; font:16px/1 'bootstrap-icons'; }
  .sq4 .sk-h1 .sk-kn.sk-p[data-sk-gg] [data-sk-gg-n]{ font-size:13px; }
  .sq4 .sk-h1 .sk-ssv{ font-size:20px; }
}