/* /games — the holographic trading cards (games-pages agent).
   Cards are art objects: they keep their dark card-stock colors in light mode too. */

.games-head { display: flex; align-items: center; justify-content: space-between; gap: 24px; }
.games-head-copy { min-width: 0; }
.games-head-pack { flex: none; width: clamp(96px, 12vw, 150px); transform: rotate(9deg); margin-right: clamp(0px, 3vw, 40px); filter: drop-shadow(0 10px 0 rgba(0, 0, 0, .18)); }
.games-head-pack svg { width: 100%; height: auto; }
.games-head-pack .pack-shine { animation: pack-shine 5s ease-in-out infinite; }
@keyframes pack-shine { 0%, 60% { transform: translateX(-30px); opacity: 0; } 75% { opacity: .28; } 100% { transform: translateX(110px); opacity: 0; } }
@media (max-width: 560px) { .games-head-pack { display: none; } }

/* ── filters ─────────────────────────────────────────────────────────────── */
.deck-bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 16px; margin-bottom: clamp(20px, 3vw, 34px); }
.filters { display: flex; flex-wrap: wrap; gap: 8px; }
.filter {
  display: inline-flex; align-items: center; gap: .5em; min-height: 44px; padding: .45em 1em;
  font: 600 1rem/1 var(--font-display); color: var(--fg); text-decoration: none;
  background: var(--panel); border: var(--stroke) solid var(--outline); border-radius: 99px;
  box-shadow: 0 4px 0 rgba(0, 0, 0, .25);
  transition: transform .25s var(--spring), background-color .2s, box-shadow .2s;
}
.filter:hover { color: var(--fg); transform: translateY(-2px) rotate(-1.5deg); }
.filter:active { transform: translateY(3px); box-shadow: 0 1px 0 rgba(0, 0, 0, .25); }
.filter[aria-current="true"] { background: var(--ember); color: var(--on-accent); }
.filter-n { display: inline-grid; place-items: center; min-width: 1.6em; height: 1.6em; padding: 0 .35em; border-radius: 99px; font-size: .78em; background: var(--outline); color: var(--cream); }
.filter[aria-current="true"] .filter-n { background: var(--cream); color: var(--outline); }
.tilt-phone svg { width: 1.2em; height: 1.2em; }
.tilt-phone[aria-pressed="true"] { --btn-fg: var(--outline); background: var(--steam); border-color: var(--outline); }
.tilt-phone[aria-pressed="true"] svg { animation: phone-rock 1.4s ease-in-out infinite; }
@keyframes phone-rock { 0%, 100% { transform: rotate(-12deg); } 50% { transform: rotate(12deg); } }

/* ── the deck ────────────────────────────────────────────────────────────── */
.deck {
  list-style: none; margin: 0; padding: 0;
  display: grid; gap: clamp(20px, 2.6vw, 32px);
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 250px), 1fr));
  align-items: stretch;
}
.deck-empty { display: flex; align-items: center; gap: 14px; margin: 8px 0 0; padding: 18px 22px; border-radius: var(--r-lg); border: 3px dashed var(--line); color: var(--fg-muted); font-weight: 700; }
.deck-empty svg { width: 48px; height: 48px; flex: none; }

/* ── one card ────────────────────────────────────────────────────────────── */
.holo {
  --rx: 0deg; --ry: 0deg; --mx: 50%; --my: 50%; --hyp: 0; --lift: 0;
  --c: #FF6B1A; --c2: #FFC23D;
  position: relative; width: 100%; max-width: 340px; justify-self: center;
  perspective: 900px; touch-action: pan-y;
}
.holo.is-in { animation: card-in .55s var(--spring) both; }
@keyframes card-in { 0% { transform: translateY(24px) scale(.9); opacity: 0; } 100% { transform: none; opacity: 1; } }
.holo-tilt {
  height: 100%; transform-style: preserve-3d;
  transform: translateY(calc(var(--lift) * -8px)) rotateX(var(--rx)) rotateY(var(--ry)) scale(calc(1 + var(--lift) * .03));
}
.holo-flip { display: grid; height: 100%; transform-style: preserve-3d; transition: transform .75s var(--spring); }
.holo.is-flipped .holo-flip { transform: rotateY(180deg); }

