/* ==========================================================================
   IN7 GAME — Global stylesheet
   Reset · Layout · Header · Buttons · Cards · Footer · Motion
   ========================================================================== */

/* ---------- 1. Reset & base ---------- */
*,
*::before,
*::after { box-sizing: border-box; }

* { margin: 0; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--header-h) + 24px);
  overflow-x: hidden;
}

body {
  min-height: 100vh;
  width: 100%;
  max-width: 100%;
  overflow-x: hidden;
  background-color: var(--color-bg);
  color: var(--color-text-body);
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

img,
picture,
svg,
video {
  display: block;
  max-width: 100%;
  height: auto;
}

/* Component display rules must never beat the hidden attribute */
[hidden] { display: none !important; }

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

button { background: none; border: 0; cursor: pointer; }

a { color: var(--color-crimson); text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { color: var(--color-crimson-deep); }

ul, ol { padding-left: 1.15rem; }

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-display);
  color: var(--color-text-primary);
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-tight);
  font-weight: 700;
  text-wrap: balance;
}

h1 { font-size: var(--fs-h1); }
h2 { font-size: var(--fs-h2); }
h3 { font-size: var(--fs-h3); line-height: var(--lh-snug); }
h4 { font-size: var(--fs-h4); line-height: var(--lh-snug); }

p { text-wrap: pretty; }

::selection {
  background: var(--color-gold-light);
  color: var(--color-black);
}

:focus-visible {
  outline: 3px solid var(--color-gold);
  outline-offset: 3px;
  border-radius: var(--r-xs);
}

/* Skip link */
.skip-link {
  position: absolute;
  top: -100px;
  left: var(--sp-4);
  z-index: var(--z-top);
  padding: .75rem 1.25rem;
  background: var(--color-black);
  color: var(--color-text-invert);
  border-radius: 0 0 var(--r-sm) var(--r-sm);
  font-weight: 700;
  text-decoration: none;
  transition: top var(--t-base) var(--ease-out);
}
.skip-link:focus { top: 0; color: var(--color-text-invert); }

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

.container--wide {
  max-width: calc(var(--container-wide) + var(--gutter) * 2);
}

.container--text {
  max-width: calc(var(--container-text) + var(--gutter) * 2);
}

.section {
  position: relative;
  padding-block: var(--section-y);
}

.section--alt   { background: var(--color-surface-alt); }
.section--sunk  { background: var(--color-surface-sunk); }
.section--white { background: var(--color-surface); }
.section--tight { padding-block: clamp(2.5rem, 1.5rem + 4vw, 4rem); }

/* Hairline dividers between stacked sections */
.section--ruled { border-top: 1px solid var(--color-border-soft); }

.stack > * + * { margin-top: var(--sp-4); }
.stack-lg > * + * { margin-top: var(--sp-6); }

.grid { display: grid; gap: clamp(1rem, .6rem + 1.4vw, 1.85rem); }
.grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }

@media (max-width: 1000px) {
  .grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .grid--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 620px) {
  .grid--2, .grid--3, .grid--4 { grid-template-columns: minmax(0, 1fr); }
}

/* ---------- 3. Section headers ---------- */
.section-head {
  max-width: 760px;
  margin-bottom: clamp(2rem, 1.2rem + 2.4vw, 3.25rem);
}
.section-head--center { margin-inline: auto; text-align: center; }
.section-head--wide { max-width: 900px; }

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: .55rem;
  margin-bottom: var(--sp-3);
  font-family: var(--font-display);
  font-size: var(--fs-tiny);
  font-weight: 700;
  letter-spacing: var(--ls-eyebrow);
  text-transform: uppercase;
  color: var(--color-gold-deep);
}
.eyebrow::before {
  content: "";
  width: 26px;
  height: 2px;
  background: var(--grad-gold);
  border-radius: 2px;
}
.section-head--center .eyebrow::after {
  content: "";
  width: 26px;
  height: 2px;
  background: var(--grad-gold);
  border-radius: 2px;
}

.section-title { font-size: var(--fs-h2); margin-bottom: var(--sp-4); }

/* Gold underline accent for headings */
.title-rule { position: relative; display: inline-block; }
.title-rule::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -.32em;
  width: 100%;
  height: 3px;
  border-radius: 3px;
  background: var(--grad-gold);
  opacity: .9;
}
.section-head--center .title-rule::after { left: 50%; width: 72px; transform: translateX(-50%); }

.section-lead {
  font-size: var(--fs-lead);
  color: var(--color-text-muted);
  line-height: var(--lh-loose);
}

.prose p + p { margin-top: 1.15rem; }
.prose p { color: var(--color-text-body); line-height: var(--lh-loose); }
.prose h3 { margin-top: 2.25rem; margin-bottom: .85rem; }
.prose h4 { margin-top: 1.75rem; margin-bottom: .6rem; }
.prose ul, .prose ol { margin-top: 1rem; padding-left: 1.35rem; }
.prose li { margin-bottom: .6rem; line-height: var(--lh-loose); }
.prose li::marker { color: var(--color-gold-deep); }
.prose strong { color: var(--color-text-primary); font-weight: 700; }

/* ---------- 4. Buttons ---------- */
.btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .6rem;
  padding: .95rem 1.75rem;
  border-radius: var(--r-pill);
  font-family: var(--font-display);
  font-size: var(--fs-sm);
  font-weight: 700;
  letter-spacing: .01em;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  overflow: hidden;
  isolation: isolate;
  transition: transform var(--t-base) var(--ease-out),
              box-shadow var(--t-base) var(--ease-out),
              background-color var(--t-base) var(--ease-out),
              color var(--t-base) var(--ease-out),
              border-color var(--t-base) var(--ease-out);
}

.btn:hover { transform: translateY(-2px); }
.btn:active { transform: translateY(0); }

/* Primary — crimson fill, gold rim */
.btn--primary {
  background: var(--grad-crimson);
  color: #FFF7F2;
  border: 1.5px solid rgba(238, 223, 174, .85);
  box-shadow: var(--shadow-crimson), inset 0 1px 0 rgba(255, 255, 255, .18);
}
.btn--primary:hover {
  color: #FFF7F2;
  box-shadow: 0 16px 34px rgba(194, 28, 52, .34), var(--shadow-gold-glow),
              inset 0 1px 0 rgba(255, 255, 255, .22);
}

