/* ===========================================================================
   Casino Slots: Game Machines — website stylesheet (no build step).
   Tailwind utilities come from the Play CDN script in each page; this file
   holds only the token layer, component classes and page-level rules.
   Source of truth: the app's DESIGN.md (§2 colors, §3 type, §5 components,
   §7 guardrails). No color, radius or spacing value outside the token set.
   ======================================================================== */

:root {
  --base: #140E17;
  --surface: #1E1522;
  --raised: #281A2E;
  --divider: #3A2742;
  --ink: #140E17;
  --accent: #FF3D8A;
  --accent-deep: #E01E68;
  --coin: #FFC24B;
  --win: #3DDC97;
  --info: #4EC9E8;
  --error: #FF5470;
  --warning: #FFB020;
  --text-primary: #F6EEF6;
  --text-secondary: #B9A6C4;
  --header-h: 64px;
}
@media (min-width: 1024px) {
  :root { --header-h: 72px; }
}

html {
  scroll-behavior: smooth;
  /* anchor targets land below the sticky header */
  scroll-padding-top: calc(var(--header-h) + 16px);
}

body {
  background: var(--base);
  color: var(--text-primary);
  font-family: "Rubik", system-ui, sans-serif;
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

::selection { background: var(--accent); color: var(--ink); }

/* visible focus, accent, never removed */
:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: 4px;
}

/* tabular figures for every Unbounded numeral */
.font-display { font-feature-settings: "tnum" 1; }

/* ---------------------------------------------------------------------------
   Raised tiles: the structural idea. Elevation = fill contrast only.
--------------------------------------------------------------------------- */
.tile       { background: var(--surface); border: 1px solid var(--divider); border-radius: 16px; }
.tile-raised{ background: var(--raised);  border: 1px solid var(--divider); border-radius: 16px; }
.tile-sheet { background: var(--surface); border: 1px solid var(--divider); border-radius: 28px; }

/* ---------------------------------------------------------------------------
   Buttons. Heights 52 (primary) / 44 (small). Radius 16. No shadow.
--------------------------------------------------------------------------- */
.btn,
.btn-primary,
.btn-tile,
.btn-gold {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  border-radius: 16px;
  font-family: "Rubik", system-ui, sans-serif;
  font-weight: 500;
  font-size: 14px;
  min-height: 52px;
  padding: 0 1.5rem;
  transition: transform 150ms ease-out;
  white-space: nowrap;
  cursor: pointer;
}
.btn:active,
.btn-primary:active,
.btn-tile:active,
.btn-gold:active { transform: scale(0.97); }
.btn-primary { background: var(--accent); color: var(--ink); }
.btn-primary:hover { background: var(--accent-deep); }
.btn-tile { background: var(--surface); border: 1px solid var(--divider); color: var(--text-primary); }
.btn-tile:hover { background: var(--raised); }
.btn-gold { background: var(--coin); color: var(--ink); }
.btn-gold:hover { filter: brightness(0.95); }

/* ---------------------------------------------------------------------------
   Chips: radius 8, height 28, accent fill + ink micro label
--------------------------------------------------------------------------- */
.chip {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  height: 28px;
  padding: 0 0.75rem;
  border-radius: 8px;
  background: var(--accent);
  color: var(--ink);
  font-family: "Rubik", system-ui, sans-serif;
  font-weight: 500;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}
