/* Balatro-style cards. cards.js wraps each [data-card]'s .face in: shadow / tilt (face, shine, glare). */
.bc{position:relative;display:block;aspect-ratio:71/95;cursor:pointer;user-select:none;-webkit-user-select:none;-webkit-tap-highlight-color:transparent;outline:none;color:inherit;text-decoration:none}
.bc:hover{color:inherit}
/* extends the hit area over a lifted card so hovering its top edge doesn't drop the hover */
.bc::before{content:"";position:absolute;inset:0;border-radius:var(--r)}
.bc.is-up::before{top:-34px}
.bc-shadow{position:absolute;inset:0;border-radius:var(--r);background:rgba(0,0,0,.5);will-change:transform}
/* container too, so a face's own cqw sizes (like .face--slot's text) measure the card, not the page */
.bc-tilt{position:absolute;inset:0;border-radius:var(--r);overflow:hidden;isolation:isolate;will-change:transform;container-type:inline-size;--mx:50%;--my:50%;--g:0;--hue:0deg}
.bc:focus-visible .bc-tilt{box-shadow:0 0 0 3px var(--gold)}
.face{position:absolute;inset:0;border-radius:inherit;container-type:inline-size;font-family:var(--display)}
.bc-shine,.bc-glare{position:absolute;inset:0;pointer-events:none;border-radius:inherit}
.bc-shine{opacity:0}
.bc-glare{mix-blend-mode:overlay;opacity:var(--g);
  background:radial-gradient(circle at var(--mx) var(--my),rgba(255,255,255,.8),rgba(255,255,255,.18) 32%,rgba(0,0,0,.22) 80%)}
/* before cards.js runs (or without it) the face still shows */
.bc:not(.is-ready) .face{position:absolute}

/* ---------- finishes (Balatro editions) ---------- */
.bc[data-ed="foil"] .face{filter:saturate(.45) brightness(1.04) contrast(1.05)}
.bc[data-ed="foil"] .bc-shine{opacity:.8;mix-blend-mode:color-dodge;
  background:repeating-linear-gradient(-55deg,transparent 0 6%,rgba(120,180,255,.55) 9%,rgba(255,255,255,.75) 10.5%,rgba(120,180,255,.55) 12%,transparent 15% 21%),
             linear-gradient(135deg,rgba(80,130,255,.45),rgba(200,230,255,.15));
  background-size:260% 260%,100% 100%;background-position:var(--mx) var(--my),0 0}
