/* Heads & Tales site: the app's "Candlelight" look (colours from the app's src/theme/tokens.ts). */

/* Fonts are served from this site (copied from the app's @expo-google-fonts packages), so pages load
   nothing from other sites. SIL Open Font License: see assets/fonts/OFL-*.txt. */

@font-face {
  font-family: "Alegreya SC";
  src: url("fonts/AlegreyaSC_700Bold.ttf") format("truetype");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Alegreya Sans";
  src: url("fonts/AlegreyaSans_400Regular.ttf") format("truetype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Alegreya Sans";
  src: url("fonts/AlegreyaSans_500Medium.ttf") format("truetype");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Alegreya Sans";
  src: url("fonts/AlegreyaSans_500Medium_Italic.ttf") format("truetype");
  font-weight: 400 500;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: "Alegreya Sans";
  src: url("fonts/AlegreyaSans_700Bold.ttf") format("truetype");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

/* Used only by the Hindi pages (:lang(hi) below); elsewhere the footer's one Devanagari word uses the system font. */
@font-face {
  font-family: "Tiro Devanagari Hindi";
  src: url("fonts/TiroDevanagariHindi_400Regular.ttf") format("truetype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0900-097F, U+1CD0-1CF9, U+200C-200D, U+20B9, U+25CC, U+A830-A839, U+A8E0-A8FF;
}

:root {
  --bg: #120B08;
  --bg-top: #24160F;
  --card: #1A110C;
  --sheet: #140C08;
  --text: #F6EAD3;
  --text-muted: #CDB592;
  --text-faint: #A8916F;
  --brass: #E3AE5B;
  --brass-light: #F5D08E;
  --brass-dark: #B8823A;
  --on-brass: #1C1008;
  --border: rgba(246, 234, 211, 0.12);
  --border-brass: rgba(227, 174, 91, 0.25);
  --glass: rgba(246, 234, 211, 0.05);
  --ember: 240, 120, 42;
  --moon: 134, 169, 222;

  --font-display: "Alegreya SC", Georgia, "Times New Roman", serif;
  --font-body: "Alegreya Sans", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --line: 1.55;

  --radius-card: 20px;
  --radius-pill: 999px;
  --gutter: 16px;
  --max: 760px;

  color-scheme: dark;
}

/* Hindi: Devanagari from Tiro Devanagari Hindi, Latin (like "Heads & Tales") from Alegreya. Taller lines. */
:root:lang(hi) {
  --font-display: "Alegreya SC", "Tiro Devanagari Hindi", Georgia, serif;
  --font-body: "Alegreya Sans", "Tiro Devanagari Hindi", "Nirmala UI", "Kohinoor Devanagari", system-ui, sans-serif;
  --line: 1.75;
}

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

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

body {
  margin: 0;
  min-height: 100vh;
  background-color: var(--bg);
  background-image:
    radial-gradient(circle at 18% 12%, rgba(var(--ember), 0.16) 0%, rgba(var(--ember), 0) 55%),
    radial-gradient(circle at 92% 4%, rgba(var(--moon), 0.12) 0%, rgba(var(--moon), 0) 45%),
    linear-gradient(180deg, var(--bg-top) 0, var(--bg) 640px);
  background-repeat: no-repeat;
  color: var(--text);
  font-family: var(--font-body);
  font-size: 1.0625rem;
  line-height: var(--line);
  display: flex;
  flex-direction: column;
  overflow-wrap: break-word;
}

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

a {
  color: var(--brass-light);
  text-decoration-color: rgba(245, 208, 142, 0.45);
  text-underline-offset: 0.18em;
}

a:hover {
  color: #FCE3B0;
  text-decoration-color: currentColor;
}

:focus-visible {
  outline: 2px solid var(--brass-light);
  outline-offset: 3px;
  border-radius: 6px;
}

h1,
h2,
h3 {
  font-family: var(--font-display);
  font-weight: 700;
  line-height: 1.2;
  color: var(--brass-light);
  margin: 0 0 0.5em;
}

h1 {
  font-size: clamp(2.1rem, 8vw, 3.4rem);
  color: var(--text);
  letter-spacing: 0.01em;
}

h2 {
  font-size: clamp(1.4rem, 5vw, 1.75rem);
}

h3 {
  font-size: 1.2rem;
}

:lang(hi) h1,
:lang(hi) h2,
:lang(hi) h3 {
  font-weight: 400;
  line-height: 1.4;
}

p,
ul,
ol {
  margin: 0 0 1em;
}

ul {
  padding-left: 1.25em;
}

li + li {
  margin-top: 0.35em;
}

li::marker {
  color: var(--brass);
}

strong {
  color: var(--text);
  font-weight: 700;
}

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

.skip {
  position: absolute;
  left: -9999px;
  top: 8px;
  z-index: 10;
  background: var(--brass);
  color: var(--on-brass);
  padding: 8px 14px;
  border-radius: 10px;
  font-weight: 700;
  text-decoration: none;
}

.skip:focus {
  left: 8px;
}

/* Header */

.top {
  padding: 14px 0;
}

.top .wrap {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: var(--text);
  text-decoration: none;
  font-family: "Alegreya SC", Georgia, serif;
  font-weight: 700;
  font-size: 1.2rem;
  white-space: nowrap;
}

.brand img {
  width: 34px;
  height: 34px;
  border-radius: 9px;
  box-shadow: 0 0 0 1px rgba(245, 208, 142, 0.2), 0 4px 12px rgba(179, 56, 32, 0.45);
}

.top .wide {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}

.top nav {
  display: flex;
  flex-wrap: wrap;
  gap: 2px;
  margin-right: -10px;
}

.top nav a {
  color: var(--text-muted);
  text-decoration: none;
  font-weight: 500;
  padding: 8px 10px;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  border-radius: var(--radius-pill);
}

.top nav a:hover,
.top nav a[aria-current="page"] {
  color: var(--brass-light);
  background: var(--glass);
}

main {
  flex: 1;
  padding-bottom: 48px;
}

/* Home ("get the app" landing page) */

/* The 404 page keeps the small tossing coin. */
.coin-stage {
  position: relative;
  width: min(200px, 52vw);
  aspect-ratio: 1;
  margin: 8px auto 26px;
  perspective: 700px;
}

.coin-stage::before {
  content: "";
  position: absolute;
  inset: -45%;
  background: radial-gradient(circle, rgba(var(--ember), 0.32) 0%, rgba(227, 174, 91, 0.12) 35%, rgba(var(--ember), 0) 65%);
  pointer-events: none;
}

.coin-stage img {
  position: relative;
  width: 100%;
  height: 100%;
  filter: drop-shadow(0 18px 26px rgba(0, 0, 0, 0.55)) drop-shadow(0 0 22px rgba(227, 174, 91, 0.25));
  animation: coin-toss 7s cubic-bezier(0.45, 0, 0.25, 1) infinite;
}

@keyframes coin-toss {
  0%, 62% { transform: translateY(0) rotateX(0deg); }
  70% { transform: translateY(-34px) rotateX(360deg); }
  78% { transform: translateY(-46px) rotateX(720deg); }
  86% { transform: translateY(0) rotateX(1080deg); }
  90% { transform: translateY(-5px) rotateX(1080deg); }
  94%, 100% { transform: translateY(0) rotateX(1080deg); }
}

.lede {
  color: var(--text-muted);
  max-width: 38ch;
  margin: 0 auto 1.5em;
}

.redirect-note {
  color: var(--text-muted);
  font-style: italic;
  margin: 0 0 1em;
}

/* Wider page for the landing page; the policy pages keep the narrow reading width. */
.wide {
  width: 100%;
  max-width: 1120px;
  margin: 0 auto;
  padding: 0 var(--gutter);
}

[data-page="home"] main {
  padding-bottom: 0;
  overflow-x: clip;
}

/* The wordmark: Alegreya SC with a brass italic ampersand, as in the brand lockup. */
.wordmark .amp {
  font-family: "Alegreya Sans", Georgia, serif;
  font-style: italic;
  font-weight: 500;
  color: var(--brass);
  padding: 0 0.04em;
}

/* ---------- Hero ---------- */

.hero {
  position: relative;
  padding: 18px 0 40px;
}

.hero::before {
  /* Ember light behind the scene, the red of the app icon */
  content: "";
  position: absolute;
  inset: -80px 0 auto;
  height: 900px;
  background:
    radial-gradient(ellipse 60% 50% at 72% 42%, rgba(179, 56, 32, 0.42) 0%, rgba(179, 56, 32, 0) 70%),
    radial-gradient(ellipse 40% 35% at 20% 20%, rgba(var(--ember), 0.14) 0%, rgba(var(--ember), 0) 70%);
  pointer-events: none;
}

.hero-grid {
  position: relative;
  display: grid;
  gap: 34px;
  align-items: center;
}

.hero-copy {
  text-align: center;
}

.hero-icon {
  width: 84px;
  height: 84px;
  margin: 0 auto 18px;
  border-radius: 22px;
  box-shadow: 0 0 0 1px rgba(245, 208, 142, 0.25), 0 14px 34px rgba(179, 56, 32, 0.55), 0 0 60px rgba(var(--ember), 0.35);
}

.hero h1 {
  font-size: clamp(2.6rem, 12vw, 4.6rem);
  line-height: 1.02;
  margin: 0 0 0.28em;
  text-shadow: 0 4px 30px rgba(var(--ember), 0.35);
}

.pitch {
  font-family: var(--font-display);
  font-size: clamp(1.3rem, 5vw, 1.75rem);
  color: var(--brass-light);
  line-height: 1.3;
  margin: 0 auto 0.55em;
  max-width: 24ch;
}

:lang(hi) .pitch {
  line-height: 1.6;
}

.hero .lede {
  max-width: 40ch;
  margin-bottom: 1.4em;
}

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

.store {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  min-width: 214px;
  min-height: 62px;
  padding: 9px 22px 10px 16px;
  border-radius: 18px;
  text-decoration: none;
  text-align: left;
  background: linear-gradient(180deg, #F5D08E 0%, #E3AE5B 50%, #B8823A 100%);
  color: var(--on-brass);
  box-shadow: 0 10px 30px rgba(227, 174, 91, 0.28), inset 0 1px 0 rgba(255, 255, 255, 0.6);
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.store svg {
  flex: none;
  width: 30px;
  height: 30px;
}

.store-text {
  display: flex;
  flex-direction: column;
}

a.store:hover {
  color: var(--on-brass);
  transform: translateY(-2px);
  box-shadow: 0 14px 36px rgba(227, 174, 91, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.6);
}

a.store:active {
  transform: translateY(1px);
}

.store-kicker {
  font-size: 0.8rem;
  font-weight: 500;
  letter-spacing: 0.02em;
  line-height: 1.3;
}

.store-name {
  font-family: "Alegreya SC", Georgia, serif;
  font-weight: 700;
  font-size: 1.4rem;
  line-height: 1.15;
}

.store--soon {
  background: var(--glass);
  color: var(--text-muted);
  border: 1px dashed var(--border-brass);
  box-shadow: none;
  cursor: default;
}

.store--soon .store-kicker {
  color: var(--brass);
}

.badges {
  list-style: none;
  padding: 0;
  margin: 18px 0 0;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
  font-size: 0.92rem;
  color: var(--text-muted);
}

.badges li {
  margin: 0;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 5px 13px 5px 10px;
  border-radius: var(--radius-pill);
  border: 1px solid var(--border-brass);
  background: rgba(26, 17, 12, 0.6);
}

.badges li::before {
  content: "";
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--brass);
  box-shadow: 0 0 8px rgba(227, 174, 91, 0.8);
}

/* The hero picture: the tavern scene in a phone, with a real coin toss and the cavalier talking. */
.hero-art {
  position: relative;
  width: min(300px, 78vw);
  margin: 0 auto;
}

.phone {
  position: relative;
  aspect-ratio: 540 / 1171;
  border-radius: 40px;
  padding: 9px;
  background: linear-gradient(160deg, #3A2618 0%, #1A110C 45%, #0D0805 100%);
  box-shadow:
    0 0 0 1px rgba(245, 208, 142, 0.22),
    inset 0 0 0 1px rgba(255, 255, 255, 0.06),
    0 40px 80px rgba(0, 0, 0, 0.6),
    0 0 90px rgba(179, 56, 32, 0.35);
}

.phone-screen {
  position: relative;
  height: 100%;
  border-radius: 31px;
  overflow: hidden;
  background: #1A110C;
}

.phone-screen > img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.phone--shot .phone-screen > img {
  object-position: top;
}

/* The toss: two faces of the World coin, back to back. Two throws per loop, tails then heads. */
.toss {
  position: absolute;
  left: 50%;
  top: 77%;
  width: 26%;
  aspect-ratio: 1;
  margin-left: -13%;
  perspective: 600px;
}

.toss-shadow {
  position: absolute;
  left: 8%;
  right: 8%;
  bottom: -9%;
  height: 22%;
  border-radius: 50%;
  background: radial-gradient(closest-side, rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0));
  animation: toss-shadow 8s ease-in-out infinite;
}

.toss-coin {
  position: absolute;
  inset: 0;
  transform-style: preserve-3d;
  animation: toss 8s cubic-bezier(0.4, 0, 0.3, 1) infinite;
}

.toss-coin img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  filter: drop-shadow(0 4px 6px rgba(0, 0, 0, 0.45));
}

.toss-coin img + img {
  transform: rotateX(180deg);
}

@keyframes toss {
  0%, 8% { transform: translateY(0) rotateX(0deg) scale(1); }
  18% { transform: translateY(-190%) rotateX(450deg) scale(1.12); }
  28% { transform: translateY(0) rotateX(900deg) scale(1); }
  31% { transform: translateY(-8%) rotateX(900deg) scale(1); }
  34%, 58% { transform: translateY(0) rotateX(900deg) scale(1); }
  68% { transform: translateY(-190%) rotateX(1350deg) scale(1.12); }
  78% { transform: translateY(0) rotateX(1800deg) scale(1); }
  81% { transform: translateY(-8%) rotateX(1800deg) scale(1); }
  84%, 100% { transform: translateY(0) rotateX(1800deg) scale(1); }
}

@keyframes toss-shadow {
  0%, 8%, 28%, 58%, 78%, 100% { transform: scale(1); opacity: 1; }
  18%, 68% { transform: scale(0.45); opacity: 0.35; }
}

/* The cavalier's lines, timed to the throws (his words from the app). */
.bubble {
  position: absolute;
  left: 9%;
  right: 9%;
  top: 9%;
  margin: 0;
  padding: 9px 13px;
  border-radius: 16px;
  background: #F3E6CB;
  color: #2A1A10;
  font-size: 0.9rem;
  font-weight: 500;
  line-height: 1.3;
  text-align: center;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.5);
  opacity: 0;
  animation: bubble 8s ease infinite;
}

.bubble::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: -7px;
  width: 14px;
  height: 14px;
  margin-left: -7px;
  background: inherit;
  transform: rotate(45deg);
  border-radius: 0 0 3px 0;
}

.bubble--1 { animation-name: bubble-1; }
.bubble--2 { animation-name: bubble-2; }
.bubble--3 { animation-name: bubble-3; }

@keyframes bubble-1 {
  0%, 2% { opacity: 0; transform: translateY(6px); }
  5%, 15% { opacity: 1; transform: none; }
  19%, 100% { opacity: 0; transform: none; }
}

@keyframes bubble-2 {
  0%, 30% { opacity: 0; transform: translateY(6px); }
  34%, 52% { opacity: 1; transform: none; }
  56%, 100% { opacity: 0; transform: none; }
}

@keyframes bubble-3 {
  0%, 80% { opacity: 0; transform: translateY(6px); }
  84%, 97% { opacity: 1; transform: none; }
  100% { opacity: 0; transform: none; }
}

.hero-coin {
  position: absolute;
  width: 31%;
  filter: drop-shadow(0 14px 18px rgba(0, 0, 0, 0.55));
  animation: drift 9s ease-in-out infinite;
}

.hero-coin--a {
  left: -22%;
  top: 14%;
  transform: rotate(-14deg);
}

.hero-coin--b {
  right: -19%;
  top: 52%;
  width: 26%;
  animation-delay: -4s;
  transform: rotate(12deg);
}

@keyframes drift {
  0%, 100% { translate: 0 0; }
  50% { translate: 0 -10px; }
}

/* ---------- Sections ---------- */

.section {
  position: relative;
  padding: 64px 0;
}

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

.kicker {
  display: inline-block;
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--brass);
  margin: 0 0 10px;
}