.chip-quiet {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  height: 28px;
  padding: 0 0.75rem;
  border-radius: 8px;
  background: var(--raised);
  color: var(--text-secondary);
  font-family: "Rubik", system-ui, sans-serif;
  font-weight: 500;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

/* the one permitted gradient: the DESIGN.md §5 text-over-imagery scrim */
.scrim {
  background: linear-gradient(to top, rgba(20, 14, 23, 0.92) 0%, rgba(20, 14, 23, 0) 100%);
}

/* ---------------------------------------------------------------------------
   Type roles — six styles, no others
--------------------------------------------------------------------------- */
.t-display {
  font-family: "Unbounded", system-ui, sans-serif;
  font-weight: 700;
  color: var(--text-primary);
  font-size: clamp(1.75rem, 4.5vw, 3.5rem);
  line-height: 1.15;
  overflow-wrap: break-word;
}
.t-headline {
  font-family: "Unbounded", system-ui, sans-serif;
  font-weight: 600;
  color: var(--text-primary);
  font-size: clamp(1.125rem, 2.2vw, 1.5rem);
  line-height: 1.25;
  overflow-wrap: break-word;
}
.t-counter {
  font-family: "Unbounded", system-ui, sans-serif;
  font-weight: 600;
  color: var(--text-primary);
  font-size: clamp(1.75rem, 3.5vw, 3rem);
  line-height: 1.2;
}
.t-body   { font-family: "Rubik", system-ui, sans-serif; color: var(--text-primary); }
.t-label  { font-family: "Rubik", system-ui, sans-serif; font-weight: 500; color: var(--text-primary); font-size: 13px; }
.t-micro  { font-family: "Rubik", system-ui, sans-serif; font-weight: 500; color: var(--text-secondary); font-size: 12px; }
.t-kicker {
  font-family: "Rubik", system-ui, sans-serif;
  font-weight: 500;
  color: var(--accent);
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.18em;
}
@media (min-width: 1024px) {
  .t-label { font-size: 14px; }
  .t-micro { font-size: 13px; }
}

/* ---------------------------------------------------------------------------
   Hero entrance: the one orchestrated moment per page
--------------------------------------------------------------------------- */
.hero-in {
  opacity: 0;
  transform: translateY(24px);
  animation: hero-in 0.55s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}
@keyframes hero-in {
  to { opacity: 1; transform: translateY(0); }
}

/* press feedback on every tappable tile */
.press { transition: transform 150ms ease-out; }
.press:active { transform: scale(0.97); }

/* ---------------------------------------------------------------------------
   Language toggle (RU default / EN)
--------------------------------------------------------------------------- */
.lang-toggle {
  display: inline-flex;
  align-items: center;
  padding: 3px;
  gap: 2px;
  border-radius: 8px;
  background: var(--raised);
  border: 1px solid var(--divider);
}
.lang-toggle button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 38px;
  min-width: 44px;
  padding: 0 10px;
  border-radius: 6px;
  border: 0;
  background: transparent;
  color: var(--text-secondary);
  font-family: "Rubik", system-ui, sans-serif;
  font-weight: 500;
  font-size: 13px;
  cursor: pointer;
  transition: background 150ms ease-out, color 150ms ease-out;
}
.lang-toggle button[aria-pressed="true"] {
  background: var(--accent);
  color: var(--ink);
}

/* ---------------------------------------------------------------------------
   i18n: every translatable block exists twice (data-lang="ru" / "en").
   The active language renders; the other is removed from the box tree.
--------------------------------------------------------------------------- */
html[data-site-lang="ru"] [data-lang="en"] { display: none !important; }
html[data-site-lang="en"] [data-lang="ru"] { display: none !important; }

/* ---------------------------------------------------------------------------
   Ambient motion dies under reduced motion; AOS is disabled from JS too.
--------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .hero-in { animation: none; opacity: 1; transform: none; }
  .press, .btn, .lang-toggle button { transition: none; }
  [data-aos] { opacity: 1 !important; transform: none !important; transition: none !important; }
}

/* ---------------------------------------------------------------------------
   Legal-page typography (document flow, measure capped)
--------------------------------------------------------------------------- */
.legal-body p { margin-bottom: 1rem; }
.legal-body ul { margin: 0 0 1rem 0; padding-left: 1.25rem; list-style: disc; }
.legal-body li { margin-bottom: 0.375rem; }
.legal-body strong { color: var(--text-primary); font-weight: 600; }
/* long tokens (bare URLs, emails) must never push the page sideways */
.legal-body p, .legal-body li, .legal-body strong { overflow-wrap: anywhere; }

header a[aria-label$="home"] img { width: 44px; height: 44px; }

/* tap targets: dense nav/mailto links get a 44px hit area without visual change */
header nav a,
footer nav a,
footer a[href^="mailto:"] {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  min-width: 44px;
  max-width: 100%;
  overflow-wrap: anywhere;
}