@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600&family=Manrope:wght@400;500;600&display=swap');

:root {
  --ink: #3f3b4b;
  --muted: #777281;
  --paper: #fffafe;
  --purple: #7770a6;
  --line: rgba(66, 58, 84, .11);
  --shadow: 0 18px 60px rgba(92, 67, 126, .14);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  min-height: 100vh;
  overflow-x: hidden;
  color: var(--ink);
  background:
    radial-gradient(circle at 12% 8%, rgba(255, 223, 235, .55), transparent 25%),
    radial-gradient(circle at 90% 15%, rgba(222, 216, 255, .62), transparent 28%),
    linear-gradient(180deg, #fffafe 0%, #f9fbff 48%, #fffaf5 100%);
  font-family: "DM Sans", "Noto Sans", system-ui, sans-serif;
  -webkit-tap-highlight-color: transparent;
}
button, select { font: inherit; }
button { color: inherit; }
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.ambient {
  position: fixed;
  z-index: -1;
  width: 36vw;
  aspect-ratio: 1;
  filter: blur(80px);
  opacity: .22;
  border-radius: 50%;
  pointer-events: none;
}
.ambient-one { top: -15vw; right: -8vw; background: linear-gradient(135deg, #c8b9ff, #ffbad7); opacity: .34; }
.ambient-two { top: 42vh; left: -22vw; background: linear-gradient(135deg, #a7ead9, #b9d8ff); opacity: .3; }

.site-header {
  width: min(1180px, calc(100% - 48px));
  height: 92px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.brand {
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--ink);
  text-decoration: none;
  font-weight: 600;
  letter-spacing: -.02em;
}
.brand-mark {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  color: #fff;
  background: linear-gradient(135deg, #7d71bc, #af78b4);
  border-radius: 12px 12px 7px 12px;
  box-shadow: 0 5px 16px rgba(96, 86, 143, .22);
}
.header-actions { display: flex; align-items: center; gap: 10px; }
.icon-button, .language-picker {
  height: 40px;
  border: 1px solid var(--line);
  background: rgba(255,255,255,.72);
  border-radius: 12px;
  box-shadow: 0 5px 18px rgba(60,50,80,.04);
}
.icon-button {
  width: 40px;
  cursor: pointer;
  transition: .2s ease;
}
.icon-button.muted { color: #aaa6af; }
.language-picker { position: relative; }
.language-picker::after {
  content: "⌄";
  position: absolute;
  right: 12px;
  top: 8px;
  pointer-events: none;
  font-size: 13px;
}
.language-picker select {
  height: 100%;
  max-width: 150px;
  padding: 0 32px 0 13px;
  border: 0;
  outline: 0;
  color: var(--ink);
  background: transparent;
  appearance: none;
  cursor: pointer;
}

.hero {
  position: relative;
  width: min(1180px, calc(100% - 48px));
  min-height: 610px;
  margin: 18px auto 54px;
  padding: 68px 62px;
  overflow: hidden;
  display: grid;
  grid-template-columns: 1.03fr .97fr;
  align-items: center;
  gap: 30px;
  border: 1px solid rgba(255,255,255,.76);
  border-radius: 38px;
  background:
    radial-gradient(circle at 82% 18%, rgba(193,169,255,.42), transparent 29%),
    radial-gradient(circle at 66% 82%, rgba(134,222,207,.34), transparent 30%),
    radial-gradient(circle at 8% 12%, rgba(255,196,218,.43), transparent 31%),
    linear-gradient(135deg, rgba(255,248,253,.92), rgba(241,237,255,.82));
  box-shadow: 0 28px 80px rgba(79,56,111,.1), inset 0 1px 0 rgba(255,255,255,.8);
}
.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: .24;
  background-image: radial-gradient(rgba(106,85,137,.38) .7px, transparent .7px);
  background-size: 19px 19px;
  mask-image: linear-gradient(90deg, #000, transparent 58%);
}
.hero-copy {
  position: relative;
  z-index: 2;
  min-width: 0;
}
.eyebrow {
  display: flex;
  align-items: center;
  gap: 9px;
  color: #8575a4;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: .09em;
  text-transform: uppercase;
}
.eyebrow > span:first-child {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: #a77cc5;
  box-shadow: 0 0 0 5px #eee6fa;
}
.hero h1 {
  margin: 25px 0 22px;
  max-width: 650px;
  font-family: "Manrope", "Noto Sans", sans-serif;
  font-size: clamp(52px, 5.5vw, 74px);
  line-height: 1.06;
  font-weight: 500;
  letter-spacing: -.055em;
  color: #40394f;
  text-shadow: 0 4px 24px rgba(125, 101, 153, .08);
}
.hero p {
  max-width: 505px;
  margin: 0;
  color: var(--muted);
  font-size: 17px;
  line-height: 1.75;
}
.hero-actions { display:flex;align-items:center;gap:20px;margin-top:35px }
.start-button {
  display: flex;
  align-items: center;
  gap: 26px;
  margin-top: 0;
  padding: 14px 17px 14px 22px;
  border-radius: 14px;
  color: white;
  background: linear-gradient(135deg, #7068aa, #9b72ae);
  text-decoration: none;
  font-weight: 500;
  box-shadow: 0 12px 28px rgba(83, 74, 126, .2);
  transition: transform .2s, box-shadow .2s;
}
.start-button:hover { transform: translateY(-2px); box-shadow: 0 16px 32px rgba(83,74,126,.25); }
.start-button span:last-child { font-size: 18px; }
.game-count { display:flex;align-items:center;gap:8px;color:#81788d;font-size:12px;white-space:nowrap }
.game-count b { display:grid;place-items:center;width:42px;height:42px;border:1px solid rgba(104,88,129,.12);border-radius:50%;background:rgba(255,255,255,.56);color:#725f91;font-size:14px;box-shadow:0 6px 15px rgba(75,58,102,.06) }
.live-stats {
  position: relative;
  display: flex;
  align-items: center;
  width: fit-content;
  gap: 20px;
  margin-top: 30px;
  padding: 15px 18px;
  border: 1px solid rgba(137,105,184,.22);
  border-radius: 19px;
  background:
    linear-gradient(135deg,rgba(248,242,255,.94),rgba(231,250,241,.9));
  box-shadow: 0 13px 34px rgba(91,65,127,.13), inset 0 1px 0 rgba(255,255,255,.9);
  backdrop-filter: blur(10px);
}
.live-stats::before {
  content:"";
  position:absolute;
  inset:-1px;
  z-index:-1;
  border-radius:20px;
  background:linear-gradient(100deg,rgba(161,116,211,.3),rgba(74,194,137,.28));
  filter:blur(10px);
  opacity:.55;
}
.live-stats > i { width:1px;height:36px;background:linear-gradient(transparent,rgba(82,68,101,.18),transparent) }
.live-stat { display:flex;align-items:center;gap:11px }
.live-stat > span:last-child { display:flex;flex-direction:column;gap:1px }
.live-stat b { color:#4f4262;font:700 17px "Manrope";font-variant-numeric:tabular-nums;letter-spacing:-.02em;transition:.2s }
.live-stat:last-of-type b { color:#23835b }
.live-stat small { color:#82778e;font-size:10px;white-space:nowrap }
.stat-icon { display:grid;place-items:center;width:36px;height:36px;border-radius:12px;background:linear-gradient(145deg,#eee2ff,#d9c7f4);color:#765696;font-size:20px;box-shadow:inset 0 1px 0 rgba(255,255,255,.8) }
.online-icon { background:linear-gradient(145deg,#dcf7e9,#bce9d0) }
.online-icon em { width:10px;height:10px;border-radius:50%;background:#31af70;box-shadow:0 0 0 6px rgba(49,175,112,.15);animation:livePulse 2s ease-in-out infinite }
.estimate-label { position:absolute;right:12px;top:-11px;display:flex;align-items:center;gap:5px;padding:4px 8px;border:1px solid rgba(69,173,113,.18);border-radius:12px;color:#3d9666;background:#effaf4;box-shadow:0 4px 12px rgba(56,130,87,.1);font-size:8px;font-weight:600 }
.estimate-label > em { width:5px;height:5px;border-radius:50%;background:#45b879;box-shadow:0 0 0 3px rgba(69,184,121,.12) }
.live-stat b.stat-updated { animation:statBump .35s ease }
@keyframes livePulse{50%{box-shadow:0 0 0 8px rgba(85,175,124,0)}}
@keyframes statBump{50%{transform:translateY(-2px);filter:brightness(1.25)}}
.hero-playground { position:relative;z-index:1;width:min(100%,490px);aspect-ratio:1;margin-left:auto }
.hero-orbit { position:absolute;left:50%;top:50%;border:1px solid rgba(120,98,155,.15);border-radius:50%;transform:translate(-50%,-50%) rotate(-18deg) }
.orbit-a { width:88%;height:66% }.orbit-b { width:68%;height:88%;transform:translate(-50%,-50%) rotate(42deg) }
.calm-core {
  position:absolute;
  left:50%;
  top:50%;
  width:188px;
  height:188px;
  transform:translate(-50%,-50%);
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:8px;
  border:1px solid rgba(255,255,255,.8);
  border-radius:46% 54% 51% 49%;
  color:#75608c;
  background:linear-gradient(145deg,rgba(255,255,255,.78),rgba(225,212,249,.78));
  box-shadow:0 25px 55px rgba(89,66,125,.16),inset 0 1px 0 #fff;
  animation:coreFloat 5s ease-in-out infinite;
}
.core-glow { position:absolute;inset:-24px;border-radius:50%;border:1px solid rgba(151,120,190,.13);animation:corePulse 4s ease-in-out infinite }
.core-face { font:500 31px "Manrope";letter-spacing:.04em }
.calm-core small { color:#8e819c;font-size:11px }
.preview-chip { position:absolute;display:flex;align-items:center;gap:10px;padding:11px 14px;border:1px solid rgba(255,255,255,.8);border-radius:17px;background:rgba(255,255,255,.68);backdrop-filter:blur(10px);box-shadow:0 12px 32px rgba(76,57,105,.11);color:#655c70;animation:chipFloat 5s ease-in-out infinite }
.preview-chip b { font-size:11px;font-weight:600;white-space:nowrap }
.preview-chip > span { position:relative;display:grid;place-items:center;width:34px;height:34px;border-radius:11px }
.preview-bubble { left:1%;top:15%;transform:rotate(-5deg) }
.preview-bubble > span { background:#eee5ff }.preview-bubble i { position:absolute;border-radius:50%;background:#a58ed2 }.preview-bubble i:nth-child(1){width:13px;height:13px;left:6px;top:7px}.preview-bubble i:nth-child(2){width:8px;height:8px;right:6px;top:6px}.preview-bubble i:nth-child(3){width:10px;height:10px;right:8px;bottom:6px}
.preview-ripple { right:-2%;top:25%;animation-delay:-1.5s;transform:rotate(4deg) }
.preview-ripple > span { background:#dbf1f6 }.preview-ripple i { position:absolute;width:24px;height:11px;border:1px solid #65a7b7;border-radius:50% }.preview-ripple i:nth-child(2){width:15px;height:7px}
.preview-memory { left:9%;bottom:12%;animation-delay:-2.8s;transform:rotate(3deg) }
.preview-memory > span { color:#b95f8b;background:#ffe4ee;font-size:17px }
.hero-spark { position:absolute;color:#b182c3;font-style:normal;font-size:25px;animation:sparkle 3s ease-in-out infinite }.spark-a{right:13%;bottom:16%}.spark-b{left:23%;top:2%;font-size:14px;animation-delay:-1s}
.hero-dot { position:absolute;border-radius:50% }.dot-a{width:13px;height:13px;right:13%;top:9%;background:#f3a989}.dot-b{width:8px;height:8px;left:4%;bottom:35%;background:#71c7b5}
@keyframes coreFloat{50%{transform:translate(-50%,-54%) rotate(2deg)}} @keyframes corePulse{50%{transform:scale(1.1);opacity:.45}} @keyframes chipFloat{50%{margin-top:-8px}} @keyframes sparkle{50%{transform:scale(.65) rotate(25deg);opacity:.45}}

.games-section {
  width: min(1180px, calc(100% - 48px));
  margin: 0 auto;
  padding: 86px 0 92px;
  border-top: 1px solid var(--line);
}
.section-heading {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 30px;
  margin-bottom: 24px;
}
.section-kicker, .modal-kicker {
  margin: 0 0 10px;
  color: #9992a9;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .14em;
}
.section-heading h2 {
  margin: 0;
  font-family: "Manrope", sans-serif;
  font-size: clamp(28px, 3vw, 40px);
  font-weight: 500;
  letter-spacing: -.04em;
}
.section-heading > p {
  max-width: 280px;
  margin: 0 0 4px;
  color: var(--muted);
  font-size: 14px;
  line-height: 1.6;
  text-align: right;
}
.collection-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  margin-bottom: 24px;
  padding: 7px;
  border: 1px solid rgba(87,72,108,.09);
  border-radius: 17px;
  background: rgba(255,255,255,.54);
  box-shadow: 0 8px 24px rgba(69,54,92,.04);
  backdrop-filter: blur(12px);
}
.filter-tabs { display:flex;align-items:center;gap:4px }
.filter-tab {
  display:flex;
  align-items:center;
  gap:8px;
  padding:10px 13px;
  border:0;
  border-radius:11px;
  color:#7c7586;
  background:transparent;
  cursor:pointer;
  font-size:12px;
  transition:.2s ease;
}
.filter-tab b { display:grid;place-items:center;min-width:20px;height:20px;padding:0 5px;border-radius:10px;background:rgba(99,84,122,.07);font-size:9px;font-weight:600 }
.filter-tab:hover { color:#554d62;background:rgba(121,103,150,.06) }
.filter-tab.active { color:#fff;background:linear-gradient(135deg,#786ba8,#9c70a9);box-shadow:0 6px 16px rgba(82,62,117,.17) }
.filter-tab.active b { background:rgba(255,255,255,.18) }
.surprise-button {
  display:flex;
  align-items:center;
  gap:9px;
  padding:10px 14px;
  border:1px solid rgba(109,87,140,.11);
  border-radius:11px;
  color:#705f86;
  background:linear-gradient(135deg,rgba(243,235,255,.85),rgba(255,233,242,.8));
  cursor:pointer;
  font-size:12px;
  font-weight:600;
  transition:.2s ease;
}
.surprise-button:hover { transform:translateY(-2px);box-shadow:0 7px 16px rgba(85,62,116,.1) }
.surprise-icon { color:#a05f9a;font-size:14px }
.game-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
}
.game-card {
  position: relative;
  min-width: 0;
  min-height: 310px;
  padding: 22px;
  overflow: hidden;
  text-align: left;
  border: 0;
  border-radius: 24px;
  cursor: pointer;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.55);
  transition: transform .25s ease, box-shadow .25s ease;
  animation:cardReveal .3s ease;
}
.game-card:hover {
  transform: translateY(-5px);
  box-shadow: var(--shadow), inset 0 0 0 1px rgba(255,255,255,.7);
}
.game-card.hidden-card { display:none }
@keyframes cardReveal { from{opacity:0;transform:translateY(8px)} to{opacity:1;transform:none} }
.game-card:focus-visible,.filter-tab:focus-visible,.surprise-button:focus-visible,.start-button:focus-visible { outline:3px solid rgba(111,91,170,.28);outline-offset:3px }
.lavender { background: linear-gradient(145deg, #eee8ff, #ddd5f5); }
.peach { background: linear-gradient(145deg, #ffe9dc, #f5d7cf); }
.mint { background: linear-gradient(145deg, #e0f5e9, #cce8df); }
.blue { background: linear-gradient(145deg, #e0f2ff, #ccdfef); }
.yellow { background: linear-gradient(145deg, #fff4cb, #f3e1ae); }
.pink { background: linear-gradient(145deg, #ffe6ed, #efd0df); }
.coral { background: linear-gradient(145deg, #ffe0d8, #f2bab5); }
.aqua { background: linear-gradient(145deg, #d9f5f2, #b9dedc); }
.violet { background: linear-gradient(145deg, #e8e1ff, #c9b9eb); }
.lime { background: linear-gradient(145deg, #ecf8c9, #c8e596); }
.sunset { background: linear-gradient(145deg, #ffd9ca, #f3a69b); }
.sky { background: linear-gradient(145deg, #d9efff, #a9d6f2); }
.berry { background: linear-gradient(145deg, #f6d9f0, #d5a7d2); }
.tangerine { background: linear-gradient(145deg, #ffe4b7, #f5b878); }
.ocean { background: linear-gradient(145deg, #cdeff1, #89ced3); }
.rosewood { background: linear-gradient(145deg, #f4ddd8, #dcaea8); }
.midnight { background: linear-gradient(145deg, #dcdff5, #aeb7de); }
.clay { background: linear-gradient(145deg, #f1d8c6, #d8a783); }
.graphite { background: linear-gradient(145deg, #dfe5e8, #abb9c0); }
.sage { background: linear-gradient(145deg, #e0eddc, #a9c6a1); }
.hard-game { box-shadow: inset 0 0 0 1px rgba(255,255,255,.65), 0 8px 25px rgba(73,55,95,.06); }
.difficulty-badge {
  position: absolute;
  z-index: 2;
  top: 18px;
  right: 18px;
  padding: 6px 9px;
  color: rgba(67,53,77,.66);
  background: rgba(255,255,255,.48);
  border: 1px solid rgba(255,255,255,.68);
  border-radius: 20px;
  font-size: 9px;
  font-weight: 600;
  letter-spacing: .1em;
}
.card-art {
  position: relative;
  display: block;
  height: 205px;
}
.card-copy { display: flex; flex-direction: column; gap: 5px; }
.card-copy strong { font-family: "Manrope", sans-serif; font-size: 19px; font-weight: 600; letter-spacing: -.02em; }
.card-copy small { color: #76717f; font-size: 13px; }
.card-arrow {
  position: absolute;
  right: 20px;
  bottom: 20px;
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border: 1px solid rgba(65,60,76,.12);
  border-radius: 50%;
  font-size: 15px;
}
.bubble-art i {
  position: absolute;
  display: block;
  border-radius: 50%;
  background: radial-gradient(circle at 30% 25%, rgba(255,255,255,.9), rgba(197,180,244,.52));
  border: 1px solid rgba(116,104,160,.14);
  box-shadow: inset -7px -7px 14px rgba(119,106,164,.1), inset 4px 4px 8px rgba(255,255,255,.7);
}
.bubble-art i:nth-child(1){width:68px;height:68px;top:38px;left:30px}
.bubble-art i:nth-child(2){width:42px;height:42px;top:20px;left:130px}
.bubble-art i:nth-child(3){width:84px;height:84px;top:87px;left:114px}
.bubble-art i:nth-child(4){width:34px;height:34px;top:133px;left:41px}
.bubble-art i:nth-child(5){width:25px;height:25px;top:53px;right:26px}
.breathe-art { display: grid; place-items: center; }
.breathe-art i {
  position: absolute;
  width: 132px;
  height: 132px;
  border-radius: 50%;
  background: rgba(255,255,255,.28);
  border: 1px solid rgba(177,117,92,.12);
}
.breathe-art i:nth-child(2) { width: 98px; height: 98px; background: linear-gradient(145deg, rgba(255,255,255,.68), rgba(247,177,151,.32)); }
.breathe-art b { z-index: 1; font: 500 35px "Manrope"; color: #a87866; }
.garden-art { border-radius: 18px; overflow: hidden; }
.rake-line { position:absolute; left: 12%; width: 76%; height: 1px; background:#b9d0c5; border-radius: 50%; }
.rake-line::before,.rake-line::after { content:"";position:absolute;left:0;width:100%;height:1px;background:#b9d0c5;top:6px; }
.rake-line::after { top:12px; }
.l1{top:48px;transform:rotate(-4deg)} .l2{top:95px;transform:rotate(4deg)} .l3{top:150px;transform:rotate(-2deg)}
.garden-art b,.garden-art em { position:absolute;border-radius:50%;background:linear-gradient(145deg,#9fbdb0,#799d8d);box-shadow:inset -6px -5px 10px rgba(56,76,66,.14)}
.garden-art b{width:45px;height:35px;left:42px;top:87px;transform:rotate(-20deg)}
.garden-art em{width:28px;height:23px;right:54px;top:45px}
.ripple-art { display:grid;place-items:center; }
.ripple-art i { position:absolute;border:2px solid #82b6d2;border-radius:50%;width:55px;height:26px;opacity:.7 }
.ripple-art i:nth-child(2){width:115px;height:58px;opacity:.45}
.ripple-art i:nth-child(3){width:180px;height:94px;opacity:.25}
.switch-art { display:grid;grid-template-columns:repeat(3,50px);justify-content:center;align-content:center;gap:17px 24px; }
.switch-art i { width:50px;height:29px;border-radius:20px;background:rgba(255,255,255,.55);position:relative;box-shadow:inset 0 1px 3px rgba(73,68,45,.08)}
.switch-art i::after { content:"";position:absolute;width:21px;height:21px;left:4px;top:4px;border-radius:50%;background:#e0b950;transition:.2s }
.switch-art i.on::after { left:25px;background:#df8d53 }
.memory-art { display:grid;grid-template-columns:repeat(2,62px);justify-content:center;align-content:center;gap:10px; }
.memory-art i { height:62px;display:grid;place-items:center;border-radius:16px;background:rgba(255,255,255,.62);font-style:normal;color:#b56385;font-size:22px;box-shadow:0 5px 14px rgba(99,60,70,.08)}
.sequence-art { display:grid;grid-template-columns:repeat(2,68px);place-content:center;gap:9px;transform:rotate(8deg) }
.sequence-art i { height:68px;border-radius:24px 12px 24px 12px;box-shadow:inset 0 1px 0 rgba(255,255,255,.6),0 5px 12px rgba(91,56,66,.08) }
.sequence-art i:nth-child(1){background:#ef8d7c}.sequence-art i:nth-child(2){background:#f2bd60}.sequence-art i:nth-child(3){background:#75bfae}.sequence-art i:nth-child(4){background:#8d82c7}
.focus-art { display:grid;grid-template-columns:repeat(3,43px);place-content:center;gap:7px;transform:rotate(-4deg) }
.focus-art i { height:43px;display:grid;place-items:center;border-radius:11px;background:rgba(255,255,255,.6);color:#4e8582;font:600 14px "Manrope";font-style:normal;box-shadow:0 4px 10px rgba(55,105,100,.07) }
.timing-art { display:grid;place-items:center }
.timing-art > i { position:relative;width:80%;height:18px;border-radius:12px;background:rgba(255,255,255,.65);box-shadow:inset 0 2px 5px rgba(62,49,101,.09) }
.timing-art b { position:absolute;left:43%;top:-8px;width:14%;height:34px;border-radius:8px;background:rgba(139,113,193,.3) }
.timing-art em { position:absolute;left:49%;top:-15px;width:4px;height:48px;border-radius:5px;background:#735ca4;box-shadow:0 4px 12px rgba(75,53,123,.25) }
.odd-art,.lights-art,.slide-art { display:grid;grid-template-columns:repeat(3,46px);place-content:center;gap:7px }
.odd-art i { height:46px;border-radius:13px;background:#8fbe4f;box-shadow:inset 0 2px 0 rgba(255,255,255,.2) }
.odd-art i:nth-child(7){background:#a2ca62}
.lights-art i { height:46px;border-radius:50%;background:rgba(255,255,255,.28);box-shadow:inset 0 0 0 1px rgba(255,255,255,.4) }
.lights-art i:nth-child(1),.lights-art i:nth-child(5),.lights-art i:nth-child(8){background:#ffdb72;box-shadow:0 0 18px rgba(255,207,83,.65)}
.slide-art i { height:46px;display:grid;place-items:center;border-radius:11px;background:rgba(255,255,255,.62);font-style:normal;color:#4783a8;font-weight:600;box-shadow:0 4px 10px rgba(47,105,142,.08) }
.slide-art i:nth-child(8){visibility:hidden}
.target-art,.orbit-art { display:grid;place-items:center }
.target-art > i { position:relative;width:145px;height:145px;border:2px dashed rgba(140,67,128,.27);border-radius:50% }
.target-art b,.target-art em { position:absolute;border-radius:50%;left:50%;top:50%;transform:translate(-50%,-50%) }
.target-art b{width:62px;height:62px;background:rgba(255,255,255,.62)}.target-art em{width:23px;height:23px;background:#b44d8b;box-shadow:0 0 0 8px rgba(180,77,139,.15)}
.math-art { display:flex;align-items:center;justify-content:center;gap:9px;color:#9a5c26 }
.math-art i,.math-art em { width:45px;height:52px;display:grid;place-items:center;border-radius:13px;background:rgba(255,255,255,.62);font:600 20px "Manrope";font-style:normal;box-shadow:0 4px 10px rgba(140,83,30,.08) }
.math-art b { font-size:20px }
.orbit-art > i { position:relative;width:142px;height:142px;border:3px solid rgba(255,255,255,.55);border-radius:50% }
.orbit-art b { position:absolute;left:50%;top:-7px;width:14px;height:14px;border-radius:50%;background:#197f8c;box-shadow:0 0 0 7px rgba(25,127,140,.15) }
.orbit-art em { position:absolute;right:-5px;top:42px;width:20px;height:55px;border-right:7px solid #fff59a;border-radius:50% }
.release-art { display:grid;place-items:center }
.release-art i { width:150px;height:72px;border-radius:18px;background:rgba(255,255,255,.58);box-shadow:0 7px 18px rgba(101,61,58,.08) }
.release-art b { position:absolute;color:#a97069;font-size:22px;letter-spacing:8px;transform:translateX(-13px) }
.release-art em { position:absolute;right:23%;bottom:33%;width:34px;height:34px;display:grid;place-items:center;border-radius:50%;background:#a76665;color:#fff;font-style:normal;box-shadow:0 6px 14px rgba(107,58,58,.15) }
.stroop-art { display:flex;flex-direction:column;align-items:center;justify-content:center;gap:5px;font:600 24px "Manrope" }
.stroop-art i,.stroop-art b,.stroop-art em{font-style:normal}.stroop-art i{color:#d76061}.stroop-art b{color:#4c80bd}.stroop-art em{color:#509b78}
.stack-art { display:flex;flex-direction:column-reverse;align-items:center;justify-content:center }
.stack-art i{display:block;height:22px;border-radius:5px;background:rgba(255,255,255,.6);box-shadow:0 3px 8px rgba(104,66,42,.07)}.stack-art i:nth-child(1){width:145px}.stack-art i:nth-child(2){width:125px;background:#c77e62}.stack-art i:nth-child(3){width:102px}.stack-art i:nth-child(4){width:77px;background:#9f6e72}.stack-art i:nth-child(5){width:52px}
.code-art { display:grid;grid-template-columns:repeat(3,45px);place-content:center;gap:8px }
.code-art i{height:45px;display:grid;place-items:center;border-radius:50%;background:rgba(255,255,255,.58);color:#657880;font-style:normal}.code-art b{grid-column:1/-1;text-align:center;color:#65747b;font-size:13px}
.timesense-art{display:grid;place-items:center}.timesense-art i{position:relative;width:130px;height:130px;border:4px solid rgba(255,255,255,.65);border-radius:50%}.timesense-art b{position:absolute;left:50%;top:8px;width:3px;height:54px;background:#62865c;transform-origin:bottom;transform:rotate(32deg)}.timesense-art em{position:absolute;color:#597755;font:600 25px "Manrope";font-style:normal}

.pause-note {
  padding: 84px 24px 96px;
  text-align: center;
  color: #817b8b;
  line-height: 1.8;
}
.pause-icon { display:block;margin-bottom:17px;color:#aaa0c1;font-size:27px; }
footer {
  width: min(1180px, calc(100% - 48px));
  margin: 0 auto;
  padding: 24px 0 34px;
  display: flex;
  justify-content: space-between;
  border-top: 1px solid var(--line);
  color: #918c99;
  font-size: 12px;
}

.game-modal {
  position: fixed;
  z-index: 20;
  inset: 0;
  display: grid;
  place-items: center;
  padding: 20px;
  visibility: hidden;
  opacity: 0;
  transition: opacity .25s, visibility .25s;
}
.game-modal.open { visibility: visible; opacity: 1; }
.modal-backdrop { position:absolute;inset:0;background:rgba(49,45,58,.3);backdrop-filter:blur(8px); }
.modal-panel {
  position: relative;
  width: min(620px, 100%);
  max-height: calc(100vh - 40px);
  overflow: auto;
  padding: 28px;
  background: linear-gradient(160deg, #fffaff, #f8f7ff);
  border: 1px solid rgba(255,255,255,.75);
  border-radius: 28px;
  box-shadow: 0 30px 90px rgba(44,36,65,.2);
  transform: translateY(12px) scale(.98);
  transition: transform .25s;
}
.game-modal.open .modal-panel { transform: none; }
.modal-header { display:flex;align-items:start;justify-content:space-between;gap:20px;margin-bottom:20px }
.modal-header h2 { margin:0;font:500 27px "Manrope";letter-spacing:-.035em }
.close-button { width:38px;height:38px;border:1px solid var(--line);border-radius:50%;background:#fff;cursor:pointer;font-size:24px;line-height:1 }
.game-stage {
  position:relative;
  height:390px;
  overflow:hidden;
  border-radius:22px;
  background:#eeeaf8;
  touch-action:none;
  user-select:none;
}
.game-instruction { margin:17px 0 12px;text-align:center;color:var(--muted);font-size:13px;min-height:20px }
.reset-button { display:block;margin:0 auto;padding:10px 16px;border:1px solid var(--line);border-radius:11px;background:white;cursor:pointer;font-size:13px }

/* Game elements */
.pop-bubble { position:absolute;border:0;border-radius:50%;background:radial-gradient(circle at 30% 25%,#fff,rgba(180,164,239,.72) 55%,rgba(237,157,201,.45));box-shadow:inset -7px -7px 14px rgba(100,84,150,.13),0 6px 15px rgba(70,55,110,.08);cursor:pointer;animation:bubbleIn .35s both }
.pop-bubble.popped { animation:pop .23s forwards;pointer-events:none }
@keyframes bubbleIn{from{transform:scale(0)}to{transform:scale(1)}} @keyframes pop{to{transform:scale(1.4);opacity:0}}
.breath-stage { display:grid;place-items:center;background:linear-gradient(145deg,#ffe9dc,#f6d5d4) }
.breath-orb { display:grid;place-items:center;width:145px;height:145px;border-radius:50%;background:linear-gradient(145deg,rgba(255,255,255,.8),rgba(249,183,170,.62));color:#96605d;font-weight:600;box-shadow:0 0 0 25px rgba(255,255,255,.2),0 0 0 50px rgba(255,211,214,.18);animation:breathe 12s ease-in-out infinite }
@keyframes breathe{0%,100%{transform:scale(.72)}33%,55%{transform:scale(1.25)}}
.garden-stage { background:linear-gradient(145deg,#e5f5eb,#d5eadf);cursor:crosshair }
.garden-stage canvas,.ripple-stage canvas { width:100%;height:100%;display:block }
.switch-stage { display:grid;grid-template-columns:repeat(4,60px);place-content:center;gap:24px;background:linear-gradient(145deg,#fff3c7,#f1dda8) }
.tiny-switch{width:60px;height:36px;padding:0;border:0;border-radius:25px;background:rgba(255,255,255,.65);box-shadow:inset 0 2px 6px rgba(70,60,30,.08);cursor:pointer}
.tiny-switch::after{content:"";display:block;width:28px;height:28px;margin-left:4px;border-radius:50%;background:#e4b94d;box-shadow:0 3px 8px rgba(75,65,27,.13);transition:.18s}
.tiny-switch.on::after{margin-left:28px;background:#e48a57}
.memory-stage { padding:24px;display:grid;grid-template-columns:repeat(4,1fr);gap:10px;background:linear-gradient(145deg,#ffe7ee,#eed3e3) }
.memory-card { min-width:0;border:0;border-radius:14px;background:linear-gradient(145deg,#d9aebb,#bd91ae);color:transparent;cursor:pointer;font-size:25px;transform-style:preserve-3d;transition:.25s }
.memory-card.flipped,.memory-card.matched { background:rgba(255,255,255,.7);color:#9a7180;transform:rotateY(180deg) }
.memory-card.matched{opacity:.55}
.ripple-stage{background:linear-gradient(160deg,#dff3ff,#c8e1ef 55%,#d9d5f2);cursor:pointer}
.ripple { position:absolute;border:2px solid rgba(93,143,166,.55);border-radius:50%;transform:translate(-50%,-50%);animation:ripple 1.6s ease-out forwards;pointer-events:none }
@keyframes ripple{from{width:0;height:0;opacity:.8}to{width:310px;height:155px;opacity:0}}
.sequence-stage { display:grid;grid-template-columns:repeat(2,min(135px,32vw));place-content:center;gap:13px;background:linear-gradient(145deg,#fff0ea,#f2dcf0) }
.sequence-pad { aspect-ratio:1;border:0;border-radius:32px;cursor:pointer;opacity:.72;box-shadow:inset 0 2px 0 rgba(255,255,255,.5),0 8px 20px rgba(73,53,83,.08);transition:transform .12s,opacity .12s,filter .12s }
.sequence-pad:nth-child(1){background:#eb776b}.sequence-pad:nth-child(2){background:#eeb34f}.sequence-pad:nth-child(3){background:#57b19e}.sequence-pad:nth-child(4){background:#8574c2}
.sequence-pad.lit,.sequence-pad:active{opacity:1;filter:brightness(1.2);transform:scale(.94)}
.focus-stage { padding:24px;display:grid;grid-template-columns:repeat(5,1fr);gap:8px;background:linear-gradient(145deg,#ddf4f0,#c8e7e4) }
.focus-number { min-width:0;border:1px solid rgba(255,255,255,.55);border-radius:13px;background:rgba(255,255,255,.64);color:#397b77;font-weight:600;font-size:18px;cursor:pointer;box-shadow:0 4px 12px rgba(48,111,105,.06);transition:.15s }
.focus-number:hover{background:#fff;transform:translateY(-2px)}.focus-number.found{opacity:.12;transform:scale(.7);pointer-events:none}.focus-number.wrong{animation:wrong .25s}
@keyframes wrong{25%{transform:translateX(-5px);background:#ffd2cf}75%{transform:translateX(5px);background:#ffd2cf}}
.timing-stage { display:flex;flex-direction:column;align-items:center;justify-content:center;gap:42px;background:linear-gradient(145deg,#eee8ff,#d9cdef) }
.timing-score { font:500 54px "Manrope";color:#69568d;letter-spacing:-.05em }
.timing-track { position:relative;width:82%;height:30px;border-radius:18px;background:rgba(255,255,255,.62);box-shadow:inset 0 2px 7px rgba(68,50,104,.1) }
.timing-zone { position:absolute;left:43%;top:-7px;width:14%;height:44px;border-radius:11px;background:rgba(118,210,164,.36);border:1px solid rgba(64,161,114,.26) }
.timing-marker { position:absolute;left:0;top:-12px;width:7px;height:54px;border-radius:8px;background:#765ca8;box-shadow:0 5px 14px rgba(74,52,116,.28) }
.timing-stop { padding:13px 30px;border:0;border-radius:14px;background:linear-gradient(135deg,#7864aa,#9a70b1);color:#fff;font-weight:600;cursor:pointer;box-shadow:0 9px 20px rgba(77,55,117,.18) }
.odd-stage { padding:24px;display:grid;place-content:center;background:linear-gradient(145deg,#eff9d6,#d5eca8) }
.odd-grid { display:grid;gap:6px;width:min(330px,75vw);aspect-ratio:1 }
.odd-tile { border:0;border-radius:10px;cursor:pointer;box-shadow:inset 0 2px 0 rgba(255,255,255,.18);transition:.12s }
.odd-tile:hover{transform:scale(.94)}
.lights-stage { padding:28px;display:grid;grid-template-columns:repeat(5,1fr);gap:8px;background:linear-gradient(145deg,#3c355d,#65527b) }
.light-cell { min-width:0;border:0;border-radius:50%;background:#463d61;cursor:pointer;box-shadow:inset 0 2px 6px rgba(12,9,28,.3);transition:.18s }
.light-cell.on { background:#ffd86e;box-shadow:0 0 20px rgba(255,211,94,.72),inset 0 2px 3px rgba(255,255,255,.5) }
.slide-stage { padding:30px;display:grid;grid-template-columns:repeat(3,1fr);gap:9px;background:linear-gradient(145deg,#dcefff,#b8ddf3) }
.slide-tile { min-width:0;border:0;border-radius:16px;background:rgba(255,255,255,.72);color:#397da7;font:600 25px "Manrope";cursor:pointer;box-shadow:0 6px 16px rgba(53,112,148,.1);transition:.16s }
.slide-tile.empty { visibility:hidden }.slide-tile.movable:hover{transform:scale(.95);background:#fff}
.target-stage { background:linear-gradient(145deg,#f8e2f2,#ddb9dc) }
.rush-target { position:absolute;width:62px;height:62px;border:0;border-radius:50%;background:radial-gradient(circle at 35% 30%,#fff,#d65a9e 38%,#a93578);box-shadow:0 0 0 12px rgba(207,66,145,.13),0 10px 24px rgba(92,36,76,.2);cursor:pointer;transition:left .1s,top .1s }
.rush-hud { position:absolute;z-index:2;top:15px;left:18px;padding:8px 12px;border-radius:12px;background:rgba(255,255,255,.72);color:#8d4272;font-weight:600 }
.math-stage { padding:25px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:24px;background:linear-gradient(145deg,#ffe7bd,#f4bd7e) }
.math-question { font:600 46px "Manrope";color:#7d4b28;letter-spacing:-.04em }
.math-answers { width:min(350px,100%);display:grid;grid-template-columns:repeat(2,1fr);gap:10px }
.math-answer { padding:17px;border:1px solid rgba(255,255,255,.6);border-radius:14px;background:rgba(255,255,255,.6);color:#794a2a;font-weight:600;font-size:18px;cursor:pointer }
.math-answer:hover{background:#fff}.math-answer.wrong{background:#ffc7bc}
.math-timer { width:min(350px,100%);height:7px;border-radius:8px;background:rgba(255,255,255,.42);overflow:hidden }
.math-timer i { display:block;width:100%;height:100%;background:#d97048;transform-origin:left }
.orbit-stage { display:grid;place-items:center;background:linear-gradient(145deg,#d6f2f3,#9cd7da) }
.orbit-ring { position:relative;width:245px;height:245px;border:4px solid rgba(255,255,255,.64);border-radius:50%;box-shadow:inset 0 0 35px rgba(47,139,145,.08) }
.orbit-zone { position:absolute;inset:-8px;border-radius:50%;border-top:12px solid #fff78f;transform:rotate(35deg);clip-path:polygon(40% 0,72% 0,64% 20%,44% 20%) }
.orbit-dot { position:absolute;left:50%;top:50%;width:20px;height:20px;margin:-10px;border-radius:50%;background:#167f8a;box-shadow:0 0 0 7px rgba(22,127,138,.15);transform:rotate(0deg) translateY(-122px) }
.orbit-button { position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:92px;height:92px;border:0;border-radius:50%;background:rgba(255,255,255,.72);color:#247a81;font-weight:600;cursor:pointer;box-shadow:0 8px 22px rgba(44,120,126,.13) }
.release-stage { display:flex;flex-direction:column;align-items:center;justify-content:center;gap:15px;padding:35px;background:linear-gradient(145deg,#f6e6e2,#dfbbb5) }
.release-input { width:min(410px,100%);min-height:115px;padding:18px;resize:none;border:1px solid rgba(255,255,255,.72);border-radius:17px;outline:0;background:rgba(255,255,255,.62);color:#6e5554;line-height:1.6;box-shadow:inset 0 2px 8px rgba(89,53,52,.05) }
.release-input:focus{border-color:rgba(150,91,91,.35);background:rgba(255,255,255,.78)}
.release-button { padding:12px 21px;border:0;border-radius:13px;background:#9d6867;color:#fff;cursor:pointer;box-shadow:0 8px 18px rgba(104,59,59,.17) }
.release-particle { position:absolute;left:50%;top:49%;color:#8f6563;font-size:13px;pointer-events:none;animation:releaseAway 1.5s ease-out forwards }
@keyframes releaseAway{to{transform:translate(var(--x),var(--y)) rotate(var(--r));opacity:0;filter:blur(4px)}}
.stroop-stage { display:flex;flex-direction:column;align-items:center;justify-content:center;gap:30px;background:linear-gradient(145deg,#e7e9f7,#bdc5e4) }
.stroop-word { font:700 52px "Manrope";letter-spacing:.03em }
.stroop-options { display:grid;grid-template-columns:repeat(2,130px);gap:9px }
.stroop-option { padding:14px;border:1px solid rgba(255,255,255,.65);border-radius:13px;background:rgba(255,255,255,.62);cursor:pointer;font-weight:600 }
.stroop-option:hover{background:#fff}
.stack-stage { background:linear-gradient(180deg,#f1ded0,#dcb79b);overflow:hidden }
.stack-ground { position:absolute;left:12%;bottom:25px;width:76%;height:8px;border-radius:8px;background:#936f5d }
.stack-block { position:absolute;height:27px;border-radius:5px;background:linear-gradient(135deg,#fff2e8,#bc7c65);box-shadow:0 4px 9px rgba(89,55,40,.13) }
.code-stage { padding:24px;display:flex;flex-direction:column;align-items:center;gap:14px;background:linear-gradient(145deg,#e6ecee,#bcc8cd) }
.code-history { width:min(350px,100%);height:190px;overflow:auto;display:flex;flex-direction:column;gap:6px }
.code-row { display:flex;align-items:center;justify-content:space-between;padding:8px 12px;border-radius:10px;background:rgba(255,255,255,.52);color:#53676f;font-size:13px }
.code-current { display:flex;gap:8px;min-height:42px }.code-current i{width:42px;height:42px;display:grid;place-items:center;border-radius:50%;background:rgba(255,255,255,.7);color:#526a73;font-style:normal;font-weight:600}
.code-keys { display:grid;grid-template-columns:repeat(6,43px);gap:7px }.code-key{height:43px;border:0;border-radius:11px;background:rgba(255,255,255,.65);color:#526a73;cursor:pointer;font-weight:600}.code-key:hover{background:#fff}.code-key.submit{grid-column:1/-1;width:auto;background:#71868e;color:#fff}
.timesense-stage { display:grid;place-items:center;background:linear-gradient(145deg,#e6f0e2,#b8ceb1) }
.sense-button { position:relative;width:190px;height:190px;border:1px solid rgba(255,255,255,.72);border-radius:50%;background:rgba(255,255,255,.48);color:#54714f;font-weight:600;font-size:16px;cursor:pointer;box-shadow:0 15px 35px rgba(67,103,61,.12),inset 0 1px 0 #fff }
.sense-button::after{content:"";position:absolute;inset:-17px;border:1px solid rgba(83,127,75,.16);border-radius:50%}.sense-result{position:absolute;bottom:42px;color:#587153;font:500 18px "Manrope"}

[dir="rtl"] .section-heading > p { text-align:left; }
[dir="rtl"] .game-card { text-align:right; }
[dir="rtl"] .card-arrow { left:20px;right:auto; }

@media (max-width: 820px) {
  .game-grid { grid-template-columns: repeat(2, 1fr); }
  .hero { min-height:760px;padding:55px 44px 38px;grid-template-columns:1fr;gap:12px;text-align:center }
  .hero-copy { display:flex;flex-direction:column;align-items:center }
  .hero-playground { width:min(420px,100%);margin:0 auto }
  .hero-actions { justify-content:center }
  .hero::before { mask-image:linear-gradient(#000,transparent 72%) }
  .section-heading { align-items:start;flex-direction:column;gap:12px }
  .section-heading > p { text-align:left }
}
@media (max-width: 560px) {
  .site-header,.games-section,footer { width:calc(100% - 30px) }
  .site-header { height:74px }
  .language-picker select { max-width:125px }
  .hero { width:calc(100% - 24px);min-height:720px;margin-top:6px;padding:46px 20px 24px;border-radius:28px;gap:0 }
  .hero h1 { margin:20px 0 16px;font-size:43px;line-height:1.08 }
  .hero p { max-width:420px;font-size:14px;line-height:1.65 }
  .hero-actions { margin-top:26px;gap:12px }
  .start-button { gap:17px;padding:13px 15px 13px 18px;font-size:14px }
  .game-count { gap:6px;font-size:10px }.game-count b{width:37px;height:37px}
  .live-stats { width:min(330px,100%);justify-content:center;margin-top:29px;gap:14px;padding:13px 12px }
  .live-stats > i { height:31px }.live-stat{gap:8px}.stat-icon{width:31px;height:31px}.live-stat b{font-size:14px}.live-stat small{font-size:9px}
  .hero-playground { width:min(310px,100%);margin-top:12px }
  .calm-core { width:132px;height:132px }.core-face{font-size:24px}.calm-core small{max-width:95px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .preview-chip { padding:8px 10px;border-radius:14px;gap:7px }.preview-chip>span{width:28px;height:28px}.preview-chip b{font-size:9px}
  .preview-bubble{left:-2%;top:12%}.preview-ripple{right:-4%;top:24%}.preview-memory{left:4%;bottom:9%}
  .games-section { padding:58px 0 65px }
  .collection-toolbar { align-items:stretch;padding:6px;flex-direction:column }
  .filter-tabs { display:grid;grid-template-columns:repeat(4,1fr) }
  .filter-tab { justify-content:center;padding:10px 7px }
  .filter-tab b { display:none }
  .surprise-button { justify-content:center }
  .game-grid { grid-template-columns:1fr;gap:13px }
  .game-card { min-height:210px;display:grid;grid-template-columns:42% 1fr;align-items:center;padding:18px }
  .card-art { height:170px;transform:scale(.75) }
  .card-copy { align-self:center }
  .card-arrow { bottom:17px;right:17px }
  .modal-panel { padding:20px;border-radius:23px }
  .game-stage { height:min(370px,55vh) }
  .switch-stage { grid-template-columns:repeat(3,55px);gap:18px }
  .tiny-switch { width:55px }
  .tiny-switch.on::after { margin-left:23px }
  .memory-stage { padding:12px;gap:7px }
  .focus-stage { padding:12px;grid-template-columns:repeat(5,1fr);gap:5px }
  .focus-number { border-radius:9px;font-size:15px }
  .lights-stage,.slide-stage { padding:16px;gap:6px }
  .odd-stage { padding:14px }
  .code-stage { padding:14px }.code-keys{grid-template-columns:repeat(3,48px)}.code-key.submit{grid-column:1/-1}
  .stroop-options { grid-template-columns:repeat(2,minmax(100px,125px)) }
  .difficulty-badge { top:14px;right:14px }
  footer { gap:20px;flex-direction:column }
}
@media (max-width: 390px) {
  .brand > span:last-child { display:none }
  .hero h1 { font-size:39px }
  .game-count > span { display:none }
}

@media (prefers-reduced-motion: reduce) {
  *,*::before,*::after { scroll-behavior:auto!important;animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important }
}