/* ============================================================
   forre_pulse — TOPP 3.0 "COMMAND DECK" (2026-07-14, Kentas beställning)
   EGEN FIL (aldrig append i forre_pulse.css — trunkeringsläxa 2026-07-12).
   Aktiveras av html.tdk (sätts av pulse-topdeck.js) → utan JS gäller
   gamla utseendet helt. Tre däck: STAB (över) → topbar → shoutbox.
   Källa: design-proposals/top-v4-command-deck-final.html (godkänd mockup).
   ============================================================ */

/* ---------- Gemensam innehållsbredd: 1200px (Kentas hårda krav) ----------
   2026-07-26: siffran flyttad till --shell-w i forre_pulse.css :root och är nu
   KANON för HELA sajten (även .shell, footer, coins, shop, faq, arcade...).
   Fram till nu gällde 1200 bara här på toppdäcket medan basen låg på 1240 →
   toppen och innehållet linjerade inte. Blocket är därför tekniskt redundant,
   men står kvar som .tdk-specifik försäkran. Ändra bredden i --shell-w, inte här. */
.tdk .top .in,
.tdk .sbar .in,
.tdk .sbox .in,
.tdk .pstaff .psb-in{max-width:var(--shell-w)}

/* ---------- DÄCK 1 · STAB — tunn champ-tonad rad ÖVER topbaren ---------- */
.tdk .pstaff{background:color-mix(in srgb,var(--champ) 7%,var(--card));border-bottom:1px solid color-mix(in srgb,var(--champ) 20%,var(--line))}
.tdk .pstaff .psb-in{min-height:32px;padding:3px 16px}
.tdk .pstaff .psb-sh{width:22px;height:22px;border-radius:6px;font-size:12px}
.tdk .pstaff .psb-lbl{font-size:10.5px;letter-spacing:.08em}

/* ---------- DÄCK 2 · Topbar: horisontella tabs + glidande puck ---------- */
/* SPACING = mockupens exakta: rad-gap 8 (var 14), tab-padding 8 (var 10), right-gap 6 (var 8).
   Uppmätt 2026-07-14: innehållet var 1242px och stack ut 58px utanför 1200-containern. */
.tdk .top .in{gap:8px}
.tdk .top .right{gap:6px}
.tdk .sbar .in{gap:10px}
.tdk .top .tabs{position:relative;gap:1px}
.tdk .top .tab{flex-direction:row;gap:5px;height:38px;min-width:0;padding:0 8px;align-self:center}
.tdk .top .tab .tab-lbl{font-size:10.5px;letter-spacing:.03em}
.tdk .top .tab i{font-size:15px}
.tdk .top .tab.on{background:transparent;color:var(--accent-ink)}
.tdk .top .tab.on::after{display:none} /* pucken ersätter per-tab-underline */
.tdk .top .tab:hover{background:var(--inset)}
.tdk .top .tab .tab-ct{top:1px;right:2px}
.tdk .top .tab-aim .tab-new{top:1px;right:0}
/* Glidande puck — EN delad accent-skena (injiceras av pulse-topdeck.js) */
.tdk .top .tdk-puck{position:absolute;bottom:4px;height:3px;border-radius:2px;background:var(--accent);transition:left .26s cubic-bezier(.34,1.56,.64,1),width .26s cubic-bezier(.34,1.56,.64,1),opacity .14s;pointer-events:none;opacity:0}
/* Tonade ikonfärger (~70 %) — text neutral, färg med betydelse */
.tdk .top .tab.t-hub i{color:color-mix(in srgb,var(--accent) 70%,var(--dim))}
.tdk .top .tab.t-lb i{color:color-mix(in srgb,var(--gold) 70%,var(--dim))}
.tdk .top .tab.t-tr i{color:color-mix(in srgb,var(--live) 70%,var(--dim))}
.tdk .top .tab.t-sq i{color:color-mix(in srgb,var(--champ) 70%,var(--dim))}
.tdk .top .tab.t-lfg i{color:color-mix(in srgb,var(--dia) 70%,var(--dim))}
.tdk .top .tab.t-str i{color:color-mix(in srgb,var(--live) 70%,var(--dim))}
.tdk .top .tab.t-fo i{color:color-mix(in srgb,var(--accent) 70%,var(--dim))}
.tdk .top .tab.t-shop i{color:color-mix(in srgb,var(--danger) 70%,var(--dim))}
.tdk .top .tab.on i{color:var(--accent-ink)}
/* Räknar-badges INLINE (Kentas "går ju över texten"): pillen sitter EFTER etiketten i
   flex-raden i stället för absolut i hörnet → krockar aldrig med texten. Ren, proffsig
   liten pill; tabular-siffror. position:static bryter absolut-positioneringen från basen
   (+ rad 34 ovan). Färg med betydelse: LFG = accent (söker), Streams = live-grön, Forum =
   grön PRATBUBBLA (se pulse-topbar.php). [hidden] respekteras → göms vid 0. */
.tdk .top .tab .tab-ct{
  position:static; align-self:center; margin:0;
  height:16px; min-width:16px; padding:0 5px;
  display:inline-flex; align-items:center; justify-content:center;
  font-size:9px; font-weight:800; line-height:1; letter-spacing:0;
  border:0; border-radius:20px;
  font-variant-numeric:tabular-nums;
}
.tdk .top .tab .tab-ct[hidden]{display:none}
.tdk .top .tab .tab-ct-chat{gap:2px}
.tdk .top .tab .tab-ct-live{background:var(--live)}
.tdk .top .tab-aim .tab-new{position:static;margin-left:4px;background:var(--champ);border-radius:20px;padding:1px 6px;font-size:8.5px;font-weight:900;letter-spacing:.04em;line-height:1.4;animation:none}
.tdk .top .tab-aim > i{animation:none}
/* F-INDER hover-flyout (mockupen "Spelare som matchar din DNA") */
/* 2026-08-22: radie 12 fanns inte bland tokens (--r är 6, --r-sm 4) och 300 px
   var en femte bredd i topbarens meny-familj. Båda kanoniserade. */
