/* === стили для веб-постера (wishes) ===
   часть значений из макета, часть на глаз */

:root {
  --poster-max-w: 1512px;
  --poster-ratio-w: 1512;
  --poster-ratio-h: 982;
  --poster-chip-w: 88px;
  --poster-chip-h: 88px;
  --hero-bet-w: var(--poster-chip-w);
  --hero-bet-h: var(--poster-chip-h);
}

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

html {
  width: 100%;
  overflow-x: hidden;
}

body {
  margin: 0; /* reset */
  width: 100%;
  max-width: 100%;
  overflow-x: hidden;
  font-family: system-ui, -apple-system, sans-serif;
  line-height: 1.5;
  color: #fff;
  min-width: 320px;
}

body.has-custom-cursor,
body.has-custom-cursor * {
  cursor: none !important;
}

.custom-cursor {
  position: fixed;
  left: 0;
  top: 0;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: #ffffff;
  border: 1px solid rgba(0, 0, 0, 0.45);
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.15);
  pointer-events: none;
  z-index: 30000;
  opacity: 0;
  transform: translate(-50%, -50%);
  transition: opacity 140ms ease-out, transform 140ms ease-out;
}

.custom-cursor.is-visible {
  opacity: 1;
}

.custom-cursor.is-pressed {
  transform: translate(-50%, -50%) scale(0.82);
}

.screen {
  position: relative;
  width: min(100%, var(--poster-max-w));
  max-width: var(--poster-max-w);
  height: auto;
  aspect-ratio: var(--poster-ratio-w) / var(--poster-ratio-h);
  margin: 0 auto;
  background: #000; /* черный фон */
}

.hero .hero-title-wrap {
  position: absolute;
  width: calc(619 * 100% / 1512);
  height: calc(171.34 * 100% / 982);
  left: calc(50% - 308.98 * 100% / 1512);
  top: calc(67 * 100% / 982);
  pointer-events: none;
}

.hero-rotator,
.screen-spacer-rotator {
  position: relative;
  width: 100%;
  height: 100%;
}

.hero-rotator-inner,
.screen-spacer-rotator-inner {
  position: relative;
  width: 100%;
  height: 100%;
}

.hero .hero-title {
  position: absolute;
  width: calc(619 * 100% / 1512);
  height: calc(171.34 * 100% / 982);
  left: calc(50% - 308.98 * 100% / 1512);
  top: calc(67 * 100% / 982);
  display: block;
  object-fit: contain;
  object-position: center center;
  box-sizing: border-box;
  pointer-events: none;
}

.hero-snake {
  position: absolute;
  /* 248×390 px; left: 50% − 248/2 − 1; top: 50% − 390/2 + 59 → промежуточные через calc */
  width: calc(248 * 100% / 430);
  height: calc(390 * 100% / 932);
  left: calc(50% - 125 * 100% / 430);
  top: calc(50% - 136 * 100% / 932);
  overflow: visible;
  pointer-events: auto;
}

.hero-snake-model {
  position: absolute;
  inset: 0;
}

.hero-snake canvas {
  display: block;
  width: 100% !important;
  height: 100% !important;
  cursor: grab;
  touch-action: none;
}

.hero-snake canvas:active {
  cursor: grabbing;
}

@media (min-width: 1400px) {
  .screen.hero {
    overflow: visible;
  }

  .hero .hero-rotator,
  .hero .hero-rotator-inner {
    overflow: visible;
  }


  .hero-snake {
    width: calc(339 * 100% / 430);
    height: calc(515 * 100% / 932);
    left: calc(50% - 169.5 * 100% / 430);
    top: calc(50% - 136 * 100% / 932 + 50px - 23.5 * 100% / 932);
  }
}

.hero-bet,
.blackjack-chip {
  position: absolute;
  background: url(../img/1/bet.png) no-repeat center / contain;
  cursor: grab;
  touch-action: none;
  transition: transform 140ms ease-out;
}

.hero-bet:active,
.hero-bet.hero-bet-dragging,
.blackjack-chip:active,
.blackjack-chip.blackjack-chip-dragging {
  cursor: grabbing;
}

.hero .hero-bet-1,
.hero .hero-bet-2,
.hero .hero-bet-3,
.hero .hero-bet-4,
.hero .hero-bet-5 {
  width: var(--hero-bet-w);
  height: var(--hero-bet-h);
}

.hero-bet-1 {
  left: 9.1931%;
  top: 63.8493%;
  transform: rotate(63deg);
}

.hero-bet-1:active,
.hero-bet-1.hero-bet-dragging {
  transform: rotate(63deg) scale(1.22);
}

.hero-bet-2 {
  left: 11.7229%;
  top: 78.1314%;
  transform: rotate(-100deg);
}

.hero-bet-2:active,
.hero-bet-2.hero-bet-dragging {
  transform: rotate(-100deg) scale(1.22);
}

.hero-bet-3 {
  left: 17.3776%;
  top: 78.1314%;
  transform: rotate(-40deg);
}

.hero-bet-3:active,
.hero-bet-3.hero-bet-dragging {
  transform: rotate(-40deg) scale(1.22);
}

.hero-bet-4 {
  left: 78.8856%;
  top: 31.8737%;
  transform: rotate(12deg);
}

.hero-bet-4:active,
.hero-bet-4.hero-bet-dragging {
  transform: rotate(12deg) scale(1.22);
}