/* Secondary — gold outline on light fill */
.btn--outline {
  background: var(--color-surface);
  color: var(--color-text-primary);
  border: 1.5px solid var(--color-gold);
  box-shadow: var(--shadow-xs);
}
.btn--outline:hover {
  color: var(--color-text-primary);
  background: var(--color-gold-wash);
  box-shadow: var(--shadow-sm), var(--shadow-gold-glow);
}

/* Dark — for use on light backgrounds where crimson is taken */
.btn--dark {
  background: var(--color-black);
  color: var(--color-text-invert);
  border: 1.5px solid var(--color-black);
}
.btn--dark:hover { color: var(--color-text-invert); border-color: var(--color-gold); }

/* Ghost — for use inside dark bands */
.btn--ghost {
  background: rgba(255, 255, 255, .06);
  color: var(--color-text-invert);
  border: 1.5px solid rgba(238, 223, 174, .38);
  backdrop-filter: blur(6px);
}
.btn--ghost:hover {
  color: var(--color-black);
  background: var(--color-gold-light);
  border-color: var(--color-gold-light);
}

.btn--lg { padding: 1.15rem 2.35rem; font-size: 1.02rem; }
.btn--sm { padding: .65rem 1.2rem; font-size: var(--fs-xs); }
.btn--block { display: flex; width: 100%; }

.btn__icon { width: 1.15em; height: 1.15em; flex: none; }
.btn__arrow { transition: transform var(--t-base) var(--ease-out); }
.btn:hover .btn__arrow { transform: translateX(4px); }

/* Unlock ripple — gold pulse radiating from the tap point */
.ripple-ink {
  position: absolute;
  border-radius: 50%;
  transform: scale(0);
  pointer-events: none;
  background: radial-gradient(circle, rgba(238, 223, 174, .85) 0%, rgba(201, 162, 39, .45) 45%, rgba(201, 162, 39, 0) 72%);
  animation: unlock-ripple .72s var(--ease-out) forwards;
  z-index: -1;
}

@keyframes unlock-ripple {
  to { transform: scale(2.6); opacity: 0; }
}

/* Telegram buttons */
.btn--telegram {
  background: linear-gradient(135deg, #2FA8E0 0%, #1D8FCB 55%, #16719F 100%);
  color: #FFFFFF;
  border: 1.5px solid rgba(238, 223, 174, .6);
  box-shadow: 0 10px 26px rgba(29, 143, 203, .3);
}
.btn--telegram:hover {
  color: #FFFFFF;
  box-shadow: 0 16px 34px rgba(29, 143, 203, .38), var(--shadow-gold-glow);
}
.btn--telegram-soft {
  background: var(--color-surface);
  color: #14618A;
  border: 1.5px solid #BEE3F5;
  box-shadow: var(--shadow-xs);
}
.btn--telegram-soft:hover { color: #14618A; background: #F1FAFE; border-color: #7FCBEC; }

.tg-icon { width: 1.3em; height: 1.3em; flex: none; }

/* ---------- 5. Badges & pills ---------- */
.badge {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  padding: .38rem .85rem;
  border-radius: var(--r-pill);
  font-family: var(--font-display);
  font-size: var(--fs-tiny);
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  white-space: nowrap;
}

.badge--gold {
  background: var(--grad-gold);
  color: #2A1F05;
  box-shadow: 0 4px 14px rgba(201, 162, 39, .3);
}
.badge--crimson { background: var(--color-crimson-soft); color: var(--color-crimson-deep); }
.badge--outline { background: transparent; color: var(--color-gold-deep); border: 1px solid var(--color-gold); }
.badge--dark { background: var(--color-black); color: var(--color-gold-light); }
.badge--soft { background: var(--color-gold-wash); color: var(--color-gold-deep); border: 1px solid var(--color-gold-light); }

.badge--live::before {
  content: "";
  width: 7px; height: 7px;
  border-radius: 50%;
  background: #E7213F;
  box-shadow: 0 0 0 0 rgba(231, 33, 63, .6);
  animation: live-pulse 1.8s infinite;
}
@keyframes live-pulse {
  70%  { box-shadow: 0 0 0 7px rgba(231, 33, 63, 0); }
  100% { box-shadow: 0 0 0 0 rgba(231, 33, 63, 0); }
}

/* ---------- 6. Cards ---------- */
.card {
  position: relative;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--r-lg);
  padding: clamp(1.4rem, 1rem + 1.1vw, 2rem);
  box-shadow: var(--shadow-card);
  transition: transform var(--t-base) var(--ease-out), box-shadow var(--t-base) var(--ease-out),
              border-color var(--t-base) var(--ease-out);
}

.card--hover:hover {
  transform: translateY(-6px);
  box-shadow: var(--shadow-card-hover);
  border-color: var(--color-gold-light);
}

/* Gold top border treatment */
.card--topline { overflow: hidden; }
.card--topline::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 3px;
  background: var(--grad-gold);
}

.card__icon {
  display: grid;
  place-items: center;
  width: 52px;
  height: 52px;
  margin-bottom: var(--sp-4);
  border-radius: var(--r-md);
  background: var(--grad-gold-soft);
  border: 1px solid var(--color-gold-light);
  color: var(--color-gold-deep);
}
.card__icon svg { width: 26px; height: 26px; }

.card__title { font-size: var(--fs-h4); margin-bottom: .6rem; }
.card__text { font-size: var(--fs-sm); color: var(--color-text-muted); line-height: var(--lh-loose); }

/* ---------- 7. Header / navigation ---------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: var(--z-header);
  width: 100%;
  background: rgba(250, 247, 240, .82);
  backdrop-filter: blur(14px) saturate(1.4);
  -webkit-backdrop-filter: blur(14px) saturate(1.4);
  border-bottom: 1px solid transparent;
  transition: background-color var(--t-base) var(--ease-out),
              box-shadow var(--t-base) var(--ease-out),
              border-color var(--t-base) var(--ease-out);
}

.site-header.is-stuck {
  background: rgba(255, 253, 248, .95);
  box-shadow: 0 6px 26px rgba(12, 10, 11, .09);
  border-bottom-color: var(--color-gold-light);
}

.site-header.is-stuck::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: -1px;
  height: 2px;
  background: var(--grad-gold);
  transform-origin: left;
  animation: nav-rule .5s var(--ease-out) forwards;
}
@keyframes nav-rule { from { transform: scaleX(0); } to { transform: scaleX(1); } }

.nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-5);
  min-height: var(--header-h);
}

/* Brand — logo sits on a dark keycard plate so the white mark reads
   crisply against the light canvas. The logo file itself is untouched. */
