/* ========== TELA DE DUELO (estilo Yu-Gi-Oh) ========== */
#duel{position:fixed;inset:0;z-index:15;
  /* Japão tradicional: índigo (藍), vermelho shu (朱), dourado e papel washi; fundo: Hokusai, "Tempestade sob o cume" (domínio público) */
  --d-bg:#141A33;--d-ink:#FBF5E8;--d-mut:#C9BFA6;--d-gold:#E9C46A;--d-red:#E0533F;--d-blue:#7FA7D9;--d-line:rgba(233,196,106,.38);
  --hw:clamp(62px,10vh,96px);
  color:var(--d-ink);
  background:
    linear-gradient(180deg,rgba(16,21,44,.9) 0%,rgba(20,26,51,.78) 45%,rgba(16,21,44,.94) 100%),
    url("ukiyoe-raio.jpg") center 30%/cover no-repeat,
    var(--d-bg);
  padding-top:env(safe-area-inset-top,0px);padding-bottom:env(safe-area-inset-bottom,0px)}
#duel[hidden]{display:none}
body.duel-on{overflow:hidden}
#duel .dwrap{height:100%;display:grid;grid-template-rows:auto auto minmax(0,1fr) auto auto;grid-template-columns:minmax(0,1fr);
  grid-template-areas:"top" "opp" "field" "bar" "hand";max-width:1240px;margin:0 auto}
#duel .dtop{grid-area:top}#duel .dohand{grid-area:opp}#duel .dfield{grid-area:field}#duel .dbar{grid-area:bar}#duel .dhand{grid-area:hand}
@media (min-width:900px) and (min-aspect-ratio:5/4){
  #duel .dwrap{grid-template-columns:minmax(0,1fr) 320px;grid-template-rows:auto auto minmax(0,1fr) auto;grid-template-areas:"top top" "opp bar" "field bar" "hand hand"}
  #duel .dbar{border-left:1px solid var(--d-line);background:rgba(0,0,0,.28);align-items:stretch}
}
#duel .muted{color:var(--d-mut)}
#duel .btn{background:var(--d-ink);color:#1E2340;border:2px solid #0A0D1C;border-radius:4px;box-shadow:3px 3px 0 #0A0D1C}
#duel .btn.primary{background:#C8352B;color:#FBF5E8}
#duel .btn:disabled{opacity:.4}
#duel .dt b,#duel .dbanner b{font-family:"Shippori Mincho B1","Dela Gothic One",serif;font-weight:800}

/* topo: título, turno, de quem é a vez, desistir e as duas barras de Vida */
#duel .dtop{display:flex;flex-wrap:wrap;align-items:center;gap:6px 12px;padding:8px 16px;border-bottom:1px solid var(--d-line);background:rgba(0,0,0,.35)}
#duel .dt{display:flex;align-items:baseline;gap:8px;margin-right:auto;min-width:0}
#duel .dt b{font-family:"Dela Gothic One",system-ui,sans-serif;font-weight:400;font-size:1.05rem;color:var(--d-gold);letter-spacing:.02em}
#duel .dt span{font-size:.85rem;color:var(--d-mut)}
#duel .dturn{font-size:.75rem;font-weight:700;padding:2px 9px;border-radius:999px;border:1.5px solid var(--d-gold);background:var(--d-gold);color:#111;text-transform:uppercase;letter-spacing:.06em}
#duel .dq{font:inherit;font-size:.72rem;font-weight:700;color:var(--d-mut);background:transparent;border:1px solid var(--d-line);border-radius:999px;padding:2px 10px;cursor:pointer}
#duel .dq.on{color:#fff;background:var(--d-red);border-color:var(--d-red)}
#duel .dsc{font-size:.85rem;flex-basis:100%}
#duel .dsc i{color:var(--d-mut);font-style:normal;font-size:.75rem}
#duel .dsc.lps{display:flex;align-items:center;justify-content:flex-end;gap:10px;flex-wrap:wrap}
#duel .dlp{display:inline-flex;align-items:center;gap:6px}
#duel .dlp b{font-size:.85rem}
#duel .dlp .lpn{font-family:"Dela Gothic One",system-ui,sans-serif;font-weight:400;font-size:1.1rem;color:var(--d-gold);font-variant-numeric:tabular-nums}
#duel .dlp .lpb{width:clamp(60px,14vw,170px);height:10px;border-radius:999px;background:rgba(255,255,255,.12);border:1px solid var(--d-line);overflow:hidden}
#duel .dlp .lpb i{display:block;height:100%;background:linear-gradient(90deg,#3FB86B,#9BE36D);transition:width .8s ease}
#duel .dlp.low .lpb i{background:linear-gradient(90deg,#C8352B,#E0533F)}
#duel .dlp.low .lpn{color:var(--d-red)}
#duel .dtop .dcampo{font-size:.75rem;padding:2px 10px;border-radius:999px;border:1.5px solid #3FB86B;color:#BFF5C9;background:rgba(63,184,107,.12)}
#duel .dtop .dcampo b{color:#fff}

/* mãos */
#duel .dohand,#duel .dhand{display:flex;flex-direction:column;align-items:center;gap:4px;padding:4px 16px}
#duel .dohand{flex-direction:column-reverse}
#duel .dlbl{font-size:.8rem;font-weight:700;text-align:center}
#duel .dlbl i{font-style:normal;font-weight:400;color:var(--d-mut);margin-left:4px}
#duel .fan{display:flex;justify-content:center;min-height:30px}
#duel .fan .dc{margin:0 -9px;box-shadow:-2px 2px 6px rgba(0,0,0,.5)}
#duel .fan .dc:nth-child(odd){transform:rotate(-3deg)}#duel .fan .dc:nth-child(even){transform:rotate(3deg)}
#duel .dohand .fan .dc{transform:rotate(180deg)}
#duel .dhand{background:linear-gradient(0deg,rgba(0,0,0,.55),transparent);padding-bottom:8px}
#duel .dhand .row{container-type:inline-size;width:100%;display:flex;justify-content:center;align-items:flex-end;padding:20px 4px 24px;gap:0}
#duel .hc{flex:none;position:relative;background:none;border:0;padding:0;cursor:pointer;color:inherit;font:inherit}
#duel .hc:disabled{cursor:default}
#duel .hc .tag{position:absolute;left:50%;top:38%;transform:translate(-50%,-50%) rotate(-10deg);background:var(--d-red);color:#fff;font-size:.6rem;font-weight:700;padding:1px 6px;white-space:nowrap;z-index:3}
#duel .hc .tag.trib{background:#6A3FB8;top:6px;transform:translateX(-50%)}
/* com muitas cartas, elas se sobrepõem (como numa mão de verdade) em vez de ficarem minúsculas */
#duel .dhand .hc{--cardw:min(var(--hw), calc((100cqw - 24px) / (var(--n,5) * .62 + .38)));
  margin-left:min(6px, calc((100cqw - 24px - var(--n,5) * var(--cardw)) / max(var(--n,5) - 1, 1)))}
#duel .dhand .hc:first-child{margin-left:0}
#duel .dhand .hc .dc{width:var(--cardw)}
#duel .dhand .hc.ok .dc{box-shadow:0 0 0 2px rgba(233,196,106,.55),0 4px 12px rgba(0,0,0,.55)}
#duel .dhand .hc.sel .dc{outline:3px solid var(--d-gold);outline-offset:2px;box-shadow:0 0 22px rgba(242,201,76,.7)}
#duel.handidle .dhand{--hw:clamp(40px,7vh,62px);padding-bottom:4px}
#duel.handidle .dhand .row{padding:6px 4px 8px}
#duel.handidle .dhand .hc .dc .mt,#duel.handidle .dhand .hc .dc .ds{display:none}

/* carta */
#duel .dc{position:relative;width:var(--cw,100px);aspect-ratio:5/7.2;border-radius:7px;overflow:hidden;display:flex;flex-direction:column;
  background:linear-gradient(160deg,#2A2440,#14111F);border:2px solid var(--rc,#8A7A4A);box-shadow:0 4px 12px rgba(0,0,0,.55);font-size:.62rem;line-height:1.15;text-align:left;color:var(--d-ink)}
#duel .dc .art{height:56%;flex:none;background:#1E2340;border-bottom:2px solid var(--rc,#8A7A4A);display:grid;place-items:center;overflow:hidden}
#duel .dc .art img{width:100%;height:100%;object-fit:cover;object-position:50% 18%}
#duel .dc .noart{font-family:"Dela Gothic One",system-ui,sans-serif;font-size:2rem;color:var(--d-gold);opacity:.8}
#duel .dc .rkb{position:absolute;left:3px;top:3px;width:1.9em;height:1.9em;border-radius:50%;display:grid;place-items:center;background:var(--rc,#555);color:#fff;
  font-family:"Dela Gothic One",system-ui,sans-serif;font-size:.85rem;border:1.5px solid #fff}
#duel .dc .exb{position:absolute;right:3px;top:3px;background:var(--d-gold);color:#111;font-weight:700;padding:0 4px;border-radius:3px;font-size:.7rem}
#duel .dc .nm{padding:3px 5px 0;font-size:.74rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-family:"Shippori Mincho B1",serif;font-weight:800}
#duel .dc .mt{padding:0 5px;color:var(--d-mut);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#duel .dc .ds{padding:2px 5px;color:var(--d-mut);overflow:hidden;font-size:.58rem}
/* frente das cartas de lutador: papel washi e tinta índigo */
#duel .dc:not(.back):not(.fx){background:#FBF5E8;color:#1E2340}
#duel .dc:not(.back):not(.fx) .mt,#duel .dc:not(.back):not(.fx) .ds{color:#6B6452}
/* cartas especiais: estilo mangá (papel branco, tinta preta, amarelo e vermelho) */
#duel .dc.fx{--rc:#111;background:#fff;color:#111;border:2.5px solid #111;box-shadow:3px 3px 0 #111}
#duel .dc.fx .art{height:34%;background:#FFD400;background-image:repeating-conic-gradient(from 0deg at 50% 50%,rgba(0,0,0,.12) 0 4deg,transparent 4deg 12deg)}
#duel .dc.fx.trap .art{background-color:#E8202A}
#duel .dc.fx .art.pic{height:46%;background:#2a1d12;border-bottom:2.5px solid #111}
#duel .dc.fx .art.pic img{object-position:50% 45%}
#duel .dc.fx .noart{color:#111;opacity:1}
#duel .dc.fx.trap .noart{color:#fff}
#duel .dc.fx .nm{font-family:Bangers,"Dela Gothic One",sans-serif;font-weight:400;font-size:.95rem;letter-spacing:.03em}
#duel .dc.fx .mt{color:#E8202A;font-weight:700}
#duel .dc.fx .ds{color:#333}
/* carta de personagem só de texto (estilo Master Duel): moldura verde de Magia, faixa do nome, tipo e caixa de efeito */
#duel .dc.fx.txt{background:linear-gradient(170deg,#1F8A70,#0E5A48);border-color:#0B3D31;color:#111;padding:4px;gap:3px}
#duel .dc.fx.txt.trap{background:linear-gradient(170deg,#B0336E,#6E1A44);border-color:#4A0F2D}
#duel .dc.fx.txt .nm{background:#F3EBD3;border:1.5px solid #0B3D31;border-radius:3px;padding:2px 4px;font-size:.82rem;flex:none}
#duel .dc.fx.txt .mt{color:#fff;font-weight:700;padding:0 2px;flex:none}
#duel .dc.fx.txt .ds{flex:1;background:#F3EBD3;border:1.5px solid #0B3D31;border-radius:3px;padding:3px 4px;color:#1a1a1a;overflow:auto;font-size:.56rem;line-height:1.25}
#duel.handidle .dhand .hc .dc.fx.txt .ds{display:block}
#duel .dc.hid{--rc:#8A8270;border-style:dashed}
/* verso: ondas seigaiha em índigo, borda dourada e carimbo hanko 闘 */
#duel .dc.back{--rc:#E9C46A;display:grid;place-items:center;background-color:#1E2340;
  background-image:radial-gradient(circle at 100% 150%,transparent 24%,rgba(233,196,106,.55) 24% 28%,transparent 28% 36%,rgba(233,196,106,.55) 36% 40%,transparent 40%),
    radial-gradient(circle at 0 150%,transparent 24%,rgba(233,196,106,.55) 24% 28%,transparent 28% 36%,rgba(233,196,106,.55) 36% 40%,transparent 40%);
  background-size:22px 11px;box-shadow:inset 0 0 0 3px #1E2340,inset 0 0 0 4px rgba(233,196,106,.7),0 4px 12px rgba(0,0,0,.55)}
#duel .dc.back .bk{width:52%;aspect-ratio:1;border-radius:50%;display:grid;place-items:center;background:#C8352B;box-shadow:0 0 0 3px #1E2340,0 0 0 5px #C8352B}
#duel .dc.back .bk span{font-family:"Yuji Syuku","Shippori Mincho B1",serif;color:#FBF5E8;font-size:1.5rem;line-height:1}
#duel .dc.back.sm{width:clamp(28px,4.5vh,40px);border-width:1.5px;border-radius:4px}
#duel .dc.back.sm .bk span{font-size:.7rem}
/* ATK/DEF da carta (no campo e na mão) */
#duel .ad{position:absolute;left:50%;bottom:-4px;transform:translateX(-50%);z-index:3;white-space:nowrap;font-size:.66rem;font-weight:700;
  background:rgba(10,13,28,.92);color:var(--d-ink);border:1px solid var(--d-gold);border-radius:999px;padding:0 7px;font-variant-numeric:tabular-nums}
