/* TCG live: pack opening + collection + live cards (2026-09-27, ported from pack_poc/card_poc) */
@font-face{font-family:'CuteStitch';src:url('/static/tcg/live/fonts/CuteStitch.ttf') format('truetype');font-display:swap}

/* ===== live card (native 1024x1536, scaled with zoom) ===== */
.card-holder{position:relative;width:100%;--s:.3}
.card-holder .card-scale{position:absolute;left:0;top:0;width:1024px;height:1536px;zoom:var(--s)}
.card-holder .card-tilt{position:absolute;inset:0;transform-origin:50% 50%;transition:transform .18s ease-out}
.card-holder .card{position:absolute;inset:0;width:1024px;height:1536px;border-radius:48px;overflow:hidden;background:#2a2118;
  box-shadow:0 30px 60px rgba(0,0,0,.45),0 6px 16px rgba(0,0,0,.35);isolation:isolate;--mx:50%;--my:50%;--hyp:0;--pos:50% 50%;padding:0;border:0}
.card-holder .card .L{position:absolute;display:block;pointer-events:none;user-select:none}
.card-holder .card img.L{max-width:none}
.card-holder .card svg.txt{left:0;top:0;width:1024px;height:1536px;overflow:visible}
.card-holder .card .tray{box-sizing:border-box;border-radius:24px;background:rgba(255,252,248,.376);border:2px solid rgba(230,226,220,.588)}
/* 2026-09-28 signature skill on the card face */
.card-holder .card .skill{box-sizing:border-box;border-radius:22px;background:rgba(255,253,250,.62);border:2px solid rgba(230,226,220,.7);
  font-family:Arial,"Liberation Sans","Helvetica Neue",Helvetica,sans-serif;line-height:1.2;color:#2b2118;display:flex;flex-direction:column;justify-content:center;overflow:hidden}
.card-holder .card .skill b{display:block;font-weight:700;color:#5b21b6;line-height:1.2;margin-bottom:4px;letter-spacing:.3px}
.card-holder .card .skill span{display:block}
.card-holder .card .skill.u{background:rgba(255,253,250,.8);border-color:rgba(255,255,255,.85);box-shadow:0 6px 18px rgba(0,0,0,.25)}
.card-holder .card .divider{background:rgba(90,82,74,.706)}
.card-holder .card .artfull{left:0;top:0;width:1024px;height:1536px;overflow:hidden}
.card-holder .card .lvl-badge{left:50%;top:184px;transform:translateX(-50%);font:700 30px/1 Arial,"Liberation Sans",sans-serif;color:#fff;letter-spacing:2px;
  padding:6px 18px;border-radius:999px;background:linear-gradient(135deg,#7a4a0c,#e9b94a 50%,#6a3e08);border:2px solid rgba(255,240,200,.8);box-shadow:0 3px 8px rgba(0,0,0,.45)}
.card-holder .card .lvl-badge.u{top:150px;background:linear-gradient(135deg,#ff5aa0,#ffc446,#50e68c,#46beff,#aa6eff)}
.card-holder .card .foil-static{inset:0;mix-blend-mode:overlay;opacity:.28;
  background:repeating-linear-gradient(135deg,rgba(0,0,0,0) 0 32px,rgba(0,0,0,.28) 64px,rgba(0,0,0,0) 96px,rgba(0,0,0,0) 127px),
    linear-gradient(127deg,rgb(255,90,170) 0%,rgb(255,190,70) 32%,rgb(90,230,150) 65%,rgb(70,190,255) 97%,rgb(170,110,255) 130%)}
.card-holder .card .foil-live{inset:0;mix-blend-mode:color-dodge;opacity:calc(.10 + var(--hyp)*.22);transition:opacity .3s;
  background:repeating-linear-gradient(110deg,hsl(330 100% 70%/.0) 0%,hsl(330 100% 70%/.55) 4%,hsl(45 100% 65%/.55) 8%,hsl(140 90% 60%/.55) 12%,hsl(200 100% 65%/.55) 16%,hsl(270 90% 70%/.55) 20%,hsl(330 100% 70%/.0) 24%);
  background-size:300% 300%;background-position:var(--mx) var(--my);filter:saturate(1.3)}
.card-holder .card .glare{inset:0;mix-blend-mode:soft-light;opacity:calc(.15 + var(--hyp)*.45);
  background:radial-gradient(farthest-corner circle at var(--pos),rgba(255,255,255,.85) 0%,rgba(255,255,255,.25) 22%,rgba(0,0,0,.35) 90%)}
.card-holder:not(.hover) .card .foil-live{animation:tcgx-foilidle 6s ease-in-out infinite}
@keyframes tcgx-foilidle{0%,100%{background-position:20% 30%}50%{background-position:80% 70%}}
.card-holder .card .gold-edge{inset:0;border-radius:48px;border:14px solid transparent;
  background:linear-gradient(135deg,#7a4a0c,#ffe39a 18%,#b8801e 35%,#fff4c4 50%,#a8701a 66%,#ffd76a 82%,#6d420a) border-box;
  -webkit-mask:linear-gradient(#000 0 0) padding-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;box-shadow:inset 0 0 0 2px rgba(255,248,220,.7)}
.card-holder .card-unique .signature{filter:drop-shadow(0 2px 3px rgba(0,0,0,.55))}

/* ===== shared ===== */
.tcgx{--gold:#ffd76a}
.tcgx-title{margin:0;font:400 clamp(26px,5vw,42px)/1.1 CuteStitch,sans-serif;color:#ffe08a;text-shadow:0 3px 0 #0006,0 0 24px #ffcc5a44;text-align:center}
.tcgx-sub{margin:6px 0 14px;color:var(--skin-muted,#94a3b8);font-size:13px;text-align:center}
.tcgx-hint{opacity:.8;font-size:14px;text-align:center;margin:14px 0 6px;color:#eef1f8}
.tcgx-ghost{background:transparent;border:1px solid #ffffff33;color:#eef1f8;border-radius:12px;padding:9px 16px;cursor:pointer;font-size:13px}
.tcgx-cta{font:400 22px/1 CuteStitch,sans-serif;padding:14px 26px;border-radius:14px;border:0;cursor:pointer;color:#2a1605;background:linear-gradient(135deg,#ffcf5a,#fff0a8 50%,#e8a52a);box-shadow:0 6px 22px #ffbe3c55}
.tcgx-cta:disabled{filter:grayscale(.8);opacity:.6;cursor:not-allowed}
.tcgx-err{color:#fca5a5;text-align:center;font-size:13px;margin:8px 0}
.tcgx-pity{width:min(420px,100%);box-sizing:border-box;padding:0 4px;margin:12px auto 0;font-size:12px;color:#eef1f8}
.tcgx-pity .lbl{display:flex;justify-content:space-between;gap:10px;margin-bottom:5px}
.tcgx-pity .bar{height:10px;border-radius:99px;background:#ffffff18;overflow:hidden;border:1px solid #ffffff22}
.tcgx-pity .bar i{display:block;height:100%;width:var(--p);min-width:2px;background:linear-gradient(90deg,#b8801e,#ffd76a,#fff4c4,#ffd76a);background-size:200% 100%;animation:tcgx-barshine 2s linear infinite;border-radius:99px;transition:width 1.2s cubic-bezier(.2,.8,.2,1)}
.tcgx-pity .foot{margin-top:4px;opacity:.6;font-size:11px;text-align:center}
@keyframes tcgx-barshine{to{background-position:-200% 0}}
@keyframes tcgx-sheen{0%{background-position:120% 0}60%,100%{background-position:-60% 0}}
@keyframes tcgx-bob{0%,100%{translate:0 0}50%{translate:0 -7px}}

/* ===== booster view: shelf ===== */
.tcgx-boost{text-align:center}
.tcgx-pts{display:inline-flex;gap:8px;align-items:center;margin:2px auto 4px;padding:6px 12px;border-radius:999px;background:#ffffff10;border:1px solid #ffffff1f;font-size:13px}
.tcgx-pts b{color:var(--gold);font-size:15px}
.tcgx-shelf{display:grid;grid-template-columns:repeat(5,minmax(0,150px));gap:26px clamp(12px,2.2vw,30px);justify-content:center;align-items:end;width:100%;perspective:900px;padding:18px 8px 22px;box-sizing:border-box}
.tcgx-mini{min-width:0;width:100%;cursor:pointer;text-align:center;transform-style:preserve-3d;background:none;border:0;padding:0;color:inherit}
.tcgx-mini .pk{position:relative;transform-style:preserve-3d;transition:transform .25s ease-out;animation:tcgx-bob 4s ease-in-out infinite;animation-delay:var(--d)}
.tcgx-mini img{width:100%;display:block;filter:drop-shadow(0 14px 18px #0009)}
.tcgx-mini .pk::after{content:"";position:absolute;inset:3% 2%;border-radius:4%;pointer-events:none;mix-blend-mode:color-dodge;opacity:.35;
  background:linear-gradient(115deg,transparent 30%,rgba(255,255,255,.7) 45%,rgba(255,230,160,.4) 50%,transparent 62%);background-size:250% 100%;animation:tcgx-sheen 3.4s ease-in-out infinite;animation-delay:var(--d)}
.tcgx-mini:hover .pk,.tcgx-mini:focus-visible .pk{transform:translateY(-12px) rotateY(-10deg) rotateX(6deg) scale(1.04)}
.tcgx-mini .nm{margin-top:10px;font:400 18px/1.1 CuteStitch,sans-serif;color:#fff;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tcgx-mini[disabled]{cursor:not-allowed;opacity:.55}
.tcgx-feed{margin:14px auto 0;max-width:420px;font-size:12px;color:var(--skin-muted,#94a3b8);text-align:left}
.tcgx-feed h4{margin:0 0 4px;font-size:12px;color:#ffe08a;font-weight:600}
.tcgx-feed li{list-style:none;padding:3px 0;border-top:1px solid #ffffff10}
.tcgx-feed ul{margin:0;padding:0}
.tcgx-rules{font-size:11px;color:var(--skin-muted,#94a3b8);margin-top:10px}

/* ===== pack overlay (fullscreen) ===== */
#tcgx-ov{position:fixed;inset:0;z-index:1200;display:none;color:#eef1f8;overflow:hidden;touch-action:none;user-select:none;-webkit-user-select:none;
  background:radial-gradient(ellipse at 50% 35%,var(--tint2,#24345a) 0%,#0f1628 45%,#070a12 100%);font:15px/1.4 "Segoe UI",system-ui,-apple-system,Roboto,Arial,sans-serif}
#tcgx-ov.on{display:block}
#tcgx-ov *{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
#tcgx-ov .ov-top{position:absolute;left:0;right:0;top:0;z-index:30;display:flex;justify-content:space-between;align-items:center;padding:10px 14px;padding-top:max(10px,env(safe-area-inset-top))}
#tcgx-ov .ov-top .tools{display:flex;gap:8px}
#tcgx-ov .ico{width:36px;height:36px;border-radius:50%;border:1px solid #ffffff22;background:#ffffff14;color:#fff;font-size:15px;cursor:pointer}
#tcgx-ov .pill{background:#ffffff14;border:1px solid #ffffff22;color:#fff;border-radius:999px;padding:7px 13px;cursor:pointer;font-size:13px}
#tcgx-ov .scr{position:absolute;inset:0;display:none;flex-direction:column;align-items:center;justify-content:center;padding:64px 12px 18px}
#tcgx-ov .scr.on{display:flex}
#tcgx-ov .scr-sum{overflow-y:auto;justify-content:safe center;touch-action:pan-y}
/* 3D pack */
#tcgx-ov .scr-pack{--pw:min(78vw,360px,calc((100vh - 190px)*.668))}
.tcgx-scene{perspective:1100px;width:var(--pw);height:calc(var(--pw)*1.497);position:relative;touch-action:none}
.tcgx-scene .pack-float{position:absolute;inset:0;transform-style:preserve-3d;animation:tcgx-float 5s ease-in-out infinite}
.tcgx-scene .pack3d{position:absolute;inset:0;transform-style:preserve-3d;transform:rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg));will-change:transform}
.tcgx-scene .face{position:absolute;inset:0;backface-visibility:hidden;-webkit-backface-visibility:hidden}
.tcgx-scene .face.back{transform:rotateY(180deg) translateZ(1px);background-size:100% 100%;filter:brightness(.55) saturate(.8);border-radius:3%}
.tcgx-scene .face.front{transform:translateZ(3px)}
.tcgx-scene .body,.tcgx-scene .strip{position:absolute;inset:0}
.tcgx-scene .body img,.tcgx-scene .strip img{position:absolute;inset:0;width:100%;height:100%;display:block;pointer-events:none}
.tcgx-scene .foil,.tcgx-scene .glare,.tcgx-scene .glitter{position:absolute;inset:0.6% 1.2%;border-radius:3%;pointer-events:none;
  -webkit-mask:var(--packmask) center/100% 100% no-repeat;mask:var(--packmask) center/100% 100% no-repeat}
.tcgx-scene .foil{mix-blend-mode:color-dodge;opacity:.28;background:linear-gradient(calc(110deg + var(--ry,0deg)*3),transparent 20%,#ff7ad9 32%,#ffe08a 40%,#7dffc4 48%,#7ac8ff 56%,#c89bff 64%,transparent 78%);background-size:260% 260%;background-position:var(--fx,50%) var(--fy,50%)}
.tcgx-scene .glare{mix-blend-mode:soft-light;opacity:.7;background:radial-gradient(circle at var(--gx,50%) var(--gy,30%),rgba(255,255,255,.9),rgba(255,255,255,.1) 30%,rgba(0,0,0,.25) 80%)}
.tcgx-scene .glitter{mix-blend-mode:screen;opacity:.35;background-image:radial-gradient(circle,#fff 0 1px,transparent 1.6px),radial-gradient(circle,#ffe7a0 0 1px,transparent 1.8px);background-size:23px 29px,37px 31px;animation:tcgx-twinkle 2.2s steps(4) infinite}
@keyframes tcgx-twinkle{50%{opacity:.18}}
@keyframes tcgx-float{0%,100%{transform:translateY(0) rotateZ(-.6deg)}50%{transform:translateY(-10px) rotateZ(.6deg)}}
.tcgx-scene .pack-shadow{position:absolute;left:12%;right:12%;bottom:-7%;height:6%;border-radius:50%;background:radial-gradient(#000a,#0000 70%);transform:translateZ(-40px);filter:blur(4px)}
.tcgx-scene .strip{transform-origin:var(--so,100%) 11%;transition:transform .08s linear}
.tcgx-scene .strip.fly{transition:transform .65s cubic-bezier(.3,.6,.3,1),opacity .65s;opacity:0}
.tcgx-scene .tear-gap{position:absolute;top:calc(11% - var(--gh,0px)/2);height:var(--gh,0px);left:var(--gl,0);width:var(--gw,0);border-radius:6px;pointer-events:none;background:linear-gradient(#1a1208,#000 50%,#1a1208);box-shadow:0 0 0 1px #0006}
.tcgx-scene.has-unique .tear-gap{background:linear-gradient(#fff6c8,#ffd24a 50%,#fff6c8);box-shadow:0 0 18px 6px #ffcf4acc,0 0 60px 22px #ffb42a88,0 -30px 80px 10px #ffd76a66}
.tcgx-scene .tear-hint{position:absolute;left:4%;right:4%;top:calc(11% - 16px);height:32px;pointer-events:none}
.tcgx-scene .tear-hint i{position:absolute;top:50%;left:0;width:34px;height:34px;margin-top:-17px;border-radius:50%;background:radial-gradient(#fff,#fff0 70%);opacity:.9;animation:tcgx-swipe 2.2s ease-in-out infinite;box-shadow:0 0 18px #fff}
.tcgx-scene .tear-hint::before{content:"";position:absolute;left:0;right:0;top:50%;border-top:2px dashed #ffffffaa;filter:drop-shadow(0 0 3px #000)}
@keyframes tcgx-swipe{0%{left:0;opacity:0}15%{opacity:.9}85%{opacity:.9}100%{left:calc(100% - 34px);opacity:0}}
.tcgx-scene .tearing .tear-hint{display:none}
.tcgx-scene .peek{position:absolute;left:9%;right:9%;top:14%;height:70%;transform:translateY(8%);opacity:0}
.tcgx-scene .peek .pc{position:absolute;inset:0;border-radius:4.5%/3%;background:#123 center/cover;box-shadow:0 4px 14px #0008}
.tcgx-scene .peek.rise{opacity:1;transition:transform .9s cubic-bezier(.2,.9,.25,1);transform:translateY(-62%)}
.tcgx-scene .pack3d.open-drop .body{transition:transform .8s cubic-bezier(.5,0,.8,.4) .5s,opacity .5s .9s;transform:translateY(80%);opacity:0}
.tcgx-scene.shake-1 .pack3d{animation:tcgx-shake .12s linear infinite}
.tcgx-scene.shake-2 .pack3d{animation:tcgx-shake2 .08s linear infinite}
@keyframes tcgx-shake{0%{translate:0 0}25%{translate:1.5px -1px}50%{translate:-1.5px 1px}75%{translate:1px 1.5px}}
@keyframes tcgx-shake2{0%{translate:0 0}25%{translate:3px -2px}50%{translate:-3px 2px}75%{translate:2px 3px}}
.tcgx-scene.has-unique .pack3d::after{content:"";position:absolute;left:10%;right:10%;top:-30%;height:45%;pointer-events:none;opacity:var(--leak,0);
  background:radial-gradient(ellipse at 50% 100%,#fff3b0cc,#ffcf4a66 35%,#ffb42a00 70%);mix-blend-mode:screen;transform:translateZ(5px);filter:blur(2px)}
#tcgx-frag{position:fixed;inset:0;pointer-events:none;z-index:1225;overflow:hidden}
#tcgx-frag .frag{position:absolute;width:18px;height:12px;background:linear-gradient(135deg,#fff,var(--tint,#f7a),#fff8);clip-path:polygon(0 0,100% 20%,70% 100%,10% 80%);will-change:transform,opacity}
/* reveal */
#tcgx-ov .scr-rev{--cw:min(72vw,340px,calc((100vh - 200px)/1.5))}
#tcgx-ov .counter{position:absolute;top:66px;font-size:13px;opacity:.7;letter-spacing:2px}
#tcgx-ov .stack{position:relative;width:var(--cw);height:calc(var(--cw)*1.5);z-index:22}
#tcgx-ov .rc{position:absolute;inset:0;perspective:1400px;transition:transform .35s cubic-bezier(.2,.8,.2,1),opacity .3s;touch-action:none;cursor:pointer}
#tcgx-ov .rc-inner{position:absolute;inset:0;transform-style:preserve-3d;transition:transform .5s cubic-bezier(.3,.7,.3,1.1)}
#tcgx-ov .rc.flipped .rc-inner{transform:rotateY(180deg)}
#tcgx-ov .rc-back,#tcgx-ov .rc-front{position:absolute;inset:0;backface-visibility:hidden;-webkit-backface-visibility:hidden;border-radius:4.7%/3.1%;overflow:hidden}
#tcgx-ov .rc-back{background:#0d1a33 center/cover;box-shadow:0 18px 40px #000a,inset 0 0 0 2px #ffffff22}
#tcgx-ov .rc-back::after{content:"";position:absolute;inset:0;background:linear-gradient(115deg,transparent 35%,#ffffff33 48%,transparent 60%);background-size:250% 100%;animation:tcgx-sheen 3s ease-in-out infinite}
#tcgx-ov .rc-front{transform:rotateY(180deg)}
#tcgx-ov .rc.special:not(.flipped) .rc-back{box-shadow:0 18px 40px #000a,0 0 30px 6px #ffcf4a66}
#tcgx-ov .rc.tremble{animation:tcgx-tremble .07s linear infinite}
@keyframes tcgx-tremble{0%{translate:0 0}25%{translate:2px -1px}50%{translate:-2px 2px}75%{translate:1px 1px}}
#tcgx-ov .rc.slowflip .rc-inner{transition:transform 1.7s cubic-bezier(.45,0,.2,1)}
#tcgx-ov .rc.slowflip{transform:scale(1.08)}
#tcgx-ov .rc.glow .rc-front{box-shadow:0 0 40px 10px #ffd76a99,0 0 120px 30px #ffb42a55}
#tcgx-ov .fx-dark{position:fixed;inset:0;background:#000;opacity:0;pointer-events:none;z-index:20;transition:opacity .5s}
#tcgx-ov .fx-dark.on{opacity:.82}
#tcgx-ov .fx-dark.half{opacity:.45}
#tcgx-ov .fx-beam{position:fixed;inset:0;pointer-events:none;z-index:21;opacity:0;transition:opacity .6s;display:flex;align-items:center;justify-content:center}
#tcgx-ov .fx-beam.on{opacity:1}
#tcgx-ov .fx-beam i{width:180vmax;height:180vmax;flex:0 0 auto;border-radius:50%;background:repeating-conic-gradient(from 0deg,#ffe38a38 0deg 3deg,#ffe38a00 3deg 15deg);-webkit-mask:radial-gradient(circle,#000 0%,#0000 55%);mask:radial-gradient(circle,#000 0%,#0000 55%);animation:tcgx-spin 14s linear infinite}
#tcgx-ov .fx-beam::before{content:"";position:absolute;left:50%;top:-10%;width:34vmin;height:120%;transform:translateX(-50%);background:linear-gradient(#fff7d0cc,#ffd76a44 60%,#0000);filter:blur(10px);opacity:.8}
@keyframes tcgx-spin{to{rotate:360deg}}
#tcgx-flash{position:fixed;inset:0;pointer-events:none;z-index:1226;opacity:0;background:radial-gradient(circle,#fff 0%,#fff7d0 40%,#ffd76a 80%)}
#tcgx-flash.go{animation:tcgx-flash .7s ease-out forwards}
@keyframes tcgx-flash{0%{opacity:0}12%{opacity:1}100%{opacity:0}}
#tcgx-confetti{position:fixed;inset:0;width:100%;height:100%;pointer-events:none;z-index:1227}
#tcgx-ov .unique-title{position:fixed;left:0;right:0;top:12%;text-align:center;z-index:28;pointer-events:none;opacity:0;font:400 clamp(40px,9vw,84px)/1 CuteStitch,sans-serif;
  background:linear-gradient(135deg,#ff5aa0,#ffc446,#50e68c,#46beff,#aa6eff,#ff5aa0);background-size:300% 100%;-webkit-background-clip:text;background-clip:text;color:transparent;filter:drop-shadow(0 4px 0 #0008) drop-shadow(0 0 20px #ffd76a88)}
#tcgx-ov .unique-title.on{animation:tcgx-utitle 2.4s ease-out forwards,tcgx-hue 3s linear infinite}
@keyframes tcgx-utitle{0%{opacity:0;transform:scale(.4)}20%{opacity:1;transform:scale(1.15)}35%{transform:scale(1)}85%{opacity:1}100%{opacity:0;transform:translateY(-20px)}}
@keyframes tcgx-hue{to{background-position:-300% 0}}
/* summary */
#tcgx-ov .summary{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(8px,2vw,22px);width:min(900px,96vw);margin:14px 0 6px}
#tcgx-ov .sc{position:relative;opacity:0;transform:translateY(20px) scale(.95);animation:tcgx-scin .5s cubic-bezier(.2,.8,.2,1) forwards;animation-delay:calc(var(--i)*.12s)}
@keyframes tcgx-scin{to{opacity:1;transform:none}}
#tcgx-ov .sc .tag{position:absolute;top:-8px;right:-6px;z-index:3;font:700 12px/1 Arial,sans-serif;padding:5px 8px;border-radius:999px;color:#2a1605;background:linear-gradient(135deg,#ffcf5a,#fff3b0,#e8a52a);box-shadow:0 2px 8px #0008}
#tcgx-ov .sc .tag.dup{background:linear-gradient(135deg,#9ad8ff,#e8f6ff,#6ab0ff);color:#0b2a44}
#tcgx-ov .sc.new .card-holder{border-radius:4.7%/3.1%;box-shadow:0 0 0 2px #ffd76a,0 0 22px #ffd76a88}
#tcgx-ov .sc.dup .card-holder{border-radius:4.7%/3.1%;box-shadow:0 0 0 2px #9ad8ff,0 0 18px #7cc8ff88}
#tcgx-ov .sc.new::after,#tcgx-ov .sc.dup::after{content:"";position:absolute;inset:0;border-radius:4.7%/3.1%;pointer-events:none;background:linear-gradient(115deg,transparent 35%,#fff9 48%,transparent 60%);background-size:260% 100%;animation:tcgx-sheen 2.6s ease-in-out infinite;mix-blend-mode:overlay;z-index:2}
#tcgx-ov .sc .nm{text-align:center;font-size:12px;margin-top:6px;opacity:.85}
#tcgx-ov .sc.uq .nm{color:#ffd76a;font-weight:700}
#tcgx-ov .actions{display:flex;gap:12px;margin-top:14px;flex-wrap:wrap;justify-content:center}

/* ===== collection ===== */
.tcgx-col-meta{display:flex;flex-wrap:wrap;gap:10px;align-items:center;justify-content:space-between;margin:0 0 12px;color:var(--skin-muted,#94a3b8);font-size:13px}
.tcgx-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(118px,1fr));gap:12px}
.tcgx-tile{position:relative;border-radius:12px;overflow:hidden;background:var(--skin-card,#1e293b);border:1px solid var(--skin-border,#334155);cursor:pointer;padding:0;color:inherit;text-align:left;aspect-ratio:3/4;display:flex;flex-direction:column}
.tcgx-tile .ph{flex:1;position:relative;overflow:hidden}
.tcgx-tile .ph img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 20%}
.tcgx-tile .cap{display:flex;justify-content:space-between;align-items:center;padding:6px 8px;font:400 15px/1 CuteStitch,sans-serif;color:#fff;background:rgba(0,0,0,.35)}
.tcgx-tile .cnt{position:absolute;top:6px;right:6px;min-width:30px;padding:4px 7px;border-radius:999px;background:rgba(10,12,20,.78);border:1px solid #ffffff33;color:#fff;font:700 13px/1 Arial,sans-serif;text-align:center}
.tcgx-tile .badges{position:absolute;left:6px;top:6px;display:flex;gap:4px}
.tcgx-tile .badges span{font:700 10px/1 Arial,sans-serif;padding:3px 6px;border-radius:999px;background:linear-gradient(135deg,#ff5aa0,#ffc446,#50e68c,#46beff,#aa6eff);color:#1a1020}
.tcgx-tile .badges span.gl{background:linear-gradient(135deg,#9ad8ff,#e8f6ff);color:#0b2a44}
.tcgx-tile.missing{cursor:default;filter:grayscale(1);opacity:.55}
.tcgx-tile.missing .ph img{filter:brightness(.35) blur(2px)}
.tcgx-tile.missing .ph::after{content:"???";position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font:400 34px/1 CuteStitch,sans-serif;color:#cbd5e1}
.tcgx-tile.has-u{border-color:#ffd76a;box-shadow:0 0 0 1px #ffd76a66,0 0 16px #ffd76a33}

/* ===== char detail overlay ===== */
#tcgx-det{position:fixed;inset:0;z-index:1150;display:none;background:rgba(3,6,14,.92);color:#eef1f8;overflow-y:auto;overscroll-behavior:contain}
#tcgx-det.on{display:block}
#tcgx-det .det-wrap{max-width:980px;margin:0 auto;padding:max(14px,env(safe-area-inset-top)) 16px 40px;display:grid;grid-template-columns:minmax(0,380px) minmax(0,1fr);gap:26px;align-items:start}
#tcgx-det .det-close{position:sticky;top:10px;float:right;z-index:3;width:38px;height:38px;border-radius:50%;border:1px solid #ffffff33;background:#ffffff14;color:#fff;font-size:18px;cursor:pointer;margin:10px 12px 0 0}
#tcgx-det .det-card{position:relative;max-width:380px;width:100%;margin:0 auto}
#tcgx-det .det-tools{display:flex;gap:8px;justify-content:center;margin-top:12px;flex-wrap:wrap}
#tcgx-det h2{margin:4px 0 2px;font:400 40px/1 CuteStitch,sans-serif;color:#ffe08a}
#tcgx-det .draft{display:inline-block;margin-left:6px;font:600 10px/1 Arial,sans-serif;letter-spacing:.5px;padding:3px 6px;border-radius:6px;border:1px dashed #94a3b8;color:#94a3b8;vertical-align:middle}
#tcgx-det .sec{margin-top:16px}
#tcgx-det .sec h3{margin:0 0 6px;font-size:12px;letter-spacing:1.5px;text-transform:uppercase;color:#94a3b8}
#tcgx-det .stats{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:6px}
#tcgx-det .stats div{background:#ffffff0d;border:1px solid #ffffff1a;border-radius:10px;padding:8px 4px;text-align:center}
#tcgx-det .stats b{display:block;font-size:18px}
#tcgx-det .stats span{font-size:10px;color:#94a3b8;text-transform:uppercase}
#tcgx-det .vers{display:flex;flex-wrap:wrap;gap:6px}
#tcgx-det .vers button{border-radius:999px;border:1px solid #ffffff2a;background:#ffffff0d;color:#eef1f8;padding:6px 10px;font-size:12px;cursor:pointer;display:inline-flex;gap:6px;align-items:center}
#tcgx-det .vers button.on{border-color:#ffd76a;background:#ffd76a22}
#tcgx-det .vers button.u{border-color:#ff9ad5}
#tcgx-det .vers .dot{width:9px;height:9px;border-radius:50%}
#tcgx-det .rel{display:grid;gap:8px}
#tcgx-det .rel button{display:flex;gap:10px;align-items:center;text-align:left;background:#ffffff0a;border:1px solid #ffffff18;border-radius:12px;padding:6px 10px 6px 6px;color:inherit;cursor:pointer}
#tcgx-det .rel img{width:44px;height:44px;border-radius:10px;object-fit:cover;object-position:50% 20%;flex:0 0 auto}
#tcgx-det .rel b{display:block;font-size:13px}
#tcgx-det .rel small{color:#94a3b8;font-size:12px}
#tcgx-det .lore{line-height:1.55;font-size:14px;color:#dbe2ee}
#tcgx-det .src{font-size:11px;color:#64748b;margin-top:4px}
#tcgx-full{position:fixed;inset:0;z-index:1300;display:none;background:#000;align-items:center;justify-content:center;cursor:zoom-out}
#tcgx-full.on{display:flex}
#tcgx-full img{max-width:100vw;max-height:100vh;object-fit:contain}
#tcgx-full .x{position:absolute;top:max(12px,env(safe-area-inset-top));right:12px;width:40px;height:40px;border-radius:50%;border:1px solid #ffffff44;background:#0008;color:#fff;font-size:18px}
#tcgx-full .lbl{position:absolute;bottom:12px;left:0;right:0;text-align:center;color:#fff9;font-size:12px}

@media (max-width:720px){
  #tcgx-det .det-wrap{grid-template-columns:1fr;gap:14px}
  #tcgx-det .det-card{max-width:300px}
  #tcgx-det h2{text-align:center}
  .tcgx-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
  .tcgx-tile .cap{font-size:13px;padding:5px 6px}
}
@media (max-width:640px){
  #tcgx-ov .summary{grid-template-columns:repeat(2,minmax(0,1fr));width:min(420px,92vw,calc((100vh - 370px)/3*2 + 12px));margin:8px 0 4px}
  #tcgx-ov .scr-sum .tcgx-title{font-size:30px}
  #tcgx-ov .scr-sum .tcgx-cta{font-size:18px;padding:11px 18px}
  #tcgx-ov .actions{margin-top:8px;gap:8px}
  #tcgx-ov .sc .nm{font-size:11px;margin-top:3px}
  .tcgx-shelf{grid-template-columns:repeat(3,minmax(0,1fr));gap:16px 12px;padding:14px 6px 18px}
  .tcgx-mini .nm{font-size:15px}
}
@media (prefers-reduced-motion:reduce){.tcgx-scene .pack-float,.tcgx-mini .pk{animation:none}}

/* 2026-09-27 packux: "Skip animation" toggle + Unique highlight when animations are skipped */
.tcgx-skip{display:flex;align-items:center;justify-content:center;gap:8px;width:max-content;margin:6px auto;padding:4px 10px;font-size:13px;opacity:.9;cursor:pointer;user-select:none;-webkit-user-select:none;touch-action:manipulation}
.tcgx-skip input{width:18px;height:18px;margin:0;accent-color:var(--gold,#ffd76a);cursor:pointer}
#tcgx-ov .tcgx-skip{margin:10px auto 0}
#tcgx-ov .sc.uq.uq-hi{animation:tcgx-scin .5s cubic-bezier(.2,.8,.2,1) forwards,tcgxUqHi 1.1s ease-out 3;animation-delay:calc(var(--i)*.12s),calc(var(--i)*.12s + .35s)}
#tcgx-ov .sc.uq.uq-hi .card-holder{border-radius:4.7%/3.1%;box-shadow:0 0 0 3px #ffd76a,0 0 30px 6px #ffd76aaa}
@keyframes tcgxUqHi{0%{filter:drop-shadow(0 0 0 #ffd76a00) brightness(1)}35%{filter:drop-shadow(0 0 26px #ffd76a) brightness(1.18)}100%{filter:drop-shadow(0 0 8px #ffd76a88) brightness(1)}}
@media (prefers-reduced-motion:reduce){#tcgx-ov .sc.uq.uq-hi{animation:tcgx-scin .01s forwards}}
/* 2026-09-27 packgrid: 20 packs -> wrapping grid (5 / 4 / 3 per row) instead of one squeezed row */
@media (max-width:900px) and (min-width:641px){.tcgx-shelf{grid-template-columns:repeat(4,minmax(0,150px))}}

/* 2026-09-28 packui: Glanz badge (bottom-left on the card face) + inspect view */
#tcgx-ov .card-holder .gz{position:absolute;left:4%;bottom:2.6%;z-index:4;pointer-events:none;font:800 max(10px,calc(var(--s)*46px))/1 Arial,"Liberation Sans",sans-serif;
  padding:.28em .5em;border-radius:999px;color:#0b2a44;background:linear-gradient(135deg,#9ad8ff,#e8f6ff,#6ab0ff);box-shadow:0 1px 4px #0009,0 0 0 1px #ffffffaa inset;white-space:nowrap}
#tcgx-ov .sc{cursor:zoom-in}
#tcgx-ov .sc:focus-visible{outline:2px solid #9ad8ff;outline-offset:3px;border-radius:6px}
#tcgx-ov .tcgx-insp{position:fixed;inset:0;z-index:60;display:flex;align-items:center;justify-content:center;background:#050912e6;opacity:0;transition:opacity .16s ease-out;touch-action:none;
  padding:max(52px,env(safe-area-inset-top)) 12px max(16px,env(safe-area-inset-bottom))}
#tcgx-ov .tcgx-insp.on{opacity:1}
#tcgx-ov .tcgx-insp .ic{width:min(92vw,calc((100vh - 84px)/1.5),600px);width:min(92vw,calc((100dvh - 84px)/1.5),600px);transform:scale(.94);transition:transform .16s ease-out;cursor:zoom-out}
#tcgx-ov .tcgx-insp.on .ic{transform:none}
#tcgx-ov .tcgx-insp .ic .card-holder{border-radius:4.7%/3.1%;box-shadow:0 20px 60px #000c}
#tcgx-ov .tcgx-insp .x{position:absolute;top:max(10px,env(safe-area-inset-top));right:12px;width:40px;height:40px;border-radius:50%;border:1px solid #ffffff33;background:#ffffff1f;color:#fff;font-size:18px;cursor:pointer}
@media (prefers-reduced-motion: reduce){#tcgx-ov .tcgx-insp,#tcgx-ov .tcgx-insp .ic{transition:none}}

/* ===== 2026-09-28 leveling (engine 6v6-4): pool skills on the card, level section, level-up sheet ===== */
.card-holder .card .skill.multi b.ps{color:#0f766e}
#tcgx-det .lvsec .lv-row{display:flex;gap:10px;align-items:center;margin-bottom:6px}
#tcgx-det .lv-badge{font:700 13px/1 Arial,sans-serif;padding:5px 10px;border-radius:999px;color:#fff;background:linear-gradient(135deg,#7a4a0c,#e9b94a 50%,#6a3e08);border:1px solid #ffe9b0aa}
#tcgx-det .lv-picks{font-size:13px;color:#cbd5e1}
#tcgx-det .lv-sk{background:#14b8a61a;border:1px solid #14b8a655;border-radius:10px;padding:7px 10px;margin:6px 0;font-size:13px;line-height:1.4}
#tcgx-det .lv-sk b{display:block;color:#5eead4}
#tcgx-det .lv-sk em{font-style:normal;font-size:10px;letter-spacing:.5px;text-transform:uppercase;background:#5eead433;border-radius:6px;padding:1px 5px;margin-left:4px}
#tcgx-det .lv-next,#tcgx-det .lv-note{font-size:12px;color:#94a3b8;margin:6px 0}
#tcgx-det .lv-cost{font-size:13px;margin:8px 0 6px}
#tcgx-det .lv-go{width:100%;min-height:44px;border-radius:12px;border:1px solid #ffd76a;background:linear-gradient(135deg,#ffd76a33,#ffd76a14);color:#ffe9a8;font:700 15px/1.2 Arial,sans-serif;cursor:pointer}
#tcgx-det .lv-go:disabled{border-color:#ffffff22;background:#ffffff0a;color:#94a3b8;cursor:not-allowed}
#tcgx-det .det-card.lv-flash{animation:lvFlash .8s ease-out 1}
@keyframes lvFlash{0%{filter:brightness(1)}30%{filter:brightness(1.8) drop-shadow(0 0 24px #ffd76a)}100%{filter:brightness(1)}}
#tcgx-lv{position:fixed;inset:0;z-index:1200;display:none;background:rgba(3,6,14,.8);overflow-y:auto;overscroll-behavior:contain;padding:max(10px,env(safe-area-inset-top)) 10px 24px}
#tcgx-lv.on{display:block}
#tcgx-lv .lv-sheet{position:relative;max-width:560px;margin:0 auto;background:#101729;border:1px solid #ffffff22;border-radius:18px;padding:16px 14px 14px;color:#eef1f8;box-shadow:0 20px 60px #000a}
#tcgx-lv .lv-x{position:absolute;top:8px;right:8px;width:38px;height:38px;border-radius:50%;border:1px solid #ffffff33;background:#ffffff14;color:#fff;font-size:20px;cursor:pointer}
#tcgx-lv h3{margin:0 44px 4px 0;font:400 26px/1.1 CuteStitch,sans-serif;color:#ffe08a}
#tcgx-lv .lv-sub{font-size:13px;color:#cbd5e1}
#tcgx-lv .lv-pkg{margin-top:8px;font-size:13px;padding:7px 10px;border-radius:10px;background:#ffd76a1f;border:1px solid #ffd76a66;color:#ffe9a8}
#tcgx-lv .lv-opts{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;margin-top:12px}
#tcgx-lv .lv-opt{min-height:88px;border-radius:12px;border:1px solid #ffffff2a;background:#ffffff0d;color:#eef1f8;padding:8px 4px;cursor:pointer;display:flex;flex-direction:column;align-items:center;gap:3px;font-family:Arial,sans-serif}
#tcgx-lv .lv-opt .ic{font-size:22px;line-height:1}
#tcgx-lv .lv-opt b{font-size:13px}
#tcgx-lv .lv-opt small{font-size:11px;color:#94a3b8;text-align:center}
#tcgx-lv .lv-opt.on{border-color:#ffd76a;background:#ffd76a26;box-shadow:0 0 0 1px #ffd76a}
#tcgx-lv .lv-opt:disabled{opacity:.45;cursor:not-allowed}
#tcgx-lv .lv-hint{font-size:11px;color:#94a3b8;margin-top:6px}
#tcgx-lv .lv-skills{margin-top:12px}
#tcgx-lv .lv-skills h4{margin:0 0 6px;font-size:12px;letter-spacing:1px;text-transform:uppercase;color:#5eead4}
#tcgx-lv .lv-skl{display:block;width:100%;text-align:left;margin:0 0 6px;border-radius:10px;border:1px solid #ffffff22;background:#ffffff0a;color:#eef1f8;padding:8px 10px;cursor:pointer;font:13px/1.35 Arial,sans-serif}
#tcgx-lv .lv-skl b{display:block;color:#5eead4}
#tcgx-lv .lv-skl small{display:block;color:#94a3b8;font-size:11px;margin-top:2px}
#tcgx-lv .lv-skl.on{border-color:#5eead4;background:#14b8a626;box-shadow:0 0 0 1px #5eead4}
#tcgx-lv .lv-prev{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:12px}
#tcgx-lv .lv-pc>span{display:block;text-align:center;font-size:11px;letter-spacing:1px;text-transform:uppercase;color:#94a3b8;margin-bottom:4px}
#tcgx-lv .lv-pc>div{position:relative;width:100%}
#tcgx-lv .lv-empty{aspect-ratio:2/3;border-radius:12px;border:1px dashed #ffffff33;display:flex;align-items:center;justify-content:center;font:400 48px/1 CuteStitch,sans-serif;color:#64748b}
#tcgx-lv .lv-st{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px;margin-top:10px}
#tcgx-lv .lv-st p{grid-column:1/-1;margin:0;font-size:12px;color:#94a3b8;text-align:center}
#tcgx-lv .lv-st div{background:#ffffff0d;border:1px solid #ffffff1a;border-radius:10px;padding:6px 4px;text-align:center}
#tcgx-lv .lv-st div.up{border-color:#4ade8088;background:#4ade801a}
#tcgx-lv .lv-st span{display:block;font-size:10px;color:#94a3b8;text-transform:uppercase}
#tcgx-lv .lv-st b{font-size:15px}
#tcgx-lv .lv-st i{font-style:normal;color:#4ade80}
#tcgx-lv .lv-warn{margin-top:12px;padding:10px 12px;border-radius:12px;background:#f973161f;border:1px solid #f97316aa;color:#fed7aa;font-size:13px;line-height:1.4}
#tcgx-lv .lv-warn b{color:#fdba74}
#tcgx-lv .lv-err{margin-top:8px;color:#fca5a5;font-size:13px}
#tcgx-lv .lv-hold{position:relative;overflow:hidden;width:100%;min-height:50px;margin-top:12px;border-radius:14px;border:1px solid #ffd76a;background:#ffd76a1f;color:#ffe9a8;font:700 15px/1.2 Arial,sans-serif;cursor:pointer;user-select:none;-webkit-user-select:none;touch-action:none}
#tcgx-lv .lv-hold i{position:absolute;left:0;top:0;bottom:0;width:0;background:linear-gradient(90deg,#ffd76a55,#ffd76acc)}
#tcgx-lv .lv-hold span{position:relative}
#tcgx-lv .lv-hold.hold i{width:100%;transition:width 1s linear}
#tcgx-lv .lv-hold:disabled{border-color:#ffffff22;background:#ffffff0a;color:#94a3b8;cursor:not-allowed}
.lv-toast{position:fixed;left:50%;bottom:max(20px,env(safe-area-inset-bottom));transform:translateX(-50%);z-index:1400;background:#101729;border:1px solid #ffd76a;color:#ffe9a8;padding:10px 16px;border-radius:999px;font:700 14px/1.2 Arial,sans-serif;box-shadow:0 10px 30px #000a;max-width:90vw;text-align:center}
@media (prefers-reduced-motion:reduce){#tcgx-det .det-card.lv-flash{animation:none}#tcgx-lv .lv-hold.hold i{transition:none;width:100%}}
.tcgd-card .lv{position:absolute;z-index:2;right:5px;top:33px;padding:2px 6px;border-radius:999px;font:800 10px/1.2 Arial,sans-serif;color:#fff;background:linear-gradient(135deg,#7a4a0c,#e9b94a 50%,#6a3e08);box-shadow:0 1px 4px #000a}
.tcgd-cstat .lvp{font-weight:800;color:#ffd76a}
.tcgd-skill.ps b{color:#5eead4}
.tcgb-mini .lvm{display:inline-block;margin-left:4px;padding:1px 5px;border-radius:999px;font:800 10px/1.2 Arial,sans-serif;color:#fff;background:linear-gradient(135deg,#7a4a0c,#e9b94a 50%,#6a3e08);vertical-align:middle}
.tcgb-npclv{margin:6px 0 0;font-size:12px;color:#ffe9a8}
.tcgb-u .nm .lvt{display:inline-block;padding:0 4px;border-radius:999px;font:800 9px/1.3 Arial,sans-serif;color:#fff;background:linear-gradient(135deg,#7a4a0c,#e9b94a 50%,#6a3e08);vertical-align:1px}
#tcgx-lv .lv-st{grid-template-columns:repeat(4,minmax(0,1fr))}
/* 2026-09-28 deckcopy: copy chooser in the deck builder */
.tcgd-copies{display:grid;gap:6px;margin:4px 0 8px}
.tcgd-copy{display:block;width:100%;text-align:left;border-radius:10px;border:1px solid rgba(255,255,255,.16);background:rgba(255,255,255,.05);color:inherit;padding:7px 10px;cursor:pointer;font:13px/1.35 Arial,sans-serif}
.tcgd-copy b{display:block;font-size:13px}
.tcgd-copy b em{font-style:normal;font-size:10px;letter-spacing:.5px;text-transform:uppercase;background:rgba(255,215,106,.25);color:#ffe9a8;border-radius:6px;padding:1px 5px;margin-left:4px}
.tcgd-copy span{display:block;font-size:12px;opacity:.85}
.tcgd-copy small{display:block;font-size:11px;color:#5eead4;margin-top:2px}
.tcgd-copy.on{border-color:#ffd76a;background:rgba(255,215,106,.14);box-shadow:0 0 0 1px #ffd76a}