.brand {
  display: inline-flex;
  align-items: center;
  flex: none;
  text-decoration: none;
  transition: transform var(--t-base) var(--ease-out);
}
.brand:hover { transform: translateY(-1px); }

.brand__plate {
  display: grid;
  place-items: center;
  padding: .62rem 1.15rem;
  border-radius: var(--r-md);
  background: var(--grad-card-face);
  border: 1px solid rgba(201, 162, 39, .55);
  box-shadow: 0 6px 18px rgba(12, 10, 11, .18), inset 0 1px 0 rgba(255, 255, 255, .08);
  transition: box-shadow var(--t-base) var(--ease-out), border-color var(--t-base) var(--ease-out);
}
.brand:hover .brand__plate {
  border-color: var(--color-gold);
  box-shadow: 0 8px 22px rgba(12, 10, 11, .22), var(--shadow-gold-glow);
}

.brand__logo {
  width: auto;
  height: 34px;
  object-fit: contain;
}

.brand--footer .brand__plate {
  background: rgba(255, 255, 255, .05);
  border-color: rgba(201, 162, 39, .4);
  padding: .7rem 1.3rem;
}
.brand--footer .brand__logo { height: 40px; }

@media (max-width: 560px) {
  .brand__plate { padding: .5rem .85rem; }
  .brand__logo { height: 26px; }
}

/* Primary nav */
.nav__menu {
  display: flex;
  align-items: center;
  gap: clamp(.4rem, .1rem + 1vw, 1.35rem);
  list-style: none;
  margin: 0;
  padding: 0;
}

.nav__link {
  position: relative;
  display: inline-block;
  padding: .55rem .3rem;
  font-family: var(--font-display);
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--color-text-primary);
  text-decoration: none;
  transition: color var(--t-fast) var(--ease-out);
}
.nav__link::after {
  content: "";
  position: absolute;
  left: 0; bottom: .2rem;
  width: 100%;
  height: 2px;
  border-radius: 2px;
  background: var(--grad-gold);
  transform: scaleX(0);
  transform-origin: right;
  transition: transform var(--t-base) var(--ease-out);
}
.nav__link:hover { color: var(--color-crimson); }
.nav__link:hover::after,
.nav__link.is-active::after { transform: scaleX(1); transform-origin: left; }
.nav__link.is-active { color: var(--color-crimson-deep); }

.nav__actions { display: flex; align-items: center; gap: .6rem; flex: none; }

.nav__tg {
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background: var(--color-surface);
  border: 1.5px solid #BEE3F5;
  color: #1D8FCB;
  box-shadow: var(--shadow-xs);
  transition: transform var(--t-base) var(--ease-out), box-shadow var(--t-base) var(--ease-out),
              border-color var(--t-base) var(--ease-out);
}
.nav__tg svg { width: 21px; height: 21px; }
.nav__tg:hover {
  transform: translateY(-2px) scale(1.04);
  border-color: #1D8FCB;
  box-shadow: 0 8px 20px rgba(29, 143, 203, .28);
  color: #14618A;
}

/* Burger */
.nav__burger {
  display: none;
  width: 46px;
  height: 46px;
  border-radius: var(--r-sm);
  border: 1px solid var(--color-border);
  background: var(--color-surface);
  place-items: center;
  flex: none;
}
.nav__burger span {
  display: block;
  width: 20px;
  height: 2px;
  border-radius: 2px;
  background: var(--color-text-primary);
  transition: transform var(--t-base) var(--ease-out), opacity var(--t-fast) var(--ease-out);
}
.nav__burger span + span { margin-top: 5px; }
.nav__burger.is-open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav__burger.is-open span:nth-child(2) { opacity: 0; }
.nav__burger.is-open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

@media (max-width: 1080px) {
  .nav__menu { display: none; }
  .nav__burger { display: grid; }
  .nav__actions .btn--nav-cta { display: none; }
  .nav { min-height: var(--header-h-mobile); }
}

/* Mobile drawer */
.mobile-nav {
  position: fixed;
  inset: 0 0 0 auto;
  width: min(360px, 88vw);
  z-index: var(--z-modal);
  padding: calc(var(--header-h-mobile) + 1.5rem) 1.75rem 2rem;
  background: var(--color-bg);
  border-left: 1px solid var(--color-gold-light);
  box-shadow: -24px 0 60px rgba(12, 10, 11, .18);
  transform: translateX(102%);
  visibility: hidden;
  overflow-y: auto;
  transition: transform var(--t-slow) var(--ease-out), visibility var(--t-slow);
}
.mobile-nav.is-open { transform: translateX(0); visibility: visible; }

.mobile-nav__list { list-style: none; margin: 0 0 1.75rem; padding: 0; }
.mobile-nav__list li { border-bottom: 1px solid var(--color-border-soft); }
.mobile-nav__link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1rem .25rem;
  font-family: var(--font-display);
  font-size: 1.05rem;
  font-weight: 600;
  color: var(--color-text-primary);
  text-decoration: none;
}
.mobile-nav__link::after { content: "→"; color: var(--color-gold-deep); opacity: 0; transform: translateX(-6px); transition: all var(--t-base) var(--ease-out); }
.mobile-nav__link:hover { color: var(--color-crimson); }
.mobile-nav__link:hover::after { opacity: 1; transform: translateX(0); }
.mobile-nav__link.is-active { color: var(--color-crimson-deep); }

.mobile-nav__cta { display: grid; gap: .7rem; }

.nav-scrim {
  position: fixed;
  inset: 0;
  z-index: var(--z-overlay);
  background: rgba(12, 10, 11, .45);
  backdrop-filter: blur(3px);
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--t-base) var(--ease-out), visibility var(--t-base);
}
.nav-scrim.is-open { opacity: 1; visibility: visible; }

body.nav-locked { overflow: hidden; }

