/* ================================================================
   FlirtDojo shared rail (marketing site + chat app).
   Collapsed 72px icon rail; html.railopen expands to 236px with
   labels. Mobile (<880px): off-canvas drawer toggled by #burger /
   #railToggle, veil behind (#railVeil).
   Color hooks: falls back to sane darks if a surface lacks the vars.
   ================================================================ */
/* KANONISK NAV-PALETTE (2026-07-10, bruger: "forskellige color schemes og
   fonts"): nav'en EJER sine tokens. Custom properties nedarves, så ALLE
   descendant-regler (rail-items, spillerkort, sitets ddmenu/CTA'er) resolver
   ens her — uanset om sidens eget tema er navy (site) eller lilla (app).
   Værdierne = appens brand-identitet. Fonten sættes eksplicit af samme grund. */
#fdrail,.fdtb{
  /* Kanonisk = SITETS navy-palette (bruger-beslutning: 'det var det gode') */
  --bg:#0a0d14; --bg2:#0e1220; --bg-2:#0e1220; --card:#131a2b; --card2:#182136;
  --line:rgba(255,255,255,.08); --line2:rgba(255,255,255,.14);
  --text:#eef1f7; --ink:#eef1f7; --muted:#97a3b8; --dim:#6b7688;
  --brand:#ff3d71; --brand-2:#ff8a3d; --heat1:#ff3d71; --heat2:#ff8a3d;
  --ice:#5bc9f5; --gold:#f5c95b; --ok:#28c76f;
  font-family:ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  font-size:14.5px; line-height:1.5;
}
#fdrail{
  --fd-bg:var(--bg2, var(--bg-2, #0e1220));
  --fd-line:var(--line, rgba(255,255,255,.08));
  --fd-ink:var(--text, var(--ink, #eef1f7));
  --fd-mut:var(--muted, #97a3b8);
  --fd-card:var(--card, #131a2b);
  position:fixed; inset:0 auto 0 0; z-index:70; width:72px;
  display:flex; flex-direction:column; gap:6px; padding:14px 12px;
  background:var(--fd-bg); border-right:1px solid var(--fd-line);
  overflow-y:auto; overflow-x:hidden; scrollbar-width:none;
  transition:width .18s ease, transform .22s ease}
#fdrail::-webkit-scrollbar{display:none}
html.railopen #fdrail{width:236px}
#fdrail a,#fdrail #railToggle{display:flex; align-items:center; gap:13px; min-height:44px;
  border-radius:13px; color:var(--fd-mut); padding:0 13px; white-space:nowrap;
  background:none; border:0; cursor:pointer; font:inherit; text-decoration:none;
  transition:background .15s, color .15s; flex:none}
#fdrail svg{flex:none}
#fdrail b{font-size:14px; font-weight:700; opacity:0; transition:opacity .14s; pointer-events:none}
html.railopen #fdrail b{opacity:1}
#fdrail a:hover,#fdrail #railToggle:hover{color:var(--fd-ink); background:var(--fd-card)}
#fdrail a.on{color:var(--fd-ink); background:var(--fd-card); border:1px solid var(--fd-line)}
#fdrail .rail-logo{margin-bottom:10px}
#fdrail .rail-logo b{font-size:16px; font-weight:900;
  background:linear-gradient(135deg,#ff3d71,#ff8a3d);
  -webkit-background-clip:text; background-clip:text; color:transparent}
/* Separatoren ankrer hjælpe-gruppen (Sådan virker det/FAQ/Kontakt/Om os) i
   BUNDEN af railen (2026-07-15) — produktnav øverst, servicelinks nederst. */
#fdrail .rail-sep{display:block; height:1px; background:var(--fd-line); margin:auto 4px 8px; flex:none}
#fdrail .rail-prem{color:#f5c95b}  /* Premium: menupunkt i guld (flyttet op fra bunden 2026-07-15) */
#railVeil{display:none}

/* Mobile: off-canvas drawer (forced expanded) */
@media (max-width:879px){
  #fdrail{width:236px; transform:translateX(-105%); box-shadow:0 18px 50px rgba(0,0,0,.45)}
  #fdrail b{opacity:1}
  html.raildrawer #fdrail{transform:none}
  #railVeil{display:block; position:fixed; inset:0; z-index:65; background:rgba(0,0,0,.55);
    opacity:0; pointer-events:none; transition:opacity .22s}
  html.raildrawer #railVeil{opacity:1; pointer-events:auto}
  #fdrail #railToggle{display:none}
}

/* ===================================================================
   Fælles topbar-FRAME (fdtb): samme motor for sitets .tb og appens
   .topbar (2026-07-10). Fladerne beholder egne layout-props (fixed/
   sticky/grid) men højde, baggrund, kant, burger og logo er delte.
   =================================================================== */
.fdtb{display:flex;align-items:center;gap:12px;height:60px;padding:0 16px;
  background:var(--bg2,#14101a);border-bottom:1px solid var(--line,#342a44)}
.fdtb-burger{display:flex;align-items:center;justify-content:center;width:38px;height:38px;flex:none;
  background:none;border:0;color:var(--text,#fff);cursor:pointer;border-radius:10px}
.fdtb-burger:hover{background:rgba(255,255,255,.06)}
.fdtb-logo{display:flex;align-items:center;gap:9px;font-weight:900;font-size:1.12rem;
  letter-spacing:-.02em;text-decoration:none;color:var(--text,#fff);flex:none}
.fdtb-logo-txt{background:linear-gradient(135deg,#ff6a3d,#ff3d81);
  -webkit-background-clip:text;background-clip:text;color:transparent}
@media (max-width:899px){.fdtb-logo-txt{display:none}}

/* ---- Delt spillerkort (fd_playercard) + XP-ring: bruges af appens rail,
   sitets rail og appens topbar-chip. Flyttet fra chat.css 2026-07-10. ---- */
.pc-av{position:relative;width:38px;height:38px;border-radius:50%;padding:3px;
  background:conic-gradient(var(--belt,#e8e8e8) var(--xpp,0%), var(--line,#342a44) 0);
  display:flex;align-items:center;justify-content:center}
.pc-av>span,.pc-av>img,.pc-av>svg{width:100% !important;height:100% !important;
  object-fit:cover;border-radius:50% !important;display:block}
.pc-av b{position:absolute;right:-5px;bottom:-4px;background:linear-gradient(135deg,#ffd34d,var(--brand-2,#ff8a3d));
  color:#1b1622;font-size:9.5px;font-weight:900;min-width:16px;height:16px;border-radius:9px;
  display:flex;align-items:center;justify-content:center;padding:0 3px;border:1.5px solid var(--bg-2,#161119)}
/* Kort 2.0 (FIFA-kort-dramaturgi): identitet øverst (portræt/navn/bælte),
   fremdrift (XP-bar), beviser (streak/sejre), gulerod nederst. */
.railcard{display:flex;flex-direction:column;align-items:center;text-align:center;gap:3px;
  padding:16px 12px 13px;margin:8px 4px 4px;border-radius:18px;
  text-decoration:none;color:inherit;background:rgba(255,255,255,.04);border:1px solid var(--line,#342a44)}
.railcard:hover{border-color:var(--brand,#ff3d7f);background:rgba(255,61,127,.06)}
.railcard .rc-av{width:92px;height:92px;flex:none;padding:4px;margin-bottom:5px}
.railcard .rc-av b{font-size:12.5px;min-width:22px;height:22px;border-radius:11px;right:-2px;bottom:-1px}
.rc-name{font-size:15.5px;font-weight:900;display:flex;align-items:center;gap:5px;max-width:100%}
.rc-name .rc-vip{font-style:normal;font-size:13px}
.rc-belt{font-size:11px;font-weight:900;letter-spacing:1px;text-transform:uppercase}
.rc-bar{width:100%;height:7px;border-radius:99px;background:var(--line,#342a44);overflow:hidden;margin-top:6px}
.rc-bar i{display:block;height:100%;border-radius:99px;transition:width .5s cubic-bezier(.34,1.56,.64,1)}
.rc-xp{font-style:normal;font-size:10.5px;color:var(--muted,#9d93ad);margin-top:1px}
.rc-proof{display:flex;gap:12px;font-size:12.5px;font-weight:800;margin-top:5px}
.rc-proof u{text-decoration:none}
.rc-next{font-style:normal;font-size:11px;line-height:1.4;color:var(--muted,#9d93ad);margin-top:5px}
/* Dagens udfordring: det daglige hook der forankrer bunden af railen */
.railquest{margin-top:auto;display:flex;flex-direction:column;gap:2px;text-align:left;text-decoration:none;color:inherit;
  padding:10px 12px;margin-left:4px;margin-right:4px;border-radius:12px;border:1px dashed var(--line,#342a44)}
.railquest b{font-size:9.5px;font-weight:900;letter-spacing:1px;text-transform:uppercase;color:var(--brand,#ff3d7f)}
.railquest span{font-size:12.5px;font-weight:700;line-height:1.3}
.railquest i{font-style:normal;font-size:11.5px;font-weight:900;color:#ffd34d}
.railquest.done{border-style:solid;opacity:.8}
.railquest.done i{color:var(--ok,#28c76f)}
/* Kollapset rail (72px): kun portrættet */
html:not(.railopen) .railcard{padding:6px 4px;margin-left:2px;margin-right:2px}
html:not(.railopen) .railcard .rc-av{width:44px;height:44px;padding:3px;margin-bottom:0}
html:not(.railopen) .railcard .rc-name,html:not(.railopen) .railcard .rc-belt,
html:not(.railopen) .railcard .rc-bar,html:not(.railopen) .railcard .rc-xp,
html:not(.railopen) .railcard .rc-proof,html:not(.railopen) .railcard .rc-next{display:none}
html:not(.railopen) .railquest{display:none}