.hero-bet-5 {
  left: 82.7546%;
  top: 41.4206%;
  transform: rotate(-40deg);
}

.hero-bet-5:active,
.hero-bet-5.hero-bet-dragging {
  transform: rotate(-40deg) scale(1.22);
}

.marquee {
  position: relative;
  left: 0;
  right: 0;
  width: 100%;
  max-width: 100%;
  height: 120px;
  margin: 0;
  overflow: hidden;
  display: flex;
  align-items: center;
  white-space: nowrap;
  box-sizing: border-box;
}

.marquee-bordered {
  background: #000000;
  border-width: 2px 0;
  border-style: solid;
  border-color: #ffffff;
}

.marquee .marquee-track {
  position: absolute;
  left: calc(50% - 2307.5px / 2 + 522.75px);
  top: calc(50% - 32px / 2);
  display: flex;
  width: max-content;
  align-items: center;
  gap: 150px;
  animation: marquee-scroll 40s linear infinite;
  will-change: transform;
}

.marquee .marquee-track:hover {
  animation-play-state: paused;
}

.marquee .marquee-item {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
}

.marquee .marquee-arrow {
  width: 205.5px;
  height: 19.5px;
  transform: rotate(0deg);
}

.marquee .marquee-text {
  font-family: 'Cormorant Garamond', serif;
  font-style: normal;
  font-weight: 400;
  font-size: 32px;
  line-height: 100%;
  text-align: center;
  text-transform: uppercase;
  color: #fff;
  white-space: nowrap;
}

@keyframes marquee-scroll {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(-50%);
  }
}

.marquee-light {
  background: #ffffff;
  border: none;
}

.marquee-light .marquee-text {
  color: #000;
}

.marquee-line-2 {
  position: relative;
  top: auto;
  left: 50%;
  right: auto;
  width: min(100%, var(--poster-max-w));
  max-width: var(--poster-max-w);
  transform: translateX(-50%);
  z-index: 1;
  background: #ffffff;
}

.marquee-line-2 .marquee-track {
  width: max-content;
  height: 32px;
}

.marquee-line-2 .marquee-item-text-1,
.marquee-line-2 .marquee-item-text-1 .marquee-text {
  width: 756px;
  height: 32px;
}

.marquee-line-2 .marquee-item-text-2,
.marquee-line-2 .marquee-item-text-2 .marquee-text {
  width: 896px;
  height: 32px;
}

.section-suits {
  overflow: hidden;
}

.suits-rotator {
  position: relative;
  width: 100%;
  height: 100%;
}

.suits-rotator-inner {
  position: relative;
  width: 100%;
  height: 100%;
}

.suits-stopwatch {
  position: absolute;
  left: 50%;
  top: 34.62%;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: min(320px, 84vw);
}

.suits-caption {
  position: absolute;
  width: min(780px, 95%);
  left: 50%;
  top: 15.17%;
  margin: 0;
  transform: translateX(-50%);
  font-family: 'Cormorant Garamond', serif;
  font-style: normal;
  font-weight: 500;
  font-size: clamp(20px, 2.4vw, 36px);
  line-height: 1.22;
  text-align: center;
  text-transform: uppercase;
  color: #ffffff;
}


.suits-stopwatch-value {
  font-family: 'Cormorant Garamond', serif;
  font-weight: 600;
  font-size: clamp(46px, 8.2vw, 120px);
  line-height: 1;
  letter-spacing: 0.02em;
  color: #ffffff;
  text-shadow: 0 0 40px rgba(255, 255, 255, 0.3);
}

.suits {
  position: absolute;
  width: 148.016%;
  height: 25.255%;
  right: -10.516%;
  bottom: 0;
  overflow: visible;
}

.suits-particle {
  position: absolute;
  left: 0;
  top: 0;
  font-size: 18px;
  line-height: 1;
  color: #fff;
  pointer-events: none;
  will-change: transform;
  user-select: none;
}

.page-footer {
  display: flex;
  width: min(100%, var(--poster-max-w));
  max-width: var(--poster-max-w);
  height: 80px;
  margin: 0 auto;
  overflow: hidden;
  background: #000000;
}

.hse-logo {
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  padding: 15px 46px;
  gap: 10px;
  width: 212px;
  height: 80px;
  flex-shrink: 0;
  background: #FFFFFF;
}

.hse-logo img {
  display: block;
  height: auto;
  width: auto;
  max-height: 50px;
}

.author-line {
  flex: 1;
  position: relative;
  overflow: hidden;
  height: 80px;
  background: #000000;
}

.author-footer-text {
  position: absolute;
  left: 0;
  top: calc(50% - 15px / 2 + 0.5px);
  margin: 0;
  padding: 0;
  font-family: 'Montserrat', sans-serif;
  font-style: normal;
  font-weight: 400;
  font-size: 12px;
  line-height: 15px;
  text-transform: uppercase;
  color: #ffffff;
  white-space: nowrap;
  display: flex;
  flex-wrap: nowrap;
  width: max-content;
  animation: run-text 20s linear infinite;
}

.author-footer-text:hover {
  animation-play-state: paused;
}

.author-footer-text span {
  display: inline-block;
  flex-shrink: 0;
  margin-right: 10em;
}

@keyframes run-text {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(-50%);
  }
}