/* ---------- 8. Announcement ticker ---------- */
.ticker {
  overflow: hidden;
  background: var(--color-black);
  border-block: 1px solid rgba(201, 162, 39, .3);
  padding-block: .7rem;
}
.ticker__track {
  display: flex;
  width: max-content;
  gap: 2.75rem;
  animation: ticker-scroll 42s linear infinite;
}
.ticker:hover .ticker__track { animation-play-state: paused; }
.ticker__item {
  display: inline-flex;
  align-items: center;
  gap: .6rem;
  font-family: var(--font-display);
  font-size: var(--fs-xs);
  font-weight: 600;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--color-text-invert-muted);
  white-space: nowrap;
}
.ticker__item strong { color: var(--color-gold-light); font-weight: 700; }
.ticker__item::before {
  content: "◆";
  color: var(--color-gold);
  font-size: .6rem;
}
@keyframes ticker-scroll {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

/* ---------- 9. Footer ---------- */
.site-footer {
  position: relative;
  background: var(--grad-footer);
  color: var(--color-text-invert-muted);
  padding-top: clamp(3rem, 2rem + 4vw, 5rem);
  overflow: hidden;
}

/* Session-close sweep across the footer's top border */
.site-footer::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 2px;
  background: rgba(201, 162, 39, .18);
}
.site-footer::after {
  content: "";
  position: absolute;
  top: 0; left: 0;
  width: 100%;
  height: 2px;
  background: linear-gradient(90deg, transparent 0%, var(--color-gold) 35%, #F5E7B8 50%, var(--color-gold) 65%, transparent 100%);
  transform: translateX(-100%);
}
.site-footer.is-sealed::after { animation: footer-sweep 1.5s var(--ease-out) forwards; }
@keyframes footer-sweep {
  to { transform: translateX(100%); }
}

.footer__grid {
  display: grid;
  grid-template-columns: 1.5fr 1fr 1fr 1.35fr;
  gap: clamp(1.75rem, 1rem + 2.6vw, 3.25rem);
  padding-bottom: clamp(2.25rem, 1.5rem + 2.5vw, 3.5rem);
}
@media (max-width: 1000px) { .footer__grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px)  { .footer__grid { grid-template-columns: 1fr; } }

.footer__tagline {
  margin-top: 1.15rem;
  font-size: var(--fs-sm);
  line-height: var(--lh-loose);
  color: var(--color-text-invert-muted);
  max-width: 34ch;
}

.footer__heading {
  margin-bottom: 1.1rem;
  font-family: var(--font-display);
  font-size: var(--fs-tiny);
  font-weight: 700;
  letter-spacing: var(--ls-eyebrow);
  text-transform: uppercase;
  color: var(--color-gold-light);
}

.footer__links { list-style: none; margin: 0; padding: 0; display: grid; gap: .7rem; }
.footer__links a {
  font-size: var(--fs-sm);
  color: var(--color-text-invert-muted);
  text-decoration: none;
  transition: color var(--t-fast) var(--ease-out), padding-left var(--t-fast) var(--ease-out);
}
.footer__links a:hover { color: var(--color-gold-light); padding-left: 5px; }

.footer__tg { display: grid; gap: .85rem; }
.footer__tg-card {
  display: flex;
  align-items: center;
  gap: .85rem;
  padding: .85rem 1rem;
  border-radius: var(--r-md);
  background: rgba(255, 255, 255, .04);
  border: 1px solid rgba(201, 162, 39, .22);
  text-decoration: none;
  transition: border-color var(--t-base) var(--ease-out), background-color var(--t-base) var(--ease-out),
              transform var(--t-base) var(--ease-out);
}
.footer__tg-card:hover {
  transform: translateX(4px);
  border-color: var(--color-gold);
  background: rgba(201, 162, 39, .1);
}
.footer__tg-icon {
  display: grid;
  place-items: center;
  width: 38px; height: 38px;
  flex: none;
  border-radius: 50%;
  background: linear-gradient(135deg, #2FA8E0, #16719F);
  color: #fff;
}
.footer__tg-icon svg { width: 20px; height: 20px; }
.footer__tg-label { display: block; font-family: var(--font-display); font-size: var(--fs-sm); font-weight: 700; color: var(--color-text-invert); }
.footer__tg-meta  { display: block; font-size: var(--fs-tiny); color: var(--color-text-invert-muted); }

/* Compliance strip */
.footer__compliance {
  padding-block: clamp(1.5rem, 1rem + 1.6vw, 2.25rem);
  border-top: 1px solid rgba(255, 255, 255, .08);
}
.footer__compliance-inner {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 1.35rem;
  align-items: start;
}
@media (max-width: 700px) { .footer__compliance-inner { grid-template-columns: 1fr; } }

.age-mark {
  display: grid;
  place-items: center;
  width: 58px; height: 58px;
  flex: none;
  border-radius: 50%;
  border: 2px solid var(--color-crimson);
  background: rgba(194, 28, 52, .12);
  font-family: var(--font-display);
  font-size: 1.05rem;
  font-weight: 800;
  color: #FF8FA0;
}

.footer__disclaimer {
  font-size: var(--fs-xs);
  line-height: 1.8;
  color: var(--color-text-invert-muted);
}
.footer__disclaimer strong { color: #E4D9C1; font-weight: 700; }
.footer__disclaimer a { color: var(--color-gold-light); }
.footer__disclaimer p + p { margin-top: .7rem; }

.restricted-states {
  display: flex;
  flex-wrap: wrap;
  gap: .45rem;
  margin-top: .85rem;
}
.restricted-states span {
  padding: .25rem .65rem;
  border-radius: var(--r-pill);
  border: 1px solid rgba(255, 143, 160, .32);
  background: rgba(194, 28, 52, .1);
  font-size: var(--fs-tiny);
  color: #F0BFC7;
}

.footer__bottom {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  align-items: center;
  justify-content: space-between;
  padding-block: 1.35rem;
  border-top: 1px solid rgba(255, 255, 255, .08);
  font-size: var(--fs-xs);
}
.footer__bottom a { color: var(--color-text-invert-muted); text-decoration: none; }
.footer__bottom a:hover { color: var(--color-gold-light); }
.footer__bottom-links { display: flex; flex-wrap: wrap; gap: 1.15rem; }

/* ---------- 10. Reveal / scroll motion ---------- */
[data-reveal] {
  opacity: 0;
  transform: translateY(26px);
  transition: opacity .7s var(--ease-out), transform .7s var(--ease-out);
  will-change: opacity, transform;
}
[data-reveal].is-visible { opacity: 1; transform: none; }

[data-reveal="left"]  { transform: translateX(-32px); }
[data-reveal="right"] { transform: translateX(32px); }
[data-reveal="zoom"]  { transform: scale(.94); }
[data-reveal="fade"]  { transform: none; }

/* ---------- 11. Shared decorative helpers ---------- */
.gold-rule {
  width: 100%;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--color-gold-light) 20%, var(--color-gold) 50%, var(--color-gold-light) 80%, transparent);
  border: 0;
}

.dot-field {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image: radial-gradient(circle at 1px 1px, rgba(201, 162, 39, .22) 1px, transparent 0);
  background-size: 26px 26px;
  mask-image: radial-gradient(ellipse 70% 60% at 50% 40%, #000 25%, transparent 75%);
  -webkit-mask-image: radial-gradient(ellipse 70% 60% at 50% 40%, #000 25%, transparent 75%);
}

.glow-orb {
  position: absolute;
  border-radius: 50%;
  filter: blur(70px);
  pointer-events: none;
  opacity: .5;
}

.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;
}

.text-center { text-align: center; }
.mt-0 { margin-top: 0; }

/* ---------- 12. Breadcrumbs ---------- */
.breadcrumb {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .5rem;
  list-style: none;
  margin: 0;
  padding: 0;
  font-size: var(--fs-xs);
  color: var(--color-text-muted);
}
.breadcrumb li { display: flex; align-items: center; gap: .5rem; }
.breadcrumb li + li::before { content: "/"; color: var(--color-gold); }
.breadcrumb a { color: var(--color-text-muted); text-decoration: none; }
.breadcrumb a:hover { color: var(--color-crimson); }
.breadcrumb [aria-current] { color: var(--color-text-primary); font-weight: 600; }

/* ---------- 13. Page hero (inner pages) ---------- */
.page-hero {
  position: relative;
  padding-block: clamp(2.75rem, 2rem + 4vw, 5rem) clamp(2.5rem, 1.8rem + 3vw, 4rem);
  background:
    radial-gradient(ellipse 60% 100% at 12% 0%, rgba(238, 223, 174, .5), transparent 62%),
    radial-gradient(ellipse 55% 90% at 90% 20%, rgba(251, 233, 236, .7), transparent 60%),
    var(--color-bg);
  border-bottom: 1px solid var(--color-border-soft);
  overflow: hidden;
}
.page-hero__inner { position: relative; z-index: var(--z-raised); max-width: 820px; }
.page-hero__title { font-size: var(--fs-h1); margin-block: 1rem .95rem; }
.page-hero__lead { font-size: var(--fs-lead); color: var(--color-text-muted); line-height: var(--lh-loose); }
.page-hero__meta {
  display: flex;
  flex-wrap: wrap;
  gap: .65rem;
  margin-top: 1.6rem;
}

/* ---------- 14. Accordion (FAQ) ---------- */
.accordion { display: grid; gap: .85rem; }

.accordion__item {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--r-md);
  overflow: hidden;
  transition: border-color var(--t-base) var(--ease-out), box-shadow var(--t-base) var(--ease-out);
}
.accordion__item.is-open {
  border-color: var(--color-gold);
  box-shadow: var(--shadow-card);
}

.accordion__trigger {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  width: 100%;
  padding: 1.15rem 1.4rem;
  text-align: left;
  font-family: var(--font-display);
  font-size: var(--fs-h4);
  font-weight: 600;
  color: var(--color-text-primary);
  transition: color var(--t-fast) var(--ease-out);
}
.accordion__trigger:hover { color: var(--color-crimson); }

.accordion__sign {
  position: relative;
  flex: none;
  width: 28px; height: 28px;
  border-radius: 50%;
  border: 1px solid var(--color-gold-light);
  background: var(--color-gold-wash);
}
.accordion__sign::before,
.accordion__sign::after {
  content: "";
  position: absolute;
  top: 50%; left: 50%;
  background: var(--color-gold-deep);
  border-radius: 2px;
  transform: translate(-50%, -50%);
  transition: transform var(--t-base) var(--ease-out), opacity var(--t-fast);
}
.accordion__sign::before { width: 11px; height: 2px; }
.accordion__sign::after  { width: 2px; height: 11px; }
.is-open .accordion__sign::after { transform: translate(-50%, -50%) rotate(90deg); opacity: 0; }

.accordion__panel {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows var(--t-base) var(--ease-out);
}
.is-open .accordion__panel { grid-template-rows: 1fr; }
.accordion__panel > div { overflow: hidden; }
.accordion__body {
  padding: 0 1.4rem 1.35rem;
  font-size: var(--fs-sm);
  color: var(--color-text-muted);
  line-height: var(--lh-loose);
}
.accordion__body p + p { margin-top: .85rem; }

/* ---------- 15. Tables ---------- */
.data-table-wrap {
  overflow-x: auto;
  border: 1px solid var(--color-border);
  border-radius: var(--r-md);
  background: var(--color-surface);
  box-shadow: var(--shadow-sm);
  -webkit-overflow-scrolling: touch;
}
.data-table {
  width: 100%;
  min-width: 520px;
  border-collapse: collapse;
  font-size: var(--fs-sm);
}
.data-table th,
.data-table td {
  padding: .95rem 1.15rem;
  text-align: left;
  border-bottom: 1px solid var(--color-border-soft);
}
.data-table thead th {
  background: var(--color-black);
  color: var(--color-gold-light);
  font-family: var(--font-display);
  font-size: var(--fs-tiny);
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  white-space: nowrap;
}
.data-table tbody tr:last-child td { border-bottom: 0; }
.data-table tbody tr:nth-child(even) { background: var(--color-surface-sunk); }
.data-table td strong { color: var(--color-text-primary); }

/* ---------- 16. CTA band ---------- */
.cta-band {
  position: relative;
  overflow: hidden;
  background: var(--grad-card-face);
  color: var(--color-text-invert);
  border-radius: var(--r-2xl);
  padding: clamp(2.25rem, 1.5rem + 3.5vw, 4rem) clamp(1.5rem, 1rem + 3vw, 3.5rem);
  box-shadow: var(--shadow-lift);
  isolation: isolate;
}
.cta-band::before {
  content: "";
  position: absolute;
  inset: 1px;
  border-radius: calc(var(--r-2xl) - 1px);
  padding: 1px;
  background: linear-gradient(135deg, rgba(238, 223, 174, .7), rgba(201, 162, 39, .1) 45%, rgba(238, 223, 174, .55));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  pointer-events: none;
}
.cta-band__glow {
  position: absolute;
  width: 420px; height: 420px;
  border-radius: 50%;
  filter: blur(90px);
  z-index: -1;
}
.cta-band h2 { color: var(--color-text-invert); }
.cta-band p { color: var(--color-text-invert-muted); }

.cta-band__inner {
  position: relative;
  display: grid;
  grid-template-columns: 1.35fr auto;
  gap: clamp(1.5rem, 1rem + 3vw, 3.5rem);
  align-items: center;
}
@media (max-width: 860px) { .cta-band__inner { grid-template-columns: 1fr; } }

.cta-band__actions { display: flex; flex-wrap: wrap; gap: .85rem; }

/* ---------- 17. Game grid & access-card tiles (shared: home, games, details) ---------- */
.games-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(184px, 1fr));
  gap: clamp(.85rem, .5rem + 1vw, 1.4rem);
}
@media (max-width: 520px) {
  .games-grid { grid-template-columns: repeat(auto-fill, minmax(144px, 1fr)); }
}