.bc[data-ed="holo"] .bc-shine{opacity:.6;mix-blend-mode:color-dodge;
  background:repeating-linear-gradient(0deg,transparent 0 3px,rgba(255,255,255,.22) 3px 4px),
             repeating-linear-gradient(90deg,transparent 0 3px,rgba(255,255,255,.22) 3px 4px),
             repeating-linear-gradient(115deg,#ff5f6d 0%,#ffc371 7%,#f9f871 14%,#56f0a6 21%,#4fc3ff 28%,#b57bff 35%,#ff5f6d 42%);
  background-size:auto,auto,300% 300%;background-position:0 0,0 0,var(--mx) var(--my)}
.bc[data-ed="poly"] .face{filter:hue-rotate(var(--hue)) saturate(1.35)}
.bc[data-ed="poly"] .bc-shine{opacity:.55;mix-blend-mode:soft-light;
  background:conic-gradient(from var(--hue) at var(--mx) var(--my),#ff3366,#ffcc33,#33ff99,#33ccff,#9933ff,#ff3366)}
.bc[data-ed="neg"] .face{filter:invert(.92) saturate(1.3)}
.bc[data-ed="neg"] .bc-shine{opacity:.6;mix-blend-mode:screen;
  background:radial-gradient(circle at var(--mx) var(--my),rgba(170,100,255,.5),transparent 60%),linear-gradient(160deg,rgba(60,20,110,.55),transparent 70%)}

/* ---------- playing-card face ---------- */
.face--play{background:var(--card);border:2px solid var(--card-edge);box-shadow:inset 0 0 0 3px var(--card),inset 0 0 0 4px rgba(46,61,90,.12);color:var(--suit-dark)}
.face--play.is-red{color:var(--suit-red)}
.corner{position:absolute;display:flex;flex-direction:column;align-items:center;line-height:.9;font-weight:700}
.corner b{font-size:17cqw}
.corner i{font-style:normal;font-size:13cqw}
.corner.tl{top:6cqw;left:7cqw}
.corner.br{bottom:6cqw;right:7cqw;rotate:180deg}
.pip{position:absolute;inset:0 0 14% 0;display:grid;place-items:center;font-size:46cqw;line-height:1}
/* label sits left so it stays readable when the next card in a hand overlaps the right side */
.flabel{position:absolute;left:8cqw;bottom:9cqw;font-weight:700;font-size:11.5cqw;line-height:1;color:var(--suit-dark);white-space:nowrap}

/* ---------- joker face (projects, games) ---------- */
.face--joker{background:var(--bgc,#3b5257);border:3px solid rgba(0,0,0,.35);box-shadow:inset 0 0 0 3px rgba(255,255,255,.18)}
.face--joker::before{content:"";position:absolute;inset:6%;border-radius:6px;background:
  radial-gradient(circle at 50% 40%,rgba(255,255,255,.22),transparent 60%),
  repeating-linear-gradient(45deg,rgba(0,0,0,.06) 0 4px,transparent 4px 8px)}
.face--joker .art{position:absolute;inset:6% 6% 24%;width:88%;height:70%;object-fit:cover;border-radius:6px;image-rendering:auto}
.sprite{position:absolute;left:50%;top:40%;width:66%;translate:-50% -50%;image-rendering:pixelated;filter:drop-shadow(0 3cqw 0 rgba(0,0,0,.3))}
.jname{position:absolute;left:6%;right:6%;bottom:6%;padding:3cqw 2cqw;border-radius:5px;background:rgba(0,0,0,.45);text-align:center;font-weight:700;font-size:10.5cqw;line-height:1.05;color:#fff;text-shadow:0 1px 0 rgba(0,0,0,.6)}
.face--slot{background:rgba(0,0,0,.25);border:3px dashed rgba(255,255,255,.18);display:grid;place-items:center;text-align:center;color:var(--muted);font-size:10cqw;padding:10cqw;line-height:1.2}
.face--slot b{display:block;font-size:24cqw;color:rgba(255,255,255,.25);line-height:1}

/* ---------- ID card face: a horizontal "licence to play" (About page, home page), sized in cqw ---------- */
.bc.bc--id{aspect-ratio:86/54}
.face--id{background:linear-gradient(160deg,#f6f1e4 0%,#e9e2cf 100%);border:2px solid var(--card-edge);color:var(--suit-dark);overflow:hidden}
.face--id::before{content:"";position:absolute;inset:0;opacity:.5;pointer-events:none;
  background:repeating-linear-gradient(45deg,transparent 0 3cqw,rgba(30,155,240,.06) 3cqw 3.6cqw),repeating-linear-gradient(-45deg,transparent 0 3cqw,rgba(254,95,85,.05) 3cqw 3.6cqw)}
.id-head{position:absolute;left:0;right:0;top:0;height:12cqw;display:flex;align-items:center;justify-content:space-between;padding:0 4cqw;background:var(--blue);color:#fff;box-shadow:inset 0 -.8cqw 0 var(--blue-dk)}
.id-head b{font:400 4cqw/1 var(--label);letter-spacing:.04em}
.id-head span{font:400 2.6cqw/1.1 var(--label);text-align:right;opacity:.9}
.id-photo{position:absolute;left:4cqw;top:16cqw;width:24cqw;height:30cqw;border-radius:1.4cqw;background:#cfe6f5;border:.6cqw solid var(--suit-dark);display:grid;place-items:end center;overflow:hidden}
.id-photo i{display:block;width:100%;height:100%;padding:3cqw 2cqw 0}
.id-photo svg,.id-photo img{display:block;width:100%;height:100%;object-fit:cover}
.id-fields{position:absolute;left:32cqw;right:4cqw;top:15cqw;display:grid;grid-template-columns:1fr 1fr;gap:1.6cqw 3cqw}
.id-fields div{min-width:0}
.id-fields .wide{grid-column:1 / -1}
.id-fields i{display:block;font:normal 2.3cqw/1.2 var(--label);letter-spacing:.05em;color:#7a8296}
.id-fields em{display:block;font:normal 600 3.9cqw/1.15 var(--display);color:var(--suit-dark);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.id-fields .red{color:var(--suit-red)}
.id-sign{position:absolute;left:32cqw;bottom:6cqw;font:italic 600 6cqw/1 var(--display);color:#3557a8;rotate:-4deg}
.id-seal{position:absolute;right:4cqw;bottom:4cqw;width:12cqw;aspect-ratio:1;border-radius:50%;opacity:.75;mix-blend-mode:multiply;
  background:conic-gradient(from var(--hue),#ff5f6d,#ffc371,#f9f871,#56f0a6,#4fc3ff,#b57bff,#ff5f6d);box-shadow:inset 0 0 0 .8cqw rgba(255,255,255,.55)}
.id-strip{position:absolute;left:0;right:0;bottom:0;height:3.4cqw;background:var(--red);box-shadow:inset 0 .6cqw 0 var(--red-dk)}

/* ---------- tile face (plain UI as cards) ---------- */
.bc--tile{aspect-ratio:auto}
/* child selectors, so ordinary cards placed inside a tile keep their own layout */
.bc--tile > .bc-tilt{position:relative;inset:auto;border-radius:14px}
.bc--tile > .bc-shadow,.bc--tile::before{border-radius:14px}
.face--tile{position:relative;border-radius:14px;background:var(--slate);border:3px solid var(--edge);box-shadow:inset 0 0 0 2px var(--slate-hi);padding:20px 22px;display:flex;flex-direction:column;gap:8px;container-type:normal}
.bc--tile:not(.is-ready) .face--tile{position:relative}

/* ---------- hand ---------- */
.hand{position:relative;--cw:clamp(84px,21vw,132px);height:260px}
.hand .bc{position:absolute;left:0;top:0;width:var(--cw);touch-action:pan-y}
/* no-JS fallback: a plain row */
.hand:not(.is-ready){display:flex;gap:10px;height:auto;flex-wrap:wrap;justify-content:center}
.hand:not(.is-ready) .bc{position:relative}

/* ---------- card back (flipped cards, the intro deck, the page transition) ---------- */
:root{--back-bg:repeating-linear-gradient(45deg,transparent 0 9px,rgba(255,255,255,.13) 9px 11px),repeating-linear-gradient(-45deg,transparent 0 9px,rgba(255,255,255,.13) 9px 11px),var(--back)}
.card-back,.bc-back{background:var(--back-bg);box-shadow:inset 0 0 0 4px var(--card),inset 0 0 0 6px var(--back-dk)}
.card-back::after,.bc-back::after,.wipe::after{content:"";position:absolute;left:50%;top:50%;width:30%;aspect-ratio:1;translate:-50% -50%;rotate:45deg;border-radius:12%;background:var(--card);box-shadow:inset 0 0 0 5px var(--card),inset 0 0 0 7px var(--back),0 0 0 3px var(--back-dk),4px 4px 0 3px rgba(0,0,0,.25)}
.bc-back{position:absolute;inset:0;border-radius:inherit;opacity:0;pointer-events:none} /* links on the face stay clickable */
.bc-tilt.is-back .bc-back{opacity:1}

/* ---------- intro deck (home page) ---------- */
.intro{display:none}
.is-intro .intro{position:fixed;inset:0;z-index:30;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:clamp(22px,5vh,44px);padding:16px}
.is-dealt .hand{z-index:31} /* dealt cards fly above the deck */
.intro-title{font-weight:700;font-size:clamp(40px,9vw,92px);line-height:1;letter-spacing:.04em;text-shadow:0 5px 0 rgba(0,0,0,.5);transition:opacity .35s,translate .5s}
.intro-title span{color:var(--gold)}
.intro-hint{font-family:var(--label);font-size:12px;letter-spacing:.14em;color:var(--muted);animation:hint-blink 1.6s steps(2,jump-none) infinite;transition:opacity .25s}
.when-touch{display:none}
@media (hover:none){.when-mouse{display:none}.when-touch{display:inline}}
@keyframes hint-blink{50%{opacity:.35}}
.intro-skip{position:absolute;right:max(16px,env(safe-area-inset-right,0px));bottom:max(16px,env(safe-area-inset-bottom,0px));font:600 15px/1 var(--display);color:var(--muted);background:rgba(0,0,0,.35);border:0;border-radius:8px;padding:8px 12px;cursor:pointer}
.intro-skip:hover{color:var(--text)}
.deck{--dw:clamp(118px,30vw,168px);position:relative;width:var(--dw);aspect-ratio:71/95;padding:0;border:0;background:none;cursor:pointer;perspective:900px;-webkit-tap-highlight-color:transparent;transition:translate .5s cubic-bezier(.6,-.2,.8,.4),scale .5s,opacity .4s}
.deck:focus-visible{outline:3px solid var(--gold);outline-offset:10px;border-radius:var(--r)}
.deck-stack{position:absolute;inset:0;transform-style:preserve-3d;will-change:transform}
.deck-stack i{position:absolute;inset:0;border-radius:var(--r);background:#ebe4d0;border:1px solid #a99c7c;transform:translateZ(calc(var(--i) * 1.6px))}
.deck-stack i.card-back{border:0;background:var(--back-bg);transform:translateZ(calc(var(--i) * 1.6px + var(--lift,0) * 14px)) translateY(calc(var(--lift,0) * -10px)) rotateZ(calc(var(--lift,0) * -4deg))}
.deck-stack i.is-gone{visibility:hidden}
.deck-shadow{position:absolute;inset:0;border-radius:var(--r);background:rgba(0,0,0,.5);will-change:transform}
.is-dealt .intro-title{opacity:0;translate:0 -20px}
.is-dealt .intro-hint,.is-dealt .intro-skip{opacity:0;pointer-events:none}
.intro.is-leaving .deck{translate:0 50vh;scale:.6;opacity:0;pointer-events:none}

/* ---------- page transition: the clicked card's back grows to fill the screen ---------- */
/* It starts as an exact copy of the flipped card's back, diamond and border included, so the swap can't be seen;
   then the diamond fades and the border thins out while it grows, ending as the plain cover the next page starts with. */
.wipe{position:fixed;z-index:100;pointer-events:none;background:var(--back-bg);box-shadow:inset 0 0 0 4px var(--card),inset 0 0 0 6px var(--back-dk);border-radius:var(--r)}
.wipe::after{width:var(--ew);animation:wipe-emblem .24s .04s ease-in forwards}
@keyframes wipe-emblem{to{opacity:0;scale:.5}}

/* ---------- tooltip (Balatro info box) ---------- */
.card-tip{position:fixed;z-index:45;left:0;top:0;width:260px;max-width:calc(100vw - 32px);padding:8px;border-radius:12px;background:var(--tip-bg);border:3px solid var(--edge);box-shadow:0 6px 0 rgba(0,0,0,.45);pointer-events:none;animation:tip-pop .28s cubic-bezier(.3,1.6,.5,1)}
.tip-name{text-align:center;font-weight:700;font-size:20px;text-shadow:var(--shadow-text);padding:2px 0 6px}
.tip-body{background:var(--card);color:#3b4651;border-radius:7px;padding:9px 10px;font-size:15px;line-height:1.35;text-align:center}
.tip-body .chips{color:#fff;background:var(--blue);padding:0 5px;border-radius:4px}
.tip-body .mult{color:#fff;background:var(--red);padding:0 5px;border-radius:4px}
.tip-body .key{color:#1d7fc9;font-weight:600}
.tip-tags{display:flex;justify-content:center;gap:6px;flex-wrap:wrap;padding-top:8px}
.tip-meta{text-align:center;font-family:var(--label);font-size:10.5px;letter-spacing:.06em;color:var(--muted);padding-top:7px}
@keyframes tip-pop{from{transform:scale(.85);opacity:0}to{transform:scale(1);opacity:1}}