#duel .ad b{color:var(--d-gold)}
#duel .ad i{font-style:normal;color:var(--d-mut);margin:0 3px}
#duel .upb{position:absolute;right:2px;top:2px;z-index:4;font-weight:800;color:#111;background:#9BE36D;border-radius:50%;width:1.3em;height:1.3em;display:grid;place-items:center;font-size:.75rem}

/* ===== campo: em cima o adversário (Magias/Armadilhas no fundo, lutadores perto do meio), embaixo você ===== */
#duel .dfield{position:relative;min-height:0;overflow:hidden;container-type:size;padding:4px 12px}
#duel .yf{height:100%}
/* --ns = espaços por fileira (3, ou 5 nos duelos em dupla/trio): a carta encolhe para caber na altura e na largura */
#duel .yfi{height:100%;display:flex;flex-direction:column;justify-content:center;gap:4px;
  --cw:min(118px, calc((100cqh - 58px) / 5.3), calc((100cqw - 60px) / (var(--ns,3) * 1.5 + 2.4)))}
#duel .yside{display:flex;flex-direction:column;align-items:center;gap:4px;border-radius:12px;padding:4px 8px;transition:box-shadow .15s}
#duel .yside.top{background:radial-gradient(ellipse at center,rgba(200,53,43,.16),transparent 70%);border:1px solid rgba(224,83,63,.4)}
#duel .yside.bot{background:radial-gradient(ellipse at center,rgba(46,74,125,.3),transparent 70%);border:1px solid rgba(127,167,217,.45)}
#duel .yrow{display:flex;gap:10px;justify-content:center}
#duel .ystw{display:flex;align-items:center;gap:10px}
#duel .ypile{display:grid;gap:2px;font-size:.68rem;font-weight:700;color:var(--d-mut);white-space:nowrap}
#duel .ys{position:relative;flex:none;width:calc(var(--cw) * 1.42);height:calc(var(--cw) * 1.44);display:grid;place-items:center;
  background:rgba(0,0,0,.18);border:1px dashed var(--d-line);border-radius:8px;padding:0;color:inherit;font:inherit;perspective:900px}
#duel button.ys{cursor:pointer;border-style:solid;border-color:transparent;background:transparent}
#duel button.ys:disabled{cursor:default}
#duel .ys.st{width:calc(var(--cw) * .82);height:calc(var(--cw) * 1.18)}
#duel .ys.st .dc{width:calc(var(--cw) * .74);font-size:.42rem}
#duel .ys.st .dc .ds{display:none}
#duel .ys.st .dc .nm{font-size:.6rem}
#duel .ys.st.set .dc.fx.mine{opacity:.75;filter:saturate(.55)}
#duel .ys.st.on .dc{box-shadow:2px 2px 0 #111,0 0 18px rgba(255,212,0,.85);animation:zflip .5s ease both}
#duel .ys .dc{width:var(--cw)}
#duel .ys .dc.def{transform:rotate(90deg)}
#duel .ys .dc.set{opacity:.8;filter:saturate(.5)}
#duel .ys .dc.set:not(.back)::after{content:"virado";position:absolute;left:0;right:0;top:44%;text-align:center;background:rgba(0,0,0,.7);color:#fff;font-size:.6rem;font-weight:700;padding:2px 0}
#duel .ys.fresh .dc{animation:dplace .45s ease both}
#duel .yside.top .ys.fresh .dc{animation:dfromtop .5s cubic-bezier(.2,.9,.3,1.1) both}
#duel .ys.fresh .dc.def{animation:dplacedef .45s ease both}
#duel .ys.boss .dc{box-shadow:0 0 0 3px var(--d-red),0 0 30px rgba(224,83,63,.75)}
#duel .ys.ready .dc{box-shadow:0 0 0 3px var(--d-gold),0 0 20px rgba(242,201,76,.7);animation:dready 1.4s ease-in-out infinite}
#duel .ys.sel .dc{outline:3px solid #fff;outline-offset:3px}
#duel .ys.pick .dc{box-shadow:0 0 0 3px #9BE36D,0 0 22px rgba(155,227,109,.8)}
#duel .ys.tgt .dc{box-shadow:0 0 0 3px var(--d-red),0 0 22px rgba(224,83,63,.85);animation:dready 1s ease-in-out infinite}
#duel .ys .dc.isko{animation:dshake .45s ease;filter:grayscale(.8) brightness(.6)}
#duel .ymid{display:flex;justify-content:center;padding:2px 0}
#duel .yph{display:flex;gap:4px;flex-wrap:wrap;justify-content:center}
#duel .yph span{font-size:.66rem;font-weight:700;letter-spacing:.05em;text-transform:uppercase;padding:2px 8px;border-radius:999px;border:1px solid var(--d-line);color:var(--d-mut)}
#duel .yph span.on{background:var(--d-gold);border-color:var(--d-gold);color:#111}
#duel.dragging .yside.bot{border-style:dashed;border-width:2px}
#duel .yside.bot.over{box-shadow:0 0 0 2px rgba(242,201,76,.6),0 0 34px rgba(242,201,76,.55)}
#duel.picking .yside{box-shadow:inset 0 0 0 1px rgba(255,255,255,.1)}

