/* Game Factory — public website
   Design system: "Deep Arena" (matches the Mini App and the brand guidelines).
   Zero dependencies. Self-hosted font. */

@font-face {
  font-family: "GF Display";
  src: url("../assets/fonts/anton.woff2?v=2") format("woff2");
  font-display: swap;
}

:root {
  /* one vertical rhythm for every section (owner: balanced spacing) */
  --section-pad: 110px;
  --ink: #04060a;
  --panel: #090e16;
  --panel-2: #0d1420;
  --line: rgba(120, 176, 255, 0.2);
  --cyan: #34d9ff;
  --blue: #2f7bff;
  --magenta: #e33a92;
  /* Winner gold. Owner instruction 10 Aug 2026: prize amounts on the winners page
     are gold. This REVERSES the earlier no-gold rule for that page. The value is
     the Mini App's own --gold (#f4c65a), so the amount a winner sees on their
     phone and the amount on the website are the same colour. Gold stays a winner
     accent only: do not use it for headings, links or anything else on the site. */
  --gold: #f4c65a;
  --white: #f4f7fb;
  --muted: #9ba9bd;
  /* ONE size for every explaining paragraph on the site (owner, 5 Aug: big
     headings may vary, body copy must not). Nine different sizes had crept in.
     --lede is the deliberately larger intro under a page title. Fine print
     under a button (.microcopy) is intentionally smaller and stays out of this. */
  --body-size: 1rem;
  /* ONE colour for every explaining paragraph, same principle as --body-size.
     Nine different greys had crept in, the dimmest at roughly half the
     brightness of the document pages and below the contrast guideline. */
  --body-ink: #a5b2c4;
  /* Intro paragraphs match the body size (owner, 5 Aug: explaining paragraphs
     must all be the same). Raise this to about 1.15rem if the opening line
     under a page title should read larger than the rest. */
  --lede-size: 1rem;
  --display: "GF Display", Impact, "Arial Narrow", sans-serif;
  --body: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

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

html {
  scroll-behavior: smooth;
  background: var(--ink);
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background: radial-gradient(circle at 80% 8%, rgba(30, 84, 164, 0.2), transparent 28rem), var(--ink);
  color: var(--white);
  font-family: var(--body);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

a { color: inherit; text-decoration: none; }
img { display: block; max-width: 100%; height: auto; }
h1, h2, h3, p { margin-top: 0; }
h1, h2 { font-family: var(--display); font-weight: 400; letter-spacing: 0.015em; }
:focus-visible { outline: 2px solid var(--cyan); outline-offset: 4px; }

.skip-link {
  position: absolute;
  left: -9999px;
  z-index: 100;
  padding: 12px 18px;
  background: var(--cyan);
  color: #02070c;
  font-weight: 800;
}
.skip-link:focus { left: 24px; top: 18px; }

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

.site-header {
  position: absolute;
  z-index: 20;
  top: 0;
  left: 50%;
  width: min(1400px, calc(100% - 64px));
  height: 92px;
  transform: translateX(-50%);
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  border-bottom: 1px solid var(--line);
}

.brand-lockup {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  width: fit-content;
  font-family: var(--display);
  letter-spacing: 0.08em;
  font-size: 1.08rem;
}

.brand-lockup img {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 1px solid rgba(52, 217, 255, 0.42);
  box-shadow: 0 0 24px rgba(52, 217, 255, 0.18);
}

nav {
  display: flex;
  gap: 34px;
  color: #b8c3d4;
  font-size: 0.82rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.12em;
}
nav a { transition: color 180ms ease; }
nav a:hover, nav a:focus-visible { color: var(--cyan); }

.nav-cta {
  justify-self: end;
  border: 1px solid rgba(52, 217, 255, 0.5);
  padding: 12px 19px;
  font-size: 0.77rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.13em;
  background: rgba(24, 94, 128, 0.11);
  transition: background 180ms ease, box-shadow 180ms ease;
}
.nav-cta:hover, .nav-cta:focus-visible {
  background: rgba(52, 217, 255, 0.12);
  box-shadow: 0 0 28px rgba(52, 217, 255, 0.13);
}

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

.hero {
  min-height: 860px;
  position: relative;
  overflow: hidden;
  display: grid;
  grid-template-columns: minmax(340px, 0.9fr) minmax(420px, 1.1fr);
  align-items: center;
  gap: 40px;
  padding: 146px max(32px, calc((100vw - 1400px) / 2)) var(--section-pad);
  isolation: isolate;
}

.hero-grid {
  position: absolute;
  z-index: -3;
  inset: 0;
  opacity: 0.22;
  background-image: linear-gradient(rgba(62, 132, 213, 0.12) 1px, transparent 1px),
    linear-gradient(90deg, rgba(62, 132, 213, 0.12) 1px, transparent 1px);
  background-size: 72px 72px;
  mask-image: linear-gradient(to bottom, transparent, black 18%, black 75%, transparent);
}

.hero-glow {
  position: absolute;
  z-index: -2;
  top: 8%;
  right: -8%;
  width: 70vw;
  height: 70vw;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(47, 123, 255, 0.2), rgba(47, 123, 255, 0.03) 48%, transparent 68%);
  filter: blur(20px);
}

.hero-copy { position: relative; z-index: 2; padding-top: 12px; }

.live-pill {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 48px;
  padding: 9px 14px;
  border: 1px solid rgba(52, 217, 255, 0.28);
  background: rgba(6, 13, 22, 0.65);
  color: #cfeef7;
  font-size: 0.72rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  backdrop-filter: blur(12px);
}

.live-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--cyan);
  box-shadow: 0 0 12px var(--cyan);
  animation: pulse 1.8s infinite;
}
@keyframes pulse { 50% { opacity: 0.35; transform: scale(0.75); } }

