/* ═══════════════════════════════════════════════════
   Outro overlay — simple win/lose modal
═══════════════════════════════════════════════════ */
#outro-overlay {
  position: fixed; inset: 0; z-index: 600;
  display: flex; align-items: center; justify-content: center;
  pointer-events: none;
  background: rgba(0, 0, 0, 0.6);
  opacity: 0;
  transition: opacity 0.35s ease;
}
#outro-overlay.active {
  pointer-events: all;
  opacity: 1;
}

.outro-modal {
  position: relative;
  width: min(82%, 560px);
  background: var(--white);
  border-radius: 4px;
  padding: clamp(28px, 6vw, 56px) clamp(20px, 5vw, 44px);
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 0;
  opacity: 0;
  transform: scale(0.7) translateY(20px);
  will-change: transform, opacity;
}

#outro-overlay.active .outro-modal {
  animation: outroModalIn 0.55s cubic-bezier(0.2, 1.2, 0.3, 1) forwards;
}

#outro-overlay.closing .outro-modal {
  animation: outroModalOut 0.3s ease forwards;
}

@keyframes outroModalIn {
  0%   { transform: scale(0.7) translateY(20px); opacity: 0; }
  60%  { transform: scale(1.04) translateY(0);   opacity: 1; }
  100% { transform: scale(1)    translateY(0);   opacity: 1; }
}

@keyframes outroModalOut {
  to { transform: scale(0.85) translateY(8px); opacity: 0; }
}

/* Win variant — yellow modal */
.outro-modal.is-win { background: var(--yellow); }

.outro-title {
  font-family: 'Inter', sans-serif;
  font-weight: 800;
  font-size: clamp(38px, 9vw, 64px);
  line-height: 1;
  letter-spacing: -0.04em;
  color: var(--black);
  opacity: 0;
  transform: translateY(8px);
}
#outro-overlay.active .outro-title {
  animation: outroFadeUp 0.4s 0.25s cubic-bezier(0.2, 0.8, 0.2, 1) forwards;
}

.outro-sub {
  font-family: 'Inter', sans-serif;
  font-weight: 600;
  font-size: clamp(16px, 3.6vw, 22px);
  line-height: 1.2;
  letter-spacing: -0.04em;
  color: var(--black);
  margin-top: 1rem;
  opacity: 0;
  transform: translateY(8px);
}
#outro-overlay.active .outro-sub {
  animation: outroFadeUp 0.4s 0.35s cubic-bezier(0.2, 0.8, 0.2, 1) forwards;
}

.outro-btn {
  margin-top: clamp(18px, 3vw, 28px);
  width: 100%;
  background: var(--black);
  color: var(--white);
  border: none;
  border-radius: 4px;
  padding: clamp(16px, 3vw, 22px) 0;
  font-family: 'Inter', sans-serif;
  font-weight: 800;
  font-size: clamp(20px, 5vw, 32px);
  letter-spacing: -0.04em;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  user-select: none;
  transition: transform 0.1s ease, background 0.15s ease;
  opacity: 0;
  transform: translateY(8px);
}
#outro-overlay.active .outro-btn {
  animation: outroFadeUp 0.4s 0.45s cubic-bezier(0.2, 0.8, 0.2, 1) forwards;
}
.outro-btn:active { transform: translateY(2px) scale(0.99); }

@keyframes outroFadeUp {
  to { opacity: 1; transform: translateY(0); }
}

@media (prefers-reduced-motion: reduce) {
  #outro-overlay.active .outro-modal,
  #outro-overlay.active .outro-title,
  #outro-overlay.active .outro-sub,
  #outro-overlay.active .outro-btn {
    animation: none;
    opacity: 1;
    transform: none;
  }
}

/* ═══════════════════════════════════════════════════
   Final win
═══════════════════════════════════════════════════ */
#final-win { background: var(--white); gap: 18px; }

#confetti-canvas {
  position: absolute; inset: 0;
  pointer-events: none; z-index: 1;
}

.final-content {
  text-align: center;
  display: flex; flex-direction: column; align-items: center; gap: 16px;
  position: relative; z-index: 2;
}
.final-title {
  font-family: 'Inter', sans-serif;
  font-weight: 800;
  font-size: clamp(48px, 13vw, 110px);
  color: var(--black); line-height: 0.92;
  letter-spacing: -0.03em;
  animation: splashPop 0.7s cubic-bezier(0.34,1.56,0.64,1) both;
}
.final-sub {
  font-family: 'Inter', sans-serif;
  font-weight: 600;
  font-size: clamp(16px, 3.6vw, 22px);
  letter-spacing: -0.01em;
  color: var(--black);
  animation: fadeUp 0.5s 0.3s ease both;
}

/* ═══════════════════════════════════════════════════
   Kiosk 1080×1920
═══════════════════════════════════════════════════ */
@media (orientation: portrait) and (min-width: 1000px) and (min-height: 1700px) {
  .outro-modal { width: min(80%, 820px); padding: 72px 56px; gap: 0; border-radius: 6px; }
  .outro-title { font-size: clamp(96px, 8.4vw, 132px); }
  .outro-sub   { font-size: clamp(32px, 3vw, 44px); margin-top: 1rem; }
  .outro-btn   { font-size: clamp(46px, 4.2vw, 64px); padding: 36px 0; margin-top: 40px; border-radius: 6px; }

  #final-win .btn { min-width: 560px; }
  .final-title { font-size: clamp(128px, 11vw, 188px); }
  .final-sub   { font-size: clamp(34px, 3vw, 42px); }
}