/* Riftracker — toute la feuille de style de l'appli.
   Sortie de index.html le 5 novembre 2026 : 1 572 lignes de moins dans le fichier
   unique, et surtout un cache à part. Une correction du JavaScript ne fait plus
   retransmettre les 140 Ko de styles, et l'inverse non plus.
   Les chemins des polices sont absolus (/polices/…) : ils valent depuis ici aussi. */
/* Polices servies par le site, pas par Google : aucun appel extérieur, donc aucune
   adresse IP de visiteur transmise à un tiers. Mêmes familles et mêmes graisses
   qu'avant (Barlow 400/500/600, Barlow Semi Condensed 500/600/700, Cinzel 600/700),
   pour un rendu identique. Les fichiers sont dans public/polices, avec leur licence
   OFL. Les plages unicode sont conservées : le navigateur ne télécharge latin-ext
   que s'il rencontre un œ, un — ou un autre caractère qui l'exige. */
@font-face{font-family:'Barlow';font-style:normal;font-weight:400;font-display:swap;src:url(/polices/barlow-400-ext.woff2) format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:'Barlow';font-style:normal;font-weight:400;font-display:swap;src:url(/polices/barlow-400.woff2) format('woff2');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:'Barlow';font-style:normal;font-weight:500;font-display:swap;src:url(/polices/barlow-500-ext.woff2) format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:'Barlow';font-style:normal;font-weight:500;font-display:swap;src:url(/polices/barlow-500.woff2) format('woff2');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:'Barlow';font-style:normal;font-weight:600;font-display:swap;src:url(/polices/barlow-600-ext.woff2) format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:'Barlow';font-style:normal;font-weight:600;font-display:swap;src:url(/polices/barlow-600.woff2) format('woff2');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:'Barlow Semi Condensed';font-style:normal;font-weight:500;font-display:swap;src:url(/polices/barlow-condensed-500-ext.woff2) format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:'Barlow Semi Condensed';font-style:normal;font-weight:500;font-display:swap;src:url(/polices/barlow-condensed-500.woff2) format('woff2');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:'Barlow Semi Condensed';font-style:normal;font-weight:600;font-display:swap;src:url(/polices/barlow-condensed-600-ext.woff2) format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:'Barlow Semi Condensed';font-style:normal;font-weight:600;font-display:swap;src:url(/polices/barlow-condensed-600.woff2) format('woff2');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:'Barlow Semi Condensed';font-style:normal;font-weight:700;font-display:swap;src:url(/polices/barlow-condensed-700-ext.woff2) format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:'Barlow Semi Condensed';font-style:normal;font-weight:700;font-display:swap;src:url(/polices/barlow-condensed-700.woff2) format('woff2');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:'Cinzel';font-style:normal;font-weight:600;font-display:swap;src:url(/polices/cinzel-600-ext.woff2) format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:'Cinzel';font-style:normal;font-weight:600;font-display:swap;src:url(/polices/cinzel-600.woff2) format('woff2');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:'Cinzel';font-style:normal;font-weight:700;font-display:swap;src:url(/polices/cinzel-700-ext.woff2) format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:'Cinzel';font-style:normal;font-weight:700;font-display:swap;src:url(/polices/cinzel-700.woff2) format('woff2');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}

