/* ==========================================================================
   Sajiloplay - written from scratch, August 2026.

   Replaces the scraped WordPress mirror that was serving an EtherHiding loader
   injected into the original (compromised) site. No markup or CSS is copied
   from that mirror. The design was matched by rendering the original in a
   locked-down sandbox and reading its own inline colour declarations, the way
   you would work from a photograph.

   Colours are the brand's own, taken from the original's inline styles:
     #100A2E  hero background
     #090329  deeper section background
     #32F532  signal green accent
   Cards in the "why" row are white with a magenta border, which is the
   original's most distinctive feature and the thing the first rebuild got
   wrong by making everything dark.
   ========================================================================== */

:root {
  --hero-bg: #100a2e;
  --bg: #1a1440;
  --bg-deep: #090329;
  --accent: #32f532;
  --accent-dark: #24c724;
  /* The hero headline is gold, not green. Taken from the original's computed
     style: rgb(254, 199, 83). The green is the button/CTA colour; using it for
     the headline was the first rebuild's most visible mistake. */
  --gold: #fec753;
  --magenta: #ff2e8b;
  --text: #ffffff;
  --muted: #b9b4d4;
  --muted-2: #8a84a8;
  --ink: #100a2e;
  --line: rgba(255, 255, 255, 0.1);
  --radius: 14px;
  --wrap: 1180px;
  --font: "Poppins", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  /* Header height is referenced by the mobile menu (which hangs off the bottom
     of the header) and by scroll-margin on anchor targets, so it lives here
     rather than being written as a literal in three places that drift apart. */
  --header-h: 76px;
  --logo-h: 50px;
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font);
  font-size: 16px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-decoration: none; }
h1, h2, h3 { line-height: 1.15; margin: 0 0 .5em; font-weight: 800; overflow-wrap: break-word; }
p { margin: 0 0 1em; }

/* The header is sticky, so anything jumped to by id has to clear it. */
[id] { scroll-margin-top: calc(var(--header-h) + 14px); }

.wrap { width: 100%; max-width: var(--wrap); margin: 0 auto; padding: 0 20px; }

.skip { position: absolute; left: -9999px; top: 0; background: var(--accent); color: #04121a; padding: 10px 16px; font-weight: 600; z-index: 100; }
.skip:focus { left: 8px; top: 8px; }
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}
:focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; }

/* --------------------------------------------------------------- buttons */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 13px 30px;
  border-radius: 999px;
  font-weight: 700;
  font-size: .95rem;
  text-transform: capitalize;
  border: 1px solid transparent;
  transition: transform .15s ease, background-color .15s ease;
  cursor: pointer;
}
.btn-accent { background: var(--accent); color: #06210a; box-shadow: 0 10px 26px rgba(50, 245, 50, .25); }
.btn-accent:hover { background: var(--accent-dark); transform: translateY(-2px); }
.btn-lg { padding: 15px 36px; font-size: 1rem; }

/* ---------------------------------------------------------------- header */
.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(16, 10, 46, .94);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--line);
}
.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  min-height: var(--header-h);
}
/* The logo is a stacked lockup (mark above wordmark) so it is constrained by
   HEIGHT, not width. Sized by width it grew taller than the bar and sat on the
   header's bottom border. */
.brand { display: flex; align-items: center; }
.brand img { height: var(--logo-h); width: auto; max-width: 140px; object-fit: contain; }

.site-nav { display: flex; align-items: center; gap: 30px; }
.site-nav ul { display: flex; align-items: center; gap: 30px; list-style: none; margin: 0; padding: 0; }
.site-nav a { font-size: .92rem; color: var(--text); font-weight: 500; }
.site-nav a:hover { color: var(--accent); }