.screen.section-blackjack {
  position: relative;
  margin: 0 auto;
  background: #000000;
}

/* обёртка без поворота на широком экране; на телефоне — в @media */
.blackjack-board-wrap {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
}

.blackjack-rotator {
  position: relative;
  width: 100%;
  height: 100%;
}

.blackjack-rotator-inner {
  position: relative;
  width: 100%;
  height: 100%;
}

.blackjack-bg {
  position: absolute;
  visibility: hidden;
  width: 1906px;
  height: 1080px;
  left: calc(50% - 1906px / 2);
  top: calc(50% - 1080px / 2);
  background: url(../img/3/image.jpg) no-repeat center / cover;
}

.blackjack-card {
  position: absolute;
  width: 114px;
  height: 160px;
  left: calc(50% - 151px / 2 + 70px - 70px);
  top: 143px;
  object-fit: contain;
  display: block;
  transform: rotate(-8deg);
}

.blackjack-square-big {
  position: absolute;
  width: 289.94px;
  height: 289.94px;
  left: -17px;
  top: calc(50% - 289px / 2 - 9px);
  background: #000000;
  border: 0.333887px solid #000000;
  transform: rotate(-8deg);
}

.blackjack-chip-1 {
  position: absolute;
  width: 117px;
  height: 111px;
  left: 1085px;
  top: 932px;
  background: url(../img/1/В_1.png) no-repeat center / contain;
  transform: rotate(-142deg);
}

.blackjack-chip-2 {
  position: absolute;
  width: 118px;
  height: 117px;
  left: 350px;
  top: 868px;
  background: url(../img/1/В_1.png) no-repeat center / contain;
  transform: rotate(-142.66deg);
}

.blackjack-chip-a {
  position: absolute;
  width: 118.56px;
  height: 126.11px;
  left: calc(50% - 118.56px / 2 - 471.72px);
  top: calc(50% - 126.11px / 2 + 437.05px);
  background: url(../img/1/А_1.png) no-repeat center / contain;
  transform: rotate(157.34deg);
}

.blackjack-chip {
  width: var(--poster-chip-w);
  height: var(--poster-chip-h);
}

.blackjack-chip-3 {
  left: 558px;
  top: 778px;
  transform: rotate(-18deg);
}

.blackjack-chip-4 {
  left: 620px;
  top: 760px;
  transform: rotate(8deg);
}

.blackjack-chip-5 {
  left: 682px;
  top: 784px;
  transform: rotate(24deg);
}

.blackjack-chip-3:active,
.blackjack-chip-3.blackjack-chip-dragging {
  transform: rotate(-18deg) scale(1.22);
}

.blackjack-chip-4:active,
.blackjack-chip-4.blackjack-chip-dragging {
  transform: rotate(8deg) scale(1.22);
}

.blackjack-chip-5:active,
.blackjack-chip-5.blackjack-chip-dragging {
  transform: rotate(24deg) scale(1.22);
}

.blackjack-stripe {
  position: absolute;
  width: 180px;
  height: 285px;
  left: calc(50% - 180px / 2 - 185px);
  top: 0;
  object-fit: contain;
  display: block;
  z-index: 1;
}

.blackjack-stripe-right {
  left: calc(50% - 180px / 2 + 185px);
}

.blackjack-table-text {
  position: absolute;
  left: 50%;
  top: calc(50% - 132px / 2 - 60px);
  /* в той же системе что и эллипс ,но без min() — иначе на узких экранах текст сжимается сильнее эллипса */
  width: 557px;
  max-width: none;
  height: auto;
  aspect-ratio: 557 / 132;
  transform: translateX(-50%);
  object-fit: contain;
  display: block;
  pointer-events: none;
  z-index: 2;
}

.blackjack-card-slot {
  box-sizing: border-box;
  position: absolute;
  width: 114px;
  height: 160px;
  border: 0.75px solid #ffffff;
  border-radius: 7.5px;
  z-index: 3;
}

.blackjack-slot-card {
  box-sizing: border-box;
  position: relative;
  width: 100%;
  height: 100%;
  display: block;
  background: #ffffff;
  border-radius: 6px;
  overflow: hidden;
}

.blackjack-slot-card--flying {
  box-shadow: 0 6px 22px rgba(0, 0, 0, 0.38);
}

.blackjack-slot-card-glyph {
  position: absolute;
  width: 22.35px;
  height: 19px;
  object-fit: contain;
  pointer-events: none;
  display: block;
}

.blackjack-slot-card-glyph--tl {
  left: calc(50% - 22.35px / 2 - 34.43px);
  top: calc(50% - 19px / 2 - 59.1px);
}

.blackjack-slot-card-glyph--br {
  right: calc(50% - 22.35px / 2 - 34.43px);
  bottom: calc(50% - 19px / 2 - 59.1px);
  transform: rotate(180deg);
}

.blackjack-slot-card-label {
  position: absolute;
  left: calc(50% + 0.72px);
  top: 50%;
  transform: translate(-50%, -50%);
  width: max-content;
  max-width: calc(100% - 12px);
  font-family: 'Cormorant Garamond', serif;
  font-style: normal;
  font-weight: 500;
  font-size: 12.16px;
  line-height: 15px;
  text-align: center;
  color: #000000;
  pointer-events: none;
}

#screen-second {
  cursor: pointer;
  overflow: hidden;
}

