@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,400;0,500;0,600;0,700;0,800;0,900;1,400;1,700&display=swap');

@property --shimmer-angle {
  syntax: '<angle>';
  initial-value: 0deg;
  inherits: false;
}

* {
  box-sizing: border-box;
}

body {
  background: #1a0b00;
  color: #e8d5b5;
  font-family: 'Inter', system-ui, -apple-system, sans-serif;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  margin: 0;
}

.golden-shimmer {
  background: linear-gradient(
    var(--shimmer-angle),
    #D4AF37 0%,
    #FFB347 25%,
    #FFF8DC 45%,
    #FFB347 55%,
    #D4AF37 100%
  );
  background-size: 200% 200%;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: shimmer-rotate 4s linear infinite;
}

@keyframes shimmer-rotate {
  0% { --shimmer-angle: 0deg; }
  100% { --shimmer-angle: 360deg; }
}

.golden-border-shimmer {
  position: relative;
  overflow: hidden;
}

.golden-border-shimmer::before {
  content: '';
  position: absolute;
  inset: -2px;
  background: conic-gradient(
    from 0deg,
    #D4AF37,
    #FFB347,
    #FFF8DC,
    #FFB347,
    #D4AF37,
    #CD7F32,
    #D4AF37
  );
  border-radius: inherit;
  z-index: -1;
  animation: border-rotate 3s linear infinite;
  opacity: 0.6;
}

.golden-border-shimmer::after {
  content: '';
  position: absolute;
  inset: 2px;
  background: inherit;
  border-radius: inherit;
  z-index: -1;
}