.nav-toggle {
  display: none; flex-direction: column; justify-content: center; gap: 5px;
  width: 44px; height: 44px; padding: 0 10px;
  background: none; border: 1px solid var(--line); border-radius: 10px;
}
.nav-toggle span { display: block; height: 2px; background: var(--text); border-radius: 2px; transition: transform .2s ease, opacity .2s ease; }
.nav-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* ------------------------------------------------------------------ hero */
/* The hero photograph is the original's own. The archived homepage (7 June 2026,
   and the 21 April one before it) puts Banner-3.jpg on the hero container with
   background-size:cover, then covers it with a #100A2E layer at 0.84 opacity -
   which is why the hero reads as flat #100A2E unless you look for the image.
   Reproduced at the same opacity: dropping the overlay would change the design,
   not restore it. Base colour under the photo is the original's #221C3E.
   The file is a reused raster from the old install; rasters cannot execute. */
.hero {
  padding: 70px 0 90px;
  background:
    radial-gradient(760px 460px at 82% 24%, rgba(50, 245, 50, .1), transparent 62%),
    radial-gradient(680px 420px at 6% 0%, rgba(120, 60, 255, .2), transparent 64%),
    linear-gradient(rgba(16, 10, 46, .84), rgba(16, 10, 46, .84)),
    url("/assets/img/hero-bg.jpg") center center / cover no-repeat,
    #221c3e;
  overflow: hidden;
}
.hero-inner { display: grid; grid-template-columns: 1.08fr .92fr; gap: 44px; align-items: center; }

/* Sizes below are the original's computed values at a 1440px viewport:
   h3 48px/700 italic white, h2 65px/700 italic gold. */
.eyebrow {
  font-size: clamp(1.5rem, 3.3vw, 3rem);
  font-weight: 700;
  font-style: italic;
  text-transform: uppercase;
  letter-spacing: .01em;
  color: var(--text);
  margin-bottom: .1em;
}
.hero-title {
  font-size: clamp(2.2rem, 4.5vw, 4.06rem);
  font-weight: 700;
  font-style: italic;
  text-transform: uppercase;
  letter-spacing: -.005em;
  color: var(--gold);
  margin-bottom: .45em;
}

/* Replaces the fabricated stat row. Statements about how the product works,
   which need no numbers to stand up. */
.hero-points { list-style: none; margin: 0 0 32px; padding: 0; display: grid; gap: 10px; }
.hero-points li {
  position: relative;
  padding-left: 26px;
  font-size: .97rem;
  color: var(--muted);
}
.hero-points li::before {
  content: "";
  position: absolute;
  left: 0;
  top: .62em;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 0 4px rgba(50, 245, 50, .16);
}

.hero-actions { display: flex; align-items: center; gap: 22px; flex-wrap: wrap; }
.qr { display: flex; align-items: center; gap: 11px; font-size: .78rem; color: var(--muted-2); }
.qr img { border-radius: 8px; width: 68px; height: 68px; }

.hero-art { position: relative; display: flex; justify-content: center; }
.hero-art img { width: min(100%, 400px); filter: drop-shadow(0 28px 56px rgba(0, 0, 0, .55)); }
.hero-coin {
  position: absolute;
  right: 4%;
  bottom: 8%;
  width: 96px !important;
  filter: drop-shadow(0 10px 22px rgba(0, 0, 0, .45));
}

/* -------------------------------------------------------------- sections */
.section { padding: 78px 0; }
.section-deep { background: var(--bg-deep); }
/* Original section headings compute to 48px / 700 / italic / white, centred. */
.section-title {
  font-size: clamp(1.6rem, 3.3vw, 3rem);
  font-weight: 700;
  font-style: italic;
  text-transform: uppercase;
  text-align: center;
  letter-spacing: .01em;
  margin-bottom: 1.1em;
}

/* ----------------------------------------------------------------- games */
.games { background: var(--bg); }
.game-rail {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(300px, 1fr);
  gap: 22px;
  list-style: none;
  margin: 0;
  padding: 0 0 14px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: thin;
  scrollbar-color: rgba(255, 255, 255, .25) transparent;
}
.game-rail::-webkit-scrollbar { height: 6px; }
.game-rail::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, .22); border-radius: 99px; }