#screen-second .wish-cloud {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 2;
}

#screen-second .wish-word {
  position: absolute;
  font-family: 'Cormorant Garamond', serif;
  font-style: normal;
  font-weight: 500;
  --wish-size: 10;
  font-size: calc(var(--wish-size) * 1px);
  line-height: 1;
  text-transform: uppercase;
  color: #ffffff;
  opacity: 0.88;
  user-select: none;
  transition: font-size 0.22s ease;
}

#screen-second .wish-word.w1 { left: 4%; top: 7%; }
#screen-second .wish-word.w2 { left: 19%; top: 14%; }
#screen-second .wish-word.w3 { left: 31%; top: 6%; }
#screen-second .wish-word.w4 { left: 43%; top: 18%; }
#screen-second .wish-word.w5 { left: 57%; top: 9%; }
#screen-second .wish-word.w6 { left: 69%; top: 17%; }
#screen-second .wish-word.w7 { left: 81%; top: 8%; }
#screen-second .wish-word.w8 { left: 91%; top: 15%; }
#screen-second .wish-word.w9 { left: 7%; top: 28%; }
#screen-second .wish-word.w10 { left: 24%; top: 35%; }
#screen-second .wish-word.w11 { left: 37%; top: 30%; }
#screen-second .wish-word.w12 { left: 50%; top: 40%; }
#screen-second .wish-word.w13 { left: 63%; top: 27%; }
#screen-second .wish-word.w14 { left: 75%; top: 36%; }
#screen-second .wish-word.w15 { left: 88%; top: 31%; }
#screen-second .wish-word.w16 { left: 5%; top: 55%; }
#screen-second .wish-word.w17 { left: 17%; top: 64%; }
#screen-second .wish-word.w18 { left: 29%; top: 58%; }
#screen-second .wish-word.w19 { left: 46%; top: 69%; }
#screen-second .wish-word.w20 { left: 60%; top: 57%; }
#screen-second .wish-word.w21 { left: 72%; top: 67%; }
#screen-second .wish-word.w22 { left: 84%; top: 60%; }
#screen-second .wish-word.w23 { left: 10%; top: 81%; }
#screen-second .wish-word.w24 { left: 27%; top: 89%; }
#screen-second .wish-word.w25 { left: 54%; top: 83%; }
#screen-second .wish-word.w26 { left: 78%; top: 90%; }

@keyframes wish-word-shake-y {
  0%, 100% { transform: translateY(0); }
  25% { transform: translateY(-2.5px); }
  50% { transform: translateY(2.5px); }
  75% { transform: translateY(-2.5px); }
}

@keyframes wish-word-shake-y-alt {
  0%, 100% { transform: translateY(0); }
  25% { transform: translateY(2.5px); }
  50% { transform: translateY(-2.5px); }
  75% { transform: translateY(2.5px); }
}

#screen-second:not(.screen-spacer--finale) .wish-word:nth-child(3n + 1) {
  animation: wish-word-shake-y 0.52s steps(4, end) infinite;
}

#screen-second:not(.screen-spacer--finale) .wish-word:nth-child(3n + 2) {
  animation: wish-word-shake-y-alt 0.56s steps(4, end) infinite;
}

#screen-second:not(.screen-spacer--finale) .wish-word:nth-child(3n) {
  animation: wish-word-shake-y 0.48s steps(4, end) infinite;
}

#screen-second:not(.screen-spacer--finale) .wish-word:nth-child(6n + 1) { animation-delay: 0s; }
#screen-second:not(.screen-spacer--finale) .wish-word:nth-child(6n + 2) { animation-delay: -0.09s; }
#screen-second:not(.screen-spacer--finale) .wish-word:nth-child(6n + 3) { animation-delay: -0.18s; }
#screen-second:not(.screen-spacer--finale) .wish-word:nth-child(6n + 4) { animation-delay: -0.27s; }
#screen-second:not(.screen-spacer--finale) .wish-word:nth-child(6n + 5) { animation-delay: -0.36s; }
#screen-second:not(.screen-spacer--finale) .wish-word:nth-child(6n) { animation-delay: -0.45s; }

@media (prefers-reduced-motion: reduce) {
  #screen-second:not(.screen-spacer--finale) .wish-word {
    animation: none;
  }
}

#screen-second .screen-spacer-img {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 1;
  pointer-events: none;
}

#screen-second .screen-spacer-hint {
  position: absolute;
  left: 0;
  right: 0;
  top: 50%;
  width: fit-content;
  max-width: min(1120px, 92%);
  margin: 0 auto;
  transform: translateY(-50%);
  padding-inline: clamp(10px, 2.5vw, 28px);
  box-sizing: border-box;
  font-family: 'Cormorant Garamond', serif;
  font-weight: 600;
  font-size: clamp(17px, 2vw, 28px);
  line-height: 1.08;
  text-align: center;
  text-transform: uppercase;
  color: #ffffff;
  text-shadow: 0 0 30px rgba(0, 0, 0, 0.45);
  z-index: 2;
  pointer-events: none;
  opacity: 1;
  visibility: visible;
  transition: opacity 0.25s ease, visibility 0.25s ease;
  white-space: nowrap;
}

#screen-second .screen-spacer-hint__break {
  display: none;
}

#screen-second.screen-spacer--hint-hidden .screen-spacer-hint {
  opacity: 0;
  visibility: hidden;
}