.face {
  grid-area: 1 / 1; position: relative; overflow: hidden; isolation: isolate;
  -webkit-backface-visibility: hidden; backface-visibility: hidden;
  padding: 9px; border-radius: 22px; border: 4px solid var(--outline);
  background: var(--c); color: #FFF3DF;
  box-shadow: 0 8px 0 rgba(0, 0, 0, .3), 0 calc(16px + var(--lift) * 14px) 30px rgba(8, 10, 20, calc(.28 + var(--lift) * .15));
}
.face-back { transform: rotateY(180deg); }
.face::before { /* a bevel on the frame */
  content: ''; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
  box-shadow: inset 0 3px 0 rgba(255, 255, 255, .35), inset 0 -4px 0 rgba(0, 0, 0, .22);
}

/* front */
.card-frame {
  position: relative; height: 100%; display: flex; flex-direction: column; gap: 9px; padding: 9px;
  background: linear-gradient(180deg, #252C45 0%, #1A2036 100%);
  border: 3px solid var(--outline); border-radius: 14px;
}
.card-top {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  padding: 6px 8px 6px 12px; border-radius: 10px; border: 3px solid var(--outline);
  background: linear-gradient(180deg, color-mix(in srgb, var(--c) 42%, #1B2238), color-mix(in srgb, var(--c) 22%, #151B2E));
}
.card-name { margin: 0; font-size: 1.32rem; font-weight: 700; color: #FFF3DF; line-height: 1.05; text-shadow: 0 2px 0 rgba(0, 0, 0, .45); }
.card-gem { flex: none; width: 18px; height: 18px; border-radius: 4px; transform: rotate(45deg); border: 3px solid var(--outline); background: var(--gem, #FFC23D); box-shadow: inset 3px 3px 0 rgba(255, 255, 255, .45); margin-right: 4px; }
.gem-out { --gem: #3BD16F; } .gem-soon { --gem: #FF6B1A; } .gem-proto { --gem: #4FD1C5; }
.gem-ultra { background: conic-gradient(from 20deg, #FF5ACD, #FFC23D, #3BD16F, #4FD1C5, #7C5CFF, #FF5ACD); }

.card-art { position: relative; aspect-ratio: 4 / 3; border-radius: 10px; border: 3px solid var(--outline); overflow: hidden; background: #0B0E1A; }
.card-art .keyart { width: 100%; height: 100%; }
.card-art-foil, .holo-foil, .holo-glare { position: absolute; inset: 0; pointer-events: none; border-radius: inherit; }
.card-art-foil {
  background:
    repeating-linear-gradient(118deg, #ff7a7a 0%, #ffd66b 5%, #8dff9a 10%, #6bd9ff 15%, #b48cff 20%, #ff7ad9 25%, #ff7a7a 30%);
  background-size: 400% 400%;
  background-position: var(--mx) var(--my);
  mix-blend-mode: color-dodge;
  opacity: calc(.08 + var(--hyp) * .24);
}
.card-type { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px 8px; margin: 0; font: 600 .8rem/1 var(--font-display); letter-spacing: .02em; }
.rarity {
  display: inline-flex; align-items: center; gap: .45em; padding: .38em .7em .38em .5em; border-radius: 99px;
  background: #0D1120; color: #FFF3DF; text-transform: uppercase; letter-spacing: .06em; font-size: .7rem; white-space: nowrap;
}
.rarity::before { content: ''; width: .8em; height: .8em; border-radius: 2px; transform: rotate(45deg); background: var(--gem, #FFC23D); box-shadow: 0 0 8px var(--gem, #FFC23D); }
.rarity-out { --gem: #3BD16F; } .rarity-soon { --gem: #FF8A3D; } .rarity-proto { --gem: #4FD1C5; }
.rarity-ultra { --gem: #FF5ACD; background: linear-gradient(90deg, #3A1450, #14304A); }
.card-genre { color: #B7B9CC; text-align: right; margin-left: auto; white-space: nowrap; }
.card-text { flex: 1; margin: 0; padding: 8px 10px; border-radius: 9px; background: rgba(255, 255, 255, .05); border: 2px solid rgba(255, 255, 255, .06); font-size: .92rem; line-height: 1.38; color: #E4E1EE; }
.card-foot { display: flex; align-items: center; justify-content: space-between; gap: 8px; font: 600 .68rem/1 var(--font-display); letter-spacing: .1em; text-transform: uppercase; color: #9A9DB3; }
.card-foot .draft-tag { font-size: .6rem; }

/* the foil: a rainbow sheen + sparkle dots that slide with the angle, and a glare where the light hits */
.holo-foil {
  z-index: 2;
  background:
    radial-gradient(circle at 20% 30%, rgba(255, 255, 255, .9) 0 1px, transparent 1.6px) 0 0 / 23px 29px,
    radial-gradient(circle at 70% 60%, rgba(255, 255, 255, .8) 0 1px, transparent 1.5px) 0 0 / 31px 37px,
    repeating-linear-gradient(118deg, #ff6b6b 0%, #ffd66b 6%, #7dff8a 12%, #5ad2ff 18%, #a77bff 24%, #ff6bd0 30%, #ff6b6b 36%);
  background-size: 23px 29px, 31px 37px, 300% 300%;
  background-position: calc(var(--mx) * .4) calc(var(--my) * .4), calc(var(--mx) * -.3) calc(var(--my) * .3), var(--mx) var(--my);
  mix-blend-mode: color-dodge;
  opacity: calc(.08 + var(--hyp) * .26);
}
.holo-glare {
  z-index: 2;
  background: radial-gradient(farthest-corner circle at var(--mx) var(--my), rgba(255, 255, 255, .7) 0%, rgba(255, 255, 255, .18) 22%, rgba(0, 0, 0, .28) 95%);
  mix-blend-mode: overlay;
  opacity: calc(.18 + var(--hyp) * .6);
}

/* the whole front flips the card; without JS it is a link to the game page */
.holo-hit, .holo-nojs { position: absolute; inset: 0; z-index: 4; border: 0; padding: 0; margin: 0; background: transparent; border-radius: 18px; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.holo-hit:focus-visible, .holo-nojs:focus-visible { outline: 4px solid var(--molten); outline-offset: -8px; box-shadow: none; }
.holo-nojs { display: none; }
html.no-js .holo-nojs { display: block; }
html.no-js .holo-hit { display: none; }
.holo:focus-within { --lift: 1; }

/* back */
.back-frame {
  position: relative; height: 100%; display: flex; flex-direction: column; gap: 10px; padding: 12px 14px 14px;
  border: 3px solid var(--outline); border-radius: 14px; color: #FFF3DF;
  background:
    radial-gradient(circle at 50% 38%, color-mix(in srgb, var(--c) 35%, transparent), transparent 60%),
    repeating-linear-gradient(45deg, rgba(255, 255, 255, .035) 0 10px, transparent 10px 20px),
    linear-gradient(180deg, #232A40, #171C2F);
}
.back-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.back-name { margin: 0; font-size: 1.3rem; color: var(--c2); text-shadow: 0 2px 0 rgba(0, 0, 0, .5); }
.face-back .back-name { color: color-mix(in srgb, var(--c) 45%, #FFF3DF); }
.holo-back { flex: none; width: 38px; height: 38px; display: grid; place-items: center; border-radius: 50%; border: 3px solid var(--outline); background: #FFF3DF; color: var(--outline); transition: transform .3s var(--spring); }
.holo-back:hover { transform: rotate(-160deg) scale(1.08); }
.holo-back svg { width: 20px; height: 20px; }
.back-stats { margin: 0; padding: 8px 10px; border-radius: 10px; background: rgba(13, 17, 32, .55); border: 2px solid rgba(255, 255, 255, .06); }
.back-stats div { display: grid; grid-template-columns: 4.2em 1fr; gap: 6px; padding: 4px 0; }
.back-stats div + div { border-top: 2px dashed rgba(255, 255, 255, .12); }
.back-stats dt { font: 700 .66rem/1.8 var(--font-display); text-transform: uppercase; letter-spacing: .12em; color: #9A9DB3; }
.back-stats dd { margin: 0; font-weight: 800; font-size: .84rem; line-height: 1.35; }
.back-feats { list-style: none; margin: 0; padding: 0; display: grid; gap: 7px; font-size: .88rem; line-height: 1.32; }
.back-feats li { position: relative; padding-left: 20px; }
.back-feats li::before { content: ''; position: absolute; left: 2px; top: .35em; width: 9px; height: 9px; border-radius: 2px; transform: rotate(45deg); background: var(--c); border: 2px solid var(--outline); }
.back-go { margin-top: auto; align-self: stretch; }
.face-back .holo-glare { opacity: calc(.1 + var(--hyp) * .35); }

/* ── the Holo Hunter ghost slot and bonus card ──────────────────────────── */
.holo-ghost { width: 100%; max-width: 340px; justify-self: center; min-height: 380px; }
.ghost-card {
  height: 100%; min-height: inherit; display: grid; place-items: center; align-content: center; gap: 18px;
  border: 4px dashed color-mix(in srgb, var(--fg-muted) 55%, transparent); border-radius: 22px;
  background: repeating-linear-gradient(45deg, color-mix(in srgb, var(--fg) 4%, transparent) 0 12px, transparent 12px 24px);
  color: var(--fg-muted);
}
.ghost-q { font: 700 5rem/1 var(--font-display); opacity: .5; animation: ghost-bob 3s ease-in-out infinite; }
@keyframes ghost-bob { 0%, 100% { transform: translateY(0) rotate(-4deg); } 50% { transform: translateY(-8px) rotate(4deg); } }
.ghost-pips { display: flex; gap: 12px; }
.ghost-pips i { width: 18px; height: 18px; border-radius: 4px; transform: rotate(45deg); border: 3px solid color-mix(in srgb, var(--fg-muted) 70%, transparent); transition: all .4s var(--spring); }
.ghost-pips i.on { background: var(--c); border-color: var(--outline); box-shadow: 0 0 12px var(--c); transform: rotate(45deg) scale(1.25); }
.holo-ghost.is-going { animation: ghost-go .5s var(--ease-out) both; }
@keyframes ghost-go { to { transform: rotateY(90deg) scale(.8); opacity: 0; } }
.holo-bonus.is-new { animation: bonus-in 1.1s var(--spring) both; }
@keyframes bonus-in { 0% { transform: rotateY(-90deg) scale(.7); opacity: 0; } 60% { opacity: 1; } 100% { transform: none; opacity: 1; } }
.holo-bonus .face-front { background: conic-gradient(from 200deg at 50% 50%, #FFC23D, #FF5ACD, #7C5CFF, #4FD1C5, #3BD16F, #FFC23D); }
.holo-bonus .face-back { background: linear-gradient(135deg, #FF5ACD, #7C5CFF 50%, #4FD1C5); }
.holo-bonus .holo-foil { opacity: calc(.2 + var(--hyp) * .35); }
.holo-bonus .back-name { color: #FFC23D; }

/* ── after the deck ──────────────────────────────────────────────────────── */
.games-after { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr)); gap: clamp(16px, 2.4vw, 28px); padding-block: clamp(48px, 7vw, 96px); }
.after-card { position: relative; padding: clamp(20px, 3vw, 32px); border-radius: var(--r-lg); border: var(--stroke) solid var(--outline); background: var(--panel); box-shadow: 0 6px 0 rgba(0, 0, 0, .25); overflow: hidden; }
.after-card h2 { font-size: var(--step-2); }
.after-card p { color: var(--fg-muted); max-width: 40ch; }
.after-post::after, .after-play::after { content: ''; position: absolute; right: -30px; bottom: -30px; width: 120px; height: 120px; border-radius: 50%; opacity: .18; }
.after-post::after { background: var(--molten); }
.after-play::after { background: var(--steam); }

/* ── calm mode: no tilt, a still foil ───────────────────────────────────── */
html.calm .holo-tilt { transform: none !important; }
html.calm .holo { --mx: 32% !important; --my: 24% !important; --hyp: .45 !important; }
html.calm .holo.is-flipped .holo-flip { transform: none; }
html.calm .face-back { transform: none; opacity: 0; } /* a quick swap instead of a flip; inert keeps the hidden face out of reach */
html.calm .holo.is-flipped .face-back { opacity: 1; }
html.calm .holo.is-flipped .face-front { opacity: 0; }
html.calm .ghost-q, html.calm .games-head-pack .pack-shine, html.calm .tilt-phone svg { animation: none !important; }

@media (max-width: 560px) {
  .deck { grid-template-columns: 1fr; }
  .holo, .holo-ghost { max-width: 330px; }
  .holo-ghost { min-height: 240px; }
  .filter { font-size: .92rem; padding: .45em .8em; }
}