:lang(hi) .kicker {
  letter-spacing: 0.02em;
  font-size: 0.9rem;
}

.section h2 {
  font-size: clamp(1.9rem, 7vw, 2.8rem);
  color: var(--text);
  margin: 0 0 0.35em;
}

.section-head p:last-child,
.split-copy > p {
  color: var(--text-muted);
  font-size: 1.1rem;
}

/* A thin brass rule with a small sun between sections */
.divider {
  display: flex;
  align-items: center;
  gap: 14px;
  max-width: 260px;
  margin: 0 auto;
  color: var(--brass);
  opacity: 0.7;
}

.divider::before,
.divider::after {
  content: "";
  flex: 1;
  height: 1px;
  background: linear-gradient(90deg, rgba(227, 174, 91, 0), rgba(227, 174, 91, 0.6));
}

.divider::after {
  transform: scaleX(-1);
}

.divider svg {
  width: 22px;
  height: 22px;
}

/* Scenes: three painted tables, each with its opponent */
.scene-list {
  list-style: none;
  padding: 4px var(--gutter) 18px;
  margin: 0 calc(var(--gutter) * -1);
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: min(290px, calc(100vw - 70px));
  gap: 14px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-padding: 0 var(--gutter);
  scrollbar-width: none;
}

.scene-list::-webkit-scrollbar {
  display: none;
}

