/* ═══════════════════════════════════════════════════════════════════════════
   forre_pulse — SPRITES · VY A "RADEN"                    (prefix: sq-)
   2026-09-04. Kentas val ur design-proposals/sprites-katalogen-2026-09-03.html.

   ── VARFÖR EN EGEN FIL ─────────────────────────────────────────────────────
   Samma mönster som pulse-shoutbox-yta.css: den nya ytan äger sin fil.
   pulse-sprites.css behåller det som aldrig var tabellens — brickan, toppraden,
   väljarremsan, markeringsraden, delningsbilden och vattenmärket. Här bor
   listan, chipsraden och mobilens tvåvåningsrad.

   ── VAD RADEN LÖSER ────────────────────────────────────────────────────────
   Matrisen ritade sprites × varianter. Den produkten växer varje säsong: 12×3
   blev 16×4 på två veckor, och tabellen ville till slut ha 1037 px (säsong 42)
   respektive 1540 px (arkivet) i en innehållsspalt på 898 px — alltså 139 och
   642 px utanför skärmkanten, MED vänsterrailen kvar.

   Raden ritar SUMMAN. Bredden bestäms av den bredaste sprite:n (Zero Point,
   åtta varianter), inte av hur många finishar som finns totalt. Epic kan lägga
   till fem familjer till utan att en enda bricka krymper — och utan att railen
   behöver vika.

   ── LODET ──────────────────────────────────────────────────────────────────
   `--sq-cols` sätts på panelen ur PHP (antalet variantfamiljer säsongen har).
   Cellblocket får den bredden FAST och packar sina brickor från vänster. Då
   ligger Base på samma x i varje rad, Gold på samma x, och blocket slutar där
   sprite:ns varianter tar slut — luft, inte en ruta man tror att man ska fylla.
   Det är skillnaden mot matrisen: samma lod, noll hål.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── CHIPSRADEN: bocka hel finish ─────────────────────────────────────────
   Ersätter tabellhuvudet. Samma funktion, noll breddkostnad — den ligger
   OVANFÖR listan i stället för att äta 52 px per variant ur varje rad. */
.sq-vhead{
  display:flex; flex-wrap:wrap; align-items:center; gap:4px;
  padding:8px 13px; border-bottom:1px solid var(--line);
}
.sq-vhead-h{
  font:800 9px/1 'Roboto',system-ui,sans-serif; letter-spacing:.1em;
  text-transform:uppercase; color:var(--dim); margin-right:3px;
}
.sq-th-v{
  display:inline-flex; align-items:center; gap:5px;
  height:24px; padding:0 8px; margin:0;
  border:1px solid var(--line); border-radius:var(--r-sm);
  background:transparent; color:var(--dim);
  font:800 9px/1 'Roboto',system-ui,sans-serif; letter-spacing:.07em;
  text-transform:uppercase; white-space:nowrap;
}
button.sq-th-v{ cursor:pointer; transition:border-color .12s, color .12s, background .12s; }
button.sq-th-v:hover{ border-color:var(--accent); color:var(--accent-ink); background:var(--accent-wash); }
button.sq-th-v:focus-visible{ outline:2px solid var(--accent); outline-offset:1px; }
.sq-th-v [data-sq-col-n]{
  font:700 9.5px/1 'Roboto',system-ui,sans-serif; letter-spacing:0;
  font-variant-numeric:tabular-nums; opacity:.85;
}
.sq-th-v.is-full{ border-color:var(--gold-r); color:var(--gold-r); }
.sq-th-v.is-full [data-sq-col-n]{ opacity:1; }
/* Familjen ligger i spelets filer men går inte att få. Streckad = "finns, men
   inte än" — samma språk som cellens egen Kommer-fot. Aldrig "0/0". */
.sq-th-v.is-soon{ border-style:dashed; color:var(--dim); }

/* ── LISTAN ───────────────────────────────────────────────────────────────
   `.sq-scroll` behåller sitt namn: sprites-page.js slår upp den för
   markeringslägets `is-painting`. Men den scrollar inte längre i sidled —
   det var hela felet. */
