/* Snake Games — the game's site. The look of the game: painted worlds, wooden plates, glossy wood-rimmed
   buttons, cream panels, stone tiles. One page per language (static HTML, built by tools/site/build.ts). */

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

:root {
  --ink: #3a2418;
  --ink-soft: #6b4a35;
  --cream: #fff8e8;
  --cream-2: #f6e6c4;
  --wood: #b87a3e;
  --wood-hi: #e0a868;
  --wood-dark: #4a2810;
  --green: #5cc93c;
  --green-hi: #a6ec6c;
  --green-dark: #2f8f22;
  --blue: #3ea6f2;
  --blue-hi: #8fd4ff;
  --blue-dark: #1f6cc0;
  --orange: #ffa62b;
  --sky: #8fd0f0;
  --radius: 22px;
  --wrap: 1120px;
  --font:
    'Nunito', system-ui, -apple-system, 'Segoe UI', Roboto, 'Hiragino Sans', 'Hiragino Kaku Gothic ProN',
    'Yu Gothic UI', 'Meiryo', 'Malgun Gothic', 'Apple SD Gothic Neo', 'Noto Sans JP', 'Noto Sans KR',
    'Noto Sans Arabic', Tahoma, 'Noto Sans Devanagari', 'Nirmala UI', Mangal, sans-serif;
  color-scheme: light;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}
html {
  scroll-behavior: smooth;
  scroll-padding-top: 84px;
  -webkit-text-size-adjust: 100%;
}
body {
  margin: 0;
  font-family: var(--font);
  color: var(--ink);
  background: #7cc8f5 linear-gradient(#8fd0f0, #d8f0c8 40%, #9fd46a);
  line-height: 1.6;
  font-size: 17px;
  overflow-x: hidden;
}
img {
  max-width: 100%;
  height: auto;
  display: block;
}
a {
  color: inherit;
}
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}
.skip {
  position: absolute;
  left: 12px;
  top: -60px;
  z-index: 100;
  background: var(--cream);
  border: 3px solid var(--wood-dark);
  border-radius: 12px;
  padding: 8px 14px;
  font-weight: 900;
}
.skip:focus {
  top: 12px;
}
:focus-visible {
  outline: 4px solid #fff;
  outline-offset: 3px;
  box-shadow: 0 0 0 7px var(--blue-dark);
}
.wrap {
  width: min(var(--wrap), 100% - 32px);
  margin-inline: auto;
}

/* ---------------------------------------------------------------- wood-rimmed glossy buttons */

.btn {
  --b: #fff3d6;
  --b-hi: #fffbef;
  --b-dark: #e2c28c;
  --fg: var(--ink);
  position: relative;
  isolation: isolate;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 52px;
  padding: 0 22px;
  font: 900 18px/1.1 var(--font);
  color: var(--fg);
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  border: 4px solid transparent;
  border-radius: 18px;
  background:
    linear-gradient(180deg, var(--b-hi) 0%, var(--b) 46%, var(--b-dark) 100%) padding-box,
    linear-gradient(180deg, var(--wood-hi), var(--wood) 55%, #8a5226) border-box;
  box-shadow:
    0 0 0 2.5px var(--wood-dark),
    inset 0 2px 0 rgba(255, 255, 255, 0.55),
    inset 0 -4px 0 rgba(0, 0, 0, 0.14),
    0 5px 0 2.5px var(--wood-dark),
    0 10px 18px rgba(30, 20, 10, 0.28);
  transition: transform 0.1s ease;
}
.btn::after {
  content: '';
  position: absolute;
  inset: 3px 8% auto;
  height: 42%;
  border-radius: 999px;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0.04));
  z-index: -1;
  pointer-events: none;
}
.btn:hover {
  transform: translateY(-2px);
}
.btn:active {
  transform: translateY(3px);
}
.btn svg {
  width: 22px;
  height: 22px;
  flex: none;
  filter: drop-shadow(0 2px 0 rgba(40, 22, 10, 0.4));
}
.btn.green,
.btn.blue,
.btn.purple {
  --fg: #fff;
}
.btn.green {
  --b: var(--green);
  --b-hi: var(--green-hi);
  --b-dark: var(--green-dark);
}
.btn.blue {
  --b: var(--blue);
  --b-hi: var(--blue-hi);
  --b-dark: var(--blue-dark);
}
.btn.green span,
.btn.blue span {
  -webkit-text-stroke: 4px rgba(40, 22, 10, 0.7);
  paint-order: stroke fill;
  text-shadow: 0 3px 0 rgba(40, 22, 10, 0.5);
}
.btn.big {
  min-height: 64px;
  padding: 0 30px;
  font-size: 22px;
  border-radius: 22px;
}
.btn.small {
  min-height: 44px;
  padding: 0 16px;
  font-size: 16px;
  border-radius: 14px;
}
.btn[aria-disabled='true'] {
  filter: grayscale(0.55);
  cursor: default;
}
.btn[aria-disabled='true']:hover {
  transform: none;
}

