/* A calmer surface system for the public site. Keep the existing content flows. */
:root {
  --bg: #110c18;
  --panel: #1b1423;
  --panel-2: #21182a;
  --line: #44314e;
  --muted: #c0b3ca;
  font-family: system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
}

body { background: var(--bg); }
.site-header { background: #150e1ded; backdrop-filter: blur(14px); }
.section { padding-block: 52px 72px; }
.section-heading h2, .inner-page h1 { letter-spacing: -.045em; }
.section-heading h2 { font-size: clamp(2rem, 3.7vw, 3.2rem); }
.section-heading > a { margin-right: 62px; }
.operator-chat { width: 48px; height: 48px; right: 8px; bottom: 12px; }
.operator-chat svg { width: 25px; height: 25px; }

/* The content and the current slide should be the focus, not decorative rings. */
.hero-slider { min-height: 350px; border-color: #62446d; background: #21152a; }
.hero-slide,
.hero-slide--games,
.hero-slide--help {
  min-height: 350px;
  background: linear-gradient(110deg, #201329 0%, #28172f 68%, #32203a 100%);
}
.hero-slide:before { display: none; }
.hero-slide-copy { width: min(740px, 85%); }
.hero-slide h1, .hero-slide h2 { max-width: 740px; }
.hero-slide:after { content: ''; position: absolute; inset: 0 0 auto; height: 3px; background: linear-gradient(90deg, var(--gold), #9a24ad 72%, transparent); pointer-events: none; }
.hero-brand-art { right: 5%; width: min(31%, 350px); opacity: .35; filter: none; }
.hero-slide-mark {
  display: none;
}
.hero-slider--fallback,
.hero-slider--fallback .hero-slide { min-height: 290px; }
.hero-slider--fallback .hero-slide { padding-block: 42px 60px; }
.hero-slide--no-art .hero-slide-copy { width: min(760px, 90%); }
.hero-slide.is-entering { animation: yvnbet-slide-enter 380ms cubic-bezier(.22,.7,.24,1) both; }
@keyframes yvnbet-slide-enter {
  from { opacity: .5; transform: translateX(18px); }
  to { opacity: 1; transform: translateX(0); }
}
@media (prefers-reduced-motion: reduce) {
  .hero-slide.is-entering { animation: none; }
}
.slider-arrow { width: 38px; height: 38px; }
.slider-dot.is-active { width: 22px; }

.game-card, .promotion-card {
  background: var(--panel);
  border-color: var(--line);
  box-shadow: none;
}
.game-card:hover { transform: translateY(-2px); border-color: #ad80b4; }
.game-card:focus-within { border-color: var(--gold); outline: 2px solid var(--gold); outline-offset: 3px; }
.game-card-link { display: block; height: 100%; color: inherit; text-decoration: none; }
.game-card-link:hover { color: inherit; }
.game-card-link:focus-visible { outline: none; }
.game-art { background: #241b2c; }
.art-placeholder--demo,
.game-card:nth-child(3n + 2) .art-placeholder--demo,
.game-card:nth-child(3n) .art-placeholder--demo {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-end;
  padding: clamp(15px, 2.5vw, 26px);
  background: linear-gradient(145deg, #3b2049, #24192d 70%);
}
.game-card:nth-child(3n + 2) .art-placeholder--demo { background: linear-gradient(145deg, #3c2740, #24192d 70%); }
.game-card:nth-child(3n) .art-placeholder--demo { background: linear-gradient(145deg, #283349, #24192d 70%); }
.game-card[data-demo="1"] .game-art { aspect-ratio: auto; height: 160px; }
.art-placeholder--demo .demo-art-title { max-width: 100%; margin: 0; color: #f7edf8; font-size: clamp(1.25rem, 2vw, 2rem); font-weight: 800; line-height: 1.04; letter-spacing: -.04em; text-wrap: balance; overflow-wrap: anywhere; }
.art-placeholder--demo .demo-art-caption { position: static; margin-top: 10px; padding-top: 8px; border-top: 1px solid #f3c77970; color: #f3c779; font-size: .63rem; letter-spacing: .12em; }
.demo-art-symbol { display: none; }
.game-meta { padding: 18px; }
.game-meta h3 { margin-bottom: 12px; }
.empty-state { border: 1px solid var(--line); background: var(--panel); }
.provider-filters .filter { border-color: var(--line); background: var(--panel); }
.provider-filters .filter.active { background: #392342; }
.provider-filters .filter-monogram { border-radius: 8px; background: #36243e; }
.provider-filters .filter-logo--amatic { mix-blend-mode: screen; }
.provider-filters .filter-logo--pragmatic-play { height: 46px; max-width: 120px; margin-block: -5px; }

/* One quiet emblem, readable game names and a status line in normal flow. */
.random-section {
  gap: 36px;
  padding: clamp(25px, 4vw, 48px);
  border-color: #5b4265;
  border-radius: 20px;
  background: #211629;
}
.random-section h2 { max-width: 460px; font-size: clamp(2rem, 3.5vw, 3.1rem); }
.random-control { margin-top: 28px; }
.random-lion { width: 62px; height: 62px; filter: none; }
.random-stage {
  display: grid;
  grid-template-columns: 154px minmax(0, 1fr);
  align-items: center;
  gap: 14px 22px;
  min-width: 0;
  min-height: 0;
}
.random-wheel {
  width: 154px;
  height: 154px;
  border: 2px solid #cba365;
  background: conic-gradient(from -22.5deg, #513054 0 45deg, #322039 45deg 90deg, #513054 90deg 135deg, #322039 135deg 180deg, #513054 180deg 225deg, #322039 225deg 270deg, #513054 270deg 315deg, #322039 315deg 360deg);
  box-shadow: none;
  animation: none;
}
.random-wheel::before { content: ''; position: absolute; inset: 17px; border: 1px solid #a37f75; border-radius: 50%; background: #25182d; }
.random-wheel::after { content: ''; position: absolute; top: -9px; left: calc(50% - 8px); border-left: 8px solid transparent; border-right: 8px solid transparent; border-top: 15px solid var(--gold); }
.random-wheel-mark { position: relative; z-index: 1; color: #e1bb78; font-size: 4.2rem; text-shadow: none; }
.random-section.is-empty .random-result { grid-column: 2; padding: 0; align-self: center; max-width: 300px; }
.random-game-list {
  display: flex;
  gap: 8px;
  width: 100%;
  max-width: 100%;
  min-width: 0;
  margin: 0;
  padding: 2px 0 10px;
  list-style: none;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  justify-self: stretch;
}
.random-game-list li {
  flex: 0 0 116px;
  min-width: 0;
  min-height: 84px;
  padding: 12px;
  border: 1px solid #58425f;
  border-radius: 10px;
  background: #291d31;
  font-size: .84rem;
  line-height: 1.3;
  overflow-wrap: anywhere;
  scroll-snap-align: center;
}
.random-game-list li.is-selected { border-color: var(--gold); background: #493050; box-shadow: inset 0 0 0 1px var(--gold); }
.random-game-list { scrollbar-width: none; }
.random-game-list::-webkit-scrollbar { display: none; }
.random-game-list li span { display: block; }
.random-game-list small { display: block; margin-top: 2px; color: var(--gold); font-size: .65rem; }
.random-result {
  position: static;
  grid-column: 1 / -1;
  width: 100%;
  min-width: 0;
  max-width: none;
  min-height: 0;
  padding: 8px 0 0;
  border: 0;
  border-radius: 0;
  background: none;
  transform: none;
  text-align: left;
  align-items: flex-start;
}
.random-result:empty { display: none; }
.random-result.spinning { animation: none; }
.random-section.is-picking .random-wheel { animation: yv-choice 1.1s ease-out both; }
@keyframes yv-choice { to { transform: rotate(360deg); } }

/* Footer currencies are a compact supported-method list, not four panels. */
.site-footer { background: #120d19; border-color: var(--line); }
.footer-inner { align-items: start; }
.footer-inner nav, .footer-inner nav ul { margin-inline-end: 0; }
.footer-crypto {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px 24px;
  padding: 27px 0 34px;
  border-color: var(--line);
  padding-right: 62px;
}
.footer-crypto > p { font-size: .82rem; font-weight: 700; }
.footer-crypto ul {
  display: flex;
  justify-content: flex-end;
  flex-wrap: wrap;
  gap: 14px 24px;
  margin: 0;
}
.footer-crypto li {
  min-width: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: none;
  gap: 8px;
  font-size: .82rem;
  letter-spacing: .02em;
}
.footer-crypto img { width: 25px; height: 25px; }
.crypto-credit { grid-column: 1 / -1; flex-basis: auto; }

.login-stage, .game-stage--demo {
  background: var(--panel);
  border-color: var(--line);
  border-radius: 18px;
}
.game-stage--demo { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 18px; min-height: 300px; padding: 32px 20px; }
.game-stage--demo p { max-width: 450px; }
.platform-stage { overflow: hidden; border: 1px solid var(--line); border-radius: 16px; background: #fff; }
.platform-stage iframe { display: block; width: 100%; height: min(78vh, 900px); min-height: 620px; border: 0; }
.platform-fallback { display: flex; flex-wrap: wrap; gap: 3px 8px; margin: 0 0 16px; color: var(--muted); font-size: .86rem; }
.platform-fallback a { color: var(--gold); text-decoration: underline; text-underline-offset: 3px; }
.login-stage { display: block; min-height: 0; padding: clamp(25px, 4vw, 42px); background: var(--panel); border-color: var(--line); text-align: left; }
.login-stage p { margin: 0; color: var(--muted); font-weight: 600; }
.login-stage-symbol { color: #f3c77955; font-size: 5rem; }
.game-stage-art { display: flex; flex-direction: column; align-items: center; gap: 12px; width: auto; max-width: 80%; height: auto; min-height: 0; margin: 0 0 22px; aspect-ratio: auto; color: #f2e6f2; }
.game-stage-art span { color: var(--gold); font-size: .75rem; font-weight: 800; letter-spacing: .2em; }
.game-stage-art strong { font-size: clamp(1.7rem, 5vw, 3.5rem); line-height: 1.05; letter-spacing: -.045em; overflow-wrap: anywhere; }
.game-stage-orbit { opacity: .45; }

@media (max-width: 960px) {
  .hero-slider, .hero-slide { min-height: 340px; }
  .hero-slide-copy { width: min(640px, 92%); }
  .hero-slide-mark { width: 180px; font-size: 6rem; }
  .random-section { grid-template-columns: 1fr; }
  .random-stage { grid-template-columns: 154px minmax(0, 1fr); }
  .footer-crypto { grid-template-columns: 1fr; }
  .footer-crypto ul { justify-content: flex-start; }
}

@media (max-width: 680px) {
  .hero-slider, .hero-slide { min-height: 350px; }
  .hero-slider--fallback, .hero-slider--fallback .hero-slide { min-height: 310px; }
  .hero-slider--fallback .hero-slide { padding-block: 32px 72px; }
  .game-card[data-demo="1"] .game-art { height: 145px; }
  .mobile-nav { grid-template-columns: repeat(5, minmax(0, 1fr)); }
  .mobile-nav a { min-width: 0; font-size: .65rem; }
  .mobile-nav .mobile-telegram { color: #84d8f7; }
  .mobile-nav .mobile-telegram svg { display: block; flex: none; }
  .operator-chat { display: none; }
  .section-heading > a { margin-right: 0; }
  .section { padding-block: 40px 56px; }
  .hero-slide-copy { width: 100%; }
  .hero-brand-art { display: none; }
  .hero-slide-mark { display: none; }
  .random-section { gap: 22px; padding: 24px 20px; }
  .random-section h2 { font-size: clamp(1.9rem, 8vw, 2.45rem); }
  .random-stage { grid-template-columns: 1fr; justify-items: center; gap: 14px; }
  .random-wheel { width: 128px; height: 128px; }
  .random-wheel::before { inset: 15px; }
  .random-wheel-mark { font-size: 3.5rem; }
  .random-section.is-empty .random-result { grid-column: 1; text-align: center; max-width: 270px; }
  .random-game-list { width: 100%; }
  .random-result { justify-self: stretch; }
  .random-control { margin-top: 16px; }
  .random-lion { width: 54px; height: 54px; }
  .footer-inner { padding-block: 36px 25px; }
  .footer-crypto { padding: 24px 0 95px; }
  .footer-crypto ul {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    width: 100%;
    gap: 15px 10px;
  }
  .footer-crypto li { min-width: 0; }
  .crypto-credit { text-align: left; }
}

@media (max-width: 360px) {
  .section-heading { align-items: flex-start; flex-direction: column; gap: 10px; }
  .random-game-list li { flex-basis: 104px; }
  .mobile-nav a { font-size: .58rem; }
}

@media (prefers-reduced-motion: reduce) {
  .random-section.is-picking .random-wheel { animation: none; }
}