/* UTBRUTEN ur themes/forre_pulse/views/partials/pulse-season.php rad 608 (2026-09-24, prestandapasset).
   Låg förut som inline <style> och skickades om i HTML:en på VARJE sidvisning;
   som fil cachas den av webbläsaren. Redigera HÄR — <link> sitter kvar på samma
   plats i partialen, så kaskadordningen är oförändrad. */
/* Säsongsmodulen — Kentas kombo 2+1 (2026-07-17). Bara pulse-tokens → ljust+mörkt. */
.pseason{overflow:hidden}
/* Rubrikraden: säsongskod i lila (sprite-identitet), nedräkning i grått. */
.pseason .ps-h{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:10px 14px 0}
.pseason .ps-t{display:inline-flex;align-items:center;gap:6px;font-size:11px;font-weight:900;letter-spacing:.06em;text-transform:uppercase;color:var(--champ);white-space:nowrap}
.pseason .ps-t .bi{font-size:13px}
.pseason .ps-cd{display:inline-flex;align-items:center;gap:4px;font-size:10.5px;color:var(--dim);font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pseason .ps-cd .bi{font-size:11px}
.pseason .ps-hero{display:block;padding:8px 14px 12px;color:inherit;transition:background .12s ease-out}
.pseason .ps-hero:hover{background:var(--inset)}
.pseason .ps-hero:focus-visible{outline:2px solid var(--accent);outline-offset:-2px}
/* ── SUMMARADEN ─────────────────────────────────────────────────────────
   Talet är kortets tyngdpunkt — 26 px är enda storleken över 20 i railen.
   Procenten som låg här ÄR BORTTAGEN 2026-08-20: med katalogen delad i två
   säsonger bytte den innebörd utan att byta utseende, och brädet under svarar
   på samma fråga bättre. */
.pseason .ps-sum{display:flex;align-items:baseline;gap:6px}
.pseason .ps-big{font-weight:900;font-size:26px;letter-spacing:-.03em;line-height:1;color:var(--ink)}
.pseason .ps-of{font-size:13px;color:var(--dim);font-weight:700}
.pseason .ps-lines{margin-left:auto;font-size:9.5px;font-weight:800;letter-spacing:.07em;
  text-transform:uppercase;color:var(--dim);white-space:nowrap}
.pseason .ps-lines b{font-size:12.5px;font-weight:900;color:var(--dim)}
.pseason .ps-lines.has b{color:var(--gold)}

/* ── BRÄDET ─────────────────────────────────────────────────────────────
   Brunnen är MÖRK i båda lägena — samma signaturton som scoreboarden
   (--board-bg). Det är avsiktligt: en tetris-brunn är en skärm, och en vit
   brunn på ett vitt kort hade varit ett rutnät, inte ett spel.
   Kolumnantalet kommer från markupen (--kol) så brädet följer säsongen; blir
   det 14 sprites nästa gång ritas 14 kolumner utan en kodändring. */
.pseason .ps-tw{background:var(--board-bg);border-radius:var(--r-sm);padding:6px;margin-top:9px}
.pseason .ps-tw-lbl{display:flex;justify-content:space-between;gap:8px;padding:0 2px 4px;
  font-size:8.5px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:var(--board-sub)}
.pseason .ps-tw-grid{display:grid;grid-template-columns:repeat(var(--kol,12),1fr);gap:2px}
/* Tom cell = brunnens golv. Ägd cell = block i sprite:ns rarityfärg.
   Gråskaletestet klaras av FYLLNADEN: tom är nästan svart, ägd är mättad. */
.pseason .ps-blk{aspect-ratio:1;border-radius:2px;background:rgba(255,255,255,.05);
  border:1px solid rgba(255,255,255,.07);position:relative}
/* Varianten finns inte på den sprite:n — ingen glugg att jaga, alltså inget
   golv heller. Nästan osynlig i stället för att se ut som något du missat. */
.pseason .ps-blk-none{background:transparent;border-color:transparent}
.pseason .ps-blk.on{border-color:transparent}
.pseason .ps-blk.on.r-mythic{background:var(--danger)}
.pseason .ps-blk.on.r-legendary{background:var(--gold-r)}
.pseason .ps-blk.on.r-epic{background:var(--champ)}
.pseason .ps-blk.on.r-rare{background:var(--dia)}
.pseason .ps-blk.on.r-okand{background:var(--dim)}
/* Osläppt cell (2026-09-03): den FINNS i spelets filer men går inte att få.
   Streckad och dämpad — ett hål man inte kan fylla ska varken se ut som en tom
   ruta man missat eller som en variant som saknas helt (`ps-blk-none`). */
.pseason .ps-blk-soon{background:transparent;border-style:dashed;opacity:.5}
/* Ljuskanten uppe är det som gör ytan till ett BLOCK och inte en ruta — samma
   trick som originalspelets 8-bitarsblock. Två pixlar, inget mer. */
.pseason .ps-blk.on::after{content:'';position:absolute;inset:0 0 auto 0;height:2px;
  background:rgba(255,255,255,.45);border-radius:2px 2px 0 0}
/* Rensad rad: alla sprites har den familjen. Guldram runt varje block i raden —
   kortets enda fira-tillstånd, och det går inte att få av misstag. */
.pseason .ps-blk.cleared{box-shadow:0 0 0 1px var(--gold-r)}

/* ── LIVE-LÄGET (2026-08-20) ────────────────────────────────────────────
   Kenta: "när du uppdaterar sprites ska dem synas här direkt också! blir väll
   häftigt? :D" — och det är precis det de tre animationerna nedan är till för.
   Utan dem hade blocken bara BYTT FÄRG mellan två frames, vilket ögat läser
   som en omritning, inte som en händelse. Ett block som LANDAR läser man som
   sitt eget klick.

   Tre tillstånd, satta av sprites-page.js och borttagna av samma fil när
   animationen är slut (annars spelas de aldrig igen på samma block):
     .is-land   block tändes   → faller ner i brunnen och blixtrar till
     .is-lift   block släcktes → krymper undan
     .is-clear  raden blev hel → hela raden vitnar och lägger sig i guld

   Allt går på transform/opacity/box-shadow, alltså på kompositorn: brädet är
   36 block och kan repas 36 gånger under en massmarkering utan att layouten
   räknas om en enda gång. */
@keyframes ps-land{
  0%  {transform:translateY(-260%) scaleY(1.35);opacity:0}
  55% {transform:translateY(0) scaleY(.78);opacity:1}
  78% {transform:translateY(0) scaleY(1.1)}
  100%{transform:translateY(0) scaleY(1)}
}
@keyframes ps-flash{0%{opacity:1}100%{opacity:0}}
@keyframes ps-lift{
  0%  {transform:scale(1.35);opacity:.55}
  100%{transform:scale(1);opacity:1}
}
/* Radrensningen: vit blixt, sedan guld. Samma dramaturgi som originalspelet —
   raden bekräftas FÖRE den räknas. */
@keyframes ps-clear{
  0%  {box-shadow:0 0 0 1px var(--gold-r);filter:none}
  22% {box-shadow:0 0 0 2px #fff, 0 0 10px rgba(255,255,255,.75);filter:brightness(2.4)}
  60% {box-shadow:0 0 0 2px #fff, 0 0 10px rgba(255,255,255,.45);filter:brightness(1.5)}
  100%{box-shadow:0 0 0 1px var(--gold-r);filter:none}
}
@keyframes ps-pop{0%{transform:scale(1)}45%{transform:scale(1.38)}100%{transform:scale(1)}}

/* z-index bara UNDER animationen: ett fallande block ska passera framför sina
   grannar, men ett landat block får inte ligga över den guldram `cleared`
   ritar på blocket bredvid. */
.pseason .ps-blk.is-land{animation:ps-land .34s cubic-bezier(.24,.86,.32,1.28) both;z-index:2}
/* Blixten är ett eget lager ovanpå fyllningen — hade den legat på blocket
   självt fick vi välja mellan att animera färgen ELLER falla, inte båda. */
.pseason .ps-blk.is-land::before{content:'';position:absolute;inset:0;border-radius:2px;
  background:#fff;animation:ps-flash .34s ease-out both;pointer-events:none}
.pseason .ps-blk.is-lift{animation:ps-lift .2s ease-out both}
.pseason .ps-blk.is-clear{animation:ps-clear .5s ease-out both;z-index:3}
.pseason .ps-lines.is-pop b{display:inline-block;animation:ps-pop .42s cubic-bezier(.3,1.5,.5,1) both}

/* Rörelsekänslighet: talen och färgerna ska fortfarande uppdateras direkt —
   det är informationen. Bara resan dit tas bort. */
@media (prefers-reduced-motion: reduce){
  .pseason .ps-blk.is-land,.pseason .ps-blk.is-lift,
  .pseason .ps-blk.is-clear,.pseason .ps-lines.is-pop b{animation:none}
  .pseason .ps-blk.is-land::before{display:none}
}

.pseason .ps-tw-rows{display:flex;flex-direction:column;gap:3px;margin-top:9px}
.pseason .ps-tw-row{display:flex;align-items:baseline;gap:8px;font-size:10.5px}
.pseason .ps-tw-row .k{font-weight:700;color:var(--ink2);white-space:nowrap;
  overflow:hidden;text-overflow:ellipsis;min-width:0}
.pseason .ps-tw-row .v{margin-left:auto;flex:0 0 auto;font-weight:800;color:var(--dim)}
.pseason .ps-tw-row.full .k,.pseason .ps-tw-row.full .v{color:var(--gold)}

/* Växlingen mellan "N kvar" och "Öppna samlingen". Klass + klass (0,3,0) så
   den säkert slår display:flex på båda — inget !important behövs när
   specificiteten är rätt från början. (.ps-cta glider dessutom fram på hover
   via max-height; ps-hide tar bort hela elementet, inte bara höjden.) */
.pseason .ps-next.ps-hide,.pseason .ps-cta.ps-hide{display:none}
.pseason .ps-gast{margin:9px 0 0;font-size:11.5px;font-weight:600;color:var(--ink2)}
.pseason .ps-gast b{color:var(--ink);font-weight:800}
/* CTA glider fram först när kortet hovras (Kentas idé) — tyst rad, ingen färgplatta */
.pseason .ps-cta{display:flex;align-items:center;justify-content:center;gap:6px;font-weight:800;font-size:12px;color:var(--accent-ink);border-top:1px solid var(--line);max-height:0;padding:0;opacity:0;overflow:hidden;transition:max-height .18s ease-out,padding .18s ease-out,opacity .18s ease-out}
.pseason:hover .ps-cta,.pseason:focus-within .ps-cta{max-height:36px;padding:7px;opacity:1}
.pseason .ps-cta:hover{background:var(--inset)}
.pseason .ps-cta:focus-visible{outline:2px solid var(--accent);outline-offset:-2px}
.pseason .ps-cta .bi{font-size:10px}
@media (hover:none){.pseason .ps-cta{max-height:36px;padding:7px;opacity:1}}
/* ── VAKET LÄGE (2026-07-27) — rarity-spår + eventremsa ─────────────────
   Kortet får lila ram bara när det faktiskt har något att säga. Färg som
   betydelse: lila = sprite-identitet (--champ), och den räknas inte som en
   av de två tillåtna accenterna. */
.pseason.is-awake{border-color:color-mix(in srgb,var(--champ) 32%,var(--line))}
.pseason .ps-ev{display:flex;align-items:center;gap:8px;padding:8px 14px;
  background:color-mix(in srgb,var(--champ) 9%,transparent);
  border-bottom:1px solid color-mix(in srgb,var(--champ) 22%,var(--line));color:inherit}
.pseason .ps-ev:hover{background:color-mix(in srgb,var(--champ) 14%,transparent)}
.pseason .ps-evdot{width:7px;height:7px;border-radius:50%;background:var(--champ);flex:0 0 auto;animation:psEvPulse 1.9s infinite}
@keyframes psEvPulse{0%{box-shadow:0 0 0 0 color-mix(in srgb,var(--champ) 55%,transparent)}70%{box-shadow:0 0 0 7px transparent}100%{box-shadow:0 0 0 0 transparent}}
.pseason .ps-evt{font-size:12px;font-weight:800;color:var(--champ);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0;flex:1}
.pseason .ps-evl{font-size:10px;font-weight:800;letter-spacing:.07em;text-transform:uppercase;color:var(--dim);white-space:nowrap}
/* Rarity-spåren (2026-07-27) är BORTTAGNA ur markupen 2026-08-20 — brädet
   visar samma sak rumsligt. Uträkningen finns kvar i PHP eftersom $psRows och
   $psNear matar pulse-nav:s "För dig"-kort och $GLOBALS['PULSE_SEASON_*'];
   det är bara ritningen som försvann. */
/* Nästa steg — egen rad längst ner, inte en ruta inuti hero. Alltid synlig
   när den finns (till skillnad från .ps-cta som glider fram vid hover):
   en uppmaning som kräver att man hovrar först är ingen uppmaning. */
.pseason .ps-next{display:flex;align-items:center;gap:8px;padding:9px 12px;
  border-top:1px solid var(--line);background:var(--inset)}
.pseason .ps-next .bi{color:var(--champ);font-size:13px;flex:0 0 auto}
.pseason .ps-nt{flex:1;min-width:0;font-size:11.5px;color:var(--ink2);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pseason .ps-nt b{color:var(--ink);font-weight:700}
.pseason .ps-ngo{flex:0 0 auto;display:inline-flex;align-items:center;gap:4px;height:24px;padding:0 9px;
  border-radius:var(--r-sm);background:var(--champ);color:#fff;font-size:10.5px;font-weight:700;
  transition:filter .12s ease-out,transform .12s ease-out}
.pseason .ps-ngo:hover{filter:brightness(1.1)}
.pseason .ps-ngo:active{transform:scale(.96)}
.pseason .ps-ngo .bi{color:#fff;font-size:11px}
.pseason .ps-ngo:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
@media (prefers-reduced-motion:reduce){.pseason .ps-evdot{animation:none}}
@media (prefers-reduced-motion:reduce){.pseason .ps-hero,.pseason .ps-cta{transition:none}}

/* ── BRÄDET UTANFÖR LÄNKEN (2026-08-29) ────────────────────────────────────
   `.ps-hero` bar den vågräta indragningen. Nu när brädet står utanför den
   behöver det sin egen — samma 14 px, annars går rutnätet kant i kant och
   kortet ser trasigt ut. `:has()` tar bort herons underkant bara när wrappen
   faktiskt följer, så kort utan bräde ser ut precis som förut. */
.pseason .ps-tw-wrap{padding:0 14px 12px}
.pseason .ps-hero:has(+ .ps-tw-wrap){padding-bottom:0}

/* Blocket är nu en <button> på inloggade sidor. En knapp ärver varken font,
   färg eller kant — utan de här tre raderna hade rutnätet bytt utseende helt.
   Utseendet ska vara IDENTISKT med <span>-versionen; det enda som skiljer är
   att den går att trycka på. */
.pseason button.ps-blk{-webkit-appearance:none;appearance:none;padding:0;font:inherit;
  color:inherit;cursor:pointer;border-width:1px;border-style:solid}
.pseason button.ps-blk:hover{transform:scale(1.18);z-index:2}
.pseason button.ps-blk:focus-visible{outline:2px solid var(--accent);outline-offset:1px;z-index:3}
.pseason button.ps-blk:active{transform:scale(.9)}
.pseason .ps-blk.is-saving{opacity:.45}
.pseason .ps-blk.is-error{box-shadow:0 0 0 2px var(--danger)}
@media (prefers-reduced-motion:reduce){
  .pseason button.ps-blk:hover,.pseason button.ps-blk:active{transform:none}
}