/* ============================================================
   YAMADA_AI — пасхалка «казино»
   Автомат — готовая картинка 1693×2400 (ap1–ap3, три положения рычага)
   с белым экраном. Барабаны лежат поверх экрана.
   ============================================================ */

:root {
  --ink: #f4ecff;
  --neon: #ff2d46;
  --lime: #9dff5c;
  --gold: #ffb52e;
  --night: #050406;
  --display: "M PLUS Rounded 1c", "Trebuchet MS", sans-serif;
  --mono: "JetBrains Mono", ui-monospace, monospace;
  --out: cubic-bezier(0.22, 1, 0.36, 1);
}

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

html, body { height: 100%; }
body {
  background: #050406;
  color: var(--ink);
  font-family: var(--display);
  overflow: hidden;
  -webkit-font-smoothing: antialiased;
}

.sr {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap;
}

/* ---------- Фон зала ----------
   Проявляется из черноты за 2.5 с и остаётся притемнённым (brightness),
   чтобы автомат читался */
.wall {
  position: fixed; inset: 0; width: 100%; height: 100%;
  object-fit: cover;
  filter: brightness(0.5);
  opacity: 0; transition: opacity 2.5s ease-in;
  pointer-events: none;
}
.wall.is-on { opacity: 1; }

/* ---------- Ролик ZZZ ---------- */
.bg {
  position: fixed; inset: 0; overflow: hidden;
  opacity: 0; transition: opacity 0.9s var(--out);
  pointer-events: none;
}
/* Плеер YouTube растянут «cover»: 16:9 шире или выше экрана, лишнее за краями */
.bg iframe {
  position: absolute; left: 50%; top: 50%;
  width: max(100vw, 177.78vh); height: max(100vh, 56.25vw);
  translate: -50% -50%; border: 0;
}
.bg.is-on { opacity: 1; }
/* Виньетка поверх ролика, чтобы автомат не терялся на ярком кадре */
body::after {
  content: ""; position: fixed; inset: 0; pointer-events: none;
  background: radial-gradient(60% 70% at 50% 50%, transparent 30%, rgba(0, 0, 0, 0.55) 100%);
}

/* ---------- Верхняя строка ---------- */
.bar {
  position: fixed; z-index: 5; top: 0; left: 0; right: 0;
  display: flex; align-items: center; gap: 1rem;
  padding: 1rem clamp(1rem, 3vw, 2rem);
}
.back, .wallet, .vol {
  display: inline-flex; align-items: center; gap: 0.55em;
  height: 2.6rem; padding: 0 1rem;
  border-radius: 99px;
  background: rgba(14, 12, 18, 0.72);
  backdrop-filter: blur(6px);
}
.back {
  color: var(--ink); text-decoration: none; font-weight: 700;
  transition: box-shadow 0.2s var(--out), transform 0.2s var(--out);
}
.back:hover, .back:focus-visible { background: rgba(40, 36, 48, 0.85); transform: translateY(-1px); }
.wallet { margin-left: auto; font-weight: 800; }
/* Монетка вырезана из кадра интерфейса главной — та же, что в счётчике там */
.wallet__coin { width: 1.9rem; height: 1.9rem; display: block; }
.wallet__n {
  display: inline-block;
  font-family: var(--mono); font-size: 1.15rem; font-variant-numeric: tabular-nums;
}
.wallet.is-pop .wallet__n { animation: pop 0.5s var(--out); }
@keyframes pop {
  0% { transform: scale(1); }
  35% { transform: scale(1.35); color: var(--lime); }
  100% { transform: scale(1); }
}

.vol { gap: 1.1em; }
.vol__one { display: inline-flex; align-items: center; gap: 0.5em; }
.vol__icon { color: var(--lime); font-size: 1.1rem; }
.vol__range { width: clamp(70px, 10vw, 130px); accent-color: var(--neon); }

/* ---------- Автомат ---------- */
.hall {
  position: relative; z-index: 2;
  height: 100%;
  /* Автомат стоит на нижнем краю экрана, как на полу зала */
  display: grid; place-items: end center;
  padding-top: 3.5rem;
}
.machine {
  position: relative;
  height: min(calc(100vh - 4.5rem), calc(94vw * 2400 / 1693));
  aspect-ratio: 1693 / 2400;
  /* Под лотком в картинке ~3% пустоты — опускаем, чтобы лоток лёг на край */
  translate: 0 3.2%;
}
.machine__art {
  position: absolute; inset: 0; width: 100%; height: 100%;
  z-index: 2; pointer-events: none; user-select: none;
  -webkit-user-drag: none;
}

/* Экран в новом автомате (ap1–ap3) непрозрачный белый: x 28.41–71.71%,
   y 42.13–66.29%. Барабаны лежат поверх него, чуть внутри, чтобы не закрыть
   подсветку рамки экрана */