.tdk-finderfly{position:fixed;z-index:140;width:240px;max-width:92vw;background:var(--card);border:1px solid var(--line2);border-radius:var(--r);box-shadow:0 14px 40px rgba(0,0,0,.18);padding:6px;animation:tdkCkFade .14s ease}
.tdk-finderfly[hidden]{display:none}
.tff-h{padding:9px 10px 5px;font-size:10.5px;font-weight:900;letter-spacing:.06em;text-transform:uppercase;color:var(--champ)}
.tff-row{display:flex;align-items:center;gap:10px;padding:8px 10px;border-radius:8px;text-decoration:none;color:var(--ink)}
.tff-row:hover{background:var(--inset)}
.tff-av{width:34px;height:34px;border-radius:7px;background-color:var(--inset);background-size:cover;background-position:center;border:1px solid var(--line);flex:0 0 auto;display:grid;place-items:center;color:#fff;font-weight:900;font-size:14px}
.tff-av.tff-grad{background:linear-gradient(135deg,#2796f2,#8b3df0);border:0}
.tff-bd{min-width:0;flex:1}
.tff-l1{display:flex;align-items:center;gap:7px}
.tff-l1 b{font-size:13px;font-weight:700;color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tff-arch{display:block;font-size:11px;color:var(--dim);margin-top:1px;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
/* Mjukare kvadrat på högerklustrets knappar (Command Deck-skalet) */
.tdk .top .iconbtn{border-radius:10px}
.tdk .top .me--greet{border-radius:12px}
.tdk .top .me--greet .av{border-radius:9px}

/* ---------- KAFFE-MORFEN: flytande pill "👍 Bjud på kaffe" ---------- */
.tdk-coffee{position:relative;overflow:visible;background:color-mix(in srgb,var(--gold) 12%,var(--card)) !important;border-color:color-mix(in srgb,var(--gold) 32%,var(--line)) !important;color:color-mix(in srgb,var(--gold) 80%,var(--ink)) !important;text-decoration:none}
.tdk-coffee:hover{background:color-mix(in srgb,var(--gold) 18%,var(--card)) !important}
.tdk-coffee .tdk-cpill{position:absolute;right:calc(100% + 7px);top:50%;transform:translateY(-50%) translateX(10px) scale(.94);display:inline-flex;align-items:center;gap:5px;font-size:11px;font-weight:800;white-space:nowrap;height:30px;padding:0 11px;background:color-mix(in srgb,var(--gold) 15%,var(--card));border:1px solid color-mix(in srgb,var(--gold) 38%,var(--line));border-radius:20px;color:color-mix(in srgb,var(--gold) 85%,var(--ink));box-shadow:0 6px 20px rgba(0,0,0,.14);opacity:0;pointer-events:none;transition:opacity .16s,transform .24s cubic-bezier(.34,1.56,.64,1);z-index:80}
.tdk-coffee .tdk-cpill::after{content:'';position:absolute;left:100%;top:50%;transform:translateY(-50%);border:5px solid transparent;border-left-color:color-mix(in srgb,var(--gold) 38%,var(--line))}
.tdk-coffee:hover .tdk-cpill,.tdk-coffee:focus-visible .tdk-cpill{opacity:1;transform:translateY(-50%) translateX(0) scale(1)}
.tdk-coffee .tdk-steam{position:absolute;left:50%;top:3px;width:0;height:0;pointer-events:none;transform:translateX(-4px)}
.tdk-coffee .tdk-steam i{position:absolute;bottom:0;width:2px;height:6px;border-radius:2px;background:color-mix(in srgb,var(--gold) 50%,transparent);opacity:0;animation:tdkSteam 3s ease-in-out infinite}
.tdk-coffee .tdk-steam i:nth-child(2){left:4px;animation-delay:1s}
.tdk-coffee .tdk-steam i:nth-child(3){left:8px;animation-delay:2s}
@keyframes tdkSteam{0%{opacity:0;transform:translateY(2px) scaleY(.5)}30%{opacity:.6}100%{opacity:0;transform:translateY(-10px) scaleY(1.3)}}

/* ---------- DISCORD-KNAPPEN (2026-07-26) ----------
   Samma morf-mönster som kaffet men i Discords blurple (#5865f2). Egna tokens så
   knappen ser rätt ut i BÅDA teman utan att röra --gold-variablerna.
   Tre lägen: gäst (gå med) · inloggad utan koppling (puls-prick som lockar) ·
   kopplad (grön ram, ingen prick).                                             */
/* ALLTID Discords blurple — även när kontot är kopplat. Blurple är omedelbart
   igenkännbart; grön knapp läste ingen som "Discord". Kopplat läge visas i stället
   med en liten grön bock-prick. Explicita rgba-värden (inte color-mix mot --card)
   eftersom grönt-på-grönt blev oläsligt i ljust tema. */
.tdk-discord{--dsc:#5865f2;position:relative;overflow:visible;text-decoration:none;
  background:rgba(88,101,242,.14) !important;
  border-color:rgba(88,101,242,.42) !important;
  color:#4752c4 !important}
.tdk-discord:hover{background:rgba(88,101,242,.24) !important;
  border-color:rgba(88,101,242,.68) !important;color:#3c45a5 !important}
[data-theme="dark"] .tdk-discord{background:rgba(88,101,242,.20) !important;
  border-color:rgba(88,101,242,.50) !important;color:#b3bcff !important}
[data-theme="dark"] .tdk-discord:hover{background:rgba(88,101,242,.32) !important;
  color:#d5dbff !important}
.tdk-discord i{font-size:15px;transition:transform .22s cubic-bezier(.34,1.56,.64,1)}
.tdk-discord:hover i{transform:translateY(-1px) scale(1.10)}

/* ---------- RUNDA KNAPPAR + PILL OVANPÅ (2026-07-26, Kentas synpunkt) ----------
   1) Discord & kaffe blir cirklar i stället för rektanglar (`.tdk .top .iconbtn`
      sätter border-radius:var(--r) → rundad ruta; vi vill runt).
   2) Hover-pillen låg UNDER grannknapparna: senare syskon i DOM (kaffe/tema/coins)
      målas ovanpå eftersom inget z-index fanns på den hovrade knappen. Nu höjs
      både knappen och pillen vid hover, och högerklustret klipper inte längre. */
/* 999px i stället för 50%: en icke-kvadratisk knapp blir då en stadion-form,
   inte en ellips ("ägg"). Desktop-knapparna är 32×32 → perfekt cirkel ändå. */
.tdk .top .iconbtn.tdk-discord,
.tdk .top .iconbtn.tdk-coffee{border-radius:999px !important;aspect-ratio:1/1}
.tdk .top .tdk-coins{border-radius:999px !important}
/* MÄTT: `overflow:visible` på .right gav 12px scrollWidth-overflow @1440 (den gröna
   ✓-pricken och pilarna räknades in) — och behövdes inte: pillen var aldrig klippt,
   den låg bara UNDER grannknapparna. z-index nedan är hela fixen. */
.tdk .top .iconbtn.tdk-discord,
.tdk .top .iconbtn.tdk-coffee{position:relative;z-index:2}
/* z-index 999: grannarnas badge-element (notisräknare m.fl.) ligger i ROT-stacking-
   contexten med egna z-index och slog tidigare mina 210 → pillen hamnade UNDER
   klockan. `isolation:isolate` gör knappen till egen stacking-context så pillens
   1000 aldrig kan tappas igen. */
.tdk .top .iconbtn.tdk-discord:hover,
.tdk .top .iconbtn.tdk-discord:focus-visible,
.tdk .top .iconbtn.tdk-coffee:hover,
.tdk .top .iconbtn.tdk-coffee:focus-visible{z-index:999 !important;isolation:isolate}
.tdk .top .tdk-discord .tdk-dpill,
.tdk .top .tdk-coffee .tdk-cpill{z-index:1000 !important;border-radius:999px !important}

/* Hover-pillen — speglar kaffets geometri exakt så de står i linje */
.tdk-discord .tdk-dpill{position:absolute;right:calc(100% + 7px);top:50%;
  transform:translateY(-50%) translateX(10px) scale(.94);display:inline-flex;
  align-items:center;gap:5px;font-size:11px;font-weight:800;white-space:nowrap;
  height:30px;padding:0 11px;background:rgba(88,101,242,.16);
  border:1px solid rgba(88,101,242,.45);border-radius:20px;
  color:#4752c4;box-shadow:0 6px 20px rgba(0,0,0,.14);
  opacity:0;pointer-events:none;transition:opacity .16s,transform .24s cubic-bezier(.34,1.56,.64,1);z-index:80}
[data-theme="dark"] .tdk-discord .tdk-dpill{color:#b3bcff}
.tdk-discord .tdk-dpill::after{content:'';position:absolute;left:100%;top:50%;
  transform:translateY(-50%);border:5px solid transparent;
  border-left-color:rgba(88,101,242,.45)}
.tdk-discord:hover .tdk-dpill,.tdk-discord:focus-visible .tdk-dpill{opacity:1;transform:translateY(-50%) translateX(0) scale(1)}

/* Puls-prick = "du har något kvar att göra" (inloggad men ej kopplad). */
.tdk-discord .tdk-dsc-dot{position:absolute;top:-2px;right:-2px;width:9px;height:9px;
  border-radius:50%;background:#5865f2;border:2px solid var(--card);
  animation:tdkDscPulse 2.4s ease-in-out infinite}
@keyframes tdkDscPulse{0%,100%{box-shadow:0 0 0 0 rgba(88,101,242,.55)}
  50%{box-shadow:0 0 0 5px rgba(88,101,242,0)}}

/* ---------- FORRE COINS i topbaren (2026-07-26) ----------
   Flyttad hit från shoutbox-raden. Pill-form med myntet, guldsiffra, tabulära tal
   så bredden inte hoppar när saldot ändras. Sitter direkt vänster om profilknappen. */
.tdk .top .tdk-coins{display:inline-flex;align-items:center;gap:6px;height:32px;
  padding:0 10px;margin-right:2px;border-radius:var(--r,10px);text-decoration:none;
  background:rgba(244,183,63,.12);border:1px solid rgba(244,183,63,.34);
  transition:background .14s,border-color .14s,transform .14s}
.tdk .top .tdk-coins:hover{background:rgba(244,183,63,.22);
  border-color:rgba(244,183,63,.55);transform:translateY(-1px)}
.tdk .top .tdk-coins img{display:block;width:16px;height:16px}
.tdk .top .tdk-coins b{font-size:12.5px;font-weight:800;line-height:1;
  color:#b47818;font-variant-numeric:tabular-nums}
[data-theme="dark"] .tdk .top .tdk-coins b{color:var(--gold,#f4b73f)}

/* ---------- Shoutbox-raden äger hela underdelen (2026-07-26) ----------
   Etikett/mynt/kaffe är borta ur markupen; dessa regler garanterar att tickern
   verkligen tar bredden även om en gammal cache-version av HTML:en dyker upp. */
.tdk .sbar .lbl2,
.tdk .sbar .sb-coin,
.tdk .sbar .sb-coffee{display:none !important}
.tdk .sbar .in{gap:10px}
/* MÄTT 2026-07-26: tickern hade flex:0 1 auto → 385px av 1200 (40%) och ett 590px
   tomrum mellan shouten och online/spelar-ön. !important behövs för att slå den
   tidigare flex-deklarationen; min-width:0 så långa shouts inte spränger raden. */
.tdk .sbar .in .tick{flex:1 1 auto !important;min-width:0 !important}

/* Kopplat: liten grön bock nere till höger — knappen förblir blurple. */
.tdk-discord.is-linked::after{content:'✓';position:absolute;bottom:-3px;right:-3px;
  width:12px;height:12px;border-radius:50%;background:#22c55e;color:#04220f;
  border:2px solid var(--card);font-size:8px;font-weight:900;line-height:9px;
  display:flex;align-items:center;justify-content:center}
.tdk-discord.is-linked .tdk-dpill{background:rgba(34,197,94,.16);
  border-color:rgba(34,197,94,.45);color:#15803d}
[data-theme="dark"] .tdk-discord.is-linked .tdk-dpill{color:#86efac}

/* ---------- RANK under namnet i konto-pillen (rank-färgregeln) ----------
   Äkta rankfärg bär ALDRIG text: den bor i underline. Texten = ink-variant. */
.tdk .me--greet .mg-sub.mg-rank{color:var(--tdk-rk-ink,var(--dim));font-weight:800;text-transform:uppercase;letter-spacing:.04em;font-size:9.5px}
.tdk .me--greet .mg-sub.mg-rank b{border-bottom:2px solid var(--tdk-rk,transparent);padding-bottom:1px;font-weight:800}
/* Tier-tokens: ljust läge = mörkad ink, mörkt läge = uppljusad */
.rk-bronze{--tdk-rk:#cd7f32;--tdk-rk-ink:#8a5420}
.rk-silver{--tdk-rk:#c9cdd6;--tdk-rk-ink:#5f6a76}
.rk-gold{--tdk-rk:#f5c518;--tdk-rk-ink:#8f6f06}
.rk-plat{--tdk-rk:#33c6dc;--tdk-rk-ink:#0a7a8c}
.rk-diamond{--tdk-rk:#2796f2;--tdk-rk-ink:#1268c9}
.rk-elite{--tdk-rk:#0f9c86;--tdk-rk-ink:#0b7a69}
.rk-champion{--tdk-rk:#f59e0b;--tdk-rk-ink:#9a6605}
.rk-unreal{--tdk-rk:#a855f7;--tdk-rk-ink:#7a1fd0}
[data-theme="dark"] .rk-bronze{--tdk-rk-ink:#e0a061}
[data-theme="dark"] .rk-silver{--tdk-rk-ink:#c3cad4}
[data-theme="dark"] .rk-gold{--tdk-rk-ink:#ecd05a}
[data-theme="dark"] .rk-plat{--tdk-rk-ink:#5cd6e8}
[data-theme="dark"] .rk-diamond{--tdk-rk-ink:#57adff}
[data-theme="dark"] .rk-elite{--tdk-rk-ink:#2fd0b3}
[data-theme="dark"] .rk-champion{--tdk-rk-ink:#f6b84a}
[data-theme="dark"] .rk-unreal{--tdk-rk-ink:#c58aff}

/* ---------- DÄCK 3 · Shoutbox: ETT shout i taget (vertikal cykler) ---------- */
.tdk .sbar .in{height:40px}
.tdk .sbar .tick{position:relative;height:40px;display:block;overflow:hidden}
.tdk .sbar .ticktrack{animation:none !important;display:block;position:absolute;left:0;right:0;top:0;padding-right:0;transition:transform .48s cubic-bezier(.4,0,.2,1),opacity .4s ease;white-space:nowrap}
.tdk .sbar .ticktrack .tk{display:flex;align-items:center;gap:8px;height:40px;overflow:hidden;min-width:0}
.tdk .sbar .ticktrack .tk .tm2{overflow:hidden;text-overflow:ellipsis;min-width:0}
@media (max-width:820px){
  /* Mobil behåller sitt lugna statiska läge (WCAG) — cyklern byter bara rad utan glid */
  .tdk .sbar .ticktrack{transition:none}
}
/* ============================================================
   FAS 2 (2026-07-14): Klockan · Radar-flikar · Besökare · DIN-shouts
   ============================================================ */
/* Gamla tre ikonerna döljs när innehållet flyttats (klass sätts av JS) */
.tdk .top .tb-item.tdk-moved{display:none}
/* Radarn ska vara SYNLIG (en av de 4 kontrollerna) — inte gömd bakom ••• MER */
.tdk .top .right .tb-sec:has(.iconbtn.radar){display:block}
/* Flik-rad (delas av klockan + radarn) */
.tdk-ktabs,.tdk-rtabs{display:flex;gap:2px;padding:6px;border-bottom:1px solid var(--line);position:sticky;top:0;background:var(--card);z-index:2}
.tdk-ktab{position:relative;flex:1;height:30px;border:0;background:transparent;border-radius:var(--r-sm);font-size:10.5px;font-weight:800;letter-spacing:.04em;text-transform:uppercase;color:var(--dim);cursor:pointer;transition:background .14s,color .14s;display:inline-flex;align-items:center;justify-content:center;gap:5px}
.tdk-ktab:hover{background:var(--inset);color:var(--ink2)}
.tdk-ktab.on{background:var(--accent-wash);color:var(--accent-ink)}
.tdk-ktab .mini{min-width:16px;height:16px;padding:0 4px;border-radius:10px;background:var(--danger);color:#fff;font-size:9px;font-weight:900;display:inline-flex;align-items:center;justify-content:center}
.tdk-ktab .mini[hidden]{display:none} /* display-regeln får inte slå ut [hidden] */
.tdk-ktab .mini.lv{background:var(--live)} /* mockupens färgade flik-piller i radarn */
.tdk-ktab .mini.ac{background:var(--accent)}
/* Klockans panes: fliken (.tdk-ktab) visar redan sektionsnamnet, så rubrik-TITELN (h4)
   är redundant och döljs. MEN header-actionen (msgs "Öppna alla", vänner "Se alla",
   notis-gear → inställningar) OCH footern (notiser "Se alla notiser") måste nås —
   annars blir notisinställningar + messenger-helvyn oåtkomliga från klockan.
   Header blir därför en tunn högerställd rad utan titel; footern får synas som vanligt. */
.tdk-kpane .tb-dd .ddh{display:flex;align-items:center;justify-content:flex-end;padding:6px 12px 4px;border:0;background:transparent}
.tdk-kpane .tb-dd .ddh h4{display:none}
/* .tb-dd--klocka{width:330px} — BORTTAGEN 2026-08-22. Regeln fanns TVÅ gånger
   i den här filen med olika bredd; den här vann inte, den sex rader ned gjorde.
   En död regel som säger fel sak är värre än ingen regel. */
.tdk-ktab b{font-weight:900}
/* Klockans panes: de inflyttade tb-dd:erna visas statiskt (position/skugga nollas) */
.tdk-kpane{display:none}
.tdk-kpane.on{display:block}
.tdk-kpane .tb-dd{display:block !important;position:static !important;box-shadow:none !important;border:0 !important;border-radius:0 !important;min-width:0 !important;max-height:none !important;opacity:1 !important;transform:none !important;visibility:visible !important}
/* 340 → 240 px (2026-08-22, D · Spegeln): klockan bär msgs/friends/notifs och
   ska ha samma bredd som panelerna den bär. */
.tb-dd--klocka{width:240px;max-width:92vw;max-height:min(72vh,560px);overflow-y:auto;overscroll-behavior:contain}
/* ============================================================
   KLOCKAN 2.0 (2026-07-16, Kentas order): bi-ikoner på flikarna,
   all menytext i NAVBARENS skala (10.5px uppercase, som .tab-lbl)
   ============================================================ */
/* EN scrollyta (Kentas feedback på scrollern): de inflyttade dropdownsens inre
   .ddlist-max-höjder stängs av inne i klockan — annars scrollar LISTAN i en egen
   ruta mitt i panelen (fet default-scrollbar bredvid raderna). Nu växer listorna
   fritt och HELA panelen scrollar som en yta, med sticky flikrad överst. */
.tdk-kpane .tb-dd .ddlist{max-height:none !important;min-height:0 !important;overflow:visible !important}
/* Smal temafärgad scrollbar i stället för webbläsarens standard */
.tb-dd--klocka{scrollbar-width:thin;scrollbar-color:var(--line2) transparent}
.tb-dd--klocka::-webkit-scrollbar{width:6px}
.tb-dd--klocka::-webkit-scrollbar-track{background:transparent}
.tb-dd--klocka::-webkit-scrollbar-thumb{background:var(--line2);border-radius:8px;border:1px solid transparent}
.tb-dd--klocka::-webkit-scrollbar-thumb:hover,
.tb-dd--klocka:hover::-webkit-scrollbar-thumb{background:var(--dim)}
/* Flikar: ikon + label, identitetsfärger i samma 70%-ton som topbarens tabs */
.tb-dd--klocka .tdk-ktab{gap:5px}
.tb-dd--klocka .tdk-ktab .bi{font-size:12.5px}
.tb-dd--klocka .tdk-ktab[data-tdk-ktab="msgs"] .bi{color:color-mix(in srgb,var(--accent) 70%,var(--dim))}
.tb-dd--klocka .tdk-ktab[data-tdk-ktab="friends"] .bi{color:color-mix(in srgb,var(--live) 70%,var(--dim))}
.tb-dd--klocka .tdk-ktab[data-tdk-ktab="notifs"] .bi{color:color-mix(in srgb,var(--gold) 70%,var(--dim))}
.tb-dd--klocka .tdk-ktab.on .bi{color:var(--accent-ink)}
/* Rad-text = navbarens 10.5px uppercase; metaraden strax under i dim */
.tb-dd--klocka .ddrow .c .tt{font-size:10.5px;letter-spacing:.03em;text-transform:uppercase;line-height:1.5}
.tb-dd--klocka .ddrow .c .tm{font-size:9.5px;letter-spacing:.02em;text-transform:uppercase}
.tb-dd--klocka .dd-empty{font-size:10.5px;letter-spacing:.03em;text-transform:uppercase;line-height:1.6}
/* Header-actions + footer-länkar i samma navbar-skala */
.tb-dd--klocka .ddh a,.tb-dd--klocka .dd-foot{font-size:10.5px;font-weight:800;letter-spacing:.04em;text-transform:uppercase}
.tb-dd--klocka .ddh .ddh-acts{display:flex;align-items:center;gap:12px}
.tb-dd--klocka button.ddh-gear{appearance:none;background:none;border:0;padding:0;cursor:pointer;display:inline-flex;font-size:14px;color:var(--dim)}
.tb-dd--klocka button.ddh-gear:hover{color:var(--accent)}
/* Kompaktare brickor/avatarer så raderna matchar den tightare typografin */
.tb-dd--klocka .ddrow--notif .nic,.tb-dd--klocka .ddrow--notif .nic-main{width:20px;height:20px}
.tb-dd--klocka .ddrow--notif .nic-main{font-size:10px}
.tb-dd--klocka .ddrow--notif .nic-badge{width:12px;height:12px;font-size:7px}
.tb-dd--klocka .ddrow .av{width:20px;height:20px}
/* KRÄVER SVAR (etapp 2): frågesektionen överst i notisfliken — svara utan att lämna menyn */
.tdk-ask{border-bottom:1px solid var(--line);padding-bottom:4px}
.tdk-ask-h{display:flex;align-items:center;gap:7px;padding:9px 14px 3px;font-size:10.5px;font-weight:800;letter-spacing:.05em;text-transform:uppercase;color:var(--accent-ink)}
.tdk-ask-h .bi{font-size:12px;color:var(--accent)}
.tdk-ask-h b{margin-left:auto;min-width:18px;height:18px;padding:0 5px;border-radius:9px;background:var(--accent);color:#fff;font-size:10px;font-weight:900;display:grid;place-items:center}
.tdk-ask .ask-row{align-items:center;border-bottom:0}
.tdk-ask .ask-row .av{width:32px;height:32px;border-radius:50%;background-color:var(--inset);background-position:center;flex:0 0 auto}
.tdk-ask .ask-row .av.ask-ic{display:grid;place-items:center;color:var(--accent-ink);border:1px solid var(--line)}
.tdk-ask .ask-row .av.ask-ic .bi{font-size:14px}
.ask-acts{display:inline-flex;gap:6px;flex:0 0 auto;align-items:center;margin-left:auto}
.ask-btn{display:inline-flex;align-items:center;justify-content:center;width:28px;height:28px;border:0;border-radius:var(--r-sm);cursor:pointer;color:#fff;font-size:15px;line-height:1;transition:filter .12s ease-out}
.ask-btn:hover{filter:brightness(1.1)}
.ask-btn:disabled{opacity:.55;cursor:wait}
.ask-btn.ok{background:var(--live,#22c55e)}
.ask-btn.no{background:var(--danger,#ef4444)}
.tdk-ask .ask-row.ask-done{background:color-mix(in srgb,var(--live) 9%,transparent);justify-content:center}
.tdk-ask .ask-row.ask-done--no{background:var(--inset)}
.ask-done-txt{display:inline-flex;align-items:center;gap:6px;color:var(--live);font-weight:800}
.ask-done--no .ask-done-txt{color:var(--dim)}
.ask-done-txt a{color:var(--accent);font-weight:800;text-decoration:none}
.ask-done-txt a:hover{text-decoration:underline}
.tdk-ask .ask-row.ask-err{background:color-mix(in srgb,var(--danger) 9%,transparent)}

/* ── CO-PLAY-STJÄRNOR (B 2.0, 2026-08-02) ────────────────────────────────────
   PHP-fallbackens stjärnrad. Motsvarigheten i React-ön bor i react-src/meny.css
   (.tb-dd .fnx-star*) — samma mått, samma tokens, så ytan ser likadan ut oavsett
   om bundlen laddade. `.ask-btn.ok/.no` (grönt/rött) rörs INTE: de används
   fortfarande av LFG-, squad- och inbjudningsraderna. Bara co-play bytte.
   Osatt stjärna = grå. Guld tänds först när ett betyg finns, så guld betyder
   "här finns ett omdöme" i stället för att vara dekoration (§0B punkt 5). */
.ask-stars{display:inline-flex;gap:1px;align-items:center;flex:0 0 auto;margin-left:auto}
.ask-star{width:22px;height:28px;display:grid;place-items:center;border:0;background:none;
  padding:0;cursor:pointer;font-size:15px;line-height:1}
.ask-star > i{color:var(--faint);opacity:.5;transition:color .12s ease-out,opacity .12s ease-out}
.ask-star.on > i{color:var(--gold);opacity:1}
.ask-star:hover > i{color:var(--gold);opacity:.7}
.ask-star:disabled{cursor:wait}
.ask-nope{width:24px;height:28px;display:grid;place-items:center;border:0;background:none;padding:0;
  margin-left:5px;cursor:pointer;color:var(--faint);font-size:12px}
.ask-nope:hover{color:var(--ink2)}
.tdk-ask .ask-saved{color:var(--gold);font-weight:700}

/* ── SPARARADEN (2026-08-09, Kentas beslut "A + kvitto") ─────────────────────
   Stjärnan var submit: ett tryck på 22 × 28 px skrev ett publikt betyg på en
   namngiven person, utan bekräftelse och utan ångra. Nu målar stjärnorna bara
   och den här raden är enda vägen till en skrivning. Den finns inte i DOM-flödet
   förrän man valt något — noll val = noll rad, precis som tidigare.
   Raden måste få bryta ned, därför flex-wrap på ask-row--star även på desktop;
   .ask-spara är dold tills dess så höjden är oförändrad i viloläge. */
.tdk-ask .ask-row--star{flex-wrap:wrap}
.ask-spara{display:flex;align-items:center;gap:6px;flex-basis:100%;padding-left:39px;margin-top:5px}
.ask-mini{font:inherit;font-size:11.5px;font-weight:700;height:28px;padding:0 11px;
  border-radius:var(--r-sm);cursor:pointer;display:inline-flex;align-items:center;gap:5px;
  white-space:nowrap;border:1px solid var(--line2);background:var(--inset);color:var(--ink);
  transition:filter .12s ease-out}
.ask-mini:hover{filter:brightness(1.08)}
.ask-mini:disabled{opacity:.55;cursor:wait}
.ask-mini.p{background:var(--accent);border-color:transparent;color:#fff}
.ask-mini.tyst{background:none;border-color:transparent;color:var(--dim)}
.ask-mini.tyst:hover{color:var(--ink)}
/* [hidden]-GUARD. .ask-spara är display:flex och slår annars ut webbläsarens
   [hidden]{display:none} — spararaden hade synts direkt vid sidladdning. */
.tdk-ask [hidden]{display:none!important}

/* 22px är under 44px touch-mål, så på mobil bryts raden och stjärnorna växer.
   820px = pulse-skalets brytpunkt, ingen egen siffra. */
@media (max-width:820px){
  /* ★ 2026-08-19: ✓/✗ i "Kräver svar" var 28x28 — under WCAG 2.5.5 och under
     husets egen gräns, som stjärnorna två rader ner redan följde. Det är de
     HÄR knapparna som svarar ja på en squad-inbjudan, en squad-ansökan och en
     LFG-förfrågan från en telefon; de var den minsta träffytan i hela flödet. */
  .ask-btn{width:44px;height:44px;font-size:19px;border-radius:var(--r)}
  .ask-acts{gap:8px}
  .ask-stars{flex-basis:100%;margin-left:0;margin-top:6px;padding-left:42px}
  .ask-star{width:42px;height:38px;font-size:17px}
  .ask-nope{width:42px;height:38px;font-size:14px}
  .ask-spara{padding-left:42px}
  .ask-mini{height:34px;font-size:12px;padding:0 13px}
}
/* MEDAN DU VAR BORTA (etapp 3): välkomnande summeringsrad överst i listan */
.tdk-away{display:flex;align-items:center;gap:8px;padding:9px 14px;background:var(--accent-wash);border-bottom:1px solid var(--line);font-size:10.5px;font-weight:700;letter-spacing:.03em;text-transform:uppercase;color:var(--accent-ink)}
.tdk-away .bi{font-size:13px;flex:0 0 auto}
/* Tysta likes-knappen (etapp 3): hjärta med snedstreck-overlay när tystad */
.tb-dd--klocka [data-notif-mute]{position:relative}
.tb-dd--klocka [data-notif-mute] .mute-slash{position:absolute;inset:0;display:grid;place-items:center;font-size:15px;color:var(--danger);pointer-events:none}
.tb-dd--klocka [data-notif-mute] .mute-slash[hidden]{display:none}
.tb-dd--klocka [data-notif-mute].on{color:var(--danger)}
/* Filterchips i notispanelen (Klockan 2.0): Alla / @Nämn / Socialt / System */
.tb-dd--klocka .tdk-nfilter{display:flex;gap:5px;padding:7px 12px 5px;flex-wrap:wrap}
.tdk-nfchip{appearance:none;font-family:inherit;border:1px solid var(--line);background:transparent;color:var(--dim);height:22px;padding:0 10px;border-radius:20px;font-size:9.5px;font-weight:800;letter-spacing:.05em;text-transform:uppercase;cursor:pointer;transition:background .12s,color .12s,border-color .12s}
.tdk-nfchip:hover{background:var(--inset);color:var(--ink2)}
.tdk-nfchip.on{background:var(--accent-wash);border-color:color-mix(in srgb,var(--accent) 30%,var(--line));color:var(--accent-ink)}
/* Vänförfrågan: grön bekräftelserad efter accept/neka (pulse-notifs.js byter innehållet) */
#dd-friends .ddrow.fr-done{align-items:center;background:color-mix(in srgb,var(--live) 9%,transparent)}
#dd-friends .ddrow.fr-done--no{background:var(--inset)}
#dd-friends .fr-done-txt{display:inline-flex;align-items:center;gap:6px;color:var(--live);font-weight:800}
#dd-friends .ddrow.fr-done--no .fr-done-txt{color:var(--dim)}
#dd-friends .fr-done-txt .bi{font-size:13px}
/* Radar-panes */
[data-tdk-rpane][hidden]{display:none}
/* Besökar-remsan: överlappande avatarer */
.tdk-visitors{border-top:1px solid var(--line);padding:9px 14px}
.tdk-vh{display:flex;align-items:center;gap:6px;font-size:10px;font-weight:800;letter-spacing:.05em;text-transform:uppercase;color:var(--champ);margin-bottom:7px}
.tdk-vavs{display:flex;align-items:center}
.tdk-vav{width:24px;height:24px;border-radius:50%;background-color:var(--inset);background-size:cover;background-position:center;border:2px solid var(--card);margin-left:-6px;display:grid;place-items:center;font-size:10px;font-weight:900;color:var(--ink2);transition:transform .14s;text-decoration:none}
.tdk-vav:first-child{margin-left:0}
.tdk-vav:hover{transform:translateY(-2px);z-index:2}
.tdk-vmore{margin-left:7px;font-size:11px;font-weight:800;color:var(--dim)}
/* DNA-chip + DNA-mini (standardkomponenter — radar, F-INDER-flyout, vänförfrågningar) */
.dchip{display:inline-flex;align-items:center;gap:4px;font-size:9.5px;font-weight:900;color:var(--champ);background:var(--champ-w);border:1px solid color-mix(in srgb,var(--champ) 26%,var(--line));border-radius:20px;padding:1px 7px;font-variant-numeric:tabular-nums;white-space:nowrap;flex:0 0 auto}
.dmini{display:flex;align-items:flex-end;gap:2.5px;height:14px;flex:0 0 auto}
.dmini i{width:4px;border-radius:1px;background:color-mix(in srgb,var(--champ) 35%,transparent);display:block}
.dmini i.hi{background:var(--champ)}
/* Kaskad-öppning: rader faller in när en dropdown öppnas (innehåll synligt utan JS/animation) */
.tdk .tb-dd.open .ddlist>*{animation:tdkCascIn .18s ease both}
.tdk .tb-dd.open .ddlist>*:nth-child(2){animation-delay:.015s}
.tdk .tb-dd.open .ddlist>*:nth-child(3){animation-delay:.03s}
.tdk .tb-dd.open .ddlist>*:nth-child(4){animation-delay:.045s}
.tdk .tb-dd.open .ddlist>*:nth-child(5){animation-delay:.06s}
.tdk .tb-dd.open .ddlist>*:nth-child(6){animation-delay:.075s}
.tdk .tb-dd.open .ddlist>*:nth-child(7){animation-delay:.09s}
.tdk .tb-dd.open .ddlist>*:nth-child(n+8){animation-delay:.1s}
@keyframes tdkCascIn{from{opacity:0;transform:translateY(-5px)}to{opacity:1;transform:none}}
/* Odometer-badge + ring-våg (körs BARA vid ändring, via JS-klasser) */
.tdk .badge.tdk-roll{animation:tdkRoll .3s ease}
@keyframes tdkRoll{from{transform:translateY(-70%);opacity:0}to{transform:none;opacity:1}}
.tdk .iconbtn.tdk-ring::after{content:'';position:absolute;inset:-1px;border-radius:inherit;box-shadow:0 0 0 0 color-mix(in srgb,var(--danger) 45%,transparent);animation:tdkRing 1s ease-out 1;pointer-events:none}
@keyframes tdkRing{to{box-shadow:0 0 0 12px transparent}}
/* DIN-shouts i shoutboxen (personliga, accent-tonade, injiceras av JS) */
.tdk .sbar .tk.tdk-mine{background:color-mix(in srgb,var(--accent) 9%,transparent);border-radius:var(--r-sm);padding:0 9px;margin-right:8px}
.tdk-din{flex:0 0 auto;font-size:8.5px;font-weight:900;letter-spacing:.06em;background:var(--accent);color:#fff;border-radius:3px;padding:1px 5px;line-height:1.5}
.tdk .tk.tdk-mine .tm2{color:var(--ink);font-weight:600}
.tdk-act{flex:0 0 auto;display:inline-flex;align-items:center;gap:4px;height:24px;padding:0 11px;border:0;border-radius:12px;background:var(--accent);color:#fff;font-size:11px;font-weight:800;cursor:pointer;transition:filter .12s}
.tdk-act:hover{filter:brightness(.94)}

/* ============================================================
   FAS 3 (2026-07-14): Ctrl+K-palett + DNA 2.0-hovercard
   ============================================================ */
/* Sökfältet kollapsar till ikon-knapp — klick/Ctrl K öppnar paletten */
.tdk .top .search{flex:0 0 auto;width:40px;min-width:40px;padding:0;justify-content:center;cursor:pointer;overflow:hidden}
.tdk .top .search input,.tdk .top .search .skbd,.tdk .top .search .pulse-search-drop{display:none}
.tdk .top .search i{margin:0;font-size:16px}
.tdk .top .search:hover{border-color:var(--accent);color:var(--accent-ink)}
/* Palett-overlay */
body.tdk-cmdk-lock{overflow:hidden}
.tdk-cmdk{position:fixed;inset:0;z-index:900}
.tdk-cmdk[hidden]{display:none}
.tdk-cmdk-bd{position:absolute;inset:0;background:rgba(11,15,20,.45);backdrop-filter:blur(3px);-webkit-backdrop-filter:blur(3px)}
.tdk-cmdk-card{position:absolute;top:12%;left:50%;transform:translateX(-50%);width:min(620px,92vw);background:var(--card);border:1px solid var(--line2);border-radius:12px;box-shadow:0 24px 64px rgba(0,0,0,.3);overflow:hidden;animation:tdkCkIn .14s ease}
@keyframes tdkCkIn{from{opacity:0;transform:translateX(-50%) scale(.97)}to{opacity:1;transform:translateX(-50%) scale(1)}}
.tdk-cmdk-top{display:flex;align-items:center;gap:11px;padding:13px 15px;border-bottom:1px solid var(--line)}
.tdk-cmdk-top i{font-size:17px;color:var(--faint);flex:0 0 auto}
.tdk-cmdk-top input{flex:1;border:0;background:transparent;outline:0;font-family:inherit;font-size:16px;color:var(--ink);min-width:0}
.tdk-cmdk-top input::placeholder{color:var(--faint)}
.tdk-cmdk-esc{flex:0 0 auto;border:1px solid var(--line2);background:var(--inset);color:var(--dim);border-radius:6px;height:26px;padding:0 9px;font-size:10px;font-weight:700;cursor:pointer}
/* ★ 2026-08-19: knappen hette "Esc" på en enhet utan Esc-tangent. Den STÄNGDE
   paletten (pulse-topdeck.js:461) — det var bara etiketten som ljög, och en
   26 px knapp var dessutom under träffytemåttet. På pekskärm blir den ett
   kryss på 40 px. Ordet Esc är kvar där tangenten finns. */
.tdk-cmdk-escx{display:none}
@media (max-width:820px),(hover:none){
  .tdk-cmdk-esct{display:none}
  .tdk-cmdk-escx{display:block;font-size:15px}
  .tdk-cmdk-esc{height:40px;min-width:40px;display:grid;place-items:center;padding:0}
  /* Paletten är helskärm på mobil — ett kort som svävar 12 % ned med rundade
     hörn är ett skrivbordsmönster. */
  .tdk-cmdk-card{top:0;left:0;transform:none;width:100%;max-width:none;height:100%;
    border:0;border-radius:0;box-shadow:none;animation:none}
  .tdk-cmdk-res{max-height:calc(100dvh - 68px)}
}
.tdk-cmdk-res{max-height:min(58vh,440px);overflow-y:auto;padding:6px}
.tdk-cmdk-gh{font-size:9.5px;font-weight:900;letter-spacing:.08em;text-transform:uppercase;color:var(--faint);padding:9px 10px 4px}
.tdk-cmdk-row{display:flex;align-items:center;gap:10px;padding:8px 10px;border-radius:8px;cursor:pointer;text-decoration:none;color:var(--ink)}
.tdk-cmdk-row.sel{background:var(--accent-wash)}
.tdk-cmdk-av{width:32px;height:32px;border-radius:6px;background-color:var(--inset);background-size:cover;background-position:center;border:1px solid var(--line);display:grid;place-items:center;flex:0 0 auto;color:var(--ink2);font-weight:900;font-size:13px}
.tdk-cmdk-bdy{min-width:0;flex:1}
.tdk-cmdk-nm{display:block;font-size:13.5px;font-weight:700;color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tdk-cmdk-sub{display:block;font-size:10.5px;color:var(--dim);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tdk-cmdk-empty{padding:30px 14px;text-align:center;color:var(--dim);font-size:13px}
/* Hovercard */
.tdk-hcard{position:fixed;z-index:950;width:290px;background:var(--card);border:1px solid var(--line2);border-radius:12px;box-shadow:0 16px 44px rgba(0,0,0,.25);overflow:hidden;animation:tdkCkFade .14s ease}
.tdk-hcard[hidden]{display:none}
@keyframes tdkCkFade{from{opacity:0;transform:translateY(-5px)}to{opacity:1;transform:none}}
.tdk-hc-top{display:flex;gap:11px;padding:13px 14px 9px;align-items:center}
.tdk-hc-av{width:46px;height:46px;border-radius:9px;background-color:var(--inset);background-size:cover;background-position:center;border:1px solid var(--line);flex:0 0 auto}
.tdk-hc-id{min-width:0}
.tdk-hc-nm{display:block;font-size:15px;font-weight:900;color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tdk-hc-sub{display:flex;align-items:center;gap:7px;margin-top:3px;font-size:10.5px;color:var(--dim)}
.tdk-rplate{display:inline-flex;align-items:center;font-size:9.5px;font-weight:800;text-transform:uppercase;letter-spacing:.03em;color:var(--tdk-rk-ink,var(--dim));background:color-mix(in srgb,var(--tdk-rk,var(--dim)) 12%,var(--card));border-radius:var(--r-sm);padding:2px 7px;box-shadow:inset 0 0 0 1.5px color-mix(in srgb,var(--tdk-rk,var(--dim)) 55%,transparent);white-space:nowrap}
.tdk-hc-stats{display:flex;gap:12px;padding:0 14px 9px;font-size:11px;color:var(--dim)}
.tdk-hc-stats b{color:var(--ink);font-weight:900;font-variant-numeric:tabular-nums}
.tdk-dna{margin:0 14px 10px;background:var(--inset);border:1px solid var(--line);border-radius:9px;padding:10px}
.tdk-dna-h{display:flex;align-items:center;justify-content:space-between;margin-bottom:3px}
.tdk-dna-arch{font-size:11.5px;font-weight:900;color:var(--champ);text-transform:uppercase;letter-spacing:.04em}
.tdk-dna-lbl{font-size:8.5px;font-weight:700;letter-spacing:.06em;color:var(--faint);text-transform:uppercase}
.tdk-dbar{display:flex;align-items:center;gap:8px;margin-top:6px}
.tdk-dbar .k{font-size:8.5px;font-weight:700;letter-spacing:.05em;color:var(--dim);text-transform:uppercase;width:86px;flex:0 0 auto}
.tdk-dbar .k .top-tag{font-style:normal;font-size:7px;font-weight:900;color:var(--champ);background:color-mix(in srgb,var(--champ) 14%,transparent);border-radius:3px;padding:0 3px;letter-spacing:.03em}
.tdk-dbar .track{flex:1;height:8px;background:color-mix(in srgb,var(--ink) 8%,transparent);border-radius:20px;overflow:hidden;position:relative}
.tdk-dbar .fill{display:block;height:100%;border-radius:20px;width:0;position:relative;transform-origin:left center;animation:tdkDnaFill .5s cubic-bezier(.4,0,.2,1) both}
@keyframes tdkDnaFill{from{transform:scaleX(0)}to{transform:scaleX(1)}}
.tdk-dbar .fill::after{content:'';position:absolute;inset:0 0 50% 0;border-radius:20px 20px 0 0;background:rgba(255,255,255,.2)}
.tdk-dbar.lv-lo .fill{background:color-mix(in srgb,var(--champ) 30%,transparent)}
.tdk-dbar.lv-mid .fill{background:color-mix(in srgb,var(--champ) 60%,transparent)}
.tdk-dbar.lv-hi .fill{background:var(--champ)}
.tdk-dbar.lv-top .fill{background:var(--champ);box-shadow:0 0 8px color-mix(in srgb,var(--champ) 55%,transparent)}
.tdk-dbar .v{font-size:10px;font-weight:900;color:var(--ink2);width:22px;text-align:right;font-variant-numeric:tabular-nums}
.tdk-hc-acts{display:flex;gap:6px;padding:9px 14px 13px;border-top:1px solid var(--line)}
.tdk-hc-b{flex:1;height:31px;border-radius:7px;font-size:12px;font-weight:700;border:1px solid var(--line2);background:var(--card);color:var(--ink2);display:inline-flex;align-items:center;justify-content:center;gap:5px;cursor:pointer;text-decoration:none}
.tdk-hc-b:hover{background:var(--inset)}
.tdk-hc-b.pri{background:var(--accent);border-color:var(--accent);color:#fff}
.tdk-hc-b.pri:hover{background:var(--accent-ink)}
@media (max-width:820px){
  /* Mobil: inget hover-kort, paletten funkar men sök-ikonen i topbaren är dold där ändå */
  .tdk-hcard{display:none !important}
}

/* ============================================================
   FAS 3.1 (2026-07-14): MOCKUP-PARITET — top-v4 är source of truth
   ============================================================ */
/* Högerklustret = 4 kontroller + tema + chip: ••• MER, tickets och crew bort
   (tickets → kontomenyn "Mina ärenden", crew → STAB-skölden, badges kvar i DOM för pulse-notifs) */
.tdk .top .more-btn{display:none !important}
.tdk .top .tb-item.tb-sec:has([data-dd="tickets"]){display:none !important}
.tdk .top .crew-item{display:none !important}
.tdk .top .tgl.tb-sec{display:grid !important}
/* Radarn: neutral pill med grön puls-dot + siffra (som mockupen), lila prick = nya profilbesökare */
.tdk .top .iconbtn.radar{width:auto;padding:0 11px;display:inline-flex;align-items:center;gap:6px;background:var(--card);border-color:var(--line);color:var(--ink);border-radius:10px}
.tdk .top .iconbtn.radar:hover{background:var(--inset);border-color:var(--line2)}
.tdk .top .iconbtn.radar > .bi{display:none;animation:none}
.tdk .top .iconbtn.radar .badge.lv{display:none !important}
.tdk .top .iconbtn.radar::after{content:none !important}
.tdk .top .iconbtn.radar.tdk-hasvis::after{content:'' !important;position:absolute;inset:auto;top:-3px;right:-3px;width:9px;height:9px;border-radius:50%;background:var(--champ);border:2px solid var(--card);box-shadow:none !important;animation:none !important}
.tdk-ldot{display:none;width:8px;height:8px;border-radius:50%;background:var(--live);animation:tdkBeat 2s ease-in-out infinite;flex:0 0 auto}
.tdk-pnum{display:none;font-size:12.5px;font-weight:900;font-variant-numeric:tabular-nums}
.tdk .top .radar .tdk-ldot{display:inline-block}
.tdk .top .radar .tdk-pnum{display:inline}
@keyframes tdkBeat{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.5;transform:scale(.85)}}
/* Shoutbox-raden städad: statpiller + kaffe bort (bor i radarn resp. topbaren) */
.tdk .sbar .sb-stat,.tdk .sbar .sb-coffee,.tdk .sbar .sb-sep{display:none !important}
/* Chippen: "Hej," + vinken bort — namn + rank + streak som mockupen */
.tdk .top .mg-hej,.tdk .top .mg-wave{display:none}
/* STAB kompaktare + sköld = Crew Chat-knapp med kö-badge */
.tdk .pstaff .psb-in{min-height:30px;padding:2px 16px;gap:9px}
.tdk .pstaff .psb-sh{width:20px;height:20px;font-size:11px;border-radius:5px}
.tdk .pstaff .psb-lbl{font-size:10px;letter-spacing:.08em}
.tdk .pstaff .psb-jump{display:none} /* Ctrl K-paletten ersätter "Hoppa till användare" */
/* margin-left:-2px (2026-07-26): knappens padding-left:2px är klickytans luft och ska
   vara kvar (hover-bakgrunden behöver den), men den sköt STAB-skölden till 75.5 medan
   loggan, korten och footern alla börjar på 73.5 — 2px ur lod på sajtens översta rad.
   Negativ marginal flyttar hela knappen i stället för att ta bort luften, så SYNLIG
   sköldkant hamnar på 73.5. Samma mönster som coins-segmentets margin-right 2026-07-26:
   mät mot det synliga elementet, justera med margin, inte genom att döda paddingen. */
.tdk .pstaff button.psb-brand{appearance:none;border:0;background:transparent;cursor:pointer;padding:2px 6px 2px 2px;margin-left:-2px;font:inherit;color:inherit;display:flex;align-items:center;gap:7px;border-radius:6px}
.tdk .pstaff button.psb-brand:hover{background:color-mix(in srgb,var(--champ) 12%,transparent)}
.tdk-stabbadge{min-width:17px;height:17px;padding:0 5px;border-radius:10px;background:var(--danger);color:#fff;font-size:10px;font-weight:900;display:inline-flex;align-items:center;justify-content:center;line-height:1}
/* ---------- FAS 3.2: EXAKT storleksparitet (uppmätt mot top-v4) ---------- */
/* Brand 20 → 22px (Kentas order 2026-07-26 "lite större"). MÄTT @1440: varje extra
   px på brandet kostar ~5px i radbredd (20px→2px overflow, 21px→7, 22px→12), så
   gapet i .in sänks 8 → 6px som kompensation → tillbaka på 2px (= utgångsläget). */
.tdk .top .brand{font-size:22px;letter-spacing:-.3px}
.tdk .top .in{column-gap:6px}
/* Höger-klustret (2026-07-21, Kentas önskan): mindre + tystare. 32px, glyf 15px
   (samma som tabbarnas ikoner), ingen ram/fyllning i vila — inset bara vid hover,
   precis som tabbarna → klustret smälter in i stället för att se ut som knapprad. */
.tdk .top .iconbtn{width:32px;height:32px;border-radius:var(--r);background:transparent;border-color:transparent}
.tdk .top .iconbtn i{font-size:15px}
.tdk .top .iconbtn:hover{background:var(--inset);border-color:var(--line)}
.tdk .top .me .av{width:32px;height:32px}
.tdk .top .iconbtn.radar{width:auto;height:38px;border-radius:var(--r)}
.tdk .top .search{height:38px;width:38px;min-width:38px;background:var(--card)} /* mockup: vit, inte inset-grå */
.tdk .top .search:hover{background:var(--inset)}
/* Avskiljarna (2 st: sök→tabs, tabs→höger) = mockupens vrule: SOLID 1×20px line2
   (ersätter gamla gradient-tonade tb-vsep; ingen extra ::before-dubblett) */
.tdk .top .tb-vsep{width:1px;height:20px;background:var(--line2);border-radius:0;align-self:center}
.tdk .top .me--greet{height:44px;padding:3px 10px 3px 4px;gap:8px;border-radius:var(--r)} /* mockup 44/r6 */
.tdk .top .me--greet .av{width:34px;height:34px;border-radius:5px} /* mockup 34/r5 */
/* STAB: exakt 30px-rad, font 11, kompakta piller (mockup-mått) */
.tdk .pstaff .psb-in{min-height:30px;height:30px;padding:0 16px;font-size:11px}
.tdk .pstaff .psb-drift,.tdk .pstaff .psb-tools,.tdk .pstaff .psb-q,.tdk .pstaff .psb-jump{height:20px;font-size:10px}
.tdk .pstaff .psb-who,.tdk .pstaff .psb-in .avatar-ph{width:20px;height:20px}
.tdk .pstaff .psb-collapse{width:22px;height:22px;font-size:12px}
/* Shoutbox-sidan (mockup): profil + DNA-knappar + reaktionen HÖGER om tickern */
.tdk-shside{display:inline-flex;gap:5px;align-items:center;flex:0 0 auto}
.tdk-shside:empty{display:none}
.sh-qi2{width:26px;height:26px;border-radius:5px;border:1px solid var(--line);background:var(--card);color:var(--dim);display:grid;place-items:center;font-size:13px;cursor:pointer;text-decoration:none;transition:border-color .14s,color .14s;padding:0}
.sh-qi2:hover{border-color:var(--accent);color:var(--accent-ink)}
.sh-qi2.dna:hover{border-color:var(--champ);color:var(--champ)}
.tdk .sbar .tick .sb-rx{display:none} /* inline-klustret göms — klonen bor i högersidan */
/* ---------- FAS 3.7: shoutbox-raden EXAKT som mockupen ---------- */
.tdk .sbar .lbl2{color:var(--dim);letter-spacing:.08em;font-size:10.5px}
.tdk .sbar .lbl2 .bi{display:none} /* mockupen har ingen megafon */
.tdk .sbar .tk .tk-u{color:var(--accent-ink);font-weight:500}
/* Event-ikon-chip (injiceras av JS): 20px, färgkodad per händelse */
.tdk-seic{flex:0 0 auto;display:inline-grid;place-items:center;width:20px;height:20px;border-radius:5px;background:var(--inset);border:1px solid var(--line)}
.tdk-seic .bi{font-size:12px}
.tdk-seic.gold{background:color-mix(in srgb,var(--gold) 14%,var(--card));border-color:color-mix(in srgb,var(--gold) 32%,var(--line))}.tdk-seic.gold .bi{color:var(--gold)}
.tdk-seic.champ{background:var(--champ-w);border-color:color-mix(in srgb,var(--champ) 30%,var(--line))}.tdk-seic.champ .bi{color:var(--champ)}
.tdk-seic.danger{background:color-mix(in srgb,var(--danger) 10%,var(--card));border-color:color-mix(in srgb,var(--danger) 28%,var(--line))}.tdk-seic.danger .bi{color:var(--danger)}
.tdk-seic.accent{background:var(--accent-wash);border-color:color-mix(in srgb,var(--accent) 28%,var(--line))}.tdk-seic.accent .bi{color:var(--accent-ink)}
.tdk-seic.live{background:var(--live-wash);border-color:color-mix(in srgb,var(--live) 28%,var(--line))}.tdk-seic.live .bi{color:var(--live)}
/* Reaktionsklonen i högersidan: mockupens runda pill (h26, r20, emoji + verb + count) */
.tdk-shside .sb-react{display:inline-flex !important;align-items:center;gap:5px;height:26px;padding:0 11px;border:1px solid var(--line2);background:var(--card);border-radius:20px;font-size:11px;font-weight:500;color:var(--ink2);white-space:nowrap;cursor:pointer;transition:background .14s,border-color .14s,color .14s}
.tdk-shside .sb-react:hover{border-color:var(--dim);background:var(--inset)}
.tdk-shside .sb-react.done{background:var(--accent-wash);border-color:color-mix(in srgb,var(--accent) 30%,var(--line));color:var(--accent-ink)}
/* Rank-inset-plattan i högersidan (hämtas lazy av JS via hovercard-cachen) */
.tdk-shside .tdk-rplate{font-size:9px;padding:1px 6px}
/* GG/Respekt-chips INNE i panelen + snyggare sändrad m cooldown-läge */
.tdk .sbox .sb-react--panel{display:inline-flex;align-items:center;gap:4px;margin-left:7px;height:20px;padding:0 8px;border:1px solid var(--line2);background:var(--card);border-radius:20px;font-size:10px;font-weight:800;color:var(--ink2);cursor:pointer;vertical-align:middle;transition:background .14s,border-color .14s,color .14s}
.tdk .sbox .sb-react--panel:hover{border-color:var(--dim);background:var(--inset)}
.tdk .sbox .sb-react--panel.done{background:var(--accent);border-color:var(--accent);color:#fff}
.tdk .sbox-input{display:flex;gap:7px;align-items:center}
.tdk .sbox-input input{flex:1;height:38px;border:1px solid var(--line);border-radius:var(--r);background:var(--card);padding:0 12px;font-family:inherit;font-size:13px;color:var(--ink);outline:0;transition:border-color .14s,box-shadow .14s}
.tdk .sbox-input input:focus{border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-wash)}
.tdk .sbox-input input:disabled{background:var(--inset);color:var(--dim);cursor:not-allowed}
.tdk .sbox-input .sbox-send{flex:0 0 auto;min-width:38px;height:38px;padding:0 10px;border:0;border-radius:var(--r);background:var(--accent);color:#fff;font-size:12px;font-weight:800;cursor:pointer;display:grid;place-items:center;font-variant-numeric:tabular-nums;transition:background .14s}
.tdk .sbox-input .sbox-send:hover{background:var(--accent-ink)}
.tdk .sbox-input .sbox-send:disabled{background:var(--line2);color:var(--dim);cursor:not-allowed}
/* Chippen: ingen chevron (mockupen har ingen) */
.tdk .top .me--greet .mg-cev{display:none}
/* ---------- FAS 3.3: SUPERSKÖLDEN-menyn i STAB (mockupens sköld-dropdown) ---------- */
.tdk .pstaff{position:relative;z-index:130} /* Superskölden-popen ska ligga ÖVER topbaren (.top z-50) */
.pstaff .psb-shieldwrap{position:relative;flex:0 0 auto}
/* Superskölden-popen — EXAKT enligt top-v4-mockupen (#popStab): 320px, champ-header,
   rader 13px/500 m 16px färgkodade ikoner, danger-count-piller, 6px-container */
.pstaff #psbPopShield{width:320px;left:0}
.pstaff .psh-ph{color:var(--champ)}
.pstaff .psh-ph .bi{color:var(--champ)}
.pstaff .psh-ph .psh-drift{margin-left:auto;font-size:9.5px;font-weight:900;letter-spacing:.04em;color:var(--live);white-space:nowrap}
.pstaff .psh-ph .psh-drift.bad{color:var(--danger)}
.pstaff .psh-body{padding:6px}
.pstaff .psh-h{padding:6px 8px 2px;font-size:10.5px;font-weight:900;letter-spacing:.06em;text-transform:uppercase;color:var(--danger)}
.pstaff .psh-row{display:flex;align-items:center;gap:10px;width:100%;padding:9px 10px;border-radius:6px;font-size:13px;font-weight:500;color:var(--ink);text-decoration:none;background:none;border:0;cursor:pointer;text-align:left;font-family:inherit}
.pstaff .psh-row:hover{background:var(--inset)}
.pstaff .psh-row .bi{width:16px;text-align:center;font-size:15px;color:var(--ink2);flex:0 0 auto}
/* Färgkodade ikoner (~70 % ton, som mockupens mc-klasser) */
.pstaff .psh-row.psh-champ .bi{color:color-mix(in srgb,var(--champ) 70%,var(--ink2))}
.pstaff .psh-row.psh-accent .bi{color:color-mix(in srgb,var(--accent) 70%,var(--ink2))}
.pstaff .psh-row.psh-gold .bi{color:color-mix(in srgb,var(--gold) 70%,var(--ink2))}
.pstaff .psh-row.psh-live .bi{color:color-mix(in srgb,var(--live) 70%,var(--ink2))}
.pstaff .psh-row.psh-danger{color:var(--danger)}
.pstaff .psh-row.psh-danger .bi{color:var(--danger)}
.pstaff .psh-ct{margin-left:auto;min-width:17px;padding:1px 6px;border-radius:10px;background:var(--danger);color:#fff;font-size:10px;font-weight:900;text-align:center;line-height:1.5}
.pstaff .psh-sep{height:1px;background:var(--line);margin:5px 6px}
.pstaff .psh-speed{padding:7px 10px}
.pstaff .psh-speed .t3{display:flex;align-items:center;font-size:11px;font-weight:700;color:var(--ink2)}
.pstaff .psh-speed .t3 b{margin-left:auto;font-variant-numeric:tabular-nums;color:var(--ink);font-size:12px}
.pstaff .psh-speed input[type=range]{width:100%;margin-top:6px;accent-color:var(--champ)}
/* DNA 2.0-blocket renderas nu INNE i sajtens kontaktkort (.rx-hc) — inget eget kort */
.rx-hc .tdk-dna{margin:8px 12px;background:var(--inset);border:1px solid var(--line);border-radius:9px;padding:9px 10px}
.tdk-hcard{display:none !important} /* gamla egna kortet avstängt */
@media (prefers-reduced-motion:reduce){
  .tdk .top .tdk-puck{transition:none}
  .tdk .sbar .ticktrack{transition:none}
  .tdk-coffee .tdk-steam{display:none}
  .tdk-coffee .tdk-cpill{transition:none}
  .tdk-discord .tdk-dpill{transition:none}
  .tdk-discord .tdk-dsc-dot{animation:none}
  .tdk-discord:hover i{transform:none}
  .tdk .tb-dd.open .ddlist>*{animation:none}
  .tdk .badge.tdk-roll,.tdk .iconbtn.tdk-ring::after{animation:none}
  .tdk-cmdk-card,.tdk-hcard{animation:none}
  .tdk-dbar .fill{animation:none}
}

/* ============================================================
   MOBIL-SCOPE (2026-07-15, uppmätt fix) — Command Deck (fas 3.x) är
   desktop-mockup-paritet och råkade PÅ MOBIL återvisa element som
   mobil-slimmen (2026-07-12) medvetet gömt. Uppmätt följd @360px:
   högerklustret 299px → topbaren krävde 472px = 112px UTANFÖR ramen
   (layout-viewporten sprängs → allt ser utzoomat/avkapat ut).
   Reglerna nedan återställer mobilens slimmade topp. Desktop orörd.
   ============================================================ */
@media (max-width:820px){
  /* Tema-växlaren: fas 3.1:s display:grid !important slog mobilens göm-regel — bor i drawern */
  .tdk .top .tgl.tb-sec{display:none !important}
  /* ══ MOBILENS HÖGERKLUSTER (2026-07-26, Kentas order: ALLA fyra ska synas) ══
     Discord + kaffe + coins + profil ska rymmas vid 360px. Första försöket gömde
     kaffe/coins eftersom klustret sprängde bredden (mätt: 131px overflow). Rätt
     lösning är i stället att strama åt: mindre mellanrum och mindre ikoner —
     inga "mega stora mellanrum" som Kenta sa.

     Budget @360px (.in client ≈ 345):
       burger 32 + brand ~70 + [sök 32 + notiser 32 + discord 26 + kaffe 26
       + coins 44 + profil 36] + gap (3×4 + 6×3 ≈ 30)  ≈ 330  → ryms med marginal.  */
  /* Sidopadding 12 → 8px: ger 8px tillbaka utan att något ser trångt ut */
  .tdk .top .in{gap:4px !important;padding-left:8px !important;padding-right:8px !important}
  .tdk .top .in .right{gap:3px !important}
  /* Burger: 40×40 kvadratisk (min-height MÅSTE nollas — annars 40×44 = ägg)
     med stor ikon. Kentas order 2026-07-26: "gör ikonerna större, smått att klicka på". */
  .tdk .top .burger{width:40px !important;height:40px !important;
    min-width:0 !important;min-height:0 !important;aspect-ratio:1/1;
    flex:0 0 auto;border-radius:999px !important}
  .tdk .top .burger i{font-size:23px !important}
  .tdk .top .brand{font-size:18px !important;letter-spacing:-.2px}

  /* Notis-/sökikonerna: 44 → 32 (touch-ytan är fortfarande ≥32px vilket räcker
     i en tät topbar; drawern har textalternativ för allt) */
  .tdk .top .right .iconbtn,
  .tdk .top .right .tb-item > .iconbtn{width:32px !important;height:32px !important}
  .tdk .top .right .iconbtn i{font-size:15px}

  /* Discord + kaffe: kompakta ikoner utan hover-pill (meningslös på touch) */
  /* ÄGG-BUGGEN (Kentas synpunkt 2026-07-26): touch-regeln
     `@media(max-width:820px){.top .iconbtn{min-width:44px;min-height:44px}}`
     — jag nollade bara min-WIDTH, så knapparna blev 25–28 × 44 px och
     border-radius:50% ritade en ellips = ägg. min-height MÅSTE också nollas.
     aspect-ratio + 999px radius är bälte och hängslen: även om något framtida
     mått glider blir formen en cirkel/stadion, aldrig ett ägg. */
  .top .iconbtn.tdk-discord,
  .tdk .top .iconbtn.tdk-discord,
  .top .iconbtn.tdk-coffee,
  .tdk .top .iconbtn.tdk-coffee{display:grid !important;place-items:center;
    width:34px !important;height:34px !important;
    min-width:0 !important;min-height:0 !important;
    max-height:34px !important;aspect-ratio:1/1;align-self:center;
    margin:0 !important;padding:0 !important;flex:0 0 auto;
    border-radius:999px !important}
  .tdk .top .iconbtn.tdk-discord i,
  .tdk .top .iconbtn.tdk-coffee i{font-size:17px !important}
  .tdk .top .iconbtn.tdk-discord .tdk-dpill,
  .tdk .top .iconbtn.tdk-coffee .tdk-cpill,
  .tdk .top .iconbtn.tdk-coffee .tdk-steam{display:none !important}

  /* Coins: myntet + siffran, minimal padding — kvar vid profilknappen som du ville.
     MÄTT @360px: 50px var 16px för mycket; 0 4px + 12px mynt + 10.5px siffra ≈ 34px. */
  .top .tdk-coins,
  .tdk .top .tdk-coins{display:inline-flex !important;height:26px;padding:0 4px !important;
    gap:3px !important;margin:0 !important;flex:0 0 auto}
  .tdk .top .tdk-coins img{width:12px !important;height:12px !important}
  .tdk .top .tdk-coins b{font-size:10.5px !important;letter-spacing:-.2px}

  /* Profilavataren: 48 → 32 så sista pixlarna räcker (touch-regeln 44px gäller
     .iconbtn/.burger, inte .me — avataren är fortfarande lätt att träffa) */
  .tdk .top .right .me-item .me{width:32px !important;min-width:0 !important;padding:0 !important}
  .tdk .top .right .me-item .me .av{width:24px !important;height:24px !important}

  /* ≤380px: coins-pillen stiger åt sidan så ikonerna kan förbli STORA (34px) —
     att krympa träffytorna igen vore fel prioritering (Kenta: "smått att klicka på").
     Coins syns i profilkortet i vänsterspalten. */
  .tdk .top .tdk-coins{display:none !important}

  /* Riktigt smala telefoner (≤380px): krymp varumärket ytterligare i stället för
     att börja gömma funktioner */
  @media (max-width:380px){
    /* Brandet hålls läsbart (16px) — utrymmet kommer från att coins-pillen
       göms här, inte från att krympa text och ikoner. */
    .tdk .top .brand{font-size:12px !important;gap:0}  /* gap:2px hamnade aven mellan FORRE och .NU - se pulse-deck.css */
    /* 20px, inte 16: ringbandet ar 7,62 % av hojden, sa 16px ger en 1,22px
       ring som webblasaren ritar som en gra ton i stallet for en linje. 20px
       ger 1,52px - arkets absoluta golv. Vill man ha market riktigt skarpt
       har ska ordet fallas bort och market sta ensamt pa 26px i stallet. */
    .tdk .top .brand-mark{width:20px!important;height:20px!important;flex-basis:20px!important}
    .tdk .top .in{gap:3px !important}
    .tdk .top .in .right{gap:1px !important}
    .tdk .top .in .right .tb-tools{gap:2px!important}
    .tdk .top .iconbtn.tdk-discord,
    .tdk .top .iconbtn.tdk-coffee{width:32px !important;height:32px !important;max-height:32px !important}
  }

  /* ≤340px (iPhone SE m.fl.) — MÄTT: 41px overflow kvar även efter all åtstramning.
     Här måste NÅGOT stiga åt sidan. Valet: coins-pillen (siffran syns ändå i
     profilkortet i vänsterspalten), medan Discord + kaffe behålls eftersom det var
     de du uttryckligen bad om. */
  /* ≤340px (iPhone SE): MÄTT 3px overflow med 40px burger + 16px brand →
     burgern 38 och brandet 14px ger marginal utan att något blir småklickigt. */
  @media (max-width:340px){
    .tdk .top .brand{font-size:11px !important}
    .tdk .top .burger{width:36px !important;height:36px !important;max-height:36px !important}
    .tdk .top .burger i{font-size:20px !important}
    /* 34 → 30px här: fortfarande klart större än de 25px vi hade, men ger de
       sista 8px som MÄTT saknades vid 320px (iPhone SE). */
    .tdk .top .iconbtn.tdk-discord,
    .tdk .top .iconbtn.tdk-coffee{width:30px !important;height:30px !important;
      max-height:30px !important}
    .tdk .top .iconbtn.tdk-discord i,
    .tdk .top .iconbtn.tdk-coffee i{font-size:15px !important}
  }
  /* DUBBLETT BORTTAGEN 2026-07-26: här låg en äldre regel som pinnade Discord till
     width/height 28px och stod EFTER de nya 25px-reglerna → knappen blev 28×25 =
     ägg, trots att kaffet (samma regelset) blev perfekt cirkel. Klassiskt
     kaskad-fel av att bygga i flera pass i samma mediablock: sök alltid efter
     tidigare deklarationer av samma egenskap innan du lägger till en ny. */
  .tdk .top .iconbtn.tdk-discord .tdk-dsc-dot{width:7px;height:7px;top:-1px;right:-1px}
  .tdk .top .iconbtn.tdk-discord.is-linked::after{width:10px;height:10px;font-size:7px;
    bottom:-2px;right:-2px}
  /* Radar-pillen: fas 3.1:s :has-regel avmaskade den på mobil → 45px som inte får plats */
  .tdk .top .right .tb-sec:has(.iconbtn.radar){display:none !important}
  /* Shoutbox-etiketten: fas 3.7 (font-size:10.5 + dold megafon) slog mobilens ikon-läge
     → "SHOUTBOX"-texten tog 66px av tickern igen. Mobil = bara megafon-ikonen. */
  .tdk .sbar .lbl2{font-size:0;letter-spacing:0;gap:0}
  .tdk .sbar .lbl2 .bi{display:inline-flex;font-size:15px}
  .tdk .sbar .lbl2 .sb-mega{width:22px;height:22px}
  .tdk .sbar .lbl2 .sb-mega .bi{font-size:12px}
  /* Shoutbox-högersidan (profil+DNA+reaktionsklon, 162px) åt upp tickern (55px kvar @360).
     På mobil göms sidoklustret och reaktionsklustret visas INNE i tickern igen. */
  .tdk-shside{display:none !important}
  .tdk .sbar .tick .sb-rx{display:inline-flex}
  /* Mobil: bara föreslagna chipen (trions extra-chips får inte plats på 375px) */
  .tdk .sbar .tick .sb-rxo{display:none}
}

/* ============================================================
   HYPE DECK (2026-07-16) — Shoutbox 2.0
   Brand-etikett, shouter-avatar, event-stripe, reaktionskluster
   med hover-flyout (6 verb), emoji-burst + done-pop.
   Markup: pulse-shoutbox.php ($sbRxHtml) + pulse-topdeck.js (klon).
   ============================================================ */
/* Brand: dämpad megafon-box — baren ska INTE tävla med navbaren om blicken
   (Kentas riktning 2026-07-16: stilrent, inga gradients, inget som pulserar) */
.tdk .sbar .lbl2{display:inline-flex;align-items:center;gap:8px;color:var(--dim);font-weight:500}
/* Ingen bold i shoutboxen (Kentas riktning 2026-07-16): namn/etikett/chips i normal-medium */
.tdk .sbar .sb-react{font-weight:500}
.tdk .sbox .smsg .u{font-weight:500}
.tdk .tk.tdk-mine .tm2{font-weight:400}
.tdk-act{font-weight:600}
.sb-mega{display:inline-grid;place-items:center;width:24px;height:24px;border-radius:6px;background:var(--inset);border:1px solid var(--line);flex:0 0 auto}
.tdk .sbar .lbl2 .sb-mega .bi{display:inline-flex;font-size:12px;color:var(--dim)}
.sb-brandtx{letter-spacing:.08em}
.sb-livedot{display:none}

/* Shouter-avatar i tickern (klickbar → avatar-viewern) — neutral ram, ingen glow */
.sb-av{flex:0 0 auto;width:22px;height:22px;border-radius:50%;background:var(--inset) center/cover no-repeat;border:1px solid var(--line2);cursor:pointer}

/* Reaktions-TRIO (2026-07-17): föreslagen chip + två emoji-chips, alla synliga
   bredvid varandra — inget hover-krav, ett klick = sagt. */
.sb-rx{display:inline-flex;align-items:center;gap:4px;flex:0 0 auto}
.sb-rxo{display:inline-flex;align-items:center;justify-content:center;gap:3px;min-width:26px;height:26px;padding:0 6px;border:1px solid var(--line2);border-radius:20px;background:var(--card);font-size:13px;cursor:pointer;line-height:1;transition:background .14s,border-color .14s,transform .12s}
.sb-rxo .n{font-size:9px;font-weight:500;color:var(--dim);font-variant-numeric:tabular-nums}
.sb-rxo:hover{background:var(--inset);border-color:var(--dim);transform:translateY(-1px)}
.sb-rxo:disabled{opacity:.5;cursor:default;transform:none}
.sb-rx.done .sb-rxo{display:none} /* en reaktion per spelare — efter valet visas bara done-chipen */

/* Panel-varianten: samma trio, mindre */
.sb-rx--panel{vertical-align:middle;margin-left:4px;gap:3px}
.sb-rx--panel .sb-react{display:inline-flex;align-items:center;gap:4px;height:20px;padding:0 9px;border:1px solid var(--line2);background:var(--card);border-radius:20px;font-size:10px;font-weight:500;color:var(--ink2);cursor:pointer;transition:background .14s,border-color .14s,color .14s}
.sb-rx--panel .sb-react:hover{border-color:var(--dim);background:var(--inset)}
.sb-rx--panel .sb-react.done{background:var(--accent-wash);border-color:color-mix(in srgb,var(--accent) 30%,var(--line));color:var(--accent-ink)}
.sb-rx--panel .sb-rxo{min-width:20px;height:20px;padding:0 5px;font-size:11px}
.sb-rx--panel .sb-rxo .n{display:none}

/* Streamer-LIVE: plattformslogga i loggans färg (Twitch lila, Kick grön) */
.sb-plat{font-size:14px;flex:0 0 auto}
.sb-kickic{display:inline-grid;place-items:center;width:16px;height:16px;border-radius:3px;background:#53fc18;color:#0b0e11;font-size:11px;font-weight:700;line-height:1;flex:0 0 auto;font-family:Arial,sans-serif}

/* Done-pop + emoji-burst */
.sb-react.done{animation:sbPop .42s cubic-bezier(.34,1.56,.64,1)}
@keyframes sbPop{0%{transform:scale(.85)}55%{transform:scale(1.14)}100%{transform:scale(1)}}
.sb-burst{position:fixed;z-index:9999;pointer-events:none;font-size:15px;transform:translate(-50%,-50%);animation:sbBurst .85s cubic-bezier(.17,.67,.35,1) forwards;will-change:transform,opacity}
@keyframes sbBurst{0%{opacity:0;transform:translate(-50%,-50%) scale(.5)}12%{opacity:1}100%{opacity:0;transform:translate(calc(-50% + var(--bx,0px)),calc(-50% + var(--by,-40px))) scale(1.15)}}

/* Svara-knappen i högersidan */
.sh-qi2.reply:hover{border-color:var(--live);color:var(--live)}

@media (prefers-reduced-motion:reduce){
  .sb-react.done,.sb-burst{animation:none}
  .sb-rxo{transition:none}
}

/* ── MOBIL (2026-08-22) ────────────────────────────────────────────────────
   Hover-paneler finns inte på pekskärm. .fnx-fpwrap göms redan under 820 px
   (forre-ui.css) och .tb-dd har max-width:92vw sedan tidigare — men
   .tdk-finderfly var låst till sin px-bredd och hade INGEN regel alls. På en
   320 px-skärm gick den utanför kanten. Nu följer den familjen. */
@media (max-width:820px){
  .tdk-finderfly{display:none!important}
}