html, body { margin:0; padding:0; height:100%; }
body {
  height:100vh; width:100vw; background:#0d1613; box-sizing:border-box;
  font-family:'Helvetica Neue',Helvetica,Arial,sans-serif;
  display:flex; align-items:center; justify-content:center; overflow:hidden;
}
.stage {
  position:relative; width:100vw; height:100vh; border-radius:0; overflow:hidden;
  background: radial-gradient(ellipse at 50% 30%, #1fae74 0%, #0f8a5a 45%, #0a6b46 100%);
}
.felt-texture {
  position:absolute; inset:0;
  background:repeating-linear-gradient(115deg, rgba(255,255,255,0.05) 0px, rgba(255,255,255,0.05) 2px, transparent 2px, transparent 6px);
  animation: feltShimmer 5s ease-in-out infinite;
}
.rail { position:absolute; inset:18px; border-radius:26px; border:6px solid rgba(255,203,61,0.55); box-shadow:inset 0 0 60px rgba(0,0,0,0.35); }

.particle {
  position:absolute; border-radius:50%;
  background:radial-gradient(circle, rgba(255,255,255,0.9), rgba(255,255,255,0));
  animation: floatParticle linear infinite;
}

.fly-card {
  position:absolute; left:50%; top:96%; width:54px; height:76px; margin:-38px 0 0 -27px;
  border-radius:7px; background:linear-gradient(135deg,#fefdf9,#f2efe6); box-shadow:0 6px 14px rgba(0,0,0,0.35);
  animation: flyDeal 0.9s cubic-bezier(.2,.8,.3,1) both;
}

.titles { position:absolute; top:34px; left:0; right:0; text-align:center; animation: titlePop 0.7s ease 0.1s both; }
.kicker { font-family:Georgia,serif; font-size:15px; letter-spacing:0.4em; text-transform:uppercase; color:#d8f5e6; opacity:0.85; }
.headline { font-family:Georgia,serif; font-size:46px; font-weight:700; color:#fffdf6; text-shadow:0 3px 10px rgba(0,0,0,0.35); margin-top:4px; }

.piles { position:absolute; bottom:60px; left:0; right:0; display:flex; justify-content:center; gap:70px; }
.pile { position:relative; width:200px; height:270px; cursor:pointer; }
.pile-inner { position:relative; width:100%; height:100%; transition:transform 0.35s cubic-bezier(.2,.9,.3,1); }
.pile:hover .pile-inner { transform:translateY(-16px) scale(1.05); }

.stack-card {
  position:absolute; inset:0; border-radius:16px;
  box-shadow:0 10px 22px rgba(0,0,0,0.35), inset 0 0 0 2px rgba(255,255,255,0.06);
  animation: dealIn 0.6s cubic-bezier(.2,.8,.3,1) both, idleBob ease-in-out infinite;
}
.stack-card-img img { width:100%; height:100%; object-fit:cover; border-radius:16px; display:block; }

.icon-wrap { position:absolute; inset:0; border-radius:16px; display:flex; align-items:center; justify-content:center; }
.icon-wrap svg { width:82px; height:82px; filter:drop-shadow(0 6px 10px rgba(0,0,0,0.35)); }
.icon-wrap img { width:92px; height:auto; filter:drop-shadow(0 6px 10px rgba(0,0,0,0.35)); border-radius:16px; }

.plaque-wrap { position:absolute; bottom:-52px; left:50%; transform:translateX(-50%); width:220px; text-align:center; }
.plaque {
  background:linear-gradient(180deg,#fff8e6,#ffe9ad); color:#3a2600; font-family:Georgia,serif; font-weight:700; font-size:17px;
  padding:8px 18px; border-radius:10px; box-shadow:0 8px 16px rgba(0,0,0,0.35); border:1px solid rgba(0,0,0,0.08); white-space:nowrap;
}
.subtitle { color:#d8f5e6; font-size:12px; margin-top:8px; letter-spacing:0.06em; text-transform:uppercase; opacity:0.85; }

.loading-overlay {
  position:absolute; inset:0; background:rgba(6,20,15,0.86);
  display:none; flex-direction:column; align-items:center; justify-content:center; gap:22px;
  opacity:0; transition:opacity 0.25s ease;
}
.loading-overlay.active { display:flex; opacity:1; }
.spinner { width:64px; height:64px; border-radius:50%; border:5px solid rgba(255,255,255,0.2); border-top-color:#ffcb3d; animation:spin360 0.9s linear infinite; }
.loading-title { color:#fffdf6; font-family:Georgia,serif; font-size:26px; font-weight:700; }

@keyframes dealIn {
  0% { opacity:0; transform: translate(-60vw, 30vh) rotate(-35deg) scale(0.35); }
  60% { opacity:1; }
  100% { opacity:1; transform: translate(0,0) rotate(var(--rot, 0deg)) scale(1); }
}
@keyframes flyDeal {
  0% { opacity:0; transform: translate(0,0) rotate(0deg) scale(0.5); }
  12% { opacity:1; }
  85% { opacity:1; }
  100% { opacity:0; transform: translate(var(--tx), var(--ty)) rotate(var(--rrot)) scale(0.9); }
}
@keyframes idleBob {
  0%, 100% { transform: rotate(var(--rot, 0deg)) translateY(0); }
  50% { transform: rotate(calc(var(--rot, 0deg) + 1.2deg)) translateY(-5px); }
}
@keyframes floatParticle {
  0% { transform: translate(0,0) scale(0.6); opacity:0; }
  15% { opacity:1; }
  85% { opacity:1; }
  100% { transform: translate(var(--px), var(--py)) scale(1); opacity:0; }
}
@keyframes feltShimmer { 0%, 100% { opacity:0.35; } 50% { opacity:0.6; } }
@keyframes titlePop { 0% { opacity:0; transform: translateY(-16px); } 100% { opacity:1; transform: translateY(0); } }
@keyframes spin360 { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }

@media (max-width: 900px) {
  .headline { font-size:32px; }
  .piles { gap:28px; flex-wrap:wrap; }
  .pile { width:150px; height:200px; }
}