/* /games — each game is a dark panel (candy icon tile, name, one line, white Play pill) with its card stack
   fanned out in the corner and clipped by the panel, the way a hand of cards lies on a table. */
section.block.gal-head { position: relative; z-index: 20; }
.gal-tools { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 28px; }
.snd-btn { display: inline-flex; align-items: center; gap: 9px; font: 400 14px/1 var(--body); color: var(--ink); background: var(--ground); border: 1px solid var(--hair); border-radius: 999px; padding: 10px 15px; cursor: pointer; }
.snd-btn:hover { border-color: var(--muted); }
.snd-btn svg { width: 17px; height: 17px; }
.snd-btn .x { display: none; } .snd-btn.off .w { display: none; } .snd-btn.off .x { display: inline; }
.snd-btn.off .lbl { color: var(--muted); }
.gal-pack .snd-btn .pi svg { width: 17px; height: 17px; display: block; }
.gal-pack .snd-btn .pc { opacity: .5; font-size: 11px; margin-left: 2px; }
.gal-pack .g-packmenu { left: 0; right: auto; }

.gallery { position: relative; z-index: 1; background: var(--ground); padding: 0 var(--gutter) clamp(56px, 8vw, 96px); display: grid; gap: clamp(18px, 2.4vw, 28px); max-width: calc(1120px + 2 * var(--gutter)); margin: 0 auto; }