.gcard {
  perspective: 900px;
  min-width: 0;
}

.gcard__link {
  position: relative;
  display: block;
  border-radius: var(--r-md);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  box-shadow: var(--shadow-sm);
  text-decoration: none;
  overflow: hidden;
  transform: rotateX(var(--tilt-x, 0deg)) rotateY(var(--tilt-y, 0deg)) translateZ(0);
  transform-style: preserve-3d;
  transition: transform var(--t-base) var(--ease-out), box-shadow var(--t-base) var(--ease-out),
              border-color var(--t-base) var(--ease-out);
}
.gcard__link:hover,
.gcard__link:focus-visible {
  box-shadow: var(--shadow-card-hover);
  border-color: var(--color-gold);
}

.gcard__media {
  position: relative;
  display: block;
  aspect-ratio: 1 / 1;
  overflow: hidden;
  background: var(--color-surface-sunk);
}
.gcard__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--t-slow) var(--ease-out);
}
.gcard__link:hover .gcard__media img { transform: scale(1.07); }

.gcard__scrim {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(12, 10, 11, 0) 40%, rgba(12, 10, 11, .72) 100%);
  opacity: 0;
  transition: opacity var(--t-base) var(--ease-out);
}
.gcard__link:hover .gcard__scrim,
.gcard__link:focus-visible .gcard__scrim { opacity: 1; }

