/* Yaffle — shared: tokens, dark mode, marks, nav, sections, buttons, footer */
:root {
  --ground: #fbfbfd;
  --surface: #f2f2f5;
  --ink: #16171b;
  --muted: #62656f;
  --hair: #e2e3e9;
  --mark: #111114;
  --mark-rgb: 17, 17, 20;
  --bolt: 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' fill='black' stroke='black' stroke-width='44' stroke-linejoin='round'/%3E%3C/svg%3E");   /* the ENERGIFY logo (assets/img/energify.svg), used as a mask for every energy mark */
  --display: "Google Sans", "Product Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --name: "Bricolage Grotesque", "Google Sans", system-ui, -apple-system, "Segoe UI", sans-serif;   /* names only: the brand and the games */
  --body: "Google Sans", "Product Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --gutter: clamp(16px, 5vw, 56px);
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) body:not([data-mode="light"]) {
    --ground: #07080a;
    --surface: #0f1114;
    --ink: #eef0ea;
    --muted: #8f958a;
    --hair: #1f2226;
    --mark: #f4f5f0;
    --mark-rgb: 244, 245, 240;
    color-scheme: dark;
  }
}
:root[data-theme="dark"] body:not([data-mode="light"]), body[data-mode="dark"] {
  --ground: #07080a;
  --surface: #0f1114;
  --ink: #eef0ea;
  --muted: #8f958a;
  --hair: #1f2226;
  --mark: #f4f5f0;
  --mark-rgb: 244, 245, 240;
  color-scheme: dark;
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body {
  background: var(--ground);
  color: var(--ink);
  font-family: var(--body);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}
::selection { background: var(--ink); color: var(--ground); }
a { color: inherit; }
.mk { display: inline-block; flex: none; background: var(--mark);
  -webkit-mask: var(--bolt) center / contain no-repeat; mask: var(--bolt) center / contain no-repeat; }

#field { position: fixed; inset: 0; width: 100%; height: 100%; display: block; z-index: 0; }
#fx { position: fixed; inset: 0; width: 100%; height: 100%; display: block; z-index: 9; pointer-events: none; }
body { touch-action: manipulation; }
[hidden] { display: none !important; }

@keyframes rise { 0% { opacity: .45; transform: translateY(18px); } 100% { opacity: 1; transform: none; } }
.label .mk.spin { animation: spin .7s cubic-bezier(.2,1.3,.4,1); }
@keyframes spin { 0% { transform: rotate(-180deg) scale(.4); } 100% { transform: none; } }
@media (prefers-reduced-motion: reduce) { .rise, h2.lit, .label .mk.spin { animation: none; } }
@keyframes lit { 0% { opacity: .35; letter-spacing: -0.01em; } 100% { opacity: 1; } }
.brand .mk.charged { animation: charged .5s ease; }
/* the logo's four energy marks, right of the old wordmark (kept for the pages that still use the marks) */
.brand-bolts { display: inline-flex; align-items: center; gap: 1px; margin: 0 .5em 0 .3em; }
.brand-bolts .mk { width: 7px; height: 13px; background: #3fae70; }
.brand-bolts .mk:nth-child(1) { rotate: -20deg; }
.brand-bolts .mk:nth-child(2) { width: 6px; height: 11px; rotate: 25deg; }
.brand-bolts .mk:nth-child(3) { width: 8px; height: 15px; }
.brand-bolts .mk:nth-child(4) { width: 6px; height: 11px; rotate: -35deg; }
.brand .x { margin-right: .35em; }
@keyframes charged { 40% { transform: scale(1.6) rotate(-8deg); } }

/* ---------- Nav ---------- */
.nav {
  position: fixed; z-index: 10; left: 0; right: 0; top: 0;
  padding: calc(14px + env(safe-area-inset-top, 0px)) var(--gutter) 14px;
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  transition: background .3s, border-color .3s;
  border-bottom: 1px solid transparent;
}
.nav.solid {
  background: color-mix(in srgb, var(--ground) 96%, transparent);
  border-bottom-color: var(--hair);
}
.brand { display: inline-flex; align-items: center; gap: 0; text-decoration: none;
  font-family: var(--display); font-weight: 500; font-size: 18px; letter-spacing: -0.02em; white-space: nowrap; }
/* the logo: three bolts in a row, the same glyph as the energy-count game's own icon */
.brand-mark { display: inline-flex; align-items: center; gap: 2px; margin-right: 10px; }
.brand-mark .mk { width: 6px; height: 13px; }
.brand-mark .mk:nth-child(2) { width: 8px; height: 17px; }
.brand-mark .mk:nth-child(3) { width: 6px; height: 13px; }
.brand .full { display: inline-flex; align-items: center; gap: .4em; margin-left: .4em; }
.brand .x { color: var(--muted); font-weight: 400; }
.links { display: flex; gap: 28px; font-size: 14px; }
.links a { text-decoration: none; color: var(--muted); transition: color .2s; }
.links a:hover { color: var(--ink); }
.tools { display: flex; align-items: center; gap: 10px; }
.seg { display: inline-flex; border: 1px solid var(--hair); border-radius: 999px; padding: 3px; background: var(--ground); }
.seg button {
  font: 500 12px/1 var(--body); letter-spacing: .04em; color: var(--muted);
  background: none; border: 0; padding: 7px 9px; border-radius: 999px; cursor: pointer;
}
.seg button[aria-pressed="true"] { background: var(--ink); color: var(--ground); }
.mode {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px; width: 8.6em;   /* fixed width: switching language never moves the header */
  padding: 8px 13px; border-radius: 999px;
  border: 1px solid var(--hair); background: var(--ground); color: var(--ink);
  font: 400 14px/1 var(--body); cursor: pointer;
}
.mode .mk { width: 7px; height: 12px; }
.mode:hover, .seg:not(.glass-seg):hover { border-color: var(--muted); }
button:focus-visible, a:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; }
@media (max-width: 860px) { .links { display: none; } }
@media (max-width: 420px) { .brand .full { display: none; } .mode .lbl { display: none; } .mode { width: auto; } }

/* ---------- Sections ---------- */
section.block {
  position: relative; z-index: 1;
  background: var(--ground);
  padding-inline: var(--gutter);
  padding-block: clamp(72px, 11vw, 140px);
  border-top: 1px solid var(--hair);
}
.wrap { max-width: 1120px; margin: 0 auto; }
.label {
  display: inline-flex; align-items: center; gap: 10px;
  font-size: 12px; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: var(--muted);
}
.label .mk { width: 7px; height: 12px; }
h2 {
  margin: 18px 0 0;
  font-family: var(--display); font-weight: 400;
  font-size: clamp(32px, 5vw, 60px); line-height: 1.05; letter-spacing: -0.04em;
  text-wrap: balance; max-width: 22ch;
}
h3 { margin: 0; font-family: var(--display); font-weight: 500; font-size: 22px; letter-spacing: -0.02em; line-height: 1.2; }
p { margin: 0; }

/* nothing on the site is selectable/copyable except the contact details */
body { -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; -webkit-tap-highlight-color: transparent; }
.row .v, input, textarea { -webkit-user-select: text; user-select: text; -webkit-touch-callout: default; }
.row .v { user-select: all; -webkit-user-select: all; }
img, svg, canvas { -webkit-user-drag: none; }
.vortex, .vortex:focus { outline: none; -webkit-tap-highlight-color: transparent; }
button.vortex:focus-visible { outline: none; }

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 44px; padding: 0 20px; border-radius: 999px;
  border: 1px solid var(--ink); background: var(--ink); color: var(--ground);
  font: 400 16px/1 var(--body); letter-spacing: 0; cursor: pointer; text-decoration: none;
  transition: transform .2s, background .2s, border-color .2s;
}
.btn:hover { transform: translateY(-1px); }
.btn .mk { width: 9px; height: 16px; background: currentColor; }
.btn.ghost { background: var(--surface); color: var(--ink); border-color: var(--hair); }
.btn.ghost:hover { border-color: var(--muted); }
.btn.lg { min-height: 56px; padding: 0 28px; font-size: 18px; }
.actions { display: flex; gap: 14px; flex-wrap: wrap; justify-content: center; margin-top: 10px; pointer-events: auto; }



