/* ============================================================
   Clickaroo · UI Modernization Layer · 2026
   Premium dark / deep-navy / purple-glow / glassmorphism
   This layer ONLY restyles. It never removes functionality,
   ids, translations, SEO or accessibility hooks.
   ============================================================ */

:root {
  --bg: #05060f;
  --navy-0: #05060f;
  --navy-1: #0a0c1f;
  --navy-2: #10132b;
  --violet: #7c5cff;
  --violet-soft: #a78bfa;
  --glow: rgba(124, 92, 255, 0.32);
  --accent-cyan: #6ee7f9;
  --accent-pink: #f27ad6;
  --accent-amber: #ffd166;
  --accent-green: #86efac;
  --glass: rgba(255, 255, 255, 0.045);
  --glass-strong: rgba(255, 255, 255, 0.08);
  --hairline: rgba(255, 255, 255, 0.09);
  --hairline-strong: rgba(255, 255, 255, 0.16);
  --text: #f4f5fb;
  --muted: rgba(232, 234, 246, 0.68);
  --soft: rgba(232, 234, 246, 0.5);
  --radius-lg: 26px;
  --radius-md: 18px;
  --shadow-soft: 0 10px 30px rgba(2, 4, 14, 0.45);
  --ring: 0 0 0 3px rgba(110, 231, 249, 0.55);
}

/* ---------- Base canvas: deep navy + purple glow ---------- */
body {
  background:
    radial-gradient(1000px 620px at 18% -8%, rgba(124, 92, 255, 0.20), transparent 60%),
    radial-gradient(900px 560px at 88% 4%, rgba(110, 231, 249, 0.10), transparent 55%),
    radial-gradient(760px 520px at 50% 108%, rgba(242, 122, 214, 0.08), transparent 60%),
    linear-gradient(180deg, #070920 0%, #05060f 52%, #04040b 100%);
  color: var(--text);
}

.siteShell::before {
  opacity: 0.28;
  background-size: 56px 56px, 104px 104px;
}

.siteShell {
  animation: ui26FadeUp 0.6s cubic-bezier(0.22, 1, 0.36, 1) both;
}

@keyframes ui26FadeUp {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ---------- Header: minimal glass bar ---------- */
.siteHeader {
  position: sticky;
  top: max(10px, env(safe-area-inset-top));
  z-index: 60;
  margin-top: calc(10px + env(safe-area-inset-top, 0px));
  padding: 10px 16px;
  border: 1px solid var(--hairline);
  border-radius: 999px;
  background: rgba(9, 11, 28, 0.55);
  backdrop-filter: blur(22px) saturate(1.4);
  -webkit-backdrop-filter: blur(22px) saturate(1.4);
  box-shadow: var(--shadow-soft), inset 0 1px 0 rgba(255, 255, 255, 0.06);
}

.logoBubble {
  width: 42px;
  height: 42px;
  font-size: 24px;
  border-radius: 30% 44% 36% 46%;
  background:
    radial-gradient(circle at 30% 26%, rgba(255,255,255,0.9) 0 8%, transparent 9%),
    linear-gradient(135deg, var(--accent-amber), var(--accent-pink) 45%, var(--violet) 72%, var(--accent-cyan));
  box-shadow: 0 0 0 3px rgba(255,255,255,0.08), 0 10px 26px rgba(0,0,0,0.35), 0 0 30px var(--glow);
}

.logoText {
  font-size: clamp(24px, 3vw, 32px);
  letter-spacing: -0.045em;
  background: linear-gradient(92deg, #ffffff 0%, #dcd4ff 45%, var(--accent-cyan) 100%);
  -webkit-background-clip: text;
  background-clip: text;
}

.langToggle {
  border-color: var(--hairline-strong);
  background: var(--glass-strong);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.1);
  transition: transform 0.18s ease, border-color 0.18s ease, background 0.18s ease;
}

.langToggle:hover,
.langToggle:focus-visible {
  border-color: rgba(167, 139, 250, 0.75);
  background: rgba(124, 92, 255, 0.18);
  box-shadow: 0 0 24px var(--glow), inset 0 1px 0 rgba(255,255,255,0.12);
}

.langToggle:focus-visible {
  outline: none;
  box-shadow: var(--ring), 0 0 24px var(--glow);
}

/* ---------- Hero: SaaS-grade split layout ---------- */
.hero {
  align-items: center;
  padding-top: clamp(44px, 7vw, 84px);
}

.eyebrow {
  gap: 10px;
  padding: 8px 14px;
  border-color: rgba(167, 139, 250, 0.35);
  background: rgba(124, 92, 255, 0.12);
  color: #ded6ff;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.09em;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

.eyebrow::before {
  content: "";
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--violet-soft);
  box-shadow: 0 0 12px var(--violet);
  animation: ui26Pulse 2.6s ease-in-out infinite;
}

@keyframes ui26Pulse {
  0%, 100% { transform: scale(1); opacity: 1; }
  50% { transform: scale(1.35); opacity: 0.6; }
}

h1 {
  font-size: clamp(42px, 6.6vw, 82px);
  line-height: 1.02;
  letter-spacing: -0.045em;
  font-weight: 900;
}

.gradientText {
  background: linear-gradient(96deg, #ffffff 0%, #eae4ff 34%, var(--violet-soft) 62%, var(--accent-cyan) 100%);
  -webkit-background-clip: text;
  background-clip: text;
}

.heroLead {
  margin-top: 22px;
  max-width: 620px;
  font-size: clamp(17px, 1.8vw, 20px);
  line-height: 1.6;
  color: var(--muted);
}

.microNote {
  flex-basis: 100%;
  margin-top: 4px;
  font-size: 13px;
  font-weight: 650;
  color: var(--soft);
  letter-spacing: 0.01em;
}

/* ---------- Buttons: premium, glass, no loud gradients ---------- */
.startButton {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  min-height: 58px;
  padding: 16px 28px;
  border-radius: 16px;
  font-size: 17px;
  font-weight: 800;
  letter-spacing: -0.01em;
  color: #ffffff;
  background: linear-gradient(140deg, #8b6bff 0%, var(--violet) 55%, #6247d9 100%);
  border: 1px solid rgba(255, 255, 255, 0.18);
  box-shadow:
    0 10px 28px rgba(124, 92, 255, 0.35),
    inset 0 1px 0 rgba(255, 255, 255, 0.28),
    inset 0 -2px 0 rgba(0, 0, 0, 0.18);
  transition: transform 0.2s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.2s ease, background 0.2s ease, border-color 0.2s ease, filter 0.2s ease;
}

.startButton:hover {
  transform: translateY(-2px);
  filter: none;
  box-shadow:
    0 16px 40px rgba(124, 92, 255, 0.45),
    0 0 34px var(--glow),
    inset 0 1px 0 rgba(255, 255, 255, 0.3);
}

.startButton:active {
  transform: translateY(0) scale(0.985);
}

/* Secondary CTAs → quiet glass */
.startButton.wordarooLaunchButton,
.startButton.letterPopLaunchButton {
  color: var(--text);
  background: var(--glass-strong);
  border: 1px solid var(--hairline-strong);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  box-shadow: var(--shadow-soft), inset 0 1px 0 rgba(255, 255, 255, 0.1);
}

.startButton.wordarooLaunchButton:hover,
.startButton.letterPopLaunchButton:hover {
  background: rgba(255, 255, 255, 0.12);
  border-color: rgba(167, 139, 250, 0.6);
  box-shadow: 0 14px 34px rgba(2, 4, 14, 0.5), 0 0 26px rgba(124, 92, 255, 0.22), inset 0 1px 0 rgba(255, 255, 255, 0.12);
}

.startButton:focus-visible {
  outline: none;
  box-shadow: var(--ring), 0 12px 32px rgba(124, 92, 255, 0.4);
}

/* Ripple (spawned by JS) */
.ui26Ripple {
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
  z-index: 0;
  background: radial-gradient(circle, rgba(255, 255, 255, 0.45) 0%, rgba(255, 255, 255, 0) 70%);
  transform: scale(0);
  animation: ui26Ripple 0.65s ease-out forwards;
}

@keyframes ui26Ripple {
  to { transform: scale(3.2); opacity: 0; }
}

/* ---------- Trust chips: quiet capsules ---------- */
.trustGrid {
  display: flex;
  flex-wrap: wrap;
  margin-top: 30px;
  gap: 8px;
}

.trustChip {
  flex: 0 0 auto;
  width: auto;
  min-height: 44px;
  padding: 0 16px;
  white-space: nowrap;
  justify-content: center;
  border-radius: 999px;
  border: 1px solid var(--hairline);
  background: var(--glass);
  color: var(--muted);
  font-size: 13.5px;
  font-weight: 700;
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  transition: border-color 0.2s ease, background 0.2s ease, transform 0.2s ease;
}

.trustChip:hover {
  border-color: rgba(167, 139, 250, 0.5);
  background: rgba(124, 92, 255, 0.1);
  transform: translateY(-1px);
}

/* ---------- Game cards: glass, alive, glowing ---------- */
.gamesShowcase {
  position: relative;
  display: grid;
  gap: 16px;
  transition: transform 0.25s cubic-bezier(0.22, 1, 0.36, 1);
}

.landingGameCard {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  border-radius: var(--radius-lg) !important;
  border: 1px solid var(--hairline) !important;
  background:
    radial-gradient(420px 220px at 82% -20%, var(--card-accent, rgba(124, 92, 255, 0.26)), transparent 68%),
    linear-gradient(160deg, rgba(255, 255, 255, 0.07) 0%, rgba(255, 255, 255, 0.025) 40%, rgba(8, 10, 26, 0.5) 100%) !important;
  backdrop-filter: blur(18px) saturate(1.3);
  -webkit-backdrop-filter: blur(18px) saturate(1.3);
  box-shadow: var(--shadow-soft), inset 0 1px 0 rgba(255, 255, 255, 0.08) !important;
  cursor: pointer;
  transition: transform 0.28s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.28s ease, border-color 0.28s ease !important;
}

.landingGameCard.playgroundCard { --card-accent: rgba(124, 92, 255, 0.30); }
.landingGameCard.wordarooCard   { --card-accent: rgba(110, 231, 249, 0.22); }
.landingGameCard.letterPopCard  { --card-accent: rgba(242, 122, 214, 0.22); }

.landingGameCard::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  border-radius: inherit;
  background: radial-gradient(600px 260px at var(--mx, 50%) var(--my, 0%), rgba(255, 255, 255, 0.09), transparent 60%);
  opacity: 0;
  transition: opacity 0.3s ease;
  pointer-events: none;
}

.landingGameCard:hover {
  transform: translateY(-6px) !important;
  border-color: rgba(167, 139, 250, 0.55) !important;
  box-shadow:
    0 22px 50px rgba(2, 4, 14, 0.6),
    0 0 44px var(--card-accent, var(--glow)),
    inset 0 1px 0 rgba(255, 255, 255, 0.12) !important;
}

.landingGameCard:hover::before {
  opacity: 1;
}

.landingGameCard:active {
  transform: translateY(-2px) scale(0.995) !important;
}

.landingGameCard:focus-visible {
  outline: none !important;
  box-shadow: var(--ring), 0 22px 50px rgba(2, 4, 14, 0.6) !important;
}

/* Arrow icon, bottom-right — slides on hover */
.landingGameCard::after {
  content: "→";
  position: absolute;
  right: 18px;
  bottom: 18px;
  z-index: 8;
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border-radius: 12px;
  border: 1px solid var(--hairline-strong);
  background: rgba(255, 255, 255, 0.08);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  color: #fff;
  font-size: 18px;
  font-weight: 800;
  transition: transform 0.25s cubic-bezier(0.22, 1, 0.36, 1), background 0.25s ease, border-color 0.25s ease;
  pointer-events: none;
}

.landingGameCard:hover::after {
  transform: translateX(4px);
  background: rgba(124, 92, 255, 0.35);
  border-color: rgba(167, 139, 250, 0.7);
}

.landingGamePill {
  border: 1px solid var(--hairline-strong) !important;
  background: rgba(9, 11, 28, 0.55) !important;
  color: #ded6ff !important;
  font-weight: 800 !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

.landingGameBottom {
  background: linear-gradient(to bottom, rgba(6, 8, 22, 0) 0%, rgba(6, 8, 22, 0.42) 30%, rgba(6, 8, 22, 0.86) 100%) !important;
  padding-right: 56px !important;
}

.landingGameBottom h3 {
  color: #fff;
  letter-spacing: -0.035em !important;
  font-weight: 900;
}

.landingGameBottom p {
  color: var(--muted) !important;
}

/* Soft ambient light behind letters/emoji inside cards */
.landingGameLetters span,
.landingWordarooIcons span,
.landingLetterPopIcons span {
  text-shadow: 0 6px 24px rgba(0, 0, 0, 0.45);
  filter: drop-shadow(0 0 18px var(--card-accent, var(--glow)));
}

/* ---------- Sections & panels ---------- */
.siteSection {
  padding: 22px 0;
}

.infoPanel {
  padding: clamp(22px, 3.4vw, 36px);
  border-radius: var(--radius-lg);
  border: 1px solid var(--hairline);
  background: linear-gradient(170deg, rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0.015));
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  box-shadow: var(--shadow-soft), inset 0 1px 0 rgba(255, 255, 255, 0.06);
}

.sectionKicker {
  color: var(--violet-soft);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  font-weight: 800;
}

.infoPanel h2,
.seoInfoInner h2 {
  letter-spacing: -0.03em;
  font-weight: 850;
}

.featureCard {
  border-radius: var(--radius-md);
  border: 1px solid var(--hairline);
  background: var(--glass);
  transition: transform 0.22s ease, border-color 0.22s ease, box-shadow 0.22s ease;
}

.featureCard:hover {
  transform: translateY(-3px);
  border-color: rgba(167, 139, 250, 0.45);
  box-shadow: 0 12px 30px rgba(2, 4, 14, 0.45), 0 0 24px rgba(124, 92, 255, 0.14);
}

.featureCard h3 {
  color: #fff;
}

/* SEO / FAQ section */
.seoInfoSection {
  position: relative;
  z-index: 2;
}

.seoEyebrow {
  color: var(--violet-soft);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  font-weight: 800;
}

.seoGameGrid article {
  border: 1px solid var(--hairline);
  border-radius: var(--radius-md);
  background: var(--glass);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  transition: transform 0.22s ease, border-color 0.22s ease;
}

.seoGameGrid article:hover {
  transform: translateY(-3px);
  border-color: rgba(167, 139, 250, 0.45);
}

.seoFaq details {
  border: 1px solid var(--hairline);
  border-radius: var(--radius-md);
  background: var(--glass);
  transition: border-color 0.2s ease, background 0.2s ease;
}

.seoFaq details[open] {
  border-color: rgba(167, 139, 250, 0.5);
  background: rgba(124, 92, 255, 0.07);
}

.seoFaq summary {
  cursor: pointer;
  font-weight: 750;
}

.seoFaq summary:focus-visible {
  outline: none;
  box-shadow: var(--ring);
  border-radius: 10px;
}

/* ---------- Footer ---------- */
.siteFooter {
  margin-top: 28px;
  padding: clamp(22px, 3vw, 32px);
  border: 1px solid var(--hairline);
  border-radius: var(--radius-lg) var(--radius-lg) 0 0;
  border-bottom: 0;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.04), rgba(255, 255, 255, 0.01));
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
}

.footerLink:hover {
  color: var(--violet-soft);
  border-color: var(--violet-soft);
}

/* ---------- Hero floating ambience (spawned by JS) ---------- */
.hero .ui26Floats {
  position: absolute !important;
  inset: 0 !important;
  z-index: 0;
  margin: 0;
  pointer-events: none;
  overflow: hidden;
  will-change: transform;
}

.ui26Floats span {
  position: absolute;
  font-weight: 900;
  opacity: 0.16;
  filter: blur(0.3px) drop-shadow(0 0 22px var(--glow));
  animation: ui26Drift var(--d, 9s) ease-in-out infinite alternate;
  animation-delay: var(--delay, 0s);
  user-select: none;
}

@keyframes ui26Drift {
  from { transform: translate3d(0, 0, 0) rotate(var(--r, -6deg)); }
  to   { transform: translate3d(var(--x, 10px), var(--y, -26px), 0) rotate(calc(var(--r, -6deg) * -1)); }
}

.hero > div:not(.ui26Floats),
.hero > .gamesShowcase {
  position: relative;
  z-index: 2;
}

/* Balanced two-column hero on desktop */
.hero {
  grid-template-columns: minmax(0, 1.12fr) minmax(340px, 0.88fr);
}

/* ---------- Smooth in-transitions for game screens (visual only) ---------- */
body.game-mode #game,
body.wordaroo-mode #wordaroo,
body.letterpop-mode #letterPopGame,
body.colorhunt-mode #colorHuntGame,
body.firstwords-mode #firstWordsGame,
body.skaiciukai-mode #skaiciukaiGame,
body.shapesorter-mode #shapeSorterGame,
body.memory-mode #memoryGame,
body.puzzle-mode #puzzleGame,
body.coloring-mode #coloringGame,
body.kitoks-mode #kitoksGame,
body.emoji-mode #emojiGame {
  animation: ui26GameIn 0.35s ease both;
}