.gcard__enter {
  position: absolute;
  left: 50%;
  bottom: 14%;
  transform: translate(-50%, 12px);
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  padding: .42rem 1rem;
  border-radius: var(--r-pill);
  background: var(--grad-gold);
  color: #2A1F05;
  font-family: var(--font-display);
  font-size: var(--fs-tiny);
  font-weight: 800;
  letter-spacing: .06em;
  text-transform: uppercase;
  opacity: 0;
  white-space: nowrap;
  transition: opacity var(--t-base) var(--ease-out), transform var(--t-base) var(--ease-out);
}
.gcard__enter em { font-style: normal; }
.gcard__link:hover .gcard__enter,
.gcard__link:focus-visible .gcard__enter { opacity: 1; transform: translate(-50%, 0); }

.gcard__tag {
  position: absolute;
  top: .55rem;
  left: .55rem;
  padding: .22rem .6rem;
  border-radius: var(--r-pill);
  background: rgba(12, 10, 11, .78);
  color: var(--color-gold-light);
  font-family: var(--font-display);
  font-size: .625rem;
  font-weight: 700;
  letter-spacing: .07em;
  text-transform: uppercase;
  backdrop-filter: blur(4px);
}

.gcard__body {
  display: block;
  padding: .8rem .85rem .95rem;
  border-top: 1px solid var(--color-border-soft);
}
.gcard__cat {
  display: block;
  font-size: .625rem;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--color-gold-deep);
  margin-bottom: .28rem;
}
.gcard__name {
  display: block;
  font-family: var(--font-display);
  font-size: var(--fs-sm);
  font-weight: 700;
  color: var(--color-text-primary);
  line-height: 1.3;
  margin-bottom: .35rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.gcard__meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .5rem;
  font-size: var(--fs-tiny);
  color: var(--color-text-muted);
}
.gcard__meta b { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.gcard__meta i { font-style: normal; color: var(--color-gold-deep); font-weight: 700; white-space: nowrap; }

/* ---------- 18. App mockup (phone frame) — home + download ---------- */
.phone {
  position: relative;
  width: min(300px, 74vw);
  aspect-ratio: 848 / 1740;
  border-radius: 42px;
  padding: 10px;
  background: linear-gradient(155deg, #3A3336 0%, #0C0A0B 30%, #262023 62%, #0C0A0B 100%);
  box-shadow:
    0 40px 80px rgba(12, 10, 11, .32),
    0 0 0 1px rgba(201, 162, 39, .38),
    inset 0 1px 0 rgba(255, 255, 255, .14);
}

.phone__screen {
  position: relative;
  width: 100%;
  height: 100%;
  border-radius: 33px;
  overflow: hidden;
  background: #0C0A0B;
}
.phone__screen img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top center;
}

/* Notch / speaker bar */
.phone__notch {
  position: absolute;
  top: 10px;
  left: 50%;
  transform: translateX(-50%);
  width: 34%;
  height: 22px;
  border-radius: 0 0 14px 14px;
  background: #0C0A0B;
  z-index: 3;
}
.phone__notch::after {
  content: "";
  position: absolute;
  top: 7px; left: 50%;
  transform: translateX(-50%);
  width: 38%;
  height: 4px;
  border-radius: 4px;
  background: #322B2E;
}

/* Screen glare that sweeps once on load and again on hover */
.phone__glare {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  background: linear-gradient(115deg, transparent 30%, rgba(255, 255, 255, .16) 45%, rgba(255, 255, 255, .04) 55%, transparent 70%);
  transform: translateX(-120%);
  animation: phone-glare 5.5s var(--ease-out) 1.2s infinite;
}
@keyframes phone-glare {
  0%   { transform: translateX(-120%); }
  22%  { transform: translateX(120%); }
  100% { transform: translateX(120%); }
}

/* Side buttons */
.phone::before,
.phone::after {
  content: "";
  position: absolute;
  right: -3px;
  width: 3px;
  border-radius: 3px;
  background: linear-gradient(180deg, #4A4245, #201B1D);
}
.phone::before { top: 21%; height: 8%; }
.phone::after  { top: 33%; height: 13%; }

/* Idle float */
.phone--float { animation: phone-float 6.5s var(--ease-soft) infinite; }
@keyframes phone-float {
  0%, 100% { transform: translateY(0) rotate(0deg); }
  50%      { transform: translateY(-16px) rotate(-.6deg); }
}

/* Floating spec chips orbiting the phone */
.phone-stage {
  position: relative;
  display: grid;
  place-items: center;
  padding-block: 1rem;
}

.phone-chip {
  position: absolute;
  display: inline-flex;
  align-items: center;
  gap: .55rem;
  padding: .6rem .95rem;
  border-radius: var(--r-pill);
  background: rgba(255, 255, 255, .92);
  border: 1px solid var(--color-gold-light);
  box-shadow: var(--shadow-card);
  backdrop-filter: blur(8px);
  font-family: var(--font-display);
  font-size: var(--fs-tiny);
  font-weight: 700;
  color: var(--color-text-primary);
  white-space: nowrap;
  z-index: 4;
}
.phone-chip svg { width: 15px; height: 15px; color: var(--color-gold-deep); flex: none; }
.phone-chip b { color: var(--color-crimson); font-weight: 800; }

.phone-chip--a { top: 12%;  left: -12%;  animation: chip-drift 7s var(--ease-soft) infinite; }
.phone-chip--b { top: 42%;  right: -14%; animation: chip-drift 8.2s var(--ease-soft) .7s infinite; }
.phone-chip--c { bottom: 15%; left: -8%;  animation: chip-drift 6.4s var(--ease-soft) 1.3s infinite; }
.phone-chip--d { bottom: 4%;  right: -6%; animation: chip-drift 7.6s var(--ease-soft) .3s infinite; }

@keyframes chip-drift {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-11px); }
}