#screen-second .screen-spacer-final-text {
  position: absolute;
  left: 50%;
  top: 50%;
  width: min(900px, 90%);
  margin: 0;
  transform: translate(-50%, -50%);
  font-family: 'Cormorant Garamond', serif;
  font-weight: 600;
  font-size: clamp(20px, 2.25vw, 32px);
  line-height: 1.25;
  text-align: center;
  color: #000000;
  z-index: 2;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

#screen-second.screen-spacer--finale {
  background: #ffffff;
}

#screen-second.screen-spacer--finale .wish-cloud,
#screen-second.screen-spacer--finale .screen-spacer-hint {
  opacity: 0;
  visibility: hidden;
}

#screen-second.screen-spacer--finale.screen-spacer--finale-text-visible .screen-spacer-final-text {
  opacity: 1;
  visibility: visible;
}

#screen-second.screen-spacer--inverted-thorns .screen-spacer-img {
  filter: invert(1);
}

.blackjack-card-slot-1 {
  left: calc(50% - 114px / 2 - 528.92px);
  top: calc(50% - 160px / 2 - 123px);
  transform: rotate(50deg);
}

.blackjack-card-slot-2 {
  left: calc(50% - 114px / 2 - 337.01px);
  top: calc(50% - 160px / 2 + 31.5px);
  transform: rotate(30deg);
}

.blackjack-card-slot-3 {
  left: calc(50% - 114px / 2 - 92.44px);
  top: calc(50% - 160px / 2 + 122.25px);
  transform: rotate(10deg);
}

.blackjack-card-slot-4 {
  left: calc(50% - 114px / 2 + 150.43px);
  top: calc(50% - 160px / 2 + 122.25px);
  transform: rotate(-10deg);
}

.blackjack-card-slot-5 {
  left: calc(50% - 114px / 2 + 356.71px);
  top: calc(50% - 160px / 2 + 31.5px);
  transform: rotate(-30deg);
}

.blackjack-card-slot-6 {
  left: calc(50% - 114px / 2 + 531.51px);
  top: calc(50% - 160px / 2 - 123px);
  transform: rotate(-50deg);
}

.blackjack-title-group {
  position: absolute;
  width: 445.27px;
  height: 94.31px;
  left: 508.75px;
  top: calc(50% - 94.31px / 2 - 46.34px);
}

.blackjack-letter {
  position: absolute;
  font-family: 'Cormorant Infant', serif;
  font-style: normal;
  font-weight: 600;
  font-size: 33.05px;
  line-height: 40px;
  color: #ffffff;
}

.blackjack-table-ellipse {
  position: absolute;
  width: 960px;
  height: 316px;
  left: calc(50% - 960px / 2);
  top: calc(50% - 316px / 2 - 146px);
  object-fit: contain;
  display: block;
}

.blackjack-table-marker {
  position: absolute;
  width: 36.82px;
  height: 36.94px;
  background: #ffffff;
  transform: matrix(0, 1, 1, 0, 0, 0);
}

.blackjack-table-marker-left {
  left: calc(50% - 36.82px / 2 - 286.55px);
  top: calc(50% - 36.94px / 2 - 104.38px);
}

.blackjack-table-marker-right {
  left: calc(50% - 36.82px / 2 + 232.86px);
  top: calc(50% - 36.94px / 2 - 85.97px);
}

.blackjack-dot-1 {
  position: absolute;
  width: 44px;
  height: 40px;
  left: calc(50% - 44px / 2 + 176.9px);
  top: calc(50% - 40px / 2 + 196.12px);
  background: url(../img/table/whish-dollar.svg) no-repeat center / contain;
  transform: rotate(-8deg);
}

.blackjack-dot-2 {
  position: absolute;
  width: 40px;
  height: 40px;
  left: calc(50% - 40px / 2 - 160.08px);
  top: calc(50% - 40px / 2 + 196.12px);
  background: url(../img/table/whish-heart.svg) no-repeat center / contain;
  transform: rotate(12deg);
}

.screen.section-prediction {
  position: relative;
  margin: 0 auto;
  background: #000000;
  overflow: visible;
}

.prediction-board-wrap {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
}

.prediction-rotator {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: visible;
}

.prediction-rotator-inner {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: visible;
}

.prediction-dice-layer {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
  pointer-events: none;
  z-index: 0;
}

.prediction-bg {
  position: absolute;
  visibility: hidden;
  width: 1908px;
  height: 1080px;
  left: 6px;
  top: 0;
  background: url(../img/whishes-logo.svg) no-repeat center / cover;
}