@keyframes ui26GameIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}

/* ---------- Gentle polish on in-game chrome (cosmetic only) ---------- */
#backHomeButton,
#screenLockButton,
#screenKeyboardButton,
#wordarooBackButton,
#letterPopBackButton,
#wordarooPrevButton,
#wordarooRestartButton,
#wordarooNextButton {
  border-radius: 14px;
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
}

#backHomeButton:focus-visible,
#screenLockButton:focus-visible,
#screenKeyboardButton:focus-visible,
#gameLanguageToggle:focus-visible,
#wordarooBackButton:focus-visible,
#letterPopBackButton:focus-visible,
#wordarooPrevButton:focus-visible,
#wordarooRestartButton:focus-visible,
#wordarooNextButton:focus-visible {
  outline: none;
  box-shadow: var(--ring);
}

/* ---------- Responsive / mobile safety ---------- */
@media (max-width: 1100px) {
  .hero {
    grid-template-columns: 1fr;
    justify-items: center;
    text-align: center;
  }

  .hero > div:not(.ui26Floats) {
    max-width: 680px;
  }

  .heroActions,
  .trustGrid {
    justify-content: center;
  }

  .heroLead {
    margin-inline: auto;
  }

  .gamesShowcase {
    width: 100%;
    max-width: 560px;
    margin-inline: auto;
  }
}

@media (max-width: 760px) {
  .siteHeader,
  .hero,
  .siteSection,
  .siteFooter {
    width: min(1120px, calc(100% - 24px));
  }

  .siteHeader {
    padding: 8px 12px;
  }

  .siteFooter {
    grid-template-columns: 1fr;
    gap: 14px;
    padding-bottom: max(22px, env(safe-area-inset-bottom));
  }
}

@media (max-width: 520px) {
  .heroActions {
    gap: 10px;
  }

  .heroActions .startButton {
    flex: 1 1 100%;
    width: 100%;
    min-height: 56px;
  }

  .landingGameCard::after {
    width: 36px;
    height: 36px;
    right: 14px;
    bottom: 14px;
  }

  .ui26Floats {
    display: none;
  }
}

/* Bigger tap comfort on touch */
@media (hover: none), (pointer: coarse), (any-pointer: coarse) {
  .landingGameCard:hover {
    transform: none !important;
  }
}

/* ---------- Reduced motion: everything calms down ---------- */
@media (prefers-reduced-motion: reduce) {
  .siteShell,
  .eyebrow::before,
  .ui26Floats span,
  .ui26Ripple,
  body.game-mode #game,
  body.wordaroo-mode #wordaroo,
  body.letterpop-mode #letterPopGame {
    animation: none !important;
  }

  .startButton,
  .landingGameCard,
  .gamesShowcase,
  .featureCard,
  .trustChip,
  .langToggle,
  .seoGameGrid article {
    transition: none !important;
  }

  .landingGameCard:hover,
  .featureCard:hover,
  .trustChip:hover {
    transform: none !important;
  }
}

/* ============================================================
   V2 · 2026 art direction: wide canvas, aurora, grain,
   scroll reveals, 3D tilt, shimmer. Additive & reversible.
   ============================================================ */

/* ---------- Use the whole viewport: wide 1400px canvas ---------- */
.siteHeader,
.hero,
.siteSection,
.siteFooter {
  width: min(1400px, calc(100% - 40px));
}

.seoInfoInner {
  width: min(1240px, 100%);
}

/* ---------- Cinematic hero: fills the first viewport ---------- */
.hero {
  min-height: min(840px, calc(100svh - 150px));
  align-content: center;
  gap: clamp(28px, 5vw, 84px);
}

h1 {
  font-size: clamp(46px, 6.4vw, 104px);
  background-size: 220% 100%;
}

.gradientText {
  background-size: 220% 100%;
  animation: ui26Shimmer 9s ease-in-out infinite alternate;
}

@keyframes ui26Shimmer {
  from { background-position: 0% 50%; }
  to   { background-position: 100% 50%; }
}

.heroLead {
  font-size: clamp(17px, 1.6vw, 21px);
  max-width: 660px;
}

.gamesShowcase {
  width: min(100%, 540px);
  gap: 18px;
  perspective: 1100px;
}

.landingGameCard {
  min-height: 300px !important;
  transform-style: preserve-3d;
}

.landingGameCard:hover {
  transform: translateY(-6px) rotateX(var(--ry, 0deg)) rotateY(var(--rx, 0deg)) !important;
}

/* ---------- Aurora: slow living light behind everything ---------- */
.siteShell::after {
  content: "";
  position: absolute;
  inset: -12% -8%;
  z-index: -1;
  pointer-events: none;
  background:
    radial-gradient(46% 34% at 22% 12%, rgba(124, 92, 255, 0.22), transparent 70%),
    radial-gradient(38% 30% at 82% 8%, rgba(110, 231, 249, 0.13), transparent 70%),
    radial-gradient(42% 32% at 64% 86%, rgba(242, 122, 214, 0.10), transparent 72%),
    radial-gradient(30% 26% at 8% 78%, rgba(134, 239, 172, 0.06), transparent 70%);
  animation: ui26Aurora 26s ease-in-out infinite alternate;
  will-change: transform;
}

@keyframes ui26Aurora {
  from { transform: translate3d(-1.5%, -1%, 0) rotate(-1.6deg) scale(1); }
  to   { transform: translate3d(1.5%, 1.5%, 0) rotate(1.6deg) scale(1.06); }
}

/* ---------- Film grain: the analog finish ---------- */
body:not(.game-mode):not(.wordaroo-mode):not(.letterpop-mode):not(.colorhunt-mode):not(.firstwords-mode):not(.skaiciukai-mode):not(.shapesorter-mode):not(.memory-mode):not(.puzzle-mode):not(.coloring-mode):not(.kitoks-mode):not(.emoji-mode)::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 2147483000;
  pointer-events: none;
  opacity: 0.05;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size: 160px 160px;
}

/* ---------- Scroll reveal choreography ---------- */
.ui26Reveal {
  opacity: 0;
  transform: translateY(22px);
  transition: opacity 0.7s cubic-bezier(0.22, 1, 0.36, 1), transform 0.7s cubic-bezier(0.22, 1, 0.36, 1);
  transition-delay: var(--rv, 0s);
  will-change: opacity, transform;
}

.ui26Reveal.ui26In {
  opacity: 1;
  transform: translateY(0);
}

/* ---------- Refined chrome details ---------- */
::selection {
  background: rgba(124, 92, 255, 0.45);
  color: #fff;
}

html {
  scrollbar-color: rgba(124, 92, 255, 0.55) rgba(255, 255, 255, 0.04);
}

::-webkit-scrollbar { width: 10px; }
::-webkit-scrollbar-track { background: rgba(255, 255, 255, 0.03); }
::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, rgba(124, 92, 255, 0.6), rgba(110, 231, 249, 0.4));
  border-radius: 999px;
  border: 2px solid #05060f;
}

.featureList {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 14px;
}

.siteSection {
  padding: clamp(26px, 3.4vw, 48px) 0;
}

.siteFooter {
  margin-top: clamp(30px, 4vw, 56px);
}

/* Header logo halo */
.logoBubble::after {
  content: "";
  position: absolute;
  inset: -10px;
  border-radius: inherit;
  background: radial-gradient(closest-side, var(--glow), transparent 75%);
  z-index: -1;
  animation: ui26Pulse 4.5s ease-in-out infinite;
}

.brandLink, .logoBubble { position: relative; }

/* ---------- Wide-screen balance & tablet/mobile ---------- */
@media (min-width: 1500px) {
  .gamesShowcase { width: min(100%, 580px); }
  .landingGameCard { min-height: 320px !important; }
}

@media (max-width: 1100px) {
  .hero { min-height: 0; padding-top: clamp(36px, 6vw, 64px); }
  .landingGameCard { min-height: 260px !important; }
}

@media (max-width: 520px) {
  .landingGameCard { min-height: 224px !important; }
  .siteShell::after { animation: none; }
}

/* ---------- Reduced motion: v2 features stand down too ---------- */
@media (prefers-reduced-motion: reduce) {
  .gradientText,
  .siteShell::after,
  .logoBubble::after {
    animation: none !important;
  }

  .ui26Reveal {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }

  .landingGameCard:hover {
    transform: none !important;
  }
}


/* ============================================================
   V3 · Letter Pop mobile fix
   1) Compact HUD on phones → real room for the play area
   2) (JS layer repositions bubbles into the free zone)
   ============================================================ */
@media (max-width: 700px) {
  .letterPopHud {
    display: flex !important;
    flex-wrap: wrap;
    align-items: center;
    gap: 2px 12px;
    padding: 14px 16px !important;
    border-radius: 20px !important;
  }

  .letterPopKicker { display: none; }

  #letterPopTitle {
    margin: 0 !important;
    font-size: 22px !important;
  }

  .letterPopTarget {
    margin: 0 !important;
    font-size: 58px !important;
    line-height: 1 !important;
  }

  #letterPopMessage {
    flex-basis: 100%;
    margin: 4px 0 0 !important;
    font-size: 14px !important;
    line-height: 1.3 !important;
  }

  .letterPopScore {
    margin-top: 6px !important;
    min-height: 30px !important;
    font-size: 13px;
  }
}


/* ============================================================
   V4 · Mobile polish: balanced LT headline, eyebrow fit,
   header vertical alignment
   ============================================================ */

/* Long Lithuanian words wrap into even, balanced lines */
h1 {
  text-wrap: balance;
}

/* Header: logo and language button share one visual center line */
.siteHeader {
  align-items: center !important;
}

.langToggle {
  align-self: center !important;
}

.clickarooLogoImage {
  display: block;
}

@media (max-width: 760px) {
  .clickarooLogoImage {
    height: 52px !important;
    width: auto !important;
    max-width: 62vw;
    object-fit: contain;
  }

  .langToggle {
    min-height: 42px;
  }
}

/* Eyebrow pill: let long LT copy breathe and wrap gracefully */
.eyebrow {
  max-width: 100%;
  white-space: normal;
  text-align: center;
  line-height: 1.45;
}

@media (max-width: 520px) {
  .eyebrow {
    font-size: 10.5px;
    letter-spacing: 0.06em;
    padding: 7px 14px;
  }

  h1 {
    font-size: clamp(38px, 11vw, 52px);
    letter-spacing: -0.035em;
  }
}




/* ============================================================
   V6 · Lithuanian headline & eyebrow — beats the original
   !important LT rules (same selectors, later in cascade)
   Break is forced by JS: "Nemokami žaidimai\nvaikams"
   ============================================================ */

html[lang="lt"] #hero-title,
:lang(lt) #hero-title {
  max-width: none !important;
}

html[lang="lt"] #hero-title .gradientText,
:lang(lt) #hero-title .gradientText {
  white-space: pre-line;
  text-wrap: initial;
}

html[lang="lt"] h1,
:lang(lt) h1 {
  max-width: none !important;
  font-size: clamp(30px, 4.8vw, 68px) !important;
  line-height: 1.08 !important;
  letter-spacing: -0.035em !important;
}

html[lang="lt"] .eyebrow,
:lang(lt) .eyebrow {
  font-size: 11px !important;
  letter-spacing: 0.05em !important;
  line-height: 1.4 !important;
  padding: 8px 16px !important;
}

@media (max-width: 760px) {
  html[lang="lt"] h1,
  :lang(lt) h1 {
    font-size: clamp(26px, 8vw, 32px) !important;
    line-height: 1.14 !important;
  }

  html[lang="lt"] .eyebrow,
  :lang(lt) .eyebrow {
    font-size: 10px !important;
    letter-spacing: 0.04em !important;
    padding: 7px 14px !important;
  }
}


/* ============================================================
   V7 · Color Hunt (game #4) — full game styles
   ============================================================ */

.colorHuntGame { display: none; }

body.colorhunt-mode { overflow: hidden; }

body.colorhunt-mode .siteShell,
body.colorhunt-mode #game,
body.colorhunt-mode #wordaroo,
body.colorhunt-mode #letterPopGame { display: none !important; }

body.colorhunt-mode .colorHuntGame {
  display: block;
  position: fixed;
  inset: 0;
  z-index: 40;
  overflow: hidden;
  background:
    radial-gradient(900px 560px at 20% -6%, rgba(124, 92, 255, 0.20), transparent 60%),
    radial-gradient(760px 500px at 84% 6%, rgba(110, 231, 249, 0.10), transparent 58%),
    linear-gradient(180deg, #070920 0%, #05060f 60%, #04040b 100%);
}

.colorHuntTopBar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: max(10px, env(safe-area-inset-top)) 16px 10px;
}

.colorHuntTopBar img {
  height: 44px;
  width: auto;
  display: block;
}

#colorHuntBackButton {
  min-height: 44px;
  padding: 10px 18px;
  border-radius: 14px;
  border: 1px solid var(--hairline-strong);
  background: var(--glass-strong);
  color: var(--text);
  font-weight: 800;
  font-size: 15px;
  cursor: pointer;
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
}

#colorHuntBackButton:focus-visible { outline: none; box-shadow: var(--ring); }

.colorHuntStage {
  position: relative;
  height: calc(100svh - 74px - env(safe-area-inset-top));
  margin: 0 12px max(12px, env(safe-area-inset-bottom));
  border: 1px solid var(--hairline);
  border-radius: 24px;
  overflow: hidden;
  background: rgba(255, 255, 255, 0.02);
}

.colorHuntHud {
  position: absolute;
  top: 14px;
  left: 14px;
  z-index: 5;
  width: min(410px, calc(100% - 28px));
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 12px;
  padding: 16px 18px;
  border: 1px solid var(--hairline);
  border-radius: 20px;
  background: rgba(9, 11, 28, 0.66);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  box-shadow: var(--shadow-soft), inset 0 1px 0 rgba(255, 255, 255, 0.07);
}

#colorHuntKicker {
  flex-basis: 100%;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--soft);
}

#colorHuntTitle {
  margin: 0;
  font-size: 22px;
  font-weight: 900;
  letter-spacing: -0.02em;
  color: #fff;
}

#colorHuntTarget {
  display: inline-flex;
  align-items: center;
  min-height: 40px;
  padding: 6px 18px;
  border-radius: 999px;
  font-size: 19px;
  font-weight: 900;
  letter-spacing: 0.02em;
  color: #0b0d20;
  background: linear-gradient(140deg, var(--ca, #fff), var(--cb, #999));
  border: 2px solid rgba(255, 255, 255, 0.55);
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.35), 0 0 26px var(--cb, transparent);
}

