/* ============================================================
   LAMA SCREENER — Thème "Deck Data" (override global)
   Dark neutre facon Collectr/TCGplayer + identite Yu-Gi-Oh par
   le CODE COULEUR DE CADRE. Un seul accent (cyan). Chrome minimal.
   Charge APRES le <style> inline de chaque page : re-skinne tout
   en redefinissant les variables + composants.
   Valide par Matt le 2026-10-03 (maquette /static/redesign.html).
   ============================================================ */
@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@500;600;700&family=Inter:wght@400;500;600&display=swap');

:root{
  --bg:#0b0d12; --bg2:#0e1118; --card:#12151d; --card2:#171b25;
  --line:rgba(255,255,255,.08); --line-strong:rgba(255,255,255,.15);
  --txt:#e8edf4; --mut:#8b93a4; --dim:#5b6373;
  --acc:#29d3d3; --acc-d:#16bdbd; --acc-ink:#06211f;
  /* alias des anciennes variables neon pour recolorer les pages existantes */
  --magenta:#ff6b81; --violet:#8a7bff; --green:#37d39b; --amber:#e6b454;
  --gold:#e6b454; --gold-d:#c69a33; --good:#37d39b; --bad:#ff6b81; --cyan:#29d3d3;
  --fdisp:'Space Grotesk',system-ui,sans-serif; --fdata:'Inter',system-ui,sans-serif;
  /* couleurs de CADRE Yu-Gi-Oh */
  --f-normal:#c9a24b; --f-effect:#c0652e; --f-ritual:#4c74c9; --f-fusion:#8a52b5;
  --f-synchro:#cdd2db; --f-xyz:#8a93a4; --f-link:#2f86b0;
  --f-spell:#17a589; --f-trap:#c33f7e; --f-token:#8a8f99; --f-pendulum:#2aa17d;
}

/* ---------- frame mapping (utilitaires opt-in via data-frame) ---------- */
[data-frame]{--f:var(--f-token)}
[data-frame=normal]{--f:var(--f-normal)} [data-frame=effect]{--f:var(--f-effect)}
[data-frame=ritual]{--f:var(--f-ritual)} [data-frame=fusion]{--f:var(--f-fusion)}
[data-frame=synchro]{--f:var(--f-synchro)} [data-frame=xyz]{--f:var(--f-xyz)}
[data-frame=link]{--f:var(--f-link)} [data-frame=spell]{--f:var(--f-spell)}
[data-frame=trap]{--f:var(--f-trap)} [data-frame=token]{--f:var(--f-token)}
[data-frame=normal_pendulum],[data-frame=effect_pendulum],[data-frame=ritual_pendulum],
[data-frame=xyz_pendulum],[data-frame=synchro_pendulum],[data-frame=fusion_pendulum],
[data-frame=link_pendulum]{--f:var(--f-pendulum)}
/* puce de type */
.fchip{display:inline-flex;align-items:center;gap:6px;font-family:var(--fdisp);font-size:10.5px;font-weight:600;
  letter-spacing:.3px;padding:3px 8px;border-radius:999px;white-space:nowrap;color:var(--f);
  background:color-mix(in srgb,var(--f) 16%,transparent);border:1px solid color-mix(in srgb,var(--f) 34%,transparent);}
/* barre verticale de cadre dans une cellule carte (opt-in) */
tr[data-frame] .cardcell,li[data-frame] .cardcell{position:relative;padding-left:12px;}
tr[data-frame] .cardcell::before,li[data-frame] .cardcell::before{content:'';position:absolute;left:0;top:50%;
  transform:translateY(-50%);width:4px;height:34px;border-radius:3px;background:var(--f);}
/* pastille de legende */
.fdot{width:11px;height:11px;border-radius:4px;background:var(--f);box-shadow:0 0 0 1px color-mix(in srgb,var(--f) 60%,transparent);display:inline-block;}