.scene-list li {
  margin: 0;
  scroll-snap-align: start;
}

.scene-card {
  position: relative;
  margin: 0;
  border-radius: 24px;
  overflow: hidden;
  aspect-ratio: 3 / 4;
  background: #1A110C;
  box-shadow: 0 0 0 1px rgba(245, 208, 142, 0.18), 0 18px 40px rgba(0, 0, 0, 0.5);
}

.scene-card img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.6s ease;
}

.scene-card:hover img {
  transform: scale(1.04);
}

.scene-card .scene-text {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 60px 18px 16px;
  background: linear-gradient(180deg, rgba(18, 11, 8, 0) 0%, rgba(18, 11, 8, 0.82) 45%, rgba(18, 11, 8, 0.96) 100%);
}

.scene-card h3 {
  font-size: 1.35rem;
  margin: 0 0 0.2em;
}

.scene-card p {
  margin: 0;
  color: var(--text);
  font-size: 0.98rem;
  line-height: 1.4;
}

.scene-card .quote {
  display: block;
  margin-top: 8px;
  color: var(--brass-light);
  font-style: italic;
  font-size: 0.95rem;
}

.scroll-hint {
  text-align: center;
  color: var(--text-faint);
  font-size: 0.9rem;
  margin: 4px 0 0;
}