#colorHuntMessage {
  flex-basis: 100%;
  margin: 4px 0 0;
  font-size: 14px;
  line-height: 1.35;
  color: var(--muted);
}

#colorHuntScore {
  margin-top: 6px;
  padding: 6px 14px;
  border-radius: 999px;
  border: 1px solid var(--hairline);
  background: var(--glass);
  font-size: 13px;
  font-weight: 800;
  color: var(--text);
}

.colorHuntItems { position: absolute; inset: 0; z-index: 2; }

.colorHuntItem {
  position: absolute;
  width: clamp(70px, 9vw, 100px);
  height: clamp(70px, 9vw, 100px);
  border-radius: 50%;
  border: 0;
  cursor: pointer;
  background:
    radial-gradient(circle at 32% 26%, rgba(255, 255, 255, 0.85) 0 12%, rgba(255, 255, 255, 0) 30%),
    radial-gradient(circle at 50% 55%, var(--ca, #fff) 0%, var(--cb, #888) 78%);
  box-shadow: 0 10px 26px rgba(0, 0, 0, 0.4), inset 0 -6px 12px rgba(0, 0, 0, 0.22), 0 0 22px color-mix(in srgb, var(--cb, #888) 45%, transparent);
  transition: transform 0.15s ease;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}

.colorHuntItem:active { transform: scale(0.92); }
.colorHuntItem:focus-visible { outline: none; box-shadow: var(--ring), 0 10px 26px rgba(0, 0, 0, 0.4); }

.colorHuntItem.floaty { animation: colorHuntFloat var(--fd, 7s) ease-in-out var(--fdel, 0s) infinite alternate; }

@keyframes colorHuntFloat {
  from { transform: translate3d(0, 0, 0); }
  to   { transform: translate3d(10px, -22px, 0); }
}

.colorHuntItem.popped {
  animation: colorHuntPop 0.38s cubic-bezier(0.22, 1, 0.36, 1) forwards;
  pointer-events: none;
}

@keyframes colorHuntPop {
  40%  { transform: scale(1.25); opacity: 1; }
  100% { transform: scale(0.1); opacity: 0; }
}

.colorHuntItem.wrongShake { animation: colorHuntShake 0.4s ease; }

@keyframes colorHuntShake {
  0%, 100% { translate: 0 0; }
  25% { translate: -7px 0; }
  50% { translate: 7px 0; }
  75% { translate: -4px 0; }
}

.colorHuntBurst {
  position: absolute;
  z-index: 6;
  font-size: 26px;
  pointer-events: none;
  animation: colorHuntBurst 1s ease-out forwards;
}

@keyframes colorHuntBurst {
  from { transform: translate(0, 0) scale(0.6); opacity: 1; }
  to   { transform: translate(var(--bx, 40px), -110px) scale(1.3); opacity: 0; }
}

/* Landing card accent + icon spread */
.landingGameCard.colorHuntCard { --card-accent: rgba(250, 204, 21, 0.20); }

.landingColorHuntIcons span {
  position: absolute;
  font-size: 34px;
  filter: drop-shadow(0 0 16px rgba(250, 204, 21, 0.35));
}

.landingColorHuntIcons span:nth-child(1) { left: 12%; top: 18%; }
.landingColorHuntIcons span:nth-child(2) { left: 46%; top: 42%; }
.landingColorHuntIcons span:nth-child(3) { right: 12%; top: 16%; }

@media (prefers-reduced-motion: reduce) {
  .colorHuntItem.floaty,
  .colorHuntItem.popped,
  .colorHuntItem.wrongShake,
  .colorHuntBurst,
  body.colorhunt-mode #colorHuntGame {
    animation: none !important;
  }
}


/* ============================================================
   V8 · One "All games" hero CTA; per-game hero buttons retired
   (kept in the DOM — landing cards still trigger them via JS)
   ============================================================ */

#startWordarooButton,
#startLetterPopButton {
  display: none !important;
}

.startButton.browseGamesButton {
  color: var(--text);
  background: var(--glass-strong);
  border: 1px solid var(--hairline-strong);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  box-shadow: var(--shadow-soft), inset 0 1px 0 rgba(255, 255, 255, 0.1);
}

.startButton.browseGamesButton:hover {
  background: rgba(255, 255, 255, 0.12);
  border-color: rgba(167, 139, 250, 0.6);
  box-shadow: 0 14px 34px rgba(2, 4, 14, 0.5), 0 0 26px rgba(124, 92, 255, 0.22), inset 0 1px 0 rgba(255, 255, 255, 0.12);
}



/* ============================================================
   V9 · Desktop balance: hero shows a compact 2×2 card grid;
   "All games" opens a full-screen library page (library-mode)
   ============================================================ */

/* --- Hero: 2×2 compact grid on desktop, balanced with the headline --- */
@media (min-width: 1101px) {
  .gamesShowcase {
    grid-template-columns: 1fr 1fr;
    width: min(100%, 660px);
    gap: 14px;
  }

  .gamesShowcase .landingGameCard {
    min-height: 225px !important;
  }

  .gamesShowcase .landingGameBottom h3 {
    font-size: 21px;
  }

  .gamesShowcase .landingGameBottom p {
    font-size: 13px;
  }

  .gamesShowcase .landingGameCard::after {
    width: 34px;
    height: 34px;
    right: 14px;
    bottom: 14px;
    font-size: 15px;
  }

  .hero {
    min-height: min(720px, calc(100svh - 150px));
  }
}

@media (min-width: 1500px) {
  .gamesShowcase {
    width: min(100%, 720px);
  }

  .gamesShowcase .landingGameCard {
    min-height: 245px !important;
  }
}

/* --- Library page --- */
.gameLibrary { display: none; }

body.library-mode { overflow: hidden; }

body.library-mode .siteShell,
body.library-mode #game,
body.library-mode #wordaroo,
body.library-mode #letterPopGame,
body.library-mode #colorHuntGame,
body.library-mode #firstWordsGame,
body.library-mode #skaiciukaiGame,
body.library-mode #shapeSorterGame,
body.library-mode #memoryGame,
body.library-mode #puzzleGame,
body.library-mode #coloringGame,
body.library-mode #kitoksGame,
body.library-mode #emojiGame { display: none !important; }

body.library-mode .gameLibrary {
  display: block;
  position: fixed;
  inset: 0;
  z-index: 40;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  background:
    radial-gradient(1000px 600px at 22% -8%, rgba(124, 92, 255, 0.20), transparent 60%),
    radial-gradient(800px 520px at 84% 4%, rgba(110, 231, 249, 0.10), transparent 56%),
    linear-gradient(180deg, #070920 0%, #05060f 58%, #04040b 100%);
  animation: ui26GameIn 0.3s ease both;
}

.libraryTopBar {
  position: sticky;
  top: 0;
  z-index: 5;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: max(12px, env(safe-area-inset-top)) clamp(16px, 3vw, 32px) 12px;
  background: rgba(7, 9, 32, 0.72);
  backdrop-filter: blur(20px) saturate(1.3);
  -webkit-backdrop-filter: blur(20px) saturate(1.3);
  border-bottom: 1px solid var(--hairline);
}

.libraryTopBar img {
  height: 46px;
  width: auto;
  display: block;
}

#libraryBackButton {
  min-height: 44px;
  padding: 10px 18px;
  border-radius: 14px;
  border: 1px solid var(--hairline-strong);
  background: var(--glass-strong);
  color: var(--text);
  font-weight: 800;
  font-size: 15px;
  cursor: pointer;
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
}

#libraryBackButton:focus-visible { outline: none; box-shadow: var(--ring); }

.libraryInner {
  width: min(1240px, calc(100% - 40px));
  margin: 0 auto;
  padding: clamp(22px, 4vw, 44px) 0 max(40px, env(safe-area-inset-bottom));
}

.libraryKicker {
  margin: 0 0 8px;
  color: var(--violet-soft);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.gameLibrary h2 {
  margin: 0 0 26px;
  font-size: clamp(32px, 4.4vw, 56px);
  font-weight: 900;
  letter-spacing: -0.04em;
  color: #fff;
}

.libraryGrid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(290px, 1fr));
  gap: 18px;
}

.libraryGrid .landingGameCard {
  min-height: 280px !important;
  width: 100%;
}

/* Safety net: nothing inside the library grid may stay in a pre-reveal state */
.libraryGrid .ui26Reveal {
  opacity: 1 !important;
  transform: none !important;
  transition: none !important;
}

@media (max-width: 520px) {
  .libraryGrid { grid-template-columns: 1fr; gap: 14px; }
  .libraryGrid .landingGameCard { min-height: 230px !important; }
  .libraryTopBar img { height: 40px; }
}

@media (prefers-reduced-motion: reduce) {
  body.library-mode .gameLibrary { animation: none !important; }
}


/* ============================================================
   V10 · Founder section
   ============================================================ */

.founderPanel { position: relative; }

.founderSection p { color: var(--muted); line-height: 1.65; }

.founderEmailRow {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 8px;
  margin-top: 18px;
  font-size: 17px;
}

#founderEmailLabel {
  font-weight: 800;
  color: var(--text);
}

.founderEmail {
  color: var(--accent-cyan);
  font-weight: 800;
  letter-spacing: 0.01em;
  text-decoration: none;
  border-bottom: 1px solid rgba(110, 231, 249, 0.4);
  transition: border-color 0.2s ease, color 0.2s ease;
  word-break: break-all;
}

.founderEmail:hover {
  color: #fff;
  border-color: var(--violet-soft);
}

.founderEmail:focus-visible {
  outline: none;
  box-shadow: var(--ring);
  border-radius: 6px;
}

.founderCopied {
  font-size: 13px;
  font-weight: 800;
  color: var(--accent-green);
}

/* Header nav: About + language, grouped right */
.headerNav {
  display: flex;
  align-items: center;
  gap: 8px;
}

.aboutNavButton {
  font-weight: 800;
  font-size: 14px;
  padding: 10px 16px;
}

@media (max-width: 420px) {
  .aboutNavButton { padding: 9px 12px; font-size: 13px; }
}


/* ============================================================
   V12 · First Words (game #5)
   ============================================================ */

.firstWordsGame { display: none; }

body.firstwords-mode { overflow: hidden; }

body.firstwords-mode .siteShell,
body.firstwords-mode #game,
body.firstwords-mode #wordaroo,
body.firstwords-mode #letterPopGame,
body.firstwords-mode #colorHuntGame,
body.firstwords-mode .gameLibrary { display: none !important; }

body.firstwords-mode .firstWordsGame {
  display: block;
  position: fixed;
  inset: 0;
  z-index: 40;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  background:
    radial-gradient(900px 560px at 22% -6%, rgba(124, 92, 255, 0.20), transparent 60%),
    radial-gradient(760px 500px at 84% 6%, rgba(110, 231, 249, 0.10), transparent 58%),
    linear-gradient(180deg, #070920 0%, #05060f 60%, #04040b 100%);
}

.firstWordsTopBar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: max(10px, env(safe-area-inset-top)) 16px 10px;
}

.firstWordsTopBar img { height: 44px; width: auto; display: block; }

#firstWordsBackButton {
  min-height: 44px;
  padding: 10px 18px;
  border-radius: 14px;
  border: 1px solid var(--hairline-strong);
  background: var(--glass-strong);
  color: var(--text);
  font-weight: 800;
  font-size: 15px;
  cursor: pointer;
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
}

#firstWordsBackButton:focus-visible { outline: none; box-shadow: var(--ring); }

.firstWordsStage {
  display: grid;
  place-items: center;
  min-height: calc(100svh - 84px - env(safe-area-inset-top));
  padding: 12px 14px max(20px, env(safe-area-inset-bottom));
}

.firstWordsPanel {
  width: min(560px, 100%);
  padding: clamp(20px, 4vw, 32px);
  border: 1px solid var(--hairline);
  border-radius: 26px;
  text-align: center;
  background: rgba(9, 11, 28, 0.6);
  backdrop-filter: blur(18px) saturate(1.3);
  -webkit-backdrop-filter: blur(18px) saturate(1.3);
  box-shadow: var(--shadow-soft), inset 0 1px 0 rgba(255, 255, 255, 0.07);
}

.firstWordsKicker {
  margin: 0 0 10px;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--soft);
}

.firstWordsWordRow {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
}

.firstWordsWord {
  font-size: clamp(34px, 8vw, 54px);
  font-weight: 900;
  letter-spacing: -0.03em;
  color: #fff;
  text-shadow: 0 0 34px var(--glow);
}

#firstWordsMessage {
  margin: 10px 0 16px;
  min-height: 22px;
  font-size: 15px;
  color: var(--muted);
}

.firstWordsOptions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

.firstWordsOption {
  display: grid;
  place-items: center;
  min-height: clamp(96px, 20vw, 128px);
  font-size: clamp(48px, 11vw, 64px);
  border-radius: 22px;
  border: 1px solid var(--hairline);
  background: linear-gradient(160deg, rgba(255, 255, 255, 0.07), rgba(255, 255, 255, 0.02));
  cursor: pointer;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
  transition: transform 0.15s ease, border-color 0.2s ease, box-shadow 0.2s ease;
}

.firstWordsOption:hover {
  border-color: rgba(167, 139, 250, 0.55);
  box-shadow: 0 0 24px rgba(124, 92, 255, 0.18);
}

.firstWordsOption:active { transform: scale(0.94); }
.firstWordsOption:focus-visible { outline: none; box-shadow: var(--ring); }

.firstWordsOption.fwCorrect {
  border-color: rgba(134, 239, 172, 0.8);
  background: rgba(34, 197, 94, 0.18);
  box-shadow: 0 0 34px rgba(74, 222, 128, 0.4);
  animation: fwPop 0.5s cubic-bezier(0.22, 1, 0.36, 1);
}

@keyframes fwPop {
  40% { transform: scale(1.12); }
  100% { transform: scale(1); }
}

.firstWordsOption.fwWrong { animation: fwShake 0.4s ease; }

@keyframes fwShake {
  0%, 100% { translate: 0 0; }
  25% { translate: -7px 0; }
  50% { translate: 7px 0; }
  75% { translate: -4px 0; }
}

.firstWordsOption.fwFade { opacity: 0.35; pointer-events: none; }

#firstWordsScore {
  display: inline-block;
  margin-top: 16px;
  padding: 7px 16px;
  border-radius: 999px;
  border: 1px solid var(--hairline);
  background: var(--glass);
  font-size: 13px;
  font-weight: 800;
  color: var(--text);
}

.landingGameCard.firstWordsCard { --card-accent: rgba(134, 239, 172, 0.20); }

.landingFirstWordsIcons span {
  position: absolute;
  font-size: 34px;
  filter: drop-shadow(0 0 16px rgba(134, 239, 172, 0.35));
}

.landingFirstWordsIcons span:nth-child(1) { left: 12%; top: 18%; }
.landingFirstWordsIcons span:nth-child(2) { left: 46%; top: 42%; }
.landingFirstWordsIcons span:nth-child(3) { right: 12%; top: 16%; }

@media (prefers-reduced-motion: reduce) {
  .firstWordsOption.fwCorrect,
  .firstWordsOption.fwWrong,
  body.firstwords-mode #firstWordsGame { animation: none !important; }
  .firstWordsOption { transition: none; }
}


/* ============================================================
   V13 · Header composition fix: logo + About + language must
   share one line with real breathing room at every width
   ============================================================ */

.siteHeader {
  gap: 12px;
  flex-wrap: nowrap;
}

.siteHeader .siteLogo {
  display: flex;
  align-items: center;
  min-width: 0;      /* allow the logo to shrink instead of colliding */
  flex: 0 1 auto;
}