.prediction-scratch-wrap {
  box-sizing: border-box;
  position: absolute;
  width: 618px;
  height: 322.5px;
  left: 50%;
  top: 50%;
  background: linear-gradient(0deg, #ffffff, #ffffff), rgba(255, 255, 255, 0.4);
  border: 0.75px solid #ffffff;
  border-radius: 11.25px;
  overflow: hidden;
  transform: translate(-50%, -50%) rotate(0deg);
  transform-origin: center;
}

.prediction-card {
  box-sizing: border-box;
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(0deg, #ffffff, #ffffff), rgba(255, 255, 255, 0.4);
  border: none;
  border-radius: 15px;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
  padding-top: 20px;
}

.prediction-scratch-canvas {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  border-radius: 15px;
  cursor: crosshair;
  pointer-events: auto;
  touch-action: none;
}

.prediction-quote {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  margin: 0;
  box-sizing: border-box;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 720px;
  max-width: 90%;
  font-family: 'Cormorant Garamond';
  font-style: normal;
  font-weight: 600;
  font-size: 32px;
  line-height: 1.25;
  text-align: center;
  text-transform: uppercase;
  color: #000000;
}

.prediction-caption {
  position: absolute;
  width: 131px;
  height: 29px;
  left: 50%;
  bottom: 4px;
  transform: translate(-50%, 0.6em);
  font-family: 'Cormorant Garamond';
  font-style: normal;
  font-weight: 500;
  font-size: 16px;
  line-height: 1.3;
  text-align: center;
  text-transform: lowercase;
  color: #000000;
}

.prediction-logo {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 80px;
  height: 80px;
  background: url(../img/whishes-logo.svg) no-repeat center / contain;
  border: 1px solid #ffffff;
  border-radius: 50%;
}

.prediction-dice {
  --prediction-dice-size: clamp(
    75px,
    calc(75px + (100vmin - 430px) * 30 / 400),
    105px
  );
  position: absolute;
  width: var(--prediction-dice-size);
  border: 0.728337px solid #000000;
  box-sizing: border-box;
  overflow: visible;
  transform-origin: center center;
  cursor: pointer;
  z-index: 12;
}

.prediction-dice img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  transform: scale(1);
  transform-origin: center center;
}

.prediction-dice.prediction-dice--rolling img {
  transform: scale(1.9);
}

.prediction-dice-tl img {
  transform: rotate(180deg) scale(1);
}

.prediction-dice.prediction-dice--rolling.prediction-dice-tl img {
  transform: rotate(180deg) scale(1.9);
}

.prediction-dice-left img,
.prediction-dice-right img {
  transform: matrix(-1, 0, 0, 1, 0, 0) scale(1);
}

.prediction-dice.prediction-dice--rolling.prediction-dice-left img,
.prediction-dice.prediction-dice--rolling.prediction-dice-right img {
  transform: matrix(-1, 0, 0, 1, 0, 0) scale(1.9);
}

.prediction-dice-bl img {
  transform: matrix(1, 0, 0, -1, 0, 0) scale(1);
}

.prediction-dice.prediction-dice--rolling.prediction-dice-bl img {
  transform: matrix(1, 0, 0, -1, 0, 0) scale(1.9);
}

.prediction-dice-tl {
  left: 15%;
  right: 76%;
  top: auto;
  bottom: 70%;
  width: var(--prediction-dice-size);
  height: auto;
  transform: rotate(180deg) scale(0.66);
}

.prediction-dice-br {
  left: 76%;
  right: 15%;
  top: 70%;
  bottom: 18%;
  width: var(--prediction-dice-size);
  height: auto;
  transform: scale(0.66);
}

.prediction-dice-left {
  width: var(--prediction-dice-size);
  left: calc(50% - var(--prediction-dice-size) / 2 - 570px);
  top: 42%;
  bottom: 44%;
  height: auto;
  transform: matrix(-1, 0, 0, 1, 0, 0) scale(0.66);
}

.prediction-dice-tr {
  width: var(--prediction-dice-size);
  left: calc(50% - var(--prediction-dice-size) / 2 + 467px);
  bottom: 70%;
  height: auto;
  transform: scale(0.66);
}

.prediction-dice-bl {
  left: 18%;
  right: 73%;
  top: 70%;
  bottom: 18%;
  width: var(--prediction-dice-size);
  height: auto;
  transform: matrix(1, 0, 0, -1, 0, 0) scale(0.66);
}

.prediction-dice-right {
  left: 83.47%;
  right: 8.49%;
  top: 43.43%;
  bottom: 45.04%;
  width: var(--prediction-dice-size);
  height: auto;
  transform: matrix(-1, 0, 0, 1, 0, 0) scale(0.66);
}

.prediction-chip {
  position: absolute;
  width: var(--poster-chip-w);
  height: var(--poster-chip-h);
  left: calc(50% - var(--poster-chip-w) / 2);
  top: calc(50% + 322.5px / 2 + 24px);
  background: url(../img/1/bet.png) no-repeat center / contain;
  transform: rotate(-25deg);
  cursor: grab;
  touch-action: none;
  z-index: 10;
}

.prediction-chip:active,
.prediction-chip.prediction-chip-dragging {
  cursor: grabbing;
}

.prediction-scratch-hint {
  position: absolute;
  left: calc(50% - 140px / 2);
  top: calc(50% + 322.5px / 2 + 122px);
  margin: 0;
  width: 140px;
  font-family: 'Cormorant Garamond', serif;
  font-style: normal;
  font-weight: 500;
  font-size: 18px;
  line-height: 1.3;
  text-align: center;
  color: rgba(255, 255, 255, 0.9);
  text-transform: lowercase;
  pointer-events: none;
  opacity: 1;
  visibility: visible;
  transition: opacity 0.25s ease, visibility 0.25s ease;
}

.section-prediction:has(.prediction-chip.prediction-chip-dragging) .prediction-scratch-hint,
.section-prediction.section-prediction--hint-hidden .prediction-scratch-hint {
  opacity: 0;
  visibility: hidden;
}

/* телефоны — тут куча всего перепробовала */
@media (max-width: 780px) {
  :root {
    --poster-max-w: 100%;
    --poster-ratio-w: 430;
    --poster-ratio-h: 932;
    --mobile-design-w: 430px;
    --mobile-design-h: 932px;
  }

  body {
    overflow-x: hidden;
  }

  .screen,
  .marquee-line-2,
  .page-footer {
    width: var(--mobile-design-w);
    max-width: none;
    margin-left: 0;
    margin-right: 0;
    transform-origin: top left;
    transform: scale(calc(100vw / var(--mobile-design-w)));
  }

  .screen {
    height: var(--mobile-design-h);
    min-height: var(--mobile-design-h);
  }

  .screen.hero,
  #screen-second {
    width: 100%;
    max-width: 100%;
    height: auto;
    min-height: 0;
    margin-left: auto;
    margin-right: auto;
    transform: none;
    aspect-ratio: var(--poster-ratio-w) / var(--poster-ratio-h);
  }

  .hero,
  #screen-second {
    overflow: hidden;
  }

  #screen-second .screen-spacer-hint {
    white-space: normal;
  }

  #screen-second .screen-spacer-hint__break {
    display: block;
  }

  .hero-rotator,
  .screen-spacer-rotator {
    width: var(--mobile-design-h);
    height: var(--mobile-design-w);
    left: 0;
    top: 0;
    position: absolute;
    transform-origin: top left;
    transform: scale(calc(var(--mobile-design-h) / var(--mobile-design-w)));
  }

  .hero-rotator-inner,
  .screen-spacer-rotator-inner {
    width: var(--mobile-design-w);
    height: var(--mobile-design-h);
    transform-origin: top left;
    transform: translateY(var(--mobile-design-w)) rotate(-90deg);
  }

  .hero .hero-title-wrap,
  .hero .hero-title {
    width: 308px;
    height: 94.84px;
    left: calc(50% - 308px / 2);
    top: 67px;
  }

  .hero-snake {
    width: 248.63px;
    height: 378px;
    left: calc(50% - 248.63px / 2 - 0.69px);
    top: 336px;
  }

  .marquee-line-2 {
    height: 120px;
  }

  .page-footer {
    height: 80px;
  }

  .hse-logo {
    width: min(212px, 30vw);
    max-width: 30vw;
    padding: 12px clamp(8px, 3vw, 24px);
    box-sizing: border-box;
  }

  .hse-logo img {
    max-width: 100%;
    max-height: min(50px, 15vw);
    height: auto;
  }

  .section-blackjack {
    overflow: hidden;
  }

  .blackjack-rotator {
    width: var(--mobile-design-h);
    height: var(--mobile-design-w);
    left: 0;
    top: 0;
    position: absolute;
    transform-origin: top left;
    transform: scale(calc(var(--mobile-design-h) / var(--mobile-design-w)));
  }

  .blackjack-rotator-inner {
    width: var(--mobile-design-w);
    height: var(--mobile-design-h);
    transform-origin: top left;
    transform: translateY(var(--mobile-design-w)) rotate(-90deg);
  }

  .section-prediction {
    overflow: hidden;
  }

  .prediction-rotator {
    width: var(--mobile-design-h);
    height: var(--mobile-design-w);
    left: 0;
    top: 0;
    position: absolute;
    transform-origin: top left;
    transform: scale(calc(var(--mobile-design-h) / var(--mobile-design-w)));
  }

  .prediction-rotator-inner {
    width: var(--mobile-design-w);
    height: var(--mobile-design-h);
    transform-origin: top left;
    transform: translateY(var(--mobile-design-w)) rotate(-90deg);
  }

  .prediction-scratch-wrap {
    transform: translate(-50%, -50%) rotate(90deg);
  }

  .screen.section-suits {
    width: 100%;
    max-width: 100%;
    height: auto;
    min-height: 0;
    transform: none;
    aspect-ratio: var(--poster-ratio-w) / var(--poster-ratio-h);
  }

  .suits-caption {
    width: min(720px, 96%);
    top: 13%;
    font-size: clamp(18px, 4.4vw, 30px);
  }

  .suits-stopwatch {
    top: 33%;
    min-width: min(320px, 90vw);
  }

  .suits-stopwatch-value {
    font-size: clamp(38px, 11vw, 92px);
    letter-spacing: 0.015em;
  }

  .suits {
    width: 160%;
    right: -18%;
    height: 28%;
  }

  .section-suits {
    width: 100%;
    max-width: 100%;
    height: auto;
    min-height: 0;
    transform: none;
    aspect-ratio: var(--poster-ratio-w) / var(--poster-ratio-h);
    overflow: hidden;
  }

  .suits-rotator {
    position: relative;
    width: 100%;
    height: 100%;
    left: auto;
    top: auto;
    transform-origin: center;
    transform: none;
  }

  .suits-rotator-inner {
    width: 100%;
    height: 100%;
    transform-origin: center;
    transform: none;
  }

  .suits-stopwatch {
    top: 35%;
    left: 50%;
    min-width: 0;
    width: 92%;
  }

  .suits-stopwatch-value {
    width: 100%;
    text-align: center;
    font-size: clamp(34px, 10vw, 84px);
  }

  .suits-caption {
    width: min(720px, 96%);
    left: 50%;
    top: 15%;
    transform: translateX(-50%);
    font-size: clamp(18px, 4.6vw, 28px);
  }

  .suits {
    width: 128%;
    height: 24%;
    right: -14%;
  }

  .screen,
  .marquee-line-2,
  .page-footer {
    width: 100%;
    max-width: 100%;
    margin-left: auto;
    margin-right: auto;
    transform: none;
    left: auto;
    right: auto;
  }

  .screen {
    height: auto;
    min-height: 0;
    aspect-ratio: var(--poster-ratio-w) / var(--poster-ratio-h);
  }

  .screen.hero,
  #screen-second,
  .screen.section-blackjack,
  .screen.section-prediction,
  .screen.section-suits {
    width: 100%;
    max-width: 100%;
    height: auto;
    min-height: 0;
    transform: none;
    aspect-ratio: var(--poster-ratio-w) / var(--poster-ratio-h);
  }

  .hero-rotator,
  .screen-spacer-rotator,
  .blackjack-rotator,
  .prediction-rotator,
  .suits-rotator {
    position: relative;
    width: 100%;
    height: 100%;
    left: auto;
    top: auto;
    transform-origin: center;
    transform: none;
  }

  .hero-rotator-inner,
  .screen-spacer-rotator-inner,
  .blackjack-rotator-inner,
  .prediction-rotator-inner,
  .suits-rotator-inner {
    width: 100%;
    height: 100%;
    transform-origin: center;
    transform: none;
  }

  .prediction-scratch-wrap {
    transform: translate(-50%, -50%) rotate(90deg);
  }

 


  .prediction-chip {
    left: calc(50% - var(--poster-chip-w) / 2 - (618px / 2 + 24px));
    top: calc(50% - var(--poster-chip-h) / 2);
  }

  .prediction-scratch-hint {
    left: calc(50% - (618px / 2 + 72px));
    top: 50%;
    transform: translate(-50%, -50%) rotate(90deg);
    transform-origin: center center;
  }

