/* =====================================================================================================================
   YAFFLE v4 — loaded last on every page. Serious and quiet, in ENERGIFY Studio's own hand:
   · its typefaces (Figtree for text and headlines, Montserrat for the wordmark, Satoshi for buttons, tabs and labels),
     self-hosted, never thin, never spaced-out capitals;
   · two themes, pure white and pure black, with no tinted glow anywhere in the background;
   · ink, paper and one coral accent (the dot of "Yaffle."), plus each game's own colour where the game needs it.
   ===================================================================================================================== */
@font-face { font-family: "Bricolage Grotesque"; src: url("../fonts/bricolage-latin-var.woff2") format("woff2"); font-weight: 200 800; font-stretch: 75% 100%; font-display: swap; }
@font-face { font-family: "Figtree"; src: url("../fonts/figtree-latin-var.woff2") format("woff2"); font-weight: 300 900; font-display: swap; }
@font-face { font-family: "Montserrat"; src: url("../fonts/montserrat-latin-var.woff2") format("woff2"); font-weight: 100 900; font-display: swap; }
@font-face { font-family: "Satoshi"; src: url("../fonts/satoshi-21633c7ccd.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Satoshi"; src: url("../fonts/satoshi-7f6de341cb.woff2") format("woff2"); font-weight: 500; font-display: swap; }
@font-face { font-family: "Satoshi"; src: url("../fonts/satoshi-7a67e42dc7.woff2") format("woff2"); font-weight: 700; font-display: swap; }

:root {
  --display: "Bricolage Grotesque", "Figtree", "Helvetica Neue", Arial, sans-serif;   /* the main face: the name, game names, headings, big numbers */
  --name: "Bricolage Grotesque", "Figtree", "Helvetica Neue", Arial, sans-serif;
  --body: "Figtree", "Helvetica Neue", Arial, sans-serif;
  --ui: "Satoshi", "Figtree", "Helvetica Neue", Arial, sans-serif;
  --word: "Montserrat", "Figtree", Arial, sans-serif;
  --coral: #ff9a8a;
  --wrap: 1180px;
}
/* light: paper white */
:root[data-theme="light"] body, :root[data-theme="light"] body[data-mode], body[data-mode="light"] {
  --ground: #ffffff; --surface: #f4f4f5; --ink: #0a0a0b; --muted: rgba(10,10,11,.58); --hair: rgba(10,10,11,.1); --mark: #0a0a0b; --mark-rgb: 10, 10, 11;
  --card: #ffffff; --card-line: rgba(10,10,11,.09); --card-line-hi: rgba(10,10,11,.22); --btn: #0a0a0b; --btn-ink: #ffffff; color-scheme: light; }
/* dark: true black */
:root[data-theme="dark"] body, :root[data-theme="dark"] body[data-mode], body[data-mode="dark"] {
  --ground: #000000; --surface: #0d0d0e; --ink: #f5f5f6; --muted: rgba(245,245,246,.6); --hair: rgba(255,255,255,.12); --mark: #f5f5f6; --mark-rgb: 245, 245, 246;
  --card: #0b0b0c; --card-line: rgba(255,255,255,.09); --card-line-hi: rgba(255,255,255,.24); --btn: #f5f5f6; --btn-ink: #000000; color-scheme: dark; }
html, body { background: var(--ground); }
body { color: var(--ink); font-family: var(--body); font-weight: 400; -webkit-font-smoothing: antialiased; }
/* no coloured haze, no dots, no grain anywhere behind the content */
:root.glass body::before, body::before { display: none !important; }

/* labels everywhere: plain words, never thin spaced-out capitals */
.g-kicker, .gxc-cat, .dc-k, .label, .set-title, .pm-title, .cf, .mp-k, .mp-kick { text-transform: none !important; letter-spacing: 0 !important; }
.g-kicker { font: 600 14px/1.3 var(--ui); }

/* ---------- header: the mark, the games as tabs, the tools ---------- */
.nav.yx-top { position: sticky; top: 0; z-index: 40; display: flex; align-items: center; gap: 22px; height: 66px; padding: 0 var(--gutter);
  background: color-mix(in srgb, var(--ground) 86%, transparent); -webkit-backdrop-filter: saturate(1.4) blur(16px); backdrop-filter: saturate(1.4) blur(16px);
  border-bottom: 1px solid var(--hair); box-shadow: none; }
.yx-mark { flex: none; display: grid; place-items: center; height: 34px; padding: 0 2px; border-radius: 8px; }
.yx-mark svg { height: 26px; width: auto; display: block; overflow: visible; }
/* the mark: "ff." — the two f's of Yaffle and its coral full stop, plain (no tile), drawn from the hero word's own
   letters (Bricolage Grotesque 700 at its display size, the same tight spacing), so it has exactly the word's weight. The
   outlines are converted, so no font is needed. It follows the theme; on hover the dot hops, like the dot of "Yaffle." */
.yx-mark .ym-b { fill: var(--ink); }
.yx-mark .ym-c { fill: #ff9a8a; transform-box: fill-box; transform-origin: 50% 100%; }
.yx-mark:hover .ym-c, .yx-mark:focus-visible .ym-c { animation: ym-hop .6s linear; }
@keyframes ym-hop { 0%, 100% { transform: none; } 12% { transform: scale(1.2, .8); } 24% { transform: translateY(-62%) scale(.92, 1.08); animation-timing-function: cubic-bezier(.33,0,.67,1); }
  40% { transform: translateY(-95%); animation-timing-function: cubic-bezier(.33,0,.67,1); } 58% { transform: translateY(-40%) scale(.94, 1.06); } 70% { transform: scale(1.22, .78); } 84% { transform: translateY(-14%); } }
@media (prefers-reduced-motion: reduce) { .yx-mark:hover .ym-c, .yx-mark:focus-visible .ym-c { animation: none; } }
.yx-tabs { flex: 1; min-width: 0; display: flex; gap: 2px; overflow-x: auto; scrollbar-width: none; -webkit-mask: linear-gradient(90deg, #000 90%, transparent); mask: linear-gradient(90deg, #000 90%, transparent); }
.yx-tabs::-webkit-scrollbar { display: none; }
.yx-tabs a { flex: none; position: relative; padding: 10px 12px; border-radius: 10px; color: var(--muted); text-decoration: none; font: 500 15px/1 var(--ui); transition: color .2s, background .2s; }
.yx-tabs a:hover { color: var(--ink); background: var(--surface); }
.yx-tabs a:first-child { color: var(--ink); font-weight: 700; }
.yx-tabs a:focus-visible { outline: 2px solid var(--ink); outline-offset: 1px; }
.yx-top .tools { flex: none; display: flex; align-items: center; gap: 6px; margin-left: auto; }
.yx-top .nav-link { padding: 10px 12px; border-radius: 10px; color: var(--ink); text-decoration: none; font: 500 15px/1 var(--ui); }
.yx-top .nav-link:hover { background: var(--surface); }
.yx-ic, .set-btn { width: 38px; height: 38px; display: grid; place-items: center; border-radius: 50%; border: 1px solid var(--hair) !important; background: transparent !important;
  color: var(--ink) !important; cursor: pointer; box-shadow: none !important; padding: 0; }
.yx-ic svg { width: 18px; height: 18px; }
.yx-ic:hover, .set-btn:hover { background: var(--surface) !important; }
#gal-sound .x { display: none; } #gal-sound.off .w { display: none; } #gal-sound.off .x { display: inline; }
.page-home .nav .brand { display: none; }   /* one "Yaffle." on the home page: the big one */
@media (max-width: 720px) {
  .nav.yx-top { flex-wrap: wrap; height: auto; padding-block: 10px 0; row-gap: 6px; }
  .yx-tabs { order: 3; flex-basis: 100%; margin-inline: calc(-1 * var(--gutter)); padding: 0 var(--gutter) 6px; }
  .yx-top .nav-link { display: none; }
}

/* ---------- buttons ---------- */
.yh-play, .gxc-play { background: var(--btn) !important; color: var(--btn-ink) !important; box-shadow: none !important; font-family: var(--ui) !important; font-weight: 700 !important; }
.yh-play svg, .gxc-play svg { color: var(--coral) !important; }
.yh-play:hover { transform: translateX(2px); }

/* ---------- the hero: one big name, the slogan, a line, Reaction beside it ---------- */
.yx-hero { max-width: calc(var(--wrap) + 2 * var(--gutter)); margin: 0 auto; padding: clamp(36px, 7vw, 88px) var(--gutter) clamp(28px, 5vw, 56px);
  display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: clamp(24px, 4vw, 56px); align-items: center; }
.yx-hero-l { display: grid; justify-items: start; }
.yx-home .yh-word { margin: 0; font: 700 clamp(76px, 10.5vw, 150px)/.86 var(--name) !important; letter-spacing: -.065em; color: var(--ink); }
.yx-home .yh-slogan { margin: 18px 0 0; font: 700 clamp(22px, 2.4vw, 30px)/1.15 var(--display) !important; letter-spacing: -.02em; }
.yx-lede { margin: 12px 0 0; max-width: 38ch; color: var(--muted); font: 400 17px/1.5 var(--body); }
.yx-cta { margin-top: 28px; display: flex; flex-wrap: wrap; align-items: center; gap: 14px 20px; }
.yx-cta .yh-play { margin: 0; height: 52px; font-size: 16px !important; }
.yx-cta .yh-by { margin: 0; font: 500 14px/1.3 var(--ui); color: var(--muted); }
/* Reaction beside the name is exactly one grid column wide, so it is the same size as every other card */
.yx-hero-r { display: flex; justify-content: flex-end; }
.yx-hero { container-type: inline-size; }   /* 100cqw below = the hero's content width = the grid's width */
.yx-hero-r .gxc { width: calc((100cqw - 36px) / 3); }
@media (max-width: 900px) { .yx-hero { grid-template-columns: 1fr; } .yx-hero-r { justify-content: flex-start; } .yx-hero-r .gxc { width: calc((100cqw - 18px) / 2); } }
@media (max-width: 620px) { .yx-hero-r .gxc { width: 100%; } }

/* ---------- the games: an ordered, uneven grid — 7/5, 5/7, 6/6 ---------- */
.yx-home .cat { max-width: calc(var(--wrap) + 2 * var(--gutter)); margin: 0 auto; padding: 0 var(--gutter) clamp(56px, 8vw, 96px); }
.yx-home .cat-head { max-width: none; padding: 0 0 18px; margin: 0; display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 12px 28px;
  border-top: 1px solid var(--hair); padding-top: 26px; }
.yx-home .cat-t { margin: 0; font: 700 clamp(24px, 2.4vw, 30px)/1 var(--display) !important; letter-spacing: -.02em; }
.yx-home .gallery { max-width: none; padding: 0; margin: 0; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 18px; }
.yx-home .gallery > .gxc, .yx-home .gallery[data-cat="all"] > .gxc:nth-child(n) { grid-column: span 4; }
@media (max-width: 900px) { .yx-home .gallery > .gxc, .yx-home .gallery[data-cat="all"] > .gxc:nth-child(n) { grid-column: span 6; } }
@media (max-width: 620px) { .yx-home .gallery > .gxc, .yx-home .gallery[data-cat="all"] > .gxc:nth-child(n) { grid-column: 1 / -1; } }
/* the old "wide first card" layout is gone: every card is a column */
.yx-home .gallery[data-cat="all"] > .gxc:first-child { flex-direction: column; padding-bottom: 0; --cw: min(64cqw, 252px); }
.yx-home .gallery[data-cat="all"] > .gxc:first-child .gxc-body { flex: none; }
.yx-home .gallery[data-cat="all"] > .gxc:first-child .deck { height: calc(var(--cw) * 1.02); margin: 16px calc(-1 * var(--pad)) 0; min-height: 0; }
.yx-home .gallery[data-cat="all"] > .gxc:first-child .dc { top: calc(var(--cw) * .15); bottom: auto; left: calc(100% - var(--cw) * 1.46); }
.yx-home .gallery[data-cat="all"] > .gxc:first-child .gxc-t { font-size: clamp(28px, 2.6vw, 34px); }

/* the filter: words, the chosen one underlined */
.cat-filter { gap: 4px !important; }
.cf { height: 36px !important; padding: 0 10px !important; border-radius: 8px !important; background: none !important; box-shadow: none !important; border: 0 !important;
  color: var(--muted) !important; font: 500 15px/1 var(--ui) !important; position: relative; }
.cf:hover { color: var(--ink) !important; transform: none !important; }
.cf small { background: none !important; color: inherit !important; font: 500 13px/1 var(--ui) !important; opacity: .7; min-width: 0 !important; padding: 0 !important; }
.cf[aria-pressed="true"] { color: var(--ink) !important; font-weight: 700 !important; }
.cf[aria-pressed="true"]::after { content: ""; position: absolute; left: 10px; right: 10px; bottom: 3px; height: 2px; border-radius: 2px; background: var(--ink); }
.cf .cf-up { width: 14px; height: 14px; display: block; opacity: .75; transition: transform .25s cubic-bezier(.2,.8,.2,1); }
.cf.cf-above:hover .cf-up { transform: translateY(-2px); opacity: 1; }

/* ---------- a game card: flat paper (or ink), a hairline, the game's own colour only in its icon and its stack ---------- */
.gxc.gxc { background: var(--card) !important; border: 1px solid var(--card-line) !important; box-shadow: none !important; border-radius: 26px;
  -webkit-backdrop-filter: none !important; backdrop-filter: none !important; color: var(--ink); }
.gxc:hover { border-color: var(--card-line-hi) !important; transform: translateY(-2px) !important; box-shadow: 0 18px 40px -30px rgba(0,0,0,.35) !important; }
.gxc-top { gap: 12px; margin-bottom: 20px; }
.gxc-ic { width: 42px; height: 42px; border-radius: 12px; background: var(--k) !important; box-shadow: none !important; color: #fff; }
.gxc-ic::before { display: none !important; }
.gxc-ic svg { width: 21px; height: 21px; }
.gxc-cat { height: auto; padding: 0; background: none !important; box-shadow: none !important; font: 500 14px/1 var(--ui) !important; color: var(--muted) !important; }
.gxc .gxc-t, article.gxc .gxc-t { font: 700 clamp(28px, 2.6vw, 34px)/1.02 var(--display) !important; letter-spacing: -.03em; color: var(--ink); }
.gxc-d { color: var(--muted) !important; font: 400 15.5px/1.45 var(--body) !important; }
.gxc-play { height: 40px !important; font-size: 14px !important; letter-spacing: 0 !important; }

/* ---------- the stack cards: the same tinted glass; a new face on it, drawn in black ---------- */
.dc { color: #0b0b0e !important; text-shadow: none !important; }
.dc-k { padding: 0 !important; gap: 7px !important; background: none !important; box-shadow: none !important; font: 700 13px/1 var(--ui) !important; color: #0b0b0e; }
.dc-k i { width: auto !important; height: auto !important; background: none !important; color: #0b0b0e !important; }
.dc-k i svg { width: 15px !important; height: 15px !important; }
.dc-n { font: 700 12px/1 var(--ui) !important; letter-spacing: 0 !important; color: #0b0b0e; opacity: .62 !important; }
.ms { background: rgba(255,255,255,.2) !important; box-shadow: none !important; border: 1.5px solid rgba(11,11,14,.62); border-radius: 14px !important; color: #0b0b0e !important; }
.dc-big { font: 800 clamp(20px, 7cqw, 28px)/1 var(--display) !important; letter-spacing: -.035em !important; color: #0b0b0e; }
.dc-d { font: 500 12.5px/1.35 var(--body) !important; color: #0b0b0e; opacity: .78 !important; }
.dc-eb { background: #0b0b0e !important; opacity: .85 !important; }
/* the pictures inside, redrawn as black line work */
.m-ring { background: conic-gradient(#0b0b0e var(--p), rgba(11,11,14,.14) 0) !important; }
.m-ring b { background: color-mix(in srgb, var(--c) 72%, #fff) !important; color: #0b0b0e !important; font-weight: 800 !important; }
.m-orb { background: linear-gradient(0deg, rgba(11,11,14,.85) 0 48%, transparent 48%) !important; box-shadow: inset 0 0 0 2px #0b0b0e !important; }
.m-orb b { color: #fff !important; mix-blend-mode: difference; }
.m-tap i { border-color: rgba(11,11,14,.55) !important; } .m-tap i + i { border-color: #0b0b0e !important; }
.m-tap b { background: #0b0b0e !important; box-shadow: none !important; }
.m-flash { background: rgba(11,11,14,.88) !important; box-shadow: none !important; } .m-flash .mk { background: var(--c) !important; }
.m-field .mk { background: #0b0b0e !important; }
.m-strip i { box-shadow: inset 0 0 0 1.5px rgba(11,11,14,.55) !important; }
.m-sl u { background: #fff; box-shadow: 0 0 0 2px #0b0b0e !important; }
.m-cmp { box-shadow: inset 0 0 0 1.5px rgba(11,11,14,.55); }
.m-eq i { background: #0b0b0e !important; }
.m-line { background: rgba(11,11,14,.2) !important; } .m-line u { background: #0b0b0e !important; }
.m-wave polyline { stroke: #0b0b0e !important; filter: none !important; }
.m-step i { background: rgba(11,11,14,.1) !important; color: #0b0b0e; } .m-step b { color: #0b0b0e; }
.m-bars i { background: linear-gradient(90deg, #0b0b0e var(--w), rgba(11,11,14,.14) var(--w)) !important; }
.m-dist i { background: #0b0b0e !important; box-shadow: none !important; } .m-dist b { background: #0b0b0e !important; height: 2px; }
.m-dist.drag .mv { box-shadow: 0 0 0 4px rgba(11,11,14,.18) !important; }
.m-lines u { background: repeating-linear-gradient(90deg, #0b0b0e 0 8px, transparent 8px 13px) !important; } .m-lines u.you { background: #0b0b0e !important; }
.m-curve path { stroke: #0b0b0e !important; } .m-curve circle { fill: #0b0b0e !important; } .m-curve .h { fill: #fff !important; stroke: #0b0b0e !important; stroke-width: 2.4; }

/* the glass breaking (games/deck-motion.js 'shatter') */
.dc-shards { position: absolute; z-index: 6; pointer-events: none; transform-origin: 50% 100%; }
.dc-shards .dc-shard { position: absolute !important; inset: 0 !important; left: 0 !important; top: 0 !important; width: 100% !important; height: 100% !important;
  -webkit-backdrop-filter: none !important; backdrop-filter: none !important; will-change: transform, opacity; }
.dc-crack { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 2; overflow: visible; animation: dc-crack .2s ease-out both; }
.dc-crack polyline { stroke: rgba(255,255,255,.9); stroke-width: 1; vector-effect: non-scaling-stroke; fill: none; stroke-linecap: round; }
@keyframes dc-crack { 0% { opacity: 0; } 15% { opacity: 1; } 100% { opacity: 0; } }
.dc-shards { perspective: 700px; }
.dc-shards .dc-shard { box-shadow: none !important; }

/* ---------- footer ---------- */
.yx-foot { border-top: 1px solid var(--hair); background: var(--ground); }
.yx-foot-in { max-width: calc(var(--wrap) + 2 * var(--gutter)); margin: 0 auto; padding: 36px var(--gutter) 40px; display: grid; gap: 20px;
  grid-template-columns: minmax(0, 1.2fr) minmax(0, 2fr); align-items: start; font: 500 14px/1.5 var(--ui); }
.yx-foot-brand { display: grid; gap: 6px; }
.yx-foot .brand.yb { font: 700 26px/1 var(--name) !important; letter-spacing: -.05em; color: var(--ink); text-decoration: none; }
.yx-foot .foot-games, .yx-foot .foot-meta { display: flex; flex-wrap: wrap; gap: 6px 18px; }
.yx-foot .foot-meta { grid-column: 2; color: var(--muted); }
.yx-foot a { color: var(--muted); text-decoration: none; } .yx-foot a:hover { color: var(--ink); }
@media (max-width: 720px) { .yx-foot-in { grid-template-columns: 1fr; } .yx-foot .foot-meta { grid-column: auto; } }

/* ---------- "Yaffle.": over the name the dot jumps, turns into the ENERGIFY mark in the air, and lands as a dot again ---------- */
.yb-dot { position: relative; display: inline-block; color: var(--coral); }
.yb-dot::after { content: ""; position: absolute; left: 50%; bottom: .1em; width: .32em; height: .48em; translate: -50% 0; background: var(--coral);
  -webkit-mask: var(--bolt) center / contain no-repeat; mask: var(--bolt) center / contain no-repeat; opacity: 0; pointer-events: none; }
.yb-dot { transform-origin: 50% 85%; will-change: auto; }
@media (prefers-reduced-motion: reduce) { .yb-dot, .yb-dot::after { animation: none !important; } }

/* ---------- the arena (game screens while playing): black and white, and no dot field ---------- */
[data-game] .g-card::before, .imm::before { display: none !important; }
[data-game] .g-head .g-title, [data-game] .g-dots { font-family: var(--ui) !important; }
[data-game] .g-stage .btn { font-family: var(--ui) !important; font-weight: 700 !important; }

/* settings and small menus: plain words */
.set-pop { font-family: var(--ui); }
.set-title { font: 700 15px/1 var(--ui) !important; }

/* ---------- Color: the swatch is the colour and nothing else — no sheen, no shade, no glow, no inner rim ---------- */
.g-card .cswatch, .cswatch { background: var(--c) !important; box-shadow: none !important; filter: none !important; border: 0 !important; }
.cswatch::before, .cswatch::after { display: none !important; }
.cswatch .hex { background: rgba(0,0,0,.28) !important; color: #fff !important; box-shadow: none !important; font: 700 12px/1 var(--ui) !important; letter-spacing: .02em !important;
  -webkit-backdrop-filter: none !important; backdrop-filter: none !important; }

/* ---------- Privacy: ENERGIFY Studio's page design (a huge word, a crumb, a calm column of text) ---------- */
@font-face { font-family: "Outfit"; src: url("../fonts/outfit-latin-var.woff2") format("woff2"); font-weight: 100 900; font-display: swap; }
.pv { --g: clamp(16px, 2.4vw, 40px); }
.pv-head { padding: clamp(70px, 12vh, 140px) var(--g) clamp(36px, 6vh, 64px); background: #000; color: #fff; }
.pv-head .en-crumb { margin: 0; font: 500 14px/1 var(--ui); color: rgba(255,255,255,.6); }
.pv-head .en-crumb a { color: #fff; text-decoration: none; font-weight: 700; }
.pv-wm { margin: clamp(12px, 2vh, 20px) 0 0; display: flex; align-items: flex-end; gap: .08em; font: 900 clamp(52px, 11.5vw, 176px)/.82 "Outfit", var(--word); letter-spacing: -.045em; color: #fff; }
.pv-wm .en-bolt, .pv .en-bolt { flex: none; width: .34em; height: .5em; margin-bottom: .04em; background: #ff9a8a; -webkit-mask: var(--bolt) center / contain no-repeat; mask: var(--bolt) center / contain no-repeat; }
.pv-intro { margin: clamp(16px, 2.4vh, 26px) 0 0; max-width: 46ch; font: 500 clamp(16px, 1.3vw, 20px)/1.45 var(--body); color: rgba(255,255,255,.62); }
.pv-body { padding: clamp(40px, 7vh, 80px) var(--g) clamp(60px, 9vh, 110px); }
.pv-doc { max-width: 760px; }
:root[lang="az"] .pv-doc[lang="en"], :root:not([lang="az"]) .pv-doc[lang="az"] { display: none; }
.pv-date { margin: 0 0 28px; font: 600 14px/1 var(--ui); color: var(--muted); }
.pv-doc section { padding: 26px 0; border-top: 1px solid var(--hair); display: grid; grid-template-columns: minmax(0, 220px) minmax(0, 1fr); gap: 8px 32px; }
.pv-doc section > :not(h2) { grid-column: 2; }
.pv-doc h2 { margin: 0; max-width: none; font: 700 19px/1.25 var(--display); letter-spacing: -.01em; }
.pv-doc p, .pv-doc li { margin: 0; font: 400 16.5px/1.6 var(--body); color: color-mix(in srgb, var(--ink) 82%, transparent); }
.pv-doc p + p, .pv-doc ul + p { margin-top: 12px; }
.pv-doc ul { margin: 12px 0 0; padding-left: 20px; display: grid; gap: 6px; }
.pv-doc a { color: var(--ink); text-underline-offset: 3px; }
@media (max-width: 720px) { .pv-doc section { grid-template-columns: 1fr; } .pv-doc section > :not(h2) { grid-column: auto; } }
.set-theme { width: 36px; height: 36px; display: grid; place-items: center; border-radius: 50%; border: 1px solid var(--hair); background: transparent; color: var(--ink); cursor: pointer; }
.set-theme svg { width: 17px; height: 17px; }


/* ---------- v4.1 ---------- */
/* the stack cards a little bigger (every card; the deck grows with them) */
.gxc { --cw: min(64cqw, 252px); }   /* the stack cards: a touch bigger (2026-10-28) */
.yx-home .gallery .deck, .yx-hero-r .deck { height: calc(var(--cw) * 1.02); }
/* the name and every game name in the main face, heavy */
.brand.yb, .yh .yh-word, .yh-word { font-family: var(--name) !important; font-weight: 700 !important; letter-spacing: -.045em; }
.gxc .gxc-t, article.gxc .gxc-t, .g-panel.g-intro .it-title, .g-tabs .dk .dk-nm, .mp-games button > span:last-child { font-family: var(--display) !important; font-weight: 650 !important; letter-spacing: -.03em; }
.g-intro .it-title { text-transform: none !important; }
.yx-home .cat-t, .yx-home .yh-slogan, h1, h2 { font-family: var(--display) !important; }
.yx-tabs a, .yx-top .nav-link { font-family: var(--ui); }

/* dark mode reaches every edge: the page itself (not only <body>) is black, and so are the bounce areas */
:root[data-theme="dark"] { --ground: #000; background: #000; color-scheme: dark; }
:root[data-theme="light"] { --ground: #fff; background: #fff; color-scheme: light; }
:root[data-theme="dark"] body, :root[data-theme="dark"] main, :root[data-theme="dark"] section.block, :root[data-theme="dark"] .foot { background-color: #000; }
:root[data-theme="dark"] .game, :root[data-theme="dark"] .game-page { background-color: #000; }

/* Gify on black: his cloud turns ENERGIFY peach (and the corner Gify's shadow goes) */
/* on black he turns into his negative: a soft white cloud with ink-black eyes, his bolt still ENERGIFY coral */
:root[data-theme="dark"] svg.mascot .m-cloud { fill: #ecebef; }
:root[data-theme="dark"] svg.mascot .m-eye { fill: #0c090f; }
:root[data-theme="dark"] .rb-ray, :root[data-theme="dark"] svg.mascot { filter: drop-shadow(0 6px 18px rgba(255,255,255,.08)); }
:root[data-theme="dark"] .rb, :root[data-theme="dark"] .rb-ray { filter: none; }


/* the switch between light and dark: a short, plain cross-fade of the whole page (View Transitions: one snapshot,
   composited — cheap). Browsers without it simply switch. */
::view-transition-old(root), ::view-transition-new(root) { mix-blend-mode: normal; animation-duration: .32s; animation-timing-function: cubic-bezier(.4,0,.2,1); }
::view-transition-old(root) { animation-name: yf-out; } ::view-transition-new(root) { animation-name: yf-in; }
@keyframes yf-out { to { opacity: 0; } } @keyframes yf-in { from { opacity: 0; } }


/* ---------- v4.3 ---------- */
/* the hero on the same 3-column grid as the games: "Yaffle." large across the first two columns, Reaction in the third —
   one column wide, exactly like every card below it */
.yx-hero { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; align-items: center; }
.yx-hero-l { grid-column: 1 / span 2; }
.yx-hero-r { grid-column: 3; display: block; }
.yx-hero-r .gxc { width: 100% !important; --cw: min(62cqw, 282px); }   /* its stack grows with it */
/* the Reaction card grows to the right, into the free margin beside the hero: up to 80px wider, and never past the top
   bar's right edge (it lines up with it, at most). On screens narrower than the hero there is no margin, and it keeps its
   column's width. It also reaches a little to the left, into the empty space after the word (64–168px, never near it).
   Only in the three-column layout */
@media (min-width: 901px) { .yx-hero-r { margin-right: calc(-1 * clamp(0px, calc((100vw - var(--wrap) - 2 * var(--gutter)) / 2), 80px)); margin-left: calc(-1 * clamp(64px, calc(14vw - 64px), 168px)); } }
.yx-home .yh-word { font-size: clamp(76px, 13.4vw, 202px) !important; line-height: .82 !important; letter-spacing: -.055em !important; margin-left: -.04em !important; }
.yx-home .yh-slogan { font-size: clamp(24px, 2.6vw, 34px) !important; margin-top: 22px !important; }
@media (max-width: 900px) { .yx-hero { grid-template-columns: repeat(2, minmax(0, 1fr)); } .yx-hero-l { grid-column: 1 / -1; } .yx-hero-r { grid-column: 1; } }
@media (max-width: 620px) { .yx-hero { grid-template-columns: 1fr; } .yx-hero-r { grid-column: 1; } }

/* the sound pack, back in the header: a small pill with its icon and name */
.yx-pack { display: inline-flex; align-items: center; gap: 7px; height: 38px; padding: 0 12px 0 11px; border-radius: 999px; border: 1px solid var(--hair); background: transparent;
  color: var(--ink); font: 600 14px/1 var(--ui); cursor: pointer; }
.yx-pack:hover { background: var(--surface); }
.yx-pack .pi svg { width: 16px; height: 16px; display: block; }
.yx-pack .pc { opacity: .5; font-size: 10px; }
.yx-top .g-packwrap { position: relative; }
.yx-top .g-packmenu { right: 0; left: auto; top: calc(100% + 8px); }
@media (max-width: 720px) { .yx-pack .lbl { display: none; } }
/* phones: the sound menu spans the screen (it used to hang from its 54px button, too narrow to read), one pack per
   row, each with its name and what it sounds like */
@media (max-width: 640px) {
  .yx-top .tools, .yx-top .g-packwrap { position: static; }
  .yx-top .g-packmenu { left: 12px; right: 12px; top: 54px; width: auto; }
  .g-top .g-packmenu { left: 0; right: 0; width: auto; }
  .g-packmenu { grid-template-columns: 1fr; max-height: calc(100svh - 130px); }
  .g-packmenu button { grid-template-columns: 34px 1fr 14px; gap: 12px; padding: 10px; }
  .g-packmenu .pi { width: 34px; height: 34px; }
  .g-packmenu .pt b { white-space: normal; font-size: 15px; }
  .g-packmenu .pt small { display: block; font-size: 12.5px; line-height: 1.35; }
}

/* the top bar: edge to edge on every page, and black in dark mode (also once you scroll) */
.nav { left: 0 !important; right: 0 !important; width: 100%; border-radius: 0 !important; }
:root .nav.solid, :root.glass .nav.solid, .nav.yx-top { background: color-mix(in srgb, var(--ground) 90%, transparent) !important; border-bottom-color: var(--hair) !important; box-shadow: none !important; }
:root[data-theme="dark"] .nav, :root[data-theme="dark"] .nav.solid, :root[data-theme="dark"] .nav.yx-top { background: rgba(0,0,0,.88) !important; border-bottom-color: rgba(255,255,255,.1) !important; color: #f5f5f6; }
:root[data-theme="dark"] .nav:not(.solid):not(.yx-top) { background: #000 !important; }
:root[data-theme="dark"] .menu, :root[data-theme="dark"] .set-pop, :root[data-theme="dark"] .g-packmenu { background: #0d0d0e !important; color: #f5f5f6; border: 1px solid rgba(255,255,255,.1); box-shadow: 0 20px 40px -20px rgba(0,0,0,.8) !important; }
/* the game pages' top strip: the games and the tools, dark in dark mode */
:root[data-theme="dark"] .g-tabs .dk:not([aria-current="true"]) { background: #0d0d0e !important; --dk-ground: #0d0d0e !important; --dk-ink: #f5f5f6 !important; color: #f5f5f6; box-shadow: inset 0 0 0 1px rgba(255,255,255,.1) !important; }
:root[data-theme="dark"] .g-tabs .dk:not([aria-current="true"]) .dk-nm { color: #f5f5f6; }
:root[data-theme="dark"] .g-tools .g-close, :root[data-theme="dark"] .g-tools .set-btn { background: #0d0d0e !important; color: #f5f5f6 !important; box-shadow: inset 0 0 0 1px rgba(255,255,255,.12) !important; }
html, body { margin: 0 !important; }   /* the browser's 8 px default left a frame around every page */
/* phones: Gify's close button keeps its small look but gets a finger-sized touch area */
@media (pointer: coarse) { .rb-x { overflow: visible; } .rb-x::after { content: ""; position: absolute; inset: -12px; } }
/* the room code: one compact line — the code itself and a small copy button (it used to be nine big boxes) */
.mp-codebig { display: inline-flex !important; align-items: center; gap: 6px; width: auto; max-width: 100%; margin: 2px auto 4px !important; padding: 5px 6px 5px 14px;
  border-radius: 999px; background: rgba(255,255,255,.55); border: 1px solid rgba(255,255,255,.8); justify-self: center; }
.mp-codebig .cc, :root .mp-codebig span.cc { width: auto !important; height: auto !important; aspect-ratio: auto !important; display: inline !important; padding: 0 !important;
  background: none !important; border: 0 !important; box-shadow: none !important; border-radius: 0 !important;
  font: 700 19px/1 var(--name) !important; letter-spacing: .08em; color: #16171b; font-variant-numeric: tabular-nums; white-space: nowrap; }
.mp-codebig:not(:has(.cc-copy)) { padding-right: 14px; }
.cc-copy { width: 30px; height: 30px; display: grid; place-items: center; border: 0; border-radius: 50%; background: #16171b; color: #fff; cursor: pointer; flex: none; }
.cc-copy svg { width: 15px; height: 15px; }
.cc-copy.ok { background: #1f9d58; }
/* no small dots: separators are Yaffle's own bolt (core/marks.js), "Ready" is a check, "Live" a pulsing bolt */
.ysep { display: inline-block; width: .5em; height: .72em; margin: 0 .12em; vertical-align: -.06em; opacity: .5; font-style: normal; }
.ysep svg { display: block; width: 100%; height: 100%; }
.mp-roster li.ready .st::before { content: ""; display: inline-block; width: 13px; height: 13px; margin-right: 5px; vertical-align: -2px; background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2a10 10 0 1 0 0 20 10 10 0 0 0 0-20Zm4.7 7.6-5.4 5.6a1 1 0 0 1-1.4 0l-2.6-2.6a1 1 0 1 1 1.4-1.4l1.9 1.9 4.7-4.9a1 1 0 0 1 1.4 1.4Z'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2a10 10 0 1 0 0 20 10 10 0 0 0 0-20Zm4.7 7.6-5.4 5.6a1 1 0 0 1-1.4 0l-2.6-2.6a1 1 0 1 1 1.4-1.4l1.9 1.9 4.7-4.9a1 1 0 0 1 1.4 1.4Z'/%3E%3C/svg%3E") center / contain no-repeat; }
.mp-dot, .mp-live-k i { width: 8px; height: 12px; border-radius: 0; background: #ff2e44; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 302 454'%3E%3Cpath d='M128.9 22 L219.1 22 L111.7 201 L280 201 L280 257.2 L175.1 432 L87.1 432 L184.3 270 L22 270 L22 200.1Z' stroke='%23000' stroke-width='44' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 302 454'%3E%3Cpath d='M128.9 22 L219.1 22 L111.7 201 L280 201 L280 257.2 L175.1 432 L87.1 432 L184.3 270 L22 270 L22 200.1Z' stroke='%23000' stroke-width='44' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat; }
/* the end of a match with friends: the winners first (podium on top, your own score under it), each place named
   (1st, 2nd, 3rd), a crown for the winner and a medal for second and third; "you" is a small person, not a dot */
.g-final:has(.mp-final) .mp-res { order: -10; width: 100%; }
.g-final:has(.mp-final) { display: flex !important; flex-direction: column; }
/* your own score is on the podium already: the big one above it goes, so the winners are the first thing you see */
.g-final:has(.mp-final) > .g-kicker, .g-final:has(.mp-final) > .g-big, .g-final:has(.mp-final) > .g-mid { display: none !important; }
[data-game] .g-stage > .g-final:has(.mp-final) { padding-top: 28px; }
.pd-block { display: grid !important; place-items: center; align-content: center; gap: 2px; }
.pd-block small { font: 700 11px/1 var(--ui); letter-spacing: .02em; opacity: .85; }
.pd-medal { width: 22px; height: 22px; display: block; }
.pd-2 .pd-medal { color: var(--k1, #9aa0ab); }
.pd-3 .pd-medal { color: var(--k2, #b07a4a); }
.pd-medal svg { width: 100%; height: 100%; display: block; }
.pd.me .pd-name::after { content: "" !important; display: inline-block; width: .8em; height: .8em; margin-left: .3em; vertical-align: -.05em; background: currentColor; opacity: .7;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='8' r='4.2'/%3E%3Cpath d='M4 20.2c.6-4 4-6.4 8-6.4s7.4 2.4 8 6.4c.1.6-.4 1.1-1 1.1H5c-.6 0-1.1-.5-1-1.1Z'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='8' r='4.2'/%3E%3Cpath d='M4 20.2c.6-4 4-6.4 8-6.4s7.4 2.4 8 6.4c.1.6-.4 1.1-1 1.1H5c-.6 0-1.1-.5-1-1.1Z'/%3E%3C/svg%3E") center / contain no-repeat; }
/* the light that sweeps over a game tab on hover stays inside that tab (it used to run out over its neighbours) */
.g-tabs .dk { overflow: hidden; isolation: isolate; }
.g-tabs .dk::after { border-radius: inherit; }