/* =====================================================================
   MASTER DUEL SKIN: tilted 3D field, holograms, cinematic FX (loads after duel.css)
   ===================================================================== */
#duel{--cw:min(86px,calc((100vw - 300px - 200px) / 9.6),calc((100vh - 56px - 300px) / 5.7 * .686))}
@media (min-width:981px){#duel{grid-template-columns:300px 1fr}}
#duel .table{display:grid;grid-template-rows:auto 1fr auto;gap:0;padding:6px 150px 6px 6px;border-radius:18px;overflow:hidden;
  background:radial-gradient(1200px 600px at 50% 40%,rgba(40,70,140,.28),transparent 60%),radial-gradient(900px 500px at 50% 110%,rgba(255,42,69,.14),transparent 60%),#06070c;border:1px solid #1c2236}
.topbar,.botbar{display:flex;align-items:center;gap:14px;padding:4px 10px;position:relative;z-index:8}
.botbar{align-items:flex-end;padding-bottom:4px}
.topbar .hand.opp{flex:1;min-height:calc(var(--ch) * .62)}
.botbar .hand.mine{flex:1;min-height:calc(var(--ch) * 1.02);padding-bottom:4px}

/* LP panels */
.lpcard{display:flex;align-items:center;gap:10px;padding:7px 14px 7px 7px;border-radius:14px;min-width:230px;background:linear-gradient(135deg,rgba(18,24,42,.95),rgba(10,12,22,.95));border:1px solid rgba(110,170,255,.25);box-shadow:0 8px 24px rgba(0,0,0,.5)}
.lpcard.opp{border-color:rgba(255,90,100,.3)}
.lpcard.turn{box-shadow:0 0 0 2px var(--gold),0 0 24px rgba(255,201,74,.35)}
.lpcard .av{position:relative;width:54px;height:54px;border-radius:50%;overflow:hidden;flex:none;background:linear-gradient(135deg,var(--red),#5a0d1c);display:grid;place-items:center;font:28px var(--fd);box-shadow:0 0 0 2px rgba(255,255,255,.15)}
.lpcard.me .av{background:linear-gradient(135deg,#2f7bff,#0b2a66)}
.lpcard .av img{width:100%;height:100%;object-fit:cover}
.lpcard .av i{position:absolute;right:3px;bottom:3px;width:10px;height:10px;border-radius:50%;background:var(--dim);border:2px solid #0a0c16}
.lpcard .av i.on{background:var(--green)}
.lpcard .nm{font:600 12px var(--fb);color:var(--mut);letter-spacing:.3px;display:flex;gap:6px;align-items:center}
.lpcard .nm em{font:800 9px var(--fb);font-style:normal;background:#2f7bff;color:#fff;border-radius:4px;padding:1px 5px}
.lpcard .lp{all:unset;cursor:pointer;display:block;font:38px/1 var(--fd);letter-spacing:2px;color:#fff;text-shadow:0 0 18px rgba(110,170,255,.55)}
.lpcard.opp .lp{text-shadow:0 0 18px rgba(255,90,100,.55)}
.lpcard .lp.counting{color:#ff6b6b}
.lpbar{height:5px;border-radius:5px;background:#1b2034;overflow:hidden;margin-top:3px;width:150px}
.lpbar i{display:block;height:100%;background:linear-gradient(90deg,#3dffa2,#ffd76a,#ff2a45);transition:width .6s}
.lpcard .cnts{font:600 10.5px var(--fm);color:var(--mut);margin-top:3px}

/* the arena: tilted playmat */
.arena{position:relative;perspective:1150px;perspective-origin:50% 10%;display:flex;align-items:center;justify-content:center;min-height:0;z-index:2}
.mat{position:relative;transform:rotateX(26deg);transform-style:preserve-3d;transform-origin:50% 58%;padding:12px 18px 14px;border-radius:24px;
  background:radial-gradient(ellipse at 50% 50%,rgba(60,120,220,.22),transparent 65%),repeating-linear-gradient(90deg,rgba(130,180,255,.06) 0 1px,transparent 1px 38px),repeating-linear-gradient(0deg,rgba(130,180,255,.06) 0 1px,transparent 1px 38px),linear-gradient(180deg,#140c14 0%,#0b0f1c 46%,#0b0f1c 54%,#0c1426 100%);
  border:1px solid rgba(130,180,255,.28);box-shadow:0 50px 90px rgba(0,0,0,.75),inset 0 0 90px rgba(70,140,255,.14),0 0 0 6px rgba(10,14,26,.9),0 0 0 7px rgba(130,180,255,.18)}
.mat.fsart{background:linear-gradient(rgba(6,8,14,.55),rgba(6,8,14,.78)),var(--fs) center/cover}
.mat::after{content:"";position:absolute;left:4%;right:4%;top:50%;height:2px;background:linear-gradient(90deg,transparent,rgba(130,200,255,.9),transparent);box-shadow:0 0 18px rgba(130,200,255,.8);pointer-events:none}
.mat .board,.mat .midrow,.mat .zone{transform-style:preserve-3d}
.mat .board{gap:calc(var(--cw) * .14)}
.mat .zone{border-radius:7px;border:1.5px solid rgba(110,170,255,.32);background:radial-gradient(circle,rgba(80,140,255,.10),transparent 72%);box-shadow:inset 0 0 14px rgba(80,140,255,.16)}
.mat .zone.s{border-color:rgba(61,255,192,.26);background:radial-gradient(circle,rgba(61,255,192,.07),transparent 72%)}
.mat .board.oppb .zone{border-color:rgba(255,90,100,.30);background:radial-gradient(circle,rgba(255,80,90,.08),transparent 72%);box-shadow:inset 0 0 14px rgba(255,80,90,.12)}
.mat .zone.pile{border-style:solid;background:rgba(255,255,255,.03)}
.mat .zone.empty{display:block;opacity:0}
.mat .midinfo{color:#9fb6e8}
.mat .midinfo b{color:#fff;text-shadow:0 0 16px rgba(130,200,255,.6)}
.mat .dc{box-shadow:0 8px 16px rgba(0,0,0,.65),0 0 0 1px rgba(255,255,255,.08)}
.dc .stats{left:-6%;right:-6%;bottom:-2px;font:700 10px var(--fm);background:linear-gradient(180deg,rgba(0,0,0,.4),rgba(0,0,0,.92));color:#ffd76a;border-top:1px solid rgba(255,215,106,.5);padding:2px 0}
.dc .stats.mod{color:#7dffb8}
.dc.back{background:radial-gradient(circle at 50% 46%,#ff2a45 0 11%,#5a0d1c 12% 19%,transparent 20%),repeating-linear-gradient(45deg,rgba(255,255,255,.04) 0 2px,transparent 2px 7px),linear-gradient(160deg,#2a0a12,#120408);box-shadow:inset 0 0 0 3px #3b2a14,inset 0 0 0 5px #120d06,0 6px 14px rgba(0,0,0,.6)}

/* hand fans */
.hand{position:relative;display:flex;justify-content:center;align-items:flex-end}
.hand .dc{margin:0 calc(var(--cw) * -.16);transform:translateY(var(--y,0)) rotate(var(--r,0deg));transform-origin:50% 120%;transition:transform .18s cubic-bezier(.3,1.4,.5,1),margin .18s;box-shadow:0 10px 22px rgba(0,0,0,.65)}
.botbar .hand.mine .dc{width:calc(var(--cw) * 1.12);height:calc(var(--cw) * 1.12 * 1.458)}
.botbar .hand.mine .dc:hover{transform:translateY(-34%) scale(1.32) rotate(0deg);z-index:20;margin:0 10px}
.topbar .hand.opp .dc{transform:translateY(calc(var(--y,0) * -1)) rotate(calc(var(--r,0deg) * -1));transform-origin:50% -20%}

/* action column (phase wheel + end turn) */
.acts{position:absolute;right:10px;top:50%;transform:translateY(-50%);z-index:9;display:flex;flex-direction:column;align-items:center;gap:12px;width:128px}
.acts .phases{display:flex;flex-direction:column;gap:4px;width:100%}
.acts .phases button{font:17px var(--fd);letter-spacing:2px;padding:6px 0;border-radius:8px;width:100%;background:linear-gradient(90deg,#141a2c,#0e1220);border:1px solid #232b45;color:#7d8bb0;transition:.15s}
.acts .phases button.on{background:linear-gradient(90deg,#2f7bff,#1747b8);border-color:#7fb0ff;color:#fff;box-shadow:0 0 16px rgba(47,123,255,.6)}
.acts .phases button.on.opp{background:linear-gradient(90deg,#ff2a45,#8a1023);border-color:#ff8a9a;box-shadow:0 0 16px rgba(255,42,69,.5)}
.acts .phases button:not(:disabled):hover{color:#fff;border-color:#7fb0ff}
.acts .phases button:disabled{opacity:1}
.endturn{width:104px;height:104px;border-radius:50%;font:22px/1 var(--fd);letter-spacing:2px;color:#fff;background:radial-gradient(circle at 35% 30%,#ff6378,#c3132e 55%,#5a0712);border:3px solid #ffb3be;box-shadow:0 0 0 5px rgba(255,42,69,.18),0 0 34px rgba(255,42,69,.55);cursor:pointer;transition:.15s}
.endturn:not(:disabled):hover{transform:scale(1.06);box-shadow:0 0 0 7px rgba(255,42,69,.22),0 0 50px rgba(255,42,69,.8)}
.endturn:disabled{background:radial-gradient(circle at 35% 30%,#3a4466,#1a2036 60%,#0b0e18);border-color:#3a4466;box-shadow:none;color:#7d8bb0;cursor:default}
.acts .tools{display:grid;grid-template-columns:repeat(4,1fr);gap:4px;width:100%}
.acts .tool{height:30px;border-radius:8px;background:#121728;border:1px solid #232b45;font-size:14px}
.acts .tool:hover{border-color:#7fb0ff}

/* holograms (Duel Disk style): billboarded upright over the tilted field */
.holo3d{position:absolute;left:50%;bottom:42%;width:calc(var(--cw) * 1.22);height:calc(var(--cw) * 1.22);transform:translateX(-50%) rotateX(-26deg);transform-origin:50% 100%;pointer-events:none;z-index:6}
.holo3d .hf{position:absolute;inset:0;transform-origin:50% 100%;animation:holoFloat 3.2s ease-in-out infinite}
.holo3d img{width:100%;height:100%;object-fit:cover;border-radius:8px;opacity:.9;filter:saturate(1.25) brightness(1.08) drop-shadow(0 0 10px rgba(120,220,255,.7));
  -webkit-mask-image:linear-gradient(to top,transparent 0,#000 22%,#000 82%,transparent 100%);mask-image:linear-gradient(to top,transparent 0,#000 22%,#000 82%,transparent 100%);animation:holoFlicker 5s steps(1) infinite}
.holo3d .scan{position:absolute;inset:0;border-radius:8px;background:repeating-linear-gradient(0deg,rgba(140,230,255,.20) 0 1px,transparent 1px 3px),linear-gradient(180deg,transparent 40%,rgba(140,230,255,.25) 50%,transparent 60%);background-size:auto,100% 300%;mix-blend-mode:screen;animation:scanMove 2.4s linear infinite;-webkit-mask-image:linear-gradient(to top,transparent 0,#000 25%,#000 80%,transparent 100%);mask-image:linear-gradient(to top,transparent 0,#000 25%,#000 80%,transparent 100%)}
.holo3d .beam{position:absolute;left:8%;right:8%;bottom:-10%;height:34%;background:radial-gradient(ellipse at 50% 100%,rgba(130,220,255,.65),rgba(130,220,255,.15) 45%,transparent 72%);filter:blur(3px)}
.holo3d.opp .beam{background:radial-gradient(ellipse at 50% 100%,rgba(255,120,130,.6),rgba(255,120,130,.12) 45%,transparent 72%)}
.holo3d.hdef .hf{transform:scale(.72);filter:hue-rotate(160deg) saturate(.8);animation:none}
.holo3d.fresh .hf{animation:materialize .9s .4s cubic-bezier(.2,1.2,.4,1) both,holoFloat 3.2s 1.3s ease-in-out infinite}
.holo3d.hdef.fresh .hf{animation:materialize .9s .4s cubic-bezier(.2,1.2,.4,1) both}
@keyframes holoFloat{50%{transform:translateY(-5%)}}
@keyframes holoFlicker{0%,100%{opacity:.9}47%{opacity:.9}48%{opacity:.45}49%{opacity:.9}88%{opacity:.82}}
@keyframes scanMove{from{background-position:0 0,0 0}to{background-position:0 60px,0 100%}}
@keyframes materialize{0%{transform:scaleY(0) scaleX(.3);opacity:0;filter:brightness(4) hue-rotate(40deg)}55%{transform:scaleY(1.12) scaleX(1.05);opacity:1;filter:brightness(2)}100%{transform:none;opacity:1;filter:none}}
body.noholo .holo3d{display:none}

/* ---------- FX layer ---------- */
#fxl{position:fixed;inset:0;pointer-events:none;z-index:380}
#fxcanvas{position:fixed;inset:0;pointer-events:none;z-index:400}
#fxl>div{position:fixed}
.flycard{border-radius:6px;overflow:hidden;box-shadow:0 18px 40px rgba(0,0,0,.7),0 0 24px rgba(130,200,255,.5);z-index:2;will-change:transform}
.flycard img{width:100%;height:100%;object-fit:cover}
.flycard.back{background:radial-gradient(circle at 50% 46%,#ff2a45 0 11%,#5a0d1c 12% 19%,transparent 20%),linear-gradient(160deg,#2a0a12,#120408);box-shadow:inset 0 0 0 3px #3b2a14,0 18px 40px rgba(0,0,0,.7)}
.flycard.lunge{z-index:5;box-shadow:0 0 30px rgba(255,90,60,.9),0 20px 40px rgba(0,0,0,.7)}
.pillar{background:linear-gradient(90deg,transparent,var(--c2) 25%,var(--c1) 50%,var(--c2) 75%,transparent);filter:blur(2px);opacity:0;mix-blend-mode:screen;transform-origin:50% 100%;animation:pillar .85s ease-out forwards}
@keyframes pillar{0%{opacity:0;transform:scaleX(.2) scaleY(0)}18%{opacity:1;transform:scaleX(1) scaleY(1)}70%{opacity:.8}100%{opacity:0;transform:scaleX(.1) scaleY(1)}}
.ring{border-radius:50%;border:3px solid var(--c1);box-shadow:0 0 24px var(--c1),inset 0 0 24px var(--c1);opacity:0;animation:ring .7s ease-out forwards}
@keyframes ring{0%{opacity:1;transform:scale(.2)}100%{opacity:0;transform:scale(1.8)}}
.impact{border-radius:50%;background:radial-gradient(circle,#fff 0,rgba(255,220,120,.9) 18%,rgba(255,90,60,.5) 40%,transparent 68%);animation:impact .45s ease-out forwards;mix-blend-mode:screen}
@keyframes impact{0%{transform:scale(.2);opacity:1}100%{transform:scale(1.6);opacity:0}}
.shard{background-color:#22161c;border:1px solid rgba(255,220,180,.25);will-change:transform}
.shard.ban{filter:hue-rotate(220deg) brightness(1.4)}
.dmg{display:grid;place-items:center;font:54px/1 var(--fd);letter-spacing:2px;color:#ff3b4e;text-shadow:0 0 18px rgba(255,40,60,.8),0 4px 0 #300;animation:dmg 1.4s cubic-bezier(.2,1.4,.4,1) forwards;z-index:6}
.dmg.gain{color:#3dffa2;text-shadow:0 0 18px rgba(61,255,162,.8),0 4px 0 #032}
@keyframes dmg{0%{transform:scale(.3) translateY(10px);opacity:0}20%{transform:scale(1.25);opacity:1}60%{transform:scale(1) translateY(-14px);opacity:1}100%{transform:translateY(-50px);opacity:0}}
.cutin{position:fixed!important;inset:0;display:grid;place-items:center;z-index:10}
.cutin .streak{position:absolute;left:-10%;right:-10%;top:50%;height:44%;transform:translateY(-50%) skewY(-5deg);background:linear-gradient(90deg,transparent,var(--c2) 18%,var(--c1) 50%,var(--c2) 82%,transparent);opacity:.82;box-shadow:0 0 70px var(--c1);animation:streakIn .32s cubic-bezier(.2,.9,.3,1) both}
.cutin.opp .streak{transform:translateY(-50%) skewY(5deg);animation-name:streakInR}
.cutin .cicard{position:relative;width:min(290px,40vw);aspect-ratio:1;border-radius:14px;overflow:hidden;box-shadow:0 0 0 3px #fff,0 0 60px var(--c1),0 30px 60px rgba(0,0,0,.7);animation:ciCard .55s cubic-bezier(.2,1.4,.4,1) both}
.cutin .cicard img{width:100%;height:100%;object-fit:cover}
.cutin .cilabel{position:absolute;top:calc(50% + min(165px,23vw));font:clamp(30px,5vw,60px)/1 var(--fd);letter-spacing:6px;color:#fff;text-shadow:0 0 22px var(--c1),0 4px 0 rgba(0,0,0,.6);animation:ciLabel .5s .12s both}
.cutin.out{animation:fadeOut .26s forwards}
@keyframes streakIn{from{transform:translateY(-50%) skewY(-5deg) translateX(-110%)}}
@keyframes streakInR{from{transform:translateY(-50%) skewY(5deg) translateX(110%)}}
@keyframes ciCard{from{transform:scale(.4) rotate(-8deg);opacity:0}}
@keyframes ciLabel{from{transform:translateY(20px) scale(1.4);opacity:0;letter-spacing:20px}}
@keyframes fadeOut{to{opacity:0}}
.tbanner{position:fixed!important;inset:0;display:grid;place-items:center;z-index:9}
.tb-band{width:100%;padding:22px 0;text-align:center;background:linear-gradient(90deg,transparent,rgba(47,123,255,.92) 15%,rgba(30,70,180,.95) 50%,rgba(47,123,255,.92) 85%,transparent);border-top:2px solid rgba(160,200,255,.9);border-bottom:2px solid rgba(160,200,255,.9);box-shadow:0 0 60px rgba(47,123,255,.6);animation:bandIn .45s cubic-bezier(.2,.9,.3,1) both}
.tbanner.opp .tb-band{background:linear-gradient(90deg,transparent,rgba(255,42,69,.92) 15%,rgba(150,15,35,.95) 50%,rgba(255,42,69,.92) 85%,transparent);border-color:rgba(255,170,180,.9);box-shadow:0 0 60px rgba(255,42,69,.6)}
.tbanner.bp .tb-band{background:linear-gradient(90deg,transparent,rgba(255,170,40,.9) 15%,rgba(170,80,0,.95) 50%,rgba(255,170,40,.9) 85%,transparent);border-color:#ffd99a;box-shadow:0 0 60px rgba(255,170,40,.6)}
.tb-band b{display:block;font:clamp(44px,7vw,84px)/1 var(--fd);letter-spacing:10px;color:#fff;text-shadow:0 4px 0 rgba(0,0,0,.4)}
.tb-band span{font:700 13px var(--fm);letter-spacing:5px;color:rgba(255,255,255,.85)}
.tbanner.out{animation:fadeOut .3s forwards}
@keyframes bandIn{from{transform:scaleY(0);opacity:0}}
.duelsplash{position:fixed!important;inset:0;display:grid;place-items:center;align-content:center;gap:10px;z-index:11;background:radial-gradient(circle,rgba(0,0,0,.35),rgba(0,0,0,.8))}
.ds-word{font:clamp(90px,17vw,220px)/.85 var(--fd);letter-spacing:8px;background:linear-gradient(180deg,#fff 10%,#ffd76a 45%,#ff7a2e 75%,#c3132e);-webkit-background-clip:text;background-clip:text;color:transparent;filter:drop-shadow(0 0 30px rgba(255,170,60,.7)) drop-shadow(0 8px 0 rgba(0,0,0,.6));animation:dsWord .7s cubic-bezier(.2,1.5,.4,1) both}
.ds-sub{text-align:center;font:700 16px var(--fm);letter-spacing:5px;color:#fff;text-transform:uppercase;animation:ciLabel .5s .5s both}
.ds-bolt{position:absolute;top:50%;width:60vw;height:6px;background:linear-gradient(90deg,transparent,#fff,#ffd76a,transparent);box-shadow:0 0 30px #ffd76a;animation:bolt .6s ease-out both}
.ds-bolt.l{left:-5vw;transform:rotate(-14deg)}.ds-bolt.r{right:-5vw;transform:rotate(-14deg);animation-delay:.12s}
.duelsplash.out{animation:fadeOut .4s forwards}
@keyframes dsWord{from{transform:scale(2.6);opacity:0;filter:blur(12px)}}
@keyframes bolt{from{opacity:0;width:0}}
.coinflash{position:fixed!important;left:50%;top:40%;transform:translate(-50%,-50%);display:grid;place-items:center;gap:6px;z-index:8;font:700 18px var(--fm);color:#fff;text-shadow:0 2px 10px #000}
.coinflash .coin{font-size:70px;animation:coin 1s ease-out}
@keyframes coin{0%{transform:rotateY(0) translateY(0)}50%{transform:rotateY(900deg) translateY(-40px)}100%{transform:rotateY(1800deg)}}
.over{overflow:hidden}
.over.on::before{content:"";position:absolute;inset:-60%;background:repeating-conic-gradient(from 0deg,rgba(255,215,106,.10) 0 9deg,transparent 9deg 18deg);animation:spinrays 22s linear infinite}
.over .res{position:relative;animation:dsWord .8s cubic-bezier(.2,1.5,.4,1) both}
.over>div{position:relative}
@keyframes spinrays{to{transform:rotate(360deg)}}
@media (max-width:980px){
  #duel{--cw:min(64px,calc((100vw - 52px) / 9.1));grid-template-columns:minmax(0,1fr)}
  .topbar,.botbar{flex-wrap:wrap;justify-content:center}
  .topbar .hand.opp,.botbar .hand.mine{flex-basis:100%}
  .botbar .lpcard{order:2}
  .mat{padding:8px}
  #duel .table{padding:6px;grid-template-rows:auto auto auto auto}
  .acts{position:static;transform:none;width:100%;flex-direction:row;flex-wrap:wrap;justify-content:center;order:4}
  .acts .phases{flex-direction:row;width:auto}.acts .phases button{width:auto;padding:5px 8px;font-size:14px}
  .endturn{width:70px;height:70px;font-size:16px}.acts .tools{width:auto;grid-template-columns:repeat(7,32px)}
  .mat{transform:rotateX(16deg)}.holo3d{transform:translateX(-50%) rotateX(-16deg)}
  .lpcard{min-width:0;padding:5px 8px 5px 5px}.lpcard .av{width:40px;height:40px}.lpcard .lp{font-size:28px}.lpbar{width:90px}
}