/* Whoopty TCG v2: card layout, holographic lighting and the inspect view.
   Lighting is driven by CSS variables that tcg.js springs toward the pointer:
   --rx/--ry tilt (deg), --mx/--my pointer (%), --bx/--by foil offset (%), --hyp distance from centre (0-1), --o effect strength (0-1). */

.tcg{--rx:0deg;--ry:0deg;--mx:50%;--my:50%;--bx:50%;--by:50%;--hyp:0;--o:0;--s:1;
  --c1:hsl(0 100% 72%);--c2:hsl(48 100% 70%);--c3:hsl(110 90% 70%);--c4:hsl(180 100% 72%);--c5:hsl(225 100% 75%);--c6:hsl(285 100% 75%);
  position:relative;width:min(100%,300px);aspect-ratio:5/7;container-type:inline-size;perspective:900px;
  user-select:none;-webkit-user-select:none;cursor:pointer;border-radius:4.6%/3.3%;outline:none}
.tcg-rot{position:absolute;inset:0;border-radius:inherit;transform-style:preserve-3d;will-change:transform;
  transform:rotateX(var(--rx)) rotateY(var(--ry)) scale(var(--s));
  box-shadow:var(--shx,0px) var(--shy,14px) var(--shb,28px) rgba(0,0,0,.55),0 0 0 1px rgba(255,255,255,.06)}
.tcg:focus-visible .tcg-rot{box-shadow:0 0 0 3px var(--t),0 18px 40px rgba(0,0,0,.55)}