.overline {
  margin: 0 0 14px;
  color: var(--cyan);
  font-size: 0.75rem;
  font-weight: 850;
  text-transform: uppercase;
  letter-spacing: 0.28em;
}

h1 {
  margin-bottom: 25px;
  max-width: 760px;
  font-size: clamp(4.5rem, 8vw, 8.3rem);
  line-height: 0.92;
  text-wrap: balance;
}

h1 span {
  display: block;
  color: transparent;
  background: linear-gradient(92deg, #ffffff 2%, #87eaff 40%, #3186ff 92%);
  background-clip: text;
  -webkit-background-clip: text;
  filter: drop-shadow(0 0 24px rgba(52, 217, 255, 0.16));
}

.hero-lede {
  max-width: 590px;
  margin-bottom: 34px;
  color: var(--body-ink);
  font-size: var(--lede-size);
  line-height: 1.72;
}

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

.button {
  min-height: 56px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 24px;
  padding: 0 24px;
  border: 1px solid transparent;
  font-size: 0.8rem;
  font-weight: 850;
  text-transform: uppercase;
  letter-spacing: 0.13em;
  transition: transform 180ms ease, box-shadow 180ms ease, background 180ms ease;
}
.button:hover, .button:focus-visible { transform: translateY(-2px); }

.button-primary {
  color: #02070c;
  background: linear-gradient(100deg, var(--cyan), #68a8ff);
  box-shadow: 0 0 32px rgba(52, 217, 255, 0.22);
}
.button-primary:hover, .button-primary:focus-visible { box-shadow: 0 0 44px rgba(52, 217, 255, 0.38); }

.button-ghost {
  border-color: rgba(160, 187, 223, 0.27);
  color: #d5dfec;
  background: rgba(10, 18, 29, 0.5);
}
.button-ghost:hover, .button-ghost:focus-visible { background: rgba(24, 39, 58, 0.75); }

.microcopy { margin: 18px 0 0; color: #72839b; font-size: 0.78rem; }

.hero-visual { position: relative; min-height: 560px; display: grid; place-items: center; }

.visual-frame {
  position: relative;
  width: min(100%, 520px);
  aspect-ratio: 0.84;
  overflow: hidden;
  clip-path: polygon(12% 0, 88% 0, 100% 10%, 100% 90%, 88% 100%, 12% 100%, 0 90%, 0 10%);
  border: 1px solid rgba(87, 191, 255, 0.3);
  background: #07101b;
  box-shadow: 0 40px 100px rgba(0, 0, 0, 0.75), 0 0 70px rgba(47, 123, 255, 0.18);
}

.visual-frame::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgba(4, 6, 10, 0.9), transparent 20%, transparent 80%, rgba(4, 6, 10, 0.8)),
    linear-gradient(to top, rgba(4, 6, 10, 0.92), transparent 35%);
  pointer-events: none;
}

.visual-frame::before {
  content: "";
  position: absolute;
  z-index: 1;
  inset: 0;
  background: linear-gradient(140deg, rgba(25, 128, 196, 0.22), transparent 42%, rgba(47, 123, 255, 0.12));
  mix-blend-mode: screen;
  pointer-events: none;
}

.visual-frame img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
  transform: scale(1.01);
}

.scanline {
  position: absolute;
  z-index: 2;
  left: 6%;
  right: 6%;
  top: 18%;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--cyan), transparent);
  box-shadow: 0 0 10px var(--cyan);
  opacity: 0.7;
  animation: scan 4.5s ease-in-out infinite;
}
@keyframes scan {
  0%, 100% { top: 18%; opacity: 0; }
  15%, 85% { opacity: 0.8; }
  50% { top: 82%; }
}

.frame-corner {
  position: absolute;
  z-index: 3;
  width: 70px;
  height: 70px;
  border-color: var(--cyan);
  filter: drop-shadow(0 0 8px rgba(52, 217, 255, 0.6));
}
.corner-a { left: 28px; top: 28px; border-left: 2px solid; border-top: 2px solid; }
.corner-b { right: 28px; bottom: 28px; border-right: 2px solid; border-bottom: 2px solid; }

