/* ── Fluid scale: 1em = 4.5px–10px across 375–1920px ── */
html {
  font-size: var(--fluid-base);
  background: var(--gradient-page-bg);
  overflow-x: hidden;
}

body {
  font-family: var(--font-body);
  font-size: 80%;
  background: var(--color-black);
  color: var(--color-white);
  user-select: none;
  -webkit-user-select: none;
  touch-action: manipulation;
  overflow: hidden;
}

@media (max-width: 1440px) { body { font-size: 65%; } }
@media (max-width: 1023px) { body { font-size: 95%; } }
@media (max-width:  420px) { body { font-size: 105%; } }

/* ═══════════════════════════════════════════
   KEYFRAME ANIMATIONS
════════════════════════════════════════════ */

@keyframes rotation-loader {
  to { transform: rotate(360deg); }
}

@keyframes pulse-button {
  0%, 100% { transform: scale(.92); }
  50%       { transform: scale(1); }
}

@keyframes effect1 {
  0%   { transform: translate(-50%, -50%) scale(1); }
  100% { transform: translate(-50%, -50%) scale(1.1); }
}

@keyframes decor-float {
  0%, 100% { transform: scale(0); }
  30%  { transform: scale(1.18); }
  40%  { transform: scale(.92); }
  48%  { transform: scale(1.06); }
  54%  { transform: scale(.97); }
  60%, 80% { transform: scale(1); }
}

@keyframes logo-sway {
  0%   { transform: rotate(-5deg); }
  100% { transform: translateY(5deg); }
}

@keyframes logo-deco-pulse {
  0%   { transform: translate(-50%, 0) scale(1); }
  100% { transform: translate(-50%, 0) scale(1.1); }
}

@keyframes modal-win-pulse {
  0%   { transform: scale(1); }
  100% { transform: scale(1.1); }
}

@keyframes flipSymbol {
  0%  { transform: perspective(800px) scale3d(.85,.85,.85) translate3d(0,0,0)     rotate3d(0,1,0,360deg); animation-timing-function: ease-out; }
  40% { transform: perspective(800px) scale3d(.85,.85,.85) translate3d(0,0,150px) rotate3d(0,1,0,190deg); animation-timing-function: ease-out; }
  50% { transform: perspective(800px) scale3d(.85,.85,.85) translate3d(0,0,150px) rotate3d(0,1,0,170deg); animation-timing-function: ease-in; }
  80% { transform: perspective(800px) scale3d(.8, .8, .8)  translate3d(0,0,0)     rotate3d(0,1,0,0deg);   animation-timing-function: ease-in; }
  100%{ transform: perspective(800px) scale3d(.85,.85,.85) translate3d(0,0,0)     rotate3d(0,1,0,0deg);   animation-timing-function: ease-in; }
}

@keyframes scaleSymbolGif {
  0%, 25%, 50%, 100% { opacity: 1; transform: scale(1); }
  70%, 85%           { opacity: 0; transform: scale(.7); }
}

@keyframes scaleSymbol {
  0%, 100%  { opacity: 1; transform: scale(1); }
  20%, 45%  { opacity: 1; transform: scale(1.1); }
  65%, 80%  { opacity: 0; transform: scale(.6); }
}

@keyframes x2Anim   { from { opacity: 0; } to { opacity: 1; } }
@keyframes showBorder{ from { opacity: 0; } to { opacity: 1; } }
@keyframes blinkSymbol {
  from { transform: scale(.8); }
  to   { transform: scale(.9); }
}

@keyframes bonusCardIn {
  from { opacity: 0; transform: scale(0.78) translateY(24px); }
  to   { opacity: 1; transform: scale(1)    translateY(0); }
}

@keyframes winPulse {
  from { filter: drop-shadow(0 0 6px  rgba(252, 98, 0, 0.60)); }
  to   { filter: drop-shadow(0 0 18px rgba(252, 98, 0, 1.00)); }
}