/* ========== Классический «однорукий бандит»: тёмный металл, золото, серебро, белые барабаны ========== */
:root {
  --bg: #0e0c10;
  --cabinet: #1a181c;
  --cabinet-metal: #252328;
  --gold: #c9a227;
  --gold-light: #e8c85a;
  --gold-bg: #3d3420;
  --silver: #8a8e94;
  --silver-light: #b0b4b8;
  --red-btn: #c82828;
  --red-btn-bright: #e04040;
  --reel-white: #fffef9;
  --reel-white-dim: #f5f3ec;
  --panel: #16141a;
  --bezel: #0c0a0e;
}

/* ========== Сброс и база ========== */
* {
  box-sizing: border-box;
}

html {
  overflow-x: hidden;
}

body {
  margin: 0;
  min-height: 100svh;
  overflow-x: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  background:
          linear-gradient(rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.1)),
          #0a080c url('bg.png') center / cover no-repeat;
  color: #fff;
  font: 16px / 1.4 system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
}

/* ========== Аппарат: картинка spin-machine.png + оверлеи ========== */
.slot {
  width: 360px;
  cursor: pointer;
  position: relative;
  overflow: visible;
  perspective: 900px;
}

.slot__machine {
  position: relative;
  display: block;
}

.slot__machine-img {
  display: block;
  width: 100%;
  height: auto;
}

/* Оверлей барабанов поверх окна в картинке */
.slot__reel-overlay {
  position: absolute;
  left: 19.5%;
  right: 20.5%;
  top: 20%;
  height: 36%;
  min-height: 118px;
  display: flex;
  align-items: stretch;
}

.slot__reel-overlay .reel-window {
  flex: 1;
  min-width: 0;
  position: relative;
  background: transparent;
  border: none;
  padding: 6px;
  border-radius: 6px;
  box-shadow: none;
}

/* ========== Барабаны ========== */
.reels {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 4px;
  position: relative;
  z-index: 1;
  padding-top: 0;
}

.slot__reel-overlay .reels {
  padding-top: 0;
}

.reel {
  height: 103px;
  overflow: hidden;
  background: var(--reel-white);
  position: relative;
  box-shadow:
          inset 0 1px 0 rgba(255, 255, 255, 0.9),
          inset 0 0 0 1px rgba(0, 0, 0, 0.08),
          0 1px 2px rgba(0, 0, 0, 0.3);
}

.reel::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  box-shadow: inset 0 0 0 1px rgba(180, 180, 180, 0.6);
  pointer-events: none;
}

/* Тень у краёв: сильнее у самого края, слабее к центру */
.reel::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(
          to bottom,
          rgba(0, 0, 0, 0.72) 0%,
          rgba(0, 0, 0, 0.5) 6%,
          rgba(0, 0, 0, 0.28) 14%,
          transparent 26%,
          transparent 74%,
          rgba(0, 0, 0, 0.28) 86%,
          rgba(0, 0, 0, 0.5) 94%,
          rgba(0, 0, 0, 0.72) 100%
  );
}

.lane {
  position: absolute;
  inset: 0 0 auto 0;
  will-change: transform;
}

.cell {
  height: 103px;
  display: grid;
  place-items: center;
  user-select: none;
  will-change: transform;
}

.cell img {
  max-height: 65px;
  width: auto;
  display: block;
  pointer-events: none;
  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.35));
  background: transparent;
}

/* Баланс, победа/не повезло — оверлей поверх полоски CREDIT в картинке */
.slot__base {
  position: absolute;
  left: 24%;
  right: 24%;
  bottom: 55.4%;
  text-align: center;
  font-size: 0.75rem;
  font-weight: 800;
  letter-spacing: 0.04em;
  color: var(--gold-light);
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.8);
  background: rgba(0, 0, 0, 1);
  border-radius: 4px;
  border: 1px solid rgba(201, 162, 39, 0.4);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1);
}

/* ========== Ручка сбоку аппарата: подшипник + рычаг ========== */
.lever {
  position: absolute;
  left: 91%;
  top: 30%;
  margin-left: 6px;
  margin-top: -24px;
  width: 190px;
  height: 48px;
  overflow: visible;
  z-index: 5;
}

