@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;500;600;700&family=Sora:wght@400;500;600&display=swap');

:root {
  --ink: #0b1224;
  --muted: #6b7285;
  --card: rgba(255, 255, 255, 0.05);
  --stroke: rgba(255, 255, 255, 0.08);
  --accent: #ff7a7a;
  --accent-2: #fdd04a;
  --accent-3: #5de5ff;
  --surface: #0f172a;
  --glow: rgba(255, 255, 255, 0.1);
  --shadow: 0 20px 60px rgba(0, 0, 0, 0.35);
  color-scheme: dark;
}

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  min-height: 100vh;
  font-family: 'Sora', 'Space Grotesk', system-ui, -apple-system, sans-serif;
  color: #e5e7ef;
  background: radial-gradient(circle at 20% 20%, rgba(255, 122, 122, 0.08), transparent 35%),
    radial-gradient(circle at 80% 0%, rgba(93, 229, 255, 0.1), transparent 32%),
    radial-gradient(circle at 50% 70%, rgba(253, 208, 74, 0.08), transparent 38%),
    #0b1224;
  overflow-x: hidden;
}

.bg-grid {
  position: fixed;
  inset: 0;
  pointer-events: none;
  background-image: linear-gradient(var(--stroke) 1px, transparent 1px), linear-gradient(90deg, var(--stroke) 1px, transparent 1px);
  background-size: 64px 64px;
  opacity: 0.35;
  z-index: 0;
}

.bg-glow {
  position: fixed;
  top: -10%;
  right: -10%;
  width: 40vw;
  height: 40vw;
  max-width: 560px;
  filter: blur(80px);
  background: radial-gradient(circle, rgba(255, 122, 122, 0.25), transparent 60%);
  opacity: 0.6;
  z-index: 0;
}

.shell {
  position: relative;
  z-index: 1;
  max-width: 960px;
  margin: 0 auto;
  padding: 56px 20px 88px;
}

.hero {
  text-align: center;
  margin-bottom: 28px;
}

.eyebrow {
  display: inline-flex;
  padding: 6px 12px;
  border-radius: 999px;
  background: rgba(255, 122, 122, 0.15);
  color: #ffd8d8;
  letter-spacing: 0.03em;
  font-weight: 600;
  text-transform: uppercase;
  font-size: 12px;
}

h1 {
  margin: 12px 0 8px;
  font-size: clamp(32px, 4vw, 44px);
  letter-spacing: -0.02em;
  color: #f8fafc;
  font-family: 'Space Grotesk', 'Sora', system-ui, sans-serif;
}

.lede {
  margin: 0 auto;
  max-width: 640px;
  color: var(--muted);
  font-size: 16px;
  line-height: 1.6;
}

.card {
  background: linear-gradient(140deg, rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0.02));
  border: 1px solid var(--stroke);
  border-radius: 24px;
  padding: 28px;
  box-shadow: var(--shadow);
  backdrop-filter: blur(14px);
}

.form {
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.field {
  display: flex;
  flex-direction: column;
  gap: 10px;
  font-weight: 600;
  color: #cfd4e3;
}

.dropzone {
  position: relative;
  border: 1px dashed var(--stroke);
  background: rgba(255, 255, 255, 0.03);
  border-radius: 16px;
  padding: 20px;
  text-align: center;
  cursor: pointer;
  transition: border-color 0.2s ease, transform 0.2s ease;
}

.dropzone:hover {
  border-color: rgba(255, 122, 122, 0.6);
  transform: translateY(-1px);
}

.dropzone.dragging {
  border-color: rgba(93, 229, 255, 0.7);
  background: rgba(93, 229, 255, 0.08);
}

.drop-text {
  color: var(--muted);
  font-size: 14px;
}

.preview-container {
  margin-top: 12px;
  text-align: center;
}

.preview-image {
  max-width: 100%;
  max-height: 300px;
  border-radius: 14px;
  border: 1px solid var(--stroke);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.25);
  object-fit: contain;
  background: rgba(0, 0, 0, 0.1);
}

textarea {
  width: 100%;
  padding: 14px;
  border-radius: 14px;
  border: 1px solid var(--stroke);
  background: rgba(255, 255, 255, 0.03);
  color: #f8fafc;
  font-size: 14px;
  resize: vertical;
}

textarea:focus {
  outline: 2px solid rgba(255, 122, 122, 0.6);
  border-color: transparent;
}

.actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}

.hint {
  color: var(--muted);
  font-size: 13px;
}

.btn {
  border: none;
  border-radius: 999px;
  padding: 12px 18px;
  font-weight: 700;
  font-size: 14px;
  cursor: pointer;
  transition: transform 0.16s ease, box-shadow 0.16s ease, background 0.2s;
}