.screen.hero {
    --hero-bet-w: calc(var(--poster-chip-w) * 982 / 1512 * 0.92);
    --hero-bet-h: calc(var(--poster-chip-h) * 982 / 1512 * 0.92);
  }

  .blackjack-board-wrap {
    transform: rotate(-90deg) scale(calc(982 / 1512 * 0.92));
    transform-origin: center center;
  }

  .section-blackjack .blackjack-chip-3 {
    left: 252.47px;
    top: 689.87px;
  }

  .section-blackjack .blackjack-chip-4 {
    left: 314.47px;
    top: 671.87px;
  }

  .section-blackjack .blackjack-chip-5 {
    left: 376.47px;
    top: 695.87px;
  }

  .prediction-board-wrap {
    transform: rotate(-90deg) scale(calc((982 / 1512) * 0.68));
    transform-origin: center center;
  }

  .prediction-dice-layer {
    transform: rotate(-90deg) scale(calc((982 / 1512) * 0.68));
    transform-origin: center center;
  }

  .screen.section-prediction {
    overflow: visible;
    --prediction-dice-mobile-scale: 0.627;
  }

  .prediction-dice {
    width: var(--prediction-dice-size);
    height: var(--prediction-dice-size);
    box-sizing: border-box;
  }

  .prediction-dice-tl {
    position: absolute;
    left: 4.03%;
    right: auto;
    top: auto;
    bottom: 76.67%;

    transform: scale(var(--prediction-dice-mobile-scale));
  }

  .prediction-dice-left {
    position: absolute;
    left: calc(50% - var(--prediction-dice-size) / 2 - 7.08px);
    right: auto;
    top: 8.49%;
    bottom: auto;

    transform: scale(var(--prediction-dice-mobile-scale));
  }

  .prediction-dice-tr {
    position: absolute;
    left: 78.2%;
    right: auto;
    bottom: 76.67%;
    transform: scale(var(--prediction-dice-mobile-scale));
  }

  .prediction-dice-bl {
    position: absolute;
    left: 4.03%;
    right: auto;
    top: 76.32%;
    bottom: auto;

    transform: scale(var(--prediction-dice-mobile-scale));
  }

  .prediction-dice-right {
    position: absolute;
    left: calc(50% - var(--prediction-dice-size) / 2 - 7.08px);
    top: 83.68%;
    bottom: auto;

    transform: scale(var(--prediction-dice-mobile-scale));
  }

  .prediction-dice-br {
    position: absolute;
    left: 78.2%;
    right: auto;
    top: 76.32%;
    bottom: auto;

    transform: scale(var(--prediction-dice-mobile-scale));
  }

  .section-prediction .prediction-dice img {
    transform: scale(1);
  }

  .section-prediction .prediction-dice.prediction-dice--rolling img {
    transform: scale(1.9);
  }

  .section-blackjack {
    overflow: hidden;
  }

  .blackjack-rotator {
    width: var(--mobile-design-h);
    height: var(--mobile-design-w);
    left: 0;
    top: 0;
    position: absolute;
    transform-origin: top left;
    transform: scale(calc(var(--mobile-design-h) / var(--mobile-design-w)));
  }

  .blackjack-rotator-inner {
    width: var(--mobile-design-w);
    height: var(--mobile-design-h);
    transform-origin: top left;
    transform: translateY(var(--mobile-design-w)) rotate(-90deg);
  }
}