:root{
  --felt:#240b10; --felt-2:#3a1118; --felt-3:#521a24; --line:#6b2a33;
  --brass:#d9ab52; --brass-dim:#8f6e33; --chalk:#f1e8d9; --dim:#bfa194;
  --chips:#4ea8d8; --mult:#ee5a3e; --good:#86cf8e; --violet:#b58cff;
  --display:"Alfa Slab One", Rockwell, "Roboto Slab", Georgia, serif;
  --body:"Barlow Semi Condensed", "Arial Narrow", system-ui, sans-serif;
  --card-w:clamp(58px, 9vw, 86px);
}
*{box-sizing:border-box}
html,body{height:100%}
body{margin:0;background:radial-gradient(ellipse at 50% 35%, #3d121a 0%, var(--felt) 70%) fixed, var(--felt);
  color:var(--chalk);font:17px/1.35 var(--body);padding:env(safe-area-inset-top,0) 0 env(safe-area-inset-bottom,0)}
button{font:inherit;color:inherit;cursor:pointer}
input{font:inherit}
button:focus-visible,.card:focus-visible,.charm:focus-visible,input:focus-visible{outline:3px solid var(--brass);outline-offset:2px}
.wrap{max-width:1120px;margin:0 auto;padding:14px 16px 28px}

/* ---------- HUD ---------- */
.hud{display:flex;flex-wrap:wrap;align-items:center;gap:10px 22px;padding:10px 4px 16px;border-bottom:2px solid var(--line)}
.logo{font-family:var(--display);font-size:26px;color:var(--brass);margin-right:auto}
.stat{display:flex;flex-direction:column;gap:2px;min-width:0}
.stat small{color:var(--dim);font-size:13px}
.stat b{font-family:var(--display);font-weight:400;font-size:20px}
.pips{display:flex;gap:5px}
.pip{width:14px;height:14px;border-radius:50%;border:2px solid var(--brass-dim)}
.pip.done{background:var(--brass-dim)} .pip.now{background:var(--brass);border-color:var(--brass)} .pip.boss{border-radius:3px}
.hpbar{width:140px;height:12px;background:#170609;border-radius:6px;overflow:hidden;border:1px solid var(--line)}
.hpbar i{display:block;height:100%;background:var(--good);transition:width .35s}
.hpbar.low i{background:var(--mult)}
.gold{color:var(--brass)}
.linkbtn{background:none;border:1px solid var(--line);border-radius:8px;padding:6px 10px;color:var(--dim);font-size:15px}
.linkbtn:hover{color:var(--chalk);border-color:var(--brass-dim)}
.src{font-size:13px;color:var(--dim);text-align:center}
.src.off{color:var(--mult)}

/* ---------- plateau ---------- */
.board{display:grid;grid-template-columns:230px 1fr;gap:18px;margin-top:18px}
.foe{background:var(--felt-2);border:2px solid var(--line);border-radius:14px;padding:18px;display:flex;flex-direction:column;gap:12px;align-self:start}
.mono{width:74px;height:74px;border-radius:50%;background:var(--felt-3);border:3px solid var(--brass);display:grid;place-items:center;font-family:var(--display);font-size:34px;color:var(--brass)}
.foe.boss .mono{border-color:var(--mult);color:var(--mult)}
.foe.rival .mono{border-color:var(--violet);color:var(--violet)}
.foe h2{margin:0;font-family:var(--display);font-weight:400;font-size:22px;line-height:1.1;overflow-wrap:anywhere}
.foe .kind{color:var(--dim);font-size:14px}
.foe .mod{background:#170609;border-left:3px solid var(--mult);padding:8px 10px;border-radius:0 8px 8px 0;font-size:15px}
.foe .hpbar{width:100%;height:16px}
.foe .hpbar i{background:var(--mult)}
.foe .hpnum{font-family:var(--display);font-size:18px}
.foe .ocharms{display:flex;flex-wrap:wrap;gap:6px}
.foe .ocharms span{background:#1b080c;border:1px solid var(--brass-dim);border-radius:8px;padding:3px 6px;font-size:13px}
.foe.hit{animation:shake .35s}
@keyframes shake{25%{transform:translateX(-6px)}50%{transform:translateX(5px)}75%{transform:translateX(-3px)}}

.felt{background:radial-gradient(ellipse at 50% 0%, var(--felt-3), var(--felt-2) 75%);border:2px solid var(--line);border-radius:18px;
  padding:18px clamp(12px,3vw,28px);display:flex;flex-direction:column;gap:14px;min-height:540px}
.rowhead{display:flex;align-items:baseline;gap:10px;color:var(--dim);font-size:15px;margin-bottom:6px}
.rowhead b{font-family:var(--display);font-weight:400;font-size:22px;color:var(--chalk)}
.bust{color:var(--mult)!important}
.hands{display:flex;flex-wrap:wrap;gap:14px 26px}
.hblock{border-radius:12px;padding:4px;border:2px solid transparent}
.hblock.active{border-color:var(--brass);background:rgba(217,171,82,.07)}
.hhead{display:flex;align-items:baseline;gap:8px;color:var(--dim);font-size:14px;margin:0 0 6px 2px;min-height:24px}
.hhead b{font-family:var(--display);font-weight:400;font-size:20px;color:var(--chalk)}
.tag{font-size:12px;font-weight:700;padding:1px 6px;border-radius:5px;background:var(--felt-3);color:var(--chalk)}
.tag.win{background:var(--good);color:#0e2412} .tag.lose{background:var(--mult);color:#2b0703}
.hand{display:flex;flex-wrap:wrap;gap:8px;min-height:calc(var(--card-w)*1.39)}

/* ---------- cartes, relief 3D et éditions ---------- */
.card{position:relative;width:var(--card-w);aspect-ratio:226/314;border-radius:7px;background:#fbf7ef;color:#1d1a1a;
  box-shadow:0 3px 0 rgba(0,0,0,.35);overflow:hidden;flex:none;
  transform:perspective(700px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg));transition:transform .3s ease, box-shadow .3s}
.card.tilt{transform:perspective(700px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg)) scale(1.1);transition:transform .06s linear;
  z-index:5;box-shadow:0 14px 22px rgba(0,0,0,.5)}
.card img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.card .face{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;font-family:var(--display);line-height:1}
.card .face span:first-child{font-size:calc(var(--card-w)*.36)}
.card .face span:last-child{font-size:calc(var(--card-w)*.34)}
.card.red .face{color:#b3202b}
.card.back{background:repeating-linear-gradient(45deg,#6e1d28 0 6px,#5a1620 6px 12px);border:3px solid #fbf7ef}
.card::after{content:"";position:absolute;inset:0;z-index:4;pointer-events:none;opacity:0;transition:opacity .2s;
  background:radial-gradient(circle at var(--mx,50%) var(--my,50%), rgba(255,255,255,.5), transparent 55%)}
.card.tilt::after{opacity:1}
.card.foil::before,.card.holo::before,.card.poly::before{content:"";position:absolute;inset:0;z-index:3;pointer-events:none}
.card.foil::before{background:linear-gradient(115deg, transparent 15%, rgba(190,225,255,.55) calc(var(--mx,35%) - 12%),
  rgba(255,255,255,.85) var(--mx,35%), rgba(150,190,255,.5) calc(var(--mx,35%) + 12%), transparent 85%);mix-blend-mode:screen;opacity:.75}
.card.holo::before{background:repeating-linear-gradient(110deg,#ff4d6d 0 7%,#ffd166 7% 14%,#6dffb0 14% 21%,#4dc3ff 21% 28%,#b36dff 28% 35%);
  background-size:260% 260%;background-position:var(--mx,40%) var(--my,40%);mix-blend-mode:color-dodge;opacity:.42}
.card.poly::before{background:conic-gradient(from 0deg at var(--mx,50%) var(--my,50%),#ff5e7e,#ffd25e,#5effa0,#5ec8ff,#c05eff,#ff5e7e);
  mix-blend-mode:hue;opacity:.75;animation:polyspin 6s linear infinite}
@keyframes polyspin{to{filter:hue-rotate(360deg)}}
.card .enh{position:absolute;left:0;right:0;bottom:0;padding:2px 0;font:700 11px var(--body);text-align:center;color:#fff;z-index:4}
.enh.grave{background:var(--chips)} .enh.rouge{background:var(--mult)} .enh.or{background:#b8862b} .enh.verre{background:#7c8fa0}
.card .ed{position:absolute;top:3px;left:3px;z-index:4;font:700 10px var(--body);padding:1px 4px;border-radius:4px;background:rgba(20,10,30,.8);color:#fff}
.card.deal{animation:deal .28s ease-out}
@keyframes deal{from{transform:translateY(-30px) rotate(-6deg);opacity:0}}
.card.broken{animation:breakc .6s forwards}
@keyframes breakc{to{transform:scale(.6) rotate(12deg);opacity:0}}
.card.pick{cursor:pointer}
.card.sel{outline:3px solid var(--violet);outline-offset:2px;translate:0 -8px}
.card.fromsleeve{box-shadow:0 0 0 2px var(--violet),0 3px 0 rgba(0,0,0,.35)}
.card.special{background:linear-gradient(160deg,#35194f,#140a22 70%);color:var(--chalk);border:2px solid var(--violet)}
.card.special.nail{background:linear-gradient(160deg,#3a2a12,#120c05 70%);border-color:var(--brass)}
.spface{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;padding:4px;text-align:center}
.spface .sico{font-size:calc(var(--card-w)*.36);line-height:1}
.card.nail .sico{font-family:var(--display);color:var(--brass)}
.spface b{font:700 calc(var(--card-w)*.13)/1.05 var(--body);color:var(--chalk)}
.spface small{font:600 calc(var(--card-w)*.12) var(--body);color:var(--dim)}
.sleeve{display:flex;flex-wrap:wrap;align-items:flex-end;gap:12px;padding:10px 12px;border:2px dashed var(--line);border-radius:12px;--card-w:clamp(46px,6vw,60px)}
.sleeve .slabel{flex-basis:100%;color:var(--dim);font-size:14px}
.sleeve .sempty{color:var(--line);font-size:14px}
.sleeve .sitem{display:flex;flex-direction:column;align-items:center;gap:6px}
.sleeve .linkbtn{padding:3px 8px;font-size:13px}
.sleeve .linkbtn:disabled{opacity:.35;cursor:not-allowed}
.nails{display:inline-flex;gap:4px;font-size:13px}
.nails span{font-family:var(--display);min-width:22px;text-align:center;padding:0 4px;border-radius:5px;border:1px solid var(--line);color:var(--line)}
.nails span.own{color:var(--dim);border-color:var(--brass-dim)}
.nails span.on{background:var(--brass);color:#2a1606;border-color:var(--brass)}

.tally{display:flex;align-items:center;justify-content:center;gap:10px;flex-wrap:wrap;padding:6px 0;min-height:74px}
.box{min-width:92px;padding:6px 12px;border-radius:10px;text-align:center;font-family:var(--display);font-size:30px;line-height:1.1}
.box small{display:block;font:600 12px var(--body);opacity:.85}
.box.chips{background:var(--chips);color:#07202e}
.box.mult{background:var(--mult);color:#2b0703}
.box.dmg{border:2px solid var(--brass);color:var(--brass);min-width:110px}
.box.pop{animation:pop .18s}
@keyframes pop{50%{transform:scale(1.12)}}
.op{font-family:var(--display);font-size:26px;color:var(--dim)}
.msg{text-align:center;min-height:1.4em;font-size:18px}
.msg.good{color:var(--good)} .msg.bad{color:var(--mult)}
.steps{text-align:center;color:var(--dim);font-size:14px;min-height:1.3em}

.actions{display:flex;flex-wrap:wrap;gap:10px;justify-content:center;margin-top:auto}
.btn{border-radius:10px;padding:12px 18px;font-weight:700;font-size:18px;background:var(--felt-3);border:2px solid var(--line);min-width:100px}
.btn:hover:not(:disabled){border-color:var(--brass)}
.btn:disabled{opacity:.38;cursor:not-allowed}
.btn.main{background:var(--brass);color:#2a1606;border-color:var(--brass)}
.btn kbd{font:600 12px var(--body);opacity:.6;margin-left:6px}
.peek{display:flex;align-items:center;gap:10px;justify-content:center;color:var(--dim);font-size:14px}
.peek .card{--card-w:40px}

/* ---------- charmes ---------- */
.charmbar{margin-top:18px}
.charmbar h3{margin:0 0 8px;font:600 15px var(--body);color:var(--dim)}
.charms{display:flex;gap:10px;flex-wrap:wrap}
.charm{width:156px;min-height:124px;background:#1b080c;border:2px solid var(--brass-dim);border-radius:12px;padding:10px;text-align:left;
  display:flex;flex-direction:column;gap:4px;position:relative}
.charm .ico{font-size:24px;line-height:1}
.charm b{font-family:var(--display);font-weight:400;font-size:15px;color:var(--brass);line-height:1.1}
.charm p{margin:0;font-size:13.5px;color:var(--chalk);line-height:1.25}
.charm .trig{position:absolute;top:8px;right:8px;font-size:11px;font-weight:700;padding:1px 6px;border-radius:5px;background:var(--violet);color:#1b0b33}
.charm.empty{border-style:dashed;border-color:var(--line);color:var(--line);align-items:center;justify-content:center;font-size:14px}
.charm.fire{animation:fire .35s;border-color:var(--brass)}
@keyframes fire{40%{transform:translateY(-8px) rotate(-2deg);box-shadow:0 8px 0 rgba(0,0,0,.4)}}
.charm .price{margin-top:auto;display:flex;justify-content:space-between;align-items:center;gap:6px}
.charm .price button{border:0;border-radius:7px;padding:5px 10px;background:var(--brass);color:#2a1606;font-weight:700}
.charm .price button:disabled{opacity:.4}
.charm .rar{font-size:11px;color:var(--dim)}
.charm .move{display:flex;gap:4px}
.charm .move button{background:var(--felt-3);color:var(--chalk);padding:3px 7px}

/* ---------- fenêtres ---------- */
.modal{position:fixed;inset:0;background:rgba(15,3,6,.84);display:grid;place-items:center;padding:16px;z-index:10;overflow:auto}
.modal[hidden]{display:none}
.sheet{background:var(--felt-2);border:2px solid var(--brass-dim);border-radius:18px;padding:24px;max-width:800px;width:100%;max-height:calc(100vh - 32px);overflow:auto}
.sheet h2{margin:0 0 6px;font-family:var(--display);font-weight:400;font-size:30px;color:var(--brass);line-height:1.1}
.sheet h3{margin:20px 0 10px;font:700 16px var(--body);color:var(--dim)}
.sheet p{margin:6px 0;max-width:62ch}
.sheet .bar{display:flex;flex-wrap:wrap;gap:10px;margin-top:20px;align-items:center}
.title-big{font-family:var(--display);font-size:clamp(54px,11vw,104px);line-height:.9;color:var(--brass);margin:0}
.rules{columns:2 260px;column-gap:28px;font-size:15.5px}
.rules p{break-inside:avoid;margin:0 0 8px}
.rules b{color:var(--brass)}
.ledger{font-size:17px;border-collapse:collapse;min-width:260px}
.ledger td{padding:4px 0}.ledger td:last-child{text-align:right;color:var(--brass);font-family:var(--display);padding-left:30px}
.ledger tr:last-child td{border-top:1px solid var(--line);padding-top:8px}
.services{display:flex;gap:10px;flex-wrap:wrap}
.svc{flex:1 1 170px;background:#1b080c;border:2px solid var(--line);border-radius:12px;padding:12px;text-align:left;display:flex;flex-direction:column;gap:4px;align-items:flex-start}
.svc b{font-family:var(--display);font-weight:400;color:var(--chalk)}
.svc span{font-size:14px;color:var(--dim)}
.svc em{font-style:normal;color:var(--brass);font-weight:700;margin-top:auto}
.svc:hover:not(:disabled){border-color:var(--brass)}
.svc:disabled{opacity:.4;cursor:not-allowed}
.pack{display:flex;flex-wrap:wrap;gap:22px;justify-content:center;padding:18px 0;--card-w:clamp(80px,17vw,120px)}
.pack .opt{display:flex;flex-direction:column;align-items:center;gap:8px;background:none;border:0;padding:0;max-width:150px;text-align:center}
.pack .opt span{font-size:13.5px;color:var(--dim)}
.deckgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(54px,1fr));gap:8px}
.deckgrid .card{--card-w:54px;width:100%}
.field{display:flex;flex-direction:column;gap:4px;margin:10px 0}
.field input{padding:10px 12px;border-radius:9px;border:2px solid var(--line);background:#1b080c;color:var(--chalk);max-width:280px}
.code{font-family:var(--display);font-size:44px;letter-spacing:.12em;color:var(--brass)}
.status{color:var(--dim);min-height:1.3em}

@media (max-width:760px){
  .board{grid-template-columns:1fr}
  .foe{flex-direction:row;flex-wrap:wrap;align-items:center}
  .foe .mono{width:56px;height:56px;font-size:26px}
  .foe .info{flex:1;min-width:150px}
  .foe .mod,.foe .hpwrap,.foe .ocharms{flex-basis:100%}
  .felt{min-height:0}
  .charm{width:calc(50% - 5px)}
  .btn{min-width:0;flex:1 1 30%;padding:12px 8px}
  .hpbar{width:100px}
}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}