.btn.primary {
  background: linear-gradient(120deg, #ff7a7a, #fdd04a);
  color: #0b1224;
  box-shadow: 0 12px 30px rgba(255, 122, 122, 0.35);
}

.btn.primary:hover {
  transform: translateY(-1px);
}

.btn.ghost {
  background: rgba(255, 255, 255, 0.08);
  color: #f8fafc;
  border: 1px solid var(--stroke);
}

.btn:active {
  transform: translateY(1px);
}

.share {
  margin-top: 20px;
  padding: 16px;
  border-radius: 16px;
  border: 1px solid var(--stroke);
  background: rgba(255, 255, 255, 0.03);
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.share-title {
  font-weight: 700;
}

.share-row {
  display: flex;
  gap: 10px;
  align-items: stretch;
}

.share-row input {
  flex: 1;
  border-radius: 14px;
  border: 1px solid var(--stroke);
  background: rgba(255, 255, 255, 0.05);
  color: #f8fafc;
  padding: 12px;
  font-size: 14px;
}

.share-foot {
  color: var(--muted);
  font-size: 13px;
}

.hidden {
  display: none;
}

.gift-card {
  margin-top: 20px;
}

.gift-stage {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 22px;
}

.gift-wrapper {
  position: relative;
  display: grid;
  place-items: center;
  width: min(360px, 90vw);
  height: 420px;
  overflow: visible;
}

.screen-flash {
  position: fixed;
  inset: 0;
  background: radial-gradient(circle, rgba(255, 255, 255, 0.8), transparent 70%);
  opacity: 0;
  pointer-events: none;
  z-index: 9999;
}

.screen-flash.active {
  animation: flashScreen 0.6s ease-out;
}

.light-rays {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 400px;
  height: 400px;
  transform: translate(-50%, -50%);
  opacity: 0;
  pointer-events: none;
  background: 
    conic-gradient(from 0deg at 50% 50%, 
      transparent 0deg, 
      rgba(255, 208, 74, 0.4) 10deg,
      transparent 20deg,
      transparent 40deg,
      rgba(255, 122, 122, 0.4) 50deg,
      transparent 60deg,
      transparent 80deg,
      rgba(93, 229, 255, 0.4) 90deg,
      transparent 100deg,
      transparent 120deg,
      rgba(255, 208, 74, 0.4) 130deg,
      transparent 140deg,
      transparent 160deg,
      rgba(255, 122, 122, 0.4) 170deg,
      transparent 180deg,
      transparent 200deg,
      rgba(93, 229, 255, 0.4) 210deg,
      transparent 220deg,
      transparent 240deg,
      rgba(255, 208, 74, 0.4) 250deg,
      transparent 260deg,
      transparent 280deg,
      rgba(255, 122, 122, 0.4) 290deg,
      transparent 300deg,
      transparent 320deg,
      rgba(93, 229, 255, 0.4) 330deg,
      transparent 340deg,
      transparent 360deg
    );
  filter: blur(2px);
  z-index: 1;
}

.light-rays.active {
  animation: rotateLightRays 3s linear;
}

.particle-burst {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 1px;
  height: 1px;
  pointer-events: none;
  z-index: 10;
}

.gift-box {
  position: relative;
  width: 220px;
  height: 200px;
  transform-style: preserve-3d;
  cursor: pointer;
  transition: transform 0.3s ease, filter 0.3s ease;
  z-index: 2;
}

.gift-box:focus {
  outline: 2px solid rgba(255, 122, 122, 0.6);
  outline-offset: 6px;
}

.gift-box.charging {
  filter: brightness(1.3) drop-shadow(0 0 20px rgba(255, 208, 74, 0.6));
  animation: intensePulse 0.3s ease-in-out;
}

.gift-body {
  position: absolute;
  inset: 20px 0 0 0;
  height: 180px;
  background: linear-gradient(135deg, #101a32, #1c2a47);
  border-radius: 14px;
  overflow: visible;
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.35);
  transition: box-shadow 0.3s ease;
}

.gift-box.charging .gift-body {
  box-shadow: 0 0 40px rgba(255, 208, 74, 0.8), 0 16px 40px rgba(0, 0, 0, 0.35);
}

.inner-glow {
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 50% 0%, rgba(255, 208, 74, 0.6), transparent 60%);
  opacity: 0;
  transition: opacity 0.3s ease;
}

.gift-box.charging .inner-glow {
  opacity: 1;
  animation: pulseGlow 0.3s ease-in-out infinite;
}

.gift-lid {
  position: absolute;
  top: 0;
  left: -6px;
  right: -6px;
  height: 52px;
  background: linear-gradient(135deg, #ff7a7a, #fdd04a);
  border-radius: 16px 16px 10px 10px;
  transform-origin: bottom center;
  transition: transform 0.3s ease;
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.3);
}

.gift-box.opening .gift-lid {
  animation: epicLidOpen 1.2s cubic-bezier(0.68, -0.55, 0.265, 1.55) forwards;
}

.gift-ribbon {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 24px;
  height: 200px;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.82), rgba(255, 255, 255, 0.5));
  border-radius: 14px;
  mix-blend-mode: screen;
  transition: opacity 0.3s ease;
}