/* ---------- Pages: page transitions, skip link, language flash guard ---------- */
.lang-pending main, .lang-pending .links, .lang-pending .menu, .lang-pending .foot { visibility: hidden; }
.skip { position: fixed; z-index: 100; left: 12px; top: -60px; padding: 10px 16px; border-radius: 999px; background: var(--ink); color: var(--ground); text-decoration: none; font-size: 14px; }
.skip:focus { top: calc(10px + env(safe-area-inset-top, 0px)); }

/* ---------- Nav: real links, current page, phone menu ---------- */
.nav { display: grid; grid-template-columns: auto 1fr auto; }
.links { justify-self: center; }
.links a { position: relative; padding: 6px 2px; }
.links a[aria-current="page"] { color: var(--ink); }
.links a[aria-current="page"]::after { content: ""; position: absolute; left: 50%; bottom: -2px; width: 5px; height: 9px; transform: translateX(-50%); background: var(--mark);
  -webkit-mask: var(--bolt) center / contain no-repeat; mask: var(--bolt) center / contain no-repeat; }
.brand { justify-self: start; }
.tools { justify-self: end; }
.menu-btn { display: none; position: relative; width: 40px; height: 40px; flex: none; border-radius: 999px; border: 1px solid var(--hair); background: var(--ground); color: var(--ink); cursor: pointer; }
.menu-btn span { position: absolute; left: 12px; right: 12px; height: 1.6px; border-radius: 2px; background: currentColor; transition: transform .3s cubic-bezier(.2,.8,.2,1), top .3s; }
.menu-btn span:first-child { top: 15px; } .menu-btn span:last-child { top: 22px; }
.nav.open .menu-btn span:first-child { top: 18.5px; transform: rotate(45deg); } .nav.open .menu-btn span:last-child { top: 18.5px; transform: rotate(-45deg); }
.menu-btn:hover { border-color: var(--muted); }
.menu { position: fixed; z-index: 9; inset: 0; padding: calc(84px + env(safe-area-inset-top, 0px)) var(--gutter) calc(28px + env(safe-area-inset-bottom, 0px));
  background: var(--ground); overflow-y: auto; overscroll-behavior: contain; }
.menu-in { display: grid; gap: 4px; max-width: 520px; margin: 0 auto; }
.menu a { display: flex; align-items: center; gap: 16px; padding: 14px 6px; border-bottom: 1px solid var(--hair); text-decoration: none;
  font-family: var(--display); font-size: clamp(28px, 8vw, 40px); letter-spacing: -.035em; line-height: 1.1; color: var(--ink); }
.menu a .ni { width: 26px; height: 26px; flex: none; color: var(--muted); }
.menu a[aria-current="page"] .ni { color: var(--ink); }
.menu a[aria-current="page"]::after { content: ""; width: 8px; height: 14px; margin-left: auto; background: var(--mark); -webkit-mask: var(--bolt) center / contain no-repeat; mask: var(--bolt) center / contain no-repeat; }
.menu-more { display: grid; grid-template-columns: 1fr 1fr; gap: 0 16px; margin-top: 14px; }
.menu-more a { font-size: 19px; letter-spacing: -.01em; gap: 10px; border-bottom: 0; color: var(--muted); }
.menu-more a .ni { width: 20px; height: 20px; }
body.menu-open { overflow: hidden; }
@media (max-width: 860px) { .menu-btn { display: inline-block; } .nav { grid-template-columns: 1fr auto; } }
@media (min-width: 861px) { .menu { display: none !important; } }

/* ---------- Page head (every page except home) ---------- */
.page-head { border-top: 0; padding-top: calc(clamp(120px, 16vw, 200px) + env(safe-area-inset-top, 0px)); padding-bottom: clamp(40px, 6vw, 72px); }
.ph-title { margin: 18px 0 0; font-family: var(--display); font-weight: 400; font-size: clamp(44px, 8vw, 104px); line-height: 1; letter-spacing: -.05em; max-width: 16ch; text-wrap: balance; }
.ph-lede { margin-top: 22px; max-width: 34rem; color: var(--muted); font-size: clamp(17px, 2vw, 20px); text-wrap: pretty; }
section.block.tight { padding-top: 0; border-top: 0; }

/* ---------- Footer ---------- */
.foot { position: relative; z-index: 1; background: var(--ground); border-top: 1px solid var(--hair);
  padding: 34px var(--gutter) calc(28px + env(safe-area-inset-bottom, 0px)); display: grid; gap: 22px; font-size: 14px; color: var(--muted); }