.headerNav {
  flex: 0 0 auto;    /* buttons never squash or wrap */
  gap: 8px;
}

/* Both pills: identical height, true vertical centering */
.aboutNavButton,
.langToggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  border-radius: 999px;
  line-height: 1;
}

.aboutNavButton {
  padding: 10px 18px;
  font-size: 14px;
  letter-spacing: 0.01em;
}

/* Phones: smaller logo, tighter pills — everything fits with air */
@media (max-width: 760px) {
  .clickarooLogoImage {
    height: 42px !important;
    max-width: 38vw;
  }

  .headerNav { gap: 6px; }

  .aboutNavButton,
  .langToggle {
    min-height: 40px;
  }

  .aboutNavButton {
    padding: 9px 13px;
    font-size: 13px;
  }
}

/* Very narrow phones */
@media (max-width: 400px) {
  .clickarooLogoImage {
    height: 38px !important;
    max-width: 33vw;
  }

  .aboutNavButton {
    padding: 8px 11px;
    font-size: 12.5px;
  }
}


/* ============================================================
   V14 · In-game language toggles for Color Hunt & First Words
   ============================================================ */

.gameTopActions {
  display: flex;
  align-items: center;
  gap: 8px;
}

#colorHuntLangButton,
#firstWordsLangButton {
  min-height: 44px;
  min-width: 54px;
  padding: 10px 14px;
  border-radius: 14px;
  border: 1px solid var(--hairline-strong);
  background: var(--glass-strong);
  color: var(--text);
  font-weight: 800;
  font-size: 15px;
  letter-spacing: 0.04em;
  cursor: pointer;
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
}

#colorHuntLangButton:hover,
#firstWordsLangButton:hover {
  border-color: rgba(167, 139, 250, 0.6);
}

#colorHuntLangButton:focus-visible,
#firstWordsLangButton:focus-visible {
  outline: none;
  box-shadow: var(--ring);
}


#colorHuntLangButton,
#firstWordsLangButton {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}

.gameLangFlag {
  display: inline-block;
  width: 22px;
  height: 15px;
  border-radius: 3px;
  overflow: hidden;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.22);
  flex: 0 0 auto;
}

.gameLangFlag svg {
  display: block;
  width: 100%;
  height: 100%;
}


/* ============================================================
   V15 · Skaičiukai / Count & Pop (game #6)
   ============================================================ */

.skaiciukaiGame { display: none; }

body.skaiciukai-mode { overflow: hidden; }

body.skaiciukai-mode .siteShell,
body.skaiciukai-mode #game,
body.skaiciukai-mode #wordaroo,
body.skaiciukai-mode #letterPopGame,
body.skaiciukai-mode #colorHuntGame,
body.skaiciukai-mode #firstWordsGame,
body.skaiciukai-mode .gameLibrary { display: none !important; }

body.skaiciukai-mode .skaiciukaiGame {
  display: block;
  position: fixed;
  inset: 0;
  z-index: 40;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  background:
    radial-gradient(900px 560px at 22% -6%, rgba(124, 92, 255, 0.20), transparent 60%),
    radial-gradient(760px 500px at 84% 6%, rgba(255, 209, 102, 0.10), transparent 58%),
    linear-gradient(180deg, #070920 0%, #05060f 60%, #04040b 100%);
}

.skcTopBar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: max(10px, env(safe-area-inset-top)) 16px 10px;
}

.skcTopBar img { height: 44px; width: auto; display: block; }

#skcBackButton,
#skcLangButton {
  min-height: 44px;
  padding: 10px 16px;
  border-radius: 14px;
  border: 1px solid var(--hairline-strong);
  background: var(--glass-strong);
  color: var(--text);
  font-weight: 800;
  font-size: 15px;
  cursor: pointer;
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
}

#skcLangButton {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-width: 54px;
  letter-spacing: 0.04em;
}

#skcBackButton:focus-visible,
#skcLangButton:focus-visible { outline: none; box-shadow: var(--ring); }

.skcStage {
  display: grid;
  place-items: center;
  min-height: calc(100svh - 84px - env(safe-area-inset-top));
  padding: 12px 14px max(20px, env(safe-area-inset-bottom));
}

.skcPanel {
  width: min(600px, 100%);
  padding: clamp(20px, 4vw, 32px);
  border: 1px solid var(--hairline);
  border-radius: 26px;
  text-align: center;
  background: rgba(9, 11, 28, 0.6);
  backdrop-filter: blur(18px) saturate(1.3);
  -webkit-backdrop-filter: blur(18px) saturate(1.3);
  box-shadow: var(--shadow-soft), inset 0 1px 0 rgba(255, 255, 255, 0.07);
}

.skcKicker {
  margin: 0 0 8px;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--soft);
}

#skcQuestion {
  margin: 0 0 14px;
  font-size: clamp(30px, 7vw, 44px);
  font-weight: 900;
  letter-spacing: -0.03em;
  color: #fff;
  text-shadow: 0 0 34px var(--glow);
}

.skcObjects {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: clamp(8px, 2.5vw, 16px);
  min-height: clamp(76px, 18vw, 110px);
  margin-bottom: 18px;
  padding: 12px;
  border-radius: 20px;
  border: 1px solid var(--hairline);
  background: rgba(255, 255, 255, 0.03);
}

.skcObject {
  font-size: clamp(44px, 10vw, 60px);
  line-height: 1;
  animation: skcDrop 0.45s cubic-bezier(0.22, 1, 0.36, 1) both;
  filter: drop-shadow(0 6px 18px rgba(0, 0, 0, 0.4));
}

@keyframes skcDrop {
  from { transform: translateY(-18px) scale(0.6); opacity: 0; }
  to   { transform: translateY(0) scale(1); opacity: 1; }
}

.skcObject.skcCelebrate { animation: skcBounce 0.6s ease both; }

@keyframes skcBounce {
  0%, 100% { transform: translateY(0); }
  40% { transform: translateY(-16px) scale(1.12); }
  70% { transform: translateY(0) scale(1); }
}

.skcNumbers {
  display: flex;
  justify-content: center;
  gap: clamp(8px, 2vw, 14px);
  margin-bottom: 12px;
}

.skcNumber {
  display: grid;
  place-items: center;
  width: clamp(52px, 13vw, 72px);
  height: clamp(52px, 13vw, 72px);
  font-size: clamp(24px, 6vw, 32px);
  font-weight: 900;
  color: #fff;
  border-radius: 50%;
  border: 1px solid var(--hairline-strong);
  background: linear-gradient(160deg, rgba(255, 255, 255, 0.09), rgba(255, 255, 255, 0.02));
  cursor: pointer;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
  transition: transform 0.15s ease, border-color 0.2s ease, box-shadow 0.2s ease;
}

.skcNumber:hover {
  border-color: rgba(167, 139, 250, 0.55);
  box-shadow: 0 0 22px rgba(124, 92, 255, 0.2);
}

.skcNumber:active { transform: scale(0.9); }
.skcNumber:focus-visible { outline: none; box-shadow: var(--ring); }

.skcNumber.skcCorrect {
  border-color: rgba(134, 239, 172, 0.85);
  background: rgba(34, 197, 94, 0.2);
  box-shadow: 0 0 30px rgba(74, 222, 128, 0.45);
  animation: fwPop 0.5s cubic-bezier(0.22, 1, 0.36, 1);
}

.skcNumber.skcWrong { animation: fwShake 0.4s ease; }

.skcNumber.skcFade { opacity: 0.35; pointer-events: none; }

#skcMessage {
  margin: 4px 0 12px;
  min-height: 22px;
  font-size: 15px;
  color: var(--muted);
}

#skcScore {
  display: inline-block;
  padding: 7px 16px;
  border-radius: 999px;
  border: 1px solid var(--hairline);
  background: var(--glass);
  font-size: 13px;
  font-weight: 800;
  color: var(--text);
}

.landingGameCard.skaiciukaiCard { --card-accent: rgba(255, 209, 102, 0.22); }

.landingSkaiciukaiIcons span {
  position: absolute;
  font-size: 34px;
  font-weight: 900;
  color: #ffd166;
  filter: drop-shadow(0 0 16px rgba(255, 209, 102, 0.4));
}

.landingSkaiciukaiIcons span:nth-child(1) { left: 13%; top: 18%; }
.landingSkaiciukaiIcons span:nth-child(2) { left: 46%; top: 40%; }
.landingSkaiciukaiIcons span:nth-child(3) { right: 13%; top: 16%; }

@media (prefers-reduced-motion: reduce) {
  .skcObject,
  .skcObject.skcCelebrate,
  .skcNumber.skcCorrect,
  .skcNumber.skcWrong,
  body.skaiciukai-mode #skaiciukaiGame { animation: none !important; }
  .skcNumber { transition: none; }
}


/* ============================================================
   V16 · Formos / Shape Sorter (game #7)
   ============================================================ */

.shapeSorterGame { display: none; }

body.shapesorter-mode { overflow: hidden; }

body.shapesorter-mode .siteShell,
body.shapesorter-mode #game,
body.shapesorter-mode #wordaroo,
body.shapesorter-mode #letterPopGame,
body.shapesorter-mode #colorHuntGame,
body.shapesorter-mode #firstWordsGame,
body.shapesorter-mode #skaiciukaiGame,
body.shapesorter-mode .gameLibrary { display: none !important; }

body.shapesorter-mode .shapeSorterGame {
  display: block;
  position: fixed;
  inset: 0;
  z-index: 40;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  background:
    radial-gradient(900px 560px at 22% -6%, rgba(124, 92, 255, 0.20), transparent 60%),
    radial-gradient(760px 500px at 84% 6%, rgba(251, 113, 133, 0.10), transparent 58%),
    linear-gradient(180deg, #070920 0%, #05060f 60%, #04040b 100%);
}

.shpTopBar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: max(10px, env(safe-area-inset-top)) 16px 10px;
}

.shpTopBar img { height: 44px; width: auto; display: block; }

#shpBackButton,
#shpLangButton {
  min-height: 44px;
  padding: 10px 16px;
  border-radius: 14px;
  border: 1px solid var(--hairline-strong);
  background: var(--glass-strong);
  color: var(--text);
  font-weight: 800;
  font-size: 15px;
  cursor: pointer;
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
}

#shpLangButton {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-width: 54px;
  letter-spacing: 0.04em;
}

#shpBackButton:focus-visible,
#shpLangButton:focus-visible { outline: none; box-shadow: var(--ring); }

.shpStage {
  display: grid;
  place-items: center;
  min-height: calc(100svh - 84px - env(safe-area-inset-top));
  padding: 12px 14px max(20px, env(safe-area-inset-bottom));
}

.shpPanel {
  width: min(640px, 100%);
  padding: clamp(18px, 3.5vw, 30px);
  border: 1px solid var(--hairline);
  border-radius: 26px;
  text-align: center;
  background: rgba(9, 11, 28, 0.6);
  backdrop-filter: blur(18px) saturate(1.3);
  -webkit-backdrop-filter: blur(18px) saturate(1.3);
  box-shadow: var(--shadow-soft), inset 0 1px 0 rgba(255, 255, 255, 0.07);
}

.shpKicker {
  margin: 0 0 6px;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--soft);
}

#shpTitle {
  margin: 0 0 12px;
  font-size: clamp(24px, 5.6vw, 36px);
  font-weight: 900;
  letter-spacing: -0.03em;
  color: #fff;
  text-shadow: 0 0 30px var(--glow);
}

.shpArea {
  position: relative;
  height: clamp(300px, 52svh, 420px);
  margin-bottom: 14px;
  border-radius: 20px;
  border: 1px solid var(--hairline);
  background: rgba(255, 255, 255, 0.03);
  overflow: hidden;
  touch-action: none;
}

.shpHole {
  position: absolute;
  opacity: 0.9;
  transition: opacity 0.3s ease, filter 0.3s ease;
}

.shpHole svg { display: block; width: 100%; height: 100%; }

.shpHole.shpHoleFilled {
  opacity: 0;
}

.shpPiece {
  position: absolute;
  padding: 0;
  border: 0;
  background: none;
  cursor: grab;
  touch-action: none;
  -webkit-tap-highlight-color: transparent;
  filter: drop-shadow(0 8px 20px rgba(0, 0, 0, 0.45));
  z-index: 3;
}

.shpPiece svg { display: block; width: 100%; height: 100%; pointer-events: none; }

.shpPiece.shpDragging {
  cursor: grabbing;
  z-index: 6;
  filter: drop-shadow(0 16px 32px rgba(0, 0, 0, 0.55)) drop-shadow(0 0 22px var(--glow));
  transform: scale(1.08);
}

.shpPiece.shpReturn {
  transition: left 0.32s cubic-bezier(0.22, 1, 0.36, 1), top 0.32s cubic-bezier(0.22, 1, 0.36, 1);
}

.shpPiece.shpPlaced {
  cursor: default;
  animation: shpSettle 0.45s cubic-bezier(0.22, 1, 0.36, 1);
  filter: drop-shadow(0 4px 14px rgba(0, 0, 0, 0.35)) drop-shadow(0 0 18px rgba(134, 239, 172, 0.35));
}

@keyframes shpSettle {
  0% { transform: scale(1.12); }
  55% { transform: scale(0.94); }
  100% { transform: scale(1); }
}

#shpMessage {
  margin: 0 0 12px;
  min-height: 22px;
  font-size: 15px;
  color: var(--muted);
}

#shpScore {
  display: inline-block;
  padding: 7px 16px;
  border-radius: 999px;
  border: 1px solid var(--hairline);
  background: var(--glass);
  font-size: 13px;
  font-weight: 800;
  color: var(--text);
}

.landingGameCard.shapeSorterCard { --card-accent: rgba(251, 113, 133, 0.22); }

.landingShapeSorterIcons span {
  position: absolute;
  font-size: 32px;
  filter: drop-shadow(0 0 16px rgba(251, 113, 133, 0.4));
}