/* Подшипник: ручка не в воздухе, а на втулке */
.lever__bushing {
  position: absolute;
  left: -4px;
  top: 50%;
  width: 16px;
  height: 43px;
  transform: translate(-50%, -50%);
  pointer-events: none;
  background: linear-gradient(145deg, #6a6e74 0%, #4a4e54 30%, #3a3e44 50%, #4a4e54 70%, #7a7e84 100%);
  box-shadow: 0 0 0 2px rgba(0, 0, 0, 0.5), inset 0 2px 0 rgba(255, 255, 255, 0.4), inset 0 -2px 0 #0000004d, 0 4px 8px rgba(0, 0, 0, 0.4);
}

/* Рычаг: область клика и визуал в ::before (полоска) и ::after (шар) */
.lever__arm {
  position: absolute;
  left: 14px;
  top: 50%;
  margin-top: -20px;
  width: 120px;
  height: 40px;
  padding: 0;
  border: none;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  cursor: pointer;
  overflow: visible;
  transform-origin: left center;
  transform: rotate(-90deg) scaleX(1);
  transition: transform 0.2s ease-out;
}

/* Визуальная полоска ручки */
.lever__arm::before {
  content: "";
  position: absolute;
  left: 0px;
  top: 12px;
  width: 121px;
  height: 8px;
  background: linear-gradient(180deg, #9a9ea4 0%, #6a6e74 25%, #5a5e64 50%, #6a6e74 75%, #8a8e94 100%);
  box-shadow:
          0 0 0 1px rgba(0, 0, 0, 0.4),
          inset 0 2px 0 rgba(255, 255, 255, 0.5),
          inset 0 -1px 0 rgba(0, 0, 0, 0.3);
}

.lever__arm:hover:not(:disabled) {
  filter: brightness(1.08);
}

.lever__arm:disabled {
  cursor: default;
}

.lever__arm:focus {
  outline: none;
}

/* Потянутая: scaleX(-1), шар компенсирует — не сжимается */
.lever__arm.lever--pulled {
  transform: rotate(-90deg) scaleX(-1);
  transition: transform .2s ease-in;
}

/* Красный набалдашник: компенсация scaleX родителя, чтобы оставался круглым */
.lever__arm::after {
  content: "";
  position: absolute;
  left: 113px;
  top: 40%;
  margin-top: -12px;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #e85858, #c82828 45%, #902020 100%);
  box-shadow:
          0 3px 8px rgba(0, 0, 0, 0.5),
          inset 0 2px 0 rgba(255, 255, 255, 0.35),
          inset 0 -2px 0 rgba(0, 0, 0, 0.2);
}

.lever__arm.lever--pulled::after {
  transform: scaleX(-1);
}

/* ========== FX ========== */
#fxCanvas {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  max-width: 100vw;
  max-height: 100vh;
  pointer-events: none;
  z-index: 9999;
}

@keyframes slot-shake {
  0%   { transform: translate3d(0, 0, 0); }
  20%  { transform: translate3d(-2px, 1px, 0) rotate(-0.4deg); }
  40%  { transform: translate3d(2px, -1px, 0) rotate(0.3deg); }
  60%  { transform: translate3d(-1px, 1px, 0) rotate(-0.2deg); }
  80%  { transform: translate3d(1px, 0, 0) rotate(0.2deg); }
  100% { transform: translate3d(0, 0, 0); }
}

.shake {
  animation: slot-shake 420ms ease-in-out;
}

/* ========== Оверлей «бобр» ========== */
body.slot__beaver-msg-open {
  overflow: hidden;
}

.slot__beaver-msg {
  position: fixed;
  inset: 0;
  z-index: 10000;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.75rem;
  padding: 1rem;
  background: rgba(0, 0, 0, 0.8);
  opacity: 0;
  transition: opacity 0.3s ease;
  pointer-events: none;
}

.slot__beaver-msg.is-visible {
  opacity: 1;
}

.slot__beaver-msg__video {
  max-width: min(90vw, 420px);
  max-height: 45vh;
  object-fit: contain;
  border-radius: 8px;
}

.slot__beaver-msg__text {
  font-size: clamp(1.1rem, 4.5vw, 1.5rem);
  font-weight: 700;
  text-align: center;
  color: #fff;
  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.8);
}
.ui-overlay {
  position: fixed;
  /* Учитываем "челку" iPhone */
  top: max(20px, env(safe-area-inset-top) + 10px);
  left: max(20px, env(safe-area-inset-left) + 10px);
  display: flex;
  gap: 15px;
  z-index: 1000;
}

.ui-btn {
  width: 48px;     /* Комфортный размер для пальца */
  height: 48px;
  background: rgba(0, 0, 0, 0.5); /* Полупрозрачный черный фон */
  border: 2px solid rgba(255, 255, 255, 0.3); /* Тонкая рамка */
  border-radius: 12px; /* Скругленные углы (modern style) */
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.2s ease;
  text-decoration: none; /* Убираем подчеркивание для ссылки */
  backdrop-filter: blur(4px); /* Эффект матового стекла */
  -webkit-tap-highlight-color: transparent;
}

.ui-btn svg {
  width: 28px;
  height: 28px;
  fill: currentColor;
}

/* Ховер эффект (только для ПК) */
@media (hover: hover) {
  .ui-btn:hover {
    background: rgba(255, 215, 0, 0.9); /* Золотой при наведении */
    border-color: #ffd700;
    color: #000;
    transform: translateY(-2px);
  }
}

/* Эффект нажатия */
.ui-btn:active {
  transform: scale(0.92);
  background: rgba(255, 255, 255, 0.2);
}

/* АДАПТИВНОСТЬ для мобилок */
@media (max-width: 480px) {
  .ui-overlay {
    top: 15px;
    left: 15px;
    gap: 10px;
  }
  .ui-btn {
    width: 42px;
    height: 42px;
  }
  .ui-btn svg {
    width: 24px;
    height: 24px;
  }
}