/* efeito em destaque sobre o campo: carta ativada ou batalha */
#duel .yfx{position:absolute;inset:0;display:grid;place-items:center;pointer-events:none;z-index:8}
#duel .yfx:empty{display:none}
#duel .yfxc,#duel .yfxb{background:rgba(10,13,28,.9);border:2px solid var(--d-gold);border-radius:14px;padding:12px 16px;box-shadow:0 10px 40px rgba(0,0,0,.6);animation:dslam .35s cubic-bezier(.2,1.6,.4,1) both;max-width:94%}
#duel .yfxc{display:flex;align-items:center;gap:14px}
#duel .yfxc .dc{width:min(150px,30cqh);font-size:.6rem}
#duel .yfxc p{margin:0;font-size:.95rem;max-width:260px}
#duel .yfxc p span{color:var(--d-gold);font-size:.85rem}
/* carta ativada: chega virada, gira para a frente e pulsa; barrinha dourada = tempo na tela */
#duel .yact,#duel .yset{position:relative;padding-bottom:16px}
#duel .yflip{perspective:900px;width:min(150px,30cqh);flex:none}
#duel .yfin{position:relative;transform-style:preserve-3d;animation:yflip .9s .2s cubic-bezier(.3,1.35,.5,1) both}
#duel .yff,#duel .yfb{backface-visibility:hidden;-webkit-backface-visibility:hidden}
#duel .yfb{position:absolute;inset:0;transform:rotateY(180deg)}
#duel .yflip .dc{width:100%}
#duel .yff .dc{animation:yglow 1.6s 1.1s ease-in-out infinite}
#duel .ytime{position:absolute;left:14px;right:14px;bottom:6px;height:3px;border-radius:999px;background:var(--d-gold);transform-origin:left;animation:ytime var(--fxt,5s) linear both}
@keyframes yflip{0%{transform:translateY(40px) rotateY(180deg) scale(.55)}60%{transform:translateY(-6px) rotateY(-12deg) scale(1.08)}100%{transform:none}}
@keyframes yglow{0%,100%{box-shadow:0 0 0 2px var(--d-gold),0 0 14px rgba(255,212,0,.35)}50%{box-shadow:0 0 0 2px var(--d-gold),0 0 34px rgba(255,212,0,.9)}}
@keyframes ytime{from{transform:scaleX(1)}to{transform:scaleX(0)}}
/* pergunta "Ativar a Armadilha?" (só o dono vê a carta) */
#duel .yask{position:relative;padding-bottom:12px;border:2px solid var(--d-gold);border-radius:12px;animation:dslam .3s cubic-bezier(.2,1.6,.4,1) both}
#duel .yaskc{display:flex;align-items:center;gap:10px;justify-content:center}
#duel .yaskc .dc{width:64px;font-size:.42rem;flex:none}
#duel .yask .ytime{bottom:4px}
/* carta baixada virada: o verso cai girando na mesa (lutador fica deitado, em Defesa) */
#duel .ysetc{width:min(110px,24cqh);flex:none;animation:yset .75s cubic-bezier(.2,1.3,.4,1) both}
#duel .yset.mon .ysetc{animation-name:ysetm;margin:0 18px}
#duel .ysetc .dc{width:100%}
@keyframes yset{0%{transform:translateY(-70px) rotate(-200deg) scale(1.35);opacity:0}100%{transform:none;opacity:1}}
@keyframes ysetm{0%{transform:translateY(-70px) rotate(-110deg) scale(1.35);opacity:0}100%{transform:rotate(90deg);opacity:1}}
@media (prefers-reduced-motion:reduce){#duel .yfin,#duel .yff .dc,#duel .ysetc{animation-duration:.01s;animation-iteration-count:1}#duel .yset.mon .ysetc{transform:rotate(90deg)}}
#duel .yfxb{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:6px 14px}
#duel .yb{display:grid;justify-items:center;gap:4px}
#duel .yb .dc{width:min(110px,22cqh);font-size:.55rem}
#duel .yb>b{font-family:"Dela Gothic One",system-ui,sans-serif;font-weight:400;font-size:clamp(1.3rem,6cqh,2.2rem);line-height:1;color:var(--d-gold)}
#duel .yb ul{list-style:none;margin:0;padding:0;font-size:.68rem;color:var(--d-mut);text-align:center}
#duel .yb ul i{font-style:normal;color:#A9CF86}
#duel .ydirect b{font-size:1.1rem;color:var(--d-red)}
#duel .yfxb .vs{font-family:"Yuji Syuku","Shippori Mincho B1",serif;font-size:1.3rem;color:#FBF5E8;background:#C8352B;padding:2px 10px;transform:rotate(-8deg);border:2px solid #FBF5E8}
#duel .yres{grid-column:1/-1;margin:0;text-align:center;font-weight:700;color:var(--d-ink)}

#duel .ymsg p{max-width:420px;text-align:center}
#duel .ymsg b{font-family:"Dela Gothic One",system-ui,sans-serif;font-weight:400;font-size:1.8rem;color:var(--d-gold)}
#duel .yfxt{pointer-events:none}

/* barra de ação (dicas, botões da jogada, fases) e o registro do duelo */
#duel .dbar{padding:6px 14px;display:flex;flex-direction:column;justify-content:center;gap:6px;text-align:center;min-height:44px;min-width:0}
#duel .yact{display:grid;gap:6px;justify-items:center}
#duel .yact p{margin:0}
#duel .dh{font-weight:700;color:var(--d-gold)}
#duel .yhint{font-size:.82rem;max-width:520px}
#duel .ybtns,#duel .yphb{display:flex;gap:6px;flex-wrap:wrap;justify-content:center}
#duel .yphb{padding-top:6px;border-top:1px solid var(--d-line)}
#duel .yphb .btn{padding:.35em .8em;font-size:.82rem}
#duel .yphb .btn.end{background:var(--d-gold);color:#111}
#duel .sm{font-size:.75rem}
#duel .derr{color:var(--d-red);font-weight:700}
#duel .dwait{margin:0;align-self:center;font-weight:700;color:var(--d-gold);animation:dpulse 1.4s ease-in-out infinite}
#duel .ylog{list-style:none;margin:0;padding:6px 8px;font-size:.72rem;color:var(--d-mut);text-align:left;max-height:7.5em;overflow-y:auto;border-radius:8px;background:rgba(0,0,0,.25)}
#duel .ylog li{padding:1px 0}
#duel .ylog li:last-child{color:var(--d-ink)}
#duel .dbanner{display:grid;gap:6px;justify-items:center}
#duel .dbanner b{font-family:"Dela Gothic One",system-ui,sans-serif;font-weight:400;font-size:clamp(1.8rem,5.5vh,2.9rem);max-width:100%;line-height:1;color:var(--d-gold);text-shadow:4px 4px 0 #000;animation:dslam .5s cubic-bezier(.2,1.6,.4,1) both}
#duel .dbanner.lose b{color:var(--d-red)}
#duel .dbanner p{margin:0;font-size:.9rem}
@media (min-width:900px) and (min-aspect-ratio:5/4){
  #duel .ylog{max-height:none;flex:1 1 auto;min-height:0}
  #duel .dbar{justify-content:flex-start}
}

/* ===== transformação (duelo e janelas do tabuleiro) =====
   0–55%: a carta antiga treme e brilha com a aura; 55%: clarão; depois surge a carta da forma nova e o nome bate na tela.
   Sem animação (opção desligada), fica só o estado final: a carta nova com a aura. */
.tfx{--tf:#FFD54A;--tf2:#FFF3B0;display:grid;justify-items:center;gap:6px;padding:14px 18px;border-radius:14px;background:radial-gradient(ellipse at 50% 45%,rgba(0,0,0,.2),rgba(10,13,28,.94) 70%);color:#FBF5E8}
.tfx.tf-blue{--tf:#3FC7FF;--tf2:#C8F1FF}.tfx.tf-silver{--tf:#D9E4F5;--tf2:#FFFFFF}.tfx.tf-red{--tf:#FF4D6D;--tf2:#FFD0D8}
.tfx.tf-pink{--tf:#FF5FB8;--tf2:#FFD6EE}.tfx.tf-purple{--tf:#A35BFF;--tf2:#E6D2FF}.tfx.tf-green{--tf:#5DFF7A;--tf2:#D6FFDD}
.tfx-stage{position:relative;width:min(300px,64vw,calc((100vh - 230px) * .69));aspect-ratio:5/7.2;display:grid;place-items:center}
.tfx-card{position:absolute;inset:0;border-radius:10px;overflow:hidden;border:3px solid var(--tf);background:#1E2340;display:flex;flex-direction:column;box-shadow:0 0 30px var(--tf)}
.tfx-card img{width:100%;flex:1;min-height:0;object-fit:cover;object-position:50% 18%}
.tfx-card b{padding:6px 10px;background:#FBF5E8;color:#1E2340;font-family:"Shippori Mincho B1",serif;font-weight:800;font-size:1.05rem;text-align:center;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tfx-noimg{flex:1;display:grid;place-items:center;font-size:3rem;color:var(--tf)}
.tfx-card.from{opacity:0}
.tfx-aura{position:absolute;inset:-28%;border-radius:50%;background:radial-gradient(circle,var(--tf2) 0,var(--tf) 30%,transparent 66%);opacity:.55;filter:blur(6px)}
.tfx-flash{position:absolute;inset:-60%;border-radius:50%;background:radial-gradient(circle,#fff 0,var(--tf2) 25%,transparent 60%);opacity:0;pointer-events:none}
.tfx-name{margin:4px 0 0;font-family:"Dela Gothic One",system-ui,sans-serif;font-size:clamp(1.3rem,4.5vw,2rem);line-height:1.05;text-align:center;color:var(--tf);text-shadow:3px 3px 0 #000,0 0 18px var(--tf)}
.tfx-gain{margin:0;font-weight:700;color:#9BE36D}
@media all{
  .tfx .tfx-card.from{animation:tfFrom 2s ease-in both}
  .tfx .tfx-card.to{animation:tfTo .9s 1.95s cubic-bezier(.2,1.5,.4,1) both}
  .tfx .tfx-aura{animation:tfAura 2s ease-in both,tfPulse 1.1s 2s ease-in-out infinite}
  .tfx .tfx-flash{animation:tfFlash .9s 1.75s ease-out both}
  .tfx .tfx-name{animation:tfName .5s 2.3s cubic-bezier(.2,1.6,.4,1) both}
  .tfx .tfx-gain{animation:tfName .4s 2.6s ease both}
}
@keyframes tfFrom{0%{opacity:1;transform:none;filter:none}20%{opacity:1;transform:translateX(-3px)}30%{transform:translateX(3px)}40%{transform:translateX(-4px) scale(1.02)}50%{transform:translateX(4px) scale(1.03)}60%{transform:translateX(-5px) scale(1.04)}70%{transform:translateX(5px) scale(1.05);filter:brightness(1.5) saturate(1.4)}85%{opacity:1;transform:scale(1.08);filter:brightness(2.4)}100%{opacity:0;transform:scale(1.1);filter:brightness(3)}}
@keyframes tfTo{0%{opacity:0;transform:scale(1.35);filter:brightness(2.5)}60%{opacity:1}100%{opacity:1;transform:none;filter:none}}
@keyframes tfAura{0%{opacity:0;transform:scale(.6)}60%{opacity:.6;transform:scale(1)}100%{opacity:.9;transform:scale(1.15)}}
@keyframes tfPulse{0%,100%{opacity:.5;transform:scale(1)}50%{opacity:.8;transform:scale(1.08)}}
@keyframes tfFlash{0%{opacity:0;transform:scale(.3)}25%{opacity:1}100%{opacity:0;transform:scale(1.4)}}
@keyframes tfName{from{opacity:0;transform:scale(2.2) rotate(-6deg)}to{opacity:1;transform:none}}
#modal .tfx{margin:6px auto 10px;max-width:400px}
/* nas janelas do tabuleiro, as cores do painel não podem apagar o nome da carta e o nome da forma */
#modal .tfx .tfx-card b{color:#1E2340;display:block}
#modal .tfx .tfx-name{color:var(--tf);margin:4px 0 0}
#modal .tfx .tfx-gain{color:#9BE36D;margin:0}

@keyframes zflip{from{transform:rotateY(90deg)}to{transform:none}}
@keyframes dplace{from{opacity:0;transform:translateY(-14px) scale(1.08)}}
@keyframes dplacedef{from{opacity:0;transform:rotate(90deg) translateY(-14px) scale(1.08)}to{transform:rotate(90deg)}}
@keyframes dfromtop{0%{opacity:0;transform:translateY(-20vh) rotate(160deg) scale(.7)}100%{opacity:1}}
@keyframes dslam{from{transform:scale(2.2) rotate(-8deg);opacity:0}}
@keyframes dshake{20%{translate:-6px 0}40%{translate:6px 0}60%{translate:-4px 0}80%{translate:3px 0}}
@keyframes dpulse{50%{opacity:.55}}
@keyframes dready{0%,100%{filter:none}50%{filter:brightness(1.12)}}
@keyframes ddeal{0%{opacity:0;transform:translate(-38vw,-46vh) rotate(-40deg) scale(.55)}70%{opacity:1}100%{opacity:1}}

@media all{
  /* mão em leque: cada carta levemente girada (--rot) e mais baixa nas pontas (--drop) */
  #duel .dhand .hc{transform:translateY(var(--drop,0)) rotate(var(--rot,0deg));transform-origin:50% 120%;transition:transform .22s cubic-bezier(.2,.9,.3,1.2),filter .2s}
  #duel .dhand .hc:not(:disabled):hover,#duel .dhand .hc:not(:disabled):focus-visible{transform:translateY(-18px) rotate(0) scale(1.08);z-index:5}
  #duel .dhand .hc.sel{transform:translateY(-24px) rotate(0) scale(1.1);z-index:6}
  #duel .dhand .row.deal .hc{animation:ddeal .55s cubic-bezier(.2,.9,.3,1.1) both;animation-delay:calc(var(--i,0) * 90ms)}
  .dfly{position:fixed;z-index:60;pointer-events:none;margin:0}
}
#duel .ddrag .dc{box-shadow:0 18px 34px rgba(0,0,0,.6),0 0 0 3px var(--d-gold),0 0 26px rgba(242,201,76,.6)}
#duel .dhand .hc.dragging{opacity:.25}
#duel .dhand .hc.ok:not(:disabled){touch-action:none;-webkit-user-select:none;user-select:none}
#duel.dragging,#duel.dragging *{cursor:grabbing!important}
#duel .hc img{-webkit-user-drag:none;pointer-events:none}

@media (max-width:640px){
  #duel{--hw:clamp(54px,8.5vh,74px)}
  #duel .dtop{padding:6px 12px}
  #duel .dsc.lps{justify-content:space-between;flex-wrap:nowrap;gap:6px}
  #duel .dsc.lps>i{display:none}
  #duel .dlp .lpn{font-size:.95rem}
  #duel .dlp .lpb{width:44px}
  #duel .dlp>b:first-child{max-width:70px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  #duel .dfield,#duel .dbar,#duel .dohand,#duel .dhand{padding-left:8px;padding-right:8px}
  #duel .yfi{--cw:min(96px, calc((100cqh - 58px) / 5.3), calc((100cqw - 24px) / (var(--ns,3) * 1.48 + 2)))}
  #duel .yrow,#duel .ystw{gap:5px}
  #duel .ypile{display:none}
  #duel .ad{font-size:.56rem;padding:0 4px}
  #duel .ylog{max-height:3.2em}
  #duel .yfxb{gap:4px 8px;padding:8px}
}

/* Clímax, Lendário (★), cartas espiadas (👁) e Cartas da Arena */
#duel .dtop .dclimax{font-size:.75rem;padding:2px 10px;border-radius:999px;border:1.5px solid #E85D04;color:#FFD2B0;background:rgba(232,93,4,.14);white-space:nowrap}
#duel .dtop .dclimax.on{color:#fff;background:linear-gradient(90deg,#C8352B,#E85D04);border-color:#FFB070;font-weight:700;animation:dready 1.2s ease-in-out infinite}
#duel .dc .lgb{position:absolute;left:3px;top:calc(1.9em + 6px);width:1.6em;height:1.6em;border-radius:50%;display:grid;place-items:center;background:linear-gradient(135deg,#FFE27A,#E0A100);color:#5A3B00;font-weight:800;font-size:.7rem;box-shadow:0 0 8px rgba(255,212,0,.8);z-index:2}
#duel .peekb{position:absolute;left:2px;bottom:2px;z-index:4;font-size:.75rem;background:rgba(0,0,0,.65);border-radius:4px;padding:0 3px;line-height:1.3}
#duel .hc .tag.arena{background:#1F7A8C;top:auto;bottom:6px;transform:translateX(-50%)}
#duel button.ys.st{cursor:pointer;border-style:solid;border-color:transparent;background:transparent;padding:0}

/* mesa no estilo Yu-Gi-Oh: tapete escuro com brilho azul, zonas com moldura e as zonas laterais (Campo, Cemitério, Enfermaria, Mão) */
#duel .yfi{background:radial-gradient(ellipse at 50% 50%,rgba(40,90,140,.35),rgba(6,14,26,.85) 75%),repeating-linear-gradient(60deg,rgba(120,190,255,.04) 0 2px,transparent 2px 22px);
  border:2px solid rgba(120,190,255,.35);border-radius:16px;padding:6px;box-shadow:inset 0 0 50px rgba(80,160,255,.18)}
#duel .yside.top,#duel .yside.bot{background:none;border:none}
#duel .yside.top .yrow{flex-direction:row-reverse}
#duel .yrow{align-items:center}
#duel .ys.empty{border:2px solid rgba(120,190,255,.28);background:rgba(120,190,255,.05)}
#duel .ymon .ys.empty::before{content:"⚔";opacity:.18;font-size:1.4rem}
#duel .yst .ys.empty::before{content:"✦";opacity:.18;font-size:1.1rem}
#duel .yz{flex:none;width:calc(var(--cw) * .92);height:calc(var(--cw) * 1.3);display:grid;place-items:center;align-content:center;gap:1px;position:relative;
  border:2px solid rgba(120,190,255,.35);border-radius:6px;background:rgba(0,0,0,.25);color:#BFDDF7;font-size:.8rem;line-height:1.1;text-align:center}
#duel .yz b{font-family:"Dela Gothic One",system-ui,sans-serif;font-weight:400;font-size:1rem;color:#fff}
#duel .yz i{font-style:normal;font-size:.5rem;font-weight:700;text-transform:uppercase;letter-spacing:.05em;opacity:.85}
#duel .yz.fz{border-color:rgba(63,184,107,.6)}
#duel .yz.fz.on{box-shadow:0 0 14px rgba(63,184,107,.55)}
#duel .yz.fz .dc{width:calc(var(--cw) * .8);font-size:.38rem}
#duel .yz.fz .dc .ds{display:none}
#duel .yz.fz.on>i{position:absolute;bottom:-1px;background:rgba(0,0,0,.7);padding:0 3px;border-radius:3px}
#duel .yz.gz{border-color:rgba(160,160,170,.45)}
#duel .yz.ez{border-color:rgba(224,83,63,.45)}
@media (max-width:640px){#duel .yz i{font-size:.42rem}#duel .yz{font-size:.65rem}#duel .yz b{font-size:.8rem}}

/* ---- Ki, deck de 30 e cartas de suporte ---- */
#duel .kib{position:absolute;left:-5px;top:-9px;z-index:4;font-size:.62rem;font-weight:800;line-height:1;padding:2px 4px;border-radius:999px;
  background:#123B6E;color:#CFE6FF;border:1px solid #5AA7FF;box-shadow:0 1px 4px rgba(0,0,0,.5)}
#duel .kib.no{background:#3a1d1d;color:#ffb3a8;border-color:#C8352B;text-decoration:line-through}
#duel .dtop .dki{display:inline-flex;align-items:baseline;gap:2px;font-size:.8rem;padding:2px 10px;border-radius:999px;border:1.5px solid #5AA7FF;color:#CFE6FF;background:rgba(90,167,255,.14);white-space:nowrap}
#duel .dtop .dki i{font-style:normal;opacity:.75}
#duel .yz.ez{border-color:rgba(90,167,255,.6)}
#duel .yz.ez b{font-size:.85rem}
#duel .ys.st.void{visibility:hidden}
#duel .dnb,#duel .frzb{position:absolute;right:2px;top:calc(2px + 1.5em);z-index:4;font-weight:800;border-radius:50%;width:1.3em;height:1.3em;display:grid;place-items:center;font-size:.72rem}
#duel .dnb{background:#E0533F;color:#fff}
#duel .frzb{top:calc(2px + 3em);background:#7FB3D5;color:#0b2233}
#duel .hc .tag.syn{background:#2E8B57;top:auto;bottom:6px;transform:translateX(-50%)}
#duel .synb{display:inline-block;font-size:.72rem;font-weight:700;color:#0b2a17;background:#7BE0A1;border-radius:999px;padding:0 8px}
#duel .dhand .hc.disc .dc{box-shadow:0 0 0 2px #E0533F,0 4px 12px rgba(0,0,0,.55);animation:dready 1.2s ease-in-out infinite}
#duel .dc.tok{filter:saturate(.8)}
#duel .dc.tok .rkb{background:#555}
#duel .dc.fx.chc{border-color:#E9C46A}

/* ---- montador de deck (janela) e deck no painel do jogador ---- */
.panel.deckb{width:min(980px,100%)}
.dksum{display:flex;flex-wrap:wrap;gap:6px;margin:6px 0}
.dkp{font-size:.8rem;font-weight:700;padding:2px 10px;border-radius:999px;border:1.5px solid #3FB86B;background:rgba(63,184,107,.12)}
.dkp.bad{border-color:#E0533F;background:rgba(224,83,63,.14)}
.dkerr{margin:4px 0;padding-left:18px;font-size:.82rem;color:#E0533F}
.dkok{margin:4px 0;font-size:.85rem;font-weight:700;color:#3FB86B}
.dktabs,.dkrks{display:flex;flex-wrap:wrap;gap:5px;margin:6px 0}
.dkch{font:inherit;font-size:.8rem;font-weight:700;padding:3px 10px;border-radius:999px;border:1.5px solid var(--tone,rgba(128,128,128,.4));background:transparent;color:inherit;cursor:pointer}
.dkch.sm{font-size:.72rem;padding:1px 8px}
.dkch.on{background:#E9C46A;border-color:#E9C46A;color:#111}
.dkfil{display:flex;flex-wrap:wrap;gap:6px;align-items:center;margin:4px 0 8px}
.dkfil select,.dkfil input{font:inherit;font-size:.85rem;padding:4px 8px;border-radius:8px;border:1.5px solid var(--tone,rgba(128,128,128,.4));background:var(--paper,#fff);color:inherit;min-width:0}
.dkfil input{flex:1 1 160px}
/* tutorial: balão do treinador por cima do duelo */
#coach{position:fixed;left:50%;top:52px;transform:translateX(-50%);z-index:30;width:min(560px,calc(100% - 32px));display:flex;flex-wrap:wrap;align-items:center;gap:6px 10px;
  padding:10px 14px;border-radius:12px;background:#FFF6D6;color:#1a1a1a;border:3px solid #111;box-shadow:4px 4px 0 #111;font-size:.92rem;line-height:1.35;animation:dslam .35s cubic-bezier(.2,1.6,.4,1) both}
#coach[hidden]{display:none}
#coach p{margin:0;flex:1 1 260px}
#coach .cbadge{font-weight:800;font-size:.75rem;background:#111;color:#FFD400;border-radius:999px;padding:2px 8px}
#coach .muted{color:#555}
/* computador: na coluna da direita, sobre o registro (não cobre a mesa nem a Vida do adversário) */
@media (min-width:900px) and (min-aspect-ratio:5/4){
  #coach{left:auto;transform:none;right:max(16px,calc((100vw - 1240px) / 2 + 14px));top:250px;width:290px;animation:none}
}
/* decks salvos (Só Duelo) */
.dksv{display:flex;flex-wrap:wrap;align-items:center;gap:6px;margin:6px 0;padding:6px 8px;border-radius:9px;border:1.5px dashed var(--tone,rgba(128,128,128,.4))}
.dksv small{flex-basis:100%}
.dksvi{display:inline-flex;gap:2px}
.dksvn{display:inline-flex;gap:4px;margin-left:auto}
.dksvn input{font:inherit;font-size:.85rem;padding:3px 8px;border-radius:8px;border:1.5px solid var(--tone,rgba(128,128,128,.4));background:var(--paper,#fff);color:inherit;width:9.5em}
.dklist{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:6px;max-height:min(46vh,460px);overflow:auto;padding:2px}
.dklist.mini{grid-template-columns:repeat(auto-fill,minmax(160px,1fr));max-height:min(40vh,340px)}
.dkt{display:flex;align-items:center;gap:7px;min-width:0;padding:5px 7px;border-radius:9px;border:1.5px solid var(--tone,rgba(128,128,128,.35));background:rgba(128,128,128,.06);color:inherit;font:inherit;text-align:left}
button.dkt{cursor:pointer}
.dkt.on{border-color:#E9C46A;background:rgba(233,196,106,.16)}
.dkt.off{opacity:.55}
.dkt .pic.mini,.dkt .dkq,.dkt .dki{flex:none;width:34px;height:34px;border-radius:7px;object-fit:cover;object-position:top;display:grid;place-items:center;font-size:1.05rem;background:rgba(128,128,128,.18)}
.dkt .dki{background:rgba(63,140,220,.18)}
.dkt .dki.trap{background:rgba(224,83,63,.2)}
.dkn{display:flex;flex-direction:column;min-width:0;flex:1}
.dkn b{font-size:.82rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.dkn small{font-size:.68rem;opacity:.8;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.dkc{flex:none;font-size:.7rem;font-weight:800;padding:1px 6px;border-radius:999px;background:rgba(128,128,128,.2)}
.dkc.on{background:#E9C46A;color:#111}
.dkb{display:flex;gap:3px;flex:none}
.dkb .btn{padding:2px 8px;min-width:0}
.dkv{display:flex;flex-direction:column;gap:2px}
.dkbig{display:flex;gap:8px;align-items:flex-start;flex-wrap:wrap;margin:4px 0}
.dkbig .ec{max-width:280px}
.dktabs.dk2{gap:4px;margin:2px 0 4px;padding:4px 0;border-top:1px dashed var(--tone,rgba(128,128,128,.35))}
.dkt.won{border-style:dashed;border-color:#B7791F;background:rgba(233,196,106,.12)}
.dkc.won{background:#B7791F;color:#fff}
@media (max-width:520px){.dktabs.dk2{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:thin}.dktabs.dk2 .dkch{flex:none}}
@media (max-width:520px){.dklist{grid-template-columns:minmax(0,1fr)}.dklist.mini{grid-template-columns:repeat(2,minmax(0,1fr))}}
.dkmsg{margin:4px 0;font-size:.85rem;font-weight:700;padding:4px 10px;border-radius:8px;background:rgba(233,196,106,.22);border:1.5px solid #E9C46A}
.dk.dkfull{margin-top:6px}

/* carta ampliada (como no Master Duel): painel à esquerda no computador e janela de toque longo no celular */
#duel .dzoom{display:none}
#duel :is(.dzoom,.dzpop) .dzc .dc{--cw:100%;width:100%;font-size:.95rem;transform:none;margin:0;animation:none;opacity:1;filter:none}
#duel :is(.dzoom,.dzpop) .dc .nm{font-size:1.25rem;padding:6px 10px 0}
#duel :is(.dzoom,.dzpop) .dc .mt{font-size:.85rem;padding:0 10px;display:block}
#duel :is(.dzoom,.dzpop) .dc .ds{font-size:.9rem;line-height:1.35;padding:6px 10px;display:block}
#duel :is(.dzoom,.dzpop) .dc .rkb{font-size:1.3rem}
#duel :is(.dzoom,.dzpop) .dc .exb{font-size:1rem}
#duel :is(.dzoom,.dzpop) .dc .noart{font-size:4rem}
#duel :is(.dzoom,.dzpop) .dc.fx.txt{padding:8px;gap:6px}
#duel :is(.dzoom,.dzpop) .dc.fx.txt .nm{font-size:1.2rem;padding:4px 8px}
#duel :is(.dzoom,.dzpop) .dc.fx.txt .ds{font-size:.95rem;padding:8px 10px}
#duel :is(.dzoom,.dzpop) .dzad{margin:0;font-size:.95rem;text-align:center}
/* lutador: a imagem ocupa a carta inteira; o texto (.dci) só aparece embaixo da carta ampliada (.dzinfo) */
#duel .dc.mon .art{position:absolute;inset:0;height:auto;border-bottom:0}
#duel .dc.mon .dci{display:none}
#duel :is(.dzoom,.dzpop) .dzinfo{display:flex;flex-direction:column;gap:2px;padding:10px 12px;background:#FBF5E8;color:#1E2340;border-radius:8px;line-height:1.25}
#duel :is(.dzoom,.dzpop) .dzinfo .nm{font:800 1.25rem "Shippori Mincho B1",serif}
#duel :is(.dzoom,.dzpop) .dzinfo .mt{font-size:.85rem;color:#6B6452}
/* habilidade do lutador (como no Master Duel): só aparece na carta ampliada */
#duel .dc .hb{display:none}
#duel :is(.dzoom,.dzpop) .dzinfo .hb{display:block;flex:1;min-height:0;margin:4px 8px 8px;padding:6px 8px;background:#F3EBD3;border:1.5px solid var(--rc,#8A7A4A);border-radius:4px;color:#1a1a1a;overflow:auto;font-size:.8rem;line-height:1.3}
#duel :is(.dzoom,.dzpop) .dzad b{color:var(--d-gold)}
#duel :is(.dzoom,.dzpop) .dzt{margin:0;white-space:pre-wrap;font:inherit;font-size:.8rem;line-height:1.4;color:var(--d-mut);border-top:1px solid var(--d-line);padding-top:8px}
@media (min-width:1660px) and (min-aspect-ratio:5/4){
  #duel .dzoom{display:flex;flex-direction:column;gap:10px;position:absolute;left:24px;top:50%;transform:translateY(-50%);
    width:min(360px,calc((100vw - 1240px) / 2 - 48px));max-height:calc(100% - 48px);overflow:auto;padding:14px;
    background:rgba(10,13,28,.72);border:1px solid var(--d-line);border-radius:10px;box-shadow:0 10px 30px rgba(0,0,0,.5);backdrop-filter:blur(3px)}
  #duel .dzoom .dzh{margin:0;color:var(--d-mut);font-size:.85rem;text-align:center}
}
/* celular: segurar o dedo na carta abre esta janela */
#duel .dzpop{position:absolute;inset:0;z-index:60;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;
  padding:16px;background:rgba(6,8,18,.82);backdrop-filter:blur(3px);animation:dzin .18s ease both}
#duel .dzpop[hidden]{display:none}
#duel .dzpop .dzbox{display:flex;flex-direction:column;gap:10px;width:min(320px,100%,calc((100vh - 200px) * 5 / 7.2));max-height:calc(100% - 40px);overflow:auto}
#duel .dzpop .dzx{margin:0;font-size:.8rem;color:var(--d-mut)}
@keyframes dzin{from{opacity:0;transform:scale(.94)}to{opacity:1;transform:none}}
/* sem seleção de texto nem menu do iPhone ao segurar o dedo nas cartas */
#duel .dc{-webkit-touch-callout:none;-webkit-user-select:none;user-select:none}

/* ===== mesa no estilo Master Duel: placas de Vida, deck em pilha, 5 + 5 zonas alinhadas e medalhão de turno ===== */
/* 5 colunas: as zonas de Magia/Armadilha ficam alinhadas embaixo das de lutador; sobra espaço dos lados para o medalhão */
#duel .yfi{position:relative;--cw:min(118px, calc((100cqh - 58px) / 5.3), calc((100cqw - 60px) / (var(--ns,5) * 1.5 + 4.6)))}
#duel .yside{padding-left:calc(var(--cw) * 1.1);padding-right:calc(var(--cw) * 1.1)}
#duel .yst .ys.st{width:calc(var(--cw) * 1.42)}
#duel .ymid{min-height:6px;padding:0}

/* deck: pilha de cartas viradas, com o número por cima */
#duel .yz.dz.pile{background:rgba(0,0,0,.3)}
#duel .yz.dz.pile .dc.pc{position:absolute;left:50%;top:50%;width:calc(var(--cw) * .74);border-width:1.5px;
  transform:translate(calc(-50% - var(--k) * 1.5px),calc(-50% - var(--k) * 2.5px));box-shadow:1px 2px 3px rgba(0,0,0,.6)}
#duel .yz.dz.pile .dc.pc .bk span{font-size:.8rem}
#duel .yz.dz.pile .pn{position:relative;z-index:2;background:rgba(10,13,28,.85);border:1px solid var(--d-gold);border-radius:999px;padding:0 7px;font-size:.9rem}
#duel .yz.dz.pile>i{position:absolute;bottom:-1px;z-index:2;background:rgba(0,0,0,.7);padding:0 3px;border-radius:3px}
#duel .yz.dz.pile.none .pn{border-color:var(--d-red);color:var(--d-red)}

/* medalhão de turno, à direita da mesa */
#duel .yturnw{position:absolute;right:calc(var(--cw) * .08);top:50%;transform:translateY(-50%);z-index:7;display:flex;align-items:center;gap:8px}
#duel .yturn{width:max(62px,calc(var(--cw) * .95));aspect-ratio:1;border-radius:50%;display:grid;place-content:center;gap:0;padding:0;cursor:pointer;
  font:inherit;color:#fff;text-align:center;line-height:1.05;border:3px solid #E9C46A;
  background:radial-gradient(circle at 35% 30%,#5AA7FF,#1A4E9C 55%,#0B2A5A);box-shadow:0 0 0 2px #6B5419,0 4px 14px rgba(0,0,0,.6),inset 0 0 12px rgba(255,255,255,.25)}
#duel .yturn.foe{background:radial-gradient(circle at 35% 30%,#FF8A7A,#A8281D 55%,#5A0F0A)}
#duel .yturn small{font-size:.62rem;font-weight:700;opacity:.9}
#duel .yturn b{font-family:"Dela Gothic One",system-ui,sans-serif;font-weight:400;font-size:.72rem;text-shadow:0 1px 2px rgba(0,0,0,.6)}
#duel .yturn:disabled{cursor:default}
#duel .yturn.mine:not(:disabled):not(.open){animation:dturn 1.8s ease-in-out infinite}
#duel .yturn.open{box-shadow:0 0 0 2px #6B5419,0 0 22px rgba(242,201,76,.8)}
@keyframes dturn{50%{box-shadow:0 0 0 2px #6B5419,0 0 20px rgba(90,167,255,.85),inset 0 0 12px rgba(255,255,255,.25)}}
#duel .ytmenu{display:flex;flex-direction:column;gap:6px;padding:8px;border-radius:10px;background:rgba(10,13,28,.94);border:1px solid var(--d-gold);
  box-shadow:0 8px 24px rgba(0,0,0,.6);animation:dzin .15s ease both}
#duel .ytmenu .btn{white-space:nowrap;font-size:.85rem;padding:6px 12px}

/* placas de Vida: você embaixo à esquerda, o adversário em cima à direita */
#duel .dohand,#duel .dhand{position:relative}
#duel .dplate{position:absolute;z-index:6;display:flex;align-items:center;gap:0;pointer-events:auto}
#duel .dplate.me{left:12px;bottom:8px}
#duel .dplate.op{right:12px;top:4px;flex-direction:row-reverse}
#duel .dpav{flex:none;width:58px;height:58px;border-radius:50%;display:grid;place-items:center;position:relative;z-index:2;
  font-family:"Dela Gothic One",system-ui,sans-serif;font-size:1.6rem;color:#fff;background:radial-gradient(circle at 35% 30%,color-mix(in srgb,var(--pc) 70%,#fff),var(--pc) 60%,#111);
  border:3px solid #E9C46A;box-shadow:0 3px 10px rgba(0,0,0,.6)}
#duel .dpin{display:grid;min-width:170px;padding:4px 16px 6px 20px;margin-left:-14px;background:linear-gradient(100deg,rgba(10,13,28,.95),rgba(30,35,64,.92));
  border:1px solid rgba(233,196,106,.5);border-radius:6px;clip-path:polygon(0 0,100% 0,94% 100%,0 100%)}
#duel .dplate.op .dpin{margin-left:0;margin-right:-14px;padding:4px 20px 6px 16px;clip-path:polygon(6% 0,100% 0,100% 100%,0 100%);text-align:right}
#duel .dpn{font-size:.8rem;color:#fff;border-bottom:2px solid #5AA7FF;padding-bottom:1px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:200px}
#duel .dplate.op .dpn{border-color:#E0533F}
#duel .dplp{display:flex;align-items:baseline;gap:8px}
#duel .dplate.op .dplp{justify-content:flex-end}
#duel .dplp i{font-style:normal;font-family:"Dela Gothic One",system-ui,sans-serif;font-size:.8rem;color:#CFE6FF}
#duel .dplp b{font-family:"Dela Gothic One",system-ui,sans-serif;font-weight:400;font-size:1.7rem;line-height:1.1;color:#fff;font-variant-numeric:tabular-nums;letter-spacing:.02em}
#duel .dpbar{height:4px;border-radius:999px;background:rgba(255,255,255,.12);overflow:hidden}
#duel .dpbar i{display:block;height:100%;background:linear-gradient(90deg,#3FB86B,#9BE36D);transition:width .8s ease}
#duel .dplate.op .dpbar i{margin-left:auto}
#duel .dplate.low .dplp b{color:#FF8A7A}
#duel .dplate.low .dpbar i{background:linear-gradient(90deg,#C8352B,#E0533F)}
#duel .dplate.hit{animation:dhit .5s ease}
#duel .dplate.hit .dplp b{animation:dhitn .9s ease}
@keyframes dhit{20%{transform:translateX(-6px)}40%{transform:translateX(6px)}60%{transform:translateX(-4px)}80%{transform:translateX(3px)}}
@keyframes dhitn{0%{color:#FF3B2A;text-shadow:0 0 12px #FF3B2A}100%{text-shadow:none}}

/* telas estreitas: placas compactas numa faixa (sem cobrir as cartas) e mesa sem a sobra lateral */
@media (max-width:899px),(max-aspect-ratio:5/4){
  #duel .dplate{position:static;align-self:stretch;justify-content:flex-start}
  #duel .dplate.op{justify-content:flex-start;flex-direction:row}
  #duel .dpav{width:30px;height:30px;font-size:.9rem;border-width:2px}
  #duel .dpin,#duel .dplate.op .dpin{min-width:0;flex:1;display:flex;align-items:center;gap:10px;margin:0 0 0 -8px;padding:2px 10px 2px 14px;clip-path:none;text-align:left}
  #duel .dpn,#duel .dplate.op .dpn{border:0;max-width:40%}
  #duel .dplp b{font-size:1.05rem}
  #duel .dpbar{flex:1}
  #duel .dplate.op .dpbar i{margin-left:0}
  #duel .dohand{flex-direction:column}
  #duel .dhand .dplate{order:-1}
}
@media (max-width:640px){
  #duel .yfi{--cw:min(96px, calc((100cqh - 58px) / 5.3), calc((100cqw - 24px) / (var(--ns,5) * 1.48 + 3.6)))}
  #duel .yside{padding-left:calc(var(--cw) * .25);padding-right:calc(var(--cw) * .8)}
  #duel .yturn{width:max(48px,calc(var(--cw) * .9))}
  #duel .yturn small{font-size:.5rem}#duel .yturn b{font-size:.56rem}
}
#duel .dohand{min-height:70px}
/* medalhão logo à direita das zonas (largura das fileiras: 5 zonas de 1.42 + 2 laterais de .92 + 6 espaços de 10px) */
#duel .yturnw{right:auto;left:calc(50% + (var(--cw) * 8.94 + 60px) / 2 + 14px)}
#duel .yturnw .ytmenu{position:absolute;right:calc(100% + 8px);top:50%;transform:translateY(-50%)}
#duel .yturn{width:max(64px,calc(var(--cw) * 1.02))}
#duel .yturn b{font-size:.62rem;line-height:1.1;padding:0 4px}
@media (max-width:640px){#duel .yturnw{left:calc(50% + (var(--cw) * 8.94 + 30px) / 2 + 4px)}}
@media (max-width:640px){
  #duel .yside{padding-left:calc(var(--cw) * .1);padding-right:calc(var(--cw) * 1.2)}
  #duel .yturnw{left:auto;right:2px}
  #duel .yturn{width:46px;border-width:2px}
  #duel .yturn small{font-size:.46rem}#duel .yturn b{font-size:.5rem}
}
/* tributo (⛓) no lugar do Ki */
#duel .kib.trib{background:#5A1F12;color:#FFD9C7;border-color:#E0533F}
#duel .kib.trib.no{background:#2a2a2a;color:#aaa;border-color:#666}
#duel .dtop .dki.used{border-color:#666;color:#aaa;background:rgba(255,255,255,.05)}

/* ===== Cartas Banidas e lista do Cemitério/Banidas (Master Duel) ===== */
#duel button.yz.ypz{font:inherit;cursor:pointer;padding:0}
#duel button.yz.ypz:hover{box-shadow:0 0 12px rgba(120,190,255,.5)}
#duel .yz.bz{border-color:rgba(176,51,110,.65);background:rgba(110,26,68,.25)}
#duel .yz.bz b{color:#FFC2DD}
#duel .dpile{position:absolute;inset:0;z-index:55;display:flex;align-items:center;justify-content:center;padding:16px;background:rgba(6,8,18,.78);backdrop-filter:blur(3px);animation:dzin .18s ease both}
#duel .dpile[hidden]{display:none}
#duel .dpbox{width:min(760px,100%);max-height:calc(100% - 24px);display:flex;flex-direction:column;gap:8px;padding:14px;border-radius:12px;
  background:rgba(14,18,38,.97);border:1px solid var(--d-gold);box-shadow:0 12px 40px rgba(0,0,0,.6)}
#duel .dph{display:flex;align-items:center;gap:10px}
#duel .dph b{font-family:"Shippori Mincho B1",serif;font-size:1.05rem;color:var(--d-gold)}
#duel .dph span{color:var(--d-mut);font-size:.85rem;margin-right:auto}
#duel .dpd{margin:0;color:var(--d-mut);font-size:.8rem}
#duel .dpg{display:grid;grid-template-columns:repeat(auto-fill,minmax(96px,1fr));gap:10px;overflow:auto;padding:4px 2px;--cw:100%}
#duel .dpg .dc{width:100%}

/* ===== Fase de Compra: aviso de fase e carta voando do monte ===== */
#duel .dphase{position:fixed;left:0;right:0;top:44%;z-index:65;pointer-events:none;display:flex;flex-direction:column;align-items:center;gap:2px;
  padding:10px 0;background:linear-gradient(90deg,transparent,rgba(26,78,156,.92) 18%,rgba(26,78,156,.92) 82%,transparent);
  border-top:2px solid rgba(233,196,106,.8);border-bottom:2px solid rgba(233,196,106,.8);animation:dphase 1.5s cubic-bezier(.2,.8,.3,1) both}
#duel .dphase.foe{background:linear-gradient(90deg,transparent,rgba(168,40,29,.92) 18%,rgba(168,40,29,.92) 82%,transparent)}
#duel .dphase b{font-family:"Dela Gothic One",system-ui,sans-serif;font-weight:400;font-size:clamp(1.3rem,4vw,2.3rem);letter-spacing:.04em;color:#fff;
  text-shadow:0 2px 0 #0A0D1C,0 0 18px rgba(255,255,255,.35)}
#duel .dphase small{font-size:.85rem;font-weight:700;color:#FFE7A8;letter-spacing:.08em;text-transform:uppercase}
@keyframes dphase{0%{opacity:0;transform:scaleY(0)}12%{opacity:1;transform:scaleY(1)}20%{transform:none}
  20%,78%{opacity:1}100%{opacity:0;transform:translateX(0) scaleY(.6)}}
#duel .dphase b{animation:dphaseT 1.5s cubic-bezier(.2,.8,.3,1) both}
@keyframes dphaseT{0%{transform:translateX(-60px);opacity:0}18%{transform:none;opacity:1}80%{transform:none;opacity:1}100%{transform:translateX(60px);opacity:0}}
@media (prefers-reduced-motion:reduce){#duel .dphase,#duel .dphase b{animation-duration:.9s}}
#duel .ddraw .dc{box-shadow:0 10px 24px rgba(0,0,0,.6),0 0 14px rgba(90,167,255,.5)}
#duel .dhand .hc.drawin .dc{animation:ddrawin .38s ease both}
@keyframes ddrawin{0%{transform:rotateY(90deg) scale(1.05);filter:brightness(1.6)}100%{transform:none;filter:none}}

/* ===== Deck Adicional (Fusões) e coluna Cemitério + Banidas ===== */
#duel .ycol{flex:none;display:flex;flex-direction:column;gap:4px;height:calc(var(--cw) * 1.3)}
#duel .yz.half{height:auto;flex:1;min-height:0;gap:0;grid-template-columns:auto auto;grid-template-rows:auto auto;column-gap:4px;align-content:center}
#duel .yz.half>span{grid-row:1;font-size:.7rem}
#duel .yz.half>b{grid-row:1;font-size:.85rem}
#duel .yz.half>i{grid-column:1/3;grid-row:2;font-size:.42rem}
#duel .yz.xz{border-color:rgba(160,110,255,.6);background:rgba(70,30,140,.25)}
#duel .yz.xz .dc.xb{background-color:#3B1E6E;--rc:#A06EFF}
#duel .yz.xz .dc.xb .bk{background:#7B3FE4;box-shadow:0 0 0 3px #3B1E6E,0 0 0 5px #A06EFF}
#duel .yz.xz.none .pn{border-color:#666;color:#999}
#duel .yz.xz.rdy{border-color:#E9D2FF;animation:dxglow 1.2s ease-in-out infinite}
#duel .yz.xz.rdy>i{color:#fff;background:#7B3FE4;font-weight:800}
#duel .yz.xz.rdy .dc.xb{box-shadow:0 0 14px rgba(200,150,255,.9)}
@keyframes dxglow{0%,100%{box-shadow:0 0 8px rgba(160,110,255,.6),inset 0 0 8px rgba(160,110,255,.3)}
  50%{box-shadow:0 0 26px rgba(200,150,255,1),0 0 46px rgba(160,110,255,.6),inset 0 0 16px rgba(220,180,255,.5)}}
#duel .dpx{display:flex;flex-direction:column;gap:6px;align-items:stretch;text-align:center}
#duel .dpx small{color:var(--d-mut);font-size:.75rem;line-height:1.3}
#duel .dpx small i{color:#C9A8FF}
#duel .dpx.ok .dc{box-shadow:0 0 18px rgba(200,150,255,.9)}
#duel .dpg:has(.dpx){grid-template-columns:repeat(auto-fill,minmax(130px,1fr))}
#duel .yz.xz.pile{background:rgba(70,30,140,.25)}
#duel .yz.xz.pile .dc.pc{position:absolute;left:50%;top:50%;width:calc(var(--cw) * .74);border-width:1.5px;
  transform:translate(calc(-50% - var(--k) * 1.5px),calc(-50% - var(--k) * 2.5px));box-shadow:1px 2px 3px rgba(0,0,0,.6)}
#duel .yz.xz.pile .dc.pc .bk span{font-size:.8rem}
#duel .yz.xz.pile .pn{position:relative;z-index:2;background:rgba(10,13,28,.85);border:1px solid #A06EFF;border-radius:999px;padding:0 7px;font-size:.9rem}
#duel .yz.xz.pile>i{position:absolute;bottom:-1px;z-index:2;background:rgba(0,0,0,.7);padding:0 3px;border-radius:3px}

/* carta só de texto com imagem posta pelo admin (aba Cartas do Editor) */
#duel .dc.fx.txt.hasimg .art.pic{height:38%;flex:none;border:1.5px solid #0B3D31;border-radius:3px;background:#111}
#duel .dc.fx.txt.hasimg .art.pic img{width:100%;height:100%;object-fit:cover}
#duel .dki.pic{padding:0;overflow:hidden}
#duel .dki.pic img{width:100%;height:100%;object-fit:cover;display:block}
.dkt .dki.pic{padding:0;overflow:hidden}.dkt .dki.pic img{width:100%;height:100%;object-fit:cover;display:block}

/* ========== DUELO CLÁSSICO (Ataque, Defesa e Truque) ========== */
#duel .dwrap.cl{display:flex;flex-direction:column;gap:8px;overflow-y:auto;max-width:1240px;padding-bottom:10px;
  --cw:clamp(52px,min(calc((100vw - 64px) / 6.6),18vh),122px)}
#duel .cl .dtop{position:sticky;top:0;z-index:3;background:rgba(10,13,28,.92)}
#duel .clrule{font-size:.75rem;padding:2px 10px;border-radius:999px;border:1px solid var(--d-line);color:var(--d-gold)}
#duel .clopp,#duel .clarena,#duel .clpick,#duel .clhand{padding:0 16px}
#duel .clarena{flex:1 0 auto;display:flex;flex-direction:column;justify-content:center;gap:8px;max-width:1000px;width:100%;margin:0 auto}
#duel .clopp:empty{display:none}
#duel .clside{display:flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:6px 14px;padding:5px 12px;border-radius:10px;background:rgba(0,0,0,.28);border:1px solid var(--d-line)}
#duel .clside .dlp{flex:none;padding:3px 10px;border-radius:999px;background:rgba(0,0,0,.4);border:1px solid var(--d-line)}
#duel .clpiles{display:flex;flex-wrap:wrap;justify-content:center;gap:6px;font-size:.78rem;align-items:center}
#duel .clpiles>span,#duel .clgy{padding:2px 8px;border-radius:999px;background:rgba(0,0,0,.35);border:1px solid var(--d-line);color:var(--d-ink);font:inherit;font-size:.78rem}
#duel .clgy{cursor:pointer}
#duel .clact{border-color:var(--d-gold)!important}
#duel .clwait{text-align:center;padding:10px 12px;border:1px dashed var(--d-line);border-radius:10px}
#duel .clwait b{font-family:"Dela Gothic One",system-ui,sans-serif;font-weight:400;color:var(--d-gold);font-size:1.05rem}
#duel .clwait p{margin:3px 0 0;font-size:.82rem;color:var(--d-mut)}
#duel .clrev{border:1px solid var(--d-line);border-radius:10px;background:rgba(0,0,0,.3);padding:8px 10px;animation:clin .45s ease both;--cw:clamp(52px,min(9vw,13vh),96px)}
@keyframes clin{from{opacity:0;transform:scale(.97)}to{opacity:1;transform:none}}
#duel .clrt{margin:0 0 6px;text-align:center;font-size:.9rem}
#duel .clrt b{color:var(--d-gold)}
#duel .clrs{display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);gap:10px;align-items:center}
#duel .clvs{font-family:"Bangers","Dela Gothic One",sans-serif;font-size:1.8rem;color:var(--d-red)}
#duel .clr{position:relative;display:grid;grid-template-columns:auto minmax(0,1fr);grid-template-areas:"h h" "c p" "c n" "c r";column-gap:10px;align-content:start;border-radius:8px;padding:6px 8px;background:rgba(255,255,255,.04);border:1px solid transparent}
#duel .clr.res-win{border-color:var(--d-gold);box-shadow:0 0 14px rgba(233,196,106,.35)}
#duel .clr.res-ko{opacity:.8}
#duel .clrh{grid-area:h;display:flex;justify-content:space-between;gap:6px;align-items:center;flex-wrap:wrap;font-size:.85rem;margin-bottom:6px}
#duel .clposb{font-size:.78rem;font-weight:700;padding:1px 8px;border-radius:999px;background:rgba(0,0,0,.4);border:1px solid var(--d-line)}
#duel .clposb i{font-weight:400;color:var(--d-mut)}
#duel .clrc{grid-area:c;display:flex;gap:6px;align-items:flex-start}
#duel .clrc .dc,#duel .clnoc{width:var(--cw)}
#duel .dc.cx{filter:grayscale(1) brightness(.6)}
#duel .clnoc{aspect-ratio:5/7.2;border:1px dashed var(--d-line);border-radius:7px;display:grid;place-items:center;font-size:.72rem;color:var(--d-mut);text-align:center}
#duel .clparts{grid-area:p;align-self:start;list-style:none;margin:0;padding:0;font-size:.78rem}
#duel .clparts li{display:flex;justify-content:space-between;gap:6px;border-bottom:1px dotted rgba(255,255,255,.12);padding:1px 0}
#duel .clparts li.tot{font-size:1rem;font-weight:700;color:var(--d-gold);border:0}
#duel .clnotes{grid-area:n;font-size:.72rem;color:var(--d-mut);margin:4px 0 0}
#duel .clres{grid-area:r;align-self:end;text-align:center;font-weight:700;margin-top:4px}
#duel .clmsg{text-align:center;margin:0;font-size:.9rem}
#duel .clmsg.ok{color:#BFF5C9}
#duel .clpick{display:flex;flex-direction:column;align-items:center;gap:6px}
#duel .clchoose{width:100%;display:grid;gap:8px;justify-items:center}
#duel .clbar{display:flex;align-items:stretch;justify-content:center;flex-wrap:wrap;gap:8px}
#duel .clposes{display:flex;gap:8px}
#duel .clpos{display:grid;justify-items:center;align-content:center;gap:1px;min-width:96px;padding:6px 12px;border-radius:10px;border:2px solid var(--d-line);background:rgba(0,0,0,.4);color:var(--d-ink);font:inherit;cursor:pointer}
#duel .clpos span{font-size:1.5rem;line-height:1.1}
#duel .clpos small{font-size:.66rem;color:var(--d-mut)}
#duel .clpos.on{border-color:var(--d-gold);background:rgba(233,196,106,.18);box-shadow:0 0 14px rgba(233,196,106,.45)}
#duel .clbar .btn.big{align-self:stretch;min-width:150px}
/* mão: os 6 lugares (3 lutadores + 3 cartas de efeito) lado a lado, na mesma fileira */
#duel .clhrow{display:flex;justify-content:center;align-items:flex-start;gap:14px}
#duel .clgrp{display:flex;flex-direction:column;align-items:center;gap:4px}
#duel .clrl{font-size:.78rem;font-weight:700;white-space:nowrap}
#duel .clrl i{font-style:normal;color:var(--d-mut);font-weight:400}
#duel .cldiv{align-self:stretch;width:1px;background:linear-gradient(transparent,var(--d-line),transparent);margin-top:20px}
#duel .clcards{display:flex;gap:8px;flex-wrap:nowrap;align-items:flex-start;padding:4px 2px}
#duel .clcard{position:relative;flex:none;display:flex;flex-direction:column;align-items:center;justify-content:flex-start;gap:2px;background:none;border:0;padding:0;cursor:pointer;color:inherit;font:inherit;border-radius:8px;width:var(--cw)}
#duel .clcard .dc,#duel .clslot{width:var(--cw)}
#duel .clslot{flex:none;aspect-ratio:5/7.2;border:1px dashed var(--d-line);border-radius:7px;background:rgba(0,0,0,.2)}
#duel .clcard[aria-disabled="true"]{cursor:default}
#duel .clcard.on .dc{outline:3px solid var(--d-gold);outline-offset:2px;box-shadow:0 0 18px rgba(242,201,76,.7)}
#duel .clpw{display:block;min-height:1.1em;text-align:center;font-size:.7rem;line-height:1.1;font-weight:700;color:var(--d-gold)}
#duel .cllog{font-size:.75rem;color:var(--d-mut);max-width:680px;margin:0 auto}
#duel .cllog ul{margin:4px 0;padding-left:18px}
#duel .clgyl{border:1px solid var(--d-line);border-radius:8px;padding:6px;background:rgba(0,0,0,.35)}
#duel .clgyc{display:flex;flex-wrap:wrap;gap:6px;--cw:70px}
#duel .clgyc .dc{width:var(--cw)}
#duel .cl .dbanner{margin:8px auto}
@media (max-width:760px){
  #duel .clrs{grid-template-columns:minmax(0,1fr)}
  #duel .clvs{justify-self:center;font-size:1.3rem}
  #duel .clopp,#duel .clarena,#duel .clpick,#duel .clhand{padding:0 8px}
  #duel .clhrow{gap:6px}#duel .clcards{gap:4px}
  #duel .clpos{min-width:0;flex:1;padding:5px 6px}
  #duel .clposes{flex:1 1 100%}
  #duel .clbar .btn.big{flex:1 1 100%;min-height:44px}
}

/* ===== celular (retrato): campo grande, zonas laterais em faixa fina, botões de fase na barra ===== */
#duel .yphm{display:none}
@media (max-width:640px){
  #duel .yfi.cmp{--sw:min(calc((100cqw - 24px - 16px) / var(--ns,5)), calc((100cqh - 2 * 30px - 40px) / 4.6));--cw:calc(var(--sw) * .7);gap:2px;padding:4px}
  #duel .yfi.cmp .yside{padding:3px 0;gap:3px;border-radius:10px}
  #duel .yfi.cmp .yrow{gap:4px;width:100%}
  #duel .yfi.cmp .ys{width:var(--sw);height:calc(var(--sw) * 1.12);flex:1 1 0;max-width:var(--sw)}
  #duel .yfi.cmp .ys.st{width:var(--sw);height:calc(var(--sw) * 1.12)}
  #duel .yfi.cmp .ys.st .dc{width:calc(var(--sw) * .66)}
  #duel .yfi.cmp .ys .dc{width:var(--cw)}
  #duel .yfi.cmp .ad{font-size:.62rem;bottom:-3px}
  #duel .yfi.cmp .ymid{min-height:2px}
  /* faixa das zonas laterais */
  #duel .yutil{display:flex;gap:4px;width:100%;justify-content:center}
  #duel .yutil .yz{flex:1 1 0;min-width:0;width:auto;height:28px;display:flex;flex-direction:row;align-items:center;justify-content:center;gap:4px;padding:0 3px;border-radius:7px;font-size:.78rem;overflow:hidden}
  #duel .yutil .yz .dc{display:none}
  #duel .yutil .yz>span{font-size:.85rem;line-height:1}
  #duel .yutil .yz b,#duel .yutil .yz.dz.pile .pn{position:static;border:0;background:none;padding:0;font-size:.85rem;color:#fff}
  #duel .yutil .yz i,#duel .yutil .yz.dz.pile>i,#duel .yutil .yz.fz.on>i{position:static;background:none;padding:0;font-size:.52rem;line-height:1;opacity:.8}
  #duel .yutil .yz.dz::before{content:"🂠";font-size:.85rem}
  #duel .yutil .yz.xz::before{content:"🌀";font-size:.85rem}
  #duel .yutil .yz.fz:not(.on)>span{opacity:.5}
  #duel .yutil .yz.xz.rdy{box-shadow:0 0 10px rgba(163,91,255,.9);border-color:#A35BFF}
  /* medalhão e menu de fase: alvo de toque grande, menu dentro da mesa */
  #duel .yturnw{right:6px;top:50%}
  #duel .yturn{width:58px;border-width:3px}
  #duel .yturn small{font-size:.55rem}#duel .yturn b{font-size:.6rem}
  #duel .ytmenu{padding:6px;gap:6px}
  #duel .ytmenu .btn{min-height:44px;font-size:.9rem}
  /* topo, mão do adversário, barra e mão: mais compactos para a mesa crescer */
  #duel .dtop{padding:4px 10px;gap:4px 8px}
  #duel .dohand{min-height:0;padding-top:2px;padding-bottom:0}
  #duel .dohand .fan .dc.back.sm{width:24px}
  #duel .dbar{padding:4px 8px;gap:4px}
  #duel .yphm{display:flex;gap:6px}
  #duel .yphm .btn{flex:1;min-height:44px;font-size:.85rem;padding:4px 6px}
  #duel .yphd{display:none}
}
@media (max-width:640px){
  #duel .dbar .yact{gap:4px}
  #duel .dbar .dh{display:none}
  #duel .dbar .yhint{margin:0;font-size:.74rem;line-height:1.25}
  #duel .dbar .yact>.sm,#duel .dbar .yact .muted.sm{display:none}
  #duel .dbar .ybtns .btn{min-height:40px}
  #duel .yphm .btn{min-height:40px}
  #duel .dbar .dwait{font-size:.85rem}
  #duel .ylog{max-height:2.6em;font-size:.66rem;padding:3px 8px}
  #duel .dohand .dlbl,#duel .dhand .dlbl{font-size:.68rem}
  #duel .dohand{gap:0}
  #duel .dhand{padding-top:0;gap:2px}
  #duel .dhand .row{padding:10px 4px 12px}
  #duel .dwrap{grid-template-rows:auto auto minmax(0,1fr) auto auto}
}
@media (max-width:640px){
  #duel{--hw:clamp(46px,7vh,56px)}
  #duel .yphm .btn,#duel .dbar .ybtns .btn{min-height:36px;font-size:.8rem}
  #duel .ylog{max-height:1.6em}
  #duel .dohand .dlbl i{display:none}
  #duel .dhand .row{padding:6px 4px 8px}
  #duel .dhand{padding-bottom:4px}
  #duel .yfi.cmp{--sw:min(calc((100cqw - 24px - 16px) / var(--ns,5)), calc((100cqh - 2 * 28px - 34px) / 4.5))}
}
@media (max-width:640px){
  #duel .yfi.cmp{--sw:min(calc((100cqw - 24px - 16px) / var(--ns,5)), calc((100cqh - 2 * 28px - 30px - 30px) / 4.5))}
  #duel .yfi.cmp .ymid{min-height:30px}
  /* medalhão vira uma pílula no meio da mesa (entre os lutadores dos dois lados), sem cobrir nenhuma zona */
  #duel .yturnw{left:50%;right:auto;top:50%;transform:translate(-50%,-50%)}
  #duel .yturn{width:auto;aspect-ratio:auto;height:30px;border-radius:999px;display:flex;align-items:center;gap:6px;padding:0 16px;border-width:2px;min-width:150px;justify-content:center}
  #duel .yturn small{font-size:.65rem}#duel .yturn b{font-size:.72rem;padding:0}
  #duel .yturnw .ytmenu{position:absolute;left:50%;right:auto;top:50%;transform:translate(-50%,-50%);flex-direction:row;width:max-content;max-width:calc(100vw - 24px)}
  #duel .ytmenu .btn{white-space:nowrap;font-size:.8rem;padding:4px 10px}
  #duel .yphm .btn{white-space:nowrap}
  #duel .yphm .btn.primary{flex:1.5}
}
@media (max-width:640px){
  #duel .yturnw .ytmenu{left:50%;top:50%;transform:none;translate:-50% -50%}
  #duel .dbar .ybtns{display:flex;flex-wrap:nowrap;gap:4px}
  #duel .dbar .ybtns .btn{flex:1 1 0;min-width:0;font-size:.72rem;padding:2px 4px;line-height:1.15;min-height:38px}
  #duel .dbar .yhint{font-size:.72rem}
  #duel .dbar:has(.ybtns) .ylog{display:none}
}
@media (max-width:640px){
  #duel .yturnw .ytmenu{top:calc(100% + 4px);translate:-50% 0}
  #duel .yturn{height:34px}
  #duel .dbar:has(.ybtns) .yphm{display:none}
}
@media (max-width:640px){
  #duel .yfi.cmp{--cw:calc(var(--sw) * .78)}
  #duel .yfi.cmp .ys.st .dc{width:calc(var(--sw) * .7)}
}

/* ===== cartas de efeito na mão e na mesa: só a imagem; a descrição aparece segurando o dedo (celular) ou com o mouse em cima (PC) ===== */
#duel :is(.dhand .hc,.ys) .dc.fx:has(.art.pic) :is(.nm,.mt,.ds){display:none}
#duel :is(.dhand .hc,.ys) .dc.fx:has(.art.pic) .art{height:100%;border-bottom:0}
#duel :is(.dhand .hc,.ys) .dc.fx:has(.art.pic){border-width:2px;box-shadow:0 3px 8px rgba(0,0,0,.55)}
#duel :is(.dhand .hc,.ys) .dc.fx:not(:has(.art.pic)) :is(.mt,.ds){display:none}
#duel :is(.dhand .hc,.ys) .dc.fx.txt:not(:has(.art.pic)){justify-content:center}
#duel .dc.holding{animation:dhold var(--hold,450ms) ease-in forwards;z-index:8}
@keyframes dhold{0%{transform:scale(1);box-shadow:0 0 0 0 rgba(233,196,106,0)}100%{transform:scale(1.12);box-shadow:0 0 0 3px #E9C46A,0 0 26px rgba(233,196,106,.9)}}
@media (prefers-reduced-motion:reduce){#duel .dc.holding{animation:none;outline:3px solid #E9C46A}}
#duel :is(.dhand .hc,.ys) .dc.fx:not(.txt):not(:has(.art.pic)) .art{height:100%;border-bottom:0}
#duel :is(.dhand .hc,.ys) .dc.fx:not(.txt):not(:has(.art.pic)) .noart{font-size:2.6rem}
#duel :is(.dhand .hc,.ys) .dc.fx:not(.txt):not(:has(.art.pic)) .nm{position:absolute;left:0;right:0;bottom:0;padding:2px 3px;background:rgba(255,255,255,.92);text-align:center;font-size:.72rem;border-top:2px solid #111}

/* nome da carta em todas as de efeito (com ou sem arte), numa faixa embaixo */
#duel :is(.dhand .hc,.ys) .dc.fx:not(.txt) .nm{display:block!important;position:absolute;left:0;right:0;bottom:0;padding:2px 3px;background:rgba(255,255,255,.92);text-align:center;font-size:.72rem;border-top:2px solid #111;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#duel :is(.dhand .hc,.ys) .dc.fx.txt:has(.art.pic) .nm{display:block!important;position:absolute;left:0;right:0;bottom:0;z-index:1;padding:2px 3px;background:rgba(243,235,211,.94);text-align:center;font-size:.72rem;border:0;border-top:2px solid #0B3D31;border-radius:0}

/* ===== celular: Vida no canto, em volta do avatar (anel que vai diminuindo) ===== */
@property --lp{syntax:'<number>';inherits:true;initial-value:100}
@keyframes dring{from{--lp:var(--lpf)}}
@media (max-width:640px){
  #duel{--hw:clamp(54px,8.5vh,64px)}
  #duel .dplate,#duel .dplate.op{position:absolute;display:block;align-self:auto;width:auto;z-index:6;--rc:#3FB86B;animation:dring .9s ease-out}
  #duel .dplate.low{--rc:#E0533F}
  #duel .dplate.hit{animation:dring .9s ease-out,dhit .5s ease}
  #duel .dplate.me{left:12px;bottom:20px;top:auto;right:auto}
  #duel .dplate.op{right:12px;top:10px;left:auto;bottom:auto}
  #duel .dpav{width:50px;height:50px;font-size:1.3rem;border-width:3px;margin:0}
  #duel .dpav::before{content:"";position:absolute;inset:-9px;border-radius:50%;z-index:-1;
    background:conic-gradient(var(--rc) calc(var(--lp) * 1%),rgba(255,255,255,.16) 0);
    -webkit-mask:radial-gradient(farthest-side,transparent calc(100% - 6px),#000 calc(100% - 5px));mask:radial-gradient(farthest-side,transparent calc(100% - 6px),#000 calc(100% - 5px))}
  #duel .dpin,#duel .dplate.op .dpin{position:absolute;left:50%;bottom:-17px;transform:translateX(-50%);display:flex;min-width:0;margin:0;padding:0 9px;gap:0;
    background:#0A0D1C;border:1.5px solid #E9C46A;border-radius:999px;clip-path:none;z-index:3}
  #duel .dpn,#duel .dplate.op .dpn,#duel .dpbar,#duel .dplp i{display:none}
  #duel .dplp b{font-size:1rem;line-height:1.3}
  #duel .dplate.low .dplp b{color:#FF8A7A}
  #duel .dohand{min-height:78px}
  #duel .dhand .row{padding-left:78px}
}

@media (max-width:640px){#duel .dplate.me{left:16px}#duel .dplate.op{right:16px}}


/* ===== Deck Adicional: lista por rank (Fusões, SS, S+, S), painel à direita no PC largo e botão no resto ===== */
#duel .dxl{display:flex;flex-direction:column;gap:6px;overflow:auto;min-height:0}
#duel .dxh{margin:6px 0 0;font-family:"Dela Gothic One",system-ui,sans-serif;font-weight:400;font-size:.85rem;color:var(--d-gold);border-bottom:1px solid var(--d-line);padding-bottom:3px}
#duel .dxh i{font-style:normal;font-family:inherit;font-size:.75rem;color:var(--d-mut);margin-left:4px}
#duel .dxl .dpg{overflow:visible;grid-template-columns:repeat(auto-fill,minmax(104px,1fr))}
#duel .dpx .dxn{font-size:.78rem;line-height:1.15;color:var(--d-ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#duel .dpx .dxb{display:flex;gap:4px}
#duel .dpx .dxb .btn{flex:1;min-width:0;padding:4px 2px;font-size:.7rem}
#duel .dxtra{display:none}
#duel .dxbtn{margin-left:8px;font:inherit;font-size:.72rem;font-weight:700;color:#E9D2FF;background:rgba(123,63,228,.25);border:1.5px solid #A35BFF;border-radius:999px;padding:2px 10px;cursor:pointer;vertical-align:middle}
#duel .dxbtn b{color:#fff}
#duel .dxbtn.rdy{background:#7B3FE4;color:#fff;animation:dxglow 1.2s ease-in-out infinite}
@media (min-width:1660px) and (min-aspect-ratio:5/4){
  #duel .dxtra{display:flex;flex-direction:column;gap:8px;position:absolute;right:24px;top:50%;transform:translateY(-50%);z-index:5;
    width:min(360px,calc((100vw - 1240px) / 2 - 48px));max-height:calc(100% - 48px);padding:14px;
    background:rgba(10,13,28,.72);border:1px solid rgba(163,91,255,.55);border-radius:10px;box-shadow:0 10px 30px rgba(0,0,0,.5);backdrop-filter:blur(3px)}
  #duel .dxtra:empty{display:none}
  #duel .dxt{margin:0;font-family:"Dela Gothic One",system-ui,sans-serif;font-weight:400;font-size:1rem;color:#E9D2FF}
  #duel .dxt i{font-style:normal;color:var(--d-mut);font-size:.85rem;margin-left:4px}
  #duel .dxd{margin:0;font-size:.72rem;line-height:1.35;color:var(--d-mut)}
  #duel .dxbtn{display:none}
}
@media (max-width:640px){#duel .dxbtn{font-size:.66rem;padding:1px 8px;margin-left:6px}}

#duel .dxtra .dxl .dpg{grid-template-columns:repeat(auto-fill,minmax(80px,1fr));gap:8px}
#duel .dxtra .dpx small{font-size:.66rem}

@media (max-width:640px){#duel .dxbtn{min-height:30px;padding:2px 10px;font-size:.72rem}#duel .dpile .dxl .dpg{grid-template-columns:repeat(auto-fill,minmax(96px,1fr))}}