/* Split sections: phone screenshot beside the words */
.split {
  display: grid;
  gap: 34px;
  align-items: center;
}

.split .phone {
  order: 2;
  width: min(236px, 66vw);
  margin: 0 auto;
}

.split-copy h2 {
  text-align: left;
}

.split-copy .kicker {
  display: block;
}

.modes {
  list-style: none;
  padding: 0;
  margin: 22px 0 0;
  display: grid;
  gap: 12px;
}

.modes li,
.tile {
  margin: 0;
  display: grid;
  grid-template-columns: 46px 1fr;
  column-gap: 14px;
  align-items: start;
  padding: 16px 16px 14px;
  border-radius: 18px;
  border: 1px solid var(--border);
  background: linear-gradient(180deg, rgba(36, 22, 15, 0.9) 0%, var(--card) 100%);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.3);
}

.modes h3,
.tile h3 {
  font-size: 1.15rem;
  margin: 0 0 0.15em;
}

.modes p,
.tile p {
  margin: 0;
  color: var(--text-muted);
  font-size: 0.98rem;
  line-height: 1.45;
}

.modes .feature-icon,
.tile .feature-icon {
  grid-row: 1 / span 2;
  margin: 0;
}

.feature-icon {
  color: var(--brass-light);
  display: inline-grid;
  place-items: center;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, rgba(245, 208, 142, 0.28), rgba(227, 174, 91, 0.08));
  border: 1px solid var(--border-brass);
}