.sq-scroll.sq-list{
  overflow-x:hidden; min-width:0;
  display:grid; gap:4px; padding:8px 10px 10px;
}
.sq-list .sq-r{
  display:grid;
  grid-template-columns:38px minmax(0,1fr) auto auto;
  align-items:center; gap:10px;
  padding:6px 8px; border-radius:var(--r);
  background:var(--card); box-shadow:inset 0 0 0 1px var(--line);
  transition:background .12s ease-out, box-shadow .12s ease-out;
}
.sq-list .sq-r:hover{ background:var(--zebra); }
.sq-list .sq-r.is-done{ box-shadow:inset 0 0 0 1px color-mix(in srgb, var(--accent) 40%, var(--line)); }
.sq-list .sq-r.is-max{ box-shadow:inset 0 0 0 1px color-mix(in srgb, var(--gold-r) 50%, var(--line)); }
.sq-list .sq-r.is-flash{ background:var(--accent-wash); }

/* Konsten. Rund vore fel — en sprite är inte en människa (husregeln om runda
   avatarer gäller personer). */
.sq-list .sq-av{
  width:38px; height:38px; border-radius:var(--r-sm);
  object-fit:contain; background:var(--inset); padding:2px;
}
.sq-list .sq-av-ph{
  display:grid; place-items:center;
  font:800 15px/1 'Roboto',system-ui,sans-serif; color:var(--dim);
}

/* ── NAMN · FÖRMÅGA · PLATS ───────────────────────────────────────────────
   BINDANDE (Kenta 2026-08-28): beskrivningen ska ALLTID vara med, synlig och
   ALDRIG avklippt. Därför ingen line-clamp och ingen ellips här — raden växer
   i stället. Det var det som gjorde den gamla "Vad de gör"-listan under
   matrisen umbärlig: den fanns bara för att kolumnen var 63 px bred. */
.sq-idt{ min-width:0; }
.sq-list .sq-n{
  margin:0; display:flex; align-items:center; gap:6px; flex-wrap:wrap;
}
.sq-list .sq-dot{
  width:5px; height:5px; border-radius:50%; flex:none;
  background:var(--dim); position:static;
}
.sq-r-mythic    .sq-dot{ background:var(--danger); }
.sq-r-legendary .sq-dot{ background:var(--gold); }
.sq-r-epic      .sq-dot{ background:var(--champ); }
.sq-r-rare      .sq-dot{ background:var(--dia); }
.sq-list .sq-nn{ font:800 12.5px/1.25 'Roboto',system-ui,sans-serif; color:var(--ink); }
.sq-rar{
  font:800 8.5px/1 'Roboto',system-ui,sans-serif; letter-spacing:.09em;
  text-transform:uppercase; padding:3px 5px; border-radius:3px;
  color:var(--dim); background:var(--inset);
}
/* ★ YTFÄRG ≠ TEXTFÄRG (§2.1, läsbarhetspass 2026-09-13).
   Rangfärgerna är gjorda för YTOR — en prick, en ram, en bakgrund. Här bär de
   8,5-punktstext på sin egen tvättade botten, och då hamnar Rare på 2,80:1,
   Legendary på 3,81:1 och Mythic på 3,82:1. Ingen av dem är "stor text" (WCAG
   börjar räkna det vid 18,66 px fet), så kravet är 4,5:1.
   Ytan behåller alltså sin färg; TEXTEN mörknar tills den går att läsa — och i
   mörkt tema är det tvärtom botten som är mörk, så där står rangfärgen kvar. */