.status-card {
  position: absolute;
  z-index: 4;
  min-width: 165px;
  padding: 13px 16px;
  border: 1px solid rgba(74, 189, 255, 0.35);
  background: rgba(3, 8, 14, 0.88);
  backdrop-filter: blur(14px);
  box-shadow: 0 16px 35px rgba(0, 0, 0, 0.35);
}
.status-card span { display: block; color: #7289a7; font-size: 0.6rem; font-weight: 800; letter-spacing: 0.18em; }
.status-card strong { display: block; margin-top: 5px; color: var(--cyan); font-size: 0.78rem; letter-spacing: 0.11em; }
.status-top { top: 14%; right: -12px; }
.status-bottom { left: -14px; bottom: 17%; }


/* ---------- signal strip ---------- */

.signal-strip {
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 34px;
  padding: 17px 24px;
  background: linear-gradient(90deg, #138bb7, var(--cyan), #2971d9);
  color: #031018;
  font-family: var(--display);
  font-size: 1rem;
  letter-spacing: 0.13em;
  white-space: nowrap;
}
.signal-strip i { font-size: 0.5rem; font-style: normal; }

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

.section {
  width: min(1400px, calc(100% - 64px));
  margin: 0 auto;
  padding: var(--section-pad) 0;
}

.section-heading {
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  align-items: end;
  gap: 60px;
  margin-bottom: 52px;
}

h2 { margin-bottom: 0; font-size: clamp(3.3rem, 6vw, 6.5rem); line-height: 0.94; }
.section-heading > p { max-width: 560px; margin: 0 0 4px; color: var(--body-ink); line-height: 1.75; }
/* Right hand column when it carries more than a paragraph, e.g. the games section
   where the join buttons now live. Wrapping them in one element keeps the two
   column grid intact; without it the buttons become a third grid item and drop
   onto their own row. */
/* The games section's right column is wider than the default, so the two buttons
   sit side by side as they did in the hero. At the default 0.9fr they wrap and
   stack, which reads as a mistake next to a heading this size. */
.factory-section .section-heading { grid-template-columns: 1fr 1fr; }
.heading-body > p { max-width: 560px; margin: 0; color: var(--body-ink); line-height: 1.75; }
.heading-body .hero-actions { margin-top: 26px; }
.heading-body .microcopy { margin: 16px 0 0; }

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

.quiz-stage {
  position: relative;
  overflow: hidden;
  min-height: 510px;
  border: 1px solid var(--line);
  background: #05070b;
}
.quiz-stage::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(3, 5, 9, 0.94), transparent 48%),
    linear-gradient(90deg, rgba(7, 19, 34, 0.4), transparent 50%, rgba(4, 6, 10, 0.3));
}
.quiz-stage img { width: 100%; height: 100%; min-height: 510px; object-fit: cover; object-position: center; }