.feature-icon svg {
  width: 24px;
  height: 24px;
}

.tiles {
  list-style: none;
  padding: 0;
  margin: 22px 0 0;
  display: grid;
  gap: 12px;
}

/* Cabinet: coins on an ember-red velvet tray */
.tray {
  position: relative;
  margin: 0 auto;
  max-width: 900px;
  padding: 26px 14px 22px;
  border-radius: 28px;
  background:
    radial-gradient(ellipse 80% 70% at 50% 30%, rgba(214, 74, 44, 0.35), rgba(214, 74, 44, 0) 70%),
    linear-gradient(180deg, #6E1A12 0%, #4A100B 100%);
  box-shadow:
    inset 0 0 0 2px rgba(245, 208, 142, 0.35),
    inset 0 0 0 9px #2A1810,
    inset 0 0 0 10px rgba(245, 208, 142, 0.25),
    inset 0 18px 40px rgba(0, 0, 0, 0.45),
    0 24px 60px rgba(0, 0, 0, 0.5);
}

.coins {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(92px, 1fr));
  gap: 16px 4px;
}

.coins li {
  margin: 0;
  text-align: center;
}

.coin-btn {
  display: block;
  width: 100%;
  padding: 4px 0;
  border: 0;
  background: none;
  color: inherit;
  font: inherit;
  cursor: pointer;
  perspective: 600px;
  -webkit-tap-highlight-color: transparent;
}

.coin-3d {
  position: relative;
  display: block;
  width: min(118px, 100%);
  aspect-ratio: 1;
  margin: 0 auto;
  transform-style: preserve-3d;
  transition: transform 0.9s cubic-bezier(0.3, 1.4, 0.5, 1);
}

.coin-3d img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  filter: drop-shadow(0 8px 10px rgba(0, 0, 0, 0.5));
}

.coin-3d img + img {
  transform: rotateY(180deg);
}

.coin-btn[aria-pressed="true"] .coin-3d {
  transform: rotateY(180deg);
}

@media (hover: hover) {
  .coin-btn:hover .coin-3d {
    transform: rotateY(180deg);
  }

  .coin-btn[aria-pressed="true"]:hover .coin-3d {
    transform: rotateY(360deg);
  }
}

