@font-face {
  font-family: "Nunito";
  font-style: normal;
  font-weight: 600 900;
  font-display: swap;
  src: url("/assets/fonts/nunito-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Nunito";
  font-style: normal;
  font-weight: 600 900;
  font-display: swap;
  src: url("/assets/fonts/nunito-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* Tokens mirror ios/KelimeOyunu/UI/Theme.swift and LevelTint.honey. */
:root {
  --sky-top: #b4c4ee;
  --sky-mid: #d3cbec;
  --sky-peach: #f3d5c9;
  --sky-haze: #fbd8b4;
  --sky-glow: #ffe7c6;
  --surface: #fff6dc;
  --surface-raised: #fffdf2;
  --surface-sunk: #f7e9ca;
  --surface-border: #e8c88a;
  --text: #4a2f1b;
  --text-2: #654a2f;
  --amber-text: #8a5512;
  --honey: #f2b033;
  --honey-light: #ffd37a;
  --honey-deep: #d18a1e;
  --leaf: #3e9159;
  --leaf-soft: #8fd0a5;
  --leaf-deep: #2f7d4c;
  --coral: #e2664f;
  --sea: #31719a;
  --shadow-warm: 138 98 56;
  --honey-edge: #dd9a2b;
  --honey-gradient: linear-gradient(180deg, var(--honey-light), var(--honey) 55%, var(--honey-deep));
  --leaf-gradient: linear-gradient(180deg, var(--leaf-soft), var(--leaf) 55%, var(--leaf-deep));
  --radius-s: 10px;
  --radius-m: 18px;
  --radius-l: 28px;
  --font: ui-rounded, "SF Pro Rounded", "Nunito", system-ui, -apple-system, "Segoe UI", sans-serif;
  color-scheme: light;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}

html.lang-pending body {
  visibility: hidden;
}

body {
  margin: 0;
  min-height: 100vh;
  font-family: var(--font);
  font-weight: 600;
  color: var(--text);
  line-height: 1.5;
  background: linear-gradient(180deg, var(--sky-top) 0, var(--sky-mid) 520px, var(--sky-peach) 1100px, var(--sky-haze) 1900px, var(--sky-glow) 2800px);
  background-color: var(--sky-glow);
  overflow-x: hidden;
}

img,
svg {
  display: block;
  max-width: 100%;
}

a {
  color: var(--amber-text);
}

h1,
h2,
h3 {
  margin: 0;
  line-height: 1.15;
  font-weight: 900;
}

p {
  margin: 0;
}

button {
  font: inherit;
  color: inherit;
}

:focus-visible {
  outline: 3px solid var(--sea);
  outline-offset: 3px;
}

.skip-link {
  position: absolute;
  left: 16px;
  top: -60px;
  z-index: 50;
  padding: 10px 16px;
  border-radius: var(--radius-s);
  background: var(--surface-raised);
  font-weight: 800;
}

.skip-link:focus {
  top: 16px;
}

/* Letter tiles: the wordmark and headings reuse the found-tile look of the grid. */
.tile {
  display: inline-grid;
  place-items: center;
  width: 1.55em;
  height: 1.55em;
  border-radius: 0.34em;
  background: var(--honey-gradient);
  border: 1.5px solid var(--honey-edge);
  background-clip: padding-box;
  box-shadow: 0 3px 4px rgb(var(--shadow-warm) / 0.3);
  color: var(--text);
  font-weight: 900;
  line-height: 1;
}

.tile-sm {
  font-size: 0.72em;
}

.tile-heading {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.35em 0.7em;
  font-size: clamp(1.25rem, 3.2vw, 1.75rem);
}

.tile-word {
  display: inline-flex;
  gap: 0.18em;
}

.tile-heading .tile-sm {
  font-size: 1em;
}

.tile-heading .tile:nth-child(odd) {
  transform: rotate(-2deg);
}

.tile-heading .tile:nth-child(3n) {
  transform: rotate(2.5deg);
}

.card {
  background: var(--surface);
  border: 1.5px solid rgb(232 200 138 / 0.75);
  border-radius: var(--radius-m);
  box-shadow: 0 5px 10px rgb(var(--shadow-warm) / 0.12);
}

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 52px;
  padding: 0 28px;
  border-radius: 999px;
  border: 0;
  font-weight: 900;
  font-size: 1.05rem;
  text-decoration: none;
  cursor: pointer;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.btn:active {
  transform: scale(0.97);
}

.btn svg {
  width: 20px;
  height: 20px;
}

.btn-honey {
  background: var(--honey-gradient);
  color: var(--text);
  border: 1.5px solid var(--honey-edge);
  background-clip: padding-box;
  box-shadow: 0 6px 12px rgb(var(--shadow-warm) / 0.3);
}

.btn-honey:hover {
  box-shadow: 0 8px 16px rgb(var(--shadow-warm) / 0.38);
}

.btn-ghost {
  background: var(--surface-raised);
  color: var(--text);
  border: 1.5px solid var(--surface-border);
}

.btn-small {
  min-height: 40px;
  padding: 0 18px;
  font-size: 0.95rem;
}

.store-badge {
  display: inline-block;
  border-radius: 12px;
  transition: transform 0.15s ease;
}

.store-badge:hover {
  transform: translateY(-2px);
}

.store-badge img {
  height: 54px;
  width: auto;
}

/* Header */
.site-header {
  position: relative;
  z-index: 5;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  max-width: 1160px;
  margin: 0 auto;
  padding: max(16px, env(safe-area-inset-top)) 20px 8px;
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: var(--text);
  text-decoration: none;
  font-weight: 900;
  font-size: 1.15rem;
}

.brand img {
  flex: none;
  border-radius: 11px;
  box-shadow: 0 3px 8px rgb(var(--shadow-warm) / 0.25);
}

.header-actions {
  display: flex;
  align-items: center;
  gap: 10px;
}

.lang-picker {
  display: inline-flex;
  padding: 3px;
  border-radius: 999px;
  background: rgb(255 253 242 / 0.7);
  border: 1.5px solid rgb(232 200 138 / 0.75);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

.lang-option {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  border-radius: 999px;
  color: var(--text-2);
  text-decoration: none;
  font-weight: 800;
  font-size: 0.9rem;
  white-space: nowrap;
}

.lang-code {
  display: none;
}

.lang-option.is-active {
  background: var(--honey-gradient);
  color: var(--text);
  box-shadow: 0 2px 5px rgb(var(--shadow-warm) / 0.25);
}

/* Floating letters, as on the home screen of the app. */
.floating-letters {
  position: absolute;
  inset: 0 0 auto;
  height: 900px;
  overflow: hidden;
  pointer-events: none;
}

.float-letter {
  position: absolute;
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  border-radius: 12px;
  background: rgb(255 253 242 / 0.45);
  border: 1.5px solid rgb(255 255 255 / 0.55);
  color: rgb(101 74 47 / 0.35);
  font-weight: 900;
  font-size: 1.4rem;
  animation: drift 14s ease-in-out infinite;
}

.f0 { left: 1.5%; top: 150px; animation-delay: -2s; }
.f1 { left: 47%; top: 130px; animation-delay: -6s; }
.f2 { left: 2%; top: 620px; animation-delay: -9s; }
.f3 { right: 1.5%; top: 190px; animation-delay: -4s; }
.f4 { left: 50%; top: 820px; animation-delay: -1s; }
.f5 { right: 2%; top: 700px; animation-delay: -11s; }
.f6 { left: 1%; top: 400px; animation-delay: -7s; }
.f7 { right: 1%; top: 450px; animation-delay: -12s; }

@media (max-width: 1240px) {
  .f2, .f3, .f4, .f5, .f6, .f7 {
    display: none;
  }
}

@keyframes drift {
  0%, 100% { translate: 0 0; rotate: -6deg; }
  50% { translate: 0 -22px; rotate: 6deg; }
}

main {
  position: relative;
  z-index: 1;
}

/* Hero */
.hero {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 420px);
  align-items: center;
  gap: 48px;
  max-width: 1160px;
  margin: 0 auto;
  padding: 32px 20px 72px;
}

.wordmark {
  display: flex;
  flex-direction: column;
  gap: 10px;
  font-size: clamp(2rem, 5vw, 3.1rem);
}

.wordmark-row {
  display: flex;
  gap: 0.14em;
}

.wordmark-row:nth-child(2) {
  padding-left: 0.8em;
}

.wordmark .tile {
  animation: tile-in 0.55s cubic-bezier(0.34, 1.56, 0.64, 1) both;
}

.wordmark-row .tile:nth-child(1) { animation-delay: 0.05s; }
.wordmark-row .tile:nth-child(2) { animation-delay: 0.1s; }
.wordmark-row .tile:nth-child(3) { animation-delay: 0.15s; }
.wordmark-row .tile:nth-child(4) { animation-delay: 0.2s; }
.wordmark-row .tile:nth-child(5) { animation-delay: 0.25s; }
.wordmark-row .tile:nth-child(6) { animation-delay: 0.3s; }
.wordmark-row:nth-child(2) .tile { animation-delay: calc(var(--i, 0) * 0.05s + 0.35s); }

@keyframes tile-in {
  from { opacity: 0; transform: scale(0.4) rotate(-12deg); }
  to { opacity: 1; transform: none; }
}


.lead {
  margin-top: 24px;
  max-width: 34em;
  font-size: 1.1rem;
  color: var(--text-2);
}

.try {
  margin-top: 16px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 14px;
  border-radius: 999px;
  background: rgb(255 253 242 / 0.9);
  font-weight: 800;
  font-size: 0.95rem;
}

.try::before {
  content: "👉";
}

.badge-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px;
  margin-top: 26px;
}

.platforms {
  color: var(--text-2);
  font-weight: 800;
  font-size: 0.95rem;
}

/* The mini game */
.game-wrap {
  width: 100%;
  max-width: 420px;
  justify-self: center;
}

.game {
  --tint-light: var(--honey-light);
  --tint: var(--honey);
  --tint-deep: var(--honey-deep);
  --tint-gradient: var(--honey-gradient);
  --tint-edge: var(--honey-edge);
  position: relative;
  display: flex;
  flex-direction: column;
  aspect-ratio: 9 / 17;
  max-height: min(820px, calc(100svh - 40px));
  min-height: 560px;
  margin: 0 auto;
  border-radius: 44px;
  overflow: hidden;
  isolation: isolate;
  border: 6px solid var(--surface-raised);
  box-shadow: 0 30px 60px rgb(var(--shadow-warm) / 0.35), 0 0 0 1.5px var(--surface-border);
  user-select: none;
  -webkit-user-select: none;
  -webkit-touch-callout: none;
  container: game / size;
}

.game:focus {
  outline: none;
}

.game-bg {
  position: absolute;
  inset: 0;
  z-index: -1;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.game-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 18px 18px 0;
}

.gem-pill,
.music-pill {
  display: inline-flex;
  white-space: nowrap;
  height: 36px;
  align-items: center;
  gap: 6px;
  padding: 5px 12px 5px 8px;
  border-radius: 999px;
  background: rgb(255 253 242 / 0.82);
  border: 1.5px solid rgb(255 255 255 / 0.7);
  font-weight: 900;
  font-size: 0.95rem;
  box-shadow: 0 3px 6px rgb(var(--shadow-warm) / 0.18);
}

.music-pill {
  justify-content: center;
  width: 36px;
  padding: 0;
  border-radius: 50%;
  color: var(--text);
  cursor: pointer;
}

.music-pill[hidden] {
  display: none;
}

.music-pill svg {
  width: 20px;
  height: 20px;
}

.music-pill .sound-off,
.music-pill.is-muted .sound-waves {
  display: none;
}

.music-pill.is-muted .sound-off {
  display: inline;
}

.music-pill.is-muted {
  color: var(--text-2);
}

.gem-pill.bump {
  animation: bump 0.45s ease;
}

@keyframes bump {
  40% { transform: scale(1.18); }
}

.grid-area {
  flex: 1 1 auto;
  display: grid;
  place-items: center;
  min-height: 0;
  padding: 12px 18px;
}

.grid {
  --cell: 52px;
  display: grid;
  gap: calc(var(--cell) * 0.1);
}

.cell {
  display: grid;
  place-items: center;
  width: var(--cell);
  height: var(--cell);
  border-radius: calc(var(--cell) * 0.22);
  background: rgb(255 253 242 / 0.92);
  border: 1.5px solid rgb(232 200 138 / 0.7);
  box-shadow: 0 3px 4px rgb(var(--shadow-warm) / 0.3);
  font-size: calc(var(--cell) * 0.54);
  font-weight: 900;
  color: transparent;
  transition: background 0.3s ease, color 0.3s ease;
  animation: tile-in 0.45s cubic-bezier(0.34, 1.56, 0.64, 1) both;
  animation-delay: calc(var(--d, 0) * 35ms);
}

.cell.is-hinted {
  color: rgb(101 74 47 / 0.65);
}

.cell.is-found {
  background: var(--tint-gradient);
  border-color: var(--tint-edge);
  background-clip: padding-box;
  color: var(--text);
}

.cell.flip {
  animation: flip 0.5s ease both;
  animation-delay: calc(var(--k, 0) * 60ms);
}

.cell.glow {
  animation: glow 0.6s ease both;
  animation-delay: calc(var(--k, 0) * 60ms);
}

@keyframes flip {
  0% { transform: scale(1) rotateX(0); }
  45% { transform: scale(1.12) rotateX(90deg); }
  100% { transform: scale(1) rotateX(0); }
}

@keyframes glow {
  40% { transform: scale(1.14); box-shadow: 0 0 0 3px var(--tint-light), 0 3px 4px rgb(var(--shadow-warm) / 0.3); }
}

.game-mid {
  display: grid;
  grid-template-columns: 56px 1fr 56px;
  align-items: center;
  gap: 8px;
  padding: 0 14px;
}

.round-btn {
  position: relative;
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  margin: 0 auto 24px;
  border-radius: 50%;
  background: rgb(255 253 242 / 0.88);
  border: 1.5px solid rgb(232 200 138 / 0.8);
  box-shadow: 0 3px 6px rgb(var(--shadow-warm) / 0.22);
  color: var(--text);
}

button.round-btn {
  cursor: pointer;
}

.round-btn svg {
  width: 24px;
  height: 24px;
}

.round-btn-caption {
  position: absolute;
  top: calc(100% + 4px);
  display: inline-flex;
  align-items: center;
  gap: 2px;
  padding: 1px 6px;
  border-radius: 999px;
  background: var(--surface-raised);
  font-size: 0.66rem;
  font-weight: 900;
  white-space: nowrap;
  box-shadow: 0 1px 3px rgb(var(--shadow-warm) / 0.2);
}

.bonus-jar .round-btn-caption {
  gap: 0;
}

.bonus-jar.bump {
  animation: bump 0.45s ease;
}

.preview {
  display: flex;
  justify-content: center;
  gap: 4px;
  min-height: 38px;
}

.preview span {
  display: grid;
  place-items: center;
  width: 32px;
  height: 36px;
  border-radius: 9px;
  background: var(--tint-gradient);
  border: 1.5px solid var(--tint-edge);
  background-clip: padding-box;
  box-shadow: 0 2px 4px rgb(var(--shadow-warm) / 0.3);
  font-weight: 900;
  font-size: 1.2rem;
  animation: tile-in 0.25s ease both;
}

.preview.is-wrong {
  animation: shake 0.4s ease;
}

.preview.is-found span,
.preview.is-bonus span {
  animation: pop-out 0.5s ease both;
}

@keyframes pop-out {
  30% { transform: scale(1.15); }
  100% { transform: translateY(-24px) scale(0.8); opacity: 0; }
}

@keyframes shake {
  20%, 60% { transform: translateX(-8px); }
  40%, 80% { transform: translateX(8px); }
}

.swipe-hint {
  justify-self: center;
  margin: 0 auto 8px;
  padding: 4px 14px;
  border-radius: 999px;
  background: rgb(255 253 242 / 0.85);
  font-size: 0.8rem;
  font-weight: 800;
  text-align: center;
  transition: opacity 0.3s ease;
}

.game.has-played .swipe-hint {
  opacity: 0;
}

.wheel {
  position: relative;
  width: min(78%, 300px);
  aspect-ratio: 1;
  margin: 0 auto 26px;
  touch-action: none;
}

.wheel-disk {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: rgb(255 253 242 / 0.62);
  border: 1.5px solid var(--surface-border);
  box-shadow: 0 8px 16px rgb(var(--shadow-warm) / 0.26), inset 0 0 0 4px rgb(255 246 220 / 0.5);
  backdrop-filter: blur(14px) saturate(1.2);
  -webkit-backdrop-filter: blur(14px) saturate(1.2);
  cursor: pointer;
}

.wheel-trail {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
  pointer-events: none;
}

.wheel-trail polyline {
  fill: none;
  stroke: var(--tint);
  stroke-width: 3.4;
  stroke-linecap: round;
  stroke-linejoin: round;
  opacity: 0.9;
}

.wheel-letters {
  position: absolute;
  inset: 0;
  transition: transform 0.2s ease-in, scale 0.2s ease-in;
}

.wheel.is-shuffling .wheel-letters {
  transform: rotate(180deg);
  scale: 0.16;
}

.letter {
  position: absolute;
  display: grid;
  place-items: center;
  width: 30%;
  height: 30%;
  translate: -50% -50%;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: var(--text);
  font-size: clamp(1.8rem, 9vw, 2.6rem);
  font-weight: 900;
  cursor: pointer;
  pointer-events: none;
  transition: background 0.12s ease, transform 0.12s ease;
}

.letter.is-selected {
  background: var(--tint-gradient);
  border: 1.5px solid var(--tint-edge);
  background-clip: padding-box;
  box-shadow: 0 4px 8px rgb(var(--shadow-warm) / 0.35);
  transform: scale(1.06);
}

.wheel-shuffle {
  position: absolute;
  left: 50%;
  top: 50%;
  display: grid;
  place-items: center;
  width: 19%;
  height: 19%;
  translate: -50% -50%;
  border-radius: 50%;
  border: 1.5px solid var(--tint-edge);
  background-clip: padding-box;
  background: var(--tint-gradient);
  color: var(--text);
  box-shadow: 0 4px 6px rgb(var(--shadow-warm) / 0.35);
  cursor: pointer;
}

.wheel-shuffle svg {
  width: 55%;
  height: 55%;
}

.tutorial-hand {
  position: absolute;
  width: 20%;
  height: 20%;
  margin: -2% 0 0 -6%;
  opacity: 0;
  pointer-events: none;
  filter: drop-shadow(0 3px 4px rgb(0 0 0 / 0.25));
}

.tutorial-hand svg {
  width: 100%;
  height: 100%;
}


.toast {
  position: absolute;
  left: 50%;
  top: 46%;
  z-index: 3;
  padding: 8px 18px;
  border-radius: 999px;
  background: var(--surface-raised);
  border: 1.5px solid var(--surface-border);
  box-shadow: 0 6px 14px rgb(var(--shadow-warm) / 0.3);
  font-weight: 900;
  white-space: nowrap;
  translate: -50% 0;
  opacity: 0;
  pointer-events: none;
}

.toast.is-visible {
  animation: toast 1.4s ease both;
}

@keyframes toast {
  0% { opacity: 0; transform: translateY(10px) scale(0.9); }
  15%, 75% { opacity: 1; transform: none; }
  100% { opacity: 0; transform: translateY(-12px); }
}

.overlay {
  position: absolute;
  inset: 0;
  z-index: 4;
  display: flex;
  align-items: flex-end;
  padding: 18px;
  background: linear-gradient(180deg, rgb(255 231 198 / 0) 20%, rgb(255 231 198 / 0.55) 70%);
}

.overlay[hidden] {
  display: none;
}

.intro-card,
.complete-card {
  width: 100%;
  padding: 22px;
  border-radius: var(--radius-l);
  background: rgb(255 253 242 / 0.94);
  border: 1.5px solid rgb(232 200 138 / 0.9);
  box-shadow: 0 8px 16px rgb(var(--shadow-warm) / 0.22);
  animation: card-up 0.5s cubic-bezier(0.34, 1.3, 0.64, 1) both;
}

@keyframes card-up {
  from { opacity: 0; transform: translateY(40px); }
  to { opacity: 1; transform: none; }
}

.overlay-complete {
  align-items: center;
  background: rgb(255 231 198 / 0.45);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}

.confetti {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

.complete-card {
  position: relative;
  max-height: 100%;
  overflow-y: auto;
  text-align: center;
  outline: none;
}

.complete-check {
  display: grid;
  place-items: center;
  width: 64px;
  height: 64px;
  margin: 0 auto 6px;
  border-radius: 50%;
  background: var(--leaf-gradient);
  border: 3px solid rgb(255 255 255 / 0.8);
  color: #fff;
  box-shadow: 0 6px 12px rgb(47 125 76 / 0.35);
  animation: tile-in 0.6s cubic-bezier(0.34, 1.56, 0.64, 1) 0.15s both;
}

.complete-check svg {
  width: 34px;
  height: 34px;
}

.complete-city {
  display: inline-block;
  padding: 2px 12px;
  border-radius: 999px;
  background: var(--surface-sunk);
  font-size: 0.85rem;
  font-weight: 900;
}

.complete-card h2 {
  margin-top: 4px;
  font-size: 1.8rem;
}

.complete-reward {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin: 4px 0 12px;
  font-size: 1.6rem;
  font-weight: 900;
  color: var(--sea);
}

.fact {
  padding: 12px 14px;
  border-radius: var(--radius-m);
  background: var(--surface);
  border: 1.5px solid rgb(232 200 138 / 0.75);
  text-align: left;
  font-size: 0.9rem;
}

.fact-title {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 4px;
  font-weight: 900;
  color: var(--amber-text);
}

.fact-title svg {
  width: 18px;
  height: 18px;
}

.continue {
  margin: 14px 0 10px;
}

.continue-title {
  font-size: 1.15rem;
  font-weight: 900;
}

.continue-body {
  margin: 4px 0 12px;
  font-size: 0.92rem;
  color: var(--text-2);
}

.complete-card .btn-ghost {
  min-height: 44px;
  font-size: 0.95rem;
}

@container game (max-height: 720px) {
  .overlay-complete {
    padding: 10px;
  }

  .complete-card {
    padding: 14px 14px 12px;
  }

  .complete-check {
    width: 42px;
    height: 42px;
    margin-bottom: 2px;
    border-width: 2px;
  }

  .complete-check svg {
    width: 22px;
    height: 22px;
  }

  .complete-card h2 {
    font-size: 1.35rem;
  }

  .complete-reward {
    margin: 0 0 6px;
    font-size: 1.2rem;
  }

  .complete-reward img {
    width: 22px;
    height: 22px;
  }

  .fact {
    padding: 8px 10px;
    font-size: 0.8rem;
    line-height: 1.35;
  }

  .continue {
    margin: 8px 0 6px;
  }

  .continue-title {
    font-size: 1rem;
  }

  .continue-body {
    margin: 2px 0 8px;
    font-size: 0.8rem;
    line-height: 1.35;
  }

  .complete-card .store-badge img {
    height: 44px;
  }

  .complete-card .btn-ghost {
    min-height: 36px;
    font-size: 0.88rem;
  }
}

@container game (max-height: 600px) {
  .complete-city,
  .fact-title {
    display: none;
  }
}

.keyboard-hint {
  margin-top: 12px;
  text-align: center;
  font-size: 0.82rem;
  color: var(--text-2);
}

@media (hover: none), (pointer: coarse) {
  .keyboard-hint {
    display: none;
  }
}

/* Sections */
.section {
  --section-pad: 20px;
  max-width: 1160px;
  margin: 0 auto;
  padding: 56px var(--section-pad);
}

.steps,
.feature-grid,
.topic-scroller {
  list-style: none;
  margin: 0;
  padding: 0;
}

.steps {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 16px;
  margin-top: 32px;
}

.step {
  padding: 22px 20px;
}

.step-number {
  font-size: 1.3rem;
  margin-bottom: 12px;
}

.step h3,
.feature h3 {
  font-size: 1.2rem;
  margin-bottom: 4px;
}

.step p,
.feature p {
  color: var(--text-2);
}

.feature-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
  margin-top: 32px;
}

.feature {
  padding: 22px 20px;
}

.feature-icon {
  display: grid;
  place-items: center;
  width: 52px;
  height: 52px;
  margin-bottom: 12px;
  border-radius: 16px;
  background: var(--surface-raised);
  border: 1.5px solid rgb(232 200 138 / 0.75);
}

.feature-icon img {
  width: 30px;
  height: 30px;
}

.topics-head {
  max-width: 640px;
  margin: 0 auto;
  text-align: center;
}

.topics-head h2 {
  font-size: clamp(1.8rem, 4vw, 2.5rem);
}

.topics-head p {
  margin-top: 8px;
  color: var(--text-2);
  font-size: 1.05rem;
}

.carousel {
  --per-view: 5;
  --gap: 14px;
  position: relative;
  margin-top: 28px;
}

/* Cards are sized so a whole number fits; snapping keeps every visible card uncut. */
.topic-scroller {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: calc((100% - (var(--per-view) - 1) * var(--gap)) / var(--per-view));
  gap: var(--gap);
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  border-radius: var(--radius-m);
}

.topic-scroller::-webkit-scrollbar {
  display: none;
}

.carousel-btn {
  position: absolute;
  top: 50%;
  z-index: 2;
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  border: 1.5px solid var(--surface-border);
  background: var(--surface-raised);
  color: var(--text);
  box-shadow: 0 4px 10px rgb(var(--shadow-warm) / 0.25);
  translate: 0 -50%;
  cursor: pointer;
  transition: transform 0.15s ease;
}

.carousel-btn[hidden] {
  display: none;
}

.carousel-btn:hover {
  transform: scale(1.06);
}

.carousel-btn svg {
  width: 22px;
  height: 22px;
}

.carousel-prev {
  left: -16px;
}

.carousel-next {
  right: -16px;
}

@media (max-width: 1100px) {
  .carousel {
    --per-view: 4;
  }
}

@media (max-width: 860px) {
  .carousel {
    --per-view: 3;
  }
}

@media (max-width: 600px) {
  .carousel {
    --per-view: 2;
    --gap: 10px;
  }

  .carousel-btn {
    width: 40px;
    height: 40px;
  }

  .carousel-prev {
    left: -8px;
  }

  .carousel-next {
    right: -8px;
  }
}

.topic-card {
  position: relative;
  aspect-ratio: 3 / 4;
  overflow: hidden;
  border-radius: var(--radius-m);
  border: 1.5px solid rgb(232 200 138 / 0.9);
  scroll-snap-align: start;
  background: var(--surface-sunk);
}

.topic-card img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.topic-card-text {
  position: absolute;
  inset: auto 0 0;
  padding: 36px 14px 14px;
  background: linear-gradient(180deg, rgb(255 246 220 / 0), rgb(255 246 220 / 0.92) 42%);
}

.topic-card h3 {
  font-size: 1.2rem;
}

.topic-card p {
  font-size: 0.82rem;
  color: var(--text-2);
  line-height: 1.3;
}

.topic-count {
  display: inline-block;
  margin-top: 6px;
  padding: 1px 8px;
  border-radius: 999px;
  background: var(--honey-gradient);
  font-size: 0.72rem;
  font-weight: 900;
}

.calm {
  max-width: 760px;
  text-align: center;
}

.calm-title {
  font-size: clamp(2rem, 5vw, 3rem);
  font-weight: 900;
  line-height: 1.1;
}

.calm-body {
  margin-top: 12px;
  font-size: 1.2rem;
  color: var(--text-2);
}

.fair-note {
  display: inline-flex;
  align-items: flex-start;
  gap: 10px;
  margin-top: 28px;
  padding: 14px 18px;
  border-radius: var(--radius-m);
  background: rgb(255 253 242 / 0.7);
  border: 1.5px solid rgb(232 200 138 / 0.6);
  text-align: left;
  font-size: 0.95rem;
}

.fair-note img {
  flex: none;
  margin-top: 2px;
}

.cta {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 18px;
  text-align: center;
  padding-bottom: 72px;
}

.cta-icon {
  border-radius: 26px;
  box-shadow: 0 12px 24px rgb(var(--shadow-warm) / 0.3);
  animation: drift 8s ease-in-out infinite;
}

.cta p {
  font-size: 1.15rem;
  color: var(--text-2);
}

/* Footer */
.site-footer {
  position: relative;
  z-index: 1;
  max-width: 1160px;
  margin: 0 auto;
  padding: 24px 20px max(32px, env(safe-area-inset-bottom));
  border-top: 1.5px solid rgb(232 200 138 / 0.6);
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 12px;
  font-size: 0.92rem;
}

.footer-links {
  display: flex;
  flex-wrap: wrap;
  gap: 18px;
}

.footer-links a {
  font-weight: 800;
  text-decoration: none;
}

.footer-links a:hover {
  text-decoration: underline;
}

/* Privacy and 404 */
.doc {
  max-width: 780px;
  margin: 24px auto 56px;
  padding: clamp(24px, 5vw, 48px);
  background: var(--surface-raised);
}

.doc-back {
  display: inline-block;
  margin-bottom: 18px;
  font-weight: 800;
  text-decoration: none;
}

.doc h1 {
  font-size: clamp(1.8rem, 4vw, 2.4rem);
}

.doc-updated {
  margin: 6px 0 22px;
  color: var(--text-2);
  font-style: italic;
}

.doc h2 {
  margin: 30px 0 10px;
  font-size: 1.3rem;
}

.doc p,
.doc li {
  color: var(--text-2);
  font-weight: 600;
}

.doc strong {
  color: var(--text);
  font-weight: 900;
}

.doc ul {
  padding-left: 1.2em;
}

.doc li + li {
  margin-top: 8px;
}

.doc p + p {
  margin-top: 12px;
}

.not-found {
  text-align: center;
}

.not-found .tile-heading {
  margin-bottom: 18px;
  font-size: 2.2rem;
}

.not-found .btn {
  margin: 12px 4px 0;
}

@media (max-width: 960px) {
  .floating-letters {
    display: none;
  }

  .hero {
    grid-template-columns: 1fr;
    gap: 48px;
    padding-top: 28px;
  }

  .hero-copy {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
  }

  .wordmark {
    gap: 12px;
  }


  .lead {
    margin-top: 28px;
  }

  .try {
    margin-top: 24px;
  }

  .badge-row {
    margin-top: 28px;
  }

  .try::before {
    content: "👇";
  }

  .wordmark {
    align-items: center;
  }

  .wordmark-row:nth-child(2) {
    padding-left: 0;
  }

  .lead {
    margin-inline: auto;
  }

  .badge-row {
    justify-content: center;
  }

  .steps {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .feature-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 560px) {
  .brand span {
    display: none;
  }

  .lang-option {
    padding: 6px 10px;
  }

  .lang-name,
  .header-actions .btn-small {
    display: none;
  }

  .lang-code {
    display: inline;
  }

  .hero {
    gap: 32px;
    padding-top: 20px;
    padding-bottom: 56px;
  }

  .wordmark {
    gap: 8px;
    font-size: 1.55rem;
  }


  .hero-copy .lead,
  .hero-copy .badge-row {
    display: none;
  }

  .try {
    display: block;
    max-width: 22em;
    margin-top: 24px;
    padding: 10px 18px;
    border-radius: 20px;
    font-size: 0.88rem;
    text-wrap: balance;
  }

  .try::before {
    margin-right: 6px;
  }

  .overlay {
    padding: 14px;
  }

  .intro-card {
    padding: 18px 18px 16px;
  }

  .game {
    border-radius: 34px;
    min-height: 540px;
  }


  .steps,
  .feature-grid {
    grid-template-columns: 1fr;
  }

  .section {
    --section-pad: 16px;
    padding: 40px var(--section-pad);
  }

  .floating-letters,
  .keyboard-hint {
    display: none;
  }

  .site-footer {
    flex-direction: column;
  }
}



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