:root { --red:#b3202a; --green:#1e7a3c; --ink:#222; --soft:#f6f1ea; }
* { box-sizing: border-box; }
body { margin:0; background:#fff; color:var(--ink); font-family:"Trebuchet MS", Verdana, sans-serif; line-height:1.5; }
.banner { display:block; width:100%; height:auto; }
.wrap { max-width:640px; margin:0 auto; padding:20px 16px 40px; }
h1, h2, h3 { font-family: Georgia, serif; color:var(--red); line-height:1.2; }
h1 { font-size:2rem; text-align:center; margin:.4em 0; }
a { color:var(--green); }
.hero { display:block; width:100%; max-width:420px; margin:0 auto; }
.tagline { text-align:center; font-size:1.1rem; }
.center { text-align:center; }
.btn { display:inline-block; background:var(--red); color:#fff; text-decoration:none; border:0; border-radius:999px;
  padding:14px 28px; font-size:1.1rem; font-weight:bold; cursor:pointer; box-shadow:0 3px 0 #7d1119; }
.btn:active { transform:translateY(2px); box-shadow:0 1px 0 #7d1119; }
.btn.green { background:var(--green); box-shadow:0 3px 0 #135028; }
.btn.small { padding:7px 14px; font-size:.9rem; }
.btn.ghost { background:#fff; color:var(--red); border:2px solid var(--red); box-shadow:none; }
.card { border:2px solid var(--green); border-radius:14px; padding:16px; margin:16px 0; background:#fff; }
.card.red { border-color:var(--red); }
label { display:block; font-weight:bold; margin:12px 0 4px; }
input[type=text], input[type=email], input[type=password], select {
  width:100%; padding:12px; font-size:1rem; border:2px solid #ccc; border-radius:10px; }
input:focus, select:focus { outline:none; border-color:var(--green); }
.msg { padding:12px 14px; border-radius:10px; margin:14px 0; background:#e8f5ec; border:2px solid var(--green); }
.err { background:#fdecec; border-color:var(--red); }
.countdown { text-align:center; font-weight:bold; color:var(--green); margin:14px 0; }
.foot { text-align:center; padding:20px; color:#777; font-size:.85rem; border-top:6px solid var(--green); }
ol.steps { padding-left:22px; } ol.steps li { margin:10px 0; }
table { width:100%; border-collapse:collapse; font-size:.95rem; }
th, td { text-align:left; padding:8px 6px; border-bottom:1px solid #e5e5e5; vertical-align:middle; }
th { color:var(--red); }
.row { display:flex; gap:8px; flex-wrap:wrap; align-items:center; }
.row > * { flex:1 1 140px; }
form.inline { display:inline; }
.muted { color:#777; font-size:.9rem; }

/* Gift reveal */
.giftwrap { position:relative; width:180px; height:180px; margin:30px auto 10px; cursor:pointer; -webkit-tap-highlight-color:transparent; }
.box { position:absolute; bottom:0; left:10px; width:160px; height:120px; background:var(--red); border-radius:6px; }
.box::before { content:""; position:absolute; left:68px; top:0; width:24px; height:100%; background:var(--green); }
.lid { position:absolute; bottom:112px; left:0; width:180px; height:38px; background:#c9303b; border-radius:6px; transition:transform .7s, opacity .7s; z-index:2; }
.lid::before { content:""; position:absolute; left:78px; top:0; width:24px; height:100%; background:var(--green); }
.lid::after { content:"🎀"; position:absolute; left:70px; top:-28px; font-size:36px; }
.giftwrap.shake { animation: shake .8s; }
.giftwrap.open .lid { transform: translateY(-90px) rotate(-25deg); opacity:0; }
@keyframes shake { 0%,100%{transform:rotate(0)} 15%{transform:rotate(-8deg)} 30%{transform:rotate(8deg)} 45%{transform:rotate(-8deg)} 60%{transform:rotate(8deg)} 75%{transform:rotate(-4deg)} }
.reveal-name { font-family:Georgia,serif; font-size:2.6rem; font-weight:bold; color:var(--green); text-align:center; margin:6px 0 12px; animation: pop .6s; }
@keyframes pop { from{transform:scale(.2);opacity:0} to{transform:scale(1);opacity:1} }
#result { display:none; }
.snow { font-size:1.6rem; text-align:center; letter-spacing:6px; }

/* Falling snow */
.snow-layer { position:fixed; inset:0; pointer-events:none; overflow:hidden; z-index:50; }
.flake { position:absolute; top:-20px; border-radius:50%; background:#fff; border:1px solid #c9dff0;
  box-shadow:0 0 4px rgba(150,190,220,.55);
  animation: snowfall linear infinite, snowsway ease-in-out infinite alternate; }
@keyframes snowfall { to { transform: translateY(108vh); } }
@keyframes snowsway { from { translate:-14px 0; } to { translate:14px 0; } }