.reels {
  position: absolute; z-index: 3;
  left: 28.7%; top: 42.4%; width: 42.7%; height: 23.6%;
  border-radius: 1.2% / 1.8%;
  display: grid; grid-template-columns: repeat(3, 1fr);
  background: #fbfafc;
  overflow: hidden;
}
.reel {
  position: relative; overflow: hidden;
  min-width: 0; min-height: 0;
}
/* Две толстые чёрные полосы — только между барабанами */
.reel + .reel { border-left: 4px solid #16121c; }
/* Лёгкая тень сверху и снизу: барабан читается как цилиндр, но бумага остаётся белой */
.reel::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(rgba(22, 18, 28, 0.35), transparent 28%, transparent 72%, rgba(22, 18, 28, 0.35));
}
/* Лента высотой в одну ячейку, ячейки свисают вниз. Так translateY в %
   считается в ячейках, и JS не нужно знать размеры в пикселях. */
.strip {
  position: absolute; left: 0; right: 0; top: 0; height: 50%;
  will-change: transform;
}
.strip.is-spin { filter: blur(2px) saturate(1.2); }
.cell { height: 100%; display: grid; place-items: center; }
/* Иконки вписаны целиком, с небольшим полем от краёв барабана */
.cell img {
  width: 100%; height: 100%; object-fit: contain;
  scale: 0.88;
  -webkit-user-drag: none; user-select: none;
}
.cell.is-win img { animation: win 0.7s var(--out) 3; }
@keyframes win {
  0%, 100% { transform: scale(1) rotate(0); }
  40% { transform: scale(1.22) rotate(-6deg); filter: drop-shadow(0 0 10px var(--gold)); }
  70% { transform: scale(1.1) rotate(4deg); }
}
.payline {
  position: absolute; left: 0; right: 0; top: 50%; height: 2px;
  background: linear-gradient(90deg, transparent, var(--neon), transparent);
  opacity: 0.7; pointer-events: none;
}

/* ---------- Рычаг ----------
   Зона покрывает оба положения лапки: вверху (slot1) и внизу (slot3). */
.lever {
  position: absolute; z-index: 4;
  left: 78%; top: 44%; width: 20%; height: 33%;
  border: 0; padding: 0; background: none;
  border-radius: 40%;
}
.lever:focus-visible { outline: 3px solid var(--lime); outline-offset: 2px; }

/* Подсказка: мигающая стрелка над лапкой рычага (лапка в ap1 около x 86.5%,
   верх y 47.5%). Пропадает после первого рывка */
.hint {
  position: absolute; z-index: 5;
  left: 86.5%; top: 36.5%;
  width: 10%; aspect-ratio: 1;
  translate: -50% 0;
  pointer-events: none;
  animation: hint 0.9s ease-in-out infinite;
  transition: opacity 0.3s;
}
.hint svg { width: 100%; height: 100%; display: block; filter: drop-shadow(0 0 6px rgba(255, 255, 255, 0.8)); }
.hint.is-gone { opacity: 0; animation: none; }
@keyframes hint {
  0%, 100% { opacity: 1; transform: translateY(0); }
  50% { opacity: 0.25; transform: translateY(25%); }
}
@media (prefers-reduced-motion: reduce) { .hint { animation: none; } }

/* ---------- Выигрыш ---------- */
/* Выигрыш выпадает из монетоприёмника: лоток внизу по центру, проём около
   y 88% картинки. Надпись стартует в нём и выстреливает вверх. */
.win {
  position: absolute; z-index: 5;
  left: 50%; top: 88.5%;
  translate: -50% -50%;
  transform-origin: 50% 100%;
  white-space: nowrap;
  font-weight: 800; font-size: clamp(1rem, 2.6vh, 1.6rem);
  color: #fff;
  -webkit-text-stroke: 0.18em #16121c;
  paint-order: stroke fill;
  opacity: 0; pointer-events: none;
}
.win { display: flex; align-items: center; gap: 0.25em; }
/* Обводка текста на картинку не действует — монетке своя тень */
.win img { width: 1.25em; height: 1.25em; filter: drop-shadow(0 0.06em 0.12em rgba(0, 0, 0, 0.6)); }
.win.is-on { animation: dispense 2.2s var(--out) forwards; }
.win.is-big { color: var(--gold); -webkit-text-stroke-color: #4a0610; font-size: clamp(1.4rem, 4vh, 2.4rem); }
@keyframes dispense {
  0%   { opacity: 0; transform: translateY(30%) scale(0.25, 0.1); }
  8%   { opacity: 1; transform: translateY(0) scale(0.6, 0.4); }
  24%  { transform: translateY(-260%) scale(1.15, 1.25); }
  36%  { transform: translateY(-200%) scale(1); }
  80%  { opacity: 1; transform: translateY(-230%) scale(1); }
  100% { opacity: 0; transform: translateY(-320%) scale(0.9); }
}

@media (prefers-reduced-motion: reduce) {
  .strip.is-spin { filter: none; }
  .cell.is-win img, .wallet.is-pop .wallet__n { animation: none; }
}

@media (max-width: 560px) {
  .bar { flex-wrap: wrap; gap: 0.5rem; padding: 0.6rem; }
  .vol { order: 3; width: 100%; justify-content: center; }
  .hall { padding-top: 7rem; }
  .machine { height: min(calc(100vh - 7.5rem), calc(94vw * 1024 / 722)); }
}