/* JJKPP [RK] — interface « Ofuda » (maquette Claude Design), HTML/CSS/JS statique. */

/* ---- Polices hébergées (sous-ensembles utilisés, licences OFL dans assets/fonts) ---- */
@font-face{font-family:'IBM Plex Sans';src:url(fonts/ibm-plex-sans-latin.woff2) format('woff2');font-weight:400 700;font-style:normal;font-display:swap;unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'IBM Plex Mono';src:url(fonts/ibm-plex-mono-400-latin.woff2) format('woff2');font-weight:400;font-style:normal;font-display:swap;unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'IBM Plex Mono';src:url(fonts/ibm-plex-mono-500-latin.woff2) format('woff2');font-weight:500;font-style:normal;font-display:swap;unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Shippori Mincho B1';src:url(fonts/shippori-mincho-b1-800-kanji.woff2) format('woff2');font-weight:800;font-style:normal;font-display:swap;unicode-range:U+884C,U+591C,U+5F71,U+5E7B,U+7121,U+9ED2,U+9583}

/* ---- Thèmes : toutes les couleurs sont définies ici ---- */
:root,:root[data-theme="dark"]{
  color-scheme:dark;
  /* surfaces : fond, en-tête, cartes, tuiles, boutons de filtre, champ de recherche, survol */
  --bg:#0d1119;--hd:#0d1119;--sf:#151b28;--tile:#1b2232;--btn:#151b28;--field:#151b28;--sf2:#1b2232;--side:#0f141e;
  /* traits */
  --ln:#242c3f;--ln2:#323b52;
  /* texte : principal, secondaire, discret, indication du champ, texte sur bouton actif */
  --ink:#eff1fe;--mu:#8b93a3;--fa:#7c8494;--ph:#a3aab8;--inv:#0a0c10;
  --scrim:rgba(3,4,7,.76);
  /* tampon Rayon Noir (rouge éclairci pour rester lisible sur fond nuit) */
  --rn:#f0574d;
  /* accent des boutons (violet « énergie occulte ») et couleurs des types de compétence, éclaircis pour le fond nuit */
  --acc:#8f90f6;--acc-on:#0d1119;--acc-soft:rgba(143,144,246,.14);
  /* couleurs des statistiques (PV, Taijutsu, Jujutsu, EO initiale, EO max., Jauge spéciale) */
  --s-pv:#ff5d73;--s-tai:#ff9f43;--s-juj:#a78bfa;--s-eoi:#f6c445;--s-eom:#ffb547;--s-js:#22d3ee;
  --pc:#ffd36b;--st:#9fd0ff;
}
:root[data-theme="light"]{
  color-scheme:light;
  --bg:#f0ede2;--hd:#f0ede2;--sf:#fefdf9;--tile:#f7f4ec;--btn:#fdfef7;--field:#fefdf9;--sf2:#ebe6d9;--side:#e9e5d8;
  --ln:#e2dccd;--ln2:#c7bfad;
  --ink:#1c1a16;--mu:#655d53;--fa:#736a5f;--ph:#736a5f;--inv:#fefdf9;
  --scrim:rgba(28,26,22,.5);
  --rn:#b8261f;
  --acc:#5b5ce0;--acc-on:#ffffff;--acc-soft:rgba(91,92,224,.1);
  --s-pv:#d12f4a;--s-tai:#c4610c;--s-juj:#7446d9;--s-eoi:#9a7400;--s-eom:#b06200;--s-js:#0a8aa3;
  --pc:#8a5a00;--st:#1f5fa8;
}
:root{
  /* couleurs d'élément (bandes, kanji, accents), identiques dans les deux modes */
  --c-jaune:#d6a421;--c-vert:#2e9f5d;--c-bleu:#356cd7;--c-rouge:#d13730;
  /* texte posé sur une couleur d'élément : blanc pour les quatre éléments */
  --on-dark:#0a0c10;--on-light:#ffffff;
  /* bandes d'élément (texte blanc) : vert foncé pour que le blanc atteigne 4,5:1 */
  --strip-jaune:#d6a421;--strip-vert:#27874f;--strip-bleu:var(--c-bleu);--strip-rouge:var(--c-rouge);
  /* fonds pastel d'un élément mis en avant (mode jour) */
  --soft-jaune:#feedbc;--soft-vert:#d9f8e4;--soft-bleu:#deedff;--soft-rouge:#ffdbdb;
  --r:12px;--r-s:10px;--r-card:14px;--pill:999px;
  --sans:'IBM Plex Sans',system-ui,-apple-system,'Segoe UI',sans-serif;
  --mono:'IBM Plex Mono',ui-monospace,Menlo,Consolas,monospace;
  --kanji:'Shippori Mincho B1','Hiragino Mincho ProN','Yu Mincho','Noto Serif JP',serif;
}
[data-s="pv"]{--s:var(--s-pv)}[data-s="tai"]{--s:var(--s-tai)}[data-s="juj"]{--s:var(--s-juj)}
[data-s="eoi"]{--s:var(--s-eoi)}[data-s="eom"]{--s:var(--s-eom)}[data-s="js"]{--s:var(--s-js)}
/* couleur des compétences (étiquette, coût, conditions) : celle de l'élément du personnage */
[data-kind]{--k:var(--el-tx)}
[data-el="Jaune"]{--el-fill:var(--c-jaune);--el-tx:var(--c-jaune);--el-on:var(--on-light);--el-soft:var(--soft-jaune);--el-strip:var(--strip-jaune)}
[data-el="Vert"]{--el-fill:var(--c-vert);--el-tx:var(--c-vert);--el-on:var(--on-light);--el-soft:var(--soft-vert);--el-strip:var(--strip-vert)}
[data-el="Bleu"]{--el-fill:var(--c-bleu);--el-tx:var(--c-bleu);--el-on:var(--on-light);--el-soft:var(--soft-bleu);--el-strip:var(--strip-bleu)}
[data-el="Rouge"]{--el-fill:var(--c-rouge);--el-tx:var(--c-rouge);--el-on:var(--on-light);--el-soft:var(--soft-rouge);--el-strip:var(--strip-rouge)}
/* texte coloré par élément : variantes éclaircies la nuit, assombries le jour, pour rester lisible */
:root[data-theme="dark"] [data-el="Bleu"]{--el-tx:#7aa3ff}:root[data-theme="dark"] [data-el="Rouge"]{--el-tx:#ff7a70}
:root[data-theme="light"] [data-el="Jaune"]{--el-tx:#8a6400}:root[data-theme="light"] [data-el="Vert"]{--el-tx:#1c7a4a}

/* ---- Base ---- */
*,*::before,*::after{box-sizing:border-box}
html{background:var(--bg);-webkit-text-size-adjust:100%}
body{margin:0;min-height:100vh;display:flex;flex-direction:column;background:var(--bg);color:var(--ink);font-family:var(--sans);font-size:15px;line-height:1.4;-webkit-font-smoothing:antialiased}
a{color:inherit}
button{font:inherit;color:inherit;background:none;border:0;padding:0;margin:0;cursor:pointer;text-align:inherit}
input{font:inherit;color:inherit}
img{display:block}
:focus-visible{outline:2px solid var(--ink);outline-offset:2px}
[hidden]{display:none!important}
.visually-hidden{position:absolute;width:1px;height:1px;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.k{font-family:var(--kanji);font-weight:800;line-height:1}
.num{font-family:var(--mono)}
main{flex:1;display:flex;flex-direction:column;min-width:0}
.noscript{padding:24px 16px;color:var(--mu)}

/* Marques de rareté (3 barres) */
.marks{display:inline-flex;gap:2px;flex:none}
.marks i{width:3px;height:10px;background:currentColor;border-radius:999px}
.marks.r2 i:nth-child(3),.marks.r1 i:nth-child(n+2){opacity:.22}
.marks.big i{height:11px}
.marks.bigger i{height:12px}

/* Tampons */
.stamp-rn{flex:none;align-self:flex-start;display:inline-flex;flex-direction:column;align-items:center;justify-content:center;gap:1px;border:1.5px solid var(--rn);border-radius:var(--r-s);padding:3px;font-family:var(--kanji);font-weight:800;font-size:11px;line-height:1;color:var(--rn);transform:rotate(-4deg)}
/* les glyphes de la police sont dessinés un peu au-dessus de leur cadratin : léger décalage vers le bas pour centrer l'encre */
.stamp-rn>span{display:block;width:1em;height:1em;line-height:1;text-align:center;transform:translateY(.055em)}
.stamp-rn.row{flex-direction:row;gap:0;padding:2px 3px;align-self:center;font-size:10.5px}
.stamp-rn.row>span{transform:translateY(.085em)}

/* Segments (Jour/Nuit, Cartes/Tableau, Niv., Version) */
.seg{position:relative;isolation:isolate;display:flex;gap:2px;padding:3px;border:1px solid color-mix(in srgb,var(--acc) 35%,var(--ln2));background:color-mix(in srgb,var(--acc) 6%,transparent);border-radius:var(--pill);flex:none}
.seg>button{display:flex;align-items:center;justify-content:center;padding:6px 14px;border-radius:var(--pill);color:var(--mu);font-size:13px;white-space:nowrap;transition:color .25s,background-color .25s}
/* pastille glissante sous le bouton pressé (placée par app.js) */
.seg::before{content:"";position:absolute;z-index:-1;left:0;top:0;width:var(--seg-w,0);height:var(--seg-h,0);transform:translate(var(--seg-x,0),var(--seg-y,0));border-radius:var(--pill);background:var(--acc);box-shadow:0 2px 10px color-mix(in srgb,var(--acc) 45%,transparent);opacity:0;transition:transform .38s cubic-bezier(.22,1,.36,1),width .38s cubic-bezier(.22,1,.36,1),height .38s cubic-bezier(.22,1,.36,1),background-color .25s,box-shadow .25s}
.seg.seg-on::before{opacity:1}
/* le libellé réserve d'avance sa largeur en gras : le sélecteur ne change pas de taille pendant que la pastille glisse */
.seg .lab{display:inline-grid;justify-items:center;text-align:center}
.seg .lab::after{content:attr(data-t);font-weight:600;height:0;overflow:hidden;visibility:hidden}
.seg.seg-still::before{transition:none}
.seg.seg-fill::before{background:var(--el-fill);box-shadow:0 2px 10px color-mix(in srgb,var(--el-fill) 45%,transparent)}
:root[data-theme="light"] .seg.seg-fill::before{background:var(--el-soft);box-shadow:inset 0 0 0 1px var(--el-fill)}
@media (prefers-reduced-motion:reduce){.seg::before,.seg>button{transition:none}}
.seg>button[aria-pressed="true"]{background:var(--acc);color:var(--acc-on);font-weight:600}
.seg>button:hover:not([aria-pressed="true"]){color:var(--ink);background:var(--acc-soft)}
.seg.seg-on>button:hover:not([aria-pressed="true"]){background:transparent;color:var(--acc)}
.seg>button.fill[aria-pressed="true"]{background:var(--el-fill);color:var(--el-on);font-weight:600}
.seg.seg-on>button[aria-pressed="true"]{background:transparent;box-shadow:none}
:root[data-theme="light"] .seg>button.fill[aria-pressed="true"]{background:var(--el-soft);color:var(--ink);box-shadow:inset 0 0 0 1px var(--el-fill)}

/* ---- En-tête ---- */
.topbar{height:60px;flex:none;background:var(--hd);display:flex;align-items:center;justify-content:space-between;gap:12px;padding:0 16px;border-bottom:1px solid var(--ln)}
.brand{display:flex;align-items:baseline;gap:7px;text-decoration:none;min-width:0}
.brand-name{font-size:23px;font-weight:700;line-height:1;letter-spacing:-.02em}
.brand-rk{font-family:var(--mono);font-size:11px;color:var(--mu)}
.brand-sub{display:none}
.topbar .seg{font-size:12.5px}
.topbar .seg>button{height:32px;padding:0 12px;font-size:12.5px}

/* ---- Liste : barre mobile ---- */
.m-tools{flex:none;padding:12px 16px 10px;display:flex;flex-direction:column;gap:10px}
.search-row{display:flex;gap:8px}
.search{flex:1;min-width:0;height:46px;border:1px solid var(--ln2);border-radius:var(--pill);background:var(--field);padding:0 18px;font-size:15px;color:var(--ink);outline:none}
.search::placeholder{color:var(--ph);opacity:1}
.search:focus{border-color:var(--ink)}
.search::-webkit-search-cancel-button{filter:grayscale(1)}
.btn-filters{flex:none;height:46px;padding:0 16px;background:var(--btn);border:1px solid var(--acc);border-radius:var(--pill);display:flex;align-items:center;gap:9px;font-size:14px;font-weight:600;color:var(--acc)}
.badge-n{min-width:20px;height:20px;padding:0 6px;border-radius:var(--pill);background:var(--acc);color:var(--acc-on);font-family:var(--mono);font-size:11.5px;display:flex;align-items:center;justify-content:center}
.el-quick{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:6px}
.el-quick button{height:40px;background:color-mix(in srgb,var(--el-fill) 10%,var(--btn));border:1px solid color-mix(in srgb,var(--el-fill) 45%,var(--ln2));transition:background-color .2s,border-color .2s;border-radius:var(--pill);display:flex;align-items:center;justify-content:center;gap:6px}
.el-quick .k{font-size:19px;color:var(--el-tx)}
.el-quick .lab{font-size:11.5px;color:var(--mu)}
.el-quick button[aria-pressed="true"]{background:var(--el-fill);border-color:var(--el-fill)}
.el-quick button[aria-pressed="true"] .k,.el-quick button[aria-pressed="true"] .lab{color:var(--el-on)}
/* mode jour : même rendu qu'en mode nuit (pastille teintée au repos, couleur pleine une fois pressé), teinte un peu renforcée sur fond clair */
:root[data-theme="light"] .el-quick button:not([aria-pressed="true"]),:root[data-theme="light"] .el-grid button:not([aria-pressed="true"]){background:color-mix(in srgb,var(--el-fill) 14%,var(--btn));border-color:color-mix(in srgb,var(--el-fill) 60%,var(--ln2))}
:root[data-theme="light"] .el-quick button:hover:not([aria-pressed="true"]),:root[data-theme="light"] .el-grid button:hover:not([aria-pressed="true"]){background:color-mix(in srgb,var(--el-fill) 26%,var(--btn));border-color:var(--el-fill)}
.count-row{display:flex;align-items:baseline;justify-content:space-between;gap:10px}
.count{display:flex;align-items:baseline;gap:6px}
.count .n{font-size:21px;font-weight:600;line-height:1;letter-spacing:-.01em}
.count .of{font-size:13px;color:var(--mu)}
.link-reset{font-size:13px;text-decoration:underline;text-underline-offset:4px;text-decoration-color:var(--acc)}
.link-reset:disabled{color:var(--fa);cursor:default}
.chips{display:flex;flex-wrap:wrap;gap:6px}
.chip{display:flex;align-items:center;gap:6px;border:1px solid var(--ln2);border-radius:var(--pill);padding:4px 10px;font-size:12.5px}
.chip .k{font-size:inherit;color:var(--el-tx)}
.chip .x{color:var(--mu)}
.chip:hover{border-color:var(--acc)}

/* ---- Liste : mise en page ---- */
.list-layout{flex:1;display:flex;flex-direction:column;min-width:0}
.results{flex:1;min-width:0;display:flex;flex-direction:column}
.d-results-head,.filters .search,.filters .reset-help .link-reset{display:none}

/* ---- Filtres (latéral sur bureau, panneau par-dessus la liste sur mobile) ---- */
.filters-wrap{display:none}
.filters-wrap.open{display:block;position:fixed;inset:0;z-index:30}
.scrim{position:absolute;inset:0;background:var(--scrim)}
.filters{position:absolute;left:0;right:0;bottom:0;max-height:calc(100% - 24px);display:flex;flex-direction:column;background:var(--bg);border-top:1px solid var(--ln2);border-radius:6px 6px 0 0}
.sheet-handle{display:flex;justify-content:center;padding-top:8px;flex:none}
.sheet-handle span{width:40px;height:4px;background:var(--ln2);border-radius:2px}
.sheet-head{flex:none;display:flex;align-items:center;justify-content:space-between;padding:4px 16px 12px;border-bottom:1px solid var(--ln)}
.sheet-head h2{margin:0;font-weight:700;font-size:23px;line-height:1.1;letter-spacing:-.015em}
.sheet-head .actions{display:flex;align-items:center;gap:14px}
.sheet-head .link-reset{font-size:13.5px}
.btn-close{width:44px;height:44px;border:1px solid var(--ln2);border-radius:var(--pill);display:flex;align-items:center;justify-content:center;font-size:20px;line-height:1}
.filters-body{flex:1;min-height:0;overflow:auto;padding:16px 16px 18px;display:flex;flex-direction:column;gap:18px}
.sheet-foot{flex:none;padding:12px 16px 22px;border-top:1px solid var(--ln)}
.btn-see{width:100%;height:52px;border-radius:var(--pill);background:var(--acc);color:var(--acc-on);display:flex;align-items:center;justify-content:center;font-size:16px;font-weight:600;text-align:center}
.fgroup{display:flex;flex-direction:column;gap:8px}
.fgroup-head{display:flex;justify-content:space-between;font-size:10.5px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--mu)}
.fgroup-head .sel{color:var(--ink)}
.el-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:6px}
.el-grid button{height:44px;background:color-mix(in srgb,var(--el-fill) 10%,var(--btn));border:1px solid color-mix(in srgb,var(--el-fill) 45%,var(--ln2));transition:background-color .2s,border-color .2s;border-radius:var(--pill);display:flex;align-items:center;justify-content:center;gap:6px}
.el-grid .k{font-size:20px;color:var(--el-tx)}
.el-grid .lab{font-size:12.5px;color:var(--mu)}
.el-grid button[aria-pressed="true"]{background:var(--el-fill);border-color:var(--el-fill)}
.el-grid button[aria-pressed="true"] .k,.el-grid button[aria-pressed="true"] .lab{color:var(--el-on)}
.opt-grid{display:flex;gap:6px}
.opt-grid button{flex:1 1 0;min-width:max-content;height:44px;background:color-mix(in srgb,var(--acc) 6%,var(--btn));border:1px solid color-mix(in srgb,var(--acc) 30%,var(--ln2));transition:background-color .2s,border-color .2s,color .2s;border-radius:var(--pill);display:flex;align-items:center;justify-content:center;gap:7px;padding:0 10px;font-size:13.5px;color:var(--ink);white-space:nowrap}
/* le libellé réserve d'avance sa largeur en gras : presser un bouton ne change pas sa taille */
.opt-grid .lab{display:inline-grid;justify-items:center;text-align:center}
.opt-grid .lab::after{content:attr(data-t);font-weight:600;height:0;overflow:hidden;visibility:hidden}
.opt-grid button[aria-pressed="true"]{background:var(--acc);border-color:var(--acc);color:var(--acc-on);font-weight:600}
.el-grid button:hover:not([aria-pressed="true"]),.el-quick button:hover:not([aria-pressed="true"]){background:color-mix(in srgb,var(--el-fill) 22%,var(--btn));border-color:var(--el-fill)}
.opt-grid button:hover:not([aria-pressed="true"]){background:var(--acc-soft);border-color:var(--acc)}
.reset-help{display:flex;flex-direction:column;gap:8px;font-size:12px;line-height:1.45;color:var(--mu)}

/* ---- Cartes ---- */
.cards{padding:0 16px 16px;display:grid;grid-template-columns:repeat(auto-fill,minmax(min(320px,100%),1fr));gap:8px;align-content:start}
.card{display:flex;background:var(--sf);border:1px solid var(--ln);border-radius:var(--r-card);overflow:hidden;text-decoration:none;color:var(--ink);min-width:0}
.card:hover{border-color:var(--ln2)}
.strip{width:24px;flex:none;background:var(--el-strip,var(--ln2));color:var(--on-light);display:flex;flex-direction:column;align-items:center;padding:10px 0;gap:8px}
.strip .k{font-size:16px}
.strip .el{writing-mode:vertical-rl;font-size:8.5px;font-weight:600;letter-spacing:.2em;text-transform:uppercase}
.card-body{flex:1;min-width:0;padding:11px 13px 10px;display:flex;flex-direction:column;gap:8px}
.card-head{display:flex;gap:10px;align-items:center}
.icon{flex:none;object-fit:cover;background:var(--sf2);border-radius:var(--r-s)}
.card .icon{width:76px;height:76px}
.card-id{flex:1;min-width:0}
.meta{display:flex;align-items:center;gap:7px;font-size:11px;color:var(--mu);min-width:0}
.meta .marks{color:var(--ink)}
.meta .rar{font-family:var(--mono);font-weight:500;color:var(--ink)}
.meta .role{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.epi{margin-top:3px;font-size:12px;line-height:1.25;color:var(--mu);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.card .name{font-size:17px;font-weight:700;line-height:1.2;letter-spacing:-.01em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.stats{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
.stat-top{display:flex;justify-content:space-between;align-items:baseline}
.stat .lab{font-size:9.5px;font-weight:600;letter-spacing:.08em;color:var(--s,var(--mu))}
.stat .v{font-family:var(--mono);font-size:13px;font-weight:500}
.stat .v.weak{color:var(--mu)}
.bar{position:relative;height:5px;margin-top:5px;background:color-mix(in srgb,var(--s,var(--ink)) 16%,var(--ln));border-radius:var(--pill);overflow:hidden}
.bar i{position:absolute;left:0;top:0;bottom:0;background:var(--s,var(--ink));border-radius:var(--pill)}
.bar i.weak{background:color-mix(in srgb,var(--s,var(--fa)) 45%,var(--fa))}
.lab-long,.d-only{display:none}
.card-foot{display:flex;align-items:baseline;gap:14px;font-size:11px;color:var(--mu)}
.card-foot .num{color:var(--ink)}
.card-foot .end{margin-left:auto}
.card-foot .rn{color:var(--ink);font-weight:600}

/* ---- Aucun résultat ---- */
.empty{padding:24px 16px 24px;display:flex;flex-direction:column;gap:14px}
.stamp-empty{width:64px;height:64px;border:2px solid var(--ink);border-radius:var(--r);display:flex;align-items:center;justify-content:center;transform:rotate(-5deg);font-size:36px}
.empty h2{margin:4px 0 0;font-weight:700;font-size:24px;line-height:1.15;letter-spacing:-.015em}
.empty p{margin:0;font-size:15px;line-height:1.5;color:var(--mu);text-wrap:pretty}
.sugg{border-top:1px solid var(--ln)}
.sugg button{width:100%;height:50px;display:flex;align-items:center;justify-content:space-between;gap:12px;border-bottom:1px solid var(--ln);font-size:14.5px}
.sugg button:hover{background:var(--sf)}
.sugg .num{font-size:12.5px;color:var(--mu);white-space:nowrap}
.btn-outline{height:50px;border:1.5px solid var(--acc);color:var(--acc);border-radius:var(--pill);display:flex;align-items:center;justify-content:center;padding:0 24px;font-size:15px;font-weight:600}
.btn-outline:hover{background:var(--acc-soft)}

/* ---- Tableau ----
   Élément, Rareté, Rôle et Spécialité sont regroupés dans une seule colonne où ils gardent
   toujours le même écart. Quand la place manque, cette colonne se referme par la droite : les PV,
   le taijutsu et le jujutsu glissent par-dessus et recouvrent les infos en dégradé, d'abord la
   Spécialité, puis le Rôle, la Rareté et l'Élément. Marges, icône et statistiques se resserrent
   en continu. Toutes les tailles dépendent de la largeur du panneau. */
.table-wrap{padding:6px 16px 24px}
.tpanel{container-type:inline-size;background:var(--sf);border:1px solid var(--ln);border-radius:14px;overflow:hidden}
.ftable{--px:clamp(8px,8px + (100cqi - 380px) * .057,16px);width:100%;border-collapse:collapse;table-layout:fixed;font-size:14px}
.ftable th,.ftable td{padding:12px var(--px);text-align:left;border-bottom:1px solid var(--ln);white-space:nowrap;vertical-align:middle;overflow:hidden;text-overflow:ellipsis}
.ftable th:first-child,.ftable td:first-child{padding-left:clamp(12px,12px + (100cqi - 380px) * .029,16px)}
.ftable th:nth-child(3),.ftable th:nth-child(4),.ftable th:nth-child(5){width:clamp(62px,62px + (100cqi - 360px) * .2,120px)}
/* colonne des infos secondaires : largeur qui se referme en continu, contenu à positions fixes */
.ftable .sec{padding-left:0;padding-right:0;text-overflow:clip}
/* chaque info est recouverte à son tour, deux fois plus vite qu'avant, puis la colonne marque une pause
   (80px de panneau) avant la suivante : Spécialité 1080→1010px, Rôle 930→864px, Rareté 784→736px, Élément 656→600px */
.ftable th.sec{width:calc(clamp(0px,(100cqi - 600px) * 2,112px) + clamp(0px,(100cqi - 736px) * 2,96px) + clamp(0px,(100cqi - 864px) * 2,132px) + clamp(0px,(100cqi - 1010px) * 2,140px))}
.ftable .sec .fade{display:flex;width:100%}
.c-el{flex:none;width:112px}.c-rar{flex:none;width:96px}.c-role{flex:none;width:132px}.c-spe{flex:none;width:116px}
.c-el,.c-rar,.c-role,.c-spe{overflow:hidden;text-overflow:ellipsis;padding-right:12px}
/* le bord droit de la colonne s'efface en dégradé au lieu de couper net (à pleine largeur, le dégradé tombe sur du vide) */
.fade{overflow:hidden;white-space:nowrap;-webkit-mask-image:linear-gradient(90deg,#000 calc(100% - 24px),transparent);mask-image:linear-gradient(90deg,#000 calc(100% - 24px),transparent)}
.ftable th{font-size:11px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--mu)}
.ftable th button{font-weight:600;letter-spacing:inherit;text-transform:inherit;color:inherit}
.ftable th button .arr{color:var(--fa);opacity:.6}
.ftable th[aria-sort] button,.ftable th[aria-sort] button .arr{color:var(--ink);opacity:1}

.ftable .ths{display:none}
.ftable tbody tr{cursor:pointer}
.ftable tbody tr:hover{background:var(--sf2)}
.ftable tbody tr:last-child td{border-bottom:0}
/* liseré de la couleur d'élément : n'apparaît qu'une fois la pastille de l'élément recouverte */
.ftable tbody td:first-child{box-shadow:inset clamp(0px,(612px - 100cqi) * .25,3px) 0 0 var(--el-fill)}
.tname{display:flex;align-items:center;gap:clamp(8px,8px + (100cqi - 340px) * .04,12px);min-width:0}
/* portrait toujours lisible sur téléphone : 30px minimum, 40px dès que la place le permet */
.tname .icon{flex:none;width:clamp(30px,30px + (100cqi - 340px) * .1,40px);height:auto;aspect-ratio:1;border-radius:8px}
.tname-id{min-width:0;flex:1}
.tname a{min-width:0;font-weight:700;font-size:clamp(13px,13px + (100cqi - 380px) * .01,14px);text-decoration:none;overflow:hidden;text-overflow:ellipsis}
.tname .epi{margin:2px 0 0;font-size:11.5px}
.tname-row{display:flex;align-items:center;gap:8px;min-width:0}
.tname .stamp-rn{align-self:center;margin:0;position:relative;top:-3px}
.tdot{display:inline-block;width:9px;height:9px;border-radius:50%;background:var(--el-fill);margin-right:8px}
.tnum .v{font-family:var(--mono);font-size:clamp(12px,12px + (100cqi - 380px) * .01,13px);font-weight:500}
.tnum .v.weak{color:var(--mu)}
.tnum .bar{height:4px;margin-top:5px}
.mu{color:var(--mu)}
@container (max-width:519.98px){
  .ftable .thl{display:none}
  .ftable .ths{display:inline}
}

/* ---- Pied de page ---- */
.site-footer{border-top:1px solid var(--ln);padding:16px;font-size:12px;line-height:1.5;color:var(--mu)}
.site-footer p{margin:0}
.site-footer .brand-name{font-size:15px;color:var(--ink)}
.site-footer .brand-rk{font-size:inherit}
.site-footer a{color:var(--ink);text-underline-offset:3px}
.site-footer.in-results{display:none}

/* ---- Fiche ---- */
.d-nav{display:none}
.m-nav{height:60px;flex:none;background:var(--hd);display:flex;align-items:center;justify-content:space-between;padding:0 12px 0 8px;border-bottom:1px solid var(--ln)}
.btn-back{height:44px;padding:0 8px;display:flex;align-items:center;gap:8px;font-size:14.5px;font-weight:600;text-decoration:none;border-radius:var(--r)}
.btn-back .arr{font-size:18px;font-weight:400}
.pn{display:flex;gap:6px}
.pn a{width:44px;height:44px;border:1px solid var(--ln2);border-radius:var(--pill);display:flex;align-items:center;justify-content:center;font-size:18px;text-decoration:none}
.pn a[aria-disabled="true"]{opacity:.35;pointer-events:none}
.pn a:hover,.d-nav .pn a:hover{border-color:var(--el-fill,var(--acc));color:var(--el-tx,var(--acc))}
.fiche{display:flex;flex-direction:column}
.fiche-side{display:contents}
.idcard{margin:16px;display:flex;background:var(--sf);border:1px solid color-mix(in srgb,var(--el-fill) 40%,var(--ln));border-radius:var(--r-card);overflow:hidden}
.idcard .strip{width:40px;padding:14px 0;gap:12px}
.idcard .strip .k{font-size:27px}
.idcard .strip .el{font-size:10px;letter-spacing:.24em}
.idcard-body{flex:1;min-width:0;padding:14px;display:flex;flex-direction:column;gap:14px}
.idcard-title{display:flex;flex-direction:column;gap:12px}
.idcard-head{display:flex;gap:12px;align-items:center}
.idcard-id{flex:1;min-width:0}
.idcard .icon{width:96px;height:96px}
.idcard .meta{font-size:11.5px}
.idcard .epi{margin-top:5px;font-size:13.5px;line-height:1.3;white-space:normal;color:var(--el-tx)}
.idcard h1{margin:0;font-weight:700;font-size:26px;line-height:1.1;letter-spacing:-.02em;overflow-wrap:break-word}
.idcard h1:focus{outline:none}
.info{display:grid;grid-template-columns:auto minmax(0,1fr);gap:5px 14px;margin:0;font-size:13px;line-height:1.4}
.info dt{color:var(--el-tx,var(--mu));font-weight:600}
.info dd{margin:0;white-space:pre-line}
.sgrid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1px;background:var(--ln);border:1px solid var(--ln);border-radius:var(--r);overflow:hidden}
.sgrid>div{background:var(--tile);padding:8px 9px}
.sgrid .lab{font-size:9.5px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--s,var(--mu))}
.sgrid .v{font-family:var(--mono);font-size:14.5px;font-weight:500}
.sgrid .v.weak{color:var(--mu)}
.sgrid .bar{margin-top:5px}
.toc{display:none}
.kit-head{position:sticky;top:0;z-index:5;background:var(--bg);border-top:1px solid var(--ln);border-bottom:1px solid var(--ln);padding:12px 16px;display:flex;flex-direction:column;gap:10px}
.kit-head h2{margin:0;color:var(--el-tx);font-weight:700;font-size:20px;line-height:1.1;letter-spacing:-.015em}
.kit-toggles{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.35fr);gap:8px}
.kit-toggles.one{grid-template-columns:minmax(0,1fr)}
.kit-toggles .seg{display:grid;grid-auto-flow:column;grid-auto-columns:1fr}
.kit-toggles .seg.ver.v2{grid-template-columns:.8fr 1.2fr;grid-auto-columns:unset}
.kit-toggles .seg>button{height:38px;padding:0 8px;font-size:13.5px}
.kit-toggles .seg>button[aria-pressed="true"]{font-weight:600}
.kit-toggles .tlab{display:none}
.kit-notes{display:flex;flex-wrap:wrap;gap:4px 14px;font-size:12px;color:var(--mu)}
.kit-notes span{display:flex;align-items:center;gap:6px}
.kit-notes.after{display:none}
.en-badge{padding:0 3px;border:1px solid var(--ln2);border-radius:3px;font-family:var(--mono);font-size:9.5px;font-weight:400;color:var(--mu);line-height:1.4}
.skill{padding:20px 16px 22px;border-bottom:1px solid var(--ln);scroll-margin-top:150px}
.skill-top{display:flex;justify-content:space-between;align-items:flex-start;gap:12px}
.skill-type{font-size:10.5px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--k,var(--mu));line-height:1.4}
.skill h3{margin:5px 0 0;font-weight:700;font-size:18px;line-height:1.25;letter-spacing:-.01em;text-wrap:pretty}
.cost{flex:none;border:1.5px solid var(--k,var(--ink));background:color-mix(in srgb,var(--k,transparent) 10%,transparent);border-radius:var(--r-s);padding:5px 8px;display:flex;align-items:baseline;gap:5px}
.cost .num{font-size:17px;font-weight:500;line-height:1}
.cost .num{color:var(--k,var(--ink))}
.cost .u{font-size:9.5px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--mu)}
.skill-meta .cost{display:none}
.modrow{margin-top:10px;display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.modbadge{padding:3px 7px;border-radius:var(--r-s);font-size:10.5px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;border:1px solid var(--ln2);color:var(--mu)}
.modbadge.on{background:var(--el-fill);border-color:var(--el-fill);color:var(--el-on)}
:root[data-theme="light"] .modbadge.on{background:var(--el-soft);color:var(--ink)}
.was{font-size:12px;color:var(--mu)}
.lines{margin-top:14px}
.ln{display:flex;gap:4px;font-size:15px;line-height:24px;font-weight:400;color:var(--ink)}
.ln .mk{flex:none;width:16px;color:var(--fa);font-size:13px}
.ln.c{font-weight:600;color:var(--k,var(--ink))}
.ln.c .mk{color:var(--el-tx);font-size:10px}
.ln.n{font-size:14px;line-height:22px;color:var(--mu)}
.ln .t{min-width:0;text-wrap:pretty}
.ln b{font-weight:600}
.ln b.pc{color:var(--pc)}
.ln b.st{color:var(--st)}
.ln.b .mk{color:var(--k,var(--fa))}
.ln .en{text-decoration:underline dotted;text-decoration-color:var(--fa);text-underline-offset:4px}
.ln .en-badge{margin-left:6px;vertical-align:2px}
.ln.gap{margin-top:12px}
.ln.c.gap{margin-top:18px}
.ln.near{margin-top:2px}
.missing{font-size:13px;color:var(--mu);font-style:italic}
.notfound{padding:48px 16px;display:flex;flex-direction:column;gap:14px;align-items:flex-start}
.notfound h1{margin:0;font-weight:700;font-size:26px;line-height:1.15;letter-spacing:-.015em}

/* ================= Bureau ================= */
@media (min-width:960px){
  .topbar{height:72px;padding:0 32px}
  .brand{gap:12px}
  .brand-name{font-size:29px}
  .brand-rk{font-size:13px}
  .brand-sub{display:inline;margin-left:16px;font-size:11px;font-weight:500;letter-spacing:.18em;text-transform:uppercase;color:var(--mu);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .topbar .seg>button{height:auto;padding:6px 14px;font-size:13px}

  .m-tools{display:none}
  .list-layout{flex-direction:row;align-items:stretch}
  .filters-wrap,.filters-wrap.open{display:block;position:static;width:288px;flex:none;border-right:1px solid var(--ln)}
  .scrim,.sheet-handle,.sheet-head,.sheet-foot{display:none}
  .filters{position:sticky;top:0;max-height:100vh;border:0;border-radius:0;background:transparent}
  .filters-body{padding:22px 24px;gap:22px}
  .filters .search{display:block;flex:none;height:44px;font-size:14px}
  .filters .reset-help .link-reset{display:inline;align-self:flex-start;font-size:13.5px}
  .el-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .el-grid button{height:40px}
  .el-grid .k{font-size:19px}
  .el-grid .lab{font-size:12.5px}
  .opt-grid button{height:38px;gap:6px;padding:0 10px;font-size:12.5px}

  .d-results-head{display:flex;align-items:flex-end;justify-content:space-between;gap:24px;padding:22px 32px 18px;border-bottom:1px solid var(--ln)}
  .d-results-head .left{display:flex;align-items:flex-end;gap:24px;flex-wrap:wrap}
  .d-results-head .count .n{font-size:40px;line-height:.9;letter-spacing:-.03em}
  .d-results-head .count{gap:8px}
  .d-results-head .count .of{font-size:15px}
  .d-results-head .chips{padding-bottom:2px}
  .d-results-head .chip{padding:5px 9px}
  .view{display:flex;align-items:center;gap:10px}
  .view .vl{font-size:10.5px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--mu)}

  .cards{padding:22px 32px;grid-template-columns:repeat(auto-fill,minmax(350px,1fr));gap:16px}
  .strip{width:22px;padding:12px 0;gap:9px}
  .strip .k{font-size:15px}
  .card-body{padding:15px 16px 14px;gap:13px}
  .card-head{gap:13px}
  .card .meta{font-size:12px}
  .card .epi{margin-top:5px;font-size:12.5px}
  .card .name{font-size:19px;line-height:1.18}
  .stamp-rn{font-size:11px;align-self:auto}
  .stats{gap:12px}
  .stat-top{display:block}
  .stat .lab{display:block;font-size:9.5px;letter-spacing:.1em}
  .stat .v{display:block;font-size:14.5px}
  .lab-short,.m-only{display:none}
  .lab-long{display:inline}
  .d-only{display:inline}
  .card-foot{gap:14px;font-size:12px}

  .empty{padding:72px 32px 32px;max-width:624px;gap:16px}
  .stamp-empty{width:84px;height:84px;font-size:48px}
  .empty h2{font-size:32px;line-height:1.1;letter-spacing:-.02em;margin-top:8px}
  .empty p{font-size:16px}
  .sugg{margin-top:4px}
  .sugg button{height:48px;font-size:15px}
  .sugg .num{font-size:13px}
  .empty .btn-outline{align-self:flex-start;height:46px}

  .site-footer{display:flex;justify-content:space-between;gap:24px;padding:18px 32px;font-size:12.5px}
  .site-footer .brand-name{font-size:16px}
  .site-footer p+p{text-align:right}
  body[data-route="list"]>.site-footer{display:none}
  .site-footer.in-results{display:flex;margin-top:auto}
  .results-body{flex:1}

  /* Fiche */
  .m-nav{display:none}
  .d-nav{height:56px;flex:none;background:var(--hd);display:flex;align-items:center;justify-content:space-between;padding:0 40px;border-bottom:1px solid var(--ln);font-size:14px}
  .crumbs{display:flex;align-items:center;gap:12px;min-width:0}
  .crumbs .btn-back{height:auto;padding:0;font-size:14px}
  .crumbs .sep{color:var(--fa)}
  .crumbs .cur{color:var(--mu);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .d-nav .pn{gap:8px}
  .d-nav .pn a{width:auto;height:auto;padding:8px 12px;gap:6px;font-size:14px;white-space:nowrap}
  .fiche{display:grid;grid-template-columns:392px minmax(0,1fr);gap:64px;padding:36px 40px 72px;align-items:start}
  .fiche-side{display:flex;flex-direction:column;gap:24px;position:sticky;top:24px}
  .idcard{margin:0}
  .idcard .strip{width:48px;padding:16px 0;gap:14px}
  .idcard .strip .k{font-size:32px}
  .idcard .strip .el{font-size:11px;letter-spacing:.26em}
  .idcard-body{padding:18px;gap:16px}
  .idcard-title{gap:14px}
  .idcard .meta{font-size:12px;gap:8px}
  .idcard .epi{margin-top:5px;font-size:14px}
  .idcard h1{font-size:33px;line-height:1.08;letter-spacing:-.025em}
  .info{gap:6px 16px;font-size:13.5px}
  .sgrid>div{padding:9px 10px}
  .sgrid .v{font-size:15px}
  .sgrid .bar{margin-top:6px}
  .toc{display:block}
  .toc h2{margin:0;font-size:10.5px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--el-tx,var(--mu));padding-bottom:8px;border-bottom:1px solid var(--el-fill,var(--ink))}
  .toc button{width:100%;display:grid;grid-template-columns:62px minmax(0,1fr) auto;gap:10px;align-items:baseline;padding:9px 0;border-bottom:1px solid var(--ln);font-size:13.5px}
  .toc button:hover{background:color-mix(in srgb,var(--k,var(--acc)) 10%,transparent)}
  .toc .sh{font-family:var(--mono);font-size:11px;font-weight:500;color:var(--k,var(--mu))}
  .toc .tc{font-family:var(--mono);font-size:12px;color:var(--mu);text-align:right}
  .kit{min-width:0;max-width:880px}
  .kit-head{position:static;border:0;border-bottom:1px solid var(--el-fill,var(--ink));padding:0 0 18px;flex-direction:row;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:24px}
  .kit-head h2{font-size:28px;letter-spacing:-.02em}
  .kit-toggles,.kit-toggles.one{display:flex;gap:20px;align-items:center}
  .kit-toggles .grp{display:flex;align-items:center;gap:10px}
  .kit-toggles .tlab{display:inline;font-size:10.5px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--mu)}
  .kit-toggles .seg,.kit-toggles .seg.ver.v2{display:flex}
  .kit-toggles .seg>button{height:auto;padding:6px 14px}
  .kit-notes{gap:6px 20px;padding:12px 0 4px;font-size:12.5px}
  .kit-head .kit-notes{display:none}
  .kit-notes.after{display:flex}
  .skill{display:grid;grid-template-columns:176px minmax(0,1fr);gap:32px;padding:30px 0 32px;scroll-margin-top:24px}
  .skill-top .cost,.skill-top .skill-type{display:none}
  .skill-meta{display:flex;flex-direction:column;align-items:flex-start;gap:12px}
  .skill-meta .cost{display:flex;padding:7px 10px;gap:6px}
  .skill-meta .cost .num{font-size:22px}
  .skill-meta .cost .u{font-size:10px}
  .skill-meta .modrow{margin:0;flex-direction:column;align-items:flex-start;gap:12px}
  .skill-main{min-width:0;max-width:664px}
  .skill-main>.modrow{display:none}
  .skill h3{margin:0 0 14px;font-size:22px;line-height:1.2;letter-spacing:-.015em}
  .skill .lines{margin-top:0}
  .ln .mk{width:18px}
}
@media (max-width:959.98px){
  .skill-meta{display:none}
  .d-results-head{display:none}
  .m-view{align-self:flex-start}
  .m-view>button{flex:1}
  .table-wrap{padding:6px 16px 16px;-webkit-overflow-scrolling:touch}
  body[data-route="fiche"] .topbar{display:none}
}
@media (max-width:420px){
  .d-nav .pn a .who{display:none}
}
@media (max-width:359.98px){
  .kit-toggles{grid-template-columns:minmax(0,1fr)}
}

/* ================= Fusion avec la maquette v2 =================
   Arrondis plus généreux, titres plus appuyés, bandes d'élément en dégradé,
   tableau en panneau et fiche centrée. */
.stamp-rn{border-radius:4px}
.brand-name{font-weight:800}
.topbar{position:sticky;top:0;z-index:20}
body[data-route="fiche"] .topbar{position:static}

/* bandes d'élément : dégradé discret vers une teinte voisine plus profonde */
[data-el="Jaune"]{--el-strip2:#c27f17}
[data-el="Vert"]{--el-strip2:#1b6f55}
[data-el="Bleu"]{--el-strip2:#2f4fb8}
[data-el="Rouge"]{--el-strip2:#a82434}
.strip{
  background:linear-gradient(180deg,var(--el-strip,var(--ln2)),var(--el-strip2,var(--el-strip,var(--ln2))));
  background:linear-gradient(180deg in oklch,var(--el-strip,var(--ln2)),var(--el-strip2,var(--el-strip,var(--ln2))))
}
.strip .el{font-weight:800}

/* portraits arrondis, sans cadre */
.card .icon,.idcard .icon{border-radius:12px}

/* cartes : léger soulèvement au survol */
.card{transition:transform .2s cubic-bezier(.2,.7,.3,1),border-color .2s}
/* au survol, le cadre reprend le dégradé de la bande d'élément ;
   sous la bande, le fond laisse voir ce dégradé pour éviter un liseré dans les coins arrondis */
.card:hover{
  transform:translateY(-3px);
  border-color:transparent;
  background:
    linear-gradient(90deg,transparent 20px,var(--sf) 20px) padding-box,
    linear-gradient(180deg,var(--el-strip,var(--ln2)),var(--el-strip2,var(--el-strip,var(--ln2)))) border-box;
  background:
    linear-gradient(90deg,transparent 20px,var(--sf) 20px) padding-box,
    linear-gradient(180deg in oklch,var(--el-strip,var(--ln2)),var(--el-strip2,var(--el-strip,var(--ln2)))) border-box
}
.card .name{font-weight:800}

/* filtres et compteurs */
.search{border-radius:14px;border-color:var(--ln)}
.search:focus{border-color:var(--acc)}
.fgroup-head{font-weight:700}
.chip{background:var(--sf)}
.count .n{font-weight:800}

/* fiche */
.idcard{border-color:color-mix(in srgb,var(--el-fill) 45%,var(--ln))}
.idcard h1{font-weight:800}
.sgrid{border-radius:12px}
.kit-head h2{font-weight:800}
.skill h3{font-weight:800}
.skill-type{font-weight:700}
.cost{border-radius:10px}
.modbadge{border-radius:var(--pill)}
.empty h2,.notfound h1,.sheet-head h2{font-weight:800}
.stamp-empty{border-radius:6px}

@media (min-width:960px){
  .filters-wrap,.filters-wrap.open{background:var(--side)}
  .filters{top:72px;max-height:calc(100vh - 72px)}
  .d-results-head .count .n{font-size:46px;font-weight:800}
  .cards{gap:18px}
  .table-wrap{padding:22px 32px}
  .fiche{max-width:1416px;width:100%;margin:0 auto}
  .card .name{font-size:19px}
  .idcard{border-radius:16px}
  .idcard h1{font-size:34px}
  .kit-head{border-bottom-width:2px}
  .kit-head h2{font-size:32px}
  .skill-meta .cost{padding:6px 14px;border-radius:10px}
  .skill-meta .cost .num{font-size:24px;font-weight:700}
  .skill h3{font-size:22px}
}
@media (prefers-reduced-motion:reduce){.card{transition:none}.card:hover{transform:none}}

/* tampon Rayon Noir des cartes : calé dans le coin supérieur droit, à égale distance du haut et du bord droit,
   pour suivre la diagonale du coin de la carte */
.card{position:relative}
.card .stamp-rn{position:absolute;top:16px;right:16px;align-self:auto}
.card-head:has(.stamp-rn) .card-id{padding-right:30px}
@media (min-width:960px){
  .card .stamp-rn{top:20px;right:20px}
  .card-head:has(.stamp-rn) .card-id{padding-right:34px}
}