.landingShapeSorterIcons span:nth-child(1) { left: 13%; top: 18%; color: #6ee7f9; }
.landingShapeSorterIcons span:nth-child(2) { left: 47%; top: 42%; color: #86efac; }
.landingShapeSorterIcons span:nth-child(3) { right: 13%; top: 16%; color: #ffd166; }

@media (prefers-reduced-motion: reduce) {
  .shpPiece.shpPlaced,
  body.shapesorter-mode #shapeSorterGame { animation: none !important; }
  .shpPiece.shpReturn { transition: none; }
  .shpPiece.shpDragging { transform: none; }
}


/* ============================================================
   V17 · Card icons for games 4–7 float like the original three
   ============================================================ */

.landingColorHuntIcons span,
.landingFirstWordsIcons span,
.landingSkaiciukaiIcons span,
.landingShapeSorterIcons span {
  animation: ui26CardFloat var(--cfd, 5.6s) ease-in-out var(--cfdel, 0s) infinite alternate;
  will-change: transform;
}

@keyframes ui26CardFloat {
  from { transform: translate3d(0, 0, 0) rotate(-4deg) scale(1); }
  to   { transform: translate3d(9px, -14px, 0) rotate(5deg) scale(1.06); }
}

.landingColorHuntIcons span:nth-child(1),
.landingFirstWordsIcons span:nth-child(1),
.landingSkaiciukaiIcons span:nth-child(1),
.landingShapeSorterIcons span:nth-child(1) { --cfd: 5.2s; --cfdel: 0s; }

.landingColorHuntIcons span:nth-child(2),
.landingFirstWordsIcons span:nth-child(2),
.landingSkaiciukaiIcons span:nth-child(2),
.landingShapeSorterIcons span:nth-child(2) { --cfd: 6.4s; --cfdel: 0.7s; }

.landingColorHuntIcons span:nth-child(3),
.landingFirstWordsIcons span:nth-child(3),
.landingSkaiciukaiIcons span:nth-child(3),
.landingShapeSorterIcons span:nth-child(3) { --cfd: 5.8s; --cfdel: 1.3s; }

@media (prefers-reduced-motion: reduce) {
  .landingColorHuntIcons span,
  .landingFirstWordsIcons span,
  .landingSkaiciukaiIcons span,
  .landingShapeSorterIcons span { animation: none !important; }
}


/* ============================================================
   V18 · Session achievement trophy + clickable logos
   ============================================================ */

.achOverlay {
  position: fixed;
  inset: 0;
  z-index: 80;
  display: grid;
  place-items: center;
  padding: 20px;
  background: rgba(4, 5, 14, 0.78);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  animation: achFadeIn 0.3s ease both;
  overflow: hidden;
}

@keyframes achFadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}

.achCard {
  width: min(420px, 100%);
  padding: 28px 24px 24px;
  border: 1px solid rgba(255, 209, 102, 0.35);
  border-radius: 28px;
  text-align: center;
  background:
    radial-gradient(420px 200px at 50% -12%, rgba(255, 209, 102, 0.16), transparent 70%),
    rgba(9, 11, 28, 0.92);
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.6), 0 0 60px rgba(255, 209, 102, 0.18), inset 0 1px 0 rgba(255, 255, 255, 0.1);
  animation: achCardIn 0.5s cubic-bezier(0.22, 1, 0.36, 1) both;
}

@keyframes achCardIn {
  from { transform: translateY(24px) scale(0.92); opacity: 0; }
  to   { transform: translateY(0) scale(1); opacity: 1; }
}

.achLogo {
  height: 40px;
  width: auto;
  margin: 0 auto 6px;
  display: block;
}

.achTrophy {
  width: 96px;
  height: 96px;
  margin: 0 auto 6px;
  filter: drop-shadow(0 10px 26px rgba(255, 209, 102, 0.35));
  animation: achTrophyPop 0.65s cubic-bezier(0.22, 1, 0.36, 1) 0.15s both;
}

@keyframes achTrophyPop {
  0% { transform: scale(0) rotate(-12deg); }
  70% { transform: scale(1.12) rotate(3deg); }
  100% { transform: scale(1) rotate(0deg); }
}

.achTrophy svg { display: block; width: 100%; height: 100%; }

.achTitle {
  margin: 0 0 4px;
  font-size: clamp(28px, 7vw, 36px);
  font-weight: 900;
  letter-spacing: -0.03em;
  color: #fff;
  text-shadow: 0 0 30px rgba(255, 209, 102, 0.4);
}

.achSub {
  margin: 0 0 16px;
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(232, 234, 246, 0.55);
}

.achStats {
  display: flex;
  justify-content: center;
  gap: 12px;
  margin-bottom: 16px;
}

.achStat {
  min-width: 110px;
  padding: 12px 16px;
  border-radius: 16px;
  border: 1px solid var(--hairline);
  background: rgba(255, 255, 255, 0.04);
}

.achStat span {
  display: block;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(232, 234, 246, 0.55);
  margin-bottom: 2px;
}

.achStat strong {
  font-size: 26px;
  font-weight: 900;
  color: #ffd166;
}

.achShare {
  margin: 0 0 18px;
  font-size: 14.5px;
  line-height: 1.5;
  color: var(--muted);
}

.achContinue {
  min-height: 54px;
  width: 100%;
  padding: 14px 26px;
  border-radius: 16px;
  border: 1px solid rgba(255, 255, 255, 0.18);
  background: linear-gradient(140deg, #8b6bff 0%, #7c5cff 55%, #6247d9 100%);
  color: #fff;
  font-size: 17px;
  font-weight: 800;
  cursor: pointer;
  box-shadow: 0 10px 28px rgba(124, 92, 255, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.28);
  transition: transform 0.18s ease, box-shadow 0.18s ease;
}

.achContinue:hover { transform: translateY(-2px); box-shadow: 0 16px 40px rgba(124, 92, 255, 0.45); }
.achContinue:active { transform: scale(0.98); }
.achContinue:focus-visible { outline: none; box-shadow: var(--ring); }

.achConfetti {
  position: absolute;
  top: -14px;
  width: 10px;
  height: 14px;
  border-radius: 3px;
  opacity: 0.9;
  animation: achConfettiFall linear infinite;
}

@keyframes achConfettiFall {
  from { transform: translateY(-20px) rotate(0deg); }
  to   { transform: translateY(105vh) rotate(540deg); }
}

/* Logos are now navigation — show it */
.colorHuntTopBar img,
.firstWordsTopBar img,
.skcTopBar img,
.shpTopBar img,
.libraryTopBar img,
.letterPopLogoImage,
.wordarooLogoImage,
.gameLogoImage {
  cursor: pointer;
}

@media (prefers-reduced-motion: reduce) {
  .achOverlay,
  .achCard,
  .achTrophy { animation: none !important; }
  .achConfetti { display: none; }
  .achContinue { transition: none; }
}


/* ============================================================
   V19 · Poros / Memory Match (game #8)
   ============================================================ */

.memoryGame { display: none; }

body.memory-mode { overflow: hidden; }

body.memory-mode .siteShell,
body.memory-mode #game,
body.memory-mode #wordaroo,
body.memory-mode #letterPopGame,
body.memory-mode #colorHuntGame,
body.memory-mode #firstWordsGame,
body.memory-mode #skaiciukaiGame,
body.memory-mode #shapeSorterGame,
body.memory-mode .gameLibrary { display: none !important; }

body.memory-mode .memoryGame {
  display: block;
  position: fixed;
  inset: 0;
  z-index: 40;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  background:
    radial-gradient(900px 560px at 22% -6%, rgba(124, 92, 255, 0.20), transparent 60%),
    radial-gradient(760px 500px at 84% 6%, rgba(110, 231, 249, 0.10), transparent 58%),
    linear-gradient(180deg, #070920 0%, #05060f 60%, #04040b 100%);
}

.memTopBar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: max(10px, env(safe-area-inset-top)) 16px 10px;
}

.memTopBar img { height: 44px; width: auto; display: block; }

#memBackButton,
#memLangButton {
  min-height: 44px;
  padding: 10px 16px;
  border-radius: 14px;
  border: 1px solid var(--hairline-strong);
  background: var(--glass-strong);
  color: var(--text);
  font-weight: 800;
  font-size: 15px;
  cursor: pointer;
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
}

#memLangButton {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-width: 54px;
  letter-spacing: 0.04em;
}

#memBackButton:focus-visible,
#memLangButton:focus-visible { outline: none; box-shadow: var(--ring); }

.memStage {
  display: grid;
  place-items: center;
  min-height: calc(100svh - 84px - env(safe-area-inset-top));
  padding: 12px 14px max(20px, env(safe-area-inset-bottom));
}

.memPanel {
  width: min(560px, 100%);
  padding: clamp(18px, 3.5vw, 30px);
  border: 1px solid var(--hairline);
  border-radius: 26px;
  text-align: center;
  background: rgba(9, 11, 28, 0.6);
  backdrop-filter: blur(18px) saturate(1.3);
  -webkit-backdrop-filter: blur(18px) saturate(1.3);
  box-shadow: var(--shadow-soft), inset 0 1px 0 rgba(255, 255, 255, 0.07);
}

.memKicker {
  margin: 0 0 6px;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--soft);
}

#memTitle {
  margin: 0 0 14px;
  font-size: clamp(24px, 5.6vw, 36px);
  font-weight: 900;
  letter-spacing: -0.03em;
  color: #fff;
  text-shadow: 0 0 30px var(--glow);
}

.memGrid {
  display: grid;
  grid-template-columns: repeat(var(--cols, 3), 1fr);
  gap: clamp(8px, 2.4vw, 14px);
  margin-bottom: 14px;
}

.memCard {
  position: relative;
  aspect-ratio: 3 / 4;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
  perspective: 700px;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}

.memInner {
  position: absolute;
  inset: 0;
  transition: transform 0.4s cubic-bezier(0.22, 1, 0.36, 1);
  transform-style: preserve-3d;
}

.memCard.memFlipped .memInner,
.memCard.memMatched .memInner {
  transform: rotateY(180deg);
}

.memBack,
.memFace {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  border-radius: 16px;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  border: 1px solid var(--hairline-strong);
}

.memBack {
  font-size: clamp(28px, 7vw, 40px);
  font-weight: 900;
  color: rgba(255, 255, 255, 0.6);
  background:
    radial-gradient(120% 120% at 30% 20%, rgba(124, 92, 255, 0.4), transparent 60%),
    linear-gradient(160deg, rgba(124, 92, 255, 0.25), rgba(110, 231, 249, 0.12));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.14);
}

.memFace {
  font-size: clamp(32px, 8vw, 48px);
  transform: rotateY(180deg);
  background: linear-gradient(160deg, rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0.03));
}

.memCard.memMatched {
  cursor: default;
  animation: memMatchPulse 0.55s ease;
}

.memCard.memMatched .memFace {
  border-color: rgba(134, 239, 172, 0.7);
  box-shadow: 0 0 24px rgba(74, 222, 128, 0.4);
}

@keyframes memMatchPulse {
  40% { transform: scale(1.08); }
  100% { transform: scale(1); }
}

.memCard:focus-visible { outline: none; }
.memCard:focus-visible .memBack,
.memCard:focus-visible .memFace { box-shadow: var(--ring); }

#memMessage {
  margin: 0 0 12px;
  min-height: 22px;
  font-size: 15px;
  color: var(--muted);
}

#memScore {
  display: inline-block;
  padding: 7px 16px;
  border-radius: 999px;
  border: 1px solid var(--hairline);
  background: var(--glass);
  font-size: 13px;
  font-weight: 800;
  color: var(--text);
}

.landingGameCard.memoryCard { --card-accent: rgba(110, 231, 249, 0.2); }

.landingMemoryIcons span {
  position: absolute;
  font-size: 32px;
  filter: drop-shadow(0 0 16px rgba(110, 231, 249, 0.4));
}

.landingMemoryIcons span:nth-child(1) { left: 13%; top: 18%; }
.landingMemoryIcons span:nth-child(2) { left: 47%; top: 42%; color: #a78bfa; }
.landingMemoryIcons span:nth-child(3) { right: 13%; top: 16%; }

@media (prefers-reduced-motion: reduce) {
  .memInner { transition: none !important; }
  .memCard.memMatched { animation: none !important; }
}


/* Logo is navigation inside games — but never during screen lock */
body.game-mode .gameLogoImage,
.wordarooLogoImage,
.letterPopLogoImage {
  position: relative;
  z-index: 60;
  pointer-events: auto;
}

body.screen-locked .gameLogoImage,
body.screen-locked .wordarooLogoImage,
body.screen-locked .letterPopLogoImage {
  cursor: default;
  pointer-events: none; /* taps pass through to the locked game */
}


/* ============================================================
   V20 · Dėlionė / Little Puzzle (game #9)
   ============================================================ */

.puzzleGame { display: none; }

body.puzzle-mode { overflow: hidden; }

body.puzzle-mode .siteShell,
body.puzzle-mode #game,
body.puzzle-mode #wordaroo,
body.puzzle-mode #letterPopGame,
body.puzzle-mode #colorHuntGame,
body.puzzle-mode #firstWordsGame,
body.puzzle-mode #skaiciukaiGame,
body.puzzle-mode #shapeSorterGame,
body.puzzle-mode #memoryGame,
body.puzzle-mode .gameLibrary { display: none !important; }

body.puzzle-mode .puzzleGame {
  display: block;
  position: fixed;
  inset: 0;
  z-index: 40;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  background:
    radial-gradient(900px 560px at 22% -6%, rgba(124, 92, 255, 0.20), transparent 60%),
    radial-gradient(760px 500px at 84% 6%, rgba(45, 212, 191, 0.10), transparent 58%),
    linear-gradient(180deg, #070920 0%, #05060f 60%, #04040b 100%);
}

.pzlTopBar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: max(10px, env(safe-area-inset-top)) 16px 10px;
}

.pzlTopBar img { height: 44px; width: auto; display: block; }

#pzlBackButton,
#pzlLangButton {
  min-height: 44px;
  padding: 10px 16px;
  border-radius: 14px;
  border: 1px solid var(--hairline-strong);
  background: var(--glass-strong);
  color: var(--text);
  font-weight: 800;
  font-size: 15px;
  cursor: pointer;
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
}

#pzlLangButton {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-width: 54px;
  letter-spacing: 0.04em;
}

#pzlBackButton:focus-visible,
#pzlLangButton:focus-visible { outline: none; box-shadow: var(--ring); }

.pzlStage {
  display: grid;
  place-items: center;
  min-height: calc(100svh - 84px - env(safe-area-inset-top));
  padding: 12px 14px max(20px, env(safe-area-inset-bottom));
}

.pzlPanel {
  width: min(620px, 100%);
  padding: clamp(18px, 3.5vw, 30px);
  border: 1px solid var(--hairline);
  border-radius: 26px;
  text-align: center;
  background: rgba(9, 11, 28, 0.6);
  backdrop-filter: blur(18px) saturate(1.3);
  -webkit-backdrop-filter: blur(18px) saturate(1.3);
  box-shadow: var(--shadow-soft), inset 0 1px 0 rgba(255, 255, 255, 0.07);
}

.pzlKicker {
  margin: 0 0 6px;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--soft);
}

#pzlTitle {
  margin: 0 0 12px;
  font-size: clamp(24px, 5.6vw, 36px);
  font-weight: 900;
  letter-spacing: -0.03em;
  color: #fff;
  text-shadow: 0 0 30px var(--glow);
}

.pzlArea {
  position: relative;
  height: clamp(320px, 54svh, 440px);
  margin-bottom: 14px;
  border-radius: 20px;
  border: 1px solid var(--hairline);
  background: rgba(255, 255, 255, 0.03);
  overflow: hidden;
  touch-action: none;
}

/* Ghost board */
.pzlBoard {
  position: absolute;
  display: grid;
  place-items: center;
  border-radius: 18px;
  border: 2px dashed rgba(255, 255, 255, 0.22);
  background: rgba(255, 255, 255, 0.02);
}

.pzlGhost {
  opacity: 0.18;
  filter: grayscale(0.4);
  user-select: none;
}

.pzlGridV, .pzlGridH {
  position: absolute;
  background: rgba(255, 255, 255, 0.14);
}
.pzlGridV { left: 50%; top: 6%; bottom: 6%; width: 2px; }
.pzlGridH { top: 50%; left: 6%; right: 6%; height: 2px; }

.pzlBoard.pzlComplete {
  border-color: rgba(134, 239, 172, 0.7);
  animation: pzlDone 0.7s cubic-bezier(0.22, 1, 0.36, 1);
  box-shadow: 0 0 40px rgba(74, 222, 128, 0.35);
}

@keyframes pzlDone {
  40% { transform: scale(1.06); }
  100% { transform: scale(1); }
}

/* Pieces */
.pzlPiece {
  position: absolute;
  padding: 0;
  border: 1px solid var(--hairline-strong);
  border-radius: 14px;
  background: rgba(16, 19, 43, 0.85);
  cursor: grab;
  touch-action: none;
  -webkit-tap-highlight-color: transparent;
  overflow: hidden;
  filter: drop-shadow(0 8px 20px rgba(0, 0, 0, 0.45));
  z-index: 3;
}

.pzlWindow {
  position: relative;
  display: block;
  overflow: hidden;
}

.pzlGlyph {
  position: absolute;
  display: block;
  text-align: center;
  user-select: none;
  pointer-events: none;
}

.pzlPiece.pzlDragging {
  cursor: grabbing;
  z-index: 6;
  filter: drop-shadow(0 16px 32px rgba(0, 0, 0, 0.55)) drop-shadow(0 0 22px var(--glow));
  transform: scale(1.07);
}

