/* Baela Games
   Layout: a flight from orbit down: a full-bleed space opening, the game as a lit showcase, the ten worlds as a strip
   of postcards, a calm studio note, a deep footer. One committed dark look (space), so every colour is explicit. */
:root {
  --space: #070b2c;      /* page ground */
  --space-2: #0f1650;    /* raised panels */
  --line: #253074;       /* hairlines on dark */
  --gold: #ffd23f;       /* the duck's yellow, the one accent */
  --ink: #f2f5ff;        /* text on dark */
  --soft: #aeb9e6;       /* secondary text */
  --display: "Baloo 2", "Arial Rounded MT Bold", "Trebuchet MS", system-ui, sans-serif;
  --body: "Nunito", "Segoe UI", system-ui, -apple-system, sans-serif;
  --step-0: 1.05rem;
  --step-1: 1.25rem;
  --step-2: clamp(1.8rem, 1.2rem + 2vw, 2.5rem);
  --step-3: clamp(2.5rem, 1.4rem + 4.4vw, 4.6rem);
  --wrap: 1180px;
  color-scheme: dark;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  margin: 0; background: var(--space); color: var(--ink);
  font-family: var(--body); font-size: var(--step-0); line-height: 1.6;
  -webkit-font-smoothing: antialiased; overflow-x: hidden;
}
img { max-width: 100%; display: block; }
a { color: var(--gold); text-underline-offset: 3px; }
:focus-visible { outline: 3px solid var(--gold); outline-offset: 3px; border-radius: 6px; }
h1, h2, h3 { font-family: var(--display); line-height: 1.05; text-wrap: balance; margin: 0; }

.wrap {
  max-width: var(--wrap); margin: 0 auto;
  padding-left: max(20px, env(safe-area-inset-left, 0px));
  padding-right: max(20px, env(safe-area-inset-right, 0px));
}
.eyebrow { font-family: var(--display); font-weight: 700; letter-spacing: .16em; text-transform: uppercase; font-size: .85rem; color: var(--gold); }

/* ---------- header ---------- */
body::before { content: ""; position: fixed; inset: 0 0 auto; height: env(safe-area-inset-top, 0px); z-index: 20; background: var(--space); }
.site-header {
  position: fixed; top: env(safe-area-inset-top, 0px); left: 0; right: 0; z-index: 20;
  transition: background-color .25s, box-shadow .25s;
}
.site-header.solid { background: rgba(7, 11, 44, .9); box-shadow: 0 1px 0 var(--line); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); }
.site-header .wrap { height: 70px; display: flex; align-items: center; justify-content: space-between; }
.wordmark { display: inline-flex; flex-direction: column; align-items: center; text-decoration: none; line-height: 1; }
.wordmark .w1 { font-family: var(--display); color: #fff; font-weight: 800; font-size: 27px; letter-spacing: 1.5px; text-shadow: 0 3px 0 #0b2a6b; }
.wordmark .w2 { font-family: var(--display); color: var(--gold); font-weight: 600; font-size: 10.5px; letter-spacing: 6px; padding-left: 6px; margin-top: 3px; }
.site-header nav { display: flex; gap: 4px; }
.site-header nav a {
  color: var(--ink); text-decoration: none; font-family: var(--display); font-weight: 700; font-size: 1.02rem;
  padding: 8px 14px; border-radius: 999px;
}
.site-header nav a:hover { background: rgba(255, 255, 255, .08); color: var(--gold); }

/* ---------- opening: the Earth from orbit, the duck on its way up ---------- */
.hero {
  position: relative; overflow: hidden; isolation: isolate;
  padding-block: calc(120px + env(safe-area-inset-top, 0px)) 140px;
  background: var(--space) url("img/hero-space.jpg") center bottom / cover no-repeat;
}
.hero::after { content: ""; position: absolute; inset: auto 0 0 0; height: 160px; z-index: -1; background: linear-gradient(transparent, var(--space)); }
.hero .wrap { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); gap: 32px; align-items: center; }
.hero-copy { min-width: 0; }
.hero h1 { font-size: var(--step-3); font-weight: 800; letter-spacing: -.01em; margin-top: 16px; }
.hero h1 .hl { color: var(--gold); }
.hero p { color: var(--soft); font-size: var(--step-1); max-width: 32ch; margin: 22px 0 34px; line-height: 1.5; }
.actions { display: flex; flex-wrap: wrap; gap: 12px; }
.btn {
  display: inline-flex; align-items: center; gap: 10px; text-decoration: none;
  font-family: var(--display); font-weight: 800; font-size: 1.1rem;
  padding: 13px 26px 15px; border-radius: 999px; transition: transform .15s, background-color .15s;
}
.btn-gold { background: var(--gold); color: #3a2400; box-shadow: 0 5px 0 #c99a00; }
.btn-gold:hover { transform: translateY(-2px); }
.btn-ghost { color: var(--ink); background: rgba(255, 255, 255, .07); box-shadow: inset 0 0 0 2px rgba(255, 255, 255, .22); }
.btn-ghost:hover { background: rgba(255, 255, 255, .14); }

.hero-art { position: relative; min-width: 0; width: 100%; max-width: 540px; aspect-ratio: 1 / 1; justify-self: center; }
.hero-art .duck { position: absolute; left: 12%; top: 4%; width: 70%; animation: hover 5.5s ease-in-out infinite; filter: drop-shadow(0 30px 40px rgba(0, 0, 0, .45)); }
.hero-art .orb { position: absolute; animation: drift 9s ease-in-out infinite; filter: drop-shadow(0 12px 20px rgba(0, 0, 0, .35)); }
.hero-art .orb.a { width: 24%; left: -4%; top: 10%; animation-delay: -3s; }
.hero-art .orb.b { width: 18%; right: 0; top: 2%; animation-delay: -6s; }
.hero-art .orb.c { width: 30%; right: -6%; bottom: 6%; }
@keyframes hover { 0%, 100% { transform: translateY(0) rotate(0deg); } 50% { transform: translateY(-18px) rotate(-1.5deg); } }
@keyframes drift { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-12px); } }

