*,*::before,*::after{margin:0;padding:0;box-sizing:border-box}
:root{--color-primary:#3DB54A;--color-primary-dark:#2E7D32;--color-primary-light:#E8F5E9;--color-accent:#FFD100;--color-danger:#E8272A;--color-bg:#F5F5F3;--color-text:#1A1A1A;--color-text-secondary:#6B6B6B;--color-white:#FFFFFF;--font-heading:'Poppins',sans-serif;--font-body:'Inter',sans-serif;--radius-card:16px;--radius-btn:12px}
html,body{height:100%;background:var(--color-bg);font-family:var(--font-body);color:var(--color-text);-webkit-font-smoothing:antialiased;overflow-x:hidden}
.app{max-width:430px;min-height:100%;margin:0 auto;position:relative;background:var(--color-bg)}

.page{padding:40px 20px 40px;display:flex;flex-direction:column;align-items:center}

/* ── Celebration ── */
.celeb{text-align:center;margin-bottom:28px}
.celeb-icon{font-size:72px;display:inline-block;animation:celebPop 0.6s cubic-bezier(0.34,1.56,0.64,1) 0.5s both}
@keyframes celebPop{0%{transform:scale(0);opacity:0}100%{transform:scale(1);opacity:1}}
.celeb-title{font-family:var(--font-heading);font-weight:800;font-size:28px;color:var(--color-primary);margin-top:12px;animation:fadeUp 0.5s ease 0.7s both}
.celeb-pos{font-size:14px;color:var(--color-text-secondary);margin-top:4px;animation:fadeUp 0.5s ease 0.9s both}
.celeb-prize{font-family:var(--font-heading);font-weight:700;font-size:20px;margin-top:12px;animation:fadeUp 0.5s ease 1.1s both}
.celeb-desc{font-size:14px;color:var(--color-text-secondary);margin-top:6px;max-width:320px;line-height:1.5;text-align:center;animation:fadeUp 0.5s ease 1.3s both}
@keyframes fadeUp{0%{transform:translateY(12px);opacity:0}100%{transform:translateY(0);opacity:1}}

/* ── Actions ── */
.actions{width:100%;max-width:360px;display:flex;flex-direction:column;gap:10px;animation:fadeUp 0.5s ease 1.5s both}
.btn{width:100%;height:48px;border:none;border-radius:var(--radius-btn);background:var(--color-primary);color:var(--color-white);font-family:var(--font-heading);font-weight:700;font-size:15px;cursor:pointer;display:flex;align-items:center;justify-content:center;gap:6px;-webkit-tap-highlight-color:transparent;transition:all 0.2s ease;box-shadow:0 4px 20px rgba(61,181,74,0.35)}
.btn:active{transform:scale(0.97)}
.link-back{margin-top:8px;font-size:14px;color:var(--color-text-secondary);cursor:pointer;background:none;border:none;font-family:var(--font-body);font-weight:500;-webkit-tap-highlight-color:transparent;text-align:center}
.link-back:active{opacity:0.5}

/* ── Form (scenario B) ── */
.form-section{width:100%;max-width:360px;animation:fadeUp 0.5s ease 1.5s both}
.form-title{font-family:var(--font-heading);font-weight:700;font-size:16px;margin-bottom:4px}
.form-note{font-size:12px;color:var(--color-danger);font-weight:600;margin-bottom:16px}
.form-card{background:var(--color-white);border-radius:var(--radius-card);box-shadow:0 4px 16px rgba(0,0,0,0.07);padding:20px;display:flex;flex-direction:column;gap:14px;margin-bottom:16px}
.field{display:flex;flex-direction:column;gap:4px}
.field-label{font-size:12px;font-weight:600;color:var(--color-text-secondary)}
.field-input{height:48px;padding:0 16px;border:1.5px solid #D0D0D0;border-radius:12px;background:var(--color-white);font-family:var(--font-body);font-size:14px;color:var(--color-text);transition:border-color 0.2s ease;outline:none}
.field-input:focus{border-color:var(--color-primary)}
.field-input::placeholder{color:#B0B0B0}

/* ── Confirmation ── */
.confirm{display:none;text-align:center;width:100%;max-width:360px}
.confirm.show{display:block;animation:fadeUp 0.4s ease}
.confirm-icon{font-size:64px;margin-bottom:12px}
.confirm-title{font-family:var(--font-heading);font-weight:800;font-size:20px;color:var(--color-primary);margin-bottom:6px}
.confirm-desc{font-size:14px;color:var(--color-text-secondary);line-height:1.5;margin-bottom:24px}

/* ── Confetti ── */
#confetti-canvas{position:fixed;top:0;left:0;width:100%;height:100%;pointer-events:none;z-index:100}

@media(orientation:landscape)and(max-height:500px){.lw{display:flex!important}.app{display:none}}
.lw{display:none;position:fixed;inset:0;background:var(--color-bg);align-items:center;justify-content:center;flex-direction:column;gap:12px;z-index:999;font-family:var(--font-body);color:var(--color-text-secondary);text-align:center;padding:20px}
@media(max-width:374px){.celeb-title{font-size:24px}.celeb-prize{font-size:18px}}