:root{
  --sun:#FFC531;       /* sunflower */
  --sun-soft:#FFE08A;
  --sun-pale:#FFF4D1;
  --marigold:#CC157E;       /* logo magenta */
  --cyan:#29ABE1;           /* logo cyan */
  --cyan-pale:#D8F0FB;
  --ink:#2D398C;       /* logo navy */
  --ink-soft:#4F5A94;
  --line:#D9DDEA;
  --slate:#EDF0F7;
  --display:"Baloo 2", "Trebuchet MS", system-ui, sans-serif;
  --body:"DM Sans", "Segoe UI", system-ui, sans-serif;
}
*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%;background:#1a1d2b;overflow:hidden;font-family:var(--body);color:var(--ink)}
button{font:inherit;cursor:pointer;border:0;background:none;color:inherit}
input{font:inherit;color:inherit}

/* ---------- 1280×720 stage, scaled to fit any screen ---------- */
#stage{
  position:absolute;left:50%;top:50%;width:1280px;height:720px;
  transform:translate(-50%,-50%) scale(var(--s,1));
  background:#fff;overflow:hidden;border-radius:4px;
}
.screen{position:absolute;inset:0;display:none}
.screen.active{display:block}

/* sunburst rays behind the hero */
.rays{
  position:absolute;width:1500px;height:1500px;left:235px;top:345px;
  margin:-750px 0 0 -750px;border-radius:50%;
  background:repeating-conic-gradient(from 0deg,#FFF1C2 0 7deg,transparent 7deg 15deg);
  -webkit-mask:radial-gradient(circle,#000 0 16%,transparent 50%);
          mask:radial-gradient(circle,#000 0 16%,transparent 50%);
  animation:spin 140s linear infinite;
}
@keyframes spin{to{transform:rotate(360deg)}}
.waves{position:absolute;inset:0;pointer-events:none}

/* hero smiley */
.hero{position:absolute;left:70px;top:185px;width:330px;height:330px}
.hero svg{width:100%;height:100%;overflow:visible}
.hero .arc{transform-origin:165px 165px;animation:spin 6s linear infinite}
.hero .face{transform-origin:165px 165px;animation:bob 3.2s ease-in-out infinite}
.hero .eye{transform-box:fill-box;transform-origin:center;animation:blink 4.5s infinite}
@keyframes bob{50%{transform:translateY(-6px) rotate(-2deg)}}
@keyframes blink{0%,92%,100%{transform:scaleY(1)}95%{transform:scaleY(.1)}}
.squiggle{position:absolute;top:333px;width:78px;height:40px}
.squiggle.l{left:0}.squiggle.r{left:392px}

/* title block */
.title{position:absolute;right:48px;top:40px;width:300px;text-align:center}
.title .w{font:600 34px/1 var(--display);letter-spacing:.02em}
.title .big{font:800 76px/.86 var(--display);margin-top:2px}
.title .under{display:block;margin:4px auto 0;width:220px;height:26px}
.date-pill{display:inline-block;margin-top:8px;background:var(--marigold);color:#fff;
  font:700 19px/1 var(--display);padding:9px 18px 6px;border-radius:30px}
.brand{margin:20px auto 0;width:max-content;max-width:100%;min-height:56px;background:#fff;border-radius:16px;padding:10px 14px;box-shadow:0 0 0 1px rgba(45,57,140,.08);display:flex;flex-direction:column;align-items:center;justify-content:center}
.brand img{display:block;width:240px;height:auto}
.brand .bn{font:800 30px/1 var(--display)}
.brand .bt{font:500 13px/1.3 var(--body);color:var(--ink-soft);margin-top:4px}

/* form card */
.card{
  position:absolute;left:452px;top:92px;width:376px;
  background:#fff;border:2px solid var(--ink);border-radius:22px;
  box-shadow:7px 7px 0 var(--cyan);padding:36px 26px 14px;
}
.chip{position:absolute;left:50%;top:-20px;transform:translateX(-50%);
  display:flex;align-items:center;gap:8px;white-space:nowrap;
  background:var(--ink);color:#fff;border-radius:30px;padding:8px 18px 7px 12px;font:700 17px/1 var(--display)}
.chip svg{width:20px;height:20px}
.field{display:block;margin-bottom:9px}
.field span{display:block;font:600 13px/1 var(--body);color:var(--ink-soft);margin:0 0 5px 4px}
.field input{width:100%;height:44px;border:1.5px solid var(--line);border-radius:12px;padding:0 14px;font-size:17px;background:#FBFCFF;outline:none;transition:border-color .15s, box-shadow .15s}
.field input:focus{border-color:var(--marigold);box-shadow:0 0 0 4px rgba(204,21,126,.18);background:#fff}
.field input.bad{border-color:#D6303A;box-shadow:0 0 0 4px rgba(214,48,58,.12)}
.upload{display:flex;align-items:center;gap:12px;border:1.5px dashed #B9C0DA;border-radius:14px;padding:7px 12px;margin-bottom:4px;background:#FBFCFF;cursor:pointer;min-height:62px;transition:border-color .15s}
.upload:hover,.upload:focus-within{border-color:var(--marigold)}
.upload.bad{border-color:#D6303A}
.upload input{position:absolute;opacity:0;width:1px;height:1px}
.upload .thumb{width:48px;height:48px;border-radius:50%;flex:none;display:grid;place-items:center;background:var(--sun-pale);overflow:hidden;border:2px solid var(--sun)}
.upload .thumb img{width:100%;height:100%;object-fit:cover}
.upload .thumb svg{width:24px;height:24px}
.upload b{display:block;font:700 15px/1.2 var(--body)}
.upload small{display:block;font-size:12.5px;color:var(--ink-soft);margin-top:2px}
.btns{display:flex;gap:10px;margin-top:12px}
.btn{height:48px;border-radius:14px;font:700 18px/1 var(--display);padding:4px 20px 0;display:inline-flex;align-items:center;justify-content:center;gap:8px;transition:transform .1s, background .15s}
.btn:active{transform:translateY(1px)}
.btn-primary{background:var(--ink);color:#fff;flex:1}
.btn-primary:hover{background:#3B48A8}
.btn-primary[disabled]{opacity:.6;cursor:progress}
.btn-ghost{border:2px solid var(--ink);color:var(--ink);background:#fff}
.btn-ghost:hover{background:var(--slate)}
.btn-sun{background:var(--sun);color:var(--ink)}
.btn-sun:hover{background:#ffd259}
:focus-visible{outline:3px solid var(--marigold);outline-offset:2px}
.form-msg:empty{display:none}
.form-msg{margin-top:8px;font-size:14px;color:#C2242F;text-align:center}
.who{font-size:12.5px;color:var(--ink-soft);text-align:center;margin-top:8px}
.panel{display:none}.panel.active{display:block}

/* bottom icons */
.icons{position:absolute;left:0;right:0;top:568px;display:flex;justify-content:center;gap:30px}
.icons div{display:flex;flex-direction:column;align-items:center;gap:5px;font:700 13px/1 var(--display)}
.icons i{width:52px;height:52px;border-radius:50%;background:var(--ink);display:grid;place-items:center;box-shadow:0 0 0 4px #fff,0 0 0 6px var(--cyan-pale)}
.icons svg{width:26px;height:26px}

/* corner buttons */
.corner{position:absolute;top:14px;right:14px;width:40px;height:40px;border-radius:12px;display:grid;place-items:center;z-index:20;color:var(--ink);background:rgba(255,255,255,.7)}
.corner:hover{background:#fff}
.corner svg{width:22px;height:22px}

/* ---------- story ---------- */
#screen-story{background:var(--slate)}
.scene{position:absolute;inset:0;opacity:0;transition:opacity .5s}
.scene.on{opacity:1}
.scene.b{background:#FFF6D6}
.scene.b::before{content:"";position:absolute;left:640px;top:360px;width:1600px;height:1600px;margin:-800px 0 0 -800px;border-radius:50%;
  background:repeating-conic-gradient(#FFEAA6 0 6deg,transparent 6deg 14deg);
  -webkit-mask:radial-gradient(circle,#000 0 10%,transparent 55%);mask:radial-gradient(circle,#000 0 10%,transparent 55%);animation:spin 60s linear infinite}
.scene h2{position:absolute;left:460px;width:360px;top:66px;text-align:center;font:800 36px/1 var(--display)}
.scene h2 small{display:block;font:500 17px/1.3 var(--body);color:var(--ink-soft);margin-top:8px}
.p{position:absolute;width:420px;height:300px;opacity:0;transform:scale(.85) translateY(20px)}
.p.tl{left:34px;top:30px}.p.tr{right:34px;top:30px}.p.bl{left:34px;bottom:30px}.p.br{right:34px;bottom:30px}
.scene.on .p{animation:pop .6s cubic-bezier(.2,1.4,.4,1) forwards}
.scene.on .p:nth-of-type(2){animation-delay:.6s}
.scene.on .p:nth-of-type(3){animation-delay:1.2s}
.scene.on .p:nth-of-type(4){animation-delay:1.8s}
@keyframes pop{to{opacity:1;transform:none}}
.blob{position:absolute;inset:34px 0 0 0;overflow:hidden;display:grid;place-items:center;
  border-radius:48% 52% 44% 56% / 58% 46% 54% 42%}
.p.tr .blob,.p.bl .blob{border-radius:56% 44% 52% 48% / 44% 58% 42% 56%}
.a .blob{background:linear-gradient(145deg,#C3CBE2,#8F9BBF)}
.b .blob{background:linear-gradient(145deg,#FFD66B,#F5A623)}
.blob img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.blob>svg{width:120px;height:120px;opacity:.95}
.blob::after{content:"";position:absolute;inset:0;background:radial-gradient(circle at 30% 20%,rgba(255,255,255,.35),transparent 55%);pointer-events:none}
.tag{position:absolute;top:0;left:18px;display:flex;align-items:center;z-index:2}
.p.tr .tag,.p.br .tag{left:auto;right:18px}
.tag i{width:68px;height:68px;border-radius:50%;background:#fff;display:grid;place-items:center;border:4px solid var(--ink);flex:none;position:relative;z-index:1}
.b .tag i{border-color:var(--marigold)}
.tag i svg{width:34px;height:34px}
.tag div{background:var(--ink);color:#fff;padding:8px 18px 8px 22px;margin-left:-14px;border-radius:0 16px 16px 0}
.b .tag div{background:var(--ink);color:#fff;box-shadow:inset 0 -4px 0 var(--marigold)}
.tag b{display:block;font:700 22px/1 var(--display);padding-top:3px}
.tag small{display:block;font:500 13.5px/1.2 var(--body);opacity:.92}

.centerface{position:absolute;left:510px;top:200px;width:260px;height:260px}
.centerface svg{width:100%;height:100%;overflow:visible}
.a .centerface{animation:droop 2.6s ease-in-out infinite}
@keyframes droop{50%{transform:translateY(5px) scale(.98)}}
.a .centerface.burst{animation:shake .7s ease-in both}
@keyframes shake{0%{transform:none}20%{transform:translateX(-8px) rotate(-4deg)}40%{transform:translateX(8px) rotate(4deg) scale(1.05)}60%{transform:translateX(-6px) rotate(-3deg) scale(1.12)}100%{transform:scale(1.35);filter:brightness(1.6);opacity:0}}
.b .centerface{animation:bob 2.4s ease-in-out infinite}
.flash{position:absolute;left:640px;top:330px;width:40px;height:40px;margin:-20px 0 0 -20px;border-radius:50%;background:radial-gradient(circle,#fff 0 40%,var(--sun) 60%,rgba(255,197,49,0) 72%);opacity:0;pointer-events:none;z-index:10}
.flash.go{animation:flash .9s ease-out forwards}
@keyframes flash{0%{opacity:1;transform:scale(1)}60%{opacity:1;transform:scale(70)}100%{opacity:0;transform:scale(80)}}
.confetti{position:absolute;inset:0;pointer-events:none;overflow:hidden;z-index:0}
.p,.scene h2,.centerface{z-index:1}
.confetti span{position:absolute;bottom:-30px;width:14px;height:14px;border-radius:50%;opacity:.9;animation:rise linear infinite}
@keyframes rise{to{transform:translateY(-780px) rotate(540deg)}}
.skip{position:absolute;right:476px;bottom:26px;left:476px;margin:auto;width:max-content;z-index:5;font:600 15px/1 var(--display);padding:10px 16px 7px;border-radius:20px;background:rgba(255,255,255,.85);color:var(--ink)}

/* ---------- poster ---------- */
#screen-poster{background:#fff}
#screen-poster .rays{left:640px;top:250px;opacity:.45}
#posterCanvas{position:absolute;left:376px;top:24px;height:672px;width:auto;aspect-ratio:1080/1350;border-radius:10px;box-shadow:0 18px 50px rgba(45,57,140,.22),0 0 0 1px rgba(45,57,140,.08);background:#fff}
.poster-side{position:absolute;left:944px;top:230px;width:260px;display:flex;flex-direction:column;gap:12px}
.poster-side .btn{width:100%;flex:none}
.poster-side p{font:600 16px/1.35 var(--body);color:var(--ink-soft);margin-bottom:6px}
.poster-side p b{color:var(--ink);font:700 22px/1.1 var(--display);display:block;margin-bottom:4px}
.poster-note{position:absolute;left:60px;top:300px;width:260px;font:500 15px/1.5 var(--body);color:var(--ink-soft)}

/* ---------- crop modal (outside the stage, not scaled) ---------- */
#cropModal{position:fixed;inset:0;background:rgba(18,24,54,.72);display:none;align-items:center;justify-content:center;z-index:100;padding:16px}
#cropModal.open{display:flex}
.crop-box{background:#fff;border-radius:20px;padding:20px;width:min(360px,100%);text-align:center}
.crop-box h3{font:700 22px/1.2 var(--display);margin-bottom:4px}
.crop-box p{font-size:13.5px;color:var(--ink-soft);margin-bottom:12px}
#cropCanvas{width:100%;max-width:calc(100vh - 250px);margin:0 auto;aspect-ratio:1;border-radius:14px;touch-action:none;cursor:grab;background:#EEF0F6;display:block}
#cropCanvas:active{cursor:grabbing}
.zoom{display:flex;align-items:center;gap:10px;margin:14px 4px 4px;font:700 18px var(--display)}
.zoom input{flex:1;accent-color:var(--marigold)}

@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}
}