/* The brighter hubs (Web Designer mock-up, 2026-11-05; Scott: "it doesn't really feel 'Gaming'", then "start with option 1").
   Option 1 is colour only, no new character: the home page, /games/ and /party-games/ keep the dark base (#16191a) and the gold of the brand,
   and every game wears its own saturated colour on a dark card: a border and glow, a lit title, a colour-coded audience tag and a chunky Play button.
   --ga (the game's accent) and --ga-l (its lighter text colour) come from build.py GAME_ACCENT, picked from each poster and party theme.
   Loaded only on these three pages, after keyhole.css. No casino cues (no coins, chips, reels, gold shine). Motion is a slow bob on wide screens,
   off under prefers-reduced-motion and Calm mode. Contrast is audited in reports/brighter-hub-2026-11-05.md. */

:is(.kg-home, .cat-page, .pgx) {
  --ga: #e3a72f; --ga-l: #f0c25a;
  --kb-card: #101416; --kb-ink: #f7f2e4; --kb-mute: #d3ccb9; --kb-ink-dark: #0d0f10;
  --kb-coral: #ff6b5e; --kb-violet: #b79bff; --kb-teal: #2fd9c9; --kb-sky: #4fb0ff; --kb-amber: #ffb347; --kb-green: #4fd66f; --kb-rose: #ff6f91;
}

/* a livelier backdrop: soft colour washes on the dark, so the page is not one flat charcoal */
main:has(.kg-home), main:has(.cat-page), main:has(.pgx) {
  background:
    radial-gradient(58rem 26rem at 4% 8rem, rgba(183, 155, 255, 0.16), transparent 70%),
    radial-gradient(52rem 24rem at 98% 36rem, rgba(47, 217, 201, 0.12), transparent 70%),
    radial-gradient(56rem 28rem at 8% 80rem, rgba(255, 107, 94, 0.12), transparent 70%),
    radial-gradient(52rem 26rem at 96% 124rem, rgba(79, 176, 255, 0.12), transparent 70%),
    radial-gradient(56rem 28rem at 6% 170rem, rgba(255, 179, 71, 0.10), transparent 70%);
  background-repeat: no-repeat;
}