.pzlPiece.pzlReturn {
  transition: left 0.32s cubic-bezier(0.22, 1, 0.36, 1), top 0.32s cubic-bezier(0.22, 1, 0.36, 1);
}

.pzlPiece.pzlPlaced {
  cursor: default;
  border-color: transparent;
  background: transparent;
  animation: pzlSettle 0.4s cubic-bezier(0.22, 1, 0.36, 1);
  filter: none;
}

@keyframes pzlSettle {
  0% { transform: scale(1.1); }
  60% { transform: scale(0.96); }
  100% { transform: scale(1); }
}

#pzlMessage {
  margin: 0 0 12px;
  min-height: 22px;
  font-size: 15px;
  color: var(--muted);
}

#pzlScore {
  display: inline-block;
  padding: 7px 16px;
  border-radius: 999px;
  border: 1px solid var(--hairline);
  background: var(--glass);
  font-size: 13px;
  font-weight: 800;
  color: var(--text);
}

.landingGameCard.puzzleCard { --card-accent: rgba(45, 212, 191, 0.2); }

.landingPuzzleIcons span {
  position: absolute;
  font-size: 32px;
  filter: drop-shadow(0 0 16px rgba(45, 212, 191, 0.4));
}

.landingPuzzleIcons span:nth-child(1) { left: 13%; top: 18%; }
.landingPuzzleIcons span:nth-child(2) { left: 47%; top: 42%; }
.landingPuzzleIcons span:nth-child(3) { right: 13%; top: 16%; }

@media (prefers-reduced-motion: reduce) {
  .pzlPiece.pzlPlaced,
  .pzlBoard.pzlComplete,
  body.puzzle-mode #puzzleGame { animation: none !important; }
  .pzlPiece.pzlReturn { transition: none; }
  .pzlPiece.pzlDragging { transform: none; }
}


/* ============================================================
   V21 · Spalvinimo knygelė / Coloring Book (game #10)
   ============================================================ */

.coloringGame { display: none; }

body.coloring-mode { overflow: hidden; }

body.coloring-mode .siteShell,
body.coloring-mode #game,
body.coloring-mode #wordaroo,
body.coloring-mode #letterPopGame,
body.coloring-mode #colorHuntGame,
body.coloring-mode #firstWordsGame,
body.coloring-mode #skaiciukaiGame,
body.coloring-mode #shapeSorterGame,
body.coloring-mode #memoryGame,
body.coloring-mode #puzzleGame,
body.coloring-mode .gameLibrary { display: none !important; }

body.coloring-mode .coloringGame {
  display: block;
  position: fixed;
  inset: 0;
  z-index: 40;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  background:
    radial-gradient(900px 560px at 22% -6%, rgba(124, 92, 255, 0.20), transparent 60%),
    radial-gradient(760px 500px at 84% 6%, rgba(251, 146, 60, 0.10), transparent 58%),
    linear-gradient(180deg, #070920 0%, #05060f 60%, #04040b 100%);
}

.clrTopBar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: max(10px, env(safe-area-inset-top)) 16px 10px;
}

.clrTopBar img { height: 44px; width: auto; display: block; }

#clrBackButton,
#clrLangButton {
  min-height: 44px;
  padding: 10px 16px;
  border-radius: 14px;
  border: 1px solid var(--hairline-strong);
  background: var(--glass-strong);
  color: var(--text);
  font-weight: 800;
  font-size: 15px;
  cursor: pointer;
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
}

#clrLangButton {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-width: 54px;
  letter-spacing: 0.04em;
}

#clrBackButton:focus-visible,
#clrLangButton:focus-visible { outline: none; box-shadow: var(--ring); }

.clrStage {
  display: grid;
  place-items: center;
  min-height: calc(100svh - 84px - env(safe-area-inset-top));
  padding: 12px 14px max(20px, env(safe-area-inset-bottom));
}

.clrPanel {
  width: min(560px, 100%);
  padding: clamp(18px, 3.5vw, 28px);
  border: 1px solid var(--hairline);
  border-radius: 26px;
  text-align: center;
  background: rgba(9, 11, 28, 0.6);
  backdrop-filter: blur(18px) saturate(1.3);
  -webkit-backdrop-filter: blur(18px) saturate(1.3);
  box-shadow: var(--shadow-soft), inset 0 1px 0 rgba(255, 255, 255, 0.07);
}

.clrKicker {
  margin: 0 0 6px;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--soft);
}

#clrTitle {
  margin: 0 0 12px;
  font-size: clamp(24px, 5.6vw, 34px);
  font-weight: 900;
  letter-spacing: -0.03em;
  color: #fff;
  text-shadow: 0 0 30px var(--glow);
}

.clrCanvas {
  width: min(420px, 100%);
  aspect-ratio: 1;
  margin: 0 auto 14px;
  border-radius: 20px;
  border: 1px solid var(--hairline);
  background: rgba(255, 255, 255, 0.03);
  touch-action: manipulation;
}

.clrCanvas svg {
  display: block;
  width: 100%;
  height: 100%;
}

.clrRegion {
  stroke: rgba(255, 255, 255, 0.55);
  stroke-width: 3;
  stroke-linejoin: round;
  cursor: pointer;
  transition: fill 0.18s ease;
}

.clrRegion.clrPop {
  animation: clrPop 0.3s ease;
}

@keyframes clrPop {
  40% { stroke-width: 6; }
  100% { stroke-width: 3; }
}

.clrPalette {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
  margin-bottom: 12px;
}

.clrSwatch {
  width: clamp(40px, 10vw, 50px);
  height: clamp(40px, 10vw, 50px);
  padding: 0;
  border-radius: 50%;
  border: 3px solid rgba(255, 255, 255, 0.25);
  background: var(--sw);
  cursor: pointer;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
  transition: transform 0.15s ease, border-color 0.2s ease, box-shadow 0.2s ease;
  font-size: 20px;
  display: grid;
  place-items: center;
}

.clrSwatch:active { transform: scale(0.9); }

.clrSwatch.clrSelected {
  border-color: #fff;
  transform: scale(1.12);
  box-shadow: 0 0 20px var(--sw), 0 0 0 3px rgba(255, 255, 255, 0.2);
}

.clrSwatch.clrEraser {
  background: rgba(255, 255, 255, 0.1);
  border-style: dashed;
}

.clrSwatch:focus-visible { outline: none; box-shadow: var(--ring); }

#clrNextButton {
  min-height: 46px;
  padding: 11px 22px;
  margin-bottom: 10px;
  border-radius: 14px;
  border: 1px solid var(--hairline-strong);
  background: var(--glass-strong);
  color: var(--text);
  font-weight: 800;
  font-size: 15px;
  cursor: pointer;
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  transition: border-color 0.2s ease, background 0.2s ease;
}

#clrNextButton:hover {
  border-color: rgba(167, 139, 250, 0.6);
  background: rgba(124, 92, 255, 0.14);
}

#clrNextButton:focus-visible { outline: none; box-shadow: var(--ring); }

#clrMessage {
  margin: 0 0 10px;
  min-height: 22px;
  font-size: 15px;
  color: var(--muted);
}

#clrScore {
  display: inline-block;
  padding: 7px 16px;
  border-radius: 999px;
  border: 1px solid var(--hairline);
  background: var(--glass);
  font-size: 13px;
  font-weight: 800;
  color: var(--text);
}

.landingGameCard.coloringCard { --card-accent: rgba(251, 146, 60, 0.22); }

.landingColoringIcons span {
  position: absolute;
  font-size: 32px;
  filter: drop-shadow(0 0 16px rgba(251, 146, 60, 0.4));
}

.landingColoringIcons span:nth-child(1) { left: 13%; top: 18%; }
.landingColoringIcons span:nth-child(2) { left: 47%; top: 42%; }
.landingColoringIcons span:nth-child(3) { right: 13%; top: 16%; }

@media (prefers-reduced-motion: reduce) {
  .clrRegion { transition: none; }
  .clrRegion.clrPop { animation: none !important; }
  .clrSwatch { transition: none; }
  .clrSwatch.clrSelected { transform: none; }
  body.coloring-mode #coloringGame { animation: none !important; }
}


/* ============================================================
   V22 · Scalable landing: top 3 games + "All games" tile;
   seasonal skins (summer live, others ready for design)
   ============================================================ */

/* Landing shows first 3 game cards + the browse tile; the rest live in the library.
   (Cards stay in the DOM — the library clones them all.) */
.gamesShowcase > .landingGameCard:nth-child(n+5) {
  display: none;
}

/* ---- The "All games" tile ---- */
.landingGameCard.browseAllCard {
  --card-accent: rgba(124, 92, 255, 0.3);
  background:
    radial-gradient(420px 220px at 82% -20%, rgba(124, 92, 255, 0.3), transparent 68%),
    repeating-linear-gradient(135deg, rgba(255, 255, 255, 0.03) 0 14px, transparent 14px 28px),
    linear-gradient(160deg, rgba(255, 255, 255, 0.07) 0%, rgba(8, 10, 26, 0.55) 100%) !important;
}

.browseAllBadge {
  position: absolute;
  left: 50%;
  top: 38%;
  transform: translate(-50%, -50%);
  font-size: clamp(44px, 9vw, 64px);
  font-weight: 900;
  letter-spacing: -0.04em;
  background: linear-gradient(96deg, #ffffff 0%, #dcd4ff 50%, #6ee7f9 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  filter: drop-shadow(0 0 26px rgba(124, 92, 255, 0.5));
  animation: ui26Pulse 3.2s ease-in-out infinite;
  pointer-events: none;
}

/* ---- Seasonal skins: aurora + headline tinting per season ---- */

/* Summer: warm coral-amber light */
body[data-season="summer"] .siteShell::after {
  background:
    radial-gradient(46% 34% at 22% 12%, rgba(251, 146, 60, 0.20), transparent 70%),
    radial-gradient(38% 30% at 82% 8%, rgba(110, 231, 249, 0.16), transparent 70%),
    radial-gradient(42% 32% at 64% 86%, rgba(250, 204, 21, 0.10), transparent 72%),
    radial-gradient(30% 26% at 8% 78%, rgba(242, 122, 214, 0.07), transparent 70%);
}

body[data-season="summer"] .gradientText {
  background-image: linear-gradient(96deg, #ffffff 0%, #ffe9c9 34%, #fdba74 62%, #6ee7f9 100%);
}

body[data-season="summer"] .eyebrow::before {
  background: #fdba74;
  box-shadow: 0 0 12px #fb923c;
}

/* Autumn: golden-red light (ready for September) */
body[data-season="autumn"] .siteShell::after {
  background:
    radial-gradient(46% 34% at 22% 12%, rgba(234, 88, 12, 0.18), transparent 70%),
    radial-gradient(38% 30% at 82% 8%, rgba(250, 204, 21, 0.12), transparent 70%),
    radial-gradient(42% 32% at 64% 86%, rgba(190, 24, 93, 0.08), transparent 72%);
}

body[data-season="autumn"] .gradientText {
  background-image: linear-gradient(96deg, #ffffff 0%, #fde8d0 34%, #fb923c 62%, #f59e0b 100%);
}

/* Winter: icy blue light */
body[data-season="winter"] .siteShell::after {
  background:
    radial-gradient(46% 34% at 22% 12%, rgba(56, 189, 248, 0.18), transparent 70%),
    radial-gradient(38% 30% at 82% 8%, rgba(167, 139, 250, 0.14), transparent 70%),
    radial-gradient(42% 32% at 64% 86%, rgba(255, 255, 255, 0.06), transparent 72%);
}

body[data-season="winter"] .gradientText {
  background-image: linear-gradient(96deg, #ffffff 0%, #e0f2fe 34%, #7dd3fc 62%, #a78bfa 100%);
}

/* Spring: fresh green-pink light */
body[data-season="spring"] .siteShell::after {
  background:
    radial-gradient(46% 34% at 22% 12%, rgba(134, 239, 172, 0.16), transparent 70%),
    radial-gradient(38% 30% at 82% 8%, rgba(242, 122, 214, 0.13), transparent 70%),
    radial-gradient(42% 32% at 64% 86%, rgba(250, 204, 21, 0.08), transparent 72%);
}

body[data-season="spring"] .gradientText {
  background-image: linear-gradient(96deg, #ffffff 0%, #dcfce7 34%, #86efac 62%, #f9a8d4 100%);
}

@media (prefers-reduced-motion: reduce) {
  .browseAllBadge { animation: none !important; }
}


/* ============================================================
   V23 · Install hint banner + Skaičiukai level 2 (count to 10)
   ============================================================ */

/* ---- Install hint: gentle glass sheet at the bottom ---- */
.installHint {
  position: fixed;
  left: 12px;
  right: 12px;
  bottom: max(12px, env(safe-area-inset-bottom));
  z-index: 70;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 14px 14px 12px;
  border-radius: 20px;
  border: 1px solid var(--hairline-strong);
  background: rgba(9, 11, 28, 0.88);
  backdrop-filter: blur(20px) saturate(1.3);
  -webkit-backdrop-filter: blur(20px) saturate(1.3);
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.55), inset 0 1px 0 rgba(255, 255, 255, 0.1);
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 0.35s ease, transform 0.35s cubic-bezier(0.22, 1, 0.36, 1);
  max-width: 560px;
  margin-inline: auto;
}

.installHint.installHintIn {
  opacity: 1;
  transform: translateY(0);
}

.installHintIcon {
  width: 44px;
  height: 44px;
  border-radius: 12px;
  flex: 0 0 auto;
}

.installHintBody {
  flex: 1 1 auto;
  min-width: 0;
  text-align: left;
}

.installHintTitle {
  display: block;
  font-size: 14px;
  font-weight: 800;
  color: var(--text);
  line-height: 1.25;
}

.installHintText {
  display: block;
  margin-top: 2px;
  font-size: 12.5px;
  line-height: 1.35;
  color: var(--muted);
}

.installHintAction {
  flex: 0 0 auto;
  min-height: 40px;
  padding: 9px 16px;
  border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, 0.18);
  background: linear-gradient(140deg, #8b6bff 0%, #7c5cff 55%, #6247d9 100%);
  color: #fff;
  font-size: 13.5px;
  font-weight: 800;
  cursor: pointer;
  box-shadow: 0 8px 20px rgba(124, 92, 255, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.25);
}

.installHintAction:focus-visible { outline: none; box-shadow: var(--ring); }

.installHintClose {
  flex: 0 0 auto;
  width: 34px;
  height: 34px;
  padding: 0;
  display: grid;
  place-items: center;
  border-radius: 50%;
  border: 1px solid var(--hairline);
  background: var(--glass);
  color: var(--muted);
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
}

.installHintClose:focus-visible { outline: none; box-shadow: var(--ring); }

@media (max-width: 420px) {
  .installHint { gap: 10px; padding: 12px; }
  .installHintIcon { width: 38px; height: 38px; }
  .installHintAction { padding: 8px 12px; font-size: 12.5px; }
}

/* ---- Skaičiukai level 2: 10 numbers in two rows, compact objects ---- */
.skcNumbers.skcTwoRows {
  flex-wrap: wrap;
  max-width: 420px;
  margin-inline: auto;
  margin-bottom: 12px;
}

.skcNumbers.skcTwoRows .skcNumber {
  width: clamp(46px, 11vw, 62px);
  height: clamp(46px, 11vw, 62px);
  font-size: clamp(20px, 5vw, 28px);
}

.skcObjects.skcMany {
  gap: clamp(5px, 1.6vw, 10px);
}

.skcObjects.skcMany .skcObject {
  font-size: clamp(32px, 7.5vw, 46px);
}

@media (prefers-reduced-motion: reduce) {
  .installHint { transition: none; }
}


/* ============================================================
   V24 · Letter Pop desktop fit: centered wide stage, no page
   scroll, bubbles always inside the viewport
   ============================================================ */

/* Kill any stray page scroll/overflow while playing */
body.letterpop-mode {
  overflow: hidden;
}

/* The game gets the same wide, centered canvas as the rest of the site */
#letterPopGame {
  width: 100% !important;
  max-width: none !important;
  padding-inline: clamp(14px, 2vw, 32px);
  box-sizing: border-box;
}

.letterPopTopBar,
.letterPopStage {
  width: min(1360px, 100%) !important;
  margin-inline: auto !important;
}

/* Height budget with real headroom for the top bar — the old
   calc(100svh - 112px) underestimated the chrome and pushed the
   stage bottom (and the bubbles parked there) below the fold */
.letterPopStage {
  height: calc(100svh - 172px) !important;
  min-height: 460px !important;
}

@media (max-width: 700px) {
  .letterPopStage {
    height: calc(100svh - 150px) !important;
    min-height: 480px !important;
  }
}


/* ============================================================
   V25 · Season everywhere: whole-page ambient layer,
   seasonal eyebrow garnish, stronger summer presence
   ============================================================ */

/* Whole-page drifting seasonal decorations (behind all content) */
.seasonAmbient {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
}

/* Landing content stacks above the ambient layer */
.siteShell {
  position: relative;
  z-index: 1;
}

.seasonAmbientItem {
  position: absolute;
  opacity: 0.34;
  filter: saturate(1.1) drop-shadow(0 0 14px rgba(255, 209, 102, 0.25));
  animation: seasonDrift var(--sad, 12s) ease-in-out var(--sadelay, 0s) infinite alternate;
  will-change: transform;
  user-select: none;
}

@keyframes seasonDrift {
  from { transform: translate3d(0, 0, 0) rotate(-5deg); }
  to   { transform: translate3d(var(--sax, 10px), var(--say, -22px), 0) rotate(6deg); }
}

/* Never during games or in the library — landing ambience only */
body.game-mode .seasonAmbient,
body.keyboard-visible .seasonAmbient,
body.screen-locked .seasonAmbient,
body.wordaroo-mode .seasonAmbient,
body.letterpop-mode .seasonAmbient,
body.colorhunt-mode .seasonAmbient,
body.firstwords-mode .seasonAmbient,
body.skaiciukai-mode .seasonAmbient,
body.shapesorter-mode .seasonAmbient,
body.memory-mode .seasonAmbient,
body.puzzle-mode .seasonAmbient,
body.coloring-mode .seasonAmbient,
body.kitoks-mode .seasonAmbient,
body.emoji-mode .seasonAmbient,
body.library-mode .seasonAmbient {
  display: none;
}

/* Seasonal garnish on the eyebrow pill — pure CSS, survives translations */
body[data-season="summer"] .eyebrow::after { content: " \2600\FE0F"; }
body[data-season="autumn"] .eyebrow::after { content: " \1F341"; }
body[data-season="winter"] .eyebrow::after { content: " \2744\FE0F"; }
body[data-season="spring"] .eyebrow::after { content: " \1F337"; }

/* Summer gets a touch more warmth in the hero floats too */
body[data-season="summer"] .ui26Floats span {
  opacity: 0.2;
}

@media (prefers-reduced-motion: reduce) {
  .seasonAmbient { display: none !important; }
}


/* ============================================================
   V26 · Mega-update: sticker album, mute buttons, age toggle,
   parents section, Kuris kitoks? (game #11)
   ============================================================ */

/* ---- Sticker album: header button ---- */
.stickerAlbumButton {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 16px;
}

.albumCount {
  font-size: 12px;
  font-weight: 900;
  color: #ffd166;
}

/* ---- Sticker album: overlay ---- */
.albumOverlay {
  position: fixed;
  inset: 0;
  z-index: 80;
  display: grid;
  place-items: center;
  padding: 18px;
  background: rgba(4, 5, 14, 0.8);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  animation: achFadeIn 0.25s ease both;
}

.albumCard {
  position: relative;
  width: min(520px, 100%);
  max-height: min(80svh, 640px);
  overflow-y: auto;
  padding: 26px 22px 22px;
  border: 1px solid rgba(255, 209, 102, 0.3);
  border-radius: 26px;
  text-align: center;
  background:
    radial-gradient(420px 200px at 50% -12%, rgba(255, 209, 102, 0.14), transparent 70%),
    rgba(9, 11, 28, 0.94);
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.6), inset 0 1px 0 rgba(255, 255, 255, 0.1);
}

.albumTitle {
  margin: 0 0 4px;
  font-size: clamp(24px, 6vw, 30px);
  font-weight: 900;
  letter-spacing: -0.02em;
  color: #fff;
}

.albumSub {
  margin: 0 0 16px;
  font-size: 13px;
  font-weight: 700;
  color: var(--muted);
}

.albumGrid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(56px, 1fr));
  gap: 10px;
}