.coin-label {
  display: block;
  margin-top: 8px;
  font-family: var(--font-display);
  font-weight: 700;
  color: #FCE3B0;
  font-size: 0.9rem;
  line-height: 1.2;
  hyphens: manual;
  -webkit-hyphens: manual;
  overflow-wrap: normal;
}

.coin-label small {
  display: block;
  font-family: var(--font-body);
  font-weight: 400;
  color: rgba(246, 234, 211, 0.75);
  font-size: 0.85rem;
}

:lang(hi) .coin-label {
  font-weight: 400;
}

.tray-note {
  text-align: center;
  color: rgba(246, 234, 211, 0.7);
  font-size: 0.88rem;
  margin: 14px 0 0;
}

.stats {
  list-style: none;
  padding: 0;
  margin: 28px auto 0;
  max-width: 900px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
}

.stats li {
  margin: 0;
  padding: 14px 6px;
  border-radius: 18px;
  border: 1px solid var(--border-brass);
  background: rgba(26, 17, 12, 0.7);
  text-align: center;
}

.stats strong {
  display: block;
  font-family: var(--font-display);
  font-size: 2.2rem;
  line-height: 1.05;
  color: var(--brass-light);
}

.stats span {
  display: block;
  color: var(--text-muted);
  font-size: 0.92rem;
  line-height: 1.3;
}

/* Fairness steps */
.steps {
  list-style: none;
  padding: 0;
  margin: 22px 0 0;
  counter-reset: step;
  display: grid;
  gap: 10px;
}

.steps li {
  margin: 0;
  position: relative;
  padding: 2px 0 2px 46px;
  counter-increment: step;
}