.game-tile { scroll-snap-align: center; text-align: center; }
.game-tile img {
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  border-radius: 18px;
  /* The original frames each game in a thin warm outline inset from the edge. */
  border: 1px solid rgba(255, 214, 170, .55);
  outline: 6px solid rgba(255, 255, 255, .04);
  outline-offset: -14px;
  box-shadow: 0 16px 40px rgba(0, 0, 0, .45);
}
.game-tile span {
  display: block;
  margin-top: 14px;
  font-weight: 700;
  font-style: italic;
  text-transform: uppercase;
  letter-spacing: .04em;
  font-size: .95rem;
}

/* ------------------------------------------------------------------- why */
.why-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 26px;
  list-style: none;
  margin: 0;
  padding: 0;
}
.why-card {
  background: #ffffff;
  color: var(--ink);
  border: 2px solid var(--magenta);
  border-radius: var(--radius);
  padding: 22px 20px 20px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  box-shadow: 0 14px 34px rgba(0, 0, 0, .3);
}
.why-card h3 {
  font-size: 1rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .01em;
  color: var(--ink);
  margin: 0;
  line-height: 1.3;
}
.why-card img {
  width: 100%;
  border-radius: 8px;
  object-fit: cover;
  aspect-ratio: 16 / 10;
  margin-top: auto;
}

/* ----------------------------------------------------------------- steps */
.steps {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 26px;
  list-style: none;
  margin: 0;
  padding: 0;
  counter-reset: step;
}
.steps li {
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 28px 24px;
}
.step-n {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: var(--accent);
  color: #06210a;
  font-weight: 800;
  font-size: 1.05rem;
  margin-bottom: 14px;
}
.steps h3 { font-size: 1.05rem; text-transform: uppercase; font-style: italic; margin-bottom: .35em; }
.steps p { color: var(--muted); font-size: .93rem; margin: 0; }

/* ---------------------------------------------------------- floating QR */
.floating-qr {
  position: fixed;
  /* The dismiss button overhangs this box by 10px, so the offset has to leave
     room for it or the cross ends up half off-screen. */
  right: 26px;
  bottom: 26px;
  z-index: 60;
}
.floating-qr a {
  position: relative;
  /* Paints under the dismiss button. The panel declares backdrop-filter, which
     makes it a stacking context, so in document order it was painting OVER the
     button that precedes it and swallowing most of the cross. */
  z-index: 1;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 16px 10px 10px;
  background: rgba(9, 3, 41, .92);
  border: 1px solid var(--line);
  border-radius: 14px;
  backdrop-filter: blur(8px);
  box-shadow: 0 14px 34px rgba(0, 0, 0, .45);
  transition: transform .15s ease, border-color .15s ease;
}
.floating-qr a:hover { transform: translateY(-2px); border-color: rgba(50, 245, 50, .5); }
.floating-qr img { width: 76px; height: 76px; border-radius: 8px; }
.floating-qr span {
  font-weight: 700;
  font-size: .9rem;
  line-height: 1.25;
  color: var(--text);
}

/* Dismiss control. The panel sits over the bottom-right corner of every page,
   so anyone reading content underneath needs a way to get rid of it. The choice
   is remembered, because having to close it again on every page is worse than
   the panel itself. */