.gift-ribbon::before,
.gift-ribbon::after {
  content: '';
  position: absolute;
  width: 72px;
  height: 12px;
  background: linear-gradient(120deg, #fff5f5, #ffd8d8);
  top: 18px;
  left: 50%;
  transform: translateX(-50%);
  border-radius: 999px;
}

.gift-box.opening .gift-ribbon {
  opacity: 0;
}

.sparkles {
  position: absolute;
  inset: -16px;
  pointer-events: none;
  background: radial-gradient(circle at 20% 30%, rgba(255, 122, 122, 0.5), transparent 30%),
    radial-gradient(circle at 80% 40%, rgba(253, 208, 74, 0.5), transparent 28%),
    radial-gradient(circle at 50% 70%, rgba(93, 229, 255, 0.5), transparent 26%);
  opacity: 0;
  filter: blur(2px);
}

.gift-box.hit {
  animation: hitShake 0.4s ease;
}

@keyframes intensePulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.05); }
}

@keyframes pulseGlow {
  0%, 100% { opacity: 0.6; }
  50% { opacity: 1; }
}

@keyframes hitShake {
  0%, 100% { transform: translateX(0) rotate(0deg); }
  20% { transform: translateX(-8px) rotate(-2deg); }
  40% { transform: translateX(8px) rotate(2deg); }
  60% { transform: translateX(-5px) rotate(-1deg); }
  80% { transform: translateX(5px) rotate(1deg); }
}

@keyframes epicLidOpen {
  0% {
    transform: perspective(600px) rotateX(0deg) translateY(0) translateZ(0);
  }
  30% {
    transform: perspective(600px) rotateX(-15deg) translateY(-5px) translateZ(10px);
  }
  60% {
    transform: perspective(600px) rotateX(-120deg) translateY(-30px) translateZ(20px);
  }
  100% {
    transform: perspective(600px) rotateX(-140deg) translateY(-50px) translateZ(30px);
    opacity: 0.3;
  }
}

@keyframes flashScreen {
  0% { opacity: 0; }
  30% { opacity: 1; }
  100% { opacity: 0; }
}

@keyframes rotateLightRays {
  0% { 
    opacity: 0;
    transform: translate(-50%, -50%) rotate(0deg) scale(0.5);
  }
  10% {
    opacity: 1;
  }
  100% { 
    opacity: 0;
    transform: translate(-50%, -50%) rotate(360deg) scale(1.5);
  }
}

.tap-hint {
  margin-top: 10px;
  color: var(--muted);
  font-weight: 600;
  letter-spacing: 0.01em;
}

.reveal {
  width: 100%;
  display: grid;
  place-items: center;
  gap: 20px;
  position: relative;
  margin-top: -80px;
}

.reveal img {
  width: min(100%, 460px);
  max-height: 500px;
  border-radius: 20px;
  border: 2px solid rgba(255, 208, 74, 0.3);
  box-shadow: 
    0 0 60px rgba(255, 208, 74, 0.4),
    0 0 120px rgba(255, 122, 122, 0.2),
    0 20px 60px rgba(0, 0, 0, 0.5);
  object-fit: contain;
  background: linear-gradient(135deg, rgba(255, 208, 74, 0.05), rgba(93, 229, 255, 0.05));
  opacity: 0;
  transform: scale(0.2) translateY(-200px) rotateZ(-20deg);
  filter: brightness(1.2);
}

.reveal.shown img {
  animation: epicReveal 1.8s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}

.message {
  margin: 0;
  color: #f8fafc;
  font-size: 18px;
  text-align: center;
  line-height: 1.6;
  font-weight: 500;
  opacity: 0;
  transform: translateY(30px);
  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.5);
}

.reveal.shown .message {
  animation: fadeInUp 1s ease 1.2s forwards;
}

.error {
  color: #ffb4b4;
  text-align: center;
  font-weight: 600;
}

@keyframes epicReveal {
  0% {
    opacity: 0;
    transform: scale(0.2) translateY(-200px) rotateZ(-20deg);
    filter: brightness(2) blur(10px);
  }
  40% {
    opacity: 1;
    transform: scale(0.6) translateY(-100px) rotateZ(5deg);
    filter: brightness(1.5) blur(2px);
  }
  70% {
    transform: scale(1.1) translateY(10px) rotateZ(-2deg);
    filter: brightness(1.2) blur(0px);
  }
  85% {
    transform: scale(0.95) translateY(-5px) rotateZ(1deg);
  }
  100% {
    opacity: 1;
    transform: scale(1) translateY(0) rotateZ(0deg);
    filter: brightness(1) blur(0px);
  }
}

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

@media (max-width: 640px) {
  .card { padding: 22px; }
  .actions { flex-direction: column; align-items: stretch; }
  .share-row { flex-direction: column; }
  .btn { width: 100%; text-align: center; }
}