.albumCell {
  display: grid;
  place-items: center;
  aspect-ratio: 1;
  font-size: 28px;
  border-radius: 14px;
  border: 1px solid var(--hairline);
  background: rgba(255, 255, 255, 0.03);
  color: rgba(232, 234, 246, 0.25);
  font-weight: 900;
}

.albumCell.albumOwned {
  border-color: rgba(255, 209, 102, 0.45);
  background: rgba(255, 209, 102, 0.08);
  box-shadow: 0 0 16px rgba(255, 209, 102, 0.15);
  color: inherit;
}

.albumClose {
  position: absolute;
  top: 12px;
  right: 12px;
  width: 36px;
  height: 36px;
  padding: 0;
  display: grid;
  place-items: center;
  border-radius: 50%;
  border: 1px solid var(--hairline);
  background: var(--glass);
  color: var(--muted);
  font-size: 20px;
  cursor: pointer;
}

.albumClose:focus-visible { outline: none; box-shadow: var(--ring); }

/* ---- Sticker inside the achievement trophy card ---- */
.achSticker {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin: 0 0 14px;
  padding: 10px 14px;
  border-radius: 14px;
  border: 1px dashed rgba(255, 209, 102, 0.4);
  background: rgba(255, 209, 102, 0.06);
}

.achStickerEmoji {
  font-size: 30px;
  animation: achTrophyPop 0.55s cubic-bezier(0.22, 1, 0.36, 1) 0.3s both;
}

.achStickerLabel {
  font-size: 12.5px;
  font-weight: 800;
  color: #ffd166;
  text-align: left;
}

/* ---- Mute button in game top bars ---- */
.gameMuteButton {
  min-height: 44px;
  min-width: 46px;
  padding: 8px 12px;
  border-radius: 14px;
  border: 1px solid var(--hairline-strong);
  background: var(--glass-strong);
  font-size: 18px;
  cursor: pointer;
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
}

.gameMuteButton:focus-visible { outline: none; box-shadow: var(--ring); }

/* ---- Age toggle in the hero ---- */
.ageToggle {
  display: inline-flex;
  gap: 4px;
  margin-top: 4px;
  padding: 4px;
  border-radius: 999px;
  border: 1px solid var(--hairline);
  background: var(--glass);
}

.ageToggle button {
  min-height: 40px;
  padding: 8px 16px;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: var(--muted);
  font-size: 14px;
  font-weight: 800;
  cursor: pointer;
  transition: background 0.2s ease, color 0.2s ease;
}

.ageToggle button.ageActive {
  background: linear-gradient(140deg, #8b6bff 0%, #7c5cff 60%, #6247d9 100%);
  color: #fff;
  box-shadow: 0 6px 16px rgba(124, 92, 255, 0.35);
}

.ageToggle button:focus-visible { outline: none; box-shadow: var(--ring); }

/* ============ Kuris kitoks? (game #11) ============ */

.kitoksGame { display: none; }

body.kitoks-mode { overflow: hidden; }

body.kitoks-mode .siteShell,
body.kitoks-mode #game,
body.kitoks-mode #wordaroo,
body.kitoks-mode #letterPopGame,
body.kitoks-mode #colorHuntGame,
body.kitoks-mode #firstWordsGame,
body.kitoks-mode #skaiciukaiGame,
body.kitoks-mode #shapeSorterGame,
body.kitoks-mode #memoryGame,
body.kitoks-mode #puzzleGame,
body.kitoks-mode #coloringGame,
body.kitoks-mode .gameLibrary { display: none !important; }

body.kitoks-mode .kitoksGame {
  display: block;
  position: fixed;
  inset: 0;
  z-index: 40;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  background:
    radial-gradient(900px 560px at 22% -6%, rgba(124, 92, 255, 0.20), transparent 60%),
    radial-gradient(760px 500px at 84% 6%, rgba(250, 204, 21, 0.09), transparent 58%),
    linear-gradient(180deg, #070920 0%, #05060f 60%, #04040b 100%);
}

.ktkTopBar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: max(10px, env(safe-area-inset-top)) 16px 10px;
}

.ktkTopBar img { height: 44px; width: auto; display: block; }

#ktkBackButton,
#ktkLangButton {
  min-height: 44px;
  padding: 10px 16px;
  border-radius: 14px;
  border: 1px solid var(--hairline-strong);
  background: var(--glass-strong);
  color: var(--text);
  font-weight: 800;
  font-size: 15px;
  cursor: pointer;
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
}

#ktkLangButton {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-width: 54px;
  letter-spacing: 0.04em;
}

#ktkBackButton:focus-visible,
#ktkLangButton:focus-visible { outline: none; box-shadow: var(--ring); }

.ktkStage {
  display: grid;
  place-items: center;
  min-height: calc(100svh - 84px - env(safe-area-inset-top));
  padding: 12px 14px max(20px, env(safe-area-inset-bottom));
}

.ktkPanel {
  width: min(560px, 100%);
  padding: clamp(20px, 4vw, 32px);
  border: 1px solid var(--hairline);
  border-radius: 26px;
  text-align: center;
  background: rgba(9, 11, 28, 0.6);
  backdrop-filter: blur(18px) saturate(1.3);
  -webkit-backdrop-filter: blur(18px) saturate(1.3);
  box-shadow: var(--shadow-soft), inset 0 1px 0 rgba(255, 255, 255, 0.07);
}

.ktkKicker {
  margin: 0 0 8px;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--soft);
}

#ktkTitle {
  margin: 0 0 18px;
  font-size: clamp(26px, 6vw, 38px);
  font-weight: 900;
  letter-spacing: -0.03em;
  color: #fff;
  text-shadow: 0 0 30px var(--glow);
}

.ktkGrid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: clamp(10px, 3vw, 18px);
  margin-bottom: 16px;
}

.ktkGrid.ktkThree {
  grid-template-columns: repeat(3, 1fr);
}

.ktkTile {
  display: grid;
  place-items: center;
  aspect-ratio: 1;
  font-size: clamp(46px, 12vw, 72px);
  border-radius: 20px;
  border: 1px solid var(--hairline-strong);
  background: linear-gradient(160deg, rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0.02));
  cursor: pointer;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
  animation: skcDrop 0.4s cubic-bezier(0.22, 1, 0.36, 1) both;
  transition: transform 0.15s ease, border-color 0.2s ease, box-shadow 0.2s ease;
}

.ktkGrid.ktkThree .ktkTile {
  font-size: clamp(40px, 11vw, 60px);
}

.ktkTile:hover {
  border-color: rgba(167, 139, 250, 0.55);
  box-shadow: 0 0 22px rgba(124, 92, 255, 0.2);
}

.ktkTile:active { transform: scale(0.93); }
.ktkTile:focus-visible { outline: none; box-shadow: var(--ring); }

.ktkTile.ktkCorrect {
  border-color: rgba(134, 239, 172, 0.85);
  background: rgba(34, 197, 94, 0.18);
  box-shadow: 0 0 30px rgba(74, 222, 128, 0.45);
  animation: fwPop 0.5s cubic-bezier(0.22, 1, 0.36, 1);
}

.ktkTile.ktkWrong { animation: fwShake 0.4s ease; }

.ktkTile.ktkFade { opacity: 0.3; pointer-events: none; }

#ktkMessage {
  margin: 0 0 12px;
  min-height: 22px;
  font-size: 15px;
  color: var(--muted);
}

#ktkScore {
  display: inline-block;
  padding: 7px 16px;
  border-radius: 999px;
  border: 1px solid var(--hairline);
  background: var(--glass);
  font-size: 13px;
  font-weight: 800;
  color: var(--text);
}

.landingGameCard.kitoksCard { --card-accent: rgba(250, 204, 21, 0.2); }

.landingKitoksIcons span {
  position: absolute;
  font-size: 32px;
  filter: drop-shadow(0 0 16px rgba(250, 204, 21, 0.4));
}

.landingKitoksIcons span:nth-child(1) { left: 13%; top: 18%; }
.landingKitoksIcons span:nth-child(2) { left: 47%; top: 42%; }
.landingKitoksIcons span:nth-child(3) { right: 13%; top: 16%; }

@media (prefers-reduced-motion: reduce) {
  .ktkTile,
  .ktkTile.ktkCorrect,
  .ktkTile.ktkWrong,
  .achStickerEmoji,
  .albumOverlay,
  body.kitoks-mode #kitoksGame { animation: none !important; }
  .ktkTile, .ageToggle button { transition: none; }
}


/* ============================================================
   V27 · Mobile header fit: 3 nav buttons + compact kangaroo badge
   ============================================================ */

.siteHeader {
  flex-wrap: nowrap;
  gap: 10px;
}

.siteHeader .siteLogo { flex: 0 1 auto; min-width: 0; }
.siteHeader .headerNav { flex: 0 0 auto; }

@media (max-width: 640px) {
  .siteHeader {
    gap: 8px;
    padding: 8px 10px;
  }

  /* The logo PNG is [kangaroo badge][wordmark]; on phones show just the
     square badge via a crop — the three nav buttons get room to breathe */
  .siteHeader .clickarooLogoImage {
    width: 44px !important;
    max-width: 44px !important;
    height: 44px !important;
    object-fit: cover;
    object-position: left center;
    border-radius: 14px;
  }

  .headerNav { gap: 6px; }

  .headerNav .langToggle {
    min-height: 40px;
    padding: 8px 11px;
    font-size: 13px;
  }

  .stickerAlbumButton {
    padding: 8px 9px;
    gap: 4px;
  }
}

@media (max-width: 360px) {
  .headerNav .aboutNavButton { padding: 8px 9px; font-size: 12px; }
}


/* ============================================================
   V28 · Touch-device performance: iPad, Android tablets and
   phones get lighter decoration (fewer animated nodes, no
   drop-shadow filters on ambient elements).
   ============================================================
   Root cause: hero floats + card-icon floats + season ambient
   could add up to 30+ elements animating simultaneously, several
   with filter:drop-shadow — the single most expensive CSS effect
   to composite on mobile GPUs. Detection deliberately does NOT
   use the @media (pointer: coarse) / (hover: none) features: iPad
   Safari has long-documented WebKit inconsistencies there (it can
   report pointer:fine/hover:hover due to iPadOS system-wide mouse
   support, independent of whether a mouse is actually connected —
   see WebKit bug 209292), so a pointer-based rule can silently
   never fire on iPad. Instead, ui-2026-fx.js sets a `.clickarooTouch`
   class on <html> via `navigator.maxTouchPoints`, which stays
   accurate even when iPadOS disguises its UA as desktop Safari.
   Node COUNT is thinned at creation time in JS (see ui-2026-fx.js);
   this block only needs to strip the filter from the always-present
   card-icon floats. */

.clickarooTouch .landingColorHuntIcons span,
.clickarooTouch .landingFirstWordsIcons span,
.clickarooTouch .landingSkaiciukaiIcons span,
.clickarooTouch .landingShapeSorterIcons span,
.clickarooTouch .landingMemoryIcons span,
.clickarooTouch .landingPuzzleIcons span,
.clickarooTouch .landingKitoksIcons span {
  filter: none;
}