@media (max-width: 1100px) {
  .phone-chip--a { left: -4%; }
  .phone-chip--b { right: -4%; }
  .phone-chip--c { left: -2%; }
  .phone-chip--d { right: 0; }
}
@media (max-width: 700px) {
  .phone-chip--a, .phone-chip--c { left: -.5rem; }
  .phone-chip--b, .phone-chip--d { right: -.5rem; }
  .phone-chip { font-size: .68rem; padding: .45rem .7rem; }
}
@media (max-width: 420px) {
  .phone-chip--b, .phone-chip--d { display: none; }
}

/* ---------- 19. Telegram CTA cluster ---------- */
.tg-cluster {
  display: flex;
  flex-wrap: wrap;
  gap: .75rem;
  align-items: center;
}

.tg-pill {
  display: inline-flex;
  align-items: center;
  gap: .8rem;
  padding: .6rem 1.15rem .6rem .6rem;
  border-radius: var(--r-pill);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  box-shadow: var(--shadow-sm);
  text-decoration: none;
  transition: transform var(--t-base) var(--ease-out), box-shadow var(--t-base) var(--ease-out),
              border-color var(--t-base) var(--ease-out);
}
.tg-pill:hover {
  transform: translateY(-3px);
  border-color: #7FCBEC;
  box-shadow: 0 14px 30px rgba(29, 143, 203, .22);
}
.tg-pill__badge {
  display: grid;
  place-items: center;
  width: 36px; height: 36px;
  flex: none;
  border-radius: 50%;
  background: linear-gradient(135deg, #2FA8E0, #16719F);
  color: #fff;
  box-shadow: 0 4px 12px rgba(29, 143, 203, .35);
}
.tg-pill__badge svg { width: 19px; height: 19px; }
.tg-pill__text { display: grid; line-height: 1.3; }
.tg-pill__text b {
  font-family: var(--font-display);
  font-size: var(--fs-sm);
  font-weight: 700;
  color: var(--color-text-primary);
}
.tg-pill__text span { font-size: var(--fs-tiny); color: var(--color-text-muted); }

/* ---------- 20. Back to top ---------- */
.back-to-top {
  position: fixed;
  right: clamp(1rem, 2.5vw, 2rem);
  bottom: clamp(1rem, 2.5vw, 2rem);
  z-index: var(--z-sticky);
  display: grid;
  place-items: center;
  width: 48px; height: 48px;
  border-radius: 50%;
  background: var(--color-black);
  border: 1.5px solid var(--color-gold);
  color: var(--color-gold-light);
  box-shadow: var(--shadow-card);
  opacity: 0;
  visibility: hidden;
  transform: translateY(14px);
  transition: opacity var(--t-base) var(--ease-out), transform var(--t-base) var(--ease-out), visibility var(--t-base);
}
.back-to-top.is-visible { opacity: 1; visibility: visible; transform: none; }
.back-to-top:hover { background: var(--color-crimson); border-color: var(--color-gold-light); }
.back-to-top svg { width: 20px; height: 20px; }

/* ---------- 21. Keyword cloud (semantic SEO block) ---------- */
.keyword-cloud {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
}
.keyword-cloud span,
.keyword-cloud a {
  padding: .42rem .9rem;
  border-radius: var(--r-pill);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  font-size: var(--fs-tiny);
  color: var(--color-text-muted);
  text-decoration: none;
  transition: all var(--t-fast) var(--ease-out);
}
.keyword-cloud a:hover {
  border-color: var(--color-gold);
  color: var(--color-gold-deep);
  background: var(--color-gold-wash);
}

/* ---------- 22. Ticket dispenser (shared: home + download) ---------- */
.bonus__grid {
  position: relative;
  z-index: var(--z-raised);
  display: grid;
  grid-template-columns: minmax(0, .95fr) minmax(0, 1.05fr);
  gap: clamp(2rem, 1rem + 4vw, 4.5rem);
  align-items: center;
}
@media (max-width: 960px) { .bonus__grid { grid-template-columns: 1fr; } }

.dispenser {
  position: relative;
  display: grid;
  justify-items: center;
  padding-top: 2.5rem;
}

.dispenser__slot {
  position: relative;
  width: min(420px, 100%);
  border-radius: var(--r-xl);
  background: var(--grad-card-face);
  border: 1px solid rgba(201, 162, 39, .45);
  box-shadow: var(--shadow-lift);
  padding: 1.15rem 1.15rem 1.4rem;
  overflow: hidden;
}
.dispenser__slot::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: var(--grad-gold);
}