/* ---------- chunky buttons with a pressed feel ---------- */
:is(.kg-home, .cat-page, .pgx, .kg-lp) .btn { border-radius: 0.85rem; font-weight: 800; border: 2px solid #5b6567; background: linear-gradient(180deg, #2f3638, #1d2325); color: var(--kb-ink);
  box-shadow: 0 4px 0 #0a0c0d, 0 10px 16px rgba(0, 0, 0, 0.35); transition: transform 90ms ease, box-shadow 90ms ease, filter 150ms ease; }
:is(.kg-home, .cat-page, .pgx, .kg-lp) .btn:hover { border-color: #f0c25a; color: #fff; filter: brightness(1.08); }
:is(.kg-home, .cat-page, .pgx, .kg-lp) .btn.gold { border: 2px solid #8a5f0e; color: #1d1405; background: linear-gradient(180deg, #ffe08a, #f0b429);
  box-shadow: 0 4px 0 #7a5410, 0 10px 16px rgba(0, 0, 0, 0.35), inset 0 2px 0 rgba(255, 255, 255, 0.6); }
:is(.kg-home, .cat-page, .pgx, .kg-lp) .btn.gold:hover { color: #1d1405; border-color: #8a5f0e; }
:is(.kg-home, .cat-page, .pgx, .kg-lp) .btn:active { transform: translateY(4px); box-shadow: 0 0 0 #0a0c0d, 0 3px 6px rgba(0, 0, 0, 0.35); }
:is(.kg-home, .cat-page, .pgx, .kg-lp) .btn.gold:active { box-shadow: 0 0 0 #7a5410, 0 3px 6px rgba(0, 0, 0, 0.35), inset 0 2px 0 rgba(255, 255, 255, 0.45); }
:is(.kg-home, .cat-page, .pgx, .kg-lp) .btn:focus-visible { outline: 3px solid #2ee6ff; outline-offset: 3px; }

/* the Launch Party offer: the A$5 mark becomes a tilted ticket tag, not a round coin */
.kg-lp-badge { border-radius: 0.4rem !important; width: auto !important; height: auto !important; min-width: 2.5rem; padding: 0.4rem 0.45rem; background: #bff0cc !important; color: #0d2216 !important; border: 0 !important;
  transform: rotate(-5deg); box-shadow: 0 3px 0 #4f8a63 !important; }
.kg-lp { border-radius: 1rem; box-shadow: 0 5px 0 rgba(0, 0, 0, 0.5), 0 0 28px rgba(79, 214, 111, 0.18); }

/* ---------- colour-coded section headings ---------- */
.kg-sec-h::before, #pg-free::before, #pg-pack::before, #pg-classics::before, #pg-work::before, #pg-how::before, #pg-about::before, #pg-faq::before, #gi-about::before {
  content: ""; display: inline-block; width: 0.5rem; height: 0.9em; margin-right: 0.55rem; border-radius: 3px; vertical-align: -0.08em;
  background: var(--sc, #f0c25a); box-shadow: 0 0 14px var(--sc, #f0c25a); }
#wall-h { --sc: var(--kb-coral); } #how-h { --sc: var(--kb-teal); } #games-h { --sc: var(--kb-violet); } #faq-h { --sc: var(--kb-sky); }
#pg-free { --sc: var(--kb-green); } #pg-pack { --sc: #b57cff; } #pg-classics { --sc: #f0b429; } #pg-work { --sc: #ff5a6a; } #pg-how { --sc: var(--kb-teal); } #pg-about, #pg-faq, #gi-about { --sc: var(--kb-sky); }

/* ---------- the poster wall under the home hero ---------- */
.kg-wall { position: relative; padding-block: clamp(1.4rem, 4vw, 2.6rem) clamp(1rem, 3vw, 2rem); }
.kg-wall::before { content: ""; position: absolute; inset: -1rem -2rem; z-index: -1; pointer-events: none; -webkit-mask-image: radial-gradient(ellipse 62% 60% at 50% 55%, #000 35%, transparent 100%); mask-image: radial-gradient(ellipse 62% 60% at 50% 55%, #000 35%, transparent 100%);
  background: radial-gradient(34rem 14rem at 20% 70%, rgba(183, 155, 255, 0.28), transparent 70%), radial-gradient(34rem 14rem at 52% 80%, rgba(255, 107, 94, 0.24), transparent 70%), radial-gradient(34rem 14rem at 84% 70%, rgba(47, 217, 201, 0.24), transparent 70%); }
.kg-wall-head { margin-bottom: 0.4rem; }
.kg-wall-head .kg-sec-h { margin-bottom: 0.3rem; }
.kg-wall-row { list-style: none; margin: 0; padding: 1.6rem 0.5rem 1.8rem; display: flex; justify-content: center; align-items: flex-start; }
.kg-wall-row li { --k: calc(var(--i) - 3.5); flex: 0 1 10.5rem; min-width: 0; margin-left: -0.35rem; position: relative; z-index: 1;
  transform: translateY(calc(var(--k) * var(--k) * 0.28rem)) rotate(calc(var(--k) * 2.2deg)); transition: transform 220ms cubic-bezier(.2, .9, .3, 1.2), z-index 0s; }
.kg-wall-row li:first-child { margin-left: 0; }
.kg-wall-row a { display: block; border: 3px solid var(--ga); border-radius: 0.9rem; overflow: hidden; line-height: 0; background: var(--kb-card);
  box-shadow: 0 5px 0 color-mix(in srgb, var(--ga) 45%, #000), 0 0 26px color-mix(in srgb, var(--ga) 40%, transparent), 0 16px 24px rgba(0, 0, 0, 0.5); }
.kg-wall-row img { display: block; width: 100%; height: auto; aspect-ratio: 480 / 646; object-fit: cover; filter: saturate(1.14); }
.kg-wall-row li:hover, .kg-wall-row li:focus-within { z-index: 5; transform: translateY(-0.9rem) rotate(0deg) scale(1.1); }
.kg-wall-row a:focus-visible { outline: 3px solid #2ee6ff; outline-offset: 3px; }
@media (prefers-reduced-motion: no-preference) and (min-width: 700px) {
  html:not(.calm) .kg-wall-row a { animation: kb-bob 5s ease-in-out infinite; animation-delay: calc(var(--i) * -0.7s); }
}
@keyframes kb-bob { 50% { translate: 0 -0.45rem; } }
@media (max-width: 699px) {
  .kg-wall-row { justify-content: flex-start; overflow-x: auto; gap: 0.8rem; padding: 1rem 1rem 1.4rem; margin-inline: -1rem; scroll-snap-type: x proximity; overscroll-behavior-x: contain; scrollbar-width: none; }
  .kg-wall-row::-webkit-scrollbar { display: none; }
  .kg-wall-row li { flex: 0 0 8.6rem; margin-left: 0; transform: rotate(calc(var(--k) * 1.4deg)); scroll-snap-align: center; }
  .kg-wall-row li:hover, .kg-wall-row li:focus-within { transform: none; }
}

/* ---------- the home game tabs, each its own colour ---------- */
.kg-tabs.is-js .kg-tablist { gap: 0.45rem; padding: 0.4rem; border-radius: 1rem; background: #0b0e0f; border: 2px solid #2b3335; }
.kg-tablist [role="tab"] { --tc: #f0b429; min-height: 3.1rem; border-radius: 0.75rem; color: var(--kb-ink); font-size: 1.05rem; background: #1b2124; border: 2px solid color-mix(in srgb, var(--tc) 55%, #1b2124);
  box-shadow: 0 3px 0 #06080a; transition: transform 90ms ease, box-shadow 90ms ease; }
#kgt-party { --tc: #ff6b5e; } #kgt-mystery { --tc: #2fd9c9; } #kgt-work { --tc: #ffb347; } #kgt-daily { --tc: #4fb0ff; }
.kg-tablist [role="tab"][aria-selected="true"] { color: var(--kb-ink-dark); background: var(--tc); border-color: var(--tc); box-shadow: 0 4px 0 color-mix(in srgb, var(--tc) 45%, #000), 0 0 20px color-mix(in srgb, var(--tc) 45%, transparent); transform: translateY(-1px); }
.kg-tablist [role="tab"]:active { transform: translateY(3px); box-shadow: 0 0 0 #06080a; }

/* ---------- game tiles: the game's own poster at full colour on a dark card, in its own accent ---------- */
.kg-home .kg-tiles { gap: 0.9rem 0.8rem; }
@media (min-width: 760px) { .kg-home .kg-tiles { gap: 1.3rem 1.1rem; } }
.kg-home .kg-tile { --_c: var(--ga); gap: 0.2rem; padding: 0.4rem 0.4rem 0.5rem; border-radius: 1.1rem; border: 2px solid var(--_c); overflow: visible; color: var(--kb-ink);
  background: linear-gradient(180deg, color-mix(in srgb, var(--_c) 24%, #121618), #0d1012 80%);
  box-shadow: 0 5px 0 color-mix(in srgb, var(--_c) 45%, #000), 0 0 24px color-mix(in srgb, var(--_c) 28%, transparent), 0 14px 22px rgba(0, 0, 0, 0.45);
  transition: transform 140ms cubic-bezier(.2, .9, .3, 1.2), box-shadow 140ms ease; }
.kg-home .kg-tile:hover, .kg-home .kg-tile:focus-visible { transform: translateY(-4px) rotate(-0.4deg); border-color: var(--_c);
  box-shadow: 0 9px 0 color-mix(in srgb, var(--_c) 45%, #000), 0 0 38px color-mix(in srgb, var(--_c) 55%, transparent), 0 18px 26px rgba(0, 0, 0, 0.5); }
.kg-home .kg-tile:focus-visible { outline: 3px solid #2ee6ff; outline-offset: 3px; }
.kg-home .kg-tile:active { transform: translateY(3px); box-shadow: 0 1px 0 color-mix(in srgb, var(--_c) 45%, #000), 0 0 18px color-mix(in srgb, var(--_c) 40%, transparent); }
.kg-home .kg-tile img { aspect-ratio: 896 / 1206; object-position: 50% 0; border-radius: 0.75rem; filter: saturate(1.15) contrast(1.03); }
.kg-home .kg-tile.kg-tile-land img, .kg-home .kg-tile.kg-tile-xmas img { aspect-ratio: 16 / 10; object-position: 55% 50%; }
.kg-home .kg-tiles-daily .kg-tile-dwide img { aspect-ratio: 8 / 3; object-position: 50% 30%; }
.kg-home .kg-tiles-daily .kg-tile-d img { aspect-ratio: 4 / 5; object-position: 50% 20%; }
.kg-home .kg-tile b { padding: 0.45rem 0.35rem 0; font-size: 1.12rem; color: var(--kb-ink); text-shadow: 0 2px 0 rgba(0, 0, 0, 0.5); }
.kg-home .kg-tile-tag { padding: 0 0.35rem; font-size: 0.74rem; font-weight: 700; color: var(--ga-l); }
.kg-home .kg-tile-meta { padding: 0.1rem 0.35rem 0; color: var(--kb-mute); }
.kg-home .kg-tile-go, .pgt-go { display: block; margin: 0.45rem 0.1rem 0; padding: 0.5rem 0.4rem 0.45rem; border-radius: 0.7rem; text-align: center; font: 900 1rem/1.1 var(--display-plain); font-style: normal; text-transform: uppercase; letter-spacing: 0.08em;
  color: var(--kb-ink-dark); background: var(--ga, #e3a72f); box-shadow: 0 4px 0 color-mix(in srgb, var(--ga, #e3a72f) 45%, #000); transition: transform 90ms ease, box-shadow 90ms ease; }
.kg-home .kg-tile:active .kg-tile-go, a.pgt:active .pgt-go { transform: translateY(3px); box-shadow: 0 1px 0 color-mix(in srgb, var(--ga, #e3a72f) 45%, #000); }
.kg-home .kg-tile-go.is-soon, .pgt-go.is-soon { background: transparent; color: var(--kb-mute); border: 2px dashed #6a7274; box-shadow: none; padding-block: 0.4rem 0.35rem; }
.kg-home .kg-tile:has(.kg-tile-go.is-soon) { --_c: color-mix(in srgb, var(--ga) 60%, #5a6264); }
.kg-home .kg-tile:has(.kg-tile-go.is-soon) img { filter: saturate(0.85); }

/* audience tags: colour-coded, on the poster (KIDS lavender, FAMILY green, TEENS blue, ADULTS red; existing colours) */
.tag-aud.on-tile { position: absolute; top: 0.8rem; left: 0.8rem; z-index: 3; border: 2px solid #0d0f10; box-shadow: 0 2px 0 rgba(0, 0, 0, 0.55); }
.pgt-art .tag-aud.on-tile, .cat-card .tag-aud.on-tile { top: 0.55rem; left: 0.55rem; }

/* the Party Pack 01 panel on the home page: violet, the limited-edition colour */
.kg-home .kg-pack-hero { border: 2px solid #b57cff; border-radius: 1.2rem; background: linear-gradient(135deg, #2a1950, #14102a 70%); box-shadow: 0 6px 0 #3b2570, 0 0 36px rgba(181, 124, 255, 0.35), 0 16px 26px rgba(0, 0, 0, 0.45); }
.kg-home .kg-pack-k { color: #d9c5ff; }
.kg-home .kg-pack-copy b { color: #f3ebff; text-shadow: 0 3px 0 rgba(0, 0, 0, 0.5); }
.kg-home .kg-pack-copy .kg-pl { color: #e6dcf7; }
.kg-home .kg-pack-copy .btn.small { background: linear-gradient(180deg, #d1b0ff, #b57cff); color: #1b0f38; border: 2px solid #6d3fc0; box-shadow: 0 4px 0 #4a2a8a; }
.kg-home .kg-soonchip { color: #1b0f38; background: #d9c5ff; }
.kg-home .kg-lpchip { color: #0d2216; background: #bff0cc; }
.kg-home .kg-more a { font-weight: 800; }

/* featured banners */
.kg-home .kg-banner { border-width: 2px; border-radius: 1.1rem; box-shadow: 0 5px 0 rgba(0, 0, 0, 0.5), 0 14px 22px rgba(0, 0, 0, 0.4); }
.kg-home .kg-banner-sotl { border-color: #ff4a3d; box-shadow: 0 5px 0 #5a1511, 0 0 30px rgba(255, 74, 61, 0.28), 0 14px 22px rgba(0, 0, 0, 0.4); }
.kg-home .kg-banner-sotl .kg-banner-k { color: #ff8f84; }
.kg-home .kg-banner-sotl .kg-banner-t > span:last-child { color: #e0d5cf; }

/* how to play: three steps, three colours */
.kg-home .kg-steps li { border-width: 2px; border-radius: 1rem; box-shadow: 0 4px 0 rgba(0, 0, 0, 0.5); border-top: 5px solid var(--sc); background: linear-gradient(180deg, color-mix(in srgb, var(--sc) 16%, #14181a), #0f1315); }
.kg-home .kg-steps li:nth-child(1) { --sc: var(--kb-coral); } .kg-home .kg-steps li:nth-child(2) { --sc: var(--kb-teal); } .kg-home .kg-steps li:nth-child(3) { --sc: var(--kb-violet); }
.kg-home .kg-step-ic { color: var(--sc); } .kg-home .kg-step-ic i { background: var(--sc); color: var(--kb-ink-dark); }
.kg-home .kg-steps b { color: var(--kb-ink); } .kg-home .kg-steps span:not(.kg-step-ic) { color: var(--kb-mute); }

/* the join and host buttons in the hero: chunkier */
.kg-big { border-radius: 1rem; }
.kg-big-join { box-shadow: 0 5px 0 #05070a, 0 12px 20px rgba(60, 35, 0, 0.45); }
.kg-big-host { box-shadow: 0 5px 0 #a8802c, 0 12px 20px rgba(60, 35, 0, 0.3); }
.kg-big:active { transform: translateY(4px); }

/* quick answers: rounded, with a coloured edge */
.kg-home .kg-faq details { border-radius: 0.9rem; border-left: 6px solid var(--kb-sky); box-shadow: 0 3px 0 rgba(0, 0, 0, 0.45); }

/* ---------- /games/: the catalogue cards ---------- */
.cat-page .cat-grid { gap: 1.4rem 1.1rem; }
.cat-page .case.mini.cat-card { --_c: var(--ga); gap: 0.4rem; padding: 0.45rem 0.45rem 0.7rem; margin-top: 0; border-radius: 1.15rem; border: 2px solid var(--_c); color: var(--kb-ink);
  background: linear-gradient(180deg, color-mix(in srgb, var(--_c) 24%, #121618), #0d1012 78%);
  box-shadow: 0 5px 0 color-mix(in srgb, var(--_c) 45%, #000), 0 0 24px color-mix(in srgb, var(--_c) 26%, transparent), 0 14px 22px rgba(0, 0, 0, 0.45); }
.cat-page .case.mini.cat-card::before, .cat-page .case.mini.cat-card::after { content: none; display: none; }
.cat-page .case.mini.cat-card:hover, .cat-page .case.mini.cat-card:focus-within { transform: translateY(-4px) rotate(-0.3deg);
  box-shadow: 0 9px 0 color-mix(in srgb, var(--_c) 45%, #000), 0 0 38px color-mix(in srgb, var(--_c) 55%, transparent), 0 18px 26px rgba(0, 0, 0, 0.5); }
.cat-page .cat-card .tab { position: absolute; z-index: 3; left: auto; right: 0.8rem; top: 0.8rem; padding: 0.2rem 0.55rem; border-radius: 0.4rem; background: #0d0f10; color: #fff; font: 800 0.66rem/1.3 var(--mono); letter-spacing: 0.1em; text-transform: uppercase; box-shadow: none; border: 2px solid var(--_c); }
.cat-page .cat-card .poster-frame { margin: 0; transform: none; }
.cat-page .cat-card .poster-frame img { border: 0; border-radius: 0.8rem; filter: saturate(1.15) contrast(1.03); box-shadow: none; }
.cat-page .cat-card .town { color: var(--kb-ink); text-shadow: 0 2px 0 rgba(0, 0, 0, 0.5); margin: 0.35rem 0.2rem 0; }
.cat-page .cat-card .title { color: var(--ga-l); margin: 0 0.2rem; font-weight: 700; }
.cat-page .case.mini.cat-card p.cat-line { color: var(--kb-mute); padding-inline: 0.2rem; }
.cat-page .cat-chips, .cat-page .cat-facts { padding-inline: 0.2rem; }
.cat-page .cat-chips li { border: 2px solid color-mix(in srgb, var(--_c, #e3a72f) 70%, #000); background: rgba(0, 0, 0, 0.4); color: var(--ga-l); }
.cat-page .cat-chips li[class^="cat-free"] { background: #35c76a; border-color: #35c76a; color: #04180c; }
.cat-page .cat-chips li.cat-coming-soon { background: #2a3032; border-color: #5a6264; color: #f6d878; }
.cat-page .cat-chips li.cat-in-party-pack-01 { background: #d9c5ff; border-color: #d9c5ff; color: #1b0f38; }
.cat-page .cat-chips li.cat-for-work { background: #ffd7a0; border-color: #ffd7a0; color: #2a1c04; }
.cat-page .cat-chips li.cat-daily { background: #bfe0ff; border-color: #bfe0ff; color: #0b2a4a; }
.cat-page .cat-facts li { color: var(--kb-mute); }
.cat-page .cat-play { margin: auto 0.2rem 0; background: var(--ga); border: 2px solid color-mix(in srgb, var(--ga) 60%, #000); color: var(--kb-ink-dark);
  box-shadow: 0 4px 0 color-mix(in srgb, var(--ga) 45%, #000), inset 0 2px 0 rgba(255, 255, 255, 0.35); }
.cat-page .cat-play:hover { color: var(--kb-ink-dark); border-color: color-mix(in srgb, var(--ga) 60%, #000); }
.cat-page .cat-play::after { background-image: none; content: "\25B8"; width: auto; height: auto; transform: translateY(-52%); font-size: 1.1rem; color: var(--kb-ink-dark); opacity: 1; }
.cat-page .cat-item[data-who~="soon"] .cat-card { border-style: dashed; border-color: color-mix(in srgb, var(--ga) 55%, #5a6264); }
.cat-page .cat-item[data-who~="soon"] .poster { filter: saturate(0.8); }

/* the filter buttons: chunky pills, colour-coded by kind of game */
:where(.cat-page .cat-filters .btn.small-f) { --fc: #f0b429; }
.cat-page .cat-filters .btn.small-f { min-height: 2.6rem; border-radius: 99px; border: 2px solid color-mix(in srgb, var(--fc) 55%, #20272a); background: #1b2124; color: var(--kb-ink); box-shadow: 0 3px 0 #06080a; }
.cat-page .cat-filters .btn.small-f[aria-pressed="true"] { background: var(--fc); border-color: var(--fc); color: var(--kb-ink-dark); box-shadow: 0 3px 0 color-mix(in srgb, var(--fc) 45%, #000); }
.cat-page .cat-filters .btn.small-f:active { transform: translateY(3px); box-shadow: none; }
.cat-page [data-cat-type="party"] { --fc: #ff6b5e; } .cat-page [data-cat-type="classics"] { --fc: #f0b429; } .cat-page [data-cat-type="daily"] { --fc: #4fb0ff; }
.cat-page [data-cat-type="mystery"] { --fc: #2fd9c9; } .cat-page [data-cat-type="work"] { --fc: #ffb347; } .cat-page [data-cat-type="christmas"] { --fc: #ff5a6a; }
.cat-page [data-cat-who="kids"] { --fc: #b9a7ff; } .cat-page [data-cat-who="family"] { --fc: #8fdcaa; } .cat-page [data-cat-who="grownups"] { --fc: #ff9a90; } .cat-page [data-cat-who="free"] { --fc: #4fd66f; }
.cat-page [data-cat-who="soon"] { --fc: #cfc8b5; } .cat-page [data-cat-who="solo"], .cat-page [data-cat-who="groups"] { --fc: #4fb0ff; }

/* ---------- /party-games/ ---------- */
.pgx .kg-hh-art { border: 3px solid #ff6b5e; box-shadow: 0 6px 0 #5a1f1a, 0 0 40px rgba(255, 107, 94, 0.3), 0 20px 36px rgba(0, 0, 0, 0.5); }
.pgx .kg-hh-copy h1 { text-shadow: 0 4px 0 rgba(0, 0, 0, 0.6), 0 0 28px rgba(255, 107, 94, 0.25); }
.pgx-row:has(> .pgt) { gap: 1.2rem 0.9rem; }
@media (min-width: 760px) { .pgx-row:has(> .pgt) { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1.4rem 1.1rem; } }
@media (min-width: 1100px) { .pgx-panel .pgx-row:has(> .pgt) { grid-template-columns: repeat(5, minmax(0, 1fr)); } }
.pgx .pgt { --_c: var(--ga); padding: 0.4rem 0.4rem 0.55rem; border-radius: 1.1rem; border: 2px solid var(--_c); color: var(--kb-ink);
  background: linear-gradient(180deg, color-mix(in srgb, var(--_c) 24%, #121618), #0d1012 80%);
  box-shadow: 0 5px 0 color-mix(in srgb, var(--_c) 45%, #000), 0 0 24px color-mix(in srgb, var(--_c) 28%, transparent), 0 14px 22px rgba(0, 0, 0, 0.45);
  transition: transform 140ms cubic-bezier(.2, .9, .3, 1.2), box-shadow 140ms ease; }
.pgx a.pgt:hover { transform: translateY(-4px) rotate(-0.4deg); box-shadow: 0 9px 0 color-mix(in srgb, var(--_c) 45%, #000), 0 0 38px color-mix(in srgb, var(--_c) 55%, transparent), 0 18px 26px rgba(0, 0, 0, 0.5); }
.pgx a.pgt:active { transform: translateY(3px); }
.pgx a.pgt:focus-visible { outline: 3px solid #2ee6ff; outline-offset: 3px; }
.pgx .pgt-art { border-radius: 0.8rem; box-shadow: none; }
.pgx .pgt-art img { filter: saturate(1.15) contrast(1.03); }
.pgx .pgt-ribbon { top: 0.6rem; border-radius: 0.4rem 0 0 0.4rem; }
.pgx .pgt-free { background: #35c76a; color: #04180c; }
.pgx .pgt-soon { background: #d3ccb9; color: #1d1a12; }
.pgx .pgt-facts { padding-inline: 0.2rem; color: var(--kb-mute); }
.pgx .pgt-facts svg { color: var(--ga-l); }
.pgx .pgt:not([style]) { --ga: #f0b429; --ga-l: #f6cf6a; }
.pgx .pgt-go { margin-top: 0.25rem; }
.pgx .pgt:has(.pgt-go.is-soon) { --_c: color-mix(in srgb, var(--ga) 55%, #5a6264); border-style: dashed; }
.pgx .pgt:has(.pgt-go.is-soon) img { filter: saturate(0.85); }
.pgx .pgx-panel { border: 2px solid #b57cff; border-radius: 1.2rem; background: linear-gradient(160deg, #26174a, #12101f 60%); box-shadow: 0 6px 0 #3b2570, 0 0 40px rgba(181, 124, 255, 0.3), 0 18px 30px rgba(0, 0, 0, 0.45); }
.pgx .pgx-panel .eyebrow { color: #d9c5ff; }
.pgx .pgx-pack-cta { border: 2px dashed #b57cff; background: rgba(181, 124, 255, 0.1); border-radius: 0.9rem; }
.pgx .pgx-chips li { border-radius: 99px; border: 2px solid var(--kb-sky); color: #bfe0ff; }

/* the Christmas band and Classics keep their own looks, with the same chunky edge */
.pgx .game-faq details { border-radius: 0.9rem; border-left: 6px solid var(--kb-sky); box-shadow: 0 3px 0 rgba(0, 0, 0, 0.45); }
.pgx .bcard, .pgx .icard { border-radius: 1rem; }

@media (max-width: 559px) {
  .cat-page .cat-card .tab { right: auto; left: 0.55rem; top: 2.05rem; font-size: 0.58rem; padding: 0.12rem 0.4rem; }
  .kg-home .kg-tile b { font-size: 1rem; }
  .kg-home .kg-tile-go, .pgt-go { font-size: 0.92rem; letter-spacing: 0.06em; }
  .cat-page .case.mini.cat-card { padding: 0.35rem 0.35rem 0.6rem; border-radius: 1rem; }
  .tag-aud.on-tile { top: 0.55rem; left: 0.55rem; font-size: 0.58rem; padding: 0.1rem 0.4rem; }
}

@media (prefers-reduced-motion: reduce) {
  .kg-home .kg-tile, .pgx .pgt, .cat-page .case.mini.cat-card, .kg-wall-row li, .kg-tablist [role="tab"], .btn { transition: none !important; }
  .kg-wall-row a { animation: none !important; }
  .kg-home .kg-tile:hover, .kg-home .kg-tile:focus-visible, .pgx a.pgt:hover, .cat-page .case.mini.cat-card:hover { transform: none; }
}
html.calm .kg-wall-row a { animation: none !important; }