.qr-close {
  position: absolute;
  z-index: 2;
  top: -10px;
  right: -10px;
  width: 28px;
  height: 28px;
  padding: 0;
  border: 2px solid var(--bg-deep);
  border-radius: 50%;
  background: #ffffff;
  color: var(--ink);
  font-size: 18px;
  font-weight: 700;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 12px rgba(0, 0, 0, .5);
  transition: background-color .15s ease, color .15s ease, transform .15s ease;
}
.qr-close:hover { background: var(--magenta); color: #fff; transform: scale(1.08); }
.floating-qr[hidden] { display: none; }

/* Once dismissed, a small tab stays put so the panel can be brought back. */
.qr-restore {
  position: fixed;
  right: 0;
  bottom: 22px;
  z-index: 60;
  padding: 9px 14px 9px 12px;
  border: 1px solid var(--line);
  border-right: 0;
  border-radius: 10px 0 0 10px;
  background: rgba(9, 3, 41, .92);
  backdrop-filter: blur(8px);
  color: var(--text);
  font-family: inherit;
  font-size: .8rem;
  font-weight: 600;
  cursor: pointer;
}
.qr-restore:hover { color: var(--accent); }

/* ------------------------------------------------------------------- cta */
.cta { padding: 66px 0; background: var(--hero-bg); border-top: 1px solid var(--line); }
.cta-inner { text-align: center; }
.cta h2 { font-size: clamp(1.6rem, 3.2vw, 2.2rem); font-style: italic; text-transform: uppercase; margin-bottom: .8em; }

/* ---------------------------------------------------------------- footer
   Four columns: what the product is, the games, the site, and support. The
   previous single row put the brand, two links and an address on one line, so
   at narrow widths it wrapped into an unreadable stack of unrelated items with
   nothing labelling what was what. */
.site-footer { background: var(--bg-deep); border-top: 1px solid var(--line); }
.footer-grid {
  display: grid;
  grid-template-columns: minmax(240px, 1.5fr) repeat(3, minmax(150px, 1fr));
  gap: 34px 30px;
  padding: 52px 20px 44px;
  align-items: start;
}
.footer-brand { display: inline-flex; margin-bottom: 16px; }
.footer-brand img { height: 54px; width: auto; }
.footer-about p { color: var(--muted); font-size: .89rem; max-width: 30em; margin-bottom: 18px; }
.footer-about .btn { padding: 11px 24px; font-size: .88rem; }

.footer-col h2 {
  font-size: .78rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .12em;
  color: var(--muted-2);
  margin: 0 0 14px;
}
.footer-col ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 9px; }
.footer-col li { font-size: .89rem; color: var(--muted); }
.footer-col ul a { color: var(--muted); }
.footer-col ul a:hover { color: var(--accent); }
.footer-contact a[href^="mailto"] { color: var(--accent); font-weight: 600; }
.footer-contact a[href^="mailto"]:hover { text-decoration: underline; }
.footer-contact address { font-style: normal; color: var(--muted-2); font-size: .84rem; line-height: 1.5; }

.copyright { background: #06021c; padding: 15px 0; }
.copyright-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px 24px;
  flex-wrap: wrap;
}
.copyright p { margin: 0; font-size: .8rem; color: var(--muted-2); }
.age-note { display: inline-flex; align-items: center; gap: 8px; }
.age-note b {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 30px;
  padding: 1px 6px;
  border: 1px solid var(--muted-2);
  border-radius: 999px;
  font-size: .72rem;
  color: var(--text);
}
.age-note a { color: var(--muted); text-decoration: underline; }
.age-note a:hover { color: var(--accent); }

/* ------------------------------------------------------- nav dropdown */
.site-nav .has-sub { position: relative; }
.site-nav .sub {
  position: absolute;
  top: 100%;
  left: -14px;
  min-width: 200px;
  flex-direction: column;
  align-items: stretch;
  gap: 0;
  padding: 8px 0;
  background: #ffffff;
  border-radius: 8px;
  box-shadow: 0 18px 40px rgba(0, 0, 0, .45);
  display: none;
}
.site-nav .has-sub:hover > .sub,
.site-nav .has-sub:focus-within > .sub { display: flex; }
.site-nav .sub a {
  display: block;
  padding: 10px 20px;
  color: var(--ink);
  font-size: .92rem;
  font-weight: 500;
}
.site-nav .sub a:hover { background: rgba(16, 10, 46, .07); color: var(--ink); }

/* The original marks the Games item with a chevron, and rotates it when open. */
.site-nav .has-sub > a::after {
  content: "";
  display: inline-block;
  width: .45em;
  height: .45em;
  margin-left: .5em;
  vertical-align: .12em;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(45deg);
  transition: transform .18s ease;
}
.site-nav .has-sub:hover > a::after,
.site-nav .has-sub:focus-within > a::after { transform: rotate(-135deg); }

