@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;600;700;900&family=JetBrains+Mono:wght@400;700&display=swap');

:root{--bg:linear-gradient(135deg,#0f0c29,#302b63,#24243e);--fg:#e0d0f0;--gold:#fbbf24;--pink:#ff6b9d;--muted:#8888aa}

*{margin:0;padding:0;box-sizing:border-box}
html,body{width:100%;min-height:100vh;background:var(--bg);color:var(--fg);font-family:'Inter',sans-serif;overflow-x:hidden}

body::before{content:'';position:fixed;top:0;left:0;width:100%;height:100%;
background:radial-gradient(ellipse at 30% 50%,rgba(251,191,36,0.06) 0%,transparent 50%),
radial-gradient(ellipse at 70% 50%,rgba(255,107,157,0.04) 0%,transparent 50%);
pointer-events:none;z-index:0}

main{max-width:500px;margin:0 auto;padding:4rem 2rem;display:flex;flex-direction:column;align-items:center;gap:1.5rem;min-height:100vh;position:relative;z-index:1;text-align:center}

.gift-icon{font-size:5rem;animation:bounce 2s ease-in-out infinite}
@keyframes bounce{0%,100%{transform:translateY(0)}50%{transform:translateY(-15px)}}

.title{font-size:1.8rem;font-weight:900;background:linear-gradient(135deg,var(--gold),var(--pink));
-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;letter-spacing:0.05em}

.counter{font-family:'JetBrains Mono',monospace;font-size:0.8rem;color:var(--muted)}
.counter span{color:var(--gold);font-weight:700}

/* Phases */
.phase{display:flex;flex-direction:column;align-items:center;gap:1rem;width:100%;animation:fadeIn 0.5s ease}
@keyframes fadeIn{from{opacity:0;transform:scale(0.95)}to{opacity:1;transform:scale(1)}}
.hidden{display:none!important}

.phase-text{font-size:1rem;color:var(--muted)}

/* Button phase 1 */
.grab-btn{background:linear-gradient(135deg,var(--gold),#f59e0b);border:none;padding:1rem 2.5rem;
border-radius:14px;color:#1a1a2e;font-size:1.1rem;font-weight:700;cursor:pointer;
transition:all 0.3s;box-shadow:0 4px 25px rgba(251,191,36,0.4)}
.grab-btn:hover{transform:scale(1.1);box-shadow:0 6px 35px rgba(251,191,36,0.6)}
.grab-btn:active{transform:scale(0.95)}

/* Dialog phase */
.dialog-text{font-size:1.2rem;font-weight:600;color:var(--gold);min-height:2em}
.dialog-btn{padding:0.8rem 2rem;border-radius:10px;border:none;font-size:1rem;font-weight:700;cursor:pointer;transition:all 0.3s}
.yes-btn{background:#22c55e;color:white}.yes-btn:hover{transform:scale(1.1);box-shadow:0 0 20px rgba(34,197,94,0.5)}
.no-btn{background:#ef4444;color:white}.no-btn:hover{transform:scale(1.1);box-shadow:0 0 20px rgba(239,68,68,0.5)}

/* Running button phase */
.run-text{font-size:1rem;color:var(--muted);font-style:italic}
.run-btn{position:relative;background:linear-gradient(135deg,var(--pink),#ec4899);border:none;
padding:1rem 2.5rem;border-radius:14px;color:white;font-size:1rem;font-weight:700;
cursor:pointer;transition:left 0.08s ease,top 0.08s ease,box-shadow 0.3s;
box-shadow:0 4px 25px rgba(255,107,157,0.3);user-select:none;touch-action:none}
.run-btn:hover{box-shadow:0 6px 35px rgba(255,107,157,0.5)}

/* Result */
.result{display:flex;flex-direction:column;align-items:center;gap:1rem}
.congrats-text{font-size:1.5rem;font-weight:900;color:var(--gold);animation:pulse 1s ease-in-out infinite}
@keyframes pulse{0%,100%{transform:scale(1)}50%{transform:scale(1.08)}}
.result-video{width:100%;max-width:400px;border-radius:12px;box-shadow:0 0 30px rgba(251,191,36,0.2)}
.share-text{font-family:'JetBrains Mono',monospace;font-size:0.8rem;color:var(--muted)}
.share-text span{color:var(--gold);font-weight:700}

.footer{font-size:0.6rem;color:#333;letter-spacing:0.2em;padding:1rem 0;margin-top:auto}