@keyframes border-rotate {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

::-webkit-scrollbar { width: 8px; }
::-webkit-scrollbar-track { background: #1a0b00; }
::-webkit-scrollbar-thumb { background: #3d2b00; border-radius: 4px; }
::-webkit-scrollbar-thumb:hover { background: #D4AF37; }

::selection {
  background: rgba(212, 175, 55, 0.3);
  color: #FFF8DC;
}

input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus {
  -webkit-text-fill-color: #e8d5b5;
  -webkit-box-shadow: 0 0 0px 1000px #0d0500 inset;
  transition: background-color 5000s ease-in-out 0s;
}

canvas {
  touch-action: none;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  user-select: none;
}

.font-playfair {
  font-family: 'Playfair Display', Georgia, serif;
}

/* Screens */
.screen {
  display: none;
  min-height: 100vh;
  width: 100%;
}

.screen.active {
  display: flex;
}

.screen.screen-exiting {
  animation: screen-exit 0.5s ease forwards;
}

.screen.screen-entering {
  animation: screen-enter 0.5s ease forwards;
}

@keyframes screen-enter {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes screen-exit {
  from { opacity: 1; transform: translateY(0); }
  to { opacity: 0; transform: translateY(-30px); }
}

/* Stagger children */
.stagger-item {
  opacity: 0;
  transform: translateY(40px);
  animation: stagger-in 0.7s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}

.stagger-item:nth-child(1) { animation-delay: 0.42s; }
.stagger-item:nth-child(2) { animation-delay: 0.54s; }
.stagger-item:nth-child(3) { animation-delay: 0.66s; }
.stagger-item:nth-child(4) { animation-delay: 0.78s; }
.stagger-item:nth-child(5) { animation-delay: 0.90s; }
.stagger-item:nth-child(6) { animation-delay: 1.02s; }
.stagger-item:nth-child(7) { animation-delay: 1.14s; }

@keyframes stagger-in {
  to { opacity: 1; transform: translateY(0); }
}

/* Particles */
.particle {
  position: absolute;
  width: 4px;
  height: 4px;
  background: #D4AF37;
  border-radius: 50%;
  animation: float-particle 3s ease-in-out infinite;
}

@keyframes float-particle {
  0%, 100% { transform: translateY(0); opacity: 0.2; }
  50% { transform: translateY(-20px); opacity: 0.6; }
}

/* Gears */
.gear-spin {
  animation: gear-rotate 15s linear infinite;
}

.gear-spin-slow {
  animation: gear-rotate 20s linear infinite;
}

@keyframes gear-rotate {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

/* Buttons */
.btn-golden {
  transition: transform 0.2s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.btn-golden:hover { transform: scale(1.05); }
.btn-golden:active { transform: scale(0.97); }

.btn-golden-sm:hover { transform: scale(1.02); }
.btn-golden-sm:active { transform: scale(0.98); }

/* Wand wiggle */
.wand-wiggle {
  animation: wand-wiggle 2s ease-in-out infinite;
}

@keyframes wand-wiggle {
  0%, 100% { transform: rotate(0deg); }
  25% { transform: rotate(10deg); }
  75% { transform: rotate(-10deg); }
}

/* Loading pulse */
.loading-pulse {
  animation: loading-pulse 0.8s ease-in-out infinite;
}

@keyframes loading-pulse {
  0%, 100% { opacity: 0.5; }
  50% { opacity: 1; }
}

/* Reveal screen */
.reveal-glow {
  transform: translate(-50%, -50%);
  animation: reveal-glow 1.5s ease-out forwards;
  pointer-events: none;
}

@keyframes reveal-glow {
  from { transform: translate(-50%, -50%) scale(0); opacity: 0; }
  to { transform: translate(-50%, -50%) scale(1.5); opacity: 1; }
}

.ticket-pop {
  transform: scale(0) rotateY(180deg);
  opacity: 0;
  animation:
    ticket-pop 1.2s cubic-bezier(0.34, 1.56, 0.64, 1) 0.3s forwards,
    ticket-glow 2s ease-in-out 1.5s infinite;
}

@keyframes ticket-pop {
  to { transform: scale(1) rotateY(0deg); opacity: 1; }
}

@keyframes ticket-glow {
  0%, 100% { box-shadow: 0 0 20px rgba(212,175,55,0.3); }
  50% { box-shadow: 0 0 60px rgba(212,175,55,0.6); }
}

.stamp-bounce {
  animation: stamp-bounce 0.5s ease-in-out 1.5s 2;
}

@keyframes stamp-bounce {
  0%, 100% { transform: rotate(0deg) scale(1); }
  50% { transform: rotate(5deg) scale(1.1); }
}

.reveal-text {
  opacity: 0;
  transform: translateY(20px);
  animation: reveal-text-in 0.8s ease 1.2s forwards;
}

@keyframes reveal-text-in {
  to { opacity: 1; transform: translateY(0); }
}

.choco-glow {
  animation: choco-glow 3s ease-in-out infinite;
}

@keyframes choco-glow {
  0%, 100% { opacity: 0.3; }
  50% { opacity: 0.6; }
}

.burst-particle {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  animation: burst-out 2s ease-out forwards;
}

@keyframes burst-out {
  0% { transform: translate(-50%, -50%) scale(1); opacity: 1; }
  70% { opacity: 1; }
  100% { opacity: 0; transform: translate(var(--bx), var(--by)) scale(0); }
}

.bounce-dot {
  animation: bounce-dot 0.6s ease-in-out infinite;
}

.bounce-dot:nth-child(2) { animation-delay: 0.2s; }
.bounce-dot:nth-child(3) { animation-delay: 0.4s; }

@keyframes bounce-dot {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-10px); }
}

/* Scratch screen */
.scratch-pop {
  animation: scratch-pop 0.6s cubic-bezier(0.34, 1.56, 0.64, 1) 0.4s forwards;
  transform: scale(0.9);
  opacity: 0;
}

@keyframes scratch-pop {
  to { transform: scale(1); opacity: 1; }
}

.prize-reveal {
  animation: prize-reveal 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}

@keyframes prize-reveal {
  from { opacity: 0; transform: scale(0.8); }
  to { opacity: 1; transform: scale(1); }
}

.secret-slide {
  animation: secret-slide 0.6s ease 0.3s forwards;
  opacity: 0;
  transform: translateY(30px);
}

@keyframes secret-slide {
  to { opacity: 1; transform: translateY(0); }
}

.manager-slide {
  animation: manager-slide 0.5s ease 0.6s forwards;
  opacity: 0;
  transform: translateY(20px);
}

@keyframes manager-slide {
  to { opacity: 1; transform: translateY(0); }
}

.icon {
  display: inline-block;
  vertical-align: middle;
  flex-shrink: 0;
}

.icon svg {
  display: block;
}

.d-none { display: none !important; }

/* CTA button labels — desktop vs mobile (matches original ScratchScreen) */
.cta-label-desktop { display: none; }
.cta-label-mobile { display: inline; }
@media (min-width: 640px) {
  .cta-label-desktop { display: inline; }
  .cta-label-mobile { display: none; }
}

/* Form selects — единый тёмный стиль (как в оригинале) */
select.gticket-select {
  color: #5a4a3a;
  background-color: rgba(13, 5, 0, 0.6);
  color-scheme: dark;
}

select.gticket-select.has-value {
  color: #e8d5b5;
}

select.gticket-select option {
  background-color: #1a0b00;
  color: #e8d5b5;
}

select.gticket-select option[value=""] {
  color: #5a4a3a;
}

/* Reveal ticket — без лишнего кадрирования */
.reveal-ticket-img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

/* Scratch card expands after reveal so CTA is visible */
.scratch-card-inner {
  aspect-ratio: 5 / 3.2;
}
.scratch-card-inner.revealed {
  aspect-ratio: auto;
  min-height: 220px;
}
#scratch-card.revealed {
  overflow: visible;
}