/* CrateQuest Website */
:root {
  --bg: #f7f8f4;
  --card: #ffffff;
  --text: #1f241f;
  --muted: #5f6b61;
  --accent: #5fa56a;
  --accent-dark: #3f7d4b;
  --line: #e3e7df;
  --warning-bg: #fff7d6;
  --warning-line: #ead9a5;
  --shadow: 0 14px 40px rgba(31, 36, 31, 0.08);
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  background: radial-gradient(circle at top, #eef6e8 0%, var(--bg) 44%, #f8f6ef 100%);
  color: var(--text);
  line-height: 1.6;
}

a { color: var(--accent-dark); text-decoration: none; }
a:hover { text-decoration: underline; }

.container {
  width: min(1080px, calc(100% - 32px));
  margin: 0 auto;
}

.nav {
  position: sticky;
  top: 0;
  z-index: 10;
  backdrop-filter: blur(16px);
  background: rgba(247, 248, 244, 0.82);
  border-bottom: 1px solid rgba(227, 231, 223, 0.8);
}

.nav-inner {
  min-height: 68px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
}

.brand {
  display: flex;
  align-items: center;
  gap: 12px;
  font-weight: 850;
  letter-spacing: -0.035em;
  font-size: 1.25rem;
  color: var(--text);
}

.logo {
  width: 48px;
  height: 48px;
  border-radius: 12px;
  display: block;
  object-fit: cover;
  box-shadow: var(--shadow);
}

.nav-links {
  display: flex;
  gap: 18px;
  align-items: center;
  font-weight: 650;
  font-size: 0.95rem;
  flex-wrap: wrap;
}

.hero {
  padding: 84px 0 54px;
  text-align: center;
}

.hero-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 14px;
  border: 1px solid var(--line);
  background: rgba(255,255,255,0.7);
  border-radius: 999px;
  color: var(--muted);
  font-weight: 750;
  font-size: 0.92rem;
}

h1 {
  font-size: clamp(2.7rem, 8vw, 6rem);
  line-height: 0.98;
  margin: 24px 0 18px;
  letter-spacing: -0.065em;
  overflow-wrap: anywhere;
}

.hero p {
  max-width: 720px;
  margin: 0 auto 28px;
  font-size: 1.25rem;
  color: var(--muted);
}

.button {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: var(--text);
  color: white;
  padding: 14px 22px;
  border-radius: 16px;
  font-weight: 800;
  box-shadow: var(--shadow);
}