.foot-row { display: flex; justify-content: space-between; align-items: center; gap: 16px 28px; flex-wrap: wrap; max-width: 1120px; width: 100%; margin: 0 auto; }
.foot-row.small { font-size: 13px; }
.foot-brand { font-size: 16px; color: var(--ink); gap: .35em; }
.foot-brand .mk { margin-right: 6px; }
.foot-links { display: flex; gap: 8px 22px; flex-wrap: wrap; }
.foot a { color: inherit; text-decoration: none; }
.foot a:hover, .foot a[aria-current="page"] { color: var(--ink); }
.foot .secret { opacity: .7; }
.page-head .wrap > * { animation: rise .8s cubic-bezier(.2,.8,.2,1) both; }
.page-head .wrap > :nth-child(2) { animation-delay: .06s; } .page-head .wrap > :nth-child(3) { animation-delay: .12s; } .page-head .wrap > :nth-child(4) { animation-delay: .18s; }
@media (prefers-reduced-motion: reduce) { .page-head .wrap > * { animation: none; } }
.sr { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* ---------- Language switch: liquid glass ----------
   A clear glass track; the chosen language sits under a glass drop you can tap or drag (see core/seg.js). */
.seg.glass-seg {
  --sg-tint-a: rgba(255,255,255,.45); --sg-tint-b: rgba(255,255,255,.25); --sg-rim: rgba(255,255,255,.95); --sg-rim-soft: rgba(255,255,255,.35);
  --sg-edge: rgba(20,22,40,.12); --sg-drop: rgba(20,22,40,.18);
  --th-a: rgba(255,255,255,.95); --th-b: rgba(255,255,255,.8); --th-drop: rgba(20,22,40,.16);
  position: relative; isolation: isolate; border: 0; touch-action: none; user-select: none; -webkit-user-select: none; cursor: grab;
  background: linear-gradient(180deg, var(--sg-tint-a), var(--sg-tint-b));
  -webkit-backdrop-filter: brightness(1.04); backdrop-filter: brightness(1.04);
  box-shadow: inset 0 1px 0 var(--sg-rim), inset 0 -1px 1px var(--sg-rim-soft), inset 0 -6px 10px -8px var(--sg-rim), 0 0 0 .5px var(--sg-edge), 0 6px 16px -8px var(--sg-drop);
}
.seg.glass-seg.dragging { cursor: grabbing; z-index: 30; }   /* the lifted lens floats over the neighbouring buttons */
.seg.glass-seg button { position: relative; z-index: 1; transition: color .25s; }
.seg.glass-seg button[aria-pressed="true"] { background: none; color: var(--ink); font-weight: 600; }
.seg-thumb {
  position: absolute; z-index: 0; left: 0; top: 3px; bottom: 3px; width: 30px; border-radius: 999px; pointer-events: none;   /* under the labels at rest */
  transform-origin: center; will-change: transform, width;
  background: linear-gradient(180deg, var(--th-a), var(--th-b));
  box-shadow: inset 0 1px 0 #fff, inset 0 -1px 1px rgba(255,255,255,.8), 0 0 0 .5px rgba(20,22,40,.08), 0 3px 8px -3px var(--th-drop);
  transition: width .45s cubic-bezier(.3,1.5,.45,1), box-shadow .3s, background .3s, border-radius .25s;
}
/* at rest the drop is a clean white pill; lifted, it turns into a fully clear bubble (just its bright rim and shadow) */
.seg.glass-seg.dragging .seg-thumb { z-index: 2; -webkit-backdrop-filter: none; backdrop-filter: none; }   /* lifted: a fully clear bubble over the labels */
.seg-thumb.free { transition: box-shadow .3s, background .3s, border-radius .25s; }
/* grabbed: the drop swells a little above the track, like lifting a bead of water */
.seg.glass-seg.dragging .seg-thumb { border-radius: 48% 48% 52% 52% / 42% 42% 58% 58%; box-shadow: inset 0 1px 0 #fff, inset 0 -1px 1px rgba(255,255,255,.6), inset 0 -6px 10px -6px rgba(255,255,255,.95),
    0 0 0 .5px rgba(20,22,40,.12), 0 10px 20px -6px var(--th-drop); }
.seg.glass-seg.dragging .seg-thumb { background: transparent;
  box-shadow: inset 0 1px 0 #fff, inset 0 -1px 1px rgba(255,255,255,.7), inset 0 -4px 7px -5px rgba(255,255,255,.95), inset 0 0 0 .5px rgba(255,255,255,.6),
    0 0 0 .5px rgba(20,22,40,.14), 0 12px 24px -8px rgba(20,22,40,.3); }
@media (prefers-color-scheme: dark) { body:not([data-mode="light"]) .seg.glass-seg {
  --sg-tint-a: rgba(255,255,255,.1); --sg-tint-b: rgba(255,255,255,.03); --sg-rim: rgba(255,255,255,.55); --sg-rim-soft: rgba(255,255,255,.14);
  --sg-edge: rgba(255,255,255,.08); --sg-drop: rgba(0,0,0,.5); --th-a: rgba(255,255,255,.26); --th-b: rgba(255,255,255,.08); --th-drop: rgba(0,0,0,.5); } }
body[data-mode="dark"] .seg.glass-seg {
  --sg-tint-a: rgba(255,255,255,.1); --sg-tint-b: rgba(255,255,255,.03); --sg-rim: rgba(255,255,255,.55); --sg-rim-soft: rgba(255,255,255,.14);
  --sg-edge: rgba(255,255,255,.08); --sg-drop: rgba(0,0,0,.5); --th-a: rgba(255,255,255,.26); --th-b: rgba(255,255,255,.08); --th-drop: rgba(0,0,0,.5); }
@media (prefers-reduced-motion: reduce) { .seg-thumb { transition: none; } }

/* header buttons as clear glass: theme switch and menu */
:root.glass .nav .mode, :root.glass .nav .menu-btn {
  --nb-tint-a: rgba(255,255,255,.14); --nb-tint-b: rgba(255,255,255,.02); --nb-rim: rgba(255,255,255,.95); --nb-rim-soft: rgba(255,255,255,.35);
  --nb-edge: rgba(20,22,40,.12); --nb-drop: rgba(20,22,40,.18);
  border: 0; color: var(--ink); isolation: isolate;
  background: linear-gradient(180deg, var(--nb-tint-a), var(--nb-tint-b));
  -webkit-backdrop-filter: saturate(1.7) brightness(1.06); backdrop-filter: saturate(1.7) brightness(1.06);
  box-shadow: inset 0 1px 0 var(--nb-rim), inset 0 -1px 1px var(--nb-rim-soft), inset 0 -6px 10px -8px var(--nb-rim), 0 0 0 .5px var(--nb-edge), 0 6px 16px -8px var(--nb-drop);
  transition: box-shadow .3s, background .3s, scale .4s cubic-bezier(.3,1.6,.5,1);
}
:root.glass .nav .mode.lens, :root.glass .nav .menu-btn.lens { -webkit-backdrop-filter: var(--lens) saturate(1.7) brightness(1.06); backdrop-filter: var(--lens) saturate(1.7) brightness(1.06); }
:root.glass .nav .mode:hover, :root.glass .nav .menu-btn:hover { --nb-tint-a: rgba(255,255,255,.4); scale: 1.04; }
:root.glass .nav .mode:active, :root.glass .nav .menu-btn:active { scale: .96; }
@media (prefers-color-scheme: dark) { :root.glass body:not([data-mode="light"]) .nav :is(.mode, :root.glass .menu-btn) {
  --nb-tint-a: rgba(255,255,255,.1); --nb-tint-b: rgba(255,255,255,.03); --nb-rim: rgba(255,255,255,.55); --nb-rim-soft: rgba(255,255,255,.14); --nb-edge: rgba(255,255,255,.08); --nb-drop: rgba(0,0,0,.5); }
  :root.glass body:not([data-mode="light"]) .nav :is(.mode, :root.glass .menu-btn):hover { --nb-tint-a: rgba(255,255,255,.18); } }
:root.glass body[data-mode="dark"] .nav :is(.mode, :root.glass .menu-btn) {
  --nb-tint-a: rgba(255,255,255,.1); --nb-tint-b: rgba(255,255,255,.03); --nb-rim: rgba(255,255,255,.55); --nb-rim-soft: rgba(255,255,255,.14); --nb-edge: rgba(255,255,255,.08); --nb-drop: rgba(0,0,0,.5); }
:root.glass body[data-mode="dark"] .nav :is(.mode, :root.glass .menu-btn):hover { --nb-tint-a: rgba(255,255,255,.18); }

/* ---------- Glass mode switch ---------- */
.glass-toggle { display: inline-flex; align-items: center; gap: 7px; padding: 8px 12px 8px 10px; border-radius: 999px;
  border: 1px solid var(--hair); background: var(--ground); color: var(--ink); font: 400 14px/1 var(--body); cursor: pointer; }
.glass-toggle svg { width: 16px; height: 16px; flex: none; }
.glass-toggle:hover { border-color: var(--muted); }
.glass-toggle[aria-pressed="true"] { background: #16171b; color: #fff; border-color: #16171b; }
/* Glass mode is light only: the dark/light switch steps aside */
:root.glass .nav .mode { display: none; }
:root.mode-switching body { opacity: 0; transition: opacity .2s; }
@media (max-width: 640px) { .glass-toggle .lbl { display: none; } .glass-toggle { width: 40px; height: 40px; padding: 0; justify-content: center; } }


/* behind the glass: flat, full-colour 2D shapes that drift and spin (CSS transforms only — cheap on phones) */
.gsx { display: none; }
:root.glass .gsx { display: block; position: absolute; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; }
:root.glass .gsx .shp { position: absolute; width: var(--s, 56px); aspect-ratio: 1; animation: shp-float var(--t, 16s) ease-in-out infinite alternate; }
:root.glass .gsx .shp svg { width: 100%; height: 100%; display: block; animation: shp-spin var(--r, 7s) linear infinite; }
:root.glass .gsx .s1 { --s: 64px; left: 8%;  top: 24%; --t: 14s; --r: 6s;  --mx: 18vw; --my: 10vh; }
:root.glass .gsx .s2 { --s: 52px; left: 62%; top: 14%; --t: 17s; --r: 5s;  --mx: -16vw; --my: 14vh; }
:root.glass .gsx .s3 { --s: 58px; left: 80%; top: 46%; --t: 15s; --r: 7s;  --mx: -22vw; --my: -8vh; }
:root.glass .gsx .s4 { --s: 60px; left: 30%; top: 52%; --t: 19s; --r: 4.5s; --mx: 20vw; --my: 12vh; }
:root.glass .gsx .s5 { --s: 48px; left: 12%; top: 76%; --t: 13s; --r: 8s;  --mx: 26vw; --my: -10vh; }
:root.glass .gsx .s6 { --s: 54px; left: 50%; top: 82%; --t: 16s; --r: 3.8s; --mx: -18vw; --my: -14vh; }
:root.glass .gsx .s7 { --s: 44px; left: 70%; top: 68%; --t: 12s; --r: 5.5s; --mx: 12vw; --my: 8vh; }
:root.glass .gsx .shp:nth-child(even) svg { animation-direction: reverse; }
@keyframes shp-float { 0% { transform: translate(0, 0); } 50% { transform: translate(calc(var(--mx) * .55), calc(var(--my) * -.6)); } 100% { transform: translate(var(--mx), var(--my)); } }
@keyframes shp-spin { to { transform: rotate(360deg); } }

/* ---------- Language switch, glass vibe ----------
   the track is a thick piece of clear glass: bright top edge, a glossy band across its upper half, light pooling
   at the bottom; the drop at rest is a small bead of glass (not a flat white pill) with its own shine; lifted, it
   becomes a clear bubble with a polished, uneven rim */
.seg.glass-seg {
  background: linear-gradient(180deg, rgba(255,255,255,.34), rgba(255,255,255,.1));
  -webkit-backdrop-filter: saturate(1.8) brightness(1.08); backdrop-filter: saturate(1.8) brightness(1.08);
  box-shadow: inset 0 1px 0 #fff, inset 0 -1px 0 rgba(255,255,255,.75), inset 0 0 0 1px rgba(255,255,255,.45),
    inset 0 -7px 10px -8px rgba(255,255,255,.95), inset 0 6px 10px -8px rgba(20,22,40,.07),
    0 0 0 .5px rgba(20,22,40,.12), 0 8px 20px -10px rgba(20,22,40,.28), 0 1px 2px rgba(20,22,40,.08);
}
.seg.glass-seg::before { content: ""; position: absolute; z-index: 1; left: 8px; right: 8px; top: 2px; height: 42%; border-radius: 999px; pointer-events: none;
  background: linear-gradient(180deg, rgba(255,255,255,.75), rgba(255,255,255,0)); opacity: .7; }
.seg-thumb {
  background: linear-gradient(180deg, rgba(255,255,255,.8), rgba(255,255,255,.38));
  -webkit-backdrop-filter: saturate(1.8) brightness(1.1); backdrop-filter: saturate(1.8) brightness(1.1);
  box-shadow: inset 0 1.5px 0 #fff, inset 0 -1px 1px rgba(255,255,255,.95), inset 0 -5px 7px -5px rgba(255,255,255,.95), inset 0 3px 5px -3px rgba(20,22,40,.07),
    0 0 0 .5px rgba(20,22,40,.12), 0 4px 10px -3px rgba(20,22,40,.25), 0 1px 2px rgba(20,22,40,.14);
}
/* a small highlight on the bead, like light caught on a drop */
.seg-thumb::after { content: ""; position: absolute; left: 22%; right: 22%; top: 2px; height: 34%; border-radius: 999px; pointer-events: none;
  background: linear-gradient(180deg, rgba(255,255,255,.95), rgba(255,255,255,0)); }
/* lifted: polished uneven rim (a thin conic ring) around the clear bubble */
.seg-thumb::before { content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 1px; pointer-events: none; opacity: 0; transition: opacity .25s;
  background: conic-gradient(from 210deg, #fff, rgba(255,255,255,.2) 18%, #fff 36%, rgba(255,255,255,.1) 52%, #fff 70%, rgba(255,255,255,.25) 86%, #fff);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0); }
.seg.glass-seg.dragging .seg-thumb::before { opacity: 1; }
.seg.glass-seg.dragging .seg-thumb::after { opacity: .8; left: 18%; right: 30%; }
.seg.glass-seg button[aria-pressed="true"] { text-shadow: 0 1px 0 rgba(255,255,255,.8); }
:root.glass .gsx.paused .shp, :root.glass .gsx.paused .shp svg { animation-play-state: paused; }

/* =====================================================================================================
   Glass mode: everything else becomes glass too (default mode untouched — every rule is under :root.glass)
   - a soft, static candy light behind the whole page, so the glass has colour to show
   - clear white glass for cards, panels, chips and fields; smoky dark glass for the main buttons
   ===================================================================================================== */
:root.glass {
  --gl-fill: linear-gradient(180deg, rgba(255,255,255,.82), rgba(255,255,255,.5));
  --gl-rim: inset 0 1.5px 0 #fff, inset 0 -1px 1px rgba(255,255,255,.6), inset 0 -14px 20px -16px rgba(255,255,255,.95);
  --gl-edge: 0 0 0 .5px rgba(20,22,40,.12);
  --gl-drop: 0 14px 30px -18px rgba(20,22,40,.3);
  --gl-ink: linear-gradient(180deg, rgba(22,23,27,.9), rgba(22,23,27,.74));
}
:root.glass body::before { content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background: radial-gradient(40% 35% at 6% 10%, rgba(255,79,168,.14), transparent 70%), radial-gradient(45% 40% at 94% 28%, rgba(10,124,255,.14), transparent 70%),
    radial-gradient(50% 40% at 26% 96%, rgba(46,204,64,.1), transparent 70%), radial-gradient(40% 35% at 86% 92%, rgba(139,92,255,.12), transparent 70%); }
:root.glass section.block, :root.glass .foot, :root.glass .gallery { background: transparent; }
:root.glass .foot { box-shadow: inset 0 1px 0 rgba(255,255,255,.9); border-top-color: rgba(20,22,40,.08); }

/* the header bar once you scroll, and the phone menu */
:root.glass .nav.solid { background: rgba(251,251,253,.66); -webkit-backdrop-filter: saturate(1.8) blur(14px); backdrop-filter: saturate(1.8) blur(14px); border-bottom-color: rgba(255,255,255,.8); box-shadow: 0 1px 0 rgba(20,22,40,.06); }
:root.glass .menu { background: rgba(251,251,253,.78); -webkit-backdrop-filter: saturate(1.8) blur(18px); backdrop-filter: saturate(1.8) blur(18px); }
:root.glass .menu a { border-bottom-color: rgba(20,22,40,.08); }

/* buttons: main = smoky glass, ghost = clear glass */
:root.glass .btn:not(.gl) { border: 0; background: var(--gl-ink); color: #fff;
  box-shadow: inset 0 1.5px 0 rgba(255,255,255,.35), inset 0 -1px 1px rgba(255,255,255,.12), 0 0 0 .5px rgba(20,22,40,.3), var(--gl-drop); }
:root.glass .btn.ghost:not(.gl), :root.glass .snd-btn, :root.glass .chip-btn:not(.gl), :root.glass .glass-toggle:not([aria-pressed="true"]) {
  border: 0; background: var(--gl-fill); color: var(--ink); box-shadow: var(--gl-rim), var(--gl-edge), var(--gl-drop); }
:root.glass .snd-btn:hover, :root.glass .btn.ghost:not(.gl):hover { box-shadow: var(--gl-rim), 0 0 0 .5px rgba(20,22,40,.2), 0 16px 32px -16px rgba(20,22,40,.35); }

/* Learn */
:root.glass .ln-folder, :root.glass .ln-topic, :root.glass .ln-pg, :root.glass .ln-more-a, :root.glass .ln-tablewrap, :root.glass .ln-article .ll, :root.glass .ln-article .ln-fact, :root.glass .ln-fact {
  border: 0; background: linear-gradient(170deg, color-mix(in srgb, var(--acc, #fff) 14%, rgba(255,255,255,.8)), rgba(255,255,255,.5));
  box-shadow: var(--gl-rim), var(--gl-edge), var(--gl-drop); }
:root.glass .ln-folder:hover, :root.glass .ln-topic:hover, :root.glass .ln-pg:hover { box-shadow: var(--gl-rim), 0 0 0 .5px rgba(20,22,40,.18), 0 22px 40px -18px rgba(20,22,40,.35); }
:root.glass .ln-folder:hover .lf-arrow, :root.glass .ln-folder:focus-visible .lf-arrow { color: var(--ink); }
:root.glass .ln-soon { border: 0; background: rgba(255,255,255,.35); box-shadow: inset 0 0 0 1px rgba(255,255,255,.8), var(--gl-edge); }
:root.glass .ll-n, :root.glass .ln-soon .lf-ic {
  background: linear-gradient(180deg, rgba(255,255,255,.95), rgba(255,255,255,.6)); box-shadow: inset 0 1px 0 #fff, 0 0 0 .5px rgba(20,22,40,.1), 0 4px 10px -6px rgba(20,22,40,.25); }
:root.glass .ln-folder .lf-ic, :root.glass .ln-bigic, :root.glass .ln-steps .ls-n, :root.glass .ln-topic .lt-ic {
  background: linear-gradient(160deg, color-mix(in srgb, var(--acc, #16171b) 70%, #16171b), color-mix(in srgb, var(--acc, #16171b) 40%, #0b0b0f)); color: #fff;
  box-shadow: inset 0 1.5px 0 rgba(255,255,255,.4), inset 0 -1px 1px rgba(255,255,255,.15), 0 8px 18px -10px color-mix(in srgb, var(--acc, #000) 60%, transparent); }
:root.glass .ln-key { background: var(--gl-ink); box-shadow: inset 0 1.5px 0 rgba(255,255,255,.3), 0 0 0 .5px rgba(20,22,40,.3), var(--gl-drop); }

/* Contact and Facts */
:root.glass .msg { background: var(--gl-fill); box-shadow: var(--gl-rim), var(--gl-edge), var(--gl-drop); }
:root.glass .fld input, :root.glass .fld textarea, :root.glass .mp-in { background: rgba(255,255,255,.6); border-color: rgba(255,255,255,.9);
  box-shadow: inset 0 2px 4px rgba(20,22,40,.06), 0 0 0 .5px rgba(20,22,40,.12); }
:root.glass .fact { background: linear-gradient(180deg, rgba(255,255,255,.7), rgba(255,255,255,.35)); border-radius: 18px; padding: 24px; border: 0; margin: 6px;
  box-shadow: var(--gl-rim), var(--gl-edge), var(--gl-drop); }
:root.glass .facts-grid { border-top: 0; }
:root.glass .rows .row { border-bottom-color: rgba(20,22,40,.08); }

/* inside the games: controls, fields, room screens, results */
:root.glass .g-card .btn:not(.ghost):not(.it-start) { background: linear-gradient(170deg, color-mix(in srgb, var(--k0) 80%, rgba(255,255,255,.3)), color-mix(in srgb, var(--k0) 90%, #16171b));
  box-shadow: inset 0 1.5px 0 rgba(255,255,255,.5), inset 0 -1px 1px rgba(255,255,255,.2), 0 0 0 .5px rgba(255,255,255,.5), 0 12px 24px -12px color-mix(in srgb, var(--k0) 60%, transparent); }
:root.glass .g-card .btn.ghost { background: var(--gl-fill); color: #16171b; box-shadow: var(--gl-rim), var(--gl-edge); }
:root.glass .stepper button, :root.glass .mp-codebig span, :root.glass .mp-who-list li, :root.glass .mp-board li, :root.glass .mp-seg, :root.glass .field {
  border: 0; background: var(--gl-fill); box-shadow: var(--gl-rim), var(--gl-edge), 0 8px 18px -12px rgba(20,22,40,.25); }
:root.glass .mp-seg button[aria-selected="true"] { background: #16171b; color: #fff; }
:root.glass .res-list { border-top: 0; padding: 4px 14px; border-radius: 16px; background: var(--gl-fill); box-shadow: var(--gl-rim), var(--gl-edge); }
:root.glass .res-list div { border-bottom-color: rgba(20,22,40,.07); }
:root.glass .res-list div:last-child { border-bottom: 0; }
:root.glass .g-packmenu .pi { background: linear-gradient(180deg, rgba(255,255,255,.95), rgba(255,255,255,.6)); box-shadow: inset 0 1px 0 #fff, 0 0 0 .5px rgba(20,22,40,.1); }
:root.glass .g-packmenu button[aria-checked="true"] .pi { background: #16171b; color: #fff; }

/* ---------- Glass mode, one recipe everywhere: the same glass as the game cards and their icon tiles ----------
   colour-tinted see-through body · bright top edge · light along the left side · light pooling at the bottom ·
   a white hairline edge · soft shadow. Surfaces with their own colour (--acc, --fill) use it; neutral ones are
   white glass with the same edges. Icon tiles everywhere are small pieces of coloured glass, like the game icons. */
:root.glass {
  --gl-rim: inset 0 1.5px 0 rgba(255,255,255,.92), inset 0 -1px 1px rgba(255,255,255,.5), inset 14px 0 24px -20px rgba(255,255,255,.85), inset 0 -22px 30px -24px rgba(255,255,255,.65);
  --gl-edge: 0 0 0 .5px rgba(255,255,255,.6), 0 0 0 1px rgba(20,22,40,.06);
  --gl-drop: 0 18px 36px -20px rgba(20,22,40,.32);
}
/* tinted glass cards (like the game cards) */
:root.glass .ln-folder, :root.glass .ln-topic, :root.glass .ln-article .ll, :root.glass .ln-article .ln-fact, :root.glass .ln-pg, :root.glass .ln-tablewrap { --tint: var(--acc); background: linear-gradient(160deg, color-mix(in srgb, var(--tint, #fff) 30%, rgba(255,255,255,.62)), color-mix(in srgb, var(--tint, #fff) 44%, rgba(255,255,255,.22))); box-shadow: var(--gl-rim), var(--gl-edge), var(--gl-drop); }
:root.glass .msg { --tint: #8b5cff; background: linear-gradient(160deg, color-mix(in srgb, var(--tint, #fff) 30%, rgba(255,255,255,.62)), color-mix(in srgb, var(--tint, #fff) 44%, rgba(255,255,255,.22))); }
:root.glass .fact { background: linear-gradient(160deg, color-mix(in srgb, var(--tint, #fff) 30%, rgba(255,255,255,.62)), color-mix(in srgb, var(--tint, #fff) 44%, rgba(255,255,255,.22))); box-shadow: var(--gl-rim), var(--gl-edge), var(--gl-drop); }
:root.glass .fact:nth-child(6n + 1) { --tint: #0a7cff; } :root.glass .fact:nth-child(6n + 2) { --tint: #ff4fa8; } :root.glass .fact:nth-child(6n + 3) { --tint: #2ecc40; }
:root.glass .fact:nth-child(6n + 4) { --tint: #8b5cff; } :root.glass .fact:nth-child(6n + 5) { --tint: #22c8ff; } :root.glass .fact:nth-child(6n) { --tint: #ff2e44; }
:root.glass .res-list, :root.glass .mp-board li, :root.glass .mp-who-list li, :root.glass .mp-codebig span, :root.glass .stepper button, :root.glass .field, :root.glass .mp-seg {
  --tint: var(--k0, #fff); background: linear-gradient(160deg, color-mix(in srgb, var(--tint, #fff) 30%, rgba(255,255,255,.62)), color-mix(in srgb, var(--tint, #fff) 44%, rgba(255,255,255,.22))); box-shadow: var(--gl-rim), var(--gl-edge), 0 10px 22px -14px rgba(20,22,40,.3); }
/* neutral pieces: white glass with the same edges */
:root.glass .btn.ghost:not(.gl), :root.glass .snd-btn, :root.glass .chip-btn:not(.gl), :root.glass .glass-toggle:not([aria-pressed="true"]), :root.glass .back-home,
:root.glass .g-packmenu, :root.glass .game .g-pack, :root.glass .game .g-close, :root.glass .g-tabs .dk:not([aria-current="true"]) {
  background: linear-gradient(170deg, rgba(255,255,255,.86), rgba(255,255,255,.46)); box-shadow: var(--gl-rim), var(--gl-edge), 0 10px 22px -14px rgba(20,22,40,.3); }
:root.glass .btn:not(.gl):not(.ghost) { box-shadow: inset 0 1.5px 0 rgba(255,255,255,.4), inset 12px 0 18px -14px rgba(255,255,255,.35), inset 0 -12px 18px -14px rgba(255,255,255,.25), 0 0 0 .5px rgba(255,255,255,.3), var(--gl-drop); }
/* icon tiles everywhere: small coloured glass, like the icons on the game cards */
:root.glass .ln-folder .lf-ic, :root.glass .ln-bigic, :root.glass .ln-topic .lt-ic, :root.glass .ln-steps .ls-n, :root.glass .ll-n {
  --tint: var(--acc); background: linear-gradient(160deg, color-mix(in srgb, var(--tint, #16171b) 55%, rgba(255,255,255,.45)), color-mix(in srgb, var(--tint, #16171b) 72%, transparent)); color: #fff; box-shadow: inset 0 1.5px 0 rgba(255,255,255,.9), inset 0 -1px 1px rgba(255,255,255,.5), inset 10px 0 16px -12px rgba(255,255,255,.8), inset 0 -12px 18px -12px rgba(255,255,255,.65), 0 0 0 .5px rgba(255,255,255,.6), 0 12px 24px -12px color-mix(in srgb, var(--tint, #000) 70%, transparent); }
:root.glass .ln-soon .lf-ic { --tint: #8f95a3; background: linear-gradient(160deg, color-mix(in srgb, var(--tint, #16171b) 55%, rgba(255,255,255,.45)), color-mix(in srgb, var(--tint, #16171b) 72%, transparent)); color: #fff; box-shadow: inset 0 1.5px 0 rgba(255,255,255,.9), inset 0 -1px 1px rgba(255,255,255,.5), inset 10px 0 16px -12px rgba(255,255,255,.8), inset 0 -12px 18px -12px rgba(255,255,255,.65), 0 0 0 .5px rgba(255,255,255,.6), 0 12px 24px -12px color-mix(in srgb, var(--tint, #000) 70%, transparent); }
:root.glass .g-packmenu .pi { --tint: #8f95a3; background: linear-gradient(160deg, color-mix(in srgb, var(--tint, #16171b) 55%, rgba(255,255,255,.45)), color-mix(in srgb, var(--tint, #16171b) 72%, transparent)); color: #fff; box-shadow: inset 0 1.5px 0 rgba(255,255,255,.9), inset 0 -1px 1px rgba(255,255,255,.5), inset 10px 0 16px -12px rgba(255,255,255,.8), inset 0 -12px 18px -12px rgba(255,255,255,.65), 0 0 0 .5px rgba(255,255,255,.6), 0 12px 24px -12px color-mix(in srgb, var(--tint, #000) 70%, transparent); }
:root.glass .g-packmenu button[aria-checked="true"] .pi { --tint: #16171b; }
:root.glass .menu a .ni { color: var(--ink); }

/* glass mode, Learn: the cards themselves are WHITE glass — only their icons carry the colour; pressing / hovering a
   topic card or a pager link fills it a little with its colour from the bottom (like light soaking into the glass).
   The folder cards use the same liquid fill as the home doors instead (see the "Hover: the glass fills with liquid"
   block above and .gl-card on the .ln-folder markup). */
:root.glass .ln-folder, :root.glass .ln-topic, :root.glass .ln-pg {
  position: relative; isolation: isolate; overflow: hidden;
  background: linear-gradient(170deg, rgba(255,255,255,.88), rgba(255,255,255,.5)); }
:root.glass .ln-topic::after, :root.glass .ln-pg::after {
  content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit; pointer-events: none;
  background: linear-gradient(0deg, color-mix(in srgb, var(--tint, #8b5cff) 30%, transparent), color-mix(in srgb, var(--tint, #8b5cff) 8%, transparent) 70%, transparent);
  transform: scaleY(0); transform-origin: bottom; transition: transform .55s cubic-bezier(.3,1.3,.5,1); }
:root.glass .ln-topic:hover::after, :root.glass .ln-pg:hover::after,
:root.glass .ln-topic:active::after, :root.glass .ln-pg:active::after,
:root.glass .ln-topic:focus-visible::after, :root.glass .ln-pg:focus-visible::after { transform: scaleY(1); }
:root.glass .ln-folder, :root.glass .ln-topic, :root.glass .ln-pg { --tint: var(--acc); }
@media (prefers-reduced-motion: reduce) { :root.glass .ln-topic::after, :root.glass .ln-pg::after { transition: none; } }


/* ---------- Hover: the glass fills with liquid (generic — any .gl / .gl-card element, on any page; JS adds the
   .gl-fill markup via core/liquid.js's fill()). Home's doors add their own edge/rim styling in home.css. ---------- */
:root.glass .gl, :root.glass .gl-card { --fill: #8b5cff; --lvl: 118%; --lvl-on: 42%; }
:root.glass .gl-card { --lvl-on: 30%; }
:root.glass .gl > .gl-fill, :root.glass .gl-card > .gl-fill { position: absolute; inset: 0; z-index: 1; border-radius: inherit; overflow: hidden; pointer-events: none; }
:root.glass .gl-fill i { position: absolute; left: -60%; width: 220%; aspect-ratio: 1; top: var(--lvl); border-radius: 43%;
  background: color-mix(in srgb, var(--fill) 34%, transparent);
  box-shadow: inset 0 3px 0 -1px rgba(255,255,255,.55), inset 0 10px 18px -12px rgba(255,255,255,.6);   /* the bright meniscus */
  transition: top .9s cubic-bezier(.34,1.35,.5,1); animation: gl-wave 7s linear infinite paused; }
:root.glass .gl-card .gl-fill i { left: -110%; width: 320%; border-radius: 46%; }
:root.glass .gl-card .gl-fill i.w2 { border-radius: 44%; }
:root.glass .gl-fill i.w2 { border-radius: 40%; background: color-mix(in srgb, var(--fill) 16%, transparent); box-shadow: none;
  animation-duration: 11s; animation-direction: reverse; transition-delay: .06s; top: calc(var(--lvl) - 3%); }
@keyframes gl-wave { to { transform: rotate(360deg); } }
/* bubbles */
:root.glass .gl-fill b { position: absolute; bottom: -10px; width: 6px; height: 6px; border-radius: 50%; opacity: 0;
  background: radial-gradient(circle at 35% 30%, #fff, rgba(255,255,255,.35) 60%, transparent 70%); box-shadow: 0 0 0 1px rgba(255,255,255,.35); }
:root.glass .gl-fill b:nth-of-type(1) { left: 18%; } :root.glass .gl-fill b:nth-of-type(2) { left: 42%; width: 4px; height: 4px; } :root.glass .gl-fill b:nth-of-type(3) { left: 66%; width: 8px; height: 8px; } :root.glass .gl-fill b:nth-of-type(4) { left: 84%; width: 5px; height: 5px; }
/* filled */
:root.glass .gl:hover, :root.glass .gl:focus-visible, :root.glass .gl-card:hover, :root.glass .gl-card:focus-visible { --lvl: var(--lvl-on); }
:root.glass .gl:hover .gl-fill b, :root.glass .gl:focus-visible .gl-fill b, :root.glass .gl-card:hover .gl-fill b, :root.glass .gl-card:focus-visible .gl-fill b { animation: gl-bubble 2.2s ease-in infinite; }
:root.glass .gl-fill b:nth-of-type(2) { animation-delay: .5s !important; } :root.glass .gl-fill b:nth-of-type(3) { animation-delay: 1.1s !important; } :root.glass .gl-fill b:nth-of-type(4) { animation-delay: 1.6s !important; }
@keyframes gl-bubble { 0% { opacity: 0; transform: translate(0, 0); } 15% { opacity: .9; } 70% { opacity: .7; } 100% { opacity: 0; transform: translate(4px, calc(-1 * var(--rise, 60px))); } }
:root.glass .gl-card { --rise: 170px; } :root.glass .gl { --rise: 40px; }
/* draining is slower and calmer than filling */
:root.glass .gl:not(:hover):not(:focus-visible) .gl-fill i, :root.glass .gl-card:not(:hover):not(:focus-visible) .gl-fill i { transition: top 1.2s cubic-bezier(.5,0,.3,1); }
@media (prefers-reduced-motion: reduce) { :root.glass .gl-fill i, :root.glass .gl-fill b { animation: none !important; } :root.glass .gl-fill i { transition: none !important; } }
/* a glossy sheen over the coloured glass (does not spin with the waves) */
:root.glass .gl-fill::after { content: ""; position: absolute; inset: 0; pointer-events: none; opacity: 0; transition: opacity .6s;
  background: linear-gradient(180deg, transparent 35%, rgba(255,255,255,.18) 60%, transparent 62%, transparent 80%, rgba(255,255,255,.12)); }
:root.glass .gl:hover .gl-fill::after, :root.glass .gl-card:hover .gl-fill::after { opacity: 1; }
/* waves only move while the glass is filled */
:root.glass .gl:hover .gl-fill i, :root.glass .gl:focus-visible .gl-fill i, :root.glass .gl-card:hover .gl-fill i, :root.glass .gl-card:focus-visible .gl-fill i { animation-play-state: running; }

/* Learn folder cards join the same liquid-fill system as the home doors, tinted with each folder's own accent —
   the icon and text sit in their own stacking context so the rising fill passes behind them, never over them */
:root.glass .ln-folder.gl-card { --fill: var(--acc); }
:root.glass .ln-folder.gl-card > *:not(.gl-fill) { position: relative; z-index: 2; }

/* =====================================================================================================
   Low-power devices (phones, low RAM/CPU — .lowfx, set once in BOOT before first paint): the costly live
   blur is dropped everywhere in this one place, instead of chasing it card by card in every stylesheet.
   The tint/gradient background stays, so the glass look survives — just without a backdrop-filter that
   has to be recomputed every frame anything behind it moves. The rim/edge/drop shadows also collapse to a
   single cheap layer each, since a multi-layer box-shadow is repainted every frame during a hover/scale
   transition too. ===================================================================================== */
:root.lowfx, :root.lowfx * { backdrop-filter: none !important; -webkit-backdrop-filter: none !important; }
:root.lowfx .gsx .shp, :root.lowfx .gsx .shp svg { animation: none !important; }
:root.lowfx {
  --gl-rim: inset 0 1px 0 rgba(255,255,255,.6);
  --gl-edge: 0 0 0 .5px rgba(20,22,40,.14);
  --gl-drop: 0 8px 16px -10px rgba(20,22,40,.28);
}

/* ---------- Settings: gear button + glass panel (core/settings.js) ---------- */
.set-wrap { position: relative; display: inline-flex; }
.set-btn { width: 40px; height: 40px; display: grid; place-items: center; border-radius: 999px; border: 1px solid var(--hair); background: var(--ground); color: var(--ink); cursor: pointer;
  transition: transform .4s cubic-bezier(.3,1.6,.5,1); }
.set-btn[aria-expanded="true"] svg { transform: rotate(60deg); }
.set-btn svg { transition: transform .4s cubic-bezier(.3,1.6,.5,1); }
:root.glass .set-btn { border: 0; background: linear-gradient(170deg, rgba(255,255,255,.86), rgba(255,255,255,.46)); box-shadow: var(--gl-rim), var(--gl-edge), 0 10px 22px -14px rgba(20,22,40,.3); }
.set-pop { position: absolute; right: 0; top: calc(100% + 10px); z-index: 80; width: 260px; padding: 16px; border-radius: 20px; display: grid; gap: 14px;
  background: var(--ground); border: 1px solid var(--hair); box-shadow: 0 24px 48px -20px rgba(20,22,40,.4); color: var(--ink); }
:root.glass .set-pop { border: 0; background: linear-gradient(180deg, rgba(255,255,255,.94), rgba(255,255,255,.8));
  -webkit-backdrop-filter: blur(18px) saturate(1.6); backdrop-filter: blur(18px) saturate(1.6); box-shadow: var(--gl-rim), var(--gl-edge), 0 24px 48px -20px rgba(20,22,40,.4); }
.set-title { margin: 0; font-size: 12px; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: var(--muted); }
.set-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; font-size: 15px; }
.set-sw { position: relative; width: 46px; height: 28px; flex: none; border-radius: 999px; border: 0; cursor: pointer; background: var(--hair); transition: background .25s; }
.set-sw i { position: absolute; left: 3px; top: 3px; width: 22px; height: 22px; border-radius: 50%; background: #fff; box-shadow: 0 2px 6px rgba(20,22,40,.3); transition: transform .3s cubic-bezier(.3,1.5,.5,1); }
.set-sw[aria-checked="true"] { background: #16171b; }
.set-sw[aria-checked="true"] i { transform: translateX(18px); }
/* Settings → "Wake sound": a small black pill; it turns green for a moment once the sound is back */
.set-fix { flex: none; padding: 7px 14px; border: 0; border-radius: 999px; cursor: pointer; font: inherit; font-size: 13.5px; font-weight: 500; color: #fff; background: #16171b; transition: background .25s; }
.set-fix.done { background: #3fae70; }
.set-btn:focus-visible, .set-sw:focus-visible, .set-fix:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; }

/* header / footer link to the Contact page */
.nav-link { font-size: 14px; text-decoration: none; color: var(--ink); opacity: .75; padding: 8px 12px; border-radius: 999px; transition: opacity .2s, background .2s; }
.nav-link:hover { opacity: 1; background: rgba(255,255,255,.6); }
.foot-link { padding: 0; opacity: .8; text-decoration: underline; text-underline-offset: 3px; }


/* Ray blinks (only faces with open eyes carry .blinks) */
svg.blob .eyes.blinks { transform-box: fill-box; transform-origin: center; animation: ray-blink 5.6s infinite; animation-delay: var(--bd, 0s); }
/* a natural blink: one quick blink, a pause, then now and then a double blink */
@keyframes ray-blink { 0%, 38%, 42.5%, 88%, 91%, 93%, 96%, 100% { transform: scaleY(1); } 40% { transform: scaleY(.08); } 89.5% { transform: scaleY(.08); } 94.5% { transform: scaleY(.08); } }
@media (prefers-reduced-motion: reduce) { svg.blob .eyes.blinks { animation: none; } }

/* an angry cloud rumbles */
svg.blob.ex-angry, svg.blob.ex-fury { animation: ray-rumble .18s linear infinite; }
svg.blob.ex-fury { animation-duration: .09s; }
@keyframes ray-rumble { 0%, 100% { transform: translate(0, 0); } 25% { transform: translate(-1.5px, .5px); } 50% { transform: translate(1.5px, -.5px); } 75% { transform: translate(-1px, -.5px); } }
@media (prefers-reduced-motion: reduce) { svg.blob.ex-angry, svg.blob.ex-fury { animation: none; } }

/* ---------- Ray, bottom right on every page: small, silent, removable ---------- */
.rb { position: fixed; right: max(14px, env(safe-area-inset-right)); bottom: calc(14px + env(safe-area-inset-bottom, 0px)); z-index: 60; width: 64px; height: 64px; }
.rb-ray { width: 100%; height: 100%; padding: 0; border: 0; background: none; cursor: pointer; touch-action: none; -webkit-tap-highlight-color: transparent; outline: none; pointer-events: none; }
/* only the cloud itself is Ray: clicks and hovers on the empty corners of his button do nothing */
.rb-ray svg { pointer-events: none; }
.rb-ray svg :is(rect, circle, ellipse, path) { pointer-events: visiblePainted; cursor: pointer; }
.rb-ray:focus-visible { outline: 2px solid #4fb584; outline-offset: 2px; border-radius: 16px; }
.rb-art, .rb-art svg { display: block; width: 100%; height: 100%; overflow: visible; }
.rb-x { position: absolute; top: -4px; right: -4px; width: 20px; height: 20px; padding: 0; border: 0; border-radius: 50%; cursor: pointer; font: 600 13px/20px system-ui, sans-serif; color: #16171b;
  background: rgba(255,255,255,.9); box-shadow: 0 2px 6px rgba(20,22,30,.2); opacity: 0; transition: opacity .2s; }
.rb:hover .rb-x, .rb:focus-within .rb-x { opacity: 1; }
@media (hover: none) { .rb-x { opacity: .75; } }
/* he flashes like lightning, in Energify's colours: white, then black with a coral glow */
.rb.flash .rb-art svg { animation: rb-bolt 1.6s steps(1) both; }
@keyframes rb-bolt { 0%, 20%, 44% { filter: invert(1) drop-shadow(0 0 14px #ff9a8a); } 10%, 32%, 60% { filter: drop-shadow(0 0 16px #ff9a8a) drop-shadow(0 0 4px #fff); } 80%, 100% { filter: none; } }
/* the storm (a canvas the lightning is drawn on): the site under it turns Energify for a moment — black and white (the
   page inverted, like the studio's dark site), lit coral from the strike — and fades back */
.rb-storm { position: fixed; inset: 0; width: 100vw; height: 100vh; z-index: 59; pointer-events: none; transition: opacity .6s ease; }
/* under the bolts: the page in black and white (inverted), then a peach light multiplied over it — ENERGIFY's three colours */
.rb-bw { position: fixed; inset: 0; z-index: 57; pointer-events: none; transition: opacity .6s ease;
  -webkit-backdrop-filter: grayscale(1) invert(1) contrast(1.25); backdrop-filter: grayscale(1) invert(1) contrast(1.25); }
.rb-tint { position: fixed; inset: 0; z-index: 58; pointer-events: none; mix-blend-mode: multiply; transition: opacity .6s ease; }
@media (prefers-reduced-motion: reduce) { .rb.flash .rb-art svg { animation: none; } }
/* he leans toward the cursor, breathes and squashes: ray-buddy.js moves him on springs, frame by frame, and blinks his eyes
   at uneven times itself (so the CSS blink is off here) */
.rb-art { transform-origin: 50% 85%; }
.rb svg.blob .eyes.blinks { animation: none; }
.rb-dust { position: fixed; inset: 0; width: 100vw; height: 100vh; z-index: 59; pointer-events: none; }
html.rb-wreck body * { pointer-events: none !important; }
html.rb-wreck .rb-x, html.rb-wreck .rb-ray svg :is(rect, circle, ellipse, path) { pointer-events: auto !important; }
/* Ray pops back in */
.rb.pop { animation: rb-pop .6s cubic-bezier(.3,1.6,.5,1) both; }
@keyframes rb-pop { 0% { transform: scale(0); opacity: 0; } 60% { transform: scale(1.18); opacity: 1; } 100% { transform: none; } }
/* the button that brings him back, in his corner */
.rb-back { position: fixed; right: max(14px, env(safe-area-inset-right)); bottom: calc(14px + env(safe-area-inset-bottom, 0px)); z-index: 60; display: inline-flex; align-items: center; gap: 6px;
  padding: 6px 12px 6px 6px; border: 0; border-radius: 999px; cursor: pointer; font: inherit; font-size: 12.5px; color: #16171b;
  background: rgba(255,255,255,.72); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); box-shadow: inset 0 0 0 1px rgba(255,255,255,.9), 0 8px 20px -12px rgba(20,22,40,.4);
  animation: rb-pop .5s cubic-bezier(.3,1.6,.5,1) both; }
.rb-back:hover { background: rgba(255,255,255,.9); }
.rb-back-ic, .rb-back-ic svg { display: block; width: 26px; height: 26px; }
@media (prefers-reduced-motion: reduce) { .rb.pop, .rb-back { animation: none; } }

/* Ray's newer faces move a little: hearts beat, spirals spin, stars circle his head, tears roll, hearts float up */
svg.blob .beat { transform-box: fill-box; transform-origin: center; animation: ray-beat 1s ease-in-out infinite; }
/* shock: one jolt up, then he stays tall and wide-eyed */
svg.blob.ex-shock { animation: ray-jolt .45s cubic-bezier(.3,1.6,.5,1); transform-origin: 50% 78%; }
@keyframes ray-jolt { 0% { transform: scale(1.06, .9); } 45% { transform: translateY(-4%) scale(.96, 1.05); } 100% { transform: none; } }
@keyframes ray-beat { 0%, 100% { transform: scale(1); } 30% { transform: scale(1.1); } 55% { transform: scale(.97); } }
svg.blob .spin { transform-box: fill-box; transform-origin: center; animation: ray-spin 1.1s linear infinite; }
@keyframes ray-spin { to { transform: rotate(360deg); } }
svg.blob .tears { animation: ray-tears 1.2s ease-in infinite; }
@keyframes ray-tears { 0% { transform: translateY(0); opacity: 0; } 20% { opacity: 1; } 100% { transform: translateY(14px); opacity: 0; } }
svg.blob .float { animation: ray-float 1.6s ease-out infinite; }
@keyframes ray-float { 0% { transform: translateY(6px); opacity: 0; } 30% { opacity: 1; } 100% { transform: translateY(-10px); opacity: 0; } }
/* dizzy: he sways from his base like a spinning top running down — lean, squash, lean the other way — and the orbit over his
   head tips with him */
svg.blob.ex-dizzy { animation: ray-sway 1.5s cubic-bezier(.45,0,.55,1) infinite; transform-origin: 50% 78%; }
@keyframes ray-sway { 0%, 100% { transform: rotate(-7deg) scale(1, 1); } 25% { transform: rotate(0) scale(1.05, .95); } 50% { transform: rotate(7deg) scale(1, 1); } 75% { transform: rotate(0) scale(1.05, .95); } }
svg.blob .halo { transform-box: view-box; transform-origin: 52px 14px; animation: ray-halo 1.5s cubic-bezier(.45,0,.55,1) infinite; }
@keyframes ray-halo { 0%, 100% { transform: rotate(5deg); } 50% { transform: rotate(-5deg); } }
/* the mascot's little extras (core/mascot.js): they ease in with a new face; asleep his zZ drift up and fade, one breath
   at a time; angry, coral sparks crackle at his sides; startled, three marks pop out */
svg.mascot .props > * { animation: m-in .3s ease-out both; }
@keyframes m-in { from { opacity: 0; transform: scale(.85); } }
svg.mascot .zz { animation: ray-zz 2.6s ease-in-out infinite; }
@keyframes ray-zz { 0%, 100% { transform: translate(0, 2px); opacity: .55; } 50% { transform: translate(2px, -3px); opacity: 1; } }
svg.mascot .zap { animation: m-zap .24s steps(2) infinite; }
@keyframes m-zap { 50% { opacity: .25; transform: translate(.6px, -.6px); } }
svg.mascot .bang { animation: m-bang .45s cubic-bezier(.3,1.7,.5,1) both; }
@keyframes m-bang { from { transform: scale(0) rotate(-20deg); } }
svg.mascot .dot { animation: m-dot 1.4s ease-in-out infinite both; }
@keyframes m-dot { 0%, 100% { opacity: .25; transform: translateY(2px); } 40% { opacity: 1; transform: translateY(-2px); } }
svg.mascot .shades { animation: m-shades .5s cubic-bezier(.3,1.5,.5,1) both; }
@keyframes m-shades { from { opacity: 0; transform: translateY(-16px); } 60% { opacity: 1; } }
svg.mascot .rain path { animation: m-rain .7s linear infinite both; }
@keyframes m-rain { from { transform: translateY(-2px); opacity: 0; } 30% { opacity: 1; } to { transform: translateY(12px); opacity: 0; } }
svg.mascot .strike path { animation: m-strike .5s steps(1) infinite both; }
@keyframes m-strike { 0%, 40% { opacity: 1; } 20%, 60%, 100% { opacity: 0; } }
/* a living mascot shakes, sways and spins from its rig; the CSS versions are only for the still drawings */
svg.mascot.rigged.ex-angry, svg.mascot.rigged.ex-fury, svg.mascot.rigged.ex-dizzy, svg.mascot.rigged.ex-shock { animation: none; }
@media (prefers-reduced-motion: reduce) { svg.mascot .props > *, svg.mascot .zz, svg.mascot .zap, svg.mascot .bang, svg.mascot .dot, svg.mascot .shades, svg.mascot .rain path, svg.mascot .strike path { animation: none; } }
@media (prefers-reduced-motion: reduce) { svg.blob .beat, svg.blob .spin, svg.blob .halo, svg.blob .tears, svg.blob.ex-shock, svg.blob.ex-dizzy { animation: none; } }

/* ---------- Yaffle: the wordmark "Yaffle." (the dot in ENERGIFY peach), used in the header and footer of every page ---------- */
.brand.yb { font-family: var(--display); font-weight: 600; font-size: 22px; letter-spacing: -.045em; line-height: 1; gap: 0; }
.yb-dot { color: #ff9a8a; margin-left: .02em; }
.brand.yb:hover .yb-dot { animation: yb-blink .5s cubic-bezier(.3,1.6,.5,1); }
@keyframes yb-blink { 40% { transform: translateY(-3px); } }
.brand.yb .yb-dot { display: inline-block; }
.nav-lang { margin-left: 2px; }
.nav-lang button { min-width: 38px; }
@media (max-width: 420px) { .tools .nav-link { padding: 8px; } }
/* footer: the wordmark with the slogan, every game, and the studio credit */
.foot-id { display: inline-flex; align-items: baseline; gap: 12px; flex-wrap: wrap; }
.foot-slogan { color: var(--muted); }
.foot-games { display: flex; flex-wrap: wrap; gap: 6px 16px; }
.foot-games a, .foot-meta a { color: var(--muted); text-decoration: none; transition: color .2s; }
.foot-games a:hover, .foot-meta a:hover { color: var(--ink); }
.foot-meta { color: var(--muted); }
@media (prefers-reduced-motion: reduce) { .brand.yb:hover .yb-dot { animation: none; } }
/* Gify in the corner: a little bigger on computers, where 64 px got lost; phones keep the small one */
@media (hover: hover) and (pointer: fine) and (min-width: 900px) {
  .rb { width: 92px; height: 92px; right: 22px; bottom: 18px; }
  .rb-x { top: 0; right: 0; }
}

/* ---------- type: two tiers ----------
   Display (Bricolage Grotesque): the brand, page and section headings, the hero, every game's name, the main calls to
   action and big numbers. Body (Google Sans, the site's font): paragraphs, descriptions, small interface text, forms. */
.brand.yb, .yh .yh-word, .yh .yh-slogan, h1, h2, .cat-t, .ph-title, .ct-title, .game-page h1,
article.gxc .gxc-t, .g-panel.g-intro .it-title, .g-tabs .dk .dk-nm, .mp-games button > span:last-child,
.gxc-play, .dc-big, .round-btn.it-start, .g-big, .g-mid, .g-count, .freq, .mp-who, .mp-win-n, .mp-codebig span { font-family: var(--name) !important; }
.brand.yb, .yh .yh-word { font-weight: 700; }
article.gxc .gxc-t, .g-panel.g-intro .it-title { font-weight: 650; }
h2, .cat-t, .ph-title, .ct-title, .game-page h1, .yh .yh-slogan { font-weight: 600; letter-spacing: -.035em; }
.g-big, .g-count, .freq, .mp-who { font-weight: 600; }
.g-mid, .mp-win-n, .dc-big { font-weight: 600; }
/* "Yaffle." — the full stop is part of the name and always ENERGIFY peach */
.yb-dot, .brand.yb .yb-dot, .yh-word .yb-dot { color: #ff9a8a; margin-left: .015em; }
.yh-word .yb-dot { display: inline-block; }