@import url('../style.css?v=4');

/* ---------- Pokémon palette: electric yellow, pokéball red, deep navy ---------- */
:root{
  --bg:#070a14;--bg2:#0b1020;--panel:#10162a;--panel2:#172038;--line:#212b47;--line2:#2f3b60;
  --text:#eef1fb;--mut:#8f9aba;--dim:#56607f;
  --red:#ff2d3d;--red2:#b8111f;--gold:#ffd23f;--cyan:#3ec8ff;--vio:#a970ff;--green:#3dffa2;--blue:#3a6bff;
}
body.ptcg::before{background:radial-gradient(1000px 600px at 85% -10%,rgba(255,210,63,.12),transparent 60%),radial-gradient(900px 600px at -10% 110%,rgba(58,107,255,.16),transparent 60%),radial-gradient(700px 400px at 50% 120%,rgba(255,45,61,.08),transparent 60%)}
header{background:rgba(7,10,20,.84)}
.logo b{color:var(--gold);text-shadow:0 0 18px rgba(255,210,63,.45)}
.logo .gtag{font:700 10px var(--fm);letter-spacing:1.5px;color:var(--bg);background:var(--gold);padding:3px 6px;border-radius:6px;margin-left:2px;align-self:center}
.pball{width:28px;height:28px;filter:drop-shadow(0 0 10px rgba(255,45,61,.6));animation:pulse 3s ease-in-out infinite}
#boot svg.pball{width:76px;height:76px;filter:drop-shadow(0 0 22px rgba(255,210,63,.7))}
.tab.on{background:linear-gradient(180deg,rgba(255,210,63,.22),rgba(255,210,63,.05));box-shadow:inset 0 0 0 1px rgba(255,210,63,.5)}
h1.big em{color:var(--gold);text-shadow:0 0 30px rgba(255,210,63,.45)}
.ghead h1 em{color:var(--gold)}
.in:focus,.sel:focus{border-color:var(--gold)}
.chk input{accent-color:var(--gold)}
.btn.red{background:linear-gradient(180deg,#ff4352,#c4101f);border-color:#ff7682}
.btn.blue{background:linear-gradient(180deg,#4f7dff,#2245c4);border-color:#89a6ff;color:#fff;box-shadow:0 6px 24px -6px rgba(58,107,255,.6)}
.bars div{background:linear-gradient(180deg,var(--gold),#d39b00)}
.slot::before,.slot::after{background:var(--gold);box-shadow:0 0 14px var(--gold)}
.slot .reel.land{text-shadow:0 0 30px rgba(255,210,63,.8)}
.qa{border-left-color:var(--gold)}
.cursor{background:var(--gold)}

/* game switcher pill (also defined in ../style.css for the YGO header) */
.gswitch{display:inline-flex;align-items:center;gap:6px;font:700 11px var(--fb);letter-spacing:.6px;text-transform:uppercase;padding:5px 10px;border-radius:99px;border:1px solid var(--line2);color:var(--mut);text-decoration:none;white-space:nowrap;transition:.15s}
.gswitch:hover{color:var(--text);border-color:var(--gold)}

/* ---------- cards are 63 x 88 ---------- */
.cd,.flip{aspect-ratio:63/88}
.cd{border-radius:4.5%/3.2%}
.flip>.back,.flip>.front{border-radius:4.5%/3.2%}
.flip>.front .cd{border-radius:4.5%/3.2%}
.cd.noimg{background:linear-gradient(160deg,#1c2a52,#0d1430);color:#dfe6ff;border:1px solid #33457a}
.cd.noimg.trainer{background:linear-gradient(160deg,#3b3f4a,#1b1d24)}
.cd.noimg.energy{background:linear-gradient(160deg,#4a3d10,#1d1806)}
/* fan-made card back: pokéball on deep navy */
.flip>.back{background:radial-gradient(circle at 50% 50%,#fff 0 9%,#070a14 9.5% 13%,transparent 13.5%),linear-gradient(180deg,#ff2d3d 0 47%,#070a14 47% 53%,#f3f5ff 53%) center/58% 41.5% no-repeat,radial-gradient(circle at 50% 50%,#1b3a8f,#0b1a4d 60%,#06102e);box-shadow:inset 0 0 0 4px #c9a227,inset 0 0 0 7px #0b1a4d}
.flip>.back::after{display:none}
.flip.hint4>.back{box-shadow:inset 0 0 0 4px #c9a227,0 0 28px rgba(255,210,63,.95)}
.cd .rev{position:absolute;right:3px;top:3px;font:800 8px var(--fm);letter-spacing:.5px;background:rgba(0,0,0,.72);color:var(--cyan);padding:1px 4px;border-radius:4px;z-index:3}
.cd .ill{position:absolute;inset:0;background:rgba(160,0,20,.4);box-shadow:inset 0 0 0 2px var(--red)}
.cd .ill::after{content:"NOT LEGAL";position:absolute;left:3px;bottom:3px;font:800 8px var(--fb);background:var(--red);padding:1px 4px;border-radius:3px}

/* type pips */
.tp{display:inline-grid;place-items:center;width:18px;height:18px;border-radius:50%;font:800 9px var(--fb);color:#06080f;vertical-align:-4px;box-shadow:inset 0 -2px 0 rgba(0,0,0,.25)}
.tpline{display:inline-flex;gap:3px;align-items:center}

/* ---------- rip ---------- */
.fpack.newest::before{background:radial-gradient(circle at 80% 10%,rgba(255,210,63,.38),transparent 55%),linear-gradient(160deg,#2a2208,#0f0c03)}
.fpack.rogue::before{background:radial-gradient(circle at 80% 10%,rgba(61,255,162,.33),transparent 55%),linear-gradient(160deg,#0c2a1f,#06110c)}
.fpack.staple::before{background:radial-gradient(circle at 80% 10%,rgba(58,107,255,.42),transparent 55%),linear-gradient(160deg,#0d1a3c,#060a18)}
.fpack.crate::before{background:radial-gradient(circle at 80% 10%,rgba(255,45,61,.38),transparent 55%),linear-gradient(160deg,#2c0a10,#110306)}
.fpack .art{width:140px;border-radius:7px}
.fpack .logo2{position:absolute;right:12px;top:14px;width:46%;max-height:90px;object-fit:contain;z-index:-1;filter:drop-shadow(0 8px 20px #000);opacity:.95}
.settile .sart{height:130px;background:radial-gradient(circle at 50% 40%,#1b2547,#0b1020)}
.settile .sart img{height:auto;max-height:96px;max-width:82%;width:auto}
.settile .sart .sym{position:absolute;left:10px;top:10px;width:22px;height:22px;object-fit:contain;filter:none;opacity:.9}
.settile .sart .code{font:34px var(--fd);color:var(--dim);text-align:center;padding:0 10px}
.settile .era{position:absolute;right:8px;top:8px;font:700 9px var(--fm);color:var(--mut);background:rgba(0,0,0,.45);padding:2px 6px;border-radius:5px;letter-spacing:.5px}
.pack3d .skin img{width:150px;top:22%;opacity:.85;filter:drop-shadow(0 6px 18px #000)}
.pack3d .skin img.cardart{width:118px;opacity:.55}
.typepick{display:flex;flex-wrap:wrap;gap:5px;margin-top:8px}
.typepick button{width:26px;height:26px;border-radius:50%;font:800 10px var(--fb);color:#06080f;opacity:.55;transition:.15s}
.typepick button.on,.typepick button:hover{opacity:1;transform:scale(1.12);box-shadow:0 0 12px currentColor}

/* ---------- binder ---------- */
.binderbar{display:flex;gap:10px;align-items:center;flex-wrap:wrap;margin-top:10px}
.prog{flex:1;min-width:160px;height:8px;border-radius:8px;background:#1a2340;overflow:hidden}
.prog i{display:block;height:100%;background:linear-gradient(90deg,var(--gold),var(--red))}
.cd.miss{opacity:.22;filter:grayscale(1)}
.cd.miss:hover{opacity:.6}
.cd .num{position:absolute;left:3px;bottom:3px;font:700 9px var(--fm);background:rgba(0,0,0,.7);padding:1px 4px;border-radius:4px;color:var(--mut)}

/* ---------- builder ---------- */
.zone .grid{--cw:58px}
.zone h5 em{font:600 11px var(--fb);color:var(--dim);font-style:normal;letter-spacing:0;margin-left:6px}
.meters{grid-template-columns:repeat(3,1fr)}
.evo{font:600 12px var(--fm);color:var(--mut);padding:6px 0;border-bottom:1px solid var(--line)}
.evo b{color:var(--text)}
.etype{display:flex;gap:8px;flex-wrap:wrap;margin:6px 0}
.etype span{display:inline-flex;gap:5px;align-items:center;font:600 12px var(--fm)}

/* ---------- test hand ---------- */
#hand .box{width:min(1100px,96vw)}
#hand .fan .cd{width:clamp(70px,11vw,124px)}
.prizes{display:flex;gap:8px;justify-content:center;margin:12px 0 4px;flex-wrap:wrap}
.prizes .pz{width:clamp(44px,6vw,64px);aspect-ratio:63/88;border-radius:5px;cursor:pointer;position:relative}
.prizes .pz.down{background:radial-gradient(circle at 50% 50%,#fff 0 9%,#070a14 9.5% 13%,transparent 13.5%),linear-gradient(180deg,#ff2d3d 0 47%,#070a14 47% 53%,#f3f5ff 53%) center/58% 41.5% no-repeat,radial-gradient(circle,#1b3a8f,#06102e);box-shadow:inset 0 0 0 2px #c9a227}
.prizes .pz .cd{width:100%}
.mullban{font:clamp(30px,5vw,54px)/1 var(--fd);color:var(--red);letter-spacing:2px;text-shadow:0 0 30px rgba(255,45,61,.6)}

#imp .box{width:min(640px,94vw);padding:24px;position:relative}
#imp textarea{width:100%;min-height:260px;background:var(--bg2);border:1px solid var(--line2);border-radius:10px;color:var(--text);font:12.5px/1.5 var(--fm);padding:12px;margin:12px 0;resize:vertical}
.cinfo .atk{background:var(--bg2);border:1px solid var(--line);border-radius:10px;padding:10px 12px;margin:8px 0;font-size:13.5px}
.cinfo .atk .h{display:flex;justify-content:space-between;align-items:center;gap:10px;font-weight:700}
.cinfo .atk .h .dmg{font:24px var(--fd);letter-spacing:.5px}
.cinfo .atk p{color:#c9d0e6;margin-top:5px;line-height:1.5}
.cinfo .atk.ab{border-color:rgba(255,45,61,.45)}
.cinfo .atk.ab .k{font:800 9.5px var(--fb);letter-spacing:.8px;color:var(--red);text-transform:uppercase}
.cinfo .wrr{display:flex;gap:18px;font:600 12.5px var(--fm);color:var(--mut);margin-top:10px;flex-wrap:wrap}
.cinfo .wrr b{color:var(--text)}
.prints{display:flex;gap:6px;flex-wrap:wrap;margin-top:8px}
.prints .cd{width:46px}
.prints .cd.sel{outline:2px solid var(--gold);outline-offset:2px}

/* ---------- Pokémon foils, keyed off the printed rarity ---------- */
/* art window on modern cards ≈ top 11%–49%, sides 8% */
.f-holo::before,.f-dr::before,.f-tg::before,.f-promo::before,.f-cc::before{inset:11% 8% 51% 8%}
/* Rare Holo: classic holo art window */
.f-holo::before{background:repeating-linear-gradient(var(--ang),rgba(255,0,120,.16) 0 4%,rgba(255,220,0,.16) 4% 8%,rgba(0,255,190,.16) 8% 12%,rgba(0,140,255,.16) 12% 16%),linear-gradient(var(--ang),transparent 25%,rgba(255,255,255,.55) 48%,transparent 70%);background-size:200% 200%,300% 300%;background-position:var(--mx) var(--my);mix-blend-mode:color-dodge;opacity:.8}
/* Reverse holo: whole card foil EXCEPT the art box */
.f-rev::before{clip-path:polygon(evenodd,0 0,100% 0,100% 100%,0 100%,0 0,8% 11%,92% 11%,92% 49%,8% 49%,8% 11%);
  background:linear-gradient(var(--ang),rgba(120,200,255,.32),rgba(255,255,255,.55) 45%,rgba(255,160,230,.32) 60%,rgba(255,240,150,.3)),radial-gradient(circle,rgba(255,255,255,.35) 1px,transparent 1.6px) 0 0/8px 8px;background-size:300% 300%,8px 8px;background-position:var(--mx) var(--my),0 0;mix-blend-mode:color-dodge;opacity:.6}
/* Double Rare / ex / V / GX: rainbow art window + soft full-card gloss */
.f-dr::before{background:linear-gradient(var(--ang),rgba(255,0,110,.35),rgba(255,214,0,.35) 25%,rgba(0,255,170,.35) 50%,rgba(0,150,255,.35) 75%,rgba(190,0,255,.35));background-size:300% 300%;background-position:var(--mx) var(--my);mix-blend-mode:color-dodge;opacity:.75}
.f-dr::after{background:radial-gradient(circle at var(--mx) var(--my),rgba(255,255,255,.35),transparent 45%);mix-blend-mode:overlay}
/* Ultra Rare / full art: etched diagonal texture + silver sheen across the whole card */
.f-ultra::before{background:repeating-linear-gradient(45deg,rgba(255,255,255,.14) 0 1px,transparent 1px 4px),repeating-linear-gradient(-45deg,rgba(255,255,255,.09) 0 1px,transparent 1px 5px),linear-gradient(var(--ang),transparent 25%,rgba(210,230,255,.6) 48%,transparent 72%);background-size:auto,auto,300% 300%;background-position:0 0,0 0,var(--mx) var(--my);mix-blend-mode:color-dodge;opacity:.75}
.f-ultra::after{background:radial-gradient(circle at var(--mx) var(--my),rgba(255,255,255,.45),transparent 40%);mix-blend-mode:overlay}
/* Illustration Rare: glossy full-art sheen with light canvas texture */
.f-ir::before{background:repeating-radial-gradient(circle at 30% 30%,rgba(255,255,255,.06) 0 2px,transparent 2px 5px),linear-gradient(var(--ang),rgba(255,180,220,.0) 20%,rgba(255,240,200,.5) 45%,rgba(180,230,255,.45) 55%,transparent 80%);background-size:auto,300% 300%;background-position:0 0,var(--mx) var(--my);mix-blend-mode:color-dodge;opacity:.7}
/* Special Illustration Rare: full textured rainbow */
.f-sir::before{background:repeating-linear-gradient(60deg,rgba(255,255,255,.12) 0 1px,transparent 1px 4px),conic-gradient(from var(--ang) at var(--mx) var(--my),#ff0062,#ffcc00,#00ffa2,#00a6ff,#a100ff,#ff0062);mix-blend-mode:color-dodge;opacity:.42}
.f-sir::after{background:radial-gradient(circle at var(--mx) var(--my),rgba(255,255,255,.6),transparent 38%),repeating-linear-gradient(-30deg,rgba(255,255,255,.07) 0 2px,transparent 2px 7px);mix-blend-mode:overlay}
/* Hyper Rare / Rare Secret: gold */
.f-gold::before{background:repeating-linear-gradient(45deg,rgba(255,236,170,.16) 0 1px,transparent 1px 4px),linear-gradient(var(--ang),#7a5410,#ffe27a 30%,#b7861c 50%,#fff3c4 70%,#8a6116);background-size:auto,300% 300%;background-position:0 0,var(--mx) var(--my);mix-blend-mode:color-dodge;opacity:.55;box-shadow:inset 0 0 0 3px rgba(255,210,90,.7)}
.f-gold::after{background:radial-gradient(circle at var(--mx) var(--my),rgba(255,250,220,.6),transparent 40%);mix-blend-mode:overlay}
/* Rare Rainbow: pastel rainbow wash over the whole card */
.f-rainbow::before{background:linear-gradient(var(--ang),#ff7eb3,#ffd36e 20%,#9effa0 40%,#7ee0ff 60%,#c49bff 80%,#ff7eb3);background-size:250% 250%;background-position:var(--mx) var(--my);mix-blend-mode:color;opacity:.55}
.f-rainbow::after{background:repeating-linear-gradient(45deg,rgba(255,255,255,.12) 0 1px,transparent 1px 4px),radial-gradient(circle at var(--mx) var(--my),rgba(255,255,255,.5),transparent 40%);mix-blend-mode:overlay}
/* Amazing Rare: rainbow splash bursting out of the art */
.f-amazing::before{background:radial-gradient(ellipse 60% 40% at 50% 30%,transparent 40%,rgba(255,0,140,.35) 55%,rgba(255,210,0,.35) 65%,rgba(0,255,190,.35) 75%,rgba(0,140,255,.35) 85%,transparent 95%);mix-blend-mode:color-dodge;opacity:.9}
.f-amazing::after{background:radial-gradient(circle at var(--mx) var(--my),rgba(255,255,255,.45),transparent 40%),radial-gradient(circle,rgba(255,255,255,.35) 1px,transparent 1.6px) 0 0/10px 10px;mix-blend-mode:overlay}
/* Radiant: shattered crystal crackle */
.f-radiant::before{background:repeating-conic-gradient(from var(--ang) at 50% 30%,rgba(255,255,255,.22) 0 2deg,transparent 2deg 11deg),linear-gradient(var(--ang),rgba(255,120,200,.3),rgba(120,220,255,.3),rgba(255,240,140,.3));background-size:auto,300% 300%;background-position:0 0,var(--mx) var(--my);mix-blend-mode:color-dodge;opacity:.7}
.f-radiant::after{background:radial-gradient(circle at var(--mx) var(--my),rgba(255,255,255,.55),transparent 35%);mix-blend-mode:overlay}
/* Shiny: silver glitter */
.f-shiny::before{background:radial-gradient(1px 1px at 20% 30%,#fff,transparent),radial-gradient(1.5px 1.5px at 70% 20%,#fff,transparent),radial-gradient(1px 1px at 40% 70%,#fff,transparent),radial-gradient(1.5px 1.5px at 85% 65%,#fff,transparent),radial-gradient(1px 1px at 55% 45%,#fff,transparent),
  linear-gradient(var(--ang),rgba(200,220,255,.2),rgba(255,255,255,.5) 50%,rgba(200,220,255,.2));background-size:40px 40px,55px 55px,35px 35px,60px 60px,30px 30px,300% 300%;background-position:0 0,0 0,0 0,0 0,0 0,var(--mx) var(--my);mix-blend-mode:color-dodge;animation:twinkle 1.4s steps(2) infinite;opacity:.8}
/* ACE SPEC: pink-violet prism + glowing frame */
.f-acespec::before{background:linear-gradient(var(--ang),rgba(255,60,200,.4),rgba(140,80,255,.4) 40%,rgba(255,255,255,.55) 52%,rgba(80,200,255,.4) 64%,rgba(255,60,200,.4));background-size:300% 300%;background-position:var(--mx) var(--my);mix-blend-mode:color-dodge;opacity:.6}
.f-acespec::after{box-shadow:inset 0 0 0 3px rgba(255,90,220,.75),inset 0 0 22px rgba(170,90,255,.6)}
/* Trainer Gallery: holo art + light full gloss */
.f-tg::before{background:linear-gradient(var(--ang),rgba(255,140,200,.35),rgba(140,220,255,.35) 50%,rgba(255,240,150,.35));background-size:300% 300%;background-position:var(--mx) var(--my);mix-blend-mode:color-dodge;opacity:.7}
.f-tg::after{background:linear-gradient(var(--ang),transparent 30%,rgba(255,255,255,.25) 50%,transparent 70%);background-size:300% 300%;background-position:var(--mx) var(--my);mix-blend-mode:overlay}
/* Promo: black-star silver sheen on the art */
.f-promo::before{background:linear-gradient(var(--ang),transparent 25%,rgba(230,236,255,.6) 50%,transparent 75%);background-size:300% 300%;background-position:var(--mx) var(--my);mix-blend-mode:color-dodge;opacity:.6}
/* Gold Star / Prism Star / Shining: starfield */
.f-star::before{background:radial-gradient(1.5px 1.5px at 15% 25%,#fff8c4,transparent),radial-gradient(2px 2px at 80% 15%,#fff,transparent),radial-gradient(1.5px 1.5px at 35% 75%,#fff8c4,transparent),radial-gradient(2px 2px at 65% 55%,#fff,transparent),
  conic-gradient(from var(--ang) at var(--mx) var(--my),rgba(255,220,90,.35),rgba(255,120,200,.3),rgba(120,200,255,.3),rgba(255,220,90,.35));background-size:50px 50px,70px 70px,45px 45px,60px 60px,100% 100%;mix-blend-mode:color-dodge;animation:twinkle 1.8s steps(2) infinite;opacity:.75}
/* Classic Collection: old-school cosmos holo */
.f-cc::before{background:radial-gradient(circle,rgba(255,255,255,.5) 0 1px,transparent 2px) 0 0/7px 7px,radial-gradient(circle,rgba(120,200,255,.45) 0 2px,transparent 3px) 3px 4px/13px 13px,linear-gradient(var(--ang),rgba(255,120,200,.3),rgba(120,220,255,.3));background-size:7px 7px,13px 13px,300% 300%;mix-blend-mode:color-dodge;opacity:.8}
/* Black White Rare: monochrome sparkle */
.f-bwr::before{background:repeating-linear-gradient(var(--ang),rgba(255,255,255,.25) 0 2px,rgba(0,0,0,.25) 2px 4px),radial-gradient(circle at var(--mx) var(--my),rgba(255,255,255,.7),transparent 40%);mix-blend-mode:overlay;filter:grayscale(1)}
.f-bwr::after{box-shadow:inset 0 0 0 3px rgba(255,255,255,.75),inset 0 0 0 5px rgba(0,0,0,.8)}
/* Rare (non-holo): a quiet shimmer on the name bar */
.f-rare::before{inset:3% 6% 90% 6%}
.cd .f-sir::before{opacity:.26}.cd .f-gold::before{opacity:.4}.cd .f-rainbow::before{opacity:.4}
.bigcard{border-radius:4.5%/3.2%}
.bigcard img{border-radius:4.5%/3.2%}
.bigcard .holo{border-radius:4.5%/3.2%}
.cd.t5{animation:legend2 2.4s linear infinite}
@keyframes legend2{0%,100%{box-shadow:0 0 22px rgba(255,210,63,.7)}50%{box-shadow:0 0 22px rgba(255,140,40,.7)}}
.cd.t2{box-shadow:0 0 0 1.5px var(--cyan),0 0 12px rgba(62,200,255,.3)}
.cd.t3{box-shadow:0 0 0 1.5px var(--gold),0 0 16px rgba(255,210,63,.45)}
.rtag.t3{color:var(--gold)}
.rtag.t5{background:linear-gradient(90deg,#ffe27a,#fff3c4,#e0a320);-webkit-background-clip:text;color:transparent}
@media (max-width:1060px){.logo .gtag{display:none}.gswitch{padding:4px 8px;font-size:10px}}
.gswitch .gs{display:none}
@media (max-width:520px){.gswitch .gl{display:none}.gswitch .gs{display:inline}}