.steps li::before {
  content: counter(step);
  position: absolute;
  left: 0;
  top: 0;
  width: 32px;
  height: 32px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: linear-gradient(180deg, #F5D08E 0%, #E3AE5B 50%, #B8823A 100%);
  color: var(--on-brass);
  font-weight: 700;
}

.steps strong {
  display: block;
  color: var(--text);
}

.steps span {
  color: var(--text-muted);
}

.callout {
  margin: 20px 0 0;
  padding: 14px 16px;
  border-radius: 16px;
  border: 1px dashed var(--border-brass);
  color: var(--text-muted);
}

.callout strong {
  color: var(--brass-light);
}

/* Widgets and Siri */
.extras {
  display: grid;
  gap: 14px;
  max-width: 980px;
  margin: 0 auto;
}

.extra {
  padding: 22px 20px 20px;
  border-radius: 24px;
  border: 1px solid var(--border);
  background:
    radial-gradient(circle at 50% 0%, rgba(var(--ember), 0.12), rgba(var(--ember), 0) 60%),
    linear-gradient(180deg, rgba(36, 22, 15, 0.9) 0%, var(--card) 100%);
  text-align: center;
}

.extra h3 {
  margin: 18px 0 0.25em;
  font-size: 1.25rem;
}

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

.extra-art {
  height: 150px;
  display: grid;
  place-items: center;
}

/* A home-screen widget, drawn in CSS around the World coin */
.widget {
  width: 132px;
  height: 132px;
  border-radius: 30px;
  padding: 14px;
  display: grid;
  place-items: center;
  align-content: center;
  gap: 6px;
  background: linear-gradient(160deg, #2C1B12, #150D09);
  box-shadow: 0 0 0 1px rgba(245, 208, 142, 0.2), 0 16px 30px rgba(0, 0, 0, 0.5);
  color: var(--text-muted);
  font-size: 0.8rem;
  line-height: 1.2;
}

.widget img {
  width: 74px;
  height: 74px;
  filter: drop-shadow(0 6px 8px rgba(0, 0, 0, 0.5));
}

.lock {
  display: flex;
  align-items: center;
  gap: 16px;
}

.lock-ring {
  width: 74px;
  height: 74px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: rgba(246, 234, 211, 0.12);
  box-shadow: inset 0 0 0 1px rgba(246, 234, 211, 0.2);
}

.lock-ring img {
  width: 52px;
  height: 52px;
  filter: grayscale(1) brightness(1.6) contrast(0.9);
  opacity: 0.9;
}

.cc-button {
  width: 74px;
  height: 74px;
  border-radius: 22px;
  display: grid;
  place-items: center;
  background: linear-gradient(180deg, #F5D08E 0%, #E3AE5B 50%, #B8823A 100%);
  color: var(--on-brass);
  box-shadow: 0 10px 24px rgba(227, 174, 91, 0.3);
}

.cc-button svg {
  width: 34px;
  height: 34px;
}

.siri {
  max-width: 260px;
  padding: 14px 18px;
  border-radius: 20px 20px 6px 20px;
  background: linear-gradient(135deg, rgba(134, 169, 222, 0.28), rgba(179, 56, 32, 0.3));
  box-shadow: 0 0 0 1px rgba(246, 234, 211, 0.18), 0 14px 30px rgba(0, 0, 0, 0.4);
  color: var(--text);
  font-size: 1.1rem;
  font-weight: 500;
  line-height: 1.35;
}

.siri-reply {
  display: block;
  margin-top: 8px;
  font-size: 0.9rem;
  color: var(--text-muted);
  font-weight: 400;
}

.platform {
  display: inline-block;
  margin-top: 12px;
  font-size: 0.8rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-faint);
}

:lang(hi) .platform {
  letter-spacing: 0;
  text-transform: none;
}

/* Closing call to action, with the privacy promise */
.finale {
  padding: 30px 0 72px;
}

.finale-card {
  position: relative;
  overflow: hidden;
  max-width: 980px;
  margin: 0 auto;
  padding: 40px 20px 34px;
  border-radius: 32px;
  text-align: center;
  background:
    radial-gradient(ellipse 70% 60% at 50% 0%, rgba(214, 74, 44, 0.45), rgba(214, 74, 44, 0) 70%),
    linear-gradient(180deg, #3A160E 0%, #1A0E09 100%);
  box-shadow: inset 0 0 0 1px rgba(245, 208, 142, 0.25), 0 30px 70px rgba(0, 0, 0, 0.55);
}

.finale-card .hero-icon {
  width: 96px;
  height: 96px;
  border-radius: 24px;
}

.finale h2 {
  font-size: clamp(1.9rem, 7vw, 2.8rem);
  color: var(--text);
  margin: 0 0 0.3em;
}

.finale .lede {
  margin-bottom: 1.4em;
}

.promise-line {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  max-width: 560px;
  margin: 26px auto 0;
  padding-top: 20px;
  border-top: 1px solid rgba(245, 208, 142, 0.18);
  color: var(--text-muted);
  font-size: 0.98rem;
  text-align: left;
}

.promise-line svg {
  flex: none;
  width: 28px;
  height: 28px;
  color: var(--brass-light);
}

.promise-line p {
  margin: 0;
}

/* ---------- Wider screens ---------- */

@media (min-width: 600px) {
  .scene-list {
    grid-auto-columns: min(42%, 320px);
  }

  .tiles {
    grid-template-columns: 1fr 1fr;
  }

  .extras {
    grid-template-columns: repeat(3, 1fr);
  }

  .stats {
    gap: 12px;
  }

  .stats li {
    padding: 18px 14px;
  }

  .stats span {
    font-size: 1rem;
  }

  .finale-card {
    padding: 52px 40px 40px;
  }
}

@media (min-width: 900px) {
  .hero {
    padding: 30px 0 60px;
  }

  .hero-grid {
    grid-template-columns: 1.05fr 0.95fr;
    gap: 40px;
  }

  .hero-copy {
    text-align: left;
  }

  .hero-icon {
    margin-left: 0;
  }

  .pitch,
  .hero .lede {
    margin-left: 0;
  }

  .stores,
  .badges {
    justify-content: flex-start;
  }

  .hero-art {
    width: 330px;
  }

  .section {
    padding: 88px 0;
  }

  .scene-list {
    grid-auto-flow: row;
    grid-template-columns: repeat(3, 1fr);
    overflow: visible;
    margin: 0;
    padding: 4px 0 0;
  }

  .scroll-hint {
    display: none;
  }

  .split {
    grid-template-columns: 300px 1fr;
    gap: 64px;
  }

  .split--flip {
    grid-template-columns: 1fr 300px;
  }

  .split.split--flip .phone {
    order: 2;
  }

  .split .phone {
    order: 0;
    width: 290px;
  }

  .coin-label {
    font-size: 1rem;
  }

  .tray {
    padding: 34px 24px 26px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .coin-stage img,
  .toss-coin,
  .toss-shadow,
  .hero-coin {
    animation: none;
  }

  .bubble {
    animation: none;
  }

  .bubble--1 {
    opacity: 1;
  }

  .coin-3d,
  .scene-card img {
    transition: none;
  }
}

/* Cards (privacy summary, support contact) */

.card {
  background: linear-gradient(180deg, rgba(36, 22, 15, 0.9) 0%, var(--card) 100%);
  border: 1px solid var(--border);
  border-radius: var(--radius-card);
  padding: 18px 18px 6px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35);
}

.card h3 {
  margin-bottom: 0.3em;
}

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

/* Policy and support pages */

.page-head {
  padding: 18px 0 6px;
}

.page-head h1 {
  font-size: clamp(1.65rem, 7.2vw, 2.8rem);
  hyphens: auto;
  -webkit-hyphens: auto;
}

h2,
h3,
.faq summary {
  hyphens: auto;
  -webkit-hyphens: auto;
}

.meta {
  color: var(--text-faint);
  font-size: 0.95rem;
}

.summary {
  margin: 18px 0 28px;
  border-color: var(--border-brass);
}

.summary h2 {
  font-size: 1.3rem;
}

.summary p {
  color: var(--text);
}

.prose h2 {
  margin-top: 1.8em;
  padding-top: 0.2em;
}

.prose p,
.prose li {
  color: #EADCC2;
}

.prose .contact-card {
  margin-top: 0.6em;
}

.contact-card p {
  margin: 0 0 0.6em;
}

.email {
  font-weight: 700;
  overflow-wrap: anywhere;
}

.faq details {
  border: 1px solid var(--border);
  border-radius: 16px;
  background: var(--glass);
  margin: 0 0 10px;
}

.faq details[open] {
  border-color: var(--border-brass);
  background: rgba(26, 17, 12, 0.85);
}

.faq summary {
  cursor: pointer;
  list-style: none;
  padding: 14px 44px 14px 16px;
  min-height: 44px;
  position: relative;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.12rem;
  color: var(--brass-light);
  line-height: 1.35;
}

:lang(hi) .faq summary {
  font-weight: 400;
  line-height: 1.6;
}

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

.faq summary::after {
  content: "";
  position: absolute;
  right: 18px;
  top: 50%;
  width: 9px;
  height: 9px;
  border-right: 2px solid var(--brass);
  border-bottom: 2px solid var(--brass);
  transform: translateY(-70%) rotate(45deg);
  transition: transform 0.2s ease;
}

.faq details[open] summary::after {
  transform: translateY(-30%) rotate(-135deg);
}

.faq .answer {
  padding: 0 16px 4px;
}

.path {
  color: var(--text);
  font-weight: 500;
  white-space: nowrap;
}

/* Footer */

.foot {
  border-top: 1px solid var(--border);
  background: linear-gradient(180deg, rgba(20, 12, 8, 0.6), var(--sheet));
  padding: 22px 0 calc(26px + env(safe-area-inset-bottom));
  font-size: 0.95rem;
  color: var(--text-faint);
}

.foot .wrap {
  display: grid;
  gap: 14px;
}

.foot ul {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 4px 6px;
}

.foot li {
  margin: 0;
}

.foot a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0 10px;
  border-radius: var(--radius-pill);
  color: var(--text-muted);
  text-decoration: none;
}

.foot a:hover {
  color: var(--brass-light);
  background: var(--glass);
}

.foot .langs a[aria-current="true"] {
  color: var(--on-brass);
  background: var(--brass);
  font-weight: 700;
}

.foot .langs-label {
  display: block;
  font-size: 0.8rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin: 0 0 2px 10px;
}

.foot .tagline {
  margin: 0 10px;
}

/* 404 */

.lost {
  text-align: center;
  padding-top: 24px;
}

.lost .coin-stage {
  width: 120px;
}

.lost ul {
  list-style: none;
  padding: 0;
  margin: 24px auto 0;
  max-width: 420px;
  text-align: left;
}

.lost li {
  margin: 0 0 10px;
}

.lost li a {
  display: block;
  padding: 12px 16px;
  border-radius: 14px;
  border: 1px solid var(--border);
  background: var(--glass);
  text-decoration: none;
  color: var(--text);
}

.lost li a:hover {
  border-color: var(--border-brass);
}

.lost li span {
  display: block;
  color: var(--brass-light);
  font-size: 0.85rem;
}

/* Home: small notes under sections */

.more-scenes,
.cabinet-more {
  max-width: 640px;
  margin: 22px auto 0;
  text-align: center;
  color: var(--text-faint);
  font-size: 0.98rem;
}

.cabinet-more {
  color: var(--text-muted);
}

.finale-card .hero-icon {
  margin: 0 auto 18px;
}

/* Big headings on the home page break between words, never inside one. */
[data-page="home"] h2,
[data-page="home"] h3 {
  hyphens: manual;
  -webkit-hyphens: manual;
}

/* On a phone the home page's header shows only the app icon (the wordmark is right below it), so long menu
   labels in Russian, French or German still fit on one line. Screen readers still hear the name. */
@media (max-width: 479px) {
  [data-page="home"] .brand-name {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
  }

  [data-page="home"] .top nav a {
    padding: 8px 8px;
  }
}