.button:hover { text-decoration: none; background: #101410; }

.button.secondary {
  background: rgba(255,255,255,0.82);
  color: var(--text);
  border: 1px solid var(--line);
}

.cta-row {
  display: flex;
  justify-content: center;
  gap: 12px;
  flex-wrap: wrap;
}

.section { padding: 38px 0; }

.section h2 {
  font-size: clamp(2rem, 4vw, 3rem);
  letter-spacing: -0.06em;
  margin: 0 0 18px;
}

.section-intro {
  max-width: 760px;
  color: var(--muted);
  font-size: 1.08rem;
  margin: -6px 0 22px;
}

.grid {
  display: grid;
  gap: 18px;
}

.grid.features { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.grid.worlds { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.grid.two { grid-template-columns: repeat(2, minmax(0, 1fr)); }

.card {
  background: rgba(255,255,255,0.84);
  border: 1px solid var(--line);
  border-radius: 28px;
  padding: 24px;
  box-shadow: var(--shadow);
}

.feature-icon, .world-icon {
  width: 56px;
  height: 56px;
  display: grid;
  place-items: center;
  border-radius: 18px;
  background: #edf4e8;
  font-size: 1.7rem;
  margin-bottom: 12px;
}

.card h3 {
  margin: 0 0 8px;
  letter-spacing: -0.03em;
}

.card p { margin: 0; color: var(--muted); }

.section-kicker {
  display: inline-flex;
  margin-bottom: 10px;
  padding: 7px 12px;
  border-radius: 999px;
  background: #edf4e8;
  color: var(--accent-dark);
  font-weight: 850;
  letter-spacing: -0.02em;
}

.expansion-section { padding-top: 46px; }

.expansion-card {
  display: grid;
  grid-template-columns: 1.35fr 1fr;
  gap: 24px;
  align-items: center;
  background: linear-gradient(135deg, rgba(255,255,255,0.9), rgba(237,244,232,0.95));
  border: 1px solid var(--line);
  border-radius: 32px;
  padding: clamp(24px, 5vw, 42px);
  box-shadow: var(--shadow);
}

.expansion-card h2 { margin-bottom: 12px; }
.expansion-card p { color: var(--muted); margin: 0; font-size: 1.08rem; }

.expansion-stats {
  display: grid;
  gap: 12px;
}

.expansion-stats div {
  background: rgba(255,255,255,0.78);
  border: 1px solid var(--line);
  border-radius: 22px;
  padding: 16px 18px;
}

.expansion-stats strong {
  display: block;
  letter-spacing: -0.03em;
}

.expansion-stats span {
  display: block;
  color: var(--muted);
  font-size: 0.94rem;
}

.page { padding: 54px 0 70px; }

.page-card {
  background: rgba(255,255,255,0.88);
  border: 1px solid var(--line);
  border-radius: 30px;
  padding: clamp(24px, 5vw, 48px);
  box-shadow: var(--shadow);
}

.page h1 {
  font-size: clamp(2.6rem, 6vw, 4.5rem);
  margin-top: 0;
}

.page h2 { margin-top: 34px; letter-spacing: -0.04em; }
.page h3 { margin-top: 24px; }

.notice {
  padding: 16px 18px;
  border: 1px solid var(--warning-line);
  background: var(--warning-bg);
  border-radius: 18px;
  color: #685018;
}

.placeholder {
  display: inline-block;
  padding: 2px 7px;
  border-radius: 8px;
  background: #eef1ea;
  color: #445047;
  font-weight: 700;
}

.footer {
  border-top: 1px solid var(--line);
  padding: 26px 0 40px;
  color: var(--muted);
}

.footer-inner {
  display: flex;
  justify-content: space-between;
  gap: 18px;
  flex-wrap: wrap;
}

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

ul.clean { padding-left: 1.2rem; }
li { margin: 0.35rem 0; }

@media (max-width: 920px) {
  .grid.features, .grid.worlds { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .expansion-card { grid-template-columns: 1fr; }
}

@media (max-width: 820px) {
  .nav-inner { height: auto; padding: 16px 0; align-items: flex-start; flex-direction: column; }
  .grid.features, .grid.two, .grid.worlds { grid-template-columns: 1fr; }
  .hero { padding-top: 54px; }
}


@media (max-width: 600px) {
  .container {
    width: min(100% - 20px, 1080px);
  }

  .nav-inner {
    gap: 12px;
    padding: 14px 0;
  }

  .brand {
    font-size: 1.1rem;
  }

  .logo {
    width: 38px;
    height: 38px;
    border-radius: 11px;
    font-size: 1.15rem;
  }

  .nav-links {
    width: 100%;
    gap: 10px 14px;
    font-size: 0.92rem;
    line-height: 1.25;
  }

  .page {
    padding: 34px 0 52px;
  }

  .page-card {
    border-radius: 22px;
    padding: 22px 16px;
  }

  .page h1 {
    font-size: clamp(2rem, 10.5vw, 2.9rem);
    line-height: 1.08;
    letter-spacing: -0.05em;
    word-break: normal;
    overflow-wrap: anywhere;
    hyphens: auto;
  }

  .page h2 {
    font-size: 1.45rem;
    line-height: 1.18;
    margin-top: 28px;
  }

  .page p, .page li {
    font-size: 1rem;
    line-height: 1.65;
  }

  .hero {
    padding: 46px 0 34px;
  }

  .hero p {
    font-size: 1.05rem;
  }

  .card {
    border-radius: 22px;
    padding: 20px;
  }
}

@media (max-width: 380px) {
  .nav-links {
    font-size: 0.86rem;
    gap: 8px 12px;
  }

  .page h1 {
    font-size: 2rem;
  }
}

.language-switch {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 10px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: rgba(255,255,255,0.72);
  color: var(--muted);
  font-weight: 800;
  letter-spacing: -0.02em;
}

.language-switch a {
  color: var(--muted);
}

.language-switch a[aria-current="page"] {
  color: var(--text);
}


/* Multi-game extension */
.brand-mark{width:44px;height:44px;display:grid;place-items:center;border-radius:14px;background:linear-gradient(135deg,#1f241f,#5f6b61);color:#fff;font-size:1.35rem;font-weight:900;box-shadow:var(--shadow)}
.studio-hero{padding-bottom:42px}.studio-hero h1{max-width:900px;margin-left:auto;margin-right:auto}.section-heading{display:flex;justify-content:space-between;gap:30px;align-items:end}.section-heading .section-intro{margin-bottom:18px}.games-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:24px}.game-card{overflow:hidden;background:rgba(255,255,255,.9);border:1px solid var(--line);border-radius:32px;box-shadow:var(--shadow)}.game-art,.hammer-art{width:100%;height:260px;object-fit:contain;padding:28px;background:linear-gradient(145deg,#edf4e8,#fff)}.hammer-art{display:grid;place-items:center;font-size:8rem;background:linear-gradient(145deg,#fff0e5,#f6d9c3)}.game-card-content{padding:28px}.game-card-content h3{font-size:2rem;margin:8px 0;letter-spacing:-.05em}.game-card-content p{color:var(--muted)}.game-tag{display:inline-flex;padding:6px 10px;border-radius:999px;background:#edf4e8;color:var(--accent-dark);font-weight:800;font-size:.86rem}.hammer-card .game-tag,.hammer-kicker{background:#fff0e5;color:#8a4b24}.check-list{list-style:none;padding:0;margin:18px 0 24px}.check-list li{margin:8px 0;color:var(--muted)}.check-list li:before{content:'✓';font-weight:900;color:var(--accent-dark);margin-right:9px}.promise-card,.throw-system{display:grid;grid-template-columns:1.4fr auto;gap:30px;align-items:center;background:linear-gradient(135deg,rgba(255,255,255,.95),rgba(237,244,232,.92));border:1px solid var(--line);border-radius:32px;padding:clamp(24px,5vw,44px);box-shadow:var(--shadow)}.promise-icon{width:110px;height:110px;border-radius:50%;display:grid;place-items:center;background:#edf4e8;color:var(--accent-dark);font-size:3.2rem;font-weight:900}.hammer-hero{background:radial-gradient(circle at top,#fff0e5 0%,transparent 68%)}.hero-symbol{font-size:6rem;line-height:1;margin-top:24px}.throw-system{background:linear-gradient(135deg,rgba(255,255,255,.95),rgba(255,240,229,.95))}.throw-counter{width:210px;height:210px;border-radius:50%;display:grid;place-content:center;text-align:center;background:#fff;border:1px solid #efd6c4;box-shadow:var(--shadow)}.throw-counter strong{font-size:4rem;line-height:.9}.throw-counter span{font-weight:850;font-size:1.25rem}.throw-counter small{max-width:150px;color:var(--muted);margin-top:8px}.notice{background:var(--warning-bg);border:1px solid var(--warning-line);border-radius:18px;margin:20px 0;padding:16px 18px}.language-switch{display:flex;gap:6px;align-items:center}.language-switch [aria-current=page]{font-weight:900;color:var(--text)}
@media(max-width:900px){.nav-inner{align-items:flex-start;padding:10px 0}.nav-links{justify-content:flex-end}.games-grid,.section-heading,.promise-card,.throw-system{grid-template-columns:1fr}.promise-icon,.throw-counter{margin:0 auto}.grid.features{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:640px){.nav-inner{display:block}.brand{margin-bottom:10px}.nav-links{gap:10px;font-size:.86rem;justify-content:flex-start}.games-grid,.grid.features,.grid.two{grid-template-columns:1fr}.game-art,.hammer-art{height:220px}.hero{padding-top:58px}.throw-counter{width:180px;height:180px}}

/* Hammer Toss app icon */
.hammer-game-art {
  background: radial-gradient(circle at 50% 45%, #163f68 0%, #071725 72%, #03090f 100%);
  padding: 24px;
}

.hammer-hero-icon {
  display: block;
  width: clamp(150px, 22vw, 230px);
  height: auto;
  margin: 28px auto 22px;
  border-radius: 24%;
  filter: drop-shadow(0 24px 36px rgba(0, 38, 72, .28));
}

@media (max-width: 640px) {
  .hammer-hero-icon {
    width: 150px;
    margin-top: 22px;
  }
}

/* Puzzli Kids */
.games-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  align-items: stretch;
}

.game-card {
  display: flex;
  flex-direction: column;
}

.game-card-content {
  display: flex;
  flex: 1;
  flex-direction: column;
  align-items: flex-start;
}

.game-card-content .check-list { flex: 1; }

.puzzli-card {
  border-color: rgba(68, 163, 239, .32);
  background: linear-gradient(180deg, #fff 0%, #f2fbff 100%);
}

.puzzli-game-art {
  object-fit: contain;
  background: radial-gradient(circle at 50% 42%, #def6ff 0%, #85d3f5 100%);
}

.puzzli-card .game-tag,
.puzzli-kicker {
  color: #1165a2;
  background: #ddf5ff;
}

.puzzli-button { background: #1165a2; }
.puzzli-button:hover { background: #084f82; }

.puzzli-wordmark,
.puzzli-title {
  font-weight: 950;
  letter-spacing: -.07em;
  text-shadow: 0 3px 0 rgba(255,255,255,.9), 0 8px 18px rgba(17,101,162,.18);
}

.puzzli-wordmark span:nth-of-type(6n+1),
.puzzli-title span:nth-of-type(6n+1) { color: #ff4d43; }
.puzzli-wordmark span:nth-of-type(6n+2),
.puzzli-title span:nth-of-type(6n+2) { color: #ffc21c; }
.puzzli-wordmark span:nth-of-type(6n+3),
.puzzli-title span:nth-of-type(6n+3) { color: #47c957; }
.puzzli-wordmark span:nth-of-type(6n+4),
.puzzli-title span:nth-of-type(6n+4) { color: #3394ea; }
.puzzli-wordmark span:nth-of-type(6n+5),
.puzzli-title span:nth-of-type(6n+5) { color: #9d5bdd; }
.puzzli-wordmark span:nth-of-type(6n+6),
.puzzli-title span:nth-of-type(6n+6) { color: #ff8a21; }

.puzzli-hero {
  padding: clamp(46px, 7vw, 90px) 0;
  background: radial-gradient(circle at 72% 32%, rgba(121,211,250,.38), transparent 40%);
}

.puzzli-hero-grid {
  display: grid;
  grid-template-columns: minmax(0, .85fr) minmax(420px, 1.15fr);
  align-items: center;
  gap: clamp(34px, 7vw, 84px);
}

.puzzli-hero-copy h1 {
  margin: 22px 0 10px;
  overflow-wrap: normal;
}

.puzzli-title {
  font-size: clamp(4.2rem, 8.5vw, 7.5rem);
  line-height: .78;
}

.puzzli-tagline {
  margin: 24px 0 8px;
  color: #154f84;
  font-size: clamp(1.35rem, 2.3vw, 2rem);
  font-weight: 900;
  letter-spacing: -.04em;
}

.puzzli-hero-copy > p:not(.puzzli-tagline) {
  color: var(--muted);
  font-size: 1.14rem;
}

.puzzli-cta { justify-content: flex-start; }
.upcoming { cursor: default; background: #1165a2; }

.puzzli-visual {
  overflow: hidden;
  border: 10px solid rgba(255,255,255,.88);
  border-radius: 40px;
  box-shadow: 0 26px 65px rgba(20,96,145,.2);
  transform: rotate(1.2deg);
}

.puzzli-visual img {
  display: block;
  width: 100%;
  height: auto;
}

.puzzli-feature { background: #ddf5ff; }

.puzzli-promise {
  display: grid;
  grid-template-columns: 1.4fr 220px;
  gap: 48px;
  align-items: center;
  padding: clamp(26px, 5vw, 48px);
  border: 1px solid rgba(68,163,239,.3);
  border-radius: 32px;
  background: linear-gradient(135deg, rgba(255,255,255,.96), rgba(221,245,255,.86));
  box-shadow: var(--shadow);
}

.puzzli-promise h2 { margin-bottom: 10px; }
.puzzli-promise p { color: var(--muted); margin-bottom: 22px; }
.puzzli-promise img { width: 100%; border-radius: 24%; box-shadow: 0 18px 40px rgba(17,101,162,.22); }

@media (max-width: 1040px) {
  .games-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 820px) {
  .puzzli-hero-grid { grid-template-columns: 1fr; }
  .puzzli-hero-copy { text-align: center; }
  .puzzli-cta { justify-content: center; }
  .puzzli-visual { max-width: 680px; margin: 0 auto; transform: none; }
}

@media (max-width: 640px) {
  .games-grid { grid-template-columns: 1fr; }
  .puzzli-title { font-size: clamp(4rem, 23vw, 6rem); }
  .puzzli-promise { grid-template-columns: 1fr; }
  .puzzli-promise img { width: 160px; margin: 0 auto; order: -1; }
  .puzzli-visual { border-width: 6px; border-radius: 26px; }
}

/* Support table of contents */
.support-toc {
  margin: 28px 0 38px;
  padding: 22px;
  border: 1px solid var(--line);
  border-radius: 22px;
  background: linear-gradient(135deg, rgba(237,244,232,.82), rgba(255,255,255,.94));
}

.support-toc > strong {
  display: block;
  margin-bottom: 14px;
  font-size: 1.08rem;
  letter-spacing: -.02em;
}

.support-toc-links {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
}

.support-toc-links a {
  display: flex;
  align-items: center;
  gap: 9px;
  min-height: 54px;
  padding: 11px 14px;
  border: 1px solid var(--line);
  border-radius: 15px;
  background: rgba(255,255,255,.92);
  color: var(--text);
  font-weight: 800;
  line-height: 1.25;
  box-shadow: 0 8px 20px rgba(31,36,31,.05);
}

.support-toc-links a:hover {
  border-color: var(--accent);
  color: var(--accent-dark);
  text-decoration: none;
  transform: translateY(-1px);
}

.support-toc-links span { font-size: 1.25rem; }
.page-card h2[id] { scroll-margin-top: 96px; }

@media (max-width: 900px) {
  .support-toc-links { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 520px) {
  .support-toc { padding: 16px; }
  .support-toc-links { grid-template-columns: 1fr; }
}

/* Structured privacy policy */
.privacy-lead {
  max-width: 780px;
  margin: -4px 0 28px;
  color: var(--muted);
  font-size: 1.12rem;
}

.privacy-summary {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 22px;
  align-items: start;
  margin: 0 0 28px;
  padding: 24px;
  border: 1px solid #bcd9c1;
  border-radius: 24px;
  background: linear-gradient(135deg, #edf8ee, #fbfffb);
}

.privacy-summary-icon {
  display: grid;
  width: 52px;
  height: 52px;
  place-items: center;
  border-radius: 17px;
  background: var(--accent-dark);
  color: white;
  font-size: 1.5rem;
  font-weight: 900;
}

.privacy-summary h2 {
  margin: 0 0 8px;
  font-size: 1.55rem;
}

.privacy-summary ul { margin: 0; }

.privacy-toc {
  margin: 0 0 42px;
  padding: 22px;
  border: 1px solid var(--line);
  border-radius: 24px;
  background: rgba(247,248,244,.78);
}

.privacy-toc > strong {
  display: block;
  margin-bottom: 14px;
  font-size: 1.1rem;
}

.privacy-toc-links {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}

.privacy-toc-links a {
  display: flex;
  align-items: center;
  gap: 9px;
  min-height: 54px;
  padding: 11px 14px;
  border: 1px solid var(--line);
  border-radius: 15px;
  background: white;
  color: var(--text);
  font-weight: 800;
  line-height: 1.25;
  box-shadow: 0 8px 20px rgba(31,36,31,.04);
}

.privacy-toc-links a:hover {
  border-color: var(--accent);
  color: var(--accent-dark);
  text-decoration: none;
  transform: translateY(-1px);
}

.privacy-toc-links span { font-size: 1.2rem; }

.privacy-section {
  padding: 12px 0 38px;
  border-top: 1px solid var(--line);
  scroll-margin-top: 92px;
}

.privacy-section-heading {
  display: grid;
  grid-template-columns: 58px 1fr;
  gap: 18px;
  align-items: start;
  margin: 28px 0 18px;
}

.privacy-section-heading > span {
  display: grid;
  width: 52px;
  height: 52px;
  place-items: center;
  border-radius: 17px;
  background: #edf4e8;
  color: var(--accent-dark);
  font-weight: 900;
}

.privacy-section-heading .section-kicker {
  margin-bottom: 5px;
  padding: 4px 9px;
  font-size: .78rem;
}

.privacy-section-heading h2 {
  margin: 0;
  font-size: clamp(1.8rem, 4vw, 2.6rem);
}

.privacy-section h3 {
  margin-top: 25px;
  margin-bottom: 6px;
}

.privacy-section p {
  max-width: 890px;
  margin-top: 0;
  color: #424c44;
}

.game-privacy-section {
  margin: 0 -18px;
  padding: 12px 18px 38px;
  border-radius: 24px;
}

.cratequest-privacy { background: linear-gradient(135deg, rgba(237,244,232,.58), transparent 72%); }
.hammer-privacy { background: linear-gradient(135deg, rgba(255,240,229,.72), transparent 72%); }
.puzzli-privacy { background: linear-gradient(135deg, rgba(221,245,255,.78), transparent 72%); }

.hammer-privacy .privacy-section-heading > span {
  background: #fff0e5;
  color: #8a4b24;
}

.puzzli-privacy .privacy-section-heading > span {
  background: #ddf5ff;
  color: #1165a2;
}

.puzzli-photo-note {
  display: grid;
  gap: 3px;
  margin: 14px 0 24px;
  padding: 17px 19px;
  border: 1px solid #a9daf0;
  border-radius: 17px;
  background: rgba(255,255,255,.86);
  color: #154f84;
}

/* Hammer Toss 2026 landing page */
.hammer-page { --ht-bg:#020812; --ht-panel:#081729; --ht-blue:#09bff5; --ht-blue2:#1477ff; --ht-ink:#f7fbff; --ht-muted:#9eb0c4; margin:0; color:var(--ht-ink); background:var(--ht-bg); }
.hammer-page main { overflow:hidden; background:radial-gradient(circle at 78% 8%,rgba(0,176,255,.19),transparent 28%),linear-gradient(180deg,#020812,#06111d 52%,#020812); }
.hammer-page a { color:inherit; }
.hammer-nav { color:#dfeeff; background:rgba(2,8,18,.78); border-color:rgba(78,180,232,.16); }
.hammer-nav .brand,.hammer-nav .nav-links a { color:#dfeeff; }
.hammer-nav .brand-mark { background:linear-gradient(135deg,#052342,#08bdf4); box-shadow:0 0 28px rgba(9,191,245,.22); }
.hammer-nav .nav-links a[aria-current=page] { color:#26cbff; }
.ht-hero { min-height:760px; display:grid; align-items:center; padding:72px 0 50px; position:relative; }
.ht-hero:before { content:""; position:absolute; inset:0; pointer-events:none; opacity:.22; background-image:linear-gradient(rgba(255,255,255,.025) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.025) 1px,transparent 1px); background-size:54px 54px; }
.ht-hero-grid { display:grid; grid-template-columns:minmax(0,1fr) minmax(360px,.82fr); gap:clamp(30px,7vw,92px); align-items:center; position:relative; }
.ht-eyebrow { display:flex; align-items:center; gap:10px; color:#9bdffd; text-transform:uppercase; letter-spacing:.16em; font-size:.76rem; font-weight:850; }
.ht-eyebrow span { width:34px; height:2px; background:var(--ht-blue); box-shadow:0 0 12px var(--ht-blue); }
.ht-wordmark { margin:26px 0 8px; color:#edf6ff; font-size:clamp(1.1rem,2vw,1.5rem); font-weight:950; letter-spacing:.14em; line-height:1; }
.ht-wordmark strong { color:var(--ht-blue); }
.ht-hero h1 { margin:16px 0 24px; color:white; font-size:clamp(4.2rem,8vw,7.5rem); line-height:.82; letter-spacing:-.075em; overflow-wrap:normal; }
.ht-hero h1 em { color:transparent; font-style:normal; -webkit-text-stroke:2px var(--ht-blue); text-shadow:0 0 30px rgba(9,191,245,.3); }
.ht-lead { max-width:640px; margin:0 0 30px; color:var(--ht-muted); font-size:clamp(1.08rem,1.8vw,1.27rem); line-height:1.65; }
.ht-cta { justify-content:flex-start; }
.ht-primary { background:linear-gradient(135deg,#087bdc,#04bff4); border:1px solid rgba(255,255,255,.25); box-shadow:0 13px 34px rgba(0,157,231,.28); }
.ht-primary:hover { background:linear-gradient(135deg,#09bff5,#1379ff); transform:translateY(-1px); }
.ht-secondary { color:#dff7ff!important; background:rgba(8,32,54,.7)!important; border-color:rgba(60,180,234,.34)!important; }
.ht-trust { display:flex; flex-wrap:wrap; gap:18px; margin-top:24px; color:#7f95aa; font-size:.86rem; font-weight:700; }
.ht-trust span::first-letter { color:var(--ht-blue); }
.ht-hero-visual { min-height:630px; display:grid; place-items:center; position:relative; }
.ht-orbit { position:absolute; width:520px; aspect-ratio:1; border:1px solid rgba(24,193,249,.25); border-radius:50%; box-shadow:inset 0 0 80px rgba(6,157,230,.09),0 0 80px rgba(6,157,230,.08); }
.ht-orbit:before,.ht-orbit:after { content:""; position:absolute; border:1px solid rgba(24,193,249,.16); border-radius:50%; inset:12%; }.ht-orbit:after{inset:28%}
.ht-phone { display:block; width:290px; border-radius:44px; box-shadow:0 34px 90px rgba(0,0,0,.65),0 0 0 7px rgba(132,215,255,.11); }
.ht-phone-main { transform:rotate(3deg); position:relative; z-index:2; }
.ht-app-icon { position:absolute; z-index:3; left:6%; bottom:7%; width:115px; border-radius:25%; box-shadow:0 20px 45px rgba(0,0,0,.55),0 0 28px rgba(0,172,255,.3); }
.ht-strip { border-block:1px solid rgba(71,173,224,.18); background:rgba(8,27,45,.78); }
.ht-steps { min-height:100px; display:flex; align-items:center; justify-content:space-between; gap:24px; }
.ht-steps div { display:flex; align-items:center; gap:14px; }.ht-steps b { color:var(--ht-blue); font-size:.78rem; letter-spacing:.14em; }.ht-steps span { font-weight:850; }.ht-steps i { color:#29607d; font-style:normal; }
.hammer-page .section { padding:clamp(70px,9vw,120px) 0; }
.hammer-page .section h2 { color:#f8fbff; font-size:clamp(2.7rem,5.4vw,5rem); line-height:.96; letter-spacing:-.06em; }
.ht-section-head { display:grid; grid-template-columns:1.15fr .85fr; gap:60px; align-items:end; margin-bottom:55px; }.ht-section-head p,.ht-duel-copy>p,.ht-result-grid>div>p,.ht-fair-card p { color:var(--ht-muted); font-size:1.08rem; }
.ht-kicker { display:inline-flex; margin-bottom:16px; color:var(--ht-blue); text-transform:uppercase; letter-spacing:.12em; font-size:.76rem; font-weight:900; }
.ht-showcase { display:grid; grid-template-columns:minmax(300px,.78fr) 1.22fr; gap:clamp(30px,6vw,74px); align-items:center; }
.ht-screen-card { position:relative; width:min(100%,390px); margin:auto; padding:12px; border:1px solid rgba(71,188,242,.3); border-radius:50px; background:linear-gradient(150deg,rgba(17,51,77,.8),rgba(3,12,23,.9)); box-shadow:0 35px 80px rgba(0,0,0,.5); }.ht-screen-card img { display:block; width:100%; border-radius:39px; }.ht-screen-label { position:absolute; z-index:2; top:24px; left:-25px; padding:10px 15px; border-radius:999px; background:#08aee8; color:#fff; font-size:.78rem; font-weight:850; box-shadow:0 10px 25px rgba(0,174,232,.3); }
.ht-feature-stack { display:grid; gap:14px; }.ht-feature-stack article { display:grid; grid-template-columns:55px 1fr; gap:18px; padding:24px; border:1px solid rgba(79,157,201,.16); border-radius:24px; background:linear-gradient(135deg,rgba(13,35,57,.86),rgba(5,17,31,.7)); }.ht-feature-stack article>span { width:55px; height:55px; display:grid; place-items:center; border-radius:17px; color:var(--ht-blue); background:rgba(7,173,237,.1); font-size:1.55rem; font-weight:900; }.ht-feature-stack h3 { margin:0 0 6px; color:#f3f9ff; font-size:1.18rem; }.ht-feature-stack p { margin:0; color:var(--ht-muted); }
.ht-duel { background:radial-gradient(circle at 80% 50%,rgba(94,36,228,.23),transparent 32%),#030914; border-block:1px solid rgba(112,69,220,.18); }.ht-duel-grid { display:grid; grid-template-columns:1fr .86fr; gap:80px; align-items:center; }.ht-purple { color:#a987ff; }.ht-checks { list-style:none; padding:0; margin:24px 0 30px; color:#c5d2df; }.ht-checks li { margin:10px 0; }.ht-checks li:before { content:"✓"; color:#9b76ff; font-weight:900; margin-right:12px; }
.ht-scoreboard { position:relative; display:grid; grid-template-columns:1fr 1fr; gap:1px; overflow:hidden; padding:42px 22px 24px; border:1px solid rgba(143,105,255,.35); border-radius:34px; background:linear-gradient(155deg,rgba(28,21,67,.92),rgba(5,14,28,.95)); box-shadow:0 35px 85px rgba(0,0,0,.45); }.ht-scoreboard div { padding:30px 12px; text-align:center; }.ht-scoreboard small { display:block; color:#8ca0b7; font-size:.68rem; font-weight:900; letter-spacing:.1em; }.ht-scoreboard strong { display:block; color:#fff; font-size:clamp(3rem,7vw,5.4rem); line-height:1.05; }.ht-scoreboard div:nth-of-type(1) strong { color:#aa87ff; }.ht-scoreboard p { grid-column:1/-1; margin:0; padding:12px; border-radius:14px; color:#b99eff; background:rgba(144,99,255,.1); text-align:center; font-weight:900; letter-spacing:.12em; }.ht-vs { position:absolute; top:18px; left:50%; transform:translateX(-50%); color:#8367d9; font-weight:950; }
.ht-result-grid { display:grid; grid-template-columns:.72fr 1.28fr; gap:clamp(45px,9vw,110px); align-items:center; }.ht-result-phone { display:grid; place-items:center; }.ht-result-phone img { display:block; width:min(100%,340px); border-radius:44px; box-shadow:0 35px 80px rgba(0,0,0,.5),0 0 0 7px rgba(132,215,255,.08); }.ht-stats { display:grid; grid-template-columns:repeat(3,1fr); gap:10px; margin-top:34px; }.ht-stats div { padding:18px 12px; border-top:1px solid rgba(50,179,239,.3); }.ht-stats strong { display:block; color:var(--ht-blue); font-size:2.1rem; }.ht-stats span { color:#8295a9; font-size:.78rem; font-weight:750; }
.ht-fair { padding-top:20px!important; }.ht-fair-card { display:grid; grid-template-columns:1.3fr auto; gap:50px; align-items:center; padding:clamp(28px,5vw,54px); border:1px solid rgba(56,171,222,.23); border-radius:34px; background:linear-gradient(135deg,rgba(10,38,61,.9),rgba(5,16,29,.95)); }.ht-refill { width:210px; height:210px; display:grid; place-content:center; text-align:center; border:1px solid rgba(58,193,250,.35); border-radius:50%; background:radial-gradient(circle,rgba(4,151,220,.22),rgba(5,17,30,.9) 67%); box-shadow:0 0 50px rgba(0,174,236,.13); }.ht-refill strong { color:#fff; font-size:4.5rem; line-height:.85; }.ht-refill span { color:var(--ht-blue); font-size:1.2rem; font-weight:900; }.ht-refill small { max-width:140px; margin-top:8px; color:#7f95aa; }
.ht-final { text-align:center; }.ht-final .container { display:grid; justify-items:center; }.ht-final-icon { width:130px; margin-bottom:20px; border-radius:25%; box-shadow:0 20px 60px rgba(0,166,236,.25); }.ht-final h2 { margin-bottom:20px; }.ht-final p:not(.ht-wordmark) { color:var(--ht-muted); font-size:1.08rem; margin-bottom:28px; }
.ht-footer { color:#8497ab; background:#01050b; border-color:rgba(76,159,201,.16); }.ht-footer a { color:#a8bfd2; }
@media(max-width:900px){.ht-hero-grid,.ht-section-head,.ht-showcase,.ht-duel-grid,.ht-result-grid,.ht-fair-card{grid-template-columns:1fr}.ht-hero-copy{text-align:center}.ht-eyebrow,.ht-cta{justify-content:center}.ht-trust{justify-content:center}.ht-hero-visual{min-height:560px}.ht-section-head{gap:8px}.ht-duel-grid{gap:48px}.ht-result-grid>div:nth-child(2){text-align:center}.ht-refill{margin:auto}.ht-showcase{gap:50px}}
@media(max-width:640px){.ht-hero{padding-top:50px}.ht-hero h1{font-size:clamp(3.6rem,18vw,5rem)}.ht-hero-grid{grid-template-columns:minmax(0,1fr)}.ht-hero-visual{min-height:500px}.ht-phone{width:245px}.ht-orbit{width:410px}.ht-app-icon{left:3%;width:88px}.ht-steps{padding:18px 0;gap:10px}.ht-steps div{display:grid;gap:2px}.ht-steps i{display:none}.ht-steps span{font-size:.78rem}.hammer-page .section{padding:70px 0}.hammer-page .section h2{font-size:clamp(2.5rem,13vw,3.8rem)}.ht-feature-stack article{grid-template-columns:1fr}.ht-scoreboard{padding-inline:10px}.ht-scoreboard strong{font-size:3rem}.ht-stats{grid-template-columns:1fr}.ht-stats div{display:flex;align-items:center;gap:12px}.ht-result-phone img{width:260px}.ht-fair-card{gap:25px}.ht-refill{width:180px;height:180px}.ht-footer .footer-inner{gap:18px}}

.puzzli-photo-note strong { font-size: 1.08rem; }

@media (max-width: 780px) {
  .privacy-toc-links { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 520px) {
  .privacy-summary { grid-template-columns: 1fr; padding: 18px; }
  .privacy-summary-icon { width: 44px; height: 44px; }
  .privacy-toc { padding: 16px; }
  .privacy-toc-links { grid-template-columns: 1fr; }
  .privacy-section-heading { grid-template-columns: 44px 1fr; gap: 12px; }
  .privacy-section-heading > span { width: 42px; height: 42px; border-radius: 14px; }
  .game-privacy-section { margin: 0 -6px; padding-left: 12px; padding-right: 12px; }
}

/* New multi-game home page */
body.home-page {
  overflow-x: hidden;
  background: #f8f8f3;
}

.home-page .nav {
  background: rgba(248,248,243,.88);
}

.home-hero {
  position: relative;
  overflow: hidden;
  padding: clamp(62px, 8vw, 112px) 0 clamp(58px, 7vw, 92px);
  background:
    linear-gradient(115deg, rgba(238,246,232,.9), rgba(255,249,239,.85) 48%, rgba(227,245,255,.88));
}

.home-orb {
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
  filter: blur(2px);
}

.home-orb-one {
  width: 360px;
  height: 360px;
  top: -190px;
  right: 23%;
  background: rgba(255,194,28,.18);
}

.home-orb-two {
  width: 440px;
  height: 440px;
  right: -220px;
  bottom: -260px;
  background: rgba(51,148,234,.15);
}

.home-hero-grid {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: minmax(0, 1.04fr) minmax(440px, .96fr);
  gap: clamp(36px, 7vw, 92px);
  align-items: center;
}

.home-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 13px;
  border: 1px solid rgba(63,125,75,.18);
  border-radius: 999px;
  background: rgba(255,255,255,.72);
  color: var(--accent-dark);
  font-weight: 850;
  box-shadow: 0 8px 24px rgba(31,36,31,.04);
}

.home-eyebrow span { color: #ff8a21; }

.home-hero h1 {
  max-width: 720px;
  margin: 25px 0 22px;
  font-size: clamp(3.7rem, 7.1vw, 6.7rem);
  line-height: .88;
  letter-spacing: -.075em;
  overflow-wrap: normal;
}

.home-hero h1 > span {
  background: linear-gradient(90deg, #3f7d4b 0%, #2095d4 54%, #8c55ca 100%);
  background-clip: text;
  -webkit-background-clip: text;
  color: transparent;
}

.home-hero-copy > p {
  max-width: 680px;
  margin: 0 0 28px;
  color: #536056;
  font-size: clamp(1.08rem, 1.8vw, 1.28rem);
  line-height: 1.58;
}

.home-hero-actions {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}

.home-primary {
  background: linear-gradient(135deg, #243129, #3f7d4b);
}

.home-primary:hover { background: linear-gradient(135deg, #172019, #32683d); }

.home-trust {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 18px;
  margin-top: 24px;
  color: #657068;
  font-size: .92rem;
  font-weight: 720;
}

.hero-game-stage {
  position: relative;
  min-height: 510px;
}

.hero-app {
  position: absolute;
  display: flex;
  align-items: center;
  gap: 14px;
  width: 260px;
  padding: 15px;
  border: 1px solid rgba(255,255,255,.9);
  border-radius: 26px;
  background: rgba(255,255,255,.88);
  color: var(--text);
  box-shadow: 0 25px 60px rgba(35,49,41,.17);
  backdrop-filter: blur(16px);
  transition: transform .22s ease, box-shadow .22s ease;
}

.hero-app:hover {
  z-index: 4;
  text-decoration: none;
  box-shadow: 0 30px 70px rgba(35,49,41,.23);
}

.hero-app img {
  width: 92px;
  height: 92px;
  flex: 0 0 auto;
  border-radius: 23%;
  object-fit: cover;
  box-shadow: 0 12px 26px rgba(31,36,31,.16);
}

.hero-app span { display: grid; gap: 2px; }
.hero-app strong { font-size: 1.08rem; letter-spacing: -.03em; }
.hero-app small { color: var(--muted); line-height: 1.25; }

.hero-app-crate {
  top: 18px;
  left: 24px;
  transform: rotate(-5deg);
}

.hero-app-crate:hover { transform: rotate(-2deg) translateY(-6px); }

.hero-app-hammer {
  top: 190px;
  right: 0;
  z-index: 2;
  transform: rotate(4deg);
}

.hero-app-hammer:hover { transform: rotate(1deg) translateY(-6px); }

.hero-app-puzzli {
  bottom: 10px;
  left: 42px;
  z-index: 1;
  transform: rotate(-2deg);
}

.hero-app-puzzli:hover { transform: rotate(1deg) translateY(-6px); }

.stage-spark {
  position: absolute;
  color: #ffc21c;
  font-size: 2.2rem;
  text-shadow: 0 8px 20px rgba(255,138,33,.28);
}

.stage-spark-one { top: 135px; right: 45px; }
.stage-spark-two { bottom: 92px; right: 72px; color: #9d5bdd; font-size: 1.45rem; }

.home-values {
  position: relative;
  z-index: 2;
  border-top: 1px solid rgba(227,231,223,.8);
  border-bottom: 1px solid rgba(227,231,223,.8);
  background: rgba(255,255,255,.72);
}

.home-values-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.home-values-grid > div {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 22px 26px;
  border-right: 1px solid var(--line);
}

.home-values-grid > div:first-child { padding-left: 0; }
.home-values-grid > div:last-child { border-right: 0; padding-right: 0; }

.value-icon {
  display: grid;
  width: 44px;
  height: 44px;
  flex: 0 0 auto;
  place-items: center;
  border-radius: 14px;
  background: #edf4e8;
  color: var(--accent-dark);
  font-size: 1.2rem;
  font-weight: 900;
}

.home-values-grid > div:nth-child(2) .value-icon { background: #fff0e5; color: #8a4b24; }
.home-values-grid > div:nth-child(3) .value-icon { background: #ddf5ff; color: #1165a2; }
.home-values-grid p { display: grid; gap: 1px; margin: 0; }
.home-values-grid strong { letter-spacing: -.02em; }
.home-values-grid small { color: var(--muted); font-size: .88rem; }

.home-games-section { padding: clamp(64px, 8vw, 104px) 0 48px; }

.home-section-heading {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(280px, .8fr);
  gap: 40px;
  align-items: end;
  margin-bottom: 32px;
}

.home-section-heading h2 {
  max-width: 700px;
  margin-bottom: 0;
}

.home-section-heading > p {
  margin: 0 0 8px;
  color: var(--muted);
  font-size: 1.05rem;
}

.home-game-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 20px;
}

.home-game-card {
  display: flex;
  min-width: 0;
  flex-direction: column;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 32px;
  background: rgba(255,255,255,.92);
  box-shadow: 0 18px 50px rgba(31,36,31,.08);
  transition: transform .22s ease, box-shadow .22s ease;
}

.home-game-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 26px 65px rgba(31,36,31,.13);
}

.home-game-visual {
  position: relative;
  display: grid;
  min-height: 250px;
  place-items: center;
  overflow: hidden;
}

.home-game-visual img {
  position: relative;
  z-index: 1;
  width: 158px;
  height: 158px;
  border-radius: 25%;
  object-fit: cover;
  box-shadow: 0 22px 46px rgba(31,36,31,.2);
}

.home-crate-card .home-game-visual { background: radial-gradient(circle at 50% 50%, #f7ffe5, #dceecb); }
.home-hammer-card .home-game-visual { background: radial-gradient(circle at 50% 50%, #264e72, #071725 72%); }
.home-puzzli-card .home-game-visual { background: radial-gradient(circle at 50% 45%, #e1f8ff, #85d3f5); }

.home-game-number {
  position: absolute;
  top: 18px;
  right: 20px;
  color: rgba(31,36,31,.22);
  font-size: 2.5rem;
  font-weight: 950;
  letter-spacing: -.08em;
}

.home-hammer-card .home-game-number { color: rgba(255,255,255,.3); }

.home-game-content {
  display: flex;
  flex: 1;
  flex-direction: column;
  align-items: flex-start;
  padding: 26px;
}

.home-game-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
}

.home-game-meta span {
  padding: 5px 9px;
  border-radius: 999px;
  background: #edf4e8;
  color: var(--accent-dark);
  font-size: .78rem;
  font-weight: 850;
}

.home-hammer-card .home-game-meta span { background: #fff0e5; color: #8a4b24; }
.home-puzzli-card .home-game-meta span { background: #ddf5ff; color: #1165a2; }

.home-game-content h3 {
  margin: 13px 0 8px;
  font-size: 2rem;
  letter-spacing: -.055em;
}

.home-game-content > p {
  margin: 0;
  color: var(--muted);
}

.home-game-content .check-list {
  flex: 1;
  margin-bottom: 22px;
}

.home-card-link {
  display: flex;
  width: 100%;
  align-items: center;
  justify-content: space-between;
  padding-top: 17px;
  border-top: 1px solid var(--line);
  color: var(--text);
  font-weight: 850;
}

.home-card-link span {
  display: grid;
  width: 34px;
  height: 34px;
  place-items: center;
  border-radius: 50%;
  background: #edf4e8;
  color: var(--accent-dark);
}

.home-hammer-card .home-card-link span { background: #fff0e5; color: #8a4b24; }
.home-puzzli-card .home-card-link span { background: #ddf5ff; color: #1165a2; }
.home-card-link:hover { text-decoration: none; }

.home-closing { padding: 38px 0 88px; }

.home-closing-card {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 36px;
  align-items: center;
  padding: clamp(28px, 5vw, 52px);
  border-radius: 34px;
  background:
    radial-gradient(circle at 90% 0%, rgba(51,148,234,.22), transparent 33%),
    linear-gradient(135deg, #202a23, #334b3a);
  color: white;
  box-shadow: 0 24px 60px rgba(31,36,31,.18);
}

.home-closing-kicker { color: #bfe8c6; font-weight: 850; }
.home-closing-card h2 { margin: 6px 0 8px; color: white; }
.home-closing-card p { max-width: 680px; margin: 0; color: rgba(255,255,255,.72); }
.home-closing-card .home-primary { border: 1px solid rgba(255,255,255,.3); background: white; color: #243129; }

@media (max-width: 1050px) {
  .home-hero-grid { grid-template-columns: 1fr 400px; gap: 30px; }
  .hero-game-stage { min-height: 470px; }
  .hero-app { width: 230px; }
  .hero-app img { width: 78px; height: 78px; }
  .home-game-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .home-puzzli-card { grid-column: 1 / -1; display: grid; grid-template-columns: .8fr 1.2fr; }
}

@media (max-width: 840px) {
  .home-hero-grid { grid-template-columns: 1fr; }
  .home-hero-copy { text-align: center; }
  .home-hero-copy > p { margin-left: auto; margin-right: auto; }
  .home-hero-actions, .home-trust { justify-content: center; }
  .hero-game-stage { width: min(100%, 540px); margin: 10px auto 0; }
  .home-values-grid { grid-template-columns: 1fr; }
  .home-values-grid > div, .home-values-grid > div:first-child, .home-values-grid > div:last-child { padding: 16px 0; border-right: 0; border-bottom: 1px solid var(--line); }
  .home-values-grid > div:last-child { border-bottom: 0; }
  .home-section-heading { grid-template-columns: 1fr; gap: 12px; }
}

@media (max-width: 680px) {
  .home-hero { padding-top: 48px; }
  .home-hero h1 { font-size: clamp(3.35rem, 16vw, 5rem); }
  .hero-game-stage { display: grid; min-height: 0; gap: 12px; }
  .hero-app, .hero-app-crate, .hero-app-hammer, .hero-app-puzzli {
    position: relative;
    inset: auto;
    width: 100%;
    transform: none;
  }
  .hero-app:hover, .hero-app-crate:hover, .hero-app-hammer:hover, .hero-app-puzzli:hover { transform: translateY(-3px); }
  .stage-spark { display: none; }
  .home-game-grid { grid-template-columns: 1fr; }
  .home-puzzli-card { grid-column: auto; display: flex; }
  .home-game-visual { min-height: 220px; }
  .home-closing-card { grid-template-columns: 1fr; }
  .home-closing-card .button { justify-self: start; }
}

@media (prefers-reduced-motion: reduce) {
  .hero-app, .home-game-card { transition: none; }
}

/* Accessibility and shared refinements */
.skip-link {
  position: fixed;
  top: 10px;
  left: 10px;
  z-index: 1000;
  padding: 10px 14px;
  border-radius: 10px;
  background: #fff;
  color: #111;
  font-weight: 850;
  box-shadow: 0 8px 30px rgba(0,0,0,.22);
  transform: translateY(-160%);
  transition: transform .18s ease;
}

.skip-link:focus { transform: translateY(0); }

:where(a, button, summary):focus-visible {
  outline: 3px solid #16d9e8;
  outline-offset: 4px;
  border-radius: 8px;
}

.nav-links > a {
  display: inline-flex;
  min-height: 38px;
  align-items: center;
}

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

/* CrateQuest campaign page */
.cq-page {
  --cq-bg: #050713;
  --cq-panel: #0a1025;
  --cq-panel-2: #0c1830;
  --cq-text: #f4fbff;
  --cq-muted: #9aa9c3;
  --cq-cyan: #12ddea;
  --cq-cyan-soft: #8ff8ff;
  --cq-blue: #6678ff;
  --cq-gold: #f6c752;
  --cq-line: rgba(133,226,236,.18);
  background:
    radial-gradient(circle at 15% 0%, rgba(12,96,131,.28), transparent 31%),
    radial-gradient(circle at 90% 22%, rgba(62,48,141,.24), transparent 28%),
    var(--cq-bg);
  color: var(--cq-text);
}

.cq-page .container { width: min(1180px, calc(100% - 40px)); }

.cq-page a { color: inherit; }

.cq-page .nav {
  border-bottom-color: rgba(92,227,237,.12);
  background: rgba(5,7,19,.8);
}

.cq-page .brand,
.cq-page .nav-links a { color: rgba(244,251,255,.88); }

.cq-page .nav-links > a[aria-current="page"] { color: var(--cq-cyan-soft); }

.cq-page .brand-mark {
  background: linear-gradient(135deg, #0cb7c7, #5863d9);
  box-shadow: 0 10px 28px rgba(18,221,234,.16);
}

.cq-page .language-switch {
  border-color: rgba(133,226,236,.16);
  background: rgba(255,255,255,.05);
  color: var(--cq-muted);
}

.cq-page .language-switch a { color: var(--cq-muted); }
.cq-page .language-switch a[aria-current="page"] { color: var(--cq-text); }

.cq-hero {
  position: relative;
  overflow: hidden;
  padding: clamp(74px, 9vw, 126px) 0 clamp(64px, 8vw, 110px);
  isolation: isolate;
}

.cq-hero::before {
  position: absolute;
  inset: 0;
  z-index: -2;
  background:
    linear-gradient(rgba(18,221,234,.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(18,221,234,.035) 1px, transparent 1px);
  background-size: 64px 64px;
  -webkit-mask-image: linear-gradient(to bottom, black, transparent 88%);
  mask-image: linear-gradient(to bottom, black, transparent 88%);
  content: "";
}

.cq-hero-glow {
  position: absolute;
  z-index: -1;
  width: 420px;
  height: 420px;
  border-radius: 50%;
  filter: blur(75px);
  opacity: .17;
}

.cq-glow-one { top: 8%; left: -180px; background: var(--cq-cyan); }
.cq-glow-two { right: -130px; bottom: -90px; background: #7357ff; }

.cq-hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.04fr) minmax(430px, .96fr);
  gap: clamp(42px, 7vw, 94px);
  align-items: center;
}

.cq-product-lockup {
  display: inline-flex;
  align-items: center;
  gap: 13px;
  margin-bottom: 28px;
  font-size: 1.24rem;
  font-weight: 900;
  letter-spacing: -.04em;
}

.cq-product-lockup img {
  width: 48px;
  height: 48px;
  border: 1px solid rgba(255,255,255,.16);
  border-radius: 13px;
  box-shadow: 0 10px 30px rgba(18,221,234,.18);
}

.cq-eyebrow,
.cq-kicker {
  display: inline-flex;
  align-items: center;
  width: fit-content;
  padding: 7px 12px;
  border: 1px solid rgba(18,221,234,.2);
  border-radius: 999px;
  background: rgba(18,221,234,.08);
  color: var(--cq-cyan-soft);
  font-size: .82rem;
  font-weight: 850;
  letter-spacing: .06em;
  text-transform: uppercase;
}

.cq-hero h1 {
  margin: 22px 0 22px;
  max-width: 720px;
  color: var(--cq-text);
  font-size: clamp(4.3rem, 8.4vw, 7.8rem);
  line-height: .82;
  letter-spacing: -.075em;
  overflow-wrap: normal;
}

.cq-hero h1 span {
  color: transparent;
  background: linear-gradient(100deg, var(--cq-cyan-soft), var(--cq-cyan) 52%, #71a8ff);
  background-clip: text;
  -webkit-background-clip: text;
}

.cq-hero-copy > p {
  max-width: 640px;
  margin: 0 0 29px;
  color: var(--cq-muted);
  font-size: clamp(1.05rem, 1.6vw, 1.25rem);
}

.cq-cta-row {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  align-items: center;
}

.cq-store-button {
  display: inline-flex;
  min-height: 64px;
  align-items: center;
  gap: 12px;
  padding: 10px 20px 10px 16px;
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 18px;
  background: linear-gradient(135deg, #11dae7, #5de6dc);
  color: #02080c;
  box-shadow: 0 16px 40px rgba(18,221,234,.18);
  font-weight: 800;
}

.cq-store-button:hover {
  background: linear-gradient(135deg, #73f3f8, #79ebdf);
  text-decoration: none;
  transform: translateY(-2px);
}

.cq-store-button > span:last-child { display: grid; line-height: 1.02; }
.cq-store-button small { font-size: .7rem; font-weight: 750; letter-spacing: .01em; }
.cq-store-button strong { font-size: 1.16rem; letter-spacing: -.03em; }
.cq-apple { font-size: 2rem; line-height: 1; }

.cq-text-button {
  display: inline-flex;
  min-height: 48px;
  align-items: center;
  gap: 9px;
  padding: 10px 14px;
  color: var(--cq-text);
  font-weight: 850;
}

.cq-text-button span { color: var(--cq-cyan); }
.cq-text-button:hover { color: var(--cq-cyan-soft); text-decoration: none; }

.cq-trust-list {
  display: flex;
  flex-wrap: wrap;
  gap: 9px 20px;
  margin: 25px 0 0;
  padding: 0;
  color: var(--cq-muted);
  font-size: .88rem;
  font-weight: 750;
  list-style: none;
}

.cq-trust-list li { margin: 0; }
.cq-trust-list li::before { margin-right: 7px; color: #62e3a5; content: "✓"; }

.cq-device-cluster {
  position: relative;
  min-height: 720px;
  perspective: 1400px;
}

.cq-phone {
  position: absolute;
  overflow: hidden;
  margin: 0;
  border: 9px solid #11182b;
  border-radius: 46px;
  background: #02040a;
  box-shadow: 0 36px 80px rgba(0,0,0,.48), 0 0 0 1px rgba(124,241,249,.16);
}

.cq-phone img {
  display: block;
  width: 100%;
  height: auto;
}

.cq-phone-main {
  top: 10px;
  right: 18px;
  z-index: 2;
  width: min(62%, 344px);
  transform: rotate(3deg);
}

.cq-phone-float {
  bottom: 5px;
  left: 0;
  z-index: 1;
  width: min(50%, 272px);
  border-width: 7px;
  border-radius: 38px;
  transform: rotate(-6deg);
}

.cq-float-badge {
  position: absolute;
  z-index: 3;
  display: grid;
  gap: 1px;
  min-width: 135px;
  padding: 13px 16px;
  border: 1px solid rgba(255,255,255,.16);
  border-radius: 17px;
  background: rgba(9,16,35,.88);
  box-shadow: 0 16px 45px rgba(0,0,0,.38);
  backdrop-filter: blur(18px);
}

.cq-float-badge strong { color: var(--cq-gold); font-size: 1.12rem; }
.cq-float-badge span { color: var(--cq-muted); font-size: .77rem; font-weight: 750; }
.cq-badge-stars { top: 27%; left: -7%; }
.cq-badge-free { right: -5%; bottom: 16%; }
.cq-badge-free strong { color: var(--cq-cyan); font-size: 1.7rem; line-height: 1; }

.cq-proof {
  position: relative;
  border-block: 1px solid var(--cq-line);
  background: rgba(10,16,37,.74);
}

.cq-proof-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  padding-block: 26px;
}

.cq-proof-grid div {
  display: grid;
  gap: 1px;
  padding-inline: 28px;
  border-right: 1px solid var(--cq-line);
}

.cq-proof-grid div:first-child { padding-left: 0; }
.cq-proof-grid div:last-child { border-right: 0; }
.cq-proof-grid strong { color: var(--cq-text); font-size: 2rem; line-height: 1; letter-spacing: -.055em; }
.cq-proof-grid span { color: var(--cq-muted); font-size: .83rem; }

.cq-section { padding: clamp(74px, 9vw, 120px) 0; }

.cq-section-heading {
  display: grid;
  grid-template-columns: minmax(0, 1.12fr) minmax(320px, .88fr);
  gap: 52px;
  align-items: end;
  margin-bottom: 52px;
}

.cq-section h2,
.cq-gallery-heading h2,
.cq-faq-preview h2 {
  margin: 17px 0 0;
  color: var(--cq-text);
  font-size: clamp(2.8rem, 5.7vw, 5.4rem);
  line-height: .96;
  letter-spacing: -.07em;
}

.cq-section-heading > p {
  max-width: 540px;
  margin: 0 0 4px;
  color: var(--cq-muted);
  font-size: 1.08rem;
}

.cq-how-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(350px, .78fr);
  gap: clamp(42px, 8vw, 98px);
  align-items: center;
}

.cq-how-steps { display: grid; gap: 10px; }

.cq-how-steps article {
  display: grid;
  grid-template-columns: 58px 1fr;
  gap: 22px;
  align-items: start;
  padding: 25px 22px;
  border: 1px solid var(--cq-line);
  border-radius: 24px;
  background: linear-gradient(145deg, rgba(17,31,58,.72), rgba(8,14,32,.82));
}

.cq-how-steps article > span {
  color: rgba(18,221,234,.52);
  font-size: 1.35rem;
  font-weight: 900;
  letter-spacing: -.05em;
}

.cq-how-steps h3 { margin: 0 0 6px; color: var(--cq-text); font-size: 1.3rem; letter-spacing: -.03em; }
.cq-how-steps p { margin: 0; color: var(--cq-muted); }

.cq-gameplay-shot {
  width: min(100%, 370px);
  margin: 0 auto;
  padding: 10px 10px 0;
  border: 1px solid var(--cq-line);
  border-radius: 48px;
  background: #0c1328;
  box-shadow: 0 34px 70px rgba(0,0,0,.38);
  transform: rotate(1.5deg);
}

.cq-gameplay-shot img {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 5;
  border-radius: 38px 38px 20px 20px;
  object-fit: cover;
  object-position: center 43%;
}

.cq-gameplay-shot figcaption {
  padding: 13px 16px 17px;
  color: var(--cq-muted);
  font-size: .82rem;
  text-align: center;
}

.cq-discovery-section {
  overflow: hidden;
  border-block: 1px solid rgba(246,199,82,.12);
  background:
    radial-gradient(circle at 15% 55%, rgba(246,199,82,.12), transparent 31%),
    linear-gradient(180deg, rgba(14,13,31,.5), rgba(5,7,19,.8));
}

.cq-discovery-grid {
  display: grid;
  grid-template-columns: minmax(330px, .78fr) minmax(0, 1.22fr);
  gap: clamp(54px, 9vw, 118px);
  align-items: center;
}

.cq-discovery-visual {
  position: relative;
  width: min(100%, 380px);
  margin: 0 auto;
  padding: 9px;
  border: 1px solid rgba(246,199,82,.24);
  border-radius: 48px;
  background: #0b1023;
  box-shadow: 0 35px 80px rgba(0,0,0,.45), 0 0 80px rgba(246,199,82,.08);
}

.cq-discovery-visual img {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 5;
  border-radius: 39px;
  object-fit: cover;
  object-position: center 32%;
}

.cq-coin-orbit {
  position: absolute;
  right: -32px;
  top: 34%;
  display: grid;
  width: 74px;
  height: 74px;
  place-items: center;
  border: 1px solid rgba(246,199,82,.5);
  border-radius: 50%;
  background: #171323;
  color: var(--cq-gold);
  box-shadow: 0 0 45px rgba(246,199,82,.24);
  font-size: 2rem;
}

.cq-kicker-gold {
  border-color: rgba(246,199,82,.26);
  background: rgba(246,199,82,.08);
  color: var(--cq-gold);
}

.cq-discovery-copy > p { max-width: 680px; color: var(--cq-muted); font-size: 1.08rem; }

.cq-reward-list { display: grid; gap: 12px; margin-top: 30px; }

.cq-reward-list article {
  display: grid;
  grid-template-columns: 64px 1fr;
  gap: 18px;
  align-items: center;
  padding: 18px;
  border: 1px solid rgba(246,199,82,.13);
  border-radius: 20px;
  background: rgba(12,16,35,.66);
}

.cq-reward-list article > strong { color: var(--cq-gold); font-size: 1.65rem; letter-spacing: -.05em; }
.cq-reward-list h3 { margin: 0 0 3px; color: var(--cq-text); font-size: 1rem; }
.cq-reward-list p { margin: 0; color: var(--cq-muted); font-size: .88rem; }

.cq-worlds-section { background: rgba(7,12,27,.58); }

.cq-world-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
}

.cq-world {
  position: relative;
  min-height: 240px;
  overflow: hidden;
  padding: 24px;
  border: 1px solid var(--cq-line);
  border-radius: 25px;
  background: linear-gradient(145deg, rgba(18,32,58,.82), rgba(8,13,28,.94));
}

.cq-world::after {
  position: absolute;
  right: -55px;
  bottom: -65px;
  width: 150px;
  height: 150px;
  border-radius: 50%;
  background: var(--world-color, var(--cq-cyan));
  content: "";
  filter: blur(45px);
  opacity: .17;
}

.cq-world > span { display: block; margin-bottom: 24px; font-size: 2.2rem; }
.cq-world small { color: var(--cq-muted); font-size: .72rem; font-weight: 850; letter-spacing: .12em; text-transform: uppercase; }
.cq-world h3 { margin: 7px 0 7px; color: var(--cq-text); font-size: 1.22rem; letter-spacing: -.035em; }
.cq-world p { margin: 0; color: var(--cq-muted); font-size: .87rem; }
.cq-world-starter { --world-color: #2de0b2; border-color: rgba(45,224,178,.3); }
.cq-world-smith { --world-color: #ff8b42; }
.cq-world-pony { --world-color: #f5bf64; }
.cq-world-druid { --world-color: #4fe270; }
.cq-world-castle { --world-color: #a279ff; }
.cq-world-water { --world-color: #1ebde8; }
.cq-world-space { --world-color: #6d6eff; }

.cq-gallery-heading { max-width: 780px; margin-bottom: 42px; }

.cq-gallery {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 18px;
}

.cq-gallery figure {
  overflow: hidden;
  margin: 0;
  border: 1px solid var(--cq-line);
  border-radius: 29px;
  background: #0c1328;
  box-shadow: 0 25px 55px rgba(0,0,0,.3);
}

.cq-gallery img {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
}
.cq-gallery figure:nth-child(1) img { object-position: center 43%; }
.cq-gallery figure:nth-child(2) img { object-position: center 37%; }
.cq-gallery figure:nth-child(3) img { object-position: center 43%; }
.cq-gallery figure:nth-child(4) img { object-position: center 32%; }
.cq-gallery figcaption { padding: 15px 17px 17px; color: var(--cq-muted); font-size: .82rem; font-weight: 750; }
.cq-gallery figure:nth-child(2),
.cq-gallery figure:nth-child(4) { transform: translateY(28px); }

.cq-offer-section { padding-top: 140px; }

.cq-offer-card {
  display: grid;
  grid-template-columns: minmax(0, .92fr) minmax(420px, 1.08fr);
  gap: clamp(42px, 7vw, 86px);
  padding: clamp(30px, 6vw, 70px);
  border: 1px solid rgba(18,221,234,.28);
  border-radius: 38px;
  background:
    radial-gradient(circle at 88% 10%, rgba(18,221,234,.14), transparent 32%),
    linear-gradient(135deg, #0c1830, #0a1025 60%, #12112a);
  box-shadow: 0 36px 90px rgba(0,0,0,.4);
}

.cq-offer-copy h2 { font-size: clamp(3rem, 5vw, 5rem); }
.cq-offer-copy p { margin: 20px 0 28px; color: var(--cq-muted); font-size: 1.07rem; }
.cq-store-light { background: #fff; color: #07101b; box-shadow: 0 15px 38px rgba(0,0,0,.2); }
.cq-store-light:hover { background: #dffcff; }

.cq-offer-options { display: grid; gap: 14px; }

.cq-offer-options article {
  padding: 25px;
  border: 1px solid var(--cq-line);
  border-radius: 25px;
  background: rgba(5,8,20,.54);
}

.cq-offer-options article > span { display: block; margin-bottom: 3px; color: var(--cq-muted); font-size: .78rem; font-weight: 800; text-transform: uppercase; }
.cq-offer-options article > strong { color: var(--cq-text); font-size: 2rem; letter-spacing: -.055em; }
.cq-offer-options ul { display: grid; gap: 5px; margin: 13px 0 0; padding: 0; color: var(--cq-muted); list-style: none; }
.cq-offer-options li { margin: 0; }
.cq-offer-options li::before { margin-right: 8px; color: var(--cq-cyan); content: "✓"; }
.cq-offer-premium { border-color: rgba(246,199,82,.25) !important; }
.cq-offer-premium li::before { color: var(--cq-gold); }

.cq-faq-preview { border-top: 1px solid var(--cq-line); }

.cq-faq-grid {
  display: grid;
  grid-template-columns: minmax(0, .75fr) minmax(440px, 1.25fr);
  gap: clamp(45px, 8vw, 100px);
  align-items: start;
}

.cq-faq-preview h2 { font-size: clamp(2.8rem, 4vw, 4.2rem); }
.cq-faq-preview p { color: var(--cq-muted); }
.cq-mini-faq { display: grid; gap: 10px; }

.cq-mini-faq details {
  border: 1px solid var(--cq-line);
  border-radius: 18px;
  background: rgba(12,24,48,.58);
}

.cq-mini-faq summary {
  position: relative;
  padding: 19px 50px 19px 20px;
  color: var(--cq-text);
  font-weight: 800;
  cursor: pointer;
  list-style: none;
}

.cq-mini-faq summary::-webkit-details-marker { display: none; }
.cq-mini-faq summary::after { position: absolute; top: 18px; right: 20px; color: var(--cq-cyan); content: "+"; font-size: 1.35rem; line-height: 1; }
.cq-mini-faq details[open] summary::after { content: "–"; }
.cq-mini-faq p { margin: 0; padding: 0 20px 20px; }

.cq-final-cta {
  padding: 32px 0;
  border-block: 1px solid var(--cq-line);
  background: linear-gradient(90deg, rgba(18,221,234,.12), rgba(72,85,204,.12));
}

.cq-final-cta .container {
  display: flex;
  justify-content: space-between;
  gap: 30px;
  align-items: center;
}

.cq-final-cta .container > div { display: flex; gap: 16px; align-items: center; }
.cq-final-cta img { width: 66px; height: 66px; border-radius: 18px; box-shadow: 0 13px 30px rgba(0,0,0,.28); }
.cq-final-cta span { display: grid; }
.cq-final-cta small { color: var(--cq-muted); }
.cq-final-cta strong { color: var(--cq-text); font-size: 1.35rem; letter-spacing: -.035em; }

.cq-page .footer {
  border-color: var(--cq-line);
  background: #03050d;
  color: var(--cq-muted);
}

.cq-page .footer a { color: var(--cq-muted); }

@media (max-width: 1050px) {
  .cq-hero-grid { grid-template-columns: minmax(0, 1fr) minmax(370px, .8fr); gap: 36px; }
  .cq-device-cluster { min-height: 650px; }
  .cq-badge-stars { left: -2%; }
  .cq-badge-free { right: -2%; }
  .cq-world-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .cq-gallery { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cq-gallery figure:nth-child(2),
  .cq-gallery figure:nth-child(4) { transform: none; }
}

@media (max-width: 850px) {
  .cq-page .container { width: min(100% - 28px, 1180px); }
  .cq-hero-grid,
  .cq-section-heading,
  .cq-how-grid,
  .cq-discovery-grid,
  .cq-offer-card,
  .cq-faq-grid { grid-template-columns: 1fr; }
  .cq-hero-copy { text-align: center; }
  .cq-product-lockup,
  .cq-eyebrow,
  .cq-kicker { margin-inline: auto; }
  .cq-hero-copy > p { margin-inline: auto; }
  .cq-cta-row,
  .cq-trust-list { justify-content: center; }
  .cq-device-cluster { width: min(100%, 560px); min-height: 720px; margin: 0 auto; }
  .cq-section-heading { gap: 18px; }
  .cq-section-heading > p { max-width: 680px; }
  .cq-discovery-visual { order: 2; }
  .cq-discovery-copy { text-align: center; }
  .cq-discovery-copy > p { margin-inline: auto; }
  .cq-reward-list { text-align: left; }
  .cq-offer-card { gap: 34px; }
  .cq-offer-copy { text-align: center; }
  .cq-offer-copy p { max-width: 640px; margin-inline: auto; }
  .cq-faq-grid > div:first-child { text-align: center; }
  .cq-proof-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cq-proof-grid div { padding: 18px; border-bottom: 1px solid var(--cq-line); }
  .cq-proof-grid div:nth-child(2) { border-right: 0; }
  .cq-proof-grid div:nth-child(3),
  .cq-proof-grid div:nth-child(4) { border-bottom: 0; }
}

@media (max-width: 620px) {
  .cq-hero { padding-top: 52px; }
  .cq-hero h1 { font-size: clamp(4rem, 20vw, 6.1rem); }
  .cq-eyebrow { justify-content: center; font-size: .72rem; text-align: center; }
  .cq-device-cluster { min-height: 565px; }
  .cq-phone-main { right: 0; width: 65%; border-width: 6px; border-radius: 34px; }
  .cq-phone-float { left: 0; width: 49%; border-width: 5px; border-radius: 29px; }
  .cq-badge-stars { top: 32%; left: 0; min-width: 112px; padding: 10px 12px; }
  .cq-badge-free { right: 0; bottom: 10%; min-width: 105px; padding: 10px 12px; }
  .cq-section h2,
  .cq-gallery-heading h2 { font-size: clamp(2.55rem, 13vw, 4rem); }
  .cq-how-steps article { grid-template-columns: 42px 1fr; gap: 12px; padding: 20px 16px; }
  .cq-world-grid { grid-template-columns: 1fr; }
  .cq-world { min-height: 0; }
  .cq-gallery { gap: 10px; }
  .cq-gallery figure { border-radius: 20px; }
  .cq-gallery figcaption { padding: 10px 11px 12px; }
  .cq-offer-section { padding-top: 90px; }
  .cq-offer-card { padding: 25px 17px; border-radius: 27px; }
  .cq-offer-options article { padding: 20px 17px; }
  .cq-final-cta .container { flex-direction: column; text-align: center; }
  .cq-final-cta .container > div { flex-direction: column; }
}

@media (max-width: 390px) {
  .cq-store-button { width: 100%; justify-content: center; }
  .cq-device-cluster { min-height: 510px; }
  .cq-float-badge { display: none; }
  .cq-proof-grid strong { font-size: 1.7rem; }
  .cq-proof-grid span { font-size: .76rem; }
}

/* Support hub */
.support-page {
  background:
    radial-gradient(circle at 8% 0%, rgba(95,165,106,.18), transparent 27%),
    radial-gradient(circle at 92% 7%, rgba(68,163,239,.13), transparent 26%),
    #f5f7f3;
}

.support-page .container { width: min(1180px, calc(100% - 40px)); }

.support-main { overflow: clip; }

.support-hero { padding: clamp(58px, 8vw, 96px) 0 58px; }

.support-hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(360px, .7fr);
  gap: clamp(38px, 7vw, 90px);
  align-items: center;
}

.support-kicker {
  display: inline-flex;
  padding: 7px 12px;
  border-radius: 999px;
  background: #e4f2e6;
  color: #397244;
  font-size: .82rem;
  font-weight: 850;
  text-transform: uppercase;
  letter-spacing: .06em;
}

.support-hero h1 {
  max-width: 800px;
  margin: 20px 0 18px;
  font-size: clamp(3.4rem, 7.2vw, 6.5rem);
  line-height: .91;
  letter-spacing: -.075em;
}

.support-hero-grid > div > p {
  max-width: 720px;
  margin: 0;
  color: var(--muted);
  font-size: 1.15rem;
}

.support-contact-card {
  padding: clamp(24px, 4vw, 36px);
  border: 1px solid #d4e1d5;
  border-radius: 30px;
  background: rgba(255,255,255,.9);
  box-shadow: 0 24px 60px rgba(31,36,31,.09);
}

.support-contact-card > span {
  color: var(--accent-dark);
  font-size: .78rem;
  font-weight: 850;
  text-transform: uppercase;
  letter-spacing: .07em;
}

.support-contact-card h2 { margin: 8px 0 13px; font-size: 1.55rem; line-height: 1.1; letter-spacing: -.045em; }
.support-email { display: inline-block; font-size: 1.08rem; font-weight: 850; overflow-wrap: anywhere; }
.support-contact-card p { margin: 15px 0 0; color: var(--muted); font-size: .9rem; }

.support-area {
  padding: 30px 0 100px;
  border-top: 1px solid var(--line);
  background: rgba(255,255,255,.36);
}

.support-layout {
  display: grid;
  grid-template-columns: 220px minmax(0, 1fr);
  gap: clamp(26px, 5vw, 64px);
  align-items: start;
}

.support-sidebar {
  position: sticky;
  top: 98px;
  padding-top: 34px;
}

.support-sidebar nav {
  display: grid;
  gap: 7px;
  padding: 16px;
  border: 1px solid var(--line);
  border-radius: 22px;
  background: rgba(255,255,255,.84);
  box-shadow: 0 12px 35px rgba(31,36,31,.05);
}

.support-sidebar strong { padding: 5px 8px 10px; font-size: .8rem; text-transform: uppercase; letter-spacing: .06em; }

.support-sidebar a {
  display: flex;
  min-height: 46px;
  align-items: center;
  gap: 9px;
  padding: 9px 10px;
  border-radius: 13px;
  color: var(--text);
  font-size: .9rem;
  font-weight: 800;
}

.support-sidebar a:hover { background: #edf4e8; text-decoration: none; }

.support-content { min-width: 0; }

.support-game {
  scroll-margin-top: 90px;
  margin-top: 34px;
  padding: clamp(24px, 4.5vw, 48px);
  border: 1px solid var(--line);
  border-radius: 32px;
  background: rgba(255,255,255,.92);
  box-shadow: 0 20px 55px rgba(31,36,31,.07);
}

.support-game + .support-game { margin-top: 34px; }

.support-game-header {
  display: grid;
  grid-template-columns: 92px 1fr;
  gap: 22px;
  align-items: center;
  padding-bottom: 30px;
  border-bottom: 1px solid var(--line);
}

.support-game-header img {
  width: 92px;
  height: 92px;
  border-radius: 23px;
  box-shadow: 0 15px 35px rgba(31,36,31,.16);
}

.support-game-header span {
  color: var(--accent-dark);
  font-size: .78rem;
  font-weight: 850;
  text-transform: uppercase;
  letter-spacing: .07em;
}

.support-game-header h2 { margin: 4px 0 2px; font-size: clamp(2.1rem, 4vw, 3.5rem); line-height: 1; letter-spacing: -.06em; }
.support-game-header p { margin: 0; color: var(--muted); }

.support-category-nav {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 24px 0 8px;
}

.support-category-nav a {
  display: inline-flex;
  min-height: 40px;
  align-items: center;
  padding: 8px 12px;
  border: 1px solid #d9e5da;
  border-radius: 999px;
  background: #f5faf4;
  color: #335d3a;
  font-size: .82rem;
  font-weight: 800;
}

.support-category-nav a:hover { border-color: #8eb797; text-decoration: none; }

.support-category {
  scroll-margin-top: 96px;
  margin-top: 42px;
}

.support-category-heading {
  display: grid;
  grid-template-columns: 50px 1fr;
  gap: 15px;
  align-items: center;
  margin-bottom: 17px;
}

.support-category-heading > span {
  color: #9eb5a2;
  font-size: 1.25rem;
  font-weight: 900;
  letter-spacing: -.04em;
}

.support-category-heading small {
  color: var(--accent-dark);
  font-size: .72rem;
  font-weight: 850;
  text-transform: uppercase;
  letter-spacing: .07em;
}

.support-category-heading h3 { margin: 1px 0 0; font-size: 1.45rem; letter-spacing: -.04em; }

.faq-list { display: grid; gap: 9px; }
.faq-list details[id] { scroll-margin-top: 96px; }

.faq-list details {
  border: 1px solid #dde4da;
  border-radius: 17px;
  background: #fbfcfa;
}

.faq-list details[open] {
  border-color: #b9d2bd;
  background: #f7fbf6;
  box-shadow: 0 9px 25px rgba(31,36,31,.045);
}

.faq-list summary {
  position: relative;
  padding: 17px 52px 17px 18px;
  color: var(--text);
  font-weight: 820;
  line-height: 1.35;
  cursor: pointer;
  list-style: none;
}

.faq-list summary::-webkit-details-marker { display: none; }

.faq-list summary::after {
  position: absolute;
  top: 50%;
  right: 18px;
  display: grid;
  width: 25px;
  height: 25px;
  place-items: center;
  border-radius: 50%;
  background: #e8f2e7;
  color: var(--accent-dark);
  content: "+";
  font-size: 1.08rem;
  line-height: 1;
  transform: translateY(-50%);
}

.faq-list details[open] summary::after { content: "–"; }

.faq-list details > div {
  padding: 0 50px 18px 18px;
  color: var(--muted);
}

.faq-list p { margin: 0; }

.support-hammer { border-top: 4px solid #d99459; }
.support-hammer .support-game-header span { color: #915328; }
.support-hammer .support-category-nav a {
  border-color: #ecd5c2;
  background: #fff7f0;
  color: #915328;
}
.support-hammer .support-category-nav a:hover { border-color: #d99459; }
.support-hammer .support-category-heading > span { color: #d9ad88; }
.support-hammer .support-category-heading small { color: #915328; }
.support-hammer .faq-list details[open] {
  border-color: #e4c5aa;
  background: #fffaf5;
}
.support-hammer .faq-list summary::after {
  background: #faeadc;
  color: #915328;
}
.support-puzzli { border-top: 4px solid #5bb4e8; }
.support-puzzli .support-game-header span { color: #1165a2; }
.support-puzzli .support-category-nav a {
  border-color: #cce7f6;
  background: #f1faff;
  color: #1165a2;
}
.support-puzzli .support-category-nav a:hover { border-color: #73bce3; }
.support-puzzli .support-category-heading > span { color: #9bcce5; }
.support-puzzli .support-category-heading small { color: #1165a2; }
.support-puzzli .faq-list details[open] {
  border-color: #b8dced;
  background: #f6fcff;
}
.support-puzzli .faq-list summary::after {
  background: #e2f4fd;
  color: #1165a2;
}

.faq-guide {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(12px, 2.5vw, 20px);
  margin-top: 20px;
}

.faq-guide-step {
  min-width: 0;
  margin: 0;
  overflow: hidden;
  border: 1px solid #cfe1eb;
  border-radius: 22px;
  background: white;
  box-shadow: 0 12px 28px rgba(17,101,162,.09);
}

.faq-guide-step img {
  display: block;
  width: 100%;
  height: auto;
  border-bottom: 1px solid #dce9ef;
  background: #f0f2f7;
}

.faq-guide-step figcaption {
  padding: 13px 15px 15px;
  color: #56666f;
  font-size: .86rem;
  line-height: 1.45;
}

.faq-guide-step figcaption strong {
  display: block;
  margin-bottom: 2px;
  color: #164f73;
}

.faq-list .faq-note {
  margin-top: 16px;
  padding: 13px 15px;
  border-radius: 13px;
  background: #eaf7fd;
  color: #365f75;
  font-size: .9rem;
}
.support-general { border-top: 4px solid #6e7b70; }

.support-general-header { grid-template-columns: 92px 1fr; }

.support-general-icon {
  display: grid;
  width: 92px;
  height: 92px;
  place-items: center;
  border-radius: 23px;
  background: linear-gradient(135deg, #253229, #607366);
  color: white !important;
  box-shadow: 0 15px 35px rgba(31,36,31,.16);
  font-size: 2.5rem !important;
  font-weight: 900;
}

.support-closing {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 32px;
  align-items: center;
  margin-top: 34px;
  padding: clamp(28px, 5vw, 48px);
  border-radius: 30px;
  background: linear-gradient(135deg, #202a23, #334b3a);
  color: white;
  box-shadow: 0 22px 58px rgba(31,36,31,.16);
}

.support-closing span { color: #bfe8c6; font-weight: 850; }
.support-closing h2 { margin: 6px 0; color: white; font-size: clamp(1.9rem, 3.6vw, 3rem); line-height: 1; letter-spacing: -.055em; }
.support-closing p { max-width: 670px; margin: 0; color: rgba(255,255,255,.72); }
.support-closing .button { background: white; color: #243129; white-space: nowrap; }

@media (max-width: 960px) {
  .support-hero-grid { grid-template-columns: 1fr; }
  .support-contact-card { max-width: 700px; }
  .support-layout { grid-template-columns: 1fr; }
  .support-sidebar { position: static; padding-top: 24px; }
  .support-sidebar nav { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .support-sidebar strong { grid-column: 1 / -1; }
  .support-sidebar a { justify-content: center; }
}

@media (max-width: 700px) {
  .support-page .container { width: min(100% - 24px, 1180px); }
  .support-hero { padding-top: 42px; }
  .support-hero h1 { font-size: clamp(3.15rem, 15vw, 5rem); }
  .support-sidebar nav { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .support-game { padding: 22px 15px; border-radius: 24px; }
  .support-game-header { grid-template-columns: 68px 1fr; gap: 14px; }
  .support-game-header img,
  .support-general-icon { width: 68px; height: 68px; border-radius: 18px; }
  .support-general-icon { font-size: 2rem !important; }
  .support-game-header h2 { font-size: 2.15rem; }
  .support-category-heading { grid-template-columns: 38px 1fr; gap: 9px; }
  .support-category-heading h3 { font-size: 1.25rem; }
  .faq-list summary { padding: 16px 46px 16px 14px; }
  .faq-list details > div { padding: 0 14px 16px; }
  .faq-guide { grid-template-columns: 1fr; }
  .faq-guide-step { width: min(100%, 390px); justify-self: center; }
  .support-closing { grid-template-columns: 1fr; }
  .support-closing .button { justify-self: start; }
}

@media (max-width: 430px) {
  .support-sidebar nav { grid-template-columns: 1fr; }
  .support-sidebar strong { grid-column: auto; }
  .support-sidebar a { justify-content: flex-start; }
  .support-category-nav { display: grid; grid-template-columns: 1fr 1fr; }
  .support-category-nav a { justify-content: center; text-align: center; }
}

/* Keep all three home-page games visually equal at every breakpoint. */
@media (max-width: 1050px) and (min-width: 841px) {
  .home-game-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .home-puzzli-card {
    grid-column: auto;
    display: flex;
    grid-template-columns: none;
  }
}

@media (max-width: 840px) {
  .home-game-grid { grid-template-columns: 1fr; }
  .home-puzzli-card {
    grid-column: auto;
    display: flex;
    grid-template-columns: none;
  }
}

/* Homepage game posters: equal prominence, distinct worlds. */
.home-poster-card {
  --poster-accent: #20bfc8;
  --poster-soft: #e4f8f7;
  border-color: rgba(31, 36, 31, .1);
  border-radius: 28px;
  background: #fff;
  box-shadow: 0 20px 56px rgba(31, 36, 31, .1);
}

.home-hammer-card {
  --poster-accent: #e86f32;
  --poster-soft: #fff0e7;
}

.home-puzzli-card {
  --poster-accent: #168bd0;
  --poster-soft: #e3f5ff;
}

.home-game-poster {
  position: relative;
  display: block;
  height: clamp(245px, 24vw, 315px);
  overflow: hidden;
  background: #172021;
}

.home-game-cover {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: scale(1.015);
  transition: transform .55s cubic-bezier(.2,.65,.3,1);
}

.home-crate-card .home-game-cover { object-position: center 49%; }
.home-hammer-card .home-game-cover { object-position: center 45%; }
.home-puzzli-card .home-game-cover { object-position: center 48%; }

.home-poster-card:hover .home-game-cover { transform: scale(1.055); }

.home-poster-shade {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, rgba(4, 11, 15, .05) 35%, rgba(4, 11, 15, .72) 100%),
    linear-gradient(90deg, rgba(4, 11, 15, .16), transparent 48%);
  pointer-events: none;
}

.home-game-index {
  position: absolute;
  top: 16px;
  right: 16px;
  display: grid;
  width: 44px;
  height: 44px;
  place-items: center;
  border: 1px solid rgba(255, 255, 255, .42);
  border-radius: 50%;
  background: rgba(12, 18, 19, .38);
  color: #fff;
  font-size: .82rem;
  font-weight: 900;
  letter-spacing: .06em;
  backdrop-filter: blur(10px);
}

.home-game-icon-chip {
  position: absolute;
  left: 16px;
  bottom: 16px;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 7px 12px 7px 7px;
  border: 1px solid rgba(255, 255, 255, .36);
  border-radius: 16px;
  background: rgba(11, 17, 18, .62);
  color: #fff;
  font-size: .8rem;
  font-weight: 850;
  backdrop-filter: blur(12px);
}

.home-game-icon-chip img {
  width: 38px;
  height: 38px;
  border-radius: 10px;
  object-fit: cover;
  box-shadow: 0 5px 16px rgba(0, 0, 0, .25);
}

.home-poster-card .home-game-content {
  align-items: stretch;
  padding: 23px 23px 21px;
}

.home-poster-card .home-game-meta span {
  background: var(--poster-soft);
  color: color-mix(in srgb, var(--poster-accent) 76%, #15211e);
}

.home-poster-card .home-game-content h3 {
  margin: 14px 0 7px;
  font-size: clamp(1.7rem, 2.3vw, 2rem);
}

.home-poster-card .home-game-content > p {
  min-height: 3.25em;
  font-size: .97rem;
  line-height: 1.62;
}

.home-game-facts {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 7px;
  margin: 20px 0;
}

.home-game-facts > span {
  display: flex;
  min-width: 0;
  min-height: 66px;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 8px 4px;
  border: 1px solid color-mix(in srgb, var(--poster-accent) 16%, transparent);
  border-radius: 14px;
  background: color-mix(in srgb, var(--poster-soft) 68%, #fff);
  text-align: center;
}

.home-game-facts strong {
  color: var(--poster-accent);
  font-size: 1.1rem;
  line-height: 1;
}

.home-game-facts small {
  margin-top: 5px;
  color: #667069;
  font-size: .68rem;
  font-weight: 800;
  line-height: 1.1;
}

.home-poster-card .home-card-link {
  margin-top: auto;
  padding-top: 17px;
}

.home-poster-card .home-card-link > span {
  display: inline;
  width: auto;
  height: auto;
  border-radius: 0;
  background: transparent;
  color: var(--text);
}

.home-poster-card .home-card-link > b {
  display: grid;
  width: 36px;
  height: 36px;
  flex: 0 0 36px;
  place-items: center;
  border-radius: 50%;
  background: var(--poster-soft);
  color: var(--poster-accent);
  font-size: 1.05rem;
  transition: transform .2s ease, background .2s ease;
}

.home-poster-card .home-card-link:hover > b {
  transform: translateX(3px);
  background: color-mix(in srgb, var(--poster-accent) 18%, #fff);
}

@media (max-width: 1050px) and (min-width: 841px) {
  .home-game-grid { gap: 14px; }
  .home-game-poster { height: 230px; }
  .home-poster-card .home-game-content { padding: 19px 17px 18px; }
  .home-poster-card .home-game-content h3 { font-size: 1.55rem; }
  .home-poster-card .home-game-content > p { font-size: .88rem; }
  .home-game-facts { gap: 5px; margin: 16px 0; }
  .home-game-facts > span { min-height: 61px; }
  .home-poster-card .home-card-link { font-size: .83rem; }
}

@media (max-width: 840px) {
  .home-poster-card { width: min(100%, 620px); margin-inline: auto; }
  .home-game-poster { height: clamp(280px, 67vw, 380px); }
  .home-poster-card .home-game-content > p { min-height: 0; }
}

@media (max-width: 480px) {
  .home-game-poster { height: 260px; }
  .home-poster-card .home-game-content { padding: 20px 18px 18px; }
  .home-game-icon-chip { left: 12px; bottom: 12px; }
  .home-game-index { top: 12px; right: 12px; }
}

/* 2026 responsive navigation, support discovery and accessibility refinements */
html { scroll-padding-top: 84px; }

.nav-toggle {
  display: none;
  min-width: 48px;
  min-height: 44px;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 8px 13px;
  border: 1px solid rgba(95, 107, 97, .24);
  border-radius: 14px;
  background: rgba(255,255,255,.72);
  color: inherit;
  font: inherit;
  font-size: .9rem;
  font-weight: 850;
  cursor: pointer;
}

.nav-toggle > span:first-child { font-size: 1.15rem; line-height: 1; }

.nav-links > a { min-height: 44px; position: relative; }

.nav-links > a[aria-current="page"]::after {
  position: absolute;
  right: 0;
  bottom: 4px;
  left: 0;
  height: 2px;
  border-radius: 999px;
  background: currentColor;
  content: "";
  opacity: .72;
}

.language-switch { padding: 0 4px; gap: 0; }

.language-switch a {
  display: grid;
  min-width: 44px;
  min-height: 44px;
  place-items: center;
  border-radius: 999px;
}

.cq-page .nav > .container,
.cq-page .footer > .container,
.support-page .nav > .container,
.support-page .footer > .container {
  width: min(1080px, calc(100% - 32px));
}

:where(a, button, summary):focus-visible { outline-color: #145f73; }
.cq-page :where(a, button, summary):focus-visible,
.hammer-page :where(a, button, summary):focus-visible { outline-color: #16d9e8; }

:where(.page-card, .privacy-section, .faq-list details > div, .support-contact-card) p a:not(.button) {
  text-decoration: underline;
  text-decoration-thickness: .08em;
  text-underline-offset: .16em;
}

.hammer-nav .language-switch,
.cq-page .language-switch {
  border-color: rgba(143, 220, 255, .24);
  background: rgba(3, 14, 28, .82);
}

.hammer-nav .language-switch a,
.cq-page .language-switch a { color: #b8cadb; }

.hammer-nav .language-switch a[aria-current="page"],
.cq-page .language-switch a[aria-current="page"] { color: #fff; }

.hammer-page .ht-primary { color: #031522; }
.hammer-page .ht-screen-label { color: #032033; }

.home-game-facts small { font-size: .75rem; }

.support-discovery { padding: 18px 0 22px; }

.support-tools {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(340px, .85fr);
  gap: 26px clamp(28px, 6vw, 72px);
  align-items: end;
  padding: clamp(26px, 4vw, 42px);
  border: 1px solid #d4e1d5;
  border-radius: 32px;
  background: linear-gradient(135deg, rgba(255,255,255,.96), rgba(231,243,232,.9));
  box-shadow: 0 22px 58px rgba(31,36,31,.08);
}

.support-tools-copy > span {
  color: var(--accent-dark);
  font-size: .76rem;
  font-weight: 900;
  letter-spacing: .07em;
  text-transform: uppercase;
}

.support-tools-copy h2 {
  margin: 8px 0 9px;
  font-size: clamp(2rem, 4vw, 3.35rem);
  line-height: .98;
  letter-spacing: -.055em;
}

.support-tools-copy p { margin: 0; color: var(--muted); }

.support-search-field label {
  display: block;
  margin-bottom: 8px;
  font-size: .86rem;
  font-weight: 850;
}

.support-search-field > div { position: relative; }

.support-search-field input {
  width: 100%;
  min-height: 58px;
  padding: 13px 52px 13px 17px;
  border: 1px solid #bfcfc1;
  border-radius: 17px;
  background: #fff;
  color: var(--text);
  font: inherit;
  font-size: 1rem;
  box-shadow: inset 0 1px 2px rgba(31,36,31,.04);
}

.support-search-field input::placeholder { color: #748078; opacity: 1; }
.support-search-field input::-webkit-search-cancel-button { display: none; }

.support-search-field button {
  position: absolute;
  top: 7px;
  right: 7px;
  width: 44px;
  height: 44px;
  border: 0;
  border-radius: 13px;
  background: #edf4e8;
  color: #315a38;
  font-size: 1.45rem;
  cursor: pointer;
}

.support-filters {
  display: flex;
  grid-column: 1 / -1;
  flex-wrap: wrap;
  gap: 8px;
}

.support-filters button {
  min-height: 44px;
  padding: 9px 14px;
  border: 1px solid #ccd9cd;
  border-radius: 999px;
  background: rgba(255,255,255,.82);
  color: #36523b;
  font: inherit;
  font-size: .84rem;
  font-weight: 850;
  cursor: pointer;
}

.support-filters button:hover { border-color: #7fa888; background: #fff; }

.support-filters button.is-active {
  border-color: #3f7d4b;
  background: #315f3a;
  color: #fff;
  box-shadow: 0 8px 20px rgba(49,95,58,.18);
}

.support-results {
  grid-column: 1 / -1;
  margin: -8px 0 0;
  color: #526158;
  font-size: .86rem;
  font-weight: 800;
}

.support-results.is-empty { color: #8b3e34; }

[data-support-game][hidden],
.support-category[hidden],
.support-category-nav[hidden],
.faq-list details[hidden] { display: none !important; }

@media (max-width: 900px) {
  .section-heading {
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
  }

  .section-heading .section-intro { margin: 0; }
  .support-tools { grid-template-columns: 1fr; align-items: stretch; }
}

@media (max-width: 820px) {
  html { scroll-padding-top: 82px; }

  .nav .nav-inner {
    display: grid;
    min-height: 66px;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 8px 12px;
    align-items: center;
    padding: 9px 0;
  }

  .nav .brand { margin: 0; }
  .nav.nav-enhanced .nav-toggle { display: inline-flex; }

  .nav .nav-links {
    width: 100%;
    grid-column: 1 / -1;
  }

  .nav.nav-enhanced .nav-links[hidden] { display: none; }

  .nav.nav-enhanced.nav-open .nav-links {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 4px 8px;
    padding: 4px 0 8px;
    font-size: .92rem;
  }

  .nav.nav-enhanced.nav-open .nav-links > a {
    min-height: 44px;
    justify-content: flex-start;
    padding: 0 8px;
    border-radius: 10px;
  }

  .nav.nav-enhanced.nav-open .language-switch {
    grid-column: 1 / -1;
    justify-self: start;
  }

  .cq-page .nav > .container,
  .cq-page .footer > .container,
  .support-page .nav > .container,
  .support-page .footer > .container {
    width: min(100% - 28px, 1080px);
  }
}

@media (max-width: 620px) {
  .cq-page main { overflow-x: clip; }
  .cq-gameplay-shot { transform: none; }
  .support-tools { padding: 23px 17px; border-radius: 24px; }
  .support-filters { display: grid; grid-template-columns: 1fr 1fr; }
  .support-filters button { padding-inline: 10px; }
}

@media (max-width: 420px) {
  .nav-toggle { padding-inline: 11px; }
  .support-filters { grid-template-columns: 1fr; }
}

/* Preserve intrinsic image proportions when HTML dimensions are present. */
.ht-phone,
.ht-app-icon,
.ht-screen-card img,
.ht-result-phone img,
.ht-final-icon,
.cq-gameplay-shot img,
.cq-discovery-visual img,
.cq-gallery img,
.puzzli-promise img {
  height: auto;
}