/* عظماء الجزائر — prototype UI, site palette */
html.dh-cartes #app,
html.dh-cartes .tbar{max-width:640px}
html.dh-cartes-wide #app,
html.dh-cartes-wide .tbar{max-width:min(1100px,100%)}
html.dhc-view #app{padding-top:0;padding-bottom:0;max-width:none;background:#0b1f18}
html.dhc-view .tbar{display:none!important}
.dhc-banner{background:rgba(201,162,39,.15);border:1px solid rgba(201,162,39,.45);border-radius:12px;padding:10px 12px;font-size:13px;line-height:1.45;margin:0 0 14px;color:var(--ink)}
.dhc-banner b{color:var(--g)}
.dhc-actions{display:flex;flex-direction:column;gap:8px;margin:12px 0 16px}
.dhc-stats{display:flex;gap:8px;flex-wrap:wrap;margin:0 0 14px}
.dhc-stats .chip{background:#fff;border:1px solid rgba(201,162,39,.4)}
.dhc-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
@media (min-width:520px){.dhc-grid{grid-template-columns:repeat(3,minmax(0,1fr))}}
.dhc-thumb{position:relative;display:block;border:0;padding:0;background:none;cursor:pointer;text-align:inherit;font:inherit;color:inherit;border-radius:12px}
.dhc-thumb .dhc-cardimg,
.dhc-thumb .dhc-htmlcard{width:100%;height:auto;border-radius:12px;box-shadow:0 6px 16px rgba(15,61,46,.2);border:1px solid rgba(201,162,39,.35);display:block;aspect-ratio:744/1039;object-fit:cover;background:#0b2c21}
.dhc-badge{position:absolute;top:6px;inset-inline-start:6px;font-size:10px;font-weight:700;padding:2px 6px;border-radius:8px;color:#1a1a1a;background:var(--gd);letter-spacing:.02em}
.dhc-badge.common{background:#d9d2c3;color:#333}
.dhc-badge.common{background:#C47A3A;color:#fff}
.dhc-badge.rare{background:#8A939C;color:#fff}
.dhc-badge.golden{background:linear-gradient(180deg,#F5D76E,#C9A227);color:#1a1a1a}
.dhc-badge.legendary{background:linear-gradient(180deg,#c084fc,#6B3FA0);color:#fff}
.dhc-lock{position:absolute;top:6px;inset-inline-end:6px;width:22px;height:22px;border-radius:50%;background:rgba(15,61,46,.85);color:var(--gl);font-size:12px;display:flex;align-items:center;justify-content:center;border:1px solid var(--gd)}
.dhc-count{position:absolute;bottom:6px;inset-inline-end:6px;background:rgba(15,61,46,.9);color:var(--gl);font-size:11px;font-weight:700;padding:2px 7px;border-radius:10px;border:1px solid var(--gd)}
.dhc-name{margin-top:6px;font-family:'Cormorant Garamond',Georgia,serif;font-weight:700;font-size:15px;color:var(--g);line-height:1.15}
.dhc-sub{font-size:11px;color:#6b6450}

/* HTML fallback card (when official PNG is missing) */
.dhc-htmlcard{position:relative;overflow:hidden;background:linear-gradient(180deg,#0F3D2E,#14523D);color:#F7EFDF;display:flex;flex-direction:column}
.dhc-htmlcard.golden{background:linear-gradient(180deg,#5c4310,#C9A227 55%,#8a6d12)}
.dhc-htmlcard .por{flex:1;background-size:cover;background-position:var(--pos,50% 20%);background-repeat:no-repeat;min-height:0}
.dhc-htmlcard .meta{padding:7px 8px 8px;background:rgba(0,0,0,.45)}
.dhc-htmlcard .meta b{display:block;font-family:'Amiri','Cormorant Garamond',serif;font-size:13px;line-height:1.2}
.dhc-htmlcard .st{display:grid;grid-template-columns:repeat(5,1fr);gap:2px;margin-top:4px;font-size:9px;text-align:center}
.dhc-htmlcard .st i{display:block;font-style:normal;font-weight:700;font-size:10px}

/* Duel table */
.dhc-score{display:flex;justify-content:space-between;align-items:center;gap:8px;margin:0 0 10px;font-weight:700}
.dhc-score .n{font-family:Inter,system-ui,sans-serif;font-size:26px;font-variant-numeric:tabular-nums;color:var(--g);line-height:1}
.dhc-score .who{font-size:11px;color:#6b6450;font-weight:600}
.dhc-choice{display:flex;align-items:center;gap:10px;margin:0 0 12px}
.dhc-choice img, .dhc-choice .dhc-cface{width:72px;height:auto;aspect-ratio:744/1039;border-radius:8px;box-shadow:0 4px 12px rgba(15,61,46,.2);border:1px solid rgba(201,162,39,.4)}
.dhc-choice .lab{font-size:14px;line-height:1.35}
.dhc-choice .lab b{display:block;font-size:18px;color:var(--g);font-family:'Cormorant Garamond',Georgia,serif}
.dhc-arena{display:grid;grid-template-columns:1fr auto 1fr;gap:8px;align-items:end;margin:8px 0 14px;min-height:210px}
.dhc-slot{display:flex;flex-direction:column;align-items:center;gap:4px}
.dhc-slot .lbl{font-size:11px;color:#6b6450;font-weight:600}
.dhc-flip{width:100%;max-width:148px;aspect-ratio:744/1039;perspective:800px}
.dhc-flip .inner{width:100%;height:100%;position:relative;transform-style:preserve-3d;transition:transform .7s cubic-bezier(.2,.75,.35,1)}
.dhc-flip.open .inner{transform:rotateY(180deg)}
.dhc-flip .face{position:absolute;inset:0;backface-visibility:hidden;-webkit-backface-visibility:hidden;border-radius:10px;overflow:hidden;box-shadow:0 6px 16px rgba(15,61,46,.25)}
.dhc-flip .face.back{background:#0b2c21}
.dhc-flip .face.back img,
.dhc-flip .face.front img{width:100%;height:100%;object-fit:cover;display:block}
.dhc-flip .face.front{transform:rotateY(180deg)}
.dhc-flip.win{filter:drop-shadow(0 0 10px rgba(201,162,39,.9))}
.dhc-flip.lose{opacity:.72;filter:grayscale(.25)}
.dhc-vs{font:700 18px 'Cormorant Garamond',Georgia,serif;color:var(--tc);align-self:center;padding-bottom:40px}
.dhc-cmp{text-align:center;min-width:64px;align-self:center;padding-bottom:28px}
.dhc-cmp .nums{font:700 20px 'Cormorant Garamond',Georgia,serif;color:var(--g)}
.dhc-cmp .tag{font-size:11px;color:#6b6450}
.dhc-hand{display:flex;gap:8px;overflow-x:auto;padding:4px 2px 10px;scrollbar-width:none;scroll-snap-type:x mandatory}
.dhc-hand::-webkit-scrollbar{display:none}
.dhc-hand button{flex:0 0 92px;scroll-snap-align:start;padding:0;border:2px solid transparent;border-radius:12px;background:none;cursor:pointer}
.dhc-hand button img, .dhc-hand button .dhc-htmlcard{width:100%;border-radius:10px;aspect-ratio:744/1039;object-fit:cover;display:block;box-shadow:0 3px 10px rgba(15,61,46,.2)}
.dhc-hand button:disabled{opacity:.4;cursor:default}
.dhc-hand button.on{border-color:var(--gd)}
.dhc-msg{text-align:center;font-size:15px;margin:8px 0 12px;line-height:1.4}
.dhc-msg.win{color:#1e6b48;font-weight:700}
.dhc-msg.lose{color:#a33a22;font-weight:700}
.dhc-msg.draw{color:#6b6450;font-weight:700}
.dhc-detail{padding:12px}
.dhc-detail img{width:min(100%,280px);margin:0 auto 10px;display:block;border-radius:12px;box-shadow:0 6px 16px rgba(15,61,46,.2)}
.dhc-strow{display:flex;justify-content:space-between;align-items:center;padding:6px 0;border-bottom:1px dashed rgba(201,162,39,.35);font-size:14px}
.dhc-strow span{width:10px;height:10px;border-radius:50%;display:inline-block;margin-inline-end:6px}
.dhc-reset{margin-top:18px;font-size:12px;color:#6b6450;text-align:center}
.dhc-reset button{background:none;border:0;color:var(--tc);cursor:pointer;font:inherit;text-decoration:underline}
@media (prefers-reduced-motion:reduce){
  .dhc-flip .inner{transition:none}
}

.dhc-stats{align-items:center}
.dhc-bio{font-size:14px;line-height:1.55;margin:0 0 12px;color:var(--ink)}

/* ---- Collection album ---- */
.dhc-colhead{padding:12px 16px 14px}
.dhc-coltop{display:flex;align-items:center;gap:10px}
.dhc-coltop h1{margin:0;flex:1;font-size:24px;line-height:1.1}
.dhc-progress{display:flex;align-items:center;gap:10px;margin-top:10px}
.dhc-pbar{flex:1;height:7px;background:rgba(255,255,255,.18);border-radius:99px;overflow:hidden}
.dhc-pbar i{display:block;height:100%;background:var(--gd);border-radius:99px;width:0}
.dhc-progress span{font:700 13px Inter,sans-serif;color:var(--gl);font-variant-numeric:tabular-nums;min-width:3.2em}
.dhc-colwrap{padding-top:12px}
.dhc-toolbar{display:flex;flex-direction:column;gap:8px;margin:0 0 14px}
.dhc-seg{display:flex;background:var(--cr2);border-radius:22px;padding:3px;width:100%}
.dhc-seg button{flex:1;border:0;background:transparent;padding:8px 4px;border-radius:20px;font:600 12px Inter,sans-serif;color:var(--g);cursor:pointer;line-height:1.2}
.dhc-seg button.on{background:var(--g);color:var(--gl)}
.dhc-viewseg{display:flex;background:var(--cr2);border-radius:22px;padding:3px;width:100%;max-width:320px;align-self:center}
.dhc-viewseg button{flex:1;border:0;background:transparent;padding:8px 10px;border-radius:20px;font:700 13px Inter,sans-serif;color:var(--g);cursor:pointer;line-height:1.2}
.dhc-viewseg button.on{background:var(--g);color:var(--gl)}
.dhc-viewseg button:focus-visible{outline:2px solid var(--gd);outline-offset:2px}
.dhc-mine{align-self:flex-end;border:1px solid rgba(15,61,46,.25);background:#fff;color:var(--g);border-radius:16px;padding:5px 10px;font:600 12px Inter,sans-serif;cursor:pointer}
.dhc-mine.on{background:var(--g);color:var(--gl);border-color:var(--g)}

.dhc-album{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;align-items:start}
@media (min-width:480px){.dhc-album{grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}}
@media (min-width:800px){.dhc-album{grid-template-columns:repeat(4,minmax(0,1fr));gap:16px}}
@media (min-width:1100px){.dhc-album{grid-template-columns:repeat(5,minmax(0,1fr))}}
.dhc-album .dhc-thumb{width:100%;max-width:220px;justify-self:center}

.dhc-art{position:relative;display:block;width:100%;aspect-ratio:744/1039;border-radius:12px;overflow:hidden;background:#0b2c21;box-shadow:0 6px 16px rgba(15,61,46,.18);border:1px solid rgba(201,162,39,.35)}
.dhc-thumb.r-golden .dhc-art{border-color:#C9A227;box-shadow:0 0 0 2px #C9A227,0 8px 18px rgba(15,61,46,.22)}
.dhc-thumb.r-rare .dhc-art{border-color:#5b8def;box-shadow:0 0 0 2px #5b8def,0 8px 18px rgba(15,61,46,.18)}
.dhc-thumb.r-common .dhc-art{border-color:#c5b89a}
.dhc-art .dhc-cardimg,.dhc-art .dhc-htmlcard{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;border:0;border-radius:0;box-shadow:none;aspect-ratio:auto}
.dhc-thumb{border-radius:12px}
.dhc-thumb:focus-visible{outline:2px solid var(--gd);outline-offset:3px}

.dhc-miss{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:flex-end;padding:12px 8px 14px;background:linear-gradient(180deg,transparent 45%,rgba(8,28,20,.82) 100%);color:#F7EFDF;text-align:center;pointer-events:none}
.dhc-miss-lock{width:28px;height:28px;border-radius:50%;background:rgba(15,61,46,.9);border:1px solid var(--gd);display:flex;align-items:center;justify-content:center;margin-bottom:8px}
.dhc-miss-lock svg{width:14px;height:14px;fill:var(--gl)}
.dhc-miss-name{font-family:'Amiri','Cormorant Garamond',Georgia,serif;font-weight:700;font-size:15px;line-height:1.2;text-shadow:0 1px 4px #000}
.dhc-backimg{filter:grayscale(1) brightness(.72)}

.dhc-thumb.locked .dhc-art,
.dhc-thumb.locked.r-golden .dhc-art,
.dhc-thumb.locked.r-rare .dhc-art,
.dhc-thumb.locked.r-common .dhc-art{border-color:rgba(15,61,46,.25);box-shadow:0 4px 12px rgba(15,61,46,.12)}


.dhc-badge{z-index:1}
.dhc-count{z-index:1}

.dhc-empty{text-align:center;color:#6b6450;padding:28px 8px;font-size:14px}

/* ---- Fullscreen card viewer ---- */
.dhc-viewer{min-height:100vh;min-height:100dvh;background:#0b1f18;color:var(--cr);padding:calc(10px + env(safe-area-inset-top,0px)) 12px calc(16px + env(safe-area-inset-bottom,0px));box-sizing:border-box;position:relative}
.dhc-vclose,.dhc-vnav{position:absolute;z-index:3;border:0;cursor:pointer;color:#fff;background:rgba(0,0,0,.45);border:1px solid rgba(201,162,39,.55)}
.dhc-vclose{top:calc(10px + env(safe-area-inset-top,0px));inset-inline-end:12px;width:40px;height:40px;border-radius:50%;font-size:20px;line-height:1}
.dhc-vnav{top:38%;width:40px;height:40px;border-radius:50%;font-size:22px;line-height:1}
.dhc-vnav[disabled]{opacity:.25;cursor:default}
.dhc-vprev{inset-inline-start:8px}
.dhc-vnext{inset-inline-end:8px}
.dhc-vstage{display:flex;flex-direction:column;align-items:center;gap:14px;max-width:980px;margin:0 auto;padding-top:8px}
.dhc-vart{width:min(100%,320px);aspect-ratio:744/1039;border-radius:14px;overflow:hidden;box-shadow:0 10px 28px rgba(0,0,0,.45);background:#0b2c21;touch-action:pan-y}
.dhc-vart img,.dhc-vart .dhc-htmlcard{width:100%;height:100%;object-fit:cover;display:block}
.dhc-vmeta{width:100%;max-width:420px;padding:0 8px 8px}
.dhc-vmeta h2{margin:6px 0 2px;font:700 26px/1.15 'Amiri','Cormorant Garamond',Georgia,serif;color:var(--gl)}
.dhc-vdates{font-size:13px;color:#cfd8cf;margin-bottom:8px}
.dhc-vchips{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:8px}
.dhc-vchips .chip{background:rgba(255,255,255,.1);color:var(--cr);border:1px solid rgba(201,162,39,.4)}
.dhc-viewer .dhc-strow{border-bottom-color:rgba(201,162,39,.25);color:#F7EFDF}
.dhc-viewer .dhc-bio{color:#EFE3CB}
@media (min-width:800px){
  .dhc-vstage{padding-top:28px}
  .dhc-vart{width:min(42vw,380px)}
  .dhc-vmeta{flex:1;padding-top:10px;max-width:none}
  .dhc-vmeta h2{font-size:32px}
}
@media (prefers-reduced-motion:reduce){
  .dhc-pbar i{transition:none}
}

/* Viewer stack + info sheet */
.dhc-viewer{padding-inline:8px}
.dhc-vinfo{position:absolute;z-index:3;top:calc(10px + env(safe-area-inset-top,0px));inset-inline-start:12px;width:40px;height:40px;border-radius:50%;border:1px solid rgba(201,162,39,.55);background:rgba(0,0,0,.45);color:#fff;font:700 20px/1 Georgia,'Times New Roman',serif;cursor:pointer}
.dhc-stack{position:relative;width:min(100%,340px);aspect-ratio:744/1039;margin:0;touch-action:pan-y;overflow:visible;box-sizing:content-box;padding-bottom:16px;flex:0 1 auto}
.dhc-stack-wrap{display:flex;flex-direction:column;align-items:center;width:100%;padding-top:48px;padding-bottom:28px}
.dhc-pile{display:flex;flex-direction:row;align-items:center;justify-content:center;gap:4px;width:100%;direction:ltr}
.dhc-pile .dhc-stack{width:min(calc(100% - 108px),340px)}
.dhc-pile .dhc-vnav,
.dhc-vnav{position:relative;top:auto;inset:auto;flex:0 0 48px;width:48px;height:48px;min-width:48px;min-height:48px;border-radius:50%;font-size:30px;line-height:1;color:#F7EFDF;background:rgba(11,31,24,.92);border:2px solid #C9A227;box-shadow:0 4px 14px rgba(0,0,0,.45);z-index:3;transform:none}
.dhc-vnav[disabled]{opacity:.3;cursor:default}
.dhc-ihint{margin-top:14px;font-size:12px;color:#cfd8cf;text-align:center;min-height:1.2em}

.dhc-stack .dhc-scard{position:absolute;top:0;left:0;right:0;bottom:16px;height:auto;aspect-ratio:744/1039;border-radius:14px;overflow:hidden;box-shadow:0 10px 28px rgba(0,0,0,.45);background:#0b2c21;transform-origin:50% 80%}
.dhc-stack .dhc-scard img,.dhc-stack .dhc-scard .dhc-htmlcard{width:100%;height:100%;object-fit:cover;display:block}
.dhc-stack .dhc-scard[data-layer="2"]{transform:translateY(16px) scale(.92);opacity:.5;z-index:0;pointer-events:none}
.dhc-stack .dhc-scard[data-layer="1"]{transform:translateY(9px) scale(.96);opacity:.85;z-index:1;pointer-events:none}
.dhc-stack .dhc-scard[data-layer="0"]{z-index:2;cursor:pointer}
.dhc-stack .dhc-scard.leaving{transition:transform .36s ease,opacity .36s ease;transform:translateY(-30%) rotate(-9deg) scale(.94);opacity:0;pointer-events:none}
.dhc-stack .dhc-scard.pulse{animation:dhc-pulse .28s ease}
@keyframes dhc-pulse{50%{transform:scale(.97)}}
.dhc-ihint{margin-top:26px;font-size:12px;color:#cfd8cf;text-align:center;min-height:1.2em}
.dhc-vbar{display:flex;align-items:center;justify-content:center;gap:14px;margin-top:20px;position:relative;z-index:3}
.dhc-vbar .dhc-vnav{position:static;top:auto;inset:auto;flex:0 0 40px}
.dhc-vbar .dhc-ihint{margin:0;min-width:12em}

.dhc-ipanel{position:fixed;inset:0;z-index:6;background:rgba(0,0,0,.5);display:none;align-items:flex-end;justify-content:center}
.dhc-ipanel.open{display:flex}
.dhc-isheet{width:min(100%,520px);max-height:82vh;overflow:auto;background:#123528;color:#F7EFDF;border-radius:16px 16px 0 0;padding:16px 16px calc(18px + env(safe-area-inset-bottom,0px));border:1px solid rgba(201,162,39,.4);box-shadow:0 -8px 28px rgba(0,0,0,.4)}
.dhc-isheet h2{margin:6px 0 2px;font:700 26px/1.15 'Amiri','Cormorant Garamond',Georgia,serif;color:var(--gl)}
.dhc-iclose{float:inline-end;width:36px;height:36px;border-radius:50%;border:1px solid rgba(201,162,39,.55);background:rgba(0,0,0,.3);color:#fff;cursor:pointer;font-size:18px}
@media (min-width:800px){
  .dhc-stack-wrap{flex-direction:column;align-items:center}
  .dhc-pile .dhc-stack,.dhc-stack{width:min(42vw,400px)}
  .dhc-pile .dhc-vnav,.dhc-vnav{width:56px;height:56px;flex-basis:56px;min-width:56px;min-height:56px;font-size:34px}
  .dhc-ipanel{align-items:center}
  .dhc-isheet{border-radius:16px;max-height:80vh}
}
.dhc-pile .dhc-vnav{transform:none}
@media (prefers-reduced-motion:reduce){
  .dhc-stack .dhc-scard.leaving{transition:none;opacity:0}
  .dhc-stack .dhc-scard.pulse{animation:none}
}
@media (max-width:400px){
  .dhc-coltop h1{font-size:20px}
  .dhc-colhead .chip[data-game-title]{font-size:11px;padding:3px 7px}
  .dhc-seg button{font-size:11px;padding:8px 2px}
  .dhc-viewseg button{font-size:12px;padding:8px 6px}
}

/* ---- Inline collection pile (default view) ---- */
.dhc-tools-row{display:flex;justify-content:flex-end;align-items:center;gap:8px}
.dhc-mode{border:1px solid rgba(15,61,46,.25);background:#fff;color:var(--g);border-radius:16px;padding:5px 12px;font:600 12px Inter,sans-serif;cursor:pointer}
.dhc-mode:active,.dhc-mode:focus-visible{outline:2px solid var(--gd);outline-offset:2px}
.dhc-colwrap.mode-pile{overflow:visible}
.dhc-inline-pile{position:relative;width:100%;overflow:visible;padding:4px 0 12px}
.dhc-pile-tools{display:flex;align-items:center;justify-content:center;gap:12px;margin:0 0 8px;position:relative;z-index:4}
.dhc-vclose-inline{position:static;width:40px;height:40px;border-radius:50%;border:2px solid #C9A227;background:var(--g);color:var(--gl);font:700 22px/1 Inter,sans-serif;cursor:pointer;box-shadow:0 2px 8px rgba(15,61,46,.2)}
.dhc-pile-idx{font:700 13px Inter,sans-serif;color:var(--g);font-variant-numeric:tabular-nums}
.dhc-inline-pile .dhc-vinfo{position:static;width:40px;height:40px;background:var(--g);color:var(--gl);border:2px solid #C9A227;box-shadow:0 2px 8px rgba(15,61,46,.2)}
.dhc-inline-pile .dhc-ihint{color:#6b6450;margin-top:22px}
.dhc-inline-pile .dhc-pile{padding:18px 0 22px;overflow:visible}
.dhc-inline-pile .dhc-stack{width:min(calc(100% - 120px),280px);aspect-ratio:744/1039;margin:0;padding:0;overflow:visible}
.dhc-inline-pile .dhc-scard{top:0;left:0;right:0;bottom:auto;height:auto;aspect-ratio:744/1039;transform-origin:50% 80%;box-shadow:0 10px 24px rgba(15,61,46,.28)}
/* Fan / pile: 2–3 faces peeking with offset + rotation */
.dhc-inline-pile .dhc-scard[data-layer="2"]{transform:translate(-22px,14px) rotate(-8deg);opacity:1;z-index:0;filter:brightness(.92)}
.dhc-inline-pile .dhc-scard[data-layer="1"]{transform:translate(20px,10px) rotate(7.5deg);opacity:1;z-index:1;filter:brightness(.96)}
.dhc-inline-pile .dhc-scard[data-layer="0"]{transform:none;z-index:2;filter:none}
.dhc-inline-pile .dhc-scard.leaving{transform:translateY(-28%) rotate(-11deg) scale(.94);opacity:0}
.dhc-isheet .dhc-strow{border-bottom-color:rgba(201,162,39,.25);color:#F7EFDF}
.dhc-isheet .dhc-bio{color:#EFE3CB}
.dhc-isheet .chip{background:rgba(255,255,255,.1);color:#F7EFDF;border:1px solid rgba(201,162,39,.4)}
@media (min-width:800px){
  .dhc-inline-pile .dhc-stack{width:min(42vw,340px)}
}

/* ---- Duel pick: hand uses the collection pile, card fully visible ---- */
html.dhc-duel-pick #app{
  height:100dvh;max-height:100dvh;overflow:hidden;
  display:flex;flex-direction:column;
  padding-bottom:8px;
}
html.dhc-duel-pick #app .top.dhc-duelhead{flex:0 0 auto;padding:8px 16px 10px}
html.dhc-duel-pick #app .top.dhc-duelhead h1{font-size:18px;margin:0;flex:1}
html.dhc-duel-pick #app .wrap{
  flex:1 1 auto;min-height:0;overflow:hidden;
  display:flex;flex-direction:column;
  padding-top:8px;padding-bottom:8px;
}
.dhc-duelhead{padding:10px 16px 10px}
.dhc-choice-compact{margin:0 0 6px;gap:8px}
.dhc-choice-compact .lab b{font-size:16px}
.dhc-duel-pick .dhc-score{margin:0 0 6px}
.dhc-hand-pile{flex:1 1 auto;min-height:0;display:flex;flex-direction:column;align-items:stretch;padding:0;overflow:hidden}
.dhc-hand-pile .dhc-pile-tools{flex:0 0 auto;margin:0 0 2px}
.dhc-hand-pile .dhc-ihint{flex:0 0 auto;margin:6px 0 0;color:#6b6450;font-size:12px}
.dhc-hand-stage{
  flex:1 1 auto;min-height:0;width:100%;
  container-type:size;overflow:visible;
  display:flex;align-items:center;justify-content:center;
}
.dhc-hand-stage .dhc-pile{
  display:flex;flex-direction:row;align-items:center;justify-content:center;
  gap:4px;width:100%;height:100%;padding:8px 0;box-sizing:border-box;overflow:visible;direction:ltr;
}
.dhc-stack-fit{
  position:relative;
  width:min(calc(100cqi - 112px), calc(100cqb * 744 / 1039));
  height:min(100cqb, calc((100cqi - 112px) * 1039 / 744));
  aspect-ratio:744/1039;
  max-width:100%;
  max-height:100%;
  flex:0 0 auto;
}
.dhc-stack-fit .dhc-stack{
  position:absolute;inset:0;width:100%;height:100%;margin:0;padding:0;
  aspect-ratio:auto;overflow:visible;
}
.dhc-hand-stage .dhc-scard{
  top:0;left:0;right:0;bottom:0;height:auto;aspect-ratio:744/1039;
  box-shadow:0 8px 20px rgba(15,61,46,.28);
}
.dhc-hand-stage .dhc-scard img,
.dhc-hand-stage .dhc-scard .dhc-htmlcard{
  width:100%;height:100%;object-fit:contain;object-position:center;display:block;
  background:#0b2c21;
}
.dhc-hand-stage .dhc-scard[data-layer="2"]{transform:translate(-16px,10px) rotate(-7deg);opacity:1;z-index:0;filter:brightness(.92)}
.dhc-hand-stage .dhc-scard[data-layer="1"]{transform:translate(14px,8px) rotate(6deg);opacity:1;z-index:1;filter:brightness(.96)}
.dhc-hand-stage .dhc-scard[data-layer="0"]{transform:none;z-index:2;filter:none}
.dhc-statplay{flex:0 0 auto;display:flex;flex-direction:column;align-items:center;gap:8px;margin-top:8px}
.dhc-statchip{font:700 16px Inter,sans-serif;color:var(--g);background:#fff;border:1px solid rgba(201,162,39,.5);border-radius:999px;padding:6px 14px}
.dhc-statchip b{font-variant-numeric:tabular-nums;margin-inline-start:6px}
.dhc-playthis{width:100%;max-width:360px;font-size:18px;padding:12px 16px;font-weight:700}

/* Reveal/end: never crop the arena cards */
.dhc-arena .dhc-flip{width:100%;max-width:min(168px,42vw);aspect-ratio:744/1039;height:auto}
.dhc-arena .dhc-flip .face.back img,
.dhc-arena .dhc-flip .face.front img,
.dhc-arena .dhc-flip .face.front .dhc-cardimg,
.dhc-arena .dhc-flip .face.front .dhc-htmlcard{
  width:100%;height:100%;object-fit:contain;object-position:center;display:block;
}
.dhc-choice img, .dhc-choice .dhc-cface{object-fit:contain;object-position:center}

/* ---- Online match (reveals + pick, 360-friendly) ---- */
.dhc-online .dhc-choice-line{display:flex;align-items:center;gap:10px;margin:0 0 12px}
.dhc-choice-mini{width:44px;height:44px;object-fit:contain;flex:none}
.dhc-choice-line .mptimer{margin-inline-start:auto;min-width:36px;text-align:center}
.dhc-oreveal-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;align-items:start}
@media (min-width:700px){.dhc-oreveal-grid[data-reveal-n="3"],.dhc-oreveal-grid[data-reveal-n="4"]{grid-template-columns:repeat(4,minmax(0,1fr))}}
.dhc-oreveal{background:#fff;border-radius:12px;padding:6px;border:2px solid transparent}
.dhc-oreveal.win{border-color:var(--gd);box-shadow:0 0 0 2px rgba(201,162,39,.35)}
.dhc-oreveal-art{aspect-ratio:744/1039;width:100%;background:#111;border-radius:8px;overflow:hidden;display:flex;align-items:center;justify-content:center}
.dhc-oreveal-art img{width:100%;height:100%;object-fit:contain;object-position:center}
.dhc-oreveal-meta{padding:6px 4px 2px;font-size:13px;line-height:1.3}
.dhc-ostat{margin:2px 0}
.dhc-online .dhc-hand-pile .dhc-stack{width:min(calc(100% - 120px),240px);aspect-ratio:744/1039}
.dhc-online .dhc-hand-pile .dhc-scard img{width:100%;height:100%;object-fit:contain}

/* ---- Challenge / défi badge (icon + stat name in the stat colour) ---- */
.dhc-defi{
  display:inline-flex;align-items:center;gap:8px;
  padding:6px 14px 6px 10px;border-radius:16px;
  color:var(--stat);background:#fff;
  background:color-mix(in srgb, var(--stat) 14%, #fff);
  border:2px solid var(--stat);
  box-shadow:0 1px 0 color-mix(in srgb, var(--stat) 30%, transparent);
  font:800 18px/1.1 Inter,sans-serif;
  letter-spacing:.01em;max-width:100%;box-sizing:border-box
}
.dhc-defi-ico{
  width:28px;height:28px;flex:none;display:block;background:var(--stat);
  -webkit-mask-position:center;-webkit-mask-repeat:no-repeat;-webkit-mask-size:contain;
  mask-position:center;mask-repeat:no-repeat;mask-size:contain
}
.dhc-defi-name{font-weight:800}
.dhc-defi b{font-variant-numeric:tabular-nums;font-size:20px;margin-inline-start:2px;color:var(--stat)}
.dhc-defi-top{font-size:20px;padding:7px 16px 7px 11px}
.dhc-defi-top .dhc-defi-ico{width:32px;height:32px}
.dhc-defi-play{font-size:17px}
.dhc-choice-compact{align-items:flex-start}
.dhc-choice-compact .lab{display:flex;flex-direction:column;align-items:flex-start;gap:4px;flex:1;min-width:0}
html.dhc-duel-pick .dhc-choice-compact{margin:0 0 4px}
html.dhc-duel-pick .dhc-statplay{margin-top:4px;gap:6px}
.dhc-online .dhc-choice-line{align-items:flex-end;gap:8px;margin:0 0 6px}
.dhc-online .dhc-choice-line .lab{display:flex;flex-direction:column;align-items:flex-start;gap:3px;flex:1;min-width:0}
html.dhc-duel-pick .dhc-online.dhc-colwrap{
  flex:1 1 auto;min-height:0;display:flex;flex-direction:column;overflow:hidden
}
html.dhc-duel-pick .dhc-online .mpsb{flex:0 0 auto;margin-bottom:4px}
html.dhc-duel-pick .dhc-online .dhc-hand-pile{
  flex:1 1 auto;min-height:0;display:flex;flex-direction:column
}
html.dhc-duel-pick .dhc-online .dhc-hand-pile .dhc-pile{
  flex:1 1 auto;min-height:0;width:100%;
  display:flex;align-items:center;justify-content:center
}
html.dhc-duel-pick .dhc-online .dhc-hand-pile .dhc-stack{
  width:auto;height:100%;max-width:min(calc(100% - 112px),240px);max-height:100%;
  aspect-ratio:744/1039
}
html.dhc-duel-pick .dhc-online .dhc-statplay{margin-top:4px}

/* shop + copper/silver rarity chips */
.dhc-rchip.common{background:#C47A3A;color:#fff}
.dhc-rchip.rare{background:#8A939C;color:#fff}
.dhc-rchip.golden{background:#C9A227;color:#1a1a1a}
.dhc-thumb.r-common .dhc-art{border-color:#C47A3A}
.dhc-shop-tiers{display:grid;gap:10px;margin:12px 0}
.dhc-shop-tier{padding:16px 14px;text-align:center;border-radius:16px;position:relative;overflow:hidden}
.dhc-shop-name{font-weight:800;font-size:20px;margin-bottom:4px;letter-spacing:.01em}
.dhc-shop-price{margin-bottom:12px;font-weight:700;font-variant-numeric:tabular-nums}
.dhc-shop-bal{padding:14px;text-align:center;margin:8px 0}
.dhc-shop-pts{font-size:28px;font-weight:700}
.dhc-shop-confirm{padding:16px 14px;margin:8px 0;border-radius:16px}
.dhc-shop-tier.r-common,.dhc-shop-confirm.r-common,.dhc-shop-pack.r-common .dhc-shop-bal,
.dhc-shop-pack.r-common{
  background:linear-gradient(165deg,#F0C9A0 0%,#D08A4A 40%,#C47A3A 68%,#8D4E1C 100%);
  color:#2A1408;border:1px solid #E8B887;
  box-shadow:inset 0 1px 0 rgba(255,236,214,.55),0 8px 18px rgba(80,40,10,.22)
}
.dhc-shop-tier.r-rare,.dhc-shop-confirm.r-rare,.dhc-shop-pack.r-rare .dhc-shop-bal,
.dhc-shop-pack.r-rare{
  background:linear-gradient(165deg,#FBFCFF 0%,#E4E9EE 36%,#C5CED6 70%,#8A939C 100%);
  color:#1A1E24;border:1px solid #D5DCE3;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.7),0 8px 18px rgba(40,50,60,.2)
}
.dhc-shop-tier.r-golden,.dhc-shop-confirm.r-golden,.dhc-shop-pack.r-golden .dhc-shop-bal,
.dhc-shop-pack.r-golden{
  background:linear-gradient(165deg,#F8E7A0 0%,#E6C766 40%,#C9A227 72%,#8A6D12 100%);
  color:#1A1406;border:1px solid #F3DD86;
  box-shadow:inset 0 1px 0 rgba(255,246,200,.65),0 8px 18px rgba(80,60,10,.22)
}
.dhc-shop-tier .muted,.dhc-shop-confirm p,.dhc-shop-pack.r-common .muted,
.dhc-shop-pack.r-rare .muted,.dhc-shop-pack.r-golden .muted{color:inherit;opacity:.86}
.dhc-shop-tier.r-common .btn.p,.dhc-shop-confirm.r-common .btn.p,.dhc-shop-pack.r-common .btn.p{
  background:#FFF6EB;color:#3A1C0A;border:1px solid #8D4E1C
}
.dhc-shop-tier.r-rare .btn.p,.dhc-shop-confirm.r-rare .btn.p,.dhc-shop-pack.r-rare .btn.p{
  background:#1A1E24;color:#F4F6F8;border:1px solid #5E676F
}
.dhc-shop-tier.r-golden .btn.p,.dhc-shop-confirm.r-golden .btn.p,.dhc-shop-pack.r-golden .btn.p{
  background:#1A1406;color:#F8E7A0;border:1px solid #5C450C
}
.dhc-shop-tier .btn:disabled{opacity:.55;cursor:default;filter:grayscale(.15)}
.dhc-shop-confirm .btn:not(.p){
  background:rgba(255,255,255,.28);color:inherit;border:1px solid rgba(0,0,0,.28);font-weight:700
}
.dhc-shop-confirm.r-rare .btn:not(.p){background:rgba(26,30,36,.12)}
.dhc-shop-confirm p{font-weight:700;line-height:1.45;margin:0 0 12px}
.dhc-shop-pack{border-radius:16px;padding:10px 16px 0;margin:0;box-sizing:border-box}
.dhc-shop-resume,.dhc-shop-picklab{
  font-size:14px;line-height:1.45;text-align:center;max-width:100%;
  overflow-wrap:break-word;word-wrap:break-word;padding-inline:4px;margin:0 0 8px;
}
.dhc-shop-picklab{font-weight:700}
.dhc-pack-scene{position:relative;height:220px;display:flex;align-items:center;justify-content:center;margin:8px 0 16px}
.dhc-pack-box{position:relative;width:118px;height:164px;border-radius:12px;transform-origin:50% 80%;
  animation:dhc-pack-open 1.35s cubic-bezier(.22,.8,.24,1) both}
.dhc-pack-box i{position:absolute;inset:0;border-radius:12px;border:2px solid rgba(255,255,255,.45);
  box-shadow:0 10px 24px rgba(0,0,0,.28),inset 0 1px 0 rgba(255,255,255,.5)}
.dhc-pack-box i:nth-child(1){transform:translate(10px,12px) rotate(8deg) scale(.92);opacity:.65}
.dhc-pack-box i:nth-child(2){transform:translate(-8px,8px) rotate(-7deg) scale(.96);opacity:.85}
.dhc-shop-pack.r-common .dhc-pack-box i{background:linear-gradient(165deg,#F0C9A0,#C47A3A 55%,#8D4E1C)}
.dhc-shop-pack.r-rare .dhc-pack-box i{background:linear-gradient(165deg,#FBFCFF,#C5CED6 55%,#8A939C)}
.dhc-shop-pack.r-golden .dhc-pack-box i{background:linear-gradient(165deg,#F8E7A0,#C9A227 55%,#8A6D12)}
.dhc-pack-glow{position:absolute;inset:20% 18%;border-radius:50%;filter:blur(18px);opacity:.55;pointer-events:none;
  animation:dhc-pack-glow 1.35s ease both}
.dhc-shop-pack.r-common .dhc-pack-glow{background:#C47A3A}
.dhc-shop-pack.r-rare .dhc-pack-glow{background:#C5CED6}
.dhc-shop-pack.r-golden .dhc-pack-glow{background:#E6C766}
.dhc-shop-pick.is-reveal{animation:dhc-pack-in .5s ease .9s both}
@keyframes dhc-pack-open{0%{transform:scale(.86) rotate(-6deg)}55%{transform:scale(1.06) rotate(3deg)}100%{transform:scale(1.2) rotate(0deg);opacity:0}}
@keyframes dhc-pack-glow{0%{opacity:0;transform:scale(.6)}50%{opacity:.7}100%{opacity:0;transform:scale(1.6)}}
@keyframes dhc-pack-in{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){
  .dhc-pack-box,.dhc-pack-glow,.dhc-shop-pick.is-reveal{animation:none}
  .dhc-pack-scene{display:none}
}
.dhc-shop-take{width:100%;margin:0;font-weight:800}
.dhc-shop-pack [data-shop-back-menu]{display:block;text-align:center;margin:6px 0 10px;font-weight:700}

/* Pack pick: docked take button + shrinking pile, no horizontal clip */
html.dhc-shop-open #app{
  height:100dvh;max-height:100dvh;overflow:hidden;
  display:flex;flex-direction:column;
  padding-bottom:0;
}
html.dhc-shop-open #app .top{flex:0 0 auto;padding:10px 16px 12px}
html.dhc-shop-open #app .top h1{font-size:24px}
html.dhc-shop-open #app .wrap.dhc-shop-pack{
  flex:1 1 auto;min-height:0;overflow:hidden;
  display:flex;flex-direction:column;
  padding:8px 16px 0;
}
html.dhc-shop-open .dhc-shop-pack .dhc-shop-bal{padding:8px 12px;margin:0 0 6px}
html.dhc-shop-open .dhc-shop-pack .dhc-shop-pts{font-size:22px}
html.dhc-shop-open .dhc-shop-pack .dhc-shop-pick{
  flex:1 1 auto;min-height:0;
  display:flex;flex-direction:column;
}
html.dhc-shop-open .dhc-shop-pack .dhc-inline-pile{
  flex:1 1 auto;min-height:0;
  display:flex;flex-direction:column;
  padding:0;
}
html.dhc-shop-open .dhc-shop-pack .dhc-pile-tools{flex:0 0 auto;margin:0 0 4px}
html.dhc-shop-open .dhc-shop-pack .dhc-ihint{flex:0 0 auto;margin-top:6px}
html.dhc-shop-open .dhc-shop-pack .dhc-inline-pile .dhc-pile{
  flex:1 1 auto;min-height:0;padding:4px 0;
  container-type:size;overflow:visible;
}
html.dhc-shop-open .dhc-shop-pack .dhc-inline-pile .dhc-stack{
  width:min(calc(100cqi - 108px), calc(100cqb * 744 / 1039), 220px);
  height:min(100cqb, calc((100cqi - 108px) * 1039 / 744));
  aspect-ratio:744/1039;
  max-width:100%;max-height:100%;
  margin:0;padding:0;
}
.dhc-shop-dock{
  flex:0 0 auto;
  margin:8px -16px 0;
  padding:8px 16px calc(10px + env(safe-area-inset-bottom,0px));
  z-index:20;
  box-shadow:0 -10px 18px rgba(15,61,46,.12);
}
.dhc-shop-pack.r-common .dhc-shop-dock{background:linear-gradient(180deg,rgba(196,122,58,0),#C47A3A 36%,#8D4E1C)}
.dhc-shop-pack.r-rare .dhc-shop-dock{background:linear-gradient(180deg,rgba(197,206,214,0),#C5CED6 36%,#8A939C)}
.dhc-shop-pack.r-golden .dhc-shop-dock{background:linear-gradient(180deg,rgba(201,162,39,0),#C9A227 36%,#8A6D12)}
@media (max-height:900px){
  .dhc-pack-scene{height:160px;margin:4px 0 8px}
}
html.dhc-shop-open #app .wrap.dhc-shop-pack.revealing{overflow:auto}

/* game icon — variant C médaillon, list tile + headers */
.dhc-gameico{display:block;flex:none;width:48px;height:48px}
.dhc-gameico-sm{width:28px;height:28px}
.gthumb .dhc-gameico{width:48px;height:48px}
h1.dhc-h1, .dhc-h1{display:flex;align-items:center;gap:10px}
.dhc-h1 .dhc-gameico-sm{width:28px;height:28px}
.dhc-coltop .dhc-gameico-sm{width:26px;height:26px}

/* Enlarge / shrink a pile card from its spot */
.dhc-zoom{position:fixed;inset:0;z-index:2400;background:rgba(7,25,16,0);touch-action:manipulation}
.dhc-zoom.open{background:rgba(7,25,16,.72)}
.dhc-zoom-card{position:fixed;top:0;left:0;z-index:2401;border-radius:14px;overflow:hidden;box-shadow:0 18px 48px rgba(0,0,0,.55);background:#0b2c21;transform-origin:top left;will-change:transform;cursor:pointer}
.dhc-zoom-card img,.dhc-zoom-card .dhc-cardimg,.dhc-zoom-card .dhc-htmlcard{width:100%;height:100%;object-fit:contain;object-position:center;display:block;pointer-events:none}
.dhc-zoom-x{position:fixed;top:calc(10px + env(safe-area-inset-top,0px));inset-inline-end:12px;z-index:2402;width:40px;height:40px;border-radius:50%;border:1px solid rgba(201,162,39,.7);background:rgba(0,0,0,.5);color:#fff;font:700 26px/1 Georgia,serif;cursor:pointer}
.dhc-zoom-src{visibility:hidden!important}
.dhc-choice-line .mptimer{display:none}

/* Always-visible leave dock (salon + match). Stays above zoom; nav stays usable. */
.dhc-leave-dock{position:sticky;bottom:0;z-index:30;margin:12px -16px 0;padding:10px 16px calc(10px + env(safe-area-inset-bottom,0px));background:var(--cr,#F7EFDF);box-shadow:0 -8px 16px rgba(15,61,46,.12)}
.dhc-leave-salon{width:100%;font-weight:800}
html.dhc-zoom-open .tbar{z-index:2600}
html.dhc-zoom-open .dhc-leave-dock{
  position:fixed;left:50%;transform:translateX(-50%);width:100%;max-width:640px;bottom:0;margin:0;z-index:2600
}
html.dhc-duel-pick #app .wrap.dhc-online{
  display:flex;flex-direction:column;flex:1 1 auto;min-height:0;overflow:hidden;padding-bottom:0
}
html.dhc-duel-pick .dhc-leave-dock{position:relative;flex:0 0 auto;margin:8px -16px 0;transform:none;left:auto;width:auto;max-width:none;z-index:30}


.dhc-leave-ov{z-index:2700!important}
.dhc-leave-dlg{width:86%;max-width:380px;padding:22px 18px 18px;text-align:center;border:2px solid var(--gd)!important;box-shadow:0 16px 40px rgba(7,25,16,.35)}
.dhc-leave-title{font-weight:800;font-size:18px;line-height:1.45;margin:0 0 10px;color:var(--g)}
.dhc-leave-extra{font-size:14px;line-height:1.45;margin:0 0 14px}
.dhc-leave-dlg .dhc-actions{margin:0;display:flex;flex-direction:column;gap:8px}
.dhc-leave-dlg .btn.p{background:var(--g);color:var(--gl);font-weight:800}
.dhc-leave-dlg .btn:not(.p){background:rgba(15,61,46,.08);font-weight:700}

/* Hand picker (vs bot + online) */
.dhc-handpick{padding-bottom:96px}
.dhc-handbar{position:sticky;top:0;z-index:5;display:flex;flex-wrap:wrap;gap:6px;align-items:center;padding:8px 0 10px;background:var(--bg,#f4efe4)}
.dhc-handbar .dhc-hn{font-weight:800;font-size:16px}
.dhc-handhint{font-size:14px;line-height:1.45;margin:0 0 10px}
.dhc-handwarn{background:#fde8d8;color:#8a3b00;border-radius:10px;padding:8px 10px;font-size:13px;margin:0 0 10px}
.dhc-pickgrid .dhc-thumb{position:relative}
.dhc-pickgrid .dhc-thumb.selected .dhc-art,
.dhc-pickgrid .dhc-thumb.selected.r-golden .dhc-art,
.dhc-pickgrid .dhc-thumb.selected.r-rare .dhc-art,
.dhc-pickgrid .dhc-thumb.selected.r-common .dhc-art{box-shadow:0 0 0 3px #0F3D2E,0 8px 18px rgba(15,61,46,.25)}
.dhc-pickgrid .dhc-thumb.selected::after{content:"✓";position:absolute;top:6px;inset-inline-end:6px;z-index:2;width:22px;height:22px;border-radius:50%;background:#0F3D2E;color:#f5e6b8;font-size:13px;font-weight:800;display:flex;align-items:center;justify-content:center;line-height:1}
.dhc-pickgrid .dhc-thumb.blocked{opacity:.45;cursor:not-allowed}
.dhc-pickgrid .dhc-thumb.blocked .dhc-art{filter:grayscale(.35)}
.dhc-handactions{position:sticky;bottom:0;z-index:5;display:flex;flex-direction:column;gap:8px;padding:10px 0 calc(12px + env(safe-area-inset-bottom,0px));background:linear-gradient(180deg,transparent,var(--bg,#f4efe4) 18%)}
.dhc-handactions .btn[disabled]{opacity:.45;pointer-events:none}
.dhc-handready{text-align:center;padding:16px 8px}
.dhc-handclock{font-variant-numeric:tabular-nums;font-weight:700}