/* ---------------------------------------------------- language picker */
.lang-select {
  appearance: none;
  background: #ffffff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath fill='%23100a2e' d='M1 1l5 5 5-5'/%3E%3C/svg%3E") no-repeat right 12px center;
  background-size: 11px;
  border: 1px solid rgba(0, 0, 0, .18);
  border-radius: 4px;
  color: var(--ink);
  font-family: inherit;
  font-size: .9rem;
  padding: 8px 34px 8px 12px;
  cursor: pointer;
}
.lang-select:hover { border-color: rgba(0, 0, 0, .35); }

/* ------------------------------------------------------- join steps */
.join-steps {
  list-style: none;
  margin: 0 0 1.6em;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 22px;
  counter-reset: join;
}
.join-steps li {
  background: var(--bg-deep);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 20px 18px 22px;
  text-align: center;
}
.join-steps .step-n {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--accent);
  color: #06210a;
  font-weight: 800;
  font-size: .95rem;
  margin-bottom: 14px;
}
.join-steps img {
  width: 100%;
  max-width: 190px;
  margin: 0 auto 14px;
  border-radius: 12px;
  border: 1px solid var(--line);
}
.join-steps p { color: var(--muted); font-size: .9rem; margin: 0; }

/* --------------------------------------------------- interior pages */
.page { padding: 0 0 84px; background: var(--bg); }

/* Interior pages opened with the same photographed band as the homepage hero -
   Banner-3.jpg on the game pages, a second image on the blog - so the band is
   restored here rather than being a plain rule under the title. */
.page-band {
  padding: 52px 0 48px;
  margin-bottom: 40px;
  border-bottom: 1px solid var(--line);
  background:
    linear-gradient(rgba(16, 10, 46, .82), rgba(16, 10, 46, .82)),
    url("/assets/img/hero-bg.jpg") center center / cover no-repeat,
    #221c3e;
}
.page-band.band-blog {
  background:
    linear-gradient(rgba(16, 10, 46, .82), rgba(16, 10, 46, .82)),
    url("/assets/img/band-blog.jpg") center center / cover no-repeat,
    #221c3e;
}
/* The article and the legal pages carried no band image in the archive. */
.page-band.band-plain { background: var(--bg-deep); }
.page-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 36px;
}
.page-head h1 {
  font-size: clamp(1.8rem, 4vw, 3rem);
  font-style: italic;
  text-transform: uppercase;
  font-weight: 700;
  margin-bottom: .3em;
}
.page-head > div > p { color: var(--muted); max-width: 46em; margin-bottom: 1.2em; }
.page-hero-art {
  width: 220px;
  border-radius: 18px;
  border: 1px solid rgba(255, 214, 170, .5);
  box-shadow: 0 16px 40px rgba(0, 0, 0, .45);
  flex-shrink: 0;
}

.page-body { max-width: 860px; }
.page-body h2 {
  font-size: 1.3rem;
  font-style: italic;
  text-transform: uppercase;
  margin: 2em 0 .5em;
  color: var(--gold);
  scroll-margin-top: 90px;
}
.page-body h3 { font-size: 1.05rem; margin: 1.6em 0 .4em; color: var(--text); }
.page-body h2:first-child, .page-body h3:first-child { margin-top: 0; }
.page-body p, .page-body li { color: var(--muted); font-size: .97rem; }
.page-body ul { padding-left: 1.2em; margin: 0 0 1.2em; }
.page-body li { margin-bottom: .45em; }
.page-body a { color: var(--accent); text-decoration: underline; }

/* ------------------------------------------------------------- blog */
.post-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 22px; }
.post-list li {
  background: var(--bg-deep);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 28px 26px;
}
.post-list h2 {
  font-size: 1.2rem;
  margin: 0 0 .5em;
  color: var(--text);
  font-style: normal;
  text-transform: none;
}
.post-list h2 a { color: inherit; text-decoration: none; }
.post-list h2 a:hover { color: var(--gold); }
.post-list p { color: var(--muted); margin-bottom: 1em; }
.read-more { color: var(--accent); font-weight: 600; font-size: .92rem; }
.read-more:hover { text-decoration: underline; }

