:root{
  --gold:#b8860b; --gold2:#f7d774; --brown:#5b3515; --cream:#fffaf1; --ink:#3b2412;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0; min-height:100vh; font-family:Georgia,"Times New Roman",serif; color:var(--ink);
  background:radial-gradient(circle at 20% 0%,rgba(255,215,112,.55),transparent 30%),
             radial-gradient(circle at 80% 15%,rgba(255,255,255,.9),transparent 22%),
             linear-gradient(145deg,#fff7e7,#fff,#fff1d6);
  overflow-x:hidden;
}
.sparkle{position:fixed;inset:0;pointer-events:none;background-image:radial-gradient(circle,rgba(184,134,11,.65) 1px,transparent 1.8px),radial-gradient(circle,rgba(247,215,116,.75) 1.2px,transparent 2px);background-size:44px 44px,77px 77px;animation:twinkle 7s linear infinite;opacity:.45;z-index:0}
@keyframes twinkle{0%,100%{transform:translateY(0);opacity:.34}50%{transform:translateY(-18px);opacity:.65}}
.page{position:relative;z-index:1;max-width:1120px;margin:auto;padding:26px 18px 60px}
.hero{min-height:92vh;display:grid;grid-template-columns:1.05fr .95fr;gap:28px;align-items:center}
.card{position:relative;border:2px solid rgba(184,134,11,.45);border-radius:30px;padding:34px;background:rgba(255,255,255,.84);box-shadow:0 22px 60px rgba(95,56,13,.18);backdrop-filter:blur(10px);overflow:hidden}
.eyebrow{letter-spacing:.24em;text-transform:uppercase;font-weight:700;color:var(--brown);text-align:center;font-size:14px}
h1{margin:12px 0 4px;text-align:center;font-size:clamp(42px,8vw,96px);line-height:.92;font-weight:400;color:var(--gold);text-shadow:0 2px 0 #fff,0 8px 30px rgba(184,134,11,.23)}
h2{text-align:center;font-size:clamp(34px,6vw,70px);color:var(--gold);margin:10px 0}
.age-line{text-align:center;font-size:clamp(46px,13vw,150px);font-weight:900;line-height:.8;color:var(--gold);position:relative;margin:18px auto;width:max-content;max-width:100%}
.age-line sup{font-size:.25em}
.age40{display:inline-block;position:absolute;left:0;top:0;color:#d9b24d;opacity:.9;transform:rotate(-4deg);animation:erase40 4.5s ease-in-out 1.3s forwards}
.age41{display:inline-block;opacity:0;transform:scale(.8);animation:reveal41 2s ease-out 3.2s forwards,glow 2s ease-in-out infinite 5s}
@keyframes erase40{0%{clip-path:inset(0 0 0 0);opacity:.9;filter:blur(0)}55%{clip-path:inset(0 100% 0 0);opacity:.45;filter:blur(1px)}100%{clip-path:inset(0 100% 0 0);opacity:0;transform:translateX(60px) rotate(8deg)}}
@keyframes reveal41{to{opacity:1;transform:scale(1)}} @keyframes glow{50%{text-shadow:0 0 30px rgba(247,215,116,.9)}}
.subtitle{text-align:center;max-width:640px;margin:0 auto 20px;font-size:clamp(18px,2.3vw,25px);line-height:1.35}.subtitle.small{font-size:18px}
.details{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin:28px 0}
.detail{border:1px solid rgba(184,134,11,.35);border-radius:20px;padding:18px 12px;text-align:center;background:linear-gradient(180deg,#fff,#fff8e8);box-shadow:0 12px 22px rgba(184,134,11,.08)}
.detail b{display:block;text-transform:uppercase;letter-spacing:.18em;color:var(--brown);font-size:12px;margin-bottom:8px}
.detail span{font-size:clamp(18px,2vw,25px);color:var(--gold);font-weight:700}
.icons{display:flex;flex-wrap:wrap;justify-content:center;gap:14px;margin:18px 0 8px;color:var(--brown);font-weight:700;letter-spacing:.08em}
.final-note{font-size:clamp(24px,4vw,44px);color:var(--gold);text-align:center;margin:10px 0}
.cta-row{display:flex;flex-wrap:wrap;gap:12px;justify-content:center;margin-top:22px}
button,.btn{border:0;border-radius:999px;padding:14px 22px;font-weight:800;letter-spacing:.04em;cursor:pointer;color:#fff;background:linear-gradient(135deg,#8d5c0e,#e2b64c);box-shadow:0 12px 24px rgba(184,134,11,.25);text-decoration:none;transition:.25s ease;font-family:Arial,sans-serif}
button:hover,.btn:hover{transform:translateY(-3px) scale(1.03)}
.stage{min-height:650px;position:relative;border-radius:34px;overflow:hidden;box-shadow:0 24px 70px rgba(68,43,15,.2);border:2px solid rgba(184,134,11,.35);background:linear-gradient(#9bd8ff 0 42%,#ffe9a9 42% 66%,#55b7c7 66% 100%)}
.sun{position:absolute;top:34px;right:36px;width:92px;height:92px;border-radius:50%;background:radial-gradient(circle,#fff8c7,#ffd45c 65%,#f2a900);box-shadow:0 0 60px #ffe27d;animation:pulse 3s ease-in-out infinite}@keyframes pulse{50%{transform:scale(1.08)}}
.cloud{position:absolute;top:70px;left:-220px;width:180px;height:58px;border-radius:60px;background:rgba(255,255,255,.92);animation:cloudMove 22s linear infinite}.cloud:before,.cloud:after{content:"";position:absolute;background:inherit;border-radius:50%}.cloud:before{width:85px;height:85px;left:28px;top:-40px}.cloud:after{width:70px;height:70px;left:98px;top:-26px}.cloud.two{top:145px;animation-duration:30s;animation-delay:-10s;opacity:.75}@keyframes cloudMove{to{transform:translateX(980px)}}
.mari-cartoon{position:absolute;left:50%;top:-340px;width:min(280px,62vw);transform:translateX(-50%);text-align:center;animation:dropMari 4s cubic-bezier(.14,.82,.28,1.14) .6s forwards,floatMari 3s ease-in-out 5s infinite;z-index:4}
.parachute{width:190px;height:95px;margin:0 auto -18px;border-radius:100px 100px 0 0;background:repeating-conic-gradient(from 180deg,#fff 0 14deg,#f7d774 14deg 28deg,#fff3ec 28deg 42deg);border:5px solid #fff;box-shadow:0 10px 22px rgba(0,0,0,.15)}
.cartoon-svg{width:100%;filter:drop-shadow(0 18px 30px rgba(0,0,0,.28))}
.caption{display:inline-block;margin-top:-18px;padding:9px 16px;border-radius:999px;background:#fff;color:var(--gold);font-family:Arial,sans-serif;font-weight:900;box-shadow:0 8px 18px rgba(0,0,0,.15)}
@keyframes dropMari{0%{top:-360px;transform:translateX(-50%) rotate(-10deg) scale(.72)}75%{top:230px;transform:translateX(-50%) rotate(5deg) scale(1.05)}100%{top:210px;transform:translateX(-50%) rotate(0) scale(1)}}
@keyframes floatMari{50%{transform:translateX(-50%) translateY(-12px)}}
.beach{position:absolute;left:0;right:0;bottom:0;height:36%;background:radial-gradient(ellipse at 50% 0%,rgba(255,255,255,.75),transparent 40%),linear-gradient(#f6dc91,#e8b95c);z-index:2}
.wave{position:absolute;left:-10%;right:-10%;bottom:31%;height:72px;background:rgba(255,255,255,.75);border-radius:50%;animation:wave 3.4s ease-in-out infinite;z-index:3}@keyframes wave{50%{transform:translateX(28px) translateY(8px)}}
.balloon{position:absolute;width:70px;height:90px;border-radius:50% 50% 45% 45%;background:linear-gradient(135deg,#fff,#e4bd53);box-shadow:inset -12px -18px 20px rgba(120,70,0,.18);animation:rise 8s ease-in infinite;z-index:5}.balloon:after{content:"";position:absolute;width:1px;height:90px;background:rgba(93,58,10,.45);left:50%;top:88px}.b1{left:8%;bottom:-140px;animation-delay:.2s}.b2{left:77%;bottom:-120px;animation-delay:1.4s;transform:scale(.9)}.b3{left:55%;bottom:-160px;animation-delay:2.8s;transform:scale(.75)}@keyframes rise{0%{translate:0 0;opacity:0}15%{opacity:1}100%{translate:20px -850px;opacity:0}}
.game-section{margin-top:35px}.game-form{display:flex;justify-content:center;gap:12px;flex-wrap:wrap;margin:22px 0}.game-form input{width:min(420px,100%);padding:15px 18px;border-radius:999px;border:2px solid rgba(184,134,11,.35);font-size:16px;outline:none;background:#fff}.game-form input:focus{border-color:var(--gold);box-shadow:0 0 0 4px rgba(247,215,116,.25)}
.wheel-wrap{position:relative;width:260px;height:260px;margin:22px auto}.pointer{position:absolute;top:-14px;left:50%;transform:translateX(-50%);font-size:40px;color:#8d5c0e;z-index:2}.wheel{width:100%;height:100%;border-radius:50%;border:10px solid #fff;box-shadow:0 15px 45px rgba(95,56,13,.22);background:conic-gradient(#f7d774 0 60deg,#fff3ec 60deg 120deg,#d9a326 120deg 180deg,#fff 180deg 240deg,#f0c45b 240deg 300deg,#8d5c0e 300deg 360deg);position:relative;transition:transform 3.2s cubic-bezier(.12,.82,.2,1)}
.wheel span{position:absolute;left:50%;top:50%;font-size:31px;transform-origin:0 0}.wheel span:nth-child(1){transform:rotate(30deg) translate(78px) rotate(-30deg)}.wheel span:nth-child(2){transform:rotate(90deg) translate(78px) rotate(-90deg)}.wheel span:nth-child(3){transform:rotate(150deg) translate(78px) rotate(-150deg)}.wheel span:nth-child(4){transform:rotate(210deg) translate(78px) rotate(-210deg)}.wheel span:nth-child(5){transform:rotate(270deg) translate(78px) rotate(-270deg)}.wheel span:nth-child(6){transform:rotate(330deg) translate(78px) rotate(-330deg)}
.result-box{max-width:620px;margin:18px auto 0;text-align:center;border-radius:20px;padding:18px;background:#fff8e8;border:1px solid rgba(184,134,11,.35);font-size:20px;font-weight:700;color:var(--brown)}
.confetti{position:fixed;top:-20px;width:10px;height:18px;background:var(--gold2);opacity:0;pointer-events:none;animation:fall 3.2s linear forwards;z-index:20}@keyframes fall{0%{transform:translateY(-40px) rotate(0);opacity:1}100%{transform:translateY(110vh) rotate(720deg);opacity:0}}
@media(max-width:860px){.hero{grid-template-columns:1fr}.stage{min-height:590px}}
@media(max-width:560px){.page{padding:14px 10px 40px}.card{padding:24px 16px;border-radius:24px}.details{grid-template-columns:1fr}.stage{min-height:560px;border-radius:24px}.mari-cartoon{width:235px}@keyframes dropMari{0%{top:-340px;transform:translateX(-50%) rotate(-10deg) scale(.72)}75%{top:230px;transform:translateX(-50%) rotate(5deg) scale(1.03)}100%{top:210px;transform:translateX(-50%) rotate(0) scale(1)}}}