.quiz-stage-copy {
  position: absolute;
  z-index: 2;
  right: 34px;
  bottom: 30px;
  left: 34px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 20px;
  padding-top: 18px;
  border-top: 1px solid rgba(147, 190, 230, 0.28);
}
.quiz-stage-copy span { color: #73859e; font-size: 0.66rem; font-weight: 800; letter-spacing: 0.2em; }
.quiz-stage-copy strong { color: var(--cyan); font-size: 0.75rem; letter-spacing: 0.13em; }

.game-card {
  position: relative;
  overflow: hidden;
  min-height: 330px;
  padding: 24px;
  border: 1px solid var(--line);
  background: linear-gradient(145deg, rgba(28, 50, 78, 0.42), transparent 48%), var(--panel);
  transition: transform 220ms ease, border-color 220ms ease, background 220ms ease;
}
.game-card::before {
  content: "";
  position: absolute;
  right: -70px;
  bottom: -90px;
  width: 190px;
  height: 190px;
  border: 1px solid rgba(52, 217, 255, 0.18);
  border-radius: 50%;
  box-shadow: 0 0 60px rgba(52, 217, 255, 0.08);
}
.game-card:hover {
  transform: translateY(-7px);
  border-color: rgba(52, 217, 255, 0.45);
  background: linear-gradient(145deg, rgba(24, 84, 120, 0.5), transparent 52%), var(--panel);
}
.game-card-top {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 74px;
  color: #69809e;
  font-size: 0.68rem;
  letter-spacing: 0.18em;
}
.game-card-top b {
  color: var(--cyan);
  font-family: var(--display);
  font-size: 3.2rem;
  font-weight: 400;
  line-height: 0.8;
  text-shadow: 0 0 20px rgba(52, 217, 255, 0.36);
}
.game-card h3 {
  margin-bottom: 13px;
  font-family: var(--display);
  font-size: 1.7rem;
  font-weight: 400;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.game-card p { margin-bottom: 0; color: var(--body-ink); font-size: var(--body-size); line-height: 1.7; }

.card-line {
  position: absolute;
  right: 24px;
  bottom: 23px;
  left: 24px;
  height: 1px;
  background: linear-gradient(90deg, var(--cyan), transparent);
  transform: scaleX(0.28);
  transform-origin: left;
  transition: transform 220ms ease;
}
.game-card:hover .card-line { transform: scaleX(1); }

/* ---------- more games (factory) — locked mystery cards ---------- */

.factory-section,
.quiz-section { border-top: 1px solid var(--line); }
.game-card-locked {
  border-style: dashed;
  background:
    repeating-linear-gradient(-45deg, rgba(255, 255, 255, 0.014) 0 10px, transparent 10px 22px),
    var(--panel);
}
.game-card-locked .game-card-top { color: #4d5f74; }
.game-card-locked .game-card-top b {
  color: #3e5064;
  text-shadow: none;
}
.game-card-locked h3 {
  color: #55677c;
  letter-spacing: 0.28em;
}
/* DELIBERATE EXCEPTION to --body-ink (owner, 5 Aug). The locked cards stay dim
   because the dimness is what makes them read as locked. I raised that this is
   the faintest text on the site and he chose to keep it. Do not "fix" this to
   the shared body colour. */
.game-card-locked p { color: #66748a; }
.game-card-locked:hover {
  transform: none;
  border-color: var(--line);
}
.game-card-locked .card-line {
  background: linear-gradient(90deg, #3e5064, transparent);
}
.game-card-locked:hover .card-line { transform: scaleX(0.28); }

/* ---------- see the game (real app screens) ---------- */

.demo-section { border-top: 1px solid var(--line); }

/* one horizontal line at EVERY width (owner rule) — drag/swipe to see the rest.
   padding-top gives the hover lift headroom so the frame never clips. */
.demo-strip {
  margin: 0;
  padding: 12px 0 14px;
  list-style: none;
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: clamp(240px, 22vw, 320px);
  gap: clamp(16px, 2vw, 30px);
  overflow-x: auto;
  /* proximity, not mandatory: the auto-drift needs free positions, and manual
     swipes still settle onto a slide when close */
  scroll-snap-type: x proximity;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
}

.demo-slide { display: flex; flex-direction: column; scroll-snap-align: start; }

/* arrow controls (owner, 30 Jul): the visitor moves the strip, nothing moves itself */
.strip-wrap { position: relative; }

.strip-arrow {
  position: absolute;
  z-index: 3;
  top: 38%;
  display: grid;
  place-items: center;
  width: 46px;
  height: 66px;
  padding: 0;
  border: 1px solid rgba(120, 176, 255, 0.28);
  background: rgba(6, 13, 22, 0.72);
  color: var(--white);
  cursor: pointer;
  backdrop-filter: blur(10px);
  transition: background 180ms ease, border-color 180ms ease, box-shadow 180ms ease;
}
.strip-arrow:hover, .strip-arrow:focus-visible {
  border-color: rgba(52, 217, 255, 0.6);
  background: rgba(11, 27, 43, 0.9);
  box-shadow: 0 0 26px rgba(52, 217, 255, 0.18);
}
.strip-arrow[hidden] { display: none; }
.strip-arrow svg { width: 24px; height: 24px; }
.strip-arrow-prev { left: -10px; }
.strip-arrow-prev svg { transform: rotate(180deg); }
.strip-arrow-next { right: -10px; }

.phone-frame {
  position: relative;
  overflow: hidden;
  border: 1px solid rgba(87, 191, 255, 0.28);
  border-radius: 26px;
  background: #04060c;
  box-shadow: 0 26px 60px rgba(0, 0, 0, 0.6), 0 0 42px rgba(47, 123, 255, 0.1);
  transition: transform 240ms ease, box-shadow 240ms ease, border-color 240ms ease;
}
.demo-slide:hover .phone-frame {
  transform: translateY(-8px);
  border-color: rgba(52, 217, 255, 0.5);
  box-shadow: 0 34px 70px rgba(0, 0, 0, 0.65), 0 0 58px rgba(52, 217, 255, 0.2);
}
.phone-frame::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 25px;
  border: 1px solid rgba(255, 255, 255, 0.05);
  pointer-events: none;
}
.phone-frame img { width: 100%; height: auto; }

.demo-caption { padding: 22px 4px 0; }
.demo-caption span {
  display: block;
  margin-bottom: 8px;
  color: var(--cyan);
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 0.2em;
}
.demo-caption strong {
  display: block;
  margin-bottom: 7px;
  font-family: var(--display);
  font-size: 1.15rem;
  font-weight: 400;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.demo-caption p { margin: 0; color: var(--body-ink); font-size: var(--body-size); line-height: 1.6; }

/* ---------- fair by design ---------- */

.fair-section { border-top: 1px solid var(--line); }

.fair-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
}

.fair-item {
  padding: 34px 30px;
  background: var(--ink);
  transition: background 220ms ease;
}
.fair-item:hover { background: var(--panel); }

.fair-item h3 {
  margin-bottom: 12px;
  display: flex;
  align-items: center;
  gap: 14px;
  font-family: var(--display);
  font-size: 1.35rem;
  font-weight: 400;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.fair-item h3 b {
  color: var(--cyan);
  font-size: 0.72rem;
  font-family: var(--body);
  font-weight: 800;
  letter-spacing: 0.2em;
}
.fair-item p { margin: 0; color: var(--body-ink); font-size: var(--body-size); line-height: 1.75; }

.fair-note {
  margin-top: 26px;
  padding-top: 22px;
  border-top: 1px solid var(--line);
  color: #72839b;
  font-size: var(--body-size);
  line-height: 1.7;
  max-width: 780px;
}

/* ---------- game master ---------- */

.game-master-section {
  display: grid;
  grid-template-columns: 1fr minmax(420px, 0.95fr);
  gap: clamp(50px, 8vw, 120px);
  align-items: center;
  border-top: 1px solid var(--line);
}
.game-master-copy > p:not(.overline) { max-width: 610px; margin: 0 0 38px; color: var(--body-ink); line-height: 1.78; }

.master-story {
  max-width: 610px;
  margin: 30px 0 34px;
}
.master-story p {
  margin: 0 0 16px;
  color: var(--body-ink);
  line-height: 1.78;
}

.master-story p:last-child {
  margin-bottom: 0;
  color: var(--cyan);
  font-weight: 600;
}

.master-rule {
  max-width: 620px;
  display: grid;
  grid-template-columns: 100px 1fr;
  gap: 20px;
  padding: 22px 0;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}
.master-rule span { color: var(--cyan); font-family: var(--display); letter-spacing: 0.1em; }
.master-rule strong { color: #c8d2df; font-size: 0.72rem; line-height: 1.7; letter-spacing: 0.12em; }

.game-master-portrait {
  position: relative;
  width: 100%;
  overflow: hidden;
  border: 1px solid rgba(52, 217, 255, 0.25);
  background: #07101b;
  box-shadow: 0 40px 100px rgba(0, 0, 0, 0.55), 0 0 55px rgba(47, 123, 255, 0.13);
  clip-path: polygon(10% 0, 100% 0, 100% 90%, 90% 100%, 0 100%, 0 10%);
}
.game-master-portrait::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(4, 6, 10, 0.88), transparent 38%);
}
.game-master-portrait img { width: 100%; aspect-ratio: 1; object-fit: cover; }
.game-master-portrait span {
  position: absolute;
  z-index: 2;
  right: 25px;
  bottom: 22px;
  left: 25px;
  padding-top: 15px;
  border-top: 1px solid rgba(154, 196, 236, 0.26);
  color: var(--cyan);
  font-size: 0.69rem;
  font-weight: 850;
  letter-spacing: 0.2em;
}

/* ---------- how it works ---------- */

.how-section {
  display: grid;
  grid-template-columns: 0.9fr 1.1fr;
  gap: clamp(50px, 8vw, 120px);
  align-items: center;
  border-top: 1px solid var(--line);
}

.how-visual {
  position: relative;
  overflow: hidden;
  min-height: 720px;
  clip-path: polygon(0 0, 88% 0, 100% 9%, 100% 100%, 12% 100%, 0 91%);
  border: 1px solid var(--line);
  background: #07101b;
}
.how-visual::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(4, 6, 10, 0.9), transparent 47%);
}
.how-visual img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 24%; }

/* the frame's bottom-left corner is cut away by the clip-path, so the label
   sits above the diagonal instead of being sliced by it */
.how-visual .image-label { bottom: 78px; }

.image-label {
  position: absolute;
  z-index: 2;
  right: 28px;
  bottom: 28px;
  left: 28px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-top: 18px;
  border-top: 1px solid rgba(148, 193, 234, 0.28);
}
.image-label span { color: #768ba7; font-size: 0.66rem; font-weight: 800; letter-spacing: 0.2em; }
.image-label strong { color: var(--cyan); font-size: 0.78rem; letter-spacing: 0.13em; }

.how-copy h2 { margin-bottom: 48px; }
.steps { border-top: 1px solid var(--line); }
.step {
  display: grid;
  grid-template-columns: 62px 1fr;
  gap: 20px;
  padding: 25px 0;
  border-bottom: 1px solid var(--line);
}
.step > span { color: var(--cyan); font-family: var(--display); font-size: 1rem; letter-spacing: 0.1em; }
.step h3 { margin-bottom: 7px; font-size: 1rem; text-transform: uppercase; letter-spacing: 0.08em; }
.step p { margin: 0; color: var(--body-ink); font-size: var(--body-size); line-height: 1.65; }

.text-link {
  display: inline-flex;
  gap: 18px;
  margin-top: 28px;
  color: #d7e7f6;
  font-size: 0.78rem;
  font-weight: 850;
  text-transform: uppercase;
  letter-spacing: 0.14em;
}
.text-link span { color: var(--cyan); }

/* ---------- watch live ---------- */

.watch-section { border-top: 1px solid var(--line); }

.watch-points {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
}
.watch-points li {
  position: relative;
  padding: 30px 26px 32px;
  border: 1px solid var(--line);
  background: linear-gradient(145deg, rgba(28, 50, 78, 0.32), transparent 52%), var(--panel);
  color: #8f9db0;
  font-size: 0.9rem;
  line-height: 1.7;
}
.watch-points li strong {
  display: flex;
  align-items: center;
  gap: 13px;
  margin-bottom: 12px;
  color: var(--white);
  font-family: var(--display);
  font-size: 1.3rem;
  font-weight: 400;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.watch-points li strong::before {
  content: "";
  flex: none;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--cyan);
  box-shadow: 0 0 12px var(--cyan);
}

/* ---------- faq ---------- */

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

.faq-item { border-bottom: 1px solid var(--line); }
.faq-item summary {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 24px;
  padding: 24px 0;
  cursor: pointer;
  color: var(--white);
  font-family: var(--display);
  font-size: 1.15rem;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  list-style: none;
  transition: color 180ms ease;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after {
  content: "+";
  color: var(--cyan);
  font-family: var(--body);
  font-size: 1.5rem;
  font-weight: 300;
  line-height: 1;
  transition: transform 220ms ease;
}
.faq-item[open] summary::after { transform: rotate(45deg); }
.faq-item summary:hover { color: var(--cyan); }
.faq-item p {
  max-width: 820px;
  margin: 0;
  padding: 0 0 26px;
  color: var(--body-ink);
  font-size: 0.92rem;
  line-height: 1.78;
}

/* ---------- community ---------- */

.community-section {
  position: relative;
  min-height: 720px;
  overflow: hidden;
  display: grid;
  grid-template-columns: 0.8fr 1.2fr;
  align-items: center;
  gap: 8vw;
  padding: 100px max(32px, calc((100vw - 1400px) / 2));
  background: #06090e;
  isolation: isolate;
}
.community-backdrop {
  position: absolute;
  z-index: -2;
  inset: 0;
  background: linear-gradient(90deg, rgba(4, 6, 10, 0.45), rgba(4, 6, 10, 0.84) 68%),
    url("../assets/entry-room.webp") center / cover;
  opacity: 0.48;
}
.community-section::after {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 0;
  background: radial-gradient(circle at 30% 50%, rgba(47, 123, 255, 0.2), transparent 28rem);
}
.community-visual {
  position: relative;
  overflow: hidden;
  border: 1px solid rgba(52, 217, 255, 0.25);
  background: #07101b;
  box-shadow: 0 40px 100px rgba(0, 0, 0, 0.55), 0 0 55px rgba(47, 123, 255, 0.13);
  clip-path: polygon(0 0, 88% 0, 100% 9%, 100% 100%, 12% 100%, 0 91%);
}
.community-visual::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(4, 6, 10, 0.9), transparent 42%);
}
.community-visual img { width: 100%; aspect-ratio: 0.75; object-fit: cover; object-position: center; }
.community-visual .image-label { bottom: 74px; }
.community-copy { max-width: 650px; }
.community-copy h2 { margin-bottom: 30px; }
.community-copy > p:not(.overline) { max-width: 570px; margin-bottom: 32px; color: #a5b2c4; line-height: 1.75; }

/* ---------- footer ---------- */



footer {
  width: min(1400px, calc(100% - 64px));
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: 24px;
  padding: var(--section-pad) 0 40px;
  border-top: 1px solid var(--line);
}
footer > p { grid-column: 1; margin: 0; color: #75849a; font-size: 0.85rem; }
.footer-links {
  grid-column: 2;
  grid-row: 1 / span 2;
  display: flex;
  flex-wrap: wrap;
  gap: 28px;
  color: #aab7ca;
  font-size: 0.73rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.13em;
}
.footer-links a:hover, .footer-links a:focus-visible { color: var(--cyan); }
footer small {
  grid-column: 1 / -1;
  padding-top: 30px;
  border-top: 1px solid var(--line);
  color: #57667b;
  font-size: 0.7rem;
  line-height: 1.7;
}


/* Game 01 is a door you click into (the line-up is the homepage's job now) */
.game-card-open { display: block; color: inherit; }
.game-card-open .card-cta {
  display: inline-flex;
  gap: 10px;
  align-items: center;
  margin-top: 16px;
  color: var(--cyan);
  font-size: 0.72rem;
  font-weight: 850;
  text-transform: uppercase;
  letter-spacing: 0.16em;
}
.game-card-open:hover .card-cta b { transform: translateX(4px); }
.game-card-open .card-cta b { transition: transform 180ms ease; }

/* company registration details — trust, on every page */
.company-line {
  display: block;
  margin-bottom: 10px;
  color: #6d7c91;
}
.company-line strong { color: #9fb0c6; }
.company-line a { color: #8fa4bd; text-decoration: underline; text-underline-offset: 3px; }
.company-line a:hover { color: var(--cyan); }


/* ---------- the team ----------
   Auto-fitting grid: removing one person never collapses the layout, and any
   number of entries stays balanced. A card with no <img> falls back to an
   initial tile — never a stock face. */

.team-section { border-top: 1px solid var(--line); }

.team-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: 14px;
}

.team-card {
  padding: 22px 22px 24px;
  border: 1px solid var(--line);
  background: linear-gradient(145deg, rgba(28, 50, 78, 0.32), transparent 52%), var(--panel);
  transition: transform 220ms ease, border-color 220ms ease;
}
.team-card:hover { transform: translateY(-5px); border-color: rgba(52, 217, 255, 0.4); }

.team-photo {
  width: 84px;
  height: 84px;
  margin-bottom: 18px;
  overflow: hidden;
  border-radius: 50%;
  border: 1px solid rgba(52, 217, 255, 0.3);
  background: var(--panel-2);
  display: grid;
  place-items: center;
}
.team-photo img { width: 100%; height: 100%; object-fit: cover; }
/* no photo yet: an initial, not a fake face */
.team-photo span {
  color: var(--cyan);
  font-family: var(--display);
  font-size: 1.9rem;
  line-height: 1;
  opacity: 0.75;
}

.team-name {
  margin: 0 0 6px;
  font-family: var(--display);
  font-size: 1.25rem;
  font-weight: 400;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.team-role {
  margin: 0 0 10px;
  color: var(--cyan);
  font-size: 0.68rem;
  font-weight: 850;
  text-transform: uppercase;
  letter-spacing: 0.18em;
}
.team-line { margin: 0; color: var(--body-ink); font-size: var(--body-size); line-height: 1.65; }


/* ---------- winners wall ----------
   Samih's chosen design, 6 Aug 2026: a grid of cards, newest first, each with a
   photo, the name, the night they won and how much.
   PALETTE: site colours, plus gold on the prize amounts only (owner, 10 Aug 2026,
   reversing his earlier no-gold call for this page). Gold is the Mini App's winner
   accent, so the prize reads the same colour here as it does on the winner's phone.
   CASH WINNERS ONLY on this page (owner, 9 Aug). Never full results, never
   finalists, never placings below the paid positions. */

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

/* Column layout with the amount pushed to the bottom, so the prize lines up
   across every card whether or not that winner has a handle line. */
.win-card {
  display: flex;
  flex-direction: column;
  padding: 30px 24px;
  text-align: center;
  border: 1px solid var(--line);
  background: linear-gradient(150deg, rgba(28, 50, 78, .4), transparent 52%), var(--panel);
}
.win-card .avatar {
  width: 96px;
  height: 96px;
  margin: 0 auto 20px;
  border-radius: 50%;
  border: 2px solid var(--cyan);
  box-shadow: 0 0 28px rgba(52, 217, 255, .32);
  background: #0b1220;
  display: grid;
  place-items: center;
  overflow: hidden;
}
.win-card .avatar svg { width: 58%; height: 58%; opacity: .5; }
.win-card .avatar img { width: 100%; height: 100%; object-fit: cover; }
.win-card h3 {
  margin: 0 0 6px;
  font-family: var(--body);
  font-weight: 700;
  font-size: 1.2rem;
  letter-spacing: 0;
}
.win-card .when {
  margin: 0 0 18px;
  color: #69809e;
  font-size: .68rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .18em;
}
.win-card .amount {
  margin-top: auto;
  padding-top: 16px;
  border-top: 1px solid var(--line);
  font-family: var(--display);
  font-size: 1.7rem;
  color: var(--gold);
  letter-spacing: .02em;
}

@media (max-width: 900px) { .win-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .win-grid { grid-template-columns: 1fr; } }

/* ---------- inner pages (rules / terms / privacy) ---------- */

.page-header {
  width: min(1400px, calc(100% - 64px));
  margin: 0 auto;
  padding: 170px 0 0;
}
.page-header h1 { font-size: clamp(3.2rem, 7vw, 5.6rem); }
/* Intro paragraph directly under a page title. Left aligned and width-capped so
   it never strands itself in a far-right column the way a .section-heading grid
   does. See the comment in quiz.html. */
.page-lede {
  max-width: 640px;
  margin: 26px 0 0;
  color: var(--body-ink);
  font-size: var(--lede-size);
  line-height: 1.72;
}

.doc {
  width: min(860px, calc(100% - 64px));
  margin: 0 auto;
  padding: 48px 0 110px;
}
.doc h2 {
  margin: 54px 0 18px;
  font-size: clamp(1.5rem, 3vw, 2rem);
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.doc h2:first-child { margin-top: 0; }
.doc h3 {
  margin: 30px 0 10px;
  font-family: var(--display);
  font-size: 1.15rem;
  font-weight: 400;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--cyan);
}
.doc p, .doc li { color: var(--body-ink); font-size: var(--body-size); line-height: 1.85; }
.doc p { margin: 0 0 16px; }
.doc ul, .doc ol { margin: 0 0 20px; padding-left: 22px; }
.doc li { margin-bottom: 10px; }
.doc strong { color: #d7e2f0; }
.doc a { color: var(--cyan); text-decoration: underline; text-underline-offset: 3px; }
.doc-updated { color: #57667b; font-size: 0.8rem; }

.doc-callout {
  margin: 0 0 32px;
  padding: 22px 24px;
  border: 1px solid var(--line);
  border-left: 2px solid var(--cyan);
  background: var(--panel);
}
.doc-callout p:last-child { margin-bottom: 0; }

/* ---------- responsive ---------- */

/* FOUR nav links (Winners added 10 Aug) stopped clearing the Join button below
   about 1050px: at 830px the menu was touching it. Two bands fix it.
   1000 to 1080: tighter gap and type buys about 50px, enough on its own.
   821 to 1000: not enough room even tightened, so the header takes the SAME
   two-row shape the phones use (brand and button on top, menu underneath). That
   layout is already proven to fit four links down to 320px.
   Below 820px the mobile block later in this file takes over unchanged.
   If a FIFTH link is ever added, re-measure both bands before shipping. */
@media (max-width: 1080px) {
  nav { gap: 18px; }
  nav a { font-size: 0.76rem; letter-spacing: 0.08em; }
}

@media (min-width: 821px) and (max-width: 1000px) {
  .site-header {
    height: auto;
    padding: 15px 0 0;
    grid-template-columns: 1fr auto;
    grid-template-areas: "brand cta" "nav nav";
    row-gap: 12px;
  }
  .site-header .brand-lockup { grid-area: brand; }
  .site-header .nav-cta { grid-area: cta; }
  nav {
    grid-area: nav;
    justify-content: center;
    gap: 26px;
    padding: 11px 0;
    border-top: 1px solid var(--line);
  }
}

@media (max-width: 1100px) {
  .hero { min-height: 860px; grid-template-columns: 1fr 0.9fr; }
  .hero-visual { min-height: 560px; }
  .fair-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 820px) {
  /* Phones get a REAL menu. This used to be `nav { display: none }`, which left
     someone on a phone with no way to move between pages except the small footer
     links, and most visitors are on phones. Three short links fit on one row, so
     no hamburger and no JavaScript: the header just becomes two rows. If a fourth
     link is ever added, check this still fits at 320px before shipping. */
  .site-header {
    width: calc(100% - 36px);
    height: auto;
    padding: 15px 0 0;
    grid-template-columns: 1fr auto;
    grid-template-areas: "brand cta" "nav nav";
    row-gap: 13px;
  }
  /* SCOPED to the header on purpose. Unscoped, `.brand-lockup { grid-area: brand }`
     also hit the FOOTER logo, which has no such area, and silently broke the
     footer into three columns with the logo floating beside the links. */
  /* Touch targets: the nav links were 17px tall and the footer links 18px, well
     under the 44px a thumb needs. Padding grows the hit area; the negative margin
     on the nav keeps the header the same height. Footer row-gap is reduced to
     match so neighbouring links cannot overlap and steal each other's taps. */
  .site-header nav a { padding: 14px 0; margin: -12px 0; }
  .footer-links { gap: 4px 20px; }
  .footer-links a { padding: 13px 0; }
  .site-header .brand-lockup { grid-area: brand; }
  .site-header .nav-cta { grid-area: cta; }
  nav {
    grid-area: nav;
    display: flex;
    justify-content: center;
    gap: 26px;
    padding: 11px 0;
    border-top: 1px solid var(--line);
  }
  nav a { font-size: 0.72rem; }
  .nav-cta { font-size: 0.67rem; padding: 10px 13px; }
  .brand-lockup span { font-size: 0.92rem; }
  :root { --section-pad: 80px; }
  .hero { min-height: auto; grid-template-columns: 1fr; padding: 148px 18px 80px; }
  .hero-copy { text-align: center; }
  .live-pill { margin: 0 auto 34px; }
  .hero-lede { margin-right: auto; margin-left: auto; }
  .hero-actions { justify-content: center; }
  .hero-visual { min-height: 540px; margin-top: 30px; }
  .visual-frame { width: min(100%, 480px); }
  /* The strip is nowrap inside overflow:hidden, so anything too wide is silently
     CLIPPED rather than wrapped. At 375px it was cutting the L off LIVE GAMES and
     the S off MADE IN THE MALDIVES. Sized to fit the narrowest phone. */
  .signal-strip {
    gap: 10px;
    padding: 15px 12px;
    font-size: clamp(0.6rem, 3.1vw, 0.85rem);
    letter-spacing: 0.06em;
  }
  .signal-strip i { font-size: 0.4rem; }
  .section { width: calc(100% - 36px); }
  .section-heading,
  .game-master-section,
  .how-section,
  .community-section { grid-template-columns: 1fr; }
  .watch-points { grid-template-columns: 1fr; }
  .section-heading { gap: 28px; }
  .how-visual { min-height: 600px; }
  /* phones: wider slides in the same one-line strip */
  /* ONE round on screen at a time (owner, 6 Aug). Was 62vw, which showed one
     and a half and read as a mistake rather than a hint that it scrolls. */
  .demo-strip {
    grid-auto-columns: 100%;
    gap: 18px;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;              /* the swipe is the affordance, not a bar */
  }
  .demo-strip::-webkit-scrollbar { display: none; }
  .demo-slide { scroll-snap-align: center; }
  .demo-caption { padding-top: 18px; }
  .game-master-copy { order: 2; }
  .game-master-portrait { width: min(100%, 560px); margin: 0 auto; }
  .how-copy { padding-top: 12px; }
  .community-section { padding: 86px 18px; text-align: center; }
  .community-visual { width: min(84vw, 460px); margin: 0 auto; }
  .community-copy { margin: 0 auto; }
  .page-header { width: calc(100% - 36px); padding-top: 158px; }
  .doc { width: calc(100% - 36px); }
  footer { width: calc(100% - 36px); }
}

@media (max-width: 560px) {
  h1 { font-size: clamp(4rem, 20vw, 6.2rem); }
  h2 { font-size: clamp(3rem, 16vw, 4.8rem); }
  .live-pill { font-size: 0.6rem; letter-spacing: 0.12em; }
  .hero-actions .button { width: 100%; }
  .hero-visual { min-height: 470px; }
  .status-card { min-width: 136px; }
  .status-top { right: 4px; }
  .status-bottom { left: 4px; }
  .game-grid { grid-template-columns: 1fr; }
  .fair-grid { grid-template-columns: 1fr; }
  .fair-item { padding: 26px 22px; }
  /* Let the stage image keep its own 16:9 shape on a phone. It used to be forced
     to 360px tall and cover-cropped, which sliced the question mid-word and read
     as a mistake rather than a crop. The caption then moves BELOW the picture:
     overlaid on a 190px-tall image it crowded the artwork. */
  .quiz-stage { min-height: 0; }
  .quiz-stage img { min-height: 0; height: auto; aspect-ratio: 16 / 9; }
  /* RELATIVE, not static: the stage's dark ::after scrim covers the whole box, so
     a static caption falls behind it and the text goes almost unreadable. Keeping
     it positioned preserves the z-index that lifts it above the scrim. */
  .quiz-stage-copy {
    position: relative;
    z-index: 2;
    right: auto;
    bottom: auto;
    left: auto;
    display: grid;
    gap: 6px;
    padding: 20px 18px;
  }
  .game-card { min-height: 270px; }
  .game-card-top { margin-bottom: 42px; }
  .how-visual { min-height: 500px; }
  .step { grid-template-columns: 44px 1fr; }
  .master-rule { grid-template-columns: 1fr; gap: 8px; }
  .faq-item summary { font-size: 1rem; }
  /* Phone footer: it was a wrapped jumble with the brand lockup floating beside
     it. Stack it in reading order instead: brand, tagline, links as a tidy two
     column grid, then the legal note. */
  footer {
    grid-template-columns: 1fr;
    justify-items: start;
    gap: 4px;
    padding-top: 70px;
  }
  footer .brand-lockup { order: 1; margin-bottom: 14px; }
  footer > p { order: 2; grid-column: 1; margin-bottom: 26px; }
  .footer-links {
    order: 3;
    grid-column: 1;
    grid-row: auto;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px 20px;
    width: 100%;
  }
  footer small { order: 4; grid-column: 1; margin-top: 26px; }
}

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