.sq-r-mythic    .sq-rar{ color:color-mix(in srgb, var(--danger) 72%, #000); background:color-mix(in srgb, var(--danger) 12%, transparent); }
.sq-r-legendary .sq-rar{ color:color-mix(in srgb, var(--gold) 82%, #000);   background:color-mix(in srgb, var(--gold) 14%, transparent); }
.sq-r-epic      .sq-rar{ color:color-mix(in srgb, var(--champ) 76%, #000);  background:var(--champ-w); }
.sq-r-rare      .sq-rar{ color:color-mix(in srgb, var(--dia) 72%, #000);    background:var(--dia-w); }
/* Mythic är den enda rangen vars mörka ton inte klarar sig rå: 4,27:1 mot sin
   egen tvätt, och kravet är 4,5. Åtta procent mot vitt räcker (4,74:1) —
   mindre än vad ögat ser som en annan färg. */
html[data-theme="dark"] .sq-r-mythic    .sq-rar{ color:color-mix(in srgb, var(--danger) 92%, #fff); }
html[data-theme="dark"] .sq-r-legendary .sq-rar{ color:var(--gold); }
html[data-theme="dark"] .sq-r-epic      .sq-rar{ color:var(--champ); }
html[data-theme="dark"] .sq-r-rare      .sq-rar{ color:var(--dia); }
.sq-list .sq-flag{
  font:700 9.5px/1 'Roboto',system-ui,sans-serif; color:var(--gold);
  padding:0; background:none; border:0;
}
.sq-unsure{ font-size:11px; color:var(--dim); }
.sq-list .sq-ab{
  margin:1px 0 0; font-size:11.5px; line-height:1.45; color:var(--ink2);
  overflow:visible; text-overflow:clip; white-space:normal; display:block; max-width:none;
}
.sq-ab-tom{ color:var(--dim); font-style:italic; }
.sq-hint{
  margin:1px 0 0; display:flex; align-items:center; gap:4px; flex-wrap:wrap;
  font-size:10px; color:var(--dim);
}
.sq-hint .bi{ font-size:10px; }
.sq-hint-soon{ color:var(--dim); font-weight:700; }

/* ── CELLBLOCKET ──────────────────────────────────────────────────────────
   Fast bredd ur `--sq-cols`, brickorna packade från vänster. Se LODET i
   filhuvudet: samma lod som matrisen gav, utan att kunna få hål. */
.sq-cells{
  display:flex; align-items:center; gap:3px; flex:none;
  width:calc(var(--sq-cols, 4) * 40px + (var(--sq-cols, 4) - 1) * 3px);
}
.sq-list .sq-cell{
  width:40px; height:40px; margin:0; flex:none;
  border-radius:var(--r-sm);
}
.sq-list .sq-art{ width:30px; height:30px; }
/* Variantetiketten ÄR det som gjorde kolumnrubriken umbärlig: utan kolumn över
   sig är den enda vägen att veta att den gula brickan är Gold och inte Gem. */
.sq-vt{
  position:absolute; left:0; right:0; top:1px;
  font:800 6.5px/1 'Roboto',system-ui,sans-serif; letter-spacing:.05em;
  text-transform:uppercase; text-align:center; color:var(--dim);
  pointer-events:none;
}
.sq-cell[data-state="owned"] .sq-vt,
.sq-cell[data-state="mastered"] .sq-vt{ color:var(--ink2); }
.sq-soon{
  position:absolute; left:0; right:0; bottom:0;
  font:800 6px/9px 'Roboto',system-ui,sans-serif; letter-spacing:.05em;
  text-transform:uppercase; text-align:center;
  color:var(--ink2); background:var(--line); pointer-events:none;
}
.sq-list .sq-cell.is-locked{ border-style:dashed; }
.sq-list .sq-pct{ display:none; }   /* 40 px rymmer etikett + konst + fot, inte fyra rader */

/* ── HÖGERKANTEN ──────────────────────────────────────────────────────────
   Symmetri och lod: sista elementets högerkant linjerar med listans synliga
   kant, exakt som avataren gör till vänster. */
.sq-list .sq-end{
  display:flex; align-items:center; gap:6px; flex:none;
  padding:0; text-align:right; white-space:nowrap;
}
.sq-list .sq-cnt{
  font:800 11px/1 'Roboto',system-ui,sans-serif; color:var(--dim);
  font-variant-numeric:tabular-nums; min-width:32px; text-align:right;
}
.sq-cnt-soon{ font-size:9px; font-weight:700; color:var(--dim); }
.sq-list .sq-act{
  width:26px; height:26px; flex:none; padding:0;
  display:grid; place-items:center;
  border:1px solid var(--line2); border-radius:var(--r-sm);
  background:transparent; color:var(--dim); cursor:pointer;
  font-size:0; line-height:0;
}
.sq-list .sq-act::before{
  content:''; width:12px; height:12px; background:currentColor;
  -webkit-mask:var(--sq-crown) center/contain no-repeat;
          mask:var(--sq-crown) center/contain no-repeat;
}
.sq-list .sq-act:hover{ border-color:var(--gold-r); color:var(--gold-r); }
.sq-list .sq-r.is-max .sq-act{ border-color:var(--gold-r); color:var(--gold-r); }

.sq-sum-s{ color:var(--dim); }

/* ── MOBIL: RADEN I TVÅ VÅNINGAR ──────────────────────────────────────────
   Räknestycket: 390 px skärm − 2×10 px listpadding − 2×8 px radpadding = 354 px.
   Konst 34 + gap 8 lämnar 312 px till namn och text — alltså läsbart, vilket
   det aldrig var i den transponerade matrisen (24 px per bricka).
   Brickorna flyttar till egen våning: 8 × 38 px ryms i två våningar, så Zero
   Points åtta varianter går att träffa med tummen. Uppmätt: 0 px spill. */
@media (max-width:700px){
  .sq-scroll.sq-list{ padding:7px 8px 9px; gap:5px; }
  .sq-list .sq-r{ grid-template-columns:34px minmax(0,1fr); row-gap:6px; padding:7px 8px; }
  .sq-list .sq-av{ width:34px; height:34px; }
  .sq-cells{ grid-column:1 / -1; width:auto; flex-wrap:wrap; }
  .sq-list .sq-cell{ width:38px; height:38px; }
  .sq-list .sq-art{ width:29px; height:29px; }
  .sq-list .sq-end{ grid-column:1 / -1; justify-content:flex-end; margin-top:-2px; }
  .sq-list .sq-ab{ font-size:11px; }
  .sq-vhead{ padding:7px 9px; }
}
@media (max-width:420px){
  .sq-list .sq-cell{ width:36px; height:36px; }
  .sq-list .sq-art{ width:27px; height:27px; }
}

/* ── VARIANTVALET: "kommer" är inte "finns inte" ──────────────────────────
   Väljarens variantlista fick ett eget tillstånd 2026-09-04. Förr lånade en
   osläppt variant klassen för "finns inte på den här sprite:n" — två olika
   saker med samma utseende. Streckad ram = finns, men inte än. */
.sq-vopt.is-soon{ border-style:dashed; opacity:.62; }
.sq-vopt.is-soon .sq-vo-t span{ color:var(--dim); font-weight:700; }

/* ── NÄRMAST KLART ────────────────────────────────────────────────────────
   Ersätter väljarremsan. Max fyra chips, bara sprites med ≤3 celler kvar, och
   INGEN rad alls när det inte finns något att peka på — tystnad är signalen.
   Chipset hoppar till raden (`data-sq-jump`), samma mekanik som guiderytan. */
.sq-nara{
  display:flex; align-items:center; gap:5px; flex-wrap:wrap;
  padding:0 0 2px;
}
.sq-nara-h{
  font:800 9px/1 'Roboto',system-ui,sans-serif; letter-spacing:.1em;
  text-transform:uppercase; color:var(--accent-ink); margin-right:3px;
}
.sq-nara-b{
  display:inline-flex; align-items:center; gap:6px;
  height:28px; padding:0 9px 0 4px; cursor:pointer;
  border:1px solid color-mix(in srgb, var(--accent) 35%, var(--line));
  border-radius:var(--r-sm); background:var(--accent-wash); color:var(--ink);
  font:800 11px/1 'Roboto',system-ui,sans-serif;
}
.sq-nara-b:hover{ border-color:var(--accent); }
.sq-nara-b span{
  font:700 9.5px/1 'Roboto',system-ui,sans-serif; color:var(--accent-ink);
  font-variant-numeric:tabular-nums;
}
.sq-nara-art{
  width:20px; height:20px; border-radius:3px; object-fit:contain;
  background:var(--card); padding:1px; flex:none;
}
.sq-nara-art.sq-av-ph{ display:grid; place-items:center; font-size:10px; color:var(--dim); }

/* ═══════════════════════════════════════════════════════════════════════════
   MOBILENS RUTNÄTSLÄGE — EN VARIANT I TAGET, TRE BRICKOR I BREDD
   2026-09-04. Återbyggt på Kentas dom: förra säsongens mobilvy var "skitsmart"
   just för att man valde finish i en bar och SEDAN markerade sprites. Jag hade
   tagit bort den när raden kom; det var fel.

   ── RÄKNESTYCKET ──────────────────────────────────────────────────────────
   390 px − 2×8 px listpadding − 2×5 px gap = 354 px. Tre kolumner ≈ 112 px per
   bricka. En tumme behöver ~44 px. Sexton sprites på en rad hade gett 22 px.
   Alltså en variant i taget — då blir brickan fyra gånger så stor som kravet.

   ── DET ÄR BARA PRESENTATION ──────────────────────────────────────────────
   Samma rader, samma celler, samma data-attribut som listan. Panelen bär
   `data-sq-lage` och `data-sq-var`; inget ritas om i JS när man byter variant,
   så en pågående sparning kan aldrig tappas av ett lägesbyte.

   ── LÄSNING KONTRA MARKERING ──────────────────────────────────────────────
   Rutnätet är till för att MARKERA snabbt. Förmågan står inte här — den står i
   listan, ett tryck bort i samma bar. Förr låg den i en separat sektion längst
   ner på sidan; det här är närmare, inte längre bort.
   ═══════════════════════════════════════════════════════════════════════════ */
.sq-lagebar{ display:none; }
.sq-lagebar:empty{ display:none !important; }

@media (max-width:700px){
  .sq-lagebar{ display:block; padding:6px 8px 0; }
  .sq-lg-rad{ display:flex; align-items:center; gap:5px; padding-bottom:5px; }
  .sq-lg-seg{ display:inline-flex; border:1px solid var(--line2); border-radius:var(--r-sm); overflow:hidden; }
  .sq-lg-b{
    display:inline-flex; align-items:center; gap:5px;
    height:28px; padding:0 10px; border:0; background:transparent; cursor:pointer;
    color:var(--dim); font:800 11px/1 'Roboto',system-ui,sans-serif;
  }
  .sq-lg-b + .sq-lg-b{ border-left:1px solid var(--line2); }
  .sq-lg-b .bi{ font-size:12px; }
  .sq-lg-b.is-on{ background:var(--accent); color:#fff; }
  /* "Bara saknade" gör skärmen till en jaktlista i stället för ett register —
     du ser på en halv sekund om du har spriten eller inte. */
  .sq-lg-bara{
    margin-left:auto; height:28px; padding:0 10px; cursor:pointer;
    border:1px solid var(--line2); border-radius:var(--r-sm); background:transparent;
    color:var(--dim); font:800 11px/1 'Roboto',system-ui,sans-serif;
  }
  .sq-lg-bara.is-on{ background:var(--accent-wash); border-color:var(--accent); color:var(--accent-ink); }
  .sq-lg-alla{
    height:28px; padding:0 9px; cursor:pointer; display:inline-flex; align-items:center; gap:5px;
    border:1px solid var(--line2); border-radius:var(--r-sm); background:transparent;
    color:var(--dim); font:800 11px/1 'Roboto',system-ui,sans-serif;
  }
  .sq-lg-alla .bi{ font-size:13px; }
  .sq-lg-alla:hover{ border-color:var(--accent); color:var(--accent-ink); }

  /* ═══ RUTNÄTET ÄR EN REN MARKERINGSYTA ═══════════════════════════════════
     ★ MÄTNINGEN SOM AVGJORDE (2026-09-04, Kentas dom "nu är det långsamt,
     innan var det MYCKET snabbare"): första brickan låg 585 px ner på en
     390×820-skärm. Man scrollade nästan en hel skärmhöjd innan man kunde
     trycka på något — och att trycka är hela ärendet när man precis fått en
     sprite och vill lägga in den.

     Uppmätt ovanför listan: topbar 102 · flikar 62 · toppraden 220 ·
     guiden 45 · "Närmast klart" 71 · lägesbaren 80. Toppraden ensam
     (summa + filter + sök + 16:9/9:16 + Ladda ner + Dela) var 220 px.

     REGELN som följer: rutnätet är till för att MARKERA. Allt annat —
     filter, sök, delning, guiden, "Närmast klart", chipsraden, foten —
     bor i LISTLÄGET, ett tryck bort i samma bar. Ingen funktion är borta,
     den är flyttad dit den hör hemma.

     Efter: första brickan ~230 px ner. Ett svep i stället för fyra. */
  .sq-mx[data-sq-lage="rutnat"] .sq-vhead,
  .sq-mx[data-sq-lage="rutnat"] .sq-tools,
  .sq-mx[data-sq-lage="rutnat"] .sq-guide,
  .sq-mx[data-sq-lage="rutnat"] .sq-valjare,
  .sq-mx[data-sq-lage="rutnat"] .sq-compare,
  .sq-mx[data-sq-lage="rutnat"] .sq-arkiv,
  .sq-mx[data-sq-lage="rutnat"] .sq-foot{ display:none; }
  /* Toppraden blir EN rad med bara summan. Säsongsnamnet står redan i fliken
     två centimeter ovanför — att skriva OVERRIDE två gånger på 390 px är att
     betala 22 px för att säga samma sak igen. */
  .sq-mx[data-sq-lage="rutnat"] .sq-top{ padding:7px 9px; gap:8px; }
  .sq-mx[data-sq-lage="rutnat"] .sq-season{ display:none; }
  .sq-mx[data-sq-lage="rutnat"] .sq-sum{ margin:0; }

  /* ★ STICKY VARIANTBAR. Den enskilt största tidsvinsten efter beskärningen:
     byt finish var som helst i scrollen utan att åka upp igen. Arkivet är 25
     sprites = nio rader rutnät; utan detta betydde ett variantbyte en resa
     till toppen och tillbaka. */
  /* ★ STICKY VARIANTBAR — den enskilt största tidsvinsten efter beskärningen:
     byt finish var som helst i scrollen utan att åka upp igen. Arkivet är 25
     sprites = nio rutnätsrader; utan detta betydde ett variantbyte en resa till
     toppen och tillbaka.
     ★ FALLGROP: `position:sticky` kan bara fastna INOM sin förälders box. Först
     satt den på `.sq-vseg` inuti den 79 px höga `.sq-lagebar` — då scrollade
     baren bort efter 79 px och sticky-effekten var osynlig (uppmätt: elementet
     låg på -368 px). Hela lägesbaren är därför sticky, inte bara raden i den. */
  .sq-lagebar{
    position:sticky; top:0; z-index:6;
    background:var(--card); box-shadow:0 1px 0 var(--line);
  }
  /* ★ FALLGROP NUMMER TVÅ: `.sq-mx` bär `overflow:hidden` för att kortets radie
     ska klippa innehållet — och en förälder med overflow:hidden skapar en
     scrollport som sticky fastnar mot i stället för mot fönstret. Uppmätt:
     baren låg på -309 px efter 500 px scroll, alltså helt utan effekt.
     I rutnätsläget på mobil släpps klippningen. Inget sticker ut: listan har
     egen padding och varje bricka sin egen radie. */
  .sq-mx[data-sq-lage="rutnat"]{ overflow:visible; }
  .sq-vseg{ padding-bottom:6px; }
  .sq-lg-pensel{
    width:28px; height:28px; flex:none; padding:0; cursor:pointer;
    display:grid; place-items:center;
    border:1px solid var(--line2); border-radius:var(--r-sm); background:transparent;
    color:var(--dim); font-size:13px;
  }
  .sq-lg-pensel.is-on{ background:var(--accent); border-color:var(--accent); color:#fff; }
  /* Markeringsraden under rutnätet behöver inte upprepa penseln. */
  .sq-mx[data-sq-lage="rutnat"] .sq-mb-pill{ display:none; }

  /* Variantbaren. Chipsen är 34 px höga och bryter rad — aldrig en karusell,
     för det man inte ser väljer man inte. */
  .sq-vseg{ display:flex; flex-wrap:wrap; gap:5px; }
  .sq-vseg-b{
    flex:1 1 auto; min-width:62px; min-height:32px; padding:3px 8px; cursor:pointer;
    display:flex; flex-direction:column; align-items:center; justify-content:center; gap:1px;
    border:1px solid var(--line2); border-radius:var(--r-sm); background:transparent; color:var(--ink2);
  }
  .sq-vseg-b b{ font:800 10.5px/1.1 'Roboto',system-ui,sans-serif; letter-spacing:.04em; }
  .sq-vseg-b span{
    font:700 9.5px/1 'Roboto',system-ui,sans-serif; color:var(--dim);
    font-variant-numeric:tabular-nums;
  }
  .sq-vseg-b.is-on{ background:var(--accent); border-color:var(--accent); color:#fff; }
  .sq-vseg-b.is-on span{ color:rgba(255,255,255,.85); }
  .sq-vseg-b.is-soon{ border-style:dashed; }

  /* ── RUTNÄTET ─────────────────────────────────────────────────────────── */
  .sq-mx[data-sq-lage="rutnat"] .sq-scroll.sq-list{
    grid-template-columns:repeat(3, minmax(0,1fr)); gap:5px; padding:0 8px 10px;
  }
  .sq-mx[data-sq-lage="rutnat"] .sq-list .sq-r{
    grid-template-columns:minmax(0,1fr); row-gap:0; gap:0;
    padding:5px 4px 6px; text-align:center; align-content:start;
  }
  .sq-mx[data-sq-lage="rutnat"] .sq-list .sq-av,
  .sq-mx[data-sq-lage="rutnat"] .sq-list .sq-ab,
  .sq-mx[data-sq-lage="rutnat"] .sq-list .sq-hint,
  .sq-mx[data-sq-lage="rutnat"] .sq-list .sq-rar,
  .sq-mx[data-sq-lage="rutnat"] .sq-list .sq-flag,
  .sq-mx[data-sq-lage="rutnat"] .sq-list .sq-unsure,
  .sq-mx[data-sq-lage="rutnat"] .sq-list .sq-end,
  .sq-mx[data-sq-lage="rutnat"] .sq-list .sq-vt{ display:none; }
  /* Brickan först, namnet under — det är brickan man siktar på. */
  .sq-mx[data-sq-lage="rutnat"] .sq-list .sq-cells{
    order:1; width:100%; gap:0; justify-content:center;
  }
  .sq-mx[data-sq-lage="rutnat"] .sq-list .sq-idt{ order:2; }
  .sq-mx[data-sq-lage="rutnat"] .sq-list .sq-cell{
    width:100%; height:auto; aspect-ratio:1; border-radius:var(--r);
  }
  .sq-mx[data-sq-lage="rutnat"] .sq-list .sq-art{ width:74%; height:74%; }
  .sq-mx[data-sq-lage="rutnat"] .sq-list .sq-mark{ width:19px; height:19px; font-size:10px; top:4px; right:4px; }
  /* ★ OSAMLAD KONST MÅSTE SYNAS PÅ EN 112 PX BRICKA. Grundregeln (grayscale +
     låg opacitet) läser fint på 40 px men blir en TOM RUTA här — och en tom
     ruta ser ut som ett fel, inte som något att jaga. Samma signal, mer bläck. */
  .sq-mx[data-sq-lage="rutnat"] .sq-list .sq-cell[data-state="none"] .sq-art img{ opacity:.62; }
  .sq-mx[data-sq-lage="rutnat"] .sq-list .sq-n{ justify-content:center; gap:4px; margin-top:4px; }
  .sq-mx[data-sq-lage="rutnat"] .sq-list .sq-nn{
    font-size:10px; line-height:1.2; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
    max-width:100%;
  }
  .sq-mx[data-sq-lage="rutnat"] .sq-list .sq-soon{ font-size:7px; line-height:12px; }
}

/* Bara den valda variantens bricka, och bara de sprites som HAR den.
   En rad per variant — CSS kan inte läsa attributvärden, så listan skrivs ut.
   Ny finish nästa säsong = tre rader här, annars syns den inte i rutnätet. */
@media (max-width:700px){
  .sq-mx[data-sq-lage="rutnat"][data-sq-var="normal"] .sq-list .sq-cell:not([data-variant="normal"]){ display:none; }
  .sq-mx[data-sq-lage="rutnat"][data-sq-var="gold"] .sq-list .sq-cell:not([data-variant="gold"]){ display:none; }
  .sq-mx[data-sq-lage="rutnat"][data-sq-var="cheatmaster"] .sq-list .sq-cell:not([data-variant="cheatmaster"]){ display:none; }
  .sq-mx[data-sq-lage="rutnat"][data-sq-var="hacker"] .sq-list .sq-cell:not([data-variant="hacker"]){ display:none; }
  .sq-mx[data-sq-lage="rutnat"][data-sq-var="bountyhunter"] .sq-list .sq-cell:not([data-variant="bountyhunter"]){ display:none; }
  .sq-mx[data-sq-lage="rutnat"][data-sq-var="gummy"] .sq-list .sq-cell:not([data-variant="gummy"]){ display:none; }
  .sq-mx[data-sq-lage="rutnat"][data-sq-var="galaxy"] .sq-list .sq-cell:not([data-variant="galaxy"]){ display:none; }
  .sq-mx[data-sq-lage="rutnat"][data-sq-var="holofoil"] .sq-list .sq-cell:not([data-variant="holofoil"]){ display:none; }
  .sq-mx[data-sq-lage="rutnat"][data-sq-var="gem"] .sq-list .sq-cell:not([data-variant="gem"]){ display:none; }
  .sq-mx[data-sq-lage="rutnat"][data-sq-var="cube"] .sq-list .sq-cell:not([data-variant="cube"]){ display:none; }
  .sq-mx[data-sq-lage="rutnat"][data-sq-var="quack"] .sq-list .sq-cell:not([data-variant="quack"]){ display:none; }

  .sq-mx[data-sq-lage="rutnat"][data-sq-var="normal"] .sq-list .sq-r:not(:has(.sq-cell[data-variant="normal"])){ display:none; }
  .sq-mx[data-sq-lage="rutnat"][data-sq-var="gold"] .sq-list .sq-r:not(:has(.sq-cell[data-variant="gold"])){ display:none; }
  .sq-mx[data-sq-lage="rutnat"][data-sq-var="cheatmaster"] .sq-list .sq-r:not(:has(.sq-cell[data-variant="cheatmaster"])){ display:none; }
  .sq-mx[data-sq-lage="rutnat"][data-sq-var="hacker"] .sq-list .sq-r:not(:has(.sq-cell[data-variant="hacker"])){ display:none; }
  .sq-mx[data-sq-lage="rutnat"][data-sq-var="bountyhunter"] .sq-list .sq-r:not(:has(.sq-cell[data-variant="bountyhunter"])){ display:none; }
  .sq-mx[data-sq-lage="rutnat"][data-sq-var="gummy"] .sq-list .sq-r:not(:has(.sq-cell[data-variant="gummy"])){ display:none; }
  .sq-mx[data-sq-lage="rutnat"][data-sq-var="galaxy"] .sq-list .sq-r:not(:has(.sq-cell[data-variant="galaxy"])){ display:none; }
  .sq-mx[data-sq-lage="rutnat"][data-sq-var="holofoil"] .sq-list .sq-r:not(:has(.sq-cell[data-variant="holofoil"])){ display:none; }
  .sq-mx[data-sq-lage="rutnat"][data-sq-var="gem"] .sq-list .sq-r:not(:has(.sq-cell[data-variant="gem"])){ display:none; }
  .sq-mx[data-sq-lage="rutnat"][data-sq-var="cube"] .sq-list .sq-r:not(:has(.sq-cell[data-variant="cube"])){ display:none; }
  .sq-mx[data-sq-lage="rutnat"][data-sq-var="quack"] .sq-list .sq-r:not(:has(.sq-cell[data-variant="quack"])){ display:none; }

  /* "Bara saknade": göm det du redan har i den valda finishen. */
  .sq-mx[data-sq-lage="rutnat"][data-sq-bara="saknade"][data-sq-var="normal"] .sq-list .sq-r:has(.sq-cell[data-variant="normal"]:not([data-state="none"])){ display:none; }
  .sq-mx[data-sq-lage="rutnat"][data-sq-bara="saknade"][data-sq-var="gold"] .sq-list .sq-r:has(.sq-cell[data-variant="gold"]:not([data-state="none"])){ display:none; }
  .sq-mx[data-sq-lage="rutnat"][data-sq-bara="saknade"][data-sq-var="cheatmaster"] .sq-list .sq-r:has(.sq-cell[data-variant="cheatmaster"]:not([data-state="none"])){ display:none; }
  .sq-mx[data-sq-lage="rutnat"][data-sq-bara="saknade"][data-sq-var="hacker"] .sq-list .sq-r:has(.sq-cell[data-variant="hacker"]:not([data-state="none"])){ display:none; }
  .sq-mx[data-sq-lage="rutnat"][data-sq-bara="saknade"][data-sq-var="bountyhunter"] .sq-list .sq-r:has(.sq-cell[data-variant="bountyhunter"]:not([data-state="none"])){ display:none; }
  .sq-mx[data-sq-lage="rutnat"][data-sq-bara="saknade"][data-sq-var="gummy"] .sq-list .sq-r:has(.sq-cell[data-variant="gummy"]:not([data-state="none"])){ display:none; }
  .sq-mx[data-sq-lage="rutnat"][data-sq-bara="saknade"][data-sq-var="galaxy"] .sq-list .sq-r:has(.sq-cell[data-variant="galaxy"]:not([data-state="none"])){ display:none; }
  .sq-mx[data-sq-lage="rutnat"][data-sq-bara="saknade"][data-sq-var="holofoil"] .sq-list .sq-r:has(.sq-cell[data-variant="holofoil"]:not([data-state="none"])){ display:none; }
  .sq-mx[data-sq-lage="rutnat"][data-sq-bara="saknade"][data-sq-var="gem"] .sq-list .sq-r:has(.sq-cell[data-variant="gem"]:not([data-state="none"])){ display:none; }
  .sq-mx[data-sq-lage="rutnat"][data-sq-bara="saknade"][data-sq-var="cube"] .sq-list .sq-r:has(.sq-cell[data-variant="cube"]:not([data-state="none"])){ display:none; }
  .sq-mx[data-sq-lage="rutnat"][data-sq-bara="saknade"][data-sq-var="quack"] .sq-list .sq-r:has(.sq-cell[data-variant="quack"]:not([data-state="none"])){ display:none; }
}

/* ── FLIKARNA PÅ MOBIL ────────────────────────────────────────────────────
   62 px för två ord och ett tal. I rutnätsläget är varje pixel ovanför första
   brickan en pixel man måste svepa förbi innan man kan markera något. */
@media (max-width:700px){
  .sq-mx[data-sq-lage="rutnat"] .sq-tabs .sq-tab,
  .sq-tabs .sq-tab{ padding:6px 11px; }
  .sq-tabs .sq-tab-n{ font-size:10px; }
  .sq-tabs .sq-tab-s{ display:none; }
}