/* ==========================================================================
   Base: reset, sky background, typography, focus, shared components
   (buttons, glass cards, readouts, toast) and utilities.
   Uses tokens from tokens.css only.
   ========================================================================== */

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

* {
  margin: 0;
}

/* overflow-x: clip on html AND body: on body alone the browser moves it to the
   viewport (as "hidden"), which phones don't fully respect, so anything too
   wide could still widen the page and push the fixed header's right side
   (hamburger, top bar icons) off screen. */
html {
  overflow-x: clip;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-padding-top: calc(var(--header-h) + var(--space-4));
  background-color: var(--bg);
}

@media (prefers-reduced-motion: no-preference) {
  html {
    scroll-behavior: smooth;
  }
}

body {
  position: relative;
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  padding-top: var(--header-h);
  overflow-x: clip;
  background-color: var(--bg);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: var(--step-0);
  line-height: var(--leading-body);
  -webkit-font-smoothing: antialiased;
}

/* Sky: a fixed gradient layer plus a star layer (stars fade out by day) */
body::before,
body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
}

body::before {
  background:
    radial-gradient(ellipse 90% 45% at 75% 100%, var(--sky-glow), transparent 70%),
    linear-gradient(180deg, var(--sky-top) 0%, var(--sky-mid) 55%, var(--sky-horizon) 100%);
}

body::after {
  background: url("../assets/svg/stars.svg") center top / cover no-repeat;
  opacity: var(--stars-opacity);
  transition: opacity var(--dur-slow) var(--ease-out);
}

main {
  flex: 1;
}

main:focus {
  outline: none;
}

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

button,
input,
select,
textarea {
  font: inherit;
  color: inherit;
}

button {
  cursor: pointer;
}

/* ---- Typography: big, bold, tight, left-aligned ---- */
h1,
h2,
h3,
h4 {
  font-family: var(--font-display);
  font-weight: 800;
  font-stretch: var(--stretch-condensed);
  line-height: var(--leading-tight);
  letter-spacing: -0.01em;
  text-wrap: balance;
}

h1 {
  font-size: var(--step-6);
}

h2 {
  font-size: var(--step-5);
}

h3 {
  font-size: var(--step-2);
}

p {
  max-width: 62ch;
  text-wrap: pretty;
}

a {
  color: var(--link);
  text-underline-offset: 0.2em;
  text-decoration-thickness: 2px;
}

::selection {
  background: var(--neon-pink);
  color: #ffffff;
}

.lead {
  font-size: var(--step-1);
  color: var(--ink-muted);
}

/* ---- Focus: always visible for keyboard users ---- */
:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 4px;
  border-radius: var(--radius-sm);
}