/* ============================================================
   V29 · Compositor hygiene: fix ghost/stale-layer artifacts seen
   on desktop after About-button smooth scroll + manual scroll-up.
   ============================================================
   Root cause: .gamesShowcase carried will-change:transform — a
   permanently layer-promoted 12-card container that is never
   itself animated (an explicit MDN anti-pattern). Its composited
   tile could be drawn at a stale offset during programmatic
   smooth scrolling, painting ghost copies of cards (Letter Pop /
   browse tile = the tile's corner) over the hero. That hint is
   now removed at its declaration above. The rules below finish
   the cleanup. */

/* Reveal choreography: release the layer hint once the entrance
   transition has played — .ui26Reveal otherwise kept every
   revealed section promoted forever. */
.ui26Reveal.ui26In {
  will-change: auto;
}

/* Sticky blurred header: own fresh compositing layer, so its
   backdrop-filter re-resolves cleanly during programmatic
   scrolls instead of reusing a stale backdrop snapshot. */
.siteHeader {
  transform: translateZ(0);
}


/* ============================================================
   V30 · Compact desktop header ("buggy hat" fix).
   ============================================================
   The compact header-logo sizing only ever existed for widths
   ≤760px (52px tall) and ≤640px (V27 badge crop). Above 760px
   the cascade fell through to main.css's original hero-era rule
   clamp(190px, 30vw, 430px) — a 430px-wide logo inside a STICKY
   GLASS header = a ~180px translucent slab hovering over content
   whenever the page is scrolled (the About button being the only
   thing that ever scrolls the desktop landing, which is why this
   ancient latent bug surfaced there). This gives every width
   above the V27 mobile range the same slim treatment. */

@media (min-width: 641px) {
  .siteHeader .clickarooLogoImage {
    height: 52px !important;
    width: auto !important;
    max-width: 240px !important;
    object-fit: contain;
  }
}




/* ============================================================
   V32 · Root cause fixed (see .siteShell in main.css: overflow
   hidden → clip). With the phantom inner scroll container gone,
   the sticky header works exactly as designed, so V31's
   un-sticking is removed. Anchor targets get scroll-margin so
   an About jump lands below the sticky bar, not under it.
   ============================================================ */

#founder,
#parentsSection,
#about {
  scroll-margin-top: 104px;
}


/* ============================================================
   V33 · Mute button in the three original games
   ============================================================ */

/* Wordaroo & Letter Pop: the button joins their existing top
   control clusters — inherits .gameMuteButton pill styling. */
.wordarooTopControls .gameMuteButton,
.letterPopTopControls .gameMuteButton {
  align-self: center;
}

/* Keyboard Playground positions controls individually; the mute
   button gets a fixed home in the bottom-left corner, clear of
   the hint (bottom-center), brand (top-left in game) and the
   language/back cluster (top). */
#kbMuteButton {
  display: none;
}

body.game-mode #kbMuteButton {
  display: grid;
  place-items: center;
  position: fixed;
  left: max(14px, env(safe-area-inset-left));
  bottom: max(14px, env(safe-area-inset-bottom));
  z-index: 30;
}

/* Never during the parent screen lock — nothing tappable there
   except the PIN pad. */
body.screen-locked #kbMuteButton {
  display: none;
}



/* ============================================================
   V34 · Gentle motion: prefers-reduced-motion now SOFTENS
   decorative animation (ambient layers at 2x duration) and
   keeps brief functional feedback, instead of freezing the
   whole product. Auto-generated from the base rules so names
   and CSS vars always match. Placed last: overrides earlier
   animation:none kills inside the same media query.
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
  .seasonAmbient { display: block !important; }
  .eyebrow::before { animation: ui26Pulse calc(2.6s * 2) ease-in-out infinite !important; }
  .ui26Floats span { animation: ui26Drift calc(var(--d, 9s) * 2) ease-in-out infinite alternate !important; }
  /* ---------- Smooth in-transitions for game screens (visual only) ---------- */ body.game-mode #game, body.wordaroo-mode #wordaroo, body.letterpop-mode #letterPopGame, body.colorhunt-mode #colorHuntGame, body.firstwords-mode #firstWordsGame, body.skaiciukai-mode #skaiciukaiGame, body.shapesorter-mode #shapeSorterGame, body.memory-mode #memoryGame, body.puzzle-mode #puzzleGame, body.coloring-mode #coloringGame, body.kitoks-mode #kitoksGame { animation: ui26GameIn 0.35s ease both !important; }
  .gradientText { animation: ui26Shimmer calc(9s * 2) ease-in-out infinite alternate !important; }
  /* ---------- Aurora: slow living light behind everything ---------- */ .siteShell::after { animation: ui26Aurora calc(26s * 2) ease-in-out infinite alternate !important; }
  /* Header logo halo */ .logoBubble::after { animation: ui26Pulse calc(4.5s * 2) ease-in-out infinite !important; }
  .colorHuntItem.floaty { animation: colorHuntFloat calc(var(--fd, 7s) * 2) ease-in-out var(--fdel, 0s) infinite alternate !important; }
  .colorHuntItem.popped { animation: colorHuntPop 0.38s cubic-bezier(0.22, 1, 0.36, 1) forwards !important; }
  .colorHuntItem.wrongShake { animation: colorHuntShake 0.4s ease !important; }
  .colorHuntBurst { animation: colorHuntBurst 1s ease-out forwards !important; }
  body.library-mode .gameLibrary { animation: ui26GameIn 0.3s ease both !important; }
  .firstWordsOption.fwCorrect { animation: fwPop 0.5s cubic-bezier(0.22, 1, 0.36, 1) !important; }
  .firstWordsOption.fwWrong { animation: fwShake 0.4s ease !important; }
  .skcObject { animation: skcDrop 0.45s cubic-bezier(0.22, 1, 0.36, 1) both !important; }
  .skcObject.skcCelebrate { animation: skcBounce 0.6s ease both !important; }
  .skcNumber.skcCorrect { animation: fwPop 0.5s cubic-bezier(0.22, 1, 0.36, 1) !important; }
  .skcNumber.skcWrong { animation: fwShake 0.4s ease !important; }
  .shpPiece.shpPlaced { animation: shpSettle 0.45s cubic-bezier(0.22, 1, 0.36, 1) !important; }
  /* ============================================================ V17 · Card icons for games 4–7 float like the original three ============================================================ */ .landingColorHuntIcons span, .landingFirstWordsIcons span, .landingSkaiciukaiIcons span, .landingShapeSorterIcons span { animation: ui26CardFloat calc(var(--cfd, 5.6s) * 2) ease-in-out var(--cfdel, 0s) infinite alternate !important; }
  /* ============================================================ V18 · Session achievement trophy + clickable logos ============================================================ */ .achOverlay { animation: achFadeIn 0.3s ease both !important; }
  .achCard { animation: achCardIn 0.5s cubic-bezier(0.22, 1, 0.36, 1) both !important; }
  .achTrophy { animation: achTrophyPop 0.65s cubic-bezier(0.22, 1, 0.36, 1) 0.15s both !important; }
  .achConfetti { animation: achConfettiFall linear infinite !important; }
  .memCard.memMatched { animation: memMatchPulse 0.55s ease !important; }
  .pzlBoard.pzlComplete { animation: pzlDone 0.7s cubic-bezier(0.22, 1, 0.36, 1) !important; }
  .pzlPiece.pzlPlaced { animation: pzlSettle 0.4s cubic-bezier(0.22, 1, 0.36, 1) !important; }
  .clrRegion.clrPop { animation: clrPop 0.3s ease !important; }
  .browseAllBadge { animation: ui26Pulse calc(3.2s * 2) ease-in-out infinite !important; }
  .seasonAmbientItem { animation: seasonDrift calc(var(--sad, 12s) * 2) ease-in-out var(--sadelay, 0s) infinite alternate !important; }
  /* ---- Sticker album: overlay ---- */ .albumOverlay { animation: achFadeIn 0.25s ease both !important; }
  .achStickerEmoji { animation: achTrophyPop 0.55s cubic-bezier(0.22, 1, 0.36, 1) 0.3s both !important; }
  .ktkTile { animation: skcDrop 0.4s cubic-bezier(0.22, 1, 0.36, 1) both !important; }
  .ktkTile.ktkCorrect { animation: fwPop 0.5s cubic-bezier(0.22, 1, 0.36, 1) !important; }
  .ktkTile.ktkWrong { animation: fwShake 0.4s ease !important; }
}

/* ============================================================
   V35 · Emoji Keyboard (game #12): write messages with emoji keys
   ============================================================ */

.emojiGame { display: none; }

body.emoji-mode { overflow: hidden; }

body.emoji-mode .siteShell,
body.emoji-mode #game,
body.emoji-mode #wordaroo,
body.emoji-mode #letterPopGame,
body.emoji-mode #colorHuntGame,
body.emoji-mode #firstWordsGame,
body.emoji-mode #skaiciukaiGame,
body.emoji-mode #shapeSorterGame,
body.emoji-mode #memoryGame,
body.emoji-mode #puzzleGame,
body.emoji-mode #coloringGame,
body.emoji-mode #kitoksGame,
body.emoji-mode .gameLibrary { display: none !important; }

body.emoji-mode .emojiGame {
  display: block;
  position: fixed;
  inset: 0;
  z-index: 40;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  background:
    radial-gradient(900px 560px at 20% -6%, rgba(250, 204, 21, 0.14), transparent 60%),
    radial-gradient(760px 500px at 84% 8%, rgba(124, 92, 255, 0.18), transparent 58%),
    linear-gradient(180deg, #070920 0%, #05060f 60%, #04040b 100%);
}

.emjTopBar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: max(10px, env(safe-area-inset-top)) 16px 10px;
}

.emjTopBar img { height: 44px; width: auto; display: block; }

#emjBackButton,
#emjLangButton {
  min-height: 44px;
  padding: 10px 16px;
  border-radius: 14px;
  border: 1px solid var(--hairline-strong);
  background: var(--glass-strong);
  color: var(--text);
  font-weight: 800;
  font-size: 15px;
  cursor: pointer;
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
}

#emjLangButton {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-width: 54px;
  letter-spacing: 0.04em;
}

#emjBackButton:focus-visible,
#emjLangButton:focus-visible { outline: none; box-shadow: var(--ring); }

.emjStage {
  display: grid;
  place-items: center;
  min-height: calc(100svh - 84px - env(safe-area-inset-top));
  padding: 10px 14px max(18px, env(safe-area-inset-bottom));
}

.emjPanel {
  width: min(640px, 100%);
  padding: clamp(18px, 4vw, 30px);
  border: 1px solid var(--hairline);
  border-radius: 26px;
  text-align: center;
  background: rgba(9, 11, 28, 0.6);
  backdrop-filter: blur(18px) saturate(1.3);
  -webkit-backdrop-filter: blur(18px) saturate(1.3);
  box-shadow: var(--shadow-soft), inset 0 1px 0 rgba(255, 255, 255, 0.07);
}

.emjKicker {
  margin: 0 0 8px;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--soft);
}

#emjTitle {
  margin: 0 0 14px;
  font-size: clamp(24px, 6vw, 36px);
  font-weight: 900;
  letter-spacing: -0.03em;
  color: #fff;
  text-shadow: 0 0 30px var(--glow);
}

/* The written message */
.emjStrip {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 6px;
  min-height: 64px;
  margin-bottom: 10px;
  padding: 10px 12px;
  border-radius: 18px;
  border: 1px dashed rgba(255, 209, 102, 0.4);
  background: rgba(255, 209, 102, 0.05);
}

.emjGlyph {
  font-size: clamp(30px, 7vw, 44px);
  line-height: 1;
  animation: emjPopIn 0.35s cubic-bezier(0.22, 1, 0.36, 1) both;
}

.emjGlyph.emjGone {
  animation: emjPopOut 0.22s ease both;
}

.emjGlyph.emjDance {
  animation: emjDance 0.6s cubic-bezier(0.22, 1, 0.36, 1) both;
}

@keyframes emjPopIn {
  from { transform: scale(0.2) translateY(14px); opacity: 0; }
  60%  { transform: scale(1.18); }
  to   { transform: scale(1) translateY(0); opacity: 1; }
}

@keyframes emjPopOut {
  to { transform: scale(0.2) translateY(10px); opacity: 0; }
}

@keyframes emjDance {
  0%   { transform: translateY(0) rotate(0deg) scale(1); }
  30%  { transform: translateY(-14px) rotate(-8deg) scale(1.15); }
  60%  { transform: translateY(0) rotate(6deg) scale(1.05); }
  100% { transform: translateY(0) rotate(0deg) scale(1); }
}

#emjMessage {
  margin: 0 0 12px;
  min-height: 22px;
  font-size: 15px;
  color: var(--muted);
}

/* The emoji keyboard */
.emjGrid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: clamp(6px, 1.6vw, 10px);
  margin-bottom: 14px;
}

.emjGrid.emjGridSmall {
  grid-template-columns: repeat(4, 1fr);
}

.emjKey {
  display: grid;
  place-items: center;
  aspect-ratio: 1;
  min-height: 48px;
  font-size: clamp(24px, 5.4vw, 34px);
  border-radius: 16px;
  border: 1px solid var(--hairline-strong);
  background: linear-gradient(160deg, rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0.02));
  cursor: pointer;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
  animation: skcDrop 0.35s cubic-bezier(0.22, 1, 0.36, 1) both;
  transition: transform 0.12s ease, border-color 0.2s ease;
}

.emjGrid.emjGridSmall .emjKey {
  font-size: clamp(32px, 8vw, 46px);
}

.emjKey:hover { border-color: rgba(167, 139, 250, 0.55); }
.emjKey:active { transform: scale(0.9); }
.emjKey:focus-visible { outline: none; box-shadow: var(--ring); }

.emjKey.emjKeyPressed {
  animation: emjKeyPress 0.25s ease both;
}

@keyframes emjKeyPress {
  0% { transform: scale(1); }
  40% { transform: scale(0.85); }
  100% { transform: scale(1); }
}

.emjControlKey {
  background: rgba(124, 92, 255, 0.14);
  border-color: rgba(167, 139, 250, 0.4);
  font-size: clamp(20px, 4.6vw, 28px);
  color: var(--text);
}

.emjMagicKey {
  background: linear-gradient(140deg, rgba(255, 209, 102, 0.2), rgba(124, 92, 255, 0.18));
  border-color: rgba(255, 209, 102, 0.5);
}

#emjScore {
  display: inline-block;
  padding: 7px 16px;
  border-radius: 999px;
  border: 1px solid var(--hairline);
  background: var(--glass);
  font-size: 13px;
  font-weight: 800;
  color: var(--text);
}

.landingGameCard.emojiCard { --card-accent: rgba(255, 209, 102, 0.25); }

.landingEmojiIcons span {
  position: absolute;
  font-size: 32px;
  filter: drop-shadow(0 0 16px rgba(255, 209, 102, 0.4));
}

.landingEmojiIcons span:nth-child(1) { left: 13%; top: 18%; }
.landingEmojiIcons span:nth-child(2) { left: 47%; top: 40%; }
.landingEmojiIcons span:nth-child(3) { right: 13%; top: 16%; }

/* Gentle-motion policy: pops and key presses are brief, user-
   triggered feedback — they stay on under reduced motion. Only
   the keyboard's staggered entrance is skipped. */
@media (prefers-reduced-motion: reduce) {
  .emjKey { animation: none !important; }
  .emjGlyph { animation: emjPopIn 0.35s cubic-bezier(0.22, 1, 0.36, 1) both !important; }
  .emjGlyph.emjDance { animation: emjDance 0.6s cubic-bezier(0.22, 1, 0.36, 1) both !important; }
}