/* ---------- sections ---------- */
.section { padding-block: 100px; }
.section-head { display: grid; gap: 12px; margin-bottom: 40px; max-width: 640px; }
.section-head h2 { font-size: var(--step-2); font-weight: 800; }
.section-head p { color: var(--soft); margin: 0; }

/* the game showcase, with its own world behind it */
.showcase {
  position: relative; overflow: hidden; border-radius: 34px; isolation: isolate;
  display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); align-items: center;
  min-height: 560px; box-shadow: 0 0 0 1px var(--line), 0 40px 80px rgba(0, 0, 0, .45);
}
.showcase .bg { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; object-position: 50% 70%; }
.showcase::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(90deg, rgba(7, 11, 44, .92) 0%, rgba(7, 11, 44, .66) 46%, rgba(7, 11, 44, .08) 80%); }
.showcase .copy { padding: 52px; min-width: 0; }
.showcase .logo { width: min(320px, 78%); margin: 0 0 20px -4px; filter: drop-shadow(0 10px 18px rgba(0, 0, 0, .35)); }
.showcase .copy p { font-size: var(--step-1); line-height: 1.5; color: #e2e8ff; max-width: 34ch; margin: 0 0 22px; }
.facts { display: flex; flex-wrap: wrap; gap: 8px; list-style: none; margin: 0 0 28px; padding: 0; }
.facts li {
  font-family: var(--display); font-weight: 700; font-size: .95rem; color: #fff;
  background: rgba(255, 255, 255, .1); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .2); border-radius: 999px; padding: 5px 14px;
}
.stores { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.store {
  display: inline-flex; flex-direction: column; line-height: 1.1; color: #fff; background: #000; border-radius: 12px;
  padding: 9px 18px 10px; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .25); min-width: 150px;
}
.store small { font-size: .7rem; font-weight: 700; letter-spacing: .04em; color: #c8cfe8; }
.store b { font-family: var(--display); font-size: 1.15rem; }
.showcase .phone { width: min(290px, 78%); justify-self: center; align-self: end; margin: 40px 0 -70px; transform: rotate(4deg); }
.phone { border-radius: 40px; padding: 10px; background: #0c0c12; box-shadow: 0 0 0 2px #2b2f45, 0 30px 70px rgba(0, 0, 0, .5); }
.phone img { border-radius: 31px; width: 100%; }

/* ten worlds as postcards */
.worlds {
  display: grid; grid-auto-flow: column; grid-auto-columns: minmax(250px, 22%); gap: 18px;
  overflow-x: auto; padding: 6px 2px 20px; scroll-snap-type: x mandatory;
  scrollbar-width: thin; scrollbar-color: var(--line) transparent; overscroll-behavior-x: contain;
}
.world { margin: 0; position: relative; overflow: hidden; border-radius: 24px; aspect-ratio: 4 / 5; scroll-snap-align: start; box-shadow: 0 0 0 1px var(--line); background: var(--space-2); }
.world > img.scene { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform .6s ease; }
.world::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 38%, rgba(7, 11, 44, .94)); }
.world .planet { position: absolute; z-index: 1; width: 36%; right: 8%; top: 7%; filter: drop-shadow(0 8px 14px rgba(0, 0, 0, .4)); transition: transform .6s ease; }
.world .label { position: absolute; z-index: 1; left: 20px; right: 20px; bottom: 18px; }
.world .label b { display: block; font-family: var(--display); font-size: 1.45rem; line-height: 1.1; }
.world .label span { color: var(--soft); font-size: .95rem; font-variant-numeric: tabular-nums; }
.world:hover > img.scene { transform: scale(1.05); }
.world:hover .planet { transform: translateY(-6px) rotate(-6deg); }