/* ---- Layout helpers ---- */
.container {
  width: 100%;
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.visually-hidden {
  position: absolute !important;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

.skip-link {
  position: absolute;
  top: var(--space-2);
  left: var(--space-2);
  z-index: calc(var(--z-header) + 1);
  padding: var(--space-2) var(--space-4);
  border-radius: var(--radius-sm);
  background: var(--accent);
  color: var(--accent-ink);
  font-weight: 700;
  transform: translateY(-200%);
}

.skip-link:focus {
  transform: none;
}

/* ---- Readout: small HUD text. Use rarely (max one per section). ---- */
.readout {
  font-family: var(--font-mono);
  font-size: var(--step--2);
  font-weight: 500;
  letter-spacing: 0.12em;
  color: var(--ink-muted);
}

/* ---- Buttons ---- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  min-height: 48px;
  padding: var(--space-3) var(--space-6);
  border: var(--border-w) solid transparent;
  border-radius: var(--radius-sm);
  font-family: var(--font-display);
  font-size: var(--step-0);
  font-weight: 700;
  font-stretch: var(--stretch-expanded);
  letter-spacing: 0.06em;
  text-decoration: none;
  transition:
    transform var(--dur-fast) var(--ease-out),
    box-shadow var(--dur-fast) var(--ease-out),
    border-color var(--dur-fast) var(--ease-out),
    background-color var(--dur-fast) var(--ease-out);
}

/* Primary CTA: rocket-fire fill + neon hard offset shadow (neo-brutalist accent) */
.btn--primary {
  background: var(--accent);
  border-color: var(--accent-ink);
  color: var(--accent-ink);
  box-shadow: var(--offset) var(--offset) 0 0 var(--cta-shadow);
}

.btn--primary:hover {
  transform: translate(-2px, -2px);
  box-shadow: calc(var(--offset) + 2px) calc(var(--offset) + 2px) 0 0 var(--cta-shadow);
}

.btn--primary:active {
  transform: translate(var(--offset), var(--offset));
  box-shadow: 0 0 0 0 var(--cta-shadow);
}

/* Secondary: thin outline, soft glow on hover, no hard shadow */
.btn--ghost {
  background: transparent;
  border-color: var(--glass-border);
  color: var(--ink);
}

.btn--ghost:hover {
  border-color: var(--cyber-blue);
  box-shadow: var(--glow-blue);
}

/* ---- Official store badges (js/layout.js storeBadge, appStoreBadge) ----
   Google's rules: visible height >= 28px, clear space = 1/4 of the height
   (our padding), never change the badge itself. The frame is sized to the
   visible badge (3.36:1) and each file is offset so only its transparent
   margin is cropped (numbers in assets/brand/README.md). Hover scales the
   whole wrapper, never the image alone. */
.badge {
  --badge-h: 48px;
  display: inline-flex;
  flex: none;
  padding: calc(var(--badge-h) / 4);
  border: 0;
  border-radius: var(--radius);
  background: transparent;
  text-decoration: none;
  transition: transform var(--dur-fast) var(--ease-out);
}

.badge:hover {
  transform: scale(1.06);
}

.badge:active {
  transform: scale(0.98);
}

.badge--sm {
  --badge-h: 28px;
}

.badge--lg {
  --badge-h: 56px;
}

.badge__frame {
  position: relative;
  display: block;
  height: var(--badge-h);
  aspect-ratio: 3.36;
  overflow: hidden;
}

.badge__img {
  position: absolute;
  top: 50%;
  max-width: none;
  height: auto;
  transform: translateY(-50%);
}

.badge__img--tr {
  left: 0;
  width: 100%;
}

.badge__img--en {
  left: -7.27%;
  width: 114.54%;
}

/* App Store badge: the SVG is the whole badge (no transparent margin), so the
   frame takes the file's own width at the shared height. Apple's rules: never
   change the badge, clear space = 1/4 of its height (same padding as above). */
.badge--app-store .badge__frame {
  aspect-ratio: auto;
}

.badge--app-store .badge__img {
  position: static;
  display: block;
  width: auto;
  height: 100%;
  transform: none;
}

/* Store badges side by side, wrapping on narrow screens. Each badge keeps its
   own clear space, so no extra gap. --badge-h matches the badges inside. */
.store-badges {
  --badge-h: 48px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
}

.store-badges--lg {
  --badge-h: 56px;
}

/* One badge per language: TR badge in TR mode, EN badge in EN mode */
:root[lang="en"] .badge__img--tr,
:root:not([lang="en"]) .badge__img--en {
  display: none;
}

/* ---- Glass card: semi-transparent, softly glowing. ---- */
.card {
  position: relative;
  padding: var(--space-6);
  border: var(--hairline) solid var(--glass-border);
  border-radius: var(--radius);
  background: var(--glass);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
}

/* Game cards get the hard neon offset shadow + scale on hover */
.card--game {
  border-width: var(--border-w);
  border-color: var(--card-shadow);
  box-shadow: var(--offset) var(--offset) 0 0 var(--card-shadow);
  transition: transform var(--dur) var(--ease-out);
}

.card--game:hover {
  transform: scale(1.02);
}

/* ---- Toast: "coming soon" messages ---- */
.toast {
  position: fixed;
  left: 50%;
  bottom: var(--space-6);
  z-index: var(--z-toast);
  max-width: calc(100% - 2 * var(--gutter));
  padding: var(--space-3) var(--space-5);
  border: var(--hairline) solid var(--glass-border);
  border-radius: var(--radius);
  background: var(--glass-strong);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  color: var(--ink);
  font-weight: 600;
  transform: translate(-50%, 150%);
  opacity: 0;
  visibility: hidden;
  transition:
    transform var(--dur) var(--ease-bounce),
    opacity var(--dur) var(--ease-out),
    visibility 0s linear var(--dur);
}

.toast.is-visible {
  transform: translate(-50%, 0);
  opacity: 1;
  visibility: visible;
  transition-delay: 0s;
}

/* ---- Reduced motion: stop all animations and transitions ---- */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}