/* The card itself: both faces are laid out at 750×1050 and scaled to fit their stage. Shared by the editor and the landing page. */
@font-face { font-family: 'Pokemon Solid'; src: url('../assets/fonts/pokemon-solid.ttf') format('truetype'); font-display: block; }

/* ---------- stage ---------- */
/* --scale is set by the page; the pointer vars (--px … --by) are written by the tilt spring in card.js */
.stage {
  --scale: .5;
  --px: 50%; --py: 50%; --pfc: 0; --pft: .5; --pfl: .5; --co: 0; --rx: 0deg; --ry: 0deg; --bx: 50%; --by: 50%;
  width: calc(750px * var(--scale)); height: calc(1050px * var(--scale)); flex: none; position: relative;
  /* no preserve-3d: the card is flat, and in a 3D context Chrome misses pointer hits on a zoomed photo inside the classic frame */
  transform: perspective(1400px) rotateY(var(--rx)) rotateX(var(--ry));
}
.card { position: absolute; left: 0; top: 0; width: 750px; height: 1050px; border-radius: 36px; overflow: hidden; transform: scale(var(--scale)); transform-origin: top left; }

/* ---------- card back ---------- */
.card-back { background: #102a6b; box-shadow: 0 20px 50px rgba(0,0,0,.28); }
.back-art { position: absolute; inset: 22px; border-radius: 22px; overflow: hidden; background: #102a6b; }
.back-art > div { position: absolute; inset: -7%; background: url('../assets/card-back.png') center / 100% 100% no-repeat; }
.back-arcs { position: absolute; inset: 0; width: 750px; height: 1050px; font-family: 'Pokemon Solid', 'Lilita One', sans-serif; letter-spacing: .06em; }
.back-arcs text { text-anchor: middle; stroke-linejoin: round; }
.arc-outer { fill: none; stroke: #0b1f4d; stroke-width: 34; stroke-linecap: round; }
.arc-mid { fill: none; stroke: #2a63c9; stroke-width: 28; stroke-linecap: round; }
.arc-fill { fill: #f7c948; stroke: #0b1f4d; stroke-width: 5; paint-order: stroke; }
/* the QR canvas is transparent between the dots so the card art shows through; it includes a one-module margin */
.qr-slot { position: absolute; left: 50%; top: 50%; width: 380px; height: 380px; transform: translate(-50%, -50%); display: flex; align-items: center; justify-content: center; }
.qr { width: 380px; height: 380px; background: center / contain no-repeat; }

/* ---------- card front ---------- */
.card-front { --card-ink: #fff; box-shadow: 0 20px 50px rgba(0,0,0,.28), inset 0 0 0 1px rgba(255,255,255,.5); font-family: 'Gill Sans', 'Gill Sans MT', Cabin, sans-serif; color: var(--card-ink); }
.card-front[data-layout=classic] { --card-ink: #1c1a17; }
.card-front[data-border=silver] { background: linear-gradient(135deg, #f6f6f6, #b7bac0 38%, #e9ebee 60%, #9a9ea6); }
.card-front[data-border=gold] { background: linear-gradient(135deg, #f9e9ad, #c9a23a 38%, #f4de94 60%, #a67c1c); }
.card-front[data-border=black] { background: linear-gradient(135deg, #3c3c41, #101012 50%, #2a2a2e); }
.card-inner { position: absolute; inset: 22px; border-radius: 22px; overflow: hidden; background: #17181c; }

.photo-box { position: absolute; inset: 0; overflow: hidden; }
[data-layout=classic] .photo-box { inset: auto; left: 44px; right: 44px; top: 110px; height: 430px; border: 5px solid #23221f; box-shadow: 0 3px 8px rgba(0,0,0,.35), inset 0 0 0 2px rgba(255,255,255,.4); background: #17181c; z-index: 1; }
.photo { position: absolute; left: 0; top: 0; width: 100%; height: 100%; background: center / contain no-repeat; transform-origin: center; cursor: grab; touch-action: none; }
.photo-empty { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; cursor: pointer; background: repeating-linear-gradient(135deg, #2a2c33 0 14px, #232529 14px 28px); }
.photo-empty > div { font: 16px/1.5 ui-monospace, Menlo, monospace; color: #9aa0ab; text-align: center; padding: 24px; border: 1px dashed #4a4f5a; border-radius: 10px; background: rgba(23,24,28,.7); }

.shade { position: absolute; inset: 0; pointer-events: none; background: linear-gradient(180deg, rgba(0,0,0,.55) 0%, rgba(0,0,0,0) 18%, rgba(0,0,0,0) 48%, rgba(0,0,0,.72) 72%, rgba(0,0,0,.85) 100%); }
/* classic body: soft highlight over a cloudy texture tinted with the element colour (--tint, set from card.js) */
[data-layout=classic] .shade { background-image: radial-gradient(ellipse 70% 45% at 50% 62%, rgba(255,255,255,.45), rgba(255,255,255,0) 70%), url('../assets/holo/body-texture.png'), linear-gradient(var(--tint), var(--tint)); background-size: 100% 100%, 100% 100%, 100% 100%; background-blend-mode: normal, overlay, normal; }
.info-strip { display: none; position: absolute; left: 96px; right: 96px; top: 548px; padding: 5px 14px; background: linear-gradient(#f4f2ec, #d8d5cc); border: 1px solid rgba(0,0,0,.45); border-radius: 4px; font-size: 15px; letter-spacing: .02em; text-align: center; color: #1c1a17; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; box-shadow: 0 1px 2px rgba(0,0,0,.3); }
[data-layout=classic] .info-strip { display: block; }

/* full art: white type with a heavy black outline over the photo */
.card-head { position: absolute; left: 38px; right: 38px; top: 34px; display: flex; align-items: center; gap: 14px; }
.stage-badge { flex: none; padding: 3px 18px 3px 12px; background: linear-gradient(#fff, #d6d8dc); border: 1px solid rgba(0,0,0,.35); border-radius: 4px 16px 16px 4px; font: italic 700 17px/1.1 Cabin, 'Gill Sans', sans-serif; letter-spacing: .06em; color: #fff; -webkit-text-stroke: 3.5px #0d0f14; paint-order: stroke fill; text-transform: uppercase; box-shadow: 0 1px 2px rgba(0,0,0,.3); }
.card-name, .card-hp, .attack-name, .attack-dmg { font-family: 'Lilita One', Cabin, sans-serif; font-weight: 400; color: var(--card-ink); -webkit-text-stroke: 7px #0d0f14; paint-order: stroke fill; text-shadow: 0 3px 0 rgba(0,0,0,.6); }
.card-name { flex: 1 1 auto; min-width: 0; font-size: 50px; line-height: 1.2; letter-spacing: -0.01em; white-space: nowrap; overflow: visible; }
.card-hp { flex: none; font-size: 50px; line-height: 1; display: flex; align-items: baseline; }
.hp-label { font-size: 24px; letter-spacing: .04em; margin-right: 6px; }
.card-type { flex: none; display: flex; filter: drop-shadow(0 2px 3px rgba(0,0,0,.5)); }

.card-body { position: absolute; left: 0; right: 0; bottom: 70px; display: flex; flex-direction: column; gap: 18px; color: var(--card-ink); }
.card-attacks { display: flex; flex-direction: column; gap: 26px; padding: 0 34px; }
.card-attacks.dense { gap: 16px; }
.card-attack { display: flex; flex-direction: column; gap: 4px; }
.attack-head { display: flex; align-items: center; gap: 14px; }
.attack-icon { flex: none; display: flex; filter: drop-shadow(0 1px 2px rgba(0,0,0,.4)); }
.attack-name { flex: 1 1 auto; min-width: 0; font-size: 40px; line-height: 1.2; white-space: nowrap; overflow: visible; -webkit-text-stroke-width: 6px; text-align: center; }
.attack-dmg { flex: none; font-size: 42px; line-height: 1.2; min-width: 70px; text-align: right; -webkit-text-stroke-width: 6px; }
.dense .attack-name { font-size: 36px; }
.attack-text { font-size: 23px; line-height: 1.3; text-wrap: pretty; white-space: pre-wrap; font-weight: 600; }
.dense .attack-text { font-size: 21px; }
.attack-text, .card-stats, .card-foot { color: #fff; -webkit-text-stroke: 4px #0d0f14; paint-order: stroke fill; text-shadow: 0 1px 0 rgba(0,0,0,.6); }

.card-stats { display: flex; justify-content: space-between; align-items: center; margin: 0 34px; padding: 8px 0 0; font-weight: 600; }
.stat { display: flex; align-items: center; gap: 8px; }
.stat-label { font-size: 14px; letter-spacing: .06em; text-transform: uppercase; opacity: .85; }
.stat-icon { display: contents; }
.stat-mod { font-size: 20px; font-weight: 600; }
.retreat { display: flex; gap: 3px; }

.card-foot { position: absolute; left: 34px; right: 34px; bottom: 16px; display: flex; justify-content: space-between; align-items: center; gap: 16px; font-size: 16px; font-weight: 600; }
.foot-left { display: flex; align-items: center; gap: 12px; flex: none; }
.promo { width: 44px; height: 44px; display: block; filter: drop-shadow(0 1px 2px rgba(0,0,0,.6)); }
.rarity { font-size: 18px; letter-spacing: .1em; font-weight: 700; }
.set-no { font-size: 15px; }
.foot-right { font-size: 19px; text-align: right; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.energy { flex: none; display: block; }

/* classic framed: dark type straight on the tinted body, stats in pills */
[data-layout=classic] :is(.card-name, .card-hp, .attack-name, .attack-dmg) { font-family: inherit; -webkit-text-stroke: 0; paint-order: normal; text-shadow: none; }
[data-layout=classic] :is(.card-name, .card-hp, .attack-dmg) { font-weight: 700; }
[data-layout=classic] .attack-name { font-weight: 600; text-align: start; }
[data-layout=classic] .card-body { top: 600px; justify-content: space-between; gap: 14px; }
[data-layout=classic] .attack-text { font-size: 21px; font-weight: 400; padding-left: 2px; opacity: .95; }
[data-layout=classic] .dense .attack-text { font-size: 19px; }
[data-layout=classic] :is(.attack-text, .card-stats, .card-foot) { color: var(--card-ink); -webkit-text-stroke: 0; paint-order: normal; text-shadow: none; }
[data-layout=classic] .card-stats { padding: 0; font-weight: 400; }
[data-layout=classic] .stat { padding: 5px 14px; background: linear-gradient(#fff, #e2e0d9); border: 1px solid rgba(0,0,0,.4); border-radius: 999px; box-shadow: 0 1px 2px rgba(0,0,0,.25); min-height: 28px; }
[data-layout=classic] .card-foot { bottom: 22px; font-weight: 400; }