:root{
  color-scheme:light;
  --bg:#E8DEC8;--paper:#F3EBDA;--sleeve:#FBF6EB;--ink:#0A1428;--muted:#5E5B52;--line:#C2AA78;--line-soft:#D9C9A5;--track:#DFD2B4;
  --glow:rgba(200,170,110,.32);
  --cover:#0A1428;--cover-2:#010A13;--cover-ink:#F0E6D2;--cover-muted:#A09B8C;--frame:#785A28;--frame-2:#C8AA6E;
  --brass:#C8AA6E;--brass-2:#F0E6D2;--brass-3:#9A7838;--brass-ink:#010A13;
  --gold:#7A5B22;--gold-bright:#C8AA6E;--hex:#0397AB;--hex-glow:rgba(3,151,171,.3);
  --sheen:rgba(255,246,220,.75);--gloss:rgba(255,255,255,.55);
  --gain:#0E7C70;--loss:#B33A3A;--focus:#0397AB;
  --fury:#D2493D;--calm:#3A9762;--mind:#3A7BD0;--body:#DE8526;--chaos:#8B58C4;--order:#C9A12C;--colorless:#8A9496;
  --r-c:#8E99A4;--r-u:#1A9E96;--r-r:#C72F86;--r-e:#E0631C;--r-s:#C99A12;
  --font-title:"Cinzel","Trajan Pro",Georgia,"Times New Roman",serif;
  --font-display:"Barlow Semi Condensed","Arial Narrow","Segoe UI",system-ui,sans-serif;
  --font-ui:"Barlow","Segoe UI",system-ui,-apple-system,Roboto,sans-serif;
  box-sizing:border-box;
  padding-top:env(safe-area-inset-top,0px);
  padding-bottom:env(safe-area-inset-bottom,0px);
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    color-scheme:dark;
    --bg:#010A13;--paper:#091428;--sleeve:#0E1D35;--ink:#F0E6D2;--muted:#A09B8C;--line:#5B4A22;--line-soft:#33291A;--track:#16202E;
    --glow:rgba(10,200,185,.11);
    --cover:#0A1428;--cover-2:#010A13;--cover-ink:#F0E6D2;--cover-muted:#A09B8C;--frame:#785A28;--frame-2:#C8AA6E;
    --brass:#C8AA6E;--brass-2:#F0E6D2;--brass-3:#785A28;--brass-ink:#010A13;
    --gold:#C8AA6E;--gold-bright:#C8AA6E;--hex:#0AC8B9;--hex-glow:rgba(10,200,185,.35);
    --sheen:rgba(240,230,210,.22);--gloss:rgba(255,255,255,.035);
    --gain:#0AC8B9;--loss:#E84057;--focus:#0AC8B9;
    --r-c:#D4DAE0;--r-u:#3CC8BE;--r-r:#E2399C;--r-e:#F2762C;--r-s:#F2C230;
  }
}
:root[data-theme="dark"]{
  color-scheme:dark;
  --bg:#010A13;--paper:#091428;--sleeve:#0E1D35;--ink:#F0E6D2;--muted:#A09B8C;--line:#5B4A22;--line-soft:#33291A;--track:#16202E;
  --glow:rgba(10,200,185,.11);
  --cover:#0A1428;--cover-2:#010A13;--cover-ink:#F0E6D2;--cover-muted:#A09B8C;--frame:#785A28;--frame-2:#C8AA6E;
  --brass:#C8AA6E;--brass-2:#F0E6D2;--brass-3:#785A28;--brass-ink:#010A13;
  --gold:#C8AA6E;--gold-bright:#C8AA6E;--hex:#0AC8B9;--hex-glow:rgba(10,200,185,.35);
  --sheen:rgba(240,230,210,.22);--gloss:rgba(255,255,255,.035);
  --gain:#0AC8B9;--loss:#E84057;--focus:#0AC8B9;
  --r-c:#D4DAE0;--r-u:#3CC8BE;--r-r:#E2399C;--r-e:#F2762C;--r-s:#F2C230;
}
*,*::before,*::after{box-sizing:inherit}
html{scroll-padding-top:env(safe-area-inset-top,0px);-webkit-text-size-adjust:100%}
body{margin:0;background-color:var(--bg);background-image:radial-gradient(1100px 520px at 50% -8%,var(--glow),transparent 70%);background-repeat:no-repeat;color:var(--ink);font:16px/1.5 var(--font-ui)}
body::before{content:"";position:fixed;inset:0 0 auto;height:env(safe-area-inset-top,0px);z-index:10;background:var(--bg)}
button{font:inherit;color:inherit}
:focus-visible{outline:2px solid var(--focus);outline-offset:2px}
h1,h2,h3,h4{font-family:var(--font-title);font-weight:700;line-height:1.15;margin:0;letter-spacing:.02em}
[hidden]{display:none!important}
.sr{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.shell{max-width:1080px;margin:0 auto;padding:clamp(10px,2.5vw,24px) clamp(10px,3vw,28px) 44px}

/* Couverture */
.cover{position:relative;display:grid;gap:22px;align-items:center;color:var(--cover-ink);border:1px solid var(--frame);border-radius:3px;padding:26px 20px 28px 54px;overflow:hidden;
  background:radial-gradient(ellipse 70% 95% at 18% -5%,rgba(10,200,185,.24),transparent 62%),radial-gradient(ellipse 55% 80% at 100% 110%,rgba(200,170,110,.16),transparent 60%),linear-gradient(180deg,var(--cover),var(--cover-2));
  box-shadow:inset 0 0 0 3px var(--cover-2),inset 0 0 0 4px rgba(200,170,110,.42)}
.cover::before,.cover::after{content:"";position:absolute;width:24px;height:24px;border:0 solid var(--frame-2);pointer-events:none}
.cover::before{top:8px;left:8px;border-width:2px 0 0 2px}
.cover::after{bottom:8px;right:8px;border-width:0 2px 2px 0}
.rings{position:absolute;left:21px;top:0;bottom:0;display:flex;flex-direction:column;justify-content:space-evenly;padding:20px 0}
.rings span{display:block;width:11px;height:11px;transform:rotate(45deg);background:linear-gradient(135deg,#7FF5EC,#0AC8B9 45%,#005A82);border:1px solid var(--frame-2);box-shadow:0 0 10px rgba(10,200,185,.5)}
.cover h1{font-size:clamp(1.5rem,4.6vw,2.3rem);color:#EADBB8}
@supports ((-webkit-background-clip:text) or (background-clip:text)){
  .cover h1{background:linear-gradient(180deg,#F0E6D2 15%,#C8AA6E 85%);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
}
.cover .sub{margin:6px 0 0;color:var(--cover-muted);font-family:var(--font-display);font-weight:500;letter-spacing:.05em}
.cover .lede{margin:14px 0 0;max-width:50ch;font-size:1.02rem}
.status{margin:10px 0 0;color:var(--cover-muted);font-size:.9rem;max-width:52ch}
.status:empty{display:none}
.sticker{position:relative;justify-self:start;color:var(--brass-ink);padding:14px 26px 16px;max-width:100%;
  background:linear-gradient(180deg,var(--brass-2) 0%,var(--brass) 40%,var(--brass-3) 100%);
  clip-path:polygon(12px 0,calc(100% - 12px) 0,100% 12px,100% calc(100% - 12px),calc(100% - 12px) 100%,12px 100%,0 calc(100% - 12px),0 12px);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.65),inset 0 -2px 0 rgba(0,0,0,.25)}
.sticker p{margin:0}
.sticker .lbl{font-family:var(--font-display);font-weight:700;font-size:.92rem;letter-spacing:.06em}
.sticker .val{margin-top:2px;font-family:var(--font-display);font-weight:700;font-size:clamp(2.2rem,9vw,3.5rem);line-height:1.02;font-variant-numeric:tabular-nums;white-space:nowrap}
.sticker .when{margin-top:8px;font-size:.84rem;font-weight:500;opacity:.85;max-width:30ch}
@media (min-width:760px){
  .cover{grid-template-columns:minmax(0,1fr) auto;padding:34px 44px 36px 78px}
  .rings{left:28px}
  .rings span{width:13px;height:13px}
  .sticker{justify-self:end}
}

/* Navigation */
.tabs{position:sticky;top:env(safe-area-inset-top,0px);z-index:5;display:flex;gap:2px;overflow-x:auto;scrollbar-width:none;background:var(--bg);padding:14px 2px 0;border-bottom:1px solid var(--line)}
.tabs::-webkit-scrollbar{display:none}
.tab{flex:0 0 auto;display:block;padding:10px 15px 11px;margin-bottom:-1px;color:var(--muted);text-decoration:none;font-family:var(--font-display);font-weight:600;font-size:.98rem;letter-spacing:.08em;text-transform:uppercase;border-bottom:2px solid transparent}
.tab[aria-current="page"]{color:var(--gold);border-bottom-color:var(--gold-bright);text-shadow:0 0 14px var(--hex-glow)}
.panel{background:var(--paper);border:1px solid var(--line);border-top:0;border-radius:0 0 3px 3px;padding:clamp(14px,3vw,30px);min-height:420px;box-shadow:inset 0 0 0 3px var(--paper),inset 0 0 0 4px var(--line-soft)}
.view[hidden]{display:none}
.view h2{font-size:1.3rem;margin-bottom:14px;color:var(--gold)}
.view h2::after{content:"";display:block;width:64px;height:1px;margin-top:8px;background:linear-gradient(90deg,var(--gold-bright),transparent)}
.view h3{font-size:1.02rem;margin-bottom:8px}
.intro{margin:0 0 16px;color:var(--muted);max-width:62ch}
.intro b{color:var(--ink)}
.recap{margin:0 0 18px;max-width:64ch;font-size:1.02rem}
.list-title{margin-top:26px}

/* Recherche de case */
.finder{display:flex;flex-wrap:wrap;align-items:center;gap:8px 10px;max-width:640px;margin:0 auto 14px}
.finder label{font-family:var(--font-display);font-weight:600;letter-spacing:.03em}
.finder input{flex:1 1 160px;min-width:0}
.find-out{flex-basis:100%;margin:0;font-size:.92rem}
.find-out:empty{display:none}
.quick{display:inline-flex;align-items:center;gap:7px;white-space:nowrap;font-family:var(--font-display);font-weight:600;font-size:.95rem;cursor:pointer;padding:6px 11px;border:1px solid var(--line);border-radius:2px;background:var(--sleeve)}
.quick input{width:18px;height:18px;accent-color:var(--hex);margin:0}
.quick-hint{flex-basis:100%;margin:0;color:var(--muted);font-size:.9rem}

/* Pages et pochettes */
.pagebar{position:sticky;top:calc(var(--tabs-h,60px) + env(safe-area-inset-top,0px));z-index:5;display:flex;align-items:center;gap:8px;max-width:640px;margin:0 auto 12px;padding:6px 0;background:var(--paper);box-shadow:0 10px 12px -12px rgba(0,0,0,.45)}
.chips{display:flex;gap:6px;overflow-x:auto;flex:1;min-width:0;padding:3px 3px 6px;scrollbar-width:thin}
.chip{position:relative;flex:0 0 auto;display:grid;gap:1px;text-align:left;background:var(--sleeve);border:1px solid var(--line);border-radius:2px;padding:6px 12px;cursor:pointer;font-family:var(--font-display);font-weight:600;font-size:.98rem;color:var(--ink)}
.chip small{color:var(--muted);font-size:.84rem;font-weight:600}
.chip[aria-pressed="true"]{background:linear-gradient(180deg,var(--brass-2),var(--brass) 45%,var(--brass-3));border-color:var(--gold-bright);color:var(--brass-ink);box-shadow:0 0 14px rgba(200,170,110,.5)}
.chip[aria-pressed="true"] small,.chip[aria-pressed="true"].full small,.chip[aria-pressed="true"] .star{color:var(--brass-ink)}
.chip .star{color:var(--gold);margin-left:5px;font-size:.78em}
.chip.full small{color:var(--gain)}
.step{flex:0 0 auto;width:38px;height:38px;border-radius:2px;border:1px solid var(--line);background:var(--sleeve);color:var(--gold);cursor:pointer;font-size:1.25rem;line-height:1}
.step:disabled{opacity:.35;cursor:default}
.grid{--cols:3;display:grid;grid-template-columns:repeat(var(--cols),minmax(0,1fr));gap:clamp(6px,1.6vw,14px);max-width:640px;margin:0 auto}
.pocket{position:relative;aspect-ratio:5/7;display:flex;flex-direction:column;gap:4px;min-width:0;padding:12px 9px 9px;background:linear-gradient(180deg,var(--sleeve),var(--paper));border:1px solid var(--line);border-radius:5px;text-align:left;cursor:pointer;overflow:hidden;container-type:inline-size;color:var(--ink)}
.pocket::before{content:"";position:absolute;inset:0;background:linear-gradient(158deg,var(--gloss),transparent 42%);pointer-events:none}
.pk-art{position:absolute;right:7%;bottom:17%;font-family:var(--font-display);font-weight:700;font-size:2.4rem;font-size:clamp(1.5rem,30cqw,4.4rem);line-height:1;letter-spacing:-.01em;color:var(--ink);opacity:.07;pointer-events:none;white-space:nowrap}
.pocket .strip{position:absolute;inset:0 0 auto;height:4px}
.pk-top{display:flex;align-items:center;justify-content:space-between;gap:4px;font-family:var(--font-display);font-weight:600;font-size:.8rem;color:var(--muted)}
.pk-name{position:relative;font-family:var(--font-display);font-weight:600;font-size:clamp(.74rem,2.4vw,.95rem);font-size:clamp(.72rem,10.5cqw,1.02rem);line-height:1.22;overflow:hidden;display:-webkit-box;-webkit-line-clamp:4;-webkit-box-orient:vertical;overflow-wrap:break-word;hyphens:auto}
.pk-tags{display:flex;flex-wrap:wrap;gap:3px}
.tag{display:inline-flex;align-items:center;gap:5px;font-family:var(--font-display);font-weight:500;font-size:.72rem;line-height:1.35;border:1px solid var(--line);border-radius:2px;padding:0 5px;color:var(--muted);white-space:nowrap}
.pk-foot{margin-top:auto}
.pk-val{position:relative;font-size:clamp(.84rem,2.9vw,1.14rem);font-size:clamp(.82rem,12.5cqw,1.24rem);font-variant-numeric:tabular-nums;white-space:nowrap}
.pocket[data-tier="1"]{border-color:var(--gold-bright)}
.pocket[data-tier="2"]{border-color:var(--gold-bright);box-shadow:inset 0 0 0 1px rgba(200,170,110,.4)}
.pocket[data-tier="3"]{border-color:var(--gold-bright);box-shadow:inset 0 0 0 1px var(--gold-bright),0 0 18px rgba(200,170,110,.35)}
.pocket[data-tier="2"] .pk-val,.pocket[data-tier="3"] .pk-val{color:var(--gold)}
.pocket[data-tier="2"]::after,.pocket[data-tier="3"]::after{content:"";position:absolute;inset:0;background:linear-gradient(112deg,transparent 36%,var(--sheen) 50%,transparent 64%);background-size:260% 100%;background-position:130% 0;pointer-events:none}
.sweep .pocket[data-tier="2"]::after,.sweep .pocket[data-tier="3"]::after{animation:sweep 1.5s cubic-bezier(.3,.6,.3,1) .15s 1}
@keyframes sweep{from{background-position:130% 0}to{background-position:-30% 0}}
.pocket.empty{background:transparent;border:1px dashed var(--line-soft);align-items:center;justify-content:center;color:var(--muted);cursor:default;font-size:.8rem}
.pocket.empty::before{display:none}
.pocket.ghost{opacity:.42;background:transparent;border:1px dashed var(--line)}
.pocket.ghost::before{display:none}
.pocket.ghost:hover{opacity:.75}
.pocket.target{outline:2px solid var(--hex);outline-offset:2px;box-shadow:0 0 16px var(--hex-glow)}
.pocket.pulse{animation:pulse .7s ease-out 1}
.chip.is-target{border-color:var(--hex);box-shadow:inset 0 -2px 0 var(--hex),0 0 14px var(--hex-glow)}
.chip.is-target::after{content:"";position:absolute;top:-4px;right:-4px;width:9px;height:9px;transform:rotate(45deg);background:var(--hex);box-shadow:0 0 8px var(--hex-glow)}
.found{display:grid;grid-template-columns:auto minmax(0,1fr);gap:12px 16px;align-items:start;padding:12px 14px;border:1px solid var(--gold-bright);border-radius:3px;background:linear-gradient(180deg,var(--sleeve),var(--paper));box-shadow:0 0 18px var(--hex-glow)}
.mini{display:grid;grid-template-columns:repeat(var(--cols,3),14px);gap:3px;padding:6px;border:1px solid var(--line);border-radius:2px;background:var(--paper)}
.mini i{display:block;width:14px;height:19px;border:1px solid var(--line);border-radius:2px}
.mini i.on{background:var(--hex);border-color:var(--hex);box-shadow:0 0 8px var(--hex-glow)}
.found-nums{display:flex;gap:20px;align-items:flex-end}
.found-nums div{display:grid}
.found-nums small{color:var(--muted);font-family:var(--font-display);font-weight:600;font-size:.82rem}
.found-nums b{font-family:var(--font-display);font-weight:700;font-size:2.1rem;line-height:1;color:var(--gold);font-variant-numeric:tabular-nums}
.found-card{margin:8px 0 0}
.found-card span{display:block;color:var(--muted);font-size:.86rem}
.found-hint{margin:6px 0 0;color:var(--muted);font-size:.88rem}
.found-own{margin:6px 0 0;font-family:var(--font-display);font-weight:600}
.found-own.yes{color:var(--gain)}
.found-actions{display:flex;flex-wrap:wrap;gap:8px;margin-top:10px}
.fbtn{border:1px solid var(--line);background:var(--sleeve);color:var(--gold);border-radius:2px;padding:7px 12px;cursor:pointer;font-family:var(--font-display);font-weight:600;font-size:.92rem}
.fbtn.gold{border:0;background:linear-gradient(180deg,var(--brass-2),var(--brass) 45%,var(--brass-3));color:var(--brass-ink)}
.find-miss{margin:0;color:var(--muted)}
.dup-sum .recap{margin-top:8px}
.dup-add{margin:18px 0 6px;padding:14px;border:1px solid var(--line);border-radius:3px;background:var(--sleeve);box-shadow:inset 0 0 0 3px var(--sleeve),inset 0 0 0 4px var(--line-soft)}
.dup-add h3{margin-bottom:10px}
.dup-add input[type="search"]{width:100%}
.dup-matches{display:flex;flex-wrap:wrap;gap:6px;margin-top:8px}
.dup-matches:empty{display:none}
.mchip{border:1px solid var(--line);background:var(--paper);color:var(--ink);border-radius:2px;padding:5px 9px;cursor:pointer;font-family:var(--font-display);font-weight:600;font-size:.9rem;text-align:left}
.mchip span{color:var(--muted);margin-right:4px}
.dpick{margin-top:12px;display:grid;gap:8px}
.dpick-card{display:flex;align-items:center;gap:10px}
.dpick-card b{display:block;font-size:1.05rem}
.dpick-card small{display:block;color:var(--muted)}
.dpick-status{margin:0;font-family:var(--font-display);font-weight:600}
.dpick-actions{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.drow{display:grid;grid-template-columns:3.4em 14px minmax(0,1fr) auto;gap:2px 10px;align-items:center;padding:9px 6px;border-bottom:1px solid var(--line-soft)}
.drow .code{font-family:var(--font-display);font-weight:600;font-size:.86rem;color:var(--muted);white-space:nowrap}
.dname{min-width:0;border:0;background:none;padding:0;text-align:left;cursor:pointer;color:var(--ink)}
.dname b{display:block;font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.dname small{display:block;color:var(--muted);font-size:.8rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.dpx{display:grid;justify-items:end;gap:3px;text-align:right}
.dpx b{font-family:var(--font-display);font-weight:700;font-size:1.05rem;font-variant-numeric:tabular-nums;color:var(--gold)}
.dpx small{color:var(--muted);font-size:.78rem;white-space:nowrap}
.dstep{display:flex;align-items:center;gap:6px}
.dstep b{font-family:var(--font-display);font-weight:700;color:var(--ink);font-size:.95rem;min-width:2.2em;text-align:center}
.stp.sm{width:28px;height:28px;font-size:1rem}
.dqty{font-family:var(--font-display);font-weight:700;color:var(--ink)}
.op-top{margin:0 0 16px}
.op-form,.op-edit{margin:0 0 16px;padding:14px;border:1px solid var(--line);border-radius:3px;background:var(--sleeve)}
.op-edit{margin:12px 0 4px;background:var(--paper)}
.op-form h3{margin-bottom:10px}
.op-edit h4{margin:16px 0 8px;font-size:.98rem}
.op-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px 10px}
.op-grid label{display:grid;gap:4px;font-size:.84rem;color:var(--muted);font-weight:600}
.op-grid .wide{grid-column:1 / -1}
.op-grid input,.op-grid select,.op-edit textarea,.op-edit input[type="search"]{font:inherit;font-size:.95rem;color:var(--ink);background:var(--sleeve);border:1px solid var(--line);border-radius:2px;padding:7px 10px;min-width:0;width:100%}
.op-edit textarea{resize:vertical;min-height:72px}
.op-grid input:focus,.op-grid select:focus,.op-edit textarea:focus,.op-edit input[type="search"]:focus{border-color:var(--hex)}
.op-check{display:flex;align-items:center;gap:8px;margin-top:12px;font-size:.92rem}
.op-check input{width:18px;height:18px;flex:0 0 auto;accent-color:var(--hex);margin:0}
.op-row .op-right{display:flex;align-items:center;gap:8px}
.ticket.editing{border-color:var(--gold-bright)}
.pocket.has-art{background-image:linear-gradient(180deg,rgba(1,10,19,.6) 0%,rgba(1,10,19,.08) 32%,rgba(1,10,19,.08) 55%,rgba(1,10,19,.88) 100%),var(--art);background-size:cover;background-position:center}
.pocket.has-art .pk-art{display:none}
.pocket.has-art .pk-top,.pocket.has-art .pk-name,.pocket.has-art .pk-val{color:#F0E6D2;text-shadow:0 1px 3px rgba(0,0,0,.85)}
.pocket.has-art .tag{background:rgba(1,10,19,.6);color:#F0E6D2;border-color:rgba(200,170,110,.6)}
.pocket.has-art[data-tier="2"] .pk-val,.pocket.has-art[data-tier="3"] .pk-val{color:#E8C873}
.dlg-art{display:block;width:100%;max-height:360px;object-fit:contain;background:#010A13;border-bottom:1px solid var(--line)}
.art-tools{margin-top:18px;padding-top:12px;border-top:1px dashed var(--line)}
.art-tools .intro{margin:4px 0 0}
.art-pick{display:inline-flex;align-items:center;cursor:pointer}
.art-import{max-width:640px;margin:0 auto 14px}
.imp-bar{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:8px}
.imp-bar span{color:var(--muted);font-family:var(--font-display);font-weight:600}
.imp{padding:14px;border:1px solid var(--gold-bright);border-radius:3px;background:var(--sleeve)}
.imp h3{margin-bottom:8px}
.imp .intro{margin:0 0 10px}
.imp-sum{margin:12px 0 0;font-family:var(--font-display);font-weight:600}
.imp details{margin-top:8px;color:var(--muted);font-size:.9rem}
.imp details ul{margin:6px 0 0;padding-left:18px;max-height:180px;overflow:auto}
.imp-prog{height:8px;margin-top:12px;border:1px solid var(--line);border-radius:1px;background:var(--track);overflow:hidden}
.imp-prog i{display:block;height:100%;background:linear-gradient(90deg,var(--hex),var(--gold-bright))}
.imp-note{margin:8px 0 0;color:var(--muted);font-size:.88rem}
.pocket.ghost.target{opacity:.85}
@keyframes pulse{0%{transform:scale(1)}35%{transform:scale(1.05)}100%{transform:scale(1)}}
.quick-on .pocket:not(.empty){cursor:copy}
.pagesum{max-width:640px;margin:14px auto 0;color:var(--muted);font-size:.94rem}
.pagesum:empty{display:none}
.hint{max-width:640px;margin:18px auto 0;padding:14px 16px;border:1px dashed var(--line);border-radius:2px;background:var(--sleeve)}
.outside{max-width:640px;margin:28px auto 0}

/* Listes */
.list{display:grid;border-top:1px solid var(--line)}
.row{display:grid;grid-template-columns:3.4em 14px minmax(0,1fr) auto;gap:2px 10px;align-items:center;width:100%;padding:9px 6px;border:0;border-bottom:1px solid var(--line-soft);background:none;text-align:left;cursor:pointer;color:var(--ink)}
.row:hover{background:var(--sleeve)}
.row:disabled,.row.static{cursor:default}
.row.static:hover{background:none}
.row .code{font-family:var(--font-display);font-weight:600;font-size:.86rem;color:var(--muted);white-space:nowrap}
.row .nm{min-width:0}
.row .nm b{display:block;font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.row .nm small{display:block;color:var(--muted);font-size:.8rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.show-all .row.is-missing{opacity:.45}
.show-all .row.is-missing:hover{opacity:.8}
.row .px{font-family:var(--font-display);font-weight:600;font-size:1.02rem;font-variant-numeric:tabular-nums;text-align:right;white-space:nowrap}
.row .own{display:block;font-family:var(--font-ui);font-weight:600;font-size:.72rem;color:var(--gain)}
.px.up{color:var(--gain)}
.px.down{color:var(--loss)}
.rank{list-style:none;margin:0;padding:0;border-top:1px solid var(--line)}
.rank .row{grid-template-columns:2em 14px minmax(0,1fr) auto}
.rank .pos{font-family:var(--font-title);font-weight:700;font-size:1.1rem;color:var(--gold)}
.glyph{display:block}
.empty-note{color:var(--muted);padding:14px 4px;margin:0}

/* Progression */
.prog{display:grid;gap:26px;margin-bottom:8px}
@media (min-width:760px){.prog{grid-template-columns:1.15fr 1fr;gap:40px}}
.count{font-family:var(--font-display);font-weight:700;font-size:clamp(2.5rem,7vw,3.4rem);line-height:1;margin:0;color:var(--gold)}
.count span{font-size:.45em;color:var(--muted);font-weight:600}
.pct{margin:6px 0 12px;color:var(--muted)}
.segbar{display:flex;height:10px;border-radius:1px;overflow:hidden;background:var(--track);border:1px solid var(--line-soft)}
.segbar i{display:block;height:100%}
.legend{display:grid;gap:10px;margin-top:16px}
.lg{display:grid;grid-template-columns:14px minmax(0,1fr) auto;gap:4px 10px;align-items:center}
.lgn{font-family:var(--font-display);font-weight:600;font-variant-numeric:tabular-nums}
.lg .bar{grid-column:2 / 4;height:4px;border-radius:1px;background:var(--track);overflow:hidden}
.lg .bar i{display:block;height:100%}
.budget{margin:20px 0 0;padding:12px 14px;border-radius:2px;background:var(--sleeve);border:1px solid var(--line);border-left:3px solid var(--gold-bright)}
.controls{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin:0 0 12px}
.seg{display:inline-flex;border:1px solid var(--line);border-radius:2px;overflow:hidden;background:var(--sleeve)}
.seg button{border:0;background:none;padding:7px 12px;cursor:pointer;font-family:var(--font-display);font-weight:600;font-size:.95rem;color:var(--muted)}
.seg button[aria-pressed="true"]{background:linear-gradient(180deg,var(--brass-2),var(--brass) 45%,var(--brass-3));color:var(--brass-ink)}
select,input[type="search"]{font:inherit;font-size:.95rem;color:var(--ink);background:var(--sleeve);border:1px solid var(--line);border-radius:2px;padding:7px 10px}
select:focus,input[type="search"]:focus{border-color:var(--hex)}
input[type="search"]{flex:1 1 170px;min-width:0}
.listcount{margin:0 0 6px;color:var(--muted);font-size:.9rem}

/* Ouvertures */
.tickets{display:grid;gap:14px}
.ticket{background:var(--sleeve);border:1px solid var(--line);border-radius:3px;padding:14px 16px;box-shadow:inset 0 0 0 3px var(--sleeve),inset 0 0 0 4px var(--line-soft)}
.ticket header{display:flex;flex-wrap:wrap;justify-content:space-between;gap:6px 12px;align-items:flex-start}
.ticket h3{margin:0}
.ticket .date{margin:2px 0 0;color:var(--muted);font-size:.9rem}
.figures{display:flex;flex-wrap:wrap;gap:8px 22px;margin-top:12px;padding-top:12px;border-top:1px dashed var(--line)}
.fig{display:grid}
.fig small{color:var(--muted);font-size:.8rem}
.fig b{font-family:var(--font-display);font-size:1.1rem;font-variant-numeric:tabular-nums}
.verdict{font-family:var(--font-display);font-weight:700;border-radius:2px;padding:2px 10px;font-size:.9rem;white-space:nowrap;letter-spacing:.02em}
.verdict.gain{color:var(--gain);border:1px solid var(--gain)}
.verdict.loss{color:var(--loss);border:1px solid var(--loss)}
.ticket details{margin-top:12px}
.ticket summary{cursor:pointer;font-family:var(--font-display);font-weight:600;color:var(--gold)}
.ticket details .list{margin-top:8px}
.note{color:var(--muted);font-size:.86rem;margin:12px 0 0}

/* Trésors */
.split{display:grid;gap:30px}
@media (min-width:860px){.split{grid-template-columns:1.15fr 1fr;gap:40px}}

/* Évolution */
.chart{display:block;width:100%;height:auto;background:var(--sleeve);border:1px solid var(--line);border-radius:3px}
.chart .axis{fill:var(--muted);font:500 12px var(--font-display)}
.chart .gl{stroke:var(--line-soft);stroke-width:1}
.chart .line{fill:none;stroke:var(--gold);stroke-width:2.5;stroke-linejoin:round;stroke-linecap:round}
.chart .area{fill:var(--gold-bright);opacity:.16}
.chart .dot{fill:var(--paper);stroke:var(--hex);stroke-width:2.2}
.movers{display:grid;gap:22px;margin-top:24px}
@media (min-width:760px){.movers{grid-template-columns:1fr 1fr;gap:34px}}

/* Fiche carte */
dialog{border:1px solid var(--frame);padding:0;border-radius:3px;width:min(440px,calc(100vw - 24px));max-height:calc(100dvh - 32px);background:var(--paper);color:var(--ink);overflow:auto;box-shadow:inset 0 0 0 3px var(--paper),inset 0 0 0 4px var(--line-soft),0 24px 70px rgba(0,0,0,.5)}
dialog::backdrop{background:rgba(1,10,19,.74)}
.dlg-strip{height:5px}
.dlg-close{position:absolute;top:16px;right:14px;width:34px;height:34px;border-radius:2px;border:1px solid var(--line);background:var(--sleeve);color:var(--gold);cursor:pointer;font-size:1.15rem;line-height:1}
.dlg-body{padding:16px 20px 20px}
.dlg-code{margin:0 44px 2px 0;font-family:var(--font-display);font-weight:600;color:var(--muted);letter-spacing:.03em}
.dlg-body h3{font-size:1.3rem;margin:0 44px 0 0;color:var(--gold)}
.dlg-vo{margin:3px 0 0;color:var(--muted)}
.dlg-place{margin:6px 0 4px;font-family:var(--font-display);font-weight:600}
.dlg-meta{display:flex;flex-wrap:wrap;gap:6px;margin:12px 0}
.dlg-meta .tag{font-size:.82rem;padding:2px 8px}
.cotes{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;margin:14px 0}
.cotes div{background:var(--sleeve);border:1px solid var(--line);border-radius:2px;padding:8px 10px}
.cotes small{display:block;color:var(--muted);font-size:.76rem;line-height:1.25}
.cotes b{font-family:var(--font-display);font-size:1.1rem;font-variant-numeric:tabular-nums}
.dlg-body h4{font-size:.98rem;margin:16px 0 4px}
.owned{margin:0;padding-left:18px}
.owned li{margin:4px 0}
.dlg-miss{color:var(--muted);margin:10px 0 0}
.cta{display:inline-block;margin-top:16px;padding:10px 16px;border-radius:2px;background:linear-gradient(180deg,var(--brass-2),var(--brass) 45%,var(--brass-3));color:var(--brass-ink);text-decoration:none;font-family:var(--font-display);font-weight:700;letter-spacing:.03em;box-shadow:inset 0 1px 0 rgba(255,255,255,.6)}
.alt-link{margin:10px 0 0;font-size:.86rem}
.alt-link a{color:var(--muted)}
.editor{margin:14px 0 6px;padding:12px 14px;border:1px solid var(--line);border-radius:2px;background:var(--sleeve)}
.editor h4{margin:0 0 10px}
.steppers{display:flex;flex-wrap:wrap;gap:10px 22px}
.stepper{display:flex;align-items:center;gap:8px}
.stp-label{font-family:var(--font-display);font-weight:600;min-width:5.4em}
.stp{width:38px;height:38px;border-radius:2px;border:1px solid var(--line);background:var(--paper);color:var(--gold);cursor:pointer;font-size:1.25rem;line-height:1}
.stp:disabled{opacity:.35;cursor:default}
.stepper output{min-width:1.6em;text-align:center;font-family:var(--font-display);font-weight:700;font-size:1.2rem;font-variant-numeric:tabular-nums}
.edit-fields{display:grid;grid-template-columns:1fr 1fr;gap:8px 10px;margin-top:14px}
.edit-fields label{display:grid;gap:4px;font-size:.84rem;color:var(--muted);font-weight:600}
.edit-fields .ef-name{grid-column:1 / -1}
.edit-fields input[type="text"]{font:inherit;font-size:.95rem;color:var(--ink);background:var(--paper);border:1px solid var(--line);border-radius:2px;padding:7px 10px;min-width:0}
.edit-fields input[type="text"]:focus{border-color:var(--hex)}
.edit-fields select{background:var(--paper);min-width:0}

/* Messages */
.toast-wrap{position:fixed;left:0;right:0;bottom:0;z-index:30;display:flex;justify-content:center;padding:0 12px calc(14px + env(safe-area-inset-bottom,0px));pointer-events:none}
.toast{pointer-events:auto;display:flex;align-items:center;gap:14px;max-width:100%;background:var(--cover);color:var(--cover-ink);border:1px solid var(--frame-2);border-radius:2px;padding:10px 12px 10px 16px;font-size:.94rem;box-shadow:0 8px 24px rgba(0,0,0,.35)}
.toast button{border:0;background:none;color:var(--frame-2);font-family:var(--font-display);font-weight:700;letter-spacing:.03em;text-decoration:underline;cursor:pointer;padding:4px 6px}

.foot{max-width:68ch;margin:22px auto 0;color:var(--muted);font-size:.86rem;text-align:center}
.foot a{color:inherit}
@media (prefers-reduced-motion:reduce){.sweep .pocket::after{animation:none!important}.pocket.pulse{animation:none}}

.pocket.ghost.has-art{opacity:.82;filter:grayscale(1) brightness(.78)}
.pocket.ghost.has-art:hover{opacity:.95}
.op-last{margin-top:12px}
.op-last.st-new,.op-last.st-up{border-color:var(--hex);box-shadow:0 0 18px var(--hex-glow)}
.op-last.st-dup{border-color:var(--line);box-shadow:none}
.op-dup-mark{display:grid;place-items:center;width:48px;height:62px;border:1px dashed var(--line);border-radius:3px;font-family:var(--font-display);font-weight:700;font-size:1.2rem;color:var(--muted)}
.op-more,.op-settings{margin-top:14px}
.op-more summary,.op-settings summary,.op-edit details>summary{cursor:pointer;font-family:var(--font-display);font-weight:600;color:var(--gold);padding:4px 0}
.op-edit details{margin-top:10px}
.op-edit details .list{margin-top:6px}
.op-more textarea{margin-top:8px}
.op-settings .op-grid{margin-top:8px}
.place-group{margin-top:10px;border:1px solid var(--line);border-radius:3px;background:var(--sleeve);overflow:hidden}
.place-head{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:4px 10px;margin:0;padding:8px 12px;background:linear-gradient(180deg,var(--paper),var(--sleeve));border-bottom:1px solid var(--line-soft)}
.place-head b{font-family:var(--font-display);font-weight:700;font-size:1.05rem;color:var(--gold)}
.place-head span{color:var(--muted);font-size:.86rem}
.place-row{display:grid;grid-template-columns:20px 30px 3.1em minmax(0,1fr) auto;gap:2px 8px;align-items:center;padding:9px 12px;border-bottom:1px solid var(--line-soft);cursor:pointer}
.place-row:last-child{border-bottom:0}
.place-row input{width:18px;height:18px;margin:0;accent-color:var(--hex)}
.place-thumb{position:relative;display:block;width:30px;aspect-ratio:5/7;overflow:hidden;border:1px solid var(--line);background:var(--cover-2)}
.place-thumb img,.place-thumb>span{position:absolute;inset:0;display:block;width:100%;height:100%;object-fit:cover}
.place-case{font-family:var(--font-display);font-weight:700;color:var(--hex)}
.place-row .nm{min-width:0}
.place-row .nm b{display:block;font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.place-row .nm small{display:block;color:var(--muted);font-size:.8rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.place-row .px{font-family:var(--font-display);font-weight:600;white-space:nowrap}
.place-row.done{opacity:.6;grid-template-columns:20px 30px 5.1em minmax(0,1fr)}
/* Tout montant affiché porte la classe « prix », en plus de sa variante d'apparence.
   C'est le crochet commun : une seule règle suffit pour agir sur tous les prix, au lieu
   d'énumérer six noms de classes et d'en oublier un. La famille et la graisse, que cinq
   variantes répétaient, vivent ici. */
.prix{font-family:var(--font-display);font-weight:700}
/* Mode visiteur : sans compte, on montre le set et rien d'autre.
   Les cotes restent hors de la vue publique — elles viennent d'une source qui ne nous
   autorise pas à les republier, et elles n'ont de sens que sur une collection à soi. */
body.sans-cotes .prix{display:none}
/* Les sections personnelles n'ont rien à dire à qui n'a pas de classeur. */
body.visiteur #bnav a[data-nav="ouvertures"],
body.visiteur #bnav a[data-nav="doubles"],
body.visiteur #bnav a[data-nav="chasse"],
body.visiteur .tabs a[href="#ouvertures"],
body.visiteur .tabs a[href="#doubles"],
body.visiteur .tabs a[href="#chasse"],
body.visiteur .tabs a[href="#echange"]{display:none!important}  /* .tab est lui-même en !important */
body.visiteur .status{color:var(--parch)}
/* Pour un visiteur, toute carte est « manquante » : le grisé et la transparence ne
   veulent plus rien dire, et ils rendraient le set entier terne. Les visuels du
   référentiel s'affichent donc tels quels — c'est le propos d'une vue de référence. */
body.visiteur .pocket.ghost{opacity:1;border-style:solid}
body.visiteur .pocket.ghost.has-art,
body.visiteur .pocket.ghost.has-art:hover{opacity:1;filter:none}
body.visiteur .show-all .row.is-missing{opacity:1}
body.visiteur .row.is-missing .rth img,
body.visiteur .vtile.miss .vt-img img{filter:none}
body.visiteur .vtile.miss .gcap{opacity:1}
body.visiteur .gtile:not(.own) .gimg{opacity:1}
/* Les réglages qui ne parlent qu'à un titulaire de compte : import d'illustrations,
   sauvegarde, format du classeur… Un visiteur n'a rien à y faire. Restent les effets
   visuels, qui sont une préférence d'affichage, et le bloc Compte. */
body.visiteur [data-prive]{display:none!important}
/* Sans cotes, l'Évolution n'a rien à montrer : on ne propose pas une vue vide. */
body.sans-cotes .tabs a[href="#evolution"],
body.sans-cotes #more .sheet-row[href="#evolution"]{display:none!important}
.lien-connexion{padding:0;border:0;background:none;font:inherit;color:var(--hex);text-decoration:underline;text-underline-offset:2px;cursor:pointer}
.lien-connexion:hover{color:var(--gold-bright)}
.place-row.done .place-case{color:var(--muted);font-weight:600}
.hit{position:fixed;inset:0;z-index:50;display:grid;place-items:center;overflow:hidden;background:radial-gradient(circle at 50% 48%,rgba(10,200,185,.22),rgba(1,10,19,.86) 62%);cursor:pointer}
.hit.legend{background:radial-gradient(circle at 50% 48%,rgba(200,170,110,.34),rgba(1,10,19,.9) 64%)}
.hit.nice{background:none;pointer-events:none;place-items:end center;padding:0 12px calc(90px + env(safe-area-inset-bottom,0px))}
.hit-card{position:relative;z-index:3;text-align:center;padding:22px 30px 20px;min-width:min(300px,86vw);max-width:92vw;color:#F0E6D2;background:linear-gradient(180deg,#0A1428,#010A13);border:1px solid #C8AA6E;box-shadow:inset 0 0 0 3px #010A13,inset 0 0 0 4px rgba(200,170,110,.5),0 0 46px rgba(200,170,110,.35)}
.hit.nice .hit-card{padding:12px 20px;min-width:0;box-shadow:inset 0 0 0 3px #010A13,inset 0 0 0 4px rgba(200,170,110,.5),0 0 22px rgba(200,170,110,.3)}
.hit-title{margin:0;font-family:var(--font-title);font-weight:700;font-size:clamp(1.3rem,6vw,2rem);letter-spacing:.06em;color:#E8C873}
.hit.nice .hit-title{font-size:1rem}
.hit-name{margin:8px 0 0;font-family:var(--font-display);font-weight:600;font-size:1.15rem}
.hit-val{margin:6px 0 0;font-size:clamp(2.2rem,11vw,3.6rem);line-height:1;color:#F0E6D2;text-shadow:0 0 18px rgba(10,200,185,.55);font-variant-numeric:tabular-nums}
.hit.nice .hit-name{font-size:1rem;margin-top:4px}
.hit.nice .hit-val{font-size:1.4rem}
.hit-where{margin:10px 0 0;color:#0AC8B9;font-family:var(--font-display);font-weight:600}
.hit-rays{position:absolute;left:50%;top:50%;width:170vmax;height:170vmax;margin:-85vmax 0 0 -85vmax;z-index:1;background:repeating-conic-gradient(from 0deg,rgba(200,170,110,.16) 0deg 5deg,transparent 5deg 15deg);-webkit-mask-image:radial-gradient(circle,#000 0%,transparent 55%);mask-image:radial-gradient(circle,#000 0%,transparent 55%)}
.hit.big .hit-rays{display:none}
.hit-ring{position:absolute;left:50%;top:50%;width:46vmin;height:46vmin;margin:-23vmin 0 0 -23vmin;z-index:2;border:2px solid #0AC8B9;border-radius:50%;opacity:0}
.hit-ring.r2{border-color:#C8AA6E}
.hit-parts{position:absolute;inset:0;z-index:2;pointer-events:none}
.hit-parts i{position:absolute;left:50%;top:50%;width:var(--s);height:var(--s);margin:calc(var(--s) / -2) 0 0 calc(var(--s) / -2);background:#C8AA6E;box-shadow:0 0 8px rgba(200,170,110,.8);opacity:0}
.hit-parts i:nth-child(3n){background:#0AC8B9;box-shadow:0 0 8px rgba(10,200,185,.8)}
.hit-parts i:nth-child(5n){background:#F0E6D2}
.hit.go .hit-card{animation:hitIn .55s cubic-bezier(.2,1.5,.4,1) both}
.hit.nice.go .hit-card{animation:hitUp .45s cubic-bezier(.2,1.2,.4,1) both}
.hit.go .hit-rays{animation:hitSpin 9s linear infinite,hitFade .6s ease-out both}
.hit.go .hit-ring{animation:hitRing 1.1s ease-out .05s both}
.hit.go .hit-ring.r2{animation-delay:.3s}
.hit.go .hit-parts i{animation:hitBurst 1.3s cubic-bezier(.12,.75,.3,1) var(--t) both}
.hit.legend.go .hit-title{animation:hitShimmer 1.4s ease-in-out infinite}
@keyframes hitIn{0%{transform:scale(.55);opacity:0}100%{transform:scale(1);opacity:1}}
@keyframes hitUp{0%{transform:translateY(30px);opacity:0}100%{transform:none;opacity:1}}
@keyframes hitSpin{to{transform:rotate(360deg)}}
@keyframes hitFade{from{opacity:0}to{opacity:1}}
@keyframes hitRing{0%{transform:scale(.2);opacity:.9}100%{transform:scale(2.4);opacity:0}}
@keyframes hitBurst{0%{transform:rotate(var(--a)) translateX(0) rotate(45deg) scale(1);opacity:1}80%{opacity:1}100%{transform:rotate(var(--a)) translateX(var(--d)) rotate(45deg) scale(.3);opacity:0}}
@keyframes hitShimmer{0%,100%{text-shadow:0 0 0 rgba(232,200,115,0)}50%{text-shadow:0 0 22px rgba(232,200,115,.95)}}
body.shake .shell{animation:hitShake .6s cubic-bezier(.36,.07,.19,.97) both}
@keyframes hitShake{10%,90%{transform:translateX(-2px)}20%,80%{transform:translateX(4px)}30%,50%,70%{transform:translateX(-7px)}40%,60%{transform:translateX(7px)}}
.hit-art{position:relative;width:min(190px,44vw);aspect-ratio:5/7;margin:0 auto 14px;overflow:hidden;background:#010A13;border:1px solid #C8AA6E;box-shadow:0 0 0 3px #010A13,0 0 0 4px rgba(200,170,110,.55),0 0 34px rgba(10,200,185,.4)}
.hit-art img{display:block;width:100%;height:100%;object-fit:cover}
.hit-art::after{content:"";position:absolute;inset:0;z-index:2;pointer-events:none;background:linear-gradient(115deg,transparent 35%,rgba(255,246,220,.6) 50%,transparent 65%);background-size:260% 100%;background-position:130% 0}
.hit.legend .hit-art::before{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;mix-blend-mode:color-dodge;opacity:.35;background:linear-gradient(135deg,#0AC8B9,#C8AA6E,#B286F0,#0AC8B9);background-size:300% 300%}
.hit.huge .hit-art,.hit.legend .hit-art{width:min(220px,52vw)}
.hit.go .hit-art{animation:hitFlip .75s cubic-bezier(.2,1.2,.4,1) .05s both}
.hit.go .hit-art::after{animation:hitSheen 1.1s ease-out .6s both}
.hit.legend.go .hit-art::before{animation:hitHolo 2.4s linear infinite}
.hit.nice .hit-card.with-art{display:flex;align-items:center;gap:14px;text-align:left}
.hit.nice .hit-art{width:52px;margin:0;flex:0 0 auto;box-shadow:0 0 0 2px #010A13,0 0 0 3px rgba(200,170,110,.55)}
@keyframes hitFlip{0%{transform:perspective(700px) rotateY(90deg) scale(.8);opacity:0}100%{transform:perspective(700px) rotateY(0) scale(1);opacity:1}}
@keyframes hitSheen{from{background-position:130% 0}to{background-position:-30% 0}}
@keyframes hitHolo{0%{background-position:0% 50%}100%{background-position:300% 50%}}
@media (max-height:600px){.hit-art{width:min(130px,34vw)}.hit.huge .hit-art,.hit.legend .hit-art{width:min(150px,38vw)}}
@media (prefers-reduced-motion:reduce){.hit.go *,.hit.go .hit-art::after,.hit.go .hit-art::before{animation:none!important}.hit-parts,.hit-ring{display:none}body.shake .shell{animation:none}}

.rv{position:fixed;inset:0;z-index:50;display:grid;place-items:center;overflow:hidden;padding:calc(16px + env(safe-area-inset-top,0px)) 16px calc(16px + env(safe-area-inset-bottom,0px));background:radial-gradient(circle at 50% 45%,rgba(10,200,185,.16),rgba(1,10,19,.9) 62%)}
.rv.t-legend{background:radial-gradient(circle at 50% 45%,rgba(200,170,110,.34),rgba(1,10,19,.92) 64%)}
.rv-fx{position:absolute;inset:0;pointer-events:none}
.rv-stage{position:relative;z-index:3;display:grid;justify-items:center;gap:12px;width:min(360px,100%)}
.rv-progress{margin:0;color:#A09B8C;font-family:var(--font-display);font-weight:600;letter-spacing:.04em}
.rv-card{position:relative;width:min(300px,78vw);padding:12px 12px 16px;text-align:center;color:#F0E6D2;background:linear-gradient(180deg,#0A1428,#010A13);border:1px solid #C8AA6E;box-shadow:inset 0 0 0 3px #010A13,inset 0 0 0 4px rgba(200,170,110,.45),0 18px 50px rgba(0,0,0,.55);touch-action:none;user-select:none;-webkit-user-select:none;cursor:grab;will-change:transform}
.rv-card.drag{cursor:grabbing}
.rv-card.st-new,.rv-card.st-up{box-shadow:inset 0 0 0 3px #010A13,inset 0 0 0 4px rgba(10,200,185,.6),0 0 30px rgba(10,200,185,.3),0 18px 50px rgba(0,0,0,.55)}
.rv.t-nice .rv-card{box-shadow:inset 0 0 0 3px #010A13,inset 0 0 0 4px rgba(200,170,110,.7),0 0 30px rgba(200,170,110,.35),0 18px 50px rgba(0,0,0,.55)}
.rv-art{position:relative;width:64%;margin:0 auto;aspect-ratio:5/7;overflow:hidden;border:1px solid rgba(200,170,110,.7);background:#010A13}
.rv-art img{display:block;width:100%;height:100%;object-fit:cover;pointer-events:none;-webkit-user-drag:none}
.rv-art::after{content:"";position:absolute;inset:0;z-index:2;pointer-events:none;background:linear-gradient(115deg,transparent 35%,rgba(255,246,220,.55) 50%,transparent 65%);background-size:260% 100%;background-position:130% 0}
.rv.t-legend .rv-art::before{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;mix-blend-mode:color-dodge;opacity:.35;background:linear-gradient(135deg,#0AC8B9,#C8AA6E,#B286F0,#0AC8B9);background-size:300% 300%}
.rv-face{position:absolute;inset:0;display:grid;place-items:center;align-content:center;gap:10px}
.rv-face::before{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(1,10,19,.2),rgba(1,10,19,.78))}
.rv-face span{position:relative;font-family:var(--font-display);font-weight:700;font-size:3rem;line-height:1;color:#F0E6D2}
.rv-face .glyph{position:relative;width:22px;height:22px}
.rv-info{margin-top:10px}
.rv-tier{margin:0 0 4px;font-family:var(--font-title);font-weight:700;font-size:1.25rem;letter-spacing:.06em;color:#E8C873}
.rv-name{margin:0;font-family:var(--font-display);font-weight:700;font-size:1.25rem;line-height:1.2}
.rv-meta{margin:3px 0 0;color:#A09B8C;font-size:.86rem}
.rv-val{margin:8px 0 0;font-size:2rem;line-height:1;font-variant-numeric:tabular-nums}
.rv.t-big .rv-val,.rv.t-huge .rv-val,.rv.t-legend .rv-val{font-size:2.6rem;text-shadow:0 0 18px rgba(10,200,185,.55)}
.rv-where{margin:8px 0 0;font-family:var(--font-display);font-weight:600;color:#0AC8B9}
.rv-card.st-dup .rv-where{color:#A09B8C}
.rv-stamp{position:absolute;top:22px;z-index:3;padding:3px 10px;border:2px solid currentColor;background:rgba(1,10,19,.75);font-family:var(--font-display);font-weight:700;font-size:1.1rem;letter-spacing:.08em;text-transform:uppercase;opacity:0;transition:opacity .12s}
.rv-stamp.ok{left:14px;color:#0AC8B9;transform:rotate(-12deg)}
.rv-stamp.no{right:14px;color:#E84057;transform:rotate(12deg)}
.rv-card[data-dir="ok"] .rv-stamp.ok,.rv-card[data-dir="no"] .rv-stamp.no{opacity:1}
.rv-actions{display:flex;gap:10px;justify-content:center}
.rv-actions .fbtn{min-width:120px;padding:11px 16px;font-size:1rem}
.rv-all{border:0;background:none;color:#C8AA6E;font-family:var(--font-display);font-weight:600;text-decoration:underline;cursor:pointer;padding:4px}
.rv-hint{margin:0;color:#A09B8C;font-size:.84rem;text-align:center}
.rv.go .rv-card{animation:rvIn .6s cubic-bezier(.2,1.3,.4,1) both}
.rv.go .rv-art::after{animation:hitSheen 1.1s ease-out .45s both}
.rv.t-legend.go .rv-art::before{animation:hitHolo 2.4s linear infinite}
.rv.t-legend.go .rv-tier{animation:hitShimmer 1.4s ease-in-out infinite}
.rv.go .hit-rays{animation:hitSpin 9s linear infinite,hitFade .6s ease-out both}
.rv.go .hit-ring{animation:hitRing 1.1s ease-out .05s both}
.rv.go .hit-ring.r2{animation-delay:.3s}
.rv.go .hit-parts i{animation:hitBurst 1.3s cubic-bezier(.12,.75,.3,1) var(--t) both}
.rv.t-big .hit-rays{display:none}
.rv-place{display:flex;align-items:center;justify-content:center;gap:12px;margin-top:10px;text-align:left}
.rv .mini{background:#010A13;border-color:rgba(200,170,110,.5);padding:5px;gap:3px;grid-template-columns:repeat(var(--cols,3),12px)}
.rv .mini i{width:12px;height:16px;border-color:rgba(200,170,110,.4)}
.rv .mini i.on{background:#0AC8B9;border-color:#0AC8B9;box-shadow:0 0 8px rgba(10,200,185,.7)}
.rv.go .mini i.on{animation:rvBlink .9s ease-in-out .55s 2}
.rv-place .rv-where{margin:0}
.rv-pc{margin:2px 0 0;font-family:var(--font-display);font-size:1.15rem;color:#F0E6D2}
.rv-pc b{color:#E8C873;font-weight:700}
.rv-sheet{margin:2px 0 0;color:#A09B8C;font-size:.8rem;max-width:22ch}
@keyframes rvBlink{50%{background:transparent;box-shadow:none}}
@keyframes rvIn{0%{transform:perspective(800px) rotateY(80deg) scale(.85);opacity:0}100%{transform:none;opacity:1}}
@media (max-height:640px){.rv-art{width:44%}.rv-val{font-size:1.6rem}}
@media (prefers-reduced-motion:reduce){.rv.go *,.rv.go .rv-art::after,.rv.go .rv-art::before{animation:none!important}.rv .hit-parts,.rv .hit-ring{display:none}}

.sess{display:grid;gap:16px}
.sess-main,.sess-side{display:grid;gap:12px;min-width:0;align-content:start}
@media (min-width:900px){.sess{grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);gap:24px;align-items:start}.sess-side{position:sticky;top:calc(64px + env(safe-area-inset-top,0px));max-height:calc(100vh - 84px);overflow:auto;padding-right:2px}.only-narrow{display:none!important}.gal-grid{max-height:560px;overflow:auto}}
@media (max-width:899px){.only-wide{display:none!important}}
.sess-top{display:grid;gap:10px}
.sess-head{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:flex-start;gap:8px}
.sess-head h3{margin:0;font-size:1.15rem}
.sess-head .date{margin:2px 0 0;color:var(--muted);font-size:.9rem}
.sess-head .found-actions{margin:0}
.sess-tabs{justify-self:start}
.sess-bar{display:flex;gap:8px}
.sess-bar input{flex:1;min-width:0;font-family:var(--font-display);font-weight:700;font-size:1.45rem;letter-spacing:.06em;color:var(--ink);background:var(--sleeve);border:1px solid var(--line);border-radius:2px;padding:7px 12px}
.sess-bar input:focus{border-color:var(--hex);box-shadow:0 0 0 3px var(--hex-glow);outline:none}
.sess-bar .fbtn{padding:0 18px;font-size:1rem}
.chips3{display:flex;gap:6px;flex-wrap:wrap}
.chips3 button{border:1px solid var(--line);background:var(--sleeve);color:var(--muted);border-radius:999px;padding:5px 14px;font-family:var(--font-display);font-weight:600;cursor:pointer}
.chips3 button[aria-pressed="true"]{border-color:var(--hex);color:var(--ink);background:var(--paper);box-shadow:inset 0 0 0 1px var(--hex)}
.sess-prev{display:flex;align-items:center;gap:12px;min-height:76px;padding:10px 12px;border:1px solid var(--line);border-radius:3px;background:var(--sleeve)}
.sess-ph{margin:0;color:var(--muted)}
.sp-thumb{position:relative;flex:0 0 auto;width:40px;aspect-ratio:5/7;overflow:hidden;border:1px solid var(--line);background:var(--cover-2)}
.sp-thumb img,.sp-thumb span{position:absolute;inset:0;display:block;width:100%;height:100%;object-fit:cover}
.sp-main{flex:1;min-width:0}
.sp-main b{display:block;font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.sp-main small{display:block;color:var(--muted);font-size:.82rem}
.sp-side{display:grid;justify-items:end;gap:2px;text-align:right}
.sp-side b{font-family:var(--font-display);font-weight:700;font-size:1.15rem}
.sp-side b.hot{color:var(--gold)}
.sp-st{font-family:var(--font-display);font-weight:600;font-size:.84rem;white-space:nowrap}
.sp-st.st-new,.sp-st.st-up{color:var(--hex)}
.sp-st.st-dup{color:var(--muted)}
.sess-tip{margin:0;color:var(--muted);font-size:.85rem}
.sess-recent .sr-head{display:flex;justify-content:space-between;align-items:center;gap:8px;margin-bottom:6px}
.sess-recent h4{margin:0}
.sess-booster{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.sess-booster span{font-family:var(--font-display);font-weight:600}
.sess-booster b{color:var(--gold);font-size:1.15rem}
.gauge{padding:12px 14px;border:1px solid var(--line);border-radius:3px;background:var(--sleeve)}
.gauge-top{display:flex;justify-content:space-between;align-items:baseline;gap:8px}
.gauge-top b{font-family:var(--font-display);font-weight:700;font-size:1.55rem;color:var(--gold);font-variant-numeric:tabular-nums}
.gauge-top span{color:var(--muted);font-size:.9rem}
.gauge-bar{height:8px;margin-top:8px;border:1px solid var(--line-soft);background:var(--track);border-radius:1px;overflow:hidden}
.gauge-bar i{display:block;height:100%;background:linear-gradient(90deg,var(--brass-3),var(--gold-bright));transition:width .4s ease}
.gauge-bar.ok i{background:linear-gradient(90deg,var(--hex),var(--gain))}
.gauge-txt{margin:6px 0 0;font-family:var(--font-display);font-weight:600;color:var(--muted)}
.gauge-txt.gain{color:var(--gain)}
.sess-figs{margin-top:0;padding-top:0;border-top:0}
.sess-set{margin:0}
.gal-ctl{display:flex;gap:8px;flex-wrap:wrap}
.gal-ctl input{flex:1 1 150px;min-width:0}
.gal-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(100px,1fr));gap:8px;padding:2px}
@media (max-width:420px){.gcap{padding:6px 6px 8px}.gline{font-size:.8rem;gap:4px}.gname{font-size:.88rem}}
.gtile{display:flex;flex-direction:column;padding:0;border:1px solid var(--line);border-radius:4px;overflow:hidden;cursor:pointer;background:var(--sleeve);color:var(--ink);text-align:left}
.gimg{position:relative;display:block;aspect-ratio:5/7;background:var(--cover-2)}
.gimg img,.gface{position:absolute;inset:0;display:block;width:100%;height:100%;object-fit:cover}
.gface{display:grid;place-items:center}
.gface span{font-family:var(--font-display);font-weight:700;font-size:1.6rem;color:#F0E6D2;text-shadow:0 1px 3px rgba(0,0,0,.6)}
.gtile:not(.own) .gimg{opacity:.82}
.gown{position:absolute;top:6px;right:6px;padding:1px 8px;border-radius:999px;background:var(--gold-bright);color:#010A13;font-family:var(--font-display);font-weight:700;font-size:.82rem}
.gcap{display:grid;gap:3px;padding:7px 8px 9px;border-top:1px solid var(--line)}
.gline{display:flex;align-items:center;gap:5px;font-family:var(--font-display);font-weight:600;font-size:.86rem;color:var(--muted)}
.gvalb{position:absolute;right:5px;bottom:5px;padding:1px 6px;border-radius:3px;background:rgba(1,10,19,.8);color:#F0E6D2;font-size:.82rem;font-variant-numeric:tabular-nums;white-space:nowrap}
.gname{font-family:var(--font-display);font-weight:600;font-size:.95rem;line-height:1.2;min-height:2.4em;overflow:hidden;overflow-wrap:break-word;hyphens:auto;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
.gtile.own{border-color:var(--gold-bright)}
.gtile:hover,.gtile:focus-visible{border-color:var(--hex);box-shadow:0 0 12px var(--hex-glow)}
.place-head{display:flex;align-items:center;justify-content:space-between;gap:10px}
.place-head>div:first-child{display:grid}
.pmini{grid-template-columns:repeat(var(--cols,3),11px);padding:4px;gap:2px;flex:0 0 auto}
.pmini i{width:11px;height:15px}
.pmini i.done{background:var(--gold-bright);border-color:var(--gold-bright);opacity:.55}

.sheet-wrap{position:relative;max-width:640px;margin:0 auto;touch-action:pan-y}
.page-ghost{position:absolute;z-index:4;margin:0;max-width:none;pointer-events:none;will-change:transform,opacity}
.side-nav{position:absolute;top:50%;z-index:6;display:grid;place-items:center;width:34px;height:78px;margin-top:-39px;padding:0;border:1px solid var(--gold-bright);border-radius:3px;background:rgba(1,10,19,.74);color:#F0E6D2;font-size:1.7rem;line-height:1;cursor:pointer;box-shadow:0 4px 14px rgba(0,0,0,.3)}
.side-nav.prev{left:-6px}
.side-nav.next{right:-6px}
.side-nav:hover{border-color:var(--hex);box-shadow:0 0 14px var(--hex-glow)}
.side-nav{user-select:none;-webkit-user-select:none;-webkit-touch-callout:none;touch-action:manipulation}
.side-nav:disabled{opacity:0;pointer-events:none}
@media (min-width:760px){.side-nav{width:44px;height:100px;margin-top:-50px}.side-nav.prev{left:-60px}.side-nav.next{right:-60px}}
.swipe-hint{max-width:640px;margin:6px auto 0;color:var(--muted);font-size:.84rem;text-align:center}

.sheet-wrap{max-width:1040px!important;perspective:1600px}
.spread{display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);gap:0 clamp(4px,1.4vw,14px);align-items:start;max-width:1040px;margin:0 auto}
.leaf{container-type:inline-size;min-width:0}
.leaf-head{display:flex;align-items:baseline;gap:6px;margin:0 0 6px;font-size:.84rem;color:var(--muted);white-space:nowrap;overflow:hidden}
.leaf-head b{font-family:var(--font-display);font-weight:700;color:var(--gold);font-size:.98rem}
.leaf-head em{margin-left:auto;font-style:normal;font-family:var(--font-display);font-weight:600}
.leaf.blank .grid-page{opacity:.3}
.leaf.blank .pocket.empty{border-style:dotted}
.grid-page{--cols:3;display:grid;grid-template-columns:repeat(var(--cols),minmax(0,1fr));gap:clamp(4px,1.1vw,12px)}
.spine{align-self:stretch;display:flex;flex-direction:column;justify-content:space-evenly;align-items:center;width:clamp(10px,2.2vw,22px);margin-top:28px;border-radius:6px;background:linear-gradient(90deg,rgba(0,0,0,.2),rgba(0,0,0,0) 35%,rgba(0,0,0,0) 65%,rgba(0,0,0,.2))}
.spine i{display:block;width:72%;aspect-ratio:1;border-radius:50%;background:radial-gradient(circle at 35% 35%,#F0E6D2,var(--gold-bright) 45%,var(--brass-3));box-shadow:0 1px 2px rgba(0,0,0,.4)}
@container (max-width:250px){.leaf-head span{display:none}}
@container (max-width:64px){.pk-name,.pk-tags,.pk-art{display:none}.pocket{padding:8px 5px 5px}.pk-top{font-size:.62rem}.pk-val{font-size:.68rem}}
.side-nav.prev{left:-10px!important}
.side-nav.next{right:-10px!important}
@media (min-width:760px){.sheet-wrap{padding:0 56px}.side-nav.prev{left:0!important}.side-nav.next{right:0!important}}
@media (max-width:759px){.side-nav{width:22px;height:62px;margin-top:-31px;font-size:1.2rem}.side-nav.prev{left:-13px!important}.side-nav.next{right:-13px!important}}
.turn{position:absolute;z-index:4;transform-style:preserve-3d;pointer-events:none;will-change:transform}
.turn-under{position:absolute;z-index:3;pointer-events:none;background:var(--paper)}
.turn-under-shade{position:absolute;inset:0;pointer-events:none;opacity:0;background:linear-gradient(90deg,rgba(0,0,0,0),rgba(0,0,0,.4))}
.turn-under.r .turn-under-shade{background:linear-gradient(270deg,rgba(0,0,0,0),rgba(0,0,0,.4))}
.turn.fwd{transform-origin:left center}
.turn.back{transform-origin:right center}
.turn-face{position:absolute;inset:0;backface-visibility:hidden;-webkit-backface-visibility:hidden;background:var(--paper)}
.turn-back{transform:rotateY(180deg);background:linear-gradient(90deg,var(--paper),var(--sleeve));box-shadow:inset 0 0 0 1px var(--line-soft)}
.turn-shade{position:absolute;inset:0;pointer-events:none;opacity:0;background:linear-gradient(90deg,rgba(0,0,0,.45),rgba(0,0,0,0) 70%)}
.turn.back .turn-shade{background:linear-gradient(270deg,rgba(0,0,0,.45),rgba(0,0,0,0) 70%)}
.ms{display:inline-flex;align-items:center;gap:3px;padding:5px;border:1px solid var(--line);border-radius:3px;background:var(--paper);flex:0 0 auto}
.ms-leaf{display:grid;grid-template-columns:repeat(var(--cols,3),var(--c));gap:var(--g)}
.ms-sm{--c:9px;--g:2px}
.ms-md{--c:16px;--g:2px}
.ms-lg{--c:24px;--g:3px}
.ms i{display:block;width:var(--c);height:calc(var(--c) * 1.4);border:1px solid var(--line);border-radius:2px;background-size:cover;background-position:center}
.ms i.have{background-color:var(--gold-bright);border-color:var(--gold-bright);opacity:.85}
.ms i.done{background-color:var(--gold-bright);border-color:var(--gold-bright);opacity:1}
.ms i.on{background:var(--hex);border-color:var(--hex);box-shadow:0 0 6px var(--hex-glow);opacity:1}
.ms i.none{visibility:hidden}
.ms-leaf.blank i{border-style:dotted;opacity:.3;background:none}
.ms-spine{align-self:stretch;width:3px;border-radius:2px;background:var(--line)}
.found .ms i.on,.op-last .ms i.on{animation:msBlink 1s ease-in-out 3}
@keyframes msBlink{50%{background:transparent;box-shadow:none}}
.rv .ms{background:#010A13;border-color:rgba(200,170,110,.5)}
.rv .ms i{border-color:rgba(200,170,110,.4)}
.rv .ms i.have{background-color:#C8AA6E;border-color:#C8AA6E}
.rv .ms i.on{background:#0AC8B9;border-color:#0AC8B9;box-shadow:0 0 8px rgba(10,200,185,.7)}
.rv.go .ms i.on{animation:rvBlink .9s ease-in-out .55s 3}
.rv-place.spread-place{flex-direction:column;align-items:center;text-align:center;gap:8px}
.rv-card.st-new .rv-art,.rv-card.st-up .rv-art{width:46%}
.place-legend{display:flex;flex-wrap:wrap;gap:4px 12px;margin:6px 0 0;color:var(--muted);font-size:.78rem}
.place-legend i{display:inline-block;width:9px;height:12px;margin-right:4px;vertical-align:-1px;border-radius:2px;border:1px solid var(--line)}
.place-legend .l-on{background:var(--hex);border-color:var(--hex)}
.place-legend .l-have{background:var(--gold-bright);border-color:var(--gold-bright)}
.place-case small{display:block;color:var(--muted);font-weight:500;font-size:.74rem}
@media (prefers-reduced-motion:reduce){.found .ms i.on,.op-last .ms i.on{animation:none}}

:root{--leather-bg:radial-gradient(120% 90% at 15% 10%,rgba(255,255,255,.08),transparent 50%),repeating-linear-gradient(45deg,rgba(255,255,255,.02) 0 2px,transparent 2px 5px),repeating-linear-gradient(-45deg,rgba(0,0,0,.05) 0 1px,transparent 1px 4px),linear-gradient(160deg,#21454C,#0F262C);--sheet-bg:linear-gradient(180deg,#FBF7EE,#EEE5D3);--stitch-c:rgba(200,170,110,.6)}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){--leather-bg:radial-gradient(120% 90% at 15% 10%,rgba(255,255,255,.05),transparent 50%),repeating-linear-gradient(45deg,rgba(255,255,255,.016) 0 2px,transparent 2px 5px),repeating-linear-gradient(-45deg,rgba(0,0,0,.18) 0 1px,transparent 1px 4px),linear-gradient(160deg,#122430,#060C11);--sheet-bg:linear-gradient(180deg,#132A40,#0C1C2D);--stitch-c:rgba(200,170,110,.45)}}
:root[data-theme="dark"]{--leather-bg:radial-gradient(120% 90% at 15% 10%,rgba(255,255,255,.05),transparent 50%),repeating-linear-gradient(45deg,rgba(255,255,255,.016) 0 2px,transparent 2px 5px),repeating-linear-gradient(-45deg,rgba(0,0,0,.18) 0 1px,transparent 1px 4px),linear-gradient(160deg,#122430,#060C11);--sheet-bg:linear-gradient(180deg,#132A40,#0C1C2D);--stitch-c:rgba(200,170,110,.45)}
.sheet-wrap{max-width:1120px!important;padding:14px 18px!important;border-radius:14px;background:var(--leather-bg);box-shadow:0 18px 40px rgba(0,0,0,.38),inset 0 1px 0 rgba(255,255,255,.08),inset 0 -2px 0 rgba(0,0,0,.3)}
.sheet-wrap::before{content:"";position:absolute;inset:6px;border:1.5px dashed var(--stitch-c);border-radius:10px;pointer-events:none}
.sheet-wrap{overflow:hidden;overflow:clip}
#view-pages{overflow-anchor:none}
@media (min-width:760px){.sheet-wrap{padding:26px 68px!important}.side-nav.prev{left:14px!important}.side-nav.next{right:14px!important}}
@media (max-width:759px){.side-nav.prev{left:1px!important}.side-nav.next{right:1px!important}}
.spread{align-items:stretch!important;max-width:none!important}
.leaf{padding:8px 8px 10px;background:var(--sheet-bg);box-shadow:0 2px 0 rgba(0,0,0,.22),0 8px 16px rgba(0,0,0,.28)}
.leaf.left{border-radius:6px 2px 2px 6px}
.leaf.right{border-radius:2px 6px 6px 2px}
.spine{width:clamp(12px,2.2vw,22px)!important;margin-top:0!important;border-radius:3px!important;background:linear-gradient(90deg,#2d3237,#aeb3b9 40%,#eceef1 50%,#aeb3b9 60%,#2d3237)!important;box-shadow:inset 0 0 0 1px rgba(0,0,0,.35)}
.spine i{width:78%!important;background:radial-gradient(circle at 35% 30%,#fff,#d9dce0 35%,#7b8188 70%,#3d4247)!important;box-shadow:0 2px 3px rgba(0,0,0,.5)!important}
.turn-face{background:transparent!important}
.turn-back{background:transparent!important;box-shadow:none!important}
.turn-under{background:transparent!important}
.cover-leaf{position:relative;display:flex;flex-direction:column;overflow:hidden;padding:0!important;color:#F0E6D2;background:radial-gradient(120% 80% at 50% 0%,rgba(10,200,185,.16),transparent 55%),linear-gradient(160deg,#10222A,#050C10)!important}
.cover-leaf.has-img{background:linear-gradient(180deg,rgba(1,10,19,.45),rgba(1,10,19,.1) 38%,rgba(1,10,19,.15) 60%,rgba(1,10,19,.88)),var(--cover-img) center/cover no-repeat!important}
.cover-art{position:relative;flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;min-height:220px;padding:22px 12px 52px;text-align:center}
.cover-art::before{content:"";position:absolute;inset:9px;border:1px solid rgba(200,170,110,.65);box-shadow:inset 0 0 0 4px transparent,inset 0 0 0 5px rgba(200,170,110,.28);pointer-events:none}
/* La page de garde porte le même emblème que l'en-tête : deux classes pour battre la
   taille de .hx-hexa, qui vaut 100 %. */
.cover-orn.hx-hexa{width:40%;max-width:150px;height:auto;aspect-ratio:1;margin-bottom:14px;
  filter:drop-shadow(0 0 16px rgba(10,200,185,.38))}
.cover-leaf.has-img .cover-orn{display:none}
.cover-kicker{margin:0;font-family:var(--font-display);font-weight:600;letter-spacing:.32em;text-transform:uppercase;font-size:clamp(.55rem,4.6cqw,.95rem);color:#C8AA6E}
.leaf .cover-title::after{display:none}
.leaf .cover-title{margin:2px 0;font-family:var(--font-title);font-weight:700;font-size:clamp(1.15rem,14.5cqw,3.6rem);letter-spacing:.07em;line-height:1;text-transform:uppercase;color:#E8C873;text-shadow:0 2px 12px rgba(0,0,0,.5)}
@supports ((-webkit-background-clip:text) or (background-clip:text)){.leaf .cover-title{background:linear-gradient(180deg,#F7EED8 10%,#E2C27A 55%,#A8853E 95%);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;text-shadow:none;filter:drop-shadow(0 2px 6px rgba(0,0,0,.55))}}
.cover-sub{margin:0;font-family:var(--font-display);font-weight:600;letter-spacing:.24em;text-transform:uppercase;font-size:clamp(.5rem,3.8cqw,.82rem);color:#A09B8C}
.cover-rule{width:38%;height:1px;margin:10px 0 6px;background:linear-gradient(90deg,transparent,#C8AA6E,transparent)}
.cover-count{margin:0;font-family:var(--font-display);font-size:clamp(.55rem,4.2cqw,.92rem);color:#A09B8C}
.cover-count b{color:#F0E6D2}
.cover-tools{position:absolute;left:0;right:0;bottom:16px;z-index:2;display:flex;justify-content:center;gap:6px;flex-wrap:wrap;padding:0 12px}
.cover-tools .fbtn{padding:5px 10px;font-size:.8rem;background:rgba(1,10,19,.72);color:#F0E6D2;border-color:rgba(200,170,110,.6)}
@container (max-width:200px){.cover-tools .fbtn{font-size:.68rem;padding:4px 7px}.cover-art{min-height:160px}}
.leaf.backcover{display:flex;align-items:center;justify-content:center;background:radial-gradient(120% 80% at 50% 100%,rgba(200,170,110,.12),transparent 60%),linear-gradient(160deg,#10222A,#050C10)!important}
.back-label{margin:0;font-family:var(--font-title);font-weight:700;letter-spacing:.12em;color:#C8AA6E;font-size:clamp(.7rem,6cqw,1.1rem);text-transform:uppercase}

.spread.single{grid-template-columns:minmax(0,1fr)!important}
.leaf.single{border-radius:3px 6px 6px 3px;box-shadow:-4px 0 0 rgba(0,0,0,.18),0 8px 16px rgba(0,0,0,.28)}
.leaf.single.cover-leaf{min-height:440px}

.rv-card.st-stack{box-shadow:inset 0 0 0 3px #010A13,inset 0 0 0 4px rgba(10,200,185,.6),0 0 30px rgba(10,200,185,.3),0 18px 50px rgba(0,0,0,.55)}
.op-last.st-stack{border-color:var(--hex);box-shadow:0 0 18px var(--hex-glow)}
.sp-st.st-stack{color:var(--hex)}

html{overflow-anchor:none}
.cover-leaf{padding:8px 8px 10px!important;display:block!important}
.cover-skel{visibility:hidden}
.cover-art{position:absolute!important;inset:0;min-height:0!important}
.leaf.single.cover-leaf{min-height:0!important}
.pagesum{min-height:48px}

.pk-want{position:absolute;right:7px;top:24px;z-index:2;width:13px;height:13px;border:2px solid var(--hex);border-radius:50%;background:rgba(1,10,19,.55);box-shadow:0 0 6px var(--hex-glow)}
.pk-want::after{content:"";position:absolute;inset:2.5px;border-radius:50%;background:var(--hex)}
.want-box{margin-top:16px;padding-top:12px;border-top:1px dashed var(--line)}
.want-box h4{margin:0 0 6px}
.want-target{display:grid;gap:4px;margin-top:8px;max-width:210px;font-size:.84rem;font-weight:600;color:var(--muted)}
.want-target.inline{margin-top:0;max-width:140px}
.want-target input{font:inherit;font-size:.95rem;color:var(--ink);background:var(--sleeve);border:1px solid var(--line);border-radius:2px;padding:6px 10px;min-width:0}
.want-flag{margin:12px 0 0;color:var(--hex);font-family:var(--font-display);font-weight:600}
.want-row.deal{background:linear-gradient(90deg,rgba(10,200,185,.14),transparent 70%)}
.want-deal{display:inline-block;padding:1px 8px;border-radius:999px;background:var(--hex);color:#010A13;font-family:var(--font-display);font-weight:700;font-size:.74rem}
.want-hot{color:var(--hex)}
.want-bulk{margin-top:12px}
.want-bulk summary{cursor:pointer;font-family:var(--font-display);font-weight:600;color:var(--gold)}
.want-bulk .controls{margin-top:8px}
.want-export{display:block;width:100%;margin-top:8px;font-family:ui-monospace,Menlo,Consolas,monospace;font-size:.82rem;color:var(--ink);background:var(--sleeve);border:1px solid var(--line);border-radius:2px;padding:8px;resize:vertical}
#want-export-box .seg{margin-top:4px}

.drow,.row{grid-template-columns:3.4em 30px minmax(0,1fr) auto!important}
.rank .row{grid-template-columns:2em 30px minmax(0,1fr) auto!important}
.rth{position:relative;display:block;width:30px;aspect-ratio:5/7;overflow:hidden;border:1px solid var(--line);border-radius:3px;background:var(--cover-2)}
.rth.big{width:46px;flex:0 0 auto}
.rth img,.rth-face{position:absolute;inset:0;display:block;width:100%;height:100%;object-fit:cover}
.rth-g{position:absolute;right:1px;bottom:1px;display:grid;place-items:center;width:14px;height:14px;border-radius:50%;background:rgba(1,10,19,.78)}
.rth-g>*{width:9px!important;height:9px!important;margin:0!important}
.row.is-missing .rth img{filter:grayscale(.85) brightness(.85)}

.view-seg{margin-left:auto}
.list.vgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(104px,1fr));gap:10px;border-top:0;padding-top:4px}
.list.vgrid.big{grid-template-columns:repeat(auto-fill,minmax(158px,1fr));gap:14px}
.vtile{position:relative;display:flex;flex-direction:column;min-width:0;border:1px solid var(--line);border-radius:4px;overflow:hidden;background:var(--sleeve)}
.vtile.deal{border-color:var(--hex);box-shadow:0 0 12px var(--hex-glow)}
.vt-img{position:relative;display:block;width:100%;aspect-ratio:5/7;padding:0;border:0;cursor:pointer;background:var(--cover-2)}
.vt-img img{position:absolute;inset:0;display:block;width:100%;height:100%;object-fit:cover}
.vt-qty{position:absolute;top:6px;right:6px;padding:1px 8px;border-radius:999px;background:var(--gold-bright);color:#010A13;font-family:var(--font-display);font-weight:700;font-size:.82rem}
.vt-deal{position:absolute;top:6px;left:6px;padding:1px 8px;border-radius:999px;background:var(--hex);color:#010A13;font-family:var(--font-display);font-weight:700;font-size:.74rem}
.vt-rm{position:absolute;top:6px;right:6px;z-index:2;display:grid;place-items:center;width:26px;height:26px;padding:0;border:1px solid rgba(200,170,110,.6);border-radius:50%;background:rgba(1,10,19,.75);color:#F0E6D2;font-size:1rem;cursor:pointer}
.vt-sub{margin-left:auto;font-size:.76rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.vt-step{display:flex;align-items:center;justify-content:space-between;gap:4px;margin-top:4px}
.vt-step .stp.sm{width:26px;height:26px;flex:0 0 auto}
.vt-step b{font-family:var(--font-display);font-weight:700;color:var(--ink)}
.list.vgrid.big .gname{font-size:1.05rem}
.list.vgrid.big .gvalb{font-size:.95rem}
@media (max-width:420px){.view-seg{margin-left:0}.view-seg button{padding:6px 9px;font-size:.85rem}}

.col-mode-bar{display:flex;justify-content:center;margin:0 auto 14px;max-width:640px}
.col-mode-bar .view-seg{margin:0}
#view-pages.gal-on .finder,#view-pages.gal-on .pagebar,#view-pages.gal-on .sheet-wrap,#view-pages.gal-on .swipe-hint,#view-pages.gal-on #pagesum,#view-pages.gal-on #find-out,#view-pages.gal-on #art-import{display:none!important}
#col-gal-box{max-width:1100px;margin:0 auto}
.view-line{display:flex;justify-content:flex-end;margin:4px 0 8px}
.view-line .view-seg{margin:0}
.vtile.own{border-color:var(--gold-bright)}
.vtile.miss .vt-img img{filter:grayscale(.85) brightness(.82)}
.vtile.miss .gcap{opacity:.75}
.vt-rank{position:absolute;top:6px;left:6px;display:grid;place-items:center;min-width:24px;height:24px;padding:0 6px;border-radius:999px;background:var(--hex);color:#010A13;font-family:var(--font-display);font-weight:700;font-size:.85rem}

.pk-foot{display:flex;align-items:baseline;gap:6px;flex-wrap:wrap}
.pk-delta{font-family:var(--font-display);font-weight:700;font-size:.72rem;white-space:nowrap}
.pk-delta.up{color:var(--gain)}
.pk-delta.down{color:var(--loss,#E84057)}
.pocket.has-art .pk-delta{text-shadow:0 1px 2px rgba(0,0,0,.85)}
.gline .pk-delta{font-size:.74rem}
.backup{margin-top:30px;padding-top:18px;border-top:1px solid var(--line)}
.restore-card{margin-top:12px}

.op-stats{margin:0 0 18px;padding:14px;border:1px solid var(--gold-bright);border-radius:3px;background:var(--sleeve)}
.op-stats h3{margin:0 0 4px}
.op-stats .figures{margin-top:6px}
.figures .gain{color:var(--gain)}
.figures .loss{color:var(--loss,#E84057)}

.sets{display:flex;flex-wrap:wrap;gap:6px;margin:10px 0 2px}
.set-chip{padding:4px 11px;border:1px solid rgba(200,170,110,.55);border-radius:999px;background:rgba(1,10,19,.35);color:#C8AA6E;font-family:var(--font-display);font-weight:600;font-size:.85rem;text-decoration:none}
.set-chip:hover{border-color:#0AC8B9;color:#F0E6D2}
.set-chip.cur{background:linear-gradient(180deg,var(--brass-2),var(--brass) 45%,var(--brass-3));border-color:var(--gold-bright);color:var(--brass-ink)}

.chances .recap{margin:6px 0 10px}
.table-wrap{overflow-x:auto}
.chance-table{width:100%;border-collapse:collapse;font-size:.9rem;font-variant-numeric:tabular-nums}
.chance-table th,.chance-table td{padding:7px 8px;border-bottom:1px solid var(--line-soft);text-align:right;white-space:nowrap}
.chance-table th:first-child,.chance-table td:first-child{text-align:left}
.chance-table thead th{font-family:var(--font-display);font-weight:600;color:var(--muted);font-size:.8rem}
.chance-table tbody th{font-family:var(--font-display);font-weight:600}
.card-chance{margin:12px 0 0;color:var(--hex);font-family:var(--font-display);font-weight:600}

.tab{display:inline-flex!important;align-items:center;gap:7px}
.tab svg,.bnav svg,.sheet-row svg{flex:0 0 auto;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.tab svg{width:18px;height:18px;opacity:.85}
.tab[aria-current="page"] svg{opacity:1}
.bnav{display:none}
.view:not([hidden]){animation:viewIn .25s ease-out}
@keyframes viewIn{from{opacity:0}to{opacity:1}}
.sheet{width:min(560px,100%);max-height:85vh;margin:auto auto 0;padding:0 0 calc(10px + env(safe-area-inset-bottom,0px));overflow:auto;border:1px solid var(--gold-bright);border-bottom:0;border-radius:18px 18px 0 0;background:var(--paper);color:var(--ink)}
.sheet[open]{animation:sheetUp .25s cubic-bezier(.2,.9,.3,1)}
@keyframes sheetUp{from{transform:translateY(40px);opacity:0}to{transform:none;opacity:1}}
.sheet::backdrop{background:rgba(1,10,19,.62)}
.sheet-head{position:relative;display:flex;justify-content:space-between;align-items:center;padding:18px 18px 8px}
.sheet-head::before{content:"";position:absolute;top:7px;left:50%;width:40px;height:4px;margin-left:-20px;border-radius:2px;background:var(--line)}
.sheet-head h2{margin:0;font-size:1.15rem}
.sheet-head h2::after{display:none}
.sheet-x{width:34px;height:34px;border:1px solid var(--line);border-radius:50%;background:var(--sleeve);color:var(--ink);font-size:1.2rem;cursor:pointer}
.sheet-row{display:flex;align-items:center;gap:14px;padding:14px 18px;border-top:1px solid var(--line-soft);color:var(--ink);text-decoration:none}
.sheet-row:hover{background:var(--sleeve)}
button.sheet-row{width:100%;background:none;border:0;border-top:1px solid var(--line-soft);font:inherit;cursor:pointer;text-align:left}
.o2-scanbtn{padding:0 12px}
.o2-scanbtn .ico-cam{margin-right:0;width:19px;height:19px}
.ico-cam{width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;margin-right:6px;vertical-align:-3px}
.sheet-row svg{width:24px;height:24px;color:var(--gold)}
.sheet-row b{display:block;font-family:var(--font-display);font-weight:600;font-size:1.02rem}
.sheet-row small{display:block;color:var(--muted);font-size:.84rem}
a.sheet-row.cur b::after{content:" (ouverte)";color:var(--muted);font-weight:500}
.sheet h3{margin:14px 18px 2px;font-size:.88rem;color:var(--muted);font-family:var(--font-display);font-weight:600;letter-spacing:.04em;text-transform:uppercase}
@media (min-width:761px){.sheet{margin:auto;border-bottom:1px solid var(--gold-bright);border-radius:14px}}
@media (max-width:760px){
  .tabs{display:none!important}
  body{padding-bottom:calc(72px + env(safe-area-inset-bottom,0px))}
  .bnav{position:fixed;left:0;right:0;bottom:0;z-index:40;display:grid;grid-template-columns:repeat(5,1fr);padding:6px 4px calc(6px + env(safe-area-inset-bottom,0px));background:linear-gradient(180deg,rgba(10,20,40,.9),rgba(1,10,19,.97));border-top:1px solid rgba(200,170,110,.45);box-shadow:0 -8px 24px rgba(0,0,0,.35);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px)}
  .bnav a,.bnav button{position:relative;display:grid;justify-items:center;gap:3px;padding:7px 2px 5px;border:0;border-radius:12px;background:none;color:#A09B8C;text-decoration:none;font-family:var(--font-display);font-weight:600;font-size:.72rem;letter-spacing:.02em;cursor:pointer;-webkit-tap-highlight-color:transparent}
  .bnav svg{width:22px;height:22px}
  .bnav [aria-current="page"],.bnav .on{color:#E8C873;background:rgba(200,170,110,.1)}
  .bnav [aria-current="page"] svg,.bnav .on svg{filter:drop-shadow(0 0 6px rgba(200,170,110,.6))}
  .bnav [aria-current="page"]::before,.bnav .on::before{content:"";position:absolute;top:-7px;left:28%;right:28%;height:2px;border-radius:2px;background:#E8C873;box-shadow:0 0 8px rgba(232,200,115,.8)}
  .toast-wrap{bottom:calc(64px + env(safe-area-inset-bottom,0px))}
  .cover{padding:16px 16px 18px!important;gap:12px!important}
  .cover .rings{display:none!important}
  .cover h1{font-size:1.38rem!important}
  .cover .sub{display:none}
  .cover .lede{margin-top:8px!important;font-size:.92rem!important}
  .sticker{padding:10px 18px 12px!important}
  .sticker .val{font-size:1.7rem!important}
  .sets{flex-wrap:nowrap!important;overflow-x:auto;scrollbar-width:none;padding-bottom:2px}
  .sets::-webkit-scrollbar{display:none}
  .set-chip{flex:0 0 auto}
}
@media (prefers-reduced-motion:reduce){.view:not([hidden]),.sheet[open]{animation:none}}

.vsel{display:inline-flex;align-items:center;gap:2px;padding:3px;border:1px solid var(--line);border-radius:999px;background:var(--sleeve)}
.vsel button{display:inline-flex;align-items:center;justify-content:center;gap:6px;min-width:38px;height:34px;padding:0 10px;border:0;border-radius:999px;background:none;color:var(--muted);font-family:var(--font-display);font-weight:600;font-size:.9rem;cursor:pointer;transition:background .15s,color .15s}
.vsel button svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.vsel button:hover{color:var(--ink)}
.vsel button[aria-pressed="true"]{background:linear-gradient(180deg,var(--brass-2),var(--brass) 45%,var(--brass-3));color:var(--brass-ink);box-shadow:0 1px 6px rgba(200,170,110,.35)}
.vsel.labeled{display:flex;width:100%;max-width:520px}
.vsel.labeled button{flex:1 1 0;min-width:0;padding:0 8px}
.vsel.labeled button span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.col-mode-bar{display:flex;justify-content:center;margin:0 auto 14px;max-width:640px}
.controls .vsel{margin-left:auto}
.view-line{display:flex;justify-content:flex-end;margin:4px 0 8px}
@media (max-width:420px){.vsel.labeled button{font-size:.82rem;gap:4px}.vsel.labeled button svg{width:16px;height:16px}}
.finder-below{max-width:640px;margin:18px auto 0;padding:14px;border:1px solid var(--line);border-radius:3px;background:var(--sleeve)}
.finder-below .finder{margin:0}
.quick-banner{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:8px;max-width:640px;margin:0 auto 12px;padding:10px 14px;border:1px solid var(--hex);border-radius:3px;background:var(--sleeve);box-shadow:0 0 14px var(--hex-glow)}
.quick-banner p{margin:0;font-family:var(--font-display);font-weight:600}
.quick-banner small{display:block;color:var(--muted);font-weight:500}
.set-grid{display:grid;gap:14px}
@media (min-width:900px){.set-grid{grid-template-columns:1fr 1fr}.set-grid .set-card:first-child{grid-column:1 / -1}}
.set-card{padding:16px;border:1px solid var(--line);border-radius:4px;background:var(--sleeve)}
.set-card h3{margin:0 0 6px}
.set-card .intro{margin:0 0 10px}
.set-card .art-import{max-width:none;margin:0}
.set-field{display:grid;gap:6px;max-width:280px;font-family:var(--font-display);font-weight:600}
.switch{display:flex;align-items:center;gap:12px;cursor:pointer;font-family:var(--font-display);font-weight:600}
.switch input{position:absolute;opacity:0;width:1px;height:1px}
.switch .sw{position:relative;flex:0 0 auto;width:46px;height:26px;border-radius:999px;background:var(--track);border:1px solid var(--line);transition:background .2s}
.switch .sw::after{content:"";position:absolute;top:2px;left:2px;width:20px;height:20px;border-radius:50%;background:var(--muted);transition:transform .2s,background .2s}
.switch input:checked + .sw{background:rgba(10,200,185,.25);border-color:var(--hex)}
.switch input:checked + .sw::after{transform:translateX(20px);background:var(--hex)}
.switch input:focus-visible + .sw{outline:2px solid var(--hex);outline-offset:2px}
#backup{margin-top:14px;padding:16px;border:1px solid var(--line);border-radius:4px;background:var(--sleeve)}
#backup h3{margin-top:0}

.cover>div{min-width:0}

.pagebar{position:static!important;margin:14px auto 0!important;box-shadow:none!important;background:none!important}
.place-top{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:8px 12px}
.place-top .list-title{margin:0}
.to-top{position:fixed;right:18px;bottom:calc(24px + env(safe-area-inset-bottom,0px));z-index:38;display:grid;place-items:center;width:48px;height:48px;padding:0;border:1px solid var(--gold-bright);border-radius:50%;background:rgba(1,10,19,.88);color:#E8C873;box-shadow:0 6px 18px rgba(0,0,0,.45),0 0 12px rgba(200,170,110,.25);cursor:pointer;opacity:0;transform:translateY(12px) scale(.9);transition:opacity .2s,transform .2s;pointer-events:none}
.to-top.show{opacity:1;transform:none;pointer-events:auto}
.to-top svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
@media (max-width:760px){.to-top{right:12px;bottom:calc(82px + env(safe-area-inset-bottom,0px))}}
@media (prefers-reduced-motion:reduce){.to-top{transition:none}}

.dash{display:grid;gap:14px;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));align-items:start}
.dcard{padding:16px;border:1px solid var(--line);border-radius:6px;background:linear-gradient(180deg,var(--sleeve),var(--paper));box-shadow:0 1px 0 rgba(255,255,255,.03) inset}
.dcard header{display:flex;align-items:baseline;justify-content:space-between;gap:8px;margin-bottom:10px}
.dcard h3{margin:0;font-size:1.05rem}
.dc-more{font-family:var(--font-display);font-weight:600;font-size:.88rem;color:var(--gold);text-decoration:none;white-space:nowrap}
.dc-main{grid-column:1 / -1}
.dc-rings{display:flex;flex-wrap:wrap;gap:12px 28px}
.ringb{display:flex;align-items:center;gap:12px}
.ring-wrap{position:relative;display:grid;place-items:center;width:72px;height:72px}
.ring-wrap b{position:absolute;font-family:var(--font-display);font-weight:700;font-size:1rem;color:var(--ink)}
.ring{width:72px;height:72px;transform:rotate(-90deg)}
.ring-bg{fill:none;stroke:var(--track);stroke-width:7}
.ring-fg{fill:none;stroke:var(--gold-bright);stroke-width:7;stroke-linecap:round;transition:stroke-dashoffset .6s ease}
.ringb:nth-child(2) .ring-fg{stroke:var(--hex)}
.ring-lab b{display:block;font-family:var(--font-display);font-weight:700;font-size:1.1rem}
.ring-lab small{display:block;color:var(--muted);font-size:.84rem}
.dc-value{display:grid;gap:2px;margin-top:14px;padding-top:12px;border-top:1px solid var(--line-soft)}
.dc-value b{font-family:var(--font-display);font-weight:700;font-size:2rem;color:var(--gold);line-height:1.1}
.dc-value small{color:var(--muted)}
.dc-delta{font-family:var(--font-display);font-weight:700}
.dc-delta.gain,.dc-figs .gain{color:var(--gain)}
.dc-delta.loss,.dc-figs .loss{color:var(--loss,#E84057)}
.dc-lead{margin:0 0 8px}
.dc-figs{display:flex;flex-wrap:wrap;gap:6px 22px;margin:0 0 8px}
.dc-figs span{display:grid}
.dc-figs small{color:var(--muted);font-size:.8rem}
.dc-figs b{font-family:var(--font-display);font-weight:700;font-size:1.15rem}
.dash-list{display:grid}
.dash-row{display:grid;grid-template-columns:34px minmax(0,1fr) auto;align-items:center;gap:10px;width:100%;padding:7px 0;border:0;border-bottom:1px solid var(--line-soft);background:none;color:var(--ink);text-align:left;cursor:pointer}
.dash-row:last-child{border-bottom:0}
.dash-row .rth{width:34px}
.dr-main{min-width:0}
.dr-main b{display:block;font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.dr-main small{display:block;color:var(--muted);font-size:.8rem}
.dr-val{display:grid;justify-items:end;font-family:var(--font-display);font-weight:700;white-space:nowrap}
.dcard .found-actions{margin-top:12px}
@media (min-width:900px){.dc-main{display:grid;grid-template-columns:1fr auto;align-items:center;gap:0 24px}.dc-main header{grid-column:1 / -1}.dc-main .dc-value{margin:0;padding:0 0 0 24px;border-top:0;border-left:1px solid var(--line-soft)}}
#dlg{width:min(900px,calc(100vw - 20px))}
.fiche{position:relative;display:grid}
.fiche>.dlg-close{position:absolute;top:10px;right:10px;z-index:4;background:rgba(1,10,19,.72);color:#F0E6D2;border-color:rgba(200,170,110,.6)}
.f-media{position:relative;display:grid;place-items:center;background:radial-gradient(circle at 50% 40%,#13283A,#010A13 70%);overflow:hidden}
.f-media img{display:block;width:100%;max-height:52vh;object-fit:contain}
.f-face{display:grid;place-items:center;width:min(240px,60%);aspect-ratio:5/7;margin:18px 0;border-radius:8px;box-shadow:0 10px 30px rgba(0,0,0,.5)}
.f-face span{font-family:var(--font-display);font-weight:700;font-size:2.6rem;color:#F0E6D2;text-shadow:0 2px 8px rgba(0,0,0,.6)}
.f-nav{position:absolute;top:50%;z-index:3;width:38px;height:54px;margin-top:-27px;padding:0;border:1px solid rgba(200,170,110,.6);border-radius:4px;background:rgba(1,10,19,.7);color:#F0E6D2;font-size:1.6rem;line-height:1;cursor:pointer}
.f-nav.prev{left:8px}
.f-nav.next{right:8px}
.f-nav:disabled{opacity:0;pointer-events:none}
.f-body{padding:16px 20px 22px;min-width:0}
.f-body .dlg-code,.f-body h3{margin-right:0}
.f-pos{float:right;font-weight:500;color:var(--muted)}
.f-sec{margin-top:16px;padding-top:12px;border-top:1px solid var(--line-soft)}
.f-sec h4{margin:0 0 8px;font-family:var(--font-display);font-weight:600;font-size:.82rem;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.f-price{display:flex;flex-wrap:wrap;align-items:baseline;gap:6px 12px}
.f-price>b{font-family:var(--font-display);font-weight:700;font-size:2rem;color:var(--gold);line-height:1}
.f-price small{color:var(--muted)}
.f-spark svg{display:block;width:100%;height:64px;margin-top:8px}
.sp-area{fill:rgba(200,170,110,.14);stroke:none}
.sp-line{fill:none;stroke:var(--gold-bright);stroke-width:2;vector-effect:non-scaling-stroke}
.sp-dot{fill:var(--hex)}
.f-note{margin:6px 0 0;color:var(--muted);font-size:.86rem}
.f-note .gain{color:var(--gain)}
.f-note .loss{color:var(--loss,#E84057)}
.f-place{display:flex;flex-wrap:wrap;align-items:center;gap:14px}
.f-pc{margin:0;font-family:var(--font-display);font-size:1.05rem}
.f-place .fbtn{margin-top:8px}
.f-own .editor{margin:0}
.f-own-tag.yes{border-color:var(--gold-bright);color:var(--gold)}
.f-own-tag.no{color:var(--muted)}
.f-hunt-tag{border-color:var(--hex);color:var(--hex)}
.f-actions{display:grid;justify-items:start;gap:8px;margin-top:18px}
.f-actions .cta{margin-top:0}
.f-alt{color:var(--muted);font-size:.86rem}
@media (min-width:760px){.fiche{grid-template-columns:minmax(0,370px) minmax(0,1fr)}.f-media{align-self:stretch;min-height:100%;position:sticky;top:0;max-height:calc(100dvh - 34px)}.f-media img{max-height:calc(100dvh - 60px)}.fiche>.dlg-close{background:var(--sleeve);color:var(--gold);border-color:var(--line)}}
.dup-share{margin:6px 0 14px}
.tgrid{display:grid;gap:14px}
@media (min-width:760px){.tgrid{grid-template-columns:1fr 1fr}}
.tside{padding:14px;border:1px solid var(--line);border-radius:6px;background:var(--sleeve);min-width:0}
.tside h3{margin:0 0 10px}
.tside input[type="search"]{width:100%}
.tpick{margin-top:10px}
.tpick summary{cursor:pointer;font-family:var(--font-display);font-weight:600;color:var(--gold)}
.tlist{margin-top:10px}
.tline{display:grid;grid-template-columns:30px minmax(0,1fr) auto auto;align-items:center;gap:8px 10px;padding:8px 0;border-bottom:1px solid var(--line-soft)}
.tline .nm{min-width:0}
.tline .nm b{display:block;font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.tline .nm small{display:flex;flex-wrap:wrap;align-items:center;gap:4px 8px;color:var(--muted);font-size:.8rem}
.tline .px{font-family:var(--font-display);font-weight:700;white-space:nowrap}
.tq{display:flex;align-items:center;gap:6px}
.tq b{min-width:1.4em;text-align:center;font-family:var(--font-display)}
.tr-fin{padding:1px 8px;border:1px solid var(--line);border-radius:999px;background:var(--paper);color:var(--ink);font-family:var(--font-display);font-weight:600;font-size:.76rem;cursor:pointer}
.tr-warn{color:var(--loss,#E84057);font-style:normal;font-weight:600}
.ttotal{margin:10px 0 0;text-align:right;font-family:var(--font-display)}
.ttotal b{font-size:1.2rem;color:var(--gold)}
.tverdict{margin-top:14px;padding:14px;border:1px solid var(--line);border-radius:6px;background:var(--sleeve)}
.tverdict.ok{border-color:var(--gain);box-shadow:0 0 14px rgba(10,200,185,.18)}
.tbars{display:grid;gap:6px}
.tb{display:block;min-width:56px;height:26px;border-radius:4px;transition:width .3s ease;position:relative}
.tb i{position:absolute;left:8px;top:3px;font-style:normal;font-family:var(--font-display);font-weight:700;font-size:.88rem;color:#010A13;white-space:nowrap}
.tb.give{background:linear-gradient(90deg,var(--brass-3),var(--gold-bright))}
.tb.get{background:linear-gradient(90deg,#08756c,var(--hex))}
.tv-txt{margin:12px 0 0;font-family:var(--font-display);font-weight:700;font-size:1.15rem}
.tv-txt small{display:block;font-weight:500;font-size:.88rem;color:var(--muted)}
.tv-txt.ok{color:var(--gain)}
.tv-txt.more{color:var(--hex)}
.tv-txt.less{color:var(--gold)}
.tv-sub{margin:12px 0 6px;color:var(--muted);font-size:.88rem}
#trade-hist{margin-top:22px}
.copy-tip{margin:0 18px}
.copy-ta{display:block;width:calc(100% - 36px);margin:10px 18px 18px}
@media (min-width:761px){.only-m{display:none!important}}
.f-media{touch-action:pan-y}

button.tab{background:none;border:0;border-bottom:2px solid transparent;border-radius:0;cursor:pointer}
a.fbtn{text-decoration:none;display:inline-flex;align-items:center}
@media (min-width:760px){.dash{display:block;columns:3 300px;column-gap:14px}.dash .dcard{break-inside:avoid;margin:0 0 14px}.dash .dc-main{column-span:all}}

.f-body .dlg-code{margin-right:46px}
@media (min-width:761px){.tab{padding:10px 11px 11px!important;letter-spacing:.05em!important}}
@media (max-width:520px){.tline{grid-template-columns:30px minmax(0,1fr) auto}.tline .rth{grid-row:1 / span 2;align-self:start}.tline .nm{grid-column:2}.tline .px{grid-column:3;grid-row:1}.tline .tq{grid-column:2 / 4;grid-row:2}}

.img-sheet{width:min(720px,100%)}
.img-list{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:12px;padding:10px 18px}
.img-prev{margin:0;display:grid;gap:8px}
.img-prev img{display:block;width:100%;height:auto;border:1px solid var(--line);border-radius:6px;box-shadow:0 6px 16px rgba(0,0,0,.35)}
.img-prev figcaption{display:grid;gap:6px;justify-items:start;font-family:var(--font-display);font-weight:600;font-size:.88rem;color:var(--muted)}
.img-actions{padding:0 18px 18px;margin-top:0}

.exp-sheet{width:min(760px,100%)}
.exp-body{padding:0 18px 18px}
.exp-sec{padding:14px 0;border-top:1px solid var(--line-soft)}
.exp-sec:first-child{border-top:0}
.exp-sec h3{margin:0 0 10px;font-size:.92rem;font-family:var(--font-display);font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
.exp-head{display:flex;align-items:baseline;justify-content:space-between;gap:8px}
.exp-count{font-family:var(--font-display);font-weight:700;color:var(--gold)}
.exp-chips{display:flex;flex-wrap:wrap;gap:6px}
.exp-chips button{padding:6px 12px;border:1px solid var(--line);border-radius:999px;background:var(--sleeve);color:var(--muted);font-family:var(--font-display);font-weight:600;cursor:pointer}
.exp-chips button[aria-pressed="true"]{border-color:var(--hex);color:var(--ink);background:var(--paper);box-shadow:inset 0 0 0 1px var(--hex)}
.exp-tools{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:8px}
.exp-list{max-height:44vh;overflow:auto;border:1px solid var(--line-soft);border-radius:4px}
.exp-row{display:grid;grid-template-columns:28px 30px minmax(0,1fr) auto;align-items:center;gap:8px 10px;padding:8px 10px;border-bottom:1px solid var(--line-soft)}
.exp-row:last-child{border-bottom:0}
.exp-row.off{opacity:.45}
.exp-row .nm{min-width:0}
.exp-row .nm b{display:block;font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.exp-row .nm small{display:block;color:var(--muted);font-size:.8rem}
.exp-chk input{width:20px;height:20px;margin:0;accent-color:var(--hex)}
.exp-row .tq b small{color:var(--muted);font-weight:500}
.exp-opt{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:8px 12px;padding:8px 0}
.exp-opt>span{font-family:var(--font-display);font-weight:600}
.exp-stepper{display:flex;align-items:center;gap:10px}
.exp-stepper b{min-width:1.6em;text-align:center;font-family:var(--font-display);font-size:1.1rem}
.exp-help{flex-basis:100%;color:var(--muted)}
.exp-foot{position:sticky;bottom:0;display:flex;justify-content:flex-end;padding:12px 0 calc(4px + env(safe-area-inset-bottom,0px));background:linear-gradient(180deg,transparent,var(--paper) 30%)}
.exp-foot .fbtn{padding:11px 20px;font-size:1rem}
.exp-foot .fbtn[disabled]{opacity:.5;cursor:default}

@media (max-width:520px){.exp-row{grid-template-columns:28px 30px minmax(0,1fr)}.exp-row .rth{grid-row:1 / span 2;align-self:start}.exp-row .exp-chk{grid-row:1 / span 2}.exp-row .tq{grid-column:3;justify-self:start}}

.exp-chips button{display:inline-flex;align-items:center;gap:7px}
.exp-chips .glyph{width:14px;height:14px}
.exp-chips button[aria-pressed="false"] .glyph{opacity:.5}

.appbar{position:relative;margin:0 0 14px;padding:14px 16px;border:1px solid rgba(200,170,110,.45);border-radius:14px;color:#F0E6D2;background:radial-gradient(140% 160% at 0% 0%,rgba(10,200,185,.16),transparent 55%),radial-gradient(120% 140% at 100% 100%,rgba(200,170,110,.12),transparent 60%),linear-gradient(160deg,#0F2232,#050C12);box-shadow:0 10px 26px rgba(0,0,0,.28)}
.ab-main{display:flex;align-items:center;gap:13px}
.ab-txt{flex:1;min-width:0}
.ab-kicker{margin:0;font-family:var(--font-display);font-weight:600;font-size:.74rem;letter-spacing:.08em;text-transform:uppercase;color:#A09B8C;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ab-title{margin:1px 0 0;font-family:var(--font-title);font-weight:700;font-size:clamp(1.3rem,4.4vw,1.8rem);line-height:1.12;color:#EADBB8}
.ab-title::after{display:none}
.ab-set{flex:0 0 auto;display:inline-flex;align-items:center;gap:6px;padding:7px 10px 7px 14px;border:1px solid rgba(200,170,110,.55);border-radius:999px;background:rgba(1,10,19,.45);color:#E8C873;font-family:var(--font-display);font-weight:600;font-size:.92rem;cursor:pointer}
.ab-set svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.ab-set:hover{border-color:var(--hex);color:#F0E6D2}
.appbar .status{margin:8px 0 0;color:#A09B8C;font-size:.88rem}
.appbar .status:empty{display:none}
.view>h2:first-child:not(.sr){display:none}
.foot p{margin:0 0 4px}
.foot details{margin-top:4px}
.foot summary{cursor:pointer;color:var(--gold);font-family:var(--font-display);font-weight:600}
.foot details p{margin:6px auto 0;max-width:62ch}
@media (max-width:760px){.appbar{padding:11px 13px;border-radius:12px;margin-bottom:10px}.ab-set{padding:6px 8px 6px 12px;font-size:.86rem}}
body.modal-open .bnav,body.modal-open .to-top{display:none!important}
.sheet{max-height:85vh;max-height:85dvh}
body.modal-open{overflow:hidden}

:root{
  color-scheme:dark;
  --bg:#010A13;--paper:#091428;--sleeve:#0C1A30;--ink:#F0E6D2;--muted:#A09B8C;--line:#785A28;--line-soft:#2E2617;--track:#16202E;
  --glow:rgba(10,200,185,.11);
  --cover:#0A1428;--cover-2:#010A13;--cover-ink:#F0E6D2;--cover-muted:#A09B8C;--frame:#785A28;--frame-2:#C8AA6E;
  --brass:#C8AA6E;--brass-2:#F0E6D2;--brass-3:#785A28;--brass-ink:#010A13;
  --gold:#C8AA6E;--gold-bright:#C8AA6E;--hex:#0AC8B9;--hex-glow:rgba(10,200,185,.35);
  --sheen:rgba(240,230,210,.22);--gloss:rgba(255,255,255,.035);
  --gain:#0AC8B9;--loss:#E84057;--focus:#0AC8B9;
  --r-c:#D4DAE0;--r-u:#3CC8BE;--r-r:#E2399C;--r-e:#F2762C;--r-s:#F2C230;
  --leather-bg:radial-gradient(120% 90% at 15% 10%,rgba(255,255,255,.05),transparent 50%),repeating-linear-gradient(45deg,rgba(255,255,255,.016) 0 2px,transparent 2px 5px),repeating-linear-gradient(-45deg,rgba(0,0,0,.18) 0 1px,transparent 1px 4px),linear-gradient(160deg,#122430,#060C11);
  --sheet-bg:linear-gradient(180deg,#132A40,#0C1C2D);--stitch-c:rgba(200,170,110,.45);
}
body{background:radial-gradient(110% 55% at 50% -8%,rgba(10,200,185,.09),transparent 62%),radial-gradient(80% 50% at 100% 100%,rgba(200,170,110,.05),transparent 60%),#010A13!important;color:#F0E6D2}
.appbar{border:1px solid #463714;border-radius:2px;background:linear-gradient(180deg,#0A1428 0%,#030D18 100%);box-shadow:inset 0 0 0 1px rgba(1,10,19,.9),inset 0 0 0 2px rgba(120,90,40,.28),0 10px 24px rgba(0,0,0,.35)}
.appbar::after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:2px;background:linear-gradient(90deg,transparent,#785A28 15%,#C8AA6E 50%,#785A28 85%,transparent);pointer-events:none}
.appbar::before{content:"";position:absolute;top:6px;left:6px;width:14px;height:14px;border-top:2px solid #C8AA6E;border-left:2px solid #C8AA6E;opacity:.7;pointer-events:none}
.ab-title{color:#F0E6D2}
@supports ((-webkit-background-clip:text) or (background-clip:text)){.ab-title{background:linear-gradient(180deg,#F0E6D2 20%,#C8AA6E 100%);-webkit-background-clip:text;background-clip:text;color:transparent}}
.ab-kicker{color:#A09B8C}
.ab-set{border:1px solid #785A28;border-radius:2px;background:linear-gradient(180deg,#1E2328,#010A13);color:#CDBE91;text-transform:uppercase;letter-spacing:.05em;font-size:.84rem}
.ab-set:hover{border-color:#C8AA6E;color:#F0E6D2;box-shadow:0 0 10px rgba(200,170,110,.25)}
.dcard,.tside,.tverdict,.set-card,#backup,.op-stats,.exp-list,.found,.gauge,.sess-prev,.place-group,.op-form,.op-edit,.ticket,.dup-add,.finder-below,.quick-banner{border-radius:2px!important}
.dcard{border-color:#463714;background:linear-gradient(180deg,#0C1A30,#091428)}
.dcard:hover{border-color:#785A28}
.vsel{border-radius:2px;border-color:#463714;background:#091428}
.vsel button{border-radius:1px}
.sheet{border-radius:4px 4px 0 0;border-color:#785A28;background:linear-gradient(180deg,#0A1428,#091428)}
@media (min-width:761px){.sheet{border-radius:2px}}
.bnav{border-top-color:#785A28;background:linear-gradient(180deg,rgba(10,20,40,.94),rgba(1,10,19,.98))}
.fbtn{border-radius:2px}
.panel{border-color:#463714}

.vtile,.gtile{transition:transform .24s cubic-bezier(.2,.8,.2,1),box-shadow .24s ease,border-color .24s ease}
.vt-img,.gimg{overflow:hidden}
.vt-img img,.gimg img{transition:transform .4s cubic-bezier(.2,.8,.2,1),filter .3s ease}
.vt-img::after,.gimg::after{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;opacity:0;background:linear-gradient(115deg,transparent 35%,rgba(255,246,220,.38) 50%,transparent 65%);background-size:250% 100%;background-position:130% 0}
.vt-qty,.vt-deal,.vt-rank,.gvalb,.gown{z-index:2}
.vtile:active,.gtile:active{transform:translateY(-3px) scale(1.01)}
@media (hover:hover){
  .vtile:hover,.vtile:focus-within,.gtile:hover,.gtile:focus-visible{position:relative;z-index:3;transform:perspective(800px) translateY(-8px) scale(1.035) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg));border-color:var(--gold-bright);box-shadow:0 16px 30px rgba(0,0,0,.55),0 0 0 1px rgba(200,170,110,.65),0 0 24px rgba(200,170,110,.28)}
  .vtile:hover .vt-img img,.gtile:hover .gimg img{transform:scale(1.05)}
  .vtile.miss:hover .vt-img img,.gtile:not(.own):hover .gimg img{filter:grayscale(.25) brightness(.97)}
  .vtile:hover .vt-img::after,.gtile:hover .gimg::after{animation:tileSheen .8s ease-out}
  .vtile.miss:hover .gcap{opacity:1}
}
@keyframes tileSheen{0%{opacity:1;background-position:130% 0}100%{opacity:1;background-position:-30% 0}}
@media (prefers-reduced-motion:reduce){.vtile,.gtile,.vt-img img,.gimg img{transition:none}.vtile:hover,.vtile:focus-within,.gtile:hover,.gtile:active,.vtile:active{transform:none}.vtile:hover .vt-img img,.gtile:hover .gimg img{transform:none}.vtile:hover .vt-img::after,.gtile:hover .gimg::after{animation:none}}

.fx{display:none;position:absolute;inset:0;z-index:1;overflow:hidden;pointer-events:none;border-radius:inherit;opacity:0;transition:opacity .3s ease}
@media (hover:hover){body.fx-on .pocket:hover .fx,body.fx-on .vtile:hover .fx,body.fx-on .gtile:hover .fx{display:block}}
.fx::before,.fx::after{content:"";position:absolute;inset:0;pointer-events:none}
.fx::before{background-image:repeating-linear-gradient(115deg,hsl(330 95% 72%) 0%,hsl(40 98% 66%) 7%,hsl(85 85% 62%) 14%,hsl(175 90% 60%) 21%,hsl(220 95% 70%) 28%,hsl(285 90% 72%) 35%,hsl(330 95% 72%) 42%);background-size:320% 320%;background-position:var(--px,50%) var(--py,50%);mix-blend-mode:color-dodge;opacity:.3;filter:saturate(1.15)}
.fx::after{background:radial-gradient(farthest-corner circle at var(--mx,50%) var(--my,50%),rgba(255,255,255,.6) 0%,rgba(255,255,255,.14) 28%,transparent 62%);mix-blend-mode:overlay;opacity:.85}
.fx-foil::before{opacity:.15;background-image:linear-gradient(115deg,hsl(330 95% 72%) 0%,hsl(40 98% 66%) 7%,hsl(85 85% 62%) 14%,hsl(175 90% 60%) 21%,hsl(220 95% 70%) 28%,hsl(285 90% 72%) 35%,hsl(330 95% 72%) 42%);background-size:250% 250%}
.fx-foil::after{opacity:.45}
.fx-r::before{opacity:.24}
.fx-e::before{opacity:.32;background-image:radial-gradient(circle,rgba(255,255,255,.95) 0 .6px,transparent 1.3px),repeating-linear-gradient(115deg,hsl(330 95% 72%) 0%,hsl(40 98% 66%) 7%,hsl(85 85% 62%) 14%,hsl(175 90% 60%) 21%,hsl(220 95% 70%) 28%,hsl(285 90% 72%) 35%,hsl(330 95% 72%) 42%);background-size:5px 5px,320% 320%;background-position:0 0,var(--px,50%) var(--py,50%)}
.fx-s::before{opacity:.4;background-image:radial-gradient(circle,rgba(255,255,255,.95) 0 .7px,transparent 1.4px),radial-gradient(circle,rgba(255,240,190,.9) 0 .5px,transparent 1.2px),repeating-linear-gradient(115deg,hsl(330 95% 72%) 0%,hsl(40 98% 66%) 7%,hsl(85 85% 62%) 14%,hsl(175 90% 60%) 21%,hsl(220 95% 70%) 28%,hsl(285 90% 72%) 35%,hsl(330 95% 72%) 42%);background-size:7px 7px,11px 11px,260% 260%;background-position:0 0,3px 5px,var(--px,50%) var(--py,50%)}
.fx-s::after{background:radial-gradient(farthest-corner circle at var(--mx,50%) var(--my,50%),rgba(255,250,220,.7) 0%,rgba(242,194,48,.18) 30%,transparent 65%)}
.fx-sig::before{opacity:.5}
@media (hover:hover){.pocket:hover .fx,.vtile:hover .fx,.gtile:hover .fx,.f-media:hover .fx{opacity:1}}
.pocket.tilt{position:relative;z-index:3;transform:perspective(700px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg)) scale(1.04);transition:transform .1s ease-out;box-shadow:0 12px 26px rgba(0,0,0,.5)}
.f-art{position:relative;display:inline-block;max-width:100%;line-height:0}
.f-art img{display:block;width:auto;max-width:100%}
.f-face{position:relative;overflow:hidden}
@media (prefers-reduced-motion:reduce){.pocket.tilt{transform:none}}
.fx::after,.fx-s::after,.fx-foil::after{display:none!important}
.vt-img::after,.gimg::after{display:none!important;animation:none!important}

#openings{max-width:720px;margin:0 auto}
.o2-head{display:flex;justify-content:flex-end;margin-bottom:12px}
.o2-new{display:inline-flex;align-items:center;gap:8px;padding:10px 18px}
.o2-new svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:2.4;stroke-linecap:round}
.o2-sum{display:flex;flex-wrap:wrap;gap:8px 24px;padding:12px 14px;margin-bottom:12px;border:1px solid #463714;border-radius:2px;background:linear-gradient(180deg,#0C1A30,#091428)}
.o2-sum span{display:grid}
.o2-sum small,.o2-figs small{color:var(--muted);font-size:.8rem}
.o2-sum b{font-family:var(--font-display);font-weight:700;font-size:1.15rem}
.o2-sum .gain,.o2-figs .gain,.o2-val .gain{color:var(--gain)}
.o2-sum .loss,.o2-figs .loss,.o2-val .loss{color:var(--loss)}
.o2-list{display:grid;gap:8px}
.o2-row{display:grid;grid-template-columns:34px minmax(0,1fr) auto;align-items:center;gap:12px;width:100%;padding:10px 12px;border:1px solid #463714;border-radius:2px;background:var(--sleeve);color:var(--ink);text-align:left;cursor:pointer;transition:border-color .15s}
.o2-row:hover{border-color:var(--gold-bright)}
.o2-row .rth{width:34px}
.o2-row .nm{min-width:0}
.o2-row .nm b{display:block;font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.o2-row .nm small{display:block;color:var(--muted);font-size:.84rem}
.o2-pend{margin-left:8px;font-style:normal;font-weight:700;color:var(--hex)}
.o2-val{display:grid;justify-items:end;font-family:var(--font-display);white-space:nowrap}
.o2-val b{font-weight:700}
.o2-bar{display:flex;align-items:center;gap:10px;margin-bottom:12px}
.o2-bar h3{flex:1;min-width:0;margin:0;font-size:1.1rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.o2-back{flex:0 0 auto;width:40px;height:40px;padding:0;border:1px solid var(--line);border-radius:2px;background:var(--sleeve);color:var(--gold);font-size:1.6rem;line-height:1;cursor:pointer}
.o2-count{color:var(--muted);font-family:var(--font-display);font-weight:600;white-space:nowrap}
.o2-card{display:grid;gap:10px;padding:14px;border:1px solid #463714;border-radius:2px;background:var(--sleeve)}
.o2-lab{margin:6px 0 0;font-family:var(--font-display);font-weight:600}
.o2-lab small{display:block;font-weight:500;color:var(--muted)}
.o2-kind{flex-wrap:wrap}
.o2-card input[type="text"]{max-width:200px}
.o2-go{justify-self:start;margin-top:8px;padding:11px 22px;font-size:1rem}
.o2-prog{margin-bottom:10px}
.o2-prog span{font-family:var(--font-display);font-weight:600;color:var(--muted)}
.o2-pbar{height:4px;margin-top:6px;border-radius:2px;background:var(--track);overflow:hidden}
.o2-pbar i{display:block;height:100%;background:linear-gradient(90deg,var(--hex),var(--gold-bright));transition:width .3s ease}
.o2-prev{display:grid;grid-template-columns:34px minmax(0,1fr) auto;align-items:center;gap:10px;min-height:66px;padding:10px 12px;border:1px solid var(--line);border-radius:2px;background:var(--paper)}
.o2-prev.empty,.o2-prev.bad{display:flex;align-items:center;justify-content:center;gap:10px;color:var(--muted);text-align:center}
.o2-prev.bad{border-color:var(--loss)}
.o2-prev.ok{border-color:var(--hex);box-shadow:0 0 14px rgba(10,200,185,.18)}
.o2-prev .rth{width:34px}
.o2-prev .nm{min-width:0}
.o2-prev .nm b{display:block;font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.o2-prev small{color:var(--muted)}
.o2-prev .px{font-family:var(--font-display);font-weight:700;font-size:1.1rem}
.o2-num{margin-right:6px;font-family:var(--font-display);font-weight:700;font-size:1.25rem;color:var(--gold)}
.o2-st{font-style:normal;font-weight:700}
.o2-st.new{color:var(--hex)}
.o2-st.stack{color:var(--gold)}
.o2-st.dup{color:var(--muted)}
.o2-hit{margin-top:8px;padding:9px 12px;border:1px solid var(--gold-bright);border-radius:2px;background:linear-gradient(90deg,rgba(200,170,110,.2),rgba(10,200,185,.12));animation:o2hit .5s ease-out}
.o2-hit b{color:var(--gold)}
@keyframes o2hit{0%{transform:scale(.95);opacity:0}60%{transform:scale(1.02);opacity:1}100%{transform:none}}
.o2-strip{display:flex;gap:6px;margin-top:10px;padding-bottom:2px;overflow-x:auto;scrollbar-width:none}
.o2-strip::-webkit-scrollbar{display:none}
.o2-chip{flex:0 0 auto;display:inline-flex;align-items:center;gap:5px;padding:5px 9px;border:1px solid var(--line);border-radius:2px;background:var(--paper);color:var(--ink);font-family:var(--font-display);font-weight:600;cursor:pointer}
.o2-chip.st-new{border-color:var(--hex)}
.o2-chip em{font-style:normal;font-size:.78rem;color:var(--hex)}
.o2-chip i{font-style:normal;color:var(--muted)}
.o2-pad{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px;margin-top:12px}
.o2-key{height:58px;padding:0;border:1px solid #463714;border-radius:2px;background:linear-gradient(180deg,#14243A,#0A1428);color:var(--ink);font-family:var(--font-display);font-weight:700;font-size:1.55rem;cursor:pointer;touch-action:manipulation;-webkit-tap-highlight-color:transparent;-webkit-user-select:none;user-select:none;transition:transform .08s,border-color .15s}
.o2-key:active{transform:scale(.96);border-color:var(--gold-bright)}
.o2-key.t{font-size:1.05rem;color:var(--gold)}
.o2-key.t.on{border-color:var(--hex);background:linear-gradient(180deg,#0E3A44,#0A2A33);color:#CDFAFA;box-shadow:inset 0 0 12px rgba(10,200,185,.35)}
.o2-key.add{grid-column:span 2;font-size:1.1rem;color:var(--brass-ink);border-color:var(--gold-bright);background:linear-gradient(180deg,var(--brass-2),var(--brass) 45%,var(--brass-3))}
.o2-key.add.off{opacity:.45}
.o2-acts{display:flex;flex-wrap:wrap;justify-content:flex-end;gap:8px;margin-top:12px}
.o2-ask{margin-top:12px;padding:12px 14px;border:1px solid var(--hex);border-radius:2px;background:var(--paper);box-shadow:0 0 14px rgba(10,200,185,.15)}
.o2-ask p{margin:0}
.o2-figs{display:flex;flex-wrap:wrap;gap:8px 28px}
.o2-figs div{display:grid}
.o2-figs b{font-family:var(--font-display);font-weight:700;font-size:1.55rem}
.o2-paid{display:flex;flex-wrap:wrap;align-items:center;gap:8px}
.o2-paid label{font-family:var(--font-display);font-weight:600}
.o2-paid input{width:120px}
.o2-lead{margin:0}
.o2-sub{margin:6px 0 0;font-size:.8rem;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.o2-right{text-align:right}
.o2-place .place-top{margin-top:0}
@media (min-width:761px){.o2-pad{max-width:420px;margin-left:auto;margin-right:auto}.o2-key{height:54px}}

.o2-entry{display:flex;align-items:stretch;gap:8px}
.o2-in{flex:1;min-width:0;height:56px;padding:0 14px;border:1px solid var(--line);border-radius:2px;background:var(--paper);color:var(--ink);font-family:var(--font-display);font-weight:700;font-size:1.5rem;letter-spacing:.04em}
.o2-in:focus{outline:none;border-color:var(--hex);box-shadow:0 0 0 1px var(--hex),0 0 14px rgba(10,200,185,.25)}
.o2-in::placeholder{font-size:1rem;font-weight:500;letter-spacing:0;color:var(--muted)}
.o2-addbtn{padding:0 20px;font-size:1rem}
.o2-opts{display:flex;flex-wrap:wrap;align-items:center;gap:6px;margin:10px 0}
.o2-sp{flex:1}
.o2-tog{padding:6px 12px;border:1px solid var(--line);border-radius:2px;background:var(--sleeve);color:var(--gold);font-family:var(--font-display);font-weight:600;cursor:pointer}
.o2-tog.on,.o2-tog[aria-pressed="true"]{border-color:var(--hex);background:linear-gradient(180deg,#0E3A44,#0A2A33);color:#CDFAFA}
.o2-prev.names{display:block}
.o2-hint{display:block;margin-bottom:6px;color:var(--muted)}
.o2-pad{grid-template-columns:repeat(3,minmax(0,1fr))!important}
.o2-key.add{grid-column:auto!important}
.o2-lp{margin-top:12px;padding:14px;border:1px solid var(--line);border-radius:2px;background:var(--paper)}
.o2-lp-head{display:flex;align-items:center;justify-content:space-between;gap:8px}
.o2-lp h4{margin:0;font-size:1.05rem}
.o2-fmt{margin:8px 0;padding:8px 12px;border:1px dashed var(--line);border-radius:2px;background:var(--sleeve);font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:.9rem;line-height:1.5;white-space:pre;overflow-x:auto}
.o2-lp textarea{width:100%;font-family:ui-monospace,SFMono-Regular,Menlo,monospace}
.o2-lp-ok{margin:8px 0 0}
.o2-lp-bad{margin:6px 0 0;color:var(--loss)}
.o2-file{position:relative;overflow:hidden;cursor:pointer}
.o2-file input{position:absolute;inset:0;width:100%;height:100%;opacity:0;cursor:pointer}
.o2-lp .fbtn[disabled]{opacity:.5;cursor:default}

.o2-lp textarea{display:block;margin-top:4px;padding:10px 12px;border:1px solid var(--line);border-radius:2px;background:var(--sleeve);color:var(--ink);font-size:1rem;line-height:1.5;resize:vertical}
.o2-lp textarea:focus{outline:none;border-color:var(--hex);box-shadow:0 0 0 1px var(--hex)}

.o2-pad{grid-template-columns:repeat(4,minmax(0,1fr))!important}
.o2-key.add{grid-column:span 2!important}
.o2-last{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:10px;margin-top:10px;padding:10px 12px;border:1px solid var(--gold-bright);border-radius:2px;background:linear-gradient(90deg,rgba(200,170,110,.12),rgba(10,200,185,.06));animation:o2hit .35s ease-out}
.o2-last.st-dup{border-color:var(--line);background:var(--paper)}
.o2-last-main{display:flex;align-items:center;gap:10px;min-width:0;flex:1}
.o2-last-lab{flex:0 0 auto;padding:2px 7px;border:1px solid var(--line);border-radius:2px;font-family:var(--font-display);font-weight:600;font-size:.74rem;letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
.o2-last .nm{min-width:0}
.o2-last .nm b{display:block;font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.o2-last .nm small{display:block;color:var(--ink);font-size:.88rem}
.o2-last .nm small b{display:inline;color:var(--hex);font-weight:700}
.o2-last .mini{flex:0 0 auto}

.o2-last{display:block}
.o2-last-top{display:flex;align-items:baseline;gap:8px;min-width:0}
.o2-last-top .o2-num{flex:0 0 auto}
.o2-last-name{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-weight:600}
.o2-last-bot{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:6px}
.o2-last-where{margin:0;font-size:.92rem;color:var(--ink)}
.o2-last-where b{color:var(--hex);font-weight:700}
.o2-last-bot>:last-child:not(.o2-last-where){flex:0 0 auto}

.o2-last-where{margin-top:6px!important}
.o2-spread{margin-top:10px}
.o2-spread-head{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:4px;font-family:var(--font-display);font-weight:600;font-size:.8rem;color:var(--muted);text-align:center}
.o2-spread .ms{display:flex;justify-content:center;width:100%;box-sizing:border-box;padding:8px;gap:6px;background:#010A13;border-color:rgba(200,170,110,.5)}
.ms-xl{--c:clamp(26px,10vw,58px);--g:4px}
.o2-spread .ms{max-width:100%;overflow:hidden}
.ms-xl i{position:relative;display:grid;place-items:center;border-color:rgba(200,170,110,.35);background-color:rgba(255,255,255,.02)}
.ms-xl i span{font-family:var(--font-display);font-weight:700;font-size:10px;color:rgba(160,155,140,.75)}
.ms-xl i.have{background-color:rgba(200,170,110,.35);opacity:1}
.ms-xl i.art{background-size:cover;background-position:center}
.ms-xl i.have.art{opacity:.62;filter:saturate(.7)}
.ms-xl i.on{z-index:1;border:2px solid var(--hex);box-shadow:0 0 0 2px rgba(10,200,185,.35),0 0 16px rgba(10,200,185,.75);animation:o2slot 1.4s ease-in-out infinite}
.ms-xl i.on span{color:#010A13}
.ms-xl .ms-spine{width:4px;background:linear-gradient(180deg,#5B5A56,#C8C8C8 50%,#5B5A56)}
@keyframes o2slot{0%,100%{box-shadow:0 0 0 2px rgba(10,200,185,.35),0 0 10px rgba(10,200,185,.55)}50%{box-shadow:0 0 0 3px rgba(10,200,185,.6),0 0 22px rgba(10,200,185,.95)}}
@media (prefers-reduced-motion:reduce){.ms-xl i.on{animation:none}}

.o2-zone{margin-top:10px}
.o2-zone>.o2-last{margin-top:0}
.o2-entry+.o2-zone{margin-top:10px}
.o2-padtog{flex:0 0 auto;display:grid;place-items:center;width:40px;height:40px;padding:0;border:1px solid var(--line);border-radius:2px;background:var(--sleeve);color:var(--gold);cursor:pointer}
.o2-padtog svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.6}
.o2-padtog.on{border-color:var(--hex);color:#CDFAFA;background:linear-gradient(180deg,#0E3A44,#0A2A33)}
.o2-last-lab.hot{border-color:var(--gold-bright);color:#010A13;background:linear-gradient(180deg,var(--brass-2),var(--brass) 45%,var(--brass-3))}
.o2-last-px{margin-left:auto;color:var(--gold);white-space:nowrap}
.o2-pad{margin-top:10px!important}
.o2-strip{margin-top:10px}

.o2-last.hit-nice{border-color:var(--hex)}
.o2-last-lab.t-nice{border-color:var(--hex);color:#CDFAFA;background:linear-gradient(180deg,#0E3A44,#0A2A33)}
.o2-last.hit-big{border-color:var(--gold-bright);animation:o2glow 1.6s ease-in-out infinite}
.o2-last.hit-huge{border-color:#F2C230;animation:o2glow 1.1s ease-in-out infinite}
.o2-last-lab.t-huge{border-color:#F2C230;color:#2A1500;background:linear-gradient(180deg,#FFE08A,#F2A230 50%,#C9700C)}
.o2-last.hit-legend{border:2px solid transparent;background:linear-gradient(#0A1428,#0A1428) padding-box,linear-gradient(120deg,#F2C230,#E2399C,#0AC8B9,#F2C230,#E2399C) border-box;background-size:auto,300% 300%;animation:o2holo 3s linear infinite,o2glow .9s ease-in-out infinite}
.o2-last-lab.t-legend{border-color:transparent;color:#010A13;background:linear-gradient(120deg,#FFF3C4,#F2C230,#E2399C,#0AC8B9,#FFF3C4);background-size:300% 100%;animation:o2holo 2.4s linear infinite}
@keyframes o2glow{0%,100%{box-shadow:0 0 8px rgba(242,194,48,.22)}50%{box-shadow:0 0 26px rgba(242,194,48,.6)}}
@keyframes o2holo{0%{background-position:0% 50%,0% 50%}100%{background-position:0% 50%,300% 50%}}
.o2-burst{position:fixed;z-index:60;width:0;height:0;pointer-events:none}
.o2-burst i{position:absolute;left:0;top:0;width:9px;height:9px;margin:-4.5px 0 0 -4.5px;border-radius:50%;background:radial-gradient(circle,#FFF6D8 0,#F2C230 55%,transparent 72%);transform:rotate(var(--a)) translateX(0) scale(var(--s));animation:o2burst 1.15s cubic-bezier(.15,.8,.3,1) forwards}
.o2-burst.b-big i{background:radial-gradient(circle,#FFF6D8 0,#C8AA6E 55%,transparent 72%)}
.o2-burst.b-legend i:nth-child(3n){background:radial-gradient(circle,#E8FFFD 0,#0AC8B9 55%,transparent 72%)}
.o2-burst.b-legend i:nth-child(3n+1){background:radial-gradient(circle,#FFE3F3 0,#E2399C 55%,transparent 72%)}
@keyframes o2burst{0%{opacity:1;transform:rotate(var(--a)) translateX(0) scale(var(--s))}100%{opacity:0;transform:rotate(var(--a)) translateX(var(--d)) scale(.2)}}
.o2-burst.ample i{width:14px;height:14px;margin:-7px 0 0 -7px;animation:o2burstAmple 2s cubic-bezier(.12,.75,.28,1) forwards}
.o2-burst.ample b{position:absolute;left:0;top:0;width:46px;height:46px;margin:-23px 0 0 -23px;border-radius:50%;border:2px solid #C8AA6E;box-shadow:0 0 20px rgba(200,170,110,.75),inset 0 0 14px rgba(200,170,110,.45);animation:o2halo 1.9s cubic-bezier(.2,.64,.3,1) forwards}
.o2-burst.ample b+b{animation-delay:.45s}
.o2-burst.ample.b-nice b{--k:2.6}
.o2-burst.ample.b-nice b+b{display:none}
.o2-burst.ample.b-huge b{border-color:#F2C230;box-shadow:0 0 22px rgba(242,194,48,.8),inset 0 0 16px rgba(242,194,48,.5)}
.o2-burst.ample.b-legend b{border-color:#0AC8B9;box-shadow:0 0 26px rgba(10,200,185,.85),inset 0 0 18px rgba(10,200,185,.5)}
@keyframes o2burstAmple{0%{opacity:0;transform:rotate(var(--a)) translateX(0) scale(calc(var(--s) * .4))}14%{opacity:1;transform:rotate(var(--a)) translateX(calc(var(--d) * .28)) scale(var(--s))}58%{opacity:1}100%{opacity:0;transform:rotate(var(--a)) translateX(var(--d)) scale(.5)}}
@keyframes o2halo{0%{opacity:0;transform:scale(.3)}14%{opacity:.95}62%{opacity:.5}100%{opacity:0;transform:scale(var(--k,4.2))}}
.o2-flash{position:fixed;inset:0;z-index:59;display:grid;place-items:center;align-content:center;gap:8px;pointer-events:none;text-align:center;background:radial-gradient(circle at 50% 45%,rgba(242,194,48,.42),rgba(200,170,110,.16) 42%,transparent 72%);animation:o2flash 2.3s ease-out forwards}
.o2-flash span{font-family:var(--font-title);font-weight:700;font-size:clamp(1.8rem,8vw,3.2rem);letter-spacing:.04em;color:#FFF3C4;text-shadow:0 0 18px rgba(242,194,48,.9),0 0 42px rgba(242,194,48,.6)}
.o2-flash b{font-family:var(--font-display);font-size:1.15rem;color:#F0E6D2;text-shadow:0 0 10px rgba(0,0,0,.85)}
@keyframes o2flash{0%{opacity:0}10%{opacity:1}68%{opacity:1}100%{opacity:0}}
.o2-shake{animation:o2shake .6s ease-in-out}
@keyframes o2shake{0%,100%{transform:none}15%{transform:translate(-5px,2px) rotate(-.4deg)}30%{transform:translate(5px,-2px) rotate(.4deg)}45%{transform:translate(-4px,1px)}60%{transform:translate(3px,-1px)}75%{transform:translate(-2px,0)}}
@media (prefers-reduced-motion:reduce){.o2-last.hit-big,.o2-last.hit-huge,.o2-last.hit-legend,.o2-last-lab.t-legend{animation:none}.o2-shake{animation:none}}

.o2-last{animation:none!important}
.o2-last.hit-big,.o2-last.hit-huge{animation:o2glow 1.6s ease-in-out infinite!important}
.o2-last.hit-legend{animation:o2holo 3s linear infinite,o2glow .9s ease-in-out infinite!important}
.o2-r:empty{display:none}
.ms-xl i.on.pending{background-image:none!important;background-color:rgba(10,200,185,.12)!important;animation:none}
.ms-xl i.on.landed{animation:o2land .7s cubic-bezier(.2,.8,.2,1)}
@keyframes o2land{0%{transform:scale(1.25);box-shadow:0 0 0 3px rgba(10,200,185,.9),0 0 30px rgba(10,200,185,1)}100%{transform:scale(1)}}
.o2-fly{position:fixed;z-index:58;pointer-events:none;border-radius:7px;transform-origin:50% 50%;box-shadow:0 14px 30px rgba(0,0,0,.6),0 0 0 1px rgba(200,170,110,.7);will-change:transform}
.o2-fly img,.o2-fly-face{display:block;width:100%;height:100%;border-radius:7px;object-fit:cover}
.o2-fly-face{display:grid;place-items:center}
.o2-fly-face b{font-family:var(--font-display);font-weight:700;font-size:1.6rem;color:#F0E6D2;text-shadow:0 2px 8px rgba(0,0,0,.6)}
.o2-fly::after{content:"";position:absolute;inset:0;border-radius:7px;pointer-events:none;opacity:0}
.o2-fly[class*=" t-"]::after{opacity:1;background:linear-gradient(115deg,transparent 30%,rgba(255,250,225,.55) 48%,transparent 66%);background-size:260% 100%;animation:o2sheen 1.1s ease-in-out infinite}
.o2-fly.t-nice{box-shadow:0 14px 30px rgba(0,0,0,.6),0 0 0 2px var(--hex),0 0 18px rgba(10,200,185,.5)}
.o2-fly.t-big{box-shadow:0 14px 30px rgba(0,0,0,.6),0 0 0 2px #C8AA6E,0 0 26px rgba(242,194,48,.55)}
.o2-fly.t-huge{box-shadow:0 14px 30px rgba(0,0,0,.6),0 0 0 3px #F2C230,0 0 34px rgba(242,162,48,.75)}
.o2-fly.t-legend{box-shadow:0 14px 30px rgba(0,0,0,.6),0 0 0 3px #F2C230,0 0 40px rgba(242,194,48,.85),0 0 70px rgba(226,57,156,.45)}
.o2-fly em{position:absolute;left:50%;bottom:100%;transform:translate(-50%,-10px);padding:3px 10px;border-radius:2px;white-space:nowrap;font-style:normal;font-family:var(--font-display);font-weight:700;font-size:.86rem;letter-spacing:.06em;text-transform:uppercase;color:#010A13;background:linear-gradient(180deg,#FFF3C4,#C8AA6E 50%,#785A28);box-shadow:0 4px 12px rgba(0,0,0,.5)}
.o2-fly.t-nice em{color:#CDFAFA;background:linear-gradient(180deg,#0E3A44,#0A2A33);border:1px solid var(--hex)}
.o2-fly.t-legend em{background:linear-gradient(120deg,#FFF3C4,#F2C230,#E2399C,#0AC8B9,#FFF3C4);background-size:300% 100%;animation:o2holo 2.4s linear infinite}
@keyframes o2sheen{0%{background-position:130% 0}100%{background-position:-30% 0}}

.o2-pile{display:flex;align-items:center;gap:12px;margin-top:10px;padding:8px 12px;border:1px dashed rgba(200,170,110,.5);border-radius:2px;background:rgba(1,10,19,.5)}
.o2-pile-cards{position:relative;flex:0 0 auto;width:34px;height:46px}
.o2-pile-cards i{position:absolute;inset:0;border:1px solid rgba(200,170,110,.55);border-radius:3px;background:linear-gradient(160deg,#1E2A3A,#0A1428)}
.o2-pile-cards i:nth-child(1){transform:rotate(-8deg) translate(-3px,1px)}
.o2-pile-cards i:nth-child(2){transform:rotate(5deg) translate(2px,-1px)}
.o2-pile-cards i:nth-child(3){transform:rotate(-1deg)}
.o2-pile b{display:block;font-family:var(--font-display);font-weight:700}
.o2-pile small{display:block;color:var(--muted)}
.o2-pile.bump .o2-pile-cards{animation:o2bump .5s cubic-bezier(.2,.8,.2,1)}
@keyframes o2bump{0%{transform:scale(1.25)}100%{transform:none}}
.ms-xl i.twin{border:2px dashed var(--gold-bright);background-color:rgba(200,170,110,.25)}
.ms-xl i.twin.art{opacity:.8;filter:none}
.ms-xl i.twin.ping{animation:o2twin 1.1s ease-in-out}
@keyframes o2twin{0%,100%{box-shadow:none}40%{box-shadow:0 0 0 3px rgba(200,170,110,.6),0 0 18px rgba(242,194,48,.8)}}
.o2-fly.big{border-radius:12px}
.o2-hs{position:fixed;inset:0;z-index:70;display:grid;place-items:center;overflow:hidden;background:radial-gradient(circle at 50% 42%,rgba(200,170,110,.3),rgba(1,10,19,.95) 62%);animation:hsFade .3s ease-out}
.o2-hs.t-huge{background:radial-gradient(circle at 50% 42%,rgba(242,162,48,.4),rgba(1,10,19,.95) 62%)}
.o2-hs.t-legend{background:radial-gradient(circle at 50% 42%,rgba(226,57,156,.32),rgba(10,200,185,.12) 40%,rgba(1,10,19,.96) 70%)}
.o2-hs.out{animation:hsOut .3s ease-in forwards;pointer-events:none}
.o2-hs-rays{position:absolute;left:50%;top:44%;width:220vmax;height:220vmax;margin:-110vmax 0 0 -110vmax;pointer-events:none;background:repeating-conic-gradient(from 0deg,rgba(242,194,48,.16) 0deg 8deg,transparent 8deg 18deg);-webkit-mask:radial-gradient(circle,#000 0,transparent 30%);mask:radial-gradient(circle,#000 0,transparent 30%);animation:hsSpin 16s linear infinite}
.o2-hs.t-huge .o2-hs-rays{background:repeating-conic-gradient(from 0deg,rgba(242,162,48,.26) 0deg 7deg,transparent 7deg 15deg);animation-duration:11s}
.o2-hs.t-legend .o2-hs-rays{background:repeating-conic-gradient(from 0deg,rgba(242,194,48,.28) 0deg 6deg,rgba(226,57,156,.18) 6deg 12deg,rgba(10,200,185,.2) 12deg 18deg,transparent 18deg 24deg);animation-duration:8s}
.o2-hs-body{position:relative;display:grid;justify-items:center;gap:12px;padding:20px;text-align:center}
.o2-hs-tier{margin:0;font-family:var(--font-title);font-weight:700;font-size:clamp(1.6rem,7vw,2.6rem);letter-spacing:.04em;color:#FFF3C4;text-shadow:0 0 18px rgba(242,194,48,.8)}
.o2-hs.t-huge .o2-hs-tier{color:#FFE08A;text-shadow:0 0 22px rgba(242,162,48,.9)}
.o2-hs.t-legend .o2-hs-tier{background:linear-gradient(120deg,#FFF3C4,#F2C230,#E2399C,#0AC8B9,#FFF3C4);background-size:300% 100%;-webkit-background-clip:text;background-clip:text;color:transparent;text-shadow:none;filter:drop-shadow(0 0 12px rgba(242,194,48,.65));animation:o2holo 3s linear infinite}
.o2-hs-card{display:block;width:min(66vw,300px,calc(48vh * 5 / 7));aspect-ratio:5/7;padding:0;border:0;background:none;cursor:pointer;touch-action:none;-webkit-tap-highlight-color:transparent;animation:hsIn .8s cubic-bezier(.2,.8,.2,1) both}
.o2-hs.t-huge .o2-hs-card{animation:hsIn .9s cubic-bezier(.2,.8,.2,1) both,hsShake .5s .8s ease-in-out}
.o2-hs.t-legend .o2-hs-card{animation:hsIn 1.1s cubic-bezier(.2,.8,.2,1) both,hsShake .6s 1s ease-in-out}
.o2-hs-card:focus-visible{outline:none}
.o2-hs-card:focus-visible .o2-hs-face{outline:2px solid var(--hex);outline-offset:4px}
.o2-hs-tilt{display:block;width:100%;height:100%;border-radius:12px;transform:perspective(900px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg));transition:transform .15s ease-out}
.o2-hs-face{position:relative;display:block;width:100%;height:100%;overflow:hidden;border-radius:12px;box-shadow:0 20px 50px rgba(0,0,0,.7),0 0 0 2px #C8AA6E,0 0 40px rgba(242,194,48,.55)}
.o2-hs.t-huge .o2-hs-face{box-shadow:0 20px 50px rgba(0,0,0,.7),0 0 0 3px #F2C230,0 0 60px rgba(242,162,48,.75)}
.o2-hs.t-legend .o2-hs-face{box-shadow:0 20px 50px rgba(0,0,0,.7),0 0 0 3px #F2C230,0 0 70px rgba(242,194,48,.8),0 0 110px rgba(226,57,156,.45)}
.o2-hs-face img{display:block;width:100%;height:100%;object-fit:cover;-webkit-user-drag:none;-webkit-user-select:none;user-select:none}
.o2-hs-face .o2-fly-face{width:100%;height:100%;border-radius:0}
.o2-hs-face .o2-fly-face b{font-size:3rem}
.o2-hs .fx{display:block!important;opacity:1!important}
.o2-hs-name{display:grid;gap:2px;margin:0}
.o2-hs-name b{font-family:var(--font-display);font-size:1.25rem;color:#F0E6D2}
.o2-hs-name small{color:#A09B8C}
.o2-hs-tip{max-width:32ch;margin:0;color:#A09B8C;font-size:.9rem}
@keyframes hsIn{0%{transform:perspective(900px) rotateY(95deg) scale(.55);opacity:0}55%{transform:perspective(900px) rotateY(-14deg) scale(1.06);opacity:1}100%{transform:none;opacity:1}}
@keyframes hsShake{0%,100%{translate:0 0}20%{translate:-6px 2px}40%{translate:6px -2px}60%{translate:-4px 1px}80%{translate:3px 0}}
@keyframes hsSpin{to{transform:rotate(360deg)}}
@keyframes hsFade{from{opacity:0}to{opacity:1}}
@keyframes hsOut{to{opacity:0}}
body.hs-open .bnav,body.hs-open .to-top{display:none!important}
.o2-burst{z-index:75!important}
.o2-flash{z-index:74!important}
@media (prefers-reduced-motion:reduce){.o2-hs-rays,.o2-hs-card,.o2-hs.t-legend .o2-hs-tier{animation:none}.o2-hs-tilt{transition:none}}

.o2-hs{background:radial-gradient(circle at 50% 42%,rgba(200,170,110,.3),transparent 62%),rgba(1,10,19,.95)}
.o2-hs.t-huge{background:radial-gradient(circle at 50% 42%,rgba(242,162,48,.4),transparent 62%),rgba(1,10,19,.95)}
.o2-hs.t-legend{background:radial-gradient(circle at 50% 42%,rgba(226,57,156,.32),rgba(10,200,185,.12) 40%,transparent 70%),rgba(1,10,19,.96)}

.o2-qprog{margin-left:auto;font-family:var(--font-display);font-weight:700;color:var(--muted);white-space:nowrap}
.o2-skip{flex:0 0 auto;padding:3px 10px;border:1px solid var(--line);border-radius:2px;background:var(--sleeve);color:var(--gold);font-family:var(--font-display);font-weight:600;cursor:pointer}
.o2-last-top .o2-qprog+.o2-skip{margin-left:6px}
.o2-zone{margin-top:8px}
@media (max-width:760px){
  body.o2-focus .appbar{display:none}
  body.o2-focus .shell{padding-top:6px}
  .o2-bar{margin-bottom:8px}
  .o2-in{height:50px;font-size:1.35rem}
  .o2-pad{gap:6px!important;margin-top:8px!important}
  .o2-key{height:46px;font-size:1.3rem}
  .o2-key.t{font-size:1rem}
  .o2-last{padding:8px 10px}
  .o2-last-where{font-size:.86rem;margin-top:4px!important}
  .o2-spread{margin-top:6px}
  .o2-spread-head{display:none}
  .o2-spread .ms{padding:6px}
  .ms-xl{--c:clamp(24px,8.4vw,58px)}
  .o2-pile{margin-top:6px;padding:6px 10px}
  .o2-pile-cards{width:26px;height:36px}
}
.f-media .f-art,.f-media .f-face{transform:perspective(1000px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg));transition:transform .18s ease-out;will-change:transform}
.f-media .f-art{overflow:hidden;border-radius:10px;box-shadow:0 18px 40px rgba(0,0,0,.55),0 0 0 1px rgba(200,170,110,.45)}
.f-media .f-art img{border-radius:10px}
.f-media .fx{display:block}
@media (hover:hover){.f-media:hover .fx{opacity:1}.f-media:hover .f-art{box-shadow:0 24px 50px rgba(0,0,0,.6),0 0 0 1px rgba(200,170,110,.7),0 0 26px rgba(200,170,110,.25)}}
@media (prefers-reduced-motion:reduce){.f-media .f-art,.f-media .f-face{transform:none;transition:none}}

.pend-banner{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:8px 12px;max-width:640px;margin:0 auto 12px;padding:10px 14px;border:1px solid var(--hex);border-radius:2px;background:var(--sleeve);box-shadow:0 0 14px rgba(10,200,185,.15)}
.pend-banner p{margin:0}
.pend-banner[hidden]{display:none}
.col-head{max-width:980px;margin:0 auto 14px}
.col-head .dcard{margin:0}
@media (max-width:760px){
  .col-head .dc-rings{display:grid;grid-template-columns:1fr 1fr;gap:10px}
  .col-head .ringb{gap:8px}
  .col-head .ring-wrap,.col-head .ring{width:54px;height:54px}
  .col-head .ring-wrap b{font-size:.82rem}
  .col-head .ring-lab b{font-size:.95rem}
  .col-head .ring-lab small{font-size:.74rem;line-height:1.25}
  .col-head .dc-value{margin-top:10px;padding-top:10px}
  .col-head .dc-value b{font-size:1.6rem}
}

.kpis{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;max-width:980px;margin:0 auto 14px}
.kpi{display:grid;gap:3px;align-content:start;min-width:0;padding:10px 12px;border:1px solid #463714;border-radius:2px;background:linear-gradient(180deg,#0C1A30,#091428);color:var(--ink);text-decoration:none;transition:border-color .15s}
.kpi:hover{border-color:var(--gold-bright)}
.kpi small{font-family:var(--font-display);font-weight:600;font-size:.72rem;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.kpi b{font-family:var(--font-display);font-weight:700;font-size:1.35rem;line-height:1.15;color:var(--gold);white-space:nowrap}
.kpi-of{font-size:.8em;color:var(--muted);font-weight:600}
.kpi-sub{font-family:var(--font-display);font-weight:600;font-size:.8rem;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.kpi-sub.gain{color:var(--gain)}
.kpi-sub.loss{color:var(--loss)}
.kpi-bar{display:block;height:5px;margin-top:4px;border-radius:3px;background:var(--track);overflow:hidden}
.kpi-bar i{display:block;height:100%;border-radius:3px;background:linear-gradient(90deg,var(--brass-3),var(--gold-bright))}
.kpi-bar.hex i{background:linear-gradient(90deg,#08756c,var(--hex))}
@media (max-width:520px){.kpis{gap:6px;margin-bottom:10px}.kpi{padding:8px 9px}.kpi small{font-size:.62rem;letter-spacing:.03em}.kpi b{font-size:1.02rem}.kpi-sub{font-size:.72rem}}
.nav-badge{position:absolute;top:2px;right:calc(50% - 22px);min-width:17px;height:17px;padding:0 4px;border-radius:9px;background:var(--hex);color:#010A13;font-style:normal;font-family:var(--font-display);font-weight:700;font-size:.68rem;line-height:17px;text-align:center;box-shadow:0 0 8px rgba(10,200,185,.6)}
.tabs .tab{position:relative}
.tabs .nav-badge{top:4px;right:2px}

@media (max-width:520px){.kpi-long{display:none}.kpi-cap{text-transform:uppercase}}

.o2-colsw{margin-top:10px}
.o2-nocol{flex:0 0 auto;padding:2px 8px;border:1px solid var(--line);border-radius:2px;font-family:var(--font-display);font-weight:600;font-size:.74rem;letter-spacing:.04em;text-transform:uppercase;color:var(--muted);white-space:nowrap}

.o2-card input[type="text"],.o2-paid input{height:44px;padding:0 12px;border:1px solid var(--line);border-radius:2px;background:var(--paper);color:var(--ink);font-size:1rem}
.o2-card input[type="text"]:focus,.o2-paid input:focus{outline:none;border-color:var(--hex);box-shadow:0 0 0 1px var(--hex)}

.appbar.hx{position:relative;margin:0 0 14px;padding:0;border:1px solid #463714;border-radius:2px;overflow:hidden;color:#F0E6D2;
  background:radial-gradient(60% 140% at 0% 50%,rgba(10,200,185,.16),transparent 60%),radial-gradient(50% 120% at 100% 0%,rgba(200,170,110,.12),transparent 60%),repeating-linear-gradient(60deg,rgba(200,170,110,.035) 0 1px,transparent 1px 24px),repeating-linear-gradient(-60deg,rgba(200,170,110,.035) 0 1px,transparent 1px 24px),linear-gradient(180deg,#0B1830 0%,#050D1A 100%);
  box-shadow:inset 0 0 0 1px rgba(1,10,19,.9),inset 0 1px 0 rgba(240,230,210,.06),0 10px 26px rgba(0,0,0,.35)}
.appbar.hx::before{display:none}
.appbar.hx::after{content:"";position:absolute;left:0;right:0;bottom:0;height:1px;background:linear-gradient(90deg,transparent,#785A28 12%,#F0E6D2 50%,#785A28 88%,transparent);opacity:.9;pointer-events:none}
.hx-corner{position:absolute;width:16px;height:16px;pointer-events:none;border-color:#C8AA6E;border-style:solid;opacity:.75}
.hx-corner.tl{top:5px;left:5px;border-width:2px 0 0 2px}
.hx-corner.br{right:5px;bottom:7px;border-width:0 2px 2px 0}
.hx-row{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:14px 18px 12px 16px}
.hx-brand{display:flex;align-items:center;gap:14px;min-width:0;color:inherit;text-decoration:none}
.hx-crest{position:relative;flex:0 0 auto;display:grid;place-items:center;width:52px;height:52px}
/* L'emblème est un **hexagone**, pas un losange : l'appli s'appelle Hex. En SVG plutôt
   qu'en clip-path, parce qu'un clip-path découpe aussi la bordure — impossible d'obtenir
   un liséré propre sans empiler deux éléments. Le halo qui respire (::after) reste. */
.hx-hexa{width:100%;height:100%;overflow:visible;filter:drop-shadow(0 0 11px rgba(10,200,185,.38))}
/* Quatre couches, exactement celles du losange d'origine, qui tenait en deux éléments
   CSS (.hx-crest::before pour le **cadre extérieur**, .ab-gem pour le bijou) :
     cadre   — le grand contour, or pâle, avec son halo cyan qui s'éteint vers les bords
     cerne   — le cadre du bijou, or franc sur fond sombre
     champ   — le cyan dense à l'intérieur du bijou
     gemme   — la pierre, cernée d'or
   Le cadre extérieur avait sauté lors du passage à l'hexagone : sans lui l'emblème perd
   sa profondeur et se lit comme un simple picto. */
.hx-hexa .cadre{fill:url(#hx-halo);stroke:rgba(200,170,110,.45);stroke-width:1;stroke-linejoin:round}
.hx-hexa .cerne{fill:#010A13;stroke:#C8AA6E;stroke-width:1.8;stroke-linejoin:round}
.hx-hexa .champ{fill:url(#hx-gem-grad);stroke:none}
/* La pierre est une **sphère de cristal hextech** : un dégradé radial décalé en haut à
   gauche pour le volume, deux failles qui courent dessus, et un éclat spéculaire. Les
   failles sont dessinées deux fois — une passe large et sourde pour la lueur, une passe
   fine et vive par-dessus. À cette taille (seize pixels de diamètre) on ne rend pas des
   facettes : on suggère du volume et deux cassures, et c'est tout ce qui passe. */
.hx-hexa .bille{fill:url(#hx-bille-grad)}
/* Les failles sont ce qu'il y a de plus clair sur la pierre, comme sur la référence :
   une passe large et cyan pour la lueur, une passe fine presque blanche par-dessus. */
.hx-hexa .faille-bloom{fill:none;stroke:#3CFFF0;stroke-width:3.2;stroke-linecap:round;
  stroke-linejoin:round;opacity:.9}
.hx-hexa .faille-flux{fill:none;stroke:#FFFFFF;stroke-width:1.15;stroke-linecap:round;
  stroke-dasharray:11 89;opacity:0;filter:drop-shadow(0 0 1.6px #2EE8E0)}
.hx-hexa .faille-halo{fill:none;stroke:#2BF0E4;stroke-width:2.1;stroke-linecap:round;
  stroke-linejoin:round;opacity:.85}
.hx-hexa .faille{fill:none;stroke:#F6FFFE;stroke-width:.72;stroke-linecap:round;stroke-linejoin:round}
/* Un cerne sombre au bord de la bille : sans lui la sphère paraît plate. */
.hx-hexa .bille-ombre{fill:url(#hx-bille-ombre)}
/* L'électricité que tu voulais, et elle était déjà dans ta référence : ce sont **les
   fissures qui brillent**. Deux étincelles courent dans le réseau de failles, et un arc
   orbite le bord de la sphère. Rien de nouveau n'est dessiné — l'énergie circule dans ce
   qui existait déjà, ce qui lui évite de ressembler à un éclair collé par-dessus.
   `pathLength="100"` déclare la longueur du trajet : les tirets se comptent alors en
   pourcents et non en unités, donc le réglage tient quelle que soit la géométrie.
   Ici la boucle se défend là où je l'avais refusée sur le mot : c'est l'emblème qui vit,
   pas le texte qui bouge, et le halo du cerne respire déjà au même endroit. */
/* Sur la pierre, les étincelles **courent** le long du réseau, par `stroke-dashoffset`.
   C'est volontairement différent du mot, où les failles palpitent sur place : sur une
   surface fermée, une lumière qui circule se lit comme de l'énergie contenue ; sur des
   lettres, le même déplacement se lisait comme un reflet qui glisse. Essayé dans les deux
   sens : la palpitation sur la pierre ne rendait pas. */
@keyframes hexFlux{
  0%{stroke-dashoffset:100;opacity:0}
  10%{opacity:1}
  88%{opacity:1}
  100%{stroke-dashoffset:0;opacity:0}
}
@media (prefers-reduced-motion:no-preference){
  .hx-hexa .f1{animation:hexFlux 2.2s linear infinite}
  .hx-hexa .f2{animation:hexFlux 2.2s linear infinite .75s}
  .hx-hexa .f3{animation:hexFlux 2.2s linear infinite 1.5s}
}
.hx-hexa .bille-bord{fill:none;stroke:#C8AA6E;stroke-width:.9}
.hx-crest::after{content:"";position:absolute;inset:-2px;border-radius:50%;background:radial-gradient(circle,rgba(10,200,185,.28),transparent 62%);animation:hxPulse 4s ease-in-out infinite;pointer-events:none}
.hx-names{display:grid;gap:2px;min-width:0}
.hx-set{font-family:var(--font-title);font-weight:700;font-size:clamp(1.05rem,5.2vw,2rem);line-height:1.08;letter-spacing:.03em;color:#E3C88E;white-space:nowrap}
/* « Binder » est **doré**, pas parchemin : c'est l'or que l'écran de connexion donne déjà
   au nom de l'appli. La couleur n'avait pas changé depuis « ORIGINES » (#F0E6D2 des deux
   côtés, vérifié dans l'historique) — mais la même crème chaude paraît blanche en capitales
   réduites à côté d'un cyan saturé. Mettre vraiment de l'or règle le problème plutôt que de
   le discuter. */
/* La lueur hextech de « Hex » : deux couches, la même recette que la gemme de l'emblème
   et l'icône de carte — une proche et serrée, une large et diffuse. Pas d'animation : la
   gemme respire déjà juste à côté, deux choses qui pulsent en feraient une de trop.
   À savoir : ni .hx-set ni .hx-names ne peuvent porter overflow:hidden, sinon la lueur
   se retrouve coupée au carré. C'est pourquoi le nom tient par la taille, pas par une
   ellipse de secours. */
/* Les lettres de « Hex » sont du cristal fissuré : le fond est une image SVG (base cyan
   + réseau de failles) **découpée à la forme du texte**. Le mot reste du vrai texte —
   sélectionnable, dimensionné par clamp(), lu par un lecteur d'écran — là où un SVG de
   texte aurait perdu les trois. La couleur de repli reste déclarée : sans le découpage,
   le navigateur rend le mot en cyan plein plutôt qu'en transparent.
   À savoir : les failles ne se voient qu'au-dessus de ~40 px. En dessous le mot paraît
   simplement cyan, ce qui est l'état précédent — la dégradation est propre. */
/* **Les fêlures se tracent**, comme un verre qui cède : trois chemins dont le
   `stroke-dashoffset` passe de 100 à 0, décalés, puis qui s'effacent et recommencent.
   Le découpage aux lettres est un `clipPath` **en SVG inline**, pas un masque en image :
   une SVG en `data:` est rendue isolée et n'a pas accès aux polices de la page, son
   `<text>` tomberait en serif par défaut. La boîte du `viewBox` (68,91 × 34,56, ligne de
   base à 26,5, **mesurée dans le DOM** et non calculée) est celle de « Hex » mesurée en Cinzel 700 à 32 px ; le SVG étant
   dimensionné en `em`, tout suit la taille du texte sans recalibrage. */
.hx-craque{position:absolute;left:0;top:0;width:2.1535em;height:1.08em;overflow:visible;
  pointer-events:none}
.hx-craque text{font-family:var(--font-title);font-weight:700}
.hx-craque path{fill:none;stroke:#EFFFFD;stroke-width:.9;stroke-linecap:round;
  stroke-linejoin:round;vector-effect:non-scaling-stroke;stroke-dasharray:100;
  stroke-dashoffset:100;opacity:0;filter:drop-shadow(0 0 1.4px rgba(120,255,245,.9))}
@keyframes hexCraque{
  0%{stroke-dashoffset:100;opacity:0}
  3%{opacity:1}
  17%{stroke-dashoffset:0;opacity:1}
  76%{stroke-dashoffset:0;opacity:1}
  90%{stroke-dashoffset:0;opacity:0}
  100%{stroke-dashoffset:0;opacity:0}
}
@media (prefers-reduced-motion:no-preference){
  .hx-craque .c1{animation:hexCraque 7s linear infinite}
  .hx-craque .c2{animation:hexCraque 7s linear infinite .3s}
  .hx-craque .c3{animation:hexCraque 7s linear infinite .5s}
  .hx-craque .c4{animation:hexCraque 7s linear infinite .18s}
  .hx-craque .c5{animation:hexCraque 7s linear infinite .42s}
  .hx-craque .c6{animation:hexCraque 7s linear infinite .62s}
}
.hx-tech{position:relative;display:inline-block;color:var(--hex);background-image:url("data:image/svg+xml,%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20viewBox=%220%200%20100%2040%22%20preserveAspectRatio=%22none%22%3E%3Cdefs%3E%3ClinearGradient%20id=%22b%22%20x1=%220%22%20y1=%220%22%20x2=%220%22%20y2=%221%22%3E%3Cstop%20offset=%220%22%20stop-color=%22%231ADFD0%22/%3E%3Cstop%20offset=%221%22%20stop-color=%22%23067A86%22/%3E%3C/linearGradient%3E%3C/defs%3E%3Crect%20width=%22100%22%20height=%2240%22%20fill=%22url%28%23b%29%22/%3E%3C/svg%3E");background-size:100% 100%;-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;text-shadow:0 0 4px rgba(10,200,185,.45)}
/* Des étincelles hextech autour de « Hex » : six poussières de deux pixels qui
   s'allument chacune à son tour, montent de dix pixels et s'éteignent.
   **Pourquoi une boucle ici alors que je l'ai refusée pour la lueur** : faire pulser la
   lueur, c'est faire bouger le mot lui-même, et l'œil suit le texte. Une poussière de
   deux pixels à côté des lettres est de la ponctuation périphérique : elle ne change pas
   l'aspect du nom. Cycle de neuf secondes décalé de une seconde et demie par poussière,
   visible un dixième du temps — une étincelle toutes les une à deux secondes, jamais deux
   à la fois au même endroit. Hors mouvement réduit, elles ne sont tout simplement pas là. */
.hx-mo{position:absolute;inset:-7px -5px -5px -5px;pointer-events:none}
.hx-mo i{position:absolute;width:3px;height:3px;border-radius:50%;background:#E6FEFE;box-shadow:0 0 6px 1.5px rgba(10,200,185,.95),0 0 13px 3px rgba(10,200,185,.5);opacity:0}
.hx-mo i:nth-child(1){left:4%;bottom:8%;--dx:3px}
.hx-mo i:nth-child(2){left:26%;top:2%;--dx:-4px}
.hx-mo i:nth-child(3){left:49%;bottom:0;--dx:2px}
.hx-mo i:nth-child(4){left:71%;top:8%;--dx:5px}
.hx-mo i:nth-child(5){left:90%;bottom:26%;--dx:-3px}
.hx-mo i:nth-child(6){left:38%;top:44%;--dx:4px}
  2%{opacity:.12}
  3%{opacity:.95}
  4%{opacity:.25}
  5%{opacity:0}
}
@keyframes hexMote{
  0%{opacity:0;transform:translate(0,0) scale(.4)}
  3%{opacity:1;transform:translate(0,-1px) scale(1)}
  11%{opacity:0;transform:translate(var(--dx,3px),-11px) scale(.3)}
  100%{opacity:0;transform:translate(var(--dx,3px),-11px) scale(.3)}
}
@media (prefers-reduced-motion:no-preference){
  .hx-mo i{animation:hexMote 9s linear infinite}
  .hx-mo i:nth-child(2){animation-delay:1.5s}
  .hx-mo i:nth-child(3){animation-delay:3s}
  .hx-mo i:nth-child(4){animation-delay:4.5s}
  .hx-mo i:nth-child(5){animation-delay:6s}
  .hx-mo i:nth-child(6){animation-delay:7.5s}
}
}
@supports ((-webkit-background-clip:text) or (background-clip:text)){.hx-set{background:linear-gradient(180deg,#FFF6DF 10%,#E3C88E 55%,#A8823F 100%);-webkit-background-clip:text;background-clip:text;color:transparent;filter:drop-shadow(0 1px 0 rgba(0,0,0,.6))}}
.hx-sec{display:flex;align-items:center;gap:8px;min-width:0;font-family:var(--font-display);font-weight:600;font-size:.76rem;letter-spacing:.14em;text-transform:uppercase;color:#A09B8C}
.hx-game{white-space:nowrap}
/* Le titre de la vue quitte l'écran mais reste dans le document. Le menu dit déjà où l'on
   est — le répéter sous le nom de l'appli n'apprenait rien — mais c'est le <h1> de la page,
   celui qu'un lecteur d'écran annonce, et majLibelles() continue de le tenir à jour. */
.hx-view{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0}
.hx-right{display:flex;align-items:center;gap:8px;flex:0 0 auto;min-width:0}
.hx-stats{display:flex;align-items:center;gap:8px;flex:0 1 auto;min-width:0}
/* Le compte en haut à droite : la convention que l'appli n'avait pas. */
.hx-compte{gap:7px;padding:0 13px;font-family:var(--font-display);font-weight:600;font-size:.92rem;white-space:nowrap}
.hx-compte svg{width:19px;height:19px;flex:0 0 auto;fill:none;stroke:var(--gold,#C8AA6E);stroke-width:1.7;stroke-linecap:round}
.hx-compte[aria-current="page"]{border-color:#C8AA6E;box-shadow:0 0 12px rgba(200,170,110,.25)}
/* Sous 760 px, l'appbar porte déjà une seconde rangée de compteurs : le bouton compte
   se réduit à son icône pour ne pas ajouter du poids à une barre déjà chargée. */
@media (max-width:760px){.hx-compte .hx-qui{display:none}.hx-compte{padding:0 11px}}
.hx-chip{display:inline-flex;align-items:center;gap:9px;height:44px;padding:0 14px 0 10px;border:1px solid #463714;border-radius:2px;background:linear-gradient(180deg,rgba(30,35,40,.85),rgba(1,10,19,.85));color:#F0E6D2;text-decoration:none;transition:border-color .15s,box-shadow .15s}
.hx-chip:hover{border-color:#C8AA6E;box-shadow:0 0 12px rgba(200,170,110,.25)}
.hx-num{display:grid;line-height:1.1}
.hx-num b{font-family:var(--font-display);font-weight:700;font-size:1.08rem;color:#F0E6D2;white-space:nowrap}
.hx-num small{font-family:var(--font-display);font-weight:600;font-size:.72rem;color:#A09B8C;white-space:nowrap}
.hx-num small.gain{color:var(--gain)}
.hx-num small.loss{color:var(--loss)}
.hx-of{font-size:.78em;color:#A09B8C}
.hx-coin{position:relative;flex:0 0 auto;width:22px;height:22px;border-radius:50%;background:radial-gradient(circle at 35% 30%,#FFF3C4 0,#E3C88E 30%,#C8AA6E 55%,#785A28 90%);box-shadow:inset 0 0 0 2px rgba(1,10,19,.3),0 0 10px rgba(200,170,110,.45)}
.hx-coin::after{content:"";position:absolute;inset:6px;transform:rotate(45deg);border:1.5px solid rgba(70,55,20,.8)}
.hx-card{position:relative;flex:0 0 auto;width:16px;height:22px;border-radius:2px;border:1.5px solid #0AC8B9;background:linear-gradient(160deg,rgba(10,200,185,.35),rgba(1,10,19,.6));box-shadow:0 0 8px rgba(10,200,185,.45);transform:rotate(-8deg)}
.hx-card::after{content:"";position:absolute;inset:6px 3px;transform:rotate(45deg) scale(.6);background:#CDFAFA}
.hx-xp{position:relative;height:3px;margin:0 1px 1px;background:rgba(255,255,255,.05)}
.hx-xp i{display:block;height:100%;background:linear-gradient(90deg,#0AC8B9,#C8AA6E);box-shadow:0 0 8px rgba(10,200,185,.7);transition:width .6s ease}
.appbar.hx .status{margin:0 18px 10px}
@keyframes hxPulse{0%,100%{opacity:.55;transform:scale(.92)}50%{opacity:1;transform:scale(1.05)}}
@media (min-width:761px){
  .appbar.hx{margin-bottom:0;border-bottom-color:transparent}
  .tabs{padding:6px 10px 0;background:linear-gradient(180deg,#050D1A,#030A14);border:1px solid #463714;border-top:0;border-bottom:1px solid #785A28}
  .tabs .tab{padding-top:9px!important}
}
@media (max-width:760px){
  .appbar.hx{margin-bottom:10px}
  .hx-row{padding:10px 12px 9px 10px;gap:8px}
  .hx-crest{width:42px;height:42px}
  .hx-brand{gap:10px}
  .hx-sec{font-size:.66rem;letter-spacing:.1em;gap:6px}
  .hx-row{gap:6px}
  .hx-chip{height:40px;padding:0 9px 0 7px;gap:6px}
  .hx-num b{font-size:.98rem}
  /* Le chip se tient au chiffre qui compte : 257 / 298. Le master set et le pourcentage
     sont dans l'infobulle et dans Progression — sur un téléphone, les garder ici coûtait
     le mot « ORIGINES », qui passait sous le chip. */
  .hx-prog .hx-num small,
  .hx-prog .hx-pct{display:none}
  .hx-corner{width:12px;height:12px}
}
/* Sous 360 px — iPhone SE de première génération et équivalents — l'emblème, le nom, le
   chip et le bouton de compte ne tiennent plus ensemble : le nom venait chevaucher le
   chip. C'est l'emblème qui part, parce que le nom est la marque et l'emblème sa
   décoration. Mesuré : la bascule doit se faire à 361 px, pas avant. */
@media (max-width:360px){
  .hx-crest{display:none}
}
@media (prefers-reduced-motion:reduce){.hx-crest::after{animation:none}}

.hx-pct{margin-left:8px;font-style:normal;font-size:.72rem;font-weight:700;color:var(--hex)}

.riot-note{margin-top:10px!important;font-size:.74rem;color:#5B5A56}