/* ============================================================================
 * FORRE.NU — MOBIL OMSKRIVNING (from scratch)
 * Allt scopat under @media (max-width:768px). Desktop rörs ALDRIG av denna fil.
 * Ny shell = .tw-fm (status bar + topbar + content + bottom nav + paneler).
 * Gamla mobil-chrome neutraliseras (display:none) längst ned i filen.
 * Palett enligt spec (lokala custom props på .tw-fm → påverkar ej globala tokens).
 * ========================================================================== */

/* Dölj nya shellen på desktop helt (FOUC-skydd) */
.tw-fm { display: none; }

@media (max-width: 768px) {

  /* VARIABEL-SCOPE-FIX 2026-07-15: --sb-h/--top-h/--nav-h definierades bara pa .tw-fm,
     men anvands pa body-nivans .tw-page-content/.pb-content-area (utanfor .tw-fm).
     Dar blev var() ogiltig -> padding-top/bottom foll till 0 -> innehallet borjade
     BAKOM den fixerade tickern+topbaren. Definieras darfor aven pa body.tw-fm-on. */
  body.tw-fm-on {
    --sb-h:44px;
    --top-h:52px;
    --nav-h:60px;
  }

  /* ---- Lokal palett (spec FORRE_DARK) ---- */
  .tw-fm {
    --bg:#0a0a0f;
    --surface-1:#0a0a0f;
    --surface-2:#13131a;
    --surface-3:#1c1c26;
    --surface-4:#252533;
    --surface-5:#0d0d14;
    --primary:#00c8ff;
    --primary-dim:rgba(0,200,255,0.12);
    --success:#00e676;
    --warning:#ffab00;
    --danger:#ff1744;
    --tprimary:#ffffff;
    --tsecondary:rgba(255,255,255,0.7);
    --ttertiary:rgba(255,255,255,0.4);
    --tmuted:rgba(255,255,255,0.2);
    --line:rgba(255,255,255,0.07);

    --sb-h:44px;     /* status bar */
    --top-h:52px;    /* topbar */
    --nav-h:60px;    /* bottom nav */

    font-family:'Roboto', sans-serif;
    -webkit-font-smoothing:antialiased;
  }

  /* Visa nya shellen endast när body.tw-fm-on (ej i Page Builder edit-läge) */
  body.tw-fm-on .tw-fm { display:block; }

  /* Sidans bakgrund alltid djup */
  body.tw-fm-on { background:#0a0a0f !important; }

  /* Content-area: ge plats åt fixerad topbar + status bar + bottom nav */
  body.tw-fm-on .tw-page-content,
  body.tw-fm-on .pb-content-area,
  body.tw-fm-on .pb-page-background,
  body.tw-fm-on .tw-mobh-host {
    padding-top: calc(var(--sb-h, 44px) + var(--top-h, 52px) + 0px) !important;
    padding-bottom: calc(var(--nav-h, 60px) + env(safe-area-inset-bottom, 0px)) !important;
  }
  body.tw-fm-on .pb-wrapper { padding-left:0 !important; padding-right:0 !important; }

  /* Reset inom shellen */
  .tw-fm *,
  .tw-fm *::before,
  .tw-fm *::after { box-sizing:border-box; margin:0; padding:0; }
  .tw-fm a { color:inherit; text-decoration:none; -webkit-tap-highlight-color:transparent; }
  .tw-fm button { font-family:inherit; background:none; border:0; color:inherit; cursor:pointer; -webkit-tap-highlight-color:transparent; }
  .tw-fm img { display:block; max-width:100%; }

  /* ====================================================================
   * SHOUTBOX TICKER (44px) — ersätter den gamla fejk-statusbaren
   * ================================================================== */
  .tw-fm-ticker {
    position:fixed; top:0; left:0; right:0; z-index:610;
    height: calc(var(--sb-h) + env(safe-area-inset-top, 0px));
    padding-top: env(safe-area-inset-top, 0px);
    background:#0a0a0f;
    display:flex; align-items:center; gap:10px;
    padding-left:12px; padding-right:12px;
    border-bottom:1px solid var(--line);
    overflow:hidden;
  }
  .tw-fm-ticker-badge {
    flex:none; display:inline-flex; align-items:center; gap:5px;
    color:var(--primary); font-size:10px; font-weight:800;
    text-transform:uppercase; letter-spacing:.6px;
  }
  .tw-fm-ticker-badge i { font-size:11px; }
  .tw-fm-ticker-vp {
    flex:1; min-width:0; height:100%; overflow:hidden;
    display:flex; align-items:center;
    -webkit-mask-image:linear-gradient(90deg, transparent, #000 14px, #000 calc(100% - 14px), transparent);
            mask-image:linear-gradient(90deg, transparent, #000 14px, #000 calc(100% - 14px), transparent);
  }
  .tw-fm-ticker-track {
    display:inline-block; white-space:nowrap; will-change:transform;
    color:var(--tsecondary); font-size:12.5px; font-weight:600;
    animation:twFmTickerScroll 30s linear infinite;
  }
  .tw-fm-ticker-track b { color:var(--tprimary); font-weight:800; }
  .tw-fm-ticker-track .sep { color:var(--primary); margin:0 12px; }
  @keyframes twFmTickerScroll {
    0%   { transform:translateX(0); }
    100% { transform:translateX(-50%); }
  }
  @media (prefers-reduced-motion: reduce) {
    .tw-fm-ticker-track { animation:none; }
  }

  /* ====================================================================
   * PRELOADER — tunn topp-progressbar vid sidbyte (upplevd snabbhet)
   * ================================================================== */
  .tw-fm-progress {
    position:fixed; top:0; left:0; height:2px; width:0;
    z-index:9999; opacity:0; pointer-events:none;
    background:linear-gradient(90deg,#00c8ff,#00e676);
    box-shadow:0 0 6px rgba(0,200,255,.6);
  }
  .tw-fm-progress.active { width:92%; opacity:1; transition:width 6s cubic-bezier(.15,.75,.2,1); }
  .tw-fm-progress.done   { width:100%; opacity:0; transition:width .2s ease, opacity .35s ease .12s; }

  /* ====================================================================
   * SIDÖVERGÅNG — glidande flikbyte (tryck + swipe), MPA-säker
   * Ut: aktuell sida glider ut åt färdriktningen. In: nästa sida glider
   * in från motsatt kant (in-riktning sätts på <html> före första paint).
   * Bara innehållsytan rör sig; topbar/ticker/bottom-nav ligger kvar.
   * ================================================================== */
  .tw-fm-pageout-fwd  { animation:fmPageOutFwd  .2s cubic-bezier(.4,0,1,1) forwards; }
  .tw-fm-pageout-back { animation:fmPageOutBack .2s cubic-bezier(.4,0,1,1) forwards; }
  /* fill=backwards (ej both): applicerar from-läget före start (ingen blink) MEN lämnar
     inget kvarvarande transform efteråt — annars blir content en containing block som
     bryter position:fixed för t.ex. messenger-trådpanelen. */
  html.fm-nav-in-fwd .pb-page-background,
  html.fm-nav-in-fwd .tw-page-content,
  html.fm-nav-in-fwd .tw-mobh-host  { animation:fmPageInFwd  .28s cubic-bezier(0,0,.2,1) backwards; }
  html.fm-nav-in-back .pb-page-background,
  html.fm-nav-in-back .tw-page-content,
  html.fm-nav-in-back .tw-mobh-host { animation:fmPageInBack .28s cubic-bezier(0,0,.2,1) backwards; }
  @keyframes fmPageOutFwd  { to { opacity:0; transform:translateX(-32px); } }
  @keyframes fmPageOutBack { to { opacity:0; transform:translateX(32px); } }
  @keyframes fmPageInFwd   { from { opacity:0; transform:translateX(32px); }  to { opacity:1; transform:translateX(0); } }
  @keyframes fmPageInBack  { from { opacity:0; transform:translateX(-32px); } to { opacity:1; transform:translateX(0); } }
  @media (prefers-reduced-motion: reduce) {
    .tw-fm-pageout-fwd, .tw-fm-pageout-back,
    html.fm-nav-in-fwd .pb-page-background, html.fm-nav-in-fwd .tw-page-content, html.fm-nav-in-fwd .tw-mobh-host,
    html.fm-nav-in-back .pb-page-background, html.fm-nav-in-back .tw-page-content, html.fm-nav-in-back .tw-mobh-host { animation:none !important; }
  }

  /* ====================================================================
   * BATCH 1 — dölj clutter på mobil + enhetlig near-black bakgrund
   * ================================================================== */
  /* Dölj säsongsnedräkningen ("runners CD") och FORRE-boten på mobil */
  body.tw-fm-on #seasonCountdown,
  body.tw-fm-on .tw-sc,
  body.tw-fm-on #forreBot,
  body.tw-fm-on .tw-bot { display:none !important; }

  /* Ena de stora ytorna med shellens near-black (#0a0a0f) — bort med grå-mismatch */
  body.tw-fm-on,
  body.tw-fm-on .pb-page-background,
  body.tw-fm-on .pb-content-area,
  body.tw-fm-on .tw-page-content,
  body.tw-fm-on .tw-mobh-host { background:#0a0a0f !important; }

  /* ====================================================================
   * ENHETLIG LIVE-SÖK — grupperade resultat (spelare/inlägg/forum)
   * ================================================================== */
  .tw-fm-search.is-searching .tw-fm-se-idle { display:none !important; }
  .tw-fm-se-results { padding:4px 0 24px; overflow-y:auto; -webkit-overflow-scrolling:touch; }
  .tw-fm-se-rsect { margin-bottom:6px; }
  .tw-fm-se-rtitle {
    padding:10px 16px 6px; font-size:10px; font-weight:800; letter-spacing:.6px;
    text-transform:uppercase; color:var(--primary);
  }
  .tw-fm-se-ritem {
    display:flex; align-items:center; gap:11px; padding:9px 16px;
    border-bottom:1px solid var(--line); color:var(--tprimary);
  }
  .tw-fm-se-ritem:active { background:var(--surface-3); }
  .tw-fm-se-rav {
    flex:none; width:38px; height:38px; border:1px solid var(--line);
    background:var(--surface-3); overflow:hidden; display:grid; place-items:center;
  }
  .tw-fm-se-rav img { width:100%; height:100%; object-fit:cover; }
  .tw-fm-se-rav--ph { color:var(--tsecondary); font-size:14px; }
  .tw-fm-se-rmain { flex:1; min-width:0; display:flex; flex-direction:column; gap:2px; }
  .tw-fm-se-rname { font-size:13px; font-weight:700; color:var(--tprimary); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
  .tw-fm-se-rsub { font-size:11px; color:var(--tsecondary); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
  .tw-fm-se-ritem > .fa-chevron-right { color:var(--ttertiary); font-size:12px; flex:none; }

  /* ====================================================================
   * TOPBAR (52px) — fixed, göms vid scroll ned
   * ================================================================== */
  .tw-fm-topbar {
    position:fixed; left:0; right:0; z-index:600;
    top: calc(var(--sb-h) + env(safe-area-inset-top, 0px));
    height:var(--top-h);
    display:flex; align-items:center;
    padding:0 12px; gap:8px;
    background:#0a0a0f;
    border-bottom:1px solid var(--line);
    transition:transform .3s ease;
  }
  .tw-fm-brand {
    margin-right:auto;              /* loggan intill hamburgaren; actions trycks till höger */
    color:var(--primary);
    font-weight:900; font-size:18px; letter-spacing:1px;
  }
  .tw-fm-brand span { color:var(--primary); }
  .tw-fm-actions { display:flex; align-items:center; gap:4px; }
  .tw-fm-icon {
    width:44px; height:44px; display:flex; align-items:center; justify-content:center;
    color:var(--tsecondary); font-size:17px; position:relative; border-radius:0;
  }
  .tw-fm-icon:active { color:var(--primary); background:var(--primary-dim); }
  .tw-fm-icon.tw-fm-menu { font-size:18px; color:var(--tprimary); }
  .tw-fm-dot {
    position:absolute; top:8px; right:8px;
    width:8px; height:8px; border-radius:50%;
    background:var(--danger); border:2px solid #0a0a0f;
  }
  /* Badge med ANTAL (2026-07-15): navbar-pollen sätter data-count — pricken
     växer till en räknare i stället för att bara blinka stum. */
  .tw-fm-dot[data-count] {
    width:auto; height:16px; min-width:16px;
    top:4px; right:2px;
    border-radius:8px;
    display:flex; align-items:center; justify-content:center;
    padding:0 4px;
  }
  .tw-fm-dot[data-count]::after {
    content:attr(data-count);
    color:#fff; font-size:9px; font-weight:800; line-height:1;
    font-variant-numeric:tabular-nums;
  }

  /* göm topbar/nav vid scroll ned */
  body.tw-fm-hide .tw-fm-topbar { transform:translateY(calc(-1 * (var(--sb-h, 44px) + var(--top-h, 52px) + 4px))); }
  body.tw-fm-hide .tw-fm-bottomnav { transform:translateY(calc(var(--nav-h, 60px) + env(safe-area-inset-bottom, 0px) + 4px)); }

  /* ====================================================================
   * BOTTOM NAV (60px) — fixed, göms vid scroll ned
   * ================================================================== */
  .tw-fm-bottomnav {
    position:fixed; left:0; right:0; bottom:0; z-index:600;
    height: calc(var(--nav-h) + env(safe-area-inset-bottom, 0px));
    padding-bottom: env(safe-area-inset-bottom, 0px);
    display:flex; align-items:stretch;
    background:#0a0a0f;
    border-top:1px solid var(--line);
    transition:transform .3s ease;
  }
  .tw-fm-tab {
    flex:1; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:3px;
    color:var(--ttertiary); font-size:10px; font-weight:600; letter-spacing:.3px;
    position:relative; padding-top:2px;
  }
  .tw-fm-tab i { font-size:18px; line-height:1; }
  .tw-fm-tab .tw-fm-tab-av { width:22px; height:22px; border-radius:50%; object-fit:cover; border:1.5px solid transparent; }
  .tw-fm-tab.is-active { color:var(--primary); }
  .tw-fm-tab.is-active .tw-fm-tab-av { border-color:var(--primary); }
  .tw-fm-tab.is-active::after {
    content:""; position:absolute; bottom:0; left:50%; transform:translateX(-50%);
    width:26px; height:2px; background:var(--primary);
  }
  .tw-fm-tab-badge {
    position:absolute; top:4px; left:calc(50% + 7px);
    min-width:15px; height:15px; padding:0 4px;
    background:var(--danger); color:#fff; font-size:9px; font-weight:800;
    display:flex; align-items:center; justify-content:center;
    border:1.5px solid #0a0a0f; line-height:1;
  }

  /* ====================================================================
   * OVERLAY (delas av drawer / create sheet)
   * ================================================================== */
  .tw-fm-overlay {
    position:fixed; inset:0; z-index:690;
    background:rgba(0,0,0,0.6);
    opacity:0; visibility:hidden; transition:opacity .3s ease, visibility .3s ease;
  }
  .tw-fm-overlay.is-open { opacity:1; visibility:visible; }

  /* Lås bakgrundsscroll när en panel är öppen */
  body.tw-fm-locked { overflow:hidden; }

  /* ====================================================================
   * HAMBURGARMENY (slide vänster, 85%)
   * ================================================================== */
  .tw-fm-drawer {
    position:fixed; top:0; left:0; bottom:0; z-index:700;
    width:85%; max-width:340px;
    background:#0d0d14; border-right:1px solid var(--line);
    transform:translateX(-100%); transition:transform .3s ease;
    display:flex; flex-direction:column;
    padding-top: env(safe-area-inset-top, 0px);
    overflow-y:auto; overscroll-behavior:contain;
  }
  .tw-fm-drawer.is-open { transform:translateX(0); }

  .tw-fm-dr-profile {
    display:flex; align-items:center; gap:12px;
    padding:18px 16px; border-bottom:1px solid var(--line);
  }
  .tw-fm-dr-av { width:52px; height:52px; border-radius:50%; object-fit:cover; border:2px solid var(--primary); flex-shrink:0; }
  .tw-fm-dr-id { flex:1; min-width:0; }
  .tw-fm-dr-name { font-size:15px; font-weight:800; color:var(--tprimary); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
  .tw-fm-dr-handle { font-size:12px; color:var(--ttertiary); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
  .tw-fm-dr-chevron { color:var(--ttertiary); font-size:18px; }

  .tw-fm-dr-shortcuts {
    display:flex; gap:8px; padding:14px 16px; border-bottom:1px solid var(--line);
  }
  .tw-fm-dr-sc-title, .tw-fm-dr-sec-title {
    font-size:11px; text-transform:uppercase; letter-spacing:.8px; color:var(--ttertiary);
    padding:14px 16px 8px;
  }
  .tw-fm-dr-sc {
    flex:1; display:flex; flex-direction:column; align-items:center; gap:6px;
    padding:12px 4px; background:var(--surface-2); color:var(--tsecondary);
  }
  .tw-fm-dr-sc i { font-size:20px; color:var(--primary); }
  .tw-fm-dr-sc span { font-size:10px; }

  .tw-fm-dr-nav { display:flex; flex-direction:column; }
  .tw-fm-dr-item {
    display:flex; align-items:center; gap:14px;
    padding:13px 16px; color:var(--tsecondary); font-size:14px; font-weight:600;
  }
  .tw-fm-dr-item:active { background:var(--surface-2); }
  .tw-fm-dr-ic {
    width:32px; height:32px; flex-shrink:0;
    display:flex; align-items:center; justify-content:center;
    background:var(--surface-3); color:var(--primary); font-size:15px;
  }
  .tw-fm-dr-item .tw-fm-dr-label { flex:1; }
  .tw-fm-dr-badge {
    font-size:10px; font-weight:800; padding:2px 7px;
    background:var(--success); color:#04150b; text-transform:uppercase; letter-spacing:.5px;
  }
  .tw-fm-dr-badge--count { background:var(--primary-dim); color:var(--primary); }
  .tw-fm-dr-footer { margin-top:auto; border-top:1px solid var(--line); padding-bottom:18px; }
  .tw-fm-dr-footer .tw-fm-dr-ic { background:transparent; color:var(--ttertiary); }
  .tw-fm-dr-footer .tw-fm-dr-item { color:var(--ttertiary); }

  /* ====================================================================
   * PROFILPANEL (slide höger, helskärm)
   * ================================================================== */
  .tw-fm-profile {
    position:fixed; inset:0; z-index:710;
    background:#0a0a0f;
    transform:translateX(100%); transition:transform .3s ease;
    display:flex; flex-direction:column;
    overflow-y:auto; overscroll-behavior:contain;
  }
  .tw-fm-profile.is-open { transform:translateX(0); }

  .tw-fm-pf-top {
    position:sticky; top:0; z-index:5;
    display:grid; grid-template-columns:auto 1fr auto; align-items:center;
    height: calc(var(--top-h) + env(safe-area-inset-top, 0px));
    padding: env(safe-area-inset-top, 0px) 8px 0;
    background:#0a0a0f; border-bottom:1px solid var(--line);
  }
  .tw-fm-pf-top .tw-fm-actions { gap:2px; }

  .tw-fm-pf-cover {
    position:relative; height:140px; background:#0d0d14;
    display:flex; align-items:center; justify-content:center; overflow:hidden;
  }
  .tw-fm-pf-cover-emoji { font-size:96px; opacity:.15; line-height:1; }
  .tw-fm-pf-cover-cam {
    position:absolute; bottom:10px; right:12px;
    width:34px; height:34px; display:flex; align-items:center; justify-content:center;
    background:rgba(0,0,0,0.55); color:#fff; font-size:14px; border:1px solid var(--line);
  }
  .tw-fm-pf-avatar {
    position:absolute; left:16px; bottom:-24px;
    width:80px; height:80px; border-radius:50%; object-fit:cover;
    border:3px solid var(--primary); background:#0d0d14;
  }

  .tw-fm-pf-body { padding:32px 16px 16px; }
  .tw-fm-pf-name { font-size:20px; font-weight:900; color:var(--tprimary); line-height:1.2; }
  .tw-fm-pf-meta { font-size:13px; margin-top:3px; }
  .tw-fm-pf-meta .h { color:var(--primary); font-weight:700; }
  .tw-fm-pf-meta .t { color:var(--tsecondary); }
  .tw-fm-pf-bio { font-size:13px; color:var(--tsecondary); margin-top:10px; line-height:1.5; }
  .tw-fm-pf-loc { font-size:12px; color:var(--ttertiary); margin-top:8px; display:flex; align-items:center; gap:6px; }

  .tw-fm-pf-stats {
    display:grid; grid-template-columns:repeat(4,1fr);
    margin:16px 0; border:1px solid var(--line);
  }
  .tw-fm-pf-stat { padding:12px 4px; text-align:center; border-right:1px solid var(--line); }
  .tw-fm-pf-stat:last-child { border-right:0; }
  .tw-fm-pf-stat .n { font-size:16px; font-weight:800; color:var(--tprimary); font-variant-numeric:tabular-nums; }
  .tw-fm-pf-stat .l { font-size:10px; text-transform:uppercase; letter-spacing:.5px; color:var(--ttertiary); margin-top:2px; }

  .tw-fm-pf-actions { display:flex; gap:10px; }
  .tw-fm-pf-btn { flex:1; height:40px; display:flex; align-items:center; justify-content:center; gap:7px; font-size:13px; font-weight:700; }
  .tw-fm-pf-btn--primary { background:var(--primary); color:#04222e; }
  .tw-fm-pf-btn--ghost { background:var(--surface-3); color:var(--tprimary); }

  .tw-fm-pf-tabs { display:flex; margin-top:18px; border-bottom:1px solid var(--line); }
  .tw-fm-pf-tab {
    flex:1; padding:12px 4px; text-align:center; font-size:12px; font-weight:700;
    text-transform:uppercase; letter-spacing:.5px; color:var(--ttertiary);
    border-bottom:2px solid transparent; margin-bottom:-1px;
  }
  .tw-fm-pf-tab.is-active { color:var(--primary); border-bottom-color:var(--primary); }

  .tw-fm-pf-grid { display:grid; grid-template-columns:1fr 1fr; gap:1px; background:var(--line); margin-top:1px; }
  .tw-fm-pf-cell {
    height:120px; background:var(--surface-2);
    display:flex; flex-direction:column; align-items:center; justify-content:center; gap:6px;
    color:var(--ttertiary); font-size:12px; text-align:center; padding:8px;
  }
  .tw-fm-pf-cell i { font-size:22px; color:var(--primary); opacity:.85; }
  .tw-fm-pf-pane { display:none; }
  .tw-fm-pf-pane.is-active { display:block; }
  .tw-fm-pf-empty { padding:40px 16px; text-align:center; color:var(--ttertiary); font-size:13px; }
  .tw-fm-pf-empty i { font-size:26px; opacity:.3; display:block; margin-bottom:10px; }

  /* ====================================================================
   * SÖKSIDA (helskärm, direkt)
   * ================================================================== */
  .tw-fm-search {
    position:fixed; inset:0; z-index:705;
    background:#0a0a0f;
    display:none; flex-direction:column;
    overflow-y:auto; overscroll-behavior:contain;
  }
  .tw-fm-search.is-open { display:flex; }

  .tw-fm-se-bar {
    position:sticky; top:0; z-index:5;
    display:flex; align-items:center; gap:10px;
    padding: calc(env(safe-area-inset-top, 0px) + 10px) 12px 10px;
    background:#0a0a0f; border-bottom:1px solid var(--line);
  }
  .tw-fm-se-field {
    flex:1; display:flex; align-items:center; gap:9px;
    height:40px; padding:0 12px; background:var(--surface-3);
  }
  .tw-fm-se-field i { color:var(--ttertiary); font-size:14px; }
  .tw-fm-se-input {
    flex:1; background:transparent; border:0; outline:0;
    color:var(--tprimary); font-size:14px;
  }
  .tw-fm-se-input::placeholder { color:var(--ttertiary); }
  .tw-fm-se-close { width:34px; height:34px; display:flex; align-items:center; justify-content:center; color:var(--tsecondary); font-size:16px; }

  .tw-fm-se-section-title {
    font-size:11px; text-transform:uppercase; letter-spacing:.8px; color:var(--ttertiary);
    padding:18px 16px 8px;
  }
  .tw-fm-se-sub { font-size:11px; color:var(--ttertiary); padding:0 16px 6px; }

  .tw-fm-se-recent {
    display:flex; align-items:center; gap:12px; padding:11px 16px; color:var(--tsecondary); font-size:14px;
  }
  .tw-fm-se-recent .ic { width:20px; text-align:center; color:var(--ttertiary); }
  .tw-fm-se-recent .tx { flex:1; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
  .tw-fm-se-recent .rm { width:28px; text-align:center; color:var(--ttertiary); font-size:13px; }
  .tw-fm-se-empty { padding:14px 16px; color:var(--tmuted); font-size:13px; }

  .tw-fm-se-dna { padding:0 0 24px; }
  .tw-fm-se-cards {
    display:flex; gap:10px; overflow-x:auto; padding:8px 16px 4px;
    scrollbar-width:none;
  }
  .tw-fm-se-cards::-webkit-scrollbar { display:none; }
  .tw-fm-se-card {
    flex:0 0 120px; width:120px;
    background:var(--surface-2); border:1px solid var(--line);
    padding:14px 10px; display:flex; flex-direction:column; align-items:center; gap:6px; text-align:center;
  }
  .tw-fm-se-card .av { width:40px; height:40px; border-radius:50%; object-fit:cover; background:var(--surface-4); }
  .tw-fm-se-card .nm { font-size:13px; font-weight:700; color:var(--tprimary); white-space:nowrap; max-width:100%; overflow:hidden; text-overflow:ellipsis; }
  .tw-fm-se-card .mt { font-size:12px; font-weight:800; color:var(--primary); }
  .tw-fm-se-card .st { font-size:10px; color:var(--ttertiary); line-height:1.3; }
  .tw-fm-se-card .add {
    margin-top:4px; width:100%; padding:6px 0; font-size:11px; font-weight:700;
    background:var(--primary-dim); color:var(--primary); text-transform:uppercase; letter-spacing:.5px;
  }
  .tw-fm-se-dna-empty { padding:14px 16px; color:var(--tmuted); font-size:13px; }

  /* ====================================================================
   * SKAPA-MENY (bottom sheet)
   * ================================================================== */
  .tw-fm-sheet {
    position:fixed; left:0; right:0; bottom:0; z-index:700;
    background:#0d0d14; border-top:1px solid var(--line);
    transform:translateY(100%); transition:transform .3s ease;
    padding:10px 14px calc(20px + env(safe-area-inset-bottom, 0px));
  }
  .tw-fm-sheet.is-open { transform:translateY(0); }
  .tw-fm-sheet-handle { width:36px; height:4px; background:var(--surface-4); margin:4px auto 14px; }
  .tw-fm-sheet-title { font-size:13px; font-weight:800; text-transform:uppercase; letter-spacing:.6px; color:var(--tsecondary); padding:0 2px 10px; }
  .tw-fm-sheet-opt { display:flex; align-items:center; gap:14px; padding:12px 4px; }
  .tw-fm-sheet-opt:active { background:var(--surface-2); }
  .tw-fm-sheet-ic {
    width:44px; height:44px; flex-shrink:0;
    display:flex; align-items:center; justify-content:center;
    background:var(--surface-3); color:var(--primary); font-size:18px;
  }
  .tw-fm-sheet-tx { flex:1; min-width:0; }
  .tw-fm-sheet-tx .nm { font-size:14px; font-weight:700; color:var(--tprimary); }
  .tw-fm-sheet-tx .ds { font-size:12px; color:var(--ttertiary); margin-top:1px; }

  /* ====================================================================
   * HEM-FLÖDET (nytt, scopat .tw-fm-feed)
   * ================================================================== */
  .tw-fm-feed { padding: calc(var(--sb-h, 44px) + var(--top-h, 52px) + 8px) 0 calc(var(--nav-h, 60px) + 16px); }
  .tw-fm-feed-pad { padding-left:14px; padding-right:14px; }

  /* Story-rad */
  .tw-fm-stories { display:flex; gap:12px; overflow-x:auto; padding:4px 14px 14px; scrollbar-width:none; }
  .tw-fm-stories::-webkit-scrollbar { display:none; }
  .tw-fm-story { flex:0 0 auto; display:flex; flex-direction:column; align-items:center; gap:6px; width:62px; }
  .tw-fm-story-ring {
    width:58px; height:58px; border-radius:50%; padding:2px;
    background:var(--primary); /* 2026-07-15: solid ring i st f dekorativ gradient (bibeln: gradient bara i data-fills) */
    display:flex; align-items:center; justify-content:center;
  }
  .tw-fm-story-ring--add { background:var(--surface-4); }
  .tw-fm-story-inner {
    width:100%; height:100%; border-radius:50%;
    background:var(--surface-2); border:2px solid #0a0a0f;
    display:flex; align-items:center; justify-content:center; font-size:22px; overflow:hidden;
  }
  .tw-fm-story-inner img { width:100%; height:100%; object-fit:cover; border-radius:50%; }
  .tw-fm-story-name { font-size:10px; color:var(--tsecondary); max-width:100%; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
  .tw-fm-story-add-ico { font-size:18px; color:var(--primary); }

  /* Generella kort */
  .tw-fm-card { background:var(--surface-2); border:1px solid var(--line); margin:0 14px 12px; }
  .tw-fm-card-tag {
    display:inline-block; font-size:10px; font-weight:800; text-transform:uppercase; letter-spacing:.6px;
    color:var(--primary); background:var(--primary-dim); padding:4px 9px; margin:12px 12px 0;
  }
  .tw-fm-card-body { padding:10px 12px 12px; }
  .tw-fm-card-text { font-size:14px; color:var(--tsecondary); line-height:1.5; }

  /* LFG-kort */
  .tw-fm-lfg { display:block; background:var(--surface-2); border-left:3px solid var(--success); margin:0 14px 12px; padding:14px 14px 14px; }
  .tw-fm-lfg-head { display:flex; align-items:center; gap:8px; }
  .tw-fm-lfg-dot { width:9px; height:9px; border-radius:50%; background:var(--success); animation:tw-fm-pulse 1.6s infinite; }
  .tw-fm-lfg-label { font-size:11px; font-weight:800; letter-spacing:.6px; color:var(--success); text-transform:uppercase; }
  .tw-fm-lfg-time { margin-left:auto; font-size:11px; color:var(--ttertiary); }
  .tw-fm-lfg-info { font-size:14px; color:var(--tprimary); font-weight:600; margin:8px 0 3px; }
  .tw-fm-lfg-rank { font-size:12px; color:var(--ttertiary); }
  .tw-fm-lfg-btn {
    display:block; width:100%; margin-top:12px; padding:11px 0; text-align:center;
    background:var(--success); color:#04150b; font-size:13px; font-weight:800; text-transform:uppercase; letter-spacing:.5px;
  }
  @keyframes tw-fm-pulse { 0%,100%{opacity:1;transform:scale(1);} 50%{opacity:.45;transform:scale(.8);} }

  /* CTA-kort (2026-07-15): arliga kort utan fejkdata - EN visuell krok var.
     Ersatter gamla fejk-matchkortet ("#1 Victory Royale" + "-"-stats + doda
     reaktionsknappar) och platshallar-topplistan. */
  .tw-fm-card--cta { display:block; }
  .tw-fm-cta-row { display:flex; align-items:center; gap:12px; }
  .tw-fm-cta-ico {
    width:38px; height:38px; flex:0 0 auto;
    display:flex; align-items:center; justify-content:center;
    background:var(--primary-dim); color:var(--primary); font-size:16px;
  }
  .tw-fm-cta-ico--forum { background:color-mix(in srgb, var(--success) 12%, transparent); color:var(--success); }
  .tw-fm-cta-ico--gold { background:color-mix(in srgb, var(--warning) 12%, transparent); color:var(--warning); }
  .tw-fm-cta-tx { flex:1; min-width:0; display:flex; flex-direction:column; gap:2px; }
  .tw-fm-cta-t { font-size:14px; font-weight:700; color:var(--tprimary); }
  .tw-fm-cta-s { font-size:11.5px; color:var(--ttertiary); }
  .tw-fm-cta-cev { flex:0 0 auto; color:var(--ttertiary); font-size:12px; }

  /* ====================================================================
   * NEUTRALISERA GAMLA MOBIL-CHROME (≤768px) — den gamla mobilversionen
   * ersätts fullständigt. Markup behålls i PHP (reversibelt) men visas ej.
   * ================================================================== */
  body.tw-fm-on .tw-mob-top-util,
  body.tw-fm-on .tw-fbtop,
  body.tw-fm-on .tw-mobile-bottom-nav,
  body.tw-fm-on #twMobBottomNav,
  body.tw-fm-on #twMobBottomNavGuest,
  body.tw-fm-on .tw-mob-hub-trigger,
  body.tw-fm-on .tw-mob-hub-menu,
  body.tw-fm-on .tw-mob-hub-backdrop,
  body.tw-fm-on .tw-fbcreate,
  body.tw-fm-on .tw-fbcreate-backdrop,
  body.tw-fm-on .tw-mob-sheet,
  body.tw-fm-on .tw-mob-sheet-backdrop,
  body.tw-fm-on .tw-mob-notif-sheet,
  body.tw-fm-on .tw-mob-notif-backdrop,
  body.tw-fm-on .tw-mob-play-strip,
  body.tw-fm-on .tw-mobh,
  body.tw-fm-on .tw-mob-shout-shell {
    display:none !important;
  }

  /* ====================================================================
   * STAFF-VERKTYG + CREW CHAT flyttade in i hamburgarmenyn.
   * De flytande launchers (bottom-right) täckte bottenmenyn → göm dem.
   * Panelerna öppnas i stället via menyalternativ (samma JS-triggers).
   * ================================================================== */
  body.tw-fm-on .tw-staff-pill,
  body.tw-fm-on .tw-cc-launcher { display:none !important; }

  /* (2026-07-15: dott #forreStaffBar-block borttaget - elementet finns inte langre i vyerna) */
}

/* ============================================================================
 * GLOBALT MOBILLAGER (alla sidor) — spec rule #2: en enda mörk yta #0a0a0f.
 * + mjuk sid-entré (CSS, ingen script-brytande AJAX-swap).
 * Allt scopat body.tw-fm-on ≤768px → desktop orört.
 * ========================================================================== */
@media (max-width: 768px) {
  body.tw-fm-on,
  body.tw-fm-on .pb-page-background,
  body.tw-fm-on .pb-content-area,
  body.tw-fm-on .tw-page-content,
  body.tw-fm-on main,
  body.tw-fm-on .tw-mobh,
  body.tw-fm-on .tw-mobh-host {
    background: #0a0a0f !important;
  }

  /* Mjuk sid-entré vid sidladdning.
     OBS: fill MÅSTE vara 'backwards', ej 'both'. Med 'both' behåller elementet
     to-lägets USED value för transform = matrix(1,0,0,1,0,0) (ej keyword 'none'),
     vilket gör content till en containing block och bryter position:fixed på mobil
     (t.ex. messenger-trådpanelen, ev. andra fixed-element). */
  body.tw-fm-on .tw-page-content,
  body.tw-fm-on .pb-content-area {
    animation: tw-fm-pagein .28s ease backwards;
  }
  @keyframes tw-fm-pagein {
    from { opacity: 0; transform: translateY(6px); }
    to   { opacity: 1; transform: none; }
  }
}