/* ------------------------------------------------------------ legal pages */
.legal { padding: 56px 0 80px; background: var(--bg); }
.legal-head { margin-bottom: 34px; padding-bottom: 24px; border-bottom: 1px solid var(--line); }
.legal-head h1 { font-size: clamp(1.8rem, 4vw, 2.4rem); font-style: italic; text-transform: uppercase; margin-bottom: .25em; }
.legal-head p { color: var(--muted-2); margin: 0; font-size: .92rem; }
.legal-body { max-width: 820px; }
.legal-body h2 { font-size: 1.14rem; margin: 2em 0 .6em; color: var(--accent); scroll-margin-top: 90px; }
.legal-body h2:first-child { margin-top: 0; }
.legal-body p, .legal-body li { color: var(--muted); font-size: .96rem; }
.legal-body ul { padding-left: 1.2em; margin: 0 0 1em; }
.legal-body li { margin-bottom: .45em; }
.legal-body a { color: var(--accent); text-decoration: underline; }

/* ----------------------------------------------------------- responsive */
@media (max-width: 900px) {
  .hero-inner { grid-template-columns: 1fr; text-align: center; }
  .hero-copy { order: 2; }
  .hero-art { order: 1; }
  .hero-actions, .hero-stats { justify-content: center; }

  .nav-toggle { display: flex; }
  .site-nav {
    position: absolute;
    inset: var(--header-h) 0 auto;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    background: var(--hero-bg);
    border-bottom: 1px solid var(--line);
    padding: 8px 20px 20px;
    /* Ten items plus the language picker is taller than a phone in landscape,
       so the panel scrolls rather than running off the bottom of the screen. */
    max-height: calc(100vh - var(--header-h));
    overflow-y: auto;
    overscroll-behavior: contain;
    display: none;
  }
  .site-nav.open { display: flex; }
  .site-nav .lang-select { width: 100%; margin-top: 16px; }
  .site-nav ul { flex-direction: column; align-items: stretch; gap: 0; }
  .site-nav li { border-bottom: 1px solid var(--line); }
  .site-nav a { display: block; padding: 14px 2px; font-size: 1rem; }

  /* No hover on touch, so the game list is simply always open. */
  .site-nav .sub {
    position: static;
    display: flex;
    background: transparent;
    box-shadow: none;
    padding: 0 0 6px 14px;
    min-width: 0;
  }
  .site-nav .sub a { color: var(--muted); padding: 10px 2px; }
  .site-nav .sub a:hover { background: none; color: var(--accent); }
  .site-nav .sub li { border-bottom: 0; }

  .page-head { flex-direction: column; align-items: flex-start; }
  .page-hero-art { width: 170px; }

  .game-rail { grid-auto-columns: minmax(78%, 1fr); }

  .footer-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 30px 24px; padding: 40px 20px 34px; }
  .footer-about { grid-column: 1 / -1; }
}

@media (max-width: 760px) {
  /* A QR code is pointless on the device you would scan it with, and the
     panel would sit on top of the content. Same reasoning for the one in the
     hero, which otherwise pushes the download button off to one side. */
  .floating-qr { display: none; }
  .hero-actions .qr { display: none; }
}

@media (max-width: 560px) {
  :root { --header-h: 66px; --logo-h: 42px; }

  .section { padding: 56px 0; }
  .hero { padding: 44px 0 60px; }
  .hero-points { text-align: left; max-width: 320px; margin-inline: auto; }
  .hero-coin { width: 68px !important; }
  .hero-actions { flex-direction: column; align-items: center; gap: 16px; }
  .hero-actions .btn { width: 100%; max-width: 300px; }

  .page-band { padding: 36px 0 32px; margin-bottom: 30px; }
  .page-head { gap: 22px; }
  .page-hero-art { width: 140px; }
  .steps li, .post-list li { padding: 22px 18px; }
  .why-card { padding: 18px 16px 16px; }

  /* Four columns of links on a 320px screen is two words per line. One column
     with clear labels reads better than a cramped grid. */
  .footer-grid { grid-template-columns: 1fr; gap: 26px; }
  .footer-about { grid-column: auto; }
  .copyright-inner { justify-content: center; text-align: center; }
}

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