/* studio note */
.studio { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 56px; align-items: center; }
.studio .text { min-width: 0; }
.studio .text p { color: var(--soft); margin: 0 0 18px; max-width: 58ch; }
.numbers { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.numbers div { background: var(--space-2); border-radius: 22px; padding: 22px 24px; box-shadow: inset 0 0 0 1px var(--line); }
.numbers b { display: block; font-family: var(--display); font-size: 2.6rem; line-height: 1; color: var(--gold); font-variant-numeric: tabular-nums; }
.numbers span { color: var(--soft); font-size: .98rem; }

/* ---------- footer ---------- */
.site-footer { border-top: 1px solid var(--line); padding-block: 44px calc(44px + env(safe-area-inset-bottom, 0px)); background: #050821; }
.site-footer .wrap { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 28px; align-items: center; }
.site-footer nav { display: flex; flex-wrap: wrap; gap: 6px 22px; justify-content: center; }
.site-footer nav a { color: var(--ink); text-decoration: none; font-weight: 700; }
.site-footer nav a:hover { color: var(--gold); }
.site-footer .contact { color: var(--soft); font-size: .95rem; text-align: right; }
.site-footer .contact a { color: var(--ink); }

/* ---------- legal and support pages ---------- */
.doc-page { padding-block: calc(120px + env(safe-area-inset-top, 0px)) 90px; }
.doc { max-width: 780px; }
.doc h1 { font-size: var(--step-3); font-weight: 800; margin-bottom: 8px; }
.doc .updated { color: var(--soft); margin: 0 0 34px; }
.doc h2 { font-size: 1.6rem; margin: 40px 0 12px; color: #fff; }
.doc p, .doc li { color: #d3dbf7; }
.doc strong { color: #fff; }
.doc ul, .doc ol { padding-left: 1.3em; }
.doc li { margin-bottom: 6px; }
.table-box { overflow-x: auto; margin: 12px 0 22px; border-radius: 16px; box-shadow: inset 0 0 0 1px var(--line); }
.doc table { width: 100%; border-collapse: collapse; font-size: .97rem; min-width: 560px; }
.doc th, .doc td { text-align: left; vertical-align: top; padding: 12px 14px; border-bottom: 1px solid var(--line); }
.doc th { color: var(--gold); font-family: var(--display); font-weight: 700; background: var(--space-2); }
.doc tr:last-child td { border-bottom: 0; }
.card { background: var(--space-2); border-radius: 22px; padding: 22px 26px; margin: 18px 0; box-shadow: inset 0 0 0 1px var(--line); }

/* ---------- small screens ---------- */
@media (max-width: 900px) {
  .hero { padding-block: calc(96px + env(safe-area-inset-top, 0px)) 90px; background-position: 60% bottom; }
  .hero .wrap { grid-template-columns: minmax(0, 1fr); text-align: center; }
  .hero p { margin-left: auto; margin-right: auto; }
  .actions { justify-content: center; }
  .hero-art { max-width: 360px; order: -1; }
  .showcase { grid-template-columns: minmax(0, 1fr); min-height: 0; }
  .showcase::before { background: linear-gradient(180deg, rgba(7, 11, 44, .5) 0%, rgba(7, 11, 44, .9) 50%); }
  .showcase .copy { padding: 34px 26px 6px; }
  .showcase .phone { margin: 20px 0 -90px; width: min(250px, 66%); }
  .worlds { grid-auto-columns: minmax(240px, 42%); }
  .studio { grid-template-columns: minmax(0, 1fr); gap: 34px; }
  .site-footer .wrap { grid-template-columns: minmax(0, 1fr); text-align: center; justify-items: center; }
  .site-footer .contact { text-align: center; }
  .section { padding-block: 76px; }
}
@media (max-width: 520px) {
  .site-header nav a.opt { display: none; }
  .worlds { grid-auto-columns: 78%; }
  .numbers b { font-size: 2.1rem; }
  .showcase .copy { padding: 28px 20px 4px; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .hero-art .duck, .hero-art .orb { animation: none; }
  .world > img.scene, .world .planet, .btn { transition: none; }
}