/* ---------------------------------------------------------------- wooden plates and panels */

.plate {
  display: inline-block;
  margin: 0 0 22px;
  padding: 10px 26px 12px;
  font-size: clamp(24px, 3.6vw, 36px);
  font-weight: 1000;
  line-height: 1.15;
  color: #fff8ea;
  -webkit-text-stroke: 6px #3a1f0c;
  paint-order: stroke fill;
  text-shadow: 0 4px 0 #3a1f0c;
  border: 4px solid var(--wood-dark);
  border-radius: 20px;
  background:
    repeating-linear-gradient(177deg, rgba(90, 50, 20, 0) 0 9px, rgba(90, 50, 20, 0.12) 9px 11px),
    linear-gradient(180deg, #d0904f, #9a5d2b);
  box-shadow:
    inset 0 0 0 4px var(--wood-hi),
    0 6px 0 var(--wood-dark),
    0 14px 24px rgba(30, 20, 10, 0.3);
  transform: rotate(-1.2deg);
}
.panel {
  background: linear-gradient(180deg, #fffbf0, var(--cream));
  border: 4px solid var(--wood-dark);
  border-radius: var(--radius);
  box-shadow:
    inset 0 0 0 4px var(--cream-2),
    0 7px 0 var(--wood-dark),
    0 18px 34px rgba(30, 20, 10, 0.28);
  padding: clamp(18px, 3vw, 34px);
}
.board {
  border: 4px solid var(--wood-dark);
  border-radius: 28px;
  padding: clamp(18px, 3vw, 34px);
  background:
    repeating-linear-gradient(
      180deg,
      rgba(60, 30, 10, 0) 0 64px,
      rgba(60, 30, 10, 0.26) 64px 66px,
      rgba(255, 220, 170, 0.12) 66px 68px
    ),
    repeating-linear-gradient(177deg, rgba(90, 50, 20, 0) 0 11px, rgba(90, 50, 20, 0.08) 11px 13px),
    radial-gradient(ellipse at 25% 0%, #e2a868, transparent 65%), linear-gradient(180deg, #c3834a, #93582a);
  box-shadow:
    inset 0 0 0 5px #dca06a,
    inset 0 0 0 9px #7a4a22,
    0 8px 0 var(--wood-dark),
    0 22px 40px rgba(30, 20, 10, 0.38);
}

/* ---------------------------------------------------------------- header */

.top {
  position: sticky;
  top: 0;
  z-index: 50;
  border-bottom: 4px solid var(--wood-dark);
  background:
    repeating-linear-gradient(178deg, rgba(90, 50, 20, 0) 0 10px, rgba(90, 50, 20, 0.12) 10px 12px),
    linear-gradient(180deg, #c98a4c, #9a5d2b);
  box-shadow:
    inset 0 -4px 0 #7a4a22,
    0 6px 16px rgba(30, 20, 10, 0.3);
}
.top .wrap {
  display: flex;
  align-items: center;
  gap: 14px;
  min-height: 68px;
}
.brand img {
  width: 84px;
  filter: drop-shadow(0 3px 0 rgba(40, 22, 10, 0.45));
}
.nav {
  display: flex;
  gap: 6px;
  margin-left: auto;
}
.nav a {
  padding: 8px 14px;
  border-radius: 12px;
  font-weight: 900;
  color: #fff8ea;
  text-decoration: none;
  -webkit-text-stroke: 3px rgba(40, 22, 10, 0.7);
  paint-order: stroke fill;
}
.nav a:hover {
  background: rgba(255, 240, 210, 0.18);
}

/* language picker: a <details> list (works without script) */
.lang {
  position: relative;
}
.lang summary {
  list-style: none;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  padding: 0 12px;
  border: 3px solid var(--wood-dark);
  border-radius: 14px;
  cursor: pointer;
  font-weight: 1000;
  color: #fff8ea;
  background: linear-gradient(180deg, #e8b27a, #c9874a 46%, #93582a);
  box-shadow:
    inset 0 2px 0 rgba(255, 255, 255, 0.4),
    0 4px 0 var(--wood-dark);
  -webkit-text-stroke: 3px rgba(40, 22, 10, 0.7);
  paint-order: stroke fill;
}
.lang summary::-webkit-details-marker {
  display: none;
}
.lang summary::after {
  content: '';
  border: 6px solid transparent;
  border-top: 7px solid currentColor;
  border-bottom: 0;
  margin-top: 3px;
}
.flag {
  width: 30px;
  height: 20px;
  flex: none;
  border-radius: 3px;
}
.lang ul {
  position: absolute;
  right: 0;
  top: calc(100% + 12px);
  margin: 0;
  padding: 7px;
  list-style: none;
  min-width: 230px;
  max-height: 70vh;
  overflow: auto;
  background: linear-gradient(180deg, #fffaf0, #f6e8cc);
  border: 3px solid var(--wood-dark);
  border-radius: 18px;
  box-shadow:
    inset 0 0 0 3px #d6a265,
    0 6px 0 var(--wood-dark),
    0 16px 34px rgba(30, 20, 10, 0.4);
}
.lang li a {
  display: grid;
  grid-template-columns: 30px 1fr auto;
  align-items: center;
  gap: 12px;
  min-height: 44px;
  padding: 4px 12px;
  border-radius: 12px;
  font-weight: 900;
  text-decoration: none;
}
.lang li a:hover,
.lang li a:focus-visible {
  background: #f1dcb4;
}
.lang li a[aria-current='true'] {
  background: #e3f5cf;
}
.lang li small {
  color: #9a7a5e;
  font-weight: 900;
}

/* ---------------------------------------------------------------- hero */

.hero {
  position: relative;
  padding: clamp(36px, 7vw, 90px) 0 clamp(56px, 8vw, 110px);
  background: var(--sky) url('../play/scenes/menu-2k.webp') center 30% / cover no-repeat;
  text-align: center;
  overflow: hidden;
}
@media (min-width: 1600px), (min-resolution: 2dppx) and (min-width: 900px) {
  .hero {
    background-image: url('../play/scenes/menu-4k.webp');
  }
}
.hero::after {
  /* a soft fade into the page */
  content: '';
  position: absolute;
  inset: auto 0 0;
  height: 80px;
  background: linear-gradient(rgba(159, 212, 106, 0), rgba(159, 212, 106, 0.6));
  pointer-events: none;
}
.hero .wrap {
  position: relative;
  z-index: 1;
  display: grid;
  justify-items: center;
  gap: 18px;
}
.kicker {
  margin: 0;
  display: inline-block;
  padding: 6px 16px;
  border-radius: 999px;
  font-weight: 1000;
  font-size: 15px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #fff8ea;
  background: rgba(58, 31, 12, 0.55);
}
.hero-logo {
  width: min(460px, 80%);
  margin: 0 auto;
}
.hero h1 {
  margin: 0;
  max-width: 820px;
  font-size: clamp(28px, 4.6vw, 52px);
  line-height: 1.08;
  font-weight: 1000;
  color: #fff8ea;
  -webkit-text-stroke: 7px #3a1f0c;
  paint-order: stroke fill;
  text-shadow:
    0 5px 0 #3a1f0c,
    0 12px 22px rgba(0, 0, 0, 0.3);
  text-wrap: balance;
}
.hero-logo {
  width: min(460px, 80%);
  filter: drop-shadow(0 14px 24px rgba(30, 20, 10, 0.35));
  animation: bob 4s ease-in-out infinite;
}
@keyframes bob {
  50% {
    transform: translateY(-8px);
  }
}
.hero .lead {
  margin: 0;
  max-width: 680px;
  font-size: clamp(17px, 2vw, 20px);
  font-weight: 700;
}
.cta {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 16px 18px;
  margin-top: 6px;
}
.facts {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
  margin: 8px 0 0;
  padding: 0;
  list-style: none;
}
.facts li {
  padding: 6px 14px;
  border: 3px solid var(--wood-dark);
  border-radius: 999px;
  font-weight: 900;
  font-size: 15px;
  background: linear-gradient(180deg, #fff6df, #f0dcb4);
  box-shadow:
    inset 0 0 0 2px #c88a4a,
    0 3px 0 var(--wood-dark);
}

/* ---------------------------------------------------------------- sections */

.section {
  padding: clamp(48px, 7vw, 90px) 0;
  position: relative;
}
.section-head {
  text-align: center;
}
.scene {
  background: var(--sky) center / cover no-repeat;
}
.scene-classic {
  background-image: url('../play/scenes/classic-2k.webp');
}
.scene-sky {
  background-image: url('../play/scenes/world4-2k.webp');
}
.scene-cave {
  background-image: url('../play/scenes/world2-2k.webp');
}
.scene-mill {
  background-image: url('../play/scenes/world3-2k.webp');
}

/* game block: the board of the classic snake, a wooden frame with vines */
.frame {
  position: relative;
  border: 5px solid var(--wood-dark);
  border-radius: 28px;
  padding: 14px;
  background:
    repeating-linear-gradient(176deg, rgba(90, 50, 20, 0) 0 9px, rgba(90, 50, 20, 0.14) 9px 11px),
    linear-gradient(180deg, #c98a4c, #8a5226);
  box-shadow:
    inset 0 0 0 4px var(--wood-hi),
    0 8px 0 var(--wood-dark),
    0 24px 44px rgba(20, 30, 10, 0.4);
}
.stage {
  position: relative;
  aspect-ratio: 16 / 9;
  border-radius: 16px;
  overflow: hidden;
  background: #7cc8f5;
  border: 3px solid var(--wood-dark);
}
.stage img,
.stage iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  object-fit: cover;
}
.stage .start {
  position: absolute;
  inset: 0;
  margin: auto;
  width: max-content;
  height: max-content;
  z-index: 2;
}
.stage::before {
  /* dim the poster a little so the button stands out */
  content: '';
  position: absolute;
  inset: 0;
  z-index: 1;
  background: radial-gradient(circle at 50% 50%, rgba(20, 30, 10, 0.05), rgba(20, 30, 10, 0.35));
  pointer-events: none;
}
.stage.live::before {
  display: none;
}
.stage-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px 20px;
  margin-top: 14px;
}
.stage-bar p {
  margin: 0;
  color: #fff8ea;
  font-weight: 800;
  text-shadow: 0 2px 0 rgba(40, 22, 10, 0.6);
}
@media (max-width: 700px) {
  .stage {
    aspect-ratio: 9 / 16;
    max-height: 78vh;
  }
}

/* text with a picture beside it */
.split {
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: clamp(20px, 4vw, 44px);
  align-items: center;
}
.split h2 {
  margin-top: 0;
}
.shot {
  border: 4px solid var(--wood-dark);
  border-radius: 20px;
  overflow: hidden;
  box-shadow:
    0 7px 0 var(--wood-dark),
    0 18px 34px rgba(30, 20, 10, 0.3);
  transform: rotate(1deg);
}
.shot.left {
  transform: rotate(-1deg);
}
.shot img {
  width: 100%;
}
.panel h2,
.panel h3 {
  line-height: 1.2;
}
.panel h2 {
  font-size: clamp(24px, 3vw, 32px);
  font-weight: 1000;
}
.panel p {
  margin: 0 0 14px;
}
@media (max-width: 860px) {
  .split {
    grid-template-columns: 1fr;
  }
}

/* apps */
.apps-grid {
  display: grid;
  grid-template-columns: 1fr 1fr auto;
  gap: clamp(18px, 3vw, 30px);
  align-items: stretch;
}
.app-card {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.app-card h3 {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0;
  font-size: 24px;
  font-weight: 1000;
}
.app-card h3 svg {
  width: 30px;
  height: 30px;
}
.app-card p {
  margin: 0;
}
.app-card .btn {
  margin-top: auto;
  align-self: flex-start;
}
.app-card small {
  color: var(--ink-soft);
  font-weight: 800;
}
.phone {
  width: 210px;
  border: 8px solid #2a1a12;
  border-radius: 34px;
  overflow: hidden;
  background: #2a1a12;
  box-shadow:
    0 6px 0 var(--wood-dark),
    0 22px 40px rgba(20, 10, 5, 0.45);
  transform: rotate(3deg);
  align-self: center;
}
.phone img {
  border-radius: 26px;
}
.apps .lead {
  text-align: center;
  color: #fff8ea;
  font-weight: 800;
  max-width: 720px;
  margin: 0 auto 26px;
  text-shadow: 0 2px 0 rgba(40, 22, 10, 0.7);
}
@media (max-width: 960px) {
  .apps-grid {
    grid-template-columns: 1fr 1fr;
  }
  .phone {
    display: none;
  }
}
@media (max-width: 640px) {
  .apps-grid {
    grid-template-columns: 1fr;
  }
}

/* article */
.article {
  max-width: 900px;
  margin-inline: auto;
}
.article h2 {
  margin-top: 0;
  text-align: center;
}
.article h3 {
  margin: 30px 0 10px;
  font-size: 23px;
  font-weight: 1000;
  color: #5a3417;
}
.worlds {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 12px;
  margin: 18px 0 8px;
  padding: 0;
  list-style: none;
}
.worlds li {
  text-align: center;
  font-weight: 1000;
  font-size: 15px;
}
.worlds img {
  aspect-ratio: 1;
  object-fit: cover;
  width: 100%;
  border: 3px solid #3d332c;
  border-radius: 16px;
  box-shadow:
    inset 0 2px 0 rgba(255, 255, 255, 0.6),
    0 5px 0 #3d332c;
  margin-bottom: 8px;
}
.figure {
  margin: 22px 0;
}
.figure figcaption {
  margin-top: 10px;
  font-size: 14px;
  color: var(--ink-soft);
  text-align: center;
  font-weight: 700;
}
@media (max-width: 640px) {
  .worlds {
    grid-template-columns: repeat(3, 1fr);
  }
}

/* FAQ */
.faq {
  max-width: 900px;
  margin-inline: auto;
  display: grid;
  gap: 12px;
}
.faq details {
  border: 3px solid var(--wood-dark);
  border-radius: 18px;
  background: linear-gradient(180deg, #fffbf0, var(--cream));
  box-shadow: 0 5px 0 var(--wood-dark);
}
.faq summary {
  list-style: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 14px 18px;
  min-height: 56px;
  cursor: pointer;
  font-weight: 1000;
  font-size: 18px;
}
.faq summary::-webkit-details-marker {
  display: none;
}
.faq summary::after {
  content: '+';
  flex: none;
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  font-size: 24px;
  color: #fff;
  background: radial-gradient(circle at 40% 30%, #a8ee6c, #4cb52e 60%, #2c8a1c);
  border: 2.5px solid #24520f;
  transition: transform 0.2s;
}
.faq details[open] summary::after {
  transform: rotate(45deg);
}
.faq details p {
  margin: 0;
  padding: 0 18px 16px;
}

/* footer */
.foot {
  border-top: 4px solid var(--wood-dark);
  color: #fff8ea;
  background:
    repeating-linear-gradient(178deg, rgba(0, 0, 0, 0) 0 10px, rgba(0, 0, 0, 0.12) 10px 12px),
    linear-gradient(180deg, #8a5226, #4a2810);
  padding: 36px 0 28px;
}
.foot .wrap {
  display: grid;
  gap: 16px;
  justify-items: center;
  text-align: center;
}
.foot img {
  width: 160px;
}
.foot p {
  margin: 0;
  max-width: 640px;
}
.foot ul {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 6px 14px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.foot ul a {
  font-weight: 800;
  text-decoration: none;
  opacity: 0.9;
}
.foot ul a:hover {
  text-decoration: underline;
}
.foot .copy {
  font-size: 14px;
  opacity: 0.75;
}

/* phones */
@media (max-width: 760px) {
  .nav {
    display: none;
  }
  .lang {
    margin-left: auto;
  }
  .lang summary small {
    display: none;
  }
  .brand img {
    width: 84px;
  }
  .top .btn {
    padding: 0 12px;
  }
  .btn.big {
    min-height: 58px;
    font-size: 19px;
    padding: 0 22px;
  }
  .worlds li {
    font-size: 13px;
  }
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
  .hero-logo {
    animation: none;
  }
  .btn,
  .faq summary::after {
    transition: none;
  }
}

/* ---------------------------------------------------------------- fixes after the first look */

.apps .lead {
  display: block;
  width: fit-content;
  max-width: min(720px, 100%);
  padding: 10px 20px;
  border-radius: 18px;
  color: var(--ink);
  text-shadow: none;
  background: rgba(255, 248, 232, 0.92);
  border: 3px solid var(--wood-dark);
  box-shadow: 0 4px 0 var(--wood-dark);
}
.apps-grid {
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) auto;
}
.app-card .btn {
  white-space: normal;
  text-align: left;
  max-width: 100%;
}
@media (max-width: 1180px) {
  .apps-grid {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  }
  .phone {
    display: none;
  }
}
@media (max-width: 640px) {
  .apps-grid {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* ---------------------------------------------------------------- app cards with platform medals */

.app-head {
  display: flex;
  align-items: center;
  gap: 16px;
}
.app-head h3 {
  font-size: 26px;
}
.app-head small {
  display: block;
  margin-top: 2px;
}
.medal {
  flex: none;
  display: grid;
  place-items: center;
  width: 78px;
  height: 78px;
  border-radius: 50%;
  border: 4px solid transparent;
  background:
    radial-gradient(circle at 35% 28%, var(--m-hi), var(--m) 62%, var(--m-dark)) padding-box,
    linear-gradient(180deg, var(--wood-hi), var(--wood) 55%, #8a5226) border-box;
  box-shadow:
    0 0 0 2.5px var(--wood-dark),
    inset 0 3px 0 rgba(255, 255, 255, 0.35),
    0 5px 0 2.5px var(--wood-dark),
    0 10px 18px rgba(30, 20, 10, 0.3);
}
.medal svg {
  width: 44px;
  height: 44px;
  filter: drop-shadow(0 2px 0 rgba(0, 0, 0, 0.25));
}
.android .medal {
  --m-hi: #2f6b47;
  --m: #123a26;
  --m-dark: #07200f;
  color: #3ddc84;
}
.ios .medal {
  --m-hi: #ffffff;
  --m: #e9edf2;
  --m-dark: #b9c2cc;
  color: #1d1d1f;
}
.ios .medal svg {
  width: 40px;
  height: 40px;
  margin-top: -3px;
}
.app-card .btn svg {
  width: 26px;
  height: 26px;
}
.btn.store {
  --b: #1d1d1f;
  --b-hi: #4a4a4f;
  --b-dark: #000;
  --fg: #fff;
}
.btn.green .logo-android {
  color: #fff;
}
.app-card {
  gap: 16px;
}
.app-card .btn {
  align-self: stretch;
  justify-content: flex-start;
}
@media (max-width: 420px) {
  .medal {
    width: 64px;
    height: 64px;
  }
  .medal svg {
    width: 36px;
    height: 36px;
  }
  .app-head h3 {
    font-size: 22px;
  }
}

/* the way out of full screen: a round wooden button on the right edge, only in full screen */
.exit-full {
  display: none;
  position: absolute;
  z-index: 5;
  right: max(12px, env(safe-area-inset-right));
  top: 50%;
  transform: translateY(-50%);
  width: 52px;
  height: 52px;
  padding: 0;
  border-radius: 50%;
  cursor: pointer;
  color: #fff;
  border: 4px solid transparent;
  background:
    radial-gradient(circle at 40% 30%, #ff8a7a, #e8463a 60%, #a8231b) padding-box,
    linear-gradient(180deg, var(--wood-hi), var(--wood) 55%, #8a5226) border-box;
  box-shadow:
    0 0 0 2.5px var(--wood-dark),
    0 4px 0 2.5px var(--wood-dark),
    0 8px 16px rgba(0, 0, 0, 0.35);
  opacity: 0.85;
}
.exit-full:hover,
.exit-full:focus-visible {
  opacity: 1;
}
.exit-full svg {
  width: 24px;
  height: 24px;
}
.stage.is-full .exit-full {
  display: grid;
  place-items: center;
}
.stage.is-full {
  border: 0;
  border-radius: 0;
  aspect-ratio: auto;
  max-height: none;
}

/* ---------------------------------------------------------------- right-to-left (Arabic) */

[dir='rtl'] .nav {
  margin-left: 0;
  margin-right: auto;
}
[dir='rtl'] .lang ul {
  right: auto;
  left: 0;
}
[dir='rtl'] .lang li a,
[dir='rtl'] .app-card .btn {
  text-align: right;
}
[dir='rtl'] .plate {
  transform: rotate(1.2deg);
}
[dir='rtl'] .exit-full {
  right: auto;
  left: max(12px, env(safe-area-inset-left));
}
/* the brand stays in Latin letters and left-to-right */
[dir='rtl'] .brand,
[dir='rtl'] .hero-logo {
  direction: ltr;
}
@media (max-width: 760px) {
  [dir='rtl'] .lang {
    margin-left: 0;
    margin-right: auto;
  }
}

/* back to top: a round wooden button in the corner, shown after scrolling down */
.to-top {
  position: fixed;
  z-index: 40;
  right: max(16px, env(safe-area-inset-right));
  bottom: max(16px, env(safe-area-inset-bottom));
  display: grid;
  place-items: center;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  color: #fff;
  text-decoration: none;
  border: 4px solid transparent;
  background:
    radial-gradient(circle at 40% 30%, var(--green-hi), var(--green) 60%, var(--green-dark)) padding-box,
    linear-gradient(180deg, var(--wood-hi), var(--wood) 55%, #8a5226) border-box;
  box-shadow:
    0 0 0 2.5px var(--wood-dark),
    0 5px 0 2.5px var(--wood-dark),
    0 10px 18px rgba(30, 20, 10, 0.35);
  opacity: 0;
  transform: translateY(16px);
  pointer-events: none;
  transition:
    opacity 0.2s ease,
    transform 0.2s ease;
}
.to-top.show {
  opacity: 1;
  transform: none;
  pointer-events: auto;
}
.to-top svg {
  width: 26px;
  height: 26px;
  filter: drop-shadow(0 2px 0 rgba(20, 60, 10, 0.5));
}
[dir='rtl'] .to-top {
  right: auto;
  left: max(16px, env(safe-area-inset-left));
}
@media (prefers-reduced-motion: reduce) {
  .to-top {
    transition: none;
  }
}