/* ---------- card face ---------- */
.tcg-in{position:absolute;inset:0;border-radius:inherit;overflow:hidden;padding:3.4cqw;
  background:linear-gradient(155deg,#eef1f7,#a3aec5 32%,#f7f8fc 52%,#8e99b2 78%,#dde2ec)}
.tcg-in::after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;box-shadow:inset 0 0 0 .5cqw rgba(255,255,255,.35),inset 0 0 2cqw rgba(0,0,0,.25)}
.face{position:relative;height:100%;border-radius:2.4cqw;padding:2.6cqw 3.4cqw 2.4cqw;display:flex;flex-direction:column;gap:1.5cqw;overflow:hidden;color:#0d1220;
  background:linear-gradient(170deg,color-mix(in srgb,var(--pc) 30%,#f6f3ea),color-mix(in srgb,var(--pc) 12%,#fbfaf6) 45%,color-mix(in srgb,var(--pc) 28%,#efe9da));font-family:var(--body);
  box-shadow:inset 0 0 0 .35cqw rgba(0,0,0,.12)}
.face>*{position:relative;z-index:2}
.tcg .top{order:-1;display:flex;align-items:baseline;gap:1.8cqw;line-height:1}
.tcg .stg{font-family:var(--hud);font-size:2.6cqw;font-weight:700;letter-spacing:.1em;padding:.6cqw 1.6cqw;border-radius:1cqw;background:#0d1220;color:#fff;align-self:center}
.tcg .nm{font-family:var(--display);font-weight:400;font-size:7.4cqw;letter-spacing:.01em;flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tcg .hp{font-family:var(--display);font-size:7cqw;color:#c0262d}
.tcg .hp small{font-family:var(--hud);font-size:2.8cqw;font-weight:700;margin-right:.6cqw;color:#0d1220}
.tcg .type{width:6.6cqw;height:6.6cqw;border-radius:50%;align-self:center;flex:none;background:radial-gradient(circle at 35% 30%,#fff 0 12%,var(--pc) 13% 60%,color-mix(in srgb,var(--pc) 50%,#000));box-shadow:0 0 0 .5cqw #fff,0 .5cqw 1cqw rgba(0,0,0,.4)}
.tcg .art{position:relative;aspect-ratio:16/11.5;border:1.2cqw solid transparent;border-radius:1cqw;overflow:hidden;isolation:isolate;
  background:radial-gradient(circle at 50% 95%,color-mix(in srgb,var(--pc) 75%,#fff),transparent 60%) padding-box,linear-gradient(160deg,#122046,#060a16) padding-box,linear-gradient(135deg,#f6e27a,#b8902f 40%,#fff3b0 55%,#a07a22) border-box;
  box-shadow:inset 0 0 0 .3cqw rgba(0,0,0,.3)}
.tcg .art img{position:absolute;left:50%;bottom:0;height:108%;width:auto;max-width:none;transform:translateX(-50%);object-fit:cover;pointer-events:none}
.tcg .strip{font-family:var(--hud);font-size:2.6cqw;font-weight:600;letter-spacing:.04em;text-align:center;padding:.8cqw 2cqw;border-radius:5cqw;margin:-.4cqw 3cqw 0;
  background:linear-gradient(90deg,#c9a640,#f5e39a,#c9a640);color:#3a2a05;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tcg .atks{display:grid;gap:1.6cqw;margin-top:.8cqw;flex:1;align-content:start}
.tcg .atk{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:0 2cqw}
.tcg .atk .cost{display:flex;gap:.6cqw}
.tcg .atk .cost i{width:4.2cqw;height:4.2cqw;border-radius:50%;background:radial-gradient(circle at 35% 30%,#fff 0 15%,#e8e8e8 16% 55%,#9a9a9a);box-shadow:0 .3cqw .6cqw rgba(0,0,0,.35)}
.tcg .atk b{font-size:5cqw;font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tcg .atk em{font-style:normal;font-family:var(--display);font-size:6.4cqw}
.tcg .atk p{grid-column:1/-1;margin:.4cqw 0 0;font-size:3cqw;line-height:1.3}
.tcg .wrr{display:flex;justify-content:space-between;gap:1cqw;border-top:.3cqw solid rgba(0,0,0,.25);padding-top:1.2cqw;font-size:2.5cqw;text-transform:lowercase}
.tcg .wrr b{display:block;font-size:2.9cqw;text-transform:none}
.tcg .flav{margin:0;font-size:2.8cqw;font-style:italic;line-height:1.3;border:.3cqw solid rgba(160,120,30,.6);border-radius:1cqw;padding:1cqw 1.6cqw}
.tcg .set{display:flex;justify-content:space-between;font-family:var(--hud);font-size:2.4cqw;font-weight:700;letter-spacing:.06em;opacity:.8}

/* full art, EX and secret: the art fills the card and the text sits over it */
.tcg.full .face{background:#05070f;color:#fff}
.tcg.full .art{position:absolute;inset:0;z-index:0;aspect-ratio:auto;border:0;border-radius:0;background:radial-gradient(circle at 50% 70%,color-mix(in srgb,var(--pc) 70%,#fff),transparent 55%),linear-gradient(160deg,#1a2a6a,#05070f)}
.tcg.full .art img{height:92%;bottom:-2%}
.tcg.full .art::after{content:"";position:absolute;inset:0;z-index:3;background:linear-gradient(180deg,rgba(0,0,0,.65),transparent 22%,transparent 48%,rgba(0,0,0,.88) 72%)}
.tcg.full .top,.tcg.full .stg{text-shadow:0 .4cqw 1.2cqw #000}
.tcg.full .hp small{color:#fff}.tcg.full .hp{color:#ff5f66}
.tcg.full .strip{margin-top:auto}
.tcg.full .atks{flex:0}
.tcg.full .atk p,.tcg.full .wrr,.tcg.full .flav{color:#e6e9f2}
.tcg.full .wrr{border-color:rgba(255,255,255,.3)}.tcg.full .flav{border-color:rgba(255,215,120,.5)}

/* ---------- lighting layers ---------- */
.tcg-shine,.tcg-glare,.art-shine{position:absolute;inset:0;pointer-events:none;border-radius:inherit}
.tcg-shine,.tcg-glare{z-index:5;transform:translateZ(1px)}
.art-shine{z-index:2}
/* glare: a soft light that follows the pointer (every rarity) */
.tcg-glare{background:radial-gradient(farthest-corner circle at var(--mx) var(--my),rgba(255,255,255,.85) 8%,rgba(255,255,255,.55) 22%,rgba(0,0,0,.45) 95%);
  mix-blend-mode:overlay;opacity:calc(var(--o) * .7)}
.r-common .tcg-glare{opacity:calc(var(--o) * .45)}

/* HOLO RARE: rainbow light-pillars across the art window */
.r-holo .art-shine{
  background-image:
    repeating-linear-gradient(0deg,var(--c1) 0%,var(--c2) 6%,var(--c3) 12%,var(--c4) 18%,var(--c5) 24%,var(--c6) 30%,var(--c1) 36%),
    repeating-linear-gradient(118deg,rgba(8,12,28,.95) 0%,hsl(195 35% 68%) 2.6%,hsl(195 45% 78%) 3.2%,hsl(195 35% 68%) 3.8%,rgba(8,12,28,.95) 8%,rgba(8,12,28,.95) 10%),
    radial-gradient(farthest-corner circle at var(--mx) var(--my),rgba(0,0,0,.08) 10%,rgba(0,0,0,.3) 100%);
  background-size:250% 800%,260% 260%,200% 200%;
  background-position:0% var(--by),var(--bx) var(--by),var(--bx) var(--by);
  background-blend-mode:screen,hard-light;
  mix-blend-mode:color-dodge;filter:brightness(calc(.4 + var(--hyp) * .3)) contrast(2) saturate(.85);
  opacity:var(--o)}
.r-holo .tcg-shine{background:linear-gradient(110deg,transparent 30%,rgba(255,255,255,.22) 48%,transparent 62%) var(--bx) var(--by)/250% 250% no-repeat;mix-blend-mode:soft-light;opacity:var(--o)}

/* REVERSE HOLO: the whole frame and text panel is foil, the art stays clean */
.r-reverse .tcg-in{background:linear-gradient(155deg,#dfe6ff,#7f8cff 30%,#e9fbff 50%,#ff9ad5 70%,#c8d0ff)}
.r-reverse .face::before{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background-image:var(--glitter),repeating-linear-gradient(112deg,var(--c1) 0%,var(--c2) 7%,var(--c3) 14%,var(--c4) 21%,var(--c5) 28%,var(--c6) 35%,var(--c1) 42%),
    repeating-linear-gradient(45deg,rgba(255,255,255,.18) 0 .5cqw,transparent .5cqw 1.6cqw);
  background-size:26cqw,300% 300%,auto;
  background-position:calc(100% - var(--bx)) calc(100% - var(--by)),var(--bx) var(--by),0 0;
  mix-blend-mode:color-dodge;filter:brightness(.75) contrast(1.4) saturate(1.2);opacity:calc(.25 + var(--o) * .6)}
.r-reverse .tcg-shine{background:linear-gradient(115deg,transparent 35%,rgba(255,255,255,.35) 50%,transparent 65%) var(--bx) var(--by)/260% 260% no-repeat;mix-blend-mode:overlay;opacity:var(--o)}

/* FULL ART: rainbow glitter over the whole card with fine etched lines */
.r-fullart .tcg-in{background:linear-gradient(155deg,#fff3b0,#c9962f 30%,#fff9d8 50%,#a8741a 75%,#f7e08a)}
.r-fullart .tcg-shine{
  background-image:var(--glitter),
    repeating-linear-gradient(-48deg,var(--c1) 0%,var(--c2) 5%,var(--c3) 10%,var(--c4) 15%,var(--c5) 20%,var(--c6) 25%,var(--c1) 30%),
    repeating-linear-gradient(48deg,rgba(255,255,255,.14) 0 .3cqw,transparent .3cqw 1.2cqw);
  background-size:24cqw,400% 400%,auto;
  background-position:var(--mx) var(--my),var(--bx) var(--by),0 0;
  background-blend-mode:overlay,normal,normal;
  mix-blend-mode:color-dodge;filter:brightness(calc(.42 + var(--hyp) * .3)) contrast(1.5) saturate(1.2);opacity:calc(var(--o) * .75)}

/* EX: cosmic nebula foil and a red aura */
.r-ex .tcg-rot{animation:exAura 2.6s ease-in-out infinite}
@keyframes exAura{50%{filter:drop-shadow(0 0 2.2cqw rgba(255,40,50,.75))}}
.r-ex .tcg-in{background:linear-gradient(155deg,#2a0004,#ff2a3a 30%,#1a0002 50%,#ffb000 70%,#3a0006)}
.r-ex .art{background:#000}
.r-ex .art img{height:100%;width:100%;left:0;bottom:0;transform:none;object-fit:cover;filter:saturate(1.15) contrast(1.1)}
.r-ex .nm{color:#ff4b55;text-shadow:0 0 2cqw rgba(255,0,20,.8),0 .4cqw 1cqw #000}
.r-ex .exl{font-family:var(--display);font-style:italic;font-size:9cqw;color:#fff;-webkit-text-stroke:.5cqw #c00010;text-shadow:0 0 3cqw #ff1020;margin-left:1cqw}
.r-ex .stg{background:#c00010}
.r-ex .strip{background:linear-gradient(90deg,#7a0008,#ff3a46,#7a0008);color:#fff}
.r-ex .tcg-shine{
  background-image:var(--galaxy),linear-gradient(115deg,transparent 30%,rgba(255,70,60,.55) 44%,rgba(255,210,90,.7) 50%,rgba(255,70,60,.55) 56%,transparent 70%);
  background-size:cover,260% 260%;
  background-position:calc(50% + (var(--bx) - 50%) * .4) calc(50% + (var(--by) - 50%) * .4),var(--bx) var(--by);
  mix-blend-mode:color-dodge;filter:brightness(calc(.6 + var(--hyp) * .35)) contrast(1.3) saturate(1.3);opacity:calc(.22 + var(--o) * .65)}

/* SECRET RARE: solid gold, god rays, gold glitter and the strongest glare */
.r-secret .tcg-rot{animation:godPulse 3s ease-in-out infinite}
@keyframes godPulse{50%{filter:drop-shadow(0 0 3cqw rgba(255,215,90,.95))}}
.r-secret .tcg-in{background:linear-gradient(155deg,#fff6c8,#d4a017 25%,#fffbe6 45%,#b8860b 65%,#ffe680 85%,#a8740d)}
.r-secret .face{background:#2a1800;color:#fff8dc}
.r-secret .art{background:#3a2400}
.r-secret .art img{height:100%;width:100%;left:0;bottom:0;transform:none;object-fit:cover;object-position:50% 0;z-index:1}
.r-secret .art::after{background:linear-gradient(180deg,rgba(40,24,0,.55),transparent 16%,transparent 46%,rgba(30,16,0,.94) 62%)}
.r-secret .rays{position:absolute;inset:-40%;z-index:0;background:repeating-conic-gradient(from 0deg at 50% 50%,rgba(255,240,170,.35) 0 6deg,transparent 6deg 18deg);animation:tcgSpin 24s linear infinite;mix-blend-mode:screen}
@keyframes tcgSpin{to{rotate:360deg}}
.r-secret .nm{font-size:6.2cqw;color:#ffe680;text-shadow:0 0 2.5cqw rgba(255,200,40,.9),0 .4cqw 1cqw #000}
.r-secret .stg{background:linear-gradient(90deg,#b8860b,#ffe680,#b8860b);color:#2a1800}
.r-secret .hp{color:#ffe680}.r-secret .hp small{color:#fff8dc}
.r-secret .strip{background:linear-gradient(90deg,#8a6200,#ffe680,#8a6200);color:#2a1800}
.r-secret .atk em{color:#ffe680;font-size:8cqw}
.r-secret .atk .cost i{background:radial-gradient(circle at 35% 30%,#fff 0 15%,#ffd700 16% 55%,#a8740d)}
.r-secret .flav{border-color:rgba(255,215,90,.7);color:#fff3c4}
.r-secret .type{background:radial-gradient(circle at 35% 30%,#fff 0 12%,#ffd700 13% 60%,#8a6200)}
.r-secret .tcg-shine{
  background-image:var(--glitter),linear-gradient(115deg,transparent 25%,rgba(255,240,170,.8) 44%,rgba(255,255,255,.9) 50%,rgba(255,215,90,.8) 56%,transparent 75%);
  background-size:18cqw,250% 250%;background-position:calc(100% - var(--mx)) calc(100% - var(--my)),var(--bx) var(--by);
  mix-blend-mode:color-dodge;filter:sepia(.9) saturate(3) brightness(calc(.55 + var(--hyp) * .25));opacity:calc(.25 + var(--o) * .45)}
.r-secret .tcg-glare{opacity:calc(var(--o) * .75)}

/* ---------- card back ---------- */
.tcg-back{position:absolute;inset:0;border-radius:4.6%/3.3%;overflow:hidden;container-type:inline-size;
  background:radial-gradient(circle at 50% 50%,rgba(74,123,255,.55),transparent 45%),repeating-conic-gradient(from 0deg,#0b1a4a 0 10deg,#10245e 10deg 20deg),#0b1a4a;
  border:3.4cqw solid #c9d3ea;box-shadow:inset 0 0 0 1.2cqw #0b1a4a,inset 0 0 6cqw rgba(0,0,0,.6),0 18px 40px rgba(0,0,0,.55)}
.tcg-back img{position:absolute;left:50%;top:48%;width:62%;transform:translate(-50%,-50%);filter:drop-shadow(0 0 4cqw #2557f5)}
.tcg-back::after{content:"WHOOPTY TCG";position:absolute;left:0;right:0;bottom:7cqw;text-align:center;font-family:var(--display);font-size:7cqw;letter-spacing:.12em;color:#fff;opacity:.85}

/* ---------- inspect: click any card to pop it out ---------- */
.tcg-inspect{position:fixed;inset:0;z-index:90;display:grid;place-items:center;align-content:center;gap:16px;padding:24px 16px calc(24px + env(safe-area-inset-bottom,0px));
  background:radial-gradient(circle at 50% 45%,rgba(37,87,245,.22),rgba(2,4,10,.9) 65%);backdrop-filter:blur(8px);animation:tcgFade .25s ease-out}
.tcg-inspect.out{animation:tcgFade .3s ease-in reverse forwards}
@keyframes tcgFade{from{opacity:0}}
.tcg-pop{position:relative;width:min(84vw,400px,calc((100dvh - 170px) * 5 / 7));aspect-ratio:5/7;transform-style:preserve-3d}
.tcg-pop>.tcg,.tcg-pop>.tcg-back{position:absolute;inset:0;width:100%;backface-visibility:hidden;-webkit-backface-visibility:hidden}
.tcg-pop>.tcg-back{transform:rotateY(180deg)}
.tcg-pop .tcg{touch-action:none;cursor:grab}
.tcg-cap{text-align:center;display:grid;gap:4px}
.tcg-cap b{font-family:var(--display);font-weight:400;font-size:28px;letter-spacing:.02em}
.tcg-cap span{font-family:var(--hud);font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.tcg-x{position:absolute;top:14px;right:16px;width:44px;height:44px;border-radius:50%;border:1px solid var(--line);background:var(--panel);color:var(--fg);font-size:24px;cursor:pointer}
.tcg-hidden{visibility:hidden}

.feed-row .tag.secret{background:linear-gradient(90deg,#b8860b,#ffe680,#b8860b);color:#2a1800}
@media (prefers-reduced-motion:reduce){.r-ex .tcg-rot,.r-secret .tcg-rot,.r-secret .rays,.tcg-inspect{animation:none}}