/* ---- the panel ---- */
.gx {
  --panel: #111114; --panel-2: #1b1c21; --on: #f4f5f0; --sub: #a3a6ae;
  position: relative; overflow: hidden; isolation: isolate; scroll-margin-top: 80px;
  min-height: clamp(420px, 44vw, 500px); border-radius: clamp(28px, 3.4vw, 40px);
  background: radial-gradient(120% 90% at 0% 0%, var(--panel-2), var(--panel) 60%);
  color: var(--on); box-shadow: 0 30px 60px -40px rgba(0,0,0,.55);
  padding: clamp(26px, 3.6vw, 44px);
}
/* dark mode: dark panels, as before */
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) body:not([data-mode="light"]) .gx { --panel: #121317; --panel-2: #1e2026; --sub: #a3a6ae; box-shadow: inset 0 0 0 1px rgba(255,255,255,.06); } }
:root[data-theme="dark"] body:not([data-mode="light"]) .gx, body[data-mode="dark"] .gx { --panel: #121317; --panel-2: #1e2026; --sub: #a3a6ae; box-shadow: inset 0 0 0 1px rgba(255,255,255,.06); }
.gx-text { position: relative; z-index: 2; display: grid; gap: 14px; max-width: min(24rem, 46%); }
.gx-tile {
  width: 64px; height: 64px; border-radius: 20px; display: grid; place-items: center;
  background: var(--k0); color: var(--glyph);
  box-shadow: inset 0 -7px 12px rgba(0,0,0,.14), inset 0 6px 10px rgba(255,255,255,.45), 0 10px 22px -10px var(--k0);
}
.gx-tile svg { width: 34px; height: 34px; }
.gx-tile .gic-line { stroke-width: 2.4px; }
.gx-tile .mk { width: 8px !important; height: 14px !important; background: currentColor; }
.gx-count .gx-tile { display: flex; align-items: center; justify-content: center; gap: 2px; }
.gx-count .gx-tile .mk:nth-child(2) { width: 10px !important; height: 18px !important; }
.gx-count .gx-tile .mk:nth-child(3) { width: 12px !important; height: 21px !important; }
.gx-tile .gic-color { width: 44px; height: 32px; }
.gx-title { margin: 6px 0 0; font-family: var(--display); font-weight: 500; font-size: clamp(34px, 4.2vw, 46px); line-height: 1; letter-spacing: -.035em; max-width: none; color: var(--on); text-transform: lowercase; }
.gx-tag { color: var(--sub); font-size: clamp(16px, 1.7vw, 19px); line-height: 1.4; text-wrap: balance; }
.gx-best { font-size: 13px; color: var(--sub); opacity: .8; }
.gx-actions { position: relative; z-index: 2; margin-top: 26px; }
.gx-play { display: inline-flex; align-items: center; gap: 10px; min-height: 52px; padding: 0 22px 0 24px; border-radius: 999px;
  background: #fff; color: #111114; font: 500 17px/1 var(--body); text-decoration: none; text-transform: lowercase;
  box-shadow: 0 10px 24px -12px rgba(0,0,0,.5); transition: transform .25s cubic-bezier(.3,1.5,.5,1); }
.gx-play:hover { transform: translateY(-2px); }
.gx-play .gx-arrow { transition: transform .25s; } .gx-play:hover .gx-arrow { transform: translateX(3px); }
.gx-play:focus-visible { outline: 2px solid #fff; outline-offset: 4px; }
.gx-no { position: absolute; z-index: 1; right: clamp(22px, 3vw, 38px); top: clamp(20px, 2.6vw, 32px); font: 600 12px/1 var(--body); letter-spacing: .18em; color: var(--sub); opacity: .6; }

/* ---- the stack, in the corner of the panel ---- */
.gx .stack {
  /* a fan like cards dropped on a table (read by card-stack.js as well) */
  --p0x: 0; --p0y: 0; --p0r: -4; --p0s: 1;
  --p1x: 78; --p1y: -26; --p1r: 3; --p1s: .955;
  --p2x: 150; --p2y: -48; --p2r: 9; --p2s: .91;
  position: absolute; z-index: 1; width: clamp(240px, 24vw, 290px); aspect-ratio: 4 / 5;
  right: clamp(150px, 17vw, 210px); bottom: calc(-1 * clamp(40px, 5vw, 70px)); margin: 0;
  --dk-ground: #111114; --dk-ink: #f4f5f0; --blend: multiply; --dim-a: .1;
}
.stack-cards { position: absolute; inset: 0; transform: perspective(1100px) rotateX(calc(var(--ty, 0) * -3deg)) rotateY(calc(var(--tx, 0) * 4deg)); transition: transform .5s cubic-bezier(.2,.8,.2,1); }
.stack-hit { position: absolute; z-index: 10; inset: -30px -10px -10px -10px; border: 0; padding: 0; margin: 0; background: transparent; border-radius: 30px; cursor: grab; touch-action: pan-y; -webkit-tap-highlight-color: transparent; -webkit-user-select: none; user-select: none; }
.stack.pressed .stack-hit { cursor: grabbing; }
.stack-hit:focus-visible { outline: 2px solid #fff; outline-offset: 4px; }
.sr { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* ---- cards: flat candy colours, each card of a game its own ---- */
.gc {
  position: absolute; inset: 0; display: flex; flex-direction: column; padding: 16px 16px 18px; border-radius: 30px;
  background: var(--fill, #111114); color: var(--fg, #111114); overflow: hidden; transform-origin: 50% 60%; backface-visibility: hidden;
  box-shadow: 0 18px 40px -18px rgba(0,0,0,.55), inset 0 1px 0 rgba(255,255,255,.25);
}
.gc::after { content: ""; position: absolute; inset: 0; border-radius: inherit; background: #000; opacity: calc(var(--dim, 0) * var(--dim-a, .22)); pointer-events: none; }
.gc[data-pos="0"] { z-index: 3; transform: rotate(calc(var(--p0r) * 1deg)); }
.gc[data-pos="1"] { z-index: 2; transform: translate3d(calc(var(--p1x) * 1px), calc(var(--p1y) * 1px), 0) rotate(calc(var(--p1r) * 1deg)) scale(var(--p1s)); --dim: .5; }
.gc[data-pos="2"] { z-index: 1; transform: translate3d(calc(var(--p2x) * 1px), calc(var(--p2y) * 1px), 0) rotate(calc(var(--p2r) * 1deg)) scale(var(--p2s)); --dim: 1; }
.gc-0 { --fill: var(--k0); --fg: var(--f0); } .gc-1 { --fill: var(--k1); --fg: var(--f1); } .gc-2 { --fill: var(--k2); --fg: var(--f2); }
.gx.pre:not(.in) .stack { opacity: 0; }
.gx.pre .stack { transition: opacity .35s ease; }
.gc-ripple { position: absolute; z-index: 5; width: 180%; aspect-ratio: 1; border-radius: 50%; pointer-events: none; background: radial-gradient(circle, rgba(255,255,255,.4) 0 30%, transparent 62%); }
.gc-art { flex: 1; min-height: 0; display: grid; place-items: center; border-radius: 20px; background: color-mix(in srgb, #000 10%, transparent); overflow: hidden; }
.gc-svg { width: 100%; height: 100%; }
.gc-body { display: grid; gap: 5px; padding: 14px 4px 0; }
.gc-k { display: flex; align-items: center; gap: 10px; font-size: 11px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; opacity: .7; }
.gc-n { font-variant-numeric: tabular-nums; padding: 3px 7px; border: 1px solid color-mix(in srgb, var(--fg) 35%, transparent); border-radius: 999px; letter-spacing: .06em; }
.gc-h { font-family: var(--display); font-size: clamp(18px, 1.8vw, 21px); font-weight: 500; line-height: 1.16; letter-spacing: -.02em; text-wrap: balance; }
.gc-p { font-size: 13.5px; line-height: 1.42; opacity: .75; text-wrap: pretty; }
.gc-foot { display: flex; justify-content: space-between; align-items: center; padding: 10px 4px 0; font-size: 12px; opacity: .6; font-variant-numeric: tabular-nums; }
.gc-tap { display: inline-flex; gap: 6px; align-items: center; }
.gx .gc-svg .node, .gx .gc-svg .chip-bg { fill: var(--fill); }
.gx .gc-svg .fill-soft, .gx .gc-svg .pad-bg { fill: currentColor; opacity: .14; }

/* the candy palette: pink · coral red · blue · green · lime · lilac · mint (no yellow) */
/* each game: three clearly different colour families — never blue next to purple, pink next to red, green next to lime */
.gx-color { --k0: #ff4fa8; --f0: #fff; --k1: #0a7cff; --f1: #fff; --k2: #2ecc40; --f2: #04260a; --glyph: #fff; }
.gx-time  { --k0: #e8335f; --f0: #fff; --k1: #2fd6a6; --f1: #03291f; --k2: #8b5cff; --f2: #fff; --glyph: #fff; }
.gx-sound { --k0: #0a7cff; --f0: #fff; --k1: #ff2e44; --f1: #fff; --k2: #9be62a; --f2: #1a3004; --glyph: #fff; }
.gx-react { --k0: #ff2e44; --f0: #fff; --k1: #22c8ff; --f1: #04213a; --k2: #1b1c21; --f2: #f4f5f0; --glyph: #fff; }
.gx-count { --k0: #1f9d58; --f0: #fff; --k1: #8b5cff; --f1: #fff; --k2: #ff4fa8; --f2: #fff; --glyph: #fff; }
.gx-path  { --k0: #8b5cff; --f0: #fff; --k1: #2fd6a6; --f1: #03291f; --k2: #ff2e44; --f2: #fff; --glyph: #fff; }

/* card art: shared vocabulary */
.gc-svg text { font: 500 13px/1 var(--body); fill: currentColor; }
.gc-svg .lbl { opacity: .66; } .gc-svg .strong { opacity: 1; font-weight: 600; }
.gc-svg .big { font: 400 34px/1 var(--display); letter-spacing: -.03em; }
.gc-svg .huge { font: 400 64px/1 var(--display); opacity: .9; }
.gc-svg .fill-ink { fill: currentColor; } .gc-svg .fill-soft { fill: currentColor; opacity: .12; }
.gc-svg .node { fill: var(--dk-ground); stroke: currentColor; }
.gc-svg .pad-bg { fill: currentColor; opacity: .1; }
.gc-svg .chip-bg { fill: var(--dk-ground); } .gc-svg .chip-t { fill: currentColor; font-weight: 600; }
.gc-svg .blend { mix-blend-mode: var(--blend); }
.gc-svg .bz { fill: none; stroke: currentColor; }

/* card art: motion (only the front card moves) */
.gc:not([data-pos="0"]) *, .gx:not(.live) .gc * { animation-play-state: paused !important; }
.spin-slow { animation: gcspin 16s linear infinite; }
.spin-hand { animation: gcspin 6s linear infinite; } .spin-hand.slow { animation-duration: 72s; }
@keyframes gcspin { to { transform: rotate(360deg); } }
.hold-arc { animation: gchold 2.8s cubic-bezier(.4,0,.2,1) infinite; }
@keyframes gchold { 0% { stroke-dashoffset: 100; opacity: 1; } 70% { stroke-dashoffset: 0; opacity: 1; } 88% { stroke-dashoffset: 0; opacity: 0; } 100% { stroke-dashoffset: 100; opacity: 0; } }
.breathe-mk { animation: gcbreathe 2.8s ease-in-out infinite; }
@keyframes gcbreathe { 0%, 100% { transform: scale(.9); } 70% { transform: scale(1.08); } }
.grow { transform-box: fill-box; transform-origin: left center; animation: gcgrow 2.8s cubic-bezier(.3,.7,.2,1) infinite; }
@keyframes gcgrow { 0% { transform: scaleX(0); } 60%, 100% { transform: scaleX(1); } }
.clip { overflow: hidden; }
.wave-move { animation: gcwave 2.2s linear infinite; }
@keyframes gcwave { to { transform: translateX(-106.667px); } }
.eq-col { transform-box: fill-box; transform-origin: 50% 100%; animation: gceq .9s ease-in-out infinite alternate; }
@keyframes gceq { from { transform: scaleY(.35); } to { transform: scaleY(1); } }
.slide { animation: gcslide 3.2s cubic-bezier(.5,0,.2,1) infinite; }
@keyframes gcslide { 0%, 15% { transform: none; } 55%, 85% { transform: translateX(var(--to)); } 100% { transform: none; } }
.flash-rays { animation: gcrays 1.8s cubic-bezier(.2,.8,.2,1) infinite; }
@keyframes gcrays { 0% { transform: scale(.6); opacity: 0; } 12% { opacity: 1; } 60%, 100% { transform: scale(1.18); opacity: 0; } }
.strike { animation: gcstrike 1.8s ease-out infinite; }
@keyframes gcstrike { 0% { transform: scale(.82); } 10% { transform: scale(1.06); } 30%, 100% { transform: scale(1); } }
.swap-a { animation: gcswapA 3s steps(1) infinite; } .swap-b { animation: gcswapB 3s steps(1) infinite; }
@keyframes gcswapA { 0% { opacity: 1; } 62% { opacity: 0; } }
@keyframes gcswapB { 0% { opacity: 0; } 62% { opacity: 1; } }
.blink { animation: gcblink 2.4s ease-in-out infinite; }
@keyframes gcblink { 0%, 100% { opacity: 0; } 15%, 45% { opacity: 1; } 60% { opacity: 0; } }
.trace { animation: gctrace 2.6s linear infinite; }
@keyframes gctrace { to { stroke-dashoffset: 0; } }
.pulse { animation: gcpulse 2.4s ease-in-out infinite; }
@keyframes gcpulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.08); } }
.knob { transform-box: fill-box; transform-origin: center; animation: gcknob 3.6s ease-in-out infinite alternate; }
.knob.k1 { animation-delay: -1.2s; } .knob.k2 { animation-delay: -2.4s; }
@keyframes gcknob { from { transform: translateX(-26px); } to { transform: translateX(10px); } }


@media (max-width: 760px) {
  .gx { min-height: 0; padding: 26px 22px 0; display: flex; flex-direction: column; }
  .gx-text { max-width: none; }
  .gx-actions { margin-top: 22px; }
  .gx .stack { position: relative; right: auto; bottom: auto; align-self: flex-start;
    --p1x: 56; --p1y: -22; --p2x: 108; --p2y: -40;
    width: min(250px, 64vw); margin: 64px 0 -60px 4px; }
}
@media (prefers-reduced-motion: reduce) { .gc-svg * { animation: none !important; } }
/* performance: cards get their own GPU layer only while they move; their art stops animating mid-flight */
.stack-cards.moving .gc { will-change: transform; }
.stack-cards.moving .gc * { animation-play-state: paused !important; }
@media (hover: none) { .gx .gc { box-shadow: 0 12px 26px -16px rgba(0,0,0,.55); } .stack-cards { transform: none !important; transition: none; } }
/* Color: its RGB icon mixes light (screen blend), so it gets a dark tile — on candy pink it washed out */
.gx-color .gx-tile { background: radial-gradient(90% 90% at 30% 20%, #2a2c33, #111114); box-shadow: inset 0 -7px 12px rgba(0,0,0,.35), inset 0 5px 9px rgba(255,255,255,.14), 0 10px 22px -10px #ff4fa8; }
.gx-color .gx-tile .gic-color { width: 50px; height: 37px; }
/* …and the Color card's picture of mixing light gets a dark window, so the circles mix brightly there too */
.gx-color .gc-0 .gc-art { background: radial-gradient(90% 90% at 30% 20%, #25272d, #0f1013); }
.gx-color .gc-0 .gc-svg .blend { mix-blend-mode: screen; }
/* energy count card art */
.gc-svg .num { font: 500 30px/1 var(--display); fill: currentColor; }
.gc-svg .num.inv { fill: var(--fill); }
.blink-all { animation: gcflash 2.6s ease-in-out infinite; }
@keyframes gcflash { 0%, 8% { opacity: 0; } 14%, 46% { opacity: 1; } 54%, 100% { opacity: 0; } }
.drain { transform-box: fill-box; transform-origin: left center; animation: gcdrain 2.6s linear infinite; }
@keyframes gcdrain { 0%, 12% { transform: scaleX(1); } 50%, 100% { transform: scaleX(0); } }
.pick { animation: gcpulse 2.4s ease-in-out infinite; transform-box: fill-box; transform-origin: center; }