.dispenser__mouth {
  position: relative;
  height: 12px;
  border-radius: var(--r-pill);
  background: #000;
  box-shadow: inset 0 3px 8px rgba(0, 0, 0, .9), 0 1px 0 rgba(201, 162, 39, .35);
  margin-bottom: 1.15rem;
  z-index: 3;
}

.dispenser__label {
  position: relative;
  z-index: 3;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin-top: 1.15rem;
  padding-top: 1rem;
  border-top: 1px dashed rgba(201, 162, 39, .3);
  font-family: var(--font-display);
  font-size: var(--fs-tiny);
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--color-text-invert-muted);
}
.dispenser__label b { color: var(--color-gold-light); }

.ticket {
  position: relative;
  z-index: 2;
  border-radius: var(--r-md);
  padding: 2px;
  background: var(--grad-gold);
  box-shadow: 0 18px 40px rgba(0, 0, 0, .45);
  transform: translateY(58%) scale(.94);
  opacity: 0;
  cursor: pointer;
}
.is-dispensed .ticket {
  transition: transform 1.05s var(--ease-back), opacity .5s var(--ease-out);
  transform: translateY(0) scale(1);
  opacity: 1;
}

.ticket__body {
  position: relative;
  border-radius: calc(var(--r-md) - 2px);
  background: linear-gradient(160deg, #FFFDF7 0%, #F6EFDD 100%);
  padding: 1.5rem 1.5rem 1.35rem;
  overflow: hidden;
}

/* Perforated notches on both sides */
.ticket__body::before,
.ticket__body::after {
  content: "";
  position: absolute;
  top: 62%;
  width: 22px; height: 22px;
  border-radius: 50%;
  background: var(--color-black);
}
.ticket__body::before { left: -11px; }
.ticket__body::after  { right: -11px; }

.ticket__sweep {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(115deg, transparent 35%, rgba(255, 255, 255, .85) 48%, transparent 62%);
  transform: translateX(-130%);
}
.is-settled .ticket__sweep { animation: ticket-sweep 1.1s var(--ease-out) forwards; }
.ticket.is-flashed .ticket__sweep { animation: ticket-sweep .9s var(--ease-out) forwards; }
@keyframes ticket-sweep { to { transform: translateX(130%); } }

.ticket__kicker {
  font-family: var(--font-display);
  font-size: var(--fs-tiny);
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--color-gold-deep);
}
.ticket__amount {
  display: block;
  margin: .35rem 0 .1rem;
  font-family: var(--font-display);
  font-size: clamp(2.4rem, 1.6rem + 3.4vw, 3.6rem);
  font-weight: 800;
  line-height: 1;
  letter-spacing: -.03em;
  color: var(--color-black);
}
.ticket__sub {
  font-family: var(--font-display);
  font-size: var(--fs-sm);
  font-weight: 700;
  color: var(--color-crimson);
}

.ticket__cut {
  margin: 1.15rem -1.5rem .95rem;
  border: 0;
  border-top: 2px dashed var(--color-gold-light);
}

.ticket__meta {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: .6rem;
  font-size: var(--fs-tiny);
  color: var(--color-text-muted);
}
.ticket__meta b {
  display: block;
  font-family: var(--font-display);
  color: var(--color-text-primary);
  font-size: var(--fs-xs);
}
.ticket__code {
  font-family: var(--font-display);
  letter-spacing: .18em;
  color: var(--color-gold-deep) !important;
}

.bonus__steps {
  display: grid;
  gap: 1rem;
  margin: 1.75rem 0;
  padding: 0;
  list-style: none;
  counter-reset: bstep;
}
.bonus__steps li {
  position: relative;
  padding-left: 3.15rem;
  min-height: 2.35rem;
  font-size: var(--fs-sm);
  line-height: var(--lh-loose);
  color: var(--color-text-body);
  counter-increment: bstep;
}
.bonus__steps li::before {
  content: counter(bstep);
  position: absolute;
  left: 0; top: -.15rem;
  display: grid;
  place-items: center;
  width: 36px; height: 36px;
  border-radius: 50%;
  background: var(--grad-gold);
  color: #2A1F05;
  font-family: var(--font-display);
  font-size: var(--fs-sm);
  font-weight: 800;
  box-shadow: 0 4px 12px rgba(201, 162, 39, .35);
}
.bonus__steps b { color: var(--color-text-primary); }

/* ---------- 23. Tabs ---------- */
.tabs__list {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
  margin-bottom: 1.75rem;
  padding: .4rem;
  border-radius: var(--r-pill);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  box-shadow: var(--shadow-xs);
  width: fit-content;
  max-width: 100%;
}

.tabs__btn {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  padding: .65rem 1.35rem;
  border-radius: var(--r-pill);
  font-family: var(--font-display);
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--color-text-muted);
  white-space: nowrap;
  transition: all var(--t-base) var(--ease-out);
}
.tabs__btn svg { width: 17px; height: 17px; }
.tabs__btn:hover { color: var(--color-text-primary); }
.tabs__btn.is-active {
  background: var(--color-black);
  color: var(--color-text-invert);
  box-shadow: var(--shadow-sm);
}

.tabs__panel[hidden] { display: none; }
.tabs__panel { animation: tab-in .45s var(--ease-out); }
@keyframes tab-in {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: none; }
}

/* ---------- 24. Reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }

  *,
  *::before,
  *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }

  [data-reveal] { opacity: 1 !important; transform: none !important; }
  .ticker__track { animation: none; }
  .ripple-ink { display: none; }
}