/* ---------- base ---------- */
body{
  font-family:var(--fdata) !important; color:var(--txt) !important;
  background:
    radial-gradient(900px 520px at 12% -6%, rgba(41,211,211,.06), transparent 60%),
    radial-gradient(900px 600px at 100% 106%, rgba(138,123,255,.05), transparent 60%),
    linear-gradient(180deg,#0b0d12,#0c0e15 60%,#0b0d12) !important;
  min-height:100vh; -webkit-font-smoothing:antialiased;
}
/* decor neon → neutralise */
.scan,.grid-floor{display:none !important;}
.bg{background:transparent !important;opacity:1 !important;}
body > .grid{display:none !important;}

/* ---------- titres ---------- */
h1,h2,.title,.hero h1{font-family:var(--fdisp) !important;letter-spacing:.2px;font-weight:700;}
.title{color:var(--txt) !important;text-shadow:none !important;}
.neon,.neon.pink{color:var(--txt) !important;text-shadow:none !important;background:none !important;-webkit-text-fill-color:var(--txt) !important;}
.neon.pink{color:var(--acc) !important;-webkit-text-fill-color:var(--acc) !important;}

/* ---------- header / nav ---------- */
header{
  background:color-mix(in srgb,var(--bg) 82%,transparent) !important;
  border-bottom:1px solid var(--line) !important; box-shadow:none !important; backdrop-filter:blur(12px);
}
header h1{font-family:var(--fdisp) !important;color:var(--txt) !important;font-weight:700;}
header h1 .dot{background:var(--acc) !important;box-shadow:none !important;}
header h1 b{font-family:var(--fdisp) !important;background:none !important;-webkit-background-clip:border-box !important;
  background-clip:border-box !important;color:var(--acc) !important;-webkit-text-fill-color:var(--acc) !important;}
header a{font-family:var(--fdisp) !important;color:var(--mut) !important;border:1px solid transparent !important;
  border-radius:9px !important;background:transparent !important;letter-spacing:.2px;font-weight:500;}
header a:hover,header a.on{border-color:var(--line) !important;color:var(--txt) !important;background:var(--card) !important;}

/* ---------- boutons ---------- */
.btn,button.btn{font-family:var(--fdisp) !important;text-transform:none;letter-spacing:.2px;font-weight:600;
  color:var(--txt) !important;border:1px solid var(--line) !important;border-radius:10px !important;
  background:var(--card) !important;box-shadow:none !important;transition:.14s;}
.btn:hover,button.btn:hover{border-color:var(--acc) !important;transform:translateY(-1px);}
.btn:active{transform:translateY(0);}
.btn.ghost{background:transparent !important;color:var(--mut) !important;border-color:var(--line) !important;}
.btn.ghost.on{border-color:var(--acc) !important;color:var(--acc) !important;}
.btn.solid{color:var(--acc-ink) !important;border:1px solid var(--acc-d) !important;
  background:linear-gradient(180deg,var(--acc),var(--acc-d)) !important;box-shadow:none !important;}
.btn.solid.alt{color:#2a0f16 !important;background:linear-gradient(180deg,#ff8c9c,var(--magenta)) !important;border-color:var(--magenta) !important;}
.btn.solid.ok{color:#062018 !important;background:linear-gradient(180deg,#53e3af,var(--good)) !important;border-color:var(--good) !important;}
.btn.rm,.btn.danger{background:color-mix(in srgb,var(--bad) 10%,transparent) !important;border-color:color-mix(in srgb,var(--bad) 45%,transparent) !important;color:var(--bad) !important;box-shadow:none !important;}
.btn.on{color:#062018 !important;background:linear-gradient(180deg,#53e3af,var(--good)) !important;border:1px solid var(--good) !important;}

/* onglets */
.tab{font-family:var(--fdisp) !important;color:var(--mut) !important;border:1px solid var(--line) !important;background:transparent !important;font-weight:500;}
.tab.on{border-color:var(--acc) !important;color:var(--acc) !important;background:color-mix(in srgb,var(--acc) 12%,transparent) !important;}

/* ---------- panneaux / cartes ---------- */
.panel,.kpi,.deck,.c,.prog,.sc,.sugg .sc{
  background:var(--card) !important;border:1px solid var(--line) !important;border-radius:14px !important;
  box-shadow:none !important;}
.panel h2,.kpi .lab,.deck .meta,.panel h2 .sp{font-family:var(--fdisp) !important;color:var(--mut) !important;font-weight:600;letter-spacing:.3px;}
.kpi .val{font-family:var(--fdisp) !important;color:var(--txt) !important;font-weight:700;}
.kpi.eu .val,.kpi.own .val{color:var(--good) !important;}
.kpi.us .val{color:var(--acc) !important;}
.kpi.miss .val{color:var(--magenta) !important;}
.deck{transition:transform .14s,border-color .14s,box-shadow .14s;}
.deck:hover{border-color:var(--acc) !important;transform:translateY(-2px);box-shadow:0 10px 30px rgba(0,0,0,.45) !important;}
.deck .nm,.pct{font-family:var(--fdisp) !important;}
.deck .pct,.prog .big,.num{color:var(--acc) !important;}

/* barres de progression */
.bar,.prog .bar{background:rgba(255,255,255,.08) !important;}
.bar > i,.prog .bar > i{background:linear-gradient(90deg,var(--acc),var(--good)) !important;}

/* ---------- inputs ---------- */
input,select,textarea,.search input,.search select{
  background:var(--bg2) !important;border:1px solid var(--line) !important;color:var(--txt) !important;
  font-family:var(--fdata) !important;border-radius:9px;}
input:focus,select:focus,textarea:focus{outline:none !important;border-color:var(--acc) !important;
  box-shadow:0 0 0 3px color-mix(in srgb,var(--acc) 18%,transparent) !important;}

/* ---------- tableaux ---------- */
th{font-family:var(--fdisp) !important;color:var(--mut) !important;border-bottom:1px solid var(--line) !important;font-weight:600;letter-spacing:.5px;}
td{border-bottom:1px solid var(--line) !important;}
.cardcell .sub{font-family:var(--fdata) !important;color:var(--dim) !important;}
a.cn{color:var(--txt) !important;} a.cn:hover{color:var(--acc) !important;}
tr:hover td{background:var(--card2) !important;}

/* ---------- images / placeholders ---------- */
.imgwrap,.cardcell img,.c .imgwrap,.covthumb,.deck .cover,.sc .imgwrap{background:var(--bg2) !important;}

/* tags d'etat */
.tag.ok,.badge{background:color-mix(in srgb,var(--good) 15%,transparent) !important;color:var(--good) !important;}
.tag.no{background:color-mix(in srgb,var(--bad) 15%,transparent) !important;color:var(--bad) !important;}
.tag.pa{background:color-mix(in srgb,var(--amber) 16%,transparent) !important;color:var(--amber) !important;}
.own{color:var(--good) !important;} .mis,.miss{color:var(--magenta) !important;}
.c.have{border-color:color-mix(in srgb,var(--good) 55%,transparent) !important;}
.c.part{border-color:color-mix(in srgb,var(--amber) 50%,transparent) !important;}
.c.miss{border-color:color-mix(in srgb,var(--bad) 45%,transparent) !important;}

/* liens / divers */
a{color:var(--acc);}
.empty,.chartempty,.count,.meta,.sec,.back,.lbl,.prog .lbl,.small,.mut{color:var(--mut) !important;}
.stat{background:var(--card2) !important;border:1px solid var(--line) !important;border-radius:14px !important;}
.stat .v{font-family:var(--fdisp) !important;color:var(--acc) !important;text-shadow:none !important;}
.stat .l{color:var(--mut) !important;}
.panel::before{background:linear-gradient(90deg,var(--acc),transparent) !important;opacity:.5 !important;}
.panel h2{color:var(--txt) !important;}
.tag{background:rgba(255,255,255,.07) !important;color:var(--mut) !important;}
code{background:rgba(255,255,255,.07) !important;color:var(--acc) !important;border-radius:4px;padding:1px 5px;}
.switch input,input[type=checkbox]{accent-color:var(--acc) !important;}
.deck .cover .fade{background:linear-gradient(180deg,transparent 45%,rgba(0,0,0,.6)) !important;}
.deck .cover .ph{color:var(--mut) !important;font-family:var(--fdisp) !important;}
.qbadge{background:color-mix(in srgb,var(--bg) 85%,transparent) !important;border:1px solid var(--line) !important;color:var(--txt) !important;font-family:var(--fdisp) !important;}

/* ---------- login / signup ---------- */
.card{background:var(--card) !important;border:1px solid var(--line) !important;backdrop-filter:none !important;box-shadow:0 12px 34px rgba(0,0,0,.5) !important;}
.card::before{background:linear-gradient(90deg,var(--acc),transparent) !important;}
.brand,.logo{font-family:var(--fdisp) !important;color:var(--txt) !important;}
.brand b,.logo b{font-family:var(--fdisp) !important;background:none !important;-webkit-background-clip:border-box !important;background-clip:border-box !important;color:var(--acc) !important;-webkit-text-fill-color:var(--acc) !important;}
.brand .dot,.logo .dot{background:var(--acc) !important;box-shadow:none !important;}
p.sub,.foot{font-family:var(--fdata) !important;color:var(--mut) !important;}
.card button,form.card button{color:var(--acc-ink) !important;background:linear-gradient(180deg,var(--acc),var(--acc-d)) !important;box-shadow:none !important;font-family:var(--fdisp) !important;border:1px solid var(--acc-d) !important;font-weight:600;}
.card button:hover{filter:brightness(1.05);}
.foot a{color:var(--acc) !important;}
.err{color:var(--bad) !important;}
.kicker,.eyebrow,.badge-live{color:var(--acc) !important;}