/* Krona for maxad sprite (level 5). Egen mask sa ingen ny fontfil kravs. */
:root{--sq-crown:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='%23000' d='M2.6 12.4h10.8v1.7H2.6zM1.7 3.1l3.2 3.2L8 2.1l3.1 4.2 3.2-3.2-1.2 8.1H2.9z'/%3E%3C/svg%3E");}
/* ═══════════════════════════════════════════════════════════════════════════
forre_pulse — SPRITES 4.0 · TVÅ SÄSONGER, EN MATRIS (prefix: sq-)
Byggd 2026-08-20. Ersätter kort-CSS:en från 3.0 och matris-CSS:en från 2.0.
REGLER (.clinerules/02-ui-facit.md)
────────────────────────────────────────────────────────────────────────────
§0.5 INGA lodräta färgade linjer — inte som border-left, inte som
box-shadow:inset. Rarity bärs av en PRICK vid namnet och en TON över
hela raden när den är klar. Aldrig av en kant.
§2 Endast pulse-tokens. Rarityfärgerna återanvänder rank-tokens
(--dia/--champ/--gold-r/--danger) som redan har mörkt läge löst.
§3 Mörkt läge är inte valfritt.
§4 Radius --r / --r-sm / 50%. Skugga bara var(--shadow).
§7 Bredd via var(--shell-w).
GRÅSKALETESTET: varje tillstånd bär TVÅ signaler. Ägd = färgad konst + bock.
Maxad = guldram + pokal. Låst = dämpad + hänglås. Saknas helt = prick, inte
ruta. Färgen förstärker, den bär aldrig ensam.
★ UTBLÅSNINGSSKYDDET: .sq4 har max-width + overflow-x:clip, och varje
flex-rad som kan bli bredare än sitt innehåll har min-width:0. Utan det
växer ett flex-item till sitt innehåll (min-width:auto är default) och drar
layoutviewporten med sig — uppmätt 911 px på en 390 px-telefon 2026-08-20.
═══════════════════════════════════════════════════════════════════════════ */
.sq4{
--sq-gap:12px;
/* Rarity → befintliga rank-tokens. Noll ny hårdkodad hex i hela filen. */
--sq-mythic:var(--danger);
--sq-legendary:var(--gold-r);
--sq-epic:var(--champ);
--sq-rare:var(--dia);
--sq-okand:var(--dim);
display:flex; flex-direction:column; gap:var(--sq-gap);
min-width:0; max-width:100%; overflow-x:clip;
}
.sq4 .sr-only{
position:absolute; width:1px; height:1px; padding:0; margin:-1px;
overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0;
}
/* Rarityfärgen bor på raden som en variabel — cellerna ärver den. */
.sq-r-mythic{ --c:var(--sq-mythic); }
.sq-r-legendary{ --c:var(--sq-legendary); }
.sq-r-epic{ --c:var(--sq-epic); }
.sq-r-rare{ --c:var(--sq-rare); }
.sq-r-okand{ --c:var(--sq-okand); }
/* ───────────────────────────────────────────────────────────────────────────
SÄSONGSFLIKAR — RIKTIGA MAPPFLIKAR
───────────────────────────────────────────────────────────────────────────
★ OMBYGGT 2026-08-20 (Kenta: "aktiv tab ska sitta ihop med den som är aktiv
och den andra ska vara bakom aktiv tab ... ska se symmetriskt ut").
VAD SOM VAR FEL
1. `.sq4` är en flexkolumn med `gap:var(--sq-gap)` — alltså låg det TOLV
pixlar luft mellan flikraden och panelen. Fliken svävade ovanför sitt
eget innehåll i stället för att sitta på det.
2. `gap:4px` mellan flikarna gjorde dem till fristående piller. Två piller
bredvid varandra har ingen framsida och baksida.
3. Panelen hade `border-radius:0 var(--r) var(--r) var(--r)` — ett platt
hörn uppe till VÄNSTER. Det stämde bara så länge den FÖRSTA fliken var
vald. Väljer man arkivet (flik två) satt det platta hörnet kvar i
vänsterkanten medan fliken stod längre in: osymmetriskt, och en direkt
följd av att formen antog ett svar den inte kunde veta.
HUR DEN SITTER IHOP NU
· Flikraden äter kolumnens gap OCH en pixel till
(`margin-bottom:calc(-1px - var(--sq-gap))`), så panelens överkant
hamnar exakt under flikarnas underkant — inte bredvid, PÅ.
· Den aktiva flikens nedre kantlinje målas i `var(--card)`, alltså
panelens egen bakgrund. Linjen mellan flik och panel försvinner därmed
bara där fliken står, och de två formerna blir EN. Det är hela tricket;
ingen mask, ingen SVG, ingen pseudo-hack.
· Flikarna överlappar varandra med en pixel (`margin-left:-1px`) så
grannar delar EN kantlinje i stället för att rita två.
· Den aktiva ligger överst (z-index) och tre pixlar högre än de andra —
den andra hamnar därmed bokstavligen bakom den.
· Panelen är rundad NEDTILL och rak upptill. Överkanten är flikradens
linje, och den ser likadan ut oavsett vilken flik som är vald. Det är
symmetrin punkt 3 saknade.
ORDNINGEN MÅSTE VARA: aktiv flik (3) > inaktiv flik (1) > panel.
`.sq-tabs` får z-index:2 och blir en stapelkontext, så alla flikar målas
över panelen; inuti den avgör flikarnas egna z-index vem som ligger främst.
Ändrar man det här måste man kontrollera BÅDA flikarna, inte bara den man
råkar titta på. */
.sq-tabs{
/* LIKA BREDA FLIKAR — andra halvan av "ska se symetriskt ut".
Grid i stället för flex: `grid-auto-columns:minmax(max-content,1fr)` ger
varje flik samma bredd som den BREDASTE, i stället för sin egen
textbredd. ("OVERRIDE / SÄSONG 42" är 30 px smalare än "RUNNERS /
SÄSONG 41 · ARKIV" — två olika breda mappflikar ser slarvigt ut oavsett
hur väl de sitter ihop.)
`width:max-content` gör att raden inte sträcker sig över hela panelen
(då hade det blivit en segmentkontroll, inte flikar), och `max-width:100%`
+ `minmax(max-content, …)` gör att kolumnerna hellre SCROLLAR än pressas
ihop när säsongerna blir fler än vad bredden rymmer. Ingen flik kan
alltså krympa så att texten bryts. */
display:grid; grid-auto-flow:column; grid-auto-columns:minmax(max-content,1fr);
justify-content:start; align-items:stretch;
width:max-content; max-width:100%;
min-width:0; overflow-x:auto; scrollbar-width:none;
/* FYRA pixlar, inte tre: `overflow-x:auto` gör `overflow-y` till `auto`, så
allt som sticker upp klipps tyst (ingen scrollbar dyker upp som avslöjar
det). Den aktiva fliken går tre pixlar upp OCH tändstickan ovanpå ligger
på `inset:-1px`, alltså en pixel till. Uppmätt: med tre försvann exakt en
pixel av tändstickans överkant. */
padding:4px 0 0;
margin-bottom:calc(-1px - var(--sq-gap));
position:relative; z-index:2;
}
.sq-tabs::-webkit-scrollbar{ display:none; }
.sq-tab{
display:flex; flex-direction:column; align-items:flex-start; gap:1px;
flex:none; padding:8px 14px 9px; min-height:52px;
/* BAKGRUNDEN ÄR --bg, INTE --inset (rättat vid ljus/mörk-kontrollen
2026-08-20). --inset är ljusare än --card i mörkt läge, så en oval flik
i --inset lyste STARKARE än panelen och läste därmed som att den låg
framför — tvärtemot vad den skulle säga. --bg ligger under --card i båda
lägena och är alltså "längre bak" oavsett tema, precis som en omarkerad
mapp ska vara. */
border:1px solid var(--line); background:var(--bg);
border-radius:var(--r) var(--r) 0 0; cursor:pointer;
font-family:inherit; color:var(--dim); text-align:left;
position:relative; z-index:1; margin-left:-1px;
transition:background .12s ease-out, color .12s ease-out;
}
.sq-tab:first-child{ margin-left:0; }
.sq-tab:hover{ color:var(--ink2); background:var(--zebra); }
.sq-tab:focus-visible{ outline:2px solid var(--accent); outline-offset:-2px; z-index:4; }
.sq-tab.is-on{
background:var(--card); color:var(--ink);
border-bottom-color:var(--card);
z-index:3; margin-top:-3px; padding-top:11px;
}
/* Tändstickan: två pixlar längs flikens ÖVERKANT. Vågrät, alltså inget
lodrätt färgstreck (§0.5) — och samma ljuskant som tetrisblocken i railen
bär, vilket gör att sidans två ytor talar samma språk. */
.sq-tab.is-on::before{
content:''; position:absolute; inset:-1px -1px auto -1px; height:2px;
border-radius:var(--r) var(--r) 0 0; background:var(--accent);
}
.sq-tab.is-arkiv.is-on::before{ background:var(--champ); }
.sq-tab-n{ font-size:12.5px; font-weight:900; letter-spacing:.05em; text-transform:uppercase; }
.sq-tab-s{ font-size:9px; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:var(--dim); }
.sq-tab.is-on .sq-tab-s{ color:var(--dim); }
.sq-tab-c{ font-size:10.5px; font-weight:800; color:var(--dim); font-variant-numeric:tabular-nums; }
.sq-tab.is-on .sq-tab-c{ color:var(--accent-ink); }
/* Arkivfliken bär sprite-identitetens lila när den är vald — samma roll som
.chd-ic.ic-sprite i temat. Den räknas inte som en av de två accenterna. */
.sq-tab.is-arkiv.is-on .sq-tab-n{ color:var(--champ); }
.sq-tab.is-arkiv.is-on .sq-tab-c{ color:var(--champ); }
/* ───────────────────────────────────────────────────────────────────────────
MATRISEN
─────────────────────────────────────────────────────────────────────────── */
.sq-mx{
background:var(--card); border:1px solid var(--line);
/* Rak upptill (flikraden ÄR överkanten), rundad nedtill. Se flikblocket
ovan för varför det gamla `0 var(--r) var(--r) var(--r)` var fel. */
border-radius:0 0 var(--r) var(--r);
box-shadow:var(--shadow); overflow:hidden; min-width:0;
position:relative; z-index:1;
}
.sq-mx[hidden], .sq-mx.is-hidden{ display:none !important; }
.sq-top{
display:flex; align-items:center; gap:14px; flex-wrap:wrap;
padding:11px 13px; border-bottom:1px solid var(--line); min-width:0;
}
.sq-season{ display:flex; flex-direction:column; gap:1px; min-width:0; }
.sq-season strong{ font-size:14px; font-weight:900; letter-spacing:.05em; text-transform:uppercase; color:var(--ink); }
.sq-season small{ font-size:9px; font-weight:800; letter-spacing:.11em; text-transform:uppercase; color:var(--dim); }
.sq-sum{ display:flex; align-items:baseline; gap:6px; flex-wrap:wrap; min-width:0; }
.sq-sum > b{ font-size:22px; font-weight:900; line-height:1; color:var(--ink); font-variant-numeric:tabular-nums; }
.sq-sum > span:not(.sq-sum-x){ font-size:12px; font-weight:700; color:var(--dim); font-variant-numeric:tabular-nums; }
.sq-sum-x{ font-size:11px; font-weight:700; color:var(--dim); margin-left:4px; }
.sq-sum-x .mono{ font-weight:900; color:var(--ink2); }
.sq-sum-m .mono{ color:var(--gold); }
.sq-tools{ display:flex; align-items:center; gap:8px; margin-left:auto; min-width:0; flex-wrap:wrap; }
.sq-segs{ display:flex; gap:0; border:1px solid var(--line2); border-radius:999px; overflow:hidden; flex:none; }
.sq-seg{
height:32px; padding:0 12px; border:0; background:var(--card); color:var(--ink2);
cursor:pointer; font-family:inherit; font-size:11.5px; font-weight:700; white-space:nowrap;
transition:background .12s ease-out, color .12s ease-out;
}
.sq-seg + .sq-seg{ border-left:1px solid var(--line); } /* vågrät avdelare = temats språk */
.sq-seg:hover{ background:var(--inset); }
.sq-seg.is-on{ background:var(--accent-wash); color:var(--accent-ink); }
.sq-seg:focus-visible{ outline:2px solid var(--accent); outline-offset:-2px; }
.sq-find{
display:flex; align-items:center; gap:6px; height:32px; padding:0 10px;
border:1px solid var(--line2); border-radius:999px; background:var(--inset);
min-width:0; flex:0 1 150px;
}
.sq-find .bi{ font-size:12px; color:var(--dim); flex:none; }
.sq-find input{
flex:1; min-width:0; border:0; background:transparent; outline:none;
font-family:inherit; font-size:12.5px; font-weight:600; color:var(--ink);
}
.sq-find input::placeholder{ color:var(--faint); font-weight:500; }
.sq-find:focus-within{ border-color:var(--accent); }
/* ── Delningsbilden ─────────────────────────────────────────────────────
Formatvalet ligger FÖRE knappen: man bestämmer var man ska posta och sedan
sparar man, inte tvärtom. Spara-knappen är sidans enda fyllda primärknapp —
allt annat här är ramlöst, så ögat hittar den utan att den skriker. */
.sq-share{ display:flex; align-items:center; gap:7px; flex:none; }
.sq-fmt{ display:flex; border:1px solid var(--line2); border-radius:999px; overflow:hidden; flex:none; }
/* ── FORMATRADEN I DELNINGSRUTAN (2026-09-20) ───────────────────────────────
Samma väljare som verktygsradens, återanvänd rakt av (.sq-fmt/.sq-seg).
Den bor här också för att valet hör hemma där nedladdningen sker — inte
bara i en rad man redan scrollat förbi. */
.sq-dl-fmtrad{ display:flex; align-items:center; gap:10px; padding:12px 16px 0; }
/* Formatet i Dela-rutans nedladdningsknapp: en tyst kvalificerare, inte ett
andra rop. Samma vikt som knappen, lägre opacitet — läses EFTER verbet.
(Satt förut på sidans egen knapp; den säger numera "Ladda ner brädet" och
har inget format att kvalificera.) */
.sq-dl-b [data-sq-fmtnamn]{ opacity:.72; margin-left:2px; }
.sq-dl-fmtlbl{ font-size:11px; font-weight:700; letter-spacing:.08em; text-transform:uppercase;
color:var(--dim); flex:none; }
.sq-dl-fmtrad .sq-fmt{ margin-left:auto; }
.sq-fmt .sq-seg{ padding:0 10px; font-size:11px; }
.sq-save{
display:inline-flex; align-items:center; gap:6px; height:32px; padding:0 14px;
/* ★ §2.1: vit text på RÅ --accent ger 3,12:1. Ytan mörkas i ljust tema så
vitt går att läsa; i mörkt är --accent redan ljus mot mörk botten och bär
då mörk text i stället. Samma form som Topplistans och Spelas knappar. */
border:1px solid color-mix(in srgb, var(--accent) 80%, #000);
background:color-mix(in srgb, var(--accent) 80%, #000); color:#fff;
border-radius:999px; cursor:pointer;
font-family:inherit; font-size:11.5px; font-weight:800; white-space:nowrap;
transition:filter .12s ease-out;
}
html[data-theme="dark"] .sq-save{ border-color:var(--accent); background:var(--accent); color:#06121f; }
.sq-save:hover{ filter:brightness(1.08); }
.sq-save:focus-visible{ outline:2px solid var(--accent); outline-offset:2px; }
.sq-save .bi{ font-size:12px; }
.sq-save:disabled{ opacity:.6; cursor:progress; }
.sq-save.is-busy .bi{ animation:sq-spin .8s linear infinite; }
@keyframes sq-spin{ to{ transform:rotate(360deg); } }
/* Guide-raden: EN rad, aldrig två som säger nästan samma sak. */
/* ★ GENOMSKINLIG, INTE OPAK (Kenta 2026-08-29: "går det göra denna lite
genomskinligt med så man ser loggan i bakgrunden?").
`--accent-wash` är en FÄRDIGBLANDAD hex (#eaf4fe ljust, #12233a mörkt) —
alltså ogenomskinlig, och den la sig som en list rakt över vattenmärket.
Ersatt med samma blandning gjord mot `transparent` i stället för mot
bakgrunden: en film av accenten som allt under lyser igenom.
Tonen blir densamma: 9 % #2796f2 över vitt ≈ #eaf4fe, och över #16181d ≈
#12233a. Alltså ingen synlig färgändring — bara att loggan syns nu.
Ändrar du procenttalet: gå ALDRIG tillbaka till en färdigblandad token här,
då försvinner märket igen. */
.sq-guide{
display:flex; align-items:center; gap:10px; min-width:0;
padding:9px 13px;
background:color-mix(in srgb, var(--accent) 9%, transparent);
border-bottom:1px solid color-mix(in srgb, var(--accent) 22%, var(--line));
font-size:12.5px; font-weight:600; color:var(--ink2);
}
.sq-guide[hidden]{ display:none; }
.sq-guide-ic{
flex:none; width:26px; height:26px; display:flex; align-items:center; justify-content:center;
border-radius:50%; background:var(--card); color:var(--accent-ink); font-size:12px;
}
.sq-guide-t{ flex:1; min-width:0; }
.sq-guide-t b{ color:var(--ink); font-weight:800; }
.sq-guide-t .mono{ font-variant-numeric:tabular-nums; font-weight:800; color:var(--accent-ink); }
.sq-guide-go{
flex:none; height:26px; padding:0 11px; border:1px solid var(--accent);
background:var(--card); color:var(--accent-ink); border-radius:999px; cursor:pointer;
font-family:inherit; font-size:11px; font-weight:800;
}
.sq-guide-go:hover{ background:var(--accent); color:#fff; }
/* Pågående event: hela raden byter till grönt. Ingen extra rad, samma yta. */
.sq-guide.is-live{
background:color-mix(in srgb, var(--live) 10%, transparent);
border-bottom-color:color-mix(in srgb, var(--live) 30%, var(--line));
}
.sq-guide.is-live .sq-guide-ic{ color:var(--live); }
/* ★ §2.1 (2026-09-13): --live och --gold är YTfärger. Som 12,5-punktstext på
sin egen tvätt ger de 2,86:1 respektive 3,2:1 — nedräkningen är det ENDA
raden finns för, och den var den minst läsbara saken på den. Ikonen bredvid
behåller full färg: den är dekor och bär ingen information ensam.
I mörkt tema är botten mörk och tonen ljus, så där står färgen kvar. */
.sq-guide.is-live .sq-guide-t .mono{ color:color-mix(in srgb, var(--live) 76%, #000); }
html[data-theme="dark"] .sq-guide.is-live .sq-guide-t .mono{ color:var(--live); }
.sq-guide.is-soon{
background:color-mix(in srgb, var(--gold-r) 10%, transparent);
border-bottom-color:color-mix(in srgb, var(--gold-r) 28%, var(--line));
}
.sq-guide.is-soon .sq-guide-ic{ color:var(--gold); }
.sq-guide.is-soon .sq-guide-t .mono{ color:color-mix(in srgb, var(--gold) 84%, #000); }
html[data-theme="dark"] .sq-guide.is-soon .sq-guide-t .mono{ color:var(--gold); }
.sq-arkiv{
display:flex; align-items:center; gap:8px; margin:0; padding:9px 13px;
background:var(--champ-w); color:var(--champ);
border-bottom:1px solid color-mix(in srgb, var(--champ) 24%, var(--line));
font-size:12px; font-weight:700;
}
.sq-arkiv .bi{ font-size:12px; flex:none; }
.sq-arkiv strong{ font-weight:900; }
.sq-compare{ margin:0; padding:8px 13px; border-bottom:1px solid var(--line);
font-size:12.5px; font-weight:600; color:var(--ink2); }
.sq-compare strong{ color:var(--ink); }
/* ── Tabellen, trädet, beskrivningslistan och mobilens variantsegment är
BORTTAGNA 2026-09-04 (Kentas val: vy A "Raden").
── Vad som försvann och varför ──────────────────────────────────────────
· `.sq-t` + `/`: 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
spalt på 898 px. Raden ritar summan i stället.
· TRÄDET (transponeringen till kolumner) föll med tabellen.
· BESKRIVNINGSLISTAN "Vad de gör": fanns bara för att en 63 px spritekolumn
inte rymde en mening. Raden rymmer den, alltså är listan en andra sanning.
· MOBILENS `[data-sq-var]`-segment: byggde om trädet till tre brickor i
bredd. Raden bryter i två våningar i stället och behöver ingen egen vy.
Allt som ersätter dem bor i themes/forre_pulse/css/pulse-sprites-rad.css.
Brickan (`.sq-cell`), toppraden, väljaren, markeringsraden, delningsbilden
och vattenmärket ligger kvar HÄR — de var aldrig tabellens. */
/* ── Cellen ────────────────────────────────────────────────────────────── */
.sq-cell{
position:relative; display:grid; place-items:center;
width:52px; height:52px; margin:0 auto; padding:0;
border:1px solid var(--line); border-radius:var(--r-sm); background:var(--inset);
cursor:pointer; font:inherit;
transition:border-color .12s ease-out, background .12s ease-out, transform .12s ease-out;
-webkit-tap-highlight-color:transparent;
}
span.sq-cell{ cursor:default; }
/* z-index på cellen (inte på tabellraden): en kan inte staplas i alla
webbläsare, men en position:relative-cell kan. 3 > thead:s 2. */
button.sq-cell:hover, .sq-cell.is-pop{ z-index:3; }
button.sq-cell:hover{ border-color:var(--accent); transform:translateY(-1px); }
button.sq-cell:focus-visible{ outline:2px solid var(--accent); outline-offset:2px; }
.sq-art{ display:grid; place-items:center; width:44px; height:44px; overflow:hidden; }
.sq-art img{
max-width:100%; max-height:100%; object-fit:contain;
filter:grayscale(1) contrast(.92); opacity:.42;
transition:filter .14s ease-out, opacity .14s ease-out;
}
.sq-ph{
width:100%; height:100%; display:flex; align-items:center; justify-content:center;
border-radius:50%; background:var(--card); border:1px dashed var(--line2);
font-size:14px; font-weight:900; color:var(--dim);
}
/* ★ RÄTTAT 2026-08-20 (Kenta: "markar man på sprites sidan kommer saken under
panelen"). Bocken satt på top:-4px/right:-4px, alltså UTANFÖR cellen. Två
saker gick sönder av det:
1. thead har position:sticky med z-index:2. Den översta radens bock stack
upp i rubrikradens yta och hamnade BAKOM den — märket försvann.
2. .sq-mx har overflow:hidden (behövs för hörnradien), så ett märke som
sticker ut i kanten klipptes.
Lösningen är inte en z-index-kapplöpning mot sticky-rubriken utan att märket
helt enkelt ligger INNANFÖR cellen. Då finns inget att klippa och inget att
hamna bakom. Ringen i kortfärg gör att det ändå läser som ett påklistrat
märke och inte som en del av konsten. */
.sq-mark{
position:absolute; top:3px; right:3px; width:15px; height:15px;
display:none; align-items:center; justify-content:center;
border-radius:50%; font-size:8px; color:#fff; line-height:1;
box-shadow:0 0 0 2px var(--card);
}
.sq-mark::before{ font-family:'bootstrap-icons'; }
.sq-pct{
/* Innanför cellen, inte utanför: ett märke som hänger ut kolliderar med
raden under när tabellraderna är 53 px höga. */
position:absolute; bottom:1px; left:1px;
padding:0 3px; border-radius:var(--r-sm);
background:var(--card); border:1px solid var(--line);
font-size:7.5px; font-weight:800; color:var(--dim);
font-variant-numeric:tabular-nums; line-height:1.5;
}
/* ÄGD */
.sq-cell[data-state="owned"]{
background:var(--accent-wash); border-color:color-mix(in srgb, var(--accent) 45%, var(--line));
}
.sq-cell[data-state="owned"] .sq-art img{ filter:none; opacity:1; }
.sq-cell[data-state="owned"] .sq-mark{ display:flex; background:var(--accent); }
.sq-cell[data-state="owned"] .sq-mark::before{ content:'\f26e'; } /* check-lg */
/* MAXAD */
.sq-cell[data-state="mastered"]{
background:color-mix(in srgb, var(--gold-r) 16%, var(--card)); border-color:var(--gold-r);
}
.sq-cell[data-state="mastered"] .sq-art img{ filter:none; opacity:1; }
.sq-cell[data-state="mastered"] .sq-mark{ display:flex; background:var(--gold-r); }
/* KRONA, inte pokal (Kenta 2026-08-29: "maxa = den blir level 5 och far en krona
och blir guldig"). Bootstrap-icons i projektet har ingen bi-crown — pokalen
\f5cc var narmaste glyf. Kronan ritas darfor som en mask pa .sq-mark::before,
sa den arver markens fyllning och behover ingen ny fontfil. */
.sq-cell[data-state="mastered"] .sq-mark::before{
content:''; width:9px; height:9px; background:currentColor;
-webkit-mask:var(--sq-crown) center/contain no-repeat;
mask:var(--sq-crown) center/contain no-repeat;
}
/* ── ÄNNU INTE SLÄPPT ─────────────────────────────────────────────────────
Hette "LÅST" fram till 2026-09-04 och betedde sig så: halv opacitet, hänglås
och `cursor:not-allowed`. Låset är släppt — cellen GÅR att bocka av, för
spelaren vet före oss (se kommentaren vid $cell i vyn). Kvar är märkningen:
dämpad och streckad tills någon säger annat, och när du väl bockat av den
ser den ut som vilken ägd cell som helst. */
.sq-cell.is-locked{ opacity:.62; cursor:pointer; }
.sq-cell.is-locked[data-state="owned"],
.sq-cell.is-locked[data-state="mastered"]{ opacity:1; }
/* VARIANTEN FINNS INTE. En prick, inte en ruta — 2.0:s 42 % tomma rutor läste
som något man missat. Det här läser som "det finns inget här", vilket är sant. */
.sq-cell.is-na{
border-color:transparent; background:transparent; cursor:default;
}
.sq-cell.is-na::after{
content:''; width:5px; height:5px; border-radius:50%; background:var(--line2);
}
.sq-cell.is-saving{ border-color:var(--accent); }
.sq-cell.is-error{ border-color:var(--danger); background:color-mix(in srgb, var(--danger) 10%, var(--card)); }
/* Radslutet */
/* 16 px höger: knappen är sidans yttersta interaktiva yta och en knapp som
nuddar kortkanten läser som avklippt. Vänster 8 för att räknaren inte ska
klistra sig i sista cellen. */
.sq-cnt{ font-size:11.5px; font-weight:800; color:var(--dim); font-variant-numeric:tabular-nums; margin-right:7px; }
.sq-r.is-done .sq-cnt, .sq-r.is-max .sq-cnt{ color:var(--gold); }
.sq-act{
height:26px; padding:0 10px; border:1px solid var(--line2);
background:var(--card); color:var(--ink2); border-radius:var(--r-sm); cursor:pointer;
font-family:inherit; font-size:10.5px; font-weight:800; white-space:nowrap;
transition:border-color .12s ease-out, color .12s ease-out;
}
.sq-act:hover{ border-color:var(--accent); color:var(--accent-ink); }
.sq-act:focus-visible{ outline:2px solid var(--accent); outline-offset:2px; }
.sq-r.is-max .sq-act{ border-color:var(--gold-r); color:var(--gold); }
.sq-foot{
display:flex; align-items:center; gap:14px; flex-wrap:wrap;
padding:9px 13px; background:var(--inset);
font-size:11px; font-weight:700; color:var(--dim);
}
.sq-foot b{ color:var(--ink2); font-weight:900; }
.sq-foot-h{ margin-left:auto; color:var(--dim); font-weight:600; }
.sq-none{ margin:0; padding:24px 13px; text-align:center; font-size:13px; font-weight:600; color:var(--dim); }
.sq-none[hidden]{ display:none; }
.sq-linkbtn{
border:0; background:none; padding:0; cursor:pointer; font-family:inherit;
font-size:13px; font-weight:800; color:var(--accent-ink);
text-decoration:underline; text-underline-offset:2px;
}
.sq-empty{ display:flex; flex-direction:column; align-items:center; gap:7px; text-align:center; padding:34px 16px; }
.sq-empty .bi{ font-size:26px; color:var(--faint); opacity:.55; }
.sq-empty strong{ font-size:14.5px; font-weight:800; color:var(--ink); }
.sq-empty p{ margin:0; font-size:12.5px; color:var(--dim); }
/* Statusremsan — en enda live-region, med Ångra där fingret var. */
.sq-status{
position:fixed; left:50%; bottom:16px; transform:translateX(-50%) translateY(8px);
z-index:60; max-width:min(92vw, 460px);
display:flex; align-items:center; gap:9px;
padding:10px 14px; border-radius:999px;
background:var(--board-bg); color:var(--board-ink);
border:1px solid var(--board-line); box-shadow:0 8px 24px rgba(0,0,0,.22);
font-size:12.5px; font-weight:700;
opacity:0; pointer-events:none;
transition:opacity .18s ease-out, transform .18s ease-out;
}
.sq-status.is-on{ opacity:1; transform:translateX(-50%) translateY(0); pointer-events:auto; }
.sq-undo{
border:1px solid var(--board-line); background:transparent; color:var(--board-ink);
font-family:inherit; font-size:11.5px; font-weight:800; padding:3px 10px;
border-radius:999px; cursor:pointer; white-space:nowrap;
}
.sq-undo:hover{ background:var(--board-line); }
/* ───────────────────────────────────────────────────────────────────────────
RESPONSIVT — mobilen är inte ett efterhandsläge
─────────────────────────────────────────────────────────────────────────── */
@media (max-width:820px){
.sq4{ --sq-gap:9px; }
/* ★ Tre kolumner MÅSTE rymmas utan vågrät scroll — sidan ska gå att bocka av
med tummen mitt i en match. Sprite-kolumnen krymps (width:1% tvingar
tabellen att ge cellerna sin naturliga bredd och pressa ihop namnet),
förmågan och Maxa-knappen fälls bort. Arkivfliken har åtta kolumner och får
scrolla i sidled — den är inget man bockar av mellan matcher. */
/* ★ RÄTTAT: här stod width:1% på sprite-kolumnen för att pressa in tre
celler. Det pressade ihop den till min-content — och eftersom .sq-nn har
min-width:0 + ellipsis blev sprite-NAMNET noll pixlar brett. Raden visade
en avatar, en prick och sedan tomrum.
Nu får kolumnen sin naturliga bredd (förmågan är ändå dold här) och namnet
ett golv, så det alltid syns. */
.sq-nn{ min-width:56px; }
.sq-av{ width:32px; height:32px; }
.sq-nn{ font-size:12px; }
.sq-cell{ width:46px; height:46px; }
.sq-art{ width:38px; height:38px; }
.sq-top{ padding:10px 9px; gap:9px; }
.sq-tools{ margin-left:0; width:100%; }
.sq-find{ flex:1 1 auto; }
.sq-seg{ height:36px; padding:0 13px; } /* ≥36 px i en grupp om tre = nåbart */
.sq-share{ width:100%; }
.sq-save{ flex:1; height:36px; justify-content:center; }
.sq-fmt .sq-seg{ height:36px; }
.sq-guide, .sq-arkiv, .sq-compare{ padding-inline:9px; }
.sq-tab{ padding:7px 11px 8px; min-height:48px; }
.sq-tab.is-on{ padding-top:10px; }
}
@media (max-width:400px){
.sq-cell{ width:42px; height:42px; }
.sq-art{ width:34px; height:34px; }
.sq-av{ width:28px; height:28px; }
.sq-nn{ font-size:11.5px; }
.sq-sum > b{ font-size:19px; }
.sq-pct{ display:none; } /* under 42 px blir märket större än siffran */
}
/* ───────────────────────────────────────────────────────────────────────────
RÖRELSE — bara där den betyder något, alltid avstängbar
─────────────────────────────────────────────────────────────────────────── */
@keyframes sq-pop{ 0%{ transform:scale(1); } 45%{ transform:scale(1.1); } 100%{ transform:scale(1); } }
.sq-cell.is-pop .sq-art{ animation:sq-pop .26s ease-out; }
@keyframes sq-flash{ 0%,100%{ background:transparent; } 40%{ background:var(--accent-wash); } }
.sq-r.is-flash > th, .sq-r.is-flash > td{ animation:sq-flash .9s ease-out; }
@media (prefers-reduced-motion:reduce){
.sq-cell, .sq-tab, .sq-seg, .sq-status, .sq-act, .sq-colbtn, .sq-save{ transition:none !important; }
.sq-save.is-busy .bi{ animation:none !important; }
.sq-cell.is-pop .sq-art, .sq-r.is-flash > th, .sq-r.is-flash > td{ animation:none !important; }
}
/* ── RAILENS LÅSRÄKNARE (2026-08-20) ──────────────────────────────────────
sprites-page.js döljer menyraden "Inte upplåsta" när talet når noll (se
hubSync) — server-side renderas den bara när något faktiskt ÄR låst, och
en rad som säger "Inte upplåsta 0" är en rad vars enda budskap är att den
inte har något att säga.
Varför en egen klass och inte attributet [hidden]: `.nlink` är
`display:flex` i forre_pulse.css, och en klassregel slår alltid
webbläsarens inbyggda [hidden]{display:none} — samma fälla som redan är
dokumenterad för pmodal i temat. Egen prefix (sq-) i stället för en global
regel eftersom det bara är den här sidan som gömmer raden live: en global
regel för ett sidspecifikt beteende är en regel någon annan råkar ärva.
Filen laddas bara på ?page=sprites, så inget annat kan träffas. */
.sq-dold{ display:none !important; }
/* ═══════════════════════════════════════════════════════════════════════════
VÄLJAREN + VARIANTVALET + MARKERINGSRADEN (prefix: sq-pk/sq-vp/sq-mb)
2026-08-29. Vy B, del 2. Facit: design-proposals/sprites-tradet-2026-08-28.html
(`pickerRow`, `variantPick`, `markbar`).
Kentas ord: *"måste det bli enklare att välja sprite jag hade på förra säsongen
en liten extra rad som kom upp ovanför spritsen där man lätt kunde välja vilken
sprite sen där under denna välja vilke sort av den spriten det var"*.
── VAR LIGGER VAD ────────────────────────────────────────────────────────
· JS ......... themes/forre_pulse/js/sprites-page.js, blocket
"VY B · VÄLJAREN, VARIANTVALET OCH MARKERINGSLÄGET".
ALL markup byggs där — det finns ingen PHP för det här.
· matrisen ... blocket "TRÄDET" ovan
· listan ..... blocket "BESKRIVNINGSLISTAN" ovan
── DATALAGRET (.clinerules/02c-datalagret.md) ──────────────────────
· 3 px på brickor och kontroller, 6 px (var(--r)) på ytorna.
· Hårstreck bär hierarkin — inga skuggor per bricka.
· Spärrning omvänt mot fontstorlek: 12 px → .6px, 9 px → .9px.
· Gråskala tills det ägs.
· §0.5: INGA lodräta färgade linjer. Vald bricka tonas HELT, aldrig kantas.
═══════════════════════════════════════════════════════════════════════════ */
.sq-valjare{ padding:0 13px 10px; }
.sq-valjare:empty{ display:none; }
/* Remsan (`.sq-pk*`) och variantvalet (`.sq-vp*`, `.sq-vo*`) är BORTTAGNA
2026-09-04. De fanns för att en spritekolumn i det transponerade trädet var
63 px bred — man MÅSTE välja spriten någon annanstans för att kunna läsa den.
Raden visar konst, namn, förmåga och varje variant på en gång, så remsan blev
en andra kopia av listan (och kostade 872 px sidoscroll). `.sq-valjare` bor
kvar som värdelement: JS fyller den numera med "Närmast klart"-raden, som har
sin CSS i pulse-sprites-rad.css. Markeringsraden nedan är orörd. */
/* ── markeringsraden ───────────────────────────────────────────────────────── */
.sq-markbar{
display:flex; align-items:center; gap:10px; flex-wrap:wrap;
padding:8px 13px; border-top:1px solid var(--line);
font:600 11px/1.3 var(--font-family); color:var(--dim);
}
.sq-markbar:empty{ display:none; }
.sq-markbar b{ color:var(--ink); font-weight:800; }
.sq-markbar.is-on{ background:color-mix(in srgb, var(--accent) 6%, transparent); }
.sq-mb-r{ margin-left:auto; display:flex; align-items:center; gap:10px; flex-wrap:wrap; }
.sq-mb-pill{
display:inline-flex; align-items:center; gap:5px;
padding:4px 9px; border:1px solid var(--line2); border-radius:3px;
background:var(--card); color:var(--ink2); cursor:pointer;
font:700 10px/1 var(--font-family); letter-spacing:.5px; text-transform:uppercase;
}
.sq-mb-pill:hover{ background:var(--zebra); }
.sq-mb-pill.is-on{ background:var(--accent); border-color:var(--accent); color:#fff; }
/* Medan läget är på: fingret målar, sidan scrollar inte i rutnätet. */
.sq-scroll.is-painting{ touch-action:none; cursor:crosshair; }
.sq-scroll.is-painting .sq-cell{ cursor:crosshair; }
.sq-cell.is-paint{ outline:2px solid var(--accent); outline-offset:-2px; }
@media (max-width:768px){
.sq-valjare{ padding:0 10px 8px; }
.sq-markbar{ padding:8px 10px; }
}
/* ═══════════════════════════════════════════════════════════════════════════
VATTENMÄRKET — F-RINGEN I BAKGRUNDEN (2026-08-29)
Facit: design-proposals/sprites-tradet-2026-08-28.html, `.hero::after`.
Referensen gör samma sak i sin adblock-ruta; här är det Kentas egen logga.
Kentas ord, ordagrant: *"vill ha min SVG logga i bakgrunden där den får
smälta in lite eller försvinna nedtill med temas mörka eller ljusa färg med
en gradient eller något för opacity ... VILL INTE HA NÅGON GRADIENT ANNARS"*.
── ★ DÄRFÖR `mask` OCH INTE EN BAKGRUNDSGRADIENT ─────────────────────────
Frestelsen är att lägga en gradient på ytan och loggan ovanpå. Då har man
gett panelen en gradient — precis det han sagt nej till. Här är det tvärtom:
ytan är HELT platt, och gradienten lever INNE I MÄRKET. `mask` klipper en
lodrät toning till F-ringens form, så det enda som tonar är loggan själv.
── BÅDA LÄGENA MED EN FIL ────────────────────────────────────────────────
Färgen är `color-mix(--ink …%, transparent)`. I ljust läge är `--ink` mörk →
ett svagt mörkt märke på vitt. I mörkt läge är `--ink` ljus → ett svagt ljust
märke på svart. Ingen `[data-theme]`-regel behövs, ingen andra fil.
── PLACERING ─────────────────────────────────────────────────────────────
Uppe till höger, delvis utanför kanten. `.sq-mx` har redan `overflow:hidden`
så märket klipps av panelen. Det tonar ut innan matrisen börjar, så det kan
aldrig konkurrera med brickorna om uppmärksamheten.
── FALLGROP ──────────────────────────────────────────────────────────────
`pointer-events:none` är inte valfritt. Märket ligger ÖVER toppradens yta i
staplingsordningen; utan den raden hade det ätit klick på filterknapparna.
═══════════════════════════════════════════════════════════════════════════ */
.sq-mx{
--f-shape:url("/public/images/icons/forre-f-ring-currentcolor.svg");
}
.sq-mx::before{
content:''; position:absolute; pointer-events:none; z-index:0;
right:-58px; top:-64px; width:360px; height:440px;
background:linear-gradient(to bottom,
color-mix(in srgb, var(--ink) 17%, transparent) 0%,
color-mix(in srgb, var(--ink) 12%, transparent) 42%,
transparent 88%);
-webkit-mask:var(--f-shape) top right/contain no-repeat;
mask:var(--f-shape) top right/contain no-repeat;
}
/* Innehållet måste ligga över märket. `.sq-top` har ingen egen botten — utan
det här hamnar texten UNDER masken i staplingsordningen. */
.sq-mx > *{ position:relative; z-index:1; }
@media (max-width:768px){
.sq-mx::before{ right:-40px; top:-46px; width:240px; height:300px; }
}
/* ═══════════════════════════════════════════════════════════════════════════
DELNINGSARKET (prefix: sq-dl)
2026-08-29. Kenta: *"vill ha en nedladdad fil och en delnings knapp men då
ska det kunna delas på facebook, instagram osv med inte bara de standard
även på forre.nu dvs kunna göra inlägg"*.
── VAR LIGGER VAD ────────────────────────────────────────────────────────
· JS ......... themes/forre_pulse/js/sprites-page.js, blocket
"LADDA NER · DELA". All markup byggs där.
· endpoints .. api/wall/upload + api/wall/post (samma som väggens composer)
── ORDNINGEN ÄR ETT PÅSTÅENDE ───────────────────────────────────────────
Överst ligger de vägar som faktiskt lämnar ifrån sig BILDEN (posta på
FORRE.NU, dela via enheten, kopiera, ladda ner). Länkdelningen ligger under
en avdelare, för Facebook/X/WhatsApp kan bara ta emot en URL. Blandar man
dem i samma rad lovar arket något det inte kan hålla.
── §0.5 ─────────────────────────────────────────────────────────────────
Inga lodräta färgade linjer. Huvudvalet bärs av en TONAD YTA, inte en kant.
═══════════════════════════════════════════════════════════════════════════ */
.sq-dl{
position:fixed; inset:0; z-index:9000; display:grid; place-items:center;
padding:16px; background:color-mix(in srgb, #000 52%, transparent);
animation:sq-dl-in .14s ease-out;
}
@keyframes sq-dl-in{ from{ opacity:0 } to{ opacity:1 } }
@media (prefers-reduced-motion:reduce){ .sq-dl{ animation:none } }
.sq-dl-card{
width:min(420px, 100%); max-height:calc(100dvh - 32px); overflow:auto;
background:var(--card); border:1px solid var(--line); border-radius:var(--r);
box-shadow:0 0 32px rgba(0,0,0,.35);
}
.sq-dl-h{
display:flex; align-items:center; gap:8px;
padding:13px 14px; border-bottom:1px solid var(--line);
font:800 13px/1 var(--font-family); letter-spacing:.4px; text-transform:uppercase;
color:var(--ink);
}
.sq-dl-h em{ font-style:normal; color:var(--accent); }
.sq-dl-x{
margin-left:auto; width:28px; height:28px; display:grid; place-items:center;
border:1px solid var(--line); border-radius:3px; background:var(--inset);
color:var(--ink2); cursor:pointer; font-size:12px;
}
.sq-dl-x:hover{ background:var(--zebra); color:var(--ink); }
.sq-dl-body{ padding:12px 14px 14px; display:flex; flex-direction:column; gap:7px; }
.sq-dl-b{
display:flex; align-items:center; gap:11px; width:100%; text-align:left;
padding:11px 12px; border:1px solid var(--line); border-radius:3px;
background:var(--inset); color:var(--ink); cursor:pointer; min-height:52px;
}
.sq-dl-b:hover{ background:var(--zebra); }
.sq-dl-b > i{ font-size:17px; color:var(--ink2); flex:0 0 22px; text-align:center; }
.sq-dl-b span{ display:flex; flex-direction:column; gap:2px; min-width:0; }
.sq-dl-b b{ font:700 13px/1.2 var(--font-family); }
.sq-dl-b em{ font:400 11px/1.2 var(--font-family); font-style:normal; color:var(--dim); }
/* Huvudvalet: hela ytan tonas (§0.5), aldrig en kant eller stapel. */
.sq-dl-b.is-hero{
background:color-mix(in srgb, var(--accent) 12%, var(--card));
border-color:color-mix(in srgb, var(--accent) 40%, var(--line));
}
.sq-dl-b.is-hero > i{ color:var(--accent); }
.sq-dl-b.is-busy{ opacity:.55; pointer-events:none; }
.sq-dl-sep{
display:flex; align-items:center; gap:9px; margin:4px 0 1px;
font:700 9px/1 var(--font-family); letter-spacing:1.2px; text-transform:uppercase;
color:var(--dim);
}
.sq-dl-sep::before, .sq-dl-sep::after{ content:''; flex:1; height:1px; background:var(--line); }
.sq-dl-soc{ display:grid; grid-auto-flow:column; grid-auto-columns:1fr; gap:6px; }
.sq-dl-s{
height:42px; display:grid; place-items:center;
border:1px solid var(--line); border-radius:3px; background:var(--inset);
color:var(--ink2); cursor:pointer; font-size:16px;
}
.sq-dl-s:hover{ background:var(--zebra); color:var(--accent); }
.sq-dl-note{
margin:2px 0 0; font:400 10.5px/1.45 var(--font-family); color:var(--dim);
}
.sq-dl-note b{ color:var(--ink2); font-weight:700; }
/* Delningsknappen bredvid nedladdningen — sekundär, samma höjd. */
.sq-save-sh{ background:var(--card); color:var(--ink2); border:1px solid var(--line2); }
.sq-save-sh:hover{ background:var(--zebra); color:var(--ink); }
@media (max-width:520px){
.sq-dl{ place-items:end center; padding:0; }
.sq-dl-card{ width:100%; max-height:88dvh; border-radius:var(--r) var(--r) 0 0; }
}